feat(desktop): 深色 AI 控制台视觉改造 + 工作台仪表盘

桌面端从扁平 dev 工具风改为深色高端 AI 控制台:分层表面 + 紫青强调 + 微光 +
首页仪表盘，提升第一印象与吸引力。

- 设计 tokens: tailwind ink 分层调色板 + glow/card 阴影; index.css 深色基底 +
  品牌渐变 + 深色滚动条
- shell: TopBar(品牌渐变+毛玻璃+发光健康灯) / LeftNav(激活态紫色高亮+左光条) /
  BottomDrawer(深色+状态色)
- 新 views/Home 工作台仪表盘: 渐变 hero + 4 状态卡 + 3 能力卡 + 快速开始(默认首页)
- 画布: TypedNode 深色节点卡; StudioView ReactFlow colorMode=dark + 深色工具栏/面板/
  MiniMap; Inspector 深色表单
- KbView/MemoryView/MemoryPanel/Placeholder 全深色化; 进度条改紫青渐变
- 纯前端改造, npm build✓; 浏览器验证: 仪表盘 + 编排画布深色呈现

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

sundynix-desktop/frontend/src/shell/BottomDrawer.tsx

@@ -10,14 +10,19 @@ const TABS: Array<{ key: Tab; label: string }> = [
   { key: "eval", label: "评测" },
 ];
 
-// 底部抽屉：运行输出 / 轨迹 / 工具调用 / 引用 / 评测（全局常驻）。
+// 底部抽屉：运行输出 / 轨迹 / 工具调用 / 引用 / 评测（深色，全局常驻）。
 export function BottomDrawer({ run }: { run: RunState }) {
   const [open, setOpen] = useState(true);
   const [tab, setTab] = useState<Tab>("output");
 
+  const status =
+    run.phase === "streaming" ? "text-cyan-400" : run.phase === "done" ? "text-emerald-400" : run.phase === "error" ? "text-rose-400" : "text-slate-500";
+  const statusText =
+    run.phase === "streaming" ? "流式中…" : run.phase === "done" ? "完成 ✓" : run.phase === "error" ? `✗ ${run.error ?? "出错"}` : run.phase === "submitting" ? "提交中…" : "就绪";
+
   return (
-    <div className="shrink-0 border-t bg-white">
-      <div className="flex items-center gap-1 border-b px-2">
+    <div className="shrink-0 border-t border-line bg-ink-900">
+      <div className="flex items-center gap-1 border-b border-line px-2">
         {TABS.map((t) => (
           <button
             key={t.key}
@@ -25,61 +30,39 @@ export function BottomDrawer({ run }: { run: RunState }) {
               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"
+            className={`px-3 py-2 text-xs transition ${
+              tab === t.key && open ? "border-b-2 border-violet-500 font-medium text-violet-300" : "text-slate-500 hover:text-slate-300"
             }`}
           >
             {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">
+        <span className={`ml-2 text-[11px] ${status}`}>{statusText}</span>
+        <button onClick={() => setOpen((o) => !o)} className="ml-auto px-2 text-xs text-slate-500 hover:text-slate-300">
           {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">
+            <pre className="whitespace-pre-wrap font-mono leading-relaxed text-emerald-300">
               {run.output || "在编排页搭图 → 运行，模型注入画像与历史后流式作答，token 在此呈现。"}
             </pre>
           )}
           {tab === "trace" && (
-            <ul className="space-y-1 text-gray-600">
-              {run.events.length === 0 && <li className="text-gray-400">尚无运行。</li>}
+            <ul className="space-y-1 text-slate-400">
+              {run.events.length === 0 && <li className="text-slate-600">尚无运行。</li>}
               {run.events.map((e, i) => (
                 <li key={i}>
-                  <span className="text-gray-400">+{e.t}ms</span> · {e.label}
+                  <span className="text-slate-600">+{e.t}ms</span> · {e.label}
                 </li>
               ))}
-              <li className="mt-2 text-[11px] text-gray-400">
-                （节点级轨迹待后端回流节点事件后逐节点点亮）
-              </li>
+              {run.events.length > 0 && <li className="mt-2 text-[11px] text-slate-600">（节点级轨迹待后端回流节点事件后逐节点点亮）</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>
-          )}
+          {tab === "tools" && <p className="text-slate-600">工具调用日志：每次 sundynix.tools.* 的请求/响应（需后端回流工具事件）。</p>}
+          {tab === "cite" && <p className="text-slate-600">引用列表：RAG 答案的来源块（源文档 + 分数 + 来源徽标）。</p>}
+          {tab === "eval" && <p className="text-slate-600">评测：忠实度 / 完整度质量门结果（需 harness eval）。</p>}
         </div>
       )}
     </div>

sundynix-desktop/frontend/src/shell/LeftNav.tsx

@@ -17,43 +17,39 @@ interface Item {
 }
 
 const ITEMS: Item[] = [
-  { key: "home", label: "工作台", icon: "■" },
+  { key: "home", label: "工作台", icon: "▤", ready: true },
   { key: "studio", label: "编排", icon: "◆", group: "BUILD", ready: true },
   { key: "kb", label: "知识库", icon: "▣", group: "BUILD", ready: true },
-  { key: "report", 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">
+    <nav className="flex w-[72px] shrink-0 flex-col gap-0.5 border-r border-line bg-ink-900 py-2">
       {ITEMS.map((it) => {
         const header = it.group && it.group !== lastGroup ? it.group : null;
         lastGroup = it.group ?? lastGroup;
+        const isActive = active === it.key;
         return (
           <div key={it.key}>
-            {header && (
-              <div className="mt-2 px-2 text-[9px] font-semibold tracking-wider text-gray-300">
-                {header}
-              </div>
-            )}
+            {header && <div className="mt-3 px-2 text-[9px] font-semibold tracking-widest text-slate-600">{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"
+              className={`relative flex w-full flex-col items-center gap-1 py-2.5 text-[11px] transition ${
+                isActive ? "text-violet-300" : "text-slate-500 hover:bg-ink-800 hover:text-slate-300"
               }`}
               title={it.ready === false ? `${it.label}（规划中）` : it.label}
             >
-              <span className="text-base leading-none">{it.icon}</span>
+              {isActive && <span className="absolute left-0 top-1/2 h-6 w-0.5 -translate-y-1/2 rounded-r bg-gradient-to-b from-violet-400 to-cyan-400" />}
+              <span className={`text-lg leading-none ${isActive ? "drop-shadow-[0_0_6px_rgba(139,92,246,0.6)]" : ""}`}>{it.icon}</span>
               {it.label}
-              {it.ready === false && <span className="text-[8px] text-gray-300">规划</span>}
+              {it.ready === false && <span className="text-[8px] text-slate-600">规划</span>}
             </button>
           </div>
         );

sundynix-desktop/frontend/src/shell/TopBar.tsx

@@ -2,28 +2,27 @@ 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";
+  const dot = unknown ? "bg-slate-600" : on ? "bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.7)]" : "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}`} />
+    <span className="flex items-center gap-1.5 text-[11px] text-slate-500" title={label}>
+      <span className={`h-1.5 w-1.5 rounded-full ${dot}`} />
       {label}
     </span>
   );
 }
 
-// 顶栏：垂直切换 · 健康灯 · 身份/会话。
-export function TopBar({
-  identity,
-  setIdentity,
-}: {
-  identity: Identity;
-  setIdentity: (id: Identity) => void;
-}) {
+// 顶栏：品牌 · 垂直切换 · 健康灯 · 身份/会话（深色 + 毛玻璃）。
+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="通用版">
+    <header className="flex h-12 shrink-0 items-center gap-3 border-b border-line bg-ink-900/80 px-3 backdrop-blur">
+      <div className="flex items-center gap-2">
+        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-violet-500 to-cyan-500 text-xs font-bold text-white">
+          S
+        </div>
+        <span className="brand-gradient text-sm font-semibold">sundynix-agentix</span>
+      </div>
+      <select className="rounded-md border border-line bg-ink-800 px-2 py-0.5 text-xs text-slate-300" defaultValue="通用版">
         <option>通用版</option>
         <option>法律版</option>
         <option>医疗版</option>
@@ -37,13 +36,13 @@ export function TopBar({
       </div>
       <div className="ml-auto flex items-center gap-2">
         <input
-          className="w-20 rounded border px-2 py-0.5 text-xs"
+          className="w-20 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-violet-500/60 focus:outline-none"
           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"
+          className="w-24 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-violet-500/60 focus:outline-none"
           value={identity.sessionId}
           onChange={(e) => setIdentity({ ...identity, sessionId: e.target.value })}
           title="会话"