march-control-cli 0.1.3

package/src/features/skills/skills-view.tsx

@@ -0,0 +1,44 @@
+const skills = [
+  { name: "openai-docs", category: "System", status: "Installed" },
+  { name: "plugin-creator", category: "System", status: "Installed" },
+  { name: "skill-installer", category: "System", status: "Installed" },
+  { name: "xianyu-keyword-research", category: "Business", status: "Installed" }
+];
+
+export function SkillsView() {
+  return (
+    <section className="mt-4 grid min-h-0 flex-1 grid-cols-[1fr_1fr] gap-4">
+      <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Skill Registry</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Installed skills
+        </h2>
+        <div className="mt-5 space-y-3">
+          {skills.map((item) => (
+            <div key={item.name} className="flex items-center justify-between rounded-[20px] border border-white/6 bg-white/[0.03] px-4 py-4">
+              <div>
+                <div className="text-sm font-medium text-slate-100">{item.name}</div>
+                <div className="mt-1 text-xs text-slate-500">{item.category}</div>
+              </div>
+              <div className="rounded-full bg-cyan-400/12 px-2.5 py-1 text-[11px] text-cyan-200">{item.status}</div>
+            </div>
+          ))}
+        </div>
+      </article>
+
+      <article className="rounded-[24px] border border-white/6 bg-white/[0.025] p-5">
+        <div className="text-[11px] uppercase tracking-[0.32em] text-slate-500">Skill Runtime</div>
+        <h2 className="mt-2 font-['Space_Grotesk'] text-[22px] font-bold tracking-[-0.04em] text-slate-50">
+          Load behavior
+        </h2>
+        <div className="mt-5 space-y-3">
+          {["Trigger rules", "Skill path resolution", "Progressive disclosure", "Context hygiene"].map((item) => (
+            <div key={item} className="rounded-[18px] border border-white/6 bg-white/[0.03] px-4 py-3 text-sm text-slate-300">
+              {item}
+            </div>
+          ))}
+        </div>
+      </article>
+    </section>
+  );
+}

package/src/hooks/use-control-workspace.ts

@@ -0,0 +1,184 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { client } from "../lib/client";
+import { workspaceSections, type WorkspaceSectionId } from "../lib/workspace-sections";
+import type { PlatformId, Provider } from "../types";
+
+export function useControlWorkspace() {
+  const queryClient = useQueryClient();
+  const [activePlatform, setActivePlatform] = useState<PlatformId>("codex");
+  const [activeSection, setActiveSection] = useState<WorkspaceSectionId>("providers");
+  const [editorForm, setEditorForm] = useState({
+    name: "March CN",
+    baseUrl: "https://gmncode.cn",
+    apiKey: "",
+    model: "gpt-5.4"
+  });
+
+  const snapshotQuery = useQuery({
+    queryKey: ["snapshot"],
+    queryFn: client.getSnapshot
+  });
+
+  const probeQuery = useQuery({
+    queryKey: ["probe", activePlatform],
+    queryFn: () => client.probePlatform(activePlatform),
+    enabled: false
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: client.saveProvider,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+      setEditorForm((current) => ({ ...current, apiKey: "" }));
+    }
+  });
+
+  const activateMutation = useMutation({
+    mutationFn: client.activateProvider,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const probeCandidateMutation = useMutation({
+    mutationFn: client.probeCandidate
+  });
+
+  const openPathMutation = useMutation({
+    mutationFn: client.openPath
+  });
+
+  const toggleMcpMutation = useMutation({
+    mutationFn: client.toggleMcpServer,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const upsertMcpMutation = useMutation({
+    mutationFn: client.upsertMcp,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const deleteMcpMutation = useMutation({
+    mutationFn: client.deleteMcp,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const togglePromptMutation = useMutation({
+    mutationFn: client.togglePrompt,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const upsertPromptMutation = useMutation({
+    mutationFn: client.upsertPrompt,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const deletePromptMutation = useMutation({
+    mutationFn: client.deletePrompt,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const upsertSkillMutation = useMutation({
+    mutationFn: client.upsertSkill,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const deleteSkillMutation = useMutation({
+    mutationFn: client.deleteSkill,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const toggleSkillRepoMutation = useMutation({
+    mutationFn: client.toggleSkillRepo,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["snapshot"], data);
+    }
+  });
+
+  const snapshot = snapshotQuery.data;
+  const platform = snapshot?.platforms.find((item) => item.id === activePlatform) || snapshot?.platforms[0];
+
+  useEffect(() => {
+    if (!platform) {
+      return;
+    }
+
+    const activeProvider = platform.providers.find((item) => item.isActive);
+    setEditorForm({
+      name: activeProvider?.name || "March CN",
+      baseUrl: activeProvider?.baseUrl || (platform.id === "openclaw" ? "https://gmncode.cn/v1" : "https://gmncode.cn"),
+      apiKey: "",
+      model: activeProvider?.model || (snapshot?.models[0] ?? "gpt-5.4")
+    });
+  }, [platform, snapshot?.models]);
+
+  const metrics = useMemo(() => {
+    if (!platform) {
+      return [];
+    }
+
+    return [
+      { label: "当前客户端", value: platform.label, hint: "已选择工作区" },
+      { label: "已保存服务商", value: `${platform.providerCount}`, hint: "可切换路由" },
+      { label: "当前路由", value: platform.currentProviderName || "无", hint: "正在生效" },
+      { label: "目标文件", value: `${platform.targetFiles.length}`, hint: "关联本地配置文件" }
+    ];
+  }, [platform]);
+
+  const activeSectionMeta = workspaceSections.find((item) => item.id === activeSection) || workspaceSections[0];
+
+  function openProvider(provider: Provider) {
+    setEditorForm({
+      name: provider.name,
+      baseUrl: provider.baseUrl,
+      apiKey: "",
+      model: provider.model
+    });
+  }
+
+  return {
+    activePlatform,
+    setActivePlatform,
+    activeSection,
+    setActiveSection,
+    activeSectionMeta,
+    editorForm,
+    setEditorForm,
+    snapshot,
+    platform,
+    metrics,
+    snapshotQuery,
+    probeQuery,
+    saveMutation,
+    activateMutation,
+    probeCandidateMutation,
+    openPathMutation,
+    toggleMcpMutation,
+    upsertMcpMutation,
+    deleteMcpMutation,
+    togglePromptMutation,
+    upsertPromptMutation,
+    deletePromptMutation,
+    upsertSkillMutation,
+    deleteSkillMutation,
+    toggleSkillRepoMutation,
+    openProvider
+  };
+}

package/src/index.css

@@ -0,0 +1,22 @@
+@import "tailwindcss";
+
+:root {
+  color: #0f172a;
+  background:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.05), transparent 18%),
+    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100vh;
+}