@aiwayds/dsh-tui-pi 0.1.1 → 0.4.0

package/lib/live-widgets.d.ts

@@ -9,13 +9,12 @@
  *    renders zero rows while empty and grows to its content while the model
  *    has todos.
  *  - `activityDoc` — the lastRequest container below the editor
- *    (`ui.lastRequest`): the ` ↳ <last request>` line (persisting across
+ *    (`ui.lastRequest`): the ` ● <last request>` line (persisting across
  *    agent churn) followed by one compact line PER RUNNING agent. NO box
- *    chrome, NO `● Agents` header, NO connector and NO provider — just
- *    `  ↳ ⠋ <name> · ↻N≤M · 562 token (4%) · 13.6s`, the `  ↳ ` prefix
- *    nesting one column right of the request line's ` ↳ ` (a tree level
- *    under the last request) so the agent NAMES align under that level.
- *    Auto height — it
+ *    chrome, NO `● Agents` header, NO provider — just
+ *    `├─ ⠋ <name> · ↻N≤M · 21k/1m · 13.6s · <latest output>`, the `├─ ` /
+ *    `└─ ` prefix in the same column as the todo rows and the request ` ● `
+ *    (the last running agent closes the list with `└─ `). Auto height — it
  *    collapses to zero rows when both the last-request line is cleared and no
  *    agent runs.
  *
@@ -30,41 +29,64 @@
  * `setTheme` recolors in place on a theme hot-switch (no replay buffer — the
  * widget is live state, not transcript history).
  */
-import { Container } from '@earendil-works/pi-tui';
+import { Container, type Component } from '@earendil-works/pi-tui';
 import type { AgentView } from './dsh-events.ts';
 import { type TuiTheme } from './theme/index.ts';
 /** Refresh interval of the live running-agent lines (spinner + elapsed). */
 export declare const AGENT_TICK_MS = 100;
 /** Braille spinner cycle; the frame index advances once per tick. */
 export declare const AGENT_SPINNER_FRAMES: readonly ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+/**
+ * Compact human-readable size: 1_500_000 -> `1.5m`, 20_965 -> `20k`, 999 -> `999`.
+ * Millions keep one decimal (a trailing `.0` dropped), thousands floor to `k`.
+ */
+export declare function fmtCompact(n: number): string;
+/**
+ * The live Todos panel - a self-drawing table on the panel framework
+ * (padCell/columnWidths from panels.ts), rendered at the CURRENT width on
+ * every frame. pi-tui's Container calls `render(width)` per frame with no
+ * caching, so a terminal resize re-lays the table out (clip + column widths)
+ * automatically - no stale baked rows, no word-wrap. Renders zero rows while
+ * the list is empty or every todo is completed (clear-when-done).
+ */
+export declare class TodosPanel implements Component {
+    private todos;
+    private readonly getTheme;
+    constructor(getTheme: () => TuiTheme);
+    invalidate(): void;
+    /** Replace the todos snapshot (`todo/write` events, replay, /new). */
+    setTodos(todos: readonly {
+        content: string;
+        status: string;
+    }[]): void;
+    render(width: number): string[];
+}
 export declare class LiveWidgets {
     private readonly todosDoc;
     private readonly activityDoc;
     private theme;
     private readonly requestRender;
-    /** Latest todo list from `todo/write`, rendered while non-empty. */
-    private liveTodos;
+    /** The self-drawing Todos table, mounted once in `todosDoc`. */
+    private readonly todosPanel;
     /** Latest subagent views from the bridge's onLive fold. */
     private liveAgents;
-    /** The Todos panel Text in `todosDoc`, replaced on rebuild. */
-    private todosText;
     /** The merged running-agent Text in `activityDoc`, replaced on rebuild. */
     private agentsText;
-    /** The ` ↳ <last request>` Text in `activityDoc` (persists across churn). */
+    /** The ` ● <last request>` Text in `activityDoc` (persists across churn). */
     private requestText;
     /** Plain clipped last-request text backing `requestText` (for setTheme). */
     private requestDisplay;
     /** Spinner frame counter, advanced by tickLive while any agent runs. */
     private spinnerFrame;
     /**
-     * @param todosDoc The dock slot ABOVE the chat input — the Todos boxed
+     * @param todosDoc The dock slot ABOVE the chat input - the Todos table
      *   panel lives here.
-     * @param activityDoc The lastRequest container BELOW the editor — the ` ↳ `
+     * @param activityDoc The lastRequest container BELOW the editor - the ` ● `
      *   last-request line plus the compact running-agent lines live here.
      */
     constructor(todosDoc: Container, activityDoc: Container, theme: TuiTheme, requestRender: () => void);
     /**
-     * Render the ` ↳ <text>` last-request line in `activityDoc`, UNDER which the
+     * Render the ` ● <text>` last-request line in `activityDoc`, UNDER which the
      * running-agent lines appear. `undefined` (or blank) removes the line. Same
      * styling as before the merge: `fgMuted` prefix, but the text is clipped to
      * the terminal width (`columns - 5`) so it ALWAYS renders on one row and
@@ -84,50 +106,38 @@ export declare class LiveWidgets {
      * — the activity area then holds its final (empty) state.
      */
     tickLive(): void;
-    /** Recolor the widget (Todos panel, ↳ line and agent lines) under a theme
-     * hot-switch (no-op on the same bundle). */
+    /** Recolor the widget (Todos panel, ● line and agent lines) under a theme
+     * hot-switch (no-op on the same bundle). The Todos panel reads the theme
+     * through its getter, so the swap needs only a repaint. */
     setTheme(theme: TuiTheme): void;
     /**
      * Drop everything except the last-request echo (`/new`): clears the Todos
-     * panel and the running-agent lines, keeps the ` ↳ ` line. The bridge also
+     * panel and the running-agent lines, keeps the ` ● ` line. The bridge also
      * fires `renderAgents([])`.
      */
     clear(): void;
     /**
-     * Rebuild the two live surfaces:
-     *  - `todosDoc`: one bordered Todos panel (or nothing when all completed).
-     *  - `activityDoc`: the ` ↳ ` line (managed separately, persists) followed
-     *    by ONE Text holding the compact running-agent lines joined by '\n'
-     *    (or nothing when no agent runs — the slot collapses to the ↳ line).
-     * Clear-when-done: the Todos panel hides once every todo is completed (the
-     * model writes the whole-list snapshot and rarely clears it — an
-     * all-completed list is the end-of-work signal); the agent lines hide once
-     * no child is running.
+     * Rebuild the running-agent surface of `activityDoc`: the ` ● ` line
+     * (managed separately, persists) followed by ONE Text holding the compact
+     * running-agent lines joined by '\n' (or nothing when no agent runs - the
+     * slot collapses to the ● line). The Todos table panel is NOT rebuilt
+     * here - it is a self-drawing component that re-renders each frame.
+     * Clear-when-done: the agent lines hide once no child is running.
      */
     private rebuild;
-    /** One bordered panel: top border + header row + body rows + bottom border. */
-    private boxedPanel;
-    /** `● Todos (done/total)`, styled for the panel header row. */
-    private todosHeader;
-    /**
-     * Tree-style todo body lines: `├─`/`└─` connectors with `☐`/`◐`/`☑` status
-     * icons. Content is model-controlled: clipped BEFORE styling to the boxed
-     * row's inner budget minus the tree chrome (connector 3 cols + icon+space
-     * 2 cols) — see clipPanelLine's contract.
-     */
-    private todoLines;
     /**
-     * One compact running-agent line for the last-request area: `  ↳ ` prefix
-     * (nesting one column right of the ` ↳ ` request text, like a tree level
-     * under the last request) + spinner + the agent NAME
-     * (`view.label`, matching the boxed panel's main line) + the exact meta that
-     * main line showed (`↻retries≤max`, `N token (%)`, elapsed). NO box chrome,
-     * NO connector, NO provider — the name is the prominent element. The label
-     * is the only unbounded field; it is clipped against a budget measured from
-     * the terminal width so the whole plain line (prefix included) fits, then
-     * the assembled plain line is clipped to the terminal width BEFORE any ANSI
-     * is applied (clipToWidth counts SGR fragments as visible columns — style
-     * last). The provider (`view.provider`) is dropped from this line.
+     * One compact running-agent line for the last-request area, todo-style:
+     * `├─ `/`└─ ` connector (same column as the todo rows and the request
+     * ` ● `) + spinner + the agent NAME (`view.label`, matching the boxed
+     * panel's main line) + the exact meta that main line showed (`↻retries≤max`,
+     * compact `tokens[/contextWindow]`, elapsed) + the child's latest output
+     * line when one exists (` · <tail>`, so the user sees it is alive). NO box
+     * chrome, NO provider — the name is the prominent element; the last running
+     * agent closes the list with `└─ `. The label is the only unbounded field;
+     * it is clipped against a budget measured from the terminal width so the
+     * whole plain line (prefix included) fits, then the assembled plain line is
+     * clipped to the terminal width BEFORE any ANSI is applied (clipToWidth
+     * counts SGR fragments as visible columns — style last).
      */
     private compactAgentLine;
 }

package/lib/live-widgets.js

@@ -9,13 +9,12 @@
  *    renders zero rows while empty and grows to its content while the model
  *    has todos.
  *  - `activityDoc` — the lastRequest container below the editor
- *    (`ui.lastRequest`): the ` ↳ <last request>` line (persisting across
+ *    (`ui.lastRequest`): the ` ● <last request>` line (persisting across
  *    agent churn) followed by one compact line PER RUNNING agent. NO box
- *    chrome, NO `● Agents` header, NO connector and NO provider — just
- *    `  ↳ ⠋ <name> · ↻N≤M · 562 token (4%) · 13.6s`, the `  ↳ ` prefix
- *    nesting one column right of the request line's ` ↳ ` (a tree level
- *    under the last request) so the agent NAMES align under that level.
- *    Auto height — it
+ *    chrome, NO `● Agents` header, NO provider — just
+ *    `├─ ⠋ <name> · ↻N≤M · 21k/1m · 13.6s · <latest output>`, the `├─ ` /
+ *    `└─ ` prefix in the same column as the todo rows and the request ` ● `
+ *    (the last running agent closes the list with `└─ `). Auto height — it
  *    collapses to zero rows when both the last-request line is cleared and no
  *    agent runs.
  *
@@ -31,13 +30,27 @@
  * widget is live state, not transcript history).
  */
 import { Container, Text } from '@earendil-works/pi-tui';
-import { panelBodyText, panelBoxWidth, clipPanelLine } from "./messages.js";
+import { panelBoxWidth, clipPanelLine } from "./messages.js";
+import { columnWidths, padCell, TABLE_SEP } from "./panels.js";
 import { ansiFg, RESET } from "./theme/index.js";
 import { clipToWidth, visibleWidth } from "./text.js";
 /** Refresh interval of the live running-agent lines (spinner + elapsed). */
 export const AGENT_TICK_MS = 100;
 /** Braille spinner cycle; the frame index advances once per tick. */
 export const AGENT_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+/**
+ * Compact human-readable size: 1_500_000 -> `1.5m`, 20_965 -> `20k`, 999 -> `999`.
+ * Millions keep one decimal (a trailing `.0` dropped), thousands floor to `k`.
+ */
+export function fmtCompact(n) {
+    if (n >= 1_000_000) {
+        const m = n / 1_000_000;
+        return `${Number.isInteger(m) ? String(m) : m.toFixed(1).replace(/\.0$/, '')}m`;
+    }
+    if (n >= 1_000)
+        return `${Math.floor(n / 1_000)}k`;
+    return String(n);
+}
 /** One bordered row of the Todos panel: `│ ` + inner + ` │` (no trailing RESET). */
 function borderedRow(boxWidth, borderFg, inner) {
     const pad = Math.max(0, boxWidth - 4 - visibleWidth(inner));
@@ -47,29 +60,104 @@ function borderedRow(boxWidth, borderFg, inner) {
 function panelTopBorder(boxWidth, borderFg) {
     return `${borderFg}┌${'─'.repeat(Math.max(0, boxWidth - 2))}┐`;
 }
+/** The todos table columns: right-aligned row number, status icon, flex content. */
+const TODO_COLUMNS = [
+    { key: 'idx', title: '#', width: 3, align: 'right' },
+    { key: 'status', title: '✓', width: 2 },
+    { key: 'content', title: 'Task', flex: true },
+];
+/** Status icon of one todo: pending / in-progress / completed. */
+function todoIcon(status) {
+    if (status === 'completed')
+        return '☑';
+    if (status === 'in_progress')
+        return '◐';
+    return '☐';
+}
+/**
+ * The live Todos panel - a self-drawing table on the panel framework
+ * (padCell/columnWidths from panels.ts), rendered at the CURRENT width on
+ * every frame. pi-tui's Container calls `render(width)` per frame with no
+ * caching, so a terminal resize re-lays the table out (clip + column widths)
+ * automatically - no stale baked rows, no word-wrap. Renders zero rows while
+ * the list is empty or every todo is completed (clear-when-done).
+ */
+export class TodosPanel {
+    todos = [];
+    getTheme;
+    constructor(getTheme) {
+        this.getTheme = getTheme;
+    }
+    invalidate() { }
+    /** Replace the todos snapshot (`todo/write` events, replay, /new). */
+    setTodos(todos) {
+        this.todos = todos;
+    }
+    render(width) {
+        if (this.todos.length === 0 || this.todos.every(todo => todo.status === 'completed'))
+            return [];
+        const theme = this.getTheme();
+        const p = theme.palette;
+        const boxWidth = panelBoxWidth(width);
+        const borderFg = ansiFg(p.borderDefault);
+        const innerWidth = boxWidth - 4;
+        const colWidths = columnWidths(innerWidth, TODO_COLUMNS);
+        const subtle = (text) => ansiFg(p.fgSubtle) + text + RESET;
+        // Header row of the panel: `● Todos (done/total)` in the accent/subtle pair.
+        const done = this.todos.filter(todo => todo.status === 'completed').length;
+        const headerInner = ansiFg(p.accent) + '● Todos ' + RESET
+            + subtle(`(${done}/${this.todos.length})`);
+        const out = [panelTopBorder(boxWidth, borderFg), borderedRow(boxWidth, borderFg, headerInner)];
+        // Table header: every cell padded to its column so the rows align.
+        out.push(borderedRow(boxWidth, borderFg, TODO_COLUMNS.map((column, i) => padCell(column.title, colWidths[i], column.align)).join(TABLE_SEP)));
+        for (let i = 0; i < this.todos.length; i++) {
+            const todo = this.todos[i];
+            // Plain (clipped+padded) cells FIRST, ANSI after - the panel-line rule.
+            const idxCell = padCell(String(i + 1), colWidths[0], 'right');
+            const iconCell = padCell(todoIcon(todo.status), colWidths[1]);
+            const contentCell = padClip(todo.content, colWidths[2]);
+            // One color per status across the icon and content cells (the icon has
+            // its own column here - no baked-in prefix from theme.chat.todo*).
+            const color = todo.status === 'completed'
+                ? p.success
+                : todo.status === 'in_progress' ? p.attention : p.fgSubtle;
+            const statusStyle = (text) => ansiFg(color) + text + RESET;
+            out.push(borderedRow(boxWidth, borderFg, subtle(idxCell) + TABLE_SEP + statusStyle(iconCell) + TABLE_SEP + statusStyle(contentCell)));
+        }
+        out.push(panelBottomRow(boxWidth, borderFg));
+        return out;
+    }
+}
+/** Bottom border line (`└─…─┘`), `boxWidth` columns wide. */
+function panelBottomRow(boxWidth, borderFg) {
+    return `${borderFg}└${'─'.repeat(Math.max(0, boxWidth - 2))}┘`;
+}
+/** Clip one todo's content (a possibly multiline model string) to one row. */
+function padClip(content, width) {
+    const flat = content.replace(/\r/g, '').replace(/\n/g, ' ').trim();
+    return padCell(flat, width);
+}
 export class LiveWidgets {
     todosDoc;
     activityDoc;
     theme;
     requestRender;
-    /** Latest todo list from `todo/write`, rendered while non-empty. */
-    liveTodos = [];
+    /** The self-drawing Todos table, mounted once in `todosDoc`. */
+    todosPanel;
     /** Latest subagent views from the bridge's onLive fold. */
     liveAgents = [];
-    /** The Todos panel Text in `todosDoc`, replaced on rebuild. */
-    todosText;
     /** The merged running-agent Text in `activityDoc`, replaced on rebuild. */
     agentsText;
-    /** The ` ↳ <last request>` Text in `activityDoc` (persists across churn). */
+    /** The ` ● <last request>` Text in `activityDoc` (persists across churn). */
     requestText;
     /** Plain clipped last-request text backing `requestText` (for setTheme). */
     requestDisplay;
     /** Spinner frame counter, advanced by tickLive while any agent runs. */
     spinnerFrame = 0;
     /**
-     * @param todosDoc The dock slot ABOVE the chat input — the Todos boxed
+     * @param todosDoc The dock slot ABOVE the chat input - the Todos table
      *   panel lives here.
-     * @param activityDoc The lastRequest container BELOW the editor — the ` ↳ `
+     * @param activityDoc The lastRequest container BELOW the editor - the ` ● `
      *   last-request line plus the compact running-agent lines live here.
      */
     constructor(todosDoc, activityDoc, theme, requestRender) {
@@ -77,9 +165,14 @@ export class LiveWidgets {
         this.activityDoc = activityDoc;
         this.theme = theme;
         this.requestRender = requestRender;
+        // Mounted once: the panel re-renders at the live width every frame and
+        // reads the theme through the getter, so theme swaps and terminal
+        // resizes need no rebuild wiring here.
+        this.todosPanel = new TodosPanel(() => this.theme);
+        todosDoc.addChild(this.todosPanel);
     }
     /**
-     * Render the ` ↳ <text>` last-request line in `activityDoc`, UNDER which the
+     * Render the ` ● <text>` last-request line in `activityDoc`, UNDER which the
      * running-agent lines appear. `undefined` (or blank) removes the line. Same
      * styling as before the merge: `fgMuted` prefix, but the text is clipped to
      * the terminal width (`columns - 5`) so it ALWAYS renders on one row and
@@ -95,14 +188,14 @@ export class LiveWidgets {
             }
             return;
         }
-        // One-row budget: paddingX=1 on each side (2 cols) + the ` ↳ ` prefix (3
+        // One-row budget: paddingX=1 on each side (2 cols) + the ` ● ` prefix (3
         // cols) → the plain `display` must fit `columns - 5`. Non-TTY fallback
         // keeps the old 200-col behavior.
         const budget = Math.max(1, (process.stdout.columns ?? 200) - 5);
         const display = clipToWidth(text, budget);
         if (this.requestText === undefined) {
             this.requestText = new Text('', 1, 0);
-            // Keep the ↳ line ABOVE the running-agent lines regardless of whether
+            // Keep the ● line ABOVE the running-agent lines regardless of whether
             // they already render (no insert-at on a plain Container — remove and
             // re-add both in the right order).
             if (this.agentsText !== undefined)
@@ -112,13 +205,13 @@ export class LiveWidgets {
                 this.activityDoc.addChild(this.agentsText);
         }
         this.requestDisplay = display;
-        this.requestText.setText(ansiFg(this.theme.palette.fgMuted) + ` ↳ ${display}` + RESET);
+        this.requestText.setText(ansiFg(this.theme.palette.fgMuted) + ` ● ${display}` + RESET);
         this.requestRender();
     }
     /** Replace the todos snapshot (`todo/write` events and replay). */
     renderTodos(todos) {
-        this.liveTodos = todos;
-        this.rebuild();
+        this.todosPanel.setTodos(todos);
+        this.requestRender();
     }
     /** Replace the subagent views (the bridge's onLive fold). */
     renderAgents(agents) {
@@ -136,32 +229,29 @@ export class LiveWidgets {
         this.spinnerFrame += 1;
         this.rebuild();
     }
-    /** Recolor the widget (Todos panel, ↳ line and agent lines) under a theme
-     * hot-switch (no-op on the same bundle). */
+    /** Recolor the widget (Todos panel, ● line and agent lines) under a theme
+     * hot-switch (no-op on the same bundle). The Todos panel reads the theme
+     * through its getter, so the swap needs only a repaint. */
     setTheme(theme) {
         if (theme === this.theme)
             return;
         this.theme = theme;
         this.rebuild();
-        // The ↳ line is not part of rebuild() (it persists independent of the
+        // The request line is not part of rebuild() (it persists independent of the
         // agent lines); recolor it here from the cached plain text.
         if (this.requestDisplay !== undefined && this.requestText !== undefined) {
-            this.requestText.setText(ansiFg(this.theme.palette.fgMuted) + ` ↳ ${this.requestDisplay}` + RESET);
+            this.requestText.setText(ansiFg(this.theme.palette.fgMuted) + ` ● ${this.requestDisplay}` + RESET);
         }
     }
     /**
      * Drop everything except the last-request echo (`/new`): clears the Todos
-     * panel and the running-agent lines, keeps the ` ↳ ` line. The bridge also
+     * panel and the running-agent lines, keeps the ` ● ` line. The bridge also
      * fires `renderAgents([])`.
      */
     clear() {
-        this.liveTodos = [];
         this.liveAgents = [];
         this.spinnerFrame = 0;
-        if (this.todosText !== undefined) {
-            this.todosDoc.removeChild(this.todosText);
-            this.todosText = undefined;
-        }
+        this.todosPanel.setTodos([]);
         if (this.agentsText !== undefined) {
             this.activityDoc.removeChild(this.agentsText);
             this.agentsText = undefined;
@@ -169,38 +259,24 @@ export class LiveWidgets {
         this.requestRender();
     }
     /**
-     * Rebuild the two live surfaces:
-     *  - `todosDoc`: one bordered Todos panel (or nothing when all completed).
-     *  - `activityDoc`: the ` ↳ ` line (managed separately, persists) followed
-     *    by ONE Text holding the compact running-agent lines joined by '\n'
-     *    (or nothing when no agent runs — the slot collapses to the ↳ line).
-     * Clear-when-done: the Todos panel hides once every todo is completed (the
-     * model writes the whole-list snapshot and rarely clears it — an
-     * all-completed list is the end-of-work signal); the agent lines hide once
-     * no child is running.
+     * Rebuild the running-agent surface of `activityDoc`: the ` ● ` line
+     * (managed separately, persists) followed by ONE Text holding the compact
+     * running-agent lines joined by '\n' (or nothing when no agent runs - the
+     * slot collapses to the ● line). The Todos table panel is NOT rebuilt
+     * here - it is a self-drawing component that re-renders each frame.
+     * Clear-when-done: the agent lines hide once no child is running.
      */
     rebuild() {
-        if (this.liveTodos.some(todo => todo.status !== 'completed')) {
-            const panel = this.boxedPanel(this.todosHeader(), this.todoLines());
-            if (this.todosText !== undefined)
-                this.todosDoc.removeChild(this.todosText);
-            this.todosText = new Text(panel, 1, 0);
-            this.todosDoc.addChild(this.todosText);
-        }
-        else if (this.todosText !== undefined) {
-            this.todosDoc.removeChild(this.todosText);
-            this.todosText = undefined;
-        }
         const running = this.liveAgents.filter(view => view.outcome === undefined);
         if (running.length > 0) {
-            const lines = running.map(view => this.compactAgentLine(view));
+            const lines = running.map((view, i) => this.compactAgentLine(view, i === running.length - 1));
             const text = lines.join('\n');
             if (this.agentsText !== undefined) {
                 this.agentsText.setText(text);
             }
             else {
                 this.agentsText = new Text(text, 1, 0);
-                // Append under the ↳ line when it is present (plain Container appends).
+                // Append under the ● line when it is present (plain Container appends).
                 this.activityDoc.addChild(this.agentsText);
             }
         }
@@ -210,64 +286,24 @@ export class LiveWidgets {
         }
         this.requestRender();
     }
-    /** One bordered panel: top border + header row + body rows + bottom border. */
-    boxedPanel(headerInner, bodyLines) {
-        const boxWidth = panelBoxWidth(process.stdout.columns);
-        const borderFg = ansiFg(this.theme.palette.borderDefault);
-        const top = panelTopBorder(boxWidth, borderFg);
-        const header = borderedRow(boxWidth, borderFg, clipPanelLine(headerInner));
-        // 'all' body: every line kept verbatim (each already clipped to one
-        // physical row), bottom border appended.
-        const body = panelBodyText(bodyLines, boxWidth, borderFg, 'all');
-        return `${top}\n${header}\n${body}`;
-    }
-    /** `● Todos (done/total)`, styled for the panel header row. */
-    todosHeader() {
-        const done = this.liveTodos.filter(todo => todo.status === 'completed').length;
-        return ansiFg(this.theme.palette.accent) + '● Todos ' + RESET
-            + ansiFg(this.theme.palette.fgSubtle) + `(${done}/${this.liveTodos.length})` + RESET;
-    }
     /**
-     * Tree-style todo body lines: `├─`/`└─` connectors with `☐`/`◐`/`☑` status
-     * icons. Content is model-controlled: clipped BEFORE styling to the boxed
-     * row's inner budget minus the tree chrome (connector 3 cols + icon+space
-     * 2 cols) — see clipPanelLine's contract.
+     * One compact running-agent line for the last-request area, todo-style:
+     * `├─ `/`└─ ` connector (same column as the todo rows and the request
+     * ` ● `) + spinner + the agent NAME (`view.label`, matching the boxed
+     * panel's main line) + the exact meta that main line showed (`↻retries≤max`,
+     * compact `tokens[/contextWindow]`, elapsed) + the child's latest output
+     * line when one exists (` · <tail>`, so the user sees it is alive). NO box
+     * chrome, NO provider — the name is the prominent element; the last running
+     * agent closes the list with `└─ `. The label is the only unbounded field;
+     * it is clipped against a budget measured from the terminal width so the
+     * whole plain line (prefix included) fits, then the assembled plain line is
+     * clipped to the terminal width BEFORE any ANSI is applied (clipToWidth
+     * counts SGR fragments as visible columns — style last).
      */
-    todoLines() {
-        const innerCap = panelBoxWidth(process.stdout.columns) - 4;
-        const lines = [];
-        const total = this.liveTodos.length;
-        for (let i = 0; i < total; i++) {
-            const todo = this.liveTodos[i];
-            const content = clipToWidth(todo.content, Math.max(10, innerCap - 5));
-            const connector = ansiFg(this.theme.palette.fgSubtle) + (i === total - 1 ? '└─ ' : '├─ ') + RESET;
-            const statusStyled = todo.status === 'completed'
-                ? this.theme.chat.todoDone(content)
-                : todo.status === 'in_progress'
-                    ? ansiFg(this.theme.palette.attention) + `◐ ${content}` + RESET
-                    : this.theme.chat.todoOpen(content);
-            lines.push(connector + statusStyled);
-        }
-        return lines;
-    }
-    /**
-     * One compact running-agent line for the last-request area: `  ↳ ` prefix
-     * (nesting one column right of the ` ↳ ` request text, like a tree level
-     * under the last request) + spinner + the agent NAME
-     * (`view.label`, matching the boxed panel's main line) + the exact meta that
-     * main line showed (`↻retries≤max`, `N token (%)`, elapsed). NO box chrome,
-     * NO connector, NO provider — the name is the prominent element. The label
-     * is the only unbounded field; it is clipped against a budget measured from
-     * the terminal width so the whole plain line (prefix included) fits, then
-     * the assembled plain line is clipped to the terminal width BEFORE any ANSI
-     * is applied (clipToWidth counts SGR fragments as visible columns — style
-     * last). The provider (`view.provider`) is dropped from this line.
-     */
-    compactAgentLine(view) {
-        // two spaces + ↳ + space: nests one column right of the request line's
-        // ` ↳ ` (the request renders as paddingX(1) + ` ↳ `), like a tree level
-        // under the last request, so the agent names align under that level.
-        const PREFIX = '  ↳ ';
+    compactAgentLine(view, isLast) {
+        // Todo-style tree connector: `├─ ` for non-final rows, `└─ ` for the last
+        // running agent — aligned with the todo rows and the request ` ● `.
+        const PREFIX = isLast ? '└─ ' : '├─ ';
         const width = Math.max(1, process.stdout.columns ?? 80);
         const glyph = AGENT_SPINNER_FRAMES[this.spinnerFrame % AGENT_SPINNER_FRAMES.length];
         const metaParts = [];
@@ -275,20 +311,39 @@ export class LiveWidgets {
             metaParts.push(view.maxRetries === undefined ? `↻${view.retries}` : `↻${view.retries}≤${view.maxRetries}`);
         }
         if (view.tokens > 0) {
-            const pct = typeof view.contextWindow === 'number' && view.contextWindow > 0
-                ? ` (${Math.round(view.tokens / view.contextWindow * 100)}%)`
+            // Compact tokens[/contextWindow]: `21k/1m` — no percent, no "token".
+            const ctx = typeof view.contextWindow === 'number' && view.contextWindow > 0
+                ? `/${fmtCompact(view.contextWindow)}`
                 : '';
-            metaParts.push(`${view.tokens} token${pct}`);
+            metaParts.push(`${fmtCompact(view.tokens)}${ctx}`);
         }
         const elapsed = (Date.now() - view.startedAt) / 1000;
         metaParts.push(`${elapsed.toFixed(1)}s`);
-        const metaPlain = ' · ' + metaParts.join(' · ');
-        // Defensive: never render an empty name — fall back to the child id.
+        let metaPlain = ' · ' + metaParts.join(' · ');
+        // Tail: the child's latest visible output line, appended after the elapsed
+        // column so the user knows it is alive. Budget ≤30% of the terminal width
+        // (clamped 20..60 cols); when the folded line is wider, clip to
+        // tailBudget-2 and end with `..` (clipToWidth's own `…` is stripped).
+        const lastLine = view.lastLine;
+        if (lastLine !== undefined && lastLine !== '') {
+            const folded = lastLine.replace(/\s+/g, ' ').trim();
+            if (folded !== '') {
+                const tailBudget = Math.min(60, Math.max(20, Math.floor(width * 0.3)));
+                if (visibleWidth(folded) > tailBudget) {
+                    const clipped = clipToWidth(folded, tailBudget - 2).replace(/…$/, '');
+                    metaPlain += ` · ${clipped}..`;
+                }
+                else {
+                    metaPlain += ` · ${folded}`;
+                }
+            }
+        }
+        // Defensive: never render an empty name — fall back to `subagent`.
         const rawLabel = clipPanelLine(view.label, 0).replace(/\r/g, '').trim();
         const namePlain = rawLabel === ''
-            ? `subagent ${(view.childId ?? '').slice(0, 8)}`
+            ? 'subagent'
             : rawLabel;
-        // Fixed chrome: prefix (4) + spinner (1) + following space (1) + a safety
+        // Fixed chrome: prefix (3) + spinner (1) + following space (1) + a safety
         // column. The label takes the remainder of the width budget after meta.
         const fixed = visibleWidth(PREFIX) + 1 + 1 + 1;
         const nameBudget = width - fixed - visibleWidth(metaPlain);
@@ -297,11 +352,13 @@ export class LiveWidgets {
         const plain = PREFIX + glyph + ' ' + nameClipped + metaPlain;
         const clipped = clipToWidth(plain, width);
         // Style segments from the (clipped, guaranteed-identical-when-it-fits)
-        // plain pieces: spinner muted, NAME default (prominent), meta subtle.
+        // plain pieces: connector subtle, spinner muted, NAME default (prominent),
+        // meta (incl. the tail) subtle.
+        const connector = ansiFg(this.theme.palette.fgSubtle) + PREFIX + RESET;
         const spinner = ansiFg(this.theme.palette.fgMuted) + glyph + RESET;
         const metaStyled = ansiFg(this.theme.palette.fgSubtle) + metaPlain + RESET;
         const nameStyled = ansiFg(this.theme.palette.fgDefault) + nameClipped + RESET;
-        const base = PREFIX + spinner + ' ' + nameStyled + metaStyled;
+        const base = connector + spinner + ' ' + nameStyled + metaStyled;
         // If clipping truncated the plain line (pathological meta), re-clip the
         // assembled styled line's visible width too; otherwise base is exact.
         if (visibleWidth(clipped) < visibleWidth(plain)) {