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

package/README.md

@@ -41,7 +41,7 @@ const mounted = mountSupercodeMessenger(document.querySelector('#agent'), {
       host.send(intent);
     },
     async pickContext() {
-      return host.pickTextFiles();
+      return host.pickFilesAndImages();
     },
     onClose() {
       panel.close();
@@ -124,9 +124,13 @@ errors, and owned/attached identities without reimplementing transcript or capab
 `SupercodeController` snapshots and persisted inventory into it, then handles `SupercodeUiIntent`.
 The browser cannot supply locators, credentials, policy, environment variables, or arbitrary
 materialization paths. Session keys and target harnesses must be revalidated by the host.
-`pickContext` is optional and host-owned: the default composer shows its attachment control only
-when this callback exists, bounds the returned text context, and keeps it associated with queued
-messages and send recovery. The host still chooses how a user selects and reads that context.
+`pickContext` is optional and host-owned: the default composer shows one attachment control when
+this callback exists and accepts either typed text context (`detail`) or native image inputs
+(`url`). Images can also be pasted or dropped directly, and an image-only turn is sent without
+inventing fallback prompt text. The composer bounds images to four supported browser formats at
+5 MB each, previews them locally, and keeps both attachment kinds associated with queued
+messages, retry, edit, and new-chat recovery. The host still chooses how explicit file selection
+is exposed and must revalidate every returned item.
 
 An embedding product such as Vibewaiting should therefore be small: Lucarne owns its iframe and
 launcher lifecycle, Supercode owns this UI and the controller semantics, and Vibewaiting only

package/components.mjs

@@ -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 = {
@@ -774,6 +784,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" }),
@@ -802,6 +817,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 [];
@@ -828,6 +846,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: [
@@ -836,6 +906,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";
@@ -875,19 +960,24 @@ 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 [dragging, setDragging] = 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;
@@ -897,9 +987,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(() => {
@@ -912,8 +1002,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]);
@@ -922,30 +1014,67 @@ 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 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 true;
+    }
+    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 ${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;
-    const message = { text, context };
+    if (!text && !images.length) return;
+    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: [
@@ -955,27 +1084,41 @@ 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.text || "Image attachment",
+          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) => {
+    /* @__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;
         setDraft(value);
-        remember(value, context, queue);
+        remember(value, context, images, queue);
       }, onKeyDown: (event) => {
         if (isSendKey(event)) {
           event.preventDefault();
@@ -984,7 +1127,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 }) })
       ] })
     ] })
   ] });
@@ -1377,6 +1520,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,
@@ -1579,6 +1723,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: [
@@ -1923,9 +2068,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,
@@ -1933,13 +2079,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(() => {
@@ -1985,7 +2131,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;
@@ -2009,12 +2155,14 @@ 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 [dragging, setDragging] = useState4(false);
   const [pickerError, setPickerError] = useState4(null);
   const startSequence = useRef5(0);
   const textarea = useRef5(null);
@@ -2023,7 +2171,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;
@@ -2040,24 +2188,60 @@ 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;
+      });
+      setImages((current) => {
+        const next = mergeImages(current, attachments.images);
+        boundedSet(newChatMemory, memoryKey, { harness, draft, context, images: next });
         return next;
       });
-    }, (error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
+    }).catch((error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
+  };
+  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 true;
+    }
+    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 ${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 || !harness || starting) return;
+    if (!text && !images.length || !harness || starting) return;
     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));
     }
@@ -2087,31 +2271,45 @@ 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) => {
+      /* @__PURE__ */ jsxs7("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 ? /* @__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();
             send();
           }
         } }),
-        /* @__PURE__ */ jsx8("span", { children: /* @__PURE__ */ jsx8("button", { type: "button", class: "scui-send", "aria-label": "Start chat", disabled: !draft.trim() || !harness || Boolean(starting), onClick: send, children: starting ? /* @__PURE__ */ jsx8("i", { class: "scui-control-spinner" }) : /* @__PURE__ */ jsx8(UiIcon, { name: "send", size: 17 }) }) })
+        /* @__PURE__ */ jsx8("span", { children: /* @__PURE__ */ jsx8("button", { type: "button", class: "scui-send", "aria-label": "Start chat", disabled: !draft.trim() && !images.length || !harness || Boolean(starting), onClick: send, children: starting ? /* @__PURE__ */ jsx8("i", { class: "scui-control-spinner" }) : /* @__PURE__ */ jsx8(UiIcon, { name: "send", size: 17 }) }) })
       ] })
     ] })
   ] });