@bike4mind/cli 0.2.3-fix-cli-usage-code-review.17058 → 0.2.3-gh-6002-image-drap-and-drop.17054

package/dist/ImageStore-LTOCD2N7.js

@@ -0,0 +1,207 @@
+#!/usr/bin/env node
+import "./chunk-PDX44BCA.js";
+
+// src/storage/ImageStore.ts
+import { createHash } from "crypto";
+import { mkdirSync, writeFileSync, readFileSync, existsSync, unlinkSync } from "fs";
+import { join, extname } from "path";
+import { homedir } from "os";
+import Database from "better-sqlite3";
+import sharp from "sharp";
+var ImageStore = class _ImageStore {
+  static {
+    this.BASE_DIR = join(homedir(), ".bike4mind", "cli");
+  }
+  static {
+    this.IMAGES_DIR = join(_ImageStore.BASE_DIR, "images");
+  }
+  static {
+    this.DB_PATH = join(_ImageStore.BASE_DIR, "images.db");
+  }
+  static {
+    this.RETENTION_DAYS = 7;
+  }
+  static {
+    // Target max size before base64 encoding. Base64 adds ~33% overhead.
+    // To stay under 1MB after base64, we need images < 750KB
+    this.MAX_RAW_SIZE = 750 * 1024;
+  }
+  constructor() {
+    this.ensureDirectories();
+    this.db = new Database(_ImageStore.DB_PATH);
+    this.initDatabase();
+    this.cleanupOldImages();
+  }
+  ensureDirectories() {
+    mkdirSync(_ImageStore.BASE_DIR, { recursive: true });
+    mkdirSync(_ImageStore.IMAGES_DIR, { recursive: true });
+  }
+  initDatabase() {
+    this.db.exec(`
+			CREATE TABLE IF NOT EXISTS images (
+				hash TEXT PRIMARY KEY,
+				format TEXT NOT NULL,
+				size INTEGER NOT NULL,
+				timestamp INTEGER NOT NULL,
+				uploaded INTEGER NOT NULL DEFAULT 0,
+				s3_url TEXT,
+				original_filename TEXT
+			)
+		`);
+  }
+  /**
+   * Store an image locally with content-based hashing for deduplication
+   */
+  async store(imageData, originalFilename) {
+    const { buffer: processedData, format: processedFormat } = await this.processImage(imageData, originalFilename);
+    const hash = this.generateHash(processedData);
+    const format = processedFormat;
+    const ext = format.toLowerCase();
+    const localPath = join(_ImageStore.IMAGES_DIR, `${hash}.${ext}`);
+    const existing = this.getMetadata(hash);
+    if (existing) {
+      return {
+        hash,
+        placeholder: "",
+        // Will be set by caller
+        localPath,
+        metadata: existing
+      };
+    }
+    writeFileSync(localPath, processedData);
+    const metadata = {
+      hash,
+      format,
+      size: processedData.length,
+      timestamp: Date.now(),
+      uploaded: false,
+      originalFilename
+    };
+    this.db.prepare(
+      `INSERT INTO images (hash, format, size, timestamp, uploaded, original_filename)
+				 VALUES (?, ?, ?, ?, ?, ?)`
+    ).run(hash, format, metadata.size, metadata.timestamp, 0, originalFilename || null);
+    return {
+      hash,
+      placeholder: "",
+      localPath,
+      metadata
+    };
+  }
+  /**
+   * Get image metadata by hash
+   */
+  getMetadata(hash) {
+    const row = this.db.prepare("SELECT * FROM images WHERE hash = ?").get(hash);
+    if (!row) return null;
+    return {
+      hash: row.hash,
+      format: row.format,
+      size: row.size,
+      timestamp: row.timestamp,
+      uploaded: Boolean(row.uploaded),
+      s3Url: row.s3_url,
+      originalFilename: row.original_filename
+    };
+  }
+  /**
+   * Read image data from local cache
+   */
+  readImage(hash) {
+    const metadata = this.getMetadata(hash);
+    if (!metadata) return null;
+    const localPath = join(_ImageStore.IMAGES_DIR, `${hash}.${metadata.format.toLowerCase()}`);
+    if (!existsSync(localPath)) return null;
+    return readFileSync(localPath);
+  }
+  /**
+   * Generate content hash for deduplication
+   */
+  generateHash(data) {
+    return createHash("sha256").update(data).digest("hex").substring(0, 16);
+  }
+  /**
+   * Process image: compress if needed to stay under size limit
+   */
+  async processImage(data, originalFilename) {
+    const originalFormat = this.detectFormat(data, originalFilename);
+    if (data.length <= _ImageStore.MAX_RAW_SIZE) {
+      return { buffer: data, format: originalFormat };
+    }
+    let image = sharp(data);
+    const metadata = await image.metadata();
+    if (!metadata.width || !metadata.height) {
+      throw new Error("Unable to read image dimensions");
+    }
+    const maxDimension = 2048;
+    let width = metadata.width;
+    let height = metadata.height;
+    if (width > maxDimension || height > maxDimension) {
+      if (width > height) {
+        height = Math.round(height * maxDimension / width);
+        width = maxDimension;
+      } else {
+        width = Math.round(width * maxDimension / height);
+        height = maxDimension;
+      }
+    }
+    image = image.resize(width, height);
+    let quality = 85;
+    let buffer = await image.jpeg({ quality }).toBuffer();
+    while (buffer.length > _ImageStore.MAX_RAW_SIZE && quality > 30) {
+      quality -= 10;
+      buffer = await image.jpeg({ quality }).toBuffer();
+    }
+    if (buffer.length > _ImageStore.MAX_RAW_SIZE) {
+      throw new Error(`Unable to compress image below ${_ImageStore.MAX_RAW_SIZE / 1024}KB limit`);
+    }
+    return { buffer, format: "jpg" };
+  }
+  /**
+   * Detect image format from buffer or filename
+   */
+  detectFormat(data, filename) {
+    if (data[0] === 137 && data[1] === 80 && data[2] === 78 && data[3] === 71) {
+      return "png";
+    }
+    if (data[0] === 255 && data[1] === 216 && data[2] === 255) {
+      return "jpg";
+    }
+    if (data[0] === 71 && data[1] === 73 && data[2] === 70) {
+      return "gif";
+    }
+    if (data[0] === 82 && data[1] === 73 && data[2] === 70 && data[3] === 70) {
+      return "webp";
+    }
+    if (filename) {
+      const ext = extname(filename).substring(1).toLowerCase();
+      if (["png", "jpg", "jpeg", "gif", "webp"].includes(ext)) {
+        return ext === "jpeg" ? "jpg" : ext;
+      }
+    }
+    return "png";
+  }
+  /**
+   * Clean up images older than retention period
+   */
+  cleanupOldImages() {
+    const cutoffTime = Date.now() - _ImageStore.RETENTION_DAYS * 24 * 60 * 60 * 1e3;
+    const oldImages = this.db.prepare("SELECT hash, format FROM images WHERE timestamp < ?").all(cutoffTime);
+    for (const { hash, format } of oldImages) {
+      const localPath = join(_ImageStore.IMAGES_DIR, `${hash}.${format.toLowerCase()}`);
+      if (existsSync(localPath)) {
+        unlinkSync(localPath);
+      }
+    }
+    this.db.prepare("DELETE FROM images WHERE timestamp < ?").run(cutoffTime);
+  }
+  /**
+   * Close database connection
+   */
+  close() {
+    this.db.close();
+  }
+};
+export {
+  ImageStore
+};

package/dist/index.js

@@ -408,6 +408,202 @@ function searchCommands(query) {
   return results.map((result) => result.item);
 }
 
+// src/utils/imageDetector.ts
+import { readFileSync, existsSync, statSync as statSync2 } from "fs";
+import { extname as extname2 } from "path";
+var ImageInputDetector = class {
+  static {
+    this.MAX_IMAGE_SIZE = 10 * 1024 * 1024;
+  }
+  static {
+    // 10MB
+    this.SUPPORTED_EXTENSIONS = [".png", ".jpg", ".jpeg", ".gif", ".webp"];
+  }
+  /**
+   * Check if input contains image data
+   */
+  static containsImageData(input) {
+    if (input.includes("\x1B]1337;File=")) {
+      return true;
+    }
+    if (input.includes("\x1B_G")) {
+      return true;
+    }
+    if (input.includes("\x1BP")) {
+      return true;
+    }
+    if (input.match(/data:image\/(png|jpeg|jpg|gif|webp);base64,/)) {
+      return true;
+    }
+    if (this.looksLikeFilePath(input)) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Extract image data from terminal input
+   */
+  static extractImageData(input) {
+    const iterm2 = this.extractITerm2Image(input);
+    if (iterm2) return iterm2;
+    const kitty = this.extractKittyImage(input);
+    if (kitty) return kitty;
+    const sixel = this.extractSixelImage(input);
+    if (sixel) return sixel;
+    const base64 = this.extractBase64Image(input);
+    if (base64) return base64;
+    const fileDrop = this.extractDroppedFile(input);
+    if (fileDrop) return fileDrop;
+    return null;
+  }
+  /**
+   * Extract iTerm2 inline image
+   * Format: ESC]1337;File=[args]:base64data^G
+   */
+  static extractITerm2Image(input) {
+    const match = input.match(/\x1b\]1337;File=([^:]*):([^\x07]+)\x07/);
+    if (!match) return null;
+    try {
+      const args = match[1];
+      const base64Data = match[2];
+      const data = Buffer.from(base64Data, "base64");
+      let format = "png";
+      const nameMatch = args.match(/name=([^;]+)/);
+      if (nameMatch) {
+        const ext = extname2(nameMatch[1]).substring(1).toLowerCase();
+        if (ext && this.SUPPORTED_EXTENSIONS.includes(`.${ext}`)) {
+          format = ext === "jpeg" ? "jpg" : ext;
+        }
+      }
+      return {
+        type: "paste",
+        data,
+        format,
+        protocol: "iterm2"
+      };
+    } catch (error) {
+      return null;
+    }
+  }
+  /**
+   * Extract Kitty graphics protocol image
+   * Format: ESC_Ga=T,f=100;base64data ESC\
+   */
+  static extractKittyImage(input) {
+    const match = input.match(/\x1b_G([^;]*);([^\x1b]+)\x1b\\/);
+    if (!match) return null;
+    try {
+      const params = match[1];
+      const base64Data = match[2];
+      const data = Buffer.from(base64Data, "base64");
+      let format = "png";
+      const formatMatch = params.match(/f=(\d+)/);
+      if (formatMatch) {
+        const formatCode = parseInt(formatMatch[1], 10);
+        if (formatCode === 100) format = "jpg";
+      }
+      return {
+        type: "paste",
+        data,
+        format,
+        protocol: "kitty"
+      };
+    } catch (error) {
+      return null;
+    }
+  }
+  /**
+   * Extract Sixel image
+   * Format: ESC P q ... ESC \
+   */
+  static extractSixelImage(input) {
+    const match = input.match(/\x1bP([^q]*q[^\x1b]+)\x1b\\/);
+    if (!match) return null;
+    return null;
+  }
+  /**
+   * Extract base64 data URL
+   * Format: data:image/png;base64,iVBORw0KGgo...
+   */
+  static extractBase64Image(input) {
+    const match = input.match(/data:image\/(png|jpeg|jpg|gif|webp);base64,([A-Za-z0-9+/=]+)/);
+    if (!match) return null;
+    try {
+      const format = match[1] === "jpeg" ? "jpg" : match[1];
+      const base64Data = match[2];
+      const data = Buffer.from(base64Data, "base64");
+      return {
+        type: "paste",
+        data,
+        format,
+        protocol: "base64"
+      };
+    } catch (error) {
+      return null;
+    }
+  }
+  /**
+   * Extract dropped file path and read image
+   */
+  static extractDroppedFile(input) {
+    if (!this.looksLikeFilePath(input)) return null;
+    let filepath = input.trim();
+    filepath = filepath.replace(/^["']|["']$/g, "");
+    filepath = filepath.replace(/\\\s/g, " ");
+    if (!existsSync(filepath)) return null;
+    const stats = statSync2(filepath);
+    if (!stats.isFile()) return null;
+    const ext = extname2(filepath).toLowerCase();
+    if (!this.SUPPORTED_EXTENSIONS.includes(ext)) return null;
+    if (stats.size > this.MAX_IMAGE_SIZE) return null;
+    try {
+      const data = readFileSync(filepath);
+      const format = ext.substring(1) === "jpeg" ? "jpg" : ext.substring(1);
+      const filename = filepath.split("/").pop() || "image";
+      return {
+        type: "drop",
+        data,
+        format,
+        filename,
+        filepath
+      };
+    } catch (error) {
+      return null;
+    }
+  }
+  /**
+   * Check if string looks like a file path
+   */
+  static looksLikeFilePath(input) {
+    const trimmed = input.trim();
+    if (trimmed.startsWith("/") || trimmed.match(/^[a-zA-Z]:\\/)) {
+      return true;
+    }
+    if (trimmed.startsWith("~")) {
+      return true;
+    }
+    if (this.SUPPORTED_EXTENSIONS.some((ext) => trimmed.toLowerCase().endsWith(ext))) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Remove image data from input string, leaving only text
+   */
+  static stripImageData(input) {
+    let cleaned = input;
+    cleaned = cleaned.replace(/\x1b\]1337;File=[^:]*:[^\x07]+\x07/g, "");
+    cleaned = cleaned.replace(/\x1b_G[^;]*;[^\x1b]+\x1b\\/g, "");
+    cleaned = cleaned.replace(/\x1bP[^q]*q[^\x1b]+\x1b\\/g, "");
+    cleaned = cleaned.replace(/data:image\/(png|jpeg|jpg|gif|webp);base64,[A-Za-z0-9+/=]+/g, "");
+    const filepath = this.extractDroppedFile(cleaned);
+    if (filepath) {
+      cleaned = cleaned.replace(filepath.filepath, "");
+    }
+    return cleaned.trim();
+  }
+};
+
 // src/components/InputPrompt.tsx
 function findAtTrigger(value) {
   for (let i = value.length - 1; i >= 0; i--) {
@@ -424,7 +620,7 @@ function findAtTrigger(value) {
   }
   return null;
 }
-function InputPrompt({ onSubmit, disabled = false, history = [] }) {
+function InputPrompt({ onSubmit, onImageDetected, disabled = false, history = [] }) {
   const [value, setValue] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [historyIndex, setHistoryIndex] = useState(-1);
@@ -545,7 +741,16 @@ function InputPrompt({ onSubmit, disabled = false, history = [] }) {
     setHistoryIndex(-1);
     setFileAutocomplete(null);
   };
-  const handleChange = (newValue) => {
+  const handleChange = async (newValue) => {
+    if (ImageInputDetector.containsImageData(newValue)) {
+      const imageEvent = ImageInputDetector.extractImageData(newValue);
+      if (imageEvent && onImageDetected) {
+        const placeholder = await onImageDetected(imageEvent.data);
+        setValue(`${placeholder} `);
+        setInputKey((prev) => prev + 1);
+        return;
+      }
+    }
     setValue(newValue);
     if (historyIndex !== -1) {
       setHistoryIndex(-1);
@@ -773,7 +978,7 @@ function hasFileReferences(message) {
 }
 
 // src/components/App.tsx
-function App({ onMessage, onCommand, onPermissionResponse, commandHistory = [] }) {
+function App({ onMessage, onCommand, onPermissionResponse, onImageDetected, commandHistory = [] }) {
   const messages = useCliStore((state) => state.session?.messages || []);
   const sessionName = useCliStore((state) => state.session?.name || "New Session");
   const currentModel = useCliStore((state) => state.session?.model || "claude-sonnet-4-5-20250929");
@@ -786,7 +991,7 @@ function App({ onMessage, onCommand, onPermissionResponse, commandHistory = [] }
     async (input) => {
       const trimmed = input.trim();
       if (!trimmed) return;
-      if (trimmed.startsWith("/")) {
+      if (trimmed.startsWith("/") && !trimmed.match(/^\/[A-Z]/)) {
         const [command, ...args] = trimmed.slice(1).split(" ");
         await onCommand(command, args);
         return;
@@ -820,7 +1025,15 @@ ${errorBlock}`;
       canBeTrusted: permissionPrompt.canBeTrusted,
       onResponse: onPermissionResponse
     }
-  )) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Static, { items: messages }, (message, index) => /* @__PURE__ */ React8.createElement(Box8, { key: index, flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React8.createElement(MessageItem, { message }))), /* @__PURE__ */ React8.createElement(AgentThinking, null), exitRequested && /* @__PURE__ */ React8.createElement(Box8, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React8.createElement(Text7, { color: "yellow", bold: true }, "\u26A0\uFE0F Press Ctrl+C again to exit")), /* @__PURE__ */ React8.createElement(Box8, { borderStyle: "single", borderColor: "cyan", paddingX: 1 }, /* @__PURE__ */ React8.createElement(InputPrompt, { onSubmit: handleSubmit, disabled: isThinking, history: commandHistory }))));
+  )) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Static, { items: messages }, (message, index) => /* @__PURE__ */ React8.createElement(Box8, { key: index, flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React8.createElement(MessageItem, { message }))), /* @__PURE__ */ React8.createElement(AgentThinking, null), exitRequested && /* @__PURE__ */ React8.createElement(Box8, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React8.createElement(Text7, { color: "yellow", bold: true }, "\u26A0\uFE0F Press Ctrl+C again to exit")), /* @__PURE__ */ React8.createElement(Box8, { borderStyle: "single", borderColor: "cyan", paddingX: 1 }, /* @__PURE__ */ React8.createElement(
+    InputPrompt,
+    {
+      onSubmit: handleSubmit,
+      onImageDetected,
+      disabled: isThinking,
+      history: commandHistory
+    }
+  ))));
 }
 function MessageItem({ message }) {
   return /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React8.createElement(Box8, null, /* @__PURE__ */ React8.createElement(Text7, { bold: true, color: message.role === "user" ? "cyan" : "green" }, message.role === "user" ? "\u{1F464} You" : "\u{1F916} Assistant"), /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, " \u2022 ", new Date(message.timestamp).toLocaleTimeString())), /* @__PURE__ */ React8.createElement(Box8, { paddingLeft: 2 }, message.metadata?.permissionDenied ? /* @__PURE__ */ React8.createElement(Text7, { color: "yellow" }, "\u26A0\uFE0F ", message.content) : /* @__PURE__ */ React8.createElement(Text7, null, message.content)), message.metadata?.steps && message.metadata.steps.length > 0 && /* @__PURE__ */ React8.createElement(Box8, { paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React8.createElement(Text7, { dimColor: true, bold: true }, "\u{1F527} Agent Reasoning Trace (", message.metadata.steps.filter((s) => s.type === "action").length, " ", "tools used, ", message.metadata.steps.length, " total steps)", message.metadata.tokenUsage && ` \u2022 ${message.metadata.tokenUsage.total} tokens`), /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, "Step types: ", message.metadata.steps.map((s) => s.type).join(", ")), message.metadata.steps.map((step, idx) => {
@@ -1632,7 +1845,7 @@ var ReActAgent = class extends EventEmitter {
   /**
    * Run the agent to completion
    *
-   * @param query - The user's question or task
+   * @param query - The user's question or task (can be text or multimodal content with images)
    * @param options - Optional overrides for this run
    * @returns Agent result with final answer and all steps
    */
@@ -7081,7 +7294,7 @@ var planetVisibilityTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/fileRead/index.js
 import { promises as fs7 } from "fs";
-import { existsSync as existsSync2, statSync as statSync3 } from "fs";
+import { existsSync as existsSync3, statSync as statSync4 } from "fs";
 import path6 from "path";
 var MAX_FILE_SIZE2 = 10 * 1024 * 1024;
 async function readFileContent(params) {
@@ -7092,10 +7305,10 @@ async function readFileContent(params) {
   if (!resolvedPath.startsWith(cwd)) {
     throw new Error(`Access denied: Cannot read files outside of current working directory`);
   }
-  if (!existsSync2(resolvedPath)) {
+  if (!existsSync3(resolvedPath)) {
     throw new Error(`File not found: ${filePath}`);
   }
-  const stats = statSync3(resolvedPath);
+  const stats = statSync4(resolvedPath);
   if (stats.isDirectory()) {
     throw new Error(`Path is a directory, not a file: ${filePath}`);
   }
@@ -7138,7 +7351,7 @@ var fileReadTool = {
       context.logger.info("\u{1F4C4} FileRead: Reading file", { path: params.path });
       try {
         const content = await readFileContent(params);
-        const stats = statSync3(path6.resolve(process.cwd(), path6.normalize(params.path)));
+        const stats = statSync4(path6.resolve(process.cwd(), path6.normalize(params.path)));
         context.logger.info("\u2705 FileRead: Success", {
           path: params.path,
           size: stats.size,
@@ -7178,7 +7391,7 @@ var fileReadTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/createFile/index.js
 import { promises as fs8 } from "fs";
-import { existsSync as existsSync3 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 import path7 from "path";
 async function createFile(params) {
   const { path: filePath, content, createDirectories = true } = params;
@@ -7188,7 +7401,7 @@ async function createFile(params) {
   if (!resolvedPath.startsWith(cwd)) {
     throw new Error(`Access denied: Cannot create files outside of current working directory`);
   }
-  const fileExists = existsSync3(resolvedPath);
+  const fileExists = existsSync4(resolvedPath);
   const action = fileExists ? "overwritten" : "created";
   if (createDirectories) {
     const dir = path7.dirname(resolvedPath);
@@ -7206,7 +7419,7 @@ var createFileTool = {
   implementation: (context) => ({
     toolFn: async (value) => {
       const params = value;
-      const fileExists = existsSync3(path7.resolve(process.cwd(), path7.normalize(params.path)));
+      const fileExists = existsSync4(path7.resolve(process.cwd(), path7.normalize(params.path)));
       context.logger.info(`\u{1F4DD} CreateFile: ${fileExists ? "Overwriting" : "Creating"} file`, {
         path: params.path,
         size: params.content.length
@@ -7247,7 +7460,7 @@ var createFileTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/globFiles/index.js
 import { readdir } from "fs/promises";
-import { statSync as statSync4 } from "fs";
+import { statSync as statSync5 } from "fs";
 import path8 from "path";
 function matchGlob(filePath, pattern) {
   let regexPattern = pattern.replace(/\./g, "\\.").replace(/\*\*/g, "{{GLOBSTAR}}").replace(/\*/g, "[^/]*").replace(/\?/g, ".").replace(/\{([^}]+)\}/g, (_, options) => `(${options.split(",").join("|")})`).replace(/\[([^\]]+)\]/g, "[$1]");
@@ -7295,7 +7508,7 @@ async function listFiles(params) {
   for (const match of matches) {
     try {
       const fullPath = path8.join(targetCwd, match);
-      const stats = statSync4(fullPath);
+      const stats = statSync5(fullPath);
       filesInfo.push({
         path: match,
         size: stats.size,
@@ -7376,7 +7589,7 @@ var globFilesTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/grepSearch/index.js
 import { readdir as readdir2 } from "fs/promises";
-import { readFileSync as readFileSync2, statSync as statSync5 } from "fs";
+import { readFileSync as readFileSync3, statSync as statSync6 } from "fs";
 import path9 from "path";
 var MAX_FILE_SIZE3 = 10 * 1024 * 1024;
 function matchGlob2(filePath, pattern) {
@@ -7428,7 +7641,7 @@ async function searchFiles2(params) {
   for (const match of filesToSearch) {
     const fullPath = path9.join(targetCwd, match);
     try {
-      const stats = statSync5(fullPath);
+      const stats = statSync6(fullPath);
       if (stats.isDirectory() || stats.size > MAX_FILE_SIZE3) {
         continue;
       }
@@ -7452,7 +7665,7 @@ async function searchFiles2(params) {
     filesSearched++;
     const fullPath = path9.join(targetCwd, file);
     try {
-      const content = readFileSync2(fullPath, "utf-8");
+      const content = readFileSync3(fullPath, "utf-8");
       const lines = content.split("\n");
       for (let i = 0; i < lines.length; i++) {
         if (matches.length >= maxResults) {
@@ -7586,7 +7799,7 @@ var grepSearchTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/deleteFile/index.js
 import { promises as fs9 } from "fs";
-import { existsSync as existsSync4, statSync as statSync6 } from "fs";
+import { existsSync as existsSync5, statSync as statSync7 } from "fs";
 import path10 from "path";
 async function deleteFile(params) {
   const { path: filePath, recursive = false } = params;
@@ -7596,10 +7809,10 @@ async function deleteFile(params) {
   if (!resolvedPath.startsWith(cwd)) {
     throw new Error(`Access denied: Cannot delete files outside of current working directory`);
   }
-  if (!existsSync4(resolvedPath)) {
+  if (!existsSync5(resolvedPath)) {
     throw new Error(`File or directory not found: ${filePath}`);
   }
-  const stats = statSync6(resolvedPath);
+  const stats = statSync7(resolvedPath);
   const isDirectory = stats.isDirectory();
   const size = stats.size;
   if (isDirectory && !recursive) {
@@ -7620,7 +7833,7 @@ var deleteFileTool = {
     toolFn: async (value) => {
       const params = value;
       const resolvedPath = path10.resolve(process.cwd(), path10.normalize(params.path));
-      const isDirectory = existsSync4(resolvedPath) && statSync6(resolvedPath).isDirectory();
+      const isDirectory = existsSync5(resolvedPath) && statSync7(resolvedPath).isDirectory();
       context.logger.info(`\u{1F5D1}\uFE0F  DeleteFile: Deleting ${isDirectory ? "directory" : "file"}`, {
         path: params.path,
         recursive: params.recursive
@@ -7910,10 +8123,10 @@ import jwt2 from "jsonwebtoken";
 // src/utils/diffPreview.ts
 import * as Diff from "diff";
 import { readFile } from "fs/promises";
-import { existsSync as existsSync5 } from "fs";
+import { existsSync as existsSync6 } from "fs";
 async function generateFileDiffPreview(args) {
   try {
-    if (!existsSync5(args.path)) {
+    if (!existsSync6(args.path)) {
       const lines2 = args.content.split("\n");
       const preview = lines2.slice(0, 20).join("\n");
       const hasMore = lines2.length > 20;
@@ -7943,7 +8156,7 @@ ${preview}${hasMore ? `
 }
 async function generateFileDeletePreview(args) {
   try {
-    if (!existsSync5(args.path)) {
+    if (!existsSync6(args.path)) {
       return `[File does not exist: ${args.path}]`;
     }
     const stats = await import("fs/promises").then((fs11) => fs11.stat(args.path));
@@ -8560,7 +8773,7 @@ var logger = Logger2.getInstance();
 import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { Client as Client2 } from "@modelcontextprotocol/sdk/client/index.js";
 import path12 from "path";
-import { existsSync as existsSync6, readdirSync as readdirSync3 } from "fs";
+import { existsSync as existsSync7, readdirSync as readdirSync3 } from "fs";
 var MCPClient = class {
   // Note: This class handles MCP server communication with repository filtering
   mcp;
@@ -8596,7 +8809,7 @@ var MCPClient = class {
         path12.join(root, `/b4m-core/packages/mcp/dist/src/${this.serverName}/index.js`),
         path12.join(root, "core", "mcp", "servers", this.serverName, "dist", "index.js")
       ];
-      const serverScriptPath = candidatePaths.find((p) => existsSync6(p));
+      const serverScriptPath = candidatePaths.find((p) => existsSync7(p));
       if (!serverScriptPath) {
         const getDirectories = (source) => readdirSync3(source, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
         console.error(`[MCP] Server script not found. Tried paths:`, candidatePaths);
@@ -8792,6 +9005,190 @@ var McpManager = class {
   }
 };
 
+// src/utils/imageRenderer.ts
+var ImageRenderer = class {
+  constructor() {
+    this.imageCounter = 0;
+    this.placeholderMap = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Generate placeholder for a new image
+   */
+  createPlaceholder(hash) {
+    const existing = this.placeholderMap.get(hash);
+    if (existing) {
+      return existing.placeholder;
+    }
+    this.imageCounter++;
+    const placeholder = `[Image ${this.imageCounter}]`;
+    this.placeholderMap.set(hash, {
+      hash,
+      number: this.imageCounter,
+      placeholder
+    });
+    return placeholder;
+  }
+  /**
+   * Get all image hashes from a message containing placeholders
+   */
+  extractImageHashes(message) {
+    const hashes = [];
+    const placeholderRegex = /\[Image \d+\]/g;
+    const matches = message.match(placeholderRegex);
+    if (!matches) return hashes;
+    for (const [hash, data] of this.placeholderMap.entries()) {
+      if (matches.includes(data.placeholder)) {
+        hashes.push(hash);
+      }
+    }
+    return hashes;
+  }
+  /**
+   * Get hash by placeholder text
+   */
+  getHashFromPlaceholder(placeholder) {
+    for (const [hash, data] of this.placeholderMap.entries()) {
+      if (data.placeholder === placeholder) {
+        return hash;
+      }
+    }
+    return null;
+  }
+};
+
+// src/utils/messageBuilder.ts
+var MessageBuilder = class {
+  constructor(imageStore, imageRenderer) {
+    this.imageStore = imageStore;
+    this.imageRenderer = imageRenderer;
+  }
+  /**
+   * Build a multimodal message from user input
+   * Extracts image placeholders and creates proper message structure with base64-encoded images
+   */
+  async buildMessage(userInput, role = "user") {
+    const imageHashes = this.imageRenderer.extractImageHashes(userInput);
+    if (imageHashes.length === 0) {
+      return {
+        message: {
+          role,
+          content: userInput
+        },
+        uploadedImages: []
+      };
+    }
+    const content = [];
+    const parts = this.splitMessageByPlaceholders(userInput);
+    for (const part of parts) {
+      if (part.type === "text" && part.content.trim()) {
+        content.push({
+          type: "text",
+          text: part.content
+        });
+      } else if (part.type === "image") {
+        const hash = this.imageRenderer.getHashFromPlaceholder(part.content);
+        if (hash) {
+          const imageData = this.imageStore.readImage(hash);
+          const metadata = this.imageStore.getMetadata(hash);
+          if (imageData && metadata) {
+            const base64Data = imageData.toString("base64");
+            const mediaType = this.getMediaType(metadata.format);
+            content.push({
+              type: "image",
+              source: {
+                type: "base64",
+                media_type: mediaType,
+                data: base64Data
+              }
+            });
+          }
+        }
+      }
+    }
+    return {
+      message: {
+        role,
+        content
+      },
+      uploadedImages: []
+    };
+  }
+  /**
+   * Get MIME type for image format
+   */
+  getMediaType(format) {
+    switch (format.toLowerCase()) {
+      case "png":
+        return "image/png";
+      case "jpg":
+      case "jpeg":
+        return "image/jpeg";
+      case "gif":
+        return "image/gif";
+      case "webp":
+        return "image/webp";
+      default:
+        return "image/png";
+    }
+  }
+  /**
+   * Split message text by image placeholders
+   * Returns array of text and image parts in order
+   */
+  splitMessageByPlaceholders(message) {
+    const parts = [];
+    const placeholderRegex = /(\[Image \d+\])/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = placeholderRegex.exec(message)) !== null) {
+      if (match.index > lastIndex) {
+        const text = message.substring(lastIndex, match.index);
+        if (text) {
+          parts.push({ type: "text", content: text });
+        }
+      }
+      parts.push({ type: "image", content: match[0] });
+      lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < message.length) {
+      const text = message.substring(lastIndex);
+      if (text) {
+        parts.push({ type: "text", content: text });
+      }
+    }
+    if (parts.length === 0) {
+      parts.push({ type: "text", content: message });
+    }
+    return parts;
+  }
+  /**
+   * Check if a message contains images
+   */
+  hasImages(message) {
+    return this.imageRenderer.extractImageHashes(message).length > 0;
+  }
+  /**
+   * Convert multimodal message back to simple string (for display/logging)
+   */
+  messageToString(message) {
+    if (typeof message.content === "string") {
+      return message.content;
+    }
+    return message.content.map((item) => {
+      if (item.type === "text") {
+        return item.text;
+      } else if (item.type === "image") {
+        if (item.source.type === "url") {
+          return `[Image: ${item.source.url}]`;
+        } else {
+          return `[Image: base64 ${item.source.media_type}]`;
+        }
+      }
+      return "";
+    }).join("");
+  }
+};
+
 // src/llm/ServerLlmBackend.ts
 import { createParser } from "eventsource-parser";
 import { isAxiosError } from "axios";
@@ -9178,7 +9575,7 @@ import { isAxiosError as isAxiosError2 } from "axios";
 // package.json
 var package_default = {
   name: "@bike4mind/cli",
-  version: "0.2.3-fix-cli-usage-code-review.17058+2e5763de7",
+  version: "0.2.3-gh-6002-image-drap-and-drop.17054+b020a80ef",
   type: "module",
   description: "Interactive CLI tool for Bike4Mind with ReAct agents",
   license: "UNLICENSED",
@@ -9239,6 +9636,7 @@ var package_default = {
     "async-mutex": "^0.5.0",
     axios: "^1.13.2",
     bcryptjs: "^2.4.3",
+    "better-sqlite3": "^12.5.0",
     cheerio: "1.0.0-rc.12",
     "csv-parse": "^5.5.6",
     dayjs: "^1.11.13",
@@ -9264,7 +9662,7 @@ var package_default = {
     "p-limit": "^6.2.0",
     qrcode: "^1.5.4",
     react: "^19.2.3",
-    sharp: "^0.32.6",
+    sharp: "^0.34.5",
     speakeasy: "^2.0.0",
     tiktoken: "^1.0.16",
     turndown: "^7.2.0",
@@ -9280,10 +9678,11 @@ var package_default = {
   },
   devDependencies: {
     "@bike4mind/agents": "0.1.0",
-    "@bike4mind/common": "2.37.1-fix-cli-usage-code-review.17058+2e5763de7",
-    "@bike4mind/mcp": "1.19.5-fix-cli-usage-code-review.17058+2e5763de7",
-    "@bike4mind/services": "2.31.1-fix-cli-usage-code-review.17058+2e5763de7",
-    "@bike4mind/utils": "2.0.4-fix-cli-usage-code-review.17058+2e5763de7",
+    "@bike4mind/common": "2.37.1-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@bike4mind/mcp": "1.19.5-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@bike4mind/services": "2.31.1-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@bike4mind/utils": "2.0.4-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@types/better-sqlite3": "^7.6.12",
     "@types/diff": "^5.0.9",
     "@types/jsonwebtoken": "^9.0.4",
     "@types/node": "^22.9.0",
@@ -9295,7 +9694,7 @@ var package_default = {
     typescript: "^5.9.3",
     vitest: "^3.2.4"
   },
-  gitHead: "2e5763de75948174c0c15633b8107371b0365e24"
+  gitHead: "b020a80effadbb22c7e0e14fcb99b9368df71f83"
 };
 
 // src/config/constants.ts
@@ -9316,11 +9715,16 @@ var EXIT_TIMEOUT_MS = 2e3;
 var usageCache = null;
 function CliApp() {
   const { exit } = useApp();
+  const imageRenderer = new ImageRenderer();
   const [state, setState] = useState3({
     session: null,
     sessionStore: new SessionStore(),
     configStore: new ConfigStore(),
     commandHistoryStore: new CommandHistoryStore(),
+    imageStore: null,
+    // Lazy-loaded on first use
+    imageRenderer,
+    messageBuilder: null,
     agent: null,
     mcpManager: null,
     permissionManager: null,
@@ -9351,6 +9755,13 @@ function CliApp() {
     if (state.agent) {
       state.agent.removeAllListeners();
     }
+    if (state.imageStore) {
+      try {
+        state.imageStore.close();
+      } catch (err) {
+        logger.debug(`[CLEANUP] Image store close error: ${err}`);
+      }
+    }
     await Promise.race([
       Promise.all(cleanupTasks),
       new Promise((resolve3) => setTimeout(resolve3, 500))
@@ -9359,7 +9770,7 @@ function CliApp() {
     setTimeout(() => {
       process.exit(0);
     }, 100);
-  }, [state.session, state.sessionStore, state.mcpManager, state.agent]);
+  }, [state.session, state.sessionStore, state.mcpManager, state.agent, state.imageStore]);
   useInput2((input, key) => {
     if (key.ctrl && input === "c") {
       const now = Date.now();
@@ -9609,9 +10020,16 @@ Remember: Use context from previous messages to understand follow-up questions.`
       return;
     }
     try {
+      let messageContent = message;
+      let userMessageContent = message;
+      if (state.messageBuilder && state.messageBuilder.hasImages(message)) {
+        const { message: multimodalMessage } = await state.messageBuilder.buildMessage(message);
+        messageContent = multimodalMessage.content;
+        userMessageContent = message;
+      }
       const userMessage = {
         role: "user",
-        content: message,
+        content: userMessageContent,
         timestamp: (/* @__PURE__ */ new Date()).toISOString()
       };
       const recentMessages = state.session.messages.slice(-20);
@@ -9619,7 +10037,7 @@ Remember: Use context from previous messages to understand follow-up questions.`
         role: msg.role,
         content: msg.content
       }));
-      const result = await state.agent.run(message, {
+      const result = await state.agent.run(messageContent, {
         previousMessages: previousMessages.length > 0 ? previousMessages : void 0
       });
       const permissionDenied = result.finalAnswer.startsWith("Permission denied for tool");
@@ -9668,6 +10086,29 @@ Remember: Use context from previous messages to understand follow-up questions.`
       console.error("Error processing message:", error);
     }
   };
+  const handleImageDetected = async (imageData) => {
+    try {
+      let imageStore = state.imageStore;
+      if (!imageStore) {
+        const { ImageStore: ImageStoreClass } = await import("./ImageStore-LTOCD2N7.js");
+        imageStore = new ImageStoreClass();
+        setState((prev) => ({
+          ...prev,
+          imageStore,
+          messageBuilder: new MessageBuilder(imageStore, prev.imageRenderer)
+        }));
+      }
+      const imageRef = await imageStore.store(imageData);
+      const imagePlaceholder = state.imageRenderer.createPlaceholder(imageRef.hash);
+      console.log(`
+\u2713 Image detected and stored: ${imagePlaceholder}
+`);
+      return imagePlaceholder;
+    } catch (error) {
+      console.error("Error storing image:", error);
+      throw error;
+    }
+  };
   const handleCommand = async (command, args) => {
     switch (command) {
       case "help":
@@ -9833,7 +10274,6 @@ Tool Permissions:
         setState((prev) => ({ ...prev, showLoginFlow: true }));
         break;
       case "logout":
-        usageCache = null;
         await state.configStore.clearAuthTokens();
         console.log("\u2705 Successfully logged out");
         break;
@@ -9873,9 +10313,6 @@ Tool Permissions:
               apiClient.get("/api/identify"),
               apiClient.get(`/api/credits/transactions?days=${USAGE_DAYS}`)
             ]);
-            if (!identifyResponse?.user?.currentCredits && identifyResponse?.user?.currentCredits !== 0) {
-              throw new Error("Invalid response format from /api/identify");
-            }
             currentCredits = identifyResponse.user.currentCredits;
             transactions = transactionsResponse || [];
             usageCache = {
@@ -9990,6 +10427,7 @@ No usage data available for the last ${USAGE_DAYS} days.`);
     {
       onMessage: handleMessage,
       onCommand: handleCommand,
+      onImageDetected: handleImageDetected,
       commandHistory,
       onPermissionResponse: (response) => {
         if (state.permissionPrompt) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bike4mind/cli",
-  "version": "0.2.3-fix-cli-usage-code-review.17058+2e5763de7",
+  "version": "0.2.3-gh-6002-image-drap-and-drop.17054+b020a80ef",
   "type": "module",
   "description": "Interactive CLI tool for Bike4Mind with ReAct agents",
   "license": "UNLICENSED",
@@ -61,6 +61,7 @@
     "async-mutex": "^0.5.0",
     "axios": "^1.13.2",
     "bcryptjs": "^2.4.3",
+    "better-sqlite3": "^12.5.0",
     "cheerio": "1.0.0-rc.12",
     "csv-parse": "^5.5.6",
     "dayjs": "^1.11.13",
@@ -86,7 +87,7 @@
     "p-limit": "^6.2.0",
     "qrcode": "^1.5.4",
     "react": "^19.2.3",
-    "sharp": "^0.32.6",
+    "sharp": "^0.34.5",
     "speakeasy": "^2.0.0",
     "tiktoken": "^1.0.16",
     "turndown": "^7.2.0",
@@ -102,10 +103,11 @@
   },
   "devDependencies": {
     "@bike4mind/agents": "0.1.0",
-    "@bike4mind/common": "2.37.1-fix-cli-usage-code-review.17058+2e5763de7",
-    "@bike4mind/mcp": "1.19.5-fix-cli-usage-code-review.17058+2e5763de7",
-    "@bike4mind/services": "2.31.1-fix-cli-usage-code-review.17058+2e5763de7",
-    "@bike4mind/utils": "2.0.4-fix-cli-usage-code-review.17058+2e5763de7",
+    "@bike4mind/common": "2.37.1-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@bike4mind/mcp": "1.19.5-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@bike4mind/services": "2.31.1-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@bike4mind/utils": "2.0.4-gh-6002-image-drap-and-drop.17054+b020a80ef",
+    "@types/better-sqlite3": "^7.6.12",
     "@types/diff": "^5.0.9",
     "@types/jsonwebtoken": "^9.0.4",
     "@types/node": "^22.9.0",
@@ -117,5 +119,5 @@
     "typescript": "^5.9.3",
     "vitest": "^3.2.4"
   },
-  "gitHead": "2e5763de75948174c0c15633b8107371b0365e24"
+  "gitHead": "b020a80effadbb22c7e0e14fcb99b9368df71f83"
 }