@thaut/claude-ide 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,310 @@
+import { useState } from "react";
+import { useDiscardEditors, useUnsavedChanges } from "../../unsaved.tsx";
+import type { McpAddInput, McpAuthStart, McpServer, SettingsScope } from "@shared/config.ts";
+import { api } from "../../api.ts";
+import { Button } from "../../ui/Button.tsx";
+import { Select } from "../../ui/Select.tsx";
+import type { TagTone } from "../../ui/Form.tsx";
+import { ExternalIcon, PlusSmIcon, RefreshIcon, ServerIcon, TrashIcon } from "../../ui/icons.tsx";
+import { Card, ConfirmButton, EmptyState, ErrorLine, Field, Loading, PageTitle, ScopeSelect, Tag, Toggle, cfgUrl, monoInputCls, monoTextareaCls, useCfg, useCfgMutation, useProjectParam } from "./ui.tsx";
+
+const STATUS: Record<string, { label: string; tone: TagTone }> = {
+  connected: { label: "已连接", tone: "ok" },
+  failed: { label: "连接失败", tone: "danger" },
+  "needs-auth": { label: "需要登录", tone: "warn" },
+  pending: { label: "连接中", tone: "neutral" },
+  disabled: { label: "已停用", tone: "neutral" },
+};
+
+const SCOPE_TEXT: Record<string, string> = { local: "本地（仅本项目）", project: "项目（.mcp.json）", user: "用户", plugin: "插件", claudeai: "claude.ai", dynamic: "动态" };
+
+export function McpPage() {
+  const discardEditors = useDiscardEditors();
+  const pid = useProjectParam();
+  const servers = useCfg<McpServer[]>("mcp", pid);
+  const [adding, setAdding] = useState(false);
+  const all = servers.data ?? [];
+  const count = (s: string) => all.filter((x) => x.status === s).length;
+
+  return (
+    <div>
+      <PageTitle title="MCP 服务器" desc="状态来自 CLI 本身；添加和移除通过 claude mcp 命令完成。">
+        <Button size="sm" icon={<RefreshIcon />} onClick={() => servers.refetch()} loading={servers.isFetching}>
+          {servers.isFetching ? "检查中…" : "刷新状态"}
+        </Button>
+        <Button size="sm" variant="primary" icon={<PlusSmIcon />} onClick={async () => {
+          if (!adding || await discardEditors()) setAdding((value) => !value);
+        }} aria-expanded={adding}>
+          添加服务器
+        </Button>
+      </PageTitle>
+      {adding && <AddServer pid={pid} onDone={() => setAdding(false)} />}
+      {servers.isPending && <Loading />}
+      <ErrorLine error={servers.error} />
+      {all.length > 0 && (
+        <p className="mb-3 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted">
+          <span>共 {all.length} 个</span>
+          {count("connected") > 0 && <span className="text-ok">{count("connected")} 个已连接</span>}
+          {count("failed") > 0 && <span className="text-danger">{count("failed")} 个连接失败</span>}
+          {count("needs-auth") > 0 && <span className="text-amber-700 dark:text-amber-400">{count("needs-auth")} 个需要登录</span>}
+          {count("disabled") > 0 && <span>{count("disabled")} 个已停用</span>}
+        </p>
+      )}
+      {servers.data && all.length === 0 && !adding && (
+        <EmptyState
+          icon={<ServerIcon size={16} />}
+          title="还没有配置 MCP 服务器"
+          action={
+            <Button variant="primary" icon={<PlusSmIcon />} onClick={() => setAdding(true)}>
+              添加服务器
+            </Button>
+          }
+        >
+          MCP 服务器给 Claude 增加工具，例如访问数据库、浏览器或内部系统。可以是本地命令（stdio），也可以是远程地址（HTTP / SSE）。
+        </EmptyState>
+      )}
+      <ul className="grid gap-3 xl:grid-cols-2">
+        {all.map((s) => (
+          <ServerRow key={`${s.scope}:${s.name}`} s={s} pid={pid} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function summary(cfg: Record<string, unknown>): string {
+  if (typeof cfg.url === "string") return cfg.url;
+  if (typeof cfg.command === "string") return [cfg.command, ...((cfg.args as string[]) ?? [])].join(" ");
+  return JSON.stringify(cfg);
+}
+
+function transport(cfg: Record<string, unknown>): string {
+  if (typeof cfg.url === "string") return String(cfg.type ?? "http");
+  if (typeof cfg.command === "string") return "stdio";
+  return String(cfg.type ?? "—");
+}
+
+function ServerRow({ s, pid }: { s: McpServer; pid?: string }) {
+  const st = STATUS[s.status] ?? { label: s.status, tone: "neutral" as TagTone };
+  const toggle = useCfgMutation((enabled: boolean) => api(cfgUrl("mcp/toggle", pid), { method: "POST", json: { name: s.name, enabled } }), ["mcp"]);
+  const remove = useCfgMutation(() => api(cfgUrl("mcp", pid, { name: s.name, scope: s.scope }), { method: "DELETE" }), ["mcp"]);
+  const logout = useCfgMutation(() => api(cfgUrl("mcp/logout", pid), { method: "POST", json: { name: s.name } }), ["mcp"]);
+  const [auth, setAuth] = useState(false);
+  const remote = typeof s.config.url === "string";
+  const enabled = s.status !== "disabled";
+  const env = s.config.env && typeof s.config.env === "object" ? Object.keys(s.config.env as object).length : 0;
+
+  return (
+    <li className="flex min-w-0 flex-col rounded-xl border border-border bg-surface px-4 py-3 shadow-sm" data-testid="mcp-server" data-name={s.name}>
+      <div className="flex min-w-0 items-center gap-2">
+        <ServerIcon className="shrink-0 text-muted" />
+        <span className="min-w-0 truncate font-medium">{s.name}</span>
+        <span className="ml-auto" />
+        <Toggle label={`启用 ${s.name}`} checked={toggle.isPending ? !!toggle.variables : enabled} onChange={(v) => toggle.mutate(v)} disabled={toggle.isPending} />
+      </div>
+      <div className="mt-1 flex flex-wrap items-center gap-1.5">
+        <Tag tone={st.tone} data-status={s.status}>
+          {st.label}
+        </Tag>
+        <Tag mono>{transport(s.config)}</Tag>
+        <Tag>{SCOPE_TEXT[s.scope] ?? s.scope}</Tag>
+        {env > 0 && <Tag>{env} 个环境变量</Tag>}
+      </div>
+      <p className="mt-2 break-all rounded-md bg-surface-2/60 px-2.5 py-1.5 font-mono text-xs text-muted">{summary(s.config)}</p>
+      {s.error && <p className="mt-1.5 line-clamp-3 break-all text-xs text-danger">{s.error}</p>}
+      <div className="mt-auto flex flex-wrap items-center gap-1.5 pt-2.5">
+        {remote && enabled && (
+          <Button size="sm" onClick={() => setAuth(true)} disabled={auth}>
+            {s.status === "needs-auth" ? "登录" : "重新登录"}
+          </Button>
+        )}
+        {remote && s.status === "connected" && (
+          <ConfirmButton danger={false} confirmText="清除登录信息？" onConfirm={() => logout.mutate(undefined)}>
+            退出登录
+          </ConfirmButton>
+        )}
+        {s.editable ? (
+          <ConfirmButton icon={<TrashIcon />} confirmText={`从${SCOPE_TEXT[s.scope] ?? s.scope}配置中移除？`} onConfirm={() => remove.mutate(undefined)} disabled={remove.isPending} label={`移除 ${s.name}`}>
+            移除
+          </ConfirmButton>
+        ) : (
+          <span className="text-xs text-muted">由{s.scope === "plugin" ? "插件" : s.scope}提供，不能在这里移除</span>
+        )}
+      </div>
+      <ErrorLine error={toggle.error || remove.error || logout.error} />
+      {auth && <AuthFlow pid={pid} name={s.name} onClose={() => setAuth(false)} />}
+    </li>
+  );
+}
+
+/**
+ * MCP OAuth: the CLI gives us the authorization URL; after signing in, the browser lands on
+ * the CLI's localhost callback (which a phone cannot reach). The user pastes that final URL here.
+ */
+function AuthFlow({ pid, name, onClose }: { pid?: string; name: string; onClose: () => void }) {
+  const start = useCfgMutation(() => api<McpAuthStart>(cfgUrl("mcp/auth/start", pid), { method: "POST", json: { name } }), []);
+  const [url, setUrl] = useState("");
+  const submit = useCfgMutation(() => api(cfgUrl("mcp/auth/submit", pid), { method: "POST", json: { flowId: start.data?.flowId, url } }), ["mcp"], onClose);
+  const cancel = () => {
+    if (start.data) void api(cfgUrl("mcp/auth/cancel", pid), { method: "POST", json: { flowId: start.data.flowId } }).catch(() => {});
+    onClose();
+  };
+  return (
+    <div className="mt-3 space-y-2 rounded-lg border border-border bg-bg p-3 text-sm" role="group" aria-label={`登录 ${name}`}>
+      {!start.data && (
+        <>
+          <p className="text-muted">由 CLI 发起 OAuth 授权。授权后浏览器会跳到一个 localhost 地址（可能显示“无法访问”），把那一页的完整网址复制回来即可。</p>
+          <div className="flex gap-2">
+            <Button variant="primary" size="sm" onClick={() => start.mutate(undefined)} loading={start.isPending}>
+              {start.isPending ? "正在获取授权地址…" : "开始登录"}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              取消
+            </Button>
+          </div>
+        </>
+      )}
+      {start.data && !start.data.authUrl && (
+        <div className="flex items-center gap-2">
+          <p className="flex-1">这个服务器不需要浏览器授权，已完成。</p>
+          <Button size="sm" onClick={onClose}>
+            完成
+          </Button>
+        </div>
+      )}
+      {start.data?.authUrl && (
+        <form
+          className="space-y-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            submit.mutate(undefined);
+          }}
+        >
+          <p>
+            1.{" "}
+            <a href={start.data.authUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-accent underline">
+              打开授权页面 <ExternalIcon size={12} />
+            </a>{" "}
+            并完成登录。
+          </p>
+          <Field label="2. 粘贴回调页的完整网址" hint={start.data.callbackPort ? `形如 http://localhost:${start.data.callbackPort}/callback?code=…` : undefined}>
+            <input aria-label="回调网址" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="http://localhost:…/callback?code=…&state=…" className={monoInputCls} />
+          </Field>
+          <div className="flex gap-2">
+            <Button type="submit" variant="primary" size="sm" disabled={!url.trim()} loading={submit.isPending}>
+              完成登录
+            </Button>
+            <Button variant="ghost" size="sm" onClick={cancel}>
+              取消
+            </Button>
+          </div>
+        </form>
+      )}
+      <ErrorLine error={start.error || submit.error} />
+    </div>
+  );
+}
+
+const lines = (s: string) =>
+  s
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean);
+
+function parsePairs(s: string, sep: "=" | ":"): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const l of lines(s)) {
+    const i = l.indexOf(sep);
+    if (i > 0) out[l.slice(0, i).trim()] = l.slice(i + 1).trim();
+  }
+  return out;
+}
+
+type Transport = McpAddInput["transport"];
+
+function AddServer({ pid, onDone }: { pid?: string; onDone: () => void }) {
+  const [f, setF] = useState({ name: "", scope: (pid ? "local" : "user") as SettingsScope, transport: "stdio" as Transport, command: "", args: "", env: "", url: "", headers: "" });
+  const [original] = useState(() => JSON.stringify(f));
+  const { discard } = useUnsavedChanges(JSON.stringify(f) !== original, "MCP 服务器配置");
+  const cancel = async () => { if (await discard()) onDone(); };
+  const set = (k: keyof typeof f) => (e: { target: { value: string } }) => setF({ ...f, [k]: e.target.value });
+  const add = useCfgMutation(
+    () =>
+      api(cfgUrl("mcp", pid), {
+        method: "POST",
+        json: {
+          name: f.name.trim(),
+          scope: f.scope,
+          transport: f.transport,
+          ...(f.transport === "stdio" ? { command: f.command.trim(), args: lines(f.args), env: parsePairs(f.env, "=") } : { url: f.url.trim(), headers: parsePairs(f.headers, ":") }),
+        } satisfies McpAddInput,
+      }),
+    ["mcp"],
+    onDone,
+  );
+  return (
+    <Card title="添加 MCP 服务器" icon={<PlusSmIcon />} className="border-accent/30">
+      <form
+        className="grid gap-3 md:grid-cols-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          add.mutate(undefined);
+        }}
+        onKeyDown={(e) => e.key === "Escape" && void cancel()}
+      >
+        <Field label="名称">
+          <input autoFocus aria-label="服务器名称" value={f.name} onChange={set("name")} className={monoInputCls} placeholder="my-server" />
+        </Field>
+        <Field group label="作用域" hint={f.scope === "local" ? "只对本项目、只对你生效（~/.claude.json）" : f.scope === "project" ? "写进项目的 .mcp.json，随仓库共享" : "所有项目都可用"}>
+          <ScopeSelect label="作用域" value={f.scope} onChange={(v) => setF({ ...f, scope: v })} scopes={pid ? ["local", "project", "user"] : ["user"]} />
+        </Field>
+        <Field group label="传输方式">
+          <Select<Transport>
+            label="传输方式"
+            value={f.transport}
+            onChange={(v) => setF({ ...f, transport: v })}
+            className="w-full"
+            options={[
+              { value: "stdio", label: "stdio", text: "stdio（本地命令）", hint: "在本机启动一个进程，通过标准输入输出通信" },
+              { value: "http", label: "HTTP", text: "HTTP", hint: "远程服务器，可流式 HTTP" },
+              { value: "sse", label: "SSE", text: "SSE", hint: "远程服务器，Server-Sent Events（旧式）" },
+            ]}
+          />
+        </Field>
+        {f.transport === "stdio" ? (
+          <>
+            <Field label="命令">
+              <input aria-label="命令" value={f.command} onChange={set("command")} className={monoInputCls} placeholder="npx" />
+            </Field>
+            <Field label="参数（每行一个）">
+              <textarea aria-label="参数" value={f.args} onChange={set("args")} rows={3} className={monoTextareaCls} placeholder={"-y\n@modelcontextprotocol/server-filesystem"} />
+            </Field>
+            <Field label="环境变量（每行 KEY=VALUE）">
+              <textarea aria-label="环境变量" value={f.env} onChange={set("env")} rows={3} className={monoTextareaCls} placeholder="API_KEY=…" />
+            </Field>
+          </>
+        ) : (
+          <>
+            <Field label="地址">
+              <input aria-label="地址" value={f.url} onChange={set("url")} className={monoInputCls} placeholder="https://example.com/mcp" />
+            </Field>
+            <Field label="请求头（每行 Name: value）">
+              <textarea aria-label="请求头" value={f.headers} onChange={set("headers")} rows={3} className={monoTextareaCls} placeholder="Authorization: Bearer …" />
+            </Field>
+          </>
+        )}
+        <div className="md:col-span-2">
+          <ErrorLine error={add.error} />
+        </div>
+        <div className="flex flex-wrap items-center 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.transport === "stdio" ? !f.command.trim() : !f.url.trim())} loading={add.isPending}>
+            {add.isPending ? "添加中…" : "添加"}
+          </Button>
+        </div>
+      </form>
+    </Card>
+  );
+}

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

@@ -0,0 +1,309 @@
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+import type { MemoryFile, MemoryKind, MemoryListing, TextFile } from "@shared/config.ts";
+import { api } from "../../api.ts";
+import { relativeTime } from "../../hooks.ts";
+import { formatSize } from "../../format.ts";
+import { Markdown } from "../../components/Markdown.tsx";
+import { Button, cx } from "../../ui/Button.tsx";
+import { ArrowLeftIcon, BrainIcon, FileIcon, PencilIcon, PlusSmIcon, TrashIcon } from "../../ui/icons.tsx";
+import { Card, ConfirmButton, Empty, EmptyState, ErrorLine, Loading, PageTitle, SplitView, Tag, Toggle, cfgUrl, inputCls, monoTextareaCls, useCfg, useCfgMutation, useProjectParam } from "./ui.tsx";
+import { useUnsavedChanges } from "../../unsaved.tsx";
+
+const GROUPS: { kinds: MemoryKind[]; title: string; desc: string }[] = [
+  { kinds: ["user", "user-rule"], title: "用户级", desc: "所有项目都会加载" },
+  { kinds: ["project", "project-rule"], title: "项目级", desc: "随仓库共享" },
+  { kinds: ["local"], title: "个人（本项目）", desc: "CLAUDE.local.md，不提交" },
+  { kinds: ["auto"], title: "自动记忆", desc: "Claude 自己记下的内容" },
+  { kinds: ["other"], title: "其它已加载的文件", desc: "上级目录或导入的文件" },
+];
+
+const KIND_TAG: Partial<Record<MemoryKind, string>> = { "user-rule": "规则", "project-rule": "规则" };
+
+type Mode = { kind: "view" } | { kind: "edit"; create: boolean };
+
+export function MemoryPage() {
+  const pid = useProjectParam();
+  const [sp, setSp] = useSearchParams();
+  const selected = sp.get("f");
+  const listing = useCfg<MemoryListing>("memory", pid);
+  const [creating, setCreating] = useState<string | null>(null);
+
+  const select = (path: string | null) => {
+    const n = new URLSearchParams(sp);
+    if (path) n.set("f", path);
+    else n.delete("f");
+    setSp(n);
+  };
+  const file = listing.data?.files.find((f) => f.path === selected);
+  const existing = listing.data?.files.filter((f) => f.exists) ?? [];
+  const totalSize = existing.reduce((n, f) => n + (f.size ?? 0), 0);
+
+  const list = listing.data && (
+    <div className="space-y-4">
+      <AutoMemory listing={listing.data} pid={pid} />
+      {GROUPS.map((g) => {
+        const files = listing.data.files.filter((f) => g.kinds.includes(f.kind));
+        const dirs = listing.data.dirs.filter((d) => g.kinds.includes(d.kind));
+        if (!files.length && !dirs.length) return null;
+        return (
+          <section key={g.title} className="rounded-xl border border-border bg-surface shadow-sm">
+            <header className="flex items-baseline gap-2 border-b border-border px-3.5 py-2">
+              <h3 className="text-sm">{g.title}</h3>
+              <span className="min-w-0 truncate text-xs text-muted">{g.desc}</span>
+            </header>
+            <ul aria-label={g.title} className="p-1 empty:hidden">
+              {files.map((f) => (
+                <li key={f.path}>
+                  <button
+                    onClick={() => select(f.path)}
+                    aria-current={f.path === selected ? "true" : undefined}
+                    className={cx(
+                      "flex w-full items-start gap-2.5 rounded-md px-2.5 py-2.5 text-left transition-colors md:py-2",
+                      f.path === selected ? "bg-accent/10 text-text" : "hover:bg-surface-2",
+                    )}
+                    data-path={f.path}
+                    title={f.path}
+                  >
+                    <FileIcon className={cx("mt-0.5 shrink-0", f.exists ? "text-muted" : "text-muted/50")} />
+                    <span className="min-w-0 flex-1">
+                      <span className={cx("block break-all font-mono text-xs", !f.exists && "text-muted")}>{f.label}</span>
+                      <span className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-muted">
+                        {KIND_TAG[f.kind] && <Tag>{KIND_TAG[f.kind]}</Tag>}
+                        {f.exists ? (
+                          <>
+                            {f.size !== undefined && <span>{formatSize(f.size)}</span>}
+                            {f.mtime !== undefined && <span>· {relativeTime(f.mtime)}修改</span>}
+                          </>
+                        ) : (
+                          <Tag>未创建</Tag>
+                        )}
+                      </span>
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+            {dirs.length > 0 && (
+              <div className="border-t border-border p-1">
+                {dirs.map((d) =>
+                  creating === d.path ? (
+                    <NewFileForm key={d.path} dir={d.path} onCancel={() => setCreating(null)} onCreate={(p) => (setCreating(null), select(p))} />
+                  ) : (
+                    <Button key={d.path} variant="ghost" size="sm" icon={<PlusSmIcon />} className="w-full justify-start text-accent hover:text-accent" onClick={() => setCreating(d.path)}>
+                      <span className="truncate">在 {d.kind === "auto" ? "自动记忆" : d.label} 新建文件</span>
+                    </Button>
+                  ),
+                )}
+              </div>
+            )}
+          </section>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div>
+      <PageTitle title="记忆与 CLAUDE.md" desc="Claude 每次会话都会读取这些说明。修改直接写入 CLI 的文件。" />
+      {listing.isPending && <Loading />}
+      <ErrorLine error={listing.error} />
+      {listing.data && (
+        <SplitView
+          showDetail={!!selected}
+          listWidth="lg:w-80"
+          list={list}
+          detail={
+            selected ? (
+              <FilePanel key={selected} pid={pid} path={selected} meta={file} onClose={() => select(null)} />
+            ) : (
+              <EmptyState icon={<BrainIcon size={16} />} title="选择左侧的文件查看或编辑">
+                已加载 {existing.length} 个记忆文件，共 {formatSize(totalSize)}。灰色的条目还没有创建，点开即可新建；规则目录和自动记忆目录里也可以新建文件。
+              </EmptyState>
+            )
+          }
+        />
+      )}
+    </div>
+  );
+}
+
+function AutoMemory({ listing, pid }: { listing: MemoryListing; pid?: string }) {
+  const toggle = useCfgMutation((enabled: boolean) => api(cfgUrl("memory/auto", pid), { method: "PUT", json: { enabled } }), ["memory", "settings"]);
+  if (!pid) return null;
+  const on = toggle.isPending ? !!toggle.variables : listing.autoMemory.enabled;
+  const where = listing.autoMemory.scope === "user" ? "用户" : listing.autoMemory.scope === "project" ? "项目共享" : listing.autoMemory.scope ? "项目本地" : null;
+  return (
+    <div className="rounded-xl border border-border bg-surface px-3.5 py-2 shadow-sm">
+      <div className="flex items-center gap-3">
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium">自动记忆</div>
+          <div className="text-xs text-muted">
+            <code className="font-mono">autoMemoryEnabled</code>
+            {where ? `，写在${where}设置` : "，未设置（默认）"}
+          </div>
+        </div>
+        <Toggle label="自动记忆" checked={on} onChange={(v) => toggle.mutate(v)} disabled={toggle.isPending} />
+      </div>
+      <ErrorLine error={toggle.error} />
+    </div>
+  );
+}
+
+function NewFileForm({ dir, onCreate, onCancel }: { dir: string; onCreate: (path: string) => void; onCancel: () => void }) {
+  const [name, setName] = useState("");
+  const { discard, markSaved } = useUnsavedChanges(!!name, "新文件名");
+  const cancel = async () => { if (await discard()) onCancel(); };
+  const clean = name.trim().replace(/\.md$/i, "");
+  const valid = /^[A-Za-z0-9一-鿿][\w一-鿿.-]*$/.test(clean);
+  return (
+    <form
+      className="flex flex-wrap gap-1.5 p-1.5"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (valid) { markSaved(); onCreate(`${dir}/${clean}.md`); }
+      }}
+    >
+      <input autoFocus aria-label="新文件名" placeholder="文件名.md" value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => e.key === "Escape" && void cancel()} className={`${inputCls} flex-1 basis-32`} />
+      <Button type="submit" variant="primary" disabled={!valid}>
+        新建
+      </Button>
+      <Button variant="ghost" onClick={cancel}>
+        取消
+      </Button>
+    </form>
+  );
+}
+
+function FilePanel({ pid, path, meta, onClose }: { pid?: string; path: string; meta?: MemoryFile; onClose: () => void }) {
+  const exists = meta ? meta.exists : false;
+  const file = useCfg<TextFile>("memory/file", pid, { params: { path }, enabled: exists });
+  const [mode, setMode] = useState<Mode>({ kind: "view" });
+  const [draft, setDraft] = useState("");
+  const [original, setOriginal] = useState("");
+  const [confirming, setConfirming] = useState(false);
+  const { discard } = useUnsavedChanges(mode.kind === "edit" && draft !== original, meta?.label ?? path.split("/").pop() ?? path);
+
+  // A file that doesn't exist yet opens straight in the editor.
+  useEffect(() => {
+    if (!exists) setMode((m) => (m.kind === "edit" ? m : { kind: "edit", create: true }));
+  }, [exists]);
+
+  const save = useCfgMutation(
+    () =>
+      api<TextFile>(cfgUrl("memory/file", pid), {
+        method: "PUT",
+        json: { path, content: draft, create: mode.kind === "edit" && mode.create, baseMtime: mode.kind === "edit" && !mode.create ? file.data?.mtime : undefined },
+      }),
+    ["memory", "memory/file"],
+    () => {
+      setMode({ kind: "view" });
+      setConfirming(false);
+    },
+  );
+  const del = useCfgMutation(() => api(cfgUrl("memory/file", pid, { path }), { method: "DELETE" }), ["memory"], onClose);
+
+  const editing = mode.kind === "edit";
+  const cancelEdit = async () => {
+    if (!await discard()) return;
+    setConfirming(false);
+    if (mode.kind === "edit" && mode.create) onClose();
+    else setMode({ kind: "view" });
+  };
+  const lines = file.data ? file.data.content.split("\n").length : 0;
+  return (
+    <Card
+      icon={<FileIcon />}
+      title={meta?.label ?? path.split("/").pop()}
+      sub={path}
+      actions={
+        <>
+          {!editing && exists && (
+            <>
+              <Button
+                size="sm"
+                icon={<PencilIcon />}
+                onClick={() => {
+                  setDraft(file.data?.content ?? "");
+                  setOriginal(file.data?.content ?? "");
+                  setMode({ kind: "edit", create: false });
+                }}
+                disabled={!file.data}
+              >
+                编辑
+              </Button>
+              <ConfirmButton icon={<TrashIcon />} confirmText="删除这个文件？" onConfirm={() => del.mutate(undefined)} disabled={del.isPending}>
+                删除
+              </ConfirmButton>
+            </>
+          )}
+          <Button variant="ghost" size="sm" icon={<ArrowLeftIcon />} onClick={onClose} aria-label="返回列表">
+            <span className="lg:hidden">返回</span>
+            <span className="hidden lg:inline">关闭</span>
+          </Button>
+        </>
+      }
+    >
+      <ErrorLine error={file.error || del.error} />
+      {!editing && exists && file.data && (
+        <p className="-mt-1 mb-3 flex flex-wrap gap-x-3 text-xs text-muted">
+          <span>{lines} 行</span>
+          <span>{formatSize(new Blob([file.data.content]).size)}</span>
+          <span>{relativeTime(file.data.mtime)}修改</span>
+        </p>
+      )}
+      {!editing &&
+        exists &&
+        (file.isPending ? (
+          <Loading rows={5} />
+        ) : (
+          file.data &&
+          (file.data.content.trim() ? (
+            <div data-testid="memory-view">
+              <Markdown text={file.data.content} />
+            </div>
+          ) : (
+            <Empty title="空文件">点“编辑”写入内容。</Empty>
+          ))
+        ))}
+      {!editing && !exists && <Empty title="文件还不存在" />}
+      {editing && (
+        <div className="space-y-2">
+          {mode.create && <p className="text-xs text-muted">新文件：保存后才会创建。</p>}
+          <textarea
+            aria-label="文件内容"
+            value={draft}
+            autoFocus
+            onChange={(e) => {
+              setDraft(e.target.value);
+              setConfirming(false);
+            }}
+            onKeyDown={(e) => e.key === "Escape" && cancelEdit()}
+            rows={16}
+            spellCheck={false}
+            className={`${monoTextareaCls} min-h-64 resize-y`}
+          />
+          <ErrorLine error={save.error} />
+          <div className="flex flex-wrap items-center gap-2">
+            {!confirming ? (
+              <Button variant="primary" onClick={() => setConfirming(true)}>
+                {mode.create ? "创建" : "保存"}
+              </Button>
+            ) : (
+              <span className="inline-flex flex-wrap items-center gap-2" role="group" aria-label="确认保存">
+                <span className="text-sm text-muted">{mode.create ? "创建" : "覆盖写入"}这个文件？</span>
+                <Button variant="primary" onClick={() => save.mutate(undefined)} loading={save.isPending}>
+                  确认{mode.create ? "创建" : "保存"}
+                </Button>
+              </span>
+            )}
+            <Button variant="ghost" onClick={cancelEdit}>
+              取消
+            </Button>
+            <span className="ml-auto text-xs text-muted">{draft.split("\n").length} 行</span>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}