proteum 2.1.1 → 2.1.3-1

package/client/dev/profiler/index.tsx

@@ -15,23 +15,26 @@ import type {
     TProfilerPanel,
     TProfilerSessionTrace,
 } from '@common/dev/profiler';
-import type { TRequestTrace, TTraceCall, TTraceSummaryValue } from '@common/dev/requestTrace';
+import type { TRequestTrace, TTraceCall, TTraceEventType, TTraceSummaryValue } from '@common/dev/requestTrace';
 
 import { profilerRuntime } from './runtime';
 
 const profilerStyles = `
 .proteum-profiler {
-    --profiler-bg: #000000;
-    --profiler-bg-strong: #000000;
-    --profiler-surface-hover: rgba(22, 33, 48, 0.32);
-    --profiler-line: rgba(155, 188, 214, 0.16);
-    --profiler-line-strong: rgba(155, 188, 214, 0.28);
-    --profiler-text: #e5f2ff;
-    --profiler-muted: rgba(213, 228, 242, 0.64);
-    --profiler-brand: #8fd9ff;
-    --profiler-ok: #7af4b4;
-    --profiler-warn: #ffd369;
-    --profiler-error: #ff9797;
+    --profiler-bg: #f3f5f8;
+    --profiler-bg-strong: #ffffff;
+    --profiler-bg-soft: #eef3f8;
+    --profiler-surface-hover: #eef4ff;
+    --profiler-surface-selected: #e1ecff;
+    --profiler-line: rgba(19, 32, 51, 0.1);
+    --profiler-line-strong: rgba(19, 32, 51, 0.18);
+    --profiler-text: #132033;
+    --profiler-muted: #627186;
+    --profiler-brand: #175fe6;
+    --profiler-ok: #15803d;
+    --profiler-warn: #b45309;
+    --profiler-error: #b91c1c;
+    --profiler-title-row-bg: #f1f3f5;
     position: fixed;
     inset-inline: 0;
     bottom: 0;
@@ -61,7 +64,7 @@ const profilerStyles = `
     min-height: 32px;
     padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
     border-top: 1px solid var(--profiler-line-strong);
-    background: #000000;
+    background: var(--profiler-bg-strong);
     backdrop-filter: none;
     box-shadow: none;
     overflow-x: auto;
@@ -135,7 +138,7 @@ const profilerStyles = `
     padding: 0 12px;
     border: 1px solid var(--profiler-line-strong);
     border-radius: 0;
-    background: #000000;
+    background: var(--profiler-bg-strong);
     backdrop-filter: none;
     color: var(--profiler-brand);
     box-shadow: none;
@@ -159,7 +162,7 @@ const profilerStyles = `
     border-left: none;
     border-right: none;
     border-radius: 0;
-    background: #000000;
+    background: var(--profiler-bg-strong);
     backdrop-filter: none;
     box-shadow: none;
     overflow: hidden;
@@ -173,6 +176,7 @@ const profilerStyles = `
     padding: 12px 14px 10px;
     border-bottom: 1px solid var(--profiler-line);
     min-width: 0;
+    background: var(--profiler-bg-strong);
 }
 
 .proteum-profiler__panelTabs {
@@ -225,7 +229,8 @@ const profilerStyles = `
     height: 28px;
     padding: 0 28px 0 10px;
     border: 1px solid var(--profiler-line);
-    background-color: #000000;
+    border-radius: 0;
+    background-color: var(--profiler-bg-strong);
     background-image:
         linear-gradient(45deg, transparent 50%, var(--profiler-muted) 50%),
         linear-gradient(135deg, var(--profiler-muted) 50%, transparent 50%);
@@ -240,19 +245,22 @@ const profilerStyles = `
 }
 
 .proteum-profiler__select option {
-    background: #000000;
+    background: var(--profiler-bg-strong);
     color: var(--profiler-text);
 }
 
 .proteum-profiler__panelBody {
     overflow: auto;
-    padding: 0 14px 16px;
+    height: 100%;
+    min-height: 0;
+    padding: 0;
+    background: transparent;
 }
 
 .proteum-profiler__metrics {
     display: grid;
     gap: 0;
-    padding-top: 10px;
+    padding: 10px 12px 0;
 }
 
 .proteum-profiler__metricRow {
@@ -283,8 +291,8 @@ const profilerStyles = `
 
 .proteum-profiler__section {
     display: grid;
-    gap: 8px;
-    padding: 12px 0 0;
+    gap: 0;
+    padding: 0;
     border-top: 1px solid var(--profiler-line);
 }
 
@@ -293,6 +301,8 @@ const profilerStyles = `
     align-items: center;
     justify-content: space-between;
     gap: 12px;
+    padding: 8px 10px;
+    background: var(--profiler-title-row-bg);
 }
 
 .proteum-profiler__actions {
@@ -320,25 +330,21 @@ const profilerStyles = `
     gap: 0;
 }
 
-.proteum-profiler__list > .proteum-profiler__row:first-child {
-    border-top: none;
-    padding-top: 2px;
-}
-
 .proteum-profiler__row {
     display: grid;
-    gap: 4px;
-    padding: 8px 0;
+    gap: 6px;
+    padding: 10px 12px;
     border-top: 1px solid var(--profiler-line);
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
 }
 
 .proteum-profiler__row--interactive {
     width: 100%;
     appearance: none;
     background: transparent;
-    border-inline: none;
-    border-bottom: none;
-    border-radius: 0;
+    border: none;
     text-align: left;
     color: inherit;
     cursor: pointer;
@@ -348,6 +354,10 @@ const profilerStyles = `
     background: var(--profiler-surface-hover);
 }
 
+.proteum-profiler__row--selected {
+    background: var(--profiler-surface-selected);
+}
+
 .proteum-profiler__rowHeader {
     display: flex;
     align-items: flex-start;
@@ -357,6 +367,47 @@ const profilerStyles = `
     line-height: 1.45;
 }
 
+.proteum-profiler__rowTitle {
+    min-width: 0;
+    word-break: break-word;
+}
+
+.proteum-profiler__rowMeta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-left: auto;
+    white-space: nowrap;
+}
+
+.proteum-profiler__statusBadge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 18px;
+    padding: 0 8px;
+    border: 1px solid currentColor;
+    color: var(--profiler-muted);
+    background: transparent;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.proteum-profiler__statusBadge--ok {
+    color: var(--profiler-ok);
+}
+
+.proteum-profiler__statusBadge--warn {
+    color: var(--profiler-warn);
+}
+
+.proteum-profiler__statusBadge--error {
+    color: var(--profiler-error);
+}
+
 .proteum-profiler__mono {
     font-family: inherit;
     font-size: 11px;
@@ -371,15 +422,37 @@ const profilerStyles = `
     margin: 0;
     white-space: pre-wrap;
     word-break: break-word;
-    padding-top: 8px;
+    padding: 10px 0 0;
+    border: none;
     border-top: 1px solid var(--profiler-line);
+    border-radius: 0;
+    background: transparent;
+}
+
+.proteum-profiler__jsonKey {
+    color: var(--profiler-brand);
+}
+
+.proteum-profiler__jsonString {
+    color: #0f766e;
+}
+
+.proteum-profiler__jsonNumber {
+    color: #b45309;
+}
+
+.proteum-profiler__jsonLiteral {
+    color: var(--profiler-error);
 }
 
 .proteum-profiler__detail {
     display: grid;
     gap: 10px;
-    padding: 10px 0 14px;
-    border-top: 1px dashed var(--profiler-line);
+    padding: 10px 0 0;
+    border: none;
+    border-top: 1px solid var(--profiler-line);
+    border-radius: 0;
+    background: transparent;
 }
 
 .proteum-profiler__detailLine {
@@ -423,11 +496,196 @@ const profilerStyles = `
 }
 
 .proteum-profiler__empty {
-    padding: 12px 0;
-    border-top: 1px dashed var(--profiler-line);
+    padding: 12px;
+    border-top: 1px solid var(--profiler-line);
+    color: var(--profiler-muted);
+}
+
+.proteum-profiler__requestWorkspace {
+    display: grid;
+    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 420px);
+    gap: 0;
+    align-items: stretch;
+    min-height: 100%;
+    height: 100%;
+}
+
+.proteum-profiler__splitView {
+    display: grid;
+    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 420px);
+    gap: 0;
+    align-items: stretch;
+    min-height: 100%;
+    height: 100%;
+}
+
+.proteum-profiler__splitView--stacked {
+    min-height: 0;
+    height: auto;
+}
+
+.proteum-profiler__splitColumn {
+    display: grid;
+    gap: 0;
+    min-width: 0;
+    align-content: start;
+}
+
+.proteum-profiler__requestGroups {
+    display: grid;
+    gap: 0;
+    min-width: 0;
+}
+
+.proteum-profiler__requestGroup {
+    display: grid;
+    gap: 0;
+}
+
+.proteum-profiler__requestGroupHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 10px;
+    background: var(--profiler-title-row-bg);
+}
+
+.proteum-profiler__requestGroupCount {
+    color: var(--profiler-muted);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.proteum-profiler__sidebar {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-self: stretch;
+    height: 100%;
+    min-height: 0;
+    padding: 0;
+    border: none;
+    border-left: 1px solid var(--profiler-line);
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+.proteum-profiler__sidebarScroller {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 0;
+    align-content: start;
+    height: 100%;
+    min-height: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+}
+
+.proteum-profiler__titleRow {
+    padding: 8px 10px;
+    background: var(--profiler-title-row-bg);
+}
+
+.proteum-profiler__sidebarHeader {
+    display: grid;
+    gap: 6px;
+    padding: 10px 12px 0;
+}
+
+.proteum-profiler__sidebarEyebrow,
+.proteum-profiler__sidebarSectionTitle {
+    color: var(--profiler-muted);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.proteum-profiler__sidebarTitle {
+    font-size: 13px;
+    line-height: 1.5;
+    word-break: break-word;
+}
+
+.proteum-profiler__sidebarSection {
+    display: grid;
+    gap: 6px;
+    padding: 10px 12px 0;
+    border-top: 1px solid var(--profiler-line);
+}
+
+.proteum-profiler__sidebarScroller > .proteum-profiler__metrics {
+    border-top: 1px solid var(--profiler-line);
+}
+
+.proteum-profiler__sidebarEmpty {
+    font-size: 12px;
     color: var(--profiler-muted);
 }
 
+.proteum-profiler__timelineChart {
+    display: grid;
+    gap: 0;
+}
+
+.proteum-profiler__timelineChartMeta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px 0;
+}
+
+.proteum-profiler__timelineChartCanvas {
+    position: relative;
+    padding: 8px 12px 12px;
+    border-top: 1px solid var(--profiler-line);
+}
+
+.proteum-profiler__timelineChartCanvas > * {
+    height: 100%;
+}
+
+.proteum-profiler__timelineChartCanvas canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.proteum-profiler__timelineChartCanvas .apexcharts-canvas,
+.proteum-profiler__timelineChartCanvas .apexcharts-svg {
+    background: transparent !important;
+}
+
+.proteum-profiler__traceEventRow {
+    --profiler-trace-depth: 0;
+    --profiler-trace-guide-opacity: 0;
+    --profiler-trace-indent: calc(var(--profiler-trace-depth) * 18px);
+}
+
+.proteum-profiler__traceEventRow .proteum-profiler__rowHeader,
+.proteum-profiler__traceEventRow .proteum-profiler__tags {
+    padding-inline-start: var(--profiler-trace-indent);
+}
+
+.proteum-profiler__traceEventRow .proteum-profiler__rowHeader {
+    position: relative;
+}
+
+.proteum-profiler__traceEventRow .proteum-profiler__rowHeader::before {
+    content: '';
+    position: absolute;
+    left: max(0px, calc(var(--profiler-trace-indent) - 8px));
+    top: 3px;
+    bottom: 3px;
+    width: 1px;
+    background: var(--profiler-line-strong);
+    opacity: var(--profiler-trace-guide-opacity);
+}
+
 @media (max-width: 900px) {
     .proteum-profiler__panel {
         height: 50vh;
@@ -459,6 +717,33 @@ const profilerStyles = `
     .proteum-profiler__select {
         min-width: 132px;
     }
+
+    .proteum-profiler__requestWorkspace {
+        grid-template-columns: 1fr;
+        min-height: 0;
+        height: auto;
+    }
+
+    .proteum-profiler__splitView {
+        grid-template-columns: 1fr;
+        min-height: 0;
+        height: auto;
+    }
+
+    .proteum-profiler__sidebar {
+        position: static;
+        height: auto;
+        min-height: 0;
+        border-left: none;
+        border-top: 1px solid var(--profiler-line);
+    }
+
+    .proteum-profiler__sidebarScroller {
+        height: auto;
+        max-height: none;
+        min-height: 0;
+    }
+
 }
 `;
 
@@ -473,20 +758,49 @@ type TSessionSummary = {
     statusLabel: string;
     totalMs?: number;
 };
+type TApiRequestItem = {
+    id: string;
+    groupLabel: string;
+    durationMs?: number;
+    errorMessage?: string;
+    finishedAt?: string;
+    label?: string;
+    method: string;
+    path: string;
+    requestData?: TTraceSummaryValue;
+    requestDataJson?: unknown;
+    result?: TTraceSummaryValue;
+    resultJson?: unknown;
+    startedAt: string;
+    statusCode?: number;
+    statusLabel?: string;
+    tags: string[];
+};
+type TWaterfallChartItem = {
+    barLabel: string;
+    color: string;
+    detailLines: string[];
+    endOffsetMs: number;
+    id: string;
+    startOffsetMs: number;
+    subtitle?: string;
+    title: string;
+};
 type TProfilerState = ReturnType<typeof profilerRuntime.getState>;
 
 const panelLabels: Record<TProfilerPanel, string> = {
     summary: 'Summary',
     timeline: 'Timeline',
     routing: 'Routing',
+    auth: 'Auth',
     controller: 'Controller',
     ssr: 'SSR',
     api: 'API',
+    errors: 'Errors',
     explain: 'Explain',
     doctor: 'Doctor',
     commands: 'Commands',
     cron: 'Cron',
-    errors: 'Errors',
 };
 
 const getSelectedSession = (sessions: TProfilerNavigationSession[], selectedSessionId?: string, currentSessionId?: string) =>
@@ -563,6 +877,52 @@ const formatSummaryJson = (value: TTraceSummaryValue | undefined) => {
     return JSON.stringify(toSummaryJsonValue(value), null, 2);
 };
 
+const formatApiPanelJson = (jsonValue: unknown, summaryValue: TTraceSummaryValue | undefined) =>
+    jsonValue !== undefined ? formatStructuredValue(jsonValue) : formatSummaryJson(summaryValue);
+
+const formatTraceEventDetailsJson = (details: Record<string, TTraceSummaryValue>) =>
+    JSON.stringify(
+        Object.fromEntries(Object.entries(details).map(([key, value]) => [key, toSummaryJsonValue(value)])),
+        null,
+        2,
+    );
+
+const renderHighlightedJson = (value: string) => {
+    const tokenPattern =
+        /"(?:\\u[0-9a-fA-F]{4}|\\[^u]|[^\\"])*"(?=\s*:)|"(?:\\u[0-9a-fA-F]{4}|\\[^u]|[^\\"])*"|\btrue\b|\bfalse\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g;
+    const parts: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = tokenPattern.exec(value))) {
+        const index = match.index;
+        const token = match[0];
+
+        if (index > lastIndex) parts.push(value.slice(lastIndex, index));
+
+        const trailing = value.slice(index + token.length);
+        const isKey = token.startsWith('"') && /^\s*:/.test(trailing);
+        const className = token.startsWith('"')
+            ? isKey
+                ? 'proteum-profiler__jsonKey'
+                : 'proteum-profiler__jsonString'
+            : token === 'true' || token === 'false' || token === 'null'
+              ? 'proteum-profiler__jsonLiteral'
+              : 'proteum-profiler__jsonNumber';
+
+        parts.push(
+            <span className={className} key={`json:${index}`}>
+                {token}
+            </span>,
+        );
+        lastIndex = index + token.length;
+    }
+
+    if (lastIndex < value.length) parts.push(value.slice(lastIndex));
+
+    return parts;
+};
+
 const formatSummaryLiteral = (value: TTraceSummaryValue | undefined, depth = 1): string => {
     if (value === undefined) return '';
     if (value === null) return 'null';
@@ -605,6 +965,26 @@ const formatApiReference = (method: string, path: string, requestData?: TTraceSu
     return `${getApiReferenceName(method, path, fallbackLabel)}(${truncate(args, 112)})`;
 };
 
+const formatProfilerRequestReference = ({
+    fallbackLabel,
+    method,
+    path,
+    requestData,
+}: {
+    fallbackLabel?: string;
+    method?: string;
+    path?: string;
+    requestData?: TTraceSummaryValue;
+}) => {
+    const safeMethod = method || '';
+    const safePath = path || '';
+
+    if (safePath.startsWith('/api/')) return formatApiReference(safeMethod, safePath, requestData, fallbackLabel);
+
+    const rawReference = `${safeMethod} ${safePath}`.trim();
+    return rawReference || fallbackLabel || 'request';
+};
+
 const getTraceRequestData = (trace: TRequestTrace | undefined) =>
     trace?.events.find((event) => event.type === 'request.start')?.details.data;
 
@@ -613,9 +993,59 @@ const getTraceResultData = (trace: TRequestTrace | undefined) =>
         .reverse()
         .find((event) => event.details.kind === 'json' && event.details.data !== undefined)?.details.data;
 
+const getRequestStatusText = (statusCode?: number, statusLabel?: string) =>
+    statusCode !== undefined ? String(statusCode) : statusLabel || 'pending';
+
+const getRequestStatusTone = (statusCode?: number, statusLabel?: string): 'ok' | 'warn' | 'error' => {
+    if (statusCode === undefined) return statusLabel === 'pending' ? 'warn' : 'ok';
+    if (statusCode >= 500) return 'error';
+    if (statusCode >= 400) return 'error';
+    if (statusCode >= 300) return 'warn';
+    return 'ok';
+};
+
 const findTraceEvents = (trace: TRequestTrace | undefined, eventTypes: string[]) =>
     trace?.events.filter((event) => eventTypes.includes(event.type)) || [];
 
+const traceEventDepths: Record<TTraceEventType, number> = {
+    'request.start': 0,
+    'request.user': 1,
+    'auth.decode': 1,
+    'auth.route': 1,
+    'auth.check.start': 2,
+    'auth.check.rule': 3,
+    'auth.check.result': 2,
+    'auth.session': 1,
+    'resolve.start': 1,
+    'resolve.controller-route': 2,
+    'resolve.routes-evaluated': 1,
+    'resolve.route-skip': 2,
+    'resolve.route-match': 2,
+    'resolve.not-found': 1,
+    'controller.start': 2,
+    'controller.result': 2,
+    'setup.options': 3,
+    'context.create': 3,
+    'page.data': 3,
+    'ssr.payload': 3,
+    'render.start': 2,
+    'render.end': 2,
+    'response.send': 1,
+    'request.finish': 0,
+    error: 0,
+};
+
+const getTraceEventDepth = (event: TRequestTrace['events'][number]) => traceEventDepths[event.type] ?? 0;
+
+const authEventTypes: TTraceEventType[] = [
+    'auth.decode',
+    'auth.route',
+    'auth.check.start',
+    'auth.check.rule',
+    'auth.check.result',
+    'auth.session',
+];
+
 const getSummary = (session: TProfilerNavigationSession): TSessionSummary => {
     const primaryTrace =
         session.traces.find((trace) => trace.kind === 'initial-root' && trace.trace) ||
@@ -665,90 +1095,370 @@ const SummaryRow = ({ label, value }: { label: string; value: React.ReactNode })
     </div>
 );
 
-const ApiRequestEntry = ({
-    durationMs,
-    errorMessage,
-    finishedAt,
-    label,
-    method,
-    path,
-    requestData,
-    result,
-    startedAt,
-    statusCode,
-    statusLabel,
-    tags,
-}: {
-    durationMs?: number;
-    errorMessage?: string;
-    finishedAt?: string;
-    label?: string;
-    method: string;
-    path: string;
-    requestData?: TTraceSummaryValue;
-    result?: TTraceSummaryValue;
-    startedAt: string;
-    statusCode?: number;
-    statusLabel?: string;
-    tags: string[];
-}) => {
-    const [isOpen, setOpen] = React.useState(false);
-    const statusText = statusCode !== undefined ? String(statusCode) : statusLabel || 'pending';
+const JsonCodeBlock = ({ value }: { value: string }) => (
+    <pre className="proteum-profiler__mono proteum-profiler__pre">{renderHighlightedJson(value)}</pre>
+);
 
-    return (
-        <>
-            <button className="proteum-profiler__row proteum-profiler__row--interactive" onClick={() => setOpen((current) => !current)} type="button">
-                <div className="proteum-profiler__rowHeader">
-                    <strong>{formatApiReference(method, path, requestData, label)}</strong>
-                    <span className="proteum-profiler__mono proteum-profiler__muted">
-                        {formatDuration(durationMs)} | {statusText}
-                    </span>
-                </div>
-                {method || path ? <div className="proteum-profiler__mono proteum-profiler__muted">{method} {path}</div> : null}
-                <div className="proteum-profiler__tags">
-                    {tags.map((tag) => (
-                        <span className="proteum-profiler__tag" key={`${label || method}:${path}:${tag}`}>
-                            {tag}
-                        </span>
-                    ))}
-                    {errorMessage ? <span className="proteum-profiler__tag">{truncate(errorMessage, 72)}</span> : null}
-                </div>
-            </button>
-
-            {isOpen ? (
-                <div className="proteum-profiler__detail">
-                    <div className="proteum-profiler__detailLine">
-                        <div className="proteum-profiler__detailLabel">Performance</div>
-                        <div className="proteum-profiler__mono">
-                            duration={formatDuration(durationMs)} | status={statusText} | started={formatTimestamp(startedAt)}
-                            {finishedAt ? ` | finished=${formatTimestamp(finishedAt)}` : ''}
+const formatTraceCallDisplay = (call: TTraceCall) => {
+    if (call.path.startsWith('/api/')) {
+        return formatProfilerRequestReference({
+            fallbackLabel: call.label,
+            method: call.method,
+            path: call.path,
+            requestData: call.requestData,
+        });
+    }
+
+    const rawReference = `${call.method} ${call.path}`.trim();
+    if (call.label && rawReference) return `${call.label} (${rawReference})`;
+    return call.label || rawReference || 'request';
+};
+
+const formatSessionTraceDisplay = (traceItem: TProfilerSessionTrace) => {
+    if (traceItem.path.startsWith('/api/')) {
+        return formatProfilerRequestReference({
+            fallbackLabel: traceItem.label,
+            method: traceItem.method,
+            path: traceItem.path,
+            requestData: getTraceRequestData(traceItem.trace),
+        });
+    }
+
+    return traceItem.label || formatProfilerRequestReference({ method: traceItem.method, path: traceItem.path });
+};
+
+const ApiRequestListEntry = ({
+    isSelected,
+    item,
+    onSelect,
+}: {
+    isSelected: boolean;
+    item: TApiRequestItem;
+    onSelect: () => void;
+}) => {
+    const statusText = getRequestStatusText(item.statusCode, item.statusLabel);
+    const statusTone = getRequestStatusTone(item.statusCode, item.statusLabel);
+
+    return (
+        <button
+            aria-pressed={isSelected}
+            className={`proteum-profiler__row proteum-profiler__row--interactive ${isSelected ? 'proteum-profiler__row--selected' : ''}`}
+            onClick={onSelect}
+            type="button"
+        >
+            <div className="proteum-profiler__rowHeader">
+                <strong className="proteum-profiler__rowTitle">
+                    {formatApiReference(item.method, item.path, item.requestData, item.label)}
+                </strong>
+                <span className="proteum-profiler__rowMeta">
+                    <span className="proteum-profiler__mono proteum-profiler__muted">{formatDuration(item.durationMs)}</span>
+                    <span className={`proteum-profiler__statusBadge proteum-profiler__statusBadge--${statusTone}`}>{statusText}</span>
+                </span>
+            </div>
+        </button>
+    );
+};
+
+const ApiRequestSidebar = ({ item }: { item?: TApiRequestItem }) => {
+    if (!item) {
+        return (
+            <aside className="proteum-profiler__sidebar">
+                <div className="proteum-profiler__sidebarScroller">
+                    <div className="proteum-profiler__sidebarHeader">
+                        <div className="proteum-profiler__sidebarEyebrow">Request details</div>
+                        <div className="proteum-profiler__sidebarEmpty">
+                            Select a request to inspect its payload, result, and timing.
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        );
+    }
+
+    const statusText = getRequestStatusText(item.statusCode, item.statusLabel);
+
+    return (
+        <aside className="proteum-profiler__sidebar">
+            <div className="proteum-profiler__sidebarScroller">
+                <div className="proteum-profiler__sidebarHeader">
+                    <div className="proteum-profiler__sidebarEyebrow">{item.groupLabel}</div>
+                    <div className="proteum-profiler__sidebarTitle">
+                        <strong>{formatApiReference(item.method, item.path, item.requestData, item.label)}</strong>
+                    </div>
+                    <div className="proteum-profiler__mono proteum-profiler__muted">
+                        {formatProfilerRequestReference({
+                            fallbackLabel: item.label,
+                            method: item.method,
+                            path: item.path,
+                            requestData: item.requestData,
+                        })}
+                    </div>
+                </div>
+
+                <div className="proteum-profiler__metrics">
+                    <SummaryRow label="Status" value={statusText} />
+                    <SummaryRow label="Duration" value={formatDuration(item.durationMs)} />
+                    <SummaryRow label="Started" value={formatTimestamp(item.startedAt)} />
+                    <SummaryRow label="Finished" value={item.finishedAt ? formatTimestamp(item.finishedAt) : 'pending'} />
+                    <SummaryRow
+                        label="Endpoint"
+                        value={formatProfilerRequestReference({
+                            fallbackLabel: item.label,
+                            method: item.method,
+                            path: item.path,
+                            requestData: item.requestData,
+                        })}
+                    />
+                </div>
+
+                {item.tags.length > 0 ? (
+                    <div className="proteum-profiler__sidebarSection">
+                        <div className="proteum-profiler__sidebarSectionTitle">Tags</div>
+                        <div className="proteum-profiler__tags">
+                            {item.tags.map((tag) => (
+                                <span className="proteum-profiler__tag" key={`${item.id}:detail:${tag}`}>
+                                    {tag}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                ) : null}
+
+                <div className="proteum-profiler__sidebarSection">
+                    <div className="proteum-profiler__sidebarSectionTitle">Arguments</div>
+                    <JsonCodeBlock value={formatApiPanelJson(item.requestDataJson, item.requestData)} />
+                </div>
+
+                <div className="proteum-profiler__sidebarSection">
+                    <div className="proteum-profiler__sidebarSectionTitle">Result</div>
+                    <JsonCodeBlock value={formatApiPanelJson(item.resultJson, item.result)} />
+                </div>
+
+                {item.errorMessage ? (
+                    <div className="proteum-profiler__sidebarSection">
+                        <div className="proteum-profiler__sidebarSectionTitle">Error</div>
+                        <div className="proteum-profiler__mono">{item.errorMessage}</div>
+                    </div>
+                ) : null}
+            </div>
+        </aside>
+    );
+};
+
+const ApiPanel = ({ session }: { session: TProfilerNavigationSession }) => {
+    const syncItems: TApiRequestItem[] = session.traces
+        .flatMap((trace) => trace.trace?.calls.filter((call) => call.origin !== 'client-async') || [])
+        .map((call: TTraceCall) => ({
+            id: call.id,
+            groupLabel: 'Synchronous call',
+            durationMs: call.durationMs,
+            errorMessage: call.errorMessage,
+            finishedAt: call.finishedAt,
+            label: call.label,
+            method: call.method,
+            path: call.path,
+            requestData: call.requestData,
+            requestDataJson: call.requestDataJson,
+            result: call.result,
+            resultJson: call.resultJson,
+            startedAt: call.startedAt,
+            statusCode: call.statusCode,
+            tags: [
+                call.origin,
+                ...(call.fetcherId ? [`fetcher:${call.fetcherId}`] : []),
+                ...call.requestDataKeys.map((key) => `arg:${key}`),
+                ...call.resultKeys.map((key) => `res:${key}`),
+            ],
+        }));
+    const asyncItems: TApiRequestItem[] = session.traces
+        .filter((trace) => trace.kind === 'async')
+        .map((trace) => ({
+            id: trace.id,
+            groupLabel: 'Async request',
+            durationMs: trace.durationMs,
+            errorMessage: trace.errorMessage || trace.trace?.errorMessage,
+            finishedAt: trace.finishedAt,
+            label: trace.label,
+            method: trace.method,
+            path: trace.path,
+            requestData: getTraceRequestData(trace.trace),
+            requestDataJson: trace.trace?.requestDataJson,
+            result: getTraceResultData(trace.trace),
+            resultJson: trace.trace?.resultJson,
+            startedAt: trace.startedAt,
+            statusCode: trace.trace?.statusCode,
+            statusLabel: trace.status,
+            tags: [trace.status, ...(trace.requestId ? [`request:${trace.requestId}`] : [])],
+        }));
+    const requestItems = [...syncItems, ...asyncItems];
+    const [selectedRequestId, setSelectedRequestId] = React.useState<string | undefined>(() => requestItems[0]?.id);
+
+    React.useEffect(() => {
+        if (requestItems.some((item) => item.id === selectedRequestId)) return;
+        setSelectedRequestId(requestItems[0]?.id);
+    }, [requestItems, selectedRequestId]);
+
+    const waterfallItems = buildApiWaterfallItems(requestItems);
+    const selectedItem = requestItems.find((item) => item.id === selectedRequestId) || requestItems[0];
+
+    return (
+        <div className="proteum-profiler__requestWorkspace">
+            <div className="proteum-profiler__splitColumn">
+                <WaterfallChart
+                    emptyLabel="No API requests were captured for this session."
+                    itemLabel="request"
+                    items={waterfallItems}
+                    onSelect={setSelectedRequestId}
+                />
+
+                <div className="proteum-profiler__requestGroups">
+                    <div className="proteum-profiler__requestGroup">
+                        <div className="proteum-profiler__requestGroupHeader">
+                            <div className="proteum-profiler__sectionTitle">Synchronous calls</div>
+                            <div className="proteum-profiler__requestGroupCount">
+                                {syncItems.length} item{syncItems.length === 1 ? '' : 's'}
+                            </div>
+                        </div>
+
+                        {syncItems.length === 0 ? (
+                            <div className="proteum-profiler__empty">No synchronous SSR or batched API calls captured.</div>
+                        ) : (
+                            <div className="proteum-profiler__list">
+                                {syncItems.map((item) => (
+                                    <ApiRequestListEntry
+                                        isSelected={item.id === selectedItem?.id}
+                                        item={item}
+                                        key={item.id}
+                                        onSelect={() => setSelectedRequestId(item.id)}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="proteum-profiler__requestGroup">
+                        <div className="proteum-profiler__requestGroupHeader">
+                            <div className="proteum-profiler__sectionTitle">Async requests</div>
+                            <div className="proteum-profiler__requestGroupCount">
+                                {asyncItems.length} item{asyncItems.length === 1 ? '' : 's'}
+                            </div>
                         </div>
+
+                        {asyncItems.length === 0 ? (
+                            <div className="proteum-profiler__empty">No async API calls captured.</div>
+                        ) : (
+                            <div className="proteum-profiler__list">
+                                {asyncItems.map((item) => (
+                                    <ApiRequestListEntry
+                                        isSelected={item.id === selectedItem?.id}
+                                        item={item}
+                                        key={item.id}
+                                        onSelect={() => setSelectedRequestId(item.id)}
+                                    />
+                                ))}
+                            </div>
+                        )}
                     </div>
-                    <div className="proteum-profiler__detailLine">
-                        <div className="proteum-profiler__detailLabel">Arguments</div>
-                        <pre className="proteum-profiler__mono proteum-profiler__pre">{formatSummaryJson(requestData)}</pre>
+                </div>
+            </div>
+
+            <ApiRequestSidebar item={selectedItem} />
+        </div>
+    );
+};
+
+const getTraceEventKey = (traceId: string, event: TRequestTrace['events'][number]) => `${traceId}:${event.index}`;
+
+const TraceEventSidebar = ({
+    event,
+    label,
+    trace,
+}: {
+    event?: TRequestTrace['events'][number];
+    label: string;
+    trace?: TRequestTrace;
+}) => {
+    const detailEntries = Object.entries(event?.details || {});
+
+    if (!event) {
+        return (
+            <aside className="proteum-profiler__sidebar">
+                <div className="proteum-profiler__sidebarScroller">
+                    <div className="proteum-profiler__sidebarHeader">
+                        <div className="proteum-profiler__sidebarEyebrow">{label}</div>
+                        <div className="proteum-profiler__sidebarEmpty">Select an event to inspect its timing and payload.</div>
                     </div>
-                    <div className="proteum-profiler__detailLine">
-                        <div className="proteum-profiler__detailLabel">Result</div>
-                        <pre className="proteum-profiler__mono proteum-profiler__pre">{formatSummaryJson(result)}</pre>
+                </div>
+            </aside>
+        );
+    }
+
+    return (
+        <aside className="proteum-profiler__sidebar">
+            <div className="proteum-profiler__sidebarScroller">
+                <div className="proteum-profiler__sidebarHeader">
+                    <div className="proteum-profiler__sidebarEyebrow">{label}</div>
+                    <div className="proteum-profiler__sidebarTitle">
+                        <strong>{event.type}</strong>
                     </div>
-                    {errorMessage ? (
-                        <div className="proteum-profiler__detailLine">
-                            <div className="proteum-profiler__detailLabel">Error</div>
-                            <div className="proteum-profiler__mono">{errorMessage}</div>
+                    {trace ? (
+                        <div className="proteum-profiler__mono proteum-profiler__muted">
+                            {formatProfilerRequestReference({
+                                method: trace.method,
+                                path: trace.path,
+                                requestData: getTraceRequestData(trace),
+                            })}
                         </div>
                     ) : null}
                 </div>
-            ) : null}
-        </>
+
+                <div className="proteum-profiler__metrics">
+                    <SummaryRow label="Elapsed" value={formatDuration(event.elapsedMs)} />
+                    <SummaryRow label="Captured" value={formatTimestamp(event.at)} />
+                    <SummaryRow label="Trace" value={trace?.id || 'n/a'} />
+                </div>
+
+                {detailEntries.length > 0 ? (
+                    <div className="proteum-profiler__sidebarSection">
+                        <div className="proteum-profiler__sidebarSectionTitle">Summary</div>
+                        <div>
+                            {detailEntries.map(([key, value]) => (
+                                <SummaryRow
+                                    key={`${trace?.id || 'trace'}:${event.index}:detail:${key}`}
+                                    label={key}
+                                    value={<span className="proteum-profiler__mono">{truncate(renderSummaryValue(value), 120)}</span>}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                ) : null}
+
+                <div className="proteum-profiler__sidebarSection">
+                    <div className="proteum-profiler__sidebarSectionTitle">Raw JSON</div>
+                    <JsonCodeBlock value={formatTraceEventDetailsJson(event.details)} />
+                </div>
+            </div>
+        </aside>
     );
 };
 
-const TraceRows = ({ trace }: { trace: TRequestTrace }) => (
+const TraceRows = ({
+    onSelect,
+    selectedEventKey,
+    trace,
+}: {
+    onSelect: (selectionKey: string) => void;
+    selectedEventKey?: string;
+    trace: TRequestTrace;
+}) => (
     <div className="proteum-profiler__section">
         <div className="proteum-profiler__sectionHeader">
             <div className="proteum-profiler__sectionTitle">
-                {trace.method} {trace.path}
+                {formatProfilerRequestReference({
+                    method: trace.method,
+                    path: trace.path,
+                    requestData: getTraceRequestData(trace),
+                })}
             </div>
             <div className="proteum-profiler__mono proteum-profiler__muted">{trace.id}</div>
         </div>
@@ -758,9 +1468,7 @@ const TraceRows = ({ trace }: { trace: TRequestTrace }) => (
                 {trace.calls.map((call) => (
                     <div className="proteum-profiler__row" key={call.id}>
                         <div className="proteum-profiler__rowHeader">
-                            <strong>
-                                {call.label} {call.method ? `(${call.method} ${call.path})` : ''}
-                            </strong>
+                            <strong>{formatTraceCallDisplay(call)}</strong>
                             <span className="proteum-profiler__mono proteum-profiler__muted">
                                 {formatDuration(call.durationMs)}
                                 {call.statusCode !== undefined ? ` | ${call.statusCode}` : ''}
@@ -787,28 +1495,578 @@ const TraceRows = ({ trace }: { trace: TRequestTrace }) => (
         )}
 
         <div className="proteum-profiler__list">
-            {trace.events.map((event) => (
-                <div className="proteum-profiler__row" key={`${trace.id}:${event.index}`}>
-                    <div className="proteum-profiler__rowHeader">
-                        <strong>{event.type}</strong>
-                        <span className="proteum-profiler__mono proteum-profiler__muted">{formatDuration(event.elapsedMs)}</span>
+            {trace.events.map((event) => {
+                const selectionKey = getTraceEventKey(trace.id, event);
+
+                return (
+                    <TraceEventEntry
+                        event={event}
+                        isSelected={selectionKey === selectedEventKey}
+                        key={selectionKey}
+                        onSelect={() => onSelect(selectionKey)}
+                        traceId={trace.id}
+                    />
+                );
+            })}
+        </div>
+    </div>
+);
+
+const AuthTraceSection = ({
+    authEvents,
+    label,
+    onSelect,
+    selectedEventKey,
+    trace,
+}: {
+    authEvents: TRequestTrace['events'];
+    label: string;
+    onSelect: (selectionKey: string) => void;
+    selectedEventKey?: string;
+    trace: TRequestTrace;
+}) => (
+    <div className="proteum-profiler__section">
+        <div className="proteum-profiler__sectionHeader">
+            <div>
+                <div className="proteum-profiler__sectionTitle">{label}</div>
+                <div className="proteum-profiler__mono proteum-profiler__muted">
+                    {formatProfilerRequestReference({
+                        method: trace.method,
+                        path: trace.path,
+                        requestData: getTraceRequestData(trace),
+                    })}
+                </div>
+            </div>
+            <div className="proteum-profiler__actions">
+                <span className="proteum-profiler__tag">capture:{trace.capture}</span>
+                <span className="proteum-profiler__tag">events:{authEvents.length}</span>
+                {trace.statusCode !== undefined ? <span className="proteum-profiler__tag">status:{trace.statusCode}</span> : null}
+            </div>
+        </div>
+
+        <div className="proteum-profiler__list">
+            {authEvents.map((event) => {
+                const selectionKey = getTraceEventKey(trace.id, event);
+
+                return (
+                    <TraceEventEntry
+                        event={event}
+                        isSelected={selectionKey === selectedEventKey}
+                        key={selectionKey}
+                        onSelect={() => onSelect(selectionKey)}
+                        traceId={trace.id}
+                    />
+                );
+            })}
+        </div>
+    </div>
+);
+
+const TraceEventEntry = ({
+    event,
+    isSelected,
+    onSelect,
+    traceId,
+}: {
+    event: TRequestTrace['events'][number];
+    isSelected: boolean;
+    onSelect: () => void;
+    traceId: string;
+}) => {
+    const depth = getTraceEventDepth(event);
+
+    return (
+        <button
+            aria-pressed={isSelected}
+            className={`proteum-profiler__row proteum-profiler__row--interactive proteum-profiler__traceEventRow ${isSelected ? 'proteum-profiler__row--selected' : ''}`}
+            onClick={onSelect}
+            style={
+                {
+                    '--profiler-trace-depth': depth,
+                    '--profiler-trace-guide-opacity': depth > 0 ? 1 : 0,
+                } as React.CSSProperties
+            }
+            type="button"
+        >
+            <div className="proteum-profiler__rowHeader">
+                <strong>{event.type}</strong>
+                <span className="proteum-profiler__mono proteum-profiler__muted">{formatDuration(event.elapsedMs)}</span>
+            </div>
+            <div className="proteum-profiler__tags">
+                {Object.entries(event.details).map(([key, value]) => (
+                    <span className="proteum-profiler__tag" key={`${traceId}:${event.index}:${key}`}>
+                        {key}:{truncate(renderSummaryValue(value), 72)}
+                    </span>
+                ))}
+            </div>
+        </button>
+    );
+};
+
+type TTraceEventInspectorSelection = {
+    event: TRequestTrace['events'][number];
+    key: string;
+    label: string;
+    trace: TRequestTrace;
+};
+
+const readDateMs = (value?: string) => {
+    if (!value) return undefined;
+    const ms = new Date(value).valueOf();
+    return Number.isFinite(ms) ? ms : undefined;
+};
+
+const getTimelineDurationColor = (durationMs?: number) => {
+    if (durationMs === undefined) return '#93c5fd';
+    if (durationMs >= 800) return '#ef4444';
+    if (durationMs >= 450) return '#f97316';
+    if (durationMs >= 220) return '#f59e0b';
+    if (durationMs >= 100) return '#3b82f6';
+    return '#22c55e';
+};
+
+const escapeHtml = (value: string) =>
+    value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+
+const timelineWaterfallMinDurationMs = 6;
+const waterfallBarHeight = 15;
+const waterfallRowGap = 1;
+const waterfallRowHeight = waterfallBarHeight + waterfallRowGap;
+
+const buildWaterfallEndMs = ({ durationMs, fallbackEndMs, finishedAt, startMs }: {
+    durationMs?: number;
+    fallbackEndMs?: number;
+    finishedAt?: string;
+    startMs: number;
+}) => {
+    const finishedMs = readDateMs(finishedAt);
+    const durationEndMs = durationMs !== undefined ? startMs + Math.max(durationMs, 1) : undefined;
+    return Math.max(startMs + 1, fallbackEndMs ?? finishedMs ?? durationEndMs ?? startMs + 1);
+};
+
+const buildTimelineWaterfallItems = (session: TProfilerNavigationSession): TWaterfallChartItem[] => {
+    const sessionStartMs = readDateMs(session.startedAt) ?? 0;
+    const rawItems = session.traces.flatMap((traceItem) => {
+        const trace = traceItem.trace;
+        if (!trace) return [];
+
+        const traceStartMs = readDateMs(trace.startedAt) ?? sessionStartMs;
+        const traceFinishedMs = readDateMs(trace.finishedAt) ?? (trace.durationMs !== undefined ? traceStartMs + trace.durationMs : undefined);
+        const traceLabel = formatSessionTraceDisplay(traceItem);
+
+        return trace.events.map((event, index) => {
+            const nextEvent = trace.events[index + 1];
+            const startMs = readDateMs(event.at) ?? traceStartMs + event.elapsedMs;
+            const nextStartMs = nextEvent ? readDateMs(nextEvent.at) ?? traceStartMs + nextEvent.elapsedMs : undefined;
+            const endMs = buildWaterfallEndMs({
+                fallbackEndMs: nextStartMs ?? traceFinishedMs,
+                startMs,
+            });
+
+            return {
+                durationMs: Math.max(1, endMs - startMs),
+                endMs,
+                event,
+                startMs,
+                trace,
+                traceLabel,
+            };
+        });
+    });
+
+    const sortedItems = [...rawItems].sort((left, right) => left.startMs - right.startMs || left.event.index - right.event.index);
+    const chartStartMs = sortedItems.length > 0 ? Math.min(...sortedItems.map((item) => item.startMs)) : 0;
+
+    return sortedItems
+        .filter((item) => item.durationMs >= timelineWaterfallMinDurationMs)
+        .map((item) => {
+            const startOffsetMs = item.startMs - chartStartMs;
+            const endOffsetMs = item.endMs - chartStartMs;
+
+            return {
+                barLabel: truncate(`${item.event.type} | ${item.traceLabel}`, 84),
+                color: getTimelineDurationColor(item.durationMs),
+                detailLines: [
+                    `Start: +${Math.round(startOffsetMs)} ms`,
+                    `End: +${Math.round(endOffsetMs)} ms`,
+                    `Span: ${formatDuration(item.durationMs)}`,
+                ],
+                endOffsetMs,
+                id: getTraceEventKey(item.trace.id, item.event),
+                startOffsetMs,
+                subtitle: item.traceLabel,
+                title: item.event.type,
+            };
+        });
+};
+
+const buildApiWaterfallItems = (requestItems: TApiRequestItem[]): TWaterfallChartItem[] => {
+    const rawItems = requestItems.map((item) => {
+        const startMs = readDateMs(item.startedAt) ?? 0;
+        const endMs = buildWaterfallEndMs({
+            durationMs: item.durationMs,
+            finishedAt: item.finishedAt,
+            startMs,
+        });
+        const statusText = getRequestStatusText(item.statusCode, item.statusLabel);
+        const reference = formatApiReference(item.method, item.path, item.requestData, item.label);
+
+        return {
+            endMs,
+            item,
+            reference,
+            startMs,
+            statusText,
+        };
+    });
+
+    const sortedItems = [...rawItems].sort((left, right) => left.startMs - right.startMs || left.reference.localeCompare(right.reference));
+    const chartStartMs = sortedItems.length > 0 ? Math.min(...sortedItems.map((item) => item.startMs)) : 0;
+
+    return sortedItems.map(({ endMs, item, reference, startMs, statusText }) => {
+        const startOffsetMs = startMs - chartStartMs;
+        const endOffsetMs = endMs - chartStartMs;
+
+        return {
+            barLabel: truncate(reference, 84),
+            color: getTimelineDurationColor(item.durationMs),
+            detailLines: [
+                `Status: ${statusText}`,
+                `Duration: ${formatDuration(item.durationMs)}`,
+                `Start: +${Math.round(startOffsetMs)} ms`,
+                `End: +${Math.round(endOffsetMs)} ms`,
+            ],
+            endOffsetMs,
+            id: item.id,
+            startOffsetMs,
+            subtitle: item.groupLabel,
+            title: reference,
+        };
+    });
+};
+
+const WaterfallChart = ({
+    emptyLabel,
+    itemLabel,
+    items,
+    onSelect,
+}: {
+    emptyLabel: string;
+    itemLabel: string;
+    items: TWaterfallChartItem[];
+    onSelect?: (itemId: string) => void;
+}) => {
+    const [ApexChartComponent, setApexChartComponent] = React.useState<unknown>(null);
+
+    React.useEffect(() => {
+        let isDisposed = false;
+
+        void import('react-apexcharts').then((module) => {
+            if (isDisposed) return;
+            setApexChartComponent(() => module.default);
+        });
+
+        return () => {
+            isDisposed = true;
+        };
+    }, []);
+
+    const totalDurationMs = Math.max(items.length > 0 ? Math.max(...items.map((item) => item.endOffsetMs)) : 1, 1);
+    const chartHeight = Math.max(260, items.length * waterfallRowHeight + 24);
+    const ChartComponent = ApexChartComponent as any;
+
+    const series = [
+        {
+            data: items.map((item) => ({
+                fillColor: item.color,
+                x: item.barLabel,
+                y: [item.startOffsetMs, item.endOffsetMs],
+            })),
+            name: itemLabel,
+        },
+    ];
+
+    const options = {
+        chart: {
+            animations: { enabled: false },
+            background: 'transparent',
+            events: onSelect
+                ? {
+                      dataPointSelection: (
+                          _event: unknown,
+                          _chartContext: unknown,
+                          config: { dataPointIndex: number },
+                      ) => {
+                          const item = items[config.dataPointIndex];
+                          if (item) onSelect(item.id);
+                      },
+                  }
+                : undefined,
+            foreColor: '#627186',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+            toolbar: { show: false },
+            type: 'rangeBar',
+            zoom: { enabled: false },
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        fill: {
+            opacity: 1,
+        },
+        grid: {
+            borderColor: 'rgba(19, 32, 51, 0.08)',
+            padding: { bottom: 0, left: 0, right: 0, top: 4 },
+            xaxis: { lines: { show: true } },
+            yaxis: { lines: { show: false } },
+        },
+        legend: {
+            show: false,
+        },
+        noData: {
+            style: {
+                color: '#627186',
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+                fontSize: '11px',
+            },
+            text: emptyLabel,
+        },
+        plotOptions: {
+            bar: {
+                barHeight: waterfallBarHeight,
+                borderRadius: 2,
+                horizontal: true,
+                rangeBarGroupRows: false,
+            },
+        },
+        stroke: {
+            colors: ['#ffffff'],
+            width: 1,
+        },
+        tooltip: {
+            custom: ({ dataPointIndex }: { dataPointIndex: number }) => {
+                const item = items[dataPointIndex];
+                if (!item) return '';
+
+                return `
+                    <div style="padding:8px 10px; color:#132033; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace; font-size:11px; line-height:1.5;">
+                        <div style="font-weight:700;">${escapeHtml(item.title)}</div>
+                        ${item.subtitle ? `<div style="color:#627186;">${escapeHtml(item.subtitle)}</div>` : ''}
+                        ${item.detailLines
+                            .map(
+                                (line, index) =>
+                                    `<div style="${index === 0 ? 'margin-top:6px;' : ''} color:#627186;">${escapeHtml(line)}</div>`,
+                            )
+                            .join('')}
                     </div>
-                    <div className="proteum-profiler__tags">
-                        {Object.entries(event.details).map(([key, value]) => (
-                            <span className="proteum-profiler__tag" key={`${trace.id}:${event.index}:${key}`}>
-                                {key}:{truncate(renderSummaryValue(value), 72)}
-                            </span>
+                `;
+            },
+        },
+        xaxis: {
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+            labels: {
+                formatter: (value: string | number) => `${Math.round(Number(value))} ms`,
+                style: {
+                    colors: '#627186',
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+                    fontSize: '10px',
+                },
+            },
+            max: totalDurationMs,
+            min: 0,
+            tickAmount: Math.min(6, Math.max(2, items.length > 0 ? 6 : 2)),
+            type: 'numeric',
+        },
+        yaxis: {
+            show: false,
+            labels: {
+                show: false,
+            },
+        },
+    };
+
+    return (
+        <div className="proteum-profiler__section">
+            <div className="proteum-profiler__timelineChart">
+                <div className="proteum-profiler__timelineChartMeta">
+                    <span className="proteum-profiler__mono proteum-profiler__muted">
+                        {items.length} {itemLabel}
+                        {items.length === 1 ? '' : 's'}
+                    </span>
+                    <span className="proteum-profiler__mono proteum-profiler__muted">{formatDuration(totalDurationMs)}</span>
+                </div>
+
+                <div className="proteum-profiler__timelineChartCanvas" style={{ height: `${chartHeight}px` }}>
+                    {ChartComponent && items.length > 0 ? (
+                        <ChartComponent height={chartHeight} options={options} series={series} type="rangeBar" width="100%" />
+                    ) : items.length > 0 ? (
+                        <div className="proteum-profiler__empty">Loading waterfall chart...</div>
+                    ) : (
+                        <div className="proteum-profiler__empty">{emptyLabel}</div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const TimelinePanel = ({ session }: { session: TProfilerNavigationSession }) => {
+    const selections: TTraceEventInspectorSelection[] = session.traces.flatMap((traceItem) =>
+        traceItem.trace
+            ? traceItem.trace.events.map((event) => ({
+                  event,
+                  key: getTraceEventKey(traceItem.trace!.id, event),
+                  label: formatSessionTraceDisplay(traceItem),
+                  trace: traceItem.trace!,
+              }))
+            : [],
+    );
+    const [selectedEventKey, setSelectedEventKey] = React.useState<string | undefined>(() => selections[0]?.key);
+
+    React.useEffect(() => {
+        if (selections.some((selection) => selection.key === selectedEventKey)) return;
+        setSelectedEventKey(selections[0]?.key);
+    }, [selectedEventKey, selections]);
+
+    const waterfallItems = buildTimelineWaterfallItems(session);
+    const selected = selections.find((selection) => selection.key === selectedEventKey) || selections[0];
+
+    return (
+        <div className="proteum-profiler__splitView">
+            <div className="proteum-profiler__splitColumn">
+                <WaterfallChart
+                    emptyLabel="No timeline events were captured for this session."
+                    itemLabel="event"
+                    items={waterfallItems}
+                    onSelect={setSelectedEventKey}
+                />
+
+                <div className="proteum-profiler__section">
+                    <div className="proteum-profiler__titleRow">
+                        <div className="proteum-profiler__sectionTitle">Navigation steps</div>
+                    </div>
+                    <div className="proteum-profiler__list">
+                        {session.steps.map((step) => (
+                            <div className="proteum-profiler__row" key={step.id}>
+                                <div className="proteum-profiler__rowHeader">
+                                    <strong>{step.label}</strong>
+                                    <span className="proteum-profiler__mono proteum-profiler__muted">{formatDuration(step.durationMs)}</span>
+                                </div>
+                                <div className="proteum-profiler__tags">
+                                    <span className="proteum-profiler__tag">{step.status}</span>
+                                    {Object.entries(step.details || {}).map(([key, value]) => (
+                                        <span className="proteum-profiler__tag" key={`${step.id}:${key}`}>
+                                            {key}:{String(value)}
+                                        </span>
+                                    ))}
+                                    {step.errorMessage ? <span className="proteum-profiler__tag">{truncate(step.errorMessage, 72)}</span> : null}
+                                </div>
+                            </div>
                         ))}
                     </div>
                 </div>
-            ))}
+
+                {session.traces.map((traceItem) =>
+                    traceItem.trace ? (
+                        <TraceRows
+                            key={traceItem.id}
+                            onSelect={setSelectedEventKey}
+                            selectedEventKey={selectedEventKey}
+                            trace={traceItem.trace}
+                        />
+                    ) : (
+                        <div className="proteum-profiler__row" key={traceItem.id}>
+                        <div className="proteum-profiler__rowHeader">
+                                <strong>{formatSessionTraceDisplay(traceItem)}</strong>
+                                <span className="proteum-profiler__mono proteum-profiler__muted">{traceItem.status}</span>
+                            </div>
+                            <div className="proteum-profiler__mono">
+                                {formatProfilerRequestReference({
+                                    fallbackLabel: traceItem.label,
+                                    method: traceItem.method,
+                                    path: traceItem.path,
+                                    requestData: getTraceRequestData(traceItem.trace),
+                                })}
+                            </div>
+                        </div>
+                    ),
+                )}
+            </div>
+
+            <TraceEventSidebar event={selected?.event} label={selected?.label || 'Trace event'} trace={selected?.trace} />
         </div>
-    </div>
-);
+    );
+};
+
+const AuthPanel = ({ session }: { session: TProfilerNavigationSession }) => {
+    const authSections = session.traces.flatMap((traceItem) => {
+        const authEvents = traceItem.trace ? findTraceEvents(traceItem.trace, authEventTypes) : [];
+        return traceItem.trace && authEvents.length > 0
+            ? [{ authEvents, id: traceItem.id, label: formatSessionTraceDisplay(traceItem), trace: traceItem.trace }]
+            : [];
+    });
+    const selections: TTraceEventInspectorSelection[] = authSections.flatMap((section) =>
+        section.authEvents.map((event) => ({
+            event,
+            key: getTraceEventKey(section.trace.id, event),
+            label: `${section.label} event`,
+            trace: section.trace,
+        })),
+    );
+    const [selectedEventKey, setSelectedEventKey] = React.useState<string | undefined>(() => selections[0]?.key);
+
+    React.useEffect(() => {
+        if (selections.some((selection) => selection.key === selectedEventKey)) return;
+        setSelectedEventKey(selections[0]?.key);
+    }, [selectedEventKey, selections]);
 
-const SimpleSection = ({ empty, rows, title }: { empty: string; rows: Array<{ key: string; title: string; value: string }>; title: string }) => (
+    if (authSections.length === 0) return <div className="proteum-profiler__empty">No auth activity was captured for this session.</div>;
+
+    const selected = selections.find((selection) => selection.key === selectedEventKey) || selections[0];
+
+    return (
+        <div className="proteum-profiler__splitView">
+            <div className="proteum-profiler__splitColumn">
+                {authSections.map((section) => (
+                    <AuthTraceSection
+                        authEvents={section.authEvents}
+                        key={section.id}
+                        label={section.label}
+                        onSelect={setSelectedEventKey}
+                        selectedEventKey={selectedEventKey}
+                        trace={section.trace}
+                    />
+                ))}
+            </div>
+
+            <TraceEventSidebar event={selected?.event} label={selected?.label || 'Auth event'} trace={selected?.trace} />
+        </div>
+    );
+};
+
+const SimpleSection = ({
+    empty,
+    rows,
+    showTitle = true,
+    title,
+}: {
+    empty: string;
+    rows: Array<{ key: string; title: string; value: string }>;
+    showTitle?: boolean;
+    title: string;
+}) => (
     <div className="proteum-profiler__section">
-        <div className="proteum-profiler__sectionTitle">{title}</div>
+        {showTitle ? (
+            <div className="proteum-profiler__titleRow">
+                <div className="proteum-profiler__sectionTitle">{title}</div>
+            </div>
+        ) : null}
         {rows.length === 0 ? (
             <div className="proteum-profiler__empty">{empty}</div>
         ) : (
@@ -830,7 +2088,9 @@ const TextBlocks = ({ blocks }: { blocks: THumanTextBlock[] }) => (
     <>
         {blocks.map((block) => (
             <div className="proteum-profiler__section" key={block.title}>
-                <div className="proteum-profiler__sectionTitle">{block.title}</div>
+                <div className="proteum-profiler__titleRow">
+                    <div className="proteum-profiler__sectionTitle">{block.title}</div>
+                </div>
                 {block.items.length === 0 ? (
                     <div className="proteum-profiler__empty">{block.empty || 'none'}</div>
                 ) : (
@@ -873,44 +2133,11 @@ const renderPanel = (panel: TProfilerPanel, session: TProfilerNavigationSession,
     }
 
     if (panel === 'timeline') {
-        return (
-            <div className="proteum-profiler__section">
-                <div className="proteum-profiler__sectionTitle">Navigation steps</div>
-                <div className="proteum-profiler__list">
-                    {session.steps.map((step) => (
-                        <div className="proteum-profiler__row" key={step.id}>
-                            <div className="proteum-profiler__rowHeader">
-                                <strong>{step.label}</strong>
-                                <span className="proteum-profiler__mono proteum-profiler__muted">{formatDuration(step.durationMs)}</span>
-                            </div>
-                            <div className="proteum-profiler__tags">
-                                <span className="proteum-profiler__tag">{step.status}</span>
-                                {Object.entries(step.details || {}).map(([key, value]) => (
-                                    <span className="proteum-profiler__tag" key={`${step.id}:${key}`}>
-                                        {key}:{String(value)}
-                                    </span>
-                                ))}
-                                {step.errorMessage ? <span className="proteum-profiler__tag">{truncate(step.errorMessage, 72)}</span> : null}
-                            </div>
-                        </div>
-                    ))}
-                </div>
+        return <TimelinePanel session={session} />;
+    }
 
-                {session.traces.map((trace) =>
-                    trace.trace ? (
-                        <TraceRows key={trace.id} trace={trace.trace} />
-                    ) : (
-                        <div className="proteum-profiler__row" key={trace.id}>
-                            <div className="proteum-profiler__rowHeader">
-                                <strong>{trace.label}</strong>
-                                <span className="proteum-profiler__mono proteum-profiler__muted">{trace.status}</span>
-                            </div>
-                            <div className="proteum-profiler__mono">{trace.method} {trace.path}</div>
-                        </div>
-                    ),
-                )}
-            </div>
-        );
+    if (panel === 'auth') {
+        return <AuthPanel session={session} />;
     }
 
     if (panel === 'routing') {
@@ -930,6 +2157,7 @@ const renderPanel = (panel: TProfilerPanel, session: TProfilerNavigationSession,
                         .map(([key, value]) => `${key}=${renderSummaryValue(value)}`)
                         .join(' '),
                 }))}
+                showTitle={false}
                 title="Routing"
             />
         );
@@ -948,6 +2176,7 @@ const renderPanel = (panel: TProfilerPanel, session: TProfilerNavigationSession,
                             .join(' '),
                     }),
                 )}
+                showTitle={false}
                 title="Controller"
             />
         );
@@ -964,74 +2193,14 @@ const renderPanel = (panel: TProfilerPanel, session: TProfilerNavigationSession,
                         .map(([key, value]) => `${key}=${renderSummaryValue(value)}`)
                         .join(' '),
                 }))}
+                showTitle={false}
                 title="SSR"
             />
         );
     }
 
     if (panel === 'api') {
-        const syncCalls = session.traces.flatMap((trace) =>
-            trace.trace?.calls.filter((call) => call.origin !== 'client-async') || [],
-        );
-        const asyncTraces = session.traces.filter((trace) => trace.kind === 'async');
-
-        return (
-            <div className="proteum-profiler__section">
-                <div className="proteum-profiler__sectionTitle">Synchronous calls</div>
-                {syncCalls.length === 0 ? (
-                    <div className="proteum-profiler__empty">No synchronous SSR or batched API calls captured.</div>
-                ) : (
-                    <div className="proteum-profiler__list">
-                        {syncCalls.map((call: TTraceCall) => (
-                            <ApiRequestEntry
-                                durationMs={call.durationMs}
-                                errorMessage={call.errorMessage}
-                                finishedAt={call.finishedAt}
-                                key={call.id}
-                                label={call.label}
-                                method={call.method}
-                                path={call.path}
-                                requestData={call.requestData}
-                                result={call.result}
-                                startedAt={call.startedAt}
-                                statusCode={call.statusCode}
-                                tags={[
-                                    call.origin,
-                                    ...(call.fetcherId ? [`fetcher:${call.fetcherId}`] : []),
-                                    ...call.requestDataKeys.map((key) => `arg:${key}`),
-                                    ...call.resultKeys.map((key) => `res:${key}`),
-                                ]}
-                            />
-                        ))}
-                    </div>
-                )}
-
-                <div className="proteum-profiler__sectionTitle">Async requests</div>
-                {asyncTraces.length === 0 ? (
-                    <div className="proteum-profiler__empty">No async API calls captured.</div>
-                ) : (
-                    <div className="proteum-profiler__list">
-                        {asyncTraces.map((trace) => (
-                            <ApiRequestEntry
-                                durationMs={trace.durationMs}
-                                errorMessage={trace.errorMessage || trace.trace?.errorMessage}
-                                finishedAt={trace.finishedAt}
-                                key={trace.id}
-                                label={trace.label}
-                                method={trace.method}
-                                path={trace.path}
-                                requestData={getTraceRequestData(trace.trace)}
-                                result={getTraceResultData(trace.trace)}
-                                startedAt={trace.startedAt}
-                                statusCode={trace.trace?.statusCode}
-                                statusLabel={trace.status}
-                                tags={[trace.status, ...(trace.requestId ? [`request:${trace.requestId}`] : [])]}
-                            />
-                        ))}
-                    </div>
-                )}
-            </div>
-        );
+        return <ApiPanel session={session} />;
     }
 
     if (panel === 'explain') {
@@ -1230,13 +2399,15 @@ const renderPanel = (panel: TProfilerPanel, session: TProfilerNavigationSession,
                                     {execution ? (
                                         <div className="proteum-profiler__section">
                                             <div className="proteum-profiler__sectionTitle">Last result</div>
-                                            <pre className="proteum-profiler__mono proteum-profiler__pre">
-                                                {execution.result?.json !== undefined
-                                                    ? formatStructuredValue(execution.result.json)
-                                                    : execution.result
-                                                      ? formatStructuredValue(execution.result.summary)
-                                                      : execution.errorMessage || 'undefined'}
-                                            </pre>
+                                            <JsonCodeBlock
+                                                value={
+                                                    execution.result?.json !== undefined
+                                                        ? formatStructuredValue(execution.result.json)
+                                                        : execution.result
+                                                          ? formatStructuredValue(execution.result.summary)
+                                                          : execution.errorMessage || 'undefined'
+                                                }
+                                            />
                                         </div>
                                     ) : null}
                                 </div>
@@ -1361,7 +2532,7 @@ const renderPanel = (panel: TProfilerPanel, session: TProfilerNavigationSession,
         })),
     ];
 
-    return <SimpleSection empty="No errors captured." rows={errorRows} title="Errors" />;
+    return <SimpleSection empty="No errors captured." rows={errorRows} showTitle={false} title="Errors" />;
 };
 
 export default function DevProfiler() {
@@ -1396,9 +2567,13 @@ export default function DevProfiler() {
         session.kind === 'client-navigation'
             ? session.label
             : primaryTrace
-              ? `${primaryTrace.statusCode || 'pending'} ${primaryTrace.method} ${primaryTrace.path}`
+              ? `${primaryTrace.statusCode || 'pending'} ${formatProfilerRequestReference({
+                    method: primaryTrace.method,
+                    path: primaryTrace.path,
+                    requestData: getTraceRequestData(primaryTrace),
+                })}`
               : session.label;
-    const recentSessions = state.sessions.slice(-6).reverse();
+    const recentSessions: TProfilerNavigationSession[] = state.sessions.slice(-6).reverse();
 
     return (
         <div className="proteum-profiler">