@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/ProjectExtras.tsx

@@ -0,0 +1,299 @@
+import { Fragment, useMemo, useState, useSyncExternalStore, type ReactNode } from "react";
+import { Link } from "react-router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ExtraDirSource, ExtraDirsInfo, TurnChanges, TurnChangesInfo, TurnFile, TurnFileDiff } from "@shared/project.ts";
+import type { SessionListItem } from "@shared/protocol.ts";
+import type { Item } from "../transcript.ts";
+import { api, ApiError } from "../api.ts";
+import { fromHunks, lineDiff } from "../diff.ts";
+import { DiffView } from "./Items.tsx";
+import { Modal } from "./Modal.tsx";
+import { Button, cx } from "../ui/Button.tsx";
+import { SwitchRow, Tag, monoInputCls } from "../ui/Form.tsx";
+import { BranchIcon, ChevronRightIcon, FolderIcon, PlusSmIcon } from "../ui/icons.tsx";
+
+// ---------- files changed by each turn ----------
+
+const FILE_TOOLS = new Set(["Edit", "Write", "MultiEdit", "NotebookEdit"]);
+
+/**
+ * Per-turn change bars, placed at the end of each turn (just before the next turn's prompt,
+ * or at the end of the transcript). Refetched whenever an edit finishes or a turn ends.
+ */
+export function useTurnChangeSlots(pid: string, sid: string, items: Item[], running: boolean) {
+  const edits = items.filter((it) => it.kind === "tool" && FILE_TOOLS.has(it.name) && it.result).length;
+  const results = items.filter((it) => it.kind === "result").length;
+  const q = useQuery({
+    queryKey: ["turn-changes", pid, sid, edits, results, running],
+    queryFn: () => api<TurnChangesInfo>(`/api/projects/${pid}/sessions/${sid}/turn-changes`),
+    placeholderData: (prev) => prev,
+  });
+  return useMemo(() => {
+    const byPrompt = new Map<string, TurnChanges[]>();
+    for (const t of q.data?.turns ?? []) byPrompt.set(t.prompt, [...(byPrompt.get(t.prompt) ?? []), t]);
+    const before = new Map<string, ReactNode>();
+    let open: TurnChanges[] = [];
+    const render = (turns: TurnChanges[]) =>
+      turns.length ? (
+        <>
+          {turns.map((t) => (
+            <TurnChangesBar key={t.id} pid={pid} sid={sid} turn={t} />
+          ))}
+        </>
+      ) : null;
+    for (const it of items) {
+      if (it.kind !== "user") continue;
+      // A turn ends where the next prompt (any user message, even one that changed nothing) starts.
+      if (open.length) before.set(it.key, render(open));
+      open = byPrompt.get(it.key) ?? [];
+    }
+    return { before: (key: string) => before.get(key) ?? null, tail: render(open) };
+  }, [q.data, items, pid, sid]);
+}
+
+/** Render items with the per-turn change bars in between. */
+export function WithTurnChanges({ items, slots, render }: { items: Item[]; slots: ReturnType<typeof useTurnChangeSlots>; render: (it: Item) => ReactNode }) {
+  return (
+    <>
+      {items.map((it) => (
+        <Fragment key={it.key}>
+          {slots.before(it.key)}
+          {render(it)}
+        </Fragment>
+      ))}
+      {slots.tail}
+    </>
+  );
+}
+
+const STATUS_STYLE: Record<TurnFile["status"], string> = { A: "text-ok", M: "text-accent", D: "text-danger" };
+const STATUS_LABEL: Record<TurnFile["status"], string> = { A: "新增", M: "修改", D: "删除" };
+
+function TurnChangesBar({ pid, sid, turn }: { pid: string; sid: string; turn: TurnChanges }) {
+  const [open, setOpen] = useState(false);
+  const [file, setFile] = useState<string>();
+  const adds = turn.files.reduce((n, f) => n + f.additions, 0);
+  const dels = turn.files.reduce((n, f) => n + f.deletions, 0);
+  return (
+    <div className="rounded-lg border border-border bg-surface/60 text-sm" data-testid="turn-changes" data-turn={turn.id}>
+      <button className="flex w-full min-w-0 items-center gap-2 px-3 py-2 text-left text-muted" onClick={() => setOpen((v) => !v)} aria-expanded={open}>
+        <ChevronRightIcon size={12} className={cx("shrink-0 transition-transform", open && "rotate-90")} />
+        <span className="text-text">本轮改动：{turn.files.length} 个文件</span>
+        <span className="text-xs">
+          <span className="text-ok">+{adds}</span> <span className="text-danger">-{dels}</span>
+        </span>
+      </button>
+      {open && (
+        <div className="border-t border-border">
+          <ul className="py-1">
+            {turn.files.map((f) => (
+              <li key={f.path}>
+                <button
+                  className={`flex w-full min-w-0 items-center gap-2 px-3 py-2 text-left md:py-1.5 ${file === f.path ? "bg-surface-2" : "hover:bg-surface-2/70"}`}
+                  onClick={() => setFile(file === f.path ? undefined : f.path)}
+                  aria-expanded={file === f.path}
+                  data-testid="turn-file"
+                  data-path={f.path}
+                >
+                  <span className={`w-4 shrink-0 font-mono text-xs font-semibold ${STATUS_STYLE[f.status]}`} title={STATUS_LABEL[f.status]}>
+                    {f.status}
+                  </span>
+                  <span className="min-w-0 flex-1 truncate font-mono text-[13px]" title={f.path}>
+                    {f.path}
+                  </span>
+                  {f.unchanged ? (
+                    <span className="shrink-0 text-xs text-muted">无净变化</span>
+                  ) : (
+                    <span className="shrink-0 text-xs">
+                      <span className="text-ok">+{f.additions}</span> <span className="text-danger">-{f.deletions}</span>
+                    </span>
+                  )}
+                </button>
+                {file === f.path && <TurnFileDiffView pid={pid} sid={sid} turn={turn.id} path={f.path} />}
+              </li>
+            ))}
+          </ul>
+          <p className="border-t border-border px-3 py-1.5 text-xs text-muted">
+            根据 CLI 的代码检查点和本轮的 Edit/Write 调用统计；Bash 命令和子 agent 改动的文件追踪不到，不在此列。
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TurnFileDiffView({ pid, sid, turn, path }: { pid: string; sid: string; turn: string; path: string }) {
+  const diff = useQuery({
+    queryKey: ["turn-diff", pid, sid, turn, path],
+    queryFn: () => api<TurnFileDiff>(`/api/projects/${pid}/sessions/${sid}/turn-changes/diff?${new URLSearchParams({ turn, path })}`),
+  });
+  const rows = useMemo(() => {
+    const d = diff.data;
+    if (!d || d.binary) return [];
+    if (d.patches) return fromHunks(d.patches);
+    return lineDiff(d.before ?? "", d.after ?? "");
+  }, [diff.data]);
+  if (diff.isPending) return <p className="px-3 py-2 text-xs text-muted">加载中…</p>;
+  if (diff.isError) return <p className="px-3 py-2 text-xs text-danger">{diff.error instanceof ApiError ? diff.error.message : "读取失败"}</p>;
+  if (diff.data.binary) return <p className="px-3 py-2 text-xs text-muted">二进制文件，无法显示差异。</p>;
+  return (
+    <div className="border-y border-border" data-testid="turn-diff">
+      {diff.data.patches && <p className="bg-surface-2/60 px-3 py-1 text-xs text-muted">没有检查点，按本轮各次编辑的补丁显示。</p>}
+      {diff.data.truncated && <p className="bg-surface-2/60 px-3 py-1 text-xs text-muted">文件太大，只比较了前 1 MiB。</p>}
+      <DiffView rows={rows} />
+    </div>
+  );
+}
+
+// ---------- extra directories (/add-dir) ----------
+
+let dirsDialogFor: string | undefined;
+const dirsListeners = new Set<() => void>();
+const setDirsDialog = (sid: string | undefined) => {
+  dirsDialogFor = sid;
+  for (const l of dirsListeners) l();
+};
+/** Open the extra-directories dialog of a session (e.g. from the session menu). */
+export const openDirsDialog = (sid: string) => setDirsDialog(sid);
+
+function useDirsDialog(sid: string) {
+  return useSyncExternalStore(
+    (l) => {
+      dirsListeners.add(l);
+      return () => dirsListeners.delete(l);
+    },
+    () => dirsDialogFor === sid,
+  );
+}
+
+function useExtraDirs(pid: string, sid: string) {
+  return useQuery({ queryKey: ["dirs", pid, sid], queryFn: () => api<ExtraDirsInfo>(`/api/projects/${pid}/sessions/${sid}/dirs`) });
+}
+
+/** `/add-dir <path>` from the composer. */
+export function useAddDir(pid: string, sid: string) {
+  const qc = useQueryClient();
+  return async (path: string, remember = false) => {
+    const info = await api<ExtraDirsInfo>(`/api/projects/${pid}/sessions/${sid}/dirs`, { method: "POST", json: { path, remember } });
+    qc.setQueryData(["dirs", pid, sid], info);
+  };
+}
+
+const SOURCE_LABEL: Record<ExtraDirSource, string> = { session: "本会话", local: "已记住", project: "项目设置", user: "用户设置" };
+
+/**
+ * Under the session header: the worktree the session runs in, and the directories outside the
+ * project it may access. Hidden when there is neither.
+ */
+export function SessionContextBar({ pid, sid, meta }: { pid: string; sid: string; meta?: SessionListItem }) {
+  const dirs = useExtraDirs(pid, sid);
+  const open = useDirsDialog(sid);
+  const list = dirs.data?.dirs ?? [];
+  if (!meta?.worktree && list.length === 0 && !open) return null;
+  return (
+    <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 border-b border-border px-4 py-1.5 text-xs text-muted md:px-6" data-testid="session-context">
+      {meta?.worktree && (
+        <Link to={`/p/${pid}/worktrees`} className="flex min-w-0 items-center gap-1 hover:text-accent" title={meta.cwd} data-testid="session-worktree">
+          <BranchIcon size={12} className="shrink-0" />
+          <span className="truncate">
+            worktree <span className="font-mono text-text">{meta.worktree}</span>
+          </span>
+        </Link>
+      )}
+      {list.length > 0 && (
+        <button className="flex min-w-0 items-center gap-1 hover:text-accent" onClick={() => setDirsDialog(sid)} data-testid="extra-dirs-button">
+          <FolderIcon size={12} className="shrink-0" />
+          <span className="truncate">额外目录 {list.length}</span>
+        </button>
+      )}
+      {open && <ExtraDirsDialog pid={pid} sid={sid} info={dirs.data} onClose={() => setDirsDialog(undefined)} />}
+    </div>
+  );
+}
+
+function ExtraDirsDialog({ pid, sid, info, onClose }: { pid: string; sid: string; info?: ExtraDirsInfo; onClose: () => void }) {
+  const qc = useQueryClient();
+  const addDir = useAddDir(pid, sid);
+  const [path, setPath] = useState("");
+  const [remember, setRemember] = useState(false);
+  const add = useMutation({
+    mutationFn: () => addDir(path, remember),
+    onSuccess: () => setPath(""),
+  });
+  const remove = useMutation({
+    mutationFn: (dir: string) => api<ExtraDirsInfo>(`/api/projects/${pid}/sessions/${sid}/dirs?${new URLSearchParams({ path: dir })}`, { method: "DELETE" }),
+    onSuccess: (data) => qc.setQueryData(["dirs", pid, sid], data),
+  });
+  return (
+    <Modal title="额外目录" onClose={onClose} testId="dirs-dialog">
+      <p className="text-sm text-muted">
+        除了会话的工作目录{info && <span className="font-mono"> {info.cwd}</span>}，Claude 还可以读写这些目录（相当于 CLI 的 /add-dir）。运行中的会话立即生效。
+      </p>
+      <ul className="mt-3 divide-y divide-border rounded-lg border border-border bg-surface empty:hidden" aria-label="额外目录列表">
+        {info?.dirs.map((d) => {
+          const removable = d.sources.includes("session") || d.sources.includes("local");
+          return (
+            <li key={d.path} className="flex min-w-0 items-center gap-2 py-2 pl-3 pr-1.5" data-testid="extra-dir" data-path={d.path}>
+              <FolderIcon className="shrink-0 text-muted" />
+              <div className="min-w-0 flex-1">
+                <div className={cx("truncate font-mono text-[13px]", !d.exists && "text-danger line-through")} title={d.path}>
+                  {d.path}
+                </div>
+                <div className="mt-1 flex flex-wrap gap-1">
+                  {d.sources.map((s) => (
+                    <Tag key={s} tone={s === "session" ? "accent" : "neutral"}>
+                      {SOURCE_LABEL[s]}
+                    </Tag>
+                  ))}
+                  {!d.exists && <Tag tone="danger">目录不存在</Tag>}
+                </div>
+              </div>
+              {removable ? (
+                <Button variant="ghost" size="sm" className="text-danger hover:text-danger" onClick={() => remove.mutate(d.path)} disabled={remove.isPending}>
+                  移除
+                </Button>
+              ) : (
+                <span className="shrink-0 px-2 text-xs text-muted" title="在设置文件里，请在设置页修改">
+                  只读
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      {info && info.dirs.length === 0 && <p className="mt-3 rounded-lg border border-dashed border-border px-3 py-4 text-center text-sm text-muted">还没有额外目录。在下面填一个绝对路径即可添加。</p>}
+      <form
+        className="mt-4 space-y-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (path.trim()) add.mutate();
+        }}
+      >
+        <input aria-label="目录路径" placeholder="/home/you/other-repo" value={path} onChange={(e) => setPath(e.target.value)} className={monoInputCls} />
+        <SwitchRow
+          checked={remember}
+          onChange={setRemember}
+          label="记住这个目录"
+          desc={
+            <>
+              写进 <span className="font-mono">.claude/settings.local.json</span>，以后这个目录下的会话（包括 CLI）都能访问
+            </>
+          }
+        />
+        {(add.error || remove.error) && (
+          <p role="alert" className="text-xs text-danger">
+            {((add.error ?? remove.error) as Error).message}
+          </p>
+        )}
+        <div className="flex justify-end gap-2 border-t border-border pt-3">
+          <Button variant="ghost" onClick={onClose}>
+            完成
+          </Button>
+          <Button type="submit" variant="primary" icon={<PlusSmIcon />} disabled={!path.trim()} loading={add.isPending}>
+            添加
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/web/src/components/ProjectNav.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import { Link, useLocation } from "react-router";
+import { cx } from "../ui/Button.tsx";
+import { BranchIcon, ChatIcon, DiffIcon, FileIcon } from "../ui/icons.tsx";
+import { projectFilesUrl, useProjectFilesState } from "../project-files-state.ts";
+
+const tabs = (pid: string, file: string) => [
+  { to: `/p/${pid}`, base: `/p/${pid}`, label: "项目概览", end: true, icon: <ChatIcon /> },
+  { to: projectFilesUrl(pid, file), base: `/p/${pid}/files`, label: "文件", end: false, icon: <FileIcon /> },
+  { to: `/p/${pid}/changes`, base: `/p/${pid}/changes`, label: "变更", end: false, icon: <DiffIcon /> },
+  { to: `/p/${pid}/worktrees`, base: `/p/${pid}/worktrees`, label: "工作区", end: false, icon: <BranchIcon /> },
+];
+const activeTab = (pathname: string, tab: { base: string; end: boolean }) => pathname === tab.base || !tab.end && pathname.startsWith(`${tab.base}/`);
+
+/** Project navigation, kept in the main page instead of duplicated in the sidebar. */
+export function ProjectTabs({ projectId, children }: { projectId: string; children?: ReactNode }) {
+  const { pathname } = useLocation();
+  const state = useProjectFilesState(projectId);
+  return (
+    <header className="flex min-w-0 items-center gap-2 border-b border-border px-2 py-1.5 md:px-4">
+      <nav aria-label="项目页面" className="flex min-w-0 flex-1 gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {tabs(projectId, state.file).map((t) => (
+          <Link
+            key={t.base}
+            to={t.to}
+            aria-current={activeTab(pathname, t) ? "page" : undefined}
+            className={cx(
+                "flex h-10 shrink-0 items-center gap-1.5 rounded-md px-3 text-sm transition-colors md:h-8",
+                activeTab(pathname, t) ? "bg-surface-2 font-medium text-text" : "text-muted hover:bg-surface-2/70 hover:text-text",
+              )}
+          >
+            <span aria-hidden className="hidden sm:inline">
+              {t.icon}
+            </span>
+            {t.label}
+          </Link>
+        ))}
+      </nav>
+      {children && <div className="flex shrink-0 items-center gap-1.5">{children}</div>}
+    </header>
+  );
+}
+
+export const encodePath = (p: string) => p.split("/").map(encodeURIComponent).join("/");
+
+export const fileApi = (pid: string, endpoint: string, params: Record<string, string>) =>
+  `/api/projects/${pid}/${endpoint}?${new URLSearchParams(params).toString()}`;

package/web/src/components/SessionActions.tsx

@@ -0,0 +1,271 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { SessionFileInfo, SessionListItem } from "@shared/protocol.ts";
+import { api, ApiError } from "../api.ts";
+import { setDraft } from "../drafts.ts";
+import { Menu, MenuItem, Modal } from "./Modal.tsx";
+import { CopyButton } from "./CopyButton.tsx";
+import { Button } from "../ui/Button.tsx";
+import { RadioCards } from "../ui/Controls.tsx";
+import { copyText } from "../clipboard.ts";
+import { openDirsDialog } from "./ProjectExtras.tsx";
+import { SessionChannelsDialog } from "./SessionChannels.tsx";
+
+type RewindMode = "conversation" | "code" | "both";
+type FilesPreview = { canRewind: boolean; error?: string; filesChanged?: string[]; insertions?: number; deletions?: number };
+
+function useInvalidateSessions(pid: string) {
+  const qc = useQueryClient();
+  return () => qc.invalidateQueries({ queryKey: ["sessions", pid] });
+}
+
+/** Header menu: rename, pin, archive, fork, export, delete. */
+export function SessionMenu({ pid, sid, meta }: { pid: string; sid: string; meta?: SessionListItem }) {
+  const navigate = useNavigate();
+  const invalidate = useInvalidateSessions(pid);
+  const [renaming, setRenaming] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [channels, setChannels] = useState(false);
+  const [info, setInfo] = useState(false);
+  const patch = (body: object) => api(`/api/projects/${pid}/sessions/${sid}`, { method: "PATCH", json: body }).then(invalidate);
+  const fork = useMutation({
+    mutationFn: () => api<{ id: string }>(`/api/projects/${pid}/sessions/${sid}/fork`, { method: "POST", json: {} }),
+    onSuccess: ({ id }) => {
+      invalidate();
+      navigate(`/p/${pid}/s/${id}`);
+    },
+  });
+
+  return (
+    <>
+      <Menu label="会话操作" testId="session-menu">
+        <MenuItem onClick={() => setRenaming(true)}>重命名</MenuItem>
+        <MenuItem onClick={() => patch({ pinned: !meta?.pinned })}>{meta?.pinned ? "取消置顶" : "置顶"}</MenuItem>
+        <MenuItem onClick={() => patch({ archived: !meta?.archived })}>{meta?.archived ? "取消归档" : "归档"}</MenuItem>
+        <MenuItem onClick={() => fork.mutate()}>Fork 整个会话</MenuItem>
+        <MenuItem onClick={() => openDirsDialog(sid)}>额外目录…</MenuItem>
+        <MenuItem onClick={() => setChannels(true)}>推送与订阅…</MenuItem>
+        <MenuItem onClick={() => window.open(`/api/projects/${pid}/sessions/${sid}/export`, "_blank")}>导出对话</MenuItem>
+        <MenuItem onClick={() => void copyText(sid)}>复制会话 ID</MenuItem>
+        <MenuItem onClick={() => setInfo(true)}>会话文件…</MenuItem>
+        <MenuItem onClick={() => void copyText(`claude --resume ${sid}`)}>复制 CLI 续聊命令</MenuItem>
+        <MenuItem danger onClick={() => setDeleting(true)}>
+          删除
+        </MenuItem>
+      </Menu>
+      {renaming && <RenameDialog current={meta?.title ?? ""} onClose={() => setRenaming(false)} onSave={(title) => patch({ title }).then(() => setRenaming(false))} />}
+      {channels && <SessionChannelsDialog key={sid} pid={pid} sid={sid} onClose={() => setChannels(false)} />}
+      {info && <SessionFileDialog pid={pid} sid={sid} onClose={() => setInfo(false)} />}
+      {deleting && (
+        <Modal title="删除会话？" onClose={() => setDeleting(false)} testId="delete-dialog">
+          <p className="text-sm text-muted">会话文件会从磁盘删除，CLI 里也将看不到它。这个操作无法撤销。</p>
+          <div className="mt-5 flex justify-end gap-2">
+            <Button variant="ghost" onClick={() => setDeleting(false)}>
+              取消
+            </Button>
+            <Button
+              variant="danger"
+              onClick={async () => {
+                await api(`/api/projects/${pid}/sessions/${sid}`, { method: "DELETE" });
+                invalidate();
+                navigate(`/p/${pid}`);
+              }}
+            >
+              确认删除
+            </Button>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+function RenameDialog({ current, onClose, onSave }: { current: string; onClose: () => void; onSave: (t: string) => void }) {
+  const [title, setTitle] = useState(current);
+  return (
+    <Modal title="重命名会话" onClose={onClose}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (title.trim()) onSave(title.trim());
+        }}
+      >
+        <input
+          aria-label="会话标题"
+          autoFocus
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className="h-10 w-full rounded-md border border-border bg-surface px-3 text-base outline-none focus:border-accent/60 focus:ring-2 focus:ring-accent/20 md:h-9 md:text-sm"
+        />
+        <div className="mt-4 flex justify-end gap-2">
+          <Button variant="ghost" onClick={onClose}>
+            取消
+          </Button>
+          <Button type="submit" variant="primary">
+            保存
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+
+/** Session ID, working directory and transcript path, each copyable. */
+function SessionFileDialog({ pid, sid, onClose }: { pid: string; sid: string; onClose: () => void }) {
+  const info = useQuery({
+    queryKey: ["session-info", pid, sid],
+    queryFn: () => api<SessionFileInfo>(`/api/projects/${pid}/sessions/${sid}/info`),
+    staleTime: 0,
+  });
+  return (
+    <Modal title="会话文件" onClose={onClose} testId="session-info-dialog">
+      <dl className="space-y-4 text-sm">
+        <InfoRow label="会话 ID" value={sid} testId="session-info-id" />
+        {info.isPending ? (
+          <p className="text-xs text-muted">正在读取会话文件…</p>
+        ) : info.error ? (
+          <p role="alert" className="text-xs text-danger">读取失败：{info.error instanceof Error ? info.error.message : String(info.error)}</p>
+        ) : (
+          <>
+            <InfoRow label="工作目录" value={info.data.cwd} testId="session-info-cwd" />
+            <InfoRow label="会话文件" value={info.data.file} empty="还没有写入磁盘。发送第一条消息后，CLI 会创建这个文件。" testId="session-info-file" />
+          </>
+        )}
+      </dl>
+      <p className="mt-5 text-xs leading-relaxed text-muted">会话文件是 JSONL 格式，每行一条消息，可以用文本编辑器直接查看或备份。</p>
+    </Modal>
+  );
+}
+
+function InfoRow({ label, value, empty, testId }: { label: string; value: string | null; empty?: string; testId: string }) {
+  return (
+    <div>
+      <dt className="mb-1 text-xs text-muted">{label}</dt>
+      {value ? (
+        <dd className="flex items-start gap-2">
+          <code className="min-w-0 flex-1 break-all rounded-md bg-surface-2 px-2 py-1.5 font-mono text-xs" data-testid={testId}>{value}</code>
+          <CopyButton text={value} label={`复制${label}`} className="shrink-0" />
+        </dd>
+      ) : (
+        <dd className="text-xs text-muted" data-testid={testId}>{empty}</dd>
+      )}
+    </div>
+  );
+}
+
+/** "Forked from …" link back to the origin session. */
+export function Lineage({ pid, meta, sessions }: { pid: string; meta?: SessionListItem; sessions?: SessionListItem[] }) {
+  if (!meta?.forkedFrom) return null;
+  const origin = sessions?.find((s) => s.id === meta.forkedFrom);
+  return (
+    <Link to={`/p/${pid}/s/${meta.forkedFrom}`} className="truncate text-xs text-muted hover:text-accent" data-testid="lineage">
+      ⑂ 分支自：{origin?.title || meta.forkedFrom.slice(0, 8)}
+    </Link>
+  );
+}
+
+/** Actions under a user message: fork from before it, or rewind to it. */
+export function UserMessageActions({ pid, sid, uuid }: { pid: string; sid: string; uuid: string }) {
+  const navigate = useNavigate();
+  const invalidate = useInvalidateSessions(pid);
+  const [rewinding, setRewinding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  async function fork() {
+    try {
+      const { id } = await api<{ id: string }>(`/api/projects/${pid}/sessions/${sid}/fork`, { method: "POST", json: { beforeUuid: uuid } });
+      invalidate();
+      navigate(`/p/${pid}/s/${id}`);
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "fork 失败");
+    }
+  }
+  return (
+    <div className="flex justify-end">
+      <Menu label="消息操作" testId="message-menu">
+        <MenuItem onClick={fork}>从这条消息之前 fork</MenuItem>
+        <MenuItem onClick={() => setRewinding(true)}>回退到这里…</MenuItem>
+      </Menu>
+      {error && <span className="text-xs text-danger">{error}</span>}
+      {rewinding && <RewindDialog pid={pid} sid={sid} uuid={uuid} onClose={() => setRewinding(false)} />}
+    </div>
+  );
+}
+
+const MODES: { value: RewindMode; title: string; detail: string }[] = [
+  {
+    value: "conversation",
+    title: "只回退对话",
+    detail: "这条消息和它之后的对话从当前会话移除，消息内容放回输入框，可以修改后重新发送。项目文件不变。原来的对话仍保存在会话文件里，可以 fork 找回。",
+  },
+  {
+    value: "code",
+    title: "只回退代码",
+    detail: "把 Claude 从这条消息起用 Edit/Write 改过的文件恢复到发送前的状态。对话不变。用 Bash 命令改动的文件不会恢复。",
+  },
+  { value: "both", title: "对话和代码都回退", detail: "先恢复文件，再回退对话。" },
+];
+
+function RewindDialog({ pid, sid, uuid, onClose }: { pid: string; sid: string; uuid: string; onClose: () => void }) {
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const [mode, setMode] = useState<RewindMode>("conversation");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const preview = useQuery({
+    queryKey: ["rewind-preview", sid, uuid],
+    queryFn: () => api<{ files?: FilesPreview }>(`/api/projects/${pid}/sessions/${sid}/rewind`, { method: "POST", json: { userUuid: uuid, mode: "code", dryRun: true } }),
+    enabled: mode !== "conversation",
+    staleTime: 0,
+  });
+  const files = preview.data?.files;
+
+  async function confirm() {
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await api<{ text: string; rewindId?: string; files?: FilesPreview; newSessionId?: string }>(`/api/projects/${pid}/sessions/${sid}/rewind`, {
+        method: "POST",
+        json: { userUuid: uuid, mode },
+      });
+      if (r.files && !r.files.canRewind) throw new ApiError(400, r.files.error || "无法回退代码");
+      qc.invalidateQueries({ queryKey: ["sessions", pid] });
+      if (mode !== "code") {
+        const target = r.newSessionId ?? sid;
+        setDraft(target, r.text, r.rewindId);
+        if (r.newSessionId) navigate(`/p/${pid}/s/${r.newSessionId}`);
+      }
+      onClose();
+    } catch (e) {
+      setError(e instanceof ApiError ? e.message : "回退失败");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal title="回退到这条消息" onClose={onClose} testId="rewind-dialog">
+      <RadioCards label="回退方式" value={mode} onChange={setMode} options={MODES.map((m) => ({ value: m.value, title: m.title, detail: m.detail }))} />
+      {mode !== "conversation" && (
+        <div className="mt-3 rounded-lg bg-surface-2 px-3 py-2 text-xs" data-testid="rewind-preview">
+          {preview.isPending
+            ? "正在计算会恢复哪些文件…"
+            : files?.canRewind
+              ? files.filesChanged?.length
+                ? `将恢复 ${files.filesChanged.length} 个文件（+${files.insertions ?? 0} −${files.deletions ?? 0}）：${files.filesChanged.join("、")}`
+                : "没有需要恢复的文件。"
+              : `无法回退代码：${files?.error ?? "没有检查点"}`}
+        </div>
+      )}
+      {error && <p className="mt-3 text-sm text-danger">{error}</p>}
+      <div className="mt-5 flex justify-end gap-2">
+        <Button variant="ghost" onClick={onClose}>
+          取消
+        </Button>
+        <Button variant="primary" loading={busy} onClick={confirm}>
+          回退
+        </Button>
+      </div>
+    </Modal>
+  );
+}