import type { AnyEvent } from '../types.js';
export declare function buildTimelineHTML(events: AnyEvent[], sessionId: string): string;
export declare const TIMELINE_STYLES = "\n  .recap-panel-tl-row:hover {\n    background: #2a2a3e !important;\n  }\n  .recap-panel-filter-bar {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 8px;\n    background: #1a2a3e;\n    border: 1px solid #2b6cb0;\n    border-radius: 4px;\n    font-size: 11px;\n    color: #bee3f8;\n    margin-bottom: 10px;\n  }\n  .recap-panel-filter-bar strong {\n    color: #90cdf4;\n  }\n  .recap-panel-filter-clear {\n    background: none;\n    border: none;\n    color: #90cdf4;\n    cursor: pointer;\n    font-size: 11px;\n    font-family: system-ui, sans-serif;\n    padding: 0;\n    margin-left: auto;\n  }\n  .recap-panel-filter-clear:hover { color: #fff; }\n  .recap-panel-tabs {\n    display: flex;\n    gap: 0;\n    border-bottom: 1px solid #2d3748;\n    margin-bottom: 12px;\n    flex-shrink: 0;\n  }\n  .recap-panel-tab {\n    background: none;\n    border: none;\n    border-bottom: 2px solid transparent;\n    color: #718096;\n    cursor: pointer;\n    font-size: 12px;\n    font-family: system-ui, sans-serif;\n    padding: 8px 14px;\n    transition: color 0.15s, border-color 0.15s;\n  }\n  .recap-panel-tab:hover { color: #e2e8f0; }\n  .recap-panel-tab.active {\n    color: #06b6d4;\n    border-bottom-color: #06b6d4;\n  }\n";