feat(webui): render file edit activity

webui/src/components/FileReferenceChip.tsx

@@ -0,0 +1,220 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+type FileReferenceKind =
+  | "default"
+  | "css"
+  | "html"
+  | "json"
+  | "markdown"
+  | "notebook"
+  | "python"
+  | "react"
+  | "typescript";
+
+interface FileReferenceChipProps {
+  path: string;
+  display?: "name" | "path";
+  active?: boolean;
+  className?: string;
+  textClassName?: string;
+  testId?: string;
+}
+
+export function FileReferenceChip({
+  path,
+  display = "name",
+  active = false,
+  className,
+  textClassName,
+  testId = "inline-file-path",
+}: FileReferenceChipProps) {
+  const { name } = splitFilePath(path);
+  const kind = fileKindForPath(path);
+  const displayText = display === "path" ? path.replace(/\\/g, "/") : name;
+  return (
+    <TooltipProvider delayDuration={500} skipDelayDuration={100}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className={cn("not-prose inline-flex max-w-full align-[0.14em]", className)}
+          >
+            <span
+              data-testid={testId}
+              aria-label={path}
+              className={cn(
+                "inline-flex max-w-full items-center gap-1 font-medium leading-[1.1]",
+                "text-sky-600 transition-colors hover:text-sky-700",
+                "dark:text-sky-300 dark:hover:text-sky-200",
+              )}
+            >
+              <FileReferenceIcon kind={kind} />
+              <span
+                data-sheen-text={active ? displayText : undefined}
+                className={cn(
+                  "min-w-0 truncate",
+                  active && "streaming-text-sheen",
+                  textClassName,
+                )}
+              >
+                {displayText}
+              </span>
+            </span>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent
+          side="top"
+          align="center"
+          sideOffset={8}
+          collisionPadding={12}
+          className={cn(
+            "max-w-[min(38rem,calc(100vw-2rem))] rounded-[10px]",
+            "border-border/60 bg-popover/95 px-2.5 py-1.5",
+            "break-all font-mono text-[11px] leading-snug text-popover-foreground",
+            "shadow-lg backdrop-blur",
+          )}
+        >
+          {path}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export function isLikelyFilePath(value: string): boolean {
+  const raw = value.trim();
+  if (!raw || raw.includes("\n")) return false;
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(raw)) return false;
+  if (!/[\\/]/.test(raw) && !/^(dockerfile|makefile|readme|package-lock\.json)$/i.test(raw)) {
+    return false;
+  }
+  const normalized = raw.replace(/\\/g, "/");
+  const name = normalized.split("/").filter(Boolean).pop() ?? normalized;
+  if (!name || name === "." || name === "..") return false;
+  if (/^(dockerfile|makefile|readme|package-lock\.json)$/i.test(name)) return true;
+  return /\.[a-z0-9][a-z0-9_-]{0,12}$/i.test(name);
+}
+
+function splitFilePath(path: string): { directory: string; name: string } {
+  const normalized = path.replace(/\\/g, "/");
+  const slash = normalized.lastIndexOf("/");
+  if (slash < 0) return { directory: "", name: path };
+  return {
+    directory: normalized.slice(0, slash + 1),
+    name: normalized.slice(slash + 1) || normalized,
+  };
+}
+
+function fileKindForPath(path: string): FileReferenceKind {
+  const normalized = path.toLowerCase();
+  const name = normalized.split(/[\\/]/).pop() ?? normalized;
+  const ext = name.includes(".") ? name.split(".").pop() ?? "" : "";
+  if (name === "dockerfile") {
+    return "default";
+  }
+  switch (ext) {
+    case "py":
+    case "pyi":
+      return "python";
+    case "jsx":
+    case "tsx":
+      return "react";
+    case "ts":
+      return "typescript";
+    case "html":
+    case "htm":
+      return "html";
+    case "css":
+    case "scss":
+    case "sass":
+      return "css";
+    case "json":
+    case "jsonl":
+      return "json";
+    case "md":
+    case "mdx":
+      return "markdown";
+    case "ipynb":
+      return "notebook";
+    default:
+      return "default";
+  }
+}
+
+function FileReferenceIcon({ kind }: { kind: FileReferenceKind }) {
+  if (kind === "react") {
+    return (
+      <svg
+        aria-hidden
+        className="h-[0.98em] w-[0.98em] shrink-0 text-sky-500 dark:text-sky-300"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="1.9" fill="currentColor" stroke="none" />
+        <ellipse cx="12" cy="12" rx="9" ry="3.7" />
+        <ellipse cx="12" cy="12" rx="9" ry="3.7" transform="rotate(60 12 12)" />
+        <ellipse cx="12" cy="12" rx="9" ry="3.7" transform="rotate(120 12 12)" />
+      </svg>
+    );
+  }
+  if (kind === "default") {
+    return (
+      <svg
+        aria-hidden
+        className="h-[0.98em] w-[0.98em] shrink-0 text-sky-500 dark:text-sky-300"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z" />
+        <path d="M14 2v5h5" />
+      </svg>
+    );
+  }
+  const label = fileKindLabel(kind);
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "inline-flex h-[1.05em] min-w-[1.05em] shrink-0 items-center justify-center",
+        "rounded-[4px] bg-sky-500/12 px-[0.22em] text-[0.58em] font-bold uppercase leading-none",
+        "text-sky-600 dark:bg-sky-400/15 dark:text-sky-300",
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function fileKindLabel(kind: FileReferenceKind): string {
+  switch (kind) {
+    case "css":
+      return "#";
+    case "html":
+      return "H";
+    case "json":
+      return "{}";
+    case "markdown":
+      return "M";
+    case "notebook":
+      return "N";
+    case "python":
+      return "PY";
+    case "typescript":
+      return "TS";
+    default:
+      return "";
+  }
+}

webui/src/components/thread/AgentActivityCluster.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { ChevronRight, Layers } from "lucide-react";
+import { AlertCircle, ChevronRight, Layers } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
+import { FileReferenceChip } from "@/components/FileReferenceChip";
 import { ReasoningBubble, StreamingLabelSheen, TraceGroup } from "@/components/MessageBubble";
 import { cn } from "@/lib/utils";
-import type { UIMessage } from "@/lib/types";
+import type { UIFileEdit, UIMessage } from "@/lib/types";
 
 /** Scrollport height for the Cursor-style “live trace” strip (tailwind spacing). */
 const CLUSTER_SCROLL_MAX_CLASS = "max-h-52";
@@ -20,7 +21,29 @@ export function isAgentActivityMember(m: UIMessage): boolean {
   return isReasoningOnlyAssistant(m) || m.kind === "trace";
 }
 
-function countActivity(messages: UIMessage[]): { reasoningSteps: number; toolCalls: number } {
+interface ActivityCounts {
+  reasoningSteps: number;
+  toolCalls: number;
+  fileCount: number;
+  added: number;
+  deleted: number;
+  hasEditingFiles: boolean;
+  hasFailedFiles: boolean;
+  primaryFilePath?: string;
+}
+
+interface FileEditSummary {
+  key: string;
+  path: string;
+  added: number;
+  deleted: number;
+  approximate: boolean;
+  binary: boolean;
+  status: UIFileEdit["status"];
+  error?: string;
+}
+
+function countActivity(messages: UIMessage[], fileEdits: FileEditSummary[]): ActivityCounts {
   let reasoningSteps = 0;
   let toolCalls = 0;
   for (const m of messages) {
@@ -30,10 +53,38 @@ function countActivity(messages: UIMessage[]): { reasoningSteps: number; toolCal
     }
     if (m.kind === "trace") {
       const lines = m.traces?.length ?? (m.content.trim() ? 1 : 0);
-      toolCalls += Math.max(lines, 1);
+      toolCalls += lines;
     }
   }
-  return { reasoningSteps, toolCalls };
+  let added = 0;
+  let deleted = 0;
+  let hasEditingFiles = false;
+  let failedFileCount = 0;
+  let primaryFilePath: string | undefined;
+  for (const edit of fileEdits) {
+    primaryFilePath = edit.path;
+    if (edit.status === "editing") {
+      hasEditingFiles = true;
+    }
+    if (edit.status === "error") {
+      failedFileCount += 1;
+    }
+    if (edit.status === "error" || edit.binary) {
+      continue;
+    }
+    added += edit.added;
+    deleted += edit.deleted;
+  }
+  return {
+    reasoningSteps,
+    toolCalls,
+    fileCount: fileEdits.length,
+    added,
+    deleted,
+    hasEditingFiles,
+    hasFailedFiles: fileEdits.length > 0 && failedFileCount === fileEdits.length,
+    primaryFilePath,
+  };
 }
 
 interface AgentActivityClusterProps {
@@ -53,7 +104,20 @@ export function AgentActivityCluster({
   hasBodyBelow,
 }: AgentActivityClusterProps) {
   const { t } = useTranslation();
-  const { reasoningSteps, toolCalls } = countActivity(messages);
+  const fileEdits = useMemo(
+    () => summarizeFileEdits(collectFileEdits(messages), isTurnStreaming),
+    [messages, isTurnStreaming],
+  );
+  const {
+    reasoningSteps,
+    toolCalls,
+    fileCount,
+    added,
+    deleted,
+    hasEditingFiles,
+    hasFailedFiles,
+    primaryFilePath,
+  } = countActivity(messages, fileEdits);
 
   const [userToggledOuter, setUserToggledOuter] = useState(false);
   const [outerOpenLocal, setOuterOpenLocal] = useState(false);
@@ -64,16 +128,32 @@ export function AgentActivityCluster({
   /** Collapsed by default during “Working…” and after the turn; user expands to inspect traces. */
   const outerExpanded = userToggledOuter ? outerOpenLocal : false;
 
-  const headerBusy = isTurnStreaming;
+  const hasLiveEditingFiles = isTurnStreaming && hasEditingFiles;
+  const headerBusy = fileCount > 0 ? hasEditingFiles : isTurnStreaming;
 
-  const summary =
+  const fileActivitySummary = fileCount > 0
-    isTurnStreaming
+    ? fileCount === 1 && primaryFilePath
+      ? t(fileActivitySummaryKey(hasLiveEditingFiles, hasFailedFiles), {
+          file: shortFileName(primaryFilePath),
+          defaultValue: `${fileActivityVerb(hasLiveEditingFiles, hasFailedFiles)} {{file}}`,
+        })
+      : t(fileActivityManySummaryKey(hasLiveEditingFiles, hasFailedFiles), {
+          count: fileCount,
+          defaultValue: `${fileActivityVerb(hasLiveEditingFiles, hasFailedFiles)} {{count}} files`,
+        })
+    : "";
+
+  const summary = fileCount > 0
+    ? fileActivitySummary
+    : isTurnStreaming
       ? reasoningSteps > 0
         ? t("message.agentActivityLiveSummary", {
             reasoning: reasoningSteps,
             tools: toolCalls,
             defaultValue: "Working… · {{reasoning}} steps · {{tools}} tool calls",
           })
+        : toolCalls === 0 && fileCount > 0
+          ? t("message.agentActivityLiveFilesOnly", { defaultValue: "Working…" })
         : t("message.agentActivityLiveToolsOnly", {
             tools: toolCalls,
             defaultValue: "Working… · {{tools}} tool calls",
@@ -84,6 +164,8 @@ export function AgentActivityCluster({
             tools: toolCalls,
             defaultValue: "{{reasoning}} steps · {{tools}} tool calls",
           })
+        : toolCalls === 0 && fileCount > 0
+          ? t("message.agentActivityFilesOnly", { defaultValue: "File changes" })
         : t("message.agentActivityToolsOnly", {
             tools: toolCalls,
             defaultValue: "{{tools}} tool calls",
@@ -161,12 +243,19 @@ export function AgentActivityCluster({
         aria-expanded={outerExpanded}
       >
         <Layers className="h-3.5 w-3.5 shrink-0" aria-hidden />
-        <StreamingLabelSheen
+        <span className="flex min-w-0 flex-1 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-left">
-          active={headerBusy}
+          <StreamingLabelSheen
-          className="min-w-0 flex-1 text-left"
+            active={headerBusy}
-        >
+            className="min-w-0"
-          {summary}
+          >
-        </StreamingLabelSheen>
+            {summary}
+          </StreamingLabelSheen>
+          {fileCount > 0 && (
+            <span className="inline-flex min-w-0 items-center gap-1 text-muted-foreground/85">
+              <DiffPair added={added} deleted={deleted} />
+            </span>
+          )}
+        </span>
         <ChevronRight
           aria-hidden
           className={cn(
@@ -198,17 +287,23 @@ export function AgentActivityCluster({
                     <ReasoningBubble
                       key={m.id}
                       text={m.reasoning ?? ""}
-                      streaming={!!m.reasoningStreaming}
+                      streaming={isTurnStreaming && !!m.reasoningStreaming}
                       hasBodyBelow={false}
                       embeddedInCluster
                     />
                   );
                 }
                 if (m.kind === "trace") {
-                  return <TraceGroup key={m.id} message={m} animClass="" />;
+                  const hasTraceLines = (m.traces?.length ?? 0) > 0 || m.content.trim().length > 0;
+                  return hasTraceLines ? (
+                    <div key={m.id} className="flex flex-col gap-1">
+                      <TraceGroup message={m} animClass="" />
+                    </div>
+                  ) : null;
                 }
                 return null;
               })}
+              {fileEdits.length ? <FileEditGroup edits={fileEdits} /> : null}
             </div>
           </div>
         </div>
@@ -216,3 +311,231 @@ export function AgentActivityCluster({
     </div>
   );
 }
+
+function shortFileName(path: string): string {
+  return path.split(/[\\/]/).pop() || path;
+}
+
+function fileActivityVerb(editing: boolean, failed: boolean): string {
+  if (failed) return "Failed";
+  return editing ? "Editing" : "Edited";
+}
+
+function fileActivitySummaryKey(editing: boolean, failed: boolean): string {
+  if (failed) return "message.fileActivityFailedOne";
+  return editing ? "message.fileActivityEditingOne" : "message.fileActivityEditedOne";
+}
+
+function fileActivityManySummaryKey(editing: boolean, failed: boolean): string {
+  if (failed) return "message.fileActivityFailedMany";
+  return editing ? "message.fileActivityEditingMany" : "message.fileActivityEditedMany";
+}
+
+function fileEditCallKey(edit: UIFileEdit): string {
+  return `${edit.call_id}|${edit.tool}|${edit.path}`;
+}
+
+function collectFileEdits(messages: UIMessage[]): UIFileEdit[] {
+  const edits: UIFileEdit[] = [];
+  for (const message of messages) {
+    if (message.kind === "trace" && message.fileEdits?.length) {
+      edits.push(...message.fileEdits);
+    }
+  }
+  return edits;
+}
+
+function latestFileEditEvents(edits: UIFileEdit[]): UIFileEdit[] {
+  const order: string[] = [];
+  const byKey = new Map<string, UIFileEdit>();
+  for (const edit of edits) {
+    const key = fileEditCallKey(edit);
+    if (!byKey.has(key)) order.push(key);
+    byKey.set(key, edit);
+  }
+  return order.map((key) => byKey.get(key)).filter(Boolean) as UIFileEdit[];
+}
+
+function summarizeFileEdits(edits: UIFileEdit[], active: boolean): FileEditSummary[] {
+  interface MutableSummary {
+    key: string;
+    path: string;
+    added: number;
+    deleted: number;
+    approximate: boolean;
+    binary: boolean;
+    hasSuccessfulChange: boolean;
+    hasActiveEditing: boolean;
+    hasFailed: boolean;
+    error?: string;
+  }
+
+  const order: string[] = [];
+  const byPath = new Map<string, MutableSummary>();
+  for (const edit of latestFileEditEvents(edits)) {
+    const key = edit.path;
+    let summary = byPath.get(key);
+    if (!summary) {
+      summary = {
+        key,
+        path: edit.path,
+        added: 0,
+        deleted: 0,
+        approximate: false,
+        binary: false,
+        hasSuccessfulChange: false,
+        hasActiveEditing: false,
+        hasFailed: false,
+      };
+      byPath.set(key, summary);
+      order.push(key);
+    }
+
+    if (active && edit.status === "editing") {
+      summary.hasActiveEditing = true;
+      summary.binary = summary.binary || !!edit.binary;
+      summary.approximate = summary.approximate || !!edit.approximate;
+      if (!edit.binary) {
+        summary.added += edit.added;
+        summary.deleted += edit.deleted;
+      }
+      continue;
+    }
+
+    if (edit.status === "error") {
+      summary.hasFailed = true;
+      summary.error = edit.error ?? summary.error;
+      continue;
+    }
+
+    summary.hasSuccessfulChange = true;
+    summary.binary = summary.binary || !!edit.binary;
+    summary.approximate = active && (summary.approximate || !!edit.approximate);
+    if (!edit.binary) {
+      summary.added += edit.added;
+      summary.deleted += edit.deleted;
+    }
+  }
+
+  return order.map((key) => {
+    const summary = byPath.get(key)!;
+    const status: UIFileEdit["status"] = summary.hasActiveEditing
+      ? "editing"
+      : summary.hasSuccessfulChange
+        ? "done"
+        : summary.hasFailed
+          ? "error"
+          : "done";
+    return {
+      key: summary.key,
+      path: summary.path,
+      added: summary.added,
+      deleted: summary.deleted,
+      approximate: summary.approximate,
+      binary: summary.binary,
+      status,
+      error: summary.error,
+    };
+  });
+}
+
+function FileEditGroup({ edits }: { edits: FileEditSummary[] }) {
+  if (edits.length === 0) return null;
+  return (
+    <ul className="space-y-1 border-l border-muted-foreground/15 pl-3">
+      {edits.map((edit) => (
+        <FileEditRow key={edit.key} edit={edit} />
+      ))}
+    </ul>
+  );
+}
+
+function FileEditRow({ edit }: { edit: FileEditSummary }) {
+  const { t } = useTranslation();
+  const editing = edit.status === "editing";
+  const failed = edit.status === "error";
+  const hasCountedDiff = !failed && !edit.binary;
+  return (
+    <li className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-md px-2 py-1.5 text-xs">
+      <div className="flex min-w-0 items-center gap-2">
+        <FileReferenceChip
+          path={edit.path}
+          display="path"
+          active={editing}
+          className="min-w-0"
+          textClassName="text-[12px]"
+          testId="activity-file-reference"
+        />
+        {failed ? (
+          <span className="inline-flex shrink-0 items-center gap-1 text-[10.5px] font-medium text-destructive/75">
+            <AlertCircle className="h-3 w-3" aria-hidden />
+            {t("message.fileEditFailed", { defaultValue: "Failed" })}
+          </span>
+        ) : null}
+        {edit.approximate && !failed ? (
+          <span className="shrink-0 text-[10.5px] font-medium text-muted-foreground/55">
+            {t("message.fileEditApproximate", { defaultValue: "estimated" })}
+          </span>
+        ) : null}
+      </div>
+      {hasCountedDiff ? (
+        <DiffPair added={edit.added} deleted={edit.deleted} />
+      ) : null}
+    </li>
+  );
+}
+
+function DiffPair({ added, deleted }: { added: number; deleted: number }) {
+  return (
+    <span className="inline-flex shrink-0 items-center gap-1.5 tabular-nums">
+      <span className="text-emerald-600/75 dark:text-emerald-300/75">
+        +<AnimatedNumber value={added} />
+      </span>
+      <span className="text-rose-600/70 dark:text-rose-300/75">
+        -<AnimatedNumber value={deleted} />
+      </span>
+    </span>
+  );
+}
+
+function AnimatedNumber({ value }: { value: number }) {
+  const safeValue = Number.isFinite(value) ? Math.max(0, Math.round(value)) : 0;
+  const [display, setDisplay] = useState(0);
+  const displayRef = useRef(0);
+
+  const setAnimatedDisplay = useCallback((next: number) => {
+    displayRef.current = next;
+    setDisplay(next);
+  }, []);
+
+  useEffect(() => {
+    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      setAnimatedDisplay(safeValue);
+      return;
+    }
+    const start = displayRef.current;
+    const delta = safeValue - start;
+    if (delta === 0) {
+      setAnimatedDisplay(safeValue);
+      return;
+    }
+    const duration = 260;
+    const startedAt = performance.now();
+    let frame = 0;
+    const tick = (now: number) => {
+      const progress = Math.min(1, (now - startedAt) / duration);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setAnimatedDisplay(Math.round(start + delta * eased));
+      if (progress < 1) {
+        frame = window.requestAnimationFrame(tick);
+        return;
+      }
+      displayRef.current = safeValue;
+    };
+    frame = window.requestAnimationFrame(tick);
+    return () => window.cancelAnimationFrame(frame);
+  }, [safeValue, setAnimatedDisplay]);
+
+  return <>{display}</>;
+}

webui/src/components/thread/ThreadMessages.tsx

@@ -42,26 +42,77 @@ export function buildDisplayUnits(messages: UIMessage[]): DisplayUnit[] {
     const m = messages[i];
     if (isAgentActivityMember(m)) {
       const cluster: UIMessage[] = [];
-      while (i < messages.length && isAgentActivityMember(messages[i])) {
+      let segmentId: string | undefined = m.activitySegmentId;
-        cluster.push(messages[i]);
+      let clusterHasFileEdits = hasFileEdits(m);
+      while (
+        i < messages.length
+        && isAgentActivityMember(messages[i])
+        && canJoinActivityCluster(segmentId, clusterHasFileEdits, messages[i])
+      ) {
+        const current = messages[i];
+        if (!segmentId && current.activitySegmentId) {
+          segmentId = current.activitySegmentId;
+        }
+        clusterHasFileEdits = clusterHasFileEdits || hasFileEdits(current);
+        cluster.push(current);
         i += 1;
       }
       out.push({ type: "cluster", messages: cluster });
       continue;
     }
     const previous = out[out.length - 1];
-    if (previous?.type === "cluster" && assistantHasInlineReasoning(m)) {
+    if (
+      previous?.type === "cluster"
+      && assistantHasInlineReasoning(m)
+      && canFoldInlineReasoning(previous.messages, m)
+    ) {
       previous.messages.push(reasoningOnlyMessageFromAnswer(m));
       out.push({ type: "single", message: stripInlineReasoning(m) });
       i += 1;
       continue;
     }
+    if (assistantHasInlineReasoning(m)) {
+      out.push({ type: "cluster", messages: [reasoningOnlyMessageFromAnswer(m)] });
+      out.push({ type: "single", message: stripInlineReasoning(m) });
+      i += 1;
+      continue;
+    }
     out.push({ type: "single", message: m });
     i += 1;
   }
   return out;
 }
 
+function clusterSegmentId(messages: UIMessage[]): string | undefined {
+  return messages.find((message) => message.activitySegmentId)?.activitySegmentId;
+}
+
+function hasFileEdits(message: UIMessage): boolean {
+  return !!message.fileEdits?.length;
+}
+
+function clusterHasFileEdits(messages: UIMessage[]): boolean {
+  return messages.some(hasFileEdits);
+}
+
+function canJoinActivityCluster(
+  clusterSegmentId: string | undefined,
+  clusterIncludesFileEdits: boolean,
+  message: UIMessage,
+): boolean {
+  const messageHasFileEdits = hasFileEdits(message);
+  if (!clusterIncludesFileEdits && !messageHasFileEdits) return true;
+  if (!clusterSegmentId || !message.activitySegmentId) return true;
+  return clusterSegmentId === message.activitySegmentId;
+}
+
+function canFoldInlineReasoning(cluster: UIMessage[], message: UIMessage): boolean {
+  if (!clusterHasFileEdits(cluster) && !hasFileEdits(message)) return true;
+  const segmentId = clusterSegmentId(cluster);
+  if (!segmentId || !message.activitySegmentId) return true;
+  return segmentId === message.activitySegmentId;
+}
+
 function assistantHasInlineReasoning(message: UIMessage): boolean {
   return (
     message.role === "assistant"
@@ -80,6 +131,7 @@ function reasoningOnlyMessageFromAnswer(message: UIMessage): UIMessage {
     reasoning: message.reasoning,
     reasoningStreaming: message.reasoningStreaming,
     isStreaming: message.reasoningStreaming,
+    activitySegmentId: message.activitySegmentId,
   };
 }
 
@@ -116,6 +168,10 @@ export function ThreadMessages({
   const { t } = useTranslation();
   const units = useMemo(() => buildDisplayUnits(messages), [messages]);
   const copyFlags = useMemo(() => assistantCopyFlags(units), [units]);
+  const liveActivityClusterIndex = useMemo(
+    () => isStreaming ? currentActivityClusterIndex(units) : -1,
+    [isStreaming, units],
+  );
 
   return (
     <div className="flex w-full flex-col">
@@ -150,7 +206,7 @@ export function ThreadMessages({
             {unit.type === "cluster" ? (
               <AgentActivityCluster
                 messages={unit.messages}
-                isTurnStreaming={isStreaming}
+                isTurnStreaming={index === liveActivityClusterIndex}
                 hasBodyBelow={hasBodyBelow}
               />
             ) : (
@@ -170,6 +226,11 @@ export function ThreadMessages({
   );
 }
 
+function currentActivityClusterIndex(units: DisplayUnit[]): number {
+  const last = units.length - 1;
+  return units[last]?.type === "cluster" ? last : -1;
+}
+
 function unitKey(unit: DisplayUnit, index: number): string {
   if (unit.type === "cluster") {
     const anchor = unit.messages[0]?.id;

webui/src/hooks/useNanobotStream.ts

@@ -10,6 +10,7 @@ import type {
   OutboundMedia,
   GoalStateWsPayload,
   UIImage,
+  UIFileEdit,
   UIMessage,
 } from "@/lib/types";
 
@@ -27,12 +28,17 @@ type PendingStreamEvent =
   | { kind: "delta"; text: string }
   | { kind: "reasoning"; text: string };
 
-/** Scan upward from the bottom skipping trace rows so tool breadcrumbs don't steal the stream target. */
+/** Find a still-open streamed assistant turn. Closed stream segments stay visible
-function findStreamingAssistantIndex(prev: UIMessage[]): number | null {
+ * as streaming until ``turn_end`` for visual continuity, but they must not
+ * receive later delta segments. */
+function findStreamingAssistantIndex(
+  prev: UIMessage[],
+  closedStreamIds: ReadonlySet<string>,
+): number | null {
   for (let i = prev.length - 1; i >= 0; i -= 1) {
     const m = prev[i];
     if (m.kind === "trace") continue;
-    if (m.role === "assistant" && m.isStreaming) return i;
+    if (m.role === "assistant" && m.isStreaming && !closedStreamIds.has(m.id)) return i;
     if (m.role === "user") break;
   }
   return null;
@@ -47,7 +53,13 @@ function findStreamingAssistantIndex(prev: UIMessage[]): number | null {
  * case the reasoning still belongs to the same assistant turn and must render
  * above the answer, not as a new row below it.
  */
-function attachReasoningChunk(prev: UIMessage[], chunk: string): UIMessage[] {
+function attachReasoningChunk(
+  prev: UIMessage[],
+  chunk: string,
+  segments?: {
+    ensure: () => string;
+  },
+): UIMessage[] {
   for (let i = prev.length - 1; i >= 0; i -= 1) {
     const candidate = prev[i];
     // A user turn is a hard boundary: reasoning after it belongs to the new
@@ -58,6 +70,7 @@ function attachReasoningChunk(prev: UIMessage[], chunk: string): UIMessage[] {
     // that produced those tool calls.
     if (candidate.kind === "trace") break;
     if (candidate.role !== "assistant") continue;
+    const activitySegmentId = candidate.activitySegmentId ?? segments?.ensure();
     const hasAnswer = candidate.content.length > 0;
     if (
       candidate.reasoningStreaming
@@ -69,6 +82,7 @@ function attachReasoningChunk(prev: UIMessage[], chunk: string): UIMessage[] {
         ...candidate,
         reasoning: (candidate.reasoning ?? "") + chunk,
         reasoningStreaming: true,
+        ...(activitySegmentId ? { activitySegmentId } : {}),
       };
       return [...prev.slice(0, i), merged, ...prev.slice(i + 1)];
     }
@@ -77,11 +91,13 @@ function attachReasoningChunk(prev: UIMessage[], chunk: string): UIMessage[] {
         ...candidate,
         reasoning: chunk,
         reasoningStreaming: true,
+        ...(activitySegmentId ? { activitySegmentId } : {}),
       };
       return [...prev.slice(0, i), merged, ...prev.slice(i + 1)];
     }
     break;
   }
+  const activitySegmentId = segments?.ensure();
   return [
     ...prev,
     {
@@ -91,6 +107,7 @@ function attachReasoningChunk(prev: UIMessage[], chunk: string): UIMessage[] {
       isStreaming: true,
       reasoning: chunk,
       reasoningStreaming: true,
+      ...(activitySegmentId ? { activitySegmentId } : {}),
       createdAt: Date.now(),
     },
   ];
@@ -197,6 +214,47 @@ function absorbCompleteAssistantMessage(
   ];
 }
 
+function fileEditKey(edit: Pick<UIFileEdit, "call_id" | "tool" | "path">): string {
+  return `${edit.call_id}|${edit.tool}|${edit.path}`;
+}
+
+function normalizeFileEdit(edit: UIFileEdit): UIFileEdit | null {
+  if (!edit || !edit.path || !edit.tool) return null;
+  const inferredStatus =
+    edit.phase === "error"
+      ? "error"
+      : edit.phase === "end"
+        ? "done"
+        : "editing";
+  return {
+    ...edit,
+    call_id: edit.call_id || `${edit.tool}:${edit.path}`,
+    added: Number.isFinite(edit.added) ? Math.max(0, Math.round(edit.added)) : 0,
+    deleted: Number.isFinite(edit.deleted) ? Math.max(0, Math.round(edit.deleted)) : 0,
+    status: edit.status === "error" || edit.status === "done" || edit.status === "editing"
+      ? edit.status
+      : inferredStatus,
+  };
+}
+
+function mergeFileEdits(existing: UIFileEdit[] | undefined, incoming: UIFileEdit[]): UIFileEdit[] {
+  const next = [...(existing ?? [])];
+  const indexByKey = new Map(next.map((edit, index) => [fileEditKey(edit), index]));
+  for (const raw of incoming) {
+    const edit = normalizeFileEdit(raw);
+    if (!edit) continue;
+    const key = fileEditKey(edit);
+    const existingIndex = indexByKey.get(key);
+    if (existingIndex === undefined) {
+      indexByKey.set(key, next.length);
+      next.push(edit);
+      continue;
+    }
+    next[existingIndex] = { ...next[existingIndex], ...edit };
+  }
+  return next;
+}
+
 /**
  * Subscribe to a chat by ID. Returns the in-memory message list for the chat,
  * a streaming flag, and a ``send`` function. Initial history must be seeded
@@ -255,6 +313,10 @@ export function useNanobotStream(
   const [streamError, setStreamError] = useState<StreamError | null>(null);
   const buffer = useRef<StreamBuffer | null>(null);
   const activeAssistantRef = useRef<ActiveAssistantCursor | null>(null);
+  const closedAssistantStreamIdsRef = useRef<Set<string>>(new Set());
+  const activitySegmentRef = useRef<string | null>(null);
+  const fileEditSegmentRef = useRef<string | null>(null);
+  const activitySegmentCounterRef = useRef(0);
   const pendingStreamEventsRef = useRef<PendingStreamEvent[]>([]);
   const streamFrameRef = useRef<number | null>(null);
   const suppressStreamUntilTurnEndRef = useRef(false);
@@ -281,6 +343,40 @@ export function useNanobotStream(
     pendingStreamEventsRef.current = [];
   }, []);
 
+  const createActivitySegmentId = useCallback((activate = true) => {
+    activitySegmentCounterRef.current += 1;
+    const id = `activity-${activitySegmentCounterRef.current}`;
+    if (activate) activitySegmentRef.current = id;
+    return id;
+  }, []);
+
+  const freshActivitySegmentId = useCallback(
+    () => createActivitySegmentId(true),
+    [createActivitySegmentId],
+  );
+
+  const detachedActivitySegmentId = useCallback(
+    () => createActivitySegmentId(false),
+    [createActivitySegmentId],
+  );
+
+  const ensureActivitySegmentId = useCallback(() => {
+    if (activitySegmentRef.current) return activitySegmentRef.current;
+    return freshActivitySegmentId();
+  }, [freshActivitySegmentId]);
+
+  const clearActivitySegment = useCallback(() => {
+    activitySegmentRef.current = null;
+    fileEditSegmentRef.current = null;
+  }, []);
+
+  const closeActiveAssistantStream = useCallback(() => {
+    const closedStreamId = buffer.current?.messageId ?? activeAssistantRef.current?.id;
+    if (closedStreamId) closedAssistantStreamIdsRef.current.add(closedStreamId);
+    buffer.current = null;
+    activeAssistantRef.current = null;
+  }, []);
+
   const resolveActiveAssistantIndex = useCallback((prev: UIMessage[]): number | null => {
     const cursor = activeAssistantRef.current;
     if (!cursor) return null;
@@ -311,7 +407,7 @@ export function useNanobotStream(
         targetIndex = findActiveAssistantPlaceholderIndex(next);
       }
       if (targetIndex === null) {
-        targetIndex = findStreamingAssistantIndex(next);
+        targetIndex = findStreamingAssistantIndex(next, closedAssistantStreamIdsRef.current);
       }
       if (targetIndex === null) {
         const id = crypto.randomUUID();
@@ -334,6 +430,7 @@ export function useNanobotStream(
         content: target.content + chunk,
         isStreaming: true,
       };
+      closedAssistantStreamIdsRef.current.delete(merged.id);
       activeAssistantRef.current = { id: merged.id, index: targetIndex };
       buffer.current = { messageId: merged.id };
       return replaceMessageAt(next, targetIndex, merged);
@@ -353,23 +450,32 @@ export function useNanobotStream(
         }
         next = kind === "delta"
           ? appendAnswerChunk(next, text)
-          : attachReasoningChunk(next, text);
+          : attachReasoningChunk(next, text, {
+              ensure: ensureActivitySegmentId,
+            });
       }
       return next;
     },
-    [appendAnswerChunk],
+    [appendAnswerChunk, ensureActivitySegmentId],
   );
 
-  const flushPendingStreamEvents = useCallback(() => {
+  const flushPendingStreamEvents = useCallback((options?: { closeAnswerSegment?: boolean }) => {
     if (streamFrameRef.current !== null) {
       window.cancelAnimationFrame(streamFrameRef.current);
       streamFrameRef.current = null;
     }
     const events = pendingStreamEventsRef.current;
-    if (events.length === 0) return;
+    if (events.length === 0) {
+      if (options?.closeAnswerSegment) closeActiveAssistantStream();
+      return;
+    }
     pendingStreamEventsRef.current = [];
-    setMessages((prev) => applyPendingStreamEvents(prev, events));
+    setMessages((prev) => {
-  }, [applyPendingStreamEvents]);
+      const next = applyPendingStreamEvents(prev, events);
+      if (options?.closeAnswerSegment) closeActiveAssistantStream();
+      return next;
+    });
+  }, [applyPendingStreamEvents, closeActiveAssistantStream]);
 
   const schedulePendingStreamFlush = useCallback(() => {
     if (streamFrameRef.current !== null) return;
@@ -397,6 +503,8 @@ export function useNanobotStream(
     setGoalState(chatId ? client.getGoalState(chatId) : undefined);
     buffer.current = null;
     activeAssistantRef.current = null;
+    closedAssistantStreamIdsRef.current.clear();
+    clearActivitySegment();
     clearPendingStreamWork();
     suppressStreamUntilTurnEndRef.current = false;
     if (streamEndTimerRef.current !== null) {
@@ -404,7 +512,7 @@ export function useNanobotStream(
       streamEndTimerRef.current = null;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatId, client, clearPendingStreamWork]);
+  }, [chatId, client, clearActivitySegment, clearPendingStreamWork]);
 
   useEffect(() => {
     if (hasPendingToolCalls) setIsStreaming(true);
@@ -442,21 +550,17 @@ export function useNanobotStream(
         return;
       }
 
-      flushPendingStreamEvents();
-
       if (ev.event === "stream_end") {
-        if (suppressStreamUntilTurnEndRef.current) {
+        flushPendingStreamEvents({ closeAnswerSegment: true });
-          buffer.current = null;
+        if (suppressStreamUntilTurnEndRef.current) return;
-          return;
-        }
         // stream_end only means the text segment finished — the model may
         // still be executing tools.  Do NOT reset isStreaming here; the
         // definitive "turn is complete" signal is ``turn_end``.
-        if (!buffer.current) return;
-        buffer.current = null;
         return;
       }
 
+      flushPendingStreamEvents();
+
       if (ev.event === "reasoning_end") {
         if (suppressStreamUntilTurnEndRef.current) return;
         setMessages((prev) => closeReasoningStream(prev));
@@ -496,6 +600,8 @@ export function useNanobotStream(
           }
           buffer.current = null;
           activeAssistantRef.current = null;
+          clearActivitySegment();
+          closedAssistantStreamIdsRef.current.clear();
           return finalized;
         });
         suppressStreamUntilTurnEndRef.current = false;
@@ -516,7 +622,9 @@ export function useNanobotStream(
         if (ev.kind === "reasoning") {
           const line = ev.text;
           if (!line) return;
-          setMessages((prev) => closeReasoningStream(attachReasoningChunk(prev, line)));
+          setMessages((prev) => closeReasoningStream(attachReasoningChunk(prev, line, {
+            ensure: ensureActivitySegmentId,
+          })));
           return;
         }
         // Intermediate agent breadcrumbs (tool-call hints, raw progress).
@@ -531,12 +639,24 @@ export function useNanobotStream(
               : [];
           if (lines.length === 0) return;
           setMessages((prev) => {
+            const segmentId = ensureActivitySegmentId();
             const last = prev[prev.length - 1];
-            if (last && last.kind === "trace" && !last.isStreaming) {
+            if (
+              last
+              && last.kind === "trace"
+              && !last.isStreaming
+              && (!last.activitySegmentId || last.activitySegmentId === segmentId)
+            ) {
+              const previousTraces = last.traces?.length
+                ? last.traces
+                : last.content
+                  ? [last.content]
+                  : [];
               const merged: UIMessage = {
                 ...last,
-                traces: [...(last.traces ?? [last.content]), ...lines],
+                traces: [...previousTraces, ...lines],
                 content: lines[lines.length - 1],
+                activitySegmentId: last.activitySegmentId ?? segmentId,
               };
               return [...prev.slice(0, -1), merged];
             }
@@ -548,6 +668,7 @@ export function useNanobotStream(
                 kind: "trace",
                 content: lines[lines.length - 1],
                 traces: lines,
+                activitySegmentId: segmentId,
                 createdAt: Date.now(),
               },
             ];
@@ -585,6 +706,46 @@ export function useNanobotStream(
         }
         return;
       }
+      if (ev.event === "file_edit") {
+        const edits = Array.isArray(ev.edits) ? ev.edits : [];
+        if (edits.length === 0) return;
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          let segmentId = fileEditSegmentRef.current;
+          if (!segmentId || !(last?.kind === "trace" && last.fileEdits?.length)) {
+            segmentId = detachedActivitySegmentId();
+            fileEditSegmentRef.current = segmentId;
+          }
+          if (
+            last
+            && last.kind === "trace"
+            && !last.isStreaming
+            && !!last.fileEdits?.length
+            && last.activitySegmentId === segmentId
+          ) {
+            const merged: UIMessage = {
+              ...last,
+              fileEdits: mergeFileEdits(last.fileEdits, edits),
+              activitySegmentId: last.activitySegmentId ?? segmentId,
+            };
+            return [...prev.slice(0, -1), merged];
+          }
+          return [
+            ...prev,
+            {
+              id: crypto.randomUUID(),
+              role: "tool",
+              kind: "trace",
+              content: "",
+              traces: [],
+              fileEdits: mergeFileEdits(undefined, edits),
+              activitySegmentId: segmentId,
+              createdAt: Date.now(),
+            },
+          ];
+        });
+        return;
+      }
       // ``attached`` / ``error`` frames aren't actionable here; the client
       // shell handles them separately.
     };
@@ -594,6 +755,8 @@ export function useNanobotStream(
       unsub();
       buffer.current = null;
       activeAssistantRef.current = null;
+      closedAssistantStreamIdsRef.current.clear();
+      clearActivitySegment();
       clearPendingStreamWork();
       if (streamEndTimerRef.current !== null) {
         clearTimeout(streamEndTimerRef.current);
@@ -603,7 +766,10 @@ export function useNanobotStream(
   }, [
     chatId,
     client,
+    clearActivitySegment,
     clearPendingStreamWork,
+    detachedActivitySegmentId,
+    ensureActivitySegmentId,
     flushPendingStreamEvents,
     onTurnEnd,
     schedulePendingStreamFlush,
@@ -622,6 +788,8 @@ export function useNanobotStream(
       setMessages((prev) => {
         buffer.current = null;
         activeAssistantRef.current = null;
+        closedAssistantStreamIdsRef.current.clear();
+        clearActivitySegment();
         return [
           ...pruneReasoningOnlyPlaceholders(prev),
           {
@@ -643,7 +811,7 @@ export function useNanobotStream(
         client.sendMessage(chatId, content, wireMedia);
       }
     },
-    [chatId, client, flushPendingStreamEvents],
+    [chatId, clearActivitySegment, client, flushPendingStreamEvents],
   );
 
   const stop = useCallback(() => {
@@ -653,11 +821,13 @@ export function useNanobotStream(
     setMessages((prev) => {
       buffer.current = null;
       activeAssistantRef.current = null;
+      closedAssistantStreamIdsRef.current.clear();
+      clearActivitySegment();
       return prev.map((m) => (m.isStreaming ? { ...m, isStreaming: false } : m));
     });
     suppressStreamUntilTurnEndRef.current = false;
     client.sendMessage(chatId, "/stop");
-  }, [chatId, client, flushPendingStreamEvents]);
+  }, [chatId, clearActivitySegment, client, flushPendingStreamEvents]);
 
   return {
     messages,

webui/src/lib/types.ts

@@ -40,6 +40,10 @@ export interface UIMessage {
   /** For trace rows: each individual hint line, so consecutive hints can
    * render as a single collapsible group. */
   traces?: string[];
+  /** Activity rows: explicit file edits emitted by edit tools. */
+  fileEdits?: UIFileEdit[];
+  /** Activity rows created during the same agent phase share one collapsible block. */
+  activitySegmentId?: string;
   /** User turn: optimistic blob URLs for preview. Replay: placeholder chips. */
   images?: UIImage[];
   /** Signed or local UI-renderable media attachments. */
@@ -80,6 +84,20 @@ export interface ToolProgressEvent {
   embeds?: unknown[];
 }
 
+export interface UIFileEdit {
+  version?: number;
+  call_id: string;
+  tool: string;
+  path: string;
+  phase?: "start" | "end" | "error" | string;
+  added: number;
+  deleted: number;
+  approximate?: boolean;
+  status: "editing" | "done" | "error";
+  binary?: boolean;
+  error?: string;
+}
+
 export interface ChatSummary {
   /** Server-side session key, e.g. ``websocket:abcd-...``. */
   key: string;
@@ -183,6 +201,11 @@ export type InboundEvent =
       /** Optional structured payload on progress frames (channel-specific). */
       agent_ui?: AgentUIBlob;
     }
+  | {
+      event: "file_edit";
+      chat_id: string;
+      edits: UIFileEdit[];
+    }
   | {
       event: "delta";
       chat_id: string;
@@ -230,7 +253,7 @@ export type InboundEvent =
       chat_id: string;
       goal_state: GoalStateWsPayload;
     }
-  | { event: "session_updated"; chat_id: string }
+  | { event: "session_updated"; chat_id: string; scope?: "metadata" | "thread" | string }
   | { event: "error"; chat_id?: string; detail?: string };
 
 /** Base64-encoded image attached to an outbound ``message`` envelope.

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

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
 import { AgentActivityCluster } from "@/components/thread/AgentActivityCluster";
@@ -72,6 +72,25 @@ function setScrollGeometry(
   });
 }
 
+function installReducedMotion() {
+  const original = window.matchMedia;
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: () => ({
+      matches: true,
+      media: "(prefers-reduced-motion: reduce)",
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }),
+  });
+  return () => {
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: original,
+    });
+  };
+}
+
 describe("AgentActivityCluster", () => {
   it("jumps to the latest activity when opened", () => {
     const raf = installAnimationFrameQueue();
@@ -201,4 +220,117 @@ describe("AgentActivityCluster", () => {
       raf.restore();
     }
   });
+
+  it("renders file edit totals and a compact expanded file list", async () => {
+    const restoreMotion = installReducedMotion();
+    try {
+      render(
+        <AgentActivityCluster
+          messages={activityMessages("", {
+            id: "t2",
+            role: "tool",
+            kind: "trace",
+            content: "edit_file()",
+            traces: ["edit_file()"],
+            fileEdits: [{
+              call_id: "call-edit",
+              tool: "edit_file",
+              path: "src/app.tsx",
+              phase: "end",
+              added: 12,
+              deleted: 3,
+              approximate: false,
+              status: "done",
+            }],
+            createdAt: 3,
+          })}
+          isTurnStreaming={false}
+          hasBodyBelow={false}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: /edited app\.tsx/i })).toBeInTheDocument();
+      fireEvent.click(screen.getByRole("button", { name: /edited app\.tsx/i }));
+
+      expect(screen.queryByText("Edited files")).not.toBeInTheDocument();
+      expect(screen.queryByText("Edited")).not.toBeInTheDocument();
+      const fileRef = screen.getByTestId("activity-file-reference");
+      expect(fileRef).toHaveTextContent("src/app.tsx");
+      expect(fileRef).toHaveAttribute("aria-label", "src/app.tsx");
+      await waitFor(() => {
+        expect(screen.getAllByText("+12").length).toBeGreaterThan(0);
+        expect(screen.getAllByText("-3").length).toBeGreaterThan(0);
+      });
+    } finally {
+      restoreMotion();
+    }
+  });
+
+  it("merges repeated edits for the same path and lets successful edits win over failures", async () => {
+    const restoreMotion = installReducedMotion();
+    try {
+      render(
+        <AgentActivityCluster
+          messages={activityMessages("", {
+            id: "t2",
+            role: "tool",
+            kind: "trace",
+            content: "edit_file()",
+            traces: ["edit_file()"],
+            fileEdits: [
+              {
+                call_id: "call-edit-1",
+                tool: "edit_file",
+                path: "minecraft-fps/index.html",
+                phase: "end",
+                added: 2,
+                deleted: 1,
+                approximate: false,
+                status: "done",
+              },
+              {
+                call_id: "call-edit-2",
+                tool: "edit_file",
+                path: "minecraft-fps/index.html",
+                phase: "error",
+                added: 0,
+                deleted: 0,
+                approximate: false,
+                status: "error",
+                error: "patch failed",
+              },
+              {
+                call_id: "call-edit-3",
+                tool: "edit_file",
+                path: "minecraft-fps/index.html",
+                phase: "end",
+                added: 6,
+                deleted: 6,
+                approximate: false,
+                status: "done",
+              },
+            ],
+            createdAt: 3,
+          })}
+          isTurnStreaming={false}
+          hasBodyBelow={false}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: /edited index\.html/i })).toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: /failed index\.html/i })).not.toBeInTheDocument();
+      fireEvent.click(screen.getByRole("button", { name: /edited index\.html/i }));
+
+      const fileRefs = screen.getAllByTestId("activity-file-reference");
+      expect(fileRefs).toHaveLength(1);
+      expect(fileRefs[0]).toHaveTextContent("minecraft-fps/index.html");
+      expect(screen.queryByText("Failed")).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getAllByText("+8").length).toBeGreaterThan(0);
+        expect(screen.getAllByText("-7").length).toBeGreaterThan(0);
+      });
+    } finally {
+      restoreMotion();
+    }
+  });
 });

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

@@ -55,6 +55,153 @@ describe("ThreadMessages", () => {
     expect(rows[1]).toHaveClass("mt-4");
   });
 
+  it("starts a new activity cluster when the activity segment changes", () => {
+    const messages: UIMessage[] = [
+      {
+        id: "r1",
+        role: "assistant",
+        content: "",
+        reasoning: "first pass",
+        activitySegmentId: "seg-1",
+        createdAt: 1,
+      },
+      {
+        id: "t1",
+        role: "tool",
+        kind: "trace",
+        content: "edit_file()",
+        traces: ["edit_file()"],
+        fileEdits: [{
+          call_id: "call-edit",
+          tool: "edit_file",
+          path: "foo.txt",
+          phase: "end",
+          added: 2,
+          deleted: 1,
+          status: "done",
+        }],
+        activitySegmentId: "seg-1",
+        createdAt: 2,
+      },
+      {
+        id: "r2",
+        role: "assistant",
+        content: "",
+        reasoning: "second pass",
+        activitySegmentId: "seg-2",
+        createdAt: 3,
+      },
+    ];
+
+    const units = buildDisplayUnits(messages);
+
+    expect(units).toHaveLength(2);
+    expect(units[0].type === "cluster" ? units[0].messages.map((m) => m.id) : []).toEqual([
+      "r1",
+      "t1",
+    ]);
+    expect(units[1].type === "cluster" ? units[1].messages.map((m) => m.id) : []).toEqual([
+      "r2",
+    ]);
+  });
+
+  it("does not split ordinary tool activity just because segment ids changed", () => {
+    const messages: UIMessage[] = [
+      {
+        id: "r1",
+        role: "assistant",
+        content: "",
+        reasoning: "first pass",
+        activitySegmentId: "seg-1",
+        createdAt: 1,
+      },
+      {
+        id: "t1",
+        role: "tool",
+        kind: "trace",
+        content: "read_file()",
+        traces: ["read_file()"],
+        activitySegmentId: "seg-1",
+        createdAt: 2,
+      },
+      {
+        id: "r2",
+        role: "assistant",
+        content: "",
+        reasoning: "second pass",
+        activitySegmentId: "seg-2",
+        createdAt: 3,
+      },
+      {
+        id: "t2",
+        role: "tool",
+        kind: "trace",
+        content: "grep()",
+        traces: ["grep()"],
+        activitySegmentId: "seg-2",
+        createdAt: 4,
+      },
+    ];
+
+    const units = buildDisplayUnits(messages);
+
+    expect(units).toHaveLength(1);
+    expect(units[0].type === "cluster" ? units[0].messages.map((m) => m.id) : []).toEqual([
+      "r1",
+      "t1",
+      "r2",
+      "t2",
+    ]);
+  });
+
+  it("only marks the current activity cluster as live while streaming", () => {
+    const messages: UIMessage[] = [
+      {
+        id: "r1",
+        role: "assistant",
+        content: "",
+        reasoning: "first pass",
+        reasoningStreaming: true,
+        activitySegmentId: "seg-1",
+        createdAt: 1,
+      },
+      {
+        id: "t1",
+        role: "tool",
+        kind: "trace",
+        content: "edit_file()",
+        traces: ["edit_file()"],
+        fileEdits: [{
+          call_id: "call-edit",
+          tool: "edit_file",
+          path: "foo.txt",
+          phase: "start",
+          added: 4,
+          deleted: 1,
+          approximate: true,
+          status: "editing",
+        }],
+        activitySegmentId: "seg-1",
+        createdAt: 2,
+      },
+      {
+        id: "r2",
+        role: "assistant",
+        content: "",
+        reasoning: "second pass",
+        reasoningStreaming: true,
+        activitySegmentId: "seg-2",
+        createdAt: 3,
+      },
+    ];
+
+    render(<ThreadMessages messages={messages} isStreaming />);
+
+    expect(screen.getByRole("button", { name: /edited foo\.txt/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /editing foo\.txt/i })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /working/i })).toBeInTheDocument();
+  });
+
   it("folds final answer reasoning into the preceding activity cluster", () => {
     const messages: UIMessage[] = [
       {

webui/src/tests/useNanobotStream.test.tsx

@@ -308,6 +308,173 @@ describe("useNanobotStream", () => {
     );
   });
 
+  it("renders live file_edit events as their own activity trace", () => {
+    const fake = fakeClient();
+    const { result } = renderHook(() => useNanobotStream("chat-file-edit", EMPTY_MESSAGES), {
+      wrapper: wrap(fake.client),
+    });
+
+    act(() => {
+      fake.emit("chat-file-edit", {
+        event: "message",
+        chat_id: "chat-file-edit",
+        text: 'write_file({"path":"foo.txt"})',
+        kind: "tool_hint",
+      });
+      fake.emit("chat-file-edit", {
+        event: "file_edit",
+        chat_id: "chat-file-edit",
+        edits: [{
+          call_id: "call-write",
+          tool: "write_file",
+          path: "foo.txt",
+          phase: "start",
+          added: 1,
+          deleted: 0,
+          approximate: true,
+          status: "editing",
+        }],
+      });
+      fake.emit("chat-file-edit", {
+        event: "file_edit",
+        chat_id: "chat-file-edit",
+        edits: [{
+          call_id: "call-write",
+          tool: "write_file",
+          path: "foo.txt",
+          phase: "end",
+          added: 3,
+          deleted: 1,
+          approximate: false,
+          status: "done",
+        }],
+      });
+    });
+
+    expect(result.current.messages).toHaveLength(2);
+    expect(result.current.messages[0]).toMatchObject({
+      role: "tool",
+      kind: "trace",
+      traces: ['write_file({"path":"foo.txt"})'],
+    });
+    expect(result.current.messages[1]).toMatchObject({
+      role: "tool",
+      kind: "trace",
+      fileEdits: [{
+        call_id: "call-write",
+        status: "done",
+        added: 3,
+        deleted: 1,
+        approximate: false,
+      }],
+    });
+    expect(result.current.messages[1].activitySegmentId).toBeTruthy();
+    expect(result.current.messages[1].activitySegmentId).not.toBe(
+      result.current.messages[0].activitySegmentId,
+    );
+  });
+
+  it("starts a new assistant bubble for deltas after stream_end and activity", async () => {
+    const fake = fakeClient();
+    const { result } = renderHook(() => useNanobotStream("chat-stream-segments", EMPTY_MESSAGES), {
+      wrapper: wrap(fake.client),
+    });
+
+    act(() => {
+      fake.emit("chat-stream-segments", {
+        event: "delta",
+        chat_id: "chat-stream-segments",
+        text: "I created the files.",
+      });
+      fake.emit("chat-stream-segments", {
+        event: "stream_end",
+        chat_id: "chat-stream-segments",
+      });
+      fake.emit("chat-stream-segments", {
+        event: "message",
+        chat_id: "chat-stream-segments",
+        text: 'write_file({"path":"minecraft-fps/options.txt"})',
+        kind: "tool_hint",
+      });
+      fake.emit("chat-stream-segments", {
+        event: "delta",
+        chat_id: "chat-stream-segments",
+        text: "Now I will summarize the edits.",
+      });
+    });
+
+    await flushStreamFrame();
+
+    expect(result.current.messages).toHaveLength(3);
+    expect(result.current.messages[0]).toMatchObject({
+      role: "assistant",
+      content: "I created the files.",
+    });
+    expect(result.current.messages[1]).toMatchObject({
+      role: "tool",
+      kind: "trace",
+      traces: ['write_file({"path":"minecraft-fps/options.txt"})'],
+    });
+    expect(result.current.messages[2]).toMatchObject({
+      role: "assistant",
+      content: "Now I will summarize the edits.",
+    });
+  });
+
+  it("opens a new activity segment for reasoning after file edit activity", async () => {
+    const fake = fakeClient();
+    const { result } = renderHook(() => useNanobotStream("chat-file-segments", EMPTY_MESSAGES), {
+      wrapper: wrap(fake.client),
+    });
+
+    act(() => {
+      fake.emit("chat-file-segments", {
+        event: "reasoning_delta",
+        chat_id: "chat-file-segments",
+        text: "Plan.",
+      });
+      fake.emit("chat-file-segments", {
+        event: "reasoning_end",
+        chat_id: "chat-file-segments",
+      });
+      fake.emit("chat-file-segments", {
+        event: "message",
+        chat_id: "chat-file-segments",
+        text: 'edit_file({"path":"foo.txt"})',
+        kind: "tool_hint",
+      });
+      fake.emit("chat-file-segments", {
+        event: "file_edit",
+        chat_id: "chat-file-segments",
+        edits: [{
+          call_id: "call-edit",
+          tool: "edit_file",
+          path: "foo.txt",
+          phase: "start",
+          added: 1,
+          deleted: 1,
+          approximate: true,
+          status: "editing",
+        }],
+      });
+      fake.emit("chat-file-segments", {
+        event: "reasoning_delta",
+        chat_id: "chat-file-segments",
+        text: "Review result.",
+      });
+    });
+
+    await flushStreamFrame();
+
+    expect(result.current.messages).toHaveLength(4);
+    const firstSegment = result.current.messages[0].activitySegmentId;
+    expect(firstSegment).toBeTruthy();
+    expect(result.current.messages[1].activitySegmentId).toBe(firstSegment);
+    expect(result.current.messages[2].activitySegmentId).toBeTruthy();
+    expect(result.current.messages[2].activitySegmentId).not.toBe(firstSegment);
+    expect(result.current.messages[3].activitySegmentId).toBe(firstSegment);
+  });
+
   it("accumulates reasoning_delta chunks on a placeholder until reasoning_end", async () => {
     const fake = fakeClient();
     const { result } = renderHook(() => useNanobotStream("chat-r", EMPTY_MESSAGES), {