@wrongstack/webui 0.291.0 → 0.291.1

package/dist/index.js

@@ -20514,6 +20514,7 @@ var init_ws_client = __esm({
       "memory.list": "memory.list",
       "memory.super.get": "memory.super.get",
       "memory.super.list": "memory.super.list",
+      "memory.super.listPage": "memory.super.listPage",
       "memory.super.remember": "memory.super.remember",
       "memory.super.update": "memory.super.update",
       "skills.list": "skills.list",
@@ -21050,6 +21051,14 @@ var init_ws_client = __esm({
       listSuperMemories(options) {
         this.send({ type: "memory.super.list" }, options);
       }
+      /**
+       * Paginated, status-filtered listing. Defaults (server-side) to every status
+       * except `deleted`. Pass `{ statuses: ['deleted'] }` for the "Deleted" tab and
+       * `cursor` (from the previous page's `nextCursor`) to load the next page.
+       */
+      listSuperMemoriesPage(params, options) {
+        this.send({ type: "memory.super.listPage", payload: { ...params } }, options);
+      }
       getSuperMemory(id, options) {
         this.send({ type: "memory.super.get", payload: { id } }, options);
       }
@@ -27047,6 +27056,10 @@ function useWebSocket() {
     (options) => client2.listSuperMemories(options),
     [client2]
   );
+  const listSuperMemoriesPage = useCallback(
+    (params, options) => client2.listSuperMemoriesPage(params, options),
+    [client2]
+  );
   const getSuperMemory = useCallback(
     (id, options) => client2.getSuperMemory(id, options),
     [client2]
@@ -27156,6 +27169,7 @@ function useWebSocket() {
     listTools,
     listMemory,
     listSuperMemories,
+    listSuperMemoriesPage,
     getSuperMemory,
     updateSuperMemory,
     deleteSuperMemory,
@@ -27464,25 +27478,11 @@ var init_usePagination = __esm({
   }
 });
 
-// src/components/MessageBubble/LazyMarkdown.tsx
-import { lazy, Suspense } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-function LazyMarkdown(props) {
-  return /* @__PURE__ */ jsx24(Suspense, { fallback: null, children: /* @__PURE__ */ jsx24(ReactMarkdownLazy, { ...props }) });
-}
-var ReactMarkdownLazy;
-var init_LazyMarkdown = __esm({
-  "src/components/MessageBubble/LazyMarkdown.tsx"() {
-    "use strict";
-    ReactMarkdownLazy = lazy(() => import("react-markdown"));
-  }
-});
-
 // src/components/DiffView.tsx
 import { computeLineDiff, parseUnifiedDiff } from "@wrongstack/tools/tool-diff";
 import { memo, useMemo as useMemo8 } from "react";
 import { diffFromToolInput } from "@wrongstack/tools/tool-diff";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var DiffView, ToolDiffView, DiffRows;
 var init_DiffView = __esm({
   "src/components/DiffView.tsx"() {
@@ -27491,14 +27491,14 @@ var init_DiffView = __esm({
     init_i18n();
     DiffView = memo(function DiffView2({ oldText, newText, caption, fill }) {
       const rows = useMemo8(() => computeLineDiff(oldText, newText), [oldText, newText]);
-      return /* @__PURE__ */ jsx25(DiffRows, { rows, caption, fill });
+      return /* @__PURE__ */ jsx24(DiffRows, { rows, caption, fill });
     });
     ToolDiffView = memo(function ToolDiffView2({ diff, fill }) {
       const rows = useMemo8(
         () => diff.mode === "unified" ? parseUnifiedDiff(diff.patchText) : computeLineDiff(diff.oldText, diff.newText),
         [diff]
       );
-      return /* @__PURE__ */ jsx25(DiffRows, { rows, caption: diff.caption, fill });
+      return /* @__PURE__ */ jsx24(DiffRows, { rows, caption: diff.caption, fill });
     });
     DiffRows = memo(function DiffRows2({
       rows,
@@ -27507,7 +27507,7 @@ var init_DiffView = __esm({
     }) {
       const { t } = useTranslation();
       if (rows === null) {
-        return /* @__PURE__ */ jsx25("div", { className: "text-xs text-muted-foreground italic px-3 py-2", children: t("activity:diff.tooLarge") });
+        return /* @__PURE__ */ jsx24("div", { className: "text-xs text-muted-foreground italic px-3 py-2", children: t("activity:diff.tooLarge") });
       }
       const adds = rows.filter((r) => r.kind === "add").length;
       const dels = rows.filter((r) => r.kind === "del").length;
@@ -27520,7 +27520,7 @@ var init_DiffView = __esm({
           ),
           children: [
             (caption || adds > 0 || dels > 0) && /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b bg-muted/40 font-mono text-[11px]", children: [
-              caption && /* @__PURE__ */ jsx25("span", { className: "text-muted-foreground truncate", children: caption }),
+              caption && /* @__PURE__ */ jsx24("span", { className: "text-muted-foreground truncate", children: caption }),
               /* @__PURE__ */ jsxs21("span", { className: "ml-auto flex items-center gap-2", children: [
                 adds > 0 && /* @__PURE__ */ jsxs21("span", { className: "text-success", children: [
                   "+",
@@ -27532,7 +27532,7 @@ var init_DiffView = __esm({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsx25("div", { className: cn("overflow-auto font-mono leading-relaxed", fill ? "flex-1 min-h-0" : "max-h-96"), children: rows.map((r, idx) => /* @__PURE__ */ jsxs21(
+            /* @__PURE__ */ jsx24("div", { className: cn("overflow-auto font-mono leading-relaxed", fill ? "flex-1 min-h-0" : "max-h-96"), children: rows.map((r, idx) => /* @__PURE__ */ jsxs21(
               "div",
               {
                 className: cn(
@@ -27542,7 +27542,7 @@ var init_DiffView = __esm({
                   r.kind === "meta" && "bg-muted/60"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx25(
+                  /* @__PURE__ */ jsx24(
                     "span",
                     {
                       "aria-hidden": true,
@@ -27555,7 +27555,7 @@ var init_DiffView = __esm({
                       children: r.kind === "add" ? "+" : r.kind === "del" ? "-" : r.kind === "meta" ? "@" : " "
                     }
                   ),
-                  /* @__PURE__ */ jsx25(
+                  /* @__PURE__ */ jsx24(
                     "pre",
                     {
                       className: cn(
@@ -27580,7 +27580,7 @@ var init_DiffView = __esm({
 import { Check as Check4, Copy, FileCode2 } from "lucide-react";
 import { isValidElement, useCallback as useCallback8, useMemo as useMemo10, useState as useState21 } from "react";
 import rehypeHighlight from "rehype-highlight";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 async function copyToClipboard(text4) {
   try {
     if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
@@ -27658,8 +27658,8 @@ function CodeCopyButton({ text: text4 }) {
       ),
       title: copied ? t("common:action.copied") : t("common:action.copy"),
       children: [
-        copied ? /* @__PURE__ */ jsx28(Check4, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx28(Copy, { className: "h-3 w-3" }),
-        /* @__PURE__ */ jsx28("span", { children: copied ? t("common:action.copied") : t("common:action.copy") })
+        copied ? /* @__PURE__ */ jsx27(Check4, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx27(Copy, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsx27("span", { children: copied ? t("common:action.copied") : t("common:action.copy") })
       ]
     }
   );
@@ -27692,7 +27692,7 @@ var init_utils2 = __esm({
         const match = /language-(\w+)/.exec(className ?? "");
         const codeText = codeNodeText(children).replace(/\n$/, "");
         if (inline || !match) {
-          return /* @__PURE__ */ jsx28(
+          return /* @__PURE__ */ jsx27(
             "code",
             {
               className: cn(
@@ -27709,28 +27709,36 @@ var init_utils2 = __esm({
         return /* @__PURE__ */ jsxs24("div", { className: "not-prose relative my-3 rounded-lg border border-border overflow-hidden group/codeblock", children: [
           /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between px-3 py-1 border-b border-border text-xs", children: [
             /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx28(FileCode2, { className: "h-3 w-3 text-muted-foreground" }),
-              /* @__PURE__ */ jsx28("span", { className: "font-mono text-muted-foreground font-medium", children: match[1] }),
+              /* @__PURE__ */ jsx27(FileCode2, { className: "h-3 w-3 text-muted-foreground" }),
+              /* @__PURE__ */ jsx27("span", { className: "font-mono text-muted-foreground font-medium", children: match[1] }),
               lines.length > 0 && /* @__PURE__ */ jsxs24("span", { className: "text-[10px] text-muted-foreground/75 tabular-nums", children: [
                 lines.length,
                 " line",
                 lines.length === 1 ? "" : "s"
               ] })
             ] }),
-            /* @__PURE__ */ jsx28(CodeCopyButton, { text: codeText })
+            /* @__PURE__ */ jsx27(CodeCopyButton, { text: codeText })
           ] }),
           hasLineNumbers ? /* @__PURE__ */ jsxs24("div", { className: "flex max-h-[40rem] overflow-auto", children: [
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx27(
               "pre",
               {
                 "aria-hidden": true,
                 className: "text-xs font-mono leading-[1.55] py-3 pl-3 pr-2 text-muted-foreground/65 select-none border-r border-border/30 tabular-nums text-right shrink-0",
-                children: lines.map((_, i) => /* @__PURE__ */ jsx28("div", { children: i + 1 }, i))
+                children: lines.map((_, i) => /* @__PURE__ */ jsx27("div", { children: i + 1 }, i))
               }
             ),
-            /* @__PURE__ */ jsx28("pre", { className: "overflow-x-auto py-3 px-3 text-xs leading-[1.55] font-mono flex-1", children: /* @__PURE__ */ jsx28("code", { className: cn("hljs", className), ...props, children }) })
-          ] }) : /* @__PURE__ */ jsx28("pre", { className: "overflow-x-auto p-3 text-xs leading-relaxed font-mono max-h-[40rem]", children: /* @__PURE__ */ jsx28("code", { className: cn("hljs", className), ...props, children }) }),
-          /* @__PURE__ */ jsx28("div", { className: "pointer-events-none absolute bottom-8 left-0 right-0 h-8 bg-gradient-to-t from-black/10 to-transparent opacity-0 group-hover/codeblock:opacity-100 transition-opacity" })
+            /* @__PURE__ */ jsx27("pre", { className: "overflow-x-auto py-3 px-3 text-xs leading-[1.55] font-mono flex-1", children: /* @__PURE__ */ jsx27("code", { className: cn("hljs", className), ...props, children }) })
+          ] }) : /* @__PURE__ */ jsx27("pre", { className: "overflow-x-auto p-3 text-xs leading-relaxed font-mono max-h-[40rem]", children: /* @__PURE__ */ jsx27("code", { className: cn("hljs", className), ...props, children }) }),
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: "pointer-events-none absolute bottom-8 left-0 right-0 h-8 opacity-0 group-hover/codeblock:opacity-100 transition-opacity",
+              style: {
+                background: "linear-gradient(to top, hsl(var(--foreground) / 0.08), transparent)"
+              }
+            }
+          )
         ] });
       }
     };
@@ -27740,7 +27748,7 @@ var init_utils2 = __esm({
 // src/components/MessageBubble/CopyButton.tsx
 import { Copy as Copy2, Check as Check5 } from "lucide-react";
 import { useState as useState22 } from "react";
-import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function CopyButton({
   text: text4,
   className,
@@ -27749,7 +27757,7 @@ function CopyButton({
   const { t } = useTranslation();
   const [copied, setCopied] = useState22(false);
   const labelText = label ?? t("common:action.copy");
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     "button",
     {
       type: "button",
@@ -27769,11 +27777,11 @@ function CopyButton({
       ),
       title: labelText,
       children: copied ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
-        /* @__PURE__ */ jsx29(Check5, { className: "h-3 w-3 text-success" }),
-        /* @__PURE__ */ jsx29("span", { children: t("common:action.copied") })
+        /* @__PURE__ */ jsx28(Check5, { className: "h-3 w-3 text-success" }),
+        /* @__PURE__ */ jsx28("span", { children: t("common:action.copied") })
       ] }) : /* @__PURE__ */ jsxs25(Fragment8, { children: [
-        /* @__PURE__ */ jsx29(Copy2, { className: "h-3 w-3" }),
-        /* @__PURE__ */ jsx29("span", { children: labelText })
+        /* @__PURE__ */ jsx28(Copy2, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsx28("span", { children: labelText })
       ] })
     }
   );
@@ -27791,7 +27799,7 @@ var init_CopyButton = __esm({
 // src/components/MessageBubble/ErrorBody.tsx
 import { expectDefined as expectDefined9 } from "@wrongstack/core";
 import { useState as useState23 } from "react";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function detectStackBoundary(text4) {
   const lines = text4.split("\n");
   for (let i = 0; i < lines.length; i++) {
@@ -27807,15 +27815,15 @@ function ErrorBodyWithStack({ text: text4 }) {
   const idx = detectStackBoundary(text4);
   const [open, setOpen] = useState23(false);
   if (idx === -1) {
-    return /* @__PURE__ */ jsx31("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed", children: text4 });
+    return /* @__PURE__ */ jsx29("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed", children: text4 });
   }
   const lines = text4.split("\n");
   const head = lines.slice(0, idx).join("\n").trim();
   const stack = lines.slice(idx).join("\n");
   const frameCount = stack.split("\n").filter((l) => l.trim().length > 0).length;
-  return /* @__PURE__ */ jsxs27("div", { className: "space-y-2", children: [
-    head && /* @__PURE__ */ jsx31("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed", children: head }),
-    /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
+    head && /* @__PURE__ */ jsx29("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed", children: head }),
+    /* @__PURE__ */ jsxs26(
       "button",
       {
         type: "button",
@@ -27828,7 +27836,7 @@ function ErrorBodyWithStack({ text: text4 }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx31("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] leading-snug bg-destructive/5 border border-destructive/20 rounded p-2 max-h-80 overflow-auto", children: stack })
+    open && /* @__PURE__ */ jsx29("pre", { className: "whitespace-pre-wrap break-words font-mono text-[11px] leading-snug bg-destructive/5 border border-destructive/20 rounded p-2 max-h-80 overflow-auto", children: stack })
   ] });
 }
 var init_ErrorBody = __esm({
@@ -27838,6 +27846,20 @@ var init_ErrorBody = __esm({
   }
 });
 
+// src/components/MessageBubble/LazyMarkdown.tsx
+import { lazy, Suspense } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+function LazyMarkdown(props) {
+  return /* @__PURE__ */ jsx30(Suspense, { fallback: null, children: /* @__PURE__ */ jsx30(ReactMarkdownLazy, { ...props }) });
+}
+var ReactMarkdownLazy;
+var init_LazyMarkdown = __esm({
+  "src/components/MessageBubble/LazyMarkdown.tsx"() {
+    "use strict";
+    ReactMarkdownLazy = lazy(() => import("react-markdown"));
+  }
+});
+
 // src/components/MessageBubble/ToolInputView.tsx
 import { useState as useState24 } from "react";
 import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -38736,7 +38758,7 @@ import { jsx as jsx127, jsxs as jsxs119 } from "react/jsx-runtime";
 function MemoryManager() {
   const {
     client: client2,
-    listSuperMemories,
+    listSuperMemoriesPage,
     rememberSuperMemory,
     updateSuperMemory,
     deleteSuperMemory,
@@ -38766,6 +38788,12 @@ function MemoryManager() {
   const [kindFilter, setKindFilter] = useState86("all");
   const [audienceOnly, setAudienceOnly] = useState86(false);
   const [tagFilter, setTagFilter] = useState86(null);
+  const [showDeleted, setShowDeleted] = useState86(false);
+  const [pageCursor, setPageCursor] = useState86(null);
+  const [hasMore, setHasMore] = useState86(false);
+  const [loadingMore, setLoadingMore] = useState86(false);
+  const [statusCounts, setStatusCounts] = useState86({});
+  const PAGE_SIZE = 100;
   const [drawerOpen, setDrawerOpen] = useState86(false);
   const [currentFilePath, setCurrentFilePath] = useState86(null);
   const [cursorLineStart, setCursorLineStart] = useState86(void 0);
@@ -38784,12 +38812,17 @@ function MemoryManager() {
     () => memories.find((memory) => memory.id === selectedId) ?? null,
     [memories, selectedId]
   );
-  const loadMemories = useCallback50(() => {
+  const loadPage = useCallback50((cursor) => {
+    const isAppend = cursor !== null;
     const generation = ++listGenerationRef.current;
     listCleanupRef.current?.();
-    setRefreshing(true);
     setLoadError(null);
-    if (!hasLoadedRef.current) setInitialLoading(true);
+    if (isAppend) {
+      setLoadingMore(true);
+    } else {
+      setRefreshing(true);
+      if (!hasLoadedRef.current) setInitialLoading(true);
+    }
     let off = () => {
     };
     let timeout = null;
@@ -38801,7 +38834,7 @@ function MemoryManager() {
       off();
       if (listCleanupRef.current === cleanup) listCleanupRef.current = null;
     };
-    off = client2.on("memory.super.list", (message) => {
+    off = client2.on("memory.super.listPage", (message) => {
       if (generation !== listGenerationRef.current || !mountedRef.current) {
         cleanup();
         return;
@@ -38810,16 +38843,29 @@ function MemoryManager() {
       if (message.payload.error) {
         setLoadError(message.payload.error);
       } else {
-        const next = message.payload.memories ?? [];
-        setMemories(next);
-        setStats(message.payload.stats ?? null);
+        const page = message.payload.memories ?? [];
+        setMemories((current) => isAppend ? [...current, ...page] : page);
+        setPageCursor(message.payload.nextCursor ?? null);
+        setHasMore(Boolean(message.payload.nextCursor));
+        const counts = message.payload.statusCounts ?? {};
+        setStatusCounts(counts);
+        const total = Object.values(counts).reduce((sum, n) => sum + n, 0);
+        setStats((prev) => ({
+          total,
+          byStatus: counts,
+          byKind: prev?.byKind ?? {},
+          edges: prev?.edges ?? 0
+        }));
         hasLoadedRef.current = true;
-        setSelectedId(
-          (current) => current && next.some((memory) => memory.id === current) ? current : null
-        );
+        if (!isAppend) {
+          setSelectedId(
+            (current) => current && page.some((memory) => memory.id === current) ? current : null
+          );
+        }
       }
       setInitialLoading(false);
       setRefreshing(false);
+      setLoadingMore(false);
     });
     timeout = setTimeout(() => {
       if (generation !== listGenerationRef.current || !mountedRef.current) return;
@@ -38829,10 +38875,27 @@ function MemoryManager() {
       );
       setInitialLoading(false);
       setRefreshing(false);
+      setLoadingMore(false);
     }, 2e4);
     listCleanupRef.current = cleanup;
-    listSuperMemories({ echoToChat: false });
-  }, [client2, listSuperMemories]);
+    listSuperMemoriesPage(
+      {
+        limit: PAGE_SIZE,
+        ...showDeleted ? { statuses: ["deleted"] } : {},
+        ...cursor ? { cursor } : {}
+      },
+      { echoToChat: false }
+    );
+  }, [client2, listSuperMemoriesPage, showDeleted]);
+  const loadMemories = useCallback50(() => {
+    setPageCursor(null);
+    setHasMore(false);
+    loadPage(null);
+  }, [loadPage]);
+  const loadMore = useCallback50(() => {
+    if (loadingMore || !pageCursor) return;
+    loadPage(pageCursor);
+  }, [loadPage, loadingMore, pageCursor]);
   useEffect86(() => {
     mountedRef.current = true;
     loadMemories();
@@ -39332,6 +39395,57 @@ function MemoryManager() {
                 )
               ] })
             ] }),
+            /* @__PURE__ */ jsxs119(
+              "div",
+              {
+                className: "flex shrink-0 items-center gap-1 border-b border-border/60 px-3 pt-1",
+                role: "tablist",
+                "aria-label": "Memory view",
+                children: [
+                  /* @__PURE__ */ jsx127(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      role: "tab",
+                      "aria-selected": !showDeleted,
+                      onClick: () => {
+                        if (!showDeleted) return;
+                        setShowDeleted(false);
+                      },
+                      className: cn(
+                        "h-7 rounded-b-none border-b-2 px-3 text-[11px]",
+                        !showDeleted ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      ),
+                      children: "Active"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs119(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      role: "tab",
+                      "aria-selected": showDeleted,
+                      onClick: () => {
+                        if (showDeleted) return;
+                        setShowDeleted(true);
+                      },
+                      className: cn(
+                        "h-7 rounded-b-none border-b-2 px-3 text-[11px]",
+                        showDeleted ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+                      ),
+                      children: [
+                        "Deleted",
+                        typeof statusCounts["deleted"] === "number" ? ` (${statusCounts["deleted"]})` : ""
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx127(
               MemoryFilters,
               {
@@ -39362,7 +39476,19 @@ function MemoryManager() {
                 onOpenCreate: openCreate,
                 onClearFilters: clearFilters
               }
-            )
+            ),
+            hasMore ? /* @__PURE__ */ jsx127("div", { className: "shrink-0 border-t border-border/60 p-2", children: /* @__PURE__ */ jsx127(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: loadMore,
+                disabled: loadingMore,
+                className: "h-7 w-full text-[11px]",
+                children: loadingMore ? "Loading\u2026" : `Load more (${memories.length} loaded)`
+              }
+            ) }) : null
           ]
         }
       ),
@@ -46746,8 +46872,8 @@ var init_AgentOfficeView2 = __esm({
 });
 
 // src/components/WatchMessageBubble.tsx
-import remarkGfm3 from "remark-gfm";
 import { AlertCircle as AlertCircle4, Bot as Bot18, Clock as Clock14, Terminal as Terminal9, User as User3 } from "lucide-react";
+import remarkGfm3 from "remark-gfm";
 import { jsx as jsx138, jsxs as jsxs130 } from "react/jsx-runtime";
 function fmtDuration4(durationMs) {
   if (durationMs < 1e3) return `${durationMs}ms`;
@@ -46806,10 +46932,7 @@ function WatchBubbleContent({ entry }) {
     }
   ) });
 }
-function WatchMessageBubble({
-  entry,
-  isContinuation = false
-}) {
+function WatchMessageBubble({ entry, isContinuation = false }) {
   const { t } = useTranslation();
   const cfg = ROLE_CONFIG[entry.role];
   const Icon2 = cfg.Icon;
@@ -46843,7 +46966,7 @@ function WatchMessageBubble({
         {
           className: cn(
             "rounded-2xl px-4 py-3 border",
-            entry.role === "user" && "rounded-br-md",
+            entry.role === "user" && "rounded-br-md msg-user-bubble",
             entry.role === "assistant" && "rounded-bl-md",
             entry.role === "tool" && "rounded-bl-sm",
             entry.role === "system" && "rounded-bl-sm opacity-70",
@@ -46862,12 +46985,12 @@ var ROLE_CONFIG;
 var init_WatchMessageBubble = __esm({
   "src/components/WatchMessageBubble.tsx"() {
     "use strict";
-    init_LazyMarkdown();
-    init_utils();
     init_i18n();
+    init_utils();
     init_CopyButton();
-    init_ToolInputView();
     init_ErrorBody();
+    init_LazyMarkdown();
+    init_ToolInputView();
     init_utils2();
     ROLE_CONFIG = {
       user: {
@@ -63059,10 +63182,27 @@ function CostChip() {
 }
 
 // src/components/MessageBubble/index.tsx
+init_i18n();
 import { expectDefined as expectDefined10 } from "@wrongstack/core";
-
-// src/lib/tool-summary.ts
-import { FALLBACK_HEAD_FIELDS, summarizeToolInput } from "@wrongstack/tools/tool-summary";
+import {
+  Bot as Bot2,
+  Brain as Brain3,
+  CheckCircle2 as CheckCircle22,
+  ChevronDown as ChevronDown4,
+  ChevronRight as ChevronRight4,
+  Clock as Clock3,
+  Download as Download2,
+  FileCode2 as FileCode22,
+  Pencil as Pencil2,
+  Pin,
+  PinOff,
+  RotateCcw as RotateCcw2,
+  Terminal,
+  User,
+  XCircle as XCircle2
+} from "lucide-react";
+import { memo as memo4, useEffect as useEffect24, useState as useState25 } from "react";
+import remarkGfm2 from "remark-gfm";
 
 // src/lib/tool-icon.ts
 import { getToolIcon, TOOL_ICON_CONFIG } from "@wrongstack/tools/tool-icons";
@@ -63182,41 +63322,24 @@ function hexToColorName(hex) {
   return colors[hex] ?? "colored";
 }
 
+// src/lib/tool-summary.ts
+import { FALLBACK_HEAD_FIELDS, summarizeToolInput } from "@wrongstack/tools/tool-summary";
+
 // src/components/MessageBubble/index.tsx
 init_utils();
 init_ws_client();
 init_stores();
-init_stores();
 init_local_prefs();
-init_i18n();
-init_LazyMarkdown();
+init_image_attachments();
 init_DiffView();
-import {
-  Bot as Bot2,
-  Brain as Brain3,
-  CheckCircle2 as CheckCircle22,
-  ChevronDown as ChevronDown4,
-  ChevronRight as ChevronRight4,
-  Clock as Clock3,
-  Download as Download2,
-  FileCode2 as FileCode22,
-  Pencil as Pencil2,
-  Pin,
-  PinOff,
-  RotateCcw as RotateCcw2,
-  Terminal,
-  User,
-  XCircle as XCircle2
-} from "lucide-react";
-import { memo as memo4, useEffect as useEffect24, useState as useState25 } from "react";
-import remarkGfm2 from "remark-gfm";
+init_Toaster();
 
 // src/components/ToolResult.tsx
 init_utils();
 init_i18n();
 import { ChevronDown as ChevronDown3, ChevronRight as ChevronRight3, ChevronsDown, ChevronsUp } from "lucide-react";
 import { memo as memo2, useMemo as useMemo9, useState as useState19 } from "react";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var LONG_OUTPUT_THRESHOLD = 25;
 var LONG_PEEK_LINES = 12;
 function CollapsibleText({
@@ -63240,7 +63363,7 @@ function CollapsibleText({
       // the shared overflow container rather than wrapping (which would
       // break alignment between the gutter and the body).
       /* @__PURE__ */ jsxs22("div", { className: "flex max-h-96 overflow-auto", children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           "pre",
           {
             "aria-hidden": true,
@@ -63248,7 +63371,7 @@ function CollapsibleText({
             children: lines.map((_, i) => `${i + 1}`).join("\n")
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx25(
           "pre",
           {
             className: cn(
@@ -63259,7 +63382,7 @@ function CollapsibleText({
           }
         )
       ] })
-    ) : /* @__PURE__ */ jsx26(
+    ) : /* @__PURE__ */ jsx25(
       "pre",
       {
         className: cn(
@@ -63270,17 +63393,17 @@ function CollapsibleText({
         children: shown
       }
     ),
-    isLong && /* @__PURE__ */ jsx26(
+    isLong && /* @__PURE__ */ jsx25(
       "button",
       {
         type: "button",
         onClick: () => setExpanded((v) => !v),
         className: "w-full flex items-center justify-center gap-1 px-2 py-1 border-t bg-muted/30 text-[11px] text-muted-foreground hover:text-foreground transition-colors",
         children: expanded ? /* @__PURE__ */ jsxs22(Fragment7, { children: [
-          /* @__PURE__ */ jsx26(ChevronsUp, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx25(ChevronsUp, { className: "h-3 w-3" }),
           t("activity:toolResult.collapseToLines", { count: LONG_PEEK_LINES })
         ] }) : /* @__PURE__ */ jsxs22(Fragment7, { children: [
-          /* @__PURE__ */ jsx26(ChevronsDown, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx25(ChevronsDown, { className: "h-3 w-3" }),
           t("activity:toolResult.showAllLines", { total: lines.length, more: lines.length - LONG_PEEK_LINES })
         ] })
       }
@@ -63298,7 +63421,7 @@ var ToolResult = memo2(function ToolResult2({
   const { t } = useTranslation();
   const defaultCollapsed = renderMode === "simple";
   if (shape.kind === "json") {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx25(
       JsonResult,
       {
         value: shape.value,
@@ -63309,7 +63432,7 @@ var ToolResult = memo2(function ToolResult2({
     );
   }
   if (shape.kind === "numbered") {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx25(
       CollapsibleText,
       {
         text: result,
@@ -63322,7 +63445,7 @@ var ToolResult = memo2(function ToolResult2({
   }
   if (shape.kind === "bash") {
     return /* @__PURE__ */ jsxs22("div", { className: cn("rounded-md border bg-background/40 overflow-hidden", className), children: [
-      shape.stdout && /* @__PURE__ */ jsx26(
+      shape.stdout && /* @__PURE__ */ jsx25(
         CollapsibleText,
         {
           text: shape.stdout,
@@ -63344,15 +63467,15 @@ var ToolResult = memo2(function ToolResult2({
             shape.exitCode !== void 0 && /* @__PURE__ */ jsxs22("span", { children: [
               t("activity:toolResult.exitCode"),
               " ",
-              /* @__PURE__ */ jsx26("span", { className: "font-mono", children: shape.exitCode })
+              /* @__PURE__ */ jsx25("span", { className: "font-mono", children: shape.exitCode })
             ] }),
-            shape.duration && /* @__PURE__ */ jsx26("span", { children: shape.duration })
+            shape.duration && /* @__PURE__ */ jsx25("span", { children: shape.duration })
           ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25(
     CollapsibleText,
     {
       text: result,
@@ -63428,14 +63551,14 @@ function JsonResult({
             className: "w-full flex items-center justify-between px-2 py-1 border-b bg-muted/30 text-[11px] text-muted-foreground hover:text-foreground",
             children: [
               /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1", children: [
-                expanded ? /* @__PURE__ */ jsx26(ChevronDown3, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx26(ChevronRight3, { className: "h-3 w-3" }),
-                /* @__PURE__ */ jsx26("span", { className: "font-mono", children: t("activity:toolResult.jsonLines", { count: lineCount2 }) })
+                expanded ? /* @__PURE__ */ jsx25(ChevronDown3, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx25(ChevronRight3, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx25("span", { className: "font-mono", children: t("activity:toolResult.jsonLines", { count: lineCount2 }) })
               ] }),
-              /* @__PURE__ */ jsx26("span", { children: expanded ? t("activity:toolResult.collapse") : t("activity:toolResult.expand") })
+              /* @__PURE__ */ jsx25("span", { children: expanded ? t("activity:toolResult.collapse") : t("activity:toolResult.expand") })
             ]
           }
         ),
-        expanded && /* @__PURE__ */ jsx26(
+        expanded && /* @__PURE__ */ jsx25(
           "pre",
           {
             className: cn(
@@ -63450,29 +63573,25 @@ function JsonResult({
   );
 }
 
-// src/components/MessageBubble/index.tsx
-init_Toaster();
-init_image_attachments();
-
 // src/components/MessageBubble/AttachmentGallery.tsx
 init_utils();
 import { ImageOff } from "lucide-react";
 import { useState as useState20 } from "react";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function AttachmentGallery({
   attachments,
   notRetainedLabel
 }) {
   const [expandedId, setExpandedId] = useState20(null);
-  return /* @__PURE__ */ jsx27("div", { className: "mb-2 flex flex-wrap gap-2", children: attachments.map(
-    (att) => att.dataUrl ? /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26("div", { className: "mb-2 flex flex-wrap gap-2", children: attachments.map(
+    (att) => att.dataUrl ? /* @__PURE__ */ jsx26(
       "button",
       {
         type: "button",
         onClick: () => setExpandedId((cur) => cur === att.id ? null : att.id),
         className: "group relative overflow-hidden rounded-lg border border-border/40 bg-background/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         title: att.name ?? att.mediaType,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx26(
           "img",
           {
             src: att.dataUrl,
@@ -63491,8 +63610,8 @@ function AttachmentGallery({
         className: "inline-flex items-center gap-1.5 rounded-lg border border-border/40 bg-background/20 px-2 py-1.5 text-xs opacity-80",
         title: notRetainedLabel,
         children: [
-          /* @__PURE__ */ jsx27(ImageOff, { className: "h-3.5 w-3.5 shrink-0" }),
-          /* @__PURE__ */ jsx27("span", { className: "max-w-[140px] truncate", children: att.name ?? att.mediaType }),
+          /* @__PURE__ */ jsx26(ImageOff, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx26("span", { className: "max-w-[140px] truncate", children: att.name ?? att.mediaType }),
           /* @__PURE__ */ jsxs23("span", { className: "tabular-nums opacity-70", children: [
             Math.max(1, Math.round(att.bytes / 1024)),
             " KB"
@@ -63506,13 +63625,15 @@ function AttachmentGallery({
 
 // src/components/MessageBubble/index.tsx
 init_CopyButton();
+init_ErrorBody();
+init_LazyMarkdown();
 
 // src/components/MessageBubble/StreamingMarkdown.tsx
 init_LazyMarkdown();
 init_utils2();
 import { memo as memo3, useMemo as useMemo11 } from "react";
 import remarkGfm from "remark-gfm";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function splitStableStreamPrefix(text4) {
   let lastSafe = -1;
   let fenceOpen = false;
@@ -63526,18 +63647,17 @@ function splitStableStreamPrefix(text4) {
   return [text4.slice(0, lastSafe), text4.slice(lastSafe)];
 }
 var StableMarkdownPrefix = memo3(function StableMarkdownPrefix2({ text: text4 }) {
-  return /* @__PURE__ */ jsx30(LazyMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins, components: markdownComponents, children: text4 });
+  return /* @__PURE__ */ jsx31(LazyMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins, components: markdownComponents, children: text4 });
 });
 function StreamingMarkdown({ text: text4 }) {
   const [prefix, tail] = useMemo11(() => splitStableStreamPrefix(text4), [text4]);
-  return /* @__PURE__ */ jsxs26(Fragment9, { children: [
-    prefix ? /* @__PURE__ */ jsx30(StableMarkdownPrefix, { text: prefix }) : null,
-    tail ? /* @__PURE__ */ jsx30("span", { className: "whitespace-pre-wrap break-words", children: tail }) : null
+  return /* @__PURE__ */ jsxs27(Fragment9, { children: [
+    prefix ? /* @__PURE__ */ jsx31(StableMarkdownPrefix, { text: prefix }) : null,
+    tail ? /* @__PURE__ */ jsx31("span", { className: "whitespace-pre-wrap break-words", children: tail }) : null
   ] });
 }
 
 // src/components/MessageBubble/index.tsx
-init_ErrorBody();
 init_ToolInputView();
 init_utils2();
 import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
@@ -63698,11 +63818,17 @@ var MessageBubble = memo4(function MessageBubble2({
         isPinned && "ring-1 ring-warning/30 bg-warning/[0.02] px-1 -mx-1"
       ),
       children: [
-        isContinuation ? /* @__PURE__ */ jsx33("div", { className: "flex-shrink-0 w-8 h-8", "aria-hidden": true }) : /* @__PURE__ */ jsx33("div", { className: cn(
-          "flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center",
-          "ring-1 ring-offset-2 ring-offset-background",
-          isUser ? "bg-primary text-primary-foreground ring-primary/20" : isTool ? "bg-secondary text-secondary-foreground ring-secondary/20" : isThinkingLog ? "bg-primary/10 text-primary ring-primary/20" : "bg-accent text-accent-foreground ring-accent/20"
-        ), children: isUser ? /* @__PURE__ */ jsx33(User, { className: "h-4 w-4" }) : isTool ? /* @__PURE__ */ jsx33(Terminal, { className: "h-4 w-4" }) : isThinkingLog ? /* @__PURE__ */ jsx33(Brain3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(Bot2, { className: "h-4 w-4" }) }),
+        isContinuation ? /* @__PURE__ */ jsx33("div", { className: "flex-shrink-0 w-8 h-8", "aria-hidden": true }) : /* @__PURE__ */ jsx33(
+          "div",
+          {
+            className: cn(
+              "flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center",
+              "ring-1 ring-offset-2 ring-offset-background",
+              isUser ? "bg-primary text-primary-foreground ring-primary/20" : isTool ? "bg-secondary text-secondary-foreground ring-secondary/20" : isThinkingLog ? "bg-primary/10 text-primary ring-primary/20" : "bg-accent text-accent-foreground ring-accent/20"
+            ),
+            children: isUser ? /* @__PURE__ */ jsx33(User, { className: "h-4 w-4" }) : isTool ? /* @__PURE__ */ jsx33(Terminal, { className: "h-4 w-4" }) : isThinkingLog ? /* @__PURE__ */ jsx33(Brain3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(Bot2, { className: "h-4 w-4" })
+          }
+        ),
         /* @__PURE__ */ jsxs29(
           "div",
           {
@@ -63711,7 +63837,16 @@ var MessageBubble = memo4(function MessageBubble2({
               isUser && "items-end sm:max-w-[44rem]"
             ),
             children: [
-              isFirst && !isContinuation && /* @__PURE__ */ jsx33("span", { className: cn("text-xs font-medium px-1", isUser ? "text-primary" : isTool ? "text-secondary" : isThinkingLog ? "text-primary" : "text-muted-foreground"), children: isUser ? t("activity:message.roleYou") : isTool ? t("activity:message.roleTool") : isThinkingLog ? t("activity:message.roleThinking") : t("activity:message.roleAssistant") }),
+              isFirst && !isContinuation && /* @__PURE__ */ jsx33(
+                "span",
+                {
+                  className: cn(
+                    "text-xs font-medium px-1",
+                    isUser ? "text-primary" : isTool ? "text-secondary" : isThinkingLog ? "text-primary" : "text-muted-foreground"
+                  ),
+                  children: isUser ? t("activity:message.roleYou") : isTool ? t("activity:message.roleTool") : isThinkingLog ? t("activity:message.roleThinking") : t("activity:message.roleAssistant")
+                }
+              ),
               isTool && message.toolName && (() => {
                 const { Icon: ToolIcon, color: toolColor } = getToolVisual(message.toolName);
                 const tooltip = getToolTooltip(message.toolName);
@@ -63720,7 +63855,11 @@ var MessageBubble = memo4(function MessageBubble2({
                   {
                     type: "button",
                     onClick: () => toggleTool(message.id),
-                    className: cn("flex items-center gap-2 text-sm font-medium cursor-pointer select-none", "hover:bg-muted/50 rounded-lg px-2 py-1 -mx-2 transition-colors", message.isError ? "text-destructive" : "text-foreground"),
+                    className: cn(
+                      "flex items-center gap-2 text-sm font-medium cursor-pointer select-none",
+                      "hover:bg-muted/50 rounded-lg px-2 py-1 -mx-2 transition-colors",
+                      message.isError ? "text-destructive" : "text-foreground"
+                    ),
                     "aria-expanded": !!expandedTools[message.id],
                     title: tooltip,
                     children: [
@@ -63733,154 +63872,236 @@ var MessageBubble = memo4(function MessageBubble2({
                   }
                 );
               })(),
-              /* @__PURE__ */ jsx33("div", { className: cn(
-                "max-w-full rounded-lg shadow-sm",
-                compactMode ? "px-3 py-1.5" : "px-4 py-3",
-                isUser ? "bg-primary text-primary-foreground rounded-br-sm" : isTool ? message.isError ? "bg-destructive/5 border border-destructive/25 text-destructive" : "bg-muted/70 border border-border/60 text-foreground" : "bg-card border border-border/70 text-foreground",
-                message.isError && !isTool && "border-destructive/20",
-                isUser && message.status === "failed" && "opacity-60 ring-1 ring-destructive/30"
-              ), children: isTool ? (() => {
-                const expanded = !!expandedTools[message.id];
-                const inputSummary = message.toolInput !== void 0 ? summarizeToolInput(message.toolName, message.toolInput) : "";
-                const lines = message.toolResult ? message.toolResult.split("\n").length : 0;
-                return /* @__PURE__ */ jsxs29("div", { className: "space-y-1 tool-details", children: [
-                  inputSummary && !expanded && /* @__PURE__ */ jsx33("div", { className: "text-xs text-muted-foreground font-mono truncate", children: inputSummary }),
-                  message.toolResult === void 0 && message.progressLines && message.progressLines.length > 0 && /* @__PURE__ */ jsx33("div", { className: "mt-1 rounded-md border border-warning/20 bg-warning/5 p-1.5 text-[11px] font-mono leading-snug max-h-32 overflow-auto", children: (() => {
-                    const seen = /* @__PURE__ */ new Map();
-                    return message.progressLines.slice(-6).map((line) => {
-                      const occurrence = seen.get(line) ?? 0;
-                      seen.set(line, occurrence + 1);
-                      return /* @__PURE__ */ jsx33("div", { className: "truncate text-muted-foreground", children: line }, `${line}-${occurrence}`);
-                    });
-                  })() }),
-                  expanded && message.toolInput !== void 0 && (() => {
-                    const diff = diffFromToolInput(message.toolName, message.toolInput);
-                    if (diff) return /* @__PURE__ */ jsx33(ToolDiffView, { diff });
-                    return /* @__PURE__ */ jsxs29("div", { className: "p-3 bg-muted/50 rounded-lg overflow-x-auto", children: [
-                      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1 text-muted-foreground mb-2 text-xs", children: [
-                        /* @__PURE__ */ jsx33(Clock3, { className: "h-3 w-3" }),
-                        /* @__PURE__ */ jsx33("span", { children: t("activity:message.inputLabel") })
+              /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  className: cn(
+                    "max-w-full rounded-lg shadow-sm",
+                    compactMode ? "px-3 py-1.5" : "px-4 py-3",
+                    isUser ? "bg-primary text-primary-foreground rounded-br-sm msg-user-bubble" : isTool ? message.isError ? "bg-destructive/5 border border-destructive/25 text-destructive" : "bg-muted/70 border border-border/60 text-foreground" : "bg-card border border-border/70 text-foreground",
+                    message.isError && !isTool && "border-destructive/20",
+                    isUser && message.status === "failed" && "opacity-60 ring-1 ring-destructive/30"
+                  ),
+                  children: isTool ? (() => {
+                    const expanded = !!expandedTools[message.id];
+                    const inputSummary = message.toolInput !== void 0 ? summarizeToolInput(message.toolName, message.toolInput) : "";
+                    const lines = message.toolResult ? message.toolResult.split("\n").length : 0;
+                    return /* @__PURE__ */ jsxs29("div", { className: "space-y-1 tool-details", children: [
+                      inputSummary && !expanded && /* @__PURE__ */ jsx33("div", { className: "text-xs text-muted-foreground font-mono truncate", children: inputSummary }),
+                      message.toolResult === void 0 && message.progressLines && message.progressLines.length > 0 && /* @__PURE__ */ jsx33("div", { className: "mt-1 rounded-md border border-warning/20 bg-warning/5 p-1.5 text-[11px] font-mono leading-snug max-h-32 overflow-auto", children: (() => {
+                        const seen = /* @__PURE__ */ new Map();
+                        return message.progressLines.slice(-6).map((line) => {
+                          const occurrence = seen.get(line) ?? 0;
+                          seen.set(line, occurrence + 1);
+                          return /* @__PURE__ */ jsx33(
+                            "div",
+                            {
+                              className: "truncate text-muted-foreground",
+                              children: line
+                            },
+                            `${line}-${occurrence}`
+                          );
+                        });
+                      })() }),
+                      expanded && message.toolInput !== void 0 && (() => {
+                        const diff = diffFromToolInput(message.toolName, message.toolInput);
+                        if (diff) return /* @__PURE__ */ jsx33(ToolDiffView, { diff });
+                        return /* @__PURE__ */ jsxs29("div", { className: "p-3 bg-muted/50 rounded-lg overflow-x-auto", children: [
+                          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1 text-muted-foreground mb-2 text-xs", children: [
+                            /* @__PURE__ */ jsx33(Clock3, { className: "h-3 w-3" }),
+                            /* @__PURE__ */ jsx33("span", { children: t("activity:message.inputLabel") })
+                          ] }),
+                          /* @__PURE__ */ jsx33(ToolInputView, { input: message.toolInput })
+                        ] });
+                      })(),
+                      expanded && message.toolResult !== void 0 && message.toolResult.length > 0 && /* @__PURE__ */ jsxs29("div", { className: "relative group/tool", children: [
+                        /* @__PURE__ */ jsx33(
+                          ToolResult,
+                          {
+                            toolName: message.toolName,
+                            result: message.toolResult,
+                            isError: message.isError
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs29("div", { className: "absolute top-1.5 right-1.5 flex items-center gap-1 opacity-0 group-hover/tool:opacity-100 transition-opacity", children: [
+                          /* @__PURE__ */ jsx33(
+                            CopyButton,
+                            {
+                              text: message.toolResult,
+                              label: "",
+                              className: "bg-background/80 border rounded px-1.5 py-0.5"
+                            }
+                          ),
+                          message.toolResult.split("\n").length > 5 && /* @__PURE__ */ jsx33(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (ev) => {
+                                ev.stopPropagation();
+                                const ext = fileExtensionFor(message.toolName);
+                                const base = (message.toolName ?? "output").replace(/[^a-z0-9_-]+/gi, "-").toLowerCase();
+                                downloadTextFile(
+                                  `${base}-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.${ext}`,
+                                  message.toolResult ?? ""
+                                );
+                              },
+                              className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground bg-background/80 border rounded px-1.5 py-0.5",
+                              title: t("activity:message.downloadTitle"),
+                              children: /* @__PURE__ */ jsx33(Download2, { className: "h-3 w-3" })
+                            }
+                          )
+                        ] })
                       ] }),
-                      /* @__PURE__ */ jsx33(ToolInputView, { input: message.toolInput })
+                      expanded && message.toolResult !== void 0 && message.toolResult.length === 0 && /* @__PURE__ */ jsx33("span", { className: "text-xs text-muted-foreground italic", children: t("activity:message.empty") }),
+                      !expanded && message.isError && message.toolResult && /* @__PURE__ */ jsx33("div", { className: "text-xs font-mono text-destructive truncate", children: message.toolResult.split("\n")[0] }),
+                      (message.toolResult !== void 0 && message.toolResult.length > 0 || message.toolInput !== void 0 && Object.keys(message.toolInput ?? {}).length > 0) && /* @__PURE__ */ jsx33(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => toggleTool(message.id),
+                          className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+                          children: expanded ? t("activity:message.hideDetails") : lines > 0 ? t("activity:message.showDetailsLines", { count: lines }) : t("activity:message.showDetails")
+                        }
+                      )
                     ] });
-                  })(),
-                  expanded && message.toolResult !== void 0 && message.toolResult.length > 0 && /* @__PURE__ */ jsxs29("div", { className: "relative group/tool", children: [
+                  })() : editing && isUser ? /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-2 min-w-[280px]", children: [
                     /* @__PURE__ */ jsx33(
-                      ToolResult,
+                      "textarea",
                       {
-                        toolName: message.toolName,
-                        result: message.toolResult,
-                        isError: message.isError
+                        value: editValue,
+                        onChange: (e) => setEditValue(e.target.value),
+                        onKeyDown: (e) => {
+                          if (e.key === "Escape") {
+                            e.preventDefault();
+                            cancelEdit();
+                          } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                            e.preventDefault();
+                            saveEdit();
+                          }
+                        },
+                        rows: Math.min(8, Math.max(2, editValue.split("\n").length)),
+                        className: "w-full resize-none rounded-md border bg-background text-foreground px-2 py-1.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-ring"
                       }
                     ),
-                    /* @__PURE__ */ jsxs29("div", { className: "absolute top-1.5 right-1.5 flex items-center gap-1 opacity-0 group-hover/tool:opacity-100 transition-opacity", children: [
-                      /* @__PURE__ */ jsx33(CopyButton, { text: message.toolResult, label: "", className: "bg-background/80 border rounded px-1.5 py-0.5" }),
-                      message.toolResult.split("\n").length > 5 && /* @__PURE__ */ jsx33(
+                    /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between gap-2", children: [
+                      /* @__PURE__ */ jsx33("span", { className: "text-[10px] text-primary-foreground/60", children: t("activity:message.editHint") }),
+                      /* @__PURE__ */ jsxs29("div", { className: "flex gap-1", children: [
+                        /* @__PURE__ */ jsx33(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: cancelEdit,
+                            className: "text-xs px-2 py-0.5 rounded border border-primary-foreground/30 hover:bg-primary-foreground/10",
+                            children: t("common:action.cancel")
+                          }
+                        ),
+                        /* @__PURE__ */ jsx33(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: saveEdit,
+                            disabled: !editValue.trim(),
+                            className: "text-xs px-2 py-0.5 rounded bg-primary-foreground text-primary disabled:opacity-50",
+                            children: t("activity:message.saveResend")
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }) : message.thinkingLog && showThinkingLogs ? (() => {
+                    const log = message.thinkingLog;
+                    const lineCount2 = log.text.split("\n").length;
+                    const seconds = Math.max(0.1, log.durationMs / 1e3);
+                    const durationLabel = log.replayed ? t("activity:message.replay") : `${seconds.toFixed(seconds < 10 ? 1 : 0)}s`;
+                    const preview2 = log.text.split("\n").slice(-4).join("\n").trim();
+                    return /* @__PURE__ */ jsxs29("div", { className: "min-w-0 max-w-full sm:max-w-[720px]", children: [
+                      /* @__PURE__ */ jsxs29(
                         "button",
                         {
                           type: "button",
-                          onClick: (ev) => {
-                            ev.stopPropagation();
-                            const ext = fileExtensionFor(message.toolName);
-                            const base = (message.toolName ?? "output").replace(/[^a-z0-9_-]+/gi, "-").toLowerCase();
-                            downloadTextFile(`${base}-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.${ext}`, message.toolResult ?? "");
-                          },
-                          className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground bg-background/80 border rounded px-1.5 py-0.5",
-                          title: t("activity:message.downloadTitle"),
-                          children: /* @__PURE__ */ jsx33(Download2, { className: "h-3 w-3" })
+                          onClick: () => setThinkingExpanded((v) => !v),
+                          className: "flex w-full flex-wrap items-center gap-x-2 gap-y-1 text-left text-sm font-medium text-primary",
+                          "aria-expanded": thinkingExpanded,
+                          children: [
+                            /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground/75", children: thinkingExpanded ? /* @__PURE__ */ jsx33(ChevronDown4, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx33(ChevronRight4, { className: "h-3.5 w-3.5" }) }),
+                            /* @__PURE__ */ jsx33(Brain3, { className: "h-3.5 w-3.5" }),
+                            /* @__PURE__ */ jsx33("span", { className: "min-w-0", children: t("activity:message.thinkingProcess") }),
+                            /* @__PURE__ */ jsx33("span", { className: "ml-0 text-[10px] font-mono font-normal text-muted-foreground sm:ml-auto", children: t("activity:message.thinkingMeta", {
+                              iter: log.iteration,
+                              dur: durationLabel,
+                              lines: t("activity:message.linesSuffix", { count: lineCount2 })
+                            }) })
+                          ]
                         }
-                      )
-                    ] })
-                  ] }),
-                  expanded && message.toolResult !== void 0 && message.toolResult.length === 0 && /* @__PURE__ */ jsx33("span", { className: "text-xs text-muted-foreground italic", children: t("activity:message.empty") }),
-                  !expanded && message.isError && message.toolResult && /* @__PURE__ */ jsx33("div", { className: "text-xs font-mono text-destructive truncate", children: message.toolResult.split("\n")[0] }),
-                  (message.toolResult !== void 0 && message.toolResult.length > 0 || message.toolInput !== void 0 && Object.keys(message.toolInput ?? {}).length > 0) && /* @__PURE__ */ jsx33("button", { type: "button", onClick: () => toggleTool(message.id), className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: expanded ? t("activity:message.hideDetails") : lines > 0 ? t("activity:message.showDetailsLines", { count: lines }) : t("activity:message.showDetails") })
-                ] });
-              })() : editing && isUser ? /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-2 min-w-[280px]", children: [
-                /* @__PURE__ */ jsx33(
-                  "textarea",
-                  {
-                    value: editValue,
-                    onChange: (e) => setEditValue(e.target.value),
-                    onKeyDown: (e) => {
-                      if (e.key === "Escape") {
-                        e.preventDefault();
-                        cancelEdit();
-                      } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                        e.preventDefault();
-                        saveEdit();
-                      }
-                    },
-                    rows: Math.min(8, Math.max(2, editValue.split("\n").length)),
-                    className: "w-full resize-none rounded-md border bg-background text-foreground px-2 py-1.5 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-ring"
-                  }
-                ),
-                /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx33("span", { className: "text-[10px] text-primary-foreground/60", children: t("activity:message.editHint") }),
-                  /* @__PURE__ */ jsxs29("div", { className: "flex gap-1", children: [
-                    /* @__PURE__ */ jsx33("button", { type: "button", onClick: cancelEdit, className: "text-xs px-2 py-0.5 rounded border border-primary-foreground/30 hover:bg-primary-foreground/10", children: t("common:action.cancel") }),
-                    /* @__PURE__ */ jsx33("button", { type: "button", onClick: saveEdit, disabled: !editValue.trim(), className: "text-xs px-2 py-0.5 rounded bg-primary-foreground text-primary disabled:opacity-50", children: t("activity:message.saveResend") })
-                  ] })
-                ] })
-              ] }) : message.thinkingLog && showThinkingLogs ? (() => {
-                const log = message.thinkingLog;
-                const lineCount2 = log.text.split("\n").length;
-                const seconds = Math.max(0.1, log.durationMs / 1e3);
-                const durationLabel = log.replayed ? t("activity:message.replay") : `${seconds.toFixed(seconds < 10 ? 1 : 0)}s`;
-                const preview2 = log.text.split("\n").slice(-4).join("\n").trim();
-                return /* @__PURE__ */ jsxs29("div", { className: "min-w-0 max-w-full sm:max-w-[720px]", children: [
-                  /* @__PURE__ */ jsxs29(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setThinkingExpanded((v) => !v),
-                      className: "flex w-full flex-wrap items-center gap-x-2 gap-y-1 text-left text-sm font-medium text-primary",
-                      "aria-expanded": thinkingExpanded,
-                      children: [
-                        /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground/75", children: thinkingExpanded ? /* @__PURE__ */ jsx33(ChevronDown4, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx33(ChevronRight4, { className: "h-3.5 w-3.5" }) }),
-                        /* @__PURE__ */ jsx33(Brain3, { className: "h-3.5 w-3.5" }),
-                        /* @__PURE__ */ jsx33("span", { className: "min-w-0", children: t("activity:message.thinkingProcess") }),
-                        /* @__PURE__ */ jsx33("span", { className: "ml-0 text-[10px] font-mono font-normal text-muted-foreground sm:ml-auto", children: t("activity:message.thinkingMeta", { iter: log.iteration, dur: durationLabel, lines: t("activity:message.linesSuffix", { count: lineCount2 }) }) })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx33("pre", { className: cn(
-                    "mt-2 whitespace-pre-wrap break-words rounded-lg border border-primary/20 bg-primary/[0.04] p-3 font-mono text-xs leading-relaxed text-foreground/80",
-                    thinkingExpanded ? "max-h-[32rem] overflow-auto" : "max-h-24 overflow-hidden"
-                  ), children: thinkingExpanded ? log.text : preview2 || log.text }),
-                  /* @__PURE__ */ jsxs29("div", { className: "mt-2 flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx33(CopyButton, { text: log.text, label: t("activity:message.copyLog"), className: "opacity-70 hover:opacity-100 transition-opacity" }),
-                    !thinkingExpanded && lineCount2 > 4 && /* @__PURE__ */ jsx33(
-                      "button",
+                      ),
+                      /* @__PURE__ */ jsx33(
+                        "pre",
+                        {
+                          className: cn(
+                            "mt-2 whitespace-pre-wrap break-words rounded-lg border border-primary/20 bg-primary/[0.04] p-3 font-mono text-xs leading-relaxed text-foreground/80",
+                            thinkingExpanded ? "max-h-[32rem] overflow-auto" : "max-h-24 overflow-hidden"
+                          ),
+                          children: thinkingExpanded ? log.text : preview2 || log.text
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs29("div", { className: "mt-2 flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx33(
+                          CopyButton,
+                          {
+                            text: log.text,
+                            label: t("activity:message.copyLog"),
+                            className: "opacity-70 hover:opacity-100 transition-opacity"
+                          }
+                        ),
+                        !thinkingExpanded && lineCount2 > 4 && /* @__PURE__ */ jsx33(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setThinkingExpanded(true),
+                            className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+                            children: t("activity:message.showFullLog")
+                          }
+                        )
+                      ] })
+                    ] });
+                  })() : (() => {
+                    if (hideEmptyReasoning) return null;
+                    const renderedContent = message.content;
+                    const hasAttachments = !!message.attachments && message.attachments.length > 0;
+                    return /* @__PURE__ */ jsxs29(
+                      "div",
                       {
-                        type: "button",
-                        onClick: () => setThinkingExpanded(true),
-                        className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
-                        children: t("activity:message.showFullLog")
+                        className: cn(
+                          "text-sm leading-relaxed markdown-content",
+                          message.streaming && "streaming-cursor"
+                        ),
+                        children: [
+                          hasAttachments && /* @__PURE__ */ jsx33(
+                            AttachmentGallery,
+                            {
+                              attachments: message.attachments ?? [],
+                              notRetainedLabel: t("activity:message.imageNotRetained")
+                            }
+                          ),
+                          renderedContent ? showRaw && message.role === "assistant" ? /* @__PURE__ */ jsx33("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground/90 max-h-[40rem] overflow-auto", children: message.content }) : message.role === "assistant" && message.isError ? /* @__PURE__ */ jsx33(ErrorBodyWithStack, { text: message.content }) : message.streaming ? (
+                            // While streaming, avoid re-parsing the whole growing
+                            // message through remark on every frame — see
+                            // StreamingMarkdown for the stable-prefix strategy.
+                            /* @__PURE__ */ jsx33(StreamingMarkdown, { text: renderedContent })
+                          ) : /* @__PURE__ */ jsx33(
+                            LazyMarkdown,
+                            {
+                              remarkPlugins: [remarkGfm2],
+                              rehypePlugins,
+                              components: markdownComponents,
+                              children: renderedContent
+                            }
+                          ) : message.streaming ? /* @__PURE__ */ jsx33("span", { className: "inline-block animate-pulse text-muted-foreground", children: t("activity:message.typing") }) : hasAttachments ? null : /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground italic", children: t("activity:message.noContent") })
+                        ]
                       }
-                    )
-                  ] })
-                ] });
-              })() : (() => {
-                if (hideEmptyReasoning) return null;
-                const renderedContent = message.content;
-                const hasAttachments = !!message.attachments && message.attachments.length > 0;
-                return /* @__PURE__ */ jsxs29("div", { className: cn("text-sm leading-relaxed markdown-content", message.streaming && "streaming-cursor"), children: [
-                  hasAttachments && /* @__PURE__ */ jsx33(
-                    AttachmentGallery,
-                    {
-                      attachments: message.attachments ?? [],
-                      notRetainedLabel: t("activity:message.imageNotRetained")
-                    }
-                  ),
-                  renderedContent ? showRaw && message.role === "assistant" ? /* @__PURE__ */ jsx33("pre", { className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground/90 max-h-[40rem] overflow-auto", children: message.content }) : message.role === "assistant" && message.isError ? /* @__PURE__ */ jsx33(ErrorBodyWithStack, { text: message.content }) : message.streaming ? (
-                    // While streaming, avoid re-parsing the whole growing
-                    // message through remark on every frame — see
-                    // StreamingMarkdown for the stable-prefix strategy.
-                    /* @__PURE__ */ jsx33(StreamingMarkdown, { text: renderedContent })
-                  ) : /* @__PURE__ */ jsx33(LazyMarkdown, { remarkPlugins: [remarkGfm2], rehypePlugins, components: markdownComponents, children: renderedContent }) : message.streaming ? /* @__PURE__ */ jsx33("span", { className: "inline-block animate-pulse text-muted-foreground", children: t("activity:message.typing") }) : hasAttachments ? null : /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground italic", children: t("activity:message.noContent") })
-                ] });
-              })() }),
+                    );
+                  })()
+                }
+              ),
               isUser && message.status === "failed" && /* @__PURE__ */ jsx33("span", { className: "text-[10px] font-medium text-destructive flex items-center gap-1 px-1", children: t("activity:message.failedToSend") }),
               nextSteps.length > 0 && /* @__PURE__ */ jsx33(
                 NextStepsBar,
@@ -63893,75 +64114,139 @@ var MessageBubble = memo4(function MessageBubble2({
                   canAutoSubmit: canAutoSubmitNow
                 }
               ),
-              /* @__PURE__ */ jsxs29("div", { className: cn("flex max-w-full flex-wrap items-center gap-2 px-1", isUser ? "flex-row-reverse" : "flex-row"), children: [
-                !hideEmptyReasoning && /* @__PURE__ */ jsxs29(Fragment10, { children: [
-                  /* @__PURE__ */ jsx33("span", { className: "text-xs text-muted-foreground/70", children: new Date(message.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }),
-                  /* @__PURE__ */ jsx33("span", { className: "w-px h-3 bg-border/60 shrink-0", "aria-hidden": true })
-                ] }),
-                message.runSummary && /* @__PURE__ */ jsxs29(
-                  "span",
-                  {
-                    className: "text-[10px] text-muted-foreground/75 font-mono tabular-nums",
-                    title: [t("activity:message.rsIterations", { n: message.runSummary.iterations }), t("activity:message.rsTools", { n: message.runSummary.tools }), t("activity:message.rsElapsed", { s: `${(message.runSummary.durationMs / 1e3).toFixed(2)}s` }), message.runSummary.costDelta > 0 ? t("activity:message.rsCost", { c: message.runSummary.costDelta.toFixed(4) }) : ""].filter(Boolean).join("  \xB7  "),
-                    children: [
-                      message.runSummary.iterations,
-                      " iter",
-                      message.runSummary.tools > 0 ? ` \xB7 ${message.runSummary.tools} tool${message.runSummary.tools === 1 ? "" : "s"}` : "",
-                      " \xB7 ",
-                      message.runSummary.durationMs < 6e4 ? `${(message.runSummary.durationMs / 1e3).toFixed(1)}s` : `${Math.floor(message.runSummary.durationMs / 6e4)}m ${Math.floor(message.runSummary.durationMs % 6e4 / 1e3)}s`,
-                      message.runSummary.costDelta > 0 ? ` \xB7 ${message.runSummary.costDelta >= 0.01 ? message.runSummary.costDelta.toFixed(4) : message.runSummary.costDelta.toFixed(6).replace(/0+$/, "").replace(/\.$/, "")}` : ""
-                    ]
-                  }
-                ),
-                message.usage && (message.usage.input > 0 || message.usage.output > 0) && (() => {
-                  const u = message.usage;
-                  const dollars = (u.input * inputCost + u.output * outputCost + (u.cacheRead ?? 0) * cacheReadCost) / 1e6;
-                  const haveCost = inputCost > 0 || outputCost > 0;
-                  const dollarStr = dollars >= 0.01 ? `${dollars.toFixed(4)}` : dollars > 0 ? `${dollars.toFixed(6).replace(/0+$/, "").replace(/\.$/, "")}` : "";
-                  return /* @__PURE__ */ jsxs29("span", { className: "text-[10px] text-muted-foreground/75 font-mono tabular-nums", title: [t("activity:message.useInput", { n: u.input.toLocaleString() }), t("activity:message.useOutput", { n: u.output.toLocaleString() }), u.cacheRead ? t("activity:message.useCacheRead", { n: u.cacheRead.toLocaleString() }) : "", haveCost ? t("activity:message.useCost", { c: dollarStr }) : ""].filter(Boolean).join("  \xB7  "), children: [
-                    u.input.toLocaleString(),
-                    "\u2192",
-                    u.output.toLocaleString(),
-                    u.cacheRead ? ` \xB7 ${u.cacheRead.toLocaleString()} \u21BA` : "",
-                    haveCost && dollarStr ? ` \xB7 ${dollarStr}` : ""
-                  ] });
-                })(),
-                !isTool && message.content && !message.streaming && /* @__PURE__ */ jsx33(CopyButton, { text: message.content, label: t("common:action.copy"), className: "opacity-50 hover:opacity-100 transition-opacity" }),
-                message.role === "assistant" && message.content && !message.streaming && /* @__PURE__ */ jsxs29(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setShowRaw((v) => !v),
-                    title: showRaw ? t("activity:message.showRenderedTitle") : t("activity:message.showRawTitle"),
-                    className: cn("text-xs inline-flex items-center gap-1 transition-opacity", showRaw ? "text-primary hover:text-primary/80 opacity-100" : "opacity-50 hover:opacity-100 text-muted-foreground hover:text-foreground"),
-                    children: [
-                      /* @__PURE__ */ jsx33(FileCode22, { className: "h-3 w-3" }),
-                      /* @__PURE__ */ jsx33("span", { children: showRaw ? t("activity:message.renderedLabel") : t("activity:message.rawLabel") })
-                    ]
-                  }
-                ),
-                isUser && !editing && !isLoading && message.content && /* @__PURE__ */ jsxs29("button", { type: "button", onClick: startEdit, title: t("activity:message.editTitle"), className: "opacity-50 hover:opacity-100 transition-opacity text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx33(Pencil2, { className: "h-3 w-3" }),
-                  /* @__PURE__ */ jsx33("span", { children: t("activity:message.editLabel") })
-                ] }),
-                message.role === "assistant" && message.content && !message.streaming && /* @__PURE__ */ jsxs29(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => togglePin(message.id),
-                    title: isPinned ? t("activity:message.unpinTitle") : t("activity:message.pinTitle"),
-                    className: cn("text-xs inline-flex items-center gap-1 transition-opacity", isPinned ? "text-warning hover:text-warning/85 opacity-100" : "opacity-50 hover:opacity-100 text-muted-foreground hover:text-foreground"),
-                    children: [
-                      isPinned ? /* @__PURE__ */ jsx33(PinOff, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx33(Pin, { className: "h-3 w-3" }),
-                      /* @__PURE__ */ jsx33("span", { children: isPinned ? t("activity:message.pinnedLabel") : t("activity:message.pinLabel") })
-                    ]
-                  }
-                ),
-                isLatestAssistant && message.content && !message.streaming && /* @__PURE__ */ jsxs29("button", { type: "button", onClick: regenerate, title: t("activity:message.regenerateTitle"), className: "opacity-50 hover:opacity-100 transition-opacity text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx33(RotateCcw2, { className: "h-3 w-3" }),
-                  /* @__PURE__ */ jsx33("span", { children: t("activity:message.retryLabel") })
-                ] })
-              ] })
+              /* @__PURE__ */ jsxs29(
+                "div",
+                {
+                  className: cn(
+                    "flex max-w-full flex-wrap items-center gap-2 px-1",
+                    isUser ? "flex-row-reverse" : "flex-row"
+                  ),
+                  children: [
+                    !hideEmptyReasoning && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+                      /* @__PURE__ */ jsx33("span", { className: "text-xs text-muted-foreground/70", children: new Date(message.timestamp).toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit"
+                      }) }),
+                      /* @__PURE__ */ jsx33("span", { className: "w-px h-3 bg-border/60 shrink-0", "aria-hidden": true })
+                    ] }),
+                    message.runSummary && /* @__PURE__ */ jsxs29(
+                      "span",
+                      {
+                        className: "text-[10px] text-muted-foreground/75 font-mono tabular-nums",
+                        title: [
+                          t("activity:message.rsIterations", { n: message.runSummary.iterations }),
+                          t("activity:message.rsTools", { n: message.runSummary.tools }),
+                          t("activity:message.rsElapsed", {
+                            s: `${(message.runSummary.durationMs / 1e3).toFixed(2)}s`
+                          }),
+                          message.runSummary.costDelta > 0 ? t("activity:message.rsCost", { c: message.runSummary.costDelta.toFixed(4) }) : ""
+                        ].filter(Boolean).join("  \xB7  "),
+                        children: [
+                          message.runSummary.iterations,
+                          " iter",
+                          message.runSummary.tools > 0 ? ` \xB7 ${message.runSummary.tools} tool${message.runSummary.tools === 1 ? "" : "s"}` : "",
+                          " ",
+                          "\xB7",
+                          " ",
+                          message.runSummary.durationMs < 6e4 ? `${(message.runSummary.durationMs / 1e3).toFixed(1)}s` : `${Math.floor(message.runSummary.durationMs / 6e4)}m ${Math.floor(message.runSummary.durationMs % 6e4 / 1e3)}s`,
+                          message.runSummary.costDelta > 0 ? ` \xB7 ${message.runSummary.costDelta >= 0.01 ? message.runSummary.costDelta.toFixed(4) : message.runSummary.costDelta.toFixed(6).replace(/0+$/, "").replace(/\.$/, "")}` : ""
+                        ]
+                      }
+                    ),
+                    message.usage && (message.usage.input > 0 || message.usage.output > 0) && (() => {
+                      const u = message.usage;
+                      const dollars = (u.input * inputCost + u.output * outputCost + (u.cacheRead ?? 0) * cacheReadCost) / 1e6;
+                      const haveCost = inputCost > 0 || outputCost > 0;
+                      const dollarStr = dollars >= 0.01 ? `${dollars.toFixed(4)}` : dollars > 0 ? `${dollars.toFixed(6).replace(/0+$/, "").replace(/\.$/, "")}` : "";
+                      return /* @__PURE__ */ jsxs29(
+                        "span",
+                        {
+                          className: "text-[10px] text-muted-foreground/75 font-mono tabular-nums",
+                          title: [
+                            t("activity:message.useInput", { n: u.input.toLocaleString() }),
+                            t("activity:message.useOutput", { n: u.output.toLocaleString() }),
+                            u.cacheRead ? t("activity:message.useCacheRead", { n: u.cacheRead.toLocaleString() }) : "",
+                            haveCost ? t("activity:message.useCost", { c: dollarStr }) : ""
+                          ].filter(Boolean).join("  \xB7  "),
+                          children: [
+                            u.input.toLocaleString(),
+                            "\u2192",
+                            u.output.toLocaleString(),
+                            u.cacheRead ? ` \xB7 ${u.cacheRead.toLocaleString()} \u21BA` : "",
+                            haveCost && dollarStr ? ` \xB7 ${dollarStr}` : ""
+                          ]
+                        }
+                      );
+                    })(),
+                    !isTool && message.content && !message.streaming && /* @__PURE__ */ jsx33(
+                      CopyButton,
+                      {
+                        text: message.content,
+                        label: t("common:action.copy"),
+                        className: "opacity-50 hover:opacity-100 transition-opacity"
+                      }
+                    ),
+                    message.role === "assistant" && message.content && !message.streaming && /* @__PURE__ */ jsxs29(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowRaw((v) => !v),
+                        title: showRaw ? t("activity:message.showRenderedTitle") : t("activity:message.showRawTitle"),
+                        className: cn(
+                          "text-xs inline-flex items-center gap-1 transition-opacity",
+                          showRaw ? "text-primary hover:text-primary/80 opacity-100" : "opacity-50 hover:opacity-100 text-muted-foreground hover:text-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx33(FileCode22, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx33("span", { children: showRaw ? t("activity:message.renderedLabel") : t("activity:message.rawLabel") })
+                        ]
+                      }
+                    ),
+                    isUser && !editing && !isLoading && message.content && /* @__PURE__ */ jsxs29(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: startEdit,
+                        title: t("activity:message.editTitle"),
+                        className: "opacity-50 hover:opacity-100 transition-opacity text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1",
+                        children: [
+                          /* @__PURE__ */ jsx33(Pencil2, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx33("span", { children: t("activity:message.editLabel") })
+                        ]
+                      }
+                    ),
+                    message.role === "assistant" && message.content && !message.streaming && /* @__PURE__ */ jsxs29(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => togglePin(message.id),
+                        title: isPinned ? t("activity:message.unpinTitle") : t("activity:message.pinTitle"),
+                        className: cn(
+                          "text-xs inline-flex items-center gap-1 transition-opacity",
+                          isPinned ? "text-warning hover:text-warning/85 opacity-100" : "opacity-50 hover:opacity-100 text-muted-foreground hover:text-foreground"
+                        ),
+                        children: [
+                          isPinned ? /* @__PURE__ */ jsx33(PinOff, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx33(Pin, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx33("span", { children: isPinned ? t("activity:message.pinnedLabel") : t("activity:message.pinLabel") })
+                        ]
+                      }
+                    ),
+                    isLatestAssistant && message.content && !message.streaming && /* @__PURE__ */ jsxs29(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: regenerate,
+                        title: t("activity:message.regenerateTitle"),
+                        className: "opacity-50 hover:opacity-100 transition-opacity text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1",
+                        children: [
+                          /* @__PURE__ */ jsx33(RotateCcw2, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx33("span", { children: t("activity:message.retryLabel") })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -70153,7 +70438,7 @@ function ModelSection({
           badges: m.capabilities,
           detail: [
             m.contextWindow ? `${Math.round(m.contextWindow / 1e3)}k` : "",
-            m.inputCost != null ? `\${m.inputCost}/\${m.outputCost}` : ""
+            m.inputCost != null ? `${m.inputCost}/${m.outputCost}` : ""
           ].filter(Boolean).join(" \xB7 "),
           detailHighlight: true
         })),