@bubblebrain-ai/bubble 0.0.11 → 0.0.13

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

@@ -1,10 +1,28 @@
 import { ProviderRegistry } from "../provider-registry.js";
+export { padVisual, truncateVisual } from "../text-display.js";
 export interface ModelPickerOption {
     id: string;
     label: string;
     group: string;
     providerBadge: string;
 }
+export type PickerKeyAction = "up" | "down" | "enter" | "escape" | "backspace" | "delete";
+export declare function resolvePickerKeyAction(input: string, key: {
+    upArrow?: boolean;
+    downArrow?: boolean;
+    return?: boolean;
+    escape?: boolean;
+    backspace?: boolean;
+    delete?: boolean;
+}): PickerKeyAction | undefined;
+export declare function isPrintablePickerInput(input: string): boolean;
+export declare function formatSkillPickerRow(skill: {
+    name: string;
+    description?: string;
+}, options: {
+    selected: boolean;
+    width: number;
+}): string;
 export interface ModelPickerProps {
     registry: ProviderRegistry;
     current: string;

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

@@ -4,6 +4,55 @@ import { Box, Text, useInput, usePaste, useStdout } from "ink";
 import { useTheme } from "./theme.js";
 import { encodeModel, decodeModel, displayModel, isUserVisibleProvider } from "../provider-registry.js";
 import { listBuiltinModels } from "../model-catalog.js";
+import { padVisual, truncateVisual } from "../text-display.js";
+export { padVisual, truncateVisual } from "../text-display.js";
+export function resolvePickerKeyAction(input, key) {
+    if (key.escape)
+        return "escape";
+    if (key.return)
+        return "enter";
+    if (key.upArrow)
+        return "up";
+    if (key.downArrow)
+        return "down";
+    if (key.backspace)
+        return "backspace";
+    if (key.delete)
+        return "delete";
+    const sequence = normalizeEscapeSequence(input);
+    if (/^(?:O|\[[\d;:]*)A$/.test(sequence))
+        return "up";
+    if (/^(?:O|\[[\d;:]*)B$/.test(sequence))
+        return "down";
+    return undefined;
+}
+export function isPrintablePickerInput(input) {
+    if (!input)
+        return false;
+    if (input.startsWith("\x1b"))
+        return false;
+    if (isRawEscapeTail(input))
+        return false;
+    return !/[\x00-\x1f\x7f]/.test(input);
+}
+export function formatSkillPickerRow(skill, options) {
+    const width = Math.max(12, options.width);
+    const marker = options.selected ? "> " : "  ";
+    const nameBudget = Math.max(8, Math.min(28, Math.floor(width * 0.35)));
+    const name = truncateVisual(skill.name, nameBudget);
+    const nameCell = padVisual(name, nameBudget);
+    const description = (skill.description ?? "").replace(/\s+/g, " ").trim();
+    const row = description
+        ? `${marker}${nameCell}  ${description}`
+        : `${marker}${nameCell}`;
+    return padVisual(truncateVisual(row, width), width);
+}
+function normalizeEscapeSequence(input) {
+    return input.startsWith("\x1b") ? input.slice(1) : input;
+}
+function isRawEscapeTail(input) {
+    return /^(?:O[ABCDHF]|\[[\d;:]*[A-Za-z~])$/.test(input);
+}
 export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
     const theme = useTheme();
     const { stdout } = useStdout();
@@ -76,25 +125,26 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
         return rawOptions.filter((opt) => opt.label.toLowerCase().includes(q) || opt.providerBadge.toLowerCase().includes(q));
     }, [rawOptions, query]);
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             const opt = options[selectedIndex];
             if (opt)
                 onSelect(opt.id);
             return;
         }
-        if (key.upArrow) {
+        if (action === "up") {
             setSelectedIndex((i) => Math.max(0, i - 1));
             return;
         }
-        if (key.downArrow) {
+        if (action === "down") {
             setSelectedIndex((i) => Math.min(options.length - 1, i + 1));
             return;
         }
-        if (key.backspace || key.delete) {
+        if (action === "backspace" || action === "delete") {
             setQuery((q) => {
                 const next = q.slice(0, -1);
                 setSelectedIndex(0);
@@ -102,7 +152,7 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
             });
             return;
         }
-        if (input && !key.ctrl && !key.meta) {
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
             setQuery((q) => {
                 const next = q + input;
                 setSelectedIndex(0);
@@ -197,25 +247,26 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title }
         return idx >= 0 ? idx : 0;
     });
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             const p = providers[selectedIndex];
             if (p)
                 onSelect(p.id);
             return;
         }
-        if (key.upArrow) {
+        if (action === "up") {
             setSelectedIndex((i) => Math.max(0, i - 1));
             return;
         }
-        if (key.downArrow) {
+        if (action === "down") {
             setSelectedIndex((i) => Math.min(providers.length - 1, i + 1));
             return;
         }
-        if (input && input.length === 1 && /[a-z]/i.test(input)) {
+        if (isPrintablePickerInput(input) && input.length === 1 && /[a-z]/i.test(input)) {
             const char = input.toLowerCase();
             for (let i = selectedIndex + 1; i < providers.length; i++) {
                 if (providers[i].name.toLowerCase().startsWith(char)) {
@@ -243,20 +294,21 @@ export function KeyPicker({ providerName, onSubmit, onCancel }) {
     const theme = useTheme();
     const [value, setValue] = useState("");
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             if (value.trim())
                 onSubmit(value.trim());
             return;
         }
-        if (key.backspace || key.delete) {
+        if (action === "backspace" || action === "delete") {
             setValue((v) => v.slice(0, -1));
             return;
         }
-        if (input && !key.ctrl && !key.meta) {
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
             setValue((v) => v + input);
         }
     });
@@ -274,7 +326,9 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
     const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
+    const terminalColumns = stdout?.columns || 80;
     const maxVisible = Math.max(5, termHeight - 8);
+    const rowWidth = Math.max(36, Math.min(96, terminalColumns - 6));
     const [query, setQuery] = useState("");
     const [selectedIndex, setSelectedIndex] = useState(0);
     const options = useMemo(() => {
@@ -284,25 +338,26 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
         return skills.filter((skill) => skill.name.toLowerCase().includes(q) || skill.description.toLowerCase().includes(q));
     }, [query, skills]);
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             const skill = options[selectedIndex];
             if (skill)
                 onSelect(skill.name);
             return;
         }
-        if (key.upArrow) {
+        if (action === "up") {
             setSelectedIndex((i) => Math.max(0, i - 1));
             return;
         }
-        if (key.downArrow) {
+        if (action === "down") {
             setSelectedIndex((i) => Math.min(Math.max(0, options.length - 1), i + 1));
             return;
         }
-        if (key.backspace || key.delete) {
+        if (action === "backspace" || action === "delete") {
             setQuery((q) => {
                 const next = q.slice(0, -1);
                 setSelectedIndex(0);
@@ -310,7 +365,7 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
             });
             return;
         }
-        if (input && !key.ctrl && !key.meta) {
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
             setQuery((q) => {
                 const next = q + input;
                 setSelectedIndex(0);
@@ -318,11 +373,13 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
             });
         }
     });
-    const start = Math.max(0, Math.min(selectedIndex, options.length - maxVisible));
+    const maxStart = Math.max(0, options.length - maxVisible);
+    const start = Math.max(0, Math.min(maxStart, selectedIndex - Math.floor(maxVisible / 2)));
     const visible = options.slice(start, start + maxVisible);
     return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Select Skill" }), _jsx(SearchField, { query: query, placeholder: "Type to search skills..." }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter load \u00B7 Esc cancel \u00B7 Backspace clear" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.length === 0 && (_jsxs(Text, { color: theme.muted, children: ["No skills match \"", query, "\""] })), visible.map((skill, i) => {
                         const actualIndex = start + i;
                         const isSelected = actualIndex === selectedIndex;
-                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", skill.name] }), skill.description && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: theme.muted, dimColor: true, children: skill.description }) }))] }, skill.name));
+                        const row = formatSkillPickerRow(skill, { selected: isSelected, width: rowWidth });
+                        return (_jsx(Box, { children: _jsx(Text, { inverse: isSelected, color: isSelected ? theme.accent : undefined, bold: isSelected, children: row }) }, skill.name));
                     })] })] }));
 }

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

@@ -3,10 +3,12 @@ import { useMemo, useState } from "react";
 import { Box, Text, useInput, useStdout } from "ink";
 import { useTheme } from "./theme.js";
 import { formatRelativeTime } from "./recent-activity.js";
+import { padVisual, truncateVisual } from "../text-display.js";
 export function SessionPicker({ currentCwd, currentSessions, allSessions, onSelect, onCancel }) {
     const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
+    const termWidth = stdout?.columns || 80;
     const maxVisible = Math.max(6, termHeight - 10);
     const [mode, setMode] = useState("current");
     const [selectedSessionIdx, setSelectedSessionIdx] = useState(0);
@@ -55,8 +57,9 @@ export function SessionPicker({ currentCwd, currentSessions, allSessions, onSele
                         }
                         const session = row.session;
                         const isSelected = actualIndex === selectedRowIndex;
-                        const time = formatRelativeTime(session.mtime).padEnd(9);
-                        return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", time, "  ", truncate(session.firstUserMessage, 60)] }), _jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: theme.muted, dimColor: true, children: ["\u00B7 ", session.messageCount, " msg", session.messageCount === 1 ? "" : "s"] }) })] }, session.file));
+                        const time = padVisual(formatRelativeTime(session.mtime), 9);
+                        const titleWidth = Math.max(20, Math.min(80, termWidth - 30));
+                        return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", time, "  ", padVisual(truncateVisual(session.title, titleWidth), titleWidth)] }), _jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: theme.muted, dimColor: true, children: ["\u00B7 ", session.messageCount, " msg", session.messageCount === 1 ? "" : "s"] }) })] }, session.file));
                     })] })] }));
 }
 function buildRows(mode, currentCwd, currentSessions, allSessions) {
@@ -105,8 +108,3 @@ function clampWindowStart(rows, selectedRowIndex, maxVisible) {
         start = rows.length - maxVisible;
     return Math.max(0, start);
 }
-function truncate(text, max) {
-    if (text.length <= max)
-        return text.padEnd(max);
-    return text.slice(0, max - 1) + "…";
-}

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

@@ -49,15 +49,9 @@ export interface Theme {
 }
 export declare const darkTheme: Theme;
 /**
- * Light palette. Two ground rules drove the color choices:
- *   1. Named ANSI colors that render OK on both backgrounds (red/green/blue)
- *      are kept by name so the user's terminal palette overrides remain
- *      effective.
- *   2. Specific hex values are used wherever the dark palette assumed a dark
- *      background (notably accent/code/trace colors and message bubbles).
- *      Each hex was picked to clear WCAG AA contrast (4.5:1) against a near-
- *      white background (#fafafa) or, when applicable, against the explicit
- *      surface color in the same palette (e.g. diffAddFg vs diffAdd).
+ * Light palette aligned with the restored OpenTUI runtime: paper-neutral
+ * surfaces, blue focus/user rails, warm command accent, and semantic tool
+ * colors tuned for readable contrast on a light terminal background.
  */
 export declare const lightTheme: Theme;
 export declare const ThemeProvider: import("react").Provider<Theme>;

package/dist/tui-ink/theme.js

@@ -47,53 +47,47 @@ export const darkTheme = {
     diffRemoveFg: "#F48771",
 };
 /**
- * Light palette. Two ground rules drove the color choices:
- *   1. Named ANSI colors that render OK on both backgrounds (red/green/blue)
- *      are kept by name so the user's terminal palette overrides remain
- *      effective.
- *   2. Specific hex values are used wherever the dark palette assumed a dark
- *      background (notably accent/code/trace colors and message bubbles).
- *      Each hex was picked to clear WCAG AA contrast (4.5:1) against a near-
- *      white background (#fafafa) or, when applicable, against the explicit
- *      surface color in the same palette (e.g. diffAddFg vs diffAdd).
+ * Light palette aligned with the restored OpenTUI runtime: paper-neutral
+ * surfaces, blue focus/user rails, warm command accent, and semantic tool
+ * colors tuned for readable contrast on a light terminal background.
  */
 export const lightTheme = {
-    user: "green",
-    agent: "blue",
-    error: "red",
-    warning: "#9A6500", // ANSI yellow is invisible on white — go to dark amber.
-    success: "green",
-    accent: "#0E5A85", // dark teal — replaces "cyan" which washes out on white.
-    border: "gray",
-    borderActive: "#0E5A85",
-    inputBorder: "#6B5FB8",
-    inputBorderDisabled: "#c5c3d0",
-    inputBg: "#f5f5fa",
-    inputBgDisabled: "#ebebf2",
-    inputText: "#1c1c24",
-    inputPlaceholder: "#7a7886",
-    muted: "gray",
-    dim: "gray",
-    thinking: "magenta",
-    thinkingDim: "gray",
-    toolName: "#0E5A85",
-    toolResult: "gray",
-    toolError: "red",
-    toolPending: "#9A6500",
-    code: "#9A6500",
-    traceAction: "#B85A20",
-    traceCount: "#5a5a5a",
-    traceDetail: "gray",
-    traceCommand: "#1A5FA0",
-    tracePending: "#9A6500",
-    userMessageBorder: "#6B5FB8",
-    userMessageBg: "#e8e6f4",
-    userMessageText: "#1c1c24",
-    userRail: "#6B5FB8",
-    diffAdd: "#d4f4d4",
-    diffRemove: "#f4d4d4",
-    diffAddFg: "#1c1c24",
-    diffRemoveFg: "#1c1c24",
+    user: "#356FD2",
+    agent: "#171717",
+    error: "#B62633",
+    warning: "#8B4A00",
+    success: "#2F7D4A",
+    accent: "#8B4A00",
+    border: "#B9BDB8",
+    borderActive: "#356FD2",
+    inputBorder: "#356FD2",
+    inputBorderDisabled: "#D7DAD4",
+    inputBg: "#F1F3F0",
+    inputBgDisabled: "#E6E8E3",
+    inputText: "#171717",
+    inputPlaceholder: "#6F7377",
+    muted: "#6F7377",
+    dim: "#8B9094",
+    thinking: "#5F666D",
+    thinkingDim: "#8B9094",
+    toolName: "#495057",
+    toolResult: "#171717",
+    toolError: "#B62633",
+    toolPending: "#8B4A00",
+    code: "#2F7D4A",
+    traceAction: "#8B4A00",
+    traceCount: "#6F7377",
+    traceDetail: "#8B9094",
+    traceCommand: "#257E8A",
+    tracePending: "#8B4A00",
+    userMessageBorder: "#356FD2",
+    userMessageBg: "#F1F3F0",
+    userMessageText: "#234B93",
+    userRail: "#356FD2",
+    diffAdd: "#D7E8D8",
+    diffRemove: "#F7DADC",
+    diffAddFg: "#173D2D",
+    diffRemoveFg: "#5D1922",
 };
 const ThemeContext = createContext(darkTheme);
 export const ThemeProvider = ThemeContext.Provider;

package/dist/tui-ink/welcome.js

@@ -3,80 +3,10 @@ import React from "react";
 import { Box, Text } from "ink";
 import { createRequire } from "node:module";
 import { useTheme } from "./theme.js";
+import { BUBBLE_COMPACT_WORDMARK, BUBBLE_WORDMARK, bubbleWordmarkLineText, bubbleWordmarkMaxWidth, } from "../tui/wordmark.js";
 const require = createRequire(import.meta.url);
 const PACKAGE_VERSION = readPackageVersion();
-const BUBBLE_LOGO_LETTERS = [
-    [
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-    ],
-    [
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        " █████ ",
-    ],
-    [
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-    ],
-    [
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-    ],
-    [
-        "██     ",
-        "██     ",
-        "██     ",
-        "██     ",
-        "██     ",
-        "██     ",
-        "███████",
-    ],
-    [
-        "███████",
-        "██     ",
-        "██     ",
-        "██████ ",
-        "██     ",
-        "██     ",
-        "███████",
-    ],
-];
-/**
- * Derive a 6-step logo gradient from the active theme tokens so the banner
- * stays readable on both dark and light backgrounds.
- */
-function logoColors(theme) {
-    return [
-        theme.userMessageText,
-        theme.userMessageText,
-        theme.inputBorder,
-        theme.inputBorder,
-        theme.traceCommand,
-        theme.traceCommand,
-    ];
-}
-const COMPACT_LOGO = ["B", "U", "B", "B", "L", "E"];
-const WIDE_LOGO_MIN_WIDTH = 52;
+const WIDE_LOGO_MIN_WIDTH = bubbleWordmarkMaxWidth(BUBBLE_WORDMARK) + 4;
 export function shouldShowWelcomeBanner({ startedWithVisibleHistory, }) {
     // Keep banner visibility tied to the initial history, not transient overlays,
     // so opening and closing a picker does not move it in the transcript.
@@ -96,18 +26,32 @@ export function WelcomeBanner({ terminalColumns, modelLabel, cwd, tips, skillsCo
         : "Type / for commands and @ to reference files";
     const modelLine = modelLabel ? `${modelLabel}${cwd ? ` · ${cwd}` : ""}` : cwd;
     return (_jsxs(Box, { width: effectiveWidth, flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", children: useWideLogo
-                    ? BUBBLE_LOGO_LETTERS[0].map((_, rowIndex) => (_jsx(LogoRow, { rowIndex: rowIndex }, `logo-row-${rowIndex}`)))
+                    ? BUBBLE_WORDMARK.map((line, rowIndex) => (_jsx(LogoRow, { line: line }, `logo-row-${rowIndex}`)))
                     : _jsx(CompactLogo, {}) }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { bold: true, color: theme.muted, children: PACKAGE_VERSION }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, color: theme.userMessageText, children: "TIP: " }), _jsx(Text, { bold: true, color: theme.userMessageText, children: tip })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "shift+tab to cycle modes \u00B7 ctrl+r for reasoning \u00B7 ctrl+o for trace" }) }), modelLine && (_jsx(Box, { children: _jsx(Text, { color: theme.muted, children: truncateToWidth(modelLine, effectiveWidth - 4) }) })), _jsxs(Box, { marginTop: 1, children: [_jsx(StatusItem, { label: "Skills", count: skillsCount, ok: skillsCount > 0 }), _jsx(Text, { color: theme.muted, children: "  " }), _jsx(StatusItem, { label: "MCPs", count: mcpConnectedCount, total: mcpTotalCount, ok: mcpTotalCount === 0 || mcpConnectedCount === mcpTotalCount }), _jsx(Text, { color: theme.muted, children: "  " }), _jsx(StatusItem, { label: "AGENTS.md", ok: hasAgentsFile })] })] }));
 }
-function LogoRow({ rowIndex }) {
+function LogoRow({ line }) {
     const theme = useTheme();
-    const colors = logoColors(theme);
-    return (_jsx(Box, { children: BUBBLE_LOGO_LETTERS.map((letter, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { bold: true, color: colors[index], children: letter[rowIndex] }), index < BUBBLE_LOGO_LETTERS.length - 1 && _jsx(Text, { children: " " })] }, `${index}-${rowIndex}`))) }));
+    if (!line.segments) {
+        return _jsx(Text, { bold: true, color: logoColor(theme, line.tone ?? "caption"), children: line.text ?? "" });
+    }
+    return (_jsx(Box, { children: line.segments.map((segment, index) => (_jsx(React.Fragment, { children: _jsx(Text, { bold: true, color: logoColor(theme, segment.tone), children: segment.text }) }, `${index}-${segment.text}`))) }));
 }
 function CompactLogo() {
     const theme = useTheme();
-    const colors = logoColors(theme);
-    return (_jsx(Box, { children: COMPACT_LOGO.map((letter, index) => (_jsx(Text, { bold: true, color: colors[index], children: letter }, `${letter}-${index}`))) }));
+    const line = BUBBLE_COMPACT_WORDMARK[0];
+    if (!line?.segments) {
+        return _jsx(Text, { bold: true, color: theme.warning, children: bubbleWordmarkLineText(line ?? { text: "" }) });
+    }
+    return (_jsx(Box, { children: line.segments.map((segment, index) => (_jsx(Text, { bold: true, color: logoColor(theme, segment.tone), children: segment.text }, `${segment.text}-${index}`))) }));
+}
+function logoColor(theme, tone) {
+    switch (tone) {
+        case "brand": return theme.warning;
+        case "ink": return theme.userMessageText;
+        case "stone": return theme.muted;
+        case "soft": return theme.dim;
+        case "caption": return theme.muted;
+    }
 }
 function StatusItem({ label, count, total, ok, }) {
     const theme = useTheme();

package/dist/tui-opentui/app.d.ts

@@ -0,0 +1,54 @@
+/** @jsxImportSource @opentui/react */
+import React from "react";
+import { type Agent } from "../agent.js";
+import type { CliArgs } from "../cli.js";
+import type { SessionManager } from "../session.js";
+import type { PlanDecision, Provider } from "../types.js";
+import { type ResolvedTheme, type ThemeMode } from "./theme.js";
+import { ProviderRegistry } from "../provider-registry.js";
+import { SkillRegistry } from "../skills/registry.js";
+import type { ApprovalDecision, ApprovalRequest } from "../approval/types.js";
+import type { BashAllowlist } from "../approval/session-cache.js";
+import type { SettingsManager } from "../permissions/settings.js";
+import type { McpManager } from "../mcp/manager.js";
+import type { LspService } from "../lsp/index.js";
+import type { QuestionController } from "../question/index.js";
+import type { MemoryScope } from "../memory/index.js";
+export interface PlanHandlerRef {
+    current?: (plan: string) => Promise<PlanDecision>;
+}
+export interface ApprovalHandlerRef {
+    current?: (req: ApprovalRequest) => Promise<ApprovalDecision>;
+}
+interface AppProps {
+    agent: Agent;
+    args: CliArgs;
+    sessionManager?: SessionManager;
+    createProvider?: (providerId: string, apiKey: string, baseURL: string) => Provider;
+    registry?: ProviderRegistry;
+    skillRegistry?: SkillRegistry;
+    planHandlerRef?: PlanHandlerRef;
+    approvalHandlerRef?: ApprovalHandlerRef;
+    questionController?: QuestionController;
+    bashAllowlist?: BashAllowlist;
+    settingsManager?: SettingsManager;
+    lspService?: LspService;
+    mcpManager?: McpManager;
+    themeMode?: ThemeMode;
+    themeOverrides?: Record<string, string>;
+    detectedTheme?: ResolvedTheme;
+    onThemeModeChange?: (mode: ThemeMode) => void;
+    flushMemory?: () => Promise<void>;
+    runMemoryCompaction?: () => Promise<string>;
+    runMemorySummary?: (scope?: MemoryScope) => Promise<string>;
+    runMemoryRefresh?: (scope?: MemoryScope) => Promise<string>;
+    /** Whether the bypassPermissions mode is reachable via Shift+Tab cycling. */
+    bypassEnabled?: boolean;
+    onExit?: (summary: ExitSummary) => void;
+}
+export interface ExitSummary {
+    /** Wall-clock duration of the session, in milliseconds. */
+    wallMs: number;
+}
+export declare function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, onExit }: AppProps): React.ReactNode;
+export {};