fix(app): refit terminal when returning to agent
This commit is contained in:
@@ -29,6 +29,7 @@ interface TerminalEmulatorProps {
|
|||||||
onOutputChunkConsumed?: (sequence: number) => Promise<void> | void;
|
onOutputChunkConsumed?: (sequence: number) => Promise<void> | void;
|
||||||
pendingModifiers?: PendingTerminalModifiers;
|
pendingModifiers?: PendingTerminalModifiers;
|
||||||
focusRequestToken?: number;
|
focusRequestToken?: number;
|
||||||
|
resizeRequestToken?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
@@ -51,6 +52,7 @@ export default function TerminalEmulator({
|
|||||||
onOutputChunkConsumed,
|
onOutputChunkConsumed,
|
||||||
pendingModifiers = { ctrl: false, shift: false, alt: false },
|
pendingModifiers = { ctrl: false, shift: false, alt: false },
|
||||||
focusRequestToken = 0,
|
focusRequestToken = 0,
|
||||||
|
resizeRequestToken = 0,
|
||||||
}: TerminalEmulatorProps) {
|
}: TerminalEmulatorProps) {
|
||||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||||
const hostRef = useRef<HTMLDivElement | null>(null);
|
const hostRef = useRef<HTMLDivElement | null>(null);
|
||||||
@@ -142,6 +144,13 @@ export default function TerminalEmulator({
|
|||||||
runtimeRef.current?.focus();
|
runtimeRef.current?.focus();
|
||||||
}, [focusRequestToken]);
|
}, [focusRequestToken]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (resizeRequestToken <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
runtimeRef.current?.resize({ force: true });
|
||||||
|
}, [resizeRequestToken]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={rootRef}
|
ref={rootRef}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useFocusEffect } from "@react-navigation/native";
|
||||||
import {
|
import {
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
Pressable,
|
Pressable,
|
||||||
@@ -45,6 +46,7 @@ interface TerminalPaneProps {
|
|||||||
|
|
||||||
const MAX_OUTPUT_CHARS = 200_000;
|
const MAX_OUTPUT_CHARS = 200_000;
|
||||||
const TERMINAL_TAB_MAX_WIDTH = 220;
|
const TERMINAL_TAB_MAX_WIDTH = 220;
|
||||||
|
const TERMINAL_REFIT_DELAYS_MS = [0, 48, 144, 320];
|
||||||
|
|
||||||
const MODIFIER_LABELS = {
|
const MODIFIER_LABELS = {
|
||||||
ctrl: "Ctrl",
|
ctrl: "Ctrl",
|
||||||
@@ -159,6 +161,7 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
|
|||||||
const [streamError, setStreamError] = useState<string | null>(null);
|
const [streamError, setStreamError] = useState<string | null>(null);
|
||||||
const [modifiers, setModifiers] = useState<ModifierState>(EMPTY_MODIFIERS);
|
const [modifiers, setModifiers] = useState<ModifierState>(EMPTY_MODIFIERS);
|
||||||
const [focusRequestToken, setFocusRequestToken] = useState(0);
|
const [focusRequestToken, setFocusRequestToken] = useState(0);
|
||||||
|
const [resizeRequestToken, setResizeRequestToken] = useState(0);
|
||||||
const [hoveredTerminalId, setHoveredTerminalId] = useState<string | null>(null);
|
const [hoveredTerminalId, setHoveredTerminalId] = useState<string | null>(null);
|
||||||
const [hoveredCloseTerminalId, setHoveredCloseTerminalId] = useState<string | null>(
|
const [hoveredCloseTerminalId, setHoveredCloseTerminalId] = useState<string | null>(
|
||||||
null
|
null
|
||||||
@@ -253,6 +256,30 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
|
|||||||
const requestTerminalFocus = useCallback(() => {
|
const requestTerminalFocus = useCallback(() => {
|
||||||
setFocusRequestToken((current) => current + 1);
|
setFocusRequestToken((current) => current + 1);
|
||||||
}, []);
|
}, []);
|
||||||
|
const requestTerminalReflow = useCallback(() => {
|
||||||
|
setResizeRequestToken((current) => current + 1);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useFocusEffect(
|
||||||
|
useCallback(() => {
|
||||||
|
if (!selectedTerminalId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Navigation transitions can temporarily report stale dimensions.
|
||||||
|
// Pulse forced refits so xterm fills the pane when returning to an agent.
|
||||||
|
const timeoutHandles = TERMINAL_REFIT_DELAYS_MS.map((delayMs) =>
|
||||||
|
setTimeout(() => {
|
||||||
|
requestTerminalReflow();
|
||||||
|
}, delayMs)
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
for (const handle of timeoutHandles) {
|
||||||
|
clearTimeout(handle);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [requestTerminalReflow, selectedTerminalId])
|
||||||
|
);
|
||||||
|
|
||||||
const terminalsQuery = useQuery({
|
const terminalsQuery = useQuery({
|
||||||
queryKey: terminalsQueryKey,
|
queryKey: terminalsQueryKey,
|
||||||
@@ -938,6 +965,7 @@ export function TerminalPane({ serverId, cwd }: TerminalPaneProps) {
|
|||||||
onOutputChunkConsumed={handleOutputChunkConsumed}
|
onOutputChunkConsumed={handleOutputChunkConsumed}
|
||||||
pendingModifiers={modifiers}
|
pendingModifiers={modifiers}
|
||||||
focusRequestToken={focusRequestToken}
|
focusRequestToken={focusRequestToken}
|
||||||
|
resizeRequestToken={resizeRequestToken}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -157,4 +157,18 @@ describe("terminal-emulator-runtime", () => {
|
|||||||
expect(onCommittedA).toHaveBeenCalledTimes(1);
|
expect(onCommittedA).toHaveBeenCalledTimes(1);
|
||||||
expect(onCommittedB).toHaveBeenCalledTimes(1);
|
expect(onCommittedB).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("forces a refit when resize is requested", () => {
|
||||||
|
const runtime = new TerminalEmulatorRuntime();
|
||||||
|
const fitAndEmitResize = vi.fn();
|
||||||
|
|
||||||
|
(runtime as unknown as { fitAndEmitResize: (force: boolean) => void }).fitAndEmitResize =
|
||||||
|
fitAndEmitResize;
|
||||||
|
|
||||||
|
runtime.resize();
|
||||||
|
runtime.resize({ force: true });
|
||||||
|
|
||||||
|
expect(fitAndEmitResize).toHaveBeenNthCalledWith(1, false);
|
||||||
|
expect(fitAndEmitResize).toHaveBeenNthCalledWith(2, true);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -76,6 +76,7 @@ export class TerminalEmulatorRuntime {
|
|||||||
};
|
};
|
||||||
private terminal: Terminal | null = null;
|
private terminal: Terminal | null = null;
|
||||||
private fitAddon: FitAddon | null = null;
|
private fitAddon: FitAddon | null = null;
|
||||||
|
private fitAndEmitResize: ((force: boolean) => void) | null = null;
|
||||||
private lastSize: { rows: number; cols: number } | null = null;
|
private lastSize: { rows: number; cols: number } | null = null;
|
||||||
private cleanup: (() => void) | null = null;
|
private cleanup: (() => void) | null = null;
|
||||||
private outputOperations: TerminalOutputOperation[] = [];
|
private outputOperations: TerminalOutputOperation[] = [];
|
||||||
@@ -168,6 +169,7 @@ export class TerminalEmulatorRuntime {
|
|||||||
cols: nextCols,
|
cols: nextCols,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
this.fitAndEmitResize = fitAndEmitResize;
|
||||||
|
|
||||||
fitAndEmitResize(true);
|
fitAndEmitResize(true);
|
||||||
|
|
||||||
@@ -383,6 +385,10 @@ export class TerminalEmulatorRuntime {
|
|||||||
this.processOutputQueue();
|
this.processOutputQueue();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
resize(input?: { force?: boolean }): void {
|
||||||
|
this.fitAndEmitResize?.(input?.force ?? false);
|
||||||
|
}
|
||||||
|
|
||||||
focus(): void {
|
focus(): void {
|
||||||
this.terminal?.focus();
|
this.terminal?.focus();
|
||||||
}
|
}
|
||||||
@@ -413,6 +419,7 @@ export class TerminalEmulatorRuntime {
|
|||||||
}
|
}
|
||||||
this.terminal = null;
|
this.terminal = null;
|
||||||
this.fitAddon = null;
|
this.fitAddon = null;
|
||||||
|
this.fitAndEmitResize = null;
|
||||||
this.lastSize = null;
|
this.lastSize = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user