codingbuddy 4.4.0 → 4.5.0

package/dist/src/tui/hooks/use-tick.spec.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const vitest_1 = require("vitest");
+const ink_testing_library_1 = require("ink-testing-library");
+const ink_1 = require("ink");
+const use_tick_1 = require("./use-tick");
+function TestComponent({ intervalMs }) {
+    const tick = (0, use_tick_1.useTick)(intervalMs);
+    return react_1.default.createElement(ink_1.Text, null, String(tick));
+}
+(0, vitest_1.describe)('tui/hooks/useTick', () => {
+    (0, vitest_1.beforeEach)(() => {
+        vitest_1.vi.useFakeTimers();
+    });
+    (0, vitest_1.afterEach)(() => {
+        vitest_1.vi.useRealTimers();
+    });
+    (0, vitest_1.it)('should start at 0', () => {
+        const { lastFrame } = (0, ink_testing_library_1.render)(react_1.default.createElement(TestComponent, null));
+        (0, vitest_1.expect)(lastFrame()).toBe('0');
+    });
+    (0, vitest_1.it)('should increment after default interval (1000ms)', () => {
+        const { lastFrame } = (0, ink_testing_library_1.render)(react_1.default.createElement(TestComponent, null));
+        (0, vitest_1.expect)(lastFrame()).toBe('0');
+        (0, react_1.act)(() => {
+            vitest_1.vi.advanceTimersByTime(1000);
+        });
+        (0, vitest_1.expect)(lastFrame()).toBe('1');
+        (0, react_1.act)(() => {
+            vitest_1.vi.advanceTimersByTime(1000);
+        });
+        (0, vitest_1.expect)(lastFrame()).toBe('2');
+    });
+    (0, vitest_1.it)('should support custom interval', () => {
+        const { lastFrame } = (0, ink_testing_library_1.render)(react_1.default.createElement(TestComponent, { intervalMs: 500 }));
+        (0, vitest_1.expect)(lastFrame()).toBe('0');
+        (0, react_1.act)(() => {
+            vitest_1.vi.advanceTimersByTime(500);
+        });
+        (0, vitest_1.expect)(lastFrame()).toBe('1');
+        (0, react_1.act)(() => {
+            vitest_1.vi.advanceTimersByTime(500);
+        });
+        (0, vitest_1.expect)(lastFrame()).toBe('2');
+    });
+    (0, vitest_1.it)('should reset interval when intervalMs prop changes', () => {
+        const clearIntervalSpy = vitest_1.vi.spyOn(global, 'clearInterval');
+        const { lastFrame, rerender } = (0, ink_testing_library_1.render)(react_1.default.createElement(TestComponent, { intervalMs: 1000 }));
+        (0, react_1.act)(() => {
+            vitest_1.vi.advanceTimersByTime(1000);
+        });
+        (0, vitest_1.expect)(lastFrame()).toBe('1');
+        rerender(react_1.default.createElement(TestComponent, { intervalMs: 500 }));
+        (0, vitest_1.expect)(clearIntervalSpy).toHaveBeenCalled();
+        (0, react_1.act)(() => {
+            vitest_1.vi.advanceTimersByTime(500);
+        });
+        (0, vitest_1.expect)(lastFrame()).toBe('2');
+        clearIntervalSpy.mockRestore();
+    });
+    (0, vitest_1.it)('should cleanup interval on unmount', () => {
+        const clearIntervalSpy = vitest_1.vi.spyOn(global, 'clearInterval');
+        const { unmount } = (0, ink_testing_library_1.render)(react_1.default.createElement(TestComponent, null));
+        unmount();
+        (0, vitest_1.expect)(clearIntervalSpy).toHaveBeenCalled();
+        clearIntervalSpy.mockRestore();
+    });
+});
+//# sourceMappingURL=use-tick.spec.js.map

package/dist/src/tui/hooks/use-tick.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tick.spec.js","sourceRoot":"","sources":["../../../../src/tui/hooks/use-tick.spec.tsx"],"names":[],"mappings":"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"}

package/dist/src/tui/index.d.ts

@@ -17,4 +17,4 @@ export * from './types';
 export * from './dashboard-types';
 export { useDashboardState } from './hooks';
 export { useTerminalSize } from './hooks';
-export { useClock } from './hooks';
+export { useTick } from './hooks';

package/dist/src/tui/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClock = exports.useTerminalSize = exports.useDashboardState = exports.MultiSessionApp = exports.DashboardApp = void 0;
+exports.useTick = exports.useTerminalSize = exports.useDashboardState = exports.MultiSessionApp = exports.DashboardApp = void 0;
 exports.startTui = startTui;
 exports.renderMultiSession = renderMultiSession;
 const react_1 = require("react");
@@ -39,5 +39,5 @@ Object.defineProperty(exports, "useDashboardState", { enumerable: true, get: fun
 var hooks_2 = require("./hooks");
 Object.defineProperty(exports, "useTerminalSize", { enumerable: true, get: function () { return hooks_2.useTerminalSize; } });
 var hooks_3 = require("./hooks");
-Object.defineProperty(exports, "useClock", { enumerable: true, get: function () { return hooks_3.useClock; } });
+Object.defineProperty(exports, "useTick", { enumerable: true, get: function () { return hooks_3.useTick; } });
 //# sourceMappingURL=index.js.map

package/dist/src/tui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tui/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiBA,4BAGC;AAMD,gDAEC;AA5BD,iCAA0B;AAC1B,6BAA6B;AAE7B,mDAA+C;AAC/C,2DAAsD;AAatD,SAAgB,QAAQ,CAAC,OAAwB;IAC/C,MAAM,aAAa,GAAkB,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACtF,OAAO,IAAA,YAAM,EAAC,8BAAC,4BAAY,IAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAI,EAAE,aAAa,CAAC,CAAC;AAC7E,CAAC;AAMD,SAAgB,kBAAkB,CAAC,OAAyC;IAC1E,OAAO,IAAA,YAAM,EAAC,8BAAC,mCAAe,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,GAAI,CAAC,CAAC;AAC/D,CAAC;AAED,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AAErB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AAExB,0CAAwB;AACxB,oDAAkC;AAClC,iCAA4C;AAAnC,0GAAA,iBAAiB,OAAA;AAC1B,iCAA0C;AAAjC,wGAAA,eAAe,OAAA;AACxB,iCAAmC;AAA1B,iGAAA,QAAQ,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tui/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiBA,4BAGC;AAMD,gDAEC;AA5BD,iCAA0B;AAC1B,6BAA6B;AAE7B,mDAA+C;AAC/C,2DAAsD;AAatD,SAAgB,QAAQ,CAAC,OAAwB;IAC/C,MAAM,aAAa,GAAkB,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACtF,OAAO,IAAA,YAAM,EAAC,8BAAC,4BAAY,IAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAAI,EAAE,aAAa,CAAC,CAAC;AAC7E,CAAC;AAMD,SAAgB,kBAAkB,CAAC,OAAyC;IAC1E,OAAO,IAAA,YAAM,EAAC,8BAAC,mCAAe,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,GAAI,CAAC,CAAC;AAC/D,CAAC;AAED,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AAErB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AAExB,0CAAwB;AACxB,oDAAkC;AAClC,iCAA4C;AAAnC,0GAAA,iBAAiB,OAAA;AAC1B,iCAA0C;AAAjC,wGAAA,eAAe,OAAA;AACxB,iCAAkC;AAAzB,gGAAA,OAAO,OAAA"}

package/dist/src/tui-bundle.mjs

@@ -1431,8 +1431,21 @@ function useTerminalSize() {
   return { ...size, layoutMode: getLayoutMode(size.columns) };
 }
 
+// src/tui/hooks/use-tick.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useTick(intervalMs = 1e3) {
+  const [tick, setTick] = useState2(0);
+  useEffect2(() => {
+    const id = setInterval(() => {
+      setTick((prev) => prev + 1);
+    }, intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+  return tick;
+}
+
 // src/tui/hooks/use-dashboard-state.ts
-import { useReducer, useEffect as useEffect2 } from "react";
+import { useReducer, useEffect as useEffect3 } from "react";
 
 // src/tui/events/event-bus.ts
 var import_eventemitter2 = __toESM(require_eventemitter2());
@@ -3974,6 +3987,7 @@ function createInitialDashboardState() {
     tasks: [],
     eventLog: [],
     toolCalls: [],
+    activityHistory: [],
     objectives: [],
     activeSkills: [],
     toolInvokeCount: 0,
@@ -4075,7 +4089,8 @@ function dashboardReducer(state, action) {
       const entry = {
         timestamp: new Date(action.payload.timestamp).toTimeString().slice(0, 8),
         message: `${action.payload.toolName}${action.payload.agentId ? ` [${action.payload.agentId}]` : ""}`,
-        level: "info"
+        level: "info",
+        rawTimestamp: action.payload.timestamp
       };
       const base = state.eventLog.length >= EVENT_LOG_MAX ? state.eventLog.slice(1) : state.eventLog;
       const invokedAgentId = action.payload.agentId;
@@ -4103,11 +4118,24 @@ function dashboardReducer(state, action) {
         status: "completed"
       };
       const toolCallsBase = state.toolCalls.length >= TOOL_CALLS_MAX ? state.toolCalls.slice(1) : state.toolCalls;
+      const sec = Math.floor(action.payload.timestamp / 1e3);
+      const history = state.activityHistory;
+      const last = history.length > 0 ? history[history.length - 1] : null;
+      let activityHistory;
+      if (last && last.timestamp === sec) {
+        activityHistory = [
+          ...history.slice(0, -1),
+          { timestamp: sec, toolCalls: last.toolCalls + 1 }
+        ];
+      } else {
+        activityHistory = [...history.slice(-59), { timestamp: sec, toolCalls: 1 }];
+      }
       return {
         ...state,
         agents,
         eventLog: [...base, entry],
         toolCalls: [...toolCallsBase, toolCall],
+        activityHistory,
         toolInvokeCount: state.toolInvokeCount + 1
       };
     }
@@ -4181,7 +4209,7 @@ function dashboardReducer(state, action) {
 }
 function useDashboardState(eventBus) {
   const [state, dispatch] = useReducer(dashboardReducer, void 0, createInitialDashboardState);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!eventBus) return;
     const onActivated = (p) => dispatch({ type: "AGENT_ACTIVATED", payload: p });
     const onDeactivated = (p) => dispatch({ type: "AGENT_DEACTIVATED", payload: p });
@@ -4225,7 +4253,7 @@ function useDashboardState(eventBus) {
       eventBus.off(TUI_EVENTS.CONTEXT_UPDATED, onContextUpdated);
     };
   }, [eventBus]);
-  useEffect2(() => {
+  useEffect3(() => {
     const cleanupInterval = setInterval(() => {
       dispatch({ type: "CLEANUP_STALE_AGENTS", payload: { now: Date.now(), ttlMs: 3e4 } });
     }, 1e4);
@@ -4348,6 +4376,59 @@ function getAgentAvatar(agentName) {
   return "\u{1F916}";
 }
 
+// src/tui/components/live.pure.ts
+function formatElapsed(startedAt, now) {
+  const totalSec = Math.max(0, Math.floor((now - startedAt) / 1e3));
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  return min > 0 ? `${min}m ${sec}s` : `${sec}s`;
+}
+function formatRelativeTime(timestamp, now) {
+  const diffSec = Math.max(0, Math.floor((now - timestamp) / 1e3));
+  if (diffSec <= 2) return "just now";
+  if (diffSec < 60) return `${diffSec}s ago`;
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  return `${diffHr}h ago`;
+}
+var SPINNER_FRAMES = "\u280B\u2819\u2839\u2838\u283C\u2834\u2826\u2827";
+function spinnerFrame(tick) {
+  return SPINNER_FRAMES[tick % 8];
+}
+function pulseIcon(tick) {
+  return tick % 2 === 0 ? "\u25CF" : "\u25C9";
+}
+var SPARK_CHARS = "\u2581\u2582\u2583\u2584\u2585\u2586\u2587\u2588";
+function renderSparkline(samples, width) {
+  if (samples.length === 0) return "";
+  const visible = samples.slice(-width);
+  const min = Math.min(...visible);
+  const max = Math.max(...visible);
+  const range = max - min;
+  return visible.map((v) => {
+    if (range === 0) return SPARK_CHARS[0];
+    const idx = Math.round((v - min) / range * 7);
+    return SPARK_CHARS[idx];
+  }).join("");
+}
+function computeThroughput(samples) {
+  if (samples.length <= 1) return "0.0/min";
+  const first = samples[0];
+  const last = samples[samples.length - 1];
+  const durationMin = (last.timestamp - first.timestamp) / 60;
+  if (durationMin <= 0) return "0.0/min";
+  const totalCalls = samples.reduce((sum, s) => sum + s.toolCalls, 0);
+  return `${(totalCalls / durationMin).toFixed(1)}/min`;
+}
+function formatTimeWithSeconds(now) {
+  const d = new Date(now);
+  const h = String(d.getHours()).padStart(2, "0");
+  const m = String(d.getMinutes()).padStart(2, "0");
+  const s = String(d.getSeconds()).padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
 // src/tui/components/HeaderBar.tsx
 var PROCESS_MODES = ["PLAN", "ACT", "EVAL"];
 function ModeFlow({ currentMode }) {
@@ -4358,17 +4439,23 @@ function ModeFlow({ currentMode }) {
     return /* @__PURE__ */ React.createElement(React.Fragment, { key: mode }, i > 0 && /* @__PURE__ */ React.createElement(Text, { dimColor: true }, " \u2192 "), isActive ? /* @__PURE__ */ React.createElement(Text, { color, bold: true }, "[", mode, "]") : /* @__PURE__ */ React.createElement(Text, { dimColor: true }, mode));
   }));
 }
-function StateIndicator({ globalState }) {
-  const icon = GLOBAL_STATE_ICONS[globalState];
+function StateIndicator({
+  globalState,
+  tick
+}) {
+  const isRunning = globalState === "RUNNING";
+  const icon = isRunning && tick !== void 0 ? spinnerFrame(tick) : GLOBAL_STATE_ICONS[globalState];
   const color = GLOBAL_STATE_COLORS[globalState];
-  return /* @__PURE__ */ React.createElement(Text, { color, bold: globalState === "RUNNING" || globalState === "ERROR" }, icon, " ", globalState);
+  return /* @__PURE__ */ React.createElement(Text, { color, bold: isRunning || globalState === "ERROR" }, icon, " ", globalState);
 }
 function HeaderBar({
   workspace,
   currentMode,
   globalState,
   layoutMode,
-  width
+  width,
+  tick,
+  now
 }) {
   if (layoutMode === "narrow") {
     return /* @__PURE__ */ React.createElement(
@@ -4384,7 +4471,8 @@ function HeaderBar({
       /* @__PURE__ */ React.createElement(Box, { flexGrow: 1 }),
       /* @__PURE__ */ React.createElement(ModeFlow, { currentMode }),
       /* @__PURE__ */ React.createElement(Box, { flexGrow: 1 }),
-      /* @__PURE__ */ React.createElement(StateIndicator, { globalState })
+      /* @__PURE__ */ React.createElement(StateIndicator, { globalState, tick }),
+      now !== void 0 && /* @__PURE__ */ React.createElement(Text, { dimColor: true }, " ", formatTimeWithSeconds(now))
     );
   }
   return /* @__PURE__ */ React.createElement(
@@ -4396,7 +4484,7 @@ function HeaderBar({
       overflowX: "hidden",
       flexDirection: "row"
     },
-    /* @__PURE__ */ React.createElement(Box, { gap: 2, flexShrink: 1, minWidth: 0 }, /* @__PURE__ */ React.createElement(Text, { color: "cyan", bold: true }, "\u27E8\u27E9 CODINGBUDDY AGENT DASHBOARD"), /* @__PURE__ */ React.createElement(ModeFlow, { currentMode }), /* @__PURE__ */ React.createElement(StateIndicator, { globalState })),
+    /* @__PURE__ */ React.createElement(Box, { gap: 2, flexShrink: 1, minWidth: 0 }, /* @__PURE__ */ React.createElement(Text, { color: "cyan", bold: true }, "\u27E8\u27E9 CODINGBUDDY AGENT DASHBOARD"), /* @__PURE__ */ React.createElement(ModeFlow, { currentMode }), /* @__PURE__ */ React.createElement(StateIndicator, { globalState, tick }), now !== void 0 && /* @__PURE__ */ React.createElement(Text, { dimColor: true }, formatTimeWithSeconds(now))),
     /* @__PURE__ */ React.createElement(Box, { flexGrow: 1 }),
     /* @__PURE__ */ React.createElement(Box, { flexShrink: 1, overflowX: "hidden" }, /* @__PURE__ */ React.createElement(Text, { dimColor: true, wrap: "truncate" }, workspace))
   );
@@ -4915,10 +5003,18 @@ function FlowMap({
   layoutMode,
   width,
   height,
-  activeStage = null
+  activeStage = null,
+  tick,
+  now
 }) {
   const contentWidth = Math.max(1, width - 2);
   const contentHeight = Math.max(1, height - 3);
+  const hasRunningAgents = useMemo(
+    () => [...agents.values()].some((a) => a.status === "running"),
+    [agents]
+  );
+  const liveTick = hasRunningAgents ? tick ?? 0 : 0;
+  const liveNow = hasRunningAgents ? now : void 0;
   const compactContent = useMemo(() => {
     if (layoutMode !== "narrow") return null;
     return renderFlowMapCompact(agents);
@@ -4928,6 +5024,20 @@ function FlowMap({
     const buf = layoutMode === "wide" ? renderFlowMap(agents, edges, contentWidth, contentHeight, activeStage) : renderFlowMapSimplified(agents, contentWidth, contentHeight);
     return buf.toLinesDirect();
   }, [agents, edges, contentWidth, contentHeight, layoutMode, activeStage]);
+  const liveOverlays = useMemo(() => {
+    if (liveNow === void 0) return null;
+    const overlays = [];
+    for (const [id, agent] of agents) {
+      if (agent.status === "running" && agent.startedAt != null) {
+        overlays.push({
+          id,
+          icon: pulseIcon(liveTick),
+          elapsed: formatElapsed(agent.startedAt, liveNow)
+        });
+      }
+    }
+    return overlays.length > 0 ? overlays : null;
+  }, [agents, liveTick, liveNow]);
   if (layoutMode === "narrow") {
     return /* @__PURE__ */ React2.createElement(
       Box2,
@@ -4939,7 +5049,8 @@ function FlowMap({
         height
       },
       /* @__PURE__ */ React2.createElement(Text2, { bold: true, color: "cyan" }, "FLOW MAP"),
-      /* @__PURE__ */ React2.createElement(Text2, null, compactContent)
+      /* @__PURE__ */ React2.createElement(Text2, null, compactContent),
+      liveOverlays?.map((o) => /* @__PURE__ */ React2.createElement(Text2, { key: o.id, color: "yellow" }, o.icon, " ", o.elapsed))
     );
   }
   if (!lines) {
@@ -4965,7 +5076,8 @@ function FlowMap({
       height
     },
     /* @__PURE__ */ React2.createElement(Text2, { bold: true, color: "cyan" }, "FLOW MAP"),
-    lines.map((row, y) => /* @__PURE__ */ React2.createElement(ColorRow, { key: y, cells: row }))
+    lines.map((row, y) => /* @__PURE__ */ React2.createElement(ColorRow, { key: y, cells: row })),
+    liveOverlays?.map((o) => /* @__PURE__ */ React2.createElement(Text2, { key: o.id, color: "yellow" }, o.icon, " ", o.elapsed))
   );
 }
 
@@ -4985,6 +5097,13 @@ function formatLogTail(events, maxLines = 10) {
   const tail = events.slice(-maxLines);
   return tail.map((e) => `${e.timestamp} ${e.message}`).join("\n");
 }
+function formatLogTailRelative(events, now, maxLines = 10) {
+  const tail = events.slice(-maxLines);
+  return tail.map((e) => {
+    const ts = e.rawTimestamp != null ? formatRelativeTime(e.rawTimestamp, now) : e.timestamp;
+    return `${ts} ${e.message}`;
+  }).join("\n");
+}
 function formatSectionDivider(title, width = 50) {
   const prefix = "\u2500\u2500\u2500 ";
   const suffix = " ";
@@ -5071,6 +5190,8 @@ function FocusedAgentPanel({
   eventLog,
   contextDecisions = [],
   contextNotes = [],
+  tick,
+  now,
   width,
   height
 }) {
@@ -5093,7 +5214,10 @@ function FocusedAgentPanel({
   const statusLabel = agent.status.toUpperCase();
   const progressBar = formatEnhancedProgressBar(agent.progress);
   const objective = formatObjective(objectives);
-  const logs = formatLogTail(eventLog);
+  const logs = now != null ? formatLogTailRelative(eventLog, now) : formatLogTail(eventLog);
+  const isRunning = agent.status === "running";
+  const showSpinner = isRunning && tick != null;
+  const showElapsed = isRunning && now != null && agent.startedAt != null;
   return /* @__PURE__ */ React4.createElement(
     Box4,
     {
@@ -5103,7 +5227,7 @@ function FocusedAgentPanel({
       width,
       height
     },
-    /* @__PURE__ */ React4.createElement(Box4, { gap: 2 }, /* @__PURE__ */ React4.createElement(Text4, null, avatar), /* @__PURE__ */ React4.createElement(Text4, { bold: true }, agent.name), /* @__PURE__ */ React4.createElement(Text4, { color: statusColor, bold: true }, icon), /* @__PURE__ */ React4.createElement(Text4, { color: statusColor }, statusLabel), /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, agent.stage)),
+    /* @__PURE__ */ React4.createElement(Box4, { gap: 2 }, /* @__PURE__ */ React4.createElement(Text4, null, avatar), /* @__PURE__ */ React4.createElement(Text4, { bold: true }, agent.name), showSpinner ? /* @__PURE__ */ React4.createElement(Text4, { color: "cyan" }, spinnerFrame(tick)) : /* @__PURE__ */ React4.createElement(Text4, { color: statusColor, bold: true }, icon), /* @__PURE__ */ React4.createElement(Text4, { color: statusColor }, statusLabel), showElapsed && /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, formatElapsed(agent.startedAt, now)), /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, agent.stage)),
     /* @__PURE__ */ React4.createElement(Box4, { gap: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: "magenta" }, progressBar.bar), /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, progressBar.label)),
     /* @__PURE__ */ React4.createElement(SectionDivider, { title: "Objective" }),
     objective ? /* @__PURE__ */ React4.createElement(Text4, null, objective) : /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, "No objectives"),
@@ -5263,8 +5387,12 @@ function StageHealthBar({
   toolCount,
   agentCount,
   skillCount,
-  width
+  width,
+  activityHistory,
+  tick: _tick,
+  now: _now
 }) {
+  const hasActivity = activityHistory && activityHistory.length > 0;
   return /* @__PURE__ */ React6.createElement(
     Box6,
     {
@@ -5273,7 +5401,10 @@ function StageHealthBar({
       width,
       flexDirection: "column"
     },
-    /* @__PURE__ */ React6.createElement(Box6, null, /* @__PURE__ */ React6.createElement(Box6, { gap: 2 }, ["PLAN", "ACT", "EVAL"].map((mode) => /* @__PURE__ */ React6.createElement(StageStatDisplay, { key: mode, mode, stats: stageHealth[mode] }))), /* @__PURE__ */ React6.createElement(Box6, { flexGrow: 1 }), /* @__PURE__ */ React6.createElement(Box6, { gap: 2 }, bottlenecks.length > 0 && /* @__PURE__ */ React6.createElement(Text6, { color: "red", bold: true }, "\u26A1 Bottlenecks: ", bottlenecks.join(" / ")), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u{1F916} ", formatCount(agentCount)), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u2699 ", formatCount(skillCount)), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u{1F527} ", formatCount(toolCount))))
+    /* @__PURE__ */ React6.createElement(Box6, null, hasActivity && /* @__PURE__ */ React6.createElement(Box6, { gap: 1, marginRight: 1 }, /* @__PURE__ */ React6.createElement(Text6, { color: "cyan" }, renderSparkline(
+      activityHistory.map((s) => s.toolCalls),
+      10
+    )), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, computeThroughput(activityHistory))), /* @__PURE__ */ React6.createElement(Box6, { gap: 2 }, ["PLAN", "ACT", "EVAL"].map((mode) => /* @__PURE__ */ React6.createElement(StageStatDisplay, { key: mode, mode, stats: stageHealth[mode] }))), /* @__PURE__ */ React6.createElement(Box6, { flexGrow: 1 }), /* @__PURE__ */ React6.createElement(Box6, { gap: 2 }, bottlenecks.length > 0 && /* @__PURE__ */ React6.createElement(Text6, { color: "red", bold: true }, "\u26A1 Bottlenecks: ", bottlenecks.join(" / ")), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u{1F916} ", formatCount(agentCount)), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u2699 ", formatCount(skillCount)), /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "\u{1F527} ", formatCount(toolCount))))
   );
 }
 
@@ -5571,6 +5702,8 @@ function DashboardApp({
   workspace: workspaceProp
 }) {
   const { columns, rows, layoutMode } = useTerminalSize();
+  const tick = useTick(1e3);
+  const now = useMemo3(() => Date.now(), [tick]);
   const internalState = useDashboardState(externalState ? void 0 : eventBus);
   const state = externalState ?? internalState;
   const focusedAgent = state.focusedAgentId ? state.agents.get(state.focusedAgentId) ?? null : null;
@@ -5587,7 +5720,9 @@ function DashboardApp({
       currentMode: state.currentMode,
       globalState: state.globalState,
       layoutMode,
-      width: grid.header.width
+      width: grid.header.width,
+      tick,
+      now
     }
   ), layoutMode === "narrow" ? /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column" }, grid.checklistPanel.height > 0 && /* @__PURE__ */ React8.createElement(
     ChecklistPanel,
@@ -5608,7 +5743,9 @@ function DashboardApp({
       contextDecisions: state.contextDecisions,
       contextNotes: state.contextNotes,
       width: grid.focusedAgent.width,
-      height: grid.focusedAgent.height
+      height: grid.focusedAgent.height,
+      tick,
+      now
     }
   ), /* @__PURE__ */ React8.createElement(
     FlowMap,
@@ -5618,7 +5755,9 @@ function DashboardApp({
       layoutMode,
       width: grid.flowMap.width,
       height: grid.flowMap.height,
-      activeStage: state.currentMode
+      activeStage: state.currentMode,
+      tick,
+      now
     }
   )) : /* @__PURE__ */ React8.createElement(
     Box8,
@@ -5635,7 +5774,9 @@ function DashboardApp({
         layoutMode,
         width: grid.flowMap.width,
         height: grid.flowMap.height,
-        activeStage: state.currentMode
+        activeStage: state.currentMode,
+        tick,
+        now
       }
     ), /* @__PURE__ */ React8.createElement(
       ActivityVisualizer,
@@ -5669,7 +5810,9 @@ function DashboardApp({
         contextDecisions: state.contextDecisions,
         contextNotes: state.contextNotes,
         width: grid.focusedAgent.width,
-        height: grid.focusedAgent.height
+        height: grid.focusedAgent.height,
+        tick,
+        now
       }
     ))
   ), /* @__PURE__ */ React8.createElement(
@@ -5680,7 +5823,10 @@ function DashboardApp({
       toolCount: state.toolInvokeCount,
       agentCount: state.agentActivateCount,
       skillCount: state.skillInvokeCount,
-      width: grid.stageHealth.width
+      width: grid.stageHealth.width,
+      activityHistory: state.activityHistory,
+      tick,
+      now
     }
   ));
 }
@@ -5691,7 +5837,7 @@ import { Box as Box10, useInput } from "ink";
 import * as path8 from "path";
 
 // src/tui/hooks/use-multi-session-state.ts
-import { useState as useState2, useCallback, useEffect as useEffect3, useRef } from "react";
+import { useState as useState3, useCallback, useEffect as useEffect4, useRef } from "react";
 function toSessionState(managed) {
   return {
     pid: managed.instance.pid,
@@ -5711,10 +5857,10 @@ function getPidArray(sessions) {
   return [...sessions.keys()];
 }
 function useMultiSessionState(manager) {
-  const [sessions, setSessions] = useState2(
+  const [sessions, setSessions] = useState3(
     () => buildInitialSessions(manager)
   );
-  const [activeSessionPid, setActiveSessionPid] = useState2(() => {
+  const [activeSessionPid, setActiveSessionPid] = useState3(() => {
     const initial = manager.getSessions();
     return initial.length > 0 ? initial[0].instance.pid : null;
   });
@@ -5789,7 +5935,7 @@ function useMultiSessionState(manager) {
       eventCleanupRef.current.delete(pid);
     }
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     for (const managed of manager.getSessions()) {
       subscribeSession(managed.instance.pid, managed.eventBus);
     }
@@ -5993,28 +6139,6 @@ function createDefaultAgentState(params) {
   return state;
 }
 
-// src/tui/hooks/use-clock.ts
-import { useState as useState3, useEffect as useEffect4 } from "react";
-
-// src/tui/components/header-bar.pure.ts
-function formatTime(date) {
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  return `${hours}:${minutes}`;
-}
-
-// src/tui/hooks/use-clock.ts
-function useClock() {
-  const [time, setTime] = useState3(() => formatTime(/* @__PURE__ */ new Date()));
-  useEffect4(() => {
-    const interval = setInterval(() => {
-      setTime(formatTime(/* @__PURE__ */ new Date()));
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, []);
-  return time;
-}
-
 // src/tui/index.tsx
 function startTui(options) {
   const renderOptions = options.stdout ? { stdout: options.stdout } : {};
@@ -6035,9 +6159,9 @@ export {
   getLayoutMode,
   renderMultiSession,
   startTui,
-  useClock,
   useDashboardState,
-  useTerminalSize
+  useTerminalSize,
+  useTick
 };
 /*! Bundled license information: