@bubblebrain-ai/bubble 0.0.48 → 0.0.50

package/dist/tui-ink/command-palette.d.ts

@@ -0,0 +1,32 @@
+import { SkillRegistry } from "../skills/registry.js";
+import type { McpManager } from "../mcp/manager.js";
+export interface PaletteItem {
+    label: string;
+    detail: string;
+    value: string;
+    command: string;
+    action?: "insert-skill";
+}
+export declare function buildCommandPaletteItems(skillRegistry: SkillRegistry, grokSessionBound?: boolean): PaletteItem[];
+export declare function buildMcpReconnectItems(mcpManager?: McpManager): PaletteItem[];
+export declare function CommandPalette({ items, terminalColumns, terminalRows, onSelect, onCancel, }: {
+    items: PaletteItem[];
+    terminalColumns: number;
+    terminalRows: number;
+    onSelect: (item: PaletteItem) => void;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function McpReconnectPicker({ items, terminalColumns, terminalRows, onSelect, onCancel, }: {
+    items: PaletteItem[];
+    terminalColumns: number;
+    terminalRows: number;
+    onSelect: (item: PaletteItem) => void;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const INK_LOCAL_SLASH_COMMANDS: readonly [{
+    readonly name: "goal";
+    readonly description: "Set/manage an autonomous goal (/goal <objective>|clear|pause|resume|edit)";
+}, {
+    readonly name: "loop";
+    readonly description: "Run a prompt on a recurring interval (/loop 5m <prompt>|list|stop [id])";
+}];

package/dist/tui-ink/command-palette.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Slash-command and MCP-server picker overlays, the local /goal & /loop
+ * command table, and the shared PalettePicker list UI they render through.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { registry as slashRegistry } from "../slash-commands/index.js";
+import { isGrokLocalSlashCommand } from "../external-runtime/grok-input-policy.js";
+import { useTheme } from "./theme.js";
+import { isPrintablePickerInput } from "./model-picker.js";
+import { isKeyReleaseEvent } from "./key-events.js";
+import { clampWindowStartForIndex, truncate } from "./app-helpers.js";
+export function buildCommandPaletteItems(skillRegistry, grokSessionBound = false) {
+    const items = new Map();
+    const add = (item) => {
+        const key = `${item.action ?? "command"}:${item.value}`;
+        if (!items.has(key))
+            items.set(key, item);
+    };
+    if (!grokSessionBound) {
+        for (const command of INK_LOCAL_SLASH_COMMANDS) {
+            add({
+                label: `/${command.name}`,
+                detail: command.description,
+                value: command.name,
+                command: `/${command.name}`,
+            });
+        }
+    }
+    for (const command of slashRegistry.list()) {
+        if (grokSessionBound && !isGrokLocalSlashCommand(command.name))
+            continue;
+        const source = command.source === "mcp" ? " :mcp" : "";
+        const sourceLabel = command.sourceLabel ? `[${command.sourceLabel}] ` : "";
+        add({
+            label: `/${command.name}${source}`,
+            detail: `${sourceLabel}${command.description}`,
+            value: command.name,
+            command: `/${command.name}`,
+        });
+    }
+    if (!grokSessionBound) {
+        for (const skill of skillRegistry.summaries()) {
+            add({
+                label: `/${skill.name} :skill`,
+                detail: `[${skill.source}] ${skill.description}`,
+                value: skill.name,
+                command: `/${skill.name}`,
+                action: "insert-skill",
+            });
+        }
+    }
+    return [...items.values()];
+}
+export function buildMcpReconnectItems(mcpManager) {
+    return (mcpManager?.getStates() ?? []).map((state) => {
+        let detail;
+        if (state.status.kind === "connected") {
+            const tools = state.status.tools.length;
+            const prompts = state.status.prompts.length;
+            detail = `connected · ${tools} tool${tools === 1 ? "" : "s"} · ${prompts} prompt${prompts === 1 ? "" : "s"}`;
+        }
+        else if (state.status.kind === "failed") {
+            detail = `failed · ${state.status.error}`;
+        }
+        else {
+            detail = "disabled";
+        }
+        return {
+            label: state.name,
+            detail,
+            value: state.name,
+            command: `/mcp reconnect ${state.name}`,
+        };
+    });
+}
+export function CommandPalette({ items, terminalColumns, terminalRows, onSelect, onCancel, }) {
+    return (_jsx(PalettePicker, { title: "Commands", hint: "Type to filter \u00B7 Up/Down choose \u00B7 Enter run \u00B7 Esc cancel", emptyText: "No commands found.", items: items, terminalColumns: terminalColumns, terminalRows: terminalRows, searchable: true, onSelect: onSelect, onCancel: onCancel }));
+}
+export function McpReconnectPicker({ items, terminalColumns, terminalRows, onSelect, onCancel, }) {
+    return (_jsx(PalettePicker, { title: "MCP servers", hint: "Up/Down choose \u00B7 Enter or r reconnect \u00B7 Esc cancel", emptyText: "No MCP servers configured.", items: items, terminalColumns: terminalColumns, terminalRows: terminalRows, reconnectAlias: true, onSelect: onSelect, onCancel: onCancel }));
+}
+function PalettePicker({ title, hint, emptyText, items, terminalColumns, terminalRows, searchable = false, reconnectAlias = false, onSelect, onCancel, }) {
+    const theme = useTheme();
+    const [query, setQuery] = useState("");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const maxVisible = Math.max(5, Math.min(12, terminalRows - 10));
+    const filtered = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        if (!needle)
+            return items;
+        return items.filter((item) => item.label.toLowerCase().includes(needle) ||
+            item.detail.toLowerCase().includes(needle) ||
+            item.value.toLowerCase().includes(needle));
+    }, [items, query]);
+    useEffect(() => {
+        setSelectedIndex((current) => Math.min(Math.max(0, filtered.length - 1), current));
+    }, [filtered.length]);
+    useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.return || (reconnectAlias && input.toLowerCase() === "r")) {
+            const item = filtered[selectedIndex];
+            if (item)
+                onSelect(item);
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((index) => Math.max(0, index - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((index) => Math.min(Math.max(0, filtered.length - 1), index + 1));
+            return;
+        }
+        if (key.pageUp) {
+            setSelectedIndex((index) => Math.max(0, index - maxVisible));
+            return;
+        }
+        if (key.pageDown) {
+            setSelectedIndex((index) => Math.min(Math.max(0, filtered.length - 1), index + maxVisible));
+            return;
+        }
+        if (!searchable)
+            return;
+        if (key.backspace || key.delete) {
+            setQuery((current) => current.slice(0, -1));
+            return;
+        }
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
+            setQuery((current) => current + input);
+        }
+    });
+    const start = clampWindowStartForIndex(filtered.length, selectedIndex, maxVisible);
+    const visible = filtered.slice(start, start + maxVisible);
+    const labelWidth = Math.max(18, Math.min(36, Math.floor(terminalColumns * 0.32)));
+    const detailWidth = Math.max(20, terminalColumns - labelWidth - 10);
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: title }), searchable && (_jsxs(Text, { color: theme.muted, children: ["Filter: ", _jsx(Text, { color: theme.userMessageText, children: query || " " })] })), _jsx(Text, { color: theme.muted, children: hint }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [filtered.length === 0 && _jsx(Text, { color: theme.muted, children: emptyText }), visible.map((item, offset) => {
+                        const actualIndex = start + offset;
+                        const selected = actualIndex === selectedIndex;
+                        return (_jsxs(Box, { children: [_jsxs(Text, { color: selected ? theme.accent : undefined, children: [selected ? "> " : "  ", truncate(item.label, labelWidth)] }), _jsxs(Text, { color: theme.muted, children: [" ", truncate(item.detail, detailWidth)] })] }, `${item.action ?? "command"}-${item.value}`));
+                    })] })] }));
+}
+export const INK_LOCAL_SLASH_COMMANDS = [
+    {
+        name: "goal",
+        description: "Set/manage an autonomous goal (/goal <objective>|clear|pause|resume|edit)",
+    },
+    {
+        name: "loop",
+        description: "Run a prompt on a recurring interval (/loop 5m <prompt>|list|stop [id])",
+    },
+];

package/dist/tui-ink/display-history.d.ts

@@ -17,6 +17,8 @@ export interface DisplayMessage {
     compactionSummary?: string;
     hiddenCount?: number;
     taskElapsedMs?: number;
+    /** Backend configuration fingerprint reported for this model response. */
+    systemFingerprint?: string;
 }
 export declare function userInputStatusBadgeLabel(status?: UserInputStatus): string | undefined;
 export declare function setUserInputStatus(message: DisplayMessage, inputStatus?: UserInputStatus): DisplayMessage;

package/dist/tui-ink/display-reconstruct.d.ts

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

package/dist/tui-ink/display-reconstruct.js

@@ -0,0 +1,82 @@
+/**
+ * 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 { nextDisplayMessageKey, stripInterruptedAssistantMarker } from "./display-history.js";
+export function reconstructDisplayMessages(agentMessages) {
+    const result = [];
+    for (const m of agentMessages) {
+        if (m.role === "system" || m.role === "tool")
+            continue;
+        if (m.role === "user") {
+            if (m.isMeta)
+                continue; // <system-reminder> injections are not user-visible
+            // Harness-initiated kicks (goal continuations, task wakes) persist as
+            // user-role messages wrapped in internal blocks so the model keeps
+            // them across resume — but they were hidden live and must stay hidden
+            // when the transcript is rebuilt.
+            if (isInternalBlockOnlyContent(m.content))
+                continue;
+            result.push({
+                key: nextDisplayMessageKey("user"),
+                role: "user",
+                content: typeof m.content === "string" ? m.content : "(multimedia)",
+            });
+        }
+        else if (m.role === "assistant") {
+            const toolCalls = [];
+            if (m.toolCalls) {
+                for (const tc of m.toolCalls) {
+                    let args = {};
+                    try {
+                        args = JSON.parse(tc.arguments || "{}");
+                    }
+                    catch {
+                        args = {};
+                    }
+                    const toolResult = agentMessages.find((tm) => tm.role === "tool" && tm.toolCallId === tc.id);
+                    if (isHiddenToolMetadata(toolResult ? toolResult.metadata : undefined))
+                        continue;
+                    toolCalls.push({
+                        id: tc.id,
+                        name: tc.name,
+                        args,
+                        result: toolResult ? toolResult.content : undefined,
+                        isError: toolResult ? toolResult.content?.startsWith?.("Error:") : false,
+                        metadata: toolResult ? toolResult.metadata : undefined,
+                    });
+                }
+            }
+            // An aborted assistant message carries the model-facing interruption
+            // note in its content. Render only what the assistant actually said
+            // (partial streamed text, if any) plus a dedicated interrupt row —
+            // never the note itself, which reads like a leaked system prompt.
+            const interrupted = m.error?.aborted === true;
+            const content = interrupted
+                ? stripInterruptedAssistantMarker(m.content, INTERRUPTED_ASSISTANT_CONTENT)
+                : m.content;
+            if (content || m.reasoning || toolCalls.length > 0 || m.systemFingerprint) {
+                result.push({
+                    key: nextDisplayMessageKey("asst"),
+                    role: "assistant",
+                    content,
+                    reasoning: m.reasoning || undefined,
+                    toolCalls: toolCalls.length > 0 ? toolCalls : undefined,
+                    systemFingerprint: m.systemFingerprint,
+                });
+            }
+            if (interrupted) {
+                result.push({
+                    key: nextDisplayMessageKey("asst"),
+                    role: "assistant",
+                    content: "Interrupted by user",
+                    syntheticKind: "ui_interrupt",
+                });
+            }
+        }
+    }
+    return result;
+}

package/dist/tui-ink/footer.d.ts

@@ -3,11 +3,22 @@ export interface FooterData {
     mode?: PermissionMode;
     goalLine?: string;
     runtimeLabel?: string;
+    /** Friendly working directory (e.g. `~/project`). */
+    cwd?: string;
+    /** Current git branch, when the cwd is a git repo. */
+    branch?: string;
+    /** Display name of the active model. */
+    model?: string;
+    /** Current session title, when one has been assigned. */
+    sessionTitle?: string;
+    /** Compact context usage, e.g. `42K/500K`. */
+    contextUsage?: string;
 }
 /**
- * Bottom status line. Path / provider / model live in the welcome banner and
- * the model-switch transcript notices; the footer only surfaces the
- * permission-mode badge, so it renders nothing (zero rows) in the default mode.
+ * Bottom status line. Always surfaces a `cwd | branch | model | title | ctx`
+ * row (each segment only when its data is present), and appends the
+ * permission-mode badge for non-default modes. Renders nothing (zero rows)
+ * when no data is available.
  */
 export declare function FooterBar({ data }: {
     data: FooterData;

package/dist/tui-ink/footer.js

@@ -1,19 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { Box, Text } from "ink";
 import { useTheme } from "./theme.js";
 import { PERMISSION_MODE_INFO } from "../permission/mode.js";
 /**
- * Bottom status line. Path / provider / model live in the welcome banner and
- * the model-switch transcript notices; the footer only surfaces the
- * permission-mode badge, so it renders nothing (zero rows) in the default mode.
+ * Bottom status line. Always surfaces a `cwd | branch | model | title | ctx`
+ * row (each segment only when its data is present), and appends the
+ * permission-mode badge for non-default modes. Renders nothing (zero rows)
+ * when no data is available.
  */
 export function FooterBar({ data }) {
+    const theme = useTheme();
     const showMode = !!data.mode && data.mode !== "default";
     const goalLine = data.goalLine?.trim();
     const runtimeLabel = data.runtimeLabel?.trim();
-    if (!showMode && !goalLine && !runtimeLabel)
+    const segments = [];
+    if (data.cwd?.trim())
+        segments.push({ key: "cwd", text: data.cwd.trim(), color: theme.muted });
+    if (data.branch?.trim())
+        segments.push({ key: "branch", text: data.branch.trim(), color: theme.muted });
+    if (data.model?.trim())
+        segments.push({ key: "model", text: data.model.trim(), color: theme.accent });
+    if (data.sessionTitle?.trim())
+        segments.push({ key: "title", text: data.sessionTitle.trim(), color: theme.muted });
+    if (data.contextUsage?.trim())
+        segments.push({ key: "ctx", text: data.contextUsage.trim(), color: theme.muted });
+    if (!showMode && !goalLine && !runtimeLabel && segments.length === 0)
         return null;
-    return (_jsxs(Box, { paddingX: 1, flexShrink: 0, flexDirection: "column", children: [goalLine && _jsx(GoalBadge, { line: goalLine }), runtimeLabel && _jsx(RuntimeBadge, { label: runtimeLabel }), showMode && _jsx(ModeBadge, { mode: data.mode })] }));
+    return (_jsxs(Box, { paddingX: 1, flexShrink: 0, flexDirection: "column", children: [goalLine && _jsx(GoalBadge, { line: goalLine }), runtimeLabel && _jsx(RuntimeBadge, { label: runtimeLabel }), (segments.length > 0 || showMode) && (_jsxs(Box, { children: [showMode && (_jsxs(React.Fragment, { children: [_jsx(ModeBadge, { mode: data.mode }), segments.length > 0 && _jsx(Text, { color: theme.muted, children: " | " })] })), segments.map((segment, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { color: theme.muted, children: " | " }), _jsx(Text, { color: segment.color, children: segment.text })] }, segment.key)))] }))] }));
 }
 function RuntimeBadge({ label }) {
     const theme = useTheme();

package/dist/tui-ink/rewind-picker.d.ts

@@ -0,0 +1,8 @@
+import type { SessionManager } from "../session.js";
+export declare function RewindPicker({ sessionManager, terminalColumns, terminalRows, onSelect, onCancel, }: {
+    sessionManager: SessionManager;
+    terminalColumns: number;
+    terminalRows: number;
+    onSelect: (command: string) => void;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/tui-ink/rewind-picker.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * /rewind checkpoint picker: lists user turns with touched-file counts and
+ * cycles the restore scope (chat + files / chat only / files only).
+ */
+import { useEffect, useMemo, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { useTheme } from "./theme.js";
+import { isKeyReleaseEvent } from "./key-events.js";
+import { clampWindowStartForIndex, truncate } from "./app-helpers.js";
+const REWIND_SCOPE_ORDER = ["all", "chat", "code"];
+const REWIND_SCOPE_LABEL = {
+    all: "chat + files",
+    chat: "chat only",
+    code: "files only",
+};
+function rewindCommand(turnIndex, scope) {
+    const base = `/rewind ${turnIndex + 1}`;
+    if (scope === "chat")
+        return `${base} --chat`;
+    if (scope === "code")
+        return `${base} --code`;
+    return base;
+}
+function cycleRewindScope(scope, direction) {
+    const index = REWIND_SCOPE_ORDER.indexOf(scope);
+    return REWIND_SCOPE_ORDER[(index + direction + REWIND_SCOPE_ORDER.length) % REWIND_SCOPE_ORDER.length];
+}
+export function RewindPicker({ sessionManager, terminalColumns, terminalRows, onSelect, onCancel, }) {
+    const theme = useTheme();
+    const turns = useMemo(() => sessionManager.listUserTurns(), [sessionManager]);
+    const checkpoints = useMemo(() => sessionManager.getCheckpoints(), [sessionManager]);
+    const fileCounts = useMemo(() => {
+        const entries = checkpoints.listEntries();
+        const byTurn = new Map();
+        for (const entry of entries) {
+            const files = byTurn.get(entry.turn);
+            if (files)
+                files.add(entry.path);
+            else
+                byTurn.set(entry.turn, new Set([entry.path]));
+        }
+        return new Map(turns.map((turn) => [turn.id, byTurn.get(turn.id)?.size ?? 0]));
+    }, [checkpoints, turns]);
+    const [selectedIndex, setSelectedIndex] = useState(() => Math.max(0, turns.length - 1));
+    const [scope, setScope] = useState("all");
+    const maxVisible = Math.max(4, Math.min(10, terminalRows - 10));
+    useEffect(() => {
+        setSelectedIndex((current) => Math.min(Math.max(0, turns.length - 1), current));
+    }, [turns.length]);
+    useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.return) {
+            if (turns[selectedIndex])
+                onSelect(rewindCommand(selectedIndex, scope));
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((index) => Math.max(0, index - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((index) => Math.min(Math.max(0, turns.length - 1), index + 1));
+            return;
+        }
+        if (key.pageUp) {
+            setSelectedIndex((index) => Math.max(0, index - maxVisible));
+            return;
+        }
+        if (key.pageDown) {
+            setSelectedIndex((index) => Math.min(Math.max(0, turns.length - 1), index + maxVisible));
+            return;
+        }
+        if (key.tab || key.rightArrow || input === "l") {
+            setScope((current) => cycleRewindScope(current, 1));
+            return;
+        }
+        if (key.leftArrow || input === "h") {
+            setScope((current) => cycleRewindScope(current, -1));
+        }
+    });
+    const start = clampWindowStartForIndex(turns.length, selectedIndex, maxVisible);
+    const visibleTurns = turns.slice(start, start + maxVisible);
+    const previewWidth = Math.max(18, Math.min(76, terminalColumns - 34));
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Rewind" }), _jsxs(Text, { color: theme.muted, children: ["Restore: ", _jsx(Text, { color: theme.accent, children: REWIND_SCOPE_LABEL[scope] }), "  ·  ", turns.length, " point", turns.length === 1 ? "" : "s"] }), _jsx(Text, { color: theme.muted, children: "Up/Down choose \u00B7 Left/Right scope \u00B7 Enter rewind \u00B7 Esc cancel" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [turns.length === 0 && _jsx(Text, { color: theme.muted, children: "Nothing to rewind: no user messages in this session." }), visibleTurns.map((turn, offset) => {
+                        const actualIndex = start + offset;
+                        const isSelected = actualIndex === selectedIndex;
+                        const touched = fileCounts.get(turn.id) ?? 0;
+                        return (_jsx(RewindRow, { turn: turn, turnNumber: actualIndex + 1, selected: isSelected, fileCount: touched, previewWidth: previewWidth }, turn.id));
+                    })] })] }));
+}
+function RewindRow({ turn, turnNumber, selected, fileCount, previewWidth, }) {
+    const theme = useTheme();
+    const time = new Date(turn.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    const fileNote = fileCount > 0 ? ` · ${fileCount} file${fileCount === 1 ? "" : "s"}` : "";
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: selected ? theme.accent : undefined, children: [selected ? "> " : "  ", String(turnNumber).padStart(2, " "), " ", time, " ", truncate(turn.preview, previewWidth)] }), _jsx(Text, { color: theme.muted, children: fileNote })] }));
+}

package/dist/tui-ink/session-picker.js

@@ -19,7 +19,7 @@ export function SessionPicker({ currentCwd, currentSessions, allSessions, onSele
         ? 0
         : Math.min(selectedSessionIdx, sessionRowIndices.length - 1);
     const selectedRowIndex = sessionRowIndices[clampedIdx] ?? -1;
-    useInput((input, key) => {
+    useInput((_input, key) => {
         if (isKeyReleaseEvent(key))
             return;
         if (key.escape) {

package/dist/tui-ink/stats-panel.d.ts

@@ -0,0 +1,11 @@
+import { type StatsRange, type UsageStatsBundle } from "../stats/usage.js";
+export declare function StatsPanel({ panel, terminalColumns, terminalRows, onRangeChange, onCancel, }: {
+    panel: {
+        range: StatsRange;
+        bundle: UsageStatsBundle;
+    };
+    terminalColumns: number;
+    terminalRows: number;
+    onRangeChange: (range: StatsRange) => void;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/tui-ink/stats-panel.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * /stats overlay: range-switching, scrollable usage panel.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { formatStatsPanelBody, rangeLabel } from "../stats/usage.js";
+import { useTheme } from "./theme.js";
+import { isKeyReleaseEvent } from "./key-events.js";
+export function StatsPanel({ panel, terminalColumns, terminalRows, onRangeChange, onCancel, }) {
+    const theme = useTheme();
+    const [scroll, setScroll] = useState(0);
+    const bodyWidth = Math.max(48, Math.min(92, terminalColumns - 6));
+    const lines = useMemo(() => formatStatsPanelBody(panel.bundle.ranges[panel.range], bodyWidth).split("\n"), [bodyWidth, panel.bundle, panel.range]);
+    const maxVisible = Math.max(5, Math.min(16, terminalRows - 10));
+    const maxScroll = Math.max(0, lines.length - maxVisible);
+    useEffect(() => {
+        setScroll(0);
+    }, [panel.range]);
+    useEffect(() => {
+        setScroll((current) => Math.min(current, maxScroll));
+    }, [maxScroll]);
+    useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.tab) {
+            onRangeChange(panel.range === "30d" ? "7d" : "30d");
+            return;
+        }
+        if (key.leftArrow || input === "h") {
+            onRangeChange("7d");
+            return;
+        }
+        if (key.rightArrow || input === "l") {
+            onRangeChange("30d");
+            return;
+        }
+        if (key.upArrow) {
+            setScroll((current) => Math.max(0, current - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setScroll((current) => Math.min(maxScroll, current + 1));
+            return;
+        }
+        if (key.pageUp) {
+            setScroll((current) => Math.max(0, current - maxVisible));
+            return;
+        }
+        if (key.pageDown) {
+            setScroll((current) => Math.min(maxScroll, current + maxVisible));
+        }
+    });
+    const visible = lines.slice(scroll, scroll + maxVisible);
+    const generatedAt = panel.bundle.generatedAt.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Stats" }), _jsxs(Text, { color: theme.muted, children: [rangeLabel(panel.range), " \u00B7 generated ", generatedAt] }), _jsx(Text, { color: theme.muted, children: "Left/Right range \u00B7 Up/Down scroll \u00B7 Tab toggle \u00B7 Esc close" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: visible.map((line, index) => {
+                    const key = `${scroll + index}-${line}`;
+                    const heading = line === "Activity" || line === "Model usage" || line === "Summary";
+                    return (_jsx(Text, { color: heading ? theme.accent : undefined, bold: heading, children: line || " " }, key));
+                }) }), maxScroll > 0 && (_jsxs(Text, { color: theme.muted, children: [scroll + 1, "-", Math.min(lines.length, scroll + maxVisible), " of ", lines.length] }))] }));
+}

package/dist/tui-ink/waiting-indicator.d.ts

@@ -0,0 +1,12 @@
+import type { DisplayToolCall } from "./display-history.js";
+interface WaitingIndicatorProps {
+    tools: DisplayToolCall[];
+    hasStreamingText: boolean;
+    hasStreamingReasoning: boolean;
+    streamedChars: number;
+    nowTick: number;
+    pendingSteerCount?: number;
+    queuedCount?: number;
+}
+export declare function WaitingIndicator({ tools, hasStreamingText, hasStreamingReasoning, streamedChars, nowTick, pendingSteerCount, queuedCount, }: WaitingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};