50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:I[34002,["/_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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"],"CodeEditor"] 53: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 54:T3a58,// Hairline UI · command-output · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { ChevronRight, Square, X } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * COMMAND OUTPUT: a command the agent runs, and its log * * running $ pnpm test, "running" with seconds that roll, and * Stop; the log streams in and follows the newest line * success the spinner blurs into a check that draws itself, * "running" morphs to "done" and the time gains its * tenths; Stop folds away as the chevron opens in, and * the log folds away a beat later (open it any time) * error "exit 1" in red, the code rolling in; the log stays * open with the failing lines marked and in view * cancelled stopped by you * * Pass the lines as they arrive; plain strings work, ANSI * colour codes are stripped, and lines that look like errors * are marked (or set level yourself). * ───────────────────────────────────────────────────────── */ export type CommandStatus = "running" | "success" | "error" | "cancelled"; export interface CommandLine { text: string; level?: "info" | "error" | "warn" | "success"; } export interface CommandOutputProps extends React.HTMLAttributes { command: string; status: CommandStatus; lines: (string | CommandLine)[]; exitCode?: number; /** When it started (ms); shows a live timer, then the duration. */ startedAt?: number; endedAt?: number; onStop?: () => void; open?: boolean; onOpenChange?: (open: boolean) => void; } const EASE = "cubic-bezier(0.23,1,0.32,1)"; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const TENTHS = { minimumFractionDigits: 1, maximumFractionDigits: 1 }; const TWO_DIGITS = { minimumIntegerDigits: 2, maximumFractionDigits: 0 }; const WHOLE = { maximumFractionDigits: 0 }; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const ANSI = /\u001b\[[0-9;]*[A-Za-z]/g; const LOOKS_LIKE_ERROR = /(^|\s)(error|err!|failed|fail|fatal|exception|✗|✕|×)(\s|:|$)/i; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); /** A piece of a line that opens out of nothing and folds back into it. */ function Reveal({ show, reduced, className = "", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) { return ( {children} ); } /** Seconds that roll up as they pass and minutes that slide open; a short finished run gains its tenths ("1.8s"). */ function Elapsed({ ms, settled, reduced }: { ms: number; settled: boolean; reduced: boolean }) { const total = Math.max(0, ms) / 1000; const minutes = Math.floor(total / 60); const tenths = settled && total < 10; const seconds = minutes ? Math.floor(total % 60) : tenths ? Math.floor(total * 10) / 10 : Math.floor(total); return ( 0} reduced={reduced}> ); } function DrawnCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) { return ( ); } export function CommandOutput({ command, status, lines, exitCode, startedAt, endedAt, onStop, open: openProp, onOpenChange, className = "", ...props }: CommandOutputProps) { const reduced = useReducedMotion(); const running = status === "running"; const [now, setNow] = React.useState(startedAt ?? 0); const [userOpen, setUserOpen] = React.useState(null); const [settled, setSettled] = React.useState(status === "success"); const logRef = React.useRef(null); const firstError = React.useRef(null); const follow = React.useRef(true); const stopRef = React.useRef(null); const toggleRef = React.useRef(null); const id = React.useId(); // Stop folds away when the run ends; if it had focus, hand it to the chevron that takes its place. React.useLayoutEffect(() => { if (!running && document.activeElement === stopRef.current) toggleRef.current?.focus({ preventScroll: true }); }, [running]); const rows = React.useMemo( () => lines.map((line) => { const l = typeof line === "string" ? { text: line } : line; const text = l.text.replace(ANSI, ""); return { text, level: l.level ?? (LOOKS_LIKE_ERROR.test(text) ? "error" : "info") }; }), [lines] ); // Success folds the log a beat after the last line, so the end is seen before it goes. React.useEffect(() => { if (status !== "success") { setSettled(false); return; } const timer = window.setTimeout(() => setSettled(true), reduced ? 0 : 900); return () => window.clearTimeout(timer); }, [status, reduced]); const open = openProp ?? userOpen ?? !(status === "success" ? settled : status === "cancelled"); const toggle = () => { setUserOpen(!open); onOpenChange?.(!open); }; React.useEffect(() => { if (!running || startedAt === undefined) return; setNow(Date.now()); const timer = window.setInterval(() => setNow(Date.now()), 1000); return () => window.clearInterval(timer); }, [running, startedAt]); // Follow the newest line while running, unless the reader scrolled up. React.useLayoutEffect(() => { const log = logRef.current; if (log && follow.current) log.scrollTop = log.scrollHeight; }, [rows.length]); // On failure, bring the first failing line into view. React.useEffect(() => { if (status !== "error") return; const log = logRef.current; const line = firstError.current; if (log && line) log.scrollTo({ top: Math.max(0, line.offsetTop - 16), behavior: reduced ? "auto" : "smooth" }); }, [status, reduced]); const elapsedMs = startedAt === undefined ? null : running ? now - startedAt : endedAt !== undefined ? endedAt - startedAt : null; const word = { running: "running", success: "done", error: "exit", cancelled: "stopped" }[status]; const showCode = status === "error" && exitCode !== undefined; const canToggle = !running && rows.length > 0; let errorSeen = false; return (

{/* Spins only while it's showing. */}


          $ 
          {command}

{/* One status: the word morphs, the exit code rolls in, the time rolls on and settles. */} {running ? "Running" : status === "success" ? "Finished" : status === "error" ? `Failed${exitCode !== undefined ? ` with exit code ${exitCode}` : ""}` : "Stopped"} {onStop && ( )} {rows.length > 0 && ( )}

{ const el = e.currentTarget; follow.current = el.scrollHeight - el.clientHeight - el.scrollTop < 24; }} className="max-h-56 overflow-y-auto overflow-x-hidden rounded-[14px] bg-muted/70 py-2.5 font-mono text-[11.5px] leading-[1.65] outline-none [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/30" > {rows.map((row, i) => { const isError = row.level === "error"; const ref = isError && !errorSeen ? ((errorSeen = true), firstError) : undefined; return (

{row.text || " "}

); })} {running && ( )}

); } 4f:["$","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","lucide-react",{"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ui-blink {\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/command-output.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]