march-control-cli 0.1.3

package/src/App.tsx

@@ -0,0 +1,1186 @@
+import { useState } from "react";
+import {
+  ArrowDownToLine,
+  Bot,
+  Check,
+  CircleUserRound,
+  FileStack,
+  Plus,
+  RefreshCw,
+  Sparkles,
+  SquarePen,
+  Trash2,
+  X
+} from "lucide-react";
+import { useControlWorkspace } from "./hooks/use-control-workspace";
+import { workspaceSections } from "./lib/workspace-sections";
+import type { PlatformId, Provider } from "./types";
+
+const emptyForm = { name: "", baseUrl: "", apiKey: "", model: "gpt-5.4" };
+const allPlatforms: PlatformId[] = ["codex", "opencode", "openclaw"];
+
+type McpEditorForm = {
+  kind: "mcp";
+  id?: string;
+  name: string;
+  description: string;
+  tags: string;
+  homepage: string;
+  enabledPlatforms: PlatformId[];
+  error: string | null;
+};
+
+type PromptEditorForm = {
+  kind: "prompt";
+  id?: string;
+  name: string;
+  description: string;
+  content: string;
+  appType: "global" | PlatformId;
+  enabled: boolean;
+  error: string | null;
+};
+
+type SkillEditorForm = {
+  kind: "skill";
+  id?: string;
+  name: string;
+  description: string;
+  directory: string;
+  enabledPlatforms: PlatformId[];
+  error: string | null;
+};
+
+type ResourceEditorForm = McpEditorForm | PromptEditorForm | SkillEditorForm;
+
+type DeleteConfirmState =
+  | { kind: "mcp"; id: string; name: string }
+  | { kind: "prompt"; id: string; name: string }
+  | { kind: "skill"; id: string; name: string };
+
+function cx(...parts: Array<string | false | null | undefined>) {
+  return parts.filter(Boolean).join(" ");
+}
+
+function tone(id: PlatformId) {
+  if (id === "openclaw") return { soft: "bg-[#f97316]/10 text-[#f97316]", line: "border-[#f97316]/20" };
+  if (id === "opencode") return { soft: "bg-[#14b8a6]/10 text-[#0f766e]", line: "border-[#14b8a6]/20" };
+  return { soft: "bg-[#1677ff]/10 text-[#1677ff]", line: "border-[#1677ff]/20" };
+}
+
+function timeText(value: string) {
+  return new Date(value).toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+}
+
+function shortUrl(value: string) {
+  try {
+    const u = new URL(value);
+    return `${u.origin}${u.pathname === "/" ? "" : u.pathname}`;
+  } catch {
+    return value;
+  }
+}
+
+function providerArt(provider: Provider, platformId: PlatformId) {
+  const name = provider.name.toLowerCase();
+  const url = provider.baseUrl.toLowerCase();
+  if (name.includes("openai") || url.includes("openai.com")) return { src: "/assets/openai-small.svg", alt: "OpenAI" };
+  if (platformId === "openclaw" || name.includes("openclaw") || name.includes("lobster")) {
+    return { src: "/assets/pixel-lobster.svg", alt: "OpenClaw" };
+  }
+  return null;
+}
+
+function platformArt(platformId: PlatformId) {
+  if (platformId === "codex") return <img src="/assets/openai-small.svg" alt="Codex" className="h-5 w-5 object-contain" />;
+  if (platformId === "openclaw") return <img src="/assets/pixel-lobster.svg" alt="OpenClaw" className="h-5 w-5 object-contain" />;
+  return <Bot className="h-4 w-4 text-slate-600" />;
+}
+
+function promptScopeLabel(scope: "global" | PlatformId) {
+  if (scope === "global") return "全局";
+  if (scope === "codex") return "Codex";
+  if (scope === "opencode") return "OpenCode";
+  return "OpenClaw";
+}
+
+function platformLabel(id: PlatformId) {
+  if (id === "codex") return "Codex";
+  if (id === "opencode") return "OpenCode";
+  return "OpenClaw";
+}
+
+function BrandMark() {
+  return (
+    <div className="relative grid h-14 w-14 place-items-center overflow-hidden rounded-[20px] bg-[linear-gradient(160deg,#ff8a1f_0%,#ff6b1a_52%,#ffb347_100%)] shadow-[0_20px_48px_rgba(249,115,22,0.28)] ring-1 ring-[#fdba74]">
+      <div className="absolute inset-[6px] rounded-[16px] bg-[linear-gradient(180deg,rgba(255,255,255,0.24),rgba(255,255,255,0.04))]" />
+      <svg viewBox="0 0 64 64" className="relative h-8 w-8" fill="none" aria-hidden="true">
+        <path d="M14 47V20.5c0-1.38 1.12-2.5 2.5-2.5h1.9c1.03 0 1.99.51 2.58 1.35L32 35.1l11.02-15.75A3.13 3.13 0 0 1 45.58 18h1.92c1.38 0 2.5 1.12 2.5 2.5V47" stroke="white" strokeWidth="5.2" strokeLinecap="round" strokeLinejoin="round" />
+        <circle cx="49.5" cy="16.5" r="4.5" fill="#fff1e6" />
+      </svg>
+    </div>
+  );
+}
+
+export default function App() {
+  const workspace = useControlWorkspace();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [candidateProbeText, setCandidateProbeText] = useState<string | null>(null);
+  const [targetPathMessage, setTargetPathMessage] = useState<string | null>(null);
+  const [resourceEditor, setResourceEditor] = useState<ResourceEditorForm | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<DeleteConfirmState | null>(null);
+
+  if (!workspace.snapshot || !workspace.platform) {
+    return <div className="flex min-h-screen items-center justify-center text-slate-400">正在加载工作区...</div>;
+  }
+
+  const platform = workspace.platform;
+  const styles = tone(platform.id);
+  const providers = platform.providers;
+  const active = providers.find((item) => item.isActive) ?? providers[0] ?? null;
+  const probes = workspace.probeQuery.data ?? [];
+  const editing = providers.some((item) => item.name.trim().toLowerCase() === workspace.editorForm.name.trim().toLowerCase());
+  const activeSection = workspace.activeSection;
+  const mcpServers = workspace.snapshot.mcpServers;
+  const prompts = workspace.snapshot.prompts.filter((item) => item.appType === "global" || item.appType === platform.id);
+  const skills = workspace.snapshot.skills.filter((item) => item.enabledPlatforms.includes(platform.id));
+  const skillRepos = workspace.snapshot.skillRepos;
+  const models = workspace.snapshot.models.length > 0 ? workspace.snapshot.models : [emptyForm.model];
+
+  function openCreate() {
+    setResourceEditor(null);
+    workspace.setEditorForm({ ...emptyForm, model: models[0] ?? emptyForm.model });
+    setCandidateProbeText(null);
+    setDialogOpen(true);
+  }
+
+  function openImport() {
+    setResourceEditor(null);
+    workspace.setEditorForm({
+      name: active?.name || "default",
+      baseUrl: active?.baseUrl || "",
+      apiKey: "",
+      model: active?.model || models[0] || emptyForm.model
+    });
+    setCandidateProbeText(null);
+    setDialogOpen(true);
+  }
+
+  function openEdit(provider: Provider) {
+    setResourceEditor(null);
+    workspace.openProvider(provider);
+    setCandidateProbeText(null);
+    setDialogOpen(true);
+  }
+
+  function closeDialog() {
+    setDialogOpen(false);
+    setCandidateProbeText(null);
+    workspace.setEditorForm({ ...emptyForm, model: models[0] ?? emptyForm.model });
+  }
+
+  function submit() {
+    workspace.saveMutation.mutate(
+      { platform: platform.id, ...workspace.editorForm },
+      {
+        onSuccess: () => closeDialog()
+      }
+    );
+  }
+
+  async function probeCandidateBaseUrl() {
+    if (!workspace.editorForm.baseUrl.trim()) {
+      setCandidateProbeText("请先输入基础地址");
+      return;
+    }
+    setCandidateProbeText("正在测试...");
+    try {
+      const response = await workspace.probeCandidateMutation.mutateAsync({ platform: platform.id, baseUrl: workspace.editorForm.baseUrl });
+      if (!response.result) {
+        setCandidateProbeText("未返回测速结果");
+      } else if (response.result.ok) {
+        setCandidateProbeText(`可连通，延迟 ${response.result.latency} ms`);
+      } else {
+        setCandidateProbeText(`不可用：${response.result.error || "未知错误"}`);
+      }
+    } catch (error) {
+      setCandidateProbeText(error instanceof Error ? error.message : "测试失败");
+    }
+  }
+
+  async function openTargetPath(targetPath: string) {
+    try {
+      const response = await workspace.openPathMutation.mutateAsync({ targetPath });
+      setTargetPathMessage(`已打开：${response.targetPath}`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "打开失败";
+      setTargetPathMessage(`打开失败：${message}`);
+    }
+  }
+
+  function closeResourceEditor() {
+    setResourceEditor(null);
+  }
+
+  function toggleResourcePlatform(target: PlatformId) {
+    setResourceEditor((current) => {
+      if (!current || (current.kind !== "mcp" && current.kind !== "skill")) {
+        return current;
+      }
+
+      const enabledPlatforms = current.enabledPlatforms.includes(target)
+        ? current.enabledPlatforms.filter((item) => item !== target)
+        : [...current.enabledPlatforms, target];
+
+      return { ...current, enabledPlatforms, error: null };
+    });
+  }
+
+  function openMcpEditor(server?: (typeof mcpServers)[number]) {
+    setDialogOpen(false);
+    setResourceEditor({
+      kind: "mcp",
+      id: server?.id,
+      name: server?.name || "",
+      description: server?.description || "",
+      tags: (server?.tags || []).join(", "),
+      homepage: server?.homepage || "",
+      enabledPlatforms: server?.enabledPlatforms?.length ? [...server.enabledPlatforms] : [...allPlatforms],
+      error: null
+    });
+  }
+
+  function openDeleteConfirm(next: DeleteConfirmState) {
+    setDialogOpen(false);
+    setResourceEditor(null);
+    setDeleteConfirm(next);
+  }
+
+  function closeDeleteConfirm() {
+    setDeleteConfirm(null);
+  }
+
+  function removeMcp(serverId: string, name: string) {
+    openDeleteConfirm({ kind: "mcp", id: serverId, name });
+  }
+
+  function openPromptEditor(prompt?: (typeof prompts)[number]) {
+    setDialogOpen(false);
+    setResourceEditor({
+      kind: "prompt",
+      id: prompt?.id,
+      name: prompt?.name || "",
+      description: prompt?.description || "",
+      content: prompt?.content || "",
+      appType: prompt?.appType || "global",
+      enabled: prompt?.enabled ?? true,
+      error: null
+    });
+  }
+
+  function removePrompt(promptId: string, name: string) {
+    openDeleteConfirm({ kind: "prompt", id: promptId, name });
+  }
+
+  function openSkillEditor(skill?: (typeof skills)[number]) {
+    setDialogOpen(false);
+    setResourceEditor({
+      kind: "skill",
+      id: skill?.id,
+      name: skill?.name || "",
+      description: skill?.description || "",
+      directory: skill?.directory || "",
+      enabledPlatforms: skill?.enabledPlatforms?.length ? [...skill.enabledPlatforms] : [...allPlatforms],
+      error: null
+    });
+  }
+
+  function removeSkill(skillId: string, name: string) {
+    openDeleteConfirm({ kind: "skill", id: skillId, name });
+  }
+
+  function confirmDelete() {
+    if (!deleteConfirm) return;
+    if (deleteConfirm.kind === "mcp") {
+      workspace.deleteMcpMutation.mutate({ serverId: deleteConfirm.id }, { onSuccess: () => closeDeleteConfirm() });
+      return;
+    }
+    if (deleteConfirm.kind === "prompt") {
+      workspace.deletePromptMutation.mutate({ promptId: deleteConfirm.id }, { onSuccess: () => closeDeleteConfirm() });
+      return;
+    }
+    workspace.deleteSkillMutation.mutate({ skillId: deleteConfirm.id }, { onSuccess: () => closeDeleteConfirm() });
+  }
+
+  function submitResourceEditor() {
+    if (!resourceEditor) return;
+
+    if (resourceEditor.kind === "mcp") {
+      if (!resourceEditor.name.trim()) {
+        setResourceEditor({ ...resourceEditor, error: "请填写 MCP 名称" });
+        return;
+      }
+      if (!resourceEditor.description.trim()) {
+        setResourceEditor({ ...resourceEditor, error: "请填写 MCP 描述" });
+        return;
+      }
+      if (resourceEditor.enabledPlatforms.length === 0) {
+        setResourceEditor({ ...resourceEditor, error: "请至少选择一个启用平台" });
+        return;
+      }
+
+      const tags = resourceEditor.tags
+        .split(",")
+        .map((item) => item.trim())
+        .filter(Boolean);
+      workspace.upsertMcpMutation.mutate(
+        {
+          id: resourceEditor.id,
+          name: resourceEditor.name.trim(),
+          description: resourceEditor.description.trim(),
+          tags,
+          enabledPlatforms: resourceEditor.enabledPlatforms,
+          homepage: resourceEditor.homepage.trim() || undefined
+        },
+        { onSuccess: () => closeResourceEditor() }
+      );
+      return;
+    }
+
+    if (resourceEditor.kind === "prompt") {
+      if (!resourceEditor.name.trim()) {
+        setResourceEditor({ ...resourceEditor, error: "请填写提示词名称" });
+        return;
+      }
+      if (!resourceEditor.content.trim()) {
+        setResourceEditor({ ...resourceEditor, error: "请填写提示词内容" });
+        return;
+      }
+
+      workspace.upsertPromptMutation.mutate(
+        {
+          id: resourceEditor.id,
+          appType: resourceEditor.appType,
+          name: resourceEditor.name.trim(),
+          description: resourceEditor.description.trim(),
+          content: resourceEditor.content.trim(),
+          enabled: resourceEditor.enabled
+        },
+        { onSuccess: () => closeResourceEditor() }
+      );
+      return;
+    }
+
+    if (!resourceEditor.name.trim()) {
+      setResourceEditor({ ...resourceEditor, error: "请填写技能名称" });
+      return;
+    }
+    if (!resourceEditor.directory.trim()) {
+      setResourceEditor({ ...resourceEditor, error: "请填写技能目录" });
+      return;
+    }
+    if (resourceEditor.enabledPlatforms.length === 0) {
+      setResourceEditor({ ...resourceEditor, error: "请至少选择一个启用平台" });
+      return;
+    }
+
+    workspace.upsertSkillMutation.mutate(
+      {
+        id: resourceEditor.id,
+        name: resourceEditor.name.trim(),
+        description: resourceEditor.description.trim(),
+        directory: resourceEditor.directory.trim(),
+        enabledPlatforms: resourceEditor.enabledPlatforms
+      },
+      { onSuccess: () => closeResourceEditor() }
+    );
+  }
+
+  const quickAction =
+    activeSection === "providers"
+      ? { label: "新增服务商", run: openCreate }
+      : activeSection === "mcp"
+        ? { label: "新增 MCP", run: () => openMcpEditor() }
+        : activeSection === "prompts"
+          ? { label: "新增提示词", run: () => openPromptEditor() }
+          : { label: "新增技能", run: () => openSkillEditor() };
+
+  const resourceSubmitPending =
+    resourceEditor?.kind === "mcp"
+      ? workspace.upsertMcpMutation.isPending
+      : resourceEditor?.kind === "prompt"
+        ? workspace.upsertPromptMutation.isPending
+        : resourceEditor?.kind === "skill"
+          ? workspace.upsertSkillMutation.isPending
+          : false;
+
+  const deleteSubmitPending =
+    deleteConfirm?.kind === "mcp"
+      ? workspace.deleteMcpMutation.isPending
+      : deleteConfirm?.kind === "prompt"
+        ? workspace.deletePromptMutation.isPending
+        : deleteConfirm?.kind === "skill"
+          ? workspace.deleteSkillMutation.isPending
+          : false;
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(59,130,246,0.06),_transparent_22%),linear-gradient(180deg,#ffffff_0%,#f7f9fc_100%)] text-slate-900">
+      <div className="mx-auto flex min-h-screen max-w-[1440px] flex-col px-8 py-8">
+        <header className="flex flex-wrap items-start justify-between gap-6">
+          <div className="flex items-center gap-4">
+            <BrandMark />
+            <div>
+              <div className="inline-flex items-center gap-2 rounded-full bg-white px-3 py-1 text-[11px] font-medium uppercase tracking-[0.28em] text-slate-400 ring-1 ring-slate-200/80">
+                <Sparkles className="h-3.5 w-3.5 text-[#f97316]" />
+                桌面控制台
+              </div>
+              <div className="mt-3 flex items-center gap-3">
+                <h1 className="text-[28px] font-semibold tracking-[-0.05em] text-slate-950">{workspace.snapshot.appName}</h1>
+                <span className={cx("rounded-full px-3 py-1 text-xs font-medium", styles.soft)}>{platform.label}</span>
+              </div>
+              <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">在一个轻量控制台中完成路由切换、目标文件管理与连通性检测。</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={quickAction.run}
+              className="inline-flex h-11 items-center gap-2 rounded-2xl bg-[#ff7a1a] px-4 text-sm font-medium text-white shadow-[0_16px_30px_rgba(255,122,26,0.28)] transition hover:brightness-105"
+            >
+              <Plus className="h-4 w-4" />
+              {quickAction.label}
+            </button>
+          </div>
+        </header>
+
+        <section className="mt-7 flex flex-wrap items-center gap-3">
+          {workspace.snapshot.platforms.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => workspace.setActivePlatform(item.id)}
+              className={cx(
+                "inline-flex items-center gap-3 rounded-[20px] border px-4 py-3 text-left transition",
+                item.id === platform.id ? cx("bg-white shadow-[0_18px_38px_rgba(15,23,42,0.08)]", tone(item.id).line) : "border-slate-200/80 bg-white/70 hover:bg-white"
+              )}
+            >
+              <div className="grid h-10 w-10 place-items-center rounded-2xl bg-slate-50 ring-1 ring-slate-200/70">{platformArt(item.id)}</div>
+              <div>
+                <div className="text-sm font-medium text-slate-900">{item.label}</div>
+                <div className="text-xs text-slate-400">已保存 {item.providerCount} 条路由</div>
+              </div>
+            </button>
+          ))}
+        </section>
+
+        <section className="mt-5 flex flex-wrap items-center gap-2">
+          {workspaceSections.map((section) => (
+            <button
+              key={section.id}
+              type="button"
+              onClick={() => workspace.setActiveSection(section.id)}
+              className={cx(
+                "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition",
+                activeSection === section.id ? "bg-slate-950 text-white shadow-[0_10px_20px_rgba(15,23,42,0.12)]" : "bg-white text-slate-600 ring-1 ring-slate-200/80 hover:text-slate-900"
+              )}
+            >
+              <section.icon className="h-4 w-4" />
+              {section.label}
+            </button>
+          ))}
+        </section>
+
+        <main className="mt-7 grid flex-1 grid-cols-[minmax(0,1.45fr)_380px] gap-6">
+          <section className="min-w-0 rounded-[30px] border border-slate-200/80 bg-white p-6 shadow-[0_24px_80px_rgba(15,23,42,0.06)]">
+            <div className="flex flex-wrap items-start justify-between gap-4">
+              <div>
+                <div className="text-[12px] uppercase tracking-[0.24em] text-slate-400">{workspace.activeSectionMeta.eyebrow}</div>
+                <h2 className="mt-2 text-[30px] font-semibold tracking-[-0.05em] text-slate-950">
+                  {platform.label} {workspace.activeSectionMeta.title}
+                </h2>
+                <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+                  {activeSection === "providers" ? "这里支持新增、编辑、切换、刷新和连通性检测，配置会立即回写工作区。" : "布局参考 CC Switch 的信息结构，同时保留 March 的品牌风格。"}
+                </p>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-3">
+                <button
+                  type="button"
+                  onClick={() => workspace.snapshotQuery.refetch()}
+                  className="inline-flex h-11 items-center gap-2 rounded-2xl border border-slate-200 px-4 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-slate-50"
+                >
+                  <RefreshCw className={cx("h-4 w-4", workspace.snapshotQuery.isFetching && "animate-spin")} />
+                  刷新
+                </button>
+                {activeSection === "providers" ? (
+                  <>
+                    <button
+                      type="button"
+                      onClick={openImport}
+                      className="inline-flex h-11 items-center gap-2 rounded-2xl border border-slate-200 px-4 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-slate-50"
+                    >
+                      <ArrowDownToLine className="h-4 w-4" />
+                      从当前导入
+                    </button>
+                    <button
+                      type="button"
+                      onClick={openCreate}
+                      className="inline-flex h-11 items-center gap-2 rounded-2xl bg-[#1677ff] px-4 text-sm font-medium text-white shadow-[0_12px_24px_rgba(22,119,255,0.22)] transition hover:brightness-105"
+                    >
+                      <Plus className="h-4 w-4" />
+                      新增服务商
+                    </button>
+                  </>
+                ) : activeSection === "mcp" ? (
+                  <button type="button" onClick={() => openMcpEditor()} className="inline-flex h-11 items-center gap-2 rounded-2xl bg-[#1677ff] px-4 text-sm font-medium text-white shadow-[0_12px_24px_rgba(22,119,255,0.22)] transition hover:brightness-105">
+                    <Plus className="h-4 w-4" />新增 MCP
+                  </button>
+                ) : activeSection === "prompts" ? (
+                  <button type="button" onClick={() => openPromptEditor()} className="inline-flex h-11 items-center gap-2 rounded-2xl bg-[#1677ff] px-4 text-sm font-medium text-white shadow-[0_12px_24px_rgba(22,119,255,0.22)] transition hover:brightness-105">
+                    <Plus className="h-4 w-4" />新增提示词
+                  </button>
+                ) : (
+                  <button type="button" onClick={() => openSkillEditor()} className="inline-flex h-11 items-center gap-2 rounded-2xl bg-[#1677ff] px-4 text-sm font-medium text-white shadow-[0_12px_24px_rgba(22,119,255,0.22)] transition hover:brightness-105">
+                    <Plus className="h-4 w-4" />新增技能
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {activeSection === "providers" ? (
+              <div className="mt-6 grid gap-3">
+                {providers.map((provider) => {
+                  const art = providerArt(provider, platform.id);
+                  return (
+                    <article key={provider.id} className="rounded-[24px] border border-slate-200/80 bg-slate-50 px-5 py-4">
+                      <div className="flex flex-wrap items-start justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <div className="grid h-8 w-8 place-items-center rounded-xl bg-white ring-1 ring-slate-200/80">
+                              {art ? <img src={art.src} alt={art.alt} className="h-4 w-4 object-contain" /> : <CircleUserRound className="h-4 w-4 text-slate-500" />}
+                            </div>
+                            <div className="text-base font-semibold text-slate-950">{provider.name}</div>
+                            {provider.isActive ? <span className={cx("rounded-full px-2.5 py-1 text-[11px] font-medium", styles.soft)}>当前路由</span> : null}
+                          </div>
+                          <div className="mt-2 text-sm text-slate-500">{shortUrl(provider.baseUrl)}</div>
+                          <div className="mt-1 text-xs text-slate-400">模型：{provider.model} / 密钥：{provider.maskedApiKey}</div>
+                          <div className="mt-1 text-xs text-slate-400">更新时间：{timeText(provider.updatedAt)}</div>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          {!provider.isActive ? (
+                            <button type="button" onClick={() => workspace.activateMutation.mutate({ platform: platform.id, providerId: provider.id })} className="inline-flex h-10 items-center rounded-2xl bg-slate-950 px-4 text-sm font-medium text-white transition hover:opacity-90">设为当前</button>
+                          ) : (
+                            <button type="button" className="inline-flex h-10 items-center gap-1 rounded-2xl border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700" disabled>
+                              <Check className="h-4 w-4" />生效中
+                            </button>
+                          )}
+                          <button type="button" onClick={() => openEdit(provider)} className="inline-flex h-10 items-center gap-1 rounded-2xl border border-slate-200 bg-white px-3 text-sm font-medium text-slate-700 transition hover:bg-slate-100">
+                            <SquarePen className="h-4 w-4" />编辑
+                          </button>
+                        </div>
+                      </div>
+                    </article>
+                  );
+                })}
+              </div>
+            ) : activeSection === "mcp" ? (
+              <div className="mt-6 grid gap-3">
+                {mcpServers.map((server) => {
+                  const enabled = server.enabledPlatforms.includes(platform.id);
+                  return (
+                    <article key={server.id} className="rounded-[24px] border border-slate-200/80 bg-slate-50 px-5 py-4">
+                      <div className="flex flex-wrap items-start justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <div className="text-base font-semibold text-slate-950">{server.name}</div>
+                            <span className={cx("rounded-full px-2.5 py-1 text-[11px] font-medium", enabled ? styles.soft : "bg-slate-200 text-slate-600")}>{enabled ? "已启用" : "未启用"}</span>
+                          </div>
+                          <p className="mt-2 text-sm leading-6 text-slate-500">{server.description}</p>
+                          <div className="mt-3 flex flex-wrap gap-2">
+                            {server.tags.map((tag) => (
+                              <span key={tag} className="rounded-full bg-white px-2.5 py-1 text-[11px] text-slate-500 ring-1 ring-slate-200/80">{tag}</span>
+                            ))}
+                          </div>
+                          {server.homepage ? <div className="mt-2 text-xs text-slate-400">主页：{server.homepage}</div> : null}
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={() => workspace.toggleMcpMutation.mutate({ serverId: server.id, platform: platform.id })}
+                            className={cx("inline-flex h-10 items-center rounded-2xl px-4 text-sm font-medium transition", enabled ? "border border-slate-200 bg-white text-slate-700 hover:bg-slate-100" : "bg-slate-950 text-white hover:opacity-90")}
+                          >
+                            {enabled ? "禁用" : "启用"}
+                          </button>
+                          <button type="button" onClick={() => openMcpEditor(server)} className="inline-flex h-10 items-center gap-1 rounded-2xl border border-slate-200 bg-white px-3 text-sm font-medium text-slate-700 transition hover:bg-slate-100">
+                            <SquarePen className="h-4 w-4" />编辑
+                          </button>
+                          <button type="button" onClick={() => removeMcp(server.id, server.name)} className="inline-flex h-10 items-center gap-1 rounded-2xl border border-rose-200 bg-white px-3 text-sm font-medium text-rose-600 transition hover:bg-rose-50">
+                            <Trash2 className="h-4 w-4" />删除
+                          </button>
+                        </div>
+                      </div>
+                    </article>
+                  );
+                })}
+              </div>
+            ) : activeSection === "prompts" ? (
+              <div className="mt-6 grid gap-3">
+                {prompts.map((prompt) => (
+                  <article key={prompt.id} className="rounded-[24px] border border-slate-200/80 bg-slate-50 px-5 py-4">
+                    <div className="flex flex-wrap items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <div className="text-base font-semibold text-slate-950">{prompt.name}</div>
+                          <span className={cx("rounded-full px-2.5 py-1 text-[11px] font-medium", prompt.enabled ? styles.soft : "bg-slate-200 text-slate-600")}>{promptScopeLabel(prompt.appType)}</span>
+                        </div>
+                        <p className="mt-2 text-sm leading-6 text-slate-500">{prompt.description}</p>
+                        <div className="mt-3 rounded-2xl bg-white px-4 py-4 text-sm leading-7 text-slate-600 ring-1 ring-slate-200/80">{prompt.content}</div>
+                        <div className="mt-2 text-xs text-slate-400">更新时间：{timeText(prompt.updatedAt)}</div>
+                      </div>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => workspace.togglePromptMutation.mutate({ promptId: prompt.id })}
+                          className={cx("inline-flex h-10 items-center rounded-2xl px-4 text-sm font-medium transition", prompt.enabled ? "border border-slate-200 bg-white text-slate-700 hover:bg-slate-100" : "bg-slate-950 text-white hover:opacity-90")}
+                        >
+                          {prompt.enabled ? "禁用" : "启用"}
+                        </button>
+                        <button type="button" onClick={() => openPromptEditor(prompt)} className="inline-flex h-10 items-center gap-1 rounded-2xl border border-slate-200 bg-white px-3 text-sm font-medium text-slate-700 transition hover:bg-slate-100">
+                          <SquarePen className="h-4 w-4" />编辑
+                        </button>
+                        <button type="button" onClick={() => removePrompt(prompt.id, prompt.name)} className="inline-flex h-10 items-center gap-1 rounded-2xl border border-rose-200 bg-white px-3 text-sm font-medium text-rose-600 transition hover:bg-rose-50">
+                          <Trash2 className="h-4 w-4" />删除
+                        </button>
+                      </div>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            ) : (
+              <div className="mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]">
+                <div className="space-y-3">
+                  {skills.map((skill) => (
+                    <article key={skill.id} className="rounded-[24px] border border-slate-200/80 bg-slate-50 px-5 py-4">
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <div className="text-base font-semibold text-slate-950">{skill.name}</div>
+                          <p className="mt-2 text-sm leading-6 text-slate-500">{skill.description}</p>
+                          <div className="mt-3 text-xs text-slate-400">{skill.directory}</div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <span className={cx("rounded-full px-2.5 py-1 text-[11px] font-medium", styles.soft)}>已安装</span>
+                          <button type="button" onClick={() => openSkillEditor(skill)} className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 bg-white px-2.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100">
+                            <SquarePen className="h-3.5 w-3.5" />编辑
+                          </button>
+                          <button type="button" onClick={() => removeSkill(skill.id, skill.name)} className="inline-flex h-9 items-center gap-1 rounded-xl border border-rose-200 bg-white px-2.5 text-xs font-medium text-rose-600 transition hover:bg-rose-50">
+                            <Trash2 className="h-3.5 w-3.5" />删除
+                          </button>
+                        </div>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+                <div className="space-y-3">
+                  {skillRepos.map((repo) => (
+                    <article key={repo.id} className="rounded-[24px] border border-slate-200/80 bg-slate-50 px-5 py-4">
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <div className="text-base font-semibold text-slate-950">{repo.owner}/{repo.name}</div>
+                          <div className="mt-2 text-sm text-slate-500">分支：{repo.branch}</div>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => workspace.toggleSkillRepoMutation.mutate({ repoId: repo.id })}
+                          className={cx("inline-flex h-10 items-center rounded-2xl px-4 text-sm font-medium transition", repo.enabled ? "border border-slate-200 bg-white text-slate-700 hover:bg-slate-100" : "bg-slate-950 text-white hover:opacity-90")}
+                        >
+                          {repo.enabled ? "禁用" : "启用"}
+                        </button>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              </div>
+            )}
+          </section>
+
+          <aside className="space-y-4">
+            <section className="rounded-[28px] border border-slate-200/80 bg-white p-5 shadow-[0_24px_70px_rgba(15,23,42,0.06)]">
+              <div className="text-[12px] uppercase tracking-[0.24em] text-slate-400">总览</div>
+              <div className="mt-4 grid grid-cols-2 gap-3">
+                <div className="rounded-2xl bg-slate-50 px-4 py-4 ring-1 ring-slate-200/70">
+                  <div className="text-[11px] uppercase tracking-[0.22em] text-slate-400">{activeSection === "providers" ? "服务商" : activeSection === "mcp" ? "MCP" : activeSection === "prompts" ? "提示词" : "技能"}</div>
+                  <div className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-slate-950">{activeSection === "providers" ? providers.length : activeSection === "mcp" ? mcpServers.length : activeSection === "prompts" ? prompts.length : skills.length}</div>
+                </div>
+                <div className="rounded-2xl bg-slate-50 px-4 py-4 ring-1 ring-slate-200/70">
+                  <div className="text-[11px] uppercase tracking-[0.22em] text-slate-400">{activeSection === "skills" ? "仓库" : "目标文件"}</div>
+                  <div className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-slate-950">{activeSection === "skills" ? skillRepos.length : platform.targetFiles.length}</div>
+                </div>
+                <div className="col-span-2 rounded-2xl bg-slate-50 px-4 py-4 ring-1 ring-slate-200/70">
+                  <div className="text-[11px] uppercase tracking-[0.22em] text-slate-400">{activeSection === "providers" ? "当前路由" : "当前工作区"}</div>
+                  <div className="mt-2 text-sm font-medium text-slate-950">{activeSection === "providers" ? platform.currentProviderName || "无" : `${platform.label} / ${workspace.activeSectionMeta.label}`}</div>
+                  <div className="mt-1 text-xs text-slate-400">快照更新时间：{timeText(workspace.snapshot.generatedAt)}</div>
+                </div>
+              </div>
+            </section>
+
+            <section className="rounded-[28px] border border-slate-200/80 bg-white p-5 shadow-[0_24px_70px_rgba(15,23,42,0.06)]">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <div className="text-[12px] uppercase tracking-[0.24em] text-slate-400">链路健康度</div>
+                  <div className="mt-2 text-[22px] font-semibold tracking-[-0.04em] text-slate-950">延迟检测</div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => workspace.probeQuery.refetch()}
+                  className="inline-flex h-10 items-center gap-2 rounded-2xl border border-slate-200 px-4 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-slate-50"
+                >
+                  <RefreshCw className={cx("h-4 w-4", workspace.probeQuery.isFetching && "animate-spin")} />测试
+                </button>
+              </div>
+              <div className="mt-4 space-y-3">
+                {probes.length > 0 ? (
+                  probes.map((item) => (
+                    <div key={item.baseUrl} className="rounded-2xl bg-slate-50 px-4 py-4 ring-1 ring-slate-200/70">
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="truncate text-sm font-medium text-slate-900">{shortUrl(item.baseUrl)}</div>
+                          <div className="mt-1 text-xs text-slate-400">{item.ok ? "可连通" : item.error ? `不可用：${item.error}` : "不可用"}</div>
+                        </div>
+                        <div className="text-sm font-semibold text-[#1677ff]">{item.latency} ms</div>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-6 text-sm leading-6 text-slate-500">执行一次测速后，这里会展示当前工作区的链路延迟结果。</div>
+                )}
+              </div>
+            </section>
+
+            <section className="rounded-[28px] border border-slate-200/80 bg-white p-5 shadow-[0_24px_70px_rgba(15,23,42,0.06)]">
+              <div className="text-[12px] uppercase tracking-[0.24em] text-slate-400">目标文件</div>
+              <div className="mt-4 space-y-3">
+                {platform.targetFiles.map((target) => (
+                  <div key={target} className="rounded-2xl bg-slate-50 px-4 py-4 ring-1 ring-slate-200/70">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex min-w-0 items-start gap-3">
+                        <FileStack className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
+                        <div className="min-w-0 break-all text-sm leading-6 text-slate-600">{target}</div>
+                      </div>
+                      <button type="button" onClick={() => openTargetPath(target)} className="inline-flex h-9 shrink-0 items-center rounded-xl border border-slate-200 bg-white px-3 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900">
+                        打开
+                      </button>
+                    </div>
+                  </div>
+                ))}
+                {targetPathMessage ? <div className="text-xs text-slate-500">{targetPathMessage}</div> : null}
+              </div>
+            </section>
+          </aside>
+        </main>
+      </div>
+
+      {dialogOpen ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/20 px-4 backdrop-blur-[3px]">
+          <div className="w-full max-w-[560px] rounded-[30px] bg-white p-7 shadow-[0_44px_120px_rgba(15,23,42,0.18)] ring-1 ring-slate-200/80">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <div className={cx("inline-flex rounded-full px-3 py-1 text-xs font-medium", styles.soft)}>{editing ? "编辑服务商" : "新增服务商"}</div>
+                <h2 className="mt-3 text-[28px] font-semibold tracking-[-0.05em] text-slate-950">{platform.label} 路由编辑器</h2>
+                <p className="mt-2 text-sm leading-6 text-slate-500">这里的改动会写回当前工作区配置，并立即刷新列表。</p>
+              </div>
+              <button type="button" onClick={closeDialog} className="rounded-full p-2 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <form
+              className="mt-6 space-y-4"
+              onSubmit={(event) => {
+                event.preventDefault();
+                submit();
+              }}
+            >
+              <label className="block">
+                <div className="mb-2 text-sm font-medium text-slate-600">服务商名称</div>
+                <input
+                  value={workspace.editorForm.name}
+                  onChange={(event) => workspace.setEditorForm({ ...workspace.editorForm, name: event.target.value })}
+                  placeholder="default"
+                  className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                />
+              </label>
+              <label className="block">
+                <div className="mb-2 text-sm font-medium text-slate-600">基础地址</div>
+                <input
+                  value={workspace.editorForm.baseUrl}
+                  onChange={(event) => workspace.setEditorForm({ ...workspace.editorForm, baseUrl: event.target.value })}
+                  placeholder="https://api.openai.com"
+                  className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                />
+                <div className="mt-3 flex items-center justify-between gap-3">
+                  <div className="text-xs text-slate-500">{candidateProbeText || "可先测试地址可用性，再保存。"}</div>
+                  <button
+                    type="button"
+                    onClick={probeCandidateBaseUrl}
+                    disabled={workspace.probeCandidateMutation.isPending}
+                    className="inline-flex h-9 items-center rounded-xl border border-slate-200 bg-white px-3 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    {workspace.probeCandidateMutation.isPending ? "测试中..." : "测试地址"}
+                  </button>
+                </div>
+              </label>
+              <label className="block">
+                <div className="mb-2 text-sm font-medium text-slate-600">API Key</div>
+                <input
+                  type="password"
+                  value={workspace.editorForm.apiKey}
+                  onChange={(event) => workspace.setEditorForm({ ...workspace.editorForm, apiKey: event.target.value })}
+                  placeholder="sk-..."
+                  className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                />
+              </label>
+              <label className="block">
+                <div className="mb-2 text-sm font-medium text-slate-600">模型</div>
+                <select
+                  value={workspace.editorForm.model}
+                  onChange={(event) => workspace.setEditorForm({ ...workspace.editorForm, model: event.target.value })}
+                  className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                >
+                  {models.map((model) => (
+                    <option key={model} value={model}>
+                      {model}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <div className="flex items-center justify-end gap-3 pt-3">
+                <button type="button" onClick={closeDialog} className="inline-flex h-11 items-center justify-center rounded-2xl border border-slate-200 px-5 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900">
+                  取消
+                </button>
+                <button
+                  type="submit"
+                  disabled={workspace.saveMutation.isPending}
+                  className="inline-flex h-11 items-center justify-center rounded-2xl bg-[#1677ff] px-5 text-sm font-medium text-white shadow-[0_12px_24px_rgba(22,119,255,0.22)] transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
+                >
+                  {workspace.saveMutation.isPending ? "保存中..." : "保存并启用"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+
+      {deleteConfirm ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/20 px-4 backdrop-blur-[3px]">
+          <div className="w-full max-w-[520px] rounded-[30px] bg-white p-7 shadow-[0_44px_120px_rgba(15,23,42,0.18)] ring-1 ring-slate-200/80">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <div className="inline-flex rounded-full bg-rose-50 px-3 py-1 text-xs font-medium text-rose-700">删除确认</div>
+                <h2 className="mt-3 text-[28px] font-semibold tracking-[-0.05em] text-slate-950">
+                  删除{deleteConfirm.kind === "mcp" ? "MCP" : deleteConfirm.kind === "prompt" ? "提示词" : "技能"}
+                </h2>
+                <p className="mt-2 text-sm leading-6 text-slate-500">
+                  将删除 <span className="font-medium text-slate-900">{deleteConfirm.name}</span>。此操作不可撤销。
+                </p>
+              </div>
+              <button type="button" onClick={closeDeleteConfirm} className="rounded-full p-2 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="mt-6 flex items-center justify-end gap-3">
+              <button
+                type="button"
+                onClick={closeDeleteConfirm}
+                disabled={deleteSubmitPending}
+                className="inline-flex h-11 items-center justify-center rounded-2xl border border-slate-200 px-5 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                取消
+              </button>
+              <button
+                type="button"
+                onClick={confirmDelete}
+                disabled={deleteSubmitPending}
+                className="inline-flex h-11 items-center justify-center rounded-2xl bg-rose-600 px-5 text-sm font-medium text-white shadow-[0_12px_24px_rgba(225,29,72,0.24)] transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {deleteSubmitPending ? "删除中..." : "确认删除"}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {resourceEditor ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/20 px-4 backdrop-blur-[3px]">
+          <div className="w-full max-w-[620px] rounded-[30px] bg-white p-7 shadow-[0_44px_120px_rgba(15,23,42,0.18)] ring-1 ring-slate-200/80">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <div className={cx("inline-flex rounded-full px-3 py-1 text-xs font-medium", styles.soft)}>
+                  {resourceEditor.kind === "mcp" ? "MCP 编辑" : resourceEditor.kind === "prompt" ? "提示词编辑" : "技能编辑"}
+                </div>
+                <h2 className="mt-3 text-[28px] font-semibold tracking-[-0.05em] text-slate-950">
+                  {resourceEditor.kind === "mcp" ? "MCP 配置" : resourceEditor.kind === "prompt" ? "提示词配置" : "技能配置"}
+                </h2>
+                <p className="mt-2 text-sm leading-6 text-slate-500">修改后会直接写入当前工作区配置，并刷新当前列表。</p>
+              </div>
+              <button type="button" onClick={closeResourceEditor} className="rounded-full p-2 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <form
+              className="mt-6 space-y-4"
+              onSubmit={(event) => {
+                event.preventDefault();
+                submitResourceEditor();
+              }}
+            >
+              {resourceEditor.kind === "mcp" ? (
+                <>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">MCP 名称</div>
+                    <input
+                      value={resourceEditor.name}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "mcp" ? { ...current, name: event.target.value, error: null } : current
+                        )
+                      }
+                      placeholder="例如：filesystem"
+                      className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">描述</div>
+                    <textarea
+                      value={resourceEditor.description}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "mcp" ? { ...current, description: event.target.value, error: null } : current
+                        )
+                      }
+                      rows={3}
+                      className="w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">标签（逗号分隔）</div>
+                    <input
+                      value={resourceEditor.tags}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "mcp" ? { ...current, tags: event.target.value, error: null } : current
+                        )
+                      }
+                      placeholder="files, docs"
+                      className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">主页链接（可选）</div>
+                    <input
+                      value={resourceEditor.homepage}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "mcp" ? { ...current, homepage: event.target.value, error: null } : current
+                        )
+                      }
+                      placeholder="https://example.com"
+                      className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <div>
+                    <div className="mb-2 text-sm font-medium text-slate-600">启用平台</div>
+                    <div className="flex flex-wrap gap-2">
+                      {allPlatforms.map((item) => {
+                        const checked = resourceEditor.enabledPlatforms.includes(item);
+                        return (
+                          <button
+                            key={item}
+                            type="button"
+                            onClick={() => toggleResourcePlatform(item)}
+                            className={cx(
+                              "inline-flex h-10 items-center rounded-2xl px-4 text-sm font-medium transition",
+                              checked ? "bg-slate-950 text-white" : "border border-slate-200 bg-white text-slate-700 hover:bg-slate-100"
+                            )}
+                          >
+                            {platformLabel(item)}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </>
+              ) : resourceEditor.kind === "prompt" ? (
+                <>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">提示词名称</div>
+                    <input
+                      value={resourceEditor.name}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "prompt" ? { ...current, name: event.target.value, error: null } : current
+                        )
+                      }
+                      placeholder="例如：默认编码"
+                      className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">描述</div>
+                    <textarea
+                      value={resourceEditor.description}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "prompt" ? { ...current, description: event.target.value, error: null } : current
+                        )
+                      }
+                      rows={3}
+                      className="w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">提示词内容</div>
+                    <textarea
+                      value={resourceEditor.content}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "prompt" ? { ...current, content: event.target.value, error: null } : current
+                        )
+                      }
+                      rows={6}
+                      className="w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 py-3 text-sm leading-7 text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">作用范围</div>
+                    <select
+                      value={resourceEditor.appType}
+                      onChange={(event) =>
+                        setResourceEditor((current) => {
+                          if (!current || current.kind !== "prompt") return current;
+                          const value = event.target.value as "global" | PlatformId;
+                          return { ...current, appType: value, error: null };
+                        })
+                      }
+                      className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    >
+                      <option value="global">全局</option>
+                      {allPlatforms.map((item) => (
+                        <option key={item} value={item}>
+                          {platformLabel(item)}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <label className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 py-3">
+                    <input
+                      type="checkbox"
+                      checked={resourceEditor.enabled}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "prompt" ? { ...current, enabled: event.target.checked, error: null } : current
+                        )
+                      }
+                      className="h-4 w-4 rounded border-slate-300 text-[#1677ff] focus:ring-[#1677ff]"
+                    />
+                    <span className="text-sm text-slate-700">保存后立即启用</span>
+                  </label>
+                </>
+              ) : (
+                <>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">技能名称</div>
+                    <input
+                      value={resourceEditor.name}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "skill" ? { ...current, name: event.target.value, error: null } : current
+                        )
+                      }
+                      placeholder="例如：openai-docs"
+                      className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">描述</div>
+                    <textarea
+                      value={resourceEditor.description}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "skill" ? { ...current, description: event.target.value, error: null } : current
+                        )
+                      }
+                      rows={3}
+                      className="w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <label className="block">
+                    <div className="mb-2 text-sm font-medium text-slate-600">技能目录</div>
+                    <input
+                      value={resourceEditor.directory}
+                      onChange={(event) =>
+                        setResourceEditor((current) =>
+                          current && current.kind === "skill" ? { ...current, directory: event.target.value, error: null } : current
+                        )
+                      }
+                      placeholder="~/.codex/skills/..."
+                      className="h-12 w-full rounded-2xl border border-slate-200 bg-[#fbfbfc] px-4 text-sm text-slate-900 outline-none transition focus:border-[#1677ff] focus:bg-white"
+                    />
+                  </label>
+                  <div>
+                    <div className="mb-2 text-sm font-medium text-slate-600">启用平台</div>
+                    <div className="flex flex-wrap gap-2">
+                      {allPlatforms.map((item) => {
+                        const checked = resourceEditor.enabledPlatforms.includes(item);
+                        return (
+                          <button
+                            key={item}
+                            type="button"
+                            onClick={() => toggleResourcePlatform(item)}
+                            className={cx(
+                              "inline-flex h-10 items-center rounded-2xl px-4 text-sm font-medium transition",
+                              checked ? "bg-slate-950 text-white" : "border border-slate-200 bg-white text-slate-700 hover:bg-slate-100"
+                            )}
+                          >
+                            {platformLabel(item)}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {resourceEditor.error ? <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{resourceEditor.error}</div> : null}
+
+              <div className="flex items-center justify-end gap-3 pt-3">
+                <button
+                  type="button"
+                  onClick={closeResourceEditor}
+                  className="inline-flex h-11 items-center justify-center rounded-2xl border border-slate-200 px-5 text-sm font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900"
+                >
+                  取消
+                </button>
+                <button
+                  type="submit"
+                  disabled={resourceSubmitPending}
+                  className="inline-flex h-11 items-center justify-center rounded-2xl bg-[#1677ff] px-5 text-sm font-medium text-white shadow-[0_12px_24px_rgba(22,119,255,0.22)] transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
+                >
+                  {resourceSubmitPending
+                    ? "保存中..."
+                    : resourceEditor.kind === "mcp"
+                      ? "保存 MCP"
+                      : resourceEditor.kind === "prompt"
+                        ? "保存提示词"
+                        : "保存技能"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}