fix: mobile terminal overlay status bar with auto-hide

- Replace inline header+tabs layout with position:absolute overlay
- Overlay contains: back button, session name, status dot, A-/A+ font size, exit
- Session tabs live inside the overlay below the toolbar
- Auto-hides after 3s; clicking terminal content hides it immediately
- Pull handle at top edge appears when overlay is hidden to restore it
- Terminal content always fills full viewport; overlay never resizes container
- Pass showControls=false to TerminalComponent on mobile to avoid double headers

apps/web/src/pages/terminal.tsx

@@ -5,6 +5,7 @@ import {
 	TerminalSessionTabs,
 	type TerminalSessionInfo,
 } from "../components/terminal-session-tabs";
+import { Icon } from "../components/icon";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { useAutoHide } from "../hooks/use-auto-hide";
 import { useTerminalSessions } from "../hooks/use-terminal-sessions";
@@ -241,45 +242,99 @@ export const TerminalPage: React.FC = () => {
 	const sessionInfos = SESSIONS_TO_INFO(sessions);
 
 	if (isMobile) {
+		const activeSession = sessions.find((s) => s.id === activeSessionId);
+		const status =
+			terminalStatuses[activeSessionId ?? "default"] ?? "connecting";
+
 		return (
 			<section
 				className={`terminal-page mobile ${isFullscreen ? "fullscreen" : ""}`}
 			>
+				{/* Overlay status bar — floats over terminal, never resizes it */}
 				<div
-					className={`terminal-page-header mobile-header ${headerAutoHide.isVisible ? "visible" : "hidden"}`}
-					onClick={() => headerAutoHide.show()}
+					className={`mobile-terminal-overlay ${headerAutoHide.isVisible ? "visible" : "hidden"}`}
+					onClick={(e) => e.stopPropagation()}
 				>
-					<button
-						className="secondary-button"
-						onClick={() => navigate(-1)}
-						type="button"
-					>
-						Back
-					</button>
-					<h1>Terminal</h1>
-					<button
-						className="secondary-button"
-						onClick={() => setIsFullscreen((p) => !p)}
-						type="button"
-					>
-						{isFullscreen ? "Exit" : "Fullscreen"}
-					</button>
+					<div className="mobile-terminal-toolbar">
+						<div className="mobile-terminal-toolbar-left">
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => navigate(-1)}
+								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}`}
+							/>
+						</div>
+						<div className="mobile-terminal-toolbar-right">
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => handleFontSizeChange(-1)}
+								type="button"
+								aria-label="Decrease font size"
+							>
+								<span style={{ fontSize: "0.75rem" }}>A-</span>
+							</button>
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => handleFontSizeChange(1)}
+								type="button"
+								aria-label="Increase font size"
+							>
+								<span style={{ fontSize: "1rem" }}>A+</span>
+							</button>
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => navigate(-1)}
+								type="button"
+								aria-label="Exit terminal"
+							>
+								<Icon name="close" size="sm" />
+							</button>
+						</div>
+					</div>
+					<div className="mobile-terminal-overlay-tabs">
+						<TerminalSessionTabs
+							sessions={sessionInfos}
+							activeSessionId={activeSessionId ?? ""}
+							onSelect={handleSelect}
+							onClose={handleClose}
+							onCreate={handleCreate}
+							onRename={handleRename}
+							isMobile={true}
+						/>
+					</div>
 				</div>
+
+				{/* Pull handle — visible when overlay is hidden */}
+				{!headerAutoHide.isVisible && (
+					<button
+						className="mobile-terminal-pull-handle"
+						onClick={(e) => {
+							e.stopPropagation();
+							headerAutoHide.show();
+						}}
+						type="button"
+						aria-label="Show toolbar"
+					>
+						<span className="mobile-terminal-pull-dots">•••</span>
+					</button>
+				)}
+
+				{/* Terminal content — always fills full viewport */}
 				<div
-					className={`mobile-tabs-container ${headerAutoHide.isVisible ? "visible" : "hidden"}`}
-					onClick={() => headerAutoHide.show()}
+					className="terminal-page-content mobile-full"
+					onClick={() => headerAutoHide.hide()}
 				>
-					<TerminalSessionTabs
-						sessions={sessionInfos}
-						activeSessionId={activeSessionId ?? ""}
-						onSelect={handleSelect}
-						onClose={handleClose}
-						onCreate={handleCreate}
-						onRename={handleRename}
-						isMobile={true}
-					/>
-				</div>
-				<div className="terminal-page-content">
 					{error && <div className="terminal-error-banner">{error}</div>}
 					{sessions
 						.filter((session) => session.id === activeSessionId)
@@ -291,6 +346,7 @@ export const TerminalPage: React.FC = () => {
 									sessionId={session.id}
 									onClose={() => handleClose(session.id)}
 									isMobile={true}
+									showControls={false}
 									onTerminalReady={handleTerminalReady}
 								/>
 							</div>