kimiflare 0.11.0 → 0.12.0

package/README.md

@@ -22,6 +22,7 @@
 ## Why kimiflare
 
 - **262k context window** — Read entire modules, large configs, and full stack traces without the model losing track.
+- **Image understanding** — Drop image paths into your prompt (PNG, JPG, WebP, GIF, BMP). The model sees them inline — great for UI reviews, diagrams, screenshots, and mockups.
 - **Direct to Cloudflare** — No AI Gateway, no proxy, no OpenAI SDK. Your traffic goes straight to Workers AI from your account.
 - **Plan mode** — Ask the agent to research and produce a plan without touching your filesystem. Review it, then exit plan mode to execute.
 
@@ -53,6 +54,7 @@ Requires Node.js ≥ 20.
 | **Type-ahead queue** | Type your next prompt while the model is still working. Queued prompts show as `⏳ …` and fire in order. `Ctrl-C` aborts current + clears queue. |
 | **Auto-compaction** | At ~80% context usage, kimiflare nudges you to run `/compact`. It summarizes older turns into a dense summary, keeping the last 4 turns intact. |
 | **Streaming reasoning** | Toggle the model's chain-of-thought with `/reasoning` or `Ctrl-R`. See how it thinks in real time. |
+| **Image understanding** | Drop image paths (PNG, JPG, WebP, GIF, BMP up to 5 MB) into any prompt. The model sees them inline — perfect for UI reviews, diagrams, and screenshots. |
 | **Live cost tracking** | Status bar shows real-time cost based on Cloudflare pricing: `$0.95/M input`, `$0.16/M cached`, `$4.00/M output`. |
 | **Session persistence** | Every turn is auto-saved. `/resume` lists past sessions (with message counts) in a paginated picker. |
 | **Smart permissions** | Bash session-allow is keyed by the first token (e.g., allow all `git` commands). Write/edit show a unified diff before you approve. |
@@ -105,6 +107,19 @@ kimiflare -p "..." --dangerously-allow-all          # auto-approve mutating tool
 kimiflare -p "..." --reasoning                      # include chain-of-thought in stderr
 ```
 
+### Image understanding
+
+Reference image files directly in your prompt — the model sees them inline:
+
+```sh
+kimiflare
+› fix the layout bug in this screenshot docs/bug.png
+› convert this mockup design.png to Tailwind HTML
+› explain this architecture diagram.png
+```
+
+Supported formats: PNG, JPG, JPEG, WebP, GIF, BMP (up to 5 MB each, 10 per message).
+
 ### CLI flags
 
 | Flag | Short | Description |

package/dist/index.js

@@ -296,10 +296,19 @@ async function* parseStream(body, signal) {
 }
 function sanitizeMessagesForApi(messages) {
   return messages.map((m) => {
-    if (!m.tool_calls || m.tool_calls.length === 0) return m;
+    let next = m;
+    if (Array.isArray(m.content)) {
+      next = {
+        ...m,
+        content: m.content.map(
+          (part) => part.type === "text" ? { ...part, text: sanitizeString(part.text) } : part
+        )
+      };
+    }
+    if (!next.tool_calls || next.tool_calls.length === 0) return next;
     return {
-      ...m,
-      tool_calls: m.tool_calls.map((tc) => ({
+      ...next,
+      tool_calls: next.tool_calls.map((tc) => ({
         ...tc,
         function: {
           name: tc.function.name,
@@ -1533,15 +1542,16 @@ async function compactMessages(opts2) {
     return { summary: "", newMessages: messages, replacedCount: 0 };
   }
   const transcript = toSummarize.map((m) => {
+    const contentStr = typeof m.content === "string" ? m.content : m.content?.map((p) => p.type === "text" ? p.text : "[image]").join(" ") ?? "";
     if (m.role === "tool") {
-      const snippet = (m.content ?? "").slice(0, 500);
+      const snippet = contentStr.slice(0, 500);
       return `[tool ${m.name ?? ""}] ${snippet}`;
     }
     if (m.role === "assistant") {
       const calls = m.tool_calls ? ` (tool_calls: ${m.tool_calls.map((c) => c.function.name).join(", ")})` : "";
-      return `[assistant]${calls} ${m.content ?? ""}`;
+      return `[assistant]${calls} ${contentStr}`;
     }
-    return `[${m.role}] ${m.content ?? ""}`;
+    return `[${m.role}] ${contentStr}`;
   }).join("\n");
   let summary = "";
   const events = runKimi({
@@ -1867,12 +1877,18 @@ function EventView({
   verbose
 }) {
   if (evt.kind === "user") {
-    return /* @__PURE__ */ jsxs4(Box4, { children: [
-      /* @__PURE__ */ jsxs4(Text4, { bold: true, color: theme.user, children: [
-        "\u203A",
-        " "
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsxs4(Text4, { bold: true, color: theme.user, children: [
+          "\u203A",
+          " "
+        ] }),
+        /* @__PURE__ */ jsx4(Text4, { bold: true, children: evt.text })
       ] }),
-      /* @__PURE__ */ jsx4(Text4, { bold: true, children: evt.text })
+      evt.images && evt.images.length > 0 && /* @__PURE__ */ jsx4(Box4, { paddingLeft: 2, children: /* @__PURE__ */ jsxs4(Text4, { color: theme.info.color, dimColor: theme.info.dim, children: [
+        "\u{1F5BC}\uFE0F ",
+        evt.images.join(", ")
+      ] }) })
     ] });
   }
   if (evt.kind === "assistant") {
@@ -3470,7 +3486,7 @@ async function listSessions(limit = 30) {
       const [s, raw] = await Promise.all([stat2(path), readFile7(path, "utf8")]);
       const parsed = JSON.parse(raw);
       const firstUser = parsed.messages.find((m) => m.role === "user");
-      const firstPrompt = typeof firstUser?.content === "string" ? firstUser.content : "(no prompt)";
+      const firstPrompt = typeof firstUser?.content === "string" ? firstUser.content : firstUser?.content ? firstUser.content.find((p) => p.type === "text")?.text ?? "(no prompt)" : "(no prompt)";
       summaries.push({
         id: parsed.id,
         filePath: path,
@@ -3495,6 +3511,45 @@ var init_sessions = __esm({
   }
 });
 
+// src/util/image.ts
+import { readFile as readFile8 } from "fs/promises";
+import { basename as basename2 } from "path";
+async function encodeImageFile(filePath) {
+  const buf = await readFile8(filePath);
+  if (buf.byteLength > MAX_IMAGE_BYTES) {
+    throw new Error(
+      `image too large (${(buf.byteLength / 1024 / 1024).toFixed(1)} MB); max is ${MAX_IMAGE_BYTES / 1024 / 1024} MB`
+    );
+  }
+  const ext = filePath.slice(filePath.lastIndexOf(".")).toLowerCase();
+  const mime = EXT_TO_MIME[ext] ?? "image/jpeg";
+  const b64 = buf.toString("base64");
+  return {
+    filename: basename2(filePath),
+    mime,
+    dataUrl: `data:${mime};base64,${b64}`
+  };
+}
+function isImagePath(path) {
+  const ext = path.slice(path.lastIndexOf(".")).toLowerCase();
+  return ext in EXT_TO_MIME;
+}
+var MAX_IMAGE_BYTES, EXT_TO_MIME;
+var init_image = __esm({
+  "src/util/image.ts"() {
+    "use strict";
+    MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+    EXT_TO_MIME = {
+      ".png": "image/png",
+      ".jpg": "image/jpeg",
+      ".jpeg": "image/jpeg",
+      ".gif": "image/gif",
+      ".webp": "image/webp",
+      ".bmp": "image/bmp"
+    };
+  }
+});
+
 // src/app.tsx
 var app_exports = {};
 __export(app_exports, {
@@ -3510,6 +3565,16 @@ function capEvents(prev) {
   if (prev.length <= MAX_EVENTS) return prev;
   return prev.slice(prev.length - MAX_EVENTS);
 }
+function findImagePaths(text) {
+  const paths = [];
+  for (const token of text.split(/\s+/)) {
+    const clean = token.replace(/^["']|["',;:!?]$/g, "").replace(/[.,;:!?]$/, "");
+    if (isImagePath(clean) && existsSync(clean)) {
+      paths.push(clean);
+    }
+  }
+  return [...new Set(paths)];
+}
 function App({ initialCfg, initialUpdateResult }) {
   const { exit } = useApp();
   const [cfg, setCfg] = useState6(initialCfg);
@@ -3679,7 +3744,13 @@ function App({ initialCfg, initialUpdateResult }) {
     if (!cfg) return;
     if (!sessionIdRef.current) {
       const firstUser = messagesRef.current.find((m) => m.role === "user");
-      const firstText = typeof firstUser?.content === "string" ? firstUser.content : "session";
+      let firstText = "session";
+      if (typeof firstUser?.content === "string") {
+        firstText = firstUser.content;
+      } else if (Array.isArray(firstUser?.content)) {
+        const textPart = firstUser.content.find((p) => p.type === "text");
+        if (textPart?.text) firstText = textPart.text;
+      }
       sessionIdRef.current = makeSessionId(firstText);
     }
     try {
@@ -3967,7 +4038,12 @@ function App({ initialCfg, initialUpdateResult }) {
             text: `resumed session ${picked.id} (${picked.messageCount} msgs)`
           }
         ]);
-        const userMsgs = file.messages.filter((m) => m.role === "user" && typeof m.content === "string").map((m) => m.content);
+        const userMsgs = file.messages.filter((m) => m.role === "user" && m.content).map((m) => {
+          if (!m.content) return "";
+          if (typeof m.content === "string") return m.content;
+          const textPart = m.content.find((p) => p.type === "text");
+          return textPart?.text ?? "";
+        }).filter((text) => text.length > 0);
         if (userMsgs.length > 0) setHistory(userMsgs);
         setUsage(null);
       } catch (e) {
@@ -4223,8 +4299,36 @@ use: /thinking low | medium | high`
       if (!trimmed) return;
       if (trimmed.startsWith("/") && handleSlash(trimmed)) return;
       const display = displayText?.trim() || trimmed;
-      setEvents((e) => [...e, { kind: "user", key: mkKey(), text: display }]);
-      messagesRef.current.push({ role: "user", content: sanitizeString(trimmed) });
+      const imagePaths = findImagePaths(trimmed).slice(0, MAX_IMAGES_PER_MESSAGE);
+      let images = [];
+      let content = sanitizeString(trimmed);
+      if (imagePaths.length > 0) {
+        const encoded = await Promise.all(
+          imagePaths.map(async (path) => {
+            try {
+              const img = await encodeImageFile(path);
+              return { path, img };
+            } catch (e) {
+              setEvents((es) => [
+                ...es,
+                { kind: "error", key: mkKey(), text: `failed to encode image ${path}: ${e.message}` }
+              ]);
+              return null;
+            }
+          })
+        );
+        const valid = encoded.filter((x) => x !== null);
+        if (valid.length > 0) {
+          images = valid.map((v) => v.img.filename);
+          const parts = [
+            { type: "text", text: sanitizeString(trimmed) },
+            ...valid.map((v) => ({ type: "image_url", image_url: { url: v.img.dataUrl } }))
+          ];
+          content = parts;
+        }
+      }
+      setEvents((e) => [...e, { kind: "user", key: mkKey(), text: display, images: images.length > 0 ? images : void 0 }]);
+      messagesRef.current.push({ role: "user", content });
       setBusy(true);
       setTurnStartedAt(Date.now());
       const controller = new AbortController();
@@ -4522,7 +4626,7 @@ async function renderApp(cfg, updateResult) {
   const instance = render(/* @__PURE__ */ jsx13(App, { initialCfg: cfg, initialUpdateResult: updateResult }));
   await instance.waitUntilExit();
 }
-var CONTEXT_LIMIT, AUTO_COMPACT_SUGGEST_PCT, MAX_EVENTS, nextAssistantId, nextKey, mkKey, EFFORT_DESCRIPTIONS;
+var CONTEXT_LIMIT, AUTO_COMPACT_SUGGEST_PCT, MAX_EVENTS, nextAssistantId, nextKey, mkKey, MAX_IMAGES_PER_MESSAGE, EFFORT_DESCRIPTIONS;
 var init_app = __esm({
   "src/app.tsx"() {
     "use strict";
@@ -4546,12 +4650,14 @@ var init_app = __esm({
     init_theme();
     init_mode();
     init_sessions();
+    init_image();
     CONTEXT_LIMIT = 262e3;
     AUTO_COMPACT_SUGGEST_PCT = 0.8;
     MAX_EVENTS = 500;
     nextAssistantId = 1;
     nextKey = 1;
     mkKey = () => `evt_${nextKey++}`;
+    MAX_IMAGES_PER_MESSAGE = 10;
     EFFORT_DESCRIPTIONS = {
       low: "low \u2014 fastest; lightest reasoning. Best for simple Q&A, small edits, quick coordination.",
       medium: "medium \u2014 balanced (default). Solid quality on most edits, fast on trivial prompts.",