opencami 1.0.1 → 1.2.0

package/dist/server/assets/{_sessionKey-qlAPF_Ft.js → _sessionKey-DQwkBUS7.js}

@@ -3,23 +3,25 @@ import { Link, useNavigate } from "@tanstack/react-router";
 import * as React from "react";
 import React__default, { memo, useDeferredValue, useState, useMemo, useCallback, Suspense, lazy, useRef, useEffect, useId, useLayoutEffect, createContext, useContext } from "react";
 import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
-import { D as DialogRoot, a as DialogContent, b as DialogTitle, c as DialogDescription, d as DialogClose, M as MenuRoot, e as MenuTrigger, f as MenuContent, g as MenuItem, T as TooltipProvider, h as TooltipRoot, i as TooltipTrigger, j as TooltipContent, s as setChatUiState, k as chatUiQueryKey, l as getChatUiState } from "./menu-D6n4DB0U.js";
+import { T as TooltipProvider, a as TooltipRoot, b as TooltipTrigger, c as TooltipContent, s as setChatUiState, d as chatUiQueryKey, g as getChatUiState } from "./tooltip-gbV6rEVv.js";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { MoreHorizontalIcon, Pen01Icon, Upload01Icon, Delete01Icon, ArrowRight01Icon, SidebarLeft01Icon, PencilEdit02Icon, Folder01Icon, Search01Icon, Settings01Icon, Menu01Icon, Tick02Icon, Copy01Icon, Loading02Icon, StopIcon, VolumeHighIcon, ArrowDown01Icon, Loading03Icon, ArtificialIntelligence02Icon, CommandIcon, Cancel01Icon, Attachment01Icon, File01Icon, ArrowUp02Icon } from "@hugeicons/core-free-icons";
+import { Tick01Icon, Cancel01Icon, MoreHorizontalIcon, Pen01Icon, Upload01Icon, Delete01Icon, BotIcon, Clock01Icon, Chat01Icon, ArrowRight01Icon, SidebarLeft01Icon, PencilEdit02Icon, Folder01Icon, AiBrain01Icon, Search01Icon, Settings01Icon, Menu01Icon, Tick02Icon, Copy01Icon, Loading02Icon, StopIcon, VolumeHighIcon, ArrowDown01Icon, Loading03Icon, ArtificialIntelligence02Icon, CommandIcon, Attachment01Icon, File01Icon, Mic02Icon, ArrowUp02Icon } from "@hugeicons/core-free-icons";
 import { motion, AnimatePresence } from "motion/react";
+import { D as DialogRoot, a as DialogContent, b as DialogTitle, c as DialogDescription, d as DialogClose, M as MenuRoot, e as MenuTrigger, f as MenuContent, g as MenuItem, u as useFileExplorerState } from "./use-file-explorer-state-DMHdtb7D.js";
 import { B as Button, c as cn, b as buttonVariants } from "./button-DtQ3rV1m.js";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import { ScrollArea } from "@base-ui/react/scroll-area";
+import { O as OpenCamiLogo, a as OpenCamiText } from "./opencami-logo-C-43FL3R.js";
 import { marked } from "marked";
 import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
-import { C as CodeBlock, u as useChatSettings$1 } from "./index-COu2idHm.js";
+import { r as resolveLanguage, u as useChatSettingsStore, C as CodeBlock, a as useChatSettings$1 } from "./index-CmbNTqa2.js";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { createPortal } from "react-dom";
-import { a as Route } from "./router-DbxyvprK.js";
+import { a as Route } from "./router-5qObg5aX.js";
 function deriveFriendlyIdFromKey(key) {
   if (!key) return "main";
   const trimmed = key.trim();
@@ -39,7 +41,7 @@ function getToolCallsFromMessage(msg) {
     (part) => part.type === "toolCall"
   );
 }
-function normalizeTimestamp$1(value) {
+function normalizeTimestamp$2(value) {
   if (typeof value === "number" && Number.isFinite(value)) {
     if (value < 1e12) return value * 1e3;
     return value;
@@ -59,7 +61,7 @@ function getMessageTimestamp(message) {
     message.ts
   ];
   for (const candidate of candidates) {
-    const normalized = normalizeTimestamp$1(candidate);
+    const normalized = normalizeTimestamp$2(candidate);
     if (normalized) return normalized;
   }
   return Date.now();
@@ -93,6 +95,7 @@ function normalizeSessions(rows) {
     const rawSession = session;
     const totalTokens = typeof rawSession.totalTokens === "number" ? rawSession.totalTokens : void 0;
     const contextTokens = typeof rawSession.contextTokens === "number" ? rawSession.contextTokens : void 0;
+    const status = typeof rawSession.status === "string" ? rawSession.status : void 0;
     return {
       key,
       friendlyId: friendlyIdCandidate,
@@ -102,6 +105,7 @@ function normalizeSessions(rows) {
       updatedAt: typeof session.updatedAt === "number" ? session.updatedAt : void 0,
       lastMessage: session.lastMessage ?? null,
       kind,
+      status,
       totalTokens,
       contextTokens
     };
@@ -652,9 +656,74 @@ function ScrollAreaCorner({ className, ...props }) {
     }
   );
 }
+function getKindIcon(kind) {
+  if (kind === "subagent") return BotIcon;
+  if (kind === "cron") return Clock01Icon;
+  return Chat01Icon;
+}
+function previewFromMessage(message) {
+  if (!message || !Array.isArray(message.content)) return "";
+  const text = message.content.map((part) => part.type === "text" ? String(part.text ?? "") : "").join(" ").replace(/\s+/g, " ").trim();
+  return text;
+}
+function normalizeTimestamp$1(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    if (value < 1e12) return value * 1e3;
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Date.parse(value);
+    if (!Number.isNaN(parsed)) return parsed;
+  }
+  return null;
+}
+function getLastMessageTimestamp(message) {
+  if (!message) return null;
+  const candidates = [
+    message.createdAt,
+    message.created_at,
+    message.timestamp,
+    message.time,
+    message.ts
+  ];
+  for (const candidate of candidates) {
+    const normalized = normalizeTimestamp$1(candidate);
+    if (normalized) return normalized;
+  }
+  return null;
+}
+function formatRelativeTime(timestamp) {
+  const diffMs = timestamp - Date.now();
+  const absMs = Math.abs(diffMs);
+  const units = [
+    ["minute", 6e4],
+    ["hour", 36e5],
+    ["day", 864e5]
+  ];
+  let unit = "minute";
+  let divisor = 6e4;
+  if (absMs >= units[2][1]) {
+    [unit, divisor] = units[2];
+  } else if (absMs >= units[1][1]) {
+    [unit, divisor] = units[1];
+  }
+  const value = Math.round(diffMs / divisor);
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return rtf.format(value, unit);
+}
+function subagentStatusTone(status) {
+  const normalized = String(status ?? "").toLowerCase().trim();
+  if (!normalized) return null;
+  if (normalized === "error" || normalized === "failed") return "error";
+  if (normalized === "completed" || normalized === "ended" || normalized === "done") {
+    return "success";
+  }
+  return null;
+}
 function SessionItemComponent({
   session,
   active,
+  isGenerating = false,
   isPinned,
   selectionMode = false,
   selected = false,
@@ -666,6 +735,11 @@ function SessionItemComponent({
   onExport
 }) {
   const label = session.label || session.title || session.derivedTitle || session.friendlyId;
+  const KindIcon = getKindIcon(session.kind);
+  const subagentPreviewRaw = session.kind === "subagent" && (session.lastMessage?.role === "assistant" || session.lastMessage?.role === "toolResult") ? previewFromMessage(session.lastMessage) : "";
+  const subagentPreview = subagentPreviewRaw.length > 50 ? `${subagentPreviewRaw.slice(0, 50).trimEnd()}…` : subagentPreviewRaw;
+  const subagentStatus = session.kind === "subagent" ? subagentStatusTone(session.status) : null;
+  const cronLastRun = session.kind === "cron" ? getLastMessageTimestamp(session.lastMessage) : null;
   return /* @__PURE__ */ jsxs(
     Link,
     {
@@ -682,7 +756,7 @@ function SessionItemComponent({
       },
       className: cn(
         "group inline-flex items-center justify-between",
-        "w-full text-left pl-1.5 pr-0.5 h-8 rounded-lg transition-colors duration-0",
+        "w-full text-left pl-1.5 pr-0.5 min-h-8 py-1 rounded-lg transition-colors duration-0",
         "select-none",
         active ? "bg-primary-200 text-primary-950" : "bg-transparent text-primary-950 [&:hover:not(:has(button:hover))]:bg-primary-200"
       ),
@@ -699,10 +773,48 @@ function SessionItemComponent({
               children: selected ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", className: "size-3", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "M2.5 6l2.5 2.5 4.5-5" }) }) : null
             }
           ) : null,
-          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-[450] line-clamp-1", children: [
-            isPinned ? /* @__PURE__ */ jsx("span", { className: "mr-1 text-xs text-primary-700", "aria-hidden": "true", children: "📌" }) : null,
-            label
-          ] }) })
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+              /* @__PURE__ */ jsx(
+                HugeiconsIcon,
+                {
+                  icon: KindIcon,
+                  size: 12,
+                  strokeWidth: 1.75,
+                  className: "text-primary-500/70 shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-[450] line-clamp-1 min-w-0", children: [
+                isPinned ? /* @__PURE__ */ jsx("span", { className: "mr-1 text-xs text-primary-700", "aria-hidden": "true", children: "📌" }) : null,
+                label
+              ] }),
+              session.kind === "subagent" ? isGenerating ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-label": "Session active",
+                  className: "size-1.5 rounded-full bg-green-500 shrink-0"
+                }
+              ) : subagentStatus === "success" ? /* @__PURE__ */ jsx(
+                HugeiconsIcon,
+                {
+                  icon: Tick01Icon,
+                  size: 12,
+                  strokeWidth: 1.8,
+                  className: "text-green-600/80 shrink-0"
+                }
+              ) : subagentStatus === "error" ? /* @__PURE__ */ jsx(
+                HugeiconsIcon,
+                {
+                  icon: Cancel01Icon,
+                  size: 12,
+                  strokeWidth: 1.8,
+                  className: "text-red-600/80 shrink-0"
+                }
+              ) : null : null
+            ] }),
+            subagentPreview ? /* @__PURE__ */ jsx("div", { className: "text-[11px] text-primary-600/80 line-clamp-1 mt-0.5 pl-[18px]", children: subagentPreview }) : null,
+            session.kind === "cron" && cronLastRun ? /* @__PURE__ */ jsx("div", { className: "text-[10px] text-primary-500/75 line-clamp-1 mt-0.5 pl-[18px] font-mono", children: formatRelativeTime(cronLastRun) }) : null
+          ] })
         ] }),
         selectionMode ? null : /* @__PURE__ */ jsxs(MenuRoot, { children: [
           /* @__PURE__ */ jsx(
@@ -801,6 +913,7 @@ function SessionItemComponent({
 }
 function areSessionItemsEqual(prev, next) {
   if (prev.active !== next.active) return false;
+  if (prev.isGenerating !== next.isGenerating) return false;
   if (prev.isPinned !== next.isPinned) return false;
   if (prev.selectionMode !== next.selectionMode) return false;
   if (prev.selected !== next.selected) return false;
@@ -811,7 +924,7 @@ function areSessionItemsEqual(prev, next) {
   if (prev.onDelete !== next.onDelete) return false;
   if (prev.onExport !== next.onExport) return false;
   if (prev.session === next.session) return true;
-  return prev.session.key === next.session.key && prev.session.friendlyId === next.session.friendlyId && prev.session.label === next.session.label && prev.session.title === next.session.title && prev.session.derivedTitle === next.session.derivedTitle && prev.session.updatedAt === next.session.updatedAt;
+  return prev.session.key === next.session.key && prev.session.friendlyId === next.session.friendlyId && prev.session.label === next.session.label && prev.session.title === next.session.title && prev.session.derivedTitle === next.session.derivedTitle && prev.session.updatedAt === next.session.updatedAt && prev.session.kind === next.session.kind && prev.session.status === next.session.status && prev.session.lastMessage === next.session.lastMessage;
 }
 const SessionItem = memo(SessionItemComponent, areSessionItemsEqual);
 const PINNED_SESSIONS_KEY = "opencami-pinned-sessions";
@@ -900,10 +1013,22 @@ function isSessionActive(session, activeFriendlyId, activeSessionKey) {
   }
   return session.friendlyId === activeFriendlyId;
 }
+function isStatusGenerating(status) {
+  if (!status) return false;
+  const normalized = status.toLowerCase();
+  return normalized.includes("running") || normalized.includes("active") || normalized.includes("stream") || normalized.includes("generat");
+}
+function isSessionGenerating(session, activeFriendlyId, activeSessionKey, isStreaming) {
+  if (isSessionActive(session, activeFriendlyId, activeSessionKey) && isStreaming) {
+    return true;
+  }
+  return isStatusGenerating(session.status);
+}
 const SidebarSessions = memo(function SidebarSessions2({
   sessions,
   activeFriendlyId,
   activeSessionKey,
+  isStreaming = false,
   defaultOpen = true,
   onSelect,
   onRename,
@@ -1053,6 +1178,7 @@ const SidebarSessions = memo(function SidebarSessions2({
             {
               session,
               active: isSessionActive(session, activeFriendlyId, activeSessionKey),
+              isGenerating: isSessionGenerating(session, activeFriendlyId, activeSessionKey, isStreaming),
               isPinned: false,
               selectionMode,
               selected: selectedSessionKeys.has(session.key),
@@ -1111,6 +1237,7 @@ const SidebarSessions = memo(function SidebarSessions2({
                   {
                     session,
                     active: isSessionActive(session, activeFriendlyId, activeSessionKey),
+                    isGenerating: isSessionGenerating(session, activeFriendlyId, activeSessionKey, isStreaming),
                     isPinned: true,
                     selectionMode,
                     selected: selectedSessionKeys.has(session.key),
@@ -1139,6 +1266,7 @@ const SidebarSessions = memo(function SidebarSessions2({
                     {
                       session,
                       active: isSessionActive(session, activeFriendlyId, activeSessionKey),
+                      isGenerating: isSessionGenerating(session, activeFriendlyId, activeSessionKey, isStreaming),
                       isPinned: false,
                       selectionMode,
                       selected: selectedSessionKeys.has(session.key),
@@ -1224,6 +1352,7 @@ const SidebarSessions = memo(function SidebarSessions2({
 function areSidebarSessionsEqual(prev, next) {
   if (prev.activeFriendlyId !== next.activeFriendlyId) return false;
   if (prev.activeSessionKey !== next.activeSessionKey) return false;
+  if (prev.isStreaming !== next.isStreaming) return false;
   if (prev.defaultOpen !== next.defaultOpen) return false;
   if (prev.onSelect !== next.onSelect) return false;
   if (prev.onRename !== next.onRename) return false;
@@ -1241,6 +1370,8 @@ function areSidebarSessionsEqual(prev, next) {
     if (prevSession.derivedTitle !== nextSession.derivedTitle) return false;
     if (prevSession.updatedAt !== nextSession.updatedAt) return false;
     if (prevSession.kind !== nextSession.kind) return false;
+    if (prevSession.status !== nextSession.status) return false;
+    if (prevSession.lastMessage !== nextSession.lastMessage) return false;
   }
   return true;
 }
@@ -1517,30 +1648,11 @@ function useRenameSession() {
   );
   return { renameSession, renaming, error };
 }
-function OpenCamiLogo({ className }) {
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("span", { className: "text-xl", children: "🦎" }) });
-}
-function OpenCamiText({ className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className,
-      style: {
-        background: "linear-gradient(90deg, #10b981, #14b8a6, #06b6d4, #8b5cf6, #ec4899)",
-        WebkitBackgroundClip: "text",
-        WebkitTextFillColor: "transparent",
-        backgroundClip: "text",
-        fontWeight: 600
-      },
-      children: "OpenCami"
-    }
-  );
-}
 const SettingsDialog = lazy(
-  () => import("./settings-dialog-CBj7njLM.js").then((m) => ({ default: m.SettingsDialog }))
+  () => import("./settings-dialog-BBQcU55J.js").then((m) => ({ default: m.SettingsDialog }))
 );
 const SessionExportDialog = lazy(
-  () => import("./session-export-dialog-D87uafPD.js").then((m) => ({
+  () => import("./session-export-dialog-DRVbC8Q-.js").then((m) => ({
     default: m.SessionExportDialog
   }))
 );
@@ -1548,6 +1660,7 @@ function ChatSidebarComponent({
   sessions,
   activeFriendlyId,
   activeSessionKey,
+  isStreaming = false,
   creatingSession,
   onCreateSession,
   isCollapsed,
@@ -1779,6 +1892,48 @@ function ChatSidebarComponent({
                     }
                   ) }),
                   isCollapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Files" })
+                ] }) }),
+                (() => {
+                  try {
+                    return localStorage.getItem("opencami-agent-manager") === "true";
+                  } catch {
+                    return false;
+                  }
+                })() && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      to: "/agents",
+                      className: cn(
+                        buttonVariants({ variant: "ghost", size: "sm" }),
+                        "w-full pl-1.5 justify-start"
+                      ),
+                      onClick: onSelectSession,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          HugeiconsIcon,
+                          {
+                            icon: AiBrain01Icon,
+                            size: 20,
+                            strokeWidth: 1.5,
+                            className: "min-w-5"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !isCollapsed && /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            initial: { opacity: 0 },
+                            animate: { opacity: 1 },
+                            exit: { opacity: 0 },
+                            transition,
+                            className: "overflow-hidden whitespace-nowrap",
+                            children: "Agents"
+                          }
+                        ) })
+                      ]
+                    }
+                  ) }),
+                  isCollapsed && /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Agents" })
                 ] }) })
               ]
             }
@@ -1837,6 +1992,7 @@ function ChatSidebarComponent({
                 sessions,
                 activeFriendlyId,
                 activeSessionKey,
+                isStreaming,
                 onSelect: onSelectSession,
                 onRename: handleOpenRename,
                 onDelete: handleOpenDelete,
@@ -1945,12 +2101,16 @@ function areSessionsEqual(prevSessions, nextSessions) {
     if (prev.title !== next.title) return false;
     if (prev.derivedTitle !== next.derivedTitle) return false;
     if (prev.updatedAt !== next.updatedAt) return false;
+    if (prev.kind !== next.kind) return false;
+    if (prev.status !== next.status) return false;
+    if (prev.lastMessage !== next.lastMessage) return false;
   }
   return true;
 }
 function areSidebarPropsEqual(prevProps, nextProps) {
   if (prevProps.activeFriendlyId !== nextProps.activeFriendlyId) return false;
   if (prevProps.activeSessionKey !== nextProps.activeSessionKey) return false;
+  if (prevProps.isStreaming !== nextProps.isStreaming) return false;
   if (prevProps.creatingSession !== nextProps.creatingSession) return false;
   if (prevProps.isCollapsed !== nextProps.isCollapsed) return false;
   if (!areSessionsEqual(prevProps.sessions, nextProps.sessions)) return false;
@@ -2352,6 +2512,57 @@ function MessageActionsBar({
     }
   );
 }
+function markdownHrefToFilePath(href) {
+  if (!href?.startsWith("openclaw-file://")) return null;
+  try {
+    return decodeURIComponent(href.slice("openclaw-file://".length));
+  } catch {
+    return null;
+  }
+}
+const EXTENSION_LANGUAGE_MAP = {
+  py: "python",
+  ts: "typescript",
+  js: "javascript",
+  jsx: "jsx",
+  tsx: "tsx",
+  json: "json",
+  md: "markdown",
+  yml: "yaml",
+  yaml: "yaml",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  html: "html",
+  css: "css",
+  sql: "sql",
+  xml: "xml",
+  toml: "toml",
+  rs: "rust",
+  go: "go",
+  java: "java",
+  c: "c",
+  cpp: "cpp",
+  cs: "csharp",
+  php: "php",
+  rb: "ruby",
+  graphql: "graphql",
+  diff: "diff",
+  patch: "diff",
+  env: "text"
+};
+function languageFromFilePath(path) {
+  if (!path) return "text";
+  const filename = path.split("/").pop() || "";
+  const lower = filename.toLowerCase();
+  if (lower === "dockerfile") return "dockerfile";
+  if (lower === "makefile") return "text";
+  const parts = lower.split(".");
+  const extension = parts.length > 1 ? parts.pop() || "" : "";
+  const mapped = EXTENSION_LANGUAGE_MAP[extension] || extension || "text";
+  return resolveLanguage(mapped);
+}
+const INLINE_PREVIEW_MAX_BYTES = 100 * 1024;
 function parseMarkdownIntoBlocks(markdown) {
   const tokens = marked.lexer(markdown);
   return tokens.map((token) => token.raw);
@@ -2361,7 +2572,7 @@ function extractLanguage(className) {
   const match = className.match(/language-(\w+)/);
   return match ? match[1] : "text";
 }
-const INITIAL_COMPONENTS = {
+const BASE_COMPONENTS = {
   code: function CodeComponent({ className, children }) {
     const isInline = !className?.includes("language-");
     if (isInline) {
@@ -2401,18 +2612,6 @@ const INITIAL_COMPONENTS = {
   li: function LiComponent({ children }) {
     return /* @__PURE__ */ jsx("li", { className: "leading-relaxed", children });
   },
-  a: function AComponent({ children, href }) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        className: "text-primary-950 underline decoration-primary-300 underline-offset-4 transition-colors hover:text-primary-950 hover:decoration-primary-500",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children
-      }
-    );
-  },
   blockquote: function BlockquoteComponent({ children }) {
     return /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-primary-300 pl-4 text-primary-900 italic", children });
   },
@@ -2444,10 +2643,56 @@ const INITIAL_COMPONENTS = {
     return /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-primary-950", children });
   }
 };
+function createDefaultComponents(onOpenFilePreview, inlineFilePreviewEnabled) {
+  const FILE_PATH_RE = /^(?:~\/[\w.\-\/]+|\/(?:[\w.\-]+\/)+[\w.\-]+)$/;
+  return {
+    ...BASE_COMPONENTS,
+    a: function AComponent({ children, href }) {
+      const filePath = markdownHrefToFilePath(href);
+      if (inlineFilePreviewEnabled && filePath) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onOpenFilePreview(filePath),
+            className: "font-mono text-primary-900 underline decoration-primary-300 underline-offset-4 hover:decoration-primary-600 cursor-pointer",
+            children
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: "text-primary-950 underline decoration-primary-300 underline-offset-4 transition-colors hover:text-primary-950 hover:decoration-primary-500",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children
+        }
+      );
+    },
+    code: function InlineCodeComponent({ children, className }) {
+      if (className) return /* @__PURE__ */ jsx("code", { className, children });
+      const text = typeof children === "string" ? children : Array.isArray(children) ? children.filter((c) => typeof c === "string").join("") : String(children ?? "");
+      if (inlineFilePreviewEnabled && text && FILE_PATH_RE.test(text)) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onOpenFilePreview(text),
+            className: "font-mono text-sm bg-primary-100 rounded px-1.5 py-0.5 text-primary-900 underline decoration-primary-300 underline-offset-4 hover:decoration-primary-600 cursor-pointer",
+            children
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx("code", { className: "font-mono text-sm bg-primary-100 rounded px-1.5 py-0.5 text-primary-900", children });
+    }
+  };
+}
 const MemoizedMarkdownBlock = memo(
   function MarkdownBlock({
     content,
-    components = INITIAL_COMPONENTS
+    components
   }) {
     return /* @__PURE__ */ jsx(
       ReactMarkdown,
@@ -2463,23 +2708,132 @@ const MemoizedMarkdownBlock = memo(
   }
 );
 MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+function fileErrorMessageFromResponse(status, code) {
+  if (code === "NOT_FOUND" || status === 404) return "File not found";
+  if (code === "UNSUPPORTED_TYPE") return "Binary file";
+  if (code === "FILE_TOO_LARGE" || status === 413) return "File too large";
+  return "Failed to load file preview";
+}
 function MarkdownComponent({
   children,
   id,
   className,
-  components = INITIAL_COMPONENTS
+  components
 }) {
   const generatedId = useId();
   const blockId = id ?? generatedId;
   const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children]);
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), children: blocks.map((block, index) => /* @__PURE__ */ jsx(
-    MemoizedMarkdownBlock,
-    {
-      content: block,
-      components
-    },
-    `${blockId}-block-${index}`
-  )) });
+  const [filePreview, setFilePreview] = useState({ status: "idle" });
+  const inlineFilePreviewEnabled = useChatSettingsStore(
+    (state) => state.settings.inlineFilePreview
+  );
+  const defaultComponents = useMemo(
+    () => createDefaultComponents(
+      (path) => setFilePreview({ status: "loading", path }),
+      inlineFilePreviewEnabled
+    ),
+    [inlineFilePreviewEnabled]
+  );
+  const mergedComponents = useMemo(
+    () => ({ ...defaultComponents, ...components || {} }),
+    [defaultComponents, components]
+  );
+  useEffect(() => {
+    if (filePreview.status !== "loading") return;
+    const path = filePreview.path;
+    const controller = new AbortController();
+    fetch(`/api/files/read?path=${encodeURIComponent(path)}`, {
+      signal: controller.signal
+    }).then(async (response) => {
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        const error = fileErrorMessageFromResponse(response.status, payload.code);
+        setFilePreview({ status: "error", path, message: error });
+        return;
+      }
+      const size = Number(payload.size ?? 0);
+      if (size > INLINE_PREVIEW_MAX_BYTES) {
+        setFilePreview({ status: "error", path, message: "File too large" });
+        return;
+      }
+      const content = String(payload.content ?? "");
+      setFilePreview({
+        status: "success",
+        path,
+        content,
+        language: languageFromFilePath(path)
+      });
+    }).catch(() => {
+      if (controller.signal.aborted) return;
+      setFilePreview({ status: "error", path, message: "Failed to load file preview" });
+    });
+    return () => controller.abort();
+  }, [filePreview]);
+  const previewOpen = filePreview.status !== "idle";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), children: blocks.map((block, index) => /* @__PURE__ */ jsx(
+      MemoizedMarkdownBlock,
+      {
+        content: block,
+        components: mergedComponents
+      },
+      `${blockId}-block-${index}`
+    )) }),
+    /* @__PURE__ */ jsx(
+      DialogRoot,
+      {
+        open: previewOpen,
+        onOpenChange: (open) => {
+          if (!open) setFilePreview({ status: "idle" });
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[min(1000px,95vw)] max-h-[88vh] overflow-hidden p-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "border-b border-primary-200 px-4 py-3 flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: "File Preview" }),
+              filePreview.status !== "idle" && /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-600 font-mono truncate", children: filePreview.path })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              filePreview.status !== "idle" && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: /* @__PURE__ */ jsx(
+                Link,
+                {
+                  to: "/files",
+                  onClick: () => {
+                    let p = filePreview.status !== "idle" ? filePreview.path : "";
+                    if (p) {
+                      const prefixes = ["/root/clawd/", "/root/"];
+                      for (const prefix of prefixes) {
+                        if (p.startsWith(prefix)) {
+                          p = "/" + p.slice(prefix.length);
+                          break;
+                        }
+                      }
+                      const dir = p.includes("/") ? p.slice(0, p.lastIndexOf("/")) || "/" : "/";
+                      useFileExplorerState.getState().navigateTo(dir);
+                    }
+                    setFilePreview({ status: "idle" });
+                  },
+                  children: "Open in File Explorer"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(DialogClose, { children: "Close" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-4 overflow-auto max-h-[calc(88vh-72px)]", children: [
+            filePreview.status === "loading" && /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-600", children: "Loading preview…" }),
+            filePreview.status === "error" && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: filePreview.message }),
+            filePreview.status === "success" && /* @__PURE__ */ jsx(
+              CodeBlock,
+              {
+                content: filePreview.content,
+                language: filePreview.language,
+                className: "w-full"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
 }
 const Markdown = memo(MarkdownComponent);
 Markdown.displayName = "Markdown";
@@ -2544,27 +2898,25 @@ function Thinking({ content }) {
 }
 function Tool({ toolPart, defaultOpen = false }) {
   const { state, input, output, toolCallId } = toolPart;
-  const formatValue = (value) => {
-    if (value === null) return "null";
-    if (value === void 0) return "undefined";
-    if (typeof value === "string") {
+  const serialize = (value, maxLength = 3200) => {
+    const normalized = value === void 0 ? "undefined" : value;
+    let raw;
+    if (typeof normalized === "string") {
       try {
-        const parsed = JSON.parse(value);
-        return parsed;
+        raw = JSON.stringify(JSON.parse(normalized), null, 2);
       } catch {
-        return value;
+        raw = normalized;
       }
+    } else {
+      raw = JSON.stringify(normalized, null, 2);
     }
-    return value;
-  };
-  const renderValue = (value) => {
-    const formatted = formatValue(value);
-    if (typeof formatted === "object" && formatted !== null) {
-      return /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-all font-mono text-xs leading-relaxed", children: JSON.stringify(formatted, null, 2) });
-    }
-    return /* @__PURE__ */ jsx("span", { className: "break-all", children: String(formatted) });
+    if (raw.length <= maxLength) return raw;
+    return `${raw.slice(0, maxLength).trimEnd()}
+…[truncated]`;
   };
-  return /* @__PURE__ */ jsx("div", { className: "inline-flex flex-col", children: /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, children: [
+  const statusIcon = state === "output-error" ? Cancel01Icon : state === "output-available" ? Tick01Icon : Loading03Icon;
+  const statusClassName = state === "output-error" ? "text-red-600/80" : state === "output-available" ? "text-green-600/80" : "text-primary-500/80";
+  return /* @__PURE__ */ jsx("div", { className: "inline-flex flex-col w-full", children: /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, children: [
     /* @__PURE__ */ jsxs(
       CollapsibleTrigger,
       {
@@ -2572,10 +2924,19 @@ function Tool({ toolPart, defaultOpen = false }) {
           Button,
           {
             variant: "ghost",
-            className: "h-auto gap-1.5 px-1.5 py-0.5 -mx-2"
+            className: "h-auto w-full justify-start gap-1.5 rounded-md px-1.5 py-1"
           }
         ),
         children: [
+          /* @__PURE__ */ jsx(
+            HugeiconsIcon,
+            {
+              icon: statusIcon,
+              size: 12,
+              strokeWidth: 1.7,
+              className: statusClassName
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-primary-900", children: toolPart.type }),
           /* @__PURE__ */ jsx(
             HugeiconsIcon,
@@ -2583,41 +2944,130 @@ function Tool({ toolPart, defaultOpen = false }) {
               icon: ArrowDown01Icon,
               size: 14,
               strokeWidth: 1.5,
-              className: "text-primary-900 transition-transform duration-150 group-data-panel-open:rotate-180"
+              className: "ml-auto text-primary-700/80 transition-transform duration-150 group-data-panel-open:rotate-180"
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx(CollapsiblePanel, { className: "mt-1", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 bg-primary-100 p-2 border border-primary-200", children: [
-      input && Object.keys(input).length > 0 && /* @__PURE__ */ jsxs("div", { className: "border border-primary-200 bg-primary-50 p-3", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-primary-600 mb-2 text-xs font-medium", children: "Input" }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-auto space-y-2 font-mono text-xs text-primary-800", children: Object.entries(input).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "break-all", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-primary-500", children: [
-            key,
-            ":"
-          ] }),
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "text-primary-700", children: renderValue(value) })
-        ] }, key)) })
+    /* @__PURE__ */ jsx(CollapsiblePanel, { className: "mt-1", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border border-primary-200 bg-primary-100/70 p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded border border-primary-200 bg-primary-50 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-primary-600", children: "Tool" }),
+        /* @__PURE__ */ jsx("div", { className: "font-mono text-xs text-primary-800 break-all", children: toolPart.type })
+      ] }),
+      input && Object.keys(input).length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded border border-primary-200 bg-primary-50 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-1 text-[11px] font-medium text-primary-600", children: "Input" }),
+        /* @__PURE__ */ jsx("pre", { className: "max-h-44 overflow-auto whitespace-pre-wrap break-all font-mono text-xs leading-relaxed text-primary-800", children: serialize(input) })
       ] }),
-      output && /* @__PURE__ */ jsxs("div", { className: "border border-primary-200 bg-primary-50 p-3", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-primary-600 mb-2 text-xs font-medium", children: "Output" }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-auto font-mono text-xs text-primary-800", children: renderValue(output) })
+      output !== void 0 && output !== null && /* @__PURE__ */ jsxs("div", { className: "rounded border border-primary-200 bg-primary-50 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-1 text-[11px] font-medium text-primary-600", children: "Output" }),
+        /* @__PURE__ */ jsx("pre", { className: "max-h-44 overflow-auto whitespace-pre-wrap break-all font-mono text-xs leading-relaxed text-primary-800", children: serialize(output) })
       ] }),
-      state === "output-error" && toolPart.errorText && /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-red-50 p-2", children: [
-        /* @__PURE__ */ jsx("h4", { className: "mb-1 text-xs font-medium text-red-600", children: "Error" }),
+      state === "output-error" && toolPart.errorText && /* @__PURE__ */ jsxs("div", { className: "rounded border border-red-200 bg-red-50 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-1 text-[11px] font-medium text-red-600", children: "Error" }),
         /* @__PURE__ */ jsx("div", { className: "text-xs text-red-700", children: toolPart.errorText })
       ] }),
-      state === "input-streaming" && /* @__PURE__ */ jsx("div", { className: "text-primary-500 text-xs", children: "Processing..." }),
-      toolCallId && /* @__PURE__ */ jsx("div", { className: "text-primary-400 text-xs", children: /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums", children: [
+      toolCallId && /* @__PURE__ */ jsxs("div", { className: "text-[11px] text-primary-500/80 font-mono tabular-nums", children: [
         "ID: ",
         toolCallId.slice(0, 16),
         "..."
-      ] }) })
+      ] })
     ] }) })
   ] }) });
 }
+function getDomain(url) {
+  try {
+    return new URL(url).hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+}
+function FaviconCircle({ domain }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-center w-5 h-5 rounded-full bg-white dark:bg-zinc-800 border border-cyan-500/20 overflow-hidden",
+      title: domain,
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: `https://www.google.com/s2/favicons?domain=${domain}&sz=32`,
+          alt: "",
+          className: "w-4 h-4 object-contain",
+          loading: "lazy",
+          onError: (e) => {
+            const target = e.target;
+            target.style.display = "none";
+            const parent = target.parentElement;
+            if (parent) {
+              parent.textContent = domain.charAt(0).toUpperCase();
+              parent.classList.add("text-[10px]", "font-medium", "text-cyan-400");
+            }
+          }
+        }
+      )
+    }
+  );
+}
+function SearchSourcesBadge({ sources }) {
+  const [expanded, setExpanded] = useState(false);
+  if (!sources.length) return null;
+  const uniqueDomains = [...new Set(sources.map((s) => getDomain(s.url)))];
+  return /* @__PURE__ */ jsxs("div", { className: "mt-2 w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: cn(
+          "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs",
+          "bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30",
+          "text-cyan-300 transition-colors"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Search01Icon, size: 14 }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sources" }),
+          /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded-full bg-cyan-500/20 text-cyan-400 font-semibold", children: sources.length }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 ml-1", children: [
+            uniqueDomains.slice(0, 3).map((domain) => /* @__PURE__ */ jsx(FaviconCircle, { domain }, domain)),
+            uniqueDomains.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-cyan-500/70 text-[10px] ml-0.5", children: [
+              "+",
+              uniqueDomains.length - 3
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            HugeiconsIcon,
+            {
+              icon: ArrowRight01Icon,
+              size: 12,
+              className: cn("transition-transform", expanded && "rotate-90")
+            }
+          )
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-lg border border-cyan-500/20 bg-cyan-500/5 max-h-80 overflow-y-auto", children: sources.map((source, i) => {
+      const domain = getDomain(source.url);
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: source.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "flex items-start gap-2 p-2.5 border-b border-cyan-500/10 last:border-b-0 hover:bg-cyan-500/5 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(FaviconCircle, { domain }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-primary-900 hover:underline line-clamp-1", children: source.title || domain }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: domain }),
+              source.snippet && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/80 line-clamp-2 mt-0.5", children: source.snippet })
+            ] })
+          ]
+        },
+        `${source.url}-${i}`
+      );
+    }) })
+  ] });
+}
 function mapToolCallToToolPart(toolCall, resultMessage) {
   const hasResult = resultMessage !== void 0;
   const isError = resultMessage?.isError ?? false;
@@ -2633,11 +3083,13 @@ function mapToolCallToToolPart(toolCall, resultMessage) {
   if (isError && resultMessage?.content?.[0]?.type === "text") {
     errorText = resultMessage.content[0].text || "Unknown error";
   }
+  const outputText = resultMessage?.content?.map((part) => part.type === "text" ? String(part.text ?? "") : "").join("").trim();
+  const output = resultMessage?.details ?? (outputText && outputText.length > 0 ? outputText : void 0);
   return {
     type: toolCall.name || "unknown",
     state,
     input: toolCall.arguments,
-    output: resultMessage?.details,
+    output,
     toolCallId: toolCall.id,
     errorText
   };
@@ -2716,6 +3168,8 @@ function MessageItemComponent({
   toolResultsByCallId,
   forceActionsVisible = false,
   isStreaming = false,
+  isLastAssistant = false,
+  aggregatedSearchSources,
   wrapperRef,
   wrapperClassName,
   wrapperScrollMarginTop
@@ -2729,6 +3183,7 @@ function MessageItemComponent({
   const timestamp = getMessageTimestamp(message);
   const toolCalls = role === "assistant" ? getToolCallsFromMessage(message) : [];
   const hasToolCalls = toolCalls.length > 0;
+  const searchSources = isLastAssistant && !isStreaming && settings.showSearchSources && aggregatedSearchSources ? aggregatedSearchSources : [];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2783,6 +3238,7 @@ function MessageItemComponent({
             toolCall.id || toolCall.name
           );
         }) }),
+        searchSources.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-full max-w-[900px]", children: /* @__PURE__ */ jsx(SearchSourcesBadge, { sources: searchSources }) }),
         !hasToolCalls && /* @__PURE__ */ jsx(
           MessageActionsBar,
           {
@@ -2801,6 +3257,8 @@ function areMessagesEqual(prevProps, nextProps) {
     return false;
   }
   if (prevProps.isStreaming !== nextProps.isStreaming) return false;
+  if (prevProps.isLastAssistant !== nextProps.isLastAssistant) return false;
+  if (prevProps.aggregatedSearchSources !== nextProps.aggregatedSearchSources) return false;
   if (prevProps.wrapperClassName !== nextProps.wrapperClassName) return false;
   if (prevProps.wrapperRef !== nextProps.wrapperRef) return false;
   if (prevProps.wrapperScrollMarginTop !== nextProps.wrapperScrollMarginTop) {
@@ -3473,6 +3931,75 @@ function ChatMessageListComponent({
     }
     return map;
   }, [messages]);
+  const aggregatedSearchSources = useMemo(() => {
+    const strip = (s) => {
+      if (!s) return "";
+      return s.replace(/SECURITY NOTICE:[\s\S]*?<<<EXTERNAL_UNTRUSTED_CONTENT>>>/g, "").replace(/<<<\/?EXTERNAL_UNTRUSTED_CONTENT>>>/g, "").replace(/<<<\/?END_EXTERNAL_UNTRUSTED_CONTENT>>>/g, "").replace(/Source: Web (?:Search|Fetch)\n---/g, "").replace(/\n{2,}/g, "\n").trim();
+    };
+    const extractResults = (text, sources2, seenUrls2) => {
+      try {
+        const parsed = JSON.parse(text);
+        const items = Array.isArray(parsed) ? parsed : parsed?.results ?? parsed?.web?.results ?? [];
+        if (!Array.isArray(items)) return false;
+        let found = false;
+        for (const item of items) {
+          if (item?.url && item?.title && !seenUrls2.has(item.url)) {
+            seenUrls2.add(item.url);
+            sources2.push({
+              title: strip(item.title),
+              url: item.url,
+              snippet: strip(item.description || item.snippet || item.content || "")
+            });
+            found = true;
+          }
+        }
+        return found;
+      } catch {
+        return false;
+      }
+    };
+    const sources = [];
+    const seenUrls = /* @__PURE__ */ new Set();
+    for (const msg of displayMessages) {
+      if (msg.role !== "assistant") continue;
+      const toolCalls = getToolCallsFromMessage(msg);
+      for (const tc of toolCalls) {
+        if (!tc.id) continue;
+        const isSearch = tc.name === "web_search";
+        const isFetch = tc.name === "web_fetch";
+        const isExec = tc.name === "exec";
+        if (!isSearch && !isFetch && !isExec) continue;
+        const result = toolResultsByCallId.get(tc.id);
+        if (!result) continue;
+        const text = result.content?.map((p) => p.type === "text" ? String(p.text ?? "") : "").join("").trim();
+        if (!text) continue;
+        if (isSearch || isExec) {
+          if (isExec) {
+            if (!text.includes('"results"') || !text.includes('"url"')) continue;
+          }
+          let jsonText = text;
+          const jsonStart = text.indexOf("{");
+          if (jsonStart > 0) jsonText = text.slice(jsonStart);
+          const jsonEnd = jsonText.lastIndexOf("}");
+          if (jsonEnd > 0) jsonText = jsonText.slice(0, jsonEnd + 1);
+          extractResults(jsonText, sources, seenUrls);
+        } else if (isFetch) {
+          const url = tc.arguments?.url;
+          if (url && !seenUrls.has(url)) {
+            seenUrls.add(url);
+            let title;
+            try {
+              title = new URL(url).hostname;
+            } catch {
+              title = url;
+            }
+            sources.push({ title, url });
+          }
+        }
+      }
+    }
+    return sources;
+  }, [displayMessages, toolResultsByCallId]);
   const lastAssistantIndex = displayMessages.map((message, index) => ({ message, index })).filter(({ message }) => message.role !== "user").map(({ index }) => index).pop();
   const lastUserIndex = displayMessages.map((message, index) => ({ message, index })).filter(({ message }) => message.role === "user").map(({ index }) => index).pop();
   const showTypingIndicator = waitingForResponse && (typeof lastUserIndex !== "number" || typeof lastAssistantIndex !== "number" || lastAssistantIndex < lastUserIndex);
@@ -3480,7 +4007,7 @@ function ChatMessageListComponent({
   const hasGroup = pinToTop && groupStartIndex >= 0;
   const lastAssistantMessage = typeof lastAssistantIndex === "number" ? displayMessages[lastAssistantIndex] : void 0;
   const lastAssistantText = lastAssistantMessage ? textFromMessage(lastAssistantMessage) : "";
-  const showFollowUps = !waitingForResponse && lastAssistantText.length > 0 && onFollowUpClick !== void 0 && (typeof lastUserIndex !== "number" || typeof lastAssistantIndex !== "number" || lastAssistantIndex > lastUserIndex);
+  const showFollowUps = !waitingForResponse && !isStreaming && lastAssistantText.length > 0 && onFollowUpClick !== void 0 && (typeof lastUserIndex !== "number" || typeof lastAssistantIndex !== "number" || lastAssistantIndex > lastUserIndex);
   useLayoutEffect(() => {
     if (loading) return;
     if (pinToTop) {
@@ -3512,7 +4039,7 @@ function ChatMessageListComponent({
       notice && noticePosition === "start" ? notice : null,
       empty && !notice ? emptyState ?? /* @__PURE__ */ jsx("div", { "aria-hidden": true }) : hasGroup ? /* @__PURE__ */ jsxs(Fragment, { children: [
         displayMessages.slice(0, groupStartIndex).map((chatMessage, index) => {
-          const messageKey = chatMessage.__optimisticId || chatMessage.id || index;
+          const messageKey = index;
           const forceActionsVisible = typeof lastAssistantIndex === "number" && index === lastAssistantIndex;
           const isLastAssistant = typeof lastAssistantIndex === "number" && index === lastAssistantIndex;
           const hasToolCalls = chatMessage.role === "assistant" && getToolCallsFromMessage(chatMessage).length > 0;
@@ -3522,7 +4049,9 @@ function ChatMessageListComponent({
               message: chatMessage,
               toolResultsByCallId: hasToolCalls ? toolResultsByCallId : void 0,
               forceActionsVisible,
-              isStreaming: isLastAssistant && isStreaming
+              isStreaming: isLastAssistant && isStreaming,
+              isLastAssistant,
+              aggregatedSearchSources: isLastAssistant ? aggregatedSearchSources : void 0
             },
             messageKey
           );
@@ -3535,7 +4064,7 @@ function ChatMessageListComponent({
             children: [
               displayMessages.slice(groupStartIndex).map((chatMessage, index) => {
                 const realIndex = groupStartIndex + index;
-                const messageKey = chatMessage.__optimisticId || chatMessage.id || realIndex;
+                const messageKey = realIndex;
                 const forceActionsVisible = typeof lastAssistantIndex === "number" && realIndex === lastAssistantIndex;
                 const isLastAssistant = typeof lastAssistantIndex === "number" && realIndex === lastAssistantIndex;
                 const wrapperRef = realIndex === lastUserIndex ? lastUserRef : void 0;
@@ -3549,6 +4078,8 @@ function ChatMessageListComponent({
                     toolResultsByCallId: hasToolCalls ? toolResultsByCallId : void 0,
                     forceActionsVisible,
                     isStreaming: isLastAssistant && isStreaming,
+                    isLastAssistant,
+                    aggregatedSearchSources: isLastAssistant ? aggregatedSearchSources : void 0,
                     wrapperRef,
                     wrapperClassName,
                     wrapperScrollMarginTop
@@ -3570,7 +4101,7 @@ function ChatMessageListComponent({
         )
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         displayMessages.map((chatMessage, index) => {
-          const messageKey = chatMessage.__optimisticId || chatMessage.id || index;
+          const messageKey = index;
           const forceActionsVisible = typeof lastAssistantIndex === "number" && index === lastAssistantIndex;
           const isLastAssistant = typeof lastAssistantIndex === "number" && index === lastAssistantIndex;
           const hasToolCalls = chatMessage.role === "assistant" && getToolCallsFromMessage(chatMessage).length > 0;
@@ -3580,7 +4111,9 @@ function ChatMessageListComponent({
               message: chatMessage,
               toolResultsByCallId: hasToolCalls ? toolResultsByCallId : void 0,
               forceActionsVisible,
-              isStreaming: isLastAssistant && isStreaming
+              isStreaming: isLastAssistant && isStreaming,
+              isLastAssistant,
+              aggregatedSearchSources: isLastAssistant ? aggregatedSearchSources : void 0
             },
             messageKey
           );
@@ -4256,6 +4789,49 @@ async function compressImage(file) {
 function isAcceptedImage(file) {
   return ACCEPTED_IMAGE_TYPES.includes(file.type);
 }
+async function createAttachmentFromFile(file) {
+  const id = crypto.randomUUID();
+  if (!isAcceptedImage(file)) {
+    return {
+      id,
+      file,
+      preview: null,
+      type: "image",
+      base64: null,
+      error: "Unsupported file type. Please use PNG, JPG, GIF, or WebP images."
+    };
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    return {
+      id,
+      file,
+      preview: null,
+      type: "image",
+      base64: null,
+      error: "Image is too large. Maximum size is 10MB."
+    };
+  }
+  try {
+    const base64 = await compressImage(file);
+    const preview = URL.createObjectURL(file);
+    return {
+      id,
+      file,
+      preview,
+      type: "image",
+      base64
+    };
+  } catch (err) {
+    return {
+      id,
+      file,
+      preview: null,
+      type: "image",
+      base64: null,
+      error: err instanceof Error ? err.message : "Failed to process image"
+    };
+  }
+}
 function AttachmentButton({
   onFileSelect,
   disabled = false,
@@ -4270,49 +4846,8 @@ function AttachmentButton({
       const file = event.target.files?.[0];
       if (!file) return;
       event.target.value = "";
-      const id = crypto.randomUUID();
-      if (!isAcceptedImage(file)) {
-        onFileSelect({
-          id,
-          file,
-          preview: null,
-          type: "image",
-          base64: null,
-          error: "Unsupported file type. Please use PNG, JPG, GIF, or WebP images."
-        });
-        return;
-      }
-      if (file.size > MAX_FILE_SIZE) {
-        onFileSelect({
-          id,
-          file,
-          preview: null,
-          type: "image",
-          base64: null,
-          error: "Image is too large. Maximum size is 10MB."
-        });
-        return;
-      }
-      try {
-        const base64 = await compressImage(file);
-        const preview = URL.createObjectURL(file);
-        onFileSelect({
-          id,
-          file,
-          preview,
-          type: "image",
-          base64
-        });
-      } catch (err) {
-        onFileSelect({
-          id,
-          file,
-          preview: null,
-          type: "image",
-          base64: null,
-          error: err instanceof Error ? err.message : "Failed to process image"
-        });
-      }
+      const attachment = await createAttachmentFromFile(file);
+      onFileSelect(attachment);
     },
     [onFileSelect]
   );
@@ -4537,6 +5072,14 @@ function ChatComposerComponent({
   const [attachments, setAttachments] = useState([]);
   const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
   const [slashMenuDismissed, setSlashMenuDismissed] = useState(false);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const [sttLoading, setSttLoading] = useState(false);
+  const mediaRecorderRef = useRef(null);
+  const recordingChunksRef = useRef([]);
+  const recordingTimerRef = useRef(null);
+  const webSpeechRef = useRef(null);
   const promptRef = useRef(null);
   const showSlashCommands = useMemo(() => /^\/\S*$/.test(value) && !slashMenuDismissed, [value, slashMenuDismissed]);
   const slashQuery = useMemo(() => showSlashCommands ? value.slice(1).toLowerCase() : "", [showSlashCommands, value]);
@@ -4577,6 +5120,30 @@ function ChatComposerComponent({
   const handleRemoveAttachment = useCallback((id) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id));
   }, []);
+  const handleDragOver = useCallback((event) => {
+    const hasFiles = Array.from(event.dataTransfer.types).includes("Files");
+    if (!hasFiles) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = useCallback((event) => {
+    event.preventDefault();
+    const nextTarget = event.relatedTarget;
+    if (nextTarget && event.currentTarget.contains(nextTarget)) return;
+    setIsDragActive(false);
+  }, []);
+  const handleDrop = useCallback(async (event) => {
+    event.preventDefault();
+    setIsDragActive(false);
+    const files = Array.from(event.dataTransfer.files ?? []);
+    if (files.length === 0) return;
+    const imageFiles = files.filter((file) => isAcceptedImage(file));
+    if (imageFiles.length === 0) return;
+    const newAttachments = await Promise.all(imageFiles.map((file) => createAttachmentFromFile(file)));
+    setAttachments((prev) => [...prev, ...newAttachments]);
+    focusPrompt();
+  }, [focusPrompt]);
   const setComposerValue = useCallback(
     (nextValue) => {
       setValue(nextValue);
@@ -4661,75 +5228,252 @@ function ChatComposerComponent({
     },
     [showSlashCommands, filteredSlashCommands, selectedCommandIndex, selectSlashCommand]
   );
+  useEffect(() => {
+    return () => {
+      if (recordingTimerRef.current) clearInterval(recordingTimerRef.current);
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+        mediaRecorderRef.current.stop();
+      }
+      if (webSpeechRef.current) webSpeechRef.current.abort();
+    };
+  }, []);
+  const getSttProvider = useCallback(() => {
+    if (typeof window === "undefined") return "auto";
+    try {
+      return localStorage.getItem("opencami-stt-provider") || "auto";
+    } catch {
+      return "auto";
+    }
+  }, []);
+  const stopRecording = useCallback(() => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+    if (webSpeechRef.current) {
+      webSpeechRef.current.stop();
+    }
+    if (recordingTimerRef.current) {
+      clearInterval(recordingTimerRef.current);
+      recordingTimerRef.current = null;
+    }
+    setIsRecording(false);
+    setRecordingTime(0);
+  }, []);
+  const startRecording = useCallback(async () => {
+    const provider = getSttProvider();
+    if (provider === "browser") {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) {
+        alert("Web Speech API is not supported in this browser.");
+        return;
+      }
+      const recognition = new SpeechRecognition();
+      recognition.continuous = true;
+      recognition.interimResults = false;
+      recognition.lang = navigator.language || "en-US";
+      webSpeechRef.current = recognition;
+      setIsRecording(true);
+      setRecordingTime(0);
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingTime((t) => {
+          if (t >= 119) {
+            stopRecording();
+            return 0;
+          }
+          return t + 1;
+        });
+      }, 1e3);
+      let transcript = "";
+      recognition.onresult = (event) => {
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          if (event.results[i].isFinal) {
+            transcript += event.results[i][0].transcript;
+          }
+        }
+      };
+      recognition.onend = () => {
+        setIsRecording(false);
+        setRecordingTime(0);
+        if (recordingTimerRef.current) clearInterval(recordingTimerRef.current);
+        if (transcript.trim()) {
+          setValue((prev) => prev + (prev ? " " : "") + transcript.trim());
+          focusPrompt();
+        }
+      };
+      recognition.onerror = () => {
+        setIsRecording(false);
+        setRecordingTime(0);
+        if (recordingTimerRef.current) clearInterval(recordingTimerRef.current);
+      };
+      recognition.start();
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mimeType = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
+      const recorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorderRef.current = recorder;
+      recordingChunksRef.current = [];
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) recordingChunksRef.current.push(e.data);
+      };
+      recorder.onstop = async () => {
+        stream.getTracks().forEach((t) => t.stop());
+        const audioBlob = new Blob(recordingChunksRef.current, { type: mimeType });
+        if (audioBlob.size === 0) return;
+        setSttLoading(true);
+        try {
+          const formData = new FormData();
+          formData.append("audio", audioBlob, `recording.${mimeType === "audio/webm" ? "webm" : "mp4"}`);
+          if (provider !== "auto") formData.append("provider", provider);
+          const res = await fetch("/api/stt", { method: "POST", body: formData });
+          const data = await res.json();
+          if (data.ok && data.text) {
+            setValue((prev) => prev + (prev ? " " : "") + data.text);
+            focusPrompt();
+          } else if (!data.ok) {
+            console.warn("STT failed:", data.error);
+            alert(data.error || "Speech-to-text failed. Try the Browser provider in Settings.");
+          }
+        } catch (err) {
+          console.warn("STT request failed:", err);
+          alert("Could not reach speech-to-text service.");
+        } finally {
+          setSttLoading(false);
+        }
+      };
+      setIsRecording(true);
+      setRecordingTime(0);
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingTime((t) => {
+          if (t >= 119) {
+            stopRecording();
+            return 0;
+          }
+          return t + 1;
+        });
+      }, 1e3);
+      recorder.start();
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (msg.includes("NotAllowedError") || msg.includes("Permission")) {
+        try {
+          const status = await navigator.permissions.query({ name: "microphone" });
+          if (status.state === "denied") {
+            alert("Microphone access is blocked. Please enable it in your browser/app settings.");
+          } else {
+            alert("Microphone permission was not granted. Please try again and allow access when prompted.");
+          }
+        } catch {
+          alert("Could not access microphone. Please check your browser settings and allow microphone access for this site.");
+        }
+      } else {
+        alert("Could not access microphone: " + msg);
+      }
+    }
+  }, [getSttProvider, stopRecording, focusPrompt]);
+  const handleMicClick = useCallback(() => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  }, [isRecording, stopRecording, startRecording]);
   const validAttachments = attachments.filter((a) => !a.error && a.base64);
   const submitDisabled = disabled || value.trim().length === 0 && validAttachments.length === 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "mx-auto w-full max-w-full px-2 md:px-5 sm:max-w-[768px] sm:min-w-[400px] relative pb-1 md:pb-3",
       ref: wrapperRef,
-      children: /* @__PURE__ */ jsxs(
-        PromptInput,
-        {
-          value,
-          onValueChange: handleValueChange,
-          onSubmit: handleSubmit,
-          isLoading,
-          disabled,
-          children: [
-            /* @__PURE__ */ jsx(
-              AttachmentPreviewList,
-              {
-                attachments,
-                onRemove: handleRemoveAttachment
-              }
-            ),
-            showSlashCommands && filteredSlashCommands.length > 0 && /* @__PURE__ */ jsx(
-              SlashCommandMenu,
-              {
-                commands: filteredSlashCommands,
-                selectedIndex: Math.min(selectedCommandIndex, filteredSlashCommands.length - 1),
-                onSelect: selectSlashCommand
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              PromptInputTextarea,
-              {
-                placeholder: "Type a message…",
-                inputRef: setPromptRef,
-                onKeyDown: handleComposerKeyDown
-              }
-            ),
-            /* @__PURE__ */ jsxs(PromptInputActions, { className: "justify-between px-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(ModelSelector, { onModelChange: setSelectedModel }),
-                /* @__PURE__ */ jsx(PersonaPicker, { onSelect: handlePersonaSelect }),
-                /* @__PURE__ */ jsx(CommandHelp, { onCommandSelect: (cmd) => handleValueChange(cmd + " ") })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(PromptInputAction, { tooltip: "Attach file", children: /* @__PURE__ */ jsx(
-                  AttachmentButton,
-                  {
-                    onFileSelect: handleFileSelect,
-                    disabled
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(PromptInputAction, { tooltip: "Send message", children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    onClick: handleSubmit,
-                    disabled: submitDisabled,
-                    size: "icon-sm",
-                    className: "rounded-full",
-                    "aria-label": "Send message",
-                    children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: ArrowUp02Icon, size: 18, strokeWidth: 2 })
-                  }
-                ) })
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        isDragActive && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-2 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary-400 bg-primary-50/90 text-sm font-medium text-primary-700", children: "Drop image here" }),
+        /* @__PURE__ */ jsxs(
+          PromptInput,
+          {
+            value,
+            onValueChange: handleValueChange,
+            onSubmit: handleSubmit,
+            isLoading,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                AttachmentPreviewList,
+                {
+                  attachments,
+                  onRemove: handleRemoveAttachment
+                }
+              ),
+              showSlashCommands && filteredSlashCommands.length > 0 && /* @__PURE__ */ jsx(
+                SlashCommandMenu,
+                {
+                  commands: filteredSlashCommands,
+                  selectedIndex: Math.min(selectedCommandIndex, filteredSlashCommands.length - 1),
+                  onSelect: selectSlashCommand
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PromptInputTextarea,
+                {
+                  placeholder: "Type a message…",
+                  inputRef: setPromptRef,
+                  onKeyDown: handleComposerKeyDown
+                }
+              ),
+              /* @__PURE__ */ jsxs(PromptInputActions, { className: "justify-between px-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(ModelSelector, { onModelChange: setSelectedModel }),
+                  /* @__PURE__ */ jsx(PersonaPicker, { onSelect: handlePersonaSelect }),
+                  /* @__PURE__ */ jsx(CommandHelp, { onCommandSelect: (cmd) => handleValueChange(cmd + " ") })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(PromptInputAction, { tooltip: "Attach file", children: /* @__PURE__ */ jsx(
+                    AttachmentButton,
+                    {
+                      onFileSelect: handleFileSelect,
+                      disabled
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(PromptInputAction, { tooltip: isRecording ? "Stop recording" : "Voice input", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: handleMicClick,
+                      disabled: disabled || sttLoading,
+                      size: "icon-sm",
+                      variant: isRecording ? "destructive" : "ghost",
+                      className: `rounded-full ${isRecording ? "animate-pulse" : ""}`,
+                      "aria-label": isRecording ? "Stop recording" : "Voice input",
+                      children: sttLoading ? /* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : isRecording ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-red-500" }),
+                        /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums", children: [
+                          Math.floor(recordingTime / 60),
+                          ":",
+                          String(recordingTime % 60).padStart(2, "0")
+                        ] }),
+                        /* @__PURE__ */ jsx(HugeiconsIcon, { icon: StopIcon, size: 14, strokeWidth: 2 })
+                      ] }) : /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Mic02Icon, size: 18, strokeWidth: 2 })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(PromptInputAction, { tooltip: "Send message", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: handleSubmit,
+                      disabled: submitDisabled,
+                      size: "icon-sm",
+                      className: "rounded-full",
+                      "aria-label": "Send message",
+                      children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: ArrowUp02Icon, size: 18, strokeWidth: 2 })
+                    }
+                  ) })
+                ] })
               ] })
-            ] })
-          ]
-        }
-      )
+            ]
+          }
+        )
+      ]
     }
   );
 }
@@ -5102,11 +5846,15 @@ function useStreaming(options) {
   const onErrorRef = useRef(options.onError);
   onDoneRef.current = options.onDone;
   onErrorRef.current = options.onError;
-  const stop = useCallback(() => {
+  const stop = useCallback((options2) => {
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
       eventSourceRef.current = null;
     }
+    if (options2?.preserveState) {
+      setState((prev) => ({ ...prev, active: false }));
+      return;
+    }
     setState(INITIAL_STATE);
   }, []);
   const start = useCallback(
@@ -5154,7 +5902,7 @@ function useStreaming(options) {
           const data = JSON.parse(e.data);
           es.close();
           eventSourceRef.current = null;
-          setState(INITIAL_STATE);
+          setState((prev) => ({ ...prev, active: false }));
           onDoneRef.current(data.sessionKey);
         } catch {
         }
@@ -5313,12 +6061,12 @@ function useSwipeGesture(options) {
   };
 }
 const KeyboardShortcutsDialog = lazy(
-  () => import("./keyboard-shortcuts-dialog-D5hqVX2v.js").then((m) => ({
+  () => import("./keyboard-shortcuts-dialog-7OEtXUlW.js").then((m) => ({
     default: m.KeyboardShortcutsDialog
   }))
 );
 const SearchDialog = lazy(
-  () => import("./search-dialog-JY8C3mqa.js").then((m) => ({
+  () => import("./search-dialog-BE2ZBkj0.js").then((m) => ({
     default: m.SearchDialog
   }))
 );
@@ -5462,26 +6210,31 @@ function ChatScreen({
       refreshHistoryRef.current();
     }, FAST_POLL_MS);
   }, [activeFriendlyId, isNewChat]);
-  const handleStreamDone = useCallback(
-    (_sk) => {
-      void historyQuery.refetch();
-      void queryClient.invalidateQueries({ queryKey: chatQueryKeys.sessions });
+  const handleStreamDoneRef = useRef(() => {
+  });
+  const handleStreamErrorRef = useRef(() => {
+  });
+  const { streaming, startStream, stopStream } = useStreaming({
+    onDone: (sk) => handleStreamDoneRef.current(sk),
+    onError: (err) => handleStreamErrorRef.current(err)
+  });
+  handleStreamDoneRef.current = useCallback(
+    async (_sk) => {
+      await historyQuery.refetch();
+      stopStream({ preserveState: true });
       streamFinish();
+      void queryClient.invalidateQueries({ queryKey: chatQueryKeys.sessions });
     },
-    [historyQuery, queryClient, streamFinish]
+    [historyQuery, queryClient, stopStream, streamFinish]
   );
-  const handleStreamError = useCallback(
+  handleStreamErrorRef.current = useCallback(
     (_err) => {
       console.warn("[stream] SSE error, falling back to polling");
     },
     []
   );
-  const { streaming, startStream, stopStream } = useStreaming({
-    onDone: handleStreamDone,
-    onError: handleStreamError
-  });
   const streamingMessage = useMemo(() => {
-    if (!streaming.active || !streaming.text) return null;
+    if (!streaming.text) return null;
     const content = [];
     for (const tool of streaming.tools) {
       content.push({
@@ -5494,23 +6247,22 @@ function ChatScreen({
     return {
       role: "assistant",
       content,
+      id: "__streaming__",
       __streaming: true,
       timestamp: Date.now()
     };
-  }, [streaming.active, streaming.text, streaming.tools]);
+  }, [streaming.text, streaming.tools]);
   const messagesWithStreaming = useMemo(() => {
     if (!streamingMessage) return displayMessages;
-    const msgs = [...displayMessages];
-    const lastMsg = msgs[msgs.length - 1];
-    if (lastMsg?.role === "assistant" && streamingMessage) {
+    const lastMsg = displayMessages[displayMessages.length - 1];
+    if (lastMsg?.role === "assistant") {
       const lastText = textFromMessage(lastMsg);
-      if (streaming.text.length > lastText.length) {
-        msgs[msgs.length - 1] = streamingMessage;
-        return msgs;
-      }
+      if (lastText.length >= streaming.text.length) return displayMessages;
+      const msgs = [...displayMessages];
+      msgs[msgs.length - 1] = streamingMessage;
       return msgs;
     }
-    return [...msgs, streamingMessage];
+    return [...displayMessages, streamingMessage];
   }, [displayMessages, streamingMessage, streaming.text]);
   const stableContentStyle = useMemo(() => ({}), []);
   refreshHistoryRef.current = function refreshHistory() {