@volter-ai-dev/supercode-ui 0.1.23 → 0.1.25

package/README.md

@@ -59,7 +59,7 @@ import {
   Conversation,
   SessionList,
 } from '@volter-ai-dev/supercode-ui/preact';
-import { HarnessLogo } from '@volter-ai-dev/supercode-ui/preact/logo';
+import { HarnessLogo, harnessLogoDataUrl } from '@volter-ai-dev/supercode-ui/preact/logo';
 import { groupConversation } from '@volter-ai-dev/supercode-ui/core';
 ```
 
@@ -70,6 +70,8 @@ formatters, and intent constructors live at `supercode-ui/core` and have no DOM
 For genuine partial delivery, the `preact/logo`, `preact/icon`, `preact/conversation`, `preact/sessions`,
 `preact/composer`, and `preact/messenger` subpaths are independently tree-shaken artifacts; taking
 the logo does not pull in Markdown, the messenger, or session-list code.
+`harnessLogoDataUrl(id)` gives non-Preact launchers the same self-contained canonical SVG; it
+returns `null` for an unknown harness rather than inventing a fallback identity.
 
 ## Bind directly to the headless controller
 
@@ -134,8 +136,12 @@ is exposed and must revalidate every returned item.
 
 Transcript images with a browser-safe URL open in a keyboard-accessible, viewport-bounded viewer;
 remote images expose copy-link and open-original actions, while local data images can be downloaded.
-If a host deliberately omits a large historical data URL from its bounded projection, the UI shows
-an honest unavailable-preview attachment instead of a broken thumbnail or a deceptive action.
+`createClientProjection` keeps large historical data URLs in a projection-scoped host registry and
+puts only stable metadata plus an opaque `reference` in `SupercodeUiState`. An embedding host may
+implement `adapter.resolveImage` to fetch that reference only after a click and return a bounded
+`Blob`; the viewer owns and revokes the resulting object URL and presents loading, failure, and
+retry states. Without that adapter—or when native data is incomplete—the attachment remains an
+honest unavailable-preview state rather than a broken thumbnail or deceptive action.
 
 An embedding product such as Vibewaiting should therefore be small: Lucarne owns its iframe and
 launcher lifecycle, Supercode owns this UI and the controller semantics, and Vibewaiting only

package/components.mjs

@@ -507,7 +507,10 @@ function readTranscript(value) {
         return image && typeof image.label === "string" ? [{
           ...typeof image.id === "string" ? { id: image.id } : {},
           label: image.label,
-          ...typeof image.url === "string" ? { url: image.url } : {}
+          ...typeof image.url === "string" ? { url: image.url } : {},
+          ...typeof image.reference === "string" && image.reference.length <= 4e3 ? { reference: image.reference } : {},
+          ...typeof image.mediaType === "string" && image.mediaType.startsWith("image/") && image.mediaType.length <= 100 ? { mediaType: image.mediaType } : {},
+          ...Number.isSafeInteger(image.byteSize) && image.byteSize >= 0 ? { byteSize: image.byteSize } : {}
         }] : [];
       }).slice(0, 4);
     }
@@ -820,6 +823,7 @@ import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-ru
 var MAX_CONTEXT_ITEMS = 32;
 var MAX_IMAGE_ITEMS = 4;
 var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
 var IMAGE_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
 function normalizeContext(value) {
   return (Array.isArray(value) ? value : value ? [value] : []).flatMap((item) => {
@@ -922,22 +926,59 @@ function imageFilename(label) {
 function ImageViewer({ items, index, adapter, onChange, onClose }) {
   const dialog = useRef(null);
   const reset = useRef(null);
+  const resolutions = useRef(/* @__PURE__ */ new Map());
+  const alive = useRef(true);
+  const [, redraw] = useState(0);
   const [copyState, setCopyState2] = useState("idle");
   const item = items[index];
-  const remote = item?.url?.startsWith("http://") || item?.url?.startsWith("https://");
+  const key = item?.reference ?? item?.url ?? `${item?.id ?? ""}:${index}`;
+  const resolution = item?.url ? null : resolutions.current.get(key);
+  const imageUrl = item?.url ?? (resolution?.status === "ready" ? resolution.url : null);
+  const remote = imageUrl?.startsWith("http://") || imageUrl?.startsWith("https://");
+  const resolve = (candidate, force = false) => {
+    if (candidate?.url || !candidate?.reference || !adapter?.resolveImage) return;
+    const candidateKey = candidate.reference;
+    const current = resolutions.current.get(candidateKey);
+    if (!force && (current?.status === "loading" || current?.status === "ready")) return;
+    if (current?.url) URL.revokeObjectURL(current.url);
+    resolutions.current.set(candidateKey, { status: "loading" });
+    redraw((value) => value + 1);
+    Promise.resolve().then(() => adapter.resolveImage(candidate)).then((blob) => {
+      if (!(blob instanceof Blob) || !blob.type.startsWith("image/")) throw new Error("The host returned an invalid image.");
+      if (blob.size > MAX_RESOLVED_IMAGE_BYTES) throw new Error("This image is too large to preview safely.");
+      if (!alive.current) return;
+      const url = URL.createObjectURL(blob);
+      resolutions.current.set(candidateKey, { status: "ready", url });
+      redraw((value) => value + 1);
+    }).catch((error) => {
+      if (!alive.current) return;
+      resolutions.current.set(candidateKey, {
+        status: "error",
+        message: error instanceof Error && error.message ? error.message : "Could not load this image."
+      });
+      redraw((value) => value + 1);
+    });
+  };
   useEffect(() => {
+    alive.current = true;
     if (!dialog.current?.open) dialog.current?.showModal();
-    return () => clearTimeout(reset.current);
+    return () => {
+      alive.current = false;
+      clearTimeout(reset.current);
+      for (const value of resolutions.current.values()) if (value.url) URL.revokeObjectURL(value.url);
+      resolutions.current.clear();
+    };
   }, []);
   useEffect(() => {
     clearTimeout(reset.current);
     setCopyState2("idle");
-  }, [index]);
-  if (!item?.url) return null;
+    resolve(item);
+  }, [index, item?.reference]);
+  if (!item || !item.url && (!item.reference || !adapter?.resolveImage)) return null;
   const move = (amount) => onChange((index + amount + items.length) % items.length);
   const copy = async () => {
     try {
-      await adapter.copyText(item.url);
+      await adapter.copyText(imageUrl);
       setCopyState2("copied");
     } catch {
       setCopyState2("failed");
@@ -973,12 +1014,21 @@ function ImageViewer({ items, index, adapter, onChange, onClose }) {
           ] }),
           /* @__PURE__ */ jsxs2("nav", { "aria-label": "Image actions", children: [
             remote && adapter?.copyText ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": copyState === "copied" ? "Image link copied" : copyState === "failed" ? "Could not copy image link" : "Copy image link", title: "Copy image link", "data-status": copyState, onClick: copy, children: /* @__PURE__ */ jsx2(UiIcon, { name: copyState === "copied" ? "check" : "copy", size: 16 }) }) : null,
-            remote ? /* @__PURE__ */ jsx2("a", { href: item.url, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx2("a", { href: item.url, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "down", size: 16 }) }),
+            imageUrl ? remote ? /* @__PURE__ */ jsx2("a", { href: imageUrl, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx2("a", { href: imageUrl, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "down", size: 16 }) }) : null,
             /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": "Close image preview", title: "Close", onClick: close, children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 17 }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs2("figure", { children: [
-          /* @__PURE__ */ jsx2("img", { src: item.url, alt: item.label }),
+          imageUrl ? /* @__PURE__ */ jsx2("img", { src: imageUrl, alt: item.label }) : resolution?.status === "error" ? /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "alert", children: [
+            /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 28 }),
+            /* @__PURE__ */ jsx2("strong", { children: "Could not load image" }),
+            /* @__PURE__ */ jsx2("small", { children: resolution.message }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => resolve(item, true), children: "Retry" })
+          ] }) : /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "status", children: [
+            /* @__PURE__ */ jsx2("i", { class: "scui-control-spinner" }),
+            /* @__PURE__ */ jsx2("strong", { children: "Loading image\u2026" }),
+            /* @__PURE__ */ jsx2("small", { children: "The original stays out of the transcript payload." })
+          ] }),
           items.length > 1 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
             /* @__PURE__ */ jsx2("button", { type: "button", class: "scui-image-previous", "aria-label": "Previous image", onClick: () => move(-1), children: /* @__PURE__ */ jsx2(UiIcon, { name: "chevron", size: 19 }) }),
             /* @__PURE__ */ jsx2("button", { type: "button", class: "scui-image-next", "aria-label": "Next image", onClick: () => move(1), children: /* @__PURE__ */ jsx2(UiIcon, { name: "chevron", size: 19 }) })
@@ -992,7 +1042,7 @@ function MessageImages({ items, adapter }) {
   const [active, setActive] = useState(null);
   const opener = useRef(null);
   if (!items?.length) return null;
-  const viewable = items.filter((item) => item.url);
+  const viewable = items.filter((item) => item.url || item.reference && adapter?.resolveImage);
   const close = () => {
     setActive(null);
     requestAnimationFrame(() => opener.current?.focus({ preventScroll: true }));
@@ -1001,7 +1051,16 @@ function MessageImages({ items, adapter }) {
     /* @__PURE__ */ jsx2("div", { class: "scui-message-images", "aria-label": "Message images", children: items.map((item, index) => item.url ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `View image ${item.label}`, onClick: (event) => {
       opener.current = event.currentTarget;
       setActive(viewable.indexOf(item));
-    }, children: /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
+    }, children: /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : item.reference && adapter?.resolveImage ? /* @__PURE__ */ jsxs2("button", { type: "button", "data-lazy": "true", "aria-label": `Load image ${item.label}`, onClick: (event) => {
+      opener.current = event.currentTarget;
+      setActive(viewable.indexOf(item));
+    }, children: [
+      /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: item.label }),
+        /* @__PURE__ */ jsx2("small", { children: "Load preview" })
+      ] })
+    ] }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
       /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 14 }),
       /* @__PURE__ */ jsxs2("span", { children: [
         /* @__PURE__ */ jsx2("strong", { children: item.label }),
@@ -1893,6 +1952,27 @@ var LOGOS = {
 function hasHarnessLogo(id) {
   return Object.hasOwn(LOGOS, id);
 }
+var LOGO_CHROME = {
+  codex: { background: "#f7f7f5", color: "#111" },
+  gemini: { background: "#f7f7f5", color: "#6e79dc" },
+  goose: { background: "#f7f7f5", color: "#101010" },
+  pi: { background: "#efefeb", color: "#111" },
+  supercode: { background: "#111923", color: "#f7f7f5" }
+};
+function escapeSvgAttribute(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function harnessLogoDataUrl(id) {
+  const logo = LOGOS[id];
+  if (!logo) return null;
+  const chrome = LOGO_CHROME[id] ?? { background: "#111", color: id === "claude-code" ? "#d97757" : "#f7f7f5" };
+  const glyph = logo.paths.map(([tag, attributes]) => {
+    const serialized = Object.entries(attributes).map(([name, value]) => `${name}="${escapeSvgAttribute(value)}"`).join(" ");
+    return `<${tag} ${serialized}/>`;
+  }).join("");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="19" fill="${chrome.background}" stroke="#383a42"/><svg x="7" y="7" width="26" height="26" viewBox="${logo.viewBox}" color="${chrome.color}" fill="currentColor" preserveAspectRatio="xMidYMid meet">${glyph}</svg></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
 function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
   const logo = LOGOS[id];
   useEffect5(() => {
@@ -2476,5 +2556,6 @@ export {
   ToolRow,
   TranscriptEntry,
   UiIcon,
+  harnessLogoDataUrl,
   hasHarnessLogo
 };

package/composer.mjs

@@ -134,6 +134,7 @@ import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-ru
 var MAX_CONTEXT_ITEMS = 32;
 var MAX_IMAGE_ITEMS = 4;
 var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
 var IMAGE_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
 function normalizeContext(value) {
   return (Array.isArray(value) ? value : value ? [value] : []).flatMap((item) => {

package/controller.d.ts

@@ -52,6 +52,25 @@ export function projectClientSnapshot(
   options?: ClientProjectionOptions,
 ): SupercodeUiState;
 
+export interface ResolvableTranscriptImage {
+  id?: string;
+  label: string;
+  url: string;
+  mediaType?: string;
+  byteSize?: number;
+}
+
+export interface ClientProjection {
+  state: SupercodeUiState;
+  /** Returns only an image admitted to this projection's bounded transcript window. */
+  resolveImage(reference: string): ResolvableTranscriptImage | null;
+}
+
+export function createClientProjection(
+  snapshot: SupercodeClientSnapshot,
+  options?: ClientProjectionOptions,
+): ClientProjection;
+
 export interface ControllerBindingOptions {
   projection?: () => ClientProjectionOptions;
   onIntent?: (intent: SupercodeUiIntent) => void | Promise<void>;
@@ -63,6 +82,7 @@ export interface ControllerBindingOptions {
   onLoadSessions?: () => void | Promise<void>;
   onLoadEarlier?: () => void | Promise<void>;
   copyText?: UiAdapter['copyText'];
+  resolveImage?: UiAdapter['resolveImage'];
 }
 
 export interface SupercodeUiBinding {

package/controller.mjs

@@ -99,18 +99,53 @@ function projectContext(context) {
   return projected.length ? projected : undefined;
 }
 
-function projectImages(images) {
+function imageMetadata(url) {
+  if (!url.startsWith('data:image/')) return {};
+  const header = url.slice(5, 256);
+  const comma = header.indexOf(',');
+  if (comma < 0) return {};
+  const declaration = header.slice(0, comma);
+  const mediaType = declaration.split(';', 1)[0].toLowerCase();
+  if (!mediaType.startsWith('image/')) return {};
+  if (!declaration.toLowerCase().endsWith(';base64')) return { mediaType };
+  const payloadLength = url.length - 5 - comma - 1;
+  const padding = url.endsWith('==') ? 2 : url.endsWith('=') ? 1 : 0;
+  return { mediaType, byteSize: Math.max(0, Math.floor(payloadLength * 3 / 4) - padding) };
+}
+
+function imageReference(entryId, item, index) {
+  // The host treats this only as a key into the projection-scoped registry below. Keeping the key
+  // deterministic prevents a streamed transcript refresh from restarting an image already open in
+  // the viewer, while the registry still rejects references outside the admitted render window.
+  return JSON.stringify([entryId, typeof item.id === 'string' ? item.id : null, index]);
+}
+
+function projectImages(images, entryId, imageRegistry) {
   if (!Array.isArray(images)) return undefined;
-  const projected = images.flatMap((item) => {
+  const projected = images.flatMap((item, index) => {
     if (!item || typeof item !== 'object' || typeof item.label !== 'string') return [];
-    const url = typeof item.url === 'string' && !item.url.endsWith('\n…')
-      && (!item.url.startsWith('data:image/') || item.url.length <= 256_000)
-      ? item.url
+    const sourceUrl = typeof item.url === 'string' ? item.url : null;
+    const complete = sourceUrl !== null && !sourceUrl.endsWith('\n…');
+    const metadata = complete ? imageMetadata(sourceUrl) : {};
+    const url = complete && (!sourceUrl.startsWith('data:image/') || sourceUrl.length <= 256_000)
+      ? sourceUrl
       : null;
+    let reference = null;
+    if (complete && sourceUrl.startsWith('data:image/') && !url && imageRegistry && Number.isSafeInteger(metadata.byteSize)) {
+      reference = imageReference(entryId, item, index);
+      imageRegistry.set(reference, {
+        ...(typeof item.id === 'string' ? { id: item.id } : {}),
+        label: item.label,
+        url: sourceUrl,
+        ...metadata,
+      });
+    }
     return [{
       ...(typeof item.id === 'string' ? { id: item.id } : {}),
       label: item.label,
+      ...metadata,
       ...(url ? { url } : {}),
+      ...(reference ? { reference } : {}),
     }];
   }).slice(0, 4);
   return projected.length ? projected : undefined;
@@ -124,13 +159,13 @@ function requestSummary(entry) {
   return options ? `${entry.requestKind}: ${options}${resolution}` : `${entry.requestKind ?? 'request'}${resolution}`;
 }
 
-function projectConversationEntry(entry, maxEntryChars) {
+function projectConversationEntry(entry, maxEntryChars, imageRegistry) {
   if (!entry || typeof entry !== 'object' || typeof entry.id !== 'string') return null;
   if (entry.kind === 'message') {
     if (entry.visibility === 'context') return null;
     const body = truncate(entry.text, maxEntryChars);
     const context = projectContext(entry.context);
-    const images = projectImages(entry.images);
+    const images = projectImages(entry.images, entry.id, imageRegistry);
     return {
       id: entry.id,
       role: entry.role,
@@ -201,7 +236,7 @@ function projectConversationEntry(entry, maxEntryChars) {
   return null;
 }
 
-function projectConversation(conversation, options) {
+function projectConversation(conversation, options, imageRegistry) {
   if (!Array.isArray(conversation)) return [];
   const maxEntries = positiveInteger(options.maxEntries, DEFAULT_MAX_ENTRIES);
   const maxEntryChars = positiveInteger(options.maxEntryChars, DEFAULT_MAX_ENTRY_CHARS);
@@ -215,7 +250,7 @@ function projectConversation(conversation, options) {
   for (;
     index >= 0 && rows.length < maxEntries && scanned < maxScanEntries;
     index -= 1, scanned += 1) {
-    const row = projectConversationEntry(conversation[index], maxEntryChars);
+    const row = projectConversationEntry(conversation[index], maxEntryChars, imageRegistry);
     if (row) rows.push(row);
   }
 
@@ -229,7 +264,7 @@ function projectConversation(conversation, options) {
     rows.length = oldestVisibleUser + 1;
   } else {
     for (; index >= 0 && scanned < maxScanEntries; index -= 1, scanned += 1) {
-      const row = projectConversationEntry(conversation[index], maxEntryChars);
+      const row = projectConversationEntry(conversation[index], maxEntryChars, imageRegistry);
       if (row?.role !== 'user') continue;
       if (rows.length === maxEntries) rows[rows.length - 1] = row;
       else rows.push(row);
@@ -300,7 +335,7 @@ function projectPill(snapshot) {
   return { tone: 'live', label: text(`${label(harness)} ready`) };
 }
 
-export function projectClientSnapshot(snapshot, options = {}) {
+function projectClientSnapshotInternal(snapshot, options, imageRegistry) {
   const now = Number.isFinite(options.now) ? options.now : Date.now();
   const busy = ['running', 'interrupting', 'reconciling'].includes(snapshot.turn?.state);
   const actions = snapshot.availableActions ?? {};
@@ -325,7 +360,7 @@ export function projectClientSnapshot(snapshot, options = {}) {
     ? snapshot.connection?.ownsRuntime ? active : null
     : options.owned;
   const maxEntries = positiveInteger(options.maxEntries, DEFAULT_MAX_ENTRIES);
-  const transcript = projectConversation(snapshot.conversation ?? [], options);
+  const transcript = projectConversation(snapshot.conversation ?? [], options, imageRegistry);
   const startup = snapshot.availability === 'loading'
     ? snapshot.operation === 'start' ? 'starting' : snapshot.operation === 'refresh' ? 'discovering' : 'connecting'
     : 'ready';
@@ -390,6 +425,27 @@ export function projectClientSnapshot(snapshot, options = {}) {
   });
 }
 
+export function projectClientSnapshot(snapshot, options = {}) {
+  return projectClientSnapshotInternal(snapshot, options, null);
+}
+
+/**
+ * Project a bounded UI state together with a host-only resolver for data images omitted from that
+ * state. The resolver knows only the images admitted by this exact projection, so a browser can
+ * neither force a whole-history scan nor use a guessed reference to read an unrelated session.
+ */
+export function createClientProjection(snapshot, options = {}) {
+  const images = new Map();
+  const state = projectClientSnapshotInternal(snapshot, options, images);
+  return {
+    state,
+    resolveImage(reference) {
+      const image = typeof reference === 'string' ? images.get(reference) : null;
+      return image ? { ...image } : null;
+    },
+  };
+}
+
 async function dispatchStandard(controller, intent, options) {
   const snapshot = controller.getSnapshot();
   const active = snapshot.activeSessionKey;
@@ -433,6 +489,7 @@ export function createControllerBinding(controller, options = {}) {
         .then(() => undefined);
     },
     ...(options.copyText ? { copyText: options.copyText } : {}),
+    ...(options.resolveImage ? { resolveImage: options.resolveImage } : {}),
   };
   return {
     adapter,

package/conversation.mjs

@@ -625,6 +625,7 @@ function UiIcon({ name, size = 16, class: className = "" }) {
 import { useEffect as useEffect2, useRef as useRef2, useState } from "preact/hooks";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
 var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
 function imageFilename(label) {
   const value = label.trim().replace(/[\\/:*?"<>|]+/g, "-");
   return value || "image";
@@ -632,22 +633,59 @@ function imageFilename(label) {
 function ImageViewer({ items, index, adapter, onChange, onClose }) {
   const dialog = useRef2(null);
   const reset = useRef2(null);
+  const resolutions = useRef2(/* @__PURE__ */ new Map());
+  const alive = useRef2(true);
+  const [, redraw] = useState(0);
   const [copyState, setCopyState2] = useState("idle");
   const item = items[index];
-  const remote = item?.url?.startsWith("http://") || item?.url?.startsWith("https://");
+  const key = item?.reference ?? item?.url ?? `${item?.id ?? ""}:${index}`;
+  const resolution = item?.url ? null : resolutions.current.get(key);
+  const imageUrl = item?.url ?? (resolution?.status === "ready" ? resolution.url : null);
+  const remote = imageUrl?.startsWith("http://") || imageUrl?.startsWith("https://");
+  const resolve = (candidate, force = false) => {
+    if (candidate?.url || !candidate?.reference || !adapter?.resolveImage) return;
+    const candidateKey = candidate.reference;
+    const current = resolutions.current.get(candidateKey);
+    if (!force && (current?.status === "loading" || current?.status === "ready")) return;
+    if (current?.url) URL.revokeObjectURL(current.url);
+    resolutions.current.set(candidateKey, { status: "loading" });
+    redraw((value) => value + 1);
+    Promise.resolve().then(() => adapter.resolveImage(candidate)).then((blob) => {
+      if (!(blob instanceof Blob) || !blob.type.startsWith("image/")) throw new Error("The host returned an invalid image.");
+      if (blob.size > MAX_RESOLVED_IMAGE_BYTES) throw new Error("This image is too large to preview safely.");
+      if (!alive.current) return;
+      const url = URL.createObjectURL(blob);
+      resolutions.current.set(candidateKey, { status: "ready", url });
+      redraw((value) => value + 1);
+    }).catch((error) => {
+      if (!alive.current) return;
+      resolutions.current.set(candidateKey, {
+        status: "error",
+        message: error instanceof Error && error.message ? error.message : "Could not load this image."
+      });
+      redraw((value) => value + 1);
+    });
+  };
   useEffect2(() => {
+    alive.current = true;
     if (!dialog.current?.open) dialog.current?.showModal();
-    return () => clearTimeout(reset.current);
+    return () => {
+      alive.current = false;
+      clearTimeout(reset.current);
+      for (const value of resolutions.current.values()) if (value.url) URL.revokeObjectURL(value.url);
+      resolutions.current.clear();
+    };
   }, []);
   useEffect2(() => {
     clearTimeout(reset.current);
     setCopyState2("idle");
-  }, [index]);
-  if (!item?.url) return null;
+    resolve(item);
+  }, [index, item?.reference]);
+  if (!item || !item.url && (!item.reference || !adapter?.resolveImage)) return null;
   const move = (amount) => onChange((index + amount + items.length) % items.length);
   const copy = async () => {
     try {
-      await adapter.copyText(item.url);
+      await adapter.copyText(imageUrl);
       setCopyState2("copied");
     } catch {
       setCopyState2("failed");
@@ -683,12 +721,21 @@ function ImageViewer({ items, index, adapter, onChange, onClose }) {
           ] }),
           /* @__PURE__ */ jsxs2("nav", { "aria-label": "Image actions", children: [
             remote && adapter?.copyText ? /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": copyState === "copied" ? "Image link copied" : copyState === "failed" ? "Could not copy image link" : "Copy image link", title: "Copy image link", "data-status": copyState, onClick: copy, children: /* @__PURE__ */ jsx3(UiIcon, { name: copyState === "copied" ? "check" : "copy", size: 16 }) }) : null,
-            remote ? /* @__PURE__ */ jsx3("a", { href: item.url, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx3(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx3("a", { href: item.url, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx3(UiIcon, { name: "down", size: 16 }) }),
+            imageUrl ? remote ? /* @__PURE__ */ jsx3("a", { href: imageUrl, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx3(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx3("a", { href: imageUrl, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx3(UiIcon, { name: "down", size: 16 }) }) : null,
             /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": "Close image preview", title: "Close", onClick: close, children: /* @__PURE__ */ jsx3(UiIcon, { name: "close", size: 17 }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs2("figure", { children: [
-          /* @__PURE__ */ jsx3("img", { src: item.url, alt: item.label }),
+          imageUrl ? /* @__PURE__ */ jsx3("img", { src: imageUrl, alt: item.label }) : resolution?.status === "error" ? /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "alert", children: [
+            /* @__PURE__ */ jsx3(UiIcon, { name: "image", size: 28 }),
+            /* @__PURE__ */ jsx3("strong", { children: "Could not load image" }),
+            /* @__PURE__ */ jsx3("small", { children: resolution.message }),
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => resolve(item, true), children: "Retry" })
+          ] }) : /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "status", children: [
+            /* @__PURE__ */ jsx3("i", { class: "scui-control-spinner" }),
+            /* @__PURE__ */ jsx3("strong", { children: "Loading image\u2026" }),
+            /* @__PURE__ */ jsx3("small", { children: "The original stays out of the transcript payload." })
+          ] }),
           items.length > 1 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
             /* @__PURE__ */ jsx3("button", { type: "button", class: "scui-image-previous", "aria-label": "Previous image", onClick: () => move(-1), children: /* @__PURE__ */ jsx3(UiIcon, { name: "chevron", size: 19 }) }),
             /* @__PURE__ */ jsx3("button", { type: "button", class: "scui-image-next", "aria-label": "Next image", onClick: () => move(1), children: /* @__PURE__ */ jsx3(UiIcon, { name: "chevron", size: 19 }) })
@@ -702,7 +749,7 @@ function MessageImages({ items, adapter }) {
   const [active, setActive] = useState(null);
   const opener = useRef2(null);
   if (!items?.length) return null;
-  const viewable = items.filter((item) => item.url);
+  const viewable = items.filter((item) => item.url || item.reference && adapter?.resolveImage);
   const close = () => {
     setActive(null);
     requestAnimationFrame(() => opener.current?.focus({ preventScroll: true }));
@@ -711,7 +758,16 @@ function MessageImages({ items, adapter }) {
     /* @__PURE__ */ jsx3("div", { class: "scui-message-images", "aria-label": "Message images", children: items.map((item, index) => item.url ? /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `View image ${item.label}`, onClick: (event) => {
       opener.current = event.currentTarget;
       setActive(viewable.indexOf(item));
-    }, children: /* @__PURE__ */ jsx3("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
+    }, children: /* @__PURE__ */ jsx3("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : item.reference && adapter?.resolveImage ? /* @__PURE__ */ jsxs2("button", { type: "button", "data-lazy": "true", "aria-label": `Load image ${item.label}`, onClick: (event) => {
+      opener.current = event.currentTarget;
+      setActive(viewable.indexOf(item));
+    }, children: [
+      /* @__PURE__ */ jsx3(UiIcon, { name: "image", size: 16 }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: item.label }),
+        /* @__PURE__ */ jsx3("small", { children: "Load preview" })
+      ] })
+    ] }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
       /* @__PURE__ */ jsx3(UiIcon, { name: "image", size: 14 }),
       /* @__PURE__ */ jsxs2("span", { children: [
         /* @__PURE__ */ jsx3("strong", { children: item.label }),

package/core.mjs

@@ -499,6 +499,9 @@ function readTranscript(value) {
               ...(typeof image.id === 'string' ? { id: image.id } : {}),
               label: image.label,
               ...(typeof image.url === 'string' ? { url: image.url } : {}),
+              ...(typeof image.reference === 'string' && image.reference.length <= 4_000 ? { reference: image.reference } : {}),
+              ...(typeof image.mediaType === 'string' && image.mediaType.startsWith('image/') && image.mediaType.length <= 100 ? { mediaType: image.mediaType } : {}),
+              ...(Number.isSafeInteger(image.byteSize) && image.byteSize >= 0 ? { byteSize: image.byteSize } : {}),
             }]
           : [];
       }).slice(0, 4);

package/embed.mjs

@@ -510,7 +510,10 @@ function readTranscript(value) {
         return image && typeof image.label === "string" ? [{
           ...typeof image.id === "string" ? { id: image.id } : {},
           label: image.label,
-          ...typeof image.url === "string" ? { url: image.url } : {}
+          ...typeof image.url === "string" ? { url: image.url } : {},
+          ...typeof image.reference === "string" && image.reference.length <= 4e3 ? { reference: image.reference } : {},
+          ...typeof image.mediaType === "string" && image.mediaType.startsWith("image/") && image.mediaType.length <= 100 ? { mediaType: image.mediaType } : {},
+          ...Number.isSafeInteger(image.byteSize) && image.byteSize >= 0 ? { byteSize: image.byteSize } : {}
         }] : [];
       }).slice(0, 4);
     }
@@ -826,6 +829,7 @@ import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-ru
 var MAX_CONTEXT_ITEMS = 32;
 var MAX_IMAGE_ITEMS = 4;
 var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
 var IMAGE_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
 function normalizeContext(value) {
   return (Array.isArray(value) ? value : value ? [value] : []).flatMap((item) => {
@@ -928,22 +932,59 @@ function imageFilename(label) {
 function ImageViewer({ items, index, adapter, onChange, onClose }) {
   const dialog = useRef(null);
   const reset = useRef(null);
+  const resolutions = useRef(/* @__PURE__ */ new Map());
+  const alive = useRef(true);
+  const [, redraw] = useState(0);
   const [copyState, setCopyState2] = useState("idle");
   const item = items[index];
-  const remote = item?.url?.startsWith("http://") || item?.url?.startsWith("https://");
+  const key = item?.reference ?? item?.url ?? `${item?.id ?? ""}:${index}`;
+  const resolution = item?.url ? null : resolutions.current.get(key);
+  const imageUrl = item?.url ?? (resolution?.status === "ready" ? resolution.url : null);
+  const remote = imageUrl?.startsWith("http://") || imageUrl?.startsWith("https://");
+  const resolve = (candidate, force = false) => {
+    if (candidate?.url || !candidate?.reference || !adapter?.resolveImage) return;
+    const candidateKey = candidate.reference;
+    const current = resolutions.current.get(candidateKey);
+    if (!force && (current?.status === "loading" || current?.status === "ready")) return;
+    if (current?.url) URL.revokeObjectURL(current.url);
+    resolutions.current.set(candidateKey, { status: "loading" });
+    redraw((value) => value + 1);
+    Promise.resolve().then(() => adapter.resolveImage(candidate)).then((blob) => {
+      if (!(blob instanceof Blob) || !blob.type.startsWith("image/")) throw new Error("The host returned an invalid image.");
+      if (blob.size > MAX_RESOLVED_IMAGE_BYTES) throw new Error("This image is too large to preview safely.");
+      if (!alive.current) return;
+      const url = URL.createObjectURL(blob);
+      resolutions.current.set(candidateKey, { status: "ready", url });
+      redraw((value) => value + 1);
+    }).catch((error) => {
+      if (!alive.current) return;
+      resolutions.current.set(candidateKey, {
+        status: "error",
+        message: error instanceof Error && error.message ? error.message : "Could not load this image."
+      });
+      redraw((value) => value + 1);
+    });
+  };
   useEffect(() => {
+    alive.current = true;
     if (!dialog.current?.open) dialog.current?.showModal();
-    return () => clearTimeout(reset.current);
+    return () => {
+      alive.current = false;
+      clearTimeout(reset.current);
+      for (const value of resolutions.current.values()) if (value.url) URL.revokeObjectURL(value.url);
+      resolutions.current.clear();
+    };
   }, []);
   useEffect(() => {
     clearTimeout(reset.current);
     setCopyState2("idle");
-  }, [index]);
-  if (!item?.url) return null;
+    resolve(item);
+  }, [index, item?.reference]);
+  if (!item || !item.url && (!item.reference || !adapter?.resolveImage)) return null;
   const move = (amount) => onChange((index + amount + items.length) % items.length);
   const copy = async () => {
     try {
-      await adapter.copyText(item.url);
+      await adapter.copyText(imageUrl);
       setCopyState2("copied");
     } catch {
       setCopyState2("failed");
@@ -979,12 +1020,21 @@ function ImageViewer({ items, index, adapter, onChange, onClose }) {
           ] }),
           /* @__PURE__ */ jsxs2("nav", { "aria-label": "Image actions", children: [
             remote && adapter?.copyText ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": copyState === "copied" ? "Image link copied" : copyState === "failed" ? "Could not copy image link" : "Copy image link", title: "Copy image link", "data-status": copyState, onClick: copy, children: /* @__PURE__ */ jsx2(UiIcon, { name: copyState === "copied" ? "check" : "copy", size: 16 }) }) : null,
-            remote ? /* @__PURE__ */ jsx2("a", { href: item.url, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx2("a", { href: item.url, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "down", size: 16 }) }),
+            imageUrl ? remote ? /* @__PURE__ */ jsx2("a", { href: imageUrl, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx2("a", { href: imageUrl, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "down", size: 16 }) }) : null,
             /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": "Close image preview", title: "Close", onClick: close, children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 17 }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs2("figure", { children: [
-          /* @__PURE__ */ jsx2("img", { src: item.url, alt: item.label }),
+          imageUrl ? /* @__PURE__ */ jsx2("img", { src: imageUrl, alt: item.label }) : resolution?.status === "error" ? /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "alert", children: [
+            /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 28 }),
+            /* @__PURE__ */ jsx2("strong", { children: "Could not load image" }),
+            /* @__PURE__ */ jsx2("small", { children: resolution.message }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => resolve(item, true), children: "Retry" })
+          ] }) : /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "status", children: [
+            /* @__PURE__ */ jsx2("i", { class: "scui-control-spinner" }),
+            /* @__PURE__ */ jsx2("strong", { children: "Loading image\u2026" }),
+            /* @__PURE__ */ jsx2("small", { children: "The original stays out of the transcript payload." })
+          ] }),
           items.length > 1 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
             /* @__PURE__ */ jsx2("button", { type: "button", class: "scui-image-previous", "aria-label": "Previous image", onClick: () => move(-1), children: /* @__PURE__ */ jsx2(UiIcon, { name: "chevron", size: 19 }) }),
             /* @__PURE__ */ jsx2("button", { type: "button", class: "scui-image-next", "aria-label": "Next image", onClick: () => move(1), children: /* @__PURE__ */ jsx2(UiIcon, { name: "chevron", size: 19 }) })
@@ -998,7 +1048,7 @@ function MessageImages({ items, adapter }) {
   const [active, setActive] = useState(null);
   const opener = useRef(null);
   if (!items?.length) return null;
-  const viewable = items.filter((item) => item.url);
+  const viewable = items.filter((item) => item.url || item.reference && adapter?.resolveImage);
   const close = () => {
     setActive(null);
     requestAnimationFrame(() => opener.current?.focus({ preventScroll: true }));
@@ -1007,7 +1057,16 @@ function MessageImages({ items, adapter }) {
     /* @__PURE__ */ jsx2("div", { class: "scui-message-images", "aria-label": "Message images", children: items.map((item, index) => item.url ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `View image ${item.label}`, onClick: (event) => {
       opener.current = event.currentTarget;
       setActive(viewable.indexOf(item));
-    }, children: /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
+    }, children: /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : item.reference && adapter?.resolveImage ? /* @__PURE__ */ jsxs2("button", { type: "button", "data-lazy": "true", "aria-label": `Load image ${item.label}`, onClick: (event) => {
+      opener.current = event.currentTarget;
+      setActive(viewable.indexOf(item));
+    }, children: [
+      /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: item.label }),
+        /* @__PURE__ */ jsx2("small", { children: "Load preview" })
+      ] })
+    ] }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
       /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 14 }),
       /* @__PURE__ */ jsxs2("span", { children: [
         /* @__PURE__ */ jsx2("strong", { children: item.label }),

package/index.d.ts

@@ -50,6 +50,10 @@ export interface TranscriptImage {
   id?: string;
   label: string;
   url?: string;
+  /** Opaque host-owned handle for an image deliberately omitted from the initial UI payload. */
+  reference?: string;
+  mediaType?: string;
+  byteSize?: number;
 }
 
 export type TranscriptAttachment = TranscriptContext | (TranscriptImage & { url: string });
@@ -238,6 +242,8 @@ export interface UiAdapter {
   onIntent(intent: SupercodeUiIntent): void | Promise<void>;
   /** Ask the embedding host for explicit user-selected text or image context. */
   pickContext?(): TranscriptAttachment | TranscriptAttachment[] | null | Promise<TranscriptAttachment | TranscriptAttachment[] | null>;
+  /** Resolve one projected historical image on demand. The UI owns and revokes its object URL. */
+  resolveImage?(image: TranscriptImage): Blob | Promise<Blob>;
   onClose?(): void;
   onOpen?(): void;
   copyText?(value: string): void | Promise<void>;
@@ -357,8 +363,9 @@ export function HarnessLogo(props: { id: HarnessId; activity?: SessionActivity;
 export type UiIconName = 'attach' | 'back' | 'check' | 'chevron' | 'close' | 'copy' | 'down' | 'menu' | 'plus' | 'search' | 'send' | 'stop';
 export function UiIcon(props: { name: UiIconName; size?: number; class?: string }): VNode | null;
 export function hasHarnessLogo(id: string): boolean;
-export function ImageViewer(props: { items: Array<TranscriptImage & { url: string }>; index: number; adapter?: Pick<UiAdapter, 'copyText'>; onChange(index: number): void; onClose(): void }): VNode | null;
-export function MessageImages(props: { items?: TranscriptImage[]; adapter?: Pick<UiAdapter, 'copyText'> }): VNode | null;
+export function harnessLogoDataUrl(id: string): string | null;
+export function ImageViewer(props: { items: TranscriptImage[]; index: number; adapter?: Pick<UiAdapter, 'copyText' | 'resolveImage'>; onChange(index: number): void; onClose(): void }): VNode | null;
+export function MessageImages(props: { items?: TranscriptImage[]; adapter?: Pick<UiAdapter, 'copyText' | 'resolveImage'> }): VNode | null;
 export function LoadingStatus(props: { state: SupercodeUiState; compact?: boolean }): VNode;
 export function RequestCard(props: { entry: TranscriptEntryModel; adapter: UiAdapter; canRespond: boolean }): VNode | null;
 export function TranscriptEntry(props: { entry: TranscriptEntryModel; state: SupercodeUiState; adapter: UiAdapter }): VNode;

package/logo.d.ts

@@ -1,2 +1,2 @@
 export type { HarnessId, SessionActivity } from './index.js';
-export { HarnessLogo, hasHarnessLogo } from './index.js';
+export { HarnessLogo, harnessLogoDataUrl, hasHarnessLogo } from './index.js';

package/logo.mjs

@@ -48,6 +48,27 @@ var LOGOS = {
 function hasHarnessLogo(id) {
   return Object.hasOwn(LOGOS, id);
 }
+var LOGO_CHROME = {
+  codex: { background: "#f7f7f5", color: "#111" },
+  gemini: { background: "#f7f7f5", color: "#6e79dc" },
+  goose: { background: "#f7f7f5", color: "#101010" },
+  pi: { background: "#efefeb", color: "#111" },
+  supercode: { background: "#111923", color: "#f7f7f5" }
+};
+function escapeSvgAttribute(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function harnessLogoDataUrl(id) {
+  const logo = LOGOS[id];
+  if (!logo) return null;
+  const chrome = LOGO_CHROME[id] ?? { background: "#111", color: id === "claude-code" ? "#d97757" : "#f7f7f5" };
+  const glyph = logo.paths.map(([tag, attributes]) => {
+    const serialized = Object.entries(attributes).map(([name, value]) => `${name}="${escapeSvgAttribute(value)}"`).join(" ");
+    return `<${tag} ${serialized}/>`;
+  }).join("");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="19" fill="${chrome.background}" stroke="#383a42"/><svg x="7" y="7" width="26" height="26" viewBox="${logo.viewBox}" color="${chrome.color}" fill="currentColor" preserveAspectRatio="xMidYMid meet">${glyph}</svg></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
 function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
   const logo = LOGOS[id];
   useEffect(() => {
@@ -61,5 +82,6 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
 }
 export {
   HarnessLogo,
+  harnessLogoDataUrl,
   hasHarnessLogo
 };

package/messenger.mjs

@@ -507,7 +507,10 @@ function readTranscript(value) {
         return image && typeof image.label === "string" ? [{
           ...typeof image.id === "string" ? { id: image.id } : {},
           label: image.label,
-          ...typeof image.url === "string" ? { url: image.url } : {}
+          ...typeof image.url === "string" ? { url: image.url } : {},
+          ...typeof image.reference === "string" && image.reference.length <= 4e3 ? { reference: image.reference } : {},
+          ...typeof image.mediaType === "string" && image.mediaType.startsWith("image/") && image.mediaType.length <= 100 ? { mediaType: image.mediaType } : {},
+          ...Number.isSafeInteger(image.byteSize) && image.byteSize >= 0 ? { byteSize: image.byteSize } : {}
         }] : [];
       }).slice(0, 4);
     }
@@ -823,6 +826,7 @@ import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-ru
 var MAX_CONTEXT_ITEMS = 32;
 var MAX_IMAGE_ITEMS = 4;
 var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
 var IMAGE_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
 function normalizeContext(value) {
   return (Array.isArray(value) ? value : value ? [value] : []).flatMap((item) => {
@@ -925,22 +929,59 @@ function imageFilename(label) {
 function ImageViewer({ items, index, adapter, onChange, onClose }) {
   const dialog = useRef(null);
   const reset = useRef(null);
+  const resolutions = useRef(/* @__PURE__ */ new Map());
+  const alive = useRef(true);
+  const [, redraw] = useState(0);
   const [copyState, setCopyState2] = useState("idle");
   const item = items[index];
-  const remote = item?.url?.startsWith("http://") || item?.url?.startsWith("https://");
+  const key = item?.reference ?? item?.url ?? `${item?.id ?? ""}:${index}`;
+  const resolution = item?.url ? null : resolutions.current.get(key);
+  const imageUrl = item?.url ?? (resolution?.status === "ready" ? resolution.url : null);
+  const remote = imageUrl?.startsWith("http://") || imageUrl?.startsWith("https://");
+  const resolve = (candidate, force = false) => {
+    if (candidate?.url || !candidate?.reference || !adapter?.resolveImage) return;
+    const candidateKey = candidate.reference;
+    const current = resolutions.current.get(candidateKey);
+    if (!force && (current?.status === "loading" || current?.status === "ready")) return;
+    if (current?.url) URL.revokeObjectURL(current.url);
+    resolutions.current.set(candidateKey, { status: "loading" });
+    redraw((value) => value + 1);
+    Promise.resolve().then(() => adapter.resolveImage(candidate)).then((blob) => {
+      if (!(blob instanceof Blob) || !blob.type.startsWith("image/")) throw new Error("The host returned an invalid image.");
+      if (blob.size > MAX_RESOLVED_IMAGE_BYTES) throw new Error("This image is too large to preview safely.");
+      if (!alive.current) return;
+      const url = URL.createObjectURL(blob);
+      resolutions.current.set(candidateKey, { status: "ready", url });
+      redraw((value) => value + 1);
+    }).catch((error) => {
+      if (!alive.current) return;
+      resolutions.current.set(candidateKey, {
+        status: "error",
+        message: error instanceof Error && error.message ? error.message : "Could not load this image."
+      });
+      redraw((value) => value + 1);
+    });
+  };
   useEffect(() => {
+    alive.current = true;
     if (!dialog.current?.open) dialog.current?.showModal();
-    return () => clearTimeout(reset.current);
+    return () => {
+      alive.current = false;
+      clearTimeout(reset.current);
+      for (const value of resolutions.current.values()) if (value.url) URL.revokeObjectURL(value.url);
+      resolutions.current.clear();
+    };
   }, []);
   useEffect(() => {
     clearTimeout(reset.current);
     setCopyState2("idle");
-  }, [index]);
-  if (!item?.url) return null;
+    resolve(item);
+  }, [index, item?.reference]);
+  if (!item || !item.url && (!item.reference || !adapter?.resolveImage)) return null;
   const move = (amount) => onChange((index + amount + items.length) % items.length);
   const copy = async () => {
     try {
-      await adapter.copyText(item.url);
+      await adapter.copyText(imageUrl);
       setCopyState2("copied");
     } catch {
       setCopyState2("failed");
@@ -976,12 +1017,21 @@ function ImageViewer({ items, index, adapter, onChange, onClose }) {
           ] }),
           /* @__PURE__ */ jsxs2("nav", { "aria-label": "Image actions", children: [
             remote && adapter?.copyText ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": copyState === "copied" ? "Image link copied" : copyState === "failed" ? "Could not copy image link" : "Copy image link", title: "Copy image link", "data-status": copyState, onClick: copy, children: /* @__PURE__ */ jsx2(UiIcon, { name: copyState === "copied" ? "check" : "copy", size: 16 }) }) : null,
-            remote ? /* @__PURE__ */ jsx2("a", { href: item.url, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx2("a", { href: item.url, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "down", size: 16 }) }),
+            imageUrl ? remote ? /* @__PURE__ */ jsx2("a", { href: imageUrl, target: "_blank", rel: "noreferrer", "aria-label": "Open original image", title: "Open original image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }) }) : /* @__PURE__ */ jsx2("a", { href: imageUrl, download: imageFilename(item.label), "aria-label": "Download image", title: "Download image", children: /* @__PURE__ */ jsx2(UiIcon, { name: "down", size: 16 }) }) : null,
             /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": "Close image preview", title: "Close", onClick: close, children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 17 }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs2("figure", { children: [
-          /* @__PURE__ */ jsx2("img", { src: item.url, alt: item.label }),
+          imageUrl ? /* @__PURE__ */ jsx2("img", { src: imageUrl, alt: item.label }) : resolution?.status === "error" ? /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "alert", children: [
+            /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 28 }),
+            /* @__PURE__ */ jsx2("strong", { children: "Could not load image" }),
+            /* @__PURE__ */ jsx2("small", { children: resolution.message }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => resolve(item, true), children: "Retry" })
+          ] }) : /* @__PURE__ */ jsxs2("div", { class: "scui-image-resolution", role: "status", children: [
+            /* @__PURE__ */ jsx2("i", { class: "scui-control-spinner" }),
+            /* @__PURE__ */ jsx2("strong", { children: "Loading image\u2026" }),
+            /* @__PURE__ */ jsx2("small", { children: "The original stays out of the transcript payload." })
+          ] }),
           items.length > 1 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
             /* @__PURE__ */ jsx2("button", { type: "button", class: "scui-image-previous", "aria-label": "Previous image", onClick: () => move(-1), children: /* @__PURE__ */ jsx2(UiIcon, { name: "chevron", size: 19 }) }),
             /* @__PURE__ */ jsx2("button", { type: "button", class: "scui-image-next", "aria-label": "Next image", onClick: () => move(1), children: /* @__PURE__ */ jsx2(UiIcon, { name: "chevron", size: 19 }) })
@@ -995,7 +1045,7 @@ function MessageImages({ items, adapter }) {
   const [active, setActive] = useState(null);
   const opener = useRef(null);
   if (!items?.length) return null;
-  const viewable = items.filter((item) => item.url);
+  const viewable = items.filter((item) => item.url || item.reference && adapter?.resolveImage);
   const close = () => {
     setActive(null);
     requestAnimationFrame(() => opener.current?.focus({ preventScroll: true }));
@@ -1004,7 +1054,16 @@ function MessageImages({ items, adapter }) {
     /* @__PURE__ */ jsx2("div", { class: "scui-message-images", "aria-label": "Message images", children: items.map((item, index) => item.url ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `View image ${item.label}`, onClick: (event) => {
       opener.current = event.currentTarget;
       setActive(viewable.indexOf(item));
-    }, children: /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
+    }, children: /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }) }, item.id ?? `${item.label}:${index}`) : item.reference && adapter?.resolveImage ? /* @__PURE__ */ jsxs2("button", { type: "button", "data-lazy": "true", "aria-label": `Load image ${item.label}`, onClick: (event) => {
+      opener.current = event.currentTarget;
+      setActive(viewable.indexOf(item));
+    }, children: [
+      /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 16 }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: item.label }),
+        /* @__PURE__ */ jsx2("small", { children: "Load preview" })
+      ] })
+    ] }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { "data-unavailable": "true", children: [
       /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 14 }),
       /* @__PURE__ */ jsxs2("span", { children: [
         /* @__PURE__ */ jsx2("strong", { children: item.label }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {

package/sessions.mjs

@@ -196,6 +196,7 @@ function UiIcon({ name, size = 16, class: className = "" }) {
 import { useEffect as useEffect2, useRef as useRef2, useState } from "preact/hooks";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
 var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
 
 // src/conversation.jsx
 import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";

package/styles.css

@@ -175,8 +175,8 @@
 .scui-attach { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--scui-muted) }.scui-attach:hover:not(:disabled) { background:var(--scui-fill); color:var(--scui-fg) }
 .scui-compose-context { display:flex; gap:5px; margin-bottom:6px; overflow-x:auto; scrollbar-width:thin }.scui-compose-context > span { display:flex; flex:0 0 auto; max-width:210px; align-items:center; gap:5px; padding:4px 5px 4px 7px; border:1px solid var(--scui-border); border-radius:999px; background:var(--scui-fill); font-size:10px }.scui-compose-context strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-compose-context button { display:grid; width:18px; height:18px; padding:0; place-items:center; border:0; border-radius:50%; background:transparent }.scui-compose-context button:hover { background:color-mix(in srgb,var(--scui-fg) 9%,transparent) }.scui-context-error { display:block; margin:0 2px 6px; color:var(--scui-danger) }
 .scui-compose-images { display:flex; gap:6px; margin-bottom:6px; overflow-x:auto; scrollbar-width:thin }.scui-compose-images > span { position:relative; display:grid; flex:0 0 58px; width:58px; height:58px; overflow:hidden; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-fill); place-items:center }.scui-compose-images img { width:100%; height:100%; object-fit:cover }.scui-compose-images strong { position:absolute; right:2px; bottom:2px; left:2px; overflow:hidden; padding:2px 3px; border-radius:4px; background:rgba(0,0,0,.65); color:#fff; font-size:8px; font-weight:500; text-overflow:ellipsis; white-space:nowrap }.scui-compose-images button { position:absolute; z-index:1; top:2px; right:2px; display:grid; width:19px; height:19px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(0,0,0,.68); color:#fff; place-items:center; cursor:pointer }
-.scui-message-images { display:flex; max-width:280px; gap:5px; margin-bottom:6px; flex-wrap:wrap }.scui-message-images > button { display:block; max-width:100%; padding:0; overflow:hidden; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-fill); cursor:zoom-in }.scui-message-images > button:hover,.scui-message-images > button:focus-visible { border-color:var(--scui-border-strong); box-shadow:0 0 0 2px color-mix(in srgb,var(--scui-accent) 16%,transparent) }.scui-message-images img { display:block; width:auto; min-width:72px; max-width:100%; height:auto; max-height:210px; object-fit:contain }.scui-message-images > span { display:flex; align-items:center; gap:6px; padding:5px 7px; border:1px solid var(--scui-border); border-radius:7px; color:var(--scui-muted); font-size:10px }.scui-message-images > span > span { display:grid; min-width:0 }.scui-message-images > span strong { max-width:180px; overflow:hidden; color:var(--scui-fg); font-size:10px; font-weight:550; text-overflow:ellipsis; white-space:nowrap }.scui-message-images > span small { color:var(--scui-muted); font-size:8.5px }
-.scui-image-viewer { box-sizing:border-box; width:min(620px,calc(100vw - 16px)); max-width:none; height:min(620px,calc(100dvh - 16px)); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid var(--scui-border-strong); border-radius:12px; background:var(--scui-bg); color:var(--scui-fg); box-shadow:0 18px 50px rgba(0,0,0,.28) }.scui-image-viewer::backdrop { background:rgba(10,12,15,.68); backdrop-filter:blur(2px) }.scui-image-viewer > header { display:flex; min-height:43px; align-items:center; gap:8px; padding:0 6px 0 11px; border-bottom:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-image-viewer > header > span { display:grid; min-width:0; flex:1 }.scui-image-viewer > header strong { overflow:hidden; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap }.scui-image-viewer > header small { color:var(--scui-muted); font-size:9px }.scui-image-viewer nav { display:flex; flex:none; gap:2px }.scui-image-viewer nav button,.scui-image-viewer nav a { display:grid; box-sizing:border-box; width:31px; height:31px; padding:0; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--scui-muted); cursor:pointer }.scui-image-viewer nav button:hover,.scui-image-viewer nav button:focus-visible,.scui-image-viewer nav a:hover,.scui-image-viewer nav a:focus-visible { background:var(--scui-fill); color:var(--scui-fg) }.scui-image-viewer nav button[data-status="copied"] { color:var(--scui-positive) }.scui-image-viewer nav button[data-status="failed"] { color:var(--scui-danger) }.scui-image-viewer figure { position:relative; display:grid; box-sizing:border-box; height:calc(100% - 43px); margin:0; padding:12px; overflow:hidden; place-items:center; background:color-mix(in srgb,var(--scui-fg) 4%,var(--scui-bg)) }.scui-image-viewer figure > img { display:block; max-width:100%; max-height:100%; object-fit:contain }.scui-image-viewer figure > button { position:absolute; top:50%; display:grid; width:34px; height:34px; padding:0; place-items:center; border:1px solid color-mix(in srgb,var(--scui-fg) 18%,transparent); border-radius:50%; background:color-mix(in srgb,var(--scui-bg) 82%,transparent); color:var(--scui-fg); box-shadow:0 2px 8px rgba(0,0,0,.16); cursor:pointer; transform:translateY(-50%); backdrop-filter:blur(5px) }.scui-image-viewer figure > button:hover,.scui-image-viewer figure > button:focus-visible { background:var(--scui-bg) }.scui-image-previous { left:10px }.scui-image-previous svg { transform:rotate(180deg) }.scui-image-next { right:10px }
+.scui-message-images { display:flex; max-width:280px; gap:5px; margin-bottom:6px; flex-wrap:wrap }.scui-message-images > button { display:block; max-width:100%; padding:0; overflow:hidden; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-fill); cursor:zoom-in }.scui-message-images > button:hover,.scui-message-images > button:focus-visible { border-color:var(--scui-border-strong); box-shadow:0 0 0 2px color-mix(in srgb,var(--scui-accent) 16%,transparent) }.scui-message-images img { display:block; width:auto; min-width:72px; max-width:100%; height:auto; max-height:210px; object-fit:contain }.scui-message-images > span,.scui-message-images > button[data-lazy="true"] { display:flex; align-items:center; gap:6px; padding:5px 7px; border:1px solid var(--scui-border); border-radius:7px; color:var(--scui-muted); font-size:10px }.scui-message-images > button[data-lazy="true"] { text-align:left; cursor:pointer }.scui-message-images > span > span,.scui-message-images > button[data-lazy="true"] > span { display:grid; min-width:0 }.scui-message-images > span strong,.scui-message-images > button[data-lazy="true"] strong { max-width:180px; overflow:hidden; color:var(--scui-fg); font-size:10px; font-weight:550; text-overflow:ellipsis; white-space:nowrap }.scui-message-images > span small,.scui-message-images > button[data-lazy="true"] small { color:var(--scui-muted); font-size:8.5px }
+.scui-image-viewer { box-sizing:border-box; width:min(620px,calc(100vw - 16px)); max-width:none; height:min(620px,calc(100dvh - 16px)); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid var(--scui-border-strong); border-radius:12px; background:var(--scui-bg); color:var(--scui-fg); box-shadow:0 18px 50px rgba(0,0,0,.28) }.scui-image-viewer::backdrop { background:rgba(10,12,15,.68); backdrop-filter:blur(2px) }.scui-image-viewer > header { display:flex; min-height:43px; align-items:center; gap:8px; padding:0 6px 0 11px; border-bottom:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-image-viewer > header > span { display:grid; min-width:0; flex:1 }.scui-image-viewer > header strong { overflow:hidden; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap }.scui-image-viewer > header small { color:var(--scui-muted); font-size:9px }.scui-image-viewer nav { display:flex; flex:none; gap:2px }.scui-image-viewer nav button,.scui-image-viewer nav a { display:grid; box-sizing:border-box; width:31px; height:31px; padding:0; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--scui-muted); cursor:pointer }.scui-image-viewer nav button:hover,.scui-image-viewer nav button:focus-visible,.scui-image-viewer nav a:hover,.scui-image-viewer nav a:focus-visible { background:var(--scui-fill); color:var(--scui-fg) }.scui-image-viewer nav button[data-status="copied"] { color:var(--scui-positive) }.scui-image-viewer nav button[data-status="failed"] { color:var(--scui-danger) }.scui-image-viewer figure { position:relative; display:grid; box-sizing:border-box; height:calc(100% - 43px); margin:0; padding:12px; overflow:hidden; place-items:center; background:color-mix(in srgb,var(--scui-fg) 4%,var(--scui-bg)) }.scui-image-viewer figure > img { display:block; max-width:100%; max-height:100%; object-fit:contain }.scui-image-viewer figure > button { position:absolute; top:50%; display:grid; width:34px; height:34px; padding:0; place-items:center; border:1px solid color-mix(in srgb,var(--scui-fg) 18%,transparent); border-radius:50%; background:color-mix(in srgb,var(--scui-bg) 82%,transparent); color:var(--scui-fg); box-shadow:0 2px 8px rgba(0,0,0,.16); cursor:pointer; transform:translateY(-50%); backdrop-filter:blur(5px) }.scui-image-viewer figure > button:hover,.scui-image-viewer figure > button:focus-visible { background:var(--scui-bg) }.scui-image-previous { left:10px }.scui-image-previous svg { transform:rotate(180deg) }.scui-image-next { right:10px }.scui-image-resolution { display:grid; max-width:280px; justify-items:center; gap:7px; color:var(--scui-muted); text-align:center }.scui-image-resolution strong { color:var(--scui-fg); font-size:12px }.scui-image-resolution small { font-size:10px }.scui-image-resolution > button { position:static; width:auto; height:auto; padding:6px 10px; border:1px solid var(--scui-border-strong); border-radius:7px; background:var(--scui-bg); color:var(--scui-fg); transform:none; backdrop-filter:none }
 .scui-send,.scui-stop { display:grid; width:29px; height:29px; padding:0; place-items:center; border:0; border-radius:8px; background:var(--scui-accent); color:#fff; cursor:pointer }.scui-stop { background:var(--scui-danger) }.scui-send:disabled,.scui-stop:disabled { opacity:.4; cursor:default }.scui-control-spinner { box-sizing:border-box; width:13px; height:13px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:scui-spin .75s linear infinite }
 .scui-queue { display:grid; gap:4px; max-height:85px; margin-bottom:6px; overflow:auto; font-size:10.5px }.scui-queue > span { display:flex; gap:6px; padding:4px 6px; border-radius:5px; background:var(--scui-fill) }.scui-queue > span > span { display:grid; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-queue small { color:var(--scui-muted) }.scui-queue > span button { margin-left:auto; border:0; background:transparent }
 .scui-harness-picker { display:flex; align-items:center; gap:7px; margin-bottom:7px }.scui-harness-picker select { margin-left:auto; max-width:55%; padding:4px; border:1px solid var(--scui-border); border-radius:6px; background:var(--scui-bg); color:var(--scui-fg) }