'
@@ -2049,7 +2269,11 @@
// ONE outcome glyph, in the rail. While running the rail carried a spinner and the head carried
// dots; a finished group must not go on wearing either. The rail states the outcome, so the
// trailing state clears on success and speaks up only when something failed.
+ // The outcome lives IN the line now, not on a rail: a small glyph ahead of the summary, the
+ // same weight as the text it sits beside. The rail node is still set for the ungrouped path.
if (g.node){ g.node.innerHTML = codicon(g.failed ? 'circle-slash' : 'check-circle'); }
+ const mark = g.el.querySelector('.groupmark');
+ if (mark){ mark.innerHTML = codicon(g.failed ? 'circle-slash' : 'check'); }
g.state.innerHTML = g.failed ? codicon('circle-slash') : '';
g.state.className = 'cmdstate groupstate ' + (g.failed ? 'bad' : 'ok');
g.stopBtn.hidden = true;
@@ -2367,8 +2591,8 @@
'
'
+ '
'
- + '' + codicon('chevron-down') + ''
+ '' + (m.background ? 'Running in background' : 'Running') + ''
+ + '' + codicon('chevron-down') + ''
+ '' + chips + ''
+ '' + LC_DOTS + ''
+ '
'
@@ -3055,22 +3279,275 @@
function caretAtFirstLine(el){ return el.value.lastIndexOf('\n', el.selectionStart - 1) === -1; }
function caretAtLastLine(el){ return el.value.indexOf('\n', el.selectionEnd) === -1; }
function histSet(text){ input.value = text; auto(); const n = text.length; try { input.setSelectionRange(n, n); } catch (e) {} }
- function doSend(){
+ async function doSend(){
if (streaming) { flushAll = true; ensurePump(); vscode.postMessage({ type: 'stop' }); return; }
- const t = input.value.trim(); if (!t) return;
- cmdHistory.push(t); if (cmdHistory.length > 200) { cmdHistory.shift(); } // record for ↑/↓ recall
+ const t = input.value.trim();
+ // An image with no words is a real message — "look at this" is implied by attaching it.
+ if (!t && !pendingImages.length) return;
+
+ // Wait for anything still decoding. A placeholder chip carries no bytes, so sending now would
+ // post an attachment with undefined media_type and base64 — refused host-side, and the image
+ // would vanish from a message the user watched themselves attach.
+ if (inflightImages.size) {
+ note('Still preparing ' + inflightImages.size + ' image' + (inflightImages.size === 1 ? '' : 's') + '…');
+ for (let i = 0; i < 200 && inflightImages.size; i++) { await new Promise(function(r){ setTimeout(r, 50); }); }
+ const el = document.getElementById('imgnote'); if (el) { el.hidden = true; }
+ if (inflightImages.size) { note('An image is taking too long to prepare — remove it or try again.'); return; }
+ }
+ // Nothing may be sent while a placeholder survives: a decode that failed silently would
+ // otherwise ride along as an empty attachment.
+ if (pendingImages.some(function(i){ return i.loading; })) {
+ note('An image did not finish preparing — remove it and try again.'); return;
+ }
+
+ // RE-CHECK the model. The attach-time gate is not enough: a model can be switched between
+ // attaching and sending, and this path would otherwise hand images to a model that cannot read
+ // them. Refuse without discarding anything the user typed or attached.
+ if (pendingImages.length && !canSeeImages) {
+ note((canSeeImagesModel || 'The selected model') + ' cannot read images. Switch back to a vision model, or remove the attachments.');
+ return;
+ }
+ if (t) { cmdHistory.push(t); if (cmdHistory.length > 200) { cmdHistory.shift(); } } // record for ↑/↓ recall
histIdx = -1; histDraft = '';
// Slash commands — handled locally (deterministic, no LLM call).
if (/^\/skills\b/i.test(t)){ add('user', esc(t)); forceStick(); input.value = ''; auto(); vscode.postMessage({ type: 'listSkills' }); return; }
if (/^\/mcp\b/i.test(t)){ add('user', esc(t)); forceStick(); input.value = ''; auto(); vscode.postMessage({ type: 'listMcp' }); return; }
if (/^\/sessions\b/i.test(t)){ input.value = ''; auto(); openSessions(); return; }
if (/^\/rme\b/i.test(t)){ add('user', esc(t)); forceStick(); input.value = ''; auto(); addReminder(); return; }
- add('user', render(t)); forceStick(); input.value = ''; auto();
- vscode.postMessage({ type: 'send', text: t });
+ const imgs = pendingImages.map(function(i){
+ return { media_type: i.media_type, base64: i.base64, w: i.w, h: i.h, bytes: i.bytes };
+ });
+ add('user', (imgs.length ? imgs.map(function(i, k){
+ return '
 + ')
';
+ }).join('') : '') + render(t));
+ forceStick(); input.value = ''; auto(); clearImages(); renderChips();
+ vscode.postMessage({ type: 'send', text: t, images: imgs });
+ }
+
+ // ── attached images ───────────────────────────────────────────────────────────────────────────
+ // Paste a screenshot, ask about it. Normalization happens HERE, before the bytes cross to the
+ // host, because this is the only place that has the decoded pixels.
+ //
+ // THE CAP IS 2000px ON THE LONG EDGE, and it is not a guess. Claude Code ships exactly this —
+ // every image it re-encodes is 2000 on the long edge — and it is the threshold the vision docs
+ // name for staying clear of the stricter per-image dimension limit that applies once a request
+ // carries more than 20 images. It is also well above either model tier's own cap, so the server
+ // does the final downscale and we never throw away fidelity it would have kept.
+ //
+ // UNDER THE CAP, THE ORIGINAL BYTES GO THROUGH UNTOUCHED — same rule, same reason: re-encoding
+ // an image that did not need resizing only stacks compression artifacts, and that is worst on
+ // screenshots of code, which is most of what gets pasted.
+ // Whether the SELECTED model can read images. Pushed with the model so an attachment is refused
+ // before anything is typed and lost, rather than after a send the provider would reject.
+ let canSeeImages = false;
+ let canSeeImagesModel = '';
+ const IMG_CAP = 2000;
+ // How many images may ride one message. Configurable because the cost is real: each image is
+ // ~1,800-3,000 input tokens, so a maxed-out message is a five-figure prompt before a word is typed.
+ let IMG_MAX_PER_TURN = 5;
+ const IMG_OK = { 'image/png': 1, 'image/jpeg': 1, 'image/gif': 1, 'image/webp': 1 };
+ let pendingImages = []; // { id, url, w, h, media_type, base64, bytes }
+ let imgSeq = 0;
+ // Normalization is async, and a placeholder chip carries no bytes. Sending mid-decode would post
+ // an attachment with undefined media_type/base64 — the host would refuse it and the image would
+ // be silently lost from a message the user watched themselves attach. Track the work so doSend
+ // can wait for it.
+ const inflightImages = new Set();
+
+ /**
+ * A user-facing "that did not work" line, shown WHERE IT HAPPENED — directly under the composer,
+ * beside the attachment that failed.
+ *
+ * This used to post to the host and surface as a VS Code notification in the far corner of the
+ * window. That is the wrong place for it: the notification appears seconds after the paste, a
+ * long way from the thing the person is looking at, and it outlives the moment it describes.
+ * Attachment problems are small, immediate and local, so the message should be too.
+ */
+ let noteTimer = null;
+ function note(t){
+ const text = String(t || ''); if (!text) { return; }
+ const el = document.getElementById('imgnote'); if (!el) { return; }
+ el.textContent = text;
+ el.hidden = false;
+ clearTimeout(noteTimer);
+ // Long enough to read a sentence; short enough that it does not linger over the next attempt.
+ noteTimer = setTimeout(function(){ el.hidden = true; }, 6000);
+ }
+
+ function fmtKB(n){ return n >= 1024 * 1024 ? (n / 1048576).toFixed(1) + ' MB' : Math.max(1, Math.round(n / 1024)) + ' KB'; }
+
+ /** Blob -> base64 payload, no data: prefix. */
+ function blobToBase64(blob){
+ return new Promise(function(res, rej){
+ const r = new FileReader();
+ r.onload = function(){ const s2 = String(r.result || ''); res(s2.slice(s2.indexOf(',') + 1)); };
+ r.onerror = function(){ rej(new Error('could not read the image')); };
+ r.readAsDataURL(blob);
+ });
+ }
+
+ /** Decode, downscale only if over the cap, re-encode only if we resized. Never scales up. */
+ async function normalizeImage(file){
+ if (!IMG_OK[file.type]) { throw new Error('that image format is not supported — use PNG, JPEG, GIF or WebP'); }
+ let bmp;
+ try { bmp = await createImageBitmap(file); }
+ catch (e) { throw new Error('that file could not be read as an image'); }
+ const w = bmp.width, h = bmp.height;
+ const scale = Math.min(1, IMG_CAP / Math.max(w, h));
+ if (scale === 1) {
+ // Pass-through: the bytes we already have, in the format they arrived in.
+ bmp.close && bmp.close();
+ return { w: w, h: h, media_type: file.type, base64: await blobToBase64(file), bytes: file.size };
+ }
+ const tw = Math.round(w * scale), th = Math.round(h * scale);
+ // OffscreenCanvas keeps the decode and the draw off the layout path; a 4K decode on the main
+ // thread is a visible stall in a chat window.
+ const cv = (typeof OffscreenCanvas !== 'undefined') ? new OffscreenCanvas(tw, th)
+ : Object.assign(document.createElement('canvas'), { width: tw, height: th });
+ const g = cv.getContext('2d');
+ g.imageSmoothingEnabled = true; g.imageSmoothingQuality = 'high';
+ g.drawImage(bmp, 0, 0, tw, th);
+ bmp.close && bmp.close();
+ const blob = cv.convertToBlob ? await cv.convertToBlob({ type: 'image/webp', quality: 0.92 })
+ : await new Promise(function(r){ cv.toBlob(r, 'image/webp', 0.92); });
+ if (!blob) { throw new Error('the image could not be resized'); }
+ 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; }
+ if (!canSeeImages) {
+ note((canSeeImagesModel || 'This model') + ' cannot read images. Switch to a vision model — '
+ + 'Claude, GPT-4o and Gemini all read them — and paste again.');
+ return true;
+ }
+ for (let fi = 0; fi < list.length; fi++) {
+ const f = list[fi];
+ if (pendingImages.length >= IMG_MAX_PER_TURN) {
+ // From the position in THIS batch, not from the tray total. Subtracting the tray from the
+ // batch goes negative the moment the tray already holds more than the batch does — four
+ // attached, cap five, drop two, and the message claimed "-3 were not attached".
+ const dropped = list.length - fi;
+ note('Up to ' + IMG_MAX_PER_TURN + ' images per message. '
+ + (dropped > 0 ? dropped + ' not attached — ' : '') + 'remove one to add another.');
+ break;
+ }
+ // A placeholder goes in FIRST. Decoding and re-encoding a 4K screenshot takes long enough to
+ // read as "nothing happened", and the honest fix is to show the attachment immediately rather
+ // than to make the work faster. The chip is replaced in place when the bytes are ready.
+ const id = 'img' + (++imgSeq);
+ pendingImages.push({ id: id, loading: true, name: f.name || 'image' });
+ renderChips();
+ inflightImages.add(id);
+ try {
+ const im = await normalizeImage(f);
+ im.id = id;
+ im.url = 'data:' + im.media_type + ';base64,' + im.base64;
+ const at = pendingImages.findIndex(function(x){ return x.id === id; });
+ if (at < 0) { continue; } // removed while it was decoding — respect that
+ pendingImages[at] = im;
+ renderChips();
+ } catch (e) {
+ pendingImages = pendingImages.filter(function(x){ return x.id !== id; });
+ renderChips();
+ note(String((e && e.message) || e));
+ } finally {
+ inflightImages.delete(id);
+ }
+ }
+ return true;
}
+ function removeImage(id){ pendingImages = pendingImages.filter(function(i){ return i.id !== id; }); renderChips(); }
+
+ /** Full-size view of an attachment. Escape or a click anywhere closes it. */
+ function zoomImage(src){
+ const z = document.getElementById('imgzoom'); if (!z || !src) { return; }
+ z.querySelector('img').src = src;
+ z.hidden = false;
+ }
+ function closeZoom(){ const z = document.getElementById('imgzoom'); if (z) { z.hidden = true; z.querySelector('img').src = ''; } }
+ document.getElementById('imgzoom').addEventListener('click', closeZoom);
+ document.addEventListener('keydown', function(e){
+ if (e.key === 'Escape' && !document.getElementById('imgzoom').hidden) { e.stopPropagation(); closeZoom(); }
+ }, true);
+ // Delegated so it covers both the composer tray and every image already in the transcript.
+ document.addEventListener('click', function(e){
+ const t = e.target;
+ if (!t || !(t.classList && (t.classList.contains('imgthumb') || t.classList.contains('msgimg')))) { return; }
+ const im = pendingImages.find(function(x){ return x.id === t.getAttribute('data-img'); });
+ zoomImage(im ? im.url : t.getAttribute('src'));
+ });
+
+ /** Reflect how full the image tray is on the attach button, so the cap is visible before it bites. */
+ function syncAttachImgBtn(){
+ const b = document.getElementById('attachImg'); if (!b) { return; }
+ const n = pendingImages.length, full = n >= IMG_MAX_PER_TURN;
+ b.classList.toggle('atcap', full);
+ b.title = full
+ ? ('Image limit reached (' + n + '/' + IMG_MAX_PER_TURN + ') — remove one to attach another')
+ : (n ? ('Attach an image (' + n + '/' + IMG_MAX_PER_TURN + ') — or paste with ⌘V')
+ : 'Attach an image — or paste a screenshot with ⌘V');
+ }
+ function clearImages(){ pendingImages = []; inflightImages.clear(); }
+
+ /** Everything a fresh conversation must forget about attachments. */
+ function resetImages(){ clearImages(); renderChips(); const el = document.getElementById('imgnote'); if (el) { el.hidden = true; } }
+
+ // Paste is the primary way in — the whole interaction is screenshot, then Cmd+V.
+ input.addEventListener('paste', function(ev){
+ const d = ev.clipboardData; if (!d) { return; }
+ const files = d.files && d.files.length ? d.files
+ : Array.from(d.items || []).filter(function(i){ return i.kind === 'file'; }).map(function(i){ return i.getAsFile(); });
+ const imgs = Array.from(files || []).filter(function(f){ return f && /^image\//.test(f.type); });
+ if (!imgs.length) { return; } // a normal text paste is untouched
+ ev.preventDefault();
+ attachImageFiles(imgs);
+ });
+
+ // Drop anywhere in the panel, not just on the composer — the transcript is the bigger target.
+ document.addEventListener('dragover', function(ev){
+ if (ev.dataTransfer && Array.from(ev.dataTransfer.types || []).indexOf('Files') >= 0) {
+ ev.preventDefault(); document.body.classList.add('dropping');
+ }
+ });
+ document.addEventListener('dragleave', function(ev){ if (!ev.relatedTarget) { document.body.classList.remove('dropping'); } });
+ document.addEventListener('drop', function(ev){
+ document.body.classList.remove('dropping');
+ 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();
+ 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
@@ -3626,6 +4103,8 @@
mEl.title = (m.providerLabel || (m.provider === 'claude' ? 'Claude' : m.provider)) + ' · ' + m.model + ' — click to change';
// Update the footer context-window meter to the newly-selected model's real window.
if (typeof m.contextLimit === 'number'){ renderContext({ limit: m.contextLimit }); }
+ if (typeof m.canSeeImages === 'boolean'){ canSeeImages = m.canSeeImages; canSeeImagesModel = label; }
+ if (typeof m.maxImages === 'number' && m.maxImages > 0){ IMG_MAX_PER_TURN = m.maxImages; renderChips(); }
lastProvider = m.provider || '';
lastModelId = m.modelId || m.model || ''; // gateway sends modelId (the real id); BYOK model IS the id
// calm-transcript toggle. Turning it OFF mid-run closes any open group first, so the timeline
@@ -3633,6 +4112,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(); }
@@ -3692,6 +4174,7 @@
else if (m.type === 'context'){ selLabel = m.label; renderChips(); }
else if (m.type === 'clearContext'){ selLabel = null; renderChips(); }
else if (m.type === 'reset'){
+ resetImages(); // a new conversation must not inherit the previous one's attachments
log.innerHTML = '
New chat
Ask about your code, or describe what to build.
';
// Wiping the log detaches any open group; drop the dangling refs so the next run starts clean —
// otherwise groupAppend() appends into a disconnected .groupbody (nothing shows), and a stale
diff --git a/extensions/levelcode-ai/package.json b/extensions/levelcode-ai/package.json
index abf3e24..ac75eee 100644
--- a/extensions/levelcode-ai/package.json
+++ b/extensions/levelcode-ai/package.json
@@ -142,6 +142,12 @@
"category": "LevelCode",
"icon": "$(book)"
},
+ {
+ "command": "levelcode.ai.attachImage",
+ "title": "AI: Attach Image to Chat",
+ "category": "LevelCode",
+ "icon": "$(device-camera)"
+ },
{
"command": "levelcode.ai.sketch",
"title": "AI: Agent Sketch…",
@@ -234,6 +240,11 @@
"when": "activeWebviewPanelId == 'levelcode.ai.chat'",
"group": "navigation@3"
},
+ {
+ "command": "levelcode.ai.attachImage",
+ "when": "resourceExtname =~ /\\.(png|jpe?g|gif|webp)$/",
+ "group": "navigation@0"
+ },
{
"command": "levelcode.ai.setApiKey",
"when": "activeWebviewPanelId == 'levelcode.ai.chat'",
@@ -400,6 +411,13 @@
"maximum": 24,
"markdownDescription": "Font size for chat **prose** (message bodies), in pixels. `0` tracks the editor's UI font size, one step larger for reading — a 13px workbench gives 14px prose.\n\nThe workbench size is tuned for menu labels and tree rows; message bodies read a step above it so a long answer is comfortable. Controls, cards and the composer always match the workbench exactly. Values are clamped to 8–24."
},
+ "levelcode.ai.chat.maxImagesPerMessage": {
+ "type": "number",
+ "default": 5,
+ "minimum": 1,
+ "maximum": 20,
+ "markdownDescription": "How many images may be attached to one message. Each image costs roughly **1,800–3,000 input tokens**, so a full message is a five-figure prompt before you type a word. Clamped to 1–20 at the boundary — the API's own ceiling is 20 per message."
+ },
"levelcode.ai.chat.proseWidth": {
"type": "number",
"default": 0,
diff --git a/extensions/levelcode-ai/providers/catalog.js b/extensions/levelcode-ai/providers/catalog.js
index 3ee6c76..af2af3c 100644
--- a/extensions/levelcode-ai/providers/catalog.js
+++ b/extensions/levelcode-ai/providers/catalog.js
@@ -116,6 +116,38 @@ function supportsToolsForModel(providerId, modelId) {
return modelCaps(modelId).tools !== false;
}
+/**
+ * Whether an image may be attached for this provider+model.
+ *
+ * Deliberately STRICTER than supportsToolsForModel. That one defaults unknown models to tools:true,
+ * because most modern chat models have tools and refusing the agent is the bigger loss. Vision
+ * inverts that trade: an unknown model is assumed NOT to see. Attaching to a blind model costs the
+ * user a composed message and returns a provider error (or, worse, a confident answer about text
+ * alone); a disabled attach button that names a model which can see costs them one click. The
+ * catalog already marks every vision model we know, and heuristicCaps covers the big families, so
+ * the strict default bites only on genuinely unrecognised ids.
+ */
+function supportsVisionForModel(providerId, modelId) {
+ const p = getProvider(providerId);
+ if (!p) { return false; }
+ // The PROVIDER gate first, exactly as supportsToolsForModel does. Without it this checked only
+ // the model id, so `custom` — an arbitrary OpenAI-compatible endpoint with no declared vision
+ // capability — returned true for any model whose NAME looked like a vision model, and the
+ // attachment gate would hand images to an endpoint nobody said could read them.
+ //
+ // The registry ENUMERATES vision providers — anthropic, openai, openrouter and the gateway
+ // declare `vision: true`; ollama and `custom` deliberately do not. Reading only the model id
+ // ignored that: `custom` is an arbitrary user-supplied endpoint, and any model NAMED like a
+ // vision model would have been handed images nobody said it could read.
+ //
+ // So both halves must agree, exactly as supportsToolsForModel requires both. A custom endpoint
+ // that does serve a vision model needs `vision: true` on its registry entry to opt in; there is
+ // deliberately no per-user override, because the honest place to declare a provider's
+ // capabilities is the provider registry.
+ if (!(p.caps && p.caps.vision === true)) { return false; }
+ return modelCaps(modelId).vision === true;
+}
+
/** The model's context window (tokens), or `fallback` (then 200000) when unknown. */
function contextWindowFor(providerId, modelId, fallback) {
return modelCaps(modelId).context || fallback || 200000;
@@ -238,7 +270,7 @@ async function getModelChoices(providerId, opts) {
module.exports = {
CAPS, modelCaps, baseName, heuristicCaps,
- supportsToolsForModel, contextWindowFor, fastCompletionModel,
+ supportsToolsForModel, supportsVisionForModel, contextWindowFor, fastCompletionModel,
describeCaps, describeModel,
mapOpenRouterModels, mapModelIds, fetchModels, getModelChoices
};
diff --git a/extensions/levelcode-ai/providers/translate.js b/extensions/levelcode-ai/providers/translate.js
index 41df2f0..89e414d 100644
--- a/extensions/levelcode-ai/providers/translate.js
+++ b/extensions/levelcode-ai/providers/translate.js
@@ -33,6 +33,30 @@ function toOpenAITools(tools) {
}));
}
+/**
+ * Anthropic image block → OpenAI `image_url` part.
+ *
+ * Anthropic carries the bytes in `source` (base64 + media_type, or a url); OpenAI-compatible APIs take
+ * one `url` field that is either a real URL or a `data:` URI. Everything else about the block is ours.
+ */
+function toOpenAIImagePart(b) {
+ const src = b && b.source;
+ if (!src) { throw new Error('translate: image block has no source'); }
+ if (src.type === 'url') {
+ if (!src.url) { throw new Error('translate: image block has a url source with no url'); }
+ return { type: 'image_url', image_url: { url: src.url } };
+ }
+ if (src.type === 'base64') {
+ if (!src.media_type || !src.data) {
+ throw new Error('translate: image block is missing media_type or data');
+ }
+ return { type: 'image_url', image_url: { url: 'data:' + src.media_type + ';base64,' + src.data } };
+ }
+ // `file` (Files API) is Anthropic-only — there is no OpenAI equivalent to translate it to, so
+ // refuse rather than send a request whose subject is missing.
+ throw new Error('translate: image source type not supported on this provider: ' + String(src.type));
+}
+
/** Coerce a tool_result's content (string | array of blocks | other) to a plain string for OpenAI. */
function toolResultText(content) {
if (typeof content === 'string') { return content; }
@@ -82,6 +106,17 @@ function toOpenAIMessages(system, messages, opts) {
function: { name: b.name, arguments: JSON.stringify(b.input == null ? {} : b.input) }
});
}
+ // Reasoning an assistant produced is not something an OpenAI-shaped request carries,
+ // and re-sending it is not required to continue a conversation — dropping it is a
+ // deliberate translation, not a loss, so it is named rather than left to the
+ // fall-through below.
+ else if (b.type === 'thinking' || b.type === 'redacted_thinking') { continue; }
+ else {
+ // Same rule as the user loop. A block type we do not understand is a bug in us,
+ // and a request that silently loses part of an assistant turn desynchronises the
+ // conversation the model is asked to continue.
+ throw new Error('translate: unsupported content block in an assistant message: ' + String(b.type));
+ }
}
const msg = { role: 'assistant', content: text ? text : null };
if (toolCalls.length) { msg.tool_calls = toolCalls; }
@@ -92,15 +127,34 @@ function toOpenAIMessages(system, messages, opts) {
if (typeof m.content === 'string') { out.push({ role: 'user', content: m.content }); continue; }
const blocks = Array.isArray(m.content) ? m.content : [];
let trailingText = '';
+ const images = [];
for (const b of blocks) {
if (!b) { continue; }
if (b.type === 'tool_result') {
out.push({ role: 'tool', tool_call_id: b.tool_use_id, content: toolResultText(b.content) });
} else if (b.type === 'text') {
trailingText += (trailingText ? '\n' : '') + (b.text || '');
+ } else if (b.type === 'image') {
+ images.push(toOpenAIImagePart(b));
+ } else {
+ // Loudly, not silently. This loop used to fall through on anything it did not
+ // recognise, so a block type it had never seen vanished between the composer and
+ // the wire with no error and no log line — the model would then answer confidently
+ // about content it was never sent. A type we do not understand is a bug in us.
+ throw new Error('translate: unsupported content block in a user message: ' + String(b.type));
}
}
- if (trailingText) { out.push({ role: 'user', content: trailingText }); }
+ // Images first: the model reads them best before the text that asks about them, and it keeps
+ // markLastOpenAICacheable's breakpoint on a text block rather than on an image.
+ if (images.length) {
+ const content = images.slice();
+ if (trailingText) { content.push({ type: 'text', text: trailingText }); }
+ out.push({ role: 'user', content });
+ } else if (trailingText) {
+ // No image — keep the plain string. Widening every text-only turn to a block array would
+ // change the bytes of every cached prefix for no gain.
+ out.push({ role: 'user', content: trailingText });
+ }
}
if (cache) { markLastOpenAICacheable(out); }
return out;
diff --git a/extensions/levelcode-ai/sessions.js b/extensions/levelcode-ai/sessions.js
index b133591..bf02307 100644
--- a/extensions/levelcode-ai/sessions.js
+++ b/extensions/levelcode-ai/sessions.js
@@ -19,6 +19,7 @@ const store = require('./sessionStore');
const events = require('./sessionEvents');
const planner = require('./sessionResume');
const memory = require('./sessionMemory');
+const imageStore = require('./imageStore');
/**
* @param {{ root: string, slug: string, projectPath: string,
@@ -326,13 +327,35 @@ function createSessions(opts) {
}
/** Where this project's memory lives (for opening it — the transparency promise). */
function memoryPaths() { return { dir: memory.memoryDir(root, slug), journal: memory.journalFile(root, slug), memoryMd: memory.memoryMdFile(root, slug) }; }
+ /**
+ * Where attached images live: `media/` beside this project's sessions.
+ *
+ * PROJECT-scoped, not session-scoped, and nothing removes a file when a session goes away —
+ * sessions are append-only and `trash()` only writes a lifecycle event. `sweepMedia()` below is
+ * what actually bounds this.
+ */
+ function mediaRoot() { return { root, slug }; }
+
+ /**
+ * Delete images no session in this project refers to any more, and that are old enough not to
+ * belong to a live conversation. Returns { removed, bytes }; never throws.
+ */
+ function sweepMedia(maxAgeMs) {
+ try {
+ const keep = new Set();
+ for (const entry of list()) {
+ for (const ref of imageStore.refsIn(transcript(entry.id) || [])) { keep.add(ref); }
+ }
+ return imageStore.sweep(root, slug, keep, maxAgeMs);
+ } catch (e) { return { removed: 0, bytes: 0 }; }
+ }
/** The session index for this project (what the panel/view list). Empty (never throws) if unreadable. */
function list() { try { return store.loadIndex(root, slug).entries; } catch (e) { return []; } }
function liveId() { return live ? live.id : null; }
- return { ensure, recordTurn, seal, resume, fork, archive, trash, restore, setPinned, rename, autoArchiveStale, digest, consolidate, transcript, refineSummary, recall, recallFacts, memoryItems, forget, recordFacts, factsList, factAction, supersedeFact, memoryPaths, list, liveId };
+ return { ensure, recordTurn, seal, resume, fork, archive, trash, restore, setPinned, rename, autoArchiveStale, digest, consolidate, transcript, refineSummary, recall, recallFacts, memoryItems, forget, recordFacts, factsList, factAction, supersedeFact, memoryPaths, mediaRoot, sweepMedia, list, liveId };
}
module.exports = { createSessions };
diff --git a/extensions/levelcode-ai/test/contextAnnounce.test.js b/extensions/levelcode-ai/test/contextAnnounce.test.js
new file mode 100644
index 0000000..73998b9
--- /dev/null
+++ b/extensions/levelcode-ai/test/contextAnnounce.test.js
@@ -0,0 +1,72 @@
+/*---------------------------------------------------------------------------------------------
+ * The run's context is announced when it CHANGES, not every turn.
+ * run: node test/contextAnnounce.test.js
+ *
+ * Source-extraction: agent.js requires `vscode`, so the rule is pinned against the source rather
+ * than by running runAgent.
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+'use strict';
+
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const agent = fs.readFileSync(path.join(__dirname, '..', 'agent.js'), 'utf8');
+const ext = fs.readFileSync(path.join(__dirname, '..', 'extension.js'), 'utf8');
+
+let n = 0;
+function test(name, fn) { fn(); n++; console.log(' ok - ' + name); }
+
+test('COLLECTED, not posted: nothing is announced until the whole picture is known', () => {
+ // The MCP part of the picture is not known until setupMcp has run, so posting rules and memory
+ // before it would make the decision on incomplete information.
+ assert.match(agent, /const contextChips = \[\]/, 'the context chips must be collected');
+ assert.match(agent, /contextChips\.push\(\{ type: 'agentTool', icon: 'file', text: '📋 project rules/,
+ 'rules must be collected, not posted directly');
+ assert.match(agent, /contextChips\.push\(\{ type: 'agentTool', icon: 'history', text: '🧠 project memory/,
+ 'memory must be collected, not posted directly');
+ assert.match(agent, /if \(mcp\.announce\) \{ contextChips\.push\(mcp\.announce\); \}/,
+ 'the MCP line must join the same decision');
+ assert.match(agent, /built\.announce = \{/, 'setupMcp must hand its line back rather than post it');
+});
+
+test('SIGNATURE, not a flag: the announcement returns the moment anything moves', () => {
+ // A boolean would go quiet forever after the first run — a server dropping out, a rules file
+ // appearing, or memory arriving for the first time would all pass unmentioned.
+ assert.match(agent, /let lastContextSig = ''/, 'the memo must hold a signature');
+ assert.match(agent, /const sig = contextChips\.map\(\(c\) => c\.text\)\.join\('\|'\)/,
+ 'the signature must be built from what would actually be shown');
+ assert.match(agent, /if \(sig && sig !== lastContextSig\)/, 'and compared before announcing');
+ assert.ok(!/let announcedContext = (true|false)/.test(agent), 'a boolean memo is the bug this avoids');
+});
+
+test('FAILURES are news every time', () => {
+ // A server that broke must not be suppressed by a signature that happens to match.
+ const setup = agent.slice(agent.indexOf('async function setupMcp'), agent.indexOf('async function runAgent'));
+ for (const failing of ['setup failed', 'failed to start']) {
+ const at = setup.indexOf(failing);
+ assert.ok(at > 0, 'expected a failure path mentioning: ' + failing);
+ const line = setup.slice(setup.lastIndexOf('\n', at), setup.indexOf('\n', at));
+ assert.match(line, /ctx\.post\(/, 'a failure must post immediately, not be collected: ' + failing);
+ }
+});
+
+test('A NEW CHAT hears it again', () => {
+ // The suppression is about repetition WITHIN a conversation. A fresh conversation is a fresh
+ // slate and the context is news again.
+ assert.match(agent, /function resetContextAnnounce\(\) \{ lastContextSig = ''; \}/, 'no reset');
+ assert.match(agent, /module\.exports = \{ resetContextAnnounce,/, 'the reset must be exported');
+ assert.match(ext, /const \{ runAgent, resetContextAnnounce \} = require\('\.\/agent'\)/, 'and imported');
+ const reset = ext.slice(ext.indexOf('function resetConversationState'), ext.indexOf('function resetConversationState') + 900);
+ assert.match(reset, /resetContextAnnounce\(\)/, 'a conversation teardown must clear the memo');
+});
+
+test('EMPTY context does not pin the memo shut', () => {
+ // A run with no rules, no memory and no MCP must not leave a stale signature that suppresses the
+ // announcement once those things DO appear.
+ assert.match(agent, /\} else if \(!sig\) \{[\s\S]{0,120}lastContextSig = ''/,
+ 'an empty picture must clear the memo, not keep the last one');
+});
+
+console.log('\ncontextAnnounce: ' + n + ' tests passed.');
diff --git a/extensions/levelcode-ai/test/groupReducer.test.js b/extensions/levelcode-ai/test/groupReducer.test.js
index 4843999..b8cdf86 100644
--- a/extensions/levelcode-ai/test/groupReducer.test.js
+++ b/extensions/levelcode-ai/test/groupReducer.test.js
@@ -101,7 +101,7 @@ function newHarness(groupsOn) {
'collapseMember', 'groupAppend', 'refreshGroupHead', 'finalizeGroup', 'closeGroup',
'groupStepDone', 'groupStepCounts', 'addAgentLine', 'add'
].map(extract).join('\n')
- + '\nthis.api = { openGroup, groupAppend, closeGroup, groupStepDone, groupStepCounts, addAgentLine, add, get curGroup(){ return curGroup; } };';
+ + '\nthis.api = { openGroup, groupAppend, closeGroup, groupStepDone, groupStepCounts, addAgentLine, add, groupAggregate, chipStep, get curGroup(){ return curGroup; } };';
new Function('document', 'log', src).call(sandbox, { createElement: (t) => new El(t) }, log);
return { log, api: /** @type {any} */ (sandbox).api };
}
@@ -317,4 +317,83 @@ test('a new user message re-arms the label', () => {
assert.strictEqual(roleOf(h.log.children[4]), 'LevelCode AI', 'the next turn is labelled again');
});
+
+// ── the collapsed header must SAY something (the "3 steps" problem) ─────────────────────────────
+
+test('SETUP STEPS: a run that only loaded context says so, instead of counting', () => {
+ // This was the reported UX gap: rules + memory + MCP summarised as "3 steps", which tells nobody
+ // anything. They fell through chipStep into `note`, which contributes no phrase.
+ const S = newHarness().api;
+ const chip = (icon, text) => S.chipStep(icon, text, '', undefined, undefined);
+ const steps = [
+ chip('file', '📋 project rules · CLAUDE.md'),
+ chip('history', '🧠 project memory'),
+ chip('sparkle', '🔌 mcp · github (26) · 2/26 allow-listed')
+ ];
+ const out = S.groupAggregate(steps);
+ assert.ok(!/^\d+ steps$/.test(out), 'must not fall back to a bare count: ' + out);
+ assert.match(out, /project rules/, 'should name the rules it loaded');
+ assert.match(out, /memory/, 'and the memory');
+ assert.match(out, /MCP/, 'and the MCP connection');
+});
+
+test('SETUP STEPS: each kind is recognised, not lumped into note', () => {
+ const S = newHarness().api;
+ const chip = (icon, text) => S.chipStep(icon, text, '', undefined, undefined);
+ const kindOf = (icon, text) => chip(icon, text).kind;
+ assert.strictEqual(kindOf('file', '📋 project rules · CLAUDE.md'), 'rules');
+ assert.strictEqual(kindOf('history', '🧠 project memory'), 'memory');
+ assert.strictEqual(kindOf('history', '🧠 recalling: how auth works'), 'recall');
+ assert.strictEqual(kindOf('sparkle', '🧩 using skill: pdf'), 'skill');
+ assert.strictEqual(kindOf('globe', '🌐 preview · http://localhost:3000'), 'preview');
+ // A tool CALL through a server is different work from setup chatter about servers.
+ assert.strictEqual(kindOf('sparkle', '🔌 github · search_code'), 'mcpcall');
+ assert.strictEqual(kindOf('sparkle', '🔌 mcp · github (26) · 2/26 allow-listed'), 'mcp');
+});
+
+test('SETUP STEPS: real work still leads the sentence', () => {
+ // Setup is named, but never at the expense of what actually changed.
+ const S = newHarness().api;
+ const chip = (icon, text) => S.chipStep(icon, text, '', undefined, undefined);
+ const out = S.groupAggregate([
+ chip('file', '📋 project rules · CLAUDE.md'),
+ { kind: 'cmd' },
+ { kind: 'edit', path: 'src/a.ts' }
+ ]);
+ assert.ok(out.indexOf('a.ts') < out.indexOf('project rules'),
+ 'what changed must come before what was loaded: ' + out);
+});
+
+test('FALLBACK: an unrecognised step is named, not counted', () => {
+ const S = newHarness().api;
+ const out = S.groupAggregate([
+ S.chipStep('info', 'something unusual happened', '', undefined, undefined),
+ S.chipStep('info', 'and another', '', undefined, undefined)
+ ]);
+ assert.match(out, /^Something unusual happened and 1 more$/,
+ 'name the first and count the rest, sentence-cased like every other path: ' + out);
+});
+
+
+test('CHEVRON: the disclosure control TRAILS what it discloses', () => {
+ // "Ran 2 commands ⌄", not "⌄ Ran 2 commands" — matching the reference. Pinned on DOM order, not
+ // on CSS `order`, so the tab order and the visual order stay the same thing.
+ const html = fs.readFileSync(path.join(__dirname, '..', 'media', 'chat.html'), 'utf8');
+
+ const head = html.slice(html.indexOf("'
= 0, 'no function ' + name);
+ const open = src.indexOf('{', i);
+ let depth = 0;
+ for (let j = open; j < src.length; j++) {
+ if (src[j] === '{') { depth++; }
+ else if (src[j] === '}') { depth--; if (!depth) { return src.slice(open, j + 1); } }
+ }
+ assert.fail('unbalanced braces in ' + name);
+}
+
+test('CAP: the long edge cap is 2000 — the value Claude Code ships, not a guess', () => {
+ // Measured from Claude Code's own transcripts: every image it re-encodes is 2000 on the long
+ // edge. It is also the threshold the vision docs name for staying clear of the stricter
+ // per-image dimension limit above 20 images per request.
+ const m = /const IMG_CAP = (\d+);/.exec(html);
+ assert.ok(m, 'IMG_CAP is gone');
+ assert.strictEqual(m[1], '2000');
+});
+
+test('NEVER UPSCALE, and never re-encode what did not need resizing', () => {
+ const body = fnBody(html, 'normalizeImage');
+ assert.match(body, /Math\.min\(1,\s*IMG_CAP\s*\/\s*Math\.max\(w,\s*h\)\)/,
+ 'the scale must be clamped at 1 — upscaling costs bytes and tokens and adds nothing');
+ assert.match(body, /if \(scale === 1\)/, 'there must be a pass-through branch');
+ // The pass-through must forward the ORIGINAL file, in its original type.
+ const passthrough = body.slice(body.indexOf('if (scale === 1)'), body.indexOf('const tw ='));
+ assert.match(passthrough, /media_type:\s*file\.type/, 'pass-through must keep the source format');
+ assert.match(passthrough, /blobToBase64\(file\)/, 'pass-through must forward the ORIGINAL bytes');
+ assert.ok(!/canvas|drawImage|convertToBlob/i.test(passthrough),
+ 're-encoding an image that did not need resizing only stacks compression artifacts');
+});
+
+test('FORMATS: only what Claude accepts, and the webview and the store agree', () => {
+ const inWebview = (/const IMG_OK = \{([^}]*)\}/.exec(html) || [, ''])[1];
+ for (const t of ['image/png', 'image/jpeg', 'image/gif', 'image/webp']) {
+ assert.ok(inWebview.includes(t), 'webview should accept ' + t);
+ }
+ assert.ok(!/image\/svg|image\/tiff|image\/bmp/.test(inWebview), 'only the four Claude reads');
+ const store = fs.readFileSync(path.join(__dirname, '..', 'imageStore.js'), 'utf8');
+ for (const t of ['image/png', 'image/jpeg', 'image/gif', 'image/webp']) {
+ assert.ok(store.includes("'" + t + "'"), 'store should accept ' + t);
+ }
+});
+
+test('PASTE: a text paste is untouched; only an image paste is intercepted', () => {
+ const i = html.indexOf("input.addEventListener('paste'");
+ assert.ok(i > 0, 'no paste handler');
+ const body = html.slice(i, i + 900);
+ assert.match(body, /if \(!imgs\.length\) \{ return; \}/,
+ 'a paste with no image must fall through to normal text pasting');
+ assert.ok(body.indexOf('if (!imgs.length) { return; }') < body.indexOf('preventDefault'),
+ 'preventDefault must come AFTER the no-image bail, or plain text pasting breaks');
+});
+
+test('REFUSAL: a blind model refuses BEFORE anything typed is lost', () => {
+ // The composer clears on send, so refusing host-side would throw away what they wrote. The
+ // capability rides with the model instead, and the refusal happens at attach time.
+ const body = fnBody(html, 'attachImageFiles');
+ assert.match(body, /if \(!canSeeImages\)/, 'no vision gate at attach time');
+ assert.ok(body.indexOf('if (!canSeeImages)') < body.indexOf('normalizeImage'),
+ 'refuse before doing the decode work, not after');
+ assert.match(body, /cannot read images/, 'the refusal must say what is wrong');
+ assert.match(body, /Switch to a vision model/, '…and what to do about it');
+ assert.match(ext, /canSeeImages: supportsVisionForModel\(/, 'the host must publish the capability');
+ assert.strictEqual((ext.match(/canSeeImages: supportsVisionForModel\(/g) || []).length, 2,
+ 'both config paths — gateway and BYOK — must publish it, or one of them silently allows');
+});
+
+test('BUDGET: a per-turn image count, enforced where images are added', () => {
+ const body = fnBody(html, 'attachImageFiles');
+ assert.match(body, /IMG_MAX_PER_TURN/, 'no per-turn cap');
+ assert.match(body, /break;/, 'the cap must stop the loop, not just warn');
+ assert.match(body, /were not attached/, 'silently dropping attachments is the bug pattern');
+ assert.match(body, /remove one to add another/, 'and it must say how to make room');
+});
+
+test('SEND: an image with no words is a valid message', () => {
+ const body = fnBody(html, 'doSend');
+ assert.match(body, /if \(!t && !pendingImages\.length\) return;/,
+ '"look at this" is implied by attaching — an image alone must be sendable');
+ assert.match(body, /images: imgs/, 'the send payload must carry the images');
+ assert.match(body, /clearImages\(\)/, 'the tray must empty on send, or the next turn re-sends them');
+});
+
+test('HOST: images become refs in the conversation, and bytes only at request time', () => {
+ assert.match(ext, /case 'send': await handleSend\(msg\.text, msg\.images\)/, 'send must carry images');
+ const store = fnBody(ext, 'storeImages');
+ assert.match(store, /imageStore\.put\(/, 'bytes must go through the store');
+ assert.match(store, /type: 'image', ref/, 'the conversation must keep a ref, never the base64');
+ assert.ok(!/base64/.test(store.replace(/im\.base64/g, '')), 'no base64 should be retained host-side');
+
+ // A copy, not a mutation: agentMessages persists across runs and is what recordTurn writes.
+ const w = fnBody(ext, 'withImages');
+ assert.match(w, /msgs\.map\(/, 'withImages must map to a new array');
+ assert.match(w, /\{ \.\.\.msg, content:/, 'and copy each touched message rather than mutating it');
+ assert.ok(!/msg\.content\[|\.content\s*=/.test(w), 'must not write into the caller\'s messages');
+ for (const site of ['withImages(conversation)', 'withImages(agentMessages)']) {
+ assert.ok(ext.includes(site), 'the request must materialize at: ' + site);
+ }
+});
+
+test('CONVERSATION: blocks only when there is an image', () => {
+ const body = fnBody(ext, 'handleSend');
+ assert.match(body, /\[\.\.\.labelImages\(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');
+});
+
+test('AGENT MODE: the default path carries images too', () => {
+ // I shipped this broken. handleSend stored the bytes and then early-returned into agentFlow(text),
+ // which never saw them — so in the DEFAULT mode a pasted screenshot was written to disk and
+ // dropped. The exact silent-drop failure this whole feature exists to prevent.
+ assert.match(ext, /if \(agentMode\) \{ await agentFlow\(text, imageBlocks\); return; \}/,
+ 'agent mode must forward the image blocks');
+ 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, /\[\.\.\.labelImages\(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');
+});
+
+test('NO WORKSPACE: an image still has somewhere to live', () => {
+ // v1.1.0 deliberately made the agent answer with no folder open. Refusing a screenshot in that
+ // state would re-introduce the limitation that release removed.
+ const body = fnBody(ext, 'imageRoot');
+ assert.match(body, /sessionsManager\(\)/, 'prefer the project session dir when there is one');
+ assert.match(body, /_no-workspace/, 'and fall back when there is not');
+ 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 \? \[\.\.\.labelImages\(imageBlocks\)/, 'handleSend must gate the text block on there being text');
+ assert.match(send, /:\s*labelImages\(imageBlocks\)/, 'handleSend must fall back to the images alone');
+
+ const agent = fnBody(ext, 'agentFlow');
+ assert.match(agent, /text \? \[\.\.\.labelImages\(imageBlocks\)/, 'agentFlow must gate the text block on there being text');
+ assert.match(agent, /:\s*labelImages\(imageBlocks\)/, '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');
+});
+
+test('FINDER DROP: the workbench wins, so the recovery is one click from where it lands', () => {
+ // VS Code's workbench takes an OS file drop and OPENS the file before a webview iframe sees any
+ // event — the drop handler inside the panel never fires, and the uri-list fallback with it. The
+ // image the user meant to attach is therefore sitting in a tab. Offer it there.
+ const pick = fnBody(ext, 'pickImages');
+ assert.match(pick, /openImageTabs\(\)/, 'the picker must offer images already open in tabs');
+ assert.match(pick, /\(b\.active \? 1 : 0\) - \(a\.active \? 1 : 0\)/,
+ 'the active tab is the one they just dropped — it must come first');
+ assert.match(pick, /showOpenDialog\(/, 'and still fall through to a real file dialog');
+
+ const tabs = fnBody(ext, 'openImageTabs');
+ assert.match(tabs, /uri\.scheme !== 'file'/, 'only real files on disk can be read');
+ assert.match(tabs, /IMAGE_EXTS\.test/, 'and only images');
+ assert.match(tabs, /seen\.has\(uri\.fsPath\)/, 'the same file open in two groups must appear once');
+
+ // A button on the image tab's own title bar: that is where the drop lands.
+ const pkg = require('../package.json');
+ const menu = pkg.contributes.menus['editor/title']
+ .find((m) => m.command === 'levelcode.ai.attachImage');
+ assert.ok(menu, 'no attach button on the image editor title bar');
+ assert.match(menu.when, /png|jpe\?g/, 'it must only appear for images');
+ assert.match(menu.group, /^navigation/, 'in navigation, or it hides under the overflow menu');
+ assert.ok(pkg.contributes.commands.some((c) => c.command === 'levelcode.ai.attachImage' && c.icon),
+ 'the command needs an icon to render as a button');
+});
+
+test('REMOVE: the image × is not stolen by the generic chip handler', () => {
+ // The image × carries BOTH `x` and `imgx`, and both handlers assign .onclick rather than adding a
+ // listener — so whichever registers last silently wins. It did: clicking × posted removeContext
+ // with a null id and the image stayed attached. Excluded by selector, not by ordering, so it
+ // cannot come back the next time these two blocks move relative to each other.
+ const body = fnBody(html, 'renderChips');
+ assert.match(body, /querySelectorAll\('\.x:not\(\.imgx\)'\)/,
+ 'the generic chip handler must exclude image chips, or it overwrites the remove handler');
+ assert.match(body, /querySelectorAll\('\.imgx'\)/, 'image chips need their own handler');
+ assert.match(body, /removeImage\(/, '…which must actually remove the image');
+
+ // Focusable by keyboard, so it must be activatable by keyboard — reachable-but-dead is worse
+ // than not reachable.
+ assert.match(body, /onkeydown/, 'the × is role=button tabindex=0 and needs a key handler');
+ assert.match(body, /'Enter' \|\| e\.key === ' '/, 'Enter and Space both activate a button');
+
+ const rm = fnBody(html, 'removeImage');
+ assert.match(rm, /pendingImages\.filter/, 'remove must drop it from the pending list');
+ assert.match(rm, /renderChips\(\)/, 'and re-render, or the chip stays on screen');
+});
+
+test('CAP: one setting, honoured on every route in, and visible before it bites', () => {
+ // Each image is ~1,800-3,000 input tokens, so a maxed message is a five-figure prompt before a
+ // word is typed. The number must be the SAME everywhere or one route quietly allows more.
+ const pkg = require('../package.json');
+ const setting = pkg.contributes.configuration.properties['levelcode.ai.chat.maxImagesPerMessage'];
+ assert.ok(setting, 'no setting for the image cap');
+ assert.strictEqual(setting.default, 5);
+
+ // Clamped in code, not just in the settings editor — a hand-edited settings.json is unchecked.
+ const clamp = fnBody(ext, 'maxImagesPerMessage');
+ assert.match(clamp, /n < 1/, 'a zero or negative cap must not disable attaching entirely');
+ assert.match(clamp, /Math\.min\(Math\.floor\(n\), 20\)/, 'and it must be bounded above');
+
+ // Every route in uses it: the host path (drop + picker) and the webview path (paste + drop).
+ assert.match(ext, /\.slice\(0, maxImagesPerMessage\(\)\)/, 'the host path must use the setting');
+ assert.ok(!/slice\(0, 8\)/.test(ext), 'a hardcoded cap must not survive beside the setting');
+ assert.strictEqual((ext.match(/maxImages: maxImagesPerMessage\(\)/g) || []).length, 2,
+ 'both config paths must publish it, or one silently keeps the old default');
+ assert.match(html, /pendingImages\.length >= IMG_MAX_PER_TURN/,
+ 'the webview cap must be CUMULATIVE, not per-batch');
+ assert.match(fnBody(html, 'syncAttachImgBtn'), /Image limit reached/,
+ 'the cap should be visible on the button before it refuses anything');
+});
+
+test('UX: an attachment problem is reported where it happened, not in a corner toast', () => {
+ // This used to post to the host and surface as a VS Code notification in the far corner of the
+ // window — seconds later, a long way from the paste, and outliving the moment it described.
+ const body = fnBody(html, 'note');
+ assert.match(body, /getElementById\('imgnote'\)/, 'the notice must render in the composer');
+ assert.ok(!/postMessage/.test(body), 'it must no longer be thrown to a global notification');
+ assert.match(body, /setTimeout/, 'and it must clear itself rather than linger over the next try');
+ assert.match(html, /id="imgnote"/, 'the notice element is missing from the composer');
+ assert.match(html, /aria-live="polite"/, 'a screen reader must hear it too');
+});
+
+test('UX: a chip appears the instant you paste, before the decode finishes', () => {
+ // Decoding and re-encoding a 4K screenshot takes long enough to read as "nothing happened".
+ const body = fnBody(html, 'attachImageFiles');
+ assert.match(body, /loading: true/, 'no placeholder chip while the image is being prepared');
+ assert.ok(body.indexOf('loading: true') < body.indexOf('await normalizeImage'),
+ 'the placeholder must go in BEFORE the work, or it is not feedback');
+ assert.match(body, /at < 0.*continue|if \(at < 0\)/s,
+ 'an image removed mid-decode must stay removed, not reappear when its bytes arrive');
+ assert.match(body, /pendingImages\.filter/, 'a failed image must not leave its placeholder behind');
+ assert.match(fnBody(html, 'imgChip'), /im\.loading/, 'the chip must render the loading state');
+});
+
+test('UX: the chip says what the image will cost, compactly', () => {
+ // This product meters credits per turn and an image is not a rounding error. Someone deciding
+ // whether to attach three should see that before they send, not after they are billed.
+ const chip = fnBody(html, 'imgChip');
+ assert.match(chip, /imgTokens\(im\.w, im\.h\)/, 'the chip must compute a real token cost');
+ assert.match(chip, /toFixed\(1\) \+ 'k'/, 'compact on the chip — full width wraps the tray');
+ assert.match(chip, /input tokens/, 'the exact figure belongs in the tooltip');
+
+ const t = fnBody(html, 'imgTokens');
+ assert.match(t, /Math\.ceil\(w \/ 28\) \* Math\.ceil\(h \/ 28\)/, 'must be the real 28px patch formula');
+ assert.match(t, /4784/, 'and clamped to the tier ceiling the server enforces anyway');
+});
+
+test('UX: a thumbnail can be opened full size, and closed again', () => {
+ // A 28px thumb cannot tell you WHICH screenshot you attached — the one thing worth checking
+ // before sending.
+ assert.match(html, /id="imgzoom"/, 'no full-size view');
+ assert.match(html, /aria-modal="true"/, 'the overlay should announce itself as a dialog');
+ const z = fnBody(html, 'closeZoom');
+ assert.match(z, /src = ''/, 'closing must drop the src, or the bytes stay live in the DOM');
+ assert.match(html, /e\.key === 'Escape'/, 'Escape must close it');
+ assert.match(html, /classList\.contains\('msgimg'\)/, 'transcript images must open too, not just the tray');
+});
+
+// ── review of #90 ───────────────────────────────────────────────────────────────────────────────
+
+test('METER: compaction costs images at the ACTIVE model tier, not the default', () => {
+ // estimateMsgTokens takes a modelId to pick the resolution tier — 4,784 visual tokens on high-res
+ // against 1,568 on standard. Both compaction call sites omitted it, so every screenshot was
+ // costed at a third of what a Claude 4.7+ model is actually charged, contradicting the module's
+ // own "never under-count" rule.
+ assert.strictEqual((ext.match(/estimateMsgTokens\(msgs, meterModel\(\)\)/g) || []).length, 2,
+ 'both before/after call sites must pass the active model');
+ assert.ok(!/estimateMsgTokens\(msgs\)\s*;/.test(ext), 'no bare call may survive');
+ const m = fnBody(ext, 'meterModel');
+ assert.match(m, /gateway/, 'the gateway model must resolve like currentContextLimit does');
+ assert.match(m, /activeModel\(cfg, currentProviderId\(\)\)/, '…and BYOK the same way');
+});
+
+test('CAP: the not-attached count is taken from the batch, and can never go negative', () => {
+ // It subtracted the whole tray from the batch size: four attached, cap five, drop two, and the
+ // message claimed "-3 not attached".
+ const body = fnBody(html, 'attachImageFiles');
+ assert.match(body, /const dropped = list\.length - fi/, 'count from the position in THIS batch');
+ assert.ok(!/list\.length - pendingImages\.length/.test(body),
+ 'subtracting the tray from the batch is what goes negative');
+});
+
+test('SEND: never sends while an image is still decoding', () => {
+ // A placeholder chip carries no bytes. Sending mid-decode posts undefined media_type/base64,
+ // the host refuses it, and the image vanishes from a message the user watched it attach to.
+ assert.match(html, /const inflightImages = new Set\(\)/, 'in-flight work must be tracked');
+ const body = fnBody(html, 'doSend');
+ // The NAME appearing is not enough — it appears in the wait loop too, so `if (false)` around the
+ // gate left this passing. Assert the gate itself, and that it runs before anything is posted.
+ assert.match(body, /if \(inflightImages\.size\) \{/, 'the in-flight check must be a real gate');
+ assert.match(body, /await new Promise/, 'and it must actually wait');
+ const gateAt = body.indexOf('if (inflightImages.size) {');
+ const sendAt = body.indexOf("vscode.postMessage({ type: 'send'");
+ assert.ok(gateAt >= 0 && sendAt > gateAt, 'the wait must come BEFORE the send');
+ assert.match(body, /i\.loading/, 'and a surviving placeholder is refused outright');
+ assert.match(html, /async function doSend/, 'waiting requires it to be async');
+ assert.match(fnBody(html, 'attachImageFiles'), /finally \{\s*inflightImages\.delete/,
+ 'a failed decode must not leave the tray permanently "busy"');
+});
+
+test('SEND: the model is re-checked, because it can change after attaching', () => {
+ // The attach-time gate is not enough — a model can be switched between attaching and sending.
+ const body = fnBody(html, 'doSend');
+ assert.match(body, /pendingImages\.length && !canSeeImages/, 'no re-check before sending');
+ assert.ok(body.indexOf('!canSeeImages') < body.indexOf('vscode.postMessage({ type: \'send\''),
+ 'the check must come BEFORE the send');
+ assert.ok(!/clearImages\(\)/.test(body.slice(body.indexOf('!canSeeImages'), body.indexOf('return;', body.indexOf('!canSeeImages')))),
+ 'refusing must not discard what was typed or attached');
+});
+
+test('NEW CHAT does not inherit the previous conversation attachments', () => {
+ // Comments stripped first: a commented-out call still satisfies a bare /resetImages\(\)/, which is
+ // exactly how disabling it left this test green.
+ const live = html.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '');
+ const at = live.indexOf("m.type === 'reset'");
+ assert.ok(at > 0, 'the reset handler is gone');
+ const reset = live.slice(at, at + 400);
+ assert.match(reset, /resetImages\(\)/, 'reset must clear the image tray');
+ const r = fnBody(html, 'resetImages');
+ assert.match(r, /clearImages\(\)/, 'and the pending list with it');
+ assert.match(r, /renderChips\(\)/, 'and re-render, or the chips stay on screen');
+ assert.match(fnBody(html, 'clearImages'), /inflightImages\.clear\(\)/,
+ 'in-flight work from the old conversation must not land in the new one');
+});
+
+test('VISION GATE: the provider and the model must BOTH allow it', () => {
+ // The registry enumerates vision providers; `custom` is an arbitrary user endpoint and declares
+ // none. Reading only the model id would hand images to it whenever the model NAME looked right.
+ const cat = require('../providers/catalog');
+ assert.strictEqual(cat.supportsVisionForModel('custom', 'gpt-4o'), false, 'custom must not opt in by model name');
+ assert.strictEqual(cat.supportsVisionForModel('ollama', 'llava'), false);
+ assert.strictEqual(cat.supportsVisionForModel('anthropic', 'claude-opus-4-8'), true);
+ assert.strictEqual(cat.supportsVisionForModel('openai', 'gpt-4o'), true);
+ assert.strictEqual(cat.supportsVisionForModel('anthropic', 'not-a-real-model'), false);
+});
+
+test('TRANSLATE: the assistant loop fails loudly too', () => {
+ // I1 fixed the user loop and left the assistant one dropping unknown blocks silently — the same
+ // bug, one branch over.
+ const T = require('../providers/translate');
+ assert.throws(() => T.toOpenAIMessages('', [{ role: 'assistant', content: [{ type: 'video' }] }]),
+ /unsupported content block in an assistant message/);
+ // Thinking is a DELIBERATE drop, not a loss: an OpenAI-shaped request has nowhere to put it.
+ assert.doesNotThrow(() => T.toOpenAIMessages('', [{ role: 'assistant', content: [
+ { type: 'thinking', thinking: 'x' }, { type: 'text', text: 'hi' }] }]));
+});
+
+test('MEDIA: there is a real sweep, and the comment no longer claims one it does not have', () => {
+ // Sessions are append-only and trash() only writes a lifecycle event, so "deleted with them" was
+ // simply untrue, and refsIn had no production caller at all.
+ const store = fs.readFileSync(path.join(__dirname, '..', 'imageStore.js'), 'utf8');
+ const sessions = fs.readFileSync(path.join(__dirname, '..', 'sessions.js'), 'utf8');
+ assert.match(store, /function sweep\(root, slug, keep, maxAgeMs\)/, 'no sweep');
+ assert.match(store, /if \(!isRef\(name\)\) \{ continue; \}/, 'a sweep must never touch a file we did not write');
+ assert.match(store, /st\.mtimeMs > cutoff/,
+ 'an age floor is required — a normal chat writes media whose refs are never persisted');
+ assert.match(sessions, /function sweepMedia/, 'the sessions manager must expose it');
+ assert.match(sessions, /imageStore\.refsIn/, 'refsIn must finally have a caller');
+ assert.ok(!/deleted with them/.test(sessions), 'the false retention claim must be gone');
+ assert.match(ext, /sweepMedia\(\)/, 'and something must actually call it');
+});
+
+test('MULTI-IMAGE: several images are introduced by name', () => {
+ // From the vision guidance: with several images, precede each with "Image 1:" so the question —
+ // and every follow-up turn — can refer to them.
+ const body = fnBody(ext, 'labelImages');
+ assert.match(body, /blocks\.length < 2/, 'a single image needs no label');
+ assert.match(body, /'Image ' \+ \(i \+ 1\) \+ ':'/, 'the labels must be the documented shape');
+ assert.strictEqual((ext.match(/labelImages\(imageBlocks\)/g) || []).length, 4,
+ 'both paths, both with and without text, must label');
+});
+
+console.log('\nimageAttach: ' + n + ' tests passed.');
diff --git a/extensions/levelcode-ai/test/imageCost.test.js b/extensions/levelcode-ai/test/imageCost.test.js
new file mode 100644
index 0000000..d2d96db
--- /dev/null
+++ b/extensions/levelcode-ai/test/imageCost.test.js
@@ -0,0 +1,113 @@
+/*---------------------------------------------------------------------------------------------
+ * Image geometry + cost — run: node test/imageCost.test.js
+ *
+ * The load-bearing test here is DOC PARITY: every worked example in the vision documentation,
+ * reproduced. If these drift, the context meter is lying and the UI is showing the user a size
+ * the server will not actually use.
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+'use strict';
+
+const assert = require('assert');
+const C = require('../imageCost');
+
+let n = 0;
+function test(name, fn) { fn(); n++; console.log(' ok - ' + name); }
+
+test('PATCHES: cost is a ceiling division on each axis, independently', () => {
+ assert.strictEqual(C.visualTokens(28, 28), 1);
+ assert.strictEqual(C.visualTokens(29, 28), 2, 'one pixel over buys a whole column of patches');
+ assert.strictEqual(C.visualTokens(28, 29), 2, '…and a whole row');
+ assert.strictEqual(C.visualTokens(1092, 1092), 1521);
+ assert.strictEqual(C.visualTokens(0, 100), 0);
+});
+
+test('DOC PARITY: every worked example in the vision docs, both tiers', () => {
+ // [w, h, standard "WxH/tokens", high-res "WxH/tokens"]
+ const rows = [
+ [1092, 1092, '1092x1092/1521', '1092x1092/1521'],
+ [1000, 1000, '1000x1000/1296', '1000x1000/1296'],
+ [1920, 1080, '1456x819/1560', '1920x1080/2691'],
+ [3840, 2160, '1456x819/1560', '2576x1449/4784'],
+ [200, 200, '200x200/64', '200x200/64']
+ ];
+ for (const [w, h, std, hi] of rows) {
+ const a = C.fitToTier(w, h, 'standard'), b = C.fitToTier(w, h, 'high');
+ assert.strictEqual(`${a.w}x${a.h}/${a.tokens}`, std, `standard tier, ${w}x${h}`);
+ assert.strictEqual(`${b.w}x${b.h}/${b.tokens}`, hi, `high-res tier, ${w}x${h}`);
+ }
+});
+
+test('CAPS: nothing escapes its tier, at any source size', () => {
+ for (const [w, h] of [[8000, 8000], [8000, 200], [200, 8000], [4032, 3024], [3024, 1964]]) {
+ for (const tier of ['standard', 'high']) {
+ const r = C.fitToTier(w, h, tier);
+ assert.ok(r.tokens <= C.TIERS[tier].tokens, `${w}x${h} ${tier}: ${r.tokens} over the token cap`);
+ assert.ok(Math.max(r.w, r.h) <= C.TIERS[tier].edge, `${w}x${h} ${tier}: over the long-edge cap`);
+ }
+ }
+});
+
+test('NEVER UPSCALE: a small source comes back untouched', () => {
+ // Writing the plan, `sips -Z 1568` GREW a 1160x480 capture from 40KB to 89KB by scaling it up
+ // to meet the cap. Upscaling costs bytes and tokens and adds no information.
+ for (const [w, h] of [[100, 50], [1160, 480], [1568, 1018], [2576, 1449]]) {
+ const hi = C.fitToTier(w, h, 'high');
+ assert.ok(hi.w <= w && hi.h <= h, `${w}x${h} was scaled UP to ${hi.w}x${hi.h}`);
+ assert.strictEqual(C.clientScale(w, h, 4000), 1, 'a cap above the source must be a no-op');
+ const t = C.clientTarget(w, h, 4000);
+ assert.deepStrictEqual([t.w, t.h, t.scaled], [w, h, false]);
+ }
+});
+
+test('ASPECT: downscaling preserves the ratio to within a pixel', () => {
+ for (const [w, h] of [[3840, 2160], [3024, 1964], [4032, 3024], [1920, 1200]]) {
+ const r = C.fitToTier(w, h, 'high');
+ assert.ok(Math.abs((r.w / r.h) - (w / h)) < 0.01, `${w}x${h} -> ${r.w}x${r.h} skewed the aspect`);
+ }
+});
+
+test('CLIENT CAP: scale is a no-op at 1, so the caller can skip re-encoding', () => {
+ // A factor of exactly 1 is the signal to forward the ORIGINAL bytes. Re-encoding an untouched
+ // image only stacks compression artifacts, worst on the screenshots of text people paste.
+ assert.strictEqual(C.clientScale(1000, 800, 1568), 1);
+ assert.strictEqual(C.clientTarget(1000, 800, 1568).scaled, false);
+ const t = C.clientTarget(3840, 2160, 1568);
+ assert.deepStrictEqual([t.w, t.h, t.scaled], [1568, 882, true]);
+ assert.strictEqual(C.clientScale(3840, 2160, 0), 1, 'cap 0 means no cap, not a zero-size image');
+});
+
+test('TIER: 4.7-and-later is high-res; anything unrecognised is standard, never the reverse', () => {
+ for (const id of ['claude-opus-5', 'claude-sonnet-5', 'anthropic/claude-opus-4-8', 'claude-fable-5']) {
+ assert.strictEqual(C.tierFor(id), 'high', id);
+ }
+ for (const id of ['claude-opus-4-6', 'gpt-4o', 'some-unknown-model', '', null]) {
+ assert.strictEqual(C.tierFor(id), 'standard', String(id));
+ }
+});
+
+test('METER: an image block costs its real visual tokens, not its JSON length', () => {
+ // The bug this replaces: estimateMsgTokens is JSON.stringify(m).length / 4, which charges a
+ // base64 image about a third of its BYTE count — a 1MB screenshot books ~333,000 phantom
+ // tokens, more than most context windows, for something that really costs ~4,800. That
+ // misreports the UI meter today; it would be a correctness bug under any auto-compaction.
+ const block = { type: 'image', ref: 'a'.repeat(64), w: 3840, h: 2160, media_type: 'image/png' };
+ assert.strictEqual(C.imageBlockTokens(block, 'claude-opus-5'), 4784);
+ assert.strictEqual(C.imageBlockTokens(block, 'gpt-4o'), 1560, 'standard tier costs less');
+
+ const naive = Math.round(JSON.stringify(block).length / 4);
+ assert.ok(C.imageBlockTokens(block, 'claude-opus-5') > naive * 10,
+ 'a ref is ~18 tokens by JSON length and ~4784 in reality — the meter must not under-count either');
+
+ assert.strictEqual(C.imageBlockTokens({ type: 'text', text: 'hi' }, 'claude-opus-5'), 0);
+ assert.strictEqual(C.imageBlockTokens(null, 'claude-opus-5'), 0);
+});
+
+test('METER: an image of unknown size is charged the cap, never zero', () => {
+ // A missing dimension must fail toward over-counting. Charging zero would let a conversation
+ // full of images look empty to the compaction cut.
+ assert.strictEqual(C.imageBlockTokens({ type: 'image', ref: 'x' }, 'claude-opus-5'), 4784);
+ assert.strictEqual(C.imageBlockTokens({ type: 'image', ref: 'x', w: 100 }, 'gpt-4o'), 1568);
+});
+
+console.log('\nimageCost: ' + n + ' tests passed.');
diff --git a/extensions/levelcode-ai/test/imageStore.test.js b/extensions/levelcode-ai/test/imageStore.test.js
new file mode 100644
index 0000000..cb7b0c6
--- /dev/null
+++ b/extensions/levelcode-ai/test/imageStore.test.js
@@ -0,0 +1,122 @@
+/*---------------------------------------------------------------------------------------------
+ * Local image store + the meter that counts what it holds — run: node test/imageStore.test.js
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+'use strict';
+
+const assert = require('assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const S = require('../imageStore');
+const { estimateMsgTokens } = require('../agentMemory');
+
+let n = 0;
+function test(name, fn) { fn(); n++; console.log(' ok - ' + name); }
+
+const root = fs.mkdtempSync(path.join(os.tmpdir(), 'lc-img-'));
+const slug = 'proj';
+const png = Buffer.from('89504e470d0a1a0a0000000d49484452', 'hex').toString('base64');
+
+test('ROUND TRIP: bytes go in, the same bytes come back', () => {
+ const { ref, bytes } = S.put(root, slug, png, 'image/png');
+ assert.ok(S.isRef(ref), 'ref should be sha256 + extension: ' + ref);
+ assert.strictEqual(bytes, Buffer.from(png, 'base64').length);
+ assert.strictEqual(S.read(root, slug, ref), png);
+ assert.strictEqual(S.mediaTypeOf(ref), 'image/png');
+});
+
+test('CONTENT ADDRESSED: the same screenshot twice is one file', () => {
+ // Exactly what happens when someone re-pastes after a send fails.
+ const a = S.put(root, slug, png, 'image/png');
+ const b = S.put(root, slug, png, 'image/png');
+ assert.strictEqual(a.ref, b.ref);
+ const files = fs.readdirSync(S.mediaDir(root, slug)).filter((f) => f.endsWith('.png'));
+ assert.strictEqual(files.length, 1, 'a duplicate paste must not write a second file');
+});
+
+test('CONTENT ADDRESSED: different bytes get different refs', () => {
+ const other = Buffer.from('ffd8ffe000104a464946', 'hex').toString('base64');
+ assert.notStrictEqual(S.put(root, slug, png, 'image/png').ref,
+ S.put(root, slug, other, 'image/jpeg').ref);
+});
+
+test('NO TMP LEFT BEHIND: a completed write leaves only the final file', () => {
+ assert.ok(!fs.readdirSync(S.mediaDir(root, slug)).some((f) => f.includes('.tmp')),
+ 'tmp+rename must not leave a .tmp file behind');
+});
+
+test('REFUSED: unsupported media type, empty bytes, and oversize', () => {
+ assert.throws(() => S.put(root, slug, png, 'image/tiff'), /unsupported media type/);
+ assert.throws(() => S.put(root, slug, png, 'image/svg+xml'), /unsupported media type/);
+ assert.throws(() => S.put(root, slug, '', 'image/png'), /empty image/);
+ const huge = Buffer.alloc(S.MAX_BYTES + 1).toString('base64');
+ assert.throws(() => S.put(root, slug, huge, 'image/png'), /over the/);
+});
+
+test('REFS ARE NOT PATHS: traversal and junk are rejected, not read', () => {
+ // read() takes a ref straight from a session file, which is data on disk that a user could edit.
+ for (const bad of ['../../etc/passwd', '../secrets.png', 'a/b.png', 'notahash.png',
+ 'a'.repeat(64) + '.exe', 'a'.repeat(63) + '.png', '', null, undefined]) {
+ assert.strictEqual(S.isRef(bad), false, 'should not look like a ref: ' + String(bad));
+ assert.strictEqual(S.read(root, slug, bad), null, 'must not read: ' + String(bad));
+ assert.strictEqual(S.mediaTypeOf(bad), null);
+ }
+});
+
+test('MATERIALIZE: a ref becomes a wire block only when a request is built', () => {
+ const { ref } = S.put(root, slug, png, 'image/png');
+ const out = S.materialize(root, slug, { type: 'image', ref, w: 100, h: 50 });
+ assert.deepStrictEqual(out, { type: 'image', source: { type: 'base64', media_type: 'image/png', data: png } });
+ // already-materialized blocks pass through untouched
+ const inline = { type: 'image', source: { type: 'url', url: 'https://x.test/a.png' } };
+ assert.strictEqual(S.materialize(root, slug, inline), inline);
+ assert.deepStrictEqual(S.materialize(root, slug, { type: 'text', text: 'hi' }), { type: 'text', text: 'hi' });
+});
+
+test('MATERIALIZE: a missing file throws rather than sending a request without its subject', () => {
+ assert.throws(
+ () => S.materialize(root, slug, { type: 'image', ref: 'b'.repeat(64) + '.png' }),
+ /missing from disk/,
+ 'a silently dropped image is the exact failure this feature exists to avoid'
+ );
+});
+
+test('REFS IN: the keep-set sees every attached image and nothing else', () => {
+ const r1 = 'a'.repeat(64) + '.png', r2 = 'c'.repeat(64) + '.webp';
+ const got = S.refsIn([
+ { role: 'user', content: [{ type: 'image', ref: r1 }, { type: 'text', text: 'x' }] },
+ { role: 'user', content: 'a plain string turn' },
+ { role: 'user', content: [{ type: 'image', ref: r2 }, { type: 'image', ref: '../evil' }] }
+ ]);
+ assert.deepStrictEqual([...got].sort(), [r1, r2].sort());
+});
+
+test('METER: the storage shape does not change the number', () => {
+ // This is the point of the whole design. An image costs what it costs; whether the bytes are
+ // inline or on disk behind a ref must not move the meter.
+ const big = 'A'.repeat(1_400_000);
+ const inline = [{ role: 'user', content: [
+ { type: 'image', source: { type: 'base64', media_type: 'image/png', data: big } },
+ { type: 'text', text: 'why?' }] }];
+ const ref = [{ role: 'user', content: [
+ { type: 'image', ref: 'a'.repeat(64) + '.png', w: 3840, h: 2160 },
+ { type: 'text', text: 'why?' }] }];
+
+ const a = estimateMsgTokens(inline, 'claude-opus-5');
+ const b = estimateMsgTokens(ref, 'claude-opus-5');
+ assert.strictEqual(a, b, 'inline and ref must cost the same');
+ assert.ok(a < 6000, 'a 1MB image must not book six figures of tokens — got ' + a);
+ assert.ok(a > 4000, 'nor may it be under-counted as a short string — got ' + a);
+ assert.ok(estimateMsgTokens(ref, 'gpt-4o') < b, 'the standard tier costs less than high-res');
+});
+
+test('METER: text-only messages are unchanged by any of this', () => {
+ const msgs = [{ role: 'user', content: 'hello there' }, { role: 'assistant', content: 'hi' }];
+ assert.strictEqual(estimateMsgTokens(msgs), Math.round(
+ msgs.reduce((n2, m) => n2 + JSON.stringify(m).length, 0) / 4),
+ 'the old heuristic must still hold exactly for text');
+});
+
+try { fs.rmSync(root, { recursive: true, force: true }); } catch { /* best effort */ }
+console.log('\nimageStore: ' + n + ' tests passed.');
diff --git a/extensions/levelcode-ai/test/translate.test.js b/extensions/levelcode-ai/test/translate.test.js
index 28c2359..566bc15 100644
--- a/extensions/levelcode-ai/test/translate.test.js
+++ b/extensions/levelcode-ai/test/translate.test.js
@@ -261,4 +261,96 @@ test('isAnthropicFamily: gates cache_control writes to Claude upstreams only', (
assert.strictEqual(O.isAnthropicFamily(''), false);
});
+// ── images (I1) ─────────────────────────────────────────────────────────────────────────────────
+
+test('IMAGE: a base64 block becomes an OpenAI image_url data URI, ahead of the text', () => {
+ const out = T.toOpenAIMessages('', [{ role: 'user', content: [
+ { type: 'text', text: 'why does this look wrong?' },
+ { type: 'image', source: { type: 'base64', media_type: 'image/png', data: 'AAAB' } }
+ ] }]);
+ assert.strictEqual(out.length, 1);
+ assert.strictEqual(out[0].role, 'user');
+ assert.ok(Array.isArray(out[0].content), 'a turn carrying an image must use block content');
+ // Images lead: the model reads them best before the text, and it keeps the cache breakpoint
+ // (which lands on the LAST block) on text rather than on an image.
+ assert.strictEqual(out[0].content[0].type, 'image_url', 'the image must come first');
+ assert.strictEqual(out[0].content[0].image_url.url, 'data:image/png;base64,AAAB');
+ assert.strictEqual(out[0].content[1].type, 'text');
+ assert.strictEqual(out[0].content[1].text, 'why does this look wrong?');
+});
+
+test('IMAGE: a url source passes through as a url, not re-encoded', () => {
+ const out = T.toOpenAIMessages('', [{ role: 'user', content: [
+ { type: 'image', source: { type: 'url', url: 'https://example.test/a.png' } }
+ ] }]);
+ assert.strictEqual(out[0].content[0].image_url.url, 'https://example.test/a.png');
+});
+
+test('IMAGE: several images in one turn all survive', () => {
+ const out = T.toOpenAIMessages('', [{ role: 'user', content: [
+ { type: 'image', source: { type: 'base64', media_type: 'image/png', data: 'A' } },
+ { type: 'image', source: { type: 'base64', media_type: 'image/webp', data: 'B' } },
+ { type: 'text', text: 'compare these' }
+ ] }]);
+ assert.strictEqual(out[0].content.filter((c) => c.type === 'image_url').length, 2);
+ assert.strictEqual(out[0].content[2].text, 'compare these');
+});
+
+test('IMAGE: a text-only turn still emits a plain string, not a block array', () => {
+ // Widening every text-only turn would change the bytes of every cached prefix for no gain.
+ const out = T.toOpenAIMessages('', [{ role: 'user', content: [{ type: 'text', text: 'hello' }] }]);
+ assert.strictEqual(typeof out[0].content, 'string', 'text-only turns must not become block arrays');
+ assert.strictEqual(out[0].content, 'hello');
+});
+
+test('IMAGE: an image with no text emits the image alone', () => {
+ const out = T.toOpenAIMessages('', [{ role: 'user', content: [
+ { type: 'image', source: { type: 'base64', media_type: 'image/png', data: 'A' } }
+ ] }]);
+ assert.strictEqual(out.length, 1);
+ assert.strictEqual(out[0].content.length, 1);
+ assert.strictEqual(out[0].content[0].type, 'image_url');
+});
+
+test('LOUD: an unrecognised block throws instead of vanishing', () => {
+ // THE bug this slice exists for. The loop used to fall through on anything it did not know, so
+ // the block disappeared between composer and wire with no error and no log line — and the model
+ // answered confidently about content it was never sent.
+ assert.throws(
+ () => T.toOpenAIMessages('', [{ role: 'user', content: [
+ { type: 'text', text: 'look at this' },
+ { type: 'video', source: { type: 'base64', media_type: 'video/mp4', data: 'A' } }
+ ] }]),
+ /unsupported content block/,
+ 'an unknown block type must fail loudly, naming the type'
+ );
+});
+
+test('LOUD: a malformed image throws rather than sending a request missing its subject', () => {
+ const bad = [
+ [{ type: 'image' }, /no source/],
+ [{ type: 'image', source: { type: 'base64', media_type: 'image/png' } }, /media_type or data/],
+ [{ type: 'image', source: { type: 'base64', data: 'A' } }, /media_type or data/],
+ [{ type: 'image', source: { type: 'url' } }, /no url/],
+ // Files API references are Anthropic-only; there is nothing to translate them to.
+ [{ type: 'image', source: { type: 'file', file_id: 'file_1' } }, /source type not supported/]
+ ];
+ for (const [block, re] of bad) {
+ assert.throws(() => T.toOpenAIMessages('', [{ role: 'user', content: [block] }]), re,
+ 'malformed image should throw: ' + JSON.stringify(block));
+ }
+});
+
+test('IMAGE: tool_result still splits out to its own tool message alongside an image', () => {
+ const out = T.toOpenAIMessages('', [{ role: 'user', content: [
+ { type: 'tool_result', tool_use_id: 'tu_1', content: 'ok' },
+ { type: 'image', source: { type: 'base64', media_type: 'image/png', data: 'A' } },
+ { type: 'text', text: 'and this' }
+ ] }]);
+ assert.strictEqual(out[0].role, 'tool');
+ assert.strictEqual(out[0].tool_call_id, 'tu_1');
+ assert.strictEqual(out[1].role, 'user');
+ assert.strictEqual(out[1].content[0].type, 'image_url');
+});
+
console.log('\ntranslate: ' + n + ' tests passed.');
diff --git a/extensions/levelcode-ai/test/webviewCss.test.js b/extensions/levelcode-ai/test/webviewCss.test.js
index 10c6638..5c4056a 100644
--- a/extensions/levelcode-ai/test/webviewCss.test.js
+++ b/extensions/levelcode-ai/test/webviewCss.test.js
@@ -773,4 +773,24 @@ test('SHELL COLUMN: no member re-declares an inline margin, which would un-centr
}
});
+test('GROUP CONTAINER: rows are inset from the border, and the border is the only container', () => {
+ // Reported against the reference: text starting a couple of pixels off the border reads as
+ // overflowing its container even when it is not, and a tinted fill UNDER a border is two
+ // containers drawn on top of each other — which is what made these rows look like a slab.
+ const body = /\.tl-group \.groupbody \{([^}]*)\}/.exec(cssBlocks);
+ assert.ok(body, 'the group container rule is gone');
+ assert.match(body[1], /background:\s*transparent/,
+ 'no fill — the hairline is the container, and a tint fights whatever ground the theme paints');
+ assert.match(body[1], /border:\s*1px solid/, 'the hairline must still be there');
+ assert.match(body[1], /overflow:\s*hidden/,
+ 'without this the first and last rows square off the corners the radius just rounded');
+
+ const row = /\.tl-group \.groupbody > \.tl \{([^}]*)\}/.exec(cssBlocks);
+ assert.ok(row, 'the row inset rule is gone');
+ const pad = /padding:\s*(\d+)px\s+(\d+)px/.exec(row[1]);
+ assert.ok(pad, 'rows need explicit padding: ' + row[1]);
+ assert.ok(Number(pad[2]) >= 10,
+ 'rows need real horizontal inset from the border — got ' + pad[2] + 'px');
+});
+
console.log('webviewCss: ' + n + ' tests passed');
diff --git a/patches/levelcode-core.patch b/patches/levelcode-core.patch
index 0f1c1ef..ebc98c0 100644
--- a/patches/levelcode-core.patch
+++ b/patches/levelcode-core.patch
@@ -391,3 +391,119 @@ index 85e34cca..3f9b67ba 100644
if (typeof releaseDate === 'number' && releaseDate > 0) {
this.releaseDateNode.textContent = localize('updateTooltip.releasedLabel', "Released {0}", formatDate(releaseDate));
this.releaseDateNode.style.display = '';
+diff --git a/src/vs/workbench/browser/parts/editor/editorDropTarget.ts b/src/vs/workbench/browser/parts/editor/editorDropTarget.ts
+index f9c80ed1..7ba1a81c 100644
+--- a/src/vs/workbench/browser/parts/editor/editorDropTarget.ts
++++ b/src/vs/workbench/browser/parts/editor/editorDropTarget.ts
+@@ -18,7 +18,8 @@ import { Registry } from '../../../../platform/registry/common/platform.js';
+ import { activeContrastBorder } from '../../../../platform/theme/common/colorRegistry.js';
+ import { IThemeService, Themable } from '../../../../platform/theme/common/themeService.js';
+ import { isTemporaryWorkspace, IWorkspaceContextService } from '../../../../platform/workspace/common/workspace.js';
+-import { CodeDataTransfers, containsDragType, Extensions as DragAndDropExtensions, IDragAndDropContributionRegistry, LocalSelectionTransfer } from '../../../../platform/dnd/browser/dnd.js';
++import { ICommandService } from '../../../../platform/commands/common/commands.js'; // [LevelCode] image drop → chat
++import { CodeDataTransfers, containsDragType, Extensions as DragAndDropExtensions, getPathForFile, IDragAndDropContributionRegistry, LocalSelectionTransfer } from '../../../../platform/dnd/browser/dnd.js';
+ import { DraggedEditorGroupIdentifier, DraggedEditorIdentifier, extractTreeDropData, ResourcesDropHandler } from '../../dnd.js';
+ import { IEditorGroupsView, IEditorGroupView, prepareMoveCopyEditors } from './editor.js';
+ import { EditorInputCapabilities, IEditorIdentifier, IUntypedEditorInput } from '../../../common/editor.js';
+@@ -69,7 +70,8 @@ class DropOverlay extends Themable {
+ @IEditorService private readonly editorService: IEditorService,
+ @IEditorGroupsService private readonly editorGroupService: IEditorGroupsService,
+ @ITreeViewsDnDService private readonly treeViewsDragAndDropService: ITreeViewsDnDService,
+- @IWorkspaceContextService private readonly contextService: IWorkspaceContextService
++ @IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
++ @ICommandService private readonly commandService: ICommandService // [LevelCode] image drop → chat
+ ) {
+ super(themeService);
+
+@@ -365,11 +367,80 @@ class DropOverlay extends Themable {
+
+ // Check for URI transfer
+ else {
++ // [LevelCode] An image dropped onto the AI chat editor is an ATTACHMENT, not a file to open.
++ // Without this the workbench wins the drop and opens the picture in its own tab, and the
++ // chat webview never sees an event at all — a webview iframe is never offered an OS file
++ // drop, so no amount of handling inside the panel can recover it.
++ if (await this.tryLevelCodeChatImageDrop(event, splitDirection)) {
++ return;
++ }
++
+ const dropHandler = this.instantiationService.createInstance(ResourcesDropHandler, { allowWorkspaceOpen: !isWeb || isTemporaryWorkspace(this.contextService.getWorkspace()) });
+ dropHandler.handleDrop(event, getWindow(this.groupView.element), () => ensureTargetGroup(), targetGroup => targetGroup?.focus());
+ }
+ }
+
++ /**
++ * [LevelCode] Route an image drop to the AI chat instead of opening it as an editor.
++ *
++ * Returns true when the drop was consumed. Deliberately narrow — every condition below is a
++ * reason NOT to change behaviour someone already relies on:
++ *
++ * • only when the chat webview is the ACTIVE editor of the group being dropped on, so dropping
++ * onto any other tab still opens the file;
++ * • only when no split is being requested, so dragging to an edge still splits the group;
++ * • only for image extensions, and only when EVERY dropped file is one, so a mixed drop is
++ * handled the way it always was;
++ * • only when the paths resolve (getPathForFile is native-only, undefined on web).
++ *
++ * The paths go to the extension by command rather than through a new IPC channel: the extension
++ * already owns reading, normalizing and attaching them, so this patch stays a routing decision
++ * and nothing more. That matters for a fork — the smaller the diff, the cheaper every rebase.
++ */
++ private async tryLevelCodeChatImageDrop(event: DragEvent, splitDirection?: GroupDirection): Promise {
++ if (typeof splitDirection === 'number') {
++ return false; // a split was asked for — that is a layout gesture, not an attachment
++ }
++
++ // An extension-created webview panel does NOT keep the viewType the extension asked for: the
++ // API layer prefixes it (WebviewViewTypeTransformer('mainThreadWebview-') in
++ // mainThreadWebviewPanels.ts), so the input here reads 'mainThreadWebview-levelcode.ai.chat'.
++ // Matching only the bare id made this whole check silently false and the patch inert — a plain
++ // drag still opened the file, and only a Shift-drag appeared to work, because Shift skips this
++ // overlay entirely and lets the webview see the drop itself.
++ const activeEditor = this.groupView.activeEditor as { viewType?: string } | null | undefined;
++ if (!activeEditor || !LEVELCODE_CHAT_VIEW_TYPES.includes(activeEditor.viewType ?? '')) {
++ return false;
++ }
++
++ const files = event.dataTransfer?.files;
++ if (!files?.length) {
++ return false;
++ }
++
++ const paths: string[] = [];
++ for (const file of Array.from(files)) {
++ const filePath = getPathForFile(file);
++ if (!filePath || !/\.(png|jpe?g|gif|webp)$/i.test(filePath)) {
++ return false;
++ }
++ paths.push(filePath);
++ }
++
++ if (!paths.length) {
++ return false;
++ }
++
++ try {
++ await this.commandService.executeCommand('levelcode.ai.attachImagePaths', paths);
++ return true;
++ } catch (error) {
++ // If the extension is not there to take them, fall through and open the files as usual.
++ // A dropped image doing nothing at all would be worse than opening it.
++ return false;
++ }
++ }
++
+ private isCopyOperation(e: DragEvent, draggedEditor?: IEditorIdentifier): boolean {
+ if (draggedEditor?.editor.hasCapability(EditorInputCapabilities.Singleton)) {
+ return false; // Singleton editors cannot be split
+@@ -561,6 +632,10 @@ class DropOverlay extends Themable {
+ }
+ }
+
++// [LevelCode] The chat panel's viewType, in both the form the extension registers and the form the
++// webview API layer rewrites it to once it becomes an editor input.
++const LEVELCODE_CHAT_VIEW_TYPES = ['levelcode.ai.chat', 'mainThreadWebview-levelcode.ai.chat'];
++
+ export class EditorDropTarget extends Themable {
+
+ private _overlay?: DropOverlay;