51: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"] 52: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"] 53:T3558,"use client"; import { useId, useState, type ComponentProps } from "react"; import { CheckIcon, CopyIcon, Loader2Icon, XIcon } from "lucide-react"; import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; import { cn } from "@/lib/utils"; import { ghostButton, mono, paper } from "./surfaces"; import { clamp, take } from "../utils/range"; export type AnsiColor = | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97; export type AnsiSegment = { text: string; color?: AnsiColor | undefined; bold: boolean; dim: boolean; }; const ANSI_COLORS = new Set([ 30, 31, 32, 33, 34, 35, 36, 37, 90, 91, 92, 93, 94, 95, 96, 97, ]); const findCsiEnd = (line: string, start: number) => { for (let index = start; index < line.length; index += 1) { const code = line.charCodeAt(index); if (code >= 0x40 && code <= 0x7e) return index; } return line.length; }; const findStringEnd = (line: string, start: number, bell: boolean) => { for (let index = start; index < line.length; index += 1) { if (bell && line[index] === "\u0007") return index + 1; if (line[index] === "\u001b" && line[index + 1] === "\\") { return index + 2; } } return line.length; }; const applySgr = (value: string, state: Omit) => { const parts = value.split(";"); for (let index = 0; index < parts.length; index += 1) { const part = parts[index]; const code = part === "" ? 0 : Number(part); if (code === 38 || code === 48) { index += parts[index + 1] === "2" ? 4 : parts[index + 1] === "5" ? 2 : 1; } else if (code === 0) { state.color = undefined; state.bold = false; state.dim = false; } else if (code === 1) { state.bold = true; } else if (code === 2) { state.dim = true; } else if (code === 22) { state.bold = false; state.dim = false; } else if (code === 39) { state.color = undefined; } else if (ANSI_COLORS.has(code as AnsiColor)) { state.color = code as AnsiColor; } } }; export function parseAnsi(line: string): AnsiSegment[] { const state: Omit = { color: undefined, bold: false, dim: false, }; const segments: AnsiSegment[] = []; let index = 0; const append = (text: string) => { if (text === "") return; const previous = segments[segments.length - 1]; if ( previous && previous.color === state.color && previous.bold === state.bold && previous.dim === state.dim ) { previous.text += text; return; } segments.push({ text, ...state }); }; while (index < line.length) { const escape = line.indexOf("\u001b", index); const c1Offset = line.slice(index).search(/[\u009b\u009d]/); const c1 = c1Offset === -1 ? -1 : index + c1Offset; const next = escape === -1 ? c1 : c1 === -1 ? escape : Math.min(escape, c1); if (next === -1) { append(line.slice(index)); break; } append(line.slice(index, next)); const csi = line[next] === "\u009b" || line[next + 1] === "["; const osc = line[next] === "\u009d" || line[next + 1] === "]"; if (csi) { const start = next + (line[next] === "\u001b" ? 2 : 1); const end = findCsiEnd(line, start); if (end === line.length) break; if (line[end] === "m") applySgr(line.slice(start, end), state); index = end + 1; } else if (osc) { index = findStringEnd( line, next + (line[next] === "\u001b" ? 2 : 1), true, ); } else if ( line[next] === "\u001b" && ["P", "^", "_"].includes(line[next + 1] ?? "") ) { index = findStringEnd(line, next + 2, false); } else { index = line[next] === "\u001b" && ["(", ")", "*", "+", "-", ".", "/"].includes(line[next + 1] ?? "") ? next + 3 : next + 2; } } return segments; } const ansiColor = (color: AnsiColor, ink: boolean) => { const paperColors: Record = { 30: "text-foreground/70", 31: "text-red-600 dark:text-red-400", 32: "text-emerald-600 dark:text-emerald-400", 33: "text-amber-600 dark:text-amber-400", 34: "text-blue-600 dark:text-blue-400", 35: "text-fuchsia-600 dark:text-fuchsia-400", 36: "text-cyan-600 dark:text-cyan-400", 37: "text-foreground/85", 90: "text-muted-foreground", 91: "text-red-500 dark:text-red-400", 92: "text-emerald-500 dark:text-emerald-400", 93: "text-amber-500 dark:text-amber-400", 94: "text-blue-500 dark:text-blue-400", 95: "text-fuchsia-500 dark:text-fuchsia-400", 96: "text-cyan-500 dark:text-cyan-400", 97: "text-foreground/85", }; const inkColors: Record = { 30: "text-background/70 dark:text-foreground/70", 31: "text-red-400 dark:text-red-400", 32: "text-emerald-400 dark:text-emerald-400", 33: "text-amber-300 dark:text-amber-300", 34: "text-blue-400 dark:text-blue-400", 35: "text-fuchsia-400 dark:text-fuchsia-400", 36: "text-cyan-300 dark:text-cyan-300", 37: "text-background/90 dark:text-foreground/90", 90: "text-background/50 dark:text-muted-foreground", 91: "text-red-400 dark:text-red-400", 92: "text-emerald-400 dark:text-emerald-400", 93: "text-amber-300 dark:text-amber-300", 94: "text-blue-400 dark:text-blue-400", 95: "text-fuchsia-400 dark:text-fuchsia-400", 96: "text-cyan-300 dark:text-cyan-300", 97: "text-background/90 dark:text-foreground/90", }; return (ink ? inkColors : paperColors)[color]; }; const formatDuration = (durationMs: number) => { const duration = Math.floor(clamp(durationMs, 0, Number.MAX_SAFE_INTEGER)); if (duration < 1000) return `${duration}ms`; if (duration < 60_000) { const seconds = Math.round(duration / 100) / 10; return `${Number.isInteger(seconds) ? seconds : seconds.toFixed(1)}s`; } const minutes = Math.floor(duration / 60_000); const seconds = Math.floor((duration % 60_000) / 1000); return `${minutes}m ${String(seconds).padStart(2, "0")}s`; }; const plainText = (line: string) => parseAnsi(line) .map((segment) => segment.text) .join(""); export function TerminalBlock({ command, lines, visibleCount, done, variant = "paper", exitCode: exitCodeProp, stderr, cwd, durationMs, truncated, maxCollapsedLines, className, ...props }: Omit< ComponentProps<"div">, | "children" | "command" | "lines" | "visibleCount" | "done" | "variant" | "exitCode" | "stderr" | "cwd" | "durationMs" | "truncated" | "maxCollapsedLines" > & { command: string; lines: readonly string[]; visibleCount: number; done: boolean; variant?: "paper" | "ink" | undefined; exitCode?: number | undefined; stderr?: readonly string[] | undefined; cwd?: string | undefined; durationMs?: number | undefined; truncated?: boolean | undefined; maxCollapsedLines?: number | undefined; }) { const ink = variant === "ink"; const exitCode = exitCodeProp ?? 0; const failed = done && exitCode !== 0; const state = !done ? "running" : failed ? "failed" : "done"; const output = [ ...lines.map((line) => ({ line, stderr: false })), ...(stderr ?? []).map((line) => ({ line, stderr: true })), ]; const revealedLines = take(output, visibleCount); const collapsedLines = Math.floor( clamp(maxCollapsedLines ?? revealedLines.length, 0, revealedLines.length), ); const canCollapse = done && maxCollapsedLines !== undefined && revealedLines.length > collapsedLines; const [expanded, setExpanded] = useState(false); const displayedLines = canCollapse && !expanded ? take(revealedLines, collapsedLines) : revealedLines; const outputId = useId(); const { isCopied, copyToClipboard } = useCopyToClipboard(); return (

{cwd ? ( {cwd} ${" "} ) : null} {command} {done ? (

{failed ? ( ) : ( )} exit {exitCode} {durationMs !== undefined ? ( {formatDuration(durationMs)} ) : null} {output.length > 0 ? ( ) : null}

) : ( )}

{displayedLines.map(({ line, stderr: isStderr }, index) => { const isLast = index === revealedLines.length - 1; return (

{parseAnsi(line).map((segment, segmentIndex) => ( {segment.text} ))}

); })}

{canCollapse ? ( ) : null} {truncated ? ( output truncated ) : null} {!done && ( )}

); } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-surfaces.json","https://r.assistant-ui.com/elements-range.json","https://r.assistant-ui.com/use-copy-to-clipboard.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/assistant-ui/elements/terminal-block.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]