@invergent/agent-chat-react 1.7.0 → 1.7.2

package/dist/index.cjs

@@ -4450,11 +4450,72 @@ var ChatMessage = react.memo(function ChatMessage2({
           className: "max-w-64 max-h-48 rounded-lg border border-border object-contain"
         },
         i
+      )) }),
+      message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: message.attachments.map((a, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        AttachmentChip,
+        {
+          attachment: a,
+          onSelect: onFileSelect
+        },
+        a.path ?? `pending-${i}`
       )) })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { message, isLast, onFileSelect });
 });
+function iconForMime(mime) {
+  if (!mime) return lucideReact.File;
+  if (mime.startsWith("image/")) return lucideReact.FileImage;
+  if (mime.startsWith("audio/")) return lucideReact.FileAudio;
+  if (mime.startsWith("video/")) return lucideReact.FileVideo;
+  if (mime === "application/pdf") return lucideReact.FileText;
+  if (mime.startsWith("text/")) return lucideReact.FileText;
+  if (mime === "application/json" || mime === "application/xml" || mime.endsWith("+xml") || mime.endsWith("+json") || mime.includes("javascript") || mime.includes("typescript")) {
+    return lucideReact.FileCode;
+  }
+  if (mime === "application/zip" || mime === "application/x-7z-compressed" || mime === "application/x-tar" || mime === "application/gzip" || mime === "application/x-rar-compressed") {
+    return lucideReact.FileArchive;
+  }
+  if (mime === "text/csv" || mime === "application/vnd.ms-excel" || mime.includes("spreadsheet")) {
+    return lucideReact.FileSpreadsheet;
+  }
+  return lucideReact.File;
+}
+function formatBytes(n) {
+  if (n == null || !Number.isFinite(n) || n < 0) return "";
+  for (const [unit, divisor] of [
+    ["GB", 1e9],
+    ["MB", 1e6],
+    ["KB", 1e3]
+  ]) {
+    if (n >= divisor) return `${(n / divisor).toFixed(1)} ${unit}`;
+  }
+  return `${n} B`;
+}
+function AttachmentChip({
+  attachment,
+  onSelect
+}) {
+  const Icon = iconForMime(attachment.mimeType);
+  const clickable = !!attachment.path && !!onSelect;
+  const sizeLabel = formatBytes(attachment.size);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: clickable ? () => onSelect(attachment.path) : void 0,
+      disabled: !clickable,
+      title: attachment.filename,
+      "aria-label": clickable ? `Open ${attachment.filename}` : `${attachment.filename} (uploading)`,
+      className: "inline-flex items-center gap-2 rounded-md border border-border bg-muted/40 px-2 py-1 text-xs max-w-[16rem] " + (clickable ? "hover:bg-muted cursor-pointer" : "opacity-60 cursor-default"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: attachment.filename }),
+        sizeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground shrink-0", children: sizeLabel })
+      ]
+    }
+  );
+}
 function AssistantMessage({
   message,
   isLast,
@@ -4601,6 +4662,25 @@ function Command({
     }
   );
 }
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "command-input-wrapper", className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { className: "border-transparent border-b-input bg-transparent px-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.Command.Input,
+      {
+        "data-slot": "command-input",
+        className: cn(
+          "w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-3.5 shrink-0 opacity-50" }) })
+  ] }) });
+}
 function CommandList({
   className,
   ...props
@@ -4646,6 +4726,19 @@ function CommandGroup({
     }
   );
 }
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className),
+      ...props
+    }
+  );
+}
 function CommandItem({
   className,
   children,
@@ -4827,7 +4920,8 @@ var PromptInputProvider = ({
         id: nanoid.nanoid(),
         mediaType: file.type,
         type: "file",
-        url: URL.createObjectURL(file)
+        url: URL.createObjectURL(file),
+        file
       }))
     ]);
   }, []);
@@ -5009,7 +5103,8 @@ var PromptInput = ({
             id: nanoid.nanoid(),
             mediaType: file.type,
             type: "file",
-            url: URL.createObjectURL(file)
+            url: URL.createObjectURL(file),
+            file
           });
         }
         return [...prev, ...next];
@@ -5209,15 +5304,17 @@ var PromptInput = ({
       }
       try {
         const convertedFiles = await Promise.all(
-          files.map(async ({ id: _id, ...item }) => {
-            if (item.url?.startsWith("blob:")) {
-              const dataUrl = await convertBlobUrlToDataUrl(item.url);
+          files.map(async (entry) => {
+            const isBlob = entry.url?.startsWith("blob:");
+            const isImage = entry.mediaType?.startsWith("image/");
+            if (isBlob && isImage && entry.url) {
+              const dataUrl = await convertBlobUrlToDataUrl(entry.url);
               return {
-                ...item,
-                url: dataUrl ?? item.url
+                ...entry,
+                url: dataUrl ?? entry.url
               };
             }
-            return item;
+            return entry;
           })
         );
         const result = onSubmit({ files: convertedFiles, text }, event);
@@ -5526,7 +5623,7 @@ var Context = ({
     () => ({ maxTokens, modelId, usage, usedTokens }),
     [maxTokens, modelId, usage, usedTokens]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(HoverCard, { closeDelay: 0, openDelay: 0, ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(HoverCard, { closeDelay: 100, openDelay: 0, ...props }) });
 };
 var ContextIcon = () => {
   const { usedTokens, maxTokens } = useContextValue();
@@ -5767,6 +5864,128 @@ var ContextCacheUsage = ({
   );
 };
 
+// src/components/ui/item.tsx
+init_utils();
+var itemVariants = classVarianceAuthority.cva(
+  "group/item flex w-full flex-wrap items-center rounded-none border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-3.5 px-3.5 py-3",
+        xs: "gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-none [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-xs leading-snug font-semibold uppercase underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-left text-sm leading-relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+
 // src/components/ui/popover.tsx
 init_utils();
 function Popover({
@@ -5802,36 +6021,82 @@ function PopoverAnchor({
 function ChatComposer(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(PromptInputProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ChatComposerInner, { ...props }) });
 }
+function iconForMime2(mime) {
+  if (!mime) return lucideReact.File;
+  if (mime.startsWith("audio/")) return lucideReact.FileAudio;
+  if (mime.startsWith("video/")) return lucideReact.FileVideo;
+  if (mime === "application/pdf" || mime.startsWith("text/")) return lucideReact.FileText;
+  if (mime === "application/json" || mime === "application/xml" || mime.endsWith("+xml") || mime.endsWith("+json") || mime.includes("javascript") || mime.includes("typescript")) {
+    return lucideReact.FileCode;
+  }
+  if (mime === "application/zip" || mime === "application/x-7z-compressed" || mime === "application/x-tar" || mime === "application/gzip" || mime === "application/x-rar-compressed") {
+    return lucideReact.FileArchive;
+  }
+  if (mime === "text/csv" || mime === "application/vnd.ms-excel" || mime.includes("spreadsheet")) {
+    return lucideReact.FileSpreadsheet;
+  }
+  return lucideReact.File;
+}
+function formatBytes2(n) {
+  if (n == null || !Number.isFinite(n) || n < 0) return "";
+  for (const [unit, divisor] of [
+    ["GB", 1e9],
+    ["MB", 1e6],
+    ["KB", 1e3]
+  ]) {
+    if (n >= divisor) return `${(n / divisor).toFixed(1)} ${unit}`;
+  }
+  return `${n} B`;
+}
 function AttachmentPreviewStrip() {
   const attachments = useProviderAttachments();
   if (attachments.files.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 px-3 pt-2 pb-1 flex-wrap", children: attachments.files.map((file) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
-    file.mediaType?.startsWith("image/") && file.url ? /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: file.url,
-        alt: file.filename,
-        className: "h-16 w-16 rounded-lg border border-border object-cover"
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16 w-16 rounded-lg border border-border bg-muted flex items-center justify-center text-[10px] text-muted-foreground truncate px-1", children: file.filename }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 px-3 pt-2 pb-1 flex-wrap", children: attachments.files.map((file) => {
+    const isImage = file.mediaType?.startsWith("image/") && !!file.url;
+    const sizeLabel = formatBytes2(file.file?.size);
+    const Icon = iconForMime2(file.mediaType);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Item,
       {
-        type: "button",
-        onClick: () => attachments.remove(file.id),
-        className: "absolute -top-1.5 -right-1.5 hidden group-hover:flex items-center justify-center w-4 h-4 rounded-full bg-destructive text-destructive-foreground text-[10px]",
-        children: "\xD7"
-      }
-    )
-  ] }, file.id)) });
+        variant: "outline",
+        size: "xs",
+        className: "group w-auto max-w-[18rem] rounded-md",
+        title: file.filename,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ItemMedia, { variant: isImage ? "image" : "icon", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: file.url, alt: file.filename }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ItemContent, { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ItemTitle, { className: "block w-full truncate normal-case font-medium text-foreground", children: file.filename }),
+            sizeLabel && /* @__PURE__ */ jsxRuntime.jsx(ItemDescription, { className: "text-xs", children: sizeLabel })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ItemActions, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => attachments.remove(file.id),
+              "aria-label": `Remove ${file.filename}`,
+              className: "hidden group-hover:flex items-center justify-center w-4 h-4 rounded-full bg-destructive text-destructive-foreground text-[10px]",
+              children: "\xD7"
+            }
+          ) })
+        ]
+      },
+      file.id
+    );
+  }) });
 }
+var MAX_IMAGES_PER_MESSAGE = 5;
+var MAX_IMAGE_BYTES = 2e7;
+var MAX_ATTACHMENTS_PER_MESSAGE = 10;
+var MAX_ATTACHMENT_BYTES = 5e7;
+var MAX_ATTACHMENTS_TOTAL_BYTES = 2e8;
 function ChatComposerInner({
   onSend,
   onStop,
   isRunning,
   disabled = false,
   disabledReason,
-  tokenUsage
+  tokenUsage,
+  onComposerError
 }) {
   const { adapter } = useAgentChatAdapterContext();
   const { textInput } = usePromptInputController();
@@ -5856,8 +6121,8 @@ function ChatComposerInner({
       setWasClosed(true);
     }
   }, [adapter, showSlashMenu, wasClosed]);
-  const slashCommands = react.useMemo(() => {
-    const builtin = [
+  const builtinCommands = react.useMemo(
+    () => [
       { value: "/clear", label: "/clear", description: "Clear conversation" },
       { value: "/compress", label: "/compress", description: "Compress context" },
       { value: "/goal", label: "/goal", description: "Define an outcome goal" },
@@ -5868,195 +6133,307 @@ function ChatComposerInner({
       { value: "/loop", label: "/loop", description: "Schedule recurring prompt" },
       { value: "/loop list", label: "/loop list", description: "List active loops" },
       { value: "/loop cancel", label: "/loop cancel", description: "Cancel a loop by ID" }
-    ];
-    return [...adapterCommands, ...builtin];
-  }, [adapterCommands]);
-  const searchQuery = showSlashMenu ? textInput.value.slice(1).toLowerCase() : "";
-  const filteredCommands = react.useMemo(
-    () => slashCommands.filter(
-      (cmd) => cmd.value.slice(1).toLowerCase().includes(searchQuery) || cmd.description.toLowerCase().includes(searchQuery)
-    ),
-    [slashCommands, searchQuery]
+    ],
+    []
   );
-  const [selectedIndex, setSelectedIndex] = react.useState(0);
-  react.useEffect(() => {
-    setSelectedIndex(0);
-  }, [searchQuery]);
-  react.useEffect(() => {
-    setSelectedIndex(
-      (index) => Math.min(index, Math.max(filteredCommands.length - 1, 0))
-    );
-  }, [filteredCommands.length]);
-  const menuOpen = showSlashMenu && filteredCommands.length > 0;
+  const searchQuery = showSlashMenu ? textInput.value.slice(1) : "";
+  const menuOpen = showSlashMenu;
+  const textareaRef = react.useRef(null);
+  const focusTextareaAtEnd = react.useCallback(() => {
+    requestAnimationFrame(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      textarea.focus();
+      const end = textarea.value.length;
+      textarea.setSelectionRange(end, end);
+    });
+  }, []);
   const handleCommandSelect = react.useCallback(
     (commandValue) => {
       textInput.setInput(commandValue + " ");
       setButtonMenuOpen(false);
       setMenuDismissed(true);
+      focusTextareaAtEnd();
     },
-    [textInput]
+    [textInput, focusTextareaAtEnd]
   );
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      if (!menuOpen) return;
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setSelectedIndex((i) => Math.min(i + 1, filteredCommands.length - 1));
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setSelectedIndex((i) => Math.max(i - 1, 0));
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        const command = filteredCommands[selectedIndex];
-        if (command) handleCommandSelect(command.value);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        textInput.setInput("");
-        setButtonMenuOpen(false);
-        setMenuDismissed(true);
-      } else if (e.key === "Tab") {
-        e.preventDefault();
-        const command = filteredCommands[selectedIndex];
-        if (command) handleCommandSelect(command.value);
-      }
+  const handleSearchChange = react.useCallback(
+    (next) => {
+      textInput.setInput("/" + next);
     },
-    [menuOpen, filteredCommands, selectedIndex, handleCommandSelect, textInput]
+    [textInput]
   );
   const handleSubmit = react.useCallback(
     async (message) => {
       const text = message.text.trim();
       if (!text || disabled) return;
       const images = [];
+      const pending = [];
       for (const file of message.files) {
         if (file.mediaType?.startsWith("image/") && file.url) {
           images.push({ data: file.url, mimeType: file.mediaType });
+          continue;
+        }
+        if (!file.file) {
+          continue;
         }
+        pending.push({
+          file: file.file,
+          filename: file.filename ?? file.file.name,
+          mimeType: file.mediaType ?? file.file.type ?? void 0,
+          size: file.file.size
+        });
+      }
+      if (images.length > MAX_IMAGES_PER_MESSAGE) {
+        onComposerError?.({
+          code: "max_images",
+          message: `Maximum ${MAX_IMAGES_PER_MESSAGE} images per message.`
+        });
+        return;
+      }
+      if (pending.length > MAX_ATTACHMENTS_PER_MESSAGE) {
+        onComposerError?.({
+          code: "max_attachments",
+          message: `Maximum ${MAX_ATTACHMENTS_PER_MESSAGE} attachments per message.`
+        });
+        return;
+      }
+      for (const img of images) {
+        if (img.data.length > Math.ceil(MAX_IMAGE_BYTES * 4 / 3)) {
+          onComposerError?.({
+            code: "max_image_size",
+            message: `Image exceeds ${MAX_IMAGE_BYTES / 1e6} MB.`
+          });
+          return;
+        }
+      }
+      let totalAttachmentBytes = 0;
+      for (const a of pending) {
+        if (a.file.size > MAX_ATTACHMENT_BYTES) {
+          onComposerError?.({
+            code: "max_attachment_size",
+            message: `"${a.filename}" exceeds ${MAX_ATTACHMENT_BYTES / 1e6} MB.`
+          });
+          return;
+        }
+        totalAttachmentBytes += a.file.size;
+      }
+      if (totalAttachmentBytes > MAX_ATTACHMENTS_TOTAL_BYTES) {
+        onComposerError?.({
+          code: "max_attachments_total",
+          message: `Attachments exceed ${MAX_ATTACHMENTS_TOTAL_BYTES / 1e6} MB total for this message.`
+        });
+        return;
       }
       if (isRunning) {
         await onStop();
       }
-      await onSend(text, images.length > 0 ? images : void 0);
+      await onSend(
+        text,
+        images.length > 0 ? images : void 0,
+        pending.length > 0 ? pending : void 0
+      );
     },
-    [onSend, onStop, isRunning, disabled]
+    [onSend, onStop, onComposerError, isRunning, disabled]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: menuOpen, onOpenChange: (open) => {
-    if (!open) {
-      setButtonMenuOpen(false);
-    }
-  }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewStrip, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(PromptInput, { onSubmit: handleSubmit, accept: "image/*", multiple: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PromptInputBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        PromptInputTextarea,
-        {
-          placeholder: disabled ? disabledReason ?? "Session disabled" : "Send a message...",
-          disabled,
-          onKeyDown: handleKeyDown
+  const handlePromptInputError = react.useCallback(
+    (err) => {
+      onComposerError?.({ code: err.code, message: err.message });
+    },
+    [onComposerError]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Popover,
+    {
+      open: menuOpen,
+      onOpenChange: (open) => {
+        if (!open) {
+          setButtonMenuOpen(false);
+          setMenuDismissed(true);
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(PromptInputFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(PromptInputTools, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(PromptInputActionMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PromptInputActionMenuTrigger, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(PromptInputActionMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx(PromptInputActionAddAttachments, {}) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon-xs",
-              className: "text-muted-foreground",
-              onClick: (e) => {
-                e.preventDefault();
-                setButtonMenuOpen((v) => !v);
-              },
-              "aria-label": "Slash commands",
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs  font-bold", children: "/" })
-            }
-          ),
-          tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-            Context,
-            {
-              usedTokens: tokenUsage.totalTokens,
-              maxTokens: tokenUsage.contextWindow,
-              modelId: tokenUsage.model,
-              usage: {
-                inputTokens: tokenUsage.inputTokens,
-                outputTokens: tokenUsage.outputTokens,
-                reasoningTokens: tokenUsage.reasoningTokens,
-                cachedInputTokens: tokenUsage.cachedInputTokens,
-                totalTokens: tokenUsage.totalTokens,
-                inputTokenDetails: void 0,
-                outputTokenDetails: void 0
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ContextTrigger, {}),
-                /* @__PURE__ */ jsxRuntime.jsxs(ContextContent, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ContextContentHeader, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(ContextContentBody, { children: tokenUsage.totalTokens > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ContextInputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.inputTokens.toLocaleString() })
-                    ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ContextOutputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.outputTokens.toLocaleString() })
-                    ] }) }),
-                    tokenUsage.reasoningTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextReasoningUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.reasoningTokens.toLocaleString() })
-                    ] }) }),
-                    tokenUsage.cachedInputTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextCacheUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.cachedInputTokens.toLocaleString() })
-                    ] }) })
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-1", children: "Empty" }) }),
-                  tokenUsage.totalTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-end gap-3 bg-secondary p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewStrip, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          PromptInput,
+          {
+            onSubmit: handleSubmit,
+            multiple: true,
+            maxFiles: MAX_IMAGES_PER_MESSAGE + MAX_ATTACHMENTS_PER_MESSAGE,
+            maxFileSize: MAX_ATTACHMENT_BYTES,
+            onError: handlePromptInputError,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PromptInputBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                PromptInputTextarea,
+                {
+                  ref: textareaRef,
+                  placeholder: disabled ? disabledReason ?? "Session disabled" : "Send a message...",
+                  disabled
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(PromptInputFooter, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(PromptInputTools, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(PromptInputActionMenu, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(PromptInputActionMenuTrigger, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(PromptInputActionMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx(PromptInputActionAddAttachments, {}) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     Button,
                     {
                       type: "button",
-                      size: "xs",
-                      onClick: () => onSend("/compress"),
-                      children: "Compress"
+                      variant: "ghost",
+                      size: "icon-xs",
+                      className: "text-muted-foreground",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        setButtonMenuOpen((v) => !v);
+                      },
+                      "aria-label": "Slash commands",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs  font-bold", children: "/" })
                     }
-                  ) })
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(PromptInputSubmit, { status, onStop })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PopoverContent,
-      {
-        side: "top",
-        align: "start",
-        className: "p-0",
-        style: { width: "var(--radix-popover-trigger-width)" },
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onCloseAutoFocus: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Command, { value: filteredCommands[selectedIndex]?.value, filter: () => 1, children: /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { children: filteredCommands.map((cmd) => /* @__PURE__ */ jsxRuntime.jsxs(
-            CommandItem,
-            {
-              value: cmd.value,
-              onSelect: () => handleCommandSelect(cmd.value),
-              className: "grid grid-cols-[6rem_1fr] gap-2 [&_svg]:hidden",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "", children: cmd.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: cmd.description })
-              ]
+                  ),
+                  tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                    Context,
+                    {
+                      usedTokens: tokenUsage.totalTokens,
+                      maxTokens: tokenUsage.contextWindow,
+                      modelId: tokenUsage.model,
+                      usage: {
+                        inputTokens: tokenUsage.inputTokens,
+                        outputTokens: tokenUsage.outputTokens,
+                        reasoningTokens: tokenUsage.reasoningTokens,
+                        cachedInputTokens: tokenUsage.cachedInputTokens,
+                        totalTokens: tokenUsage.totalTokens,
+                        inputTokenDetails: void 0,
+                        outputTokenDetails: void 0
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(ContextTrigger, {}),
+                        /* @__PURE__ */ jsxRuntime.jsxs(ContextContent, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(ContextContentHeader, {}),
+                          /* @__PURE__ */ jsxRuntime.jsx(ContextContentBody, { children: tokenUsage.totalTokens > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(ContextInputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.inputTokens.toLocaleString() })
+                            ] }) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(ContextOutputUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.outputTokens.toLocaleString() })
+                            ] }) }),
+                            tokenUsage.reasoningTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextReasoningUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.reasoningTokens.toLocaleString() })
+                            ] }) }),
+                            tokenUsage.cachedInputTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx(ContextCacheUsage, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tokenUsage.cachedInputTokens.toLocaleString() })
+                            ] }) })
+                          ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-1", children: "Empty" }) }),
+                          tokenUsage.totalTokens > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-end gap-3 bg-secondary p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              type: "button",
+                              size: "xs",
+                              onClick: () => onSend("/compress"),
+                              children: "Compress"
+                            }
+                          ) })
+                        ] })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(PromptInputSubmit, { status, onStop })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PopoverContent,
+          {
+            side: "top",
+            align: "start",
+            className: "overflow-hidden p-0",
+            style: { width: "var(--radix-popover-trigger-width)" },
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            onEscapeKeyDown: () => {
+              focusTextareaAtEnd();
             },
-            cmd.value
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No commands found" })
-        ] }) })
-      }
-    )
-  ] });
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CommandInput,
+                {
+                  placeholder: "Type a command or search...",
+                  value: searchQuery,
+                  onValueChange: handleSearchChange
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No commands found." }),
+                builtinCommands.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: "Built-in commands", children: builtinCommands.map((cmd) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  CommandItem,
+                  {
+                    value: cmd.value,
+                    keywords: [cmd.description],
+                    onSelect: () => handleCommandSelect(cmd.value),
+                    className: "grid grid-cols-[12rem_1fr] items-baseline gap-3 [&_svg]:hidden",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "font-mono text-foreground truncate",
+                          title: cmd.label,
+                          children: cmd.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "min-w-0 truncate text-xs text-muted-foreground",
+                          title: cmd.description,
+                          children: cmd.description
+                        }
+                      )
+                    ]
+                  },
+                  cmd.value
+                )) }),
+                builtinCommands.length > 0 && adapterCommands.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandSeparator, {}),
+                adapterCommands.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: "Skills", children: adapterCommands.map((cmd) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  CommandItem,
+                  {
+                    value: cmd.value,
+                    keywords: [cmd.description],
+                    onSelect: () => handleCommandSelect(cmd.value),
+                    className: "grid grid-cols-[12rem_1fr] items-baseline gap-3 [&_svg]:hidden",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "font-mono text-foreground truncate",
+                          title: cmd.label,
+                          children: cmd.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "min-w-0 truncate text-xs text-muted-foreground",
+                          title: cmd.description,
+                          children: cmd.description
+                        }
+                      )
+                    ]
+                  },
+                  cmd.value
+                )) })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/ai-elements/artifact.tsx
@@ -7042,7 +7419,8 @@ function ChatThread({
   disabledReason,
   tokenUsage,
   retryIndicator,
-  onRetry
+  onRetry,
+  onComposerError
 }) {
   const groups = react.useMemo(() => groupMessages(messages), [messages]);
   const artifactFallbacks = react.useMemo(() => {
@@ -7159,7 +7537,8 @@ function ChatThread({
           isRunning,
           disabled,
           disabledReason,
-          tokenUsage
+          tokenUsage,
+          onComposerError
         }
       )
     ] })
@@ -8477,12 +8856,24 @@ function applyRetryIndicator(state, event) {
 }
 function applyUserMessage(messages, eventId, data) {
   const content = stringValue2(data.content);
+  const images = parseUserMessageImages(data.images);
+  const attachments = parseUserMessageAttachments(data.attachments);
   const next = [...messages];
   const localIdx = next.findIndex(
     (m) => m.role === "user" && m.id.startsWith("local-") && m.content === content
   );
   if (localIdx >= 0) {
-    next[localIdx] = { ...next[localIdx], id: `evt-${eventId}` };
+    const local = next[localIdx];
+    next[localIdx] = {
+      ...local,
+      id: `evt-${eventId}`,
+      // Server-confirmed lists replace any optimistic display-only
+      // entries: chips that were rendered while the upload was in
+      // flight become clickable because the persisted refs include a
+      // workspace path.
+      images: images ?? local.images,
+      attachments: attachments ?? local.attachments
+    };
     return next;
   }
   next.push({
@@ -8490,10 +8881,41 @@ function applyUserMessage(messages, eventId, data) {
     role: "user",
     content,
     createdAt: /* @__PURE__ */ new Date(),
-    status: "complete"
+    status: "complete",
+    images,
+    attachments
   });
   return next;
 }
+function parseUserMessageImages(raw) {
+  if (!Array.isArray(raw)) return void 0;
+  const out = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const r = item;
+    const data = typeof r.data === "string" ? r.data : void 0;
+    if (!data) continue;
+    const mimeType = typeof r.mime_type === "string" ? r.mime_type : typeof r.mimeType === "string" ? r.mimeType : void 0;
+    out.push({ data, mimeType });
+  }
+  return out.length > 0 ? out : void 0;
+}
+function parseUserMessageAttachments(raw) {
+  if (!Array.isArray(raw)) return void 0;
+  const out = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const r = item;
+    const filename = typeof r.filename === "string" ? r.filename : void 0;
+    if (!filename) continue;
+    const path = typeof r.path === "string" ? r.path : void 0;
+    if (!path) continue;
+    const mimeType = typeof r.mime_type === "string" ? r.mime_type : typeof r.mimeType === "string" ? r.mimeType : void 0;
+    const size = typeof r.size === "number" ? r.size : void 0;
+    out.push({ path, filename, mimeType, size });
+  }
+  return out.length > 0 ? out : void 0;
+}
 function applyBrowserEvent(state, event, browser) {
   return withMessages(
     { ...state, browser },
@@ -9065,7 +9487,7 @@ function useAgentChatRuntime({
     };
   }, [adapter, clearReconnectTimer, closeStream, openStream, sessionId]);
   const markSending = react.useCallback(
-    (content, images) => {
+    (content, images, attachments) => {
       setState((prev) => ({
         ...prev,
         terminal: false,
@@ -9079,7 +9501,8 @@ function useAgentChatRuntime({
             content,
             createdAt: /* @__PURE__ */ new Date(),
             status: "complete",
-            images: images?.length ? images : void 0
+            images: images?.length ? images : void 0,
+            attachments: attachments?.length ? attachments : void 0
           }
         ]
       }));
@@ -9136,14 +9559,48 @@ function useAgentChatRuntime({
     });
   }, []);
   const send = react.useCallback(
-    async (content, images) => {
-      markSending(content, images);
-      const goal = images?.length ? null : parseGoalDefinition(content);
+    async (content, images, pendingAttachments) => {
+      const displayAttachments = pendingAttachments?.length ? pendingAttachments.map((a) => ({
+        filename: a.filename,
+        mimeType: a.mimeType,
+        size: a.size ?? a.file.size
+        // path absent until upload completes.
+      })) : void 0;
+      markSending(content, images, displayAttachments);
+      const goal = images?.length || pendingAttachments?.length ? null : parseGoalDefinition(content);
+      const runUploadsAndSend = async (sid) => {
+        let refs;
+        if (pendingAttachments?.length) {
+          const stamp = Date.now();
+          refs = await Promise.all(
+            pendingAttachments.map(async (a, index) => {
+              const safeName = sanitizeUploadFilename(a.file.name);
+              const renamed = new File(
+                [a.file],
+                `${stamp}-${index}-${safeName}`,
+                { type: a.file.type }
+              );
+              const up = await adapter.uploadWorkspaceFile({
+                sessionId: sid,
+                file: renamed,
+                directory: "uploads"
+              });
+              return {
+                path: up.path,
+                filename: a.filename,
+                mimeType: a.mimeType ?? a.file.type ?? void 0,
+                size: up.size
+              };
+            })
+          );
+        }
+        await sendTurn(adapter, sid, content, images, refs, goal);
+      };
       if (!sessionId) {
         try {
           const session2 = await adapter.createSession({ agentId });
           onSessionChange?.(session2.id);
-          await sendTurn(adapter, session2.id, content, images, goal);
+          await runUploadsAndSend(session2.id);
         } catch (error) {
           markSendError(error instanceof Error ? error.message : "send failed");
           throw error;
@@ -9152,7 +9609,7 @@ function useAgentChatRuntime({
       }
       try {
         ensureStreamForNewTurn(sessionId);
-        await sendTurn(adapter, sessionId, content, images, goal);
+        await runUploadsAndSend(sessionId);
       } catch (error) {
         markSendError(error instanceof Error ? error.message : "send failed");
         throw error;
@@ -9227,7 +9684,7 @@ function findLastAssistantIndex2(messages) {
 }
 var GOAL_RUBRIC_RE = /\n\s*(?:rubric|criteria)\s*:\s*\n/i;
 var GOAL_CONTROL_COMMANDS = /* @__PURE__ */ new Set(["", "status", "pause", "resume", "clear"]);
-async function sendTurn(adapter, sessionId, content, images, goal) {
+async function sendTurn(adapter, sessionId, content, images, attachments, goal) {
   if (goal && adapter.defineOutcome) {
     await adapter.defineOutcome({
       sessionId,
@@ -9236,7 +9693,11 @@ async function sendTurn(adapter, sessionId, content, images, goal) {
     });
     return;
   }
-  await adapter.sendMessage({ sessionId, content, images });
+  await adapter.sendMessage({ sessionId, content, images, attachments });
+}
+function sanitizeUploadFilename(name) {
+  const stripped = name.replace(/[\/\\\0]/g, "").trim();
+  return stripped.length > 0 ? stripped : "attachment";
 }
 function parseGoalDefinition(content) {
   const text = content.trim();
@@ -9256,7 +9717,8 @@ function AgentChat({
   onSessionChange,
   onFileSelect,
   onMessagesChange,
-  disabled
+  disabled,
+  onComposerError
 }) {
   const [workspacePath, setWorkspacePath] = react.useState(null);
   const runtime = useAgentChatRuntime({
@@ -9308,14 +9770,15 @@ function AgentChat({
                     messages: runtime.messages,
                     isRunning: runtime.isRunning,
                     isLoadingHistory: runtime.isLoadingHistory,
-                    onSend: (content, images) => runtime.send(content, images),
+                    onSend: (content, images, attachments) => runtime.send(content, images, attachments),
                     onStop: () => runtime.stop(),
                     onRetry: runtime.retry,
                     onFileSelect: handleFileSelect,
                     disabled: effectiveDisabled,
                     disabledReason,
                     tokenUsage: runtime.tokenUsage,
-                    retryIndicator: runtime.retryIndicator
+                    retryIndicator: runtime.retryIndicator,
+                    onComposerError
                   }
                 )
               }