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

package/messenger.mjs

@@ -501,6 +501,16 @@ function readTranscript(value) {
         }] : [];
       });
     }
+    if (Array.isArray(item.images)) {
+      entry.images = item.images.flatMap((raw) => {
+        const image = record(raw);
+        return image && typeof image.label === "string" ? [{
+          ...typeof image.id === "string" ? { id: image.id } : {},
+          label: image.label,
+          ...typeof image.url === "string" ? { url: image.url } : {}
+        }] : [];
+      }).slice(0, 4);
+    }
     const request = record(item.request);
     if (request && typeof request.requestKind === "string" && typeof request.payloadText === "string") {
       entry.request = {
@@ -777,6 +787,11 @@ var ICONS = {
     /* @__PURE__ */ jsx("path", { d: "M9 3.5v10" }),
     /* @__PURE__ */ jsx("path", { d: "m4.75 9.5 4.25 4 4.25-4" })
   ] }),
+  image: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3.5", width: "12", height: "11", rx: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.5", cy: "7", r: "1.25" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.5 13 3.25-3 2.1 1.85 1.65-1.5L14 13" })
+  ] }),
   menu: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("circle", { cx: "4", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
     /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
@@ -805,6 +820,9 @@ function UiIcon({ name, size = 16, class: className = "" }) {
 // src/context.jsx
 import { 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 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) => {
     if (!item || typeof item.label !== "string" || typeof item.detail !== "string") return [];
@@ -831,6 +849,58 @@ function mergeContext(current, picked) {
   }
   return next;
 }
+function normalizeImages(value) {
+  const seen = /* @__PURE__ */ new Set();
+  return (Array.isArray(value) ? value : value ? [value] : []).flatMap((item) => {
+    if (!item || typeof item.label !== "string" || typeof item.url !== "string") return [];
+    const label = item.label.trim().slice(0, 200);
+    const url = item.url;
+    if (!label || seen.has(url) || !(url.startsWith("data:image/") || url.startsWith("https://") || url.startsWith("http://"))) return [];
+    seen.add(url);
+    return [{
+      ...typeof item.id === "string" && item.id ? { id: item.id.slice(0, 2e3) } : {},
+      label,
+      url
+    }];
+  }).slice(0, MAX_IMAGE_ITEMS);
+}
+function mergeImages(current, picked) {
+  const next = [...current];
+  const seen = new Set(current.map((item) => item.url));
+  for (const item of normalizeImages(picked)) {
+    if (seen.has(item.url)) continue;
+    seen.add(item.url);
+    next.push(item);
+    if (next.length === MAX_IMAGE_ITEMS) break;
+  }
+  return next;
+}
+function partitionAttachments(value) {
+  const values = Array.isArray(value) ? value : value ? [value] : [];
+  const context = [];
+  const images = [];
+  for (const item of values) {
+    if (item && typeof item.label === "string" && item.label.trim() && typeof item.detail === "string" && item.detail) context.push(item);
+    else if (item && typeof item.label === "string" && item.label.trim() && typeof item.url === "string" && (item.url.startsWith("data:image/") || item.url.startsWith("https://") || item.url.startsWith("http://"))) images.push(item);
+    else throw new Error("The attachment picker returned an invalid item.");
+  }
+  return { context, images };
+}
+async function imageAttachmentsFromFiles(value) {
+  const files = Array.from(value ?? []).filter((file) => file?.type?.startsWith("image/"));
+  if (files.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images at a time.`);
+  return Promise.all(files.map(async (file) => {
+    if (!IMAGE_TYPES.has(file.type)) throw new Error(`${file.name || "That image"} is not PNG, JPEG, GIF, or WebP.`);
+    if (file.size > MAX_IMAGE_BYTES) throw new Error(`${file.name || "That image"} is larger than 5 MB.`);
+    const url = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error ?? new Error(`Could not read ${file.name || "image"}.`));
+      reader.readAsDataURL(file);
+    });
+    return { id: `${file.name}:${file.size}:${file.lastModified}`, label: file.name || "Pasted image", url };
+  }));
+}
 function ContextTray({ items, onRemove }) {
   if (!items.length) return null;
   return /* @__PURE__ */ jsx2("div", { class: "scui-compose-context", "aria-label": "Attached context", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
@@ -839,6 +909,21 @@ function ContextTray({ items, onRemove }) {
     /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove context ${item.label}`, onClick: () => onRemove(index), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 12 }) })
   ] }, item.id ?? `${item.label}:${index}`)) });
 }
+function ImageTray({ items, onRemove }) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx2("div", { class: "scui-compose-images", "aria-label": "Attached images", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
+    /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }),
+    /* @__PURE__ */ jsx2("strong", { children: item.label }),
+    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 }) {
+  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}`)) });
+}
 
 // src/textarea.js
 import { useLayoutEffect } from "preact/hooks";
@@ -878,19 +963,23 @@ 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: [], queue: [] };
+  const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, context: [], images: [], queue: [] };
   const [draft, setDraft] = useState(remembered.draft);
-  const [context, setContext] = useState(remembered.context);
-  const [queue, setQueue] = useState(remembered.queue);
+  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);
   useAutosizeTextarea(textarea, draft);
-  const remember = (nextDraft, nextContext, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, context: nextContext, queue: nextQueue });
+  const remember = (nextDraft, nextContext, nextImages, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, context: nextContext, images: nextImages, queue: nextQueue });
+  useEffect(() => {
+    remember(draft, context, images, queue);
+  }, [draft, context, images, memoryKey, queue]);
   const updateQueue = (update) => setQueue((items) => {
     const next = update(items);
-    remember(draft, context, next);
+    remember(draft, context, images, next);
     return next;
   });
   const queueBlocked = state.busy || pendingStatus !== null || dispatching;
@@ -900,9 +989,9 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       const [next, ...rest] = queue;
       setDispatching(true);
       setQueue(rest);
-      remember(draft, context, rest);
-      onPending?.(next.text, next.context);
-      adapter.onIntent({ action: "send", text: next.text, ...next.context.length ? { context: next.context } : {} });
+      remember(draft, context, images, rest);
+      onPending?.(next.text, next.context, next.images);
+      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(() => {
@@ -915,8 +1004,10 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     if (!restoreDraft) return;
     setDraft(restoreDraft.text);
     const restoredContext = normalizeContext(restoreDraft.context);
+    const restoredImages = normalizeImages(restoreDraft.images);
     setContext(restoredContext);
-    remember(restoreDraft.text, restoredContext, queue);
+    setImages(restoredImages);
+    remember(restoreDraft.text, restoredContext, restoredImages, queue);
     textarea.current?.focus({ preventScroll: true });
     onDraftRestored?.(restoreDraft.id);
   }, [onDraftRestored, restoreDraft?.id]);
@@ -925,30 +1016,55 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     return () => clearTimeout(timer);
   }, [adapter, draft]);
   const pickContext = () => {
-    if (!adapter.pickContext || state.mode !== "control" || picking || context.length >= MAX_CONTEXT_ITEMS) return;
+    if (!adapter.pickContext || state.mode !== "control" || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS) return;
     setPicking(true);
     setPickerError(null);
     Promise.resolve().then(() => adapter.pickContext()).then((picked) => {
+      const attachments = partitionAttachments(picked);
+      if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+      if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
       setContext((current) => {
-        const next = mergeContext(current, picked);
-        remember(draft, next, queue);
+        const next = mergeContext(current, attachments.context);
+        remember(draft, next, images, queue);
         return next;
       });
-    }, (error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
+      setImages((current) => {
+        const next = mergeImages(current, attachments.images);
+        remember(draft, context, next, queue);
+        return next;
+      });
+    }).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();
+    if (images.length + files.length > MAX_IMAGE_ITEMS) {
+      setPickerError(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      return;
+    }
+    setPicking(true);
+    setPickerError(null);
+    imageAttachmentsFromFiles(files).then((picked) => setImages((current) => {
+      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));
   };
   const send = () => {
     const text = draft.trim();
     if (!text) return;
-    const message = { text, context };
+    const message = { text, context, images };
     if (queuesNewMessage) updateQueue((items) => [...items, message]);
     else if (state.canSend) {
       if (onPending) setDispatching(true);
-      onPending?.(text, context);
-      adapter.onIntent({ action: "send", text, ...context.length ? { context } : {} });
+      onPending?.(text, context, images);
+      adapter.onIntent({ action: "send", text, ...context.length ? { context } : {}, ...images.length ? { images } : {} });
     } else return;
     setDraft("");
     setContext([]);
-    remember("", [], queuesNewMessage ? [...queue, message] : queue);
+    setImages([]);
+    remember("", [], [], queuesNewMessage ? [...queue, message] : queue);
   };
   return /* @__PURE__ */ jsxs3("div", { class: "scui-compose", children: [
     queue.length ? /* @__PURE__ */ jsxs3("div", { class: "scui-queue", children: [
@@ -959,26 +1075,31 @@ 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.context.length ? /* @__PURE__ */ jsxs3("small", { children: [
-            item.context.length,
+          item.context.length + item.images.length ? /* @__PURE__ */ jsxs3("small", { children: [
+            item.context.length + item.images.length,
             " attached"
           ] }) : null
         ] }),
         /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx3(UiIcon, { name: "close", size: 13 }) })
       ] }, `${index}:${item.text}`))
     ] }) : null,
+    /* @__PURE__ */ jsx3(ImageTray, { items: images, onRemove: (index) => setImages((items) => {
+      const next = items.filter((_, itemIndex) => itemIndex !== index);
+      remember(draft, context, next, queue);
+      return next;
+    }) }),
     /* @__PURE__ */ jsx3(ContextTray, { items: context, onRemove: (index) => setContext((items) => {
       const next = items.filter((_, itemIndex) => itemIndex !== index);
-      remember(draft, next, queue);
+      remember(draft, next, images, queue);
       return next;
     }) }),
     pickerError ? /* @__PURE__ */ jsx3("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
     /* @__PURE__ */ jsxs3("div", { class: "scui-envelope", children: [
-      adapter.pickContext && state.mode === "control" ? /* @__PURE__ */ jsx3("button", { class: "scui-attach", type: "button", "aria-label": "Attach context", disabled: picking || context.length >= MAX_CONTEXT_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, onInput: (event) => {
+      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;
         setDraft(value);
-        remember(value, context, queue);
+        remember(value, context, images, queue);
       }, onKeyDown: (event) => {
         if (isSendKey(event)) {
           event.preventDefault();
@@ -1380,6 +1501,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(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,
@@ -1582,6 +1704,7 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
         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(Markdown, { value: pendingMessage.text, copyText: adapter?.copyText }),
         /* @__PURE__ */ jsx5(ContextDisclosure, { context: pendingMessage.context }),
         /* @__PURE__ */ jsxs4("footer", { children: [
@@ -1920,9 +2043,10 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     if (pending.status === "sending" && state.busy && !pending.seenBusy) setPending({ ...pending, seenBusy: true });
     else if (pending.status === "sending" && state.error && !state.busy && !state.operation && (pending.seenBusy || state.error !== pending.initialError)) setPending({ ...pending, status: "failed" });
   }, [pending, state.busy, state.error, state.operation, state.transcript]);
-  const beginPending = (text, context = []) => setPending({
+  const beginPending = (text, context = [], images = []) => setPending({
     text,
     context,
+    images,
     status: "sending",
     initialError: state.error,
     seenBusy: state.busy,
@@ -1930,13 +2054,13 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
   });
   const retryPending = () => {
     if (!pending) return;
-    adapter.onIntent({ action: "send", text: pending.text, ...pending.context?.length ? { context: pending.context } : {} });
+    adapter.onIntent({ action: "send", text: pending.text, ...pending.context?.length ? { context: pending.context } : {}, ...pending.images?.length ? { images: pending.images } : {} });
     setPending({ ...pending, status: "sending", initialError: state.error, seenBusy: state.busy });
   };
   const editPending = () => {
     if (!pending) return;
     restoreSequence.current += 1;
-    setRestoreDraft({ id: restoreSequence.current, text: pending.text, context: pending.context });
+    setRestoreDraft({ id: restoreSequence.current, text: pending.text, context: pending.context, images: pending.images });
     setPending({ ...pending, status: "editing" });
   };
   useEffect6(() => {
@@ -1982,7 +2106,7 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
       setPendingAction(null);
     }
   }, [pendingAction, state.error, state.operation]);
-  const pendingMessage = pending && pending.status !== "editing" ? { text: pending.text, context: pending.context, status: pending.status, onRetry: retryPending, onEdit: editPending } : null;
+  const pendingMessage = pending && pending.status !== "editing" ? { text: pending.text, context: pending.context, images: pending.images, status: pending.status, onRetry: retryPending, onEdit: editPending } : null;
   const action = state.operation || pendingAction?.action || null;
   const actionLabel = operationLabel(action);
   const actionState = action ? { ...state, operation: action, canInterrupt: false, canRespond: false } : state;
@@ -2006,10 +2130,11 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
 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: [] };
+  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 [pickerError, setPickerError] = useState4(null);
@@ -2020,7 +2145,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
     if (startable.some((item) => item.id === harness)) return;
     const next = startable[0]?.id ?? "";
     setHarness(next);
-    boundedSet(newChatMemory, memoryKey, { harness: next, draft, context });
+    boundedSet(newChatMemory, memoryKey, { harness: next, draft, context, images });
   }, [harness, startableKey]);
   useEffect6(() => {
     if (!starting) return;
@@ -2037,16 +2162,40 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
     textarea.current?.focus({ preventScroll: true });
   }, []);
   const pickContext = () => {
-    if (!adapter.pickContext || picking || context.length >= MAX_CONTEXT_ITEMS) return;
+    if (!adapter.pickContext || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS) return;
     setPicking(true);
     setPickerError(null);
     Promise.resolve().then(() => adapter.pickContext()).then((picked) => {
+      const attachments = partitionAttachments(picked);
+      if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+      if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
       setContext((current) => {
-        const next = mergeContext(current, picked);
-        boundedSet(newChatMemory, memoryKey, { harness, draft, context: next });
+        const next = mergeContext(current, attachments.context);
+        boundedSet(newChatMemory, memoryKey, { harness, draft, context: next, images });
         return next;
       });
-    }, (error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
+      setImages((current) => {
+        const next = mergeImages(current, attachments.images);
+        boundedSet(newChatMemory, memoryKey, { harness, draft, context, images: next });
+        return next;
+      });
+    }).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();
+    if (images.length + files.length > MAX_IMAGE_ITEMS) {
+      setPickerError(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+      return;
+    }
+    setPicking(true);
+    setPickerError(null);
+    imageAttachmentsFromFiles(files).then((picked) => setImages((current) => {
+      const next = mergeImages(current, picked);
+      boundedSet(newChatMemory, memoryKey, { harness, draft, context, images: next });
+      return next;
+    }), (error) => setPickerError(error instanceof Error ? error.message : "Could not paste image.")).finally(() => setPicking(false));
   };
   const send = () => {
     const text = draft.trim();
@@ -2054,7 +2203,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
     const id = startSequence.current + 1;
     startSequence.current = id;
     setStarting({ id, attachedKey: state.attached?.key ?? null, busy: state.busy, initialError: state.error });
-    const result = adapter.onIntent({ action: "new", harness, text, ...context.length ? { context } : {} });
+    const result = adapter.onIntent({ action: "new", harness, text, ...context.length ? { context } : {}, ...images.length ? { images } : {} });
     if (result && typeof result.then === "function") {
       Promise.resolve(result).catch(() => setStarting((current) => current?.id === id ? null : current));
     }
@@ -2084,24 +2233,29 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         /* @__PURE__ */ jsx8("select", { value: harness, disabled: Boolean(starting), onChange: (event) => {
           const value = event.currentTarget.value;
           setHarness(value);
-          boundedSet(newChatMemory, memoryKey, { harness: value, draft, context });
+          boundedSet(newChatMemory, memoryKey, { harness: value, draft, context, images });
         }, children: state.harnesses.map((item) => /* @__PURE__ */ jsxs7("option", { value: item.id, disabled: !item.startable, children: [
           item.label,
           item.startable ? "" : " \xB7 unavailable"
         ] }, item.id)) })
       ] }),
+      /* @__PURE__ */ jsx8(ImageTray, { items: images, onRemove: (index) => setImages((items) => {
+        const next = items.filter((_, itemIndex) => itemIndex !== index);
+        boundedSet(newChatMemory, memoryKey, { harness, draft, context, images: next });
+        return next;
+      }) }),
       /* @__PURE__ */ jsx8(ContextTray, { items: context, onRemove: (index) => setContext((items) => {
         const next = items.filter((_, itemIndex) => itemIndex !== index);
-        boundedSet(newChatMemory, memoryKey, { harness, draft, context: next });
+        boundedSet(newChatMemory, memoryKey, { harness, draft, context: next, images });
         return next;
       }) }),
       pickerError ? /* @__PURE__ */ jsx8("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
       /* @__PURE__ */ jsxs7("div", { class: "scui-envelope", children: [
-        adapter.pickContext ? /* @__PURE__ */ jsx8("button", { class: "scui-attach", type: "button", "aria-label": "Attach context", disabled: picking || context.length >= MAX_CONTEXT_ITEMS || Boolean(starting), onClick: pickContext, children: picking ? /* @__PURE__ */ jsx8("i", { class: "scui-control-spinner" }) : /* @__PURE__ */ jsx8(UiIcon, { name: "attach", size: 17 }) }) : null,
-        /* @__PURE__ */ jsx8("textarea", { ref: textarea, rows: 3, "aria-label": "Message coding agent", placeholder: startable.length ? "What should the agent do?" : "No coding harness is available", value: draft, disabled: !startable.length || Boolean(starting), onInput: (event) => {
+        adapter.pickContext ? /* @__PURE__ */ jsx8("button", { class: "scui-attach", type: "button", "aria-label": "Attach files or images", disabled: picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS || Boolean(starting), onClick: pickContext, children: picking ? /* @__PURE__ */ jsx8("i", { class: "scui-control-spinner" }) : /* @__PURE__ */ jsx8(UiIcon, { name: "attach", size: 17 }) }) : null,
+        /* @__PURE__ */ jsx8("textarea", { ref: textarea, rows: 3, "aria-label": "Message coding agent", placeholder: startable.length ? "What should the agent do?" : "No coding harness is available", value: draft, disabled: !startable.length || Boolean(starting), onPaste: pasteImages, onInput: (event) => {
           const value = event.currentTarget.value;
           setDraft(value);
-          boundedSet(newChatMemory, memoryKey, { harness, draft: value, context });
+          boundedSet(newChatMemory, memoryKey, { harness, draft: value, context, images });
         }, onKeyDown: (event) => {
           if (isSendKey(event)) {
             event.preventDefault();

package/package.json

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

package/sessions.mjs

@@ -162,6 +162,11 @@ var ICONS = {
     /* @__PURE__ */ jsx2("path", { d: "M9 3.5v10" }),
     /* @__PURE__ */ jsx2("path", { d: "m4.75 9.5 4.25 4 4.25-4" })
   ] }),
+  image: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3.5", width: "12", height: "11", rx: "1.75" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "6.5", cy: "7", r: "1.25" }),
+    /* @__PURE__ */ jsx2("path", { d: "m4.5 13 3.25-3 2.1 1.85 1.65-1.5L14 13" })
+  ] }),
   menu: () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2("circle", { cx: "4", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
     /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
@@ -187,8 +192,12 @@ function UiIcon({ name, size = 16, class: className = "" }) {
   return /* @__PURE__ */ jsx2("svg", { class: `scui-icon ${className}`, style: { "--scui-icon-size": `${size}px` }, viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Glyph, {}) });
 }
 
+// src/context.jsx
+import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+
 // src/conversation.jsx
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+import { Fragment as Fragment3, 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],
@@ -196,19 +205,19 @@ function LoadingStatus({ state, compact = false }) {
     discovering: ["Loading recent sessions", "Scanning native session stores without loading full transcripts.", 2],
     ready: ["Ready", "Coding sessions are up to date.", 3]
   }[state.startup];
-  return /* @__PURE__ */ jsxs2("div", { class: `scui-loading${compact ? " scui-loading-compact" : ""}`, role: "status", "aria-busy": state.startup !== "ready", children: [
-    /* @__PURE__ */ jsx3("span", { class: "scui-orbit", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("i", {}) }),
-    /* @__PURE__ */ jsxs2("span", { class: "scui-loading-copy", children: [
-      /* @__PURE__ */ jsx3("strong", { children: copy[0] }),
-      /* @__PURE__ */ jsx3("small", { children: copy[1] })
+  return /* @__PURE__ */ jsxs3("div", { class: `scui-loading${compact ? " scui-loading-compact" : ""}`, role: "status", "aria-busy": state.startup !== "ready", children: [
+    /* @__PURE__ */ jsx4("span", { class: "scui-orbit", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("i", {}) }),
+    /* @__PURE__ */ jsxs3("span", { class: "scui-loading-copy", children: [
+      /* @__PURE__ */ jsx4("strong", { children: copy[0] }),
+      /* @__PURE__ */ jsx4("small", { children: copy[1] })
     ] }),
-    /* @__PURE__ */ jsx3("span", { class: "scui-progress", "aria-hidden": "true", children: [1, 2, 3].map((step) => /* @__PURE__ */ jsx3("i", { "data-progress": step <= copy[2] ? "done" : step === copy[2] + 1 ? "current" : "waiting" }, step)) })
+    /* @__PURE__ */ jsx4("span", { class: "scui-progress", "aria-hidden": "true", children: [1, 2, 3].map((step) => /* @__PURE__ */ jsx4("i", { "data-progress": step <= copy[2] ? "done" : step === copy[2] + 1 ? "current" : "waiting" }, step)) })
   ] });
 }
 
 // src/logo.jsx
 import { useEffect as useEffect3 } from "preact/hooks";
-import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
 var LOGOS = {
   "claude-code": {
     viewBox: "-1 3.5 26 18",
@@ -259,29 +268,29 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
     if (!logo) onMissingLogo?.(id);
   }, [id, logo, onMissingLogo]);
   if (!logo) return null;
-  return /* @__PURE__ */ jsxs3("span", { class: "scui-logo", "data-harness": id, "data-activity": activity, style: `--scui-logo-size:${size}px`, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx4("svg", { viewBox: logo.viewBox, preserveAspectRatio: "xMidYMid meet", focusable: "false", children: logo.paths.map(([Tag, props], index) => /* @__PURE__ */ jsx4(Tag, { ...props }, index)) }),
-    activity && activity !== "idle" ? /* @__PURE__ */ jsx4("i", {}) : null
+  return /* @__PURE__ */ jsxs4("span", { class: "scui-logo", "data-harness": id, "data-activity": activity, style: `--scui-logo-size:${size}px`, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx5("svg", { viewBox: logo.viewBox, preserveAspectRatio: "xMidYMid meet", focusable: "false", children: logo.paths.map(([Tag, props], index) => /* @__PURE__ */ jsx5(Tag, { ...props }, index)) }),
+    activity && activity !== "idle" ? /* @__PURE__ */ jsx5("i", {}) : null
   ] });
 }
 
 // src/sessions.jsx
-import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
 var sessionListMemory = /* @__PURE__ */ new Map();
 function SessionRow({ row, state, onOpen }) {
   const activity = sessionActivity(state, row);
   const attentionPreview = state.attention.find((item) => item.key === row.key)?.preview;
   const title = sessionDisplayName(row);
   const detail = attentionPreview || row.preview || (row.name && row.name !== title ? row.name : row.cwd);
-  return /* @__PURE__ */ jsxs4("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${detail ? ` \xB7 ${detail}` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
-    /* @__PURE__ */ jsx5(HarnessLogo, { id: row.harness, activity, size: 34 }),
-    /* @__PURE__ */ jsxs4("span", { class: "scui-session-copy", children: [
-      /* @__PURE__ */ jsxs4("span", { children: [
-        /* @__PURE__ */ jsx5("strong", { children: title }),
-        /* @__PURE__ */ jsx5("small", { children: row.age })
+  return /* @__PURE__ */ jsxs5("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${detail ? ` \xB7 ${detail}` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
+    /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity, size: 34 }),
+    /* @__PURE__ */ jsxs5("span", { class: "scui-session-copy", children: [
+      /* @__PURE__ */ jsxs5("span", { children: [
+        /* @__PURE__ */ jsx6("strong", { children: title }),
+        /* @__PURE__ */ jsx6("small", { children: row.age })
       ] }),
-      detail ? /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5("small", { title: row.cwd, children: detail }) }) : null,
-      state.attachError?.key === row.key ? /* @__PURE__ */ jsx5("em", { children: state.attachError.message }) : null
+      detail ? /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6("small", { title: row.cwd, children: detail }) }) : null,
+      state.attachError?.key === row.key ? /* @__PURE__ */ jsx6("em", { children: state.attachError.message }) : null
     ] })
   ] });
 }
@@ -312,33 +321,33 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
       Promise.resolve(result).then(() => setLoadingMore(false), () => setLoadingMore(false));
     }
   };
-  return /* @__PURE__ */ jsxs4("section", { class: "scui-list", ref: root, children: [
-    /* @__PURE__ */ jsxs4("header", { class: "scui-head", children: [
-      /* @__PURE__ */ jsxs4("span", { class: "scui-head-copy", children: [
-        /* @__PURE__ */ jsx5("strong", { children: labels.chats }),
-        /* @__PURE__ */ jsxs4("small", { children: [
+  return /* @__PURE__ */ jsxs5("section", { class: "scui-list", ref: root, children: [
+    /* @__PURE__ */ jsxs5("header", { class: "scui-head", children: [
+      /* @__PURE__ */ jsxs5("span", { class: "scui-head-copy", children: [
+        /* @__PURE__ */ jsx6("strong", { children: labels.chats }),
+        /* @__PURE__ */ jsxs5("small", { children: [
           state.sessions.length,
           " recent conversations"
         ] })
       ] }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: /* @__PURE__ */ jsx5(UiIcon, { name: "plus", size: 18 }) }),
-      onClose ? /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx5(UiIcon, { name: "close", size: 18 }) }) : null
+      /* @__PURE__ */ jsx6("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: /* @__PURE__ */ jsx6(UiIcon, { name: "plus", size: 18 }) }),
+      onClose ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx6(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
-    state.startup !== "ready" ? /* @__PURE__ */ jsx5(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs4("label", { class: "scui-search", children: [
-      /* @__PURE__ */ jsx5(UiIcon, { name: "search", size: 15 }),
-      /* @__PURE__ */ jsx5("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+    state.startup !== "ready" ? /* @__PURE__ */ jsx6(LoadingStatus, { state, compact: rows.length > 0 }) : null,
+    state.sessions.length > 4 ? /* @__PURE__ */ jsxs5("label", { class: "scui-search", children: [
+      /* @__PURE__ */ jsx6(UiIcon, { name: "search", size: 15 }),
+      /* @__PURE__ */ jsx6("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
         const value = event.currentTarget.value;
         setQuery(value);
         boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
         if (rowScroller.current) rowScroller.current.scrollTop = 0;
       } }),
-      /* @__PURE__ */ jsx5("small", { children: rows.length })
+      /* @__PURE__ */ jsx6("small", { children: rows.length })
     ] }) : null,
-    /* @__PURE__ */ jsxs4("div", { class: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
-      !rows.length && state.startup === "ready" ? /* @__PURE__ */ jsx5("div", { class: "scui-empty", children: query ? "No chats match your search." : state.error ?? "No coding chats found." }) : null,
-      rows.map((row) => /* @__PURE__ */ jsx5(Row, { value: row, row, state, adapter, onOpen }, row.key)),
-      state.history.hasMoreSessions ? /* @__PURE__ */ jsx5("button", { class: "scui-load", type: "button", disabled: loadingMore, onClick: loadMore, children: loadingMore ? "Loading older chats\u2026" : "Load older chats" }) : null
+    /* @__PURE__ */ jsxs5("div", { class: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
+      !rows.length && state.startup === "ready" ? /* @__PURE__ */ jsx6("div", { class: "scui-empty", children: query ? "No chats match your search." : state.error ?? "No coding chats found." }) : null,
+      rows.map((row) => /* @__PURE__ */ jsx6(Row, { value: row, row, state, adapter, onOpen }, row.key)),
+      state.history.hasMoreSessions ? /* @__PURE__ */ jsx6("button", { class: "scui-load", type: "button", disabled: loadingMore, onClick: loadMore, children: loadingMore ? "Loading older chats\u2026" : "Load older chats" }) : null
     ] })
   ] });
 }

package/styles.css

@@ -173,6 +173,8 @@
 .scui-envelope { display:flex; align-items:flex-end; gap:7px; padding:7px; border:1px solid var(--scui-border-strong); border-radius:16px; background:var(--scui-bg) }.scui-envelope textarea { flex:1; min-width:0; min-height:34px; max-height:150px; resize:none; overflow-y:hidden; border:0; outline:0; background:transparent; color:var(--scui-fg) }.scui-envelope > span { display:flex; gap:4px }
 .scui-attach { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--scui-muted) }.scui-attach:hover:not(:disabled) { background:var(--scui-fill); color:var(--scui-fg) }
 .scui-compose-context { display:flex; gap:5px; margin-bottom:6px; overflow-x:auto; scrollbar-width:thin }.scui-compose-context > span { display:flex; flex:0 0 auto; max-width:210px; align-items:center; gap:5px; padding:4px 5px 4px 7px; border:1px solid var(--scui-border); border-radius:999px; background:var(--scui-fill); font-size:10px }.scui-compose-context strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-compose-context button { display:grid; width:18px; height:18px; padding:0; place-items:center; border:0; border-radius:50%; background:transparent }.scui-compose-context button:hover { background:color-mix(in srgb,var(--scui-fg) 9%,transparent) }.scui-context-error { display:block; margin:0 2px 6px; color:var(--scui-danger) }
+.scui-compose-images { display:flex; gap:6px; margin-bottom:6px; overflow-x:auto; scrollbar-width:thin }.scui-compose-images > span { position:relative; display:grid; flex:0 0 58px; width:58px; height:58px; overflow:hidden; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-fill); place-items:center }.scui-compose-images img { width:100%; height:100%; object-fit:cover }.scui-compose-images strong { position:absolute; right:2px; bottom:2px; left:2px; overflow:hidden; padding:2px 3px; border-radius:4px; background:rgba(0,0,0,.65); color:#fff; font-size:8px; font-weight:500; text-overflow:ellipsis; white-space:nowrap }.scui-compose-images button { position:absolute; z-index:1; top:2px; right:2px; display:grid; width:19px; height:19px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(0,0,0,.68); color:#fff; place-items:center; cursor:pointer }
+.scui-message-images { display:flex; max-width:280px; gap:5px; margin-bottom:6px; flex-wrap:wrap }.scui-message-images img { display:block; width:auto; min-width:72px; max-width:100%; height:auto; max-height:210px; border:1px solid var(--scui-border); border-radius:8px; object-fit:contain; background:var(--scui-fill) }.scui-message-images > span { display:flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid var(--scui-border); border-radius:7px; color:var(--scui-muted); font-size:10px }
 .scui-send,.scui-stop { display:grid; width:29px; height:29px; padding:0; place-items:center; border:0; border-radius:8px; background:var(--scui-accent); color:#fff; cursor:pointer }.scui-stop { background:var(--scui-danger) }.scui-send:disabled,.scui-stop:disabled { opacity:.4; cursor:default }.scui-control-spinner { box-sizing:border-box; width:13px; height:13px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:scui-spin .75s linear infinite }
 .scui-queue { display:grid; gap:4px; max-height:85px; margin-bottom:6px; overflow:auto; font-size:10.5px }.scui-queue > span { display:flex; gap:6px; padding:4px 6px; border-radius:5px; background:var(--scui-fill) }.scui-queue > span > span { display:grid; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-queue small { color:var(--scui-muted) }.scui-queue > span button { margin-left:auto; border:0; background:transparent }
 .scui-harness-picker { display:flex; align-items:center; gap:7px; margin-bottom:7px }.scui-harness-picker select { margin-left:auto; max-width:55%; padding:4px; border:1px solid var(--scui-border); border-radius:6px; background:var(--scui-bg); color:var(--scui-fg) }