chore: version packages

Release 1.16.6: phone overview started/idle stamps, plus fixes for the
selection-dialog keyboard lockout, the accessory bar arrows bypassing the
local-echo overlay, and recovered sessions being restamped as newly created
on every server restart.

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

src/session.ts

@@ -591,7 +591,12 @@ export class Session extends EventEmitter {
     this.mode = config.mode || 'claude';
     this._name = config.name || '';
     this._resumeSessionId = config.resumeSessionId;
-    this._lastActivityAt = this.createdAt;
+    // NOW, not `createdAt`: recovery passes the ORIGINAL creation time of a
+    // days-old tmux session, and seeding last-activity from it would report a
+    // freshly re-attached pane as having been silent for days, which the idle
+    // confirmation reads as "already quiet" and the home screens print as its
+    // idle duration. For a genuinely new session the two are the same instant.
+    this._lastActivityAt = Date.now();
     // Set claudeSessionId — when resuming, the Claude conversation ID is the resumed one.
     this._claudeSessionId = config.resumeSessionId || this.id;
     // Restored from state.json on boot recovery. start() resets _claudeSessionId

src/web/public/keyboard-accessory.js

@@ -729,16 +729,16 @@ const KeyboardAccessoryBar = {
         this.toggleCtrl();
         break;
       case 'scroll-up':
-        this.sendKey('\x1b[A');
+        this.sendNavKey('\x1b[A');
         break;
       case 'scroll-down':
-        this.sendKey('\x1b[B');
+        this.sendNavKey('\x1b[B');
         break;
       case 'arrow-left':
-        this.sendKey('\x1b[D');
+        this.sendNavKey('\x1b[D');
         break;
       case 'arrow-right':
-        this.sendKey('\x1b[C');
+        this.sendNavKey('\x1b[C');
         break;
       case 'esc':
         this.sendKey('\x1b');
@@ -746,26 +746,12 @@ const KeyboardAccessoryBar = {
       case 'opt-enter':
         this.sendKey('\x1b\r');
         break;
-      case 'tab': {
+      case 'tab':
         // Tab means "complete what I just typed", but with local echo the typed
         // text is still buffered in the overlay and has never reached the PTY —
-        // a bare \t would ask the CLI to complete an empty composer. Flush the
-        // pending text first (same steps as the Shift+Enter branch in
-        // terminal-ui.js), then send \t after the sendCommand settle delay.
-        const overlay = app._localEchoOverlay;
-        const pending = (app._localEchoEnabled && overlay?.pendingText) || '';
-        if (pending) {
-          overlay.clear();
-          overlay.suppressBufferDetection?.();
-          app._flushedOffsets?.delete(app.activeSessionId);
-          app._flushedTexts?.delete(app.activeSessionId);
-          app.sendInput(pending);
-          setTimeout(() => this.sendKey('\t'), 120);
-        } else {
-          this.sendKey('\t');
-        }
+        // a bare \t would ask the CLI to complete an empty composer.
+        this.flushPendingThen(() => this.sendKey('\t'));
         break;
-      }
       case 'shift-tab':
         this.sendKey('\x1b[Z');
         break;
@@ -860,6 +846,51 @@ const KeyboardAccessoryBar = {
     setTimeout(() => app.sendInput('\r'), 120);
   },
 
+  /**
+   * Flush whatever the local-echo overlay is still holding, THEN run `after()`.
+   *
+   * On a phone the characters you type sit in the overlay and have never
+   * reached the PTY, so any key that acts on "what I just typed" has to push
+   * that text out first or the CLI acts on an empty composer. Mirrors the
+   * flush the typed path performs in terminal-ui.js's onData; the 120ms is the
+   * same settle delay sendCommand uses, so the text lands before the key.
+   */
+  flushPendingThen(after) {
+    const overlay = app._localEchoOverlay;
+    const pending = (app._localEchoEnabled && overlay?.pendingText) || '';
+    if (!pending) {
+      after();
+      return;
+    }
+    overlay.clear();
+    overlay.suppressBufferDetection?.();
+    app._flushedOffsets?.delete(app.activeSessionId);
+    app._flushedTexts?.delete(app.activeSessionId);
+    app.sendInput(pending);
+    setTimeout(after, 120);
+  },
+
+  /**
+   * A composer nav key (the four arrows) from the bar, under the SAME contract
+   * as pressing one on a hardware keyboard (the `isComposerNavKey` branch of
+   * terminal-ui.js's onData): flush the unsent draft so the key edits the real
+   * composer, then hand the session to plain PTY echo until Enter or Ctrl+C,
+   * because after a nav key the cursor can sit mid-text where the overlay's
+   * append-only buffering cannot track edits (issue #218).
+   *
+   * Without the flush the arrow reached a composer the CLI still saw as EMPTY:
+   * Up recalled a history entry into it while the overlay went on painting the
+   * draft over the same row and still believed it was pending. The draft was
+   * then submitted on top of the recalled text, and history recall looked
+   * broken because what came back was never what the row showed.
+   */
+  sendNavKey(sequence) {
+    if (!app.activeSessionId) return;
+    if (!app._echoPassthroughSessions) app._echoPassthroughSessions = new Set();
+    app._echoPassthroughSessions.add(app.activeSessionId);
+    this.flushPendingThen(() => this.sendKey(sequence));
+  },
+
   /** Send a special key (arrow, escape, etc.) directly to the PTY.
    *  Bypasses tmux send-keys -l (literal mode) since escape sequences
    *  must be written raw to be interpreted as key presses by Ink. */

src/web/public/mobile-overview.js

@@ -14,12 +14,19 @@
  * only this module removes it, so desktop (which never loads mobile.css) cannot
  * render an unstyled overview even if a class rule leaked.
  *
+ * Each live row also carries when the session FIRST started and how long it has
+ * been in the state it is in ("started 3d ago · idle 12m"). Both go stale on
+ * their own (a sitting session emits no event), so a slow clock rewrites them
+ * IN PLACE from the epoch ms parked on the elements, never by re-rendering,
+ * which would restart every row's blink and pulse.
+ *
  * Everything renders from state the page already holds (`this.sessions`,
  * `this.cases`, `this.pendingHooks`) — no endpoint, no SSE event, no schema.
  * `buildMobileOverviewModel()` is pure and unit-tested (test/mobile-overview.test.ts).
  *
  * @mixin Extends CodemanApp.prototype via Object.assign
  * @dependency app.js (this.sessions, this.cases, this.pendingHooks, selectSession, run)
+ * @dependency ralph-panel.js (formatRelativeTime, the app's one relative-time formatter)
  * @dependency mobile-handlers.js (MobileDetection)
  * @dependency session-ui.js (selectQuickStartCase for "New session here")
  * @loadorder 12.55 of 16, after webview-tabs.js, before entrance-animations.js
@@ -64,6 +71,23 @@ const MOBILE_OVERVIEW_PILL_LABEL = {
   done: 'done',
 };
 
+/**
+ * Label for the "how long has it been like this" stamp, per state. The pill
+ * already names the state, so this word is there to say what the duration next
+ * to it is measuring.
+ */
+const MOBILE_OVERVIEW_SINCE_LABEL = {
+  needs: 'waiting',
+  waiting: 'waiting',
+  error: 'failed',
+  working: 'working',
+  idle: 'idle',
+  done: 'ended',
+};
+
+/** How often the age stamps are rewritten in place while the home screen is up. */
+const MOBILE_OVERVIEW_CLOCK_MS = 20000;
+
 Object.assign(CodemanApp.prototype, {
   // ═══════════════════════════════════════════════════════════════
   // Model (pure)
@@ -87,6 +111,29 @@ Object.assign(CodemanApp.prototype, {
     return 'idle';
   },
 
+  /**
+   * Anchor + label for the row's second stamp: how long the session has been in
+   * the state it is in.
+   *
+   * For everything that is NOT working that anchor is `lastActivityAt`, the last
+   * byte the pane printed: a Claude pane sitting at its composer prints nothing,
+   * so the end of the last turn is exactly when the session went quiet.
+   *
+   * A WORKING pane is the opposite: it repaints about once a second, so its
+   * last-activity stamp is always "now" and would report every running turn as
+   * 0m. The turn's own start is the pane's last Enter (`lastSubmitAt`), which is
+   * persisted server-side and therefore survives a Codeman restart. A session
+   * that has never submitted has no anchor at all, and gets no stamp rather than
+   * a made-up one.
+   *
+   * @returns {{key: string, at: number}|null}
+   */
+  _mobileOverviewSince(state, session) {
+    const at = state === 'working' ? Number(session.lastSubmitAt) || 0 : Number(session.lastActivityAt) || 0;
+    if (!at) return null;
+    return { key: MOBILE_OVERVIEW_SINCE_LABEL[state] || state, at };
+  },
+
   /**
    * Longest-prefix match of a workingDir against the case list, so a session
    * started in a subdirectory still belongs to its case. Mirrors the matching in
@@ -137,6 +184,10 @@ Object.assign(CodemanApp.prototype, {
         dir: this._shortenHomePath ? this._shortenHomePath(session.workingDir) : session.workingDir || '',
         state,
         pill: MOBILE_OVERVIEW_PILL_LABEL[state] || state,
+        // Epoch ms, straight off the session payload; formatting happens at
+        // render time so the clock can redo it without a re-render.
+        createdAt: Number(session.createdAt) || 0,
+        since: this._mobileOverviewSince(state, session),
         orderIndex: orderIndex === -1 ? Number.MAX_SAFE_INTEGER : orderIndex,
       };
     });
@@ -224,6 +275,7 @@ Object.assign(CodemanApp.prototype, {
     const el = document.getElementById('mobileOverview');
     if (!el) return;
     this._closeMobileOverviewRunMenu();
+    this._stopMobileOverviewClock();
     el.classList.remove('visible');
     el.hidden = true;
   },
@@ -380,6 +432,8 @@ Object.assign(CodemanApp.prototype, {
         this._mobileOverviewHistory ? 'No past conversations yet' : 'Loading…'
       )
     );
+
+    this._startMobileOverviewClock();
   },
 
   /**
@@ -623,6 +677,8 @@ Object.assign(CodemanApp.prototype, {
     line2.textContent = row.mode + (row.dir ? ' · ' + row.dir : '');
     body.appendChild(line2);
 
+    body.appendChild(this._buildMobileOverviewMeta(row));
+
     item.appendChild(body);
 
     const pill = document.createElement('span');
@@ -654,6 +710,110 @@ Object.assign(CodemanApp.prototype, {
     return item;
   },
 
+  // ═══════════════════════════════════════════════════════════════
+  // Age stamps: started / how long in this state
+  // ═══════════════════════════════════════════════════════════════
+
+  /**
+   * The "started 3d ago · idle 12m" line under a session row. Both stamps keep
+   * their raw epoch ms on the element (`data-mo-ts`) so `_tickMobileOverviewTimes()`
+   * can rewrite the text without rebuilding the row (a re-render would restart
+   * the blink on every waiting row and the pulse on every working one).
+   */
+  _buildMobileOverviewMeta(row) {
+    const meta = document.createElement('span');
+    meta.className = 'mobile-overview-row-meta';
+    // Relative times are generated text, and "started"/"idle" here are the same
+    // generic words that mean something else on other surfaces.
+    meta.setAttribute('data-i18n-skip', '');
+
+    meta.appendChild(this._buildMobileOverviewStamp('started', row.createdAt, 'ago', 'mobile-overview-meta-started'));
+
+    if (row.since) {
+      const sep = document.createElement('span');
+      sep.className = 'mobile-overview-meta-sep';
+      sep.setAttribute('aria-hidden', 'true');
+      sep.textContent = '·';
+      meta.appendChild(sep);
+      meta.appendChild(
+        this._buildMobileOverviewStamp(row.since.key, row.since.at, 'for', 'mobile-overview-meta-since')
+      );
+    }
+
+    return meta;
+  },
+
+  /** One labelled stamp: a dim key, the value, the full date in the title. */
+  _buildMobileOverviewStamp(key, timestamp, format, className) {
+    const wrap = document.createElement('span');
+    wrap.className = 'mobile-overview-meta-item ' + className;
+
+    const label = document.createElement('span');
+    label.className = 'mobile-overview-meta-key';
+    label.textContent = key;
+    wrap.appendChild(label);
+
+    const value = document.createElement('span');
+    value.dataset.moTs = String(timestamp || 0);
+    value.dataset.moFmt = format;
+    value.textContent = this._mobileOverviewStampText(timestamp, format);
+    wrap.appendChild(value);
+
+    if (timestamp) wrap.title = `${key}: ${new Date(timestamp).toLocaleString()}`;
+    return wrap;
+  },
+
+  /**
+   * 'ago' points at a moment ("3d ago", the app's one relative formatter);
+   * 'for' measures a span from it to now ("12m"), which is what a duration
+   * beside a state word wants to read as.
+   */
+  _mobileOverviewStampText(timestamp, format) {
+    if (!timestamp) return '—';
+    if (format === 'ago') {
+      return (this.formatRelativeTime && this.formatRelativeTime(timestamp)) || '—';
+    }
+    const ms = Date.now() - timestamp;
+    if (ms < 60000) return '<1m';
+    const mins = Math.floor(ms / 60000);
+    if (mins < 60) return `${mins}m`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return mins % 60 ? `${hours}h ${mins % 60}m` : `${hours}h`;
+    const days = Math.floor(hours / 24);
+    return hours % 24 ? `${days}d ${hours % 24}h` : `${days}d`;
+  },
+
+  /**
+   * Rewrites the stamps in place every `MOBILE_OVERVIEW_CLOCK_MS`. A sitting
+   * session emits nothing, so without this its "idle 2m" would still read 2m an
+   * hour later, the one number on the screen that has to move on its own.
+   */
+  _startMobileOverviewClock() {
+    if (this._mobileOverviewClock) return;
+    this._mobileOverviewClock = setInterval(() => {
+      if (!this.isMobileOverviewVisible()) {
+        this._stopMobileOverviewClock();
+        return;
+      }
+      this._tickMobileOverviewTimes();
+    }, MOBILE_OVERVIEW_CLOCK_MS);
+  },
+
+  _stopMobileOverviewClock() {
+    if (!this._mobileOverviewClock) return;
+    clearInterval(this._mobileOverviewClock);
+    this._mobileOverviewClock = null;
+  },
+
+  _tickMobileOverviewTimes() {
+    const el = document.getElementById('mobileOverview');
+    if (!el) return;
+    for (const node of el.querySelectorAll('[data-mo-ts]')) {
+      const text = this._mobileOverviewStampText(Number(node.dataset.moTs) || 0, node.dataset.moFmt);
+      if (node.textContent !== text) node.textContent = text;
+    }
+  },
+
   /** The session's pending approval, when the strip should render (dialogs only). */
   _pendingApprovalForSession(sessionId) {
     if (!this.approvals || !this.approvalsInboxEnabled || !this.approvalsInboxEnabled()) return null;

src/web/public/mobile.css

@@ -2720,6 +2720,46 @@ html.mobile-init .file-browser-panel {
     text-overflow: ellipsis;
   }
 
+  /* Third line of the row body: "STARTED 3d ago · IDLE 12m". Monospace so the
+     numbers stay put as the clock rewrites them every 20s, and dimmer than the
+     path above it: it answers a question you only ask on purpose. */
+  .mobile-overview-row-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    min-width: 0;
+    font-family: var(--font-mono, monospace);
+    font-size: 0.63rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .mobile-overview-meta-item {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mobile-overview-meta-key {
+    margin-right: 0.3rem;
+    opacity: 0.6;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .mobile-overview-meta-sep {
+    opacity: 0.45;
+  }
+
+  /* The freshest signal on the row: while a session is actually running, how
+     long the current turn has been going is the number the eye should land on.
+     Same treatment the desktop rail gives its "active" stamp. */
+  .mobile-overview-row--working .mobile-overview-meta-since {
+    color: var(--green);
+    opacity: 0.95;
+  }
+
   .mobile-overview-dot {
     flex-shrink: 0;
     width: 9px;

src/web/public/terminal-ui.js

@@ -3641,9 +3641,20 @@ Object.assign(CodemanApp.prototype, {
     // the affordance above; there is deliberately no verb literal here, because
     // the verb is randomised per build.
 
+    // A visible selection dialog makes its OWN rows actionable, not the whole
+    // screen. Two viewport-wide `some()` tests used to be the entire answer, so
+    // while a Claude question or permission dialog was up EVERY tap in the
+    // terminal (inert transcript, the question title, blank rows) came back
+    // actionable, and the caller blurred on each one. The on-screen keyboard
+    // could then not be opened at all until the dialog was answered, which left
+    // tapping an option row as the only interaction available: the one that
+    // commits an answer. Requiring the TAPPED line to be a numbered row keeps
+    // the dialog's own rows behaving as before (report the tap, keep the
+    // keyboard down) while any other row can still summon the keyboard, which
+    // is how a digit gets typed at a dialog instead of aimed at it.
     const hasMenuPrompt = lines.some((line) => /^\s*[❯›]\s+\d+[.)]\s/.test(line));
     const hasMenuChoice = lines.some((line) => /^\s+\d+[.)]\s/.test(line));
-    return hasMenuPrompt && hasMenuChoice;
+    return hasMenuPrompt && hasMenuChoice && /^\s*(?:[❯›]\s*)?\d+[.)]\s/.test(tappedLine);
   },
 
   _focusMobileTerminalInput() {

src/web/server.ts

@@ -2619,6 +2619,12 @@ export class WebServer extends EventEmitter {
               workingDir: muxSession.workingDir,
               mode: muxSession.mode,
               name: sessionName,
+              // When the session FIRST started, not when this server booted.
+              // Without it every recovered session was restamped `Date.now()` on
+              // each restart, so a week-old pane read as "created 2m ago" on the
+              // home screens (and sorted as the newest thing in the unified list).
+              // mux-sessions.json carries the tmux session's own birth time.
+              createdAt: muxSession.createdAt || savedState?.createdAt,
               mux: this.mux,
               useMux: true,
               muxSession: muxSession, // Pass the existing session so startInteractive() can attach to it