@hachej/boring-agent 0.1.5 → 0.1.7

package/dist/front/index.d.ts

@@ -4,12 +4,24 @@ import { ReactNode, ComponentType, HTMLAttributes, ComponentProps, FormEvent, El
 import * as ai from 'ai';
 import { UIMessage, FileUIPart, ChatStatus } from 'ai';
 import * as _ai_sdk_react from '@ai-sdk/react';
-import { S as SendMessageInput, d as SessionSummary } from '../harness-CMiJ4kok.js';
+import { S as SendMessageInput, d as SessionSummary } from '../harness-DpMCKbzh.js';
 import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, InputGroupButton, TooltipContent, InputGroupAddon, InputGroupTextarea } from '@hachej/boring-ui-kit';
 import { Streamdown } from 'streamdown';
 import { StickToBottom } from 'use-stick-to-bottom';
 import { ClassValue } from 'clsx';
 
+interface UploadFileOptions {
+    apiBaseUrl?: string;
+    workspaceRequestId?: string | null;
+    directory?: string;
+    sourcePath?: string;
+}
+interface UploadFileResult {
+    url: string;
+    path: string;
+}
+declare function uploadFile(file: File, opts?: UploadFileOptions): Promise<UploadFileResult>;
+
 type SlashCommandHandler = (args: string, ctx: SlashCommandContext) => string | void;
 interface SlashCommand {
     name: string;
@@ -200,6 +212,12 @@ interface ChatPanelProps {
      */
     debug?: boolean;
     className?: string;
+    /** When provided, files are uploaded immediately on attach and sent as stable
+     * server URLs rather than base64 data URLs. Supply via useFileUpload() from
+     * @hachej/boring-workspace's DataProvider context. */
+    onUploadFile?: (file: File) => Promise<{
+        url: string;
+    }>;
 }
 declare function ChatPanel(props: ChatPanelProps): react_jsx_runtime.JSX.Element;
 
@@ -359,8 +377,13 @@ type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onEr
         message: string;
     }) => void;
     onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
+    /** When provided, files are uploaded to the server immediately on add and the
+     * attachment URL is replaced with the stable server path before submit. */
+    onUploadFile?: (file: File) => Promise<{
+        url: string;
+    }>;
 };
-declare const PromptInput: ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ...props }: PromptInputProps) => react_jsx_runtime.JSX.Element;
+declare const PromptInput: ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, onUploadFile, children, ...props }: PromptInputProps) => react_jsx_runtime.JSX.Element;
 type PromptInputTextareaProps = ComponentProps<typeof InputGroupTextarea>;
 declare const PromptInputTextarea: ({ onChange, onKeyDown, className, placeholder, ...props }: PromptInputTextareaProps) => react_jsx_runtime.JSX.Element;
 type PromptInputFooterProps = Omit<ComponentProps<typeof InputGroupAddon>, "align">;
@@ -391,4 +414,4 @@ declare const Shimmer: react.MemoExoticComponent<({ children, as: Component, cla
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AgentCommandContribution, type AgentCommandOptions, ArtifactOpenProvider, ChatEmptyState, type ChatEmptyStateProps, ChatPanel, type ChatPanelProps, type ChatSuggestion, CodeBlock, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, type CommandRegistry, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DebugDrawer, DiffView, type GroupedToolEntry, Message, MessageAction, MessageActions, MessageContent, MessageResponse, MessageToolbar, type OpenArtifactHandler, type ParsedCommand, PromptInput, PromptInputButton, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, Shimmer, type SlashCommand, type SlashCommandContext, ToolCallGroup, type ToolPart, type ToolRenderer, type ToolRendererOverrides, type UseAgentChatOptions, type UseSessionsOptions, type UseSessionsResult, builtinCommands, cn, createCommandRegistry, defaultChatSuggestions, defaultToolRenderers, getAgentCommands, mergeShadcnToolRenderers, mergeToolRenderers, parseSlashCommand, resolveToolRenderer, useAgentChat, useOpenArtifact, useSessions };
+export { type AgentCommandContribution, type AgentCommandOptions, ArtifactOpenProvider, ChatEmptyState, type ChatEmptyStateProps, ChatPanel, type ChatPanelProps, type ChatSuggestion, CodeBlock, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, type CommandRegistry, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DebugDrawer, DiffView, type GroupedToolEntry, Message, MessageAction, MessageActions, MessageContent, MessageResponse, MessageToolbar, type OpenArtifactHandler, type ParsedCommand, PromptInput, PromptInputButton, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, Shimmer, type SlashCommand, type SlashCommandContext, ToolCallGroup, type ToolPart, type ToolRenderer, type ToolRendererOverrides, type UploadFileOptions, type UploadFileResult, type UseAgentChatOptions, type UseSessionsOptions, type UseSessionsResult, builtinCommands, cn, createCommandRegistry, defaultChatSuggestions, defaultToolRenderers, getAgentCommands, mergeShadcnToolRenderers, mergeToolRenderers, parseSlashCommand, resolveToolRenderer, uploadFile, useAgentChat, useOpenArtifact, useSessions };

package/dist/front/index.js

@@ -1,3 +1,39 @@
+// src/front/upload/uploadFile.ts
+function readAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error ?? new Error("Read failed"));
+    reader.readAsDataURL(file);
+  });
+}
+async function uploadFile(file, opts = {}) {
+  const { apiBaseUrl = "", workspaceRequestId, directory, sourcePath } = opts;
+  const dataUrl = await readAsDataUrl(file);
+  const comma = dataUrl.indexOf(",");
+  const contentBase64 = comma >= 0 ? dataUrl.slice(comma + 1) : "";
+  const headers = { "Content-Type": "application/json" };
+  if (workspaceRequestId) headers["x-boring-workspace-id"] = workspaceRequestId;
+  const base = apiBaseUrl.replace(/\/$/, "");
+  const res = await fetch(`${base}/api/v1/files/upload`, {
+    method: "POST",
+    headers,
+    credentials: "include",
+    body: JSON.stringify({
+      filename: file.name,
+      contentType: file.type,
+      contentBase64,
+      ...directory ? { directory } : {},
+      ...sourcePath ? { sourcePath } : {}
+    })
+  });
+  if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
+  const body = await res.json();
+  const url = body.markdownUrl ?? body.path;
+  if (!url) throw new Error("Upload response missing url");
+  return { url, path: body.path ?? url };
+}
+
 // src/front/ChatPanel.tsx
 import { isToolUIPart as isToolUIPart2 } from "ai";
 import { motion as motion2 } from "motion/react";
@@ -235,6 +271,7 @@ function useAgentChat(opts) {
     };
   }, [sessionId, cacheKey, setMessages]);
   const messages = chat.messages;
+  const status = chat.status;
   useEffect4(() => {
     if (!hydrated || !cacheKey || messages.length === 0) return;
     try {
@@ -242,7 +279,38 @@ function useAgentChat(opts) {
     } catch {
     }
   }, [hydrated, cacheKey, messages]);
-  const status = chat.status;
+  const SETTLED_STATES = /* @__PURE__ */ new Set([
+    "output-available",
+    "output-error",
+    "output-denied",
+    "approval-responded"
+  ]);
+  const prevSettleRef = useRef4(status);
+  useEffect4(() => {
+    const prev = prevSettleRef.current;
+    prevSettleRef.current = status;
+    if (status !== "ready") return;
+    if (prev !== "streaming" && prev !== "submitted") return;
+    const hasUnsettled = messages.some(
+      (msg) => msg.parts?.some((p) => {
+        const part = p;
+        return typeof part.type === "string" && part.type.startsWith("tool-") && !SETTLED_STATES.has(part.state);
+      })
+    );
+    if (!hasUnsettled) return;
+    setMessages(
+      (prev2) => prev2.map((msg) => ({
+        ...msg,
+        parts: msg.parts?.map((p) => {
+          const part = p;
+          if (typeof part.type === "string" && part.type.startsWith("tool-") && !SETTLED_STATES.has(part.state)) {
+            return { ...part, state: "output-error" };
+          }
+          return p;
+        })
+      }))
+    );
+  }, [status, setMessages]);
   const prevStatusRef = useRef4(status);
   useEffect4(() => {
     const prev = prevStatusRef.current;
@@ -251,19 +319,58 @@ function useAgentChat(opts) {
     if (prev !== "streaming" && prev !== "submitted") return;
     if (!sessionId || messages.length === 0) return;
     const url = `/api/v1/agent/chat/${encodeURIComponent(sessionId)}/messages`;
+    const stripped = messages.map((msg) => ({
+      ...msg,
+      parts: msg.parts?.map((part) => {
+        const p = part;
+        if (p.type === "file" && typeof p.url === "string" && p.url.startsWith("data:")) {
+          return { ...p, url: "" };
+        }
+        return part;
+      })
+    }));
     fetch(url, {
       method: "PUT",
       headers: {
         "Content-Type": "application/json",
         ...optsRef.current.requestHeaders
       },
-      body: JSON.stringify({ messages })
+      body: JSON.stringify({ messages: stripped })
     }).catch(() => {
     });
   }, [sessionId, status, messages]);
   return chat;
 }
 
+// src/front/splitFollowUp.ts
+function splitFollowUp(msgs, consumed, genId) {
+  const targetIdx = msgs.findIndex(
+    (m) => m.role === "assistant" && m.parts?.some((p) => {
+      const part = p;
+      return part.type === "data-followup-consumed" || part.id?.startsWith("turn-");
+    })
+  );
+  const userMsg = {
+    id: genId(),
+    role: "user",
+    parts: [...consumed.files, { type: "text", text: consumed.text }]
+  };
+  if (targetIdx < 0) {
+    return [...msgs, userMsg];
+  }
+  const target = msgs[targetIdx];
+  const markerIdx = target.parts?.findIndex((p) => {
+    const part = p;
+    return part.type === "data-followup-consumed" || part.id?.startsWith("turn-");
+  }) ?? -1;
+  const markerIsPart = markerIdx >= 0 && (target.parts?.[markerIdx]).type === "data-followup-consumed";
+  const turn1Parts = markerIdx >= 0 ? target.parts?.slice(0, markerIdx) ?? [] : target.parts ?? [];
+  const turn2Parts = markerIdx >= 0 ? target.parts?.slice(markerIsPart ? markerIdx + 1 : markerIdx) ?? [] : [];
+  const asst1 = { ...target, parts: turn1Parts };
+  const asst2 = { ...target, id: genId(), parts: turn2Parts };
+  return [...msgs.slice(0, targetIdx), asst1, userMsg, asst2, ...msgs.slice(targetIdx + 1)];
+}
+
 // src/front/DebugDrawer.tsx
 import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
 import { Button, IconButton, Tabs, TabsContent, TabsList, TabsTrigger } from "@hachej/boring-ui-kit";
@@ -2731,6 +2838,7 @@ var PromptInput = ({
   maxFileSize,
   onError,
   onSubmit,
+  onUploadFile,
   children,
   ...props
 }) => {
@@ -2739,6 +2847,13 @@ var PromptInput = ({
   const inputRef = useRef9(null);
   const formRef = useRef9(null);
   const [items, setItems] = useState12([]);
+  const setFileUrlLocal = useCallback10((id, url, status) => {
+    setItems((prev) => prev.map((f) => {
+      if (f.id !== id) return f;
+      if (f.url !== url && f.url.startsWith("blob:")) URL.revokeObjectURL(f.url);
+      return { ...f, url, status };
+    }));
+  }, []);
   const files = usingProvider ? controller.attachments.files : items;
   const [referencedSources, setReferencedSources] = useState12([]);
   const filesRef = useRef9(files);
@@ -2784,34 +2899,37 @@ var PromptInput = ({
         });
         return;
       }
-      setItems((prev) => {
-        const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : void 0;
-        const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
-        if (typeof capacity === "number" && sized.length > capacity) {
-          onError?.({
-            code: "max_files",
-            message: "Too many files. Some were not added."
-          });
-        }
-        const next = [];
-        for (const file of capped) {
-          next.push({
-            filename: file.name,
-            id: nanoid(),
-            mediaType: file.type,
-            type: "file",
-            url: URL.createObjectURL(file)
-          });
+      const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - items.length) : void 0;
+      const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+      if (typeof capacity === "number" && sized.length > capacity) {
+        onError?.({
+          code: "max_files",
+          message: "Too many files. Some were not added."
+        });
+      }
+      const entries = capped.map((file) => ({
+        filename: file.name,
+        id: nanoid(),
+        mediaType: file.type,
+        type: "file",
+        url: URL.createObjectURL(file),
+        status: onUploadFile ? "uploading" : "ready"
+      }));
+      setItems((prev) => [...prev, ...entries]);
+      if (onUploadFile) {
+        for (let i = 0; i < entries.length; i++) {
+          const entry = entries[i];
+          const file = capped[i];
+          onUploadFile(file).then(({ url }) => setFileUrlLocal(entry.id, url, "ready")).catch(() => setFileUrlLocal(entry.id, entry.url, "error"));
         }
-        return [...prev, ...next];
-      });
+      }
     },
-    [matchesAccept, maxFiles, maxFileSize, onError]
+    [matchesAccept, maxFiles, maxFileSize, onError, items.length, onUploadFile, setFileUrlLocal]
   );
   const removeLocal = useCallback10(
     (id) => setItems((prev) => {
       const found = prev.find((file) => file.id === id);
-      if (found?.url) {
+      if (found?.url.startsWith("blob:")) {
         URL.revokeObjectURL(found.url);
       }
       return prev.filter((file) => file.id !== id);
@@ -2856,7 +2974,7 @@ var PromptInput = ({
   const clearAttachments = useCallback10(
     () => usingProvider ? controller?.attachments.clear() : setItems((prev) => {
       for (const file of prev) {
-        if (file.url) {
+        if (file.url.startsWith("blob:")) {
           URL.revokeObjectURL(file.url);
         }
       }
@@ -2959,6 +3077,7 @@ var PromptInput = ({
     },
     [add]
   );
+  const setFileUrl = usingProvider ? controller.attachments.setFileUrl : setFileUrlLocal;
   const attachmentsCtx = useMemo8(
     () => ({
       add,
@@ -2966,9 +3085,10 @@ var PromptInput = ({
       fileInputRef: inputRef,
       files: files.map((item) => ({ ...item, id: item.id })),
       openFileDialog,
-      remove
+      remove,
+      setFileUrl
     }),
-    [files, add, remove, clearAttachments, openFileDialog]
+    [files, add, remove, clearAttachments, openFileDialog, setFileUrl]
   );
   const refsCtx = useMemo8(
     () => ({
@@ -2995,18 +3115,16 @@ var PromptInput = ({
         const formData = new FormData(form);
         return formData.get("message") || "";
       })();
+      if (files.some((f) => f.status === "uploading")) return;
       if (!usingProvider) {
         form.reset();
       }
       try {
         const convertedFiles = await Promise.all(
-          files.map(async ({ id: _id, ...item }) => {
+          files.map(async ({ id: _id, status: _status, ...item }) => {
             if (item.url?.startsWith("blob:")) {
               const dataUrl = await convertBlobUrlToDataUrl(item.url);
-              return {
-                ...item,
-                url: dataUrl ?? item.url
-              };
+              return { ...item, url: dataUrl ?? item.url };
             }
             return item;
           })
@@ -3472,7 +3590,7 @@ var AttachmentRemove = ({
 };
 
 // src/front/ChatPanel.tsx
-import { PaperclipIcon as PaperclipIcon2, CopyIcon as CopyIcon4, CheckIcon as CheckIcon3, RefreshCwIcon as RefreshCwIcon2, BrainIcon as BrainIcon2, EyeIcon, EyeOffIcon, BotIcon } from "lucide-react";
+import { PaperclipIcon as PaperclipIcon2, CopyIcon as CopyIcon4, CheckIcon as CheckIcon3, RefreshCwIcon as RefreshCwIcon2, BrainIcon as BrainIcon2, EyeIcon, EyeOffIcon, BotIcon, Loader2, AlertCircleIcon } from "lucide-react";
 import {
   Button as Button11,
   IconButton as IconButton2,
@@ -3492,6 +3610,14 @@ import {
 } from "@hachej/boring-ui-kit";
 import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var INLINE_TEXT_MIME_PREFIXES = ["text/", "application/json", "application/xml", "application/yaml"];
+async function resolveAttachmentUrls(files) {
+  if (!files) return [];
+  return Promise.all(files.map(async (file) => ({
+    filename: file.filename,
+    mediaType: file.mediaType,
+    url: file.url.startsWith("blob:") ? await convertBlobUrlToDataUrl(file.url) ?? file.url : file.url
+  })));
+}
 async function readFileAsText(file) {
   const looksText = INLINE_TEXT_MIME_PREFIXES.some((p) => file.mediaType?.startsWith(p)) || /\.(md|txt|csv|json|yaml|yml|ts|tsx|js|jsx|py|rb|rs|go|sh|bash|css|html|sql|log)$/i.test(file.filename ?? "");
   if (!looksText) return null;
@@ -3646,9 +3772,14 @@ function ChatPanel(props) {
     onData,
     requestHeaders,
     onOpenArtifact,
+    onUploadFile,
     debug = false
   } = props;
   const [debugWidth, setDebugWidth] = useState13(440);
+  const [pendingMessage, setPendingMessage] = useState13(null);
+  const pendingMessageRef = useRef10(null);
+  const consumedFollowUpRef = useRef10(null);
+  const followUpSplitIdsRef = useRef10(null);
   const {
     messages,
     sendMessage,
@@ -3657,7 +3788,22 @@ function ChatPanel(props) {
     error,
     stop,
     clearError
-  } = useAgentChat({ sessionId, onData, requestHeaders });
+  } = useAgentChat({
+    sessionId,
+    onData: (part) => {
+      if (part?.type === "data-followup-consumed") {
+        const pending = pendingMessageRef.current;
+        consumedFollowUpRef.current = pending ? { text: pending.text, files: pending.files } : null;
+        followUpSplitIdsRef.current = {
+          userId: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-followup-user`,
+          assistantId: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-followup-assistant`
+        };
+        setPendingMessage(null);
+      }
+      onData?.(part);
+    },
+    requestHeaders
+  });
   const mergedToolRenderers = mergeShadcnToolRenderers(toolRenderers);
   const registry = useMemo10(
     () => createCommandRegistry([...builtinCommands, ...extraCommands ?? []]),
@@ -3777,6 +3923,70 @@ function ChatPanel(props) {
     return () => globalThis.removeEventListener?.("boring:model-change", onChange);
   }, []);
   const isStreaming = status === "submitted" || status === "streaming";
+  const displayMessages = useMemo10(() => {
+    const consumed = consumedFollowUpRef.current ?? pendingMessageRef.current;
+    const ids = followUpSplitIdsRef.current;
+    if (!consumed || !ids) return messages;
+    const hasFollowUpPart = messages.some(
+      (m) => m.role === "assistant" && m.parts?.some((p) => p.id?.startsWith("turn-"))
+    );
+    if (!hasFollowUpPart) return messages;
+    let n = 0;
+    return splitFollowUp(messages, consumed, () => n++ === 0 ? ids.userId : ids.assistantId);
+  }, [messages]);
+  const prevStatusForQueue = useRef10(status);
+  useEffect11(() => {
+    const prev = prevStatusForQueue.current;
+    prevStatusForQueue.current = status;
+    if (status !== "ready") return;
+    if (prev !== "streaming" && prev !== "submitted") return;
+    const consumed = consumedFollowUpRef.current ?? pendingMessageRef.current;
+    if (!consumed) return;
+    const ids = followUpSplitIdsRef.current;
+    consumedFollowUpRef.current = null;
+    followUpSplitIdsRef.current = null;
+    pendingMessageRef.current = null;
+    setPendingMessage(null);
+    let n = 0;
+    const genId = () => ids ? n++ === 0 ? ids.userId : ids.assistantId : globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+    const nextMessages = splitFollowUp(messages, consumed, genId);
+    setMessages(nextMessages);
+    fetch(`/api/v1/agent/chat/${encodeURIComponent(sessionId)}/messages`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        ...requestHeaders
+      },
+      body: JSON.stringify({ messages: nextMessages })
+    }).catch(() => {
+    });
+  }, [status, messages, sessionId, requestHeaders, setMessages]);
+  const handleStop = useCallback12(() => {
+    stop();
+    consumedFollowUpRef.current = null;
+    followUpSplitIdsRef.current = null;
+    pendingMessageRef.current = null;
+    setPendingMessage(null);
+    fetch(`/api/v1/agent/chat/${encodeURIComponent(sessionId)}/followup`, {
+      method: "DELETE",
+      headers: requestHeaders
+    }).catch(() => {
+    });
+  }, [stop, sessionId, requestHeaders]);
+  const handleInterrupt = useCallback12(() => {
+    stop();
+  }, [stop]);
+  useEffect11(() => {
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || !isStreaming) return;
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      e.preventDefault();
+      handleInterrupt();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isStreaming, handleInterrupt]);
   const userHistory = useMemo10(
     () => messages.filter((m) => m.role === "user").map((m) => m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n").trim()).filter(Boolean),
     [messages]
@@ -3935,6 +4145,29 @@ ${content}
       ...mentionNote ? [mentionNote] : []
     ].filter(Boolean).join("\n\n") || text;
     setMentionedFiles([]);
+    const resolvedAttachments = await resolveAttachmentUrls(files);
+    if (isStreaming) {
+      if (!pendingMessage) {
+        const nextPending = {
+          text,
+          files: files ?? [],
+          serverMessage,
+          attachments: resolvedAttachments
+        };
+        pendingMessageRef.current = nextPending;
+        setPendingMessage(nextPending);
+        fetch(`/api/v1/agent/chat/${encodeURIComponent(sessionId)}/followup`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...requestHeaders
+          },
+          body: JSON.stringify({ message: serverMessage, attachments: resolvedAttachments })
+        }).catch(() => {
+        });
+      }
+      return;
+    }
     void sendMessage(
       {
         // Rendered bubble: unchanged user text + file chips via files parts.
@@ -3951,13 +4184,7 @@ ${content}
           // schema treats it as optional; omitting it keeps the existing
           // 'off' default behaviour for hosts that don't expose the toggle.
           ...thinkingControl ? { thinkingLevel } : {},
-          attachments: files?.map((f) => ({
-            filename: f.filename,
-            mediaType: f.mediaType,
-            // Keep the data URL so the server could later forward images
-            // to multimodal-capable providers.
-            url: f.url
-          })) ?? []
+          attachments: resolvedAttachments
         }
       }
     );
@@ -4007,7 +4234,7 @@ ${content}
                   "mx-auto flex w-full flex-col gap-6",
                   chrome ? "max-w-3xl px-6 py-8" : "max-w-[680px] px-4 py-4"
                 ), children: [
-                  messages.length === 0 && /* @__PURE__ */ jsx23(
+                  displayMessages.length === 0 && /* @__PURE__ */ jsx23(
                     ChatEmptyState,
                     {
                       eyebrow: emptyEyebrow,
@@ -4031,7 +4258,7 @@ ${content}
                       }
                     }
                   ),
-                  messages.map((message, messageIndex) => {
+                  displayMessages.map((message, messageIndex) => {
                     const role = message.role === "user" || message.role === "assistant" ? message.role : "assistant";
                     const textParts = message.parts.filter(isTextPart);
                     const fileParts = message.parts.filter(isFilePart);
@@ -4063,6 +4290,7 @@ ${reasoningPart.text}`;
                         } else {
                           acc.push({ kind: "tool-group", tools: [{ part: item.part, key: item.key }], key: item.key });
                         }
+                      } else if (item.kind === "part" && !isTextPart(item.part)) {
                       } else {
                         acc.push(item);
                       }
@@ -4196,6 +4424,10 @@ ${reasoningPart.text}`;
                       message.id
                     );
                   }),
+                  pendingMessage && /* @__PURE__ */ jsx23(Message, { from: "user", children: /* @__PURE__ */ jsxs21(MessageContent, { className: "opacity-50", children: [
+                    /* @__PURE__ */ jsx23("div", { className: "text-[11px] font-medium text-muted-foreground mb-1", children: "Follow-up" }),
+                    /* @__PURE__ */ jsx23("div", { className: "text-sm whitespace-pre-wrap", children: pendingMessage.text })
+                  ] }) }),
                   (() => {
                     if (!error) return null;
                     const friendly = friendlyError(error);
@@ -4328,6 +4560,7 @@ ${reasoningPart.text}`;
                       {
                         "data-boring-state": status,
                         onSubmit: handleSubmit,
+                        onUploadFile,
                         multiple: true,
                         maxFiles: 20,
                         maxFileSize: 5 * 1024 * 1024,
@@ -4403,7 +4636,7 @@ ${reasoningPart.text}`;
                                       PromptInputSubmit,
                                       {
                                         status,
-                                        onStop: stop,
+                                        onStop: handleStop,
                                         className: cn(
                                           // Primary action. Uses the warm accent (not `primary`,
                                           // which is a neutral foreground tone) — this is the one
@@ -4684,15 +4917,20 @@ function AttachmentsList() {
             // Compact pill — medium border, muted fill, room for a
             // thumbnail + name + remove action.
             "!h-9 !gap-2 !rounded-full !border-input/80 !bg-muted/40 !pl-1 !pr-2",
-            "transition-colors hover:!bg-muted/70 hover:!text-foreground"
+            "transition-colors hover:!bg-muted/70 hover:!text-foreground",
+            file.status === "error" && "!border-destructive/50 !bg-destructive/10"
           ),
           children: [
-            /* @__PURE__ */ jsx23(
-              AttachmentPreview,
-              {
-                className: "!size-7 shrink-0 overflow-hidden !rounded-full bg-background/60"
-              }
-            ),
+            /* @__PURE__ */ jsxs21("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsx23(
+                AttachmentPreview,
+                {
+                  className: "!size-7 overflow-hidden !rounded-full bg-background/60"
+                }
+              ),
+              file.status === "uploading" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-background/70", children: /* @__PURE__ */ jsx23(Loader2, { className: "size-3.5 animate-spin text-muted-foreground" }) }),
+              file.status === "error" && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-destructive/20", children: /* @__PURE__ */ jsx23(AlertCircleIcon, { className: "size-3.5 text-destructive" }) })
+            ] }),
             /* @__PURE__ */ jsx23(
               AttachmentInfo,
               {
@@ -5020,6 +5258,7 @@ export {
   mergeToolRenderers,
   parseSlashCommand,
   resolveToolRenderer,
+  uploadFile,
   useAgentChat,
   useOpenArtifact,
   useSessions

package/dist/front/styles.css

@@ -978,6 +978,12 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .\!border-destructive\/50 {
+    border-color: var(--destructive) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--destructive) 50%, transparent) !important;
+    }
+  }
   .\!border-input\/80 {
     border-color: var(--input) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1089,6 +1095,12 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
+  .\!bg-destructive\/10 {
+    background-color: var(--destructive) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent) !important;
+    }
+  }
   .\!bg-muted\/40 {
     background-color: var(--muted) !important;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1206,6 +1218,12 @@
       background-color: color-mix(in oklab, var(--background) 60%, transparent);
     }
   }
+  .bg-background\/70 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 70%, transparent);
+    }
+  }
   .bg-background\/80 {
     background-color: var(--background);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1278,6 +1296,12 @@
       background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
     }
   }
+  .bg-destructive\/20 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
   .bg-foreground {
     background-color: var(--foreground);
   }