@bubblebrain-ai/bubble 0.0.3 → 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);
@@ -2728,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();
@@ -2995,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) {
@@ -3071,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 {
@@ -5744,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) {
@@ -5752,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 = [];

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@bubblebrain-ai/bubble",
-  "version": "0.0.3",
+  "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",
@@ -16,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",