chore: version packages

Release 1.3.5. Consumes the changeset from PR #155: re-issue the
codeman_session cookie on every authenticated request so the browser cookie
lifetime tracks the server-side sliding TTL, fixing the recurring native Basic
Auth dialog during active use.

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

.gitignore

@@ -52,8 +52,16 @@ Thumbs.db
 # Generated output
 out/
 screenshots-echo-diag/
+screenshots-readme/
+screenshots-readme-real/
+screenshots-real/
 scripts/remotion/out/
 
+# Local UI/README capture scratch (screenshot runs, design mockups). Not build
+# output, but never meant for git — an unqualified `git add -A` during a COM has
+# swept dirs like these into a release before.
+design-explorations/
+
 # Artifacts that should not be tracked
 test-results/
 tmp/

CHANGELOG.md

@@ -1,5 +1,57 @@
 # aicodeman
 
+## 1.3.5
+
+### Patch Changes
+
+- a842f2d: fix(auth): slide the session cookie so active users aren't logged out
+
+  Re-issue the `codeman_session` cookie on every authenticated request so the
+  browser cookie lifetime tracks the server-side sliding TTL (the session store
+  already uses `refreshOnGet`). Previously the cookie was only set on the Basic
+  Auth path with a fixed 24h lifetime from login, so the browser dropped it
+  mid-use; the next request arrived cookie-less, fell through to Basic Auth and
+  popped the native username/password dialog, perceived as a random logout while
+  actively working.
+
+## 1.3.4
+
+### Patch Changes
+
+- Fix "Run Shell" not switching the terminal to the newly created shell session. Clicking Run Shell created the shell tab but left the previous session's terminal on screen, so you had to manually click the new tab to actually enter it. Root cause: `runShell()` pre-set `activeSessionId` to the new session's id right before calling `selectSession()`, and `selectSession()` early-returns when the requested id already matches the active one, so it skipped the terminal buffer load, tab activation, and focus. Removed the premature assignment in both the local and remote-SSH shell branches so `selectSession()` runs to completion (matching `runClaude`/`runCodex`/`runGemini`/`runOpenCode`, which already avoid this). Verified end-to-end in a real browser with a negative/positive control.
+
+## 1.3.3
+
+### Patch Changes
+
+- Fix terminal scroll-back in Claude sessions, especially on macOS trackpads (#154).
+  - **Deterministic CLI version detection.** `cliVersion` was often `undefined` because it was scraped from the `Claude Code vX.Y.Z` startup banner, which newer Claude Code builds (2.1.187+) don't reliably print and resumed sessions never show. With the version unknown, wheel-forwarding to Claude's transcript was silently disabled — and since repaint-mode Claude keeps no local terminal scrollback, scrolling up reached nothing. A new `getClaudeCliVersion()` probe (`claude --version`, cached, local-only) seeds the version at session start so forwarding engages. Restored sessions pick it up on restart.
+  - **Trackpad Shift+scroll.** The wheel handler now reads the dominant axis, so a macOS trackpad's Shift+two-finger scroll — which the browser reports as horizontal `deltaX` — reaches xterm's local scrollback instead of collapsing to a fixed one line per tick.
+  - **Opt-out setting.** New per-device App Settings → Input → "Wheel Scrolls Local History" (default off) pins the plain wheel to local scrollback (the pre-#144 behavior) for shell and other non-repaint sessions.
+  - **No more "queued bytes" flicker on scroll.** Wheel-scroll reports now use a fire-and-forget send path (seq-less input frame) instead of the durable exactly-once input queue, so they no longer appear in the pending-bytes connection indicator or churn localStorage. Keystrokes, taps, and clicks still use the durable queue.
+
+## 1.3.2
+
+### Patch Changes
+
+- Make the Cron Jobs modal fully skin-aware and consistent with App Settings' design language.
+  - **Fix white dropdowns:** `.form-select` had no `appearance` reset and the app set no `color-scheme`, so native `<select>` fields rendered as white OS widgets that ignored the active skin. Selects now use `appearance: none` with an opaque `var(--bg-input)` fill, a `var(--border)` outline, and a custom chevron, so they follow the skin (daylight `#202833`, OG `#1a1a1f`). This is on the shared `.form-select` class, so App Settings, Cron, and every other select match and are fixed together.
+  - Set `color-scheme: dark` on `:root` so native select option popups, date/time pickers, and scrollbars render dark across all three (dark) skins instead of flashing white.
+  - Themed the Cron date/time inputs with `var(--bg-input)` / `var(--border)` instead of hardcoded values.
+  - Fixed the Cron toolbar: "+ New Job" / "Refresh" and the footer Save / Cancel now use the full `btn-toolbar` size (matching the App Settings footer), with a wider gap and a divider under the toolbar for better spacing.
+
+## 1.3.1
+
+### Patch Changes
+
+- Redesign the Cron Jobs modal to match the App Settings styling, and fix a bug that left its create form fully expanded.
+  - **Fix:** the cron modal's "New Cron Job" form and all of its conditional rows (Launch Command, Prompt File Path, and the once/interval/daily/weekly schedule fields) never actually collapsed — there is no global `.hidden` utility in the stylesheet and the cron modal never scoped its own, so the form opened fully expanded with every field visible at once. Added a scoped `#cronModal .hidden` rule; the form now stays collapsed until "+ New Job" and only shows the fields relevant to the selected agent type, prompt source, and schedule type.
+  - Sectioned the create/edit form into Basics / Prompt / Schedule / Options with the same section-header dividers used in App Settings, and increased row spacing.
+  - Styled the agent-type / prompt-source / input-mode / schedule-type dropdowns and the datetime-local / time inputs to share the bordered, rounded, focus-ringed field look.
+  - Converted the "Auto-close previous run's session" and "Enabled" toggles into App-Settings-style cards (label + description on the left, compact switch on the right).
+  - Replaced the raw weekday checkboxes with pill toggles that fill with the accent color when selected.
+  - Restyled the job list rows as hover-highlighted cards with pill badges (agent type, schedule, disabled) and right-aligned actions, and gave the modal a divider-topped Cancel / Save footer.
+
 ## 1.3.0
 
 ### Minor Changes

CLAUDE.md

@@ -56,7 +56,7 @@ When user says "COM":
 
 CI runs `npm run check:lockfile` on every push/PR, so lockfile drift fails the build even if the `version-packages` script is bypassed.
 
-**Version**: 1.3.0 (must match `package.json`)
+**Version**: 1.3.5 (must match `package.json`)
 
 ## Project Overview
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aicodeman",
-  "version": "1.3.0",
+  "version": "1.3.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aicodeman",
-      "version": "1.3.0",
+      "version": "1.3.5",
       "hasInstallScript": true,
       "license": "MIT",
       "workspaces": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aicodeman",
-  "version": "1.3.0",
+  "version": "1.3.5",
   "description": "Mission control for AI coding agents - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",

src/session.ts

@@ -62,6 +62,7 @@ import {
   SPINNER_PATTERN,
   MAX_SESSION_TOKENS,
   execPattern,
+  getClaudeCliVersion,
 } from './utils/index.js';
 import {
   MAX_TERMINAL_BUFFER_SIZE,
@@ -1308,6 +1309,27 @@ export class Session extends EventEmitter {
       `[Session] Starting interactive ${modeLabel} session` + (this._useMux ? ` (with ${this._mux!.backend})` : '')
     );
 
+    // Seed the CLI version deterministically for LOCAL Claude sessions. The
+    // banner scrape in parseClaudeCodeInfo() is unreliable — newer Claude Code
+    // builds don't print "Claude Code vX.Y.Z" at startup and resumed sessions
+    // never show it — which left cliVersion undefined and silently disabled
+    // wheel-forwarding to Claude's own transcript (the only route to history in
+    // repaint/alt-screen mode; issue #154). Remote sessions run claude on
+    // another host, so a local probe wouldn't reflect their version — skip them
+    // and let the banner scrape handle those. Cached process-wide, best-effort.
+    if (this.mode === 'claude' && !this._remote && !this._cliVersion) {
+      const probedVersion = getClaudeCliVersion();
+      if (probedVersion) {
+        this._cliVersion = probedVersion;
+        this.emit('cliInfoUpdated', {
+          version: this._cliVersion,
+          model: this._cliModel,
+          accountType: this._cliAccountType,
+          latestVersion: this._cliLatestVersion,
+        });
+      }
+    }
+
     // If mux wrapping is enabled, create or attach to a mux session
     if (this._useMux && this._mux) {
       try {

src/utils/claude-cli-resolver.ts

@@ -8,7 +8,7 @@
  * @module utils/claude-cli-resolver
  */
 
-import { execSync } from 'node:child_process';
+import { execSync, execFileSync } from 'node:child_process';
 import { existsSync } from 'node:fs';
 import { delimiter, dirname, join } from 'node:path';
 import { homedir } from 'node:os';
@@ -83,3 +83,43 @@ export function getAugmentedPath(): string {
   _augmentedPath = currentPath;
   return _augmentedPath;
 }
+
+/** Cached `claude --version` result: string = version, null = probed but unavailable, undefined = not probed */
+let _claudeVersion: string | null | undefined = undefined;
+
+/**
+ * Returns the installed Claude CLI version (e.g. `"2.1.210"`), or null if it
+ * can't be determined. Runs `claude --version` once and caches the result.
+ *
+ * This is a deterministic alternative to scraping the interactive startup
+ * banner (`parseClaudeCodeInfo` in session.ts): newer Claude Code builds don't
+ * reliably print `Claude Code vX.Y.Z` at startup, and resumed sessions never
+ * show it, which left `cliVersion` undefined and silently disabled features
+ * gated on it (e.g. wheel-forwarding to Claude's transcript — issue #154).
+ */
+export function getClaudeCliVersion(): string | null {
+  if (_claudeVersion !== undefined) return _claudeVersion;
+  // Keep the test suite hermetic — never spawn a real `claude` subprocess under
+  // vitest (matches IS_TEST_MODE in tmux-manager). Tests that need a version set
+  // it on the session directly.
+  if (process.env.VITEST) {
+    _claudeVersion = null;
+    return _claudeVersion;
+  }
+  try {
+    const dir = findClaudeDir();
+    const bin = dir ? join(dir, 'claude') : 'claude';
+    // execFileSync (no shell) — the resolved path may contain spaces, and there
+    // is no untrusted input, but avoid a shell either way.
+    const out = execFileSync(bin, ['--version'], {
+      encoding: 'utf-8',
+      timeout: EXEC_TIMEOUT_MS,
+      env: { ...process.env, PATH: getAugmentedPath() },
+    });
+    const match = out.match(/(\d+\.\d+\.\d+)/);
+    _claudeVersion = match ? match[1] : null;
+  } catch {
+    _claudeVersion = null;
+  }
+  return _claudeVersion;
+}

src/utils/index.ts

@@ -26,7 +26,7 @@ export { isSafePushEndpoint } from './push-endpoint-validation.js';
 export { stringSimilarity, fuzzyPhraseMatch, todoContentHash } from './string-similarity.js';
 export { assertNever } from './type-safety.js';
 export { wrapWithNice } from './nice-wrapper.js';
-export { findClaudeDir, getAugmentedPath } from './claude-cli-resolver.js';
+export { findClaudeDir, getAugmentedPath, getClaudeCliVersion } from './claude-cli-resolver.js';
 export { resolveOpenCodeDir } from './opencode-cli-resolver.js';
 export { resolveCodexDir, isCodexAvailable } from './codex-cli-resolver.js';
 export { resolveGeminiDir, isGeminiAvailable } from './gemini-cli-resolver.js';

src/web/middleware/auth.ts

@@ -151,6 +151,19 @@ export function registerAuthMiddleware(app: FastifyInstance, https: boolean): Au
     // Use get() instead of has() so refreshOnGet extends the TTL on active sessions
     const sessionToken = req.cookies[AUTH_COOKIE_NAME];
     if (sessionToken && authSessions.get(sessionToken) !== undefined) {
+      // Sliding cookie: re-issue on every authenticated request so the browser
+      // cookie lifetime tracks the server-side sliding TTL (refreshOnGet above).
+      // Without this the cookie has a fixed lifetime from login; the browser
+      // drops it mid-use, the next request arrives cookie-less and falls through
+      // to Basic Auth — popping the native username/password dialog, which reads
+      // as a random logout while actively working.
+      reply.setCookie(AUTH_COOKIE_NAME, sessionToken, {
+        httpOnly: true,
+        secure: https,
+        sameSite: 'lax',
+        maxAge: AUTH_SESSION_TTL_MS / 1000, // seconds
+        path: '/',
+      });
       done();
       return;
     }

src/web/public/app.js

@@ -2369,6 +2369,39 @@ class CodemanApp {
     this._reliableSend(sessionId, input, opts?.useMux === true);
   }
 
+  /**
+   * Fire-and-forget input for EPHEMERAL, loss-tolerant streams (e.g. wheel-scroll
+   * reports). Unlike _sendInputAsync, this never enters the durable seq/ACK queue,
+   * so it isn't persisted, retried, or counted in the pending-bytes connection
+   * indicator (which was flickering "11b/22b queued" on every scroll tick). A
+   * dropped scroll tick is harmless; keystrokes still go through _sendInputAsync.
+   * The server applies a seq-less {t:'i'} frame / seq-less POST unconditionally
+   * and sends no ACK (ws-routes.ts, session-routes input handler).
+   */
+  _sendInputEphemeral(sessionId, input) {
+    if (!sessionId || !input) return;
+    if (this._ws && this._ws.readyState === WebSocket.OPEN && this._wsSessionId === sessionId) {
+      try {
+        this._ws.send(JSON.stringify({ t: 'i', d: input }));
+        return;
+      } catch {
+        // socket died mid-send — fall through to a best-effort POST
+      }
+    }
+    // No usable WS for this session: best-effort POST, not queued. Dropped on
+    // failure — a scroll tick lost while offline needs no recovery.
+    try {
+      fetch(`/api/sessions/${sessionId}/input`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ input }),
+        keepalive: true,
+      }).catch(() => {});
+    } catch {
+      // ignore — loss-tolerant
+    }
+  }
+
   /** Record one input frame and kick delivery. The record lives until ACKed. */
   _reliableSend(sessionId, data, useMux) {
     const seq = this._nextSeq(sessionId);

src/web/public/index.html

@@ -627,21 +627,23 @@
           <button class="modal-close" onclick="app.closeCron()" aria-label="Close cron">&times;</button>
         </div>
         <div class="modal-body">
-          <p class="form-hint" style="margin-bottom:10px;">Times use the server's local timezone.</p>
-          <div style="margin-bottom:10px;">
-            <button class="btn-toolbar btn-sm btn-primary" onclick="app.openCronJobForm()">+ New Job</button>
-            <button class="btn-toolbar btn-sm" onclick="app.refreshCron()">Refresh</button>
+          <p class="form-hint cron-modal-hint">Times use the server's local timezone.</p>
+          <div class="cron-toolbar">
+            <button class="btn-toolbar btn-primary" onclick="app.openCronJobForm()">+ New Job</button>
+            <button class="btn-toolbar" onclick="app.refreshCron()">Refresh</button>
           </div>
           <!-- Job list -->
           <div id="cronJobList" class="cron-job-list"></div>
 
           <!-- Create/Edit form (hidden until New/Edit) -->
           <div id="cronJobForm" class="cron-job-form hidden">
-            <div class="form-section-header" id="cronFormTitle">New Cron Job</div>
+            <div class="cron-form-title" id="cronFormTitle">New Cron Job</div>
             <input type="hidden" id="schJobId">
+
+            <div class="form-section-header">Basics</div>
             <div class="form-row"><label>Name</label><input type="text" id="schName" placeholder="My nightly job"></div>
             <div class="form-row"><label>Agent Type</label>
-              <select id="schAgentType" onchange="app.onCronAgentTypeChange()">
+              <select id="schAgentType" class="form-select" onchange="app.onCronAgentTypeChange()">
                 <option value="claude">Claude</option>
                 <option value="shell">Terminal / Shell</option>
                 <option value="opencode">OpenCode</option>
@@ -651,8 +653,10 @@
             </div>
             <div class="form-row"><label>Working Directory</label><input type="text" id="schWorkingDir" placeholder="/absolute/path"></div>
             <div class="form-row hidden" id="schLaunchCommandRow"><label>Launch Command</label><input type="text" id="schLaunchCommand" placeholder="Optional — runs as the first command in the new shell"></div>
+
+            <div class="form-section-header">Prompt</div>
             <div class="form-row"><label>Prompt Source</label>
-              <select id="schPromptMode" onchange="app.onCronPromptModeChange()">
+              <select id="schPromptMode" class="form-select" onchange="app.onCronPromptModeChange()">
                 <option value="inline_text">Inline text</option>
                 <option value="prompt_file_path">Prompt file path</option>
               </select>
@@ -660,13 +664,15 @@
             <div class="form-row" id="schPromptTextRow"><label>Prompt</label><textarea id="schPromptText" rows="4" placeholder="Prompt to send into the session"></textarea></div>
             <div class="form-row hidden" id="schPromptFileRow"><label>Prompt File Path</label><input type="text" id="schPromptFilePath" placeholder="/absolute/path/to/prompt.md"></div>
             <div class="form-row"><label>Input Mode</label>
-              <select id="schInputMode">
+              <select id="schInputMode" class="form-select">
                 <option value="typed">Typed (via tmux)</option>
                 <option value="paste">Paste (direct)</option>
               </select>
             </div>
+
+            <div class="form-section-header">Schedule</div>
             <div class="form-row"><label>Schedule Type</label>
-              <select id="schScheduleType" onchange="app.onCronScheduleTypeChange()">
+              <select id="schScheduleType" class="form-select" onchange="app.onCronScheduleTypeChange()">
                 <option value="once">Once</option>
                 <option value="interval">Interval</option>
                 <option value="daily">Daily</option>
@@ -688,23 +694,34 @@
               </span>
             </div>
             <div class="form-row hidden" id="schWeeklyTimeRow"><label>Weekly Time (HH:MM)</label><input type="time" id="schWeeklyTime"></div>
+
+            <div class="form-section-header">Options</div>
             <div class="form-row"><label>On auto-run, if same agent running</label>
-              <select id="schConcurrencyPolicy">
+              <select id="schConcurrencyPolicy" class="form-select">
                 <option value="warn_only">Run anyway</option>
                 <option value="skip_if_same_agent_running">Skip this run</option>
               </select>
             </div>
-            <div class="form-row form-row-switch"><label title="Recurring schedules only: when the next run fires, the still-open session created by this job's previous run is closed first">Auto-close previous run's session</label>
-              <label class="switch"><input type="checkbox" id="schAutoClosePrev" checked><span class="slider"></span></label>
+            <div class="form-row form-row-switch cron-switch-row">
+              <div class="cron-switch-text">
+                <span class="cron-switch-label">Auto-close previous run's session</span>
+                <span class="cron-switch-desc">Recurring schedules only: close the prior run's still-open session before the next run fires</span>
+              </div>
+              <label class="switch switch-sm"><input type="checkbox" id="schAutoClosePrev" checked><span class="slider"></span></label>
             </div>
-            <div class="form-row form-row-switch"><label>Enabled</label>
-              <label class="switch"><input type="checkbox" id="schEnabled" checked><span class="slider"></span></label>
+            <div class="form-row form-row-switch cron-switch-row">
+              <div class="cron-switch-text">
+                <span class="cron-switch-label">Enabled</span>
+                <span class="cron-switch-desc">Off keeps the job saved but skips its schedule</span>
+              </div>
+              <label class="switch switch-sm"><input type="checkbox" id="schEnabled" checked><span class="slider"></span></label>
             </div>
             <div class="form-row"><label>Notes</label><input type="text" id="schNotes" placeholder="Optional"></div>
-            <div id="cronFormError" class="form-hint" style="color:var(--danger,#e55);"></div>
-            <div style="margin-top:10px;">
-              <button class="btn-toolbar btn-sm btn-primary" onclick="app.saveCronJob()">Save</button>
-              <button class="btn-toolbar btn-sm" onclick="app.cancelCronJobForm()">Cancel</button>
+
+            <div id="cronFormError" class="form-hint cron-form-error"></div>
+            <div class="cron-form-actions">
+              <button class="btn-toolbar" onclick="app.cancelCronJobForm()">Cancel</button>
+              <button class="btn-toolbar btn-primary" onclick="app.saveCronJob()">Save</button>
             </div>
           </div>
         </div>
@@ -1162,6 +1179,16 @@
               </div>
               <!-- Input Section -->
               <div class="settings-section-header">Input</div>
+              <div class="settings-item settings-item-multiline" title="Scroll the terminal's own local scrollback with a plain mouse wheel / two-finger swipe, instead of forwarding the wheel to the CLI's transcript. Turn on if scrolling back through history doesn't work (e.g. macOS trackpad in Claude sessions). Shift+wheel always reaches local scrollback regardless.">
+                <div class="settings-item-text">
+                  <span class="settings-item-label">Wheel Scrolls Local History</span>
+                  <span class="settings-item-desc">Plain wheel/trackpad pages the terminal scrollback</span>
+                </div>
+                <label class="switch switch-sm">
+                  <input type="checkbox" id="appSettingsTerminalWheelLocal">
+                  <span class="slider"></span>
+                </label>
+              </div>
               <div class="settings-item settings-item-multiline" title="Shows typed characters instantly via overlay while forwarding keystrokes to the server in the background. Enables Tab completion, preserves input across tab switches, and protects against session crashes. Recommended for mobile and high-latency connections.">
                 <div class="settings-item-text">
                   <span class="settings-item-label">Local Echo</span>

src/web/public/session-ui.js

@@ -712,7 +712,8 @@ Object.assign(CodemanApp.prototype, {
           remoteIds.push(data.data.sessionId);
         }
         if (remoteIds[0]) {
-          this.activeSessionId = remoteIds[0];
+          // Don't pre-set activeSessionId — selectSession early-returns when the
+          // IDs match, skipping the buffer load, tab activation, and focus (see runCodex).
           await this.selectSession(remoteIds[0]);
         }
         this.terminal.focus();
@@ -770,9 +771,11 @@ Object.assign(CodemanApp.prototype, {
         ));
       }
 
-      // Switch to first session
+      // Switch to first session. Don't pre-set activeSessionId — selectSession
+      // early-returns when the IDs match, skipping the buffer load, tab
+      // activation, and focus (see runCodex), which left the new shell tab
+      // created but not shown until the user manually clicked it.
       if (sessionIds.length > 0) {
-        this.activeSessionId = sessionIds[0];
         await this.selectSession(sessionIds[0]);
       }
 

src/web/public/settings-ui.js

@@ -337,6 +337,8 @@ Object.assign(CodemanApp.prototype, {
     document.getElementById('appSettingsTunnelEnabled').checked = settings.tunnelEnabled ?? false;
     this.loadTunnelStatus();
     document.getElementById('appSettingsLocalEcho').checked = settings.localEchoEnabled ?? MobileDetection.isTouchDevice();
+    document.getElementById('appSettingsTerminalWheelLocal').checked =
+      settings.terminalWheelLocalScrollback ?? defaults.terminalWheelLocalScrollback ?? false;
     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;
@@ -1436,6 +1438,7 @@ Object.assign(CodemanApp.prototype, {
       imageWatcherEnabled: document.getElementById('appSettingsImageWatcherEnabled').checked,
       tunnelEnabled: document.getElementById('appSettingsTunnelEnabled').checked,
       localEchoEnabled: document.getElementById('appSettingsLocalEcho').checked,
+      terminalWheelLocalScrollback: document.getElementById('appSettingsTerminalWheelLocal').checked,
       cjkInputEnabled: document.getElementById('appSettingsCjkInput').checked,
       webglRendererEnabled: document.getElementById('appSettingsWebglRenderer').checked,
       extendedKeyboardBar: document.getElementById('appSettingsExtendedKeyboardBar').checked,
@@ -1609,6 +1612,7 @@ Object.assign(CodemanApp.prototype, {
       showPlanUsageLimits: _pul,
       showAttachmentsButton: _ahb,
       webglRendererEnabled: _wgl,
+      terminalWheelLocalScrollback: _twls,
       ...serverSettings
     } = settings;
     try {
@@ -1775,6 +1779,7 @@ Object.assign(CodemanApp.prototype, {
         ralphTrackerEnabled: false,
         tabTwoRows: false,
         cjkInputEnabled: false,
+        terminalWheelLocalScrollback: false, // mobile scrolls via touch, not wheel
         webglRendererEnabled: false, // mobile always uses the DOM renderer
         skin: 'daylight-blue',
       };
@@ -2149,6 +2154,7 @@ Object.assign(CodemanApp.prototype, {
           'showMonitor', 'showProjectInsights', 'showFileBrowser', 'showSubagents',
           'subagentActiveTabOnly', 'tabTwoRows', 'localEchoEnabled', 'cjkInputEnabled', 'extendedKeyboardBar',
           'skin', 'showPlanUsageLimits', 'showAttachmentsButton', 'webglRendererEnabled',
+          'terminalWheelLocalScrollback',
         ]);
         // The plan-usage chip is a PER-DEVICE display setting (default OFF): desktop
         // can show it while mobile stays hidden. It used to sync, so an older

src/web/public/styles.css

@@ -18,6 +18,10 @@
 }
 
 :root {
+  /* All three skins are dark — tell the UA to render native controls (select
+     option popups, date/time pickers, scrollbars) in dark mode so they don't
+     flash as white OS widgets. */
+  color-scheme: dark;
   /* Carbon Aurora · Daylight — deep-but-not-black slate, surfaces step UP into the light */
   --bg-dark: #11151c;
   --bg-card: #1b222c;
@@ -4186,6 +4190,24 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
   transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
 }
 
+/* Selects: strip the native (light) control so the field follows the active
+   skin instead of rendering as a white OS widget. Opaque --bg-input fill +
+   --border, a custom chevron, and color-scheme:dark (set on :root) for a dark
+   option popup. Shared by App Settings, Cron, and every other .form-select. */
+.form-select {
+  padding-right: 2rem;
+  background-color: var(--bg-input);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem center;
+  background-size: 0.75rem;
+  border-color: var(--border);
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+}
+
 .form-row input:focus,
 .form-row textarea:focus,
 .form-select:focus {
@@ -11555,23 +11577,95 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
 }
 
 /* ── Cron Jobs ───────────────────────────────── */
-.cron-job-list { display: flex; flex-direction: column; gap: 8px; }
+/* There is no global `.hidden{display:none}` utility in this stylesheet — each
+   component scopes its own. The cron modal shipped without one, so its
+   `.hidden`-toggled create form + conditional schedule/prompt rows never
+   actually collapsed (all fields showed at once). Scope one here. */
+#cronModal .hidden { display: none !important; }
+.cron-modal-hint { margin-bottom: 1rem; }
+.cron-toolbar {
+  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
+  margin-bottom: 1.1rem; padding-bottom: 1.1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+/* Job list — cards that echo the App Settings item look */
+.cron-job-list { display: flex; flex-direction: column; gap: 0.5rem; }
 .cron-job-row {
-  display: flex; justify-content: space-between; align-items: center; gap: 12px;
-  padding: 10px 12px; border: 1px solid var(--border, #333); border-radius: 8px;
-  background: var(--panel-bg, rgba(255,255,255,0.02));
+  display: flex; justify-content: space-between; align-items: center; gap: 0.9rem;
+  padding: 0.7rem 0.85rem;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--btn-radius);
+  background: rgba(255, 255, 255, 0.03);
+  transition: background var(--transition-smooth), border-color var(--transition-smooth);
 }
+.cron-job-row:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
 .cron-job-main { min-width: 0; flex: 1; }
-.cron-job-name { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
-.cron-job-meta { font-size: 12px; opacity: 0.7; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
-.cron-job-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.cron-job-name { font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
+.cron-job-meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.35rem; overflow: hidden; text-overflow: ellipsis; }
+.cron-job-actions { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
 .cron-badge {
-  font-size: 11px; padding: 1px 6px; border-radius: 10px;
-  background: var(--accent-bg, rgba(120,160,255,0.15)); opacity: 0.9;
+  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
+  padding: 0.1rem 0.45rem; border-radius: 999px;
+  background: var(--accent-bg, rgba(120, 160, 255, 0.15)); color: var(--text-dim);
 }
-.cron-badge-off { background: rgba(200,80,80,0.18); }
-.cron-weekdays { display: flex; gap: 10px; flex-wrap: wrap; }
-.cron-weekdays label { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; }
+.cron-badge-off { background: rgba(200, 80, 80, 0.18); color: #e88; }
+
+/* Create / edit form — sectioned + spaced to match the App Settings modal */
 .cron-job-form {
-  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #333);
+  margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border);
+}
+.cron-form-title {
+  font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem;
+}
+#cronModal .form-row { margin-bottom: 0.85rem; }
+/* datetime-local / time inputs aren't covered by the base .form-row input rule */
+#cronModal .form-row input[type="datetime-local"],
+#cronModal .form-row input[type="time"] {
+  width: 100%; padding: 0.5rem 0.75rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--btn-radius);
+  color: var(--text); font-size: 0.8rem; font-family: inherit;
+  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
+}
+#cronModal .form-row input[type="datetime-local"]:focus,
+#cronModal .form-row input[type="time"]:focus {
+  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+}
+
+/* Toggle rows rendered as settings cards (label + description left, switch right) */
+#cronModal .form-row-switch.cron-switch-row {
+  justify-content: space-between; gap: 0.75rem; flex-wrap: nowrap;
+  padding: 0.55rem 0.7rem; margin-bottom: 0.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--btn-radius);
+}
+.cron-switch-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
+.cron-switch-label { font-size: 0.75rem; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; }
+.cron-switch-desc { font-size: 0.62rem; color: var(--text-muted); line-height: 1.35; }
+
+/* Weekday selector — pill toggles instead of raw checkboxes */
+.cron-weekdays { display: flex; gap: 0.4rem; flex-wrap: wrap; }
+.cron-weekdays label {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 2.6rem; margin: 0; padding: 0.3rem 0.55rem;
+  font-size: 0.7rem; font-weight: 500; text-transform: none; letter-spacing: 0;
+  color: var(--text-dim); cursor: pointer;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  transition: background var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth);
+}
+.cron-weekdays label:hover { border-color: var(--accent); color: var(--text); }
+.cron-weekdays label input { position: absolute; opacity: 0; width: 0; height: 0; }
+.cron-weekdays label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+/* Footer */
+.cron-form-error { color: var(--danger, #e55); margin-top: 0.4rem; }
+.cron-form-error:empty { display: none; }
+.cron-form-actions {
+  display: flex; gap: 0.5rem; justify-content: flex-end;
+  margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border);
 }

src/web/public/terminal-ui.js

@@ -385,7 +385,7 @@ Object.assign(CodemanApp.prototype, {
       'wheel',
       (ev) => {
         ev.preventDefault();
-        const lines = Math.round(ev.deltaY / 25) || (ev.deltaY > 0 ? 1 : -1);
+        const lines = this._wheelScrollLines(ev);
         if (this._shouldForwardWheelToApp(ev)) {
           this._sendSyntheticSgrWheel(ev.clientX, ev.clientY, lines);
           return;
@@ -2520,8 +2520,25 @@ Object.assign(CodemanApp.prototype, {
   // unknown version is treated as older). Gemini is a strip mode too but its
   // wheel behavior is unverified, so it keeps the local wheel — taps/clicks
   // are still forwarded for it (harmless no-ops at worst).
+  // Wheel delta → whole scroll lines. macOS trackpads turn Shift+two-finger
+  // scroll into a HORIZONTAL wheel (deltaY≈0, deltaX carries the magnitude), and
+  // Shift routes the wheel to local scrollback (_shouldForwardWheelToApp returns
+  // false on Shift). So under Shift, read whichever axis dominates — otherwise
+  // deltaY≈0 collapses to a fixed ±1 line/tick and the gesture can't page through
+  // history on a trackpad (issue #154). Non-Shift and mouse-wheel paths are
+  // unchanged (they carry deltaY). The `|| ±1` keeps sub-25px deltas moving.
+  _wheelScrollLines(ev) {
+    const delta = ev.shiftKey && Math.abs(ev.deltaX) > Math.abs(ev.deltaY) ? ev.deltaX : ev.deltaY;
+    return Math.round(delta / 25) || (delta > 0 ? 1 : -1);
+  },
+
   _shouldForwardWheelToApp(ev) {
     if (ev.shiftKey) return false;
+    // Opt-out (App Settings → Input → "Wheel scrolls local history"): pin the
+    // plain wheel to xterm's own scrollback like pre-#144, for users who prefer
+    // it over forwarding the wheel to the CLI's transcript (issue #154). Cheap —
+    // loadAppSettingsFromStorage() is cache-backed.
+    if (this.loadAppSettingsFromStorage?.()?.terminalWheelLocalScrollback) return false;
     const mode = this.terminal?.modes?.mouseTrackingMode;
     if (mode && mode !== 'none') return false;
     const session = this.sessions?.get(this.activeSessionId);
@@ -2535,12 +2552,13 @@ Object.assign(CodemanApp.prototype, {
   },
 
   // Encode wheel ticks as SGR reports (button 64 = up, 65 = down) at the pointer
-  // cell. Reports are coalesced into one PTY write per ~40ms: a trackpad emits
-  // dozens of wheel events per second and each _sendInputAsync becomes a tmux
-  // send-keys on the server — unbatched, a single flick would spawn a process
-  // storm. Per-event tick count is capped (Claude applies its own scroll-speed
-  // multiplier and acceleration on top), and the queue is bounded so a wild
-  // scroll can't build a backlog that keeps scrolling after the finger stops.
+  // cell. Reports are coalesced into one fire-and-forget write per ~40ms: a
+  // trackpad emits dozens of wheel events per second and each send becomes a
+  // tmux send-keys on the server — unbatched, a single flick would spawn a
+  // process storm. Per-event tick count is capped (Claude applies its own
+  // scroll-speed multiplier and acceleration on top), and the queue is bounded
+  // so a wild scroll can't build a backlog that keeps scrolling after the finger
+  // stops. Flushed via _sendInputEphemeral — loss-tolerant, off the durable queue.
   _sendSyntheticSgrWheel(clientX, clientY, lines) {
     if (!this.activeSessionId || !lines) return;
     const pos = this._clientPointToCell(clientX, clientY);
@@ -2558,7 +2576,10 @@ Object.assign(CodemanApp.prototype, {
     this._wheelSgrFlushTimer = null;
     const data = this._wheelSgrQueue;
     this._wheelSgrQueue = '';
-    if (data && this.activeSessionId) this._sendInputAsync(this.activeSessionId, data);
+    // Ephemeral (fire-and-forget): wheel reports are loss-tolerant, so they skip
+    // the durable seq/ACK queue — no localStorage churn, no "Nb queued" flicker
+    // in the connection indicator on every scroll tick.
+    if (data && this.activeSessionId) this._sendInputEphemeral(this.activeSessionId, data);
   },
 
   // Desktop counterpart of the touchend tap branch: hand-encode an SGR report

test/terminal-touch-tap.test.ts

@@ -370,12 +370,54 @@ describe('terminal touch tap mouse guard', () => {
     expect(app._shouldForwardWheelToApp({ shiftKey: false })).toBe(false);
   });
 
+  it('wheel: the local-scrollback opt-out pins the plain wheel to local scrollback (issue #154)', () => {
+    const { app } = loadTerminalUiHarness();
+    app.activeSessionId = 'sess-1';
+    app.sessions = new Map([['sess-1', { mode: 'claude', cliVersion: '2.1.187' }]]);
+    app.terminal = {
+      modes: { mouseTrackingMode: 'none' },
+      buffer: { active: { viewportY: 50, baseY: 50 } },
+    };
+
+    // Default (setting absent) forwards the plain wheel to the CLI transcript.
+    expect(app._shouldForwardWheelToApp({ shiftKey: false })).toBe(true);
+
+    // Opt-out ON → the plain wheel stays on xterm's own scrollback (pre-#144).
+    app.loadAppSettingsFromStorage = () => ({ terminalWheelLocalScrollback: true });
+    expect(app._shouldForwardWheelToApp({ shiftKey: false })).toBe(false);
+
+    // OFF again → forwarding resumes.
+    app.loadAppSettingsFromStorage = () => ({ terminalWheelLocalScrollback: false });
+    expect(app._shouldForwardWheelToApp({ shiftKey: false })).toBe(true);
+  });
+
+  it('wheel: reads the dominant axis under Shift so a macOS trackpad can page scrollback (issue #154)', () => {
+    const { app } = loadTerminalUiHarness();
+
+    // Plain vertical wheel: unchanged, driven by deltaY.
+    expect(app._wheelScrollLines({ shiftKey: false, deltaX: 0, deltaY: 100 })).toBe(4);
+    expect(app._wheelScrollLines({ shiftKey: false, deltaX: 0, deltaY: -50 })).toBe(-2);
+
+    // Shift on a macOS trackpad: deltaY≈0, deltaX carries direction+magnitude.
+    // Old code collapsed this to a fixed -1; now it tracks the horizontal delta.
+    expect(app._wheelScrollLines({ shiftKey: true, deltaX: -100, deltaY: 0 })).toBe(-4); // scroll up
+    expect(app._wheelScrollLines({ shiftKey: true, deltaX: 75, deltaY: 0 })).toBe(3); // scroll down
+
+    // Shift with a real vertical wheel (mouse): deltaY dominates, deltaX ignored.
+    expect(app._wheelScrollLines({ shiftKey: true, deltaX: 2, deltaY: 100 })).toBe(4);
+
+    // Sub-25px delta still nudges one line in the gesture's direction.
+    expect(app._wheelScrollLines({ shiftKey: true, deltaX: -5, deltaY: 0 })).toBe(-1);
+  });
+
   it('wheel: encodes SGR 64/65 ticks, caps per event, and coalesces into one flush', () => {
     const { app } = loadTerminalUiHarness();
     const sent: Array<{ id: string; data: string }> = [];
     app.activeSessionId = 'sess-1';
     app.sessions = new Map([['sess-1', { mode: 'claude' }]]);
-    app._sendInputAsync = (id: string, data: string) => sent.push({ id, data });
+    // Wheel reports flush via the ephemeral (fire-and-forget) path, not the
+    // durable queue — so they never show in the pending-bytes indicator (#154).
+    app._sendInputEphemeral = (id: string, data: string) => sent.push({ id, data });
     app.terminal = {
       cols: 80,
       rows: 24,