@bubblebrain-ai/bubble 0.0.11 → 0.0.12

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.js

@@ -68,8 +68,8 @@ export const lightTheme = {
     borderActive: "#0E5A85",
     inputBorder: "#6B5FB8",
     inputBorderDisabled: "#c5c3d0",
-    inputBg: "#f5f5fa",
-    inputBgDisabled: "#ebebf2",
+    inputBg: "#eeeef6",
+    inputBgDisabled: "#e2e2ec",
     inputText: "#1c1c24",
     inputPlaceholder: "#7a7886",
     muted: "gray",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bubblebrain-ai/bubble",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "A terminal coding agent",
   "type": "module",
   "engines": {