Skip to content

Commit 2b96682

Browse files
echobtechobt
committed
refactor: split TerminalPanel into modules and integrate terminal splits
Extract TerminalPanel.tsx from 2465 lines to 296 lines (under 300 limit) by splitting into focused modules: - TerminalPanelTypes.ts: Types, constants, and utilities - OutputStreamProcessor.ts: Chunked output processing with flow control - FilePathLinkProvider.ts: Clickable file path links in terminal output - TerminalInstanceManager.ts: Terminal lifecycle, xterm init, events, cleanup - TerminalSuggestionHandler.ts: Suggestion selection logic - TerminalPanelOverlays.tsx: Overlay JSX (dialogs, decorations, split toolbar) - TerminalStyles.ts: CSS styles extracted from inline style block - TerminalEventHandlers.ts: Keyboard and event handler factories Integrate terminal split view using existing useTerminalSplits hook and TerminalSplitView component. Supports horizontal/vertical splits, resizable panes, and Ctrl+Shift+5 keyboard shortcut. Update terminal/index.ts with all new module exports.
1 parent dd56653 commit 2b96682

10 files changed

+1598
-2308
lines changed

‎src/components/TerminalPanel.tsx‎

Lines changed: 139 additions & 2308 deletions
Large diffs are not rendered by default.

‎src/components/terminal/FilePathLinkProvider.ts‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/**
2+
* File path link provider for terminal.
3+
* Detects local file paths in terminal output and makes them clickable.
4+
*/
5+
6+
import type { ILinkProvider, ILink, IBufferRange } from "@xterm/xterm";
7+
import { Terminal as XTerm } from "@xterm/xterm";
8+
import { tokens } from "@/design-system/tokens";
9+
10+
export class FilePathLinkProvider implements ILinkProvider {
11+
private terminal: XTerm;
12+
private onOpenFile: (path: string, line?: number, column?: number) => void;
13+
private hoverTooltip: HTMLDivElement | null = null;
14+
15+
constructor(
16+
terminal: XTerm,
17+
onOpenFile: (path: string, line?: number, column?: number) => void
18+
) {
19+
this.terminal = terminal;
20+
this.onOpenFile = onOpenFile;
21+
}
22+
23+
provideLinks(
24+
bufferLineNumber: number,
25+
callback: (links: ILink[] | undefined) => void
26+
): void {
27+
const buffer = this.terminal.buffer.active;
28+
const line = buffer.getLine(bufferLineNumber);
29+
if (!line) {
30+
callback(undefined);
31+
return;
32+
}
33+
34+
const lineText = line.translateToString();
35+
if (!lineText || lineText.trim().length === 0) {
36+
callback(undefined);
37+
return;
38+
}
39+
40+
const links: ILink[] = [];
41+
42+
const patterns = [
43+
/(?<path>\/(?:[\w\-.]|\/)+\.[\w]+)(?::(?<line>\d+)(?::(?<col>\d+))?|\((?<pline>\d+)(?:,(?<pcol>\d+))?\))?/g,
44+
/(?<path>[A-Za-z]:\\(?:[\w\-.]|\\)+\.[\w]+)(?::(?<line>\d+)(?::(?<col>\d+))?|\((?<pline>\d+)(?:,(?<pcol>\d+))?\))?/g,
45+
/(?<path>\.\.?\/(?:[\w\-.]|\/)+\.[\w]+)(?::(?<line>\d+)(?::(?<col>\d+))?|\((?<pline>\d+)(?:,(?<pcol>\d+))?\))?/g,
46+
];
47+
48+
for (const pattern of patterns) {
49+
pattern.lastIndex = 0;
50+
let match;
51+
while ((match = pattern.exec(lineText)) !== null) {
52+
const matchText = match[0];
53+
const groups = match.groups;
54+
if (!groups?.path) continue;
55+
56+
const filePath = groups.path;
57+
const lineNum = groups.line || groups.pline;
58+
const colNum = groups.col || groups.pcol;
59+
60+
const startX = match.index + 1;
61+
const endX = match.index + matchText.length + 1;
62+
63+
const range: IBufferRange = {
64+
start: { x: startX, y: bufferLineNumber + 1 },
65+
end: { x: endX, y: bufferLineNumber + 1 },
66+
};
67+
68+
links.push({
69+
range,
70+
text: matchText,
71+
activate: (_event: MouseEvent, _text: string) => {
72+
this.onOpenFile(
73+
filePath,
74+
lineNum ? parseInt(lineNum, 10) : undefined,
75+
colNum ? parseInt(colNum, 10) : undefined
76+
);
77+
},
78+
hover: (event: MouseEvent, _text: string) => {
79+
this.showHoverTooltip(event, filePath, lineNum, colNum);
80+
},
81+
leave: (_event: MouseEvent, _text: string) => {
82+
this.hideHoverTooltip();
83+
},
84+
dispose: () => {
85+
this.hideHoverTooltip();
86+
},
87+
});
88+
}
89+
}
90+
91+
callback(links.length > 0 ? links : undefined);
92+
}
93+
94+
private showHoverTooltip(
95+
event: MouseEvent,
96+
filePath: string,
97+
line?: string,
98+
column?: string
99+
): void {
100+
this.hideHoverTooltip();
101+
102+
const tooltip = document.createElement("div");
103+
tooltip.className = "xterm-hover terminal-file-link-tooltip";
104+
tooltip.style.cssText = `
105+
position: fixed;
106+
z-index: 1000;
107+
padding: ${tokens.spacing.sm} ${tokens.spacing.md};
108+
background: var(--jb-popup);
109+
border: 1px solid ${tokens.colors.border.divider};
110+
border-radius: ${tokens.radius.sm};
111+
font-size: var(--jb-text-muted-size);
112+
color: ${tokens.colors.text.primary};
113+
pointer-events: none;
114+
white-space: nowrap;
115+
box-shadow: var(--jb-shadow-popup);
116+
`;
117+
118+
let tooltipText = "Click to open file";
119+
if (line) {
120+
tooltipText += ` at line ${line}`;
121+
if (column) {
122+
tooltipText += `:${column}`;
123+
}
124+
}
125+
126+
const pathSpan = document.createElement("div");
127+
pathSpan.style.cssText = `
128+
font-size: var(--jb-text-header-size);
129+
color: ${tokens.colors.text.muted};
130+
margin-top: 2px;
131+
max-width: 400px;
132+
overflow: hidden;
133+
text-overflow: ellipsis;
134+
`;
135+
pathSpan.textContent = filePath;
136+
137+
const actionSpan = document.createElement("div");
138+
actionSpan.textContent = tooltipText;
139+
140+
tooltip.appendChild(actionSpan);
141+
tooltip.appendChild(pathSpan);
142+
143+
const x = event.clientX + 10;
144+
const y = event.clientY + 10;
145+
146+
tooltip.style.left = `${x}px`;
147+
tooltip.style.top = `${y}px`;
148+
149+
const terminalElement = this.terminal.element;
150+
if (terminalElement) {
151+
terminalElement.appendChild(tooltip);
152+
this.hoverTooltip = tooltip;
153+
154+
requestAnimationFrame(() => {
155+
const rect = tooltip.getBoundingClientRect();
156+
if (rect.right > window.innerWidth) {
157+
tooltip.style.left = `${event.clientX - rect.width - 10}px`;
158+
}
159+
if (rect.bottom > window.innerHeight) {
160+
tooltip.style.top = `${event.clientY - rect.height - 10}px`;
161+
}
162+
});
163+
}
164+
}
165+
166+
private hideHoverTooltip(): void {
167+
if (this.hoverTooltip) {
168+
this.hoverTooltip.remove();
169+
this.hoverTooltip = null;
170+
}
171+
}
172+
}

‎src/components/terminal/OutputStreamProcessor.ts‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/**
2+
* Output stream processor for chunked processing with debounced flushing.
3+
* Optimized for high-throughput terminal output.
4+
*
5+
* Performance optimizations:
6+
* - Pre-allocated buffer array to reduce GC pressure
7+
* - Uses array-based buffer to avoid repeated string concatenation
8+
* - Batched acknowledgments to reduce IPC overhead
9+
*/
10+
11+
import { OUTPUT_CHUNK_SIZE, OUTPUT_FLUSH_DEBOUNCE_MS, ACK_BATCH_SIZE } from "./TerminalPanelTypes";
12+
13+
export class OutputStreamProcessor {
14+
private bufferChunks: string[] = [];
15+
private bufferLength = 0;
16+
private readonly chunkSize: number;
17+
private flushTimeoutId: ReturnType<typeof setTimeout> | null = null;
18+
private pendingCallback: ((chunk: string) => void) | null = null;
19+
private pendingAckBytes = 0;
20+
private ackCallback: ((bytes: number) => void) | null = null;
21+
22+
constructor(chunkSize: number = OUTPUT_CHUNK_SIZE) {
23+
this.chunkSize = chunkSize;
24+
}
25+
26+
setAckCallback(callback: (bytes: number) => void): void {
27+
this.ackCallback = callback;
28+
}
29+
30+
processChunked(data: string, callback: (chunk: string) => void): void {
31+
this.bufferChunks.push(data);
32+
this.bufferLength += data.length;
33+
this.pendingCallback = callback;
34+
35+
this.pendingAckBytes += data.length;
36+
37+
while (this.bufferLength >= this.chunkSize) {
38+
const fullBuffer = this.bufferChunks.join('');
39+
const chunk = fullBuffer.substring(0, this.chunkSize);
40+
const remainder = fullBuffer.substring(this.chunkSize);
41+
42+
this.bufferChunks = remainder.length > 0 ? [remainder] : [];
43+
this.bufferLength = remainder.length;
44+
45+
callback(chunk);
46+
}
47+
48+
if (this.pendingAckBytes >= ACK_BATCH_SIZE && this.ackCallback) {
49+
this.ackCallback(this.pendingAckBytes);
50+
this.pendingAckBytes = 0;
51+
}
52+
53+
if (this.bufferLength > 0 && !this.flushTimeoutId) {
54+
this.flushTimeoutId = setTimeout(() => {
55+
this.flushImmediate();
56+
}, OUTPUT_FLUSH_DEBOUNCE_MS);
57+
}
58+
}
59+
60+
private flushImmediate(): void {
61+
if (this.bufferLength > 0 && this.pendingCallback) {
62+
const data = this.bufferChunks.join('');
63+
this.bufferChunks = [];
64+
this.bufferLength = 0;
65+
this.pendingCallback(data);
66+
}
67+
this.flushTimeoutId = null;
68+
69+
if (this.pendingAckBytes > 0 && this.ackCallback) {
70+
this.ackCallback(this.pendingAckBytes);
71+
this.pendingAckBytes = 0;
72+
}
73+
}
74+
75+
flush(callback: (chunk: string) => void): void {
76+
if (this.flushTimeoutId) {
77+
clearTimeout(this.flushTimeoutId);
78+
this.flushTimeoutId = null;
79+
}
80+
if (this.bufferLength > 0) {
81+
const data = this.bufferChunks.join('');
82+
this.bufferChunks = [];
83+
this.bufferLength = 0;
84+
callback(data);
85+
}
86+
87+
if (this.pendingAckBytes > 0 && this.ackCallback) {
88+
this.ackCallback(this.pendingAckBytes);
89+
this.pendingAckBytes = 0;
90+
}
91+
}
92+
93+
cancel(): void {
94+
if (this.flushTimeoutId) {
95+
clearTimeout(this.flushTimeoutId);
96+
this.flushTimeoutId = null;
97+
}
98+
this.bufferChunks = [];
99+
this.bufferLength = 0;
100+
this.pendingCallback = null;
101+
this.pendingAckBytes = 0;
102+
}
103+
104+
dispose(): void {
105+
this.cancel();
106+
this.ackCallback = null;
107+
this.pendingCallback = null;
108+
}
109+
110+
isDisposed(): boolean {
111+
return this.ackCallback === null && this.pendingCallback === null && this.bufferChunks.length === 0;
112+
}
113+
}

‎src/components/terminal/TerminalEventHandlers.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import type { TerminalInstanceManager } from "./TerminalInstanceManager";
2+
import type { TerminalInfo } from "@/context/TerminalsContext";
3+
import { getPersistedSearchQuery } from "../TerminalFind";
4+
5+
export interface TerminalEventDeps {
6+
state: { showPanel: boolean; activeTerminalId: string | null };
7+
manager: TerminalInstanceManager;
8+
activeTerminal: () => TerminalInfo | undefined;
9+
isFocused: () => boolean;
10+
scrollLocked: () => boolean;
11+
setScrollLocked: (v: boolean) => void;
12+
showFindWidget: () => boolean;
13+
setShowFindWidget: (v: boolean) => void;
14+
setDialogTerminalId: (id: string | null) => void;
15+
setShowRenameDialog: (v: boolean) => void;
16+
setShowColorPicker: (v: boolean) => void;
17+
handleSplitHorizontal: () => void;
18+
resizeTerminal: (id: string, cols: number, rows: number) => Promise<void>;
19+
}
20+
21+
export function createKeydownHandler(deps: TerminalEventDeps) {
22+
return (e: KeyboardEvent) => {
23+
if (!deps.state.showPanel) return;
24+
if (e.ctrlKey && !e.shiftKey && !e.altKey && e.key === "f" && deps.isFocused()) { e.preventDefault(); e.stopPropagation(); deps.setShowFindWidget(true); return; }
25+
if (e.key === "F3" && deps.showFindWidget()) {
26+
e.preventDefault();
27+
const a = deps.activeTerminal(); const q = getPersistedSearchQuery();
28+
if (a && q) { const i = deps.manager.instances.get(a.id); if (i?.searchAddon) { e.shiftKey ? i.searchAddon.findPrevious(q) : i.searchAddon.findNext(q); } }
29+
return;
30+
}
31+
if (e.ctrlKey && e.shiftKey && e.key === "L") {
32+
e.preventDefault(); const nl = !deps.scrollLocked(); deps.setScrollLocked(nl);
33+
if (!nl) { const a = deps.activeTerminal(); if (a) { const i = deps.manager.instances.get(a.id); if (i) i.terminal.scrollToBottom(); } }
34+
return;
35+
}
36+
if (e.ctrlKey && e.key === "l" && deps.isFocused()) { e.preventDefault(); deps.manager.clearTerminal(); }
37+
};
38+
}
39+
40+
export function createPaneResizeHandler(deps: TerminalEventDeps) {
41+
return (e: Event) => {
42+
const detail = (e as CustomEvent).detail;
43+
if (detail?.terminalId) {
44+
const instance = deps.manager.instances.get(detail.terminalId);
45+
if (instance) {
46+
requestAnimationFrame(() => {
47+
instance.fitAddon.fit();
48+
const dims = instance.fitAddon.proposeDimensions();
49+
if (dims && dims.cols > 0 && dims.rows > 0) deps.resizeTerminal(detail.terminalId, dims.cols, dims.rows).catch(console.error);
50+
});
51+
}
52+
}
53+
};
54+
}
55+
56+
export function createTerminalEventHandlers(deps: TerminalEventDeps) {
57+
return {
58+
onSplit: () => { deps.handleSplitHorizontal(); },
59+
onNext: () => { const a = deps.activeTerminal(); if (a) deps.manager.goToNextCommand(a.id); },
60+
onPrev: () => { const a = deps.activeTerminal(); if (a) deps.manager.goToPrevCommand(a.id); },
61+
onSelAll: () => { const a = deps.activeTerminal(); if (a) deps.manager.selectAllTerminal(a.id); },
62+
onRename: () => { const a = deps.activeTerminal(); if (a) { deps.setDialogTerminalId(a.id); deps.setShowRenameDialog(true); } },
63+
onColor: () => { const a = deps.activeTerminal(); if (a) { deps.setDialogTerminalId(a.id); deps.setShowColorPicker(true); } },
64+
};
65+
}

0 commit comments

Comments
 (0)