Serhii Dziupin
88937ade72
Terminal creation no longer waits for the Ghostty viewport to report its size: it starts the PTY immediately with a container/font-derived provisional size (falling back to 80x24), then resizes once the real viewport dimensions are known, with a dedupe guard while sizing settles. Starting the shell earlier means it can emit device/theme queries before a browser terminal is attached to answer them, so the server now answers primary device attribute queries itself (Fish blocks ~10s on this at startup) and bun-pty buffers output emitted before a data subscriber attaches. Also fixes a few WebSocket transport reconnect races surfaced by session creation now overlapping renderer setup.
1135 lines
50 KiB
TypeScript
1135 lines
50 KiB
TypeScript
import React from 'react';
|
|
|
|
import { useSessionUIStore } from '@/sync/session-ui-store';
|
|
import { EMPTY_TERMINAL_BUFFER, useTerminalStore } from '@/stores/useTerminalStore';
|
|
import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
|
|
import { type TerminalStreamEvent } from '@/lib/api/types';
|
|
import { useThemeSystem } from '@/contexts/useThemeSystem';
|
|
import { useFontPreferences } from '@/hooks/useFontPreferences';
|
|
import { CODE_FONT_OPTION_MAP, DEFAULT_MONO_FONT } from '@/lib/fontOptions';
|
|
import { convertThemeToXterm } from '@/lib/terminalTheme';
|
|
import { TerminalViewport, type TerminalController } from '@/components/terminal/TerminalViewport';
|
|
import { cn } from '@/lib/utils';
|
|
import { useUIStore } from '@/stores/useUIStore';
|
|
import { Button } from '@/components/ui/button';
|
|
import { SortableTabsStrip } from '@/components/ui/sortable-tabs-strip';
|
|
import { Icon } from "@/components/icon/Icon";
|
|
import { useDeviceInfo } from '@/lib/device';
|
|
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
|
|
import { extractTerminalPreviewUrl, isTerminalPreviewUrlAvailable } from '@/lib/terminalPreview';
|
|
import { useI18n } from '@/lib/i18n';
|
|
import { PROJECT_ACTION_ICON_MAP, type ProjectActionIconKey } from '@/lib/projectActions';
|
|
import { useInlineCommentDraftStore } from '@/stores/useInlineCommentDraftStore';
|
|
import { applyTerminalModifier, terminalControlCharacter, terminalSequenceForKey, type TerminalModifier as Modifier, type TerminalQuickKey as MobileKey } from '@/lib/terminalInput';
|
|
|
|
type TerminalViewProps = {
|
|
visible?: boolean;
|
|
};
|
|
|
|
const FALLBACK_TERMINAL_SIZE = { cols: 80, rows: 24 } as const;
|
|
|
|
export const TerminalView: React.FC<TerminalViewProps> = ({ visible }) => {
|
|
const { t } = useI18n();
|
|
const { terminal, runtime } = useRuntimeAPIs();
|
|
const { currentTheme } = useThemeSystem();
|
|
const terminalAppearanceRef = React.useRef<{ themeMode: 'light' | 'dark'; terminalBackground: string; terminalForeground: string }>({ themeMode: 'dark', terminalBackground: '', terminalForeground: '' });
|
|
terminalAppearanceRef.current = { themeMode: currentTheme.metadata.variant === 'light' ? 'light' : 'dark', terminalBackground: currentTheme.colors.surface.background, terminalForeground: currentTheme.colors.syntax.base.foreground };
|
|
const { monoFont } = useFontPreferences();
|
|
const terminalFontSize = useUIStore(state => state.terminalFontSize);
|
|
const terminalShell = useUIStore(state => state.terminalShell);
|
|
const terminalLoginShell = useUIStore(state => state.terminalLoginShells.includes(state.terminalShell));
|
|
const { isMobile, isTablet, hasTouchOnlyPointer } = useDeviceInfo();
|
|
const isTouchTerminal = isMobile || isTablet;
|
|
const useTouchTerminalInput = (isTouchTerminal || hasTouchOnlyPointer) && runtime.platform === 'web';
|
|
// Tabs are supported for web + desktop runtimes, including mobile (not VSCode).
|
|
const enableTabs = runtime.platform !== 'vscode';
|
|
const showTerminalQuickKeysOnDesktop = useUIStore((state) => state.showTerminalQuickKeysOnDesktop);
|
|
const showQuickKeys = isTouchTerminal || showTerminalQuickKeysOnDesktop;
|
|
|
|
const currentSessionId = useSessionUIStore((s) => s.currentSessionId);
|
|
const newSessionDraft = useSessionUIStore((s) => s.newSessionDraft);
|
|
const hasActiveContext = currentSessionId !== null || newSessionDraft?.open === true;
|
|
|
|
const effectiveDirectory = useEffectiveDirectory() ?? null;
|
|
const directoryTerminalState = useTerminalStore((s) => effectiveDirectory ? s.sessions.get(effectiveDirectory) : undefined);
|
|
const terminalHydrated = useTerminalStore((s) => s.hasHydrated);
|
|
const ensureDirectory = useTerminalStore((s) => s.ensureDirectory);
|
|
const createTab = useTerminalStore((s) => s.createTab);
|
|
const setActiveTab = useTerminalStore((s) => s.setActiveTab);
|
|
const closeTab = useTerminalStore((s) => s.closeTab);
|
|
const setTabSessionId = useTerminalStore((s) => s.setTabSessionId);
|
|
const setTabLifecycle = useTerminalStore((s) => s.setTabLifecycle);
|
|
const setConnecting = useTerminalStore((s) => s.setConnecting);
|
|
const appendToBuffer = useTerminalStore((s) => s.appendToBuffer);
|
|
const replaceBuffer = useTerminalStore((s) => s.replaceBuffer);
|
|
const setTabPreviewUrl = useTerminalStore((s) => s.setTabPreviewUrl);
|
|
const addContextDraft = useInlineCommentDraftStore((s) => s.addDraft);
|
|
|
|
const openContextPreview = useUIStore((state) => state.openContextPreview);
|
|
|
|
const activeTabId = React.useMemo(() => {
|
|
if (!directoryTerminalState) return null;
|
|
if (enableTabs) {
|
|
return directoryTerminalState.activeTabId ?? directoryTerminalState.tabs[0]?.id ?? null;
|
|
}
|
|
return directoryTerminalState.tabs[0]?.id ?? null;
|
|
}, [directoryTerminalState, enableTabs]);
|
|
|
|
const activeTab = React.useMemo(() => {
|
|
if (!directoryTerminalState) return undefined;
|
|
if (!activeTabId) return directoryTerminalState.tabs[0];
|
|
return (
|
|
directoryTerminalState.tabs.find((tab) => tab.id === activeTabId) ??
|
|
directoryTerminalState.tabs[0]
|
|
);
|
|
}, [directoryTerminalState, activeTabId]);
|
|
|
|
const terminalTabItems = React.useMemo(() => {
|
|
return (directoryTerminalState?.tabs ?? []).map((tab) => ({
|
|
icon: (() => {
|
|
const tabIconName = tab.iconKey ? PROJECT_ACTION_ICON_MAP[tab.iconKey as ProjectActionIconKey] ?? 'terminal' : 'terminal';
|
|
return <Icon name={tabIconName} className="h-4 w-4" />;
|
|
})(),
|
|
id: tab.id,
|
|
label: tab.label,
|
|
title: tab.label,
|
|
closeLabel: t('terminalView.tabs.closeTabTitle'),
|
|
}));
|
|
}, [directoryTerminalState?.tabs, t]);
|
|
|
|
const terminalSessionId = activeTab?.terminalSessionId ?? null;
|
|
const terminalLifecycle = activeTab?.lifecycle ?? 'idle';
|
|
// Scrollback is a leaf subscription: streaming output must not rerender the tab strip.
|
|
const bufferChunks = useTerminalStore((s) => (
|
|
effectiveDirectory && activeTabId ? s.getBuffer(effectiveDirectory, activeTabId).chunks : EMPTY_TERMINAL_BUFFER.chunks
|
|
));
|
|
const isConnecting = activeTab?.isConnecting ?? false;
|
|
const previewUrl = activeTab?.previewUrl ?? null;
|
|
|
|
const [connectionError, setConnectionError] = React.useState<string | null>(null);
|
|
const [isFatalError, setIsFatalError] = React.useState(false);
|
|
const [isReconnectPending, setIsReconnectPending] = React.useState(false);
|
|
const [activeModifier, setActiveModifier] = React.useState<Modifier | null>(null);
|
|
const [isRestarting, setIsRestarting] = React.useState(false);
|
|
|
|
const streamCleanupRef = React.useRef<(() => void) | null>(null);
|
|
const activeTerminalIdRef = React.useRef<string | null>(null);
|
|
const activeTabIdRef = React.useRef<string | null>(activeTabId);
|
|
const terminalIdRef = React.useRef<string | null>(terminalSessionId);
|
|
const directoryRef = React.useRef<string | null>(effectiveDirectory);
|
|
const terminalControllerRef = React.useRef<TerminalController | null>(null);
|
|
const lastViewportSizeRef = React.useRef<{ cols: number; rows: number } | null>(null);
|
|
const pendingTerminalCreatesRef = React.useRef(new Set<string>());
|
|
const previewScanTailRef = React.useRef('');
|
|
const pendingPreviewProbeUrlsRef = React.useRef<Set<string>>(new Set());
|
|
const previewProbeGenerationRef = React.useRef(0);
|
|
|
|
const resetTerminalPreviewScan = React.useCallback(() => {
|
|
previewScanTailRef.current = '';
|
|
pendingPreviewProbeUrlsRef.current.clear();
|
|
previewProbeGenerationRef.current += 1;
|
|
}, []);
|
|
|
|
const focusTerminalWhenWindowActive = React.useCallback(() => {
|
|
if (useTouchTerminalInput) {
|
|
return;
|
|
}
|
|
if (typeof document !== 'undefined' && !document.hasFocus()) {
|
|
return;
|
|
}
|
|
terminalControllerRef.current?.focus();
|
|
}, [useTouchTerminalInput]);
|
|
|
|
const focusTerminalController = React.useCallback(() => {
|
|
if (useTouchTerminalInput) {
|
|
return;
|
|
}
|
|
terminalControllerRef.current?.focus();
|
|
}, [useTouchTerminalInput]);
|
|
|
|
const activeMainTab = useUIStore((state) => state.activeMainTab);
|
|
const isTerminalActive = activeMainTab === 'terminal';
|
|
const isTerminalVisible = visible ?? isTerminalActive;
|
|
const [hasOpenedTerminalViewport, setHasOpenedTerminalViewport] = React.useState(isTerminalVisible);
|
|
|
|
React.useEffect(() => {
|
|
if (isTerminalVisible) {
|
|
setHasOpenedTerminalViewport(true);
|
|
}
|
|
}, [isTerminalVisible]);
|
|
|
|
React.useEffect(() => {
|
|
terminalIdRef.current = terminalSessionId;
|
|
}, [terminalSessionId]);
|
|
|
|
React.useEffect(() => {
|
|
if (!terminalSessionId || !terminal.updateAppearance) return;
|
|
void terminal.updateAppearance(terminalSessionId, terminalAppearanceRef.current).catch(() => {});
|
|
}, [currentTheme.colors.surface.background, currentTheme.colors.syntax.base.foreground, currentTheme.metadata.variant, terminal, terminalSessionId]);
|
|
|
|
React.useEffect(() => {
|
|
activeTabIdRef.current = activeTabId;
|
|
resetTerminalPreviewScan();
|
|
}, [activeTabId, resetTerminalPreviewScan]);
|
|
|
|
React.useEffect(() => {
|
|
directoryRef.current = effectiveDirectory;
|
|
}, [effectiveDirectory]);
|
|
|
|
React.useEffect(() => {
|
|
if (!showQuickKeys && activeModifier !== null) {
|
|
setActiveModifier(null);
|
|
}
|
|
}, [showQuickKeys, activeModifier, setActiveModifier]);
|
|
|
|
React.useEffect(() => {
|
|
if (!terminalSessionId && activeModifier !== null) {
|
|
setActiveModifier(null);
|
|
}
|
|
}, [terminalSessionId, activeModifier, setActiveModifier]);
|
|
|
|
const disconnectStream = React.useCallback(() => {
|
|
streamCleanupRef.current?.();
|
|
streamCleanupRef.current = null;
|
|
activeTerminalIdRef.current = null;
|
|
setIsReconnectPending(false);
|
|
}, []);
|
|
|
|
React.useEffect(
|
|
() => () => {
|
|
disconnectStream();
|
|
terminalIdRef.current = null;
|
|
},
|
|
[disconnectStream]
|
|
);
|
|
|
|
const scanTerminalPreviewOutput = React.useCallback(
|
|
(directory: string, tabId: string, data: string) => {
|
|
if (!data) {
|
|
return;
|
|
}
|
|
|
|
const combined = `${previewScanTailRef.current}${data}`.replace(/\r\n|\r/g, '\n');
|
|
const lines = combined.split('\n');
|
|
const completeText = combined.endsWith('\n')
|
|
? lines.join('\n')
|
|
: lines.slice(0, -1).join('\n');
|
|
previewScanTailRef.current = combined.endsWith('\n') ? '' : (lines[lines.length - 1] ?? '').slice(-1024);
|
|
|
|
if (!completeText) {
|
|
return;
|
|
}
|
|
|
|
const candidate = extractTerminalPreviewUrl(completeText);
|
|
if (!candidate || pendingPreviewProbeUrlsRef.current.has(candidate)) {
|
|
return;
|
|
}
|
|
|
|
const probeGeneration = previewProbeGenerationRef.current;
|
|
pendingPreviewProbeUrlsRef.current.add(candidate);
|
|
void isTerminalPreviewUrlAvailable(candidate).then((available) => {
|
|
pendingPreviewProbeUrlsRef.current.delete(candidate);
|
|
if (!available || previewProbeGenerationRef.current !== probeGeneration) {
|
|
return;
|
|
}
|
|
|
|
const currentTab = useTerminalStore.getState().getDirectoryState(directory)?.tabs.find((tab) => tab.id === tabId);
|
|
if (!currentTab || currentTab.previewUrlLocked || currentTab.previewUrl === candidate) {
|
|
return;
|
|
}
|
|
|
|
setTabPreviewUrl(directory, tabId, candidate, { locked: false, autoOpened: false });
|
|
});
|
|
},
|
|
[setTabPreviewUrl]
|
|
);
|
|
|
|
const startStream = React.useCallback(
|
|
(
|
|
directory: string,
|
|
tabId: string,
|
|
terminalId: string
|
|
) => {
|
|
if (activeTerminalIdRef.current === terminalId) {
|
|
return;
|
|
}
|
|
|
|
disconnectStream();
|
|
|
|
// Mark active before connect so early events aren't dropped.
|
|
activeTerminalIdRef.current = terminalId;
|
|
|
|
const subscription = terminal.connect(
|
|
terminalId,
|
|
{
|
|
onEvent: (event: TerminalStreamEvent) => {
|
|
if (activeTerminalIdRef.current !== terminalId) {
|
|
return;
|
|
}
|
|
|
|
switch (event.type) {
|
|
case 'snapshot': {
|
|
setConnecting(directory, tabId, false);
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
focusTerminalWhenWindowActive();
|
|
|
|
replaceBuffer(directory, tabId, event.data ?? '', event.sequence ?? 0);
|
|
scanTerminalPreviewOutput(directory, tabId, event.data ?? '');
|
|
if (event.status === 'exited') setTabLifecycle(directory, tabId, 'exited');
|
|
break;
|
|
}
|
|
case 'reconnecting': {
|
|
void event;
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(true);
|
|
break;
|
|
}
|
|
case 'data': {
|
|
if (event.data) {
|
|
appendToBuffer(directory, tabId, event.data, event.sequence, event.replayData);
|
|
scanTerminalPreviewOutput(directory, tabId, event.data);
|
|
}
|
|
break;
|
|
}
|
|
case 'exit': {
|
|
const exitCode =
|
|
typeof event.exitCode === 'number' ? event.exitCode : null;
|
|
const signal = typeof event.signal === 'number' ? event.signal : null;
|
|
const currentTab = useTerminalStore.getState()
|
|
.getDirectoryState(directory)
|
|
?.tabs.find((t) => t.id === tabId);
|
|
const isActionTab = Boolean(currentTab?.label?.startsWith('Action:'));
|
|
appendToBuffer(
|
|
directory,
|
|
tabId,
|
|
t('terminalView.stream.processExitedMessage', {
|
|
exitCodeSegment:
|
|
exitCode !== null
|
|
? t('terminalView.stream.processExitedWithCode', { exitCode })
|
|
: '',
|
|
signalSegment:
|
|
signal !== null
|
|
? t('terminalView.stream.processExitedWithSignal', { signal })
|
|
: '',
|
|
})
|
|
);
|
|
setTabLifecycle(directory, tabId, 'exited');
|
|
setConnecting(directory, tabId, false);
|
|
setConnectionError(isActionTab ? null : t('terminalView.error.sessionEnded'));
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
disconnectStream();
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
onError: (error, fatal) => {
|
|
if (activeTerminalIdRef.current !== terminalId) {
|
|
return;
|
|
}
|
|
|
|
if (!fatal) {
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
return;
|
|
}
|
|
|
|
setIsReconnectPending(false);
|
|
if (error.code === 'SESSION_NOT_FOUND') {
|
|
const currentTab = useTerminalStore.getState().getDirectoryState(directory)?.tabs.find((tab) => tab.id === tabId);
|
|
if (!currentTab?.label?.startsWith('Action:')) {
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setConnecting(directory, tabId, false);
|
|
setTabSessionId(directory, tabId, null);
|
|
setTabLifecycle(directory, tabId, 'idle');
|
|
disconnectStream();
|
|
return;
|
|
}
|
|
}
|
|
setConnectionError(
|
|
t('terminalView.error.connectionFailed', { message: error.message })
|
|
);
|
|
setIsFatalError(true);
|
|
setConnecting(directory, tabId, false);
|
|
setTabLifecycle(directory, tabId, 'exited');
|
|
setTabSessionId(directory, tabId, null);
|
|
disconnectStream();
|
|
},
|
|
}
|
|
);
|
|
|
|
streamCleanupRef.current = () => {
|
|
subscription.close();
|
|
activeTerminalIdRef.current = null;
|
|
};
|
|
},
|
|
[
|
|
appendToBuffer,
|
|
replaceBuffer,
|
|
disconnectStream,
|
|
focusTerminalWhenWindowActive,
|
|
scanTerminalPreviewOutput,
|
|
setConnecting,
|
|
setTabLifecycle,
|
|
setTabSessionId,
|
|
t,
|
|
terminal,
|
|
]
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
if (!terminalHydrated || !hasOpenedTerminalViewport) {
|
|
return;
|
|
}
|
|
|
|
if (!effectiveDirectory) {
|
|
setConnectionError(
|
|
hasActiveContext
|
|
? t('terminalView.empty.noWorkingDirectory')
|
|
: t('terminalView.empty.selectSession')
|
|
);
|
|
disconnectStream();
|
|
return;
|
|
}
|
|
|
|
const ensureSession = async () => {
|
|
const directory = effectiveDirectory;
|
|
if (!directoryRef.current || directoryRef.current !== directory) return;
|
|
|
|
const existingState = useTerminalStore.getState().getDirectoryState(directory);
|
|
if (!existingState) {
|
|
ensureDirectory(directory);
|
|
return;
|
|
}
|
|
|
|
const state = useTerminalStore.getState().getDirectoryState(directory);
|
|
if (!state || state.tabs.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const tabId = enableTabs
|
|
? (state.activeTabId ?? state.tabs[0]?.id ?? null)
|
|
: (state.tabs[0]?.id ?? null);
|
|
if (!tabId) {
|
|
return;
|
|
}
|
|
|
|
const tab = state.tabs.find((t) => t.id === tabId) ?? state.tabs[0];
|
|
const terminalId = tab?.terminalSessionId ?? null;
|
|
const terminalLifecycle = tab?.lifecycle ?? 'idle';
|
|
const isActionTab = Boolean(tab?.label?.startsWith('Action:'));
|
|
const buffer = useTerminalStore.getState().getBuffer(directory, tabId);
|
|
const hasBufferedOutput = buffer.byteLength > 0 || buffer.chunks.length > 0;
|
|
|
|
if (!terminalId) {
|
|
if (terminalLifecycle === 'exited') {
|
|
setConnecting(directory, tabId, false);
|
|
return;
|
|
}
|
|
|
|
if (isActionTab && hasBufferedOutput) {
|
|
setConnecting(directory, tabId, false);
|
|
return;
|
|
}
|
|
|
|
const createKey = `${directory}\u0000${tabId}`;
|
|
if (pendingTerminalCreatesRef.current.has(createKey)) {
|
|
return;
|
|
}
|
|
|
|
// Launch the shell while Ghostty is still loading and fitting.
|
|
// The backend accepts 80x24, then receives the measured size as
|
|
// soon as the viewport is ready.
|
|
const initialSize = lastViewportSizeRef.current ?? FALLBACK_TERMINAL_SIZE;
|
|
pendingTerminalCreatesRef.current.add(createKey);
|
|
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
setConnecting(directory, tabId, true);
|
|
try {
|
|
const session = await terminal.createSession({
|
|
cwd: directory,
|
|
sessionId: tabId,
|
|
cols: initialSize.cols,
|
|
rows: initialSize.rows,
|
|
shell: terminalShell,
|
|
loginShell: terminalLoginShell,
|
|
...terminalAppearanceRef.current,
|
|
});
|
|
|
|
const stillActive =
|
|
!cancelled &&
|
|
directoryRef.current === directory &&
|
|
activeTabIdRef.current === tabId;
|
|
|
|
const owningTab = useTerminalStore.getState().getDirectoryState(directory)?.tabs.find((entry) => entry.id === tabId);
|
|
if (!owningTab) {
|
|
try {
|
|
await terminal.close(session.sessionId);
|
|
} catch { /* ignored */ }
|
|
return;
|
|
}
|
|
|
|
setTabSessionId(directory, tabId, session.sessionId);
|
|
if (!stillActive) return;
|
|
|
|
const viewportSize = lastViewportSizeRef.current;
|
|
if (
|
|
viewportSize &&
|
|
(viewportSize.cols !== initialSize.cols || viewportSize.rows !== initialSize.rows)
|
|
) {
|
|
void terminal.resize({ sessionId: session.sessionId, ...viewportSize }).catch(() => {});
|
|
}
|
|
// Storing the session ID reruns this effect. Let that next
|
|
// effect own stream startup: starting here would be torn
|
|
// down immediately by this effect's cleanup.
|
|
return;
|
|
} catch (error) {
|
|
const owningTab = useTerminalStore.getState().getDirectoryState(directory)?.tabs.find((entry) => entry.id === tabId);
|
|
if (!owningTab || owningTab.terminalSessionId) return;
|
|
|
|
setConnecting(directory, tabId, false);
|
|
// Strict Mode replaces the first effect while its create
|
|
// request is pending. `cancelled` therefore does not mean
|
|
// this tab stopped owning the request; use current store
|
|
// ownership so a rejected create cannot leave it spinning.
|
|
if (directoryRef.current !== directory || activeTabIdRef.current !== tabId) return;
|
|
setConnectionError(
|
|
error instanceof Error
|
|
? error.message
|
|
: t('terminalView.error.startSessionFailed')
|
|
);
|
|
setIsFatalError(true);
|
|
setIsReconnectPending(false);
|
|
return;
|
|
} finally {
|
|
pendingTerminalCreatesRef.current.delete(createKey);
|
|
}
|
|
}
|
|
|
|
if (!terminalId || cancelled) return;
|
|
|
|
terminalIdRef.current = terminalId;
|
|
|
|
startStream(directory, tabId, terminalId);
|
|
};
|
|
|
|
void ensureSession();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
terminalIdRef.current = null;
|
|
disconnectStream();
|
|
};
|
|
}, [
|
|
hasActiveContext,
|
|
effectiveDirectory,
|
|
terminalSessionId,
|
|
terminalLifecycle,
|
|
activeTabId,
|
|
hasOpenedTerminalViewport,
|
|
enableTabs,
|
|
terminalHydrated,
|
|
ensureDirectory,
|
|
setConnecting,
|
|
setTabLifecycle,
|
|
setTabSessionId,
|
|
startStream,
|
|
disconnectStream,
|
|
t,
|
|
terminal,
|
|
terminalLoginShell,
|
|
terminalShell,
|
|
]);
|
|
|
|
React.useEffect(() => {
|
|
if (!isTerminalVisible || useTouchTerminalInput) {
|
|
return;
|
|
}
|
|
|
|
if (typeof window === 'undefined') {
|
|
focusTerminalWhenWindowActive();
|
|
return;
|
|
}
|
|
|
|
const rafId = window.requestAnimationFrame(() => {
|
|
focusTerminalWhenWindowActive();
|
|
});
|
|
|
|
return () => {
|
|
window.cancelAnimationFrame(rafId);
|
|
};
|
|
}, [activeTabId, focusTerminalWhenWindowActive, isTerminalVisible, useTouchTerminalInput]);
|
|
|
|
const handleRestart = React.useCallback(async () => {
|
|
if (!effectiveDirectory) return;
|
|
if (isRestarting) return;
|
|
|
|
const state = useTerminalStore.getState().getDirectoryState(effectiveDirectory);
|
|
const tabId = enableTabs
|
|
? (activeTabId ?? state?.activeTabId ?? state?.tabs[0]?.id ?? null)
|
|
: (state?.tabs[0]?.id ?? null);
|
|
if (!tabId) return;
|
|
const originalSessionId = state?.tabs.find((tab) => tab.id === tabId)?.terminalSessionId ?? null;
|
|
if (!originalSessionId || !terminal.restartSession) return;
|
|
|
|
setIsRestarting(true);
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
|
|
disconnectStream();
|
|
resetTerminalPreviewScan();
|
|
|
|
try {
|
|
const size = lastViewportSizeRef.current ?? FALLBACK_TERMINAL_SIZE;
|
|
const restarted = await terminal.restartSession(originalSessionId, { cwd: effectiveDirectory, shell: terminalShell, loginShell: terminalLoginShell, ...size, ...terminalAppearanceRef.current });
|
|
const owningTab = useTerminalStore.getState().getDirectoryState(effectiveDirectory)?.tabs.find((tab) => tab.id === tabId);
|
|
if (owningTab?.terminalSessionId !== originalSessionId) return;
|
|
setTabSessionId(effectiveDirectory, tabId, restarted.sessionId);
|
|
setTabLifecycle(effectiveDirectory, tabId, 'running');
|
|
if (directoryRef.current !== effectiveDirectory || activeTabIdRef.current !== tabId) return;
|
|
terminalIdRef.current = restarted.sessionId;
|
|
startStream(effectiveDirectory, tabId, restarted.sessionId);
|
|
} catch (error) {
|
|
const owningTab = useTerminalStore.getState().getDirectoryState(effectiveDirectory)?.tabs.find((tab) => tab.id === tabId);
|
|
if (
|
|
owningTab?.terminalSessionId !== originalSessionId
|
|
|| directoryRef.current !== effectiveDirectory
|
|
|| activeTabIdRef.current !== tabId
|
|
) return;
|
|
setConnectionError(
|
|
error instanceof Error ? error.message : t('terminalView.error.restartFailed')
|
|
);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
terminalIdRef.current = originalSessionId;
|
|
startStream(effectiveDirectory, tabId, originalSessionId);
|
|
} finally {
|
|
setIsRestarting(false);
|
|
}
|
|
}, [activeTabId, disconnectStream, effectiveDirectory, enableTabs, isRestarting, resetTerminalPreviewScan, setTabLifecycle, setTabSessionId, startStream, t, terminal, terminalLoginShell, terminalShell]);
|
|
|
|
const handleHardRestart = React.useCallback(async () => {
|
|
// Keep semantics: “close tab -> new clean tab”.
|
|
await handleRestart();
|
|
}, [handleRestart]);
|
|
|
|
const handleCreateTab = React.useCallback(() => {
|
|
if (!effectiveDirectory) return;
|
|
const tabId = createTab(effectiveDirectory);
|
|
setActiveTab(effectiveDirectory, tabId);
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
disconnectStream();
|
|
}, [createTab, disconnectStream, effectiveDirectory, setActiveTab]);
|
|
|
|
const handleAttachSelection = React.useCallback(() => {
|
|
const selection = terminalControllerRef.current?.getSelection();
|
|
const sessionKey = currentSessionId ?? (newSessionDraft?.open ? 'draft' : null);
|
|
if (!selection || !sessionKey || !activeTab || !effectiveDirectory) return;
|
|
addContextDraft({ directory: effectiveDirectory, sessionKey }, {
|
|
source: 'terminal',
|
|
fileLabel: activeTab.label,
|
|
startLine: selection.startLine,
|
|
endLine: selection.endLine,
|
|
code: selection.text,
|
|
language: activeTab.terminalSessionId ?? activeTab.id,
|
|
text: '',
|
|
});
|
|
}, [activeTab, addContextDraft, currentSessionId, effectiveDirectory, newSessionDraft?.open]);
|
|
|
|
const handleSelectTab = React.useCallback(
|
|
(tabId: string) => {
|
|
if (!effectiveDirectory) return;
|
|
setActiveTab(effectiveDirectory, tabId);
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
disconnectStream();
|
|
},
|
|
[disconnectStream, effectiveDirectory, setActiveTab]
|
|
);
|
|
|
|
const handleCloseTab = React.useCallback(
|
|
(tabId: string) => {
|
|
if (!effectiveDirectory) return;
|
|
|
|
if (tabId === activeTabId) {
|
|
disconnectStream();
|
|
}
|
|
|
|
setConnectionError(null);
|
|
setIsFatalError(false);
|
|
setIsReconnectPending(false);
|
|
const sessionId = useTerminalStore.getState().getDirectoryState(effectiveDirectory)?.tabs.find((tab) => tab.id === tabId)?.terminalSessionId;
|
|
void (async () => {
|
|
if (sessionId) await terminal.close(sessionId);
|
|
closeTab(effectiveDirectory, tabId);
|
|
})().catch((error) => setConnectionError(error instanceof Error ? error.message : t('terminalView.error.sessionEnded')));
|
|
},
|
|
[activeTabId, closeTab, disconnectStream, effectiveDirectory, t, terminal]
|
|
);
|
|
|
|
const handleViewportInput = React.useCallback(
|
|
(data: string) => {
|
|
if (!data || isReconnectPending) {
|
|
return;
|
|
}
|
|
|
|
let payload = data;
|
|
let modifierConsumed = false;
|
|
|
|
if (activeModifier && data.length > 0) {
|
|
payload = applyTerminalModifier(data, activeModifier);
|
|
modifierConsumed = true;
|
|
}
|
|
|
|
const terminalId = terminalIdRef.current;
|
|
if (!terminalId) return;
|
|
|
|
void terminal.sendInput(terminalId, payload).catch((error) => {
|
|
if (!isReconnectPending) {
|
|
setConnectionError(
|
|
error instanceof Error ? error.message : t('terminalView.error.sendInputFailed')
|
|
);
|
|
}
|
|
});
|
|
|
|
if (modifierConsumed) {
|
|
setActiveModifier(null);
|
|
focusTerminalController();
|
|
}
|
|
},
|
|
[activeModifier, focusTerminalController, isReconnectPending, setActiveModifier, t, terminal]
|
|
);
|
|
|
|
const handleViewportResize = React.useCallback(
|
|
(cols: number, rows: number) => {
|
|
const previous = lastViewportSizeRef.current;
|
|
if (!previous || previous.cols !== cols || previous.rows !== rows) {
|
|
lastViewportSizeRef.current = { cols, rows };
|
|
}
|
|
if (!isTerminalVisible) {
|
|
return;
|
|
}
|
|
const terminalId = terminalIdRef.current;
|
|
if (!terminalId) return;
|
|
void terminal.resize({ sessionId: terminalId, cols, rows }).catch(() => {});
|
|
},
|
|
[isTerminalVisible, terminal]
|
|
);
|
|
|
|
const handleModifierToggle = React.useCallback(
|
|
(modifier: Modifier) => {
|
|
setActiveModifier((current) => (current === modifier ? null : modifier));
|
|
focusTerminalController();
|
|
},
|
|
[focusTerminalController, setActiveModifier]
|
|
);
|
|
|
|
const handleMobileKeyPress = React.useCallback(
|
|
(key: MobileKey) => {
|
|
const sequence = terminalSequenceForKey(key, activeModifier);
|
|
if (!sequence) {
|
|
return;
|
|
}
|
|
handleViewportInput(sequence);
|
|
setActiveModifier(null);
|
|
focusTerminalController();
|
|
},
|
|
[activeModifier, focusTerminalController, handleViewportInput, setActiveModifier]
|
|
);
|
|
|
|
const QUICK_KEY_MAP = React.useMemo<Record<string, MobileKey>>(() => ({
|
|
Tab: 'tab', Enter: 'enter', ArrowUp: 'arrow-up', ArrowDown: 'arrow-down',
|
|
ArrowLeft: 'arrow-left', ArrowRight: 'arrow-right', Escape: 'esc',
|
|
}), []);
|
|
|
|
const handleQuickKeyDown = React.useCallback((event: KeyboardEvent) => {
|
|
if (event.repeat) return;
|
|
const rawKey = event.key;
|
|
if (!rawKey || rawKey === 'Control' || rawKey === 'Meta' || rawKey === 'Alt' || rawKey === 'Shift') return;
|
|
|
|
const normalizedKey = rawKey.length === 1 ? rawKey.toLowerCase() : rawKey;
|
|
if (normalizedKey in QUICK_KEY_MAP) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleMobileKeyPress(QUICK_KEY_MAP[normalizedKey]);
|
|
return;
|
|
}
|
|
|
|
if (activeModifier !== 'ctrl') return;
|
|
|
|
const code = event.code ?? '';
|
|
const upperKey =
|
|
rawKey.length === 1 && /[a-zA-Z]/.test(rawKey)
|
|
? rawKey.toUpperCase()
|
|
: (code.startsWith('Key') && code.length === 4 ? code.slice(3).toUpperCase() : null);
|
|
|
|
if (upperKey && upperKey.length === 1 && upperKey >= 'A' && upperKey <= 'Z') {
|
|
const controlCode = terminalControlCharacter(upperKey);
|
|
if (!controlCode) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleViewportInput(controlCode);
|
|
setActiveModifier(null);
|
|
focusTerminalController();
|
|
}
|
|
}, [activeModifier, focusTerminalController, handleMobileKeyPress, handleViewportInput, QUICK_KEY_MAP, setActiveModifier]);
|
|
|
|
React.useEffect(() => {
|
|
if (!showQuickKeys || !activeModifier || !terminalSessionId) return;
|
|
window.addEventListener('keydown', handleQuickKeyDown);
|
|
return () => window.removeEventListener('keydown', handleQuickKeyDown);
|
|
}, [activeModifier, handleQuickKeyDown, showQuickKeys, terminalSessionId]);
|
|
|
|
const resolvedFontStack = React.useMemo(() => {
|
|
const defaultStack = CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT].stack;
|
|
if (typeof window === 'undefined') {
|
|
const fallbackDefinition =
|
|
CODE_FONT_OPTION_MAP[monoFont] ?? CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT];
|
|
return fallbackDefinition.stack;
|
|
}
|
|
|
|
const root = window.getComputedStyle(document.documentElement);
|
|
const cssStack = root.getPropertyValue('--font-family-mono');
|
|
if (cssStack && cssStack.trim().length > 0) {
|
|
return cssStack.trim();
|
|
}
|
|
|
|
const definition =
|
|
CODE_FONT_OPTION_MAP[monoFont] ?? CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT];
|
|
return definition.stack ?? defaultStack;
|
|
}, [monoFont]);
|
|
|
|
const xtermTheme = React.useMemo(() => convertThemeToXterm(currentTheme), [currentTheme]);
|
|
|
|
// Viewport identity is the tab, not the PTY session. Including the session id
|
|
// here tore down and rebuilt the Ghostty terminal (WASM VT + canvas + font
|
|
// atlas) a second time the moment `createSession` resolved, doubling the cost
|
|
// of every terminal open. Session changes are handled by the chunk replay path.
|
|
const terminalViewportKey = `${effectiveDirectory ?? 'no-dir'}::${activeTabId ?? 'no-tab'}`;
|
|
|
|
React.useEffect(() => {
|
|
if (!isTerminalVisible || useTouchTerminalInput) {
|
|
return;
|
|
}
|
|
const controller = terminalControllerRef.current;
|
|
if (!controller) {
|
|
return;
|
|
}
|
|
const fitOnce = () => {
|
|
controller.fit();
|
|
};
|
|
if (typeof window !== 'undefined') {
|
|
const rafId = window.requestAnimationFrame(() => {
|
|
fitOnce();
|
|
focusTerminalWhenWindowActive();
|
|
});
|
|
const timeoutIds = [220, 400].map((delay) => window.setTimeout(fitOnce, delay));
|
|
return () => {
|
|
window.cancelAnimationFrame(rafId);
|
|
timeoutIds.forEach((id) => window.clearTimeout(id));
|
|
};
|
|
}
|
|
fitOnce();
|
|
}, [focusTerminalWhenWindowActive, isTerminalVisible, useTouchTerminalInput, terminalViewportKey, terminalSessionId]);
|
|
|
|
React.useEffect(() => {
|
|
if (!isTerminalVisible || !useTouchTerminalInput) return;
|
|
let fitFrame: number | null = null;
|
|
const handleKeyboardSettled = () => {
|
|
if (fitFrame !== null) window.cancelAnimationFrame(fitFrame);
|
|
fitFrame = window.requestAnimationFrame(() => {
|
|
fitFrame = null;
|
|
terminalControllerRef.current?.fit();
|
|
});
|
|
};
|
|
window.addEventListener('oc:keyboard-settled', handleKeyboardSettled);
|
|
return () => {
|
|
window.removeEventListener('oc:keyboard-settled', handleKeyboardSettled);
|
|
if (fitFrame !== null) window.cancelAnimationFrame(fitFrame);
|
|
};
|
|
}, [isTerminalVisible, terminalViewportKey, useTouchTerminalInput]);
|
|
|
|
if (!hasActiveContext) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-4 text-center text-sm text-muted-foreground">
|
|
{t('terminalView.empty.selectSession')}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!effectiveDirectory) {
|
|
return (
|
|
<div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-muted-foreground">
|
|
<p>{t('terminalView.empty.noWorkingDirectoryForSession')}</p>
|
|
<button
|
|
onClick={handleRestart}
|
|
className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
|
|
>
|
|
{t('terminalView.actions.retry')}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const quickKeysDisabled = !terminalSessionId || isConnecting || isRestarting || isReconnectPending;
|
|
const shouldRenderViewport = hasOpenedTerminalViewport;
|
|
const quickKeySize: 'lg' | 'xs' = isTouchTerminal ? 'lg' : 'xs';
|
|
const quickKeyIconClass = isTouchTerminal ? 'w-10 p-0' : 'w-9 p-0';
|
|
const preserveTerminalFocus = (event: React.PointerEvent<HTMLButtonElement>) => {
|
|
if (isTouchTerminal) event.preventDefault();
|
|
};
|
|
const quickKeysControls = (
|
|
<>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="outline"
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleMobileKeyPress('esc')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
{t('terminalView.quickKeys.escape')}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="outline"
|
|
className={quickKeyIconClass}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleMobileKeyPress('tab')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<Icon name="arrow-right" className="h-4 w-4" />
|
|
<span className="sr-only">{t('terminalView.quickKeys.tabAria')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="chip"
|
|
aria-pressed={activeModifier === 'ctrl'}
|
|
className={isTouchTerminal ? 'px-3' : 'px-2'}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleModifierToggle('ctrl')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<span className="text-xs font-medium">{t('terminalView.quickKeys.controlLabel')}</span>
|
|
<span className="sr-only">{t('terminalView.quickKeys.controlModifierAria')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="chip"
|
|
aria-pressed={activeModifier === 'alt'}
|
|
className={isTouchTerminal ? 'px-3' : 'px-2'}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleModifierToggle('alt')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<span className="text-xs font-medium">{t('terminalView.quickKeys.altLabel')}</span>
|
|
<span className="sr-only">{t('terminalView.quickKeys.altModifierAria')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="outline"
|
|
className={quickKeyIconClass}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleMobileKeyPress('arrow-up')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<Icon name="arrow-up"/>
|
|
<span className="sr-only">{t('terminalView.quickKeys.arrowUpAria')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="outline"
|
|
className={quickKeyIconClass}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleMobileKeyPress('arrow-left')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<Icon name="arrow-left"/>
|
|
<span className="sr-only">{t('terminalView.quickKeys.arrowLeftAria')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="outline"
|
|
className={quickKeyIconClass}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleMobileKeyPress('arrow-down')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<Icon name="arrow-down"/>
|
|
<span className="sr-only">{t('terminalView.quickKeys.arrowDownAria')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="outline"
|
|
className={quickKeyIconClass}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleMobileKeyPress('arrow-right')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<Icon name="arrow-right"/>
|
|
<span className="sr-only">{t('terminalView.quickKeys.arrowRightAria')}</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size={quickKeySize}
|
|
variant="outline"
|
|
className={quickKeyIconClass}
|
|
onPointerDown={preserveTerminalFocus}
|
|
onClick={() => handleMobileKeyPress('enter')}
|
|
disabled={quickKeysDisabled}
|
|
>
|
|
<Icon name="arrow-go-back"/>
|
|
<span className="sr-only">{t('terminalView.quickKeys.enterAria')}</span>
|
|
</Button>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div className="flex h-full flex-col overflow-hidden bg-[var(--surface-background)]">
|
|
<div className={cn('app-region-no-drag sticky top-0 z-20 shrink-0 bg-[var(--surface-background)] text-xs', isTouchTerminal ? 'px-3 py-1.5' : 'pl-3 pr-1.5 py-1')}>
|
|
{enableTabs && directoryTerminalState ? (
|
|
<div className="flex items-center gap-2 pl-1 pr-1">
|
|
<div className={cn('min-w-0 flex-1', isTouchTerminal ? 'h-8' : 'h-7')}>
|
|
<SortableTabsStrip
|
|
items={terminalTabItems}
|
|
activeId={activeTabId}
|
|
onSelect={handleSelectTab}
|
|
onClose={handleCloseTab}
|
|
layoutMode="scrollable"
|
|
variant="default"
|
|
className="h-full bg-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
size="xs"
|
|
variant="ghost"
|
|
className={cn('shrink-0', isTouchTerminal ? 'h-8 w-8 p-0' : 'h-7 w-7 p-0')}
|
|
onClick={handleCreateTab}
|
|
title={t('terminalView.tabs.newTabTitle')}
|
|
>
|
|
<Icon name="add" className={`${isTouchTerminal ? 'h-[18px] w-[18px]' : 'h-4 w-4'}`}/>
|
|
</Button>
|
|
|
|
<div className="flex shrink-0 items-center gap-1 overflow-visible">
|
|
<Button type="button" size="xs" variant="ghost" className="h-7 w-7 p-0" onClick={() => void handleRestart()} disabled={isRestarting} title={t('terminalView.actions.restart')} aria-label={t('terminalView.actions.restart')}>
|
|
<Icon name="restart" className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="xs"
|
|
variant="ghost"
|
|
className="h-7 w-7 p-0"
|
|
onClick={handleAttachSelection}
|
|
title={t('terminalView.actions.attachSelection')}
|
|
aria-label={t('terminalView.actions.attachSelection')}
|
|
>
|
|
<Icon name="attachment-2" className="h-4 w-4" />
|
|
</Button>
|
|
{previewUrl ? (
|
|
<Button
|
|
type="button"
|
|
size="xs"
|
|
variant="outline"
|
|
className="h-6 shrink-0 gap-1 px-2"
|
|
onClick={() => {
|
|
if (!effectiveDirectory) return;
|
|
openContextPreview(effectiveDirectory, previewUrl);
|
|
}}
|
|
title={t('terminalView.preview.openTitle')}
|
|
>
|
|
<Icon name="global" className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="whitespace-nowrap">{t('terminalView.preview.open')}</span>
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{!isTouchTerminal && showQuickKeys && enableTabs && directoryTerminalState ? (
|
|
<div className="mt-2 flex flex-wrap items-center gap-1 pl-1 pr-1">
|
|
{quickKeysControls}
|
|
</div>
|
|
) : null}
|
|
|
|
{!isTouchTerminal && showQuickKeys && (!enableTabs || !directoryTerminalState) ? (
|
|
<div className="mt-2 flex flex-wrap items-center gap-1">
|
|
{quickKeysControls}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div
|
|
className="relative flex-1 overflow-hidden"
|
|
style={{ backgroundColor: xtermTheme.background }}
|
|
>
|
|
<div className="h-full w-full box-border pl-4 pr-1.5 pt-3 pb-4">
|
|
{shouldRenderViewport ? (
|
|
<TerminalViewport
|
|
key={terminalViewportKey}
|
|
ref={(controller) => {
|
|
terminalControllerRef.current = controller;
|
|
}}
|
|
sessionKey={terminalViewportKey}
|
|
chunks={bufferChunks}
|
|
onInput={handleViewportInput}
|
|
onResize={handleViewportResize}
|
|
theme={xtermTheme}
|
|
fontFamily={resolvedFontStack}
|
|
fontSize={terminalFontSize}
|
|
enableTouchScroll={useTouchTerminalInput}
|
|
autoFocus={isTerminalVisible}
|
|
isVisible={isTerminalVisible}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
{!isReconnectPending && connectionError && (
|
|
<div className="absolute inset-x-0 bottom-0 bg-[var(--status-error-background)] px-3 py-2 text-xs text-[var(--status-error-foreground)] flex items-center justify-between gap-2">
|
|
<span>{connectionError}</span>
|
|
{isFatalError && isTouchTerminal && (
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
className="h-6 px-2 py-0 text-xs"
|
|
onClick={handleHardRestart}
|
|
disabled={isRestarting}
|
|
title={t('terminalView.actions.hardRestartTitle')}
|
|
type="button"
|
|
>
|
|
{t('terminalView.actions.hardRestart')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{isTouchTerminal && showQuickKeys ? (
|
|
<div className="shrink-0 overflow-x-auto border-t border-border/40 bg-[var(--surface-background)] px-2 pt-1.5 pb-[max(0.375rem,calc(var(--oc-app-bottom-safe,0px)-var(--oc-keyboard-inset,0px)))] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
|
<div className="flex min-w-max items-center gap-1.5">
|
|
{quickKeysControls}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|