alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'fix/terminal-session-callbacks' into dev

Browse Source
This commit is contained in:
Developer
2026-06-15 13:53:15 +00:00
parent a6ad8268b9 82ff8b8801
commit a2f0847aad
5 changed files with 1216 additions and 1118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/features/mobile/mobile-terminal-wrapper.tsx
+29 -6
View File
@@ -27,10 +27,17 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
const { isOpen: isKeyboardOpen, height: keyboardHeight } =
useVirtualKeyboard();
const [showPanel, setShowPanel] = useState(false);
const [activeModifier, setActiveModifier] = useState<ModifierKey | null>(null);
const [activeModifier, setActiveModifier] = useState<ModifierKey | null>(
null,
);
const [terminalRef, setTerminalRef] = useState<{
sendData: (data: string) => void;
connectionStatus: "connecting" | "connected" | "disconnected" | "error" | "resetting";
connectionStatus:
| "connecting"
| "connected"
| "disconnected"
| "error"
| "resetting";
focusInput: () => void;
changeFontSize: (delta: number) => void;
} | null>(null);
@@ -42,17 +49,33 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
}, [headerAutoHide]);
const handleTerminalReady = useCallback(
(sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error" | "resetting", focusInput: () => void, changeFontSize: (delta: number) => void) => {
setTerminalRef({ sendData, connectionStatus, focusInput, changeFontSize });
(
_sessionId: string | undefined,
sendData: (data: string) => void,
connectionStatus:
| "connecting"
| "connected"
| "disconnected"
| "error"
| "resetting",
focusInput: () => void,
changeFontSize: (delta: number) => void,
) => {
setTerminalRef({
sendData,
connectionStatus,
focusInput,
changeFontSize,
});
},
[]
[],
);
const handleSendKey = useCallback(
(data: string) => {
terminalRef?.sendData(data);
},
[terminalRef]
[terminalRef],
);
if (!isMobile) {
apps/web/src/components/features/terminal/DesktopTerminalView.tsx
+13 -3
View File
@@ -1,6 +1,9 @@
import React from "react";
import { TerminalComponent, type TerminalRef } from "./terminal";
import { TerminalSessionTabs, type TerminalSessionInfo } from "./terminal-session-tabs";
import {
TerminalSessionTabs,
type TerminalSessionInfo,
} from "./terminal-session-tabs";
import type { TerminalSession } from "../../../api/terminal";
interface Props {
@@ -8,7 +11,9 @@ interface Props {
sessions: TerminalSession[];
sessionInfos: TerminalSessionInfo[];
activeSessionId: string;
terminalRefs: React.MutableRefObject<Record<string, React.RefObject<TerminalRef>>>;
terminalRefs: React.MutableRefObject<
Record<string, React.RefObject<TerminalRef>>
>;
isFullscreen: boolean;
status: string;
error: string | null;
@@ -26,6 +31,7 @@ interface Props {
onHideResetConfirm: () => void;
onReset: () => void;
onTerminalReady: (
sessionId: string | undefined,
sendData: (data: string) => void,
status: "connecting" | "connected" | "disconnected" | "error" | "resetting",
focusInput: () => void,
@@ -64,7 +70,11 @@ export const DesktopTerminalView: React.FC<Props> = ({
>
{!isFullscreen && (
<div className="terminal-page-header">
<button className="secondary-button" onClick={onNavigateBack} type="button">
<button
className="secondary-button"
onClick={onNavigateBack}
type="button"
>
Back
</button>
<h1>Terminal</h1>
apps/web/src/components/features/terminal/MobileTerminalView.tsx
+43 -9
View File
@@ -1,6 +1,9 @@
import React from "react";
import { TerminalComponent, type TerminalRef } from "./terminal";
import { TerminalSessionTabs, type TerminalSessionInfo } from "./terminal-session-tabs";
import {
TerminalSessionTabs,
type TerminalSessionInfo,
} from "./terminal-session-tabs";
import { Icon } from "../../icon";
import { SpecialKeysStrip } from "./special-keys-strip";
import { SpecialKeysPanel } from "./special-keys-panel";
@@ -12,7 +15,9 @@ interface Props {
sessions: TerminalSession[];
sessionInfos: TerminalSessionInfo[];
activeSessionId: string;
terminalRefs: React.MutableRefObject<Record<string, React.RefObject<TerminalRef>>>;
terminalRefs: React.MutableRefObject<
Record<string, React.RefObject<TerminalRef>>
>;
status: string;
error: string | null;
loading: boolean;
@@ -29,6 +34,7 @@ interface Props {
onCreate: () => void;
onRename: (id: string, name: string) => void;
onTerminalReady: (
sessionId: string | undefined,
sendData: (data: string) => void,
status: "connecting" | "connected" | "disconnected" | "error" | "resetting",
focusInput: () => void,
@@ -73,25 +79,53 @@ export const MobileTerminalView: React.FC<Props> = ({
return (
<section className="terminal-page mobile">
<div className={`mobile-terminal-overlay ${isVisible ? "visible" : "hidden"}`} onClick={(e) => e.stopPropagation()}>
<div
className={`mobile-terminal-overlay ${isVisible ? "visible" : "hidden"}`}
onClick={(e) => e.stopPropagation()}
>
<div className="mobile-terminal-toolbar">
<div className="mobile-terminal-toolbar-left">
<button className="mobile-terminal-toolbtn" onClick={onNavigateBack} type="button" aria-label="Back">
<button
className="mobile-terminal-toolbtn"
onClick={onNavigateBack}
type="button"
aria-label="Back"
>
<Icon name="arrow-left" size="sm" />
</button>
</div>
<div className="mobile-terminal-toolbar-center">
<span className="mobile-terminal-title">{activeSession?.name || "Terminal"}</span>
<span className={`mobile-terminal-status status-dot ${status}`} aria-label={`Connection status: ${status}`} />
<span className="mobile-terminal-title">
{activeSession?.name || "Terminal"}
</span>
<span
className={`mobile-terminal-status status-dot ${status}`}
aria-label={`Connection status: ${status}`}
/>
</div>
<div className="mobile-terminal-toolbar-right">
<button className="mobile-terminal-toolbtn" onClick={() => onFontSizeChange(-1)} type="button" aria-label="Decrease font size">
<button
className="mobile-terminal-toolbtn"
onClick={() => onFontSizeChange(-1)}
type="button"
aria-label="Decrease font size"
>
<span style={{ fontSize: "0.75rem" }}>A-</span>
</button>
<button className="mobile-terminal-toolbtn" onClick={() => onFontSizeChange(1)} type="button" aria-label="Increase font size">
<button
className="mobile-terminal-toolbtn"
onClick={() => onFontSizeChange(1)}
type="button"
aria-label="Increase font size"
>
<span style={{ fontSize: "1rem" }}>A+</span>
</button>
<button className="mobile-terminal-toolbtn" onClick={onNavigateBack} type="button" aria-label="Exit terminal">
<button
className="mobile-terminal-toolbtn"
onClick={onNavigateBack}
type="button"
aria-label="Exit terminal"
>
<Icon name="close" size="sm" />
</button>
</div>
apps/web/src/components/features/terminal/terminal.tsx
+10 -2
View File
@@ -24,6 +24,7 @@ export interface TerminalProps {
activeModifier?: ModifierKey | null;
onModifierChange?: (modifier: ModifierKey | null) => void;
onTerminalReady?: (
sessionId: string | undefined,
sendData: (data: string) => void,
connectionStatus:
| "connecting"
@@ -563,6 +564,7 @@ export const TerminalComponent = React.forwardRef<TerminalRef, TerminalProps>(
handleFontSizeChangeRef.current(delta);
};
onTerminalReadyRef.current(
sessionId,
sendData,
status,
focusInput,
@@ -657,9 +659,15 @@ export const TerminalComponent = React.forwardRef<TerminalRef, TerminalProps>(
const changeFontSize = (delta: number) => {
handleFontSizeChangeRef.current(delta);
};
onTerminalReady(sendData, status, focusInput, changeFontSize);
onTerminalReady(
sessionId,
sendData,
status,
focusInput,
changeFontSize,
);
}
}, [status, onTerminalReady]);
}, [sessionId, status, onTerminalReady]);
const handleFontSizeChange = (delta: number) => {
const newSize = Math.max(
apps/web/src/hooks/use-terminal-page.ts
+40 -17
View File
@@ -34,9 +34,13 @@ export const useTerminalPage = () => {
const [terminalStatuses, setTerminalStatuses] = useState<
Record<string, TerminalStatus>
>({});
const changeFontSizeRef = useRef<((delta: number) => void) | null>(null);
const sendDataRef = useRef<((data: string) => void) | null>(null);
const focusInputRef = useRef<(() => void) | null>(null);
const changeFontSizeRefs = useRef<
Record<string, ((delta: number) => void) | null>
>({});
const sendDataRefs = useRef<Record<string, ((data: string) => void) | null>>(
{},
);
const focusInputRefs = useRef<Record<string, (() => void) | null>>({});
const [showResetConfirm, setShowResetConfirm] = useState(false);
const [showSpecialKeysPanel, setShowSpecialKeysPanel] = useState(false);
const [activeModifier, setActiveModifier] = useState<ModifierKey | null>(
@@ -124,8 +128,20 @@ export const useTerminalPage = () => {
for (const id of Object.keys(terminalRefs.current)) {
if (!currentIds.has(id)) {
delete terminalRefs.current[id];
delete sendDataRefs.current[id];
delete focusInputRefs.current[id];
delete changeFontSizeRefs.current[id];
}
}
setTerminalStatuses((prev) => {
const next: Record<string, TerminalStatus> = {};
for (const id of currentIds) {
if (prev[id]) {
next[id] = prev[id];
}
}
return next;
});
}, [sessions]);
// Fit and focus active terminal
@@ -276,29 +292,39 @@ export const useTerminalPage = () => {
const handleTerminalReady = useCallback(
(
sessionId: string | undefined,
sendData: (data: string) => void,
status: TerminalStatus,
focusInput: () => void,
changeFontSize: (delta: number) => void,
) => {
const key = sessionId ?? "default";
setTerminalStatuses((prev) => ({
...prev,
[activeSessionId ?? "default"]: status,
[key]: status,
}));
sendDataRef.current = sendData;
focusInputRef.current = focusInput;
changeFontSizeRef.current = changeFontSize;
sendDataRefs.current[key] = sendData;
focusInputRefs.current[key] = focusInput;
changeFontSizeRefs.current[key] = changeFontSize;
},
[],
);
const handleFontSizeChange = useCallback(
(delta: number) => {
const key = activeSessionId ?? "default";
changeFontSizeRefs.current[key]?.(delta);
},
[activeSessionId],
);
const handleFontSizeChange = useCallback((delta: number) => {
changeFontSizeRef.current?.(delta);
}, []);
const handleSendKey = useCallback((data: string) => {
sendDataRef.current?.(data);
}, []);
const handleSendKey = useCallback(
(data: string) => {
const key = activeSessionId ?? "default";
sendDataRefs.current[key]?.(data);
},
[activeSessionId],
);
const handleReset = useCallback(() => {
if (activeSessionId && terminalRefs.current[activeSessionId]) {
@@ -315,9 +341,6 @@ export const useTerminalPage = () => {
terminalRefs,
headerAutoHide,
terminalStatuses,
sendDataRef,
focusInputRef,
changeFontSizeRef,
showResetConfirm,
setShowResetConfirm,
showSpecialKeysPanel,