@rexvane/piweb 0.3.1

package/src/components/TrajectoryAnalyzer.module.css

@@ -0,0 +1,225 @@
+.root {
+	--traj-input: #8b949e;
+	--traj-user: var(--dsw-deepseek-450);
+	--traj-model: #a881d5;
+	--traj-model-wait: color-mix(in srgb, var(--traj-model) 48%, var(--dsw-bg-base));
+	--traj-tool: #d09a57;
+	--traj-context: #41b97a;
+	display: flex;
+	height: 100%;
+	min-height: 0;
+	flex-direction: column;
+	background: var(--dsw-bg-base);
+}
+
+.toolbar {
+	display: flex;
+	flex: none;
+	height: 36px;
+	align-items: center;
+	gap: 8px;
+	padding: 0 8px;
+	border-bottom: 0.5px solid var(--dsw-border-l2);
+	background: var(--dsw-bg-elevated);
+}
+
+.toolbarActions { display: flex; align-items: center; gap: 2px; }
+
+.toolbarButton {
+	display: inline-flex;
+	height: 20px;
+	align-items: center;
+	gap: 4px;
+	padding: 0 5px;
+	border-radius: 3px;
+	color: var(--dsw-label-tertiary);
+	font-size: 12px;
+}
+
+.toolbarButton:first-child { padding: 0 7px; }
+
+.durationIcon {
+	width: 12px;
+	height: 12px;
+	flex: none;
+	stroke: currentColor;
+	stroke-width: 1.25;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.foldIcon {
+	width: 14px;
+	flex: none;
+	color: var(--dsw-label-tertiary);
+	font-family: var(--font-mono);
+	font-size: 14px;
+	line-height: 14px;
+	text-align: center;
+}
+
+.toolbarButton:hover,
+.toolbarButton[aria-pressed="true"] { color: var(--dsw-label-primary); background: var(--dsw-hover); }
+
+.searchBox {
+	display: flex;
+	width: min(230px, 30vw);
+	height: 25px;
+	align-items: center;
+	gap: 5px;
+	margin-left: auto;
+	padding: 0 7px;
+	border: 0.5px solid var(--dsw-border-l3);
+	border-radius: 5px;
+	color: var(--dsw-label-caption);
+	background: var(--dsw-layer-2);
+}
+
+.searchBox:focus-within { border-color: var(--dsw-accent); }
+.searchBox input { width: 100%; min-width: 0; font-size: 12px; }
+
+.timeline {
+	display: grid;
+	grid-template-columns: 54px minmax(0, 1fr);
+	height: 54px;
+	flex: none;
+	border-bottom: 0.5px solid var(--dsw-border-l2);
+	background: var(--dsw-module-platform);
+	user-select: none;
+}
+
+.laneLabels {
+	position: relative;
+	border-right: 0.5px solid var(--dsw-border-l1);
+	color: var(--dsw-label-caption);
+	font-size: 10px;
+	line-height: 1;
+}
+
+.laneLabels span { position: absolute; right: 5px; height: 10px; }
+.laneLabels span:nth-child(1) { top: 8px; }
+.laneLabels span:nth-child(2) { top: 22px; }
+.laneLabels span:nth-child(3) { top: 36px; }
+
+.timelineTrack {
+	position: relative;
+	overflow: hidden;
+	background-image: linear-gradient(to right, transparent 24.9%, var(--dsw-border-l1) 25%, transparent 25.1%, transparent 49.9%, var(--dsw-border-l1) 50%, transparent 50.1%, transparent 74.9%, var(--dsw-border-l1) 75%, transparent 75.1%);
+}
+
+.timelineSpan {
+	position: absolute;
+	height: 9px;
+	min-width: 2px;
+	border-radius: 2px;
+	background: var(--traj-input);
+	opacity: 0.82;
+	transition: opacity 120ms var(--ds-ease-in-out), box-shadow 120ms var(--ds-ease-in-out);
+}
+
+.timelineSpan[data-kind="user"] { background: var(--traj-user); }
+.timelineSpan[data-kind="context"] { background: var(--traj-context); }
+.timelineSpan[data-kind="message"] { background: var(--traj-model); opacity: 1; }
+.timelineSpan[data-kind="tool"] { background: var(--traj-tool); opacity: 1; }
+.timelineSpan[data-error="true"] { background: var(--dsw-danger); }
+.timelineSpan[data-muted="true"] { opacity: 0.12; }
+.timelineSpan:hover { opacity: 1; }
+.timelineSpan[data-selected="true"] {
+	z-index: 2;
+	opacity: 1;
+	box-shadow: 0 0 0 1px var(--dsw-module-platform), 0 0 0 2px var(--dsw-accent);
+}
+
+.ledger { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
+
+.groupBody { display: flex; width: 100%; flex-direction: column; }
+
+.row {
+	display: grid;
+	grid-template-columns: 84px minmax(120px, 1fr) repeat(4, 64px);
+	align-items: center;
+	width: 100%;
+	height: 38px;
+	padding: 0 16px 0 8px;
+	gap: 10px;
+	border-bottom: 0.5px solid var(--dsw-border-l1);
+	background: var(--dsw-bg-base);
+	text-align: left;
+}
+
+.row:hover { background: var(--dsw-hover); }
+.row[data-selected="true"] { background: var(--dsw-hover); box-shadow: inset 3px 0 0 var(--dsw-accent); }
+.row[data-environment="true"] { background: var(--dsw-bg-elevated); }
+.row[data-environment="true"]:hover,
+.row[data-environment="true"][data-selected="true"] { background: var(--dsw-hover); }
+.metric { color: var(--dsw-label-tertiary); font-size: 11px; }
+
+.kindTag,
+.inspectorTag {
+	display: inline-flex;
+	width: max-content;
+	max-width: 100%;
+	height: 22px;
+	align-items: center;
+	padding: 0 6px;
+	overflow: hidden;
+	border-radius: 5px;
+	color: var(--dsw-label-secondary);
+	background: var(--dsw-module-platform);
+	font-family: var(--font-mono);
+	font-size: 10.5px;
+	font-weight: 700;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.row[data-kind="user"] .kindTag,
+.inspectorTag[data-kind="user"] { color: var(--dsw-accent); background: var(--dsw-accent-soft); }
+.row[data-kind="context"] .kindTag,
+.inspectorTag[data-kind="context"] { color: var(--traj-context); background: color-mix(in srgb, var(--traj-context) 14%, transparent); }
+.row[data-kind="message"] .kindTag,
+.inspectorTag[data-kind="message"] { color: var(--traj-model); background: color-mix(in srgb, var(--traj-model) 14%, transparent); }
+.row[data-kind="tool"] .kindTag,
+.inspectorTag[data-kind="tool"] { color: var(--traj-tool); background: color-mix(in srgb, var(--traj-tool) 14%, transparent); }
+.row[data-kind="compacted"] .kindTag,
+.inspectorTag[data-kind="compacted"] { color: var(--dsw-label-tertiary); }
+
+.rowText { min-width: 0; overflow: hidden; color: var(--dsw-label-primary); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
+.empty { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--dsw-label-caption); font-size: 13px; }
+
+.inspector { --traj-model: #a881d5; --traj-tool: #d09a57; display: flex; height: 100%; min-height: 0; flex-direction: column; background: var(--dsw-bg-base); }
+.inspectorHeader { display: flex; height: 56px; flex: none; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 0.5px solid var(--dsw-border-l2); }
+.inspectorTitle { min-width: 0; flex: 1; overflow: hidden; font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.closeButton { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 7px; color: var(--dsw-label-tertiary); }
+.closeButton:hover { color: var(--dsw-label-primary); background: var(--dsw-hover); }
+
+.inspectorTabs { display: flex; height: 42px; flex: none; align-items: flex-end; gap: 22px; padding: 0 14px; border-bottom: 0.5px solid var(--dsw-border-l2); }
+.inspectorTabs button { position: relative; height: 34px; color: var(--dsw-label-tertiary); font-size: 12.5px; }
+.inspectorTabs button[aria-selected="true"] { color: var(--dsw-accent); }
+.inspectorTabs button[aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: var(--dsw-accent); content: ""; }
+
+.inspectorBody { min-height: 0; flex: 1; overflow-y: auto; padding: 10px 0 24px; }
+.summaryList { margin: 0; padding: 0 14px 8px; }
+.summaryList > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); min-height: 30px; align-items: center; font-size: 12.5px; }
+.summaryList dt { color: var(--dsw-label-tertiary); }
+.summaryList dd { min-width: 0; margin: 0; overflow: hidden; color: var(--dsw-label-primary); text-overflow: ellipsis; white-space: nowrap; }
+.summaryList dd[data-error="true"] { color: var(--dsw-danger); }
+.monoValue { font-family: var(--font-mono); font-size: 11px; }
+
+.payloadSection h3 { margin: 0; padding: 8px 14px 5px; color: var(--dsw-label-secondary); font-size: 12.5px; font-weight: 650; }
+.payloadSection pre { margin: 0; padding: 8px 14px 14px; overflow-wrap: anywhere; color: var(--dsw-label-primary); font-family: var(--font-ui); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; }
+.payloadSection pre[data-mono="true"] { background: var(--dsw-hover); font-family: var(--font-mono); font-size: 11.5px; }
+
+@media (max-width: 980px) {
+	.row { grid-template-columns: 74px minmax(100px, 1fr) 52px 52px; }
+	.row .metric:nth-last-child(n + 3) { display: none; }
+}
+
+@media (max-width: 640px) {
+	.toolbar { padding-left: 46px; }
+	.toolbarButton { padding: 0 4px; font-size: 11px; }
+	.searchBox { width: 112px; }
+	.row { grid-template-columns: 70px minmax(0, 1fr) 48px; gap: 6px; padding: 0 8px; }
+	.row .metric { display: none; }
+	.row .metric:last-child { display: block; }
+}

package/src/components/TrajectoryView.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { IconCloseOutline14, IconSearchOutline16 } from "@/components/icons";
+import { useI18n } from "@/i18n";
+import type { TrajEntry, TrajTokens } from "@/lib/types";
+import styles from "./TrajectoryAnalyzer.module.css";
+
+type Lane = 0 | 1 | 2;
+type DetailTab = "summary" | "preview" | "raw" | "source";
+
+interface DisplayRow {
+	entry: TrajEntry;
+	index: number;
+	lane: Lane;
+	turn?: number;
+}
+
+const KIND_NAME: Record<TrajEntry["kind"], string> = {
+	system: "SYSTEM",
+	context: "CONTEXT",
+	user: "USER",
+	message: "ASSISTANT",
+	tool: "TOOL",
+	compacted: "COMPACT",
+};
+
+function fmtTok(value?: number): string {
+	if (value == null) return "—";
+	if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+	if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+	return String(value);
+}
+
+function fmtTime(ts: number): string {
+	return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+}
+
+function durationOf(entry: TrajEntry): number | undefined {
+	if (entry.timing?.durationMs != null) return entry.timing.durationMs;
+	const { ttftMs, decodeMs } = entry.timing ?? {};
+	if (ttftMs == null && decodeMs == null) return undefined;
+	return (ttftMs ?? 0) + (decodeMs ?? 0);
+}
+
+function fmtDur(ms?: number): string {
+	if (ms == null) return "—";
+	if (ms >= 60_000) return `${(ms / 60_000).toFixed(1)}m`;
+	if (ms >= 1_000) return `${(ms / 1_000).toFixed(ms >= 10_000 ? 0 : 1)}s`;
+	return `${Math.round(ms)}ms`;
+}
+
+function previewOf(entry: TrajEntry): string {
+	const value = entry.preview || entry.detail || entry.thinking || entry.title || KIND_NAME[entry.kind];
+	return value.replace(/\s+/g, " ").trim();
+}
+
+function sourceOf(entry: TrajEntry): string {
+	switch (entry.kind) {
+		case "system": return "Pi SDK · AgentSession.systemPrompt";
+		case "context": return `Pi ResourceLoader · ${entry.title || "context"}`;
+		case "user": return "Pi SessionManager · user message";
+		case "message": return "Pi AgentSession · model response";
+		case "tool": return `Pi AgentSession · tool execution${entry.toolName ? ` · ${entry.toolName}` : ""}`;
+		case "compacted": return "Pi SessionManager · compaction";
+	}
+}
+
+function deriveRows(entries: TrajEntry[]): DisplayRow[] {
+	let turn = 0;
+	return entries.map((entry, index) => {
+		if (entry.kind === "user") turn += 1;
+		const currentTurn = turn > 0 ? turn : undefined;
+		const lane: Lane = entry.kind === "tool" ? 2 : entry.kind === "message" ? 1 : 0;
+		return { entry, index, lane, ...(currentTurn ? { turn: currentTurn } : {}) };
+	});
+}
+
+function matchesQuery(row: DisplayRow, query: string): boolean {
+	if (!query) return true;
+	const entry = row.entry;
+	return [entry.kind, entry.title, entry.toolName, entry.toolCallId, entry.preview, entry.detail, entry.thinking, String(entry.seq), row.turn ? String(row.turn) : ""]
+		.filter(Boolean)
+		.join("\n")
+		.toLocaleLowerCase()
+		.includes(query);
+}
+
+function FoldIcon({ expanded }: { expanded: boolean }) {
+	return <span className={styles.foldIcon} aria-hidden>{expanded ? "⊟" : "⊞"}</span>;
+}
+
+function DurationIcon() {
+	return (
+		<svg className={styles.durationIcon} viewBox="0 0 16 16" fill="none" aria-hidden>
+			<circle cx="8" cy="8" r="5.25" />
+			<path d="M8 4.75V8l2.25 1.5" />
+		</svg>
+	);
+}
+
+function TrajectoryTimeline({ rows, actualDuration, matchedSeqs, selected, onSelect }: {
+	rows: DisplayRow[];
+	actualDuration: boolean;
+	matchedSeqs: Set<number> | null;
+	selected: TrajEntry | null;
+	onSelect: (entry: TrajEntry) => void;
+}) {
+	const { t } = useI18n();
+	const spans = useMemo(() => {
+		if (!rows.length) return [];
+		let startTs = Infinity;
+		let endTs = -Infinity;
+		for (const row of rows) {
+			startTs = Math.min(startTs, row.entry.ts);
+			endTs = Math.max(endTs, row.entry.ts + (durationOf(row.entry) ?? 0));
+		}
+		const domain = Math.max(endTs - startTs, 1);
+		return rows.map((row, index) => {
+			if (!actualDuration || endTs === startTs) {
+				return { row, left: (index / rows.length) * 100, width: Math.max(100 / rows.length - 0.12, 0.25) };
+			}
+			return {
+				row,
+				left: ((row.entry.ts - startTs) / domain) * 100,
+				width: Math.max(((durationOf(row.entry) ?? 0) / domain) * 100, 0.18),
+			};
+		});
+	}, [actualDuration, rows]);
+
+	return (
+		<div className={styles.timeline} aria-label={t.trajTimeline}>
+			<div className={styles.laneLabels} aria-hidden>
+				<span>{t.trajInput}</span><span>{t.trajModel}</span><span>{t.trajTools}</span>
+			</div>
+			<div className={styles.timelineTrack}>
+				{spans.map(({ row, left, width }) => {
+					const entry = row.entry;
+					const total = durationOf(entry);
+					const ttft = entry.timing?.ttftMs;
+					const timingStyle = row.lane === 1 && total && ttft != null
+						? { background: `linear-gradient(to right, var(--traj-model-wait) 0 ${(ttft / total) * 100}%, var(--traj-model) ${(ttft / total) * 100}% 100%)` }
+						: undefined;
+					return (
+						<button
+							type="button"
+							key={`${entry.seq}:${row.index}`}
+							className={styles.timelineSpan}
+							data-kind={entry.kind}
+							data-selected={selected?.seq === entry.seq || undefined}
+							data-muted={matchedSeqs && !matchedSeqs.has(entry.seq) ? "true" : undefined}
+							data-error={entry.isError || undefined}
+							style={{ left: `${left}%`, width: `${width}%`, top: 6 + row.lane * 14, ...timingStyle }}
+							title={`${KIND_NAME[entry.kind]} · ${fmtTime(entry.ts)} · ${fmtDur(total)}`}
+							onClick={() => onSelect({ ...entry, ...(row.turn ? { turn: row.turn } : {}) })}
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+export function TrajectoryView({ entries, selected, onSelect }: {
+	entries: TrajEntry[];
+	selected: TrajEntry | null;
+	onSelect: (entry: TrajEntry | null) => void;
+}) {
+	const { t } = useI18n();
+	const [actualDuration, setActualDuration] = useState(true);
+	const [callsCollapsed, setCallsCollapsed] = useState(false);
+	const [turnsCollapsed, setTurnsCollapsed] = useState(false);
+	const [query, setQuery] = useState("");
+	const rows = useMemo(() => deriveRows(entries), [entries]);
+	const normalizedQuery = query.trim().toLocaleLowerCase();
+	const matchedSeqs = useMemo(
+		() => normalizedQuery ? new Set(rows.filter((row) => matchesQuery(row, normalizedQuery)).map((row) => row.entry.seq)) : null,
+		[normalizedQuery, rows],
+	);
+	const visibleRows = useMemo(
+		() => rows.filter((row) => {
+			if (callsCollapsed && row.entry.kind === "tool") return false;
+			if (turnsCollapsed && !["system", "context", "user", "compacted"].includes(row.entry.kind)) return false;
+			return matchesQuery(row, normalizedQuery);
+		}).reverse(),
+		[callsCollapsed, normalizedQuery, rows, turnsCollapsed],
+	);
+
+	return (
+		<div className={styles.root}>
+			<div className={styles.toolbar} role="toolbar" aria-label={t.tabTrajectory}>
+				<div className={styles.toolbarActions}>
+					<button type="button" className={styles.toolbarButton} aria-pressed={actualDuration} onClick={() => setActualDuration((value) => !value)}>
+						<DurationIcon />Duration
+					</button>
+					<button type="button" className={styles.toolbarButton} aria-pressed={turnsCollapsed} onClick={() => setTurnsCollapsed((value) => !value)}>
+						<FoldIcon expanded={!turnsCollapsed} />Turns
+					</button>
+					<button type="button" className={styles.toolbarButton} aria-pressed={callsCollapsed} onClick={() => setCallsCollapsed((value) => !value)}>
+						<FoldIcon expanded={!callsCollapsed} />Calls
+					</button>
+				</div>
+				<label className={styles.searchBox}>
+					<IconSearchOutline16 size={13} />
+					<input type="search" value={query} onChange={(event) => setQuery(event.currentTarget.value)} placeholder={t.trajSearchPlaceholder} aria-label={t.trajSearchPlaceholder} />
+				</label>
+			</div>
+
+			<TrajectoryTimeline rows={rows} actualDuration={actualDuration} matchedSeqs={matchedSeqs} selected={selected} onSelect={onSelect} />
+
+			<div className={styles.ledger}>
+				{!entries.length ? <div className={styles.empty}>{t.trajEmpty}</div> : visibleRows.length === 0 ? <div className={styles.empty}>{t.trajNoMatch}</div> : (
+					<div className={styles.groupBody}>{visibleRows.map((row) => {
+								const entry = row.entry;
+								const tokens: TrajTokens = entry.tokens ?? {};
+								return (
+									<button
+										type="button"
+										key={`${entry.seq}:${row.index}`}
+										className={styles.row}
+										data-kind={entry.kind}
+										data-environment={entry.kind === "system" || entry.kind === "context" || undefined}
+										data-selected={selected?.seq === entry.seq || undefined}
+										onClick={() => onSelect({ ...entry, ...(row.turn ? { turn: row.turn } : {}) })}
+									>
+										<span className={styles.kindTag}>{entry.kind === "tool" && entry.toolName ? entry.toolName : KIND_NAME[entry.kind]}</span>
+										<span className={styles.rowText} title={previewOf(entry)}>{previewOf(entry) || KIND_NAME[entry.kind]}</span>
+										<span className={styles.metric}>{fmtTok(tokens.input)}</span>
+										<span className={styles.metric}>{fmtTok(tokens.output)}</span>
+										<span className={styles.metric}>{entry.thinking ? "on" : "—"}</span>
+										<span className={styles.metric}>{fmtDur(durationOf(entry))}</span>
+									</button>
+								);
+							})}</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export function TrajInspector({ entry, onClose }: { entry: TrajEntry; onClose: () => void }) {
+	const { t } = useI18n();
+	const [tab, setTab] = useState<DetailTab>("summary");
+	const kind = entry.toolName || KIND_NAME[entry.kind];
+	const position = entry.kind === "system" ? t.trajSystem : entry.turn ? `${t.trajTurn} ${entry.turn}` : t.trajSession;
+	const preview = entry.detail || entry.preview || entry.thinking || "";
+	const tabs: Array<{ id: DetailTab; label: string }> = [
+		{ id: "summary", label: t.trajSummary },
+		{ id: "preview", label: t.trajPreview },
+		{ id: "raw", label: t.trajRaw },
+		{ id: "source", label: t.trajSource },
+	];
+
+	return (
+		<div className={styles.inspector}>
+			<div className={styles.inspectorHeader}>
+				<span className={styles.inspectorTag} data-kind={entry.kind}>{kind}</span>
+				<span className={styles.inspectorTitle}>{position} · {entry.kind === "message" ? t.trajModel : kind}</span>
+				<button type="button" className={styles.closeButton} onClick={onClose} aria-label={t.close}><IconCloseOutline14 size={15} /></button>
+			</div>
+			<div className={styles.inspectorTabs} role="tablist">
+				{tabs.map((item) => <button key={item.id} type="button" role="tab" aria-selected={tab === item.id} onClick={() => setTab(item.id)}>{item.label}</button>)}
+			</div>
+			<div className={styles.inspectorBody}>
+				{entry.encodingLoss && <p role="status" style={{ margin: "0 0 14px", color: "var(--dsw-warning, #d5a13b)", fontSize: 13, lineHeight: 1.55 }}>{t.encodingLossWarning}</p>}
+				{tab === "summary" && <>
+					<dl className={styles.summaryList}>
+						<div><dt>{t.trajSource}</dt><dd>{sourceOf(entry)}</dd></div>
+						<div><dt>{t.trajStatus}</dt><dd data-error={entry.isError || undefined}>{entry.isError ? t.trajFailed : t.trajCompleted}</dd></div>
+						<div><dt>{t.duration}</dt><dd>{fmtDur(durationOf(entry))}</dd></div>
+						<div><dt>{t.trajStarted}</dt><dd>{fmtTime(entry.ts)}</dd></div>
+						{entry.tokens && <div><dt>{t.trajTokens}</dt><dd>↑ {fmtTok(entry.tokens.input)} · ↓ {fmtTok(entry.tokens.output)} · cache {fmtTok(entry.tokens.cacheRead)}</dd></div>}
+						{entry.toolCallId && <div><dt>Call ID</dt><dd className={styles.monoValue}>{entry.toolCallId}</dd></div>}
+						{entry.timing?.ttftMs != null && <div><dt>{t.ttft}</dt><dd>{fmtDur(entry.timing.ttftMs)}</dd></div>}
+						{entry.timing?.decodeMs != null && <div><dt>{t.decode}</dt><dd>{fmtDur(entry.timing.decodeMs)}</dd></div>}
+					</dl>
+					{preview && <InspectorPayload title={t.trajPreview} value={preview} />}
+				</>}
+				{tab === "preview" && <InspectorPayload title={entry.thinking ? t.trajThink : t.trajPreview} value={[entry.thinking, entry.detail || entry.preview].filter(Boolean).join("\n\n")} empty={t.trajNoContent} />}
+				{tab === "raw" && <InspectorPayload title="JSON" value={JSON.stringify(entry, null, 2)} mono />}
+				{tab === "source" && <InspectorPayload title={t.trajSource} value={`${sourceOf(entry)}\n\nseq: ${entry.seq}\ntimestamp: ${new Date(entry.ts).toISOString()}`} mono />}
+			</div>
+		</div>
+	);
+}
+
+function InspectorPayload({ title, value, empty, mono = false }: { title: string; value: string; empty?: string; mono?: boolean }) {
+	return <section className={styles.payloadSection}><h3>{title}</h3><pre data-mono={mono || undefined}>{value || empty || "—"}</pre></section>;
+}