@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/Composer.tsx

@@ -0,0 +1,552 @@
+import { uuid } from "../uuid.ts";
+import { useEffect, useMemo, useRef, useState, type ClipboardEvent, type DragEvent, type KeyboardEvent } from "react";
+import type { CommandInfo, SessionState } from "@shared/protocol.ts";
+import { sendClient } from "../live.ts";
+import { useCommands } from "../hooks.ts";
+import { CloseIcon, ImageIcon, SendIcon, StopIcon } from "./icons.tsx";
+import { RefreshIcon } from "../ui/icons.tsx";
+import { addDraftImages, clearDraft, editDraft, getDraft, useDrafts, type Attached } from "../drafts.ts";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import type { FileMatch } from "@shared/files.ts";
+import { api } from "../api.ts";
+import { useConfirm } from "./Confirmation.tsx";
+import { useClearGoal, useCompactSession } from "../session-confirmations.ts";
+import { consumeAnnotations, formatAnnotatedMessage, snapshotAnnotations, useAnnotations } from "../annotations.ts";
+import { ComposerAnnotations } from "./ComposerAnnotations.tsx";
+
+const isTouch = typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches;
+
+export type ComposerProps = {
+  projectId: string;
+  sessionId: string;
+  state: SessionState;
+  /** A task list was restored, but this CLI process has not confirmed it yet. */
+  cronsStale?: boolean;
+  /** `/btw <question>` — ask a side question in a fork. */
+  onBtw?: (question: string) => Promise<void>;
+  /** `/clear` — start over in a new session. */
+  onClear?: () => Promise<boolean>;
+  /** `/add-dir <path>` — let the session access a directory outside the project. */
+  onAddDir?: (path: string) => Promise<void>;
+};
+
+export function Composer({ projectId, sessionId, state, cronsStale, onBtw, onClear, onAddDir }: ComposerProps) {
+  const confirm = useConfirm();
+  const compact = useCompactSession(projectId, sessionId);
+  const clearGoal = useClearGoal(projectId, sessionId);
+  const submitting = useRef(false);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [initialDraft] = useState(() => getDraft(sessionId));
+  const draft = useDrafts((s) => s.drafts[sessionId]) ?? initialDraft;
+  const hasAnnotations = useAnnotations((s) => s.items.some((item) => item.projectId === projectId && item.targetSessionId === sessionId));
+  const { text, images, processing } = draft;
+  const setText = (text: string) => editDraft(sessionId, { text });
+  const setImages = (fn: (images: Attached[]) => Attached[]) => editDraft(sessionId, { images: fn(getDraft(sessionId).images) });
+  const [error, setError] = useState<string>();
+  const [refreshRequested, setRefreshRequested] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const running = state !== "idle";
+  const commands = useCommands(projectId);
+  const [menuIndex, setMenuIndex] = useState(0);
+  const [menuDismissed, setMenuDismissed] = useState(false);
+  const slashQuery = hasAnnotations ? undefined : /^\/(\S*)$/.exec(text)?.[1];
+  const matches = useMemo(() => (slashQuery === undefined ? [] : filterCommands(commands.data ?? [], slashQuery)), [commands.data, slashQuery]);
+  const menuOpen = slashQuery !== undefined && !menuDismissed && matches.length > 0;
+  useEffect(() => setMenuIndex(0), [slashQuery]);
+
+  // The refresh is one internal turn; if the server never confirms it, let the user try again.
+  useEffect(() => {
+    if (!cronsStale) setRefreshRequested(false);
+  }, [cronsStale]);
+  useEffect(() => {
+    if (!refreshRequested) return;
+    const timer = setTimeout(() => setRefreshRequested(false), 30_000);
+    return () => clearTimeout(timer);
+  }, [refreshRequested]);
+
+  // @file references: complete the word under the caret against project file names.
+  const [caret, setCaret] = useState(0);
+  const mention = /(?:^|\s)@([^\s@]*)$/.exec(text.slice(0, caret));
+  const mentionQuery = mention?.[1];
+  const fileSearch = useQuery({
+    queryKey: ["mention", projectId, mentionQuery],
+    queryFn: () =>
+      api<{ matches: FileMatch[] }>(`/api/projects/${projectId}/search/files?limit=20&q=${encodeURIComponent(mentionQuery ?? "")}`).then((r) => r.matches),
+    enabled: mentionQuery !== undefined,
+    staleTime: 30_000,
+    placeholderData: (prev) => prev,
+  });
+  const fileMatches = mentionQuery !== undefined && !menuDismissed ? (fileSearch.data ?? []) : [];
+  const fileMenuOpen = !menuOpen && fileMatches.length > 0;
+  useEffect(() => setMenuIndex(0), [mentionQuery]);
+
+  function chooseFile(f: FileMatch) {
+    const before = text.slice(0, caret).replace(/@[^\s@]*$/, `@${f.path} `);
+    const next = before + text.slice(caret);
+    setText(next);
+    setMenuDismissed(false);
+    requestAnimationFrame(() => {
+      const el = ref.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(before.length, before.length);
+      setCaret(before.length);
+      autosize(el);
+    });
+  }
+
+  function reset(revision: number) {
+    clearDraft(sessionId, revision);
+    setError(undefined);
+    requestAnimationFrame(() => autosize(ref.current));
+  }
+
+  async function submit() {
+    if (submitting.current) return;
+    submitting.current = true;
+    try { await submitDraft(); }
+    catch (err) { setError(err instanceof Error ? err.message : String(err)); }
+    finally { submitting.current = false; }
+  }
+
+  async function submitDraft() {
+    const submittedDraft = getDraft(sessionId);
+    if (submittedDraft.processing) return;
+    const { text, images, revision } = submittedDraft;
+    const annotations = snapshotAnnotations(projectId, sessionId);
+    const value = text.trim();
+    if (!value && images.length === 0 && annotations.length === 0) return;
+    setError(undefined);
+    const resetSubmitted = () => reset(revision);
+    const sendMessage = () => {
+      sendClient({
+        t: "send",
+        sessionId,
+        projectId,
+        uuid: uuid(),
+        text: annotations.length ? formatAnnotatedMessage(value, annotations) : value,
+        ...(images.length ? { images: images.map(({ mediaType, data }) => ({ mediaType, data })) } : {}),
+      });
+      // sendClient synchronously sends or queues the payload; it has no per-message acknowledgement.
+      // Consume only the submitted revisions so edits made during a send keep their drafts.
+      if (annotations.length) consumeAnnotations(annotations);
+      resetSubmitted();
+    };
+    if (annotations.length) return sendMessage();
+    if (value.startsWith("!") && images.length === 0) {
+      const command = value.slice(1).trim();
+      if (!command) return;
+      sendClient({ t: "bash", sessionId, projectId, uuid: uuid(), command });
+      return resetSubmitted();
+    }
+    const btw = /^\/btw(?:\s+([\s\S]*))?$/.exec(value);
+    if (btw && onBtw) {
+      const question = btw[1]?.trim() ?? "";
+      try {
+        await onBtw(question);
+        resetSubmitted();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+      return;
+    }
+    const addDir = /^\/add-dir(?:\s+([\s\S]*))?$/.exec(value);
+    if (addDir && onAddDir) {
+      const dir = addDir[1]?.trim();
+      if (!dir) return setError("用法：/add-dir 绝对路径");
+      try {
+        await onAddDir(dir);
+        resetSubmitted();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+      return;
+    }
+    // Terminal-menu commands the web handles itself.
+    const cd = /^\/cd\s+(\S[\s\S]*)$/.exec(value);
+    if (cd) {
+      try {
+        const r = await api<{ projectId: string }>(`/api/projects/${projectId}/sessions/${sessionId}/cd`, { method: "POST", json: { path: cd[1]!.trim() } });
+        resetSubmitted();
+        queryClient.invalidateQueries({ queryKey: ["projects"] });
+        navigate(`/p/${r.projectId}/s/${sessionId}`);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+      return;
+    }
+    const feedback = /^\/(?:feedback|bug)(?:\s+([\s\S]*))?$/.exec(value);
+    if (feedback) {
+      const description = feedback[1]?.trim();
+      if (!description) return setError("用法：/feedback 你想反馈的内容（提交前可选择是否附带会话记录）");
+      const answer = await confirm({
+        title: "提交反馈给 Anthropic？",
+        description,
+        confirmLabel: "提交反馈",
+        checkbox: { label: "附带本会话记录（可能包含代码和敏感内容）", defaultChecked: false },
+      });
+      if (!answer.confirmed) return;
+      try {
+        await api(`/api/projects/${projectId}/sessions/${sessionId}/feedback`, { method: "POST", json: { description, attachTranscript: answer.checked } });
+        resetSubmitted();
+        setError("反馈已提交，谢谢。");
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+      return;
+    }
+    if (value === "/release-notes") {
+      window.open("https://code.claude.com/docs/en/changelog", "_blank", "noopener");
+      return resetSubmitted();
+    }
+    if (value === "/clear" && onClear) {
+      try {
+        if (await onClear()) resetSubmitted();
+      } catch (error) {
+        setError(error instanceof Error ? error.message : String(error));
+      }
+      return;
+    }
+    const compactCommand = /^\/compact(?:\s+([\s\S]*))?$/.exec(value);
+    if (compactCommand) {
+      if (await compact(compactCommand[1], images.map(({ mediaType, data }) => ({ mediaType, data })))) resetSubmitted();
+      return;
+    }
+    if (/^\/goal\s+clear$/.test(value)) {
+      if (await clearGoal()) resetSubmitted();
+      return;
+    }
+    sendMessage();
+  }
+
+  function choose(c: CommandInfo) {
+    setText(`/${c.name} `);
+    setMenuDismissed(false);
+    requestAnimationFrame(() => {
+      const el = ref.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(el.value.length, el.value.length);
+      autosize(el);
+    });
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.nativeEvent.isComposing) return;
+    if (fileMenuOpen) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const d = e.key === "ArrowDown" ? 1 : -1;
+        setMenuIndex((i) => (i + d + fileMatches.length) % fileMatches.length);
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        const f = fileMatches[menuIndex];
+        if (f) {
+          e.preventDefault();
+          chooseFile(f);
+          return;
+        }
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setMenuDismissed(true);
+        return;
+      }
+    }
+    if (menuOpen) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const d = e.key === "ArrowDown" ? 1 : -1;
+        setMenuIndex((i) => (i + d + matches.length) % matches.length);
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        const c = matches[menuIndex];
+        // An exact, complete command name sends right away on Enter.
+        if (c && !(e.key === "Enter" && slashQuery === c.name && !c.argumentHint)) {
+          e.preventDefault();
+          choose(c);
+          return;
+        }
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setMenuDismissed(true);
+        return;
+      }
+    }
+    if (e.key === "Enter" && !e.shiftKey && !isTouch) {
+      e.preventDefault();
+      void submit();
+    }
+  }
+
+  async function addFiles(files: Iterable<File>) {
+    const list = [...files].filter((f) => f.type.startsWith("image/"));
+    if (!list.length) return false;
+    try {
+      await addDraftImages(sessionId, list.length, () => Promise.all(list.map(prepareImage)));
+    } catch {
+      setError("图片读取失败");
+    }
+    return true;
+  }
+
+  function onPaste(e: ClipboardEvent<HTMLTextAreaElement>) {
+    const files = [...e.clipboardData.files].filter((f) => f.type.startsWith("image/"));
+    if (files.length) {
+      e.preventDefault();
+      void addFiles(files);
+    }
+  }
+
+  function onDrop(e: DragEvent) {
+    setDragging(false);
+    if (e.dataTransfer.files.length) {
+      e.preventDefault();
+      void addFiles(e.dataTransfer.files);
+    }
+  }
+
+  const bangMode = !hasAnnotations && text.trimStart().startsWith("!");
+
+  return (
+    <div className="relative">
+      {fileMenuOpen && <FileMenu items={fileMatches} active={menuIndex} onHover={setMenuIndex} onChoose={chooseFile} />}
+      {menuOpen && (
+        <CommandMenu
+          items={matches}
+          active={menuIndex}
+          onHover={setMenuIndex}
+          onChoose={choose}
+        />
+      )}
+      <div
+        className={`rounded-2xl border bg-surface shadow-sm focus-within:border-accent/60 ${dragging ? "border-accent" : bangMode ? "border-accent/60" : "border-border"}`}
+        onDragOver={(e) => {
+          if ([...e.dataTransfer.types].includes("Files")) {
+            e.preventDefault();
+            setDragging(true);
+          }
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={onDrop}
+        data-testid="composer"
+        data-session-id={sessionId}
+      >
+        <ComposerAnnotations projectId={projectId} sessionId={sessionId} />
+        {images.length > 0 && (
+          <div className="flex flex-wrap gap-2 px-3 pt-3" data-testid="attachments">
+            {images.map((img) => (
+              <div key={img.id} className="relative">
+                <img src={img.url} alt="待发送的图片" className="size-16 rounded-lg border border-border object-cover" />
+                <button
+                  className="absolute -right-2 -top-2 flex size-6 items-center justify-center rounded-full border border-border bg-surface text-muted shadow-sm hover:text-text"
+                  onClick={() => setImages((cur) => cur.filter((x) => x.id !== img.id))}
+                  aria-label="移除图片"
+                >
+                  <CloseIcon size={12} />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+        <textarea
+          ref={ref}
+          aria-label="消息"
+          rows={1}
+          value={text}
+          placeholder={running ? "继续输入，消息会排进下一轮…" : "给 Claude 发消息（/ 命令，! 执行命令）"}
+          onSelect={(e) => setCaret(e.currentTarget.selectionStart)}
+          onChange={(e) => {
+            setText(e.target.value);
+            setCaret(e.target.selectionStart);
+            setMenuDismissed(false);
+            autosize(e.target);
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          className={`block max-h-[40dvh] w-full resize-none bg-transparent px-4 pt-3 text-base outline-none ${bangMode ? "font-mono" : ""}`}
+        />
+        <div className="flex items-center gap-2 px-2 pb-2">
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/*"
+            multiple
+            hidden
+            data-testid="image-input"
+            onChange={(e) => {
+              if (e.target.files) void addFiles(e.target.files);
+              e.target.value = "";
+            }}
+          />
+          <button
+            onClick={() => fileRef.current?.click()}
+            className="flex size-9 items-center justify-center rounded-full text-muted hover:bg-surface-2 hover:text-text"
+            aria-label="添加图片"
+            title="添加图片"
+          >
+            <ImageIcon />
+          </button>
+          {cronsStale && (
+            <button
+              type="button"
+              onClick={() => {
+                if (refreshRequested) return;
+                setRefreshRequested(true);
+                sendClient({ t: "refreshCrons", sessionId, projectId });
+              }}
+              disabled={running || refreshRequested}
+              className="flex size-9 items-center justify-center rounded-full text-muted hover:bg-surface-2 hover:text-text disabled:opacity-40"
+              aria-label="刷新定时任务"
+              title="重新确认定时任务（会发送一条刷新消息）"
+              data-testid="refresh-crons"
+            >
+              <RefreshIcon size={18} className={refreshRequested ? "animate-spin" : undefined} />
+            </button>
+          )}
+          <span className="min-w-0 flex-1 truncate text-xs text-muted">
+            {error ? <span className="text-danger" role="alert">{error}</span> : processing ? "正在处理图片…" : bangMode ? "在项目目录执行命令，输出会带进对话" : null}
+          </span>
+          {running && (
+            <button
+              onClick={() => sendClient({ t: "interrupt", sessionId })}
+              className="flex size-9 items-center justify-center rounded-full border border-border text-text hover:bg-surface-2"
+              aria-label="中断"
+              title="中断"
+            >
+              <StopIcon />
+            </button>
+          )}
+          <button
+            onClick={() => void submit()}
+            disabled={processing > 0 || (!text.trim() && images.length === 0 && !hasAnnotations)}
+            className="flex size-9 items-center justify-center rounded-full bg-accent text-accent-text disabled:opacity-40"
+            aria-label="发送"
+            title="发送"
+          >
+            <SendIcon />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FileMenu({ items, active, onHover, onChoose }: { items: FileMatch[]; active: number; onHover: (i: number) => void; onChoose: (f: FileMatch) => void }) {
+  return (
+    <div role="listbox" aria-label="文件" className="absolute inset-x-0 bottom-full z-30 mb-2 max-h-[45dvh] overflow-y-auto overscroll-contain rounded-xl border border-border bg-surface py-1 shadow-lg">
+      {items.map((f, i) => (
+        <button
+          key={f.path}
+          role="option"
+          aria-selected={i === active}
+          onMouseDown={(e) => e.preventDefault()}
+          onMouseEnter={() => onHover(i)}
+          onClick={() => onChoose(f)}
+          className={`block w-full truncate px-3 py-2 text-left font-mono text-sm ${i === active ? "bg-surface-2" : ""}`}
+        >
+          @{f.path}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function CommandMenu({ items, active, onHover, onChoose }: { items: CommandInfo[]; active: number; onHover: (i: number) => void; onChoose: (c: CommandInfo) => void }) {
+  const listRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+  return (
+    <div
+      ref={listRef}
+      role="listbox"
+      aria-label="命令"
+      className="absolute inset-x-0 bottom-full z-30 mb-2 max-h-[45dvh] overflow-y-auto overscroll-contain rounded-xl border border-border bg-surface py-1 shadow-lg"
+    >
+      {items.map((c, i) => (
+        <button
+          key={c.name}
+          data-index={i}
+          role="option"
+          aria-selected={i === active}
+          // Keep focus in the textarea so the keyboard stays open on phones.
+          onMouseDown={(e) => e.preventDefault()}
+          onMouseEnter={() => onHover(i)}
+          onClick={() => onChoose(c)}
+          className={`block w-full px-3 py-2 text-left ${i === active ? "bg-surface-2" : ""}`}
+        >
+          <div className="flex min-w-0 items-baseline gap-2">
+            <span className="shrink-0 font-mono text-sm text-text">/{c.name}</span>
+            {c.argumentHint && <span className="min-w-0 truncate font-mono text-xs text-muted">{c.argumentHint}</span>}
+          </div>
+          {c.description && <div className="line-clamp-2 text-xs text-muted">{c.description}</div>}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** Prefix matches on the name first, then substring matches, then description/alias matches. */
+function filterCommands(all: CommandInfo[], q: string): CommandInfo[] {
+  const s = q.toLowerCase();
+  if (!s) return all;
+  const rank = (c: CommandInfo) => {
+    const n = c.name.toLowerCase();
+    if (n.startsWith(s)) return 0;
+    if (c.aliases?.some((a) => a.toLowerCase().startsWith(s))) return 1;
+    if (n.includes(s)) return 2;
+    if (c.description.toLowerCase().includes(s)) return 3;
+    return -1;
+  };
+  return all
+    .map((c) => ({ c, r: rank(c) }))
+    .filter((x) => x.r >= 0)
+    .sort((a, b) => a.r - b.r || a.c.name.length - b.c.name.length)
+    .map((x) => x.c);
+}
+
+const MAX_SIDE = 2000;
+const MAX_BYTES = 3_500_000;
+const API_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+
+/** Read an image as base64; downscale big photos (the API caps images at ~5 MB). */
+async function prepareImage(file: File): Promise<Attached> {
+  const dataUrl = await new Promise<string>((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result));
+    r.onerror = () => reject(r.error);
+    r.readAsDataURL(file);
+  });
+  const img = await new Promise<HTMLImageElement>((resolve, reject) => {
+    const el = new Image();
+    el.onload = () => resolve(el);
+    el.onerror = reject;
+    el.src = dataUrl;
+  });
+  let url = dataUrl;
+  let mediaType = file.type;
+  if (!API_TYPES.has(file.type) || file.size > MAX_BYTES || Math.max(img.naturalWidth, img.naturalHeight) > MAX_SIDE) {
+    const scale = Math.min(1, MAX_SIDE / Math.max(img.naturalWidth, img.naturalHeight));
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(img.naturalWidth * scale);
+    canvas.height = Math.round(img.naturalHeight * scale);
+    canvas.getContext("2d")!.drawImage(img, 0, 0, canvas.width, canvas.height);
+    url = canvas.toDataURL("image/jpeg", 0.85);
+    mediaType = "image/jpeg";
+  }
+  return { id: uuid(), url, mediaType, data: url.slice(url.indexOf(",") + 1) };
+}
+
+function autosize(el: HTMLTextAreaElement | null) {
+  if (!el) return;
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}

package/web/src/components/ComposerAnnotations.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { deleteAnnotation, ensureAnnotationsLoaded, useAnnotations, type DraftAnnotation } from "../annotations.ts";
+import { Button } from "../ui/Button.tsx";
+import { AnnotationEditor, AnnotationSourceLink } from "./AnnotationEditor.tsx";
+
+/** Draft annotations belong to a project and one target session, independently of the text composer. */
+export function ComposerAnnotations({ projectId, sessionId }: { projectId: string; sessionId: string }) {
+  const allItems = useAnnotations((state) => state.items);
+  const storageError = useAnnotations((state) => state.storageError);
+  const items = allItems.filter((item) => item.projectId === projectId && item.targetSessionId === sessionId);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const editing = items.find((item) => item.id === editingId);
+  useEffect(() => { ensureAnnotationsLoaded(); }, []);
+  useEffect(() => { setEditingId(null); }, [projectId, sessionId]);
+
+  if (!items.length && !storageError) return null;
+  return (
+    <div className="mb-2 min-w-0 text-sm" data-testid="composer-annotations" data-annotation-exclude>
+      {storageError && <p role="alert" data-testid="annotation-storage-error" className="mb-2 rounded-md border border-danger/30 bg-danger/5 px-3 py-2 text-xs text-danger">{storageError}</p>}
+      {items.length > 0 && <details className="rounded-lg border border-accent/25 bg-accent/5">
+        <summary className="cursor-pointer select-none px-3 py-2 text-xs font-medium text-accent">批注（{items.length}）<span className="ml-2 font-normal text-muted">随下一条消息发送</span></summary>
+        <ul className="max-h-64 space-y-2 overflow-y-auto border-t border-accent/15 p-2" data-testid="annotation-list">
+          {items.map((item) => <AnnotationItem key={item.id} item={item} onEdit={() => setEditingId(item.id)} />)}
+        </ul>
+      </details>}
+      {editing && <AnnotationEditor projectId={projectId} sessionId={sessionId} source={editing.source} quote={editing.quote} annotation={editing} onClose={() => setEditingId(null)} />}
+    </div>
+  );
+}
+
+function AnnotationItem({ item, onEdit }: { item: DraftAnnotation; onEdit: () => void }) {
+  return <li className="min-w-0 rounded-md border border-border bg-bg px-3 py-2" data-annotation-id={item.id}>
+    <div className="flex min-w-0 items-start gap-2">
+      <div className="min-w-0 flex-1">
+        {item.source.kind === "file" && <div className="mb-1.5 flex min-w-0"><AnnotationSourceLink projectId={item.projectId} source={item.source} /></div>}
+        <blockquote className="max-h-24 overflow-auto whitespace-pre-wrap break-words border-l-2 border-border pl-2 font-mono text-xs text-muted">{item.quote}</blockquote>
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        <Button variant="ghost" size="sm" onClick={onEdit} data-testid="annotation-edit">编辑</Button>
+        <Button variant="ghost" size="sm" onClick={() => deleteAnnotation(item.id)} data-testid="annotation-delete" className="hover:text-danger">删除</Button>
+      </div>
+    </div>
+    <p className="mt-2 whitespace-pre-wrap break-words text-sm">{item.comment}</p>
+  </li>;
+}

package/web/src/components/Confirmation.tsx

@@ -0,0 +1,91 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { Modal } from "./Modal.tsx";
+import { Button } from "../ui/Button.tsx";
+
+type Confirmation = {
+  title: string;
+  description: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  danger?: boolean;
+  checkbox?: { label: string; defaultChecked: boolean };
+};
+type Answer = { confirmed: boolean; checked: boolean };
+type Request = Confirmation & { id: number; resolve: (answer: Answer) => void; returnFocus: HTMLElement | null };
+const Context = createContext<((options: Confirmation) => Promise<Answer>) | null>(null);
+
+/** Keep one confirmation open at a time; a second click cannot queue another action. */
+export function ConfirmationProvider({ children }: { children: ReactNode }) {
+  const [request, setRequest] = useState<Request | null>(null);
+  const pending = useRef<Request | null>(null);
+  const sequence = useRef(0);
+  const confirm = useCallback((options: Confirmation) => {
+    if (pending.current) return Promise.resolve({ confirmed: false, checked: false });
+    return new Promise<Answer>((resolve) => {
+      const request = { ...options, id: ++sequence.current, resolve, returnFocus: document.activeElement instanceof HTMLElement ? document.activeElement : null };
+      pending.current = request;
+      setRequest(request);
+    });
+  }, []);
+  const finish = useCallback((answer: Answer) => {
+    const request = pending.current;
+    if (!request) return;
+    pending.current = null;
+    setRequest(null);
+    request.resolve(answer);
+    requestAnimationFrame(() => request.returnFocus?.isConnected && request.returnFocus.focus());
+  }, []);
+  useEffect(() => () => {
+    pending.current?.resolve({ confirmed: false, checked: false });
+    pending.current = null;
+  }, []);
+
+  return (
+    <Context.Provider value={confirm}>
+      {children}
+      {request && createPortal(<ConfirmationDialog key={request.id} request={request} finish={finish} />, document.body)}
+    </Context.Provider>
+  );
+}
+
+function ConfirmationDialog({ request, finish }: { request: Request; finish: (answer: Answer) => void }) {
+  const [checked, setChecked] = useState(request.checkbox?.defaultChecked ?? false);
+  const root = useRef<HTMLDivElement>(null);
+  const cancel = () => finish({ confirmed: false, checked });
+  useEffect(() => {
+    root.current?.querySelector<HTMLButtonElement>("button")?.focus();
+  }, []);
+  return (
+    <Modal title={request.title} onClose={cancel} testId="confirmation-dialog">
+      <div ref={root} onKeyDown={(event) => {
+        if (event.key !== "Tab") return;
+        const controls = root.current?.querySelectorAll<HTMLElement>("button, input");
+        const first = controls?.[0];
+        const last = controls?.[controls.length - 1];
+        if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
+        if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
+      }}>
+        <div className="whitespace-pre-wrap break-words text-sm leading-relaxed text-muted">{request.description}</div>
+        {request.checkbox && (
+          <label className="mt-4 flex items-center gap-2 text-sm">
+            <input type="checkbox" checked={checked} onChange={(event) => setChecked(event.target.checked)} className="size-4 accent-accent" />
+            {request.checkbox.label}
+          </label>
+        )}
+        <div className="mt-5 flex justify-end gap-2">
+          <Button variant="ghost" onClick={cancel}>{request.cancelLabel ?? "取消"}</Button>
+          <Button variant={request.danger ? "danger" : "primary"} onClick={() => finish({ confirmed: true, checked })}>
+            {request.confirmLabel ?? "确认"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export function useConfirm() {
+  const confirm = useContext(Context);
+  if (!confirm) throw new Error("ConfirmationProvider is missing");
+  return confirm;
+}