feat(desktop): MVP 驾驶舱外壳 + 类型化节点 Studio + 运行抽屉

按 desktop-ui-plan.md 落 MVP：五区外壳 + 编排 Studio + 底部抽屉 + 健康灯。 - shell: TopBar(垂直切换/健康灯[Gateway/DB 实时,余规划]/身份会话) + LeftNav(BUILD/RUN/MANAGE 分组,未就绪模块灰显) + BottomDrawer(输出/轨迹/工具调用/引用/评测) - studio: 类型化节点目录(输入/检索RAG/Agent/工具/记忆/分支/并行/汇聚/渲染/输出, 按类配色) + 自定义 TypedNode(状态徽标) + Inspector(按类型渲染配置表单) + 校验(孤立节点/必填项) + 运行 - views: MemoryView(复用偏好面板) + Placeholder(规划中模块,露出 IA 与依赖) - lib: run(运行状态机) + health(轮询 billing) + dsl(导出类型化 DSL + validate) - 删旧 AgentCanvas(被 StudioView 取代) 验证: npm run build(tsc+vite)✓; 真实浏览器跑通——加类型化节点→校验(标出孤立)→运行 →SSE 注入画像(老王)+历史流入抽屉, 健康灯 Gateway/DB 实时绿 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-10 15:00:32 +08:00
parent a8e210cd96
commit 61c1177eba
14 changed files with 850 additions and 146 deletions
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import type { RunState } from "../lib/run";
+
+type Tab = "output" | "trace" | "tools" | "cite" | "eval";
+const TABS: Array<{ key: Tab; label: string }> = [
+  { key: "output", label: "输出" },
+  { key: "trace", label: "轨迹" },
+  { key: "tools", label: "工具调用" },
+  { key: "cite", label: "引用" },
+  { key: "eval", label: "评测" },
+];
+
+// 底部抽屉：运行输出 / 轨迹 / 工具调用 / 引用 / 评测（全局常驻）。
+export function BottomDrawer({ run }: { run: RunState }) {
+  const [open, setOpen] = useState(true);
+  const [tab, setTab] = useState<Tab>("output");
+
+  return (
+    <div className="shrink-0 border-t bg-white">
+      <div className="flex items-center gap-1 border-b px-2">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            onClick={() => {
+              setTab(t.key);
+              setOpen(true);
+            }}
+            className={`px-3 py-1.5 text-xs ${
+              tab === t.key && open
+                ? "border-b-2 border-violet-500 font-medium text-violet-700"
+                : "text-gray-500"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+        <span className="ml-2 text-[11px] text-gray-400">
+          {run.phase === "streaming"
+            ? "流式中…"
+            : run.phase === "done"
+              ? "完成 ✓"
+              : run.phase === "error"
+                ? `✗ ${run.error ?? "出错"}`
+                : run.phase === "submitting"
+                  ? "提交中…"
+                  : "就绪"}
+        </span>
+        <button onClick={() => setOpen((o) => !o)} className="ml-auto px-2 text-xs text-gray-400">
+          {open ? "▾ 收起" : "▴ 展开"}
+        </button>
+      </div>
+      {open && (
+        <div className="h-40 overflow-auto p-3 text-xs">
+          {tab === "output" && (
+            <pre className="whitespace-pre-wrap leading-relaxed text-gray-800">
+              {run.output || "在编排页搭图 → 运行，模型注入画像与历史后流式作答，token 在此呈现。"}
+            </pre>
+          )}
+          {tab === "trace" && (
+            <ul className="space-y-1 text-gray-600">
+              {run.events.length === 0 && <li className="text-gray-400">尚无运行。</li>}
+              {run.events.map((e, i) => (
+                <li key={i}>
+                  <span className="text-gray-400">+{e.t}ms</span> · {e.label}
+                </li>
+              ))}
+              <li className="mt-2 text-[11px] text-gray-400">
+                （节点级轨迹待后端回流节点事件后逐节点点亮）
+              </li>
+            </ul>
+          )}
+          {tab === "tools" && (
+            <p className="text-gray-400">
+              工具调用日志：每次 sundynix.tools.* 的请求/响应。需后端把工具事件回流到流通道。
+            </p>
+          )}
+          {tab === "cite" && (
+            <p className="text-gray-400">引用列表：RAG 答案的来源块（源文档 + 分数 + 来源徽标）。需 RAG 链路就绪。</p>
+          )}
+          {tab === "eval" && (
+            <p className="text-gray-400">评测：忠实度 / 完整度质量门结果。需 harness eval 接入。</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,63 @@
+export type ViewKey =
+  | "home"
+  | "studio"
+  | "kb"
+  | "report"
+  | "runs"
+  | "memory"
+  | "market"
+  | "admin";
+
+interface Item {
+  key: ViewKey;
+  label: string;
+  icon: string;
+  group?: string;
+  ready?: boolean;
+}
+
+const ITEMS: Item[] = [
+  { key: "home", label: "工作台", icon: "■" },
+  { key: "studio", label: "编排", icon: "◆", group: "BUILD", ready: true },
+  { key: "kb", label: "知识库", icon: "▣", group: "BUILD" },
+  { key: "report", label: "报告", icon: "▤", group: "BUILD" },
+  { key: "runs", label: "运行", icon: "▸", group: "RUN" },
+  { key: "memory", label: "记忆", icon: "◇", group: "MANAGE", ready: true },
+  { key: "market", label: "市场", icon: "⌧", group: "MANAGE" },
+  { key: "admin", label: "管理", icon: "⚙", group: "MANAGE" },
+];
+
+// 左导航栏：模块切换，分组 BUILD / RUN / MANAGE；未就绪模块灰显（规划中）。
+export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
+  let lastGroup: string | undefined;
+  return (
+    <nav className="flex w-20 shrink-0 flex-col border-r bg-gray-50 py-2">
+      {ITEMS.map((it) => {
+        const header = it.group && it.group !== lastGroup ? it.group : null;
+        lastGroup = it.group ?? lastGroup;
+        return (
+          <div key={it.key}>
+            {header && (
+              <div className="mt-2 px-2 text-[9px] font-semibold tracking-wider text-gray-300">
+                {header}
+              </div>
+            )}
+            <button
+              onClick={() => onSelect(it.key)}
+              className={`flex w-full flex-col items-center gap-0.5 py-2 text-[11px] ${
+                active === it.key
+                  ? "bg-violet-50 font-medium text-violet-700"
+                  : "text-gray-500 hover:bg-gray-100"
+              }`}
+              title={it.ready === false ? `${it.label}（规划中）` : it.label}
+            >
+              <span className="text-base leading-none">{it.icon}</span>
+              {it.label}
+              {it.ready === false && <span className="text-[8px] text-gray-300">规划</span>}
+            </button>
+          </div>
+        );
+      })}
+    </nav>
+  );
+}
@@ -0,0 +1,54 @@
+import type { Identity } from "../lib/api";
+import { useHealth } from "../lib/health";
+
+function Light({ on, label, unknown }: { on?: boolean; label: string; unknown?: boolean }) {
+  const color = unknown ? "bg-gray-300" : on ? "bg-emerald-500" : "bg-rose-500";
+  return (
+    <span className="flex items-center gap-1 text-[11px] text-gray-500" title={label}>
+      <span className={`h-2 w-2 rounded-full ${color}`} />
+      {label}
+    </span>
+  );
+}
+
+// 顶栏：垂直切换 · 健康灯 · 身份/会话。
+export function TopBar({
+  identity,
+  setIdentity,
+}: {
+  identity: Identity;
+  setIdentity: (id: Identity) => void;
+}) {
+  const h = useHealth();
+  return (
+    <header className="flex h-11 shrink-0 items-center gap-3 border-b bg-white px-3">
+      <span className="font-semibold text-gray-800">sundynix-agentix</span>
+      <select className="rounded border px-2 py-0.5 text-xs text-gray-700" defaultValue="通用版">
+        <option>通用版</option>
+        <option>法律版</option>
+        <option>医疗版</option>
+      </select>
+      <div className="ml-2 flex items-center gap-3">
+        <Light on={h.gateway} label="Gateway" />
+        <Light on={h.persisted} label="DB" />
+        <Light unknown label="NATS" />
+        <Light unknown label="Milvus" />
+        <Light unknown label="Neo4j" />
+      </div>
+      <div className="ml-auto flex items-center gap-2">
+        <input
+          className="w-20 rounded border px-2 py-0.5 text-xs"
+          value={identity.userId}
+          onChange={(e) => setIdentity({ ...identity, userId: e.target.value })}
+          title="用户"
+        />
+        <input
+          className="w-24 rounded border px-2 py-0.5 text-xs"
+          value={identity.sessionId}
+          onChange={(e) => setIdentity({ ...identity, sessionId: e.target.value })}
+          title="会话"
+        />
+      </div>
+    </header>
+  );
+}