@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/NotificationSettings.tsx

@@ -0,0 +1,226 @@
+import { useCallback, useEffect, useState } from "react";
+import { api, ApiError } from "../api.ts";
+import { currentPushSubscription, pushAvailable, registerServiceWorker } from "../pwa.ts";
+import { Button } from "../ui/Button.tsx";
+import { ConfirmButton, SwitchRow, Tag } from "../ui/Form.tsx";
+import { AlertIcon, BellIcon, CheckIcon } from "../ui/icons.tsx";
+import { getNotifyKinds, NOTIFY_KIND_LABELS, notifyInPage, setNotifyKinds, type NotifyKind, type NotifyKinds } from "../notify.ts";
+
+type Device = { id: string; device: string; userAgent: string; createdAt: number; lastSuccessAt: number | null; kinds: NotifyKinds };
+type Settings = ({ subscribed: true } & Device) | { subscribed: false };
+
+function keyBytes(base64url: string): Uint8Array<ArrayBuffer> {
+  const b64 = (base64url + "=".repeat((4 - (base64url.length % 4)) % 4)).replace(/-/g, "+").replace(/_/g, "/");
+  const raw = atob(b64);
+  const out = new Uint8Array(new ArrayBuffer(raw.length));
+  for (let i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i);
+  return out;
+}
+
+function sameKey(a: ArrayBuffer | null | undefined, b: Uint8Array): boolean {
+  if (!a) return false;
+  const x = new Uint8Array(a);
+  return x.length === b.length && x.every((v, i) => v === b[i]);
+}
+
+const errText = (e: unknown) => (e instanceof ApiError || e instanceof Error ? e.message : String(e));
+
+type Env = "insecure" | "unsupported" | "ok";
+function environment(): Env {
+  if (!window.isSecureContext) return "insecure";
+  return pushAvailable() ? "ok" : "unsupported";
+}
+
+const isIOS = () => /iPhone|iPad|iPod/.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+
+/** Notification preferences of this device: Web Push subscription, per-kind switches, test, other devices. */
+export function NotificationSettings() {
+  const env = environment();
+  const [kinds, setKinds] = useState<NotifyKinds>(getNotifyKinds);
+  const [sub, setSub] = useState<PushSubscription | null>(null);
+  const [permission, setPermission] = useState<NotificationPermission | "unavailable">(() => ("Notification" in window ? Notification.permission : "unavailable"));
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
+  const [devices, setDevices] = useState<Device[]>([]);
+  const [currentId, setCurrentId] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    const s = env === "ok" ? await currentPushSubscription() : null;
+    // The server may have dropped it (expired, data dir wiped): then this device is not subscribed.
+    const st = s ? await api<Settings>(`/api/push/settings?endpoint=${encodeURIComponent(s.endpoint)}`).catch(() => null) : null;
+    if (st?.subscribed) {
+      setKinds(st.kinds);
+      setNotifyKinds(st.kinds);
+    }
+    setSub(st?.subscribed ? s : null);
+    setCurrentId(st?.subscribed ? st.id : null);
+    setDevices(await api<Device[]>("/api/push/subscriptions").catch(() => []));
+  }, [env]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  async function enable() {
+    setBusy(true);
+    setMessage(null);
+    try {
+      // iOS only shows the permission prompt when requested directly from the tap.
+      const perm = await Notification.requestPermission();
+      setPermission(perm);
+      if (perm !== "granted") throw new Error(perm === "denied" ? "通知权限被拒绝，请在浏览器或系统设置里允许本站通知" : "没有获得通知权限");
+      const reg = await registerServiceWorker();
+      if (!reg) throw new Error("Service Worker 未注册成功");
+      await navigator.serviceWorker.ready;
+      const { publicKey } = await api<{ publicKey: string }>("/api/push/key");
+      const key = keyBytes(publicKey);
+      let s = await reg.pushManager.getSubscription();
+      if (s && !sameKey(s.options.applicationServerKey, key)) {
+        await s.unsubscribe();
+        s = null;
+      }
+      s ??= await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: key });
+      await api("/api/push/subscribe", { method: "POST", json: { subscription: s.toJSON(), kinds } });
+      setMessage({ ok: true, text: "已在此设备开启推送" });
+      await refresh();
+    } catch (e) {
+      setMessage({ ok: false, text: `开启失败：${errText(e)}` });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function disable() {
+    setBusy(true);
+    setMessage(null);
+    try {
+      if (sub) {
+        await api("/api/push/subscribe", { method: "DELETE", json: { endpoint: sub.endpoint } });
+        await sub.unsubscribe().catch(() => {});
+      }
+      setMessage({ ok: true, text: "已关闭此设备的推送" });
+      await refresh();
+    } catch (e) {
+      setMessage({ ok: false, text: errText(e) });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function toggleKind(k: NotifyKind, on: boolean) {
+    const next = { ...kinds, [k]: on };
+    setKinds(next);
+    setNotifyKinds(next);
+    if (sub) await api("/api/push/settings", { method: "PATCH", json: { endpoint: sub.endpoint, kinds: { [k]: on } } }).catch((e) => setMessage({ ok: false, text: errText(e) }));
+  }
+
+  async function test() {
+    setBusy(true);
+    setMessage(null);
+    try {
+      if (sub) {
+        await api("/api/push/test", { method: "POST", json: { endpoint: sub.endpoint } });
+        setMessage({ ok: true, text: "测试通知已发出，几秒内应在系统通知里出现" });
+      } else {
+        await notifyInPage({ kind: "done", title: "测试通知", body: "页面打开时，提醒会这样出现。", tag: "test" }, { force: true });
+        setMessage({ ok: true, text: "已显示页面内提醒" });
+      }
+    } catch (e) {
+      setMessage({ ok: false, text: errText(e) });
+      if (e instanceof ApiError && e.status === 410) await refresh();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function removeDevice(id: string) {
+    await api("/api/push/subscribe", { method: "DELETE", json: { id } }).catch(() => {});
+    await refresh();
+  }
+
+  return (
+    <div className="space-y-5 text-sm" data-testid="notification-settings">
+      <section className="space-y-2">
+        <h3 className="text-base">此设备的推送</h3>
+        <p className="text-xs leading-relaxed text-muted">会话完成、需要你回答问题或审批计划、出错时提醒你。页面打开时在页面内提醒；开启推送后，关掉页面也能在系统通知里收到。</p>
+        {env === "insecure" && (
+          <p className="flex items-start gap-2 rounded-lg border border-border bg-surface-2/60 p-3 leading-relaxed" data-testid="push-insecure">
+            <AlertIcon className="mt-0.5 shrink-0 text-muted" />
+            当前通过 http 访问，浏览器不允许推送。需要 https（例如 Tailscale serve）才能在手机上收推送。页面打开时仍会在页面内提醒。
+          </p>
+        )}
+        {env === "unsupported" && (
+          <p className="flex items-start gap-2 rounded-lg border border-border bg-surface-2/60 p-3 leading-relaxed">
+            <AlertIcon className="mt-0.5 shrink-0 text-muted" />
+            {isIOS() ? "iPhone / iPad 上需要先在 Safari 里「添加到主屏幕」，再从主屏图标打开，才能开启推送（iOS 16.4 及以上）。" : "这个浏览器不支持 Web Push。页面打开时仍会在页面内提醒。"}
+          </p>
+        )}
+        {env === "ok" && (
+          <div className="flex flex-wrap items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2.5">
+            <BellIcon className={sub ? "text-accent" : "text-muted"} />
+            <span className="min-w-0 flex-1">
+              <span className={sub ? "font-medium text-ok" : "text-muted"} data-testid="push-status">
+                {sub ? "已开启" : permission === "denied" ? "通知权限被拒绝" : "未开启"}
+              </span>
+            </span>
+            {sub ? (
+              <Button loading={busy} onClick={disable}>
+                关闭推送
+              </Button>
+            ) : (
+              <Button variant="primary" loading={busy} onClick={enable}>
+                开启推送
+              </Button>
+            )}
+          </div>
+        )}
+      </section>
+
+      <section>
+        <h3 className="mb-1 text-base">提醒哪些事</h3>
+        <div className="divide-y divide-border rounded-lg border border-border bg-surface px-3">
+          {(Object.keys(NOTIFY_KIND_LABELS) as NotifyKind[]).map((k) => (
+            <SwitchRow key={k} label={NOTIFY_KIND_LABELS[k]} checked={kinds[k]} onChange={(v) => void toggleKind(k, v)} />
+          ))}
+        </div>
+      </section>
+
+      <section className="flex flex-wrap items-center gap-3">
+        <Button disabled={busy} onClick={test} icon={<BellIcon size={14} />}>
+          发送测试通知
+        </Button>
+        {message && (
+          <p role={message.ok ? "status" : "alert"} className={`flex items-center gap-1.5 ${message.ok ? "text-ok" : "text-danger"}`}>
+            {message.ok ? <CheckIcon className="shrink-0" /> : <AlertIcon className="shrink-0" />}
+            {message.text}
+          </p>
+        )}
+      </section>
+
+      {devices.length > 0 && (
+        <section>
+          <h3 className="mb-1 text-base">已开启推送的设备</h3>
+          <ul className="divide-y divide-border rounded-lg border border-border bg-surface">
+            {devices.map((d) => (
+              <li key={d.id} className="flex flex-wrap items-center gap-2 py-1.5 pl-3 pr-1.5">
+                <span className="min-w-0 flex-1">
+                  <span className="flex min-w-0 items-center gap-1.5">
+                    <span className="truncate">{d.device}</span>
+                    {currentId === d.id && <Tag tone="accent">（此设备）</Tag>}
+                  </span>
+                  <span className="block text-xs text-muted">
+                    {new Date(d.createdAt).toLocaleDateString()} 开启
+                    {d.lastSuccessAt ? ` · 最近送达 ${new Date(d.lastSuccessAt).toLocaleString()}` : " · 还没有送达记录"}
+                  </span>
+                </span>
+                <ConfirmButton variant="ghost" confirmText="停止推送到这台设备？" onConfirm={() => void removeDevice(d.id)} label={`移除 ${d.device}`}>
+                  移除
+                </ConfirmButton>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}

package/web/src/components/NotificationToasts.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+import { dismissToast, openNoticeUrl, setNotifyNavigator, useToasts, type NotifyKind } from "../notify.ts";
+import { CloseIcon } from "./icons.tsx";
+
+const DOT: Record<NotifyKind, string> = { done: "bg-ok", attention: "bg-amber-500", error: "bg-danger" };
+
+/** In-page toasts, plus routing of notification clicks (service worker messages) through the router. */
+export function NotificationToasts() {
+  const toasts = useToasts((s) => s.toasts);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setNotifyNavigator((url) => navigate(url));
+    const onMessage = (e: MessageEvent) => {
+      const d = e.data as { type?: string; url?: string } | undefined;
+      if (d?.type === "cide:navigate" && typeof d.url === "string" && d.url.startsWith("/")) navigate(d.url);
+    };
+    navigator.serviceWorker?.addEventListener("message", onMessage);
+    return () => {
+      setNotifyNavigator(undefined);
+      navigator.serviceWorker?.removeEventListener("message", onMessage);
+    };
+  }, [navigate]);
+
+  if (toasts.length === 0) return null;
+  return (
+    <div
+      className="pointer-events-none fixed inset-x-0 top-[max(0.5rem,env(safe-area-inset-top))] z-50 flex flex-col items-center gap-2 px-3 md:inset-x-auto md:top-auto md:right-4 md:bottom-4 md:items-end"
+      aria-live="polite"
+    >
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          role="status"
+          data-testid="toast"
+          data-tag={t.tag}
+          data-kind={t.kind}
+          className="pointer-events-auto flex w-full max-w-sm items-start gap-2.5 rounded-lg border border-border bg-surface px-3 py-2.5 shadow-lg"
+        >
+          <span className={`mt-1.5 size-2 shrink-0 rounded-full ${DOT[t.kind]}`} aria-hidden />
+          <button
+            className="min-w-0 flex-1 text-left"
+            onClick={() => {
+              dismissToast(t.id);
+              openNoticeUrl(t.url);
+            }}
+          >
+            <div className="truncate text-sm font-medium">{t.title}</div>
+            {t.body && <div className="mt-0.5 line-clamp-2 text-xs text-muted">{t.body}</div>}
+          </button>
+          <button className="-mr-1 shrink-0 rounded p-1 text-muted hover:bg-surface-2" onClick={() => dismissToast(t.id)} aria-label="关闭提醒">
+            <CloseIcon size={14} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/web/src/components/OpenTabs.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef, useState, type PointerEvent } from "react";
+import { Link, useLocation, useMatch, useNavigate } from "react-router";
+import { openTabFromUrl, openTabs, useOpenTabs, type OpenTab } from "../open-tabs.ts";
+import { useSessions } from "../hooks.ts";
+import { Button, cx } from "../ui/Button.tsx";
+import { ChatIcon, FileIcon, GripIcon, XIcon } from "../ui/icons.tsx";
+
+const CLOSE_INTENT = "claude-ide:close-tab";
+
+/** One tracker outside both sidebars; route commits are the only events that open tabs. */
+export function OpenTabsTracker() {
+  const location = useLocation(), navigate = useNavigate();
+  const pid = useMatch("/p/:pid/*")?.params.pid;
+  const sessions = useSessions(pid);
+  useEffect(() => {
+    const state = location.state;
+    const close = state?.[CLOSE_INTENT];
+    if (close && typeof close.pid === "string" && typeof close.id === "string") {
+      openTabs.close(close.pid, close.id);
+      const next = { ...state }; delete next[CLOSE_INTENT];
+      void navigate(location.pathname + location.search + location.hash, { replace: true, state: next });
+    }
+    openTabs.open(location.pathname + location.search + location.hash);
+  }, [location.pathname, location.search, location.hash, location.state, navigate]);
+  useEffect(() => {
+    if (pid && sessions.data) openTabs.titles(pid, new Map(sessions.data.map((session) => [session.id, session.title || (session.draft ? "新会话" : "未命名会话")])));
+  }, [pid, sessions.data, location.pathname]);
+  return null;
+}
+
+type Drag = { id: string; pointer: number; start: number; y: number; moved: boolean; index: number };
+
+export function OpenTabs({ pid, onNavigate }: { pid: string; onNavigate?: () => void }) {
+  const tabs = useOpenTabs(pid), location = useLocation(), navigate = useNavigate();
+  const current = openTabFromUrl(location.pathname + location.search + location.hash);
+  const list = useRef<HTMLElement>(null), drag = useRef<Drag | null>(null);
+  const [moving, setMoving] = useState<{ id: string; index: number } | null>(null);
+  const finish = (commit = false) => {
+    const pending = drag.current;
+    drag.current = null; setMoving(null);
+    if (commit && pending?.moved) openTabs.move(pid, pending.id, pending.index);
+  };
+  const update = () => {
+    const pending = drag.current;
+    if (!pending || !list.current) return;
+    const rows = [...list.current.querySelectorAll<HTMLElement>("[data-tab-id]")].filter((row) => row.dataset.tabId !== pending.id);
+    const at = rows.findIndex((row) => pending.y < row.getBoundingClientRect().top + row.getBoundingClientRect().height / 2);
+    pending.index = at < 0 ? rows.length : at;
+    setMoving((previous) => previous?.id === pending.id && previous.index === pending.index ? previous : { id: pending.id, index: pending.index });
+  };
+  useEffect(() => {
+    if (!moving) return;
+    let frame: number;
+    const tick = () => {
+      const pending = drag.current, element = list.current;
+      if (!pending || !element) return;
+      const bounds = element.getBoundingClientRect();
+      const delta = pending.y < bounds.top + 32 ? -8 : pending.y > bounds.bottom - 32 ? 8 : 0;
+      if (delta) { element.scrollTop += delta; update(); }
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [moving?.id]);
+  useEffect(() => () => { drag.current = null; }, [pid]);
+
+  const close = (tab: OpenTab) => {
+    if (current?.pid !== pid || current.tab.id !== tab.id) { openTabs.close(pid, tab.id); return; }
+    const index = tabs.findIndex((item) => item.id === tab.id), next = tabs[index + 1] ?? tabs[index - 1];
+    // Apply the close only after navigation commits. A canceled unsaved-editor
+    // prompt must leave the current tab intact; consume the intent in the tracker.
+    onNavigate?.();
+    void navigate(next?.href ?? `/p/${encodeURIComponent(pid)}`, { replace: true, state: { [CLOSE_INTENT]: { pid, id: tab.id } } });
+  };
+  const pointerMove = (event: PointerEvent<HTMLButtonElement>) => {
+    const pending = drag.current;
+    if (!pending || pending.pointer !== event.pointerId) return;
+    pending.y = event.clientY;
+    if (Math.abs(pending.y - pending.start) < 4 && !pending.moved) return;
+    pending.moved = true; update();
+  };
+  const before = moving ? tabs.filter((tab) => tab.id !== moving.id)[moving.index]?.id : undefined;
+  return <nav ref={list} className="sidebar-session-list mr-1 mt-2 min-h-0 flex-1 overflow-y-auto px-2 pb-2" aria-label="活跃 Tab">
+    {!tabs.length && <p className="px-2 py-1 text-xs text-muted">打开的会话和文件会出现在这里。</p>}
+    <ol className={cx("min-h-0", moving && !before && "border-b-2 border-accent")}>
+      {tabs.map((tab, index) => <li key={tab.id} data-tab-id={tab.id} className={cx(
+        "group mt-px flex h-8 min-w-0 items-center rounded border-t-2 border-transparent md:h-7",
+        before === tab.id && "border-t-accent!", moving?.id === tab.id && "opacity-45",
+        current?.pid === pid && current.tab.id === tab.id ? "bg-surface shadow-sm ring-1 ring-border" : "hover:bg-surface/70",
+      )}>
+        <Button variant="ghost" size="sm" iconOnly className="h-6! w-5! touch-none cursor-grab text-muted/50 active:cursor-grabbing md:h-5! md:w-4!" aria-label={`调整 ${tab.title} 顺序`} title="拖动排序，或用方向键移动"
+          onPointerDown={(event) => {
+            if (!event.isPrimary || event.button !== 0) return;
+            event.preventDefault(); event.currentTarget.focus(); event.currentTarget.setPointerCapture(event.pointerId);
+            drag.current = { id: tab.id, pointer: event.pointerId, start: event.clientY, y: event.clientY, moved: false, index };
+          }} onPointerMove={pointerMove} onPointerUp={() => finish(true)} onPointerCancel={() => finish()} onLostPointerCapture={() => finish()}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") { finish(); return; }
+            if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+            event.preventDefault();
+            openTabs.move(pid, tab.id, event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : index + (event.key === "ArrowUp" ? -1 : 1));
+          }}><GripIcon size={12} /></Button>
+        <Link to={tab.href} draggable={false} aria-current={current?.pid === pid && current.tab.id === tab.id ? "page" : undefined}
+          title={tab.kind === "file" ? tab.target : tab.title} className="flex h-full min-w-0 flex-1 items-center gap-1.5 text-xs leading-none">
+          <span className="shrink-0 text-muted">{tab.kind === "file" ? <FileIcon size={12} /> : <ChatIcon size={12} />}</span>
+          <span className="min-w-0 flex-1 truncate">{tab.kind === "file" ? tab.target : tab.title}</span>
+        </Link>
+        <Button variant="ghost" size="sm" iconOnly className="mr-0.5 size-6! md:size-5!" aria-label={`关闭 ${tab.title}`} title="关闭 Tab" onClick={() => close(tab)}><XIcon size={12} /></Button>
+      </li>)}
+    </ol>
+  </nav>;
+}

package/web/src/components/Pending.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from "react";
+import type { AskQuestion, PendingRequest } from "@shared/protocol.ts";
+import { sendClient } from "../live.ts";
+import { Markdown } from "./Markdown.tsx";
+import { Button } from "../ui/Button.tsx";
+import { CheckIcon } from "../ui/icons.tsx";
+
+export function PendingCard({ req, sessionId }: { req: PendingRequest; sessionId: string }) {
+  return (
+    <div className={`mb-3 overflow-hidden rounded-xl border border-accent/40 bg-surface shadow-sm ${req.kind === "ask" ? "flex max-h-[min(55dvh,32rem)] min-h-0 flex-col" : ""}`} data-testid={`pending-${req.kind}`}>
+      <div className="flex shrink-0 items-center gap-2 border-b border-border bg-accent/5 px-4 py-2 text-xs font-medium text-accent">
+        <span className="size-1.5 animate-pulse rounded-full bg-accent" aria-hidden />
+        {req.kind === "ask" ? "Claude 在等你回答" : "Claude 在等你审批计划"}
+      </div>
+      <div className={req.kind === "ask" ? "flex min-h-0 flex-col" : "p-4"}>
+      {req.kind === "ask" ? <AskForm key={req.id} req={req} sessionId={sessionId} /> : <PlanReview req={req} sessionId={sessionId} />}
+      </div>
+    </div>
+  );
+}
+
+function AskForm({ req, sessionId }: { req: Extract<PendingRequest, { kind: "ask" }>; sessionId: string }) {
+  const questions = req.input.questions ?? [];
+  const [picked, setPicked] = useState<Record<string, string[]>>({});
+  const [other, setOther] = useState<Record<string, string>>({});
+  const [activePage, setPage] = useState(0);
+  const page = Math.min(activePage, Math.max(0, questions.length - 1));
+  const question = questions[page];
+  const bodyRef = useRef<HTMLDivElement>(null);
+  useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = 0; }, [page]);
+
+  const answerFor = (q: AskQuestion) => {
+    const labels = [...(picked[q.question] ?? [])];
+    const free = other[q.question]?.trim();
+    if (free) labels.push(free);
+    return labels.join(", ");
+  };
+  const answered = questions.filter((q) => answerFor(q)).length;
+  const complete = questions.length > 0 && answered === questions.length;
+
+  function toggle(q: AskQuestion, label: string) {
+    setPicked((p) => {
+      const cur = p[q.question] ?? [];
+      if (!q.multiSelect) return { ...p, [q.question]: [label] };
+      return { ...p, [q.question]: cur.includes(label) ? cur.filter((l) => l !== label) : [...cur, label] };
+    });
+    if (!q.multiSelect) setOther((o) => ({ ...o, [q.question]: "" }));
+  }
+
+  return (
+    <div className="flex min-h-0 flex-col">
+      {questions.length > 1 && <div className="flex shrink-0 flex-wrap items-center justify-between gap-2 px-4 pb-2 pt-3">
+        <p className="text-xs text-muted" role="status">第 {page + 1} / {questions.length} 题 · 已答 {answered} 题</p>
+        <nav className="flex gap-1" aria-label="问题分页">
+          {questions.map((q, index) => <Button
+            key={index}
+            size="sm"
+            iconOnly
+            variant={index === page ? "primary" : "ghost"}
+            aria-label={`第 ${index + 1} 题${q.header ? `：${q.header}` : ""}（${answerFor(q) ? "已回答" : "未回答"}）`}
+            aria-current={index === page ? "step" : undefined}
+            title={q.header ?? q.question}
+            onClick={() => setPage(index)}
+          >{index + 1}{answerFor(q) && <span className="sr-only">，已回答</span>}</Button>)}
+        </nav>
+      </div>}
+      <div ref={bodyRef} className="min-h-0 overflow-y-auto overscroll-contain px-4 py-3" data-testid="ask-question-body">
+      {question ? (
+        <fieldset key={page} className="min-w-0 space-y-2">
+          <legend className="max-w-full break-words font-medium">
+            {question.header && <span className="mr-2 rounded bg-surface-2 px-1.5 py-0.5 text-xs text-muted">{question.header}</span>}
+            {question.question}
+          </legend>
+          <div className="grid gap-2">
+            {question.options.map((o) => {
+              const on = picked[question.question]?.includes(o.label);
+              return (
+                <button
+                  key={o.label}
+                  type="button"
+                  role={question.multiSelect ? "checkbox" : "radio"}
+                  aria-checked={!!on}
+                  onClick={() => toggle(question, o.label)}
+                  className={`flex items-start gap-3 rounded-lg border px-3.5 py-2.5 text-left transition-colors ${on ? "border-accent/60 bg-accent/5" : "border-border hover:border-muted/40"}`}
+                >
+                  <span
+                    className={`mt-0.5 flex size-4 shrink-0 items-center justify-center border ${question.multiSelect ? "rounded" : "rounded-full"} ${on ? "border-accent bg-accent text-accent-text" : "border-muted/50"}`}
+                    aria-hidden
+                  >
+                    {on && (question.multiSelect ? <CheckIcon size={11} /> : <span className="size-1.5 rounded-full bg-accent-text" />)}
+                  </span>
+                  <span className="min-w-0 break-words">
+                  <div className="text-sm font-medium">{o.label}</div>
+                  {o.description && <div className="mt-0.5 text-xs text-muted">{o.description}</div>}
+                  </span>
+                </button>
+              );
+            })}
+            <input
+              aria-label={`其他回答：${question.question}`}
+              placeholder="其他（自由输入）"
+              value={other[question.question] ?? ""}
+              onChange={(e) => {
+                const v = e.target.value;
+                setOther((o) => ({ ...o, [question.question]: v }));
+                if (!question.multiSelect && v) setPicked((p) => ({ ...p, [question.question]: [] }));
+              }}
+              className="h-10 min-w-0 rounded-lg border border-border bg-bg px-3 text-base outline-none focus:border-accent/60 focus:ring-2 focus:ring-accent/20 md:h-9 md:text-sm"
+            />
+          </div>
+        </fieldset>
+      ) : <p className="text-sm text-muted">当前没有可回答的问题。</p>}
+      </div>
+      <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border px-4 py-3">
+        <Button
+          variant="ghost"
+          className="mr-auto"
+          onClick={() => sendClient({ t: "answer", sessionId, requestId: req.id, answer: { kind: "cancel" } })}
+        >
+          {questions.length > 1 ? "跳过全部" : "跳过"}
+        </Button>
+        {questions.length > 1 && <Button disabled={page === 0} onClick={() => setPage(page - 1)}>上一步</Button>}
+        {page < questions.length - 1 ? <Button key="next" variant="primary" disabled={!question || !answerFor(question)} onClick={() => setPage(page + 1)}>下一步</Button> : <Button
+          key="submit"
+          variant="primary"
+          disabled={!complete}
+          onClick={() =>
+            sendClient({
+              t: "answer",
+              sessionId,
+              requestId: req.id,
+              answer: { kind: "ask", answers: Object.fromEntries(questions.map((q) => [q.question, answerFor(q)])) },
+            })
+          }
+        >
+          {questions.length > 1 ? "提交全部" : "提交"}
+        </Button>}
+      </div>
+    </div>
+  );
+}
+
+function PlanReview({ req, sessionId }: { req: Extract<PendingRequest, { kind: "plan" }>; sessionId: string }) {
+  const [feedback, setFeedback] = useState("");
+  return (
+    <div className="space-y-3">
+      <h2 className="text-lg">Claude 的计划</h2>
+      <div className="max-h-[50dvh] overflow-y-auto rounded-lg bg-bg p-3">
+        <Markdown text={req.input.plan} />
+      </div>
+      <textarea
+        aria-label="修改意见"
+        placeholder="需要修改的地方（打回时必填）"
+        value={feedback}
+        onChange={(e) => setFeedback(e.target.value)}
+        rows={2}
+        className="w-full resize-none rounded-lg border border-border bg-bg px-3 py-2 text-sm outline-none focus:border-accent"
+      />
+      <div className="flex justify-end gap-2">
+        <Button
+          disabled={!feedback.trim()}
+          onClick={() => sendClient({ t: "answer", sessionId, requestId: req.id, answer: { kind: "plan", approve: false, feedback } })}
+        >
+          打回修改
+        </Button>
+        <Button
+          variant="primary"
+          onClick={() => sendClient({ t: "answer", sessionId, requestId: req.id, answer: { kind: "plan", approve: true } })}
+        >
+          批准执行
+        </Button>
+      </div>
+    </div>
+  );
+}