@thaut/claude-ide 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,160 @@
+import { useState } from "react";
+import { useUnsavedChanges } from "../../unsaved.tsx";
+import { PERMISSION_KINDS, SCOPE_LABEL, type PermissionKind, type PermissionLayer, type PermissionOp } 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 { PencilIcon, PlusSmIcon, ShieldIcon, TrashIcon } from "../../ui/icons.tsx";
+import { Card, ConfirmButton, ErrorLine, Loading, NeedProject, PageTitle, Tag, cfgUrl, monoInputCls, useCfg, useCfgMutation, useProjectParam } from "./ui.tsx";
+
+export const KIND_LABEL: Record<PermissionKind, string> = {
+  allow: "总是允许",
+  deny: "总是拒绝",
+  ask: "总是询问",
+  additionalDirectories: "额外目录",
+};
+
+const KIND_HINT: Record<PermissionKind, string> = {
+  allow: "匹配的工具调用直接执行",
+  deny: "匹配的工具调用一律拦下",
+  ask: "匹配时在 CLI 里先询问",
+  additionalDirectories: "项目之外也可读写的目录",
+};
+
+const KIND_TONE: Record<PermissionKind, TagTone> = { allow: "ok", deny: "danger", ask: "warn", additionalDirectories: "neutral" };
+
+const PLACEHOLDER: Record<PermissionKind, string> = {
+  allow: "Bash(npm test:*)",
+  deny: "Read(./.env)",
+  ask: "Bash(git push:*)",
+  additionalDirectories: "/path/to/dir",
+};
+
+export function PermissionsPage() {
+  const pid = useProjectParam();
+  const layers = useCfg<PermissionLayer[]>("permissions", pid);
+  const op = useCfgMutation((body: PermissionOp) => api<PermissionLayer[]>(cfgUrl("permissions", pid), { method: "POST", json: body }), ["permissions", "settings"]);
+
+  return (
+    <div>
+      <PageTitle
+        title="权限规则"
+        desc={
+          <>
+            settings 里的 <code className="font-mono">permissions</code>。网页会话以“全部放行”运行，deny 规则在 CLI 和工作区模式中生效。规则写法如{" "}
+            <code className="font-mono">Bash(npm run:*)</code>、<code className="font-mono">Edit(src/**)</code>。
+          </>
+        }
+      />
+      {layers.isPending && <Loading />}
+      <ErrorLine error={layers.error || op.error} />
+      {!pid && <NeedProject />}
+      {layers.data?.map((l) => {
+        const total = PERMISSION_KINDS.reduce((n, k) => n + l.lists[k].length, 0);
+        return (
+          <Card
+            key={l.scope}
+            icon={<ShieldIcon />}
+            title={SCOPE_LABEL[l.scope]}
+            count={total}
+            sub={l.path}
+            testId={`perm-layer-${l.scope}`}
+            actions={
+!l.exists && <Tag>文件未创建</Tag>
+            }
+          >
+            {total === 0 ? (
+              <p className="pb-1 text-sm text-muted">这一层还没有规则。在下面选好类型、写上规则即可添加；文件不存在时会自动创建。</p>
+            ) : (
+              <div className="grid gap-x-6 gap-y-4 md:grid-cols-2">
+                {PERMISSION_KINDS.filter((k) => l.lists[k].length).map((k) => (
+                  <div key={k} className="min-w-0">
+                    <div className="mb-1.5 flex items-center gap-2">
+                      <Tag tone={KIND_TONE[k]}>{KIND_LABEL[k]}</Tag>
+                      <span className="text-xs tabular-nums text-muted">{l.lists[k].length}</span>
+                      <span className="hidden truncate text-xs text-muted sm:inline">· {KIND_HINT[k]}</span>
+                    </div>
+                    <ul className="divide-y divide-border rounded-lg border border-border">
+                      {l.lists[k].map((rule) => (
+                        <RuleRow key={rule} rule={rule} busy={op.isPending} onRemove={() => op.mutate({ scope: l.scope, kind: k, op: "remove", value: rule })} onReplace={(v) => op.mutate({ scope: l.scope, kind: k, op: "replace", old: rule, value: v })} />
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            )}
+            <AddRule onAdd={(kind, value) => op.mutateAsync({ scope: l.scope, kind, op: "add", value })} busy={op.isPending} />
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
+
+function RuleRow({ rule, onRemove, onReplace, busy }: { rule: string; onRemove: () => void; onReplace: (v: string) => void; busy: boolean }) {
+  const [edit, setEdit] = useState<string | null>(null);
+  const { discard } = useUnsavedChanges(edit !== null && edit !== rule, "权限规则");
+  const cancel = async () => { if (await discard()) setEdit(null); };
+  if (edit !== null)
+    return (
+      <li className="p-1.5">
+        <form
+          className="flex flex-wrap gap-1.5"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (edit.trim() && edit.trim() !== rule) onReplace(edit.trim());
+            setEdit(null);
+          }}
+        >
+          <input autoFocus aria-label="修改规则" value={edit} onChange={(e) => setEdit(e.target.value)} onKeyDown={(e) => e.key === "Escape" && void cancel()} className={`${monoInputCls} flex-1 basis-48`} />
+          <Button type="submit" variant="primary" size="sm" className="h-10 md:h-8">
+            保存
+          </Button>
+          <Button variant="ghost" size="sm" className="h-10 md:h-8" onClick={cancel}>
+            取消
+          </Button>
+        </form>
+      </li>
+    );
+  return (
+    <li className="group flex flex-wrap items-center gap-1 py-1 pl-3 pr-1" data-rule={rule}>
+      <code className="min-w-0 flex-1 break-all py-1 font-mono text-[13px]">{rule}</code>
+      <Button variant="ghost" size="sm" icon={<PencilIcon />} onClick={() => setEdit(rule)} disabled={busy}>
+        修改
+      </Button>
+      <ConfirmButton variant="ghost" icon={<TrashIcon />} confirmText="删除？" onConfirm={onRemove} disabled={busy} label={`删除 ${rule}`}>
+        删除
+      </ConfirmButton>
+    </li>
+  );
+}
+
+function AddRule({ onAdd, busy }: { onAdd: (kind: PermissionKind, value: string) => Promise<unknown>; busy: boolean }) {
+  const [kind, setKind] = useState<PermissionKind>("allow");
+  const [value, setValue] = useState("");
+  const { discard } = useUnsavedChanges(!!value, "新权限规则");
+  const cancel = async () => { if (await discard()) setValue(""); };
+  return (
+    <form
+      className="mt-3 flex flex-wrap gap-2 border-t border-border pt-3"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (value.trim()) onAdd(kind, value.trim()).then(() => setValue(""), () => {});
+      }}
+    >
+      <Select<PermissionKind>
+        label="规则类型"
+        value={kind}
+        onChange={setKind}
+        className="w-full sm:w-36"
+        menuWidth={260}
+        options={PERMISSION_KINDS.map((k) => ({ value: k, label: KIND_LABEL[k], text: KIND_LABEL[k], hint: KIND_HINT[k] }))}
+      />
+      <input aria-label="新规则" placeholder={PLACEHOLDER[kind]} value={value} onChange={(e) => setValue(e.target.value)} onKeyDown={(e) => e.key === "Escape" && void cancel()} className={`${monoInputCls} flex-1 basis-48`} />
+      <Button type="submit" variant="primary" icon={<PlusSmIcon />} disabled={!value.trim() || busy}>
+        添加
+      </Button>
+    </form>
+  );
+}

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

@@ -0,0 +1,251 @@
+import { useState } from "react";
+import type { AvailablePlugin, PluginActionResult, PluginListing, SettingsScope } from "@shared/config.ts";
+import { api, ApiError } from "../../api.ts";
+import { Button } from "../../ui/Button.tsx";
+import { CheckIcon, PlusSmIcon, PuzzleIcon, RefreshIcon, SearchIcon, TrashIcon, XIcon } from "../../ui/icons.tsx";
+import { Card, ConfirmButton, Empty, ErrorLine, Field, Loading, PageTitle, ScopeBadge, ScopeSelect, Tag, Toggle, cfgUrl, inputCls, monoInputCls, useCfg, useCfgMutation, useProjectParam } from "./ui.tsx";
+
+type Action = { action: "install" | "uninstall" | "enable" | "disable" | "update"; plugin: string; scope?: string; acceptCommand?: string };
+
+/** Runs a plugin command; a non-ok result becomes an error unless it asks for confirmation. */
+async function runAction(pid: string | undefined, a: Action): Promise<PluginActionResult> {
+  const r = await api<PluginActionResult>(cfgUrl("plugins", pid), { method: "POST", json: a });
+  if (!r.ok && !r.confirm) throw new ApiError(400, r.message);
+  return r;
+}
+
+export function PluginsPage() {
+  const pid = useProjectParam();
+  const listing = useCfg<PluginListing>("plugins", pid);
+  const act = useCfgMutation((a: Action) => runAction(pid, a), ["plugins", "skills"]);
+  const installed = listing.data?.installed ?? [];
+  const enabledCount = installed.filter((p) => p.enabled).length;
+
+  return (
+    <div>
+      <PageTitle title="插件" desc="通过 claude plugin 命令安装、启用、停用和卸载。改动对新会话生效。" />
+      {listing.isPending && <Loading />}
+      <ErrorLine error={listing.error} />
+      {listing.data && (
+        <>
+          <Card
+            icon={<PuzzleIcon />}
+            title="已安装"
+            count={installed.length}
+            actions={installed.length > 0 && <span className="text-xs text-muted">{enabledCount} 个启用中</span>}
+            flush
+          >
+            {installed.length === 0 && (
+              <div className="p-4">
+                <Empty title="还没有安装插件">先在下面添加一个插件市场，再从“安装插件”里挑选。插件可以带来技能、agent、钩子和 MCP 服务器。</Empty>
+              </div>
+            )}
+            <ul className="divide-y divide-border">
+              {installed.map((p) => {
+                const pending = act.isPending && act.variables?.plugin === p.id;
+                return (
+                  <li key={`${p.scope}:${p.id}`} className="px-4 py-3" data-testid="plugin" data-id={p.id}>
+                    <div className="flex min-w-0 items-center gap-2">
+                      <span className="min-w-0 truncate font-medium" title={p.id}>
+                        {p.id}
+                      </span>
+                      <span className="ml-auto" />
+                      <Toggle
+                        label={`启用 ${p.id}`}
+                        checked={pending && (act.variables!.action === "enable" || act.variables!.action === "disable") ? act.variables!.action === "enable" : p.enabled}
+                        onChange={(v) => act.mutate({ action: v ? "enable" : "disable", plugin: p.id, scope: p.scope })}
+                        disabled={act.isPending}
+                      />
+                    </div>
+                    <div className="mt-1 flex flex-wrap items-center gap-1.5">
+                      <ScopeBadge scope={p.scope} />
+                      {p.version && <Tag mono>v{p.version}</Tag>}
+                      <Tag tone={p.enabled ? "ok" : "neutral"}>{p.enabled ? "已启用" : "已停用"}</Tag>
+                    </div>
+                    {p.description && <p className="mt-1.5 text-sm text-muted">{p.description}</p>}
+                    <div className="mt-2 flex flex-wrap gap-1.5">
+                      <Button size="sm" icon={<RefreshIcon />} onClick={() => act.mutate({ action: "update", plugin: p.id, scope: p.scope })} disabled={act.isPending} loading={pending && act.variables?.action === "update"}>
+                        更新
+                      </Button>
+                      <ConfirmButton icon={<TrashIcon />} confirmText="卸载这个插件？" onConfirm={() => act.mutate({ action: "uninstall", plugin: p.id, scope: p.scope })} disabled={act.isPending} label={`卸载 ${p.id}`}>
+                        卸载
+                      </ConfirmButton>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+            {(act.error || act.data?.ok) && (
+              <div className="border-t border-border px-4 py-2">
+                <ErrorLine error={act.error} />
+                {act.data && act.data.ok && (
+                  <p className="flex items-center gap-1.5 text-sm text-ok" role="status">
+                    <CheckIcon /> {act.data.message}
+                  </p>
+                )}
+              </div>
+            )}
+          </Card>
+          <Marketplaces pid={pid} listing={listing.data} />
+          <Browse pid={pid} installed={new Set(installed.map((p) => p.id))} hasMarkets={listing.data.marketplaces.length > 0} />
+        </>
+      )}
+    </div>
+  );
+}
+
+type MktAction = { action: "add" | "remove" | "update"; source?: string; name?: string; scope?: string };
+
+function Marketplaces({ pid, listing }: { pid?: string; listing: PluginListing }) {
+  const [source, setSource] = useState("");
+  const act = useCfgMutation(
+    async (a: MktAction) => {
+      const r = await api<PluginActionResult>(cfgUrl("marketplaces", pid), { method: "POST", json: a });
+      if (!r.ok) throw new ApiError(400, r.message);
+      return r;
+    },
+    ["plugins", "plugins/available"],
+    (_r, a) => a.action === "add" && setSource(""),
+  );
+  return (
+    <Card title="插件市场（marketplace）" count={listing.marketplaces.length} flush>
+      {listing.marketplaces.length === 0 && (
+        <p className="px-4 pt-3 text-sm text-muted">还没有添加插件市场。市场是一个列出插件的仓库，填 GitHub 的 owner/repo、git 地址、URL 或本地路径即可添加。</p>
+      )}
+      <ul className="divide-y divide-border">
+        {listing.marketplaces.map((m) => {
+          const kind = m.repo ? "GitHub" : m.url ? "URL" : m.path ? "本地" : m.source;
+          return (
+            <li key={m.name} className="flex flex-wrap items-center gap-2 px-4 py-2.5" data-testid="marketplace" data-name={m.name}>
+              <div className="min-w-0 flex-1 basis-48">
+                <div className="flex items-center gap-2">
+                  <span className="truncate font-medium">{m.name}</span>
+                  {kind && <Tag>{kind}</Tag>}
+                </div>
+                <div className="truncate font-mono text-xs text-muted" title={m.repo ?? m.url ?? m.path ?? m.source}>
+                  {m.repo ?? m.url ?? m.path ?? m.source}
+                </div>
+              </div>
+              <Button size="sm" icon={<RefreshIcon />} onClick={() => act.mutate({ action: "update", name: m.name })} disabled={act.isPending} loading={act.isPending && act.variables?.name === m.name && act.variables.action === "update"}>
+                更新
+              </Button>
+              <ConfirmButton icon={<TrashIcon />} confirmText="移除这个市场？" onConfirm={() => act.mutate({ action: "remove", name: m.name })} disabled={act.isPending} label={`移除市场 ${m.name}`}>
+                移除
+              </ConfirmButton>
+            </li>
+          );
+        })}
+      </ul>
+      <form
+        className="flex flex-wrap gap-2 border-t border-border px-4 py-3"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (source.trim()) act.mutate({ action: "add", source: source.trim() });
+        }}
+      >
+        <input aria-label="市场来源" placeholder="owner/repo、git 地址、URL 或本地路径" value={source} onChange={(e) => setSource(e.target.value)} onKeyDown={(e) => e.key === "Escape" && setSource("")} className={`${monoInputCls} flex-1 basis-56`} />
+        <Button type="submit" variant="primary" icon={<PlusSmIcon />} disabled={!source.trim()} loading={act.isPending && act.variables?.action === "add"}>
+          {act.isPending && act.variables?.action === "add" ? "添加中…" : "添加市场"}
+        </Button>
+      </form>
+      {act.error ? (
+        <div className="px-4 pb-3">
+          <ErrorLine error={act.error} />
+        </div>
+      ) : null}
+    </Card>
+  );
+}
+
+function Browse({ pid, installed, hasMarkets }: { pid?: string; installed: Set<string>; hasMarkets: boolean }) {
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState("");
+  const [scope, setScope] = useState<SettingsScope>("user");
+  const available = useCfg<AvailablePlugin[]>("plugins/available", pid, { enabled: open });
+  const [confirm, setConfirm] = useState<{ plugin: string; result: PluginActionResult } | null>(null);
+  const install = useCfgMutation(
+    (a: Action) => runAction(pid, a),
+    ["plugins", "skills"],
+    (r, a) => setConfirm(r.confirm ? { plugin: a.plugin, result: r } : null),
+  );
+  const all = available.data ?? [];
+  const items = all.filter((p) => !q || `${p.name} ${p.description ?? ""}`.toLowerCase().includes(q.toLowerCase())).slice(0, 100);
+
+  return (
+    <Card
+      title="安装插件"
+      count={open && available.data ? all.length : undefined}
+      actions={
+        open ? (
+          <Button variant="ghost" size="sm" iconOnly aria-label="收起" title="收起" onClick={() => setOpen(false)}>
+            <XIcon />
+          </Button>
+        ) : (
+          <Button size="sm" icon={<SearchIcon />} onClick={() => setOpen(true)}>
+            浏览
+          </Button>
+        )
+      }
+    >
+      {!open && <p className="text-sm text-muted">{hasMarkets ? "从已添加的市场里查找插件，选择安装到哪一层。" : "先添加一个插件市场，然后在这里浏览它提供的插件。"}</p>}
+      {open && (
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-end gap-2">
+            <Field label="搜索" className="flex-1 basis-48">
+              <span className="relative block">
+                <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted" />
+                <input autoFocus aria-label="搜索插件" placeholder="名称或说明" value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Escape" && (q ? setQ("") : setOpen(false))} className={`${inputCls} pl-8`} />
+              </span>
+            </Field>
+            <Field group label="安装到" className="w-full sm:w-48">
+              <ScopeSelect label="安装到" value={scope} onChange={setScope} scopes={pid ? ["user", "project", "local"] : ["user"]} />
+            </Field>
+          </div>
+          {available.isPending && <Loading />}
+          <ErrorLine error={available.error || install.error} />
+          {confirm?.result.confirm && (
+            <div className="rounded-lg border border-amber-500/50 bg-amber-500/5 p-3 text-sm" role="alert">
+              <p className="font-medium">{confirm.plugin} 需要执行插件市场声明的命令：</p>
+              <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-all rounded bg-surface-2 p-2 font-mono text-xs">
+                {typeof confirm.result.confirm.command === "string" ? confirm.result.confirm.command : JSON.stringify(confirm.result.confirm.command, null, 2)}
+              </pre>
+              <p className="mt-1 break-all text-xs text-muted">sha256 {confirm.result.confirm.sha256}</p>
+              <div className="mt-2 flex gap-2">
+                <Button variant="primary" size="sm" onClick={() => install.mutate({ action: "install", plugin: confirm.plugin, scope, acceptCommand: confirm.result.confirm!.sha256 })}>
+                  确认并安装
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => setConfirm(null)}>
+                  取消
+                </Button>
+              </div>
+            </div>
+          )}
+          {available.data && items.length === 0 && <Empty title={q ? "没有找到匹配的插件" : "市场里还没有插件"}>{q ? "换个关键词试试。" : "确认市场地址正确，或点市场旁的“更新”。"}</Empty>}
+          <ul className="divide-y divide-border rounded-lg border border-border empty:hidden">
+            {items.map((p) => (
+              <li key={p.pluginId} className="flex flex-wrap items-start gap-2 px-3 py-2.5">
+                <div className="min-w-0 flex-1 basis-48">
+                  <div className="flex flex-wrap items-center gap-1.5 text-sm font-medium">
+                    <span className="break-all">{p.name}</span>
+                    <Tag>@{p.marketplaceName}</Tag>
+                    {p.installCount !== undefined && <span className="text-xs font-normal text-muted">{p.installCount} 次安装</span>}
+                  </div>
+                  {p.description && <p className="mt-0.5 line-clamp-2 text-xs text-muted">{p.description}</p>}
+                </div>
+                {installed.has(p.pluginId) ? (
+                  <Tag tone="ok" icon={<CheckIcon size={11} />}>
+                    已安装
+                  </Tag>
+                ) : (
+                  <Button size="sm" icon={<PlusSmIcon />} onClick={() => install.mutate({ action: "install", plugin: p.pluginId, scope })} disabled={install.isPending} loading={install.isPending && install.variables?.plugin === p.pluginId} aria-label={`安装 ${p.pluginId}`}>
+                    {install.isPending && install.variables?.plugin === p.pluginId ? "安装中…" : "安装"}
+                  </Button>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </Card>
+  );
+}

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

@@ -0,0 +1,141 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { Navigate, NavLink, Route, Routes, useLocation, useNavigate, useSearchParams } from "react-router";
+import { useProjects } from "../../hooks.ts";
+import { cx } from "../../ui/Button.tsx";
+import { Select } from "../../ui/Select.tsx";
+import { BotIcon, BrainIcon, FolderIcon, GearIcon, HookIcon, PuzzleIcon, ServerIcon, ShieldIcon, SlidersIcon, SparkIcon, UserIcon } from "../../ui/icons.tsx";
+import { GeneralPage } from "./GeneralPage.tsx";
+import { MemoryPage } from "./MemoryPage.tsx";
+import { PermissionsPage } from "./PermissionsPage.tsx";
+import { McpPage } from "./McpPage.tsx";
+import { PluginsPage } from "./PluginsPage.tsx";
+import { SkillsPage } from "./SkillsPage.tsx";
+import { HooksPage } from "./HooksPage.tsx";
+import { AgentsPage } from "./AgentsPage.tsx";
+import { ConfigPage } from "./ConfigPage.tsx";
+import { AccountPage } from "./AccountPage.tsx";
+
+export const SETTINGS_SECTIONS = [
+  { path: "general", label: "通用", cmd: "" },
+  { path: "memory", label: "记忆", cmd: "/memory" },
+  { path: "permissions", label: "权限规则", cmd: "/permissions" },
+  { path: "mcp", label: "MCP", cmd: "/mcp" },
+  { path: "plugins", label: "插件", cmd: "/plugin" },
+  { path: "skills", label: "技能", cmd: "/skills" },
+  { path: "hooks", label: "钩子", cmd: "/hooks" },
+  { path: "agents", label: "Agents", cmd: "/agents" },
+  { path: "config", label: "设置", cmd: "/config" },
+  { path: "account", label: "账号与状态", cmd: "/usage /status /doctor" },
+] as const;
+
+const ICON: Record<(typeof SETTINGS_SECTIONS)[number]["path"], ReactNode> = {
+  general: <GearIcon />,
+  memory: <BrainIcon />,
+  permissions: <ShieldIcon />,
+  mcp: <ServerIcon />,
+  plugins: <PuzzleIcon />,
+  skills: <SparkIcon />,
+  hooks: <HookIcon />,
+  agents: <BotIcon />,
+  config: <SlidersIcon />,
+  account: <UserIcon />,
+};
+
+/** Global settings area: `/settings/<section>?p=<project id>`. */
+export function SettingsPage() {
+  const [sp] = useSearchParams();
+  const { pathname } = useLocation();
+  const general = /^\/settings(?:\/general)?\/?$/.test(pathname);
+  const pid = sp.get("p") ?? "";
+  const qs = pid ? `?p=${encodeURIComponent(pid)}` : "";
+
+  return (
+    <main className="min-h-0 min-w-0 flex-1 overflow-y-auto">
+      <div className="mx-auto max-w-6xl px-4 pb-24 pt-5 md:px-8 md:pt-8">
+        <div className="mb-4 flex flex-wrap items-center gap-x-4 gap-y-2 md:mb-6">
+          <div className="mr-auto min-w-0">
+            <h1 className="text-3xl">设置</h1>
+            <p className="mt-0.5 text-xs text-muted">{general ? "界面偏好保存在当前浏览器。" : "直接读写 Claude CLI 的配置文件，改动在 CLI 里同样生效。"}</p>
+          </div>
+          {!general && <ProjectPicker pid={pid} />}
+        </div>
+        <div className="md:flex md:gap-8">
+          <SectionNav qs={qs} />
+          <div className="min-w-0 flex-1">
+            <Routes key={pid}>
+              <Route path="general" element={<GeneralPage />} />
+              <Route path="memory" element={<MemoryPage />} />
+              <Route path="permissions" element={<PermissionsPage />} />
+              <Route path="mcp" element={<McpPage />} />
+              <Route path="plugins" element={<PluginsPage />} />
+              <Route path="skills" element={<SkillsPage />} />
+              <Route path="hooks" element={<HooksPage />} />
+              <Route path="agents" element={<AgentsPage />} />
+              <Route path="config" element={<ConfigPage />} />
+              <Route path="account" element={<AccountPage />} />
+              <Route path="*" element={<Navigate to={`/settings/general${qs}`} replace />} />
+            </Routes>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+/** Vertical list on desktop; a horizontally scrolling strip on phones (the page itself never scrolls sideways). */
+function SectionNav({ qs }: { qs: string }) {
+  const ref = useRef<HTMLElement>(null);
+  const { pathname } = useLocation();
+  useEffect(() => {
+    ref.current?.querySelector('[aria-current="page"]')?.scrollIntoView({ block: "nearest", inline: "center" });
+  }, [pathname]);
+  return (
+    <nav
+      ref={ref}
+      aria-label="设置分类"
+      className="-mx-4 mb-5 flex gap-1 overflow-x-auto px-4 pb-1 [scrollbar-width:none] md:sticky md:top-0 md:mx-0 md:mb-0 md:w-48 md:shrink-0 md:flex-col md:self-start md:overflow-visible md:px-0 [&::-webkit-scrollbar]:hidden"
+    >
+      {SETTINGS_SECTIONS.map((s) => (
+        <NavLink
+          key={s.path}
+          to={`/settings/${s.path}${qs}`}
+          title={s.cmd || undefined}
+          className={({ isActive }) =>
+            cx(
+              "flex h-10 shrink-0 items-center gap-2 whitespace-nowrap rounded-md border px-3 text-sm transition-colors md:h-8 md:px-2.5",
+              isActive ? "border-border bg-surface font-medium text-text shadow-sm" : "border-transparent text-muted hover:bg-surface-2 hover:text-text",
+            )
+          }
+        >
+          <span className="shrink-0" aria-hidden>
+            {ICON[s.path]}
+          </span>
+          {s.label}
+        </NavLink>
+      ))}
+    </nav>
+  );
+}
+
+function ProjectPicker({ pid }: { pid: string }) {
+  const projects = useProjects();
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <div className="flex w-full min-w-0 items-center gap-2 text-sm sm:w-auto">
+      <span className="shrink-0 text-xs text-muted">项目级配置</span>
+      <Select
+        label="配置所属项目"
+        value={pid}
+        icon={<FolderIcon className="shrink-0 text-muted" />}
+        className="min-w-0 flex-1 sm:w-64 sm:flex-none"
+        menuWidth={320}
+        onChange={(v) => navigate(`${location.pathname}${v ? `?p=${encodeURIComponent(v)}` : ""}`)}
+        options={[
+          { value: "", label: "仅用户级", text: "仅用户级", hint: "只看 ~/.claude 下的配置" },
+          ...(projects.data ?? []).map((p) => ({ value: p.id, label: p.name, text: p.name, hint: <span className="font-mono">{p.path}</span> })),
+        ]}
+      />
+    </div>
+  );
+}