@bubblebrain-ai/bubble 0.0.11 → 0.0.13

package/dist/tui-opentui/question-dialog.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+import { useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "./theme.js";
+export function QuestionDialog({ request, onSubmit, onCancel }) {
+    const theme = useTheme();
+    const [index, setIndex] = useState(0);
+    const [selected, setSelected] = useState(0);
+    const [custom, setCustom] = useState("");
+    const [answers, setAnswers] = useState(() => request.questions.map(() => []));
+    const question = request.questions[index];
+    const options = question?.options ?? [];
+    const canUseCustom = question?.custom !== false;
+    const isMultiple = question?.multiple === true;
+    const totalTabs = request.questions.length;
+    const currentAnswer = useMemo(() => answers[index] ?? [], [answers, index]);
+    const commitQuestion = () => {
+        const option = options[selected]?.label;
+        const customAnswer = custom.trim();
+        const nextAnswer = customAnswer
+            ? [customAnswer]
+            : isMultiple
+                ? currentAnswer
+                : option
+                    ? [option]
+                    : [];
+        const nextAnswers = answers.map((answer, i) => i === index ? nextAnswer : answer);
+        if (index < request.questions.length - 1) {
+            setAnswers(nextAnswers);
+            setIndex((i) => i + 1);
+            setSelected(0);
+            setCustom("");
+            return;
+        }
+        onSubmit(nextAnswers);
+    };
+    const toggleCurrentOption = () => {
+        const option = options[selected]?.label;
+        if (!option)
+            return;
+        if (!isMultiple) {
+            setAnswers((prev) => prev.map((answer, i) => i === index ? [option] : answer));
+            return;
+        }
+        setAnswers((prev) => prev.map((answer, i) => {
+            if (i !== index)
+                return answer;
+            return answer.includes(option)
+                ? answer.filter((item) => item !== option)
+                : [...answer, option];
+        }));
+    };
+    useKeyboard((key) => {
+        if (key.eventType === "release")
+            return;
+        if (key.name === "escape") {
+            onCancel();
+            return;
+        }
+        if (key.name === "left" && index > 0) {
+            setIndex((i) => i - 1);
+            setSelected(0);
+            setCustom("");
+            return;
+        }
+        if (key.name === "right" && index < totalTabs - 1) {
+            setIndex((i) => i + 1);
+            setSelected(0);
+            setCustom("");
+            return;
+        }
+        if (key.name === "up") {
+            setSelected((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.name === "down") {
+            setSelected((i) => Math.min(Math.max(0, options.length - 1), i + 1));
+            return;
+        }
+        if (key.name === "tab" || key.name === " " || key.name === "space") {
+            toggleCurrentOption();
+            return;
+        }
+        if (key.name === "return") {
+            commitQuestion();
+            return;
+        }
+        if (key.name === "backspace" || key.name === "delete") {
+            setCustom((value) => value.slice(0, -1));
+            return;
+        }
+        if (canUseCustom && key.name && key.name.length === 1 && !key.ctrl && !key.option) {
+            setCustom((value) => value + key.name);
+        }
+    });
+    return (_jsxs("box", { style: {
+            flexDirection: "column",
+            border: true,
+            borderColor: theme.accent,
+            paddingLeft: 1,
+            paddingRight: 1,
+            marginTop: 1,
+            marginBottom: 1,
+        }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: `Question ${totalTabs > 1 ? `${index + 1}/${totalTabs}` : ""}` }), _jsx("box", { style: { marginTop: 1 }, children: _jsx("text", { children: question?.question ?? "The agent is asking for input." }) }), _jsx("box", { style: { flexDirection: "column", marginTop: 1 }, children: options.map((option, optionIndex) => {
+                    const isSelected = optionIndex === selected;
+                    const isChecked = currentAnswer.includes(option.label);
+                    return (_jsxs("box", { style: { flexDirection: "column" }, children: [_jsxs("text", { fg: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", isMultiple ? `[${isChecked ? "x" : " "}] ` : "", option.label] }), option.description && (_jsx("box", { style: { marginLeft: 4 }, children: _jsx("text", { fg: theme.muted, children: option.description }) }))] }, `${option.label}-${optionIndex}`));
+                }) }), canUseCustom && (_jsx("box", { style: { marginTop: 1 }, children: _jsx("text", { fg: custom ? undefined : theme.muted, children: `Custom: ${custom || "type to answer..."}` }) })), _jsx("box", { style: { marginTop: 1 }, children: _jsx("text", { fg: theme.muted, children: "\u2191\u2193 choose \u00B7 Tab/Space toggle \u00B7 Enter submit \u00B7 Esc dismiss" }) })] }));
+}

package/dist/tui-opentui/recent-activity.d.ts

@@ -0,0 +1,8 @@
+export interface RecentSession {
+    file: string;
+    modifiedAt: number;
+    preview: string;
+}
+export declare function getRecentSessions(cwd: string, limit?: number): RecentSession[];
+export declare function formatRelativeTime(timestampMs: number, now?: number): string;
+export declare function truncatePreview(preview: string, maxLen: number): string;

package/dist/tui-opentui/recent-activity.js

@@ -0,0 +1,71 @@
+import { readFileSync, readdirSync, statSync, existsSync } from "node:fs";
+import path from "node:path";
+import { getSessionsDir } from "../session.js";
+export function getRecentSessions(cwd, limit = 3) {
+    const dir = getSessionsDir(cwd);
+    if (!existsSync(dir))
+        return [];
+    const files = readdirSync(dir).filter((f) => f.endsWith(".jsonl"));
+    const withMtime = files.map((f) => {
+        const full = path.join(dir, f);
+        try {
+            return { file: f, full, modifiedAt: statSync(full).mtimeMs };
+        }
+        catch {
+            return { file: f, full, modifiedAt: 0 };
+        }
+    });
+    withMtime.sort((a, b) => b.modifiedAt - a.modifiedAt);
+    return withMtime.slice(0, limit).map(({ file, full, modifiedAt }) => ({
+        file,
+        modifiedAt,
+        preview: extractFirstUserMessage(full) ?? "(no messages)",
+    }));
+}
+export function formatRelativeTime(timestampMs, now = Date.now()) {
+    const diffSec = Math.max(0, Math.floor((now - timestampMs) / 1000));
+    if (diffSec < 60)
+        return "just now";
+    if (diffSec < 3600)
+        return `${Math.floor(diffSec / 60)}m ago`;
+    if (diffSec < 86400)
+        return `${Math.floor(diffSec / 3600)}h ago`;
+    if (diffSec < 604800)
+        return `${Math.floor(diffSec / 86400)}d ago`;
+    const weeks = Math.floor(diffSec / 604800);
+    if (weeks < 5)
+        return `${weeks}w ago`;
+    const months = Math.floor(diffSec / (30 * 86400));
+    return `${months}mo ago`;
+}
+function extractFirstUserMessage(file) {
+    let raw;
+    try {
+        raw = readFileSync(file, "utf-8");
+    }
+    catch {
+        return null;
+    }
+    const lines = raw.split("\n");
+    for (const line of lines) {
+        if (!line.trim())
+            continue;
+        let entry;
+        try {
+            entry = JSON.parse(line);
+        }
+        catch {
+            continue;
+        }
+        if (entry.type === "user_message" && typeof entry.message?.content === "string") {
+            return entry.message.content;
+        }
+    }
+    return null;
+}
+export function truncatePreview(preview, maxLen) {
+    const firstLine = preview.split("\n")[0]?.trim() ?? "";
+    if (firstLine.length <= maxLen)
+        return firstLine;
+    return firstLine.slice(0, Math.max(1, maxLen - 1)) + "…";
+}

package/dist/tui-opentui/run-session-picker.d.ts

@@ -0,0 +1,10 @@
+import type { ResolvedTheme } from "./detect-theme.js";
+import type { SessionSummary } from "../session.js";
+export interface RunSessionPickerOptions {
+    currentCwd: string;
+    currentSessions: SessionSummary[];
+    allSessions: SessionSummary[];
+    resolvedTheme: ResolvedTheme;
+    themeOverrides?: Record<string, string>;
+}
+export declare function runSessionPicker(options: RunSessionPickerOptions): Promise<string | undefined>;

package/dist/tui-opentui/run-session-picker.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { SessionPicker } from "./session-picker.js";
+import { ThemeProvider, paletteFor } from "./theme.js";
+export async function runSessionPicker(options) {
+    const theme = paletteFor(options.resolvedTheme, options.themeOverrides);
+    const renderer = await createCliRenderer();
+    const root = createRoot(renderer);
+    return new Promise((resolve) => {
+        let done = false;
+        const finish = (value) => {
+            if (done)
+                return;
+            done = true;
+            try {
+                root.unmount();
+            }
+            catch { /* ignore */ }
+            try {
+                renderer.destroy();
+            }
+            catch { /* ignore */ }
+            resolve(value);
+        };
+        root.render(_jsx(ThemeProvider, { value: theme, children: _jsx(SessionPicker, { currentCwd: options.currentCwd, currentSessions: options.currentSessions, allSessions: options.allSessions, onSelect: (file) => finish(file), onCancel: () => finish(undefined) }) }));
+    });
+}

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

@@ -0,0 +1,38 @@
+/** @jsxImportSource @opentui/react */
+import type { Agent } from "../agent.js";
+import type { CliArgs } from "../cli.js";
+import type { SessionManager } from "../session.js";
+import type { Provider } from "../types.js";
+import type { ProviderRegistry } from "../provider-registry.js";
+import type { SkillRegistry } from "../skills/registry.js";
+import { type ApprovalHandlerRef, type PlanHandlerRef } from "./app.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";
+import type { ResolvedTheme, ThemeMode } from "./theme.js";
+export interface RunTuiOptions {
+    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>;
+    bypassEnabled?: boolean;
+}
+export declare function runTui(agent: Agent, args: CliArgs, options?: RunTuiOptions): Promise<void>;

package/dist/tui-opentui/run.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import chalk from "chalk";
+import { App } from "./app.js";
+export async function runTui(agent, args, options = {}) {
+    let exitSummary;
+    const renderer = await createCliRenderer();
+    const root = createRoot(renderer);
+    root.render(_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, createProvider: options.createProvider, registry: options.registry, skillRegistry: options.skillRegistry, planHandlerRef: options.planHandlerRef, approvalHandlerRef: options.approvalHandlerRef, questionController: options.questionController, bashAllowlist: options.bashAllowlist, settingsManager: options.settingsManager, lspService: options.lspService, mcpManager: options.mcpManager, themeMode: options.themeMode, themeOverrides: options.themeOverrides, detectedTheme: options.detectedTheme, onThemeModeChange: options.onThemeModeChange, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, onExit: (summary) => {
+            exitSummary = summary;
+        } }));
+    await new Promise((resolve) => {
+        // OpenTUI emits "destroyed" when renderer.destroy() lands. Listen once.
+        const onDone = () => {
+            try {
+                root.unmount();
+            }
+            catch {
+                // ignore — root may already be torn down
+            }
+            resolve();
+        };
+        renderer.on?.("destroyed", onDone) ?? renderer.once?.("destroyed", onDone);
+    });
+    if (process.stdout.isTTY) {
+        process.stdout.write("\n");
+        if (exitSummary) {
+            process.stdout.write(formatExitSummary(exitSummary) + "\n");
+        }
+    }
+}
+function formatExitSummary(summary) {
+    const label = "Total duration:";
+    return chalk.dim(`${label} ${formatWallMs(summary.wallMs)}`);
+}
+function formatWallMs(ms) {
+    const totalSeconds = Math.max(0, Math.round(ms / 1000));
+    if (totalSeconds < 60)
+        return `${totalSeconds}s`;
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (minutes < 60)
+        return `${minutes}m ${seconds}s`;
+    const hours = Math.floor(minutes / 60);
+    const minutesRest = minutes % 60;
+    return `${hours}h ${minutesRest}m ${seconds}s`;
+}

package/dist/tui-opentui/session-picker.d.ts

@@ -0,0 +1,12 @@
+/** @jsxImportSource @opentui/react */
+import React from "react";
+import type { SessionSummary } from "../session.js";
+export type SessionPickerMode = "current" | "all";
+export interface SessionPickerProps {
+    currentCwd: string;
+    currentSessions: SessionSummary[];
+    allSessions: SessionSummary[];
+    onSelect: (file: string) => void;
+    onCancel: () => void;
+}
+export declare function SessionPicker({ currentCwd, currentSessions, allSessions, onSelect, onCancel }: SessionPickerProps): React.ReactNode;

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

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+import { useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "./theme.js";
+import { formatRelativeTime } from "./recent-activity.js";
+import { padVisual, truncateVisual } from "../text-display.js";
+import { useTerminalSize } from "./use-terminal-size.js";
+export function SessionPicker({ currentCwd, currentSessions, allSessions, onSelect, onCancel }) {
+    const theme = useTheme();
+    const { columns: termWidth, rows: termHeight } = useTerminalSize();
+    const maxVisible = Math.max(6, termHeight - 10);
+    const [mode, setMode] = useState("current");
+    const [selectedSessionIdx, setSelectedSessionIdx] = useState(0);
+    const rows = useMemo(() => buildRows(mode, currentCwd, currentSessions, allSessions), [mode, currentCwd, currentSessions, allSessions]);
+    const sessionRowIndices = useMemo(() => rows.map((row, i) => (row.type === "session" ? i : -1)).filter((i) => i >= 0), [rows]);
+    const clampedIdx = sessionRowIndices.length === 0
+        ? 0
+        : Math.min(selectedSessionIdx, sessionRowIndices.length - 1);
+    const selectedRowIndex = sessionRowIndices[clampedIdx] ?? -1;
+    useKeyboard((key) => {
+        if (key.eventType === "release")
+            return;
+        if (key.name === "escape") {
+            onCancel();
+            return;
+        }
+        if (key.name === "tab") {
+            setMode((m) => (m === "current" ? "all" : "current"));
+            setSelectedSessionIdx(0);
+            return;
+        }
+        if (key.name === "return") {
+            const row = rows[selectedRowIndex];
+            if (row?.type === "session" && row.session)
+                onSelect(row.session.file);
+            return;
+        }
+        if (key.name === "up") {
+            setSelectedSessionIdx((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.name === "down") {
+            setSelectedSessionIdx((i) => Math.min(Math.max(0, sessionRowIndices.length - 1), i + 1));
+            return;
+        }
+    });
+    // Window the visible rows around the selected session.
+    const start = clampWindowStart(rows, selectedRowIndex, maxVisible);
+    const visible = rows.slice(start, start + maxVisible);
+    const modeLabel = mode === "current" ? "Current dir" : "All directories";
+    const totalSessions = sessionRowIndices.length;
+    return (_jsxs("box", { style: {
+            flexDirection: "column",
+            marginTop: 1,
+            marginBottom: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+            border: true,
+            borderColor: theme.borderActive,
+        }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: "Resume session" }), _jsxs("box", { style: { flexDirection: "row" }, children: [_jsx("text", { fg: theme.muted, children: "View: " }), _jsx("text", { fg: theme.accent, children: modeLabel }), _jsxs("text", { fg: theme.muted, children: ["  ·  ", totalSessions, " session", totalSessions === 1 ? "" : "s"] })] }), _jsx("text", { fg: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter resume \u00B7 Tab toggle scope \u00B7 Esc start fresh" }), _jsxs("box", { style: { flexDirection: "column", marginTop: 1 }, children: [totalSessions === 0 && (_jsx("text", { fg: theme.muted, children: mode === "current"
+                            ? "No previous sessions in this directory."
+                            : "No previous sessions found." })), visible.map((row, i) => {
+                        const actualIndex = start + i;
+                        if (row.type === "header") {
+                            return (_jsx("box", { style: { marginTop: i === 0 ? 0 : 1 }, children: _jsx("text", { fg: theme.muted, attributes: 1, children: row.label }) }, `h-${actualIndex}`));
+                        }
+                        const session = row.session;
+                        const isSelected = actualIndex === selectedRowIndex;
+                        const time = padVisual(formatRelativeTime(session.mtime), 9);
+                        const titleWidth = Math.max(20, Math.min(80, termWidth - 30));
+                        return (_jsxs("box", { style: { flexDirection: "row" }, children: [_jsxs("text", { fg: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", time, "  ", padVisual(truncateVisual(session.title, titleWidth), titleWidth)] }), _jsx("box", { style: { marginLeft: 1 }, children: _jsxs("text", { fg: theme.muted, children: ["\u00B7 ", session.messageCount, " msg", session.messageCount === 1 ? "" : "s"] }) })] }, session.file));
+                    })] })] }));
+}
+function buildRows(mode, currentCwd, currentSessions, allSessions) {
+    if (mode === "current") {
+        if (currentSessions.length === 0)
+            return [];
+        return [
+            { type: "header", label: currentCwd },
+            ...currentSessions.map((session) => ({ type: "session", session })),
+        ];
+    }
+    const grouped = new Map();
+    for (const session of allSessions) {
+        const key = session.cwdLabel;
+        const list = grouped.get(key);
+        if (list)
+            list.push(session);
+        else
+            grouped.set(key, [session]);
+    }
+    const sortedGroups = Array.from(grouped.entries()).sort((a, b) => {
+        if (a[0] === currentCwd)
+            return -1;
+        if (b[0] === currentCwd)
+            return 1;
+        const aLatest = a[1][0]?.mtime ?? 0;
+        const bLatest = b[1][0]?.mtime ?? 0;
+        return bLatest - aLatest;
+    });
+    const rows = [];
+    for (const [label, sessions] of sortedGroups) {
+        rows.push({ type: "header", label });
+        for (const session of sessions)
+            rows.push({ type: "session", session });
+    }
+    return rows;
+}
+function clampWindowStart(rows, selectedRowIndex, maxVisible) {
+    if (rows.length <= maxVisible)
+        return 0;
+    if (selectedRowIndex < 0)
+        return 0;
+    const half = Math.floor(maxVisible / 2);
+    let start = Math.max(0, selectedRowIndex - half);
+    if (start + maxVisible > rows.length)
+        start = rows.length - maxVisible;
+    return Math.max(0, start);
+}

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

@@ -0,0 +1,89 @@
+/**
+ * Theme for the OpenTUI TUI, structured after opencode's grayscale + semantic
+ * accent model. Bubble keeps the quiet terminal surface, blue focus color, and
+ * warm command accent instead of turning light mode into a plain gray port.
+ *
+ * The exported `Theme` shape preserves the keys consumed by the rest of the
+ * TUI so no caller needs to change.
+ */
+export type ResolvedTheme = "light" | "dark";
+export type ThemeMode = "auto" | ResolvedTheme;
+export interface Theme {
+    user: string;
+    agent: string;
+    error: string;
+    warning: string;
+    success: string;
+    accent: string;
+    border: string;
+    borderActive: string;
+    inputBorder: string;
+    inputBorderDisabled: string;
+    inputBg: string;
+    inputBgDisabled: string;
+    inputText: string;
+    inputPlaceholder: string;
+    muted: string;
+    dim: string;
+    thinking: string;
+    thinkingDim: string;
+    toolName: string;
+    toolResult: string;
+    toolError: string;
+    toolPending: string;
+    code: string;
+    traceAction: string;
+    traceCount: string;
+    traceDetail: string;
+    traceCommand: string;
+    tracePending: string;
+    userMessageBorder: string;
+    userMessageBg: string;
+    userMessageText: string;
+    userRail: string;
+    diffAdd: string;
+    diffRemove: string;
+    diffAddFg: string;
+    diffRemoveFg: string;
+    toolFile: string;
+    toolShell: string;
+    toolSearch: string;
+    toolThink: string;
+    toolNet: string;
+    toolEdit: string;
+    brand: string;
+    brandSoft: string;
+    brandDeep: string;
+    background: string;
+    backgroundPanel: string;
+    backgroundElement: string;
+    text: string;
+    textMuted: string;
+    textDim: string;
+    surface: string;
+    shade: string;
+}
+/**
+ * 12-step grayscale + lavender accent.
+ *
+ *  step1  #0a0a0a  root bg
+ *  step2  #141414  panel bg (dialogs, chips)
+ *  step3  #1c1820  element bg (input fill, slightly purple-tinged)
+ *  step4  #232028  surface  (current input bg base)
+ *  step5  #2a2630  raised panel
+ *  step6  #3a3242  borderSubtle
+ *  step7  #4a4254  border
+ *  step8  #5e5570  borderActive
+ *  step9  #bd91db  accent / primary       ← brand
+ *  step10 #d4afe8  accent hover / soft
+ *  step11 #808080  text muted
+ *  step12 #eeeeee  text
+ */
+export declare const darkTheme: Theme;
+export declare const lightTheme: Theme;
+export declare const ThemeProvider: import("react").Provider<Theme>;
+export declare function useTheme(): Theme;
+export declare function paletteFor(mode: ResolvedTheme, overrides?: Record<string, string>): Theme;
+/** opencode style: tool category is encoded by header text, not color. Keep
+ * a single accent for tool names so users get visual consistency. */
+export declare function toolAccent(theme: Theme, _toolName: string): string;