fix(mobile): make every session tab reachable in the tab strip (#257)

With five tabs open on a phone, the right-hand tabs were effectively
unreachable. Selecting a tab only toggled the .active class, so the strip
never moved, and every full rebuild (a task badge appearing, a session
created elsewhere) replaced the strip's innerHTML, which resets scrollLeft
to 0 and yanked a mid-swipe strip back to the first tab.

Three changes, which only work together:

* computeTabScrollLeft() (pure, constants.js) decides the scroll target from
  measured rects, and _scrollActiveTabIntoView() applies it on selection.
  Rect math on the strip's own scrollLeft rather than scrollIntoView(), which
  also scrolls ancestors: on a phone that is the document, under a fixed
  header and possibly an open keyboard.
* _fullRenderSessionTabs() saves and restores scrollLeft across the rebuild,
  and re-reveals the active tab only when it actually changed
  (_lastRenderedActiveTabId), so a background render never undoes a manual
  swipe.
* 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. Scrolling the
  active tab into view replaces it.

Also sets overscroll-behavior-x: contain on the strip so a swipe that runs
past the last tab stays in the strip instead of becoming the browser's back
gesture.

Tests: scroll-target math in test/tab-overflow.test.ts (runs in CI), plus
five browser regressions in test/mobile/tabs.test.ts covering reveal-on-
select in both directions, scroll preservation across an ambient rebuild,
sessionOrder rendering on phones, and a real touch drag reaching the last
tab.

Closes #257

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/web/public/app.js

@@ -3461,6 +3461,54 @@ class CodemanApp {
         tab.classList.remove('active');
       }
     }
+    // #257: selection used to stop at the class toggle. On phones/tablets the
+    // strip scrolls horizontally, so a tab selected from the palette, a swipe,
+    // Alt+N or a push notification could stay parked off-screen.
+    this._scrollActiveTabIntoView(sessionId);
+  }
+
+  /**
+   * Scroll the tab strip so the given (default: active) tab is visible.
+   *
+   * Only phones/tablets scroll the strip (desktop wraps to a second row), and
+   * the pure policy no-ops whenever there is nothing to scroll, so this is a
+   * cheap call on every device.
+   *
+   * Deliberately NOT scrollIntoView(): that also scrolls every scrollable
+   * ANCESTOR, which on a phone is the document itself. With the header fixed
+   * and the keyboard possibly open, a vertical nudge there shifts the whole
+   * app. Rect math + scrollLeft touches exactly one scroller.
+   */
+  _scrollActiveTabIntoView(sessionId, behavior = 'smooth') {
+    const container = this.$('sessionTabs');
+    if (!container) return;
+    const tab =
+      (sessionId && container.querySelector(`.session-tab[data-id="${sessionId}"]`)) ||
+      container.querySelector('.session-tab.active');
+    if (!tab) return;
+
+    const policy = window.CodemanTabOverflow?.computeTabScrollLeft;
+    if (!policy) return;
+    const containerRect = container.getBoundingClientRect();
+    const tabRect = tab.getBoundingClientRect();
+    const target = policy({
+      scrollLeft: container.scrollLeft,
+      clientWidth: container.clientWidth,
+      scrollWidth: container.scrollWidth,
+      // Offsets are relative to the SCROLL CONTENT, not the offsetParent: the
+      // tabs' offsetParent is the positioned header, so offsetLeft would carry
+      // the brand column's width into the math.
+      tabLeft: tabRect.left - containerRect.left + container.scrollLeft,
+      tabWidth: tabRect.width,
+    });
+    if (Math.abs(target - container.scrollLeft) < 1) return;
+
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+    if (typeof container.scrollTo === 'function') {
+      container.scrollTo({ left: target, behavior: reduceMotion ? 'auto' : behavior });
+    } else {
+      container.scrollLeft = target;
+    }
   }
 
   _setTerminalLoadState(sessionId, selectGen, phase) {
@@ -3678,6 +3726,11 @@ class CodemanApp {
       this._fullRenderSessionTabs();
     }
 
+    // Keep the reveal-on-change bookkeeping honest when only the incremental
+    // branch ran: _updateActiveTabImmediate has already scrolled the new active
+    // tab into view, so the next full rebuild must not treat it as a change.
+    this._lastRenderedActiveTabId = this.activeSessionId;
+
     this.updateTabOverflowMode();
     // After the wrap measurement: the `unroll` style starts tabs at max-width 0,
     // so measuring mid-animation would decide the wrap on collapsed widths.
@@ -3749,15 +3802,25 @@ class CodemanApp {
     document.querySelectorAll('body > .subagent-dropdown').forEach(d => d.remove());
     this.cancelHideSubagentDropdown();
 
-    // Build tabs HTML using array for better string concatenation performance
-    // Iterate in sessionOrder to respect user's custom tab arrangement
-    // On mobile: put active session first (only one tab visible anyway)
+    // #257: replacing innerHTML below resets scrollLeft to 0. On phones the
+    // strip scrolls, and ambient rebuilds (a task badge appearing, a session
+    // created elsewhere) fire often enough that a user swiping toward the
+    // right-hand tabs kept getting yanked back to the first one. Remember
+    // where the strip was; the browser clamps the restore to the new content.
+    const prevScrollLeft = container.scrollLeft;
+    const prevActiveTabId = this._lastRenderedActiveTabId;
+    const isFirstRender = !container.querySelector('.session-tab');
+
+    // Build tabs HTML using array for better string concatenation performance.
+    // Iterate in sessionOrder to respect the user's custom tab arrangement, on
+    // EVERY device: mobile used to hoist the active session to the front, from
+    // when only one tab fit on screen. With five tabs it made the strip jump
+    // under the user's finger (and renumbered the Alt+N badges) on every full
+    // rebuild, while the incremental path left the order alone, so the order
+    // depended on which render path happened to run. Scrolling the active tab
+    // into view replaces it.
     const parts = [];
-    let tabOrder = this.sessionOrder;
-    if (MobileDetection.getDeviceType() === 'mobile' && this.activeSessionId) {
-      // Reorder to put active tab first
-      tabOrder = [this.activeSessionId, ...this.sessionOrder.filter(id => id !== this.activeSessionId)];
-    }
+    const tabOrder = this.sessionOrder;
     let _tabIdx = 0;
     for (const id of tabOrder) {
       const session = this.sessions.get(id);
@@ -3826,6 +3889,17 @@ class CodemanApp {
 
     container.innerHTML = parts.join('');
 
+    // Put the strip back where the user left it, then reveal the active tab
+    // only when it CHANGED (or on the first paint). Restoring unconditionally
+    // and revealing conditionally is what lets someone browse the far end of
+    // the strip while a background rebuild fires, without the active tab ever
+    // being stranded off-screen after a switch.
+    container.scrollLeft = prevScrollLeft;
+    this._lastRenderedActiveTabId = this.activeSessionId;
+    if (isFirstRender || prevActiveTabId !== this.activeSessionId) {
+      this._scrollActiveTabIntoView(this.activeSessionId, isFirstRender ? 'auto' : 'smooth');
+    }
+
     // Set up drag-and-drop handlers for tab reordering
     this.setupTabDragHandlers();
 

src/web/public/constants.js

@@ -156,6 +156,47 @@ function shouldAutoWrapTabs(input) {
   return scrollWidth > clientWidth + 1;
 }
 
+// Sliver of the neighbouring tab left visible when the strip scrolls a tab into
+// view. Landing a tab flush against the edge reads as "this is the last one";
+// the gap is what tells the user there is more strip to swipe to.
+const TAB_SCROLL_REVEAL_PX = 16;
+
+// Phone/tablet tab-strip scroll policy (issue #257). Those breakpoints scroll
+// the strip horizontally (desktop wraps to a second row instead and never
+// scrolls), so the active tab can sit entirely outside the visible slice with
+// no way back except a swipe the user may not know is possible.
+//
+// Returns the scrollLeft that puts the tab inside the window, clamped to the
+// scrollable range, and returns the CURRENT scrollLeft when the tab is already
+// visible: callers compare and skip the write, so an already-correct strip is
+// never nudged. Pure: the caller measures, this decides.
+function computeTabScrollLeft(input) {
+  const scrollWidth = Number(input?.scrollWidth) || 0;
+  const clientWidth = Number(input?.clientWidth) || 0;
+  const maxScroll = Math.max(0, scrollWidth - clientWidth);
+  if (maxScroll === 0 || clientWidth <= 0) return 0;
+
+  const pad = input?.padding == null ? TAB_SCROLL_REVEAL_PX : Number(input.padding) || 0;
+  const tabLeft = Number(input?.tabLeft) || 0;
+  const tabWidth = Number(input?.tabWidth) || 0;
+  const tabRight = tabLeft + tabWidth;
+  const viewLeft = Math.min(Math.max(Number(input?.scrollLeft) || 0, 0), maxScroll);
+  const viewRight = viewLeft + clientWidth;
+
+  let target = viewLeft;
+  if (tabWidth + pad >= clientWidth) {
+    // Tab is as wide as the window (long session name on a narrow phone):
+    // there is no position that shows all of it plus padding, so align its
+    // start, since the name matters more than the trailing badges.
+    target = tabLeft;
+  } else if (tabLeft - pad < viewLeft) {
+    target = tabLeft - pad;
+  } else if (tabRight + pad > viewRight) {
+    target = tabRight + pad - clientWidth;
+  }
+  return Math.min(Math.max(Math.round(target), 0), maxScroll);
+}
+
 // COD-134 — Terminal WebSocket reconnect policy.
 //
 // Decide what to do after a terminal WebSocket closes, given the close `code`
@@ -261,6 +302,8 @@ if (typeof window !== 'undefined') {
   window.shouldSkipWebGL = shouldSkipWebGL;
   window.CodemanTabOverflow = {
     shouldAutoWrapTabs,
+    computeTabScrollLeft,
+    TAB_SCROLL_REVEAL_PX,
   };
   window.CodemanWsReconnect = {
     plan: planWsReconnect,

src/web/public/mobile.css

@@ -115,13 +115,17 @@ html.mobile-init .file-browser-panel {
   }
 
   /* Compact session tabs — .tabs-two-rows override needed to match
-     specificity of .session-tabs.tabs-two-rows in styles.css (0,2,0) */
+     specificity of .session-tabs.tabs-two-rows in styles.css (0,2,0).
+     overscroll-behavior-x keeps a swipe that runs past the last tab inside the
+     strip: chained to the page it becomes the browser's back gesture, which is
+     exactly the swipe someone makes reaching for the rightmost tabs (#257). */
   .session-tabs,
   .session-tabs.tabs-two-rows {
     flex-wrap: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
     scrollbar-width: none;
     max-height: 52px;
     gap: 3px;
@@ -643,6 +647,7 @@ html.mobile-init .file-browser-panel {
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
     scrollbar-width: none;
     max-height: 36px;
     gap: 2px;