@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/CopyButton.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { copyText } from "../clipboard.ts";
+import { Button } from "../ui/Button.tsx";
+import { AlertIcon, CheckIcon, CopyIcon } from "../ui/icons.tsx";
+
+export function CopyButton({ text, label, className }: { text: string; label: string; className?: string }) {
+  const [copied, setCopied] = useState<string>();
+  const [error, setError] = useState<string>();
+  useEffect(() => {
+    if (copied === undefined) return;
+    const timer = setTimeout(() => setCopied(undefined), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const done = copied === text;
+  return <Button variant="ghost" size="sm" iconOnly className={`${className ?? ""} ${done ? "bg-ok/10! text-ok! ring-1 ring-ok/25" : ""}`} data-copied={done || undefined} aria-label={label} title={error ?? (done ? "已复制" : label)} onClick={async () => {
+    setError(undefined);
+    try { await copyText(text); setCopied(text); }
+    catch (error) { setError(error instanceof Error ? error.message : "复制失败"); }
+  }}>
+    {error ? <AlertIcon className="text-danger" /> : done ? <CheckIcon className="text-ok" /> : <CopyIcon />}
+    <span className="sr-only" role="status">{error ?? (done ? "已复制" : "")}</span>
+  </Button>;
+}

package/web/src/components/DiffView.tsx

@@ -0,0 +1,94 @@
+import { useMemo } from "react";
+
+type Row =
+  | { kind: "hunk"; text: string }
+  | { kind: "meta"; text: string }
+  | { kind: "ctx" | "add" | "del"; text: string; old?: number; new?: number };
+
+/** Parse one or more unified diffs (as produced by `git diff`) into display rows. */
+export function parseUnifiedDiff(diff: string): Row[] {
+  const rows: Row[] = [];
+  let oldNo = 0;
+  let newNo = 0;
+  let inHunk = false;
+  const lines = diff.split("\n");
+  if (lines[lines.length - 1] === "") lines.pop();
+  for (const l of lines) {
+    if (l.startsWith("diff --git ")) {
+      inHunk = false;
+      continue;
+    }
+    const h = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@(.*)$/.exec(l);
+    if (h) {
+      oldNo = Number(h[1]);
+      newNo = Number(h[2]);
+      inHunk = true;
+      rows.push({ kind: "hunk", text: l });
+      continue;
+    }
+    if (!inHunk) {
+      // File header: only keep the human-relevant bits.
+      if (/^(Binary files|new file mode|deleted file mode|old mode|new mode|similarity|rename )/.test(l)) rows.push({ kind: "meta", text: l });
+      continue;
+    }
+    if (l.startsWith("+")) rows.push({ kind: "add", text: l.slice(1), new: newNo++ });
+    else if (l.startsWith("-")) rows.push({ kind: "del", text: l.slice(1), old: oldNo++ });
+    else if (l.startsWith("\\")) rows.push({ kind: "meta", text: l });
+    else rows.push({ kind: "ctx", text: l.slice(1), old: oldNo++, new: newNo++ });
+  }
+  return rows;
+}
+
+const ROW_CLASS: Record<Row["kind"], string> = {
+  add: "bg-ok/15",
+  del: "bg-danger/15",
+  ctx: "",
+  hunk: "bg-accent/5 text-muted border-y border-border",
+  meta: "text-muted italic",
+};
+const SIGN: Record<Row["kind"], string> = { add: "+", del: "-", ctx: " ", hunk: "", meta: "" };
+
+/** Added / removed line counts of a unified diff. */
+export function diffStats(diff: string) {
+  let add = 0;
+  let del = 0;
+  for (const r of parseUnifiedDiff(diff)) {
+    if (r.kind === "add") add++;
+    else if (r.kind === "del") del++;
+  }
+  return { add, del };
+}
+
+export function DiffView({ diff }: { diff: string }) {
+  const rows = useMemo(() => parseUnifiedDiff(diff), [diff]);
+  if (rows.length === 0)
+    return (
+      <p className="m-4 rounded-xl border border-dashed border-border px-6 py-8 text-center text-sm text-muted">
+        没有可显示的差异。文件可能只改了权限，或者改动已经还原。
+      </p>
+    );
+  return (
+    <div className="overflow-x-auto" data-testid="diff-view">
+      <table className="diff-table min-w-full border-collapse font-mono text-[12.5px] leading-5">
+        <tbody>
+          {rows.map((r, i) =>
+            r.kind === "hunk" || r.kind === "meta" ? (
+              <tr key={i} className={ROW_CLASS[r.kind]}>
+                <td colSpan={4} className="whitespace-pre px-3 py-1">
+                  {r.text}
+                </td>
+              </tr>
+            ) : (
+              <tr key={i} className={ROW_CLASS[r.kind]} data-kind={r.kind}>
+                <td className="diff-ln">{r.old ?? ""}</td>
+                <td className="diff-ln">{r.new ?? ""}</td>
+                <td className={`w-4 select-none pl-1 text-center ${r.kind === "add" ? "text-ok" : r.kind === "del" ? "text-danger" : "text-muted"}`}>{SIGN[r.kind]}</td>
+                <td className="whitespace-pre pr-4">{r.text}</td>
+              </tr>
+            ),
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/web/src/components/DirectoryPicker.tsx

@@ -0,0 +1,230 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { DirectoryListing } from "@shared/directories.ts";
+import { api, ApiError } from "../api.ts";
+import { Button } from "../ui/Button.tsx";
+import { monoInputCls, inputCls } from "../ui/Form.tsx";
+import { FileIcon, FolderIcon } from "../ui/icons.tsx";
+import { Switch } from "../ui/Controls.tsx";
+import { ChevronIcon } from "./icons.tsx";
+import { Modal } from "./Modal.tsx";
+
+export function DirectoryPicker({ initialPath, onSelect, onClose }: { initialPath?: string; onSelect: (path: string) => void | Promise<void>; onClose: () => void }) {
+  const qc = useQueryClient();
+  const [directory, setDirectory] = useState(initialPath ?? "");
+  const [completion, setCompletion] = useState(false);
+  const [address, setAddress] = useState(initialPath ?? "");
+  const [filter, setFilter] = useState("");
+  const [hidden, setHidden] = useState(false);
+  const [navigation, setNavigation] = useState<string | null>(initialPath ?? "");
+  const [newFolder, setNewFolder] = useState<{ parent: string; hidden: boolean } | null>(null);
+  const [folderName, setFolderName] = useState("");
+  const addressRef = useRef<HTMLInputElement>(null);
+  const newFolderButtonRef = useRef<HTMLButtonElement>(null);
+  const hadNewFolder = useRef(false);
+  const listing = useQuery({
+    queryKey: ["directory-picker", directory, hidden, completion],
+    queryFn: ({ signal }) => api<DirectoryListing>(`/api/directories?path=${encodeURIComponent(directory)}&hidden=${hidden ? "1" : "0"}${completion ? "&complete=1" : ""}`, { signal }),
+    placeholderData: (previous) => previous,
+    staleTime: 0,
+    retry: false,
+  });
+  const confirm = useMutation({
+    mutationFn: async ({ path, create }: { path: string; create: boolean }) => {
+      let selected = path;
+      if (create) {
+        const created = await api<DirectoryListing>(`/api/directories?hidden=${hidden ? "1" : "0"}`, { method: "POST", json: { path } });
+        qc.setQueryData(["directory-picker", created.path, hidden, false], created);
+        setCompletion(false);
+        setNavigation(null);
+        setAddress(created.path);
+        setDirectory(created.path);
+        selected = created.path;
+      }
+      await onSelect(selected);
+    },
+  });
+  const createFolder = useMutation({
+    mutationFn: async ({ parent, name, hidden: showHidden }: { parent: string; name: string; hidden: boolean }) => {
+      const path = `${parent.replace(/\/$/, "")}/${name}`;
+      return api<DirectoryListing>(`/api/directories?hidden=${showHidden ? "1" : "0"}`, { method: "POST", json: { path } });
+    },
+    onSuccess: (created, { parent, hidden: showHidden }) => {
+      // Invalidate canonical and typed aliases of the parent, including hidden views.
+      void qc.invalidateQueries({
+        queryKey: ["directory-picker"],
+        predicate: (query) => query.queryKey[1] === parent || (query.state.data as DirectoryListing | undefined)?.path === parent,
+      });
+      qc.setQueryData(["directory-picker", created.path, showHidden, false], created);
+      setNewFolder(null);
+      navigate(created.path);
+    },
+  });
+  const busy = confirm.isPending || createFolder.isPending;
+  const blocked = busy || newFolder !== null;
+  const current = listing.data;
+  const ready = !!current && !listing.isFetching && !listing.isError && !listing.isPlaceholderData;
+  const entries = current?.entries.filter((entry) => entry.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) ?? [];
+  const canCreate = !!directory && address === directory && (ready && current.requestedType === "missing"
+    || listing.error instanceof ApiError && listing.error.status === 404);
+  const selectedPath = listing.isError ? directory : current?.requestedPath ?? current?.path ?? directory;
+  const isFile = current?.requestedType === "file";
+  const checking = address !== directory && (completion || address !== current?.path);
+  const folderNameError = !folderName ? "请填写文件夹名称" : folderName === "." || folderName === ".." || /[/\\\0]/.test(folderName) ? "名称不能包含 /、\\ 或空字符，也不能是 . 或 .." : null;
+
+  useEffect(() => {
+    // Only explicit navigation may replace the address with its canonical path.
+    // Typing clears navigation, so a late response cannot change the text/caret.
+    if (current && !listing.isError && !listing.isFetching && !listing.isPlaceholderData && navigation === directory) {
+      if (completion) {
+        setNavigation(null);
+        // Completion lists siblings even for an existing directory. Only an
+        // explicit Enter/Go follows the resolved target into its own listing.
+        if (current.requestedType === "dir") {
+          const target = current.requestedPath ?? directory;
+          setCompletion(false);
+          setNavigation(target);
+          setAddress(target);
+          setDirectory(target);
+        }
+        return;
+      }
+      setAddress(current.path);
+      setNavigation(null);
+    }
+  }, [current, directory, navigation, completion, listing.isError, listing.isFetching, listing.isPlaceholderData]);
+  useEffect(() => {
+    if (address === directory || !completion && address === current?.path || blocked) return;
+    const timer = setTimeout(() => { setCompletion(true); setDirectory(address); setFilter(""); }, 250);
+    return () => clearTimeout(timer);
+  }, [address, directory, current?.path, blocked, completion]);
+  useEffect(() => {
+    if (!newFolder && hadNewFolder.current) newFolderButtonRef.current?.focus();
+    hadNewFolder.current = newFolder !== null;
+  }, [newFolder]);
+  useEffect(() => {
+    const previous = document.activeElement;
+    if (window.matchMedia("(pointer: fine)").matches) addressRef.current?.focus();
+    return () => { if (previous instanceof HTMLElement && previous.isConnected) previous.focus(); };
+  }, []);
+
+  function navigate(path: string, complete = false) {
+    confirm.reset();
+    setCompletion(complete);
+    setNavigation(path);
+    setAddress(path);
+    setDirectory(path);
+    setFilter("");
+    if (path === directory) void listing.refetch();
+  }
+
+  function enter(path: string, complete = false) {
+    if (!blocked) navigate(path, complete);
+  }
+
+  function openNewFolder() {
+    if (blocked || !ready || checking) return;
+    confirm.reset();
+    createFolder.reset();
+    setFolderName("");
+    // Capture the successful canonical listing before opening the nested dialog.
+    setNewFolder({ parent: current.path, hidden });
+  }
+
+  function closeNewFolder() {
+    if (!createFolder.isPending) setNewFolder(null);
+  }
+
+  return createPortal(
+    <>
+      <div inert={newFolder !== null}>
+        <Modal title="添加项目" onClose={() => { if (!blocked) onClose(); }} testId="directory-picker" scrollBody={false}>
+          <div className="directory-picker-body flex min-h-0 flex-1 flex-col gap-3">
+            <p className="shrink-0 text-xs text-muted">浏览服务所在机器上的文件夹。</p>
+            <div className="flex shrink-0 gap-2">
+              <input
+                ref={addressRef}
+                aria-label="浏览目录路径"
+                className={monoInputCls}
+                value={address}
+                disabled={blocked}
+                placeholder="绝对路径或 ~/"
+                onChange={(e) => { setNavigation(null); setAddress(e.target.value); confirm.reset(); }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") { e.preventDefault(); e.stopPropagation(); enter(address, true); }
+                }}
+              />
+              <Button disabled={blocked} onClick={() => enter(address, true)}>前往</Button>
+            </div>
+            <div className="flex shrink-0 flex-wrap items-center gap-2">
+              <Button size="sm" disabled={blocked || !ready || !current?.parent} onClick={() => current?.parent && enter(current.parent)}>↑ 上级</Button>
+              <Button size="sm" disabled={blocked} onClick={() => enter("")}>主目录</Button>
+              <Button ref={newFolderButtonRef} size="sm" disabled={blocked || !ready || checking} onClick={openNewFolder}>新建文件夹</Button>
+              <Switch label="隐藏目录" checked={hidden} onChange={(next) => { if (!blocked) setHidden(next); }} />
+            </div>
+            <input aria-label="筛选文件夹" disabled={blocked} className={`${inputCls} shrink-0`} placeholder="筛选文件夹…" value={filter} onChange={(e) => setFilter(e.target.value)} />
+            {current && <p className="shrink-0 break-all text-xs text-muted">浏览：{current.path}{current.prefix ? ` · 前缀：${current.prefix}` : ""}</p>}
+            {canCreate && <p role="status" className="shrink-0 text-xs text-muted">路径尚不存在。可选择下方候选目录，或确定创建输入的目录。</p>}
+            {isFile && ready && <p role="status" className="shrink-0 text-xs text-muted">这是文件，请选择文件夹作为项目目录。</p>}
+            <div className="directory-picker-list h-[min(40dvh,20rem)] min-h-0 flex-auto overflow-y-auto overscroll-contain rounded-lg border border-border bg-surface" aria-label="文件夹列表" aria-busy={listing.isFetching || checking}>
+              {(listing.isFetching || checking) && <p className="px-4 py-2 text-xs text-muted" role="status">正在查找目录…</p>}
+              {!current && (listing.isFetching || checking) ? (
+                <p className="px-4 py-8 text-center text-sm text-muted" role="status">正在读取目录…</p>
+              ) : listing.isError ? (
+                <div className="space-y-2 px-4 py-6 text-center">
+                  <p role={canCreate ? "status" : "alert"} className={`text-sm ${canCreate ? "text-muted" : "text-danger"}`}>{canCreate ? "目录不存在，确定后将创建并添加项目。" : listing.error.message}</p>
+                  {canCreate && <>
+                    <p className="break-all font-mono text-xs text-muted">{directory}</p>
+                  </>}
+                  {!canCreate && <Button size="sm" disabled={blocked} onClick={() => { confirm.reset(); void listing.refetch(); }}>重试</Button>}
+                </div>
+              ) : entries.length === 0 ? (
+                <p className="px-4 py-8 text-center text-sm text-muted">{filter ? "没有匹配的文件夹" : "没有子文件夹，可直接确定添加"}</p>
+              ) : (
+                <ul>
+                  {entries.map((entry) => (
+                    <li key={entry.path}>
+                      <button type="button" disabled={blocked || checking || listing.isFetching || entry.type === "file"} onClick={() => enter(entry.path)} className="flex w-full items-center gap-2.5 px-4 py-3 text-left text-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:bg-surface-2 disabled:opacity-50 sm:py-2">
+                        {entry.type === "file" ? <FileIcon className="shrink-0 text-muted" /> : <FolderIcon className="shrink-0 text-muted" />}
+                        <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+                        {entry.type === "file" ? <span className="text-xs text-muted">文件</span> : <ChevronIcon />}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+            {current?.truncated && <p className="shrink-0 text-xs text-muted">目录较多，仅显示前 5000 项。可在上方输入路径直接进入。</p>}
+            {confirm.error && <p role="alert" className="shrink-0 break-words text-sm text-danger">{confirm.error.message}</p>}
+            <div className="flex shrink-0 items-center gap-2 border-t border-border pt-3">
+              <Button variant="ghost" disabled={blocked} onClick={onClose}>取消</Button>
+              <Button variant="primary" className="ml-auto" loading={confirm.isPending} disabled={blocked || checking || listing.isFetching || isFile || (!canCreate && !ready)} onClick={() => confirm.mutate({ path: selectedPath, create: canCreate })}>{canCreate ? "确定并创建目录" : "确定"}</Button>
+            </div>
+          </div>
+        </Modal>
+      </div>
+      {newFolder && (
+        <Modal title="新建文件夹" onClose={closeNewFolder} testId="directory-create-dialog">
+          <form className="flex flex-col gap-3" onSubmit={(event) => {
+            event.preventDefault();
+            if (!folderNameError && !createFolder.isPending) createFolder.mutate({ parent: newFolder.parent, name: folderName, hidden: newFolder.hidden });
+          }}>
+            <p className="break-all text-xs text-muted">创建位置：{newFolder.parent}</p>
+            <label className="flex flex-col gap-1.5 text-sm">
+              文件夹名称
+              <input autoFocus aria-label="文件夹名称" className={inputCls} value={folderName} disabled={createFolder.isPending} aria-invalid={!!folderName && !!folderNameError} onChange={(event) => { setFolderName(event.target.value); createFolder.reset(); }} />
+            </label>
+            {folderName && folderNameError && <p role="alert" className="text-sm text-danger">{folderNameError}</p>}
+            {createFolder.error && <p role="alert" className="break-words text-sm text-danger">{createFolder.error.message}</p>}
+            <div className="flex items-center gap-2 border-t border-border pt-3">
+              <Button variant="ghost" disabled={createFolder.isPending} onClick={closeNewFolder}>取消</Button>
+              <Button type="submit" variant="primary" className="ml-auto" loading={createFolder.isPending} disabled={!!folderNameError}>确定</Button>
+            </div>
+          </form>
+        </Modal>
+      )}
+    </>,
+    document.body,
+  );
+}

package/web/src/components/FileCopyMenu.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from "react";
+import type { FileContent } from "@shared/files.ts";
+import { api } from "../api.ts";
+import { copyText } from "../clipboard.ts";
+import { Button, Spinner } from "../ui/Button.tsx";
+import { MenuItem } from "../ui/Controls.tsx";
+import { MenuPopover } from "../ui/MenuPopover.tsx";
+import { AlertIcon, CheckIcon, ChevronDownIcon, CopyIcon } from "../ui/icons.tsx";
+import { fileApi } from "./ProjectNav.tsx";
+
+export function FileCopyMenu({ pid, path, root, file }: { pid: string; path: string; root?: string; file?: FileContent }) {
+  const request = useRef<AbortController | null>(null);
+  const [selected, setSelected] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string>();
+  useEffect(() => () => request.current?.abort(), []);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const absolute = root ? `${root.replace(/[\\/]+$/, "")}/${path}` : undefined;
+  const canCopyFile = file?.content !== undefined && !file.binary;
+  const copy = async (kind: "absolute" | "relative" | "file" | "selection") => {
+    request.current?.abort();
+    const controller = new AbortController();
+    request.current = controller;
+    setBusy(true); setCopied(false); setError(undefined);
+    try {
+      let text = kind === "absolute" ? absolute : kind === "relative" ? path : kind === "selection" ? selected : file?.content;
+      if (kind === "file" && file?.truncated) {
+        const full = await api<FileContent>(fileApi(pid, "file", { path, full: "1" }), { signal: controller.signal });
+        if (full.binary || full.truncated || full.content === undefined) throw new Error("无法复制这个文件的全文。");
+        text = full.content;
+      }
+      if (controller.signal.aborted) return;
+      if (text === undefined) throw new Error("没有可复制的内容。");
+      await copyText(text);
+      if (!controller.signal.aborted) setCopied(true);
+    } catch (error) {
+      if (!controller.signal.aborted) setError(error instanceof Error ? error.message : "复制失败");
+    } finally { if (!controller.signal.aborted) setBusy(false); }
+  };
+  return <>
+    <MenuPopover label="文件复制选项" beforeOpen={() => setSelected(window.getSelection()?.toString() ?? "")} width={240} testId="file-copy-menu"
+      trigger={(props) => <Button {...props} variant="ghost" size="sm" aria-busy={busy} icon={busy ? <Spinner /> : error ? <AlertIcon className="text-danger" /> : copied ? <CheckIcon className="text-ok" /> : <CopyIcon />} title={error}>
+        {busy ? "复制中…" : error ? "复制失败" : copied ? "已复制" : "复制"}<ChevronDownIcon size={12} />
+      </Button>}>
+      {error && <p className="px-3 py-2 text-xs text-danger">{error}</p>}
+      <MenuItem disabled={!absolute} onClick={() => void copy("absolute")}>复制完整路径</MenuItem>
+      <MenuItem onClick={() => void copy("relative")}>复制相对路径</MenuItem>
+      <MenuItem disabled={!canCopyFile} onClick={() => void copy("file")}>复制全文</MenuItem>
+      <MenuItem disabled={!selected} onClick={() => void copy("selection")} hint={!selected ? "请先选择文字" : undefined}>复制页面选中文本</MenuItem>
+    </MenuPopover>
+    {error && <span className="sr-only" role="alert">{error}</span>}
+  </>;
+}

package/web/src/components/FileEntryActions.tsx

@@ -0,0 +1,95 @@
+import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { MAX_UPLOAD_BYTES, MAX_UPLOAD_FILES, type UploadResult } from "@shared/files.ts";
+import { ApiError, authFetch } from "../api.ts";
+import { copyText } from "../clipboard.ts";
+import { useProjects } from "../hooks.ts";
+import { Button } from "../ui/Button.tsx";
+import { MenuItem, MenuSeparator } from "../ui/Controls.tsx";
+import { MenuPopover } from "../ui/MenuPopover.tsx";
+import { AlertIcon, CheckIcon, CopyIcon, DownloadIcon, MoreIcon, UploadIcon } from "../ui/icons.tsx";
+import { useConfirm } from "./Confirmation.tsx";
+import { fileApi } from "./ProjectNav.tsx";
+import { refreshProjectImages } from "../project-images.ts";
+
+const UploadContext = createContext<{ choose: (directory: string) => void; busy: boolean; root?: string } | null>(null);
+
+export function FileUploadProvider({ pid, children }: { pid: string; children: ReactNode }) {
+  const input = useRef<HTMLInputElement>(null), directory = useRef("");
+  const confirm = useConfirm(), qc = useQueryClient();
+  const project = useProjects().data?.find((item) => item.id === pid);
+  const [notice, setNotice] = useState("");
+  const upload = useMutation({ mutationFn: async ({ selected, target }: { selected: File[]; target: string }) => {
+    if (selected.length > MAX_UPLOAD_FILES || selected.reduce((bytes, file) => bytes + file.size, 0) > MAX_UPLOAD_BYTES) throw new Error("单次最多上传 100 个文件，总大小不超过 50 MiB。");
+    const approved = new Set<string>(), written: string[] = [];
+    let files = selected;
+    while (files.length) {
+      const form = new FormData();
+      files.forEach((file) => form.append("files", file));
+      approved.forEach((name) => form.append("overwrite", name));
+      const response = await authFetch(fileApi(pid, "files/upload", { path: target }), { method: "POST", body: form });
+      const result = await response.json() as UploadResult & { error?: string };
+      if (!response.ok && (response.status !== 409 || !result.conflicts?.length)) throw new ApiError(response.status, result.error ?? "上传失败");
+      written.push(...result.files);
+      const completed = new Set(result.files.map((file) => file.split("/").at(-1)));
+      files = files.filter((file) => !completed.has(file.name));
+      if (!result.conflicts.length) break;
+      if (!(await confirm({ title: "覆盖同名文件？", description: `目标：${project?.path ?? pid}${target ? `/${target}` : ""}\n\n${result.conflicts.join("\n")}`, confirmLabel: "覆盖并上传", danger: true })).confirmed) break;
+      result.conflicts.forEach((name) => approved.add(name));
+    }
+    return written.length;
+  }, onMutate: () => setNotice(""), onSuccess: (count) => setNotice(count ? `已上传 ${count} 个文件` : "已取消上传"),
+  onSettled: () => {
+    refreshProjectImages(pid);
+    for (const key of ["files", "file", "search-files", "search-content", "git-status", "git-diff"]) void qc.invalidateQueries({ queryKey: [key, pid] });
+  } });
+  return <UploadContext.Provider value={{ root: project?.path, busy: upload.isPending, choose: (target) => { directory.current = target; input.current?.click(); } }}>
+    <input ref={input} type="file" multiple hidden aria-label="选择上传文件" disabled={upload.isPending} onChange={(event) => {
+      const files = Array.from(event.currentTarget.files ?? []);
+      event.currentTarget.value = "";
+      if (files.length) upload.mutate({ selected: files, target: directory.current });
+    }} />
+    {children}
+    {(upload.isPending || upload.error || notice) && <div role={upload.error ? "alert" : "status"} className={`shrink-0 border-t border-border px-3 py-2 text-xs ${upload.error ? "text-danger" : "text-muted"}`}>
+      {upload.isPending ? "正在上传…" : upload.error?.message ?? notice}
+    </div>}
+  </UploadContext.Provider>;
+}
+
+export function UploadButton({ directory = "", primary = false }: { directory?: string; primary?: boolean }) {
+  const upload = useContext(UploadContext);
+  return <Button size="sm" variant={primary ? "primary" : "secondary"} icon={<UploadIcon />} disabled={!upload || upload.busy} onClick={() => upload?.choose(directory)}>上传文件</Button>;
+}
+
+export function FileEntryActions({ pid, path, directory }: { pid: string; path: string; directory?: boolean }) {
+  const upload = useContext(UploadContext);
+  const [copied, setCopied] = useState(false), [error, setError] = useState<string>();
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const absolute = upload?.root ? path ? `${upload.root.replace(/[\\/]+$/, "")}/${path}` : upload.root : undefined;
+  const copy = async (text: string) => {
+    setCopied(false); setError(undefined);
+    try { await copyText(text); setCopied(true); }
+    catch (error) { setError(error instanceof Error ? error.message : "复制失败"); }
+  };
+  const name = path.split("/").at(-1) || "项目根目录";
+  return <>
+    <MenuPopover label={`${name} 更多操作`} trigger={(props) => <Button {...props} variant="ghost" size="sm" iconOnly title={error ?? (copied ? "已复制" : `${name} 更多操作`)} data-copied={copied || undefined}>
+      {error ? <AlertIcon className="text-danger" /> : copied ? <CheckIcon className="text-ok" /> : <MoreIcon />}
+    </Button>}>
+      <MenuItem icon={<CopyIcon />} disabled={!absolute} onClick={() => absolute && void copy(absolute)}>复制绝对路径</MenuItem>
+      <MenuItem icon={<CopyIcon />} onClick={() => void copy(path || ".")}>复制相对路径</MenuItem>
+      <MenuSeparator />
+      {directory ? <MenuItem icon={<UploadIcon />} disabled={!upload || upload.busy} onClick={() => upload?.choose(path)}>上传文件</MenuItem>
+      : <MenuItem icon={<DownloadIcon />} onClick={() => {
+        const link = document.createElement("a");
+        link.href = fileApi(pid, "file/download", { path }); link.download = name;
+        document.body.appendChild(link); link.click(); link.remove();
+      }}>下载文件</MenuItem>}
+    </MenuPopover>
+    <span className="sr-only" role={error ? "alert" : "status"}>{error ?? (copied ? "已复制" : "")}</span>
+  </>;
+}

package/web/src/components/ImagePreview.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { useLocation } from "react-router";
+import { Button } from "../ui/Button.tsx";
+import { Modal } from "./Modal.tsx";
+
+type Preview = { id: number; src: string; alt: string; bestEffort?: boolean };
+let preview: Preview | null = null;
+let nextId = 0;
+const listeners = new Set<() => void>();
+const subscribe = (listener: () => void) => { listeners.add(listener); return () => { listeners.delete(listener); }; };
+const getPreview = () => preview;
+
+export function openImagePreview(src: string, alt: string, bestEffort = false) {
+  preview = { id: ++nextId, src, alt, bestEffort };
+  for (const listener of listeners) listener();
+}
+
+function closeImagePreview() {
+  if (!preview) return;
+  preview = null;
+  for (const listener of listeners) listener();
+}
+
+/** Lives outside transcript rows so virtualization cannot close an open image. */
+export function ImagePreview() {
+  const current = useSyncExternalStore(subscribe, getPreview);
+  const { pathname } = useLocation();
+  useEffect(() => {
+    closeImagePreview();
+    return closeImagePreview;
+  }, [pathname]);
+  return current ? createPortal(<PreviewDialog key={current.id} preview={current} />, document.body) : null;
+}
+
+function PreviewDialog({ preview }: { preview: Preview }) {
+  const [original, setOriginal] = useState(false);
+  const toggle = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    const previous = document.activeElement;
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    toggle.current?.focus();
+    return () => {
+      document.body.style.overflow = overflow;
+      if (previous instanceof HTMLElement && previous.isConnected) previous.focus({ preventScroll: true });
+    };
+  }, []);
+
+  return (
+    <Modal title="图片预览" onClose={closeImagePreview} testId="image-preview" scrollBody={false} panelClassName="max-w-6xl!">
+      <div className="mb-3 flex shrink-0 justify-end">
+        <Button ref={toggle} size="sm" onClick={() => setOriginal(!original)} aria-pressed={original}>
+          {original ? "适应屏幕" : "原尺寸"}
+        </Button>
+      </div>
+      <div className="min-h-0 overflow-auto overscroll-contain rounded-lg bg-surface-2/50">
+        <img
+          src={preview.src}
+          alt={preview.alt}
+          onError={preview.bestEffort ? closeImagePreview : undefined}
+          className={`mx-auto block ${original ? "max-w-none" : "max-w-full object-contain"}`}
+          style={original ? undefined : { maxHeight: "calc(100dvh - var(--overlay-top) - var(--overlay-bottom) - 8rem)" }}
+        />
+      </div>
+    </Modal>
+  );
+}