portal-mojo 0.2.11 → 0.2.13

package/src/account/models.ts

@@ -8,9 +8,10 @@
 // through — and the account-only query keys.
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
-    mojoSave, sanitizeMe, useAuthSnapshot, withFreshAuth,
+    mojoCall, sanitizeMe, useAuthSnapshot, withFreshAuth,
     type Me, type SaveVars,
 } from '../client/runtime';
+import { withAccountActor } from './actor';
 import { getNotificationPreferences, getRecoveryCodeStatus, type NotificationPreferencesResponse, type RecoveryCodeStatus } from './api';
 
 // ── /api/user/me ──────────────────────────────────────────────────────
@@ -21,18 +22,24 @@ import { getNotificationPreferences, getRecoveryCodeStatus, type NotificationPre
  * 403s email/username/is_superuser/permissions even unchanged), sanitizes
  * the answer with sanitizeMe, writes `['me', uid]` and refreshes every
  * `/api/user` cache (UserModel.useSave never touches `me`, and vice versa).
- * The `id` in SaveVars is ignored: the endpoint is always the caller.
+ * The endpoint is always the caller. A supplied id must match that caller;
+ * actor checks fence the final send, fresh-auth retry, and cache publication.
  */
 export const MeSaveModel = {
     useSave: () => {
         const qc = useQueryClient();
         const { uid } = useAuthSnapshot();
         return useMutation<Me, Error, SaveVars>({
-            mutationFn: async ({ changes }: SaveVars) => sanitizeMe(await withFreshAuth(() => mojoSave<Me>('/api/user/me', null, changes))),
-            onSuccess: (row) => {
-                qc.setQueryData(['me', uid], row);
+            mutationFn: ({ id, changes }: SaveVars) => withAccountActor(async (actor) => {
+                const body = await withFreshAuth(() => mojoCall('/api/user/me', {
+                    method: 'POST', body: changes, beforeSend: actor.check,
+                }));
+                actor.check();
+                const row = sanitizeMe(body.data as Me);
+                qc.setQueryData(['me', actor.uid], row);
                 void qc.invalidateQueries({ queryKey: ['/api/user'] });
-            },
+                return row;
+            }, id ?? uid),
         });
     },
 };

package/src/charts/SeriesChart.tsx

@@ -3,13 +3,14 @@
 // (stacked:'auto' → true for bar), grouped opt-out, legend, gridlines,
 // nice Y ticks, thinned X labels, and Chart.js-style "index mode"
 // crosshair tooltips (snap to nearest column, ghost dots, multi-row card).
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 export type ChartType = 'line' | 'bar' | 'area';
 
 export interface Dataset {
     label: string;
-    data: number[];
+    /** Null, undefined and nonfinite numbers are missing samples, never zero. */
+    data: (number | null | undefined)[];
     color?: string;
 }
 
@@ -30,6 +31,18 @@ export interface SeriesChartProps {
     smoothing?: number; // 0 = straight segments
     showDots?: boolean;
     emptyText?: string;
+    /** Numeric positions (e.g. epoch seconds), aligned with labels and data. */
+    xValues?: number[];
+    /** Visible numeric X window, in the same units as xValues. */
+    xDomain?: [number, number];
+    /** Split line/area runs when consecutive numeric X values exceed this gap. */
+    maxGap?: number;
+    /** Exact Y bounds; omitted bounds are computed from visible data. */
+    minValue?: number;
+    maxValue?: number;
+    ariaLabel?: string;
+    /** Shared pointer/touch/keyboard inspection; null means inspection ended. */
+    onInspect?: (index: number | null) => void;
 }
 
 export const CHART_PALETTE = [
@@ -38,6 +51,7 @@ export const CHART_PALETTE = [
 ];
 
 const PAD = { top: 10, right: 14, bottom: 26, left: 48 };
+const isFiniteNumber = (v: unknown): v is number => typeof v === 'number' && Number.isFinite(v);
 
 function niceNum(range: number, round: boolean): number {
     const exp = Math.floor(Math.log10(range || 1));
@@ -53,6 +67,9 @@ function niceScale(min: number, max: number, ticks: number) {
     if (max === min) max = min + 1;
     const range = niceNum(max - min, false);
     const step = niceNum(range / Math.max(1, ticks - 1), true);
+    // Extreme but finite feeds must not turn tick generation into an endless
+    // loop or emit nonfinite SVG coordinates.
+    if (!Number.isFinite(step) || step <= 0) return { min, max, step: max / 2 - min / 2 || 1 };
     return {
         min: Math.floor(min / step) * step,
         max: Math.ceil(max / step) * step,
@@ -90,7 +107,7 @@ export function SeriesChart({
     datasets: datasetsProp,
     chartType = 'line',
     stacked = 'auto',
-    height = 260,
+    height: heightProp = 260,
     showLegend = true,
     showGrid = true,
     gridLines = 5,
@@ -100,7 +117,15 @@ export function SeriesChart({
     smoothing = 0.3,
     showDots = true,
     emptyText = 'No data for this range',
+    xValues,
+    xDomain,
+    maxGap,
+    minValue,
+    maxValue,
+    ariaLabel = 'Series chart',
+    onInspect,
 }: SeriesChartProps) {
+    const height = isFiniteNumber(heightProp) && heightProp > 0 ? heightProp : 260;
     // Malformed feed data must degrade to the empty state, not take down the
     // route (a live-backend shape drift did exactly that once) — warn + empty,
     // per the unknown-value rule.
@@ -115,6 +140,9 @@ export function SeriesChart({
     const [width, setWidth] = useState(600);
     const [hover, setHover] = useState<number | null>(null);
     const [visible, setVisible] = useState<Set<string>>(() => new Set());
+    const id = useId();
+    const tipRef = useRef<HTMLDivElement>(null);
+    const [tipWidth, setTipWidth] = useState(180);
 
     // Measure the container — real pixel geometry keeps text unscaled
     // (a viewBox + preserveAspectRatio="none" would smear the labels).
@@ -123,7 +151,7 @@ export function SeriesChart({
         if (!node) return;
         const ro = new ResizeObserver(([entry]) => {
             const w = entry?.contentRect.width ?? 0;
-            if (w > 0) setWidth(w);
+            if (isFiniteNumber(w) && w > 0) setWidth(w);
         });
         ro.observe(node);
         return () => ro.disconnect();
@@ -139,6 +167,38 @@ export function SeriesChart({
 
     const plotW = Math.max(40, width - PAD.left - PAD.right);
     const plotH = Math.max(40, height - PAD.top - PAD.bottom);
+    const n = labels.length;
+    const colW = n > 0 ? plotW / n : plotW;
+    const xPositions = useMemo(() => {
+        if (!xValues) return labels.map((_, i) => PAD.left + colW * (i + 0.5));
+        const values = xValues.slice(0, n).filter(isFiniteNumber);
+        let min = values.reduce((a, b) => Math.min(a, b), Infinity);
+        let max = values.reduce((a, b) => Math.max(a, b), -Infinity);
+        if (xDomain && isFiniteNumber(xDomain[0]) && isFiniteNumber(xDomain[1]) && xDomain[1] > xDomain[0]) {
+            [min, max] = xDomain;
+        }
+        return labels.map((_, i) => {
+            const x = xValues[i];
+            if (!isFiniteNumber(x) || x < min || x > max) return null;
+            // Half-scaled differences also work for finite domains spanning
+            // more than Number.MAX_VALUE, without overflowing the subtraction.
+            const fraction = max === min ? 0.5 : (x / 2 - min / 2) / (max / 2 - min / 2);
+            return Number.isFinite(fraction) ? PAD.left + fraction * plotW : null;
+        });
+    }, [labels, xValues, xDomain, n, colW, plotW]);
+    const inspectable = xPositions.flatMap((x, i) => x == null ? [] : [i]);
+    const active = hover != null && xPositions[hover] != null ? hover : null;
+    const lastInspection = useRef<number | null | undefined>(undefined);
+    // Compare content, not array identity: callers often construct props during
+    // render, including renders caused by onInspect itself.
+    const inspectionKey = JSON.stringify([seriesKey, labels, xValues, xDomain, datasets.map((ds) => ds.data)]);
+    useEffect(() => { setHover(null); }, [inspectionKey]);
+    useEffect(() => {
+        if (onInspect && lastInspection.current !== active) {
+            lastInspection.current = active;
+            onInspect(active);
+        }
+    }, [active, onInspect]);
 
     const scale = useMemo(() => {
         let max = 0;
@@ -148,7 +208,8 @@ export function SeriesChart({
                 let pos = 0;
                 let neg = 0;
                 for (const ds of shown) {
-                    const v = ds.data[i] ?? 0;
+                    const v = ds.data[i];
+                    if (xPositions[i] == null || !isFiniteNumber(v)) continue;
                     if (v >= 0) pos += v; else neg += v;
                 }
                 max = Math.max(max, pos);
@@ -156,28 +217,47 @@ export function SeriesChart({
             }
         } else {
             for (const ds of shown) {
-                for (const v of ds.data) {
-                    max = Math.max(max, v ?? 0);
-                    min = Math.min(min, v ?? 0);
+                for (let i = 0; i < n; i++) {
+                    const v = ds.data[i];
+                    if (xPositions[i] == null || !isFiniteNumber(v)) continue;
+                    max = Math.max(max, v);
+                    min = Math.min(min, v);
                 }
             }
         }
-        return niceScale(min, max, gridLines);
-    }, [labels.length, shown, isStacked, gridLines]);
+        if (!Number.isFinite(min)) min = -Number.MAX_VALUE;
+        if (!Number.isFinite(max)) max = Number.MAX_VALUE;
+        const count = isFiniteNumber(gridLines) ? Math.max(2, Math.min(100, Math.floor(gridLines))) : 5;
+        const nice = niceScale(min, max, count);
+        let lo = isFiniteNumber(minValue) ? minValue : nice.min;
+        let hi = isFiniteNumber(maxValue) ? maxValue : nice.max;
+        if (hi <= lo) {
+            if (isFiniteNumber(minValue) && !isFiniteNumber(maxValue)) hi = lo + Math.max(1, Math.abs(lo) * 0.1);
+            else if (isFiniteNumber(maxValue) && !isFiniteNumber(minValue)) lo = hi - Math.max(1, Math.abs(hi) * 0.1);
+            else { lo = nice.min; hi = nice.max; }
+        }
+        const boundedStep = niceNum((hi / 2 - lo / 2) / (count - 1), true) * 2;
+        return { min: lo, max: hi, step: minValue != null || maxValue != null ? boundedStep : nice.step };
+    }, [n, shown, isStacked, gridLines, xPositions, minValue, maxValue]);
 
     const yOf = useCallback(
-        (v: number) => PAD.top + plotH - ((v - scale.min) / (scale.max - scale.min || 1)) * plotH,
-        [plotH, scale],
+        (v: number) => {
+            const y = PAD.top + plotH - ((v / 2 - scale.min / 2) / (scale.max / 2 - scale.min / 2 || 1)) * plotH;
+            return Number.isFinite(y) ? y : v > scale.max ? -plotH : plotH + height;
+        },
+        [plotH, scale, height],
     );
 
-    const n = labels.length;
-    const colW = n > 0 ? plotW / n : plotW;
-    // Line/area sample at column centers; bars fill the column.
-    const xCenter = useCallback((i: number) => PAD.left + colW * (i + 0.5), [colW]);
+    const xCenter = (i: number) => xPositions[i]!;
 
     const ticks = useMemo(() => {
         const out: number[] = [];
-        for (let v = scale.min; v <= scale.max + scale.step / 2; v += scale.step) out.push(v);
+        for (let i = 0; i < 200; i++) {
+            const v = scale.min + i * scale.step;
+            if (!isFiniteNumber(v) || v > scale.max) break;
+            if (out.at(-1) !== v) out.push(v);
+        }
+        if (out.at(-1) !== scale.max) out.push(scale.max);
         return out;
     }, [scale]);
 
@@ -186,14 +266,37 @@ export function SeriesChart({
 
     const colorOf = (ds: Dataset, i: number) => ds.color ?? CHART_PALETTE[i % CHART_PALETTE.length]!;
 
-    const onMove = (e: React.MouseEvent<SVGRectElement>) => {
+    const onMove = (e: React.PointerEvent<SVGRectElement>) => {
         const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const idx = Math.min(n - 1, Math.max(0, Math.floor(x / (colW || 1))));
-        setHover(idx);
+        const x = PAD.left + (e.clientX - rect.left) * (plotW / (rect.width || plotW));
+        let nearest: number | null = null;
+        for (const i of inspectable) {
+            if (nearest == null || Math.abs(xCenter(i) - x) < Math.abs(xCenter(nearest) - x)) nearest = i;
+        }
+        setHover(nearest);
+    };
+
+    const onKeyDown = (e: React.KeyboardEvent<SVGSVGElement>) => {
+        const current = active == null ? -1 : inspectable.indexOf(active);
+        let next: number | null;
+        if (e.key === 'Home') next = inspectable[0] ?? null;
+        else if (e.key === 'End') next = inspectable.at(-1) ?? null;
+        else if (e.key === 'ArrowRight') next = inspectable[Math.min(inspectable.length - 1, current + 1)] ?? null;
+        else if (e.key === 'ArrowLeft') next = inspectable[Math.max(0, current - 1)] ?? null;
+        else if (e.key === 'Escape') next = null;
+        else return;
+        e.preventDefault();
+        setHover(next);
     };
 
-    const hasData = n > 0 && datasets.length > 0;
+    const formatSample = (v: unknown) => isFiniteNumber(v) ? fmt(v) : 'Unavailable';
+    const readout = active == null ? '' : `${labels[active]}. ${shown.map((ds) => `${ds.label}: ${formatSample(ds.data[active])}`).join('; ')}`;
+    useLayoutEffect(() => {
+        const measured = tipRef.current?.getBoundingClientRect().width;
+        if (measured && Number.isFinite(measured)) setTipWidth(measured);
+    }, [readout, width]);
+
+    const hasData = n > 0 && datasets.length > 0 && inspectable.length > 0;
 
     return (
         <div className="chart-wrap" ref={wrapRef}>
@@ -203,8 +306,10 @@ export function SeriesChart({
                         const off = visible.has(ds.label);
                         return (
                             <button
+                                type="button"
                                 key={ds.label}
                                 className={`legend-item${off ? ' legend-off' : ''}`}
+                                aria-pressed={!off}
                                 onClick={() => setVisible((prev) => {
                                     const next = new Set(prev);
                                     if (next.has(ds.label)) next.delete(ds.label); else next.add(ds.label);
@@ -224,7 +329,14 @@ export function SeriesChart({
                 <div className="chart-empty" style={{ height }}>{emptyText}</div>
             ) : (
                 <div className="chart-svg-area" style={{ height }}>
-                    <svg width={width} height={height} className="series-svg" role="img">
+                    <svg width={width} height={height} className="series-svg" role="img"
+                        tabIndex={0} aria-label={ariaLabel} aria-describedby={`${id}-help ${id}-value`}
+                        onKeyDown={onKeyDown} onBlur={() => setHover(null)}>
+                        <defs>
+                            <clipPath id={`${id}-plot`}>
+                                <rect x={PAD.left - 4} y={PAD.top} width={plotW + 8} height={plotH} />
+                            </clipPath>
+                        </defs>
                         {/* gridlines + Y ticks */}
                         {showGrid && ticks.map((t) => (
                             <line
@@ -242,30 +354,38 @@ export function SeriesChart({
 
                         {/* bars */}
                         {chartType === 'bar' && labels.map((_, i) => {
-                            const inner = colW * 0.72;
+                            if (xPositions[i] == null) return null;
+                            const previous = xPositions[i - 1];
+                            const next = xPositions[i + 1];
+                            const slot = xValues ? Math.min(colW,
+                                previous == null ? colW : Math.abs(xCenter(i) - previous),
+                                next == null ? colW : Math.abs(next - xCenter(i))) : colW;
+                            const inner = slot * 0.72;
                             const groupN = Math.max(1, shown.length);
                             let posAcc = 0;
                             let negAcc = 0;
                             return (
-                                <g key={`bar${i}`}>
+                                <g key={`bar${i}`} clipPath={`url(#${id}-plot)`}>
                                     {shown.map((ds, di) => {
-                                        const v = ds.data[i] ?? 0;
+                                        const v = ds.data[i];
+                                        if (!isFiniteNumber(v)) return null;
                                         const color = colorOf(ds, datasets.indexOf(ds));
                                         let x: number;
                                         let w: number;
                                         let y: number;
                                         let h: number;
                                         if (isStacked) {
-                                            x = PAD.left + colW * i + (colW - inner) / 2;
+                                            x = xCenter(i) - inner / 2;
                                             w = inner;
                                             const base = v >= 0 ? posAcc : negAcc;
                                             const top = base + v;
+                                            if (!Number.isFinite(top)) return null;
                                             y = yOf(Math.max(base, top));
                                             h = Math.abs(yOf(top) - yOf(base));
                                             if (v >= 0) posAcc = top; else negAcc = top;
                                         } else {
                                             w = inner / groupN;
-                                            x = PAD.left + colW * i + (colW - inner) / 2 + w * di;
+                                            x = xCenter(i) - inner / 2 + w * di;
                                             const zero = yOf(Math.max(0, scale.min));
                                             y = Math.min(zero, yOf(v));
                                             h = Math.abs(yOf(v) - zero);
@@ -276,7 +396,7 @@ export function SeriesChart({
                                                 x={x} y={y}
                                                 width={Math.max(1, w - 1)} height={Math.max(0, h)}
                                                 fill={color}
-                                                className={`bar${hover === i ? ' bar-hot' : ''}`}
+                                                className={`bar${active === i ? ' bar-hot' : ''}`}
                                             />
                                         );
                                     })}
@@ -287,41 +407,62 @@ export function SeriesChart({
                         {/* area fills + lines */}
                         {chartType !== 'bar' && shown.map((ds) => {
                             const color = colorOf(ds, datasets.indexOf(ds));
-                            const pts = ds.data.slice(0, n).map((v, i) => [xCenter(i), yOf(v ?? 0)] as [number, number]);
-                            if (!pts.length) return null;
-                            const path = smoothPath(pts, smoothing);
+                            const runs: { point: [number, number]; index: number }[][] = [];
+                            let run: (typeof runs)[number] = [];
+                            for (let i = 0; i < n; i++) {
+                                const value = ds.data[i];
+                                const previous = run.at(-1);
+                                const gap = xValues && previous ? xValues[i]! - xValues[previous.index]! : 0;
+                                if (xPositions[i] == null || !isFiniteNumber(value)) {
+                                    run = [];
+                                    continue;
+                                }
+                                if (previous && (gap < 0 || (isFiniteNumber(maxGap) && maxGap >= 0 && gap > maxGap))) run = [];
+                                if (!run.length) runs.push(run);
+                                run.push({ point: [xCenter(i), yOf(value)], index: i });
+                            }
                             const zeroY = yOf(Math.max(0, scale.min));
                             return (
-                                <g key={ds.label}>
-                                    {chartType === 'area' && (
-                                        <path
-                                            d={`${path}L${pts[pts.length - 1]![0]},${zeroY}L${pts[0]![0]},${zeroY}Z`}
-                                            fill={color}
-                                            opacity={0.16}
-                                        />
-                                    )}
-                                    <path d={path} fill="none" stroke={color} strokeWidth={2} className="series-line" />
-                                    {showDots && n <= 40 && pts.map(([x, y], i) => (
-                                        <circle key={i} cx={x} cy={y} r={hover === i ? 4 : 2.5} fill={color} className="series-dot" />
-                                    ))}
+                                <g key={ds.label} clipPath={`url(#${id}-plot)`}>
+                                    {runs.map((segment) => {
+                                        const pts = segment.map((p) => p.point);
+                                        const path = smoothPath(pts, isFiniteNumber(smoothing) ? smoothing : 0);
+                                        return (
+                                            <g key={segment[0]!.index}>
+                                                {chartType === 'area' && pts.length > 1 && (
+                                                    <path
+                                                        d={`${path}L${pts[pts.length - 1]![0]},${zeroY}L${pts[0]![0]},${zeroY}Z`}
+                                                        fill={color}
+                                                        opacity={0.16}
+                                                    />
+                                                )}
+                                                {pts.length > 1 && <path d={path} fill="none" stroke={color} strokeWidth={2} className="series-line" />}
+                                                {(pts.length === 1 || (showDots && n <= 40)) && segment.map(({ point: [x, y], index }) => (
+                                                    <circle key={index} cx={x} cy={y} r={active === index ? 4 : 2.5} fill={color} className="series-dot" />
+                                                ))}
+                                            </g>
+                                        );
+                                    })}
                                 </g>
                             );
                         })}
 
                         {/* crosshair */}
-                        {hover != null && (
+                        {active != null && (
                             <line
-                                x1={xCenter(hover)} x2={xCenter(hover)}
+                                x1={xCenter(active)} x2={xCenter(active)}
                                 y1={PAD.top} y2={PAD.top + plotH}
                                 className="crosshair"
                             />
                         )}
-                        {hover != null && chartType !== 'bar' && shown.map((ds) => {
+                        {active != null && chartType !== 'bar' && shown.map((ds) => {
+                            const value = ds.data[active];
+                            if (!isFiniteNumber(value) || value < scale.min || value > scale.max) return null;
                             const color = colorOf(ds, datasets.indexOf(ds));
                             return (
                                 <circle
                                     key={`h${ds.label}`}
-                                    cx={xCenter(hover)} cy={yOf(ds.data[hover] ?? 0)}
+                                    cx={xCenter(active)} cy={yOf(value)} className="series-inspect-dot"
                                     r={4} fill={color} stroke="var(--surface)" strokeWidth={1.5}
                                 />
                             );
@@ -329,7 +470,7 @@ export function SeriesChart({
 
                         {/* X labels */}
                         {showXLabels && labels.map((label, i) => (
-                            i % labelStride === 0 ? (
+                            i % labelStride === 0 && xPositions[i] != null ? (
                                 <text key={`xl${i}`} x={xCenter(i)} y={height - 8} className="axis-label" textAnchor="middle">
                                     {label}
                                 </text>
@@ -340,37 +481,46 @@ export function SeriesChart({
                         <rect
                             x={PAD.left} y={PAD.top} width={plotW} height={plotH}
                             fill="transparent"
-                            onMouseMove={onMove}
-                            onMouseLeave={() => setHover(null)}
+                            style={{ touchAction: 'pan-y' }}
+                            onPointerMove={onMove}
+                            onPointerDown={onMove}
+                            onPointerLeave={(e) => { if (e.pointerType !== 'touch') setHover(null); }}
+                            onPointerCancel={() => setHover(null)}
                         />
                     </svg>
 
-                    {hover != null && (
+                    {active != null && (
                         <div
-                            className="chart-tip"
+                            className="chart-tip" ref={tipRef} aria-hidden="true"
                             style={{
-                                left: Math.min(Math.max(xCenter(hover), 90), width - 90),
+                                left: Math.max(8, Math.min(xCenter(active) - tipWidth / 2, width - tipWidth - 8)),
                                 top: PAD.top,
+                                transform: 'none', maxWidth: 'calc(100% - 16px)', minWidth: 0,
+                                width: 'max-content', boxSizing: 'border-box', overflowWrap: 'anywhere',
                             }}
                         >
-                            <div className="chart-tip-head">{labels[hover]}</div>
+                            <div className="chart-tip-head">{labels[active]}</div>
                             {shown.map((ds) => (
                                 <div key={ds.label} className="chart-tip-row">
                                     <span className="legend-swatch" style={{ background: colorOf(ds, datasets.indexOf(ds)) }} />
                                     <span className="chart-tip-label">{ds.label}</span>
-                                    <span className="chart-tip-val">{fmt(ds.data[hover] ?? 0)}</span>
+                                    <span className="chart-tip-val">{formatSample(ds.data[active])}</span>
                                 </div>
                             ))}
                             {isStacked && shown.length > 1 && (
                                 <div className="chart-tip-row chart-tip-total">
                                     <span className="chart-tip-label">Total</span>
                                     <span className="chart-tip-val">
-                                        {fmt(shown.reduce((sum, ds) => sum + (ds.data[hover!] ?? 0), 0))}
+                                        {shown.every((ds) => isFiniteNumber(ds.data[active]))
+                                            ? formatSample(shown.reduce((sum, ds) => sum + (ds.data[active] as number), 0))
+                                            : 'Unavailable'}
                                     </span>
                                 </div>
                             )}
                         </div>
                     )}
+                    <span id={`${id}-help`} className="chart-accessible">Use Left and Right arrows to inspect samples, Home or End for the first or last, and Escape to clear.</span>
+                    <span id={`${id}-value`} className="chart-accessible" role="status" aria-live="polite" aria-atomic="true">{readout}</span>
                 </div>
             )}
         </div>

package/src/client/auth.ts

@@ -330,12 +330,13 @@ export const GRANT_SIGN_IN_AGAIN = 'Sign in again to continue';
  * access + refresh pair. Serialised behind any in-flight refresh so a
  * refresh that started on the old session can never land on top of it.
  */
-async function adoptGrant(data: TokenGrant | null | undefined, remember = true, event: 'login' | 'rotated' = 'login'): Promise<AuthUser> {
+async function adoptGrant(data: TokenGrant | null | undefined, remember = true, event: 'login' | 'rotated' = 'login', check?: () => void): Promise<AuthUser> {
     if (!data || typeof data.access_token !== 'string' || !data.access_token
         || typeof data.refresh_token !== 'string' || !data.refresh_token) {
         throw new Error(GRANT_SIGN_IN_AGAIN);
     }
     if (refreshPromise) await refreshPromise;
+    check?.();
     setTokens(data.access_token, data.refresh_token, remember);
     startAutoRefresh();
     const user = data.user ?? {};
@@ -686,9 +687,11 @@ export function passkeyErrorMessage(error: unknown): string {
  * adopted here into the storage this session already uses. Emits 'rotated'
  * (never 'login': no explicit sign-in happened).
  */
-export async function confirmEmailChange(code: string): Promise<AuthUser> {
-    const body = await mojoCall('/api/auth/email/change/confirm', { method: 'POST', body: { code } });
-    return adoptGrant(body.data as TokenGrant, sessionIsPersistent(), 'rotated');
+export async function confirmEmailChange(code: string, check?: () => void): Promise<AuthUser> {
+    const body = await mojoCall('/api/auth/email/change/confirm', { method: 'POST', body: { code }, beforeSend: check });
+    // Account dialogs fence both dispatch and adoption of the returned login.
+    check?.();
+    return adoptGrant(body.data as TokenGrant, sessionIsPersistent(), 'rotated', check);
 }
 
 /**

package/src/client/params.ts

@@ -7,7 +7,7 @@
 //   · multi-value filters collapse to `field__in=a,b` (single value → `field`)
 //   · a daterange is the TRIPLE `dr_field` / `dr_start` / `dr_end`, so only
 //     one range can be active at a time — by construction, not by convention.
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import type { Params } from './types';
 
@@ -27,6 +27,8 @@ export interface TableParams {
     size: number;
 }
 
+export type TableParamsMode = 'url' | 'local';
+
 export interface TableParamsApi extends TableParams {
     wire: Params;
     activeFilters: ActiveFilter[];
@@ -139,8 +141,19 @@ export function useTableParams(
     // resurface as a removable pill. Pass a render-stable Set — it is a
     // memo dependency.
     excludeKeys?: ReadonlySet<string>,
+    // Select once per mount. Local tables use this same store/transforms,
+    // with an empty per-instance source instead of the route's query string.
+    mode: TableParamsMode = 'url',
 ): TableParamsApi {
-    const [sp, setSp] = useSearchParams();
+    const warnedMode = useRef(false);
+    const resolvedMode = mode === 'local' ? 'local' : 'url';
+    if (mode !== 'url' && mode !== 'local' && !warnedMode.current) {
+        warnedMode.current = true;
+        console.warn(`[portal-mojo] useTableParams: unknown mode "${String(mode)}" — falling back to 'url'`);
+    }
+    const [urlParams, setUrlParams] = useSearchParams();
+    const [localParams, setLocalParams] = useState(() => new URLSearchParams());
+    const sp = resolvedMode === 'local' ? localParams : urlParams;
     // Defaults seed only the untouched route. Once this table writes params,
     // an intentionally empty filter set must stay empty ("Clear all" must
     // not immediately resurrect a route default).
@@ -175,7 +188,9 @@ export function useTableParams(
         if (next.search) out.set('search', next.search);
         if (next.sort) out.set('sort', next.sort);
         if (next.page > 1) out.set('page', String(next.page));
-        if (next.size !== DEFAULT_SIZE) out.set('size', String(next.size));
+        // Omit only the effective default. Omitting the global default (10)
+        // would resurrect a caller's different default on the next render.
+        if (next.size !== (defaults.size ?? DEFAULT_SIZE)) out.set('size', String(next.size));
         for (const [key, value] of Object.entries(nextFilters)) {
             if (value !== '') out.set(key, value);
         }
@@ -185,8 +200,9 @@ export function useTableParams(
             const carried = sp.get(key);
             if (carried != null) out.set(key, carried);
         }
-        setSp(out, { replace: true });
-    }, [setSp, sp]);
+        if (resolvedMode === 'local') setLocalParams(out);
+        else setUrlParams(out, { replace: true });
+    }, [resolvedMode, setUrlParams, sp, defaults.size]);
 
     const wire = useMemo<Params>(() => ({
         start: (state.page - 1) * state.size,

package/src/styles/core.css

@@ -459,6 +459,8 @@ button { font: inherit; color: inherit; }
 .legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
 .chart-svg-area { position: relative; }
 .series-svg { display: block; overflow: visible; }
+.series-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
+.chart-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 .grid-line { stroke: var(--line); stroke-width: 1; }
 .grid-zero { stroke: var(--mute); stroke-opacity: 0.5; }
 .axis-label { fill: var(--mute); font-size: 10.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }