feat: redesign activity panel UX with grouped timeline and verb-based labels

Replace the flat, repetitive 'Agent used X' activity list with a
structured narrative timeline:

- Group consecutive same-tool calls into collapsible rows with context
  (e.g. 'Viewed 4 files' with file names listed below)
- Use verb-based labels with arguments: 'Viewed ChatPane.tsx:148-250',
  'Searched for tool-call', 'Edited runTimeline.ts'
- Promote report_intent events to phase dividers that segment the
  timeline into labeled stages of work
- Show latest intent text in the collapsed header summary
- Use category-specific icons (Eye, Search, Pencil, Terminal, etc.)
  instead of the universal wrench
- Render thinking steps as quoted blocks with 'N more' toggle for
  consecutive groups

All data was already available in RunTimelineEventRecord.toolArguments;
this change surfaces it prominently instead of hiding it behind
expandable detail panels.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/components/chat/TurnActivityPanel.tsx

@@ -6,8 +6,17 @@ import {
   CheckCircle2,
   ChevronDown,
   ChevronRight,
+  Database,
+  Eye,
+  ExternalLink,
+  FileSearch,
+  Github,
   MessageSquare,
+  Pencil,
+  Search,
   ShieldAlert,
+  Terminal,
+  Users,
   Wrench,
   XCircle,
   Zap,
@@ -18,21 +27,12 @@ import { FileChangePreview } from '@renderer/components/chat/FileChangePreview';
 import { ToolCallDetailPanel } from '@renderer/components/chat/ToolCallDetailPanel';
 import { RunChangeSummaryCard } from '@renderer/components/chat/RunChangeSummaryCard';
 import { formatEventLabel, truncateContent, filterEventsByAgent, summarizeActivity, type ActivitySummary } from '@renderer/lib/runTimelineFormatting';
+import { formatToolGroupLabel, extractToolCallSnippet, formatToolCallPrimaryLabel } from '@renderer/lib/toolCallSummary';
+import { buildActivityStream, groupActivityStream, extractLatestIntent, generateActivitySummary, type GroupedActivityItem } from '@renderer/lib/activityGrouping';
 import type { ChatMessageRecord } from '@shared/domain/session';
 import type { ProjectGitFileReference } from '@shared/domain/project';
 import type { RunTimelineEventRecord, SessionRunRecord } from '@shared/domain/runTimeline';
 
-/* ── Types ─────────────────────────────────────────────────── */
-
-/** A unified activity stream item, merging chat thinking messages
- *  and run timeline events into a single chronological list. */
-type ActivityStreamItem =
-  | { kind: 'thinking-step'; message: ChatMessageRecord }
-  | { kind: 'timeline-event'; event: RunTimelineEventRecord };
-
-/** Events to skip in the inline panel (redundant or implicit). */
-const SKIP_EVENT_KINDS = new Set(['run-started', 'thinking']);
-
 /* ── Props ─────────────────────────────────────────────────── */
 
 export interface TurnActivityPanelProps {
@@ -41,9 +41,7 @@ export interface TurnActivityPanelProps {
   isActive: boolean;
   turnStartedAt?: string;
   sessionId: string;
-  /** Agent names in this turn group — used to scope run events in multi-agent runs. */
   agentNames?: ReadonlySet<string>;
-  /** True when this panel is the last one sharing a given run (controls git summary / discard). */
   isLastRunPanel?: boolean;
   onDiscard?: (sessionId: string, runId: string, files?: ProjectGitFileReference[]) => Promise<unknown>;
   onOpenCommitComposer?: () => void;
@@ -58,35 +56,10 @@ function truncatePreview(text: string, maxLength: number): string {
   return `${cleaned.slice(0, maxLength)}…`;
 }
 
-function buildActivityStream(
-  thinkingMessages: ChatMessageRecord[],
-  events: readonly RunTimelineEventRecord[],
-): ActivityStreamItem[] {
-  const items: ActivityStreamItem[] = [];
-
-  for (const msg of thinkingMessages) {
-    items.push({ kind: 'thinking-step', message: msg });
-  }
-
-  for (const event of events) {
-    if (SKIP_EVENT_KINDS.has(event.kind)) continue;
-    items.push({ kind: 'timeline-event', event });
-  }
-
-  // Sort chronologically by timestamp
-  items.sort((a, b) => {
-    const tsA = a.kind === 'thinking-step' ? a.message.createdAt : a.event.occurredAt;
-    const tsB = b.kind === 'thinking-step' ? b.message.createdAt : b.event.occurredAt;
-    return new Date(tsA).getTime() - new Date(tsB).getTime();
-  });
-
-  return items;
-}
-
 function formatSummaryParts(summary: ActivitySummary): string[] {
   const parts: string[] = [];
   if (summary.toolCalls > 0) {
-    parts.push(`${summary.toolCalls} tool ${summary.toolCalls === 1 ? 'call' : 'calls'}`);
+    parts.push(`${summary.toolCalls} ${summary.toolCalls === 1 ? 'action' : 'actions'}`);
   }
   if (summary.handoffs > 0) {
     parts.push(`${summary.handoffs} ${summary.handoffs === 1 ? 'handoff' : 'handoffs'}`);
@@ -94,20 +67,57 @@ function formatSummaryParts(summary: ActivitySummary): string[] {
   if (summary.approvals > 0) {
     parts.push(`${summary.approvals} ${summary.approvals === 1 ? 'approval' : 'approvals'}`);
   }
-  if (summary.thinkingSteps > 0) {
-    parts.push(`${summary.thinkingSteps} thinking ${summary.thinkingSteps === 1 ? 'step' : 'steps'}`);
-  }
   return parts;
 }
 
-/* ── Event icon ────────────────────────────────────────────── */
+/* ── Tool-category icon ────────────────────────────────────── */
 
-function ActivityEventIcon({ kind, status }: { kind: RunTimelineEventRecord['kind']; status: RunTimelineEventRecord['status'] }) {
+function ToolCategoryIcon({ toolName, className }: { toolName?: string; className?: string }) {
+  const base = className ?? 'size-3 shrink-0';
+
+  if (!toolName) return <Wrench className={`${base} text-[var(--color-text-muted)]`} />;
+
+  if (toolName.startsWith('github-')) {
+    return <Github className={`${base} text-[var(--color-text-secondary)]`} />;
+  }
+
+  switch (toolName) {
+    case 'view':
+      return <Eye className={`${base} text-[var(--color-accent-sky)]`} />;
+    case 'grep':
+    case 'glob':
+      return <Search className={`${base} text-[var(--color-accent-purple)]`} />;
+    case 'lsp':
+      return <FileSearch className={`${base} text-[var(--color-accent-purple)]`} />;
+    case 'edit':
+    case 'create':
+      return <Pencil className={`${base} text-[var(--color-status-warning)]`} />;
+    case 'powershell':
+      return <Terminal className={`${base} text-[var(--color-text-secondary)]`} />;
+    case 'web_fetch':
+    case 'web_search':
+      return <ExternalLink className={`${base} text-[var(--color-accent-sky)]`} />;
+    case 'sql':
+      return <Database className={`${base} text-[var(--color-accent-purple)]`} />;
+    case 'task':
+      return <Users className={`${base} text-[var(--color-accent-sky)]`} />;
+    default:
+      return <Wrench className={`${base} text-[var(--color-text-muted)]`} />;
+  }
+}
+
+/* ── Event icon (for non-tool events) ──────────────────────── */
+
+function ActivityEventIcon({ kind, status, toolName }: {
+  kind: RunTimelineEventRecord['kind'];
+  status: RunTimelineEventRecord['status'];
+  toolName?: string;
+}) {
   const base = 'size-3 shrink-0';
 
   switch (kind) {
     case 'tool-call':
-      return <Wrench className={`${base} text-[var(--color-accent-purple)]`} />;
+      return <ToolCategoryIcon toolName={toolName} className={base} />;
     case 'approval':
       return (
         <ShieldAlert
@@ -135,7 +145,7 @@ function ActivityEventIcon({ kind, status }: { kind: RunTimelineEventRecord['kin
   }
 }
 
-/* ── Activity event row ────────────────────────────────────── */
+/* ── Single event row ──────────────────────────────────────── */
 
 function ActivityTimelineEventRow({ event }: { event: RunTimelineEventRecord }) {
   const label = formatEventLabel(event);
@@ -144,7 +154,7 @@ function ActivityTimelineEventRow({ event }: { event: RunTimelineEventRecord })
   return (
     <div className="turn-activity-row flex gap-2 py-1">
       <div className="mt-0.5 flex shrink-0 items-start">
-        <ActivityEventIcon kind={event.kind} status={event.status} />
+        <ActivityEventIcon kind={event.kind} status={event.status} toolName={event.toolName} />
       </div>
       <div className="min-w-0 flex-1">
         <span className={`text-[12px] font-medium ${isTerminal ? 'text-[var(--color-text-muted)]' : 'text-[var(--color-text-secondary)]'}`}>
@@ -203,6 +213,106 @@ function ActivityTimelineEventRow({ event }: { event: RunTimelineEventRecord })
   );
 }
 
+/* ── Grouped tool-call row ─────────────────────────────────── */
+
+function GroupedToolCallRow({ toolName, events }: { toolName: string; events: RunTimelineEventRecord[] }) {
+  const [expanded, setExpanded] = useState(false);
+  const label = formatToolGroupLabel(toolName, events.length);
+
+  const snippets = useMemo(
+    () => events.map((e) => extractToolCallSnippet(toolName, e.toolArguments)).filter(Boolean) as string[],
+    [toolName, events],
+  );
+
+  const hasFileChanges = events.some((e) => e.fileChanges && e.fileChanges.length > 0);
+
+  return (
+    <div className="turn-activity-row py-0.5">
+      <button
+        type="button"
+        className="flex w-full items-start gap-2 py-1 text-left transition-colors hover:bg-[var(--color-surface-2)]/30 rounded px-1 -mx-1"
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-expanded={expanded}
+      >
+        <div className="mt-0.5 flex shrink-0 items-start">
+          <ToolCategoryIcon toolName={toolName} />
+        </div>
+        <span className="min-w-0 flex-1 text-[12px] font-medium text-[var(--color-text-secondary)]">
+          {label}
+        </span>
+        <ChevronRight
+          className={`mt-0.5 size-3 shrink-0 text-[var(--color-text-muted)] transition-transform duration-150 ${
+            expanded ? 'rotate-90' : ''
+          }`}
+        />
+      </button>
+
+      {/* Collapsed preview: show snippets inline */}
+      {!expanded && snippets.length > 0 && (
+        <div className="ml-5 flex flex-wrap gap-x-2 gap-y-0.5 pb-0.5">
+          {snippets.slice(0, 6).map((s, i) => (
+            <span key={i} className="truncate font-mono text-[10px] text-[var(--color-text-muted)]">
+              {s}
+            </span>
+          ))}
+          {snippets.length > 6 && (
+            <span className="text-[10px] text-[var(--color-text-muted)]">
+              +{snippets.length - 6} more
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Expanded: full per-event rows */}
+      {expanded && (
+        <div className="ml-5 border-l border-[var(--color-border)]/30 pl-2">
+          {events.map((event) => (
+            <div key={event.id} className="py-0.5">
+              <span className="text-[11px] text-[var(--color-text-secondary)]">
+                {formatToolCallPrimaryLabel(event.toolName, event.toolArguments)}
+              </span>
+              <ToolCallDetailPanel toolName={event.toolName} toolArguments={event.toolArguments} />
+              {event.fileChanges && event.fileChanges.length > 0 && (
+                <div className="mt-0.5">
+                  <FileChangePreview fileChanges={event.fileChanges} />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Aggregate file changes when collapsed */}
+      {!expanded && hasFileChanges && (
+        <div className="ml-5 mt-0.5">
+          {events
+            .filter((e) => e.fileChanges && e.fileChanges.length > 0)
+            .flatMap((e) => e.fileChanges!)
+            .length > 0 && (
+            <FileChangePreview
+              fileChanges={events.flatMap((e) => e.fileChanges ?? [])}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Intent divider ────────────────────────────────────────── */
+
+function IntentDividerRow({ text }: { text: string }) {
+  return (
+    <div className="turn-activity-row flex items-center gap-2 py-1.5" role="separator">
+      <div className="h-px flex-1 bg-[var(--color-border)]/40" />
+      <span className="shrink-0 text-[10px] font-medium tracking-wide text-[var(--color-text-muted)]">
+        {text}
+      </span>
+      <div className="h-px flex-1 bg-[var(--color-border)]/40" />
+    </div>
+  );
+}
+
 /* ── Thinking step row ─────────────────────────────────────── */
 
 function ThinkingStepRow({ message }: { message: ChatMessageRecord }) {
@@ -216,17 +326,61 @@ function ThinkingStepRow({ message }: { message: ChatMessageRecord }) {
         <Brain className="size-3 text-[var(--color-accent-purple)]" />
       </div>
       <div className="min-w-0 flex-1">
-        {message.authorName && (
-          <span className="mr-1.5 text-[12px] font-medium text-[var(--color-text-secondary)]">
-            {message.authorName}
-          </span>
-        )}
-        <span className="text-[12px] text-[var(--color-text-muted)]">{preview}</span>
+        <p className="border-l-2 border-[var(--color-accent-purple)]/20 pl-2 text-[11px] italic leading-snug text-[var(--color-text-muted)]">
+          "{preview}"
+        </p>
       </div>
     </div>
   );
 }
 
+/* ── Thinking group (multiple consecutive) ─────────────────── */
+
+function ThinkingGroupRow({ messages }: { messages: ChatMessageRecord[] }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const visibleMessages = messages.filter((m) => !m.pending || m.content);
+  if (visibleMessages.length === 0) return null;
+
+  const latest = visibleMessages[visibleMessages.length - 1];
+  const preview = truncatePreview(latest.content, 180);
+  const hiddenCount = visibleMessages.length - 1;
+
+  return (
+    <div className="turn-activity-row py-0.5">
+      <div className="flex gap-2 py-1">
+        <div className="mt-0.5 flex shrink-0 items-start">
+          <Brain className="size-3 text-[var(--color-accent-purple)]" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="border-l-2 border-[var(--color-accent-purple)]/20 pl-2 text-[11px] italic leading-snug text-[var(--color-text-muted)]">
+            "{preview}"
+          </p>
+          {hiddenCount > 0 && (
+            <button
+              type="button"
+              className="mt-0.5 pl-2 text-[10px] text-[var(--color-accent)] hover:underline"
+              onClick={() => setExpanded((prev) => !prev)}
+            >
+              {expanded ? 'Hide' : `${hiddenCount} earlier ${hiddenCount === 1 ? 'thought' : 'thoughts'}`}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {expanded && (
+        <div className="ml-5 space-y-0.5 border-l border-[var(--color-border)]/30 pl-2">
+          {visibleMessages.slice(0, -1).map((msg) => (
+            <p key={msg.id} className="text-[10px] italic leading-snug text-[var(--color-text-muted)]">
+              "{truncatePreview(msg.content, 140)}"
+            </p>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 /* ── Active pulse dots ─────────────────────────────────────── */
 
 function ActivityPulse() {
@@ -239,6 +393,23 @@ function ActivityPulse() {
   );
 }
 
+/* ── Grouped item renderer ─────────────────────────────────── */
+
+function GroupedItemRow({ item }: { item: GroupedActivityItem }) {
+  switch (item.kind) {
+    case 'intent-divider':
+      return <IntentDividerRow text={item.intentText} />;
+    case 'single-event':
+      return <ActivityTimelineEventRow event={item.event} />;
+    case 'tool-group':
+      return <GroupedToolCallRow toolName={item.toolName} events={item.events} />;
+    case 'single-thinking':
+      return <ThinkingStepRow message={item.message} />;
+    case 'thinking-group':
+      return <ThinkingGroupRow messages={item.messages} />;
+  }
+}
+
 /* ── Main component ────────────────────────────────────────── */
 
 export function TurnActivityPanel({
@@ -255,8 +426,6 @@ export function TurnActivityPanel({
   const [expanded, setExpanded] = useState(false);
   const wasActiveRef = useRef(isActive);
 
-  // Auto-expand when the turn is active (run exists or thinking arrives).
-  // Auto-collapse once the turn finishes.
   useEffect(() => {
     if (isActive && (thinkingMessages.length > 0 || run)) {
       setExpanded(true);
@@ -268,25 +437,20 @@ export function TurnActivityPanel({
 
   const toggle = useCallback(() => setExpanded((prev) => !prev), []);
 
-  // When the run is shared across multiple panels (multi-agent sequential),
-  // scope events to only those belonging to this panel's agents.
   const scopedEvents = useMemo(
     () => filterEventsByAgent(run?.events ?? [], agentNames),
     [run?.events, agentNames],
   );
 
-  // Derive per-agent timing from the scoped events when agent names are set
-  // (multi-agent run). For single-agent runs, use the run-level start time.
   const effectiveTurnStartedAt = useMemo(() => {
     if (!agentNames || agentNames.size === 0 || scopedEvents.length === 0) {
       return turnStartedAt;
     }
-    // Use the earliest scoped event as the start time for this agent's panel.
     let earliest = turnStartedAt;
     for (const e of scopedEvents) {
       if (!earliest || e.occurredAt < earliest) {
         earliest = e.occurredAt;
-        break; // events are already in insertion order (chronological)
+        break;
       }
     }
     return earliest;
@@ -302,12 +466,18 @@ export function TurnActivityPanel({
     [thinkingMessages, scopedEvents],
   );
 
-  const activityStream = useMemo(
-    () => buildActivityStream(thinkingMessages, scopedEvents),
-    [thinkingMessages, scopedEvents],
+  const groupedItems = useMemo(() => {
+    const stream = buildActivityStream(thinkingMessages, scopedEvents);
+    return groupActivityStream(stream);
+  }, [thinkingMessages, scopedEvents]);
+
+  // Extract intent text for the header
+  const intentText = useMemo(() => extractLatestIntent(scopedEvents), [scopedEvents]);
+  const fallbackSummary = useMemo(
+    () => !intentText ? generateActivitySummary(scopedEvents) : undefined,
+    [intentText, scopedEvents],
   );
 
-  // Nothing to show — no thinking messages, no run, and not active
   if (thinkingMessages.length === 0 && !run) {
     return null;
   }
@@ -318,10 +488,8 @@ export function TurnActivityPanel({
   const isFailed = runStatus === 'error';
   const isCancelled = runStatus === 'cancelled';
   const isTerminated = isCompleted || isFailed || isCancelled;
-  // Only show git summary and discard on the last panel for a given run
   const showGitSummary = run && isTerminated && run.postRunGitSummary && onDiscard && (isLastRunPanel !== false);
 
-  // Build the summary label
   let summaryLabel: string;
   if (isActive) {
     summaryLabel = 'Working';
@@ -335,6 +503,8 @@ export function TurnActivityPanel({
     summaryLabel = 'Completed';
   }
 
+  const headerDetail = intentText ?? fallbackSummary;
+
   const statusColorClass = isFailed
     ? 'text-[var(--color-status-error)]'
     : isCancelled
@@ -374,9 +544,17 @@ export function TurnActivityPanel({
           <span className={statusColorClass}>{summaryLabel}</span>
         )}
 
+        {/* Intent / generated summary */}
+        {headerDetail && (
+          <span className="min-w-0 truncate text-[11px] text-[var(--color-text-muted)]">
+            {'· '}
+            {intentText ? `"${headerDetail}"` : headerDetail}
+          </span>
+        )}
+
         {/* Inline counters */}
         {summaryParts.length > 0 && (
-          <span className="font-mono text-[10px] text-[var(--color-text-muted)]">
+          <span className="shrink-0 font-mono text-[10px] text-[var(--color-text-muted)]">
             {'· '}
             {summaryParts.join(' · ')}
           </span>
@@ -389,16 +567,13 @@ export function TurnActivityPanel({
         </span>
       </button>
 
-      {/* Expanded activity stream */}
+      {/* Expanded activity stream — grouped */}
       {expanded && (
         <div className="border-t border-[var(--color-border)]/30 px-3 py-2">
           <div className="space-y-0.5">
-            {activityStream.map((item) => {
-              if (item.kind === 'thinking-step') {
-                return <ThinkingStepRow key={item.message.id} message={item.message} />;
-              }
-              return <ActivityTimelineEventRow key={item.event.id} event={item.event} />;
-            })}
+            {groupedItems.map((item, index) => (
+              <GroupedItemRow key={index} item={item} />
+            ))}
           </div>
 
           {/* Post-run git changes */}

src/renderer/lib/activityGrouping.ts

@@ -0,0 +1,171 @@
+import type { ChatMessageRecord } from '@shared/domain/session';
+import type { RunTimelineEventRecord } from '@shared/domain/runTimeline';
+
+/* ── Input / output types ──────────────────────────────────── */
+
+/** A flat activity stream item (the existing model). */
+export type ActivityStreamItem =
+  | { kind: 'thinking-step'; message: ChatMessageRecord }
+  | { kind: 'timeline-event'; event: RunTimelineEventRecord };
+
+/** A grouped timeline item ready for rendering. */
+export type GroupedActivityItem =
+  | { kind: 'intent-divider'; intentText: string; event: RunTimelineEventRecord }
+  | { kind: 'single-event'; event: RunTimelineEventRecord }
+  | { kind: 'tool-group'; toolName: string; events: RunTimelineEventRecord[] }
+  | { kind: 'thinking-group'; messages: ChatMessageRecord[] }
+  | { kind: 'single-thinking'; message: ChatMessageRecord };
+
+/* ── Events to skip in the inline panel ────────────────────── */
+
+const SKIP_EVENT_KINDS = new Set(['run-started', 'thinking']);
+
+/* ── Build the flat stream (moved from TurnActivityPanel) ──── */
+
+export function buildActivityStream(
+  thinkingMessages: ChatMessageRecord[],
+  events: readonly RunTimelineEventRecord[],
+): ActivityStreamItem[] {
+  const items: ActivityStreamItem[] = [];
+
+  for (const msg of thinkingMessages) {
+    items.push({ kind: 'thinking-step', message: msg });
+  }
+
+  for (const event of events) {
+    if (SKIP_EVENT_KINDS.has(event.kind)) continue;
+    items.push({ kind: 'timeline-event', event });
+  }
+
+  items.sort((a, b) => {
+    const tsA = a.kind === 'thinking-step' ? a.message.createdAt : a.event.occurredAt;
+    const tsB = b.kind === 'thinking-step' ? b.message.createdAt : b.event.occurredAt;
+    return new Date(tsA).getTime() - new Date(tsB).getTime();
+  });
+
+  return items;
+}
+
+/* ── Group the flat stream into displayable chunks ─────────── */
+
+export function groupActivityStream(items: ActivityStreamItem[]): GroupedActivityItem[] {
+  const result: GroupedActivityItem[] = [];
+
+  let i = 0;
+  while (i < items.length) {
+    const item = items[i];
+
+    // ── Thinking steps: group consecutive runs ──────────────
+    if (item.kind === 'thinking-step') {
+      const group: ChatMessageRecord[] = [item.message];
+      let j = i + 1;
+      while (j < items.length && items[j].kind === 'thinking-step') {
+        group.push((items[j] as { kind: 'thinking-step'; message: ChatMessageRecord }).message);
+        j++;
+      }
+      if (group.length === 1) {
+        result.push({ kind: 'single-thinking', message: group[0] });
+      } else {
+        result.push({ kind: 'thinking-group', messages: group });
+      }
+      i = j;
+      continue;
+    }
+
+    // ── Timeline events ─────────────────────────────────────
+    const event = item.event;
+
+    // report_intent → phase divider
+    if (event.kind === 'tool-call' && event.toolName === 'report_intent') {
+      const intentText =
+        typeof event.toolArguments?.intent === 'string'
+          ? event.toolArguments.intent
+          : '';
+      if (intentText) {
+        result.push({ kind: 'intent-divider', intentText, event });
+      }
+      // Skip silently when intent text is empty
+      i++;
+      continue;
+    }
+
+    // Tool calls: group consecutive calls of the same tool
+    if (event.kind === 'tool-call' && event.toolName) {
+      const toolName = event.toolName;
+      const group: RunTimelineEventRecord[] = [event];
+      let j = i + 1;
+      while (j < items.length) {
+        const next = items[j];
+        if (next.kind !== 'timeline-event') break;
+        if (next.event.kind !== 'tool-call') break;
+        if (next.event.toolName !== toolName) break;
+        group.push(next.event);
+        j++;
+      }
+      if (group.length === 1) {
+        result.push({ kind: 'single-event', event: group[0] });
+      } else {
+        result.push({ kind: 'tool-group', toolName, events: group });
+      }
+      i = j;
+      continue;
+    }
+
+    // Everything else: single event
+    result.push({ kind: 'single-event', event });
+    i++;
+  }
+
+  return result;
+}
+
+/* ── Extract the latest intent from events ─────────────────── */
+
+export function extractLatestIntent(events: readonly RunTimelineEventRecord[]): string | undefined {
+  for (let i = events.length - 1; i >= 0; i--) {
+    const e = events[i];
+    if (
+      e.kind === 'tool-call'
+      && e.toolName === 'report_intent'
+      && typeof e.toolArguments?.intent === 'string'
+      && e.toolArguments.intent.trim()
+    ) {
+      return e.toolArguments.intent.trim();
+    }
+  }
+  return undefined;
+}
+
+/* ── Generate a fallback summary from the tool mix ─────────── */
+
+export function generateActivitySummary(events: readonly RunTimelineEventRecord[]): string | undefined {
+  const toolCounts = new Map<string, number>();
+  let editCount = 0;
+  let searchCount = 0;
+  let viewCount = 0;
+
+  for (const e of events) {
+    if (e.kind !== 'tool-call' || !e.toolName) continue;
+    if (e.toolName === 'report_intent') continue;
+    toolCounts.set(e.toolName, (toolCounts.get(e.toolName) ?? 0) + 1);
+
+    if (e.toolName === 'edit' || e.toolName === 'create') editCount++;
+    else if (e.toolName === 'grep' || e.toolName === 'glob' || e.toolName === 'lsp') searchCount++;
+    else if (e.toolName === 'view') viewCount++;
+  }
+
+  const parts: string[] = [];
+  if (searchCount > 0) parts.push(`searched ${searchCount} ${searchCount === 1 ? 'pattern' : 'patterns'}`);
+  if (viewCount > 0) parts.push(`viewed ${viewCount} ${viewCount === 1 ? 'file' : 'files'}`);
+  if (editCount > 0) parts.push(`edited ${editCount} ${editCount === 1 ? 'file' : 'files'}`);
+
+  if (parts.length === 0) {
+    const total = Array.from(toolCounts.values()).reduce((a, b) => a + b, 0);
+    if (total > 0) return `${total} ${total === 1 ? 'action' : 'actions'}`;
+    return undefined;
+  }
+
+  // Capitalize first part
+  parts[0] = parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+  return parts.join(', ');
+}

src/renderer/lib/runTimelineFormatting.ts

@@ -5,6 +5,7 @@ import type {
   SessionRunStatus,
 } from '@shared/domain/runTimeline';
 import { buildMarkdownExcerpt } from '@shared/utils/markdownText';
+import { formatToolCallPrimaryLabel } from '@renderer/lib/toolCallSummary';
 
 export function formatRunTimestamp(isoDate: string): string {
   try {
@@ -78,9 +79,7 @@ export function formatEventLabel(event: RunTimelineEventRecord): string {
       }
       return event.targetAgentName ? `Handoff to ${event.targetAgentName}` : 'Handoff';
     case 'tool-call':
-      return event.toolName
-        ? `${event.agentName ?? 'Agent'} used ${event.toolName}`
-        : `${event.agentName ?? 'Agent'} tool call`;
+      return formatToolCallPrimaryLabel(event.toolName, event.toolArguments);
     case 'approval':
       if (event.status === 'completed') {
         return event.approvalTitle ? `${event.approvalTitle} approved` : 'Approval granted';

src/renderer/lib/toolCallSummary.ts

@@ -114,3 +114,180 @@ export function getDisplayableArguments(
       && value !== '',
   );
 }
+
+/* ── Verb-based primary labels ─────────────────────────────── */
+
+function shortenPath(rawPath: string): string {
+  const normalized = rawPath.replace(/\\/g, '/');
+  const lastSlash = normalized.lastIndexOf('/');
+  const fileName = lastSlash >= 0 ? normalized.slice(lastSlash + 1) : normalized;
+  return truncateSummary(fileName);
+}
+
+function pathWithRange(args: Record<string, unknown>): string | undefined {
+  const path = stringArg(args, 'path');
+  if (!path) return undefined;
+  const name = shortenPath(path);
+  const range = args['view_range'] ?? args['viewRange'];
+  if (Array.isArray(range) && range.length === 2) {
+    return `${name}:${range[0]}-${range[1]}`;
+  }
+  return name;
+}
+
+type VerbLabelExtractor = (args: Record<string, unknown>) => string;
+
+const verbLabels: Record<string, VerbLabelExtractor> = {
+  view: (args) => {
+    const target = pathWithRange(args);
+    return target ? `Viewed \`${target}\`` : 'Viewed a file';
+  },
+  edit: (args) => {
+    const name = stringArg(args, 'path') ? shortenPath(stringArg(args, 'path')!) : undefined;
+    return name ? `Edited \`${name}\`` : 'Edited a file';
+  },
+  create: (args) => {
+    const name = stringArg(args, 'path') ? shortenPath(stringArg(args, 'path')!) : undefined;
+    return name ? `Created \`${name}\`` : 'Created a file';
+  },
+  grep: (args) => {
+    const pattern = stringArg(args, 'pattern');
+    return pattern ? `Searched for \`${truncateSummary(pattern)}\`` : 'Searched files';
+  },
+  glob: (args) => {
+    const pattern = stringArg(args, 'pattern');
+    return pattern ? `Glob \`${truncateSummary(pattern)}\`` : 'Searched for files';
+  },
+  lsp: (args) => {
+    const op = stringArg(args, 'operation');
+    const file = stringArg(args, 'file') ? shortenPath(stringArg(args, 'file')!) : undefined;
+    if (op && file) return `LSP ${op} \`${file}\``;
+    return op ? `LSP ${op}` : 'LSP operation';
+  },
+  powershell: (args) => {
+    const cmd = stringArg(args, 'command');
+    return cmd ? `Ran \`${truncateSummary(cmd)}\`` : 'Ran a command';
+  },
+  web_fetch: (args) => {
+    const url = stringArg(args, 'url');
+    if (!url) return 'Fetched a URL';
+    try {
+      const hostname = new URL(url).hostname;
+      return `Fetched \`${hostname}\``;
+    } catch {
+      return `Fetched \`${truncateSummary(url)}\``;
+    }
+  },
+  web_search: (args) => {
+    const query = stringArg(args, 'query');
+    return query ? `Searched web: "${truncateSummary(query)}"` : 'Web search';
+  },
+  sql: (args) => {
+    const desc = stringArg(args, 'description');
+    return desc ? `SQL: ${truncateSummary(desc)}` : 'SQL query';
+  },
+  task: (args) => {
+    const desc = stringArg(args, 'description');
+    return desc ? `Launched agent: ${truncateSummary(desc)}` : 'Launched agent';
+  },
+  ask_user: (args) => {
+    const q = stringArg(args, 'question');
+    return q ? `Asked: "${truncateSummary(q)}"` : 'Asked a question';
+  },
+  skill: (args) => {
+    const name = stringArg(args, 'skill');
+    return name ? `Used skill \`${name}\`` : 'Used a skill';
+  },
+  store_memory: () => 'Stored a memory',
+  report_intent: (args) => {
+    const intent = stringArg(args, 'intent');
+    return intent ? intent : 'Updated intent';
+  },
+};
+
+/**
+ * Produces a verb-based, context-rich label for a tool call.
+ * E.g. "Viewed `ChatPane.tsx:148-250`", "Searched for `toolCall`".
+ * Falls back to "Used <toolName>" when no specific formatter exists.
+ */
+export function formatToolCallPrimaryLabel(
+  toolName: string | undefined,
+  toolArguments: Record<string, unknown> | undefined,
+): string {
+  if (!toolName) return 'Tool call';
+
+  const args = toolArguments ?? {};
+
+  // GitHub MCP tools
+  if (toolName.startsWith('github-')) {
+    const detail = summarizeGitHub(toolName, args);
+    const shortName = toolName.replace(/^github-mcp-server-/, '').replace(/_/g, ' ');
+    return detail ? `GitHub: ${shortName} — ${detail}` : `GitHub: ${shortName}`;
+  }
+
+  const extractor = verbLabels[toolName];
+  if (extractor) {
+    return extractor(args);
+  }
+
+  // Unknown tool — try to extract something useful
+  const detail = fallbackSummary(args);
+  return detail ? `Used ${toolName}: ${detail}` : `Used ${toolName}`;
+}
+
+/**
+ * Produces a compact group label for N consecutive calls of the same tool.
+ * E.g. "Viewed 4 files", "Ran 3 commands", "Searched 5 patterns".
+ */
+export function formatToolGroupLabel(toolName: string, count: number): string {
+  const n = count;
+  switch (toolName) {
+    case 'view': return `Viewed ${n} ${n === 1 ? 'file' : 'files'}`;
+    case 'edit': return `Edited ${n} ${n === 1 ? 'file' : 'files'}`;
+    case 'create': return `Created ${n} ${n === 1 ? 'file' : 'files'}`;
+    case 'grep': return `Searched ${n} ${n === 1 ? 'pattern' : 'patterns'}`;
+    case 'glob': return `Glob ${n} ${n === 1 ? 'pattern' : 'patterns'}`;
+    case 'lsp': return `${n} LSP ${n === 1 ? 'operation' : 'operations'}`;
+    case 'powershell': return `Ran ${n} ${n === 1 ? 'command' : 'commands'}`;
+    case 'web_fetch': return `Fetched ${n} ${n === 1 ? 'URL' : 'URLs'}`;
+    case 'sql': return `${n} SQL ${n === 1 ? 'query' : 'queries'}`;
+    case 'task': return `Launched ${n} ${n === 1 ? 'agent' : 'agents'}`;
+    default: return `${n} ${toolName} ${n === 1 ? 'call' : 'calls'}`;
+  }
+}
+
+/**
+ * Extracts a short contextual snippet for a tool call to show inside
+ * a grouped row's detail list (e.g. the file path for view, the pattern for grep).
+ */
+export function extractToolCallSnippet(
+  toolName: string,
+  toolArguments: Record<string, unknown> | undefined,
+): string | undefined {
+  if (!toolArguments) return undefined;
+  switch (toolName) {
+    case 'view':
+    case 'edit':
+    case 'create':
+      return pathWithRange(toolArguments) ?? stringArg(toolArguments, 'path');
+    case 'grep':
+    case 'glob':
+      return stringArg(toolArguments, 'pattern');
+    case 'powershell':
+      return stringArg(toolArguments, 'command') ? truncateSummary(stringArg(toolArguments, 'command')!) : undefined;
+    case 'lsp': {
+      const op = stringArg(toolArguments, 'operation');
+      const file = stringArg(toolArguments, 'file') ? shortenPath(stringArg(toolArguments, 'file')!) : undefined;
+      if (op && file) return `${op} ${file}`;
+      return op ?? undefined;
+    }
+    case 'web_fetch':
+      return stringArg(toolArguments, 'url');
+    case 'sql':
+      return stringArg(toolArguments, 'description');
+    case 'task':
+      return stringArg(toolArguments, 'description');
+    default:
+      return undefined;
+  }
+}

src/renderer/styles.css

@@ -663,6 +663,17 @@ body {
   animation: turn-activity-row-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
+@keyframes intent-divider-in {
+  from {
+    opacity: 0;
+    transform: scaleX(0.7);
+  }
+}
+
+.turn-activity-row[role="separator"] {
+  animation: intent-divider-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
 /* ── Respect reduced motion ──────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {
@@ -677,7 +688,8 @@ body {
   .banner-slide-enter,
   .update-banner-enter,
   .turn-activity-enter,
-  .turn-activity-row {
+  .turn-activity-row,
+  .turn-activity-row[role="separator"] {
     animation: none;
   }
 }