@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/Shell.tsx

@@ -0,0 +1,320 @@
+import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import { useLocation, useMatch, useNavigate } from "react-router";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { SessionListItem } from "@shared/protocol.ts";
+import { api } from "../api.ts";
+import { relativeTime, useOverview, useProjects, useSessions } from "../hooks.ts";
+import { Link } from "react-router";
+import { useLive } from "../live.ts";
+import { CloseIcon, MenuIcon, PlusIcon } from "./icons.tsx";
+import { Button } from "../ui/Button.tsx";
+import { BranchIcon, FolderIcon, PinIcon, PlusIcon as UiPlusIcon, SearchIcon } from "../ui/icons.tsx";
+import { Select } from "../ui/Select.tsx";
+import { ResizablePane } from "../ui/ResizablePane.tsx";
+import { ProjectTabs } from "./ProjectNav.tsx";
+import { OpenTabs, OpenTabsTracker } from "./OpenTabs.tsx";
+import { openTabs, useSidebarView } from "../open-tabs.ts";
+import { Segmented } from "../ui/Form.tsx";
+import { SettingsLink } from "./SettingsLink.tsx";
+import { NotificationEntry } from "./NotificationEntry.tsx";
+import { NotificationToasts } from "./NotificationToasts.tsx";
+import { DirectoryPicker } from "./DirectoryPicker.tsx";
+import { ImagePreview } from "./ImagePreview.tsx";
+import { useRemoveProject } from "../project-actions.ts";
+import { CopyButton } from "./CopyButton.tsx";
+
+const DrawerContext = createContext<() => void>(() => {});
+
+/** Opens the navigation drawer on phones. */
+export function useOpenDrawer() {
+  return useContext(DrawerContext);
+}
+
+export function Shell({ children }: { children: ReactNode }) {
+  const [drawer, setDrawer] = useState(false);
+  const location = useLocation();
+  useEffect(() => setDrawer(false), [location.pathname, location.search, location.hash]);
+  // Session pages carry their own header with the menu button.
+  const inSession = !!useMatch("/p/:pid/s/:sid");
+  const projectHome = useMatch("/p/:pid"), sessionPage = useMatch("/p/:pid/s/*");
+  const navigationPid = projectHome?.params.pid ?? sessionPage?.params.pid;
+
+  return (
+    <div className="app-height flex overflow-hidden">
+      <OpenTabsTracker />
+      {/* Desktop sidebar */}
+      <ResizablePane storageKey="claude-ide:sidebar-width" label="调整导航栏宽度" defaultWidth={288} minWidth={240} maxWidth={520} remainingWidth={480} className="hidden border-r border-border bg-surface-2/50 md:flex md:flex-col">
+        <Sidebar />
+      </ResizablePane>
+      {/* Mobile drawer */}
+      {drawer && (
+        <div className="fixed inset-0 z-40 md:hidden" role="dialog" aria-label="导航">
+          <div className="absolute inset-0 bg-black/30" onClick={() => setDrawer(false)} />
+          <aside className="absolute inset-y-0 left-0 flex w-[85%] max-w-80 flex-col bg-bg shadow-xl" onClick={(event) => {
+            // Same-document links still dismiss the drawer; internal history
+            // state updates must not close a drawer the user just reopened.
+            if (event.target instanceof Element && event.target.closest("a[href],button[aria-current='page']")) setDrawer(false);
+          }}>
+            <div className="flex justify-end p-2">
+              <button className="rounded-md p-2.5 text-muted hover:bg-surface-2" onClick={() => setDrawer(false)} aria-label="关闭导航">
+                <CloseIcon />
+              </button>
+            </div>
+            <Sidebar onNavigate={() => setDrawer(false)} />
+          </aside>
+        </div>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col">
+        {!inSession && <MobileBar onMenu={() => setDrawer(true)} />}
+        {navigationPid && <ProjectTabs projectId={navigationPid} />}
+        <DrawerContext.Provider value={() => setDrawer(true)}>{children}</DrawerContext.Provider>
+      </div>
+      <NotificationToasts />
+      <ImagePreview />
+    </div>
+  );
+}
+
+function MobileBar({ onMenu }: { onMenu: () => void }) {
+  const connected = useLive((s) => s.connected);
+  return (
+    <div className="flex items-center gap-2 border-b border-border px-2 py-1.5 md:hidden">
+      <button className="rounded-md p-2.5 hover:bg-surface-2" onClick={onMenu} aria-label="打开导航">
+        <MenuIcon />
+      </button>
+      <span className="font-serif text-lg">Claude IDE</span>
+      {!connected && <span className="ml-auto text-xs text-muted">连接中…</span>}
+    </div>
+  );
+}
+
+function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
+  // Shell renders outside <Routes>, so useParams() is empty here; match the location instead.
+  const location = useLocation();
+  // Settings pages carry the project in ?p= so the sidebar keeps showing it.
+  const pid = useMatch("/p/:pid/*")?.params.pid ?? (location.pathname.startsWith("/settings") ? (new URLSearchParams(location.search).get("p") ?? undefined) : undefined);
+  const sid = useMatch("/p/:pid/s/:sid/*")?.params.sid;
+  const view = useSidebarView();
+  const navigate = useNavigate();
+  const projects = useProjects();
+  const [adding, setAdding] = useState(false);
+  const current = projects.data?.find((p) => p.id === pid);
+  const selectedProject = useRef(pid);
+  selectedProject.current = pid;
+  const remove = useRemoveProject((project) => {
+    if (selectedProject.current === project.id) navigate("/overview");
+  });
+  const overview = useOverview();
+  const busy = overview.data?.filter((o) => o.state !== "idle" || o.waitingFor.length).length ?? 0;
+  const waiting = overview.data?.filter((o) => o.waitingFor.length || o.state === "requires_action").length ?? 0;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col" data-testid="sidebar">
+      <div className="space-y-2 px-3 pt-3">
+        <Link to="/overview" className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-surface" data-testid="overview-link">
+          <span>运行总览</span>
+          {waiting > 0 && <span className="rounded-full bg-amber-500 px-1.5 text-xs text-white">{waiting} 待处理</span>}
+          {busy - waiting > 0 && <span className="rounded-full bg-accent/15 px-1.5 text-xs text-accent">{busy - waiting} 运行中</span>}
+        </Link>
+        <div className="flex gap-1.5">
+          <Select
+            label="项目"
+            value={pid ?? ""}
+            placeholder="选择项目…"
+            emptyText={
+              <>
+                <span className="block text-text">暂无项目</span>
+                <span className="mt-1 block text-xs">点击右侧 + 添加项目</span>
+              </>
+            }
+            onChange={(v) => v && navigate(`/p/${v}`)}
+            options={(projects.data ?? []).map((p) => ({ value: p.id, label: p.name, text: p.name, hint: <span className="font-mono">{p.path}</span> }))}
+            icon={<FolderIcon className="shrink-0 text-muted" />}
+            className="min-w-0 flex-1"
+            testId="project-select"
+          />
+          <Button iconOnly onClick={() => setAdding(true)} aria-label="添加项目" title="添加项目" aria-expanded={adding}>
+            <UiPlusIcon />
+          </Button>
+        </div>
+        {current && (
+          <div className="flex min-w-0 items-center gap-1">
+            <div className="flex min-w-0 flex-1 items-center gap-1">
+              <p className="min-w-0 truncate px-0.5 font-mono text-[11px] text-muted" title={current.path}>{current.path}</p>
+              <CopyButton key={current.path} text={current.path} label="复制项目路径" />
+            </div>
+            <Button variant="ghost" size="sm" aria-label="移除项目" disabled={remove.isPending} onClick={() => remove.mutate(current)}>移除</Button>
+          </div>
+        )}
+        {remove.error && <p role="alert" className="break-words text-xs text-danger">{remove.error.message}</p>}
+        {adding && <AddProject onDone={() => setAdding(false)} onCancel={() => setAdding(false)} />}
+      </div>
+      {pid ? <>
+        <div className="shrink-0 px-3 pt-3">
+          <Segmented label="侧边栏内容" value={view} onChange={openTabs.setView} size="sm" stretch options={[
+            { value: "sessions", label: "会话列表" }, { value: "tabs", label: "活跃 Tab" },
+          ]} />
+        </div>
+        {view === "sessions" ? <SessionList key={pid} projectId={pid} activeId={sid} /> : <OpenTabs key={pid} pid={pid} onNavigate={onNavigate} />}
+      </> : <div className="flex-1" />}
+      <div className="flex shrink-0 items-center gap-1 border-t border-border px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+        <SettingsLink />
+        <div className="min-w-0 flex-1">
+          <NotificationEntry />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function AddProject({ onDone, onCancel }: { onDone?: () => void; onCancel?: () => void }) {
+  const qc = useQueryClient();
+  const navigate = useNavigate();
+  return (
+    <DirectoryPicker
+      onClose={() => (onCancel ?? onDone)?.()}
+      onSelect={async (path) => {
+        const project = await api<{ id: string }>("/api/projects", { method: "POST", json: { path } });
+        void qc.invalidateQueries({ queryKey: ["projects"] });
+        onDone?.();
+        navigate(`/p/${project.id}`);
+      }}
+    />
+  );
+}
+
+const DAY = 86_400_000;
+
+/** Group sessions the way people remember them: pinned, then by recency. */
+function groupSessions(items: SessionListItem[]) {
+  const startOfToday = new Date().setHours(0, 0, 0, 0);
+  const groups: { name: string; items: SessionListItem[] }[] = [
+    { name: "置顶", items: [] },
+    { name: "今天", items: [] },
+    { name: "昨天", items: [] },
+    { name: "最近 7 天", items: [] },
+    { name: "更早", items: [] },
+  ];
+  for (const s of items) {
+    const g = s.pinned ? 0 : s.lastModified >= startOfToday ? 1 : s.lastModified >= startOfToday - DAY ? 2 : s.lastModified >= startOfToday - 6 * DAY ? 3 : 4;
+    groups[g]!.items.push(s);
+  }
+  return groups.filter((g) => g.items.length);
+}
+
+export function SessionList({ projectId, activeId }: { projectId: string; activeId?: string }) {
+  const sessions = useSessions(projectId);
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const [q, setQ] = useState("");
+  const [showArchived, setShowArchived] = useState(false);
+  const create = useMutation({
+    mutationFn: () => api<{ id: string }>(`/api/projects/${projectId}/sessions`, { method: "POST" }),
+    onSuccess: ({ id }) => {
+      qc.invalidateQueries({ queryKey: ["sessions", projectId] });
+      navigate(`/p/${projectId}/s/${id}`);
+    },
+  });
+  const all = sessions.data ?? [];
+  const archivedCount = all.filter((s) => s.archived).length;
+  const items = all.filter((s) => s.archived === showArchived && (!q || s.title.toLowerCase().includes(q.toLowerCase())));
+  const groups = groupSessions(items);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col pt-3">
+      <div className="flex gap-1.5 px-3">
+        <div className="relative min-w-0 flex-1">
+          <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted" />
+          <input
+            aria-label="搜索会话"
+            placeholder="搜索会话"
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            className="h-10 w-full rounded-md border border-border bg-surface pl-8 pr-2.5 text-base outline-none transition-colors placeholder:text-muted focus:border-accent/60 focus:ring-2 focus:ring-accent/20 md:h-8 md:text-sm"
+          />
+        </div>
+        <Button variant="primary" onClick={() => create.mutate()} loading={create.isPending} icon={<PlusIcon />} title="新会话">
+          新会话
+        </Button>
+      </div>
+      <nav className="sidebar-session-list mr-1 mt-2 min-h-0 flex-1 overflow-y-auto px-2 pb-4" aria-label="会话列表">
+        {showArchived && <div className="px-2.5 pb-1 pt-2 text-xs font-medium text-muted">已归档</div>}
+        {groups.map((g) => (
+          <div key={g.name} className="mt-1 first:mt-0">
+            {!showArchived && (
+              <div className="flex items-center justify-between px-2.5 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-muted">
+                <span>{g.name}</span>
+                <span className="tabular-nums">{g.items.length}</span>
+              </div>
+            )}
+            {g.items.map((s) => (
+              <SessionRow key={s.id} s={s} active={s.id === activeId} onClick={() => navigate(`/p/${projectId}/s/${s.id}`)} />
+            ))}
+          </div>
+        ))}
+        {sessions.isSuccess && items.length === 0 && (
+          <div className="px-2.5 py-6 text-center text-sm text-muted">
+            {q ? "没有匹配的会话" : showArchived ? "没有已归档的会话" : "没有会话"}
+            {!q && !showArchived && <p className="mt-1 text-xs">点"新会话"开始，或在终端里用 claude 开一个，这里会自动出现。</p>}
+          </div>
+        )}
+        {(archivedCount > 0 || showArchived) && (
+          <button
+            className="mt-3 flex w-full items-center gap-1.5 rounded-md px-2.5 py-2 text-left text-xs text-muted hover:bg-surface hover:text-text"
+            onClick={() => setShowArchived((v) => !v)}
+          >
+            {showArchived ? "← 返回会话列表" : `已归档（${archivedCount}）`}
+          </button>
+        )}
+      </nav>
+    </div>
+  );
+}
+
+const STATE_TEXT: Partial<Record<SessionListItem["state"], string>> = { running: "运行中", requires_action: "等你处理" };
+
+function SessionRow({ s, active, onClick }: { s: SessionListItem; active: boolean; onClick: () => void }) {
+  const state = STATE_TEXT[s.state];
+  return (
+    <button
+      onClick={onClick}
+      aria-current={active ? "page" : undefined}
+      className={`group mt-px block w-full rounded-md px-2.5 py-2 text-left transition-colors ${active ? "bg-surface shadow-sm ring-1 ring-border" : "hover:bg-surface/70"}`}
+    >
+      <div className="flex items-center gap-2">
+        <span className={`min-w-0 flex-1 truncate text-sm ${active ? "font-medium" : ""}`}>{s.title || (s.draft ? "新会话" : "未命名会话")}</span>
+        {s.pinned && (
+          <span className="shrink-0 text-accent" title="已置顶">
+            <PinIcon />
+            <span className="sr-only">置顶</span>
+          </span>
+        )}
+      </div>
+      <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted">
+        {state && (
+          <span className={`flex shrink-0 items-center gap-1 ${s.state === "requires_action" ? "text-amber-600 dark:text-amber-400" : "text-accent"}`}>
+            <StateDot state={s.state} />
+            {state}
+          </span>
+        )}
+        <span className="shrink-0">{relativeTime(s.lastModified)}</span>
+        {s.forkedFrom && (
+          <span className="flex shrink-0 items-center" title="fork 出的会话">
+            <BranchIcon size={12} />
+          </span>
+        )}
+        {s.worktree && (
+          <span className="min-w-0 truncate rounded bg-surface-2 px-1 font-mono text-[11px]" title={`worktree：${s.cwd}`} data-testid="session-worktree-badge">
+            ⎇ {s.worktree}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}
+
+export function StateDot({ state }: { state: SessionListItem["state"] }) {
+  const cls = state === "running" ? "bg-accent animate-pulse" : state === "requires_action" ? "bg-amber-500" : "bg-transparent";
+  const label = state === "running" ? "运行中" : state === "requires_action" ? "等待处理" : "空闲";
+  return <span className={`inline-block size-2 shrink-0 rounded-full ${cls}`} title={label} aria-label={label} data-state={state} />;
+}

package/web/src/components/SvgPreview.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+/** SVGs stay in an image document: scripts/events are never inserted into the
+ * application DOM. Blob URLs also work on ordinary HTTP and are released. */
+export function SvgPreview({ markup, alt = "SVG 图像" }: { markup: string; alt?: string }) {
+  const [url, setUrl] = useState<string>();
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    const svg = markup.replace(/<svg\b([^>]*)>/i, (tag, attrs: string) => /\bxmlns\s*=/.test(attrs) ? tag : tag.replace(/<svg/i, '<svg xmlns="http://www.w3.org/2000/svg"'));
+    const next = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+    setUrl(next); setFailed(false);
+    return () => URL.revokeObjectURL(next);
+  }, [markup]);
+  return <span className="inline-block max-w-full align-middle" data-testid="inline-svg-preview">
+    {url && !failed && <img src={url} alt={alt} className="max-h-[70dvh] max-w-full object-contain" onError={() => setFailed(true)} />}
+    {failed && <span className="text-sm text-danger">SVG 无法显示，请检查 SVG 内容。</span>}
+  </span>;
+}

package/web/src/components/TodoPanel.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import type { Todo } from "../transcript.ts";
+import { ChevronIcon } from "./icons.tsx";
+
+/** Claude's task list, kept above the composer so progress is always visible. */
+export function TodoPanel({ todos }: { todos: Todo[] }) {
+  const [open, setOpen] = useState(false);
+  if (todos.length === 0) return null;
+  const done = todos.filter((t) => t.status === "completed").length;
+  const current = todos.find((t) => t.status === "in_progress");
+  return (
+    <div className="mb-2 rounded-xl border border-border bg-surface/80 text-sm" data-testid="todo-panel">
+      <button className="flex w-full min-w-0 items-center gap-2 px-3 py-2 text-left" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
+        <ChevronIcon open={open} />
+        <span className="shrink-0 font-medium">
+          待办 {done}/{todos.length}
+        </span>
+        <span className="min-w-0 truncate text-muted">{current ? current.activeForm || current.subject : done === todos.length ? "全部完成" : ""}</span>
+        <span className="ml-auto h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-surface-2">
+          <span className="block h-full bg-accent" style={{ width: `${(done / todos.length) * 100}%` }} />
+        </span>
+      </button>
+      {open && (
+        <ul className="max-h-60 space-y-1 overflow-y-auto border-t border-border px-3 py-2">
+          {todos.map((t) => (
+            <li key={t.id} className="flex items-start gap-2" data-status={t.status}>
+              <span className={`mt-0.5 shrink-0 ${t.status === "completed" ? "text-ok" : t.status === "in_progress" ? "text-accent" : "text-muted"}`}>
+                {t.status === "completed" ? "✓" : t.status === "in_progress" ? "◐" : "○"}
+              </span>
+              <span className={t.status === "completed" ? "text-muted line-through" : ""}>{t.subject}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/web/src/components/VersionNotice.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { loadedBuildVersion, useLive } from "../live.ts";
+import { Button } from "../ui/Button.tsx";
+import { useConfirm } from "./Confirmation.tsx";
+import { allowNextUnload, hasPendingAttachments, unsavedEditors } from "../unsaved.tsx";
+
+/** Stay visible until the user refreshes or postpones this particular deployment. */
+export function VersionNotice() {
+  const confirm = useConfirm();
+  const version = useLive((s) => s.distVersion);
+  const [dismissed, setDismissed] = useState<string>();
+  if (!loadedBuildVersion || !version || version === loadedBuildVersion || version === dismissed) return null;
+
+  return (
+    <div className="pointer-events-none fixed inset-x-0 bottom-[max(0.75rem,env(safe-area-inset-bottom))] z-50 flex justify-center pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))]" aria-live="polite">
+      <div role="status" className="pointer-events-auto flex w-full max-w-md flex-wrap items-center gap-2 rounded-xl border border-accent/30 bg-surface px-4 py-3 shadow-lg" data-testid="version-notice">
+        <span className="min-w-0 flex-1 text-sm">新版本已部署，刷新页面即可生效。</span>
+        <Button size="sm" variant="ghost" onClick={() => setDismissed(version)}>稍后</Button>
+        <Button size="sm" variant="primary" onClick={async () => {
+          const editors = unsavedEditors();
+          const attachments = hasPendingAttachments();
+          if ((editors.length || attachments) && !(await confirm({
+            title: "刷新并放弃未保存内容？",
+            description: [
+              editors.length ? `尚未保存：${editors.join("、")}。` : "",
+              attachments ? "未发送的图片附件和正在读取的图片会丢失。" : "",
+              "文字草稿会保留。",
+            ].join(""),
+            confirmLabel: "放弃并刷新",
+            cancelLabel: "暂不刷新",
+            danger: true,
+          })).confirmed) return;
+          if ("serviceWorker" in navigator) void navigator.serviceWorker.getRegistration().then((registration) => registration?.update()).catch(() => {});
+          allowNextUnload();
+          location.reload();
+        }}>刷新页面</Button>
+      </div>
+    </div>
+  );
+}

package/web/src/components/icons.tsx

@@ -0,0 +1,43 @@
+import type { SVGProps } from "react";
+
+function Svg(props: SVGProps<SVGSVGElement>) {
+  return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden {...props} />;
+}
+
+export const MenuIcon = () => (
+  <Svg>
+    <path d="M4 6h16M4 12h16M4 18h16" />
+  </Svg>
+);
+export const PlusIcon = () => (
+  <Svg>
+    <path d="M12 5v14M5 12h14" />
+  </Svg>
+);
+export const SendIcon = () => (
+  <Svg>
+    <path d="M12 19V5M5 12l7-7 7 7" />
+  </Svg>
+);
+export const StopIcon = () => (
+  <Svg>
+    <rect x="6" y="6" width="12" height="12" rx="1.5" fill="currentColor" stroke="none" />
+  </Svg>
+);
+export const ChevronIcon = ({ open }: { open?: boolean }) => (
+  <Svg width="14" height="14" style={{ transform: open ? "rotate(90deg)" : undefined, transition: "transform 120ms" }}>
+    <path d="M9 6l6 6-6 6" />
+  </Svg>
+);
+export const CloseIcon = ({ size }: { size?: number }) => (
+  <Svg {...(size ? { width: size, height: size } : {})}>
+    <path d="M6 6l12 12M18 6L6 18" />
+  </Svg>
+);
+export const ImageIcon = () => (
+  <Svg>
+    <rect x="3.5" y="4.5" width="17" height="15" rx="2" />
+    <circle cx="9" cy="10" r="1.5" />
+    <path d="M20.5 16l-5-5-8.5 8.5" />
+  </Svg>
+);

package/web/src/diff.ts

@@ -0,0 +1,62 @@
+export type DiffLine = { type: " " | "+" | "-"; text: string; oldNo?: number; newNo?: number } | { type: "gap"; count: number };
+
+/** Line diff via LCS. Falls back to remove-all/add-all for very large inputs. */
+export function lineDiff(a: string, b: string, context = 3): DiffLine[] {
+  const A = a.split("\n");
+  const B = b.split("\n");
+  const rows: Exclude<DiffLine, { type: "gap" }>[] = [];
+  if (A.length * B.length > 4_000_000) {
+    A.forEach((t, i) => rows.push({ type: "-", text: t, oldNo: i + 1 }));
+    B.forEach((t, i) => rows.push({ type: "+", text: t, newNo: i + 1 }));
+    return rows;
+  }
+  const n = A.length;
+  const m = B.length;
+  const lcs = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--)
+    for (let j = m - 1; j >= 0; j--) lcs[i]![j] = A[i] === B[j] ? lcs[i + 1]![j + 1]! + 1 : Math.max(lcs[i + 1]![j]!, lcs[i]![j + 1]!);
+  let i = 0;
+  let j = 0;
+  while (i < n || j < m) {
+    if (i < n && j < m && A[i] === B[j]) rows.push({ type: " ", text: A[i]!, oldNo: ++i, newNo: ++j });
+    else if (j < m && (i >= n || lcs[i]![j + 1]! >= lcs[i + 1]![j]!)) rows.push({ type: "+", text: B[j]!, newNo: ++j });
+    else rows.push({ type: "-", text: A[i]!, oldNo: ++i });
+  }
+  return collapse(rows, context);
+}
+
+/** Hide long runs of unchanged lines, keeping `context` lines around changes. */
+export function collapse(rows: DiffLine[], context = 3): DiffLine[] {
+  const keep = rows.map(() => false);
+  rows.forEach((r, idx) => {
+    if (r.type === "+" || r.type === "-") for (let k = Math.max(0, idx - context); k <= Math.min(rows.length - 1, idx + context); k++) keep[k] = true;
+  });
+  const out: DiffLine[] = [];
+  let hidden = 0;
+  rows.forEach((r, idx) => {
+    if (keep[idx] || r.type === "gap") {
+      if (hidden) out.push({ type: "gap", count: hidden });
+      hidden = 0;
+      out.push(r);
+    } else hidden++;
+  });
+  if (hidden) out.push({ type: "gap", count: hidden });
+  return out;
+}
+
+/** Rows from the CLI's structuredPatch hunks. */
+export function fromHunks(hunks: { oldStart: number; newStart: number; lines: string[] }[]): DiffLine[] {
+  const out: DiffLine[] = [];
+  for (const h of hunks) {
+    if (out.length) out.push({ type: "gap", count: 0 });
+    let o = h.oldStart;
+    let nn = h.newStart;
+    for (const l of h.lines) {
+      const t = l[0];
+      if (t === "+") out.push({ type: "+", text: l.slice(1), newNo: nn++ });
+      else if (t === "-") out.push({ type: "-", text: l.slice(1), oldNo: o++ });
+      else out.push({ type: " ", text: l.slice(1), oldNo: o++, newNo: nn++ });
+    }
+  }
+  return out;
+}

package/web/src/drafts.test.ts

@@ -0,0 +1,80 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { addDraftImages, clearDraft, editDraft, getDraft, restoreRewindDraft, setDraft, useDrafts, type Attached } from "./drafts.ts";
+
+const storage = new Map<string, string>();
+Object.defineProperty(globalThis, "localStorage", { value: { getItem: (key: string) => storage.get(key) ?? null, setItem: (key: string, value: string) => storage.set(key, value), removeItem: (key: string) => storage.delete(key) }, configurable: true });
+const image: Attached = { id: "image", mediaType: "image/png", data: "AA==", url: "data:image/png;base64,AA==" };
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((done) => { resolve = done; });
+  return { promise, resolve };
+}
+
+test("rewind replay preserves edits across navigation and reload", () => {
+  setDraft("rewind", "original", "r1");
+  editDraft("rewind", { text: "edited" });
+  restoreRewindDraft("rewind", "original", "r1");
+  assert.equal(getDraft("rewind").text, "edited");
+  useDrafts.setState({ drafts: {} }); // browser refresh, text and rewind identity remain persisted
+  restoreRewindDraft("rewind", "original", "r1");
+  assert.equal(getDraft("rewind").text, "edited");
+  editDraft("rewind", { text: "" });
+  useDrafts.setState({ drafts: {} });
+  restoreRewindDraft("rewind", "original", "r1");
+  assert.equal(getDraft("rewind").text, "", "intentional empty draft stays empty");
+  setDraft("rewind", "original", "r2");
+  assert.equal(getDraft("rewind").text, "original", "an explicit new rewind applies");
+});
+
+test("restoring a new rewind never overwrites an existing user draft", () => {
+  editDraft("existing", { text: "my draft" });
+  restoreRewindDraft("existing", "original", "r1");
+  assert.equal(getDraft("existing").text, "my draft");
+  assert.equal(getDraft("existing").rewindId, "r1");
+});
+
+test("image completion updates source draft after another session opens", async () => {
+  const pending = deferred<Attached[]>();
+  const loading = addDraftImages("A", 1, () => pending.promise);
+  editDraft("B", { text: "other draft" });
+  assert.equal(getDraft("A").processing, 1);
+  pending.resolve([image]);
+  await loading;
+  assert.deepEqual(getDraft("A").images, [image]);
+  assert.equal(getDraft("A").processing, 0);
+  assert.equal(getDraft("B").text, "other draft");
+  assert.equal(getDraft("B").images.length, 0);
+});
+
+for (const replace of ["clear", "rewind"] as const) {
+  test(`image finishing after ${replace} cannot resurrect old attachments`, async () => {
+    const pending = deferred<Attached[]>();
+    const sid = `cancel-${replace}`;
+    const loading = addDraftImages(sid, 1, () => pending.promise);
+    if (replace === "clear") clearDraft(sid);
+    else setDraft(sid, "new rewind", "r-new");
+    pending.resolve([image]);
+    await loading;
+    assert.equal(getDraft(sid).images.length, 0);
+    assert.equal(getDraft(sid).processing, 0);
+  });
+}
+
+test("late successful submission does not clear a newer edit", () => {
+  editDraft("submit", { text: "first" });
+  const submitted = getDraft("submit").revision;
+  editDraft("submit", { text: "second" });
+  clearDraft("submit", submitted);
+  assert.equal(getDraft("submit").text, "second");
+});
+
+
+test("a delayed recovery response cannot undo a newer explicit rewind", () => {
+  const generation = getDraft("late-recovery").generation;
+  setDraft("late-recovery", "new rewind", "r-new");
+  editDraft("late-recovery", { text: "" });
+  restoreRewindDraft("late-recovery", "old rewind", "r-old", generation);
+  assert.equal(getDraft("late-recovery").rewindId, "r-new");
+  assert.equal(getDraft("late-recovery").text, "");
+});