@spzxg/cli-ui 0.6.2 → 0.6.6

package/src/operator/node/Orchestrator.tsx

@@ -0,0 +1,634 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Icon } from "./icons";
+import { TerminalView, type TermApi } from "./Terminal";
+import { PROJ_W, TASK_W, DEFAULT_LAYOUT } from "./types";
+import { useOrchestrator } from "./useOrchestrator";
+import { ProjectsColumn } from "./ProjectsColumn";
+import { CliMsgList, CliChat } from "../../components";
+import type { ComponentProps } from "react";
+import type { TasksColumn as NodeTasksColumn } from "./TasksColumn";
+import type { SessionView as NodeSessionView } from "./SessionView";
+const TasksColumn=(props:ComponentProps<typeof NodeTasksColumn>)=><CliMsgList operator={props}/>;
+const SessionView=(props:ComponentProps<typeof NodeSessionView>)=><CliChat operator={props}/>;
+import { BoardWorkspace } from "./TaskBoard";
+
+import { ProjectLanding } from "./ProjectLanding";
+import { SettingsView } from "./SettingsView";
+import { InsightsView } from "./InsightsView";
+import { AppearancePanel } from "./AppearancePanel";
+import { ColResize, ColRail, TerminalDrawer, BootSkeleton } from "./Layout";
+import { ServicesDrawer } from "./Services";
+import { clientFeatures } from "./protocol/features";
+import { NewTaskModal, EditTaskModal, ContextModal, NewProjectModal, SessionsModal } from "./modals";
+import { OnboardingWizard } from "./OnboardingWizard";
+import { AgentNudge, AgentAuthBanner } from "./AgentConnect";
+import { WelcomeCoach, WelcomeNudge } from "./Welcome";
+import { Popover } from "./shared";
+import { NeedsYouMenu } from "./NeedsYouMenu";
+import { CommandPalette, type PaletteCommand } from "./CommandPalette";
+
+// Below this width the three columns can't coexist, so the workspace collapses to
+// one pane at a time (projects → tasks → session) with back affordances. matchMedia
+// keeps it in sync with rotation/resize; SSR renders the desktop layout (false) and
+// the effect corrects on mount — selection state alone drives which pane shows.
+const MOBILE_QUERY = "(max-width: 760px)";
+function useIsMobile() {
+  const [mobile, setMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia(MOBILE_QUERY);
+    const sync = () => setMobile(mq.matches);
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+  return mobile;
+}
+
+// Phone terminal: a full-screen sheet (vs. the cramped desktop bottom-drawer) so
+// output is actually legible. It's a read-mostly surface — glancing at a dev
+// server, reading an error, pasting the Claude login code, tapping the OAuth URL
+// — not a place to hand-type code, so input is just the few buttons people need.
+function MobileTerminalSheet({ cwd, port, visible, onClose }: { cwd: string; port?: number; visible: boolean; onClose: () => void }) {
+  const [epoch, setEpoch] = useState(0);   // bump → fresh shell
+  const [fontSize, setFontSize] = useState(13);
+  const apiRef = useRef<TermApi | null>(null);
+  const sheetRef = useRef<HTMLDivElement>(null);
+
+  // Pin the sheet to the *visual* viewport so the on-screen keyboard pushes the
+  // button-bar and output up rather than covering them. visualViewport shrinks
+  // when the keyboard opens; falling back to 100% when it's unavailable.
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv || !visible) return;
+    const apply = () => { if (sheetRef.current) sheetRef.current.style.height = `${vv.height}px`; };
+    apply();
+    vv.addEventListener("resize", apply);
+    vv.addEventListener("scroll", apply);
+    return () => { vv.removeEventListener("resize", apply); vv.removeEventListener("scroll", apply); };
+  }, [visible]);
+
+  const send = (d: string) => apiRef.current?.send(d);
+  const paste = async () => {
+    try { const t = await navigator.clipboard.readText(); if (t) send(t); } catch { /* clipboard blocked — long-press paste still works */ }
+  };
+
+  return (
+    <div ref={sheetRef} className={`mterm${visible ? "" : " hidden"}`}>
+      <div className="mterm-bar">
+        {Icon.terminal()}
+        <span className="mterm-cwd">{cwd || "~ (no working dir)"}</span>
+        <span style={{ flex: 1 }} />
+        <button className="icon-btn" onClick={() => setFontSize((f) => Math.max(9, f - 1))} title="缩小文字" aria-label="缩小文字">A−</button>
+        <button className="icon-btn" onClick={() => setFontSize((f) => Math.min(22, f + 1))} title="放大文字" aria-label="放大文字">A+</button>
+        <button className="icon-btn" onClick={() => setEpoch((e) => e + 1)} title="重启 shell">{Icon.clear()}</button>
+        <button className="icon-btn" onClick={onClose} title="关闭终端（shell 会继续运行）">{Icon.x()}</button>
+      </div>
+      <TerminalView key={epoch} cwd={cwd} port={port} fontSize={fontSize} onReady={(api) => { apiRef.current = api; }} />
+      <div className="mterm-keys">
+        <button className="mtk" onClick={paste}>粘贴</button>
+        <span style={{ flex: 1 }} />
+        <button className="mtk" onClick={() => send("\x03")} title="发送 Ctrl-C">Ctrl-C</button>
+        <button className="mtk mtk-enter" onClick={() => send("\r")}>⏎ Enter</button>
+      </div>
+    </div>
+  );
+}
+
+export default function Orchestrator({ board }: { board?: import("./boardInteraction").OperatorBoardOptions } = {}) {
+  const o = useOrchestrator();
+  const { project, task, selProj, selTask, layout } = o;
+  const isMobile = useIsMobile();
+  const features = clientFeatures();
+  const isDark = o.appearance.theme !== "light";
+  const [workspaceMenu,setWorkspaceMenu]=useState(false);
+  const [needsYouOpen, setNeedsYouOpen] = useState(false);
+  // Which Settings section to land on when opened programmatically (e.g. the
+  // "connect another agent" nudge deep-links to Agents). undefined = default.
+  const [settingsSection, setSettingsSection] = useState<string | undefined>();
+  const openSettings = (sect?: string) => { setSettingsSection(sect); o.setView("settings"); };
+  // Drop the open flag if the pill itself disappears (count → 0), so it doesn't
+  // silently re-open when a task next starts waiting.
+  useEffect(() => { if (o.needsYouTotal === 0) setNeedsYouOpen(false); }, [o.needsYouTotal]);
+
+  // ⌘K / Ctrl-K command palette. Same flag as the top-bar omni button, so
+  // re-enabling the feature turns on both the visual affordance and the shortcut.
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [clearRequest, setClearRequest] = useState<string | null>(null);
+  useEffect(() => setClearRequest(null), [selTask]);
+  const requestClear = (taskId: string) => setClearRequest(taskId);
+  const confirmClear = () => {
+    if (!clearRequest) return;
+    const taskId = clearRequest;
+    setClearRequest(null);
+    void o.clearSession(taskId);
+  };
+  const omniEnabled = features.omniSearch && !isMobile;
+  useEffect(() => {
+    if (!omniEnabled) return;
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setPaletteOpen((v) => !v);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [omniEnabled]);
+
+  // Board mode (desktop): the board replaces BOTH the tasks column and the
+  // session pane — it owns everything right of the projects sidebar. On mobile
+  // the board still renders inside the tasks pane (single-pane navigation).
+  const boardMode = o.taskView === "board" && !isMobile && o.view === "workspace" && !!project;
+  // The slide-over session panel opens only from an explicit card click — the
+  // app's auto-selection paths (landing on a project picks its first task)
+  // just highlight the card, they don't pop a panel over the board.
+  const [boardPanel, setBoardPanel] = useState(false);
+  const openBoardTask = (id: string) => { o.setSelTask(id); setBoardPanel(true); };
+  const closeBoardPanel = () => { setBoardPanel(false); o.setSelTask(null); };
+  const setTaskView = (v: "list" | "board") => {
+    if (v === "board") setBoardPanel(false);
+    o.setTaskView(v);
+  };
+
+  // ⌘⇧B — flip list/board (sticky, same pref the header toggles write).
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "b") {
+        e.preventDefault();
+        setTaskView(o.taskView === "board" ? "list" : "board");
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
+
+  // Esc closes the board's slide-over session panel (back to the full board).
+  useEffect(() => {
+    if (!boardMode || !task || !boardPanel) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !paletteOpen) { e.preventDefault(); closeBoardPanel(); }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
+
+  // Server-side time-in-app + retention pulse: ping on load, then every 2 min
+  // while the tab is open. The route turns the first ping (or one after a long
+  // gap) into app_opened and the rest into heartbeat (see app/api/heartbeat).
+  useEffect(() => {
+    const beat = () => { void fetch("/api/heartbeat", { method: "POST", keepalive: true }).catch(() => {}); };
+    beat();
+    const iv = setInterval(() => { if (!document.hidden) beat(); }, 120_000);
+    return () => clearInterval(iv);
+  }, []);
+
+  // On a phone only one of these is mounted at a time; on desktop the same
+  // elements sit side by side. Which pane shows is derived purely from the
+  // selection state, so the titlebar "needs you" pill (which drives selection)
+  // navigates correctly from any level.
+  const mobilePane: "projects" | "tasks" | "session" | "settings" | "insights" =
+    o.view === "settings" ? "settings" : o.view === "insights" ? "insights" : !project ? "projects" : !task ? "tasks" : "session";
+
+  const projectsColumn = (
+    <ProjectsColumn
+      mobile={isMobile}
+      width={layout.projW} onCollapse={() => o.setLayout((l) => ({ ...l, projCollapsed: true }))}
+      projects={o.activeProjects} deprecated={o.deprecatedProjects} agents={o.agents.agents} selId={selProj} running={o.running}
+      onSelect={o.selectProject} onNew={() => o.setModal("project")} onOpenAppearance={() => o.setAppearanceOpen((t) => !t)}
+      onReorder={o.reorderProjects} onRestore={(id) => o.setDeprecated(id, false)}
+      settingsActive={o.view === "settings"} onOpenSettings={() => openSettings()}
+    />
+  );
+
+  const tasksColumn = project && (
+    <TasksColumn
+      mobile={isMobile}
+      onBack={isMobile ? () => window.history.back() : undefined}
+      width={layout.taskW}
+      onCollapse={() => o.setLayout((l) => ({ ...l, taskCollapsed: true }))}
+      project={project} agents={o.agents} tasks={o.realTasks} suggested={o.suggested} selTaskId={selTask} running={o.running} blockedBy={o.blockedBy}
+      loading={o.tasksLoading}
+      view={o.taskView} onSetView={setTaskView} onMoveTask={o.moveTask}
+      onSelectTask={o.setSelTask} onNewTask={() => o.setModal("task")} onEditContext={() => o.setModal("context")}
+      onShowSessions={() => o.setModal("sessions")} onShowRecap={() => o.setSelTask(null)} onEditTask={o.setEditId}
+      onStartSuggestion={o.startSuggestion} onAcceptSuggestion={o.acceptSuggestion} onDismissSuggestion={o.dismissSuggestion}
+    />
+  );
+
+  const sessionColumn = (
+    <div className="col col-session">
+      {project?.seeded === 1 && !isMobile && <WelcomeCoach />}
+      <div className="session-body">
+        {task && project ? (
+          <SessionView board={board}
+            key={task.id}
+            mobile={isMobile}
+            onBack={isMobile ? () => window.history.back() : undefined}
+            project={project} task={task} tasks={o.realTasks} onSelectTask={o.setSelTask} onFork={o.forkFromTasks} agents={o.agents} messages={o.messages} running={o.running.has(task.id)} blockedBy={o.blockedBy.get(task.id)}
+            transcriptLoading={o.transcriptLoading} older={o.olderCount} onLoadOlder={o.loadOlderMessages}
+            onSend={(text) => o.runTurn(task.id, text, false)}
+            onStart={() => o.runTurn(task.id, "", true)}
+            onStop={() => o.stopTurn(task.id)}
+            onClear={() => requestClear(task.id)} clearConfirming={clearRequest === task.id} onConfirmClear={confirmClear} onCancelClear={() => setClearRequest(null)} onEdit={() => o.setEditId(task.id)}
+            onReconnect={() => openSettings("agents")}
+            onSetStatus={o.setStatus} onSetPriority={o.setPriority} onSetModel={o.setModel} onSetAgent={o.setAgent}
+            onSetReasoning={o.setReasoning} onSetPermission={o.setPermission} onSetSendContext={o.setSendContext}
+            onResolveWithAI={o.resolveConflictsWithAI}
+            onMerged={o.onMerged}
+            onPrCreated={o.onPrCreated}
+            onAnswer={(askId, questions, answers) => o.answerQuestion(task.id, askId, questions, answers)}
+            onCancelQueued={(pendingId) => o.cancelQueued(task.id, pendingId)}
+            railW={layout.railW}
+            onRailWidth={(w) => o.setLayout((l) => ({ ...l, railW: w }))}
+            onRailReset={() => o.setLayout((l) => ({ ...l, railW: DEFAULT_LAYOUT.railW }))}
+            railCollapsed={layout.railCollapsed}
+            onRailCollapse={() => o.setLayout((l) => ({ ...l, railCollapsed: true }))}
+            onRailExpand={() => o.setLayout((l) => ({ ...l, railCollapsed: false }))}
+          />
+        ) : project ? (
+          <ProjectLanding
+            project={project}
+            recap={o.recaps[project.id]}
+            onNewTask={() => o.setModal("task")}
+            onRefreshRecap={() => o.fetchRecap(project.id, true)}
+          />
+        ) : (
+          <div className="empty" style={{ margin: "auto" }}>
+            <div className="e-ic">{Icon.bolt()}</div>
+            <div className="e-t">未选择任务</div>
+            <div className="e-s">创建一个任务来启动智能体会话。</div>
+          </div>
+        )}
+      </div>
+      {project && features.services && o.servicesMounted && !isMobile && (
+        <ServicesDrawer
+          key={`svc-${project.id}`}
+          projectId={project.id}
+          hasConfig={!!(project.dev_command || project.setup_command || project.test_command)}
+          visible={o.servicesOpen}
+          height={o.servicesHeight}
+          onClose={() => o.setServicesOpen(false)}
+          onResize={o.setServicesHeight}
+        />
+      )}
+      {project && o.termMounted && !isMobile && (
+        <TerminalDrawer
+          key={project.id}
+          cwd={project.repo_path}
+          taskDir={task?.worktree_path || undefined}
+          taskTitle={task?.title}
+          port={project.port}
+          visible={o.termOpen}
+          height={o.termHeight}
+          onClose={() => o.setTermOpen(false)}
+          onResize={o.setTermHeight}
+        />
+      )}
+    </div>
+  );
+
+  // Board mode's full-workspace surface: header + board, with the slide-over
+  // session panel and the project drawers mounted on top (so the titlebar's
+  // Services/Terminal toggles keep working while the board is up).
+  const boardWorkspace = project && (
+    <BoardWorkspace
+      project={project} agents={o.agents} tasks={o.realTasks} suggested={o.suggested}
+      selTaskId={selTask} running={o.running} blockedBy={o.blockedBy} loading={o.tasksLoading}
+      onSetView={setTaskView} onMoveTask={o.moveTask}
+      onSelectTask={openBoardTask} onNewTask={() => o.setModal("task")} onEditContext={() => o.setModal("context")}
+      onShowSessions={() => o.setModal("sessions")} onEditTask={o.setEditId}
+      onStartSuggestion={o.startSuggestion} onAcceptSuggestion={o.acceptSuggestion} onDismissSuggestion={o.dismissSuggestion}
+    >
+      {task && boardPanel && (
+        <>
+          <div className="bpanel-scrim" onClick={closeBoardPanel} />
+          <div className="bpanel">
+            <div className="bpanel-bar">
+              <button className="icon-btn" title="展开为列表 + 对话布局" onClick={() => o.setTaskView("list")}>{Icon.external()}</button>
+              <span className="bp-hint">按 esc 返回看板</span>
+              <span className="spacer" />
+              <button className="icon-btn" title="返回看板" onClick={closeBoardPanel}>{Icon.x()}</button>
+            </div>
+            <div className="session-body">
+              <SessionView board={board}
+                key={task.id}
+                project={project} task={task} tasks={o.realTasks} onSelectTask={o.setSelTask} onFork={o.forkFromTasks} agents={o.agents} messages={o.messages} running={o.running.has(task.id)} blockedBy={o.blockedBy.get(task.id)}
+                transcriptLoading={o.transcriptLoading} older={o.olderCount} onLoadOlder={o.loadOlderMessages}
+                onSend={(text) => o.runTurn(task.id, text, false)}
+                onStart={() => o.runTurn(task.id, "", true)}
+                onStop={() => o.stopTurn(task.id)}
+                onClear={() => requestClear(task.id)} clearConfirming={clearRequest === task.id} onConfirmClear={confirmClear} onCancelClear={() => setClearRequest(null)} onEdit={() => o.setEditId(task.id)}
+                onReconnect={() => openSettings("agents")}
+                onSetStatus={o.setStatus} onSetPriority={o.setPriority} onSetModel={o.setModel} onSetAgent={o.setAgent}
+                onSetReasoning={o.setReasoning} onSetPermission={o.setPermission} onSetSendContext={o.setSendContext}
+                onResolveWithAI={o.resolveConflictsWithAI}
+                onMerged={o.onMerged}
+                onPrCreated={o.onPrCreated}
+                onAnswer={(askId, questions, answers) => o.answerQuestion(task.id, askId, questions, answers)}
+                onCancelQueued={(pendingId) => o.cancelQueued(task.id, pendingId)}
+                railW={layout.railW}
+                onRailWidth={(w) => o.setLayout((l) => ({ ...l, railW: w }))}
+                onRailReset={() => o.setLayout((l) => ({ ...l, railW: DEFAULT_LAYOUT.railW }))}
+                railCollapsed={layout.railCollapsed}
+                onRailCollapse={() => o.setLayout((l) => ({ ...l, railCollapsed: true }))}
+                onRailExpand={() => o.setLayout((l) => ({ ...l, railCollapsed: false }))}
+              />
+            </div>
+          </div>
+        </>
+      )}
+      {features.services && o.servicesMounted && (
+        <ServicesDrawer
+          key={`svc-${project.id}`}
+          projectId={project.id}
+          hasConfig={!!(project.dev_command || project.setup_command || project.test_command)}
+          visible={o.servicesOpen}
+          height={o.servicesHeight}
+          onClose={() => o.setServicesOpen(false)}
+          onResize={o.setServicesHeight}
+        />
+      )}
+      {o.termMounted && (
+        <TerminalDrawer
+          key={project.id}
+          cwd={project.repo_path}
+          taskDir={task?.worktree_path || undefined}
+          taskTitle={task?.title}
+          port={project.port}
+          visible={o.termOpen}
+          height={o.termHeight}
+          onClose={() => o.setTermOpen(false)}
+          onResize={o.setTermHeight}
+        />
+      )}
+    </BoardWorkspace>
+  );
+
+  const insightsColumn = (
+    <InsightsView agents={o.agents} onClose={() => o.setView("workspace")} onOpenSettings={openSettings} />
+  );
+
+  const settingsColumn = (
+    <SettingsView
+      key={settingsSection ?? "default"}
+      settings={o.settings}
+      setSetting={o.setSetting}
+      appDefaults={o.appDefaults}
+      setAppDefault={o.setAppDefault}
+      agents={o.agents}
+      onAgentsRefresh={o.refreshAgents}
+      onReset={o.resetSettings}
+      onRerunSetup={o.rerunOnboarding}
+      onClose={() => o.setView("workspace")}
+      initialSection={settingsSection}
+    />
+  );
+
+  return (
+    <div className={`cli-ui app${isMobile ? " mobile" : ""}`} data-theme={o.appearance.theme}>
+      <div className="titlebar">
+        <div className="tb-left">
+          <div className="tb-logo" title="Operator">
+            <span className="tb-ring"><span className="tb-core" /><span className="tb-arc" /></span>
+            <span className="tb-word">OPERATOR</span>
+          </div>
+          {!isMobile && (
+            <>
+              <span className="tb-div" />
+              <div className="tb-crumb">
+                <span className="cz">fleet</span><span className="cs">/</span>
+                <span className="cn">{o.view === "insights" ? "insights" : project ? project.name : "—"}</span>
+              </div>
+            </>
+          )}
+        </div>
+
+        {omniEnabled && (
+          <button className="tb-omni" onClick={() => setPaletteOpen(true)} title="命令面板 —— 跳转到项目、会话或命令">
+            <span className="omni-ic">{Icon.search()}</span>
+            <span className="omni-txt">跳转到项目、会话或命令…</span>
+            <span className="omni-k">⌘K</span>
+          </button>
+        )}
+
+        <div className="tb-right">
+          {o.needsYouTotal > 0 && (
+            <div style={{ position: "relative" }}>
+              <button
+                className="needs-you-pill"
+                onClick={(e) => { e.stopPropagation(); setNeedsYouOpen((v) => !v); }}
+                title="选择一个等待你处理的任务"
+              >
+                <span className="ny-dot" />
+                {o.needsYouTotal} 项待处理
+              </button>
+              {needsYouOpen && (
+                <NeedsYouMenu
+                  onJump={(projectId, taskId) => o.goToTask(projectId, taskId)}
+                  onClose={() => setNeedsYouOpen(false)}
+                />
+              )}
+            </div>
+          )}
+          {isMobile && <div style={{ position: "relative" }}>
+            <button className="tb-icon workspace-menu" aria-label="工作区菜单" aria-expanded={workspaceMenu} onClick={(e) => { e.stopPropagation(); setWorkspaceMenu(!workspaceMenu); }}>{Icon.dots()}</button>
+            {workspaceMenu && <Popover onClose={() => setWorkspaceMenu(false)}>
+              <button className="pop-item" onClick={() => { setWorkspaceMenu(false); openSettings(); }}>{Icon.gear()} 设置</button>
+              <button className="pop-item" onClick={() => { setWorkspaceMenu(false); o.setAppearance("theme", isDark ? "light" : "dark"); }}>{isDark ? Icon.sun() : Icon.moon()} 切换主题</button>
+              <button className="pop-item" disabled={!project} onClick={() => { setWorkspaceMenu(false); o.setTermMounted(true); o.setTermOpen(true); }}>{Icon.terminal()} 项目终端</button>
+              {features.services && <button className="pop-item" disabled={!project} onClick={()=>{setWorkspaceMenu(false);o.setServicesMounted(true);o.setServicesOpen(true);}}>{Icon.sliders()} 项目服务</button>}
+              <button className="pop-item" onClick={()=>{setWorkspaceMenu(false);o.setAppearanceOpen(true);}}>{Icon.sliders()} 外观设置</button>
+              <button className="pop-item" onClick={() => { setWorkspaceMenu(false); o.setView("insights"); }}>{Icon.chart()} 用量洞察</button>
+            </Popover>}
+          </div>}
+
+          <div className="tb-actions">
+            {features.services && (
+              <button
+                className={`tb-btn${o.servicesOpen ? " on" : ""}`}
+                disabled={!project}
+                title={project ? "开关该项目的托管服务（开发服务器、初始化、测试）" : "请先选择一个项目"}
+                onClick={() => { if (!project) return; o.setServicesMounted(true); o.setServicesOpen((s) => !s); }}
+              >
+                {Icon.sliders()} 服务
+              </button>
+            )}
+            <button
+              className={`tb-btn${o.termOpen ? " on" : ""}`}
+              disabled={!project}
+              title={project ? "开关终端（项目工作目录 —— 可在抽屉中切换到所选任务的 worktree）" : "请先选择一个项目"}
+              onClick={() => { if (!project) return; o.setTermMounted(true); o.setTermOpen((t) => !t); }}
+            >
+              {Icon.terminal()} 终端
+            </button>
+            <button className="tb-btn" onClick={() => o.setAppearanceOpen((t) => !t)} title="外观">{Icon.sliders()} 外观</button>
+          </div>
+
+          <button
+            className={`tb-icon${o.view === "insights" ? " on" : ""}`}
+            title="洞察 —— 花费、token、已交付任务、已合并代码" aria-label="洞察"
+            onClick={() => o.setView(o.view === "insights" ? "workspace" : "insights")}
+          >
+            {Icon.chart()}
+          </button>
+          <button className="tb-icon" title={isDark ? "切换到浅色主题" : "切换到深色主题"} aria-label="切换主题" onClick={() => o.setAppearance("theme", isDark ? "light" : "dark")}>
+            {isDark ? Icon.sun() : Icon.moon()}
+          </button>
+          <div className="tb-avatar" title={o.accessEmail ? `已登录：${o.accessEmail}` : "你的工作区"}>
+            {(o.accessEmail?.[0] ?? "A").toUpperCase()}
+          </div>
+        </div>
+      </div>
+
+      {/* An agent's login died — nothing can run until it's reconnected, and that
+          is true for every project, so it lives above the whole workspace rather
+          than inside the task that happened to hit it first. */}
+      <AgentAuthBanner broken={o.brokenAgents} onReconnect={() => openSettings("agents")} />
+
+      <div className={`body${isMobile ? " mobile" : ""}`}>
+        {o.bootError ? (
+          // The very first fetch failed — nothing to render behind this, so a
+          // centered retry beats an empty workspace that looks "hung".
+          <div className="empty" style={{ margin: "auto" }}>
+            <div className="e-ic">{Icon.bolt()}</div>
+            <div className="e-t">无法连接工作区</div>
+            <div className="e-s">{o.bootError}</div>
+            <button className="btn btn-line" style={{ marginTop: 16 }} onClick={o.retryBoot}>{Icon.restore()} 重试</button>
+          </div>
+        ) : !o.booted ? (
+          <BootSkeleton mobile={isMobile} />
+        ) : isMobile ? (
+          mobilePane === "projects" ? projectsColumn
+            : mobilePane === "settings" ? settingsColumn
+            : mobilePane === "insights" ? insightsColumn
+            : mobilePane === "tasks" ? tasksColumn
+            : sessionColumn
+        ) : (
+          <>
+            {layout.projCollapsed ? (
+              <ColRail label="项目" onExpand={() => o.setLayout((l) => ({ ...l, projCollapsed: false }))} />
+            ) : (
+              <>
+                {projectsColumn}
+                <ColResize
+                  min={PROJ_W.min} max={PROJ_W.max}
+                  onWidth={(w) => o.setLayout((l) => ({ ...l, projW: w }))}
+                  onReset={() => o.setLayout((l) => ({ ...l, projW: DEFAULT_LAYOUT.projW }))}
+                />
+              </>
+            )}
+
+            {o.view === "settings" ? settingsColumn : o.view === "insights" ? insightsColumn : boardMode ? boardWorkspace : (
+              <>
+                {project ? (
+                  layout.taskCollapsed ? (
+                    <ColRail label="任务" task onExpand={() => o.setLayout((l) => ({ ...l, taskCollapsed: false }))} />
+                  ) : (
+                    <>
+                      {tasksColumn}
+                      <ColResize
+                        min={TASK_W.min} max={TASK_W.max}
+                        onWidth={(w) => o.setLayout((l) => ({ ...l, taskW: w }))}
+                        onReset={() => o.setLayout((l) => ({ ...l, taskW: DEFAULT_LAYOUT.taskW }))}
+                      />
+                    </>
+                  )
+                ) : (
+                  // First-run (or everything deprecated): make the empty shell a
+                  // doorway, not a dead end — explain what a project is and offer
+                  // the create action right here.
+                  <div className="col col-tasks">
+                    <div className="empty" style={{ margin: "auto", maxWidth: 300 }}>
+                      <div className="e-ic">{Icon.folder()}</div>
+                      <div className="e-t">{o.projects.length > 0 ? "没有活跃项目" : "还没有项目"}</div>
+                      <div className="e-s">
+                        {o.projects.length > 0
+                          ? "所有项目都已归档 —— 可从侧栏恢复一个，或新建一个。"
+                          : "每个项目都是你在构建的一个应用：拥有各自的工作目录、上下文和智能体会话。"}
+                      </div>
+                      <button className="btn btn-accent" style={{ marginTop: 16 }} onClick={() => o.setModal("project")}>
+                        {Icon.plus()} {o.projects.length > 0 ? "新建项目" : "创建第一个项目"}
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {sessionColumn}
+              </>
+            )}
+          </>
+        )}
+      </div>
+
+      {o.modal === "task" && project && <NewTaskModal project={project} agents={o.agents} tasks={o.realTasks} onClose={() => o.setModal(null)} onCreate={o.createTask} onOpenSetup={o.rerunOnboarding} />}
+      {o.editId && o.tasks.find((t) => t.id === o.editId) && (
+        <EditTaskModal task={o.tasks.find((t) => t.id === o.editId)!} tasks={o.realTasks} agents={o.agents} onClose={() => o.setEditId(null)} onSave={o.saveTask} onDelete={o.removeTask} onOpenSetup={o.rerunOnboarding} />
+      )}
+      {o.modal === "context" && project && <ContextModal project={project} agents={o.agents} onSetDefaultAgent={o.setProjectDefaultAgent} onClose={() => o.setModal(null)} onSave={o.saveContext} onDelete={() => o.removeProject(project.id)} onDeprecate={() => o.setDeprecated(project.id, true)} />}
+      {o.modal === "project" && <NewProjectModal onClose={() => o.setModal(null)} onCreate={o.createProject} />}
+      {o.modal === "sessions" && project && (
+        <SessionsModal
+          project={project}
+          onClose={() => o.setModal(null)}
+          onJump={(taskId) => { o.setSelTask(taskId); o.setModal(null); }}
+        />
+      )}
+
+      {/* ⌘K palette. Commands are assembled here (not inside the palette) so each
+          row can close over the same handlers the top bar and rails use; rows that
+          need a project/task are simply omitted when there isn't one. */}
+      {paletteOpen && (
+        <CommandPalette
+          projects={o.activeProjects}
+          commands={([
+            { id: "new-project", label: "新建项目", keywords: "new project create add repo xinjian xiangmu", icon: Icon.plus(), run: () => o.setModal("project") },
+            project && { id: "new-task", label: "新建任务", hint: `在 ${project.name} 中`, keywords: "new task session create start renwu", icon: Icon.plus(), run: () => o.setModal("task") },
+            project && { id: "toggle-task-view", label: o.taskView === "board" ? "以列表显示任务" : "以看板显示任务", hint: "⌘⇧B", keywords: "kanban board list columns view kanban liebiao", icon: o.taskView === "board" ? Icon.list() : Icon.board(), run: () => setTaskView(o.taskView === "board" ? "list" : "board") },
+            { id: "toggle-theme", label: "切换主题", hint: isDark ? "切换到浅色" : "切换到深色", keywords: "theme dark light mode appearance zhuti", icon: isDark ? Icon.sun() : Icon.moon(), run: () => o.setAppearance("theme", isDark ? "light" : "dark") },
+            { id: "open-settings", label: "打开设置", keywords: "settings preferences defaults setup shezhi", icon: Icon.gear(), run: () => openSettings() },
+            { id: "open-insights", label: "打开洞察", keywords: "insights usage spend cost tokens analytics dashboard metrics stats dongcha", icon: Icon.chart(), run: () => o.setView("insights") },
+            { id: "connect-agent", label: "连接智能体", keywords: "codex claude agent connect login subscription zhinengti", icon: Icon.bolt(), run: () => openSettings("agents") },
+            { id: "open-appearance", label: "打开外观设置", keywords: "appearance density theme dark light mode waiguan", icon: Icon.sliders(), run: () => o.setAppearanceOpen(true) },
+            project && features.services && { id: "toggle-services", label: "开关服务面板", hint: o.servicesOpen ? "隐藏" : "显示", keywords: "services dev server setup test drawer fuwu", icon: Icon.sliders(), run: () => { o.setServicesMounted(true); o.setServicesOpen((s) => !s); } },
+            project && { id: "toggle-terminal", label: "开关终端", hint: o.termOpen ? "隐藏" : "显示", keywords: "terminal shell console pty zhongduan", icon: Icon.terminal(), run: () => { o.setTermMounted(true); o.setTermOpen((t) => !t); } },
+            task && task.started === 1 && !o.running.has(task.id) && { id: "clear-session", label: "/clear 清空当前会话", hint: task.title, keywords: "clear new session restart fresh context compact qingkong", icon: Icon.clear(), run: () => requestClear(task.id) },
+          ] as (PaletteCommand | false | null)[]).filter((c): c is PaletteCommand => !!c)}
+          onPickProject={o.selectProject}
+          onPickTask={o.goToTask}
+          onClose={() => setPaletteOpen(false)}
+        />
+      )}
+
+      {o.appearanceOpen && <AppearancePanel appearance={o.appearance} setAppearance={o.setAppearance} onClose={() => o.setAppearanceOpen(false)} />}
+
+      {/* Phone terminal lives as a full-screen sheet over everything. Kept mounted
+          (hidden) while a project is selected so a dev server survives pane hops. */}
+      {isMobile && project && o.termMounted && (
+        <MobileTerminalSheet key={project.id} cwd={project.repo_path} port={project.port} visible={o.termOpen} onClose={() => o.setTermOpen(false)} />
+      )}
+
+      {/* First-run onboarding — a full-screen wizard over the (empty) workspace
+          on a fresh instance, or when re-run from Settings. */}
+      {o.wizardOpen && o.onboarding && (
+        <OnboardingWizard initial={o.onboarding} onFinish={o.finishWizard} />
+      )}
+
+      {/* Optional post-setup nudge to connect a second agent (Codex). Only once
+          the required first-run wizard is done, and never stacked on the wizard
+          or the tutorial-payoff modal. Dismissible once (localStorage). */}
+      {o.onboarding?.complete && !o.wizardOpen && !o.nudge && (
+        <AgentNudge ready onConnect={() => openSettings("agents")} />
+      )}
+
+      {/* Post-tutorial payoff: fires once the seeded "Welcome" task is merged. */}
+      {o.nudge && (
+        <WelcomeNudge
+          onClose={() => o.setNudge(false)}
+          onCreateProject={() => { o.setNudge(false); o.setModal("project"); }}
+        />
+      )}
+    </div>
+  );
+}