diff --git a/packages/ui/src/features/mcp-apps/components/McpToolView.tsx b/packages/ui/src/features/mcp-apps/components/McpToolView.tsx
index fb460f2b3..94057696b 100644
--- a/packages/ui/src/features/mcp-apps/components/McpToolView.tsx
+++ b/packages/ui/src/features/mcp-apps/components/McpToolView.tsx
@@ -1,17 +1,14 @@
 import { Plugs } from "@phosphor-icons/react";
-import { Box, Flex } from "@radix-ui/themes";
-import { useState } from "react";
 import {
   getPostHogExecDisplay,
   isPostHogExecTool,
 } from "../../posthog-mcp/utils/posthog-exec-display";
+import { ToolRow } from "../../sessions/components/session-update/ToolRow";
 import {
+  ContentPre,
   compactInput,
-  ExpandableIcon,
-  ExpandedContentBox,
   formatInput,
   getContentText,
-  StatusIndicators,
   stripCodeFences,
   ToolTitle,
   type ToolViewProps,
@@ -33,7 +30,6 @@ export function McpToolView({
   mcpToolName,
   expanded = false,
 }: McpToolViewProps) {
-  const [isExpanded, setIsExpanded] = useState(expanded);
   const { status, rawInput, content } = toolCall;
   const { isLoading, isFailed, wasCancelled, isComplete } = useToolCallStatus(
     status,
@@ -60,52 +56,40 @@ export function McpToolView({
 
   const output = stripCodeFences(getContentText(content) ?? "");
   const hasOutput = output.trim().length > 0;
-  const isExpandable = !!fullInput || hasOutput;
+  const showOutput = isComplete && hasOutput;
 
-  const handleClick = () => {
-    if (isExpandable) {
-      setIsExpanded(!isExpanded);
-    }
-  };
+  const body =
+    fullInput || showOutput ? (
+      <>
+        {fullInput && <ContentPre>{fullInput}</ContentPre>}
+        {showOutput && (
+          <div className={fullInput ? "border-gray-6 border-t" : undefined}>
+            <ContentPre>{output}</ContentPre>
+          </div>
+        )}
+      </>
+    ) : undefined;
 
   return (
-    <Box
-      className={`group py-0.5 ${isExpandable ? "cursor-pointer" : ""}`}
-      onClick={handleClick}
+    <ToolRow
+      icon={Plugs}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      defaultOpen={expanded}
+      content={body}
     >
-      <Flex gap="2">
-        <Box className="shrink-0 pt-px">
-          <ExpandableIcon
-            icon={Plugs}
-            isLoading={isLoading}
-            isExpandable={isExpandable}
-            isExpanded={isExpanded}
-          />
-        </Box>
-        <Flex align="center" gap="1" wrap="wrap" className="min-w-0">
-          <ToolTitle>
-            <span className="text-gray-10">{serverName}</span>
-            {" - "}
-            {toolName}
-            <span className="text-gray-10">{" (MCP)"}</span>
-          </ToolTitle>
-          {inputPreview && (
-            <ToolTitle>
-              <span className="text-accent-11">{inputPreview}</span>
-            </ToolTitle>
-          )}
-          <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-        </Flex>
-      </Flex>
-
-      {isExpanded && (
-        <>
-          {fullInput && <ExpandedContentBox>{fullInput}</ExpandedContentBox>}
-          {isComplete && hasOutput && (
-            <ExpandedContentBox>{output}</ExpandedContentBox>
-          )}
-        </>
+      <ToolTitle>
+        <span className="text-gray-10">{serverName}</span>
+        {" - "}
+        {toolName}
+        <span className="text-gray-10">{" (MCP)"}</span>
+      </ToolTitle>
+      {inputPreview && (
+        <ToolTitle>
+          <span className="text-accent-11">{inputPreview}</span>
+        </ToolTitle>
       )}
-    </Box>
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/mcp-servers/components/parts/ToolRow.tsx b/packages/ui/src/features/mcp-servers/components/parts/ToolRow.tsx
index 13a743ac4..7ef5cefbd 100644
--- a/packages/ui/src/features/mcp-servers/components/parts/ToolRow.tsx
+++ b/packages/ui/src/features/mcp-servers/components/parts/ToolRow.tsx
@@ -18,11 +18,7 @@ export function ToolRow({ tool, onChange }: ToolRowProps) {
   const removed = !!tool.removed_at;
 
   return (
-    <div
-      className={`rounded border bg-gray-1 transition-colors ${
-        open ? "border-gray-7" : "border-gray-5"
-      }`}
-    >
+    <div className={`rounded border border-border bg-gray-1 transition-colors`}>
       <div className="flex w-full min-w-0 items-center gap-3 px-3 py-2">
         <button
           type="button"
@@ -47,7 +43,7 @@ export function ToolRow({ tool, onChange }: ToolRowProps) {
             <Flex align="center" gap="2" minWidth="0">
               <Text
                 truncate
-                className="select-text font-[var(--code-font-family)] font-medium text-sm"
+                className="select-text font-medium text-sm"
                 onMouseDown={(e) => e.stopPropagation()}
                 onClick={(e) => e.stopPropagation()}
               >
diff --git a/packages/ui/src/features/sessions/components/ConversationView.tsx b/packages/ui/src/features/sessions/components/ConversationView.tsx
index 9e9f56797..a345ec3ca 100644
--- a/packages/ui/src/features/sessions/components/ConversationView.tsx
+++ b/packages/ui/src/features/sessions/components/ConversationView.tsx
@@ -17,6 +17,12 @@ import { ConversationSearchBar } from "@posthog/ui/features/sessions/components/
 import { GitActionMessage } from "@posthog/ui/features/sessions/components/GitActionMessage";
 import { GitActionResult } from "@posthog/ui/features/sessions/components/GitActionResult";
 import { mergeConversationItems } from "@posthog/ui/features/sessions/components/mergeConversationItems";
+import {
+  buildThreadGroups,
+  type ThreadGrouping,
+  type ThreadRow,
+} from "@posthog/ui/features/sessions/components/new-thread/buildThreadGroups";
+import { ToolCallGroupChip } from "@posthog/ui/features/sessions/components/new-thread/ToolCallGroupChip";
 import { SessionFooter } from "@posthog/ui/features/sessions/components/SessionFooter";
 import { QueuedMessageView } from "@posthog/ui/features/sessions/components/session-update/QueuedMessageView";
 import {
@@ -40,6 +46,10 @@ import {
   useQueuedMessagesForTask,
   useSessionForTask,
 } from "@posthog/ui/features/sessions/sessionStore";
+import {
+  useGroupOverrides,
+  useSessionViewActions,
+} from "@posthog/ui/features/sessions/sessionViewStore";
 import { SessionTaskIdProvider } from "@posthog/ui/features/sessions/useSessionTaskId";
 import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { SkillButtonActionMessage } from "@posthog/ui/features/skill-buttons/components/SkillButtonActionMessage";
@@ -90,6 +100,10 @@ export function ConversationView({
   const debugLogsCloudRuns = useSettingsStore((s) => s.debugLogsCloudRuns);
   const showDebugLogs = debugLogsCloudRuns;
 
+  const collapseMode = useSettingsStore((s) => s.conversationCollapseMode);
+  const groupOverrides = useGroupOverrides();
+  const sessionViewActions = useSessionViewActions();
+
   const contextUsage = useContextUsage(events);
 
   // Streaming appends one event per token. The parse is incremental — each
@@ -152,27 +166,46 @@ export function ConversationView({
     [conversationItems, optimisticItems, queuedItems, isCloud],
   );
 
-  // Keep MCP App tool call items mounted so their iframes and bridges
-  // survive scrolling out of the virtualized viewport.
-  const mcpAppIndices = useMemo(() => {
-    const indices: number[] = [];
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.type !== "session_update") continue;
-      const update = item.update;
-      if (!("_meta" in update)) continue;
-      const meta = update._meta as
-        | { claudeCode?: { toolName?: string } }
-        | undefined;
-      if (meta?.claudeCode?.toolName?.startsWith("mcp__")) {
-        indices.push(i);
-      }
-    }
-    return indices;
-  }, [items]);
+  // Fold each completed turn's tool-call work into a collapsible chip, and emit
+  // the keepMounted indices (standalone MCP-app rows, whose iframes must survive
+  // scrolling) + the item→row map in the same pass.
+  const grouping = useMemo<ThreadGrouping>(
+    () => buildThreadGroups(items, collapseMode, groupOverrides),
+    [items, collapseMode, groupOverrides],
+  );
+  const threadRows = grouping.rows;
+  const rowKeepMounted = grouping.keepMounted;
+  const itemIdToRowIndex = grouping.idToRowIndex;
+
+  // Changing the global mode wipes ephemeral per-chip overrides.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally keyed on collapseMode only
+  useEffect(() => {
+    sessionViewActions.clearGroupOverrides();
+  }, [collapseMode]);
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const search = useConversationSearch({ items, containerRef, listRef });
+
+  // Adapter so search (which scrolls by item index) lands on the right row,
+  // since grouped rows != items.
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const itemIdToRowIndexRef = useRef(itemIdToRowIndex);
+  itemIdToRowIndexRef.current = itemIdToRowIndex;
+  const searchListRef = useRef<VirtualizedListHandle>({
+    scrollToBottom: () => listRef.current?.scrollToBottom(),
+    scrollToIndex: (index: number) => {
+      const id = itemsRef.current[index]?.id;
+      const rowIdx =
+        id != null ? itemIdToRowIndexRef.current.get(id) : undefined;
+      listRef.current?.scrollToIndex(rowIdx ?? index);
+    },
+  });
+
+  const search = useConversationSearch({
+    items,
+    containerRef,
+    listRef: searchListRef,
+  });
 
   const handleScrollStateChange = useCallback((isAtBottom: boolean) => {
     isAtBottomRef.current = isAtBottom;
@@ -258,7 +291,65 @@ export function ConversationView({
     [repoPath, taskId, slackThreadUrl, firstUserMessageId, initialItemIds],
   );
 
-  const getItemKey = useCallback((item: ConversationItem) => item.id, []);
+  const getRowKey = useCallback((row: ThreadRow) => row.id, []);
+
+  const renderRow = useCallback(
+    (row: ThreadRow) => {
+      if (row.kind === "item") return renderItem(row.item);
+      return (
+        <ToolCallGroupChip
+          summary={row.summary}
+          expanded={row.expanded}
+          turnComplete={row.turnComplete}
+          onToggle={() =>
+            sessionViewActions.setGroupOverride(row.id, !row.expanded)
+          }
+        >
+          {row.expanded
+            ? row.items.map((it) => {
+                // Plain assistant text inside the group has no leading icon, so
+                // pad it to line up with the tool titles (the text-next-to-icon
+                // column = ToolCallBlock's pl-3 + the icon/gap width). Tool and
+                // thought rows already carry their own icon indent.
+                const isPlainMessage =
+                  it.type === "session_update" &&
+                  it.update.sessionUpdate === "agent_message_chunk";
+                return (
+                  <div
+                    key={it.id}
+                    className={isPlainMessage ? "pl-5" : undefined}
+                  >
+                    {renderItem(it)}
+                  </div>
+                );
+              })
+            : null}
+        </ToolCallGroupChip>
+      );
+    },
+    [renderItem, sessionViewActions],
+  );
+
+  const footer = (
+    <div className={compact ? "pb-1" : "pb-16"}>
+      <SessionFooter
+        task={task}
+        isPromptPending={isPromptPending}
+        promptStartedAt={promptStartedAt}
+        lastGenerationDuration={
+          lastTurnInfo?.isComplete
+            ? Math.max(0, lastTurnInfo.durationMs - pausedDurationMs)
+            : null
+        }
+        lastStopReason={lastTurnInfo?.stopReason}
+        queuedCount={queuedMessages.length}
+        hasPendingPermission={pendingPermissionsCount > 0}
+        pausedDurationMs={pausedDurationMs}
+        isCompacting={isCompacting}
+        usage={contextUsage}
+      />
+    </div>
+  );
 
   return (
     <WorkerPoolContextProvider
@@ -284,36 +375,17 @@ export function ConversationView({
         )}
 
         <SessionTaskIdProvider taskId={taskId}>
-          <VirtualizedList
+          <VirtualizedList<ThreadRow>
             ref={listRef}
-            items={items}
-            getItemKey={getItemKey}
-            renderItem={renderItem}
+            items={threadRows}
+            getItemKey={getRowKey}
+            renderItem={renderRow}
             onScrollStateChange={handleScrollStateChange}
-            keepMounted={mcpAppIndices}
+            keepMounted={rowKeepMounted}
             className="absolute inset-0 bg-background"
             itemClassName="mx-auto px-2 py-1.5"
             itemStyle={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
-            footer={
-              <div className={compact ? "pb-1" : "pb-16"}>
-                <SessionFooter
-                  task={task}
-                  isPromptPending={isPromptPending}
-                  promptStartedAt={promptStartedAt}
-                  lastGenerationDuration={
-                    lastTurnInfo?.isComplete
-                      ? Math.max(0, lastTurnInfo.durationMs - pausedDurationMs)
-                      : null
-                  }
-                  lastStopReason={lastTurnInfo?.stopReason}
-                  queuedCount={queuedMessages.length}
-                  hasPendingPermission={pendingPermissionsCount > 0}
-                  pausedDurationMs={pausedDurationMs}
-                  isCompacting={isCompacting}
-                  usage={contextUsage}
-                />
-              </div>
-            }
+            footer={footer}
           />
         </SessionTaskIdProvider>
         {showScrollButton && (
diff --git a/packages/ui/src/features/sessions/components/new-thread/ToolCallGroupChip.tsx b/packages/ui/src/features/sessions/components/new-thread/ToolCallGroupChip.tsx
new file mode 100644
index 000000000..4d9a5d35a
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/new-thread/ToolCallGroupChip.tsx
@@ -0,0 +1,73 @@
+import { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
+import type { GroupSummary } from "@posthog/ui/features/sessions/components/new-thread/buildThreadGroups";
+import { motion as motionConfig } from "@posthog/ui/features/sessions/components/new-thread/conversationThreadConfig";
+import { ToolRow } from "@posthog/ui/features/sessions/components/session-update/ToolRow";
+import { motion, useReducedMotion } from "framer-motion";
+import type { ReactNode } from "react";
+
+interface ToolCallGroupChipProps {
+  summary: GroupSummary;
+  expanded: boolean;
+  turnComplete: boolean;
+  onToggle: () => void;
+  /** Rendered group items, shown inside the ToolRow's box when expanded. */
+  children?: ReactNode;
+}
+
+/**
+ * A tool-call group is just a ToolRow whose body is the turn's tool work: a
+ * collapsible trigger (caret + summary + icon strip) and the same bordered
+ * content box. While the turn runs it shows the live action; once complete it
+ * shows a verb-led summary.
+ */
+export function ToolCallGroupChip({
+  summary,
+  expanded,
+  turnComplete,
+  onToggle,
+  children,
+}: ToolCallGroupChipProps) {
+  const reduceMotion = useReducedMotion();
+  const animate = motionConfig.enabled && !reduceMotion;
+  const Caret = expanded ? CaretDownIcon : CaretRightIcon;
+  const running = !turnComplete && summary.liveLabel != null;
+  const label = running ? summary.liveLabel : summary.doneLabel;
+
+  return (
+    <motion.div
+      initial={animate ? motionConfig.chip.initial : false}
+      animate={animate ? motionConfig.chip.animate : undefined}
+      transition={animate ? motionConfig.chip.transition : undefined}
+      className="pl-3"
+    >
+      <ToolRow
+        collapsible
+        open={expanded}
+        onOpenChange={onToggle}
+        content={children}
+        leading={
+          <span className="shrink-0 pt-1">
+            <Caret
+              size={12}
+              weight="bold"
+              className="text-gray-10 transition-colors group-hover:text-gray-12"
+            />
+          </span>
+        }
+        trailing={
+          !expanded && summary.icons.length > 0 ? (
+            <span className="ml-1 flex shrink-0 items-center gap-1.5 text-gray-9">
+              {summary.icons.map(({ Icon, key }) => (
+                <Icon key={key} size={13} />
+              ))}
+            </span>
+          ) : null
+        }
+      >
+        <span className="truncate font-medium text-[13px] text-gray-11 transition-colors group-hover:text-gray-12">
+          {label}
+        </span>
+      </ToolRow>
+    </motion.div>
+  );
+}
diff --git a/packages/ui/src/features/sessions/components/new-thread/buildThreadGroups.ts b/packages/ui/src/features/sessions/components/new-thread/buildThreadGroups.ts
new file mode 100644
index 000000000..5479a32c1
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/new-thread/buildThreadGroups.ts
@@ -0,0 +1,293 @@
+import type { Icon } from "@phosphor-icons/react";
+import type { ConversationItem } from "@posthog/ui/features/sessions/components/buildConversationItems";
+import {
+  buildDoneLabel,
+  type CollapseMode,
+  type GroupCounts,
+  grouping,
+  iconForToolKind,
+  MCP_ICON,
+  SUBAGENT_ICON,
+} from "@posthog/ui/features/sessions/components/new-thread/conversationThreadConfig";
+
+export interface GroupIconEntry {
+  Icon: Icon;
+  key: string;
+}
+
+export interface GroupSummary {
+  counts: GroupCounts;
+  icons: GroupIconEntry[];
+  /** Title of the most recent tool — "what's happening now" while running. */
+  liveLabel: string | null;
+  /** Verb-led summary shown once the turn completes. */
+  doneLabel: string;
+}
+
+/**
+ * One rendered row of the new thread. Either a passthrough conversation item or
+ * a collapsed tool-call group standing in for a run of work items.
+ */
+export type ThreadRow =
+  | {
+      kind: "item";
+      id: string;
+      item: ConversationItem;
+    }
+  | {
+      kind: "tool_group";
+      id: string;
+      items: ConversationItem[];
+      summary: GroupSummary;
+      turnComplete: boolean;
+      expanded: boolean;
+    };
+
+export interface ThreadGrouping {
+  rows: ThreadRow[];
+  /** Row indices of standalone MCP-app items, for the list's keepMounted. */
+  keepMounted: number[];
+  /** Every item id (incl. those folded into a group) → its row index. */
+  idToRowIndex: Map<string, number>;
+}
+
+function getToolName(update: { _meta?: unknown }): string | undefined {
+  const meta = update._meta as
+    | { claudeCode?: { toolName?: string } }
+    | undefined;
+  return meta?.claudeCode?.toolName;
+}
+
+function isMcpToolItem(item: ConversationItem): boolean {
+  if (item.type !== "session_update") return false;
+  if (item.update.sessionUpdate !== "tool_call") return false;
+  return getToolName(item.update)?.startsWith("mcp__") ?? false;
+}
+
+function isAlwaysVisibleItem(item: ConversationItem): boolean {
+  return (
+    item.type === "session_update" &&
+    grouping.alwaysVisibleUpdates.has(item.update.sessionUpdate)
+  );
+}
+
+function summarize(items: ConversationItem[]): GroupSummary {
+  const counts: GroupCounts = {
+    execute: 0,
+    read: 0,
+    edit: 0,
+    delete: 0,
+    move: 0,
+    search: 0,
+    fetch: 0,
+    subagents: 0,
+    other: 0,
+    messages: 0,
+  };
+  let liveLabel: string | null = null;
+  const icons: GroupIconEntry[] = [];
+  const seenIcons = new Set<string>();
+
+  const addIcon = (Icon: Icon, key: string) => {
+    if (seenIcons.has(key) || icons.length >= grouping.maxIconsInChip) return;
+    seenIcons.add(key);
+    icons.push({ Icon, key });
+  };
+
+  for (const item of items) {
+    if (item.type !== "session_update") continue;
+    const update = item.update;
+    if (update.sessionUpdate === "tool_call") {
+      // Most recent tool's title — what the chip shows while still running.
+      if (update.title) liveLabel = update.title;
+      const name = getToolName(update);
+      if (name && grouping.subagentToolNames.has(name)) {
+        counts.subagents++;
+        addIcon(SUBAGENT_ICON, "subagent");
+      } else if (name?.startsWith("mcp__")) {
+        counts.other++;
+        addIcon(MCP_ICON, "mcp");
+      } else {
+        const kind = update.kind ?? null;
+        switch (kind) {
+          case "execute":
+            counts.execute++;
+            break;
+          case "read":
+            counts.read++;
+            break;
+          case "edit":
+            counts.edit++;
+            break;
+          case "delete":
+            counts.delete++;
+            break;
+          case "move":
+            counts.move++;
+            break;
+          case "search":
+            counts.search++;
+            break;
+          case "fetch":
+            counts.fetch++;
+            break;
+          default:
+            counts.other++;
+            break;
+        }
+        addIcon(iconForToolKind(kind), `kind:${kind ?? "other"}`);
+      }
+    } else if (
+      update.sessionUpdate === "agent_message_chunk" ||
+      update.sessionUpdate === "console"
+    ) {
+      counts.messages++;
+    }
+  }
+
+  return { counts, icons, liveLabel, doneLabel: buildDoneLabel(counts) };
+}
+
+// Completed turns are frozen by reference in the conversation builder, so their
+// group summary never changes — cache it keyed on the group's (stable) first
+// item to avoid re-walking every frozen group on every streamed token. The
+// active (incomplete) turn is never cached, so its live label stays correct.
+const summaryCache = new WeakMap<
+  ConversationItem,
+  { len: number; summary: GroupSummary }
+>();
+
+function summarizeMemo(
+  leading: ConversationItem[],
+  turnComplete: boolean,
+): GroupSummary {
+  const key = leading[0];
+  if (turnComplete) {
+    const cached = summaryCache.get(key);
+    if (cached && cached.len === leading.length) return cached.summary;
+  }
+  const summary = summarize(leading);
+  if (turnComplete) summaryCache.set(key, { len: leading.length, summary });
+  return summary;
+}
+
+/**
+ * Transform the flat conversation items into rows for the new thread, folding
+ * each turn's tool-call work into a collapsible group according to the global
+ * collapse mode and any per-group overrides. Emits the keepMounted indices and
+ * item→row map in the same pass so callers don't re-walk the list.
+ *
+ * Safe to run on every render under useMemo; frozen-turn summaries are cached.
+ */
+export function buildThreadGroups(
+  items: ConversationItem[],
+  mode: CollapseMode,
+  overrides: Record<string, boolean>,
+): ThreadGrouping {
+  const rows: ThreadRow[] = [];
+  const keepMounted: number[] = [];
+  const idToRowIndex = new Map<string, number>();
+  let buffer: ConversationItem[] = [];
+
+  const pushItemRow = (item: ConversationItem): number => {
+    const idx = rows.length;
+    rows.push({ kind: "item", id: item.id, item });
+    idToRowIndex.set(item.id, idx);
+    return idx;
+  };
+
+  const flush = () => {
+    if (buffer.length === 0) return;
+    const first = buffer[0];
+    const turnComplete =
+      first.type === "session_update" && first.turnContext.turnComplete;
+    const groupId = `group:${first.id}`;
+
+    // Peel the trailing assistant answer (a run of agent_message_chunks at the
+    // end of the turn) out of the group so it stays visible even when collapsed.
+    const leading = [...buffer];
+    const trailing: ConversationItem[] = [];
+    while (leading.length > 0) {
+      const last = leading[leading.length - 1];
+      if (
+        last.type === "session_update" &&
+        last.update.sessionUpdate === "agent_message_chunk"
+      ) {
+        trailing.unshift(leading.pop() as ConversationItem);
+      } else {
+        break;
+      }
+    }
+
+    // Nothing collapsible (turn was only an assistant answer): render inline.
+    if (leading.length === 0) {
+      for (const item of buffer) pushItemRow(item);
+      buffer = [];
+      return;
+    }
+
+    // Base behavior from the global mode; a per-group override (true=expanded,
+    // false=collapsed) wins. A chip is shown whenever the group is collapsible
+    // by the mode or the user explicitly collapsed it.
+    const baseCollapse = mode === "all" || (mode === "partial" && turnComplete);
+    const override = overrides[groupId];
+    const expanded = override ?? !baseCollapse;
+    const chipPresent = baseCollapse || override === false;
+
+    if (chipPresent) {
+      // The chip owns its children (rendered inside one bordered box when
+      // expanded), so they are NOT emitted as separate rows here. Their ids
+      // still map to the group's row so find-in-thread can scroll to them.
+      const idx = rows.length;
+      rows.push({
+        kind: "tool_group",
+        id: groupId,
+        items: leading,
+        summary: summarizeMemo(leading, turnComplete),
+        turnComplete,
+        expanded,
+      });
+      for (const item of leading) idToRowIndex.set(item.id, idx);
+    } else {
+      for (const item of leading) pushItemRow(item);
+    }
+    for (const item of trailing) pushItemRow(item);
+    buffer = [];
+  };
+
+  for (const item of items) {
+    switch (item.type) {
+      case "user_message":
+      case "git_action":
+      case "skill_button_action": {
+        flush();
+        pushItemRow(item);
+        break;
+      }
+      case "session_update": {
+        if (grouping.excludeMcpApps && isMcpToolItem(item)) {
+          // Keep MCP-app tool calls standalone so their iframes stay mounted.
+          flush();
+          keepMounted.push(pushItemRow(item));
+        } else if (isAlwaysVisibleItem(item)) {
+          // Setup/clone progress and the like never collapse into a group.
+          flush();
+          pushItemRow(item);
+        } else {
+          buffer.push(item);
+        }
+        break;
+      }
+      default: {
+        // git_action_result, turn_cancelled, user_shell_execute, queued —
+        // standalone rows that belong to the current turn's epilogue.
+        flush();
+        pushItemRow(item);
+        break;
+      }
+    }
+  }
+  flush();
+
+  return { rows, keepMounted, idToRowIndex };
+}
diff --git a/packages/ui/src/features/sessions/components/new-thread/conversationThreadConfig.ts b/packages/ui/src/features/sessions/components/new-thread/conversationThreadConfig.ts
new file mode 100644
index 000000000..b9361870e
--- /dev/null
+++ b/packages/ui/src/features/sessions/components/new-thread/conversationThreadConfig.ts
@@ -0,0 +1,159 @@
+import {
+  ArrowsLeftRight,
+  Brain,
+  ChatCircle,
+  FileText,
+  Globe,
+  type Icon,
+  MagnifyingGlass,
+  PencilSimple,
+  PuzzlePiece,
+  Robot,
+  Terminal,
+  Trash,
+  Wrench,
+} from "@phosphor-icons/react";
+import type { CodeToolKind } from "@posthog/ui/features/sessions/types";
+
+/**
+ * Single source of truth for the modernized conversation thread's tuneable
+ * behavior. Everything here is meant to be edited freely — no magic numbers
+ * live in the components or the grouping selector.
+ */
+
+// ---------- Collapse modes ----------
+
+/** How aggressively completed turns collapse into a tool-call group chip. */
+export type CollapseMode = "all" | "partial" | "none";
+
+export const COLLAPSE_MODE_DEFAULT: CollapseMode = "all";
+
+export const COLLAPSE_MODE_OPTIONS: {
+  value: CollapseMode;
+  label: string;
+  description: string;
+}[] = [
+  {
+    value: "all",
+    label: "All collapsed",
+    description: "Every turn's tool activity is collapsed into a summary chip.",
+  },
+  {
+    value: "partial",
+    label: "Collapse when finished turn",
+    description:
+      "The active turn streams expanded; completed turns collapse to a chip.",
+  },
+  {
+    value: "none",
+    label: "No collapsing",
+    description: "Everything stays expanded.",
+  },
+];
+
+// ---------- Grouping ----------
+
+export const grouping = {
+  /**
+   * Tool names that spawn a subagent. Counted separately in the chip summary.
+   * @see ToolCallBlock — same names drive the SubagentToolView branch.
+   */
+  subagentToolNames: new Set<string>(["Task", "Agent"]),
+  /**
+   * MCP-app tool calls are excluded from collapsing so their iframes stay
+   * mounted (the `keepMounted` contract). Flip to false to fold them in.
+   */
+  excludeMcpApps: true,
+  /**
+   * session_update kinds that never fold into a group — always rendered as
+   * their own row regardless of collapse mode (e.g. the cloud setup / clone
+   * progress card).
+   */
+  alwaysVisibleUpdates: new Set<string>(["progress_group"]),
+  /** Max distinct tool icons shown in a collapsed chip's icon strip. */
+  maxIconsInChip: 10,
+} as const;
+
+/** Per-action tallies for a collapsed group. */
+export interface GroupCounts {
+  execute: number;
+  read: number;
+  edit: number;
+  delete: number;
+  move: number;
+  search: number;
+  fetch: number;
+  subagents: number;
+  other: number;
+  messages: number;
+}
+
+function plural(n: number, singular: string, pluralForm: string): string {
+  return `${n} ${n === 1 ? singular : pluralForm}`;
+}
+
+function files(n: number): string {
+  return n === 1 ? "a file" : `${n} files`;
+}
+
+/**
+ * The "done" summary shown once a turn completes — verb-led and action-shaped,
+ * e.g. "Ran 25 commands, read a file, edited a file". Tuneable: reorder or
+ * reword segments freely.
+ */
+export function buildDoneLabel(counts: GroupCounts): string {
+  const seg: string[] = [];
+  if (counts.execute > 0)
+    seg.push(`ran ${plural(counts.execute, "command", "commands")}`);
+  if (counts.read > 0) seg.push(`read ${files(counts.read)}`);
+  if (counts.edit > 0) seg.push(`edited ${files(counts.edit)}`);
+  if (counts.delete > 0) seg.push(`deleted ${files(counts.delete)}`);
+  if (counts.move > 0) seg.push(`moved ${files(counts.move)}`);
+  if (counts.search > 0)
+    seg.push(`ran ${plural(counts.search, "search", "searches")}`);
+  if (counts.fetch > 0)
+    seg.push(`fetched ${plural(counts.fetch, "page", "pages")}`);
+  if (counts.subagents > 0)
+    seg.push(plural(counts.subagents, "subagent", "subagents"));
+  if (counts.other > 0)
+    seg.push(plural(counts.other, "tool call", "tool calls"));
+  if (seg.length === 0) return "Worked";
+  const joined = seg.join(", ");
+  return joined.charAt(0).toUpperCase() + joined.slice(1);
+}
+
+const KIND_ICONS: Partial<Record<CodeToolKind, Icon>> = {
+  read: FileText,
+  edit: PencilSimple,
+  delete: Trash,
+  move: ArrowsLeftRight,
+  search: MagnifyingGlass,
+  execute: Terminal,
+  think: Brain,
+  fetch: Globe,
+  question: ChatCircle,
+};
+
+export function iconForToolKind(kind: CodeToolKind | null | undefined): Icon {
+  return (kind && KIND_ICONS[kind]) || Wrench;
+}
+
+export const SUBAGENT_ICON: Icon = Robot;
+export const MCP_ICON: Icon = PuzzlePiece;
+
+// ---------- Motion ----------
+
+/**
+ * Motion is scoped to the content layer only — never the virtualizer's row
+ * `translateY`, which it owns. All of this collapses to instant when the user
+ * prefers reduced motion (handled in the components).
+ */
+export const motion = {
+  enabled: true,
+  /** Group chip mount + the expanded↔chip swap. */
+  chip: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.18, ease: "easeOut" as const },
+  },
+} as const;
diff --git a/packages/ui/src/features/sessions/components/session-update/AgentMessage.tsx b/packages/ui/src/features/sessions/components/session-update/AgentMessage.tsx
index 2d59f6960..b442be535 100644
--- a/packages/ui/src/features/sessions/components/session-update/AgentMessage.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/AgentMessage.tsx
@@ -96,7 +96,7 @@ function BareFileLink({ text }: { text: string }) {
 
   if (!resolved) {
     return (
-      <Code variant="ghost" className="text-(--accent-11) text-[13px]">
+      <Code variant="ghost" className="border border-border text-[13px]">
         {text}
       </Code>
     );
@@ -126,7 +126,10 @@ const agentComponents: Partial<Components> = {
     }
 
     return (
-      <Code variant="ghost" className="text-(--accent-11) text-[13px]">
+      <Code
+        variant="ghost"
+        className="border border-border bg-gray-3 text-[13px]"
+      >
         {children}
       </Code>
     );
diff --git a/packages/ui/src/features/sessions/components/session-update/CodePreview.tsx b/packages/ui/src/features/sessions/components/session-update/CodePreview.tsx
index 531ba1cdb..3b1d29754 100644
--- a/packages/ui/src/features/sessions/components/session-update/CodePreview.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/CodePreview.tsx
@@ -158,13 +158,20 @@ function DiffPreview({
   return (
     <div style={CODE_PREVIEW_CONTAINER_STYLE}>
       {showPath && filePath && (
-        <div style={CODE_PREVIEW_PATH_STYLE} title={filePath}>
+        <div
+          style={CODE_PREVIEW_PATH_STYLE}
+          className="scroll-mask-2"
+          title={filePath}
+        >
           <Code variant="ghost" className="truncate text-[13px]">
             {compactHomePath(filePath)}
           </Code>
         </div>
       )}
-      <div style={maxHeight ? { maxHeight, overflow: "auto" } : undefined}>
+      <div
+        className="scroll-mask-2"
+        style={maxHeight ? { maxHeight, overflow: "auto" } : undefined}
+      >
         <MultiFileDiff oldFile={oldFile} newFile={newFile} options={options} />
       </div>
     </div>
diff --git a/packages/ui/src/features/sessions/components/session-update/DeleteToolView.tsx b/packages/ui/src/features/sessions/components/session-update/DeleteToolView.tsx
index 5739be3b4..a2b34699b 100644
--- a/packages/ui/src/features/sessions/components/session-update/DeleteToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/DeleteToolView.tsx
@@ -1,11 +1,10 @@
 import { Trash } from "@phosphor-icons/react";
-import { Box, Flex, Text } from "@radix-ui/themes";
+import { Text } from "@radix-ui/themes";
 import { FileMentionChip } from "./FileMentionChip";
+import { ToolRow } from "./ToolRow";
 import {
   type DiffContent,
   findDiffContent,
-  LoadingIcon,
-  StatusIndicators,
   type ToolViewProps,
   useToolCallStatus,
 } from "./toolCallUtils";
@@ -32,17 +31,18 @@ export function DeleteToolView({
   const deletedLines = getDeletedLineCount(diff);
 
   return (
-    <Box className="max-w-4xl overflow-hidden rounded-lg border border-gray-6">
-      <Flex align="center" gap="2" className="px-3 py-2">
-        <LoadingIcon icon={Trash} isLoading={isLoading} />
-        {filePath && <FileMentionChip filePath={filePath} />}
-        {deletedLines !== null && (
-          <Text className="font-mono text-[13px]">
-            <span className="text-red-11">-{deletedLines}</span>
-          </Text>
-        )}
-        <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-      </Flex>
-    </Box>
+    <ToolRow
+      icon={Trash}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+    >
+      {filePath && <FileMentionChip filePath={filePath} />}
+      {deletedLines !== null && (
+        <Text className="font-mono text-[13px]">
+          <span className="text-red-11">-{deletedLines}</span>
+        </Text>
+      )}
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/EditToolView.tsx b/packages/ui/src/features/sessions/components/session-update/EditToolView.tsx
index c99401fc5..b130c94c8 100644
--- a/packages/ui/src/features/sessions/components/session-update/EditToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/EditToolView.tsx
@@ -1,16 +1,10 @@
-import {
-  ArrowsInSimple as ArrowsInSimpleIcon,
-  ArrowsOutSimple as ArrowsOutSimpleIcon,
-  PencilSimple,
-} from "@phosphor-icons/react";
-import { Box, Flex, IconButton, Text } from "@radix-ui/themes";
-import { useEffect, useState } from "react";
+import { PencilSimple } from "@phosphor-icons/react";
+import { Text } from "@radix-ui/themes";
 import { CodePreview } from "./CodePreview";
 import { FileMentionChip } from "./FileMentionChip";
+import { ToolRow } from "./ToolRow";
 import {
   findDiffContent,
-  LoadingIcon,
-  StatusIndicators,
   type ToolViewProps,
   useToolCallStatus,
 } from "./toolCallUtils";
@@ -73,54 +67,33 @@ export function EditToolView({
   const diffStats = diff ? getDiffStats(oldText, newText) : null;
 
   const isPlanFile = filePath.includes("claude/plans/");
-  const [isExpanded, setIsExpanded] = useState(!isPlanFile);
-
-  useEffect(() => {
-    if (isPlanFile) {
-      setIsExpanded(false);
-    }
-  }, [isPlanFile]);
 
   return (
-    <Box className="max-w-4xl overflow-hidden rounded-lg border border-gray-6">
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex w-full cursor-pointer items-center justify-between border-none bg-transparent px-3 py-2"
-      >
-        <Flex align="center" gap="2">
-          <LoadingIcon icon={PencilSimple} isLoading={isLoading} />
-          {filePath && <FileMentionChip filePath={filePath} />}
-          {diffStats && (
-            <Text className="font-mono text-[13px]">
-              <span className="text-green-11">+{diffStats.added}</span>{" "}
-              <span className="text-red-11">-{diffStats.removed}</span>
-            </Text>
-          )}
-          <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-        </Flex>
-        {hasDiff && (
-          <IconButton asChild size="1" variant="ghost" color="gray">
-            <span>
-              {isExpanded ? (
-                <ArrowsInSimpleIcon size={12} />
-              ) : (
-                <ArrowsOutSimpleIcon size={12} />
-              )}
-            </span>
-          </IconButton>
-        )}
-      </button>
-
-      {isExpanded && hasDiff && (
-        <CodePreview
-          content={newText ?? ""}
-          filePath={filePath}
-          oldContent={isNewFile ? null : oldText}
-          maxHeight="700px"
-          cacheKey={toolCall.toolCallId}
-        />
+    <ToolRow
+      icon={PencilSimple}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      defaultOpen={!isPlanFile}
+      content={
+        hasDiff ? (
+          <CodePreview
+            content={newText ?? ""}
+            filePath={filePath}
+            oldContent={isNewFile ? null : oldText}
+            maxHeight="700px"
+            cacheKey={toolCall.toolCallId}
+          />
+        ) : undefined
+      }
+    >
+      {filePath && <FileMentionChip filePath={filePath} />}
+      {diffStats && (
+        <Text className="font-mono text-[13px]">
+          <span className="text-green-11">+{diffStats.added}</span>{" "}
+          <span className="text-red-11">-{diffStats.removed}</span>
+        </Text>
       )}
-    </Box>
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/ExecuteToolView.tsx b/packages/ui/src/features/sessions/components/session-update/ExecuteToolView.tsx
index 93451de5a..2217f02bd 100644
--- a/packages/ui/src/features/sessions/components/session-update/ExecuteToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/ExecuteToolView.tsx
@@ -1,12 +1,9 @@
 import { Terminal } from "@phosphor-icons/react";
 import { compactHomePath } from "@posthog/shared";
-import { Box, Flex } from "@radix-ui/themes";
-import { useState } from "react";
+import { ToolRow } from "./ToolRow";
 import {
-  ExpandableIcon,
-  ExpandedContentBox,
+  ContentPre,
   getContentText,
-  StatusIndicators,
   stripCodeFences,
   ToolTitle,
   type ToolViewProps,
@@ -28,7 +25,6 @@ export function ExecuteToolView({
   turnComplete,
   expanded = false,
 }: ToolViewProps) {
-  const [isExpanded, setIsExpanded] = useState(expanded);
   const { status, rawInput, content, title } = toolCall;
   const { isLoading, isFailed, wasCancelled } = useToolCallStatus(
     status,
@@ -46,45 +42,27 @@ export function ExecuteToolView({
     "",
   );
   const hasOutput = output.trim().length > 0;
-  const isExpandable = hasOutput;
-
-  const handleClick = () => {
-    if (isExpandable) {
-      setIsExpanded(!isExpanded);
-    }
-  };
 
   return (
-    <Box className="py-0.5">
-      <Flex
-        gap="2"
-        className={`group min-w-0 ${isExpandable ? "cursor-pointer" : ""}`}
-        onClick={handleClick}
-      >
-        <Box className="shrink-0 pt-px">
-          <ExpandableIcon
-            icon={Terminal}
-            isLoading={isLoading}
-            isExpandable={isExpandable}
-            isExpanded={isExpanded}
-          />
-        </Box>
-        <Flex align="center" gap="2" wrap="wrap" className="min-w-0">
-          {description && <ToolTitle>{description}</ToolTitle>}
-          {command && (
-            <ToolTitle className="min-w-0 truncate">
-              <span className="font-mono text-accent-11" title={command}>
-                {truncateText(compactHomePath(command), MAX_COMMAND_LENGTH)}
-              </span>
-            </ToolTitle>
-          )}
-          <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-        </Flex>
-      </Flex>
-
-      {isExpanded && hasOutput && (
-        <ExpandedContentBox>{output}</ExpandedContentBox>
+    <ToolRow
+      icon={Terminal}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      defaultOpen={expanded}
+      content={hasOutput ? <ContentPre>{output}</ContentPre> : undefined}
+    >
+      {description && <ToolTitle>{description}</ToolTitle>}
+      {command && (
+        <ToolTitle className="min-w-0 truncate">
+          <span
+            className="block truncate border border-border bg-gray-5 font-mono"
+            title={command}
+          >
+            {truncateText(compactHomePath(command), MAX_COMMAND_LENGTH)}
+          </span>
+        </ToolTitle>
       )}
-    </Box>
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/FetchToolView.tsx b/packages/ui/src/features/sessions/components/session-update/FetchToolView.tsx
index e8d48c271..6b4a278a5 100644
--- a/packages/ui/src/features/sessions/components/session-update/FetchToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/FetchToolView.tsx
@@ -1,12 +1,10 @@
 import { Globe } from "@phosphor-icons/react";
-import { Box, Flex, Link } from "@radix-ui/themes";
-import { useState } from "react";
+import { Link } from "@radix-ui/themes";
+import { ToolRow } from "./ToolRow";
 import {
   ContentPre,
-  ExpandableIcon,
   findResourceLink,
   getContentText,
-  StatusIndicators,
   ToolTitle,
   type ToolViewProps,
   truncateText,
@@ -20,7 +18,6 @@ export function FetchToolView({
   turnCancelled,
   turnComplete,
 }: ToolViewProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
   const { status, content, title } = toolCall;
   const { isLoading, isFailed, wasCancelled } = useToolCallStatus(
     status,
@@ -33,61 +30,48 @@ export function FetchToolView({
   const hasContent = fetchedContent.trim().length > 0;
 
   const url = resourceLink?.uri ?? "";
-  const isExpandable = hasContent || url.length > MAX_URL_LENGTH;
+  const showUrl = url.length > MAX_URL_LENGTH;
+  const hasBody = hasContent || showUrl;
 
-  const handleClick = () => {
-    if (isExpandable) {
-      setIsExpanded(!isExpanded);
-    }
-  };
+  const body = hasBody ? (
+    <>
+      {showUrl && (
+        <div
+          className={
+            hasContent ? "border-gray-6 border-b px-3 py-2" : "px-3 py-2"
+          }
+        >
+          <Link
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="break-all text-[13px]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {url}
+          </Link>
+        </div>
+      )}
+      {hasContent && <ContentPre>{fetchedContent}</ContentPre>}
+    </>
+  ) : undefined;
 
   return (
-    <Box>
-      <Flex
-        align="center"
-        gap="2"
-        className={`group min-w-0 py-0.5 ${isExpandable ? "cursor-pointer" : ""}`}
-        onClick={handleClick}
-      >
-        <ExpandableIcon
-          icon={Globe}
-          isLoading={isLoading}
-          isExpandable={isExpandable}
-          isExpanded={isExpanded}
-        />
-        <ToolTitle>{title || "Fetch"}</ToolTitle>
-        {url && (
-          <ToolTitle>
-            <span className="font-mono text-accent-11">
-              {truncateText(url, MAX_URL_LENGTH)}
-            </span>
-          </ToolTitle>
-        )}
-        <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-      </Flex>
-
-      {isExpanded && (
-        <Box className="max-w-4xl overflow-hidden rounded-lg border border-gray-6">
-          {url.length > MAX_URL_LENGTH && (
-            <Box
-              className={
-                hasContent ? "border-gray-6 border-b px-3 py-2" : "px-3 py-2"
-              }
-            >
-              <Link
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="break-all text-[13px]"
-                onClick={(e) => e.stopPropagation()}
-              >
-                {url}
-              </Link>
-            </Box>
-          )}
-          {hasContent && <ContentPre>{fetchedContent}</ContentPre>}
-        </Box>
+    <ToolRow
+      icon={Globe}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      content={body}
+    >
+      <ToolTitle>{title || "Fetch"}</ToolTitle>
+      {url && (
+        <ToolTitle>
+          <span className="font-mono text-accent-11">
+            {truncateText(url, MAX_URL_LENGTH)}
+          </span>
+        </ToolTitle>
       )}
-    </Box>
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/FileMentionChip.tsx b/packages/ui/src/features/sessions/components/session-update/FileMentionChip.tsx
index 98fcb927a..9da40b2ca 100644
--- a/packages/ui/src/features/sessions/components/session-update/FileMentionChip.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/FileMentionChip.tsx
@@ -85,7 +85,7 @@ export const FileMentionChip = memo(function FileMentionChip({
       <Text className="text-[13px]">
         <FileIcon filename={filename} size={12} />
         <span className="flex min-w-0 flex-1 items-baseline gap-1 overflow-hidden font-mono text-[13px] leading-none">
-          <span className="flex-shrink-0 whitespace-nowrap font-semibold">
+          <span className="shrink-0 whitespace-nowrap font-semibold">
             {filename}
           </span>
           {directory && (
diff --git a/packages/ui/src/features/sessions/components/session-update/MoveToolView.tsx b/packages/ui/src/features/sessions/components/session-update/MoveToolView.tsx
index 5db42204b..b64d1d4f9 100644
--- a/packages/ui/src/features/sessions/components/session-update/MoveToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/MoveToolView.tsx
@@ -2,6 +2,7 @@ import { ArrowsLeftRight } from "@phosphor-icons/react";
 import { ToolRow } from "./ToolRow";
 import {
   getFilename,
+  ToolTitle,
   type ToolViewProps,
   useToolCallStatus,
 } from "./toolCallUtils";
@@ -28,15 +29,17 @@ export function MoveToolView({
       isFailed={isFailed}
       wasCancelled={wasCancelled}
     >
-      {title ||
-        (sourcePath && destPath ? (
-          <>
-            Move <span className="font-mono">{getFilename(sourcePath)}</span> →{" "}
-            <span className="font-mono">{getFilename(destPath)}</span>
-          </>
-        ) : (
-          "Move file"
-        ))}
+      <ToolTitle>
+        {title ||
+          (sourcePath && destPath ? (
+            <>
+              Move <span className="font-mono">{getFilename(sourcePath)}</span>{" "}
+              → <span className="font-mono">{getFilename(destPath)}</span>
+            </>
+          ) : (
+            "Move file"
+          ))}
+      </ToolTitle>
     </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/QuestionToolView.tsx b/packages/ui/src/features/sessions/components/session-update/QuestionToolView.tsx
index a66110b9f..1649b5909 100644
--- a/packages/ui/src/features/sessions/components/session-update/QuestionToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/QuestionToolView.tsx
@@ -1,5 +1,5 @@
 import { ChatCircle, CheckCircle } from "@phosphor-icons/react";
-import { Box, Flex, Text } from "@radix-ui/themes";
+import { Text } from "@radix-ui/themes";
 import { ToolRow } from "./ToolRow";
 import {
   getContentText,
@@ -20,33 +20,25 @@ export function QuestionToolView({
   );
 
   const answerText = getContentText(content);
-
-  if (!isComplete || !answerText) {
-    return (
-      <ToolRow
-        icon={ChatCircle}
-        isLoading={isLoading}
-        isFailed={isFailed}
-        wasCancelled={wasCancelled}
-      >
-        {title || "Question"}
-      </ToolRow>
-    );
-  }
+  const showAnswer = isComplete && !!answerText;
 
   return (
-    <Box className="my-2 max-w-4xl overflow-hidden rounded-lg border border-gray-6 bg-gray-1">
-      <Flex align="center" gap="2" className="px-3 py-2">
-        <ChatCircle size={12} className="text-gray-10" />
-        <Text className="text-[13px] text-gray-10">{title || "Question"}</Text>
-      </Flex>
-
-      <Box className="border-gray-6 border-t px-3 py-2">
-        <Flex align="center" gap="2">
-          <CheckCircle size={14} weight="fill" className="text-green-9" />
-          <Text className="text-[13px] text-green-11">{answerText}</Text>
-        </Flex>
-      </Box>
-    </Box>
+    <ToolRow
+      icon={ChatCircle}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      defaultOpen
+      content={
+        showAnswer ? (
+          <div className="flex items-center gap-2 px-3 py-2">
+            <CheckCircle size={14} weight="fill" className="text-green-9" />
+            <Text className="text-[13px] text-green-11">{answerText}</Text>
+          </div>
+        ) : undefined
+      }
+    >
+      {title || "Question"}
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/ReadToolView.tsx b/packages/ui/src/features/sessions/components/session-update/ReadToolView.tsx
index 86a5b8619..744d23edd 100644
--- a/packages/ui/src/features/sessions/components/session-update/ReadToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/ReadToolView.tsx
@@ -1,14 +1,11 @@
 import { FileText } from "@phosphor-icons/react";
 import { SafeImagePreview } from "@posthog/ui/primitives/SafeImagePreview";
-import { Box, Flex } from "@radix-ui/themes";
-import { useState } from "react";
 import { CodePreview } from "./CodePreview";
 import { FileMentionChip } from "./FileMentionChip";
+import { ToolRow } from "./ToolRow";
 import {
-  ExpandableIcon,
   getContentImage,
   getReadToolContent,
-  StatusIndicators,
   ToolTitle,
   type ToolViewProps,
   useToolCallStatus,
@@ -19,7 +16,6 @@ export function ReadToolView({
   turnCancelled,
   turnComplete,
 }: ToolViewProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
   const { status, locations, content } = toolCall;
   const { isLoading, isFailed, wasCancelled } = useToolCallStatus(
     status,
@@ -32,62 +28,39 @@ export function ReadToolView({
   const imageContent = getContentImage(content);
   const fileContent = imageContent ? undefined : getReadToolContent(content);
   const lineCount = fileContent ? fileContent.split("\n").length : null;
-  const isExpandable = !!fileContent || !!imageContent;
   const firstLineNumber = startLine + 1;
 
-  const handleClick = () => {
-    if (isExpandable) {
-      setIsExpanded(!isExpanded);
-    }
-  };
+  const body = imageContent ? (
+    <div className="bg-(--gray-2) p-2">
+      <SafeImagePreview
+        base64={imageContent.base64}
+        mimeType={imageContent.mimeType}
+        alt={filePath || "Read tool image preview"}
+        className="max-h-96 max-w-full object-contain"
+      />
+    </div>
+  ) : fileContent ? (
+    <CodePreview
+      content={fileContent}
+      filePath={filePath}
+      firstLineNumber={firstLineNumber}
+    />
+  ) : undefined;
 
   return (
-    <Box>
-      <Flex
-        align="center"
-        gap="2"
-        className={`group min-w-0 py-0.5 ${isExpandable ? "cursor-pointer" : ""}`}
-        onClick={handleClick}
-      >
-        <ExpandableIcon
-          icon={FileText}
-          isLoading={isLoading}
-          isExpandable={isExpandable}
-          isExpanded={isExpanded}
-        />
-        <ToolTitle className="shrink-0 whitespace-nowrap">
-          {imageContent
-            ? "Read image in"
-            : `Read${lineCount !== null ? ` ${lineCount} lines in` : ""}`}
-        </ToolTitle>
-        {filePath && <FileMentionChip filePath={filePath} />}
-        <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-      </Flex>
-
-      {isExpanded && imageContent && (
-        <Box className="mt-2 ml-5">
-          <Box className="max-w-4xl overflow-hidden rounded-lg border border-gray-6 bg-(--gray-2) p-2">
-            <SafeImagePreview
-              base64={imageContent.base64}
-              mimeType={imageContent.mimeType}
-              alt={filePath || "Read tool image preview"}
-              className="max-h-96 max-w-full object-contain"
-            />
-          </Box>
-        </Box>
-      )}
-
-      {isExpanded && fileContent && (
-        <Box className="mt-2 ml-5">
-          <Box className="max-w-4xl overflow-hidden rounded-lg border border-gray-6">
-            <CodePreview
-              content={fileContent}
-              filePath={filePath}
-              firstLineNumber={firstLineNumber}
-            />
-          </Box>
-        </Box>
-      )}
-    </Box>
+    <ToolRow
+      icon={FileText}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      content={body}
+    >
+      <ToolTitle className="shrink-0 whitespace-nowrap">
+        {imageContent
+          ? "Read image in"
+          : `Read${lineCount !== null ? ` ${lineCount} lines in` : ""}`}
+      </ToolTitle>
+      {filePath && <FileMentionChip filePath={filePath} />}
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/SearchToolView.tsx b/packages/ui/src/features/sessions/components/session-update/SearchToolView.tsx
index d96194ab6..d40d51b25 100644
--- a/packages/ui/src/features/sessions/components/session-update/SearchToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/SearchToolView.tsx
@@ -1,12 +1,8 @@
 import { MagnifyingGlass } from "@phosphor-icons/react";
-import { Box, Flex } from "@radix-ui/themes";
-import { useState } from "react";
 import { ToolRow } from "./ToolRow";
 import {
-  ExpandableIcon,
-  ExpandedContentBox,
+  ContentPre,
   getContentText,
-  StatusIndicators,
   ToolTitle,
   type ToolViewProps,
   useToolCallStatus,
@@ -17,7 +13,6 @@ export function SearchToolView({
   turnCancelled,
   turnComplete,
 }: ToolViewProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
   const { status, content, title } = toolCall;
   const { isLoading, isFailed, wasCancelled } = useToolCallStatus(
     status,
@@ -27,52 +22,28 @@ export function SearchToolView({
 
   const searchResults = getContentText(content) ?? "";
   const hasResults = searchResults.trim().length > 0;
-  const resultLines = hasResults
-    ? searchResults.split("\n").filter((line) => line.trim().length > 0)
-    : [];
-  const resultCount = resultLines.length;
-
-  if (!hasResults) {
-    return (
-      <ToolRow
-        icon={MagnifyingGlass}
-        isLoading={isLoading}
-        isFailed={isFailed}
-        wasCancelled={wasCancelled}
-      >
-        {title || "Search"}
-      </ToolRow>
-    );
-  }
-
-  const handleClick = () => {
-    setIsExpanded(!isExpanded);
-  };
+  const resultCount = hasResults
+    ? searchResults.split("\n").filter((line) => line.trim().length > 0).length
+    : 0;
 
   return (
-    <Box>
-      <Flex
-        align="center"
-        gap="2"
-        className="group min-w-0 cursor-pointer py-0.5"
-        onClick={handleClick}
-      >
-        <ExpandableIcon
-          icon={MagnifyingGlass}
-          isLoading={isLoading}
-          isExpandable
-          isExpanded={isExpanded}
-        />
-        <ToolTitle className="min-w-0 truncate">
-          <span className="font-mono">{title || "Search"}</span>
-        </ToolTitle>
+    <ToolRow
+      icon={MagnifyingGlass}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      content={
+        hasResults ? <ContentPre>{searchResults}</ContentPre> : undefined
+      }
+    >
+      <ToolTitle className="min-w-0 truncate">
+        <span className="font-mono">{title || "Search"}</span>
+      </ToolTitle>
+      {hasResults && (
         <ToolTitle className="shrink-0 whitespace-nowrap">
           {resultCount} {resultCount === 1 ? "result" : "results"}
         </ToolTitle>
-        <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-      </Flex>
-
-      {isExpanded && <ExpandedContentBox>{searchResults}</ExpandedContentBox>}
-    </Box>
+      )}
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/ThinkToolView.tsx b/packages/ui/src/features/sessions/components/session-update/ThinkToolView.tsx
index ae2f33e66..8dd6f666e 100644
--- a/packages/ui/src/features/sessions/components/session-update/ThinkToolView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/ThinkToolView.tsx
@@ -1,26 +1,17 @@
-import {
-  ArrowsInSimpleIcon,
-  ArrowsOutSimpleIcon,
-  Brain,
-} from "@phosphor-icons/react";
-import { Box, Flex, IconButton, Text } from "@radix-ui/themes";
-import { useState } from "react";
+import { Brain } from "@phosphor-icons/react";
 import { ToolRow } from "./ToolRow";
 import {
+  ContentPre,
   getContentText,
-  LoadingIcon,
   type ToolViewProps,
   useToolCallStatus,
 } from "./toolCallUtils";
 
-const COLLAPSED_LINE_COUNT = 5;
-
 export function ThinkToolView({
   toolCall,
   turnCancelled,
   turnComplete,
 }: ToolViewProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
   const { status, content, title } = toolCall;
   const { isLoading, isFailed, wasCancelled } = useToolCallStatus(
     status,
@@ -30,71 +21,18 @@ export function ThinkToolView({
 
   const thinkingContent = getContentText(content) ?? "";
   const hasContent = thinkingContent.trim().length > 0;
-  const contentLines = thinkingContent.split("\n");
-  const isCollapsible = contentLines.length > COLLAPSED_LINE_COUNT;
-  const hiddenLineCount = contentLines.length - COLLAPSED_LINE_COUNT;
-  const displayedContent = isExpanded
-    ? thinkingContent
-    : contentLines.slice(0, COLLAPSED_LINE_COUNT).join("\n");
-
-  if (!hasContent) {
-    return (
-      <ToolRow
-        icon={Brain}
-        isLoading={isLoading}
-        isFailed={isFailed}
-        wasCancelled={wasCancelled}
-      >
-        {title || "Thinking"}
-      </ToolRow>
-    );
-  }
 
   return (
-    <Box className="my-2 max-w-4xl overflow-hidden rounded-lg border border-gray-6 bg-gray-1">
-      <Flex align="center" justify="between" className="px-3 py-2">
-        <Flex align="center" gap="2">
-          <LoadingIcon
-            icon={Brain}
-            isLoading={isLoading}
-            className="text-gray-10"
-          />
-          <Text className="text-[13px] text-gray-10">
-            {title || "Thinking"}
-          </Text>
-        </Flex>
-        {isCollapsible && (
-          <IconButton
-            size="1"
-            variant="ghost"
-            color="gray"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            {isExpanded ? (
-              <ArrowsInSimpleIcon size={12} />
-            ) : (
-              <ArrowsOutSimpleIcon size={12} />
-            )}
-          </IconButton>
-        )}
-      </Flex>
-
-      <Box className="border-gray-6 border-t px-3 py-2">
-        <Text asChild className="text-[13px] text-gray-11">
-          <pre className="m-0 whitespace-pre-wrap break-all font-mono">
-            {displayedContent}
-          </pre>
-        </Text>
-        {isCollapsible && !isExpanded && (
-          <button
-            type="button"
-            onClick={() => setIsExpanded(true)}
-            className="mt-1 flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-gray-10 hover:text-gray-12"
-          >
-            <Text className="text-[13px]">+{hiddenLineCount} more lines</Text>
-          </button>
-        )}
-      </Box>
-    </Box>
+    <ToolRow
+      icon={Brain}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      content={
+        hasContent ? <ContentPre>{thinkingContent}</ContentPre> : undefined
+      }
+    >
+      {title || "Thinking"}
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/ThoughtView.tsx b/packages/ui/src/features/sessions/components/session-update/ThoughtView.tsx
index ae51e476b..cb6252512 100644
--- a/packages/ui/src/features/sessions/components/session-update/ThoughtView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/ThoughtView.tsx
@@ -1,67 +1,28 @@
 import { Brain } from "@phosphor-icons/react";
-import { Box, Text } from "@radix-ui/themes";
-import { memo, useState } from "react";
-import { ExpandableIcon } from "./toolCallUtils";
+import { memo } from "react";
+import { ToolRow } from "./ToolRow";
+import { ContentPre } from "./toolCallUtils";
 
 interface ThoughtViewProps {
   content: string;
   isLoading: boolean;
 }
 
-const COLLAPSED_LINE_COUNT = 5;
-
 export const ThoughtView = memo(function ThoughtView({
   content,
   isLoading,
 }: ThoughtViewProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-
   const hasContent = content.trim().length > 0;
-  const contentLines = content.split("\n");
-  const isCollapsible =
-    hasContent && contentLines.length > COLLAPSED_LINE_COUNT;
-  const hiddenLineCount = contentLines.length - COLLAPSED_LINE_COUNT;
-  const displayedContent = isExpanded
-    ? content
-    : contentLines.slice(0, COLLAPSED_LINE_COUNT).join("\n");
 
   return (
-    <Box>
-      <button
-        type="button"
-        onClick={() => hasContent && setIsExpanded((v) => !v)}
-        className={`group flex items-center gap-2 border-none bg-transparent p-0 py-0.5 ${hasContent ? "cursor-pointer" : "cursor-default"}`}
+    <div className="pl-3">
+      <ToolRow
+        icon={Brain}
+        isLoading={isLoading}
+        content={hasContent ? <ContentPre>{content}</ContentPre> : undefined}
       >
-        <ExpandableIcon
-          icon={Brain}
-          isLoading={isLoading}
-          isExpandable={hasContent}
-          isExpanded={isExpanded}
-        />
-        <Text className="text-[13px] text-gray-11">Thinking</Text>
-      </button>
-      {isExpanded && hasContent && (
-        <Box className="mt-1 ml-5 max-w-4xl overflow-hidden rounded-lg border border-gray-6">
-          <Box className="max-h-64 overflow-auto px-3 py-2">
-            <Text asChild className="text-[13px] text-gray-11">
-              <pre className="m-0 hyphens-auto whitespace-pre-wrap break-words font-mono">
-                {displayedContent}
-              </pre>
-            </Text>
-            {isCollapsible && !isExpanded && (
-              <button
-                type="button"
-                onClick={() => setIsExpanded(true)}
-                className="mt-1 flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-gray-10 hover:text-gray-12"
-              >
-                <Text className="text-[13px]">
-                  +{hiddenLineCount} more lines
-                </Text>
-              </button>
-            )}
-          </Box>
-        </Box>
-      )}
-    </Box>
+        Thinking
+      </ToolRow>
+    </div>
   );
 });
diff --git a/packages/ui/src/features/sessions/components/session-update/ToolCallView.tsx b/packages/ui/src/features/sessions/components/session-update/ToolCallView.tsx
index 3627d4638..8b00fa482 100644
--- a/packages/ui/src/features/sessions/components/session-update/ToolCallView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/ToolCallView.tsx
@@ -15,16 +15,13 @@ import {
 } from "@phosphor-icons/react";
 import { compactHomePath } from "@posthog/shared";
 import type { CodeToolKind } from "@posthog/ui/features/sessions/types";
-import { Box, Flex } from "@radix-ui/themes";
-import { useState } from "react";
+import { ToolRow } from "./ToolRow";
 import {
+  ContentPre,
   compactInput,
-  ExpandableIcon,
-  ExpandedContentBox,
   formatInput,
   getContentText,
   getFilename,
-  StatusIndicators,
   stripCodeFences,
   ToolTitle,
   type ToolViewProps,
@@ -69,7 +66,6 @@ export function ToolCallView({
   agentToolName,
   expanded = false,
 }: ToolCallViewProps) {
-  const [isExpanded, setIsExpanded] = useState(expanded);
   const { title, kind, status, locations, content, rawInput } = toolCall;
   const { isLoading, isFailed, wasCancelled, isComplete } = useToolCallStatus(
     status,
@@ -107,49 +103,36 @@ export function ToolCallView({
 
   const output = stripCodeFences(getContentText(content) ?? "");
   const hasOutput = output.trim().length > 0;
-  const isExpandable = !!fullInput || hasOutput;
+  const showOutput = isComplete && hasOutput;
 
-  const handleClick = () => {
-    if (isExpandable) {
-      setIsExpanded(!isExpanded);
-    }
-  };
+  const body =
+    fullInput || showOutput ? (
+      <>
+        {fullInput && <ContentPre>{fullInput}</ContentPre>}
+        {showOutput && (
+          <div className={fullInput ? "border-gray-6 border-t" : undefined}>
+            <ContentPre>{output}</ContentPre>
+          </div>
+        )}
+      </>
+    ) : undefined;
 
   return (
-    <Box className="py-0.5">
-      <Flex
-        gap="2"
-        className={`group min-w-0 ${isExpandable ? "cursor-pointer" : ""}`}
-        onClick={handleClick}
-      >
-        <Box className="shrink-0 pt-px">
-          <ExpandableIcon
-            icon={KindIcon}
-            isLoading={isLoading}
-            isExpandable={isExpandable}
-            isExpanded={isExpanded}
-          />
-        </Box>
-        <Flex align="center" gap="1" wrap="wrap" className="min-w-0">
-          <ToolTitle>{displayText}</ToolTitle>
-          {inputPreview && (
-            <ToolTitle>
-              <span className="font-mono text-accent-11">{inputPreview}</span>
-            </ToolTitle>
-          )}
-          {specialDisplay && <ToolTitle>{specialDisplay.suffix}</ToolTitle>}
-          <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-        </Flex>
-      </Flex>
-
-      {isExpanded && (
-        <>
-          {fullInput && <ExpandedContentBox>{fullInput}</ExpandedContentBox>}
-          {isComplete && hasOutput && (
-            <ExpandedContentBox>{output}</ExpandedContentBox>
-          )}
-        </>
+    <ToolRow
+      icon={KindIcon}
+      isLoading={isLoading}
+      isFailed={isFailed}
+      wasCancelled={wasCancelled}
+      defaultOpen={expanded}
+      content={body}
+    >
+      {displayText && <ToolTitle>{displayText}</ToolTitle>}
+      {inputPreview && (
+        <ToolTitle>
+          <span className="font-mono text-accent-11">{inputPreview}</span>
+        </ToolTitle>
       )}
-    </Box>
+      {specialDisplay && <ToolTitle>{specialDisplay.suffix}</ToolTitle>}
+    </ToolRow>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/ToolRow.tsx b/packages/ui/src/features/sessions/components/session-update/ToolRow.tsx
index 23015b7a2..8ee9b832d 100644
--- a/packages/ui/src/features/sessions/components/session-update/ToolRow.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/ToolRow.tsx
@@ -1,28 +1,132 @@
-import type { Icon } from "@phosphor-icons/react";
-import { Flex } from "@radix-ui/themes";
-import type { ReactNode } from "react";
-import { LoadingIcon, StatusIndicators, ToolTitle } from "./toolCallUtils";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { type Icon, WrenchIcon } from "@phosphor-icons/react";
+import { cn } from "@posthog/quill";
+import { type ReactNode, useState } from "react";
+import {
+  ExpandableIcon,
+  LoadingIcon,
+  StatusIndicators,
+  ToolTitle,
+} from "./toolCallUtils";
 
 interface ToolRowProps {
-  icon: Icon;
-  isLoading: boolean;
+  /** Leading tool icon. Ignored when `leading` is provided. */
+  icon?: Icon;
+  isLoading?: boolean;
   isFailed?: boolean;
   wasCancelled?: boolean;
+  /**
+   * Header content beside the icon. A plain string is wrapped in a ToolTitle;
+   * pass nodes directly for richer headers (chips, mono spans, stats).
+   */
   children: ReactNode;
+  /** Collapsible body. When present the row becomes a collapsible trigger. */
+  content?: ReactNode;
+  /** Start expanded (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Controlled open state. Provide together with `onOpenChange`. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Force the collapsible trigger even when `content` is lazily omitted while
+   * closed (used by the tool-call group, which only renders children open).
+   */
+  collapsible?: boolean;
+  /** Wrap the content in the standard bordered box. Default true. */
+  boxed?: boolean;
+  /** Override the leading icon slot entirely (e.g. a caret for a group). */
+  leading?: ReactNode;
+  /** Extra header content after the title (e.g. a summary icon strip). */
+  trailing?: ReactNode;
 }
 
+/**
+ * The single wrapping element for every tool call: a header (icon + text), and
+ * — when there's a body — a base-ui Collapsible whose content sits in a
+ * left-padded box. Every tool view and the tool-call group render through this
+ * so MCP, execute, read, edit, etc. are structurally identical.
+ */
 export function ToolRow({
   icon,
-  isLoading,
+  isLoading = false,
   isFailed,
   wasCancelled,
   children,
+  content,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  collapsible,
+  boxed = true,
+  leading,
+  trailing,
 }: ToolRowProps) {
-  return (
-    <Flex align="center" gap="2" className="min-w-0 py-0.5">
-      <LoadingIcon icon={icon} isLoading={isLoading} />
-      <ToolTitle>{children}</ToolTitle>
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const isCollapsible = collapsible || content != null;
+
+  const leadingNode = leading ?? (
+    <span className="flex shrink-0 items-center justify-center pt-1">
+      {isCollapsible ? (
+        <ExpandableIcon
+          icon={icon ?? WrenchIcon}
+          isLoading={isLoading}
+          isExpandable
+          isExpanded={isOpen}
+        />
+      ) : (
+        <LoadingIcon icon={icon ?? WrenchIcon} isLoading={isLoading} />
+      )}
+    </span>
+  );
+
+  const header = (
+    <span className="flex min-w-0 flex-wrap items-center gap-1">
+      {typeof children === "string" ? (
+        <ToolTitle>{children}</ToolTitle>
+      ) : (
+        children
+      )}
       <StatusIndicators isFailed={isFailed} wasCancelled={wasCancelled} />
-    </Flex>
+      {trailing}
+    </span>
+  );
+
+  if (!isCollapsible) {
+    return (
+      <div className="group flex min-w-0 items-start gap-2 py-0.5">
+        {leadingNode}
+        {header}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible.Root open={isOpen} onOpenChange={setOpen}>
+      <Collapsible.Trigger className="group mb-0 flex w-full min-w-0 cursor-pointer items-start gap-2 py-0.5 text-left">
+        {leadingNode}
+        {header}
+      </Collapsible.Trigger>
+      <Collapsible.Panel>
+        {content != null && (
+          <div
+            className={cn(
+              "flex flex-col gap-2 p-2 [&_p]:mb-0",
+              boxed
+                ? "mt-1 mb-3 ml-5 max-w-4xl overflow-hidden rounded-lg border border-gray-6"
+                : "mt-1 ml-5",
+            )}
+          >
+            {content}
+          </div>
+        )}
+      </Collapsible.Panel>
+    </Collapsible.Root>
   );
 }
diff --git a/packages/ui/src/features/sessions/components/session-update/toolCallUtils.tsx b/packages/ui/src/features/sessions/components/session-update/toolCallUtils.tsx
index 4570e797e..ab24add53 100644
--- a/packages/ui/src/features/sessions/components/session-update/toolCallUtils.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/toolCallUtils.tsx
@@ -245,7 +245,7 @@ export function ExpandableIcon({
 
 export function ContentPre({ children }: { children: React.ReactNode }) {
   return (
-    <Box className="max-h-64 overflow-auto px-3 py-2">
+    <Box className="scroll-mask-2 max-h-64 overflow-auto px-3 py-2">
       <Text asChild className="text-[13px] text-gray-11">
         <pre className="m-0 whitespace-pre-wrap break-all font-mono">
           {children}
diff --git a/packages/ui/src/features/sessions/components/session-update/useCodePreviewExtensions.ts b/packages/ui/src/features/sessions/components/session-update/useCodePreviewExtensions.ts
index 737418545..5700948da 100644
--- a/packages/ui/src/features/sessions/components/session-update/useCodePreviewExtensions.ts
+++ b/packages/ui/src/features/sessions/components/session-update/useCodePreviewExtensions.ts
@@ -32,7 +32,6 @@ export function useCodePreviewExtensions(
 
 export const CODE_PREVIEW_CONTAINER_STYLE: React.CSSProperties = {
   overflow: "hidden",
-  borderTop: "1px solid var(--gray-6)",
   "--color-background": "transparent",
 } as React.CSSProperties;
 
diff --git a/packages/ui/src/features/sessions/sessionViewStore.ts b/packages/ui/src/features/sessions/sessionViewStore.ts
index 807c5a62e..aa082eecd 100644
--- a/packages/ui/src/features/sessions/sessionViewStore.ts
+++ b/packages/ui/src/features/sessions/sessionViewStore.ts
@@ -4,12 +4,20 @@ interface SessionViewState {
   showRawLogs: boolean;
   searchQuery: string;
   showSearch: boolean;
+  /**
+   * Ephemeral per-tool-group expand overrides for the new thread, keyed by
+   * group id. `true` = expanded, `false` = collapsed, absent = follow the
+   * global collapse mode. Not persisted; wiped when the global mode changes.
+   */
+  groupOverrides: Record<string, boolean>;
 }
 
 interface SessionViewActions {
   setShowRawLogs: (show: boolean) => void;
   setSearchQuery: (query: string) => void;
   toggleSearch: () => void;
+  setGroupOverride: (id: string, expanded: boolean) => void;
+  clearGroupOverrides: () => void;
 }
 
 type SessionViewStore = SessionViewState & { actions: SessionViewActions };
@@ -18,6 +26,7 @@ const useStore = create<SessionViewStore>((set) => ({
   showRawLogs: false,
   searchQuery: "",
   showSearch: false,
+  groupOverrides: {},
   actions: {
     setShowRawLogs: (show) => set({ showRawLogs: show }),
     setSearchQuery: (query) => set({ searchQuery: query }),
@@ -26,10 +35,21 @@ const useStore = create<SessionViewStore>((set) => ({
         showSearch: !state.showSearch,
         searchQuery: state.showSearch ? "" : state.searchQuery,
       })),
+    setGroupOverride: (id, expanded) =>
+      set((state) => ({
+        groupOverrides: { ...state.groupOverrides, [id]: expanded },
+      })),
+    clearGroupOverrides: () =>
+      set((state) =>
+        Object.keys(state.groupOverrides).length === 0
+          ? state
+          : { groupOverrides: {} },
+      ),
   },
 }));
 
 export const useShowRawLogs = () => useStore((s) => s.showRawLogs);
 export const useSearchQuery = () => useStore((s) => s.searchQuery);
 export const useShowSearch = () => useStore((s) => s.showSearch);
+export const useGroupOverrides = () => useStore((s) => s.groupOverrides);
 export const useSessionViewActions = () => useStore((s) => s.actions);
diff --git a/packages/ui/src/features/settings/sections/GeneralSettings.tsx b/packages/ui/src/features/settings/sections/GeneralSettings.tsx
index a1abbf40b..6fe05d71a 100644
--- a/packages/ui/src/features/settings/sections/GeneralSettings.tsx
+++ b/packages/ui/src/features/settings/sections/GeneralSettings.tsx
@@ -3,6 +3,10 @@ import { buildPostHogUrl } from "@posthog/core/settings/posthogUrl";
 import { useHostTRPC } from "@posthog/host-router/react";
 import { ANALYTICS_EVENTS } from "@posthog/shared";
 import { useAuthStateValue } from "@posthog/ui/features/auth/store";
+import {
+  COLLAPSE_MODE_OPTIONS,
+  type CollapseMode,
+} from "@posthog/ui/features/sessions/components/new-thread/conversationThreadConfig";
 import { SettingRow } from "@posthog/ui/features/settings/SettingRow";
 import {
   type AutoConvertLongText,
@@ -81,6 +85,7 @@ export function GeneralSettings() {
     defaultReasoningEffort,
     diffOpenMode,
     sendMessagesWith,
+    conversationCollapseMode,
     hedgehogMode,
     setDesktopNotifications,
     setDockBadgeNotifications,
@@ -92,6 +97,7 @@ export function GeneralSettings() {
     setDefaultReasoningEffort,
     setDiffOpenMode,
     setSendMessagesWith,
+    setConversationCollapseMode,
     setHedgehogMode,
   } = useSettingsStore();
 
@@ -205,6 +211,18 @@ export function GeneralSettings() {
     [defaultReasoningEffort, setDefaultReasoningEffort],
   );
 
+  const handleConversationCollapseModeChange = useCallback(
+    (value: CollapseMode) => {
+      track(ANALYTICS_EVENTS.SETTING_CHANGED, {
+        setting_name: "conversation_collapse_mode",
+        new_value: value,
+        old_value: conversationCollapseMode,
+      });
+      setConversationCollapseMode(value);
+    },
+    [conversationCollapseMode, setConversationCollapseMode],
+  );
+
   const handleSendMessagesWithChange = useCallback(
     (value: SendMessagesWith) => {
       track(ANALYTICS_EVENTS.SETTING_CHANGED, {
@@ -493,6 +511,34 @@ export function GeneralSettings() {
         </Select.Root>
       </SettingRow>
 
+      {/* Conversation */}
+      <Text className="mb-2 block border-gray-6 border-t pt-4 font-medium text-sm">
+        Conversation
+      </Text>
+
+      <SettingRow
+        label="Collapse tool calls"
+        description="Group each turn's tool calls into a collapsible summary. Partial keeps the active turn expanded and folds completed turns."
+        noBorder
+      >
+        <Select.Root
+          value={conversationCollapseMode}
+          onValueChange={(value) =>
+            handleConversationCollapseModeChange(value as CollapseMode)
+          }
+          size="1"
+        >
+          <Select.Trigger className="min-w-[140px]" />
+          <Select.Content>
+            {COLLAPSE_MODE_OPTIONS.map((opt) => (
+              <Select.Item key={opt.value} value={opt.value}>
+                {opt.label}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+      </SettingRow>
+
       {/* Power */}
       <Text className="mb-2 block border-gray-6 border-t pt-4 font-medium text-sm">
         Power
diff --git a/packages/ui/src/features/settings/settingsStore.ts b/packages/ui/src/features/settings/settingsStore.ts
index 4e2e496e5..ae26076e3 100644
--- a/packages/ui/src/features/settings/settingsStore.ts
+++ b/packages/ui/src/features/settings/settingsStore.ts
@@ -1,4 +1,8 @@
 import type { ExecutionMode, WorkspaceMode } from "@posthog/shared";
+import {
+  COLLAPSE_MODE_DEFAULT,
+  type CollapseMode,
+} from "@posthog/ui/features/sessions/components/new-thread/conversationThreadConfig";
 import { electronStorage } from "@posthog/ui/shell/rendererStorage";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
@@ -119,6 +123,10 @@ interface SettingsStore {
   setTerminalFont: (font: TerminalFont) => void;
   setTerminalCustomFontFamily: (value: string) => void;
 
+  // Conversation thread (new-thread)
+  conversationCollapseMode: CollapseMode;
+  setConversationCollapseMode: (mode: CollapseMode) => void;
+
   // Experimental / misc
   hedgehogMode: boolean;
   mcpAppsDisabledServers: string[];
@@ -228,6 +236,11 @@ export const useSettingsStore = create<SettingsStore>()(
       setTerminalCustomFontFamily: (value) =>
         set({ terminalCustomFontFamily: value }),
 
+      // Conversation thread (new-thread)
+      conversationCollapseMode: COLLAPSE_MODE_DEFAULT,
+      setConversationCollapseMode: (mode) =>
+        set({ conversationCollapseMode: mode }),
+
       // Experimental / misc
       hedgehogMode: false,
       mcpAppsDisabledServers: [],
@@ -308,6 +321,9 @@ export const useSettingsStore = create<SettingsStore>()(
         terminalFont: state.terminalFont,
         terminalCustomFontFamily: state.terminalCustomFontFamily,
 
+        // Conversation thread (new-thread)
+        conversationCollapseMode: state.conversationCollapseMode,
+
         // Experimental / misc
         hedgehogMode: state.hedgehogMode,
         mcpAppsDisabledServers: state.mcpAppsDisabledServers,