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

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,7 +129,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;
@@ -268,17 +269,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 [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) => {
@@ -288,7 +290,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);
@@ -298,13 +300,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);
@@ -315,7 +317,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]);
@@ -339,13 +341,17 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       });
     }).catch((error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
   };
-  const pasteImages = (event) => {
-    const files = Array.from(event.clipboardData?.files ?? []).filter((file) => file.type.startsWith("image/"));
-    if (!files.length) return;
-    event.preventDefault();
+  const addImageFiles = (value, source) => {
+    const allFiles = Array.from(value ?? []);
+    if (!allFiles.length) return false;
+    const files = allFiles.filter((file) => file.type.startsWith("image/"));
+    if (files.length !== allFiles.length) {
+      setPickerError("Drop or paste PNG, JPEG, GIF, or WebP images.");
+      return true;
+    }
     if (images.length + files.length > MAX_IMAGE_ITEMS) {
       setPickerError(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
-      return;
+      return true;
     }
     setPicking(true);
     setPickerError(null);
@@ -353,11 +359,19 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       const next = mergeImages(current, picked);
       remember(draft, context, next, queue);
       return next;
-    }), (error) => setPickerError(error instanceof Error ? error.message : "Could not paste image.")).finally(() => setPicking(false));
+    }), (error) => setPickerError(error instanceof Error ? error.message : `Could not ${source} image.`)).finally(() => setPicking(false));
+    return true;
+  };
+  const pasteImages = (event) => {
+    if (addImageFiles(event.clipboardData?.files, "paste")) event.preventDefault();
+  };
+  const dropImages = (event) => {
+    setDragging(false);
+    if (addImageFiles(event.dataTransfer?.files, "drop")) event.preventDefault();
   };
   const send = () => {
     const text = draft.trim();
-    if (!text) return;
+    if (!text && !images.length) return;
     const message = { text, context, images };
     if (queuesNewMessage) updateQueue((items) => [...items, message]);
     else if (state.canSend) {
@@ -378,7 +392,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       ] }),
       queue.map((item, index) => /* @__PURE__ */ jsxs3("span", { children: [
         /* @__PURE__ */ jsxs3("span", { children: [
-          item.text,
+          item.text || "Image attachment",
           item.context.length + item.images.length ? /* @__PURE__ */ jsxs3("small", { children: [
             item.context.length + item.images.length,
             " attached"
@@ -398,7 +412,16 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       return next;
     }) }),
     pickerError ? /* @__PURE__ */ jsx3("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
-    /* @__PURE__ */ jsxs3("div", { class: "scui-envelope", children: [
+    /* @__PURE__ */ jsxs3("div", { class: `scui-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
+      if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) {
+        event.preventDefault();
+        setDragging(true);
+      }
+    }, onDragOver: (event) => {
+      if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) event.preventDefault();
+    }, onDragLeave: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+    }, onDrop: dropImages, children: [
       adapter.pickContext && state.mode === "control" ? /* @__PURE__ */ jsx3("button", { class: "scui-attach", type: "button", "aria-label": "Attach files or images", disabled: picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS, onClick: pickContext, children: picking ? /* @__PURE__ */ jsx3("i", { class: "scui-control-spinner" }) : /* @__PURE__ */ jsx3(UiIcon, { name: "attach", size: 17 }) }) : null,
       /* @__PURE__ */ jsx3("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : pendingStatus === "failed" ? "Retry or edit the unsent message\u2026" : pendingStatus === "editing" ? "Edit and resend\u2026" : queueBlocked ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onPaste: pasteImages, onInput: (event) => {
         const value = event.currentTarget.value;
@@ -412,7 +435,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       } }),
       /* @__PURE__ */ jsxs3("span", { children: [
         state.busy ? /* @__PURE__ */ jsx3("button", { class: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: /* @__PURE__ */ jsx3(UiIcon, { name: "stop", size: 15 }) }) : null,
-        /* @__PURE__ */ jsx3("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() || !queuesNewMessage && !state.canSend, onClick: send, children: /* @__PURE__ */ jsx3(UiIcon, { name: queuesNewMessage ? "plus" : "send", size: 17 }) })
+        /* @__PURE__ */ jsx3("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() && !images.length || !queuesNewMessage && !state.canSend, onClick: send, children: /* @__PURE__ */ jsx3(UiIcon, { name: queuesNewMessage ? "plus" : "send", size: 17 }) })
       ] })
     ] })
   ] });

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,108 @@ 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 }) {
+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 [copyState, setCopyState2] = useState("idle");
+  const item = items[index];
+  const remote = item?.url?.startsWith("http://") || item?.url?.startsWith("https://");
+  useEffect2(() => {
+    if (!dialog.current?.open) dialog.current?.showModal();
+    return () => clearTimeout(reset.current);
+  }, []);
+  useEffect2(() => {
+    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__ */ 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,
+            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 }) }),
+            /* @__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 }),
+          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);
+  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}`) : /* @__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 +772,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 +795,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 +887,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 +930,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 +963,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 +1012,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 +1021,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 +1056,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 +1134,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 +1145,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 +1210,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 +1247,9 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
 export {
   ActivityGroup,
   Conversation,
+  ImageViewer,
   LoadingStatus,
+  MessageImages,
   RequestCard,
   SessionDetails,
   TaskPlan,