@oh-my-pi/omp-stats 18.13.2 → 18.14.0

package/src/client/traces/TraceView.tsx

@@ -12,7 +12,7 @@ import type { SessionTrace, TraceSpan, TraceSpanKind, TraceTrack } from "../type
 import { Card, ChartSkeleton, PageHeader, QueryView, SearchInput, Segmented } from "../ui";
 import { AggregatesPanel } from "./AggregatesPanel";
 import { Minimap } from "./Minimap";
-import { SpanDrawer } from "./SpanDrawer";
+import { SpanDrawer, type TraceEntryLoader } from "./SpanDrawer";
 import { SummaryStrip } from "./SummaryStrip";
 import { TimelineCanvas, type TimelineViewport } from "./TimelineCanvas";
 import { TranscriptList } from "./TranscriptList";
@@ -48,6 +48,56 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 	// A previous session's trace must never render under this file's header.
 	const trace = query.stale ? null : query.data;
 
+	return (
+		<div className="stack traces-view">
+			<div>
+				<button type="button" className="btn" data-variant="ghost" data-size="sm" onClick={onBack}>
+					<ArrowLeft size={14} aria-hidden="true" />
+					Sessions
+				</button>
+			</div>
+			<PageHeader
+				title={<span className="traces-title truncate">{trace?.title ?? file.split("/").pop()}</span>}
+				description={trace?.cwd ? <span className="mono">{trace.cwd}</span> : undefined}
+				actions={
+					<button
+						type="button"
+						className="btn"
+						data-variant="ghost"
+						data-icon="true"
+						onClick={query.refetch}
+						aria-label="Refresh trace"
+						title="Refresh trace"
+					>
+						<RefreshCw size={14} className={query.refreshing ? "traces-spin" : undefined} />
+					</button>
+				}
+			/>
+			<QueryView query={{ ...query, data: trace }} skeleton={<ChartSkeleton height={420} />}>
+				{loaded => <SessionTraceView trace={loaded} />}
+			</QueryView>
+		</div>
+	);
+}
+
+/** Data and host integration supplied to the shared live/offline trace viewer. */
+export interface SessionTraceViewProps {
+	trace: SessionTrace;
+	view?: "timeline" | "full";
+	loadEntry?: TraceEntryLoader;
+	/** Embedded viewers keep details inside their own layout, without a modal. */
+	embedded?: boolean;
+	onNavigate?: (trackId: string, entryId: string) => void;
+}
+
+/** Data-driven viewer shared by the live route and self-contained HTML exports. */
+export function SessionTraceView({
+	trace,
+	view = "full",
+	loadEntry,
+	embedded = false,
+	onNavigate,
+}: SessionTraceViewProps) {
 	const [mode, setMode] = useState<AxisMode>("time");
 	const [compressIdle, setCompressIdle] = useState(true);
 	const [selection, setSelection] = useState<string | null>(null);
@@ -219,190 +269,147 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 	);
 	const closeDrawer = useCallback(() => setDrawerOpen(false), []);
 
-	const traceStart = trace?.startedAt ?? 0;
-
-	const traceQuery = { ...query, data: trace };
+	const traceStart = trace.startedAt;
 
 	return (
-		<div className="stack traces-view">
-			<div>
-				<button type="button" className="btn" data-variant="ghost" data-size="sm" onClick={onBack}>
-					<ArrowLeft size={14} aria-hidden="true" />
-					Sessions
-				</button>
-			</div>
-			<PageHeader
-				title={<span className="traces-title truncate">{trace?.title ?? file.split("/").pop()}</span>}
-				description={trace?.cwd ? <span className="mono">{trace.cwd}</span> : undefined}
-				actions={
-					<button
-						type="button"
-						className="btn"
-						data-variant="ghost"
-						data-icon="true"
-						onClick={query.refetch}
-						aria-label="Refresh trace"
-						title="Refresh trace"
-					>
-						<RefreshCw size={14} className={query.refreshing ? "traces-spin" : undefined} />
-					</button>
-				}
-			/>
+		<div className="stack traces-view" data-view={view}>
+			{view === "full" && <SummaryStrip summary={trace.summary} />}
+			{allSpans.length === 0 && <p className="muted">No spans recorded in this session.</p>}
 
-			<QueryView query={traceQuery} skeleton={<ChartSkeleton height={420} />}>
-				{loaded => (
+			<Card
+				index={1}
+				title="Timeline"
+				description="W/S zoom · A/D pan · drag pan · wheel zoom · 0 fit · F focus selection · dbl-click focus · Esc deselect"
+				actions={
 					<>
-						<SummaryStrip summary={loaded.summary} />
-
-						<Card
-							index={1}
-							title="Timeline"
-							description="W/S zoom · A/D pan · drag pan · wheel zoom · 0 fit · F focus selection · dbl-click focus · Esc deselect"
-							actions={
+						<button
+							type="button"
+							className="btn"
+							data-variant="ghost"
+							data-size="sm"
+							onClick={() => collapseAll(false)}
+						>
+							Expand all
+						</button>
+						<button
+							type="button"
+							className="btn"
+							data-variant="ghost"
+							data-size="sm"
+							onClick={() => collapseAll(true)}
+						>
+							Collapse all
+						</button>
+					</>
+				}
+			>
+				<div className="stack">
+					<div className="traces-toolbar">
+						<Segmented options={MODE_OPTIONS} value={mode} onChange={setMode} size="sm" aria-label="Axis mode" />
+						{mode === "time" && (
+							<label className="traces-check">
+								<input
+									type="checkbox"
+									checked={compressIdle}
+									onChange={event => setCompressIdle(event.target.checked)}
+								/>
+								Compress idle
+							</label>
+						)}
+						<div className="traces-search">
+							<SearchInput
+								value={search}
+								onChange={value => {
+									setSearch(value);
+									setMatchIndex(0);
+								}}
+								label="Search spans"
+								placeholder="Search spans…"
+								width={200}
+							/>
+							{search.trim() && (
 								<>
+									<span className="num muted traces-match-count">
+										{matches.length === 0
+											? "0"
+											: `${(matchIndex % Math.max(matches.length, 1)) + 1}/${matches.length}`}
+									</span>
 									<button
 										type="button"
 										className="btn"
 										data-variant="ghost"
 										data-size="sm"
-										onClick={() => collapseAll(false)}
+										data-icon="true"
+										onClick={() => cycleMatch(-1)}
+										aria-label="Previous match"
+										disabled={matches.length === 0}
 									>
-										Expand all
+										<ChevronLeft size={14} />
 									</button>
 									<button
 										type="button"
 										className="btn"
 										data-variant="ghost"
 										data-size="sm"
-										onClick={() => collapseAll(true)}
+										data-icon="true"
+										onClick={() => cycleMatch(1)}
+										aria-label="Next match"
+										disabled={matches.length === 0}
 									>
-										Collapse all
+										<ChevronRight size={14} />
 									</button>
 								</>
-							}
-						>
-							<div className="stack">
-								<div className="traces-toolbar">
-									<Segmented
-										options={MODE_OPTIONS}
-										value={mode}
-										onChange={setMode}
-										size="sm"
-										aria-label="Axis mode"
-									/>
-									{mode === "time" && (
-										<label className="traces-check">
-											<input
-												type="checkbox"
-												checked={compressIdle}
-												onChange={event => setCompressIdle(event.target.checked)}
-											/>
-											Compress idle
-										</label>
-									)}
-									<div className="traces-search">
-										<SearchInput
-											value={search}
-											onChange={value => {
-												setSearch(value);
-												setMatchIndex(0);
-											}}
-											placeholder="Search spans…"
-											width={200}
-										/>
-										{search.trim() && (
-											<>
-												<span className="num muted traces-match-count">
-													{matches.length === 0
-														? "0"
-														: `${(matchIndex % Math.max(matches.length, 1)) + 1}/${matches.length}`}
-												</span>
-												<button
-													type="button"
-													className="btn"
-													data-variant="ghost"
-													data-size="sm"
-													data-icon="true"
-													onClick={() => cycleMatch(-1)}
-													aria-label="Previous match"
-													disabled={matches.length === 0}
-												>
-													<ChevronLeft size={14} />
-												</button>
-												<button
-													type="button"
-													className="btn"
-													data-variant="ghost"
-													data-size="sm"
-													data-icon="true"
-													onClick={() => cycleMatch(1)}
-													aria-label="Next match"
-													disabled={matches.length === 0}
-												>
-													<ChevronRight size={14} />
-												</button>
-											</>
-										)}
-									</div>
-									<div className="traces-legend">
-										{LEGEND.map(item => (
-											<span key={item.kind} className="traces-legend-item">
-												<span
-													className="swatch"
-													style={{ background: `var(${CATEGORY_VARS[item.kind]})` }}
-												/>
-												{item.label}
-											</span>
-										))}
-									</div>
-								</div>
-								<Minimap
-									tracks={tracks}
-									scale={scale}
-									viewport={effectiveViewport}
-									onViewportChange={setViewport}
-								/>
-								<TimelineCanvas
-									tracks={tracks}
-									scale={scale}
-									viewport={effectiveViewport}
-									onViewportChange={setViewport}
-									selected={selected}
-									onSelect={selectAndOpen}
-									matchIds={matchIds}
-									collapsed={collapsed}
-									onToggleCollapse={toggleCollapse}
-									traceStart={traceStart}
-								/>
-							</div>
-						</Card>
-
-						<Card
-							index={2}
-							title="Transcript"
-							description="Every span and marker in order; click to inspect"
-							flush
-						>
-							<TranscriptList
-								tracks={tracks}
-								selection={selection}
-								onSelect={openFromTranscript}
-								search={search}
-								matchIds={matchIds}
-								traceStart={traceStart}
-							/>
-						</Card>
-						<AggregatesPanel toolStats={loaded.summary.toolStats} index={3} />
-					</>
-				)}
-			</QueryView>
+							)}
+						</div>
+						<div className="traces-legend">
+							{LEGEND.map(item => (
+								<span key={item.kind} className="traces-legend-item">
+									<span className="swatch" style={{ background: `var(${CATEGORY_VARS[item.kind]})` }} />
+									{item.label}
+								</span>
+							))}
+						</div>
+					</div>
+					<Minimap tracks={tracks} scale={scale} viewport={effectiveViewport} onViewportChange={setViewport} />
+					<TimelineCanvas
+						tracks={tracks}
+						scale={scale}
+						viewport={effectiveViewport}
+						onViewportChange={setViewport}
+						selected={selected}
+						onSelect={selectAndOpen}
+						matchIds={matchIds}
+						collapsed={collapsed}
+						onToggleCollapse={toggleCollapse}
+						traceStart={traceStart}
+						autoFocus={!embedded}
+					/>
+				</div>
+			</Card>
 
 			<SpanDrawer
 				span={drawerOpen ? (selected?.span ?? null) : null}
 				track={selected?.track ?? null}
 				onClose={closeDrawer}
 				onOpenChildTrack={openChildTrack}
+				loadEntry={loadEntry}
+				inline={embedded}
+				onNavigate={onNavigate}
 			/>
+
+			{view === "full" && (
+				<Card index={2} title="Transcript" description="Every span and marker in order; click to inspect" flush>
+					<TranscriptList
+						tracks={tracks}
+						selection={selection}
+						onSelect={openFromTranscript}
+						search={search}
+						matchIds={matchIds}
+						traceStart={traceStart}
+					/>
+				</Card>
+			)}
+			{view === "full" && <AggregatesPanel toolStats={trace.summary.toolStats} index={3} />}
 		</div>
 	);
 }

package/src/client/traces/index.ts

@@ -0,0 +1,5 @@
+/** Shared trace UI for live dashboards and embedded offline viewers. */
+export type { SessionTrace } from "../types";
+export type { TraceEntryLoader } from "./SpanDrawer";
+export { SessionTraceView, type SessionTraceViewProps } from "./TraceView";
+export { TraceThemeRoot } from "./trace-colors";

package/src/client/traces/trace-colors.ts

@@ -3,9 +3,11 @@
  * design tokens so canvas drawing follows the active theme.
  */
 
-import { useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import type { TraceSpanKind } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
+
+/** Embedded viewers resolve canvas colors from their scoped style root. */
+export const TraceThemeRoot = createContext<HTMLElement | null>(null);
 
 export interface TraceTheme {
 	/** Span fill per category. */
@@ -42,8 +44,8 @@ export const CATEGORY_VARS: Record<TraceSpanKind, string> = {
 	background: "--ink-4",
 };
 
-function readTheme(): TraceTheme {
-	const style = getComputedStyle(document.documentElement);
+function readTheme(root: HTMLElement): TraceTheme {
+	const style = getComputedStyle(root);
 	const v = (name: string, fallback: string) => style.getPropertyValue(name).trim() || fallback;
 	return {
 		category: {
@@ -69,16 +71,18 @@ function readTheme(): TraceTheme {
 
 /**
  * Current trace palette. Re-reads the tokens whenever the resolved theme
- * changes (store or a direct `data-theme` attribute write).
+ * changes, without loading the live dashboard's theme preference store.
  */
 export function useTraceTheme(): TraceTheme {
-	const theme = useSystemTheme();
+	const root = useContext(TraceThemeRoot) ?? document.documentElement;
 	const [attrVersion, setAttrVersion] = useState(0);
 	useEffect(() => {
 		const observer = new MutationObserver(() => setAttrVersion(n => n + 1));
-		observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+		const options = { attributes: true, attributeFilter: ["data-theme", "style", "class"] };
+		observer.observe(document.documentElement, options);
+		if (root !== document.documentElement) observer.observe(root, options);
 		return () => observer.disconnect();
-	}, []);
-	// biome-ignore lint/correctness/useExhaustiveDependencies: theme/attrVersion are re-read triggers.
-	return useMemo(readTheme, [theme, attrVersion]);
+	}, [root]);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: attrVersion triggers a CSS token re-read.
+	return useMemo(() => readTheme(root), [root, attrVersion]);
 }

package/src/client/ui/SearchInput.tsx

@@ -4,17 +4,19 @@ export interface SearchInputProps {
 	value: string;
 	onChange: (value: string) => void;
 	placeholder?: string;
+	label?: string;
 	width?: number;
 }
 
 /** Text filter with a leading search glyph. */
-export function SearchInput({ value, onChange, placeholder = "Filter…", width }: SearchInputProps) {
+export function SearchInput({ value, onChange, placeholder = "Filter…", label = "Filter", width }: SearchInputProps) {
 	return (
 		<label className="search">
 			<Search size={14} />
 			<input
 				className="input"
 				type="search"
+				aria-label={label}
 				value={value}
 				placeholder={placeholder}
 				onChange={e => onChange(e.target.value)}