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

package/README.md

@@ -132,6 +132,11 @@ inventing fallback prompt text. The composer bounds images to four supported bro
 messages, retry, edit, and new-chat recovery. The host still chooses how explicit file selection
 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.
+
 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
 bridges state/intents plus host-specific theme and persistence policy.

package/components.d.ts

@@ -5,7 +5,9 @@ export {
   ContinuationBar,
   Conversation,
   HarnessLogo,
+  ImageViewer,
   LoadingStatus,
+  MessageImages,
   RequestCard,
   SessionDetails,
   SessionList,

package/components.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({
@@ -815,7 +815,8 @@ 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;
@@ -914,12 +915,101 @@ function ImageTray({ items, onRemove }) {
     onRemove ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove image ${item.label}`, onClick: () => onRemove(index), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 12 }) }) : null
   ] }, item.id ?? `${item.label}:${index}`)) });
 }
-function MessageImages({ items }) {
+function imageFilename(label) {
+  const value = label.trim().replace(/[\\/:*?"<>|]+/g, "-");
+  return value || "image";
+}
+function ImageViewer({ items, index, adapter, onChange, onClose }) {
+  const dialog = useRef(null);
+  const reset = useRef(null);
+  const [copyState, setCopyState2] = useState("idle");
+  const item = items[index];
+  const remote = item?.url?.startsWith("http://") || item?.url?.startsWith("https://");
+  useEffect(() => {
+    if (!dialog.current?.open) dialog.current?.showModal();
+    return () => clearTimeout(reset.current);
+  }, []);
+  useEffect(() => {
+    clearTimeout(reset.current);
+    setCopyState2("idle");
+  }, [index]);
+  if (!item?.url) return null;
+  const move = (amount) => onChange((index + amount + items.length) % items.length);
+  const copy = async () => {
+    try {
+      await adapter.copyText(item.url);
+      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__ */ jsx2("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__ */ 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 }) }),
+            /* @__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 }),
+          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 }) })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+function MessageImages({ items, adapter }) {
+  const [active, setActive] = useState(null);
+  const opener = useRef(null);
   if (!items?.length) return null;
-  return /* @__PURE__ */ jsx2("div", { class: "scui-message-images", children: items.map((item, index) => item.url ? /* @__PURE__ */ jsx2("img", { src: item.url, alt: item.label }, item.id ?? `${item.label}:${index}`) : /* @__PURE__ */ jsxs2("span", { children: [
-    /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 14 }),
-    item.label
-  ] }, item.id ?? `${item.label}:${index}`)) });
+  const viewable = items.filter((item) => item.url);
+  const close = () => {
+    setActive(null);
+    requestAnimationFrame(() => opener.current?.focus({ preventScroll: true }));
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__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: [
+      /* @__PURE__ */ jsx2(UiIcon, { name: "image", size: 14 }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: item.label }),
+        /* @__PURE__ */ jsx2("small", { children: "Preview unavailable" })
+      ] })
+    ] }, item.id ?? `${item.label}:${index}`)) }),
+    active !== null && viewable[active] ? /* @__PURE__ */ jsx2(ImageViewer, { items: viewable, index: active, adapter, onChange: setActive, onClose: close }) : null
+  ] });
 }
 
 // src/textarea.js
@@ -961,18 +1051,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) => {
@@ -982,7 +1072,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);
@@ -992,13 +1082,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);
@@ -1009,7 +1099,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]);
@@ -1134,12 +1224,12 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
 }
 
 // src/conversation.jsx
-import { Fragment as Fragment2 } from "preact";
-import { useEffect as useEffect3, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState2 } from "preact/hooks";
+import { Fragment as Fragment3 } from "preact";
+import { useEffect as useEffect4, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState3 } from "preact/hooks";
 
 // src/markdown.jsx
 import MarkdownIt from "markdown-it";
-import { useEffect as useEffect2, useMemo, useRef as useRef2 } from "preact/hooks";
+import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "preact/hooks";
 import { jsx as jsx4 } from "preact/jsx-runtime";
 var markdown = new MarkdownIt({ html: false, linkify: true, breaks: false });
 var LANGUAGE_LABELS = {
@@ -1201,8 +1291,8 @@ function setCopyState(button, status) {
 }
 function Markdown({ value, copyText }) {
   const html = useMemo(() => markdown.render(value), [value]);
-  const resets = useRef2(/* @__PURE__ */ new Map());
-  useEffect2(() => () => {
+  const resets = useRef3(/* @__PURE__ */ new Map());
+  useEffect3(() => () => {
     for (const timer of resets.current.values()) clearTimeout(timer);
     resets.current.clear();
   }, []);
@@ -1231,7 +1321,7 @@ function Markdown({ value, copyText }) {
 }
 
 // src/conversation.jsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
 function LoadingStatus({ state, compact = false }) {
   const copy = {
     connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
@@ -1280,9 +1370,9 @@ function ContextDisclosure({ context }) {
   ] });
 }
 function MessageMeta({ entry, adapter }) {
-  const [copyState, setCopyState2] = useState2("idle");
-  const reset = useRef3(null);
-  useEffect3(() => () => clearTimeout(reset.current), []);
+  const [copyState, setCopyState2] = useState3("idle");
+  const reset = useRef4(null);
+  useEffect4(() => () => 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;
@@ -1303,33 +1393,33 @@ function MessageMeta({ entry, adapter }) {
   ] });
 }
 var TOOL_ICONS = {
-  read: () => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  read: () => /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5("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__ */ jsx5("path", { d: "M12 2.9v3h2.85M6 9h6M6 12h4" })
   ] }),
-  search: () => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  search: () => /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5("circle", { cx: "8", cy: "8", r: "4.5" }),
     /* @__PURE__ */ jsx5("path", { d: "m11.5 11.5 3 3" })
   ] }),
-  edit: () => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  edit: () => /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5("path", { d: "m11.75 3.25 3 3-8.5 8.5-3.75.75.75-3.75 8.5-8.5Z" }),
     /* @__PURE__ */ jsx5("path", { d: "m10 5 3 3" })
   ] }),
-  command: () => /* @__PURE__ */ jsx5(Fragment3, { children: /* @__PURE__ */ jsx5("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
-  test: () => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  command: () => /* @__PURE__ */ jsx5(Fragment4, { children: /* @__PURE__ */ jsx5("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
+  test: () => /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5("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__ */ jsx5("path", { d: "M5 2.5h8" })
   ] }),
-  web: () => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  web: () => /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "9", r: "6.5" }),
     /* @__PURE__ */ jsx5("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__ */ jsxs4(Fragment3, { children: [
+  agent: () => /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "6", r: "2.5" }),
     /* @__PURE__ */ jsx5("path", { d: "M4 15c.4-3 2-4.5 5-4.5s4.6 1.5 5 4.5" })
   ] }),
-  plan: () => /* @__PURE__ */ jsx5(Fragment3, { children: /* @__PURE__ */ jsx5("path", { d: "m3 5 1 1 2-2M3 9l1 1 2-2M3 13l1 1 2-2M8 5h7M8 9h7M8 13h7" }) }),
-  other: () => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  plan: () => /* @__PURE__ */ jsx5(Fragment4, { children: /* @__PURE__ */ jsx5("path", { d: "m3 5 1 1 2-2M3 9l1 1 2-2M3 13l1 1 2-2M8 5h7M8 9h7M8 13h7" }) }),
+  other: () => /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5("path", { d: "M9 2.5v3M9 12.5v3M2.5 9h3M12.5 9h3" }),
     /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "9", r: "3.5" })
   ] })
@@ -1395,9 +1485,9 @@ function ToolMetrics({ presentation }) {
 }
 function PendingElapsed({ now }) {
   const clock = now ?? Date.now;
-  const started = useRef3(clock());
-  const [elapsed, setElapsed] = useState2(0);
-  useEffect3(() => {
+  const started = useRef4(clock());
+  const [elapsed, setElapsed] = useState3(0);
+  useEffect4(() => {
     const timer = setInterval(() => setElapsed(Math.max(0, clock() - started.current)), 1e3);
     return () => clearInterval(timer);
   }, [clock]);
@@ -1438,7 +1528,7 @@ function SearchPreview({ presentation }) {
     ] }) : null,
     lines.length ? /* @__PURE__ */ jsx5("ol", { children: lines.map((line, index) => {
       const match = /^(.*?):(\d+)(?::(\d+))?:(.*)$/.exec(line);
-      return /* @__PURE__ */ jsx5("li", { children: match ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      return /* @__PURE__ */ jsx5("li", { children: match ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
         /* @__PURE__ */ jsx5("code", { children: match[1] }),
         /* @__PURE__ */ jsxs4("small", { children: [
           match[2],
@@ -1471,9 +1561,9 @@ function ToolPreview({ presentation, entry }) {
   return presentation.preview ? /* @__PURE__ */ jsx5("pre", { class: "scui-tool-output", "data-error": failed, children: stripAnsi(presentation.preview) }) : null;
 }
 function ToolActions({ presentation, adapter }) {
-  const [copied, setCopied] = useState2(false);
-  const reset = useRef3(null);
-  useEffect3(() => () => clearTimeout(reset.current), []);
+  const [copied, setCopied] = useState3(false);
+  const reset = useRef4(null);
+  useEffect4(() => () => 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 () => {
@@ -1520,7 +1610,7 @@ function TranscriptEntry({ entry, state, adapter }) {
   }
   if (entry.role === "notice" || entry.role === "system") return /* @__PURE__ */ jsx5("div", { class: "scui-notice", "data-code": entry.code, children: entry.text });
   return /* @__PURE__ */ jsxs4("article", { class: "scui-message", "data-role": entry.role, "aria-label": `${entry.role === "user" ? "Your" : "Assistant"} message`, children: [
-    /* @__PURE__ */ jsx5(MessageImages, { items: entry.images }),
+    /* @__PURE__ */ jsx5(MessageImages, { items: entry.images, adapter }),
     /* @__PURE__ */ jsx5(Markdown, { value: entry.text, copyText: adapter?.copyText }),
     /* @__PURE__ */ jsx5(ContextDisclosure, { context: entry.context }),
     entry.truncated ? /* @__PURE__ */ jsx5("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null,
@@ -1529,14 +1619,14 @@ function TranscriptEntry({ entry, state, adapter }) {
 }
 function ToolRow({ entry, workspace, open = false, adapter }) {
   const presentation = entry.presentation ?? createToolPresentation(entry);
-  const [expanded, setExpanded] = useState2(open || entry.status === "pending");
-  useEffect3(() => {
+  const [expanded, setExpanded] = useState3(open || entry.status === "pending");
+  useEffect4(() => {
     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__ */ jsxs4(Fragment3, { children: [
+  const summary = /* @__PURE__ */ jsxs4(Fragment4, { children: [
     /* @__PURE__ */ jsx5(ToolIcon, { category }),
     /* @__PURE__ */ jsx5("strong", { children: toolAction2(entry, category, presentation) }),
     target ? /* @__PURE__ */ jsx5("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
@@ -1564,9 +1654,9 @@ function ToolRow({ entry, workspace, open = false, adapter }) {
 function ActivityGroup({ entries, state, adapter }) {
   if (entries.length === 1) return /* @__PURE__ */ jsx5("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx5(ToolRow, { entry: entries[0], workspace: state.workspace, adapter }) });
   const active = entries.some((entry) => entry.status === "pending");
-  const [open, setOpen] = useState2(active);
+  const [open, setOpen] = useState3(active);
   const id = useId();
-  useEffect3(() => {
+  useEffect4(() => {
     if (active) setOpen(true);
   }, [active]);
   return /* @__PURE__ */ jsxs4("section", { class: "scui-activity", children: [
@@ -1642,9 +1732,9 @@ function SessionDetails({ semantics }) {
 }
 var conversationMemory = /* @__PURE__ */ new Map();
 function ConversationAnnouncements({ state }) {
-  const previousBusy = useRef3(state.busy);
-  const [announcement, setAnnouncement] = useState2("");
-  useEffect3(() => {
+  const previousBusy = useRef4(state.busy);
+  const [announcement, setAnnouncement] = useState3("");
+  useEffect4(() => {
     if (previousBusy.current && !state.busy && !state.error) {
       setAnnouncement(`${harnessDisplayName(state.harness) || "Coding agent"} finished working`);
     }
@@ -1653,13 +1743,13 @@ function ConversationAnnouncements({ state }) {
   return /* @__PURE__ */ jsx5("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 = useRef3(null);
+  const scroller = useRef4(null);
   const remembered = conversationMemory.get(memoryKey) ?? { top: null, atBottom: true };
-  const [atBottom, setAtBottom] = useState2(remembered.atBottom);
-  const earlierAnchor = useRef3(null);
-  const restored = useRef3(false);
+  const [atBottom, setAtBottom] = useState3(remembered.atBottom);
+  const earlierAnchor = useRef4(null);
+  const restored = useRef4(false);
   const blocks = groupConversation(state.transcript);
-  const unreadBoundary = useRef3(Number.isSafeInteger(unreadAfterMessages) && unreadAfterMessages >= 0 ? unreadAfterMessages : null);
+  const unreadBoundary = useRef4(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);
@@ -1718,12 +1808,12 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
       }, children: "Load earlier messages" }) : null,
       !blocks.length && state.startup !== "ready" ? /* @__PURE__ */ jsx5(LoadingStatus, { state }) : null,
       !blocks.length && state.startup === "ready" ? Empty ? /* @__PURE__ */ jsx5(Empty, { state, adapter, value: null }) : /* @__PURE__ */ jsx5("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__ */ jsxs4(Fragment2, { children: [
+      blocks.map((block, index) => /* @__PURE__ */ jsxs4(Fragment3, { children: [
         index === unreadBlock ? /* @__PURE__ */ jsx5("div", { class: "scui-unread-divider", role: "separator", "aria-label": "New messages", children: /* @__PURE__ */ jsx5("span", { children: "New" }) }) : null,
         block.kind === "activity" ? /* @__PURE__ */ jsx5(Group, { value: block.entries, entries: block.entries, state, adapter }) : /* @__PURE__ */ jsx5(Entry, { value: block.entry, entry: block.entry, state, adapter })
       ] }, block.id)),
       pendingMessage ? /* @__PURE__ */ jsxs4("article", { class: "scui-message scui-pending", "data-role": "user", "data-status": pendingMessage.status, "aria-label": "Your pending message", children: [
-        /* @__PURE__ */ jsx5(MessageImages, { items: pendingMessage.images }),
+        /* @__PURE__ */ jsx5(MessageImages, { items: pendingMessage.images, adapter }),
         /* @__PURE__ */ jsx5(Markdown, { value: pendingMessage.text, copyText: adapter?.copyText }),
         /* @__PURE__ */ jsx5(ContextDisclosure, { context: pendingMessage.context }),
         /* @__PURE__ */ jsxs4("footer", { children: [
@@ -1754,7 +1844,7 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
 }
 
 // src/logo.jsx
-import { useEffect as useEffect4 } from "preact/hooks";
+import { useEffect as useEffect5 } from "preact/hooks";
 import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
 var LOGOS = {
   "claude-code": {
@@ -1805,7 +1895,7 @@ function hasHarnessLogo(id) {
 }
 function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
   const logo = LOGOS[id];
-  useEffect4(() => {
+  useEffect5(() => {
     if (!logo) onMissingLogo?.(id);
   }, [id, logo, onMissingLogo]);
   if (!logo) return null;
@@ -1816,10 +1906,10 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
 }
 
 // src/messenger.jsx
-import { useEffect as useEffect6, useId as useId2, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "preact/hooks";
+import { useEffect as useEffect7, useId as useId2, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "preact/hooks";
 
 // src/sessions.jsx
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState3 } from "preact/hooks";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState4 } from "preact/hooks";
 import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
 var sessionListMemory = /* @__PURE__ */ new Map();
 function SessionRow({ row, state, onOpen }) {
@@ -1841,21 +1931,21 @@ function SessionRow({ row, state, onOpen }) {
 }
 function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
   const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
-  const [query, setQuery] = useState3(remembered.query);
-  const [loadingMore, setLoadingMore] = useState3(false);
-  const root = useRef4(null);
-  const rowScroller = useRef4(null);
+  const [query, setQuery] = useState4(remembered.query);
+  const [loadingMore, setLoadingMore] = useState4(false);
+  const root = useRef5(null);
+  const rowScroller = useRef5(null);
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
   useLayoutEffect3(() => {
     if (rowScroller.current) rowScroller.current.scrollTop = remembered.top;
   }, [memoryKey]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!focusKey || !root.current) return;
     const target = focusKey === "@new" ? root.current.querySelector('[data-list-focus="new"]') : [...root.current.querySelectorAll("[data-session-key]")].find((element) => element.dataset.sessionKey === focusKey);
     (target ?? root.current.querySelector("input,button"))?.focus({ preventScroll: true });
   }, [focusKey, rows.length]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (loadingMore) setLoadingMore(false);
   }, [state.error, state.history.hasMoreSessions, state.sessions.length]);
   const loadMore = () => {
@@ -1941,10 +2031,10 @@ function Receipt({ state, adapter }) {
   return null;
 }
 function ConversationActions({ state, adapter, actionPending }) {
-  const [open, setOpen] = useState4(false);
-  const root = useRef5(null);
-  const panel = useRef5(null);
-  const trigger = useRef5(null);
+  const [open, setOpen] = useState5(false);
+  const root = useRef6(null);
+  const panel = useRef6(null);
+  const trigger = useRef6(null);
   const menuId = useId2();
   const targets = state.harnesses.filter((item) => item.startable);
   const groups = [
@@ -1965,7 +2055,7 @@ function ConversationActions({ state, adapter, actionPending }) {
       items: state.canBranch ? targets.map((target) => ({ key: `branch:${target.id}`, label: target.id === state.harness ? `Fork in ${target.label}` : `Continue with ${target.label}`, intent: { action: "branch", targetHarness: target.id } })) : []
     }
   ].filter((group) => group.items.length);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     panel.current?.querySelector("button:not(:disabled)")?.focus({ preventScroll: true });
     const dismiss = (event) => {
@@ -2015,12 +2105,12 @@ function ConversationActions({ state, adapter, actionPending }) {
   ] });
 }
 function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNew, onClose }) {
-  const back = useRef5(null);
+  const back = useRef6(null);
   const harness = state.attached?.harness ?? state.harness;
   const title = state.attached ? sessionDisplayName(state.attached) : harnessDisplayName(harness) || "Agent chat";
   const status = state.needsInput ? "Needs input" : pendingStatus === "failed" ? "Send failed" : state.busy ? "Working" : pendingStatus === "sending" ? "Sending" : pendingStatus === "editing" ? "Editing message" : state.mode === "mirror" ? "Read-only" : "Ready";
   const menu = state.canDetach || state.canOpenTerminal || state.canBranch || state.canAttach || state.canExport || state.canReduce;
-  useEffect6(() => {
+  useEffect7(() => {
     if (state.mode === "mirror" && !state.canSend) back.current?.focus({ preventScroll: true });
   }, []);
   return /* @__PURE__ */ jsxs7("header", { class: "scui-head scui-chat-head", children: [
@@ -2042,24 +2132,24 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
 function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels }) {
   const Header = slots.header;
   const memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`;
-  const [pending, setPendingState] = useState4(() => pendingMessageMemory.get(memoryKey) ?? null);
-  const [pendingAction, setPendingAction] = useState4(null);
-  const [restoreDraft, setRestoreDraft] = useState4(null);
-  const restoreSequence = useRef5(0);
-  const actionSequence = useRef5(0);
-  const acknowledged = useRef5(/* @__PURE__ */ new Set());
+  const [pending, setPendingState] = useState5(() => pendingMessageMemory.get(memoryKey) ?? null);
+  const [pendingAction, setPendingAction] = useState5(null);
+  const [restoreDraft, setRestoreDraft] = useState5(null);
+  const restoreSequence = useRef6(0);
+  const actionSequence = useRef6(0);
+  const acknowledged = useRef6(/* @__PURE__ */ new Set());
   const setPending = (update) => setPendingState((current) => {
     const next = typeof update === "function" ? update(current) : update;
     if (next) boundedSet(pendingMessageMemory, memoryKey, next);
     else pendingMessageMemory.delete(memoryKey);
     return next;
   });
-  useEffect6(() => {
+  useEffect7(() => {
     setPendingState(pendingMessageMemory.get(memoryKey) ?? null);
     setPendingAction(null);
     setRestoreDraft(null);
   }, [memoryKey]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!pending) return;
     if (state.transcript.some((entry) => entry.role === "user" && entry.text.trim() === pending.text.trim() && !pending.baselineIds.includes(entry.id))) {
       setPending(null);
@@ -2088,7 +2178,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     setRestoreDraft({ id: restoreSequence.current, text: pending.text, context: pending.context, images: pending.images });
     setPending({ ...pending, status: "editing" });
   };
-  useEffect6(() => {
+  useEffect7(() => {
     const key = state.attached?.key;
     if (!key || !state.attention.some((item) => item.key === key)) {
       if (key) acknowledged.current.delete(key);
@@ -2123,7 +2213,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
       return result;
     }
   }), [adapter, state.error]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!pendingAction) return;
     if (state.operation && !pendingAction.seenOperation) {
       setPendingAction({ ...pendingAction, seenOperation: true });
@@ -2156,24 +2246,24 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const startable = state.harnesses.filter((item) => item.startable);
   const startableKey = startable.map((item) => item.id).join("\0");
   const remembered = newChatMemory.get(memoryKey) ?? { harness: startable[0]?.id ?? "", draft: "", context: [], images: [] };
-  const [harness, setHarness] = useState4(remembered.harness);
-  const [draft, setDraft] = useState4(remembered.draft);
-  const [context, setContext] = useState4(remembered.context);
-  const [images, setImages] = useState4(remembered.images ?? []);
-  const [starting, setStarting] = useState4(null);
-  const [picking, setPicking] = useState4(false);
-  const [dragging, setDragging] = useState4(false);
-  const [pickerError, setPickerError] = useState4(null);
-  const startSequence = useRef5(0);
-  const textarea = useRef5(null);
+  const [harness, setHarness] = useState5(remembered.harness);
+  const [draft, setDraft] = useState5(remembered.draft);
+  const [context, setContext] = useState5(remembered.context);
+  const [images, setImages] = useState5(remembered.images ?? []);
+  const [starting, setStarting] = useState5(null);
+  const [picking, setPicking] = useState5(false);
+  const [dragging, setDragging] = useState5(false);
+  const [pickerError, setPickerError] = useState5(null);
+  const startSequence = useRef6(0);
+  const textarea = useRef6(null);
   useAutosizeTextarea(textarea, draft);
-  useEffect6(() => {
+  useEffect7(() => {
     if (startable.some((item) => item.id === harness)) return;
     const next = startable[0]?.id ?? "";
     setHarness(next);
     boundedSet(newChatMemory, memoryKey, { harness: next, draft, context, images });
   }, [harness, startableKey]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!starting) return;
     const sessionChanged = (state.attached?.key ?? null) !== starting.attachedKey;
     const beganWorking = !starting.busy && state.busy;
@@ -2181,10 +2271,10 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
     newChatMemory.delete(memoryKey);
     onStarted();
   }, [memoryKey, onStarted, starting, state.attached?.key, state.busy]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (starting && state.error !== starting.initialError && !state.busy && !state.operation) setStarting(null);
   }, [starting, state.busy, state.error, state.operation]);
-  useEffect6(() => {
+  useEffect7(() => {
     textarea.current?.focus({ preventScroll: true });
   }, []);
   const pickContext = () => {
@@ -2318,14 +2408,14 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
   const state = useMemo2(() => normalizeUiState(stateInput), [stateInput]);
   const copy = { ...DEFAULT_LABELS, ...labels };
   const memoryKey = state.workspace || "@default";
-  const [view, setViewState] = useState4(initialView ?? (state.attention.length ? "list" : messengerViewMemory.get(memoryKey) ?? (state.attached || state.transcript.length ? "chat" : "list")));
-  const [opening, setOpening] = useState4(null);
-  const [listFocus, setListFocus] = useState4(null);
+  const [view, setViewState] = useState5(initialView ?? (state.attention.length ? "list" : messengerViewMemory.get(memoryKey) ?? (state.attached || state.transcript.length ? "chat" : "list")));
+  const [opening, setOpening] = useState5(null);
+  const [listFocus, setListFocus] = useState5(null);
   const setView = (next) => {
     boundedSet(messengerViewMemory, memoryKey, next);
     setViewState(next);
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (!opening) return;
     if (state.attached?.key === opening.key) {
       setOpening(null);
@@ -2374,7 +2464,9 @@ export {
   ContinuationBar,
   Conversation,
   HarnessLogo,
+  ImageViewer,
   LoadingStatus,
+  MessageImages,
   RequestCard,
   SessionDetails,
   SessionList,