import { FitAddon } from "@xterm/addon-fit";import { Plus, SquareSplitHorizontal, TerminalSquare, Trash2, XIcon } from "lucide-react";import { type ThreadId } from "@t3tools/contracts";import { Terminal, type ITheme } from "@xterm/xterm";import {  type PointerEvent as ReactPointerEvent,  type ReactNode,  useCallback,  useEffect,  useMemo,  useRef,  useState,} from "react";import { Popover, PopoverPopup, PopoverTrigger } from "~/components/ui/popover";import { type TerminalContextSelection } from "~/lib/terminalContext";import { openInPreferredEditor } from "../editorPreferences";import {  extractTerminalLinks,  isTerminalLinkActivation,  resolvePathLinkTarget,} from "../terminal-links";import { isTerminalClearShortcut, terminalNavigationShortcutData } from "../keybindings";import {  DEFAULT_THREAD_TERMINAL_HEIGHT,  DEFAULT_THREAD_TERMINAL_ID,  MAX_TERMINALS_PER_GROUP,  type ThreadTerminalGroup,} from "../types";import { readNativeApi } from "~/nativeApi"; const MIN_DRAWER_HEIGHT = 180;const MAX_DRAWER_HEIGHT_RATIO = 0.75;const MULTI_CLICK_SELECTION_ACTION_DELAY_MS = 260; function maxDrawerHeight(): number {  if (typeof window === "undefined") return DEFAULT_THREAD_TERMINAL_HEIGHT;  return Math.max(MIN_DRAWER_HEIGHT, Math.floor(window.innerHeight * MAX_DRAWER_HEIGHT_RATIO));} function clampDrawerHeight(height: number): number {  const safeHeight = Number.isFinite(height) ? height : DEFAULT_THREAD_TERMINAL_HEIGHT;  const maxHeight = maxDrawerHeight();  return Math.min(Math.max(Math.round(safeHeight), MIN_DRAWER_HEIGHT), maxHeight);} function writeSystemMessage(terminal: Terminal, message: string): void {  terminal.write(`\r\n[terminal] ${message}\r\n`);} function terminalThemeFromApp(): ITheme {  const isDark = document.documentElement.classList.contains("dark");  const bodyStyles = getComputedStyle(document.body);  const background =    bodyStyles.backgroundColor || (isDark ? "rgb(14, 18, 24)" : "rgb(255, 255, 255)");  const foreground = bodyStyles.color || (isDark ? "rgb(237, 241, 247)" : "rgb(28, 33, 41)");   if (isDark) {    return {      background,      foreground,      cursor: "rgb(180, 203, 255)",      selectionBackground: "rgba(180, 203, 255, 0.25)",      scrollbarSliderBackground: "rgba(255, 255, 255, 0.1)",      scrollbarSliderHoverBackground: "rgba(255, 255, 255, 0.18)",      scrollbarSliderActiveBackground: "rgba(255, 255, 255, 0.22)",      black: "rgb(24, 30, 38)",      red: "rgb(255, 122, 142)",      green: "rgb(134, 231, 149)",      yellow: "rgb(244, 205, 114)",      blue: "rgb(137, 190, 255)",      magenta: "rgb(208, 176, 255)",      cyan: "rgb(124, 232, 237)",      white: "rgb(210, 218, 230)",      brightBlack: "rgb(110, 120, 136)",      brightRed: "rgb(255, 168, 180)",      brightGreen: "rgb(176, 245, 186)",      brightYellow: "rgb(255, 224, 149)",      brightBlue: "rgb(174, 210, 255)",      brightMagenta: "rgb(229, 203, 255)",      brightCyan: "rgb(167, 244, 247)",      brightWhite: "rgb(244, 247, 252)",    };  }   return {    background,    foreground,    cursor: "rgb(38, 56, 78)",    selectionBackground: "rgba(37, 63, 99, 0.2)",    scrollbarSliderBackground: "rgba(0, 0, 0, 0.15)",    scrollbarSliderHoverBackground: "rgba(0, 0, 0, 0.25)",    scrollbarSliderActiveBackground: "rgba(0, 0, 0, 0.3)",    black: "rgb(44, 53, 66)",    red: "rgb(191, 70, 87)",    green: "rgb(60, 126, 86)",    yellow: "rgb(146, 112, 35)",    blue: "rgb(72, 102, 163)",    magenta: "rgb(132, 86, 149)",    cyan: "rgb(53, 127, 141)",    white: "rgb(210, 215, 223)",    brightBlack: "rgb(112, 123, 140)",    brightRed: "rgb(212, 95, 112)",    brightGreen: "rgb(85, 148, 111)",    brightYellow: "rgb(173, 133, 45)",    brightBlue: "rgb(91, 124, 194)",    brightMagenta: "rgb(153, 107, 172)",    brightCyan: "rgb(70, 149, 164)",    brightWhite: "rgb(236, 240, 246)",  };} function getTerminalSelectionRect(mountElement: HTMLElement): DOMRect | null {  const selection = window.getSelection();  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {    return null;  }   const range = selection.getRangeAt(0);  const commonAncestor = range.commonAncestorContainer;  const selectionRoot =    commonAncestor instanceof Element ? commonAncestor : commonAncestor.parentElement;  if (!(selectionRoot instanceof Element) || !mountElement.contains(selectionRoot)) {    return null;  }   const rects = Array.from(range.getClientRects()).filter(    (rect) => rect.width > 0 || rect.height > 0,  );  if (rects.length > 0) {    return rects[rects.length - 1] ?? null;  }   const boundingRect = range.getBoundingClientRect();  return boundingRect.width > 0 || boundingRect.height > 0 ? boundingRect : null;} export function resolveTerminalSelectionActionPosition(options: {  bounds: { left: number; top: number; width: number; height: number };  selectionRect: { right: number; bottom: number } | null;  pointer: { x: number; y: number } | null;  viewport?: { width: number; height: number } | null;}): { x: number; y: number } {  const { bounds, selectionRect, pointer, viewport } = options;  const viewportWidth =    viewport?.width ??    (typeof window === "undefined" ? bounds.left + bounds.width + 8 : window.innerWidth);  const viewportHeight =    viewport?.height ??    (typeof window === "undefined" ? bounds.top + bounds.height + 8 : window.innerHeight);  const drawerLeft = Math.round(bounds.left);  const drawerTop = Math.round(bounds.top);  const drawerRight = Math.round(bounds.left + bounds.width);  const drawerBottom = Math.round(bounds.top + bounds.height);  const preferredX =    selectionRect !== null      ? Math.round(selectionRect.right)      : pointer === null        ? Math.round(bounds.left + bounds.width - 140)        : Math.max(drawerLeft, Math.min(Math.round(pointer.x), drawerRight));  const preferredY =    selectionRect !== null      ? Math.round(selectionRect.bottom + 4)      : pointer === null        ? Math.round(bounds.top + 12)        : Math.max(drawerTop, Math.min(Math.round(pointer.y), drawerBottom));  return {    x: Math.max(8, Math.min(preferredX, Math.max(viewportWidth - 8, 8))),    y: Math.max(8, Math.min(preferredY, Math.max(viewportHeight - 8, 8))),  };} export function terminalSelectionActionDelayForClickCount(clickCount: number): number {  return clickCount >= 2 ? MULTI_CLICK_SELECTION_ACTION_DELAY_MS : 0;} export function shouldHandleTerminalSelectionMouseUp(  selectionGestureActive: boolean,  button: number,): boolean {  return selectionGestureActive && button === 0;} interface TerminalViewportProps {  threadId: ThreadId;  terminalId: string;  terminalLabel: string;  cwd: string;  runtimeEnv?: Record<string, string>;  onSessionExited: () => void;  onAddTerminalContext: (selection: TerminalContextSelection) => void;  focusRequestId: number;  autoFocus: boolean;  resizeEpoch: number;  drawerHeight: number;} function TerminalViewport({  threadId,  terminalId,  terminalLabel,  cwd,  runtimeEnv,  onSessionExited,  onAddTerminalContext,  focusRequestId,  autoFocus,  resizeEpoch,  drawerHeight,}: TerminalViewportProps) {  const containerRef = useRef<HTMLDivElement>(null);  const terminalRef = useRef<Terminal | null>(null);  const fitAddonRef = useRef<FitAddon | null>(null);  const onSessionExitedRef = useRef(onSessionExited);  const onAddTerminalContextRef = useRef(onAddTerminalContext);  const terminalLabelRef = useRef(terminalLabel);  const hasHandledExitRef = useRef(false);  const selectionPointerRef = useRef<{ x: number; y: number } | null>(null);  const selectionGestureActiveRef = useRef(false);  const selectionActionRequestIdRef = useRef(0);  const selectionActionOpenRef = useRef(false);  const selectionActionTimerRef = useRef<number | null>(null);   useEffect(() => {    onSessionExitedRef.current = onSessionExited;  }, [onSessionExited]);   useEffect(() => {    onAddTerminalContextRef.current = onAddTerminalContext;  }, [onAddTerminalContext]);   useEffect(() => {    terminalLabelRef.current = terminalLabel;  }, [terminalLabel]);   useEffect(() => {    const mount = containerRef.current;    if (!mount) return;     let disposed = false;     const fitAddon = new FitAddon();    const terminal = new Terminal({      cursorBlink: true,      lineHeight: 1.2,      fontSize: 12,      scrollback: 5_000,      fontFamily: '"SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace',      theme: terminalThemeFromApp(),    });    terminal.loadAddon(fitAddon);    terminal.open(mount);    fitAddon.fit();     terminalRef.current = terminal;    fitAddonRef.current = fitAddon;     const api = readNativeApi();    if (!api) return;     const clearSelectionAction = () => {      selectionActionRequestIdRef.current += 1;      if (selectionActionTimerRef.current !== null) {        window.clearTimeout(selectionActionTimerRef.current);        selectionActionTimerRef.current = null;      }    };     const readSelectionAction = (): {      position: { x: number; y: number };      selection: TerminalContextSelection;    } | null => {      const activeTerminal = terminalRef.current;      const mountElement = containerRef.current;      if (!activeTerminal || !mountElement || !activeTerminal.hasSelection()) {        return null;      }      const selectionText = activeTerminal.getSelection();      const selectionPosition = activeTerminal.getSelectionPosition();      const normalizedText = selectionText.replace(/\r\n/g, "\n").replace(/^\n+|\n+$/g, "");      if (!selectionPosition || normalizedText.length === 0) {        return null;      }      const lineStart = selectionPosition.start.y + 1;      const lineCount = normalizedText.split("\n").length;      const lineEnd = Math.max(lineStart, lineStart + lineCount - 1);      const bounds = mountElement.getBoundingClientRect();      const selectionRect = getTerminalSelectionRect(mountElement);      const position = resolveTerminalSelectionActionPosition({        bounds,        selectionRect:          selectionRect === null            ? null            : { right: selectionRect.right, bottom: selectionRect.bottom },        pointer: selectionPointerRef.current,      });      return {        position,        selection: {          terminalId,          terminalLabel: terminalLabelRef.current,          lineStart,          lineEnd,          text: normalizedText,        },      };    };     const showSelectionAction = async () => {      if (selectionActionOpenRef.current) {        return;      }      const nextAction = readSelectionAction();      if (!nextAction) {        clearSelectionAction();        return;      }      const requestId = ++selectionActionRequestIdRef.current;      selectionActionOpenRef.current = true;      try {        const clicked = await api.contextMenu.show(          [{ id: "add-to-chat", label: "Add to chat" }],          nextAction.position,        );        if (requestId !== selectionActionRequestIdRef.current || clicked !== "add-to-chat") {          return;        }        onAddTerminalContextRef.current(nextAction.selection);        terminalRef.current?.clearSelection();        terminalRef.current?.focus();      } finally {        selectionActionOpenRef.current = false;      }    };     const sendTerminalInput = async (data: string, fallbackError: string) => {      const activeTerminal = terminalRef.current;      if (!activeTerminal) return;      try {        await api.terminal.write({ threadId, terminalId, data });      } catch (error) {        writeSystemMessage(activeTerminal, error instanceof Error ? error.message : fallbackError);      }    };     terminal.attachCustomKeyEventHandler((event) => {      const navigationData = terminalNavigationShortcutData(event);      if (navigationData !== null) {        event.preventDefault();        event.stopPropagation();        void sendTerminalInput(navigationData, "Failed to move cursor");        return false;      }       if (!isTerminalClearShortcut(event)) return true;      event.preventDefault();      event.stopPropagation();      void sendTerminalInput("\u000c", "Failed to clear terminal");      return false;    });     const terminalLinksDisposable = terminal.registerLinkProvider({      provideLinks: (bufferLineNumber, callback) => {        const activeTerminal = terminalRef.current;        if (!activeTerminal) {          callback(undefined);          return;        }         const line = activeTerminal.buffer.active.getLine(bufferLineNumber - 1);        if (!line) {          callback(undefined);          return;        }         const lineText = line.translateToString(true);        const matches = extractTerminalLinks(lineText);        if (matches.length === 0) {          callback(undefined);          return;        }         callback(          matches.map((match) => ({            text: match.text,            range: {              start: { x: match.start + 1, y: bufferLineNumber },              end: { x: match.end, y: bufferLineNumber },            },            activate: (event: MouseEvent) => {              if (!isTerminalLinkActivation(event)) return;               const latestTerminal = terminalRef.current;              if (!latestTerminal) return;               if (match.kind === "url") {                void api.shell.openExternal(match.text).catch((error) => {                  writeSystemMessage(                    latestTerminal,                    error instanceof Error ? error.message : "Unable to open link",                  );                });                return;              }               const target = resolvePathLinkTarget(match.text, cwd);              void openInPreferredEditor(api, target).catch((error) => {                writeSystemMessage(                  latestTerminal,                  error instanceof Error ? error.message : "Unable to open path",                );              });            },          })),        );      },    });     const inputDisposable = terminal.onData((data) => {      void api.terminal        .write({ threadId, terminalId, data })        .catch((err) =>          writeSystemMessage(            terminal,            err instanceof Error ? err.message : "Terminal write failed",          ),        );    });     const selectionDisposable = terminal.onSelectionChange(() => {      if (terminalRef.current?.hasSelection()) {        return;      }      clearSelectionAction();    });     const handleMouseUp = (event: MouseEvent) => {      const shouldHandle = shouldHandleTerminalSelectionMouseUp(        selectionGestureActiveRef.current,        event.button,      );      selectionGestureActiveRef.current = false;      if (!shouldHandle) {        return;      }      selectionPointerRef.current = { x: event.clientX, y: event.clientY };      const delay = terminalSelectionActionDelayForClickCount(event.detail);      selectionActionTimerRef.current = window.setTimeout(() => {        selectionActionTimerRef.current = null;        window.requestAnimationFrame(() => {          void showSelectionAction();        });      }, delay);    };    const handlePointerDown = (event: PointerEvent) => {      clearSelectionAction();      selectionGestureActiveRef.current = event.button === 0;    };    window.addEventListener("mouseup", handleMouseUp);    mount.addEventListener("pointerdown", handlePointerDown);     const themeObserver = new MutationObserver(() => {      const activeTerminal = terminalRef.current;      if (!activeTerminal) return;      activeTerminal.options.theme = terminalThemeFromApp();      activeTerminal.refresh(0, activeTerminal.rows - 1);    });    themeObserver.observe(document.documentElement, {      attributes: true,      attributeFilter: ["class", "style"],    });     const openTerminal = async () => {      try {        const activeTerminal = terminalRef.current;        const activeFitAddon = fitAddonRef.current;        if (!activeTerminal || !activeFitAddon) return;        activeFitAddon.fit();        const snapshot = await api.terminal.open({          threadId,          terminalId,          cwd,          cols: activeTerminal.cols,          rows: activeTerminal.rows,          ...(runtimeEnv ? { env: runtimeEnv } : {}),        });        if (disposed) return;        activeTerminal.write("\u001bc");        if (snapshot.history.length > 0) {          activeTerminal.write(snapshot.history);        }        if (autoFocus) {          window.requestAnimationFrame(() => {            activeTerminal.focus();          });        }      } catch (err) {        if (disposed) return;        writeSystemMessage(          terminal,          err instanceof Error ? err.message : "Failed to open terminal",

Lines 1–500 of 1173. Load more