function ProductApp() {
  const [view, setView] = React.useState("runs");
  const [selected, setSelected] = React.useState("run_a91f2c70");
  const run = window.RUNS.find((r) => r.id === selected);
  const crumbs = view === "runs" ? ["Northwind", "Production", "Runs"] : ["Northwind", "Production", view.charAt(0).toUpperCase() + view.slice(1)];
  return (
    <div style={{ display: "flex", height: "100vh", background: "var(--color-background-dimmed)", color: "var(--color-text-dimmed)", overflow: "hidden" }}>
      <window.Sidebar active={view} onSelect={(v) => setView(v)} />
      <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
        <window.TopBar crumbs={run && view === "runs" ? crumbs.concat([run.id]) : crumbs} />
        <div style={{ display: "flex", flex: 1, minHeight: 0 }}>
          {view === "runs" ? <window.RunsView selected={selected} onSelect={setSelected} compact={!!run} /> : null}
          {view === "tasks" ? <window.TasksView /> : null}
          {view === "queues" ? <window.QueuesView /> : null}
          {["runs", "tasks", "queues"].indexOf(view) === -1 ? <window.EmptyView label={view} /> : null}
          {view === "runs" && run ? <window.RunDetail run={run} onClose={() => setSelected(null)} /> : null}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ProductApp />);