Merge pull request #334 from aakhter/pr/cod-358-vertical-rail

feat(tabs): add a resizable vertical session rail
2026-10-04 14:39:42 +02:00 · 2026-08-24 00:14:10 +02:00
parent dd96f252ea c45c6c3846
commit e9dd55e5fd
26 changed files with 1868 additions and 36 deletions
@@ -919,6 +919,8 @@ class CodemanApp {
    // Calls applyTabWrapSettings() itself (it owns tabs-two-rows / tabs-show-folder)
    // and then applies the sidebar variant on top — do not call both.
    this.applySessionListLayout();
+    this.applyTabOrientation();
+    this.initTabRailResize?.();
    this.applyMonitorVisibility();
    this.applyLineageLineSettings?.();
    this._installLineageStripScrollListener?.();
@@ -3756,6 +3758,18 @@ class CodemanApp {
    return layout === 'sidebar' || layout === 'sidebar-rich' ? layout : 'header';
  }

+  resolveSessionSidebarFontSize(value) {
+    const size = Number(value);
+    return Number.isInteger(size) && size >= 11 && size <= 18 ? size : 14;
+  }
+
+  applySessionSidebarFontSize(settings = null) {
+    const resolvedSettings = settings ?? this.loadAppSettingsFromStorage();
+    const size = this.resolveSessionSidebarFontSize(resolvedSettings?.sessionSidebarFontSize);
+    document.documentElement.style.setProperty('--session-sidebar-name-font-size', `${size}px`);
+    return size;
+  }
+
  /**
   * Reads the APPLIED layout off <html>, not the settings blob: this is called
   * per dragover event and per tab in render loops, and getSessionListLayout()
@@ -3767,6 +3781,15 @@ class CodemanApp {
    return document.documentElement.dataset.sessionList === 'sidebar';
  }

+  _tabOrientation() {
+    return document.documentElement.getAttribute('data-tab-orientation') === 'vertical' ? 'vertical' : 'horizontal';
+  }
+
+  shouldInlineSessionActions() {
+    if (this.isSessionSidebarActive()) return !this.isSessionSidebarCollapsed();
+    return this._tabOrientation() === 'vertical' && !document.documentElement.classList.contains('tab-rail-compact');
+  }
+
  /**
   * True when the sidebar is showing the DETAILED rows: the home screen's
   * per-session line ("created 3d ago · working 12m") plus a status pill.
@@ -3859,17 +3882,22 @@ class CodemanApp {
   */
  applySessionListLayout() {
    const mode = this.getSessionListLayout();
+    this.applySessionSidebarFontSize();
    // 'sidebar' and 'sidebar-rich' are the same column; only row detail differs.
    const sidebar = mode === 'sidebar' || mode === 'sidebar-rich';
    const collapsed = this.isSessionSidebarCollapsed();
    const prevMode = document.documentElement.dataset.sessionList;
    const prevDetail = document.documentElement.dataset.sidebarDetail;
+    const prevCollapsed = document.documentElement.dataset.sidebar;
    const tabsEl = document.getElementById('sessionTabs');
    const headerHost = document.getElementById('sessionTabsHost');
    const sidebarList = document.getElementById('sessionSidebarList');
    if (!tabsEl || !headerHost || !sidebarList) return;

-    const host = sidebar ? sidebarList : headerHost;
+    const rail = document.getElementById('tabRail');
+    const railOwnsTabs =
+      !sidebar && document.documentElement.getAttribute('data-tab-orientation') === 'vertical';
+    const host = sidebar ? sidebarList : railOwnsTabs && rail ? rail : headerHost;
    if (tabsEl.parentElement !== host) host.appendChild(tabsEl);

    document.documentElement.dataset.sessionList = sidebar ? 'sidebar' : 'header';
@@ -3878,7 +3906,7 @@ class CodemanApp {
    // would let the sidebar CSS style a strip that has nothing to style.
    document.documentElement.dataset.sidebarDetail = mode === 'sidebar-rich' ? 'rich' : 'simple';
    document.documentElement.dataset.sidebar = collapsed ? 'collapsed' : 'expanded';
-    tabsEl.setAttribute('aria-orientation', sidebar ? 'vertical' : 'horizontal');
+    tabsEl.setAttribute('aria-orientation', host === headerHost ? 'horizontal' : 'vertical');

    const btn = document.getElementById('sidebarToggleBtn');
    if (btn) {
@@ -3931,7 +3959,8 @@ class CodemanApp {
    const layoutChanged =
      prevMode !== document.documentElement.dataset.sessionList ||
      prevDetail !== document.documentElement.dataset.sidebarDetail;
-    if (layoutChanged && prevTall === this._tallTabsEnabled) {
+    const collapseChanged = prevCollapsed !== document.documentElement.dataset.sidebar;
+    if ((layoutChanged || collapseChanged) && prevTall === this._tallTabsEnabled) {
      this._fullRenderSessionTabs();
    }
    // tabs-auto-wrap is measured, not derived from settings — updateTabOverflowMode()
@@ -4474,9 +4503,17 @@ class CodemanApp {
        const nameEl = tab.querySelector('.tab-name');
        if (nameEl) {
          const _p = parseSessionPrefix(name);
-          const _label = _p && _p.suffix ? _p.suffix : name;
-          if (nameEl.textContent !== _label) {
-            nameEl.textContent = _label;
+          if (nameEl.dataset.fullName !== name) {
+            nameEl.replaceChildren();
+            if (_p && _p.suffix) {
+              const prefix = document.createElement('span');
+              prefix.className = 'tab-name-prefix';
+              prefix.textContent = `${_p.prefix}: `;
+              nameEl.append(prefix, document.createTextNode(_p.suffix));
+            } else {
+              nameEl.textContent = name;
+            }
+            nameEl.dataset.fullName = name;
            tab.title = _p && _p.suffix
              ? (session.workingDir ? `${_p.prefix} (${session.workingDir})` : _p.prefix)
              : (session.workingDir || '');
@@ -4527,9 +4564,11 @@ class CodemanApp {
          // Need to add badge - insert before the action-icon overlay so the
          // badge stays a direct child of the tab (outside .tab-actions)
          const badgeHtml = this.renderSubagentTabBadge(id, minimizedAgents);
-          const actionsEl = tab.querySelector('.tab-actions');
+          const actionsEl = tab.querySelector(':scope > .tab-actions');
          if (actionsEl) {
            actionsEl.insertAdjacentHTML('beforebegin', badgeHtml);
+          } else {
+            tab.insertAdjacentHTML('beforeend', badgeHtml);
          }
        } else if (minimizedCount === 0 && subagentBadgeEl) {
          // Count went to 0 - remove badge
@@ -4587,6 +4626,17 @@ class CodemanApp {
    const defaults = this.getDefaultSettings();
    const manualTwoRows = deviceType === 'desktop' ? (settings.tabTwoRows ?? defaults.tabTwoRows ?? false) : false;

+    const orientation = window.CodemanTabOverflow?.resolveTabOrientation
+      ? window.CodemanTabOverflow.resolveTabOrientation({
+          deviceType,
+          setting: settings.tabOrientation ?? defaults.tabOrientation ?? 'horizontal',
+        })
+      : 'horizontal';
+    if (orientation === 'vertical') {
+      container.classList.remove('tabs-auto-wrap');
+      return;
+    }
+
    if (manualTwoRows || deviceType !== 'desktop') {
      container.classList.remove('tabs-auto-wrap');
      return;
@@ -4627,6 +4677,7 @@ class CodemanApp {
  }

  _fullRenderSessionTabs() {
+    this.closeTabRailActionMenu?.();
    if (this._inlineRenameActive) return;
    const container = this.$('sessionTabs');

@@ -4704,7 +4755,9 @@ class CodemanApp {
      // JUST the description on the tab; the generated w<n>-<case> id moves to the
      // tooltip and stays visible in the session settings modal.
      const parsedName = parseSessionPrefix(name);
-      const tabLabel = parsedName && parsedName.suffix ? parsedName.suffix : name;
+      const tabLabel = parsedName && parsedName.suffix
+        ? `<span class="tab-name-prefix">${escapeHtml(parsedName.prefix)}: </span>${escapeHtml(parsedName.suffix)}`
+        : escapeHtml(name);
      const tabTooltip = parsedName && parsedName.suffix
        ? (session.workingDir ? `${parsedName.prefix} (${session.workingDir})` : parsedName.prefix)
        : (session.workingDir || '');
@@ -4719,6 +4772,9 @@ class CodemanApp {
        ? ` data-tab-state="${richRow.state}" data-tab-meta-sig="${richRow.state}:${richRow.since ? richRow.since.at : 0}:${richRow.createdAt}"`
        : '';

+      const inlineSessionActions = this.shouldInlineSessionActions();
+      const tabActionsHtml = `<span class="tab-actions"><span class="tab-gear" onclick="event.stopPropagation(); app.openSessionOptions(${escapeHtml(JSON.stringify(id))})" title="Session options" aria-label="Session options" tabindex="0">&#x2699;</span><span class="tab-detach" onclick="event.stopPropagation(); app.detachSession(${escapeHtml(JSON.stringify(id))})" title="Open in a new window" aria-label="Open session in a new window" tabindex="0">&#x29C9;</span><span class="tab-close" onclick="event.stopPropagation(); app.requestCloseSession(${escapeHtml(JSON.stringify(id))})" title="Close session" aria-label="Close session" tabindex="0">&times;</span><button type="button" class="tab-more" onclick="event.stopPropagation(); app.openTabRailActionMenu(event, ${escapeHtml(JSON.stringify(id))})" title="Session actions" aria-label="Session actions">&#x22EF;</button></span>`;
+
      parts.push(`<div class="session-tab ${isActive ? 'active' : ''}${alertClass}${richClass}${loadState ? ' tab-loading' : ''}${this.hasTabDetachOverride(id) ? ' tab-show-detach' : ''}"${richData} data-id="${id}" data-color="${color}" ${loadState ? `data-load-phase="${escapeHtml(loadState.phase)}"` : ''} onclick="app.handleSessionTabClick(event, ${escapeHtml(JSON.stringify(id))})" oncontextmenu="event.preventDefault(); app.startInlineRename(${escapeHtml(JSON.stringify(id))})" tabindex="0" role="tab" aria-selected="${isActive ? 'true' : 'false'}" aria-busy="${loadState ? 'true' : 'false'}" aria-label="${escapeHtml(name)} session" ${tabTooltip ? `title="${escapeHtml(tabTooltip)}"` : ''}>
          ${_tabIdx < 9 ? '<span class="tab-number">' + (_tabIdx + 1) + '</span>' : ''}
          ${loadState ? '<span class="tab-load-spinner" aria-hidden="true"></span>' : ''}
@@ -4726,7 +4782,8 @@ class CodemanApp {
          <span class="tab-info">
            <span class="tab-name-row">
              ${mode === 'shell' ? '<span class="tab-mode shell" aria-hidden="true">sh</span>' : mode === 'opencode' ? '<span class="tab-mode opencode" aria-hidden="true">oc</span>' : mode === 'codex' ? '<span class="tab-mode codex" aria-hidden="true">cx</span>' : mode === 'gemini' ? '<span class="tab-mode gemini" aria-hidden="true">gm</span>' : mode === 'antigravity' ? '<span class="tab-mode antigravity" aria-hidden="true">ag</span>' : mode === 'pi' ? '<span class="tab-mode pi" aria-hidden="true">pi</span>' : ''}
-              <span class="tab-name" data-session-id="${id}">${escapeHtml(tabLabel)}</span>
+              <span class="tab-name" data-session-id="${id}" data-full-name="${escapeHtml(name)}">${tabLabel}</span>
+              ${inlineSessionActions ? tabActionsHtml : ''}
              <span class="tab-detached-badge" aria-hidden="true">detached</span>
            </span>
            ${showFolder ? `<span class="tab-folder">\u{1F4C1} ${escapeHtml(folderName)}</span>` : ''}
@@ -4735,7 +4792,7 @@ class CodemanApp {
          ${hasRunningTasks ? `<span class="tab-badge" onclick="event.stopPropagation(); app.toggleTaskPanel()" aria-label="${taskStats.running} running tasks">${taskStats.running}</span>` : ''}
          ${subagentBadge}
          ${ultracodeBadge}
-          <span class="tab-actions"><span class="tab-gear" onclick="event.stopPropagation(); app.openSessionOptions(${escapeHtml(JSON.stringify(id))})" title="Session options" aria-label="Session options" tabindex="0">&#x2699;</span><span class="tab-detach" onclick="event.stopPropagation(); app.detachSession(${escapeHtml(JSON.stringify(id))})" title="Open in a new window" aria-label="Open session in a new window" tabindex="0">&#x29C9;</span><span class="tab-close" onclick="event.stopPropagation(); app.requestCloseSession(${escapeHtml(JSON.stringify(id))})" title="Close session" aria-label="Close session" tabindex="0">&times;</span></span>
+          ${inlineSessionActions ? '' : tabActionsHtml}
        </div>`);
      _tabIdx++;
    }
@@ -6025,6 +6082,7 @@ class CodemanApp {

  // Shared cleanup for all session data — called from both closeSession() and session:deleted handler
  _cleanupSessionData(sessionId) {
+    this.closeTabRailActionMenu?.();
    // If the deleted session is currently being renamed, abort the rename
    // so the inline <input> doesn't ghost as a stale tab on screen.
    if (this._activeRename?.sessionId === sessionId) {
@@ -156,6 +156,43 @@ function shouldAutoWrapTabs(input) {
  return scrollWidth > clientWidth + 1;
 }

+function resolveTabOrientation(input) {
+  if (!input || input.setting !== 'vertical') return 'horizontal';
+  if (input.deviceType === 'mobile') return 'horizontal';
+  return 'vertical';
+}
+
+const TAB_RAIL_MIN_WIDTH = 208;
+const TAB_RAIL_DEFAULT_WIDTH = 256;
+const TAB_RAIL_MAX_WIDTH = 360;
+
+function resolveTabRailWidth(input = {}) {
+  const viewportWidth = Number(input.viewportWidth);
+  const mainWidth = Number(input.mainWidth);
+  const minTerminalWidth = Number(input.minTerminalWidth);
+  const limits = [TAB_RAIL_MAX_WIDTH];
+  if (Number.isFinite(viewportWidth) && viewportWidth > 0) limits.push(Math.floor(viewportWidth * 0.4));
+  if (Number.isFinite(mainWidth) && mainWidth > 0 && Number.isFinite(minTerminalWidth) && minTerminalWidth > 0) {
+    limits.push(Math.floor(mainWidth - minTerminalWidth));
+  }
+  const effectiveMax = Math.max(TAB_RAIL_MIN_WIDTH, Math.min(...limits));
+  const requested = Number(input.width);
+  const width = Number.isFinite(requested) ? requested : TAB_RAIL_DEFAULT_WIDTH;
+  return Math.round(Math.min(effectiveMax, Math.max(TAB_RAIL_MIN_WIDTH, width)));
+}
+
+function resolveTabRailKeyboardWidth(input = {}) {
+  let width;
+  if (input.key === 'Home') width = TAB_RAIL_MIN_WIDTH;
+  else if (input.key === 'End') width = TAB_RAIL_MAX_WIDTH;
+  else if (input.key === 'Enter') width = TAB_RAIL_DEFAULT_WIDTH;
+  else if (input.key === 'ArrowLeft' || input.key === 'ArrowRight') {
+    const direction = input.key === 'ArrowLeft' ? -1 : 1;
+    width = (Number(input.currentWidth) || TAB_RAIL_DEFAULT_WIDTH) + direction * (input.shiftKey ? 32 : 8);
+  } else return null;
+  return resolveTabRailWidth({ ...input, width });
+}
+
 // 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.
@@ -243,6 +280,9 @@ const LINEAGE_DIP_MAX_PX = 64;
 // apart bled into one thick band instead of reading as three separate lines.
 const LINEAGE_SIBLING_STEP_PX = 8;
 const LINEAGE_STRIP_TOLERANCE_PX = 4;
+const LINEAGE_VERTICAL_TRACK_INSET_PX = 6;
+const LINEAGE_VERTICAL_SIBLING_STEP_PX = 3;
+const LINEAGE_VERTICAL_ANCHOR_CLEARANCE_PX = 4;
 // Lineage palette, assigned per SPAWNING TAB in first-seen order and cycled
 // (session-lineage.js). Every arc leaving one tab shares its colour however many
 // workers it spawns; a child that spawns in turn gets its own for the arcs below it.
@@ -265,21 +305,44 @@ function computeLineagePath(input) {
  const ch = Number(child.height) || 0;
  if (pw <= 0 || ph <= 0 || cw <= 0 || ch <= 0) return null;

-  const px = Number(parent.left) + pw / 2;
-  const cx = Number(child.left) + cw / 2;
-  if (!Number.isFinite(px) || !Number.isFinite(cx)) return null;
-
+  const orientation = input?.orientation === 'vertical' ? 'vertical' : 'horizontal';
  const strip = input?.strip;
+  const depth = Math.max(0, Math.min(6, Number(input?.depth) || 0));
+  const pLeft = Number(parent.left);
+  const cLeft = Number(child.left);
+  const pTop = Number(parent.top);
+  const cTop = Number(child.top);
+  if (![pLeft, cLeft, pTop, cTop].every(Number.isFinite)) return null;
+
+  if (orientation === 'vertical') {
+    const py = pTop + ph / 2;
+    const cy = cTop + ch / 2;
+    if (strip && Number(strip.height) > 0) {
+      const min = Number(strip.top) - LINEAGE_STRIP_TOLERANCE_PX;
+      const max = Number(strip.top) + Number(strip.height) + LINEAGE_STRIP_TOLERANCE_PX;
+      if (py < min || py > max || cy < min || cy > max) return null;
+    }
+
+    const stripLeft =
+      strip && Number.isFinite(Number(strip.left))
+        ? Number(strip.left)
+        : Math.min(pLeft, cLeft) - LINEAGE_VERTICAL_TRACK_INSET_PX * 2;
+    const requestedTrack =
+      stripLeft + LINEAGE_VERTICAL_TRACK_INSET_PX + depth * LINEAGE_VERTICAL_SIBLING_STEP_PX;
+    const trackX = Math.min(requestedTrack, Math.min(pLeft, cLeft) - LINEAGE_VERTICAL_ANCHOR_CLEARANCE_PX);
+    const d = `M ${r1(pLeft)} ${r1(py)} H ${r1(trackX)} V ${r1(cy)} H ${r1(cLeft)}`;
+    return { d, endX: cLeft, endY: cy, sameRow: false };
+  }
+
+  const px = pLeft + pw / 2;
+  const cx = cLeft + cw / 2;
  if (strip && Number(strip.width) > 0) {
    const min = Number(strip.left) - LINEAGE_STRIP_TOLERANCE_PX;
    const max = Number(strip.left) + Number(strip.width) + LINEAGE_STRIP_TOLERANCE_PX;
    if (px < min || px > max || cx < min || cx > max) return null;
  }

-  const depth = Math.max(0, Math.min(6, Number(input?.depth) || 0));
-  const pTop = Number(parent.top);
  const pBottom = pTop + ph;
-  const cTop = Number(child.top);
  const cBottom = cTop + ch;
  const sameRow = Math.abs(pTop + ph / 2 - (cTop + ch / 2)) <= Math.min(ph, ch) / 2;

@@ -617,9 +680,17 @@ if (typeof window !== 'undefined') {
  window.shouldSkipWebGL = shouldSkipWebGL;
  window.CodemanTabOverflow = {
    shouldAutoWrapTabs,
+    resolveTabOrientation,
    computeTabScrollLeft,
    TAB_SCROLL_REVEAL_PX,
  };
+  window.CodemanTabRail = {
+    DEFAULT_WIDTH: TAB_RAIL_DEFAULT_WIDTH,
+    MIN_WIDTH: TAB_RAIL_MIN_WIDTH,
+    MAX_WIDTH: TAB_RAIL_MAX_WIDTH,
+    resolveWidth: resolveTabRailWidth,
+    resolveKeyboardWidth: resolveTabRailKeyboardWidth,
+  };
  window.CodemanWsReconnect = {
    plan: planWsReconnect,
  };
@@ -628,6 +699,8 @@ if (typeof window !== 'undefined') {
    DIP_MIN_PX: LINEAGE_DIP_MIN_PX,
    DIP_MAX_PX: LINEAGE_DIP_MAX_PX,
    SIBLING_STEP_PX: LINEAGE_SIBLING_STEP_PX,
+    VERTICAL_TRACK_INSET_PX: LINEAGE_VERTICAL_TRACK_INSET_PX,
+    VERTICAL_SIBLING_STEP_PX: LINEAGE_VERTICAL_SIBLING_STEP_PX,
    COLORS: LINEAGE_COLORS,
  };
  window.CodemanConnectionLoss = {
@@ -87,12 +87,14 @@ Object.assign(CodemanApp.prototype, {

  /**
   * Width-driven, like every other layout decision in the app. Explicitly yields
-   * to the phone overview: that surface already lists the same sessions, and two
-   * lists of the same thing on one screen is worse than none.
+   * to the phone overview and persistent vertical tab rail: those surfaces already
+   * list the same sessions, and two lists of the same thing on one screen is worse
+   * than none.
   */
  shouldShowHomeSessions() {
    if (this.isSoloWindow) return false;
    if (this.shouldUseMobileOverview?.()) return false;
+    if (document.documentElement.getAttribute('data-tab-orientation') === 'vertical') return false;
    // The sidebar layout already docks the full session list flush left at full
    // height — the rail would render the same list right next to it (and z-wise
    // UNDER it: sidebar 11, welcome overlay 10, rail inside the overlay).
@@ -232,6 +232,8 @@
    'Redraw Terminal Button': '重绘终端按钮',
    'Tab Bar': '标签栏',
    'Session List Layout': '会话列表布局',
+    'Session Name Font Size': '会话名称字体大小',
+    'Adjust only session names in the vertical sidebar.': '仅调整垂直侧边栏中的会话名称。',
    'Header tab strip': '顶栏标签条',
    'Left sidebar': '左侧边栏',
    'Left sidebar simple': '左侧边栏（简洁）',
@@ -65,7 +65,7 @@
       app.js, NOT the handheld storage-key test `m`. Use a different predicate
       here and boot will contradict this value, animating the drawer open by
       itself on every load between 768 and 1023px. -->
-  <script>try{var m=window.innerWidth<768||(('ontouchstart' in window||navigator.maxTouchPoints>0)&&window.innerWidth<1024);var k=m?'codeman-app-settings-mobile':'codeman-app-settings';var L=JSON.parse(localStorage.getItem(k)||'{}').sessionListLayout;var solo=/^\/session\//.test(location.pathname);var C=localStorage.getItem('codeman-sidebar-collapsed');var S=(L==='sidebar'||L==='sidebar-rich')&&!solo;document.documentElement.dataset.sessionList=S?'sidebar':'header';document.documentElement.dataset.sidebarDetail=(S&&L==='sidebar-rich')?'rich':'simple';document.documentElement.dataset.sidebar=(C===null?window.innerWidth<1024:C==='1')?'collapsed':'expanded';}catch(e){document.documentElement.dataset.sessionList='header';document.documentElement.dataset.sidebarDetail='simple';document.documentElement.dataset.sidebar='expanded';}</script>
+  <script>try{var m=window.innerWidth<768||(('ontouchstart' in window||navigator.maxTouchPoints>0)&&window.innerWidth<1024);var k=m?'codeman-app-settings-mobile':'codeman-app-settings';var A=JSON.parse(localStorage.getItem(k)||'{}');var L=A.sessionListLayout;var F=Number(A.sessionSidebarFontSize);var solo=/^\/session\//.test(location.pathname);var C=localStorage.getItem('codeman-sidebar-collapsed');var S=(L==='sidebar'||L==='sidebar-rich')&&!solo;document.documentElement.dataset.sessionList=S?'sidebar':'header';document.documentElement.dataset.sidebarDetail=(S&&L==='sidebar-rich')?'rich':'simple';document.documentElement.dataset.sidebar=(C===null?window.innerWidth<1024:C==='1')?'collapsed':'expanded';if(Number.isInteger(F)&&F>=11&&F<=18)document.documentElement.style.setProperty('--session-sidebar-name-font-size',F+'px');}catch(e){document.documentElement.dataset.sessionList='header';document.documentElement.dataset.sidebarDetail='simple';document.documentElement.dataset.sidebar='expanded';}</script>
  <!-- Inline critical CSS for instant skeleton paint (before styles.css loads) -->
  <style>
    .loading-skeleton{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg-dark,#11151c)}
@@ -358,6 +358,20 @@

    <!-- Main Terminal Area -->
    <main class="main">
+      <aside class="tab-rail" id="tabRail" aria-label="Session navigation">
+        <div
+          id="tabRailResizeHandle"
+          class="tab-rail-resize-handle"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize session rail"
+          aria-valuemin="208"
+          aria-valuemax="360"
+          aria-valuenow="256"
+          tabindex="0"
+        ></div>
+      </aside>
+
      <!-- Collapsible session sidebar (opt-in layout). Deliberately EMPTY in
           markup: applySessionListLayout() moves #sessionTabs in here, so the
           vertical list is the exact same DOM node as the header strip and every
@@ -509,6 +523,7 @@
           desktop (which never loads mobile.css) can never render it. -->
      <div class="mobile-overview" id="mobileOverview" hidden></div>
    </main>
+    <div class="tab-rail-resize-shield" id="tabRailResizeShield" aria-hidden="true" hidden></div>

    <!-- Project Insights Panel (shows file-viewing Bash commands) -->
    <div class="project-insights-panel" id="projectInsightsPanel">
@@ -1869,6 +1884,29 @@
              <div class="set-group">
                <div class="set-group-head"><h4>Tabs</h4><span class="set-scope">device</span></div>
                <div class="set-group-body">
+                  <div class="set-row has-field" data-search="tab orientation horizontal vertical side rail">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Tab Orientation</span>
+                      <span class="set-row-desc">Keep tabs in the header or place them beside the terminal. Phones stay horizontal.</span>
+                    </div>
+                    <select id="appSettingsTabOrientation" class="set-select">
+                      <option value="horizontal">Horizontal (top)</option>
+                      <option value="vertical">Vertical (side rail)</option>
+                    </select>
+                  </div>
+                  <div class="set-row has-field" data-search="tab rail width resize compact wide maximum">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Vertical Rail Width</span>
+                      <span class="set-row-desc">Set the preferred rail width for this device.</span>
+                    </div>
+                    <select id="appSettingsTabRailWidth" class="set-select">
+                      <option value="208">Compact (208px)</option>
+                      <option value="256">Default (256px)</option>
+                      <option value="320">Wide (320px)</option>
+                      <option value="360">Maximum (360px)</option>
+                      <option value="custom" disabled>Custom</option>
+                    </select>
+                  </div>
                  <div class="set-row has-field" data-search="session list layout sidebar tab strip vertical">
                    <div class="set-row-text">
                      <span class="set-row-label">Session List Layout</span>
@@ -1880,6 +1918,18 @@
                      <option value="sidebar-rich">Left sidebar</option>
                    </select>
                  </div>
+                  <div class="set-row has-field" data-search="session sidebar name font size text">
+                    <div class="set-row-text">
+                      <span class="set-row-label" id="appSettingsSessionSidebarFontSizeLabel">Session Name Font Size</span>
+                      <span class="set-row-desc">Adjust only session names in the vertical sidebar.</span>
+                    </div>
+                    <label class="set-range-field" for="appSettingsSessionSidebarFontSize">
+                      <input type="range" id="appSettingsSessionSidebarFontSize" min="11" max="18" step="1" value="14"
+                        aria-labelledby="appSettingsSessionSidebarFontSizeLabel"
+                        oninput="document.getElementById('appSettingsSessionSidebarFontSizeValue').textContent=this.value+' px'">
+                      <output id="appSettingsSessionSidebarFontSizeValue" for="appSettingsSessionSidebarFontSize">14 px</output>
+                    </label>
+                  </div>
                  <div class="set-row" data-search="tall tabs folder name two rows">
                    <div class="set-row-text">
                      <span class="set-row-label">Tall Tabs</span>
@@ -3323,6 +3373,7 @@
  <!-- Hardened markdown HTML sanitizer (wires DOMPurify). Must precede app.js. -->
  <script defer src="sanitize-html.js"></script>
  <script defer src="app.js"></script>
+  <script defer src="tab-rail-resize.js"></script>
  <script defer src="terminal-ui.js"></script>
  <script defer src="respawn-ui.js"></script>
  <script defer src="ralph-panel.js"></script>
@@ -160,6 +160,8 @@ Object.assign(CodemanApp.prototype, {
    const strip = document.getElementById('sessionTabs');
    if (!strip) return;
    const stripRect = strip.getBoundingClientRect();
+    const orientation =
+      document.documentElement.getAttribute('data-tab-orientation') === 'vertical' ? 'vertical' : 'horizontal';
    for (const edge of edges) {
      for (const id of [edge.parentId, edge.childId]) {
        const key = 'tab:' + id;
@@ -175,7 +177,13 @@ Object.assign(CodemanApp.prototype, {
      const childRect = rects.get('tab:' + edge.childId);
      if (!parentRect || !childRect) continue;

-      const geom = compute({ parent: parentRect, child: childRect, strip: stripRect, depth: edge.depth });
+      const geom = compute({
+        parent: parentRect,
+        child: childRect,
+        strip: stripRect,
+        depth: edge.depth,
+        orientation,
+      });
      if (!geom) continue; // scrolled out of the strip, or a degenerate rect

      const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -1788,15 +1788,22 @@ Object.assign(CodemanApp.prototype, {
    const session = this.sessions.get(sessionId);
    if (!session) return;

+    this._activeRename?.cancel();
+
    const tabName = document.querySelector(`.tab-name[data-session-id="${sessionId}"]`);
    if (!tabName) return;

    // Prevent tab re-renders from destroying the input while renaming
    this._inlineRenameActive = true;
+    tabName.classList.add('tab-name-renaming');

    const currentName = this.getSessionName(session);
    const parsed = parseSessionPrefix(session.name);
    const originalContent = tabName.textContent;
+    const originalChildren = [...tabName.childNodes].map((node) => node.cloneNode(true));
+    const restoreOriginalChildren = () => {
+      tabName.replaceChildren(...originalChildren.map((node) => node.cloneNode(true)));
+    };
    // Clear existing content to make room for the input element
    tabName.textContent = '';
    while (tabName.firstChild) tabName.removeChild(tabName.firstChild);
@@ -1804,6 +1811,7 @@ Object.assign(CodemanApp.prototype, {
    // If prefix detected, show it as non-editable label
    if (parsed) {
      const prefixLabel = document.createElement('span');
+      prefixLabel.className = 'tab-rename-prefix';
      prefixLabel.textContent = parsed.prefix + ': ';
      prefixLabel.style.cssText = 'color: var(--text-muted); font-size: 0.75rem; white-space: nowrap;';
      tabName.appendChild(prefixLabel);
@@ -1816,36 +1824,67 @@ Object.assign(CodemanApp.prototype, {
    input.className = 'tab-rename-input';
    // 80px is tuned for the narrow header tab; a full-width sidebar row can and
    // should give the whole line to the input.
-    const renameWidth = this.isSessionSidebarActive?.() ? '100%' : '80px';
+    const renameWidth = tabName.closest('.tab-rail') ? 'auto' : this.isSessionSidebarActive?.() ? '100%' : '80px';
    input.style.cssText = `width: ${renameWidth}; min-width: 0; font-size: 0.75rem; padding: 2px 4px; background: var(--bg-input); border: 1px solid var(--accent); border-radius: 3px; color: var(--text); outline: none;`;

    tabName.appendChild(input);
    input.focus();
    input.select();

-    const finishRename = async ({ commit }) => {
-      if (!this._inlineRenameActive) return; // prevent double-fire
+    let editSettled = false;
+    let invalidated = false;
+    let completed = false;
+
+    const releaseRenderGuard = () => {
+      if (this._activeRename !== renameHandle) return;
      this._inlineRenameActive = false;
+    };
+
+    const completeCurrentRename = () => {
+      if (this._activeRename !== renameHandle) return;
+      completed = true;
+      releaseRenderGuard();
      this._activeRename = null;
+      this.renderSessionTabs();
+    };
+
+    const cancelRename = () => {
+      if (invalidated || completed) return;
+      invalidated = true;
+      editSettled = true;
+      tabName.classList.remove('tab-name-renaming');
+      restoreOriginalChildren();
+      completeCurrentRename();
+    };
+
+    const finishRename = async ({ commit }) => {
+      if (editSettled || invalidated) return;
+      editSettled = true;
+      tabName.classList.remove('tab-name-renaming');

      // Aborted (e.g. the session was deleted mid-rename, or Escape): re-render
      // so any ghost DOM is replaced with the canonical tab list, and skip the
      // API call — a cancel must not fire a stale rename PUT.
      if (!commit) {
-        this.renderSessionTabs();
+        cancelRename();
        return;
      }

+      if (this._activeRename !== renameHandle) return;
+      releaseRenderGuard();
+
      const suffix = input.value.trim();
      const fullName = parsed ? parsed.prefix + (suffix ? ': ' + suffix : '') : suffix;
-      tabName.textContent = fullName || originalContent;
+      if (fullName === session.name) restoreOriginalChildren();
+      else tabName.textContent = fullName || originalContent;

      // Skip the API call if the session vanished between focus and blur.
      const stillExists = this.sessions.has(sessionId);
      if (stillExists && fullName !== session.name) {
        const confirmed = await this._putSessionName(sessionId, fullName);
+        if (invalidated || this._activeRename !== renameHandle || !this.sessions.has(sessionId)) return;
        if (confirmed === null) {
-          tabName.textContent = originalContent;
+          restoreOriginalChildren();
          this.showToast('Failed to rename', 'error');
        } else {
          // The re-render below repaints from this.sessions, so the new name has
@@ -1854,14 +1893,15 @@ Object.assign(CodemanApp.prototype, {
        }
      }
      // Re-render tabs to restore full tab structure
-      this.renderSessionTabs();
+      completeCurrentRename();
    };

    // Register only after the input is wired so a throw above can't strand state.
-    this._activeRename = {
+    const renameHandle = {
      sessionId,
-      cancel: () => finishRename({ commit: false }),
+      cancel: cancelRename,
    };
+    this._activeRename = renameHandle;

    input.addEventListener('blur', () => finishRename({ commit: true }));
    input.addEventListener('keydown', (e) => {
@@ -400,9 +400,20 @@ Object.assign(CodemanApp.prototype, {
    document.getElementById('appSettingsCjkInput').checked = settings.cjkInputEnabled ?? defaults.cjkInputEnabled ?? false;
    document.getElementById('appSettingsExtendedKeyboardBar').checked = settings.extendedKeyboardBar ?? false;
    document.getElementById('appSettingsTabTwoRows').checked = settings.tabTwoRows ?? defaults.tabTwoRows ?? false;
+    document.getElementById('appSettingsTabOrientation').value =
+      settings.tabOrientation ?? defaults.tabOrientation ?? 'horizontal';
+    const tabRailWidth = window.CodemanTabRail?.resolveWidth({
+      width: settings.tabRailWidth ?? defaults.tabRailWidth ?? 256,
+    }) ?? 256;
+    this.syncTabRailWidthSetting?.(tabRailWidth);
    document.getElementById('appSettingsShowTabDetachButton').checked = settings.showTabDetachButton ?? defaults.showTabDetachButton ?? false;
    document.getElementById('appSettingsSessionListLayout').value =
      settings.sessionListLayout ?? defaults.sessionListLayout ?? 'header';
+    const sessionSidebarFontSize = this.resolveSessionSidebarFontSize(
+      settings.sessionSidebarFontSize ?? defaults.sessionSidebarFontSize
+    );
+    document.getElementById('appSettingsSessionSidebarFontSize').value = String(sessionSidebarFontSize);
+    document.getElementById('appSettingsSessionSidebarFontSizeValue').textContent = `${sessionSidebarFontSize} px`;
    // Claude CLI settings
    const claudeModeSelect = document.getElementById('appSettingsClaudeMode');
    const allowedToolsRow = document.getElementById('allowedToolsRow');
@@ -2027,8 +2038,13 @@ Object.assign(CodemanApp.prototype, {
      webglRendererEnabled: document.getElementById('appSettingsWebglRenderer').checked,
      extendedKeyboardBar: document.getElementById('appSettingsExtendedKeyboardBar').checked,
      tabTwoRows: document.getElementById('appSettingsTabTwoRows').checked,
+      tabOrientation: document.getElementById('appSettingsTabOrientation').value,
+      tabRailWidth: this.readTabRailWidthSetting?.() ?? 256,
      showTabDetachButton: document.getElementById('appSettingsShowTabDetachButton').checked,
      sessionListLayout: document.getElementById('appSettingsSessionListLayout').value,
+      sessionSidebarFontSize: this.resolveSessionSidebarFontSize(
+        document.getElementById('appSettingsSessionSidebarFontSize').value
+      ),
      skin: document.getElementById('appSettingsSkin').value,
      // Claude CLI settings
      claudeMode: document.getElementById('appSettingsClaudeMode').value,
@@ -2178,6 +2194,7 @@ Object.assign(CodemanApp.prototype, {
    // Re-parents #sessionTabs between header host and sidebar if the layout
    // changed, then calls applyTabWrapSettings() itself — do not call both.
    this.applySessionListLayout();
+    this.applyTabOrientation({ settleRailWidth: true });
    this.applyLineageLineSettings?.();
    this._updateTokensImmediate();  // Re-render token display (picks up showCost change)
    this.applyMonitorVisibility();
@@ -2423,7 +2440,10 @@ Object.assign(CodemanApp.prototype, {
        imageWatcherEnabled: false,
        ralphTrackerEnabled: false,
        tabTwoRows: false,
+        tabOrientation: 'horizontal',
+        tabRailWidth: 256,
        sessionListLayout: 'header',
+        sessionSidebarFontSize: 14,
        cjkInputEnabled: false,
        terminalWheelLocalScrollback: false, // mobile scrolls via touch, not wheel
        webglRendererEnabled: false, // mobile always uses the DOM renderer
@@ -2664,6 +2684,48 @@ Object.assign(CodemanApp.prototype, {
    }
  },

+  applyTabOrientation(options = {}) {
+    const settings = this.loadAppSettingsFromStorage();
+    const defaults = this.getDefaultSettings();
+    const sidebarOwnsTabs = this.isSessionSidebarActive?.() === true;
+    const orientation =
+      !this.isSoloWindow && !sidebarOwnsTabs && window.CodemanTabOverflow?.resolveTabOrientation
+        ? window.CodemanTabOverflow.resolveTabOrientation({
+            deviceType: MobileDetection.getDeviceType(),
+            setting: settings.tabOrientation ?? defaults.tabOrientation ?? 'horizontal',
+          })
+        : 'horizontal';
+
+    const root = document.documentElement;
+    const previous = root.getAttribute('data-tab-orientation') || 'horizontal';
+    root.setAttribute('data-tab-orientation', orientation);
+
+    const tabsEl = document.getElementById('sessionTabs');
+    const rail = document.getElementById('tabRail');
+    const headerHost = document.getElementById('sessionTabsHost');
+    if (!sidebarOwnsTabs && tabsEl && rail && headerHost) {
+      if (orientation === 'vertical') {
+        if (tabsEl.parentElement !== rail) rail.appendChild(tabsEl);
+      } else if (tabsEl.parentElement !== headerHost) {
+        headerHost.appendChild(tabsEl);
+      }
+    }
+    if (tabsEl) {
+      tabsEl.setAttribute('aria-orientation', sidebarOwnsTabs || orientation === 'vertical' ? 'vertical' : 'horizontal');
+    }
+
+    const settleRailWidth =
+      options.settleRailWidth === true && (orientation === 'vertical' || previous !== orientation);
+    this.applyTabRailWidth?.({ settle: settleRailWidth });
+    if (previous !== orientation) {
+      this.updateTabOverflowMode?.();
+      if (!settleRailWidth) this.fitAddon?.fit();
+      this._fullRenderSessionTabs?.();
+      this._updateConnectionLinesImmediate?.();
+      this._refreshHomeSessionsIfVisible?.();
+    }
+  },
+
  applyTabWrapSettings() {
    const settings = this.loadAppSettingsFromStorage();
    const defaults = this.getDefaultSettings();
@@ -2897,7 +2959,7 @@ Object.assign(CodemanApp.prototype, {
          'showFontControls', 'showSystemStats', 'showTokenCount', 'showCost',
          'showLifecycleLog', 'showResponseViewer', 'showRedrawButton',
          'showMonitor', 'showProjectInsights', 'showFileBrowser', 'showSubagents',
-          'subagentActiveTabOnly', 'tabTwoRows', 'sessionListLayout', 'localEchoEnabled', 'cjkInputEnabled', 'extendedKeyboardBar',
+          'subagentActiveTabOnly', 'tabTwoRows', 'tabOrientation', 'tabRailWidth', 'sessionListLayout', 'sessionSidebarFontSize', 'localEchoEnabled', 'cjkInputEnabled', 'extendedKeyboardBar',
          'skin', 'showPlanUsageLimits', 'showAttachmentsButton', 'showFileViewerButton', 'webglRendererEnabled',
          'terminalFontFamily',
          'language',
@@ -62,6 +62,7 @@
  --ring-glow: 0 0 12px -2px rgba(56, 182, 240, 0.55);
  --header-height: 36px;
  --toolbar-height: 42px;
+  --tab-rail-width: 256px;
  --sidebar-width: 260px;
  --sidebar-width-rich: 300px; /* detailed rows carry a stamps line as well */
  --sidebar-width-collapsed: 44px; /* == --touch-target-min */
@@ -574,6 +575,99 @@ body {
  background: var(--border-light);
 }

+.tab-rail {
+  display: none;
+  flex: 0 0 var(--tab-rail-width);
+  width: var(--tab-rail-width);
+  min-width: 0;
+  overflow: hidden;
+  background: var(--glass-bg);
+  border-right: 1px solid var(--glass-border);
+  position: relative;
+  z-index: 11;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail {
+  display: flex;
+  flex-direction: column;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tabs {
+  --lineage-vertical-gutter: 24px;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 2px;
+  padding: 0.35rem;
+  padding-left: calc(0.35rem + var(--lineage-vertical-gutter));
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: none;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tab {
+  width: 100%;
+  max-width: none;
+  justify-content: flex-start;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tab > * {
+  flex-shrink: 0;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tab .tab-info {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+html[data-tab-orientation='vertical'] .header-right {
+  margin-left: auto;
+}
+
+.tab-rail-resize-handle {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  cursor: ew-resize;
+  touch-action: none;
+  transition: background-color 0.15s ease;
+}
+
+.tab-rail-resize-handle:hover,
+.tab-rail-resize-handle:focus-visible {
+  background: color-mix(in srgb, var(--accent) 24%, transparent);
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+html:not([data-tab-orientation='vertical']) .tab-rail-resize-handle {
+  display: none;
+}
+
+.tab-rail-resize-shield:not([hidden]) {
+  display: block;
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  cursor: ew-resize;
+}
+
+body.tab-rail-resizing,
+body.tab-rail-resizing * {
+  cursor: ew-resize !important;
+  user-select: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab-rail,
+  .tab-rail-resize-handle {
+    transition: none !important;
+  }
+}
+
 .session-tab {
  display: flex;
  align-items: center;
@@ -1421,6 +1515,44 @@ html[data-line-anim="packet"] .connection-line.line-enter {
  text-overflow: ellipsis;
 }

+.session-tab .tab-name-prefix {
+  display: none;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tab .tab-name {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  white-space: normal;
+  line-height: 1.25;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tab .tab-name-prefix {
+  display: inline;
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tab .tab-name.tab-name-renaming {
+  display: flex;
+  align-items: center;
+  -webkit-box-orient: initial;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+  overflow: visible;
+}
+
+html[data-tab-orientation='vertical'] .tab-name-renaming .tab-rename-prefix {
+  flex: 0 0 auto;
+}
+
+html[data-tab-orientation='vertical'] .tab-name-renaming .tab-rename-input {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+}
+
 /* Tab folder path — hidden by default, shown via .tabs-show-folder on container */
 .session-tab .tab-folder {
  font-size: 0.6rem;
@@ -2152,6 +2284,123 @@ html[data-line-anim="packet"] .connection-line.line-enter {
  align-items: center;
 }

+.session-tab .tab-more {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.5rem;
+  padding: 0;
+  visibility: hidden;
+  pointer-events: none;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-muted);
+  font: 700 1rem/1 monospace;
+  cursor: pointer;
+}
+
+html[data-session-list='sidebar'][data-sidebar='expanded'] .session-sidebar .tab-name-row > .tab-actions > .tab-more,
+html[data-tab-orientation='vertical']:not(.tab-rail-compact) .tab-rail .tab-name-row > .tab-actions > .tab-more,
+html[data-tab-orientation='vertical'].tab-rail-compact .session-tab.active > .tab-actions > .tab-more {
+  display: inline-flex;
+}
+
+.session-tab:hover > .tab-actions > .tab-more,
+.session-tab:focus-within > .tab-actions > .tab-more,
+.session-tab.active > .tab-actions > .tab-more,
+html[data-session-list='sidebar'][data-sidebar='expanded'] .session-sidebar
+  :is(.session-tab:hover, .session-tab:focus-within, .session-tab.active)
+  .tab-name-row
+  > .tab-actions
+  > .tab-more,
+html[data-tab-orientation='vertical']:not(.tab-rail-compact) .tab-rail
+  :is(.session-tab:hover, .session-tab:focus-within, .session-tab.active)
+  .tab-name-row
+  > .tab-actions
+  > .tab-more {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+html[data-tab-orientation='vertical'].tab-rail-compact .session-tab .tab-actions > :is(.tab-gear, .tab-detach, .tab-close) {
+  display: none;
+}
+
+@media (pointer: coarse) {
+  .session-tab > .tab-actions > .tab-more,
+  html[data-session-list='sidebar'][data-sidebar='expanded']
+    .session-sidebar
+    .session-tab
+    .tab-name-row
+    > .tab-actions
+    > .tab-more,
+  html[data-tab-orientation='vertical']:not(.tab-rail-compact)
+    .tab-rail
+    .session-tab
+    .tab-name-row
+    > .tab-actions
+    > .tab-more {
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+.tab-rail-action-menu {
+  position: fixed;
+  z-index: 2000;
+  display: grid;
+  min-width: 180px;
+  padding: 0.3rem;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--btn-radius);
+  background: var(--floating-bg);
+  box-shadow: var(--elevated-shadow);
+}
+
+.tab-rail-action-menu button {
+  padding: 0.45rem 0.6rem;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.tab-rail-action-menu button:hover,
+.tab-rail-action-menu button:focus-visible {
+  background: var(--control-bg-hover);
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.tab-rail-action-menu .danger {
+  color: var(--red);
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-range-field {
+  display: grid;
+  grid-template-columns: minmax(112px, 1fr) 44px;
+  align-items: center;
+  gap: 8px;
+  width: min(220px, 44vw);
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-range-field input {
+  width: 100%;
+  accent-color: var(--accent);
+}
+
+:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-range-field output {
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
 /* Pop-out button is opt-in (App Settings → Tab Bar, default off; per-device).
   settings-ui.js mirrors the setting as the tabs-show-detach class on <html>.
   A tab that is ALREADY detached keeps its icon regardless: it is the
@@ -14754,6 +15003,10 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
  display: none;
 }

+html[data-tab-orientation='vertical'] .home-sessions {
+  display: none !important;
+}
+
 /* Belt and braces with shouldShowHomeSessions(): a resize that outruns the
   matchMedia listener must never leave the column overlapping the content. */
@media (max-width: 1179px) {
@@ -16530,6 +16783,13 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
  padding: 0 22px 22px;
 }

+#sessionOptionsModal #context-tab {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.25rem 1rem;
+  align-items: start;
+}
+
 #sessionOptionsModal .set-section {
  padding-top: 18px;
 }
@@ -16547,6 +16807,22 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
  font-size: 0.75rem;
 }

+@media (min-width: 1200px) {
+  #sessionOptionsModal .modal-content.modal-lg {
+    width: min(1120px, 96vw);
+    max-width: min(1120px, 96vw);
+  }
+
+  #sessionOptionsModal #context-tab {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  #sessionOptionsModal #context-tab > .set-section-head,
+  #sessionOptionsModal #context-tab > .set-section-blurb {
+    grid-column: 1 / -1;
+  }
+}
+
 #sessionOptionsModal .set-group + .set-group {
  margin-top: 16px;
 }
@@ -16836,10 +17112,27 @@ html[data-session-list="sidebar"] .session-sidebar .tab-info {
  min-width: 0;
 }

+html[data-session-list="sidebar"] .session-sidebar .tab-name-row,
 html[data-session-list="sidebar"] .session-sidebar .tab-name {
+  min-width: 0;
  max-width: none;
 }

+html[data-session-list='sidebar'] .session-sidebar .tab-name {
+  flex: 0 1 auto;
+  white-space: nowrap;
+  font-size: var(--session-sidebar-name-font-size, 14px);
+}
+
+html[data-tab-orientation='vertical'] .tab-rail .session-tab .tab-name {
+  font-size: var(--session-sidebar-name-font-size, 14px);
+}
+
+html[data-session-list='sidebar'] .session-sidebar .tab-actions,
+html[data-tab-orientation='vertical'] .tab-rail .session-tab .tab-name-row > .tab-actions {
+  flex-shrink: 0;
+}
+
 /* Reveal-on-hover reads badly on a 40px-tall full-width row, so keep the row
   actions permanently visible on the active session — no layout jitter when
   the pointer crosses the list. */
@@ -0,0 +1,316 @@
+/** @fileoverview Accessible, device-local vertical session-rail sizing. */
+
+Object.assign(CodemanApp.prototype, {
+  _getTabRailMinimumTerminalWidth() {
+    const cellWidth = this.terminal?._core?._renderService?.dimensions?.css?.cell?.width;
+    if (Number.isFinite(cellWidth) && cellWidth > 0) return Math.ceil(cellWidth * 40 + 24);
+    return 420;
+  },
+
+  _getTabRailBounds() {
+    const main = document.querySelector('.main');
+    return {
+      viewportWidth: window.innerWidth,
+      mainWidth: main?.clientWidth || window.innerWidth,
+      minTerminalWidth: this._getTabRailMinimumTerminalWidth(),
+    };
+  },
+
+  _getCurrentTabRailWidth() {
+    const fromCss = Number.parseFloat(document.documentElement.style.getPropertyValue('--tab-rail-width'));
+    if (Number.isFinite(fromCss)) return fromCss;
+    const measured = document.getElementById('tabRail')?.getBoundingClientRect?.().width;
+    return Number.isFinite(measured) && measured > 0 ? measured : window.CodemanTabRail?.DEFAULT_WIDTH || 256;
+  },
+
+  readTabRailWidthSetting() {
+    const select = document.getElementById('appSettingsTabRailWidth');
+    if (!select) return this._getCurrentTabRailWidth();
+    if (select.value === 'custom') return Number(select.dataset.currentWidth) || this._getCurrentTabRailWidth();
+    return Number(select.value) || window.CodemanTabRail?.DEFAULT_WIDTH || 256;
+  },
+
+  syncTabRailWidthSetting(width) {
+    const select = document.getElementById('appSettingsTabRailWidth');
+    if (!select) return;
+    const rounded = Math.round(width);
+    select.dataset.currentWidth = String(rounded);
+    const preset = select.querySelector(`option[value="${rounded}"]`);
+    if (preset) {
+      select.value = String(rounded);
+      return;
+    }
+    const custom = select.querySelector('option[value="custom"]');
+    if (custom) custom.textContent = `Custom (${rounded}px)`;
+    select.value = 'custom';
+  },
+
+  _setTabRailWidth(width) {
+    const policy = window.CodemanTabRail;
+    if (!policy) return 256;
+    const preferred = policy.resolveWidth({ width });
+    const bounds = this._getTabRailBounds();
+    const resolved = policy.resolveWidth({ width: preferred, ...bounds });
+    const effectiveMax = policy.resolveWidth({ width: policy.MAX_WIDTH, ...bounds });
+    const root = document.documentElement;
+    root.style.setProperty('--tab-rail-width', `${resolved}px`);
+    const wasCompact = root.classList.contains('tab-rail-compact');
+    const compact = resolved < 240;
+    root.classList.toggle('tab-rail-compact', compact);
+    if (wasCompact !== compact) this._fullRenderSessionTabs?.();
+    const handle = document.getElementById('tabRailResizeHandle');
+    if (handle) {
+      handle.setAttribute('aria-valuemax', String(effectiveMax));
+      handle.setAttribute('aria-valuenow', String(resolved));
+    }
+    this.syncTabRailWidthSetting(preferred);
+    return resolved;
+  },
+
+  _persistTabRailWidth(width) {
+    const settings = this.loadAppSettingsFromStorage();
+    if (settings.tabRailWidth === width) return;
+    settings.tabRailWidth = width;
+    this.saveAppSettingsToStorage(settings);
+  },
+
+  _claimTabRailResize() {
+    this._tabRailResizeOwnsObserver = true;
+    clearTimeout(this._tabRailResizeWatchdog);
+    clearTimeout(this._tabRailReleaseTimer);
+    if (this._tabRailReleaseRaf) cancelAnimationFrame(this._tabRailReleaseRaf);
+    this._armTabRailResizeWatchdog();
+    if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf);
+    if (this._resizeTimeout) clearTimeout(this._resizeTimeout);
+    this._resizeRaf = null;
+    this._resizeTimeout = null;
+  },
+
+  _armTabRailResizeWatchdog() {
+    this._tabRailResizeWatchdog = setTimeout(() => {
+      this._tabRailResizeWatchdog = null;
+      if (document.body.classList.contains('tab-rail-resizing')) {
+        this._armTabRailResizeWatchdog();
+        return;
+      }
+      this._tabRailResizeOwnsObserver = false;
+    }, 1000);
+  },
+
+  _releaseTabRailResize() {
+    clearTimeout(this._tabRailResizeWatchdog);
+    this._tabRailResizeWatchdog = null;
+    const release = () => {
+      clearTimeout(this._tabRailReleaseTimer);
+      this._tabRailReleaseTimer = null;
+      this._tabRailReleaseRaf = null;
+      this._tabRailResizeOwnsObserver = false;
+    };
+    if (typeof requestAnimationFrame === 'function') {
+      this._tabRailReleaseRaf = requestAnimationFrame(() => {
+        this._tabRailReleaseRaf = requestAnimationFrame(release);
+      });
+      this._tabRailReleaseTimer = setTimeout(release, 250);
+    } else release();
+  },
+
+  _scheduleTabRailSettle(effective, preferred = effective) {
+    clearTimeout(this._tabRailSettleTimer);
+    this._tabRailSettleTimer = setTimeout(async () => {
+      this._tabRailSettleTimer = null;
+      this._persistTabRailWidth(preferred);
+      try {
+        if (this.activeSessionId && this.sendResize) await this.sendResize(this.activeSessionId);
+        else this.fitAddon?.fit();
+        this._updateConnectionLinesImmediate?.();
+      } catch (error) {
+        console.warn('Failed to resize terminal after rail resize:', error);
+      } finally {
+        this._releaseTabRailResize();
+      }
+    }, 150);
+  },
+
+  applyTabRailWidth(options = {}) {
+    const settings = this.loadAppSettingsFromStorage();
+    const requested = settings.tabRailWidth ?? window.CodemanTabRail?.DEFAULT_WIDTH ?? 256;
+    const preferred = window.CodemanTabRail?.resolveWidth({ width: requested }) ?? 256;
+    if (options.settle) this._claimTabRailResize();
+    const resolved = this._setTabRailWidth(preferred);
+    if (options.persist !== false && requested !== preferred) this._persistTabRailWidth(preferred);
+    if (options.settle) this._scheduleTabRailSettle(resolved, preferred);
+    return resolved;
+  },
+
+  _applyTabRailPointerWidth(clientX) {
+    const main = document.querySelector('.main');
+    if (!main) return this._getCurrentTabRailWidth();
+    const previous = this._getCurrentTabRailWidth();
+    const width = this._setTabRailWidth(clientX - main.getBoundingClientRect().left);
+    let proposed = null;
+    try {
+      proposed = this.fitAddon?.proposeDimensions?.();
+    } catch {}
+    return proposed && proposed.cols < 40 ? this._setTabRailWidth(previous) : width;
+  },
+
+  _queueTabRailPointerWidth(clientX) {
+    this._tabRailPendingClientX = clientX;
+    if (this._tabRailPointerRaf) return;
+    this._tabRailPointerRaf = requestAnimationFrame(() => {
+      this._tabRailPointerRaf = null;
+      this._tabRailDragWidth = this._applyTabRailPointerWidth(this._tabRailPendingClientX);
+    });
+  },
+
+  _finishTabRailDrag(handle, pointerId) {
+    if (!document.body.classList.contains('tab-rail-resizing')) return;
+    if (this._tabRailPointerRaf) {
+      cancelAnimationFrame(this._tabRailPointerRaf);
+      this._tabRailPointerRaf = null;
+      this._tabRailDragWidth = this._applyTabRailPointerWidth(this._tabRailPendingClientX);
+    }
+    document.body.classList.remove('tab-rail-resizing');
+    const shield = document.getElementById('tabRailResizeShield');
+    if (shield) shield.hidden = true;
+    try {
+      if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture(pointerId);
+    } catch {}
+    const preferred = window.CodemanTabRail?.resolveWidth({ width: this._tabRailDragWidth }) ?? this._tabRailDragWidth;
+    this._scheduleTabRailSettle(this._tabRailDragWidth || this._getCurrentTabRailWidth(), preferred);
+  },
+
+  _onTabRailKeyDown(event) {
+    const width = window.CodemanTabRail?.resolveKeyboardWidth({
+      key: event.key,
+      shiftKey: event.shiftKey,
+      currentWidth: this._getCurrentTabRailWidth(),
+      ...this._getTabRailBounds(),
+    });
+    if (width === null || width === undefined) return;
+    event.preventDefault();
+    this._claimTabRailResize();
+    const effective = this._setTabRailWidth(width);
+    this._scheduleTabRailSettle(effective, window.CodemanTabRail.resolveWidth({ width }));
+  },
+
+  initTabRailResize() {
+    const handle = document.getElementById('tabRailResizeHandle');
+    if (!handle || handle.dataset.ready === '1') return;
+    handle.dataset.ready = '1';
+    this.applyTabRailWidth();
+    handle.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      this.closeTabRailActionMenu();
+      this._claimTabRailResize();
+      this._tabRailDragWidth = this._getCurrentTabRailWidth();
+      this._tabRailPendingClientX = event.clientX;
+      document.body.classList.add('tab-rail-resizing');
+      const shield = document.getElementById('tabRailResizeShield');
+      if (shield) shield.hidden = false;
+      try {
+        handle.setPointerCapture(event.pointerId);
+      } catch {
+        document.body.classList.remove('tab-rail-resizing');
+        if (shield) shield.hidden = true;
+        this._releaseTabRailResize();
+      }
+    });
+    handle.addEventListener('pointermove', (event) => {
+      if (handle.hasPointerCapture?.(event.pointerId)) this._queueTabRailPointerWidth(event.clientX);
+    });
+    handle.addEventListener('pointerup', (event) => this._finishTabRailDrag(handle, event.pointerId));
+    handle.addEventListener('pointercancel', (event) => this._finishTabRailDrag(handle, event.pointerId));
+    handle.addEventListener('lostpointercapture', (event) => this._finishTabRailDrag(handle, event.pointerId));
+    handle.addEventListener('keydown', (event) => this._onTabRailKeyDown(event));
+    handle.addEventListener('dblclick', (event) => {
+      event.preventDefault();
+      this._claimTabRailResize();
+      const preferred = window.CodemanTabRail?.DEFAULT_WIDTH || 256;
+      const effective = this._setTabRailWidth(preferred);
+      this._scheduleTabRailSettle(effective, preferred);
+    });
+
+    let resizeTimer = null;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        this.applyTabOrientation?.();
+        this.applyTabRailWidth({ persist: false });
+      }, 100);
+    });
+  },
+
+  closeTabRailActionMenu(options = {}) {
+    const menu = document.querySelector('.tab-rail-action-menu');
+    const trigger = this._tabRailActionMenuTrigger;
+    menu?.remove();
+    if (this._tabRailActionMenuOutside) {
+      document.removeEventListener('pointerdown', this._tabRailActionMenuOutside, true);
+      this._tabRailActionMenuOutside = null;
+    }
+    if (this._tabRailActionMenuViewport) {
+      window.removeEventListener('resize', this._tabRailActionMenuViewport);
+      this._tabRailActionMenuViewport = null;
+    }
+    this._tabRailActionMenuTrigger = null;
+    if (options.restoreFocus) trigger?.focus?.();
+  },
+
+  openTabRailActionMenu(event, sessionId) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.closeTabRailActionMenu();
+    const trigger = event.currentTarget;
+    const menu = document.createElement('div');
+    menu.className = 'tab-rail-action-menu';
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', 'Session actions');
+    const settings = this.loadAppSettingsFromStorage();
+    const actions = [
+      { label: 'Session options', run: () => this.openSessionOptions(sessionId) },
+      ...(settings.showTabDetachButton || this.detachedSessions?.has(sessionId)
+        ? [{ label: 'Open in a new window', run: () => this.detachSession(sessionId) }]
+        : []),
+      { label: 'Close session', className: 'danger', run: () => this.requestCloseSession(sessionId) },
+    ];
+    for (const action of actions) {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.setAttribute('role', 'menuitem');
+      button.textContent = action.label;
+      if (action.className) button.className = action.className;
+      button.addEventListener('click', () => {
+        this.closeTabRailActionMenu();
+        action.run();
+      });
+      menu.appendChild(button);
+    }
+    document.body.appendChild(menu);
+    const rect = trigger.getBoundingClientRect();
+    const menuRect = menu.getBoundingClientRect();
+    menu.style.left = `${Math.max(8, Math.min(rect.right - menuRect.width, window.innerWidth - menuRect.width - 8))}px`;
+    menu.style.top = `${Math.max(8, Math.min(rect.bottom + 4, window.innerHeight - menuRect.height - 8))}px`;
+    this._tabRailActionMenuTrigger = trigger;
+    this._tabRailActionMenuOutside = (pointerEvent) => {
+      if (!menu.contains(pointerEvent.target) && pointerEvent.target !== trigger) this.closeTabRailActionMenu();
+    };
+    document.addEventListener('pointerdown', this._tabRailActionMenuOutside, true);
+    this._tabRailActionMenuViewport = () => this.closeTabRailActionMenu();
+    window.addEventListener('resize', this._tabRailActionMenuViewport, { once: true });
+    menu.addEventListener('keydown', (keyEvent) => {
+      const buttons = [...menu.querySelectorAll('button')];
+      const index = buttons.indexOf(document.activeElement);
+      if (keyEvent.key === 'Escape') {
+        keyEvent.preventDefault();
+        this.closeTabRailActionMenu({ restoreFocus: true });
+      } else if (keyEvent.key === 'ArrowDown' || keyEvent.key === 'ArrowUp') {
+        keyEvent.preventDefault();
+        const direction = keyEvent.key === 'ArrowDown' ? 1 : -1;
+        buttons[(index + direction + buttons.length) % buttons.length]?.focus();
+      }
+    });
+    menu.querySelector('button')?.focus();
+  },
+});
@@ -901,6 +901,7 @@ Object.assign(CodemanApp.prototype, {
    const MIN_ROWS = 10;

    const throttledResize = () => {
+      if (this._tabRailResizeOwnsObserver) return;
      // Trailing-edge debounce: ALL resize work (fit + clear + SIGWINCH) happens
      // once after the user stops resizing. During active resize, the terminal
      // stays at its old dimensions for up to 300ms.
@@ -956,6 +956,8 @@ export const SettingsUpdateSchema = z
    // CODEMAN_ALLOW_UNAUTHENTICATED_NETWORK env var. Stripped before persisting.
    acknowledgeUnauthTunnel: z.boolean().optional(),
    tabTwoRows: z.boolean().optional(),
+    tabOrientation: z.enum(['horizontal', 'vertical']).optional(),
+    tabRailWidth: z.number().int().min(208).max(360).optional(),
    /**
     * Session list layout. Display key (per-device).
     * 'header'       = horizontal tab strip
@@ -967,6 +969,8 @@ export const SettingsUpdateSchema = z
     * on data-sidebar-detail. See applySessionListLayout() in app.js.
     */
    sessionListLayout: z.enum(['header', 'sidebar', 'sidebar-rich']).optional(),
+    /** Session-name text size in vertical navigation. Display key (per-device). */
+    sessionSidebarFontSize: z.number().int().min(11).max(18).optional(),
    agentTeamsEnabled: z.boolean().optional(),
    /** Model for new Claude sessions (e.g. "claude-fable-5[1m]", "opus[1m]"); takes precedence over opusContext1mEnabled */
    claudeModel: z.string().max(50).optional(),