@vibelord/lanes 1.0.1 → 1.0.2

package/payload/lanes/systemd/lanes-sync.service

@@ -4,6 +4,9 @@ Description=lanes registry sync (read-only: rebuild registry.json from the repos
 [Service]
 Type=oneshot
 ExecStart="@REPO@/bin/lanes" sync
+# Bounded: one `docker inspect` (20 s) plus the registry reads. A sync wedged on a hung docker or volume is
+# stopped here instead of holding the oneshot (and every later timer tick) forever.
+TimeoutStartSec=120
 # A momentarily invalid registry keeps the previous lanes; a non-zero exit here is informational.
 SuccessExitStatus=1
 Nice=5

package/payload/lanes/web/README.md

@@ -11,8 +11,9 @@ workspace sheet as a left panel, and set `zellij:mobile-ui` to `on` when it is u
 user agent). Desktop browsers (fine pointer) get only a **Lanes** chip and an overlay bar with workspace and lane
 pickers (`laneBarModel`, from the `MobileState` sent to every web client). The laptop/tablet code and styles live in
 `browser.js`/`browser.css`, which `mobile.js` appends only on a tablet or desktop (a phone never downloads them), so
-the phone's `mobile.js`/`mobile.css` budget (spec §8) stays with the phone. The chip cancels `mousedown` and
-refocuses the terminal, so the keys stay the terminal's. On a tablet, `browser.js` also undoes the client's per-load single-pane start once
+a phone downloads only the two files that spec §8 budgets (measured figures under Bundle budget below). The chip
+cancels `mousedown` and refocuses the terminal, so the keys stay the terminal's. On a tablet, `browser.js` also
+undoes the client's per-load single-pane start once
 (`laneFullRender`, the client's own `SetMobileRenderPreferences {single_pane: false, fit: true}`), so a desktop
 view's sidebar shows beside its lanes. `tests/web/activation.test.mjs` (`node --test`) pins the activation matrix,
 the picker model and that render preference; `tests/unit/test_web_view.py` pins the size budgets and runs that
@@ -25,6 +26,14 @@ Zellij's original capture input in its closed shadow root, preserving its keyboa
 blocks programmatic focus on text editors and keeps `__zjSoftKbdEnabled` false, so upstream touch handlers,
 two-finger gestures, server `SetSoftKeyboard` messages and modal autofocus cannot summon it. Search and
 login inputs still focus normally when tapped. Keep this policy in place when upgrading the upstream client.
+The guard is installed before Zellij's first terminal or login modal: otherwise Zellij refocuses a hidden input on
+touchstart, touchend, click and server `SetSoftKeyboard` messages. The **Type here** field keeps the original input
+and its event handlers inside the closed shadow root (including its protection from password-manager extensions) and
+makes it a real, tappable field instead of a 1 px invisible focus target; keystrokes appear in the terminal and its
+internal padding/history stays invisible. Upstream cancels `pointerdown` on the extra keys, which also suppresses
+their touch click in Safari, so the shell cancels `mousedown` instead: typing focus is kept while the native click
+still activates CTRL, the arrows and the other keys. The shell attaches only once server state has arrived — resizing
+before the control socket opens makes 0.45.1 throw `InvalidStateError` and leaves the server with the old size.
 
 `lanes-mobile.service` runs a separate, loopback-only Caddy on port 8083 with its admin API disabled.
 It does not change the system Caddy. Tailscale Serve forwards private HTTPS on 8443 to this frontend;
@@ -41,8 +50,78 @@ clearing login cookies. There is no service worker caching terminal data or cred
 Layout uses the visual viewport and safe-area insets, with independent handling for portrait, landscape,
 keyboard-open and Home Screen views. The default terminal font is 16 px; the user's text-size choice
 is stored locally. Minimum touch targets are 44 px (workspace cards are 74 px). The lane picker in
-`libexec/sidebar.py` uses three terminal rows per lane on mobile. `tests/mobile_view.py` verifies
-the touch-to-lane path with isolated holders; sidebar unit tests cover the complete touch target.
+`libexec/sidebar.py` uses three terminal rows per lane on mobile: name, state and age, the agent's task.
+`tests/mobile_view.py` verifies the touch-to-lane path with isolated holders; sidebar unit tests cover the
+complete touch target.
+
+Every byte the shell sends to a terminal goes through `__zjSendControl({type: 'Write', bytes})`
+(`sendToTerminal`); there is no focus-and-type fallback, since the focus guard above would make it type nowhere.
+The lane filter bar sends `Esc /` and the query as UTF-8 (`TextEncoder`), dropping control bytes and DEL.
+Attention counts come from the picker sidebar's pane title (`WS · ◆1 ◇2 ▸6`, written by the sidebar as OSC 2):
+`parseCounts` (also `window.__lanesParseCounts`) feeds the picker subtitle, `document.title`, the Lanes button's
+`data-count` and the workspace cards, inside the existing `refresh()` / `renderCards()` — no fetch, file or timer.
+Until plan Task 26 (2026-10-04) this reader was inert (DEF-1450): `bin/lanes` `mobile_workspace_tab` gave the
+picker pane a fixed `name="Lanes"`, and Zellij reports a pane's layout name instead of its OSC 2 title, so
+`pickerTitle()` read `Lanes`, `parseCounts` returned null and the shell showed no counts ("Choose a lane to continue").
+Task 26 dropped that `name=` (pinned by `tests/unit/test_layout.py`) for sessions laid out since: an existing
+phone device keeps the old picker pane until `lanes rebuild <device>` (`upgrade-session` never re-lays-out a tab;
+`lanes doctor` names such a device). Whether the OSC 2 title now reaches
+`panes[].title` is still unchecked in a browser (no WebKit pass has run; fallback: the counts stay in the
+sidebar header). The quick-key row (`⏎ y n Esc ^C ↑ ↓`, `.lanes-quick`) shows on view
+tabs only; `refresh()` sets `--lanes-quick` (48 px or 0), which the terminal height subtracts. `n` and `^C` send
+only when `pointerup.timeStamp − pointerdown.timeStamp ≥ 400` (no `setTimeout`); the buttons cancel `mousedown`
+so a tap never moves focus.
+
+Colour (spec §6.3; the operator legend, token table and phone mockup are in [`docs/DESIGN.md`](../docs/DESIGN.md)):
+`mobile.css` uses only the generated `--lanes-*` tokens (legacy names such as `--lanes-bg` stay
+as aliases for one release); `test_web` rejects any colour literal outside the generated block. The terminal palette
+is the phone's own, because Zellij's `web_client.theme` is one server-wide dark palette (DEF-1413): `lanesTheme()`
+builds xterm.js's theme from the CSS tokens (`getComputedStyle(root)`) and the sixteen `LANES_ANSI` slots, which
+`libexec/tokens.py --js` generates into `mobile.js` (never hand-edited). It is applied at three points, all event
+driven: (1) on attach, after `build(); applyFont();`; (2) on every `data-zj-theme` change, through one
+`MutationObserver` on `<html>` (upstream's theme toggle only flips that attribute); (3) after every `SetConfig`, by
+chaining `window.__zjSyncInactiveCursorStyle`, which the pinned `app.js` calls in its `SetConfig` handler right after
+assigning the server theme wholesale (`SetConfig` is sent on each config-file reload). The handler then runs
+`applyTerminalBackground`, which writes the dark background inline on `<body>` and `#terminal`; the stylesheet's
+`!important` `--lanes-surface` rule for those two elements outranks it in either variant. An SRI bump of `app.js`
+re-opens this contract: re-read `startWsControl` and `installSoftKeyboardCapture` before accepting it.
+`index.html` carries one `theme-color` per colour scheme. Bundle budget (spec §8, `test_web.test_bundle_growth`):
+`mobile.css` ≤ 18 982 B and `mobile.js` ≤ 22 174 B; the caps are never raised — the rules sit one per line and the
+explanations live here rather than in the shipped files. MEASURED 2026-10-04 with `wc -c` after LNS-31 (plan Task
+31) met Tasks 13/28: `mobile.js` 21 964 B (23 268 B before its comments moved to Code notes below) and `mobile.css`
+18 945 B. A laptop or tablet also fetches `browser.js` (3 641 B) and `browser.css` (1 947 B); `test_web_view` pins
+that download at `LAPTOP_TABLET_JS_RATCHET` and `LAPTOP_TABLET_CSS_CAP` (DEF-1488).
+
+## Code notes
+
+`mobile.js` carries no explanations (the spec §8 budget above); each note is keyed to the code it explains, in file
+order.
+
+- The file: the Lanes browser shell (phone, tablet, desktop) over the pinned Zellij 0.45.1 client's window hooks.
+- `root.dataset.lanesShell = mode`: read by `browser.js` for the desktop bar and the tablet's full rendering.
+- `if (mode !== 'phone')`: appends the laptop/tablet extras (`browser.css`, `browser.js`); a phone never fetches them.
+- `if (mode === 'tablet')`: iPad Safari's user agent is a desktop one, so the shell asks for the client's mobile UI
+  (`zellij:mobile-ui` set to `on`); a stored `off` stays.
+- The `HTMLElement.prototype.focus` guard: only a native tap on an input may open the keyboard; it is installed before
+  upstream's first terminal or modal.
+- `viewport()`: browser toolbars alone must not mean keyboard mode (`occluded` needs more than 120 px hidden). Zellij's
+  input is in a closed shadow root, so `document.activeElement` is its host; `__zjSoftKbdCapture.isFocused` is read
+  first.
+- `buildTypingField()`: upstream's capture input stays in its closed shadow root and becomes the real, tappable field.
+- `GLYPHS` / `parseCounts()`: counts from the picker sidebar's OSC 2 pane title (spec §6.4).
+- `build()`, the `.zj-mobile-modbar` keys: cancel `mousedown`, not `pointerdown` (upstream's `pointerdown` cancel kills
+  Safari's touch click on the extra keys).
+- `buildQuickRow()` (spec §6.5): `n` and `^C` send after a 400 ms hold, measured from event timestamps with no timer;
+  nothing takes focus.
+- `clearLaneFilter()`: the lone `Esc` leaves the sidebar's filter mode.
+- `lanesTheme()`: the shell's own terminal palette for both variants (spec §6.3, DEF-1413).
+- `connect()`: waits for server state, because an earlier resize throws `InvalidStateError` in 0.45.1. `applyTheme` is
+  re-applied after every `SetConfig` (the client calls the chained `__zjSyncInactiveCursorStyle` hook) and on the theme
+  toggle.
+- The `zellij:soft-keyboard-visibility` listener: rotation also shrinks the viewport, so the shell sends
+  `SoftKeyboardVisibilityChanged` itself to correct upstream's height-only keyboard heuristic.
+- `awaitingClient` (the one `setInterval`, 200 ms, cleared once attached): upstream installs its window hooks just after
+  appending its mobile root.
 
 Validate on Safari/WebKit at 440 × 763 (iPhone 17 Pro Max with browser chrome), 440 × 956 (Home Screen),
 838 × 390 (landscape Safari), and smaller phone widths. Check login, workspace search and switching,

package/payload/lanes/web/index.html

@@ -4,7 +4,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="theme-color" content="#101318" />
+    <meta name="theme-color" content="#101318" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#f3f5f2" media="(prefers-color-scheme: light)" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="Lanes" />

package/payload/lanes/web/mobile.css

@@ -62,231 +62,100 @@ html.lanes-mobile:root {
   --zj-yellow: var(--lanes-tone-attention);
 }
 /* END lanes tokens */
-/* Non-colour layout variables; colours come from the generated token block above.
-   Safe areas apply in Home Screen mode and on both sides of landscape Safari. */
-html.lanes-mobile {
-  --lanes-safe-top: env(safe-area-inset-top, 0px);
-  --lanes-safe-bottom: env(safe-area-inset-bottom, 0px);
-  --lanes-safe-left: env(safe-area-inset-left, 0px);
-  --lanes-safe-right: env(safe-area-inset-right, 0px);
-  --lanes-head: calc(58px + var(--lanes-safe-top));
-  --lanes-dock: calc(66px + var(--lanes-safe-bottom));
-  --lanes-keys: 0px;
-  --lanes-vh: 100dvh;
-  --lanes-vw: 100vw;
-  --lanes-offset-top: 0px;
-  --lanes-offset-left: 0px;
-  -webkit-text-size-adjust: 100%;
-  overscroll-behavior: none;
-}
-html.lanes-keyboard {
-  --lanes-dock: 48px;
-  --lanes-keys: 48px;
-  --lanes-safe-bottom: 0px;
-}
+/* Layout; colours only via the tokens above */
+html.lanes-mobile { --lanes-safe-top: env(safe-area-inset-top, 0px); --lanes-safe-bottom: env(safe-area-inset-bottom, 0px); --lanes-safe-left: env(safe-area-inset-left, 0px); --lanes-safe-right: env(safe-area-inset-right, 0px); --lanes-head: calc(58px + var(--lanes-safe-top)); --lanes-dock: calc(66px + var(--lanes-safe-bottom)); --lanes-keys: 0px; --lanes-quick: 0px; --lanes-vh: 100dvh; --lanes-vw: 100vw; --lanes-offset-top: 0px; --lanes-offset-left: 0px; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
+html.lanes-keyboard { --lanes-dock: 48px; --lanes-keys: 48px; --lanes-safe-bottom: 0px; }
 .lanes-mobile body { overscroll-behavior: none; }
-.lanes-shell, .lanes-shell *, .lanes-mobile .security-modal *, .lanes-mobile #zj-mobile-root * {
-  box-sizing: border-box;
-}
-.lanes-shell {
-  color: var(--lanes-text);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  -webkit-tap-highlight-color: transparent;
-}
+.lanes-mobile body, .lanes-mobile #terminal { background: var(--lanes-surface) !important; }
+.lanes-shell, .lanes-shell *, .lanes-mobile .security-modal *, .lanes-mobile #zj-mobile-root * { box-sizing: border-box; }
+.lanes-shell { color: var(--lanes-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-tap-highlight-color: transparent; }
 .lanes-shell [hidden], .lanes-shell[hidden] { display: none !important; }
-.lanes-shell button, .lanes-mobile #zj-mobile-root button {
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
-}
+.lanes-shell button, .lanes-mobile #zj-mobile-root button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
 .lanes-shell button { font: inherit; color: inherit; }
-.lanes-shell button:focus-visible, .lanes-shell input:focus-visible {
-  outline: 2px solid var(--lanes-accent); outline-offset: -3px;
-}
+.lanes-shell button:focus-visible, .lanes-shell input:focus-visible { outline: 2px solid var(--lanes-accent); outline-offset: -3px; }
 .lanes-ready .zj-mobile-topbar { display: none !important; }
-.lanes-ready body.zj-mobile-active #terminal {
-  position: fixed;
-  top: calc(var(--lanes-offset-top) + var(--lanes-head) + 8px);
-  left: calc(var(--lanes-offset-left) + var(--lanes-safe-left) + 8px);
-  width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px);
-  height: calc(var(--lanes-vh) - var(--lanes-head) - var(--lanes-dock) - var(--lanes-keys) - 16px);
-  margin: 0;
-  padding: 0;
-}
-.lanes-header {
-  position: fixed; z-index: 510;
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
-  width: var(--lanes-vw); height: var(--lanes-head);
-  padding: var(--lanes-safe-top) calc(8px + var(--lanes-safe-right)) 0 calc(12px + var(--lanes-safe-left));
-  display: flex; align-items: center; gap: 10px;
-  background: var(--lanes-bg); border-bottom: 1px solid var(--lanes-border);
-}
+.lanes-ready body.zj-mobile-active #terminal { position: fixed; top: calc(var(--lanes-offset-top) + var(--lanes-head) + 8px); left: calc(var(--lanes-offset-left) + var(--lanes-safe-left) + 8px); width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px); height: calc(var(--lanes-vh) - var(--lanes-head) - var(--lanes-dock) - var(--lanes-keys) - var(--lanes-quick) - 16px); margin: 0; padding: 0; }
+.lanes-header { position: fixed; z-index: 510; top: var(--lanes-offset-top); left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-head); padding: var(--lanes-safe-top) calc(8px + var(--lanes-safe-right)) 0 calc(16px + var(--lanes-safe-left)); display: flex; align-items: center; gap: 10px; background: var(--lanes-bg); border-bottom: 1px solid var(--lanes-border); }
 .lanes-brand { height: 34px; width: 34px; flex: 0 0 34px; }
-.lanes-context {
-  display: flex; flex: 1; min-width: 0; height: 54px;
-  flex-direction: column; justify-content: center; align-items: flex-start;
-  border: 0; background: none; padding: 0; text-align: left;
-}
-.lanes-context strong { font-size: 16px; letter-spacing: -.25px; line-height: 22px; }
-.lanes-context span { font-size: 12px; color: var(--lanes-muted); line-height: 18px; }
+.lanes-context { display: flex; flex: 1; min-width: 0; height: 54px; flex-direction: column; justify-content: center; align-items: flex-start; border: 0; background: none; padding: 0; text-align: left; }
+.lanes-context strong { font-size: 17px; letter-spacing: -.3px; line-height: 22px; }
+.lanes-context span { font-size: 13px; color: var(--lanes-muted); line-height: 18px; }
 .lanes-context strong, .lanes-context span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.lanes-button {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 5px; min-width: 48px; min-height: 48px; padding: 5px;
-  border: 0; background: transparent; border-radius: 12px;
-}
+.lanes-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 48px; min-height: 48px; padding: 5px; border: 0; background: transparent; border-radius: 12px; }
 .lanes-button svg { width: 23px; height: 23px; flex: 0 0 23px; }
-.lanes-button span { font-size: 10px; font-weight: 600; letter-spacing: .1px; }
+.lanes-button span { font-size: 12px; font-weight: 600; letter-spacing: .1px; }
 .lanes-more, .lanes-close { flex: 0 0 48px; }
 .lanes-more span, .lanes-close span { display: none; }
-.lanes-button:active, .lanes-workspace:active { background: var(--lanes-press); }
-.lanes-dock {
-  position: fixed; z-index: 510;
-  top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock));
-  left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-dock);
-  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
-  padding: 4px calc(8px + var(--lanes-safe-right)) var(--lanes-safe-bottom) calc(8px + var(--lanes-safe-left));
-  border-top: 1px solid var(--lanes-border); background: var(--lanes-bg);
-}
-.lanes-dock .lanes-button { color: var(--lanes-muted); }
+.lanes-button:active, .lanes-workspace:active, .lanes-quick button:active { background: var(--lanes-press); }
+.lanes-dock { position: fixed; z-index: 510; top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock)); left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-dock); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px calc(8px + var(--lanes-safe-right)) var(--lanes-safe-bottom) calc(8px + var(--lanes-safe-left)); border-top: 1px solid var(--lanes-border); background: var(--lanes-bg); }
+.lanes-dock .lanes-button { color: var(--lanes-muted); position: relative; }
 .lanes-dock .lanes-button[aria-pressed="true"] { color: var(--lanes-accent); background: var(--lanes-current); }
-.lanes-terminal-input {
-  position: relative; align-self: center; min-width: 0; height: 52px;
-  margin: 0 2px; border: 1px solid var(--lanes-border); border-radius: 12px;
-  background: var(--lanes-panel); color: var(--lanes-muted);
-}
-.lanes-input-label {
-  position: absolute; inset: 0; pointer-events: none;
-  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
-}
+.lanes-button[data-count]::after { content: attr(data-count); position: absolute; top: 2px; right: 8px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lanes-tone-attention); color: var(--lanes-on-accent); font-size: 12px; font-weight: 600; }
+.lanes-terminal-input { position: relative; align-self: center; min-width: 0; height: 52px; margin: 0 2px; border: 1px solid var(--lanes-border); border-radius: 12px; background: var(--lanes-panel); color: var(--lanes-muted); }
+.lanes-input-label { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
 .lanes-input-label svg { width: 23px; height: 23px; }
-.lanes-input-label span { font-size: 10px; font-weight: 600; }
-.lanes-terminal-input:focus-within, .lanes-terminal-input.is-typing {
-  border-color: var(--lanes-accent); color: var(--lanes-accent); background: var(--lanes-current);
-}
+.lanes-input-label span { font-size: 12px; font-weight: 600; letter-spacing: .1px; }
+.lanes-terminal-input:focus-within, .lanes-terminal-input.is-typing { border-color: var(--lanes-accent); color: var(--lanes-accent); background: var(--lanes-current); }
 .lanes-keyboard .lanes-dock { padding-top: 0; }
 .lanes-keyboard .lanes-dock .lanes-button { min-height: 44px; padding: 0; }
 .lanes-keyboard .lanes-dock .lanes-button span { display: none; }
 .lanes-keyboard .lanes-terminal-input { height: 44px; }
 .lanes-keyboard .lanes-input-label { flex-direction: row; gap: 5px; }
-.lanes-ready .zj-mobile-modbar {
-  top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock) - var(--lanes-keys));
-  bottom: auto; left: calc(var(--lanes-offset-left) + var(--lanes-safe-left));
-  right: auto; width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right));
-  height: 48px; z-index: 510;
-  overflow-x: auto; overscroll-behavior: contain;
-  scrollbar-width: none; background: var(--lanes-panel); border-color: var(--lanes-border);
-}
+.lanes-ready .zj-mobile-modbar, .lanes-quick { top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock) - var(--lanes-keys)); bottom: auto; left: calc(var(--lanes-offset-left) + var(--lanes-safe-left)); right: auto; width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right)); height: 48px; z-index: 510; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--lanes-panel); border-color: var(--lanes-border); }
 .lanes-ready:not(.lanes-keyboard) .zj-mobile-modbar { display: none !important; }
+.lanes-quick { position: fixed; top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock) - var(--lanes-keys) - var(--lanes-quick)); display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 2px 16px; border-top: 1px solid var(--lanes-border); }
+.lanes-quick button { min-height: 44px; min-width: 44px; border: 1px solid var(--lanes-border); border-radius: 12px; background: var(--lanes-bg); font: 600 15px ui-monospace, Menlo, monospace; }
+.lanes-quick .is-destructive { color: var(--lanes-tone-urgent); }
+.lanes-quick .is-destructive:active { background: var(--lanes-tone-urgent); color: var(--lanes-on-accent); transition: background 0s 400ms, color 0s 400ms; }
 .lanes-ready.lanes-keyboard .zj-mobile-modbar { display: flex !important; }
-.lanes-ready .zj-mobile-modbar button {
-  flex: 1 0 44px; min-width: 44px; min-height: 48px;
-  color: var(--lanes-text); font: 500 13px -apple-system, sans-serif;
-  border-color: var(--lanes-border);
-}
-.lanes-ready .zj-mobile-modbar button.zj-armed { background: var(--lanes-accent); color: #101318; }
-.lanes-sheet {
-  position: fixed; z-index: 800;
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
-  height: var(--lanes-vh); width: var(--lanes-vw);
-  display: flex; align-items: flex-end; background: #0009;
-  padding: var(--lanes-safe-top) var(--lanes-safe-right) 0 var(--lanes-safe-left);
-}
-.lanes-sheet-panel {
-  display: flex; flex-direction: column; width: 100%; min-height: 0;
-  max-height: calc(var(--lanes-vh) - var(--lanes-safe-top) - 20px);
-  background: var(--lanes-bg); border: 1px solid var(--lanes-border);
-  border-bottom: 0; border-radius: 24px 24px 0 0;
-  padding: 20px 16px calc(8px + var(--lanes-safe-bottom));
-  box-shadow: 0 -16px 80px #0007;
-}
+.lanes-ready .zj-mobile-modbar button { flex: 1 0 44px; min-width: 44px; min-height: 48px; color: var(--lanes-text); font: 500 13px -apple-system, sans-serif; border-color: var(--lanes-border); }
+.lanes-ready .zj-mobile-modbar button.zj-armed { background: var(--lanes-accent); color: var(--lanes-on-accent); }
+.lanes-sheet { position: fixed; z-index: 800; top: var(--lanes-offset-top); left: var(--lanes-offset-left); height: var(--lanes-vh); width: var(--lanes-vw); display: flex; align-items: flex-end; background: var(--lanes-scrim); padding: var(--lanes-safe-top) var(--lanes-safe-right) 0 var(--lanes-safe-left); }
+.lanes-sheet-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: calc(var(--lanes-vh) - var(--lanes-safe-top) - 20px); background: var(--lanes-bg); border: 1px solid var(--lanes-border); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 20px 16px calc(8px + var(--lanes-safe-bottom)); box-shadow: var(--lanes-shadow); }
 .lanes-sheet-head { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; margin-bottom: 18px; }
 .lanes-sheet-head h2 { font-size: 25px; line-height: 30px; letter-spacing: -.8px; margin: 0 0 3px; }
 .lanes-sheet-head p { font-size: 13px; color: var(--lanes-muted); margin: 0; }
 .lanes-close { background: var(--lanes-panel); border-radius: 50%; }
-.lanes-search {
-  display: flex; align-items: center; gap: 10px; flex: 0 0 48px;
-  height: 48px; background: var(--lanes-panel); border: 1px solid var(--lanes-border);
-  border-radius: 12px; padding: 0 14px; margin-bottom: 12px;
-}
+.lanes-search { display: flex; align-items: center; gap: 10px; flex: 0 0 48px; height: 48px; background: var(--lanes-panel); border: 1px solid var(--lanes-border); border-radius: 12px; padding: 0 14px; margin-bottom: 12px; }
 .lanes-search svg { width: 20px; height: 20px; color: var(--lanes-muted); flex-shrink: 0; }
-.lanes-search input {
-  border: 0; outline: none; background: transparent; color: var(--lanes-text);
-  font: 16px -apple-system, sans-serif; min-width: 0; width: 100%; height: 44px;
-}
+.lanes-search input { border: 0; outline: none; background: transparent; color: var(--lanes-text); font: 16px -apple-system, sans-serif; min-width: 0; width: 100%; height: 44px; }
 .lanes-search input::placeholder { color: var(--lanes-muted); }
-.lanes-workspaces {
-  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
-  display: flex; flex-direction: column; gap: 6px;
-  -webkit-overflow-scrolling: touch;
-}
-.lanes-workspace {
-  display: flex; align-items: center; gap: 12px;
-  flex: 0 0 auto; width: 100%; min-height: 74px; padding: 12px;
-  background: var(--lanes-panel); border: 1px solid transparent; border-radius: 14px;
-  text-align: left;
-}
+.lanes-workspaces { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
+.lanes-workspace { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; width: 100%; min-height: 74px; padding: 12px; background: var(--lanes-panel); border: 1px solid transparent; border-radius: 14px; text-align: left; }
 .lanes-workspace.is-current { border-color: var(--lanes-current-border); background: var(--lanes-current); }
-.lanes-monogram {
-  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
-  font-size: 17px; font-weight: 650; color: var(--lanes-accent);
-  background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 11px;
-}
+.lanes-monogram { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; font-size: 17px; font-weight: 650; color: var(--lanes-accent); background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 11px; }
 .lanes-workspace-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
 .lanes-workspace-copy strong { font-size: 16px; font-weight: 600; line-height: 21px; overflow-wrap: anywhere; }
-.lanes-workspace-copy small { font-size: 12px; color: var(--lanes-muted); }
+.lanes-workspace-copy small { font-size: 13px; color: var(--lanes-muted); }
+.lanes-tone-urgent { color: var(--lanes-tone-urgent); }
+.lanes-tone-attention { color: var(--lanes-tone-attention); }
+.lanes-tone-working { color: var(--lanes-tone-working); }
+.lanes-tone-done { color: var(--lanes-tone-done); }
 .lanes-workspace-arrow { width: 18px; flex: 0 0 18px; color: var(--lanes-muted); }
 .is-current .lanes-workspace-arrow { color: var(--lanes-accent); }
 .lanes-session-link { border: 0; background: transparent; min-height: 48px; color: var(--lanes-muted) !important; font-size: 13px !important; flex-shrink: 0; }
 .lanes-empty { text-align: center; color: var(--lanes-muted); padding: 30px 12px; }
-.lanes-mobile #zj-mobile-root { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
-.lanes-mobile .zj-mobile-menu {
-  top: calc(var(--lanes-offset-top) + var(--lanes-head) + 6px);
-  right: calc(var(--lanes-safe-right) + 8px); left: auto;
-  max-height: calc(var(--lanes-vh) - var(--lanes-head) - 16px);
-  max-width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px);
-  min-width: min(290px, 90vw); overflow-y: auto;
-  background: var(--lanes-panel); border: 1px solid var(--lanes-border);
-  border-radius: 16px; box-shadow: 0 12px 48px #0009;
-}
+.lanes-mobile #zj-mobile-root, .lanes-mobile .security-modal { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+.lanes-mobile .zj-mobile-menu { top: calc(var(--lanes-offset-top) + var(--lanes-head) + 6px); right: calc(var(--lanes-safe-right) + 8px); left: auto; max-height: calc(var(--lanes-vh) - var(--lanes-head) - 16px); max-width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px); min-width: min(290px, 90vw); overflow-y: auto; background: var(--lanes-panel); border: 1px solid var(--lanes-border); border-radius: 16px; box-shadow: var(--lanes-shadow); }
 .lanes-mobile .zj-mobile-menu button { min-height: 48px; color: var(--lanes-text); font-size: 15px; }
 .lanes-font-controls { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--lanes-border); }
 .lanes-font-controls > span { margin-right: auto; font-size: 13px; color: var(--lanes-muted); }
 .lanes-font-controls button { min-width: 44px; padding: 8px !important; text-align: center !important; }
 .lanes-font-controls output { font: 12px -apple-system, sans-serif; width: 36px; text-align: center; color: var(--lanes-muted); }
-.lanes-mobile .zj-mobile-overlay {
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left); right: auto;
-  width: var(--lanes-vw); height: var(--lanes-vh); max-height: var(--lanes-vh);
-  padding: var(--lanes-safe-top) var(--lanes-safe-right) var(--lanes-safe-bottom) var(--lanes-safe-left);
-  background: var(--lanes-bg); color: var(--lanes-text);
-}
+.lanes-mobile .zj-mobile-overlay { top: var(--lanes-offset-top); left: var(--lanes-offset-left); right: auto; width: var(--lanes-vw); height: var(--lanes-vh); max-height: var(--lanes-vh); padding: var(--lanes-safe-top) var(--lanes-safe-right) var(--lanes-safe-bottom) var(--lanes-safe-left); background: var(--lanes-bg); color: var(--lanes-text); }
 .lanes-mobile .zj-mobile-overlay-header { border-color: var(--lanes-border); padding: 8px 12px; min-height: 64px; }
 .lanes-mobile .zj-mobile-overlay-header .zj-back { min-width: 64px; min-height: 48px; border-radius: 12px; border-color: var(--lanes-border); }
 .lanes-mobile .zj-mobile-overlay-header .zj-title { font-size: 19px; font-weight: 600; }
 .lanes-mobile .zj-mobile-search-row { padding: 12px; }
-.lanes-mobile .zj-mobile-overlay input.zj-search, .lanes-mobile .zj-mobile-overlay input.zj-name {
-  min-width: 0; font-size: 16px; min-height: 48px; border-radius: 10px; padding: 10px;
-  color: var(--lanes-text); background: var(--lanes-panel); border-color: var(--lanes-border);
-}
+.lanes-mobile .zj-mobile-overlay input.zj-search, .lanes-mobile .zj-mobile-overlay input.zj-name { min-width: 0; font-size: 16px; min-height: 48px; border-radius: 10px; padding: 10px; color: var(--lanes-text); background: var(--lanes-panel); border-color: var(--lanes-border); }
 .lanes-mobile .zj-mobile-cards { padding: 0 12px 12px; overscroll-behavior: contain; }
 .lanes-mobile .zj-mobile-card { min-height: 72px; padding: 16px; border: 1px solid var(--lanes-border); border-radius: 14px; background: var(--lanes-panel); }
 .lanes-mobile .zj-mobile-card .zj-card-title { color: var(--lanes-accent); font-size: 16px; overflow-wrap: anywhere; }
-.lanes-mobile .zj-mobile-card .zj-card-meta { color: var(--lanes-muted); font-size: 12px; overflow-wrap: anywhere; }
+.lanes-mobile .zj-mobile-card .zj-card-meta { color: var(--lanes-muted); font-size: 13px; overflow-wrap: anywhere; }
 .lanes-mobile .zj-mobile-footer { padding-bottom: 8px; }
 .lanes-mobile .zj-mobile-footer button { min-height: 48px; border-radius: 12px; color: var(--lanes-accent); border-color: var(--lanes-border); }
-.lanes-mobile .security-modal {
-  position: fixed; z-index: 9999; box-sizing: border-box;
-  display: flex; align-items: center; justify-content: center;
-  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
-  width: var(--lanes-vw); height: var(--lanes-vh);
-  padding: calc(16px + var(--lanes-safe-top)) calc(20px + var(--lanes-safe-right)) calc(16px + var(--lanes-safe-bottom)) calc(20px + var(--lanes-safe-left));
-  overflow: auto; background: var(--lanes-bg); font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-}
-.lanes-mobile .security-modal .security-modal-content {
-  width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto;
-  border: 1px solid var(--lanes-border); border-radius: 22px;
-  padding: 24px; background: var(--lanes-panel); color: var(--lanes-text); box-shadow: none;
-}
+.lanes-mobile .security-modal { box-sizing: border-box; top: var(--lanes-offset-top); left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-vh); padding: calc(16px + var(--lanes-safe-top)) calc(20px + var(--lanes-safe-right)) calc(16px + var(--lanes-safe-bottom)) calc(20px + var(--lanes-safe-left)); overflow: auto; background: var(--lanes-bg); }
+.lanes-mobile .security-modal .security-modal-content { width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; border: 1px solid var(--lanes-border); border-radius: 24px; padding: 24px; background: var(--lanes-panel); color: var(--lanes-text); box-shadow: none; }
 .lanes-mobile .security-modal .security-modal-content::before { display: none; }
 .lanes-mobile .security-modal h3 { font-size: 25px; font-weight: 650; text-transform: none; letter-spacing: -.7px; color: var(--lanes-text); border: 0; margin-bottom: 18px; }
 .lanes-mobile .security-modal input[type="password"] { display: block; width: 100%; padding: 12px; margin-bottom: 12px; font-size: 16px; min-height: 52px; border-radius: 12px; background: var(--lanes-bg); color: var(--lanes-text); border: 1px solid var(--lanes-border); appearance: none; }
@@ -294,18 +163,15 @@ html.lanes-keyboard {
 .lanes-mobile .security-modal input[type="checkbox"] { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 22px; accent-color: var(--lanes-accent); }
 .lanes-mobile .security-modal .button-row { display: flex; gap: 12px; margin-top: 20px; }
 .lanes-mobile .security-modal button { min-height: 48px; border: 1px solid; border-radius: 12px; font-size: 15px; padding: 10px 20px; appearance: none; }
-.lanes-mobile .security-modal .submit-btn { background: var(--lanes-accent); border-color: var(--lanes-accent); color: #101318; font-weight: 650; flex: 1; }
+.lanes-mobile .security-modal .submit-btn { background: var(--lanes-accent); border-color: var(--lanes-accent); color: var(--lanes-on-accent); font-weight: 650; flex: 1; }
 .lanes-mobile .security-modal .cancel-btn { background: transparent; color: var(--lanes-muted); border-color: var(--lanes-border); }
 @media (orientation: landscape) and (max-height: 500px) {
   html.lanes-mobile { --lanes-head: calc(48px + var(--lanes-safe-top)); --lanes-dock: calc(48px + var(--lanes-safe-bottom)); }
-  html.lanes-keyboard { --lanes-dock: 48px; }
   .lanes-context { height: 46px; }
   .lanes-dock { padding-top: 0; }
   .lanes-dock .lanes-button { flex-direction: row; gap: 8px; min-height: 44px; }
-  .lanes-dock .lanes-button span { font-size: 12px; }
   .lanes-terminal-input { height: 44px; }
   .lanes-input-label { flex-direction: row; gap: 8px; }
-  .lanes-input-label span { font-size: 12px; }
   .lanes-sheet-panel { padding-top: 12px; }
   .lanes-sheet-head { margin-bottom: 8px; }
   .lanes-workspaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -314,20 +180,9 @@ html.lanes-keyboard {
   .lanes-sheet-panel { animation: lanes-sheet-in 150ms ease-out; }
   @keyframes lanes-sheet-in { from {transform: translateY(20px); opacity: .4;} to {transform: translateY(0); opacity: 1;} }
 }
-
-/* Lane filter bar — visible in the dock when the ☰ picker tab is active */
-.lanes-filter-bar {
-  display: flex; align-items: center; gap: 8px;
-  flex: 1 1 auto; min-width: 0;
-  padding: 0 12px; height: 44px;
-  background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 12px;
-}
-.lanes-filter-bar[hidden] { display: none; }
+/* Lane filter bar (☰ picker tab) */
+.lanes-filter-bar { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 0 12px; height: 44px; background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 12px; }
 .lanes-filter-bar > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--lanes-muted); }
-.lanes-filter-bar input {
-  flex: 1 1 auto; min-width: 0;
-  background: transparent; border: 0; outline: none;
-  color: var(--lanes-text); font-size: 16px; caret-color: var(--lanes-accent);
-}
+.lanes-filter-bar input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--lanes-text); font-size: 16px; caret-color: var(--lanes-accent); }
 .lanes-filter-bar input::placeholder { color: var(--lanes-muted); }
 .lanes-filter-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }