@bubblebrain-ai/bubble 0.0.58 → 0.0.60

package/dist/tui/components/tasks-pane.js

@@ -116,7 +116,18 @@ function normalize(snapshot, showHistory) {
         status: task.status,
         task,
     }));
-    const filter = (items) => (showHistory ? items : items.filter((item) => isActive(item.status)))
+    // Which rows belong above the composer is derived, not remembered: whatever
+    // is still running, plus whatever this turn launched — so a sibling that
+    // finishes (or fails) first stays in view with its outcome until the next
+    // turn, whether its siblings ran in parallel or one after another. Work from
+    // earlier turns is history and shows only on request.
+    const launchedThisTurn = (item) => {
+        const launchedAt = itemLaunchedAt(item);
+        return snapshot.turnStartedAt !== undefined && launchedAt !== undefined && launchedAt >= snapshot.turnStartedAt;
+    };
+    const filter = (items) => (showHistory
+        ? items
+        : items.filter((item) => isActive(item.status) || launchedThisTurn(item)))
         .sort((left, right) => {
         const activityOrder = Number(isActive(right.status)) - Number(isActive(left.status));
         if (activityOrder !== 0)
@@ -129,6 +140,13 @@ function normalize(snapshot, showHistory) {
         tasks: filter(taskItems),
     };
 }
+function itemLaunchedAt(item) {
+    if (item.kind === "workflow")
+        return item.createdAt;
+    if (item.kind === "subagent")
+        return item.member.createdAt;
+    return item.task.startedAt;
+}
 function itemUpdatedAt(item) {
     if (item.kind === "workflow")
         return item.updatedAt ?? item.createdAt ?? 0;
@@ -144,10 +162,25 @@ export class TasksPaneComponent {
     focused = false;
     open = false;
     manuallyClosed = false;
+    /**
+     * History is a view the user opts into for one look, never a mode: it is
+     * dropped whenever the pane closes and when a new round of activity starts.
+     * Otherwise one Ctrl+G after a finished turn left every earlier subagent
+     * listed above the composer for the rest of the session, next to a header
+     * that counts only the running ones.
+     */
     showHistory = false;
     selectedId;
+    /**
+     * Whether the user picked the selection (keys or click). The pane always
+     * needs one, so it defaults to the first row — but a default nobody chose
+     * must not steer the window: a task that was once the only row stayed
+     * "selected" and scrolled later subagents out of an untouched pane.
+     */
+    selectionIsUsers = false;
     hoveredId;
     lastActiveCount = 0;
+    lastTurnStartedAt;
     lastRows = [];
     allRows = [];
     frame = 0;
@@ -179,6 +212,32 @@ export class TasksPaneComponent {
         const items = normalize(this.getSnapshot(), true);
         return Object.values(items).flat().filter((item) => isActive(item.status)).length;
     }
+    /** Rows the default view lists: running work plus what this turn launched. */
+    defaultViewCount() {
+        return Object.values(normalize(this.getSnapshot(), false)).flat().length;
+    }
+    visibleCount() {
+        return Object.values(normalize(this.getSnapshot(), this.showHistory)).flat().length;
+    }
+    /**
+     * Finished rows the pane lists next to the running ones, by outcome. Counted
+     * in the pane's current view, history included when it is showing, so the
+     * header never reports fewer rows than the list holds.
+     */
+    settledCounts() {
+        const counts = { done: 0, failed: 0, stopped: 0 };
+        for (const item of Object.values(normalize(this.getSnapshot(), this.showHistory)).flat()) {
+            if (isActive(item.status))
+                continue;
+            if (item.status === "failed" || item.status === "blocked")
+                counts.failed += 1;
+            else if (item.status === "cancelled" || item.status === "killed")
+                counts.stopped += 1;
+            else
+                counts.done += 1;
+        }
+        return counts;
+    }
     totalCount() {
         const items = normalize(this.getSnapshot(), true);
         return Object.values(items).flat().length;
@@ -193,6 +252,14 @@ export class TasksPaneComponent {
         if (this.open && !forceFocus) {
             this.open = false;
             this.manuallyClosed = true;
+            this.showHistory = false;
+            // Closing through the status bar (a click) bypasses the app's Ctrl+G
+            // handler. A pane that still owned the keyboard would swallow input while
+            // invisible — and the bar itself can now be hidden — so hand focus back.
+            if (this.focused) {
+                this.focused = false;
+                this.callbacks.onEscape();
+            }
         }
         else {
             this.open = true;
@@ -200,7 +267,9 @@ export class TasksPaneComponent {
             // Once all activity has settled, Ctrl+G must remain a usable route back
             // to the completed child transcript. Opening an empty active-only pane
             // makes the work look lost even though the child session still exists.
-            if (this.activeCount() === 0 && this.totalCount() > 0)
+            // This turn's rows (what the bar counts) open first; older history only
+            // when there is nothing else to show, and behind `h` otherwise.
+            if (this.activeCount() === 0 && this.defaultViewCount() === 0 && this.totalCount() > 0)
                 this.showHistory = true;
         }
         this.callbacks.onRender();
@@ -208,30 +277,66 @@ export class TasksPaneComponent {
     close() {
         this.open = false;
         this.manuallyClosed = true;
+        this.showHistory = false;
         this.callbacks.onRender();
     }
-    render(width) {
-        const terminalRows = this.getTerminalRows();
-        if (terminalRows < 12) {
-            this.lastRows = [];
-            this.allRows = [];
-            return [];
-        }
+    /**
+     * Advance open/history state from the latest snapshot. Both the status bar
+     * and the pane call this before rendering: the bar is laid out first, so a
+     * transition made only inside the pane's render would leave the bar one
+     * frame behind — forever, when nothing is animating to trigger a redraw.
+     * Idempotent per snapshot (it compares against the last values it saw).
+     */
+    syncState() {
+        if (this.getTerminalRows() < 12)
+            return;
         const activeCount = this.activeCount();
-        if (activeCount > 0 && this.lastActiveCount === 0 && !this.manuallyClosed)
+        // A new run, or activity starting from idle, ends the history view. The
+        // run boundary matters on its own: with a task still running the count
+        // never crosses zero, and new work would otherwise keep listing history.
+        // A user who is browsing history inside the pane keeps their rows; the
+        // view resets when they close it.
+        const turnStartedAt = this.getSnapshot().turnStartedAt;
+        const newTurn = turnStartedAt !== this.lastTurnStartedAt;
+        this.lastTurnStartedAt = turnStartedAt;
+        const activityFromIdle = activeCount > 0 && this.lastActiveCount === 0;
+        if ((newTurn || activityFromIdle) && !this.focused) {
+            this.showHistory = false;
+            // If that leaves nothing to list (the pane was opened while idle, then a
+            // turn launches nothing), close it rather than keep an empty pane under
+            // a "0 completed" header. Not a manual close: the next activity reopens it.
+            if (this.open && this.visibleCount() === 0) {
+                this.open = false;
+                this.manuallyClosed = false;
+            }
+        }
+        if (activityFromIdle && !this.manuallyClosed)
             this.open = true;
         if (activeCount === 0 && this.lastActiveCount > 0) {
             if (this.focused) {
                 // A user who is already inspecting the pane should see the final
                 // status land in place instead of watching the selected row vanish.
-                this.showHistory = true;
+                // This turn's rows stay on their own; only work launched in an earlier
+                // turn needs the history view to remain visible.
+                if (this.visibleCount() === 0)
+                    this.showHistory = true;
             }
             else {
                 this.open = false;
                 this.manuallyClosed = false;
+                this.showHistory = false;
             }
         }
         this.lastActiveCount = activeCount;
+    }
+    render(width) {
+        const terminalRows = this.getTerminalRows();
+        if (terminalRows < 12) {
+            this.lastRows = [];
+            this.allRows = [];
+            return [];
+        }
+        this.syncState();
         if (!this.open) {
             this.lastRows = [];
             this.allRows = [];
@@ -253,28 +358,55 @@ export class TasksPaneComponent {
         }
         const itemRows = rows.filter((row) => row.kind === "item");
         this.allRows = rows;
-        if (!this.selectedId || !itemRows.some((row) => `${row.item.kind}:${row.item.id}` === this.selectedId)) {
+        const selectionGone = !this.selectedId
+            || !itemRows.some((row) => `${row.item.kind}:${row.item.id}` === this.selectedId);
+        if (selectionGone)
+            this.selectionIsUsers = false;
+        if (!this.selectionIsUsers) {
             this.selectedId = itemRows[0] ? `${itemRows[0].item.kind}:${itemRows[0].item.id}` : undefined;
         }
+        // When the rows do not fit, the last line says how many are out of view
+        // rather than clipping them silently. Only a focused pane scrolls to its
+        // selection; untouched, it shows the top, where running work sorts first.
         const maxRows = Math.max(3, Math.min(8, Math.floor(terminalRows * 0.15)));
-        let start = 0;
-        const selectedIndex = rows.findIndex((row) => row.kind === "item" && `${row.item.kind}:${row.item.id}` === this.selectedId);
-        if (selectedIndex >= maxRows)
-            start = selectedIndex - maxRows + 1;
-        const visibleRows = rows.slice(start, start + maxRows);
+        const selectedIndex = this.focused
+            ? rows.findIndex((row) => row.kind === "item" && `${row.item.kind}:${row.item.id}` === this.selectedId)
+            : -1;
+        const layout = (windowRows) => {
+            const start = selectedIndex >= windowRows ? selectedIndex - windowRows + 1 : 0;
+            const items = (slice) => slice.filter((row) => row.kind === "item").length;
+            return { start, windowRows, above: items(rows.slice(0, start)), below: items(rows.slice(start + windowRows)) };
+        };
+        // Reserve the last line only when it has something to say: hidden rows can
+        // be nothing but collapsed section headers, and a blank reserved slot would
+        // cost one of as few as three lines.
+        let view = layout(maxRows);
+        if (rows.length > maxRows) {
+            const reserved = layout(maxRows - 1);
+            if (reserved.above + reserved.below > 0)
+                view = reserved;
+        }
+        const visibleRows = rows.slice(view.start, view.start + view.windowRows);
         this.lastRows = visibleRows;
         const theme = this.getTheme();
-        return visibleRows.map((row) => {
-            if (row.kind === "header") {
-                const count = items[row.section].length;
-                const marker = this.collapsed.has(row.section) ? "▸" : "▾";
-                const label = sections.find(([section]) => section === row.section)?.[1] ?? row.section;
-                return themeDim(theme.dim, pad(` ${marker} ${label} ${count}`, width));
-            }
-            const key = `${row.item.kind}:${row.item.id}`;
-            const state = key === this.selectedId && this.focused ? "selected" : key === this.hoveredId ? "hover" : "idle";
-            return paint(this.renderItem(row.item, width), width, state, theme);
-        });
+        const more = [
+            view.above > 0 ? `${view.above} more above` : "",
+            view.below > 0 ? `${view.below} more below` : "",
+        ].filter(Boolean).join(" · ");
+        const moreLine = view.windowRows < maxRows && more
+            ? [themeDim(theme.dim, pad(`   … ${more}${this.focused ? "" : " · Ctrl+G"}`, width))]
+            : [];
+        return [...visibleRows.map((row) => {
+                if (row.kind === "header") {
+                    const count = items[row.section].length;
+                    const marker = this.collapsed.has(row.section) ? "▸" : "▾";
+                    const label = sections.find(([section]) => section === row.section)?.[1] ?? row.section;
+                    return themeDim(theme.dim, pad(` ${marker} ${label} ${count}`, width));
+                }
+                const key = `${row.item.kind}:${row.item.id}`;
+                const state = key === this.selectedId && this.focused ? "selected" : key === this.hoveredId ? "hover" : "idle";
+                return paint(this.renderItem(row.item, width), width, state, theme);
+            }), ...moreLine];
     }
     renderItem(item, width) {
         const theme = this.getTheme();
@@ -314,15 +446,19 @@ export class TasksPaneComponent {
         const index = Math.max(0, itemRows.findIndex((row) => `${row.item.kind}:${row.item.id}` === this.selectedId));
         if (matchesKey(data, "up") || data === "k") {
             const row = itemRows[Math.max(0, index - 1)];
-            if (row)
+            if (row) {
                 this.selectedId = `${row.item.kind}:${row.item.id}`;
+                this.selectionIsUsers = true;
+            }
             this.callbacks.onRender();
             return;
         }
         if (matchesKey(data, "down") || data === "j") {
             const row = itemRows[Math.min(itemRows.length - 1, index + 1)];
-            if (row)
+            if (row) {
                 this.selectedId = `${row.item.kind}:${row.item.id}`;
+                this.selectionIsUsers = true;
+            }
             this.callbacks.onRender();
             return;
         }
@@ -366,6 +502,7 @@ export class TasksPaneComponent {
             return true;
         }
         this.selectedId = `${row.item.kind}:${row.item.id}`;
+        this.selectionIsUsers = true;
         if (event.clickCount >= 2)
             this.openItem(row.item);
         return true;
@@ -395,14 +532,27 @@ export class TaskStatusBarComponent {
     render(width) {
         if (!this.pane.isAvailable())
             return [];
+        this.pane.syncState();
         const count = this.pane.activeCount();
-        const total = this.pane.totalCount();
+        // The bar describes what the pane lists: open, the rows on screen; closed,
+        // the default view Ctrl+G opens (running work plus this turn's). It used to
+        // count the whole session, a number that only ever grew. With nothing from
+        // this turn the bar is hidden; Ctrl+G still reaches the history.
+        const total = this.pane.isOpen() ? this.pane.visibleCount() : this.pane.defaultViewCount();
         if (total === 0 && !this.pane.isOpen())
             return [];
         const marker = this.pane.isOpen() ? "▾" : "▸";
         const theme = this.pane.theme();
+        // The list below also holds this turn's finished rows; say so, or the
+        // header counts fewer activities than the pane shows.
+        const settled = this.pane.settledCounts();
+        const outcome = [
+            settled.failed > 0 ? themeForeground(theme.error, `${settled.failed} failed`) : "",
+            settled.done > 0 ? `${settled.done} done` : "",
+            settled.stopped > 0 ? `${settled.stopped} stopped` : "",
+        ].filter(Boolean).map((part) => ` · ${part}`).join("");
         const text = count > 0
-            ? `${marker} ${themeForeground(theme.accent, this.pane.activityGlyph())} ${count} background activit${count === 1 ? "y" : "ies"} · Ctrl+G`
+            ? `${marker} ${themeForeground(theme.accent, this.pane.activityGlyph())} ${count} background activit${count === 1 ? "y" : "ies"}${outcome} · Ctrl+G`
             : `${marker} ${themeForeground(theme.success, "✓")} ${total} completed activit${total === 1 ? "y" : "ies"} · Ctrl+G`;
         return [themeDim(theme.dim, truncateToWidth(` ${text}`, Math.max(1, width), ""))];
     }

package/dist/tui/components/transcript.d.ts

@@ -45,12 +45,19 @@ export interface TranscriptTheme {
 }
 export declare function createTranscriptTheme(getTheme: () => Theme): TranscriptTheme;
 export declare const defaultTranscriptTheme: TranscriptTheme;
+/**
+ * Width of the shared left rail. Column 0..2 belong to surface chrome
+ * (user `›`, hovered tool `│`, reasoning `┃`); the body starts at column 3.
+ * Changing this moves every transcript surface together.
+ */
+export declare const TRANSCRIPT_RAIL_COLUMNS = 3;
 export declare function renderUserCard(content: string, options: TranscriptRenderOptions, images?: readonly DisplayImageAttachment[], messageKey?: string): string[];
 export declare function wrapPlain(text: string, columns: number): string[];
 /**
  * Project assistant prose without transcript spacing. Live streaming and
  * settled history both call this function, so completing a turn cannot change
- * the answer gutter or wrapping width.
+ * the answer gutter or wrapping width. Prose carries an empty rail: its body
+ * sits in the same column as user text and tool entries.
  */
 export declare function projectAssistantRows(content: string, options: TranscriptRenderOptions): string[];
 export declare function renderAssistant(content: string, options: TranscriptRenderOptions): string[];
@@ -71,9 +78,9 @@ export interface ReasoningProjectionOptions {
 /** Grok minimal mode keeps the same rolling reasoning surface live/settled. */
 export declare const MINIMAL_REASONING_BODY_ROWS = 5;
 /**
- * Grok-style reasoning surface. Reasoning alone owns a one-cell rail; normal
- * assistant prose never inherits this gutter. The same projection is used by
- * the live row pool and committed transcript.
+ * Grok-style reasoning surface. Reasoning paints a `┃` in the shared rail so
+ * its body lines up with prose and tool entries. The same projection is used
+ * by the live row pool and committed transcript.
  */
 export declare function projectReasoningRows(content: string, options: TranscriptRenderOptions, projection?: ReasoningProjectionOptions): string[];
 export declare function renderReasoning(content: string, options: TranscriptRenderOptions): string[];