@wrongstack/tui 0.8.0 → 0.8.4

package/dist/index.js

@@ -721,6 +721,10 @@ function fmtTokens(n) {
   if (n < 1e6) return `${(n / 1e3).toFixed(1)}k`;
   return `${(n / 1e6).toFixed(1)}M`;
 }
+function fmtCost2(n) {
+  if (n === 0) return "\u2014";
+  return `$${n.toFixed(3)}`;
+}
 function FleetMonitor({
   entries,
   totalCost,
@@ -730,17 +734,19 @@ function FleetMonitor({
 }) {
   const all = Object.values(entries);
   const running = all.filter((e) => e.status === "running");
+  const idle = all.filter((e) => e.status === "idle").length;
   const done = all.filter((e) => e.status === "success").length;
   const failed = all.filter((e) => e.status === "failed" || e.status === "timeout").length;
   const concurrencyRatio = maxConcurrent > 0 ? running.length / maxConcurrent : 0;
-  const maxTools = Math.max(1, ...all.map((e) => e.toolCalls));
   const ordered = [...all].sort((a, b) => {
     const ra = a.status === "running" ? 0 : a.status === "idle" ? 1 : 2;
     const rb = b.status === "running" ? 0 : b.status === "idle" ? 1 : 2;
     if (ra !== rb) return ra - rb;
+    if (ra === 2) return b.lastEventAt - a.lastEventAt;
     return a.startedAt - b.startedAt;
   });
-  const shown = ordered.slice(0, 8);
+  const shown = ordered.slice(0, 12);
+  const overflow = all.length - shown.length;
   const events = [];
   for (const e of all) {
     events.push({ at: e.startedAt, icon: "\u25CF", color: "cyan", text: `${e.name} spawned` });
@@ -763,15 +769,19 @@ function FleetMonitor({
     }
   }
   events.sort((a, b) => b.at - a.at);
-  const timeline = events.slice(0, 6);
+  const timeline = events.slice(0, 8);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
     /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "FLEET MONITOR" }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "FLEET \xB7 ORCHESTRATION" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
       /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
         "\u25B6",
         running.length
       ] }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "\u25CB",
+        idle
+      ] }),
       /* @__PURE__ */ jsxs(Text, { color: "green", children: [
         "\u2713",
         done
@@ -786,7 +796,7 @@ function FleetMonitor({
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "concurrency" }),
       /* @__PURE__ */ jsxs(Text, { color: "cyan", children: [
         "[",
-        renderProgress(concurrencyRatio, 10),
+        renderProgress(concurrencyRatio, 12),
         "]"
       ] }),
       /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
@@ -804,36 +814,33 @@ function FleetMonitor({
       /* @__PURE__ */ jsx(Text, { color: "green", children: `  $${totalCost.toFixed(3)}` })
     ] }),
     shown.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No subagents yet \u2014 spawn with /fleet spawn or /fleet dispatch." }) : null,
-    shown.map((e) => {
-      const s = STATUS[e.status];
-      const elapsed = e.status === "running" ? fmtElapsed(Math.max(0, nowTick - e.startedAt)) : e.status;
-      const spark = sparkline(bucketActivity(e.recentTools, nowTick));
-      const tool = e.currentTool?.name ?? e.recentTools[e.recentTools.length - 1]?.name ?? "";
-      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
-          /* @__PURE__ */ jsx(Text, { color: s.color, bold: true, children: s.icon }),
-          /* @__PURE__ */ jsx(Text, { bold: true, children: e.name.padEnd(12).slice(0, 12) }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: elapsed.padEnd(7).slice(0, 7) }),
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: renderProgress(e.toolCalls / maxTools, 10) }),
-          /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-            "L",
-            e.iterations,
-            " ",
-            e.toolCalls,
-            "t"
-          ] }),
+    shown.length > 0 ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "name".padEnd(16) }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "status".padEnd(10) }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "L/t".padEnd(8) }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "elapsed".padEnd(8) }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "cost" })
+      ] }),
+      shown.map((e) => {
+        const s = STATUS[e.status];
+        const elapsed = e.status === "running" ? fmtElapsed(Math.max(0, nowTick - e.startedAt)) : fmtElapsed(Math.max(0, nowTick - e.lastEventAt)) + " ago";
+        return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
+          /* @__PURE__ */ jsx(Text, { color: s.color, children: s.icon }),
+          /* @__PURE__ */ jsx(Text, { children: e.name.padEnd(16).slice(0, 16) }),
+          /* @__PURE__ */ jsx(Text, { color: s.color, children: e.status.padEnd(10) }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: `L${e.iterations} ${e.toolCalls}t`.padEnd(8) }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: elapsed.padEnd(8).slice(0, 8) }),
+          /* @__PURE__ */ jsx(Text, { color: "yellow", children: fmtCost2(e.cost) }),
           e.extensions && e.extensions > 0 ? /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
-            "\u26A1\xD7",
+            " \u26A1\xD7",
             e.extensions
           ] }) : null
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " }),
-          /* @__PURE__ */ jsx(Text, { color: "green", children: spark }),
-          tool ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: tool }) : null
-        ] })
-      ] }, e.id);
-    }),
+        ] }, e.id);
+      }),
+      overflow > 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  \u2026 +${overflow} more` }) : null
+    ] }) : null,
     timeline.length > 0 ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "timeline" }),
       timeline.map((ev, i) => (
@@ -855,11 +862,19 @@ var STATUS2 = {
   timeout: { icon: "\u23F1", color: "yellow" },
   stopped: { icon: "\u2298", color: "gray" }
 };
+function isTerminal(status) {
+  return status === "success" || status === "failed" || status === "timeout" || status === "stopped";
+}
 function fmtTokens2(n) {
   if (n < 1e3) return String(n);
   if (n < 1e6) return `${(n / 1e3).toFixed(1)}k`;
   return `${(n / 1e6).toFixed(1)}M`;
 }
+function snippet(s, max = 72) {
+  const oneLine2 = s.replace(/\s+/g, " ").trim();
+  if (oneLine2.length <= max) return oneLine2;
+  return `${oneLine2.slice(0, max - 1)}\u2026`;
+}
 function AgentsMonitor({
   entries,
   totalCost,
@@ -867,81 +882,69 @@ function AgentsMonitor({
   nowTick
 }) {
   const all = Object.values(entries);
-  const running = all.filter((e) => e.status === "running");
-  const done = all.filter((e) => e.status === "success").length;
-  const failed = all.filter((e) => e.status === "failed" || e.status === "timeout").length;
-  const maxTools = Math.max(1, ...all.map((e) => e.toolCalls));
-  const ordered = [...all].sort((a, b) => {
-    const ra = a.status === "running" ? 0 : a.status === "idle" ? 1 : 2;
-    const rb = b.status === "running" ? 0 : b.status === "idle" ? 1 : 2;
-    if (ra !== rb) return ra - rb;
+  const live = all.filter((e) => !isTerminal(e.status));
+  const running = live.filter((e) => e.status === "running").length;
+  const totalDone = all.filter((e) => e.status === "success").length;
+  const totalFailed = all.filter((e) => e.status === "failed" || e.status === "timeout").length;
+  const ordered = [...live].sort((a, b) => {
+    if (a.status === "running" && b.status !== "running") return -1;
+    if (a.status !== "running" && b.status === "running") return 1;
     return a.startedAt - b.startedAt;
   });
-  const shown = ordered.slice(0, 20);
-  const events = [];
-  for (const e of all) {
-    events.push({ at: e.startedAt, icon: "\u25CF", color: "cyan", text: `${e.name} spawned` });
-    if (e.status !== "running" && e.status !== "idle") {
-      const s = STATUS2[e.status];
-      events.push({
-        at: e.lastEventAt,
-        icon: s.icon,
-        color: s.color,
-        text: `${e.name} ${e.status} (${e.toolCalls}t)`
-      });
-    }
-    if (e.budgetWarning) {
-      events.push({
-        at: e.budgetWarning.at,
-        icon: "\u26A1",
-        color: "yellow",
-        text: `${e.name} ${e.budgetWarning.kind} ${e.budgetWarning.used}/${e.budgetWarning.limit} \u2014 extending`
-      });
-    }
-  }
-  events.sort((a, b) => b.at - a.at);
-  const timeline = events.slice(0, 6);
+  const shown = ordered.slice(0, 8);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "magenta", paddingX: 1, children: [
     /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "magenta", children: "AGENTS MONITOR" }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "magenta", children: "AGENTS \xB7 LIVE" }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2502" }),
       /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
         "\u25B6",
-        running.length
+        running
       ] }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "done" }),
       /* @__PURE__ */ jsxs(Text, { color: "green", children: [
         "\u2713",
-        done
+        totalDone
       ] }),
-      failed > 0 ? /* @__PURE__ */ jsxs(Text, { color: "red", children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\xB7" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "failed" }),
+      totalFailed > 0 ? /* @__PURE__ */ jsxs(Text, { color: "red", children: [
         "\u2717",
-        failed
+        totalFailed
       ] }) : null,
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\xB7 Ctrl+G to close" })
     ] }),
     /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "agents" }),
-      /* @__PURE__ */ jsx(Text, { color: "magenta", children: all.length }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "shown" }),
+      /* @__PURE__ */ jsx(Text, { color: "magenta", children: live.length }),
       totalTokens ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        " ",
         fmtTokens2(totalTokens.input),
         "\u2191 ",
         fmtTokens2(totalTokens.output),
         "\u2193"
       ] }) : null,
-      /* @__PURE__ */ jsx(Text, { color: "green", children: `  $${totalCost.toFixed(3)}` })
+      /* @__PURE__ */ jsxs(Text, { color: "green", children: [
+        "$",
+        totalCost.toFixed(3)
+      ] })
     ] }),
-    shown.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No subagents yet \u2014 spawn with /spawn or /fleet dispatch." }) : null,
+    shown.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No live agents \u2014 spawn with /spawn or /fleet dispatch." }) : null,
     shown.map((e) => {
       const s = STATUS2[e.status];
       const elapsed = e.status === "running" ? fmtElapsed(Math.max(0, nowTick - e.startedAt)) : e.status;
       const spark = sparkline(bucketActivity(e.recentTools, nowTick));
-      const tool = e.currentTool?.name ?? e.recentTools[e.recentTools.length - 1]?.name ?? "";
-      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+      const lastTool = e.recentTools[e.recentTools.length - 1];
+      const lastMessage = e.recentMessages[e.recentMessages.length - 1];
+      const streamTail = e.streamingText ? snippet(e.streamingText.slice(-160)) : "";
+      const toolElapsed = e.currentTool ? Math.max(0, nowTick - e.currentTool.startedAt) : 0;
+      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
           /* @__PURE__ */ jsx(Text, { color: s.color, bold: true, children: s.icon }),
-          /* @__PURE__ */ jsx(Text, { bold: true, children: e.name.padEnd(14).slice(0, 14) }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: elapsed.padEnd(8).slice(0, 8) }),
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: renderProgress(e.toolCalls / maxTools, 10) }),
+          /* @__PURE__ */ jsx(Text, { bold: true, children: e.name }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\xB7" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: elapsed }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\xB7" }),
           /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
             "L",
             e.iterations,
@@ -954,24 +957,46 @@ function AgentsMonitor({
             e.extensions
           ] }) : null
         ] }),
-        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " }),
-          /* @__PURE__ */ jsx(Text, { color: "green", children: spark }),
-          tool ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: tool }) : null
-        ] })
+        e.status === "running" && e.currentTool ? /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, paddingLeft: 2, children: [
+          /* @__PURE__ */ jsxs(Text, { color: "cyan", children: [
+            "\u2192 ",
+            e.currentTool.name
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+            "(",
+            toolElapsed,
+            "ms)"
+          ] })
+        ] }) : null,
+        spark || lastTool ? /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, paddingLeft: 2, children: [
+          /* @__PURE__ */ jsx(Text, { color: "green", children: spark || "" }),
+          lastTool ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+            "last: ",
+            lastTool.name,
+            typeof lastTool.durationMs === "number" ? ` ${lastTool.durationMs}ms` : "",
+            lastTool.ok === false ? " \u2717" : ""
+          ] }) : null
+        ] }) : null,
+        e.status === "running" && streamTail ? /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+          ">",
+          " ",
+          streamTail
+        ] }) }) : null,
+        (e.status !== "running" || !streamTail) && lastMessage ? /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+          "msg: ",
+          snippet(lastMessage.text)
+        ] }) }) : null,
+        e.budgetWarning ? /* @__PURE__ */ jsx(Box, { paddingLeft: 2, children: /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+          "\u26A1 ",
+          e.budgetWarning.kind,
+          " ",
+          e.budgetWarning.used,
+          "/",
+          e.budgetWarning.limit,
+          " \u2014 extending"
+        ] }) }) : null
       ] }, e.id);
-    }),
-    timeline.length > 0 ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "timeline" }),
-      timeline.map((ev, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: timeline is rebuilt per render
-        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", gap: 1, children: [
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: `${fmtElapsed(Math.max(0, nowTick - ev.at))} ago`.padEnd(10) }),
-          /* @__PURE__ */ jsx(Text, { color: ev.color, children: ev.icon }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: ev.text })
-        ] }, i)
-      ))
-    ] }) : null
+    })
   ] });
 }
 
@@ -1155,7 +1180,17 @@ function padCell(text, width, align) {
 }
 function History({ entries, streamingText, toolStream }) {
   const { stdout } = useStdout();
-  const termWidth = stdout?.columns ?? 80;
+  const [termSize, setTermSize] = useState({ columns: stdout?.columns ?? 80, rows: stdout?.rows ?? 24 });
+  useEffect(() => {
+    const handleResize = () => {
+      setTermSize({ columns: stdout?.columns ?? 80, rows: stdout?.rows ?? 24 });
+    };
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, [stdout]);
+  const termWidth = termSize.columns;
   const tail = streamingText ? tailForDisplay(streamingText, MAX_STREAM_DISPLAY_CHARS) : "";
   const toolTail = toolStream?.text ? tailForDisplay(toolStream.text, MAX_STREAM_DISPLAY_CHARS) : "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1954,12 +1989,12 @@ function formatMatchHit(hit) {
     const o = hit;
     const file = stringOf(o["file"]) ?? stringOf(o["path"]);
     const line = numOf(o["line"]) ?? numOf(o["lineNumber"]);
-    const snippet = stringOf(o["text"]) ?? stringOf(o["match"]) ?? stringOf(o["preview"]);
+    const snippet2 = stringOf(o["text"]) ?? stringOf(o["match"]) ?? stringOf(o["preview"]);
     if (file) {
       const head = line !== void 0 ? `${shortenPath(file, 40)}:${line}` : shortenPath(file, 50);
-      return snippet ? `${head}  ${truncMid(snippet.replace(/\s+/g, " "), 40)}` : head;
+      return snippet2 ? `${head}  ${truncMid(snippet2.replace(/\s+/g, " "), 40)}` : head;
     }
-    if (snippet) return truncMid(snippet, 70);
+    if (snippet2) return truncMid(snippet2, 70);
   }
   return void 0;
 }
@@ -3102,6 +3137,50 @@ function reducer(state, action) {
         fleetTokens: action.input !== void 0 || action.output !== void 0 ? { input: action.input ?? state.fleetTokens.input, output: action.output ?? state.fleetTokens.output } : state.fleetTokens
       };
     }
+    case "leaderIterStart": {
+      return {
+        ...state,
+        leader: {
+          ...state.leader,
+          iterations: state.leader.iterations + 1,
+          iterating: true,
+          lastEventAt: Date.now()
+        }
+      };
+    }
+    case "leaderIterEnd": {
+      return {
+        ...state,
+        leader: { ...state.leader, iterating: false, lastEventAt: Date.now() }
+      };
+    }
+    case "leaderToolStart": {
+      return {
+        ...state,
+        leader: {
+          ...state.leader,
+          currentTool: { name: action.name, startedAt: Date.now() },
+          lastEventAt: Date.now()
+        }
+      };
+    }
+    case "leaderToolEnd": {
+      const now = Date.now();
+      const recentTools = [
+        ...state.leader.recentTools,
+        { name: action.name, ok: action.ok, durationMs: action.durationMs, at: now }
+      ].slice(-8);
+      return {
+        ...state,
+        leader: {
+          ...state.leader,
+          toolCalls: state.leader.toolCalls + 1,
+          currentTool: void 0,
+          recentTools,
+          lastEventAt: now
+        }
+      };
+    }
     case "setStreamFleet": {
       return { ...state, streamFleet: action.enabled };
     }
@@ -3299,6 +3378,15 @@ function App({
     confirmQueue: [],
     contextChipVersion: 0,
     fleet: {},
+    leader: {
+      iterations: 0,
+      toolCalls: 0,
+      recentTools: [],
+      currentTool: void 0,
+      startedAt: Date.now(),
+      lastEventAt: Date.now(),
+      iterating: false
+    },
     fleetCost: 0,
     fleetTokens: { input: 0, output: 0 },
     streamFleet: true,
@@ -3396,6 +3484,25 @@ function App({
     }
     return { running, idle, pending: 0, completed };
   }, [state.fleet]);
+  const entriesWithLeader = useMemo(() => {
+    const leaderEntry = {
+      id: "leader",
+      name: "LEADER",
+      provider,
+      model,
+      status: state.status === "running" || state.status === "streaming" || state.leader.iterating ? "running" : "idle",
+      streamingText: "",
+      iterations: state.leader.iterations,
+      toolCalls: state.leader.toolCalls,
+      recentTools: state.leader.recentTools,
+      recentMessages: [],
+      cost: 0,
+      startedAt: state.leader.startedAt,
+      lastEventAt: state.leader.lastEventAt,
+      currentTool: state.leader.currentTool
+    };
+    return { leader: leaderEntry, ...state.fleet };
+  }, [state.fleet, state.leader, state.status, provider, model]);
   const STREAM_COLORS = ["cyan", "magenta", "yellow", "green", "blue"];
   const labelsRef = useRef(/* @__PURE__ */ new Map());
   const labelFor = (id, name) => {
@@ -3411,32 +3518,6 @@ function App({
     m.set(id, v);
     return v;
   };
-  const fleetAgents = useMemo(() => {
-    const entries = Object.entries(state.fleet);
-    if (entries.length === 0) return void 0;
-    const active = entries.filter(([_id, e]) => e.status === "running" || e.status === "idle");
-    if (active.length === 0) return void 0;
-    active.sort((a, b) => {
-      const sa = a[1].status === "running" ? 0 : 1;
-      const sb = b[1].status === "running" ? 0 : 1;
-      if (sa !== sb) return sa - sb;
-      return a[1].startedAt - b[1].startedAt;
-    });
-    return active.slice(0, 4).map(([id, e]) => {
-      const lbl = labelFor(id, e.name);
-      return {
-        label: lbl.label,
-        color: lbl.color,
-        elapsedMs: Math.max(0, nowTick - e.startedAt),
-        toolCalls: e.toolCalls,
-        running: e.status === "running",
-        // Last/current action, so the 4th line shows what each agent is
-        // doing right now (e.g. "▶ 12s · 8t · bash") rather than just counts.
-        tool: e.currentTool?.name,
-        extensions: e.extensions
-      };
-    });
-  }, [state.fleet, nowTick]);
   const [planCounts, setPlanCounts] = useState(null);
   useEffect(() => {
     const planPath = agent.ctx.meta["plan.path"];
@@ -3851,6 +3932,13 @@ function App({
     });
     const offToolStart = events.on("tool.started", (e) => {
       dispatch({ type: "toolStarted", id: e.id, name: e.name });
+      dispatch({ type: "leaderToolStart", name: e.name });
+    });
+    const offIterStart = events.on("iteration.started", () => {
+      dispatch({ type: "leaderIterStart" });
+    });
+    const offIterEnd = events.on("iteration.completed", () => {
+      dispatch({ type: "leaderIterEnd" });
     });
     const offToolProgress = events.on("tool.progress", (e) => {
       if (e.event.type !== "partial_output" || !e.event.text) return;
@@ -3882,6 +3970,7 @@ function App({
       });
       dispatch({ type: "toolEnded", name: e.name });
       dispatch({ type: "toolStreamClear", name: e.name });
+      dispatch({ type: "leaderToolEnd", name: e.name, ok: e.ok, durationMs: e.durationMs });
       if (e.ok && e.name === "todo") {
         dispatch({
           type: "addEntry",
@@ -3941,6 +4030,8 @@ function App({
     return () => {
       offDelta();
       offToolStart();
+      offIterStart();
+      offIterEnd();
       offToolProgress();
       offTool();
       offRetry();
@@ -4112,16 +4203,26 @@ function App({
   }, [events, onClearHistory]);
   useEffect(() => {
     const offFired = events.on("compaction.fired", (e) => {
-      const { level, tokens, load, maxContext: maxContext2, report, aggressive } = e;
+      const { level, tokens, load, maxContext: maxContext2, report } = e;
       const pct = (load * 100).toFixed(0);
       const before = report.before;
       const after = report.after;
       const saved = before - after;
+      if (saved <= 0) {
+        dispatch({
+          type: "addEntry",
+          entry: {
+            kind: "info",
+            text: `\u25B8 compaction skipped at ${level} \u2014 load ${pct}% (${tokens.toLocaleString()} of ${maxContext2.toLocaleString()} tok). preserveK protects recent turns; nothing to elide.`
+          }
+        });
+        return;
+      }
       const table = [
-        `\u25B8 context compacted at ${level} (${pct}% of ${maxContext2.toLocaleString()} tok)`,
-        `  tokens before  ${before.toLocaleString().padStart(8)}`,
-        `  tokens after   ${after.toLocaleString().padStart(8)}`,
-        `  saved         ${saved.toLocaleString().padStart(8)}  (${(saved / before * 100).toFixed(1)}%)`
+        `\u25B8 context compacted at ${level} \u2014 load ${pct}% (${tokens.toLocaleString()} of ${maxContext2.toLocaleString()} tok, full request)`,
+        `  msg tokens before ${before.toLocaleString().padStart(8)}`,
+        `  msg tokens after  ${after.toLocaleString().padStart(8)}`,
+        `  saved            ${saved.toLocaleString().padStart(8)}  (${(saved / before * 100).toFixed(1)}%)`
       ];
       for (const line of table) {
         dispatch({ type: "addEntry", entry: { kind: "info", text: line } });
@@ -4130,7 +4231,7 @@ function App({
     const offFailed = events.on("compaction.failed", (e) => {
       const { level, load, maxContext: maxContext2, fatal } = e;
       const pct = (load * 100).toFixed(0);
-      const text = fatal ? `\u2717 compaction failed at ${level} (${pct}% of ${maxContext2.toLocaleString()} tok) \u2014 FATAL` : `\u26A0 compaction failed at ${level} (${pct}% of ${maxContext2.toLocaleString()} tok) \u2014 continuing`;
+      const text = fatal ? `\u2717 compaction failed at ${level} \u2014 load ${pct}% of ${maxContext2.toLocaleString()} tok \u2014 FATAL` : `\u26A0 compaction failed at ${level} \u2014 load ${pct}% of ${maxContext2.toLocaleString()} tok \u2014 continuing`;
       dispatch({ type: "addEntry", entry: { kind: fatal ? "error" : "warn", text } });
     });
     return () => {
@@ -5314,7 +5415,6 @@ User message:
         todos,
         plan: planCounts ?? void 0,
         fleet: fleetCounts,
-        fleetAgents,
         git: gitInfo,
         context: contextWindow,
         projectName,
@@ -5328,13 +5428,12 @@ User message:
     state.agentsMonitorOpen ? /* @__PURE__ */ jsx(
       AgentsMonitor,
       {
-        entries: state.fleet,
+        entries: entriesWithLeader,
         totalCost: state.fleetCost,
         totalTokens: state.fleetTokens,
         nowTick
       }
-    ) : null,
-    state.monitorOpen ? /* @__PURE__ */ jsx(
+    ) : state.monitorOpen ? /* @__PURE__ */ jsx(
       FleetMonitor,
       {
         entries: state.fleet,