proteum 2.1.2 → 2.1.3-1

package/client/dev/profiler/index.tsx

@@ -367,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;
@@ -727,22 +768,23 @@ type TApiRequestItem = {
     method: string;
     path: string;
     requestData?: TTraceSummaryValue;
+    requestDataJson?: unknown;
     result?: TTraceSummaryValue;
+    resultJson?: unknown;
     startedAt: string;
     statusCode?: number;
     statusLabel?: string;
     tags: string[];
 };
-type TTimelineWaterfallEventItem = {
-    chartLabel: string;
+type TWaterfallChartItem = {
+    barLabel: string;
     color: string;
-    durationMs: number;
-    endMs: number;
+    detailLines: string[];
     endOffsetMs: number;
-    event: TRequestTrace['events'][number];
-    startMs: number;
+    id: string;
     startOffsetMs: number;
-    traceLabel: string;
+    subtitle?: string;
+    title: string;
 };
 type TProfilerState = ReturnType<typeof profilerRuntime.getState>;
 
@@ -835,6 +877,9 @@ 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)])),
@@ -951,6 +996,14 @@ const getTraceResultData = (trace: TRequestTrace | undefined) =>
 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)) || [];
 
@@ -1084,6 +1137,7 @@ const ApiRequestListEntry = ({
     onSelect: () => void;
 }) => {
     const statusText = getRequestStatusText(item.statusCode, item.statusLabel);
+    const statusTone = getRequestStatusTone(item.statusCode, item.statusLabel);
 
     return (
         <button
@@ -1093,19 +1147,14 @@ const ApiRequestListEntry = ({
             type="button"
         >
             <div className="proteum-profiler__rowHeader">
-                <strong>{formatApiReference(item.method, item.path, item.requestData, item.label)}</strong>
-                <span className="proteum-profiler__mono proteum-profiler__muted">
-                    {formatDuration(item.durationMs)} | {statusText}
+                <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>
-            <div className="proteum-profiler__tags">
-                {item.tags.map((tag) => (
-                    <span className="proteum-profiler__tag" key={`${item.id}:${tag}`}>
-                        {tag}
-                    </span>
-                ))}
-                {item.errorMessage ? <span className="proteum-profiler__tag">{truncate(item.errorMessage, 72)}</span> : null}
-            </div>
         </button>
     );
 };
@@ -1177,12 +1226,12 @@ const ApiRequestSidebar = ({ item }: { item?: TApiRequestItem }) => {
 
                 <div className="proteum-profiler__sidebarSection">
                     <div className="proteum-profiler__sidebarSectionTitle">Arguments</div>
-                    <JsonCodeBlock value={formatSummaryJson(item.requestData)} />
+                    <JsonCodeBlock value={formatApiPanelJson(item.requestDataJson, item.requestData)} />
                 </div>
 
                 <div className="proteum-profiler__sidebarSection">
                     <div className="proteum-profiler__sidebarSectionTitle">Result</div>
-                    <JsonCodeBlock value={formatSummaryJson(item.result)} />
+                    <JsonCodeBlock value={formatApiPanelJson(item.resultJson, item.result)} />
                 </div>
 
                 {item.errorMessage ? (
@@ -1209,7 +1258,9 @@ const ApiPanel = ({ session }: { session: TProfilerNavigationSession }) => {
             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: [
@@ -1231,7 +1282,9 @@ const ApiPanel = ({ session }: { session: TProfilerNavigationSession }) => {
             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,
@@ -1245,57 +1298,67 @@ const ApiPanel = ({ session }: { session: TProfilerNavigationSession }) => {
         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__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>
+            <div className="proteum-profiler__splitColumn">
+                <WaterfallChart
+                    emptyLabel="No API requests were captured for this session."
+                    itemLabel="request"
+                    items={waterfallItems}
+                    onSelect={setSelectedRequestId}
+                />
 
-                    {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 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>
-                    )}
-                </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>
+                        {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>
 
-                    {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 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>
             </div>
 
@@ -1315,6 +1378,8 @@ const TraceEventSidebar = ({
     label: string;
     trace?: TRequestTrace;
 }) => {
+    const detailEntries = Object.entries(event?.details || {});
+
     if (!event) {
         return (
             <aside className="proteum-profiler__sidebar">
@@ -1353,19 +1418,23 @@ const TraceEventSidebar = ({
                     <SummaryRow label="Trace" value={trace?.id || 'n/a'} />
                 </div>
 
-                <div className="proteum-profiler__sidebarSection">
-                    <div className="proteum-profiler__sidebarSectionTitle">Summary</div>
-                    <div className="proteum-profiler__tags">
-                        {Object.entries(event.details).map(([key, value]) => (
-                            <span className="proteum-profiler__tag" key={`${trace?.id || 'trace'}:${event.index}:detail:${key}`}>
-                                {key}:{truncate(renderSummaryValue(value), 72)}
-                            </span>
-                        ))}
+                {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>
-                </div>
+                ) : null}
 
                 <div className="proteum-profiler__sidebarSection">
-                    <div className="proteum-profiler__sidebarSectionTitle">Details</div>
+                    <div className="proteum-profiler__sidebarSectionTitle">Raw JSON</div>
                     <JsonCodeBlock value={formatTraceEventDetailsJson(event.details)} />
                 </div>
             </div>
@@ -1565,26 +1634,22 @@ const escapeHtml = (value: string) =>
         .replace(/'/g, '&#39;');
 
 const timelineWaterfallMinDurationMs = 6;
-const timelineWaterfallBarHeight = 15;
-const timelineWaterfallRowGap = 1;
-const timelineWaterfallRowHeight = timelineWaterfallBarHeight + timelineWaterfallRowGap;
-
-const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) => {
-    const [ApexChartComponent, setApexChartComponent] = React.useState<unknown>(null);
-
-    React.useEffect(() => {
-        let isDisposed = false;
+const waterfallBarHeight = 15;
+const waterfallRowGap = 1;
+const waterfallRowHeight = waterfallBarHeight + waterfallRowGap;
 
-        void import('react-apexcharts').then((module) => {
-            if (isDisposed) return;
-            setApexChartComponent(() => module.default);
-        });
-
-        return () => {
-            isDisposed = true;
-        };
-    }, []);
+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;
@@ -1594,17 +1659,21 @@ const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) =>
         const traceFinishedMs = readDateMs(trace.finishedAt) ?? (trace.durationMs !== undefined ? traceStartMs + trace.durationMs : undefined);
         const traceLabel = formatSessionTraceDisplay(traceItem);
 
-        return trace.events.map((event, index): Omit<TTimelineWaterfallEventItem, 'chartLabel' | 'color' | 'endOffsetMs' | 'startOffsetMs'> => {
+        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 = Math.max(startMs + 1, nextStartMs ?? traceFinishedMs ?? startMs + 1);
+            const endMs = buildWaterfallEndMs({
+                fallbackEndMs: nextStartMs ?? traceFinishedMs,
+                startMs,
+            });
 
             return {
                 durationMs: Math.max(1, endMs - startMs),
                 endMs,
                 event,
                 startMs,
+                trace,
                 traceLabel,
             };
         });
@@ -1612,28 +1681,113 @@ const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) =>
 
     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;
-    const chartEndMs = sortedItems.length > 0 ? Math.max(...sortedItems.map((item) => item.endMs)) : chartStartMs + 1;
-    const totalDurationMs = Math.max(chartEndMs - chartStartMs, 1);
-    const items: TTimelineWaterfallEventItem[] = sortedItems
+
+    return sortedItems
         .filter((item) => item.durationMs >= timelineWaterfallMinDurationMs)
-        .map((item) => ({
-            ...item,
-            chartLabel: truncate(`${item.event.type} | ${item.traceLabel}`, 84),
+        .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),
-            endOffsetMs: item.endMs - chartStartMs,
-            startOffsetMs: item.startMs - chartStartMs,
-        }));
-    const chartHeight = Math.max(260, items.length * timelineWaterfallRowHeight + 24);
+            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.chartLabel,
+                x: item.barLabel,
                 y: [item.startOffsetMs, item.endOffsetMs],
             })),
-            name: 'Timeline events',
+            name: itemLabel,
         },
     ];
 
@@ -1641,6 +1795,18 @@ const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) =>
         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 },
@@ -1668,11 +1834,11 @@ const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) =>
                 fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
                 fontSize: '11px',
             },
-            text: 'No timeline events captured.',
+            text: emptyLabel,
         },
         plotOptions: {
             bar: {
-                barHeight: timelineWaterfallBarHeight,
+                barHeight: waterfallBarHeight,
                 borderRadius: 2,
                 horizontal: true,
                 rangeBarGroupRows: false,
@@ -1689,11 +1855,14 @@ const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) =>
 
                 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.event.type)}</div>
-                        <div style="color:#627186;">${escapeHtml(item.traceLabel)}</div>
-                        <div style="margin-top:6px; color:#627186;">Start: +${Math.round(item.startOffsetMs)} ms</div>
-                        <div style="color:#627186;">End: +${Math.round(item.endOffsetMs)} ms</div>
-                        <div style="color:#627186;">Span: ${escapeHtml(formatDuration(item.durationMs))}</div>
+                        <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>
                 `;
             },
@@ -1727,7 +1896,8 @@ const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) =>
             <div className="proteum-profiler__timelineChart">
                 <div className="proteum-profiler__timelineChartMeta">
                     <span className="proteum-profiler__mono proteum-profiler__muted">
-                        {items.length} event{items.length === 1 ? '' : 's'}
+                        {items.length} {itemLabel}
+                        {items.length === 1 ? '' : 's'}
                     </span>
                     <span className="proteum-profiler__mono proteum-profiler__muted">{formatDuration(totalDurationMs)}</span>
                 </div>
@@ -1738,7 +1908,7 @@ const TimelineChart = ({ session }: { session: TProfilerNavigationSession }) =>
                     ) : items.length > 0 ? (
                         <div className="proteum-profiler__empty">Loading waterfall chart...</div>
                     ) : (
-                        <div className="proteum-profiler__empty">No timeline events were captured for this session.</div>
+                        <div className="proteum-profiler__empty">{emptyLabel}</div>
                     )}
                 </div>
             </div>
@@ -1764,67 +1934,72 @@ const TimelinePanel = ({ session }: { session: TProfilerNavigationSession }) =>
         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__splitColumn">
-            <TimelineChart session={session} />
-            <div className="proteum-profiler__splitView proteum-profiler__splitView--stacked">
-                <div className="proteum-profiler__splitColumn">
-                    <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>
+        <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}
+                />
 
-                    {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 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__mono">
-                                    {formatProfilerRequestReference({
-                                        fallbackLabel: traceItem.label,
-                                        method: traceItem.method,
-                                        path: traceItem.path,
-                                        requestData: getTraceRequestData(traceItem.trace),
-                                    })}
+                                <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>
 
-                <TraceEventSidebar event={selected?.event} label={selected?.label || 'Trace event'} trace={selected?.trace} />
+                {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>
     );
 };