@bubblebrain-ai/bubble 0.0.52 → 0.0.54

package/dist/tui/components/tasks-pane.d.ts

@@ -0,0 +1,88 @@
+import { type Component, type TuiMouseEvent } from "@bubblebrain-ai/pi-tui";
+import type { WorkflowRunSnapshot } from "../../agent/workflow/control.js";
+import type { BackgroundTaskInfo } from "../../tasks/manager.js";
+import { type Theme } from "../model/theme.js";
+import { type SubagentDisplay, type SubagentGroup } from "../model/subagent-view.js";
+export interface TasksPaneSnapshot {
+    groups: SubagentGroup[];
+    workflows: WorkflowRunSnapshot[];
+    tasks: BackgroundTaskInfo[];
+}
+export interface WorkflowPaneItem {
+    kind: "workflow";
+    id: string;
+    title: string;
+    status: string;
+    members: SubagentDisplay[];
+    createdAt?: number;
+    updatedAt?: number;
+}
+export interface SubagentPaneItem {
+    kind: "subagent";
+    id: string;
+    title: string;
+    status: string;
+    member: SubagentDisplay;
+}
+export interface TaskPaneItem {
+    kind: "task";
+    id: string;
+    title: string;
+    status: string;
+    task: BackgroundTaskInfo;
+}
+export type PaneItem = WorkflowPaneItem | SubagentPaneItem | TaskPaneItem;
+export interface TasksPaneCallbacks {
+    onRender(): void;
+    onOpenWorkflow(item: WorkflowPaneItem): void;
+    onOpenSubagent(item: SubagentPaneItem): void;
+    onOpenTask(item: TaskPaneItem): void;
+    onStopWorkflow(id: string): void;
+    onStopSubagent(id: string): void;
+    onStopTask(id: string): void;
+    onCopyTaskOutput?(id: string): void;
+    onEscape(): void;
+}
+export declare class TasksPaneComponent implements Component {
+    private readonly getSnapshot;
+    private readonly getTerminalRows;
+    private readonly callbacks;
+    private readonly getTheme;
+    focused: boolean;
+    private open;
+    private manuallyClosed;
+    private showHistory;
+    private selectedId?;
+    private hoveredId?;
+    private lastActiveCount;
+    private lastRows;
+    private allRows;
+    private frame;
+    private readonly collapsed;
+    constructor(getSnapshot: () => TasksPaneSnapshot, getTerminalRows: () => number, callbacks: TasksPaneCallbacks, getTheme?: () => Theme);
+    isAnimationActive(): boolean;
+    advanceAnimationFrame(): boolean;
+    dispose(): void;
+    invalidate(): void;
+    isOpen(): boolean;
+    isAvailable(): boolean;
+    activeCount(): number;
+    totalCount(): number;
+    activityGlyph(): string;
+    theme(): Theme;
+    toggle(forceFocus?: boolean): void;
+    close(): void;
+    render(width: number): string[];
+    private renderItem;
+    handleInput(data: string): void;
+    handleMouse(event: TuiMouseEvent): boolean;
+    private openItem;
+    private stopItem;
+}
+export declare class TaskStatusBarComponent implements Component {
+    private readonly pane;
+    constructor(pane: TasksPaneComponent);
+    render(width: number): string[];
+    handleMouse(event: TuiMouseEvent): boolean;
+    invalidate(): void;
+}

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

@@ -0,0 +1,416 @@
+import { matchesKey, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+import { safeSheetText } from "./bottom-sheet.js";
+import { latestSubagentNote, } from "../model/subagent-view.js";
+const FINAL = new Set(["completed", "failed", "blocked", "cancelled", "closed", "killed"]);
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+function isActive(status) {
+    return !FINAL.has(status);
+}
+function safe(value) {
+    return safeSheetText(value).replace(/[\r\n\t]+/g, " ").trim();
+}
+function pad(line, width) {
+    const clipped = truncateToWidth(line, width, "");
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+function paint(line, width, state, theme = darkTheme) {
+    const filled = pad(line, width);
+    if (state === "selected")
+        return themeBackground(theme.traceSelectedBg, filled);
+    if (state === "hover")
+        return themeBackground(theme.traceHoverBg, filled);
+    return filled;
+}
+function statusGlyph(status, frame, theme = darkTheme) {
+    if (status === "completed" || status === "closed")
+        return themeForeground(theme.success, "✓");
+    if (status === "failed" || status === "blocked")
+        return themeForeground(theme.error, "×");
+    if (status === "cancelled" || status === "killed")
+        return themeForeground(theme.muted, "■");
+    if (status === "queued")
+        return themeForeground(theme.muted, "○");
+    return themeForeground(theme.accent, SPINNER[frame % SPINNER.length]);
+}
+function elapsed(createdAt, updatedAt, active = true) {
+    if (!createdAt)
+        return "";
+    const ms = Math.max(0, (active ? Date.now() : updatedAt ?? Date.now()) - createdAt);
+    const seconds = Math.floor(ms / 1000);
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    return minutes < 60 ? `${minutes}m` : `${Math.floor(minutes / 60)}h${minutes % 60}m`;
+}
+function usageLabel(member) {
+    const usage = member.usage;
+    if (!usage)
+        return "";
+    const total = usage.promptTokens + usage.completionTokens;
+    return total >= 1000 ? `${(total / 1000).toFixed(total < 10_000 ? 1 : 0)}k` : String(total);
+}
+function workflowMembers(workflow, groups) {
+    if (workflow.snapshots.length > 0) {
+        return workflow.snapshots.map((snapshot) => ({
+            subAgentId: snapshot.agentId,
+            agentName: snapshot.agentName,
+            nickname: snapshot.nickname,
+            status: snapshot.status,
+            category: snapshot.category,
+            phase: snapshot.phase,
+            route: snapshot.route,
+            task: snapshot.task,
+            summary: snapshot.summary,
+            toolNotes: snapshot.toolNotes,
+            error: snapshot.error,
+            usage: snapshot.usage,
+            createdAt: snapshot.createdAt,
+            updatedAt: snapshot.updatedAt,
+        }));
+    }
+    return groups.find((group) => group.kind === "workflow" && group.runId === workflow.runId)?.members ?? [];
+}
+function normalize(snapshot, showHistory) {
+    const workflowItems = snapshot.workflows.map((workflow) => ({
+        kind: "workflow",
+        id: workflow.runId,
+        title: workflow.title,
+        status: workflow.status,
+        members: workflowMembers(workflow, snapshot.groups),
+        createdAt: workflow.createdAt,
+        updatedAt: workflow.updatedAt,
+    }));
+    const knownWorkflowRuns = new Set(snapshot.workflows.map((workflow) => workflow.runId));
+    for (const group of snapshot.groups) {
+        if (group.kind !== "workflow" || (group.runId && knownWorkflowRuns.has(group.runId)))
+            continue;
+        const statuses = group.members.map((member) => member.status ?? "running");
+        const status = statuses.some(isActive)
+            ? "running"
+            : statuses.some((value) => value === "failed" || value === "blocked") ? "failed" : "completed";
+        workflowItems.push({
+            kind: "workflow",
+            id: group.runId ?? group.id,
+            title: group.label,
+            status,
+            members: group.members,
+            createdAt: group.members.map((member) => member.createdAt).filter((value) => value !== undefined).sort()[0],
+            updatedAt: Math.max(0, ...group.members.map((member) => member.updatedAt ?? 0)),
+        });
+    }
+    const subagentItems = snapshot.groups
+        .filter((group) => group.kind !== "workflow")
+        .flatMap((group) => group.members.map((member) => ({
+        kind: "subagent",
+        id: member.subAgentId ?? group.id,
+        title: member.nickname ?? member.agentName ?? group.label,
+        status: member.status ?? "running",
+        member,
+    })));
+    const taskItems = snapshot.tasks.map((task) => ({
+        kind: "task",
+        id: task.id,
+        title: task.description || task.command,
+        status: task.status,
+        task,
+    }));
+    const filter = (items) => (showHistory ? items : items.filter((item) => isActive(item.status)))
+        .sort((left, right) => {
+        const activityOrder = Number(isActive(right.status)) - Number(isActive(left.status));
+        if (activityOrder !== 0)
+            return activityOrder;
+        return itemUpdatedAt(right) - itemUpdatedAt(left);
+    });
+    return {
+        workflows: filter(workflowItems),
+        subagents: filter(subagentItems),
+        tasks: filter(taskItems),
+    };
+}
+function itemUpdatedAt(item) {
+    if (item.kind === "workflow")
+        return item.updatedAt ?? item.createdAt ?? 0;
+    if (item.kind === "subagent")
+        return item.member.updatedAt ?? item.member.createdAt ?? 0;
+    return item.task.endedAt ?? item.task.startedAt;
+}
+export class TasksPaneComponent {
+    getSnapshot;
+    getTerminalRows;
+    callbacks;
+    getTheme;
+    focused = false;
+    open = false;
+    manuallyClosed = false;
+    showHistory = false;
+    selectedId;
+    hoveredId;
+    lastActiveCount = 0;
+    lastRows = [];
+    allRows = [];
+    frame = 0;
+    collapsed = new Set();
+    constructor(getSnapshot, getTerminalRows, callbacks, getTheme = () => darkTheme) {
+        this.getSnapshot = getSnapshot;
+        this.getTerminalRows = getTerminalRows;
+        this.callbacks = callbacks;
+        this.getTheme = getTheme;
+    }
+    isAnimationActive() {
+        return this.isAvailable() && this.activeCount() > 0;
+    }
+    advanceAnimationFrame() {
+        if (!this.isAnimationActive())
+            return false;
+        this.frame = (this.frame + 1) % SPINNER.length;
+        return true;
+    }
+    dispose() { }
+    invalidate() { }
+    isOpen() {
+        return this.open && this.getTerminalRows() >= 12;
+    }
+    isAvailable() {
+        return this.getTerminalRows() >= 12;
+    }
+    activeCount() {
+        const items = normalize(this.getSnapshot(), true);
+        return Object.values(items).flat().filter((item) => isActive(item.status)).length;
+    }
+    totalCount() {
+        const items = normalize(this.getSnapshot(), true);
+        return Object.values(items).flat().length;
+    }
+    activityGlyph() {
+        return SPINNER[this.frame % SPINNER.length];
+    }
+    theme() {
+        return this.getTheme();
+    }
+    toggle(forceFocus = false) {
+        if (this.open && !forceFocus) {
+            this.open = false;
+            this.manuallyClosed = true;
+        }
+        else {
+            this.open = true;
+            this.manuallyClosed = false;
+            // 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.showHistory = true;
+        }
+        this.callbacks.onRender();
+    }
+    close() {
+        this.open = false;
+        this.manuallyClosed = true;
+        this.callbacks.onRender();
+    }
+    render(width) {
+        const terminalRows = this.getTerminalRows();
+        if (terminalRows < 12) {
+            this.lastRows = [];
+            this.allRows = [];
+            return [];
+        }
+        const activeCount = this.activeCount();
+        if (activeCount > 0 && this.lastActiveCount === 0 && !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;
+            }
+            else {
+                this.open = false;
+                this.manuallyClosed = false;
+            }
+        }
+        this.lastActiveCount = activeCount;
+        if (!this.open) {
+            this.lastRows = [];
+            this.allRows = [];
+            return [];
+        }
+        const items = normalize(this.getSnapshot(), this.showHistory);
+        const sections = [
+            ["workflows", "Workflows"],
+            ["subagents", "Subagents"],
+            ["tasks", "Tasks"],
+        ];
+        const rows = [];
+        for (const [section] of sections) {
+            if (items[section].length === 0)
+                continue;
+            rows.push({ kind: "header", section });
+            if (!this.collapsed.has(section))
+                rows.push(...items[section].map((item) => ({ kind: "item", item })));
+        }
+        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)) {
+            this.selectedId = itemRows[0] ? `${itemRows[0].item.kind}:${itemRows[0].item.id}` : undefined;
+        }
+        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);
+        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);
+        });
+    }
+    renderItem(item, width) {
+        const theme = this.getTheme();
+        const glyph = statusGlyph(item.status, this.frame, theme);
+        if (item.kind === "workflow") {
+            const done = item.members.filter((member) => !isActive(member.status ?? "running")).length;
+            const progress = item.members.length > 0 ? `${done}/${item.members.length}` : item.status;
+            const duration = elapsed(item.createdAt, item.updatedAt, isActive(item.status));
+            return truncateToWidth(`   ${glyph} ${safe(item.title)}  ${themeDim(theme.dim, `${progress}${duration ? ` · ${duration}` : ""}`)}${isActive(item.status) ? themeDim(theme.dim, "  view  ×") : themeDim(theme.dim, "  view")}`, width, "");
+        }
+        if (item.kind === "task") {
+            const duration = elapsed(item.task.startedAt, item.task.endedAt, isActive(item.status));
+            const lineCount = `${item.task.outputLines} line${item.task.outputLines === 1 ? "" : "s"}`;
+            return truncateToWidth(`   ${glyph} ${safe(item.title)}  ${themeDim(theme.dim, `${item.status}${duration ? ` · ${duration}` : ""} · ${lineCount}`)}${isActive(item.status) ? themeDim(theme.dim, "  view  ×") : themeDim(theme.dim, "  view")}`, width, "");
+        }
+        const member = item.member;
+        const activity = latestSubagentNote(member);
+        const model = member.route?.model ?? member.agentName ?? "";
+        const tokens = usageLabel(member);
+        const duration = elapsed(member.createdAt, member.updatedAt, isActive(item.status));
+        const meta = [model, tokens ? `${tokens} tok` : "", duration].filter(Boolean).join(" · ");
+        const detail = activity ? ` — ${safe(activity)}` : "";
+        return truncateToWidth(`   ${glyph} ${safe(item.title)}${detail}  ${themeDim(theme.dim, meta)}${isActive(item.status) ? themeDim(theme.dim, "  view  ×") : themeDim(theme.dim, "  view")}`, width, "");
+    }
+    handleInput(data) {
+        if (matchesKey(data, "escape")) {
+            this.focused = false;
+            this.callbacks.onEscape();
+            return;
+        }
+        if (data === "h") {
+            this.showHistory = !this.showHistory;
+            this.callbacks.onRender();
+            return;
+        }
+        const itemRows = this.allRows.filter((row) => row.kind === "item");
+        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)
+                this.selectedId = `${row.item.kind}:${row.item.id}`;
+            this.callbacks.onRender();
+            return;
+        }
+        if (matchesKey(data, "down") || data === "j") {
+            const row = itemRows[Math.min(itemRows.length - 1, index + 1)];
+            if (row)
+                this.selectedId = `${row.item.kind}:${row.item.id}`;
+            this.callbacks.onRender();
+            return;
+        }
+        const selected = itemRows.find((row) => `${row.item.kind}:${row.item.id}` === this.selectedId)?.item;
+        if ((matchesKey(data, "left") || matchesKey(data, "right")) && selected) {
+            const section = selected.kind === "workflow" ? "workflows" : selected.kind === "subagent" ? "subagents" : "tasks";
+            if (matchesKey(data, "left"))
+                this.collapsed.add(section);
+            else
+                this.collapsed.delete(section);
+            this.callbacks.onRender();
+            return;
+        }
+        if ((matchesKey(data, "enter") || matchesKey(data, "ctrl+f")) && selected)
+            this.openItem(selected);
+        if (data === "x" && selected && isActive(selected.status))
+            this.stopItem(selected);
+        if (data === "y" && selected?.kind === "task")
+            this.callbacks.onCopyTaskOutput?.(selected.id);
+    }
+    handleMouse(event) {
+        if (event.kind === "leave") {
+            const changed = this.hoveredId !== undefined;
+            this.hoveredId = undefined;
+            return changed;
+        }
+        const row = this.lastRows[event.y];
+        if (event.kind === "move") {
+            const next = row?.kind === "item" ? `${row.item.kind}:${row.item.id}` : undefined;
+            const changed = next !== this.hoveredId;
+            this.hoveredId = next;
+            return changed;
+        }
+        if (event.release || (event.button & 3) !== 0 || !row)
+            return false;
+        if (row.kind === "header") {
+            if (this.collapsed.has(row.section))
+                this.collapsed.delete(row.section);
+            else
+                this.collapsed.add(row.section);
+            return true;
+        }
+        this.selectedId = `${row.item.kind}:${row.item.id}`;
+        if (event.clickCount >= 2)
+            this.openItem(row.item);
+        return true;
+    }
+    openItem(item) {
+        if (item.kind === "workflow")
+            this.callbacks.onOpenWorkflow(item);
+        else if (item.kind === "subagent")
+            this.callbacks.onOpenSubagent(item);
+        else
+            this.callbacks.onOpenTask(item);
+    }
+    stopItem(item) {
+        if (item.kind === "workflow")
+            this.callbacks.onStopWorkflow(item.id);
+        else if (item.kind === "subagent")
+            this.callbacks.onStopSubagent(item.id);
+        else
+            this.callbacks.onStopTask(item.id);
+    }
+}
+export class TaskStatusBarComponent {
+    pane;
+    constructor(pane) {
+        this.pane = pane;
+    }
+    render(width) {
+        if (!this.pane.isAvailable())
+            return [];
+        const count = this.pane.activeCount();
+        const total = this.pane.totalCount();
+        if (total === 0 && !this.pane.isOpen())
+            return [];
+        const marker = this.pane.isOpen() ? "▾" : "▸";
+        const theme = this.pane.theme();
+        const text = count > 0
+            ? `${marker} ${themeForeground(theme.accent, this.pane.activityGlyph())} ${count} background activit${count === 1 ? "y" : "ies"} · 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), ""))];
+    }
+    handleMouse(event) {
+        if (event.kind !== "press" || event.release || (event.button & 3) !== 0)
+            return false;
+        this.pane.toggle();
+        return true;
+    }
+    invalidate() { }
+}

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

@@ -0,0 +1,96 @@
+import { DisplayToolCall, DisplayMessage } from "../model/display-history.js";
+import { type Theme } from "../model/theme.js";
+import type { TraceInteractionState, TraceRowTarget } from "../model/trace-interaction.js";
+import type { DisplayImageAttachment } from "../model/image-attachment.js";
+export interface TranscriptRenderOptions {
+    columns: number;
+    showReasoning?: boolean;
+    verboseTrace?: boolean;
+    theme?: TranscriptTheme;
+    /** Optional markdown pipeline for assistant content (app injects pi-tui's
+     *  Markdown component; the default is plain wrapped text). */
+    markdownRenderer?: (text: string, width: number) => string[];
+    /** Shared UI-only selection/fold state for interactive tool groups. */
+    traceInteraction?: TraceInteractionState;
+    /** Keep a final transcript spacer; fullscreen disables it once no live tail follows. */
+    trailingSpacer?: boolean;
+    /** Preview a destructive rewrite by dimming this message and everything after it. */
+    dimFromMessageIndex?: number;
+}
+export interface TranscriptProjection {
+    rows: string[];
+    /** Row-aligned pointer targets; undefined rows remain ordinary selectable text. */
+    traceTargets: Array<TraceRowTarget | undefined>;
+    /** Semantic padding survives hover painting, so joins never add/remove rows. */
+    leadingSpacer?: boolean;
+    trailingSpacer?: boolean;
+}
+export declare function joinTranscriptProjections(blocks: readonly TranscriptProjection[]): TranscriptProjection;
+export interface TranscriptTheme {
+    userBg: (text: string) => string;
+    userText: (text: string) => string;
+    accent: (text: string) => string;
+    dim: (text: string) => string;
+    error: (text: string) => string;
+    success: (text: string) => string;
+    /** Dim chrome used by Grok-style pointer hover around tool entries. */
+    hoverBorder?: (text: string) => string;
+    /** Brighter chrome used by Grok for the selected scrollback entry. */
+    selectionBorder?: (text: string) => string;
+    /** Full-width neutral surface painted inside a hovered tool entry. */
+    hoverBackground?: (text: string) => string;
+    /** Persistent surface painted while the tool entry is selected. */
+    selectionBackground?: (text: string) => string;
+    imageChip?: (text: string, active: boolean) => string;
+}
+export declare function createTranscriptTheme(getTheme: () => Theme): TranscriptTheme;
+export declare const defaultTranscriptTheme: TranscriptTheme;
+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.
+ */
+export declare function projectAssistantRows(content: string, options: TranscriptRenderOptions): string[];
+export declare function renderAssistant(content: string, options: TranscriptRenderOptions): string[];
+/**
+ * Join reasoning, tool, and prose surfaces with one semantic separator.
+ * Individual projectors own only their visible rows; this composition layer
+ * owns vertical rhythm, so live and settled timelines cannot drift apart.
+ */
+export declare function joinTranscriptBlocks(blocks: readonly (readonly string[])[]): string[];
+export interface ReasoningProjectionOptions {
+    /** In-flight reasoning uses the only stateful visual difference Grok keeps. */
+    running?: boolean;
+    /** Maximum number of physical reasoning body rows. */
+    maxBodyRows?: number;
+    /** Minimal reasoning keeps the newest rows in both live and settled states. */
+    fromEnd?: boolean;
+}
+/** 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.
+ */
+export declare function projectReasoningRows(content: string, options: TranscriptRenderOptions, projection?: ReasoningProjectionOptions): string[];
+export declare function renderReasoning(content: string, options: TranscriptRenderOptions): string[];
+export declare function renderToolTrace(tool: DisplayToolCall, options: TranscriptRenderOptions): string;
+export interface TraceGroupRenderOptions {
+    /** Live Ink parity: identify the last group that is actually still active. */
+    showActivity?: boolean;
+}
+/**
+ * Render the same semantic trace groups used by the Ink TUI. This is shared
+ * by the live row pool and settled transcript so tool_start/tool_update/
+ * tool_end cannot change from a rich trace into an unrelated one-line row at
+ * the commit boundary.
+ */
+export declare function renderToolTraceGroups(toolCalls: readonly DisplayToolCall[], options: TranscriptRenderOptions, renderOptions?: TraceGroupRenderOptions): string[];
+export declare function projectToolTraceGroups(toolCalls: readonly DisplayToolCall[], options: TranscriptRenderOptions, renderOptions?: TraceGroupRenderOptions): TranscriptProjection;
+export declare function renderMessage(message: DisplayMessage, options: TranscriptRenderOptions): string[];
+export declare function projectMessage(message: DisplayMessage, options: TranscriptRenderOptions): TranscriptProjection;
+export declare function renderTranscript(messages: readonly DisplayMessage[], options: TranscriptRenderOptions): string[];
+export declare function projectTranscript(messages: readonly DisplayMessage[], options: TranscriptRenderOptions): TranscriptProjection;