62: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"] 63: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"] 64:T504,import type { MessageDefinitions } from "../../runtime/messages"; /** Built-in English copy; stable keys are the public translation API. */ export const english = { running: "Running", failed: "Failed", succeeded: "Succeeded", time: "Time", steps: "Steps", failed2: "· {errors} failed", tokens: "Tokens", inOut: "{value} in · {value2} out", notReported: "Not reported", cost: "Cost", noStepsYetTheyAppearHereAs: "No steps yet. They appear here as the run starts them.", trace: "Trace: {title}", runTrace: "Run trace", close: "Close {name}", open: "Open {name}", failed3: "failed", running2: "running", cancelled: "cancelled", done: "done", attempts: ", {value} attempts", details: "{name} details", kind: "Kind", started: "Started", at: "at {value}", took: "Took", soFar: " so far", attempts2: "Attempts", after: "after {value}", input: "Input", error: "Error", output: "Output", agent: "Agent", model: "Model", tool: "Tool", retrieval: "Retrieval", check: "Check", wait: "Wait", /** A ghost re-run under the real run. */ ghostSays: "ghost {value}", same: "same", notRun: "not run", ghostOnly: "ghost only", queued: "not started", noDifference: "no difference", } satisfies MessageDefinitions; 65:T2ec3,@layer properties, theme, base, components, utilities; @layer components { .root { container-type: inline-size; display: grid; min-width: min(18rem, 100%); overflow: hidden; border-radius: var(--pui-radius-card); --_name: minmax(10rem, 34%); --_dur: 4.5rem; --_row: 1.875rem; } .root[data-density="default"] { --_row: 2.25rem; } .root[data-room="narrow"] { --_name: minmax(8rem, 46%); --_dur: 3.75rem; } /* with a ghost the last column carries each step's difference under its time */ .root[data-ghosted] { --_dur: 7.5rem; } .root[data-ghosted][data-room="narrow"] { --_dur: 5.5rem; } .root[data-ghosted] .duration { flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; line-height: 1.2; } .summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pui-space-2) var(--pui-space-4); padding: var(--pui-space-3) var(--pui-space-4); border-bottom: 1px solid var(--pui-line-soft); } .runStatus { display: inline-flex; align-items: center; gap: var(--pui-space-1-5); color: var(--pui-ink); font-size: var(--pui-text-sm); font-weight: var(--pui-weight-medium); } .runStatus :where(svg) { width: var(--pui-icon-md); height: var(--pui-icon-md); } .runStatus[data-status="ok"] :where(svg) { color: var(--pui-success); } .runStatus[data-status="error"] :where(svg) { color: var(--pui-danger); } .title { min-width: 0; flex: 1; overflow: hidden; color: var(--pui-ink-2); font-size: var(--pui-text-sm); text-overflow: ellipsis; white-space: nowrap; } .facts { display: flex; flex-wrap: wrap; gap: var(--pui-space-1) var(--pui-space-4); margin-inline-start: auto; font-size: var(--pui-text-xs); } .facts > div { display: flex; gap: var(--pui-space-1-5); } .facts dt { color: var(--pui-ink-3); } .facts dd { color: var(--pui-ink); } .errCount { color: var(--pui-danger); } .body { display: grid; min-height: 0; } @container (min-width: 54rem) { .body:has(> .detail) { grid-template-columns: minmax(0, 1fr) 18rem; } } .trace { min-width: 0; padding: var(--pui-space-2) var(--pui-space-2) var(--pui-space-3); } /* the axis and every row share one template: name, lane, duration */ .axis, .row { display: grid; grid-template-columns: var(--_name) minmax(0, 1fr) var(--_dur); align-items: center; gap: var(--pui-space-2); } .axis { height: 1.5rem; padding-inline: var(--pui-space-2); color: var(--pui-ink-3); font-size: var(--pui-text-2xs); font-variant-numeric: tabular-nums; } .lane { position: relative; height: 100%; min-width: 0; /* marks are lane-wide boxes moved by transforms: nothing they carry past the lane may scroll the page */ overflow-x: clip; } .axis .lane { border-bottom: 1px solid var(--pui-line-soft); } .tick { position: absolute; bottom: 3px; translate: -50% 0; white-space: nowrap; } .tick:first-child { translate: 0 0; } /* now, while the run is live: one line through the axis and every row, on the rows' own template */ .nowOverlay { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: var(--_name) minmax(0, 1fr) var(--_dur); gap: var(--pui-space-2); padding-inline: var(--pui-space-2); pointer-events: none; } /* the now line: a lane-wide box with its start edge drawn, moved by a transform */ .nowLine { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 100%; border-inline-start: 1px solid var(--pui-accent); transform: translateX(calc(var(--s) * 100%)); transition: transform var(--pui-duration-fast) linear; } .nowLine:dir(rtl) { transform: translateX(calc(var(--s) * -100%)); } .empty { padding: var(--pui-space-6) var(--pui-space-3); color: var(--pui-ink-3); font-size: var(--pui-text-sm); text-align: center; } .rows { position: relative; display: grid; } .row { position: relative; min-height: var(--_row); padding-inline: var(--pui-space-2); border-radius: var(--pui-radius-chip); cursor: pointer; outline-offset: -2px; } .row:hover { background-color: var(--pui-hover); } .row[aria-selected="true"] { background-color: var(--pui-current-tint, var(--pui-accent-tint)); box-shadow: inset 2px 0 0 var(--pui-current-edge, var(--pui-accent)); } .row[aria-selected="true"]:dir(rtl) { box-shadow: inset -2px 0 0 var(--pui-current-edge, var(--pui-accent)); } .name { display: flex; min-width: 0; align-items: center; gap: var(--pui-space-1); color: var(--pui-ink); font-size: var(--pui-text-xs); } .indent { width: calc(var(--_depth, 0) * 0.875rem); flex-shrink: 0; } .chevron, .chevronSpace { display: grid; width: 1rem; height: 1rem; flex-shrink: 0; place-items: center; border-radius: 3px; color: var(--pui-ink-3); } .chevron:hover { background: var(--pui-hover-2); color: var(--pui-ink); } .chevron :where(svg) { width: var(--pui-icon-sm); height: var(--pui-icon-sm); transition: rotate var(--pui-motion-out) var(--pui-ease-default); } .chevron[data-open] :where(svg) { rotate: 90deg; } .chevron:dir(rtl) :where(svg) { scale: -1 1; } .kindIcon { display: grid; flex-shrink: 0; place-items: center; color: var(--_kind, var(--pui-ink-3)); } .kindIcon :where(svg) { width: 0.8125rem; height: 0.8125rem; } .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model { flex-shrink: 1; min-width: 0; overflow: hidden; color: var(--pui-ink-3); font-family: var(--pui-font-code); font-size: var(--pui-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .root[data-room="narrow"] .model { display: none; } /* kinds take series colours; the bar is the step's time on the run's axis */ .row[data-kind="llm"], .detailBody { --_kind: var(--pui-series-1); } .row[data-kind="tool"] { --_kind: var(--pui-series-2); } .row[data-kind="retrieval"] { --_kind: var(--pui-series-3); } .row[data-kind="guardrail"] { --_kind: var(--pui-series-4); } .row[data-kind="agent"], .row[data-kind="wait"] { --_kind: var(--pui-series-8); } /* marks on the lane: a lane-wide box moved to the start and scaled to the length (one transform; a replay grows them without layout) */ .bar, .attempt, .ghostBar { inset-inline-start: 0; width: 100%; transform-origin: left; transform: translateX(calc(var(--s) * 100%)) scaleX(var(--w)); transition: transform var(--pui-duration-fast) linear; } .bar:dir(rtl), .attempt:dir(rtl), .ghostBar:dir(rtl) { transform-origin: right; transform: translateX(calc(var(--s) * -100%)) scaleX(var(--w)); } .bar, .attempt { position: absolute; top: 50%; height: 0.625rem; border-radius: calc(var(--pui-radius-chip) / 3); translate: 0 -50%; } .bar:dir(rtl), .attempt:dir(rtl) { translate: 0 -50%; } .bar { background: var(--_kind, var(--pui-series-8)); } .row[data-status="queued"] .name { color: var(--pui-ink-3); } .row[data-kind="agent"] .bar { height: 0.375rem; } .row[data-status="running"] .bar { background: linear-gradient(to right, var(--_kind), color-mix(in oklab, var(--_kind) 55%, var(--pui-surface))); } .row[data-status="error"] .bar { background: var(--pui-danger); } .row[data-status="cancelled"] .bar { background: var(--pui-line-strong); } /* a ghost re-run: the real bar rides the upper half, the ghost an outline in the same colour under it */ .row[data-ghost] .bar, .row[data-ghost] .attempt { translate: 0 -95%; height: 0.5rem; } .ghostBar { position: absolute; top: 50%; height: 0.5rem; translate: 0 5%; border-radius: calc(var(--pui-radius-chip) / 3); box-shadow: inset 0 0 0 1px var(--_kind, var(--pui-series-8)); background: repeating-linear-gradient( 90deg, color-mix(in oklab, var(--_kind, var(--pui-series-8)) 28%, transparent) 0 3px, transparent 3px 5px ); } .row[data-ghost="only"] .ghostBar { translate: 0 -50%; } .row[data-shared] .bar { opacity: 0.55; } /* the chain that sets the run's length: a hairline under the bar (and under the ghost's own chain) */ .row[data-critical] .bar::after, .ghostBar[data-critical]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -3px; height: 1px; /* meaning never rides the look's accent (red in Pop): the chain is drawn in ink */ background: var(--pui-ink); } .delta { font-size: var(--pui-text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; } .delta[data-tone="good"] { color: var(--pui-success); } .delta[data-tone="warn"] { color: var(--pui-warning); } .delta[data-tone="mixed"] { color: var(--pui-ink-2); } .ghostWord, .sameWord { font-size: var(--pui-text-2xs); color: var(--pui-ink-3); white-space: nowrap; } /* a failed earlier attempt: hatched in the danger tone, with a gap before the next try */ .attempt { background: repeating-linear-gradient(135deg, var(--pui-danger) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--pui-danger); } .row[data-below] .name::after { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--pui-danger); } .duration { display: flex; align-items: center; justify-content: flex-end; gap: var(--pui-space-1); color: var(--pui-ink-3); font-size: var(--pui-text-2xs); white-space: nowrap; } .failedWord { color: var(--pui-danger); } /* the detail: beside the trace when wide, under it when narrow */ .detail { min-width: 0; border-top: 1px solid var(--pui-line-soft); } @container (min-width: 54rem) { .detail { border-top: none; border-inline-start: 1px solid var(--pui-line-soft); } } .detailBody { display: grid; gap: var(--pui-space-3); padding: var(--pui-space-4); animation: in var(--pui-motion-in) var(--pui-ease-default); } @keyframes in { from { opacity: 0; } } .detailTitle { display: flex; align-items: center; gap: var(--pui-space-2); color: var(--pui-ink); font-size: var(--pui-text-sm); font-weight: var(--pui-weight-medium); } .detailFacts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pui-space-1) var(--pui-space-3); font-size: var(--pui-text-xs); } .detailFacts dt { color: var(--pui-ink-3); } .detailFacts dd { color: var(--pui-ink); } .blockLabel { margin-bottom: var(--pui-space-1); color: var(--pui-ink-3); font-size: var(--pui-text-2xs); font-weight: var(--pui-weight-medium); letter-spacing: var(--pui-tracking-mono-caps, 0.04em); text-transform: uppercase; } .attempts ol { display: grid; gap: var(--pui-space-1); padding-inline-start: var(--pui-space-4); color: var(--pui-ink-2); font-size: var(--pui-text-xs); list-style: decimal; } .block { max-height: 12rem; overflow: auto; padding: var(--pui-space-2) var(--pui-space-3); border-radius: var(--pui-radius-control); color: var(--pui-ink-2); font-family: var(--pui-font-code); font-size: var(--pui-text-2xs); line-height: 1.5; text-align: left; white-space: pre-wrap; } .block[data-error] { color: var(--pui-danger); } } 66:T7740,"use client"; import { createFormatters, FALLBACK_LOCALE } from "../../runtime/messages"; import { type Translator } from "../../runtime/messages"; import { numberFormatter, useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useLocale } from "../../runtime/localization"; import { useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode, type Ref } from "react"; import { Ban, Bot, ChevronRight, CircleCheck, CircleX, Database, Hourglass, ShieldCheck, Sparkles, Wrench, } from "lucide-react"; import { Spinner } from "../spinner/spinner"; import { useActive } from "../../hooks/use-active"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useFlip } from "../../hooks/use-flip"; import { useWidthAs } from "../../hooks/use-content-width"; import { useNow } from "../../lib/now"; import { cn } from "../../lib/utils"; import { useControllable } from "../../hooks/use-controllable"; import styles from "./run-trace.module.css"; export type TraceSpanKind = "agent" | "llm" | "tool" | "retrieval" | "guardrail" | "wait"; /** `queued`: not started yet (a replay before the step begins): its row holds its place, with no bar and no time. */ export type TraceSpanStatus = "ok" | "error" | "running" | "cancelled" | "queued"; export interface TraceSpan { id: string; /** The step that started this one; omit for the run's top steps. */ parentId?: string | null; name: string; kind?: TraceSpanKind; /** ms from the start of the run. */ start: number; /** ms from the start of the run; missing while it runs. */ end?: number | null; status?: TraceSpanStatus; /** Earlier tries that failed before the one that counts (start/end in ms from the run's start). */ attempts?: { start: number; end: number; error?: string }[]; /** null when the provider did not report them. */ tokens?: { input: number; output: number } | null; /** In the money of `currency`; null when not reported. */ cost?: number | null; model?: string; input?: unknown; output?: unknown; error?: string; } /** A second run of the same steps from one changed step (a ghost re-run), drawn under the real run on the same axis. */ export interface TraceGhost { /** The ghost's steps, matched to the real run's by id. A real step after `from` with no ghost counterpart is one * the ghost didn't run (a retry it skipped shows as attempts it doesn't have); a ghost step with a new id is one * only the ghost ran. */ spans: TraceSpan[]; /** The step that was changed: real steps that ended before it began were reused, not run again ("same"). */ from: string; /** How a ghost step got its result when it wasn't run live, by id: "recorded", "dry run". */ notes?: Record; } export type RunTraceClassNames = Partial< Record< "root" | "summary" | "axis" | "row" | "name" | "bar" | "attempt" | "duration" | "detail" | "ghost" | "delta", string > >; export interface RunTraceProps { spans: TraceSpan[]; /** ms since the run started; omit to let the trace keep its own clock while something runs. */ now?: number; /** The time axis's length in ms; omit to fit the run so far. Give the whole run's length while a replay rewinds it * (the Replay bar's `frozen`), so the bars stay in place and only the line at now moves. */ extent?: number; title?: ReactNode; selected?: string | null; defaultSelected?: string | null; onSelectedChange?: (id: string | null) => void; expanded?: string[]; defaultExpanded?: string[]; onExpandedChange?: (ids: string[]) => void; density?: "compact" | "default"; currency?: string; /** A ghost re-run to draw under the real run: dashed bars on the same axis, each step's time and cost difference. */ ghost?: TraceGhost; /** Mark the critical path (the chain of steps that set the run's length), and the ghost's. */ criticalPath?: boolean; /** More in the chosen step's detail, after its output: a re-run picker, links. */ detailExtra?: (span: TraceSpan) => ReactNode; className?: string; classNames?: RunTraceClassNames; style?: CSSProperties; ref?: Ref; } function localizedKIND( i18n: Translator, ): Record { return { agent: { label: i18n("agent"), icon: }, llm: { label: i18n("model"), icon: }, tool: { label: i18n("tool"), icon: }, retrieval: { label: i18n("retrieval"), icon: }, guardrail: { label: i18n("check"), icon: }, wait: { label: i18n("wait"), icon: }, }; } const duration = (ms: number, locale = FALLBACK_LOCALE) => { const n = createFormatters(locale).number; if (ms < 1000) return n(Math.round(ms), { style: "unit", unit: "millisecond", unitDisplay: "narrow" }); if (ms < 60000) return n(ms / 1000, { style: "unit", unit: "second", unitDisplay: "narrow", minimumFractionDigits: ms < 10000 ? 2 : 1, maximumFractionDigits: ms < 10000 ? 2 : 1, }); return ( n(Math.floor(ms / 60000), { style: "unit", unit: "minute", unitDisplay: "narrow" }) + " " + n(Math.round((ms % 60000) / 1000), { style: "unit", unit: "second", unitDisplay: "narrow" }) ); }; function createLocalFormatters(locale: string) { const compact = numberFormatter(locale, { notation: "compact", maximumFractionDigits: 1 }); return { compact }; } function useLocalFormatters(override?: string) { const locale = useLocale(override); return useMemo(() => createLocalFormatters(locale), [locale]); } /** A "nice" step for about `n` marks over `span` ms. */ function tickStep(span: number, n: number) { const raw = span / Math.max(1, n); const pow = 10 ** Math.floor(Math.log10(raw)); const m = raw / pow; return (m <= 1 ? 1 : m <= 2 ? 2 : m <= 5 ? 5 : 10) * pow; } const show = (v: unknown) => (v == null ? null : typeof v === "string" ? v : JSON.stringify(v, null, 2)); /** * One agent run as a waterfall: steps nested under the step that started them, each a bar on a shared time axis, * retries as earlier attempts on the same bar, tokens and cost per step and for the run. Live bars grow while a step * runs (a clock that stops when nothing runs or the trace is off screen); choosing a step shows its detail. */ export function RunTrace({ spans, now: nowProp, extent, title, selected: selectedProp, defaultSelected = null, onSelectedChange, expanded: expandedProp, defaultExpanded, onExpandedChange, density = "compact", currency = "$", ghost, criticalPath = false, detailExtra, className, classNames, style, ref, }: RunTraceProps) { const i18n = useMessages("run-trace", englishMessages); const kinds = useMemo(() => localizedKIND(i18n), [i18n]); const { compact } = useLocalFormatters(); const root = useRef(null); const attach = useComposedRef(root, ref); const active = useActive(root); const running = spans.some((s) => s.end == null && s.status !== "cancelled" && s.status !== "error"); // the trace's own clock: from the latest time it has been told, forward in real time, only while something runs const anchor = useRef<{ at: number; base: number } | null>(null); const known = Math.max(0, ...spans.map((s) => s.end ?? s.start)); const wall = useNow(nowProp === undefined && running && active, 100); if (wall != null && (!anchor.current || known > anchor.current.base)) anchor.current = { at: wall, base: known }; const now = nowProp ?? (running && wall != null && anchor.current ? anchor.current.base + (wall - anchor.current.at) : known); const [selected, select] = useControllable(selectedProp, defaultSelected, onSelectedChange); const realIds = useMemo(() => new Set(spans.map((s) => s.id)), [spans]); const ghostById = useMemo(() => new Map((ghost?.spans ?? []).map((s) => [s.id, s])), [ghost]); // steps only the ghost ran join the tree under their parent, drawn as ghosts alone const ghostOnly = useMemo(() => (ghost?.spans ?? []).filter((s) => !realIds.has(s.id)), [ghost, realIds]); const childrenOf = useMemo(() => { const m = new Map(); for (const s of [...spans, ...ghostOnly]) { const k = s.parentId ?? null; m.set(k, [...(m.get(k) ?? []), s]); } for (const list of m.values()) list.sort((a, b) => a.start - b.start); return m; }, [spans, ghostOnly]); const [openIds, setOpenIds] = useControllable( expandedProp, defaultExpanded ?? null, onExpandedChange, ); const isOpen = (id: string) => openIds === null || openIds.includes(id); const setOpen = (id: string, open: boolean) => { const all = openIds ?? spans.filter((s) => childrenOf.has(s.id)).map((s) => s.id); const next = open ? [...new Set([...all, id])] : all.filter((x) => x !== id); setOpenIds(next); }; // the visible rows, depth first, under open parents only const rows = useMemo(() => { const out: { span: TraceSpan; depth: number }[] = []; const walk = (parent: string | null, depth: number) => { for (const s of childrenOf.get(parent) ?? []) { out.push({ span: s, depth }); if (isOpen(s.id)) walk(s.id, depth + 1); } }; walk(null, 0); return out; }, [childrenOf, openIds]); // eslint-disable-line react-hooks/exhaustive-deps -- isOpen reads openIds const byId = useMemo(() => new Map(spans.map((s) => [s.id, s])), [spans]); const endOf = (s: TraceSpan) => s.end ?? (s.status === "cancelled" || s.status === "error" ? s.start : now); const statusOf = (s: TraceSpan): TraceSpanStatus => s.status ?? (s.end == null ? "running" : "ok"); // how long the run has taken, and the axis it is drawn on (the same unless `extent` holds it longer) const elapsed = Math.max(1, now, ...spans.filter((s) => s.status !== "queued").map(endOf)); const ghostEnd = (s: TraceSpan) => s.end ?? (s.status === "cancelled" || s.status === "error" ? s.start : now); const total = Math.max(elapsed, extent ?? 0, ...(ghost?.spans ?? []).map(ghostEnd)); const fromStart = ghost ? (byId.get(ghost.from)?.start ?? ghostById.get(ghost.from)?.start ?? 0) : 0; // the chain of steps that set a run's length: the top step that ends last, then its child that ends last, and down const critical = (list: TraceSpan[], end: (s: TraceSpan) => number) => { const kids = new Map(); for (const s of list) kids.set(s.parentId ?? null, [...(kids.get(s.parentId ?? null) ?? []), s]); const out = new Set(); let level = kids.get(null) ?? []; while (level.length) { const last = level.reduce((a, b) => (end(b) > end(a) ? b : a)); out.add(last.id); level = kids.get(last.id) ?? []; } return out; }; const realCritical = useMemo( () => (criticalPath ? critical(spans, endOf) : new Set()), [criticalPath, spans, now], // eslint-disable-line react-hooks/exhaustive-deps -- endOf reads now ); const ghostCritical = useMemo( () => (criticalPath && ghost ? critical(ghost.spans, ghostEnd) : new Set()), [criticalPath, ghost, now], // eslint-disable-line react-hooks/exhaustive-deps -- ghostEnd reads now ); // a failing step marks the steps above it, so a closed parent still says something under it failed const failedBelow = useMemo(() => { const set = new Set(); for (const s of spans) if (statusOf(s) === "error") { let p = s.parentId; while (p) { set.add(p); p = byId.get(p)?.parentId; } } return set; }, [spans, byId]); const room = useWidthAs(root, (w) => (w < 560 ? "narrow" : w < 860 ? "mid" : "wide"), "wide"); // as many time labels as the lane holds (one per 64 px, a label's width and a gap), at most three narrow and five wide const laneRef = useRef(null); const lane = useWidthAs(laneRef, (w) => Math.floor(w / 64), -1); const step = tickStep(total, Math.max(1, Math.min(room === "narrow" ? 3 : 5, lane < 0 ? Infinity : lane))); const ticks = Array.from({ length: Math.floor(total / step) + 1 }, (_, i) => i * step); const pct = (ms: number) => `${(ms / total) * 100}%`; // a mark on the lane: its start and length as fractions, drawn as one transform (a lane-wide box moved and scaled), // so a replay grows bars and moves the now line without laying anything out const mark = (start: number, length: number) => ({ "--s": start / total, "--w": Math.max(length, total / 400) / total }) as CSSProperties; const errors = spans.filter((s) => statusOf(s) === "error").length; const tokens = spans.reduce( (t, s) => (s.tokens ? { input: t.input + s.tokens.input, output: t.output + s.tokens.output, any: true } : t), { input: 0, output: 0, any: false }, ); const reportedCost = spans.filter((s) => s.cost != null); const cost = reportedCost.reduce((c, s) => c + (s.cost ?? 0), 0); const runStatus: TraceSpanStatus = running ? "running" : errors ? "error" : "ok"; const list = useRef(null); useFlip(list, { ghost: false }); const [cursor, setCursor] = useState(null); const at = rows.find((r) => r.span.id === (cursor ?? selected))?.span.id ?? rows[0]?.span.id ?? null; const focusRow = (id: string) => { setCursor(id); requestAnimationFrame(() => list.current?.querySelector(`[data-id="${CSS.escape(id)}"]`)?.focus()); }; const onKey = (e: KeyboardEvent) => { if (!at) return; const i = rows.findIndex((r) => r.span.id === at); const span = rows[i]?.span; const rtl = getComputedStyle(e.currentTarget).direction === "rtl"; const forward = rtl ? "ArrowLeft" : "ArrowRight"; const back = rtl ? "ArrowRight" : "ArrowLeft"; if (e.key === "ArrowDown" && rows[i + 1]) focusRow(rows[i + 1].span.id); else if (e.key === "ArrowUp" && rows[i - 1]) focusRow(rows[i - 1].span.id); else if (e.key === "Home" && rows[0]) focusRow(rows[0].span.id); else if (e.key === "End" && rows.length) focusRow(rows[rows.length - 1].span.id); else if (e.key === forward && span) { if (childrenOf.has(span.id) && !isOpen(span.id)) setOpen(span.id, true); else if (childrenOf.has(span.id) && rows[i + 1]) focusRow(rows[i + 1].span.id); } else if (e.key === back && span) { if (childrenOf.has(span.id) && isOpen(span.id)) setOpen(span.id, false); else if (span.parentId) focusRow(span.parentId); } else if ((e.key === "Enter" || e.key === " ") && span) select(selected === span.id ? null : span.id); else if (e.key === "Escape" && selected) select(null); else return; e.preventDefault(); }; const chosen = selected ? byId.get(selected) : undefined; return (

{runStatus === "running" ? ( ) : runStatus === "error" ? ( ) : ( )} {runStatus === "running" ? i18n("running") : runStatus === "error" ? i18n("failed") : i18n("succeeded")} {title && {title}}

{i18n("time")}: {duration(elapsed, i18n.locale)}
{i18n("steps")}: {spans.length} {errors > 0 && {i18n("failed2", { errors: errors })}}
{i18n("tokens")}: {tokens.any ? i18n("inOut", { value: compact.format(tokens.input), value2: compact.format(tokens.output), }) : i18n("notReported")}
{i18n("cost")}: {reportedCost.length ? `${currency}${i18n.number(cost, { minimumFractionDigits: cost < 1 ? 4 : 2, maximumFractionDigits: cost < 1 ? 4 : 2 })}` : i18n("notReported")}

{ticks.map((t) => ( {duration(t, i18n.locale)} ))}

{rows.length === 0 ? (

{i18n("noStepsYetTheyAppearHereAs")}

) : (

{running && (

)} {rows.map(({ span: s, depth }) => { const g = ghost ? ghostById.get(s.id) : undefined; const onlyGhost = !!ghost && !realIds.has(s.id); // shared: ended before the changed step began, so the ghost reused it const shared = !!ghost && !onlyGhost && endOf(s) <= fromStart && s.id !== ghost.from; const skipped = !!ghost && !onlyGhost && !shared && !g && s.start >= fromStart; const gms = g ? Math.max(0, ghostEnd(g) - g.start) : 0; const st = statusOf(s); const kind = s.kind ?? "tool"; const hasKids = childrenOf.has(s.id); const end = endOf(s); const ms = Math.max(0, end - s.start); const open = hasKids && isOpen(s.id); return (

{ setCursor(s.id); select(selected === s.id ? null : s.id); }} onFocus={() => setCursor(s.id)} > {hasKids ? ( ) : ( )} {kinds[kind].icon} {s.name} {s.model && {s.model}} , {kinds[kind].label},{" "} {st === "error" ? i18n("failed3") : st === "running" ? i18n("running2") : st === "cancelled" ? i18n("cancelled") : i18n("done")} , {duration(ms, i18n.locale)} {s.attempts?.length ? i18n("attempts", { value: s.attempts.length + 1 }) : ""} {g ? `, ${i18n("ghostSays", { value: duration(gms, i18n.locale) })}` : ""} {shared ? `, ${i18n("same")}` : skipped ? `, ${i18n("notRun")}` : ""} {g && ( )} {!onlyGhost && s.attempts?.map((a, i) => ( ))} {!onlyGhost && st !== "queued" && ( )} {st === "error" ? ( {i18n("failed")} ) : st === "cancelled" ? ( ) : null} {st === "queued" && !onlyGhost ? ( {i18n("queued")} ) : ( {duration(onlyGhost ? gms : ms, i18n.locale)} )} {g && !onlyGhost && g.end != null && s.end != null && ( )} {onlyGhost && {i18n("ghostOnly")}} {shared && {i18n("same")}} {skipped && {i18n("notRun")}}

); })}

)}

{chosen && ( )}

); } /** A ghost step against its real step: time and cost, signed by what it does to the run, in words as well as tone. */ function Delta({ ms, cost, note, currency, className, }: { ms: number; cost: number | null; note?: string; currency: string; className?: string; }) { const i18n = useMessages("run-trace", englishMessages); const sign = (n: number) => (n > 0 ? "+" : n < 0 ? "−" : "±"); const time = Math.abs(ms) < 50 ? null : `${sign(ms)}${duration(Math.abs(ms), i18n.locale)}`; const money = cost == null || Math.abs(cost) < 0.00005 ? null : `${sign(cost)}${currency}${i18n.number(Math.abs(cost), { minimumFractionDigits: 2, maximumFractionDigits: Math.abs(cost) < 0.01 ? 4 : 2 })}`; const better = ms <= 0 && (cost == null || cost <= 0); const worse = ms >= 0 && (cost == null || cost >= 0) && (time || money); return ( {[time, money].filter(Boolean).join(" · ") || i18n("noDifference")} {note && · {note}} ); } function Detail({ span, end, status, currency, className, extra, }: { span: TraceSpan; end: number; status: TraceSpanStatus; currency: string; className?: string; extra?: ReactNode; }) { const i18n = useMessages("run-trace", englishMessages); const kinds = useMemo(() => localizedKIND(i18n), [i18n]); const locale = useLocale(); const kind = span.kind ?? "tool"; const input = show(span.input); const output = show(span.error ?? span.output); return (

{kinds[kind].icon} {span.name}

{i18n("kind")}: {kinds[kind].label} {span.model ? ` · ${span.model}` : ""}
{i18n("started")}: {i18n("at", { value: duration(span.start, i18n.locale) })}
{i18n("took")}: {duration(Math.max(0, end - span.start), i18n.locale)} {status === "running" ? i18n("soFar") : ""}
{i18n("tokens")}: {span.tokens ? i18n("inOut", { value: numberFormatter(locale).format(span.tokens.input), value2: numberFormatter(locale).format(span.tokens.output), }) : span.kind === "llm" ? i18n("notReported") : "—"}
{i18n("cost")}: {span.cost != null ? `${currency}${i18n.number(span.cost, { minimumFractionDigits: 4, maximumFractionDigits: 4 })}` : span.kind === "llm" ? i18n("notReported") : "—"}

{!!span.attempts?.length && (

{i18n("attempts2")}

{i18n("failed")}{" "} {i18n("after", { value: duration(a.end - a.start, i18n.locale) })} {a.error ? `: ${a.error}` : ""}
{status === "error" ? ( {i18n("failed")} ) : status === "running" ? ( i18n("running") ) : ( i18n("succeeded") )}{" "} {i18n("after", { value: duration(Math.max(0, end - span.start), i18n.locale) })}

)} {input && (

{i18n("input")}

              {input}

)} {output && (

{span.error ? i18n("error") : i18n("output")}

              {output}

)} {extra}

); } export default RunTrace; 67:T70b,@layer properties, theme, base, components, utilities; @layer components { /* With a delay the ring waits unseen and then fades in, so quick work never flashes it; the result (a check or a cross) always shows at once. */ .root[data-delay] { animation: appear var(--pui-fade-in) var(--pui-ease-default) var(--_delay) both; } @keyframes appear { from { opacity: 0; } } /* The turn runs on the compositor (a CSS animation on the svg box) and costs no JS per frame. When the work ends the arc closes into a full ring over the standard duration, so stopping the turn is invisible, and the check or cross draws itself a beat later. All timing comes from the motion tokens; the loop period follows --pui-motion-scale. */ .svg[data-state="loading"] { animation: turn calc(0.8s * var(--pui-motion-scale, 1) * var(--pui-motion-look, 1)) linear infinite; } .track { stroke-opacity: 0.18; } .arc { stroke-dasharray: 0.3 1; transition: stroke-dasharray var(--pui-duration-standard) var(--pui-ease-enter); } .svg:not([data-state="loading"]) .arc { stroke-dasharray: 1 1; } .mark { stroke-dasharray: 1 1; animation: draw var(--pui-duration-standard) var(--pui-ease-enter) var(--pui-duration-fast) both; } @keyframes turn { to { transform: rotate(1turn); } } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .svg[data-paused] { animation-play-state: paused; } .svg[data-reduced], .svg[data-reduced] .mark { animation: none; } /* Reduction retains the loading/result shape without a decorative loop. */ @media (prefers-reduced-motion: reduce) { .svg[data-state="loading"], .mark { animation: none; } } } 68:T151c,"use client"; import { useMessages } from "../../runtime/localization"; import { english as englishMessages } from "./messages"; import { useComponentDefaults } from "../../runtime/appearance"; import type { SpinnerDefaults } from "./defaults"; export type { SpinnerDefaults } from "./defaults"; import { useRef, type CSSProperties, type Ref } from "react"; import { useComposedRef } from "../../hooks/use-composed-ref"; import { useActive } from "../../hooks/use-active"; import { useMotionTokens } from "../../hooks/use-motion-tokens"; import { useReducedMotionSafe } from "../../hooks/use-reduced-motion-safe"; import { cn } from "../../lib/utils"; import styles from "./spinner.module.css"; export interface SpinnerClassNames { /** Classes for the root part; no override by default. */ root?: string; /** Classes for the svg part; no override by default. */ svg?: string; /** Classes for the track part; no override by default. */ track?: string; /** Classes for the arc part; no override by default. */ arc?: string; /** Classes for the mark part; no override by default. */ mark?: string; } export interface SpinnerProps { /** `success` draws a check out of the ring, `error` a cross; both stop spinning. */ state?: "loading" | "success" | "error"; /** Control size within the supported size steps. Defaults to "md". */ size?: "sm" | "md" | "lg"; /** Accessible name while loading. */ label?: string; /** ms to wait before it shows: work that ends sooner never flashes a spinner (about 300 is a good start). Default 0. */ delay?: number; /** Classes on the documented visual root; no override by default. */ className?: string; /** Receives the documented root element; no ref by default. */ ref?: Ref; /** Inline styles on the documented visual root; no inline overrides by default. */ style?: CSSProperties; /** Classes for the named visual parts; no part overrides by default. */ classNames?: SpinnerClassNames; } /** Icon box from the foundation icon steps (§14.2): sm 14, md 16, lg 20. */ const PX = { sm: "var(--pui-icon-sm)", md: "var(--pui-icon-md)", lg: "var(--pui-icon-lg)" } as const; /** * A ring that spins while work runs and closes into a drawn check (or cross) when it ends — the result is a shape as * well as a colour. With reduced motion the loading ring holds still. */ export function Spinner({ state = "loading", size: sizeProp, label: labelProp, delay = 0, className, classNames, style, ref, }: SpinnerProps) { const i18n = useMessages("spinner", englishMessages); const label = labelProp === undefined ? i18n("label") : labelProp; const scopeDefaults = useComponentDefaults("spinner", ["size"]); const size = sizeProp ?? scopeDefaults.size ?? "md"; const host = useRef(null); const attach = useComposedRef(host, ref); const active = useActive(host); const tokens = useMotionTokens(host); const managedReduced = useReducedMotionSafe(); const reduced = tokens.reduced || managedReduced; const box = PX[size]; const done = state !== "loading"; const tone = state === "success" ? "text-green" : state === "error" ? "text-red" : "text-ink-2"; return ( 0 && state === "loading" ? "" : undefined} role={done ? "img" : "status"} aria-label={state === "success" ? i18n("done") : state === "error" ? i18n("error") : label} className={cn(styles.root, "relative inline-grid shrink-0 place-items-center", tone, classNames?.root, className)} style={{ width: box, height: box, "--_delay": `${delay}ms`, ...style } as CSSProperties} > ); } export default Spinner; 69:T6a5,"use client"; import { useContext, useEffect, useState, type RefObject } from "react"; import { ActivityContext } from "../runtime/activity"; /** * Whether an animated element should be doing work: it is (nearly) on screen and the tab is visible. Every * continuously animated component gates its loop, shader or CSS animation on this, so an effect scrolled out of view, * behind another tab, or in a collapsed panel costs nothing. One IntersectionObserver per element; no polling. */ export function useActive( ref: RefObject, { margin = "120px", key, idle = true, }: { margin?: string; /** Re-attach when this changes (an element that mounts later). */ key?: unknown; /** Pause continuous work at the host idle boundary. Finite sequences set false so they finish. */ idle?: boolean; } = {}, ) { const active = useContext(ActivityContext); const [inView, setInView] = useState(false); const [visible, setVisible] = useState( () => typeof document === "undefined" || document.visibilityState === "visible", ); useEffect(() => { const el = ref.current; if (!el || typeof IntersectionObserver === "undefined") { setInView(true); return; } const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { rootMargin: margin }); io.observe(el); return () => io.disconnect(); }, [ref, margin, key]); useEffect(() => { const on = () => setVisible(document.visibilityState === "visible"); document.addEventListener("visibilitychange", on); return () => document.removeEventListener("visibilitychange", on); }, []); return (!idle || active) && inView && visible; } 6a:Tb66,"use client"; import { useLayoutEffect, useRef, useState, type RefObject } from "react"; const same = (width: number) => width; /** * The width of an element's content box, kept current with a ResizeObserver. It is first read in a layout effect, so * a layout chosen by width (a narrow mode, a chart's scale) is right in the first frame instead of jumping a frame * later. `fallback` stands in on the server and until the element exists; `key` re-measures when the element is * replaced (one that exists only in one view). */ export function useContentWidth(ref: RefObject, fallback: number, key?: unknown): number { return useWidthAs(ref, same, fallback, key); } /** * The same width, kept as what a part needs from it (`(w) => w < 640` for a narrow mode): the part renders again only * when that changes, not at every pixel. */ export function useWidthAs( ref: RefObject, read: (width: number) => T, fallback: T, key?: unknown, ): T { const [value, setValue] = useState(fallback); const latest = useRef(read); latest.current = read; useLayoutEffect(() => { const el = ref.current; if (!el) return; // the computed width is fractional and ignores transforms, like the observer's content box const s = getComputedStyle(el); const edges = ["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"] as const; const box = parseFloat(s.width); const outer = Number.isFinite(box) ? box : el.offsetWidth; const inner = Number.isFinite(box) && s.boxSizing !== "border-box" ? 0 : edges.reduce((w, k) => w + parseFloat(s[k]), 0); setValue(latest.current(outer - inner)); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([e]) => setValue(latest.current(e.contentRect.width))); ro.observe(el); return () => ro.disconnect(); }, [ref, key]); return value; } /** * The height of an element's content box, kept current like `useContentWidth`: for parts that lay out at whatever * height their parent gives them (a chart, a map or a book that fills its panel). Read in a layout effect, so the first * frame is right; with `enabled` false nothing is measured and the fallback stands. */ export function useContentHeight( ref: RefObject, fallback: number, key?: unknown, enabled = true, ): number { const [value, setValue] = useState(fallback); useLayoutEffect(() => { const el = ref.current; if (!enabled || !el) return; const s = getComputedStyle(el); setValue(el.clientHeight - (parseFloat(s.paddingTop) || 0) - (parseFloat(s.paddingBottom) || 0)); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([e]) => setValue(e.contentRect.height)); ro.observe(el); return () => ro.disconnect(); }, [ref, key, enabled]); return enabled ? value : fallback; } 6b:T4cd,"use client"; import { useCallback, useRef, useState } from "react"; /** * One value in both forms (rules/CONVENTIONS.md): the prop while it is passed, otherwise the element's own copy that * starts at `initial` (a value, or a function that makes it once). The setter takes a value or an updater; an updater * reads the latest value even twice in one event, and every change reaches `onChange`, controlled or not. * `Next` is what a change can carry when it is narrower than the state: a range that starts empty (null) but is only * ever changed to a range. */ export function useControllable( value: T | undefined, initial: T | (() => T), onChange?: (next: Next) => void, ) { const [own, setOwn] = useState(initial); const current = value !== undefined ? value : own; const latest = useRef(current); latest.current = current; const set = useCallback( (next: Next | ((was: T) => Next)) => { const resolved = typeof next === "function" ? (next as (was: T) => Next)(latest.current) : next; latest.current = resolved; if (value === undefined) setOwn(resolved); onChange?.(resolved); }, [value, onChange], ); return [current, set] as const; } 6c:T2933,"use client"; import { useLayoutEffect, useRef, type RefObject } from "react"; import { useMotionTokens } from "./use-motion-tokens"; import { cssEase } from "../lib/motion-tokens"; type Seen = { el: HTMLElement; x: number; y: number; w: number; h: number }; /** * Items of a collection keep their path (the morph grammar's "changes keep their size and their path"): mark each item * with `data-flip=""` inside `container`. After a change, an item that is new grows in, items that moved * slide from where they were, and an item that left fades out as a ghost where it stood (a still copy, inert and * hidden from assistive tech, removed when it has faded). The data and focus change at once; only the picture * settles. Nothing runs at rest; reduced motion places at once. Positions are kept in the container's own content * (relative to it, plus its scroll) and read at rest, so neither a scroll of the page, nor a scroll of the container * itself, nor an item still settling reads as movement. * * `resize`: an item whose box changed size also scales from its old box (for marks without text, a bar or a segment, so a * new value glides on transforms instead of laying out every frame). `origin(key)`: an element a new item grows out of * (a ribbon's segment becoming a column, a shared chip dividing into pieces); with `originFirst` it applies on the * container's first render too, so a panel that opens unfolds its items from what was already on screen. `inner`: items * inside another item that lies outside the container (a merge's rows inside a card that moves itself) are this * container's own; nesting is judged inside the container only. */ export function useFlip( container: RefObject | (() => HTMLElement | null), { ghost = true, enter = true, resize = false, origin, originFirst = false, inner = false, }: { ghost?: boolean; enter?: boolean; resize?: boolean; origin?: (key: string) => Element | null | undefined; originFirst?: boolean; inner?: boolean; } = {}, ) { const get = typeof container === "function" ? container : () => container.current; // timing read at the container itself, found when the commit has attached it (a function container has no ref of its // own; without a host the timing stayed unresolved where no UIRoot is around, then rendered again to say so) const host = typeof container === "function" ? { get current() { return container(); }, } : container; const motion = useMotionTokens(host); const last = useRef | null>(null); const lastWidth = useRef(0); const flying = useRef(new Set()); // where every item stands, in the container's own content (relative to it, plus its scroll): a list scrolled since the // last render has moved nothing (a row that slid back by the scroll would leave the finger that is tapping it). The // items' own grow-ins and slides still in flight are lifted while they are read, so each box is where the layout puts // it: a render mid-flight (a live price ticking while a new row grows in) is not a move. const read = (root: HTMLElement) => { const lifted = [...flying.current].map((a) => a.effect as KeyframeEffect).map((e) => [e, e.target] as const); for (const [effect] of lifted) effect.target = null; const box = root.getBoundingClientRect(); const now = new Map(); for (const el of root.querySelectorAll("[data-flip]")) { // only the outermost items move (with `inner`, outermost inside this container) const outer = el.parentElement?.closest("[data-flip]"); if (outer && (!inner || (outer !== root && root.contains(outer)))) continue; const r = el.getBoundingClientRect(); now.set(el.dataset.flip!, { el, x: r.left - box.left + root.scrollLeft, y: r.top - box.top + root.scrollTop, w: r.width, h: r.height, }); } for (const [effect, target] of lifted) effect.target = target; return { box, now }; }; // a container that changes size at rest, with no render (fonts arriving, a scrollbar appearing, a window resized), has // its places read again then: else the first change after it would take the new width for a reflow and move nothing const watched = useRef<{ el: HTMLElement; observer: ResizeObserver } | null>(null); useLayoutEffect(() => () => watched.current?.observer.disconnect(), []); // every render on purpose: a collection changes through its parent's state, not through anything we can depend on useLayoutEffect(() => { const root = get(); // a container that is gone (a panel folded) starts over when it comes back: its items are new, not moved if (!root) { last.current = null; return; } if (watched.current?.el !== root && typeof ResizeObserver !== "undefined") { watched.current?.observer.disconnect(); const observer = new ResizeObserver(() => { if (flying.current.size || !last.current || !root.isConnected) return; const seen = read(root); last.current = seen.now; lastWidth.current = seen.box.width; }); observer.observe(root); watched.current = { el: root, observer }; } const { box, now } = read(root); // a container that changed width since the last render reflowed its items by itself (a panel resized, a room // step crossed): that is placement, not a change a person made, so this render records the new places and moves // nothing (a reflow places, only a choice travels) const reflowed = Math.abs(box.width - lastWidth.current) > 0.5; lastWidth.current = box.width; const before = reflowed ? null : last.current; last.current = now; const ms = motion.duration.standard * 1000; // the first render moves nothing, except items that grow out of an origin already on screen if ((!before && !(origin && originFirst)) || motion.reduced || ms < 2) return; const easing = cssEase(motion.ease.standard, "ease-out"); // an item in flight says so (`data-flip-flight`: "far" when it crosses more than its own size, a slide between groups or // a share growing out of another item; "near" for a neighbour's step), so a part can lift what travels over other // text onto a surface of its own instead of drawing words over words const fly = (el: HTMLElement, keyframes: Keyframe[], far = false) => { const flight = el.animate(keyframes, { duration: ms, easing }); flying.current.add(flight); if (far || el.dataset.flipFlight !== "far") el.dataset.flipFlight = far ? "far" : "near"; const land = () => { flying.current.delete(flight); if (![...flying.current].some((a) => (a.effect as KeyframeEffect | null)?.target === el)) delete el.dataset.flipFlight; }; flight.finished.then(land, land); }; const boxOf = (key: string) => { const from = origin?.(key); if (!from || !from.isConnected) return null; const r = from.getBoundingClientRect(); return { x: r.left - box.left + root.scrollLeft, y: r.top - box.top + root.scrollTop, w: r.width, h: r.height }; }; // from a box to where the item stands: translate and scale about the top-left corner const morph = (was: { x: number; y: number; w: number; h: number }, at: Seen): Keyframe[] => [ { transformOrigin: "0 0", transform: `translate(${was.x - at.x}px, ${was.y - at.y}px) scale(${was.w / Math.max(at.w, 0.5)}, ${was.h / Math.max(at.h, 0.5)})`, }, { transformOrigin: "0 0", transform: "none" }, ]; for (const [key, at] of now) { const was = before?.get(key); if (!was) { const from = boxOf(key); if (from) fly(at.el, morph(from, at), true); else if (enter && before) fly(at.el, [ { opacity: 0, transform: "scale(0.86)" }, { opacity: 1, transform: "none" }, ]); continue; } const dx = was.x - at.x, dy = was.y - at.y; const resized = resize && (Math.abs(was.w - at.w) > 0.5 || Math.abs(was.h - at.h) > 0.5); const far = Math.abs(dx) > at.w * 0.5 || Math.abs(dy) > at.h * 1.5; if (resized) fly(at.el, morph(was, at), far); else if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) fly(at.el, [{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], far); } if (!ghost || !before) return; for (const [key, was] of before) { if (now.has(key) || was.el.isConnected) continue; const copy = was.el.cloneNode(true) as HTMLElement; copy.removeAttribute("data-flip"); // the ghost is a picture of the item, not the item: nothing that finds parts by slot or id may find it for (const n of [copy, ...copy.querySelectorAll("[id], [data-slot]")]) { n.removeAttribute("id"); n.removeAttribute("data-slot"); } copy.setAttribute("data-ghost", ""); copy.setAttribute("aria-hidden", "true"); copy.inert = true; if (getComputedStyle(root).position === "static") root.style.position = "relative"; Object.assign(copy.style, { position: "absolute", left: `${was.x}px`, top: `${was.y}px`, width: `${was.w}px`, height: `${was.h}px`, margin: "0", pointerEvents: "none", }); root.appendChild(copy); // the ghost is gone by the time a neighbour slides into its place, so their texts never mix. The clock runs // straight and an even curve shapes only the fade: the front-loaded standard curve on the whole timeline passed // 0.45 inside the first frame, so what left read as a pop instead of a fade const fade = copy.animate( [ { opacity: 1, transform: "none", easing: cssEase(motion.ease.default, "ease-in-out") }, { opacity: 0, transform: "scale(0.9)", offset: 0.6 }, { opacity: 0, transform: "scale(0.86)" }, ], { duration: motion.duration.standard * 1000, easing: "linear", }, ); const drop = () => copy.remove(); fade.finished.then(drop, drop); // and by the clock as well: a fade that never reports its end (the page hidden, an animation cancelled from // outside) must not leave a copy behind for a person or a test to find setTimeout(drop, motion.duration.standard * 1000 + 250); } }); } 6d:T443,"use client"; import { useSyncExternalStore } from "react"; // one MediaQueryList per query: React reads the snapshot on every render, and a part that renders thirty times a // second (a playing audio player's clock) would otherwise ask the browser for a new list each time const lists = new Map(); const list = (query: string) => { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return undefined; let m = lists.get(query); if (!m) lists.set(query, (m = window.matchMedia(query))); return m; }; /** True while the media query matches; false on the server and in the first client render of SSR output. */ export function useMediaQuery(query: string): boolean { return useSyncExternalStore( (notify) => { const m = list(query); m?.addEventListener("change", notify); return () => m?.removeEventListener("change", notify); }, () => list(query)?.matches ?? false, () => false, ); } /** Phone-width layouts: below 768px. */ export const usePhone = () => useMediaQuery("(max-width: 767px)"); 6e:T114e,"use client"; import { useMemo, type RefObject } from "react"; import { useAppearanceRoot } from "../runtime/appearance"; import { useResolvedAppearance } from "./use-resolved-appearance"; import { motionAt, motionEase, motionTokens, type MotionTokens } from "../lib/motion-tokens"; import { semanticMotion } from "../lib/motion-source"; const durationToken = (name: string) => name === "exit" ? "motion-out" : name === "in" || name === "out" ? `motion-${name}` : `duration-${name}`; const easeToken = (name: string) => `ease-${name === "inOut" ? "in-out" : name}`; const REQUEST = { times: [ ...Object.keys(semanticMotion.duration).map(durationToken), ...Object.keys(semanticMotion.spring).map((name) => `spring-${name}`), ...Object.keys(semanticMotion.stagger).map((name) => `stagger-${name}`), "fade-in", "fade-out", ], easings: [...Object.keys(semanticMotion.ease).map(easeToken), "ease-spring", "ease-spring-bounce", "ease-overshoot"], numbers: ["motion-scale", "motion-look", "press-scale"], // timing only: the host's own type would make every control resolve differently from the page around it typography: false, }; /** * Resolve each timing at the actual host; omitted host uses the nearest managed root. The first/server snapshot is * the pure foundation default. Local CSS values, scope changes, font readiness, OS preference and explicit refresh * update the same consumer; no document-wide first-root fallback or persistent global listener. */ export function useMotionTokens(hostRef?: RefObject): MotionTokens & { ready: boolean; /** Reduced or none: movement, springs and staggers are instant. */ reduced: boolean; mode: "full" | "reduced" | "none"; /** Opacity-only arrival and departure (seconds): kept under reduced, instant under none (APPEARANCE A06). */ fade: { in: number; out: number }; } { const root = useAppearanceRoot(); const scopeRef = useMemo(() => ({ current: root }), [root]); const resolved = useResolvedAppearance(hostRef ?? scopeRef, REQUEST); return useMemo(() => { if (!resolved.ready) return { ...motionTokens, ready: false, reduced: false, mode: "full" as const, fade: { in: motionTokens.duration.in, out: motionTokens.duration.out }, }; const reduced = resolved.reducedMotion; const speed = (resolved.numbers["motion-scale"] ?? 1) * (resolved.numbers["motion-look"] ?? 1); const fade = resolved.motionMode === "none" ? { in: 0.001, out: 0.001 } : { in: resolved.times["fade-in"] ?? semanticMotion.duration.in * speed, out: resolved.times["fade-out"] ?? semanticMotion.duration.out * speed, }; const factor = reduced ? 0.001 / semanticMotion.duration.standard : speed; const base = motionAt(factor); const duration = Object.fromEntries( Object.entries(base.duration).map(([name, fallback]) => [ name, reduced ? 0.001 : (resolved.times[durationToken(name)] ?? fallback), ]), ) as MotionTokens["duration"]; const stagger = Object.fromEntries( Object.entries(base.stagger).map(([name, fallback]) => [ name, reduced ? 0 : (resolved.times[`stagger-${name}`] ?? fallback), ]), ) as MotionTokens["stagger"]; const ease = Object.fromEntries( Object.entries(base.ease).map(([name, fallback]) => [ name, motionEase(resolved.easings[easeToken(name)], fallback), ]), ) as MotionTokens["ease"]; const spring = { ...base.spring }; for (const name of Object.keys(semanticMotion.spring) as (keyof typeof semanticMotion.spring)[]) spring[name] = { ...base.spring[name], visualDuration: reduced ? 0.001 : (resolved.times[`spring-${name}`] ?? base.spring[name].visualDuration), bounce: reduced ? 0 : base.spring[name].bounce, }; return { ...base, ready: true, reduced, mode: resolved.motionMode, fade, duration, stagger, ease, spring, pressScale: resolved.numbers["press-scale"] ?? base.pressScale, css: { spring: resolved.easings["ease-spring"] ?? base.css.spring, springBounce: resolved.easings["ease-spring-bounce"] ?? base.css.springBounce, overshoot: resolved.easings["ease-overshoot"] ?? base.css.overshoot, }, }; }, [resolved]); } 6f:T6f0,import { useContext, useLayoutEffect, useMemo, useState, useSyncExternalStore } from "react"; import { ActivityContext } from "../runtime/activity"; /* * The time, read only in the browser. A component that reads the clock while it renders breaks server rendering: * Next.js refuses to prerender a page that does ("encountered the unstable value `new Date()` in a Client Component", * create-next-app's default since 16), and any server's time differs from the browser's at hydration. These hooks give * null on the server and while hydrating, and the real value in the browser before the first paint. */ const still = () => () => {}; const startOfToday = () => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); }; const onServer = () => null; /** Today at 00:00 local time; null on the server and while hydrating. */ export function useToday(): Date | null { const day = useSyncExternalStore(still, startOfToday, onServer); return useMemo(() => (day === null ? null : new Date(day)), [day]); } /** The time in ms, read before the first paint and again every `every` ms while `ticking`; null on the server. */ export function useNow(ticking = false, every = 1000, until?: number): number | null { const active = useContext(ActivityContext); const [now, setNow] = useState(null); // A finite deadline must reach its completion callback even when the host is idle, then stop ticking. const running = ticking && (until === undefined ? active : now === null || now < until); useLayoutEffect(() => { setNow(Date.now()); if (!running) return; const id = setInterval(() => setNow(Date.now()), every); return () => clearInterval(id); }, [running, every, until]); return now; } 70:T63d,import { clsx, type ClassValue } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; /* The type roles (utilities.css) and the 2xs step are sizes, not text colours: without this, tailwind-merge reads `text-overline` as a colour and drops it next to `text-ink-3`. A role and a size step still replace each other. Likewise `font-title` is the look's title weight, not a family: read as a family it dropped `font-display` beside it, and every merged page title lost the look's display face. */ const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-weight": [{ font: ["title"] }], "font-family": [{ font: ["display", "numeric", "figure"] }], "font-size": [ { text: [ "2xs", "display", "title", "heading", "subheading", "body", "body-sm", "reading", "label", "caption", "overline", "numeric", "code", ], }, ], }, }, }); /** Merge class names, letting later Tailwind utilities win over earlier ones. */ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } /** A small seeded random generator (LCG): the same seed gives the same sequence, for stable sample data and jitter. */ export function rng(seed = 1) { let s = seed >>> 0 || 1; return () => (s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32; } export const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); 61:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-direction@1.1.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-direction","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-direction@1.1.4"}]]}]}],["$","li","clsx@^2.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx@^2.1.1"}]]}]}],["$","li","lucide-react@^1.48.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.48.0"}]]}]}],["$","li","tailwind-merge@^3.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge@^3.7.0"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://beamline.io/registry/look-prism.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"beamline/components/run-trace/messages.ts","content":"$64","type":"registry:file","target":"src/ui/beamline/components/run-trace/messages.ts"},{"path":"beamline/components/run-trace/run-trace.module.css","content":"$65","type":"registry:file","target":"src/ui/beamline/components/run-trace/run-trace.module.css"},{"path":"beamline/components/run-trace/run-trace.tsx","content":"$66","type":"registry:file","target":"src/ui/beamline/components/run-trace/run-trace.tsx"},{"path":"beamline/components/spinner/defaults.ts","content":"/** Pure allowed presentation defaults for Spinner; no component or runtime imports. */\nexport interface SpinnerDefaults {\n /** Shared size setting; omit to inherit the surrounding scope or the component default. */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n","type":"registry:file","target":"src/ui/beamline/components/spinner/defaults.ts"},{"path":"beamline/components/spinner/messages.ts","content":"import type { MessageDefinitions } from \"../../runtime/messages\";\n/** Built-in English copy; stable keys are the public translation API. */\nexport const english = {\n label: \"Loading\",\n done: \"Done\",\n error: \"Failed\",\n} satisfies MessageDefinitions;\n","type":"registry:file","target":"src/ui/beamline/components/spinner/messages.ts"},{"path":"beamline/components/spinner/spinner.module.css","content":"$67","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.module.css"},{"path":"beamline/components/spinner/spinner.tsx","content":"$68","type":"registry:file","target":"src/ui/beamline/components/spinner/spinner.tsx"},{"path":"beamline/hooks/use-active.ts","content":"$69","type":"registry:file","target":"src/ui/beamline/hooks/use-active.ts"},{"path":"beamline/hooks/use-composed-ref.ts","content":"\"use client\";\n\nimport { useCallback, type Ref, type RefObject } from \"react\";\n\n/** Keep a control's measurement/focus ref and the caller's ref, including React 19 callback cleanup. */\nexport function useComposedRef(internal: RefObject, external?: Ref) {\n return useCallback(\n (node: T | null) => {\n internal.current = node;\n if (typeof external === \"function\") {\n const cleanup = external(node);\n if (typeof cleanup === \"function\")\n return () => {\n internal.current = null;\n cleanup();\n };\n } else if (external) external.current = node;\n },\n [internal, external],\n );\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-composed-ref.ts"},{"path":"beamline/hooks/use-content-width.ts","content":"$6a","type":"registry:file","target":"src/ui/beamline/hooks/use-content-width.ts"},{"path":"beamline/hooks/use-controllable.ts","content":"$6b","type":"registry:file","target":"src/ui/beamline/hooks/use-controllable.ts"},{"path":"beamline/hooks/use-flip.ts","content":"$6c","type":"registry:file","target":"src/ui/beamline/hooks/use-flip.ts"},{"path":"beamline/hooks/use-media-query.ts","content":"$6d","type":"registry:file","target":"src/ui/beamline/hooks/use-media-query.ts"},{"path":"beamline/hooks/use-motion-tokens.ts","content":"$6e","type":"registry:file","target":"src/ui/beamline/hooks/use-motion-tokens.ts"},{"path":"beamline/hooks/use-reduced-motion-safe.ts","content":"\"use client\";\n\nimport { useMediaQuery } from \"./use-media-query\";\nimport { useScopeMotion } from \"../runtime/appearance\";\n\n/** Managed motion policy plus the OS preference, with a stable server snapshot. */\nexport function useReducedMotionSafe() {\n const requested = useScopeMotion();\n const os = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n return requested !== \"auto\" || os;\n}\n","type":"registry:file","target":"src/ui/beamline/hooks/use-reduced-motion-safe.ts"},{"path":"beamline/lib/now.ts","content":"$6f","type":"registry:file","target":"src/ui/beamline/lib/now.ts"},{"path":"beamline/lib/utils.ts","content":"$70","type":"registry:file","target":"src/ui/beamline/lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]