@wrongstack/tui 0.7.2 → 0.7.3

package/dist/index.js

@@ -847,6 +847,133 @@ function FleetMonitor({
     ] }) : null
   ] });
 }
+var STATUS2 = {
+  idle: { icon: "\u25CB", color: "gray" },
+  running: { icon: "\u25B6", color: "yellow" },
+  success: { icon: "\u2713", color: "green" },
+  failed: { icon: "\u2717", color: "red" },
+  timeout: { icon: "\u23F1", color: "yellow" },
+  stopped: { icon: "\u2298", color: "gray" }
+};
+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 AgentsMonitor({
+  entries,
+  totalCost,
+  totalTokens,
+  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;
+    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);
+  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, { dimColor: true, children: "\u2502" }),
+      /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+        "\u25B6",
+        running.length
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { color: "green", children: [
+        "\u2713",
+        done
+      ] }),
+      failed > 0 ? /* @__PURE__ */ jsxs(Text, { color: "red", children: [
+        "\u2717",
+        failed
+      ] }) : null,
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\xB7 Ctrl+Shift+M 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 }),
+      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)}` })
+    ] }),
+    shown.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No subagents yet \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: [
+        /* @__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__ */ jsxs(Text, { dimColor: true, children: [
+            "L",
+            e.iterations,
+            " ",
+            e.toolCalls,
+            "t"
+          ] }),
+          e.extensions && e.extensions > 0 ? /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+            "\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);
+    }),
+    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
+  ] });
+}
 
 // src/markdown-table.ts
 function renderMarkdownTables(text, maxWidth) {
@@ -1136,10 +1263,16 @@ function Entry({
   switch (entry.kind) {
     case "user":
       return /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx(Text, { color: entry.queued ? "yellow" : "cyan", children: entry.queued ? "\u231B" : "\u203A" }),
-        " ",
-        /* @__PURE__ */ jsx(Text, { dimColor: entry.queued ?? false, children: entry.text }),
-        entry.queued ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: " (queued)" }) : null
+        /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: "USER: " }),
+        /* @__PURE__ */ jsx(Text, { color: "white", children: entry.text }),
+        entry.queued ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: " (queued)" }) : null,
+        entry.pasteContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          entry.text ? "\n" : null,
+          /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+            "  \u21B3 ",
+            entry.pasteContent
+          ] })
+        ] }) : null
       ] });
     case "assistant":
       return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginY: 1, children: [
@@ -2501,20 +2634,31 @@ function reducer(state, action) {
     case "setBuffer":
       return { ...state, buffer: action.buffer, cursor: action.cursor };
     case "addPlaceholder":
-      return { ...state, placeholders: [...state.placeholders, action.ph] };
+      return {
+        ...state,
+        placeholders: [...state.placeholders, action.ph],
+        placeholderContents: [...state.placeholderContents, action.content ?? ""]
+      };
     case "removeLastPlaceholder":
       if (state.placeholders.length === 0) return state;
-      return { ...state, placeholders: state.placeholders.slice(0, -1) };
+      return {
+        ...state,
+        placeholders: state.placeholders.slice(0, -1),
+        placeholderContents: state.placeholderContents.slice(0, -1)
+      };
     case "clearInput":
       return {
         ...state,
         buffer: "",
         cursor: 0,
         placeholders: [],
+        placeholderContents: [],
         historyIndex: 0,
         picker: { open: false, query: "", matches: [], selected: 0 },
         slashPicker: { open: false, query: "", matches: [], selected: 0 }
       };
+    case "clearPlaceholdersOnly":
+      return { ...state, placeholders: [], placeholderContents: [] };
     case "clearHistory": {
       const last = state.entries[state.entries.length - 1];
       return {
@@ -2965,6 +3109,9 @@ function reducer(state, action) {
     case "toggleMonitor": {
       return { ...state, monitorOpen: !state.monitorOpen };
     }
+    case "toggleAgentsMonitor": {
+      return { ...state, agentsMonitorOpen: !state.agentsMonitorOpen };
+    }
     case "checkpointReceived": {
       const existing = state.checkpoints.find((c) => c.promptIndex === action.cp.promptIndex);
       if (existing) return state;
@@ -3125,6 +3272,7 @@ function App({
     buffer: "",
     cursor: 0,
     placeholders: [],
+    placeholderContents: [],
     streamingText: "",
     toolStream: null,
     status: "idle",
@@ -3155,6 +3303,7 @@ function App({
     fleetTokens: { input: 0, output: 0 },
     streamFleet: true,
     monitorOpen: false,
+    agentsMonitorOpen: false,
     checkpoints: [],
     rewindOverlay: null,
     eternalStage: null,
@@ -3196,6 +3345,10 @@ function App({
     draftRef.current = { buffer: "", cursor: 0 };
     dispatch({ type: "clearInput" });
   };
+  const clearPlaceholdersOnly = () => {
+    draftRef.current = { buffer: "", cursor: 0 };
+    dispatch({ type: "clearPlaceholdersOnly" });
+  };
   const startedAtRef = useRef(Date.now());
   const [nowTick, setNowTick] = React2.useState(Date.now());
   useEffect(() => {
@@ -3634,6 +3787,20 @@ function App({
       slashRegistry.unregister("rewind");
     };
   }, [slashRegistry, handleRewindTo]);
+  useEffect(() => {
+    const cmd = {
+      name: "agents",
+      description: "Toggle the agents monitor overlay.",
+      async run() {
+        dispatch({ type: "toggleAgentsMonitor" });
+        return { message: void 0 };
+      }
+    };
+    slashRegistry.register(cmd);
+    return () => {
+      slashRegistry.unregister("agents");
+    };
+  }, [slashRegistry]);
   useEffect(() => {
     if (!getPickableProviders || !switchProviderAndModel) return;
     const cmd = {
@@ -3651,6 +3818,23 @@ function App({
       slashRegistry.unregister("model");
     };
   }, [slashRegistry, getPickableProviders, switchProviderAndModel]);
+  useEffect(() => {
+    const cmd = {
+      name: "agents",
+      description: "Open or close the agents monitor overlay.",
+      async run(args) {
+        if (args.trim().toLowerCase() === "monitor") {
+          dispatch({ type: "toggleAgentsMonitor" });
+          return { message: "Agents monitor toggled." };
+        }
+        return { message: "Usage: /agents monitor" };
+      }
+    };
+    slashRegistry.register(cmd);
+    return () => {
+      slashRegistry.unregister("agents");
+    };
+  }, [slashRegistry]);
   useEffect(() => {
     if (!switchAutonomy) return;
     const cmd = {
@@ -4307,13 +4491,25 @@ function App({
       process.off("SIGINT", onSigint);
     };
   }, [director, getEternalEngine, getParallelEngine, switchAutonomy, onExit, exit]);
+  const truncatePastePreview = (text, lines) => {
+    const all = text.split("\n");
+    if (all.length <= lines) return text;
+    const head = all.slice(0, lines).join("\n");
+    return `${head}
+... (${all.length - lines} more lines)`;
+  };
   const commitPaste = async (full) => {
     const builder = builderRef.current;
     if (!builder || !full) return;
     if (builder.wouldCollapse(full) || full.includes("\n")) {
       const lineCount = full.split("\n").length;
       const ph = await builder.appendPaste(full);
-      dispatch({ type: "addPlaceholder", ph: `${ph ?? "[pasted]"} (${lineCount} lines)` });
+      const preview = truncatePastePreview(full, 6);
+      dispatch({
+        type: "addPlaceholder",
+        ph: `${ph ?? "[pasted]"} (${lineCount} lines)`,
+        content: preview
+      });
       return;
     }
     const { buffer, cursor } = draftRef.current;
@@ -4534,10 +4730,18 @@ function App({
       dispatch({ type: "toggleMonitor" });
       return;
     }
+    if (key.ctrl && key.shift && input === "M") {
+      dispatch({ type: "toggleAgentsMonitor" });
+      return;
+    }
     if (key.escape && state.monitorOpen) {
       dispatch({ type: "toggleMonitor" });
       return;
     }
+    if (key.escape && state.agentsMonitorOpen) {
+      dispatch({ type: "toggleAgentsMonitor" });
+      return;
+    }
     if (isEnter) {
       const now = Date.now();
       if (now - lastEnterAtRef.current < 50) return;
@@ -4929,18 +5133,26 @@ User message:
     }
     if (steering) dispatch({ type: "steerConsume" });
     const displayText = trimmed ? steering ? `\u21AF ${trimmed}` : trimmed : "(attachments only)";
+    const pasteParts = [];
+    for (let i = 0; i < state.placeholders.length; i++) {
+      const label = state.placeholders[i];
+      const content = state.placeholderContents[i] ?? "";
+      pasteParts.push(label);
+      if (content) pasteParts.push(`  ${content.split("\n").slice(0, 6).join("\n  ")}`);
+    }
+    const pasteContent = pasteParts.length > 0 ? pasteParts.join("\n") : void 0;
     pushSubmittedHistory();
-    clearDraft();
+    clearPlaceholdersOnly();
     const blocks = await builder.submit();
     if (state.status !== "idle") {
       dispatch({
         type: "addEntry",
-        entry: { kind: "user", text: displayText, queued: true }
+        entry: { kind: "user", text: displayText, queued: true, pasteContent }
       });
       dispatch({ type: "enqueue", item: { displayText, blocks } });
       return;
     }
-    dispatch({ type: "addEntry", entry: { kind: "user", text: displayText } });
+    dispatch({ type: "addEntry", entry: { kind: "user", text: displayText, pasteContent } });
     await runBlocks(blocks);
   };
   const bootInjectedRef = useRef(false);
@@ -5089,6 +5301,15 @@ User message:
         goalSummary: state.goalSummary
       }
     ),
+    state.agentsMonitorOpen ? /* @__PURE__ */ jsx(
+      AgentsMonitor,
+      {
+        entries: state.fleet,
+        totalCost: state.fleetCost,
+        totalTokens: state.fleetTokens,
+        nowTick
+      }
+    ) : null,
     state.monitorOpen ? /* @__PURE__ */ jsx(
       FleetMonitor,
       {