@bubblebrain-ai/bubble 0.0.2 → 0.0.4

package/dist/tui/image-paste.js

@@ -14,6 +14,7 @@ import path from "node:path";
 import { promisify } from "node:util";
 const execFileAsync = promisify(execFile);
 const IMAGE_EXT = /\.(png|jpe?g|gif|webp|bmp)$/i;
+const IMAGE_EXT_SOURCE = String.raw `(?:png|jpe?g|gif|webp|bmp)`;
 // Anthropic/OpenAI image uploads cap at ~5MB base64. We target a bit below so
 // the base64 inflation (4/3) doesn't push us over.
 const MAX_BASE64_BYTES = 5 * 1024 * 1024;
@@ -30,6 +31,112 @@ export function isImageFilePath(raw) {
     // be treated as a path.
     return path.isAbsolute(s) || s.startsWith("~") || /^[A-Za-z]:\\/.test(s);
 }
+export function extractImagePathTokens(input) {
+    const pattern = new RegExp(String.raw `(^|\s)(?:"([^"]+\.${IMAGE_EXT_SOURCE})"|'([^']+\.${IMAGE_EXT_SOURCE})'|((?:~|\/|[A-Za-z]:\\)(?:\\ |[^\s"'<>])+\.${IMAGE_EXT_SOURCE}))(?=$|\s)`, "gi");
+    const tokens = [];
+    for (const match of input.matchAll(pattern)) {
+        const leading = match[1] ?? "";
+        const rawPath = match[2] ?? match[3] ?? match[4];
+        if (!rawPath || !isImageFilePath(rawPath))
+            continue;
+        const start = (match.index ?? 0) + leading.length;
+        const end = (match.index ?? 0) + match[0].length;
+        tokens.push({ rawPath, start, end });
+    }
+    return tokens;
+}
+export function removeImagePathTokens(input, tokens) {
+    if (tokens.length === 0)
+        return input.trim();
+    let out = "";
+    let cursor = 0;
+    for (const token of tokens) {
+        out += input.slice(cursor, token.start);
+        out += " ";
+        cursor = token.end;
+    }
+    out += input.slice(cursor);
+    return out
+        .replace(/[ \t]+/g, " ")
+        .replace(/ *\n */g, "\n")
+        .replace(/\n{3,}/g, "\n\n")
+        .trim();
+}
+export function imageAttachmentLabel(att, index) {
+    return `image#${index}${imageExtension(att)}`;
+}
+export function imageAttachmentReference(att, index) {
+    return `[${imageAttachmentLabel(att, index)}]`;
+}
+export function imageAttachmentLabelPattern() {
+    return /\[image#(\d+)\.[^\]\s]+\]/g;
+}
+function defaultImagePrompt(count) {
+    return count === 1
+        ? "Please analyze the attached image."
+        : "Please analyze the attached images.";
+}
+function imageExtension(att) {
+    const fromPath = path.extname(att.filename ?? att.sourcePath ?? "").toLowerCase();
+    if (fromPath)
+        return fromPath;
+    if (att.mediaType === "image/jpeg")
+        return ".jpg";
+    if (att.mediaType === "image/webp")
+        return ".webp";
+    if (att.mediaType === "image/gif")
+        return ".gif";
+    if (att.mediaType === "image/bmp")
+        return ".bmp";
+    return ".png";
+}
+export function buildImageContentParts(promptText, attachments) {
+    const text = promptText.trim() || defaultImagePrompt(attachments.length);
+    return [
+        { type: "text", text },
+        ...attachments.map((attachment) => ({
+            type: "image_url",
+            image_url: { url: attachment.dataUrl },
+        })),
+    ];
+}
+export function formatImageDisplayInput(promptText, attachments, labelStart = 1) {
+    const text = promptText.trim() || defaultImagePrompt(attachments.length);
+    const imageLines = attachments.map((attachment, index) => imageAttachmentReference(attachment, labelStart + index));
+    return `${text}\n${imageLines.join("\n")}`;
+}
+export function buildImageContentPartsFromLabels(input, attachmentsByLabel) {
+    const matches = Array.from(input.matchAll(imageAttachmentLabelPattern()));
+    const usedLabels = [];
+    const parts = [];
+    let cursor = 0;
+    for (const match of matches) {
+        const label = match[0].slice(1, -1);
+        const attachment = attachmentsByLabel.get(label);
+        if (!attachment)
+            continue;
+        const start = match.index ?? 0;
+        const before = input.slice(cursor, start).trim();
+        if (before)
+            parts.push({ type: "text", text: before });
+        parts.push({ type: "image_url", image_url: { url: attachment.dataUrl } });
+        usedLabels.push(label);
+        cursor = start + match[0].length;
+    }
+    if (usedLabels.length === 0)
+        return { displayInput: input, usedLabels: [] };
+    const rest = input.slice(cursor).trim();
+    if (rest)
+        parts.push({ type: "text", text: rest });
+    if (!parts.some((part) => part.type === "text")) {
+        parts.unshift({ type: "text", text: defaultImagePrompt(usedLabels.length) });
+    }
+    return {
+        actualInput: parts,
+        displayInput: input.trim() || usedLabels.map((label) => `[${label}]`).join("\n"),
+        usedLabels,
+    };
+}
 /**
  * Split a pasted blob into candidate path tokens.
  *
@@ -286,3 +393,113 @@ export async function ingestClipboardImage() {
         return { error: validation.reason };
     return { attachment: sized };
 }
+export async function resolveImageInput(input, options = {}) {
+    const tokens = extractImagePathTokens(input);
+    if (tokens.length === 0) {
+        return {
+            actualInput: input,
+            displayInput: input,
+            errors: [],
+            attachments: [],
+            imagePathCount: 0,
+        };
+    }
+    const attachments = [];
+    const errors = [];
+    const attachmentsByToken = new Map();
+    let nextLabelIndex = options.labelStart ?? 1;
+    for (const token of tokens) {
+        const result = await ingestImagePath(token.rawPath);
+        if (result.attachment) {
+            attachments.push(result.attachment);
+            attachmentsByToken.set(token, {
+                attachment: result.attachment,
+                label: imageAttachmentLabel(result.attachment, nextLabelIndex++),
+            });
+        }
+        else {
+            errors.push(`${token.rawPath}: ${result.error ?? "could not attach image"}`);
+        }
+    }
+    if (attachments.length === 0) {
+        return {
+            actualInput: input,
+            displayInput: input,
+            errors,
+            attachments: [],
+            imagePathCount: tokens.length,
+        };
+    }
+    const parts = [];
+    let displayInput = "";
+    let cursor = 0;
+    for (const token of tokens) {
+        const entry = attachmentsByToken.get(token);
+        if (!entry)
+            continue;
+        const before = input.slice(cursor, token.start);
+        displayInput += before;
+        const text = before.trim();
+        if (text)
+            parts.push({ type: "text", text });
+        parts.push({ type: "image_url", image_url: { url: entry.attachment.dataUrl } });
+        displayInput += `[${entry.label}]`;
+        cursor = token.end;
+    }
+    const rest = input.slice(cursor);
+    displayInput += rest;
+    const restText = rest.trim();
+    if (restText)
+        parts.push({ type: "text", text: restText });
+    if (!parts.some((part) => part.type === "text")) {
+        parts.unshift({ type: "text", text: defaultImagePrompt(attachments.length) });
+    }
+    return {
+        actualInput: parts,
+        displayInput: displayInput.trim(),
+        errors,
+        attachments,
+        imagePathCount: tokens.length,
+    };
+}
+export async function resolveComposerImagePaths(input, options = {}) {
+    const tokens = extractImagePathTokens(input);
+    let nextLabelIndex = options.labelStart ?? 1;
+    if (tokens.length === 0) {
+        return {
+            text: input,
+            attachments: [],
+            errors: [],
+            imagePathCount: 0,
+            nextLabelIndex,
+        };
+    }
+    const errors = [];
+    const attachments = [];
+    const replacements = new Map();
+    for (const token of tokens) {
+        const result = await ingestImagePath(token.rawPath);
+        if (!result.attachment) {
+            errors.push(`${token.rawPath}: ${result.error ?? "could not attach image"}`);
+            continue;
+        }
+        const label = imageAttachmentLabel(result.attachment, nextLabelIndex++);
+        attachments.push({ ...result.attachment, label });
+        replacements.set(token, `[${label}]`);
+    }
+    let text = "";
+    let cursor = 0;
+    for (const token of tokens) {
+        text += input.slice(cursor, token.start);
+        text += replacements.get(token) ?? input.slice(token.start, token.end);
+        cursor = token.end;
+    }
+    text += input.slice(cursor);
+    return {
+        text,
+        attachments,
+        errors,
+        imagePathCount: tokens.length,
+        nextLabelIndex,
+    };
+}

package/dist/tui/run.js

@@ -20,6 +20,7 @@ import { inferBashPrefix } from "../approval/session-cache.js";
 import { createFrames } from "./opencode-spinner.js";
 import { copyTextToClipboard } from "./clipboard.js";
 import { readGitSidebarState } from "./sidebar-state.js";
+import { buildImageContentPartsFromLabels, imageAttachmentLabelPattern, resolveComposerImagePaths, resolveImageInput, } from "./image-paste.js";
 import { isModeCycleKeyEvent, isModeCycleSequence, isModifiedEnterSequence, PROMPT_TEXTAREA_KEYBINDINGS, } from "./prompt-keybindings.js";
 import { keyNameFromEvent, keyNameFromSequence } from "./global-key-router.js";
 const treeSitterClient = getTreeSitterClient();
@@ -263,6 +264,10 @@ function OpenTuiApp(props) {
         .filter((message) => message.role === "user" && message.content !== "(multimedia)")
         .map((message) => message.content)
         .slice(-PROMPT_HISTORY_LIMIT);
+    let nextImageAttachmentIndex = nextImageLabelIndex(displayMessages);
+    const pendingImageAttachments = new Map();
+    let composerImageResolutionSeq = 0;
+    let applyingComposerImageReplacement = false;
     let promptHistoryIndex;
     let promptHistoryDraft = "";
     const [isRunning, setIsRunning] = createSignal(false);
@@ -387,6 +392,10 @@ function OpenTuiApp(props) {
     const sidebarLspRows = [];
     const sidebarLspMarkers = [];
     const sidebarLspLabels = [];
+    let sidebarTodoSection;
+    const sidebarTodoRows = [];
+    const sidebarTodoMarkers = [];
+    const sidebarTodoLabels = [];
     const sidebarFileRows = [];
     const sidebarFileLabels = [];
     const sidebarFileAdditions = [];
@@ -621,6 +630,12 @@ function OpenTuiApp(props) {
         setSidebarTick((value) => value + 1);
         syncSidebarContext();
     };
+    const syncTodosFromAgent = () => {
+        const nextTodos = props.agent.getTodos();
+        setTodos(nextTodos);
+        syncSidebarTodos(nextTodos);
+        bumpSidebar();
+    };
     function refreshGitSidebar() {
         setGitState(readGitSidebarState(props.args.cwd));
         syncSidebarFiles();
@@ -721,6 +736,35 @@ function OpenTuiApp(props) {
         }
         sidebarShell?.requestRender();
     }
+    function syncSidebarTodos(nextTodos = todos()) {
+        const visible = nextTodos.slice(0, 8);
+        if (sidebarTodoSection) {
+            sidebarTodoSection.visible = visible.length > 0;
+        }
+        for (let index = 0; index < 8; index++) {
+            const row = sidebarTodoRows[index];
+            const marker = sidebarTodoMarkers[index];
+            const label = sidebarTodoLabels[index];
+            const todo = visible[index];
+            if (!row || !marker || !label)
+                continue;
+            row.visible = !!todo;
+            if (!todo) {
+                safeRequestRender(row);
+                continue;
+            }
+            const completed = todo.status === "completed";
+            const inProgress = todo.status === "in_progress";
+            const labelText = inProgress ? (todo.activeForm || todo.content) : todo.content;
+            marker.content = completed ? "✓" : inProgress ? "◉" : "○";
+            marker.fg = completed ? theme.success : inProgress ? theme.warning : theme.textMuted;
+            label.content = labelText;
+            label.fg = completed ? theme.success : inProgress ? theme.warning : theme.textMuted;
+            safeRequestRender(row);
+        }
+        sidebarShell?.requestRender();
+        rootBox?.requestRender();
+    }
     function showSidebarLspRows(statuses) {
         for (let index = 0; index < sidebarLspRows.length; index++) {
             const row = sidebarLspRows[index];
@@ -2689,6 +2733,9 @@ function OpenTuiApp(props) {
     function onPromptContentChange(value) {
         const nextValue = typeof value === "string" ? value : readPromptText();
         promptText = nextValue;
+        if (!applyingComposerImageReplacement) {
+            void applyComposerImagePathReplacement(nextValue);
+        }
         if (promptHistoryIndex !== undefined
             && nextValue !== (promptHistory[promptHistoryIndex] ?? "")) {
             resetPromptHistoryBrowse();
@@ -2956,8 +3003,62 @@ function OpenTuiApp(props) {
         setPromptText(`/${skillName} `);
         redrawDock();
     }
+    async function applyComposerImagePathReplacement(snapshot) {
+        const seq = ++composerImageResolutionSeq;
+        const result = await resolveComposerImagePaths(snapshot, { labelStart: nextImageAttachmentIndex });
+        if (seq !== composerImageResolutionSeq)
+            return;
+        if (result.attachments.length === 0)
+            return;
+        if ((readPromptText() || promptText) !== snapshot)
+            return;
+        for (const attachment of result.attachments) {
+            pendingImageAttachments.set(attachment.label, attachment);
+        }
+        nextImageAttachmentIndex = Math.max(nextImageAttachmentIndex, result.nextLabelIndex);
+        applyingComposerImageReplacement = true;
+        try {
+            setPromptText(result.text);
+        }
+        finally {
+            applyingComposerImageReplacement = false;
+        }
+    }
+    async function expandTextParts(parts) {
+        const expandedParts = [];
+        for (const part of parts) {
+            if (part.type !== "text") {
+                expandedParts.push(part);
+                continue;
+            }
+            const expansion = await expandAtMentions(part.text, props.args.cwd);
+            if (expansion.missing.length)
+                addMessage("error", `Could not resolve @mention: ${expansion.missing.join(", ")}`);
+            for (const skipped of expansion.skipped)
+                addMessage("error", `Skipped @${skipped.path}: ${skipped.reason}`);
+            expandedParts.push({ type: "text", text: expansion.text });
+        }
+        return expandedParts;
+    }
     async function handleInput(input) {
         setNotice("");
+        const labeledInput = buildImageContentPartsFromLabels(input, pendingImageAttachments);
+        if (labeledInput.actualInput) {
+            await runAgentInput(await expandTextParts(labeledInput.actualInput), labeledInput.displayInput);
+            for (const label of labeledInput.usedLabels)
+                pendingImageAttachments.delete(label);
+            return;
+        }
+        const imageInput = await resolveImageInput(input, { labelStart: nextImageAttachmentIndex });
+        for (const error of imageInput.errors)
+            addMessage("error", `Skipped image: ${error}`);
+        if (imageInput.attachments.length > 0) {
+            await runAgentInput(await expandTextParts(imageInput.actualInput), imageInput.displayInput);
+            nextImageAttachmentIndex += imageInput.attachments.length;
+            return;
+        }
+        if (imageInput.imagePathCount > 0)
+            return;
         if (input.startsWith("/")) {
             const skillInvocation = parseSkillInvocation(input, skills);
             if (skillInvocation) {
@@ -3016,6 +3117,7 @@ function OpenTuiApp(props) {
             return true;
         if (props.agent.mode !== mode())
             setMode(props.agent.mode);
+        syncTodosFromAgent();
         syncModelChrome();
         syncModeChrome();
         if (uiDisposed)
@@ -3031,7 +3133,9 @@ function OpenTuiApp(props) {
                 const isCompactResult = result.startsWith("✓ Compaction complete");
                 if (isCompactResult) {
                     setNotice(result);
-                    redrawTranscript();
+                    displayMessages = reconstructDisplayMessages(props.agent.messages);
+                    streamingDisplay = undefined;
+                    redrawTranscript(undefined, displayMessages);
                     setTimeout(() => setNotice(""), 4000);
                 }
                 else {
@@ -3494,6 +3598,7 @@ function OpenTuiApp(props) {
                 }
                 else if (event.type === "todos_updated") {
                     setTodos(event.todos);
+                    syncSidebarTodos(event.todos);
                     bumpSidebar();
                 }
                 else if (event.type === "mode_changed") {
@@ -4068,7 +4173,6 @@ function OpenTuiApp(props) {
         const context = sidebarContextState();
         const mcpStates = sidebarMcpStates();
         const files = gitState().files;
-        const activeTodos = todos().filter((todo) => todo.status !== "completed");
         return h("box", {
             ref: (ref) => {
                 sidebarShell = ref;
@@ -4154,7 +4258,7 @@ function OpenTuiApp(props) {
                 ? renderSidebarSection("Compactions", [
                     h("text", { fg: theme.info, wrapMode: "word" }, `${currentTranscriptMessages().filter((m) => m.syntheticKind === "ui_compact_card").length} in this session`),
                 ])
-                : null, renderSidebarMcp(mcpStates), renderSidebarLsp(), activeTodos.length ? renderSidebarTodos(activeTodos) : null, renderSidebarFiles(files))),
+                : null, renderSidebarMcp(mcpStates), renderSidebarLsp(), renderSidebarTodos(todos()), renderSidebarFiles(files))),
             renderSidebarFooter(),
         ]);
     }
@@ -4239,11 +4343,37 @@ function OpenTuiApp(props) {
             }),
         ]);
     }
-    function renderSidebarTodos(activeTodos) {
-        return renderSidebarSection("Todo", activeTodos.slice(0, 6).map((todo) => {
-            const marker = todo.status === "in_progress" ? ">" : "o";
-            const color = todo.status === "in_progress" ? theme.primary : theme.textMuted;
-            return h("text", { fg: color, wrapMode: "word" }, `${marker} ${todo.activeForm || todo.content}`);
+    function renderSidebarTodos(todos) {
+        const visible = todos.slice(0, 8);
+        return h("box", {
+            flexDirection: "column",
+            flexShrink: 0,
+            visible: visible.length > 0,
+            ref: (ref) => {
+                sidebarTodoSection = ref;
+                syncSidebarTodos();
+            },
+        }, h("text", { fg: theme.text }, "Todo"), ...Array.from({ length: 8 }, (_, index) => {
+            const todo = visible[index];
+            const completed = todo?.status === "completed";
+            const inProgress = todo?.status === "in_progress";
+            const labelText = todo
+                ? (inProgress ? (todo.activeForm || todo.content) : todo.content)
+                : "";
+            return h("box", {
+                flexDirection: "row",
+                gap: 1,
+                visible: !!todo,
+                ref: (ref) => { sidebarTodoRows[index] = ref; },
+            }, h("text", {
+                fg: completed ? theme.success : inProgress ? theme.warning : theme.textMuted,
+                flexShrink: 0,
+                ref: (ref) => { sidebarTodoMarkers[index] = ref; },
+            }, completed ? "✓" : inProgress ? "◉" : "○"), h("text", {
+                fg: completed ? theme.success : inProgress ? theme.warning : theme.textMuted,
+                wrapMode: "word",
+                ref: (ref) => { sidebarTodoLabels[index] = ref; },
+            }, labelText));
         }));
     }
     function renderSidebarFiles(files) {
@@ -5249,10 +5379,50 @@ function createModelSwitchEntry(ctx, model, key, signature) {
     ]);
     return { key, signature, node, refs: {} };
 }
+function createTodoWriteRenderable(ctx, tool) {
+    const todos = tool.args.todos || [];
+    const summary = tool.result || "";
+    if (!isToolFinished(tool)) {
+        return createBox(ctx, {
+            paddingLeft: 3,
+            marginTop: 1,
+            flexDirection: "column",
+            flexShrink: 0,
+        }, [
+            createText(ctx, `~ → Planning tasks...`, { fg: toolColor(tool) }),
+        ]);
+    }
+    return createBox(ctx, {
+        border: ["left"],
+        borderColor: theme.borderSubtle,
+        backgroundColor: theme.backgroundPanel,
+        marginTop: 1,
+        paddingTop: 1,
+        paddingBottom: 1,
+        paddingLeft: 2,
+        flexDirection: "column",
+        flexShrink: 0,
+    }, [
+        createText(ctx, `# Todo  ${summary ? `— ${summary}` : ""}`, { fg: theme.textMuted }),
+        ...todos.map((todo, index) => {
+            const completed = todo.status === "completed";
+            const inProgress = todo.status === "in_progress";
+            const marker = completed ? "✓" : inProgress ? "◉" : "○";
+            const fg = completed ? theme.success : inProgress ? theme.warning : theme.textMuted;
+            return createText(ctx, `  ${marker} ${todo.content}`, {
+                fg,
+                marginTop: index === 0 ? 1 : 0,
+            });
+        }),
+    ]);
+}
 function createToolRenderable(ctx, tool, syntaxStyle, width = 80) {
     if (tool.name === "question") {
         return createQuestionToolRenderable(ctx, tool);
     }
+    if (tool.name === "todo_write") {
+        return createTodoWriteRenderable(ctx, tool);
+    }
     const icon = tool.name === "bash" ? "$" : tool.name === "edit" || tool.name === "write" ? "✎" : "●";
     const color = toolColor(tool);
     const header = toolHeader(tool);
@@ -5638,6 +5808,37 @@ function toSelectOption(item) {
         value: item.value,
     };
 }
+function nextImageLabelIndex(messages) {
+    let max = 0;
+    for (const message of messages) {
+        for (const match of message.content.matchAll(imageAttachmentLabelPattern())) {
+            max = Math.max(max, Number(match[1] ?? 0));
+        }
+    }
+    return max + 1;
+}
+function imageExtensionFromUrl(url) {
+    const mediaMatch = url.match(/^data:image\/([^;,]+)/i);
+    const media = mediaMatch?.[1]?.toLowerCase();
+    if (media === "jpeg")
+        return "jpg";
+    if (media === "png" || media === "webp" || media === "gif" || media === "bmp")
+        return media;
+    const pathMatch = url.match(/\.([a-z0-9]+)(?:[?#].*)?$/i);
+    return pathMatch?.[1]?.toLowerCase() || "png";
+}
+function formatDisplayContentParts(content, labelStart) {
+    const text = content
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
+        .join("\n")
+        .trim();
+    let imageIndex = labelStart;
+    const imageLines = content
+        .filter((part) => part.type === "image_url")
+        .map((part) => `[image#${imageIndex++}.${imageExtensionFromUrl(part.image_url.url)}]`);
+    return [text, ...imageLines].filter(Boolean).join("\n") || "(multimedia)";
+}
 function reconstructDisplayMessages(agentMessages) {
     const result = [];
     for (const message of agentMessages) {
@@ -5646,7 +5847,12 @@ function reconstructDisplayMessages(agentMessages) {
         if (message.role === "user") {
             if (message.isMeta)
                 continue;
-            result.push({ role: "user", content: typeof message.content === "string" ? message.content : "(multimedia)" });
+            result.push({
+                role: "user",
+                content: typeof message.content === "string"
+                    ? message.content
+                    : formatDisplayContentParts(message.content, nextImageLabelIndex(result)),
+            });
             continue;
         }
         const toolCalls = [];
@@ -5988,8 +6194,10 @@ function extractToolDiff(tool) {
     const index = tool.result.indexOf(marker);
     if (index === -1)
         return undefined;
-    const diff = tool.result.slice(index + marker.length).trim();
-    return diff ? diff : undefined;
+    const rawDiff = tool.result.slice(index + marker.length);
+    const diagnosticsIndex = rawDiff.search(/\n\nLSP diagnostics in /);
+    const diff = diagnosticsIndex === -1 ? rawDiff : rawDiff.slice(0, diagnosticsIndex);
+    return diff.trim().length > 0 ? diff : undefined;
 }
 function diffViewMode(width = 80) {
     return width > 120 ? "split" : "unified";

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@bubblebrain-ai/bubble",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A terminal coding agent",
   "type": "module",
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "bin": {
-    "bubble": "dist/main.js"
+    "bubble": "dist/bin.js"
   },
   "files": [
     "dist",
@@ -13,7 +16,7 @@
     "!dist/**/*.test.d.ts"
   ],
   "scripts": {
-    "build": "rm -rf dist && tsc && chmod +x dist/main.js",
+    "build": "rm -rf dist && tsc && chmod +x dist/bin.js dist/main.js",
     "dev": "tsc && bun dist/main.js",
     "prepack": "npm run build",
     "start": "bun dist/main.js",