@band-app/server 0.11.0 → 0.13.0

package/dist/server/assets/TerminalPanel-B1dKqOMK.js

@@ -0,0 +1,1016 @@
+import { r as reactExports, j as jsxRuntimeExports } from "../server.js";
+import { E as createLucideIcon, bh as ArrowLeft, c3 as ArrowRight, c4 as ArrowUp, c5 as ArrowDown, X, c6 as ClipboardPaste, b as useSettingsQuery, c7 as openExternalUrl, c8 as SearchBar } from "./router-Ch9bBOlF.js";
+import "node:async_hooks";
+import "node:stream";
+import "util";
+import "crypto";
+import "async_hooks";
+import "stream";
+import "node:stream/web";
+import "node:process";
+import "node:path";
+import "node:url";
+const __iconNode$1 = [
+  ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
+  ["path", { d: "M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2", key: "4jdomd" }],
+  ["path", { d: "M16 4h2a2 2 0 0 1 2 2v4", key: "3hqy98" }],
+  ["path", { d: "M21 14H11", key: "1bme5i" }],
+  ["path", { d: "m15 10-4 4 4 4", key: "5dvupr" }]
+];
+const ClipboardCopy = createLucideIcon("clipboard-copy", __iconNode$1);
+const __iconNode = [
+  ["path", { d: "M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6", key: "1528k5" }],
+  ["path", { d: "M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7", key: "13ksps" }],
+  ["path", { d: "M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1", key: "1n9rhb" }],
+  ["path", { d: "M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1", key: "1mj8rg" }],
+  ["path", { d: "M9 6v12", key: "velyjx" }]
+];
+const TextCursorInput = createLucideIcon("text-cursor-input", __iconNode);
+const TERMINAL_TOOLBAR_HEIGHT_PX = 49;
+const TOUCH_QUERY = "(hover: none) and (pointer: coarse)";
+function useVirtualKeyboardToolbar() {
+  const [enabled, setEnabled] = reactExports.useState(
+    () => typeof window === "undefined" ? false : window.matchMedia(TOUCH_QUERY).matches
+  );
+  const [bottomOffset, setBottomOffset] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(TOUCH_QUERY);
+    const handler = (e) => setEnabled(e.matches);
+    setEnabled(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  reactExports.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!enabled) {
+      setBottomOffset(0);
+      return;
+    }
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const update = () => {
+      const keyboardHeight = Math.max(0, window.innerHeight - (vv.offsetTop + vv.height));
+      setBottomOffset(keyboardHeight);
+    };
+    update();
+    vv.addEventListener("resize", update);
+    vv.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+      vv.removeEventListener("resize", update);
+      vv.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [enabled]);
+  return {
+    enabled,
+    bottomOffset,
+    contentBottomInset: enabled ? TERMINAL_TOOLBAR_HEIGHT_PX : 0
+  };
+}
+const WORD_RE = /[A-Za-z0-9_./:\-+@~]/;
+function pointToCell(clientX, clientY, terminal, screenEl) {
+  const rect = screenEl.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0 || terminal.cols <= 0 || terminal.rows <= 0) {
+    return { col: 0, row: terminal.buffer.active.viewportY };
+  }
+  const cellW = rect.width / terminal.cols;
+  const cellH = rect.height / terminal.rows;
+  const col = clamp(Math.floor((clientX - rect.left) / cellW), 0, terminal.cols - 1);
+  const viewportRow = clamp(Math.floor((clientY - rect.top) / cellH), 0, terminal.rows - 1);
+  return { col, row: terminal.buffer.active.viewportY + viewportRow };
+}
+function findWordBoundaries(line, col) {
+  if (col < 0 || col >= line.length || !WORD_RE.test(line[col])) {
+    const safeCol = clamp(col, 0, Math.max(0, line.length));
+    return { start: safeCol, end: safeCol + 1 };
+  }
+  let start = col;
+  while (start > 0 && WORD_RE.test(line[start - 1])) start--;
+  let end = col + 1;
+  while (end < line.length && WORD_RE.test(line[end])) end++;
+  return { start, end };
+}
+function getLineText(terminal, row) {
+  return terminal.buffer.active.getLine(row)?.translateToString(false) ?? "";
+}
+function moveCell(cell, dir, terminal) {
+  const cols = terminal.cols;
+  const lastRow = Math.max(0, terminal.buffer.active.length - 1);
+  switch (dir) {
+    case "left":
+      if (cell.col > 0) return { col: cell.col - 1, row: cell.row };
+      if (cell.row > 0) return { col: cols - 1, row: cell.row - 1 };
+      return cell;
+    case "right":
+      if (cell.col < cols - 1) return { col: cell.col + 1, row: cell.row };
+      if (cell.row < lastRow) return { col: 0, row: cell.row + 1 };
+      return cell;
+    case "up":
+      if (cell.row > 0) return { col: cell.col, row: cell.row - 1 };
+      return cell;
+    case "down":
+      if (cell.row < lastRow) return { col: cell.col, row: cell.row + 1 };
+      return cell;
+  }
+}
+function applySelection(terminal, anchor, head) {
+  const cols = terminal.cols;
+  if (cols <= 0) return;
+  const anchorLinear = anchor.row * cols + anchor.col;
+  const headLinear = head.row * cols + head.col;
+  const startLinear = Math.min(anchorLinear, headLinear);
+  const endLinear = Math.max(anchorLinear, headLinear);
+  const length = endLinear - startLinear + 1;
+  const startRow = Math.floor(startLinear / cols);
+  const startCol = startLinear - startRow * cols;
+  terminal.select(startCol, startRow, length);
+}
+function wordSelectionAt(cell, lineText) {
+  const { start, end } = findWordBoundaries(lineText, cell.col);
+  return {
+    anchor: { col: start, row: cell.row },
+    // `head` is the last cell of the selection (inclusive). `end` from
+    // findWordBoundaries is exclusive, so subtract one.
+    head: { col: Math.max(start, end - 1), row: cell.row }
+  };
+}
+function clamp(n, lo, hi) {
+  if (n < lo) return lo;
+  if (n > hi) return hi;
+  return n;
+}
+async function writeClipboardText(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  return legacyCopy(text);
+}
+function legacyCopy(text) {
+  if (typeof document === "undefined") return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "0";
+  textarea.style.width = "1px";
+  textarea.style.height = "1px";
+  textarea.style.padding = "0";
+  textarea.style.border = "0";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+  document.body.appendChild(textarea);
+  const previouslyFocused = document.activeElement;
+  try {
+    textarea.focus();
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+    previouslyFocused?.focus?.();
+  }
+}
+async function readClipboardText() {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.readText) {
+    return "";
+  }
+  try {
+    return await navigator.clipboard.readText();
+  } catch {
+    return "";
+  }
+}
+const SEQ_ESC = "\x1B";
+const SEQ_TAB = "	";
+const SEQ_ARROW_UP = "\x1B[A";
+const SEQ_ARROW_DOWN = "\x1B[B";
+const SEQ_ARROW_RIGHT = "\x1B[C";
+const SEQ_ARROW_LEFT = "\x1B[D";
+const tap = (fn) => (e) => {
+  e.preventDefault();
+  void fn();
+};
+function TerminalToolbar({
+  terminal,
+  sendInput,
+  pendingCtrl,
+  onToggleCtrl,
+  selectionMode,
+  onExtendSelection,
+  onExitSelection,
+  onSelectAll
+}) {
+  const { enabled, bottomOffset } = useVirtualKeyboardToolbar();
+  const handleCopy = reactExports.useCallback(async () => {
+    if (!terminal.hasSelection()) return;
+    const text = terminal.getSelection();
+    if (!text) return;
+    const ok = await writeClipboardText(text);
+    if (!ok) console.warn("[TerminalToolbar] clipboard write failed");
+  }, [terminal]);
+  const handleCopyAndExit = reactExports.useCallback(async () => {
+    await handleCopy();
+    onExitSelection();
+  }, [handleCopy, onExitSelection]);
+  const handlePaste = reactExports.useCallback(async () => {
+    const text = await readClipboardText();
+    if (text) sendInput(text);
+  }, [sendInput]);
+  const idleKeyButtons = reactExports.useMemo(
+    () => [
+      { label: "Esc", seq: SEQ_ESC, ariaLabel: "Send Escape" },
+      { label: "Tab", seq: SEQ_TAB, ariaLabel: "Send Tab" }
+    ],
+    []
+  );
+  const idleArrows = reactExports.useMemo(
+    () => [
+      { Icon: ArrowLeft, seq: SEQ_ARROW_LEFT, ariaLabel: "Arrow Left" },
+      { Icon: ArrowRight, seq: SEQ_ARROW_RIGHT, ariaLabel: "Arrow Right" },
+      { Icon: ArrowUp, seq: SEQ_ARROW_UP, ariaLabel: "Arrow Up" },
+      { Icon: ArrowDown, seq: SEQ_ARROW_DOWN, ariaLabel: "Arrow Down" }
+    ],
+    []
+  );
+  const selectionArrows = reactExports.useMemo(
+    () => [
+      { Icon: ArrowLeft, dir: "left", ariaLabel: "Extend selection left" },
+      { Icon: ArrowRight, dir: "right", ariaLabel: "Extend selection right" },
+      { Icon: ArrowUp, dir: "up", ariaLabel: "Extend selection up" },
+      { Icon: ArrowDown, dir: "down", ariaLabel: "Extend selection down" }
+    ],
+    []
+  );
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      "data-testid": "terminal-toolbar",
+      "data-mode": selectionMode ? "selection" : "idle",
+      role: "toolbar",
+      "aria-label": selectionMode ? "Terminal selection controls" : "Terminal accessory keys",
+      style: { bottom: bottomOffset },
+      className: "fixed inset-x-0 z-50 flex justify-center border-t border-border bg-background/95 shadow-lg backdrop-blur-md",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-3xl items-center gap-1 overflow-x-auto px-2 py-1.5", children: selectionMode ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ToolbarButton,
+          {
+            ariaLabel: "Copy selection and exit",
+            title: "Copy",
+            onPointerDown: tap(handleCopyAndExit),
+            variant: "primary",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ClipboardCopy, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Copy" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ToolbarButton,
+          {
+            ariaLabel: "Exit selection mode",
+            title: "Done",
+            onPointerDown: tap(onExitSelection),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Done" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-1 h-6 w-px shrink-0 bg-border", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "mr-1 shrink-0 select-none text-xs font-medium uppercase tracking-wide text-muted-foreground",
+            "aria-hidden": "true",
+            children: "Extend"
+          }
+        ),
+        selectionArrows.map(({ Icon, dir, ariaLabel }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToolbarButton,
+          {
+            ariaLabel,
+            title: ariaLabel,
+            onPointerDown: tap(() => onExtendSelection(dir)),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "size-4" })
+          },
+          dir
+        ))
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ToolbarButton,
+          {
+            ariaLabel: "Paste from clipboard",
+            title: "Paste",
+            onPointerDown: tap(handlePaste),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ClipboardPaste, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Paste" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ToolbarButton,
+          {
+            ariaLabel: "Select all",
+            title: "Select all",
+            onPointerDown: tap(onSelectAll),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TextCursorInput, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "All" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-1 h-6 w-px shrink-0 bg-border", "aria-hidden": "true" }),
+        idleKeyButtons.map(({ label, seq, ariaLabel }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToolbarButton,
+          {
+            ariaLabel,
+            title: label,
+            onPointerDown: tap(() => sendInput(seq)),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: label })
+          },
+          label
+        )),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToolbarButton,
+          {
+            ariaLabel: pendingCtrl ? "Cancel pending Ctrl" : "Arm Ctrl modifier",
+            title: "Ctrl (sticky — taps the next key as Ctrl+key)",
+            onPointerDown: tap(onToggleCtrl),
+            active: pendingCtrl,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: "Ctrl" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-1 h-6 w-px shrink-0 bg-border", "aria-hidden": "true" }),
+        idleArrows.map(({ Icon, seq, ariaLabel }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToolbarButton,
+          {
+            ariaLabel,
+            title: ariaLabel,
+            onPointerDown: tap(() => sendInput(seq)),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "size-4" })
+          },
+          ariaLabel
+        ))
+      ] }) })
+    }
+  );
+}
+function ToolbarButton({
+  ariaLabel,
+  title,
+  onPointerDown,
+  active,
+  variant = "default",
+  disabled,
+  children
+}) {
+  const palette = active ? "bg-primary text-primary-foreground" : variant === "primary" ? "bg-primary text-primary-foreground hover:bg-primary/90" : "bg-muted/60 hover:bg-muted active:bg-muted";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel,
+      "aria-pressed": active,
+      title,
+      onPointerDown,
+      disabled,
+      className: [
+        "inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1 rounded-md px-2",
+        "text-foreground transition-colors",
+        palette,
+        "disabled:opacity-40"
+      ].join(" "),
+      children
+    }
+  );
+}
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP_PX = 10;
+const SEARCH_DECORATIONS = {
+  matchBackground: "#515c6a",
+  activeMatchBackground: "#a9913680",
+  matchOverviewRuler: "#a9913680",
+  activeMatchColorOverviewRuler: "#a99136"
+};
+const DEFAULT_SEARCH_OPTIONS = {
+  caseSensitive: false,
+  wholeWord: false,
+  regex: false
+};
+function toXtermSearchOptions(opts) {
+  return {
+    caseSensitive: opts.caseSensitive,
+    wholeWord: opts.wholeWord,
+    regex: opts.regex,
+    decorations: SEARCH_DECORATIONS
+  };
+}
+const DARK_TERMINAL_THEME = {
+  background: "#1e1e1e",
+  foreground: "#e8e8e8",
+  cursor: "#e8e8e8",
+  selectionBackground: "rgba(255, 255, 255, 0.2)"
+};
+const LIGHT_TERMINAL_THEME = {
+  background: "#ffffff",
+  foreground: "#1e1e1e",
+  cursor: "#1e1e1e",
+  cursorAccent: "#ffffff",
+  selectionBackground: "rgba(0, 0, 0, 0.15)",
+  // Tweak ANSI colors so they remain readable on a white background. The default
+  // bright-yellow / bright-green xterm palette washes out badly in light mode.
+  black: "#000000",
+  red: "#cd3131",
+  green: "#0a8043",
+  yellow: "#946800",
+  blue: "#0451a5",
+  magenta: "#bc05bc",
+  cyan: "#0598bc",
+  white: "#555555",
+  brightBlack: "#666666",
+  brightRed: "#cd3131",
+  brightGreen: "#0a8043",
+  brightYellow: "#946800",
+  brightBlue: "#0451a5",
+  brightMagenta: "#bc05bc",
+  brightCyan: "#0598bc",
+  brightWhite: "#1e1e1e"
+};
+function isDarkMode() {
+  return document.documentElement.classList.contains("dark");
+}
+function getTerminalTheme() {
+  return isDarkMode() ? DARK_TERMINAL_THEME : LIGHT_TERMINAL_THEME;
+}
+function TerminalPanel({
+  workspaceId,
+  terminalId,
+  visible,
+  paneMetadata,
+  autoFocus,
+  onTitleChange
+}) {
+  const containerRef = reactExports.useRef(null);
+  const terminalRef = reactExports.useRef(null);
+  const fitAddonRef = reactExports.useRef(null);
+  const searchAddonRef = reactExports.useRef(null);
+  const webglAddonRef = reactExports.useRef(null);
+  const wsRef = reactExports.useRef(null);
+  const onTitleChangeRef = reactExports.useRef(onTitleChange);
+  onTitleChangeRef.current = onTitleChange;
+  const { settings } = useSettingsQuery();
+  const useWebGLRenderer = settings.useWebGLTerminalRenderer ?? true;
+  const useWebGLRendererRef = reactExports.useRef(useWebGLRenderer);
+  useWebGLRendererRef.current = useWebGLRenderer;
+  const [searchOpen, setSearchOpen] = reactExports.useState(false);
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [searchOptions, setSearchOptions] = reactExports.useState(DEFAULT_SEARCH_OPTIONS);
+  const [matchInfo, setMatchInfo] = reactExports.useState({
+    total: 0,
+    current: 0
+  });
+  const searchBarRef = reactExports.useRef(null);
+  const openSearchRef = reactExports.useRef(() => {
+  });
+  const [terminalReady, setTerminalReady] = reactExports.useState(false);
+  const pendingCtrlRef = reactExports.useRef(false);
+  const [pendingCtrl, setPendingCtrl] = reactExports.useState(false);
+  const handleToggleCtrl = reactExports.useCallback(() => {
+    const next = !pendingCtrlRef.current;
+    pendingCtrlRef.current = next;
+    setPendingCtrl(next);
+  }, []);
+  const selectionAnchorRef = reactExports.useRef(null);
+  const selectionHeadRef = reactExports.useRef(null);
+  const [selectionMode, setSelectionMode] = reactExports.useState(false);
+  const exitSelectionMode = reactExports.useCallback(() => {
+    selectionAnchorRef.current = null;
+    selectionHeadRef.current = null;
+    setSelectionMode(false);
+    terminalRef.current?.clearSelection();
+  }, []);
+  const handleExtendSelection = reactExports.useCallback((direction) => {
+    const terminal = terminalRef.current;
+    const anchor = selectionAnchorRef.current;
+    const head = selectionHeadRef.current;
+    if (!terminal || !anchor || !head) return;
+    const next = moveCell(head, direction, terminal);
+    selectionHeadRef.current = next;
+    applySelection(terminal, anchor, next);
+  }, []);
+  const handleSelectAll = reactExports.useCallback(() => {
+    const terminal = terminalRef.current;
+    if (!terminal) return;
+    const anchor = { col: 0, row: 0 };
+    const lastRow = Math.max(0, terminal.buffer.active.length - 1);
+    const head = { col: Math.max(0, terminal.cols - 1), row: lastRow };
+    applySelection(terminal, anchor, head);
+    selectionAnchorRef.current = anchor;
+    selectionHeadRef.current = head;
+    setSelectionMode(true);
+    terminal.blur();
+  }, []);
+  reactExports.useEffect(() => {
+    if (!containerRef.current) return;
+    let cancelled = false;
+    let cleanup;
+    Promise.all([
+      import("./xterm-CkV9CBvP.js"),
+      import("./addon-fit-D89xfLfG.js"),
+      import("./addon-web-links-CzLDtFWc.js"),
+      import("./addon-search-BS53_-cp.js"),
+      import("./addon-webgl-BeO2q2vc.js")
+    ]).then(([xtermMod, fitMod, webLinksMod, searchMod, webglMod]) => {
+      const { Terminal: XTerm } = xtermMod;
+      const { FitAddon: XFitAddon } = fitMod;
+      const { WebLinksAddon: XWebLinksAddon } = webLinksMod;
+      const { SearchAddon: XSearchAddon } = searchMod;
+      const { WebglAddon: XWebglAddon } = webglMod;
+      if (cancelled || !containerRef.current) return;
+      const wantsWebGL = useWebGLRendererRef.current;
+      Promise.resolve({          });
+      const terminal = new XTerm({
+        // Opt in to addon-only APIs (decorations, markers, etc.) that
+        // xterm.js 6.1-beta gates behind this flag. Without it, the search
+        // addon's `findNext` throws "You must set the allowProposedApi
+        // option to true to use proposed API" the first time the user
+        // types in the find bar. The addons we ship (search, webgl) are
+        // first-party xterm.js addons that depend on these APIs.
+        allowProposedApi: true,
+        cursorBlink: true,
+        fontSize: 13,
+        fontFamily: "'SF Mono', Menlo, Monaco, 'Courier New', monospace",
+        // iTerm-style row spacing — only safe with the WebGL renderer.
+        // The WebGL addon redraws box-drawing (U+2500-U+257F), block
+        // elements (U+2580-U+259F), powerline separators, and other
+        // continuous glyphs at the full cell rect (via its `customGlyphs`
+        // option, default true) so a 1.2 lineHeight doesn't slice horizontal
+        // gaps through the opencode banner, claude-code's powerline
+        // statusline, or other ASCII art. xterm.js's DOM renderer does
+        // NOT do this — falling back to it means we have to revert to
+        // lineHeight: 1.0 to keep block art continuous.
+        // See https://github.com/band-app/band/issues/391 for history.
+        lineHeight: wantsWebGL ? 1.2 : 1,
+        macOptionIsMeta: true,
+        // Alt+Left/Right → word navigation on macOS
+        scrollback: 1e4,
+        theme: getTerminalTheme()
+      });
+      const themeObserver = new MutationObserver(() => {
+        terminal.options.theme = getTerminalTheme();
+      });
+      themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"]
+      });
+      const fitAddon = new XFitAddon();
+      terminal.loadAddon(fitAddon);
+      terminal.loadAddon(new XWebLinksAddon((_event, uri) => openExternalUrl(uri)));
+      terminal.open(containerRef.current);
+      let webglContextLossDisposable;
+      const attachWebGL = () => {
+        try {
+          const addon = new XWebglAddon({ customGlyphs: true });
+          terminal.loadAddon(addon);
+          const screenEl = containerRef.current?.querySelector(
+            ".xterm-screen"
+          );
+          const webglCanvas = screenEl?.querySelector(
+            ":scope > canvas:last-of-type"
+          );
+          if (webglCanvas) {
+            webglCanvas.style.pointerEvents = "none";
+            webglCanvas.style.touchAction = "none";
+          }
+          webglAddonRef.current = addon;
+          webglContextLossDisposable?.dispose();
+          webglContextLossDisposable = addon.onContextLoss(() => {
+            console.warn("[TerminalPanel] WebGL context lost, reattaching addon");
+            addon.dispose();
+            webglAddonRef.current = null;
+            attachWebGL();
+          });
+          return true;
+        } catch (err) {
+          console.warn("[TerminalPanel] WebGL renderer unavailable, falling back to DOM", err);
+          return false;
+        }
+      };
+      if (wantsWebGL) attachWebGL();
+      const searchAddon = new XSearchAddon();
+      terminal.loadAddon(searchAddon);
+      const searchResultsDisposable = searchAddon.onDidChangeResults((event) => {
+        setMatchInfo({
+          total: event.resultCount,
+          current: event.resultIndex >= 0 ? event.resultIndex + 1 : 0
+        });
+      });
+      terminal.attachCustomKeyEventHandler((e) => {
+        if (e.type === "keydown") {
+          if (pendingCtrlRef.current && e.key.length === 1 && !e.metaKey && !e.altKey && !e.ctrlKey) {
+            const lower = e.key.toLowerCase();
+            const code = lower.charCodeAt(0);
+            if (code >= 97 && code <= 122) {
+              terminal.input(String.fromCharCode(code - 96));
+              pendingCtrlRef.current = false;
+              setPendingCtrl(false);
+              e.preventDefault();
+              return false;
+            }
+            pendingCtrlRef.current = false;
+            setPendingCtrl(false);
+          }
+          if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "f") {
+            e.preventDefault();
+            openSearchRef.current();
+            return false;
+          }
+          if (e.key === "Enter" && e.shiftKey && !e.altKey && !e.metaKey && !e.ctrlKey) {
+            terminal.input("\x1B[13;2u");
+            return false;
+          }
+          if (e.altKey && !e.metaKey && !e.ctrlKey) {
+            if (e.key === "ArrowLeft") {
+              terminal.input("\x1Bb");
+              return false;
+            }
+            if (e.key === "ArrowRight") {
+              terminal.input("\x1Bf");
+              return false;
+            }
+          }
+        }
+        return true;
+      });
+      terminalRef.current = terminal;
+      fitAddonRef.current = fitAddon;
+      searchAddonRef.current = searchAddon;
+      setTerminalReady(true);
+      const containerEl = containerRef.current;
+      let lastTouchY = null;
+      const onTouchStart = (e) => {
+        lastTouchY = e.touches.length === 1 ? e.touches[0].clientY : null;
+      };
+      const onTouchMove = (e) => {
+        if (e.touches.length !== 1 || lastTouchY === null) return;
+        const currentY = e.touches[0].clientY;
+        const deltaY = lastTouchY - currentY;
+        const viewport = containerEl.querySelector(".xterm-viewport");
+        const cellHeight = viewport && terminal.rows > 0 ? viewport.clientHeight / terminal.rows : 17;
+        const lineDelta = Math.trunc(deltaY / cellHeight);
+        if (lineDelta !== 0) {
+          terminal.scrollLines(lineDelta);
+          lastTouchY = currentY + (deltaY - lineDelta * cellHeight);
+          e.preventDefault();
+        }
+      };
+      const onTouchEnd = () => {
+        lastTouchY = null;
+      };
+      containerEl.addEventListener("touchstart", onTouchStart, { passive: true });
+      containerEl.addEventListener("touchmove", onTouchMove, { passive: false });
+      containerEl.addEventListener("touchend", onTouchEnd, { passive: true });
+      containerEl.addEventListener("touchcancel", onTouchEnd, { passive: true });
+      let longPressTimer = null;
+      let longPressStart = null;
+      const cancelLongPress = () => {
+        if (longPressTimer !== null) {
+          window.clearTimeout(longPressTimer);
+          longPressTimer = null;
+        }
+        longPressStart = null;
+      };
+      const onLongPressStart = (e) => {
+        cancelLongPress();
+        if (e.touches.length !== 1) return;
+        const t = e.touches[0];
+        longPressStart = { x: t.clientX, y: t.clientY };
+        longPressTimer = window.setTimeout(() => {
+          longPressTimer = null;
+          const start = longPressStart;
+          if (!start) return;
+          const screenEl = containerEl.querySelector(".xterm-screen");
+          if (!screenEl) return;
+          const cell = pointToCell(start.x, start.y, terminal, screenEl);
+          const lineText = getLineText(terminal, cell.row);
+          const { anchor, head } = wordSelectionAt(cell, lineText);
+          applySelection(terminal, anchor, head);
+          selectionAnchorRef.current = anchor;
+          selectionHeadRef.current = head;
+          setSelectionMode(true);
+          tapStartX = null;
+          tapStartY = null;
+          terminal.blur();
+          if (typeof navigator.vibrate === "function") {
+            try {
+              navigator.vibrate(15);
+            } catch {
+            }
+          }
+        }, LONG_PRESS_MS);
+      };
+      const onLongPressMove = (e) => {
+        if (!longPressStart || e.touches.length !== 1) return;
+        const t = e.touches[0];
+        const dx = Math.abs(t.clientX - longPressStart.x);
+        const dy = Math.abs(t.clientY - longPressStart.y);
+        if (dx > LONG_PRESS_SLOP_PX || dy > LONG_PRESS_SLOP_PX) cancelLongPress();
+      };
+      containerEl.addEventListener("touchstart", onLongPressStart, { passive: true });
+      containerEl.addEventListener("touchmove", onLongPressMove, { passive: true });
+      containerEl.addEventListener("touchend", cancelLongPress, { passive: true });
+      containerEl.addEventListener("touchcancel", cancelLongPress, { passive: true });
+      let tapStartX = null;
+      let tapStartY = null;
+      const onTapStart = (e) => {
+        if (e.touches.length === 1) {
+          tapStartX = e.touches[0].clientX;
+          tapStartY = e.touches[0].clientY;
+        } else {
+          tapStartX = null;
+          tapStartY = null;
+        }
+      };
+      const onTapEnd = (e) => {
+        const startX = tapStartX;
+        const startY = tapStartY;
+        tapStartX = null;
+        tapStartY = null;
+        if (startX === null || startY === null || e.changedTouches.length !== 1) return;
+        const dx = Math.abs(e.changedTouches[0].clientX - startX);
+        const dy = Math.abs(e.changedTouches[0].clientY - startY);
+        if (dx < 10 && dy < 10) {
+          if (selectionAnchorRef.current !== null) {
+            selectionAnchorRef.current = null;
+            selectionHeadRef.current = null;
+            setSelectionMode(false);
+            terminal.clearSelection();
+          }
+          terminal.focus();
+        }
+      };
+      const onTapCancel = () => {
+        tapStartX = null;
+        tapStartY = null;
+      };
+      containerEl.addEventListener("touchstart", onTapStart, { passive: true });
+      containerEl.addEventListener("touchend", onTapEnd, { passive: true });
+      containerEl.addEventListener("touchcancel", onTapCancel, { passive: true });
+      const proto = location.protocol === "https:" ? "wss:" : "ws:";
+      const ws = new WebSocket(
+        `${proto}//${location.host}/terminal?workspaceId=${encodeURIComponent(workspaceId)}&terminalId=${encodeURIComponent(terminalId)}`
+      );
+      wsRef.current = ws;
+      ws.binaryType = "arraybuffer";
+      ws.onopen = () => {
+        if (paneMetadata && (paneMetadata.command || paneMetadata.cwd || paneMetadata.env)) {
+          const initMsg = { type: "init" };
+          if (paneMetadata.command) initMsg.command = paneMetadata.command;
+          if (paneMetadata.cwd) initMsg.cwd = paneMetadata.cwd;
+          if (paneMetadata.env) initMsg.env = paneMetadata.env;
+          ws.send(JSON.stringify(initMsg));
+        }
+        fitAddon.fit();
+        ws.send(
+          JSON.stringify({
+            type: "resize",
+            cols: terminal.cols,
+            rows: terminal.rows
+          })
+        );
+        if (autoFocus) {
+          terminal.focus();
+        }
+      };
+      ws.onmessage = (event) => {
+        if (event.data instanceof ArrayBuffer) {
+          terminal.write(new Uint8Array(event.data));
+        } else {
+          try {
+            const msg = JSON.parse(event.data);
+            if (msg.type === "title" && typeof msg.title === "string") {
+              onTitleChangeRef.current?.(msg.title);
+            }
+          } catch {
+            terminal.write(event.data);
+          }
+        }
+      };
+      ws.onclose = () => {
+        terminal.write("\r\n\x1B[90m[Terminal disconnected]\x1B[0m\r\n");
+      };
+      terminal.onData((data) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(data);
+        }
+      });
+      terminal.onTitleChange((title) => {
+        onTitleChangeRef.current?.(title);
+      });
+      let selectionRafId = null;
+      const reapplySelectionOnNextFrame = () => {
+        if (selectionRafId !== null) return;
+        if (!selectionAnchorRef.current || !selectionHeadRef.current) return;
+        selectionRafId = requestAnimationFrame(() => {
+          selectionRafId = null;
+          const anchor = selectionAnchorRef.current;
+          const head = selectionHeadRef.current;
+          if (anchor && head) applySelection(terminal, anchor, head);
+        });
+      };
+      const selectionResizeDisposable = terminal.onResize(reapplySelectionOnNextFrame);
+      let lastDpr = window.devicePixelRatio;
+      const handleDprChange = () => {
+        const currentDpr = window.devicePixelRatio;
+        if (currentDpr === lastDpr) return;
+        lastDpr = currentDpr;
+        const fs = terminal.options.fontSize;
+        if (typeof fs === "number") {
+          terminal.options.fontSize = fs + 1;
+          terminal.options.fontSize = fs;
+        }
+        const addon = webglAddonRef.current;
+        if (addon) {
+          addon.dispose();
+          webglAddonRef.current = null;
+          attachWebGL();
+        }
+        fitAddon.fit();
+      };
+      const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry || entry.contentRect.width === 0 || entry.contentRect.height === 0) return;
+        handleDprChange();
+        fitAddon.fit();
+        if (ws.readyState === WebSocket.OPEN && terminal.cols > 0 && terminal.rows > 0) {
+          ws.send(
+            JSON.stringify({
+              type: "resize",
+              cols: terminal.cols,
+              rows: terminal.rows
+            })
+          );
+        }
+      });
+      resizeObserver.observe(containerRef.current);
+      let dprMql;
+      const bindDprListener = () => {
+        dprMql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        dprMql.addEventListener("change", onDprMediaChange);
+      };
+      const onDprMediaChange = () => {
+        handleDprChange();
+        dprMql?.removeEventListener("change", onDprMediaChange);
+        bindDprListener();
+      };
+      bindDprListener();
+      cleanup = () => {
+        themeObserver.disconnect();
+        resizeObserver.disconnect();
+        searchResultsDisposable.dispose();
+        selectionResizeDisposable.dispose();
+        if (selectionRafId !== null) cancelAnimationFrame(selectionRafId);
+        webglContextLossDisposable?.dispose();
+        dprMql?.removeEventListener("change", onDprMediaChange);
+        cancelLongPress();
+        containerEl.removeEventListener("touchstart", onTouchStart);
+        containerEl.removeEventListener("touchmove", onTouchMove);
+        containerEl.removeEventListener("touchend", onTouchEnd);
+        containerEl.removeEventListener("touchcancel", onTouchEnd);
+        containerEl.removeEventListener("touchstart", onLongPressStart);
+        containerEl.removeEventListener("touchmove", onLongPressMove);
+        containerEl.removeEventListener("touchend", cancelLongPress);
+        containerEl.removeEventListener("touchcancel", cancelLongPress);
+        containerEl.removeEventListener("touchstart", onTapStart);
+        containerEl.removeEventListener("touchend", onTapEnd);
+        containerEl.removeEventListener("touchcancel", onTapCancel);
+        ws.close();
+        terminal.dispose();
+        terminalRef.current = null;
+        fitAddonRef.current = null;
+        searchAddonRef.current = null;
+        webglAddonRef.current = null;
+        wsRef.current = null;
+        selectionAnchorRef.current = null;
+        selectionHeadRef.current = null;
+        pendingCtrlRef.current = false;
+        setSelectionMode(false);
+        setPendingCtrl(false);
+        setTerminalReady(false);
+      };
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [terminalId, workspaceId, paneMetadata, autoFocus]);
+  reactExports.useEffect(() => {
+    if (visible && fitAddonRef.current) {
+      requestAnimationFrame(() => {
+        fitAddonRef.current?.fit();
+        const term = terminalRef.current;
+        const ws = wsRef.current;
+        if (term && ws?.readyState === WebSocket.OPEN && term.cols > 0 && term.rows > 0) {
+          ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
+        }
+      });
+    }
+  }, [visible]);
+  reactExports.useEffect(() => {
+    const handler = () => {
+      if (!visible) return;
+      terminalRef.current?.focus();
+    };
+    window.addEventListener("band:focus-terminal", handler);
+    return () => window.removeEventListener("band:focus-terminal", handler);
+  }, [visible]);
+  const handleOpenSearch = reactExports.useCallback(() => {
+    setSearchOpen(true);
+    requestAnimationFrame(() => {
+      searchBarRef.current?.focus();
+      searchBarRef.current?.select();
+    });
+  }, []);
+  openSearchRef.current = handleOpenSearch;
+  const handleCloseSearch = reactExports.useCallback(() => {
+    searchAddonRef.current?.clearDecorations();
+    setSearchOpen(false);
+    setSearchQuery("");
+    setMatchInfo({ total: 0, current: 0 });
+    terminalRef.current?.focus();
+  }, []);
+  const handleNext = reactExports.useCallback(() => {
+    if (!searchQuery) return;
+    searchAddonRef.current?.findNext(searchQuery, toXtermSearchOptions(searchOptions));
+  }, [searchQuery, searchOptions]);
+  const handlePrevious = reactExports.useCallback(() => {
+    if (!searchQuery) return;
+    searchAddonRef.current?.findPrevious(searchQuery, toXtermSearchOptions(searchOptions));
+  }, [searchQuery, searchOptions]);
+  reactExports.useEffect(() => {
+    const addon = searchAddonRef.current;
+    if (!addon) return;
+    if (!searchQuery) {
+      addon.clearDecorations();
+      setMatchInfo({ total: 0, current: 0 });
+      return;
+    }
+    addon.findNext(searchQuery, toXtermSearchOptions(searchOptions));
+  }, [searchQuery, searchOptions]);
+  const { contentBottomInset } = useVirtualKeyboardToolbar();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full w-full flex-col", children: [
+    searchOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SearchBar,
+      {
+        ref: searchBarRef,
+        query: searchQuery,
+        onQueryChange: setSearchQuery,
+        options: searchOptions,
+        onOptionsChange: setSearchOptions,
+        placeholder: "Find in terminal...",
+        matchInfo,
+        onNext: handleNext,
+        onPrevious: handlePrevious,
+        onClose: handleCloseSearch
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "absolute inset-x-2 top-2 overflow-hidden",
+        style: { bottom: 8 + contentBottomInset }
+      }
+    ) }),
+    terminalReady && terminalRef.current && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TerminalToolbar,
+      {
+        terminal: terminalRef.current,
+        sendInput: (data) => {
+          const ws = wsRef.current;
+          if (ws?.readyState === WebSocket.OPEN) ws.send(data);
+        },
+        pendingCtrl,
+        onToggleCtrl: handleToggleCtrl,
+        selectionMode,
+        onExtendSelection: handleExtendSelection,
+        onExitSelection: exitSelectionMode,
+        onSelectAll: handleSelectAll
+      }
+    )
+  ] });
+}
+export {
+  TerminalPanel
+};