feat: Add web-based viewer UI for real-time memory stream (#58)

* Add viewer HTML for claude-mem with live stream and settings interface - Implemented a responsive layout with left and right columns for observations and settings. - Added status indicators for connection state. - Integrated server-sent events (SSE) for real-time updates on observations and summaries. - Created dynamic project filter dropdown based on available observations. - Developed settings section for environment variables and worker stats. - Included functionality to save settings and load current stats from the server. - Enhanced UI with custom styles for better user experience. * Remove draft implementation plan for v5.1 web UI * feat: Implement viewer UI with sidebar, feed, and settings management - Add main viewer template (HTML) with styling for dark mode. - Create App component to manage state and render Header, Feed, and Sidebar. - Implement Feed component to display observations and summaries with filtering. - Develop Header component for project selection and connection status. - Create ObservationCard and SummaryCard components for displaying individual items. - Implement Sidebar for settings management and displaying worker/database stats. - Add hooks for managing SSE connections, settings, and stats fetching. - Define types for observations, summaries, settings, and stats. * Enhance UI components and improve layout - Updated padding and layout for the feed and card components in viewer.html, viewer-template.html, and viewer.html to improve visual spacing and alignment. - Increased card margins and padding for better readability and aesthetics. - Adjusted font sizes, weights, and line heights for card titles and subtitles to enhance text clarity and hierarchy. - Added a new feed-content class to center the feed items and limit their maximum width. - Modified the Header component to improve the settings icon's SVG structure for better rendering. - Enhanced the Sidebar component by adding a close button with an SVG icon, improving user experience for closing settings. - Updated the Sidebar component's props to include an onClose function for handling sidebar closure. * feat: Add user prompts feature with UI integration - Implemented a new method in SessionStore to retrieve recent user prompts. - Updated WorkerService to fetch and broadcast user prompts to clients. - Enhanced the Feed component to display user prompts alongside observations and summaries. - Created a new PromptCard component for rendering individual user prompts. - Modified useSSE hook to handle new prompt events and processing status. - Updated viewer templates and styles to accommodate the new prompts feature. * feat: Add project filtering and pagination for observations - Implemented `getAllProjects` method in `SessionStore` to retrieve unique projects from the database. - Added `/api/observations` endpoint in `WorkerService` for paginated observations fetching. - Enhanced `App` component to manage paginated observations and integrate with the new API. - Updated `Feed` component to support infinite scrolling and loading more observations. - Modified `Header` to display processing status. - Refactored `PromptCard` to remove unnecessary processing indicator. - Introduced `usePagination` hook to handle pagination logic for observations. - Updated `useSSE` hook to include projects in the state. - Adjusted types to accommodate new project data. * Refactor viewer build process and remove deprecated HTML template - Updated build-viewer.js to copy HTML template to build output with improved logging. - Removed src/ui/viewer.html as it is no longer needed. - Enhanced App component to merge observations while removing duplicates using useMemo. - Improved Feed component to utilize a ref for onLoadMore callback and adjusted infinite scroll logic. - Updated Sidebar component to use default settings from constants and removed redundant formatting functions. - Refactored usePagination hook to streamline loading logic and prevent concurrent requests. - Updated useSSE hook to use centralized API endpoints and improved reconnection logic. - Refactored useSettings and useStats hooks to utilize constants for API endpoints and timing. - Introduced ErrorBoundary component for better error handling in the viewer. - Centralized API endpoint paths, default settings, timing constants, and UI-related constants into dedicated files. - Added utility functions for formatting uptime and bytes for consistent display across components. * feat: Enhance session management and pagination for user prompts, summaries, and observations - Added project field to user prompts in the database and API responses. - Implemented new API endpoints for fetching summaries and prompts with pagination. - Updated WorkerService to handle new endpoints and filter results by project. - Modified App component to manage paginated data for prompts and summaries. - Refactored Feed component to remove unnecessary filtering and handle combined data. - Improved usePagination hook to support multiple data types and project filtering. - Adjusted useSSE hook to only load projects initially, with data fetched via pagination. - Updated types to include project information for user prompts. * feat: add SummarySkeleton component and data utility for merging items - Introduced SummarySkeleton component for displaying loading state in the UI. - Implemented mergeAndDeduplicateByProject utility function to merge real-time and paginated data while removing duplicates based on project filtering. * Enhance UI and functionality of the viewer component - Updated sidebar transition effects to use translate3d for improved performance. - Added a sidebar header with title and connection status indicators. - Modified the PromptCard to display project name instead of prompt number. - Introduced a GitHub and X (Twitter) link in the header for easy access. - Improved styling for setting descriptions and card hover effects. - Enhanced Sidebar component to include connection status and updated layout. * fix: reduce timeout for worker health checks and ensure proper responsiveness
2025-11-05 22:54:38 -05:00
parent ff28db9d76
commit 79ff1849f0
49 changed files with 3622 additions and 309 deletions
@@ -0,0 +1,63 @@
+import React, { Component, ReactNode, ErrorInfo } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('[ErrorBoundary] Caught error:', error, errorInfo);
+    this.setState({
+      error,
+      errorInfo
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '20px', color: '#ff6b6b', backgroundColor: '#1a1a1a', minHeight: '100vh' }}>
+          <h1 style={{ fontSize: '24px', marginBottom: '10px' }}>Something went wrong</h1>
+          <p style={{ marginBottom: '10px', color: '#8b949e' }}>
+            The application encountered an error. Please refresh the page to try again.
+          </p>
+          {this.state.error && (
+            <details style={{ marginTop: '20px', color: '#8b949e' }}>
+              <summary style={{ cursor: 'pointer', marginBottom: '10px' }}>Error details</summary>
+              <pre style={{
+                backgroundColor: '#0d1117',
+                padding: '10px',
+                borderRadius: '6px',
+                overflow: 'auto'
+              }}>
+                {this.state.error.toString()}
+                {this.state.errorInfo && '\n\n' + this.state.errorInfo.componentStack}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
@@ -0,0 +1,131 @@
+import React, { useMemo, useRef, useEffect } from 'react';
+import { Observation, Summary, UserPrompt, FeedItem } from '../types';
+import { ObservationCard } from './ObservationCard';
+import { SummaryCard } from './SummaryCard';
+import { SummarySkeleton } from './SummarySkeleton';
+import { PromptCard } from './PromptCard';
+import { UI } from '../constants/ui';
+
+interface FeedProps {
+  observations: Observation[];
+  summaries: Summary[];
+  prompts: UserPrompt[];
+  processingSessions: Set<string>;
+  onLoadMore: () => void;
+  isLoading: boolean;
+  hasMore: boolean;
+}
+
+export function Feed({ observations, summaries, prompts, processingSessions, onLoadMore, isLoading, hasMore }: FeedProps) {
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+  const onLoadMoreRef = useRef(onLoadMore);
+
+  // Keep the callback ref up to date
+  useEffect(() => {
+    onLoadMoreRef.current = onLoadMore;
+  }, [onLoadMore]);
+
+  // Set up intersection observer for infinite scroll
+  useEffect(() => {
+    const element = loadMoreRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const first = entries[0];
+        if (first.isIntersecting && hasMore && !isLoading) {
+          onLoadMoreRef.current?.();
+        }
+      },
+      { threshold: UI.LOAD_MORE_THRESHOLD }
+    );
+
+    observer.observe(element);
+
+    return () => {
+      if (element) {
+        observer.unobserve(element);
+      }
+      observer.disconnect();
+    };
+  }, [hasMore, isLoading]);
+
+  const items = useMemo<FeedItem[]>(() => {
+    // Create a set of session IDs that already have summaries
+    const sessionsWithSummaries = new Set(summaries.map(s => s.session_id));
+
+    // Find the most recent prompt for each processing session
+    const sessionPrompts = new Map<string, UserPrompt>();
+    prompts.forEach(p => {
+      const existing = sessionPrompts.get(p.claude_session_id);
+      if (!existing || p.created_at_epoch > existing.created_at_epoch) {
+        sessionPrompts.set(p.claude_session_id, p);
+      }
+    });
+
+    // Create skeleton items for sessions being processed that don't have summaries yet
+    const skeletons: FeedItem[] = [];
+    processingSessions.forEach(sessionId => {
+      if (!sessionsWithSummaries.has(sessionId)) {
+        const prompt = sessionPrompts.get(sessionId);
+        skeletons.push({
+          itemType: 'skeleton',
+          id: sessionId, // Don't add prefix - key construction adds itemType already
+          session_id: sessionId,
+          project: prompt?.project,
+          // Always use current time so skeletons appear at top of feed
+          created_at_epoch: Date.now()
+        });
+      }
+    });
+
+    // Data is already filtered by App.tsx - no need to filter again
+    const combined = [
+      ...observations.map(o => ({ ...o, itemType: 'observation' as const })),
+      ...summaries.map(s => ({ ...s, itemType: 'summary' as const })),
+      ...prompts.map(p => ({ ...p, itemType: 'prompt' as const })),
+      ...skeletons
+    ];
+
+    return combined
+      .sort((a, b) => b.created_at_epoch - a.created_at_epoch);
+  }, [observations, summaries, prompts, processingSessions]);
+
+  return (
+    <div className="feed">
+      <div className="feed-content">
+        {items.map(item => {
+          const key = `${item.itemType}-${item.id}`;
+          if (item.itemType === 'observation') {
+            return <ObservationCard key={key} observation={item} />;
+          } else if (item.itemType === 'summary') {
+            return <SummaryCard key={key} summary={item} />;
+          } else if (item.itemType === 'skeleton') {
+            return <SummarySkeleton key={key} sessionId={item.session_id} project={item.project} />;
+          } else {
+            return <PromptCard key={key} prompt={item} />;
+          }
+        })}
+        {items.length === 0 && !isLoading && (
+          <div style={{ textAlign: 'center', padding: '40px', color: '#8b949e' }}>
+            No items to display
+          </div>
+        )}
+        {isLoading && (
+          <div style={{ textAlign: 'center', padding: '20px', color: '#8b949e' }}>
+            <div className="spinner" style={{ display: 'inline-block', marginRight: '10px' }}></div>
+            Loading more...
+          </div>
+        )}
+        {hasMore && !isLoading && items.length > 0 && (
+          <div ref={loadMoreRef} style={{ height: '20px', margin: '10px 0' }} />
+        )}
+        {!hasMore && items.length > 0 && (
+          <div style={{ textAlign: 'center', padding: '20px', color: '#8b949e', fontSize: '14px' }}>
+            No more items to load
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,89 @@
+import React from 'react';
+
+interface HeaderProps {
+  isConnected: boolean;
+  projects: string[];
+  currentFilter: string;
+  onFilterChange: (filter: string) => void;
+  onSettingsToggle: () => void;
+  sidebarOpen: boolean;
+  isProcessing: boolean;
+}
+
+export function Header({
+  isConnected,
+  projects,
+  currentFilter,
+  onFilterChange,
+  onSettingsToggle,
+  sidebarOpen,
+  isProcessing
+}: HeaderProps) {
+  return (
+    <div className="header">
+      <h1>
+        <img src="claude-mem-logomark.webp" alt="" className={`logomark ${isProcessing ? 'spinning' : ''}`} />
+        <span className="logo-text">claude-mem</span>
+      </h1>
+      <div className="status">
+        <a
+          href="https://github.com/thedotmack/claude-mem/"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="GitHub"
+          style={{
+            display: 'block',
+            padding: '8px 4px 8px 8px',
+            color: '#a0a0a0',
+            transition: 'color 0.2s',
+            lineHeight: 0
+          }}
+          onMouseEnter={(e) => e.currentTarget.style.color = '#ffffff'}
+          onMouseLeave={(e) => e.currentTarget.style.color = '#a0a0a0'}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+        </a>
+        <a
+          href="https://x.com/Claude_Memory"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="X (Twitter)"
+          style={{
+            display: 'block',
+            padding: '8px 8px 8px 4px',
+            color: '#a0a0a0',
+            transition: 'color 0.2s',
+            lineHeight: 0
+          }}
+          onMouseEnter={(e) => e.currentTarget.style.color = '#ffffff'}
+          onMouseLeave={(e) => e.currentTarget.style.color = '#a0a0a0'}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          </svg>
+        </a>
+        <select
+          value={currentFilter}
+          onChange={e => onFilterChange(e.target.value)}
+        >
+          <option value="">All Projects</option>
+          {projects.map(project => (
+            <option key={project} value={project}>{project}</option>
+          ))}
+        </select>
+        <button
+          className={`settings-btn ${sidebarOpen ? 'active' : ''}`}
+          onClick={onSettingsToggle}
+          title="Settings"
+        >
+          <svg className="settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
+            <circle cx="12" cy="12" r="3"></circle>
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Observation } from '../types';
+import { formatDate } from '../utils/formatters';
+
+interface ObservationCardProps {
+  observation: Observation;
+}
+
+export function ObservationCard({ observation }: ObservationCardProps) {
+  const date = formatDate(observation.created_at_epoch);
+
+  return (
+    <div className="card">
+      <div className="card-header">
+        <span className="card-type">{observation.type}</span>
+        <span>{observation.project}</span>
+      </div>
+      <div className="card-title">{observation.title || 'Untitled'}</div>
+      {observation.subtitle && (
+        <div className="card-subtitle">{observation.subtitle}</div>
+      )}
+      <div className="card-meta">#{observation.id} • {date}</div>
+    </div>
+  );
+}
@@ -0,0 +1,24 @@
+import React from 'react';
+import { UserPrompt } from '../types';
+import { formatDate } from '../utils/formatters';
+
+interface PromptCardProps {
+  prompt: UserPrompt;
+}
+
+export function PromptCard({ prompt }: PromptCardProps) {
+  return (
+    <div className="card prompt-card">
+      <div className="card-header">
+        <span className="card-type">Prompt</span>
+        <span>{prompt.project}</span>
+      </div>
+      <div className="card-content">
+        {prompt.prompt_text}
+      </div>
+      <div className="card-meta">
+        {formatDate(prompt.created_at_epoch)}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import { Settings, Stats } from '../types';
+import { DEFAULT_SETTINGS } from '../constants/settings';
+import { formatUptime, formatBytes } from '../utils/formatters';
+
+interface SidebarProps {
+  isOpen: boolean;
+  settings: Settings;
+  stats: Stats;
+  isSaving: boolean;
+  saveStatus: string;
+  isConnected: boolean;
+  onSave: (settings: Settings) => void;
+  onClose: () => void;
+}
+
+export function Sidebar({ isOpen, settings, stats, isSaving, saveStatus, isConnected, onSave, onClose }: SidebarProps) {
+  const [model, setModel] = useState(settings.CLAUDE_MEM_MODEL || DEFAULT_SETTINGS.CLAUDE_MEM_MODEL);
+  const [contextObs, setContextObs] = useState(settings.CLAUDE_MEM_CONTEXT_OBSERVATIONS || DEFAULT_SETTINGS.CLAUDE_MEM_CONTEXT_OBSERVATIONS);
+  const [workerPort, setWorkerPort] = useState(settings.CLAUDE_MEM_WORKER_PORT || DEFAULT_SETTINGS.CLAUDE_MEM_WORKER_PORT);
+
+  // Update local state when settings change
+  useEffect(() => {
+    setModel(settings.CLAUDE_MEM_MODEL || DEFAULT_SETTINGS.CLAUDE_MEM_MODEL);
+    setContextObs(settings.CLAUDE_MEM_CONTEXT_OBSERVATIONS || DEFAULT_SETTINGS.CLAUDE_MEM_CONTEXT_OBSERVATIONS);
+    setWorkerPort(settings.CLAUDE_MEM_WORKER_PORT || DEFAULT_SETTINGS.CLAUDE_MEM_WORKER_PORT);
+  }, [settings]);
+
+  const handleSave = () => {
+    onSave({
+      CLAUDE_MEM_MODEL: model,
+      CLAUDE_MEM_CONTEXT_OBSERVATIONS: contextObs,
+      CLAUDE_MEM_WORKER_PORT: workerPort
+    });
+  };
+
+  return (
+    <div className={`sidebar ${isOpen ? 'open' : ''}`}>
+      <div className="sidebar-header">
+        <h1>Settings</h1>
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+            <span className={`status-dot ${isConnected ? 'connected' : ''}`} />
+            <span style={{ fontSize: '11px', opacity: 0.5, fontWeight: 300 }}>{isConnected ? 'Connected' : 'Disconnected'}</span>
+          </div>
+          <button onClick={handleSave} disabled={isSaving}>
+            {isSaving ? 'Saving...' : 'Save'}
+          </button>
+          <button
+            onClick={onClose}
+            title="Close settings"
+            style={{
+              background: 'transparent',
+              border: '1px solid #404040',
+              padding: '8px',
+              width: '36px',
+              height: '36px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div className="stats-scroll">
+
+        <div className="settings-section">
+          <h3>Environment Variables</h3>
+          <div className="form-group">
+            <label htmlFor="model">CLAUDE_MEM_MODEL</label>
+            <div className="setting-description">
+              Model used for AI compression of tool observations. Haiku is fast and cheap, Sonnet offers better quality, Opus is most capable but expensive.
+            </div>
+            <select
+              id="model"
+              value={model}
+              onChange={e => setModel(e.target.value)}
+            >
+              <option value="claude-haiku-4-5">claude-haiku-4-5</option>
+              <option value="claude-sonnet-4-5">claude-sonnet-4-5</option>
+              <option value="claude-opus-4">claude-opus-4</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label htmlFor="contextObs">CLAUDE_MEM_CONTEXT_OBSERVATIONS</label>
+            <div className="setting-description">
+              Number of recent observations to inject at session start. Higher values provide more context but increase token usage. Default: 50
+            </div>
+            <input
+              type="number"
+              id="contextObs"
+              min="1"
+              max="200"
+              value={contextObs}
+              onChange={e => setContextObs(e.target.value)}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="workerPort">CLAUDE_MEM_WORKER_PORT</label>
+            <div className="setting-description">
+              Port number for the background worker service. Change only if port 37777 conflicts with another service.
+            </div>
+            <input
+              type="number"
+              id="workerPort"
+              min="1024"
+              max="65535"
+              value={workerPort}
+              onChange={e => setWorkerPort(e.target.value)}
+            />
+          </div>
+          {saveStatus && (
+            <div className="save-status">{saveStatus}</div>
+          )}
+        </div>
+
+        <div className="settings-section">
+          <h3>Worker Stats</h3>
+          <div className="stats-grid">
+            <div className="stat">
+              <div className="stat-label">Version</div>
+              <div className="stat-value">{stats.worker?.version || '-'}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">Uptime</div>
+              <div className="stat-value">{formatUptime(stats.worker?.uptime)}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">Active Sessions</div>
+              <div className="stat-value">{stats.worker?.activeSessions || '0'}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">SSE Clients</div>
+              <div className="stat-value">{stats.worker?.sseClients || '0'}</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="settings-section">
+          <h3>Database Stats</h3>
+          <div className="stats-grid">
+            <div className="stat">
+              <div className="stat-label">DB Size</div>
+              <div className="stat-value">{formatBytes(stats.database?.size)}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">Observations</div>
+              <div className="stat-value">{stats.database?.observations || '0'}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">Sessions</div>
+              <div className="stat-value">{stats.database?.sessions || '0'}</div>
+            </div>
+            <div className="stat">
+              <div className="stat-label">Summaries</div>
+              <div className="stat-value">{stats.database?.summaries || '0'}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Summary } from '../types';
+import { formatDate } from '../utils/formatters';
+
+interface SummaryCardProps {
+  summary: Summary;
+}
+
+export function SummaryCard({ summary }: SummaryCardProps) {
+  const date = formatDate(summary.created_at_epoch);
+
+  return (
+    <div className="card summary-card">
+      <div className="card-header">
+        <span className="card-type">SUMMARY</span>
+        <span>{summary.project}</span>
+      </div>
+      {summary.request && (
+        <div className="card-title">Request: {summary.request}</div>
+      )}
+      {summary.learned && (
+        <div className="card-subtitle">Learned: {summary.learned}</div>
+      )}
+      {summary.completed && (
+        <div className="card-subtitle">Completed: {summary.completed}</div>
+      )}
+      {summary.next_steps && (
+        <div className="card-subtitle">Next: {summary.next_steps}</div>
+      )}
+      <div className="card-meta">#{summary.id} • {date}</div>
+    </div>
+  );
+}
@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface SummarySkeletonProps {
+  sessionId: string;
+  project?: string;
+}
+
+export function SummarySkeleton({ sessionId, project }: SummarySkeletonProps) {
+  return (
+    <div className="card summary-card summary-skeleton">
+      <div className="card-header">
+        <span className="card-type">SUMMARY</span>
+        {project && <span>{project}</span>}
+        <div className="processing-indicator">
+          <div className="spinner"></div>
+          <span>Generating...</span>
+        </div>
+      </div>
+      <div className="skeleton-line skeleton-title"></div>
+      <div className="skeleton-line skeleton-subtitle"></div>
+      <div className="skeleton-line skeleton-subtitle short"></div>
+      <div className="card-meta">Session: {sessionId}</div>
+    </div>
+  );
+}