vscode-extension: v0.4.5 — new mascot + configurable spend cap + i2i timeout

UX
- New mascot artwork on the empty state: a bigger AI+coin themed
  Franklin pixel-art portrait. The PNG ships with a flood-filled
  alpha channel so the mascot composites directly onto whichever
  theme background sits behind the panel — no rounded-rectangle
  frame, no mix-blend-mode hack. Original PNG (with the dark frame)
  also kept on disk as franklin-mascot.png for record / fallback.
- Settings popover gains a "Per-turn spend cap (USD)" field. Empty
  keeps the existing $0.25 default; "0" disables the cap entirely;
  any positive number sets it. Local mirror of core PR #20.

Core (cherry-picks of in-flight PRs)
- src/tools/imagegen.ts: image-to-image gets a 180s timeout (was
  shared 60s with text-to-image — gpt-image-2 edits on a few-MB
  reference image consistently hit AbortError before completion).
  Mirror of PR #19.
- src/agent/loop.ts + src/commands/config.ts: MAX_TURN_SPEND_USD
  is no longer hard-coded; reads max-turn-spend-usd from config
  with fallback to $0.25. Mirror of PR #20.

Bumps vscode-extension to 0.4.5; updates README changelog.

Author: KillerQueen-Z

src/agent/loop.ts

@@ -17,6 +17,7 @@ import { resetToolSessionState } from '../tools/index.js';
 import { CORE_TOOL_NAMES, dynamicToolsEnabled } from '../tools/tool-categories.js';
 import { createActivateToolCapability } from '../tools/activate.js';
 import { recordUsage } from '../stats/tracker.js';
+import { loadConfig } from '../commands/config.js';
 import { recordSessionUsage } from '../stats/session-tracker.js';
 import { appendAudit, extractLastUserPrompt } from '../stats/audit.js';
 import { estimateCost, OPUS_PRICING } from '../pricing.js';
@@ -546,7 +547,18 @@ export async function interactiveSession(
     let consecutiveTinyResponses = 0;                    // Count of consecutive calls with <10 output tokens
     const MAX_TINY_RESPONSES = 2;                        // Break after N tiny responses — if 2 calls return near-empty, something is wrong
     let turnSpend = 0;                                   // Cost spent this user turn (USD)
-    const MAX_TURN_SPEND_USD = 0.25;                    // Hard circuit breaker per user message (lowered — user wallets are real money)
+    // Hard circuit breaker per user message — defends user wallets against
+    // a runaway model+tool combo on a single prompt. User-overridable via
+    // `franklin config set max-turn-spend-usd <number>` (or the gear-icon
+    // settings panel in the VS Code extension). A value of "0" (or
+    // negative / non-numeric) disables the cap entirely.
+    const MAX_TURN_SPEND_USD = (() => {
+      const raw = loadConfig()['max-turn-spend-usd'];
+      if (raw == null) return 0.25;
+      const parsed = Number(raw);
+      if (!Number.isFinite(parsed) || parsed <= 0) return Infinity;
+      return parsed;
+    })();
 
     // ── Turn analysis (one classifier call, drives routing + prefetch) ──
     // Single LLM pass that answers every routing-adjacent question the

src/commands/config.ts

@@ -16,6 +16,7 @@ const VALID_KEYS = [
   'smart-routing',
   'permission-mode',
   'max-turns',
+  'max-turn-spend-usd',
   'auto-compact',
   'session-save',
   'debug',
@@ -33,6 +34,13 @@ export interface AppConfig {
   'smart-routing'?: string;
   'permission-mode'?: string;
   'max-turns'?: string;
+  /**
+   * Hard per-turn spend ceiling in USD (default $0.25). Numeric string,
+   * e.g. "0.5" or "2". Set to "0" to disable the cap. The agent loop
+   * stops a turn the moment cumulative cost crosses this threshold,
+   * preventing a runaway model + tool combo from draining the wallet.
+   */
+  'max-turn-spend-usd'?: string;
   'auto-compact'?: string;
   'session-save'?: string;
   'debug'?: string;

src/tools/imagegen.ts

@@ -290,7 +290,14 @@ function buildExecute(deps: ImageGenDeps) {
   };
 
   const controller = new AbortController();
-  const timeout = setTimeout(() => controller.abort(), 60_000); // 60s timeout
+  // Reference-image mode (gpt-image-2 edits) is meaningfully slower than
+  // pure text-to-image: the model is reasoning-driven and the request
+  // body carries a few MB of base64. The shared 60s budget covered both
+  // x402 retry attempts and the actual generation, which made image-to-
+  // image effectively always time out. Image-to-image gets 3 minutes;
+  // text-to-image keeps the original 60s.
+  const timeoutMs = referenceImage ? 180_000 : 60_000;
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
 
   try {
     // First request — will get 402
@@ -411,7 +418,12 @@ function buildExecute(deps: ImageGenDeps) {
   } catch (err) {
     const msg = (err as Error).message || '';
     if (msg.includes('abort')) {
-      return { output: 'Image generation timed out (60s limit). Try a simpler prompt.', isError: true };
+      return {
+        output: referenceImage
+          ? 'Image-to-image timed out (180s limit). The reference image may be too large or the model under load — try a smaller/simpler image.'
+          : 'Image generation timed out (60s limit). Try a simpler prompt.',
+        isError: true,
+      };
     }
     return { output: `Error: ${msg}`, isError: true };
   } finally {

vscode-extension/README.md

@@ -41,6 +41,12 @@ Franklin is an autonomous AI agent that runs directly in VS Code. It doesn't jus
 
 ## Changelog
 
+### 0.4.5
+- **New mascot artwork on the empty state** — bigger, transparent-background AI+coin themed Franklin pixel-art portrait (no more dark rounded-rectangle frame, blends seamlessly into any theme background)
+- **Per-turn spend cap is now configurable** — new ⚙️ settings field "Per-turn spend cap (USD)" lets you raise the default \$0.25 limit (or set 0 to disable) without editing source; mirrors the new `franklin config set max-turn-spend-usd <n>` CLI key
+- **Image-to-image timeout fix** — `gpt-image-2` reference-image edits no longer abort after 60s (the old shared budget couldn't cover reasoning-driven edits + base64 upload + x402 retry); image-to-image now gets 180s, text-to-image keeps 60s
+- Synced with Franklin core: PR #19 (i2i timeout), PR #20 (configurable spend cap), PR #21 (README VS Code section)
+
 ### 0.4.3
 - **History replay shows generated media inline** — closing and reopening a conversation now re-renders any images / videos as preview cards instead of dropping them
 - **"+" New chat truly resets the session** — previously only the UI cleared while the agent kept the same `sessionId`, leaking tool guards (`ImageGen disabled`) and prior context into what looked like a new chat

vscode-extension/media/franklin-mascot-transparent.png

@@ -180320,7 +180320,8 @@ No USDC was spent. Choose a cheaper model/size or raise the content budget befor
       "User-Agent": `franklin/${VERSION3}`
     };
     const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), 6e4);
+    const timeoutMs = referenceImage ? 18e4 : 6e4;
+    const timeout = setTimeout(() => controller.abort(), timeoutMs);
     try {
       let response = await fetch(endpoint, {
         method: "POST",
@@ -180417,7 +180418,10 @@ Open with: open ${outPath}${contentSummary}`
     } catch (err) {
       const msg = err.message || "";
       if (msg.includes("abort")) {
-        return { output: "Image generation timed out (60s limit). Try a simpler prompt.", isError: true };
+        return {
+          output: referenceImage ? "Image-to-image timed out (180s limit). The reference image may be too large or the model under load \u2014 try a smaller/simpler image." : "Image generation timed out (60s limit). Try a simpler prompt.",
+          isError: true
+        };
       }
       return { output: `Error: ${msg}`, isError: true };
     } finally {
@@ -186516,7 +186520,15 @@ async function interactiveSession(config2, getUserInput, onEvent, onAbortReady)
     let consecutiveTinyResponses = 0;
     const MAX_TINY_RESPONSES = 2;
     let turnSpend = 0;
-    const MAX_TURN_SPEND_USD = 0.25;
+    const MAX_TURN_SPEND_USD = (() => {
+      const raw = loadConfig()["max-turn-spend-usd"];
+      if (raw == null)
+        return 0.25;
+      const parsed = Number(raw);
+      if (!Number.isFinite(parsed) || parsed <= 0)
+        return Infinity;
+      return parsed;
+    })();
     let turnAnalysis = null;
     try {
       const lastAssistantText = (() => {
@@ -188253,7 +188265,8 @@ var FranklinChatProvider = class {
       current: {
         chain: chain4,
         "default-image-model": config2["default-image-model"] ?? null,
-        "default-video-model": config2["default-video-model"] ?? null
+        "default-video-model": config2["default-video-model"] ?? null,
+        "max-turn-spend-usd": config2["max-turn-spend-usd"] ?? ""
       },
       imageModels: imageModels.map(toOption),
       videoModels: videoModels.map(toOption)
@@ -188281,6 +188294,15 @@ var FranklinChatProvider = class {
     else delete config2["default-image-model"];
     if (vid && vid !== "__unset__") config2["default-video-model"] = vid;
     else delete config2["default-video-model"];
+    const cap = settings["max-turn-spend-usd"];
+    if (cap != null && cap.trim() !== "") {
+      const parsed = Number(cap);
+      if (Number.isFinite(parsed) && parsed >= 0) {
+        config2["max-turn-spend-usd"] = String(parsed);
+      }
+    } else {
+      delete config2["max-turn-spend-usd"];
+    }
     saveConfig(config2);
     void this.webview?.postMessage({ type: "settingsSaved" });
   }
@@ -188493,9 +188515,13 @@ function getNonce() {
 }
 function getWebviewHtml(webview, extensionUri) {
   const nonce = getNonce();
+  const mascotUri = webview.asWebviewUri(
+    vscode.Uri.joinPath(extensionUri, "media", "franklin-mascot-transparent.png")
+  );
   const portraitUri = webview.asWebviewUri(
     vscode.Uri.joinPath(extensionUri, "media", "franklin-portrait.jpg")
   );
+  void portraitUri;
   const csp = [
     "default-src 'none'",
     "style-src 'unsafe-inline'",
@@ -189012,6 +189038,10 @@ function getWebviewHtml(webview, extensionUri) {
       background: var(--vscode-input-background); color: var(--vscode-input-foreground);
       border: 1px solid var(--vscode-input-border, rgba(128,128,128,0.35)); border-radius: 3px;
     }
+    .settings-hint {
+      margin-top: 4px; font-size: 10px; line-height: 1.4;
+      color: var(--vscode-descriptionForeground);
+    }
     .settings-actions {
       display: flex; align-items: center; justify-content: space-between; gap: 8px;
     }
@@ -189493,10 +189523,14 @@ function getWebviewHtml(webview, extensionUri) {
     }
     #empty-state.fk-fade-in { animation: fk-fade-in 0.28s ease-out; }
     #empty-state .pixel-portrait {
-      width: 96px;
-      height: 96px;
-      image-rendering: pixelated;
-      image-rendering: crisp-edges;
+      width: 280px;
+      height: 280px;
+      max-width: 90%;
+      object-fit: contain;
+      /* The PNG itself has its frame flood-filled to alpha=0, so it
+       * composites directly onto whatever theme background is behind
+       * the panel \u2014 light, dark, or high-contrast all look the same. */
+      filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
     }
     #empty-state .brand-name {
       font-size: 40px;
@@ -189720,85 +189754,8 @@ function getWebviewHtml(webview, extensionUri) {
     </div>
     <div id="log">
       <div id="empty-state">
-        <svg class="pixel-portrait" viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true">
-          <!-- hair (gray, colonial side-wave) -->
-          <g fill="#c9c9c9">
-            <rect x="4"  y="1" width="8" height="1"/>
-            <rect x="3"  y="2" width="10" height="1"/>
-            <rect x="2"  y="3" width="2" height="1"/>
-            <rect x="12" y="3" width="2" height="1"/>
-            <rect x="2"  y="4" width="1" height="2"/>
-            <rect x="13" y="4" width="1" height="2"/>
-            <rect x="1"  y="6" width="2" height="3"/>
-            <rect x="13" y="6" width="2" height="3"/>
-            <rect x="2"  y="9" width="1" height="1"/>
-            <rect x="13" y="9" width="1" height="1"/>
-          </g>
-          <!-- hair highlight -->
-          <g fill="#e8e8e8">
-            <rect x="5" y="2" width="2" height="1"/>
-            <rect x="9" y="2" width="2" height="1"/>
-          </g>
-          <!-- face skin -->
-          <g fill="#e0b080">
-            <rect x="4"  y="3" width="8" height="1"/>
-            <rect x="3"  y="4" width="10" height="1"/>
-            <rect x="3"  y="5" width="10" height="1"/>
-            <rect x="3"  y="6" width="10" height="1"/>
-            <rect x="3"  y="7" width="10" height="1"/>
-            <rect x="4"  y="8" width="8" height="1"/>
-            <rect x="4"  y="9" width="8" height="1"/>
-            <rect x="5"  y="10" width="6" height="1"/>
-          </g>
-          <!-- cheek blush -->
-          <g fill="#d98f6a">
-            <rect x="3"  y="7" width="1" height="1"/>
-            <rect x="12" y="7" width="1" height="1"/>
-          </g>
-          <!-- glasses frames -->
-          <g fill="#2a2018">
-            <rect x="4" y="5" width="3" height="1"/>
-            <rect x="4" y="7" width="3" height="1"/>
-            <rect x="4" y="6" width="1" height="1"/>
-            <rect x="6" y="6" width="1" height="1"/>
-            <rect x="9"  y="5" width="3" height="1"/>
-            <rect x="9"  y="7" width="3" height="1"/>
-            <rect x="9"  y="6" width="1" height="1"/>
-            <rect x="11" y="6" width="1" height="1"/>
-            <rect x="7" y="6" width="2" height="1"/>
-          </g>
-          <!-- eyes -->
-          <g fill="#1a1a1a">
-            <rect x="5"  y="6" width="1" height="1"/>
-            <rect x="10" y="6" width="1" height="1"/>
-          </g>
-          <!-- mouth -->
-          <g fill="#8a3a20">
-            <rect x="7" y="9" width="2" height="1"/>
-          </g>
-          <!-- white shirt / cravat -->
-          <g fill="#f0e8d0">
-            <rect x="5"  y="11" width="6" height="1"/>
-            <rect x="6"  y="12" width="4" height="1"/>
-            <rect x="7"  y="13" width="2" height="2"/>
-          </g>
-          <!-- coat (brown) -->
-          <g fill="#5a3820">
-            <rect x="1" y="11" width="4" height="5"/>
-            <rect x="11" y="11" width="4" height="5"/>
-            <rect x="5"  y="12" width="1" height="4"/>
-            <rect x="10" y="12" width="1" height="4"/>
-            <rect x="6"  y="13" width="1" height="3"/>
-            <rect x="9"  y="13" width="1" height="3"/>
-            <rect x="7"  y="15" width="2" height="1"/>
-          </g>
-          <!-- coat buttons (gold) -->
-          <g fill="#caa45a">
-            <rect x="5" y="14" width="1" height="1"/>
-            <rect x="10" y="14" width="1" height="1"/>
-          </g>
-        </svg>
-        <div class="brand-name">Franklin</div>
+        <!-- mascot \u2014 see media/franklin-mascot.png; original pixel-art SVG kept in git history -->
+        <img class="pixel-portrait" src="${mascotUri}" alt="Franklin mascot" />
         <div class="brand-slogan">The AI agent with a <span class="accent">wallet</span>.</div>
         <div id="loading-step" style="font-size:11px;color:var(--vscode-descriptionForeground);margin-top:8px;opacity:0.7;">Initializing\u2026</div>
         <div id="example-prompts">
@@ -189870,6 +189827,11 @@ function getWebviewHtml(webview, extensionUri) {
               <label class="settings-label" for="settings-vid">Default video model</label>
               <select id="settings-vid" class="settings-select"><option value="__unset__">Ask each time</option></select>
             </div>
+            <div class="settings-row">
+              <label class="settings-label" for="settings-spend-cap">Per-turn spend cap (USD)</label>
+              <input id="settings-spend-cap" class="settings-select" type="number" min="0" step="0.05" placeholder="0.25 (default) \u2014 0 to disable" />
+              <div class="settings-hint">Stops a single user message once cumulative cost crosses this. Empty = $0.25 default. 0 = no cap.</div>
+            </div>
             <div class="settings-actions">
               <span id="settings-status"></span>
               <button type="button" id="settings-save" class="settings-save">Save</button>
@@ -190134,6 +190096,7 @@ function getWebviewHtml(webview, extensionUri) {
     var settingsPanel = document.getElementById('settings-panel');
     var settingsImgSel = document.getElementById('settings-img');
     var settingsVidSel = document.getElementById('settings-vid');
+    var settingsSpendCap = document.getElementById('settings-spend-cap');
     var settingsStatusEl = document.getElementById('settings-status');
     var pendingChain = 'base';
 
@@ -190193,6 +190156,7 @@ function getWebviewHtml(webview, extensionUri) {
           chain: pendingChain,
           'default-image-model': settingsImgSel.value,
           'default-video-model': settingsVidSel.value,
+          'max-turn-spend-usd': (settingsSpendCap && settingsSpendCap.value) || '',
         },
       });
       // Close the popover \u2014 dismissing itself is the save confirmation.
@@ -191212,6 +191176,9 @@ function getWebviewHtml(webview, extensionUri) {
         setChainToggleActive(m.current.chain);
         populateModelSelect(settingsImgSel, m.imageModels, m.current['default-image-model']);
         populateModelSelect(settingsVidSel, m.videoModels, m.current['default-video-model']);
+        if (settingsSpendCap) {
+          settingsSpendCap.value = m.current['max-turn-spend-usd'] || '';
+        }
         return;
       }
       if (m.type === 'settingsSaved') {

vscode-extension/media/franklin-mascot.png

@@ -2,7 +2,7 @@
   "name": "franklin-vscode",
   "displayName": "Franklin",
   "description": "The AI agent with a wallet. Autonomous marketing & trading agent powered by x402 micropayments.",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "publisher": "blockrun",
   "icon": "images/icon.png",
   "repository": {