@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/pages/OverviewPage.tsx

@@ -0,0 +1,124 @@
+import { Link } from "react-router";
+import { useOverview, type OverviewItem } from "../hooks.ts";
+import { StateDot } from "../components/Shell.tsx";
+import { Button } from "../ui/Button.tsx";
+import { EmptyState, Skeleton, Tag } from "../ui/Form.tsx";
+import { ChevronRightIcon, ClockIcon, FolderIcon, ListIcon, RefreshIcon, SparkIcon } from "../ui/icons.tsx";
+
+/** Everything that is running or waiting for the user, across projects. */
+export function OverviewPage() {
+  const overview = useOverview();
+  const items = overview.data ?? [];
+  const waiting = items.filter((o) => o.waitingFor.length > 0 || o.state === "requires_action").length;
+  const running = items.filter((o) => o.state === "running").length;
+  const crons = items.some((o) => o.cronIds !== undefined)
+    ? new Set(items.flatMap((o) => o.cronIds ?? [])).size
+    : items.reduce((n, o) => n + o.crons, 0);
+  const tasks = items.reduce((n, o) => n + o.tasks, 0);
+
+  // Waiting first (they need the user), then running, then the rest; grouped by project.
+  const rank = (o: OverviewItem) => (o.waitingFor.length || o.state === "requires_action" ? 0 : o.state === "running" ? 1 : 2);
+  const groups = new Map<string, { name: string; items: OverviewItem[] }>();
+  for (const o of [...items].sort((a, b) => rank(a) - rank(b))) {
+    const g = groups.get(o.projectId) ?? { name: o.projectName, items: [] };
+    g.items.push(o);
+    groups.set(o.projectId, g);
+  }
+
+  return (
+    <main className="min-h-0 flex-1 overflow-y-auto">
+      <div className="mx-auto max-w-4xl px-4 py-8 md:px-8 md:py-10">
+        <div className="flex flex-wrap items-start gap-3">
+          <div className="min-w-0 flex-1">
+            <h1 className="text-3xl">运行总览</h1>
+            <p className="mt-1 text-sm text-muted">所有项目里正在运行、等你处理，或有定时任务的会话。每 30 秒自动刷新。</p>
+          </div>
+          <Button size="sm" variant="ghost" icon={<RefreshIcon />} onClick={() => overview.refetch()} loading={overview.isFetching}>
+            刷新
+          </Button>
+        </div>
+
+        <div className="mt-6 grid grid-cols-2 gap-3 md:grid-cols-4">
+          <Stat label="等你处理" value={waiting} tone={waiting ? "warn" : undefined} />
+          <Stat label="运行中" value={running} tone={running ? "accent" : undefined} />
+          <Stat label="定时任务" value={crons} />
+          <Stat label="后台任务" value={tasks} />
+        </div>
+
+        {overview.isPending && (
+          <div className="mt-8">
+            <Skeleton rows={3} />
+          </div>
+        )}
+        <div className="mt-8 space-y-6" data-testid="overview-list">
+          {[...groups.entries()].map(([pid, g]) => (
+            <section key={pid}>
+              <div className="mb-2 flex items-center gap-2">
+                <FolderIcon className="text-muted" />
+                <Link to={`/p/${pid}`} className="text-sm font-medium hover:text-accent">
+                  {g.name}
+                </Link>
+                <span className="text-xs text-muted">{g.items.length} 个会话</span>
+              </div>
+              <ul className="grid gap-2 md:grid-cols-2">
+                {g.items.map((o) => (
+                  <li key={o.sessionId}>
+                    <Link
+                      to={`/p/${o.projectId}/s/${o.sessionId}`}
+                      className="flex h-full items-start gap-3 rounded-xl border border-border bg-surface px-4 py-3 shadow-sm transition-colors hover:border-muted/40"
+                      data-testid="overview-item"
+                      data-state={o.state}
+                    >
+                      <span className="mt-1.5">
+                        <StateDot state={o.state} />
+                      </span>
+                      <span className="min-w-0 flex-1">
+                        <span className="line-clamp-2 text-sm font-medium">{o.title}</span>
+                        <span className="mt-1.5 flex flex-wrap gap-1.5">
+                          {o.waitingFor.includes("ask") && <Tag tone="warn">等你回答问题</Tag>}
+                          {o.waitingFor.includes("plan") && <Tag tone="warn">等你审批计划</Tag>}
+                          {o.state === "running" && (
+                            <Tag tone="accent" icon={<SparkIcon size={11} />}>
+                              运行中
+                            </Tag>
+                          )}
+                          {o.crons > 0 && <Tag icon={<ClockIcon size={11} />}>{o.crons} 个定时任务</Tag>}
+                          {o.tasks > 0 && <Tag icon={<ListIcon size={11} />}>{o.tasks} 个后台任务</Tag>}
+                        </span>
+                      </span>
+                      <ChevronRightIcon className="mt-1 shrink-0 text-muted" />
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+        {overview.isSuccess && items.length === 0 && (
+          <div className="mt-2">
+            <EmptyState
+              icon={<SparkIcon size={16} />}
+              title="现在没有正在运行的会话"
+              action={
+                <Link to="/" className="inline-flex h-10 items-center rounded-md border border-border bg-surface px-3 text-sm font-medium hover:bg-surface-2 md:h-8">
+                  去项目列表
+                </Link>
+              }
+            >
+              会话开始运行、需要你回答问题或审批计划、设置了定时任务时，会出现在这里，方便在多个项目之间来回照看。
+            </EmptyState>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+
+function Stat({ label, value, tone }: { label: string; value: number; tone?: "accent" | "warn" }) {
+  return (
+    <div className="rounded-xl border border-border bg-surface px-4 py-3">
+      <div className="text-xs text-muted">{label}</div>
+      <div className={`mt-1 font-serif text-2xl tabular-nums ${tone === "accent" ? "text-accent" : tone === "warn" ? "text-amber-600 dark:text-amber-400" : ""}`}>{value}</div>
+    </div>
+  );
+}

package/web/src/pages/ProjectHome.tsx

@@ -0,0 +1,136 @@
+import { Link, useNavigate } from "react-router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { GitStatus } from "@shared/files.ts";
+import type { SessionListItem } from "@shared/protocol.ts";
+import { api } from "../api.ts";
+import { relativeTime, useProjects, useSessions } from "../hooks.ts";
+import { Button } from "../ui/Button.tsx";
+import { BranchIcon, FolderIcon } from "../ui/icons.tsx";
+import { PlusIcon } from "../components/icons.tsx";
+import { StateDot } from "../components/Shell.tsx";
+import { CopyButton } from "../components/CopyButton.tsx";
+import { projectFilesUrl, useProjectFilesState } from "../project-files-state.ts";
+
+/** Desktop landing page of a project: what is going on in it, and the way back into recent work. */
+export function ProjectHome({ pid }: { pid: string }) {
+  const files = useProjectFilesState(pid);
+  const project = useProjects().data?.find((p) => p.id === pid);
+  const sessions = useSessions(pid);
+  const git = useQuery({ queryKey: ["git-status", pid], queryFn: () => api<GitStatus>(`/api/projects/${pid}/git/status`), staleTime: 15_000 });
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const create = useMutation({
+    mutationFn: () => api<{ id: string }>(`/api/projects/${pid}/sessions`, { method: "POST" }),
+    onSuccess: ({ id }) => {
+      qc.invalidateQueries({ queryKey: ["sessions", pid] });
+      navigate(`/p/${pid}/s/${id}`);
+    },
+  });
+
+  const all = (sessions.data ?? []).filter((s) => !s.archived);
+  const running = all.filter((s) => s.state === "running").length;
+  const waiting = all.filter((s) => s.state === "requires_action" || s.needsAttention).length;
+  const changes = git.data?.isRepo ? git.data.changes.length : undefined;
+  const recent = [...all].sort((a, b) => b.lastModified - a.lastModified).slice(0, 8);
+
+  return (
+    <main className="min-h-0 flex-1 overflow-y-auto" data-testid="project-home">
+      <div className="mx-auto max-w-4xl px-8 py-10">
+        <div className="flex items-start gap-4">
+          <div className="min-w-0 flex-1">
+            <h1 className="truncate text-3xl">{project?.name ?? "项目"}</h1>
+            <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+              <span className="inline-flex min-w-0 max-w-full items-center gap-1.5 font-mono">
+                <FolderIcon className="shrink-0" />
+                <span className="min-w-0 truncate" title={project?.path}>{project?.path}</span>
+                {project?.path && <CopyButton key={project.path} text={project.path} label="复制项目路径" />}
+              </span>
+              {git.data?.isRepo && git.data.branch && (
+                <span className="inline-flex min-w-0 items-center gap-1.5 font-mono">
+                  <BranchIcon className="shrink-0" />
+                  <span className="truncate">{git.data.branch}</span>
+                </span>
+              )}
+            </div>
+          </div>
+          <Button variant="primary" icon={<PlusIcon />} onClick={() => create.mutate()} loading={create.isPending}>
+            新会话
+          </Button>
+        </div>
+
+        <div className="mt-8 grid grid-cols-2 gap-3 lg:grid-cols-4">
+          <Stat label="会话" value={all.length} />
+          <Stat label="运行中" value={running} tone={running ? "accent" : undefined} />
+          <Stat label="等你处理" value={waiting} tone={waiting ? "warn" : undefined} />
+          <Stat label="未提交改动" value={changes ?? "—"} to={changes !== undefined ? `/p/${pid}/changes` : undefined} />
+        </div>
+
+        <section className="mt-10">
+          <div className="mb-3 flex items-baseline justify-between">
+            <h2 className="text-lg">最近的会话</h2>
+            <span className="text-xs text-muted">{all.length > recent.length ? `另有 ${all.length - recent.length} 个在左侧列表` : ""}</span>
+          </div>
+          {recent.length ? (
+            <ul className="grid gap-2 md:grid-cols-2">
+              {recent.map((s) => (
+                <li key={s.id}>
+                  <RecentCard pid={pid} s={s} />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="rounded-xl border border-dashed border-border px-6 py-10 text-center text-sm text-muted">
+              这个项目还没有会话。点右上角"新会话"开始；在终端里用 <code className="font-mono">claude</code> 开的会话也会出现在这里。
+            </div>
+          )}
+        </section>
+
+        <section className="mt-10 grid gap-3 md:grid-cols-3">
+          <Shortcut to={projectFilesUrl(pid, files.file)} title="浏览文件" body="文件树、代码高亮、按名称和内容搜索。" />
+          <Shortcut to={`/p/${pid}/changes`} title="查看变更" body="git 状态和每个文件的 diff。" />
+          <Shortcut to={`/p/${pid}/worktrees`} title="工作区" body="为一个任务开独立的 git worktree，并行改代码。" />
+        </section>
+      </div>
+    </main>
+  );
+}
+
+function Stat({ label, value, tone, to }: { label: string; value: number | string; tone?: "accent" | "warn"; to?: string }) {
+  const body = (
+    <>
+      <div className="text-xs text-muted">{label}</div>
+      <div className={`mt-1 font-serif text-2xl tabular-nums ${tone === "accent" ? "text-accent" : tone === "warn" ? "text-amber-600 dark:text-amber-400" : ""}`}>{value}</div>
+    </>
+  );
+  const cls = "block rounded-xl border border-border bg-surface px-4 py-3";
+  return to ? (
+    <Link to={to} className={`${cls} transition-colors hover:border-muted/40`}>
+      {body}
+    </Link>
+  ) : (
+    <div className={cls}>{body}</div>
+  );
+}
+
+function RecentCard({ pid, s }: { pid: string; s: SessionListItem }) {
+  return (
+    <Link to={`/p/${pid}/s/${s.id}`} className="flex h-full flex-col rounded-xl border border-border bg-surface px-4 py-3 transition-colors hover:border-muted/40">
+      <span className="line-clamp-2 text-sm font-medium">{s.title || (s.draft ? "新会话" : "未命名会话")}</span>
+      <span className="mt-auto flex items-center gap-1.5 pt-2 text-xs text-muted">
+        {s.state !== "idle" && <StateDot state={s.state} />}
+        {relativeTime(s.lastModified)}
+        {s.worktree && <span className="truncate font-mono">· ⎇ {s.worktree}</span>}
+        {s.pinned && <span className="text-accent">· 置顶</span>}
+      </span>
+    </Link>
+  );
+}
+
+function Shortcut({ to, title, body }: { to: string; title: string; body: string }) {
+  return (
+    <Link to={to} className="rounded-xl border border-border px-4 py-3 transition-colors hover:border-muted/40 hover:bg-surface">
+      <div className="text-sm font-medium">{title} →</div>
+      <div className="mt-1 text-xs leading-relaxed text-muted">{body}</div>
+    </Link>
+  );
+}

package/web/src/pages/SessionView.tsx

@@ -0,0 +1,238 @@
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import type { LiveEvent, SessionListItem } from "@shared/protocol.ts";
+import { api } from "../api.ts";
+import { emptySnapshot, hydrateSessionMessage, loadSessionHistory, sendClient, subscribeSession, useLive, useSessionLive } from "../live.ts";
+import { Transcript, deriveTodos } from "../transcript.ts";
+import { useModels, useProjects, useSessions } from "../hooks.ts";
+import { TranscriptContext } from "../components/Items.tsx";
+import { MessageList } from "../components/MessageList.tsx";
+import { TodoPanel } from "../components/TodoPanel.tsx";
+import { AutomationBar } from "../components/Automation.tsx";
+import { Composer } from "../components/Composer.tsx";
+import { PendingCard } from "../components/Pending.tsx";
+import { StateDot, useOpenDrawer } from "../components/Shell.tsx";
+import { MenuIcon } from "../components/icons.tsx";
+import { Select } from "../ui/Select.tsx";
+import { BrainIcon, PlanIcon, SparkIcon } from "../ui/icons.tsx";
+
+const EFFORT_ZH: Record<string, string> = { low: "低", medium: "中", high: "高", xhigh: "很高", max: "最高" };
+import { Lineage, SessionMenu, UserMessageActions } from "../components/SessionActions.tsx";
+import { getDraft, restoreRewindDraft } from "../drafts.ts";
+import { BtwBanner, BtwPanel, ContextMeter, useAskBtw } from "../components/SessionExtras.tsx";
+import { SessionContextBar, useAddDir, useTurnChangeSlots } from "../components/ProjectExtras.tsx";
+import { useConfirm } from "../components/Confirmation.tsx";
+import { rememberAnnotationSession, useAnnotations } from "../annotations.ts";
+import { AnnotationSelection } from "../components/AnnotationSelection.tsx";
+
+const NO_EVENTS: LiveEvent[] = [];
+
+/** /clear on the web: start a new session and go there; the old one stays as it is. */
+function useClearSession(pid: string) {
+  const qc = useQueryClient();
+  const navigate = useNavigate();
+  const confirm = useConfirm();
+  return async () => {
+    if (!(await confirm({
+      title: "新开会话？",
+      description: "将新建并切换到一个没有当前上下文的会话。原会话和历史记录保留，正在运行的任务不会停止。",
+      confirmLabel: "新开会话",
+    })).confirmed) return false;
+    const { id } = await api<{ id: string }>(`/api/projects/${pid}/sessions`, { method: "POST" });
+    qc.invalidateQueries({ queryKey: ["sessions", pid] });
+    navigate(`/p/${pid}/s/${id}`);
+    return true;
+  };
+}
+
+export function SessionView() {
+  const { pid, sid } = useParams() as { pid: string; sid: string };
+  const navigate = useNavigate();
+  const live = useSessionLive(sid);
+  const snapshot = live?.snapshot ?? emptySnapshot;
+  const annotationMode = useAnnotations((s) => s.mode);
+
+  useEffect(() => subscribeSession(sid, pid), [sid, pid]);
+  useEffect(() => rememberAnnotationSession(pid, sid), [pid, sid]);
+
+  const history = live?.history?.source === "main" ? live.history : undefined;
+  const resetCount = live?.resetCount;
+  useEffect(() => {
+    if (resetCount !== undefined) void loadSessionHistory(sid, pid);
+  }, [sid, pid, resetCount]);
+
+  const historical = history?.mode === "history";
+  // Rebuilt windows release the aggregator's old message maps as well as raw payloads.
+  const transcript = useMemo(() => new Transcript(), [sid]);
+  const visibleEvents = historical ? NO_EVENTS : live?.events ?? NO_EVENTS;
+  const items = useMemo(() => transcript.update(history?.items, visibleEvents), [transcript, history?.items, visibleEvents]);
+  const historyControls = useMemo(() => ({
+    older: !!history?.older || !historical && !!live?.evicted, newer: !!history?.newer, historical,
+    loading: !!history?.loading, error: history?.error,
+    load: (direction: "latest" | "older" | "newer") => loadSessionHistory(sid, pid, direction),
+  }), [history?.older, history?.newer, historical, history?.loading, history?.error, live?.evicted, sid, pid]);
+  const sessions = useSessions(pid);
+  const meta = sessions.data?.find((s) => s.id === sid);
+  const todos = useMemo(() => live?.todos ?? deriveTodos(items), [live?.todos, items]);
+  const todoNames = useMemo(() => new Map<string, string>(), [sid]);
+  for (const t of todos) todoNames.set(t.id, t.subject);
+  while (todoNames.size > 1024) todoNames.delete(todoNames.keys().next().value!);
+  const project = useProjects().data?.find((p) => p.id === pid);
+  const transcriptCtx = useMemo(
+    () => ({
+      root: project?.path,
+      sessionUrl: `/p/${pid}/s/${sid}`,
+      loadMessage: (uuid: string) => hydrateSessionMessage(sid, pid, uuid),
+      readImageUrl: (toolId: string) => `/api/projects/${pid}/sessions/${sid}/tools/${encodeURIComponent(toolId)}/image`,
+      userActions: (uuid: string) => <UserMessageActions pid={pid} sid={sid} uuid={uuid} />,
+      backgroundTool: snapshot.state !== "idle" ? async (toolUseId: string) => {
+        await api(`/api/projects/${pid}/sessions/${sid}/tools/${encodeURIComponent(toolUseId)}/background`, { method: "POST" });
+      } : undefined,
+      todoNames,
+    }),
+    [project?.path, pid, sid, todoNames, snapshot.state],
+  );
+  // A conversation rewind waiting for the next message: show it and put the message back in the composer.
+  const pendingRewind = useQuery({
+    queryKey: ["rewind-draft", sid, live?.resetCount ?? 0, snapshot.state],
+    queryFn: async () => {
+      const generation = getDraft(sid).generation;
+      const result = await api<{ rewindText: string | null; rewindId: string | null }>(`/api/projects/${pid}/sessions/${sid}/draft`);
+      return { ...result, generation };
+    },
+  });
+  useEffect(() => {
+    if (pendingRewind.data?.rewindText != null && pendingRewind.data.rewindId) restoreRewindDraft(sid, pendingRewind.data.rewindText, pendingRewind.data.rewindId, pendingRewind.data.generation);
+  }, [pendingRewind.data, sid]);
+
+  const [btwOpen, setBtwOpen] = useState(false);
+  useEffect(() => setBtwOpen(false), [sid]);
+  const askBtw = useAskBtw(pid, sid, (id) => navigate(`/p/${pid}/s/${id}`));
+  const clear = useClearSession(pid);
+  const addDir = useAddDir(pid, sid);
+  const turnSlots = useTurnChangeSlots(pid, sid, items, snapshot.state !== "idle");
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <Header pid={pid} sid={sid} meta={meta} sessions={sessions.data} onClear={clear} />
+      <BtwBanner pid={pid} sid={sid} />
+      <SessionContextBar pid={pid} sid={sid} meta={meta} />
+      <TranscriptContext.Provider value={transcriptCtx}>
+        <AnnotationSelection projectId={pid} sessionId={sid} enabled={annotationMode} className="flex min-h-0 flex-1 flex-col">
+          <MessageList key={sid} items={items} loading={!history || !!history.loading && !history.items.length}
+            running={!historical && snapshot.state === "running"} waiting={!historical && snapshot.state === "requires_action"} turnSlots={turnSlots}
+            history={historyControls} />
+        </AnnotationSelection>
+      </TranscriptContext.Provider>
+      <div className="mx-auto w-full max-w-4xl px-3 pb-[max(env(safe-area-inset-bottom),0.75rem)] md:px-6">
+        {pendingRewind.data?.rewindText != null && (
+          <div className="mb-2 rounded-lg bg-surface-2 px-3 py-2 text-xs text-muted" data-testid="rewind-banner">
+            已回退到这条消息之前。发送消息后，对话从这里继续。
+          </div>
+        )}
+        <AutomationBar pid={pid} sid={sid} snapshot={snapshot} turns={items.filter((i) => i.kind === "result").length}
+          historyRevision={live?.historyRevision} resetCount={resetCount ?? 0} />
+        <TodoPanel todos={todos} />
+        {snapshot.pending.map((p) => (
+          <PendingCard key={p.id} req={p} sessionId={sid} />
+        ))}
+        <BtwPanel pid={pid} sid={sid} open={btwOpen} setOpen={setBtwOpen} />
+        <ConnectionNotice />
+        <Composer key={sid} projectId={pid} sessionId={sid} state={snapshot.state} cronsStale={snapshot.cronsStale} onBtw={askBtw} onClear={clear} onAddDir={addDir} />
+      </div>
+    </div>
+  );
+}
+
+function Header({ pid, sid, meta, sessions, onClear }: { pid: string; sid: string; meta?: SessionListItem; sessions?: SessionListItem[]; onClear: () => Promise<boolean> }) {
+  const live = useSessionLive(sid);
+  const snap = live?.snapshot ?? emptySnapshot;
+  const models = useModels(pid);
+  const model = models.data?.find((m) => m.value === snap.model) ?? models.data?.[0];
+  const efforts = model?.efforts ?? [];
+  const openDrawer = useOpenDrawer();
+
+  return (
+    <header className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border px-2 py-2 md:flex-nowrap md:px-5">
+      <div className="flex min-w-0 flex-1 basis-48 items-center gap-2">
+        <button className="rounded-md p-2.5 hover:bg-surface-2 md:hidden" onClick={openDrawer} aria-label="打开导航">
+          <MenuIcon />
+        </button>
+        <StateDot state={snap.state} />
+        <div className="flex min-w-0 flex-col">
+          <h1 className="truncate text-lg md:max-w-[300px]" title={meta?.title}>
+            {meta?.pinned && <span className="mr-1 text-accent" aria-label="已置顶">•</span>}
+            {meta?.title || "新会话"}
+          </h1>
+          <Lineage pid={pid} meta={meta} sessions={sessions} />
+        </div>
+        <SessionMenu pid={pid} sid={sid} meta={meta} />
+      </div>
+      {/* Phones: one compact row under the title. */}
+      <div className="flex w-full min-w-0 items-center gap-1.5 md:w-auto md:gap-2">
+        <Select
+          label="模型"
+          value={snap.model ?? ""}
+          onChange={(v) => sendClient({ t: "setModel", sessionId: sid, projectId: pid, model: v })}
+          options={[
+            { value: "", label: "默认模型", text: "默认", hint: "使用设置里的默认值" },
+            ...(models.data ?? []).map((m) => ({ value: m.value, label: m.displayName, text: m.displayName.replace(/\s*\(.*\)$/, ""), hint: m.description })),
+          ]}
+          icon={<SparkIcon className="shrink-0 text-muted" />}
+          className="min-w-0 flex-1 md:w-40 md:flex-none"
+          menuWidth={280}
+          testId="model-select"
+        />
+        {efforts.length > 0 && (
+          <Select
+            label="思考强度"
+            value={snap.effort ?? ""}
+            onChange={(v) => sendClient({ t: "setEffort", sessionId: sid, projectId: pid, effort: v })}
+            options={[{ value: "", label: "默认强度", text: "默认" }, ...efforts.map((e) => ({ value: e, label: EFFORT_ZH[e] ?? e, text: EFFORT_ZH[e] ?? e }))]}
+            icon={<BrainIcon className="shrink-0 text-muted" />}
+            className="min-w-0 flex-1 md:w-32 md:flex-none"
+            testId="effort-select"
+          />
+        )}
+        <Select
+          label="计划模式"
+          value={snap.planMode ? "plan" : "execute"}
+          onChange={(mode) => sendClient({ t: "setPlanMode", sessionId: sid, projectId: pid, on: mode === "plan" })}
+          options={[
+            { value: "execute", label: "执行", hint: "直接执行任务" },
+            { value: "plan", label: "计划", hint: "先制定计划，再确认执行" },
+          ]}
+          icon={<PlanIcon className={snap.planMode ? "text-accent" : "text-muted"} />}
+          className="shrink-0"
+          testId="plan-select"
+        />
+        <ContextMeter pid={pid} sid={sid} onClear={onClear} />
+        {snap.costUsd !== undefined && (
+          <span className="hidden whitespace-nowrap text-xs tabular-nums text-muted lg:inline" title="会话累计花费">
+            ${snap.costUsd.toFixed(3)}
+          </span>
+        )}
+      </div>
+    </header>
+  );
+}
+
+/** Shown while the live connection is down: messages typed now are sent once it is back. */
+function ConnectionNotice() {
+  const connected = useLive((s) => s.connected);
+  const [show, setShow] = useState(false);
+  // Brief blips (page load, a phone waking up) are not worth a banner.
+  useEffect(() => {
+    if (connected) return setShow(false);
+    const t = setTimeout(() => setShow(true), 1500);
+    return () => clearTimeout(t);
+  }, [connected]);
+  if (!show) return null;
+  return (
+    <div className="mb-2 flex items-center gap-2 rounded-lg border border-amber-500/40 bg-amber-500/5 px-3 py-2 text-xs text-amber-700 dark:text-amber-400" role="status" data-testid="connection-notice">
+      <span className="size-1.5 animate-pulse rounded-full bg-amber-500" aria-hidden />
+      连接已断开，正在重连…现在发出的消息会在重连后送达。
+    </div>
+  );
+}