' + __("Agent 拓扑（通道 → agent → 通道；圆环 = 负载）", "Agent topology (channel → agent → channel; ring = load)") + "
" +
+ ' 而不是 CSS offset-path / rAF：它由浏览器自己按
+ // SVG 用户坐标跑，不需要前端维护动画循环，也没有 path() 在缩放 viewBox 下
+ // 的坐标换算问题。跑完把节点摘掉，避免 DOM 累积。
+ function rtSpark(pathD, color) {
+ if (!pathD) return;
+ var svg = document.getElementById("rt-topo-svg");
+ if (!svg) return;
+ var c = document.createElementNS(RT_SVGNS, "circle");
+ c.setAttribute("r", "3.2");
+ c.setAttribute("fill", color || "#ffffff");
+ c.setAttribute("class", "rt-spark");
+ var am = document.createElementNS(RT_SVGNS, "animateMotion");
+ am.setAttribute("dur", "0.85s");
+ am.setAttribute("path", pathD);
+ am.setAttribute("fill", "freeze");
+ am.setAttribute("begin", "0s");
+ c.appendChild(am);
+ svg.appendChild(c);
+ setTimeout(function () { if (c.parentNode) c.parentNode.removeChild(c); }, 950);
+ }
+ // 输入：某条 inputch 来消息了（SSE channel_input）。
+ function rtSparkInput(source) {
+ rtSpark(_rtEdgeIn[source], "#88c0d0");
+ }
+ // 输出：某个 agent 往某条 outputch 写了东西（SSE agent_output）。
+ function rtSparkOutput(agentID, channel) {
+ if (!channel || !agentID) return;
+ rtSpark(_rtEdgeOut[agentID + "\u0000" + channel], "#ff7fac");
+ }
+
function renderRuntime() {
var el = document.getElementById("rt-panel");
if (!el) return;
@@ -819,7 +939,9 @@
var inputs = rt.input_channels || [];
// 数据签名（**不含 uptime**——它每秒都变，带上就等于没缓存）：整体没变就整块跳过。
- var sig = JSON.stringify([sc, residents, channels, inputs]);
+ // 签名里必须带 pipelinePhase：否则 SSE 把阶段推到下一格时，
+ // 数据没变 → 早退 → 滑块不动，只能等下一次 /runtime 轮询才追上。
+ var sig = JSON.stringify([sc, residents, channels, inputs, state.pipelinePhase]);
if (sig === _rtSig) return;
_rtSig = sig;
@@ -832,6 +954,7 @@
el.innerHTML =
'' + __("运行态", "Runtime") + "
" +
'
' +
+ '
' +
'
' +
'
' +
'
' +
@@ -871,7 +994,10 @@
__("背压", "backpressure") + " " + (sc.backpressure || 0) + "
' + __("中断栈（栈顶在上）", "Interrupt stack (top first)") + "
";
+ // ---- 段 4：中断栈 ----
+ h = '' + __("中断栈", "Interrupt stack") + "
";
+ // 深度先给一条进度条（"压了几层 / 上限几层"一眼可读），下面再列具体帧。
+ h += rtSlider(stack, maxStack, __("深度", "depth"), stack + " / " + maxStack);
if (frames.length) {
h += '';
frames.forEach(function (f, i) {
@@ -934,15 +1062,12 @@
}
put("stack", h);
- // ---- 段 4：拓扑（通道 + 归属 + 路由 画在同一张图上）----
+ // ---- 段 5：Agent 拓扑 ----
//
- // 归属不再单开一项：通道属于谁是**拓扑的一部分**（左边这些输入口
- // 分别被谁接管），拆成两张表反而看不出关系。整张图用 SVG 画，
- // 文字只保留通道名与分组名，其余信息全部用图形编码：
- // 归属=容器/配色、容量=节点内细条、输出能力=彩色圆点、路由=连线。
- var rootID = rt.agent_id || "";
- var ownerGroups = rtOwnerGroups(inputs, residents, rootID);
- put("topo", rtTopologySvg(ownerGroups, channels));
+ // 每个 agent 一条横带：左是归它的 inputch、中间是它自己（圆环 = 负载）、
+ // 右是它能写的 outputch，连线即路由。归属、路由、容量、负载全部画进
+ // 同一张 SVG，不再单开"通道分配"一节——那本来就是这个拓扑的一部分。
+ put("topo", rtAgentTopology(rtAgents(rt)));
}
// loadRuntime 拉运行态小快照并就地重绘面板（约 2KB，可秒级轮询）。
@@ -2901,6 +3026,9 @@
try {
var ev = JSON.parse(e.data);
var p = ev.payload || {};
+ // 光点：agent → 输出通道。总览页拓扑靠它做"消息出去了"的动画；
+ // 其它页没有该 SVG，rtSparkOutput 查不到元素就是 no-op。
+ if (p.channel) rtSparkOutput(ev.source || "", p.channel);
console.log(
"[SSE] agent_output received",
p.content ? p.content.substring(0, 50) : "(empty)",
@@ -3145,6 +3273,15 @@
var tool = p.tool || "";
if (p.channel === "_consolidation_") return;
console.log("[SSE] stage event", phase, tool);
+ // 驱动总览页的"阶段管道"滑块：滑到当前阶段；一轮跑完（或 2.5s 无新
+ // 事件）自动回到空闲，避免留下一个永远停在 after_output 的假状态。
+ state.pipelinePhase = phase;
+ if (state.pipelineTimer) clearTimeout(state.pipelineTimer);
+ state.pipelineTimer = setTimeout(function () {
+ state.pipelinePhase = "";
+ if (document.getElementById("rt-sec-pipe")) renderRuntime();
+ }, 2500);
+ if (document.getElementById("rt-sec-pipe")) renderRuntime();
if (phase === "pre_action") {
state.chatStage = __("AI 思考中...", "AI thinking...");
} else if (phase === "before_toolcall") {
@@ -3166,6 +3303,17 @@
console.error("[SSE] stage error", ex);
}
});
+ // channel_input：内核在输入进来时另发的一条轻量事件（只带通道名与 agent
+ // id，不带正文）。总览页拓扑靠它画"光点进入 agent"。
+ es.addEventListener("channel_input", function (e) {
+ try {
+ var d = JSON.parse(e.data);
+ var src = d.source || "";
+ if (src) rtSparkInput(src);
+ } catch (ex) {
+ console.error("[SSE] channel_input error", ex);
+ }
+ });
es.onopen = function () {
console.log("[SSE] connection opened");
};
diff --git a/internal/plugins/webui/handler_chat.go b/internal/plugins/webui/handler_chat.go
index 01d9e65..43c3dd0 100644
--- a/internal/plugins/webui/handler_chat.go
+++ b/internal/plugins/webui/handler_chat.go
@@ -771,6 +771,29 @@ func (h *Handler) handleChatEvents(w http.ResponseWriter, r *http.Request) {
})
unsubs = append(unsubs, unsub)
}
+
+ // channel_input：把「哪条输入通道刚进来一条消息、由哪个 agent 接手」单独推一条
+ // **轻量**事件，供总览页拓扑画「光点进入 agent」的动画。
+ //
+ // 为什么不直接把 raw_input 放进 subTypes：那条事件的 payload 带整条输入正文
+ // （用户消息，可能几 KB），而拓扑只需要 `source`（通道名）与发出者的 agent id。
+ // 全量转发会让每次用户说话都在 SSE 上多背一份正文。
+ unsubInput := h.sdk.Subscribe(sdk.EventRawInput, func(evt *sdk.Event) {
+ src, _ := evt.Payload["source"].(string)
+ if src == "" {
+ return
+ }
+ data, _ := json.Marshal(map[string]interface{}{
+ "type": "channel_input",
+ "source": src,
+ "agent": evt.Source,
+ "timestamp": evt.Timestamp,
+ })
+ seq++
+ id := fmt.Sprintf("%d-%d", evt.Timestamp, seq)
+ sendSSE(writeCh, id, "channel_input", string(data))
+ })
+ unsubs = append(unsubs, unsubInput)
defer func() {
for _, unsub := range unsubs {
unsub()
diff --git a/internal/sdk/status.go b/internal/sdk/status.go
index 79d31f5..e83e8d1 100644
--- a/internal/sdk/status.go
+++ b/internal/sdk/status.go
@@ -121,6 +121,15 @@ type ResidentStatus struct {
AllowedOutputs []string `json:"allowed_outputs,omitempty"`
InputChTable int `json:"input_ch_table"`
CreatedAt string `json:"created_at,omitempty"`
+
+ // 以下四项是该驻留子**自己的**调度器积压摘要，用于 per-agent 负载环形图。
+ //
+ // 根 agent 的积压看 KernelStatus.Scheduler；每个驻留子是独立 agent、
+ // 各跑各的调度器，必须分别给，否则「哪个子忙」在界面无从判断。
+ ReadyQueueDepth int `json:"ready_queue_depth"`
+ PendingInterrupts int `json:"pending_interrupts"`
+ SuspendStack int `json:"suspend_stack"`
+ InterruptQueues [5]int `json:"interrupt_queues"`
}
// SchedulerTask 是任务的最小标识（不暴露帧内容）。