From dc80827a3f8b8d75d50797acda10e51668fea738 Mon Sep 17 00:00:00 2001
From: Jeremy Gatt <jeremygatt@macbookpro.lan>
Date: Tue, 10 Mar 2026 01:04:13 -0400
Subject: [PATCH] feat(web): mobile UI overhaul with ChatGPT-style side
 navigation drawer

Replace the old BottomSheet with a slide-in/out side drawer for mobile
and tablet layouts. Add a persistent top bar with hamburger menu, session
name, and connection status. Improve session management: create auto-focuses
the new session, delete auto-selects the next one, three-dot context menu
per session with rename/tags/delete options.

- New MobileDrawer component with slide-in/out animations
- Rewire LayoutShell for mobile (< 640px) and tablet (640-1024px)
- Single-session mode on mobile in MainContent (no carousel/tiled/queue)
- Hide pane-title-bar and main-header on mobile (redundant with top bar)
- InputBar: prevent send button from dismissing keyboard on mobile
- Add theme picker and auto-rotate toggle to drawer footer
- Delete dead BottomSheet component and CSS
- Add key prop to SessionPane for clean remount on session switch

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/index.html                       |   2 +-
 web/src/components/BottomSheet.tsx   |  66 ----
 web/src/components/DepthCarousel.tsx |   5 -
 web/src/components/InputBar.tsx      |  22 ++
 web/src/components/LayoutShell.tsx   |  28 +-
 web/src/components/MainContent.tsx   |  19 +-
 web/src/components/MobileDrawer.tsx  | 190 ++++++++++
 web/src/components/Terminal.tsx      |   9 +
 web/src/main.tsx                     |  20 ++
 web/src/styles/terminal.css          | 509 ++++++++++++++++++++++-----
 web/src/styles/themes.css            | 101 +++++-
 11 files changed, 796 insertions(+), 175 deletions(-)
 delete mode 100644 web/src/components/BottomSheet.tsx
 create mode 100644 web/src/components/MobileDrawer.tsx
diff --git a/web/index.html b/web/index.html
index 70a45f2..db83580 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content">
   <title>wsh</title>
 </head>
 <body>
diff --git a/web/src/components/BottomSheet.tsx b/web/src/components/BottomSheet.tsx
deleted file mode 100644
index bc420cb..0000000
--- a/web/src/components/BottomSheet.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useState, useCallback } from "preact/hooks";
-import type { WshClient } from "../api/ws";
-import { groups, selectedGroups } from "../state/groups";
-import { connectionState } from "../state/sessions";
-
-interface BottomSheetProps {
-  client: WshClient;
-}
-
-export function BottomSheet({ client }: BottomSheetProps) {
-  const [expanded, setExpanded] = useState(false);
-  const allGroups = groups.value;
-  const selected = selectedGroups.value;
-  const connState = connectionState.value;
-
-  const primaryGroup = allGroups.find(g => g.tag === selected[0]) || allGroups[0];
-
-  const handleGroupClick = useCallback((tag: string) => {
-    selectedGroups.value = [tag];
-    setExpanded(false);
-  }, []);
-
-  const handleNewSession = useCallback(() => {
-    client.createSession().catch(() => {});
-    setExpanded(false);
-  }, [client]);
-
-  return (
-    <>
-      {/* Tab bar at bottom */}
-      <div class="bottom-sheet-tab" onClick={() => setExpanded(!expanded)} role="button" aria-expanded={expanded} aria-label={`Session groups: ${primaryGroup?.label || "Sessions"}`}>
-        <div class={`status-dot ${connState}`} />
-        <span class="bottom-sheet-group-name">{primaryGroup?.label || "Sessions"}</span>
-        <div style={{ flex: 1 }} />
-        <button class="bottom-sheet-new-btn" onClick={(e: MouseEvent) => { e.stopPropagation(); handleNewSession(); }} aria-label="New session">
-          +
-        </button>
-        <span class="bottom-sheet-chevron">{expanded ? "\u25BC" : "\u25B2"}</span>
-      </div>
-
-      {/* Expanded sheet */}
-      {expanded && (
-        <>
-          <div class="bottom-sheet-backdrop" onClick={() => setExpanded(false)} />
-          <div class="bottom-sheet-panel">
-            <div class="bottom-sheet-handle" />
-            <div class="bottom-sheet-groups">
-              {allGroups.map(g => (
-                <div
-                  key={g.tag}
-                  class={`bottom-sheet-group ${selected.includes(g.tag) ? "selected" : ""}`}
-                  onClick={() => handleGroupClick(g.tag)}
-                  role="button"
-                  aria-label={`Group: ${g.label}, ${g.sessions.length} sessions`}
-                >
-                  <span class="bottom-sheet-group-label">{g.label}</span>
-                  <span class="bottom-sheet-group-count">{g.sessions.length}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </>
-      )}
-    </>
-  );
-}
diff --git a/web/src/components/DepthCarousel.tsx b/web/src/components/DepthCarousel.tsx
index 6d1e024..253fad0 100644
--- a/web/src/components/DepthCarousel.tsx
+++ b/web/src/components/DepthCarousel.tsx
@@ -104,11 +104,6 @@ export function DepthCarousel({ sessions, client }: DepthCarouselProps) {
         <div class="carousel-main">
           <SessionPane session={sessions[currentIndex]} client={client} />
         </div>
-        <div class="carousel-nav-hints">
-          <button class="carousel-nav-btn" onClick={() => navigate(-1)}>&#9664;</button>
-          <span class="carousel-position">{currentIndex + 1} / {sessions.length}</span>
-          <button class="carousel-nav-btn" onClick={() => navigate(1)}>&#9654;</button>
-        </div>
       </div>
     );
   }
diff --git a/web/src/components/InputBar.tsx b/web/src/components/InputBar.tsx
index 3ad52cd..f78730d 100644
--- a/web/src/components/InputBar.tsx
+++ b/web/src/components/InputBar.tsx
@@ -193,6 +193,11 @@ export const InputBar = forwardRef<InputBarHandle, InputBarProps>(
     prevValueRef.current = current;
   };
 
+  const handleSend = () => {
+    send("\r");
+    clearInput();
+  };
+
   return (
     <div class={`input-bar${ctrlActive.value || altActive.value ? " modifier-active" : ""}`}>
       <input
@@ -217,6 +222,23 @@ export const InputBar = forwardRef<InputBarHandle, InputBarProps>(
         autocorrect="off"
         spellcheck={false}
       />
+      <button
+        class="send-btn"
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={handleSend}
+        disabled={!connected}
+        aria-label="Send (Enter)"
+      >
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <path
+            d="M4 10h12M12 6l4 4-4 4"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
     </div>
   );
 });
diff --git a/web/src/components/LayoutShell.tsx b/web/src/components/LayoutShell.tsx
index adfcacf..a694b31 100644
--- a/web/src/components/LayoutShell.tsx
+++ b/web/src/components/LayoutShell.tsx
@@ -1,9 +1,9 @@
 import { useRef, useCallback, useEffect, useState } from "preact/hooks";
-import { sidebarWidth, sidebarCollapsed } from "../state/sessions";
+import { sidebarWidth, sidebarCollapsed, focusedSession, connectionState } from "../state/sessions";
 import type { WshClient } from "../api/ws";
 import { Sidebar } from "./Sidebar";
 import { MainContent } from "./MainContent";
-import { BottomSheet } from "./BottomSheet";
+import { MobileDrawer } from "./MobileDrawer";
 
 interface LayoutShellProps {
   client: WshClient;
@@ -73,12 +73,25 @@ export function LayoutShell({ client }: LayoutShellProps) {
   }, []);
 
   if (layoutMode === "mobile") {
+    const focused = focusedSession.value;
+    const connState = connectionState.value;
     return (
       <div class="layout-shell layout-mobile">
+        <MobileDrawer client={client} open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+        <div class="mobile-topbar">
+          <button
+            class="mobile-hamburger-btn"
+            onClick={() => setSidebarOpen(true)}
+            aria-label="Open navigation"
+          >
+            &#9776;
+          </button>
+          <span class="mobile-topbar-session">{focused || "wsh"}</span>
+          <span class={`status-dot ${connState}`} />
+        </div>
         <div class="layout-main">
           <MainContent client={client} />
         </div>
-        <BottomSheet client={client} />
       </div>
     );
   }
@@ -86,14 +99,7 @@ export function LayoutShell({ client }: LayoutShellProps) {
   if (layoutMode === "tablet") {
     return (
       <div class="layout-shell layout-tablet">
-        {sidebarOpen && (
-          <>
-            <div class="layout-overlay-backdrop" onClick={() => setSidebarOpen(false)} />
-            <div class="layout-sidebar-overlay">
-              <Sidebar client={client} collapsed={false} onToggleCollapse={() => setSidebarOpen(false)} />
-            </div>
-          </>
-        )}
+        <MobileDrawer client={client} open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
         {!sidebarOpen && (
           <button
             class="layout-tablet-menu-btn"
diff --git a/web/src/components/MainContent.tsx b/web/src/components/MainContent.tsx
index a817002..3957e51 100644
--- a/web/src/components/MainContent.tsx
+++ b/web/src/components/MainContent.tsx
@@ -51,6 +51,23 @@ export function MainContent({ client }: MainContentProps) {
   const mode = getViewModeForGroup(primaryTag);
   const sessions = activeGroupSessions.value;
   const focused = focusedSession.value;
+  const isMobile = window.innerWidth < 640;
+
+  // Mobile: single focused session, no view mode chrome
+  if (isMobile) {
+    const displaySession = focused && sessions.includes(focused) ? focused : sessions[0];
+    return (
+      <div class="main-content">
+        <div class="main-body">
+          {displaySession ? (
+            <SessionPane key={displaySession} session={displaySession} client={client} />
+          ) : (
+            <div class="main-empty">No sessions</div>
+          )}
+        </div>
+      </div>
+    );
+  }
 
   const groupLabel = primaryTag === "all" ? "All Sessions" : primaryTag;
 
@@ -139,7 +156,7 @@ export function MainContent({ client }: MainContentProps) {
     <div class="main-content">
       {header}
       <div class="main-body">
-        {displaySession && <SessionPane session={displaySession} client={client} />}
+        {displaySession && <SessionPane key={displaySession} session={displaySession} client={client} />}
       </div>
     </div>
   );
diff --git a/web/src/components/MobileDrawer.tsx b/web/src/components/MobileDrawer.tsx
new file mode 100644
index 0000000..674724b
--- /dev/null
+++ b/web/src/components/MobileDrawer.tsx
@@ -0,0 +1,190 @@
+import { useState, useCallback, useEffect, useRef } from "preact/hooks";
+import type { WshClient } from "../api/ws";
+import { groups, selectedGroups } from "../state/groups";
+import { focusedSession, connectionState, sessionInfoMap } from "../state/sessions";
+import { ThemePicker } from "./ThemePicker";
+
+interface MobileDrawerProps {
+  client: WshClient;
+  open: boolean;
+  onClose: () => void;
+}
+
+export function MobileDrawer({ client, open, onClose }: MobileDrawerProps) {
+  const [autoRotate, setAutoRotate] = useState(true);
+  const [menuSession, setMenuSession] = useState<string | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const drawerRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      setClosing(false);
+    } else if (visible) {
+      setClosing(true);
+      const el = drawerRef.current;
+      if (el) {
+        const onEnd = () => { setVisible(false); setClosing(false); };
+        el.addEventListener("animationend", onEnd, { once: true });
+        // Fallback in case animationend doesn't fire
+        const timer = setTimeout(onEnd, 250);
+        return () => { clearTimeout(timer); el.removeEventListener("animationend", onEnd); };
+      } else {
+        setVisible(false);
+        setClosing(false);
+      }
+    }
+  }, [open]);
+
+  if (!visible) return null;
+
+  const allGroups = groups.value;
+  const focused = focusedSession.value;
+  const connState = connectionState.value;
+  const infoMap = sessionInfoMap.value;
+
+  const handleSessionTap = (session: string, groupTag: string) => {
+    focusedSession.value = session;
+    selectedGroups.value = [groupTag];
+    onClose();
+  };
+
+  const handleNewSession = () => {
+    client.createSession().then((info) => {
+      focusedSession.value = info.name;
+      selectedGroups.value = ["all"];
+    }).catch((e) => console.error("Failed to create session:", e));
+    onClose();
+  };
+
+  const handleRename = (session: string) => {
+    setMenuSession(null);
+    const newName = prompt("Rename session:", session);
+    if (newName && newName !== session) {
+      client.renameSession(session, newName)
+        .catch((e: unknown) => console.error("Failed to rename session:", e));
+    }
+  };
+
+  const handleTag = (session: string) => {
+    setMenuSession(null);
+    const info = infoMap.get(session);
+    const currentTags = info?.tags?.join(", ") || "";
+    const input = prompt("Tags (comma-separated):", currentTags);
+    if (input === null) return;
+    const newTags = input.split(",").map(t => t.trim()).filter(Boolean);
+    const oldTags = info?.tags || [];
+    const toAdd = newTags.filter(t => !oldTags.includes(t));
+    const toRemove = oldTags.filter(t => !newTags.includes(t));
+    if (toAdd.length > 0 || toRemove.length > 0) {
+      client.updateTags(session, toAdd, toRemove)
+        .catch((e: unknown) => console.error("Failed to update tags:", e));
+    }
+  };
+
+  const handleKill = (session: string) => {
+    setMenuSession(null);
+    client.killSession(session).then(() => {
+      if (focusedSession.value === session) {
+        const currentAll = groups.value.find(g => g.tag === "all")?.sessions || [];
+        const remaining = currentAll.filter(s => s !== session);
+        focusedSession.value = remaining[0] || null;
+      }
+    }).catch((e) => console.error("Failed to kill session:", e));
+  };
+
+  const toggleAutoRotate = useCallback(() => {
+    const next = !autoRotate;
+    setAutoRotate(next);
+    try {
+      const orient = screen.orientation as any;
+      if (next) {
+        orient.unlock?.();
+      } else {
+        orient.lock?.("portrait")?.catch?.(() => {});
+      }
+    } catch {
+      // orientation lock not supported
+    }
+  }, [autoRotate]);
+
+  const displayGroups = allGroups.filter(g => g.tag !== "all" && g.sessions.length > 0);
+  const allSessions = allGroups.find(g => g.tag === "all")?.sessions || [];
+  const showFlat = displayGroups.length === 0;
+
+  const renderSession = (session: string, groupTag: string) => (
+    <div key={session} class={`mobile-drawer-session ${session === focused ? "active" : ""}`}>
+      <span
+        class="mobile-drawer-session-name"
+        onClick={() => handleSessionTap(session, groupTag)}
+      >
+        {session}
+      </span>
+      <span
+        class="mobile-drawer-session-menu-btn"
+        onClick={(e) => { e.stopPropagation(); setMenuSession(menuSession === session ? null : session); }}
+        role="button"
+        aria-label={`Options for ${session}`}
+      >
+        &#x22EE;
+      </span>
+      {menuSession === session && (
+        <div class="mobile-drawer-session-menu">
+          <button onClick={() => handleRename(session)}>Rename</button>
+          <button onClick={() => handleTag(session)}>Tags</button>
+          <button class="destructive" onClick={() => handleKill(session)}>Delete</button>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      <div class={`mobile-drawer-backdrop ${closing ? "closing" : ""}`} onClick={onClose} />
+      <nav class={`mobile-drawer ${closing ? "closing" : ""}`} ref={drawerRef} aria-label="Session navigation">
+        <div class="mobile-drawer-header">
+          <span class="mobile-drawer-title">wsh</span>
+          <div class="mobile-drawer-connection">
+            <span class={`status-dot ${connState}`} />
+            <span>{connState}</span>
+          </div>
+        </div>
+
+        <button class="mobile-drawer-new-session" onClick={handleNewSession}>
+          + New Session
+        </button>
+
+        <div class="mobile-drawer-sessions" onClick={() => setMenuSession(null)}>
+          {showFlat ? (
+            allSessions.map(s => renderSession(s, "all"))
+          ) : (
+            displayGroups.map(group => (
+              <div key={group.tag} class="mobile-drawer-group">
+                <div class="mobile-drawer-group-header">{group.label}</div>
+                {group.sessions.map(s => renderSession(s, group.tag))}
+              </div>
+            ))
+          )}
+        </div>
+
+        <div class="mobile-drawer-footer">
+          <ThemePicker />
+          <div style={{ flex: 1 }} />
+          <button
+            class={`mobile-drawer-rotate-btn ${autoRotate ? "on" : ""}`}
+            onClick={toggleAutoRotate}
+            aria-label={autoRotate ? "Lock portrait" : "Enable auto-rotate"}
+            title={autoRotate ? "Auto-rotate: On" : "Auto-rotate: Off"}
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+              <rect x="5" y="2" width="10" height="16" rx="2" stroke="currentColor" stroke-width="1.5" fill="none" />
+              <path d="M2 7a7 7 0 0 1 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" />
+              <path d="M1 5l1.5 2 2-1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+            </svg>
+          </button>
+        </div>
+      </nav>
+    </>
+  );
+}
diff --git a/web/src/components/Terminal.tsx b/web/src/components/Terminal.tsx
index 0a978f9..d32f843 100644
--- a/web/src/components/Terminal.tsx
+++ b/web/src/components/Terminal.tsx
@@ -184,6 +184,14 @@ export function Terminal({ session, client, captureInput }: TerminalProps) {
     }
   }, [captureInput]);
 
+  // On mobile, prevent mousedown on the terminal from blurring the input bar.
+  // This lets users scroll the terminal without closing the keyboard.
+  const handleMouseDown = useCallback((e: MouseEvent) => {
+    if (!captureInput) {
+      e.preventDefault();
+    }
+  }, [captureInput]);
+
   // Measure character cell size and compute cols/rows for a given container size
   const computeGridSize = useCallback(() => {
     const measure = measureRef.current;
@@ -372,6 +380,7 @@ export function Terminal({ session, client, captureInput }: TerminalProps) {
       class="terminal-wrapper"
       style={{ fontSize: `${fontSize}px` }}
       onClick={handleWrapperClick}
+      onMouseDown={handleMouseDown}
     >
       {captureInput && (
         <textarea
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 553a9f8..9faded3 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -3,4 +3,24 @@ import { App } from "./app";
 import "./styles/terminal.css";
 import "./styles/themes.css";
 
+// Desktop only: set --app-height from visualViewport for window resize.
+// Mobile uses position:fixed + 100dvh in CSS instead.
+function initViewportHeight() {
+  if (window.matchMedia("(pointer: coarse)").matches) return;
+  const vv = window.visualViewport;
+  if (!vv) return;
+
+  let timer: ReturnType<typeof setTimeout>;
+  const apply = () => {
+    document.documentElement.style.setProperty("--app-height", `${vv.height}px`);
+  };
+  apply();
+  vv.addEventListener("resize", () => {
+    clearTimeout(timer);
+    timer = setTimeout(apply, 150);
+  });
+}
+
+initViewportHeight();
+
 render(<App />, document.getElementById("app")!);
diff --git a/web/src/styles/terminal.css b/web/src/styles/terminal.css
index e332a47..a700917 100644
--- a/web/src/styles/terminal.css
+++ b/web/src/styles/terminal.css
@@ -31,15 +31,36 @@
   box-sizing: border-box;
 }
 
-html, body, #app {
+html, body {
   height: 100%;
   background: var(--bg);
   color: var(--fg);
 }
 
+@media (pointer: coarse) {
+  html, body {
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
+}
+
 #app {
+  height: var(--app-height, 100%);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--fg);
+}
+
+@media (pointer: coarse) {
+  #app {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100dvh;
+  }
 }
 
 /* ==========================================================================
@@ -169,11 +190,159 @@ html, body, #app {
 }
 
 /* ==========================================================================
-   Input Bar
+   Input Bar (mobile)
    ========================================================================== */
 
+.input-bar-wrap {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border);
+  background: var(--chrome);
+  flex-shrink: 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/* --- Modifier keys row --- */
+
+.modifier-bar {
+  display: flex;
+  gap: 6px;
+  padding: 6px 8px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.modifier-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.mod-key {
+  flex-shrink: 0;
+  height: 32px;
+  min-width: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: "SF Mono", "Menlo", "Monaco", "Cascadia Code", "Consolas", monospace;
+  font-size: 13px;
+  line-height: 30px;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.1s, border-color 0.1s;
+}
+
+.mod-key:active {
+  background: var(--cursor-color);
+  color: var(--bg);
+  border-color: var(--cursor-color);
+}
+
+.mod-key:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.mod-key-wide {
+  min-width: 48px;
+  font-weight: 600;
+}
+
+.mod-key-active {
+  background: var(--cursor-color);
+  color: var(--bg);
+  border-color: var(--cursor-color);
+  font-weight: 600;
+}
+
+.mod-key-ctrl-sub {
+  min-width: 32px;
+  padding: 0 8px;
+  font-weight: 600;
+}
+
+.mod-separator {
+  color: var(--fg);
+  opacity: 0.4;
+  font-size: 14px;
+  flex-shrink: 0;
+  line-height: 32px;
+}
+
+/* --- Input + Send row --- */
+
+.input-row {
+  display: flex;
+  gap: 8px;
+  padding: 6px 8px 8px;
+  align-items: center;
+}
+
+.input-row .input-field {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid #444;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-family: "SF Mono", "Menlo", "Monaco", "Cascadia Code", "Consolas", monospace;
+  font-size: 16px; /* 16px prevents iOS zoom on focus */
+  line-height: 24px;
+  height: 40px;
+  outline: none;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-user-modify: read-write-plaintext-only;
+}
+
+.input-row .input-field:empty::before {
+  content: attr(data-placeholder);
+  color: #666;
+  pointer-events: none;
+}
+
+.input-row .input-field:focus {
+  border-color: var(--cursor-color);
+}
+
+.send-btn {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: var(--cursor-color);
+  color: var(--bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.15s, transform 0.1s;
+}
+
+.send-btn:active {
+  transform: scale(0.9);
+  opacity: 0.85;
+}
+
+.send-btn:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* Legacy .input-bar selector kept for any remaining references */
 .input-bar {
   display: flex;
+  align-items: center;
   border-top: 1px solid var(--border);
   background: var(--chrome);
   padding: 8px;
@@ -1676,6 +1845,7 @@ html, body, #app {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -2628,6 +2798,7 @@ html, body, #app {
 .auth-prompt-btn:focus-visible,
 .auth-prompt-clear:focus-visible,
 .modifier-key:focus-visible,
+.send-btn:focus-visible,
 .error-boundary button:focus-visible {
   outline: 2px solid var(--accent, var(--cursor-color));
   outline-offset: 2px;
@@ -2638,6 +2809,7 @@ html, body, #app {
 .tag-editor-input:focus-visible,
 .palette-input:focus-visible,
 .shortcut-filter:focus-visible,
+.input-row .input-field:focus-visible,
 .input-bar input:focus-visible {
   outline: 2px solid var(--accent, var(--cursor-color));
   outline-offset: 0px;
@@ -2663,6 +2835,11 @@ html, body, #app {
     animation: none !important;
   }
 
+  /* Disable drawer slide animation */
+  .mobile-drawer {
+    animation: none !important;
+  }
+
   /* Disable fade-in animations */
   .session-grid-backdrop,
   .tile-action-btn,
@@ -2711,6 +2888,7 @@ html, body, #app {
 /* Mobile: bottom sheet replaces sidebar */
 .layout-mobile {
   flex-direction: column;
+  height: 100%;
 }
 
 .layout-mobile .layout-main {
@@ -2718,117 +2896,291 @@ html, body, #app {
   min-height: 0;
 }
 
-/* Bottom sheet tab bar */
-.bottom-sheet-tab {
+/* ======================================================================
+   Mobile Drawer (ChatGPT-style side navigation)
+   ====================================================================== */
+
+.mobile-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 200;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(300px, 85vw);
+  background: var(--bg, #0d0d1a);
+  border-right: 1px solid var(--border, #333);
+  z-index: 201;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: drawer-slide-in 0.2s ease-out;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
+}
+
+@keyframes drawer-slide-in {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+.mobile-drawer.closing {
+  animation: drawer-slide-out 0.2s ease-in forwards;
+}
+
+@keyframes drawer-slide-out {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+.mobile-drawer-backdrop.closing {
+  animation: backdrop-fade-out 0.2s ease-in forwards;
+}
+
+@keyframes backdrop-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.mobile-drawer-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--chrome, #1a1a1a);
-  border-top: 1px solid var(--border, #333);
+  justify-content: space-between;
+  padding: 16px;
+  padding-top: max(16px, env(safe-area-inset-top, 16px));
+  border-bottom: 1px solid var(--border, #333);
   flex-shrink: 0;
-  cursor: pointer;
-  user-select: none;
 }
 
-.bottom-sheet-group-name {
+.mobile-drawer-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--fg);
+}
+
+.mobile-drawer-connection {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   font-size: 12px;
-  font-weight: 600;
-  color: var(--fg, #ccc);
+  color: var(--fg);
+  opacity: 0.6;
 }
 
-.bottom-sheet-new-btn {
-  background: none;
-  border: 1px solid var(--border, #333);
+.mobile-drawer-new-session {
+  margin: 12px 16px;
+  padding: 12px 16px;
+  min-height: 44px;
+  border: none;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.08);
   color: var(--fg, #ccc);
+  font-size: 15px;
+  font-weight: 600;
   cursor: pointer;
-  padding: 2px 8px;
-  font-size: 14px;
-  border-radius: 6px;
-  transition: background 0.15s, border-color 0.15s;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.15s;
+  flex-shrink: 0;
 }
 
-.bottom-sheet-new-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: var(--accent, #666);
+.mobile-drawer-new-session:active {
+  background: rgba(255, 255, 255, 0.15);
 }
 
-.bottom-sheet-chevron {
-  font-size: 10px;
-  color: var(--fg, #ccc);
-  opacity: 0.5;
+.mobile-drawer-sessions {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 4px 0;
 }
 
-/* Backdrop */
-.bottom-sheet-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 150;
+.mobile-drawer-group-header {
+  padding: 12px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--fg);
+  opacity: 0.4;
 }
 
-/* Expanded panel */
-.bottom-sheet-panel {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  max-height: 60vh;
-  background: var(--chrome, #1a1a1a);
-  border-top: 1px solid var(--border, #333);
-  border-radius: 12px 12px 0 0;
-  padding: 8px 0;
-  z-index: 151;
-  overflow-y: auto;
+.mobile-drawer-session {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 0 16px;
+  min-height: 48px;
+  position: relative;
 }
 
-.bottom-sheet-handle {
-  width: 32px;
-  height: 4px;
-  background: var(--fg, #ccc);
-  opacity: 0.2;
-  border-radius: 2px;
-  margin: 0 auto 8px;
+.mobile-drawer-session.active {
+  background: rgba(255, 255, 255, 0.06);
+  border-left: 3px solid var(--cursor-color, #00d4ff);
+  padding-left: 13px;
 }
 
-.bottom-sheet-groups {
-  padding: 0 8px;
+.mobile-drawer-session-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 12px 0;
+  font-size: 15px;
+  color: var(--fg);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-drawer-session-name:active {
+  opacity: 0.7;
 }
 
-.bottom-sheet-group {
+.mobile-drawer-session-menu-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fg);
+  opacity: 0.4;
+  font-size: 18px;
+  cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
+  justify-content: center;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+  letter-spacing: 1px;
+}
+
+.mobile-drawer-session-menu-btn:active {
+  opacity: 0.8;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.mobile-drawer-session-menu {
+  position: absolute;
+  right: 16px;
+  top: 100%;
+  background: var(--chrome, #1a1a2e);
+  border: 1px solid var(--border, #333);
+  border-radius: 10px;
+  padding: 4px 0;
+  z-index: 10;
+  min-width: 140px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.mobile-drawer-session-menu button {
+  display: block;
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  color: var(--fg);
+  font-size: 15px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mobile-drawer-session-menu button:active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.mobile-drawer-session-menu button.destructive {
+  color: #e74c3c;
+}
+
+.mobile-drawer-rotate-btn {
+  width: 36px;
+  height: 36px;
+  border: none;
   border-radius: 8px;
+  background: transparent;
+  color: var(--fg);
+  opacity: 0.4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  transition: background 0.15s;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.15s, background 0.15s;
 }
 
-.bottom-sheet-group:hover,
-.bottom-sheet-group:active {
-  background: rgba(255, 255, 255, 0.05);
+.mobile-drawer-rotate-btn.on {
+  opacity: 0.9;
+  color: var(--cursor-color, #00d4ff);
 }
 
-.bottom-sheet-group.selected {
+.mobile-drawer-rotate-btn:active {
   background: rgba(255, 255, 255, 0.08);
 }
 
-.bottom-sheet-group-label {
-  font-size: 14px;
-  color: var(--fg, #ccc);
-  flex: 1;
+.mobile-drawer-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
+  border-top: 1px solid var(--border, #333);
+  flex-shrink: 0;
 }
 
-.bottom-sheet-group-count {
-  font-size: 12px;
-  color: var(--fg, #ccc);
-  opacity: 0.4;
+/* --- Mobile Top Bar --- */
+
+.mobile-topbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px 4px 4px;
+  background: var(--chrome, #0d0d1a);
+  border-bottom: 1px solid var(--border, #333);
+  flex-shrink: 0;
+  min-height: 44px;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
 }
 
-/* Focus-visible for bottom sheet */
-.bottom-sheet-new-btn:focus-visible,
-.bottom-sheet-group:focus-visible {
+.mobile-hamburger-btn {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--fg);
+  font-size: 22px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: 8px;
+}
+
+.mobile-hamburger-btn:active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.mobile-topbar-session {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Focus-visible for mobile drawer */
+.mobile-hamburger-btn:focus-visible,
+.mobile-drawer-new-session:focus-visible,
+.mobile-drawer-session:focus-visible {
   outline: 2px solid var(--accent, var(--cursor-color));
   outline-offset: 2px;
 }
@@ -2910,14 +3262,13 @@ html, body, #app {
     height: 30px;
   }
 
-  /* Main header: tighter */
+  /* Hide desktop chrome on mobile */
   .main-header {
-    padding: 4px 8px;
-    min-height: 28px;
+    display: none;
   }
 
-  .main-group-name {
-    font-size: 11px;
+  .pane-title-bar {
+    display: none;
   }
 }
 
diff --git a/web/src/styles/themes.css b/web/src/styles/themes.css
index 6c20a60..257470f 100644
--- a/web/src/styles/themes.css
+++ b/web/src/styles/themes.css
@@ -22,25 +22,44 @@
   border-top: 1px solid var(--border);
 }
 
-.theme-glass .input-bar {
+.theme-glass .input-bar,
+.theme-glass .input-bar-wrap {
   background: var(--chrome);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-top: 1px solid var(--border);
 }
 
-.theme-glass .input-bar input {
+.theme-glass .input-bar input,
+.theme-glass .input-row .input-field {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
-.theme-glass .input-bar input:focus {
+.theme-glass .input-bar input:focus,
+.theme-glass .input-row .input-field:focus {
   border-color: var(--cursor-color);
   box-shadow: 0 0 0 3px var(--accent-glow);
 }
 
+.theme-glass .mod-key {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.theme-glass .mod-key:active {
+  background: var(--cursor-color);
+  border-color: var(--cursor-color);
+}
+
+.theme-glass .send-btn {
+  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25);
+}
+
 .theme-glass .session-grid-backdrop {
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(24px) saturate(1.2);
@@ -262,29 +281,57 @@
   /* Keep dot color as-is */
 }
 
-.theme-neon .input-bar {
+.theme-neon .input-bar,
+.theme-neon .input-bar-wrap {
   background: var(--chrome);
   border-top: 1px solid rgba(0, 255, 204, 0.08);
 }
 
-.theme-neon .input-bar input {
+.theme-neon .input-bar input,
+.theme-neon .input-row .input-field {
   background: rgba(0, 255, 204, 0.03);
   border: 1px solid rgba(0, 255, 204, 0.1);
   color: var(--neon-green);
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
-.theme-neon .input-bar input::placeholder {
+.theme-neon .input-bar input::placeholder,
+.theme-neon .input-row .input-field::placeholder {
   color: rgba(0, 255, 204, 0.25);
 }
 
-.theme-neon .input-bar input:focus {
+.theme-neon .input-bar input:focus,
+.theme-neon .input-row .input-field:focus {
   border-color: var(--neon-green);
   box-shadow:
     0 0 0 1px rgba(0, 255, 204, 0.15),
     0 0 20px rgba(0, 255, 204, 0.08);
 }
 
+.theme-neon .mod-key {
+  background: rgba(0, 255, 204, 0.03);
+  border-color: rgba(0, 255, 204, 0.1);
+  color: var(--neon-green);
+  text-shadow: 0 0 6px rgba(0, 255, 204, 0.3);
+}
+
+.theme-neon .mod-key:active,
+.theme-neon .mod-key-active {
+  background: var(--neon-green);
+  color: var(--chrome);
+  text-shadow: none;
+}
+
+.theme-neon .send-btn {
+  background: var(--neon-green);
+  color: var(--chrome);
+  box-shadow: 0 0 12px rgba(0, 255, 204, 0.3);
+}
+
+.theme-neon .mod-separator {
+  color: var(--neon-green);
+}
+
 .theme-neon .session-grid-backdrop {
   background: rgba(5, 5, 10, 0.92);
 }
@@ -504,25 +551,51 @@
   color: #636366;
 }
 
-.theme-minimal .input-bar {
+.theme-minimal .input-bar,
+.theme-minimal .input-bar-wrap {
   background: var(--chrome);
   border-top: 0.5px solid var(--border);
+}
+
+.theme-minimal .input-bar {
   padding: 6px 8px;
 }
 
-.theme-minimal .input-bar input {
+.theme-minimal .input-bar input,
+.theme-minimal .input-row .input-field {
   background: var(--bg);
   border: 0.5px solid var(--border);
   border-radius: 6px;
-  font-size: 13px;
-  height: 32px;
+  font-size: 16px;
+  height: 36px;
   padding: 6px 10px;
 }
 
-.theme-minimal .input-bar input:focus {
+.theme-minimal .input-bar input:focus,
+.theme-minimal .input-row .input-field:focus {
   border-color: #48484a;
 }
 
+.theme-minimal .mod-key {
+  background: var(--bg);
+  border: 0.5px solid var(--border);
+  border-radius: 6px;
+  height: 30px;
+  font-size: 12px;
+}
+
+.theme-minimal .mod-key:active,
+.theme-minimal .mod-key-active {
+  background: var(--accent, #48484a);
+  color: var(--bg);
+}
+
+.theme-minimal .send-btn {
+  background: var(--accent, #48484a);
+  width: 36px;
+  height: 36px;
+}
+
 .theme-minimal .session-grid-backdrop {
   background: rgba(0, 0, 0, 0.75);
 }
@@ -973,6 +1046,10 @@
 html[class*="theme-"] .status-bar,
 html[class*="theme-"] .input-bar,
 html[class*="theme-"] .input-bar input,
+html[class*="theme-"] .input-bar-wrap,
+html[class*="theme-"] .input-row .input-field,
+html[class*="theme-"] .mod-key,
+html[class*="theme-"] .send-btn,
 html[class*="theme-"] .session-thumbnail,
 html[class*="theme-"] .tile-header,
 html[class*="theme-"] .tile-resize-handle,
