Terminal

1"use client";
2 
3import { useState, useCallback } from "react";
4import Ansi from "ansi-to-react";
5import {
6  Copy,
7  Check,
8  ChevronDown,
9  ChevronUp,
10  Terminal as TerminalIcon,
11} from "lucide-react";
12import type { TerminalProps } from "./schema";
13import { useCopyToClipboard } from "../shared/use-copy-to-clipboard";
14 
15import { Button, Collapsible, CollapsibleTrigger } from "./_adapter";
16import { cn } from "./_adapter";
17 
18const COPY_ID = "terminal-output";
19 
20type TerminalControlledProps = {
21  expanded?: boolean;
22  defaultExpanded?: boolean;
23  onExpandedChange?: (expanded: boolean) => void;
24};
25 
26type TerminalRootProps = TerminalProps & TerminalControlledProps;
27 
28type TerminalHeaderProps = Pick<
29  TerminalProps,
30  "command" | "cwd" | "exitCode"
31> & {
32  formattedDuration: string | null;
33  hasOutput: boolean;
34  copiedId: string | null;
35  onCopy: () => void;
36};
37 
38type TerminalOutputProps = Pick<
39  TerminalProps,
40  "stdout" | "stderr" | "truncated"
41> & {
42  isCollapsed: boolean;
43  shouldCollapse: boolean;
44  lineCount: number;
45  onToggleCollapse: () => void;
46};
47 
48function formatDuration(durationMs?: number): string | null {
49  if (durationMs == null) return null;
50  if (durationMs < 1000) return `${Math.round(durationMs)}ms`;
51  return `${(durationMs / 1000).toFixed(1)}s`;
52}
53 
54function countOutputLines(output: string): number {
55  const trimmedTrailingNewlines = output.replace(/\n+$/, "");
56  if (!trimmedTrailingNewlines) return 0;
57  return trimmedTrailingNewlines.split("\n").length;
58}
59 
60function TerminalHeader({
61  command,
62  cwd,
63  exitCode,
64  formattedDuration,
65  hasOutput,
66  copiedId,
67  onCopy,
68}: TerminalHeaderProps) {
69  return (
70    <div className="bg-card flex items-center justify-between border-b px-4 py-2">
71      <div className="flex items-center gap-2 overflow-hidden">
72        <TerminalIcon className="text-muted-foreground h-4 w-4 shrink-0" />
73        <code className="text-foreground truncate font-mono text-xs">
74          {cwd && <span className="text-muted-foreground">{cwd}$ </span>}
75          {command}
76        </code>
77      </div>
78      <div className="flex items-center gap-3">
79        {formattedDuration && (
80          <span className="text-muted-foreground font-mono text-sm tabular-nums">
81            {formattedDuration}
82          </span>
83        )}
84        <span
85          className={cn(
86            "font-mono text-sm tabular-nums",
87            exitCode === 0
88              ? "text-muted-foreground"
89              : "text-red-600 dark:text-red-400",
90          )}
91// … truncated