feat(webui): polish agent output and app discovery

webui/src/App.tsx

@@ -1,4 +1,6 @@
 import {
+  lazy,
+  Suspense,
   useCallback,
   useEffect,
   useMemo,
@@ -9,11 +11,8 @@ import {
 import { Moon, PanelLeft, ShieldCheck, Sun, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { channelUiPresentation } from "@/channel-plugins/registry";
-import { DeleteConfirm } from "@/components/DeleteConfirm";
-import { RenameChatDialog } from "@/components/RenameChatDialog";
 import { Sidebar } from "@/components/Sidebar";
-import { SessionSearchDialog } from "@/components/SessionSearchDialog";
-import { SettingsView, type SettingsSectionKey } from "@/components/settings/SettingsView";
+import type { SettingsSectionKey } from "@/components/settings/SettingsView";
 import { ThreadShell } from "@/components/thread/ThreadShell";
 import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
 
@@ -22,6 +21,7 @@ import { useDeferredTitleRefresh } from "@/hooks/useDeferredTitleRefresh";
 import { useSidebarState } from "@/hooks/useSidebarState";
 import { useSkills } from "@/hooks/useSkills";
 import { useLogoFallback } from "@/hooks/useLogoFallback";
+import { usePageVisibility } from "@/hooks/usePageVisibility";
 import { ThemeProvider, useTheme } from "@/hooks/useTheme";
 import { logoFallbackUrls } from "@/lib/provider-brand";
 import { cn } from "@/lib/utils";
@@ -88,6 +88,7 @@ const MOBILE_SIDEBAR_WIDTH = `min(${SIDEBAR_WIDTH}px, calc(100vw - 0.75rem))`;
 const TOKEN_REFRESH_MARGIN_MS = 30_000;
 const TOKEN_REFRESH_MIN_DELAY_MS = 5_000;
 const PAIRING_POLL_INTERVAL_MS = 5_000;
+const PAIRING_IDLE_POLL_INTERVAL_MS = 15_000;
 const PAIRING_DISMISS_SNOOZE_MS = 30_000;
 type ShellView = "chat" | "settings" | "apps" | "automations" | "skills";
 type ShellRoute = {
@@ -96,6 +97,39 @@ type ShellRoute = {
   settingsSection: SettingsSectionKey;
 };
 
+const loadSettingsView = () => import("@/components/settings/SettingsView");
+const SettingsView = lazy(async () => {
+  const module = await loadSettingsView();
+  return { default: module.SettingsView };
+});
+const SessionSearchDialog = lazy(async () => {
+  const module = await import("@/components/SessionSearchDialog");
+  return { default: module.SessionSearchDialog };
+});
+const DeleteConfirm = lazy(async () => {
+  const module = await import("@/components/DeleteConfirm");
+  return { default: module.DeleteConfirm };
+});
+const RenameChatDialog = lazy(async () => {
+  const module = await import("@/components/RenameChatDialog");
+  return { default: module.RenameChatDialog };
+});
+
+function SurfaceLoadingFallback() {
+  return (
+    <div
+      aria-busy="true"
+      className="flex h-full w-full flex-col gap-5 px-5 py-8 sm:px-8 lg:px-12"
+    >
+      <span className="sr-only">Loading</span>
+      <div className="h-4 w-20 animate-pulse rounded bg-muted/70 motion-reduce:animate-none" />
+      <div className="h-9 w-48 animate-pulse rounded bg-muted/70 motion-reduce:animate-none" />
+      <div className="mt-4 h-12 w-full max-w-3xl animate-pulse rounded-md bg-muted/55 motion-reduce:animate-none" />
+      <div className="h-28 w-full max-w-3xl animate-pulse rounded-md bg-muted/40 motion-reduce:animate-none" />
+    </div>
+  );
+}
+
 const SETTINGS_SECTION_KEYS: SettingsSectionKey[] = [
   "overview",
   "appearance",
@@ -952,6 +986,7 @@ function Shell({
   const [updatedChatIds, setUpdatedChatIds] = useState<Set<string>>(readSessionUpdateChatIds);
   const [workspaces, setWorkspaces] = useState<WorkspacesPayload | null>(null);
   const skills = useSkills(token);
+  const pageVisible = usePageVisibility();
   const [settingsSnapshot, setSettingsSnapshot] = useState<SettingsPayload | null>(null);
   const [workspaceError, setWorkspaceError] = useState<string | null>(null);
   const [draftWorkspaceScope, setDraftWorkspaceScope] =
@@ -1020,7 +1055,7 @@ function Shell({
     writeSessionUpdateChatIds(updatedChatIds);
   }, [updatedChatIds]);
 
-  const refreshPairingRequests = useCallback(async () => {
+  const refreshPairingRequests = useCallback(async (): Promise<number> => {
     try {
       const payload = await fetchPairingRequests(token);
       const requests = Array.isArray(payload.requests) ? payload.requests : [];
@@ -1036,19 +1071,33 @@ function Shell({
         );
         return next.size === current.size ? current : next;
       });
+      return requests.length;
     } catch {
       // Pairing is an opportunistic WebUI affordance. The slash command path
       // remains available if this polling request fails.
+      return 0;
     }
   }, [token]);
 
   useEffect(() => {
-    void refreshPairingRequests();
-    const timer = window.setInterval(() => {
-      void refreshPairingRequests();
-    }, PAIRING_POLL_INTERVAL_MS);
-    return () => window.clearInterval(timer);
-  }, [refreshPairingRequests]);
+    if (!pageVisible) return undefined;
+
+    let disposed = false;
+    let timer: number | null = null;
+    const poll = async () => {
+      const requestCount = await refreshPairingRequests();
+      if (disposed) return;
+      timer = window.setTimeout(
+        () => void poll(),
+        requestCount > 0 ? PAIRING_POLL_INTERVAL_MS : PAIRING_IDLE_POLL_INTERVAL_MS,
+      );
+    };
+    void poll();
+    return () => {
+      disposed = true;
+      if (timer !== null) window.clearTimeout(timer);
+    };
+  }, [pageVisible, refreshPairingRequests]);
 
   const activeSession = useMemo<ChatSummary | null>(() => {
     if (!activeKey) return null;
@@ -1578,6 +1627,10 @@ function Shell({
     setMobileSidebarOpen(false);
   }, [activeKey, navigate]);
 
+  const onSettingsIntent = useCallback(() => {
+    void loadSettingsView();
+  }, []);
+
   const onOpenModelSettings = useCallback(() => {
     onOpenSettings("models");
   }, [onOpenSettings]);
@@ -1849,6 +1902,7 @@ function Shell({
     onOpenApps,
     onOpenAutomations,
     onOpenSkills,
+    onSettingsIntent,
     onOpenSearch: onOpenSessionSearch,
     activeUtility: view === "apps" || view === "automations" || view === "skills" ? view : null,
     onToggleArchived,
@@ -1992,15 +2046,19 @@ function Shell({
             </Sheet>
           ) : null}
 
-          <SessionSearchDialog
-            open={sessionSearchOpen}
-            onOpenChange={setSessionSearchOpen}
-            sessions={sessions}
-            activeKey={activeKey}
-            loading={loading}
-            titleOverrides={sidebarState.title_overrides}
-            onSelect={onSelectSearchResult}
-          />
+          {sessionSearchOpen ? (
+            <Suspense fallback={null}>
+              <SessionSearchDialog
+                open
+                onOpenChange={setSessionSearchOpen}
+                sessions={sessions}
+                activeKey={activeKey}
+                loading={loading}
+                titleOverrides={sidebarState.title_overrides}
+                onSelect={onSelectSearchResult}
+              />
+            </Suspense>
+          ) : null}
         <main
           className={cn(
             "relative flex h-full min-w-0 flex-1 flex-col overflow-hidden bg-background",
@@ -2009,7 +2067,7 @@ function Shell({
             <div
               className={cn(
                 "absolute inset-0 flex flex-col",
-                view !== "chat" && "invisible pointer-events-none",
+                view !== "chat" && "hidden",
               )}
             >
               <ThreadShell
@@ -2038,51 +2096,65 @@ function Shell({
             </div>
             {view !== "chat" && (
               <div className="absolute inset-0 flex flex-col">
-                <SettingsView
-                  theme={theme}
-                  initialSection={settingsInitialSection}
-                  initialSettings={settingsSnapshot}
-                  showSidebar={view === "settings"}
-                  onToggleTheme={toggle}
-                  onBackToChat={onBackToChat}
-                  onModelNameChange={onModelNameChange}
-                  onSettingsChange={setSettingsSnapshot}
-                  skills={skills}
-                  onWorkspaceSettingsChange={refreshWorkspaces}
-                  onSectionChange={onSettingsSectionChange}
-                  onLogout={onLogout}
-                  onRestart={onRestart}
-                  onNativeEngineRestart={onNativeEngineRestart}
-                  isRestarting={isRestarting}
-                  hostChromeInset={showHostChrome}
-                />
+                <Suspense fallback={<SurfaceLoadingFallback />}>
+                  <SettingsView
+                    theme={theme}
+                    initialSection={settingsInitialSection}
+                    initialSettings={settingsSnapshot}
+                    showSidebar={view === "settings"}
+                    onToggleTheme={toggle}
+                    onBackToChat={onBackToChat}
+                    onModelNameChange={onModelNameChange}
+                    onSettingsChange={setSettingsSnapshot}
+                    skills={skills}
+                    onWorkspaceSettingsChange={refreshWorkspaces}
+                    onSectionChange={onSettingsSectionChange}
+                    onLogout={onLogout}
+                    onRestart={onRestart}
+                    onNativeEngineRestart={onNativeEngineRestart}
+                    isRestarting={isRestarting}
+                    hostChromeInset={showHostChrome}
+                  />
+                </Suspense>
               </div>
             )}
           </main>
         </div>
 
-        <DeleteConfirm
-          open={!!pendingDelete}
-          title={pendingDelete?.label ?? ""}
-          automations={pendingDelete?.automations}
-          onCancel={() => setPendingDelete(null)}
-          onConfirm={onConfirmDelete}
-        />
-        <RenameChatDialog
-          open={!!pendingRename}
-          title={pendingRename?.label ?? ""}
-          onCancel={() => setPendingRename(null)}
-          onConfirm={onConfirmRename}
-        />
-        <RenameChatDialog
-          open={!!pendingProjectRename}
-          title={pendingProjectRename?.label ?? ""}
-          dialogTitle={t("chat.renameProjectTitle")}
-          description={t("chat.renameProjectDescription")}
-          placeholder={t("chat.renameProjectPlaceholder")}
-          onCancel={() => setPendingProjectRename(null)}
-          onConfirm={onConfirmProjectRename}
-        />
+        {pendingDelete ? (
+          <Suspense fallback={null}>
+            <DeleteConfirm
+              open
+              title={pendingDelete.label}
+              automations={pendingDelete.automations}
+              onCancel={() => setPendingDelete(null)}
+              onConfirm={onConfirmDelete}
+            />
+          </Suspense>
+        ) : null}
+        {pendingRename ? (
+          <Suspense fallback={null}>
+            <RenameChatDialog
+              open
+              title={pendingRename.label}
+              onCancel={() => setPendingRename(null)}
+              onConfirm={onConfirmRename}
+            />
+          </Suspense>
+        ) : null}
+        {pendingProjectRename ? (
+          <Suspense fallback={null}>
+            <RenameChatDialog
+              open
+              title={pendingProjectRename.label}
+              dialogTitle={t("chat.renameProjectTitle")}
+              description={t("chat.renameProjectDescription")}
+              placeholder={t("chat.renameProjectPlaceholder")}
+              onCancel={() => setPendingProjectRename(null)}
+              onConfirm={onConfirmProjectRename}
+            />
+          </Suspense>
+        ) : null}
         {restartToast ? (
           <div
             role="status"

webui/src/components/AttachmentTile.tsx

@@ -61,7 +61,7 @@ export function AttachmentTile({ attachment, className, inline = false, variant
         <video
           src={attachment.url}
           controls
-          preload="auto"
+          preload="metadata"
           className={cn(
             "block w-full bg-black",
             variant === "compact" ? "max-h-40" : "max-h-[26rem]",

webui/src/components/MarkdownText.tsx

@@ -3,12 +3,7 @@ import {
   Suspense,
   lazy,
   memo,
-  startTransition,
-  useCallback,
   useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
   type ReactNode,
 } from "react";
 
@@ -28,17 +23,20 @@ const MemoizedMarkdownRenderer = memo(function MemoizedMarkdownRenderer({
   source,
   className,
   highlightCode,
+  streaming,
   onOpenFilePreview,
 }: {
   source: string;
   className?: string;
   highlightCode: boolean;
+  streaming: boolean;
   onOpenFilePreview?: (path: string) => void;
 }) {
   return (
     <LazyMarkdownRenderer
       className={className}
       highlightCode={highlightCode}
+      streaming={streaming}
       onOpenFilePreview={onOpenFilePreview}
     >
       {source}
@@ -46,13 +44,8 @@ const MemoizedMarkdownRenderer = memo(function MemoizedMarkdownRenderer({
   );
 });
 
-const SHORT_STREAM_COMMIT_MS = 80;
-const MEDIUM_STREAM_COMMIT_MS = 140;
-const LONG_STREAM_COMMIT_MS = 220;
-const STREAMING_HIGHLIGHT_CHAR_LIMIT = 16_000;
-
 class MarkdownRendererBoundary extends Component<
-  { children: ReactNode; fallback: ReactNode },
+  { children: ReactNode; fallback: ReactNode; resetKey: string },
   { failed: boolean }
 > {
   state = { failed: false };
@@ -61,39 +54,41 @@ class MarkdownRendererBoundary extends Component<
     return { failed: true };
   }
 
+  componentDidUpdate(previous: Readonly<{ resetKey: string }>) {
+    if (this.state.failed && previous.resetKey !== this.props.resetKey) {
+      this.setState({ failed: false });
+    }
+  }
+
   render() {
     return this.state.failed ? this.props.fallback : this.props.children;
   }
 }
 
-export function preloadMarkdownText(): void {
-  void loadMarkdownRenderer();
+export function preloadMarkdownText(): Promise<void> {
+  return loadMarkdownRenderer().then(() => undefined);
 }
 
-/**
- * Lightweight markdown renderer mirroring agent-chat-ui: GFM + math via
- * ``remark-math`` / ``rehype-katex``, and fenced code blocks delegated to
- * ``CodeBlock`` for copy-to-clipboard and syntax highlighting.
- */
+/** Lazy boundary for the heavier GFM, math, and code renderer. */
 export function MarkdownText({
   children,
   className,
   streaming = false,
   onOpenFilePreview,
 }: MarkdownTextProps) {
-  const renderedSource = useStreamingMarkdownSource(children, streaming);
-  const highlightCode = streaming
-    ? renderedSource.length <= STREAMING_HIGHLIGHT_CHAR_LIMIT
-    : renderedSource === children;
+  const renderedSource = children;
+  const renderPhase = streaming ? "streaming" : "complete";
+  const highlightCode = !streaming;
 
   useEffect(() => {
-    if (streaming) preloadMarkdownText();
+    if (streaming) void preloadMarkdownText();
   }, [streaming]);
 
   const plainFallback = (
     <div
       className={cn(
         "whitespace-pre-wrap break-words leading-relaxed text-foreground/92",
+        streaming && "streaming-text-fallback",
         className,
       )}
     >
@@ -102,73 +97,16 @@ export function MarkdownText({
   );
 
   return (
-    <MarkdownRendererBoundary fallback={plainFallback}>
+    <MarkdownRendererBoundary resetKey={renderPhase} fallback={plainFallback}>
       <Suspense fallback={plainFallback}>
         <MemoizedMarkdownRenderer
           source={renderedSource}
           className={className}
           highlightCode={highlightCode}
+          streaming={streaming}
           onOpenFilePreview={onOpenFilePreview}
         />
       </Suspense>
     </MarkdownRendererBoundary>
   );
 }
-
-function useStreamingMarkdownSource(source: string, streaming: boolean): string {
-  const [renderedSource, setRenderedSource] = useState(source);
-  const latestSourceRef = useRef(source);
-  const renderedSourceRef = useRef(source);
-  const timerRef = useRef<number | null>(null);
-
-  const clearPendingCommit = useCallback(() => {
-    if (timerRef.current !== null) {
-      window.clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  }, []);
-
-  const commitSource = useCallback((next: string, urgent: boolean) => {
-    if (renderedSourceRef.current === next) return;
-    renderedSourceRef.current = next;
-    if (urgent) {
-      setRenderedSource(next);
-      return;
-    }
-    startTransition(() => setRenderedSource(next));
-  }, []);
-
-  const scheduleCommit = useCallback(() => {
-    if (timerRef.current !== null) return;
-    timerRef.current = window.setTimeout(() => {
-      timerRef.current = null;
-      commitSource(latestSourceRef.current, false);
-    }, streamingCommitDelay(latestSourceRef.current.length));
-  }, [commitSource]);
-
-  latestSourceRef.current = source;
-
-  useLayoutEffect(() => {
-    latestSourceRef.current = source;
-    if (!streaming) {
-      clearPendingCommit();
-      commitSource(source, true);
-    }
-  }, [clearPendingCommit, commitSource, source, streaming]);
-
-  useEffect(() => {
-    latestSourceRef.current = source;
-    if (!streaming) return;
-    scheduleCommit();
-  }, [scheduleCommit, source, streaming]);
-
-  useEffect(() => clearPendingCommit, [clearPendingCommit]);
-
-  return renderedSource;
-}
-
-function streamingCommitDelay(length: number): number {
-  if (length > 24_000) return LONG_STREAM_COMMIT_MS;
-  if (length > 8_000) return MEDIUM_STREAM_COMMIT_MS;
-  return SHORT_STREAM_COMMIT_MS;
-}

webui/src/components/MarkdownTextRenderer.tsx

@@ -6,13 +6,13 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import type { Components, Options as ReactMarkdownOptions } from "react-markdown";
-import ReactMarkdown from "react-markdown";
+import { useTranslation } from "react-i18next";
 import rehypeKatex from "rehype-katex";
 import { Check, Globe2 } from "lucide-react";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
+import { Streamdown, type Components, type StreamdownProps } from "streamdown";
 
 import { AttachmentTile } from "@/components/AttachmentTile";
 import { CodeBlock } from "@/components/CodeBlock";
@@ -27,16 +27,18 @@ import {
 } from "@/components/FileReferenceChip";
 import { useLogoFallback } from "@/hooks/useLogoFallback";
 import { inferMediaKind } from "@/lib/media";
-import { faviconUrls } from "@/lib/provider-brand";
+import { browserSafeFaviconUrls } from "@/lib/provider-brand";
 import { remarkTexMath } from "@/lib/remark-tex-math";
 import { cn } from "@/lib/utils";
 
 import "katex/dist/katex.min.css";
+import "streamdown/styles.css";
 
 interface MarkdownTextRendererProps {
   children: string;
   className?: string;
   highlightCode?: boolean;
+  streaming?: boolean;
   onOpenFilePreview?: (path: string) => void;
 }
 
@@ -235,18 +237,45 @@ function remarkSafeHtmlSubset() {
   };
 }
 
-const remarkPlugins: NonNullable<ReactMarkdownOptions["remarkPlugins"]> = [
+const remarkPlugins: NonNullable<StreamdownProps["remarkPlugins"]> = [
   remarkBreaks,
   remarkGfm,
   [remarkMath, { singleDollarTextMath: false }],
   remarkTexMath,
   remarkSafeHtmlSubset,
 ];
-const rehypePlugins: NonNullable<ReactMarkdownOptions["rehypePlugins"]> = [rehypeKatex];
+const rehypePlugins: NonNullable<StreamdownProps["rehypePlugins"]> = [rehypeKatex];
+
+const DIRECT_LINKS = { enabled: false } as const;
+const SAFE_MARKDOWN_PROTOCOL = /^(https?|ircs?|mailto|xmpp)$/i;
+const STREAMING_ANIMATION = {
+  animation: "fadeIn",
+  duration: 180,
+  easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+  sep: "word",
+  stagger: 18,
+} as const;
+
+/** Preserve react-markdown's URL policy when rendering through Streamdown. */
+const safeMarkdownUrl: NonNullable<StreamdownProps["urlTransform"]> = (url) => {
+  const colon = url.indexOf(":");
+  const questionMark = url.indexOf("?");
+  const hash = url.indexOf("#");
+  const slash = url.indexOf("/");
+  const relative = colon === -1
+    || (slash !== -1 && colon > slash)
+    || (questionMark !== -1 && colon > questionMark)
+    || (hash !== -1 && colon > hash);
+  return relative || SAFE_MARKDOWN_PROTOCOL.test(url.slice(0, colon)) ? url : "";
+};
 
 function nodeText(value: ReactNode): string {
   return Children.toArray(value)
-    .map((child) => (typeof child === "string" || typeof child === "number" ? String(child) : ""))
+    .map((child) => {
+      if (typeof child === "string" || typeof child === "number") return String(child);
+      if (!isValidElement<{ children?: ReactNode }>(child)) return "";
+      return nodeText(child.props.children);
+    })
     .join("");
 }
 
@@ -272,7 +301,7 @@ function cleanFileReferenceTarget(value: string): string {
 function isPreviewableFileTarget(value: string): boolean {
   if (isFilePatternReference(value)) return false;
   if (isLikelyFilePath(value)) return true;
-  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(value)) return false;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(value)) return false;
   if (/[\\/]/.test(value)) return false;
   return /^[^?#]+\.[a-z0-9][a-z0-9_-]{0,12}$/i.test(value);
 }
@@ -382,6 +411,8 @@ function InlineLinkPreviewRow({ link }: { link: InlineLinkPreview }) {
             className="h-3 w-3 rounded-[2px] object-contain"
             decoding="async"
             loading="lazy"
+            referrerPolicy="no-referrer"
+            draggable={false}
             onLoad={onFaviconLoad}
             onError={onFaviconError}
           />
@@ -397,7 +428,7 @@ function InlineLinkPreviewRow({ link }: { link: InlineLinkPreview }) {
 }
 
 function useFaviconFallback(host: string) {
-  const faviconCandidates = useMemo(() => faviconUrls(host), [host]);
+  const faviconCandidates = useMemo(() => browserSafeFaviconUrls(host), [host]);
   const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(faviconCandidates);
 
   return {
@@ -433,11 +464,14 @@ export default function MarkdownTextRenderer({
   children,
   className,
   highlightCode = true,
+  streaming = false,
   onOpenFilePreview,
 }: MarkdownTextRendererProps) {
+  const { t } = useTranslation();
   const components = useMemo<Components>(
     () => ({
-      code({ className: cls, children: kids, ...props }) {
+      code({ className: cls, children: kids, node: _node, ...props }) {
+        void _node;
         const match = /language-(\w+)/.exec(cls || "");
         if (match) {
           const code = String(kids).replace(/\n$/, "");
@@ -447,6 +481,7 @@ export default function MarkdownTextRenderer({
               code={code}
               className="my-3"
               highlight={highlightCode}
+              showLineNumbers={code.includes("\n")}
             />
           );
         }
@@ -502,6 +537,7 @@ export default function MarkdownTextRenderer({
               code={fence.code}
               className="my-3"
               highlight={highlightCode}
+              showLineNumbers={fence.code.includes("\n")}
             />
           );
         }
@@ -517,7 +553,14 @@ export default function MarkdownTextRenderer({
           </pre>
         );
       },
-      a({ href, children: markdownChildren, ...props }) {
+      a({ href, children: markdownChildren, node: _node, ...props }) {
+        void _node;
+        if (!href) {
+          return <>{markdownChildren}</>;
+        }
+        if (href === "streamdown:incomplete-link") {
+          return <>{markdownChildren}</>;
+        }
         const filePath = fileReferenceFromLink(href);
         if (filePath) {
           const label = nodeText(markdownChildren).trim();
@@ -545,15 +588,49 @@ export default function MarkdownTextRenderer({
           </a>
         );
       },
-      table({ children, ...props }) {
-        // Wrap wide markdown tables in a horizontal-scroll container (the
-        // pattern used by DeepSeek/others) so a 6+ column table scrolls inside
-        // the conversation column instead of forcing the page wider than 100vw.
-        // min-w-max keeps natural column widths; w-full stretches narrow tables.
+      // Streamdown decorates emphasis with spans by default. Preserve native
+      // semantics for accessibility and predictable typography.
+      strong({ children: markdownChildren, node: _node, ...props }) {
+        void _node;
+        return <strong {...props}>{markdownChildren}</strong>;
+      },
+      em({ children: markdownChildren, node: _node, ...props }) {
+        void _node;
+        return <em {...props}>{markdownChildren}</em>;
+      },
+      del({ children: markdownChildren, node: _node, ...props }) {
+        void _node;
+        return <del {...props}>{markdownChildren}</del>;
+      },
+      table({ children: tableChildren, node: _node, ...props }) {
+        void _node;
         return (
-          <div className="w-full overflow-x-auto">
-            <table className="w-full min-w-max" {...props}>
-              {children}
+          <div
+            data-testid="markdown-data-table"
+            data-table-kind="data"
+            role="region"
+            tabIndex={0}
+            aria-label={t("message.dataTable", { defaultValue: "Data table" })}
+            className={cn(
+              "not-prose mb-5 mt-3 w-full max-w-full overflow-x-auto rounded-lg",
+              "border border-border/65 bg-muted/20",
+              "overscroll-x-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <table
+              className={cn(
+                "w-full min-w-max border-collapse text-[13px] leading-5",
+                "[&_thead]:bg-muted/45 [&_thead]:text-muted-foreground",
+                "[&_th]:border-b [&_th]:border-border/65 [&_th]:px-3 [&_th]:py-2",
+                "[&_th]:text-left [&_th]:font-medium",
+                "[&_td]:border-b [&_td]:border-border/55 [&_td]:px-3 [&_td]:py-2",
+                "[&_th:not(:last-child)]:border-r [&_th:not(:last-child)]:border-border/45",
+                "[&_td:not(:last-child)]:border-r [&_td:not(:last-child)]:border-border/45",
+                "[&_tbody_tr:last-child_td]:border-b-0",
+              )}
+              {...props}
+            >
+              {tableChildren}
             </table>
           </div>
         );
@@ -567,8 +644,14 @@ export default function MarkdownTextRenderer({
             </li>
           );
         }
+        const taskItem = itemClassName?.includes("task-list-item");
         return (
-          <li className={itemClassName}>
+          <li
+            className={cn(
+              itemClassName,
+              taskItem && "flex min-w-0 items-start gap-2 text-[13px] leading-5 [&>p]:m-0",
+            )}
+          >
             {markdownChildren}
           </li>
         );
@@ -579,10 +662,11 @@ export default function MarkdownTextRenderer({
           <span
             aria-hidden
             data-testid="markdown-task-checkbox"
+            data-task-checked={checked ? "true" : "false"}
             className={cn(
-              "mr-2 inline-grid h-4 w-4 translate-y-[2px] place-items-center rounded-[4px]",
-              "border border-border/70 bg-muted/55 text-background",
-              checked && "border-foreground/55 bg-foreground/65",
+              "mt-0.5 inline-grid h-4 w-4 shrink-0 place-items-center rounded-full",
+              "border border-dashed border-muted-foreground/55 bg-background text-background",
+              checked && "border-solid border-emerald-500 bg-emerald-500 text-white",
             )}
           >
             {checked ? <Check className="h-3 w-3 stroke-[3]" /> : null}
@@ -636,11 +720,21 @@ export default function MarkdownTextRenderer({
         );
       },
     }),
-    [highlightCode, onOpenFilePreview],
+    [highlightCode, onOpenFilePreview, t],
   );
 
   return (
-    <div
+    <Streamdown
+      mode={streaming ? "streaming" : "static"}
+      parseIncompleteMarkdown
+      isAnimating={streaming}
+      animated={streaming ? STREAMING_ANIMATION : false}
+      caret={streaming ? "block" : undefined}
+      linkSafety={DIRECT_LINKS}
+      urlTransform={safeMarkdownUrl}
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={components}
       className={cn(
         "markdown-content prose max-w-none dark:prose-invert",
         "prose-headings:mt-4 prose-headings:mb-2 prose-headings:font-semibold prose-headings:tracking-tight",
@@ -653,18 +747,10 @@ export default function MarkdownTextRenderer({
         "prose-hr:my-6",
         "prose-pre:my-0 prose-pre:bg-transparent prose-pre:p-0",
         "prose-code:before:content-none prose-code:after:content-none prose-code:font-normal",
-        "prose-table:my-3 prose-th:text-left prose-th:font-medium",
         className,
       )}
-      style={{ lineHeight: "var(--cjk-line-height)" }}
     >
-      <ReactMarkdown
-        remarkPlugins={remarkPlugins}
-        rehypePlugins={rehypePlugins}
-        components={components}
-      >
-        {children}
-      </ReactMarkdown>
-    </div>
+      {children}
+    </Streamdown>
   );
 }

webui/src/components/MessageBubble.tsx

@@ -12,15 +12,15 @@ import {
   Clock3,
   Copy,
   ImageIcon,
-  Sparkles,
   Wrench,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { AttachmentTile } from "@/components/AttachmentTile";
 import { ImageLightbox } from "@/components/ImageLightbox";
-import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
+import { MarkdownText } from "@/components/MarkdownText";
 import { SlashCommandText } from "@/components/SlashCommandText";
+import { ReasoningRow } from "@/components/thread/activity/ReasoningRow";
 import { UserMessageText } from "@/components/UserMessageText";
 import {
   Tooltip,
@@ -111,7 +111,7 @@ function MessageCopyButton({ content }: { content: string }) {
           onClick={onCopy}
           aria-label={label}
           className={cn(
-            "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
+            "touch-target inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
             "transition-colors hover:bg-muted/55 hover:text-foreground",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           )}
@@ -128,15 +128,7 @@ function MessageCopyButton({ content }: { content: string }) {
   );
 }
 
-/**
- * Render a single message. Following agent-chat-ui: user turns are a rounded
- * "pill" right-aligned with a muted fill; assistant turns render as bare
- * markdown so prose/code read like a document rather than a chat bubble.
- * Each turn fades+slides in for a touch of motion polish.
- *
- * Trace rows (tool-call hints, progress breadcrumbs) render as a subdued
- * collapsible group so intermediate steps never masquerade as replies.
- */
+/** Render user turns as compact bubbles and assistant turns as document-like prose. */
 export function MessageBubble({
   message,
   showCopyAction = true,
@@ -250,11 +242,10 @@ export function MessageBubble({
           text={reasoning}
           streaming={reasoningStreaming}
           hasBodyBelow={!empty}
-          onOpenFilePreview={onOpenFilePreview}
         />
       ) : null}
       {empty && message.isStreaming && !hasReasoning ? (
-        <TypingDots />
+        <ThinkingState />
       ) : empty && message.isStreaming ? null : (
         <>
           {automationSourceLabel ? (
@@ -263,12 +254,14 @@ export function MessageBubble({
               triggerLabel={automationTriggeredLabel}
             />
           ) : null}
-          <MarkdownText
-            streaming={!!message.isStreaming}
-            onOpenFilePreview={onOpenFilePreview}
-          >
-            {message.content}
-          </MarkdownText>
+          <div data-assistant-selectable={message.isStreaming ? undefined : "true"}>
+            <MarkdownText
+              streaming={!!message.isStreaming}
+              onOpenFilePreview={onOpenFilePreview}
+            >
+              {message.content}
+            </MarkdownText>
+          </div>
           {media.length > 0 ? <MessageMedia media={media} align="left" /> : null}
           {showAssistantFooterRow ? (
             <TooltipProvider delayDuration={220} skipDelayDuration={80}>
@@ -284,7 +277,7 @@ export function MessageBubble({
                         onClick={onForkFromHere}
                         aria-label={forkLabel}
                         className={cn(
-                          "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
+                          "touch-target inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
                           "transition-colors hover:bg-muted/55 hover:text-foreground",
                           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                         )}
@@ -433,10 +426,6 @@ function MessageMedia({
 /**
  * Right-aligned preview row for images attached to a user turn.
  *
- * Visual follows agent-chat-ui: a single wrapping row of fixed-size square
- * thumbnails that stay modest next to the text pill regardless of how many
- * images are attached.
- *
  * The URL is expected to be a self-contained ``data:`` URL (the Composer
  * hands the normalized base64 payload to the optimistic bubble so that the
  * preview survives React StrictMode double-mount — blob URLs would be
@@ -570,33 +559,21 @@ function UserImageCell({
   );
 }
 
-/** Pre-token-arrival placeholder: three bouncing dots. */
-function TypingDots() {
+/** Quiet pre-token state that occupies a stable line in the answer column. */
+function ThinkingState() {
   const { t } = useTranslation();
   return (
     <span
       aria-label={t("message.assistantTyping")}
-      className="inline-flex items-center gap-1 py-1"
+      className="inline-flex min-h-7 items-center py-1 text-[13px]"
     >
-      <Dot delay="0ms" />
-      <Dot delay="150ms" />
-      <Dot delay="300ms" />
+      <StreamingLabelSheen active>
+        {t("message.reasoningStreaming", { defaultValue: "Thinking…" })}
+      </StreamingLabelSheen>
     </span>
   );
 }
 
-function Dot({ delay }: { delay: string }) {
-  return (
-    <span
-      style={{ animationDelay: delay }}
-      className={cn(
-        "inline-block h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
-        "animate-bounce",
-      )}
-    />
-  );
-}
-
 /** L→R sheen on the glyphs themselves; inactive labels stay solid muted text. */
 export function StreamingLabelSheen({
   children,
@@ -630,105 +607,22 @@ interface ReasoningBubbleProps {
   text: string;
   streaming: boolean;
   hasBodyBelow: boolean;
-  /** When true, skip the slide-in wrapper (used inside ``AgentActivityCluster``). */
-  embeddedInCluster?: boolean;
-  onOpenFilePreview?: (path: string) => void;
 }
 
-/**
- * Subordinate "thinking" trace shown above an assistant turn.
- *
- * Lifecycle:
- *   - While ``streaming`` is true (``reasoning_delta`` frames still arriving),
- *     the bubble defaults to open and the header shows a sheen + pulse so
- *     the user sees the model "thinking out loud" in real time.
- *   - Expanded reasoning uses the same Markdown pipeline as assistant replies
- *     (deferred while streaming to reduce parser thrash), so headings and
- *     emphasis render instead of leaking raw ``###`` / ``**``.
- *   - On ``reasoning_end`` the bubble auto-collapses for prose density —
- *     the user can re-expand to inspect the chain of thought. The local
- *     toggle persists once the user interacts.
- */
 export function ReasoningBubble({
   text,
   streaming,
   hasBodyBelow,
-  embeddedInCluster = false,
-  onOpenFilePreview,
 }: ReasoningBubbleProps) {
-  const { t } = useTranslation();
-  const [userToggled, setUserToggled] = useState(false);
-  const [openLocal, setOpenLocal] = useState(true);
-  const open = userToggled ? openLocal : streaming;
-  const onToggle = () => {
-    setUserToggled(true);
-    setOpenLocal((v) => (userToggled ? !v : !open));
-  };
-  useEffect(() => {
-    if (open && text.length > 0) {
-      preloadMarkdownText();
-    }
-  }, [open, text.length]);
   return (
-    <div
+    <ReasoningRow
+      text={text}
+      streaming={streaming}
       className={cn(
-        "w-full",
-        !embeddedInCluster && "animate-in fade-in-0 slide-in-from-top-1 duration-200",
+        "animate-in fade-in-0 slide-in-from-top-1 duration-200",
         hasBodyBelow && "mb-2",
       )}
-    >
-      <button
-        type="button"
-        onClick={onToggle}
-        className={cn(
-          "group flex w-full items-center gap-2 rounded-md px-2 py-1.5",
-          "text-xs text-muted-foreground transition-colors hover:bg-muted/45",
-        )}
-        aria-expanded={open}
-        aria-live={streaming ? "polite" : undefined}
-      >
-        <Sparkles
-          className={cn("h-3.5 w-3.5", streaming && "animate-pulse")}
-          aria-hidden
-        />
-        <StreamingLabelSheen active={streaming} className="min-w-0 flex-1 text-left">
-          {streaming
-            ? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
-            : t("message.reasoning", { defaultValue: "Thinking" })}
-        </StreamingLabelSheen>
-        <ChevronRight
-          aria-hidden
-          className={cn(
-            "ml-auto h-3.5 w-3.5 transition-transform duration-200",
-            open && "rotate-90",
-          )}
-        />
-      </button>
-      {open && text.length > 0 && (
-        <div
-          className={cn(
-            "mt-1 min-w-0 border-l border-muted-foreground/20 pl-3",
-            !embeddedInCluster && "animate-in fade-in-0 slide-in-from-top-1 duration-200",
-          )}
-        >
-          <MarkdownText
-            streaming={streaming}
-            onOpenFilePreview={onOpenFilePreview}
-            className={cn(
-              "text-[12.5px] italic text-muted-foreground/88",
-              "prose-p:my-1.5 prose-li:my-0.5",
-              "prose-headings:mt-2 prose-headings:mb-1 prose-headings:font-medium",
-              "prose-headings:text-muted-foreground/92 prose-strong:text-muted-foreground",
-              "prose-h1:text-[15px] prose-h2:text-[13.5px] prose-h3:text-[12.5px] prose-h4:text-[12px]",
-              "prose-a:text-blue-500 prose-a:underline hover:prose-a:text-blue-600 dark:prose-a:text-blue-300 dark:hover:prose-a:text-blue-200",
-              "prose-code:text-[0.92em]",
-            )}
-          >
-            {text}
-          </MarkdownText>
-        </div>
-      )}
-    </div>
+    />
   );
 }
 

webui/src/components/Sidebar.tsx

@@ -37,6 +37,7 @@ interface SidebarProps {
   onOpenApps: () => void;
   onOpenSkills: () => void;
   onOpenAutomations: () => void;
+  onSettingsIntent?: () => void;
   onOpenSearch: () => void;
   activeUtility?: "apps" | "skills" | "automations" | null;
   onToggleArchived: () => void;
@@ -156,6 +157,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.apps")}
           onClick={props.onOpenApps}
+          onIntent={props.onSettingsIntent}
           active={props.activeUtility === "apps"}
           icon={<Blocks className="h-4 w-4" />}
         />
@@ -163,6 +165,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.skills.title")}
           onClick={props.onOpenSkills}
+          onIntent={props.onSettingsIntent}
           active={props.activeUtility === "skills"}
           icon={<Brain className="h-4 w-4" />}
         />
@@ -170,6 +173,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.automations", { defaultValue: "Automations" })}
           onClick={props.onOpenAutomations}
+          onIntent={props.onSettingsIntent}
           active={props.activeUtility === "automations"}
           icon={<CalendarClock className="h-4 w-4" />}
         />
@@ -231,6 +235,7 @@ export function Sidebar(props: SidebarProps) {
           collapsed={collapsed}
           label={t("sidebar.settings")}
           onClick={props.onOpenSettings}
+          onIntent={props.onSettingsIntent}
           className={collapsed ? undefined : "flex-1"}
           icon={<Settings className="h-4 w-4" />}
         />
@@ -249,6 +254,7 @@ function SidebarActionButton({
   className,
   shortcut,
   ariaKeyShortcuts,
+  onIntent,
 }: {
   collapsed: boolean;
   label: string;
@@ -258,6 +264,7 @@ function SidebarActionButton({
   className?: string;
   shortcut?: string;
   ariaKeyShortcuts?: string;
+  onIntent?: () => void;
 }) {
   const title = shortcut ? `${label} (${shortcut})` : collapsed ? label : undefined;
 
@@ -270,8 +277,10 @@ function SidebarActionButton({
       aria-keyshortcuts={ariaKeyShortcuts}
       title={title}
       onClick={() => onClick()}
+      onFocus={onIntent}
+      onPointerEnter={onIntent}
       className={cn(
-        "group h-8 min-w-0 gap-2 overflow-hidden rounded-full font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
+        "touch-target group h-8 min-w-0 gap-2 overflow-hidden rounded-full font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
         "transition-[width,padding,border-radius,color,background-color] duration-300 ease-out",
         collapsed
           ? "w-9 justify-center gap-0 rounded-xl px-0"

webui/src/components/settings/SettingsView.tsx

@@ -143,7 +143,9 @@ import { notifyMcpPresetsChanged } from "@/lib/mcp-preset-events";
 import { fmtDateTime, relativeTime } from "@/lib/format";
 import { useLogoFallback } from "@/hooks/useLogoFallback";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { usePageVisibility } from "@/hooks/usePageVisibility";
 import {
+  isGenericRepositoryLogoUrl,
   logoFallbackUrls,
   providerBrand,
   providerDisplayLabel,
@@ -538,6 +540,7 @@ export function SettingsView({
 }: SettingsViewProps) {
   const { t } = useTranslation();
   const { token } = useClient();
+  const pageVisible = usePageVisibility();
   const [settings, setSettings] = useState<SettingsPayload | null>(() => initialSettings);
   const [cliApps, setCliApps] = useState<CliAppsPayload | null>(null);
   const [nanobotFeatures, setNanobotFeatures] = useState<NanobotFeaturesPayload | null>(null);
@@ -584,7 +587,7 @@ export function SettingsView({
   const [cliAppsError, setCliAppsError] = useState<string | null>(null);
   const [nanobotFeaturesError, setNanobotFeaturesError] = useState<string | null>(null);
   const [cliAppsFocusName, setCliAppsFocusName] = useState<string | null>(null);
-  const [appsKindFilter, setAppsKindFilter] = useState<AppsKindFilter>("ready");
+  const [appsKindFilter, setAppsKindFilter] = useState<AppsKindFilter>("cli");
   const [mcpMessage, setMcpMessage] = useState<string | null>(null);
   const [mcpError, setMcpError] = useState<string | null>(null);
   const [automationsError, setAutomationsError] = useState<string | null>(null);
@@ -685,7 +688,7 @@ export function SettingsView({
 
   const hasSettings = settings !== null;
   useEffect(() => {
-    if (activeSection !== "overview" || !hasSettings) return;
+    if (activeSection !== "overview" || !hasSettings || !pageVisible) return;
     let cancelled = false;
     const refresh = () => {
       fetchSettingsUsage(token)
@@ -698,18 +701,13 @@ export function SettingsView({
     void refresh();
     const interval = window.setInterval(refresh, 5000);
     const onFocus = () => refresh();
-    const onVisibilityChange = () => {
-      if (document.visibilityState === "visible") refresh();
-    };
     window.addEventListener("focus", onFocus);
-    document.addEventListener("visibilitychange", onVisibilityChange);
     return () => {
       cancelled = true;
       window.clearInterval(interval);
       window.removeEventListener("focus", onFocus);
-      document.removeEventListener("visibilitychange", onVisibilityChange);
     };
-  }, [activeSection, hasSettings, token]);
+  }, [activeSection, hasSettings, pageVisible, token]);
 
   useEffect(() => {
     if (activeSection !== "apps") return;
@@ -844,7 +842,7 @@ export function SettingsView({
   );
 
   useEffect(() => {
-    if (activeSection !== "automations") return;
+    if (activeSection !== "automations" || !pageVisible) return;
     let cancelled = false;
     const refresh = async (showLoading = false) => {
       if (cancelled) return;
@@ -862,18 +860,14 @@ export function SettingsView({
     };
     void refresh(true);
     const interval = window.setInterval(() => void refresh(false), 5000);
-    const refreshOnFocus = () => {
-      if (document.visibilityState !== "hidden") void refresh(false);
-    };
+    const refreshOnFocus = () => void refresh(false);
     window.addEventListener("focus", refreshOnFocus);
-    document.addEventListener("visibilitychange", refreshOnFocus);
     return () => {
       cancelled = true;
       window.clearInterval(interval);
       window.removeEventListener("focus", refreshOnFocus);
-      document.removeEventListener("visibilitychange", refreshOnFocus);
     };
-  }, [activeSection, token]);
+  }, [activeSection, pageVisible, token]);
 
   useEffect(() => {
     writeLocalPreferences(localPrefs);
@@ -1969,7 +1963,7 @@ export function SettingsView({
               <button
                 type="button"
                 onClick={onBackToChat}
-                className="mb-4 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:hidden"
+                className="touch-target mb-4 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:hidden"
               >
                 <ChevronLeft className="h-3.5 w-3.5" aria-hidden />
                 {t("settings.backToChat")}
@@ -2052,6 +2046,24 @@ function SettingsSidebar({
   hostChromeInset?: boolean;
 }) {
   const { t } = useTranslation();
+  const navRef = useRef<HTMLElement>(null);
+  const activeItemRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const nav = navRef.current;
+    const activeItem = activeItemRef.current;
+    if (!nav || !activeItem || nav.scrollWidth <= nav.clientWidth) return;
+    const navRect = nav.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+    const itemCenter = itemRect.left - navRect.left + nav.scrollLeft + itemRect.width / 2;
+    const targetLeft = Math.max(
+      0,
+      Math.min(nav.scrollWidth - nav.clientWidth, itemCenter - nav.clientWidth / 2),
+    );
+    const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    nav.scrollTo({ left: targetLeft, behavior: reducedMotion ? "auto" : "smooth" });
+  }, [activeSection]);
+
   return (
     <aside
       className={cn(
@@ -2062,7 +2074,7 @@ function SettingsSidebar({
       <button
         type="button"
         onClick={onBackToChat}
-        className="mb-2 inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:mb-3"
+        className="touch-target mb-2 inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:mb-3"
       >
         <ChevronLeft className="h-3.5 w-3.5" aria-hidden />
         {t("settings.backToChat")}
@@ -2074,19 +2086,21 @@ function SettingsSidebar({
       </div>
 
       <nav
+        ref={navRef}
         aria-label={t("settings.sidebar.ariaLabel")}
-        className="-mx-1 flex snap-x gap-2 overflow-x-auto px-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:block lg:space-y-1 lg:overflow-visible lg:px-0 lg:pb-0"
+        className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:block lg:space-y-1 lg:overflow-visible lg:px-0 lg:pb-0"
       >
         {SETTINGS_NAV_ITEMS.map(({ key, icon: Icon, fallback }) => {
           const active = key === activeSection;
           return (
             <button
+              ref={active ? activeItemRef : undefined}
               key={key}
               type="button"
               aria-current={active ? "page" : undefined}
               onClick={() => onSelectSection(key)}
               className={cn(
-                "flex h-9 w-auto shrink-0 snap-start items-center gap-2 rounded-full px-3 text-left text-[13px] font-medium transition-colors lg:w-full lg:rounded-[10px] lg:px-2.5",
+                "touch-target flex h-9 w-auto shrink-0 items-center gap-2 rounded-full px-3 text-left text-[13px] font-medium transition-colors lg:w-full lg:rounded-[10px] lg:px-2.5",
                 active
                   ? "bg-sidebar-accent text-foreground"
                   : "text-muted-foreground/78 hover:bg-muted/45 hover:text-foreground",
@@ -5833,7 +5847,7 @@ function CliAppsCatalogRow({
   const description = app.description || app.requires || app.entry_point || app.name;
 
   return (
-    <article className="group flex min-w-0 items-center gap-3 rounded-[14px] px-3 py-3 transition-colors hover:bg-muted/45">
+    <article className="apps-catalog-row group flex min-w-0 items-center gap-3 rounded-[14px] px-3 py-3 transition-colors hover:bg-muted/45">
       <CliAppLogo app={app} showBrandLogos={showBrandLogos} />
       <div className="min-w-0 flex-1">
         <div className="flex min-w-0 items-baseline gap-2">
@@ -6624,9 +6638,11 @@ function CliAppReadyPanel({
 }
 
 function CliAppLogo({ app, showBrandLogos }: { app: CliAppInfo; showBrandLogos: boolean }) {
-  const bg = app.brand_color || "hsl(var(--muted))";
-  const logoUrls = useMemo(() => logoFallbackUrls(app.logo_url), [app.logo_url]);
-  const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(logoUrls);
+  const logoUrls = useMemo(
+    () => (isGenericRepositoryLogoUrl(app.logo_url) ? [] : logoFallbackUrls(app.logo_url)),
+    [app.logo_url],
+  );
+  const { logoUrl, logoLoaded, onLogoError, onLogoLoad } = useLogoFallback(logoUrls);
   const initials = app.display_name
     .split(/\s+/)
     .filter(Boolean)
@@ -6634,30 +6650,41 @@ function CliAppLogo({ app, showBrandLogos }: { app: CliAppInfo; showBrandLogos:
     .map((part) => part[0]?.toUpperCase())
     .join("") || app.name.slice(0, 2).toUpperCase();
 
-  if (showBrandLogos && logoUrl) {
-    return (
+  const showRemoteLogo = showBrandLogos && Boolean(logoUrl);
+
+  return (
+    <span
+      className="relative grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-[8px] border border-border/45 bg-muted text-[13px] font-semibold"
+      style={{
+        color: app.brand_color || "hsl(var(--muted-foreground))",
+        boxShadow: `inset 0 0 0 1px ${app.brand_color ?? "transparent"}18`,
+      }}
+    >
       <span
-        className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] border border-border/45 bg-background"
-        style={{ boxShadow: `inset 0 0 0 1px ${app.brand_color ?? "transparent"}22` }}
+        aria-hidden
+        className={cn(
+          "transition-opacity duration-150 motion-reduce:transition-none",
+          showRemoteLogo && logoLoaded ? "opacity-0" : "opacity-100",
+        )}
       >
+        {initials}
+      </span>
+      {showRemoteLogo ? (
         <img
           src={logoUrl}
           alt=""
           decoding="async"
           loading="lazy"
-          className="h-6 w-6 object-contain"
+          referrerPolicy="no-referrer"
+          draggable={false}
+          className={cn(
+            "absolute h-6 w-6 object-contain transition-opacity duration-150 motion-reduce:transition-none",
+            logoLoaded ? "opacity-100" : "opacity-0",
+          )}
           onLoad={onLogoLoad}
           onError={onLogoError}
         />
-      </span>
-    );
-  }
-  return (
-    <span
-      className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] text-[13px] font-semibold text-white"
-      style={{ backgroundColor: bg }}
-    >
-      {initials}
+      ) : null}
     </span>
   );
 }
@@ -8494,6 +8521,7 @@ function SegmentedControl({
         <button
           key={option.value}
           type="button"
+          aria-pressed={value === option.value}
           onClick={() => onChange(option.value)}
           className={cn(
             "rounded-full px-3 py-1 transition-colors",

webui/src/components/settings/channels/ChannelQrConnectFlow.tsx

@@ -4,6 +4,7 @@ import { Check, Loader2, Network, RotateCcw } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
+import { usePageVisibility } from "@/hooks/usePageVisibility";
 import {
   cancelChannelConnect,
   pollChannelConnect,
@@ -52,6 +53,7 @@ export function ChannelQrConnectFlow({
   labels: ChannelQrConnectLabels;
   onFeaturesUpdate: (payload: NanobotFeaturesPayload) => void;
 }) {
+  const pageVisible = usePageVisibility();
   const { t } = useTranslation();
   const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
   const [connect, setConnect] = useState<ChannelConnectPayload | null>(null);
@@ -92,7 +94,7 @@ export function ChannelQrConnectFlow({
   }, [connect?.qr_url]);
 
   useEffect(() => {
-    if (!connect?.session_id || connect.status !== "pending") return;
+    if (!connect?.session_id || connect.status !== "pending" || !pageVisible) return;
     let cancelled = false;
     const poll = async () => {
       if (pollInFlight.current) return;
@@ -127,7 +129,7 @@ export function ChannelQrConnectFlow({
       window.clearTimeout(initial);
       window.clearInterval(interval);
     };
-  }, [channelName, connect?.interval_ms, connect?.session_id, connect?.status, onFeaturesUpdate, token]);
+  }, [channelName, connect?.interval_ms, connect?.session_id, connect?.status, onFeaturesUpdate, pageVisible, token]);
 
   const start = useCallback(async (force = false) => {
     setBusy(true);

webui/src/components/thread/AssistantSelectionAction.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import { MessageCircleMore } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+const MAX_QUOTED_CONTEXT_CHARS = 4_000;
+
+interface SelectionActionState {
+  text: string;
+  left: number;
+  top: number;
+  above: boolean;
+}
+
+interface AssistantSelectionActionProps {
+  containerRef: RefObject<HTMLElement | null>;
+  onQuoteSelection?: (text: string) => void;
+}
+
+function selectableAncestor(node: Node | null, container: HTMLElement): HTMLElement | null {
+  const element = node instanceof Element ? node : node?.parentElement;
+  const selectable = element?.closest<HTMLElement>("[data-assistant-selectable='true']") ?? null;
+  return selectable && container.contains(selectable) ? selectable : null;
+}
+
+function selectedRangeRect(range: Range): DOMRect | null {
+  const rect = range.getBoundingClientRect();
+  if (rect.width > 0 || rect.height > 0) return rect;
+  return range.getClientRects()[0] ?? null;
+}
+
+function normalizedSelectionText(selection: Selection): string {
+  return selection
+    .toString()
+    .replace(/\u00a0/g, " ")
+    .replace(/\r\n?/g, "\n")
+    .trim()
+    .slice(0, MAX_QUOTED_CONTEXT_CHARS);
+}
+
+export function AssistantSelectionAction({
+  containerRef,
+  onQuoteSelection,
+}: AssistantSelectionActionProps) {
+  const { t } = useTranslation();
+  const [action, setAction] = useState<SelectionActionState | null>(null);
+  const frameRef = useRef<number | null>(null);
+  const actionRef = useRef<HTMLButtonElement>(null);
+
+  useLayoutEffect(() => {
+    const element = actionRef.current;
+    if (!action || !element) return;
+    const viewport = window.visualViewport;
+    const viewportLeft = viewport?.offsetLeft ?? 0;
+    const viewportTop = viewport?.offsetTop ?? 0;
+    const viewportRight = viewportLeft + (viewport?.width ?? window.innerWidth);
+    const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
+    const rect = element.getBoundingClientRect();
+    const padding = 12;
+    const shiftX = rect.left < viewportLeft + padding
+      ? viewportLeft + padding - rect.left
+      : rect.right > viewportRight - padding
+        ? viewportRight - padding - rect.right
+        : 0;
+    const shiftY = rect.top < viewportTop + padding
+      ? viewportTop + padding - rect.top
+      : rect.bottom > viewportBottom - padding
+        ? viewportBottom - padding - rect.bottom
+        : 0;
+    element.style.translate = `${shiftX}px ${shiftY}px`;
+  }, [action]);
+
+  useEffect(() => {
+    if (!onQuoteSelection) return;
+
+    const updateFromSelection = () => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        const container = containerRef.current;
+        const selection = window.getSelection();
+        if (!container || !selection || selection.isCollapsed || selection.rangeCount === 0) {
+          setAction(null);
+          return;
+        }
+        const range = selection.getRangeAt(0);
+        const start = selectableAncestor(range.startContainer, container);
+        const end = selectableAncestor(range.endContainer, container);
+        const text = normalizedSelectionText(selection);
+        const rect = selectedRangeRect(range);
+        if (!start || start !== end || !text || !rect) {
+          setAction(null);
+          return;
+        }
+
+        const viewport = window.visualViewport;
+        const viewportTop = viewport?.offsetTop ?? 0;
+        const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
+        const above = rect.bottom + 52 > viewportBottom;
+        setAction({
+          text,
+          left: rect.left + rect.width / 2,
+          top: above ? rect.top - 8 : rect.bottom + 8,
+          above,
+        });
+      });
+    };
+
+    const dismiss = () => setAction(null);
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest("[data-selection-follow-up='true']")) return;
+      dismiss();
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") dismiss();
+    };
+
+    document.addEventListener("selectionchange", updateFromSelection);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("scroll", dismiss, true);
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("resize", dismiss);
+    window.visualViewport?.addEventListener("resize", dismiss);
+    window.visualViewport?.addEventListener("scroll", dismiss);
+    return () => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+      document.removeEventListener("selectionchange", updateFromSelection);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("scroll", dismiss, true);
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("resize", dismiss);
+      window.visualViewport?.removeEventListener("resize", dismiss);
+      window.visualViewport?.removeEventListener("scroll", dismiss);
+    };
+  }, [containerRef, onQuoteSelection]);
+
+  if (!action || typeof document === "undefined") return null;
+
+  return createPortal(
+    <button
+      ref={actionRef}
+      type="button"
+      data-selection-follow-up="true"
+      className="fixed z-[80] inline-flex h-9 max-w-[calc(100vw-24px)] items-center gap-1.5 rounded-full border border-border/80 bg-popover px-3 text-[13px] font-medium text-popover-foreground shadow-lg shadow-black/10 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:shadow-black/35"
+      style={{
+        left: action.left,
+        top: action.top,
+        transform: action.above ? "translate(-50%, -100%)" : "translateX(-50%)",
+      }}
+      onPointerDown={(event) => event.preventDefault()}
+      onClick={() => {
+        onQuoteSelection?.(action.text);
+        window.getSelection()?.removeAllRanges();
+        setAction(null);
+      }}
+    >
+      <MessageCircleMore className="h-3.5 w-3.5" aria-hidden />
+      <span className="truncate">{t("message.askAboutSelection")}</span>
+    </button>,
+    document.body,
+  );
+}

webui/src/components/thread/PromptRail.tsx

@@ -49,6 +49,7 @@ export function PromptRail({
   scrollRef,
 }: PromptRailProps) {
   const railRef = useRef<HTMLDivElement>(null);
+  const measuredPromptsRef = useRef<MeasuredPrompt[]>([]);
   const promptAnchors = useMemo(() => userPromptAnchors(messages), [messages]);
   const [markers, setMarkers] = useState<PromptMarker[]>([]);
   const [activePromptId, setActivePromptId] = useState<string | null>(null);
@@ -59,6 +60,7 @@ export function PromptRail({
     const nextRailHeight = railRef.current?.clientHeight ?? 0;
 
     if (!scrollEl || promptAnchors.length < MIN_PROMPTS_FOR_RAIL) {
+      measuredPromptsRef.current = [];
       setMarkers([]);
       setActivePromptId(null);
       return;
@@ -66,17 +68,26 @@ export function PromptRail({
 
     const scrollRange = scrollEl.scrollHeight - scrollEl.clientHeight;
     if (scrollRange < RAIL_MIN_SCROLL_RANGE_PX) {
+      measuredPromptsRef.current = [];
       setMarkers([]);
       setActivePromptId(null);
       return;
     }
 
     const measured = measurePrompts(scrollEl, promptAnchors, scrollRange);
+    measuredPromptsRef.current = measured;
     const grouped = groupPromptMarkers(measured, nextRailHeight);
     setMarkers(distributeMarkerPositions(grouped, nextRailHeight));
     setActivePromptId(activePromptForScroll(measured, scrollEl.scrollTop));
   }, [promptAnchors, scrollRef]);
 
+  const updateActivePrompt = useCallback(() => {
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+    const next = activePromptForScroll(measuredPromptsRef.current, scrollEl.scrollTop);
+    setActivePromptId((current) => current === next ? current : next);
+  }, [scrollRef]);
+
   useEffect(() => {
     let frame = 0;
     let remainingFrames = MEASURE_RETRY_FRAMES;
@@ -95,20 +106,26 @@ export function PromptRail({
     const scrollEl = scrollRef.current;
     if (!scrollEl) return undefined;
 
-    let frame = 0;
-    const schedule = () => {
-      window.cancelAnimationFrame(frame);
-      frame = window.requestAnimationFrame(updateMarkers);
+    let scrollFrame = 0;
+    let resizeFrame = 0;
+    const scheduleActivePrompt = () => {
+      window.cancelAnimationFrame(scrollFrame);
+      scrollFrame = window.requestAnimationFrame(updateActivePrompt);
+    };
+    const scheduleMeasurement = () => {
+      window.cancelAnimationFrame(resizeFrame);
+      resizeFrame = window.requestAnimationFrame(updateMarkers);
     };
 
-    scrollEl.addEventListener("scroll", schedule, { passive: true });
-    window.addEventListener("resize", schedule);
+    scrollEl.addEventListener("scroll", scheduleActivePrompt, { passive: true });
+    window.addEventListener("resize", scheduleMeasurement);
     return () => {
-      window.cancelAnimationFrame(frame);
-      scrollEl.removeEventListener("scroll", schedule);
-      window.removeEventListener("resize", schedule);
+      window.cancelAnimationFrame(scrollFrame);
+      window.cancelAnimationFrame(resizeFrame);
+      scrollEl.removeEventListener("scroll", scheduleActivePrompt);
+      window.removeEventListener("resize", scheduleMeasurement);
     };
-  }, [scrollRef, updateMarkers]);
+  }, [scrollRef, updateActivePrompt, updateMarkers]);
 
   useEffect(() => {
     const scrollEl = scrollRef.current;
@@ -309,16 +326,20 @@ function activePromptForScroll(
   scrollTop: number,
 ): string | null {
   if (measured.length === 0) return null;
-  let active = measured[0];
   const cursor = scrollTop + 96;
-  for (const prompt of measured) {
-    if (prompt.top <= cursor) {
-      active = prompt;
-      continue;
+  let lower = 0;
+  let upper = measured.length - 1;
+  let activeIndex = 0;
+  while (lower <= upper) {
+    const middle = Math.floor((lower + upper) / 2);
+    if (measured[middle].top <= cursor) {
+      activeIndex = middle;
+      lower = middle + 1;
+    } else {
+      upper = middle - 1;
     }
-    break;
   }
-  return active.id;
+  return measured[activeIndex].id;
 }
 
 function groupedPromptLabel(count: number, latestLabel: string): string {

webui/src/components/thread/ThreadComposer.tsx

@@ -35,6 +35,7 @@ import {
   Loader2,
   Mic,
   Plus,
+  Quote,
   RotateCw,
   Shield,
   Sparkles,
@@ -71,6 +72,7 @@ import {
 import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
 import { useLogoFallback } from "@/hooks/useLogoFallback";
 import type { SendAttachment, SendOptions } from "@/hooks/useNanobotStream";
+import { usePageVisibility } from "@/hooks/usePageVisibility";
 import { useVoiceRecorder, type VoiceRecorderErrorKey } from "@/hooks/useVoiceRecorder";
 import type {
   CliAppInfo,
@@ -189,6 +191,9 @@ interface ThreadComposerProps {
   pendingQueueKey?: string | null;
   transcriptionProvider?: string | null;
   ingressLimits?: WebUIIngressLimits | null;
+  quotedContext?: string | null;
+  focusRequest?: number;
+  onQuotedContextChange?: (text: string | null) => void;
 }
 
 const COMMAND_ICONS: Record<string, LucideIcon> = {
@@ -265,6 +270,7 @@ interface QueuedPrompt {
   id: string;
   text: string;
   images?: QueuedPromptImage[];
+  quotedContext?: string;
 }
 
 interface QueuedPromptImage {
@@ -355,11 +361,19 @@ function normalizeQueuedPrompt(item: unknown, index: number): QueuedPrompt | nul
         }];
       }).slice(0, MAX_ATTACHMENTS_PER_MESSAGE)
     : [];
+  const quotedContext = typeof record.quotedContext === "string"
+    ? record.quotedContext.trim().slice(0, QUEUED_PROMPT_MAX_CHARS)
+    : "";
   if (!text && images.length === 0) return null;
   const id = typeof record.id === "string" && record.id.trim()
     ? record.id
     : `queued-prompt-restored-${index}`;
-  return { id, text, ...(images.length > 0 ? { images } : {}) };
+  return {
+    id,
+    text,
+    ...(images.length > 0 ? { images } : {}),
+    ...(quotedContext ? { quotedContext } : {}),
+  };
 }
 
 function readQueuedPrompts(storageKey: string): QueuedPrompt[] {
@@ -391,6 +405,7 @@ function storeQueuedPrompts(storageKey: string, prompts: QueuedPrompt[]): void {
           id: prompt.id,
           text: prompt.text.slice(0, QUEUED_PROMPT_MAX_CHARS),
           ...(prompt.images?.length ? { images: prompt.images.slice(0, MAX_ATTACHMENTS_PER_MESSAGE) } : {}),
+          ...(prompt.quotedContext ? { quotedContext: prompt.quotedContext } : {}),
         })),
       ),
     );
@@ -555,6 +570,7 @@ function RunElapsedStrip({
   goalState?: GoalStateWsPayload;
 }) {
   const { t } = useTranslation();
+  const pageVisible = usePageVisibility();
   const [goalPanelOpen, setGoalPanelOpen] = useState(false);
   const showTimer = startedAt != null;
   const stripLabel = goalStateStripPreview(goalState, t);
@@ -594,10 +610,11 @@ function RunElapsedStrip({
   }, [active, renderStrip]);
 
   useEffect(() => {
-    if (startedAt == null) return;
+    if (startedAt == null || !pageVisible) return;
+    setTick((n) => n + 1);
     const id = window.setInterval(() => setTick((n) => n + 1), 1000);
     return () => window.clearInterval(id);
-  }, [startedAt]);
+  }, [pageVisible, startedAt]);
 
   const display = active
     ? { startedAt, goalState, stripLabel }
@@ -629,7 +646,7 @@ function RunElapsedStrip({
 
     relayout();
 
-    preloadMarkdownText();
+    void preloadMarkdownText();
     const ro =
       typeof ResizeObserver !== "undefined"
         ? new ResizeObserver(() => relayout())
@@ -817,6 +834,9 @@ export function ThreadComposer({
   pendingQueueKey = null,
   transcriptionProvider = null,
   ingressLimits = null,
+  quotedContext = null,
+  focusRequest = 0,
+  onQuotedContextChange,
 }: ThreadComposerProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState("");
@@ -938,6 +958,14 @@ export function ThreadComposer({
     return () => cancelAnimationFrame(id);
   }, [disabled]);
 
+  useEffect(() => {
+    if (!focusRequest || disabled) return;
+    const id = requestAnimationFrame(() => textareaRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [disabled, focusRequest]);
+
+  const normalizedQuotedContext = quotedContext?.trim().slice(0, QUEUED_PROMPT_MAX_CHARS) || null;
+
   const readyImages = useMemo(
     () => images.filter((img): img is AttachedImage & { dataUrl: string } =>
       img.status === "ready" && typeof img.dataUrl === "string",
@@ -1450,11 +1478,23 @@ export function ThreadComposer({
         id,
         text,
         ...(queuedImages.length > 0 ? { images: queuedImages } : {}),
+        ...(normalizedQuotedContext ? { quotedContext: normalizedQuotedContext } : {}),
       },
     ]);
     clear();
     clearComposerText();
-  }, [canQueueGuidance, clear, clearComposerText, maxTextBytes, readyImages, textTooLargeMessage, value]);
+    onQuotedContextChange?.(null);
+  }, [
+    canQueueGuidance,
+    clear,
+    clearComposerText,
+    maxTextBytes,
+    normalizedQuotedContext,
+    onQuotedContextChange,
+    readyImages,
+    textTooLargeMessage,
+    value,
+  ]);
 
   const removeQueuedPrompt = useCallback((id: string) => {
     secondEnterPromptIdRef.current = null;
@@ -1470,6 +1510,7 @@ export function ThreadComposer({
     setSlashMenuDismissed(false);
     setCliAppMenuDismissed(false);
     setCursorPosition(prompt.text.length);
+    onQuotedContextChange?.(prompt.quotedContext ?? null);
     if (prompt.images?.length) {
       restoreReadyImages(prompt.images as RestoredReadyImage[]);
     } else {
@@ -1482,7 +1523,7 @@ export function ThreadComposer({
       el.focus();
       el.setSelectionRange(prompt.text.length, prompt.text.length);
     });
-  }, [clear, resizeTextarea, restoreReadyImages]);
+  }, [clear, onQuotedContextChange, resizeTextarea, restoreReadyImages]);
 
   const moveQueuedPrompt = useCallback((dragId: string, targetId: string) => {
     if (dragId === targetId) return;
@@ -1505,12 +1546,17 @@ export function ThreadComposer({
       const queuedImages = queuedImagesToSendImages(prompt.images);
       setQueuedPrompts((items) => items.filter((item) => item.id !== prompt.id));
       if (text || queuedImages?.length) {
-        if (queuedImages?.length) onSend(text, queuedImages);
-        else onSend(text);
+        const options: SendOptions | undefined = prompt.quotedContext || isStreaming
+          ? {
+              ...(prompt.quotedContext ? { quotedContext: prompt.quotedContext } : {}),
+              ...(isStreaming ? { continueActiveTurn: true } : {}),
+            }
+          : undefined;
+        onSend(text, queuedImages, options);
       }
       requestAnimationFrame(() => textareaRef.current?.focus());
     },
-    [onSend],
+    [isStreaming, onSend],
   );
 
   const sendNextQueuedPrompt = useCallback(() => {
@@ -1522,7 +1568,12 @@ export function ThreadComposer({
     }
     setQueuedPrompts((items) => items.filter((item) => item.id !== nextPrompt.id));
     const queuedImages = queuedImagesToSendImages(nextPrompt.images);
-    if (queuedImages?.length) onSend(nextPrompt.text.trim(), queuedImages);
+    const options = nextPrompt.quotedContext
+      ? { quotedContext: nextPrompt.quotedContext }
+      : undefined;
+    if (queuedImages?.length && options) onSend(nextPrompt.text.trim(), queuedImages, options);
+    else if (queuedImages?.length) onSend(nextPrompt.text.trim(), queuedImages);
+    else if (options) onSend(nextPrompt.text.trim(), undefined, options);
     else onSend(nextPrompt.text.trim());
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, [onSend, queuedPrompts]);
@@ -1576,10 +1627,11 @@ export function ThreadComposer({
     const attachedCliApps = activeCliMentionApps.map(cliAppMentionPayload);
     const attachedMcpPresets = activeMcpPresetMentions.map(mcpPresetMentionPayload);
     const options: SendOptions | undefined =
-      attachedCliApps.length > 0 || attachedMcpPresets.length > 0
+      attachedCliApps.length > 0 || attachedMcpPresets.length > 0 || normalizedQuotedContext
         ? {
             ...(attachedCliApps.length > 0 ? { cliApps: attachedCliApps } : {}),
             ...(attachedMcpPresets.length > 0 ? { mcpPresets: attachedMcpPresets } : {}),
+            ...(normalizedQuotedContext ? { quotedContext: normalizedQuotedContext } : {}),
           }
         : undefined;
     const hasPlainTextCommandPayload =
@@ -1598,6 +1650,7 @@ export function ThreadComposer({
       setQueuedPrompts([]);
       clear();
       clearComposerText();
+      onQuotedContextChange?.(null);
       return;
     }
     const isSlashSideChannel = isSideChannelLifecycle(slashLifecycle);
@@ -1619,6 +1672,7 @@ export function ThreadComposer({
     // preview here without affecting the rendered message.
     clear();
     clearComposerText();
+    onQuotedContextChange?.(null);
   }, [
     activeCliMentionApps,
     activeMcpPresetMentions,
@@ -1632,6 +1686,8 @@ export function ThreadComposer({
     onModelBadgeClick,
     onSend,
     onStop,
+    onQuotedContextChange,
+    normalizedQuotedContext,
     readyImages,
     slashCommands,
     textTooLargeMessage,
@@ -1884,6 +1940,28 @@ export function ThreadComposer({
             ))}
           </div>
         ) : null}
+        {normalizedQuotedContext ? (
+          <div
+            className="mx-3 mt-3 flex min-w-0 items-start gap-2 border-l-2 border-muted-foreground/25 pl-3 pr-1 text-muted-foreground"
+            aria-label={t("thread.composer.quotedContext")}
+          >
+            <Quote className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+            <p className="line-clamp-2 min-w-0 flex-1 text-[13px]/[1.45]">
+              {normalizedQuotedContext}
+            </p>
+            <button
+              type="button"
+              className="touch-target -mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={t("thread.composer.removeQuotedContext")}
+              onClick={() => {
+                onQuotedContextChange?.(null);
+                requestAnimationFrame(() => textareaRef.current?.focus());
+              }}
+            >
+              <X className="h-3.5 w-3.5" aria-hidden />
+            </button>
+          </div>
+        ) : null}
         <RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
         <div className="relative">
           {hasMentionDecorations ? (
@@ -1962,7 +2040,7 @@ export function ThreadComposer({
               aria-label={t("thread.composer.attachImage")}
               onClick={() => fileInputRef.current?.click()}
               className={cn(
-                "rounded-full text-muted-foreground hover:text-foreground",
+                "touch-target rounded-full text-muted-foreground hover:text-foreground",
                 isHero
                   ? "h-8 w-8 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card"
                   : "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card",
@@ -2016,7 +2094,7 @@ export function ThreadComposer({
                       onPointerCancel={voiceRecorder.endPress}
                       onClick={voiceRecorder.handleClick}
                       className={cn(
-                        "rounded-full border border-transparent text-muted-foreground hover:bg-muted/65 hover:text-foreground",
+                        "touch-target rounded-full border border-transparent text-muted-foreground hover:bg-muted/65 hover:text-foreground",
                         isHero ? "h-8 w-8" : "h-9 w-9",
                         voiceRecorder.isRecording &&
                           "bg-red-500 text-white shadow-[0_8px_20px_rgba(239,68,68,0.22)] hover:bg-red-500 hover:text-white",
@@ -2059,7 +2137,7 @@ export function ThreadComposer({
               }
               onClick={showStopButton ? handleStop : modelNeedsSetup ? onModelBadgeClick : undefined}
               className={cn(
-                "rounded-full transition-transform",
+                "touch-target rounded-full transition-transform",
                 showStopButton
                   ? "border border-border/70 bg-card text-foreground/85 shadow-[0_3px_10px_rgba(15,23,42,0.08)] hover:bg-muted/65 hover:text-foreground disabled:text-muted-foreground/50"
                   : isHero

webui/src/components/thread/ThreadMessages.tsx

@@ -1,7 +1,8 @@
-import { Fragment, useMemo } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { MessageBubble } from "@/components/MessageBubble";
 import { AgentActivityCluster } from "@/components/thread/AgentActivityCluster";
+import { AssistantSelectionAction } from "@/components/thread/AssistantSelectionAction";
 import { normalizeActivityTimeline, type TurnUnit } from "@/lib/activity-timeline";
 import type { CliAppInfo, McpPresetInfo, SlashCommand, UIMessage } from "@/lib/types";
 
@@ -16,6 +17,7 @@ interface ThreadMessagesProps {
   forkBoundaryMessageCount?: number | null;
   onOpenFilePreview?: (path: string) => void;
   onForkFromMessage?: (beforeUserIndex: number) => void;
+  onQuoteSelection?: (text: string) => void;
 }
 
 export type DisplayUnit = TurnUnit;
@@ -56,8 +58,10 @@ export function ThreadMessages({
   forkBoundaryMessageCount = null,
   onOpenFilePreview,
   onForkFromMessage,
+  onQuoteSelection,
 }: ThreadMessagesProps) {
   const { t } = useTranslation();
+  const messageListRef = useRef<HTMLDivElement>(null);
   const units = useMemo(() => buildDisplayUnits(messages, isStreaming), [isStreaming, messages]);
   const forkBoundaryAfterUnitIndex = useMemo(
     () => unitIndexAfterMessageCount(units, forkBoundaryMessageCount),
@@ -72,7 +76,11 @@ export function ThreadMessages({
   let nextUserIndex = hiddenUserMessageCount;
 
   return (
-    <div className="flex w-full flex-col">
+    <div ref={messageListRef} className="flex w-full flex-col">
+      <AssistantSelectionAction
+        containerRef={messageListRef}
+        onQuoteSelection={onQuoteSelection}
+      />
       {units.map((unit, index) => {
         const prev = units[index - 1];
         const marginTop =
@@ -96,44 +104,143 @@ export function ThreadMessages({
         if (unit.type === "message" && unit.message.role === "user") nextUserIndex += 1;
 
         return (
-          <Fragment key={unitKeys[index]}>
-            <div className={marginTop} data-user-prompt-id={userPromptId}>
-              {unit.type === "activity" ? (
-                <AgentActivityCluster
-                  messages={unit.messages}
-                  isTurnStreaming={liveActivityClusterIndices.has(index)}
-                  hasBodyBelow={hasBodyBelow}
-                  turnLatencyMs={unit.turnLatencyMs}
-                  startedAtMs={unit.startedAtMs}
-                  cliApps={cliApps}
-                  mcpPresets={mcpPresets}
-                  onOpenFilePreview={onOpenFilePreview}
-                />
-              ) : (
-                <MessageBubble
-                  message={unit.message}
-                  cliApps={cliApps}
-                  mcpPresets={mcpPresets}
-                  slashCommands={slashCommands}
-                  onOpenFilePreview={onOpenFilePreview}
-                  onForkFromHere={
-                    onForkFromMessage && forkIndex !== undefined
-                      ? () => onForkFromMessage(forkIndex)
-                      : undefined
-                  }
-                />
-              )}
-            </div>
-            {index === forkBoundaryAfterUnitIndex ? (
-              <ForkBoundaryDivider label={t("thread.forkedFromHistory")} />
-            ) : null}
-          </Fragment>
+          <ThreadDisplayUnit
+            key={unitKeys[index]}
+            unit={unit}
+            marginTop={marginTop}
+            userPromptId={userPromptId}
+            hasBodyBelow={hasBodyBelow}
+            isTurnStreaming={liveActivityClusterIndices.has(index)}
+            forkIndex={forkIndex}
+            showForkBoundary={index === forkBoundaryAfterUnitIndex}
+            forkBoundaryLabel={t("thread.forkedFromHistory")}
+            cliApps={cliApps}
+            mcpPresets={mcpPresets}
+            slashCommands={slashCommands}
+            onOpenFilePreview={onOpenFilePreview}
+            onForkFromMessage={onForkFromMessage}
+          />
         );
       })}
     </div>
   );
 }
 
+interface ThreadDisplayUnitProps {
+  unit: DisplayUnit;
+  marginTop: string;
+  userPromptId?: string;
+  hasBodyBelow: boolean;
+  isTurnStreaming: boolean;
+  forkIndex?: number;
+  showForkBoundary: boolean;
+  forkBoundaryLabel: string;
+  cliApps: CliAppInfo[];
+  mcpPresets: McpPresetInfo[];
+  slashCommands: SlashCommand[];
+  onOpenFilePreview?: (path: string) => void;
+  onForkFromMessage?: (beforeUserIndex: number) => void;
+}
+
+const ThreadDisplayUnit = memo(function ThreadDisplayUnit({
+  unit,
+  marginTop,
+  userPromptId,
+  hasBodyBelow,
+  isTurnStreaming,
+  forkIndex,
+  showForkBoundary,
+  forkBoundaryLabel,
+  cliApps,
+  mcpPresets,
+  slashCommands,
+  onOpenFilePreview,
+  onForkFromMessage,
+}: ThreadDisplayUnitProps) {
+  const onForkFromHere = useCallback(() => {
+    if (forkIndex !== undefined) onForkFromMessage?.(forkIndex);
+  }, [forkIndex, onForkFromMessage]);
+  const deferOffscreenRender = unit.type === "activity"
+    ? !isTurnStreaming
+    : unit.message.role === "assistant" && !unit.message.isStreaming;
+
+  return (
+    <>
+      <div
+        className={`${marginTop}${deferOffscreenRender ? " thread-render-unit" : ""}`}
+        data-user-prompt-id={userPromptId}
+      >
+        {unit.type === "activity" ? (
+          <AgentActivityCluster
+            messages={unit.messages}
+            isTurnStreaming={isTurnStreaming}
+            hasBodyBelow={hasBodyBelow}
+            turnLatencyMs={unit.turnLatencyMs}
+            startedAtMs={unit.startedAtMs}
+            cliApps={cliApps}
+            mcpPresets={mcpPresets}
+            onOpenFilePreview={onOpenFilePreview}
+          />
+        ) : (
+          <MessageBubble
+            message={unit.message}
+            cliApps={cliApps}
+            mcpPresets={mcpPresets}
+            slashCommands={slashCommands}
+            onOpenFilePreview={onOpenFilePreview}
+            onForkFromHere={forkIndex !== undefined ? onForkFromHere : undefined}
+          />
+        )}
+      </div>
+      {showForkBoundary ? <ForkBoundaryDivider label={forkBoundaryLabel} /> : null}
+    </>
+  );
+}, threadDisplayUnitPropsEqual);
+
+function threadDisplayUnitPropsEqual(
+  previous: ThreadDisplayUnitProps,
+  next: ThreadDisplayUnitProps,
+): boolean {
+  return (
+    displayUnitsEqual(previous.unit, next.unit)
+    && previous.marginTop === next.marginTop
+    && previous.userPromptId === next.userPromptId
+    && previous.hasBodyBelow === next.hasBodyBelow
+    && previous.isTurnStreaming === next.isTurnStreaming
+    && previous.forkIndex === next.forkIndex
+    && previous.showForkBoundary === next.showForkBoundary
+    && previous.forkBoundaryLabel === next.forkBoundaryLabel
+    && previous.cliApps === next.cliApps
+    && previous.mcpPresets === next.mcpPresets
+    && previous.slashCommands === next.slashCommands
+    && previous.onOpenFilePreview === next.onOpenFilePreview
+    && previous.onForkFromMessage === next.onForkFromMessage
+  );
+}
+
+function displayUnitsEqual(previous: DisplayUnit, next: DisplayUnit): boolean {
+  if (previous.type !== next.type) return false;
+  if (previous.type === "message" && next.type === "message") {
+    return shallowMessageEqual(previous.message, next.message);
+  }
+  if (previous.type !== "activity" || next.type !== "activity") return false;
+  return (
+    previous.turnLatencyMs === next.turnLatencyMs
+    && previous.startedAtMs === next.startedAtMs
+    && previous.messages.length === next.messages.length
+    && previous.messages.every((message, index) =>
+      shallowMessageEqual(message, next.messages[index]))
+  );
+}
+
+function shallowMessageEqual(previous: UIMessage, next: UIMessage): boolean {
+  if (previous === next) return true;
+  const previousKeys = Object.keys(previous) as Array<keyof UIMessage>;
+  const nextKeys = Object.keys(next) as Array<keyof UIMessage>;
+  return previousKeys.length === nextKeys.length
+    && previousKeys.every((key) => previous[key] === next[key]);
+}
+
 function unitIndexAfterMessageCount(
   units: DisplayUnit[],
   messageCount: number | null | undefined,

webui/src/components/thread/ThreadShell.tsx

@@ -344,6 +344,8 @@ export function ThreadShell({
   const [filePreviewPath, setFilePreviewPath] = useState<string | null>(null);
   const [filePreviewClosing, setFilePreviewClosing] = useState(false);
   const [filePreviewWidth, setFilePreviewWidth] = useState(FILE_PREVIEW_DEFAULT_WIDTH);
+  const [quotedContext, setQuotedContext] = useState<string | null>(null);
+  const [composerFocusSignal, setComposerFocusSignal] = useState(0);
   const shellRef = useRef<HTMLElement | null>(null);
   const filePreviewWidthRef = useRef(FILE_PREVIEW_DEFAULT_WIDTH);
   const filePreviewCloseTimerRef = useRef<number | null>(null);
@@ -395,8 +397,14 @@ export function ThreadShell({
     }
     setFilePreviewClosing(false);
     setFilePreviewPath(null);
+    setQuotedContext(null);
   }, [historyKey]);
 
+  const handleQuoteSelection = useCallback((text: string) => {
+    setQuotedContext(text);
+    setComposerFocusSignal((value) => value + 1);
+  }, []);
+
   useEffect(() => {
     return () => {
       if (filePreviewCloseTimerRef.current !== null) {
@@ -806,6 +814,9 @@ export function ThreadShell({
           pendingQueueKey={chatId}
           transcriptionProvider={settingsSnapshot?.transcription?.provider}
           ingressLimits={ingressLimits}
+          quotedContext={quotedContext}
+          focusRequest={composerFocusSignal}
+          onQuotedContextChange={setQuotedContext}
         />
       ) : (
         <ThreadComposer
@@ -904,6 +915,7 @@ export function ThreadShell({
             onLoadOlder={loadOlder}
             onOpenFilePreview={historyKey ? handleOpenFilePreview : undefined}
             onForkFromMessage={onForkChat ? handleForkFromMessage : undefined}
+            onQuoteSelection={session ? handleQuoteSelection : undefined}
           />
         </FilePreviewAvailabilityProvider>
       </div>

webui/src/components/thread/ThreadViewport.tsx

@@ -48,6 +48,7 @@ interface ThreadViewportProps {
   onLoadOlder?: () => Promise<void> | void;
   onOpenFilePreview?: (path: string) => void;
   onForkFromMessage?: (beforeUserIndex: number) => void;
+  onQuoteSelection?: (text: string) => void;
 }
 
 const NEAR_BOTTOM_PX = 48;
@@ -120,6 +121,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
   onLoadOlder,
   onOpenFilePreview,
   onForkFromMessage,
+  onQuoteSelection,
 }, ref) {
   const { t } = useTranslation();
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -508,7 +510,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
       const programmaticPromptTop = programmaticPromptScrollTopRef.current;
       const programmatic =
         programmaticPromptTop !== null && Math.abs(el.scrollTop - programmaticPromptTop) < 2;
-      setAtBottom(near);
+      setAtBottom((current) => current === near ? current : near);
       if (programmatic) {
         programmaticPromptScrollTopRef.current = null;
         if (near) userReadingHistoryRef.current = false;
@@ -557,6 +559,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
                   forkBoundaryMessageCount={visibleForkBoundaryMessageCount}
                   onOpenFilePreview={onOpenFilePreview}
                   onForkFromMessage={onForkFromMessage}
+                  onQuoteSelection={onQuoteSelection}
                 />
               </div>
             </div>

webui/src/components/thread/WorkspaceControls.tsx

@@ -254,7 +254,7 @@ export function WorkspaceAccessMenu({
           variant="ghost"
           aria-label={t("thread.composer.workspace.accessAria")}
           className={cn(
-            "min-w-0 max-w-[min(7rem,30vw)] whitespace-nowrap rounded-[10px] border border-transparent font-semibold shadow-none sm:max-w-[min(12.5rem,42vw)]",
+            "touch-target min-w-0 max-w-[min(7rem,30vw)] whitespace-nowrap rounded-[10px] border border-transparent font-semibold shadow-none sm:max-w-[min(12.5rem,42vw)]",
             isHero ? "h-8 px-2.5 text-[12px]" : "h-9 px-3 text-[12.5px]",
             isFull
               ? "bg-transparent text-orange-600 hover:bg-orange-500/8 dark:text-orange-300 dark:hover:bg-orange-400/10"

webui/src/components/thread/activity/ActivityEvidencePreview.tsx

@@ -1,35 +0,0 @@
-import { AttachmentTile } from "@/components/AttachmentTile";
-import { cn } from "@/lib/utils";
-import type { ActivityEvidence } from "@/lib/activity-timeline";
-
-interface ActivityEvidencePreviewProps {
-  evidence: ActivityEvidence[];
-  className?: string;
-}
-
-export function ActivityEvidencePreview({ evidence, className }: ActivityEvidencePreviewProps) {
-  if (evidence.length === 0) return null;
-  return (
-    <div
-      data-testid="activity-evidence-preview"
-      className={cn(
-        "flex max-w-full flex-wrap items-start gap-2 pt-0.5",
-        "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200",
-        className,
-      )}
-    >
-      {evidence.slice(0, 4).map((item) => (
-        <AttachmentTile
-          key={item.id}
-          attachment={item.attachment}
-          variant="compact"
-          className={cn(
-            item.attachment.kind === "image" || item.attachment.kind === "video"
-              ? "max-w-[min(100%,20rem)]"
-              : "max-w-[14rem]",
-          )}
-        />
-      ))}
-    </div>
-  );
-}

webui/src/components/thread/activity/ActivityGroup.tsx

@@ -1,28 +0,0 @@
-import type { ReactNode } from "react";
-import type { LucideIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-interface ActivityGroupProps {
-  title: string;
-  icon?: LucideIcon;
-  children: ReactNode;
-  className?: string;
-}
-
-export function ActivityGroup({ title, icon: Icon, children, className }: ActivityGroupProps) {
-  return (
-    <section
-      className={cn(
-        "min-w-0 py-1 motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-200",
-        className,
-      )}
-    >
-      <div className="mb-1 flex min-w-0 items-center gap-1.5 pl-0.5 text-[12px] font-medium text-muted-foreground/70">
-        {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden /> : null}
-        <span className="min-w-0 truncate">{title}</span>
-      </div>
-      <div className="min-w-0">{children}</div>
-    </section>
-  );
-}

webui/src/components/thread/activity/ActivityStep.tsx

@@ -7,51 +7,45 @@ import { cn } from "@/lib/utils";
 export type ActivityStepTone = "neutral" | "active" | "success" | "error";
 
 export interface ActivityStepProps {
-  as?: "div" | "li";
   icon?: LucideIcon;
   marker?: ReactNode;
   label: ReactNode;
-  detail?: ReactNode;
-  aside?: ReactNode;
-  children?: ReactNode;
+  ariaLabel?: string;
   active?: boolean;
   tone?: ActivityStepTone;
-  title?: string;
   className?: string;
   contentClassName?: string;
+  labelClassName?: string;
   markerClassName?: string;
   style?: CSSProperties;
 }
 
 export function ActivityStep({
-  as: Component = "div",
   icon: Icon,
   marker,
   label,
-  detail,
-  aside,
-  children,
+  ariaLabel,
   active = false,
   tone = active ? "active" : "neutral",
-  title,
   className,
   contentClassName,
+  labelClassName,
   markerClassName,
   style,
 }: ActivityStepProps) {
   return (
-    <Component
+    <div
+      data-testid="activity-step"
+      aria-label={ariaLabel}
       className={cn(
-        "group/activity-step relative grid min-w-0 grid-cols-[1.125rem_minmax(0,1fr)] gap-2 py-0.5 text-[13px] leading-5",
+        "relative grid min-w-0 grid-cols-[1.125rem_minmax(0,1fr)] gap-2 py-0.5 text-[13px] leading-5",
         className,
       )}
-      title={title}
       style={style}
     >
       <span
         className={cn(
-          "relative flex h-5 w-[1.125rem] shrink-0 items-start justify-center pt-[3px]",
-          "after:absolute after:left-1/2 after:top-[1.25rem] after:h-[calc(100%+0.375rem)] after:w-px after:-translate-x-1/2 after:bg-muted-foreground/14 group-last/activity-step:after:hidden",
+          "flex h-5 w-[1.125rem] shrink-0 items-start justify-center pt-[3px]",
         )}
         aria-hidden
       >
@@ -71,25 +65,23 @@ export function ActivityStep({
         )}
       </span>
       <div className={cn("min-w-0", contentClassName)}>
-        <div className="flex min-w-0 items-baseline gap-1.5">
+        <div
+          data-testid="activity-line"
+          title={typeof label === "string" ? label : undefined}
+          className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap"
+        >
           <StreamingLabelSheen
             active={active}
             className={cn(
-              "min-w-0 shrink-0 font-medium",
+              "min-w-0 flex-1 truncate font-medium",
               tone === "error" ? "text-destructive/78" : "text-muted-foreground/85",
+              labelClassName,
             )}
           >
             {label}
           </StreamingLabelSheen>
-          {detail ? (
-            <span className="min-w-0 break-words text-foreground/82">
-              {detail}
-            </span>
-          ) : null}
-          {aside ? <span className="ml-auto shrink-0">{aside}</span> : null}
         </div>
-        {children ? <div className="mt-1 min-w-0">{children}</div> : null}
       </div>
-    </Component>
+    </div>
   );
 }

webui/src/components/thread/activity/FileEditRow.tsx

@@ -1,47 +1,16 @@
-import { useEffect, useMemo, useState } from "react";
 import {
   AlertCircle,
   CheckCircle2,
-  ChevronDown,
-  ChevronRight,
-  ChevronUp,
   CircleDashed,
-  ExternalLink,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { FileReferenceChip } from "@/components/FileReferenceChip";
-import {
-  hasRenderableFileDiff,
-  parseRenderableFileDiff,
-  type RenderableFileDiff,
-  type RenderableFileDiffHunk,
-} from "@/lib/file-diff";
-import { codeLanguageFromPath } from "@/lib/code-language";
-import type { FileEditDisplayMode } from "@/lib/local-preferences";
-import type { UIFileDiff, UIFileEdit } from "@/lib/types";
+import type { UIFileEdit } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
 import { ActivityStep } from "./ActivityStep";
 import { DiffPair } from "./DiffPair";
-import { DiffSyntaxHighlight } from "./DiffSyntaxHighlight";
-
-const INITIAL_VISIBLE_DIFF_LINES = 160;
-const AUTO_COLLAPSE_DIFF_LINES = INITIAL_VISIBLE_DIFF_LINES;
-
-type DiffFileEditDisplayMode = Exclude<FileEditDisplayMode, "summary">;
-
-interface VisibleDiffHunk {
-  hunk: RenderableFileDiffHunk;
-  skippedBefore: number;
-}
-
-interface VisibleDiff {
-  hunks: VisibleDiffHunk[];
-  hiddenLineCount: number;
-}
-
-const EMPTY_VISIBLE_DIFF: VisibleDiff = { hunks: [], hiddenLineCount: 0 };
 
 export interface FileEditSummary {
   key: string;
@@ -55,102 +24,41 @@ export interface FileEditSummary {
   operation?: UIFileEdit["operation"];
   pending: boolean;
   error?: string;
-  diff?: UIFileDiff;
 }
 
 export function FileEditGroup({
   edits,
-  displayMode,
   onOpenFilePreview,
-  density = "default",
 }: {
   edits: FileEditSummary[];
-  displayMode: FileEditDisplayMode;
   onOpenFilePreview?: (path: string) => void;
-  density?: "default" | "diff-only";
 }) {
   if (edits.length === 0) return null;
   return (
-    <ul className="space-y-1">
-      {edits.map((edit) => {
-        if (density === "diff-only" && canRenderDiff(edit, displayMode)) {
-          return (
-            <FileEditDiffOnly
-              key={edit.key}
-              edit={edit}
-              displayMode={displayMode}
-              onOpenFilePreview={onOpenFilePreview}
-            />
-          );
-        }
-        return (
-          <FileEditRow
-            key={edit.key}
-            edit={edit}
-            displayMode={displayMode}
-            onOpenFilePreview={onOpenFilePreview}
-          />
-        );
-      })}
-    </ul>
-  );
-}
-
-function canRenderDiff(
-  edit: FileEditSummary,
-  displayMode: FileEditDisplayMode,
-): displayMode is DiffFileEditDisplayMode {
-  return (
-    displayMode !== "summary"
-    && edit.status !== "editing"
-    && edit.status !== "error"
-    && hasRenderableFileDiff(edit.diff)
-  );
-}
-
-function FileEditDiffOnly({
-  edit,
-  displayMode,
-  onOpenFilePreview,
-}: {
-  edit: FileEditSummary;
-  displayMode: DiffFileEditDisplayMode;
-  onOpenFilePreview?: (path: string) => void;
-}) {
-  return (
-    <li className="min-w-0 py-0.5">
-      <FileUnifiedDiff
-        diff={edit.diff!}
-        collapsed={displayMode === "collapsed_diff"}
-        added={edit.added}
-        deleted={edit.deleted}
-        showCollapsedStats={false}
-        previewPath={edit.absolute_path || edit.path}
-        onOpenFilePreview={onOpenFilePreview}
-      />
-    </li>
+    <>
+      {edits.map((edit) => (
+        <FileEditRow
+          key={edit.key}
+          edit={edit}
+          onOpenFilePreview={onOpenFilePreview}
+        />
+      ))}
+    </>
   );
 }
 
 function FileEditRow({
   edit,
-  displayMode,
   onOpenFilePreview,
 }: {
   edit: FileEditSummary;
-  displayMode: FileEditDisplayMode;
   onOpenFilePreview?: (path: string) => void;
 }) {
   const { t } = useTranslation();
   const editing = edit.status === "editing";
   const failed = edit.status === "error";
+  const action = fileEditAction(edit, editing, failed);
   const hasCountedDiff = !failed && !edit.binary && hasVisibleDiffStats(edit);
-  const showDiff = canRenderDiff(edit, displayMode);
-  const rawFailureDetail = failed ? cleanFileEditError(edit.error) : "";
-  const failureDetail = failed
-    ? formatFileEditError(edit.error)
-      || t("message.fileEditFailedFallback", { defaultValue: "File change was not applied." })
-    : "";
   const statusIcon = failed ? (
     <AlertCircle className="h-3 w-3" aria-hidden />
   ) : editing ? (
@@ -158,9 +66,9 @@ function FileEditRow({
   ) : (
     <CheckCircle2 className="h-3 w-3" aria-hidden />
   );
+
   return (
     <ActivityStep
-      as="li"
       marker={(
         <span
           className={cn(
@@ -176,42 +84,26 @@ function FileEditRow({
       active={editing}
       tone={failed ? "error" : editing ? "active" : "success"}
       className="text-xs"
-      contentClassName={failed || showDiff ? "min-w-0" : "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3"}
-      title={rawFailureDetail || edit.absolute_path || edit.path}
+      ariaLabel={edit.path ? `${action} ${edit.path}` : action}
       label={edit.pending && !edit.path
         ? t("message.fileEditPreparing", { defaultValue: "Preparing file edit…" })
         : (
-          <FileReferenceChip
-            path={edit.path}
-            tooltipPath={edit.absolute_path}
-            previewPath={edit.absolute_path || edit.path}
-            onOpen={onOpenFilePreview}
-            display="path"
-            active={editing}
-            className="min-w-0"
-            textClassName="text-[12px]"
-            testId="activity-file-reference"
-          />
+          <span className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap">
+            <span className="shrink-0">{action}</span>
+            <FileReferenceChip
+              path={edit.path}
+              previewPath={edit.absolute_path || edit.path}
+              onOpen={onOpenFilePreview}
+              display="path"
+              active={editing}
+              className="min-w-0"
+              textClassName="truncate text-[12px]"
+              testId="activity-file-reference"
+            />
+            {hasCountedDiff ? <DiffPair added={edit.added} deleted={edit.deleted} /> : null}
+          </span>
         )}
-      detail={null}
-      aside={hasCountedDiff ? <DiffPair added={edit.added} deleted={edit.deleted} /> : null}
-    >
-      {failed ? (
-        <span className="block max-w-[42rem] truncate text-[11px] leading-4 text-destructive/75">
-          {failureDetail}
-        </span>
-      ) : null}
-      {showDiff ? (
-        <FileUnifiedDiff
-          diff={edit.diff!}
-          collapsed={displayMode === "collapsed_diff"}
-          added={edit.added}
-          deleted={edit.deleted}
-          previewPath={edit.absolute_path || edit.path}
-          onOpenFilePreview={onOpenFilePreview}
-        />
-      ) : null}
-    </ActivityStep>
+    />
   );
 }
 
@@ -219,262 +111,9 @@ export function hasVisibleDiffStats(edit: Pick<FileEditSummary, "added" | "delet
   return edit.added > 0 || edit.deleted > 0;
 }
 
-function cleanFileEditError(error?: string): string {
-  const firstLine = (error || "").replace(/\s+/g, " ").trim();
-  if (!firstLine) return "";
-  return firstLine
-    .replace(/^Error applying patch:\s*/i, "")
-    .replace(/^Error writing file:\s*/i, "")
-    .replace(/^Error editing file:\s*/i, "")
-    .replace(/^Error:\s*/i, "");
-}
-
-function formatFileEditError(error?: string): string {
-  const cleaned = cleanFileEditError(error);
-  if (!cleaned) return "";
-
-  if (/\bpermission denied\b/i.test(cleaned) || /\boperation not permitted\b/i.test(cleaned)) {
-    return "No permission to change this location.";
-  }
-
-  return cleaned
-    .replace(/^old_text not found in (.+)$/i, "Target text was not found in $1.")
-    .replace(/^old_text appears multiple times in (.+)$/i, "Target text matched multiple places in $1.")
-    .replace(/^file to (?:update|delete) does not exist: (.+)$/i, "File does not exist: $1.")
-    .replace(/^path to (?:update|delete) is not a file: (.+)$/i, "Path is not a file: $1.")
-    .slice(0, 180);
-}
-
-function FileUnifiedDiff({
-  diff,
-  collapsed,
-  added,
-  deleted,
-  showCollapsedStats = true,
-  previewPath,
-  onOpenFilePreview,
-}: {
-  diff: UIFileDiff;
-  collapsed: boolean;
-  added: number;
-  deleted: number;
-  showCollapsedStats?: boolean;
-  previewPath?: string;
-  onOpenFilePreview?: (path: string) => void;
-}) {
-  const { t } = useTranslation();
-  const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
-  const [open, setOpen] = useState(false);
-  const [expandedLines, setExpandedLines] = useState(false);
-  const renderableDiff = useMemo(() => parseRenderableFileDiff(diff), [diff]);
-  const language = useMemo(() => codeLanguageFromPath(previewPath), [previewPath]);
-  const totalLineCount = useMemo(() => countDiffLines(renderableDiff), [renderableDiff]);
-  const shouldAutoCollapse = totalLineCount > AUTO_COLLAPSE_DIFF_LINES || !!diff.truncated;
-  const startsCollapsed = collapsed || shouldAutoCollapse;
-  const shouldRenderBody = !startsCollapsed || open;
-  const shouldLimitLines = totalLineCount > INITIAL_VISIBLE_DIFF_LINES;
-  const lineLimit = expandedLines || !shouldLimitLines
-    ? totalLineCount
-    : INITIAL_VISIBLE_DIFF_LINES;
-  const visibleDiff = useMemo(
-    () => shouldRenderBody
-      ? selectVisibleDiffLines(renderableDiff, lineLimit, totalLineCount)
-      : EMPTY_VISIBLE_DIFF,
-    [lineLimit, renderableDiff, shouldRenderBody, totalLineCount],
-  );
-  const lineCountLabel = t("message.fileEditDiffLineCount", {
-    count: diff.truncated ? `${totalLineCount}+` : totalLineCount,
-    defaultValue: "{{count}} lines",
-  });
-  const viewDiffLabel = shouldAutoCollapse
-    ? tx("message.fileEditViewLargeDiff", "View large diff")
-    : tx("message.fileEditViewDiff", "View diff");
-
-  useEffect(() => {
-    setOpen(false);
-    setExpandedLines(false);
-  }, [diff]);
-
-  const handleToggleOpen = () => {
-    if (open) setExpandedLines(false);
-    setOpen(!open);
-  };
-
-  if (totalLineCount === 0) return null;
-
-  const renderBody = () => (
-    <div
-      className="mt-1 overflow-hidden rounded-md border border-border/55 bg-background/80 shadow-[0_1px_0_rgba(15,23,42,0.03)]"
-      data-testid="file-edit-diff"
-    >
-      {visibleDiff.hunks.map(({ hunk, skippedBefore }, index) => (
-        <div
-          key={`${hunk.old_start}-${hunk.new_start}-${index}`}
-          className={cn("min-w-0", index > 0 && "border-t border-border/45")}
-        >
-          {skippedBefore > 0 ? <DiffHunkGap lineCount={skippedBefore} /> : null}
-          <div className="overflow-x-auto">
-            <DiffSyntaxHighlight language={language} lines={hunk.lines} />
-          </div>
-        </div>
-      ))}
-      {visibleDiff.hiddenLineCount > 0 ? (
-        <div className="border-t border-border/45 bg-muted/30 px-2 py-1">
-          <button
-            type="button"
-            className={cn(
-              "inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-medium",
-              "text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
-            )}
-            data-testid="file-edit-diff-expand-lines"
-            onClick={() => setExpandedLines(true)}
-          >
-            <ChevronDown className="h-3 w-3" aria-hidden />
-            {t("message.fileEditShowMoreLines", {
-              count: visibleDiff.hiddenLineCount,
-              defaultValue: "Show {{count}} more lines",
-            })}
-          </button>
-        </div>
-      ) : expandedLines && shouldLimitLines ? (
-        <div className="border-t border-border/45 bg-muted/30 px-2 py-1">
-          <button
-            type="button"
-            className={cn(
-              "inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-medium",
-              "text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
-            )}
-            data-testid="file-edit-diff-collapse-lines"
-            onClick={() => setExpandedLines(false)}
-          >
-            <ChevronUp className="h-3 w-3" aria-hidden />
-            {tx("message.fileEditShowFewerLines", "Show fewer lines")}
-          </button>
-        </div>
-      ) : null}
-      {diff.truncated ? (
-        <div
-          className="flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-border/45 bg-muted/35 px-2 py-1 text-[11px] text-muted-foreground"
-          data-testid="file-edit-diff-truncated"
-        >
-          <span>
-            {tx("message.fileEditDiffTruncated", "Diff truncated. Open the file for the full change.")}
-          </span>
-          {previewPath && onOpenFilePreview ? (
-            <button
-              type="button"
-              className={cn(
-                "inline-flex items-center gap-1 rounded px-1 py-0.5 font-medium",
-                "text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
-              )}
-              data-testid="file-edit-diff-open-file"
-              onClick={() => onOpenFilePreview(previewPath)}
-            >
-              <ExternalLink className="h-3 w-3" aria-hidden />
-              {tx("message.fileEditOpenFile", "Open file")}
-            </button>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  );
-
-  if (!startsCollapsed) return renderBody();
-
-  return (
-    <div className="mt-1">
-      <button
-        type="button"
-        aria-expanded={open}
-        data-testid="file-edit-diff-toggle"
-        onClick={handleToggleOpen}
-        className={cn(
-          "flex w-full cursor-pointer items-center gap-2 rounded-md border border-border/45 bg-muted/35 px-2 py-1 text-left",
-          "text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/50",
-        )}
-      >
-        <ChevronRight
-          className={cn("h-3 w-3 shrink-0 transition-transform", open && "rotate-90")}
-          aria-hidden
-        />
-        <span className="min-w-0 flex-1">{viewDiffLabel}</span>
-        <span className="shrink-0 text-muted-foreground/65">{lineCountLabel}</span>
-        {showCollapsedStats ? <DiffPair added={added} deleted={deleted} /> : null}
-      </button>
-      {open ? renderBody() : null}
-    </div>
-  );
-}
-
-function countDiffLines(diff: RenderableFileDiff): number {
-  return diff.hunks.reduce((total, hunk) => total + hunk.lines.length, 0);
-}
-
-function selectVisibleDiffLines(
-  diff: RenderableFileDiff,
-  lineLimit: number,
-  totalLineCount: number,
-): VisibleDiff {
-  if (lineLimit >= totalLineCount) {
-    return {
-      hunks: diff.hunks.map((hunk, index) => ({
-        hunk,
-        skippedBefore: index > 0 ? countSkippedUnchangedLines(diff.hunks[index - 1], hunk) : 0,
-      })),
-      hiddenLineCount: 0,
-    };
-  }
-
-  let remaining = Math.max(0, lineLimit);
-  const hunks: VisibleDiffHunk[] = [];
-  let previousHunk: RenderableFileDiffHunk | null = null;
-  for (const hunk of diff.hunks) {
-    if (remaining <= 0) break;
-    const skippedBefore = previousHunk ? countSkippedUnchangedLines(previousHunk, hunk) : 0;
-    if (hunk.lines.length <= remaining) {
-      hunks.push({ hunk, skippedBefore });
-      remaining -= hunk.lines.length;
-      previousHunk = hunk;
-      continue;
-    }
-    hunks.push({ hunk: { ...hunk, lines: hunk.lines.slice(0, remaining) }, skippedBefore });
-    remaining = 0;
-    previousHunk = hunk;
-  }
-  return {
-    hunks,
-    hiddenLineCount: Math.max(0, totalLineCount - lineLimit),
-  };
-}
-
-function countSkippedUnchangedLines(
-  previous: RenderableFileDiffHunk,
-  current: RenderableFileDiffHunk,
-): number {
-  const oldGap = current.old_start - (previous.old_start + previous.old_lines);
-  const newGap = current.new_start - (previous.new_start + previous.new_lines);
-  return Math.max(0, oldGap, newGap);
-}
-
-function DiffHunkGap({ lineCount }: { lineCount: number }) {
-  const { t } = useTranslation();
-  return (
-    <div
-      className="flex items-center gap-2 bg-muted/35 px-2 py-1 text-[11px] text-muted-foreground"
-      data-testid="file-edit-diff-hunk-gap"
-    >
-      <span
-        className="select-none rounded border border-border/45 bg-background/70 px-1 font-mono text-muted-foreground/70"
-        aria-hidden
-      >
-        ...
-      </span>
-      <span>
-        {t("message.fileEditUnchangedLinesHidden", {
-          count: lineCount,
-          defaultValue: "{{count}} unchanged lines hidden",
-        })}
-      </span>
-    </div>
-  );
+function fileEditAction(edit: FileEditSummary, editing: boolean, failed: boolean): string {
+  const deleting = edit.operation === "delete";
+  if (failed) return deleting ? "Could not delete" : "Could not edit";
+  if (editing) return deleting ? "Deleting" : "Editing";
+  return deleting ? "Deleted" : "Edited";
 }

webui/src/components/thread/activity/GenericToolRun.tsx

@@ -0,0 +1,58 @@
+import {
+  AlertCircle,
+  FileSearch,
+  FolderOpen,
+  ListTree,
+  MemoryStick,
+  Play,
+  type LucideIcon,
+} from "lucide-react";
+import { useMemo } from "react";
+
+import { ActivityStep } from "@/components/thread/activity/ActivityStep";
+import {
+  describeGenericToolRun,
+  type GenericToolRunItem,
+  type GenericToolStatus,
+  type ToolFamily,
+} from "@/components/thread/activity/generic-tool-model";
+
+interface GenericToolRunModel {
+  status: GenericToolStatus;
+  label: string;
+  detail: string;
+  aside: string;
+  icon: LucideIcon;
+}
+
+export function GenericToolRun({ items }: { items: GenericToolRunItem[] }) {
+  const model = useMemo(() => buildModel(items), [items]);
+  const action = [model.label, model.detail].filter(Boolean).join(" ");
+  const label = model.aside ? `${action} · ${model.aside}` : action;
+
+  return (
+    <ActivityStep
+      icon={model.status === "error" ? AlertCircle : model.icon}
+      active={model.status === "running"}
+      tone={model.status === "error" ? "error" : model.status === "done" ? "success" : "active"}
+      label={label}
+    />
+  );
+}
+
+function buildModel(items: GenericToolRunItem[]): GenericToolRunModel {
+  const family = items[0]?.trace.family ?? "generic";
+  const presentation = describeGenericToolRun(items);
+  return {
+    ...presentation,
+    icon: activityIcon(family),
+  };
+}
+
+function activityIcon(family: ToolFamily): LucideIcon {
+  if (family === "content-search" || family === "file-search") return FileSearch;
+  if (family === "list") return ListTree;
+  if (family === "read") return FolderOpen;
+  if (family === "memory") return MemoryStick;
+  return Play;
+}

webui/src/components/thread/activity/ReasoningRow.tsx

@@ -2,51 +2,35 @@ import { useEffect, useRef, useState } from "react";
 import { Check, CircleDashed } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
-import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
 import { cn } from "@/lib/utils";
 
 import { ActivityStep } from "./ActivityStep";
+import { compactReasoningPreview } from "./reasoning-preview";
 
 export function ReasoningRow({
   text,
   streaming,
-  onOpenFilePreview,
+  className,
 }: {
   text: string;
   streaming: boolean;
-  onOpenFilePreview?: (path: string) => void;
+  className?: string;
 }) {
   const { t } = useTranslation();
-  useEffect(() => {
-    if (text.length > 0) preloadMarkdownText();
-  }, [text.length]);
+  const fallback = streaming
+    ? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
+    : t("message.reasoning", { defaultValue: "Thinking" });
+  const preview = compactReasoningPreview(text) || fallback;
   return (
     <ActivityStep
       marker={<ReasoningMarker streaming={streaming} />}
       active={streaming}
       tone={streaming ? "active" : "success"}
-      label={streaming
-        ? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
-        : t("message.reasoning", { defaultValue: "Thinking" })}
-    >
-      {text.trim() ? (
-        <MarkdownText
-          streaming={streaming}
-          onOpenFilePreview={onOpenFilePreview}
-          className={cn(
-            "min-w-0 text-[12.5px] italic text-muted-foreground/78",
-            "prose-p:my-1 prose-li:my-0.5",
-            "prose-headings:mt-2 prose-headings:mb-1 prose-headings:font-medium",
-            "prose-headings:text-muted-foreground/88 prose-strong:text-muted-foreground",
-            "prose-h1:text-[15px] prose-h2:text-[13.5px] prose-h3:text-[12.5px] prose-h4:text-[12px]",
-            "prose-a:text-blue-500 prose-a:underline hover:prose-a:text-blue-600 dark:prose-a:text-blue-300 dark:hover:prose-a:text-blue-200",
-            "prose-code:text-[0.92em]",
-          )}
-        >
-          {text}
-        </MarkdownText>
-      ) : null}
-    </ActivityStep>
+      label={preview}
+      labelClassName="italic text-muted-foreground/78"
+      contentClassName="overflow-hidden"
+      className={className}
+    />
   );
 }
 

webui/src/components/thread/activity/ThinkingReasoningShell.tsx

@@ -0,0 +1,83 @@
+import { ChevronDown } from "lucide-react";
+import type { ReactNode, Ref } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ThinkingReasoningShellProps {
+  active: boolean;
+  expanded: boolean;
+  label: string;
+  children: ReactNode;
+  viewportRef: Ref<HTMLDivElement>;
+  contentRef: Ref<HTMLDivElement>;
+  onToggle: () => void;
+  onScroll: () => void;
+}
+
+export function ThinkingReasoningShell({
+  active,
+  expanded,
+  label,
+  children,
+  viewportRef,
+  contentRef,
+  onToggle,
+  onScroll,
+}: ThinkingReasoningShellProps) {
+  return (
+    <div
+      className="flex w-full max-w-[45rem] animate-in flex-col fade-in duration-300 motion-reduce:animate-none"
+      data-state={active ? "thinking" : "done"}
+    >
+      <button
+        type="button"
+        className="group inline-flex min-h-5 items-center self-start gap-1.5 bg-transparent p-0"
+        onClick={onToggle}
+        aria-expanded={expanded}
+        aria-label={label}
+        aria-live={active ? "polite" : undefined}
+      >
+        <span
+          className={cn(
+            "min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
+            active && "animate-pulse motion-reduce:animate-none",
+          )}
+        >
+          {label}
+        </span>
+        <ChevronDown
+          className={cn(
+            "h-3 w-3 shrink-0 text-muted-foreground/60 transition-[transform,color] duration-200",
+            "group-hover:text-muted-foreground motion-reduce:transition-none",
+            expanded && "rotate-180",
+          )}
+          strokeWidth={1.8}
+          aria-hidden
+        />
+      </button>
+
+      <div
+        className={cn(
+          "grid transition-[grid-template-rows,opacity] duration-300 motion-reduce:transition-none",
+          expanded
+            ? "grid-rows-[1fr] opacity-100"
+            : "pointer-events-none grid-rows-[0fr] opacity-0",
+        )}
+      >
+        <div className="min-h-0 overflow-hidden">
+          <div
+            ref={viewportRef}
+            data-testid={expanded ? "agent-activity-scroll" : undefined}
+            onScroll={onScroll}
+            className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            aria-hidden={!expanded}
+          >
+            <div ref={contentRef} className="flex flex-col gap-0.5">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

webui/src/components/thread/activity/WebActivityRow.tsx

@@ -0,0 +1,74 @@
+import { Globe2 } from "lucide-react";
+import { useMemo } from "react";
+
+import { ActivityStep, type ActivityStepTone } from "@/components/thread/activity/ActivityStep";
+import { useLogoFallback } from "@/hooks/useLogoFallback";
+import { browserSafeFaviconUrls } from "@/lib/provider-brand";
+
+interface WebActivityRowProps {
+  title: string;
+  href: string;
+  host: string;
+  displayUrl: string;
+  active?: boolean;
+  tone?: ActivityStepTone;
+}
+
+export function WebActivityRow({
+  title,
+  href,
+  host,
+  displayUrl,
+  active = false,
+  tone = active ? "active" : "neutral",
+}: WebActivityRowProps) {
+  return (
+    <ActivityStep
+      marker={<WebFavicon host={host} active={active} />}
+      active={active}
+      tone={tone}
+      label={(
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer noopener"
+          aria-label={`${title} · ${displayUrl}`}
+          className="flex min-w-0 items-center gap-2 overflow-hidden text-foreground/82 hover:text-foreground"
+        >
+          <span className="min-w-0 truncate font-medium">{title}</span>
+          <span
+            className="max-w-[9rem] shrink truncate rounded-full bg-muted/65 px-2 py-0.5 font-mono text-[10px] leading-4 text-muted-foreground/72 sm:max-w-[18rem]"
+            data-testid="activity-web-url"
+          >
+            {displayUrl}
+          </span>
+        </a>
+      )}
+      contentClassName="overflow-hidden"
+    />
+  );
+}
+
+function WebFavicon({ host, active }: { host: string; active: boolean }) {
+  const candidates = useMemo(() => browserSafeFaviconUrls(host), [host]);
+  const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(candidates);
+
+  if (!logoUrl) {
+    return <Globe2 className="h-4 w-4 shrink-0 text-muted-foreground/52" aria-hidden />;
+  }
+
+  return (
+    <img
+      src={logoUrl}
+      alt=""
+      className={`h-4 w-4 shrink-0 rounded-[3px] object-contain${active ? " animate-pulse" : ""}`}
+      decoding="async"
+      loading="lazy"
+      referrerPolicy="no-referrer"
+      draggable={false}
+      onLoad={onLogoLoad}
+      onError={onLogoError}
+      data-testid={`activity-web-favicon-${host}`}
+    />
+  );
+}

webui/src/components/thread/activity/WebSearchRun.tsx

@@ -0,0 +1,34 @@
+import { AlertCircle, Search } from "lucide-react";
+
+import { ActivityStep } from "@/components/thread/activity/ActivityStep";
+import { WebActivityRow } from "@/components/thread/activity/WebActivityRow";
+import {
+  presentWebSearchAction,
+  type WebSearchRunModel,
+} from "@/components/thread/activity/web-search-model";
+
+export function WebSearchRun({ run, turnActive }: { run: WebSearchRunModel; turnActive: boolean }) {
+  const active = run.status === "running" && turnActive;
+  const status = run.status === "running" && !turnActive ? "done" : run.status;
+  const label = presentWebSearchAction(run.query, status);
+
+  return (
+    <>
+      <ActivityStep
+        icon={status === "error" ? AlertCircle : Search}
+        active={active}
+        tone={status === "error" ? "error" : status === "done" ? "success" : "active"}
+        label={label}
+      />
+      {run.sources.map((source) => (
+        <WebActivityRow
+          key={source.href}
+          title={source.title}
+          href={source.href}
+          host={source.host}
+          displayUrl={source.displayUrl}
+        />
+      ))}
+    </>
+  );
+}

webui/src/components/thread/activity/activity-message-model.ts

@@ -0,0 +1,114 @@
+import {
+  canonicalToolTrace,
+  mergeToolProgressEvents,
+  mergeUniqueToolTraceLines,
+} from "@/lib/tool-traces";
+import type { UIMediaAttachment, UIMessage } from "@/lib/types";
+
+/**
+ * Live tool progress is already folded into one trace message. Persisted
+ * transcripts can contain the same progress as adjacent start/end rows, so
+ * normalize both paths before rendering the activity timeline.
+ */
+export function coalesceActivityMessages(messages: UIMessage[]): UIMessage[] {
+  const normalized: UIMessage[] = [];
+
+  for (const message of messages) {
+    const targetIndex = findMergeTarget(normalized, message);
+    if (targetIndex < 0) {
+      normalized.push(message);
+      continue;
+    }
+    normalized[targetIndex] = mergeTraceMessages(normalized[targetIndex], message);
+  }
+
+  return normalized;
+}
+
+function findMergeTarget(messages: UIMessage[], incoming: UIMessage): number {
+  if (incoming.kind !== "trace") return -1;
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const previous = messages[index];
+    if (previous.kind !== "trace") continue;
+    if (hasSharedToolCall(previous, incoming) && sameTurn(previous, incoming)) return index;
+  }
+
+  const adjacentIndex = messages.length - 1;
+  const adjacent = messages[adjacentIndex];
+  return canMergeAdjacentProgress(adjacent, incoming) ? adjacentIndex : -1;
+}
+
+function canMergeAdjacentProgress(
+  previous: UIMessage | undefined,
+  incoming: UIMessage,
+): previous is UIMessage {
+  if (!previous || previous.kind !== "trace") return false;
+  if (!sameTurn(previous, incoming)) return false;
+  if (
+    previous.activitySegmentId
+    && incoming.activitySegmentId
+    && previous.activitySegmentId === incoming.activitySegmentId
+  ) {
+    return true;
+  }
+  return hasSharedTrace(previous, incoming) && completesPreviousProgress(previous, incoming);
+}
+
+function mergeTraceMessages(previous: UIMessage, incoming: UIMessage): UIMessage {
+  const traces = mergeUniqueToolTraceLines(messageTraces(previous), messageTraces(incoming)).traces;
+  const toolEvents = mergeToolProgressEvents(previous.toolEvents, incoming.toolEvents ?? []);
+  const fileEdits = [...(previous.fileEdits ?? []), ...(incoming.fileEdits ?? [])];
+  const media = uniqueMedia([...(previous.media ?? []), ...(incoming.media ?? [])]);
+
+  return {
+    ...previous,
+    content: traces[traces.length - 1] ?? incoming.content ?? previous.content,
+    traces,
+    ...(toolEvents.length ? { toolEvents } : { toolEvents: undefined }),
+    ...(fileEdits.length ? { fileEdits } : { fileEdits: undefined }),
+    ...(media.length ? { media } : { media: undefined }),
+    isStreaming: incoming.isStreaming,
+    turnPhase: incoming.turnPhase ?? previous.turnPhase,
+    turnSeq: incoming.turnSeq ?? previous.turnSeq,
+  };
+}
+
+function messageTraces(message: UIMessage): string[] {
+  if (message.traces?.length) return message.traces;
+  return message.content.trim() ? [message.content] : [];
+}
+
+function hasSharedToolCall(previous: UIMessage, incoming: UIMessage): boolean {
+  const previousCallIds = new Set(
+    (previous.toolEvents ?? []).map((event) => event.call_id).filter(Boolean),
+  );
+  return (incoming.toolEvents ?? []).some((event) => (
+    !!event.call_id && previousCallIds.has(event.call_id)
+  ));
+}
+
+function hasSharedTrace(previous: UIMessage, incoming: UIMessage): boolean {
+  const previousTraces = new Set(messageTraces(previous).map(canonicalToolTrace));
+  return messageTraces(incoming).some((trace) => previousTraces.has(canonicalToolTrace(trace)));
+}
+
+function completesPreviousProgress(previous: UIMessage, incoming: UIMessage): boolean {
+  const previousPhases = new Set((previous.toolEvents ?? []).map((event) => event.phase));
+  const incomingPhases = new Set((incoming.toolEvents ?? []).map((event) => event.phase));
+  return previousPhases.has("start") && (incomingPhases.has("end") || incomingPhases.has("error"));
+}
+
+function sameTurn(previous: UIMessage, incoming: UIMessage): boolean {
+  return !previous.turnId || !incoming.turnId || previous.turnId === incoming.turnId;
+}
+
+function uniqueMedia(media: UIMediaAttachment[]): UIMediaAttachment[] {
+  const seen = new Set<string>();
+  return media.filter((item) => {
+    const key = `${item.kind}:${item.url ?? ""}:${item.name ?? ""}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}

webui/src/components/thread/activity/activity-text.ts

@@ -0,0 +1,68 @@
+export function redactActivityText(value: string): string {
+  return value
+    .replace(/(https?:\/\/)[^/@\s]+@/gi, "$1<redacted>@")
+    .replace(/\b(Bearer)\s+[A-Za-z0-9._~+/=-]+/gi, "$1 <redacted>")
+    .replace(
+      /(^|[\s;])((?:[A-Z0-9_]*)(?:API[_-]?KEY|TOKEN|SECRET|PASSWORD|PASS|AUTH)(?:[A-Z0-9_]*))=(?:"[^"]*"|'[^']*'|[^\s]+)/gim,
+      "$1$2=<redacted>",
+    )
+    .replace(
+      /(--(?:api-?key|access-?token|token|secret|password)(?:=|\s+))(?:"[^"]*"|'[^']*'|[^\s]+)/gi,
+      "$1<redacted>",
+    )
+    .replace(/([?&](?:api_?key|access_?token|token|secret|password)=)[^&\s]+/gi, "$1<redacted>")
+    .replace(
+      /(["']?authorization["']?\s*[:=]\s*["']?)[^"'\r\n,;}]+/gi,
+      "$1<redacted>",
+    )
+    .replace(
+      /(["']?(?:api[_-]?key|access[_-]?token|token|secret|password)["']?\s*[:=]\s*)["']?[^"'\s,&;}]+["']?/gi,
+      "$1<redacted>",
+    )
+    .replace(/\b(?:sk(?:-proj)?|xox[baprs]?|xapp)[-_][A-Za-z0-9._-]{8,}\b/gi, "<redacted>")
+    .replace(/\bgh[pousr]_[A-Za-z0-9]{12,}\b/g, "<redacted>")
+    .replace(/\bAKIA[A-Z0-9]{16}\b/g, "<redacted>")
+    .replace(/\b\d{6,12}:[A-Za-z0-9_-]{20,}\b/g, "<redacted>");
+}
+
+export function redactShellCommand(command: string): string {
+  return redactActivityText(command).replaceAll("<redacted>", "••••");
+}
+
+export function compactActivityPath(value: string): string {
+  return value
+    .replace(/\/Users\/[^/\s"']+/g, "~")
+    .replace(/\/home\/[^/\s"']+/g, "~")
+    .replace(/\/private\/tmp\/[^\s"']+/g, "/tmp/…")
+    .replace(/\/var\/folders\/[^\s"']+/g, "/var/folders/…");
+}
+
+export function safeActivityDetail(value: string, maxLength = 96): string {
+  return truncateMiddle(
+    compactActivityPath(redactActivityText(value))
+      .replace(/\/\.nanobot\/tool-results\/[^\s"']+/g, "/.nanobot/tool-results/…")
+      .replace(/\s+/g, " ")
+      .replace(/^["']|["']$/g, "")
+      .trim(),
+    maxLength,
+  );
+}
+
+export function summarizeShellCommand(command: string): string {
+  const lines = redactShellCommand(command.replace(/\r\n/g, "\n"))
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean);
+  const firstLine = compactActivityPath(lines[0] || "command");
+  const firstPreview = truncateMiddle(firstLine, 92);
+  return lines.length <= 1
+    ? firstPreview
+    : `${firstPreview} · script, ${lines.length} lines`;
+}
+
+function truncateMiddle(value: string, maxLength: number): string {
+  if (value.length <= maxLength) return value;
+  const head = Math.ceil((maxLength - 1) * 0.62);
+  const tail = Math.floor((maxLength - 1) * 0.38);
+  return `${value.slice(0, head)}…${value.slice(-tail)}`;
+}

webui/src/components/thread/activity/generic-tool-model.ts

@@ -0,0 +1,367 @@
+import { compactActivityPath, redactActivityText } from "./activity-text";
+
+export type GenericToolStatus = "running" | "done" | "error";
+export type ToolFamily = "content-search" | "file-search" | "list" | "read" | "memory" | "generic";
+
+export interface ToolField {
+  key:
+    | "query"
+    | "pattern"
+    | "glob"
+    | "path"
+    | "file_path"
+    | "url"
+    | "action"
+    | "key"
+    | "label"
+    | "name"
+    | "channel"
+    | "chat_id"
+    | "session_id"
+    | "ui_summary";
+  value: string;
+}
+
+export interface GenericToolTrace {
+  name: string;
+  family: ToolFamily;
+  groupKey: string;
+  fields: ToolField[];
+  collectedSource: boolean;
+}
+
+export interface GenericToolRunItem {
+  trace: GenericToolTrace;
+  status: GenericToolStatus;
+  error?: string;
+}
+
+export interface GenericToolPresentation {
+  status: GenericToolStatus;
+  label: string;
+  detail: string;
+  aside: string;
+}
+
+const CONTENT_SEARCH_TOOLS = new Set([
+  "grep",
+  "rg",
+  "ripgrep",
+  "search_code",
+  "search_content",
+  "search_files_content",
+  "find_text",
+]);
+const FILE_SEARCH_TOOLS = new Set([
+  "find",
+  "find_file",
+  "find_files",
+  "glob",
+  "search_files",
+]);
+const LIST_TOOLS = new Set(["list_dir", "list_directory", "list_files", "ls"]);
+const READ_TOOLS = new Set(["read", "read_file", "read_text_file"]);
+const MEMORY_TOOLS = new Set(["memory_search", "search_memory", "recall_memory"]);
+const EXCLUDED_TOOL_PREFIXES = ["mcp_"];
+const EXCLUDED_TOOLS = new Set([
+  "apply_patch",
+  "cli_anything_run",
+  "edit_file",
+  "exec",
+  "exec_command",
+  "execute_command",
+  "run_cli_app",
+  "run_command",
+  "run_shell",
+  "shell",
+  "terminal",
+  "web_fetch",
+  "web_search",
+  "write_file",
+]);
+
+export function parseGenericToolTrace(line: string): GenericToolTrace | null {
+  const call = parseCall(line);
+  if (!call || isExcludedTool(call.name)) return null;
+  const family = toolFamily(call.name);
+  const fields = safeFields(call.args);
+  const collectedSource = fields.some((field) => isCollectedSourcePath(field.value));
+  return {
+    name: call.name,
+    family,
+    groupKey: family === "generic"
+      ? `${family}:${call.name}`
+      : `${family}:${collectedSource ? "collected" : "workspace"}`,
+    fields,
+    collectedSource,
+  };
+}
+
+export function canGroupGenericToolRuns(previous: GenericToolRunItem, next: GenericToolRunItem): boolean {
+  return previous.trace.groupKey === next.trace.groupKey;
+}
+
+function compactGenericToolPath(value: string): string {
+  const normalized = redactActivityText(value).replace(/\\/g, "/");
+  if (isCollectedSourcePath(normalized)) {
+    return truncateMiddle(normalized.split("/").pop() || "collected source", 64);
+  }
+  return compactActivityPath(normalized);
+}
+
+export function describeGenericToolRun(items: GenericToolRunItem[]): GenericToolPresentation {
+  const status = aggregateStatus(items);
+  const family = items[0]?.trace.family ?? "generic";
+  const name = items[0]?.trace.name ?? "tool";
+  const collected = items.length > 0 && items.every((item) => item.trace.collectedSource);
+  return {
+    status,
+    label: activityLabel(family, status, collected, name, items),
+    detail: activityDetail(items, family, name),
+    aside: activityAside(items, family),
+  };
+}
+
+function parseCall(line: string): { name: string; args: unknown } | null {
+  const match = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(line.trim());
+  if (!match) return null;
+  const name = compactToolName(match[1]);
+  let args: unknown;
+  try {
+    args = match[2].trim() ? JSON.parse(match[2]) : {};
+  } catch {
+    args = {};
+  }
+  return { name, args };
+}
+
+function compactToolName(name: string): string {
+  return name.toLowerCase().split(".").pop() || name.toLowerCase();
+}
+
+function isExcludedTool(name: string): boolean {
+  return EXCLUDED_TOOLS.has(name) || EXCLUDED_TOOL_PREFIXES.some((prefix) => name.startsWith(prefix));
+}
+
+function toolFamily(name: string): ToolFamily {
+  if (CONTENT_SEARCH_TOOLS.has(name)) return "content-search";
+  if (FILE_SEARCH_TOOLS.has(name)) return "file-search";
+  if (LIST_TOOLS.has(name)) return "list";
+  if (READ_TOOLS.has(name)) return "read";
+  if (MEMORY_TOOLS.has(name)) return "memory";
+  return "generic";
+}
+
+function safeFields(args: unknown): ToolField[] {
+  if (!args || typeof args !== "object" || Array.isArray(args)) return [];
+  const record = args as Record<string, unknown>;
+  const fields: ToolField[] = [];
+  for (const key of [
+    "query",
+    "pattern",
+    "glob",
+    "path",
+    "file_path",
+    "url",
+    "action",
+    "key",
+    "label",
+    "name",
+    "channel",
+    "chat_id",
+    "session_id",
+    "ui_summary",
+  ] as const) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) {
+      fields.push({ key, value: value.trim() });
+    }
+  }
+  return fields;
+}
+
+function aggregateStatus(items: GenericToolRunItem[]): GenericToolStatus {
+  if (items.some((item) => item.status === "error")) return "error";
+  if (items.some((item) => item.status === "running")) return "running";
+  return "done";
+}
+
+function activityLabel(
+  family: ToolFamily,
+  status: GenericToolStatus,
+  collected: boolean,
+  name: string,
+  items: GenericToolRunItem[],
+): string {
+  if (family === "content-search") {
+    return statusCopy(
+      status,
+      collected ? "Reviewing sources" : "Searching files",
+      collected ? "Reviewed sources" : "Searched files",
+      collected ? "Could not review sources" : "Could not search files",
+    );
+  }
+  if (family === "file-search") {
+    return statusCopy(status, "Finding files", "Found files", "Could not find files");
+  }
+  if (family === "list") {
+    return statusCopy(status, "Listing files", "Listed files", "Could not list files");
+  }
+  if (family === "read") {
+    return statusCopy(
+      status,
+      collected ? "Reading source" : "Reading file",
+      collected ? "Read source" : "Read file",
+      collected ? "Could not read source" : "Could not read file",
+    );
+  }
+  if (family === "memory") {
+    return statusCopy(status, "Searching memory", "Searched memory", "Could not search memory");
+  }
+
+  const action = fieldValue(items[0]?.trace, "action").toLowerCase();
+  switch (name) {
+    case "generate_image":
+      return statusCopy(status, "Generating image", "Generated image", "Could not generate image");
+    case "spawn":
+      return statusCopy(status, "Delegating task", "Delegated task", "Could not delegate task");
+    case "message":
+      return statusCopy(status, "Sending message", "Sent message", "Could not send message");
+    case "my":
+      return action === "set" || action === "modify"
+        ? statusCopy(status, "Updating agent settings", "Updated agent settings", "Could not update agent settings")
+        : statusCopy(status, "Checking agent settings", "Checked agent settings", "Could not check agent settings");
+    case "cron":
+      if (action === "add") return statusCopy(status, "Scheduling automation", "Scheduled automation", "Could not schedule automation");
+      if (action === "remove") return statusCopy(status, "Removing automation", "Removed automation", "Could not remove automation");
+      return statusCopy(status, "Checking automations", "Checked automations", "Could not check automations");
+    case "create_goal":
+      return statusCopy(status, "Starting long task", "Started long task", "Could not start long task");
+    case "update_goal":
+      return statusCopy(status, "Updating long task", "Updated long task", "Could not update long task");
+    case "write_stdin":
+      return statusCopy(status, "Continuing command", "Continued command", "Could not continue command");
+    case "list_exec_sessions":
+      return statusCopy(status, "Checking running commands", "Checked running commands", "Could not check running commands");
+    case "screenshot":
+    case "capture_screenshot":
+      return statusCopy(status, "Capturing screenshot", "Captured screenshot", "Could not capture screenshot");
+    default: {
+      const humanName = humanizeToolName(name);
+      return statusCopy(
+        status,
+        `Running ${humanName}`,
+        `Completed ${humanName}`,
+        `Could not complete ${humanName}`,
+      );
+    }
+  }
+}
+
+function activityDetail(items: GenericToolRunItem[], family: ToolFamily, name: string): string {
+  if (items.length !== 1) return "";
+  const trace = items[0].trace;
+  if (family === "content-search") {
+    return quote(fieldValue(trace, "query") || fieldValue(trace, "pattern"));
+  }
+  if (family === "file-search") {
+    return compactDetail(
+      fieldValue(trace, "glob")
+      || fieldValue(trace, "query")
+      || fieldValue(trace, "pattern")
+      || fieldValue(trace, "path"),
+    );
+  }
+  if (family === "list" || family === "read") {
+    return compactDetail(fieldValue(trace, "path") || fieldValue(trace, "file_path"));
+  }
+  if (family === "memory") return quote(fieldValue(trace, "query"));
+
+  switch (name) {
+    case "spawn":
+      return safeText(fieldValue(trace, "label"));
+    case "message":
+      return safeText(fieldValue(trace, "channel"));
+    case "my":
+      return safeText(fieldValue(trace, "key"));
+    case "cron":
+      return safeText(fieldValue(trace, "name"));
+    case "create_goal":
+      return safeText(fieldValue(trace, "ui_summary"));
+    case "update_goal":
+      return safeText(fieldValue(trace, "action"));
+    case "write_stdin":
+      return compactIdentifier(fieldValue(trace, "session_id"));
+    case "screenshot":
+    case "capture_screenshot":
+      return "";
+    default:
+      return "";
+  }
+}
+
+function activityAside(items: GenericToolRunItem[], family: ToolFamily): string {
+  const pathCount = uniqueValues(items, ["path", "file_path"]).length;
+  if (pathCount > 1) return `${pathCount} files`;
+  if (items.length <= 1) return "";
+  if (family === "content-search" || family === "file-search" || family === "memory") {
+    return `${items.length} searches`;
+  }
+  return `${items.length} actions`;
+}
+
+function fieldValue(trace: GenericToolTrace | undefined, key: ToolField["key"]): string {
+  return trace?.fields.find((field) => field.key === key)?.value ?? "";
+}
+
+function uniqueValues(items: GenericToolRunItem[], keys: ToolField["key"][]): string[] {
+  const values = items.flatMap((item) => item.trace.fields)
+    .filter((field) => keys.includes(field.key))
+    .map((field) => field.value);
+  return [...new Set(values)];
+}
+
+function statusCopy(status: GenericToolStatus, running: string, done: string, failed: string): string {
+  return status === "running" ? running : status === "error" ? failed : done;
+}
+
+function compactDetail(value: string): string {
+  return value ? truncateMiddle(compactGenericToolPath(value), 88) : "";
+}
+
+function safeText(value: string): string {
+  return value ? truncateMiddle(redactActivityText(value).replace(/\s+/g, " ").trim(), 88) : "";
+}
+
+function quote(value: string): string {
+  const safe = safeText(value);
+  return safe ? `“${safe}”` : "";
+}
+
+function compactIdentifier(value: string): string {
+  const safe = safeText(value);
+  if (safe.length <= 16) return safe;
+  return `${safe.slice(0, 7)}…${safe.slice(-5)}`;
+}
+
+function humanizeToolName(name: string): string {
+  const words = name
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[._-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .toLowerCase();
+  return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "tool action";
+}
+
+function isCollectedSourcePath(value: string): boolean {
+  const normalized = value.replace(/\\/g, "/");
+  return normalized.includes("/.nanobot/tool-results/") || normalized.includes("/nanobot/tool-results/");
+}
+
+function truncateMiddle(value: string, maxLength: number): string {
+  if (value.length <= maxLength) return value;
+  const head = Math.ceil((maxLength - 1) * 0.62);
+  const tail = Math.floor((maxLength - 1) * 0.38);
+  return `${value.slice(0, head)}…${value.slice(-tail)}`;
+}

webui/src/components/thread/activity/mcp-activity-model.ts

@@ -0,0 +1,104 @@
+import { safeActivityDetail } from "./activity-text";
+import { formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
+
+export type McpActivityStatus = "running" | "done" | "error";
+
+export interface McpActivityDescription {
+  action: string;
+  target?: string;
+}
+
+export function describeMcpActivity(
+  toolName: string,
+  args: unknown,
+  status: McpActivityStatus,
+): McpActivityDescription {
+  const name = toolName.toLowerCase();
+
+  if (matches(name, "navigate", "goto", "open_url", "visit")) {
+    return describe(status, "Opening", "Opened", "Could not open", value(args, ["url"]));
+  }
+  if (matches(name, "click", "tap")) {
+    return describe(status, "Clicking", "Clicked", "Could not click", elementTarget(args));
+  }
+  if (matches(name, "type", "fill", "enter_text", "insert_text")) {
+    const target = value(args, ["element", "selector", "ref", "name"]);
+    return describe(status, "Entering text", "Entered text", "Could not enter text", target && `in ${target}`);
+  }
+  if (matches(name, "press_key", "keypress")) {
+    return describe(status, "Pressing", "Pressed", "Could not press", value(args, ["key"]));
+  }
+  if (matches(name, "hover")) {
+    return describe(status, "Hovering over", "Hovered over", "Could not hover over", elementTarget(args));
+  }
+  if (matches(name, "select", "select_option")) {
+    return describe(status, "Selecting", "Selected", "Could not select", elementTarget(args));
+  }
+  if (matches(name, "snapshot", "inspect", "get_page_content", "page_content")) {
+    return describe(status, "Inspecting page", "Inspected page", "Could not inspect page");
+  }
+  if (matches(name, "screenshot", "capture_screenshot")) {
+    return describe(status, "Capturing screenshot", "Captured screenshot", "Could not capture screenshot");
+  }
+  if (matches(name, "wait", "wait_for")) {
+    return describe(status, "Waiting for page", "Waited for page", "Page did not become ready");
+  }
+  if (matches(name, "search", "web_search")) {
+    return describe(status, "Searching", "Searched", "Could not search", value(args, ["query", "q"]));
+  }
+
+  const action = humanizeToolName(toolName);
+  if (status === "running") return { action: `Running ${action}` };
+  if (status === "error") return { action: `${action} failed` };
+  return { action: `${action} completed` };
+}
+
+function describe(
+  status: McpActivityStatus,
+  running: string,
+  done: string,
+  failed: string,
+  target?: string,
+): McpActivityDescription {
+  return {
+    action: status === "running" ? running : status === "error" ? failed : done,
+    target: target ? compactUrl(target) : undefined,
+  };
+}
+
+function matches(name: string, ...actions: string[]): boolean {
+  return actions.some((action) => name === action || name.endsWith(`_${action}`));
+}
+
+function elementTarget(args: unknown): string | undefined {
+  return value(args, ["element", "selector", "ref", "name", "text"]);
+}
+
+function value(args: unknown, keys: string[]): string | undefined {
+  if (!args || typeof args !== "object" || Array.isArray(args)) return undefined;
+  const record = args as Record<string, unknown>;
+  for (const key of keys) {
+    const candidate = record[key];
+    if (typeof candidate === "string" && candidate.trim()) return candidate.trim();
+    if (typeof candidate === "number" || typeof candidate === "boolean") return String(candidate);
+  }
+  return undefined;
+}
+
+function compactUrl(value: string): string {
+  const url = parseSafeActivityHttpUrl(value);
+  if (url) return formatCompactWebUrl(url);
+  if (/^https?:\/\//i.test(value.trim())) return "Private address";
+  return safeActivityDetail(value, 80);
+}
+
+function humanizeToolName(value: string): string {
+  const words = value
+    .replace(/^(?:browser|page|playwright)[_.-]+/i, "")
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[_.-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .toLowerCase();
+  return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "Tool call";
+}

webui/src/components/thread/activity/reasoning-preview.ts

@@ -0,0 +1,7 @@
+export function compactReasoningPreview(value: string): string {
+  return value
+    .replace(/\[([^\]]+)]\([^)]+\)/g, "$1")
+    .replace(/[*_#`~]+/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}

webui/src/components/thread/activity/trace-activity-model.ts

@@ -0,0 +1,236 @@
+import type { GenericToolStatus } from "./generic-tool-model";
+import { safeActivityDetail, summarizeShellCommand } from "./activity-text";
+import { presentWebSearchAction } from "./web-search-model";
+import { displayWebHost, formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
+
+export interface TraceDescription {
+  kind: "search" | "tool" | "done" | "trace";
+  label: string;
+  detail: string;
+  icon?: "clock";
+  url?: string;
+  host?: string;
+}
+
+export function describeTraceLine(
+  line: string,
+  status: GenericToolStatus,
+  result?: unknown,
+): TraceDescription {
+  const trimmed = line.trim();
+  const functionMatch = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(trimmed);
+  const name = (functionMatch?.[1] ?? "").toLowerCase().split(".").pop() || "";
+  const args = functionMatch?.[2] ?? "";
+  const parsedUrl = traceUrlFromArgs(args, trimmed);
+  const webDetail = parsedUrl ? formatCompactWebUrl(parsedUrl) : "";
+  const plainWebReadTrace =
+    !!parsedUrl && /\b(fetch(?:ing|ed)?|read(?:ing)?|opened?|opening)\b/i.test(trimmed);
+
+  if (/search/i.test(name)) {
+    const query = traceFieldFromArgs(args, ["query", "q", "text"]) || args || trimmed;
+    return {
+      kind: "search",
+      label: presentWebSearchAction(query, status),
+      detail: "",
+    };
+  }
+  if (/fetch|read|open/i.test(name) || plainWebReadTrace) {
+    const rawTarget = traceFieldFromArgs(args, ["path", "file_path", "url"]) || args || trimmed;
+    const pageTitle = parsedUrl ? webPageTitle(result) : "";
+    return {
+      kind: "tool",
+      label: pageTitle || statusCopy(status, "Reading", "Read", "Could not read"),
+      detail: webDetail || (/^https?:\/\//i.test(rawTarget.trim())
+        ? "Private address"
+        : safeActivityDetail(rawTarget)),
+      url: parsedUrl?.href,
+      host: parsedUrl ? displayWebHost(parsedUrl.hostname) : undefined,
+    };
+  }
+  if (isShellTraceName(name)) return describeShellTrace(args, trimmed, status);
+  if (name === "write_file") {
+    return describeFileMutationTrace(args, status, "Writing file", "Wrote file", "Could not write file");
+  }
+  if (name === "edit_file" || name === "apply_patch") {
+    return describeFileMutationTrace(args, status, "Editing file", "Edited file", "Could not edit file");
+  }
+  if (name) {
+    const action = humanizeTraceToolName(name);
+    return {
+      kind: "tool",
+      label: statusCopy(
+        status,
+        `Running ${action}`,
+        `Completed ${action}`,
+        `Could not complete ${action}`,
+      ),
+      detail: "",
+    };
+  }
+  if (/done|complete|success/i.test(trimmed)) {
+    return { kind: "done", label: "Completed step", detail: safeActivityDetail(trimmed) };
+  }
+  return {
+    kind: status === "done" ? "done" : "trace",
+    label: statusCopy(status, "Working", "Completed step", "Step failed"),
+    detail: safeActivityDetail(trimmed),
+  };
+}
+
+function webPageTitle(result: unknown): string {
+  if (result && typeof result === "object" && !Array.isArray(result)) {
+    const title = (result as Record<string, unknown>).title;
+    if (typeof title === "string") return safeActivityDetail(title);
+  }
+  if (typeof result !== "string") return "";
+  const heading = result.match(/^#\s+(.+)$/m)?.[1]?.trim();
+  return heading ? safeActivityDetail(heading) : "";
+}
+
+function describeShellTrace(
+  args: string,
+  fallback: string,
+  status: GenericToolStatus,
+): TraceDescription {
+  const command = shellCommandFromArgs(args) || fallback;
+  if (/^(?:\/(?:usr\/)?bin\/)?date(?:\s|$)/i.test(command.trim())) {
+    return {
+      kind: "tool",
+      label: statusCopy(
+        status,
+        "Checking current time",
+        "Checked current time",
+        "Could not check current time",
+      ),
+      detail: "",
+      icon: "clock",
+    };
+  }
+  return {
+    kind: "tool",
+    label: statusCopy(status, "Running command", "Ran command", "Command failed"),
+    detail: summarizeShellCommand(command),
+  };
+}
+
+function describeFileMutationTrace(
+  args: string,
+  status: GenericToolStatus,
+  running: string,
+  done: string,
+  failed: string,
+): TraceDescription {
+  const path = traceFieldFromArgs(args, ["path", "file_path"]);
+  return {
+    kind: "tool",
+    label: statusCopy(status, running, done, failed),
+    detail: path ? safeActivityDetail(path) : "",
+  };
+}
+
+function statusCopy(
+  status: GenericToolStatus,
+  running: string,
+  done: string,
+  failed: string,
+): string {
+  return status === "running" ? running : status === "error" ? failed : done;
+}
+
+function traceFieldFromArgs(args: string, keys: string[]): string {
+  const compactArgs = args.trim();
+  if (!compactArgs) return "";
+  try {
+    const parsed = JSON.parse(compactArgs) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return "";
+    const record = parsed as Record<string, unknown>;
+    for (const key of keys) {
+      const value = record[key];
+      if (typeof value === "string" && value.trim()) return value.trim();
+    }
+  } catch {
+    return "";
+  }
+  return "";
+}
+
+function isShellTraceName(name: string): boolean {
+  return [
+    "exec",
+    "exec_command",
+    "execute_command",
+    "run_command",
+    "run_shell",
+    "shell",
+    "terminal",
+    "bash",
+    "sh",
+  ].includes(name.toLowerCase().split(".").pop() || name.toLowerCase());
+}
+
+function shellCommandFromArgs(args: string): string {
+  const compactArgs = args.trim();
+  if (!compactArgs) return "";
+  try {
+    const parsed = JSON.parse(compactArgs) as unknown;
+    if (typeof parsed === "string") return parsed;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return "";
+    const record = parsed as Record<string, unknown>;
+    for (const key of ["command", "cmd", "script", "input"]) {
+      const value = record[key];
+      if (typeof value === "string" && value.trim()) return value;
+    }
+  } catch {
+    return compactArgs.replace(/^["']|["']$/g, "");
+  }
+  return "";
+}
+
+function humanizeTraceToolName(name: string): string {
+  const words = name
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[._-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .toLowerCase();
+  return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "tool action";
+}
+
+function traceUrlFromArgs(args: string, fallback: string): URL | null {
+  const candidates: string[] = [];
+  const compactArgs = args.trim();
+  if (compactArgs) {
+    try {
+      collectUrlCandidates(JSON.parse(compactArgs), candidates);
+    } catch {
+      candidates.push(compactArgs.replace(/^["']|["']$/g, ""));
+    }
+  }
+  candidates.push(fallback);
+  for (const candidate of candidates) {
+    const url = parseSafeActivityHttpUrl(candidate);
+    if (url) return url;
+    const embedded = candidate.match(/https?:\/\/[^\s"'<>),]+/i)?.[0];
+    if (embedded) {
+      const embeddedUrl = parseSafeActivityHttpUrl(embedded);
+      if (embeddedUrl) return embeddedUrl;
+    }
+  }
+  return null;
+}
+
+function collectUrlCandidates(value: unknown, candidates: string[]) {
+  if (typeof value === "string") {
+    candidates.push(value);
+    return;
+  }
+  if (!value || typeof value !== "object") return;
+  if (Array.isArray(value)) {
+    for (const item of value.slice(0, 6)) collectUrlCandidates(item, candidates);
+    return;
+  }
+  const record = value as Record<string, unknown>;
+  for (const key of ["url", "uri", "href", "link"]) {
+    if (typeof record[key] === "string") candidates.push(record[key]);
+  }
+}

webui/src/components/thread/activity/web-search-model.ts

@@ -0,0 +1,279 @@
+import { canonicalToolTrace, formatToolCallTrace } from "@/lib/tool-traces";
+import type { ToolProgressEvent } from "@/lib/types";
+
+import { redactActivityText, safeActivityDetail } from "./activity-text";
+import { displayWebHost, formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
+
+export type WebSearchStatus = "running" | "done" | "error";
+
+export interface WebSearchSource {
+  title: string;
+  href: string;
+  host: string;
+  displayUrl: string;
+}
+
+export interface WebSearchRunModel {
+  key: string;
+  query: string;
+  status: WebSearchStatus;
+  sources: WebSearchSource[];
+  error?: string;
+}
+
+interface WebSearchQueryPresentation {
+  query: string;
+  scope?: string;
+}
+
+const WEB_SEARCH_STATUS_RANK: Record<WebSearchStatus, number> = {
+  running: 1,
+  done: 2,
+  error: 3,
+};
+const MAX_VISIBLE_SOURCES = 8;
+
+export function webSearchRunsByTraceLine(
+  events: ToolProgressEvent[],
+): Map<string, WebSearchRunModel> {
+  const runs = new Map<string, WebSearchRunModel>();
+  for (const event of events) {
+    const run = webSearchRunFromEvent(event);
+    const line = run ? formatToolCallTrace(event) : null;
+    if (!run || !line) continue;
+    const key = canonicalToolTrace(line);
+    runs.set(key, mergeWebSearchRun(runs.get(key), run));
+  }
+  return runs;
+}
+
+function webSearchRunFromEvent(event: ToolProgressEvent): WebSearchRunModel | null {
+  const name = compactToolName(toolEventName(event));
+  if (name !== "web_search") return null;
+
+  const args = toolEventArguments(event);
+  const query = stringField(args, ["query", "q", "text"]);
+  const status: WebSearchStatus = event.phase === "error"
+    ? "error"
+    : event.phase === "end"
+      ? "done"
+      : "running";
+
+  return {
+    key: event.call_id ? `call:${event.call_id}` : formatToolCallTrace(event) ?? `web_search:${query}`,
+    query,
+    status,
+    sources: status === "done" ? webSearchSources(event.result) : [],
+    error: status === "error" ? readableError(event.error) : undefined,
+  };
+}
+
+function presentWebSearchQuery(query: string): WebSearchQueryPresentation {
+  const scopes: string[] = [];
+  const safeQuery = redactActivityText(query);
+  const cleanQuery = safeQuery
+    .replace(/(?:^|\s)site:([^\s]+)/gi, (_match, rawSite: string) => {
+      const scope = webSearchScope(rawSite);
+      if (scope && !scopes.includes(scope)) scopes.push(scope);
+      return " ";
+    })
+    .replace(/\s+/g, " ")
+    .trim();
+
+  return {
+    query: cleanQuery || safeQuery.trim(),
+    ...(scopes.length === 1 ? { scope: scopes[0] } : {}),
+  };
+}
+
+export function presentWebSearchAction(
+  query: string,
+  status: WebSearchStatus,
+): string {
+  const presentation = presentWebSearchQuery(query);
+  const verb = status === "error"
+    ? "Could not search"
+    : status === "running"
+      ? "Searching"
+      : "Searched";
+  const target = [presentation.scope, presentation.query].filter(Boolean).join(" · ");
+  return target ? `${verb} ${target}` : verb;
+}
+
+function mergeWebSearchRun(
+  existing: WebSearchRunModel | undefined,
+  incoming: WebSearchRunModel,
+): WebSearchRunModel {
+  if (!existing) return incoming;
+  if (WEB_SEARCH_STATUS_RANK[incoming.status] < WEB_SEARCH_STATUS_RANK[existing.status]) {
+    return existing;
+  }
+  return {
+    ...existing,
+    ...incoming,
+    query: incoming.query || existing.query,
+    sources: incoming.sources.length ? incoming.sources : existing.sources,
+  };
+}
+
+function webSearchSources(result: unknown): WebSearchSource[] {
+  const candidates = structuredCandidates(result);
+  if (typeof result === "string") candidates.push(...textCandidates(result));
+  if (result && typeof result === "object" && !Array.isArray(result)) {
+    const record = result as Record<string, unknown>;
+    for (const key of ["content", "text", "result"]) {
+      if (typeof record[key] === "string") candidates.push(...textCandidates(record[key]));
+    }
+  }
+
+  const seen = new Set<string>();
+  const sources: WebSearchSource[] = [];
+  for (const candidate of candidates) {
+    const url = parseSafeActivityHttpUrl(candidate.url);
+    if (!url || seen.has(url.href)) continue;
+    seen.add(url.href);
+    sources.push({
+      title: cleanTitle(candidate.title) || displayWebHost(url.hostname),
+      href: url.href,
+      host: displayWebHost(url.hostname),
+      displayUrl: formatCompactWebUrl(url),
+    });
+    if (sources.length >= MAX_VISIBLE_SOURCES) break;
+  }
+  return sources;
+}
+
+function structuredCandidates(value: unknown): Array<{ title: string; url: string }> {
+  const items: unknown[] = [];
+  if (Array.isArray(value)) items.push(...value);
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const record = value as Record<string, unknown>;
+    for (const key of ["results", "items", "sources", "data"]) {
+      if (Array.isArray(record[key])) items.push(...record[key]);
+    }
+  }
+
+  return items.flatMap((item) => {
+    if (!item || typeof item !== "object" || Array.isArray(item)) return [];
+    const record = item as Record<string, unknown>;
+    const title = stringField(record, ["title", "name", "label"]);
+    const url = stringField(record, ["url", "href", "link", "uri"]);
+    return url ? [{ title, url }] : [];
+  });
+}
+
+function textCandidates(text: string): Array<{ title: string; url: string }> {
+  const lines = text.split(/\r?\n/).map((line) => line.trim());
+  const candidates: Array<{ title: string; url: string }> = [];
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    if (!line) continue;
+
+    const markdownLink = /^\s*(?:\d+[.)]\s*)?\[([^\]]+)]\((https?:\/\/[^)]+)\)\s*$/.exec(line);
+    if (markdownLink) {
+      candidates.push({ title: markdownLink[1], url: markdownLink[2] });
+      continue;
+    }
+
+    const numberedTitle = /^\d+[.)]\s+(.+)$/.exec(line);
+    if (!numberedTitle) continue;
+
+    const inlineUrl = firstHttpUrl(numberedTitle[1]);
+    if (inlineUrl) {
+      candidates.push({
+        title: numberedTitle[1].replace(inlineUrl, "").replace(/[\s:|\-–—]+$/, ""),
+        url: inlineUrl,
+      });
+      continue;
+    }
+
+    for (let next = index + 1; next < lines.length; next += 1) {
+      if (/^\d+[.)]\s+/.test(lines[next])) break;
+      const url = firstHttpUrl(lines[next]);
+      if (!url) continue;
+      candidates.push({ title: numberedTitle[1], url });
+      break;
+    }
+  }
+
+  return candidates;
+}
+
+function firstHttpUrl(value: string): string {
+  return value.match(/https?:\/\/[^\s<>"']+/i)?.[0]?.replace(/[),.;\]}]+$/, "") ?? "";
+}
+
+function cleanTitle(value: string): string {
+  return redactActivityText(value)
+    .replace(/^#+\s*/, "")
+    .replace(/^\*\*(.*)\*\*$/, "$1")
+    .replace(/^__(.*)__$/, "$1")
+    .trim();
+}
+
+function compactToolName(name: string): string {
+  return name.toLowerCase().split(".").pop() || name.toLowerCase();
+}
+
+function webSearchScope(rawSite: string): string | undefined {
+  const candidate = rawSite.replace(/^https?:\/\//i, "").replace(/^www\./i, "");
+  let host = candidate.split("/")[0]?.toLowerCase();
+  if (!host) return undefined;
+  if (host.startsWith("www.")) host = host.slice(4);
+
+  const knownScope = WEB_SEARCH_SCOPE_NAMES[host];
+  return knownScope ?? displayWebHost(host);
+}
+
+const WEB_SEARCH_SCOPE_NAMES: Record<string, string> = {
+  "anthropic.com": "Anthropic",
+  "crunchbase.com": "Crunchbase",
+  "github.com": "GitHub",
+  "linkedin.com": "LinkedIn",
+  "openai.com": "OpenAI",
+  "reddit.com": "Reddit",
+  "x.com": "X",
+  "youtube.com": "YouTube",
+};
+
+function toolEventName(event: ToolProgressEvent): string {
+  const functionName = (event as { function?: { name?: unknown } }).function?.name;
+  if (typeof functionName === "string") return functionName;
+  return typeof event.name === "string" ? event.name : "";
+}
+
+function toolEventArguments(event: ToolProgressEvent): unknown {
+  const functionArgs = (event as { function?: { arguments?: unknown } }).function?.arguments;
+  const raw = functionArgs ?? event.arguments;
+  if (typeof raw !== "string") return raw ?? {};
+  try {
+    return raw.trim() ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+function stringField(value: unknown, keys: string[]): string {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return "";
+  const record = value as Record<string, unknown>;
+  for (const key of keys) {
+    const field = record[key];
+    if (typeof field === "string" && field.trim()) return field.trim();
+  }
+  return "";
+}
+
+function readableError(error: unknown): string | undefined {
+  if (typeof error === "string" && error.trim()) return safeErrorText(error);
+  if (!error) return undefined;
+  try {
+    return safeErrorText(JSON.stringify(error));
+  } catch {
+    return "Web search failed";
+  }
+}
+
+function safeErrorText(value: string): string {
+  return safeActivityDetail(value, 240);
+}

webui/src/components/thread/activity/web-url.ts

@@ -0,0 +1,72 @@
+export function parsePublicHttpUrl(value: string): URL | null {
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+    if (url.username || url.password) return null;
+    if (isPrivateHostname(url.hostname)) return null;
+    return url;
+  } catch {
+    return null;
+  }
+}
+
+/** Public URL normalized for timeline display, with credentials and request-specific noise removed. */
+export function parseSafeActivityHttpUrl(value: string): URL | null {
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+    if (isPrivateHostname(url.hostname)) return null;
+    url.username = "";
+    url.password = "";
+    url.search = "";
+    url.hash = "";
+    return url;
+  } catch {
+    return null;
+  }
+}
+
+export function displayWebHost(hostname: string): string {
+  return hostname.replace(/^www\./i, "").toLowerCase();
+}
+
+export function formatCompactWebUrl(url: URL): string {
+  const host = displayWebHost(url.hostname);
+  const path = url.pathname && url.pathname !== "/" ? url.pathname.replace(/\/$/, "") : "";
+  return `${host}${path}`;
+}
+
+function isPrivateHostname(hostname: string): boolean {
+  const host = hostname.replace(/^\[|\]$/g, "").toLowerCase();
+  if (
+    !host
+    || host === "localhost"
+    || [".local", ".localhost", ".internal", ".home", ".lan"].some((suffix) => host.endsWith(suffix))
+  ) return true;
+  if (!host.includes(".") && !host.includes(":")) return true;
+
+  const ipv4 = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(host);
+  if (ipv4) {
+    const [, aText, bText] = ipv4;
+    const a = Number(aText);
+    const b = Number(bText);
+    return (
+      a === 0 ||
+      a === 10 ||
+      a === 127 ||
+      (a === 100 && b >= 64 && b <= 127) ||
+      (a === 169 && b === 254) ||
+      (a === 172 && b >= 16 && b <= 31) ||
+      (a === 192 && b === 168)
+    );
+  }
+
+  return (
+    host === "::"
+    || host === "::1"
+    || host.startsWith("::ffff:")
+    || host.startsWith("fc")
+    || host.startsWith("fd")
+    || host.startsWith("fe80:")
+  );
+}

webui/src/globals.css

@@ -2,6 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+@supports (content-visibility: auto) {
+  .apps-catalog-row {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 4.25rem;
+  }
+}
+
 /* Design tokens — HSL form, sourced from shadcn/ui's "neutral" palette. */
 @layer base {
   :root {
@@ -196,7 +203,7 @@
     box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
   }
 
-  /* Markdown body styles, ported from agent-chat-ui's markdown-styles.css. */
+  /* Keep the outer document rhythm clean at message boundaries. */
   .markdown-content > :first-child {
     @apply mt-0;
   }
@@ -211,6 +218,7 @@
     --tw-prose-headings: hsl(var(--foreground));
     --tw-prose-bold: hsl(var(--foreground));
     --tw-prose-lead: hsl(var(--foreground));
+    line-height: var(--cjk-line-height);
   }
 
   .markdown-content .contains-task-list {
@@ -221,6 +229,33 @@
     @apply list-none pl-0;
   }
 
+  /* Show a caret only while the full markdown renderer is still loading. */
+  @keyframes streaming-caret-blink {
+    0%, 45% { opacity: 1; }
+    55%, 100% { opacity: 0; }
+  }
+  .streaming-text-fallback::after {
+    content: "";
+    display: inline-block;
+    width: 1.5px;
+    height: 1em;
+    margin-left: 3px;
+    vertical-align: -0.12em;
+    border-radius: 1px;
+    background: hsl(var(--foreground) / 0.8);
+    animation: streaming-caret-blink 1s step-end infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-sd-animate] {
+      animation: none !important;
+    }
+
+    .streaming-text-fallback::after {
+      animation: none;
+    }
+  }
+
   /* CJK-friendly line-height: prose paragraphs default to 1.625 which is
      tight for Chinese/Japanese/Korean characters. Bump to 1.8 for better
      readability when the browser detects a CJK primary font. */
@@ -294,6 +329,10 @@
       animation: none;
       content: "";
     }
+    .markdown-content-streaming > :last-child::after,
+    .streaming-text-fallback::after {
+      animation: none;
+    }
   }
 
   @keyframes composer-status-strip-enter {
@@ -571,6 +610,13 @@
     container-type: inline-size;
   }
 
+  @supports (content-visibility: auto) {
+    .thread-render-unit {
+      content-visibility: auto;
+      contain-intrinsic-size: auto 12rem;
+    }
+  }
+
   .thread-prompt-rail {
     display: none;
     left: 1.75rem;
@@ -588,3 +634,10 @@
     }
   }
 }
+
+@media (pointer: coarse) {
+  .touch-target {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+  }
+}

webui/src/hooks/useLogoFallback.ts

@@ -47,16 +47,24 @@ export function useLogoFallback(urls: readonly string[] | undefined) {
   const safeUrls = useMemo(() => logoUrlsFromKey(cacheKey), [cacheKey]);
   const [logoIndex, setLogoIndex] = useState(() => firstUsableLogoIndex(safeUrls));
   const logoUrl = logoIndex >= 0 ? safeUrls[logoIndex] : undefined;
+  const [logoLoaded, setLogoLoaded] = useState(
+    () => Boolean(logoUrl && loadedLogoUrls.has(logoUrl)),
+  );
 
   useEffect(() => {
     setLogoIndex(firstUsableLogoIndex(safeUrls));
   }, [cacheKey, safeUrls]);
 
+  useEffect(() => {
+    setLogoLoaded(Boolean(logoUrl && loadedLogoUrls.has(logoUrl)));
+  }, [logoUrl]);
+
   const onLogoLoad = useCallback(() => {
     if (!logoUrl || logoIndex < 0) return;
     loadedLogoUrls.add(logoUrl);
     failedLogoUrls.delete(logoUrl);
     resolvedLogoIndexByKey.set(cacheKey, logoIndex);
+    setLogoLoaded(true);
   }, [cacheKey, logoIndex, logoUrl]);
 
   const onLogoError = useCallback(() => {
@@ -65,10 +73,11 @@ export function useLogoFallback(urls: readonly string[] | undefined) {
     if (resolvedLogoIndexByKey.get(cacheKey) === logoIndex) {
       resolvedLogoIndexByKey.delete(cacheKey);
     }
+    setLogoLoaded(false);
     setLogoIndex(nextLogoIndex(safeUrls, logoIndex));
   }, [cacheKey, logoIndex, logoUrl, safeUrls]);
 
-  return { logoUrl, onLogoLoad, onLogoError };
+  return { logoUrl, logoLoaded, onLogoLoad, onLogoError };
 }
 
 export function __clearLogoFallbackCacheForTests(): void {

webui/src/hooks/useNanobotStream.ts

@@ -42,6 +42,7 @@ type UIMessageTurnFields = Pick<UIMessage, "turnId" | "turnPhase" | "turnSeq">;
 
 const FILE_EDIT_TOOL_NAMES = new Set(["write_file", "edit_file", "apply_patch"]);
 const STREAM_END_IDLE_DELAY_MS = 1000;
+const BACKGROUND_STREAM_FLUSH_INTERVAL_MS = 1_000;
 
 function turnFieldsFromEvent(
   ev: { turn_id?: string; turn_phase?: UITurnPhase; turn_seq?: number },
@@ -478,9 +479,12 @@ export interface SendAttachment {
 export interface SendOptions {
   cliApps?: OutboundCliAppMention[];
   mcpPresets?: OutboundMcpPresetMention[];
+  quotedContext?: string;
   workspaceScope?: WorkspaceScopePayload | null;
   sideChannel?: boolean;
   finalizeActiveTurn?: boolean;
+  /** Append guidance to the running turn without detaching its active answer segment. */
+  continueActiveTurn?: boolean;
 }
 
 function eventExtendsModelActivity(ev: InboundEvent): boolean {
@@ -548,6 +552,7 @@ export function useNanobotStream(
   const activitySegmentCounterRef = useRef(0);
   const pendingStreamEventsRef = useRef<PendingStreamEvent[]>([]);
   const streamFrameRef = useRef<number | null>(null);
+  const streamTimerRef = useRef<number | null>(null);
   const suppressStreamUntilTurnEndRef = useRef(false);
   const sideChannelTurnIdsRef = useRef<Set<string>>(new Set());
   /** Timer that defers ``isStreaming = false`` after ``stream_end``.
@@ -570,6 +575,10 @@ export function useNanobotStream(
       window.cancelAnimationFrame(streamFrameRef.current);
       streamFrameRef.current = null;
     }
+    if (streamTimerRef.current !== null) {
+      window.clearTimeout(streamTimerRef.current);
+      streamTimerRef.current = null;
+    }
     pendingStreamEventsRef.current = [];
   }, []);
 
@@ -734,6 +743,10 @@ export function useNanobotStream(
       window.cancelAnimationFrame(streamFrameRef.current);
       streamFrameRef.current = null;
     }
+    if (streamTimerRef.current !== null) {
+      window.clearTimeout(streamTimerRef.current);
+      streamTimerRef.current = null;
+    }
     const events = pendingStreamEventsRef.current;
     const finalAnswerText = options?.finalAnswerText;
     const turn = options?.turn ?? {};
@@ -748,37 +761,47 @@ export function useNanobotStream(
         const targetIndex =
           resolveActiveAssistantIndex(next, turn)
           ?? findStreamingAssistantIndex(next, closedAssistantStreamIdsRef.current, turn);
-          if (targetIndex !== null) {
-            const target = next[targetIndex];
-            next = replaceMessageAt(next, targetIndex, {
-              ...target,
+        if (targetIndex !== null) {
+          const target = next[targetIndex];
+          next = replaceMessageAt(next, targetIndex, {
+            ...target,
+            content: finalAnswerText,
+            isStreaming: true,
+            ...turn,
+          });
+        } else {
+          const id = crypto.randomUUID();
+          closedAssistantStreamIdsRef.current.add(id);
+          next = [
+            ...next,
+            {
+              id,
+              role: "assistant",
               content: finalAnswerText,
               isStreaming: true,
               ...turn,
-            });
-          } else {
-            const id = crypto.randomUUID();
-            closedAssistantStreamIdsRef.current.add(id);
-            next = [
-              ...next,
-              {
-                id,
-                role: "assistant",
-                content: finalAnswerText,
-                isStreaming: true,
-                ...turn,
-                createdAt: Date.now(),
-              },
-            ];
-          }
+              createdAt: Date.now(),
+            },
+          ];
         }
+      }
       if (options?.closeAnswerSegment) closeActiveAssistantStream();
       return next;
     });
   }, [applyPendingStreamEvents, closeActiveAssistantStream, resolveActiveAssistantIndex]);
 
   const schedulePendingStreamFlush = useCallback(() => {
-    if (streamFrameRef.current !== null) return;
+    if (streamFrameRef.current !== null || streamTimerRef.current !== null) return;
+    if (document.visibilityState === "hidden") {
+      streamTimerRef.current = window.setTimeout(() => {
+        streamTimerRef.current = null;
+        const events = pendingStreamEventsRef.current;
+        if (events.length === 0) return;
+        pendingStreamEventsRef.current = [];
+        setMessages((prev) => applyPendingStreamEvents(prev, events));
+      }, BACKGROUND_STREAM_FLUSH_INTERVAL_MS);
+      return;
+    }
     streamFrameRef.current = window.requestAnimationFrame(() => {
       streamFrameRef.current = null;
       const events = pendingStreamEventsRef.current;
@@ -788,6 +811,16 @@ export function useNanobotStream(
     });
   }, [applyPendingStreamEvents]);
 
+  useEffect(() => {
+    const flushOnReturn = () => {
+      if (document.visibilityState !== "visible") return;
+      if (pendingStreamEventsRef.current.length === 0) return;
+      flushPendingStreamEvents();
+    };
+    document.addEventListener("visibilitychange", flushOnReturn);
+    return () => document.removeEventListener("visibilitychange", flushOnReturn);
+  }, [flushPendingStreamEvents]);
+
   // Reset local state when switching chats. Do not reset on every
   // ``initialMessages`` update: a brand-new chat can receive an empty/404
   // history response after the optimistic first message has already rendered.
@@ -863,6 +896,12 @@ export function useNanobotStream(
           turn,
         });
         if (suppressStreamUntilTurnEndRef.current) return;
+        if (ev.resuming) {
+          cancelStreamEndTimer();
+          setIsStreaming(true);
+          setMessages((prev) => finalizeStreamedTurn(prev, turn));
+          return;
+        }
         scheduleStreamEndTimer(turn);
         return;
       }
@@ -1144,6 +1183,7 @@ export function useNanobotStream(
 
       const sideChannel = options?.sideChannel === true;
       const finalizeActiveTurn = options?.finalizeActiveTurn === true;
+      const continueActiveTurn = options?.continueActiveTurn === true;
       flushPendingStreamEvents();
       if (finalizeActiveTurn) {
         cancelStreamEndTimer();
@@ -1153,16 +1193,21 @@ export function useNanobotStream(
       if (sideChannel) sideChannelTurnIdsRef.current.add(turnId);
       const previews = hasAttachments ? images!.map((i) => i.preview) : undefined;
       setMessages((prev) => {
-        if (!sideChannel || finalizeActiveTurn) {
+        if ((!sideChannel && !continueActiveTurn) || finalizeActiveTurn) {
           buffer.current = null;
           activeAssistantRef.current = null;
           closedAssistantStreamIdsRef.current.clear();
           clearActivitySegment();
           suppressStreamUntilTurnEndRef.current = false;
+        } else if (continueActiveTurn) {
+          // Guidance belongs to the active backend turn. Preserve the answer
+          // cursor so its resuming stream_end can finalize the text already
+          // shown before the new user row, while starting fresh activity after it.
+          clearActivitySegment();
         }
         const base = finalizeActiveTurn ? finalizeStreamedTurn(prev) : prev;
         return [
-          ...(sideChannel ? base : pruneReasoningOnlyPlaceholders(base)),
+          ...(sideChannel || continueActiveTurn ? base : pruneReasoningOnlyPlaceholders(base)),
           {
             id: crypto.randomUUID(),
             role: "user",
@@ -1182,6 +1227,7 @@ export function useNanobotStream(
       const wireOptions = { ...options, turnId };
       delete wireOptions.sideChannel;
       delete wireOptions.finalizeActiveTurn;
+      delete wireOptions.continueActiveTurn;
       client.sendMessage(chatId, content, wireMedia, wireOptions);
     },
     [cancelStreamEndTimer, chatId, clearActivitySegment, client, flushPendingStreamEvents],

webui/src/hooks/usePageVisibility.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+function pageIsVisible(): boolean {
+  return typeof document === "undefined" || document.visibilityState !== "hidden";
+}
+
+/** Keep background tabs quiet while resuming work immediately on return. */
+export function usePageVisibility(): boolean {
+  const [visible, setVisible] = useState(pageIsVisible);
+
+  useEffect(() => {
+    const update = () => setVisible(pageIsVisible());
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+
+  return visible;
+}

webui/src/hooks/useSessionAutomationJobs.ts

@@ -1,18 +1,20 @@
 import { useEffect, useState } from "react";
 
+import { usePageVisibility } from "@/hooks/usePageVisibility";
 import { fetchSessionAutomations } from "@/lib/api";
 import type { SessionAutomationJob } from "@/lib/types";
 
 const AUTOMATIONS_REFRESH_MS = 3000;
 
 export function useSessionAutomationJobs(open: boolean, token: string, sessionKey: string) {
+  const pageVisible = usePageVisibility();
   const [jobs, setJobs] = useState<SessionAutomationJob[]>([]);
   const [loading, setLoading] = useState(false);
   const [loadFailed, setLoadFailed] = useState(false);
   const [now, setNow] = useState(() => Date.now());
 
   useEffect(() => {
-    if (!open) return;
+    if (!open || !pageVisible) return;
     let cancelled = false;
     let loadedOnce = false;
 
@@ -37,25 +39,21 @@ export function useSessionAutomationJobs(open: boolean, token: string, sessionKe
 
     void refresh(true);
     const refreshId = window.setInterval(() => void refresh(false), AUTOMATIONS_REFRESH_MS);
-    const refreshOnFocus = () => {
-      if (document.visibilityState !== "hidden") void refresh(false);
-    };
+    const refreshOnFocus = () => void refresh(false);
     window.addEventListener("focus", refreshOnFocus);
-    document.addEventListener("visibilitychange", refreshOnFocus);
     return () => {
       cancelled = true;
       window.clearInterval(refreshId);
       window.removeEventListener("focus", refreshOnFocus);
-      document.removeEventListener("visibilitychange", refreshOnFocus);
     };
-  }, [open, sessionKey, token]);
+  }, [open, pageVisible, sessionKey, token]);
 
   useEffect(() => {
-    if (!open) return;
+    if (!open || !pageVisible) return;
     setNow(Date.now());
     const tickId = window.setInterval(() => setNow(Date.now()), 1000);
     return () => window.clearInterval(tickId);
-  }, [open]);
+  }, [open, pageVisible]);
 
   return { jobs, loading, loadFailed, now };
 }

webui/src/i18n/locales/en/common.json

@@ -198,7 +198,7 @@
       "imageGeneration": "Expose generate_image in chats when a configured image provider is available.",
       "imageProvider": "Choose the registry provider used by generate_image.",
       "imageProviderStatus": "Image generation reuses provider credentials from Providers.",
-      "imageModel": "Model name sent to the selected image provider.",
+      "imageModel": "Choose a model supported by the selected image provider.",
       "defaultAspectRatio": "Used when the prompt does not choose an aspect ratio.",
       "defaultImageSize": "Size hint sent to providers that support it.",
       "maxImagesPerTurn": "Upper bound for one generate_image request.",
@@ -938,6 +938,8 @@
       "goalStateCloseAria": "Close goal",
       "send": "Send message",
       "stop": "Stop response",
+      "quotedContext": "Quoted context",
+      "removeQuotedContext": "Remove quoted context",
       "modelNotConfigured": "Model not configured",
       "configureModel": "Configure model",
       "queued": {
@@ -1127,9 +1129,9 @@
     "activityWorkingFor": "Working for {{duration}}",
     "activityWorked": "Worked",
     "activityWorkedFor": "Worked for {{duration}}",
-    "cliActivityRunningOne": "Using @{{name}}",
-    "cliActivityRanOne": "Used @{{name}}",
-    "cliActivityFailedOne": "Failed @{{name}}",
+    "cliActivityRunningOne": "Using {{name}}",
+    "cliActivityRanOne": "Used {{name}}",
+    "cliActivityFailedOne": "{{name}} failed",
     "cliActivityRunningMany": "Using {{count}} CLI apps",
     "cliActivityRanMany": "Used {{count}} CLI apps",
     "cliActivityFailedMany": "{{count}} CLI apps failed",
@@ -1139,6 +1141,7 @@
     "imageAttachment": "Image attachment",
     "automationSourceFallback": "Automation",
     "automationTriggered": "Triggered automatically",
+    "askAboutSelection": "Ask about this",
     "forkFromHere": "Fork",
     "copyReply": "Copy",
     "copiedReply": "Copied",

webui/src/i18n/locales/es/common.json

@@ -925,6 +925,8 @@
       "goalStateCloseAria": "Cerrar objetivo",
       "send": "Enviar mensaje",
       "stop": "Detener respuesta",
+      "quotedContext": "Contexto citado",
+      "removeQuotedContext": "Quitar contexto citado",
       "modelNotConfigured": "Modelo no configurado",
       "configureModel": "Configurar modelo",
       "queued": {
@@ -1109,6 +1111,7 @@
     "agentActivityLiveSummary": "En curso… · {{reasoning}} pasos · {{tools}} llamadas a herramientas",
     "agentActivityLiveToolsOnly": "En curso… · {{tools}} llamadas a herramientas",
     "imageAttachment": "Imagen adjunta",
+    "askAboutSelection": "Preguntar sobre esto",
     "forkFromHere": "Bifurcar",
     "copyReply": "Copiar",
     "copiedReply": "Copiado",
@@ -1127,9 +1130,9 @@
     "activityWorkingFor": "Trabajando durante {{duration}}",
     "activityWorked": "Trabajo completado",
     "activityWorkedFor": "Trabajó durante {{duration}}",
-    "cliActivityRunningOne": "Usando @{{name}}",
-    "cliActivityRanOne": "Usó @{{name}}",
-    "cliActivityFailedOne": "Falló @{{name}}",
+    "cliActivityRunningOne": "Usando {{name}}",
+    "cliActivityRanOne": "Usó {{name}}",
+    "cliActivityFailedOne": "Falló {{name}}",
     "cliActivityRunningMany": "Usando {{count}} apps CLI",
     "cliActivityRanMany": "Usó {{count}} apps CLI",
     "cliActivityFailedMany": "Fallaron {{count}} apps CLI",

webui/src/i18n/locales/fr/common.json

@@ -924,6 +924,8 @@
       "goalStateCloseAria": "Fermer l’objectif",
       "send": "Envoyer le message",
       "stop": "Arrêter la réponse",
+      "quotedContext": "Contexte cité",
+      "removeQuotedContext": "Supprimer le contexte cité",
       "modelNotConfigured": "Modèle non configuré",
       "configureModel": "Configurer le modèle",
       "queued": {
@@ -1108,6 +1110,7 @@
     "agentActivityLiveSummary": "En cours… · {{reasoning}} étapes · {{tools}} appels d’outils",
     "agentActivityLiveToolsOnly": "En cours… · {{tools}} appels d’outils",
     "imageAttachment": "Pièce jointe image",
+    "askAboutSelection": "Poser une question à ce sujet",
     "forkFromHere": "Bifurquer",
     "copyReply": "Copier",
     "copiedReply": "Copié",
@@ -1126,9 +1129,9 @@
     "activityWorkingFor": "Travail en cours depuis {{duration}}",
     "activityWorked": "Travail terminé",
     "activityWorkedFor": "Travail terminé en {{duration}}",
-    "cliActivityRunningOne": "Utilisation de @{{name}}",
-    "cliActivityRanOne": "@{{name}} utilisé",
-    "cliActivityFailedOne": "Échec de @{{name}}",
+    "cliActivityRunningOne": "Utilisation de {{name}}",
+    "cliActivityRanOne": "{{name}} utilisé",
+    "cliActivityFailedOne": "Échec de {{name}}",
     "cliActivityRunningMany": "Utilisation de {{count}} apps CLI",
     "cliActivityRanMany": "{{count}} apps CLI utilisées",
     "cliActivityFailedMany": "Échec de {{count}} apps CLI",

webui/src/i18n/locales/id/common.json

@@ -924,6 +924,8 @@
       "goalStateCloseAria": "Tutup tujuan",
       "send": "Kirim pesan",
       "stop": "Hentikan respons",
+      "quotedContext": "Konteks kutipan",
+      "removeQuotedContext": "Hapus konteks kutipan",
       "modelNotConfigured": "Model belum dikonfigurasi",
       "configureModel": "Konfigurasi model",
       "queued": {
@@ -1108,6 +1110,7 @@
     "agentActivityLiveSummary": "Berjalan… · {{reasoning}} langkah · {{tools}} panggilan alat",
     "agentActivityLiveToolsOnly": "Berjalan… · {{tools}} panggilan alat",
     "imageAttachment": "Lampiran gambar",
+    "askAboutSelection": "Tanyakan tentang ini",
     "forkFromHere": "Fork",
     "copyReply": "Salin",
     "copiedReply": "Disalin",
@@ -1126,9 +1129,9 @@
     "activityWorkingFor": "Memproses selama {{duration}}",
     "activityWorked": "Selesai memproses",
     "activityWorkedFor": "Diproses selama {{duration}}",
-    "cliActivityRunningOne": "Menggunakan @{{name}}",
-    "cliActivityRanOne": "Menggunakan @{{name}} selesai",
-    "cliActivityFailedOne": "@{{name}} gagal",
+    "cliActivityRunningOne": "Menggunakan {{name}}",
+    "cliActivityRanOne": "Menggunakan {{name}} selesai",
+    "cliActivityFailedOne": "{{name}} gagal",
     "cliActivityRunningMany": "Menggunakan {{count}} aplikasi CLI",
     "cliActivityRanMany": "{{count}} aplikasi CLI digunakan",
     "cliActivityFailedMany": "{{count}} aplikasi CLI gagal",

webui/src/i18n/locales/ja/common.json

@@ -924,6 +924,8 @@
       "goalStateCloseAria": "目標を閉じる",
       "send": "メッセージを送信",
       "stop": "応答を停止",
+      "quotedContext": "引用したコンテキスト",
+      "removeQuotedContext": "引用したコンテキストを削除",
       "modelNotConfigured": "モデルが未設定です",
       "configureModel": "モデルを設定",
       "queued": {
@@ -1108,6 +1110,7 @@
     "agentActivityLiveSummary": "実行中… · {{reasoning}} ステップ · ツール呼び出し {{tools}} 回",
     "agentActivityLiveToolsOnly": "実行中… · ツール呼び出し {{tools}} 回",
     "imageAttachment": "画像の添付",
+    "askAboutSelection": "この内容について質問",
     "forkFromHere": "分岐",
     "copyReply": "コピー",
     "copiedReply": "コピー済み",
@@ -1126,9 +1129,9 @@
     "activityWorkingFor": "{{duration}}作業中",
     "activityWorked": "作業しました",
     "activityWorkedFor": "{{duration}}作業しました",
-    "cliActivityRunningOne": "@{{name}} を使用中",
-    "cliActivityRanOne": "@{{name}} を使用しました",
-    "cliActivityFailedOne": "@{{name}} が失敗しました",
+    "cliActivityRunningOne": "{{name}} を使用中",
+    "cliActivityRanOne": "{{name}} を使用しました",
+    "cliActivityFailedOne": "{{name}} が失敗しました",
     "cliActivityRunningMany": "{{count}} 個の CLI アプリを使用中",
     "cliActivityRanMany": "{{count}} 個の CLI アプリを使用しました",
     "cliActivityFailedMany": "{{count}} 個の CLI アプリが失敗しました",

webui/src/i18n/locales/ko/common.json

@@ -924,6 +924,8 @@
       "goalStateCloseAria": "목표 닫기",
       "send": "메시지 보내기",
       "stop": "응답 중지",
+      "quotedContext": "인용한 문맥",
+      "removeQuotedContext": "인용한 문맥 제거",
       "modelNotConfigured": "모델이 설정되지 않음",
       "configureModel": "모델 설정",
       "queued": {
@@ -1108,6 +1110,7 @@
     "agentActivityLiveSummary": "진행 중… · {{reasoning}}단계 · 도구 호출 {{tools}}회",
     "agentActivityLiveToolsOnly": "진행 중… · 도구 호출 {{tools}}회",
     "imageAttachment": "이미지 첨부",
+    "askAboutSelection": "이 내용에 대해 질문하기",
     "forkFromHere": "분기",
     "copyReply": "복사",
     "copiedReply": "복사됨",
@@ -1126,9 +1129,9 @@
     "activityWorkingFor": "{{duration}} 동안 작업 중",
     "activityWorked": "작업함",
     "activityWorkedFor": "{{duration}} 동안 작업함",
-    "cliActivityRunningOne": "@{{name}} 사용 중",
-    "cliActivityRanOne": "@{{name}} 사용함",
-    "cliActivityFailedOne": "@{{name}} 실패",
+    "cliActivityRunningOne": "{{name}} 사용 중",
+    "cliActivityRanOne": "{{name}} 사용함",
+    "cliActivityFailedOne": "{{name}} 실패",
     "cliActivityRunningMany": "CLI 앱 {{count}}개 사용 중",
     "cliActivityRanMany": "CLI 앱 {{count}}개 사용함",
     "cliActivityFailedMany": "CLI 앱 {{count}}개 실패",

webui/src/i18n/locales/pt-BR/common.json

@@ -938,6 +938,8 @@
       "goalStateCloseAria": "Fechar objetivo",
       "send": "Enviar mensagem",
       "stop": "Parar resposta",
+      "quotedContext": "Contexto citado",
+      "removeQuotedContext": "Remover contexto citado",
       "modelNotConfigured": "Modelo não configurado",
       "configureModel": "Configurar modelo",
       "queued": {
@@ -1127,9 +1129,9 @@
     "activityWorkingFor": "Trabalhando por {{duration}}",
     "activityWorked": "Trabalhou",
     "activityWorkedFor": "Trabalhou por {{duration}}",
-    "cliActivityRunningOne": "Usando @{{name}}",
-    "cliActivityRanOne": "Usou @{{name}}",
-    "cliActivityFailedOne": "Falhou em @{{name}}",
+    "cliActivityRunningOne": "Usando {{name}}",
+    "cliActivityRanOne": "Usou {{name}}",
+    "cliActivityFailedOne": "Falhou em {{name}}",
     "cliActivityRunningMany": "Usando {{count}} apps CLI",
     "cliActivityRanMany": "Usou {{count}} apps CLI",
     "cliActivityFailedMany": "{{count}} apps CLI falharam",
@@ -1139,6 +1141,7 @@
     "imageAttachment": "Anexo de imagem",
     "automationSourceFallback": "Automação",
     "automationTriggered": "Acionada automaticamente",
+    "askAboutSelection": "Perguntar sobre isto",
     "forkFromHere": "Fazer fork",
     "copyReply": "Copiar",
     "copiedReply": "Copiado",

webui/src/i18n/locales/vi/common.json

@@ -924,6 +924,8 @@
       "goalStateCloseAria": "Đóng mục tiêu",
       "send": "Gửi tin nhắn",
       "stop": "Dừng phản hồi",
+      "quotedContext": "Ngữ cảnh được trích dẫn",
+      "removeQuotedContext": "Xóa ngữ cảnh được trích dẫn",
       "modelNotConfigured": "Chưa cấu hình mô hình",
       "configureModel": "Cấu hình mô hình",
       "queued": {
@@ -1108,6 +1110,7 @@
     "agentActivityLiveSummary": "Đang chạy… · {{reasoning}} bước · {{tools}} lần gọi công cụ",
     "agentActivityLiveToolsOnly": "Đang chạy… · {{tools}} lần gọi công cụ",
     "imageAttachment": "Tệp hình ảnh đính kèm",
+    "askAboutSelection": "Hỏi về nội dung này",
     "forkFromHere": "Tách nhánh",
     "copyReply": "Sao chép",
     "copiedReply": "Đã sao chép",
@@ -1126,9 +1129,9 @@
     "activityWorkingFor": "Đang xử lý trong {{duration}}",
     "activityWorked": "Đã xử lý",
     "activityWorkedFor": "Đã xử lý trong {{duration}}",
-    "cliActivityRunningOne": "Đang dùng @{{name}}",
-    "cliActivityRanOne": "Đã dùng @{{name}}",
-    "cliActivityFailedOne": "@{{name}} thất bại",
+    "cliActivityRunningOne": "Đang dùng {{name}}",
+    "cliActivityRanOne": "Đã dùng {{name}}",
+    "cliActivityFailedOne": "{{name}} thất bại",
     "cliActivityRunningMany": "Đang dùng {{count}} ứng dụng CLI",
     "cliActivityRanMany": "Đã dùng {{count}} ứng dụng CLI",
     "cliActivityFailedMany": "{{count}} ứng dụng CLI thất bại",

webui/src/i18n/locales/zh-CN/common.json

@@ -198,7 +198,7 @@
       "imageGeneration": "配置图片提供商后，在聊天中开放 generate_image。",
       "imageProvider": "选择 generate_image 使用的注册提供商。",
       "imageProviderStatus": "图片生成会复用「提供商」里的凭据。",
-      "imageModel": "发送给所选图片提供商的模型名称。",
+      "imageModel": "选择当前图片提供商支持的模型。",
       "defaultAspectRatio": "当提示词没有指定比例时使用。",
       "defaultImageSize": "发送给支持此选项的提供商的尺寸提示。",
       "maxImagesPerTurn": "单次 generate_image 请求可生成的图片上限。",
@@ -937,6 +937,8 @@
       "goalStateSheetTitle": "目标",
       "send": "发送消息",
       "stop": "停止响应",
+      "quotedContext": "引用内容",
+      "removeQuotedContext": "移除引用内容",
       "modelNotConfigured": "模型未配置",
       "configureModel": "配置模型",
       "queued": {
@@ -1127,9 +1129,9 @@
     "activityWorkingFor": "处理中 {{duration}}",
     "activityWorked": "已处理",
     "activityWorkedFor": "处理了 {{duration}}",
-    "cliActivityRunningOne": "正在使用 @{{name}}",
-    "cliActivityRanOne": "已使用 @{{name}}",
-    "cliActivityFailedOne": "使用 @{{name}} 失败",
+    "cliActivityRunningOne": "正在使用 {{name}}",
+    "cliActivityRanOne": "已使用 {{name}}",
+    "cliActivityFailedOne": "使用 {{name}} 失败",
     "cliActivityRunningMany": "正在使用 {{count}} 个 CLI 应用",
     "cliActivityRanMany": "已使用 {{count}} 个 CLI 应用",
     "cliActivityFailedMany": "{{count}} 个 CLI 应用失败",
@@ -1139,6 +1141,7 @@
     "imageAttachment": "图片附件",
     "automationSourceFallback": "自动化",
     "automationTriggered": "自动触发",
+    "askAboutSelection": "继续提问",
     "forkFromHere": "分叉",
     "copyReply": "复制",
     "copiedReply": "已复制",

webui/src/i18n/locales/zh-TW/common.json

@@ -924,6 +924,8 @@
       "goalStateCloseAria": "關閉目標",
       "send": "送出訊息",
       "stop": "停止回覆",
+      "quotedContext": "引用內容",
+      "removeQuotedContext": "移除引用內容",
       "modelNotConfigured": "尚未設定模型",
       "configureModel": "設定模型",
       "queued": {
@@ -1136,7 +1138,8 @@
     "cliRunRan": "已使用",
     "cliRunFailed": "失敗",
     "automationSourceFallback": "自動化",
-    "automationTriggered": "已自動觸發"
+    "automationTriggered": "已自動觸發",
+    "askAboutSelection": "繼續提問"
   },
   "lightbox": {
     "title": "圖片預覽",

webui/src/lib/activity-timeline.ts

@@ -1,44 +1,9 @@
-import { toMediaAttachment } from "@/lib/media";
-import type { ToolProgressEvent, UIMediaAttachment, UIMessage } from "@/lib/types";
-
-export type ActivityItemType = "reasoning" | "tool" | "cli" | "mcp" | "file_edit" | "media";
-export type ActivityStepStatus = "pending" | "running" | "done" | "error";
-export type ActivityStepSource = "reasoning" | "tool" | "web" | "browser" | "shell" | "mcp" | "file" | "media";
-
-export interface ActivityItem {
-  type: ActivityItemType;
-  message: UIMessage;
-}
-
-export interface ActivityEvidence {
-  id: string;
-  attachment: UIMediaAttachment;
-  caption?: string;
-  source: ActivityStepSource;
-}
-
-export interface ActivityStepItem {
-  id: string;
-  label: string;
-  detail?: string;
-  status: ActivityStepStatus;
-  source: ActivityStepSource;
-  preview?: ActivityEvidence[];
-  error?: string;
-}
-
-export interface ActivityGroup {
-  id: string;
-  title: string;
-  source: ActivityStepSource;
-  steps: ActivityStepItem[];
-}
+import type { UIMessage } from "@/lib/types";
 
 export type TurnUnit =
   | {
       type: "activity";
       messages: UIMessage[];
-      items: ActivityItem[];
       turnLatencyMs?: number;
       startedAtMs?: number;
     }
@@ -243,7 +208,6 @@ function pushActivityUnits(
     units.push({
       type: "activity",
       messages: runMessages,
-      items: runMessages.flatMap(activityItemsForMessage),
       turnLatencyMs: activityTurnLatencyMs(runMessages, visibleMessages),
       startedAtMs,
     });
@@ -306,35 +270,6 @@ function stripInlineReasoning(message: UIMessage): UIMessage {
   return next;
 }
 
-function activityItemsForMessage(message: UIMessage): ActivityItem[] {
-  if (isReasoningOnlyAssistant(message)) {
-    return [{ type: "reasoning", message }];
-  }
-  if (message.kind !== "trace") return [];
-
-  const items: ActivityItem[] = [];
-  if (message.fileEdits?.length) {
-    items.push({ type: "file_edit", message });
-  }
-  for (const event of message.toolEvents ?? []) {
-    const name = String(event.name ?? "").toLowerCase();
-    if (name === "run_cli_app") {
-      items.push({ type: "cli", message });
-    } else if (name === "mcp") {
-      items.push({ type: "mcp", message });
-    } else {
-      items.push({ type: "tool", message });
-    }
-  }
-  if (items.length === 0 && (message.traces?.length || message.content.trim())) {
-    items.push({ type: "tool", message });
-  }
-  if (message.media?.length) {
-    items.push({ type: "media", message });
-  }
-  return items;
-}
-
 function activityTurnLatencyMs(activityMessages: UIMessage[], visibleMessages: UIMessage[]): number | undefined {
   for (let i = visibleMessages.length - 1; i >= 0; i -= 1) {
     const latency = visibleMessages[i].latencyMs;
@@ -350,96 +285,3 @@ function activityTurnLatencyMs(activityMessages: UIMessage[], visibleMessages: U
 function isValidLatency(value: unknown): value is number {
   return typeof value === "number" && Number.isFinite(value) && value >= 0;
 }
-
-export function activityEvidenceFromToolEvent(event: ToolProgressEvent): ActivityEvidence[] {
-  const source = activitySourceFromToolName(toolEventName(event));
-  const evidence: ActivityEvidence[] = [];
-  const extras = [
-    ...unknownList((event as { embeds?: unknown }).embeds),
-    ...unknownList((event as { files?: unknown }).files),
-  ];
-  extras.forEach((value, index) => {
-    const attachment = mediaAttachmentFromUnknown(value);
-    if (!attachment) return;
-    evidence.push({
-      id: `${event.call_id || toolEventName(event) || "tool"}:${index}:${attachment.url || attachment.name || attachment.kind}`,
-      attachment,
-      caption: attachment.name,
-      source,
-    });
-  });
-  return evidence;
-}
-
-export function activityEvidenceFromMessageMedia(message: UIMessage): ActivityEvidence[] {
-  return (message.media ?? []).map((attachment, index) => ({
-    id: `${message.id}:media:${index}:${attachment.url || attachment.name || attachment.kind}`,
-    attachment,
-    caption: attachment.name,
-    source: "media",
-  }));
-}
-
-function unknownList(value: unknown): unknown[] {
-  return Array.isArray(value) ? value : [];
-}
-
-function toolEventName(event: ToolProgressEvent): string {
-  return typeof (event as { function?: { name?: unknown } }).function?.name === "string"
-    ? String((event as { function?: { name?: unknown } }).function?.name)
-    : typeof event.name === "string"
-      ? event.name
-      : "";
-}
-
-function activitySourceFromToolName(name: string): ActivityStepSource {
-  const compact = name.toLowerCase();
-  if (compact.includes("browser") || compact.includes("screenshot")) return "browser";
-  if (compact.includes("web") || compact.includes("search") || compact.includes("fetch") || compact.includes("read")) return "web";
-  if (compact.includes("exec") || compact.includes("shell") || compact.includes("cli")) return "shell";
-  if (compact.startsWith("mcp_") || compact === "mcp") return "mcp";
-  if (compact.includes("file") || compact.includes("patch")) return "file";
-  if (compact.includes("image") || compact.includes("video") || compact.includes("media")) return "media";
-  return "tool";
-}
-
-function mediaAttachmentFromUnknown(value: unknown): UIMediaAttachment | null {
-  if (typeof value === "string") {
-    const text = value.trim();
-    if (!text) return null;
-    return toMediaAttachment({ url: looksLikeUrl(text) ? text : undefined, name: baseName(text) });
-  }
-  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
-  const record = value as Record<string, unknown>;
-  const url = stringField(record, ["url", "href", "src", "uri", "signed_url", "thumbnail_url"]);
-  const path = stringField(record, ["path", "absolute_path", "file", "filename"]);
-  const name = stringField(record, ["name", "filename", "title", "label"]) ?? baseName(url ?? path ?? "");
-  const kind = mediaKindFromRecord(record, url, name);
-  return toMediaAttachment({ url, name, kind });
-}
-
-function stringField(record: Record<string, unknown>, keys: string[]): string | undefined {
-  for (const key of keys) {
-    const value = record[key];
-    if (typeof value === "string" && value.trim()) return value.trim();
-  }
-  return undefined;
-}
-
-function mediaKindFromRecord(record: Record<string, unknown>, url?: string, name?: string): UIMediaAttachment["kind"] | undefined {
-  const raw = stringField(record, ["kind", "type", "mime", "mime_type", "content_type"])?.toLowerCase() ?? "";
-  if (raw.includes("image") || raw.includes("screenshot")) return "image";
-  if (raw.includes("video") || raw.includes("mp4") || raw.includes("quicktime")) return "video";
-  if (raw.includes("file") || raw.includes("document")) return "file";
-  return toMediaAttachment({ url, name }).kind;
-}
-
-function looksLikeUrl(value: string): boolean {
-  return /^(https?:|data:|\/api\/|blob:)/i.test(value);
-}
-
-function baseName(value: string): string | undefined {
-  const clean = value.split(/[?#]/, 1)[0] ?? "";
-  const last = clean.split(/[\\/]/).filter(Boolean).pop();
-  return last || undefined;
-}

webui/src/lib/nanobot-client.ts

@@ -386,6 +386,7 @@ export class NanobotClient {
     options?: {
       cliApps?: OutboundCliAppMention[];
       mcpPresets?: OutboundMcpPresetMention[];
+      quotedContext?: string;
       workspaceScope?: WorkspaceScopePayload | null;
       turnId?: string;
     },
@@ -398,6 +399,7 @@ export class NanobotClient {
       ...(media && media.length > 0 ? { media } : {}),
       ...(options?.cliApps?.length ? { cli_apps: options.cliApps } : {}),
       ...(options?.mcpPresets?.length ? { mcp_presets: options.mcpPresets } : {}),
+      ...(options?.quotedContext?.trim() ? { quoted_context: options.quotedContext.trim() } : {}),
       ...(options?.workspaceScope ? { workspace_scope: options.workspaceScope } : {}),
       ...(options?.turnId ? { turn_id: options.turnId } : {}),
       webui: true,

webui/src/lib/provider-brand.ts

@@ -17,6 +17,10 @@ function googleFaviconUrl(domain: string): string {
   return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=64`;
 }
 
+function faviconImUrl(domain: string): string {
+  return `https://favicon.im/${encodeURIComponent(domain)}?larger=true`;
+}
+
 export function faviconUrls(domain: string): string[] {
   const faviconDomain = faviconDomainFromValue(domain);
   return [
@@ -26,6 +30,22 @@ export function faviconUrls(domain: string): string[] {
   ];
 }
 
+/**
+ * Cross-origin page favicons commonly opt into same-origin resource policy.
+ * Prefer image proxies for arbitrary links while retaining the official icon
+ * as a final fallback. Explicit first-party brand assets remain first when a
+ * provider supplies them.
+ */
+export function browserSafeFaviconUrls(domain: string): string[] {
+  const faviconDomain = faviconDomainFromValue(domain);
+  return [
+    faviconImUrl(faviconDomain),
+    googleFaviconUrl(domain),
+    duckDuckGoFaviconUrl(faviconDomain),
+    officialFaviconUrl(faviconDomain),
+  ];
+}
+
 function brand(
   domain: string,
   color: string,
@@ -33,7 +53,7 @@ function brand(
   logoOverrides: string[] = [],
 ): ProviderBrand {
   const logoUrls = [...logoOverrides];
-  faviconUrls(domain).forEach((url) => addUniqueLogoUrl(logoUrls, url));
+  browserSafeFaviconUrls(domain).forEach((url) => addUniqueLogoUrl(logoUrls, url));
   return {
     logoUrl: logoUrls[0],
     logoUrls,
@@ -60,12 +80,27 @@ function domainFromLogoUrl(url: string): string | null {
       const match = parsed.pathname.match(/^\/ip3\/(.+)\.ico$/);
       return match ? decodeURIComponent(match[1]) : null;
     }
+    if (host === "favicon.im") {
+      return decodeURIComponent(parsed.pathname.replace(/^\//, "")) || null;
+    }
     return host.replace(/^www\./, "");
   } catch {
     return null;
   }
 }
 
+/**
+ * A repository favicon identifies the hosting service, not the app itself.
+ * Apps backed by GitHub repositories should keep their distinct initials
+ * instead of appearing to share one GitHub identity.
+ */
+export function isGenericRepositoryLogoUrl(logoUrl: string | null | undefined): boolean {
+  const value = logoUrl?.trim();
+  if (!value) return false;
+  const domain = domainFromLogoUrl(value)?.toLowerCase();
+  return domain === "github.com" || domain?.startsWith("github.com/") === true;
+}
+
 function faviconDomainFromValue(value: string): string {
   const host = value.split("/")[0]?.trim();
   return host || value;

webui/src/lib/tool-traces.ts

@@ -20,6 +20,19 @@ export function formatToolCallTrace(call: unknown): string | null {
   return `${name}()`;
 }
 
+export function canonicalToolTrace(line: string): string {
+  const trimmed = line.trim();
+  const match = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(trimmed);
+  if (!match) return trimmed;
+  const args = match[2].trim();
+  if (!args) return `${match[1]}()`;
+  try {
+    return `${match[1]}(${JSON.stringify(JSON.parse(args))})`;
+  } catch {
+    return trimmed;
+  }
+}
+
 const VALID_PHASES = new Set(["start", "end", "error"]);
 const PHASE_RANK: Record<string, number> = { start: 1, end: 2, error: 3 };
 
@@ -91,12 +104,13 @@ export function mergeUniqueToolTraceLines(
   previousTraces: string[],
   lines: string[],
 ): { traces: string[]; added: boolean } {
-  const seen = new Set(previousTraces);
+  const seen = new Set(previousTraces.map(canonicalToolTrace));
   const traces = [...previousTraces];
   let added = false;
   for (const line of lines) {
-    if (seen.has(line)) continue;
-    seen.add(line);
+    const key = canonicalToolTrace(line);
+    if (seen.has(key)) continue;
+    seen.add(key);
     traces.push(line);
     added = true;
   }

webui/src/lib/types.ts

@@ -1044,6 +1044,8 @@ export type InboundEvent =
       chat_id: string;
       stream_id?: string;
       text?: string;
+      /** This answer segment ended, but the active agent turn will continue. */
+      resuming?: boolean;
     } & InboundTurnMetadata)
   | ({
       event: "reasoning_delta";
@@ -1171,6 +1173,7 @@ export type Outbound =
       media?: OutboundMedia[];
       cli_apps?: OutboundCliAppMention[];
       mcp_presets?: OutboundMcpPresetMention[];
+      quoted_context?: string;
       workspace_scope?: WorkspaceScopePayload;
       turn_id?: string;
       /** Marks messages sent by the embedded WebUI, without changing the

webui/src/tests/activity-message-model.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+
+import { coalesceActivityMessages } from "@/components/thread/activity/activity-message-model";
+import type { UIMessage } from "@/lib/types";
+
+const trace = 'web_search({"query":"same query"})';
+
+function progressMessage(id: string, phase: "start" | "end" | "error"): UIMessage {
+  return {
+    id,
+    role: "tool",
+    kind: "trace",
+    content: trace,
+    traces: [trace],
+    toolEvents: [{ phase, name: "web_search", arguments: { query: "same query" } }],
+    createdAt: 1,
+  };
+}
+
+describe("activity message coalescing", () => {
+  it("folds persisted start and terminal progress into one activity", () => {
+    const result = coalesceActivityMessages([
+      progressMessage("start", "start"),
+      progressMessage("end", "end"),
+    ]);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].toolEvents?.[0]?.phase).toBe("end");
+  });
+
+  it("keeps repeated completed calls as separate activities", () => {
+    const result = coalesceActivityMessages([
+      progressMessage("first", "end"),
+      progressMessage("second", "end"),
+    ]);
+
+    expect(result).toHaveLength(2);
+  });
+});

webui/src/tests/agent-activity-cluster.test.tsx

@@ -340,7 +340,7 @@ describe("AgentActivityCluster", () => {
         vi.advanceTimersByTime(901);
       });
       expect(screen.queryByTestId("agent-activity-scroll")).not.toBeInTheDocument();
-      expect(screen.getByRole("button", { name: /1 steps/i })).toHaveAttribute(
+      expect(screen.getByRole("button", { name: "Thought" })).toHaveAttribute(
         "aria-expanded",
         "false",
       );
@@ -401,7 +401,7 @@ describe("AgentActivityCluster", () => {
     expect(screen.queryByText("Thought for 0s")).not.toBeInTheDocument();
   });
 
-  it("renders file edit totals and a compact expanded file list", async () => {
+  it("renders file edits as one-line activity rows", async () => {
     const restoreMotion = installReducedMotion();
     try {
       render(
@@ -430,33 +430,25 @@ describe("AgentActivityCluster", () => {
         />,
       );
 
-      expect(screen.getByRole("button", { name: /edited app\.tsx/i })).toBeInTheDocument();
-      expect(screen.getByTestId("activity-header-file-reference")).toHaveTextContent("app.tsx");
-      expect(screen.getByTestId("activity-header-file-reference")).toHaveAttribute(
-        "aria-label",
-        "/Users/renxubin/project/src/app.tsx",
-      );
-      fireEvent.click(screen.getByRole("button", { name: /edited app\.tsx/i }));
-
       expect(screen.queryByText("Edited files")).not.toBeInTheDocument();
       const fileRef = screen.getByTestId("activity-file-reference");
       expect(fileRef).toHaveTextContent("src/app.tsx");
-      expect(fileRef).toHaveAttribute("aria-label", "/Users/renxubin/project/src/app.tsx");
+      expect(fileRef).toHaveAttribute("aria-label", "src/app.tsx");
+      expect(screen.queryByTestId("activity-header-file-reference")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
       for (const diffPair of screen.getAllByTestId("activity-diff-pair")) {
         expect(diffPair).toHaveClass("items-baseline");
         expect(diffPair).toHaveClass("leading-[inherit]");
         expect(diffPair.className).not.toContain("translate-y");
       }
-      await waitFor(() => {
-        expect(screen.getAllByText("+12").length).toBeGreaterThan(0);
-        expect(screen.getAllByText("-3").length).toBeGreaterThan(0);
-      });
+      expect(screen.getByText("+12")).toBeInTheDocument();
+      expect(screen.getByText("-3")).toBeInTheDocument();
     } finally {
       restoreMotion();
     }
   });
 
-  it("renders GitHub-like file edit diffs when the local preference is enabled", () => {
+  it("keeps file edits flat even when the legacy diff preference is enabled", () => {
     localStorage.setItem(
       "nanobot-webui.settings-preferences",
       JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -496,20 +488,17 @@ describe("AgentActivityCluster", () => {
         />,
       );
 
-      expect(screen.getByTestId("file-edit-diff")).toBeInTheDocument();
-      expect(screen.queryByText("@@ -10,2 +10,2 @@")).not.toBeInTheDocument();
-      expect(screen.getByText("return <Old />;")).toBeInTheDocument();
-      expect(screen.getByText("return <New />;")).toBeInTheDocument();
-      expect(screen.getAllByText("11").length).toBeGreaterThanOrEqual(2);
-      expect(screen.getAllByTestId("activity-header-file-reference")).toHaveLength(1);
-      expect(screen.queryByTestId("activity-file-reference")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
+      expect(screen.queryByText("return <Old />;")).not.toBeInTheDocument();
+      expect(screen.queryByText("return <New />;")).not.toBeInTheDocument();
+      expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
       expect(screen.getAllByTestId("activity-diff-pair")).toHaveLength(1);
     } finally {
       localStorage.removeItem("nanobot-webui.settings-preferences");
     }
   });
 
-  it("renders folded separators between separated file edit hunks", () => {
+  it("does not render diff hunks inside the activity list", () => {
     localStorage.setItem(
       "nanobot-webui.settings-preferences",
       JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -555,17 +544,16 @@ describe("AgentActivityCluster", () => {
         />,
       );
 
-      expect(screen.getByTestId("file-edit-diff-hunk-gap")).toHaveTextContent(
-        "21 unchanged lines hidden",
-      );
+      expect(screen.queryByTestId("file-edit-diff-hunk-gap")).not.toBeInTheDocument();
       expect(screen.queryByText("@@ -25,3 +25,3 @@")).not.toBeInTheDocument();
-      expect(screen.getByText("return newSecond;")).toBeInTheDocument();
+      expect(screen.queryByText("return newSecond;")).not.toBeInTheDocument();
+      expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
     } finally {
       localStorage.removeItem("nanobot-webui.settings-preferences");
     }
   });
 
-  it("keeps long file edit diffs collapsed until opened", () => {
+  it("summarizes long file edit diffs without an expansion control", () => {
     localStorage.setItem(
       "nanobot-webui.settings-preferences",
       JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -604,40 +592,16 @@ describe("AgentActivityCluster", () => {
         />,
       );
 
-      const toggle = screen.getByTestId("file-edit-diff-toggle");
-      expect(toggle).toHaveAttribute("aria-expanded", "false");
-      expect(toggle).toHaveTextContent("View large diff");
-      expect(toggle).toHaveTextContent("165 lines");
+      expect(screen.queryByTestId("file-edit-diff-toggle")).not.toBeInTheDocument();
       expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
       expect(screen.queryByText("line-1")).not.toBeInTheDocument();
-
-      fireEvent.click(toggle);
-
-      expect(toggle).toHaveAttribute("aria-expanded", "true");
-      expect(screen.getByText("line-160")).toBeInTheDocument();
-      expect(screen.queryByText("line-161")).not.toBeInTheDocument();
-      expect(screen.getByTestId("file-edit-diff-expand-lines")).toHaveTextContent("Show 5 more lines");
-
-      fireEvent.click(screen.getByTestId("file-edit-diff-expand-lines"));
-
-      expect(screen.getByText("line-165")).toBeInTheDocument();
-      expect(screen.getByTestId("file-edit-diff-collapse-lines")).toHaveTextContent("Show fewer lines");
-
-      fireEvent.click(screen.getByTestId("file-edit-diff-collapse-lines"));
-
-      expect(screen.queryByText("line-165")).not.toBeInTheDocument();
-      expect(screen.getByTestId("file-edit-diff-expand-lines")).toHaveTextContent("Show 5 more lines");
-
-      fireEvent.click(toggle);
-
-      expect(toggle).toHaveAttribute("aria-expanded", "false");
-      expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
+      expect(screen.getByText("+165")).toBeInTheDocument();
     } finally {
       localStorage.removeItem("nanobot-webui.settings-preferences");
     }
   });
 
-  it("does not mount collapsed file edit diff rows until opened", () => {
+  it("ignores the legacy collapsed diff mode in the activity list", () => {
     localStorage.setItem(
       "nanobot-webui.settings-preferences",
       JSON.stringify({ fileEditDisplayMode: "collapsed_diff" }),
@@ -677,24 +641,16 @@ describe("AgentActivityCluster", () => {
         />,
       );
 
-      const toggle = screen.getByTestId("file-edit-diff-toggle");
-      expect(toggle).toHaveAttribute("aria-expanded", "false");
-      expect(toggle).toHaveTextContent("View diff");
-      expect(toggle).toHaveTextContent("3 lines");
+      expect(screen.queryByTestId("file-edit-diff-toggle")).not.toBeInTheDocument();
       expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
       expect(screen.queryByText("return <New />;")).not.toBeInTheDocument();
-
-      fireEvent.click(toggle);
-
-      expect(toggle).toHaveAttribute("aria-expanded", "true");
-      expect(screen.getByTestId("file-edit-diff")).toBeInTheDocument();
-      expect(screen.getByText("return <New />;")).toBeInTheDocument();
+      expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
     } finally {
       localStorage.removeItem("nanobot-webui.settings-preferences");
     }
   });
 
-  it("offers the file preview entry point when a diff payload is truncated", () => {
+  it("opens the edited file directly instead of expanding a truncated diff", () => {
     localStorage.setItem(
       "nanobot-webui.settings-preferences",
       JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -735,15 +691,9 @@ describe("AgentActivityCluster", () => {
         />,
       );
 
-      const toggle = screen.getByTestId("file-edit-diff-toggle");
-      expect(toggle).toHaveAttribute("aria-expanded", "false");
-      expect(toggle).toHaveTextContent("View large diff");
+      expect(screen.queryByTestId("file-edit-diff-toggle")).not.toBeInTheDocument();
       expect(screen.queryByTestId("file-edit-diff-truncated")).not.toBeInTheDocument();
-
-      fireEvent.click(toggle);
-
-      expect(screen.getByTestId("file-edit-diff-truncated")).toHaveTextContent("Diff truncated");
-      fireEvent.click(screen.getByTestId("file-edit-diff-open-file"));
+      fireEvent.click(screen.getByTestId("activity-file-reference"));
 
       expect(onOpenFilePreview).toHaveBeenCalledWith("/repo/src/app.tsx");
     } finally {
@@ -778,8 +728,8 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    expect(screen.getByRole("button", { name: /deleted angry-birds\.html/i })).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: /edited angry-birds\.html/i })).not.toBeInTheDocument();
+    expect(screen.getByText("Deleted")).toBeInTheDocument();
+    expect(screen.queryByText("Edited")).not.toBeInTheDocument();
   });
 
   it("renders file-only edits without a redundant disclosure", () => {
@@ -812,7 +762,8 @@ describe("AgentActivityCluster", () => {
     expect(screen.queryByRole("button", { name: /edited app\.tsx/i })).not.toBeInTheDocument();
     expect(screen.queryByTestId("agent-activity-scroll")).not.toBeInTheDocument();
     expect(screen.getByText("Edited")).toBeInTheDocument();
-    expect(screen.getByTestId("activity-header-file-reference")).toHaveTextContent("app.tsx");
+    expect(screen.queryByTestId("activity-header-file-reference")).not.toBeInTheDocument();
+    expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
     expect(screen.getByText("+12")).toBeInTheDocument();
     expect(screen.getByText("-3")).toBeInTheDocument();
   });
@@ -879,10 +830,7 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    const cliRuns = screen.getByTestId("activity-cli-runs");
-    expect(cliRuns).toHaveTextContent("Using");
-    expect(cliRuns).toHaveTextContent("@blender");
-    expect(cliRuns).toHaveTextContent("--json --background scene.blend");
+    expect(screen.getByText("Using Blender · --json --background scene.blend")).toBeInTheDocument();
     expect(screen.getByTestId("activity-cli-logo-blender")).toBeInTheDocument();
     expect(screen.queryByText(/run_cli_app/)).not.toBeInTheDocument();
   });
@@ -930,9 +878,9 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    const searchRow = screen.getByText("Searching").closest("li");
-    const cliRow = screen.getByText("@blender").closest("li");
-    const fetchRow = screen.getByText("Reading").closest("li");
+    const searchRow = screen.getByText("Searched nanobot architecture").closest('[data-testid="activity-step"]');
+    const cliRow = screen.getByText("Used Blender · --json project new").closest('[data-testid="activity-step"]');
+    const fetchRow = screen.getByText("example.com/diagram").closest('[data-testid="activity-step"]');
 
     expect(searchRow).not.toBeNull();
     expect(cliRow).not.toBeNull();
@@ -941,6 +889,181 @@ describe("AgentActivityCluster", () => {
     expect(cliRow!.compareDocumentPosition(fetchRow!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 
+  it("renders web search results as lightweight branded source rows", () => {
+    const line = 'web_search({"query":"agent frameworks"})';
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-web-search-results",
+          role: "tool",
+          kind: "trace",
+          content: line,
+          traces: [line],
+          toolEvents: [{
+            phase: "end",
+            call_id: "call-web-search",
+            name: "web_search",
+            arguments: { query: "agent frameworks" },
+            result: [
+              "Results for: agent frameworks",
+              "",
+              "1. OpenAI Agents SDK",
+              "   https://openai.com/index/new-tools-for-building-agents/?utm_source=test",
+              "   Build and deploy agentic applications.",
+              "2. Building effective agents",
+              "   https://www.anthropic.com/engineering/building-effective-agents",
+              "   Practical patterns for reliable agents.",
+              "3. Internal dashboard",
+              "   http://localhost:3000/search",
+            ].join("\n"),
+          }],
+          createdAt: 1,
+        }]}
+        isTurnStreaming
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.getByText("Searched agent frameworks")).toBeInTheDocument();
+    expect(screen.queryByText("2 sources")).not.toBeInTheDocument();
+
+    const openAiLink = screen.getByText("OpenAI Agents SDK").closest("a");
+    const anthropicLink = screen.getByText("Building effective agents").closest("a");
+    expect(openAiLink).toHaveAttribute(
+      "href",
+      "https://openai.com/index/new-tools-for-building-agents/",
+    );
+    expect(openAiLink).not.toHaveAttribute("title");
+    expect(anthropicLink).toHaveAttribute(
+      "href",
+      "https://www.anthropic.com/engineering/building-effective-agents",
+    );
+    expect(screen.getByText("openai.com/index/new-tools-for-building-agents")).toBeInTheDocument();
+    expect(screen.getByText("anthropic.com/engineering/building-effective-agents")).toBeInTheDocument();
+    expect(screen.getByTestId("activity-web-favicon-openai.com")).toBeInTheDocument();
+    expect(screen.getByTestId("activity-web-favicon-anthropic.com")).toBeInTheDocument();
+    expect(screen.queryByText("Internal dashboard")).not.toBeInTheDocument();
+    expect(screen.queryByText("Build and deploy agentic applications.")).not.toBeInTheDocument();
+    const searchStep = screen.getByText("Searched agent frameworks").closest(
+      '[data-testid="activity-step"]',
+    );
+    const openAiStep = openAiLink!.closest('[data-testid="activity-step"]');
+    const anthropicStep = anthropicLink!.closest('[data-testid="activity-step"]');
+    expect(openAiStep).toContainElement(
+      screen.getByText("openai.com/index/new-tools-for-building-agents"),
+    );
+    expect(anthropicStep).toContainElement(
+      screen.getByText("anthropic.com/engineering/building-effective-agents"),
+    );
+    expect(searchStep?.parentElement).toBe(openAiStep?.parentElement);
+    expect(searchStep?.parentElement).toBe(anthropicStep?.parentElement);
+    expect(searchStep?.parentElement?.querySelector("ul, li, section")).toBeNull();
+    expect(screen.getAllByTestId("activity-step")).toHaveLength(3);
+  });
+
+  it("redacts credentials from web search queries, titles, and links", () => {
+    const query = "release notes access_token=signed-secret";
+    const line = `web_search(${JSON.stringify({ query })})`;
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-web-search-secret",
+          role: "tool",
+          kind: "trace",
+          content: line,
+          traces: [line],
+          toolEvents: [{
+            phase: "end",
+            call_id: "call-web-search-secret",
+            name: "web_search",
+            arguments: { query },
+            result: [
+              "1. Release sk-proj-secret1234",
+              "   https://example.com/release?api_key=url-secret#details",
+            ].join("\n"),
+          }],
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.queryByText(/signed-secret|secret1234|url-secret/)).not.toBeInTheDocument();
+    expect(screen.getByText("Searched release notes access_token=<redacted>")).toBeInTheDocument();
+    expect(screen.getByText("Release <redacted>")).toBeInTheDocument();
+    expect(screen.getByText("Release <redacted>").closest("a")).toHaveAttribute(
+      "href",
+      "https://example.com/release",
+    );
+  });
+
+  it("renders persisted search progress as one human-readable action", () => {
+    const line = 'web_search({"query":"site:linkedin.com/company Evomap startup"})';
+    render(
+      <AgentActivityCluster
+        messages={[
+          {
+            id: "search-start",
+            role: "tool",
+            kind: "trace",
+            content: line,
+            traces: [line],
+            toolEvents: [{
+              phase: "start",
+              name: "web_search",
+              arguments: { query: "site:linkedin.com/company Evomap startup" },
+            }],
+            createdAt: 1,
+          },
+          {
+            id: "search-end",
+            role: "tool",
+            kind: "trace",
+            content: line,
+            traces: [line],
+            toolEvents: [{
+              phase: "error",
+              name: "web_search",
+              arguments: { query: "site:linkedin.com/company Evomap startup" },
+              error: "Search provider rate limited the request",
+            }],
+            createdAt: 2,
+          },
+        ]}
+        isTurnStreaming
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.getAllByTestId("activity-step")).toHaveLength(1);
+    expect(screen.getByText("Could not search LinkedIn · Evomap startup")).toBeInTheDocument();
+    expect(screen.queryByText(/site:linkedin/i)).not.toBeInTheDocument();
+    expect(screen.queryByText("Web research")).not.toBeInTheDocument();
+  });
+
+  it("renders reasoning as a single flat activity row", () => {
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "r-flat",
+          role: "assistant",
+          content: "",
+          reasoning: "**Planning** a focused search\nfor official sources",
+          reasoningStreaming: true,
+          isStreaming: true,
+          createdAt: 1,
+        }]}
+        isTurnStreaming
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.getByText("Planning a focused search for official sources")).toBeInTheDocument();
+    expect(screen.queryByText("Thinking…")).not.toBeInTheDocument();
+    expect(screen.queryByText("Thinking")).not.toBeInTheDocument();
+  });
+
   it("labels rejected CLI app calls as failed instead of ran", () => {
     render(
       <AgentActivityCluster
@@ -966,11 +1089,14 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /failed @github/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Worked" }));
 
-    expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("Failed");
-    expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("@github");
-    expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("Error: CLI app 'github' not found");
+    const row = screen.getByText("Could not use GitHub · --json repo view").closest(
+      '[data-testid="activity-step"]',
+    );
+    expect(row).toBeInTheDocument();
+    expect(row).not.toHaveAttribute("title");
+    expect(screen.queryByText("Error: CLI app 'github' not found")).not.toBeInTheDocument();
     expect(screen.queryByText("Ran CLI")).not.toBeInTheDocument();
   });
 
@@ -999,11 +1125,9 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    const mcpRuns = screen.getByTestId("activity-mcp-runs");
-    expect(mcpRuns).toHaveTextContent("Using");
-    expect(mcpRuns).toHaveTextContent("Browserbase");
-    expect(mcpRuns).toHaveTextContent("browser_navigate");
-    expect(mcpRuns).toHaveTextContent("url: https://example.com");
+    expect(screen.getByText("Opening example.com · Browserbase")).toBeInTheDocument();
+    expect(screen.queryByText("Using")).not.toBeInTheDocument();
+    expect(screen.queryByText(/browser_navigate/)).not.toBeInTheDocument();
     expect(screen.getByTestId("activity-mcp-logo-browserbase")).toBeInTheDocument();
     expect(screen.queryByText(/mcp_browserbase_browser_navigate/)).not.toBeInTheDocument();
   });
@@ -1025,9 +1149,11 @@ describe("AgentActivityCluster", () => {
     );
 
     const favicon = screen.getByTestId("activity-web-favicon-auth0.com");
-    expect(favicon.querySelector("img")?.getAttribute("src")).toContain("auth0.com");
-    expect(screen.getByText("Reading")).toBeInTheDocument();
-    expect(screen.getByText("auth0.com/blog/jwt-security-best-practices")).toBeInTheDocument();
+    expect(favicon).toHaveAttribute("src", expect.stringContaining("auth0.com"));
+    const row = screen.getByText("auth0.com/blog/jwt-security-best-practices").closest(
+      '[data-testid="activity-step"]',
+    );
+    expect(row).toHaveTextContent("Reading");
   });
 
   it("renders plain-text fetch progress with the site favicon", () => {
@@ -1047,8 +1173,42 @@ describe("AgentActivityCluster", () => {
     );
 
     expect(screen.getByTestId("activity-web-favicon-auth0.com")).toBeInTheDocument();
-    expect(screen.getByText("Reading")).toBeInTheDocument();
-    expect(screen.getByText("auth0.com/blog/jwt-security-best-practices")).toBeInTheDocument();
+    const row = screen.getByText("auth0.com/blog/jwt-security-best-practices").closest(
+      '[data-testid="activity-step"]',
+    );
+    expect(row).toHaveTextContent("Reading");
+  });
+
+  it("renders a completed fetch as one linked title and URL row", () => {
+    const line = 'web_fetch({"url":"https://example.com/docs"})';
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-web-fetch-title",
+          role: "tool",
+          kind: "trace",
+          content: line,
+          traces: [line],
+          toolEvents: [{
+            phase: "end",
+            call_id: "fetch-title",
+            name: "web_fetch",
+            arguments: { url: "https://example.com/docs" },
+            result: "# Example documentation\n\nPage body",
+          }],
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    const title = screen.getByText("Example documentation");
+    const url = screen.getByText("example.com/docs");
+    const row = title.closest('[data-testid="activity-step"]');
+    expect(row).toContainElement(url);
+    expect(title.closest("a")).toHaveAttribute("href", "https://example.com/docs");
+    expect(screen.getAllByTestId("activity-step")).toHaveLength(1);
   });
 
   it("does not request favicons for private web fetch targets", () => {
@@ -1068,10 +1228,11 @@ describe("AgentActivityCluster", () => {
     );
 
     expect(screen.queryByTestId("activity-web-favicon-localhost")).not.toBeInTheDocument();
-    expect(screen.getByText("url: http://localhost:3000/dashboard")).toBeInTheDocument();
+    expect(screen.getByText("Reading Private address")).toBeInTheDocument();
+    expect(screen.queryByText("http://localhost:3000/dashboard")).not.toBeInTheDocument();
   });
 
-  it("shows readable argument previews for generic tool traces", () => {
+  it("presents generic tool traces as one-line semantic actions", () => {
     render(
       <AgentActivityCluster
         messages={[{
@@ -1091,9 +1252,109 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    expect(screen.getByText("find_files query: thread · glob: *.tsx")).toBeInTheDocument();
-    expect(screen.getByText("list_dir path: memory")).toBeInTheDocument();
-    expect(screen.getByText("grep pattern: dream_cursor")).toBeInTheDocument();
+    expect(screen.getByText("Found files *.tsx")).toBeInTheDocument();
+    expect(screen.getByText("Listed files memory")).toBeInTheDocument();
+    expect(screen.getByText("Searching files “dream_cursor”")).toBeInTheDocument();
+    expect(screen.queryByText("Technical details")).not.toBeInTheDocument();
+    expect(document.querySelector("details")).not.toBeInTheDocument();
+  });
+
+  it("groups repeated searches over internal tool results without exposing raw paths", () => {
+    const pattern = "Jul (1[0-7]), 2026|July (1[0-7]), 2026|2026-07-(1[0-7])";
+    const secondPattern = "Anthropic|OpenAI|DeepMind";
+    const firstPath = "/Users/test/.nanobot/workspace/.nanobot/tool-results/websocket_session/call_first-result.txt";
+    const secondPath = "/Users/test/.nanobot/workspace/.nanobot/tool-results/websocket_session/call_second-result.txt";
+    const traces = [
+      `grep(${JSON.stringify({ pattern, path: firstPath })})`,
+      `grep(${JSON.stringify({ pattern: secondPattern, path: secondPath })})`,
+    ];
+
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-grouped-grep",
+          role: "tool",
+          kind: "trace",
+          content: traces.join("\n"),
+          traces,
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    const run = screen.getByText(/Reviewed sources.*2 files/).closest('[data-testid="activity-step"]');
+    expect(run).toBeInTheDocument();
+    expect(screen.queryByText(firstPath)).not.toBeInTheDocument();
+    expect(screen.queryByText(secondPath)).not.toBeInTheDocument();
+
+    expect(screen.queryByText(pattern)).not.toBeInTheDocument();
+    expect(screen.queryByText(secondPattern)).not.toBeInTheDocument();
+    expect(screen.queryByText("call_first-result.txt")).not.toBeInTheDocument();
+    expect(screen.queryByText("call_second-result.txt")).not.toBeInTheDocument();
+  });
+
+  it("surfaces generic tool failures without dumping their arguments", () => {
+    const args = { pattern: "needle", path: "workspace/file.txt" };
+    const line = `grep(${JSON.stringify(args)})`;
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-grep-error",
+          role: "tool",
+          kind: "trace",
+          content: line,
+          traces: [line],
+          toolEvents: [{
+            phase: "error",
+            call_id: "call-grep-error",
+            name: "grep",
+            arguments: args,
+            error: JSON.stringify({
+              message: "Permission denied",
+              headers: { Authorization: "Bearer sk-live-secret" },
+              token: "super-secret",
+            }),
+          }],
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    const row = screen.getByText("Could not search files “needle”").closest(
+      '[data-testid="activity-step"]',
+    );
+    expect(row).toBeInTheDocument();
+    expect(row).not.toHaveAttribute("title");
+    expect(screen.queryByText(/Permission denied/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/super-secret/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/sk-live-secret/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Authorization/)).not.toBeInTheDocument();
+  });
+
+  it("redacts credentials from generic tool URL details", () => {
+    const line = 'download_asset({"url":"https://user:password@example.com/file?access_token=signed-secret&format=png"})';
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-generic-url-secret",
+          role: "tool",
+          kind: "trace",
+          content: line,
+          traces: [line],
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.queryByText(/password|signed-secret/)).not.toBeInTheDocument();
+    expect(screen.getByText("Completed Download asset")).toBeInTheDocument();
+    expect(screen.queryByText(/example\.com/)).not.toBeInTheDocument();
   });
 
   it("summarizes long shell traces instead of dumping scripts", () => {
@@ -1121,15 +1382,36 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /1 tool calls/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Worked" }));
 
-    expect(screen.getByText("Command")).toBeInTheDocument();
-    expect(screen.getByText(/cat << 'EOF' \| bash · script, 6 lines/)).toBeInTheDocument();
+    expect(screen.getByText("Ran command cat << 'EOF' | bash · script, 6 lines")).toBeInTheDocument();
     expect(screen.queryByText(/SECRET_TOKEN/)).not.toBeInTheDocument();
     expect(screen.queryByText(/for id in/)).not.toBeInTheDocument();
     expect(screen.queryByText(/^Done$/)).not.toBeInTheDocument();
   });
 
+  it("presents time checks as an intent instead of a raw command", () => {
+    const line = `exec(${JSON.stringify({ command: "date '+%Y-%m-%d %H:%M:%S %Z'" })})`;
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-date",
+          role: "tool",
+          kind: "trace",
+          content: line,
+          traces: [line],
+          createdAt: 1,
+        }]}
+        isTurnStreaming
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.getByText("Checking current time")).toBeInTheDocument();
+    expect(screen.queryByText(/%Y-%m-%d/)).not.toBeInTheDocument();
+    expect(screen.queryByText("Web")).not.toBeInTheDocument();
+  });
+
   it("does not render zero diff counters for completed edits", () => {
     render(
       <AgentActivityCluster
@@ -1156,7 +1438,7 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    expect(screen.getByRole("button", { name: /edited app\.tsx/i })).toBeInTheDocument();
+    expect(screen.getByText("Edited")).toBeInTheDocument();
     expect(screen.queryByText("+0")).not.toBeInTheDocument();
     expect(screen.queryByText("-0")).not.toBeInTheDocument();
   });
@@ -1220,7 +1502,6 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    expect(screen.getByRole("button", { name: /preparing edit/i })).toBeInTheDocument();
     expect(screen.getByText("Preparing file edit…")).toBeInTheDocument();
   });
 
@@ -1251,9 +1532,10 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /failed angry-birds\.html/i }));
-
-    expect(screen.getByText("Target text was not found in angry-birds.html.")).toBeInTheDocument();
+    const row = screen.getByText("Could not edit").closest('[data-testid="activity-step"]');
+    expect(row).toBeInTheDocument();
+    expect(row).not.toHaveAttribute("title");
+    expect(screen.queryByText("Target text was not found in angry-birds.html.")).not.toBeInTheDocument();
   });
 
   it("keeps permission errors readable for failed file edits", () => {
@@ -1283,9 +1565,10 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /failed composition\.html/i }));
-
-    expect(screen.getByText("No permission to change this location.")).toBeInTheDocument();
+    const row = screen.getByText("Could not edit").closest('[data-testid="activity-step"]');
+    expect(row).toBeInTheDocument();
+    expect(row).not.toHaveAttribute("title");
+    expect(screen.queryByText("No permission to change this location.")).not.toBeInTheDocument();
     expect(screen.queryByText(/\[Errno 13\]/)).not.toBeInTheDocument();
   });
 
@@ -1358,18 +1641,18 @@ describe("AgentActivityCluster", () => {
         />,
       );
 
-      const toggle = screen.getByRole("button", { name: "Edited 3 changes" });
-      expect(toggle).toHaveTextContent("+8");
-      expect(toggle).toHaveTextContent("-7");
-      fireEvent.click(toggle);
-
       const fileRefs = screen.getAllByTestId("activity-file-reference");
       expect(fileRefs).toHaveLength(3);
       expect(fileRefs.every((ref) => ref.textContent?.includes("minecraft-fps/index.html"))).toBe(true);
-      expect(screen.getByText("patch failed")).toBeInTheDocument();
-      expect(screen.getAllByTestId("file-edit-diff")).toHaveLength(2);
-      expect(screen.getByText("<canvas />")).toBeInTheDocument();
-      expect(screen.getByText("const fps = 60;")).toBeInTheDocument();
+      const failedRow = screen.getByText("Could not edit").closest(
+        '[data-testid="activity-step"]',
+      );
+      expect(failedRow).toBeInTheDocument();
+      expect(failedRow).not.toHaveAttribute("title");
+      expect(screen.queryByText("patch failed")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
+      expect(screen.queryByText("<canvas />")).not.toBeInTheDocument();
+      expect(screen.queryByText("const fps = 60;")).not.toBeInTheDocument();
       expect(screen.getAllByText("+2").length).toBeGreaterThan(0);
       expect(screen.getAllByText("-1").length).toBeGreaterThan(0);
       expect(screen.getAllByText("+6").length).toBeGreaterThan(0);
@@ -1379,7 +1662,7 @@ describe("AgentActivityCluster", () => {
     }
   });
 
-  it("renders tool event embeds as inline activity evidence", () => {
+  it("keeps tool event embeds out of the flat activity list", () => {
     render(
       <AgentActivityCluster
         messages={[{
@@ -1406,15 +1689,91 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    expect(screen.getByText("Web")).toBeInTheDocument();
-    expect(screen.getByTestId("activity-evidence-preview")).toBeInTheDocument();
-    expect(screen.getByRole("img", { name: "Homepage screenshot" })).toHaveAttribute(
-      "src",
-      "/api/media/signed/screenshot.png",
-    );
+    expect(screen.queryByText("Web")).not.toBeInTheDocument();
+    const row = screen.getByText("example.com").closest('[data-testid="activity-step"]');
+    expect(row).toHaveTextContent("Read");
+    expect(screen.queryByTestId("activity-evidence-preview")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Found image/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole("img", { name: "Homepage screenshot" })).not.toBeInTheDocument();
   });
 
-  it("shows missing evidence as a file-safe placeholder", () => {
+  it("keeps image generation status to one activity line", () => {
+    const message: UIMessage = {
+      id: "image-run",
+      role: "tool",
+      kind: "trace",
+      content: 'generate_image({"prompt":"an orange nanobot on a desk","aspect_ratio":"4:3"})',
+      traces: ['generate_image({"prompt":"an orange nanobot on a desk","aspect_ratio":"4:3"})'],
+      toolEvents: [{
+        phase: "start",
+        call_id: "image-call",
+        name: "generate_image",
+        arguments: { prompt: "an orange nanobot on a desk", aspect_ratio: "4:3" },
+      }],
+      createdAt: 1,
+    };
+    const { rerender } = render(
+      <AgentActivityCluster messages={[message]} isTurnStreaming hasBodyBelow={false} />,
+    );
+
+    expect(screen.getByText("Generating image")).toBeInTheDocument();
+
+    rerender(
+      <AgentActivityCluster
+        messages={[{
+          ...message,
+          toolEvents: [{
+            ...message.toolEvents![0],
+            phase: "end",
+            files: [{
+              url: "/api/media/signed/generated.png",
+              name: "generated.png",
+              type: "image/png",
+            }],
+          }],
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.getByText("Generated image")).toBeInTheDocument();
+    expect(screen.queryByRole("img", { name: "generated.png" })).not.toBeInTheDocument();
+  });
+
+  it("keeps image-generation failures visible and actionable", () => {
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "image-error",
+          role: "tool",
+          kind: "trace",
+          content: 'generate_image({"prompt":"a launch poster"})',
+          traces: ['generate_image({"prompt":"a launch poster"})'],
+          toolEvents: [{
+            phase: "error",
+            call_id: "image-error-call",
+            name: "generate_image",
+            arguments: { prompt: "a launch poster" },
+            error: "Image provider quota exceeded",
+          }],
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.getByText("Could not generate image")).toBeInTheDocument();
+    const row = screen.getByText("Could not generate image").closest(
+      '[data-testid="activity-step"]',
+    );
+    expect(row).toBeInTheDocument();
+    expect(row).not.toHaveAttribute("title");
+    expect(screen.queryByText("Image provider quota exceeded")).not.toBeInTheDocument();
+  });
+
+  it("does not add a secondary evidence row when evidence is missing", () => {
     render(
       <AgentActivityCluster
         messages={[{
@@ -1437,8 +1796,104 @@ describe("AgentActivityCluster", () => {
       />,
     );
 
-    expect(screen.getByText("Vision")).toBeInTheDocument();
-    expect(screen.getByTestId("activity-evidence-preview")).toBeInTheDocument();
-    expect(screen.getByText("missing.png")).toBeInTheDocument();
+    expect(screen.queryByText("Vision")).not.toBeInTheDocument();
+    expect(screen.getByText("Captured screenshot")).toBeInTheDocument();
+    expect(screen.queryByTestId("activity-evidence-preview")).not.toBeInTheDocument();
+    expect(screen.queryByText("missing.png")).not.toBeInTheDocument();
+  });
+
+  it("keeps every default activity action on one structural line", () => {
+    render(
+      <AgentActivityCluster
+        messages={[
+          {
+            id: "reasoning-line",
+            role: "assistant",
+            content: "",
+            reasoning: "**Planning** the next step\nwithout a nested title",
+            reasoningStreaming: false,
+            createdAt: 1,
+          },
+          {
+            id: "tool-line",
+            role: "tool",
+            kind: "trace",
+            content: 'grep({"pattern":"needle","path":"workspace/file.txt"})',
+            traces: ['grep({"pattern":"needle","path":"workspace/file.txt"})'],
+            createdAt: 2,
+          },
+          {
+            id: "fetch-line",
+            role: "tool",
+            kind: "trace",
+            content: 'web_fetch({"url":"https://example.com/docs"})',
+            traces: ['web_fetch({"url":"https://example.com/docs"})'],
+            createdAt: 3,
+          },
+        ]}
+        isTurnStreaming={false}
+        hasBodyBelow={false}
+      />,
+    );
+
+    const steps = screen.getAllByTestId("activity-step");
+    expect(steps.length).toBeGreaterThanOrEqual(3);
+    for (const step of steps) {
+      expect(step).toHaveClass("grid-cols-[1.125rem_minmax(0,1fr)]");
+      const line = step.children[1]?.firstElementChild;
+      expect(line).toHaveClass("overflow-hidden");
+      expect(line).toHaveClass("whitespace-nowrap");
+      expect(step.querySelector("br")).not.toBeInTheDocument();
+      expect(step.querySelector('[data-testid="activity-evidence-preview"]')).not.toBeInTheDocument();
+    }
+    expect(document.querySelector("details")).not.toBeInTheDocument();
+    expect(document.querySelector("ul, li, section")).not.toBeInTheDocument();
+  });
+
+  it("does not expose tool inputs or credentials in the activity surface", () => {
+    const cliLine = 'run_cli_app({"name":"blender","args":["--token","xoxb-1234567890-secret","render"],"json":true})';
+    const mcpLine = 'mcp_browserbase_browser_fill({"element":"Password","text":"mcp-private-value"})';
+    const genericLine = 'third_party_sync({"token":"sk-proj-1234567890-secret","payload":"private-payload"})';
+    const { container } = render(
+      <AgentActivityCluster
+        messages={[
+          {
+            id: "private-cli",
+            role: "tool",
+            kind: "trace",
+            content: cliLine,
+            traces: [cliLine],
+            createdAt: 1,
+          },
+          {
+            id: "private-mcp",
+            role: "tool",
+            kind: "trace",
+            content: mcpLine,
+            traces: [mcpLine],
+            createdAt: 2,
+          },
+          {
+            id: "private-generic",
+            role: "tool",
+            kind: "trace",
+            content: genericLine,
+            traces: [genericLine],
+            createdAt: 3,
+          },
+        ]}
+        isTurnStreaming
+        hasBodyBelow={false}
+        cliApps={[BLENDER_CLI_APP]}
+        mcpPresets={[BROWSERBASE_MCP]}
+      />,
+    );
+
+    expect(container.innerHTML).not.toContain("xoxb-1234567890-secret");
+    expect(container.innerHTML).not.toContain("mcp-private-value");
+    expect(container.innerHTML).not.toContain("sk-proj-1234567890-secret");
+    expect(container.innerHTML).not.toContain("private-payload");
+    expect(container.textContent).not.toMatch(/run_cli_app\(|browser_fill\(|third_party_sync\(/);
+    expect(container.textContent).toMatch(/<redacted>|••••/);
   });
 });

webui/src/tests/generic-tool-model.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+
+import { redactActivityText } from "@/components/thread/activity/activity-text";
+import {
+  describeGenericToolRun,
+  parseGenericToolTrace,
+  type GenericToolStatus,
+} from "@/components/thread/activity/generic-tool-model";
+
+function describeRun(line: string, status: GenericToolStatus = "done") {
+  const trace = parseGenericToolTrace(line);
+  expect(trace).not.toBeNull();
+  return describeGenericToolRun([{ trace: trace!, status }]);
+}
+
+describe("generic tool activity semantics", () => {
+  it.each([
+    ['find_files({"glob":"*.tsx"})', "Found files", "*.tsx"],
+    ['grep({"pattern":"dream_cursor"})', "Searched files", "“dream_cursor”"],
+    ['list_dir({"path":"memory"})', "Listed files", "memory"],
+    ['read_file({"path":"docs/guide.md"})', "Read file", "docs/guide.md"],
+    ['memory_search({"query":"launch date"})', "Searched memory", "“launch date”"],
+    ['generate_image({"prompt":"private launch art"})', "Generated image", ""],
+    ['spawn({"label":"Research competitors","task":"private task"})', "Delegated task", "Research competitors"],
+    ['message({"channel":"telegram","content":"private message"})', "Sent message", "telegram"],
+    ['my({"action":"check","key":"context_window_tokens"})', "Checked agent settings", "context_window_tokens"],
+    ['my({"action":"set","key":"model","value":"private-model"})', "Updated agent settings", "model"],
+    ['cron({"action":"add","name":"Daily digest","message":"private prompt"})', "Scheduled automation", "Daily digest"],
+    ['cron({"action":"remove","name":"Daily digest"})', "Removed automation", "Daily digest"],
+    ['create_goal({"objective":"private objective","ui_summary":"Benchmark memory"})', "Started long task", "Benchmark memory"],
+    ['update_goal({"action":"complete","recap":"private recap"})', "Updated long task", "complete"],
+    ['write_stdin({"session_id":"session-1234567890-secret","chars":"private input"})', "Continued command", "session…ecret"],
+    ['list_exec_sessions({})', "Checked running commands", ""],
+    ['screenshot({"path":"artifacts/home.png"})', "Captured screenshot", ""],
+    ['third_party_sync({"token":"secret","payload":"private payload"})', "Completed Third party sync", ""],
+  ])("describes %s without exposing implementation syntax", (line, label, detail) => {
+    const presentation = describeRun(line);
+    expect(presentation.label).toBe(label);
+    expect(presentation.detail).toBe(detail);
+    expect(`${presentation.label} ${presentation.detail}`).not.toMatch(/[{}]|private|tool-results/);
+  });
+
+  it.each([
+    ["running", "Generating image"],
+    ["done", "Generated image"],
+    ["error", "Could not generate image"],
+  ] as const)("uses human status copy for %s tools", (status, label) => {
+    expect(describeRun('generate_image({"prompt":"private"})', status).label).toBe(label);
+  });
+
+  it("groups searches over collected sources without exposing absolute paths", () => {
+    const first = parseGenericToolTrace(
+      'grep({"pattern":"July","path":"/Users/test/.nanobot/tool-results/session/call_first.txt"})',
+    )!;
+    const second = parseGenericToolTrace(
+      'grep({"pattern":"OpenAI","path":"/Users/test/.nanobot/tool-results/session/call_second.txt"})',
+    )!;
+    const presentation = describeGenericToolRun([
+      { trace: first, status: "done" },
+      { trace: second, status: "done" },
+    ]);
+
+    expect(presentation).toMatchObject({ label: "Reviewed sources", detail: "", aside: "2 files" });
+    expect(JSON.stringify(presentation)).not.toContain("/Users/test");
+  });
+
+  it("leaves specialized tools to their dedicated activity surfaces", () => {
+    for (const line of [
+      'web_search({"query":"nanobot"})',
+      'web_fetch({"url":"https://example.com"})',
+      'exec({"command":"date"})',
+      'write_file({"path":"README.md"})',
+      'edit_file({"path":"README.md"})',
+      'apply_patch({"patch":"private"})',
+      'run_cli_app({"name":"github"})',
+      'mcp_browser_click({"text":"private"})',
+    ]) {
+      expect(parseGenericToolTrace(line)).toBeNull();
+    }
+  });
+
+  it.each([
+    ["Authorization: Bearer top-secret-token", "Authorization: <redacted>"],
+    ["API_KEY=sk-proj-1234567890abcdef", "API_KEY=<redacted>"],
+    ["--token xoxb-1234567890-secret", "--token <redacted>"],
+    ["https://user:password@example.com/file?access_token=signed-secret", "https://<redacted>@example.com/file?access_token=<redacted>"],
+    ["github ghp_1234567890abcdefghijkl", "github <redacted>"],
+    ["aws AKIA1234567890ABCDEF", "aws <redacted>"],
+    ["telegram 123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZabcd", "telegram <redacted>"],
+  ])("redacts activity text before rendering: %s", (input, expected) => {
+    expect(redactActivityText(input)).toBe(expected);
+  });
+});

webui/src/tests/markdown-text-renderer.test.tsx

@@ -13,6 +13,52 @@ describe("MarkdownTextRenderer", () => {
     expect(link).toHaveClass("text-blue-500", "dark:text-blue-300");
   });
 
+  it("does not render active URL protocols from untrusted markdown", () => {
+    const { container } = render(
+      <MarkdownTextRenderer>
+        {[
+          "[JavaScript](javascript:alert(1))",
+          "[Data](data:text/html,<script>alert(1)</script>)",
+          "![Unsafe image](javascript:alert(2))",
+        ].join(" ")}
+      </MarkdownTextRenderer>,
+    );
+
+    expect(container).toHaveTextContent("JavaScript Data");
+    expect(container.querySelector("a")).toBeNull();
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  it("keeps safe external, mail, relative, and fragment links", () => {
+    render(
+      <MarkdownTextRenderer>
+        {[
+          "[HTTPS](https://example.com)",
+          "[Mail](mailto:hello@example.com)",
+          "[Relative](/docs/getting-started)",
+          "[Fragment](#install)",
+        ].join(" ")}
+      </MarkdownTextRenderer>,
+    );
+
+    expect(screen.getByRole("link", { name: "HTTPS" })).toHaveAttribute(
+      "href",
+      "https://example.com",
+    );
+    expect(screen.getByRole("link", { name: "Mail" })).toHaveAttribute(
+      "href",
+      "mailto:hello@example.com",
+    );
+    expect(screen.getByRole("link", { name: "Relative" })).toHaveAttribute(
+      "href",
+      "/docs/getting-started",
+    );
+    expect(screen.getByRole("link", { name: "Fragment" })).toHaveAttribute(
+      "href",
+      "#install",
+    );
+  });
+
   it("renders local file links as previewable file references", () => {
     const onOpenFilePreview = vi.fn();
     render(
@@ -264,7 +310,13 @@ describe("MarkdownTextRenderer", () => {
 
     expect(favicon()).toHaveAttribute(
       "src",
-      "https://www.savills.com.hk/favicon.ico",
+      "https://favicon.im/www.savills.com.hk?larger=true",
+    );
+
+    fireEvent.error(favicon()!);
+    expect(favicon()).toHaveAttribute(
+      "src",
+      "https://www.google.com/s2/favicons?domain=www.savills.com.hk&sz=64",
     );
 
     fireEvent.error(favicon()!);
@@ -276,7 +328,7 @@ describe("MarkdownTextRenderer", () => {
     fireEvent.error(favicon()!);
     expect(favicon()).toHaveAttribute(
       "src",
-      "https://www.google.com/s2/favicons?domain=www.savills.com.hk&sz=64",
+      "https://www.savills.com.hk/favicon.ico",
     );
 
     fireEvent.error(favicon()!);
@@ -340,7 +392,7 @@ describe("MarkdownTextRenderer", () => {
     expect(container).not.toHaveTextContent("</details>");
   });
 
-  it("renders task list checkboxes as quiet status marks", () => {
+  it("renders task lists with compact static status markers", () => {
     const { container } = render(
       <MarkdownTextRenderer>
         {"- [x] 写 Markdown 示例\n- [x] 加点 emoji\n- [ ] 测试渲染效果"}
@@ -350,6 +402,120 @@ describe("MarkdownTextRenderer", () => {
     expect(container.querySelectorAll("input[type='checkbox']")).toHaveLength(0);
     expect(screen.getAllByTestId("markdown-task-checkbox")).toHaveLength(3);
     expect(container.querySelectorAll(".task-list-item")).toHaveLength(3);
+    expect(screen.queryByRole("button", { name: /tasks/i })).not.toBeInTheDocument();
+  });
+
+  it("renders GFM tables in a responsive data surface", () => {
+    const { container } = render(
+      <MarkdownTextRenderer>
+        {
+          "## Models\n\n| Model | Context | Price |\n| --- | ---: | ---: |\n| nanobot | 200k | $1 |\n\n## Notes"
+        }
+      </MarkdownTextRenderer>,
+    );
+
+    const surface = screen.getByTestId("markdown-data-table");
+    expect(surface).toHaveClass("overflow-x-auto", "rounded-lg", "mb-5");
+    expect(surface).toHaveAttribute("role", "region");
+    expect(surface).toHaveAttribute("tabindex", "0");
+    expect(surface).toHaveAccessibleName("Data table");
+    expect(screen.getByRole("table")).toHaveTextContent("nanobot");
+    expect(container.firstElementChild).toHaveClass("space-y-4");
+    expect(container.firstElementChild).not.toHaveClass("space-y-0");
+  });
+
+  it("uses Streamdown's incremental reveal while content is streaming", () => {
+    const { container } = render(
+      <MarkdownTextRenderer streaming>春天</MarkdownTextRenderer>,
+    );
+
+    expect(container.firstElementChild).toHaveClass(
+      "[&>*:last-child]:after:content-[var(--streamdown-caret)]",
+    );
+    const animatedUnits = container.querySelectorAll<HTMLElement>("[data-sd-animate]");
+    expect(animatedUnits).toHaveLength(1);
+    expect(animatedUnits[0]).toHaveTextContent("春天");
+    expect(animatedUnits[0].getAttribute("style")).toContain("--sd-duration: 180ms");
+  });
+
+  it("removes animation markup when a streamed response completes", async () => {
+    const { container, rerender } = render(
+      <MarkdownTextRenderer streaming>春天</MarkdownTextRenderer>,
+    );
+    expect(container.querySelector("[data-sd-animate]")).toBeInTheDocument();
+
+    rerender(<MarkdownTextRenderer>春天</MarkdownTextRenderer>);
+
+    await waitFor(() => {
+      expect(container.querySelector("[data-sd-animate]")).not.toBeInTheDocument();
+    });
+  });
+
+  it("does not create one DOM node per CJK character for long responses", () => {
+    const { container } = render(
+      <MarkdownTextRenderer streaming>{"长".repeat(6_001)}</MarkdownTextRenderer>,
+    );
+
+    expect(container.querySelectorAll("[data-sd-animate]")).toHaveLength(1);
+    expect(container.querySelector("[data-nanobot-stream-unit]")).not.toBeInTheDocument();
+  });
+
+  it("repairs incomplete streaming markdown without exposing syntax fragments", () => {
+    const { container, rerender } = render(
+      <MarkdownTextRenderer streaming>{"**partial answer"}</MarkdownTextRenderer>,
+    );
+
+    expect(container).toHaveTextContent("partial answer");
+    expect(container).not.toHaveTextContent("**partial answer");
+
+    rerender(
+      <MarkdownTextRenderer streaming>
+        {"[OpenAI](https://openai.com"}
+      </MarkdownTextRenderer>,
+    );
+    expect(screen.queryByRole("link", { name: "OpenAI" })).not.toBeInTheDocument();
+    expect(container).toHaveTextContent("OpenAI");
+
+    rerender(
+      <MarkdownTextRenderer streaming>
+        {"[OpenAI](https://openai.com)"}
+      </MarkdownTextRenderer>,
+    );
+    expect(screen.getByRole("link", { name: "OpenAI" })).toHaveAttribute(
+      "href",
+      "https://openai.com",
+    );
+
+    rerender(
+      <MarkdownTextRenderer streaming highlightCode={false}>
+        {"```ts\nconst value = 1;"}
+      </MarkdownTextRenderer>,
+    );
+    expect(screen.getByText("const value = 1;")).toBeInTheDocument();
+  });
+
+  it("preserves semantic emphasis without leaking parser metadata into the DOM", () => {
+    render(
+      <MarkdownTextRenderer>
+        {"**Important** and *careful* with [links](https://example.com)."}
+      </MarkdownTextRenderer>,
+    );
+
+    expect(screen.getByText("Important").tagName).toBe("STRONG");
+    expect(screen.getByText("careful").tagName).toBe("EM");
+    expect(screen.getByRole("link", { name: "links" })).not.toHaveAttribute("node");
+  });
+
+  it("adds line numbers to multiline fenced code without changing inline code", () => {
+    render(
+      <MarkdownTextRenderer highlightCode={false}>
+        {"```ts\nconst one = 1;\nconst two = 2;\n```\n\nUse `one` next."}
+      </MarkdownTextRenderer>,
+    );
+
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("one").tagName).toBe("CODE");
   });
 
   it("keeps dollar amounts from being parsed as inline math", () => {

webui/src/tests/markdown-text.test.tsx

@@ -1,18 +1,29 @@
+import { useEffect } from "react";
 import { act, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 import { MarkdownText } from "@/components/MarkdownText";
 
 const rendererSpy = vi.hoisted(() => vi.fn());
+const rendererMountSpy = vi.hoisted(() => vi.fn());
+const rendererControl = vi.hoisted(() => ({ failStreaming: false }));
 
 vi.mock("@/components/MarkdownTextRenderer", () => ({
-  default: ({
+  default: function MockMarkdownTextRenderer({
     children,
     highlightCode,
+    streaming,
   }: {
     children: string;
     highlightCode?: boolean;
-  }) => {
+    streaming?: boolean;
+  }) {
+    useEffect(() => {
+      rendererMountSpy();
+    }, []);
+    if (streaming && rendererControl.failStreaming) {
+      throw new Error("incomplete streaming markdown");
+    }
     rendererSpy({ children, highlightCode });
     return (
       <div
@@ -26,61 +37,76 @@ vi.mock("@/components/MarkdownTextRenderer", () => ({
 }));
 
 describe("MarkdownText", () => {
-  it("throttles streaming markdown commits and flushes before final highlighting", async () => {
-    rendererSpy.mockClear();
-    vi.useFakeTimers();
+  it("recovers markdown rendering when a failed streaming response completes", async () => {
+    rendererControl.failStreaming = true;
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    const source = "## Final answer\n\nThis is **important**.";
+
     try {
-      const { rerender } = render(
-        <MarkdownText streaming>hello</MarkdownText>,
+      const { container, rerender } = render(
+        <MarkdownText streaming>{source}</MarkdownText>,
       );
 
       await act(async () => {
         await Promise.resolve();
         await Promise.resolve();
       });
+      expect(container.querySelector(".streaming-text-fallback")?.textContent).toBe(source);
 
-      expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
-      expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
-        "data-highlight-code",
-        "true",
-      );
-      expect(rendererSpy).toHaveBeenCalledTimes(1);
+      rendererControl.failStreaming = false;
+      rerender(<MarkdownText>{source}</MarkdownText>);
 
-      rerender(<MarkdownText streaming>hello world</MarkdownText>);
-      expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
-      expect(rendererSpy).toHaveBeenCalledTimes(1);
-
-      act(() => {
-        vi.advanceTimersByTime(79);
-      });
-      expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
-      expect(rendererSpy).toHaveBeenCalledTimes(1);
-
-      act(() => {
-        vi.advanceTimersByTime(1);
-      });
-      await act(async () => {
-        await Promise.resolve();
-      });
-
-      expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world");
-      expect(rendererSpy).toHaveBeenCalledTimes(2);
-
-      rerender(<MarkdownText streaming>hello world!!!</MarkdownText>);
-      expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world");
-
-      rerender(<MarkdownText>hello world!!!</MarkdownText>);
-      expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world!!!");
-      expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
-        "data-highlight-code",
-        "true",
-      );
+      expect(screen.getByTestId("markdown-renderer").textContent).toBe(source);
     } finally {
-      vi.useRealTimers();
+      rendererControl.failStreaming = false;
+      consoleError.mockRestore();
     }
   });
 
-  it("keeps very large streaming snippets plain until the final render", async () => {
+  it("forwards every provider update without an extra UI timer", async () => {
+    rendererSpy.mockClear();
+    const { rerender } = render(
+      <MarkdownText streaming>hello</MarkdownText>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
+    expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
+      "data-highlight-code",
+      "false",
+    );
+
+    rerender(<MarkdownText streaming>hello world</MarkdownText>);
+    expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world");
+
+    rerender(<MarkdownText>hello world!!!</MarkdownText>);
+    expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world!!!");
+    expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
+      "data-highlight-code",
+      "true",
+    );
+  });
+
+  it("keeps a healthy renderer mounted when streaming completes", async () => {
+    rendererMountSpy.mockClear();
+    const { rerender } = render(
+      <MarkdownText streaming>hello</MarkdownText>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    rerender(<MarkdownText>hello world</MarkdownText>);
+
+    expect(rendererMountSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("defers syntax highlighting until the final render", async () => {
     rendererSpy.mockClear();
     const largeCode = `\`\`\`ts\n${"const value = 1;\n".repeat(1_100)}\`\`\``;
 

webui/src/tests/mcp-activity-model.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+
+import { describeMcpActivity } from "@/components/thread/activity/mcp-activity-model";
+
+describe("describeMcpActivity", () => {
+  it.each([
+    ["browser_navigate", { url: "https://example.com/docs" }, "done", "Opened", "example.com/docs"],
+    ["browser_click", { element: "Submit" }, "running", "Clicking", "Submit"],
+    ["browser_snapshot", {}, "done", "Inspected page", undefined],
+    ["browser_screenshot", {}, "done", "Captured screenshot", undefined],
+    ["browser_press_key", { key: "Enter" }, "error", "Could not press", "Enter"],
+  ] as const)("turns %s into user-facing activity copy", (tool, args, status, action, target) => {
+    expect(describeMcpActivity(tool, args, status)).toEqual({ action, target });
+  });
+
+  it("does not expose entered text in the activity timeline", () => {
+    expect(describeMcpActivity(
+      "browser_fill",
+      { element: "Password", text: "not-for-the-timeline" },
+      "done",
+    )).toEqual({ action: "Entered text", target: "in Password" });
+  });
+
+  it("drops URL credentials and query parameters from browser activity", () => {
+    expect(describeMcpActivity(
+      "browser_navigate",
+      { url: "https://user:password@example.com/docs?token=private#section" },
+      "done",
+    )).toEqual({ action: "Opened", target: "example.com/docs" });
+  });
+
+  it("humanizes unknown tool names instead of exposing function syntax", () => {
+    expect(describeMcpActivity("browser_export_report", {}, "done")).toEqual({
+      action: "Export report completed",
+    });
+  });
+});

webui/src/tests/message-bubble.test.tsx

@@ -511,13 +511,13 @@ describe("MessageBubble", () => {
     const video = screen.getByLabelText(/video attachment/i);
     expect(video.tagName).toBe("VIDEO");
     expect(video).toHaveAttribute("src", "/api/media/sig/payload");
-    expect(video).toHaveAttribute("preload", "auto");
+    expect(video).toHaveAttribute("preload", "metadata");
     expect(container.querySelector("video[controls]")).toBeInTheDocument();
     expect(screen.queryByText("Preview")).not.toBeInTheDocument();
     expect(screen.queryByText("Code")).not.toBeInTheDocument();
   });
 
-  it("auto-expands the reasoning trace while streaming with a shimmer header", () => {
+  it("renders streaming reasoning as one compact activity line", () => {
     const message: UIMessage = {
       id: "a-reasoning-streaming",
       role: "assistant",
@@ -529,15 +529,19 @@ describe("MessageBubble", () => {
 
     const { container } = render(<MessageBubble message={message} />);
 
-    expect(screen.getByText("Thinking…")).toBeInTheDocument();
-    expect(screen.getByText(/Step 1: parse intent\./)).toBeInTheDocument();
+    const preview = screen.getByText("Step 1: parse intent. Step 2: compute.");
+    expect(preview).toBeInTheDocument();
     expect(container.querySelector(".reasoning-sheen-stripe")).not.toBeInTheDocument();
-    expect(screen.getByText("Thinking…")).toHaveClass("streaming-text-sheen");
-    expect(screen.getByText("Thinking…")).toHaveAttribute("data-sheen-text", "Thinking…");
-    expect(screen.getByRole("button", { name: /thinking/i }).parentElement).not.toHaveClass("mb-2");
+    expect(preview).toHaveClass("streaming-text-sheen");
+    expect(preview).toHaveAttribute(
+      "data-sheen-text",
+      "Step 1: parse intent. Step 2: compute.",
+    );
+    expect(screen.queryByText("Thinking…")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /thinking/i })).not.toBeInTheDocument();
   });
 
-  it("collapses the reasoning section by default once streaming ends", () => {
+  it("keeps completed reasoning on one line above the answer", () => {
     const message: UIMessage = {
       id: "a-reasoning-done",
       role: "assistant",
@@ -549,17 +553,15 @@ describe("MessageBubble", () => {
 
     render(<MessageBubble message={message} />);
 
-    expect(screen.getByText("Thinking")).toBeInTheDocument();
+    const preview = screen.getByText("hidden until expanded");
+    expect(preview).toBeInTheDocument();
     expect(screen.getByText("The answer is 42.")).toBeInTheDocument();
-    expect(screen.queryByText("hidden until expanded")).not.toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /thinking/i }).parentElement).toHaveClass("mb-2");
-
-    fireEvent.click(screen.getByRole("button", { name: /thinking/i }));
-    expect(screen.getByText("hidden until expanded")).toBeInTheDocument();
+    expect(preview.closest('[data-testid="activity-step"]')).toHaveClass("mb-2");
+    expect(screen.queryByText("Thinking")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /thinking/i })).not.toBeInTheDocument();
   });
 
-  it("renders reasoning body as markdown so headings are not left as raw ###", async () => {
-    await import("@/components/MarkdownTextRenderer");
+  it("compacts reasoning markdown into plain single-line text", () => {
     const message: UIMessage = {
       id: "a-reasoning-md",
       role: "assistant",
@@ -570,13 +572,10 @@ describe("MessageBubble", () => {
     };
 
     const { container } = render(<MessageBubble message={message} />);
-    fireEvent.click(screen.getByRole("button", { name: /thinking/i }));
 
-    await waitFor(() => {
-      expect(container.querySelector("h3")?.textContent).toBe("Section title");
-    });
+    expect(screen.getByText("Section title Body line.")).toBeInTheDocument();
     expect(container.textContent).not.toContain("###");
-    expect(screen.getByText("Body line.")).toBeInTheDocument();
+    expect(container.querySelector("h3")).not.toBeInTheDocument();
   });
 
   it("renders inline file paths as compact file references", async () => {

webui/src/tests/nanobot-client.test.ts

@@ -528,6 +528,28 @@ describe("NanobotClient", () => {
     });
   });
 
+  it("sends selected assistant text as separate quoted context", () => {
+    const client = new NanobotClient({
+      url: "ws://test",
+      reconnect: false,
+      socketFactory: (url) => new FakeSocket(url) as unknown as WebSocket,
+    });
+    client.connect();
+    lastSocket().fakeOpen();
+
+    client.sendMessage("chat-x", "What does this mean?", undefined, {
+      quotedContext: "  selected answer excerpt  ",
+    });
+
+    expect(JSON.parse(lastSocket().sent.at(-1) as string)).toEqual({
+      type: "message",
+      chat_id: "chat-x",
+      content: "What does this mean?",
+      quoted_context: "selected answer excerpt",
+      webui: true,
+    });
+  });
+
   it("includes CLI app attachments in outbound messages", () => {
     const client = new NanobotClient({
       url: "ws://test",

webui/src/tests/provider-brand.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vitest";
 
-import { faviconUrls, logoFallbackUrls, providerBrand } from "@/lib/provider-brand";
+import {
+  browserSafeFaviconUrls,
+  faviconUrls,
+  isGenericRepositoryLogoUrl,
+  logoFallbackUrls,
+  providerBrand,
+} from "@/lib/provider-brand";
 
 describe("provider brand logos", () => {
   it("uses multiple favicon sources before falling back to initials", () => {
@@ -11,6 +17,15 @@ describe("provider brand logos", () => {
     ]);
   });
 
+  it("uses cross-origin-safe favicon sources first for arbitrary web pages", () => {
+    expect(browserSafeFaviconUrls("openai.com")).toEqual([
+      "https://favicon.im/openai.com?larger=true",
+      "https://www.google.com/s2/favicons?domain=openai.com&sz=64",
+      "https://icons.duckduckgo.com/ip3/openai.com.ico",
+      "https://openai.com/favicon.ico",
+    ]);
+  });
+
   it("keeps explicit Google favicon URLs first before trying fallbacks", () => {
     expect(logoFallbackUrls("https://www.google.com/s2/favicons?domain=browserbase.com&sz=64")).toEqual([
       "https://www.google.com/s2/favicons?domain=browserbase.com&sz=64",
@@ -28,6 +43,17 @@ describe("provider brand logos", () => {
     ]);
   });
 
+  it("distinguishes repository host favicons from product identities", () => {
+    expect(
+      isGenericRepositoryLogoUrl(
+        "https://www.google.com/s2/favicons?domain=github.com/HKUDS/CLI-Anything&sz=64",
+      ),
+    ).toBe(true);
+    expect(isGenericRepositoryLogoUrl("https://github.com/favicon.ico")).toBe(true);
+    expect(isGenericRepositoryLogoUrl("https://raw.githubusercontent.com/org/repo/logo.svg")).toBe(false);
+    expect(isGenericRepositoryLogoUrl("https://blender.org/favicon.ico")).toBe(false);
+  });
+
   it("keeps Zhipu on the current Z.ai brand domain", () => {
     expect(providerBrand("zhipu")?.logoUrls[0]).toBe("https://z-cdn.chatglm.cn/z-ai/static/logo.svg");
     expect(providerBrand("zhipu")?.logoUrls).toContain("https://www.google.com/s2/favicons?domain=z.ai&sz=64");

webui/src/tests/settings-view.test.tsx

@@ -485,7 +485,10 @@ describe("SettingsView Apps catalog", () => {
       const url = String(input);
       if (url === "/api/settings") return jsonResponse(settingsPayload());
       if (url === "/api/settings/cli-apps") {
-        return jsonResponse({ apps: [], installed_count: 0 });
+        return jsonResponse({
+          apps: [{ ...installedAnyGen, installed: false, status: "available" }],
+          installed_count: 0,
+        });
       }
       if (url === "/api/settings/mcp-presets") {
         return jsonResponse({ presets: [], installed_count: 0 });
@@ -514,11 +517,12 @@ describe("SettingsView Apps catalog", () => {
     renderSettingsView({ initialSection: "apps" });
 
     expect(await screen.findByText("Add tools to nanobot, then @ them in chat.")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Ready" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Apps" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Ready" })).toHaveAttribute("aria-pressed", "false");
+    expect(screen.getByRole("button", { name: "Apps" })).toHaveAttribute("aria-pressed", "true");
     expect(screen.getByRole("button", { name: "Integrations" })).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Plugins" })).not.toBeInTheDocument();
     expect(screen.queryByText("Api")).not.toBeInTheDocument();
+    expect(screen.getByText("AnyGen")).toBeInTheDocument();
     expect(screen.getByText("0 ready")).toBeInTheDocument();
   });
 

webui/src/tests/thread-composer.test.tsx

@@ -292,6 +292,51 @@ function ascii(bytes: Uint8Array, offset: number, length: number): string {
 }
 
 describe("ThreadComposer", () => {
+  it("focuses and sends a removable quoted answer excerpt", async () => {
+    const onSend = vi.fn();
+    const onQuotedContextChange = vi.fn();
+    render(
+      <ThreadComposer
+        onSend={onSend}
+        placeholder="Type your message..."
+        quotedContext="selected answer excerpt"
+        focusRequest={1}
+        onQuotedContextChange={onQuotedContextChange}
+      />,
+    );
+
+    const input = screen.getByLabelText("Message input");
+    await waitFor(() => expect(input).toHaveFocus());
+    expect(screen.getByLabelText("Quoted context")).toHaveTextContent("selected answer excerpt");
+
+    fireEvent.change(input, { target: { value: "What does this mean?" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send message" }));
+
+    expect(onSend).toHaveBeenCalledWith("What does this mean?", undefined, {
+      quotedContext: "selected answer excerpt",
+    });
+    expect(onQuotedContextChange).toHaveBeenCalledWith(null);
+  });
+
+  it("removes quoted context without clearing the draft", () => {
+    const onQuotedContextChange = vi.fn();
+    render(
+      <ThreadComposer
+        onSend={vi.fn()}
+        placeholder="Type your message..."
+        quotedContext="selected answer excerpt"
+        onQuotedContextChange={onQuotedContextChange}
+      />,
+    );
+
+    const input = screen.getByLabelText("Message input");
+    fireEvent.change(input, { target: { value: "keep this draft" } });
+    fireEvent.click(screen.getByRole("button", { name: "Remove quoted context" }));
+
+    expect(onQuotedContextChange).toHaveBeenCalledWith(null);
+    expect(input).toHaveValue("keep this draft");
+  });
+
   it("renders a readonly hero model composer when provided", () => {
     render(
       <ThreadComposer
@@ -1633,7 +1678,11 @@ describe("ThreadComposer", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "Guide" }));
 
-    expect(onSend).toHaveBeenCalledWith("keep the UI minimal");
+    expect(onSend).toHaveBeenCalledWith(
+      "keep the UI minimal",
+      undefined,
+      { continueActiveTurn: true },
+    );
     expect(screen.queryByText("keep the UI minimal")).not.toBeInTheDocument();
   });
 
@@ -1663,7 +1712,11 @@ describe("ThreadComposer", () => {
 
     fireEvent.keyDown(input, { key: "Enter" });
 
-    expect(onSend).toHaveBeenCalledWith("send this guidance now");
+    expect(onSend).toHaveBeenCalledWith(
+      "send this guidance now",
+      undefined,
+      { continueActiveTurn: true },
+    );
     expect(onSend).toHaveBeenCalledTimes(1);
     expect(screen.queryByText("send this guidance now")).not.toBeInTheDocument();
   });
@@ -1783,7 +1836,11 @@ describe("ThreadComposer", () => {
     fireEvent.keyDown(input, { key: "Enter" });
     fireEvent.keyDown(input, { key: "Enter" });
 
-    expect(onSend).toHaveBeenCalledWith("guide this one now");
+    expect(onSend).toHaveBeenCalledWith(
+      "guide this one now",
+      undefined,
+      { continueActiveTurn: true },
+    );
     expect(onSend).toHaveBeenCalledTimes(1);
     expect(screen.getByText("older guidance")).toBeInTheDocument();
     expect(screen.queryByText("guide this one now")).not.toBeInTheDocument();
@@ -2165,7 +2222,11 @@ describe("ThreadComposer", () => {
     fireEvent.keyDown(screen.getByLabelText("Message input"), { key: "Enter" });
     expect(onSend).not.toHaveBeenCalled();
     fireEvent.click(screen.getByRole("button", { name: "Guide" }));
-    expect(onSend).toHaveBeenCalledWith("remember this edited follow-up");
+    expect(onSend).toHaveBeenCalledWith(
+      "remember this edited follow-up",
+      undefined,
+      { continueActiveTurn: true },
+    );
 
     remount.unmount();
     render(

webui/src/tests/thread-messages.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import {
@@ -10,10 +10,58 @@ import {
 import type { UIMessage } from "@/lib/types";
 
 afterEach(() => {
+  vi.restoreAllMocks();
   vi.useRealTimers();
 });
 
 describe("ThreadMessages", () => {
+  it("offers a follow-up action for text selected within one completed answer", async () => {
+    const onQuoteSelection = vi.fn();
+    render(
+      <ThreadMessages
+        messages={[{
+          id: "a1",
+          role: "assistant",
+          content: "The selected answer excerpt",
+          createdAt: 1,
+        }]}
+        isStreaming={false}
+        onQuoteSelection={onQuoteSelection}
+      />,
+    );
+
+    const textNode = screen.getByText("The selected answer excerpt").firstChild!;
+    const range = document.createRange();
+    range.setStart(textNode, 4);
+    range.setEnd(textNode, 19);
+    vi.spyOn(range, "getBoundingClientRect").mockReturnValue({
+      left: 100,
+      right: 240,
+      top: 100,
+      bottom: 120,
+      width: 140,
+      height: 20,
+      x: 100,
+      y: 100,
+      toJSON: () => ({}),
+    });
+    const removeAllRanges = vi.fn();
+    vi.spyOn(window, "getSelection").mockReturnValue({
+      isCollapsed: false,
+      rangeCount: 1,
+      getRangeAt: () => range,
+      toString: () => "selected answer",
+      removeAllRanges,
+    } as unknown as Selection);
+
+    document.dispatchEvent(new Event("selectionchange"));
+    const action = await screen.findByRole("button", { name: "Ask about this" });
+    fireEvent.click(action);
+
+    await waitFor(() => expect(onQuoteSelection).toHaveBeenCalledWith("selected answer"));
+    expect(removeAllRanges).toHaveBeenCalled();
+  });
+
   it("groups consecutive reasoning and tool rows into one timeline before the answer", () => {
     const messages: UIMessage[] = [
       {

webui/src/tests/thread-shell.test.tsx

@@ -2,6 +2,7 @@ import { act, fireEvent, render, screen, waitFor, within } from "@testing-librar
 import type { ReactNode } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+import { preloadMarkdownText } from "@/components/MarkdownText";
 import { ThreadShell } from "@/components/thread/ThreadShell";
 import { CLI_APPS_CHANGED_EVENT } from "@/lib/cli-app-events";
 import { ClientProvider } from "@/providers/ClientProvider";
@@ -232,6 +233,7 @@ describe("ThreadShell", () => {
   });
 
   it("keeps inferred file paths non-interactive when the availability probe fails", async () => {
+    await preloadMarkdownText();
     const client = makeClient();
     let resolveProbe!: (value: Response) => void;
     const probe = new Promise<Response>((resolve) => {

webui/src/tests/tool-traces.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  canonicalToolTrace,
+  mergeUniqueToolTraceLines,
+} from "@/lib/tool-traces";
+
+describe("tool trace identity", () => {
+  it("treats persisted and live JSON formatting as the same call", () => {
+    const persisted = 'web_search({"query": "site:linkedin.com/company Evomap startup", "count": 10})';
+    const live = 'web_search({"query":"site:linkedin.com/company Evomap startup","count":10})';
+
+    expect(canonicalToolTrace(persisted)).toBe(canonicalToolTrace(live));
+    expect(mergeUniqueToolTraceLines([persisted], [live])).toEqual({
+      traces: [persisted],
+      added: false,
+    });
+  });
+
+  it("keeps genuinely different calls separate", () => {
+    const first = 'web_search({"query":"nanobot"})';
+    const second = 'web_search({"query":"nanobot cloud"})';
+
+    expect(mergeUniqueToolTraceLines([first], [second])).toEqual({
+      traces: [first, second],
+      added: true,
+    });
+  });
+});

webui/src/tests/trace-activity-model.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import { describeTraceLine } from "@/components/thread/activity/trace-activity-model";
+import type { GenericToolStatus } from "@/components/thread/activity/generic-tool-model";
+
+function describeTrace(line: string, status: GenericToolStatus = "done") {
+  return describeTraceLine(line, status);
+}
+
+describe("trace activity semantics", () => {
+  it.each([
+    ['web_search({"query":"nanobot latest release"})', "done", "Searched nanobot latest release", ""],
+    ['web_fetch({"url":"https://example.com/docs?token=private"})', "done", "Read", "example.com/docs"],
+    ['read_file({"path":"/Users/alice/project/README.md"})', "done", "Read", "~/project/README.md"],
+    ['exec({"command":"date +%Y-%m-%d"})', "done", "Checked current time", ""],
+    ['exec_command({"cmd":"API_KEY=secret npm test"})', "running", "Running command", "API_KEY=•••• npm test"],
+    ['write_file({"path":"/home/alice/project/output.txt"})', "done", "Wrote file", "~/project/output.txt"],
+    ['apply_patch({"file_path":"src/app.tsx","patch":"private"})', "error", "Could not edit file", "src/app.tsx"],
+    ['third_party_sync({"token":"secret","payload":"private"})', "done", "Completed Third party sync", ""],
+    ["Finished collecting results", "done", "Completed step", "Finished collecting results"],
+  ] as const)("describes %s as one safe activity line", (line, status, label, detail) => {
+    const result = describeTrace(line, status);
+    expect(result).toMatchObject({ label, detail });
+    expect(`${result.label} ${result.detail}`).not.toMatch(/[{}]|private|\/Users\/alice|\/home\/alice/);
+  });
+
+  it.each([
+    ["running", "Searching status test"],
+    ["done", "Searched status test"],
+    ["error", "Could not search status test"],
+  ] as const)("uses status-aware search copy for %s", (status, label) => {
+    expect(describeTrace('web_search({"query":"status test"})', status).label).toBe(label);
+  });
+
+  it("never exposes URL credentials, query secrets, or private-network links", () => {
+    const publicResult = describeTrace(
+      'web_fetch({"url":"https://user:password@example.com/docs?api_key=secret#section"})',
+    );
+    expect(publicResult).toMatchObject({ detail: "example.com/docs", host: "example.com" });
+    expect(JSON.stringify(publicResult)).not.toMatch(/password|api_key|secret/);
+
+    const privateResult = describeTrace('web_fetch({"url":"http://127.0.0.1:8765/private"})');
+    expect(privateResult.url).toBeUndefined();
+    expect(privateResult.detail).not.toContain("127.0.0.1");
+  });
+
+  it("summarizes multi-line commands without exposing every script line", () => {
+    const result = describeTrace(
+      'exec({"command":"npm test\\necho second-secret-line\\necho third-line"})',
+    );
+    expect(result).toMatchObject({
+      label: "Ran command",
+      detail: "npm test · script, 3 lines",
+    });
+    expect(result.detail).not.toContain("second-secret-line");
+  });
+});

webui/src/tests/useLogoFallback.test.tsx

@@ -7,15 +7,13 @@ import {
 } from "@/hooks/useLogoFallback";
 
 function TestLogo({ urls }: { urls: string[] }) {
-  const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(urls);
+  const { logoUrl, logoLoaded, onLogoError, onLogoLoad } = useLogoFallback(urls);
   if (!logoUrl) return <span>No logo</span>;
   return (
-    <img
-      src={logoUrl}
-      alt="Logo"
-      onLoad={onLogoLoad}
-      onError={onLogoError}
-    />
+    <>
+      <span>{logoLoaded ? "Loaded" : "Loading"}</span>
+      <img src={logoUrl} alt="Logo" onLoad={onLogoLoad} onError={onLogoError} />
+    </>
   );
 }
 
@@ -32,15 +30,18 @@ describe("useLogoFallback", () => {
     const first = render(<TestLogo urls={urls} />);
 
     expect(screen.getByRole("img", { name: "Logo" })).toHaveAttribute("src", urls[0]);
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
     fireEvent.error(screen.getByRole("img", { name: "Logo" }));
     expect(screen.getByRole("img", { name: "Logo" })).toHaveAttribute("src", urls[1]);
 
     fireEvent.load(screen.getByRole("img", { name: "Logo" }));
+    expect(screen.getByText("Loaded")).toBeInTheDocument();
     first.unmount();
     render(<TestLogo urls={urls} />);
 
     expect(screen.getByRole("img", { name: "Logo" })).toHaveAttribute("src", urls[1]);
+    expect(screen.getByText("Loaded")).toBeInTheDocument();
   });
 
   it("returns no logo once every candidate failed", () => {

webui/src/tests/useNanobotStream.test.tsx

@@ -131,6 +131,55 @@ describe("useNanobotStream", () => {
     requestFrame.mockRestore();
   });
 
+  it("coalesces hidden-tab deltas without scheduling paint frames", () => {
+    vi.useFakeTimers();
+    const visibilityDescriptor = Object.getOwnPropertyDescriptor(document, "visibilityState");
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "hidden",
+    });
+    const requestFrame = vi.spyOn(window, "requestAnimationFrame");
+
+    try {
+      const fake = fakeClient();
+      const { result } = renderHook(
+        () => useNanobotStream("chat-background", EMPTY_MESSAGES),
+        { wrapper: wrap(fake.client) },
+      );
+
+      act(() => {
+        fake.emit("chat-background", {
+          event: "delta",
+          chat_id: "chat-background",
+          text: "Quiet",
+        });
+        fake.emit("chat-background", {
+          event: "delta",
+          chat_id: "chat-background",
+          text: " background",
+        });
+      });
+
+      expect(requestFrame).not.toHaveBeenCalled();
+      expect(result.current.messages).toHaveLength(0);
+
+      act(() => vi.advanceTimersByTime(1_000));
+
+      expect(result.current.messages[0]).toMatchObject({
+        content: "Quiet background",
+        isStreaming: true,
+      });
+    } finally {
+      requestFrame.mockRestore();
+      if (visibilityDescriptor) {
+        Object.defineProperty(document, "visibilityState", visibilityDescriptor);
+      } else {
+        delete (document as Document & { visibilityState?: DocumentVisibilityState }).visibilityState;
+      }
+      vi.useRealTimers();
+    }
+  });
+
   it("flushes pending delta text before turn_end finalizes the turn", () => {
     const fake = fakeClient();
     const { result } = renderHook(() => useNanobotStream("chat-flush", EMPTY_MESSAGES), {
@@ -1832,6 +1881,88 @@ describe("useNanobotStream", () => {
     }
   });
 
+  it("keeps guided output in place while the active turn resumes", async () => {
+    const fake = fakeClient();
+    const { result } = renderHook(() => useNanobotStream("chat-guide", EMPTY_MESSAGES), {
+      wrapper: wrap(fake.client),
+    });
+
+    act(() => {
+      result.current.send("research this");
+    });
+    const activeTurnId = fake.client.sendMessage.mock.calls.at(-1)![3]?.turnId;
+
+    act(() => {
+      fake.emit("chat-guide", {
+        event: "delta",
+        chat_id: "chat-guide",
+        text: "Initial findings",
+        turn_id: activeTurnId,
+      });
+    });
+    await flushStreamFrame();
+
+    act(() => {
+      result.current.send("focus on primary sources", undefined, {
+        continueActiveTurn: true,
+      });
+    });
+
+    const guideCall = fake.client.sendMessage.mock.calls.at(-1)!;
+    expect(guideCall[3]).not.toHaveProperty("continueActiveTurn");
+    expect(result.current.messages.map((message) => message.content)).toEqual([
+      "research this",
+      "Initial findings",
+      "focus on primary sources",
+    ]);
+
+    act(() => {
+      fake.emit("chat-guide", {
+        event: "stream_end",
+        chat_id: "chat-guide",
+        text: "Initial findings",
+        resuming: true,
+        turn_id: activeTurnId,
+      });
+    });
+
+    expect(result.current.isStreaming).toBe(true);
+    expect(result.current.messages).toHaveLength(3);
+    expect(result.current.messages[1]).toMatchObject({
+      content: "Initial findings",
+      isStreaming: false,
+    });
+
+    act(() => {
+      fake.emit("chat-guide", {
+        event: "delta",
+        chat_id: "chat-guide",
+        text: "Updated with primary sources",
+        turn_id: activeTurnId,
+      });
+    });
+    await flushStreamFrame();
+
+    expect(result.current.messages.map((message) => message.content)).toEqual([
+      "research this",
+      "Initial findings",
+      "focus on primary sources",
+      "Updated with primary sources",
+    ]);
+    expect(result.current.messages[3]).toMatchObject({ isStreaming: true });
+
+    act(() => {
+      fake.emit("chat-guide", {
+        event: "turn_end",
+        chat_id: "chat-guide",
+        turn_id: activeTurnId,
+      });
+    });
+
+    expect(result.current.isStreaming).toBe(false);
+    expect(result.current.messages.every((message) => !message.isStreaming)).toBe(true);
+  });
+
   it("keeps streaming alive across stream_end when tool activity follows", async () => {
     const fake = fakeClient();
     const onTurnEnd = vi.fn();

webui/src/tests/usePageVisibility.test.tsx

@@ -0,0 +1,35 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { usePageVisibility } from "@/hooks/usePageVisibility";
+
+describe("usePageVisibility", () => {
+  it("tracks visibility changes so background work can pause and resume", () => {
+    const original = Object.getOwnPropertyDescriptor(document, "visibilityState");
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "hidden",
+    });
+
+    const { result, unmount } = renderHook(usePageVisibility);
+    try {
+      expect(result.current).toBe(false);
+
+      act(() => {
+        Object.defineProperty(document, "visibilityState", {
+          configurable: true,
+          value: "visible",
+        });
+        document.dispatchEvent(new Event("visibilitychange"));
+      });
+      expect(result.current).toBe(true);
+    } finally {
+      unmount();
+      if (original) {
+        Object.defineProperty(document, "visibilityState", original);
+      } else {
+        delete (document as Document & { visibilityState?: DocumentVisibilityState }).visibilityState;
+      }
+    }
+  });
+});

webui/src/tests/vite-config.test.ts

@@ -15,6 +15,24 @@ describe("webuiManualChunk", () => {
     ).toBe("markdown-vendor");
   });
 
+  it("keeps Streamdown and its repair helper in the markdown chunk", () => {
+    expect(webuiManualChunk("/repo/node_modules/streamdown/dist/index.js")).toBe(
+      "markdown-vendor",
+    );
+    expect(webuiManualChunk("/repo/node_modules/remend/dist/index.js")).toBe(
+      "markdown-vendor",
+    );
+  });
+
+  it("leaves Streamdown's optional renderers as lazy chunks", () => {
+    expect(
+      webuiManualChunk("/repo/node_modules/streamdown/dist/mermaid-ABC.js"),
+    ).toBeUndefined();
+    expect(
+      webuiManualChunk("/repo/node_modules/streamdown/dist/highlighted-body-ABC.js"),
+    ).toBeUndefined();
+  });
+
   it("leaves language grammars as independently loaded chunks", () => {
     expect(webuiManualChunk("/repo/node_modules/refractor/lang/python.js")).toBeUndefined();
   });

webui/src/tests/web-url.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  formatCompactWebUrl,
+  parsePublicHttpUrl,
+  parseSafeActivityHttpUrl,
+} from "@/components/thread/activity/web-url";
+
+describe("activity web URLs", () => {
+  it("keeps public HTTP URLs and removes query noise from their label", () => {
+    const url = parsePublicHttpUrl("https://www.example.com/docs/?token=private#section");
+    expect(url).not.toBeNull();
+    expect(formatCompactWebUrl(url!)).toBe("example.com/docs");
+  });
+
+  it.each([
+    "http://localhost:3000",
+    "http://service.internal",
+    "http://printer.lan",
+    "http://127.0.0.1",
+    "http://10.0.0.1",
+    "http://169.254.169.254/latest/meta-data",
+    "http://172.16.0.1",
+    "http://192.168.1.1",
+    "http://[::1]",
+    "http://[::ffff:127.0.0.1]",
+    "https://user:password@example.com",
+  ])("rejects private or credential-bearing target %s", (value) => {
+    expect(parsePublicHttpUrl(value)).toBeNull();
+  });
+
+  it("normalizes credential-bearing public URLs for safe activity display", () => {
+    const url = parseSafeActivityHttpUrl(
+      "https://user:password@example.com/docs?access_token=private#section",
+    );
+    expect(url?.href).toBe("https://example.com/docs");
+    expect(formatCompactWebUrl(url!)).toBe("example.com/docs");
+  });
+});