@spunto/design-system 0.9.0 → 0.9.2

package/src/components/terminal-panel.tsx

@@ -0,0 +1,695 @@
+"use client"
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react"
+
+import { cn } from "../utils"
+import { Spinner } from "./spinner"
+import { Terminal, type TerminalHandle, type TerminalOptions, type TerminalViewportState } from "./terminal"
+
+// Same surface as `Terminal` and `ImagePull` (#09090b), on purpose: an ImagePull
+// stacked on a TerminalPanel has to read as *one* object — that's the build view.
+// The bar is not a lighter "chrome" strip; it's the same surface, separated by a
+// single hairline, so the eye sees one panel rather than a widget with a header.
+const panelTheme = {
+  background: "#09090b",
+  border: "#27272a",
+  /** Hairline between the bar and the terminal — dimmer than the outer border. */
+  divider: "#1f1f23",
+  text: "#e4e4e7",
+  dim: "#a1a1aa",
+  faint: "#71717a",
+  // Status hues, taken from the Terminal's shared ANSI palette so a green dot up
+  // here and a green line down there are the same green.
+  live: "#4ade80",
+  pending: "#facc15",
+  error: "#f87171",
+  idle: "#52525b",
+  accent: "#ea5400",
+} as const
+
+/**
+ * Connection/lifecycle state of whatever feeds the terminal.
+ *
+ * The first four are the stream states every log panel already tracked by hand;
+ * the last three are build/job states (the worker page draws its own pulsing
+ * yellow/green/red dot for exactly this). They share one prop because they share
+ * one slot in the bar — a panel is never both connecting *and* building.
+ */
+export type TerminalPanelStatus =
+  | "idle"
+  | "connecting"
+  | "live"
+  | "closed"
+  | "error"
+  | "running"
+  | "success"
+  | "failed"
+
+export interface TerminalPanelProps {
+  /** Left of the bar. Sans-serif, the human name of what you're looking at. */
+  title?: ReactNode
+  /** Next to the title, mono and dimmed — `stdout / stderr`, a service name, a session. */
+  subtitle?: ReactNode
+  status?: TerminalPanelStatus
+  /** Overrides the default wording of `status` (which is French, like the rest of the DS). */
+  statusLabel?: string
+  /**
+   * Shows the reconnect button. This is the one action the DS knows about,
+   * because every panel already had its own copy of it.
+   */
+  onReconnect?: () => void
+  /** Free slot at the right of the bar — fullscreen, details, whatever the page owns. */
+  actions?: ReactNode
+  /**
+   * Replaces the terminal surface entirely: "aucun conteneur", "Pulling image…".
+   * The terminal is *unmounted* while it shows, so anything written meanwhile is
+   * dropped — which is the point: there is nothing to write to yet.
+   */
+  placeholder?: ReactNode
+  /** Puts a spinner above `placeholder` — the "…en cours" flavour of empty. */
+  loading?: boolean
+  /** Red band under the bar. Unlike `placeholder`, it keeps the log visible underneath. */
+  error?: string
+
+  // ── Bar options. All off by default: the bar starts sober, each page opts in. ──
+  /** Ctrl/⌘+F search bar over the scrollback (`@xterm/addon-search`). */
+  search?: boolean
+  /** Sticks to the tail and surfaces a "N nouvelles lignes ↓" pill once the user scrolls up. */
+  followTail?: boolean
+  /** Copies the whole buffer to the clipboard. */
+  copy?: boolean
+  /** Downloads the whole buffer as a `.log` file. */
+  download?: boolean
+  /** File name used by `download`. Defaults to the title/subtitle, else `terminal.log`. */
+  downloadFileName?: string
+
+  // ── Forwarded to the underlying `Terminal`. ──
+  fontSize?: number
+  scrollback?: number
+  onData?: (data: string) => void
+  onResize?: (size: { cols: number; rows: number }) => void
+  options?: TerminalOptions
+  className?: string
+}
+
+const STATUS_LABEL: Record<TerminalPanelStatus, string> = {
+  idle: "",
+  connecting: "connexion…",
+  live: "en direct",
+  closed: "déconnecté",
+  error: "erreur",
+  running: "en cours",
+  success: "terminé",
+  failed: "échec",
+}
+
+const STATUS_COLOR: Record<TerminalPanelStatus, string> = {
+  idle: panelTheme.idle,
+  connecting: panelTheme.pending,
+  live: panelTheme.live,
+  closed: panelTheme.idle,
+  error: panelTheme.error,
+  running: panelTheme.pending,
+  success: panelTheme.live,
+  failed: panelTheme.error,
+}
+
+/** The states where something is still happening — the dot pulses for those only. */
+const PULSING: TerminalPanelStatus[] = ["connecting", "running"]
+
+/**
+ * The frame around a `Terminal`: a bar on top, the terminal surface below, and
+ * the states (connecting, empty, loading, error) held by the component instead of
+ * re-improvised on every page.
+ *
+ * It exists because the frame *was* the duplicated part. The primitive is fine —
+ * every page kept it and rebuilt the same header around it: a title, a status
+ * dot, a reconnect button, an "aucun conteneur" placeholder, each with its own
+ * hardcoded hex and padding. Two pages, two looks, one intention.
+ *
+ * Two design decisions worth knowing before extending it:
+ *
+ *  1. **The bar is composable, not a fixed list.** Title/subtitle/status are the
+ *     sober default; everything else (search, follow, copy, download) is opt-in,
+ *     and `actions` is an open slot so a page can push its own buttons without
+ *     the DS having to know about them.
+ *  2. **Connection status is a prop, not log content.** Panels used to write
+ *     `[connection closed]` in ANSI straight into the buffer — which pollutes the
+ *     log, travels with a copy/paste, and stacks up one line per reconnect since
+ *     nothing ever erases it. `status` puts that in the bar, where it can be
+ *     *replaced* instead of appended.
+ *
+ * The ref is the `TerminalHandle` of the terminal it wraps, so migrating a panel
+ * is a one-line swap: `<Terminal ref={r} …/>` → `<TerminalPanel ref={r} …/>`.
+ */
+const TerminalPanel = forwardRef<TerminalHandle, TerminalPanelProps>(function TerminalPanel(
+  {
+    title,
+    subtitle,
+    status = "idle",
+    statusLabel,
+    onReconnect,
+    actions,
+    placeholder,
+    loading,
+    error,
+    search,
+    followTail,
+    copy,
+    download,
+    downloadFileName,
+    fontSize,
+    scrollback,
+    onData,
+    onResize,
+    options,
+    className,
+  },
+  ref
+) {
+  const termRef = useRef<TerminalHandle>(null)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  // Everything the ref exposes goes through the inner terminal — including while
+  // it's replaced by a placeholder, where the calls simply no-op.
+  useImperativeHandle(ref, () => ({
+    write: (data) => termRef.current?.write(data),
+    writeln: (data) => termRef.current?.writeln(data),
+    clear: () => termRef.current?.clear(),
+    focus: () => termRef.current?.focus(),
+    getContent: () => termRef.current?.getContent() ?? "",
+    scrollToBottom: () => termRef.current?.scrollToBottom(),
+    rowsBelow: () => termRef.current?.rowsBelow() ?? 0,
+    findNext: (query, opts) => termRef.current?.findNext(query, opts) ?? false,
+    findPrevious: (query, opts) => termRef.current?.findPrevious(query, opts) ?? false,
+    clearSearch: () => termRef.current?.clearSearch(),
+  }))
+
+  const searchUi = useSearch(termRef, !!search, rootRef)
+  const tail = useFollowTail(termRef, !!followTail)
+
+  const showPlaceholder = placeholder != null || loading
+  const hasBar = title != null || subtitle != null || status !== "idle" || !!actions || !!onReconnect || !!search || !!copy || !!download
+
+  return (
+    <div
+      ref={rootRef}
+      data-slot="terminal-panel"
+      className={cn(
+        // Square by default like `Terminal`/`ImagePull` — consumers add
+        // `rounded-*` (with the `overflow-hidden` already here) when they want it.
+        // `@container`: what has to fit is this box, not the viewport — a 380 px
+        // panel on a desktop is exactly as cramped as a phone.
+        "@container flex h-full w-full min-h-0 min-w-0 flex-col overflow-hidden border",
+        className
+      )}
+      style={{
+        backgroundColor: panelTheme.background,
+        borderColor: error ? "#7f1d1d" : panelTheme.border,
+        // Sets the default for everything inline (icons draw with currentColor) —
+        // without it they'd inherit the *page's* foreground, which is near-black
+        // in the light theme this dark panel sits in.
+        color: panelTheme.text,
+      }}
+    >
+      {hasBar && (
+        <div
+          className="flex shrink-0 items-center gap-2 border-b px-3 py-1.5 text-xs"
+          style={{ borderColor: panelTheme.divider }}
+        >
+          {status !== "idle" && <StatusChip status={status} label={statusLabel} />}
+          {title != null && (
+            <span className="min-w-0 truncate font-medium" style={{ color: panelTheme.text }}>
+              {title}
+            </span>
+          )}
+          {subtitle != null && (
+            <span className="hidden min-w-0 truncate font-mono @sm:inline" style={{ color: panelTheme.faint }}>
+              {subtitle}
+            </span>
+          )}
+
+          <div className="ml-auto flex shrink-0 items-center gap-0.5">
+            {actions}
+            {search && (
+              <BarButton label="Rechercher (Ctrl+F)" active={searchUi.open} onClick={searchUi.toggle}>
+                <SearchIcon />
+              </BarButton>
+            )}
+            {copy && <CopyButton getContent={() => termRef.current?.getContent() ?? ""} />}
+            {download && (
+              <BarButton
+                label="Télécharger le log"
+                onClick={() =>
+                  downloadText(termRef.current?.getContent() ?? "", downloadFileName ?? defaultFileName(title, subtitle))
+                }
+              >
+                <DownloadIcon />
+              </BarButton>
+            )}
+            {onReconnect && (
+              <BarButton label="Reconnecter" onClick={onReconnect}>
+                <RefreshIcon />
+              </BarButton>
+            )}
+          </div>
+        </div>
+      )}
+
+      {search && searchUi.open && <SearchBar {...searchUi} />}
+
+      {error && (
+        <div
+          className="flex shrink-0 items-start gap-2 border-b px-3 py-2 font-mono text-xs leading-relaxed"
+          style={{ borderColor: "#7f1d1d", backgroundColor: "rgba(127,29,29,0.15)", color: panelTheme.error }}
+        >
+          <span className="shrink-0 pt-px">✕</span>
+          <span className="min-w-0 break-words">{error}</span>
+        </div>
+      )}
+
+      <div className="relative min-h-0 flex-1">
+        {showPlaceholder ? (
+          <div className="flex h-full flex-col items-center justify-center gap-3 px-4 text-center">
+            {loading && <Spinner size="sm" style={{ color: panelTheme.faint }} />}
+            <p className="font-mono text-xs" style={{ color: panelTheme.faint }}>
+              {placeholder}
+            </p>
+          </div>
+        ) : (
+          <>
+            <Terminal
+              ref={termRef}
+              // The panel already draws the border and owns the corners.
+              className="border-0"
+              fontSize={fontSize}
+              scrollback={scrollback}
+              onData={onData}
+              onResize={onResize}
+              options={search ? { ...options, search: true } : options}
+              onViewportChange={followTail ? tail.onViewportChange : undefined}
+              onSearchResults={search ? searchUi.onResults : undefined}
+            />
+            {followTail && tail.detached && (
+              <button
+                type="button"
+                onClick={() => {
+                  termRef.current?.scrollToBottom()
+                  termRef.current?.focus()
+                }}
+                // Right-aligned but clear of xterm's scrollbar, and floating over
+                // the log rather than reserving a row — it's a transient hint.
+                className="absolute bottom-3 right-5 flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[11px] shadow-lg transition-colors"
+                style={{
+                  backgroundColor: "#18181b",
+                  borderColor: panelTheme.border,
+                  color: tail.missed > 0 ? panelTheme.text : panelTheme.dim,
+                }}
+              >
+                {tail.missed > 0 ? `${tail.missed} nouvelle${tail.missed > 1 ? "s" : ""} ligne${tail.missed > 1 ? "s" : ""}` : "Revenir en bas"}
+                <ArrowDownIcon />
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+})
+
+/** Dot + word. The dot alone carries the state when the container is narrow. */
+function StatusChip({ status, label }: { status: TerminalPanelStatus; label?: string }) {
+  const color = STATUS_COLOR[status]
+  const text = label ?? STATUS_LABEL[status]
+  return (
+    <span className="flex shrink-0 items-center gap-1.5" title={text}>
+      <span
+        // `motion-reduce`: the dot keeps its colour, it just stops breathing —
+        // the state is still readable without the animation.
+        className={cn("size-1.5 shrink-0 rounded-full", PULSING.includes(status) && "animate-pulse motion-reduce:animate-none")}
+        style={{ backgroundColor: color }}
+      />
+      <span className="hidden font-mono @md:inline" style={{ color }}>
+        {text}
+      </span>
+    </span>
+  )
+}
+
+function BarButton({
+  label,
+  active,
+  onClick,
+  children,
+}: {
+  label: string
+  active?: boolean
+  onClick: () => void
+  children: ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      onClick={onClick}
+      className="flex size-6 cursor-pointer items-center justify-center rounded transition-colors hover:bg-white/5"
+      style={{ color: active ? panelTheme.accent : panelTheme.faint }}
+    >
+      {children}
+    </button>
+  )
+}
+
+/** Copy with its own "done" beat — a clipboard write is invisible otherwise. */
+function CopyButton({ getContent }: { getContent: () => string }) {
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!copied) return
+    const id = setTimeout(() => setCopied(false), 1500)
+    return () => clearTimeout(id)
+  }, [copied])
+
+  return (
+    <BarButton
+      label={copied ? "Copié" : "Copier tout le log"}
+      onClick={async () => {
+        if (await copyText(getContent())) setCopied(true)
+      }}
+    >
+      <span style={copied ? { color: panelTheme.live } : undefined}>{copied ? <CheckIcon /> : <CopyIcon />}</span>
+    </BarButton>
+  )
+}
+
+interface SearchUi {
+  open: boolean
+  toggle: () => void
+  close: () => void
+  query: string
+  setQuery: (q: string) => void
+  results: { resultIndex: number; resultCount: number }
+  onResults: (r: { resultIndex: number; resultCount: number }) => void
+  next: () => void
+  previous: () => void
+  inputRef: React.RefObject<HTMLInputElement | null>
+}
+
+/** Its own row under the bar rather than an overlay — a log is dense, and floating
+ *  search boxes end up hiding the match they just found. */
+function SearchBar({ query, setQuery, results, next, previous, close, inputRef }: SearchUi) {
+  const empty = query.length > 0 && results.resultCount === 0
+  return (
+    <div
+      className="flex shrink-0 items-center gap-2 border-b px-3 py-1.5"
+      style={{ borderColor: panelTheme.divider, backgroundColor: "#0c0c10", color: panelTheme.faint }}
+    >
+      <SearchIcon />
+      <input
+        ref={inputRef}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault()
+            if (e.shiftKey) previous()
+            else next()
+          } else if (e.key === "Escape") {
+            e.preventDefault()
+            close()
+          }
+        }}
+        placeholder="Rechercher dans le log…"
+        spellCheck={false}
+        className="min-w-0 flex-1 bg-transparent font-mono text-xs outline-none placeholder:opacity-60"
+        style={{ color: empty ? panelTheme.error : panelTheme.text }}
+      />
+      <span className="shrink-0 font-mono text-[11px] tabular-nums" style={{ color: empty ? panelTheme.error : panelTheme.faint }}>
+        {query.length === 0 ? "" : results.resultCount === 0 ? "aucun résultat" : `${results.resultIndex + 1}/${results.resultCount}`}
+      </span>
+      <BarButton label="Résultat précédent (Maj+Entrée)" onClick={previous}>
+        <ChevronIcon up />
+      </BarButton>
+      <BarButton label="Résultat suivant (Entrée)" onClick={next}>
+        <ChevronIcon />
+      </BarButton>
+      <BarButton label="Fermer la recherche (Échap)" onClick={close}>
+        <CloseIcon />
+      </BarButton>
+    </div>
+  )
+}
+
+/**
+ * Search state + the Ctrl/⌘+F binding. The shortcut is bound on the panel root in
+ * the capture phase: xterm owns the keyboard once focused, so waiting for the
+ * event to bubble means never seeing it.
+ */
+function useSearch(termRef: React.RefObject<TerminalHandle | null>, enabled: boolean, rootRef: React.RefObject<HTMLDivElement | null>): SearchUi {
+  const [open, setOpen] = useState(false)
+  const [query, setQueryState] = useState("")
+  const [results, setResults] = useState({ resultIndex: -1, resultCount: 0 })
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const close = useCallback(() => {
+    setOpen(false)
+    setQueryState("")
+    setResults({ resultIndex: -1, resultCount: 0 })
+    termRef.current?.clearSearch()
+    termRef.current?.focus()
+  }, [termRef])
+
+  const toggle = useCallback(() => {
+    setOpen((v) => {
+      if (v) {
+        termRef.current?.clearSearch()
+        return false
+      }
+      return true
+    })
+  }, [termRef])
+
+  useEffect(() => {
+    if (open) inputRef.current?.focus()
+  }, [open])
+
+  useEffect(() => {
+    const root = rootRef.current
+    if (!enabled || !root) return
+    function onKeyDown(e: KeyboardEvent) {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "f") {
+        e.preventDefault()
+        e.stopPropagation()
+        setOpen(true)
+        // Already open: re-select so a second Ctrl+F starts a new query.
+        inputRef.current?.select()
+      }
+    }
+    root.addEventListener("keydown", onKeyDown, true)
+    return () => root.removeEventListener("keydown", onKeyDown, true)
+  }, [enabled, rootRef])
+
+  const setQuery = useCallback(
+    (q: string) => {
+      setQueryState(q)
+      if (q) {
+        // `incremental` keeps the match anchored where you are while you type,
+        // instead of walking forward one match per keystroke.
+        termRef.current?.findNext(q, { incremental: true })
+      } else {
+        termRef.current?.clearSearch()
+        setResults({ resultIndex: -1, resultCount: 0 })
+      }
+    },
+    [termRef]
+  )
+
+  return {
+    open,
+    toggle,
+    close,
+    query,
+    setQuery,
+    results,
+    onResults: setResults,
+    next: () => query && termRef.current?.findNext(query),
+    previous: () => query && termRef.current?.findPrevious(query),
+    inputRef,
+  }
+}
+
+/**
+ * "Am I still at the tail, and how much have I missed?"
+ *
+ * The counter is *lines since the viewport last touched the bottom* — the reason
+ * flag from the terminal is what makes that computable: output events increment,
+ * and any moment spent at the bottom (scrolled back, or never left) resets. A busy
+ * stream fires this per line, so the count accumulates in a ref and only lands in
+ * state once per frame.
+ */
+function useFollowTail(termRef: React.RefObject<TerminalHandle | null>, enabled: boolean) {
+  const [state, setState] = useState({ detached: false, missed: 0 })
+  const pending = useRef({ detached: false, missed: 0 })
+  const frame = useRef<number | null>(null)
+
+  useEffect(
+    () => () => {
+      if (frame.current != null) cancelAnimationFrame(frame.current)
+    },
+    []
+  )
+
+  const onViewportChange = useCallback((v: TerminalViewportState) => {
+    const p = pending.current
+    if (v.rowsBelow === 0) p.missed = 0
+    else if (v.reason === "output") p.missed += 1
+    p.detached = v.rowsBelow > 0
+
+    if (frame.current != null) return
+    frame.current = requestAnimationFrame(() => {
+      frame.current = null
+      setState((prev) =>
+        prev.detached === pending.current.detached && prev.missed === pending.current.missed
+          ? prev
+          : { ...pending.current }
+      )
+    })
+  }, [])
+
+  return useMemo(
+    () => ({ ...state, onViewportChange: enabled ? onViewportChange : undefined }),
+    [state, enabled, onViewportChange]
+  )
+}
+
+/** Clipboard API, with the `execCommand` fallback for non-secure contexts. */
+async function copyText(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    try {
+      const area = document.createElement("textarea")
+      area.value = text
+      area.style.position = "fixed"
+      area.style.opacity = "0"
+      document.body.appendChild(area)
+      area.select()
+      const ok = document.execCommand("copy")
+      document.body.removeChild(area)
+      return ok
+    } catch {
+      return false
+    }
+  }
+}
+
+function downloadText(text: string, fileName: string) {
+  const url = URL.createObjectURL(new Blob([text], { type: "text/plain;charset=utf-8" }))
+  const link = document.createElement("a")
+  link.href = url
+  link.download = fileName
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+/** `service api — stdout / stderr` → `service-api-stdout-stderr.log`. */
+function defaultFileName(title: ReactNode, subtitle: ReactNode): string {
+  const parts = [title, subtitle].filter((p) => typeof p === "string") as string[]
+  const slug = parts
+    .join("-")
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+  return `${slug || "terminal"}.log`
+}
+
+// ── Icons. Inlined like `ImagePull`'s: the design system doesn't take an icon
+// dependency, and these five never leave this file. ──
+
+function SearchIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-3.5 shrink-0" aria-hidden>
+      <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.5" />
+      <path d="m10.5 10.5 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function CopyIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-3.5 shrink-0" aria-hidden>
+      <rect x="5.5" y="5.5" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.4" />
+      <path d="M10.5 2.5h-8v8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-3.5 shrink-0" aria-hidden>
+      <path d="m3.5 8.5 3 3 6-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+function DownloadIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-3.5 shrink-0" aria-hidden>
+      <path d="M8 2.5v7m0 0L5 6.7M8 9.5l3-2.8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M2.8 12.5h10.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function RefreshIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-3.5 shrink-0" aria-hidden>
+      <path
+        d="M13 8a5 5 0 1 1-1.6-3.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path d="M13.2 2v3h-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+function ChevronIcon({ up }: { up?: boolean }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className={cn("size-3.5 shrink-0", up && "rotate-180")} aria-hidden>
+      <path d="m4 6.5 4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+function ArrowDownIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-3 shrink-0" aria-hidden>
+      <path d="M8 3v9m0 0 3.5-3.5M8 12 4.5 8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+function CloseIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-3.5 shrink-0" aria-hidden>
+      <path d="m4.5 4.5 7 7m0-7-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+export { TerminalPanel }