@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/open-tabs.test.ts

@@ -0,0 +1,69 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { createOpenTabs, openTabFromUrl, OPEN_TABS_KEY } from "./open-tabs.ts";
+
+test("open tabs retain manual order, document identity and their latest destination across reloads", () => {
+  const saved = new Map<string, string>();
+  const storage = { getItem: (key: string) => saved.get(key) ?? null, setItem: (key: string, value: string) => { saved.set(key, value); } };
+  const tabs = createOpenTabs(storage);
+  tabs.open("/p/a/s/s1"); tabs.open("/p/a/files/src/a.md"); tabs.open("/p/a/files/b.md");
+  tabs.move("a", "file:b.md", 0);
+  tabs.open("/p/a/s/s1/agent/tool?agent=child");
+  tabs.open("/p/a/files/src/a.md?line=4");
+  tabs.open("/p/b/s/s1");
+  tabs.titles("a", new Map([["s1", "Actual title"]]));
+  tabs.setView("tabs");
+  assert.deepEqual(tabs.get("a").map((tab) => tab.id), ["file:b.md", "session:s1", "file:src/a.md"]);
+  assert.equal(tabs.get("a")[1]!.title, "Actual title");
+  assert.equal(tabs.get("a")[1]!.href, "/p/a/s/s1/agent/tool?agent=child");
+  assert.equal(tabs.get("a")[2]!.href, "/p/a/files/src/a.md?line=4");
+  assert.equal(tabs.get("b")[0]!.title, "新会话");
+  tabs.close("a", "session:s1");
+  tabs.titles("a", new Map([["s1", "Renamed after closing"]]));
+  const reopened = createOpenTabs(storage);
+  assert.deepEqual(reopened.get("a"), tabs.get("a"));
+  assert.equal(reopened.getView(), "tabs");
+  assert.equal(reopened.get("b").length, 1);
+  assert.equal(reopened.get("a").some((tab) => tab.kind === "session"), false);
+});
+
+test("saved navigation accepts literal filenames, rejects foreign destinations and isolates projects", () => {
+  const href = "/p/a/files/%E7%9B%AE%E5%BD%95/a%20%231%3F%25.md?line=3";
+  assert.equal(openTabFromUrl(href)?.tab.target, "目录/a #1?%.md");
+  for (const path of ["/p/a", "/p/a/files", "/p/a/changes", "/p/a/worktrees", "/settings", "https://evil.test/p/a/s/s1", "//evil.test/p/a/s/s1", "/p/a/files/../x", "/p/a/files/%00", "/p/a/files/%broken"]) assert.equal(openTabFromUrl(path), undefined, path);
+  const tabs = createOpenTabs({ getItem: () => JSON.stringify({ version: 1, projects: [["a", [
+    { href }, { href }, { href: "/p/b/s/other" }, { href: "javascript:alert(1)" }, { href: "/settings" },
+  ]]] }), setItem: () => {} });
+  assert.deepEqual(tabs.get("a").map((tab) => tab.href), [href]);
+});
+
+test("storage failures keep navigation usable and metadata stays bounded", () => {
+  const tabs = createOpenTabs({ getItem: () => { throw new Error("blocked"); }, setItem: () => { throw new Error("full"); } });
+  for (let i = 0; i < 55; i++) tabs.open(`/p/p${i}/s/s1`);
+  assert.equal(tabs.get("p0").length, 0);
+  assert.equal(tabs.get("p54").length, 1);
+  for (let i = 0; i < 260; i++) tabs.open(`/p/many/files/${i}.txt`);
+  assert.equal(tabs.get("many").length, 256);
+  const last = tabs.get("many").at(-1)!;
+  tabs.move("many", last.id, -5);
+  assert.equal(tabs.get("many")[0]!.id, last.id);
+  let writes = 0;
+  const stable = createOpenTabs({ getItem: () => null, setItem: (key) => { assert.equal(key, OPEN_TABS_KEY); writes++; } });
+  stable.open("/p/a/s/s1"); const snapshot = stable.get("a");
+  stable.open("/p/a/s/s1"); stable.move("a", "session:s1", 0); stable.close("a", "missing");
+  assert.equal(stable.get("a"), snapshot);
+  assert.equal(writes, 1);
+});
+
+test("stale store instances apply operations to the latest saved tabs without reopening closed entries", () => {
+  const saved = new Map<string, string>();
+  const storage = { getItem: (key: string) => saved.get(key) ?? null, setItem: (key: string, value: string) => { saved.set(key, value); } };
+  const a = createOpenTabs(storage), b = createOpenTabs(storage);
+  a.open("/p/a/s/s1"); b.open("/p/b/files/b.txt");
+  b.open("/p/a/files/a.txt"); a.close("a", "session:s1");
+  b.titles("a", new Map([["s1", "late title"]])); b.setView("tabs");
+  const reopened = createOpenTabs(storage);
+  assert.deepEqual(reopened.get("a").map((tab) => tab.id), ["file:a.txt"]);
+  assert.deepEqual(reopened.get("b").map((tab) => tab.id), ["file:b.txt"]);
+  assert.equal(reopened.getView(), "tabs");
+});

package/web/src/open-tabs.ts

@@ -0,0 +1,110 @@
+import { useSyncExternalStore } from "react";
+import { createPreferenceDocument, type PreferenceStorage } from "./preference-document.ts";
+
+export type OpenTab = { id: string; kind: "session" | "file"; target: string; href: string; title: string };
+export type SidebarView = "sessions" | "tabs";
+export const OPEN_TABS_KEY = "claude-ide:open-tabs:v1";
+const EMPTY: OpenTab[] = [];
+const MAX_PROJECTS = 50, MAX_TABS = 256;
+type TabsState = { version: 1; view: SidebarView; projects: [string, OpenTab[]][] };
+
+/** Derive identity from the document, while retaining line and subagent URLs. */
+export function openTabFromUrl(href: string): { pid: string; tab: OpenTab } | undefined {
+  if (href.length > 8192) return;
+  const pathname = href.split(/[?#]/, 1)[0]!;
+  const match = /^\/p\/([^/]+)\/(?:s\/([^/]+)(?:\/agent\/[^/]+)?|files\/(.+))$/.exec(pathname);
+  if (!match) return;
+  try {
+    const pid = decodeURIComponent(match[1]!), kind = match[2] ? "session" : "file";
+    const target = decodeURIComponent((match[2] ?? match[3])!);
+    if (!pid || /[/\0]/.test(pid) || !target || target.length > 4096 || target.startsWith("/") || target.includes("\0")
+      || target.split("/").some((part) => part === "." || part === "..")) return;
+    return { pid, tab: { id: `${kind}:${target}`, kind, target, href, title: kind === "file" ? target.split("/").at(-1)! : "新会话" } };
+  } catch { /* Ignore malformed percent escapes in a saved or unfinished URL. */ }
+}
+
+/** Navigation metadata only: opening tabs never mounts pages or retains transcripts. */
+function normalize(raw: unknown): TabsState {
+  const projects = new Map<string, OpenTab[]>();
+  let view: SidebarView = "sessions";
+  const saved = raw as Partial<TabsState> | null;
+  if (saved?.version === 1) {
+    if (saved.view === "tabs") view = "tabs";
+    if (Array.isArray(saved.projects)) for (const entry of saved.projects.slice(-MAX_PROJECTS)) {
+      if (!Array.isArray(entry) || typeof entry[0] !== "string" || !Array.isArray(entry[1])) continue;
+      const tabs = new Map<string, OpenTab>();
+      for (const value of entry[1].slice(-MAX_TABS)) {
+        const parsed = typeof value?.href === "string" ? openTabFromUrl(value.href) : undefined;
+        if (!parsed || parsed.pid !== entry[0]) continue;
+        const tab = parsed.tab;
+        if (tab.kind === "session" && typeof value.title === "string" && value.title) tab.title = value.title.slice(0, 500);
+        tabs.set(tab.id, tab);
+      }
+      projects.set(entry[0], [...tabs.values()]);
+    }
+  }
+  return { version: 1, view, projects: [...projects] };
+}
+
+export function createOpenTabs(storage?: PreferenceStorage) {
+  const document = createPreferenceDocument<TabsState>(OPEN_TABS_KEY, { version: 1, view: "sessions", projects: [] }, normalize, storage);
+  const get = (state: TabsState, pid: string) => state.projects.find(([id]) => id === pid)?.[1] ?? EMPTY;
+  const set = (state: TabsState, pid: string, tabs: OpenTab[]): TabsState => {
+    const projects = new Map(state.projects);
+    projects.delete(pid); projects.set(pid, tabs.slice(-MAX_TABS));
+    while (projects.size > MAX_PROJECTS) projects.delete(projects.keys().next().value!);
+    return { ...state, projects: [...projects] };
+  };
+  return {
+    get: (pid: string) => get(document.get(), pid),
+    getView: () => document.get().view,
+    subscribe: document.subscribe,
+    refresh: document.refresh,
+    setView(next: SidebarView) { document.change((state) => state.view === next ? state : { ...state, view: next }); },
+    open(href: string) {
+      const parsed = openTabFromUrl(href);
+      if (!parsed) return;
+      const { pid, tab } = parsed;
+      document.change((state) => {
+        const tabs = get(state, pid), existing = tabs.find((item) => item.id === tab.id);
+        if (existing?.href === href) return state;
+        return set(state, pid, existing ? tabs.map((item) => item.id === tab.id ? { ...item, href } : item) : [...tabs, tab]);
+      });
+    },
+    close(pid: string, id: string) {
+      document.change((state) => {
+        const tabs = get(state, pid);
+        return tabs.some((tab) => tab.id === id) ? set(state, pid, tabs.filter((tab) => tab.id !== id)) : state;
+      });
+    },
+    move(pid: string, id: string, index: number) {
+      document.change((state) => {
+        const tabs = get(state, pid), from = tabs.findIndex((tab) => tab.id === id);
+        if (from < 0 || !Number.isFinite(index)) return state;
+        const to = Math.max(0, Math.min(tabs.length - 1, Math.trunc(index)));
+        if (from === to) return state;
+        const next = [...tabs], [tab] = next.splice(from, 1);
+        next.splice(to, 0, tab!); return set(state, pid, next);
+      });
+    },
+    titles(pid: string, titles: ReadonlyMap<string, string>) {
+      document.change((state) => {
+        let changed = false;
+        const next = get(state, pid).map((tab) => {
+          const title = tab.kind === "session" ? titles.get(tab.target)?.slice(0, 500) : undefined;
+          if (!title || title === tab.title) return tab;
+          changed = true; return { ...tab, title };
+        });
+        return changed ? set(state, pid, next) : state;
+      });
+    },
+  };
+}
+
+export const openTabs = createOpenTabs();
+export function useOpenTabs(pid: string) {
+  return useSyncExternalStore(openTabs.subscribe, () => openTabs.get(pid), () => EMPTY);
+}
+export function useSidebarView() {
+  return useSyncExternalStore(openTabs.subscribe, openTabs.getView, () => "sessions" as const);
+}

package/web/src/pages/AgentView.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link, useParams, useSearchParams } from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import type { LiveEvent } from "@shared/protocol.ts";
+import { currentAgentTask } from "@shared/agent-tasks.ts";
+import { api } from "../api.ts";
+import { copyText } from "../clipboard.ts";
+import { Button } from "../ui/Button.tsx";
+import { CheckIcon, CopyIcon } from "../ui/icons.tsx";
+import { agentMetadataQuery, agentResponseModel, agentTranscriptParents, resolveSubagent, type SubagentInfo } from "../agent-history-flow.ts";
+import { hydrateSessionMessage, loadSessionHistory, subscribeSession, useSessionLive } from "../live.ts";
+import { buildItems } from "../transcript.ts";
+import { useProjects } from "../hooks.ts";
+import { MessageList } from "../components/MessageList.tsx";
+import { TranscriptContext } from "../components/Items.tsx";
+import { rememberAnnotationSession, useAnnotations } from "../annotations.ts";
+import { AnnotationSelection } from "../components/AnnotationSelection.tsx";
+
+const NO_EVENTS: LiveEvent[] = [];
+const NO_CHANGES = { before: () => null, tail: null };
+
+/** The full run of one subagent: its own transcript file plus live frames while it runs. */
+export function AgentView() {
+  const { pid, sid, tid } = useParams() as { pid: string; sid: string; tid: string };
+  const [params, setParams] = useSearchParams();
+  const live = useSessionLive(sid);
+  const annotationMode = useAnnotations((s) => s.mode);
+  useEffect(() => subscribeSession(sid, pid), [sid, pid]);
+  useEffect(() => rememberAnnotationSession(pid, sid), [pid, sid]);
+  const project = useProjects().data?.find((p) => p.id === pid);
+
+  // The main transcript tells us the tool call (description, live task status).
+  const main = useMemo(() => buildItems(undefined, live?.events ?? []), [live?.events]);
+  const call = main.find((it) => it.kind === "tool" && it.id === tid) as Extract<ReturnType<typeof buildItems>[number], { kind: "tool" }> | undefined;
+  const agents = useQuery(agentMetadataQuery(pid, sid,
+    () => api<SubagentInfo[]>(`/api/projects/${pid}/sessions/${sid}/subagents`)));
+  const tasks = live?.snapshot.agentTasks;
+  const routeTask = tasks?.find((task) => task.toolUseId === tid);
+  const agent = resolveSubagent(agents.data ?? [], tid, routeTask?.taskId ?? live?.agentOwners?.[tid], params.get("agent") ?? undefined);
+  const task = (agent && currentAgentTask(tasks ?? [], agent.agentId)) ?? routeTask;
+  const parent = task?.toolUseId ?? tid;
+  const parents = useMemo(() => agentTranscriptParents(tid, tasks ?? [], agent, live?.agentOwners), [tid, tasks, agent?.agentId, agent?.toolUseId, live?.agentOwners]);
+  const taskStatus = task?.status ?? "unknown";
+  // Preserve the resolved file identity in the URL: resumed tool IDs are not
+  // stored in the original sidecar and live task metadata can later be evicted.
+  const savedAgentId = params.get("agent");
+  useEffect(() => {
+    if (!agent || savedAgentId === agent.agentId) return;
+    setParams((current) => {
+      const next = new URLSearchParams(current);
+      next.set("agent", agent.agentId);
+      return next;
+    }, { replace: true });
+  }, [agent?.agentId, savedAgentId, setParams]);
+  const previousMetadata = useRef({ pid, sid, taskStatus });
+  useEffect(() => {
+    const previous = previousMetadata.current;
+    previousMetadata.current = { pid, sid, taskStatus };
+    // Route changes already fetch their own key; only task transitions need an
+    // explicit refresh. Same-key errors retain the last successful metadata.
+    if (previous.pid === pid && previous.sid === sid && previous.taskStatus !== taskStatus) void agents.refetch();
+  }, [pid, sid, taskStatus, agents.refetch]);
+  const history = agent && live?.history?.source === agent.agentId ? live.history : undefined;
+  const model = task?.model ?? agentResponseModel(parent, live?.events ?? NO_EVENTS, history?.items);
+  const resetCount = live?.resetCount;
+  useEffect(() => {
+    if (agent && resetCount !== undefined) void loadSessionHistory(sid, pid, "latest", agent.agentId);
+  }, [sid, pid, agent?.agentId, resetCount]);
+  const historical = history?.mode === "history";
+  const visibleEvents = historical ? NO_EVENTS : live?.events ?? NO_EVENTS;
+  const items = useMemo(() => buildItems(history?.items, visibleEvents, { parent, parents }), [history?.items, visibleEvents, parent, parents]);
+  const running = !historical && taskStatus === "running";
+  const waiting = !historical && (taskStatus === "pending" || taskStatus === "paused");
+  const metadataError = agent ? undefined : agents.isError ? agents.error.message : agents.isSuccess ? "未找到该子 agent 的会话记录，请重试" : undefined;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <header className="flex min-w-0 items-center gap-3 border-b border-border px-4 py-2.5 md:px-6">
+        <Link to={`/p/${pid}/s/${sid}`} className="shrink-0 rounded-md px-2 py-1.5 text-sm text-muted hover:bg-surface-2">
+          ← 返回会话
+        </Link>
+        <div className="min-w-0 flex-1">
+          <h1 className="truncate text-lg">{agent?.description || task?.description || (call?.input.description as string | undefined) || "子 agent"}</h1>
+          <p className="truncate text-xs text-muted" title={model} data-testid="agent-model">模型：{model ?? (["pending", "running", "paused"].includes(taskStatus) ? "等待响应" : "未记录")}</p>
+        </div>
+        {agent?.agentType && <span className="hidden shrink-0 text-xs text-muted sm:inline">{agent.agentType}</span>}
+        {(running || waiting || agent) && <div className="ml-auto flex shrink-0 items-center gap-2">
+          {running && <span className="size-2 animate-pulse rounded-full bg-accent" aria-label="运行中" />}
+          {waiting && <span className="text-xs text-muted">{taskStatus === "paused" ? "已暂停" : "等待开始"}</span>}
+          {agent && <CopyAgentId id={agent.agentId} />}
+        </div>}
+      </header>
+      <TranscriptContext.Provider value={{ root: project?.path, sessionUrl: `/p/${pid}/s/${sid}`, viewKey: `/p/${pid}/s/${sid}/agent/${tid}`,
+        readImageUrl: (toolId) => agent ? `/api/projects/${pid}/sessions/${sid}/tools/${encodeURIComponent(toolId)}/image?${new URLSearchParams({ agent: agent.agentId })}` : undefined,
+        loadMessage: (uuid) => {
+        if (!agent) return Promise.reject(new Error("尚未找到子 agent 的会话记录，请重新加载"));
+        return hydrateSessionMessage(sid, pid, uuid, agent.agentId);
+      } }}>
+        <AnnotationSelection projectId={pid} sessionId={sid} agentToolUseId={tid} enabled={annotationMode} className="flex min-h-0 flex-1 flex-col">
+          <MessageList key={`${pid}:${sid}:${tid}`} items={items} loading={agents.isPending || !!agent && (!history || !!history.loading && !history.items.length)} running={running} waiting={waiting} turnSlots={NO_CHANGES}
+            history={{ older: !!history?.older, newer: !!history?.newer, historical, loading: agents.isFetching && !agent || !!history?.loading, error: history?.error ?? metadataError,
+              load: async (direction) => {
+                if (agent) await loadSessionHistory(sid, pid, direction, agent.agentId);
+                else await agents.refetch();
+              } }} />
+        </AnnotationSelection>
+      </TranscriptContext.Provider>
+    </div>
+  );
+}
+
+function CopyAgentId({ id }: { id: string }) {
+  const [state, setState] = useState<"idle" | "copied" | "error">("idle");
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  return (
+    <Button
+      size="sm"
+      variant="ghost"
+      icon={state === "copied" ? <CheckIcon /> : <CopyIcon />}
+      onClick={async () => {
+        clearTimeout(timer.current);
+        try {
+          await copyText(id);
+          setState("copied");
+        } catch {
+          setState("error");
+        }
+        timer.current = setTimeout(() => setState("idle"), 1500);
+      }}
+      title={`复制子会话 ID：${id}`}
+      aria-label="复制子会话 ID"
+      data-testid="copy-agent-id"
+    >
+      {state === "copied" ? "已复制" : state === "error" ? "复制失败" : "复制 ID"}
+    </Button>
+  );
+}

package/web/src/pages/ChangesView.tsx

@@ -0,0 +1,193 @@
+import { useMemo } from "react";
+import { Link, useParams, useSearchParams } from "react-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ChangeStatus, GitDiff, GitStatus } from "@shared/files.ts";
+import { api, ApiError } from "../api.ts";
+import { DiffView, diffStats } from "../components/DiffView.tsx";
+import { ProjectTabs, encodePath, fileApi } from "../components/ProjectNav.tsx";
+import { Button, cx } from "../ui/Button.tsx";
+import { ResizablePane } from "../ui/ResizablePane.tsx";
+import { EmptyState, Skeleton, Tag, type TagTone } from "../ui/Form.tsx";
+import { ArrowLeftIcon, BranchIcon, CheckIcon, DiffIcon, FileIcon, RefreshIcon } from "../ui/icons.tsx";
+
+const STATUS_STYLE: Record<ChangeStatus, string> = {
+  M: "text-accent",
+  A: "text-ok",
+  D: "text-danger",
+  U: "text-danger",
+  "??": "text-ok",
+};
+const STATUS_TONE: Record<ChangeStatus, TagTone> = { M: "accent", A: "ok", D: "danger", U: "danger", "??": "ok" };
+const STATUS_LABEL: Record<ChangeStatus, string> = { M: "已修改", A: "新增", D: "已删除", U: "冲突", "??": "未跟踪" };
+const ORDER: ChangeStatus[] = ["U", "M", "A", "??", "D"];
+
+export function ChangesView() {
+  const { pid } = useParams() as { pid: string };
+  const [search] = useSearchParams();
+  const qc = useQueryClient();
+  const status = useQuery({
+    queryKey: ["git-status", pid],
+    queryFn: () => api<GitStatus>(`/api/projects/${pid}/git/status`),
+    refetchOnWindowFocus: true,
+  });
+  // A diff only makes sense inside a repository.
+  const selected = status.data?.isRepo === false ? "" : (search.get("path") ?? "");
+
+  const refresh = () => {
+    qc.invalidateQueries({ queryKey: ["git-status", pid] });
+    qc.invalidateQueries({ queryKey: ["git-diff", pid] });
+  };
+  const changes = status.data?.isRepo ? status.data.changes : [];
+  const counts = useMemo(() => {
+    const m = new Map<ChangeStatus, number>();
+    for (const c of changes) m.set(c.status, (m.get(c.status) ?? 0) + 1);
+    return ORDER.filter((s) => m.get(s)).map((s) => [s, m.get(s)!] as const);
+  }, [changes]);
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <ProjectTabs projectId={pid}>
+        <Button variant="ghost" size="sm" icon={<RefreshIcon />} onClick={refresh} loading={status.isFetching}>
+          刷新
+        </Button>
+      </ProjectTabs>
+      <div className="flex min-h-0 min-w-0 flex-1">
+        <ResizablePane storageKey="claude-ide:changes-width" label="调整变更列表宽度" defaultWidth={320} className={cx(selected ? "hidden md:flex" : "flex", "min-h-0 w-full flex-col border-border bg-surface-2/30 md:border-r")}>
+          {status.isPending ? (
+            <div className="p-3">
+              <Skeleton rows={5} />
+            </div>
+          ) : status.isError ? (
+            <p className="p-4 text-sm text-danger">{(status.error as Error).message}</p>
+          ) : !status.data.isRepo ? (
+            <div className="p-4">
+              <EmptyState icon={<DiffIcon size={16} />} title="不是 git 仓库" testId="not-git" compact>
+                这个项目不是 git 仓库，无法查看变更。在项目目录里运行 <code className="font-mono">git init</code> 后刷新即可。
+              </EmptyState>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-1.5 border-b border-border px-3 py-2.5">
+                <div className="flex min-w-0 items-center gap-1.5 text-xs text-muted">
+                  <BranchIcon className="shrink-0" />
+                  {status.data.branch ? <span className="truncate font-mono text-text">{status.data.branch}</span> : "分离的 HEAD"}
+                  <span className="ml-auto shrink-0">{status.data.changes.length} 个文件有变更</span>
+                </div>
+                {counts.length > 0 && (
+                  <div className="flex flex-wrap gap-1">
+                    {counts.map(([s, n]) => (
+                      <Tag key={s} tone={STATUS_TONE[s]}>
+                        {STATUS_LABEL[s]} {n}
+                      </Tag>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <ul className="min-h-0 flex-1 overflow-y-auto py-1" aria-label="变更文件">
+                {status.data.changes.map((c) => {
+                  const slash = c.path.lastIndexOf("/");
+                  return (
+                    <li key={`${c.path}:${c.status}`}>
+                      <Link
+                        to={`/p/${pid}/changes?path=${encodeURIComponent(c.path)}`}
+                        aria-current={selected === c.path ? "page" : undefined}
+                        className={cx("flex items-center gap-2 px-3 py-2 text-sm md:py-1.5", selected === c.path ? "bg-accent/10 font-medium" : "hover:bg-surface-2/80")}
+                        data-testid="change-item"
+                        title={`${c.path} · ${STATUS_LABEL[c.status]}${c.staged ? " · 已暂存" : ""}`}
+                      >
+                        <span className={cx("w-5 shrink-0 text-center font-mono text-xs font-semibold", STATUS_STYLE[c.status])} title={STATUS_LABEL[c.status]} data-status={c.status}>
+                          {c.status}
+                        </span>
+                        <span className="min-w-0 flex-1 truncate font-mono text-[13px]" dir="ltr">
+                          {slash > 0 && <span className="text-muted">{c.path.slice(0, slash + 1)}</span>}
+                          {c.path.slice(slash + 1)}
+                        </span>
+                        {c.staged && (
+                          <span className="shrink-0 text-[11px] text-ok" title="已暂存（git add）">
+                            已暂存
+                          </span>
+                        )}
+                      </Link>
+                    </li>
+                  );
+                })}
+                {status.data.changes.length === 0 && (
+                  <li className="p-3">
+                    <EmptyState icon={<CheckIcon size={16} />} title="工作区是干净的，没有变更" compact>
+                      Claude 改动文件后，这里会列出每个文件，点开即可看 diff。
+                    </EmptyState>
+                  </li>
+                )}
+              </ul>
+            </>
+          )}
+        </ResizablePane>
+        <section className={cx(selected ? "flex" : "hidden md:flex", "min-h-0 min-w-0 flex-1 flex-col")}>
+          {selected ? (
+            <DiffPanel pid={pid} path={selected} />
+          ) : (
+            <div className="m-auto w-full max-w-md p-6">
+              <EmptyState icon={<DiffIcon size={16} />} title={changes.length ? "选择左侧的文件查看 diff" : "没有可查看的 diff"}>
+                {changes.length
+                  ? `共 ${changes.length} 个文件有未提交的改动（相对 HEAD，包括未跟踪的新文件）。`
+                  : "这里显示工作区相对 HEAD 的改动。每一轮对话改了哪些文件，也可以在会话里的“本轮改动”查看。"}
+              </EmptyState>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function DiffPanel({ pid, path }: { pid: string; path: string }) {
+  const diff = useQuery({
+    queryKey: ["git-diff", pid, path],
+    queryFn: () => api<GitDiff>(fileApi(pid, "git/diff", { path })),
+  });
+  const stats = useMemo(() => (diff.data ? diffStats(diff.data.diff) : null), [diff.data]);
+  const slash = path.lastIndexOf("/");
+  const st = diff.data?.status;
+  return (
+    <>
+      <div className="flex min-w-0 items-center gap-2 border-b border-border px-2 py-1.5 md:px-4">
+        <Link to={`/p/${pid}/changes`} className="inline-flex h-10 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-sm text-muted hover:bg-surface-2 hover:text-text md:hidden" aria-label="返回变更列表">
+          <ArrowLeftIcon />
+          返回
+        </Link>
+        <div className="min-w-0 flex-1 truncate font-mono text-sm" title={path}>
+          {slash > 0 && <span className="text-muted">{path.slice(0, slash + 1)}</span>}
+          <span className="font-medium">{path.slice(slash + 1)}</span>
+        </div>
+        {st && <Tag tone={STATUS_TONE[st]}>{STATUS_LABEL[st]}</Tag>}
+        {stats && (stats.add > 0 || stats.del > 0) && (
+          <span className="hidden shrink-0 font-mono text-xs sm:inline">
+            <span className="text-ok">+{stats.add}</span> <span className="text-danger">−{stats.del}</span>
+          </span>
+        )}
+        {st !== "D" && (
+          <Link to={`/p/${pid}/files/${encodePath(path)}`} className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 text-xs font-medium hover:bg-surface-2 md:h-7">
+            <FileIcon />
+            查看文件
+          </Link>
+        )}
+      </div>
+      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto">
+        {diff.isPending ? (
+          <div className="p-4">
+            <Skeleton rows={6} />
+          </div>
+        ) : diff.isError ? (
+          <p className="m-4 rounded-md border border-danger/30 bg-danger/5 px-3 py-2 text-sm text-danger" role="alert">
+            {diff.error instanceof ApiError ? diff.error.message : "读取失败"}
+          </p>
+        ) : (
+          <>
+            {diff.data.truncated && <p className="border-b border-border bg-surface-2 px-4 py-2 text-xs text-muted">diff 太大，只显示了一部分。</p>}
+            <DiffView diff={diff.data.diff} />
+          </>
+        )}
+      </div>
+    </>
+  );
+}