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

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The Telemetry Dashboard's verdict — issue #578, epic #576.
+ *
+ * The first thing on the page answers "is anything wrong?". The level and its
+ * reasons are the API's (`summary.verdict`); this only presents them. Every
+ * level carries an icon AND a word, never colour alone, and the banner is a
+ * polite live region, so a verdict that changes on auto-refresh is announced.
+ *
+ * On phones it collapses to one line (level + first reason) and expands on
+ * tap (`aria-expanded`).
+ *
+ * `action` (#579) adds one button to the banner — the dashboard's "Explain
+ * this", which opens the assistant with the verdict prefilled.
+ *
+ * `reasonAction` (#602) adds a link after a reason — "Show Database" — that
+ * takes the reader to the section the reason is about (the page decides which
+ * reasons have one, and only for sections on screen).
+ */
+import { useId, useState } from 'react';
+import { Alert, Box, Button, ButtonBase, Link, Skeleton, Typography } from '@mui/material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutlineOutlined';
+import CloudOffOutlinedIcon from '@mui/icons-material/CloudOffOutlined';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { PanelError } from './DashboardPanel.js';
+export const VERDICT_META = {
+    healthy: { label: 'Healthy', Icon: CheckCircleOutlineIcon, severity: 'success' },
+    degraded: { label: 'Degraded', Icon: WarningAmberIcon, severity: 'warning' },
+    critical: { label: 'Critical', Icon: ErrorOutlineIcon, severity: 'error' },
+    no_data: { label: 'No telemetry received', Icon: CloudOffOutlinedIcon, severity: null },
+};
+export function VerdictBanner({ verdict, isLoading = false, error = null, onRetry, compact = false, action, reasonAction, }) {
+    const [expanded, setExpanded] = useState(false);
+    const reasonsId = useId();
+    if (error)
+        return _jsx(PanelError, { error: error, onRetry: onRetry });
+    if (isLoading || !verdict) {
+        return _jsx(Skeleton, { variant: "rounded", height: compact ? 48 : 64, "data-testid": "verdict-skeleton" });
+    }
+    const meta = VERDICT_META[verdict.level] ?? VERDICT_META.no_data;
+    const reasons = verdict.reasons;
+    const neutral = meta.severity === null;
+    const canExpand = compact && reasons.length > 0;
+    const reasonList = (hidden) => reasons.length > 0 && (_jsx(Box, { component: "ul", id: reasonsId, hidden: hidden, sx: { m: 0, mt: 0.5, pl: 2.5 }, children: reasons.map((reason, index) => {
+            const link = reasonAction?.(reason) ?? null;
+            return (_jsxs(Typography, { component: "li", variant: "body2", sx: { wordBreak: 'break-word' }, children: [reason, link && (_jsxs(_Fragment, { children: [' ', _jsx(Link, { component: "button", type: "button", variant: "body2", color: "inherit", onClick: link.onClick, sx: { fontWeight: 600, verticalAlign: 'baseline', textAlign: 'left' }, children: link.label })] }))] }, `${index}-${reason}`));
+        }) }));
+    return (_jsx(Alert, { role: "status", "aria-live": "polite", "data-testid": "verdict-banner", "data-level": verdict.level, severity: meta.severity ?? 'info', icon: _jsx(meta.Icon, { "aria-hidden": true }), action: action ? (_jsx(Button, { color: "inherit", size: "small", onClick: action.onClick, sx: { minHeight: 44, whiteSpace: 'nowrap', alignSelf: 'center' }, children: action.label })) : undefined, sx: {
+            minWidth: 0,
+            '& .MuiAlert-message': { minWidth: 0, flex: 1 },
+            ...(neutral && {
+                bgcolor: 'action.hover',
+                color: 'text.primary',
+                '& .MuiAlert-icon': { color: 'text.secondary' },
+            }),
+        }, children: canExpand ? (_jsxs(_Fragment, { children: [_jsxs(ButtonBase, { onClick: () => setExpanded((open) => !open), "aria-expanded": expanded, "aria-controls": reasonsId, sx: {
+                        display: 'flex',
+                        width: '100%',
+                        minHeight: 44,
+                        justifyContent: 'space-between',
+                        textAlign: 'left',
+                        gap: 1,
+                        borderRadius: 1,
+                    }, children: [_jsxs(Typography, { variant: "body2", noWrap: !expanded, sx: { minWidth: 0, flex: 1 }, children: [_jsx("strong", { children: meta.label }), !expanded && ` · ${reasons[0]}`] }), _jsx(ExpandMoreIcon, { "aria-hidden": true, fontSize: "small", sx: { transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 150ms' } })] }), reasonList(!expanded)] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "subtitle1", component: "p", sx: { fontWeight: 600, lineHeight: 1.4 }, children: meta.label }), reasonList(false)] })) }));
+}
+//# sourceMappingURL=VerdictBanner.js.map

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

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

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

@@ -0,0 +1,9 @@
+export interface ZoomBrushProps {
+    /** The band values, in order (bucket start timestamps). */
+    values: string[];
+    drag: boolean;
+    tap: boolean;
+    onSelect: (startIndex: number, endIndex: number) => void;
+}
+export declare function ZoomBrush({ values, drag, tap, onSelect }: ZoomBrushProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ZoomBrush.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomBrush.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/ZoomBrush.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,cAAc;IAC7B,2DAA2D;IAC3D,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAQD,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,cAAc,sCAwGxE"}

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Zoom by selection over a band-scaled time chart — issue #578, epic #576.
+ *
+ * `@mui/x-charts`' community brush reports coordinates, not a data range, so
+ * this is a small overlay of our own: a transparent rect over the drawing area
+ * that maps pointer x to the nearest bucket through the chart's own x scale.
+ *
+ * - `drag`: press, drag across buckets, release → `onSelect(first, last)`.
+ * - `tap`:  press and release in place → `onSelect(i, i)` (one bucket).
+ *
+ * Rendered as a CHILD of the chart surface (it reads the chart context).
+ * `touch-action: pan-y` keeps vertical page scrolling working on touch
+ * screens while a horizontal drag selects. Keyboard users zoom with the range
+ * selector instead; this is a pointer shortcut, not the only way in.
+ */
+import { useRef, useState } from 'react';
+import { useTheme } from '@mui/material';
+import { useDrawingArea, useXScale } from '@mui/x-charts/hooks';
+/** Pixels a pointer must travel before a press counts as a drag, not a tap. */
+const DRAG_THRESHOLD_PX = 6;
+export function ZoomBrush({ values, drag, tap, onSelect }) {
+    const theme = useTheme();
+    const area = useDrawingArea();
+    const scale = useXScale();
+    const press = useRef(null);
+    const [selection, setSelection] = useState(null);
+    if (!drag && !tap)
+        return null;
+    if (values.length === 0 || area.width <= 0 || typeof scale?.bandwidth !== 'function')
+        return null;
+    const bandwidth = scale.bandwidth();
+    const indexAt = (clientX, target) => {
+        const svg = target.ownerSVGElement ?? target;
+        const x = clientX - svg.getBoundingClientRect().left;
+        let best = 0;
+        let bestDistance = Number.POSITIVE_INFINITY;
+        values.forEach((value, index) => {
+            const start = scale(value);
+            if (start === undefined)
+                return;
+            const distance = Math.abs(start + bandwidth / 2 - x);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                best = index;
+            }
+        });
+        return best;
+    };
+    const onPointerDown = (event) => {
+        if (event.button !== 0)
+            return;
+        const index = indexAt(event.clientX, event.currentTarget);
+        press.current = { index, x: event.clientX, pointerId: event.pointerId };
+        if (drag) {
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            setSelection({ a: index, b: index });
+        }
+    };
+    const onPointerMove = (event) => {
+        if (!drag || !press.current || press.current.pointerId !== event.pointerId)
+            return;
+        const index = indexAt(event.clientX, event.currentTarget);
+        setSelection((current) => (current && current.b !== index ? { a: current.a, b: index } : current));
+    };
+    const finish = (event) => {
+        const started = press.current;
+        press.current = null;
+        setSelection(null);
+        if (!started || started.pointerId !== event.pointerId)
+            return;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        const moved = Math.abs(event.clientX - started.x) >= DRAG_THRESHOLD_PX;
+        const index = indexAt(event.clientX, event.currentTarget);
+        if (drag && moved && index !== started.index) {
+            onSelect(Math.min(started.index, index), Math.max(started.index, index));
+        }
+        else if (tap && !moved) {
+            onSelect(started.index, started.index);
+        }
+    };
+    const cancel = () => {
+        press.current = null;
+        setSelection(null);
+    };
+    let highlight = null;
+    if (selection && selection.a !== selection.b) {
+        const first = Math.min(selection.a, selection.b);
+        const last = Math.max(selection.a, selection.b);
+        const x1 = scale(values[first]) ?? area.left;
+        const x2 = (scale(values[last]) ?? area.left) + bandwidth;
+        highlight = (_jsx("rect", { "data-testid": "zoom-selection", x: x1, y: area.top, width: Math.max(0, x2 - x1), height: area.height, fill: theme.palette.primary.main, fillOpacity: 0.15, stroke: theme.palette.primary.main, strokeOpacity: 0.5, pointerEvents: "none" }));
+    }
+    return (_jsxs("g", { children: [highlight, _jsx("rect", { "data-testid": "zoom-brush", x: area.left, y: area.top, width: area.width, height: area.height, fill: "transparent", style: { touchAction: 'pan-y', cursor: drag ? 'crosshair' : 'pointer' }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finish, onPointerCancel: cancel })] }));
+}
+//# sourceMappingURL=ZoomBrush.js.map

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

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

package/dist/telemetry/ui/components/dashboard/metrics/MetricSections.d.ts

@@ -0,0 +1,54 @@
+import type { MetricGroupPresentation } from '@marinoscar/platform-contract/telemetry';
+import type { DashboardResource } from '../../../../headless/hooks/useTelemetryDashboard.js';
+import type { DashboardMetricGroup, DashboardMetricTable, DashboardMetrics, DashboardTile } from '../../../../headless/services/telemetryDashboard.js';
+import type { AssistantPanelContext } from '../../../../headless/lib/dashboard/assistantPrompt.js';
+import { type PanelAction } from '../DashboardPanel.js';
+import type { DashboardLayout } from '../DashboardFilterBar.js';
+import { type MetricSectionMeta } from '../../../../headless/lib/metrics/metricSections.js';
+/**
+ * The section's tiles, in the presentation's order, that the response carries.
+ *
+ * @param group - the group id.
+ * @param data - the group's `/metrics` response.
+ * @param presentation - the group's served presentation; a platform group falls back to its own.
+ * @returns the tiles to draw.
+ */
+export declare function sectionTiles(group: DashboardMetricGroup, data: DashboardMetrics, presentation?: MetricGroupPresentation | null): DashboardTile[];
+/** The section's tables, in the presentation's order, that the response carries. */
+export declare function sectionTables(group: DashboardMetricGroup, data: DashboardMetrics, presentation?: MetricGroupPresentation | null): DashboardMetricTable[];
+/** What "Ask assistant" describes for a section; `title` is the section title the API gives it. */
+export declare function metricsAssistantContext(group: DashboardMetricGroup, data: DashboardMetrics, title: string, presentation?: MetricGroupPresentation | null): AssistantPanelContext;
+/**
+ * A freshness window as words: `150000` → "2 min 30 s", `300000` → "5 min",
+ * `45000` → "45 s".
+ */
+export declare function formatFreshWindow(ms: number): string;
+/** Whether a section has anything to draw for the response. */
+export declare function sectionHasContent(group: DashboardMetricGroup, data: DashboardMetrics, presentation?: MetricGroupPresentation | null): boolean;
+export interface MetricSectionProps {
+    group: DashboardMetricGroup;
+    /** The section title, from `/metric-groups` (#680). */
+    title: string;
+    resource: DashboardResource<DashboardMetrics>;
+    actions: PanelAction[];
+    layout: DashboardLayout;
+    spanMs: number;
+    /** For relative times; the page's clock. */
+    now?: number;
+    /** The group's `presentation` from `/metric-groups`; a platform group falls back to its own, any other to the defaults. */
+    presentation?: MetricGroupPresentation | null;
+}
+/**
+ * One infrastructure section. Hidden entirely once the API says the group is
+ * not `available`; until the first answer it shows the panel's skeleton, and a
+ * failure is this section's own (Retry refetches it alone).
+ */
+export declare function MetricSection({ group, title, resource, actions, layout, spanMs, now, presentation }: MetricSectionProps): import("react").JSX.Element | null;
+/**
+ * The one-line hint for the groups the store has nothing of (#602): their
+ * sections are hidden, so say which, rather than leave the reader wondering.
+ */
+export declare function MetricsNotCollected({ groups }: {
+    groups: readonly Pick<MetricSectionMeta, 'title'>[];
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=MetricSections.d.ts.map

package/dist/telemetry/ui/components/dashboard/metrics/MetricSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricSections.d.ts","sourceRoot":"","sources":["../../../../../../src/telemetry/ui/components/dashboard/metrics/MetricSections.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,uBAAuB,EAAsB,MAAM,yCAAyC,CAAC;AAC3G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAC7F,OAAO,KAAK,EACV,oBAAoB,EAEpB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACd,MAAM,qDAAqD,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AACnG,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAUhE,OAAO,EAAsC,KAAK,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAwGhI;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,oBAAoB,EAC3B,IAAI,EAAE,gBAAgB,EACtB,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,GAC5C,aAAa,EAAE,CAEjB;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,oBAAoB,EAC3B,IAAI,EAAE,gBAAgB,EACtB,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,GAC5C,oBAAoB,EAAE,CAExB;AAMD,mGAAmG;AACnG,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,oBAAoB,EAC3B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,MAAM,EACb,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,GAC5C,qBAAqB,CASvB;AAqFD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMpD;AA2BD,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,oBAAoB,EAC3B,IAAI,EAAE,gBAAgB,EACtB,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,GAC5C,OAAO,CAOT;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2HAA2H;IAC3H,YAAY,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;CAC/C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,kBAAkB,sCAsBvH;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,EAAE,CAAA;CAAE,sCAOtG"}

package/dist/telemetry/ui/components/dashboard/metrics/MetricSections.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid, Stack, Typography, useTheme } from '@mui/material';
+import { DashboardPanel } from '../DashboardPanel.js';
+import { KpiTiles } from '../KpiTiles.js';
+import { MetricSeriesChart } from './MetricSeriesChart.js';
+import { MetricTable, StatusCell, UtilizationBar, } from './MetricTable.js';
+import { metricPanelId, metricSectionAnchor } from '../../../../headless/lib/metrics/metricSections.js';
+import { byFirstValueDesc, colorOfToken, planTiles, presentationFor, sectionPlan, withVirtualColumns, } from '../../../../headless/lib/metrics/presentation.js';
+import { telemetryTokens } from '../../../../theme/telemetryTokens.js';
+/** Failing rows first (`up === false`, `noEligibleNode === true`); stable otherwise. */
+const problemsFirst = (a, b) => Number(b.up === false || b.noEligibleNode === true) - Number(a.up === false || a.noEligibleNode === true);
+/**
+ * A presentation column as the table component's column spec: a bar, a
+ * status or a fraction replaces the unit-formatted cell, and a column the
+ * response lacks is skipped (`requires`).
+ */
+function columnSpec(column) {
+    const display = column.display;
+    if (!display)
+        return { key: column.key, ...(column.label !== undefined ? { label: column.label } : {}) };
+    const label = column.label !== undefined ? { label: column.label } : {};
+    switch (display.kind) {
+        case 'utilization-bar':
+            return {
+                key: column.key,
+                ...label,
+                requires: [column.key],
+                render: (row, responseColumn) => (_jsx(UtilizationBar, { value: row[column.key] ?? null, label: `${responseColumn?.label ?? column.label ?? column.key} on ${String(row.key)}`, ...(display.warnAt !== undefined ? { warnAt: display.warnAt } : {}), ...(display.criticalAt !== undefined ? { criticalAt: display.criticalAt } : {}) })),
+            };
+        case 'status':
+            return {
+                key: column.key,
+                ...label,
+                requires: [column.key],
+                render: (row) => {
+                    const value = row[column.key];
+                    return (_jsx(StatusCell, { ok: display.invert ? (typeof value === 'boolean' ? !value : null) : (value ?? null), okText: display.okText, badText: display.badText }));
+                },
+            };
+        case 'fraction': {
+            const used = display.of[0] ?? '';
+            const total = display.of[1] ?? '';
+            return {
+                key: column.key,
+                ...label,
+                requires: [used, total],
+                render: (row) => row[used] === null && row[total] === null
+                    ? '—'
+                    : `${typeof row[used] === 'number' ? row[used] : '—'} / ${typeof row[total] === 'number' ? row[total] : '—'}`,
+            };
+        }
+    }
+}
+/** What the table component needs for a table plan. */
+function tableProps(plan, table) {
+    return {
+        columns: plan.columns?.map(columnSpec),
+        sortRows: plan.sort === 'problems-first' ? problemsFirst : plan.sort === 'value-desc' ? byFirstValueDesc(table) : undefined,
+        topN: plan.topN,
+    };
+}
+/** The tables of the plan that the response carries, virtual columns applied, in the plan's order. */
+function planTables(data, plan, spanMs) {
+    return plan.tables.flatMap((tablePlan) => data.tables
+        .filter((table) => table.key === tablePlan.key)
+        .map((table) => {
+        const withColumns = withVirtualColumns(table, plan.virtualColumns, spanMs);
+        return {
+            table: tablePlan.label !== undefined ? { ...withColumns, label: tablePlan.label } : withColumns,
+            tablePlan,
+        };
+    }));
+}
+/**
+ * The section's tiles, in the presentation's order, that the response carries.
+ *
+ * @param group - the group id.
+ * @param data - the group's `/metrics` response.
+ * @param presentation - the group's served presentation; a platform group falls back to its own.
+ * @returns the tiles to draw.
+ */
+export function sectionTiles(group, data, presentation) {
+    return planTiles(data, sectionPlan(data, presentationFor(group, presentation)));
+}
+/** The section's tables, in the presentation's order, that the response carries. */
+export function sectionTables(group, data, presentation) {
+    return planTables(data, sectionPlan(data, presentationFor(group, presentation)), 0).map(({ table }) => table);
+}
+function chartSeries(chart, data) {
+    return chart.keys.flatMap((key) => data.series.filter((series) => series.key === key));
+}
+/** What "Ask assistant" describes for a section; `title` is the section title the API gives it. */
+export function metricsAssistantContext(group, data, title, presentation) {
+    return {
+        kind: 'metrics',
+        title,
+        group,
+        tiles: sectionTiles(group, data, presentation),
+        tables: sectionTables(group, data, presentation),
+        skipped: data.skipped,
+    };
+}
+function SectionBody({ group, data, layout, spanMs, now, presentation, }) {
+    const theme = useTheme();
+    const plan = sectionPlan(data, presentationFor(group, presentation));
+    const tiles = planTiles(data, plan);
+    const tokens = telemetryTokens(theme);
+    // A tile asks for a theme colour by token; the web resolves it (it never receives a CSS colour).
+    const tileColors = Object.fromEntries(plan.tiles.flatMap((spec) => (spec.color ? [[spec.metric, colorOfToken(spec.color, tokens)]] : [])));
+    const charts = plan.charts
+        .map((chart) => ({ chart, series: chartSeries(chart, data) }))
+        .filter(({ series }) => series.length > 0);
+    const tables = planTables(data, plan, spanMs);
+    const both = charts.length > 0 && tables.length > 0;
+    const compact = layout === 'phone';
+    const notes = [];
+    if (data.skipped.length > 0) {
+        notes.push(_jsx("span", { title: data.skipped.join(', '), children: data.skipped.length === 1
+                ? '1 metric of this section is not collected in this store.'
+                : `${data.skipped.length} metrics of this section are not collected in this store.` }, "skipped"));
+    }
+    if (data.truncated)
+        notes.push(_jsx("span", { children: "Some lists were cut short." }, "truncated"));
+    return (_jsxs(Stack, { spacing: { xs: 1.5, sm: 2 }, sx: { minWidth: 0 }, children: [tiles.length > 0 && (_jsx(KpiTiles, { tiles: tiles, now: now, testId: `metric-tiles-${group}`, ...(Object.keys(tileColors).length > 0 ? { colors: tileColors } : {}) })), (charts.length > 0 || tables.length > 0) && (_jsxs(Grid, { container: true, spacing: { xs: 1.5, sm: 2 }, children: [charts.map(({ chart, series }) => (_jsx(Grid, { size: { xs: 12, lg: both ? 5 : 12 }, sx: { minWidth: 0 }, children: _jsx(MetricSeriesChart, { title: chart.title, series: series, height: compact ? 200 : 240, spanMs: spanMs, compact: compact, testId: `metric-chart-${group}`, colorFor: (s) => (s.groupBy && chart.colors?.[s.groupBy] ? colorOfToken(chart.colors[s.groupBy], tokens) : undefined) }) }, chart.title))), tables.map(({ table, tablePlan }) => (_jsx(Grid, { size: { xs: 12, lg: both ? 7 : 12 }, sx: { minWidth: 0 }, children: _jsx(MetricTable, { table: table, ...tableProps(tablePlan, table), now: now }) }, table.key)))] })), notes.length > 0 && (_jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", sx: { m: 0, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: notes }))] }));
+}
+/**
+ * A freshness window as words: `150000` → "2 min 30 s", `300000` → "5 min",
+ * `45000` → "45 s".
+ */
+export function formatFreshWindow(ms) {
+    const totalSeconds = Math.max(1, Math.round(ms / 1000));
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (minutes === 0)
+        return `${seconds} s`;
+    return seconds === 0 ? `${minutes} min` : `${minutes} min ${seconds} s`;
+}
+/**
+ * The section header's freshness note, or `undefined`: shown when the API
+ * reports its window (`freshMs`) and the section has a table, the only place
+ * the window applies.
+ */
+function freshWindowNote(group, data, presentation) {
+    if (!data || data.freshMs === undefined || sectionTables(group, data, presentation).length === 0)
+        return undefined;
+    const window = formatFreshWindow(data.freshMs);
+    return (_jsxs(Typography, { variant: "caption", color: "text.secondary", "data-testid": `metric-fresh-window-${group}`, title: `A table reading more than ${window} older than its table's newest reading is not shown as current.`, sx: { whiteSpace: 'nowrap' }, children: ["Current within ", window] }));
+}
+/** Whether a section has anything to draw for the response. */
+export function sectionHasContent(group, data, presentation) {
+    const plan = sectionPlan(data, presentationFor(group, presentation));
+    return (planTiles(data, plan).length > 0 ||
+        plan.charts.some((chart) => chartSeries(chart, data).length > 0) ||
+        planTables(data, plan, 0).length > 0);
+}
+/**
+ * One infrastructure section. Hidden entirely once the API says the group is
+ * not `available`; until the first answer it shows the panel's skeleton, and a
+ * failure is this section's own (Retry refetches it alone).
+ */
+export function MetricSection({ group, title, resource, actions, layout, spanMs, now, presentation }) {
+    const { data } = resource;
+    if (data && !data.available)
+        return null;
+    return (_jsx(DashboardPanel, { id: metricPanelId(group), anchorId: metricSectionAnchor(group), title: title, headerExtra: freshWindowNote(group, data, presentation), actions: actions, sql: data?.sql, isLoading: resource.isLoading, isRefreshing: resource.isRefreshing, error: resource.error, onRetry: resource.reload, isEmpty: !!data && !sectionHasContent(group, data, presentation), emptyMessage: "Nothing collected for this section in this window.", skeletonHeight: 200, children: data && _jsx(SectionBody, { group: group, data: data, layout: layout, spanMs: spanMs, now: now, presentation: presentation }) }));
+}
+/**
+ * The one-line hint for the groups the store has nothing of (#602): their
+ * sections are hidden, so say which, rather than leave the reader wondering.
+ */
+export function MetricsNotCollected({ groups }) {
+    if (groups.length === 0)
+        return null;
+    return (_jsxs(Typography, { variant: "caption", color: "text.secondary", component: "p", "data-testid": "metrics-not-collected", sx: { m: 0 }, children: ["Not collected in this telemetry store: ", groups.map((group) => group.title).join(', '), "."] }));
+}
+//# sourceMappingURL=MetricSections.js.map

package/dist/telemetry/ui/components/dashboard/metrics/MetricSections.js.map

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

package/dist/telemetry/ui/components/dashboard/metrics/MetricSeriesChart.d.ts

@@ -0,0 +1,19 @@
+import type { DashboardMetricSeries } from '../../../../headless/services/telemetryDashboard.js';
+/** Lines past this many are left out (and said so): a 20-line chart reads as noise. */
+export declare const METRIC_CHART_MAX_LINES = 8;
+export interface MetricSeriesChartProps {
+    /** What the chart shows, e.g. "CPU and memory utilization" — its accessible name. */
+    title: string;
+    series: DashboardMetricSeries[];
+    height: number;
+    spanMs: number;
+    /** Phone: legend below and at most 4 x labels. */
+    compact: boolean;
+    /** A fixed colour for a line (`outcome` → status ok/crit); others take `palette.chart.series` in order. */
+    colorFor?: (series: DashboardMetricSeries) => string | undefined;
+    testId?: string;
+}
+/** A line's legend name: the split value when split, else the series label. */
+export declare function seriesName(series: DashboardMetricSeries): string;
+export declare function MetricSeriesChart({ title, series, height, spanMs, compact, colorFor, testId, }: MetricSeriesChartProps): import("react").JSX.Element | null;
+//# sourceMappingURL=MetricSeriesChart.d.ts.map

package/dist/telemetry/ui/components/dashboard/metrics/MetricSeriesChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricSeriesChart.d.ts","sourceRoot":"","sources":["../../../../../../src/telemetry/ui/components/dashboard/metrics/MetricSeriesChart.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAKjG,uFAAuF;AACvF,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,MAAM,WAAW,sBAAsB;IACrC,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,EAAE,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,MAAM,GAAG,SAAS,CAAC;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,MAAM,EAAE,qBAAqB,GAAG,MAAM,CAEhE;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,sBAAsB,sCAmExB"}

package/dist/telemetry/ui/components/dashboard/metrics/MetricSeriesChart.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A multi-series line chart over `/metrics` `series` — issue #602, epic #576.
+ *
+ * One line per series the caller passes (a family split by its `dimension`
+ * draws one line per `groupBy` value — per mountpoint, per outcome, per
+ * state). Every series in one chart shares a unit, so there is one y axis,
+ * formatted by that unit. A `null` point is a GAP (nothing measured), never a
+ * zero. The legend names every line, so colour is never the only key; the
+ * chart itself is one labelled image, and the numbers it shows are also in the
+ * section's tiles and table.
+ *
+ * Built on `@mui/x-charts`, like the API and log timelines.
+ */
+import { Box, Typography } from '@mui/material';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { useMetricUnitFormats } from '../../../../headless/context/metricUnitFormats.js';
+import { formatBucketLabel, formatMetricValue, formatTimestamp } from '../../../../headless/lib/format.js';
+import { useTelemetryTokens } from '../../../../theme/telemetryTokens.js';
+/** Lines past this many are left out (and said so): a 20-line chart reads as noise. */
+export const METRIC_CHART_MAX_LINES = 8;
+/** A line's legend name: the split value when split, else the series label. */
+export function seriesName(series) {
+    return series.groupBy ?? series.label;
+}
+export function MetricSeriesChart({ title, series, height, spanMs, compact, colorFor, testId, }) {
+    const tokens = useTelemetryTokens();
+    const formats = useMetricUnitFormats();
+    if (series.length === 0)
+        return null;
+    const shown = series.slice(0, METRIC_CHART_MAX_LINES);
+    const hidden = series.length - shown.length;
+    const unit = shown[0].unit;
+    // Every series of a group shares the window's buckets; the longest wins if one is short.
+    const starts = shown.reduce((longest, s) => (s.points.length > longest.length ? s.points.map((p) => p.t) : longest), []);
+    // The theme's categorical series (`palette.chart.series`, #686).
+    const palette = tokens.chart.series;
+    const step = compact ? Math.max(1, Math.ceil(starts.length / 4)) : 1;
+    return (_jsxs(Box, { "data-testid": testId, sx: { minWidth: 0, width: '100%' }, children: [_jsx(Box, { role: "img", "aria-label": `${title}: ${shown.map(seriesName).join(', ')}, ${starts.length} buckets`, sx: { minWidth: 0, width: '100%' }, children: _jsx(LineChart, { height: height, skipAnimation: true, series: shown.map((s, index) => ({
+                        id: `${s.key}:${s.groupBy ?? ''}`,
+                        label: seriesName(s),
+                        data: starts.map((t) => s.points.find((p) => p.t === t)?.v ?? null),
+                        color: colorFor?.(s) ?? palette[index % palette.length],
+                        connectNulls: false,
+                        showMark: false,
+                        valueFormatter: (value) => formatMetricValue(value, s.unit, undefined, formats),
+                    })), xAxis: [
+                        {
+                            scaleType: 'point',
+                            data: starts,
+                            valueFormatter: (value, context) => context.location === 'tick' ? formatBucketLabel(value, spanMs) : formatTimestamp(value),
+                            ...(compact
+                                ? { tickInterval: (_value, index) => index % step === 0 }
+                                : { tickLabelInterval: 'auto' }),
+                            height: 28,
+                        },
+                    ], yAxis: [
+                        {
+                            width: compact ? 52 : 64,
+                            min: 0,
+                            ...(unit === '%' ? { max: 100 } : {}),
+                            valueFormatter: (value) => formatMetricValue(value, unit, undefined, formats),
+                        },
+                    ], grid: { horizontal: true }, margin: { top: 8, right: 12, bottom: 4, left: 4 }, slotProps: { legend: { position: { vertical: compact ? 'bottom' : 'top', horizontal: 'center' } } } }) }), hidden > 0 && (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: [hidden, " more not shown."] }))] }));
+}
+//# sourceMappingURL=MetricSeriesChart.js.map

package/dist/telemetry/ui/components/dashboard/metrics/MetricSeriesChart.js.map

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