feat(observability): 执行可视化 — 节点级实时轨迹（运行·观测）

把任务执行做成可观测：Dispatcher 在每个节点/阶段发结构化 ExecEvent，
经独立 NATS 通道回流，前端逐节点点亮（状态/耗时/工具入参产出）。

- shared: contract.ExecEvent + ExecSubject(sundynix.exec.<id>，与 Token 流分流)；
  bus.PublishExec/CompleteExec/SubscribeExec（core NATS，复用结束头）
- dispatcher: execTracer（自增 Seq 保序 + span 自动计耗时）；
  Orchestrator 加 ExecSink；通用图(init 召回 / 各 tool 入参→产出 / prompt / model
  首token+token数)与报告编排(规划大纲 / 各章并行 start-end / 渲染)全程埋点
- gateway: SubscribeExec + GET /tasks/:id/exec SSE（与 token 流并行）
- desktop: streamExec + deriveNodes(按 node 归并 start/end/error/info)；
  复用组件 ExecTrace（竖向轨道，按 kind 着色，运行中脉冲灯）；
  新 RunsView(运行·观测：轨迹+输出双栏)；BottomDrawer 轨迹/工具调用 tab 接真实数据；
  ReportView 加执行轨迹栏；左导航「运行」置就绪

实测：
- 报告任务 /exec：规划(2680ms,4章) → 4 章并行(seq 交错,各~7-8s 重叠=真并行,
  每章带 docs 知识库检索预览+成稿字数) → 渲染(docx 落盘)
- 通用图 /exec：tool:kb_search(678ms,入参→Milvus 产出) → prompt(2消息) →
  model(首token 860ms / 4 tokens)
- 浏览器(Preview)：报告页执行轨迹逐节点点亮、章节带耗时/字数/检索片段，完成后下载 Word

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

sundynix-desktop/frontend/src/views/ReportView.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from "react";
-import { generateReport, streamTokens, reportDownloadUrl, type Identity } from "../lib/api";
+import { generateReport, streamTokens, streamExec, reportDownloadUrl, type Identity, type ExecEvent } from "../lib/api";
+import { ExecTrace } from "../components/ExecTrace";
 
 type Phase = "idle" | "running" | "done" | "error";
 
@@ -10,22 +11,32 @@ export function ReportView({ identity }: { identity: Identity }) {
   const [kb, setKb] = useState("");
   const [phase, setPhase] = useState<Phase>("idle");
   const [out, setOut] = useState("");
+  const [exec, setExec] = useState<ExecEvent[]>([]);
   const [taskId, setTaskId] = useState("");
   const [err, setErr] = useState("");
   const closeRef = useRef<(() => void) | null>(null);
+  const execCloseRef = useRef<(() => void) | null>(null);
 
   const running = phase === "running";
 
   const onGenerate = async () => {
     if (!topic.trim() || running) return;
     closeRef.current?.();
+    execCloseRef.current?.();
     setPhase("running");
     setOut("");
+    setExec([]);
     setErr("");
     setTaskId("");
     try {
       const id = await generateReport(identity, topic.trim(), kb.trim() || undefined);
       setTaskId(id);
+      execCloseRef.current = streamExec(
+        id,
+        (ev) => setExec((xs) => [...xs, ev]),
+        () => {},
+        () => {},
+      );
       closeRef.current = streamTokens(
         id,
         (tok) => setOut((o) => o + tok),
@@ -95,21 +106,30 @@ export function ReportView({ identity }: { identity: Identity }) {
         </div>
       </div>
 
-      {/* 实时进度 / 正文 */}
-      <div className="flex min-h-0 flex-1 flex-col rounded-xl border border-line bg-ink-900 shadow-card">
-        <div className="flex items-center gap-2 border-b border-line px-4 py-2.5 text-[11px] text-slate-500">
-          <span className={`h-2 w-2 rounded-full ${running ? "animate-pulse bg-cyan-400" : phase === "done" ? "bg-emerald-400" : "bg-slate-600"}`} />
-          实时编排 · {taskId || "未开始"}
-        </div>
-        <div className="min-h-0 flex-1 overflow-y-auto p-4">
-          {out ? (
-            <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-slate-300">{out}</pre>
-          ) : (
-            <div className="flex h-full items-center justify-center text-sm text-slate-600">
-              输入主题并点击「生成报告」，这里将实时显示规划与撰写过程。
-            </div>
-          )}
-        </div>
+      {/* 执行轨迹 + 报告正文 */}
+      <div className="grid min-h-0 flex-1 grid-cols-[340px_1fr] gap-4">
+        <section className="flex min-h-0 flex-col rounded-xl border border-line bg-ink-900 shadow-card">
+          <div className="border-b border-line px-4 py-2.5 text-[11px] font-medium text-slate-400">执行轨迹</div>
+          <div className="min-h-0 flex-1 overflow-y-auto p-4">
+            <ExecTrace events={exec} phase={running ? "streaming" : phase === "done" ? "done" : phase === "error" ? "error" : "idle"} />
+          </div>
+        </section>
+
+        <section className="flex min-h-0 flex-col rounded-xl border border-line bg-ink-900 shadow-card">
+          <div className="flex items-center gap-2 border-b border-line px-4 py-2.5 text-[11px] text-slate-500">
+            <span className={`h-2 w-2 rounded-full ${running ? "animate-pulse bg-cyan-400" : phase === "done" ? "bg-emerald-400" : "bg-slate-600"}`} />
+            报告正文 · {taskId || "未开始"}
+          </div>
+          <div className="min-h-0 flex-1 overflow-y-auto p-4">
+            {out ? (
+              <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-slate-300">{out}</pre>
+            ) : (
+              <div className="flex h-full items-center justify-center text-sm text-slate-600">
+                输入主题并点击「生成报告」，这里将实时显示规划与撰写过程。
+              </div>
+            )}
+          </div>
+        </section>
       </div>
     </div>
   );