feat: UX polish for Trace tab, Inspect tab, and cross-tab design system

- Trace tab: enhanced session cards with accent borders, hover animations,
  status indicator dots, replay value pills, replay control grouping,
  breakpoint stop banner, detail rail section headers, search focus rings
- Inspect tab: panel visual hierarchy with panel--accent modifier,
  section dividers (Analysis, Monitoring, Intelligence), inspector labels,
  DecisionTree panel polish, coordination and failure cluster accent colors
- Global: compact header, spacing scale CSS variables (--space-*),
  panel base style refinement, empty state polish, snappier transitions
- Per-feature GIFs: decision tree, checkpoint replay, failure clustering,
  multi-agent coordination, and full walkthrough demo

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: acailic

docs/screenshots/gif-checkpoint-replay.gif

@@ -83,9 +83,6 @@ function App() {
   } = useSessionStore()
 
   // Local state for items not yet moved to the store
-  const rollingSummaryData: RollingSummary | null = null
-  const policyShifts: PolicyShift[] = []
-  const failureClusters: FailureCluster[] = []
 
   useEffect(() => {
     let ignore = false
@@ -470,8 +467,8 @@ function App() {
   return (
     <div className="app-shell">
       <header className="hero">
-        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
-          <Logo size={32} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <Logo size={24} />
           <div>
             <h1>Peaky Peek</h1>
           </div>
@@ -526,10 +523,22 @@ function App() {
             </div>
 
             <div className="inspect-grid">
+              {/* Analysis Group: Inspectors + Conversation + Comparison */}
+              <div className="inspect-section-divider">
+                <span className="inspect-section-label">Analysis</span>
+              </div>
+
               <section className="panel panel--primary">
                 <div className="inspectors-grid">
-                  <ToolInspector event={toolEvent} />
-                  <LLMViewer request={llmRequest} response={llmResponse} />
+                  <div className="inspector-wrapper">
+                    <span className="inspector-label">Tool Inspector</span>
+                    <ToolInspector event={toolEvent} />
+                  </div>
+                  <div className="inspector-separator" />
+                  <div className="inspector-wrapper">
+                    <span className="inspector-label">LLM Viewer</span>
+                    <LLMViewer request={llmRequest} response={llmResponse} />
+                  </div>
                 </div>
               </section>
 
@@ -553,13 +562,17 @@ function App() {
                 />
               </section>
 
+              {/* Monitoring Group: Live Dashboard + Checkpoints + Alerts */}
+              <div className="inspect-section-divider">
+                <span className="inspect-section-label">Monitoring</span>
+              </div>
+
               <section className="panel panel--secondary">
                 <LiveDashboard
                   session={currentSession}
                   events={mergedSessionEvents}
                   checkpoints={bundle?.checkpoints ?? []}
                   liveSummary={liveSummary}
-                  rollingSummaryData={rollingSummaryData}
                   isConnected={streamConnected}
                   liveEventCount={liveEvents.length}
                   onSelectEvent={handleInspectEvent}
@@ -653,17 +666,28 @@ function App() {
                 loading={driftLoading}
               />
               <PolicyDiffView
-                policyShifts={policyShifts}
+                policyShifts={[]}
                 onSelectEvent={handleInspectEvent}
               />
-              <FailureClusterPanel
-                clusters={failureClusters}
-                onSelectSession={setSelectedSessionId}
-                selectedSessionId={selectedSessionId}
-                analysisClusters={bundle?.analysis.failure_clusters ?? []}
-                events={mergedSessionEvents}
-              />
-              <MultiAgentCoordinationPanel bundle={bundle} />
+
+              {/* Intelligence Group: Drift + Policy + Failure Clusters + Coordination */}
+              <div className="inspect-section-divider">
+                <span className="inspect-section-label">Intelligence</span>
+              </div>
+
+              <section className="panel panel--accent failure-cluster-panel">
+                <FailureClusterPanel
+                  clusters={[]}
+                  onSelectSession={setSelectedSessionId}
+                  selectedSessionId={selectedSessionId}
+                  analysisClusters={bundle?.analysis.failure_clusters ?? []}
+                  events={mergedSessionEvents}
+                />
+              </section>
+
+              <section className="panel panel--accent coordination-panel">
+                <MultiAgentCoordinationPanel bundle={bundle} />
+              </section>
             </div>
           </section>
         </main>

docs/screenshots/gif-decision-tree.gif

@@ -4,17 +4,17 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 3rem 2rem;
-  gap: 0.75rem;
+  padding: 4rem 2rem;
+  gap: 1rem;
   max-width: 420px;
   margin: 0 auto;
   background: linear-gradient(135deg, color-mix(in oklch, var(--panel), var(--accent) 3%), color-mix(in oklch, var(--panel), var(--bg-strong) 6%));
-  border-radius: 1.2rem;
+  border-radius: 1.4rem;
 }
 
 .empty-state-icon {
-  font-size: 2.5rem;
-  opacity: 0.5;
+  font-size: 3rem;
+  opacity: 0.6;
   line-height: 1;
   animation: float 3s ease-in-out infinite;
 }
@@ -29,17 +29,17 @@
 }
 
 .empty-state-title {
-  font-size: 1.1rem;
+  font-size: 1.25rem;
   font-weight: 600;
   margin: 0;
-  color: var(--text-primary, #e0e0e0);
+  color: var(--text);
 }
 
 .empty-state-description {
-  font-size: 0.85rem;
-  color: var(--text-secondary, #888);
+  font-size: 0.9rem;
+  color: var(--muted);
   margin: 0;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .empty-state-steps {

docs/screenshots/gif-failure-clustering.gif

@@ -1,5 +1,5 @@
 import type { Checkpoint, LiveSummary, RollingSummary, Session, TraceEvent } from '../types'
-import { formatEventHeadline } from '../utils/formatting'
+import { computeCheckpointDelta, formatEventHeadline, formatMetricLabel, latestOf } from '../utils/formatting'
 
 interface LiveDashboardProps {
   session: Session | null
@@ -12,20 +12,6 @@ interface LiveDashboardProps {
   onSelectEvent: (eventId: string) => void
 }
 
-function latestOf(events: TraceEvent[], eventTypes: string[]): TraceEvent | null {
-  for (let index = events.length - 1; index >= 0; index -= 1) {
-    const event = events[index]
-    if (eventTypes.includes(event.event_type)) {
-      return event
-    }
-  }
-  return null
-}
-
-function formatMetricLabel(key: string): string {
-  return key.replaceAll('_', ' ').replace(/\b\w/g, (c) => c.toUpperCase())
-}
-
 interface StabilityIndicatorProps {
   alertCount: number
   hasOscillation: boolean
@@ -87,14 +73,7 @@ export function LiveDashboard({
   const metrics = rollingSummaryData?.metrics ?? {}
   const metricEntries = Object.entries(metrics)
 
-  function computeCheckpointDelta(): { stateDelta: number; memoryDelta: number } | null {
-    if (!latestCheckpoint || !previousCheckpoint) return null
-    const stateDelta = Object.keys(latestCheckpoint.state).length - Object.keys(previousCheckpoint.state).length
-    const memoryDelta = Object.keys(latestCheckpoint.memory).length - Object.keys(previousCheckpoint.memory).length
-    return { stateDelta, memoryDelta }
-  }
-
-  const checkpointDelta = computeCheckpointDelta()
+  const checkpointDelta = computeCheckpointDelta(latestCheckpoint, previousCheckpoint)
 
   return (
     <div className="live-dashboard">

docs/screenshots/gif-multi-agent-coordination.gif

@@ -1,5 +1,5 @@
 import type { Checkpoint, LiveSummary, RollingSummary, Session, TraceEvent } from '../types'
-import { formatEventHeadline } from '../utils/formatting'
+import { computeCheckpointDelta, formatEventHeadline, formatMetricLabel, latestOf } from '../utils/formatting'
 
 interface LiveSummaryPanelProps {
   session: Session | null
@@ -12,20 +12,6 @@ interface LiveSummaryPanelProps {
   onSelectEvent: (eventId: string) => void
 }
 
-function latestOf(events: TraceEvent[], eventTypes: string[]): TraceEvent | null {
-  for (let index = events.length - 1; index >= 0; index -= 1) {
-    const event = events[index]
-    if (eventTypes.includes(event.event_type)) {
-      return event
-    }
-  }
-  return null
-}
-
-function formatMetricLabel(key: string): string {
-  return key.replaceAll('_', ' ').replace(/\b\w/g, (c) => c.toUpperCase())
-}
-
 export function LiveSummaryPanel({
   session,
   events,
@@ -55,14 +41,7 @@ export function LiveSummaryPanel({
   const metrics = rollingSummaryData?.metrics ?? {}
   const metricEntries = Object.entries(metrics)
 
-  function computeCheckpointDelta(): { stateDelta: number; memoryDelta: number } | null {
-    if (!latestCheckpoint || !previousCheckpoint) return null
-    const stateDelta = Object.keys(latestCheckpoint.state).length - Object.keys(previousCheckpoint.state).length
-    const memoryDelta = Object.keys(latestCheckpoint.memory).length - Object.keys(previousCheckpoint.memory).length
-    return { stateDelta, memoryDelta }
-  }
-
-  const checkpointDelta = computeCheckpointDelta()
+  const checkpointDelta = computeCheckpointDelta(latestCheckpoint, previousCheckpoint)
 
   return (
     <div className="live-summary-panel">

frontend/src/App.css

@@ -70,11 +70,14 @@ export function SessionRail() {
               setSelectedEventId(null)
             }}
           >
-            <span className="session-name">{session.agent_name}</span>
+            <div className="session-card-header">
+              <span className="session-name">{session.agent_name}</span>
+              <span className={`session-status-dot ${session.status === 'error' ? 'error' : session.status === 'completed' ? 'success' : 'pending'}`} />
+            </div>
             <span className="session-framework">{session.framework}</span>
             <span className="session-status">{session.status}</span>
             <div className="session-card-metrics">
-              <span>Replay {(session.replay_value ?? 0).toFixed(2)}</span>
+              <span className="replay-value-badge">Replay {(session.replay_value ?? 0).toFixed(2)}</span>
               <span className={`retention-pill ${session.retention_tier ?? 'downsampled'}`}>
                 {session.retention_tier ?? 'downsampled'}
               </span>