import { useAtomValue } from "@effect/atom-react"; import { FitAddon } from "@xterm/addon-fit"; import { isAtomCommandInterrupted, squashAtomCommandFailure, } from "@t3tools/client-runtime/state/runtime"; import { Plus, SquareSplitHorizontal, SquareSplitVertical, TerminalSquare, Trash2, XIcon, } from "lucide-react"; import { type ResolvedKeybindingsConfig, type ScopedThreadRef, type ThreadId, } from "@t3tools/contracts"; import { getTerminalLabel } from "@t3tools/shared/terminalLabels"; import { Terminal, type ITheme } from "@xterm/xterm"; import { type PointerEvent as ReactPointerEvent, type ReactNode, type SetStateAction, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState, } from "react"; import { Popover, PopoverPopup, PopoverTrigger } from "~/components/ui/popover"; import { writeTextToClipboard } from "~/hooks/useCopyToClipboard"; import { cn } from "~/lib/utils"; import { type TerminalContextSelection } from "~/lib/terminalContext"; import { useOpenInPreferredEditor } from "../editorPreferences"; import { collectWrappedTerminalLinkLine, extractTerminalLinks, isTerminalLinkActivation, resolvePathLinkTarget, resolveWrappedTerminalLinkRange, wrappedTerminalLinkRangeIntersectsBufferLine, } from "../terminal-links"; import { isDiffToggleShortcut, isTerminalClearShortcut, isTerminalCloseShortcut, isTerminalNewShortcut, isTerminalSplitShortcut, isTerminalSplitVerticalShortcut, isTerminalToggleShortcut, terminalDeleteShortcutData, terminalNavigationShortcutData, } from "../keybindings"; import { DEFAULT_THREAD_TERMINAL_HEIGHT, MAX_TERMINALS_PER_GROUP, type ThreadTerminalGroup, } from "../types"; import { readLocalApi } from "~/localApi"; import { useAttachedTerminalSession } from "../state/terminalSessions"; import { serverEnvironment } from "../state/server"; import { previewEnvironment } from "../state/preview"; import { terminalEnvironment } from "../state/terminal"; import { openTerminalLinkInPreview } from "./preview/openTerminalLinkInPreview"; import { useAtomCommand } from "../state/use-atom-command"; 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 writeTerminalBuffer(terminal: Terminal, buffer: string): void { terminal.write("\u001bc"); if (buffer.length > 0) { terminal.write(buffer); } } function fitTerminalSafely(fitAddon: FitAddon): boolean { try { fitAddon.fit(); return true; } catch { return false; } } function runtimeEnvSignature(runtimeEnv: Record | undefined): string { if (!runtimeEnv) return ""; return JSON.stringify( Object.entries(runtimeEnv) .filter(([key, value]) => key.length > 0 && typeof value === "string") .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)), ); } function normalizeComputedColor(value: string | null | undefined, fallback: string): string { const normalizedValue = value?.trim().toLowerCase(); if ( !normalizedValue || normalizedValue === "transparent" || normalizedValue === "rgba(0, 0, 0, 0)" || normalizedValue === "rgba(0 0 0 / 0)" ) { return fallback; } return value ?? fallback; } function terminalThemeFromApp(mountElement?: HTMLElement | null): ITheme { const isDark = document.documentElement.classList.contains("dark"); const fallbackBackground = isDark ? "rgb(14, 18, 24)" : "rgb(255, 255, 255)"; const fallbackForeground = isDark ? "rgb(237, 241, 247)" : "rgb(28, 33, 41)"; const drawerSurface = mountElement?.closest(".thread-terminal-drawer") ?? document.querySelector(".thread-terminal-drawer") ?? document.body; const drawerStyles = getComputedStyle(drawerSurface); const bodyStyles = getComputedStyle(document.body); const background = normalizeComputedColor( drawerStyles.backgroundColor, normalizeComputedColor(bodyStyles.backgroundColor, fallbackBackground), ); const foreground = normalizeComputedColor( drawerStyles.color, normalizeComputedColor(bodyStyles.color, fallbackForeground), ); 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 { threadRef: ScopedThreadRef; threadId: ThreadId; terminalId: string; terminalLabel: string; cwd: string; worktreePath?: string | null; runtimeEnv?: Record; onSessionExited: () => void; onAddTerminalContext: (selection: TerminalContextSelection) => void; focusRequestId: number; autoFocus: boolean; resizeEpoch: number; drawerHeight: number; keybindings: ResolvedKeybindingsConfig; } interface TerminalLaunchLocation { readonly cwd: string; readonly worktreePath?: string | null; readonly runtimeEnv?: Record; } export function TerminalViewport({ threadRef, threadId, terminalId, terminalLabel, cwd, worktreePath, runtimeEnv, onSessionExited, onAddTerminalContext, focusRequestId, autoFocus, resizeEpoch, drawerHeight, keybindings, }: TerminalViewportProps) { const containerRef = useRef(null); const terminalRef = useRef(null); const fitAddonRef = useRef(null); const environmentId = threadRef.environmentId; const serverConfig = useAtomValue(serverEnvironment.configValueAtom(environmentId)); const openInPreferredEditor = useOpenInPreferredEditor( environmentId, serverConfig?.availableEditors ?? [], ); const openTerminalPath = useEffectEvent((target: string) => openInPreferredEditor(target)); const openPreview = useAtomCommand(previewEnvironment.open, { reportFailure: false, }); const runTerminalWrite = useAtomCommand(terminalEnvironment.write, { reportFailure: false, }); const runTerminalResize = useAtomCommand(terminalEnvironment.resize, { reportFailure: false, }); const hasHandledExitRef = useRef(false); const selectionPointerRef = useRef<{ x: number; y: number } | null>(null); const selectionGestureActiveRef = useRef(false); const selectionActionRequestIdRef = useRef(0); const selectionActionMenuOpenRef = useRef(false); const selectionActionTimerRef = useRef(null); const keybindingsRef = useRef(keybindings); const runtimeEnvKey = useMemo(() => runtimeEnvSignature(runtimeEnv), [runtimeEnv]); const handleSessionExited = useEffectEvent(() => { onSessionExited(); }); const handleAddTerminalContext = useEffectEvent((selection: TerminalContextSelection) => { onAddTerminalContext(selection); }); const readTerminalLabel = useEffectEvent(() => terminalLabel); const terminalSession = useAttachedTerminalSession({ environmentId, terminal: { threadId, terminalId, cwd, ...(worktreePath !== undefined ? { worktreePath } : {}), ...(runtimeEnv ? { env: runtimeEnv } : {}), }, }); const writeTerminal = useEffectEvent((data: string) => runTerminalWrite({ environmentId, input: { threadId, terminalId, data }, }), ); const resizeTerminal = useEffectEvent((cols: number, rows: number) => runTerminalResize({ environmentId, input: { threadId, terminalId, cols, rows }, }), ); const terminalBuffer = terminalSession.buffer; const terminalError = terminalSession.error; const terminalStatus = terminalSession.status; const terminalVersion = terminalSession.version; const previousSessionRef = useRef({ buffer: terminalBuffer, error: terminalError, status: terminalStatus, version: terminalVersion, }); useEffect(() => { keybindingsRef.current = keybindings; }, [keybindings]); useEffect(() => { const mount = containerRef.current; if (!mount) return; const localApi = readLocalApi(); const fitAddon = new FitAddon(); const terminal = new Terminal({ cursorBlink: true, lineHeight: 1, fontSize: 12, scrollback: 5_000, fontFamily: '"SF Mono", "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace', theme: terminalThemeFromApp(mount), }); terminal.loadAddon(fitAddon); terminal.open(mount); fitTerminalSafely(fitAddon); terminalRef.current = terminal; fitAddonRef.current = fitAddon; previousSessionRef.current = { buffer: "", status: "closed", error: null, version: 0, }; const clearSelectionAction = () => { selectionActionRequestIdRef.current += 1; if (selectionActionTimerRef.current !== null) { window.clearTimeout(selectionActionTimerRef.current); selectionActionTimerRef.current = null; } }; const readSelectionAction = (): { position: { x: number; y: number }; clipboardText: string; 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, clipboardText: selectionText, selection: { terminalId, terminalLabel: readTerminalLabel(), lineStart, lineEnd, text: normalizedText, }, }; }; const showSelectionAction = async () => { if (!localApi) { clearSelectionAction(); return; } if (selectionActionMenuOpenRef.current) { return; } const nextAction = readSelectionAction(); if (!nextAction) { clearSelectionAction(); return; } const requestId = ++selectionActionRequestIdRef.current; selectionActionMenuOpenRef.current = true; const clicked = await localApi.contextMenu .show( [ { id: "add-to-chat", label: "Add to chat" }, { id: "copy", label: "Copy" }, ], nextAction.position, ) .finally(() => { selectionActionMenuOpenRef.current = false; }); if (requestId !== selectionActionRequestIdRef.current || clicked === null) { return; } switch (clicked) { case "add-to-chat": handleAddTerminalContext(nextAction.selection); terminalRef.current?.clearSelection(); terminalRef.current?.focus(); return; case "copy": try { await writeTextToClipboard(nextAction.clipboardText, "terminal selection"); } catch (error) { if (requestId !== selectionActionRequestIdRef.current) { return; } const activeTerminal = terminalRef.current; if (activeTerminal) { writeSystemMessage( activeTerminal, error instanceof Error ? error.message : "Unable to copy terminal selection", ); } } if (requestId === selectionActionRequestIdRef.current) { terminalRef.current?.focus(); } return; } }; const sendTerminalInput = async (data: string, fallbackError: string) => { const activeTerminal = terminalRef.current; if (!activeTerminal) return; const result = await writeTerminal(data); if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) { const error = squashAtomCommandFailure(result); writeSystemMessage(activeTerminal, error instanceof Error ? error.message : fallbackError); } }; terminal.attachCustomKeyEventHandler((event) => { const currentKeybindings = keybindingsRef.current; const options = { context: { terminalFocus: true, terminalOpen: true } }; if ( isTerminalToggleShortcut(event, currentKeybindings, options) || isTerminalSplitShortcut(event, currentKeybindings, options) || isTerminalSplitVerticalShortcut(event, currentKeybindings, options) || isTerminalNewShortcut(event, currentKeybindings, options) || isTerminalCloseShortcut(event, currentKeybindings, options) || isDiffToggleShortcut(event, currentKeybindings, options) ) { return false; } const navigationData = terminalNavigationShortcutData(event); if (navigationData !== null) { event.preventDefault(); event.stopPropagation(); void sendTerminalInput(navigationData, "Failed to move cursor"); return false; } const deleteData = terminalDeleteShortcutData(event); if (deleteData !== null) { event.preventDefault(); event.stopPropagation(); void sendTerminalInput(deleteData, "Failed to delete terminal input"); 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 wrappedLine = collectWrappedTerminalLinkLine(bufferLineNumber, (bufferLineIndex) => activeTerminal.buffer.active.getLine(bufferLineIndex), ); if (!wrappedLine) { callback(undefined); return; } const links = extractTerminalLinks(wrappedLine.text) .map((match) => ({ match, range: resolveWrappedTerminalLinkRange(wrappedLine, match), })) .filter(({ range }) => wrappedTerminalLinkRangeIntersectsBufferLine(range, bufferLineNumber), ); if (links.length === 0) { callback(undefined); return; } callback( links.map(({ match, range }) => ({ text: match.text, range, activate: (event: MouseEvent) => { if (!isTerminalLinkActivation(event)) return; const latestTerminal = terminalRef.current; if (!latestTerminal) return; if (match.kind === "url") { if (!localApi) { writeSystemMessage( latestTerminal, "Opening links is unavailable in this browser.", ); return; } const fallbackToBrowser = () => { void localApi.shell.openExternal(match.text).catch((error: unknown) => { writeSystemMessage( latestTerminal, error instanceof Error ? error.message : "Unable to open link", ); }); }; void openTerminalLinkInPreview({ url: match.text, position: { x: event.clientX, y: event.clientY }, threadRef, openPreview, localApi, fallbackToBrowser, }); return; } const target = resolvePathLinkTarget(match.text, cwd); void (async () => { const result = await openTerminalPath(target); if (result._tag === "Success" || isAtomCommandInterrupted(result)) { return; } const error = squashAtomCommandFailure(result); writeSystemMessage( latestTerminal, error instanceof Error ? error.message : "Unable to open path", ); })(); }, })), ); }, }); const inputDisposable = terminal.onData((data) => { void (async () => { const result = await writeTerminal(data); if (result._tag === "Success" || isAtomCommandInterrupted(result)) { return; } const error = squashAtomCommandFailure(result); writeSystemMessage( terminal, error instanceof Error ? error.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(containerRef.current); activeTerminal.refresh(0, activeTerminal.rows - 1); }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"], }); const fitTimer = window.setTimeout(() => { const activeTerminal = terminalRef.current; const activeFitAddon = fitAddonRef.current; if (!activeTerminal || !activeFitAddon) return; const wasAtBottom = activeTerminal.buffer.active.viewportY >= activeTerminal.buffer.active.baseY; fitTerminalSafely(activeFitAddon); if (wasAtBottom) { activeTerminal.scrollToBottom(); } void resizeTerminal(activeTerminal.cols, activeTerminal.rows); }, 30); return () => { window.clearTimeout(fitTimer); inputDisposable.dispose(); selectionDisposable.dispose(); terminalLinksDisposable.dispose(); if (selectionActionTimerRef.current !== null) { window.clearTimeout(selectionActionTimerRef.current); } window.removeEventListener("mouseup", handleMouseUp); mount.removeEventListener("pointerdown", handlePointerDown); themeObserver.disconnect(); terminalRef.current = null; fitAddonRef.current = null; terminal.dispose(); }; // autoFocus is intentionally omitted; // it is only read at mount time and must not trigger terminal teardown/recreation. // eslint-disable-next-line react-hooks/exhaustive-deps }, [cwd, environmentId, runtimeEnvKey, terminalId, threadId, worktreePath]); useEffect(() => { const terminal = terminalRef.current; const current = { buffer: terminalBuffer, error: terminalError, status: terminalStatus, version: terminalVersion, }; if (!terminal) { previousSessionRef.current = current; return; } const previous = previousSessionRef.current; if (current.version === previous.version) { return; } if ( current.buffer.length >= previous.buffer.length && current.buffer.startsWith(previous.buffer) ) { terminal.write(current.buffer.slice(previous.buffer.length)); } else { writeTerminalBuffer(terminal, current.buffer); } terminal.clearSelection(); if (current.error !== null && current.error !== previous.error) { writeSystemMessage(terminal, current.error); } if (current.status === "running") { hasHandledExitRef.current = false; } else if ( (current.status === "closed" || current.status === "exited") && current.status !== previous.status && !hasHandledExitRef.current ) { hasHandledExitRef.current = true; writeSystemMessage( terminal, current.status === "closed" ? "Terminal closed" : "Process exited", ); window.setTimeout(() => { if (hasHandledExitRef.current) { handleSessionExited(); } }, 0); } if (previous.version === 0 && autoFocus) { window.requestAnimationFrame(() => { terminal.focus(); }); } previousSessionRef.current = current; }, [autoFocus, terminalBuffer, terminalError, terminalStatus, terminalVersion]); useEffect(() => { if (!autoFocus) return; const terminal = terminalRef.current; if (!terminal) return; const frame = window.requestAnimationFrame(() => { terminal.focus(); }); return () => { window.cancelAnimationFrame(frame); }; }, [autoFocus, focusRequestId]); useEffect(() => { const terminal = terminalRef.current; const fitAddon = fitAddonRef.current; if (!terminal || !fitAddon) return; const wasAtBottom = terminal.buffer.active.viewportY >= terminal.buffer.active.baseY; const frame = window.requestAnimationFrame(() => { fitTerminalSafely(fitAddon); if (wasAtBottom) { terminal.scrollToBottom(); } void resizeTerminal(terminal.cols, terminal.rows); }); return () => { window.cancelAnimationFrame(frame); }; }, [drawerHeight, environmentId, resizeEpoch, terminalId, threadId]); return (
); } interface ThreadTerminalDrawerProps { mode?: "drawer" | "panel"; threadRef: ScopedThreadRef; threadId: ThreadId; cwd: string; worktreePath?: string | null; runtimeEnv?: Record; visible?: boolean; height: number; terminalIds: string[]; activeTerminalId: string; terminalGroups: ThreadTerminalGroup[]; activeTerminalGroupId: string; focusRequestId: number; onSplitTerminal: () => void; onSplitTerminalVertical: () => void; onNewTerminal: () => void; splitShortcutLabel?: string | undefined; splitVerticalShortcutLabel?: string | undefined; newShortcutLabel?: string | undefined; closeShortcutLabel?: string | undefined; onActiveTerminalChange: (terminalId: string) => void; onCloseTerminal: (terminalId: string) => void; onHeightChange: (height: number) => void; onAddTerminalContext: (selection: TerminalContextSelection) => void; keybindings: ResolvedKeybindingsConfig; /** Prefer server-provided tab titles when present (e.g. active subprocess name). */ terminalLabelsById?: ReadonlyMap; /** Prefer per-session launch locations when the server already knows a terminal. */ terminalLaunchLocationsById?: ReadonlyMap; } interface TerminalActionButtonProps { label: string; className: string; onClick: () => void; children: ReactNode; } function TerminalActionButton({ label, className, onClick, children }: TerminalActionButtonProps) { return ( } > {children} {label} ); } export default function ThreadTerminalDrawer({ mode = "drawer", threadRef, threadId, cwd, worktreePath, runtimeEnv, visible = true, height, terminalIds, activeTerminalId, terminalGroups, activeTerminalGroupId, focusRequestId, onSplitTerminal, onSplitTerminalVertical, onNewTerminal, splitShortcutLabel, splitVerticalShortcutLabel, newShortcutLabel, closeShortcutLabel, onActiveTerminalChange, onCloseTerminal, onHeightChange, onAddTerminalContext, keybindings, terminalLabelsById, terminalLaunchLocationsById, }: ThreadTerminalDrawerProps) { const isPanel = mode === "panel"; const controlledDrawerHeight = clampDrawerHeight(height); const [drawerHeightState, setDrawerHeightState] = useState(() => ({ threadId, height: controlledDrawerHeight, })); const drawerHeight = drawerHeightState.threadId === threadId ? drawerHeightState.height : controlledDrawerHeight; const setDrawerHeight = useCallback( (update: SetStateAction) => { setDrawerHeightState((current) => { const currentHeight = current.threadId === threadId ? current.height : controlledDrawerHeight; const nextHeight = typeof update === "function" ? update(currentHeight) : update; return nextHeight === currentHeight && current.threadId === threadId ? current : { threadId, height: nextHeight }; }); }, [controlledDrawerHeight, threadId], ); const setDrawerHeightFromWindowResize = useEffectEvent((nextHeight: number) => { setDrawerHeight(nextHeight); }); const [resizeEpoch, setResizeEpoch] = useState(0); const drawerHeightRef = useRef(drawerHeight); const lastSyncedHeightRef = useRef(controlledDrawerHeight); const onHeightChangeRef = useRef(onHeightChange); const resizeStateRef = useRef<{ pointerId: number; startY: number; startHeight: number; } | null>(null); const didResizeDuringDragRef = useRef(false); const normalizedTerminalIds = useMemo(() => { const normalizedIds: string[] = []; const seen = new Set(); for (const id of terminalIds) { const trimmedId = id.trim(); if (trimmedId.length === 0 || seen.has(trimmedId)) continue; seen.add(trimmedId); normalizedIds.push(trimmedId); } return normalizedIds; }, [terminalIds]); const resolvedActiveTerminalId = normalizedTerminalIds.length === 0 ? "" : normalizedTerminalIds.includes(activeTerminalId) ? activeTerminalId : (normalizedTerminalIds[0] ?? ""); const resolvedTerminalGroups = useMemo(() => { if (normalizedTerminalIds.length === 0) { return []; } const validTerminalIdSet = new Set(normalizedTerminalIds); const assignedTerminalIds = new Set(); const usedGroupIds = new Set(); const nextGroups: ThreadTerminalGroup[] = []; const assignUniqueGroupId = (groupId: string): string => { if (!usedGroupIds.has(groupId)) { usedGroupIds.add(groupId); return groupId; } let suffix = 2; while (usedGroupIds.has(`${groupId}-${suffix}`)) { suffix += 1; } const uniqueGroupId = `${groupId}-${suffix}`; usedGroupIds.add(uniqueGroupId); return uniqueGroupId; }; for (const terminalGroup of terminalGroups) { const nextTerminalIds: string[] = []; const seenGroupTerminalIds = new Set(); for (const id of terminalGroup.terminalIds) { const terminalId = id.trim(); if (terminalId.length === 0) continue; if (seenGroupTerminalIds.has(terminalId)) continue; seenGroupTerminalIds.add(terminalId); if (!validTerminalIdSet.has(terminalId)) continue; if (assignedTerminalIds.has(terminalId)) continue; nextTerminalIds.push(terminalId); } if (nextTerminalIds.length === 0) continue; for (const terminalId of nextTerminalIds) { assignedTerminalIds.add(terminalId); } const baseGroupId = terminalGroup.id.trim().length > 0 ? terminalGroup.id.trim() : `group-${nextTerminalIds[0] ?? normalizedTerminalIds[0] ?? ""}`; nextGroups.push({ id: assignUniqueGroupId(baseGroupId), terminalIds: nextTerminalIds, ...(terminalGroup.splitDirection === "vertical" ? { splitDirection: "vertical" as const } : {}), }); } for (const terminalId of normalizedTerminalIds) { if (assignedTerminalIds.has(terminalId)) continue; nextGroups.push({ id: assignUniqueGroupId(`group-${terminalId}`), terminalIds: [terminalId], }); } const terminalOrderIndex = new Map( normalizedTerminalIds.map((id, index) => [id, index] as const), ); nextGroups.sort((left, right) => { const rank = (ids: readonly string[]) => Math.min(...ids.map((id) => terminalOrderIndex.get(id) ?? Number.POSITIVE_INFINITY)); return rank(left.terminalIds) - rank(right.terminalIds); }); return nextGroups; }, [normalizedTerminalIds, terminalGroups]); const resolvedActiveGroupIndex = useMemo(() => { const indexById = resolvedTerminalGroups.findIndex( (terminalGroup) => terminalGroup.id === activeTerminalGroupId, ); if (indexById >= 0) return indexById; const indexByTerminal = resolvedTerminalGroups.findIndex((terminalGroup) => terminalGroup.terminalIds.includes(resolvedActiveTerminalId), ); return indexByTerminal >= 0 ? indexByTerminal : 0; }, [activeTerminalGroupId, resolvedActiveTerminalId, resolvedTerminalGroups]); const visibleTerminalIds = resolvedTerminalGroups[resolvedActiveGroupIndex]?.terminalIds ?? (normalizedTerminalIds.length > 0 ? [resolvedActiveTerminalId] : []); const splitDirection = resolvedTerminalGroups[resolvedActiveGroupIndex]?.splitDirection ?? "horizontal"; const hasTerminalSidebar = normalizedTerminalIds.length > 1; const isSplitView = visibleTerminalIds.length > 1; const showGroupHeaders = resolvedTerminalGroups.length > 1 || resolvedTerminalGroups.some((terminalGroup) => terminalGroup.terminalIds.length > 1); const hasReachedSplitLimit = visibleTerminalIds.length >= MAX_TERMINALS_PER_GROUP; const terminalLabelById = useMemo(() => { const next = new Map(); for (const terminalId of normalizedTerminalIds) { next.set(terminalId, terminalLabelsById?.get(terminalId) ?? getTerminalLabel(terminalId)); } return next; }, [normalizedTerminalIds, terminalLabelsById]); const resolveTerminalLaunchLocation = useCallback( (terminalId: string): TerminalLaunchLocation => { return ( terminalLaunchLocationsById?.get(terminalId) ?? { cwd, ...(worktreePath !== undefined ? { worktreePath } : {}), ...(runtimeEnv ? { runtimeEnv } : {}), } ); }, [cwd, runtimeEnv, terminalLaunchLocationsById, worktreePath], ); const splitTerminalActionLabel = hasReachedSplitLimit ? `Split Terminal Horizontally (max ${MAX_TERMINALS_PER_GROUP} per group)` : splitShortcutLabel ? `Split Terminal Horizontally (${splitShortcutLabel})` : "Split Terminal Horizontally"; const splitTerminalVerticalActionLabel = hasReachedSplitLimit ? `Split Terminal Vertically (max ${MAX_TERMINALS_PER_GROUP} per group)` : splitVerticalShortcutLabel ? `Split Terminal Vertically (${splitVerticalShortcutLabel})` : "Split Terminal Vertically"; const newTerminalActionLabel = newShortcutLabel ? `New Terminal (${newShortcutLabel})` : "New Terminal"; const closeTerminalActionLabel = closeShortcutLabel ? `Close Terminal (${closeShortcutLabel})` : "Close Terminal"; const onSplitTerminalAction = useCallback(() => { if (hasReachedSplitLimit) return; onSplitTerminal(); }, [hasReachedSplitLimit, onSplitTerminal]); const onSplitTerminalVerticalAction = useCallback(() => { if (hasReachedSplitLimit) return; onSplitTerminalVertical(); }, [hasReachedSplitLimit, onSplitTerminalVertical]); const onNewTerminalAction = useCallback(() => { onNewTerminal(); }, [onNewTerminal]); useEffect(() => { onHeightChangeRef.current = onHeightChange; }, [onHeightChange]); useEffect(() => { drawerHeightRef.current = drawerHeight; }, [drawerHeight]); const syncHeight = useCallback((nextHeight: number) => { const clampedHeight = clampDrawerHeight(nextHeight); if (lastSyncedHeightRef.current === clampedHeight) return; lastSyncedHeightRef.current = clampedHeight; onHeightChangeRef.current(clampedHeight); }, []); useEffect(() => { lastSyncedHeightRef.current = controlledDrawerHeight; }, [controlledDrawerHeight, threadId]); const handleResizePointerDown = useCallback((event: ReactPointerEvent) => { if (event.button !== 0) return; event.preventDefault(); event.currentTarget.setPointerCapture(event.pointerId); didResizeDuringDragRef.current = false; resizeStateRef.current = { pointerId: event.pointerId, startY: event.clientY, startHeight: drawerHeightRef.current, }; }, []); const handleResizePointerMove = useCallback( (event: ReactPointerEvent) => { const resizeState = resizeStateRef.current; if (!resizeState || resizeState.pointerId !== event.pointerId) return; event.preventDefault(); const clampedHeight = clampDrawerHeight( resizeState.startHeight + (resizeState.startY - event.clientY), ); if (clampedHeight === drawerHeightRef.current) { return; } didResizeDuringDragRef.current = true; drawerHeightRef.current = clampedHeight; setDrawerHeight(clampedHeight); }, [setDrawerHeight], ); const handleResizePointerEnd = useCallback( (event: ReactPointerEvent) => { const resizeState = resizeStateRef.current; if (!resizeState || resizeState.pointerId !== event.pointerId) return; resizeStateRef.current = null; if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } if (!didResizeDuringDragRef.current) { return; } syncHeight(drawerHeightRef.current); setResizeEpoch((value) => value + 1); }, [syncHeight], ); useEffect(() => { if (!visible) { return; } const onWindowResize = () => { const clampedHeight = clampDrawerHeight(drawerHeightRef.current); const changed = clampedHeight !== drawerHeightRef.current; if (changed) { setDrawerHeightFromWindowResize(clampedHeight); drawerHeightRef.current = clampedHeight; } if (!resizeStateRef.current) { syncHeight(clampedHeight); } setResizeEpoch((value) => value + 1); }; window.addEventListener("resize", onWindowResize); return () => { window.removeEventListener("resize", onWindowResize); }; }, [syncHeight, visible]); useEffect(() => { if (!visible) { return; } setResizeEpoch((value) => value + 1); }, [visible]); useEffect(() => { return () => { syncHeight(drawerHeightRef.current); }; }, [syncHeight]); if (normalizedTerminalIds.length === 0) { return ( ); } const activeTerminalLaunchLocation = resolveTerminalLaunchLocation(resolvedActiveTerminalId); return ( ); }