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 }) => (
+
+
+
Session Info
+
+
+ | Session ID | {d.sessionId} |
+ | Start Time | {new Date(d.startTime).toLocaleString()} |
+ | End Time | {new Date(d.endTime).toLocaleString()} |
+ | Duration | {formatDuration(d.durationMs)} |
+
+
+
+
+
+
Statistics
+
+
+ | Total Events | {d.stats.totalEvents.toLocaleString()} |
+ | Total Workers | {d.stats.totalWorkers} |
+ | Total Beads | {d.stats.totalBeads} |
+ | Total Files | {d.stats.totalFiles} |
+ | Total Errors | {d.stats.totalErrors} |
+ | Avg Events/Worker | {d.stats.avgEventsPerWorker.toFixed(1)} |
+ | Avg Beads/Worker | {d.stats.avgBeadsPerWorker.toFixed(1)} |
+
+
+
+
+ {d.cost.totalTokens > 0 && (
+
+
Cost Breakdown
+
+
+ | Input Tokens | {d.cost.inputTokens.toLocaleString()} |
+ | Output Tokens | {d.cost.outputTokens.toLocaleString()} |
+ | Total Tokens | {d.cost.totalTokens.toLocaleString()} |
+ | Estimated Cost | ${d.cost.estimatedCostUsd.toFixed(4)} |
+
+
+
+ )}
+
+
+
Completed Work
+
+ {d.beadsCompleted.length} beads
+ {d.filesModified.length} files
+ {d.workers.length} workers
+ {d.errors.length > 0 && {d.errors.length} errors}
+
+
+
+);
+
+const BeadsTab: React.FC<{ beads: DigestBeadCompletion[] }> = ({ beads }) => {
+ if (beads.length === 0) {
+ return
No beads completed in this session
;
+ }
+ const sorted = [...beads].sort((a, b) => b.completedAt - a.completedAt);
+ return (
+
+
+
+
+ | Bead ID |
+ Worker |
+ Completed At |
+ Duration |
+
+
+
+ {sorted.map((bead, i) => (
+
+ | {bead.beadId} |
+ {bead.workerId.slice(0, 8)} |
+ {new Date(bead.completedAt).toLocaleTimeString()} |
+ {bead.durationMs ? formatDuration(bead.durationMs) : '-'} |
+
+ ))}
+
+
+
+ );
+};
+
+const FilesTab: React.FC<{ files: DigestFileModification[] }> = ({ files }) => {
+ if (files.length === 0) {
+ return
No files modified in this session
;
+ }
+ const sorted = [...files].sort((a, b) => b.modifications - a.modifications);
+ return (
+
+
+
+
+ | Path |
+ Mods |
+ Workers |
+ Tools |
+
+
+
+ {sorted.map((file, i) => {
+ const heat = file.modifications >= 10 ? 'digest-red'
+ : file.modifications >= 5 ? 'digest-yellow'
+ : file.modifications >= 3 ? 'digest-cyan'
+ : 'digest-green';
+ return (
+
+ | {file.path} |
+ {file.modifications} |
+ {file.workers.length} |
+ {file.tools.join(', ')} |
+
+ );
+ })}
+
+
+
+ );
+};
+
+const ErrorsTab: React.FC<{ errors: DigestErrorOccurrence[] }> = ({ errors }) => {
+ if (errors.length === 0) {
+ return
No errors encountered in this session
;
+ }
+ const sorted = [...errors].sort((a, b) => b.timestamp - a.timestamp);
+ return (
+
+ {sorted.map((err, i) => (
+
+
+ [{err.category.toUpperCase()}]
+ {new Date(err.timestamp).toLocaleTimeString()}
+ {err.workerId.slice(0, 8)}
+
+
+ {err.message.slice(0, 200)}{err.message.length > 200 ? '...' : ''}
+
+ {err.fingerprint && (
+
fp: {err.fingerprint}
+ )}
+
+ ))}
+
+ );
+};
+
+const WorkersTab: React.FC<{ workers: DigestWorkerSummary[] }> = ({ workers }) => {
+ if (workers.length === 0) {
+ return
No workers in this session
;
+ }
+ const sorted = [...workers].sort((a, b) => b.beadsCompleted - a.beadsCompleted);
+ return (
+
+ {sorted.map((worker, i) => (
+
+
{worker.workerId}
+
+ Beads: {worker.beadsCompleted}
+ Files: {worker.filesModified}
+ Errors: {worker.errorsEncountered}
+ Events: {worker.totalEvents}
+ Active: {formatDuration(worker.activeTimeMs)}
+
+
+
+ {new Date(worker.firstActivity).toLocaleTimeString()} – {new Date(worker.lastActivity).toLocaleTimeString()}
+
+
+
+ ))}
+
+ );
+};
+
+// ── 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
= ({ visible, onClose }) => {
+ const [digest, setDigest] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [activeTab, setActiveTab] = useState('summary');
+ const [exportStatus, setExportStatus] = useState(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 (
+
+
+
Session Digest
+
+
+
+
+
+
+ {error && (
+
Failed to generate digest: {error}
+ )}
+
+ {!digest && !loading && !error && (
+
+
Click Generate Digest to summarize the current session.
+
+ )}
+
+ {digest && (
+ <>
+
+ Session: {digest.sessionId.slice(0, 20)}…
+ Duration: {formatDuration(digest.durationMs)}
+ Events: {digest.stats.totalEvents.toLocaleString()}
+ Workers: {digest.stats.totalWorkers}
+
+
+
+ {TABS.map(tab => (
+
+ ))}
+
+
+
+ {activeTab === 'summary' && }
+ {activeTab === 'beads' && }
+ {activeTab === 'files' && }
+ {activeTab === 'errors' && }
+ {activeTab === 'workers' && }
+
+
+
+
+ Export:
+
+
+
+
+ {exportStatus &&
{exportStatus}}
+
+
+ )}
+