fix(frontend): iOS keyboard flicker, chrome blending, and TouchBar polish

- Stop fighting iOS focus-reveal scroll on keyboardOpen (root cause of
  bottom-half quick-tap keyboard flicker)
- All textarea.focus() calls now use { preventScroll: true }
- Guard synthetic xterm mousedown against tap-focus race
- Halve home-indicator safe-area cap (4px to 2px) across the app
- Rework SessionsHub footer to bleed bg into safe area with capped padding
- Add gradients to top nav bar and TouchBar that blend with iOS chrome
- TouchBar background goes transparent when keyboard is open so iOS
  accessory bar blends seamlessly with body bg
- Layered drop shadow on TouchBar buttons so they read as floating chips
- Body bg switched to --bg so areas behind iOS chrome read dark

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

src/frontend/index.html

@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content"
     />
-    <meta name="theme-color" content="#1e1e1e" />
+    <meta name="theme-color" content="#252526" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

src/frontend/src/App.tsx

@@ -4,6 +4,8 @@ import LoginPage from '@/components/LoginPage/LoginPage';
 import SessionsHub from '@/components/SessionsHub/SessionsHub';
 import { TerminalApp } from '@/components/TerminalApp/TerminalApp';
 import CodeViewer from '@/components/CodeViewer/CodeViewer';
+import { useThemeStore } from '@/stores/themeStore';
+import { THEMES } from '@/themes/terminalThemes';
 
 function getPath() {
   return window.location.pathname;
@@ -26,6 +28,24 @@ function normalizeSessionParam() {
   }
 }
 
+/**
+ * Update the iOS browser-chrome color (status-bar + home-indicator zone) to
+ * match the visible content of the current screen, so there's no visible
+ * seam between our content and the OS chrome.
+ *  - Terminal screen: surface (TouchBar bottom color)
+ *  - Sessions hub / Code viewer: bg (page background)
+ */
+function useChromeColor(screen: 'terminal' | 'main') {
+  const themeId = useThemeStore((s) => s.themeId);
+  useEffect(() => {
+    const theme = THEMES.find((t) => t.id === themeId) ?? THEMES[0]!;
+    const color = screen === 'terminal' ? theme.surface : theme.bg;
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute('content', color);
+    document.body.style.background = color;
+  }, [screen, themeId]);
+}
+
 export default function App() {
   const { authenticated, passwordRequired, login, loading } = useAuth();
   const [path, setPath] = useState(getPath);
@@ -40,6 +60,10 @@ export default function App() {
     return () => window.removeEventListener('popstate', onPopState);
   }, []);
 
+  const codeSessionId = getCodeSessionId();
+  const isTerminalScreen = path === '/terminal' && !codeSessionId;
+  useChromeColor(isTerminalScreen ? 'terminal' : 'main');
+
   // Still checking auth
   if (authenticated === null) {
     return (
@@ -100,12 +124,11 @@ export default function App() {
   }
 
   // Authenticated — route by pathname
-  const codeSessionId = getCodeSessionId();
   if (codeSessionId) {
     return <CodeViewer sessionId={codeSessionId} />;
   }
 
-  if (path === '/terminal') {
+  if (isTerminalScreen) {
     return <TerminalApp />;
   }
 

src/frontend/src/components/SessionsHub/SessionsHub.module.css

@@ -197,7 +197,7 @@
   display: flex;
   flex-direction: column;
   padding: 16px;
-  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+  padding-bottom: calc(80px + min(env(safe-area-inset-bottom, 0px), 2px));
   gap: 12px;
 }
 
@@ -242,9 +242,13 @@
 
 .hubFooter {
   position: fixed;
-  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
-  left: calc(16px + env(safe-area-inset-left, 0px));
-  right: calc(16px + env(safe-area-inset-right, 0px));
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px calc(16px + env(safe-area-inset-left, 0px))
+    calc(8px + min(env(safe-area-inset-bottom, 0px), 2px))
+    calc(16px + env(safe-area-inset-right, 0px));
+  background: var(--bg);
   display: flex;
   gap: 10px;
   z-index: 50;

src/frontend/src/components/SidePanel/SidePanel.module.css

@@ -24,7 +24,7 @@
   overflow: hidden;
   padding-top: env(safe-area-inset-top, 0px);
   padding-left: env(safe-area-inset-left, 0px);
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-bottom: min(env(safe-area-inset-bottom, 0px), 2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   animation: slide-in-left 0.25s ease-out;
 }

src/frontend/src/components/TerminalApp/TerminalApp.module.css

@@ -17,8 +17,7 @@
   padding-top: env(safe-area-inset-top, 0px);
   display: flex;
   align-items: center;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
+  background: linear-gradient(to bottom, var(--surface) 0%, var(--surface) 35%, var(--bg) 100%);
   gap: 2px;
   position: fixed;
   top: 0;
@@ -181,17 +180,29 @@
 .terminalArea {
   position: absolute;
   top: calc(40px + env(safe-area-inset-top, 0px));
-  bottom: calc(80px + env(safe-area-inset-bottom, 0px) + var(--keyboard-height, 0px));
+  /* TouchBar height (71px) + capped home-indicator gap + keyboard height.
+     iOS Safari does not shrink the layout viewport when the keyboard opens,
+     so we must explicitly offset by --keyboard-height (set by
+     useMobileKeyboard via visualViewport). */
+  bottom: calc(71px + min(env(safe-area-inset-bottom, 0px), 2px) + var(--keyboard-height, 0px));
   left: 0;
   right: 0;
   display: flex;
   min-height: 0;
   background: var(--bg);
 }
 
-/* Copilot chat hides the TouchBar — reclaim its space */
+/* When the keyboard is open, the touchbar's home-indicator padding is
+   covered by the keyboard, so the terminal can sit directly on top of the
+   71px touchbar core (above the keyboard). */
+.layout[data-keyboard-open] .terminalArea {
+  bottom: calc(71px + var(--keyboard-height, 0px));
+}
+
+/* Copilot chat hides the TouchBar — reclaim its space (no keyboard offset
+   needed because TerminalPane handles its own resize/scroll-into-view). */
 .layout[data-hide-touchbar] .terminalArea {
-  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-height, 0px));
+  bottom: calc(min(env(safe-area-inset-bottom, 0px), 2px) + var(--keyboard-height, 0px));
 }
 
 .split {
@@ -258,15 +269,16 @@
   }
   .terminalArea {
     top: calc(32px + env(safe-area-inset-top, 0px));
-    bottom: calc(44px + env(safe-area-inset-bottom, 0px) + var(--keyboard-height, 0px));
+    bottom: calc(44px + min(env(safe-area-inset-bottom, 0px), 2px) + var(--keyboard-height, 0px));
   }
-  /* TouchBar hides when keyboard is open — remove its offset */
+  /* TouchBar hides when keyboard is open in landscape — sit directly on
+     top of the keyboard, no touchbar offset. */
   .layout[data-keyboard-open] .terminalArea {
-    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-height, 0px));
+    bottom: var(--keyboard-height, 0px);
   }
   /* Copilot chat hides TouchBar — reclaim its space */
   .layout[data-hide-touchbar] .terminalArea {
-    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-height, 0px));
+    bottom: var(--keyboard-height, 0px);
   }
 }
 

src/frontend/src/components/TerminalApp/TerminalApp.tsx

@@ -71,14 +71,6 @@ export function TerminalApp() {
 
   const { keyboardOpen, keyboardHeight } = useMobileKeyboard();
 
-  // Reset page scroll when keyboard opens (iOS can scroll body)
-  useEffect(() => {
-    if (keyboardOpen) {
-      window.scrollTo(0, 0);
-      document.documentElement.scrollTop = 0;
-    }
-  }, [keyboardOpen]);
-
   async function handleNewSessionCreated(id: string, type?: 'terminal' | 'copilot', ptySessionId?: string | null, model?: string) {
     // Add a placeholder immediately so the pane mounts right away
     const store = useSessionStore.getState();