@bubblebrain-ai/bubble 0.0.52 → 0.0.54

package/dist/tui/footer.js

@@ -0,0 +1,80 @@
+/** Shared footer line renderer (main + fullscreen modes). */
+import chalk from "chalk";
+import { truncateToWidth } from "@bubblebrain-ai/pi-tui";
+import { formatContextUsageLabel, friendlyCwd } from "./formatting/summary.js";
+import { PERMISSION_MODE_INFO } from "../permission/mode.js";
+import { classifyExternalRuntimeBinding } from "../external-runtime/session-policy.js";
+import { darkTheme } from "./model/theme.js";
+import { themeDim, themeForeground } from "./model/theme-style.js";
+/** Width-responsive single-row footer shared by main and fullscreen TUIs. */
+export class ResponsiveFooterComponent {
+    getSnapshot;
+    constructor(getSnapshot) {
+        this.getSnapshot = getSnapshot;
+    }
+    render(width) {
+        const snapshot = this.getSnapshot();
+        if (snapshot.hidden)
+            return [];
+        const rows = [];
+        const theme = snapshot.theme ?? darkTheme;
+        const muted = snapshot.theme ? (text) => themeDim(theme.dim, text) : chalk.dim;
+        if (snapshot.goalLine?.trim()) {
+            rows.push(truncateToWidth(muted(snapshot.goalLine.trim()), Math.max(1, Math.floor(width))));
+        }
+        if (snapshot.runtimeLabel?.trim()) {
+            rows.push(truncateToWidth(snapshot.theme ? themeForeground(theme.accent, snapshot.runtimeLabel.trim()) : chalk.cyan(snapshot.runtimeLabel.trim()), Math.max(1, Math.floor(width))));
+        }
+        rows.push(renderFooterLine(snapshot.agent, width, snapshot));
+        return rows;
+    }
+    invalidate() {
+        // No cache: terminal width, model, cwd, usage, and queue badges are live.
+    }
+}
+export function renderFooterLine(agent, columns, options = {}) {
+    const theme = options.theme ?? darkTheme;
+    const muted = options.theme ? (text) => themeDim(theme.dim, text) : chalk.dim;
+    const usage = formatContextUsageLabel(agent.getContextUsageSnapshot());
+    const cwd = options.cwd ?? friendlyCwd(process.cwd());
+    const mode = renderPermissionModeBadge(options.mode);
+    const nativeDetails = !options.runtimeLabel?.trim();
+    const parts = [
+        ...(mode ? [mode] : []),
+        ...(nativeDetails && agent.model ? [muted(agent.model)] : []),
+        muted(cwd),
+        ...(options.branch?.trim() ? [muted(options.branch.trim())] : []),
+        ...(nativeDetails && options.sessionTitle?.trim() ? [muted(options.sessionTitle.trim())] : []),
+        ...(nativeDetails && usage ? [muted(usage)] : []),
+        ...(options.extra ?? []),
+    ];
+    const line = parts.join(muted(" │ "));
+    return truncateToWidth(line, Math.max(1, Math.floor(columns)));
+}
+/** Match the legacy footer contract for persisted external-runtime sessions. */
+export function formatExternalRuntimeFooterLabel(binding) {
+    const kind = classifyExternalRuntimeBinding(binding);
+    if (kind === "none")
+        return undefined;
+    if (kind === "unsupported")
+        return "Unsupported external runtime · recovery-only";
+    const record = binding && typeof binding === "object"
+        ? binding
+        : undefined;
+    const model = typeof record?.modelId === "string" && record.modelId.trim()
+        ? record.modelId.trim()
+        : undefined;
+    const effort = typeof record?.reasoningEffort === "string"
+        && record.reasoningEffort.trim()
+        && record.reasoningEffort !== "off"
+        ? record.reasoningEffort.trim()
+        : undefined;
+    return ["Grok Subscription", model, effort, "workspace"].filter(Boolean).join(" · ");
+}
+export function renderPermissionModeBadge(mode) {
+    if (!mode || mode === "default")
+        return "";
+    const info = PERMISSION_MODE_INFO[mode];
+    const label = `${info.symbol ? `${info.symbol} ` : ""}${info.shortTitle} on`;
+    return mode === "bypassPermissions" ? chalk.bold.red(label) : chalk.bold.cyan(label);
+}

package/dist/{tui-ink → tui/formatting}/edit-diff.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayToolCall } from "./display-history.js";
+import type { DisplayToolCall } from "../model/display-history.js";
 export declare const EDIT_COLLAPSED_DIFF_LINES = 20;
 export interface EditDiffDetails {
     diff: string;

package/dist/{tui-ink → tui/formatting}/edit-diff.js

@@ -1,4 +1,4 @@
-import { countUnifiedDiffChanges } from "../diff-stats.js";
+import { countUnifiedDiffChanges } from "../../diff-stats.js";
 export const EDIT_COLLAPSED_DIFF_LINES = 20;
 export function getEditDiffDetails(tool) {
     if (tool.name !== "edit" || tool.isError)

package/dist/{tui-ink/app-helpers.d.ts → tui/formatting/summary.d.ts}

@@ -1,7 +1,7 @@
-import type { Agent } from "../agent.js";
-import { type ProviderRegistry } from "../provider-registry.js";
-import type { BackgroundTaskInfo } from "../tasks/manager.js";
-import { type DisplayMessage } from "./display-history.js";
+import type { Agent } from "../../agent.js";
+import { type ProviderRegistry } from "../../provider-registry.js";
+import type { BackgroundTaskInfo } from "../../tasks/manager.js";
+import { type DisplayMessage } from "../model/display-history.js";
 export declare const TASK_WAKE_DEBOUNCE_MS = 2000;
 export declare function buildTips(agent: Agent, registry: ProviderRegistry, grokActive?: boolean): string[];
 /**

package/dist/{tui-ink/app-helpers.js → tui/formatting/summary.js}

@@ -5,8 +5,8 @@
  * clamp shared by the picker overlays.
  */
 import os from "node:os";
-import { displayModel } from "../provider-registry.js";
-import { nextDisplayMessageKey } from "./display-history.js";
+import { displayModel } from "../../provider-registry.js";
+import { nextDisplayMessageKey } from "../model/display-history.js";
 export const TASK_WAKE_DEBOUNCE_MS = 2000;
 export function buildTips(agent, registry, grokActive = false) {
     const tips = [];

package/dist/tui/fullscreen.d.ts

@@ -0,0 +1,48 @@
+import { type Terminal } from "@bubblebrain-ai/pi-tui";
+import type { BubbleTuiController } from "./controller/controller.js";
+import type { Agent } from "../agent.js";
+import { TraceInteractionState } from "./model/trace-interaction.js";
+import type { ComposerController } from "./controller/composer-controller.js";
+import { type Theme } from "./model/theme.js";
+export interface FullscreenAppOptions {
+    controller: BubbleTuiController;
+    agent: Pick<Agent, "model" | "mode" | "setMode" | "getContextUsageSnapshot">;
+    onExit(): void;
+    /** Route non-mode slash commands through the main app's shared registry. */
+    onCommand(command: string): void;
+    /** Test/embedded host injection; production uses ProcessTerminal. */
+    terminal?: Terminal;
+    /** Preserve tool-group folds when switching from the regular renderer. */
+    traceInteraction?: TraceInteractionState;
+    /** Shared semantic composer state when transitioning from the main renderer. */
+    composer?: ComposerController;
+    /** Shared live palette when this view is entered from the regular renderer. */
+    getTheme?: () => Theme;
+}
+export declare class FullscreenApp {
+    private readonly options;
+    private readonly tui;
+    private readonly transcript;
+    private readonly streamingMessage;
+    private readonly animationClock;
+    private readonly editor;
+    private readonly composerPreview?;
+    private readonly footer;
+    private readonly traceInteraction;
+    private readonly markdown;
+    private readonly transcriptTheme;
+    private readonly markdownRenderer;
+    private readonly unsubscribe;
+    private showReasoning;
+    private verboseTrace;
+    private disposed;
+    private streamingMounted;
+    constructor(options: FullscreenAppOptions);
+    private buildLayout;
+    private openImageViewer;
+    render(): void;
+    private transcriptRenderOptions;
+    start(): void;
+    dispose(): void;
+    waitUntilExit(): Promise<void>;
+}

package/dist/tui/fullscreen.js

@@ -0,0 +1,255 @@
+/**
+ * Fullscreen (alternate-screen) mode on TuiAltScreen (rewrite/pi-tui).
+ *
+ * Complements the default main-screen chat flow: instead of appending to
+ * scrollback, the whole transcript lives in a viewport with follow-end,
+ * mouse-wheel scrolling, click-drag selection, and Ctrl+F transcript search
+ * (all provided by TuiAltScreen + ScrollView). The composer stays docked at
+ * the bottom via a layout root: [transcript scroll view, editor, footer].
+ *
+ * Toggle with /fullscreen; Escape exits back to the main screen.
+ */
+import process from "node:process";
+import { ProcessTerminal, TuiAltScreen, VStack, ScrollView, Editor, Markdown, matchesKey, isKeyRelease, } from "@bubblebrain-ai/pi-tui";
+import { ResponsiveTranscriptComponent } from "./components/responsive-transcript.js";
+import { StreamingMessageComponent } from "./components/streaming-message.js";
+import { createTranscriptTheme } from "./components/transcript.js";
+import { ResponsiveFooterComponent } from "./footer.js";
+import { getNextPermissionMode } from "../permission/mode.js";
+import { COMPOSER_EDITOR_OPTIONS, createComposerEditorTheme } from "./composer-style.js";
+import { TraceInteractionState } from "./model/trace-interaction.js";
+import { ComposerImagePreviewComponent, ImageViewerComponent } from "./components/image-preview.js";
+import { createAssistantMarkdownTheme } from "./markdown-style.js";
+import { darkTheme } from "./model/theme.js";
+import { TuiAnimationClock } from "./animation-clock.js";
+export class FullscreenApp {
+    options;
+    tui;
+    transcript;
+    streamingMessage;
+    animationClock;
+    editor;
+    composerPreview;
+    footer;
+    traceInteraction;
+    markdown;
+    transcriptTheme;
+    markdownRenderer = (text, width) => {
+        this.markdown.setText(text);
+        return this.markdown.render(width);
+    };
+    unsubscribe;
+    showReasoning = false;
+    verboseTrace = false;
+    disposed = false;
+    streamingMounted = false;
+    constructor(options) {
+        this.options = options;
+        const terminal = options.terminal ?? new ProcessTerminal();
+        const getTheme = options.getTheme ?? (() => darkTheme);
+        this.transcriptTheme = createTranscriptTheme(getTheme);
+        this.markdown = new Markdown("", 0, 0, createAssistantMarkdownTheme(getTheme));
+        this.traceInteraction = options.traceInteraction ?? new TraceInteractionState();
+        // Trace hover depends on no-button pointer motion, including inside tmux.
+        this.tui = new TuiAltScreen(terminal, undefined, undefined, { mouseMotion: "all" });
+        this.editor = new Editor(this.tui, createComposerEditorTheme(getTheme), COMPOSER_EDITOR_OPTIONS);
+        this.composerPreview = options.composer
+            ? new ComposerImagePreviewComponent(() => options.composer?.previewAttachment(), getTheme)
+            : undefined;
+        this.transcript = new ResponsiveTranscriptComponent(() => ({
+            messages: this.options.controller.getTranscript(),
+            options: this.transcriptRenderOptions(),
+        }), {
+            onTraceAction: (action) => {
+                if (action.kind !== "open-image")
+                    return;
+                const message = this.options.controller.getTranscript().find((candidate) => candidate.key === action.messageKey);
+                const image = message?.images?.find((candidate) => candidate.label === action.imageLabel);
+                if (image)
+                    this.openImageViewer(image);
+            },
+        });
+        this.streamingMessage = new StreamingMessageComponent(8, () => this.tui.requestRender(), undefined, getTheme);
+        this.animationClock = new TuiAnimationClock((elapsedMs) => {
+            if (this.streamingMessage.advanceAnimationFrame(elapsedMs))
+                this.tui.requestRender();
+        });
+        this.footer = new ResponsiveFooterComponent(() => ({
+            agent: this.options.agent,
+            mode: this.options.agent.mode,
+            goalLine: this.options.controller.getGoalIndicator?.(),
+            hidden: this.tui.terminal.rows <= 2,
+            theme: getTheme(),
+        }));
+        this.buildLayout();
+        this.unsubscribe = this.options.controller.subscribe(() => this.render());
+    }
+    buildLayout() {
+        // The live tail belongs inside the scrolling transcript. Its activity lane
+        // stays docked above the composer and keeps one row both running and idle,
+        // so clearing the spinner cannot pull settled content downward.
+        const transcriptBody = new VStack([this.transcript, this.streamingMessage]);
+        const scroll = new ScrollView(transcriptBody, { follow: "end", primary: true });
+        const layout = new VStack([
+            { component: scroll, basis: 0, grow: 1, minSize: 0 },
+            { component: this.streamingMessage.activityLane, basis: "auto", shrink: 0 },
+            ...(this.composerPreview ? [{ component: this.composerPreview, basis: "auto", shrink: 0 }] : []),
+            { component: this.editor, basis: "auto", shrink: 0 },
+            { component: this.footer, basis: "auto", shrink: 0 },
+        ]);
+        this.tui.setLayoutRoot(layout);
+        this.tui.setFocus(this.editor);
+        if (this.options.composer) {
+            this.options.composer.attachEditor(this.editor);
+            this.options.composer.setOpenImageHandler((image) => this.openImageViewer(image));
+        }
+        else
+            this.editor.onSubmit = (text) => {
+                const trimmed = text.trim();
+                if (!trimmed)
+                    return;
+                this.editor.addToHistory(trimmed);
+                if (trimmed === "/fullscreen" || trimmed === "/main") {
+                    this.options.onExit();
+                    return;
+                }
+                if (trimmed.startsWith("/")) {
+                    this.options.onCommand(trimmed);
+                    return;
+                }
+                if (this.options.controller.isRunning()) {
+                    this.options.controller.steer(trimmed);
+                }
+                else if (this.options.controller.queueAfterCommand?.(trimmed)) {
+                    this.render();
+                }
+                else {
+                    this.options.controller.appendDisplayMessage({ key: `user-${Date.now()}`, role: "user", content: trimmed });
+                    void this.options.controller.runTurn(trimmed, process.cwd());
+                }
+            };
+        this.tui.addInputListener((data) => {
+            // Kitty reports key releases separately. Global shortcuts must only run
+            // on the press or Escape would cancel the run and exit on key-up.
+            if (isKeyRelease(data))
+                return { consume: true };
+            if (matchesKey(data, "shift+tab")) {
+                this.options.agent.setMode(getNextPermissionMode(this.options.agent.mode));
+                this.render();
+                return { consume: true };
+            }
+            if (matchesKey(data, "escape")) {
+                if (this.options.controller.cancelActiveRun()) {
+                    return { consume: true };
+                }
+                if (this.options.controller.isBusy?.())
+                    return { consume: true };
+                this.options.onExit();
+                return { consume: true };
+            }
+            if (matchesKey(data, "ctrl+c")) {
+                if (this.options.controller.cancelActiveRun()) {
+                    return { consume: true };
+                }
+                if (this.options.controller.isBusy?.())
+                    return { consume: true };
+                this.options.onExit();
+                return { consume: true };
+            }
+            if (data === "\x14") {
+                this.showReasoning = !this.showReasoning;
+                this.render();
+                return { consume: true };
+            }
+            if (data === "\x0f") {
+                this.verboseTrace = !this.verboseTrace;
+                this.render();
+                return { consume: true };
+            }
+            return undefined;
+        });
+    }
+    openImageViewer(image) {
+        let handle;
+        const close = () => {
+            handle?.hide();
+            this.tui.setFocus(this.editor);
+            this.render();
+        };
+        const component = new ImageViewerComponent(image, close, () => this.tui.terminal.rows, this.options.getTheme);
+        handle = this.tui.showOverlay(component, {
+            anchor: "center",
+            width: "70%",
+            minWidth: 36,
+            maxWidth: 110,
+            maxHeight: "85%",
+            margin: 1,
+            dismissOnOutsideClick: true,
+        });
+        this.tui.setFocus(component);
+    }
+    render() {
+        if (this.disposed)
+            return;
+        const columns = this.tui.terminal.columns || process.stdout.columns || 80;
+        const tail = this.options.controller.isRunning()
+            ? this.options.controller.getStreamingTail()
+            : null;
+        const commandActivity = this.options.controller.getCommandActivity?.() ?? null;
+        if (tail) {
+            if (!this.streamingMounted) {
+                this.streamingMounted = true;
+                this.streamingMessage.startSpinner();
+            }
+            this.streamingMessage.noteWidth(columns);
+            this.streamingMessage.update(tail, columns, this.transcriptRenderOptions());
+        }
+        else if (commandActivity) {
+            if (!this.streamingMounted) {
+                this.streamingMounted = true;
+                this.streamingMessage.startSpinner();
+            }
+            this.streamingMessage.noteWidth(columns);
+            this.streamingMessage.updateCommandActivity(commandActivity.kind === "compact" ? "Compacting" : commandActivity.kind, commandActivity.status === "cancelling", columns);
+        }
+        else if (this.streamingMounted) {
+            this.streamingMounted = false;
+            this.streamingMessage.clearToNothing();
+        }
+        this.animationClock.setActive(this.streamingMessage.isAnimationActive());
+        this.tui.requestRender();
+    }
+    transcriptRenderOptions() {
+        return {
+            theme: this.transcriptTheme,
+            showReasoning: this.showReasoning,
+            verboseTrace: this.verboseTrace,
+            traceInteraction: this.traceInteraction,
+            markdownRenderer: this.markdownRenderer,
+            // While running, this separates settled history from the live surface.
+            // Once settled, the permanent blank activity lane owns the dock gap.
+            trailingSpacer: this.options.controller.isRunning(),
+        };
+    }
+    start() {
+        this.tui.start();
+        this.render();
+    }
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        this.unsubscribe();
+        this.animationClock.dispose();
+        this.streamingMessage.dispose();
+        // Returning to the host/main renderer must not copy the fullscreen dock
+        // (composer + footer) into terminal scrollback.
+        this.tui.stop({ preserveScreen: true });
+    }
+    async waitUntilExit() {
+        await new Promise(() => {
+            // Exit is driven by onExit (Escape/Ctrl+C//fullscreen); the promise
+            // resolves via dispose() from the host.
+        });
+    }
+}

package/dist/tui/image-display.d.ts

@@ -16,4 +16,8 @@ export declare function splitImageDisplayContent(content: string): {
     referenceLines: string[];
 };
 export declare function formatImageUserDisplayText(input: string, imageCount: number, labelStart?: number): string;
+export declare function displayImagesFromPayload(payload: SubmitPayload): DisplayImageAttachment[];
+export declare function imageAttachmentFromDataUrl(url: string): ImageAttachment | undefined;
 export declare function nextImageDisplayLabelStart(messages: Iterable<ImageDisplayMessage>): number;
+import type { SubmitPayload } from "./model/composer-types.js";
+import type { DisplayImageAttachment, ImageAttachment } from "./model/image-attachment.js";

package/dist/tui/image-display.js

@@ -46,18 +46,36 @@ export function formatImageUserDisplayText(input, imageCount, labelStart = 1) {
     if (imageCount <= 0)
         return input;
     const labels = imageDisplayLabels(imageCount, labelStart);
-    const base = input.trim();
-    // Labels already present inline (placed at their paste position in the
-    // composer) stay where they are; only labels missing from the text are
-    // prepended as a headline (back-compat for callers without inline labels).
-    const missing = labels.filter((label) => !input.includes(label));
-    const headline = missing.length > 0
-        ? (base ? `${missing.join(" ")} ${base}` : missing.join(" "))
-        : base;
-    return [
-        headline,
-        ...labels.map(imageDisplayReferenceLine),
-    ].join("\n");
+    // The composer text is the canonical presentation: if a chip was inserted
+    // inline, keep it at that exact position after submit. Reconstructed legacy
+    // messages do not contain labels, so only their missing chips fall back to
+    // standalone reference rows.
+    const missingLabels = labels.filter((label) => !input.includes(label));
+    return [input, ...missingLabels.map(imageDisplayReferenceLine)].filter(Boolean).join("\n");
+}
+export function displayImagesFromPayload(payload) {
+    const start = payload.imageDisplayStart ?? 1;
+    return payload.images.map((attachment, index) => ({
+        ...attachment,
+        label: imageDisplayLabel(start + index),
+    }));
+}
+export function imageAttachmentFromDataUrl(url) {
+    const match = /^data:([^;,]+);base64,([A-Za-z0-9+/=\r\n]+)$/.exec(url.trim());
+    if (!match)
+        return undefined;
+    const mediaType = match[1].toLowerCase();
+    const base64 = match[2].replace(/[\r\n]/g, "");
+    if (!mediaType.startsWith("image/"))
+        return undefined;
+    let bytes = 0;
+    try {
+        bytes = Buffer.from(base64, "base64").byteLength;
+    }
+    catch {
+        return undefined;
+    }
+    return { base64, mediaType, bytes, dataUrl: `data:${mediaType};base64,${base64}` };
 }
 export function nextImageDisplayLabelStart(messages) {
     let max = 0;

package/dist/tui/markdown-style.d.ts

@@ -0,0 +1,5 @@
+import type { MarkdownTheme } from "@bubblebrain-ai/pi-tui";
+import { type Theme } from "./model/theme.js";
+/** Shared assistant Markdown styling for every transcript host. */
+export declare function createAssistantMarkdownTheme(getTheme: () => Theme): MarkdownTheme;
+export declare const ASSISTANT_MARKDOWN_THEME: MarkdownTheme;

package/dist/tui/markdown-style.js

@@ -0,0 +1,23 @@
+import chalk from "chalk";
+import { darkTheme } from "./model/theme.js";
+import { themeDim, themeForeground } from "./model/theme-style.js";
+/** Shared assistant Markdown styling for every transcript host. */
+export function createAssistantMarkdownTheme(getTheme) {
+    return {
+        heading: (text) => chalk.bold(themeForeground(getTheme().accent, text)),
+        link: (text) => chalk.underline(themeForeground(getTheme().accent, text)),
+        linkUrl: (text) => themeDim(getTheme().dim, text),
+        code: (text) => themeForeground(getTheme().inlineCode, text),
+        codeBlock: (text) => themeForeground(getTheme().agent, text),
+        codeBlockBorder: (text) => themeDim(getTheme().border, text),
+        quote: (text) => themeDim(getTheme().dim, text),
+        quoteBorder: (text) => themeDim(getTheme().border, text),
+        hr: (text) => themeDim(getTheme().border, text),
+        listBullet: (text) => themeForeground(getTheme().accent, text),
+        bold: (text) => chalk.bold(text),
+        italic: (text) => chalk.italic(text),
+        strikethrough: (text) => chalk.strikethrough(text),
+        underline: (text) => chalk.underline(text),
+    };
+}
+export const ASSISTANT_MARKDOWN_THEME = createAssistantMarkdownTheme(() => darkTheme);

package/dist/{tui-ink → tui/model}/composer-buffer.js

@@ -1,4 +1,4 @@
-import { createPastedContentMarker } from "../tui/paste-placeholder.js";
+import { createPastedContentMarker } from "../../tui/paste-placeholder.js";
 function clampOffset(text, value) {
     if (!Number.isFinite(value))
         return 0;

package/dist/tui/model/composer-types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Composer submission payload — the bridge type between the composer UI and
+ * the agent input path. Lives in the renderer-neutral model layer so the
+ * queue state machine can reference it without importing a renderer.
+ */
+import type { ImageAttachment } from "./image-attachment.js";
+export interface SubmitPayload {
+    /** Fully-expanded text sent to the agent. */
+    text: string;
+    /** Text shown in the composer/transcript when it differs from the real text. */
+    displayText?: string;
+    images: ImageAttachment[];
+    /** First UI-only [Image #N] label reserved for this submitted payload. */
+    imageDisplayStart?: number;
+    /** Harness-initiated submission; runs hidden (task wake path). */
+    internal?: "task_wake";
+}

package/dist/tui/model/composer-types.js

@@ -0,0 +1 @@
+export {};

package/dist/{tui-ink → tui/model}/display-history.d.ts

@@ -1,10 +1,13 @@
-import type { Message, ToolResultMetadata } from "../types.js";
+import type { Message, ToolResultMetadata } from "../../types.js";
+import type { DisplayImageAttachment } from "./image-attachment.js";
 export type UserInputStatus = "queued" | "pending_steer";
 export interface DisplayMessage {
     /** Stable identity, used as the transcript list key. Generated by the UI layer. */
     key?: string;
     role: "user" | "assistant" | "error";
     content: string;
+    /** Rich image state retained for chips, preview and session restore. */
+    images?: DisplayImageAttachment[];
     /** Correlates queued/steer placeholder rows with their lifecycle events. */
     clientId?: string;
     /** Badge for user input waiting to enter the run (QUEUED / STEER). */
@@ -50,6 +53,9 @@ export interface DisplayToolCall {
      * a command preview.
      */
     rawArguments?: string;
+    /** Live execution state. Result text may be present during a running
+     *  subagent/tool update, so pending cannot be inferred from `result` alone. */
+    status?: "queued" | "pending" | "running" | "completed" | "failed" | "blocked" | "cancelled";
     result?: string;
     isError?: boolean;
     metadata?: ToolResultMetadata;

package/dist/{tui-ink → tui/model}/display-reconstruct.d.ts

@@ -1,3 +1,3 @@
 import { type DisplayMessage } from "./display-history.js";
-import type { Message } from "../types.js";
+import type { Message } from "../../types.js";
 export declare function reconstructDisplayMessages(agentMessages: Message[]): DisplayMessage[];

package/dist/{tui-ink → tui/model}/display-reconstruct.js

@@ -2,14 +2,59 @@
  * Rebuilds UI DisplayMessages from the agent's raw transcript — used on
  * initial mount and after transcript rewrites (rewind, resume).
  */
-import { INTERRUPTED_ASSISTANT_CONTENT } from "../agent.js";
-import { isHiddenToolMetadata } from "../agent/tool-visibility.js";
-import { isInternalBlockOnlyContent } from "../agent/internal-reminder-sanitizer.js";
+import { INTERRUPTED_ASSISTANT_CONTENT } from "../../agent.js";
+import { isHiddenToolMetadata } from "../../agent/tool-visibility.js";
+import { isInternalBlockOnlyContent } from "../../agent/internal-reminder-sanitizer.js";
+import { COMPACTION_SUMMARY_PREFIX } from "../../context/compact.js";
 import { nextDisplayMessageKey, stripInterruptedAssistantMarker } from "./display-history.js";
+import { synchronizeSubagentSnapshots } from "./subagent-view.js";
+import { formatImageUserDisplayText, imageAttachmentFromDataUrl, imageDisplayLabel } from "../image-display.js";
+function reconstructUserContent(message, imageDisplayStart) {
+    const { content } = message;
+    if (typeof content === "string") {
+        return { text: content, images: [], nextImageDisplayStart: imageDisplayStart };
+    }
+    const text = content
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
+        .join("\n")
+        .trim();
+    const imageCount = content.filter((part) => part.type === "image_url").length;
+    const labelStart = message.ui?.imageDisplayStart ?? imageDisplayStart;
+    const images = content
+        .filter((part) => part.type === "image_url")
+        .map((part, index) => {
+        const attachment = imageAttachmentFromDataUrl(part.image_url.url);
+        return attachment ? { ...attachment, label: imageDisplayLabel(labelStart + index) } : undefined;
+    })
+        .filter((item) => item !== undefined);
+    return {
+        text: formatImageUserDisplayText(message.ui?.displayText ?? text, imageCount, labelStart),
+        images,
+        nextImageDisplayStart: Math.max(imageDisplayStart, labelStart + imageCount),
+    };
+}
 export function reconstructDisplayMessages(agentMessages) {
     const result = [];
+    let nextImageDisplayStart = 1;
     for (const m of agentMessages) {
-        if (m.role === "system" || m.role === "tool")
+        if (m.role === "system") {
+            const content = typeof m.content === "string" ? m.content : "";
+            if (content.startsWith(COMPACTION_SUMMARY_PREFIX)) {
+                const summary = content.slice(COMPACTION_SUMMARY_PREFIX.length).trim();
+                if (summary) {
+                    result.push({
+                        key: nextDisplayMessageKey("compact"),
+                        role: "assistant",
+                        content: "Compaction completed.",
+                        syntheticKind: "ui_compact_summary",
+                        compactionSummary: summary,
+                    });
+                }
+            }
+            continue;
+        }
+        if (m.role === "tool")
             continue;
         if (m.role === "user") {
             if (m.isMeta)
@@ -20,10 +65,13 @@ export function reconstructDisplayMessages(agentMessages) {
             // when the transcript is rebuilt.
             if (isInternalBlockOnlyContent(m.content))
                 continue;
+            const reconstructed = reconstructUserContent(m, nextImageDisplayStart);
+            nextImageDisplayStart = reconstructed.nextImageDisplayStart;
             result.push({
                 key: nextDisplayMessageKey("user"),
                 role: "user",
-                content: typeof m.content === "string" ? m.content : "(multimedia)",
+                content: reconstructed.text,
+                images: reconstructed.images.length > 0 ? reconstructed.images : undefined,
             });
         }
         else if (m.role === "assistant") {
@@ -78,5 +126,5 @@ export function reconstructDisplayMessages(agentMessages) {
             }
         }
     }
-    return result;
+    return synchronizeSubagentSnapshots(result);
 }