feat(desktop): 工业化升级 A —— 设计系统地基（primitives + lucide + 语义令牌）

把"手搓内联 class + Unicode 字符图标"换成统一组件与真实图标，为后续工业化打底。

- 依赖：装 lucide-react（描线图标，按需 tree-shake）
- 令牌：tailwind.config 加语义色 brand/accent/success/warn/danger + 圆角档位；
  强调色字面量(violet/cyan/emerald…)收敛到令牌，便于整体换肤
- primitives（src/ui，零重依赖自建）：Button/Input/Textarea/Select/Field/Card/Panel/
  Badge/Dot/Tabs/Skeleton/EmptyState/Dialog/Toast(+useToast)/cn，桶文件统一引入
- 迁移：TopBar/LeftNav/BottomDrawer + Home/Report/Runs/Kb/Placeholder/ExecTrace/
  MemoryPanel/StudioView 全部换 primitives + lucide 图标；导航/能力卡/按钮告别
  ▤◆▣▦ 等 Unicode 字符；错误改用全局 Toast；空状态用 EmptyState
- App 包 ToastProvider

验证：tsc + vite build 通过；浏览器(Preview)走查工作台/报告页——真实图标、统一卡片/
按钮/输入；跑报告端到端正常（执行轨迹 lucide 状态图标点亮、章节耗时/字数/检索片段、
完成弹 Toast + 下载 Word）。

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

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

@@ -1,46 +1,46 @@
 import { useState } from "react";
+import { ChevronDown, ChevronUp, Wrench } from "lucide-react";
 import { deriveNodes, type RunState } from "../lib/run";
 import { ExecTrace } from "../components/ExecTrace";
+import { Tabs, Badge, cn, type TabDef } from "../ui";
 
 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");
 
-  const status =
-    run.phase === "streaming" ? "text-cyan-400" : run.phase === "done" ? "text-emerald-400" : run.phase === "error" ? "text-rose-400" : "text-slate-500";
+  const nodes = deriveNodes(run.exec);
+  const toolCount = nodes.filter((n) => n.kind === "tool").length;
+  const tabs: TabDef<Tab>[] = [
+    { key: "output", label: "输出" },
+    { key: "trace", label: "轨迹", count: nodes.length },
+    { key: "tools", label: "工具调用", count: toolCount },
+    { key: "cite", label: "引用" },
+    { key: "eval", label: "评测" },
+  ];
+
+  const statusCls =
+    run.phase === "streaming" ? "text-accent-400" : run.phase === "done" ? "text-success" : run.phase === "error" ? "text-danger" : "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 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}
-            onClick={() => {
-              setTab(t.key);
-              setOpen(true);
-            }}
-            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] ${status}`}>{statusText}</span>
-        <button onClick={() => setOpen((o) => !o)} className="ml-auto px-2 text-xs text-slate-500 hover:text-slate-300">
-          {open ? "▾ 收起" : "▴ 展开"}
+      <div className="flex items-center border-b border-line px-2">
+        <Tabs
+          tabs={tabs}
+          value={tab}
+          onChange={(t) => {
+            setTab(t);
+            setOpen(true);
+          }}
+        />
+        <span className={cn("ml-2 text-[11px]", statusCls)}>{statusText}</span>
+        <button onClick={() => setOpen((o) => !o)} className="ml-auto flex items-center gap-1 px-2 py-2 text-xs text-slate-500 hover:text-slate-300">
+          {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />}
+          {open ? "收起" : "展开"}
         </button>
       </div>
       {open && (
@@ -69,17 +69,13 @@ function ToolCalls({ run }: { run: RunState }) {
   return (
     <ul className="space-y-1.5">
       {tools.map((t) => (
-        <li key={t.node} className="rounded-lg border border-line bg-ink-950/60 px-3 py-2">
+        <li key={t.node} className="rounded-md border border-line bg-ink-950/60 px-3 py-2">
           <div className="flex items-center gap-2">
-            <span className="text-amber-300">⚙</span>
+            <Wrench className="h-3.5 w-3.5 text-warn" strokeWidth={2} />
             <span className="font-mono text-[11px] text-slate-200">{t.node.replace(/^tool:/, "")}</span>
-            <span
-              className={`rounded px-1.5 py-0.5 text-[9px] ${
-                t.status === "error" ? "bg-rose-500/15 text-rose-300" : t.status === "running" ? "bg-cyan-500/15 text-cyan-300" : "bg-emerald-500/15 text-emerald-300"
-              }`}
-            >
+            <Badge tone={t.status === "error" ? "danger" : t.status === "running" ? "accent" : "success"}>
               {t.status === "error" ? "失败" : t.status === "running" ? "调用中" : "成功"}
-            </span>
+            </Badge>
             {t.ms != null && t.ms > 0 && <span className="ml-auto font-mono text-[10px] text-slate-500">{t.ms} ms</span>}
           </div>
           {t.detail && <p className="mt-1 break-words text-[11px] leading-relaxed text-slate-400">{t.detail}</p>}

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

@@ -1,53 +1,65 @@
-export type ViewKey =
-  | "home"
-  | "studio"
-  | "kb"
-  | "report"
-  | "runs"
-  | "memory"
-  | "market"
-  | "admin";
+import {
+  LayoutDashboard,
+  Workflow,
+  Database,
+  FileText,
+  Activity,
+  Bookmark,
+  Boxes,
+  Settings,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "../ui";
+
+export type ViewKey = "home" | "studio" | "kb" | "report" | "runs" | "memory" | "market" | "admin";
 
 interface Item {
   key: ViewKey;
   label: string;
-  icon: string;
+  icon: LucideIcon;
   group?: string;
   ready?: boolean;
 }
 
 const ITEMS: Item[] = [
-  { 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", ready: true },
-  { key: "runs", label: "运行", icon: "▸", group: "RUN", ready: true },
-  { key: "memory", label: "记忆", icon: "◇", group: "MANAGE", ready: true },
-  { key: "market", label: "市场", icon: "⌧", group: "MANAGE" },
-  { key: "admin", label: "管理", icon: "⚙", group: "MANAGE" },
+  { key: "home", label: "工作台", icon: LayoutDashboard, ready: true },
+  { key: "studio", label: "编排", icon: Workflow, group: "BUILD", ready: true },
+  { key: "kb", label: "知识库", icon: Database, group: "BUILD", ready: true },
+  { key: "report", label: "报告", icon: FileText, group: "BUILD", ready: true },
+  { key: "runs", label: "运行", icon: Activity, group: "RUN", ready: true },
+  { key: "memory", label: "记忆", icon: Bookmark, group: "MANAGE", ready: true },
+  { key: "market", label: "市场", icon: Boxes, group: "MANAGE" },
+  { key: "admin", label: "管理", icon: Settings, group: "MANAGE" },
 ];
 
-// 左导航：深色，激活态紫色高亮 + 左侧光条。
+// 左导航：深色，激活态紫色高亮 + 左侧光条，描线图标。
 export function LeftNav({ active, onSelect }: { active: ViewKey; onSelect: (v: ViewKey) => void }) {
   let lastGroup: string | undefined;
   return (
-    <nav className="flex w-[72px] shrink-0 flex-col gap-0.5 border-r border-line bg-ink-900 py-2">
+    <nav className="flex w-[68px] 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;
+        const Icon = it.icon;
         return (
           <div key={it.key}>
             {header && <div className="mt-3 px-2 text-[9px] font-semibold tracking-widest text-slate-600">{header}</div>}
             <button
               onClick={() => onSelect(it.key)}
-              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"
-              }`}
+              className={cn(
+                "relative flex w-full flex-col items-center gap-1 py-2.5 text-[11px] transition",
+                isActive ? "text-brand-400" : "text-slate-500 hover:bg-ink-800 hover:text-slate-300",
+              )}
               title={it.ready === false ? `${it.label}（规划中）` : it.label}
             >
-              {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>
+              {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-brand-400 to-accent-400" />
+              )}
+              <Icon
+                className={cn("h-[18px] w-[18px]", isActive && "drop-shadow-[0_0_6px_rgba(139,92,246,0.6)]")}
+                strokeWidth={isActive ? 2.2 : 1.8}
+              />
               {it.label}
               {it.ready === false && <span className="text-[8px] text-slate-600">规划</span>}
             </button>

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

@@ -1,11 +1,13 @@
+import { User, ChevronDown } from "lucide-react";
 import type { Identity } from "../lib/api";
 import { useHealth } from "../lib/health";
+import { cn } from "../ui";
 
 function Light({ on, label, unknown }: { on?: boolean; label: string; unknown?: boolean }) {
-  const dot = unknown ? "bg-slate-600" : on ? "bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.7)]" : "bg-rose-500";
+  const dot = unknown ? "bg-slate-600" : on ? "bg-success shadow-[0_0_8px_rgba(52,211,153,0.7)]" : "bg-danger";
   return (
-    <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}`} />
+    <span className="flex items-center gap-1.5 text-[11px] text-slate-500" title={unknown ? `${label}（状态未透出）` : label}>
+      <span className={cn("h-1.5 w-1.5 rounded-full", dot)} />
       {label}
     </span>
   );
@@ -17,16 +19,22 @@ export function TopBar({ identity, setIdentity }: { identity: Identity; setIdent
   return (
     <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">
+        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-brand to-accent 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>
-      </select>
+      <div className="relative">
+        <select
+          className="appearance-none rounded-md border border-line bg-ink-800 py-1 pl-2.5 pr-7 text-xs text-slate-300 focus:border-brand focus:outline-none"
+          defaultValue="通用版"
+        >
+          <option>通用版</option>
+          <option>法律版</option>
+          <option>医疗版</option>
+        </select>
+        <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
+      </div>
       <div className="ml-2 flex items-center gap-3">
         <Light on={h.gateway} label="Gateway" />
         <Light on={h.persisted} label="DB" />
@@ -35,14 +43,17 @@ export function TopBar({ identity, setIdentity }: { identity: Identity; setIdent
         <Light unknown label="Neo4j" />
       </div>
       <div className="ml-auto flex items-center gap-2">
+        <div className="relative">
+          <User className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
+          <input
+            className="w-24 rounded-md border border-line bg-ink-800 py-1 pl-7 pr-2 text-xs text-slate-200 focus:border-brand focus:outline-none"
+            value={identity.userId}
+            onChange={(e) => setIdentity({ ...identity, userId: e.target.value })}
+            title="用户"
+          />
+        </div>
         <input
-          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-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-violet-500/60 focus:outline-none"
+          className="w-24 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-brand focus:outline-none"
           value={identity.sessionId}
           onChange={(e) => setIdentity({ ...identity, sessionId: e.target.value })}
           title="会话"