@blockrun/franklin 3.24.4 → 3.25.0

package/dist/ui/app.js

@@ -4,6 +4,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Real-time streaming, thinking animation, tool progress, slash commands.
  */
 import chalk from 'chalk';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { execFileSync } from 'node:child_process';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { render, Static, Box, Text, useApp, useInput, useStdout } from 'ink';
 import Spinner from 'ink-spinner';
@@ -23,6 +27,16 @@ const DISABLE_BRACKETED_PASTE = '\x1b[?2004l';
 const USER_PROMPT_COLOR = '#FFD700';
 const PASTE_BLOCK_START = '\uE000PASTE:';
 const PASTE_BLOCK_END = ':PASTE\uE001';
+// Image attachments work the same way as text paste blocks: the input string
+// carries an encoded token, renderInputValue shows a placeholder, decodePromptValue
+// replaces with the absolute file path when the prompt is submitted. The downstream
+// flow already understands paths \u2014 messageNeedsVision routes to a vision model and
+// the Read tool inlines the bytes \u2014 so an image paste just needs the path injected.
+const IMG_BLOCK_START = '\uE000IMG:';
+const IMG_BLOCK_END = ':IMG\uE001';
+// Clipboard images bigger than this are rejected upfront so a 12MB retina
+// screenshot doesn't sit in /tmp and then fail at Read time. Matches read.ts's cap.
+const MAX_CLIPBOARD_IMG_BYTES = 3_750_000;
 // Only collapse pastes of >= this many lines into a [Pasted ~N lines] block.
 // Short pastes (one-liners, 2-4 line snippets) inline as plain text so the
 // model sees them verbatim and the user can read what they pasted in the
@@ -43,10 +57,13 @@ function normalizeInputNewlines(input) {
 function encodePasteBlock(content) {
     return `${PASTE_BLOCK_START}${Buffer.from(content, 'utf8').toString('base64')}${PASTE_BLOCK_END}`;
 }
-function decodePasteBlock(token) {
-    if (!token.startsWith(PASTE_BLOCK_START) || !token.endsWith(PASTE_BLOCK_END))
+function encodeImageBlock(absolutePath) {
+    return `${IMG_BLOCK_START}${Buffer.from(absolutePath, 'utf8').toString('base64')}${IMG_BLOCK_END}`;
+}
+function decodeBlockPayload(token, startMarker, endMarker) {
+    if (!token.startsWith(startMarker) || !token.endsWith(endMarker))
         return token;
-    const payload = token.slice(PASTE_BLOCK_START.length, -PASTE_BLOCK_END.length);
+    const payload = token.slice(startMarker.length, -endMarker.length);
     try {
         return Buffer.from(payload, 'base64').toString('utf8');
     }
@@ -57,15 +74,39 @@ function decodePasteBlock(token) {
 function findPasteBlocks(value) {
     const blocks = [];
     let searchFrom = 0;
+    // Scan for both text and image blocks in a single pass, taking whichever
+    // starts earlier so they can be interleaved in any order in the input.
     while (searchFrom < value.length) {
-        const start = value.indexOf(PASTE_BLOCK_START, searchFrom);
-        if (start < 0)
+        const textStart = value.indexOf(PASTE_BLOCK_START, searchFrom);
+        const imgStart = value.indexOf(IMG_BLOCK_START, searchFrom);
+        let kind;
+        let start;
+        let startMarker;
+        let endMarker;
+        if (textStart < 0 && imgStart < 0)
             break;
-        const endMarker = value.indexOf(PASTE_BLOCK_END, start + PASTE_BLOCK_START.length);
-        if (endMarker < 0)
+        if (textStart < 0 || (imgStart >= 0 && imgStart < textStart)) {
+            kind = 'image';
+            start = imgStart;
+            startMarker = IMG_BLOCK_START;
+            endMarker = IMG_BLOCK_END;
+        }
+        else {
+            kind = 'text';
+            start = textStart;
+            startMarker = PASTE_BLOCK_START;
+            endMarker = PASTE_BLOCK_END;
+        }
+        const endIdx = value.indexOf(endMarker, start + startMarker.length);
+        if (endIdx < 0)
             break;
-        const end = endMarker + PASTE_BLOCK_END.length;
-        blocks.push({ start, end, content: decodePasteBlock(value.slice(start, end)) });
+        const end = endIdx + endMarker.length;
+        blocks.push({
+            start,
+            end,
+            kind,
+            content: decodeBlockPayload(value.slice(start, end), startMarker, endMarker),
+        });
         searchFrom = end;
     }
     return blocks;
@@ -74,13 +115,214 @@ function decodePromptValue(value) {
     let decoded = '';
     let cursor = 0;
     for (const block of findPasteBlocks(value)) {
-        decoded += value.slice(cursor, block.start) + block.content;
+        // Image blocks decode to a bare filesystem path. Pad it with spaces so the
+        // path stays a standalone token even when the user typed text flush against
+        // the placeholder — otherwise `foo[Image]bar` → `foo/tmp/x.pngbar`, which
+        // breaks both the vision-routing regex and the model's path parsing.
+        const piece = block.kind === 'image' ? ` ${block.content} ` : block.content;
+        decoded += value.slice(cursor, block.start) + piece;
         cursor = block.end;
     }
     return decoded + value.slice(cursor);
 }
-function pasteSummary(content) {
-    const lines = content.length === 0 ? 0 : content.split('\n').length;
+/**
+ * Read the system clipboard, and if it currently holds an image, save it to
+ * a temp file and return the absolute path. Otherwise return null.
+ *
+ * Probed synchronously because it's only called on a paste event where the
+ * user is actively waiting — the 30-100 ms shell-out is imperceptible. Bound
+ * by a short timeout so a hung clipboard tool can never block the input loop.
+ *
+ * macOS: `pbpaste -Prefer image` writes the clipboard image to stdout (PNG
+ * if available, otherwise nothing/text). Empty stdout means no image.
+ * Linux: tries `wl-paste --type image/png` (Wayland) then `xclip -selection
+ * clipboard -t image/png -o` (X11). The first one that returns non-empty
+ * bytes wins.
+ *
+ * Files land in $TMPDIR/franklin-clip-<ts>.png. macOS scrubs /tmp on reboot
+ * and most Linux distros sweep entries older than 10 days via tmpfiles.d, so
+ * we deliberately do NOT add our own cleanup — the OS handles it.
+ */
+/**
+ * Down-scale an oversize clipboard image so it fits under MAX_CLIPBOARD_IMG_BYTES
+ * instead of being rejected. Reuses the same strategy as Read on a .png file
+ * (`src/tools/read.ts`): long edge → 1280 px, JPEG q85 (mozjpeg), preserving
+ * PNG when there's real transparency. Overwrites the original file in place.
+ *
+ * Best-effort: if sharp is missing or chokes, we return null and the caller
+ * surfaces the original-size rejection rather than silently shipping a 12 MB
+ * paste downstream.
+ */
+async function shrinkImageInPlace(filePath) {
+    try {
+        const before = fs.statSync(filePath).size;
+        const raw = fs.readFileSync(filePath);
+        const sharpMod = await import('sharp');
+        const sharp = sharpMod.default;
+        const meta = await sharp(raw, { failOn: 'none' }).metadata();
+        let hasAlpha = false;
+        if (meta.hasAlpha) {
+            const stats = await sharp(raw, { failOn: 'none' }).stats();
+            const alpha = stats.channels[stats.channels.length - 1];
+            hasAlpha = alpha?.min !== undefined && alpha.min < 255;
+        }
+        const MAX_LONG_EDGE = 1280;
+        const longEdge = Math.max(meta.width ?? 0, meta.height ?? 0);
+        let pipeline = sharp(raw, { failOn: 'none' });
+        if (longEdge > MAX_LONG_EDGE) {
+            pipeline = pipeline.resize({
+                width: meta.width && meta.width >= (meta.height ?? 0) ? MAX_LONG_EDGE : undefined,
+                height: meta.height && meta.height > (meta.width ?? 0) ? MAX_LONG_EDGE : undefined,
+                fit: 'inside',
+                withoutEnlargement: true,
+            });
+        }
+        const out = hasAlpha
+            ? await pipeline.png({ compressionLevel: 9 }).toBuffer()
+            : await pipeline.jpeg({ quality: 85, mozjpeg: true }).toBuffer();
+        fs.writeFileSync(filePath, out);
+        return { from: before, to: out.length };
+    }
+    catch {
+        return null;
+    }
+}
+async function tryReadClipboardImage() {
+    const filename = `franklin-clip-${Date.now()}-${Math.floor(Math.random() * 1e6)}.png`;
+    const out = path.join(os.tmpdir(), filename);
+    if (process.platform === 'darwin') {
+        // pbpaste does NOT stream image bytes (its -Prefer only takes txt/rtf/ps);
+        // the supported path on macOS is AppleScript reading the clipboard as the
+        // PNGf class and writing the bytes itself. Returns "ok" / "no" so we can
+        // tell the difference between "no image on the clipboard" and "actual error".
+        let result;
+        try {
+            result = execFileSync('osascript', [
+                '-e', 'try',
+                '-e', `set the_data to the clipboard as «class PNGf»`,
+                '-e', `set fp to (open for access POSIX file "${out}" with write permission)`,
+                '-e', 'write the_data to fp',
+                '-e', 'close access fp',
+                '-e', 'return "ok"',
+                '-e', 'on error',
+                '-e', 'return "no"',
+                '-e', 'end try',
+            ], { timeout: 1500, encoding: 'utf8' }).trim();
+        }
+        catch {
+            return null; /* osascript missing or hung */
+        }
+        if (result !== 'ok')
+            return null;
+    }
+    else if (process.platform === 'linux') {
+        // wl-paste / xclip both stream image bytes to stdout. Try Wayland first
+        // (more common on modern distros), fall back to X11. Either may not be
+        // installed — that's fine, we just fall through to the text paste path.
+        let buf = null;
+        try {
+            buf = execFileSync('wl-paste', ['--type', 'image/png'], { timeout: 1500, maxBuffer: 16 * 1024 * 1024 });
+        }
+        catch { /* try xclip next */ }
+        if (!buf || buf.length === 0) {
+            try {
+                buf = execFileSync('xclip', ['-selection', 'clipboard', '-t', 'image/png', '-o'], { timeout: 1500, maxBuffer: 16 * 1024 * 1024 });
+            }
+            catch {
+                return null;
+            }
+        }
+        if (!buf || buf.length === 0)
+            return null;
+        try {
+            fs.writeFileSync(out, buf);
+        }
+        catch (err) {
+            return { error: `Failed to save clipboard image: ${err.message}` };
+        }
+    }
+    else {
+        return null; // Windows / others not supported yet.
+    }
+    // Stat + magic-byte check. Cleans up the file if it's not a real image —
+    // belt-and-suspenders against osascript writing a weird non-PNG payload, or
+    // the clipboard tool returning something that isn't actually an image.
+    let stat;
+    try {
+        stat = fs.statSync(out);
+    }
+    catch {
+        return null;
+    }
+    if (stat.size === 0) {
+        try {
+            fs.unlinkSync(out);
+        }
+        catch { /* ok */ }
+        return null;
+    }
+    let resizedFrom;
+    if (stat.size > MAX_CLIPBOARD_IMG_BYTES) {
+        // Auto-shrink instead of hard-rejecting — Claude Code went through the
+        // same iteration after users hit "Image too large" on retina screenshots.
+        const r = await shrinkImageInPlace(out);
+        if (!r) {
+            try {
+                fs.unlinkSync(out);
+            }
+            catch { /* ok */ }
+            return { error: `Image too large (${(stat.size / 1_000_000).toFixed(1)}MB) and could not be resized. Crop or re-save smaller.` };
+        }
+        resizedFrom = r.from;
+        // Re-stat for the post-resize size we'll show in the placeholder.
+        try {
+            stat = fs.statSync(out);
+        }
+        catch {
+            return null;
+        }
+        if (stat.size > MAX_CLIPBOARD_IMG_BYTES) {
+            // Defensive: if the resize somehow didn't bring it under the cap (highly
+            // unusual at 1280px JPEG q85), bail rather than ship an oversize payload.
+            try {
+                fs.unlinkSync(out);
+            }
+            catch { /* ok */ }
+            return { error: `Image still ${(stat.size / 1_000_000).toFixed(1)}MB after resize. Crop manually.` };
+        }
+    }
+    try {
+        const head = fs.readFileSync(out, { encoding: null }).subarray(0, 4);
+        const isPng = head[0] === 0x89 && head[1] === 0x50 && head[2] === 0x4e && head[3] === 0x47;
+        const isJpeg = head[0] === 0xff && head[1] === 0xd8 && head[2] === 0xff;
+        if (!isPng && !isJpeg) {
+            try {
+                fs.unlinkSync(out);
+            }
+            catch { /* ok */ }
+            return null;
+        }
+    }
+    catch {
+        return null;
+    }
+    return { path: out, bytes: stat.size, resizedFrom };
+}
+function pasteSummary(block) {
+    if (block.kind === 'image') {
+        // content is the absolute path; show the basename + size hint so the user
+        // can tell which image they pasted when they have several.
+        let sizeLabel = '';
+        try {
+            const stat = fs.statSync(block.content);
+            sizeLabel = stat.size >= 1024
+                ? ` ${(stat.size / 1024).toFixed(0)}KB`
+                : ` ${stat.size}B`;
+        }
+        catch { /* file gone? show without size */ }
+        return `[Image${sizeLabel}]`;
+    }
+    const lines = block.content.length === 0 ? 0 : block.content.split('\n').length;
     const lineLabel = lines > 1 ? `~${lines} lines` : '~1 line';
     return `[Pasted ${lineLabel}]`;
 }
@@ -93,7 +335,7 @@ function renderInputValue(value, cursorOffset, focused) {
             rendered += renderPlainInputSegment(value.slice(cursor, block.start), cursorOffset - cursor, focused && cursorOffset >= cursor && cursorOffset <= block.start);
             if (focused && cursorOffset === block.start)
                 rendered += chalk.inverse(' ');
-            rendered += chalk.hex(USER_PROMPT_COLOR).bold(pasteSummary(block.content));
+            rendered += chalk.hex(USER_PROMPT_COLOR).bold(pasteSummary(block));
             if (focused && cursorOffset === block.end)
                 rendered += chalk.inverse(' ');
             cursor = block.end;
@@ -201,12 +443,39 @@ function PromptTextInput({ value, onChange, onSubmit, placeholder = '', focus =
             if (!hasPasteEnd)
                 return;
             const buffered = pasteBufferRef.current;
-            const lineCount = buffered.length === 0 ? 0 : buffered.split('\n').length;
+            pasteBufferRef.current = '';
+            pasteActiveRef.current = false;
+            // Image-paste detection: terminals deliver Cmd+V as a bracketed paste,
+            // but image bytes don't ride that stream — Terminal/iTerm2 just fire an
+            // empty (or whitespace-only) bracketed paste, while the actual image
+            // sits in the system clipboard. So when the buffered text is empty we
+            // probe the clipboard before falling through to plain text handling.
+            // (No race vs. real paste content: pasted text always populates the
+            // buffer before END arrives, so non-empty buffer = certainly text.)
+            if (buffered.trim().length === 0) {
+                // Clipboard probe + optional resize are async; the input handler
+                // returns now and updateValue happens once the Promise resolves.
+                // Capture the cursor offset so the block goes where the user pasted,
+                // even if they moved the cursor in the meantime.
+                const insertAt = currentCursorOffset;
+                tryReadClipboardImage().then((img) => {
+                    let injected;
+                    if (img && 'path' in img)
+                        injected = encodeImageBlock(img.path);
+                    else if (img && 'error' in img)
+                        injected = `[Image rejected: ${img.error}] `;
+                    else
+                        return; // no image on clipboard — nothing to do
+                    const cur = valueRef.current;
+                    const at = Math.min(insertAt, cur.length);
+                    updateValue(cur.slice(0, at) + injected + cur.slice(at), at + injected.length);
+                }).catch(() => { });
+                return;
+            }
+            const lineCount = buffered.split('\n').length;
             text = lineCount >= PASTE_COLLAPSE_LINE_THRESHOLD
                 ? encodePasteBlock(buffered)
                 : buffered;
-            pasteBufferRef.current = '';
-            pasteActiveRef.current = false;
         }
         if (!text) {
             if (hasPasteEnd)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockrun/franklin",
-  "version": "3.24.4",
+  "version": "3.25.0",
   "description": "Franklin Agent — The AI agent with a wallet. Spends USDC autonomously to get real work done. Pay per action, no subscriptions.",
   "type": "module",
   "exports": {