feat(webui): support image uploads in composer and message bubbles

webui/src/components/thread/StreamErrorNotice.tsx

@@ -0,0 +1,72 @@
+import { AlertTriangle, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { StreamError } from "@/lib/nanobot-client";
+
+interface StreamErrorNoticeProps {
+  error: StreamError;
+  onDismiss: () => void;
+}
+
+/**
+ * Dismissible banner that surfaces transport-level faults the user needs to
+ * know about. Rendered above the composer so the message the fault referred
+ * to remains in view just above. ``role="alert"`` + ``aria-live="assertive"``
+ * ensures screen readers announce the failure.
+ */
+export function StreamErrorNotice({ error, onDismiss }: StreamErrorNoticeProps) {
+  const { t } = useTranslation();
+
+  const { title, body } = resolveCopy(error, t);
+
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      className={cn(
+        "mb-2 flex items-start gap-2 rounded-lg border border-destructive/30",
+        "bg-destructive/10 px-3 py-2 text-[12px] leading-5 text-destructive",
+        "animate-in fade-in-0 slide-in-from-bottom-1",
+      )}
+    >
+      <AlertTriangle
+        className="mt-0.5 h-4 w-4 shrink-0"
+        aria-hidden
+      />
+      <div className="flex-1">
+        <p className="font-medium">{title}</p>
+        <p className="mt-0.5 text-destructive/80">{body}</p>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={onDismiss}
+        aria-label={t("common.dismiss")}
+        className="h-6 w-6 shrink-0 text-destructive hover:bg-destructive/15 hover:text-destructive"
+      >
+        <X className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+}
+
+function resolveCopy(
+  error: StreamError,
+  t: (key: string) => string,
+): { title: string; body: string } {
+  switch (error.kind) {
+    case "message_too_big":
+      return {
+        title: t("errors.messageTooBig.title"),
+        body: t("errors.messageTooBig.body"),
+      };
+    default: {
+      // Exhaustiveness guard: if a new StreamError kind is added, TS will
+      // complain here until we add a corresponding i18n branch.
+      const _exhaustive: never = error.kind;
+      return { title: String(_exhaustive), body: "" };
+    }
+  }
+}

webui/src/components/thread/ThreadComposer.tsx

@@ -1,12 +1,43 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { ArrowUp } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from "react";
+import {
+  ArrowUp,
+  ImageIcon,
+  Loader2,
+  Paperclip,
+  X,
+} from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
+import {
+  useAttachedImages,
+  type AttachedImage,
+  type AttachmentError,
+  MAX_IMAGES_PER_MESSAGE,
+} from "@/hooks/useAttachedImages";
+import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
+import type { SendImage } from "@/hooks/useNanobotStream";
 import { cn } from "@/lib/utils";
 
+/** ``<input accept>``: aligned with the server's MIME whitelist. SVG is
+ * deliberately excluded to avoid an embedded-script XSS surface. */
+const ACCEPT_ATTR = "image/png,image/jpeg,image/webp,image/gif";
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 interface ThreadComposerProps {
-  onSend: (content: string) => void;
+  onSend: (content: string, images?: SendImage[]) => void;
   disabled?: boolean;
   placeholder?: string;
   modelLabel?: string | null;
@@ -22,11 +53,47 @@ export function ThreadComposer({
 }: ThreadComposerProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState("");
+  const [inlineError, setInlineError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const chipRefs = useRef(new Map<string, HTMLButtonElement>());
   const isHero = variant === "hero";
   const resolvedPlaceholder =
     placeholder ?? t("thread.composer.placeholderThread");
 
+  const { images, enqueue, remove, clear, encoding, full } =
+    useAttachedImages();
+
+  const formatRejection = useCallback(
+    (reason: AttachmentError): string => {
+      const key = `thread.composer.imageRejected.${reason}`;
+      return t(key, { max: MAX_IMAGES_PER_MESSAGE });
+    },
+    [t],
+  );
+
+  const addFiles = useCallback(
+    (files: File[]) => {
+      if (files.length === 0) return;
+      const { rejected } = enqueue(files);
+      if (rejected.length > 0) {
+        setInlineError(formatRejection(rejected[0].reason));
+      } else {
+        setInlineError(null);
+      }
+    },
+    [enqueue, formatRejection],
+  );
+
+  const {
+    isDragging,
+    onPaste,
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+  } = useClipboardAndDrop(addFiles);
+
   useEffect(() => {
     if (disabled) return;
     const el = textareaRef.current;
@@ -35,11 +102,43 @@ export function ThreadComposer({
     return () => cancelAnimationFrame(id);
   }, [disabled]);
 
+  const readyImages = useMemo(
+    () => images.filter((img): img is AttachedImage & { dataUrl: string } =>
+      img.status === "ready" && typeof img.dataUrl === "string",
+    ),
+    [images],
+  );
+  const hasErrors = images.some((img) => img.status === "error");
+
+  const canSend =
+    !disabled
+    && !encoding
+    && !hasErrors
+    && (value.trim().length > 0 || readyImages.length > 0);
+
   const submit = useCallback(() => {
+    if (!canSend) return;
     const trimmed = value.trim();
-    if (!trimmed || disabled) return;
-    onSend(trimmed);
+    // Share the same normalized ``data:`` URL with both the wire payload and
+    // the optimistic bubble preview: data URLs are self-contained (no blob
+    // lifetime, safe under React StrictMode double-mount) and keep the
+    // bubble in sync with whatever the backend actually sees.
+    const payload: SendImage[] | undefined =
+      readyImages.length > 0
+        ? readyImages.map((img) => ({
+            media: {
+              data_url: img.dataUrl,
+              name: img.file.name,
+            },
+            preview: { url: img.dataUrl, name: img.file.name },
+          }))
+        : undefined;
+    onSend(trimmed, payload);
     setValue("");
+    setInlineError(null);
+    // Bubble owns the data URL copy; safe to revoke every staged blob
+    // preview here without affecting the rendered message.
+    clear();
     requestAnimationFrame(() => {
       const el = textareaRef.current;
       if (el) {
@@ -47,9 +146,9 @@ export function ThreadComposer({
         el.focus();
       }
     });
-  }, [disabled, onSend, value]);
+  }, [canSend, clear, onSend, readyImages, value]);
 
-  const onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
       submit();
@@ -62,12 +161,55 @@ export function ThreadComposer({
     el.style.height = `${Math.min(el.scrollHeight, 260)}px`;
   };
 
+  const onFilePick: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    e.target.value = "";
+    addFiles(files);
+  };
+
+  const removeChip = useCallback(
+    (id: string) => {
+      const { nextFocusId } = remove(id);
+      setInlineError(null);
+      requestAnimationFrame(() => {
+        const el = nextFocusId ? chipRefs.current.get(nextFocusId) : null;
+        if (el) {
+          el.focus();
+        } else {
+          textareaRef.current?.focus();
+        }
+      });
+    },
+    [remove],
+  );
+
+  const onChipKey = useCallback(
+    (id: string) => (e: ReactKeyboardEvent<HTMLButtonElement>) => {
+      if (
+        e.key === "Delete" ||
+        e.key === "Backspace" ||
+        e.key === "Enter" ||
+        e.key === " "
+      ) {
+        e.preventDefault();
+        removeChip(id);
+      }
+    },
+    [removeChip],
+  );
+
+  const attachButtonDisabled = disabled || full;
+
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
         submit();
       }}
+      onDragEnter={onDragEnter}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
       className={cn("w-full", isHero ? "px-0" : "px-1 pb-1.5 pt-1 sm:px-0")}
     >
       <div
@@ -78,14 +220,44 @@ export function ThreadComposer({
             : "max-w-[49.5rem] rounded-[16px] border border-border/70 bg-card/55",
           "focus-within:bg-card/70 focus-within:ring-1 focus-within:ring-foreground/8",
           disabled && "opacity-60",
+          isDragging && "ring-2 ring-primary/40 motion-reduce:ring-0 motion-reduce:border-primary",
         )}
       >
+        {images.length > 0 ? (
+          <div
+            className="flex flex-wrap gap-2 px-3 pt-3"
+            aria-label={t("thread.composer.attachImage")}
+          >
+            {images.map((img) => (
+              <AttachmentChip
+                key={img.id}
+                image={img}
+                labelRemove={t("thread.composer.remove")}
+                labelEncoding={t("thread.composer.encoding")}
+                normalizedHint={(orig, current) =>
+                  t("thread.composer.normalizedSizeHint", {
+                    orig: formatBytes(orig),
+                    current: formatBytes(current),
+                  })
+                }
+                formatError={formatRejection}
+                onRemove={() => removeChip(img.id)}
+                onKeyDown={onChipKey(img.id)}
+                registerRef={(el) => {
+                  if (el) chipRefs.current.set(img.id, el);
+                  else chipRefs.current.delete(img.id);
+                }}
+              />
+            ))}
+          </div>
+        ) : null}
         <textarea
           ref={textareaRef}
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onInput={onInput}
           onKeyDown={onKeyDown}
+          onPaste={onPaste}
           rows={1}
           placeholder={resolvedPlaceholder}
           disabled={disabled}
@@ -100,6 +272,17 @@ export function ThreadComposer({
             "disabled:cursor-not-allowed",
           )}
         />
+        {inlineError ? (
+          <div
+            role="alert"
+            className={cn(
+              "mx-3 mb-1 rounded-md border border-destructive/40 bg-destructive/8 px-2.5 py-1",
+              "text-[11.5px] font-medium text-destructive",
+            )}
+          >
+            {inlineError}
+          </div>
+        ) : null}
         <div
           className={cn(
             "flex items-center justify-between gap-2",
@@ -107,6 +290,28 @@ export function ThreadComposer({
           )}
         >
           <div className="flex min-w-0 items-center gap-2">
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={ACCEPT_ATTR}
+              multiple
+              hidden
+              onChange={onFilePick}
+            />
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              disabled={attachButtonDisabled}
+              aria-label={t("thread.composer.attachImage")}
+              onClick={() => fileInputRef.current?.click()}
+              className={cn(
+                "rounded-full text-muted-foreground hover:text-foreground",
+                isHero ? "h-8.5 w-8.5" : "h-7.5 w-7.5",
+              )}
+            >
+              <Paperclip className={cn(isHero ? "h-4 w-4" : "h-3.5 w-3.5")} />
+            </Button>
             {modelLabel ? (
               <span
                 title={modelLabel}
@@ -131,12 +336,12 @@ export function ThreadComposer({
           <Button
             type="submit"
             size="icon"
-            disabled={disabled || !value.trim()}
+            disabled={!canSend}
             aria-label={t("thread.composer.send")}
             className={cn(
               "rounded-full border border-border/70 bg-secondary/85 text-secondary-foreground shadow-none transition-transform hover:bg-accent",
               isHero ? "h-8.5 w-8.5" : "h-7.5 w-7.5",
-              value.trim() && !disabled && "hover:scale-[1.03] active:scale-95",
+              canSend && "hover:scale-[1.03] active:scale-95",
             )}
           >
             <ArrowUp className={cn(isHero ? "h-4.5 w-4.5" : "h-4 w-4")} />
@@ -146,3 +351,94 @@ export function ThreadComposer({
     </form>
   );
 }
+
+interface AttachmentChipProps {
+  image: AttachedImage;
+  labelRemove: string;
+  labelEncoding: string;
+  normalizedHint: (origBytes: number, currentBytes: number) => string;
+  formatError: (reason: AttachmentError) => string;
+  onRemove: () => void;
+  onKeyDown: (e: ReactKeyboardEvent<HTMLButtonElement>) => void;
+  registerRef: (el: HTMLButtonElement | null) => void;
+}
+
+function AttachmentChip({
+  image,
+  labelRemove,
+  labelEncoding,
+  normalizedHint,
+  formatError,
+  onRemove,
+  onKeyDown,
+  registerRef,
+}: AttachmentChipProps) {
+  const sizeLabel =
+    image.status === "ready" && image.normalized && image.encodedBytes
+      ? normalizedHint(image.file.size, image.encodedBytes)
+      : formatBytes(image.file.size);
+  const tone =
+    image.status === "error"
+      ? "border-destructive/40 bg-destructive/5 text-destructive"
+      : "border-border/70 bg-muted/60";
+
+  return (
+    <div
+      className={cn(
+        "group relative flex items-center gap-2 rounded-[12px] border px-2 py-1.5",
+        "transition-colors motion-reduce:transition-none",
+        tone,
+      )}
+      data-testid="composer-chip"
+    >
+      <div className="relative h-10 w-10 overflow-hidden rounded-md bg-background">
+        {image.previewUrl ? (
+          <img
+            src={image.previewUrl}
+            alt=""
+            aria-hidden
+            loading="eager"
+            draggable={false}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <ImageIcon className="h-4 w-4 text-muted-foreground" aria-hidden />
+          </div>
+        )}
+        {image.status === "encoding" ? (
+          <div
+            className="absolute inset-0 flex items-center justify-center bg-background/60"
+            aria-label={labelEncoding}
+          >
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" aria-hidden />
+          </div>
+        ) : null}
+      </div>
+      <div className="flex min-w-0 flex-col text-[11.5px] leading-4">
+        <span className="truncate max-w-[14rem] font-medium" title={image.file.name}>
+          {image.file.name}
+        </span>
+        <span className="truncate text-muted-foreground">
+          {image.status === "error" && image.error
+            ? formatError(image.error)
+            : sizeLabel}
+        </span>
+      </div>
+      <button
+        type="button"
+        ref={registerRef}
+        onClick={onRemove}
+        onKeyDown={onKeyDown}
+        aria-label={labelRemove}
+        className={cn(
+          "ml-1 grid h-5 w-5 flex-none place-items-center rounded-full",
+          "text-muted-foreground/80 hover:bg-foreground/8 hover:text-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/30",
+        )}
+      >
+        <X className="h-3.5 w-3.5" aria-hidden />
+      </button>
+    </div>
+  );
+}

webui/src/components/thread/ThreadShell.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { ThreadComposer } from "@/components/thread/ThreadComposer";
 import { ThreadHeader } from "@/components/thread/ThreadHeader";
+import { StreamErrorNotice } from "@/components/thread/StreamErrorNotice";
 import { ThreadViewport } from "@/components/thread/ThreadViewport";
 import { useNanobotStream } from "@/hooks/useNanobotStream";
 import { useSessionHistory } from "@/hooks/useSessions";
@@ -47,10 +48,14 @@ export function ThreadShell({
     if (!chatId) return historical;
     return messageCacheRef.current.get(chatId) ?? historical;
   }, [chatId, historical]);
-  const { messages, isStreaming, send, setMessages } = useNanobotStream(
-    chatId,
-    initial,
-  );
+  const {
+    messages,
+    isStreaming,
+    send,
+    setMessages,
+    streamError,
+    dismissStreamError,
+  } = useNanobotStream(chatId, initial);
   const showHeroComposer = messages.length === 0 && !loading;
 
   useEffect(() => {
@@ -140,31 +145,39 @@ export function ThreadShell({
         isStreaming={isStreaming}
         emptyState={emptyState}
         composer={
-          session ? (
-            <ThreadComposer
-              onSend={send}
-              disabled={!chatId}
-              placeholder={
-                showHeroComposer
-                  ? t("thread.composer.placeholderHero")
-                  : t("thread.composer.placeholderThread")
-              }
-              modelLabel={toModelBadgeLabel(modelName)}
-              variant={showHeroComposer ? "hero" : "thread"}
-            />
-          ) : (
-            <ThreadComposer
-              onSend={handleWelcomeSend}
-              disabled={booting}
-              placeholder={
-                booting
-                  ? t("thread.composer.placeholderOpening")
-                  : t("thread.composer.placeholderHero")
-              }
-              modelLabel={toModelBadgeLabel(modelName)}
-              variant="hero"
-            />
-          )
+          <>
+            {streamError ? (
+              <StreamErrorNotice
+                error={streamError}
+                onDismiss={dismissStreamError}
+              />
+            ) : null}
+            {session ? (
+              <ThreadComposer
+                onSend={send}
+                disabled={!chatId}
+                placeholder={
+                  showHeroComposer
+                    ? t("thread.composer.placeholderHero")
+                    : t("thread.composer.placeholderThread")
+                }
+                modelLabel={toModelBadgeLabel(modelName)}
+                variant={showHeroComposer ? "hero" : "thread"}
+              />
+            ) : (
+              <ThreadComposer
+                onSend={handleWelcomeSend}
+                disabled={booting}
+                placeholder={
+                  booting
+                    ? t("thread.composer.placeholderOpening")
+                    : t("thread.composer.placeholderHero")
+                }
+                modelLabel={toModelBadgeLabel(modelName)}
+                variant="hero"
+              />
+            )}
+          </>
         }
       />
     </section>