fix(images): the CSP blocked every thumbnail, and an image with no words 400'd

Three bugs from a real run, all mine.

1. THE THUMBNAIL WAS BROKEN BECAUSE NOTHING COULD RENDER IT. The webview CSP is
   `default-src 'none'` with no img-src, so every image — including a data: URI built from
   the attachment's own bytes — was blocked. I added images without touching the policy.
   Now `img-src data:`, and deliberately NOT https:, so the panel still cannot fetch a
   remote image.

2. AN IMAGE WITH NO WORDS RETURNED A 400. Anthropic rejects an empty text block outright
   ("text content blocks must be non-empty"), and sending an image with nothing typed
   produced exactly that. Both paths now include the text block only when there IS text,
   and fall back to the images alone. This is the case I deliberately made valid in I5 —
   "look at this" is implied by attaching — so it was the one shape guaranteed to be hit.

3. DRAGGING FROM FINDER DID NOTHING. VS Code's workbench intercepts OS file drops before a
   webview iframe sees them, so dataTransfer.files is empty — while the PATH is still
   there as a uri-list. The drop handler now falls back to reading the uri-list and handing
   the paths to the host, which reads them off disk and sends the bytes back for the same
   normalizer a paste uses. Size is checked host-side BEFORE base64 crosses the message
   bus, so a 200MB file is refused rather than serialized first.

Also I6: a visible Attach-image button next to +, using showOpenDialog. The picker is the
route that works regardless of what the webview is allowed to receive; the drop fallback is
best-effort on top of it.

Two guards needed updating rather than adding — the empty-text ternary changed the shape
they matched. That is the guards doing their job; I updated them and added one that pins
the 400 itself.

14 tests in imageAttach, 37 suites green.

Author: ndemianc

extensions/levelcode-ai/extension.js

@@ -1617,7 +1617,7 @@ async function agentFlow(text, imageBlocks) {
 	// Agent mode is the DEFAULT, so this is the path most pasted screenshots take. Blocks only when
 	// there IS an image — a text-only goal stays a plain string so cached prefixes keep their bytes.
 	const goalMsg = (imageBlocks && imageBlocks.length)
-		? { role: 'user', content: [...imageBlocks, { type: 'text', text }] }
+		? { role: 'user', content: text ? [...imageBlocks, { type: 'text', text }] : imageBlocks }
 		: { role: 'user', content: text };
 	currentCheckpoint = { turnId: ++checkpointSeq, label: (text || '').slice(0, 60), ts: Date.now(), goalMsg: goalMsg, files: new Map() };
 	checkpoints.push(currentCheckpoint);
@@ -1745,6 +1745,48 @@ function imageRoot() {
 	catch (e) { dbg('image.root.failed', { msg: String((e && e.message) || e) }); return null; }
 }
 
+/**
+ * Read image files from disk and hand their bytes to the webview to normalize.
+ *
+ * Two callers, one path. The picker (reliable everywhere) and a Finder drop that arrives as a
+ * uri-list rather than as File objects — VS Code's workbench intercepts OS file drops before a
+ * webview iframe sees them, so `dataTransfer.files` is often empty while the PATH is still there.
+ * Reading host-side covers both, and normalization still happens in the webview because that is
+ * the only place with a canvas.
+ */
+async function attachImagePaths(paths) {
+	const files = [];
+	for (const fsPath of (Array.isArray(paths) ? paths : []).slice(0, 8)) {
+		try {
+			const ext = String(path.extname(fsPath) || '').toLowerCase();
+			const mt = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+				'.gif': 'image/gif', '.webp': 'image/webp' }[ext];
+			if (!mt) { vscode.window.showWarningMessage(path.basename(fsPath) + ' is not an image LevelCode can read.'); continue; }
+			const buf = await fs.promises.readFile(fsPath);
+			// Guard before the bytes cross into the webview: a 200MB file would otherwise be
+			// base64-ed onto the message bus before anything got a chance to refuse it.
+			if (buf.length > 25 * 1024 * 1024) {
+				vscode.window.showWarningMessage(path.basename(fsPath) + ' is too large to attach.');
+				continue;
+			}
+			files.push({ base64: buf.toString('base64'), media_type: mt, name: path.basename(fsPath) });
+		} catch (e) {
+			dbg('image.read.failed', { msg: String((e && e.message) || e) });
+			vscode.window.showWarningMessage('Could not read ' + path.basename(fsPath));
+		}
+	}
+	if (files.length) { post({ type: 'attachImages', files }); }
+}
+
+/** Pick images from disk — the path that works regardless of what the webview can receive. */
+async function pickImages() {
+	const picked = await vscode.window.showOpenDialog({
+		canSelectMany: true, openLabel: 'Attach',
+		filters: { Images: ['png', 'jpg', 'jpeg', 'gif', 'webp'] }
+	});
+	if (picked && picked.length) { await attachImagePaths(picked.map((u) => u.fsPath)); }
+}
+
 /**
  * Store what the webview normalized, and return the blocks that will ride the conversation.
  *
@@ -1821,8 +1863,10 @@ async function handleSend(text, images) {
 	// Blocks only when there is an image; a text-only turn stays a plain string so every cached
 	// prefix keeps the bytes it already had. Images lead — the model reads them best before the
 	// text that asks about them.
+	// An empty text block is a 400 from Anthropic ("text content blocks must be non-empty"), and an
+	// image sent with no words produces exactly that. Include the text block only when there is text.
 	conversation.push(imageBlocks.length
-		? { role: 'user', content: [...imageBlocks, { type: 'text', text: userContent }] }
+		? { role: 'user', content: userContent ? [...imageBlocks, { type: 'text', text: userContent }] : imageBlocks }
 		: { role: 'user', content: userContent });
 	post({ type: 'userMessage', text });
 	if (auto.names.length) { post({ type: 'autoContext', names: auto.names }); }
@@ -2359,6 +2403,8 @@ class ChatViewProvider {
 				// One surface for "that could not be attached" — VS Code's own, not a second one
 				// invented inside the transcript.
 				case 'notice': if (msg.text) { vscode.window.showWarningMessage(String(msg.text)); } break;
+				case 'pickImages': await pickImages(); break;
+				case 'attachImagePaths': await attachImagePaths(msg.paths); break;
 				case 'stop': dbg('stop.clicked', { running: commandStops.size }); for (const [, stop] of commandStops) { try { stop(); } catch (e) { /* gone */ } } if (abort) { abort.abort(); } clearApprovals(); clearQuestions(); break;
 				case 'stopCommand': { dbg('stopCommand', { id: msg.id }); const s = commandStops.get(msg.id); if (s) { try { s(); } catch (e) { /* gone */ } } break; }
 				case 'approvalResponse': {
@@ -2557,6 +2603,9 @@ function webviewCsp() {
 	const nonce = String(Math.random()).slice(2) + String(Date.now());
 	return { nonce, csp: [
 		"default-src 'none'",
+		// data: only — attached screenshots are rendered from their own bytes. Deliberately NOT
+		// https:, so the panel still cannot reach out to the network for an image.
+		"img-src data:",
 		"style-src 'unsafe-inline'",
 		"script-src 'nonce-" + nonce + "'"
 	].join('; ') };

extensions/levelcode-ai/media/chat.html

@@ -65,6 +65,9 @@
      calc above already insets by --shell-x. Set margin-block in these rules, never margin.
      test/webviewCss.test.js pins this for the whole list. */
 
+  #attachImg .ci { width: 14px; height: 14px; display: block; }
+  #attachImg { display: inline-flex; align-items: center; justify-content: center; }
+
   /* ---- attached images ---- */
   /* The chip carries its own thumbnail: an attachment you cannot see is one you cannot check before
      sending, and a screenshot is the one attachment where the wrong one looks exactly like the right
@@ -1333,6 +1336,9 @@
     <div id="toolbar">
       <div class="left">
         <button class="tbtn" id="attach" title="Add selected code as context (⌥⌘A)">+</button>
+        <button class="tbtn" id="attachImg" title="Attach an image — or paste a screenshot with ⌘V" aria-label="Attach an image">
+          <svg class="ci" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 3h11l.5.5v9l-.5.5h-11l-.5-.5v-9l.5-.5zm.5 1v6.3l2.6-2.3 2.5 2.2 2.9-3.1L13 9.4V4H3zm0 8h10v-1.2l-2.5-2.6-2.9 3.1-2.5-2.2L3 11.4V12zM6 5.5a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z"/></svg>
+        </button>
         <span class="sep"></span>
         <span class="modewrap">
           <span class="pill agent" id="mode" title="Choose Agent or Chat mode" role="button" tabindex="0" aria-haspopup="listbox" aria-expanded="false">
@@ -3178,6 +3184,14 @@
     return { w: tw, h: th, media_type: 'image/webp', base64: await blobToBase64(blob), bytes: blob.size };
   }
 
+  /** Host-read bytes -> a File, so a picked/dropped path goes through the same normalizer as a paste. */
+  function b64ToFile(b64, type, name){
+    const bin = atob(b64);
+    const u8 = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) { u8[i] = bin.charCodeAt(i); }
+    return new File([u8], name || 'image', { type: type });
+  }
+
   async function attachImageFiles(files){
     const list = Array.from(files || []).filter(function(f){ return f && /^image\//.test(f.type); });
     if (!list.length) { return false; }
@@ -3225,15 +3239,31 @@
   document.addEventListener('dragleave', function(ev){ if (!ev.relatedTarget) { document.body.classList.remove('dropping'); } });
   document.addEventListener('drop', function(ev){
     document.body.classList.remove('dropping');
-    if (!ev.dataTransfer || !ev.dataTransfer.files || !ev.dataTransfer.files.length) { return; }
-    const imgs = Array.from(ev.dataTransfer.files).filter(function(f){ return /^image\//.test(f.type); });
-    if (!imgs.length) { return; }
+    const dt = ev.dataTransfer; if (!dt) { return; }
+    const imgs = Array.from(dt.files || []).filter(function(f){ return /^image\//.test(f.type); });
+    if (imgs.length) { ev.preventDefault(); attachImageFiles(imgs); return; }
+    // VS Code's workbench intercepts OS file drops before a webview iframe sees them, so
+    // dataTransfer.files is usually EMPTY for a drag out of Finder — while the path is still
+    // there as a uri-list. Hand the paths to the host, which can read them off disk.
+    let uris = '';
+    try { uris = dt.getData('text/uri-list') || dt.getData('text/plain') || ''; } catch (e) {}
+    const paths = uris.split(/[\r\n]+/)
+      .map(function(u){ return u.trim(); })
+      .filter(function(u){ return u && !/^#/.test(u); })
+      .map(function(u){ try { return /^file:/i.test(u) ? decodeURIComponent(u.replace(/^file:\/\//i, '')) : u; } catch (e) { return u; } })
+      .filter(function(u){ return /\.(png|jpe?g|gif|webp)$/i.test(u); });
+    if (!paths.length) { return; }
     ev.preventDefault();
-    attachImageFiles(imgs);
+    if (!canSeeImages) { note((canSeeImagesModel || 'This model') + ' cannot read images.'); return; }
+    vscode.postMessage({ type: 'attachImagePaths', paths: paths });
   });
 
   sendBtn.onclick = doSend;
   document.getElementById('attach').onclick = () => vscode.postMessage({ type: 'addContext' });
+  document.getElementById('attachImg').onclick = function(){
+    if (!canSeeImages) { note((canSeeImagesModel || 'This model') + ' cannot read images. Switch to a vision model and try again.'); return; }
+    vscode.postMessage({ type: 'pickImages' });
+  };
   document.getElementById('model').onclick = () => vscode.postMessage({ type: 'pickModel' });
   // Approvals dropdown (mirrors the Agent/Chat menu). The host owns the flag (persists it + gates the
   // danger set); selecting an option posts setAutopilot and we reflect whatever it echoes back via the
@@ -3797,6 +3827,9 @@
       if (typeof m.groupActivity === 'boolean'){ if (!m.groupActivity){ closeGroup(); } groupsOn = m.groupActivity; }
       renderRouting();
     }
+    else if (m.type === 'attachImages'){
+      attachImageFiles((m.files || []).map(function(f){ return b64ToFile(f.base64, f.media_type, f.name); }));
+    }
     else if (m.type === 'assistantStart'){ shown = ''; pending = ''; doneSignaled = false; flushAll = false; current = makeStream(add('assistant', '')); setStreaming(true); }
     else if (m.type === 'assistantDelta'){ pending += m.text; ensurePump(); }
     else if (m.type === 'assistantDone'){ doneSignaled = true; ensurePump(); }

extensions/levelcode-ai/test/imageAttach.test.js

@@ -122,7 +122,7 @@ test('HOST: images become refs in the conversation, and bytes only at request ti
 
 test('CONVERSATION: blocks only when there is an image', () => {
 	const body = fnBody(ext, 'handleSend');
-	assert.match(body, /imageBlocks\.length\s*\n?\s*\?\s*\{ role: 'user', content: \[\.\.\.imageBlocks/,
+	assert.match(body, /\[\.\.\.imageBlocks, \{ type: 'text', text: userContent \}\]/,
 		'images lead the block array');
 	assert.match(body, /:\s*\{ role: 'user', content: userContent \}/,
 		'a text-only turn must stay a plain string, or every cached prefix churns');
@@ -137,7 +137,7 @@ test('AGENT MODE: the default path carries images too', () => {
 	assert.match(ext, /async function agentFlow\(text, imageBlocks\)/, 'agentFlow must accept them');
 	const body = fnBody(ext, 'agentFlow');
 	assert.match(body, /imageBlocks && imageBlocks\.length/, 'and use them when present');
-	assert.match(body, /content: \[\.\.\.imageBlocks, \{ type: 'text', text \}\]/, 'images lead the goal');
+	assert.match(body, /\[\.\.\.imageBlocks, \{ type: 'text', text \}\]/, 'images lead the goal');
 	assert.match(body, /:\s*\{ role: 'user', content: text \}/,
 		'a text-only goal must stay a plain string, or every cached agent prefix churns');
 });
@@ -151,4 +151,39 @@ test('NO WORKSPACE: an image still has somewhere to live', () => {
 	assert.ok(!/Images need a session/.test(ext), 'the old session-required refusal must be gone');
 });
 
+test('400: an image with no words must not emit an empty text block', () => {
+	// Anthropic rejects it outright — "text content blocks must be non-empty" — and an image sent
+	// with no words produced exactly that. Both paths must omit the block rather than send "".
+	const send = fnBody(ext, 'handleSend');
+	assert.match(send, /userContent \? \[\.\.\.imageBlocks/, 'handleSend must gate the text block on there being text');
+	assert.match(send, /:\s*imageBlocks\b/, 'handleSend must fall back to the images alone');
+
+	const agent = fnBody(ext, 'agentFlow');
+	assert.match(agent, /text \? \[\.\.\.imageBlocks/, 'agentFlow must gate the text block on there being text');
+	assert.match(agent, /:\s*imageBlocks\b/, 'agentFlow must fall back to the images alone');
+});
+
+test('CSP: the webview is allowed to render a data: image, and nothing else', () => {
+	// default-src 'none' blocks every image, which is why the first thumbnail rendered broken.
+	const csp = fnBody(ext, 'webviewCsp');
+	assert.match(csp, /"img-src data:"/, 'attached images cannot render without this');
+	assert.ok(!/img-src[^"]*https:/.test(csp), 'the panel must not be able to fetch a remote image');
+});
+
+test('PICKER + DROP: a Finder file reaches the same normalizer as a paste', () => {
+	// VS Code's workbench intercepts OS file drops before a webview iframe sees them, so
+	// dataTransfer.files is usually empty for a Finder drag while the PATH is still there.
+	assert.match(html, /getData\('text\/uri-list'\)/, 'no uri-list fallback for the VS Code drop case');
+	assert.match(html, /type: 'attachImagePaths'/, 'paths must be handed to the host to read');
+	assert.match(ext, /case 'attachImagePaths'/, 'the host must accept them');
+	assert.match(ext, /case 'pickImages'/, 'and offer a picker that works regardless');
+	assert.match(ext, /showOpenDialog\(/, 'the picker must be a real file dialog');
+
+	const reader = fnBody(ext, 'attachImagePaths');
+	assert.match(reader, /25 \* 1024 \* 1024/, 'guard the size BEFORE base64 crosses the message bus');
+	assert.match(reader, /is not an image LevelCode can read/, 'a non-image must say so, not fail silently');
+	assert.match(html, /function b64ToFile/, 'host bytes must become a File so both routes share normalizeImage');
+	assert.match(html, /id="attachImg"/, 'there must be a visible way in besides paste');
+});
+
 console.log('\nimageAttach: ' + n + ' tests passed.');