@medalsocial/meda 0.2.0 → 0.3.0

package/dist/chat/index.d.ts

@@ -0,0 +1,11 @@
+export type { LatencyBadgeProps, LatencyKind } from './latency-badge.js';
+export { LatencyBadge } from './latency-badge.js';
+export type { LatencyBreakdownProps } from './latency-breakdown.js';
+export { LatencyBreakdown } from './latency-breakdown.js';
+export type { ToolCallBlockProps } from './tool-call-block.js';
+export { ToolCallBlock } from './tool-call-block.js';
+export type { TranscriptStreamProps } from './transcript-stream.js';
+export { TranscriptStream } from './transcript-stream.js';
+export type { TurnCardProps } from './turn-card.js';
+export { TurnCard } from './turn-card.js';
+export type { Speaker, ToolCall, Turn, TurnLatency } from './types.js';

package/dist/chat/index.js

@@ -0,0 +1,5 @@
+export { LatencyBadge } from './latency-badge.js';
+export { LatencyBreakdown } from './latency-breakdown.js';
+export { ToolCallBlock } from './tool-call-block.js';
+export { TranscriptStream } from './transcript-stream.js';
+export { TurnCard } from './turn-card.js';

package/dist/chat/latency-badge.d.ts

@@ -0,0 +1,7 @@
+export type LatencyKind = 'stt' | 'claude' | 'tts';
+export interface LatencyBadgeProps {
+    kind: LatencyKind;
+    ms: number;
+    className?: string;
+}
+export declare function LatencyBadge({ kind, ms, className }: LatencyBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/latency-badge.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const KIND = {
+    stt: { label: 'STT', tone: 'text-sky-400' },
+    claude: { label: 'Claude', tone: 'text-primary' },
+    tts: { label: 'TTS', tone: 'text-emerald-500' },
+};
+function fmt(ms) {
+    if (ms >= 1000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.round(ms)}ms`;
+}
+export function LatencyBadge({ kind, ms, className }) {
+    const meta = KIND[kind];
+    return (_jsxs("span", { "data-kind": kind, className: [
+            'inline-flex items-center gap-1.5 text-[11px] tabular-nums',
+            meta.tone,
+            className ?? '',
+        ].join(' '), children: [_jsx("span", { "aria-hidden": "true", className: "size-1 rounded-full bg-current" }), meta.label, " ", fmt(ms)] }));
+}

package/dist/chat/latency-breakdown.d.ts

@@ -0,0 +1,8 @@
+export interface LatencyBreakdownProps {
+    sttMs: number;
+    claudeMs: number;
+    ttsMs: number;
+    showLegend?: boolean;
+    className?: string;
+}
+export declare function LatencyBreakdown({ sttMs, claudeMs, ttsMs, showLegend, className, }: LatencyBreakdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/latency-breakdown.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LatencyBadge } from './latency-badge.js';
+export function LatencyBreakdown({ sttMs, claudeMs, ttsMs, showLegend = true, className, }) {
+    const total = Math.max(1, sttMs + claudeMs + ttsMs);
+    const sttPct = (sttMs / total) * 100;
+    const claudePct = (claudeMs / total) * 100;
+    const ttsPct = (ttsMs / total) * 100;
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex h-1.5 gap-0.5 overflow-hidden rounded-sm bg-muted", children: [_jsx("span", { "data-segment": "stt", className: "block bg-sky-400", style: { width: `${sttPct}%` } }), _jsx("span", { "data-segment": "claude", className: "block bg-primary", style: { width: `${claudePct}%` } }), _jsx("span", { "data-segment": "tts", className: "block bg-emerald-500", style: { width: `${ttsPct}%` } })] }), showLegend && (_jsxs("div", { className: "mt-1.5 flex flex-wrap gap-3 text-[11px] tabular-nums text-muted-foreground", children: [_jsx(LatencyBadge, { kind: "stt", ms: sttMs }), _jsx(LatencyBadge, { kind: "claude", ms: claudeMs }), _jsx(LatencyBadge, { kind: "tts", ms: ttsMs })] }))] }));
+}

package/dist/chat/public.d.ts

@@ -0,0 +1 @@
+export type { Speaker, ToolCall, Turn, TurnLatency } from './types.js';

package/dist/chat/public.js

@@ -0,0 +1 @@
+export {};

package/dist/chat/tool-call-block.d.ts

@@ -0,0 +1,6 @@
+import type { ToolCall } from './types.js';
+export interface ToolCallBlockProps {
+    call: ToolCall;
+    className?: string;
+}
+export declare function ToolCallBlock({ call, className }: ToolCallBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/tool-call-block.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Zap } from 'lucide-react';
+function safeStringify(v) {
+    // Tolerate values JSON.stringify can't handle (BigInt, circular refs, etc.)
+    // so a malformed tool arg never crashes the transcript view.
+    try {
+        const out = JSON.stringify(v);
+        return out === undefined ? String(v) : out;
+    }
+    catch {
+        return String(v);
+    }
+}
+export function ToolCallBlock({ call, className }) {
+    return (_jsxs("div", { className: [
+            'mt-3 rounded-md border border-border border-l-2 border-l-amber-500 bg-card p-3 font-mono text-xs',
+            className ?? '',
+        ].join(' '), children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2 text-[11px]", children: [_jsx(Zap, { className: "size-3 text-amber-500" }), _jsx("strong", { className: "font-semibold text-foreground", children: call.name }), call.latencyMs != null && (_jsxs("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [call.latencyMs, "ms"] }))] }), _jsxs("div", { className: "text-muted-foreground", children: [Object.entries(call.args && typeof call.args === 'object' ? call.args : {}).map(([k, v], i) => (_jsxs("span", { children: [i > 0 && ', ', _jsx("span", { className: "text-primary", children: k }), ": ", '', _jsx("span", { className: "text-emerald-500", children: safeStringify(v) })] }, k))), call.resultSummary && (_jsxs("span", { className: "text-muted-foreground", children: [" \u2192 ", call.resultSummary] }))] })] }));
+}

package/dist/chat/transcript-stream.d.ts

@@ -0,0 +1,10 @@
+import type { Turn } from './types.js';
+export interface TranscriptStreamProps {
+    turns: Turn[];
+    /** When true (default), auto-scroll to bottom on new turn IF user is already near bottom. */
+    autoScroll?: boolean;
+    tz?: string;
+    onTurnPlay?: (turnId: string) => void;
+    className?: string;
+}
+export declare function TranscriptStream({ turns, autoScroll, tz, onTurnPlay, className, }: TranscriptStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/transcript-stream.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { TurnCard } from './turn-card.js';
+const SCROLL_THRESHOLD = 120;
+export function TranscriptStream({ turns, autoScroll = true, tz, onTurnPlay, className, }) {
+    const ref = useRef(null);
+    // Snapshot of "was the user near the bottom?" sampled BEFORE the new turn
+    // renders, so that a tall appended turn doesn't push the bottom off-screen
+    // and falsely look like the user scrolled away.
+    const wasAtBottomRef = useRef(true);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+            wasAtBottomRef.current = distanceFromBottom < SCROLL_THRESHOLD;
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => el.removeEventListener('scroll', onScroll);
+    }, []);
+    // Auto-follow last turn when the user was near the bottom before the new turn appended.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: turns changes trigger scroll check
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !autoScroll)
+            return;
+        if (wasAtBottomRef.current) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }, [turns, autoScroll]);
+    if (turns.length === 0) {
+        return (_jsx("div", { ref: ref, className: [
+                'flex flex-1 items-center justify-center text-sm text-muted-foreground',
+                className ?? '',
+            ].join(' '), children: "No turns yet." }));
+    }
+    const ref0 = turns[0]?.startedAt ?? 0;
+    return (_jsx("div", { ref: ref, className: ['flex-1 overflow-y-auto px-7 pb-6 pt-2', className ?? ''].join(' '), children: turns.map((t) => (_jsx(TurnCard, { turn: t, startedAtRef: ref0, tz: tz, onPlay: onTurnPlay }, t.id))) }));
+}

package/dist/chat/turn-card.d.ts

@@ -0,0 +1,10 @@
+import type { Turn } from './types.js';
+export interface TurnCardProps {
+    turn: Turn;
+    /** Reference instant for the relative offset column (typically the conversation start). */
+    startedAtRef: number;
+    tz?: string;
+    onPlay?: (turnId: string) => void;
+    className?: string;
+}
+export declare function TurnCard({ turn, startedAtRef, tz, onPlay, className }: TurnCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/chat/turn-card.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Play } from 'lucide-react';
+import { formatClock, formatRelativeOffset } from '../lib/format-time.js';
+import { LatencyBadge } from './latency-badge.js';
+import { ToolCallBlock } from './tool-call-block.js';
+const SPEAKER_LABEL = {
+    user: 'You',
+    assistant: 'Assistant',
+    system: 'System',
+};
+export function TurnCard({ turn, startedAtRef, tz, onPlay, className }) {
+    const label = turn.speakerLabel ?? SPEAKER_LABEL[turn.speaker];
+    const offset = turn.startedAt - startedAtRef;
+    const speakerColor = turn.speaker === 'assistant'
+        ? 'text-primary'
+        : turn.speaker === 'system'
+            ? 'text-amber-500'
+            : 'text-foreground';
+    return (_jsxs("div", { className: [
+            'grid grid-cols-[64px_1fr] gap-5 border-b border-border py-4 last:border-b-0',
+            className ?? '',
+        ].join(' '), children: [_jsxs("div", { className: "pt-1 text-[11px] tabular-nums text-muted-foreground", children: [_jsx("strong", { className: "mb-0.5 block text-[12px] font-medium text-muted-foreground", children: formatClock(new Date(turn.startedAt), { tz }) }), formatRelativeOffset(offset)] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [_jsx("span", { className: ['text-[11px] font-semibold uppercase tracking-wider', speakerColor].join(' '), children: label }), turn.modelLabel && (_jsx("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: turn.modelLabel })), turn.spokenSeconds != null && turn.speaker === 'user' && (_jsxs("span", { className: "rounded bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: ["spoken \u00B7 ", turn.spokenSeconds.toFixed(1), "s"] }))] }), _jsxs("p", { className: "text-[15px] leading-relaxed text-foreground", "data-streaming": String(turn.streaming ?? false), children: [turn.text, turn.streaming && (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 animate-pulse text-primary", children: "\u258D" }))] }), turn.toolCalls?.map((c) => (_jsx(ToolCallBlock, { call: c }, c.id))), (turn.audioUrl || turn.latency) && (_jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-4 text-[11px] text-muted-foreground", children: [turn.audioUrl && (_jsx("button", { type: "button", "aria-label": "Play this turn", onClick: () => onPlay?.(turn.id), className: "inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground hover:text-foreground", children: _jsx(Play, { className: "size-3" }) })), turn.latency?.sttMs != null && _jsx(LatencyBadge, { kind: "stt", ms: turn.latency.sttMs }), turn.latency?.claudeMs != null && (_jsx(LatencyBadge, { kind: "claude", ms: turn.latency.claudeMs })), turn.latency?.ttsMs != null && _jsx(LatencyBadge, { kind: "tts", ms: turn.latency.ttsMs })] }))] })] }));
+}

package/dist/chat/types.d.ts

@@ -0,0 +1,36 @@
+export type Speaker = 'user' | 'assistant' | 'system';
+/** Per-stage latency breakdown for one turn. */
+export interface TurnLatency {
+    sttMs?: number;
+    claudeMs?: number;
+    ttsMs?: number;
+}
+/** A single AI tool / function-call invocation. */
+export interface ToolCall {
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+    /** Short human-readable summary, e.g. "3 events". */
+    resultSummary?: string;
+    latencyMs?: number;
+}
+/** One conversational exchange. */
+export interface Turn {
+    id: string;
+    speaker: Speaker;
+    /** Display label, e.g. "Morpheus" or "Operator (Ali)". Optional override of speaker. */
+    speakerLabel?: string;
+    /** Optional model identifier, e.g. "claude-opus-4-7". */
+    modelLabel?: string;
+    /** URL or blob: URL for per-turn replay. */
+    audioUrl?: string;
+    /** Spoken duration if known. */
+    spokenSeconds?: number;
+    text: string;
+    /** Unix ms. */
+    startedAt: number;
+    /** True if the assistant is still streaming this turn. */
+    streaming?: boolean;
+    latency?: TurnLatency;
+    toolCalls?: ToolCall[];
+}

package/dist/chat/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1 +1,4 @@
+export * from './chat/public.js';
+export * from './panel/public.js';
 export * from './shell/public.js';
+export * from './timeline/public.js';

package/dist/index.js

@@ -1 +1,4 @@
+export * from './chat/public.js';
+export * from './panel/public.js';
 export * from './shell/public.js';
+export * from './timeline/public.js';

package/dist/lib/format-time.d.ts

@@ -0,0 +1,9 @@
+export interface FormatClockOptions {
+    /** IANA timezone, e.g. "Europe/Stockholm". Defaults to local tz. */
+    tz?: string;
+    /** Include seconds (default true). */
+    withSeconds?: boolean;
+}
+export declare function formatClock(date: Date, opts?: FormatClockOptions): string;
+export declare function formatDuration(ms: number): string;
+export declare function formatRelativeOffset(ms: number): string;

package/dist/lib/format-time.js

@@ -0,0 +1,34 @@
+export function formatClock(date, opts = {}) {
+    const { tz, withSeconds = true } = opts;
+    const fmt = new Intl.DateTimeFormat('en-GB', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: withSeconds ? '2-digit' : undefined,
+        hour12: false,
+        timeZone: tz,
+    });
+    return fmt.format(date);
+}
+export function formatDuration(ms) {
+    if (ms < 0)
+        ms = 0;
+    const totalSec = Math.floor(ms / 1000);
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    if (h > 0)
+        return `${h}h ${m}m`;
+    if (m > 0)
+        return `${m}m ${s}s`;
+    return `${s}s`;
+}
+export function formatRelativeOffset(ms) {
+    const sign = ms < 0 ? '-' : '+';
+    const abs = Math.abs(ms);
+    const totalSec = Math.floor(abs / 1000);
+    const m = Math.floor(totalSec / 60);
+    const s = totalSec % 60;
+    if (m === 0)
+        return `${sign}${s}s`;
+    return `${sign}${m}m ${s}s`;
+}

package/dist/panel/index.d.ts

@@ -0,0 +1,6 @@
+export type { InspectorProps } from './inspector.js';
+export { Inspector } from './inspector.js';
+export type { InspectorFieldProps } from './inspector-field.js';
+export { InspectorField } from './inspector-field.js';
+export type { InspectorJSONProps } from './inspector-json.js';
+export { InspectorJSON } from './inspector-json.js';

package/dist/panel/index.js

@@ -0,0 +1,3 @@
+export { Inspector } from './inspector.js';
+export { InspectorField } from './inspector-field.js';
+export { InspectorJSON } from './inspector-json.js';

package/dist/panel/inspector-field.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface InspectorFieldProps {
+    label: string;
+    value: ReactNode;
+    /** Optional smaller hint after the value, e.g. provider info. */
+    hint?: ReactNode;
+    className?: string;
+}
+export declare function InspectorField({ label, value, hint, className }: InspectorFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/panel/inspector-field.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function InspectorField({ label, value, hint, className }) {
+    return (_jsxs("div", { className: ['border-b border-border py-3 last:border-b-0', className ?? ''].join(' '), children: [_jsx("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }), _jsxs("div", { className: "text-[13px] tabular-nums text-foreground", children: [value, hint != null && _jsxs("span", { className: "text-[12px] text-muted-foreground", children: [" ", hint] })] })] }));
+}

package/dist/panel/inspector-json.d.ts

@@ -0,0 +1,7 @@
+export interface InspectorJSONProps {
+    data: unknown;
+    /** Indent size in spaces. */
+    indent?: number;
+    className?: string;
+}
+export declare function InspectorJSON({ data, indent, className }: InspectorJSONProps): import("react/jsx-runtime").JSX.Element;

package/dist/panel/inspector-json.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function tokenize(value, level, key, indent, seen) {
+    const out = [];
+    const pad = ' '.repeat(level * indent);
+    if (key !== null) {
+        out.push({ kind: 'punct', text: pad });
+        out.push({ kind: 'key', text: `"${key}"` });
+        out.push({ kind: 'punct', text: ': ' });
+    }
+    else {
+        out.push({ kind: 'punct', text: pad });
+    }
+    if (value === null) {
+        out.push({ kind: 'literal', text: 'null' });
+    }
+    else if (typeof value === 'string') {
+        out.push({ kind: 'string', text: JSON.stringify(value) });
+    }
+    else if (typeof value === 'number') {
+        out.push({ kind: 'number', text: String(value) });
+    }
+    else if (typeof value === 'boolean') {
+        out.push({ kind: 'literal', text: String(value) });
+    }
+    else if (Array.isArray(value)) {
+        if (seen.has(value)) {
+            out.push({ kind: 'literal', text: '"[Circular]"' });
+        }
+        else {
+            seen.add(value);
+            out.push({ kind: 'punct', text: '[\n' });
+            value.forEach((v, i) => {
+                out.push(...tokenize(v, level + 1, null, indent, seen));
+                out.push({ kind: 'punct', text: i < value.length - 1 ? ',\n' : '\n' });
+            });
+            out.push({ kind: 'punct', text: `${pad}]` });
+        }
+    }
+    else if (typeof value === 'object') {
+        const obj = value;
+        if (seen.has(obj)) {
+            out.push({ kind: 'literal', text: '"[Circular]"' });
+        }
+        else {
+            seen.add(obj);
+            out.push({ kind: 'punct', text: '{\n' });
+            const entries = Object.entries(obj);
+            entries.forEach(([k, v], i) => {
+                out.push(...tokenize(v, level + 1, k, indent, seen));
+                out.push({ kind: 'punct', text: i < entries.length - 1 ? ',\n' : '\n' });
+            });
+            out.push({ kind: 'punct', text: `${pad}}` });
+        }
+    }
+    else {
+        out.push({ kind: 'literal', text: String(value) });
+    }
+    return out;
+}
+const KIND_CLASS = {
+    punct: 'text-muted-foreground',
+    key: 'text-primary',
+    string: 'text-emerald-500',
+    number: 'text-amber-500',
+    literal: 'text-amber-500',
+};
+export function InspectorJSON({ data, indent = 2, className }) {
+    const tokens = tokenize(data, 0, null, indent, new WeakSet());
+    return (_jsx("pre", { className: [
+            'mt-1.5 overflow-x-auto rounded-md border border-border bg-background p-2.5 font-mono text-[11px] leading-relaxed text-foreground',
+            className ?? '',
+        ].join(' '), children: tokens.map((t, i) => (_jsx("span", { className: KIND_CLASS[t.kind], children: t.text }, i))) }));
+}

package/dist/panel/inspector.d.ts

@@ -0,0 +1,7 @@
+import type { InspectorTab } from './types.js';
+export interface InspectorProps {
+    tabs: InspectorTab[];
+    defaultTab?: string;
+    className?: string;
+}
+export declare function Inspector({ tabs, defaultTab, className }: InspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/panel/inspector.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export function Inspector({ tabs, defaultTab, className }) {
+    const [active, setActive] = useState(defaultTab ?? tabs[0]?.id ?? '');
+    const current = tabs.find((t) => t.id === active) ?? tabs[0];
+    return (_jsxs("aside", { className: ['flex h-full flex-col border-l border-border bg-card', className ?? ''].join(' '), children: [_jsx("div", { role: "tablist", className: "flex gap-0.5 border-b border-border px-3.5", children: tabs.map((t) => (_jsx("button", { type: "button", role: "tab", "aria-selected": t.id === active, onClick: () => setActive(t.id), className: [
+                        'border-b-2 px-2.5 py-3 text-xs',
+                        t.id === active
+                            ? 'border-primary text-foreground'
+                            : 'border-transparent text-muted-foreground hover:text-foreground',
+                    ].join(' '), children: t.label }, t.id))) }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 pb-8 pt-4", children: current?.content })] }));
+}

package/dist/panel/public.d.ts

@@ -0,0 +1 @@
+export type { InspectorTab } from './types.js';

package/dist/panel/public.js

@@ -0,0 +1 @@
+export {};

package/dist/panel/types.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface InspectorTab {
+    id: string;
+    label: string;
+    content: ReactNode;
+}

package/dist/panel/types.js

@@ -0,0 +1 @@
+export {};

package/dist/timeline/date-switcher.d.ts

@@ -0,0 +1,11 @@
+export interface DateSwitcherProps {
+    /** Currently selected date. */
+    value: Date;
+    /** Reference for "today" comparison and forward-disable. */
+    now: Date;
+    /** IANA timezone for "same day" / display semantics. Defaults to local. */
+    tz?: string;
+    onChange: (next: Date) => void;
+    className?: string;
+}
+export declare function DateSwitcher({ value, now, tz, onChange, className }: DateSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/date-switcher.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
+// "YYYY-MM-DD" in the given tz (or local if undefined). Comparing these
+// strings is a robust same-day check that doesn't depend on local-time math.
+function ymdInTz(d, tz) {
+    return new Intl.DateTimeFormat('en-CA', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        timeZone: tz,
+    }).format(d);
+}
+function isSameDay(a, b, tz) {
+    return ymdInTz(a, tz) === ymdInTz(b, tz);
+}
+// Returns the tz offset (in minutes) for `date` in `tz`. Positive = east of
+// UTC, e.g. Europe/Stockholm CET → +60. Tolerates "GMT", "GMT+05", and
+// "GMT+05:30" formats from Intl.DateTimeFormat.
+function tzOffsetMinutes(date, tz) {
+    const parts = new Intl.DateTimeFormat('en-US', {
+        timeZone: tz,
+        timeZoneName: 'longOffset',
+    }).formatToParts(date);
+    const name = parts.find((p) => p.type === 'timeZoneName')?.value ?? 'GMT';
+    const m = /GMT(?:([+-])(\d{1,2})(?::?(\d{2}))?)?/.exec(name);
+    if (!m?.[1])
+        return 0;
+    const sign = m[1] === '+' ? 1 : -1;
+    const hours = Number.parseInt(m[2] ?? '0', 10);
+    const mins = Number.parseInt(m[3] ?? '0', 10);
+    return sign * (hours * 60 + mins);
+}
+function addDays(d, delta, tz) {
+    if (!tz) {
+        // No tz: step the calendar day in the browser's local timezone (DST-safe
+        // there because setDate honors local DST transitions).
+        const c = new Date(d);
+        c.setDate(c.getDate() + delta);
+        return c;
+    }
+    // tz-aware: advance 24h, then correct for any DST shift between the
+    // original day and the target day so the *wall clock* in `tz` lands on the
+    // same hour:minute on the next/previous calendar day.
+    const offsetBefore = tzOffsetMinutes(d, tz);
+    const candidate = new Date(d.getTime() + delta * 86_400_000);
+    const offsetAfter = tzOffsetMinutes(candidate, tz);
+    return new Date(candidate.getTime() + (offsetBefore - offsetAfter) * 60_000);
+}
+function fmtDate(d, tz) {
+    return new Intl.DateTimeFormat('en-US', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        timeZone: tz,
+    }).format(d);
+}
+export function DateSwitcher({ value, now, tz, onChange, className }) {
+    const isToday = isSameDay(value, now, tz);
+    const goPrev = () => onChange(addDays(value, -1, tz));
+    const goNext = () => onChange(addDays(value, 1, tz));
+    return (_jsxs("div", { className: ['flex items-center gap-2', className ?? ''].join(' '), children: [_jsx("button", { type: "button", "aria-label": "Previous day", onClick: goPrev, className: "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground", children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsxs("div", { className: "flex flex-1 items-center justify-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm", children: [_jsx(Calendar, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: fmtDate(value, tz) }), isToday && (_jsx("span", { className: "ml-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-emerald-500", children: "today" }))] }), _jsx("button", { type: "button", "aria-label": "Next day", disabled: isToday, onClick: goNext, className: "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent", children: _jsx(ChevronRight, { className: "size-4" }) })] }));
+}

package/dist/timeline/event-card.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineEvent } from './types.js';
+export type EventCardSize = 'default' | 'tiny';
+export interface EventCardProps {
+    event: TimelineEvent;
+    size?: EventCardSize;
+    onSelect?: (event: TimelineEvent) => void;
+    className?: string;
+}
+export declare function EventCard({ event, size, onSelect, className }: EventCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/event-card.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EventCard({ event, size = 'default', onSelect, className }) {
+    const isLive = event.isLive ?? false;
+    const isSelected = event.selected ?? false;
+    const isError = event.kind === 'error';
+    const liveClasses = isLive
+        ? 'border-emerald-500/40 bg-gradient-to-b from-emerald-500/10 to-card'
+        : '';
+    const errorClasses = isError ? 'border-destructive/40' : '';
+    const selectedClasses = isSelected
+        ? 'border-primary/60 bg-primary/[0.10] shadow-[0_4px_12px_rgba(0,0,0,0.15)]'
+        : '';
+    const sizeClasses = size === 'tiny' ? 'px-2 py-1 text-[11px]' : 'px-2.5 py-2 text-xs';
+    return (_jsxs("button", { type: "button", "data-live": String(isLive), "data-selected": String(isSelected), "data-kind": event.kind, onClick: () => onSelect?.(event), className: [
+            'relative w-full cursor-pointer rounded-md border border-border bg-card text-left transition-[border-color,transform] duration-100',
+            'hover:translate-x-px hover:border-primary/40',
+            sizeClasses,
+            liveClasses,
+            errorClasses,
+            selectedClasses,
+            className ?? '',
+        ].join(' '), children: [_jsx("span", { "aria-hidden": "true", className: "absolute -left-2.5 top-1/2 h-px w-2.5 bg-border" }), _jsxs("span", { className: "flex items-center gap-1.5 font-medium", children: [isLive && _jsx(LiveDot, {}), _jsx("span", { className: "min-w-0 flex-1 truncate", children: event.primary })] }), size === 'default' && event.secondary != null && (_jsx("span", { className: "mt-0.5 block text-[10px] text-muted-foreground tabular-nums", children: event.secondary }))] }));
+}
+function LiveDot() {
+    return (_jsx("span", { "aria-hidden": "true", className: "inline-block size-1.5 shrink-0 animate-pulse rounded-full bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.20)]" }));
+}

package/dist/timeline/index.d.ts

@@ -0,0 +1,13 @@
+export type { DateSwitcherProps } from './date-switcher.js';
+export { DateSwitcher } from './date-switcher.js';
+export type { EventCardProps, EventCardSize } from './event-card.js';
+export { EventCard } from './event-card.js';
+export type { LiveIndicatorProps } from './live-indicator.js';
+export { LiveIndicator } from './live-indicator.js';
+export type { ScrubBarProps } from './scrub-bar.js';
+export { ScrubBar } from './scrub-bar.js';
+export type { TimelineRailProps } from './timeline-rail.js';
+export { TimelineRail } from './timeline-rail.js';
+export type { TimelineTapeProps } from './timeline-tape.js';
+export { TimelineTape } from './timeline-tape.js';
+export type { ScrubMark, TimelineEvent, TimelineEventKind } from './types.js';

package/dist/timeline/index.js

@@ -0,0 +1,6 @@
+export { DateSwitcher } from './date-switcher.js';
+export { EventCard } from './event-card.js';
+export { LiveIndicator } from './live-indicator.js';
+export { ScrubBar } from './scrub-bar.js';
+export { TimelineRail } from './timeline-rail.js';
+export { TimelineTape } from './timeline-tape.js';

package/dist/timeline/live-indicator.d.ts

@@ -0,0 +1,7 @@
+export interface LiveIndicatorProps {
+    now: Date;
+    /** Optional IANA timezone for the displayed clock. */
+    tz?: string;
+    className?: string;
+}
+export declare function LiveIndicator({ now, tz, className }: LiveIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/live-indicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatClock } from '../lib/format-time.js';
+export function LiveIndicator({ now, tz, className }) {
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: ['relative h-0 pointer-events-none', className ?? ''].join(' '), children: [_jsx("span", { className: "pointer-events-auto absolute left-0 top-0 inline-flex items-center rounded-md bg-emerald-500 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider text-white shadow-[0_6px_18px_rgba(16,185,129,0.35)]", children: "LIVE" }), _jsx("span", { "aria-hidden": "true", className: "absolute right-0 top-1/2 left-[60px] h-px bg-gradient-to-r from-emerald-500 via-emerald-500/30 to-transparent" }), _jsx("span", { className: "absolute right-1.5 top-[-2px] text-[10px] font-semibold tabular-nums text-emerald-500", children: formatClock(now, { tz }) })] }));
+}

package/dist/timeline/public.d.ts

@@ -0,0 +1 @@
+export type { ScrubMark, TimelineEvent, TimelineEventKind } from './types.js';

package/dist/timeline/public.js

@@ -0,0 +1 @@
+export {};

package/dist/timeline/scrub-bar.d.ts

@@ -0,0 +1,14 @@
+import type { ScrubMark } from './types.js';
+export interface ScrubBarProps {
+    durationMs: number;
+    positionMs: number;
+    isLive?: boolean;
+    marks: ScrubMark[];
+    onSeek: (positionMs: number) => void;
+    isPlaying?: boolean;
+    onPlayPause?: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    className?: string;
+}
+export declare function ScrubBar({ durationMs, positionMs, isLive, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }: ScrubBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/scrub-bar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play, SkipBack, SkipForward } from 'lucide-react';
+import { useRef } from 'react';
+import { formatDuration } from '../lib/format-time.js';
+const KIND_COLOR = {
+    turn: 'bg-primary',
+    tool: 'bg-amber-500',
+    barge: 'bg-emerald-500',
+    error: 'bg-destructive',
+};
+export function ScrubBar({ durationMs, positionMs, isLive = false, marks, onSeek, isPlaying, onPlayPause, onSkipBack, onSkipForward, className, }) {
+    const trackRef = useRef(null);
+    const showPlayPause = isPlaying !== undefined;
+    const isPlayingValue = isPlaying ?? false;
+    const fillPct = durationMs > 0 ? Math.min(100, (positionMs / durationMs) * 100) : 0;
+    const handleSeek = (e) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect || rect.width === 0)
+            return;
+        const x = e.clientX - rect.left;
+        const pct = Math.max(0, Math.min(1, x / rect.width));
+        onSeek(pct * durationMs);
+    };
+    const handleKeyDown = (e) => {
+        const step = durationMs / 100;
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            onSeek(Math.max(0, positionMs - step));
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            onSeek(Math.min(durationMs, positionMs + step));
+        }
+    };
+    return (_jsxs("div", { className: ['rounded-2xl border border-border bg-card p-3.5', className ?? ''].join(' '), children: [_jsxs("div", { className: "mb-2.5 flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Timeline \u00B7 this call" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "px-1.5 text-[11px] tabular-nums text-muted-foreground", children: [formatDuration(positionMs), isLive ? ' / live' : ` / ${formatDuration(durationMs)}`] }), onSkipBack && (_jsx(TransportBtn, { label: "Skip back", onClick: onSkipBack, children: _jsx(SkipBack, { className: "size-3.5" }) })), showPlayPause && (_jsx(TransportBtn, { label: isPlayingValue ? 'Pause' : 'Play', variant: "primary", onClick: onPlayPause ?? (() => { }), children: isPlayingValue ? _jsx(Pause, { className: "size-3.5" }) : _jsx(Play, { className: "size-3.5" }) })), onSkipForward && (_jsx(TransportBtn, { label: "Skip forward", onClick: onSkipForward, children: _jsx(SkipForward, { className: "size-3.5" }) }))] })] }), _jsxs("div", { ref: trackRef, role: "slider", "aria-label": "Conversation position", "aria-valuemin": 0, "aria-valuemax": durationMs, "aria-valuenow": positionMs, onClick: handleSeek, onKeyDown: handleKeyDown, tabIndex: 0, className: "relative h-8 cursor-pointer overflow-hidden rounded-md bg-muted focus:outline-none focus:ring-2 focus:ring-primary/50", children: [_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 left-0 bg-primary/10", style: { width: `${fillPct}%` } }), marks.map((m) => (_jsx("span", { "data-mark-kind": m.kind, title: m.label ?? m.kind, className: ['absolute inset-y-1 w-0.5 rounded-sm', KIND_COLOR[m.kind]].join(' '), style: { left: `${m.positionPct}%` } }, m.id))), _jsx("span", { "aria-hidden": "true", className: "absolute -inset-y-0.5 w-0.5 bg-foreground", style: { left: `${fillPct}%` } })] }), _jsxs("div", { className: "flex justify-between pt-2 text-[10px] tabular-nums text-muted-foreground", children: [_jsx("span", { children: "0:00" }), _jsx("span", { children: isLive ? 'now' : formatDuration(durationMs) })] })] }));
+}
+function TransportBtn({ label, onClick, variant, children, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, onClick: onClick, className: [
+            'inline-flex size-6 items-center justify-center rounded',
+            variant === 'primary'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+        ].join(' '), children: children }));
+}

package/dist/timeline/timeline-rail.d.ts

@@ -0,0 +1,19 @@
+import type { TimelineEvent } from './types.js';
+export interface TimelineRailProps {
+    date: Date;
+    now: Date;
+    events: TimelineEvent[];
+    /** px per second. Default 1.2 (72 px/min). */
+    zoom?: number;
+    /** When true (default), tape auto-scrolls to keep LIVE pinned. */
+    followLive?: boolean;
+    tz?: string;
+    onZoomChange?: (px: number) => void;
+    onDateChange?: (next: Date) => void;
+    onSelect?: (event: TimelineEvent) => void;
+    onFollowChange?: (following: boolean) => void;
+    /** Click target on the "Manage retention" footer. */
+    onManageRetention?: () => void;
+    className?: string;
+}
+export declare function TimelineRail({ date, now, events, zoom, followLive, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }: TimelineRailProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/timeline-rail.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Archive } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { DateSwitcher } from './date-switcher.js';
+import { LiveIndicator } from './live-indicator.js';
+import { TimelineTape } from './timeline-tape.js';
+const FUTURE_PAD_SEC = 300;
+const PAST_SPAN_SEC = 6 * 60 * 60;
+const STICKY_TOP_PX = 12;
+export function TimelineRail({ date, now, events, zoom = 1.2, followLive = true, tz, onZoomChange, onDateChange, onSelect, onFollowChange, onManageRetention, className, }) {
+    const scrollRef = useRef(null);
+    const [isFollowing, setIsFollowing] = useState(followLive);
+    // Mirror parent prop changes into local state so a controlled toggle of
+    // `followLive` from outside actually flips auto-follow.
+    useEffect(() => {
+        setIsFollowing(followLive);
+    }, [followLive]);
+    const liveCount = useMemo(() => events.filter((e) => e.isLive).length, [events]);
+    const totalCalls = useMemo(() => events.filter((e) => e.kind === 'session').length, [events]);
+    // NOW y inside the tape canvas
+    const nowY = FUTURE_PAD_SEC * zoom;
+    // Keep LIVE pinned by auto-scrolling when isFollowing
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        if (isFollowing) {
+            el.scrollTop = nowY - STICKY_TOP_PX;
+        }
+    }, [isFollowing, nowY]);
+    // Detect manual scroll-away → flip off auto-follow
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            if (!el)
+                return;
+            const expected = nowY - STICKY_TOP_PX;
+            const drift = Math.abs(el.scrollTop - expected);
+            if (drift > 32 && isFollowing) {
+                setIsFollowing(false);
+                onFollowChange?.(false);
+            }
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => el.removeEventListener('scroll', onScroll);
+    }, [nowY, isFollowing, onFollowChange]);
+    const jumpToLive = () => {
+        setIsFollowing(true);
+        onFollowChange?.(true);
+    };
+    return (_jsxs("aside", { className: [
+            'relative flex h-full flex-col border-r border-border bg-card text-sm',
+            className ?? '',
+        ].join(' '), "data-meda-component": "timeline-rail", children: [_jsx("div", { className: "px-3.5 pb-2.5 pt-3.5", children: _jsx(DateSwitcher, { value: date, now: now, tz: tz, onChange: (d) => onDateChange?.(d) }) }), _jsxs("div", { className: "flex items-center gap-2.5 px-3.5 pb-3", children: [_jsx(ZoomBtn, { label: "\u2212", onClick: () => onZoomChange?.(Math.max(0.2, zoom - 0.4)) }), _jsx(ZoomTrack, { value: zoom, min: 0.2, max: 6 }), _jsx(ZoomBtn, { label: "+", onClick: () => onZoomChange?.(Math.min(6, zoom + 0.4)) })] }), _jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3.5 pb-2.5 text-[11px] tabular-nums text-muted-foreground", children: [liveCount > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-emerald-500", children: [_jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.18)]" }), liveCount, " live"] })), _jsxs("span", { className: "ml-auto", children: [_jsx("strong", { className: "font-semibold text-foreground", children: totalCalls }), " sessions"] })] }), _jsxs("div", { ref: scrollRef, className: "relative flex-1 overflow-y-auto overflow-x-hidden pb-16", children: [_jsx("div", { className: "sticky top-3 z-10 mx-3.5", children: _jsx(LiveIndicator, { now: now, tz: tz }) }), _jsx(TimelineTape, { now: now, events: events, pxPerSec: zoom, futurePadSec: FUTURE_PAD_SEC, pastSpanSec: PAST_SPAN_SEC, tz: tz, onSelect: onSelect })] }), !isFollowing && (_jsx("button", { type: "button", onClick: jumpToLive, className: "absolute right-3 top-32 z-20 inline-flex items-center gap-1.5 rounded-full bg-emerald-500 px-3 py-1 text-[11px] font-semibold text-white shadow-md hover:bg-emerald-600", children: "Jump to live" })), _jsxs("button", { type: "button", onClick: () => onManageRetention?.(), className: "absolute inset-x-0 bottom-0 z-20 flex items-center justify-center gap-1.5 bg-gradient-to-t from-card via-card/85 to-transparent px-3.5 py-2.5 text-[12px] text-primary hover:text-primary/80", children: [_jsx(Archive, { className: "size-3.5" }), " Manage retention"] })] }));
+}
+function ZoomBtn({ label, onClick }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: "inline-flex size-5 items-center justify-center rounded bg-muted text-sm leading-none text-muted-foreground hover:text-foreground", children: label }));
+}
+function ZoomTrack({ value, min, max }) {
+    const pct = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+    return (_jsx("div", { tabIndex: 0, role: "slider", "aria-label": "Zoom", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, className: "relative h-1 flex-1 rounded-sm bg-muted", children: _jsx("span", { className: "absolute -top-[3px] size-2.5 -translate-x-1/2 rounded-full bg-primary shadow-[0_0_0_4px_rgba(137,117,255,0.18)]", style: { left: `${pct}%` } }) }));
+}

package/dist/timeline/timeline-tape.d.ts

@@ -0,0 +1,19 @@
+import type { TimelineEvent } from './types.js';
+export interface TimelineTapeProps {
+    /** "Now" reference; canvas top represents `now + futurePadSec`. */
+    now: Date;
+    /** Event list. Order doesn't matter — placement uses startedAt. */
+    events: TimelineEvent[];
+    /** px per second of vertical scroll. Default 1.2 = 72 px/min. */
+    pxPerSec?: number;
+    /** Seconds of "future" rendered above NOW. Default 300 (5 min). */
+    futurePadSec?: number;
+    /** Total seconds visible past NOW (governs canvas height). Default 6h. */
+    pastSpanSec?: number;
+    /** Timezone for tick labels (caller's local tz by default). */
+    tz?: string;
+    /** Selection callback. */
+    onSelect?: (event: TimelineEvent) => void;
+    className?: string;
+}
+export declare function TimelineTape({ now, events, pxPerSec, futurePadSec, pastSpanSec, tz, onSelect, className, }: TimelineTapeProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/timeline-tape.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatClock } from '../lib/format-time.js';
+import { EventCard } from './event-card.js';
+const DEFAULT_PX_PER_SEC = 1.2;
+const DEFAULT_FUTURE_PAD_SEC = 300;
+const DEFAULT_PAST_SPAN_SEC = 6 * 60 * 60;
+/** Convert a unix-ms instant to canvas y (px). y=0 at canvas top. */
+function instantToY(instantMs, nowMs, pxPerSec, futurePadSec) {
+    const secsAfterNow = (instantMs - nowMs) / 1000;
+    // future is above now → smaller y. past is below now → larger y.
+    return (futurePadSec - secsAfterNow) * pxPerSec;
+}
+export function TimelineTape({ now, events, pxPerSec = DEFAULT_PX_PER_SEC, futurePadSec = DEFAULT_FUTURE_PAD_SEC, pastSpanSec = DEFAULT_PAST_SPAN_SEC, tz, onSelect, className, }) {
+    const nowMs = now.getTime();
+    const totalSec = futurePadSec + pastSpanSec;
+    const canvasHeight = totalSec * pxPerSec;
+    const nowY = instantToY(nowMs, nowMs, pxPerSec, futurePadSec);
+    // Compute tick positions at minute boundaries. Start from the future edge, go down.
+    const ticks = [];
+    const futureEdgeMs = nowMs + futurePadSec * 1000;
+    const pastEdgeMs = nowMs - pastSpanSec * 1000;
+    const firstTick = new Date(futureEdgeMs);
+    firstTick.setSeconds(0, 0);
+    for (let t = firstTick.getTime(); t >= pastEdgeMs; t -= 60_000) {
+        const y = instantToY(t, nowMs, pxPerSec, futurePadSec);
+        if (y < 0 || y > canvasHeight)
+            continue;
+        ticks.push({
+            y,
+            label: formatClock(new Date(t), { tz, withSeconds: false }),
+            major: true,
+        });
+        // 5 sub-ticks every 10s under each major
+        for (let sub = 1; sub <= 5; sub++) {
+            const subT = t - sub * 10_000;
+            if (subT < pastEdgeMs)
+                break;
+            const subY = instantToY(subT, nowMs, pxPerSec, futurePadSec);
+            ticks.push({ y: subY, label: '', major: false });
+        }
+    }
+    // Build tape segments + cards
+    const segments = events
+        .filter((e) => e.kind === 'session' || e.kind === 'error')
+        .map((e) => {
+        const startY = instantToY(e.startedAt, nowMs, pxPerSec, futurePadSec);
+        const endInstant = e.endedAt ?? (e.isLive ? nowMs : e.startedAt + 1000);
+        const endY = instantToY(endInstant, nowMs, pxPerSec, futurePadSec);
+        // "Top" of the segment is the more recent (smaller y).
+        const top = Math.min(startY, endY);
+        const height = Math.max(2, Math.abs(endY - startY));
+        return { event: e, top, height };
+    });
+    return (_jsxs("div", { className: ['relative ml-3.5 mr-3', className ?? ''].join(' '), style: { height: `${canvasHeight}px` }, "data-canvas-height": canvasHeight, children: [ticks.map((t) => t.major ? (_jsxs("div", { children: [_jsx("span", { className: "absolute left-0 w-[30px] -translate-y-[7px] text-right text-[11px] font-medium tabular-nums text-muted-foreground", style: { top: `${t.y}px` }, children: t.label }), _jsx("span", { className: "absolute h-px w-2 bg-border", style: { left: 32, top: `${t.y}px` } })] }, `maj-${t.y}`)) : (_jsx("span", { className: "absolute h-px w-1.5 bg-border/40", style: { left: 35, top: `${t.y}px` } }, `min-${t.y}`))), segments.map(({ event, top, height }) => (_jsx("span", { "aria-hidden": "true", "data-tape-segment-id": event.id, "data-tape-segment-live": String(event.isLive ?? false), className: [
+                    'absolute w-1 rounded-sm',
+                    event.isLive
+                        ? 'bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]'
+                        : event.kind === 'error'
+                            ? 'bg-destructive'
+                            : 'bg-sky-400 shadow-[0_0_8px_rgba(56,189,248,0.35)]',
+                ].join(' '), style: { left: 44, top: `${top}px`, height: `${height}px` } }, `seg-${event.id}`))), events.map((event) => {
+                const startY = instantToY(event.startedAt, nowMs, pxPerSec, futurePadSec);
+                const isSubEvent = event.kind === 'sub-event';
+                return (_jsx("div", { "data-event-id": event.id, className: "absolute", style: { top: `${startY}px`, left: 56, right: 0 }, children: _jsx(EventCard, { event: event, size: isSubEvent ? 'tiny' : 'default', onSelect: onSelect }) }, event.id));
+            }), _jsx("span", { "aria-hidden": "true", "data-now-y": nowY, className: "absolute", style: { top: `${nowY}px`, left: 0, width: 0, height: 0 } })] }));
+}

package/dist/timeline/types.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+/** What kind of timeline entry this is. */
+export type TimelineEventKind = 'session' | 'sub-event' | 'scheduled' | 'error';
+/**
+ * Generic timeline entry. Apps map their domain (a phone call, a chat session, a workflow run)
+ * onto this shape and pass an array to <TimelineRail/>.
+ */
+export interface TimelineEvent {
+    /** Stable identifier across re-renders. */
+    id: string;
+    /** Unix ms — when the event began. */
+    startedAt: number;
+    /** Unix ms — when the event ended. Omit for live or instantaneous events. */
+    endedAt?: number;
+    /** Coarse category — drives default styling. */
+    kind: TimelineEventKind;
+    /** Optional narrower tag for app-specific styling, e.g. "tool-call", "barge-in". */
+    variant?: string;
+    /** Card primary line content (typically a name). */
+    primary?: ReactNode;
+    /** Card secondary line content (typically meta — counts, cost). */
+    secondary?: ReactNode;
+    /** Highlight as currently selected. */
+    selected?: boolean;
+    /** Render with the live treatment (green pulse, etc). */
+    isLive?: boolean;
+    /**
+     * Optional override for the tape segment color expressed as a CSS color value.
+     * Defaults derived from kind + isLive + variant.
+     */
+    fillColor?: string;
+}
+/** Marks rendered along the per-conversation <ScrubBar/>. */
+export interface ScrubMark {
+    id: string;
+    /** Position along the bar, 0..100. */
+    positionPct: number;
+    kind: 'turn' | 'tool' | 'barge' | 'error';
+    label?: string;
+}

package/dist/timeline/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -32,6 +32,18 @@
       "types": "./dist/voice/index.d.ts",
       "default": "./dist/voice/index.js"
     },
+    "./timeline": {
+      "types": "./dist/timeline/index.d.ts",
+      "default": "./dist/timeline/index.js"
+    },
+    "./chat": {
+      "types": "./dist/chat/index.d.ts",
+      "default": "./dist/chat/index.js"
+    },
+    "./panel": {
+      "types": "./dist/panel/index.d.ts",
+      "default": "./dist/panel/index.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "publishConfig": {
@@ -67,11 +79,11 @@
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",
     "@tailwindcss/vite": "^4.2.4",
-    "@types/three": "^0.184.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.184.0",
     "@vitejs/plugin-react": "^6.0.1",
     "husky": "^9.1.7",
     "jsdom": "^29.0.2",
@@ -81,6 +93,7 @@
     "typescript": "~6.0.2",
     "vite": "^8.0.4",
     "vitest": "^4.1.4",
+    "vitest-axe": "^0.1.0",
     "wrangler": "^4.0.0"
   },
   "scripts": {