63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 65:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 67:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 68:T66e4,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, } from "react"; // --------------------------------------------------------------------------- // TachoDisc — a day of security activity (sign-ins, permission grants, // revocations) drawn as one polar disc: 24 hours mapped to 360 degrees under // a fixed stylus at 12 o'clock, every event scribed at its true time-of-day // angle. Radius encodes category (sign-ins outer, grants middle, revocations // inner, the last drawn as a punched hole rather than a line). Older days sit // behind as smaller, dimmer discs sharing the same rotation, so the same // time-of-day lines up radially across nights. A faint hour graduation — // ticks every hour, numerals at 00/06/12/18 — shares that same rotation // rather than sitting fixed under the stylus, so a tick always sits at its // own true hour angle and reads as chart paper under the event ink. // // ONE governing scalar drives the whole disc: `discAngle`, the real // time-of-day angle of "now". Every mark's screen position is its true // timestamp angle plus that single rotation — nothing is laid out by index, // so a credential-stuffing run (many failures seconds apart) piles into a // visibly dense arc instead of being spread evenly like ordinary traffic. // That's the whole point: even-spacing-by-index would hide exactly the // pattern this exists to show. // // The disc is an index onto a real list, not a decoration standing alone: // - The event list (time / actor / action / result, all text) is the primary // semantic surface. All disc marks are aria-hidden. // - Hovering or arrow-stepping a list row rotates a faint sector highlight to // that event's angle on the disc. // - The disc itself is role="slider": dragging it (or arrowing it while // focused, event-to-event, not minute-by-minute) finds the nearest event // and scrolls the list to it, updating aria-valuetext with a live readout. // - Live-arriving failures draw in with a 90ms scribe and announce through a // single coalesced aria-live region ("N failed sign-ins in the last // minute"), never one announcement per mark. A revocation is a true hole // (background fill + border ring) that appears whole in one frame — no // scribe, it isn't an arrival, it's an absence. // --------------------------------------------------------------------------- export interface SecurityEvent { id: string; /** ms since epoch */ time: number; category: "sign-in" | "grant" | "revocation"; actor: string; action: string; result: "success" | "failed" | "revoked"; } export interface TachoDiscProps { /** every event in the visible window — today plus however many prior days feed the dimmer stacked discs. */ events: SecurityEvent[]; /** how many prior days render as dimmer discs behind today's. Default 2. */ historyDays?: number; /** current instant; defaults to an internally ticking clock. Pass to control/test. */ now?: number; /** accessible label stem, e.g. "Security activity". */ label?: string; className?: string; } const DAY_MS = 86_400_000; const MIN_PER_DAY = 1440; const BANDS: Record = { "sign-in": { r: 118, seg: 15 }, grant: { r: 87, seg: 13 }, revocation: { r: 55, seg: 0 }, }; const CX = 140; const CY = 140; const DISC_R = 132; const HOLE_R = 5; // hour graduation — chart paper under the event ink, drawn once at true, // unrotated hour angles and sharing the same group rotation as every event // mark (see discAngle below): a tick sits exactly where a same-hour event // would land, at every rotation, not just when "now" happens to be that // hour. Faint minor ticks every hour, a slightly longer major tick plus a // numeral at the four cardinal hours. const GRAD_R_OUTER = DISC_R; const GRAD_R_MINOR = DISC_R - 4; const GRAD_R_MAJOR = DISC_R - 8; const GRAD_LABEL_R = DISC_R + 11; const HOUR_TICKS = Array.from({ length: 24 }, (_, h) => ({ hour: h, angle: (h / 24) * 360, major: h % 6 === 0, })); function clamp(v: number, min: number, max: number): number { return Math.min(max, Math.max(min, v)); } function startOfDay(ms: number): number { const d = new Date(ms); d.setHours(0, 0, 0, 0); return d.getTime(); } function minutesOfDay(ms: number): number { const d = new Date(ms); return d.getHours() * 60 + d.getMinutes() + d.getSeconds() / 60; } function angleForMs(ms: number): number { return (minutesOfDay(ms) / MIN_PER_DAY) * 360; } // rounded to 3 decimals: Math.sin/cos can differ by a ULP between Node (SSR) // and the browser's engine (CSR), which surfaced as x1="29.148748315591874" // on the server vs 29.148748315591888 on the client — a hydration mismatch // despite both being "correct". Every mark's coords come through here. function r3(n: number): number { return Math.round(n * 1000) / 1000; } function polar(r: number, angleDeg: number): { x: number; y: number } { const rad = (angleDeg * Math.PI) / 180; return { x: r3(CX + r * Math.sin(rad)), y: r3(CY - r * Math.cos(rad)) }; } function angDist(a: number, b: number): number { const d = Math.abs(a - b) % 360; return d > 180 ? 360 - d : d; } function formatClock(ms: number): string { const d = new Date(ms); return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`; } function nearbyFailedCount(events: SecurityEvent[], atMinutes: number, windowMin: number): number { let n = 0; for (const e of events) { if (e.result !== "failed") continue; if (angDist((minutesOfDay(e.time) / MIN_PER_DAY) * 360, (atMinutes / MIN_PER_DAY) * 360) <= (windowMin / MIN_PER_DAY) * 360) { n++; } } return n; } // -- draw-in mark for a live-arriving failure: undrawn -> drawn over 90ms, // via an imperative stroke-dashoffset transition (never React state on the // per-mark hot path, matching the ref-write idiom used across the registry). function ScribeLine({ x1, y1, x2, y2, live, reduced, width, }: { x1: number; y1: number; x2: number; y2: number; live: boolean; reduced: boolean; width: number; }) { const ref = useRef(null); const scribedRef = useRef(false); useEffect(() => { const el = ref.current; if (!el || !live || reduced || scribedRef.current) return; scribedRef.current = true; const len = Math.hypot(x2 - x1, y2 - y1) || 1; el.style.strokeDasharray = `${len}`; el.style.strokeDashoffset = `${len}`; const id = requestAnimationFrame(() => { el.style.transition = "stroke-dashoffset 90ms ease-out"; el.style.strokeDashoffset = "0"; }); return () => cancelAnimationFrame(id); }, [live, reduced, x1, y1, x2, y2]); return ; } export function TachoDisc({ events, historyDays = 2, now: controlledNow, label = "Security activity", className = "" }: TachoDiscProps) { // Quantised to the minute: Date.now() on the server and again on the client // milliseconds later gave two different rotation angles (-334.03333 vs // -334.0375) and React discarded the subtree as a hydration mismatch. The // dial only re-reads the clock every 60s and never renders sub-minute // precision, so flooring to the minute costs nothing and makes both renders // agree. The interval below still moves it in real time after mount. const [internalNow, setInternalNow] = useState(() => Math.floor(Date.now() / 60_000) * 60_000); const nowMs = controlledNow ?? internalNow; const reducedRef = useRef(false); const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; setReduced(mq.matches); const onChange = () => { reducedRef.current = mq.matches; setReduced(mq.matches); }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); useEffect(() => { if (controlledNow !== undefined) return; const id = window.setInterval(() => setInternalNow(Date.now()), 60_000); return () => window.clearInterval(id); }, [controlledNow]); const todayStart = useMemo(() => startOfDay(nowMs), [nowMs]); // group by day offset (0 = today) once; drawn oldest-first so today paints on top. const layers = useMemo(() => { const byOffset = new Map(); for (const e of events) { const offset = Math.floor((todayStart - startOfDay(e.time)) / DAY_MS); if (offset < 0 || offset > historyDays) continue; const arr = byOffset.get(offset) ?? []; arr.push(e); byOffset.set(offset, arr); } const out: { offset: number; events: SecurityEvent[] }[] = []; for (let o = historyDays; o >= 0; o--) { out.push({ offset: o, events: (byOffset.get(o) ?? []).slice().sort((a, b) => a.time - b.time) }); } return out; }, [events, todayStart, historyDays]); const todayEvents = layers[layers.length - 1]?.events ?? []; // -- shared index: the disc IS the list's index, not a separate widget -- const [activeIndex, setActiveIndex] = useState(null); const [scrubbing, setScrubbing] = useState(false); const [tabStop, setTabStop] = useState(0); const itemRefs = useRef<(HTMLButtonElement | null)[]>([]); const scrollToIndex = useCallback((i: number, immediate = false) => { itemRefs.current[i]?.scrollIntoView({ block: "nearest", behavior: reducedRef.current || immediate ? "auto" : "smooth", }); }, []); // -- live arrivals: track which ids have been seen so only genuinely new // failure marks scribe in; the initial mount never animates. -- const seenIdsRef = useRef | null>(null); const [liveIds, setLiveIds] = useState>(new Set()); const [liveMessage, setLiveMessage] = useState(""); const pendingFailuresRef = useRef(0); const announceTimerRef = useRef | null>(null); const announceParityRef = useRef(false); useEffect(() => { const seen = seenIdsRef.current; if (seen === null) { seenIdsRef.current = new Set(events.map((e) => e.id)); return; } const fresh: string[] = []; for (const e of events) { if (!seen.has(e.id)) { seen.add(e.id); fresh.push(e.id); if (e.result === "failed") pendingFailuresRef.current += 1; } } if (fresh.length > 0) { setLiveIds((prev) => { const next = new Set(prev); for (const id of fresh) next.add(id); return next; }); } // clear-and-reschedule: every arrival pushes the window out, so one burst // (however long it runs) resolves to exactly one announcement, not one // per arrival and not a truncated first window plus a trailing one. if (pendingFailuresRef.current > 0) { if (announceTimerRef.current) clearTimeout(announceTimerRef.current); announceTimerRef.current = setTimeout(() => { const n = pendingFailuresRef.current; pendingFailuresRef.current = 0; announceTimerRef.current = null; // a zero-width toggle forces a real text-node change even when the // message repeats verbatim across bursts — that's what actually // re-triggers the announcement (see autosave-ratchet). announceParityRef.current = !announceParityRef.current; setLiveMessage(`${n} failed sign-in${n === 1 ? "" : "s"} in the last minute${announceParityRef.current ? "" : ""}`); }, 700); } }, [events]); useEffect(() => { return () => { if (announceTimerRef.current) clearTimeout(announceTimerRef.current); }; }, []); const discAngle = useMemo(() => -angleForMs(nowMs), [nowMs]); const activeEvent = activeIndex !== null ? todayEvents[activeIndex] : undefined; const failuresLastHour = useMemo(() => nearbyFailedCount(todayEvents, minutesOfDay(nowMs), 60), [todayEvents, nowMs]); const valueNow = activeEvent ? Math.round(minutesOfDay(activeEvent.time)) : Math.round(minutesOfDay(nowMs)); const valueText = activeEvent ? scrubbing ? `scrubbing ${formatClock(activeEvent.time)}, ${nearbyFailedCount(todayEvents, minutesOfDay(activeEvent.time), 30)} failed sign-ins nearby` : `${formatClock(activeEvent.time)}, ${activeEvent.actor}, ${activeEvent.action}, ${activeEvent.result}` : `now ${formatClock(nowMs)}, ${failuresLastHour} failed sign-in${failuresLastHour === 1 ? "" : "s"} in the last hour`; const setActive = useCallback( (i: number | null, scroll = true, immediate = false) => { setActiveIndex(i); if (i !== null && scroll) scrollToIndex(i, immediate); }, [scrollToIndex] ); const nearestIndexAtAngle = useCallback( (screenAngle: number, radius: number) => { if (todayEvents.length === 0) return null; const trueAngle = (((screenAngle - discAngle) % 360) + 360) % 360; let bestCategory: SecurityEvent["category"] = "sign-in"; let bestDr = Infinity; (Object.keys(BANDS) as SecurityEvent["category"][]).forEach((cat) => { const dr = Math.abs(radius - BANDS[cat].r); if (dr < bestDr) { bestDr = dr; bestCategory = cat; } }); let candidates = todayEvents.map((e, i) => ({ e, i })).filter(({ e }) => e.category === bestCategory); if (candidates.length === 0) candidates = todayEvents.map((e, i) => ({ e, i })); let best = candidates[0]!; let bestDist = Infinity; for (const c of candidates) { const d = angDist(angleForMs(c.e.time), trueAngle); if (d < bestDist) { bestDist = d; best = c; } } return best.i; }, [todayEvents, discAngle] ); // The interactive box: role="slider" and every pointer/keyboard handler // live on this plain

, not the

{label}

last 24h · now {formatClock(nowMs)}

No activity in the last 24 hours.

{liveMessage}

); } const CSS = ` .ns-tacho-rotate{ transition: transform 60s linear; } .ns-tacho-row-active{ background-color: var(--border); } @media (prefers-reduced-motion: reduce){ .ns-tacho-rotate{ transition: none !important; } } `; 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/tacho-disc/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/tacho-disc.tsx"}],"className":"h-[70svh] min-h-80"}]]}]