@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/pages/WorktreesView.tsx

@@ -0,0 +1,197 @@
+import { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { WorktreeInfo, WorktreeList } from "@shared/project.ts";
+import { api, ApiError } from "../api.ts";
+import { relativeTime } from "../hooks.ts";
+import { Modal } from "../components/Modal.tsx";
+import { ProjectTabs } from "../components/ProjectNav.tsx";
+import { Button } from "../ui/Button.tsx";
+import { EmptyState, Skeleton, Tag, monoInputCls } from "../ui/Form.tsx";
+import { AlertIcon, BranchIcon, ChatIcon, ChevronRightIcon, FolderIcon, PlusSmIcon, RefreshIcon, TrashIcon } from "../ui/icons.tsx";
+
+/**
+ * git worktrees of the project: independent checkouts under `<repo>/.claude/worktrees/<name>`
+ * (branch `worktree-<name>`, as the CLI's `--worktree`) so parallel sessions don't step on each other.
+ */
+export function WorktreesView() {
+  const { pid } = useParams() as { pid: string };
+  const qc = useQueryClient();
+  const navigate = useNavigate();
+  const list = useQuery({ queryKey: ["worktrees", pid], queryFn: () => api<WorktreeList>(`/api/projects/${pid}/worktrees`) });
+  const [name, setName] = useState("");
+  const [removing, setRemoving] = useState<WorktreeInfo>();
+  const invalidate = () => {
+    qc.invalidateQueries({ queryKey: ["worktrees", pid] });
+    qc.invalidateQueries({ queryKey: ["sessions", pid] });
+  };
+  const create = useMutation({
+    mutationFn: () => api<{ worktree: WorktreeInfo; sessionId?: string }>(`/api/projects/${pid}/worktrees`, { method: "POST", json: { name, session: true } }),
+    onSuccess: ({ sessionId }) => {
+      setName("");
+      invalidate();
+      if (sessionId) navigate(`/p/${pid}/s/${sessionId}`);
+    },
+  });
+  const newSession = useMutation({
+    mutationFn: (wt: string) => api<{ id: string }>(`/api/projects/${pid}/worktrees/${encodeURIComponent(wt)}/sessions`, { method: "POST" }),
+    onSuccess: ({ id }) => {
+      invalidate();
+      navigate(`/p/${pid}/s/${id}`);
+    },
+  });
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <ProjectTabs projectId={pid}>
+        <Button variant="ghost" size="sm" icon={<RefreshIcon />} onClick={invalidate} loading={list.isFetching}>
+          刷新
+        </Button>
+      </ProjectTabs>
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-4xl space-y-5 px-4 py-6 md:px-8">
+          {list.isPending ? (
+            <Skeleton rows={4} />
+          ) : list.isError ? (
+            <p className="text-sm text-danger">{(list.error as Error).message}</p>
+          ) : !list.data.isRepo ? (
+            <EmptyState icon={<BranchIcon size={16} />} title="不是 git 仓库" testId="not-git">
+              这个项目不是 git 仓库，不能创建 worktree。在项目目录里运行 <code className="font-mono">git init</code> 并提交一次后再来。
+            </EmptyState>
+          ) : (
+            <>
+              <section className="rounded-xl border border-border bg-surface p-4 shadow-sm md:p-5">
+                <h2 className="text-xl">git worktree</h2>
+                <p className="mt-1 text-sm leading-relaxed text-muted">
+                  为一个任务开独立的工作区：在 <span className="font-mono text-xs">.claude/worktrees/名称</span> 检出一份代码（分支 <span className="font-mono text-xs">worktree-名称</span>，从当前{" "}
+                  <span className="font-mono text-xs">{list.data.branch ?? "HEAD"}</span> 开出，与 CLI 的 <span className="font-mono text-xs">--worktree</span> 相同），在里面开的会话只改这份代码，多个会话可以并行互不干扰。
+                </p>
+                <form
+                  className="mt-4 flex flex-wrap gap-2"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    if (name.trim()) create.mutate();
+                  }}
+                >
+                  <input aria-label="worktree 名称" placeholder="名称，如 fix-login" value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => e.key === "Escape" && setName("")} className={`${monoInputCls} flex-1 basis-48`} />
+                  <Button type="submit" variant="primary" icon={<PlusSmIcon />} disabled={!name.trim()} loading={create.isPending}>
+                    {create.isPending ? "创建中…" : "创建并开始会话"}
+                  </Button>
+                </form>
+                {create.error && (
+                  <p role="alert" className="mt-2 flex items-center gap-1.5 text-xs text-danger">
+                    <AlertIcon className="shrink-0" />
+                    {create.error instanceof ApiError ? create.error.message : "创建失败"}
+                  </p>
+                )}
+              </section>
+              <section>
+                <div className="mb-2 flex items-baseline justify-between">
+                  <h3 className="text-lg">已有的 worktree</h3>
+                  <span className="text-xs text-muted">{list.data.worktrees.length ? `${list.data.worktrees.length} 个` : ""}</span>
+                </div>
+                <ul className="grid gap-3 lg:grid-cols-2" aria-label="worktree 列表">
+                  {list.data.worktrees.map((w) => (
+                    <li key={w.path} className="flex min-w-0 flex-col rounded-xl border border-border bg-surface shadow-sm" data-testid="worktree" data-name={w.name}>
+                      <div className="flex min-w-0 items-center gap-2 px-4 pt-3">
+                        <BranchIcon className="shrink-0 text-muted" />
+                        <span className="min-w-0 flex-1 truncate font-mono font-medium">{w.name}</span>
+                        {w.exists && (
+                          <Button size="sm" icon={<ChatIcon />} onClick={() => newSession.mutate(w.name)} loading={newSession.isPending && newSession.variables === w.name}>
+                            新会话
+                          </Button>
+                        )}
+                        <Button size="sm" variant="ghost" icon={<TrashIcon />} className="text-danger hover:text-danger" onClick={() => setRemoving(w)}>
+                          清理
+                        </Button>
+                      </div>
+                      <div className="flex flex-wrap items-center gap-1.5 px-4 pt-1.5">
+                        <Tag mono>{w.branch ?? `分离于 ${w.head}`}</Tag>
+                        <Tag tone={!w.exists ? "danger" : w.dirty ? "warn" : "ok"} data-testid="worktree-status">
+                          {!w.exists ? "目录已不存在" : w.dirty ? `${w.changes} 个未提交的改动` : "没有未提交的改动"}
+                        </Tag>
+                        {w.locked && <Tag>已锁定</Tag>}
+                        <Tag>{w.sessions.length} 个会话</Tag>
+                      </div>
+                      <p className="flex min-w-0 items-center gap-1.5 px-4 pb-3 pt-2 font-mono text-[11px] text-muted" title={w.path}>
+                        <FolderIcon size={12} className="shrink-0" />
+                        <span className="truncate">{w.path}</span>
+                      </p>
+                      {w.sessions.length > 0 && (
+                        <ul className="mt-auto border-t border-border py-1">
+                          {w.sessions.map((s) => (
+                            <li key={s.id}>
+                              <Link to={`/p/${pid}/s/${s.id}`} className="flex min-w-0 items-center gap-2 px-4 py-2 text-sm hover:bg-surface-2 md:py-1.5" data-testid="worktree-session">
+                                <span className="min-w-0 flex-1 truncate">{s.title || (s.draft ? "新会话" : "未命名会话")}</span>
+                                <span className="shrink-0 text-xs text-muted">{relativeTime(s.lastModified)}</span>
+                                <ChevronRightIcon size={12} className="shrink-0 text-muted" />
+                              </Link>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+                {list.data.worktrees.length === 0 && (
+                  <EmptyState icon={<BranchIcon size={16} />} title="还没有 worktree" compact>
+                    在上面填一个任务名，就会开出一份独立的代码并直接进入新会话。改完后可以在这里清理，分支会保留。
+                  </EmptyState>
+                )}
+              </section>
+            </>
+          )}
+        </div>
+      </div>
+      {removing && <RemoveDialog pid={pid} wt={removing} onClose={() => setRemoving(undefined)} onDone={invalidate} />}
+    </div>
+  );
+}
+
+function RemoveDialog({ pid, wt, onClose, onDone }: { pid: string; wt: WorktreeInfo; onClose: () => void; onDone: () => void }) {
+  const [confirmDirty, setConfirmDirty] = useState(false);
+  const remove = useMutation({
+    mutationFn: () => api(`/api/projects/${pid}/worktrees/${encodeURIComponent(wt.name)}${wt.dirty ? "?force=1" : ""}`, { method: "DELETE" }),
+    onSuccess: () => {
+      onDone();
+      onClose();
+    },
+  });
+  const needsSecond = wt.dirty && !confirmDirty;
+  return (
+    <Modal title={`清理 worktree ${wt.name}？`} onClose={onClose} testId="remove-worktree-dialog">
+      <div className="space-y-2 text-sm text-muted">
+        <p>
+          会执行 <span className="font-mono text-xs">git worktree remove</span>，删除目录 <span className="break-all font-mono text-xs">{wt.path}</span>。
+          分支 <span className="font-mono text-xs">{wt.branch}</span> 保留，已提交的内容不会丢。
+        </p>
+        {wt.sessions.length > 0 && <p>这里的 {wt.sessions.length} 个会话会停止并从列表中消失，对话记录仍保存在 ~/.claude 中。</p>}
+        {wt.dirty && (
+          <p className="flex items-start gap-2 rounded-md border border-danger/30 bg-danger/5 px-3 py-2 text-danger" data-testid="dirty-warning">
+            <AlertIcon className="mt-0.5 shrink-0" />
+            这个 worktree 里有 {wt.changes} 个未提交的改动，删除后这些改动会永久丢失。
+          </p>
+        )}
+      </div>
+      {remove.error && (
+        <p role="alert" className="mt-2 text-xs text-danger">
+          {remove.error instanceof ApiError ? remove.error.message : "删除失败"}
+        </p>
+      )}
+      <div className="mt-5 flex justify-end gap-2">
+        <Button variant="ghost" onClick={onClose}>
+          取消
+        </Button>
+        {needsSecond ? (
+          <Button variant="danger" onClick={() => setConfirmDirty(true)}>
+            仍然删除…
+          </Button>
+        ) : (
+          <Button variant="danger" loading={remove.isPending} onClick={() => remove.mutate()}>
+            {wt.dirty ? "确认丢弃改动并删除" : "确认删除"}
+          </Button>
+        )}
+      </div>
+    </Modal>
+  );
+}

package/web/src/pages/settings/AccountPage.tsx

@@ -0,0 +1,149 @@
+import { useQuery } from "@tanstack/react-query";
+import type { AccountStatus, RateWindow } from "@shared/config.ts";
+import { api } from "../../api.ts";
+import { Button } from "../../ui/Button.tsx";
+import { CheckIcon, RefreshIcon, TerminalIcon, UserIcon } from "../../ui/icons.tsx";
+import { Card, ErrorLine, Loading, PageTitle, Tag, cfgUrl, useCfg, useProjectParam } from "./ui.tsx";
+
+function resetText(iso: string | null) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const mins = Math.round((d.getTime() - Date.now()) / 60_000);
+  const rel = mins < 60 ? `${Math.max(mins, 0)} 分钟后` : mins < 48 * 60 ? `${Math.floor(mins / 60)} 小时 ${mins % 60} 分钟后` : `${Math.round(mins / 1440)} 天后`;
+  return `${d.toLocaleString(undefined, { month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit" })} 重置（${rel}）`;
+}
+
+function Meter({ label, w }: { label: string; w: RateWindow | null }) {
+  const pct = w?.utilization ?? null;
+  return (
+    <div className="py-2" data-testid="usage-meter">
+      <div className="flex items-baseline justify-between gap-2 text-sm">
+        <span className="font-medium">{label}</span>
+        <span className="tabular-nums">{pct === null ? "—" : `${Math.round(pct)}%`}</span>
+      </div>
+      <div className="mt-1.5 h-2 overflow-hidden rounded-full bg-surface-2" role="progressbar" aria-label={label} aria-valuenow={pct ?? undefined} aria-valuemin={0} aria-valuemax={100}>
+        <div className={`h-full rounded-full ${pct !== null && pct >= 90 ? "bg-danger" : "bg-accent"}`} style={{ width: `${Math.min(pct ?? 0, 100)}%` }} />
+      </div>
+      {w?.resetsAt && <p className="mt-1 text-xs text-muted">{resetText(w.resetsAt)}</p>}
+    </div>
+  );
+}
+
+export function AccountPage() {
+  const pid = useProjectParam();
+  const st = useCfg<AccountStatus>("account", undefined);
+  const doctor = useQuery({
+    queryKey: ["cfg", "doctor", pid ?? ""],
+    queryFn: () => api<{ code: number; text: string }>(cfgUrl("doctor", pid)),
+    enabled: false,
+  });
+  const d = st.data;
+  const loggedIn = d?.auth?.loggedIn;
+
+  return (
+    <div>
+      <PageTitle title="账号与状态" desc="对应 /usage、/status、/doctor。账号只能在终端登录，网页不经手凭据。">
+        <Button size="sm" icon={<RefreshIcon />} onClick={() => st.refetch()} loading={st.isFetching}>
+          {st.isFetching ? "刷新中…" : "刷新"}
+        </Button>
+      </PageTitle>
+      {st.isPending && <Loading />}
+      <ErrorLine error={st.error} />
+      {d && (
+        <div className="grid gap-x-4 lg:grid-cols-2">
+          <Card icon={<UserIcon />} title="登录状态" testId="auth-card" actions={<Tag tone={loggedIn ? "ok" : "danger"}>{loggedIn ? "已登录" : "未登录"}</Tag>}>
+            {loggedIn ? (
+              <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+                {d.auth?.email && (
+                  <>
+                    <dt className="text-muted">账号</dt>
+                    <dd className="break-all">{d.auth.email}</dd>
+                  </>
+                )}
+                {d.auth?.orgName && (
+                  <>
+                    <dt className="text-muted">组织</dt>
+                    <dd className="break-all">{d.auth.orgName}</dd>
+                  </>
+                )}
+                {Boolean(d.auth?.subscriptionType || d.account?.subscriptionType) && (
+                  <>
+                    <dt className="text-muted">套餐</dt>
+                    <dd>{String(d.account?.subscriptionType ?? d.auth?.subscriptionType)}</dd>
+                  </>
+                )}
+                <dt className="text-muted">方式</dt>
+                <dd>{d.auth?.authMethod}</dd>
+              </dl>
+            ) : (
+              <div role="alert" className="space-y-1 text-sm">
+                <p className="font-medium text-danger">CLI 未登录</p>
+                <p>
+                  请在这台机器的终端运行 <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono">claude auth login</code> 登录，然后回到这里刷新。
+                </p>
+                <p className="text-xs text-muted">配置目录：{d.configDir}</p>
+              </div>
+            )}
+          </Card>
+          <Card title="套餐额度">
+            {d.usage ? (
+              <>
+                <Meter label="5 小时窗口" w={d.usage.fiveHour} />
+                <Meter label="7 天窗口" w={d.usage.sevenDay} />
+                {d.usage.extra.map((x) => (
+                  <Meter key={x.label} label={x.label} w={x} />
+                ))}
+              </>
+            ) : (
+              <p className="text-sm text-muted">{loggedIn ? "这个账号没有可显示的额度信息。" : "登录后显示。"}</p>
+            )}
+          </Card>
+          <Card icon={<TerminalIcon />} title="CLI" className="lg:col-span-2">
+            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+              <dt className="text-muted">版本</dt>
+              <dd data-testid="cli-version">{d.version ?? "—"}</dd>
+              <dt className="text-muted">当前模型</dt>
+              <dd className="break-all">{d.model ?? "—"}</dd>
+              <dt className="text-muted">配置目录</dt>
+              <dd className="break-all font-mono text-xs">{d.configDir}</dd>
+            </dl>
+            {d.status
+              .filter((s) => s.title !== "Session")
+              .map((s) => (
+                <div key={s.title} className="mt-3">
+                  <h4 className="text-xs font-medium uppercase tracking-wide text-muted">{s.title}</h4>
+                  <dl className="mt-1 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+                    {s.rows.map((r) => (
+                      <div key={r.label} className="contents">
+                        <dt className="text-muted">{r.label}</dt>
+                        <dd className="break-all">{r.value}</dd>
+                      </div>
+                    ))}
+                  </dl>
+                </div>
+              ))}
+            {d.errors.length > 0 && <p className="mt-2 text-xs text-muted">{d.errors.join("；")}</p>}
+          </Card>
+        </div>
+      )}
+      <Card
+        icon={<CheckIcon />} title="健康检查（claude doctor）"
+        actions={
+          <Button size="sm" icon={<CheckIcon />} onClick={() => doctor.refetch()} loading={doctor.isFetching}>
+            {doctor.isFetching ? "检查中…" : doctor.data ? "重新检查" : "运行检查"}
+          </Button>
+        }
+      >
+        <ErrorLine error={doctor.error} />
+        {doctor.data ? (
+          <pre className="max-h-[60vh] overflow-auto whitespace-pre-wrap break-words rounded-lg bg-surface-2/60 p-3 font-mono text-xs leading-relaxed" data-testid="doctor-output">
+            {doctor.data.text}
+          </pre>
+        ) : (
+          !doctor.isFetching && <p className="text-sm text-muted">运行 claude doctor，检查安装、自动更新、配置文件和 MCP 是否正常。需要几秒钟。</p>
+        )}
+      </Card>
+    </div>
+  );
+}

package/web/src/pages/settings/AgentsPage.tsx

@@ -0,0 +1,182 @@
+import { useState } from "react";
+import { useUnsavedChanges, unsavedEditors } from "../../unsaved.tsx";
+import { useConfirm } from "../../components/Confirmation.tsx";
+import type { AgentFile, AgentInput } from "@shared/config.ts";
+import { api } from "../../api.ts";
+import { relativeTime } from "../../hooks.ts";
+import { Button } from "../../ui/Button.tsx";
+import { Select } from "../../ui/Select.tsx";
+import { BotIcon, PencilIcon, PlusSmIcon, TrashIcon } from "../../ui/icons.tsx";
+import { Card, ConfirmButton, ErrorLine, Field, Loading, PageTitle, Tag, cfgUrl, monoInputCls, monoTextareaCls, textareaCls, useCfg, useCfgMutation, useProjectParam } from "./ui.tsx";
+
+type Listing = { agents: AgentFile[]; effective: { name: string; description: string; model?: string }[] };
+
+const MODELS = [
+  { value: "", label: "默认", hint: "继承会话的模型" },
+  { value: "inherit", label: "inherit", hint: "显式继承" },
+  { value: "sonnet", label: "sonnet" },
+  { value: "opus", label: "opus" },
+  { value: "haiku", label: "haiku", hint: "更快、更省额度" },
+];
+
+export function AgentsPage() {
+  const confirm = useConfirm();
+  const pid = useProjectParam();
+  const listing = useCfg<Listing>("agents", pid);
+  const [editing, setEditing] = useState<AgentFile | "new" | null>(null);
+  const changeEditing = async (next: AgentFile | "new") => {
+    if (editing === next) return;
+    if (unsavedEditors().length && !(await confirm({
+      title: "放弃当前 agent 的修改？",
+      description: "切换编辑对象后，尚未保存的修改会丢失。",
+      confirmLabel: "放弃并切换",
+      cancelLabel: "继续编辑",
+      danger: true,
+    })).confirmed) return;
+    setEditing(next);
+  };
+  const del = useCfgMutation((a: AgentFile) => api(cfgUrl("agents", pid, { scope: a.scope, file: a.file }), { method: "DELETE" }), ["agents"]);
+  const custom = new Set(listing.data?.agents.map((a) => a.name));
+
+  return (
+    <div>
+      <PageTitle title="Agents" desc="自定义子 agent：~/.claude/agents 与项目 .claude/agents 下的 Markdown 文件。Claude 按说明决定何时把任务交给它们。">
+        <Button size="sm" variant="primary" icon={<PlusSmIcon />} onClick={() => changeEditing("new")} disabled={editing === "new"}>
+          新建 agent
+        </Button>
+      </PageTitle>
+      {listing.isPending && <Loading />}
+      <ErrorLine error={listing.error || del.error} />
+      {editing && <AgentEditor key={editing === "new" ? "new" : editing.path} pid={pid} agent={editing === "new" ? null : editing} onDone={() => setEditing(null)} />}
+      {listing.data && (
+        <>
+          {(["project", "user"] as const).map((scope) => {
+            if (scope === "project" && !pid) return null;
+            const items = listing.data.agents.filter((a) => a.scope === scope);
+            return (
+              <Card key={scope} icon={<BotIcon />} title={scope === "user" ? "用户级" : "项目级"} count={items.length} sub={scope === "user" ? "~/.claude/agents" : ".claude/agents"} flush>
+                {items.length === 0 && (
+                  <p className="px-4 py-3 text-sm text-muted">
+                    没有自定义 agent。{" "}
+                    <button className="text-accent hover:underline" onClick={() => changeEditing("new")}>
+                      新建一个
+                    </button>
+                    ，例如只读的代码审查员或专门写测试的助手。
+                  </p>
+                )}
+                <ul className="divide-y divide-border">
+                  {items.map((a) => (
+                    <li key={a.path} className="px-4 py-3" data-testid="agent" data-name={a.name}>
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        <span className="mr-1 font-medium">{a.name || a.file}</span>
+                        <Tag mono>{a.model || "默认模型"}</Tag>
+                        <Tag>{a.tools ? `${a.tools.split(",").filter((t) => t.trim()).length} 个工具` : "全部工具"}</Tag>
+                        <span className="text-xs text-muted">{relativeTime(a.mtime)}修改</span>
+                        <span className="ml-auto" />
+                        <Button size="sm" variant="ghost" icon={<PencilIcon />} onClick={() => changeEditing(a)}>
+                          编辑
+                        </Button>
+                        <ConfirmButton variant="ghost" icon={<TrashIcon />} confirmText="删除这个 agent？" onConfirm={() => del.mutate(a)} disabled={del.isPending} label={`删除 ${a.name}`}>
+                          删除
+                        </ConfirmButton>
+                      </div>
+                      {a.description && <p className="mt-1 line-clamp-3 text-sm text-muted">{a.description}</p>}
+                      {a.tools && <p className="mt-1 break-all font-mono text-xs text-muted">工具：{a.tools}</p>}
+                    </li>
+                  ))}
+                </ul>
+              </Card>
+            );
+          })}
+          <Card title="当前生效的 agent" count={listing.data.effective.length} sub="内置、插件和文件里的 agent，由 CLI 列出">
+            <ul className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+              {listing.data.effective.map((a) => (
+                <li key={a.name} className="min-w-0 rounded-lg border border-border px-3 py-2">
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <span className="min-w-0 truncate text-sm font-medium">{a.name}</span>
+                    {custom.has(a.name) && <Tag tone="accent">自定义</Tag>}
+                    {a.model && <Tag mono>{a.model}</Tag>}
+                  </div>
+                  <p className="mt-0.5 line-clamp-2 text-xs text-muted">{a.description}</p>
+                </li>
+              ))}
+            </ul>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+}
+
+function AgentEditor({ pid, agent, onDone }: { pid?: string; agent: AgentFile | null; onDone: () => void }) {
+  const [f, setF] = useState<AgentInput>(() =>
+    agent
+      ? { scope: agent.scope, file: agent.file, name: agent.name || agent.file, description: agent.description, tools: agent.tools, model: agent.model, prompt: agent.prompt }
+      : { scope: pid ? "project" : "user", name: "", description: "", tools: "", model: "", prompt: "" },
+  );
+  const [original] = useState(() => JSON.stringify(f));
+  const { discard } = useUnsavedChanges(JSON.stringify(f) !== original, `agent ${agent?.name || f.name || "新建"}`);
+  const cancel = async () => { if (await discard()) onDone(); };
+  const set = (k: keyof AgentInput) => (e: { target: { value: string } }) => setF({ ...f, [k]: e.target.value });
+  const save = useCfgMutation(() => api<AgentFile>(cfgUrl("agents", pid), { method: "PUT", json: { ...f, baseMtime: agent?.mtime } }), ["agents"], onDone);
+  const modelOptions = MODELS.some((m) => m.value === f.model) ? MODELS : [...MODELS, { value: f.model, label: f.model, hint: undefined }];
+
+  return (
+    <Card icon={agent ? <PencilIcon /> : <PlusSmIcon />} title={agent ? `编辑 ${agent.name || agent.file}` : "新建 agent"} sub={agent?.path} className="border-accent/30">
+      <form
+        className="grid gap-3 md:grid-cols-2"
+        onKeyDown={(e) => e.key === "Escape" && void cancel()}
+        onSubmit={(e) => {
+          e.preventDefault();
+          save.mutate(undefined);
+        }}
+      >
+        {!agent && (
+          <Field group label="位置">
+            <Select<"project" | "user">
+              label="位置"
+              value={f.scope}
+              onChange={(v) => setF({ ...f, scope: v })}
+              className="w-full"
+              options={[
+                ...(pid ? [{ value: "project" as const, label: "项目级", text: "项目级", hint: ".claude/agents，随仓库共享" }] : []),
+                { value: "user" as const, label: "用户级", text: "用户级", hint: "~/.claude/agents，所有项目可用" },
+              ]}
+            />
+          </Field>
+        )}
+        <Field label="名称" hint="字母、数字、- 和 _">
+          <input autoFocus aria-label="agent 名称" value={f.name} onChange={set("name")} className={monoInputCls} placeholder="code-reviewer" />
+        </Field>
+        <Field group label="模型">
+          <Select label="agent 模型" value={f.model} onChange={(v) => setF({ ...f, model: v })} className="w-full" options={modelOptions.map((m) => ({ value: m.value, label: m.label, text: m.label, hint: m.hint }))} />
+        </Field>
+        <Field label="可用工具（逗号分隔，留空表示全部）">
+          <input aria-label="agent 工具" value={f.tools} onChange={set("tools")} className={monoInputCls} placeholder="Read, Grep, Glob" />
+        </Field>
+        <Field label="说明" hint="Claude 根据这段说明决定何时调用它" className="md:col-span-2">
+          <textarea aria-label="agent 说明" value={f.description} onChange={set("description")} rows={2} className={textareaCls} />
+        </Field>
+        <Field label="系统提示词" className="md:col-span-2">
+          <textarea aria-label="agent 提示词" value={f.prompt} onChange={set("prompt")} rows={10} className={`${monoTextareaCls} resize-y`} />
+        </Field>
+        {agent?.extra && (
+          <p className="text-xs text-muted md:col-span-2">
+            其它 frontmatter 会原样保留：<code className="break-all font-mono">{agent.extra.split("\n")[0]}…</code>
+          </p>
+        )}
+        <div className="md:col-span-2">
+          <ErrorLine error={save.error} />
+        </div>
+        <div className="flex flex-wrap justify-end gap-2 border-t border-border pt-3 md:col-span-2">
+          <Button variant="ghost" onClick={cancel}>
+            取消
+          </Button>
+          <Button type="submit" variant="primary" disabled={!f.name.trim() || !f.description.trim()} loading={save.isPending}>
+            {agent ? "保存" : "创建"}
+          </Button>
+        </div>
+      </form>
+    </Card>
+  );
+}