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

package/README.md

@@ -126,8 +126,9 @@ The browser cannot supply locators, credentials, policy, environment variables,
 materialization paths. Session keys and target harnesses must be revalidated by the host.
 `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 directly. The composer bounds images to four supported browser
-formats at 5 MB each, previews them locally, and keeps both attachment kinds associated with queued
+(`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.
 

package/components.mjs

@@ -967,6 +967,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   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);
@@ -1032,13 +1033,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);
@@ -1046,11 +1051,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) {
@@ -1071,7 +1084,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"
@@ -1091,7 +1104,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;
@@ -1105,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 }) })
       ] })
     ] })
   ] });
@@ -2140,6 +2162,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   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);
@@ -2184,13 +2207,17 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       });
     }).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);
@@ -2198,11 +2225,19 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       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));
+    }), (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 });
@@ -2253,7 +2288,16 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         return next;
       }) }),
       pickerError ? /* @__PURE__ */ jsx8("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
-      /* @__PURE__ */ jsxs7("div", { class: "scui-envelope", children: [
+      /* @__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;
@@ -2265,7 +2309,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
             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 }) }) })
       ] })
     ] })
   ] });

package/composer.mjs

@@ -274,6 +274,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   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);
@@ -339,13 +340,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 +358,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 +391,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 +411,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 +434,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/embed.mjs

@@ -973,6 +973,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   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);
@@ -1038,13 +1039,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);
@@ -1052,11 +1057,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) {
@@ -1077,7 +1090,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"
@@ -1097,7 +1110,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;
@@ -1111,7 +1133,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 }) })
       ] })
     ] })
   ] });
@@ -2140,6 +2162,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   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);
@@ -2184,13 +2207,17 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       });
     }).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);
@@ -2198,11 +2225,19 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       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));
+    }), (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 });
@@ -2253,7 +2288,16 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         return next;
       }) }),
       pickerError ? /* @__PURE__ */ jsx8("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
-      /* @__PURE__ */ jsxs7("div", { class: "scui-envelope", children: [
+      /* @__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;
@@ -2265,7 +2309,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
             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 }) }) })
       ] })
     ] })
   ] });

package/messenger.mjs

@@ -970,6 +970,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   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);
@@ -1035,13 +1036,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);
@@ -1049,11 +1054,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) {
@@ -1074,7 +1087,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"
@@ -1094,7 +1107,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;
@@ -1108,7 +1130,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 }) })
       ] })
     ] })
   ] });
@@ -2137,6 +2159,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   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);
@@ -2181,13 +2204,17 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       });
     }).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);
@@ -2195,11 +2222,19 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       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));
+    }), (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 });
@@ -2250,7 +2285,16 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         return next;
       }) }),
       pickerError ? /* @__PURE__ */ jsx8("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
-      /* @__PURE__ */ jsxs7("div", { class: "scui-envelope", children: [
+      /* @__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;
@@ -2262,7 +2306,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
             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 }) }) })
       ] })
     ] })
   ] });

package/package.json

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

package/styles.css

@@ -171,6 +171,7 @@
 .scui-continuation { display:flex; align-items:center; gap:8px; padding:7px 9px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-continuation > span { display:grid; flex:1 }.scui-continuation small { color:var(--scui-muted); font-size:10px }.scui-continuation button { padding:5px 8px; border:1px solid var(--scui-accent); border-radius:7px; background:transparent; color:var(--scui-accent); cursor:pointer }
 .scui-compose { flex:none; padding:8px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised) }
 .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-envelope.scui-drop-target { border-color:var(--scui-accent); background:color-mix(in srgb,var(--scui-accent) 7%,var(--scui-bg)); box-shadow:0 0 0 2px color-mix(in srgb,var(--scui-accent) 16%,transparent) }
 .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 }