@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/components/Automation.tsx

@@ -0,0 +1,390 @@
+import { uuid } from "../uuid.ts";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AgentTask, BgTask, CronInfo, LiveSnapshot } from "@shared/protocol.ts";
+import { isSubagentTaskType } from "@shared/task-types.ts";
+import { api } from "../api.ts";
+import { agentMetadataQuery, backgroundAgentToolUseId, type SubagentInfo } from "../agent-history-flow.ts";
+import { sendClient } from "../live.ts";
+import { Modal } from "./Modal.tsx";
+import { Button } from "../ui/Button.tsx";
+import { Chip, Panel } from "../ui/Controls.tsx";
+import { ClockIcon, TargetIcon, TerminalIcon, ChatIcon, ShieldIcon, HelpIcon, QuestionIcon } from "../ui/icons.tsx";
+import { useConfirm } from "./Confirmation.tsx";
+import { useClearGoal } from "../session-confirmations.ts";
+import { setAnnotationMode, useAnnotations } from "../annotations.ts";
+
+type Goal = { condition: string; status: "active" | "met" | "failed" | "cleared"; reason?: string; iterations?: number } | null;
+
+function send(pid: string, sid: string, text: string) {
+  sendClient({ t: "send", sessionId: sid, projectId: pid, uuid: uuid(), text });
+}
+
+function inTime(ms?: number) {
+  if (!ms) return "";
+  const s = Math.round((ms - Date.now()) / 1000);
+  if (s <= 0) return "即将执行";
+  if (s < 60) return `${s} 秒后`;
+  if (s < 3600) return `${Math.round(s / 60)} 分钟后`;
+  return new Date(ms).toLocaleString();
+}
+
+/** Long-running work of a session: its /goal, scheduled tasks and background commands. */
+export function AutomationBar({ pid, sid, snapshot, turns, historyRevision, resetCount }: {
+  pid: string; sid: string; snapshot: LiveSnapshot; turns: number; historyRevision?: string; resetCount: number;
+}) {
+  const clearGoal = useClearGoal(pid, sid);
+  const annotationMode = useAnnotations((s) => s.mode);
+  const [open, setOpen] = useState<"goal" | "crons" | "tasks" | "guide" | null>(null);
+  const guideButton = useRef<HTMLButtonElement>(null);
+  const goal = useQuery({
+    // Goal state and its editor belong to the selected history branch. A cold
+    // rewind need not change either the run state or the number of live results.
+    queryKey: ["goal", sid, pid, historyRevision, resetCount, turns, snapshot.state],
+    queryFn: ({ signal }) => api<Goal>(`/api/projects/${pid}/sessions/${sid}/goal`, { signal }),
+  });
+  const g = goal.data;
+  const running = snapshot.tasks.filter((t) => t.status === "running");
+  const toggle = (k: typeof open) => setOpen((cur) => (cur === k ? null : k));
+  const close = () => setOpen(null);
+
+  return (
+    <div className="mb-2 text-sm" data-testid="automation-bar">
+      <div className="flex items-start gap-1">
+        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
+          <Chip
+            compactOnMobile
+            shape="rounded"
+            active={open === "goal"}
+            onClick={() => toggle("goal")}
+            testId="goal-chip"
+            tone={g?.status === "active" ? "accent" : g?.status === "met" ? "ok" : "neutral"}
+            icon={<TargetIcon />}
+            onRemove={g?.status === "active" ? () => { void clearGoal(g.condition); } : undefined}
+            removeLabel="清除目标"
+          >
+            {g?.status === "active" ? `目标：${g.condition}` : g?.status === "met" ? "目标已达成" : "目标"}
+          </Chip>
+          <Chip compactOnMobile shape="rounded" checked={annotationMode} onClick={() => setAnnotationMode(!annotationMode)} ariaLabel="批注模式" tone={annotationMode ? "accent" : "neutral"} icon={<ChatIcon />}>批注</Chip>
+          <AskQuestionsSwitch key={`${pid}:${sid}`} pid={pid} sid={sid} enabled={snapshot.askQuestionsEnabled !== false} />
+          <ReadOnlySwitch key={`read-only:${pid}:${sid}`} pid={pid} sid={sid} readOnly={snapshot.writeEnabled === false} />
+          {snapshot.crons.length > 0 && (
+            <Chip compactOnMobile shape="rounded" active={open === "crons"} onClick={() => toggle("crons")} testId="crons-chip" tone="accent" icon={<ClockIcon />}>
+              定时任务 {snapshot.crons.length}
+            </Chip>
+          )}
+          {snapshot.tasks.length > 0 && (
+            <Chip compactOnMobile shape="rounded" active={open === "tasks"} onClick={() => toggle("tasks")} testId="tasks-chip" tone={running.length ? "accent" : "neutral"} icon={<TerminalIcon />}>
+              后台 {running.length}/{snapshot.tasks.length}
+            </Chip>
+          )}
+        </div>
+        <button ref={guideButton} type="button" aria-label="使用引导" title="使用引导" aria-haspopup="dialog" aria-expanded={open === "guide"}
+          onClick={() => toggle("guide")}
+          className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-2 hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40">
+          <HelpIcon size={16} />
+        </button>
+      </div>
+      {open && (
+        <div className="mt-2">
+          {open === "goal" && <GoalPanel key={`${pid}:${sid}:${historyRevision ?? ""}:${resetCount}`} pid={pid} sid={sid} goal={g ?? null} onDone={close} />}
+          {open === "crons" && <CronPanel pid={pid} sid={sid} crons={snapshot.crons} onClose={close} />}
+          {open === "tasks" && <TaskPanel key={`${pid}:${sid}`} pid={pid} sid={sid} tasks={snapshot.tasks} agentTasks={snapshot.agentTasks ?? []} onClose={close} />}
+          {open === "guide" && <ComposerGuide onClose={() => { close(); guideButton.current?.focus(); }} />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ComposerGuide({ onClose }: { onClose: () => void }) {
+  return (
+    <Modal title="会话使用引导" onClose={onClose} testId="composer-guide">
+      <p className="mb-4 text-sm text-muted">批注、提问和只读高亮时表示已开启。</p>
+      <dl className="space-y-4 text-sm leading-relaxed">
+        <div>
+          <dt className="mb-1 flex items-center gap-2 font-medium"><TargetIcon />目标</dt>
+          <dd className="text-muted">写下完成条件，Claude 会持续推进，直到达成。点击目标可以查看、修改或清除。</dd>
+        </div>
+        <div>
+          <dt className="mb-1 flex items-center gap-2 font-medium"><ChatIcon />批注</dt>
+          <dd className="text-muted">开启后，选中消息中的文字即可添加批注。文件源码始终支持批注。批注会保留在输入框上方，可编辑或删除，随下一条消息发送。</dd>
+        </div>
+        <div>
+          <dt className="mb-1 flex items-center gap-2 font-medium"><QuestionIcon />提问</dt>
+          <dd className="text-muted">控制 Claude 是否可以通过提问卡片向你确认信息。关闭后，Claude 会根据已有信息继续，或在回复中说明缺少的信息。</dd>
+        </div>
+        <div>
+          <dt className="mb-1 flex items-center gap-2 font-medium"><ShieldIcon />只读</dt>
+          <dd className="text-muted">开启后只放行已知的只读工具，禁用命令执行、文件写入和无法确认用途的扩展工具。普通会话默认关闭，btw 默认开启；btw 还禁止创建或操作子代理。它与计划模式独立，只影响后续操作，不会停止或撤销已经开始的操作。</dd>
+        </div>
+        <div>
+          <dt className="mb-1 flex items-center gap-2 font-medium"><ClockIcon />定时任务</dt>
+          <dd className="text-muted">有定时任务时会显示入口，分为“本会话”“本项目持久”和“IDECron”三类，可以查看执行时间和任务内容，也可以取消任务。</dd>
+        </div>
+        <div>
+          <dt className="mb-1 flex items-center gap-2 font-medium"><TerminalIcon />后台</dt>
+          <dd className="text-muted">有后台任务时会显示入口，可以查看状态和输出、打开子代理过程，或停止仍在运行的任务。</dd>
+        </div>
+      </dl>
+      <div className="mt-5 flex justify-end"><Button onClick={onClose}>知道了</Button></div>
+    </Modal>
+  );
+}
+
+function AskQuestionsSwitch({ pid, sid, enabled }: { pid: string; sid: string; enabled: boolean }) {
+  const questions = useMutation({ mutationFn: (on: boolean) => api(`/api/projects/${pid}/sessions/${sid}`, { method: "PATCH", json: { askQuestionsEnabled: on } }) });
+  return <>
+    <Chip compactOnMobile shape="rounded" checked={enabled} onClick={() => questions.mutate(!enabled)} ariaLabel="允许提问" disabled={questions.isPending} tone={enabled ? "accent" : "neutral"} icon={<QuestionIcon />}>提问</Chip>
+    {questions.error && <p role="alert" className="basis-full text-xs text-danger">提问设置保存失败：{questions.error.message}</p>}
+  </>;
+}
+
+function ReadOnlySwitch({ pid, sid, readOnly }: { pid: string; sid: string; readOnly: boolean }) {
+  const setting = useMutation({ mutationFn: (on: boolean) => api(`/api/projects/${pid}/sessions/${sid}`, { method: "PATCH", json: { writeEnabled: !on } }) });
+  return <>
+    <Chip compactOnMobile shape="rounded" checked={readOnly} onClick={() => setting.mutate(!readOnly)} ariaLabel="只读" disabled={setting.isPending} tone={readOnly ? "accent" : "neutral"} icon={<ShieldIcon />}>只读</Chip>
+    {setting.error && <p role="alert" className="basis-full text-xs text-danger">只读设置保存失败：{setting.error.message}</p>}
+  </>;
+}
+
+function GoalPanel({ pid, sid, goal, onDone }: { pid: string; sid: string; goal: Goal; onDone: () => void }) {
+  const clearGoal = useClearGoal(pid, sid);
+  const [text, setText] = useState(goal?.status === "active" ? goal.condition : "");
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (!dirty.current) setText(goal?.status === "active" ? goal.condition : "");
+  }, [goal?.condition, goal?.status]);
+  const active = goal?.status === "active";
+  return (
+    <Modal title={active ? "修改目标" : "设定目标"} onClose={onDone} testId="goal-panel" scrollBody={false} panelClassName="goal-dialog sm:max-w-2xl">
+      <p className="mb-3 max-h-28 shrink-0 overflow-y-auto overscroll-contain text-sm leading-relaxed text-muted">
+        {goal?.status === "active" && "Claude 会一直推进，直到这个条件成立；每一轮结束都会检查一次。"}
+        {goal?.status === "met" && <>上一个目标已达成：{goal.condition}</>}
+        {goal?.status === "failed" && <>上一个目标无法达成：{goal.reason ?? goal.condition}</>}
+        {(!goal || goal.status === "cleared") && "写下「完成」的条件。设定后 Claude 会持续工作，直到条件成立。"}
+        {goal?.reason && goal.status === "active" && <span className="mt-1 block">最近一次检查：{goal.reason}</span>}
+      </p>
+      <form
+        className="flex min-h-0 flex-1 flex-col"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (!text.trim()) return;
+          send(pid, sid, `/goal ${text.trim()}`);
+          onDone();
+        }}
+      >
+        <textarea
+          aria-label="目标条件"
+          placeholder="例如：所有测试通过，并且 README 写了使用说明"
+          value={text}
+          rows={12}
+          onChange={(e) => { dirty.current = true; setText(e.target.value); }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && !e.nativeEvent.isComposing) {
+              e.preventDefault();
+              e.currentTarget.form?.requestSubmit();
+            }
+          }}
+          className="block min-h-0 w-full flex-1 resize-none touch-pan-y overflow-y-auto overscroll-contain rounded-md border border-border bg-bg px-3 py-3 text-base leading-relaxed outline-none focus:border-accent/60 focus:ring-2 focus:ring-accent/20"
+        />
+        <div className="mt-3 flex shrink-0 flex-wrap items-center justify-end gap-2">
+          {active && (
+            <Button
+              variant="outline-danger"
+              className="mr-auto"
+              onClick={async () => {
+                if (await clearGoal(goal.condition)) onDone();
+              }}
+            >
+              清除目标
+            </Button>
+          )}
+          <Button variant="ghost" onClick={onDone}>
+            取消
+          </Button>
+          <Button type="submit" variant="primary" disabled={!text.trim()}>
+            {active ? "修改目标" : "设定目标"}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+
+function CronPanel({ pid, sid, crons, onClose }: { pid: string; sid: string; crons: CronInfo[]; onClose: () => void }) {
+  const confirm = useConfirm();
+  const [cancelling, setCancelling] = useState<Set<string>>(new Set());
+  // A cancel request is a model turn; if it fails, let the row become actionable again.
+  useEffect(() => {
+    if (!cancelling.size) return;
+    const timer = setTimeout(() => setCancelling(new Set()), 30_000);
+    return () => clearTimeout(timer);
+  }, [cancelling]);
+  useEffect(() => {
+    setCancelling((cur) => {
+      const next = new Set([...cur].filter((id) => crons.some((c) => c.id === id)));
+      return next.size === cur.size ? cur : next;
+    });
+  }, [crons]);
+  const groups = [
+    { key: "session", label: "本会话", items: crons.filter((c) => !c.durable && !c.server) },
+    { key: "project", label: "本项目持久", items: crons.filter((c) => c.durable) },
+    { key: "idecron", label: "IDECron", items: crons.filter((c) => c.server) },
+  ].filter((g) => g.items.length > 0);
+  const row = (c: CronInfo) => (
+    <li key={c.id} className="flex items-center gap-3 py-2" data-testid="cron-item">
+      <ClockIcon className="shrink-0 text-muted" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate">{c.prompt}</div>
+        <div className="mt-0.5 flex flex-wrap gap-x-2 text-xs text-muted">
+          <span className="font-mono">{c.schedule}</span>
+          <span>{c.recurring ? "循环" : "一次"}</span>
+          {c.server && <span>{c.mode === "next_turn" ? "下一轮" : c.mode === "interrupt" ? "中断后" : "steer"}</span>}
+          {c.nextRun && <span>下次：{inTime(c.nextRun)}</span>}
+        </div>
+      </div>
+      <Button
+        size="sm"
+        variant="outline-danger"
+        loading={cancelling.has(c.id)}
+        onClick={async () => {
+          const scope = c.server
+            ? "这是 claude-ide 服务端的 IDECron 任务。"
+            : c.durable
+              ? "这是项目级持久任务，取消后该项目所有会话都不会再执行它。"
+              : "这是本会话的定时任务。";
+          if (!(await confirm({
+            title: "取消定时任务？",
+            description: `任务：${c.prompt}。计划：${c.schedule}（${c.recurring ? "循环" : "一次"}）。${scope}取消后不再按此计划触发，已经执行的操作不会撤销。`,
+            confirmLabel: "取消任务",
+            cancelLabel: "保留任务",
+            danger: true,
+          })).confirmed) return;
+          setCancelling((s) => new Set(s).add(c.id));
+          if (c.server) {
+            sendClient({ t: "cancelIdecron", sessionId: sid, projectId: pid, id: c.id });
+          } else {
+            // The CLI has no control request for this; Claude removes it with CronDelete.
+            send(pid, sid, `Cancel the scheduled task with id ${c.id} by calling CronDelete. Do nothing else.`);
+          }
+        }}
+      >
+        {cancelling.has(c.id) ? "取消中" : "取消"}
+      </Button>
+    </li>
+  );
+  return (
+    <Panel title={`定时任务 · ${crons.length}`} onClose={onClose} testId="crons-panel">
+      {groups.map((g) => (
+        <section key={g.key} data-testid={`cron-group-${g.key}`} className="mt-2 first:mt-0">
+          <h4 className="mb-1 text-xs font-medium text-muted">{g.label} · {g.items.length}</h4>
+          <ul className="-my-1 divide-y divide-border">{g.items.map(row)}</ul>
+        </section>
+      ))}
+    </Panel>
+  );
+}
+
+function TaskPanel({ pid, sid, tasks, agentTasks, onClose }: { pid: string; sid: string; tasks: BgTask[]; agentTasks: AgentTask[]; onClose: () => void }) {
+  const confirm = useConfirm();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+  const traceRequest = useRef(0);
+  // A lookup finishing after the panel closes must not navigate out of a newer view.
+  useEffect(() => () => { traceRequest.current++; }, [pid, sid]);
+  const [opening, setOpening] = useState<string>();
+  const [viewing, setViewing] = useState<BgTask | null>(null);
+  const [stopping, setStopping] = useState<Set<string>>(new Set());
+  const [error, setError] = useState<string>();
+  const openTrace = async (task: BgTask) => {
+    const request = ++traceRequest.current;
+    setOpening(task.id); setError(undefined);
+    try {
+      let toolUseId = backgroundAgentToolUseId(task, agentTasks);
+      if (!toolUseId) {
+        const agents = await qc.fetchQuery(agentMetadataQuery(pid, sid,
+          () => api<SubagentInfo[]>(`/api/projects/${pid}/sessions/${sid}/subagents`)));
+        toolUseId = backgroundAgentToolUseId(task, agentTasks, agents);
+      }
+      if (request !== traceRequest.current) return;
+      if (!toolUseId) throw new Error("暂未找到这个子 agent 的过程记录，请稍后重试。");
+      onClose();
+      navigate(`/p/${pid}/s/${sid}/agent/${encodeURIComponent(toolUseId)}`);
+    } catch (error) {
+      if (request === traceRequest.current) setError(error instanceof Error ? error.message : String(error));
+    } finally {
+      if (request === traceRequest.current) setOpening(undefined);
+    }
+  };
+  return (
+    <Modal title={`后台任务 · ${tasks.filter((t) => t.status === "running").length} 个运行中`} onClose={onClose} testId="tasks-panel" panelClassName="sm:max-w-3xl">
+      <ul className="-my-1 divide-y divide-border">
+        {tasks.map((t) => (
+          <li key={t.id} className="flex items-center gap-2.5 py-2.5" data-testid="task-item" data-status={t.status}>
+            <span className={`size-2 shrink-0 rounded-full ${t.status === "running" ? "animate-pulse bg-accent" : t.status === "completed" ? "bg-ok" : "bg-muted/50"}`} aria-hidden />
+            <div className="min-w-0 flex-1">
+              <div className="truncate" title={t.description || t.command}>{t.description || t.command}</div>
+              <div className="mt-0.5 text-xs text-muted">
+                {TYPE_ZH[t.type] ?? t.type} · {STATUS_ZH[t.status] ?? t.status}
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center gap-1.5">
+              {isSubagentTaskType(t.type) && <Button size="sm" loading={opening === t.id} onClick={() => void openTrace(t)} data-testid="task-trace">
+                查看过程
+              </Button>}
+              <Button size="sm" onClick={() => setViewing(t)}>
+                输出
+              </Button>
+              {t.status === "running" && (
+                <Button size="sm" variant="outline-danger" loading={stopping.has(t.id)} onClick={async () => {
+                  if (!(await confirm({
+                    title: "停止后台任务？",
+                    description: `任务：${t.description || t.command || t.id}。停止后不会撤销它已经产生的文件改动或其他操作。`,
+                    confirmLabel: "停止任务",
+                    cancelLabel: "继续运行",
+                    danger: true,
+                  })).confirmed) return;
+                  setStopping((ids) => new Set(ids).add(t.id));
+                  setError(undefined);
+                  try {
+                    await api(`/api/projects/${pid}/sessions/${sid}/tasks/${t.id}/stop`, { method: "POST" });
+                  } catch (error) {
+                    setError(error instanceof Error ? error.message : String(error));
+                  } finally {
+                    setStopping((ids) => { const next = new Set(ids); next.delete(t.id); return next; });
+                  }
+                }}>
+                  停止
+                </Button>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+      {error && <p role="alert" className="mt-2 text-xs text-danger">{error}</p>}
+      {viewing && <TaskOutput pid={pid} sid={sid} task={viewing} onClose={() => setViewing(null)} />}
+    </Modal>
+  );
+}
+
+const TYPE_ZH: Record<string, string> = { local_bash: "命令", shell: "命令", local_agent: "子 agent", subagent: "子 agent", monitor: "监控" };
+const STATUS_ZH: Record<string, string> = { running: "运行中", completed: "已完成", failed: "失败", killed: "已停止", stopped: "已停止" };
+
+function TaskOutput({ pid, sid, task, onClose }: { pid: string; sid: string; task: BgTask; onClose: () => void }) {
+  const out = useQuery({
+    queryKey: ["task-output", sid, task.id],
+    queryFn: () => api<{ output: string; truncated?: boolean }>(`/api/projects/${pid}/sessions/${sid}/tasks/${task.id}/output`),
+    refetchInterval: 2000,
+  });
+  return (
+    <Modal title={task.description || task.command || "后台任务"} onClose={onClose} testId="task-output">
+      {task.command && <pre className="mb-2 whitespace-pre-wrap break-all rounded bg-surface-2 px-2 py-1 font-mono text-xs">$ {task.command}</pre>}
+      <pre className="max-h-[60dvh] overflow-auto whitespace-pre-wrap break-words font-mono text-xs" data-testid="task-output-text">
+        {out.data?.truncated && <span className="text-muted">…（只显示最后一部分）{"\n"}</span>}
+        {out.data?.output || (out.isPending ? "加载中…" : "（暂无输出）")}
+      </pre>
+    </Modal>
+  );
+}

package/web/src/components/CodeView.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+/** Largest file we syntax-highlight; bigger ones render as plain text. */
+const MAX_HIGHLIGHT_CHARS = 300_000;
+/** Longer files render (and highlight) their first lines until "show all". */
+const FIRST_LINES = 3000;
+
+const EXT_ALIAS: Record<string, string> = {
+  mjs: "js",
+  cjs: "js",
+  mts: "ts",
+  cts: "ts",
+  htm: "html",
+  h: "c",
+  hpp: "cpp",
+  cc: "cpp",
+  hh: "cpp",
+  conf: "ini",
+  cfg: "ini",
+  env: "dotenv",
+  lock: "json",
+  svg: "xml",
+};
+const NAME_LANG: Record<string, string> = {
+  dockerfile: "docker",
+  makefile: "make",
+  gnumakefile: "make",
+  cmakelists: "cmake",
+  ".gitignore": "text",
+  ".bashrc": "bash",
+  ".zshrc": "zsh",
+};
+
+export function guessLang(path: string): string {
+  const base = path.slice(path.lastIndexOf("/") + 1).toLowerCase();
+  if (NAME_LANG[base]) return NAME_LANG[base]!;
+  const stem = base.replace(/\.txt$/, "");
+  if (NAME_LANG[stem]) return NAME_LANG[stem]!;
+  const dot = base.lastIndexOf(".");
+  if (dot <= 0) return "text";
+  const ext = base.slice(dot + 1);
+  return EXT_ALIAS[ext] ?? ext;
+}
+
+let worker: Worker | undefined;
+let nextId = 0;
+const waiting = new Map<number, (html: string | null) => void>();
+
+/** Highlighted HTML of the code's lines, computed in a worker (see highlight.worker.ts). */
+function highlight(code: string, lang: string): Promise<string | null> {
+  if (!worker) {
+    worker = new Worker(new URL("../highlight.worker.ts", import.meta.url), { type: "module" });
+    worker.onmessage = (e: MessageEvent<{ id: number; html: string | null }>) => {
+      waiting.get(e.data.id)?.(e.data.html);
+      waiting.delete(e.data.id);
+    };
+  }
+  const id = nextId++;
+  return new Promise((resolve) => {
+    waiting.set(id, resolve);
+    worker!.postMessage({ id, code, lang });
+  });
+}
+
+/** Read-only source view with line numbers, lazy highlighting and jump-to-line. */
+export function CodeView({ code, path, line }: { code: string; path: string; line?: number }) {
+  const [html, setHtml] = useState<string | null>(null);
+  const [all, setAll] = useState(false);
+  const codeRef = useRef<HTMLElement>(null);
+  const lang = guessLang(path);
+  const lines = useMemo(() => {
+    const ls = code.split("\n");
+    if (ls.length > 1 && ls[ls.length - 1] === "") ls.pop();
+    return ls;
+  }, [code]);
+  const shownCount = all || lines.length <= FIRST_LINES || (line ?? 0) > FIRST_LINES ? lines.length : FIRST_LINES;
+  const shown = useMemo(() => (shownCount === lines.length ? code : lines.slice(0, shownCount).join("\n")), [code, lines, shownCount]);
+
+  useEffect(() => {
+    setHtml(null);
+    if (lang === "text" || shown.length > MAX_HIGHLIGHT_CHARS) return;
+    let cancelled = false;
+    highlight(shown, lang)
+      .then((h) => !cancelled && setHtml(h))
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [shown, lang]);
+
+  useEffect(() => {
+    const el = codeRef.current;
+    if (!el || !line) return;
+    el.querySelectorAll(".line-target").forEach((n) => n.classList.remove("line-target"));
+    const target = el.children[line - 1] as HTMLElement | undefined;
+    if (!target) return;
+    target.classList.add("line-target");
+    target.scrollIntoView({ block: "center" });
+  }, [line, html, lines]);
+
+  return (
+    <pre className="code-view" data-testid="code-view" data-lang={lang} data-highlighted={html ? "true" : "false"}>
+      {html ? (
+        <code ref={codeRef} dangerouslySetInnerHTML={{ __html: html }} />
+      ) : (
+        <code ref={codeRef}>
+          {lines.slice(0, shownCount).map((l, i) => (
+            <span key={i} className="line">
+              {l}
+            </span>
+          ))}
+        </code>
+      )}
+      {shownCount < lines.length && (
+        <button className="mt-2 text-xs text-accent hover:underline" onClick={() => setAll(true)} data-testid="show-all">
+          显示全部（共 {lines.length} 行）
+        </button>
+      )}
+    </pre>
+  );
+}