From 240957c8e00e86cf18060bece0017be1a25edf82 Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Fri, 24 Apr 2026 06:57:03 -0400
Subject: [PATCH] feat(web): add SessionDigestPanel React component

Port src/tui/components/SessionDigest.ts to React. The panel exposes:
- 5-tab view (Summary, Beads, Files, Errors, Workers) matching TUI output
- Generate Digest button calling /api/digest (GET, no auth required)
- Export to JSON, Markdown, and plain text via browser download
- CSS styles for all digest UI classes in index.css
- Integration in App.tsx via digest-toggle header button and show:digest command

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/web/frontend/src/App.tsx                  |  19 +
 .../src/components/SessionDigestPanel.tsx     | 530 ++++++++++++++++++
 src/web/frontend/src/index.css                | 374 ++++++++++++
 src/web/frontend/src/types.ts                 |  65 +++
 src/web/server.ts                             |  15 +
 5 files changed, 1003 insertions(+)
 create mode 100644 src/web/frontend/src/components/SessionDigestPanel.tsx

diff --git a/src/web/frontend/src/App.tsx b/src/web/frontend/src/App.tsx
index e88d6dd..550270f 100644
--- a/src/web/frontend/src/App.tsx
+++ b/src/web/frontend/src/App.tsx
@@ -16,6 +16,7 @@ import CostDashboard from './components/CostDashboard';
 import AnalyticsDashboard from './components/AnalyticsDashboard';
 import ErrorGroupPanel from './components/ErrorGroupPanel';
 import BudgetAlertPanel, { BudgetBanner } from './components/BudgetAlertPanel';
+import SessionDigestPanel from './components/SessionDigestPanel';
 import CommandPalette from './components/CommandPalette';
 import { extractReplayFromUrl, ReplayExport } from './utils/replayExport';
 import { FocusPresetManager, createWebPresetManager, FocusPreset } from './utils/focusPresets';
@@ -251,6 +252,7 @@ const App: React.FC = () => {
   const [showCostDashboard, setShowCostDashboard] = useState(false);
   const [showErrorGroups, setShowErrorGroups] = useState(false);
   const [showBudgetAlert, setShowBudgetAlert] = useState(false);
+  const [showSessionDigest, setShowSessionDigest] = useState(false);
   const [budgetBannerDismissed, setBudgetBannerDismissed] = useState(false);
 
   // Budget alert state polled from /api/cost/summary
@@ -527,6 +529,8 @@ const App: React.FC = () => {
       setShowErrorGroups(true);
     } else if (action === 'show:budget') {
       setShowBudgetAlert(true);
+    } else if (action === 'show:digest') {
+      setShowSessionDigest(true);
     } else if (action.startsWith('worker:')) {
       const workerId = action.slice('worker:'.length);
       setSelectedWorker(workerId);
@@ -790,6 +794,14 @@ const App: React.FC = () => {
               <span className="budget-alert-badge">!</span>
             )}
           </button>
+          <button
+            className={`digest-toggle ${showSessionDigest ? 'active' : ''}`}
+            onClick={() => setShowSessionDigest(!showSessionDigest)}
+            title="Generate session digest"
+          >
+            <span className="digest-toggle-icon">📋</span>
+            <span className="digest-toggle-label">Digest</span>
+          </button>
           {unacknowledgedAlertCount > 0 && (
             <button
               className="collision-alert-toggle"
@@ -940,6 +952,13 @@ const App: React.FC = () => {
           />
         )}
 
+        {showSessionDigest && (
+          <SessionDigestPanel
+            visible={showSessionDigest}
+            onClose={() => setShowSessionDigest(false)}
+          />
+        )}
+
         {showSessionReplay && (
           <div className="session-replay-panel">
             <div className="session-replay-header">
diff --git a/src/web/frontend/src/components/SessionDigestPanel.tsx b/src/web/frontend/src/components/SessionDigestPanel.tsx
new file mode 100644
index 0000000..d61a53c
--- /dev/null
+++ b/src/web/frontend/src/components/SessionDigestPanel.tsx
@@ -0,0 +1,530 @@
+import React, { useState, useCallback } from 'react';
+import {
+  SessionDigestData,
+  DigestTab,
+  DigestBeadCompletion,
+  DigestFileModification,
+  DigestErrorOccurrence,
+  DigestWorkerSummary,
+  ErrorCategory,
+} from '../types';
+
+interface SessionDigestPanelProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 3600000) {
+    const mins = Math.floor(ms / 60000);
+    const secs = Math.floor((ms % 60000) / 1000);
+    return `${mins}m ${secs}s`;
+  }
+  const hours = Math.floor(ms / 3600000);
+  const mins = Math.floor((ms % 3600000) / 60000);
+  return `${hours}h ${mins}m`;
+}
+
+function formatAsMarkdown(d: SessionDigestData): string {
+  const lines: string[] = [];
+
+  lines.push('# Session Digest');
+  lines.push('');
+  lines.push(`**Session ID:** ${d.sessionId}`);
+  lines.push(`**Start Time:** ${new Date(d.startTime).toLocaleString()}`);
+  lines.push(`**End Time:** ${new Date(d.endTime).toLocaleString()}`);
+  lines.push(`**Duration:** ${formatDuration(d.durationMs)}`);
+  lines.push('');
+
+  lines.push('## Statistics');
+  lines.push('');
+  lines.push('| Metric | Value |');
+  lines.push('|--------|-------|');
+  lines.push(`| Total Events | ${d.stats.totalEvents} |`);
+  lines.push(`| Total Workers | ${d.stats.totalWorkers} |`);
+  lines.push(`| Total Beads | ${d.stats.totalBeads} |`);
+  lines.push(`| Total Files | ${d.stats.totalFiles} |`);
+  lines.push(`| Total Errors | ${d.stats.totalErrors} |`);
+  lines.push('');
+
+  if (d.cost.totalTokens > 0) {
+    lines.push('## Cost Breakdown');
+    lines.push('');
+    lines.push(`- **Input Tokens:** ${d.cost.inputTokens.toLocaleString()}`);
+    lines.push(`- **Output Tokens:** ${d.cost.outputTokens.toLocaleString()}`);
+    lines.push(`- **Total Tokens:** ${d.cost.totalTokens.toLocaleString()}`);
+    lines.push(`- **Estimated Cost:** $${d.cost.estimatedCostUsd.toFixed(4)}`);
+    lines.push('');
+  }
+
+  lines.push('## Completed Beads');
+  lines.push('');
+  if (d.beadsCompleted.length === 0) {
+    lines.push('_No beads completed_');
+  } else {
+    lines.push('| Bead ID | Worker | Completed At | Duration |');
+    lines.push('|---------|--------|--------------|----------|');
+    for (const bead of d.beadsCompleted) {
+      const time = new Date(bead.completedAt).toLocaleString();
+      const duration = bead.durationMs ? formatDuration(bead.durationMs) : '-';
+      lines.push(`| ${bead.beadId} | ${bead.workerId.slice(0, 8)} | ${time} | ${duration} |`);
+    }
+  }
+  lines.push('');
+
+  lines.push('## Files Modified');
+  lines.push('');
+  if (d.filesModified.length === 0) {
+    lines.push('_No files modified_');
+  } else {
+    lines.push('| Path | Modifications | Workers |');
+    lines.push('|------|---------------|---------|');
+    for (const file of d.filesModified) {
+      lines.push(`| \`${file.path}\` | ${file.modifications} | ${file.workers.length} |`);
+    }
+  }
+  lines.push('');
+
+  lines.push('## Errors');
+  lines.push('');
+  if (d.errors.length === 0) {
+    lines.push('_No errors encountered_');
+  } else {
+    lines.push('| Time | Category | Worker | Message |');
+    lines.push('|------|----------|--------|---------|');
+    for (const err of d.errors) {
+      const time = new Date(err.timestamp).toLocaleTimeString();
+      const msg = err.message.slice(0, 50).replace(/\n/g, ' ');
+      lines.push(`| ${time} | ${err.category} | ${err.workerId.slice(0, 8)} | ${msg} |`);
+    }
+  }
+  lines.push('');
+
+  lines.push('## Worker Summary');
+  lines.push('');
+  lines.push('| Worker ID | Beads | Files | Errors | Active Time |');
+  lines.push('|-----------|-------|-------|--------|-------------|');
+  for (const worker of d.workers) {
+    lines.push(`| ${worker.workerId.slice(0, 8)} | ${worker.beadsCompleted} | ${worker.filesModified} | ${worker.errorsEncountered} | ${formatDuration(worker.activeTimeMs)} |`);
+  }
+  lines.push('');
+
+  lines.push('---');
+  lines.push(`*Generated by FABRIC at ${new Date().toLocaleString()}*`);
+
+  return lines.join('\n');
+}
+
+function formatAsText(d: SessionDigestData): string {
+  const lines: string[] = [];
+
+  lines.push('SESSION DIGEST');
+  lines.push('='.repeat(50));
+  lines.push('');
+  lines.push(`Session ID: ${d.sessionId}`);
+  lines.push(`Start Time: ${new Date(d.startTime).toLocaleString()}`);
+  lines.push(`End Time: ${new Date(d.endTime).toLocaleString()}`);
+  lines.push(`Duration: ${formatDuration(d.durationMs)}`);
+  lines.push('');
+
+  lines.push('STATISTICS');
+  lines.push('-'.repeat(30));
+  lines.push(`Total Events: ${d.stats.totalEvents}`);
+  lines.push(`Total Workers: ${d.stats.totalWorkers}`);
+  lines.push(`Total Beads: ${d.stats.totalBeads}`);
+  lines.push(`Total Files: ${d.stats.totalFiles}`);
+  lines.push(`Total Errors: ${d.stats.totalErrors}`);
+  lines.push(`Avg Events/Worker: ${d.stats.avgEventsPerWorker.toFixed(1)}`);
+  lines.push(`Avg Beads/Worker: ${d.stats.avgBeadsPerWorker.toFixed(1)}`);
+  lines.push('');
+
+  if (d.cost.totalTokens > 0) {
+    lines.push('COST BREAKDOWN');
+    lines.push('-'.repeat(30));
+    lines.push(`Input Tokens: ${d.cost.inputTokens.toLocaleString()}`);
+    lines.push(`Output Tokens: ${d.cost.outputTokens.toLocaleString()}`);
+    lines.push(`Total Tokens: ${d.cost.totalTokens.toLocaleString()}`);
+    lines.push(`Estimated Cost: $${d.cost.estimatedCostUsd.toFixed(4)}`);
+    lines.push('');
+  }
+
+  lines.push('COMPLETED BEADS');
+  lines.push('-'.repeat(30));
+  for (const bead of d.beadsCompleted) {
+    const time = new Date(bead.completedAt).toLocaleString();
+    const duration = bead.durationMs ? ` (${formatDuration(bead.durationMs)})` : '';
+    lines.push(`${bead.beadId} by ${bead.workerId.slice(0, 8)} at ${time}${duration}`);
+  }
+  if (d.beadsCompleted.length === 0) lines.push('No beads completed');
+  lines.push('');
+
+  lines.push('FILES MODIFIED');
+  lines.push('-'.repeat(30));
+  for (const file of d.filesModified) {
+    lines.push(`${file.path} (${file.modifications} mods by ${file.workers.length} workers)`);
+  }
+  if (d.filesModified.length === 0) lines.push('No files modified');
+  lines.push('');
+
+  lines.push('ERRORS');
+  lines.push('-'.repeat(30));
+  for (const err of d.errors) {
+    const time = new Date(err.timestamp).toLocaleTimeString();
+    lines.push(`[${err.category.toUpperCase()}] ${time} ${err.workerId.slice(0, 8)}: ${err.message.slice(0, 100)}`);
+  }
+  if (d.errors.length === 0) lines.push('No errors encountered');
+  lines.push('');
+
+  lines.push('WORKER SUMMARY');
+  lines.push('-'.repeat(30));
+  for (const worker of d.workers) {
+    lines.push(`${worker.workerId}`);
+    lines.push(`  Beads: ${worker.beadsCompleted}  Files: ${worker.filesModified}  Errors: ${worker.errorsEncountered}  Events: ${worker.totalEvents}`);
+    lines.push(`  Active: ${formatDuration(worker.activeTimeMs)}`);
+  }
+  if (d.workers.length === 0) lines.push('No workers');
+  lines.push('');
+
+  lines.push('---');
+  lines.push(`Generated by FABRIC at ${new Date().toLocaleString()}`);
+
+  return lines.join('\n');
+}
+
+function downloadFile(content: string, filename: string, mimeType: string) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// ── Tab content renderers ────────────────────────────────────────────────────
+
+const SummaryTab: React.FC<{ d: SessionDigestData }> = ({ d }) => (
+  <div className="digest-tab-content">
+    <div className="digest-section">
+      <h4>Session Info</h4>
+      <table className="digest-table">
+        <tbody>
+          <tr><td>Session ID</td><td className="digest-value">{d.sessionId}</td></tr>
+          <tr><td>Start Time</td><td className="digest-value">{new Date(d.startTime).toLocaleString()}</td></tr>
+          <tr><td>End Time</td><td className="digest-value">{new Date(d.endTime).toLocaleString()}</td></tr>
+          <tr><td>Duration</td><td className="digest-value">{formatDuration(d.durationMs)}</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div className="digest-section">
+      <h4>Statistics</h4>
+      <table className="digest-table">
+        <tbody>
+          <tr><td>Total Events</td><td className="digest-value">{d.stats.totalEvents.toLocaleString()}</td></tr>
+          <tr><td>Total Workers</td><td className="digest-value">{d.stats.totalWorkers}</td></tr>
+          <tr><td>Total Beads</td><td className="digest-value">{d.stats.totalBeads}</td></tr>
+          <tr><td>Total Files</td><td className="digest-value">{d.stats.totalFiles}</td></tr>
+          <tr><td>Total Errors</td><td className="digest-value digest-error">{d.stats.totalErrors}</td></tr>
+          <tr><td>Avg Events/Worker</td><td className="digest-value">{d.stats.avgEventsPerWorker.toFixed(1)}</td></tr>
+          <tr><td>Avg Beads/Worker</td><td className="digest-value">{d.stats.avgBeadsPerWorker.toFixed(1)}</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    {d.cost.totalTokens > 0 && (
+      <div className="digest-section">
+        <h4>Cost Breakdown</h4>
+        <table className="digest-table">
+          <tbody>
+            <tr><td>Input Tokens</td><td className="digest-value">{d.cost.inputTokens.toLocaleString()}</td></tr>
+            <tr><td>Output Tokens</td><td className="digest-value">{d.cost.outputTokens.toLocaleString()}</td></tr>
+            <tr><td>Total Tokens</td><td className="digest-value">{d.cost.totalTokens.toLocaleString()}</td></tr>
+            <tr><td>Estimated Cost</td><td className="digest-value digest-cost">${d.cost.estimatedCostUsd.toFixed(4)}</td></tr>
+          </tbody>
+        </table>
+      </div>
+    )}
+
+    <div className="digest-section">
+      <h4>Completed Work</h4>
+      <div className="digest-summary-row">
+        <span className="digest-badge digest-badge-green">{d.beadsCompleted.length} beads</span>
+        <span className="digest-badge digest-badge-cyan">{d.filesModified.length} files</span>
+        <span className="digest-badge digest-badge-default">{d.workers.length} workers</span>
+        {d.errors.length > 0 && <span className="digest-badge digest-badge-red">{d.errors.length} errors</span>}
+      </div>
+    </div>
+  </div>
+);
+
+const BeadsTab: React.FC<{ beads: DigestBeadCompletion[] }> = ({ beads }) => {
+  if (beads.length === 0) {
+    return <div className="digest-empty">No beads completed in this session</div>;
+  }
+  const sorted = [...beads].sort((a, b) => b.completedAt - a.completedAt);
+  return (
+    <div className="digest-tab-content">
+      <table className="digest-data-table">
+        <thead>
+          <tr>
+            <th>Bead ID</th>
+            <th>Worker</th>
+            <th>Completed At</th>
+            <th>Duration</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((bead, i) => (
+            <tr key={i}>
+              <td className="digest-mono digest-purple">{bead.beadId}</td>
+              <td className="digest-mono digest-cyan">{bead.workerId.slice(0, 8)}</td>
+              <td>{new Date(bead.completedAt).toLocaleTimeString()}</td>
+              <td>{bead.durationMs ? formatDuration(bead.durationMs) : '-'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+const FilesTab: React.FC<{ files: DigestFileModification[] }> = ({ files }) => {
+  if (files.length === 0) {
+    return <div className="digest-empty">No files modified in this session</div>;
+  }
+  const sorted = [...files].sort((a, b) => b.modifications - a.modifications);
+  return (
+    <div className="digest-tab-content">
+      <table className="digest-data-table">
+        <thead>
+          <tr>
+            <th>Path</th>
+            <th>Mods</th>
+            <th>Workers</th>
+            <th>Tools</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((file, i) => {
+            const heat = file.modifications >= 10 ? 'digest-red'
+              : file.modifications >= 5 ? 'digest-yellow'
+              : file.modifications >= 3 ? 'digest-cyan'
+              : 'digest-green';
+            return (
+              <tr key={i}>
+                <td className="digest-mono digest-path">{file.path}</td>
+                <td className={`digest-count ${heat}`}>{file.modifications}</td>
+                <td>{file.workers.length}</td>
+                <td className="digest-muted">{file.tools.join(', ')}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+const ErrorsTab: React.FC<{ errors: DigestErrorOccurrence[] }> = ({ errors }) => {
+  if (errors.length === 0) {
+    return <div className="digest-empty digest-success">No errors encountered in this session</div>;
+  }
+  const sorted = [...errors].sort((a, b) => b.timestamp - a.timestamp);
+  return (
+    <div className="digest-tab-content">
+      {sorted.map((err, i) => (
+        <div key={i} className="digest-error-card">
+          <div className="digest-error-header">
+            <span className="digest-error-category">[{err.category.toUpperCase()}]</span>
+            <span className="digest-muted">{new Date(err.timestamp).toLocaleTimeString()}</span>
+            <span className="digest-cyan">{err.workerId.slice(0, 8)}</span>
+          </div>
+          <div className="digest-error-message">
+            {err.message.slice(0, 200)}{err.message.length > 200 ? '...' : ''}
+          </div>
+          {err.fingerprint && (
+            <div className="digest-fingerprint">fp: {err.fingerprint}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const WorkersTab: React.FC<{ workers: DigestWorkerSummary[] }> = ({ workers }) => {
+  if (workers.length === 0) {
+    return <div className="digest-empty">No workers in this session</div>;
+  }
+  const sorted = [...workers].sort((a, b) => b.beadsCompleted - a.beadsCompleted);
+  return (
+    <div className="digest-tab-content">
+      {sorted.map((worker, i) => (
+        <div key={i} className="digest-worker-card">
+          <div className="digest-worker-id">{worker.workerId}</div>
+          <div className="digest-worker-stats">
+            <span><strong>Beads:</strong> <span className="digest-green">{worker.beadsCompleted}</span></span>
+            <span><strong>Files:</strong> {worker.filesModified}</span>
+            <span><strong>Errors:</strong> <span className="digest-error">{worker.errorsEncountered}</span></span>
+            <span><strong>Events:</strong> {worker.totalEvents}</span>
+            <span><strong>Active:</strong> {formatDuration(worker.activeTimeMs)}</span>
+          </div>
+          <div className="digest-worker-time">
+            <span className="digest-muted">
+              {new Date(worker.firstActivity).toLocaleTimeString()} – {new Date(worker.lastActivity).toLocaleTimeString()}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ── Main Component ────────────────────────────────────────────────────────────
+
+const TABS: Array<{ key: DigestTab; label: string }> = [
+  { key: 'summary', label: 'Summary' },
+  { key: 'beads', label: 'Beads' },
+  { key: 'files', label: 'Files' },
+  { key: 'errors', label: 'Errors' },
+  { key: 'workers', label: 'Workers' },
+];
+
+const SessionDigestPanel: React.FC<SessionDigestPanelProps> = ({ visible, onClose }) => {
+  const [digest, setDigest] = useState<SessionDigestData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<DigestTab>('summary');
+  const [exportStatus, setExportStatus] = useState<string | null>(null);
+
+  const generateDigest = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/digest');
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data: SessionDigestData = await res.json();
+      setDigest(data);
+      setActiveTab('summary');
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleExport = useCallback((format: 'json' | 'markdown' | 'text') => {
+    if (!digest) return;
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const base = `session-digest-${timestamp}`;
+
+    let content: string;
+    let filename: string;
+    let mime: string;
+
+    switch (format) {
+      case 'json':
+        content = JSON.stringify(digest, null, 2);
+        filename = `${base}.json`;
+        mime = 'application/json';
+        break;
+      case 'markdown':
+        content = formatAsMarkdown(digest);
+        filename = `${base}.md`;
+        mime = 'text/markdown';
+        break;
+      case 'text':
+        content = formatAsText(digest);
+        filename = `${base}.txt`;
+        mime = 'text/plain';
+        break;
+    }
+
+    downloadFile(content, filename, mime);
+    setExportStatus(`Exported ${filename}`);
+    setTimeout(() => setExportStatus(null), 3000);
+  }, [digest]);
+
+  if (!visible) return null;
+
+  return (
+    <div className="digest-panel">
+      <div className="digest-header">
+        <h3>Session Digest</h3>
+        <div className="digest-header-actions">
+          <button
+            className="digest-generate-btn"
+            onClick={generateDigest}
+            disabled={loading}
+          >
+            {loading ? 'Generating...' : 'Generate Digest'}
+          </button>
+          <button className="close-button" onClick={onClose}>×</button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="digest-fetch-error">Failed to generate digest: {error}</div>
+      )}
+
+      {!digest && !loading && !error && (
+        <div className="digest-placeholder">
+          <p>Click <strong>Generate Digest</strong> to summarize the current session.</p>
+        </div>
+      )}
+
+      {digest && (
+        <>
+          <div className="digest-meta">
+            <span><strong>Session:</strong> {digest.sessionId.slice(0, 20)}…</span>
+            <span><strong>Duration:</strong> {formatDuration(digest.durationMs)}</span>
+            <span><strong>Events:</strong> {digest.stats.totalEvents.toLocaleString()}</span>
+            <span><strong>Workers:</strong> {digest.stats.totalWorkers}</span>
+          </div>
+
+          <div className="digest-tabs">
+            {TABS.map(tab => (
+              <button
+                key={tab.key}
+                className={`digest-tab ${activeTab === tab.key ? 'active' : ''}`}
+                onClick={() => setActiveTab(tab.key)}
+              >
+                {tab.label}
+                {tab.key === 'errors' && digest.errors.length > 0 && (
+                  <span className="digest-tab-badge">{digest.errors.length}</span>
+                )}
+                {tab.key === 'beads' && digest.beadsCompleted.length > 0 && (
+                  <span className="digest-tab-badge digest-tab-badge-green">{digest.beadsCompleted.length}</span>
+                )}
+              </button>
+            ))}
+          </div>
+
+          <div className="digest-content">
+            {activeTab === 'summary' && <SummaryTab d={digest} />}
+            {activeTab === 'beads' && <BeadsTab beads={digest.beadsCompleted} />}
+            {activeTab === 'files' && <FilesTab files={digest.filesModified} />}
+            {activeTab === 'errors' && <ErrorsTab errors={digest.errors} />}
+            {activeTab === 'workers' && <WorkersTab workers={digest.workers} />}
+          </div>
+
+          <div className="digest-footer">
+            <div className="digest-export-buttons">
+              <span className="digest-export-label">Export:</span>
+              <button className="digest-export-btn" onClick={() => handleExport('json')}>JSON</button>
+              <button className="digest-export-btn" onClick={() => handleExport('markdown')}>Markdown</button>
+              <button className="digest-export-btn" onClick={() => handleExport('text')}>Text</button>
+            </div>
+            {exportStatus && <span className="digest-export-status">{exportStatus}</span>}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SessionDigestPanel;
diff --git a/src/web/frontend/src/index.css b/src/web/frontend/src/index.css
index fee05e2..db73f0f 100644
--- a/src/web/frontend/src/index.css
+++ b/src/web/frontend/src/index.css
@@ -1131,6 +1131,12 @@ body {
   border-radius: 2px;
 }
 
+.conversation-turn-activity-highlight {
+  background: rgba(33, 150, 243, 0.12);
+  outline: 2px solid rgba(33, 150, 243, 0.4);
+  transition: background 0.3s, outline-color 0.3s;
+}
+
 /* ============================================
    Session Replay Component Styles
    ============================================ */
@@ -6918,3 +6924,371 @@ body {
   font-weight: 600;
 }
 
+/* ── Session Digest ──────────────────────────────────────────────────────── */
+
+.digest-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.6rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+
+.digest-toggle:hover,
+.digest-toggle.active {
+  border-color: var(--info);
+  color: var(--info);
+}
+
+.digest-toggle-icon { font-size: 0.9rem; }
+.digest-toggle-label { font-size: 0.78rem; }
+
+.digest-panel {
+  grid-column: 1 / -1;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 60vh;
+  animation: fadeIn 0.15s ease-out;
+}
+
+.digest-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.digest-header h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.digest-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.digest-generate-btn {
+  padding: 0.3rem 0.75rem;
+  background: var(--info);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.digest-generate-btn:hover:not(:disabled) { opacity: 0.85; }
+.digest-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.digest-fetch-error {
+  padding: 0.75rem 1rem;
+  color: var(--error);
+  font-size: 0.85rem;
+  background: rgba(var(--error-rgb, 239,68,68), 0.08);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.digest-placeholder {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.digest-meta {
+  display: flex;
+  gap: 1.25rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.digest-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.digest-tab {
+  padding: 0.5rem 1rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.digest-tab:hover { color: var(--text-primary); }
+.digest-tab.active {
+  color: var(--info);
+  border-bottom-color: var(--info);
+  font-weight: 600;
+}
+
+.digest-tab-badge {
+  background: var(--error);
+  color: #fff;
+  font-size: 0.65rem;
+  padding: 0.1rem 0.35rem;
+  border-radius: 8px;
+  font-weight: 700;
+}
+
+.digest-tab-badge-green {
+  background: var(--success);
+}
+
+.digest-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.digest-tab-content {
+  padding: 1rem;
+}
+
+.digest-section {
+  margin-bottom: 1.25rem;
+}
+
+.digest-section h4 {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 0.5rem 0;
+}
+
+.digest-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.digest-table td {
+  padding: 0.25rem 0.5rem;
+  color: var(--text-secondary);
+}
+
+.digest-table td:first-child {
+  width: 45%;
+  color: var(--text-muted, var(--text-secondary));
+  font-weight: 500;
+}
+
+.digest-value { color: var(--text-primary) !important; }
+.digest-error { color: var(--error) !important; }
+.digest-cost { color: var(--success) !important; }
+.digest-green { color: var(--success) !important; }
+.digest-cyan { color: var(--info) !important; }
+.digest-yellow { color: var(--warning) !important; }
+.digest-red { color: var(--error) !important; }
+.digest-purple { color: #a78bfa !important; }
+.digest-muted { color: var(--text-secondary) !important; }
+.digest-mono { font-family: monospace; font-size: 0.8rem; }
+.digest-success { color: var(--success) !important; }
+
+.digest-summary-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.digest-badge {
+  padding: 0.2rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+
+.digest-badge-green { border-color: var(--success); color: var(--success); }
+.digest-badge-cyan { border-color: var(--info); color: var(--info); }
+.digest-badge-red { border-color: var(--error); color: var(--error); }
+.digest-badge-default { border-color: var(--border-color); }
+
+.digest-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.82rem;
+}
+
+.digest-data-table th {
+  text-align: left;
+  padding: 0.4rem 0.6rem;
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.digest-data-table td {
+  padding: 0.35rem 0.6rem;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-color);
+  vertical-align: top;
+}
+
+.digest-data-table tr:last-child td { border-bottom: none; }
+.digest-data-table tr:hover td { background: var(--hover-bg); }
+
+.digest-path {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.digest-count { font-weight: 700; }
+
+.digest-error-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-left: 3px solid var(--error);
+  border-radius: 4px;
+  padding: 0.6rem 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.digest-error-header {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.4rem;
+  font-size: 0.8rem;
+}
+
+.digest-error-category {
+  color: var(--error);
+  font-weight: 700;
+  font-size: 0.75rem;
+}
+
+.digest-error-message {
+  font-size: 0.83rem;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.digest-fingerprint {
+  font-size: 0.72rem;
+  color: var(--text-secondary);
+  margin-top: 0.25rem;
+  font-family: monospace;
+}
+
+.digest-empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.digest-worker-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 0.6rem 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.digest-worker-id {
+  font-family: monospace;
+  font-size: 0.82rem;
+  color: var(--info);
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.digest-worker-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+
+.digest-worker-time {
+  font-size: 0.75rem;
+}
+
+.digest-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.digest-export-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.digest-export-label {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  margin-right: 0.25rem;
+}
+
+.digest-export-btn {
+  padding: 0.25rem 0.6rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.digest-export-btn:hover {
+  border-color: var(--info);
+  color: var(--info);
+}
+
+.digest-export-status {
+  font-size: 0.78rem;
+  color: var(--success);
+}
+
diff --git a/src/web/frontend/src/types.ts b/src/web/frontend/src/types.ts
index 918cb6b..9454cff 100644
--- a/src/web/frontend/src/types.ts
+++ b/src/web/frontend/src/types.ts
@@ -515,6 +515,71 @@ export interface SimilarError {
 // Conversation Transcript Types
 // ============================================
 
+// ============================================
+// Session Digest Types
+// ============================================
+
+export interface DigestBeadCompletion {
+  beadId: string;
+  workerId: string;
+  completedAt: number;
+  durationMs?: number;
+}
+
+export interface DigestFileModification {
+  path: string;
+  modifications: number;
+  workers: string[];
+  tools: string[];
+}
+
+export interface DigestErrorOccurrence {
+  message: string;
+  category: ErrorCategory;
+  workerId: string;
+  timestamp: number;
+  fingerprint?: string;
+}
+
+export interface DigestWorkerSummary {
+  workerId: string;
+  beadsCompleted: number;
+  filesModified: number;
+  errorsEncountered: number;
+  totalEvents: number;
+  activeTimeMs: number;
+  firstActivity: number;
+  lastActivity: number;
+}
+
+export interface SessionDigestData {
+  sessionId: string;
+  startTime: number;
+  endTime: number;
+  durationMs: number;
+  beadsCompleted: DigestBeadCompletion[];
+  filesModified: DigestFileModification[];
+  errors: DigestErrorOccurrence[];
+  workers: DigestWorkerSummary[];
+  cost: {
+    totalTokens: number;
+    inputTokens: number;
+    outputTokens: number;
+    estimatedCostUsd: number;
+  };
+  stats: {
+    totalEvents: number;
+    totalWorkers: number;
+    totalBeads: number;
+    totalFiles: number;
+    totalErrors: number;
+    avgEventsPerWorker: number;
+    avgBeadsPerWorker: number;
+  };
+}
+
+export type DigestTab = 'summary' | 'beads' | 'files' | 'errors' | 'workers';
+
 export type ConversationTurnRole = 'system' | 'user' | 'assistant' | 'tool';
 
 export interface ConversationTurn {
diff --git a/src/web/server.ts b/src/web/server.ts
index 9d82801..da0fb18 100644
--- a/src/web/server.ts
+++ b/src/web/server.ts
@@ -13,11 +13,13 @@ import { createSocket } from 'dgram';
 import { WebSocketServer, WebSocket } from 'ws';
 import { LogEvent, EventFilter, CrossReferenceEntityType, CrossReferenceRelationship, DagOptions, BeadStatus } from '../types.js';
 import { InMemoryEventStore } from '../store.js';
+import { SemanticNarrativeGenerator } from '../semanticNarrative.js';
 import { refreshDependencyGraph, getDagStats } from '../tui/dagUtils.js';
 import { normalizeToLogEvent, EventDeduplicator } from '../normalizer.js';
 import { computeFleetAnalytics } from '../analytics.js';
 import { createOtlpHttpRouter } from '../otlpHttpReceiver.js';
 import { ServerMetrics } from '../serverMetrics.js';
+import { SessionDigestGenerator, formatDigestAsMarkdown } from '../sessionDigest.js';
 
 /** Maximum payload size for POST requests (64KB) */
 const MAX_PAYLOAD_SIZE = 64 * 1024;
@@ -731,6 +733,19 @@ export function createWebServer(options: WebServerOptions): WebServer {
       }
     });
 
+    app.get('/api/digest', (req: Request, res: Response) => {
+      try {
+        const generator = new SessionDigestGenerator(store);
+        const opts: Record<string, unknown> = {};
+        if (req.query.startTime) opts.startTime = Number(req.query.startTime);
+        if (req.query.endTime) opts.endTime = Number(req.query.endTime);
+        const digest = generator.generateDigest(opts);
+        res.json(digest);
+      } catch (err) {
+        res.status(500).json({ error: String(err) });
+      }
+    });
+
     // Serve static frontend files
     const staticPath = join(__dirname, 'public');
     app.use(express.static(staticPath));