@volter-ai-dev/supercode-ui 0.1.22 → 0.1.24

package/composer.mjs

@@ -1,5 +1,5 @@
 // src/composer.jsx
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "preact/hooks";
 
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
@@ -129,10 +129,12 @@ function UiIcon({ name, size = 16, class: className = "" }) {
 }
 
 // src/context.jsx
-import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
 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) => {
@@ -268,18 +270,18 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
 }
 function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, onPending, onDraftRestored }) {
   const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, context: [], images: [], queue: [] };
-  const [draft, setDraft] = useState(remembered.draft);
-  const [context, setContext] = useState(remembered.context ?? []);
-  const [images, setImages] = useState(remembered.images ?? []);
-  const [queue, setQueue] = useState((remembered.queue ?? []).map((item) => ({ ...item, context: item.context ?? [], images: item.images ?? [] })));
-  const [dispatching, setDispatching] = useState(false);
-  const [picking, setPicking] = useState(false);
-  const [dragging, setDragging] = useState(false);
-  const [pickerError, setPickerError] = useState(null);
-  const textarea = useRef(null);
+  const [draft, setDraft] = useState2(remembered.draft);
+  const [context, setContext] = useState2(remembered.context ?? []);
+  const [images, setImages] = useState2(remembered.images ?? []);
+  const [queue, setQueue] = useState2((remembered.queue ?? []).map((item) => ({ ...item, context: item.context ?? [], images: item.images ?? [] })));
+  const [dispatching, setDispatching] = useState2(false);
+  const [picking, setPicking] = useState2(false);
+  const [dragging, setDragging] = useState2(false);
+  const [pickerError, setPickerError] = useState2(null);
+  const textarea = useRef2(null);
   useAutosizeTextarea(textarea, draft);
   const remember = (nextDraft, nextContext, nextImages, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, context: nextContext, images: nextImages, queue: nextQueue });
-  useEffect(() => {
+  useEffect2(() => {
     remember(draft, context, images, queue);
   }, [draft, context, images, memoryKey, queue]);
   const updateQueue = (update) => setQueue((items) => {
@@ -289,7 +291,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   });
   const queueBlocked = state.busy || pendingStatus !== null || dispatching;
   const queuesNewMessage = state.busy || pendingStatus === "sending" || pendingStatus === "failed" || dispatching;
-  useEffect(() => {
+  useEffect2(() => {
     if (!queueBlocked && state.canSend && queue.length) {
       const [next, ...rest] = queue;
       setDispatching(true);
@@ -299,13 +301,13 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       adapter.onIntent({ action: "send", text: next.text, ...next.context.length ? { context: next.context } : {}, ...next.images.length ? { images: next.images } : {} });
     }
   }, [adapter, draft, memoryKey, onPending, queue, queueBlocked, state.canSend]);
-  useEffect(() => {
+  useEffect2(() => {
     if (pendingStatus !== null || state.busy) setDispatching(false);
   }, [pendingStatus, state.busy]);
-  useEffect(() => {
+  useEffect2(() => {
     textarea.current?.focus({ preventScroll: true });
   }, [memoryKey]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!restoreDraft) return;
     setDraft(restoreDraft.text);
     const restoredContext = normalizeContext(restoreDraft.context);
@@ -316,7 +318,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     textarea.current?.focus({ preventScroll: true });
     onDraftRestored?.(restoreDraft.id);
   }, [onDraftRestored, restoreDraft?.id]);
-  useEffect(() => {
+  useEffect2(() => {
     const timer = setTimeout(() => adapter.onIntent({ action: "draft", text: draft }), 250);
     return () => clearTimeout(timer);
   }, [adapter, draft]);

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.d.ts

@@ -15,7 +15,9 @@ export type {
 export {
   ActivityGroup,
   Conversation,
+  ImageViewer,
   LoadingStatus,
+  MessageImages,
   RequestCard,
   SessionDetails,
   TaskPlan,

package/conversation.mjs

@@ -1,6 +1,6 @@
 // src/conversation.jsx
-import { Fragment as Fragment2 } from "preact";
-import { useEffect as useEffect2, useId, useLayoutEffect, useRef as useRef2, useState } from "preact/hooks";
+import { Fragment as Fragment3 } from "preact";
+import { useEffect as useEffect3, useId, useLayoutEffect, useRef as useRef3, useState as useState2 } from "preact/hooks";
 
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
@@ -622,18 +622,164 @@ function UiIcon({ name, size = 16, class: className = "" }) {
 }
 
 // src/context.jsx
-import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+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;
-function MessageImages({ items }) {
+var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
+function imageFilename(label) {
+  const value = label.trim().replace(/[\\/:*?"<>|]+/g, "-");
+  return value || "image";
+}
+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 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 () => {
+      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");
+    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(imageUrl);
+      setCopyState2("copied");
+    } catch {
+      setCopyState2("failed");
+    }
+    clearTimeout(reset.current);
+    reset.current = setTimeout(() => setCopyState2("idle"), 1500);
+  };
+  const close = () => dialog.current?.close();
+  return /* @__PURE__ */ jsxs2(
+    "dialog",
+    {
+      ref: dialog,
+      class: "scui-image-viewer",
+      "aria-label": `Image preview: ${item.label}`,
+      onClose,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) close();
+      },
+      onKeyDown: (event) => {
+        if (items.length < 2 || !["ArrowLeft", "ArrowRight"].includes(event.key)) return;
+        event.preventDefault();
+        move(event.key === "ArrowLeft" ? -1 : 1);
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("header", { children: [
+          /* @__PURE__ */ jsxs2("span", { children: [
+            /* @__PURE__ */ jsx3("strong", { children: item.label }),
+            items.length > 1 ? /* @__PURE__ */ jsxs2("small", { children: [
+              index + 1,
+              " of ",
+              items.length
+            ] }) : null
+          ] }),
+          /* @__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,
+            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: [
+          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 }) })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+function MessageImages({ items, adapter }) {
+  const [active, setActive] = useState(null);
+  const opener = useRef2(null);
   if (!items?.length) return null;
-  return /* @__PURE__ */ jsx3("div", { class: "scui-message-images", children: items.map((item, index) => item.url ? /* @__PURE__ */ jsx3("img", { src: item.url, alt: item.label }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { children: [
-    /* @__PURE__ */ jsx3(UiIcon, { name: "image", size: 14 }),
-    item.label
-  ] }, item.id ?? `${item.label}:${index}`)) });
+  const viewable = items.filter((item) => item.url || item.reference && adapter?.resolveImage);
+  const close = () => {
+    setActive(null);
+    requestAnimationFrame(() => opener.current?.focus({ preventScroll: true }));
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__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}`) : 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 }),
+        /* @__PURE__ */ jsx3("small", { children: "Preview unavailable" })
+      ] })
+    ] }, item.id ?? `${item.label}:${index}`)) }),
+    active !== null && viewable[active] ? /* @__PURE__ */ jsx3(ImageViewer, { items: viewable, index: active, adapter, onChange: setActive, onClose: close }) : null
+  ] });
 }
 
 // src/conversation.jsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
 function LoadingStatus({ state, compact = false }) {
   const copy = {
     connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
@@ -682,9 +828,9 @@ function ContextDisclosure({ context }) {
   ] });
 }
 function MessageMeta({ entry, adapter }) {
-  const [copyState, setCopyState2] = useState("idle");
-  const reset = useRef2(null);
-  useEffect2(() => () => clearTimeout(reset.current), []);
+  const [copyState, setCopyState2] = useState2("idle");
+  const reset = useRef3(null);
+  useEffect3(() => () => clearTimeout(reset.current), []);
   const date = entry.ts === null ? null : new Date(entry.ts);
   const validDate = date && Number.isFinite(date.valueOf()) ? date : null;
   if (!validDate && (!adapter?.copyText || !entry.text)) return null;
@@ -705,33 +851,33 @@ function MessageMeta({ entry, adapter }) {
   ] });
 }
 var TOOL_ICONS = {
-  read: () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  read: () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4("path", { d: "M5 2.75h7.25L15 5.5v7.75A1.75 1.75 0 0 1 13.25 15h-8.5A1.75 1.75 0 0 1 3 13.25v-8.5A2 2 0 0 1 5 2.75Z" }),
     /* @__PURE__ */ jsx4("path", { d: "M12 2.9v3h2.85M6 9h6M6 12h4" })
   ] }),
-  search: () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  search: () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4("circle", { cx: "8", cy: "8", r: "4.5" }),
     /* @__PURE__ */ jsx4("path", { d: "m11.5 11.5 3 3" })
   ] }),
-  edit: () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  edit: () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4("path", { d: "m11.75 3.25 3 3-8.5 8.5-3.75.75.75-3.75 8.5-8.5Z" }),
     /* @__PURE__ */ jsx4("path", { d: "m10 5 3 3" })
   ] }),
-  command: () => /* @__PURE__ */ jsx4(Fragment3, { children: /* @__PURE__ */ jsx4("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
-  test: () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  command: () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsx4("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
+  test: () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4("path", { d: "M6 2.5v3L3 12a2 2 0 0 0 1.8 3h8.4a2 2 0 0 0 1.8-3l-3-6.5v-3M5 9h8" }),
     /* @__PURE__ */ jsx4("path", { d: "M5 2.5h8" })
   ] }),
-  web: () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  web: () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "9", r: "6.5" }),
     /* @__PURE__ */ jsx4("path", { d: "M2.75 9h12.5M9 2.5c2 1.8 3 4 3 6.5s-1 4.7-3 6.5c-2-1.8-3-4-3-6.5s1-4.7 3-6.5Z" })
   ] }),
-  agent: () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  agent: () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "6", r: "2.5" }),
     /* @__PURE__ */ jsx4("path", { d: "M4 15c.4-3 2-4.5 5-4.5s4.6 1.5 5 4.5" })
   ] }),
-  plan: () => /* @__PURE__ */ jsx4(Fragment3, { children: /* @__PURE__ */ jsx4("path", { d: "m3 5 1 1 2-2M3 9l1 1 2-2M3 13l1 1 2-2M8 5h7M8 9h7M8 13h7" }) }),
-  other: () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  plan: () => /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsx4("path", { d: "m3 5 1 1 2-2M3 9l1 1 2-2M3 13l1 1 2-2M8 5h7M8 9h7M8 13h7" }) }),
+  other: () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4("path", { d: "M9 2.5v3M9 12.5v3M2.5 9h3M12.5 9h3" }),
     /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "9", r: "3.5" })
   ] })
@@ -797,9 +943,9 @@ function ToolMetrics({ presentation }) {
 }
 function PendingElapsed({ now }) {
   const clock = now ?? Date.now;
-  const started = useRef2(clock());
-  const [elapsed, setElapsed] = useState(0);
-  useEffect2(() => {
+  const started = useRef3(clock());
+  const [elapsed, setElapsed] = useState2(0);
+  useEffect3(() => {
     const timer = setInterval(() => setElapsed(Math.max(0, clock() - started.current)), 1e3);
     return () => clearInterval(timer);
   }, [clock]);
@@ -840,7 +986,7 @@ function SearchPreview({ presentation }) {
     ] }) : null,
     lines.length ? /* @__PURE__ */ jsx4("ol", { children: lines.map((line, index) => {
       const match = /^(.*?):(\d+)(?::(\d+))?:(.*)$/.exec(line);
-      return /* @__PURE__ */ jsx4("li", { children: match ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      return /* @__PURE__ */ jsx4("li", { children: match ? /* @__PURE__ */ jsxs3(Fragment4, { children: [
         /* @__PURE__ */ jsx4("code", { children: match[1] }),
         /* @__PURE__ */ jsxs3("small", { children: [
           match[2],
@@ -873,9 +1019,9 @@ function ToolPreview({ presentation, entry }) {
   return presentation.preview ? /* @__PURE__ */ jsx4("pre", { class: "scui-tool-output", "data-error": failed, children: stripAnsi(presentation.preview) }) : null;
 }
 function ToolActions({ presentation, adapter }) {
-  const [copied, setCopied] = useState(false);
-  const reset = useRef2(null);
-  useEffect2(() => () => clearTimeout(reset.current), []);
+  const [copied, setCopied] = useState2(false);
+  const reset = useRef3(null);
+  useEffect3(() => () => clearTimeout(reset.current), []);
   if (!adapter?.copyText) return null;
   const action = presentation.command ? ["Copy command", presentation.command] : presentation.path ? ["Copy path", presentation.path] : presentation.url ? ["Copy URL", presentation.url] : presentation.query ? ["Copy query", presentation.query] : null;
   const copy = async () => {
@@ -922,7 +1068,7 @@ function TranscriptEntry({ entry, state, adapter }) {
   }
   if (entry.role === "notice" || entry.role === "system") return /* @__PURE__ */ jsx4("div", { class: "scui-notice", "data-code": entry.code, children: entry.text });
   return /* @__PURE__ */ jsxs3("article", { class: "scui-message", "data-role": entry.role, "aria-label": `${entry.role === "user" ? "Your" : "Assistant"} message`, children: [
-    /* @__PURE__ */ jsx4(MessageImages, { items: entry.images }),
+    /* @__PURE__ */ jsx4(MessageImages, { items: entry.images, adapter }),
     /* @__PURE__ */ jsx4(Markdown, { value: entry.text, copyText: adapter?.copyText }),
     /* @__PURE__ */ jsx4(ContextDisclosure, { context: entry.context }),
     entry.truncated ? /* @__PURE__ */ jsx4("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null,
@@ -931,14 +1077,14 @@ function TranscriptEntry({ entry, state, adapter }) {
 }
 function ToolRow({ entry, workspace, open = false, adapter }) {
   const presentation = entry.presentation ?? createToolPresentation(entry);
-  const [expanded, setExpanded] = useState(open || entry.status === "pending");
-  useEffect2(() => {
+  const [expanded, setExpanded] = useState2(open || entry.status === "pending");
+  useEffect3(() => {
     if (entry.status === "pending") setExpanded(true);
   }, [entry.status]);
   const target = compactToolTarget(presentation.target, workspace);
   const hasDetail = Boolean(entry.arguments || entry.resultText || presentation.preview || presentation.fields.length);
   const category = presentation.category ?? toolCategory(entry);
-  const summary = /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  const summary = /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsx4(ToolIcon, { category }),
     /* @__PURE__ */ jsx4("strong", { children: toolAction2(entry, category, presentation) }),
     target ? /* @__PURE__ */ jsx4("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
@@ -966,9 +1112,9 @@ function ToolRow({ entry, workspace, open = false, adapter }) {
 function ActivityGroup({ entries, state, adapter }) {
   if (entries.length === 1) return /* @__PURE__ */ jsx4("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx4(ToolRow, { entry: entries[0], workspace: state.workspace, adapter }) });
   const active = entries.some((entry) => entry.status === "pending");
-  const [open, setOpen] = useState(active);
+  const [open, setOpen] = useState2(active);
   const id = useId();
-  useEffect2(() => {
+  useEffect3(() => {
     if (active) setOpen(true);
   }, [active]);
   return /* @__PURE__ */ jsxs3("section", { class: "scui-activity", children: [
@@ -1044,9 +1190,9 @@ function SessionDetails({ semantics }) {
 }
 var conversationMemory = /* @__PURE__ */ new Map();
 function ConversationAnnouncements({ state }) {
-  const previousBusy = useRef2(state.busy);
-  const [announcement, setAnnouncement] = useState("");
-  useEffect2(() => {
+  const previousBusy = useRef3(state.busy);
+  const [announcement, setAnnouncement] = useState2("");
+  useEffect3(() => {
     if (previousBusy.current && !state.busy && !state.error) {
       setAnnouncement(`${harnessDisplayName(state.harness) || "Coding agent"} finished working`);
     }
@@ -1055,13 +1201,13 @@ function ConversationAnnouncements({ state }) {
   return /* @__PURE__ */ jsx4("span", { class: "scui-sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement });
 }
 function Conversation({ state, adapter, components = {}, slots = {}, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pending = null, unreadAfterMessages = null }) {
-  const scroller = useRef2(null);
+  const scroller = useRef3(null);
   const remembered = conversationMemory.get(memoryKey) ?? { top: null, atBottom: true };
-  const [atBottom, setAtBottom] = useState(remembered.atBottom);
-  const earlierAnchor = useRef2(null);
-  const restored = useRef2(false);
+  const [atBottom, setAtBottom] = useState2(remembered.atBottom);
+  const earlierAnchor = useRef3(null);
+  const restored = useRef3(false);
   const blocks = groupConversation(state.transcript);
-  const unreadBoundary = useRef2(Number.isSafeInteger(unreadAfterMessages) && unreadAfterMessages >= 0 ? unreadAfterMessages : null);
+  const unreadBoundary = useRef3(Number.isSafeInteger(unreadAfterMessages) && unreadAfterMessages >= 0 ? unreadAfterMessages : null);
   const unreadBlock = unreadBoundary.current === null ? -1 : blocks.findIndex((block) => {
     const entries = block.kind === "activity" ? block.entries : [block.entry];
     return entries.some((entry) => Number.isSafeInteger(entry.messageIndex) && entry.messageIndex > unreadBoundary.current);
@@ -1120,12 +1266,12 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
       }, children: "Load earlier messages" }) : null,
       !blocks.length && state.startup !== "ready" ? /* @__PURE__ */ jsx4(LoadingStatus, { state }) : null,
       !blocks.length && state.startup === "ready" ? Empty ? /* @__PURE__ */ jsx4(Empty, { state, adapter, value: null }) : /* @__PURE__ */ jsx4("div", { class: "scui-empty", children: state.error ?? (state.harness ? `${harnessDisplayName(state.harness)} is listening. Say something.` : "No transcript yet.") }) : null,
-      blocks.map((block, index) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      blocks.map((block, index) => /* @__PURE__ */ jsxs3(Fragment3, { children: [
         index === unreadBlock ? /* @__PURE__ */ jsx4("div", { class: "scui-unread-divider", role: "separator", "aria-label": "New messages", children: /* @__PURE__ */ jsx4("span", { children: "New" }) }) : null,
         block.kind === "activity" ? /* @__PURE__ */ jsx4(Group, { value: block.entries, entries: block.entries, state, adapter }) : /* @__PURE__ */ jsx4(Entry, { value: block.entry, entry: block.entry, state, adapter })
       ] }, block.id)),
       pendingMessage ? /* @__PURE__ */ jsxs3("article", { class: "scui-message scui-pending", "data-role": "user", "data-status": pendingMessage.status, "aria-label": "Your pending message", children: [
-        /* @__PURE__ */ jsx4(MessageImages, { items: pendingMessage.images }),
+        /* @__PURE__ */ jsx4(MessageImages, { items: pendingMessage.images, adapter }),
         /* @__PURE__ */ jsx4(Markdown, { value: pendingMessage.text, copyText: adapter?.copyText }),
         /* @__PURE__ */ jsx4(ContextDisclosure, { context: pendingMessage.context }),
         /* @__PURE__ */ jsxs3("footer", { children: [
@@ -1157,7 +1303,9 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
 export {
   ActivityGroup,
   Conversation,
+  ImageViewer,
   LoadingStatus,
+  MessageImages,
   RequestCard,
   SessionDetails,
   TaskPlan,