61: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"] 62: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"] 63:T1d3a,"use client"; /** @registry name="uptime-bar" type="ui" title="Uptime bar" description="One row of day bars for one service: up, degraded, down or no data, with the uptime percent, a tooltip on hover or focus, one tab stop with Left, Right, Home and End to inspect days, Enter to select one, and a screen reader summary worked out from the data. Bars thin out on a narrow container, never a horizontal scroll." */ import { useEffect, useId, useMemo, useRef, useState } from "react"; import { cn } from "@/registry/knowns/lib/knowns/utils"; import { STATUS_LABEL, describeDay, formatDay, formatMinutes, formatUptime, moveIndex, summaryText, tooltipAlign, uptimePercent, type DayStatus, type UptimeDay, } from "./uptime-bar-utils"; export type { DayStatus, UptimeDay } from "./uptime-bar-utils"; export interface UptimeBarProps { /** One entry per day, oldest first. Any count; 90 is the usual. */ days: UptimeDay[]; /** The service, e.g. "Model endpoint". */ label?: string; /** A muted line next to the label, e.g. "model-a". */ sublabel?: string; /** Overrides the uptime worked out from `days`. */ uptime?: number | null; /** Show the uptime percent. Default true. */ showUptime?: boolean; /** The left end of the row. Default: " days ago". */ startLabel?: string; /** The right end of the row. Default "Today". Pass "" to hide both. */ endLabel?: string; /** Bar height: sm 24px, md 32px. Default "md". */ /** Soften the "up" days so only trouble stands out. Default false. */ quiet?: boolean; size?: "sm" | "md"; /** Enter (or a click) on a day. The row stays one tab stop; the inspected day is the one you pass here. */ onDaySelect?: (day: UptimeDay, index: number) => void; /** Name for the row when there is no `label`. */ "aria-label"?: string; className?: string; } const BAR: Record = { up: "bg-emerald-500 dark:bg-emerald-500/90", degraded: "bg-amber-500 dark:bg-amber-500/90", down: "bg-red-500 dark:bg-red-500/90", none: "bg-muted-foreground/25", }; const TIP_POS = { start: "left-0", center: "-translate-x-1/2", end: "right-0" } as const; export function UptimeBar({ days, label, sublabel, uptime, showUptime = true, startLabel, endLabel = "Today", size = "md", quiet = false, onDaySelect, "aria-label": ariaLabel, className }: UptimeBarProps) { const uid = useId(); const n = days.length; const computed = useMemo(() => (uptime === undefined ? uptimePercent(days) : uptime), [days, uptime]); const summary = useMemo(() => summaryText(days, computed), [days, computed]); const [hover, setHover] = useState(null); const [cursor, setCursor] = useState(Math.max(0, n - 1)); const [focused, setFocused] = useState(false); const lastShown = useRef(null); // The data can change length under us (a period switch): keep the cursor on a real bar. useEffect(() => { setCursor((c) => Math.min(Math.max(0, n - 1), c)); }, [n]); if (n === 0) return null; const shown = hover ?? (focused ? cursor : null); if (shown !== null) lastShown.current = shown; // The tooltip stays mounted after the last bar so it can fade out where it was. const at = shown ?? (lastShown.current !== null ? Math.min(lastShown.current, n - 1) : null); const day = at === null ? null : days[at]; const optId = (i: number) => `${uid}-d${i}`; const name = label ?? ariaLabel ?? "Uptime"; const start = startLabel ?? `${n} days ago`; const h = size === "sm" ? "h-6" : "h-8"; return (

{(label || sublabel || showUptime) && (

{label && {label}} {sublabel && {sublabel}}

{showUptime && (

{formatUptime(computed)} uptime

)}

{endLabel !== "" && ( )}

); } export default UptimeBar; 64:T1803,/** @registry part-of="uptime-bar" */ /** Pure parts of Uptime Bar: day math, uptime percent, the screen reader summary and the roving key moves. No React. */ export type DayStatus = "up" | "degraded" | "down" | "none"; export interface UptimeDay { /** "2026-07-09" (a calendar day, no time zone) or a Date (read in UTC). */ date: string | Date; status: DayStatus; /** Minutes the service was down or degraded that day. Optional. */ downtimeMinutes?: number; /** One line about what happened, shown in the tooltip. */ note?: string; } export const STATUS_LABEL: Record = { up: "Operational", degraded: "Degraded", down: "Outage", none: "No data" }; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const DAY_MS = 86_400_000; const DAY_MINUTES = 1440; /** The calendar day as [year, month 1-12, day]. A string is read as it is written, a Date in UTC, so no time zone moves it. */ export function dayParts(date: string | Date): [number, number, number] | null { if (date instanceof Date) return Number.isNaN(date.getTime()) ? null : [date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate()]; const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(date); return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null; } /** "Jul 9", or "Jul 9, 2026" with `year`. An unreadable date comes back as it was given. */ export function formatDay(date: string | Date, year = false): string { const p = dayParts(date); if (!p) return String(date); return `${MONTHS[p[1] - 1]} ${p[2]}${year ? `, ${p[0]}` : ""}`; } /** The `count` days ending on `end`, oldest first, as "YYYY-MM-DD". */ export function dayRange(end: string | Date, count: number): string[] { const p = dayParts(end); if (!p || count <= 0) return []; const last = Date.UTC(p[0], p[1] - 1, p[2]); return Array.from({ length: Math.floor(count) }, (_, i) => new Date(last - (count - 1 - i) * DAY_MS).toISOString().slice(0, 10)); } /** "46 minutes", "1 minute", "1 hour", "1 hour 5 minutes", "24 hours". */ export function formatMinutes(minutes: number): string { const m = Math.max(0, Math.round(minutes)); if (m < 60) return `${m} ${m === 1 ? "minute" : "minutes"}`; const h = Math.floor(m / 60); const r = m % 60; const hours = `${h} ${h === 1 ? "hour" : "hours"}`; return r === 0 ? hours : `${hours} ${r} ${r === 1 ? "minute" : "minutes"}`; } /** * Uptime over the days that have data, as a percent. A "none" day is left out. A day with downtimeMinutes counts * those minutes; a "down" day without them counts the whole day; "degraded" without them counts nothing, because * the service was still answering. null when no day has data. */ export function uptimePercent(days: readonly UptimeDay[]): number | null { const counted = days.filter((d) => d.status !== "none"); if (counted.length === 0) return null; const down = counted.reduce((sum, d) => { const m = d.downtimeMinutes ?? (d.status === "down" ? DAY_MINUTES : 0); return sum + Math.min(DAY_MINUTES, Math.max(0, m)); }, 0); return Math.max(0, 100 - (down / (counted.length * DAY_MINUTES)) * 100); } /** "99.95%", "100%", "99.99%" for 99.9999 (never rounds a real outage up to 100%). Two decimals at most, trailing zeros dropped. */ export function formatUptime(percent: number | null | undefined): string { if (percent === null || percent === undefined || !Number.isFinite(percent)) return "No data"; const p = Math.min(100, Math.max(0, percent)); const t = p >= 100 ? 100 : Math.floor(p * 100) / 100; return `${t.toFixed(2).replace(/\.?0+$/, "")}%`; } /** The days with trouble, oldest first. */ export const incidentDays = (days: readonly UptimeDay[]): UptimeDay[] => days.filter((d) => d.status === "degraded" || d.status === "down"); /** One day in words: "Jul 9, 2026: degraded, 46 minutes. Elevated errors." */ export function describeDay(d: UptimeDay): string { const parts = [STATUS_LABEL[d.status].toLowerCase()]; if (d.downtimeMinutes && d.downtimeMinutes > 0 && d.status !== "up" && d.status !== "none") parts.push(formatMinutes(d.downtimeMinutes)); const note = d.note ? ` ${d.note.trim().replace(/[.!?]?$/, ".")}` : ""; return `${formatDay(d.date, true)}: ${parts.join(", ")}.${note}`; } /** * What a screen reader hears for the whole row, worked out from the data: * "99.95% uptime over 90 days. 2 incidents: Jul 9 degraded, 46 minutes; Aug 2 outage, 2 hours." * At most `limit` incidents are listed, newest first, then "and N more". */ export function summaryText(days: readonly UptimeDay[], uptime: number | null = uptimePercent(days), limit = 5): string { const head = uptime === null ? `No data for ${days.length} days.` : `${formatUptime(uptime)} uptime over ${days.length} days.`; const trouble = incidentDays(days); if (trouble.length === 0) return uptime === null ? head : `${head} No incidents.`; const shown = trouble .slice(-limit) .reverse() .map((d) => `${formatDay(d.date)} ${d.status === "down" ? "outage" : "degraded"}${d.downtimeMinutes ? `, ${formatMinutes(d.downtimeMinutes)}` : ""}`); const more = trouble.length - shown.length; return `${head} ${trouble.length} ${trouble.length === 1 ? "incident" : "incidents"}: ${shown.join("; ")}${more > 0 ? `; and ${more} more` : ""}.`; } /** Which bar the inspection moves to. Left and Right stop at the ends (no wrap); Home and End jump. Other keys: null. */ export function moveIndex(index: number, key: string, count: number): number | null { if (count <= 0) return null; const last = count - 1; switch (key) { case "ArrowLeft": return Math.max(0, index - 1); case "ArrowRight": return Math.min(last, index + 1); case "Home": return 0; case "End": return last; default: return null; } } /** Where the tooltip sits against its bar, so it never leaves the row: the first and last bars pin it to their edge. */ export function tooltipAlign(index: number, count: number, edge = 6): "start" | "center" | "end" { if (index < edge) return "start"; if (index >= count - edge) return "end"; return "center"; } 60:["$","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,["$","$L61",null,{"namespace":"@knowns-ui","registryDependencies":["https://ui.knowns.dev/r/knowns-core.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/knowns/ui/knowns/uptime-bar/uptime-bar.tsx","content":"$63","type":"registry:ui","target":"components/ui/knowns/uptime-bar/uptime-bar.tsx"},{"path":"registry/knowns/ui/knowns/uptime-bar/uptime-bar-utils.ts","content":"$64","type":"registry:ui","target":"components/ui/knowns/uptime-bar/uptime-bar-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]