feat(web-ui): compress and summarize verbose execution event stream (#475)

web-ui/src/components/execution/EventStream.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useRef, useEffect, useState, useCallback } from 'react';
-import { ArrowDown01Icon } from '@hugeicons/react';
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { ArrowDown01Icon, ArrowRight01Icon } from '@hugeicons/react';
 import { Button } from '@/components/ui/button';
+import { editGroupBadgeStyles } from '@/lib/eventStyles';
 import { EventItem } from './EventItem';
 import type { ExecutionEvent } from '@/hooks/useTaskStream';
 
@@ -12,25 +13,149 @@ interface EventStreamProps {
   onBlockerAnswered?: () => void;
 }
 
+// ── Event grouping ──────────────────────────────────────────────────────
+
+type EventGroup =
+  | { type: 'event'; event: ExecutionEvent }
+  | { type: 'read_group'; count: number; files: string[]; timestamp: string; events: ExecutionEvent[] }
+  | { type: 'edit_group'; count: number; files: string[]; timestamp: string };
+
+function extractFilename(msg: string): string {
+  const m = msg.match(/file:\s*(.+)/i);
+  return m ? (m[1].split('/').pop() ?? m[1]) : msg;
+}
+
+function isReadEvent(e: ExecutionEvent): boolean {
+  if (e.event_type !== 'progress') return false;
+  return /^reading file:/i.test((e as { message?: string }).message ?? '');
+}
+
+function isEditEvent(e: ExecutionEvent): boolean {
+  if (e.event_type !== 'progress') return false;
+  return /^(creating|editing|deleting) file:/i.test((e as { message?: string }).message ?? '');
+}
+
+function groupEvents(events: ExecutionEvent[]): EventGroup[] {
+  const groups: EventGroup[] = [];
+  let readBuf: ExecutionEvent[] = [];
+  let editBuf: ExecutionEvent[] = [];
+
+  function flushRead() {
+    if (!readBuf.length) return;
+    const files = readBuf.map((e) => extractFilename((e as { message?: string }).message ?? ''));
+    groups.push({ type: 'read_group', count: readBuf.length, files, timestamp: readBuf[0].timestamp, events: [...readBuf] });
+    readBuf = [];
+  }
+
+  function flushEdit() {
+    if (!editBuf.length) return;
+    if (editBuf.length === 1) {
+      groups.push({ type: 'event', event: editBuf[0] });
+    } else {
+      const files = editBuf.map((e) => extractFilename((e as { message?: string }).message ?? ''));
+      groups.push({ type: 'edit_group', count: editBuf.length, files, timestamp: editBuf[0].timestamp });
+    }
+    editBuf = [];
+  }
+
+  for (const event of events) {
+    if (isReadEvent(event)) {
+      flushEdit();
+      readBuf.push(event);
+    } else if (isEditEvent(event)) {
+      flushRead();
+      editBuf.push(event);
+    } else {
+      flushRead();
+      flushEdit();
+      groups.push({ type: 'event', event });
+    }
+  }
+  flushRead();
+  flushEdit();
+  return groups;
+}
+
+// ── Group row components ────────────────────────────────────────────────
+
+function ReadGroupRow({
+  group,
+  workspacePath,
+}: {
+  group: Extract<EventGroup, { type: 'read_group' }>;
+  workspacePath: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div>
+      <button
+        className="flex w-full items-center gap-2 rounded px-1 py-1 text-left text-xs text-muted-foreground hover:bg-muted/40"
+        onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+        aria-label={`${expanded ? 'Collapse' : 'Expand'} ${group.count} file read events`}
+      >
+        <ArrowRight01Icon
+          className={`h-3 w-3 shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}
+        />
+        <span className="font-mono text-[11px]">
+          {new Date(group.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+        </span>
+        <span>
+          Read {group.count} file{group.count !== 1 ? 's' : ''}
+          {group.count <= 4 && `: ${group.files.join(', ')}`}
+        </span>
+      </button>
+      {expanded && (
+        <div className="ml-4 space-y-0.5 border-l pl-3">
+          {group.events.map((e, i) => (
+            <EventItem key={`${e.timestamp}-${i}`} event={e} workspacePath={workspacePath} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function EditGroupRow({ group }: { group: Extract<EventGroup, { type: 'edit_group' }> }) {
+  return (
+    <div className="flex items-baseline gap-2 py-1.5">
+      <span className="shrink-0 font-mono text-[11px] text-muted-foreground">
+        {new Date(group.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+      </span>
+      <span className={`rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase leading-none ${editGroupBadgeStyles}`}>
+        edit
+      </span>
+      <p className="text-sm">
+        Modified {group.count} files: {group.files.join(', ')}
+      </p>
+    </div>
+  );
+}
+
+// ── Main EventStream ────────────────────────────────────────────────────
+
 /**
- * Scrollable event stream with auto-scroll behavior.
- *
- * - Default: auto-scrolls to bottom on new events
- * - When user scrolls up: pauses auto-scroll, shows "New events" button
- * - Click button or scroll to bottom: re-enables auto-scroll
+ * Scrollable event stream with auto-scroll and smart grouping.
  *
- * Uses a single scrollable div (no Radix ScrollArea) so that
- * onScroll and scrollIntoView work on the same container.
+ * Smart view (default): groups consecutive file reads into collapsible rows
+ * and summarises consecutive file edits into a single line.
+ * Raw log: toggle via "Show all events" button to see every event unmodified.
  */
 export function EventStream({ events, workspacePath, onBlockerAnswered }: EventStreamProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
   const [hasNewEvents, setHasNewEvents] = useState(false);
+  const [showAll, setShowAll] = useState(false);
   const prevEventCountRef = useRef(events.length);
 
   // Filter out heartbeat events for display
-  const displayEvents = events.filter((e) => e.event_type !== 'heartbeat');
+  const displayEvents = useMemo(
+    () => events.filter((e) => e.event_type !== 'heartbeat'),
+    [events]
+  );
+  const groups = useMemo(() => groupEvents(displayEvents), [displayEvents]);
 
   // Detect new events while scrolled up
   useEffect(() => {
@@ -71,9 +196,20 @@ export function EventStream({ events, workspacePath, onBlockerAnswered }: EventS
 
   return (
     <div className="relative flex-1 overflow-hidden rounded-lg border">
+      {/* Header: stream label + view toggle */}
+      <div className="flex items-center justify-between border-b px-4 py-2">
+        <span className="text-xs font-medium text-muted-foreground">Event stream</span>
+        <button
+          className="text-xs text-muted-foreground hover:text-foreground"
+          onClick={() => setShowAll((v) => !v)}
+        >
+          {showAll ? 'Smart view' : 'Show all events'}
+        </button>
+      </div>
+
       <div
         ref={containerRef}
-        className="h-full overflow-y-auto p-4"
+        className="h-[calc(100%-37px)] overflow-y-auto p-4"
         onScroll={handleScroll}
         role="log"
         aria-live="polite"
@@ -83,7 +219,8 @@ export function EventStream({ events, workspacePath, onBlockerAnswered }: EventS
           <p className="py-8 text-center text-sm text-muted-foreground">
             Waiting for events...
           </p>
-        ) : (
+        ) : showAll ? (
+          // Raw log — every event unmodified
           <div className="space-y-0.5">
             {displayEvents.map((event, i) => (
               <EventItem
@@ -94,6 +231,26 @@ export function EventStream({ events, workspacePath, onBlockerAnswered }: EventS
               />
             ))}
           </div>
+        ) : (
+          // Smart view — grouped
+          <div className="space-y-0.5">
+            {groups.map((group, i) => {
+              if (group.type === 'event') {
+                return (
+                  <EventItem
+                    key={`${group.event.timestamp}-${i}`}
+                    event={group.event}
+                    workspacePath={workspacePath}
+                    onBlockerAnswered={onBlockerAnswered}
+                  />
+                );
+              }
+              if (group.type === 'read_group') {
+                return <ReadGroupRow key={`rg-${i}`} group={group} workspacePath={workspacePath} />;
+              }
+              return <EditGroupRow key={`eg-${i}`} group={group} />;
+            })}
+          </div>
         )}
         {/* Scroll sentinel */}
         <div ref={bottomRef} />

web-ui/src/lib/eventStyles.ts

@@ -82,6 +82,9 @@ export const agentStateBadgeStyles: Record<UIAgentState, string> = {
   DISCONNECTED: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
 };
 
+/** Badge style for the edit-group summary row in the EventStream. */
+export const editGroupBadgeStyles = 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
+
 /** Human-readable labels for each agent state. */
 export const agentStateLabels: Record<UIAgentState, string> = {
   CONNECTING: 'Connecting',