@marinoscar/platform-web 0.0.0-stage → 0.1.0-next.4

package/dist/telemetry/ui/components/dashboard/EventsFeed.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Recent events — issue #578, epic #576.
+ *
+ * Log records newest first, filtered by the severity chips (`sev`, shared with
+ * the log timeline) and a body search (`q`, debounced 400 ms, ≤ 200
+ * characters — the API's limit). "Load more" follows the API's `nextCursor`.
+ *
+ * Desktop: a table (time, severity, service, one-line message). Tablet: the
+ * same without the service column. Phone: a list (severity chip + relative
+ * time, two-line message). Any row opens the full record in a dialog —
+ * full-screen on phones — with the body, exact timestamp, service, trace id
+ * and span id. MUI's Dialog traps focus and restores it to the row on close.
+ *
+ * "View trace" (#579): an event whose trace id is a real OpenTelemetry id (32
+ * lower-case hex digits, `traceLink.ts`) offers it in that detail, and opens
+ * the trace's spans in the Telemetry Explorer (loaded, not run). It lives in
+ * the detail rather than on the row because a row is itself a button, and a
+ * control nested in a control is unreachable for assistive technology. Any
+ * other id gets no link.
+ */
+import { useEffect, useId, useRef, useState } from 'react';
+import { Box, Button, CircularProgress, Dialog, DialogContent, DialogTitle, IconButton, InputAdornment, List, ListItemButton, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import CloseIcon from '@mui/icons-material/Close';
+import AccountTreeOutlinedIcon from '@mui/icons-material/AccountTreeOutlined';
+import { DASHBOARD_SEARCH_MAX_LENGTH, } from '../../../headless/services/telemetryDashboard.js';
+import { DashboardPanel, PanelError } from './DashboardPanel.js';
+import { SeverityChip, SeverityChips, SeverityLabel } from './severity.js';
+import { formatRelative, formatTimestamp } from '../../../headless/lib/format.js';
+import { isTraceId } from '../../../headless/lib/traceLink.js';
+export const SEARCH_DEBOUNCE_MS = 400;
+/** A search box that reports its value 400 ms after the last keystroke. */
+function SearchField({ value, onChange }) {
+    const [draft, setDraft] = useState(value);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const committed = useRef(value);
+    // An outside change (Reset, back button) replaces the draft.
+    useEffect(() => {
+        if (value !== committed.current) {
+            committed.current = value;
+            setDraft(value);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (draft === committed.current)
+            return;
+        const timer = setTimeout(() => {
+            committed.current = draft;
+            onChangeRef.current(draft);
+        }, SEARCH_DEBOUNCE_MS);
+        return () => clearTimeout(timer);
+    }, [draft]);
+    return (_jsx(TextField, { size: "small", fullWidth: true, type: "search", label: "Search messages", value: draft, onChange: (event) => setDraft(event.target.value.slice(0, DASHBOARD_SEARCH_MAX_LENGTH)), slotProps: {
+            htmlInput: { maxLength: DASHBOARD_SEARCH_MAX_LENGTH },
+            input: {
+                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small", "aria-hidden": true }) })),
+            },
+        }, sx: { mb: 1.5 } }));
+}
+function DetailRow({ label, value, mono = false }) {
+    return (_jsxs(Box, { sx: { mb: 1.5 }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", component: "dt", children: label }), _jsx(Typography, { component: "dd", variant: "body2", sx: { m: 0, wordBreak: 'break-all', fontFamily: mono ? 'monospace' : undefined }, children: value ?? '—' })] }));
+}
+function EventDialog({ event, fullScreen, onClose, onViewTrace, }) {
+    const titleId = useId();
+    return (_jsx(Dialog, { open: event !== null, onClose: onClose, fullScreen: fullScreen, fullWidth: true, maxWidth: "md", "aria-labelledby": titleId, children: event && (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, { id: titleId, sx: { display: 'flex', alignItems: 'center', gap: 1, pr: 1 }, children: [_jsx(SeverityLabel, { severity: event.severity }), _jsx(Box, { component: "span", sx: { flex: 1 }, children: "Log event" }), _jsx(IconButton, { "aria-label": "Close event", onClick: onClose, sx: { width: 44, height: 44 }, children: _jsx(CloseIcon, {}) })] }), _jsxs(DialogContent, { dividers: true, children: [_jsx(Box, { component: "pre", "data-testid": "event-body", sx: { m: 0, mb: 2, whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontFamily: 'monospace', fontSize: 13 }, children: event.body ?? '(no message)' }), _jsxs(Box, { component: "dl", sx: { m: 0 }, children: [_jsx(DetailRow, { label: "Timestamp (UTC)", value: event.timestamp, mono: true }), _jsx(DetailRow, { label: "Service", value: event.service }), _jsx(DetailRow, { label: "Trace id", value: event.traceId, mono: true }), _jsx(DetailRow, { label: "Span id", value: event.spanId, mono: true })] }), onViewTrace && isTraceId(event.traceId) && (_jsx(Button, { variant: "outlined", startIcon: _jsx(AccountTreeOutlinedIcon, {}), onClick: () => onViewTrace(event.traceId), sx: { minHeight: 44 }, children: "View trace" }))] })] })) }));
+}
+/** Event timestamps carry nanoseconds; `Date.parse` needs at most milliseconds. */
+function eventTime(timestamp) {
+    const match = /^(.*T\d{2}:\d{2}:\d{2})(\.\d+)?(Z|[+-]\d{2}:?\d{2})?$/.exec(timestamp.replace(' ', 'T'));
+    if (!match)
+        return timestamp;
+    const fraction = match[2] ? match[2].slice(0, 4) : '';
+    return `${match[1]}${fraction}${match[3] ?? 'Z'}`;
+}
+export function EventsFeed({ events, sev, q, onChange, layout, actions = [], onViewTrace, now = Date.now(), }) {
+    const [selected, setSelected] = useState(null);
+    const isPhone = layout === 'phone';
+    const showService = layout === 'desktop';
+    const openOnKey = (event, item) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            setSelected(item);
+        }
+    };
+    const rows = isPhone ? (_jsx(List, { disablePadding: true, "aria-label": "Recent events", children: events.items.map((item, index) => (_jsxs(ListItemButton, { divider: true, onClick: () => setSelected(item), sx: { px: 0.5, display: 'block', minHeight: 44 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center', mb: 0.5 }, children: [_jsx(SeverityChip, { severity: item.severity }), _jsx(Typography, { variant: "caption", color: "text.secondary", title: formatTimestamp(eventTime(item.timestamp)), children: formatRelative(eventTime(item.timestamp), now) })] }), _jsx(Typography, { variant: "body2", sx: {
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                        wordBreak: 'break-word',
+                    }, children: item.body ?? '(no message)' })] }, `${item.timestamp}-${item.spanId ?? ''}-${index}`))) })) : (_jsx(TableContainer, { children: _jsxs(Table, { size: "small", "aria-label": "Recent events", sx: { tableLayout: 'fixed' }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: { width: 96 }, children: "Time" }), _jsx(TableCell, { sx: { width: 96 }, children: "Severity" }), showService && _jsx(TableCell, { sx: { width: 160 }, children: "Service" }), _jsx(TableCell, { children: "Message" })] }) }), _jsx(TableBody, { children: events.items.map((item, index) => (_jsxs(TableRow, { hover: true, tabIndex: 0, role: "button", "aria-label": `Open event: ${item.body ?? 'no message'}`, onClick: () => setSelected(item), onKeyDown: (event) => openOnKey(event, item), sx: { cursor: 'pointer' }, children: [_jsx(TableCell, { sx: { whiteSpace: 'nowrap' }, title: formatTimestamp(eventTime(item.timestamp)), children: formatRelative(eventTime(item.timestamp), now) }), _jsx(TableCell, { children: _jsx(SeverityLabel, { severity: item.severity }) }), showService && (_jsx(TableCell, { sx: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: item.service ?? '—' })), _jsx(TableCell, { sx: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: item.body ?? '(no message)' })] }, `${item.timestamp}-${item.spanId ?? ''}-${index}`))) })] }) }));
+    return (_jsxs(DashboardPanel, { id: "panel-events", title: "Recent events", headerExtra: _jsx(SeverityChips, { value: sev, onChange: (next) => onChange({ sev: next }), large: isPhone, label: "Event severity filter" }), actions: actions, sql: events.data?.sql, isRefreshing: events.isRefreshing, children: [_jsx(SearchField, { value: q, onChange: (next) => onChange({ q: next }) }), events.error ? (_jsx(PanelError, { error: events.error, onRetry: events.reload })) : events.isLoading ? (_jsx(Stack, { sx: { alignItems: 'center', py: 4 }, children: _jsx(CircularProgress, { size: 28, "aria-label": "Loading events" }) })) : events.items.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 3, textAlign: 'center' }, children: q ? 'No events match this search.' : 'No events of the selected severities in this window.' })) : (_jsxs(_Fragment, { children: [rows, events.loadMoreError && (_jsx(Box, { sx: { mt: 1.5 }, children: _jsx(PanelError, { error: events.loadMoreError, onRetry: events.loadMore }) })), events.hasMore && (_jsx(Stack, { sx: { alignItems: 'center', mt: 1.5 }, children: _jsx(Button, { variant: "outlined", onClick: events.loadMore, disabled: events.isLoadingMore, startIcon: events.isLoadingMore ? _jsx(CircularProgress, { size: 16 }) : undefined, sx: { minHeight: 44 }, children: "Load more" }) }))] })), _jsx(EventDialog, { event: selected, fullScreen: isPhone, onClose: () => setSelected(null), onViewTrace: onViewTrace })] }));
+}
+//# sourceMappingURL=EventsFeed.js.map

package/dist/telemetry/ui/components/dashboard/EventsFeed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventsFeed.js","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/EventsFeed.tsx"],"names":[],"mappings":"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"}

package/dist/telemetry/ui/components/dashboard/KpiTiles.d.ts

@@ -0,0 +1,15 @@
+import type { DashboardTile, DashboardUnknownRoutes } from '../../../headless/services/telemetryDashboard.js';
+export interface KpiTilesProps {
+    tiles: DashboardTile[];
+    runtime?: DashboardTile[];
+    /** The summary's unknown-routes block (#650): caption and highlight of the `unknownRoutes` tile. */
+    unknownRoutes?: DashboardUnknownRoutes;
+    /** For relative timestamps; the page passes its clock. */
+    now?: number;
+    /** `data-testid` of the grid (the infrastructure sections, #602, reuse this component). */
+    testId?: string;
+    /** Value colours by tile key, already resolved from a presentation's theme tokens (PP-14.18). Absent: the default text colour. */
+    colors?: Readonly<Record<string, string>>;
+}
+export declare function KpiTiles({ tiles, runtime, unknownRoutes, now, testId, colors, }: KpiTilesProps): import("react").JSX.Element;
+//# sourceMappingURL=KpiTiles.d.ts.map

package/dist/telemetry/ui/components/dashboard/KpiTiles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiTiles.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/KpiTiles.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,kDAAkD,CAAC;AAoJ9G,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,oGAAoG;IACpG,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kIAAkI;IAClI,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC3C;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAY,EACZ,aAAa,EACb,GAAgB,EAChB,MAAoB,EACpB,MAAM,GACP,EAAE,aAAa,+BAkBf"}

package/dist/telemetry/ui/components/dashboard/KpiTiles.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The Telemetry Dashboard's headline tiles — issue #578, epic #576.
+ *
+ * One tile per `summary.tiles` entry (requests/min, 5xx rate, p95, error and
+ * warning logs, last data), then the `runtime` tiles when the API sends them.
+ * Each shows the value and unit, the change against the previous window of
+ * equal length (▲/▼ and a percentage, coloured by whether that direction is
+ * good or bad for the measure — never by colour alone), and a sparkline in
+ * which a `null` bucket is a GAP, not a zero.
+ *
+ * Unknown API routes (#650): the `unknownRoutes` tile is drawn like the
+ * others (a null value is "—", unknown — never 0). When the summary carries
+ * its `unknownRoutes` block, a caption splits the count into requests from the
+ * application (with a bearer) and anonymous ones, and the tile is highlighted
+ * in the warning colour while any came from the application — the caption's
+ * words, not the colour, carry that meaning.
+ *
+ * Grid: 6 per row from `lg`, 3 from `sm`, 2 on phones.
+ */
+import { Box, Grid, Paper, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+import { formatTimestamp, formatTileValue, tileChange, tileDirection } from '../../../headless/lib/format.js';
+import { useMetricUnitFormats } from '../../../headless/context/metricUnitFormats.js';
+import { useTelemetryTokens } from '../../../theme/telemetryTokens.js';
+/** The change line's colour per tone: status tokens for good/bad, neutral chrome otherwise. */
+function toneColor(tone, tokens) {
+    if (tone === 'good')
+        return tokens.status.ok;
+    if (tone === 'bad')
+        return tokens.status.crit;
+    return 'text.secondary';
+}
+function ChangeLine({ change, compact }) {
+    const tokens = useTelemetryTokens();
+    if (change.pct === null && change.trend === 'flat') {
+        return (_jsx(Typography, { variant: "caption", color: "text.secondary", children: compact ? '—' : 'No previous data' }));
+    }
+    const pctText = change.pct === null ? 'new' : `${Math.abs(change.pct).toLocaleString()}%`;
+    const words = change.trend === 'up' ? 'Up' : change.trend === 'down' ? 'Down' : 'Unchanged';
+    const glyph = change.trend === 'up' ? '▲' : change.trend === 'down' ? '▼' : '=';
+    const Icon = change.trend === 'up' ? ArrowUpwardIcon : change.trend === 'down' ? ArrowDownwardIcon : null;
+    return (_jsxs(Typography, { variant: "caption", "aria-label": `${words} ${pctText} vs previous window`, sx: { color: toneColor(change.tone, tokens), display: 'inline-flex', alignItems: 'center', gap: 0.25, fontWeight: 500 }, children: [compact && Icon ? _jsx(Icon, { "aria-hidden": true, sx: { fontSize: 14 } }) : _jsx("span", { "aria-hidden": true, children: glyph }), _jsx("span", { "aria-hidden": true, children: pctText }), !compact && (_jsx(Box, { component: "span", "aria-hidden": true, sx: { color: 'text.secondary', fontWeight: 400, ml: 0.5 }, children: "vs prev" }))] }));
+}
+function Sparkline({ data, height }) {
+    const tokens = useTelemetryTokens();
+    if (data.length < 2 || data.every((value) => value === null))
+        return _jsx(Box, { sx: { height } });
+    return (_jsx(Box, { "aria-hidden": true, sx: { height, mt: 0.5 }, children: _jsx(SparkLineChart, { data: data, height: height, color: tokens.chart.series[0], curve: "linear" }) }));
+}
+/** The `unknownRoutes` tile's caption and highlight (#650), from the summary's block. */
+function unknownRoutesTileExtra(block, compact) {
+    if (!block || block.requests <= 0)
+        return {};
+    const app = block.bearer.toLocaleString();
+    const anonymous = block.anonymous.toLocaleString();
+    return {
+        caption: compact ? `${app} app · ${anonymous} anon.` : `${app} from the app · ${anonymous} anonymous`,
+        highlight: block.bearer > 0,
+    };
+}
+function Tile({ tile, compact, now, caption, highlight = false, color, }) {
+    const formats = useMetricUnitFormats();
+    const formatted = formatTileValue(tile.value, tile.unit, now, formats);
+    const isTimestamp = tile.unit === 'timestamp';
+    const change = tileChange(tile.value, tile.previous, tileDirection(tile.key));
+    const tokens = useTelemetryTokens();
+    return (_jsxs(Paper, { variant: "outlined", "data-testid": `tile-${tile.key}`, "data-highlight": highlight ? 'warning' : undefined, sx: {
+            p: { xs: 1.25, sm: 1.5 },
+            height: '100%',
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            ...(highlight ? { borderColor: tokens.status.warn } : {}),
+        }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, title: tile.label, component: "h3", children: tile.label }), _jsxs(Stack, { direction: "row", spacing: 0.5, sx: { alignItems: 'baseline', minWidth: 0 }, children: [_jsx(Typography, { variant: compact ? 'h6' : 'h5', component: "p", noWrap: true, title: isTimestamp && typeof tile.value === 'string' ? formatTimestamp(tile.value) : undefined, sx: {
+                            fontWeight: 600,
+                            minWidth: 0,
+                            ...(highlight ? { color: tokens.status.warn } : color ? { color } : {}),
+                        }, children: formatted.value }), formatted.unit && (_jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: formatted.unit }))] }), !isTimestamp && _jsx(ChangeLine, { change: change, compact: compact }), caption && (_jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, title: caption, "data-testid": `tile-${tile.key}-caption`, sx: { minWidth: 0 }, children: caption })), _jsx(Box, { sx: { mt: 'auto' }, children: !isTimestamp && _jsx(Sparkline, { data: tile.sparkline, height: compact ? 24 : 40 }) })] }));
+}
+export function KpiTiles({ tiles, runtime = [], unknownRoutes, now = Date.now(), testId = 'kpi-tiles', colors, }) {
+    const theme = useTheme();
+    const compact = useMediaQuery(theme.breakpoints.down('sm'));
+    return (_jsx(Grid, { container: true, spacing: { xs: 1, sm: 1.5 }, "data-testid": testId, children: [...tiles, ...runtime].map((tile) => (_jsx(Grid, { size: { xs: 6, sm: 4, lg: 2 }, sx: { minWidth: 0 }, children: _jsx(Tile, { tile: tile, compact: compact, now: now, ...(colors?.[tile.key] ? { color: colors[tile.key] } : {}), ...(tile.key === 'unknownRoutes' ? unknownRoutesTileExtra(unknownRoutes, compact) : {}) }) }, tile.key))) }));
+}
+//# sourceMappingURL=KpiTiles.js.map

package/dist/telemetry/ui/components/dashboard/KpiTiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiTiles.js","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/KpiTiles.tsx"],"names":[],"mappings":"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"}

package/dist/telemetry/ui/components/dashboard/LogSeverityChart.d.ts

@@ -0,0 +1,8 @@
+import type { DashboardLogsBucket, DashboardSeverity } from '../../../headless/services/telemetryDashboard.js';
+import type { TimelineChartProps } from './ApiTimelineChart.js';
+export interface LogSeverityChartProps extends TimelineChartProps {
+    buckets: DashboardLogsBucket[];
+    severities: DashboardSeverity[];
+}
+export declare function LogSeverityChart({ buckets, severities, height, spanMs, compact, zoom, onZoomBuckets, }: LogSeverityChartProps): import("react").JSX.Element;
+//# sourceMappingURL=LogSeverityChart.d.ts.map

package/dist/telemetry/ui/components/dashboard/LogSeverityChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSeverityChart.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/LogSeverityChart.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAG/G,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,UAAU,EAAE,iBAAiB,EAAE,CAAC;CACjC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,UAAU,EACV,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,aAAa,GACd,EAAE,qBAAqB,+BAqCvB"}

package/dist/telemetry/ui/components/dashboard/LogSeverityChart.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Log severity timeline — issue #578, epic #576.
+ *
+ * Log records per bucket, stacked by the API's severity bands (error ≥ 17,
+ * warn 13–16, info 9–12, other). Only the bands the reader selected with the
+ * severity chips (`sev`) are drawn; `other` (debug, trace, unnumbered) rides
+ * with `info`, the band nearest it, so the default error+warn view stays about
+ * problems.
+ */
+import { Box } from '@mui/material';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { timelineXAxis } from './timelineAxis.js';
+import { ZoomBrush } from './ZoomBrush.js';
+import { useTelemetryTokens } from '../../../theme/telemetryTokens.js';
+export function LogSeverityChart({ buckets, severities, height, spanMs, compact, zoom, onZoomBuckets, }) {
+    const { status } = useTelemetryTokens();
+    const starts = buckets.map((bucket) => bucket.t);
+    const bands = [
+        { id: 'error', label: 'Error', color: status.crit, shown: severities.includes('error') },
+        { id: 'warn', label: 'Warn', color: status.warn, shown: severities.includes('warn') },
+        { id: 'info', label: 'Info', color: status.info, shown: severities.includes('info') },
+        { id: 'other', label: 'Other', color: status.neutral, shown: severities.includes('info') },
+    ];
+    const shown = bands.filter((band) => band.shown);
+    return (_jsx(Box, { role: "img", "aria-label": `Log records per bucket by severity (${shown.map((band) => band.label).join(', ')}), ${buckets.length} buckets`, sx: { minWidth: 0, width: '100%' }, children: _jsx(BarChart, { height: height, skipAnimation: true, series: shown.map((band) => ({
+                id: band.id,
+                label: band.label,
+                data: buckets.map((bucket) => bucket[band.id]),
+                stack: 'severity',
+                color: band.color,
+            })), xAxis: [timelineXAxis(starts, spanMs, compact ? 4 : undefined)], yAxis: [{ width: compact ? 44 : 48, min: 0 }], grid: { horizontal: true }, margin: { top: 8, right: 8, bottom: 4, left: 4 }, slotProps: { legend: { position: { vertical: compact ? 'bottom' : 'top', horizontal: 'center' } } }, children: _jsx(ZoomBrush, { values: starts, drag: zoom.drag, tap: zoom.tap, onSelect: onZoomBuckets }) }) }));
+}
+//# sourceMappingURL=LogSeverityChart.js.map

package/dist/telemetry/ui/components/dashboard/LogSeverityChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSeverityChart.js","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/LogSeverityChart.tsx"],"names":[],"mappings":"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"}

package/dist/telemetry/ui/components/dashboard/TopProblems.d.ts

@@ -0,0 +1,19 @@
+import type { DashboardResource } from '../../../headless/hooks/useTelemetryDashboard.js';
+import type { DashboardTopErrors, DashboardTopRoutes } from '../../../headless/services/telemetryDashboard.js';
+import { type PanelAction } from './DashboardPanel.js';
+import type { DashboardLayout } from './DashboardFilterBar.js';
+export type TopProblemsKind = 'routes' | 'errors';
+export interface TopProblemsProps {
+    routes: DashboardResource<DashboardTopRoutes>;
+    errors: DashboardResource<DashboardTopErrors>;
+    layout: DashboardLayout;
+    /**
+     * Header actions: one list for both panels, or one per panel (#579 — "Ask
+     * assistant" describes the panel it was invoked from). On phones the single
+     * panel offers the actions of the view the toggle shows.
+     */
+    actions?: PanelAction[] | ((kind: TopProblemsKind) => PanelAction[]);
+    now?: number;
+}
+export declare function TopProblems({ routes, errors, layout, actions, now }: TopProblemsProps): import("react").JSX.Element;
+//# sourceMappingURL=TopProblems.d.ts.map

package/dist/telemetry/ui/components/dashboard/TopProblems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopProblems.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/TopProblems.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAC1F,OAAO,KAAK,EAEV,kBAAkB,EAElB,kBAAkB,EACnB,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAgK/D,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IAC9C,MAAM,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IAC9C,MAAM,EAAE,eAAe,CAAC;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,eAAe,KAAK,WAAW,EAAE,CAAC,CAAC;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAY,EAAE,GAAgB,EAAE,EAAE,gBAAgB,+BAqFvG"}

package/dist/telemetry/ui/components/dashboard/TopProblems.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Top problems — issue #578, epic #576.
+ *
+ * The ten request paths with the most 5xx responses (then 4xx except 401,
+ * then highest p95), and
+ * the ten most frequent error log messages — ranked by the API. Two panels,
+ * each fetched on its own so one failing leaves the other working.
+ *
+ * A route no route of the running API matches (#650, `unknown`: a 404 from
+ * the not-found handler — e.g. a web build calling a route its API lacks)
+ * carries an "unknown route" chip beside its path.
+ *
+ * Desktop: two tables side by side. Tablet: stacked. Phone: ONE panel with a
+ * Routes / Errors toggle and a card list instead of a table.
+ */
+import { useState } from 'react';
+import { Box, Chip, Grid, List, ListItem, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
+import { DashboardPanel } from './DashboardPanel.js';
+import { formatDuration, formatRelative, formatTimestamp } from '../../../headless/lib/format.js';
+import { useTelemetryTokens } from '../../../theme/telemetryTokens.js';
+const pct = (value) => `${value.toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
+const ms = (value) => (value === null ? '—' : formatDuration(value));
+/** `clientErrors` is always sent by a current API; `—` if an older one omits it. */
+const clientErrorsText = (item) => item.clientErrors === undefined ? '—' : item.clientErrors.toLocaleString();
+function UnknownRouteChip() {
+    return (_jsx(Chip, { label: "unknown route", size: "small", color: "warning", variant: "outlined", "data-testid": "unknown-route-chip", title: "No route of the running API matches this method and path (404 from the not-found handler)", sx: { ml: 0.75, height: 20, fontSize: '0.7rem', fontFamily: (theme) => theme.typography.fontFamily, verticalAlign: 'middle' } }));
+}
+const clamp = (lines) => ({
+    display: '-webkit-box',
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    wordBreak: 'break-word',
+});
+function RoutesTable({ items }) {
+    const tokens = useTelemetryTokens();
+    return (_jsx(TableContainer, { sx: { overflowX: 'auto' }, children: _jsxs(Table, { size: "small", "aria-label": "Top routes", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Method" }), _jsx(TableCell, { children: "Route" }), _jsx(TableCell, { align: "right", children: "Requests" }), _jsx(TableCell, { align: "right", children: "5xx" }), _jsx(TableCell, { align: "right", title: "4xx responses except 401", children: "4xx" }), _jsx(TableCell, { align: "right", children: "p95" })] }) }), _jsx(TableBody, { children: items.map((item, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { sx: { fontFamily: 'monospace' }, children: item.method ?? '—' }), _jsxs(TableCell, { sx: { fontFamily: 'monospace', overflowWrap: 'anywhere', minWidth: 200 }, children: [item.route ?? '—', item.unknown && _jsx(UnknownRouteChip, {})] }), _jsx(TableCell, { align: "right", children: item.count.toLocaleString() }), _jsx(TableCell, { align: "right", sx: { color: item.errors > 0 ? tokens.status.crit : undefined, whiteSpace: 'nowrap' }, children: pct(item.errorRatePct) }), _jsx(TableCell, { align: "right", sx: { color: (item.clientErrors ?? 0) > 0 ? tokens.status.warn : undefined, whiteSpace: 'nowrap' }, children: clientErrorsText(item) }), _jsx(TableCell, { align: "right", sx: { whiteSpace: 'nowrap' }, children: ms(item.p95Ms) })] }, `${item.method}-${item.route}-${index}`))) })] }) }));
+}
+function ErrorsTable({ items, now }) {
+    return (_jsx(TableContainer, { sx: { overflowX: 'auto' }, children: _jsxs(Table, { size: "small", "aria-label": "Top errors", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Message" }), _jsx(TableCell, { align: "right", children: "Count" }), _jsx(TableCell, { children: "First seen" }), _jsx(TableCell, { children: "Last seen" }), _jsx(TableCell, { children: "Service" })] }) }), _jsx(TableBody, { children: items.map((item, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { sx: { minWidth: 160 }, children: _jsx(Box, { sx: clamp(2), title: item.message ?? undefined, children: item.message ?? '—' }) }), _jsx(TableCell, { align: "right", children: item.count.toLocaleString() }), _jsx(TableCell, { sx: { whiteSpace: 'nowrap' }, title: formatTimestamp(item.firstSeen), children: item.firstSeen ? formatRelative(item.firstSeen, now) : '—' }), _jsx(TableCell, { sx: { whiteSpace: 'nowrap' }, title: formatTimestamp(item.lastSeen), children: item.lastSeen ? formatRelative(item.lastSeen, now) : '—' }), _jsx(TableCell, { sx: { wordBreak: 'break-word' }, children: item.service ?? '—' })] }, `${item.message}-${index}`))) })] }) }));
+}
+function RoutesCards({ items }) {
+    const tokens = useTelemetryTokens();
+    return (_jsx(List, { disablePadding: true, "aria-label": "Top routes", children: items.map((item, index) => (_jsxs(ListItem, { divider: true, sx: { px: 0, display: 'block' }, children: [_jsxs(Typography, { variant: "body2", sx: { fontFamily: 'monospace', wordBreak: 'break-all' }, children: [_jsx("strong", { children: item.method ?? '—' }), " ", item.route ?? '—', item.unknown && _jsx(UnknownRouteChip, {})] }), _jsxs(Typography, { variant: "caption", color: "text.secondary", children: [item.count.toLocaleString(), " req \u00B7", ' ', _jsxs(Box, { component: "span", sx: { color: item.errors > 0 ? tokens.status.crit : undefined }, children: [pct(item.errorRatePct), " 5xx"] }), ' ', "\u00B7", ' ', _jsxs(Box, { component: "span", sx: { color: (item.clientErrors ?? 0) > 0 ? tokens.status.warn : undefined }, children: [clientErrorsText(item), " 4xx"] }), ' ', "\u00B7 p95 ", ms(item.p95Ms)] })] }, `${item.method}-${item.route}-${index}`))) }));
+}
+function ErrorsCards({ items, now }) {
+    return (_jsx(List, { disablePadding: true, "aria-label": "Top errors", children: items.map((item, index) => (_jsxs(ListItem, { divider: true, sx: { px: 0, display: 'block' }, children: [_jsx(Typography, { variant: "body2", sx: clamp(2), children: item.message ?? '—' }), _jsxs(Typography, { variant: "caption", color: "text.secondary", children: [item.count.toLocaleString(), "\u00D7 \u00B7 last ", item.lastSeen ? formatRelative(item.lastSeen, now) : '—', item.service ? ` · ${item.service}` : ''] })] }, `${item.message}-${index}`))) }));
+}
+export function TopProblems({ routes, errors, layout, actions = [], now = Date.now() }) {
+    const [kind, setKind] = useState('routes');
+    const actionsOf = (which) => (typeof actions === 'function' ? actions(which) : actions);
+    const routesPanel = (_jsx(DashboardPanel, { id: "panel-top-routes", title: "Top failing routes", actions: actionsOf('routes'), sql: routes.data?.sql, isLoading: routes.isLoading, isRefreshing: routes.isRefreshing, error: routes.error, onRetry: routes.reload, isEmpty: !!routes.data && routes.data.items.length === 0, emptyMessage: "No requests in this window.", children: routes.data && _jsx(RoutesTable, { items: routes.data.items }) }));
+    const errorsPanel = (_jsx(DashboardPanel, { id: "panel-top-errors", title: "Top errors", actions: actionsOf('errors'), sql: errors.data?.sql, isLoading: errors.isLoading, isRefreshing: errors.isRefreshing, error: errors.error, onRetry: errors.reload, isEmpty: !!errors.data && errors.data.items.length === 0, emptyMessage: "No error logs in this window.", children: errors.data && _jsx(ErrorsTable, { items: errors.data.items, now: now }) }));
+    if (layout === 'phone') {
+        const active = kind === 'routes' ? routes : errors;
+        return (_jsxs(DashboardPanel, { id: "panel-top", title: "Top problems", headerExtra: _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", "aria-label": "Top problems view", value: kind, onChange: (_event, next) => next && setKind(next), children: [_jsx(ToggleButton, { value: "routes", sx: { minHeight: 44, textTransform: 'none' }, children: "Routes" }), _jsx(ToggleButton, { value: "errors", sx: { minHeight: 44, textTransform: 'none' }, children: "Errors" })] }), actions: actionsOf(kind), sql: active.data?.sql, isLoading: active.isLoading, isRefreshing: active.isRefreshing, error: active.error, onRetry: active.reload, isEmpty: !!active.data && active.data.items.length === 0, emptyMessage: kind === 'routes' ? 'No requests in this window.' : 'No error logs in this window.', children: [kind === 'routes' && routes.data && _jsx(RoutesCards, { items: routes.data.items }), kind === 'errors' && errors.data && _jsx(ErrorsCards, { items: errors.data.items, now: now })] }));
+    }
+    return (_jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { size: { xs: 12, lg: 6 }, sx: { minWidth: 0 }, children: routesPanel }), _jsx(Grid, { size: { xs: 12, lg: 6 }, sx: { minWidth: 0 }, children: errorsPanel })] }));
+}
+//# sourceMappingURL=TopProblems.js.map

package/dist/telemetry/ui/components/dashboard/TopProblems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopProblems.js","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/TopProblems.tsx"],"names":[],"mappings":"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"}

package/dist/telemetry/ui/components/dashboard/UnknownRoutesPanel.d.ts

@@ -0,0 +1,12 @@
+import type { DashboardUnknownRoutes } from '../../../headless/services/telemetryDashboard.js';
+import { type PanelAction } from './DashboardPanel.js';
+export declare const UNKNOWN_ROUTES_TITLE = "Unknown API routes";
+export interface UnknownRoutesPanelProps {
+    unknownRoutes: DashboardUnknownRoutes;
+    /** The statements that computed the block (`unknownRoutesSql`), handed to the actions. */
+    sql: string[];
+    actions?: PanelAction[];
+    isRefreshing?: boolean;
+}
+export declare function UnknownRoutesPanel({ unknownRoutes, sql, actions, isRefreshing }: UnknownRoutesPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=UnknownRoutesPanel.d.ts.map

package/dist/telemetry/ui/components/dashboard/UnknownRoutesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnknownRoutesPanel.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/UnknownRoutesPanel.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAyB,sBAAsB,EAAE,MAAM,kDAAkD,CAAC;AACtH,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvE,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AAoBzD,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,sBAAsB,CAAC;IACtC,0FAA0F;IAC1F,GAAG,EAAE,MAAM,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,OAAY,EAAE,YAAoB,EAAE,EAAE,uBAAuB,+BAsDrH"}

package/dist/telemetry/ui/components/dashboard/UnknownRoutesPanel.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Unknown API routes — issue #650.
+ *
+ * Requests the API answered from its not-found handler: no route of the
+ * running build matches the method and path. With a bearer token they come
+ * from the application itself — typically a web build calling a route its API
+ * lacks after a deploy ("Cannot GET /api/coach/messages") — and the API
+ * degrades the verdict; without one they are usually internet scanners and
+ * are only counted.
+ *
+ * Shows the summary's `unknownRoutes.topRoutes` (at most 5, bearer requests
+ * first, as the API ranked them): `METHOD /path`, the request count, and an
+ * "app" chip (some requests carried a bearer) or an "anonymous" one. The
+ * page renders it only when the block is present and counted a request
+ * (`hasUnknownRoutes`); it is a compact list at every width, so it fits a
+ * 390px phone without a table.
+ */
+import { Box, Chip, List, ListItem, Typography } from '@mui/material';
+import { DashboardPanel } from './DashboardPanel.js';
+import { UNKNOWN_ROUTES_ANCHOR } from '../../../headless/lib/unknownRoutes.js';
+import { useTelemetryTokens } from '../../../theme/telemetryTokens.js';
+export const UNKNOWN_ROUTES_TITLE = 'Unknown API routes';
+function routeTitle(item) {
+    return `${item.count.toLocaleString()} requests: ${item.bearer.toLocaleString()} from the app (with a bearer token), ${item.anonymous.toLocaleString()} anonymous`;
+}
+function SourceChip({ item }) {
+    const fromApp = item.bearer > 0;
+    return (_jsx(Chip, { size: "small", label: fromApp ? 'app' : 'anonymous', color: fromApp ? 'warning' : 'default', variant: "outlined", "data-testid": "unknown-route-source", sx: { height: 22, fontSize: '0.75rem' } }));
+}
+export function UnknownRoutesPanel({ unknownRoutes, sql, actions = [], isRefreshing = false }) {
+    const { requests, bearer, anonymous, topRoutes, truncated } = unknownRoutes;
+    const tokens = useTelemetryTokens();
+    return (_jsxs(DashboardPanel, { id: "panel-unknown-routes", anchorId: UNKNOWN_ROUTES_ANCHOR, title: UNKNOWN_ROUTES_TITLE, actions: actions, sql: sql, isRefreshing: isRefreshing, isEmpty: topRoutes.length === 0, emptyMessage: "No unknown routes listed for this window.", children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, "data-testid": "unknown-routes-summary", children: [requests.toLocaleString(), " ", requests === 1 ? 'request' : 'requests', " to routes this API does not have:", ' ', _jsxs(Box, { component: "span", sx: { color: bearer > 0 ? tokens.status.warn : undefined, fontWeight: bearer > 0 ? 600 : undefined }, children: [bearer.toLocaleString(), " from the app"] }), ", ", anonymous.toLocaleString(), " anonymous.", bearer > 0 && ' Requests from the app usually mean the web and API versions differ, e.g. after a deploy.'] }), _jsx(List, { disablePadding: true, "aria-label": UNKNOWN_ROUTES_TITLE, children: topRoutes.map((item, index) => (_jsxs(ListItem, { divider: index < topRoutes.length - 1, title: routeTitle(item), sx: { px: 0, py: 0.75, gap: 1, alignItems: 'center' }, children: [_jsxs(Typography, { variant: "body2", sx: { fontFamily: 'monospace', flex: 1, minWidth: 0, overflowWrap: 'anywhere' }, children: [_jsx("strong", { children: item.method ?? '—' }), " ", item.route ?? '—'] }), _jsx(SourceChip, { item: item }), _jsx(Typography, { variant: "body2", sx: { minWidth: 40, textAlign: 'right', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }, "aria-label": `${item.count.toLocaleString()} requests`, children: item.count.toLocaleString() })] }, `${item.method}-${item.route}-${index}`))) }), truncated && (_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mt: 0.5 }, children: "More unknown routes were requested; the most-hit are listed." }))] }));
+}
+//# sourceMappingURL=UnknownRoutesPanel.js.map

package/dist/telemetry/ui/components/dashboard/UnknownRoutesPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnknownRoutesPanel.js","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/UnknownRoutesPanel.tsx"],"names":[],"mappings":"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"}

package/dist/telemetry/ui/components/dashboard/VerdictBanner.d.ts

@@ -0,0 +1,35 @@
+import { type AlertColor } from '@mui/material';
+import type { SvgIconComponent } from '@mui/icons-material';
+import type { DashboardVerdictLevel } from '../../../headless/services/telemetryDashboard.js';
+import type { TelemetryErrorInfo } from '../../../headless/hooks/useTelemetryExplorer.js';
+interface LevelMeta {
+    label: string;
+    Icon: SvgIconComponent;
+    /** `null` = neutral grey (no data). */
+    severity: AlertColor | null;
+}
+export declare const VERDICT_META: Record<DashboardVerdictLevel, LevelMeta>;
+export interface VerdictBannerProps {
+    verdict: {
+        level: DashboardVerdictLevel;
+        reasons: string[];
+    } | null;
+    isLoading?: boolean;
+    error?: TelemetryErrorInfo | null;
+    onRetry?: () => void;
+    /** Phone layout: one line, tap to expand. */
+    compact?: boolean;
+    /** One button on the banner (#579: "Explain this"). */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** A link after a reason (#602: to the section it is about), or null for none. */
+    reasonAction?: (reason: string) => {
+        label: string;
+        onClick: () => void;
+    } | null;
+}
+export declare function VerdictBanner({ verdict, isLoading, error, onRetry, compact, action, reasonAction, }: VerdictBannerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=VerdictBanner.d.ts.map

package/dist/telemetry/ui/components/dashboard/VerdictBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerdictBanner.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/VerdictBanner.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAA8D,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAM5G,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC;AAC9F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAG1F,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,gBAAgB,CAAC;IACvB,uCAAuC;IACvC,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,qBAAqB,EAAE,SAAS,CAKjE,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE;QAAE,KAAK,EAAE,qBAAqB,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI,CAAC;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,kFAAkF;IAClF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;CAClF;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAiB,EACjB,KAAY,EACZ,OAAO,EACP,OAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,kBAAkB,+BA+GpB"}