Merge pull request #390 from JDProfresh/fix/phone-breakpoint-480

fix(mobile): raise the phone breakpoint from 430px to 600px

CLAUDE.md

@@ -297,11 +297,11 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
 
 **Entrance animations** (`entrance-animations.js`, all OFF by default): opt-in animations for the four things that appear when work starts, chosen per surface via `data-tab-anim` / `data-term-anim` / `data-win-anim` / `data-line-anim` on `<html>`. Defaults are the `legacy` theme, so an untouched install behaves exactly as before and every hook short-circuits on its first line. ⚠️ Tabs and connection lines are **destroyed mid-animation** on every re-render (`_fullRenderSessionTabs()` replaces the strip's innerHTML; `_updateConnectionLinesImmediate()` does `svg.innerHTML = ''`), so both are tracked by id and re-applied to the fresh element with a **negative `animation-delay`** to resume rather than restart. ⚠️ The terminal-pane styles may animate **transform / opacity / clip-path only**, xterm's FitAddon derives rows+cols from `getComputedStyle(parent).width/height`, so animating width/height/padding there would resize the PTY; `test/entrance-animations.test.ts` pins that property allowlist, plus the rule→keyframes→theme-option chain a style silently does nothing without. ⚠️ **`blur` is the ONE style that puts a `filter` on the terminal container**, against the standing rule, because every alternative was measured against a live xterm and does not work: a `backdrop-filter` veil on `::before` blurs perfectly while STATIC and Chrome silently drops the backdrop the moment ANY animation runs on that pseudo-element (the veil computes `blur(15.3px)` and the text behind it stays razor sharp), and driving the radius from rAF buys the same full-screen blur per frame plus main-thread work. The cost the rule exists to avoid is inherent to blurring a terminal, so the style buys it knowingly: opt-in, OFF by default, one ~520ms run per session open, class straight back off, `will-change` still unset. Worst-case price, headless SwiftShader with no GPU: frame deltas 16.7ms → 33.3ms for the run, against 16.7ms flat for `fade`. Do not generalise it — a second filtered terminal style needs its own measurement. ⚠️ The `blur` connection line animates `filter` too, so both kinds of line hold their glow in **`--line-glow`** and both of its keyframes say `blur(N) var(--line-glow)`: the function lists then match and interpolate, instead of the glow vanishing for the run and popping back (a lineage line's glow is a different colour entirely, set per element). Its 100% frame deliberately omits `opacity` so the endpoint comes from the element's own resting value — 0.9 subagent, 0.72 lineage, 0.95 working — which is what `line-enter-fade`'s hardcoded 0.9 gets wrong. ⚠️ Window styles other than `beam` transform the window, which moves the rect its connection line is aimed at; `beam` deliberately animates opacity/filter only so its line can draw toward a stable target. Persisted to its own `codeman:*Anim` localStorage keys (per-device, deliberately NOT in the `.strict()` `SettingsUpdateSchema`); picker in App Settings → Appearance, full per-surface lab at `?animlab=1`.
 
-**Mobile tab strip scrolling** (issue #257): under 768px the tab strip is a horizontal scroller (desktop wraps to a second row instead), so the active tab can sit off-screen. Three rules keep it reachable and they only work together: `_updateActiveTabImmediate()` scrolls the selected tab into view via `computeTabScrollLeft()` (pure, in constants.js) using **rect math on the strip's own `scrollLeft`**, never `scrollIntoView()`, which would also scroll the document under a fixed header; `_fullRenderSessionTabs()` **restores `scrollLeft`** across the `innerHTML` rebuild, since ambient rebuilds (a task badge appearing, a session created elsewhere) otherwise snap a mid-swipe strip back to 0; and it re-reveals the active tab **only when it changed** (`_lastRenderedActiveTabId`), so browsing the far end of the strip is not undone by background renders. ⚠️ **The ACTIVE tab is the only one with action icons, and on a phone they can eat it**: `.session-tab.active .tab-name` reserves `min-width: 44px` in the ≤430px block, because a short session name rendered a 13px label against a 50px gear+close cluster, putting the tab's geometric CENTRE on the gear, so a thumb aiming at the tab opened Session Options instead of switching (measured at 360/393/430px; only long names cleared it). ⚠️ **The floor is set by the 10th tab onward, not by the tabs you can see**: `.tab-number` renders only for `_tabIdx < 9`, so tab 10 loses 16px + a gap off its left and its centre sits 10px further right. The centre clears the icons when `reserved > icons + rightEdge - leftRunUp - gap` (= 50 + 9 - 17 - 4 = **38px**), hit-testing snaps to whole pixels so 39px still lands on the gear, and the practical floor is 40px — a NUMBERED tab clears it at 20px, which is exactly why reasoning from the tabs on screen would put the centre back on the gear. `test/mobile-tab-tap-zones.test.ts` recomputes that inequality from the stylesheet, so widening the gear or the padding fails there rather than on a phone. The guarantee is centre-off-the-ICONS, not centre-inside-the-label (on a numberless tab it lands in the gap between them, which still switches). Non-active tabs keep their icons hidden and stay tappable end to end. ⚠️ Mobile no longer hoists the active session to the front of the strip: that reordering ran on full renders only, so tab order flipped depending on which render path fired, and it renumbered the Alt+N badges. Scroll-into-view replaces it; do not reintroduce it.
+**Mobile tab strip scrolling** (issue #257): under 768px the tab strip is a horizontal scroller (desktop wraps to a second row instead), so the active tab can sit off-screen. Three rules keep it reachable and they only work together: `_updateActiveTabImmediate()` scrolls the selected tab into view via `computeTabScrollLeft()` (pure, in constants.js) using **rect math on the strip's own `scrollLeft`**, never `scrollIntoView()`, which would also scroll the document under a fixed header; `_fullRenderSessionTabs()` **restores `scrollLeft`** across the `innerHTML` rebuild, since ambient rebuilds (a task badge appearing, a session created elsewhere) otherwise snap a mid-swipe strip back to 0; and it re-reveals the active tab **only when it changed** (`_lastRenderedActiveTabId`), so browsing the far end of the strip is not undone by background renders. ⚠️ **The ACTIVE tab is the only one with action icons, and on a phone they can eat it**: `.session-tab.active .tab-name` reserves `min-width: 44px` in the phone block (under 600px), because a short session name rendered a 13px label against a 50px gear+close cluster, putting the tab's geometric CENTRE on the gear, so a thumb aiming at the tab opened Session Options instead of switching (measured at 360/393/430px; only long names cleared it). ⚠️ **The floor is set by the 10th tab onward, not by the tabs you can see**: `.tab-number` renders only for `_tabIdx < 9`, so tab 10 loses 16px + a gap off its left and its centre sits 10px further right. The centre clears the icons when `reserved > icons + rightEdge - leftRunUp - gap` (= 50 + 9 - 17 - 4 = **38px**), hit-testing snaps to whole pixels so 39px still lands on the gear, and the practical floor is 40px — a NUMBERED tab clears it at 20px, which is exactly why reasoning from the tabs on screen would put the centre back on the gear. `test/mobile-tab-tap-zones.test.ts` recomputes that inequality from the stylesheet, so widening the gear or the padding fails there rather than on a phone. The guarantee is centre-off-the-ICONS, not centre-inside-the-label (on a numberless tab it lands in the gap between them, which still switches). Non-active tabs keep their icons hidden and stay tappable end to end. ⚠️ Mobile no longer hoists the active session to the front of the strip: that reordering ran on full renders only, so tab order flipped depending on which render path fired, and it renumbered the Alt+N badges. Scroll-into-view replaces it; do not reintroduce it.
 
 **Session list layout: header strip or left sidebar** (`sessionListLayout`, App Settings → Appearance → Tabs, default `header`; per-device policy — it IS in `SettingsUpdateSchema` and persists server-side, but `displayKeys` makes a device keep its own value): with many sessions the horizontal strip stops being scannable, so the list can move into a vertical `<aside>` with a filter box and a live count, collapsible to a 44px rail (`--sidebar-width` 260 / `--sidebar-width-collapsed` 44) via **Alt+B** (`toggleSessionSidebar`; Alt, not Ctrl+B, which must reach tmux/readline in the terminal). ⚠️ **There is ONE `#sessionTabs` element and it is MOVED between hosts** (`#sessionTabsHost` in the header, `#sessionSidebarList` in the aside, `#tabRail` for the vertical rail below), never a second list — so every render path, drag-reorder handler and Alt+N index keeps working unchanged. Exactly TWO functions reparent it and they must run in this order: `applySessionListLayout()` first (sidebar wins), then `applyTabOrientation()` (settings-ui.js), which moves the tabs into `#tabRail` only when the sidebar does not own them. ⚠️ It sets `data-session-list` / `data-sidebar` on `<html>` and must run BEFORE `applyTabWrapSettings()`, which is the one owner of `tabs-two-rows`/`tabs-show-folder` and reads those attributes. ⚠️ **The vertical tab rail** (`tabOrientation`/`tabRailWidth`/`sessionSidebarFontSize`, all per-device display keys that ARE in the schema, like `sessionListLayout`) is a SECOND vertical list next to the sidebar: the orientation setting is silently ignored while the sidebar layout is chosen, desktop/tablet only (`resolveTabOrientation` forces horizontal on mobile), resizable via `tab-rail-resize.js` (which owns terminal refits during the drag). ⚠️ **Detailed rows are a property of a vertical LIST, not of one surface** (`sessionListLayout: 'sidebar-rich'` for the sidebar, `tabRailDetail: 'rich'|'simple'` for the rail, rail default **rich**): both draw the home screen's per-session line (`created 3d ago · working 12m`) plus a status pill, from the SAME row model (`_sidebarRichRow`/`_sidebarRichMetaHTML` in app.js, classified by `_mobileOverviewState`/`_mobileOverviewSince`), and the render paths ask ONE gate, `isRichTabRows()` (= `isSessionSidebarRich() || isTabRailRich()`). ⚠️ Detail rides on its own attribute (`data-sidebar-detail` / `data-tab-rail-detail`) so every existing `[data-session-list="sidebar"]` / `[data-tab-orientation='vertical']` rule keeps matching both variants untouched; a flip of detail ALONE still needs a full render (the stamps line is emitted by the row template, not toggled by CSS) and must re-run `applyTabWrapSettings()`, which owns the folder line and is now rail-aware. ⚠️ The rich CSS rules carry a rail twin as a COMMA-GROUPED selector, never `:is()` (an `:is()` list takes its most specific argument, which would lift the sidebar arm from (0,3,1) to the rail's (0,5,1)). ⚠️ Width is the whole reason there are thresholds: the rich sidebar is 300px (`--sidebar-width-rich`) and a rail that has never been sized defaults to **320** (`RICH_DEFAULT_WIDTH`, the existing Wide preset) instead of 256, because at 256 the stamps line ellipsizes mid-word; a user-narrowed rail drops the created stamp below 288 (`tab-rail-tight`, CSS only) and drops rich rows entirely below 240 (`tab-rail-compact`, which re-renders). A stored width is never overridden. ⚠️ Only detailed rows carry stamps that go stale with no event behind them, so `_startSidebarRichClock()` (20s, rewrites text in place — a re-render would restart every row's animation) must be armed and disarmed by BOTH `applySessionListLayout()` and `applyTabOrientation()`. ⚠️ **Axis decisions must use `_isVerticalTabList()`** (sidebar OR rail), never `isSessionSidebarActive()` alone: the rail leaves `data-session-list` at `header`, and the sidebar-only predicate shipped four rail bugs at once (drag insertion side read from clientX, active tab never scrolled into view, floating windows anchored below tabs instead of beside them, connector redraws skipped on rail scroll). The pre-paint script stamps `data-tab-orientation` (+ `--tab-rail-width`) like it stamps the sidebar keys, or vertical mode flashes through the header strip; the name font size defaults to 12px, the sidebar's historical size, so untouched installs are never restyled. ⚠️ Leaving sidebar mode **clears `_sidebarFilter`**: the filter box only exists in the aside, so a stale filter would hide sessions from the header strip with no reachable control to clear it. ⚠️ On handhelds the aside is an off-canvas overlay rather than a docked rail, and a closed drawer keeps `display: flex`, so it is marked `inert` + `aria-hidden` (`_isSessionSidebarOverlay()`) or its filter box and ~4 tab stops per session stay in the tab order; the DOCKED desktop rail must never be inerted, its rows are still clickable. The desktop home rail (`home-sessions.js`) dLine truncated
 
-**Phone overview home screen** (`mobile-overview.js`, phones only, per-device `mobileOverviewEnabled`, default ON): under 430px the "C" logo shows a session overview (NEEDS YOU / CURRENT SESSIONS / PAST SESSIONS) instead of the welcome overlay; tablet and desktop are unchanged. The branch lives in `showWelcome()`/`hideWelcome()` (terminal-ui.js) behind `shouldUseMobileOverview()`, which is **width-driven** (`getDeviceType() === 'mobile'`) because this is a layout decision, unlike the settings namespace which stays handheld-based. ⚠️ The container ships with the `hidden` attribute and only this module removes it: never give `.mobile-overview` a bare `display` rule, since desktop does not load `mobile.css` (`media="(max-width: 1023px)"`) and would then render it unstyled. Live re-renders ride on the tail of `_renderSessionTabsImmediate()` (every state change it needs already funnels there); PAST rows come from one `_fetchUnifiedSessions(60)` per home-screen visit and resume through the shared `resumeHistorySession()`, so they behave exactly like the welcome screen's Resume list. ⚠️ Two things must stay in lockstep with surfaces outside this module, because divergence reads as a bug rather than a style: the split Run button carries the **toolbar's own classes** (`btn-toolbar btn-run mode-<backend>` / `btn-run-gear`) so the per-backend gradient and the light-skin overrides apply unchanged (mobile.css must therefore set no `background`/`color` on it), and row status uses the **session-tab language** (green dot when fine, `pulse` while working, yellow blinking row when waiting for input, red blinking row when a question is pending, mirroring `tab-alert-idle`/`tab-alert-action`). The picker mirrors the toolbar run-mode menu (`setRunMode()` + `run()`, `openWebviewFromMenu()` for saved dashboards) and deliberately omits its Recent-Sessions block, since PAST SESSIONS is that. Status pills carry `data-i18n-skip` (generic words like "idle" collide with state strings elsewhere).
+**Phone overview home screen** (`mobile-overview.js`, phones only, per-device `mobileOverviewEnabled`, default ON): under 600px the "C" logo shows a session overview (NEEDS YOU / CURRENT SESSIONS / PAST SESSIONS) instead of the welcome overlay; tablet and desktop are unchanged. The branch lives in `showWelcome()`/`hideWelcome()` (terminal-ui.js) behind `shouldUseMobileOverview()`, which is **width-driven** (`getDeviceType() === 'mobile'`) because this is a layout decision, unlike the settings namespace which stays handheld-based. ⚠️ The container ships with the `hidden` attribute and only this module removes it: never give `.mobile-overview` a bare `display` rule, since desktop does not load `mobile.css` (`media="(max-width: 1023px)"`) and would then render it unstyled. Live re-renders ride on the tail of `_renderSessionTabsImmediate()` (every state change it needs already funnels there); PAST rows come from one `_fetchUnifiedSessions(60)` per home-screen visit and resume through the shared `resumeHistorySession()`, so they behave exactly like the welcome screen's Resume list. ⚠️ Two things must stay in lockstep with surfaces outside this module, because divergence reads as a bug rather than a style: the split Run button carries the **toolbar's own classes** (`btn-toolbar btn-run mode-<backend>` / `btn-run-gear`) so the per-backend gradient and the light-skin overrides apply unchanged (mobile.css must therefore set no `background`/`color` on it), and row status uses the **session-tab language** (green dot when fine, `pulse` while working, yellow blinking row when waiting for input, red blinking row when a question is pending, mirroring `tab-alert-idle`/`tab-alert-action`). The picker mirrors the toolbar run-mode menu (`setRunMode()` + `run()`, `openWebviewFromMenu()` for saved dashboards) and deliberately omits its Recent-Sessions block, since PAST SESSIONS is that. Status pills carry `data-i18n-skip` (generic words like "idle" collide with state strings elsewhere).
 
 **Desktop home tab rail** (`home-sessions.js`, desktop only): the welcome overlay centers ~560px of content in a ~1400px window, so its left gutter is dead space; it carries the open tabs as a rail **docked flush to the left edge, full height** (a vertically centered card floating mid-gutter read as debris). Rows are in **overview order** (see below), and each carries a **created** stamp plus the **state duration** the order is computed from (`created 3d ago · working 12m`, word and anchor from `_mobileOverviewSince()` so both home screens say the same thing). A rail sorted by a number it does not show reads as arbitrarily shuffled, and a working row's plain last-active stamp always says "just now". ⚠️ The number badge is the **Alt+1..9 index**, i.e. the position in the TAB STRIP, so on a sorted rail it deliberately does NOT run 1,2,3 downward: it names a shortcut, not a row position, and renumbering it to look tidy would make every badge lie. State classification is REUSED from mobile-overview.js (`_mobileOverviewState`/`_mobileOverviewCaseFor`), which is why the module loads after it. ⚠️ The rail is `position: absolute` so the centered content never moves, which is exactly why it needs a **width gate in two places** — `HOME_SESSIONS_MIN_WIDTH` (1180) in the JS plus a `max-width: 1179px` media query as the backstop for a resize that outruns the matchMedia listener; drift between them means a rail overlapping the search panel, and `test/home-sessions.test.ts` pins them equal. ⚠️ `.home-sessions` is `display: flex`, so `[hidden]` must be re-asserted as `display: none` or the module's only visibility lever does nothing. ⚠️ Size scales with the viewport off **one knob**: `width: clamp(250px, 19vw, 430px)` plus a fluid `font-size` on `.home-sessions`, with every child sized in `em` — reintroducing `rem`/px type inside the block silently breaks the scaling, and widening the clamp past the gutter reintroduces the overlap the gate exists to prevent. The age stamps are refreshed **in place** by a 20s clock (`_tickHomeSessionsTimes()`, disarmed in `hideHomeSessions()`), never by re-rendering, which would restart every row's blink and working ring. Working state is deliberately byte-identical to the phone's: pulsing green dot + the `tab-load-spin` ring reused from the tab strip + the same green halo (added to `.mobile-overview-dot--working` at the same time), so "working" reads the same on every surface; **idle** is deliberately NOT that green — dot and pill mix toward `--text-muted` so a glance separates running from sitting. Live re-renders ride the tail of `_renderSessionTabsImmediate()` alongside the phone overview.
 
@@ -331,7 +331,7 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
 
 **Dismissing the on-screen keyboard** (PRs #279/#280, `terminal-ui.js`): the terminal parks focus on a hidden textarea that nothing used to release, so TWO gestures now blur it, and they own different regions. **(1)** `_installMobileKeyboardDismiss()` — a document-level `touchend` that fires only while the terminal input actually holds focus, **never inside `#terminalContainer`** (tap classification owns that) and **never on a control** (`MOBILE_KEYBOARD_DISMISS_EXEMPT_SELECTOR`, matched with `closest()` so an icon inside a button counts). Session tabs are covered by the selector's `[tabindex]:not([tabindex="-1"])` arm, which is what stops a tab tap from blurring and then being re-focused by `selectSession()`. **(2)** In `_handleMobileTerminalTap`, a second tap on **inert `content`** (`startedWithTerminalFocus`) blurs instead of re-focusing. ⚠️ Scoped to `content` on purpose: the prompt row (`input`) keeps focus-then-position so a second tap still places the caret, and actionable rows blur earlier via `_isActionableMobileTerminalTap`. ⚠️ **A scroll ends in `touchend` too** — dismissing there closes the keyboard and drops the composer mid-read, so travel is tracked from `touchstart` and multi-touch is never a tap. Both classifiers MUST share one threshold: `initTerminal`'s `TAP_THRESHOLD` reads `MOBILE_KEYBOARD_DISMISS_TAP_SLOP`, since a gesture the terminal calls a scroll and the dismiss handler calls a tap is exactly that bug. ⚠️ **The gate excludes `test/mobile/**`, so CI cannot see the only test covering (1)** — run `npm run test:mobile -- test/mobile/keyboard.test.ts` by hand and diff the FAIL list against master. (Not `npm test --`: the gate's config excludes that path, so a file filter pointing into it matches nothing and exits green having run zero tests.) That blind spot is why merging the two PRs, which conflicted semantically but not textually, produced a red suite with two green CI checks.
 
-**Phone toolbar: Enter replaces Shell** (post-1.8.0): inside `@media (max-width: 430px)` `btn-shell` is `display:none` and `btn-enter` takes its slot (`order: 4`); starting a shell moved into the Run dropdown (`Terminal / Shell` → `setRunMode('shell')` → `run()` → `runShell()`, button label "Run SH"). `runMode` is `z.string().max(20)` server-side, so new modes need no schema change. Desktop and tablet keep the green Run Shell button unchanged.
+**Phone toolbar: Enter replaces Shell** (post-1.8.0): inside `@media (max-width: 599px)` `btn-shell` is `display:none` and `btn-enter` takes its slot (`order: 4`); starting a shell moved into the Run dropdown (`Terminal / Shell` → `setRunMode('shell')` → `run()` → `runShell()`, button label "Run SH"). `runMode` is `z.string().max(20)` server-side, so new modes need no schema change. Desktop and tablet keep the green Run Shell button unchanged.
 
 ⚠️ **`sendEnterKey()` MUST go through `terminal._core.coreService.triggerDataEvent('\r', true)`** — not `sendInput()`, and never a raw POST to `/api/sessions/:id/input`. `localEchoEnabled` defaults to `MobileDetection.isTouchDevice()`, so on every phone the characters you type are buffered in the `LocalEchoOverlay` and have **never reached the PTY**; the `onData` Enter branch in terminal-ui.js is what flushes `pendingText` first and only then sends `\r` (after an 80ms delay so text lands first). Sending a bare `\r` submits an empty line and strands the typed text on screen, so the button looks dead. Replaying the keypress reuses the overlay flush, the flushed-offset cleanup and the ordering instead of reimplementing them. `KeyboardAccessory.sendKey()` is for escape sequences (arrows/Esc) and is the WRONG template to copy for input.
 

src/web/public/index.html

@@ -686,7 +686,7 @@
           <button class="btn-toolbar btn-shell" onclick="app.runShell()" title="Run Shell">
             Run Shell
           </button>
-          <!-- Phone-only: replaces the Shell button on ≤430px (Shell moves into the Run
+          <!-- Phone-only: replaces the Shell button under 600px (Shell moves into the Run
                dropdown there). Sends a bare Enter to the active session, the complement
                to the accessory bar's Esc. Hidden everywhere else — see styles.css. -->
           <button class="btn-toolbar btn-enter" onclick="app.sendEnterKey()" title="Send Enter">

src/web/public/mobile-handlers.js

@@ -85,20 +85,20 @@ const MobileDetection = {
     return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   },
 
-  /** Check if screen is small (phone-sized, <430px) */
+  /** Check if screen is small (phone-sized, <600px) */
   isSmallScreen() {
-    return window.innerWidth < 430;
+    return window.innerWidth < 600;
   },
 
-  /** Check if screen is medium (tablet-sized, 430-768px) */
+  /** Check if screen is medium (tablet-sized, 600-768px) */
   isMediumScreen() {
-    return window.innerWidth >= 430 && window.innerWidth < 768;
+    return window.innerWidth >= 600 && window.innerWidth < 768;
   },
 
   /** Get device type based on screen width */
   getDeviceType() {
     const width = window.innerWidth;
-    if (width < 430) return 'mobile';
+    if (width < 600) return 'mobile';
     if (width < 768) return 'tablet';
     return 'desktop';
   },

src/web/public/mobile-overview.js

@@ -12,7 +12,7 @@
  * the SAME comparator the desktop rail uses: blocked longest-first, then
  * running longest-first, then quiet most-recently-quiet first.
  *
- * PHONE ONLY. The gate is `shouldUseMobileOverview()` (viewport < 430px, not a
+ * PHONE ONLY. The gate is `shouldUseMobileOverview()` (viewport < 600px, not a
  * popped-out solo window, per-device setting on). Tablet and desktop keep the
  * welcome overlay untouched. The container ships with the `hidden` attribute and
  * only this module removes it, so desktop (which never loads mobile.css) cannot
@@ -38,7 +38,7 @@
  */
 
 /** Viewport width that counts as a phone. Matches the mobile.css phone block. */
-const MOBILE_OVERVIEW_PHONE_QUERY = '(max-width: 430px)';
+const MOBILE_OVERVIEW_PHONE_QUERY = '(max-width: 599px)';
 
 /** How many past conversations show before the "Show all" toggle. */
 const MOBILE_OVERVIEW_PAST_LIMIT = 8;

src/web/public/mobile.css

@@ -46,9 +46,9 @@ html.mobile-init .file-browser-panel {
 }
 
 /* ============================================================================
-   Tablet Breakpoint (430px - 768px)
+   Tablet Breakpoint (600px - 768px)
    ============================================================================ */
-@media (max-width: 768px) and (min-width: 430px) {
+@media (max-width: 768px) and (min-width: 600px) {
   /* Compact header for tablet - fixed at top, includes safe area padding */
   .header {
     position: fixed;
@@ -303,12 +303,12 @@ html.mobile-init .file-browser-panel {
   }
 
   /* Show desktop voice button on tablet (hidden by max-width:1023px in styles.css,
-     mobile .btn-voice-mobile only shows at <430px) */
+     mobile .btn-voice-mobile only shows at <600px) */
   .toolbar-center .btn-toolbar.btn-voice {
     display: flex !important;
   }
 
-  /* Toolbar — use desktop-style sizing on tablet (plenty of room at 430-768px) */
+  /* Toolbar — use desktop-style sizing on tablet (plenty of room at 600-768px) */
   .toolbar {
     padding: 0 0.5rem;
     gap: 0.5rem;
@@ -333,9 +333,9 @@ html.mobile-init .file-browser-panel {
 }
 
 /* ============================================================================
-   Phone Breakpoint (<430px)
+   Phone Breakpoint (<600px)
    ============================================================================ */
-@media (max-width: 430px) {
+@media (max-width: 599px) {
   /* Phones get a 44px header, up from 36px. Every header control is a touch
      target and 44px is the floor for one; the brand "C" that gets you home is
      the one that matters most. Redefined as the TOKEN rather than a literal so
@@ -499,7 +499,7 @@ html.mobile-init .file-browser-panel {
 
   /* Exception to the 26px shrink above: in sidebar layout this button is the
      ONLY way to open the session list — the strip it replaced is gone. A 26px
-     target is below --touch-target-min (44px), which the 430-768px block
+     target is below --touch-target-min (44px), which the 600-768px block
      already enforces for every other header button. */
   html[data-session-list='sidebar'] #sidebarToggleBtn {
     width: 44px;
@@ -1170,7 +1170,7 @@ html.mobile-init .file-browser-panel {
     }
   }
 
-  @media (max-width: 430px) {
+  @media (max-width: 599px) {
     .btn-case-settings-mobile {
       display: none !important;
     }
@@ -3147,7 +3147,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
 
 /* Keyboard accessory bar + paste overlay base styles moved to styles.css
    (always loaded — covers iPad landscape where mobile.css doesn't load).
-   Phone-specific overrides remain in @media (max-width: 430px) above. */
+   Phone-specific overrides remain in @media (max-width: 599px) above. */
 
 /* ============================================================================
    iOS Safari Specific Fixes
@@ -3190,7 +3190,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
   }
 }
 
-@media (max-width: 430px) {
+@media (max-width: 599px) {
   /* Attachment history (COD-18): full-screen sheet on phones */
   .attachment-history-drawer {
     top: 0;
@@ -3240,7 +3240,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
    already reserves that space), so it needs the same safe-area padding as the
    other banners. The overlay is fixed and handles its own insets.
    ============================================================================ */
-@media (max-width: 430px) {
+@media (max-width: 599px) {
   .offline-banner {
     padding: 0.4rem 0.5rem;
     padding-left: calc(0.5rem + var(--safe-area-left));
@@ -3730,7 +3730,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
    This whole file is served with media="(max-width: 1023px)", so these
    top-level rules cover the entire handheld range — deliberately NOT wrapped in
    a nested @media, because the two compact `.session-tabs` blocks above live in
-   `max-width: 768px` and `max-width: 430px` and would leave 769-1023px
+   `max-width: 768px` and `max-width: 599px` and would leave 769-1023px
    unhandled.
 
    Placement at the END of the file is load-bearing: the compact strip blocks at

src/web/public/session-ui.js

@@ -2526,7 +2526,7 @@ Object.assign(CodemanApp.prototype, {
       if (!input._mobileScrollWired) {
         input._mobileScrollWired = true;
         input.addEventListener('focus', () => {
-          if (window.innerWidth <= 430) {
+          if (window.innerWidth < 600) {
             setTimeout(() => input.scrollIntoView({ behavior: 'smooth', block: 'center' }), 300);
           }
         });

src/web/public/settings-ui.js

@@ -402,7 +402,7 @@ Object.assign(CodemanApp.prototype, {
     document.getElementById('appSettingsShowMultiMonitorButton').checked = settings.showMultiMonitorButton ?? defaults.showMultiMonitorButton ?? false;
     document.getElementById('appSettingsShowPlanUsageLimits').checked = this.planUsageChipEnabled(settings);
     document.getElementById('appSettingsShowRedrawButton').checked = settings.showRedrawButton ?? defaults.showRedrawButton ?? false;
-    // Phone overview home screen: only meaningful under 430px, so the row is
+    // Phone overview home screen: only meaningful under 600px, so the row is
     // hidden elsewhere rather than offering a toggle that changes nothing.
     // Spawn lineage lines: desktop-only (the overlay sits UNDER the fixed mobile
     // header), so the row is hidden elsewhere rather than offering a toggle that

src/web/public/styles.css

@@ -5270,7 +5270,7 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
 .run-mode-dot.shell { background: #94a3b8; }
 
 /* Phone-only Enter button (see index.html). Hidden by default at every width;
-   mobile.css turns it on inside @media (max-width: 430px), where it takes over
+   mobile.css turns it on inside @media (max-width: 599px), where it takes over
    the slot the Shell button occupies on wider screens. */
 .btn-toolbar.btn-enter {
   display: none;
@@ -11930,7 +11930,7 @@ kbd {
 }
 /* Footer row: the buttons are btn-toolbar (display: flex, block-level), so
    without this rule the four of them stack vertically. Mirrors the
-   runSummaryModal footer; the ≤430px block in mobile.css adds wrapping. */
+   runSummaryModal footer; the phone block (under 600px) in mobile.css adds wrapping. */
 .readmymind-modal .modal-footer {
   display: flex;
   justify-content: flex-end;
@@ -13307,7 +13307,7 @@ body.touch-device.cjk-input-visible .main {
    Keyboard Accessory Bar
    Base styles in styles.css (always loaded) so iPad landscape (≥1024px,
    where mobile.css doesn't load) still gets dark styling. Phone overrides
-   remain in mobile.css @media (max-width: 430px).
+   remain in mobile.css @media (max-width: 599px).
    ═══════════════════════════════════════════════════════════════ */
 
 .keyboard-accessory-bar {

src/web/public/terminal-ui.js

@@ -5082,7 +5082,7 @@ Object.assign(CodemanApp.prototype, {
     const viewportType =
       typeof MobileDetection !== 'undefined' && MobileDetection.getDeviceType
         ? MobileDetection.getDeviceType()
-        : window.innerWidth < 430
+        : window.innerWidth < 600
           ? 'mobile'
           : window.innerWidth < 768
             ? 'tablet'

test/home-sessions.test.ts

@@ -54,7 +54,7 @@ function loadHomeSessionsApp(overrides: Record<string, any> = {}, innerWidth = 1
       createElement: () => fakeElement(),
       createElementNS: () => fakeElement(),
     },
-    MobileDetection: { getDeviceType: () => (innerWidth < 430 ? 'mobile' : 'desktop') },
+    MobileDetection: { getDeviceType: () => (innerWidth < 600 ? 'mobile' : 'desktop') },
   });
   for (const file of ['constants.js', 'mobile-overview.js', 'home-sessions.js']) {
     vm.runInContext(readFileSync(resolve(PUBLIC, file), 'utf8'), context, { filename: file });

test/mobile-header-buttons-policy.test.ts

@@ -10,7 +10,7 @@
 //
 // Policy: every header button that is VISIBLE BY DEFAULT on desktop must have an
 // explicit decision for phones — either it's hidden via an @media (max-width:
-// 430px) display:none rule in mobile.css, or it's added to MOBILE_VISIBLE_ALLOWLIST
+// 600px) display:none rule in mobile.css, or it's added to MOBILE_VISIBLE_ALLOWLIST
 // below with a reason. A new default-visible header button with neither fails this
 // test, forcing the author to decide its mobile behavior.
 //
@@ -123,7 +123,7 @@ describe('Mobile header button policy (static guard)', () => {
         hidden || allowed,
         `Header button .${btn.distinguishing.join('.')} (id=${btn.id || '?'}) is VISIBLE BY DEFAULT but has ` +
           `no mobile-visibility decision.\n` +
-          `  → To hide it on phones: add it to the @media (max-width: 430px) "display: none" block in ` +
+          `  → To hide it on phones: add it to the @media (max-width: 599px) "display: none" block in ` +
           `src/web/public/mobile.css (next to .btn-settings / .btn-lifecycle-log).\n` +
           `  → To keep it visible on phones: add '${btn.distinguishing[0]}' to MOBILE_VISIBLE_ALLOWLIST in ` +
           `this test, with a reason.\n` +
@@ -137,7 +137,7 @@ describe('Mobile header button policy (static guard)', () => {
     for (const cls of KNOWN_PHONE_HIDDEN) {
       expect(
         phoneHidden.has(cls),
-        `${cls} must stay hidden on phones — restore its rule in the @media (max-width: 430px) ` +
+        `${cls} must stay hidden on phones — restore its rule in the @media (max-width: 599px) ` +
           `display:none block in src/web/public/mobile.css.`
       ).toBe(true);
     }

test/mobile-overview.test.ts

@@ -1,7 +1,7 @@
 // Port: none (pure model + static markup assertions — no browser, no server).
 //
 // The phone home screen (src/web/public/mobile-overview.js) replaces the welcome
-// overlay under 430px. Its grouping logic is the part that can silently go wrong:
+// overlay under 600px. Its grouping logic is the part that can silently go wrong:
 // a session blocked on a permission prompt landing in "idle" is exactly the bug
 // this surface exists to prevent. buildMobileOverviewModel() is pure for that
 // reason, so it can be exercised here against plain objects.

test/mobile-tab-tap-zones.test.ts

@@ -43,7 +43,7 @@ import { describe, expect, it } from 'vitest';
 const CSS = readFileSync(resolve(import.meta.dirname, '../src/web/public/mobile.css'), 'utf8');
 const ROOT = postcss.parse(CSS);
 /** The phone block. Tablets keep the roomier layout and are deliberately out of scope. */
-const PHONE_QUERY = '(max-width: 430px)';
+const PHONE_QUERY = '(max-width: 599px)';
 /** `.session-tab` border, from styles.css: `border: 1px solid transparent`. */
 const TAB_BORDER = 1;
 /**

test/mobile/README.md

@@ -89,11 +89,11 @@ Matching `app.js MobileDetection` and `mobile.css` media queries:
 
 | Breakpoint | Width | CSS Class | Header | Toolbar |
 |------------|-------|-----------|--------|---------|
-| **Phone** | ≤ 430px | `device-mobile` | Fixed at top | Fixed at bottom |
-| **Tablet** | 431–768px | `device-tablet` | Fixed at top | Relative (in flow) |
+| **Phone** | ≤ 599px | `device-mobile` | Fixed at top | Fixed at bottom |
+| **Tablet** | 600–768px | `device-tablet` | Fixed at top | Relative (in flow) |
 | **Desktop** | > 768px | `device-desktop` | Relative (in flow) | Relative (in flow) |
 
-Breakpoint boundaries (430px, 768px) use `max-width` which is **inclusive** — a 430px device is phone, a 768px device is tablet.
+The phone block is `max-width: 599px` and the tablet block starts at `min-width: 600px`, so a 599px device is phone and a 600px device (Nexus 7) is a small tablet in both CSS and the JS `getDeviceType()` cutoff (`< 600`). The tablet/desktop boundary (768px) is `max-width` inclusive: a 768px device is tablet.
 
 ## Architecture
 

test/mobile/device-matrix.test.ts

@@ -27,7 +27,7 @@ const BASE_URL = `http://localhost:${PORT}`;
 
 let server: WebServer;
 
-// Hidden on phones (< 430px width)
+// Hidden on phones (< 600px width)
 const PHONE_HIDDEN_SELECTORS = [
   SELECTORS.HEADER_BRAND,
   SELECTORS.CASE_SELECT_GROUP,
@@ -94,7 +94,7 @@ describe('Device Matrix', () => {
       const { width } = device.viewport;
       const position = await getCSSProperty(page, SELECTORS.TOOLBAR, 'position');
       if (width <= BREAKPOINTS.PHONE_MAX) {
-        // Phone (max-width: 430px includes 430): fixed toolbar
+        // Phone (max-width: 599px): fixed toolbar
         expect(position).toBe('fixed');
       } else {
         // Tablet/desktop: relative toolbar

test/mobile/devices.ts

@@ -26,7 +26,7 @@ export interface DeviceEntry {
 // ---------------------------------------------------------------------------
 
 function breakpointFor(width: number): 'phone' | 'tablet' | 'desktop' {
-  if (width < 430) return 'phone';
+  if (width < 600) return 'phone';
   if (width < 768) return 'tablet';
   return 'desktop';
 }

test/mobile/helpers/constants.ts

@@ -59,7 +59,7 @@ export const SELECTORS = {
 
 // Device breakpoints (match app.js MobileDetection)
 export const BREAKPOINTS = {
-  PHONE_MAX: 430,
+  PHONE_MAX: 599,
   TABLET_MAX: 768,
 } as const;
 

test/mobile/layout.test.ts

@@ -187,7 +187,7 @@ describe('Mobile Layout', () => {
       }
     });
 
-    it('does not render the desktop voice button at the 430px phone/tablet boundary', async () => {
+    it('does not render the desktop voice button on a 430px large phone', async () => {
       const device = REPRESENTATIVE_DEVICES['large-phone'];
       const { context, page } = await createDevicePage(device, BASE_URL, 'chromium');
       try {
@@ -331,7 +331,7 @@ describe('Mobile Layout', () => {
       }
     });
 
-    it('width < 430 adds device-mobile', async () => {
+    it('width < 600 adds device-mobile', async () => {
       const { context, page } = await createDevicePage(iPhone14Pro, BASE_URL);
       try {
         await assertDeviceClasses(page, iPhone14Pro.viewport.width);
@@ -340,7 +340,7 @@ describe('Mobile Layout', () => {
       }
     });
 
-    it('width 430-768 adds device-tablet', async () => {
+    it('width 600-768 adds device-tablet', async () => {
       const tablet = REPRESENTATIVE_DEVICES['small-tablet'];
       const { context, page } = await createDevicePage(tablet, BASE_URL);
       try {

test/mobile/visual-regression.test.ts

@@ -44,7 +44,7 @@ describe('Visual Regression', () => {
         isMobile: width < 768,
         hasTouch: width < 768,
         userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15',
-        expectedBreakpoint: (width < 430 ? 'phone' : width < 768 ? 'tablet' : 'desktop') as 'phone' | 'tablet' | 'desktop',
+        expectedBreakpoint: (width < 600 ? 'phone' : width < 768 ? 'tablet' : 'desktop') as 'phone' | 'tablet' | 'desktop',
         isIOS: true,
         defaultBrowserType: 'chromium' as const,
       };
@@ -71,7 +71,7 @@ describe('Visual Regression', () => {
         isMobile: width < 768,
         hasTouch: width < 768,
         userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15',
-        expectedBreakpoint: (width < 430 ? 'phone' : width < 768 ? 'tablet' : 'desktop') as 'phone' | 'tablet' | 'desktop',
+        expectedBreakpoint: (width < 600 ? 'phone' : width < 768 ? 'tablet' : 'desktop') as 'phone' | 'tablet' | 'desktop',
         isIOS: true,
         defaultBrowserType: 'chromium' as const,
       };
@@ -104,7 +104,7 @@ describe('Visual Regression', () => {
         isMobile: width < 768,
         hasTouch: width < 768,
         userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15',
-        expectedBreakpoint: (width < 430 ? 'phone' : width < 768 ? 'tablet' : 'desktop') as 'phone' | 'tablet' | 'desktop',
+        expectedBreakpoint: (width < 600 ? 'phone' : width < 768 ? 'tablet' : 'desktop') as 'phone' | 'tablet' | 'desktop',
         isIOS: true,
         defaultBrowserType: 'chromium' as const,
       };
@@ -115,7 +115,7 @@ describe('Visual Regression', () => {
 
         // Open settings modal - try mobile button first, then desktop
         const mobileBtn = page.locator(SELECTORS.SETTINGS_MOBILE);
-        const isPhone = width < 430;
+        const isPhone = width < 600;
         if (isPhone && await mobileBtn.isVisible()) {
           await mobileBtn.click();
         } else {

test/readmymind-phone-key.test.ts

@@ -35,8 +35,8 @@ describe('read my mind phone key + alternates (static guards)', () => {
   const html = read('index.html');
   const ui = read('readmymind-ui.js');
   const settingsUi = read('settings-ui.js');
-  // Everything phone-specific lives in the max-width 430px block of mobile.css.
-  const phoneBlock = mobile.slice(mobile.indexOf('@media (max-width: 430px)'));
+  // Everything phone-specific lives in the max-width 599px block of mobile.css.
+  const phoneBlock = mobile.slice(mobile.indexOf('@media (max-width: 599px)'));
 
   it('ships the 🧠 key in BOTH accessory bar templates and routes it to the modal', () => {
     const simple = accessory.match(/_simpleButtons\s*:\s*`([\s\S]*?)`/)?.[1] ?? '';