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

package/dist/telemetry/ui/components/TelemetryStoreSection.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The Store section of the telemetry settings page for a store that is not the
+// built-in GreptimeDB (PP-14.11).
+//
+// The deployment picks its telemetry store in code, with
+// `TelemetryModule.forRoot({ store })`. GreptimeDB has a bespoke Connection
+// section; any other registered store brings its own settings and secrets, and
+// this section draws them as a generated form: the settings slice's
+// `PluggableConfigForm` over the descriptor `GET /admin/telemetry/store`
+// serves. Nothing about the store is known here.
+//
+// Secrets are WRITE-ONLY: a stored one shows as saved, never as a value, and a
+// secret nobody retyped is not sent. Every save sends `If-Match: <the stored
+// settings' version>`; a 409 offers a reload. Controls are disabled without
+// `telemetry:write`; the API is the gate.
+import { useEffect } from 'react';
+import { Alert, Box, Button, Chip, Paper, Stack, Typography } from '@mui/material';
+import { PluggableConfigForm, usePluggableConfigForm } from '../../../settings/index.js';
+import { useTelemetryStore } from '../../headless/hooks/useTelemetryStore.js';
+/** The element id the page's other alerts link to. */
+export const TELEMETRY_STORE_SECTION_ID = 'telemetry-store';
+function StoreForm({ descriptor, settings, canWrite, isSaving, onSave }) {
+    const form = usePluggableConfigForm(descriptor, settings);
+    const { reset } = form;
+    // After a save the API returns the settings in force: start the form from them.
+    useEffect(() => {
+        reset();
+    }, [settings, reset]);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (!canWrite)
+            return;
+        await onSave(form.payload());
+    };
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, noValidate: true, children: [descriptor.fields.length > 0 ? (_jsx(PluggableConfigForm, { descriptor: descriptor, value: form.value, onChange: form.setField, secrets: form.secrets, onSecretChange: form.setSecret, disabled: !canWrite || isSaving })) : (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "This store has nothing to configure here." })), descriptor.fields.length > 0 && (_jsx(Button, { type: "submit", variant: "contained", sx: { mt: 3 }, disabled: !canWrite || isSaving || !form.dirty, children: isSaving ? 'Saving...' : 'Save store' }))] }));
+}
+/**
+ * The telemetry store's settings and write-only secrets, as a generated form.
+ * Shown by the settings page for every store but the built-in `greptime`.
+ *
+ * @param props - see {@link TelemetryStoreSectionProps}.
+ * @returns the section.
+ *
+ * @stability experimental
+ */
+export function TelemetryStoreSection({ canWrite, onChanged }) {
+    const { store, isLoading, loadError, isSaving, saveError, conflict, reload, save } = useTelemetryStore();
+    const title = 'Store';
+    return (_jsxs(Paper, { sx: { p: { xs: 2, sm: 3 }, mb: 3 }, component: "section", "aria-label": title, id: TELEMETRY_STORE_SECTION_ID, children: [_jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 1, sx: { alignItems: { sm: 'center' }, justifyContent: 'space-between', mb: 1 }, children: [_jsx(Typography, { variant: "h6", component: "h2", children: title }), store && (_jsx(Chip, { size: "small", color: store.ready ? 'success' : 'default', label: store.ready ? 'Configured' : 'Not configured', "data-testid": "telemetry-store-ready", sx: { alignSelf: { xs: 'flex-start', sm: 'auto' } } }))] }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: store ? (_jsxs(_Fragment, { children: ["This deployment stores and queries telemetry in ", _jsx("strong", { children: store.active.label }), store.active.description ? `: ${store.active.description}` : '.', " The store is chosen in the application's code; its settings are saved here and take effect within seconds on every instance, with no restart."] })) : ('The telemetry store this deployment uses.') }), loadError && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: loadError })), store?.error && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, "data-testid": "telemetry-store-error", children: store.error })), conflict && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, "data-testid": "telemetry-store-conflict", action: _jsx(Button, { color: "inherit", size: "small", onClick: () => void reload(), children: "Reload" }), children: "These settings were changed by someone else since you opened this page. Reload to see the current values, then re-apply your changes." })), saveError && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: saveError })), isLoading && !store && (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Loading the store settings..." })), store?.descriptor && (_jsx(StoreForm, { descriptor: store.descriptor, settings: store.settings, canWrite: canWrite, isSaving: isSaving, onSave: async (input) => {
+                    const ok = await save(input);
+                    if (ok)
+                        onChanged('Telemetry store saved');
+                    return ok;
+                } }, store.descriptor.id))] }));
+}
+//# sourceMappingURL=TelemetryStoreSection.js.map

package/dist/telemetry/ui/components/TelemetryStoreSection.js.map

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

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

@@ -0,0 +1,17 @@
+import type { DashboardApiBucket } from '../../../headless/services/telemetryDashboard.js';
+export interface TimelineChartProps {
+    height: number;
+    spanMs: number;
+    /** Phone: legend below and at most 4 x labels. */
+    compact: boolean;
+    zoom: {
+        drag: boolean;
+        tap: boolean;
+    };
+    onZoomBuckets: (startIndex: number, endIndex: number) => void;
+}
+export interface ApiTimelineChartProps extends TimelineChartProps {
+    buckets: DashboardApiBucket[];
+}
+export declare function ApiTimelineChart({ buckets, height, spanMs, compact, zoom, onZoomBuckets }: ApiTimelineChartProps): import("react").JSX.Element;
+//# sourceMappingURL=ApiTimelineChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiTimelineChart.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/ApiTimelineChart.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAM3F,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,OAAO,CAAA;KAAE,CAAC;IACtC,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,qBAAqB,+BAsEhH"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * API timeline — issue #578, epic #576.
+ *
+ * Server requests per bucket as bars stacked by status class (2xx, 3xx, 4xx,
+ * 5xx), with p95 latency as a line on a secondary (ms) axis. Composed from
+ * `@mui/x-charts` parts because a bar + line pair on two y axes is not one of
+ * the packaged charts. Bar colours are the theme's status tokens (#686:
+ * 2xx ok, 3xx info, 4xx warn, 5xx crit), so both modes work and an app can
+ * restyle them; the legend names every series, so colour is never the only key.
+ *
+ * Zoom: see `ZoomBrush` — the caller chooses drag and/or tap per layout.
+ */
+import { Box, useTheme } from '@mui/material';
+import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider';
+import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { formatDuration } from '../../../headless/lib/format.js';
+import { TIMELINE_AXIS_ID, timelineXAxis } from './timelineAxis.js';
+import { ZoomBrush } from './ZoomBrush.js';
+import { useTelemetryTokens } from '../../../theme/telemetryTokens.js';
+export function ApiTimelineChart({ buckets, height, spanMs, compact, zoom, onZoomBuckets }) {
+    const theme = useTheme();
+    const tokens = useTelemetryTokens();
+    const starts = buckets.map((bucket) => bucket.t);
+    const bar = (id, label, color) => ({
+        type: 'bar',
+        id,
+        label,
+        data: buckets.map((bucket) => bucket[id]),
+        stack: 'status',
+        color,
+        yAxisId: 'requests',
+    });
+    return (_jsx(Box, { role: "img", "aria-label": `API requests per bucket by status class (2xx, 3xx, 4xx, 5xx) with p95 latency, ${buckets.length} buckets`, sx: { minWidth: 0, width: '100%' }, children: _jsx(ChartsDataProvider, { height: height, skipAnimation: true, series: [
+                bar('s2xx', '2xx', tokens.status.ok),
+                bar('s3xx', '3xx', tokens.status.info),
+                bar('s4xx', '4xx', tokens.status.warn),
+                bar('s5xx', '5xx', tokens.status.crit),
+                {
+                    type: 'line',
+                    id: 'p95',
+                    label: 'p95 latency',
+                    data: buckets.map((bucket) => bucket.p95Ms),
+                    yAxisId: 'latency',
+                    color: theme.palette.text.primary,
+                    connectNulls: false,
+                    showMark: false,
+                    valueFormatter: (value) => (value === null ? '—' : formatDuration(value)),
+                },
+            ], xAxis: [timelineXAxis(starts, spanMs, compact ? 4 : undefined)], yAxis: [
+                { id: 'requests', position: 'left', width: compact ? 44 : 48, min: 0 },
+                {
+                    id: 'latency',
+                    position: 'right',
+                    width: compact ? 44 : 56,
+                    min: 0,
+                    valueFormatter: (value) => formatDuration(value),
+                },
+            ], margin: { top: 8, right: 4, bottom: 4, left: 4 }, children: _jsxs(ChartsWrapper, { legendPosition: { vertical: compact ? 'bottom' : 'top', horizontal: 'center' }, children: [_jsx(ChartsLegend, {}), _jsxs(ChartsSurface, { children: [_jsx(ChartsGrid, { horizontal: true }), _jsx(BarPlot, {}), _jsx(LinePlot, {}), _jsx(ChartsAxisHighlight, { x: "band" }), _jsx(ChartsXAxis, { axisId: TIMELINE_AXIS_ID }), _jsx(ChartsYAxis, { axisId: "requests" }), _jsx(ChartsYAxis, { axisId: "latency" }), _jsx(ZoomBrush, { values: starts, drag: zoom.drag, tap: zoom.tap, onSelect: onZoomBuckets })] }), _jsx(ChartsTooltip, { trigger: "axis" })] }) }) }));
+}
+//# sourceMappingURL=ApiTimelineChart.js.map

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

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

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

@@ -0,0 +1,44 @@
+import { type DashboardState } from '../../../headless/lib/dashboardState.js';
+/**
+ * The dashboard's layout: decided by the page from the viewport.
+ *
+ * @stability experimental
+ */
+export type DashboardLayout = 'phone' | 'tablet' | 'desktop';
+export interface DashboardFilterBarProps {
+    state: DashboardState;
+    onChange: (patch: Partial<DashboardState>) => void;
+    services: string[];
+    instances: string[];
+    /** Host names from `/filters`; the Host select is offered when there are any (or one is set). */
+    hosts?: string[];
+    /** `Date.now()` of the latest summary, for "Updated Xs ago". */
+    updatedAt: number | null;
+    layout: DashboardLayout;
+}
+/** Re-renders itself once a second; the rest of the page does not. */
+export declare function UpdatedAgo({ updatedAt }: {
+    updatedAt: number | null;
+}): import("react").JSX.Element | null;
+export declare function zoomLabel(state: DashboardState): string;
+export declare function ResetZoomChip({ state, onChange }: Pick<DashboardFilterBarProps, 'state' | 'onChange'>): import("react").JSX.Element | null;
+interface SelectProps {
+    label: string;
+    allLabel: string;
+    value: string | null;
+    options: string[];
+    onChange: (value: string | null) => void;
+    fullWidth?: boolean;
+}
+export declare function FilterSelect({ label, allLabel, value, options, onChange, fullWidth }: SelectProps): import("react").JSX.Element;
+export declare function RefreshSwitch({ checked, onChange }: {
+    checked: boolean;
+    onChange: (next: boolean) => void;
+}): import("react").JSX.Element;
+export declare function RangeToggle({ state, onChange }: Pick<DashboardFilterBarProps, 'state' | 'onChange'>): import("react").JSX.Element;
+export declare function RangeSelect({ state, onChange, fullWidth, }: Pick<DashboardFilterBarProps, 'state' | 'onChange'> & {
+    fullWidth?: boolean;
+}): import("react").JSX.Element;
+export declare function DashboardFilterBar(props: DashboardFilterBarProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DashboardFilterBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardFilterBar.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/DashboardFilterBar.tsx"],"names":[],"mappings":"AAgDA,OAAO,EAAqC,KAAK,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAGjH;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gEAAgE;IAChE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,eAAe,CAAC;CACzB;AAED,sEAAsE;AACtE,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,sCAcrE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAEvD;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,UAAU,CAAC,sCAcrG;AAED,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,WAAW,+BA2BjG;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,+BAQ3G;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,UAAU,CAAC,+BAmBnG;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,+BA6B/E;AAmND,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,+BAIhE"}

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

@@ -0,0 +1,143 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The Telemetry Dashboard's filter bar — issue #578, epic #576.
+ *
+ * Range (15m … 7d), service and instance (the values `/filters` reports for
+ * the window), host (#602: `/filters` `hosts`, applied by the infrastructure
+ * sections only; offered once the store has host metrics), auto-refresh, "Updated Xs ago", and — while zoomed — a
+ * "Reset zoom" chip that drops `from`/`to` and returns to the preset.
+ *
+ * - Desktop (≥ lg): everything inline, range as a ToggleButtonGroup.
+ * - Tablet (sm–md): range Select inline; service, instance and auto-refresh
+ *   behind a "Filters" button in a popover.
+ * - Phone (below sm): a sticky compact bar (range chip + Filters) whose button
+ *   opens a full-screen dialog with every control, applied on "Apply" (a
+ *   draft, so a half-made choice never fires five requests) or "Reset".
+ */
+import { useEffect, useId, useState } from 'react';
+import { Badge, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Popover, FormControl, FormControlLabel, InputLabel, MenuItem, OutlinedInput, Select, Stack, Switch, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import TuneIcon from '@mui/icons-material/Tune';
+import CloseIcon from '@mui/icons-material/Close';
+import { DASHBOARD_RANGES, DASHBOARD_RANGE_LABELS, } from '../../../headless/services/telemetryDashboard.js';
+import { DEFAULT_DASHBOARD_STATE, isZoomed } from '../../../headless/lib/dashboardState.js';
+import { formatTimestamp } from '../../../headless/lib/format.js';
+/** Re-renders itself once a second; the rest of the page does not. */
+export function UpdatedAgo({ updatedAt }) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, []);
+    if (updatedAt === null)
+        return null;
+    const seconds = Math.max(0, Math.round((now - updatedAt) / 1000));
+    const text = seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m`;
+    return (_jsxs(Typography, { variant: "caption", color: "text.secondary", "data-testid": "updated-ago", sx: { whiteSpace: 'nowrap' }, children: ["Updated ", text, " ago"] }));
+}
+export function zoomLabel(state) {
+    return `${formatTimestamp(state.from)} – ${formatTimestamp(state.to)}`;
+}
+export function ResetZoomChip({ state, onChange }) {
+    if (!isZoomed(state))
+        return null;
+    return (_jsx(Chip, { icon: _jsx(ZoomOutIcon, { "aria-hidden": true }), label: "Reset zoom", title: zoomLabel(state), onClick: () => onChange({ from: null, to: null }), onDelete: () => onChange({ from: null, to: null }), color: "primary", variant: "outlined", sx: { minHeight: 36 } }));
+}
+export function FilterSelect({ label, allLabel, value, options, onChange, fullWidth }) {
+    const id = `dashboard-${label.toLowerCase()}`;
+    // A value from the URL that `/filters` does not (yet) list is still shown.
+    const values = value && !options.includes(value) ? [value, ...options] : options;
+    return (_jsxs(FormControl, { size: "small", fullWidth: fullWidth, sx: { minWidth: 160, maxWidth: fullWidth ? undefined : 240 }, children: [_jsx(InputLabel, { id: `${id}-label`, shrink: true, children: label }), _jsxs(Select, { labelId: `${id}-label`, id: id, input: _jsx(OutlinedInput, { notched: true, label: label }), value: value ?? '', displayEmpty: true, onChange: (event) => onChange(event.target.value ? String(event.target.value) : null), renderValue: (selected) => (selected ? String(selected) : allLabel), children: [_jsx(MenuItem, { value: "", children: allLabel }), values.map((option) => (_jsx(MenuItem, { value: option, children: option }, option)))] })] }));
+}
+export function RefreshSwitch({ checked, onChange }) {
+    return (_jsx(FormControlLabel, { control: _jsx(Switch, { checked: checked, onChange: (event) => onChange(event.target.checked) }), label: "Auto-refresh", sx: { mr: 0, whiteSpace: 'nowrap' } }));
+}
+export function RangeToggle({ state, onChange }) {
+    return (_jsx(ToggleButtonGroup, { exclusive: true, size: "small", "aria-label": "Time range", value: isZoomed(state) ? null : state.range, onChange: (_event, next) => {
+            if (next)
+                onChange({ range: next, from: null, to: null });
+            else if (isZoomed(state))
+                onChange({ from: null, to: null });
+        }, children: DASHBOARD_RANGES.map((range) => (_jsx(ToggleButton, { value: range, "aria-label": DASHBOARD_RANGE_LABELS[range], sx: { px: 1.5, textTransform: 'none' }, children: range }, range))) }));
+}
+export function RangeSelect({ state, onChange, fullWidth, }) {
+    const id = useId();
+    return (_jsxs(FormControl, { size: "small", fullWidth: fullWidth, sx: { minWidth: 170 }, children: [_jsx(InputLabel, { id: `${id}-label`, shrink: true, children: "Range" }), _jsxs(Select, { labelId: `${id}-label`, input: _jsx(OutlinedInput, { notched: true, label: "Range" }), value: isZoomed(state) ? 'zoom' : state.range, onChange: (event) => {
+                    const next = event.target.value;
+                    if (next !== 'zoom')
+                        onChange({ range: next, from: null, to: null });
+                }, children: [isZoomed(state) && (_jsx(MenuItem, { value: "zoom", disabled: true, children: "Zoomed window" })), DASHBOARD_RANGES.map((range) => (_jsx(MenuItem, { value: range, children: DASHBOARD_RANGE_LABELS[range] }, range)))] })] }));
+}
+/** How many non-default filters hide behind the Filters button. */
+function hiddenFilterCount(state) {
+    return (state.service ? 1 : 0) + (state.instance ? 1 : 0) + (state.host ? 1 : 0) + (state.refresh ? 0 : 1);
+}
+/**
+ * The Host select (#602), shown once `/filters` reports a host (or the URL
+ * carries one): with no host metrics in the store it would filter nothing.
+ */
+function HostSelect({ value, hosts, onChange, fullWidth, }) {
+    if (hosts.length === 0 && !value)
+        return null;
+    return (_jsx(FilterSelect, { label: "Host", allLabel: "All hosts", value: value, options: hosts, onChange: onChange, fullWidth: fullWidth }));
+}
+function TabletFilterBar({ state, onChange, services, instances, hosts = [], updatedAt }) {
+    const [anchor, setAnchor] = useState(null);
+    const popoverId = useId();
+    return (_jsxs(Stack, { direction: "row", spacing: 1.5, useFlexGap: true, role: "toolbar", "aria-label": "Dashboard filters", sx: { alignItems: 'center', flexWrap: 'wrap', minWidth: 0 }, children: [_jsx(RangeSelect, { state: state, onChange: onChange }), _jsx(Badge, { color: "primary", badgeContent: hiddenFilterCount(state), children: _jsx(Button, { variant: "outlined", startIcon: _jsx(TuneIcon, {}), "aria-haspopup": "dialog", "aria-controls": anchor ? popoverId : undefined, "aria-expanded": anchor ? 'true' : 'false', onClick: (event) => setAnchor(event.currentTarget), sx: { minHeight: 40 }, children: "Filters" }) }), _jsx(ResetZoomChip, { state: state, onChange: onChange }), _jsx(Box, { sx: { ml: 'auto' }, children: _jsx(UpdatedAgo, { updatedAt: updatedAt }) }), _jsx(Popover, { id: popoverId, open: !!anchor, anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, slotProps: { paper: { role: 'dialog', 'aria-label': 'Filters', sx: { p: 2, width: 320 } } }, children: _jsxs(Stack, { spacing: 2, children: [_jsx(FilterSelect, { label: "Service", allLabel: "All services", value: state.service, options: services, onChange: (service) => onChange({ service }), fullWidth: true }), _jsx(FilterSelect, { label: "Instance", allLabel: "All instances", value: state.instance, options: instances, onChange: (instance) => onChange({ instance }), fullWidth: true }), _jsx(HostSelect, { value: state.host, hosts: hosts, onChange: (host) => onChange({ host }), fullWidth: true }), _jsx(RefreshSwitch, { checked: state.refresh, onChange: (refresh) => onChange({ refresh }) })] }) })] }));
+}
+function PhoneFilterBar({ state, onChange, services, instances, hosts = [], updatedAt }) {
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(state);
+    const titleId = useId();
+    const openDialog = () => {
+        setDraft(state);
+        setOpen(true);
+    };
+    const patchDraft = (patch) => setDraft((current) => ({ ...current, ...patch }));
+    const apply = () => {
+        onChange({
+            range: draft.range,
+            from: draft.from,
+            to: draft.to,
+            service: draft.service,
+            instance: draft.instance,
+            host: draft.host,
+            refresh: draft.refresh,
+        });
+        setOpen(false);
+    };
+    const reset = () => {
+        const { range, from, to, service, instance, host, refresh } = DEFAULT_DASHBOARD_STATE;
+        onChange({ range, from, to, service, instance, host, refresh });
+        setOpen(false);
+    };
+    const rangeText = isZoomed(state) ? 'Zoomed' : state.range;
+    return (_jsxs(_Fragment, { children: [_jsxs(Paper, { square: true, elevation: 0, role: "toolbar", "aria-label": "Dashboard filters", "data-testid": "phone-filter-bar", sx: {
+                    position: 'sticky',
+                    // Below the sticky AppBar (56px on phones).
+                    top: 56,
+                    zIndex: (theme) => theme.zIndex.appBar - 1,
+                    mx: -3,
+                    px: 3,
+                    py: 1,
+                    bgcolor: 'background.default',
+                    borderBottom: 1,
+                    borderColor: 'divider',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    minWidth: 0,
+                }, children: [_jsx(Chip, { label: rangeText, onClick: openDialog, "aria-label": `Range: ${rangeText}. Change filters`, sx: { minHeight: 44 } }), isZoomed(state) && (_jsx(IconButton, { "aria-label": "Reset zoom", onClick: () => onChange({ from: null, to: null }), sx: { width: 44, height: 44 }, children: _jsx(ZoomOutIcon, {}) })), _jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: 'hidden' }, children: _jsx(UpdatedAgo, { updatedAt: updatedAt }) }), _jsx(Badge, { color: "primary", badgeContent: hiddenFilterCount(state), children: _jsx(Button, { variant: "outlined", startIcon: _jsx(TuneIcon, {}), "aria-haspopup": "dialog", onClick: openDialog, sx: { minHeight: 44 }, children: "Filters" }) })] }), _jsxs(Dialog, { fullScreen: true, open: open, onClose: () => setOpen(false), "aria-labelledby": titleId, children: [_jsxs(DialogTitle, { id: titleId, sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: ["Filters", _jsx(IconButton, { "aria-label": "Close filters", onClick: () => setOpen(false), sx: { width: 44, height: 44 }, children: _jsx(CloseIcon, {}) })] }), _jsx(DialogContent, { dividers: true, children: _jsxs(Stack, { spacing: 3, sx: { pt: 1 }, children: [_jsx(RangeSelect, { state: draft, onChange: patchDraft, fullWidth: true }), _jsx(FilterSelect, { label: "Service", allLabel: "All services", value: draft.service, options: services, onChange: (service) => patchDraft({ service }), fullWidth: true }), _jsx(FilterSelect, { label: "Instance", allLabel: "All instances", value: draft.instance, options: instances, onChange: (instance) => patchDraft({ instance }), fullWidth: true }), _jsx(HostSelect, { value: draft.host, hosts: hosts, onChange: (host) => patchDraft({ host }), fullWidth: true }), _jsx(RefreshSwitch, { checked: draft.refresh, onChange: (refresh) => patchDraft({ refresh }) })] }) }), _jsxs(DialogActions, { sx: { p: 2, gap: 1 }, children: [_jsx(Button, { onClick: reset, sx: { minHeight: 44 }, children: "Reset" }), _jsx(Button, { variant: "contained", onClick: apply, sx: { minHeight: 44, flex: 1 }, children: "Apply" })] })] })] }));
+}
+export function DashboardFilterBar(props) {
+    if (props.layout === 'phone')
+        return _jsx(PhoneFilterBar, { ...props });
+    if (props.layout === 'tablet')
+        return _jsx(TabletFilterBar, { ...props });
+    return _jsx(DesktopFilterBar, { ...props });
+}
+function DesktopFilterBar({ state, onChange, services, instances, hosts = [], updatedAt }) {
+    return (_jsxs(Stack, { direction: "row", spacing: 1.5, useFlexGap: true, role: "toolbar", "aria-label": "Dashboard filters", sx: { alignItems: 'center', flexWrap: 'wrap', minWidth: 0 }, children: [_jsx(RangeToggle, { state: state, onChange: onChange }), _jsx(ResetZoomChip, { state: state, onChange: onChange }), _jsx(FilterSelect, { label: "Service", allLabel: "All services", value: state.service, options: services, onChange: (service) => onChange({ service }) }), _jsx(FilterSelect, { label: "Instance", allLabel: "All instances", value: state.instance, options: instances, onChange: (instance) => onChange({ instance }) }), _jsx(HostSelect, { value: state.host, hosts: hosts, onChange: (host) => onChange({ host }) }), _jsx(RefreshSwitch, { checked: state.refresh, onChange: (refresh) => onChange({ refresh }) }), _jsx(UpdatedAgo, { updatedAt: updatedAt })] }));
+}
+//# sourceMappingURL=DashboardFilterBar.js.map

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

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

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

@@ -0,0 +1,67 @@
+/**
+ * One Telemetry Dashboard panel — issue #578, epic #576.
+ *
+ * The frame every panel shares: a titled region, a header ACTIONS SLOT, and
+ * the loading / error / empty states, so a panel's own component only draws
+ * its data.
+ *
+ * Actions slot (the seam for #579 — "Open in Explorer", "Ask assistant"): a
+ * panel takes `actions`, each `{ key, label, icon, onClick }`. They render as
+ * icon buttons from `sm` up and fold into one ⋮ menu on phones. `onClick`
+ * receives the panel's `sql` — the statement(s) the API reports it ran for
+ * this panel, primary first — so an action never has to rebuild the query.
+ *
+ * Failure is PER PANEL: the error Alert shows the API's message and
+ * `details.reason`, with a Retry that refetches this panel only.
+ */
+import { type ReactNode } from 'react';
+import { type TelemetryErrorInfo } from '../../../headless/hooks/useTelemetryExplorer.js';
+/**
+ * One action of a panel's header: a button with an icon.
+ *
+ * @stability experimental
+ */
+export interface PanelAction {
+    /** A stable key for the button. */
+    key: string;
+    /** The accessible label. */
+    label: string;
+    /** The icon. */
+    icon: ReactNode;
+    /** Receives the panel's SQL, primary statement first. */
+    onClick: (sql: string[]) => void;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+}
+export interface DashboardPanelProps {
+    title: string;
+    /** Panel id for tests and deep links. */
+    id: string;
+    /**
+     * DOM id of the panel's region, for in-page links (#602: a verdict reason
+     * scrolls to its section). The region is then focusable by script
+     * (`tabIndex=-1`), so moving focus there announces the section.
+     */
+    anchorId?: string;
+    /** Beside the title: filters that belong to the panel (severity chips, a toggle). */
+    headerExtra?: ReactNode;
+    actions?: PanelAction[];
+    /** The `sql` of the panel's response(s); handed to every action. */
+    sql?: string | string[] | null;
+    isLoading?: boolean;
+    isRefreshing?: boolean;
+    error?: TelemetryErrorInfo | null;
+    onRetry?: () => void;
+    /** True when the data is present but holds nothing to show. */
+    isEmpty?: boolean;
+    emptyMessage?: string;
+    /** Skeleton height while the first result loads. */
+    skeletonHeight?: number;
+    children?: ReactNode;
+}
+export declare function PanelError({ error, onRetry }: {
+    error: TelemetryErrorInfo;
+    onRetry?: () => void;
+}): import("react").JSX.Element;
+export declare function DashboardPanel({ title, id, anchorId, headerExtra, actions, sql, isLoading, isRefreshing, error, onRetry, isEmpty, emptyMessage, skeletonHeight, children, }: DashboardPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=DashboardPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPanel.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/DashboardPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBxD,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAG/G;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,yDAAyD;IACzD,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,kBAAkB,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAuBjG;AAkED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,EAAE,EACF,QAAQ,EACR,WAAW,EACX,OAAY,EACZ,GAAG,EACH,SAAiB,EACjB,YAAoB,EACpB,KAAY,EACZ,OAAO,EACP,OAAe,EACf,YAAwC,EACxC,cAAoB,EACpB,QAAQ,GACT,EAAE,mBAAmB,+BAqErB"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * One Telemetry Dashboard panel — issue #578, epic #576.
+ *
+ * The frame every panel shares: a titled region, a header ACTIONS SLOT, and
+ * the loading / error / empty states, so a panel's own component only draws
+ * its data.
+ *
+ * Actions slot (the seam for #579 — "Open in Explorer", "Ask assistant"): a
+ * panel takes `actions`, each `{ key, label, icon, onClick }`. They render as
+ * icon buttons from `sm` up and fold into one ⋮ menu on phones. `onClick`
+ * receives the panel's `sql` — the statement(s) the API reports it ran for
+ * this panel, primary first — so an action never has to rebuild the query.
+ *
+ * Failure is PER PANEL: the error Alert shows the API's message and
+ * `details.reason`, with a Retry that refetches this panel only.
+ */
+import { useId, useState } from 'react';
+import { Alert, AlertTitle, Box, Button, IconButton, LinearProgress, ListItemIcon, ListItemText, Menu, MenuItem, Paper, Skeleton, Stack, Tooltip, Typography, useMediaQuery, useTheme, } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { telemetryErrorTitle } from '../../../headless/hooks/useTelemetryExplorer.js';
+import { sqlList } from '../../../headless/services/telemetryDashboard.js';
+export function PanelError({ error, onRetry }) {
+    return (_jsxs(Alert, { severity: error.reason === 'TELEMETRY_QUERY_TIMEOUT' ? 'warning' : 'error', action: onRetry ? (_jsx(Button, { color: "inherit", size: "small", onClick: onRetry, sx: { minHeight: 44 }, children: "Retry" })) : undefined, children: [_jsx(AlertTitle, { children: telemetryErrorTitle(error) }), _jsx(Box, { component: "span", sx: { wordBreak: 'break-word' }, children: error.message }), (error.reason ?? error.code) && (_jsx(Typography, { variant: "caption", component: "div", sx: { mt: 0.5, opacity: 0.8 }, children: error.reason ?? error.code }))] }));
+}
+function PanelActions({ actions, sql, title, isPhone, }) {
+    const [anchor, setAnchor] = useState(null);
+    const menuId = useId();
+    if (actions.length === 0)
+        return null;
+    if (isPhone) {
+        return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": `${title} actions`, "aria-haspopup": "menu", "aria-controls": anchor ? menuId : undefined, "aria-expanded": anchor ? 'true' : undefined, onClick: (event) => setAnchor(event.currentTarget), sx: { width: 44, height: 44 }, children: _jsx(MoreVertIcon, {}) }), _jsx(Menu, { id: menuId, anchorEl: anchor, open: !!anchor, onClose: () => setAnchor(null), children: actions.map((action) => (_jsxs(MenuItem, { disabled: action.disabled, sx: { minHeight: 44 }, onClick: () => {
+                            setAnchor(null);
+                            action.onClick(sql);
+                        }, children: [_jsx(ListItemIcon, { children: action.icon }), _jsx(ListItemText, { children: action.label })] }, action.key))) })] }));
+    }
+    return (_jsx(Stack, { direction: "row", spacing: 0.5, children: actions.map((action) => (_jsx(Tooltip, { title: action.label, children: _jsx("span", { children: _jsx(IconButton, { "aria-label": action.label, disabled: action.disabled, onClick: () => action.onClick(sql), children: action.icon }) }) }, action.key))) }));
+}
+export function DashboardPanel({ title, id, anchorId, headerExtra, actions = [], sql, isLoading = false, isRefreshing = false, error = null, onRetry, isEmpty = false, emptyMessage = 'Nothing in this window.', skeletonHeight = 160, children, }) {
+    const theme = useTheme();
+    const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
+    const headingId = `${id}-title`;
+    let body;
+    if (error)
+        body = _jsx(PanelError, { error: error, onRetry: onRetry });
+    else if (isLoading)
+        body = _jsx(Skeleton, { variant: "rounded", height: skeletonHeight, "data-testid": `${id}-skeleton` });
+    else if (isEmpty)
+        body = (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 3, textAlign: 'center' }, children: emptyMessage }));
+    else
+        body = children;
+    return (_jsxs(Paper, { component: "section", variant: "outlined", "aria-labelledby": headingId, "data-testid": id, ...(anchorId ? { id: anchorId, tabIndex: -1 } : {}), sx: {
+            position: 'relative',
+            p: { xs: 1.5, sm: 2 },
+            minWidth: 0,
+            height: '100%',
+            overflow: 'hidden',
+            // Clear the sticky AppBar (and the phone filter bar) when scrolled to.
+            ...(anchorId && { scrollMarginTop: { xs: 112, sm: 80 } }),
+        }, children: [isRefreshing && (_jsx(LinearProgress, { "aria-label": `Refreshing ${title}`, sx: { position: 'absolute', top: 0, left: 0, right: 0, height: 2 } })), _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { alignItems: 'center', flexWrap: isPhone ? 'nowrap' : 'wrap', mb: 1.5, minHeight: 40 }, children: [_jsx(Typography, { id: headingId, variant: "h6", component: "h2", sx: { fontSize: '1rem', mr: 'auto', minWidth: 0, overflowWrap: 'anywhere' }, children: title }), !isPhone && headerExtra, _jsx(PanelActions, { actions: actions, sql: sqlList(sql), title: title, isPhone: isPhone })] }), isPhone && headerExtra && (_jsx(Box, { "data-testid": `${id}-header-extra`, sx: { mb: 1.5, minWidth: 0 }, children: headerExtra })), body] }));
+}
+//# sourceMappingURL=DashboardPanel.js.map

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

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

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

@@ -0,0 +1,21 @@
+import type { DashboardEventsResource } from '../../../headless/hooks/useTelemetryDashboard.js';
+import { type DashboardSeverity } from '../../../headless/services/telemetryDashboard.js';
+import { type PanelAction } from './DashboardPanel.js';
+import type { DashboardLayout } from './DashboardFilterBar.js';
+export declare const SEARCH_DEBOUNCE_MS = 400;
+export interface EventsFeedProps {
+    events: DashboardEventsResource;
+    sev: DashboardSeverity[];
+    q: string;
+    onChange: (patch: {
+        sev?: DashboardSeverity[];
+        q?: string;
+    }) => void;
+    layout: DashboardLayout;
+    actions?: PanelAction[];
+    /** Opens a trace (a validated 32-hex id) in the explorer (#579). Omitted: no link. */
+    onViewTrace?: (traceId: string) => void;
+    now?: number;
+}
+export declare function EventsFeed({ events, sev, q, onChange, layout, actions, onViewTrace, now, }: EventsFeedProps): import("react").JSX.Element;
+//# sourceMappingURL=EventsFeed.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EventsFeed.d.ts","sourceRoot":"","sources":["../../../../../src/telemetry/ui/components/dashboard/EventsFeed.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAChG,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACnF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAK/D,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAkItC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,uBAAuB,CAAC;IAChC,GAAG,EAAE,iBAAiB,EAAE,CAAC;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,CAAC,EAAE,iBAAiB,EAAE,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,sFAAsF;IACtF,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,GAAG,EACH,CAAC,EACD,QAAQ,EACR,MAAM,EACN,OAAY,EACZ,WAAW,EACX,GAAgB,GACjB,EAAE,eAAe,+BAgJjB"}