@bike4mind/cli 0.2.6-fix-cli-mcp-type-mismatch.17119 → 0.2.7-basic-cli-shortcuts.17131

package/dist/index.js

@@ -79,13 +79,13 @@ import {
 } from "./chunk-PDX44BCA.js";
 
 // src/index.tsx
-import React13, { useState as useState4, useEffect as useEffect3, useCallback } from "react";
-import { render, Box as Box13, Text as Text12, useApp, useInput as useInput3 } from "ink";
+import React14, { useState as useState5, useEffect as useEffect3, useCallback, useRef } from "react";
+import { render, Box as Box13, Text as Text13, useApp, useInput as useInput4 } from "ink";
 import { v4 as uuidv49 } from "uuid";
 
 // src/components/App.tsx
-import React9 from "react";
-import { Box as Box9, Text as Text8, Static } from "ink";
+import React10 from "react";
+import { Box as Box9, Text as Text9, Static } from "ink";
 
 // src/components/StatusBar.tsx
 import React from "react";
@@ -95,27 +95,127 @@ var StatusBar = React.memo(function StatusBar2({ sessionName, model, tokenUsage
 });
 
 // src/components/InputPrompt.tsx
-import React4, { useState, useMemo, useEffect } from "react";
-import { Box as Box4, Text as Text4, useInput } from "ink";
-import TextInput from "ink-text-input";
+import React5, { useState as useState2, useMemo, useEffect } from "react";
+import { Box as Box4, Text as Text5, useInput as useInput2 } from "ink";
+
+// src/components/CustomTextInput.tsx
+import React2, { useState } from "react";
+import { Text as Text2, useInput } from "ink";
+function CustomTextInput({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "",
+  showCursor = true
+}) {
+  const [cursorOffset, setCursorOffset] = useState(value.length);
+  useInput(
+    (input, key) => {
+      if (key.return && !key.meta && !key.shift) {
+        onSubmit(value);
+        return;
+      }
+      if (key.ctrl) {
+        switch (input) {
+          case "u":
+            {
+              const lines = value.split("\n");
+              let currentLineStart = 0;
+              let currentLineIndex = 0;
+              let charCount = 0;
+              for (let i = 0; i < lines.length; i++) {
+                const lineLength = lines[i].length;
+                if (charCount + lineLength >= cursorOffset) {
+                  currentLineIndex = i;
+                  currentLineStart = charCount;
+                  break;
+                }
+                charCount += lineLength + 1;
+              }
+              lines.splice(currentLineIndex, 1);
+              const newValue = lines.join("\n");
+              onChange(newValue);
+              setCursorOffset(Math.min(currentLineStart, newValue.length));
+            }
+            return;
+          case "k":
+            onChange(value.slice(0, cursorOffset));
+            return;
+          case "w":
+            {
+              const beforeCursor2 = value.slice(0, cursorOffset);
+              const afterCursor2 = value.slice(cursorOffset);
+              const trimmed = beforeCursor2.trimEnd();
+              const lastSpace = trimmed.lastIndexOf(" ");
+              const newBefore = lastSpace === -1 ? "" : trimmed.slice(0, lastSpace + 1);
+              const newValue = newBefore + afterCursor2;
+              onChange(newValue);
+              setCursorOffset(newBefore.length);
+            }
+            return;
+          case "a":
+            setCursorOffset(0);
+            return;
+          case "e":
+            setCursorOffset(value.length);
+            return;
+          case "l":
+            onChange("");
+            return;
+        }
+      }
+      if (key.backspace || key.delete) {
+        if (cursorOffset > 0) {
+          const newValue = value.slice(0, cursorOffset - 1) + value.slice(cursorOffset);
+          onChange(newValue);
+          setCursorOffset(cursorOffset - 1);
+        }
+        return;
+      }
+      if (key.leftArrow) {
+        setCursorOffset(Math.max(0, cursorOffset - 1));
+        return;
+      }
+      if (key.rightArrow) {
+        setCursorOffset(Math.min(value.length, cursorOffset + 1));
+        return;
+      }
+      if (!key.ctrl && !key.meta && input.length === 1) {
+        const sanitizedInput = input === "\r" ? "\n" : input;
+        const newValue = value.slice(0, cursorOffset) + sanitizedInput + value.slice(cursorOffset);
+        onChange(newValue);
+        setCursorOffset(cursorOffset + 1);
+      }
+    },
+    { isActive: true }
+  );
+  const hasValue = value.length > 0;
+  if (!hasValue) {
+    return /* @__PURE__ */ React2.createElement(Text2, null, showCursor ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Text2, { inverse: true }, " "), /* @__PURE__ */ React2.createElement(Text2, { dimColor: true }, placeholder)) : /* @__PURE__ */ React2.createElement(Text2, { dimColor: true }, placeholder));
+  }
+  const beforeCursor = value.slice(0, cursorOffset);
+  const cursorChar = value[cursorOffset] || " ";
+  const afterCursor = value.slice(cursorOffset + 1);
+  return /* @__PURE__ */ React2.createElement(Text2, null, beforeCursor, showCursor && /* @__PURE__ */ React2.createElement(Text2, { inverse: true }, cursorChar), !showCursor && cursorChar, afterCursor);
+}
 
 // src/components/CommandAutocomplete.tsx
-import React2 from "react";
-import { Box as Box2, Text as Text2 } from "ink";
+import React3 from "react";
+import { Box as Box2, Text as Text3 } from "ink";
 function CommandAutocomplete({ commands, selectedIndex }) {
   if (commands.length === 0) {
-    return /* @__PURE__ */ React2.createElement(Box2, { marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React2.createElement(Text2, { dimColor: true }, "No matching commands"));
+    return /* @__PURE__ */ React3.createElement(Box2, { marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "No matching commands"));
   }
-  return /* @__PURE__ */ React2.createElement(Box2, { flexDirection: "column", marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React2.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React2.createElement(Text2, { dimColor: true }, commands.length === 1 ? "1 command" : `${commands.length} commands`, " \u2022 Use \u2191\u2193 to navigate, Enter to select")), commands.map((cmd, index) => {
+  return /* @__PURE__ */ React3.createElement(Box2, { flexDirection: "column", marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React3.createElement(Box2, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, commands.length === 1 ? "1 command" : `${commands.length} commands`, " \u2022 Use \u2191\u2193 to navigate, Enter to select")), commands.map((cmd, index) => {
     const args = cmd.args ? ` ${cmd.args}` : "";
     const isSelected = index === selectedIndex;
-    return /* @__PURE__ */ React2.createElement(Box2, { key: cmd.name, marginLeft: 1 }, /* @__PURE__ */ React2.createElement(Text2, { color: isSelected ? "cyan" : void 0, bold: isSelected }, isSelected ? "\u25B8 " : "  ", "/", cmd.name, args, " - ", cmd.description));
+    return /* @__PURE__ */ React3.createElement(Box2, { key: cmd.name, marginLeft: 1 }, /* @__PURE__ */ React3.createElement(Text3, { color: isSelected ? "cyan" : void 0, bold: isSelected }, isSelected ? "\u25B8 " : "  ", "/", cmd.name, args, " - ", cmd.description));
   }));
 }
 
 // src/components/FileAutocomplete.tsx
-import React3 from "react";
-import { Box as Box3, Text as Text3 } from "ink";
+import React4 from "react";
+import { Box as Box3, Text as Text4 } from "ink";
 
 // src/utils/fileSearch.ts
 import * as fs from "fs";
@@ -304,14 +404,14 @@ var MAX_FILE_SIZE = 10 * 1024 * 1024;
 // src/components/FileAutocomplete.tsx
 function FileAutocomplete({ files, selectedIndex, query }) {
   if (files.length === 0) {
-    return /* @__PURE__ */ React3.createElement(Box3, { marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, "No matching files", query ? ` for "${query}"` : ""));
+    return /* @__PURE__ */ React4.createElement(Box3, { marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, "No matching files", query ? ` for "${query}"` : ""));
   }
-  return /* @__PURE__ */ React3.createElement(Box3, { flexDirection: "column", marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React3.createElement(Box3, { marginBottom: 1 }, /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, files.length === 1 ? "1 match" : `${files.length} matches`, " - Use up/down to navigate, Tab to select")), files.map((file, index) => {
+  return /* @__PURE__ */ React4.createElement(Box3, { flexDirection: "column", marginLeft: 2, marginTop: 1 }, /* @__PURE__ */ React4.createElement(Box3, { marginBottom: 1 }, /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, files.length === 1 ? "1 match" : `${files.length} matches`, " - Use up/down to navigate, Tab to select")), files.map((file, index) => {
     const isSelected = index === selectedIndex;
     const icon = file.isDirectory ? "[folder]" : "[file]  ";
     const sizeDisplay = file.isDirectory ? "" : file.size !== void 0 ? ` (${formatFileSize(file.size)})` : "";
     const pathDisplay = file.isDirectory ? `${file.path}/` : file.path;
-    return /* @__PURE__ */ React3.createElement(Box3, { key: file.path, marginLeft: 1 }, /* @__PURE__ */ React3.createElement(Text3, { color: isSelected ? "cyan" : void 0, bold: isSelected }, isSelected ? "> " : "  "), /* @__PURE__ */ React3.createElement(Text3, { color: file.isDirectory ? "yellow" : isSelected ? "cyan" : void 0, bold: isSelected }, icon), /* @__PURE__ */ React3.createElement(Text3, { color: isSelected ? "cyan" : void 0, bold: isSelected }, " ", pathDisplay), /* @__PURE__ */ React3.createElement(Text3, { dimColor: true }, sizeDisplay));
+    return /* @__PURE__ */ React4.createElement(Box3, { key: file.path, marginLeft: 1 }, /* @__PURE__ */ React4.createElement(Text4, { color: isSelected ? "cyan" : void 0, bold: isSelected }, isSelected ? "> " : "  "), /* @__PURE__ */ React4.createElement(Text4, { color: file.isDirectory ? "yellow" : isSelected ? "cyan" : void 0, bold: isSelected }, icon), /* @__PURE__ */ React4.createElement(Text4, { color: isSelected ? "cyan" : void 0, bold: isSelected }, " ", pathDisplay), /* @__PURE__ */ React4.createElement(Text4, { dimColor: true }, sizeDisplay));
   }));
 }
 
@@ -413,6 +513,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--) {
@@ -429,14 +725,13 @@ function findAtTrigger(value) {
   }
   return null;
 }
-function InputPrompt({ onSubmit, disabled = false, history = [] }) {
-  const [value, setValue] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [historyIndex, setHistoryIndex] = useState(-1);
-  const [tempInput, setTempInput] = useState("");
-  const [inputKey, setInputKey] = useState(0);
-  const [fileAutocomplete, setFileAutocomplete] = useState(null);
-  const [fileSelectedIndex, setFileSelectedIndex] = useState(0);
+function InputPrompt({ onSubmit, onImageDetected, disabled = false, history = [] }) {
+  const [value, setValue] = useState2("");
+  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const [historyIndex, setHistoryIndex] = useState2(-1);
+  const [tempInput, setTempInput] = useState2("");
+  const [fileAutocomplete, setFileAutocomplete] = useState2(null);
+  const [fileSelectedIndex, setFileSelectedIndex] = useState2(0);
   const shouldShowCommandAutocomplete = value.startsWith("/") && !disabled && !fileAutocomplete?.active;
   const commandQuery = shouldShowCommandAutocomplete ? value.slice(1) : "";
   const filteredCommands = useMemo(() => {
@@ -453,7 +748,7 @@ function InputPrompt({ onSubmit, disabled = false, history = [] }) {
   useEffect(() => {
     setFileSelectedIndex(0);
   }, [filteredFiles]);
-  useInput((input, key) => {
+  useInput2((_input, key) => {
     if (fileAutocomplete?.active && filteredFiles.length > 0) {
       if (key.upArrow) {
         setFileSelectedIndex((prev) => prev > 0 ? prev - 1 : filteredFiles.length - 1);
@@ -510,7 +805,6 @@ function InputPrompt({ onSubmit, disabled = false, history = [] }) {
     const pathToInsert = file.isDirectory ? `@${file.path}/` : `@${file.path}`;
     const newValue = beforeAt + pathToInsert + afterQuery;
     setValue(newValue);
-    setInputKey((prev) => prev + 1);
     if (file.isDirectory) {
       setFileAutocomplete({
         active: true,
@@ -537,7 +831,6 @@ function InputPrompt({ onSubmit, disabled = false, history = [] }) {
       if (selectedCommand.args) {
         setValue(commandText + " ");
         setHistoryIndex(-1);
-        setInputKey((prev) => prev + 1);
         return;
       }
       setValue("");
@@ -550,7 +843,15 @@ 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} `);
+        return;
+      }
+    }
     setValue(newValue);
     if (historyIndex !== -1) {
       setHistoryIndex(-1);
@@ -567,29 +868,28 @@ function InputPrompt({ onSubmit, disabled = false, history = [] }) {
       setFileAutocomplete(null);
     }
   };
-  return /* @__PURE__ */ React4.createElement(Box4, { flexDirection: "column" }, /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Text4, { bold: true, color: "cyan" }, "> "), /* @__PURE__ */ React4.createElement(
-    TextInput,
+  return /* @__PURE__ */ React5.createElement(Box4, { flexDirection: "column" }, /* @__PURE__ */ React5.createElement(Box4, null, /* @__PURE__ */ React5.createElement(Text5, { bold: true, color: "cyan" }, "> "), /* @__PURE__ */ React5.createElement(
+    CustomTextInput,
     {
-      key: inputKey,
       value,
       onChange: handleChange,
       onSubmit: handleSubmit,
       placeholder: disabled ? "Thinking..." : "Type your message, /help for commands, or @file to reference",
       showCursor: !disabled
     }
-  )), shouldShowCommandAutocomplete && /* @__PURE__ */ React4.createElement(CommandAutocomplete, { commands: filteredCommands, selectedIndex }), fileAutocomplete?.active && /* @__PURE__ */ React4.createElement(FileAutocomplete, { files: filteredFiles, selectedIndex: fileSelectedIndex, query: fileAutocomplete.query }));
+  )), shouldShowCommandAutocomplete && /* @__PURE__ */ React5.createElement(CommandAutocomplete, { commands: filteredCommands, selectedIndex }), fileAutocomplete?.active && /* @__PURE__ */ React5.createElement(FileAutocomplete, { files: filteredFiles, selectedIndex: fileSelectedIndex, query: fileAutocomplete.query }));
 }
 
 // src/components/AgentThinking.tsx
-import React6 from "react";
+import React7 from "react";
 import { Box as Box6 } from "ink";
 
 // src/components/ThoughtStream.tsx
-import React5 from "react";
-import { Box as Box5, Text as Text5 } from "ink";
+import React6 from "react";
+import { Box as Box5, Text as Text6 } from "ink";
 import Spinner from "ink-spinner";
-var ThoughtStream = React5.memo(function ThoughtStream2({ steps }) {
-  return /* @__PURE__ */ React5.createElement(Box5, { flexDirection: "column", gap: 1 }, steps.map((step, index) => /* @__PURE__ */ React5.createElement(Box5, { key: index, flexDirection: "column" }, step.type === "thought" && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Text5, { color: "magenta" }, "\u{1F914} Thought: "), /* @__PURE__ */ React5.createElement(Text5, null, step.content)), step.type === "action" && /* @__PURE__ */ React5.createElement(Box5, { flexDirection: "column" }, /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Text5, { color: "yellow" }, "\u26A1 Action: "), /* @__PURE__ */ React5.createElement(Text5, { bold: true }, step.metadata?.toolName || "unknown")), step.metadata?.toolInput && /* @__PURE__ */ React5.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React5.createElement(Text5, { dimColor: true }, JSON.stringify(step.metadata.toolInput, null, 2)))), step.type === "observation" && /* @__PURE__ */ React5.createElement(Box5, { flexDirection: "column" }, /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Text5, { color: "blue" }, "\u{1F4CA} Observation: ")), /* @__PURE__ */ React5.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React5.createElement(Text5, null, step.content))), step.type === "final_answer" && /* @__PURE__ */ React5.createElement(Box5, { flexDirection: "column" }, /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Text5, { color: "green", bold: true }, "\u2705 Final Answer:", " ")), /* @__PURE__ */ React5.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React5.createElement(Text5, null, step.content)), step.metadata?.tokenUsage && /* @__PURE__ */ React5.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React5.createElement(Text5, { dimColor: true }, "(", step.metadata.tokenUsage.total, " tokens)"))))), !steps.some((s) => s.type === "final_answer") && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Text5, { color: "yellow" }, /* @__PURE__ */ React5.createElement(Spinner, { type: "dots" })), /* @__PURE__ */ React5.createElement(Text5, null, " ", steps.length === 0 ? "Thinking..." : "Processing...")));
+var ThoughtStream = React6.memo(function ThoughtStream2({ steps }) {
+  return /* @__PURE__ */ React6.createElement(Box5, { flexDirection: "column", gap: 1 }, steps.map((step, index) => /* @__PURE__ */ React6.createElement(Box5, { key: index, flexDirection: "column" }, step.type === "thought" && /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Text6, { color: "magenta" }, "\u{1F914} Thought: "), /* @__PURE__ */ React6.createElement(Text6, null, step.content)), step.type === "action" && /* @__PURE__ */ React6.createElement(Box5, { flexDirection: "column" }, /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Text6, { color: "yellow" }, "\u26A1 Action: "), /* @__PURE__ */ React6.createElement(Text6, { bold: true }, step.metadata?.toolName || "unknown")), step.metadata?.toolInput && /* @__PURE__ */ React6.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, JSON.stringify(step.metadata.toolInput, null, 2)))), step.type === "observation" && /* @__PURE__ */ React6.createElement(Box5, { flexDirection: "column" }, /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Text6, { color: "blue" }, "\u{1F4CA} Observation: ")), /* @__PURE__ */ React6.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React6.createElement(Text6, null, step.content))), step.type === "final_answer" && /* @__PURE__ */ React6.createElement(Box5, { flexDirection: "column" }, /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Text6, { color: "green", bold: true }, "\u2705 Final Answer:", " ")), /* @__PURE__ */ React6.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React6.createElement(Text6, null, step.content)), step.metadata?.tokenUsage && /* @__PURE__ */ React6.createElement(Box5, { paddingLeft: 2 }, /* @__PURE__ */ React6.createElement(Text6, { dimColor: true }, "(", step.metadata.tokenUsage.total, " tokens)"))))), !steps.some((s) => s.type === "final_answer") && /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Text6, { color: "yellow" }, /* @__PURE__ */ React6.createElement(Spinner, { type: "dots" })), /* @__PURE__ */ React6.createElement(Text6, null, " ", steps.length === 0 ? "Thinking..." : "Processing...")));
 });
 
 // src/store/index.ts
@@ -618,32 +918,32 @@ var useCliStore = create((set) => ({
 }));
 
 // src/components/AgentThinking.tsx
-var AgentThinking = React6.memo(function AgentThinking2() {
+var AgentThinking = React7.memo(function AgentThinking2() {
   const isThinking = useCliStore((state) => state.isThinking);
   const agentSteps = useCliStore((state) => state.agentSteps);
   if (!isThinking) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Box6, { borderStyle: "single", borderColor: "yellow", paddingX: 1, marginY: 1 }, /* @__PURE__ */ React6.createElement(ThoughtStream, { steps: agentSteps }));
+  return /* @__PURE__ */ React7.createElement(Box6, { borderStyle: "single", borderColor: "yellow", paddingX: 1, marginY: 1 }, /* @__PURE__ */ React7.createElement(ThoughtStream, { steps: agentSteps }));
 });
 
 // src/components/PermissionPrompt.tsx
-import React7 from "react";
-import { Box as Box7, Text as Text6 } from "ink";
+import React8 from "react";
+import { Box as Box7, Text as Text7 } from "ink";
 import SelectInput from "ink-select-input";
 function renderDiffPreview(preview) {
   const lines = preview.split("\n");
   return lines.map((line, index) => {
     if (line.startsWith("+")) {
-      return /* @__PURE__ */ React7.createElement(Text6, { key: index, color: "green" }, line);
+      return /* @__PURE__ */ React8.createElement(Text7, { key: index, color: "green" }, line);
     }
     if (line.startsWith("-")) {
-      return /* @__PURE__ */ React7.createElement(Text6, { key: index, color: "red" }, line);
+      return /* @__PURE__ */ React8.createElement(Text7, { key: index, color: "red" }, line);
     }
     if (line.startsWith("@@")) {
-      return /* @__PURE__ */ React7.createElement(Text6, { key: index, color: "cyan" }, line);
+      return /* @__PURE__ */ React8.createElement(Text7, { key: index, color: "cyan" }, line);
     }
-    return /* @__PURE__ */ React7.createElement(Text6, { key: index, dimColor: true }, line);
+    return /* @__PURE__ */ React8.createElement(Text7, { key: index, dimColor: true }, line);
   });
 }
 function PermissionPrompt({
@@ -663,12 +963,12 @@ function PermissionPrompt({
     { label: "\u2717 Deny", value: "deny" }
   ];
   const argsString = typeof args === "string" ? args : JSON.stringify(args, null, 2);
-  return /* @__PURE__ */ React7.createElement(Box7, { flexDirection: "column", borderStyle: "bold", borderColor: "yellow", padding: 1, marginY: 1 }, /* @__PURE__ */ React7.createElement(Box7, null, /* @__PURE__ */ React7.createElement(Text6, { bold: true, color: "yellow" }, "\u26A0\uFE0F Permission Required")), /* @__PURE__ */ React7.createElement(Box7, { marginTop: 1 }, /* @__PURE__ */ React7.createElement(Text6, { dimColor: true }, "Tool: "), /* @__PURE__ */ React7.createElement(Text6, { bold: true, color: "cyan" }, toolName)), toolDescription && /* @__PURE__ */ React7.createElement(Box7, null, /* @__PURE__ */ React7.createElement(Text6, { dimColor: true }, "Action: "), /* @__PURE__ */ React7.createElement(Text6, null, toolDescription)), /* @__PURE__ */ React7.createElement(Box7, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React7.createElement(Text6, { bold: true }, "Arguments:"), /* @__PURE__ */ React7.createElement(Box7, { paddingLeft: 2, flexDirection: "column" }, /* @__PURE__ */ React7.createElement(Text6, { dimColor: true }, argsString))), preview && /* @__PURE__ */ React7.createElement(Box7, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React7.createElement(Text6, { bold: true }, "Preview:"), /* @__PURE__ */ React7.createElement(Box7, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column" }, renderDiffPreview(preview))), !canBeTrusted && /* @__PURE__ */ React7.createElement(Box7, { marginTop: 1 }, /* @__PURE__ */ React7.createElement(Text6, { color: "red", dimColor: true }, "Note: This tool cannot be trusted due to its dangerous nature.")), /* @__PURE__ */ React7.createElement(Box7, { marginTop: 1 }, /* @__PURE__ */ React7.createElement(SelectInput, { items, onSelect: (item) => onResponse(item.value) })));
+  return /* @__PURE__ */ React8.createElement(Box7, { flexDirection: "column", borderStyle: "bold", borderColor: "yellow", padding: 1, marginY: 1 }, /* @__PURE__ */ React8.createElement(Box7, null, /* @__PURE__ */ React8.createElement(Text7, { bold: true, color: "yellow" }, "\u26A0\uFE0F Permission Required")), /* @__PURE__ */ React8.createElement(Box7, { marginTop: 1 }, /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, "Tool: "), /* @__PURE__ */ React8.createElement(Text7, { bold: true, color: "cyan" }, toolName)), toolDescription && /* @__PURE__ */ React8.createElement(Box7, null, /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, "Action: "), /* @__PURE__ */ React8.createElement(Text7, null, toolDescription)), /* @__PURE__ */ React8.createElement(Box7, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React8.createElement(Text7, { bold: true }, "Arguments:"), /* @__PURE__ */ React8.createElement(Box7, { paddingLeft: 2, flexDirection: "column" }, /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, argsString))), preview && /* @__PURE__ */ React8.createElement(Box7, { marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React8.createElement(Text7, { bold: true }, "Preview:"), /* @__PURE__ */ React8.createElement(Box7, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column" }, renderDiffPreview(preview))), !canBeTrusted && /* @__PURE__ */ React8.createElement(Box7, { marginTop: 1 }, /* @__PURE__ */ React8.createElement(Text7, { color: "red", dimColor: true }, "Note: This tool cannot be trusted due to its dangerous nature.")), /* @__PURE__ */ React8.createElement(Box7, { marginTop: 1 }, /* @__PURE__ */ React8.createElement(SelectInput, { items, onSelect: (item) => onResponse(item.value) })));
 }
 
 // src/components/ConfigEditor.tsx
-import React8, { useState as useState2, useMemo as useMemo2 } from "react";
-import { Box as Box8, Text as Text7, useInput as useInput2 } from "ink";
+import React9, { useState as useState3, useMemo as useMemo2 } from "react";
+import { Box as Box8, Text as Text8, useInput as useInput3 } from "ink";
 var MAX_ITERATIONS_OPTIONS = [
   { label: "10", value: 10 },
   { label: "20", value: 20 },
@@ -799,10 +1099,10 @@ function buildConfigItems(availableModels) {
   return items;
 }
 function ConfigEditor({ config, availableModels, onSave, onClose }) {
-  const [selectedIndex, setSelectedIndex] = useState2(0);
-  const [editedConfig, setEditedConfig] = useState2(config);
-  const [saveError, setSaveError] = useState2(null);
-  const [isSaving, setIsSaving] = useState2(false);
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const [editedConfig, setEditedConfig] = useState3(config);
+  const [saveError, setSaveError] = useState3(null);
+  const [isSaving, setIsSaving] = useState3(false);
   const configItems = useMemo2(() => buildConfigItems(availableModels), [availableModels]);
   const hasChanges = useMemo2(() => {
     return JSON.stringify(config.preferences) !== JSON.stringify(editedConfig.preferences) || config.defaultModel !== editedConfig.defaultModel;
@@ -822,7 +1122,7 @@ function ConfigEditor({ config, availableModels, onSave, onClose }) {
     }
     onClose();
   };
-  useInput2((input, key) => {
+  useInput3((input, key) => {
     const currentItem = configItems[selectedIndex];
     if (key.upArrow) {
       setSelectedIndex((prev) => prev > 0 ? prev - 1 : configItems.length - 1);
@@ -887,13 +1187,13 @@ function ConfigEditor({ config, availableModels, onSave, onClose }) {
     }
     return String(value);
   };
-  return /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, marginY: 1 }, /* @__PURE__ */ React8.createElement(Box8, { justifyContent: "space-between", marginBottom: 1 }, /* @__PURE__ */ React8.createElement(Text7, { bold: true, color: "cyan" }, "Settings"), isSaving ? /* @__PURE__ */ React8.createElement(Text7, { color: "yellow" }, "Saving...") : hasChanges ? /* @__PURE__ */ React8.createElement(Text7, { dimColor: true, color: "yellow" }, "(unsaved changes)") : null), saveError && /* @__PURE__ */ React8.createElement(Box8, { marginBottom: 1 }, /* @__PURE__ */ React8.createElement(Text7, { color: "red" }, "Error: ", saveError)), /* @__PURE__ */ React8.createElement(Box8, { flexDirection: "column", marginBottom: 1 }, configItems.map((item, index) => {
+  return /* @__PURE__ */ React9.createElement(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, marginY: 1 }, /* @__PURE__ */ React9.createElement(Box8, { justifyContent: "space-between", marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text8, { bold: true, color: "cyan" }, "Settings"), isSaving ? /* @__PURE__ */ React9.createElement(Text8, { color: "yellow" }, "Saving...") : hasChanges ? /* @__PURE__ */ React9.createElement(Text8, { dimColor: true, color: "yellow" }, "(unsaved changes)") : null), saveError && /* @__PURE__ */ React9.createElement(Box8, { marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text8, { color: "red" }, "Error: ", saveError)), /* @__PURE__ */ React9.createElement(Box8, { flexDirection: "column", marginBottom: 1 }, configItems.map((item, index) => {
     const isSelected = index === selectedIndex;
     const value = item.getValue(editedConfig);
     const displayValue = formatValue(item, value);
     const hasOptions = item.type === "select" || item.type === "boolean" || item.type === "number";
-    return /* @__PURE__ */ React8.createElement(Box8, { key: item.key }, /* @__PURE__ */ React8.createElement(Text7, { color: isSelected ? "cyan" : void 0 }, isSelected ? "> " : "  "), /* @__PURE__ */ React8.createElement(Box8, { width: 18 }, /* @__PURE__ */ React8.createElement(Text7, { bold: isSelected, color: isSelected ? "white" : "gray" }, item.label, ":")), /* @__PURE__ */ React8.createElement(Box8, null, hasOptions && isSelected && /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, "< "), /* @__PURE__ */ React8.createElement(Text7, { bold: isSelected, color: isSelected ? "green" : void 0 }, displayValue), hasOptions && isSelected && /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, " >")));
-  })), /* @__PURE__ */ React8.createElement(Box8, { borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React8.createElement(Text7, { dimColor: true }, "\u2191/\u2193: Navigate | Space/\u2190/\u2192: Change | q/Esc: Save & Exit")));
+    return /* @__PURE__ */ React9.createElement(Box8, { key: item.key }, /* @__PURE__ */ React9.createElement(Text8, { color: isSelected ? "cyan" : void 0 }, isSelected ? "> " : "  "), /* @__PURE__ */ React9.createElement(Box8, { width: 18 }, /* @__PURE__ */ React9.createElement(Text8, { bold: isSelected, color: isSelected ? "white" : "gray" }, item.label, ":")), /* @__PURE__ */ React9.createElement(Box8, null, hasOptions && isSelected && /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, "< "), /* @__PURE__ */ React9.createElement(Text8, { bold: isSelected, color: isSelected ? "green" : void 0 }, displayValue), hasOptions && isSelected && /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, " >")));
+  })), /* @__PURE__ */ React9.createElement(Box8, { borderStyle: "single", borderColor: "gray", paddingX: 1 }, /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, "\u2191/\u2193: Navigate | Space/\u2190/\u2192: Change | q/Esc: Save & Exit")));
 }
 
 // src/utils/processFileReferences.ts
@@ -1015,6 +1315,7 @@ function App({
   onMessage,
   onCommand,
   onPermissionResponse,
+  onImageDetected,
   commandHistory = [],
   config,
   availableModels = [],
@@ -1030,11 +1331,11 @@ function App({
   const setShowConfigEditor = useCliStore((state) => state.setShowConfigEditor);
   const exitRequested = useCliStore((state) => state.exitRequested);
   const setIsThinking = useCliStore((state) => state.setIsThinking);
-  const handleSubmit = React9.useCallback(
+  const handleSubmit = React10.useCallback(
     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;
@@ -1059,7 +1360,7 @@ ${errorBlock}`;
     },
     [onMessage, onCommand, setIsThinking]
   );
-  return /* @__PURE__ */ React9.createElement(Box9, { flexDirection: "column" }, /* @__PURE__ */ React9.createElement(StatusBar, { sessionName, model: currentModel, tokenUsage: totalTokens }), showConfigEditor && config && onSaveConfig ? /* @__PURE__ */ React9.createElement(Box9, { flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(Box9, { flexDirection: "column" }, /* @__PURE__ */ React10.createElement(StatusBar, { sessionName, model: currentModel, tokenUsage: totalTokens }), showConfigEditor && config && onSaveConfig ? /* @__PURE__ */ React10.createElement(Box9, { flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React10.createElement(
     ConfigEditor,
     {
       config,
@@ -1067,7 +1368,7 @@ ${errorBlock}`;
       onSave: onSaveConfig,
       onClose: () => setShowConfigEditor(false)
     }
-  )) : permissionPrompt ? /* @__PURE__ */ React9.createElement(Box9, { flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React9.createElement(
+  )) : permissionPrompt ? /* @__PURE__ */ React10.createElement(Box9, { flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React10.createElement(
     PermissionPrompt,
     {
       toolName: permissionPrompt.toolName,
@@ -1076,39 +1377,47 @@ ${errorBlock}`;
       canBeTrusted: permissionPrompt.canBeTrusted,
       onResponse: onPermissionResponse
     }
-  )) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Static, { items: messages }, (message, index) => /* @__PURE__ */ React9.createElement(Box9, { key: index, flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React9.createElement(MessageItem, { message }))), /* @__PURE__ */ React9.createElement(AgentThinking, null), exitRequested && /* @__PURE__ */ React9.createElement(Box9, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Text8, { color: "yellow", bold: true }, "Press Ctrl+C again to exit")), /* @__PURE__ */ React9.createElement(Box9, { borderStyle: "single", borderColor: "cyan", paddingX: 1 }, /* @__PURE__ */ React9.createElement(InputPrompt, { onSubmit: handleSubmit, disabled: isThinking, history: commandHistory }))));
+  )) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Static, { items: messages }, (message, index) => /* @__PURE__ */ React10.createElement(Box9, { key: index, flexDirection: "column", paddingX: 1 }, /* @__PURE__ */ React10.createElement(MessageItem, { message }))), /* @__PURE__ */ React10.createElement(AgentThinking, null), exitRequested && /* @__PURE__ */ React10.createElement(Box9, { paddingX: 1, marginBottom: 1 }, /* @__PURE__ */ React10.createElement(Text9, { color: "yellow", bold: true }, "Press Ctrl+C again to exit")), /* @__PURE__ */ React10.createElement(Box9, { borderStyle: "single", borderColor: "cyan", paddingX: 1 }, /* @__PURE__ */ React10.createElement(
+    InputPrompt,
+    {
+      onSubmit: handleSubmit,
+      onImageDetected,
+      disabled: isThinking,
+      history: commandHistory
+    }
+  ))));
 }
 function MessageItem({ message }) {
-  return /* @__PURE__ */ React9.createElement(Box9, { flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React9.createElement(Box9, null, /* @__PURE__ */ React9.createElement(Text8, { bold: true, color: message.role === "user" ? "cyan" : "green" }, message.role === "user" ? "\u{1F464} You" : "\u{1F916} Assistant"), /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, " \u2022 ", new Date(message.timestamp).toLocaleTimeString())), /* @__PURE__ */ React9.createElement(Box9, { paddingLeft: 2 }, message.metadata?.permissionDenied ? /* @__PURE__ */ React9.createElement(Text8, { color: "yellow" }, "\u26A0\uFE0F ", message.content) : /* @__PURE__ */ React9.createElement(Text8, null, message.content)), message.metadata?.steps && message.metadata.steps.length > 0 && /* @__PURE__ */ React9.createElement(Box9, { paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React9.createElement(Text8, { 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__ */ React9.createElement(Text8, { dimColor: true }, "Step types: ", message.metadata.steps.map((s) => s.type).join(", ")), message.metadata.steps.map((step, idx) => {
+  return /* @__PURE__ */ React10.createElement(Box9, { flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React10.createElement(Box9, null, /* @__PURE__ */ React10.createElement(Text9, { bold: true, color: message.role === "user" ? "cyan" : "green" }, message.role === "user" ? "\u{1F464} You" : "\u{1F916} Assistant"), /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, " \u2022 ", new Date(message.timestamp).toLocaleTimeString())), /* @__PURE__ */ React10.createElement(Box9, { paddingLeft: 2 }, message.metadata?.permissionDenied ? /* @__PURE__ */ React10.createElement(Text9, { color: "yellow" }, "\u26A0\uFE0F ", message.content) : /* @__PURE__ */ React10.createElement(Text9, null, message.content)), message.metadata?.steps && message.metadata.steps.length > 0 && /* @__PURE__ */ React10.createElement(Box9, { paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React10.createElement(Text9, { 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__ */ React10.createElement(Text9, { dimColor: true }, "Step types: ", message.metadata.steps.map((s) => s.type).join(", ")), message.metadata.steps.map((step, idx) => {
     if (step.type === "thought") {
-      return /* @__PURE__ */ React9.createElement(Box9, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React9.createElement(Text8, { color: "blue" }, "\u{1F4AD} Thought:"), /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, `   ${step.content.slice(0, 200)}${step.content.length > 200 ? "..." : ""}`));
+      return /* @__PURE__ */ React10.createElement(Box9, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React10.createElement(Text9, { color: "blue" }, "\u{1F4AD} Thought:"), /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, `   ${step.content.slice(0, 200)}${step.content.length > 200 ? "..." : ""}`));
     }
     if (step.type === "action") {
       const toolName = step.metadata?.toolName || "unknown";
       const toolInput = step.metadata?.toolInput;
       const observationStep = message.metadata.steps[idx + 1];
       const result = observationStep?.type === "observation" ? observationStep.content : null;
-      return /* @__PURE__ */ React9.createElement(Box9, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React9.createElement(Text8, { color: "yellow" }, "\u{1F527} Action: ", toolName), toolInput && /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, `   Input: ${typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput).slice(0, 100)}`), result && /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, `   Result: ${typeof result === "string" ? result.slice(0, 200) : JSON.stringify(result).slice(0, 200)}${(typeof result === "string" ? result.length : JSON.stringify(result).length) > 200 ? "..." : ""}`));
+      return /* @__PURE__ */ React10.createElement(Box9, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React10.createElement(Text9, { color: "yellow" }, "\u{1F527} Action: ", toolName), toolInput && /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, `   Input: ${typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput).slice(0, 100)}`), result && /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, `   Result: ${typeof result === "string" ? result.slice(0, 200) : JSON.stringify(result).slice(0, 200)}${(typeof result === "string" ? result.length : JSON.stringify(result).length) > 200 ? "..." : ""}`));
     }
     return null;
-  }).filter(Boolean)), message.metadata?.tokenUsage && (!message.metadata.steps || message.metadata.steps.length === 0) && /* @__PURE__ */ React9.createElement(Box9, { paddingLeft: 2 }, /* @__PURE__ */ React9.createElement(Text8, { dimColor: true }, `${message.metadata.tokenUsage.total} tokens`)));
+  }).filter(Boolean)), message.metadata?.tokenUsage && (!message.metadata.steps || message.metadata.steps.length === 0) && /* @__PURE__ */ React10.createElement(Box9, { paddingLeft: 2 }, /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, `${message.metadata.tokenUsage.total} tokens`)));
 }
 
 // src/components/MessageList.tsx
-import React10 from "react";
-import { Box as Box10, Text as Text9 } from "ink";
+import React11 from "react";
+import { Box as Box10, Text as Text10 } from "ink";
 function stripThinkingTags(content) {
   return content.replace(/<think>[\s\S]*?<\/think>/g, "").trim();
 }
-var MessageList = React10.memo(
+var MessageList = React11.memo(
   function MessageList2({ messages }) {
     if (messages.length === 0) {
-      return /* @__PURE__ */ React10.createElement(Box10, { paddingY: 1 }, /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, "No messages yet. Type a message to start!"));
+      return /* @__PURE__ */ React11.createElement(Box10, { paddingY: 1 }, /* @__PURE__ */ React11.createElement(Text10, { dimColor: true }, "No messages yet. Type a message to start!"));
     }
-    return /* @__PURE__ */ React10.createElement(Box10, { flexDirection: "column", gap: 1, paddingY: 1 }, messages.map((message, index) => /* @__PURE__ */ React10.createElement(Box10, { key: index, flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React10.createElement(Box10, null, /* @__PURE__ */ React10.createElement(Text9, { bold: true, color: message.role === "user" ? "cyan" : "green" }, message.role === "user" ? "\u{1F464} You" : "\u{1F916} Assistant"), /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, " \u2022 ", new Date(message.timestamp).toLocaleTimeString())), /* @__PURE__ */ React10.createElement(Box10, { paddingLeft: 2 }, message.metadata?.permissionDenied ? /* @__PURE__ */ React10.createElement(Text9, { color: "yellow" }, "\u26A0\uFE0F ", stripThinkingTags(message.content)) : /* @__PURE__ */ React10.createElement(Text9, null, stripThinkingTags(message.content))), message.metadata?.steps && message.metadata.steps.length > 0 && /* @__PURE__ */ React10.createElement(Box10, { paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React10.createElement(Text9, { 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__ */ React10.createElement(Text9, { dimColor: true }, "Step types: ", message.metadata.steps.map((s) => s.type).join(", ")), message.metadata.steps.map((step, idx) => {
+    return /* @__PURE__ */ React11.createElement(Box10, { flexDirection: "column", gap: 1, paddingY: 1 }, messages.map((message, index) => /* @__PURE__ */ React11.createElement(Box10, { key: index, flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React11.createElement(Box10, null, /* @__PURE__ */ React11.createElement(Text10, { bold: true, color: message.role === "user" ? "cyan" : "green" }, message.role === "user" ? "\u{1F464} You" : "\u{1F916} Assistant"), /* @__PURE__ */ React11.createElement(Text10, { dimColor: true }, " \u2022 ", new Date(message.timestamp).toLocaleTimeString())), /* @__PURE__ */ React11.createElement(Box10, { paddingLeft: 2 }, message.metadata?.permissionDenied ? /* @__PURE__ */ React11.createElement(Text10, { color: "yellow" }, "\u26A0\uFE0F ", stripThinkingTags(message.content)) : /* @__PURE__ */ React11.createElement(Text10, null, stripThinkingTags(message.content))), message.metadata?.steps && message.metadata.steps.length > 0 && /* @__PURE__ */ React11.createElement(Box10, { paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React11.createElement(Text10, { 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__ */ React11.createElement(Text10, { dimColor: true }, "Step types: ", message.metadata.steps.map((s) => s.type).join(", ")), message.metadata.steps.map((step, idx) => {
       if (step.type === "thought") {
-        return /* @__PURE__ */ React10.createElement(Box10, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React10.createElement(Text9, { color: "blue" }, "\u{1F4AD} Thought:"), /* @__PURE__ */ React10.createElement(
-          Text9,
+        return /* @__PURE__ */ React11.createElement(Box10, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React11.createElement(Text10, { color: "blue" }, "\u{1F4AD} Thought:"), /* @__PURE__ */ React11.createElement(
+          Text10,
           {
             dimColor: true
           },
@@ -1120,10 +1429,10 @@ var MessageList = React10.memo(
         const toolInput = step.metadata?.toolInput;
         const observationStep = message.metadata.steps[idx + 1];
         const result = observationStep?.type === "observation" ? observationStep.content : null;
-        return /* @__PURE__ */ React10.createElement(Box10, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React10.createElement(Text9, { color: "yellow" }, "\u{1F527} Action: ", toolName), toolInput && /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, `   Input: ${typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput).slice(0, 100)}`), result && /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, `   Result: ${typeof result === "string" ? result.slice(0, 200) : JSON.stringify(result).slice(0, 200)}${(typeof result === "string" ? result.length : JSON.stringify(result).length) > 200 ? "..." : ""}`));
+        return /* @__PURE__ */ React11.createElement(Box10, { key: idx, paddingLeft: 2, marginTop: 1, flexDirection: "column" }, /* @__PURE__ */ React11.createElement(Text10, { color: "yellow" }, "\u{1F527} Action: ", toolName), toolInput && /* @__PURE__ */ React11.createElement(Text10, { dimColor: true }, `   Input: ${typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput).slice(0, 100)}`), result && /* @__PURE__ */ React11.createElement(Text10, { dimColor: true }, `   Result: ${typeof result === "string" ? result.slice(0, 200) : JSON.stringify(result).slice(0, 200)}${(typeof result === "string" ? result.length : JSON.stringify(result).length) > 200 ? "..." : ""}`));
       }
       return null;
-    }).filter(Boolean)), message.metadata?.tokenUsage && (!message.metadata.steps || message.metadata.steps.length === 0) && /* @__PURE__ */ React10.createElement(Box10, { paddingLeft: 2 }, /* @__PURE__ */ React10.createElement(Text9, { dimColor: true }, `${message.metadata.tokenUsage.total} tokens`)))));
+    }).filter(Boolean)), message.metadata?.tokenUsage && (!message.metadata.steps || message.metadata.steps.length === 0) && /* @__PURE__ */ React11.createElement(Box10, { paddingLeft: 2 }, /* @__PURE__ */ React11.createElement(Text10, { dimColor: true }, `${message.metadata.tokenUsage.total} tokens`)))));
   },
   (prevProps, nextProps) => {
     if (prevProps.messages.length !== nextProps.messages.length) {
@@ -1134,8 +1443,8 @@ var MessageList = React10.memo(
 );
 
 // src/components/TrustLocationSelector.tsx
-import React11 from "react";
-import { Box as Box11, Text as Text10 } from "ink";
+import React12 from "react";
+import { Box as Box11, Text as Text11 } from "ink";
 import SelectInput2 from "ink-select-input";
 function TrustLocationSelector({ inProject, onSelect, onCancel }) {
   const items = [];
@@ -1156,19 +1465,19 @@ function TrustLocationSelector({ inProject, onSelect, onCancel }) {
   const handleSelect = (item) => {
     onSelect(item.value);
   };
-  return /* @__PURE__ */ React11.createElement(Box11, { flexDirection: "column", marginY: 1 }, /* @__PURE__ */ React11.createElement(Box11, { marginBottom: 1 }, /* @__PURE__ */ React11.createElement(Text10, { bold: true }, "Where should this rule be saved?")), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(Box11, { flexDirection: "column", marginY: 1 }, /* @__PURE__ */ React12.createElement(Box11, { marginBottom: 1 }, /* @__PURE__ */ React12.createElement(Text11, { bold: true }, "Where should this rule be saved?")), /* @__PURE__ */ React12.createElement(
     SelectInput2,
     {
       items,
       onSelect: handleSelect,
-      itemComponent: ({ isSelected, label }) => /* @__PURE__ */ React11.createElement(Box11, null, /* @__PURE__ */ React11.createElement(Text10, { color: isSelected ? "cyan" : void 0 }, isSelected ? "\u276F " : "  ", label))
+      itemComponent: ({ isSelected, label }) => /* @__PURE__ */ React12.createElement(Box11, null, /* @__PURE__ */ React12.createElement(Text11, { color: isSelected ? "cyan" : void 0 }, isSelected ? "\u276F " : "  ", label))
     }
-  ), /* @__PURE__ */ React11.createElement(Box11, { marginTop: 1 }, /* @__PURE__ */ React11.createElement(Text10, { dimColor: true }, "Use \u2191\u2193 arrows to navigate, Enter to select, Ctrl+C to cancel")));
+  ), /* @__PURE__ */ React12.createElement(Box11, { marginTop: 1 }, /* @__PURE__ */ React12.createElement(Text11, { dimColor: true }, "Use \u2191\u2193 arrows to navigate, Enter to select, Ctrl+C to cancel")));
 }
 
 // src/components/LoginFlow.tsx
-import React12, { useState as useState3, useEffect as useEffect2 } from "react";
-import { Box as Box12, Text as Text11 } from "ink";
+import React13, { useState as useState4, useEffect as useEffect2 } from "react";
+import { Box as Box12, Text as Text12 } from "ink";
 import Spinner2 from "ink-spinner";
 import jwt from "jsonwebtoken";
 import open from "open";
@@ -1284,10 +1593,10 @@ var OAuthClient = class {
 
 // src/components/LoginFlow.tsx
 function LoginFlow({ apiUrl = "http://localhost:3000", configStore, onSuccess, onError }) {
-  const [status, setStatus] = useState3("initiating");
-  const [deviceFlow, setDeviceFlow] = useState3(null);
-  const [statusMessage, setStatusMessage] = useState3("Initiating device authorization...");
-  const [error, setError] = useState3(null);
+  const [status, setStatus] = useState4("initiating");
+  const [deviceFlow, setDeviceFlow] = useState4(null);
+  const [statusMessage, setStatusMessage] = useState4("Initiating device authorization...");
+  const [error, setError] = useState4(null);
   useEffect2(() => {
     const runLoginFlow = async () => {
       const oauth = new OAuthClient(apiUrl);
@@ -1331,15 +1640,15 @@ function LoginFlow({ apiUrl = "http://localhost:3000", configStore, onSuccess, o
     }
   }, [deviceFlow, status]);
   if (status === "initiating") {
-    return /* @__PURE__ */ React12.createElement(Box12, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React12.createElement(Box12, null, /* @__PURE__ */ React12.createElement(Text11, { color: "cyan" }, /* @__PURE__ */ React12.createElement(Spinner2, { type: "dots" }), " Initiating device authorization...")));
+    return /* @__PURE__ */ React13.createElement(Box12, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React13.createElement(Box12, null, /* @__PURE__ */ React13.createElement(Text12, { color: "cyan" }, /* @__PURE__ */ React13.createElement(Spinner2, { type: "dots" }), " Initiating device authorization...")));
   }
   if (status === "error") {
-    return /* @__PURE__ */ React12.createElement(Box12, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React12.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React12.createElement(Text11, { color: "red", bold: true }, "\u2716 Authentication Failed")), /* @__PURE__ */ React12.createElement(Box12, null, /* @__PURE__ */ React12.createElement(Text11, { color: "red" }, error)));
+    return /* @__PURE__ */ React13.createElement(Box12, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React13.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React13.createElement(Text12, { color: "red", bold: true }, "\u2716 Authentication Failed")), /* @__PURE__ */ React13.createElement(Box12, null, /* @__PURE__ */ React13.createElement(Text12, { color: "red" }, error)));
   }
   if (status === "success") {
-    return /* @__PURE__ */ React12.createElement(Box12, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React12.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React12.createElement(Text11, { color: "green", bold: true }, "\u2714 Successfully authenticated!")), /* @__PURE__ */ React12.createElement(Box12, null, /* @__PURE__ */ React12.createElement(Text11, { dimColor: true }, "You can now use B4M CLI with your account.")));
+    return /* @__PURE__ */ React13.createElement(Box12, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React13.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React13.createElement(Text12, { color: "green", bold: true }, "\u2714 Successfully authenticated!")), /* @__PURE__ */ React13.createElement(Box12, null, /* @__PURE__ */ React13.createElement(Text12, { dimColor: true }, "You can now use B4M CLI with your account.")));
   }
-  return /* @__PURE__ */ React12.createElement(Box12, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan" }, /* @__PURE__ */ React12.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React12.createElement(Text11, { color: "cyan", bold: true }, "\u{1F510} Device Authorization")), /* @__PURE__ */ React12.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React12.createElement(Text11, null, "Opening browser automatically... If it doesn't open, please visit:")), /* @__PURE__ */ React12.createElement(Box12, { marginBottom: 1, paddingLeft: 2 }, /* @__PURE__ */ React12.createElement(Text11, { color: "blue", bold: true }, deviceFlow?.verification_uri)), /* @__PURE__ */ React12.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React12.createElement(Text11, null, "And enter this code when prompted:")), /* @__PURE__ */ React12.createElement(Box12, { marginBottom: 1, paddingLeft: 2 }, /* @__PURE__ */ React12.createElement(Text11, { color: "yellow", bold: true }, deviceFlow?.user_code)), /* @__PURE__ */ React12.createElement(Box12, { marginTop: 1 }, /* @__PURE__ */ React12.createElement(Text11, { color: "cyan" }, /* @__PURE__ */ React12.createElement(Spinner2, { type: "dots" }), " ", statusMessage)), /* @__PURE__ */ React12.createElement(Box12, { marginTop: 1 }, /* @__PURE__ */ React12.createElement(Text11, { dimColor: true }, "Expires in ", deviceFlow ? Math.floor(deviceFlow.expires_in / 60) : 0, " minutes")));
+  return /* @__PURE__ */ React13.createElement(Box12, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan" }, /* @__PURE__ */ React13.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React13.createElement(Text12, { color: "cyan", bold: true }, "\u{1F510} Device Authorization")), /* @__PURE__ */ React13.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React13.createElement(Text12, null, "Opening browser automatically... If it doesn't open, please visit:")), /* @__PURE__ */ React13.createElement(Box12, { marginBottom: 1, paddingLeft: 2 }, /* @__PURE__ */ React13.createElement(Text12, { color: "blue", bold: true }, deviceFlow?.verification_uri)), /* @__PURE__ */ React13.createElement(Box12, { marginBottom: 1 }, /* @__PURE__ */ React13.createElement(Text12, null, "And enter this code when prompted:")), /* @__PURE__ */ React13.createElement(Box12, { marginBottom: 1, paddingLeft: 2 }, /* @__PURE__ */ React13.createElement(Text12, { color: "yellow", bold: true }, deviceFlow?.user_code)), /* @__PURE__ */ React13.createElement(Box12, { marginTop: 1 }, /* @__PURE__ */ React13.createElement(Text12, { color: "cyan" }, /* @__PURE__ */ React13.createElement(Spinner2, { type: "dots" }), " ", statusMessage)), /* @__PURE__ */ React13.createElement(Box12, { marginTop: 1 }, /* @__PURE__ */ React13.createElement(Text12, { dimColor: true }, "Expires in ", deviceFlow ? Math.floor(deviceFlow.expires_in / 60) : 0, " minutes")));
 }
 
 // src/storage/SessionStore.ts
@@ -1461,7 +1770,7 @@ var SessionStore = class {
 };
 
 // src/storage/ConfigStore.ts
-import { promises as fs4, existsSync as existsSync2 } from "fs";
+import { promises as fs4, existsSync as existsSync3 } from "fs";
 import path4 from "path";
 import { homedir as homedir2 } from "os";
 import { v4 as uuidv4 } from "uuid";
@@ -1588,7 +1897,7 @@ function findProjectConfigDir(startDir = process.cwd()) {
   while (currentDir !== root) {
     const gitPath = path4.join(currentDir, ".git");
     try {
-      if (existsSync2(gitPath)) {
+      if (existsSync3(gitPath)) {
         return currentDir;
       }
     } catch {
@@ -2196,7 +2505,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
    */
@@ -7673,7 +7982,7 @@ var planetVisibilityTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/fileRead/index.js
 import { promises as fs7 } from "fs";
-import { existsSync as existsSync3, statSync as statSync3 } from "fs";
+import { existsSync as existsSync4, statSync as statSync4 } from "fs";
 import path6 from "path";
 var MAX_FILE_SIZE2 = 10 * 1024 * 1024;
 async function readFileContent(params) {
@@ -7684,10 +7993,10 @@ async function readFileContent(params) {
   if (!resolvedPath.startsWith(cwd)) {
     throw new Error(`Access denied: Cannot read files outside of current working directory`);
   }
-  if (!existsSync3(resolvedPath)) {
+  if (!existsSync4(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}`);
   }
@@ -7730,7 +8039,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,
@@ -7770,7 +8079,7 @@ var fileReadTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/createFile/index.js
 import { promises as fs8 } from "fs";
-import { existsSync as existsSync4 } from "fs";
+import { existsSync as existsSync5 } from "fs";
 import path7 from "path";
 async function createFile(params) {
   const { path: filePath, content, createDirectories = true } = params;
@@ -7780,7 +8089,7 @@ async function createFile(params) {
   if (!resolvedPath.startsWith(cwd)) {
     throw new Error(`Access denied: Cannot create files outside of current working directory`);
   }
-  const fileExists = existsSync4(resolvedPath);
+  const fileExists = existsSync5(resolvedPath);
   const action = fileExists ? "overwritten" : "created";
   if (createDirectories) {
     const dir = path7.dirname(resolvedPath);
@@ -7798,7 +8107,7 @@ var createFileTool = {
   implementation: (context) => ({
     toolFn: async (value) => {
       const params = value;
-      const fileExists = existsSync4(path7.resolve(process.cwd(), path7.normalize(params.path)));
+      const fileExists = existsSync5(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
@@ -7839,7 +8148,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]");
@@ -7887,7 +8196,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,
@@ -7968,7 +8277,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) {
@@ -8020,7 +8329,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;
       }
@@ -8044,7 +8353,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) {
@@ -8178,7 +8487,7 @@ var grepSearchTool = {
 
 // ../../b4m-core/packages/services/dist/src/llm/tools/implementation/deleteFile/index.js
 import { promises as fs9 } from "fs";
-import { existsSync as existsSync5, statSync as statSync6 } from "fs";
+import { existsSync as existsSync6, statSync as statSync7 } from "fs";
 import path10 from "path";
 async function deleteFile(params) {
   const { path: filePath, recursive = false } = params;
@@ -8188,10 +8497,10 @@ async function deleteFile(params) {
   if (!resolvedPath.startsWith(cwd)) {
     throw new Error(`Access denied: Cannot delete files outside of current working directory`);
   }
-  if (!existsSync5(resolvedPath)) {
+  if (!existsSync6(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) {
@@ -8212,7 +8521,7 @@ var deleteFileTool = {
     toolFn: async (value) => {
       const params = value;
       const resolvedPath = path10.resolve(process.cwd(), path10.normalize(params.path));
-      const isDirectory = existsSync5(resolvedPath) && statSync6(resolvedPath).isDirectory();
+      const isDirectory = existsSync6(resolvedPath) && statSync7(resolvedPath).isDirectory();
       context.logger.info(`\u{1F5D1}\uFE0F  DeleteFile: Deleting ${isDirectory ? "directory" : "file"}`, {
         path: params.path,
         recursive: params.recursive
@@ -8502,10 +8811,10 @@ import jwt2 from "jsonwebtoken";
 // src/utils/diffPreview.ts
 import * as Diff from "diff";
 import { readFile } from "fs/promises";
-import { existsSync as existsSync6 } from "fs";
+import { existsSync as existsSync7 } from "fs";
 async function generateFileDiffPreview(args) {
   try {
-    if (!existsSync6(args.path)) {
+    if (!existsSync7(args.path)) {
       const lines2 = args.content.split("\n");
       const preview = lines2.slice(0, 20).join("\n");
       const hasMore = lines2.length > 20;
@@ -8535,7 +8844,7 @@ ${preview}${hasMore ? `
 }
 async function generateFileDeletePreview(args) {
   try {
-    if (!existsSync6(args.path)) {
+    if (!existsSync7(args.path)) {
       return `[File does not exist: ${args.path}]`;
     }
     const stats = await import("fs/promises").then((fs11) => fs11.stat(args.path));
@@ -9197,7 +9506,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 existsSync7, readdirSync as readdirSync3 } from "fs";
+import { existsSync as existsSync8, readdirSync as readdirSync3 } from "fs";
 var MCPClient = class {
   // Note: This class handles MCP server communication with repository filtering
   mcp;
@@ -9248,7 +9557,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) => existsSync7(p));
+        const serverScriptPath = candidatePaths.find((p) => existsSync8(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);
@@ -9446,6 +9755,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";
@@ -9863,7 +10356,7 @@ import { isAxiosError as isAxiosError2 } from "axios";
 // package.json
 var package_default = {
   name: "@bike4mind/cli",
-  version: "0.2.6-fix-cli-mcp-type-mismatch.17119+0906e1e34",
+  version: "0.2.7-basic-cli-shortcuts.17131+b79f34724",
   type: "module",
   description: "Interactive CLI tool for Bike4Mind with ReAct agents",
   license: "UNLICENSED",
@@ -9924,6 +10417,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",
@@ -9949,7 +10443,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",
@@ -9965,10 +10459,11 @@ var package_default = {
   },
   devDependencies: {
     "@bike4mind/agents": "0.1.0",
-    "@bike4mind/common": "2.38.1-fix-cli-mcp-type-mismatch.17119+0906e1e34",
-    "@bike4mind/mcp": "1.20.1-fix-cli-mcp-type-mismatch.17119+0906e1e34",
-    "@bike4mind/services": "2.33.1-fix-cli-mcp-type-mismatch.17119+0906e1e34",
-    "@bike4mind/utils": "2.1.2-fix-cli-mcp-type-mismatch.17119+0906e1e34",
+    "@bike4mind/common": "2.38.1-basic-cli-shortcuts.17131+b79f34724",
+    "@bike4mind/mcp": "1.20.1-basic-cli-shortcuts.17131+b79f34724",
+    "@bike4mind/services": "2.33.1-basic-cli-shortcuts.17131+b79f34724",
+    "@bike4mind/utils": "2.1.2-basic-cli-shortcuts.17131+b79f34724",
+    "@types/better-sqlite3": "^7.6.12",
     "@types/diff": "^5.0.9",
     "@types/jsonwebtoken": "^9.0.4",
     "@types/node": "^22.9.0",
@@ -9980,7 +10475,7 @@ var package_default = {
     typescript: "^5.9.3",
     vitest: "^3.2.4"
   },
-  gitHead: "0906e1e34709a52074b386d9b51a94776db1d33d"
+  gitHead: "b79f34724ba9a60aae19010065d78ac75c2f8396"
 };
 
 // src/config/constants.ts
@@ -10001,20 +10496,26 @@ var EXIT_TIMEOUT_MS = 2e3;
 var usageCache = null;
 function CliApp() {
   const { exit } = useApp();
-  const [state, setState] = useState4({
+  const imageRenderer = new ImageRenderer();
+  const [state, setState] = useState5({
     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,
     permissionPrompt: null,
     trustLocationSelector: null
   });
-  const [isInitialized, setIsInitialized] = useState4(false);
-  const [initError, setInitError] = useState4(null);
-  const [commandHistory, setCommandHistory] = useState4([]);
+  const [isInitialized, setIsInitialized] = useState5(false);
+  const [initError, setInitError] = useState5(null);
+  const [commandHistory, setCommandHistory] = useState5([]);
+  const imageStoreInitPromise = useRef(null);
   const setStoreSession = useCliStore((state2) => state2.setSession);
   const setPermissionPrompt = useCliStore((state2) => state2.setPermissionPrompt);
   const setShowConfigEditor = useCliStore((state2) => state2.setShowConfigEditor);
@@ -10038,6 +10539,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))
@@ -10046,8 +10554,8 @@ function CliApp() {
     setTimeout(() => {
       process.exit(0);
     }, 100);
-  }, [state.session, state.sessionStore, state.mcpManager, state.agent]);
-  useInput3((input, key) => {
+  }, [state.session, state.sessionStore, state.mcpManager, state.agent, state.imageStore]);
+  useInput4((input, key) => {
     if (key.ctrl && input === "c") {
       const now = Date.now();
       if (exitTimestamp && now - exitTimestamp < EXIT_TIMEOUT_MS) {
@@ -10306,9 +10814,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);
@@ -10316,7 +10831,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");
@@ -10365,6 +10880,35 @@ 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) {
+        if (!imageStoreInitPromise.current) {
+          imageStoreInitPromise.current = (async () => {
+            const { ImageStore: ImageStoreClass } = await import("./ImageStore-RQZ7OF7P.js");
+            const newImageStore = new ImageStoreClass();
+            setState((prev) => ({
+              ...prev,
+              imageStore: newImageStore,
+              messageBuilder: new MessageBuilder(newImageStore, prev.imageRenderer)
+            }));
+            return newImageStore;
+          })();
+        }
+        imageStore = await imageStoreInitPromise.current;
+      }
+      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":
@@ -10801,12 +11345,12 @@ No usage data available for the last ${USAGE_DAYS} days.`);
     setState((prev) => ({ ...prev, config: updatedConfig }));
   };
   if (initError) {
-    return /* @__PURE__ */ React13.createElement(Box13, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React13.createElement(Text12, { color: "red", bold: true }, "\u274C Initialization Error"), /* @__PURE__ */ React13.createElement(Text12, null, initError), /* @__PURE__ */ React13.createElement(Text12, { dimColor: true }, "\n", "Tip: Run /config to set up your API keys"));
+    return /* @__PURE__ */ React14.createElement(Box13, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React14.createElement(Text13, { color: "red", bold: true }, "\u274C Initialization Error"), /* @__PURE__ */ React14.createElement(Text13, null, initError), /* @__PURE__ */ React14.createElement(Text13, { dimColor: true }, "\n", "Tip: Run /config to set up your API keys"));
   }
   if (state.trustLocationSelector) {
     const projectDir = state.configStore.getProjectConfigDir();
     const inProject = projectDir !== null;
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       TrustLocationSelector,
       {
         inProject,
@@ -10825,7 +11369,7 @@ No usage data available for the last ${USAGE_DAYS} days.`);
   }
   if (state.showLoginFlow) {
     const loginApiUrl = getApiUrl(state.config?.apiConfig);
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       LoginFlow,
       {
         apiUrl: loginApiUrl,
@@ -10848,13 +11392,14 @@ No usage data available for the last ${USAGE_DAYS} days.`);
     );
   }
   if (!isInitialized) {
-    return /* @__PURE__ */ React13.createElement(Box13, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React13.createElement(Text12, null, "\u{1F680} Initializing..."));
+    return /* @__PURE__ */ React14.createElement(Box13, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React14.createElement(Text13, null, "\u{1F680} Initializing..."));
   }
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     App,
     {
       onMessage: handleMessage,
       onCommand: handleCommand,
+      onImageDetected: handleImageDetected,
       commandHistory,
       config: state.config,
       availableModels: state.availableModels,
@@ -10884,6 +11429,6 @@ var isDevMode = import.meta.url.includes("/src/") || process.env.NODE_ENV === "d
 if (isDevMode) {
   console.log("\u{1F527} Running in development mode (using TypeScript source)\n");
 }
-render(/* @__PURE__ */ React13.createElement(CliApp, null), {
+render(/* @__PURE__ */ React14.createElement(CliApp, null), {
   exitOnCtrlC: false
 });