@vibelord/lanes 1.0.0 → 1.0.2

package/payload/lanes/web/browser.js

@@ -0,0 +1,73 @@
+/* LNS-31 laptop/tablet extras; see docs/ARCHITECTURE.md (Web and phone). */
+function laneBarModel(d) {
+  const panes = (d?.panes || []).filter(p => !p.is_plugin), at = d?.active_pane || {}, ws = new Map();
+  const first = t => t && panes.find(p => p.tab_position === t.position);
+  for (const t of d?.tabs || []) {
+    const name = t.name.replace(/ ☰$/, '');
+    ws.set(name, {...ws.get(name), name, [name === t.name ? 'view' : 'picker']: t});
+  }
+  const here = [...ws.values()].find(g => [g.view, g.picker].some(t => t && t.position === at.tab_position));
+  const item = (label, p, current = p?.pane_id === at.pane_id) => p && {label, pane: p.pane_id, current};
+  return {
+    workspaces: [...ws.values()].map(g => item(g.name, first(g.view) || first(g.picker), g === here)).filter(Boolean),
+    lanes: [item('☰ Choose a lane', first(here?.picker)), ...panes.filter(p => p.tab_position === here?.view?.position)
+      .map(p => item(p.title || `Pane ${p.pane_id}`, p))].filter(Boolean),
+  };
+}
+// Tablet: upstream starts single pane on every load; once, send its own switch-to-desktop prefs.
+function laneFullRender(api, send) {
+  let done;
+  return () => {
+    const s = api.getState?.();
+    if (done || !s?.initialPrefsSent || s.renderMode !== 'single-pane') return false;
+    done = s.renderMode = 'full';
+    s.fitEnabled = true;
+    send({type: 'SetMobileRenderPreferences', single_pane: false, fit: true});
+    return true;
+  };
+}
+if (typeof module === 'object') module.exports = {laneBarModel, laneFullRender};
+(() => {
+  const mode = globalThis.document?.documentElement.dataset.lanesShell;
+  if (mode !== 'desktop' && mode !== 'tablet') return;
+  const send = p => window.__zjSendControl?.(p), focus = () => window.term?.focus();
+  const make = (tag, props) => Object.assign(document.createElement(tag), props);
+  const ready = api => {
+    const setData = api.setData, after = mode === 'tablet' ? tablet(api) : desktop(api);
+    api.setData = v => {setData.call(api, v); after();};
+    after();
+  };
+  const tablet = api => {
+    const full = laneFullRender(api, send);
+    return () => full() && dispatchEvent(new Event('zellij:rendering-resize'));
+  };
+  // Desktop: the chip toggles an overlay bar (no refit); picks send the phone picker's FocusPane.
+  const desktop = api => {
+    let last;
+    const picks = ['Workspace', 'Lane'].map(title => make('select', {title, onchange() {
+      send({type: 'FocusPane', pane_id: +this.value, is_plugin: false});
+      focus();
+    }}));
+    const bar = make('nav', {className: 'lanes-bar', hidden: true});
+    const render = () => {
+      const m = !bar.hidden && laneBarModel(api.getState()?.data), sig = JSON.stringify(m);
+      if (!m || sig === last) return;
+      last = sig;
+      [m.workspaces, m.lanes].forEach((l, i) => picks[i].replaceChildren(...l.map(o => new Option(o.label, o.pane, 0, o.current))));
+    };
+    const chip = make('button', {className: 'lanes-chip', textContent: 'Lanes', ariaExpanded: false, onclick() {
+      chip.ariaExpanded = !(bar.hidden = !bar.hidden);
+      last = '';
+      render();
+      window.term?.focus();
+    }});
+    chip.addEventListener('mousedown', ev => ev.preventDefault());   // the terminal keeps the keys
+    bar.addEventListener('keydown', ev => ev.key === 'Escape' && focus());
+    bar.append(...picks);
+    document.body.append(bar, chip);
+    return render;
+  };
+  const ui = () => window.__zjMobileUi;   // set synchronously after the client appends its mobile root
+  if (ui()) return ready(ui());
+  new MutationObserver((_, o) => ui() && (o.disconnect(), ready(ui()))).observe(document.body, {childList: true});
+})();

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

@@ -1,260 +1,161 @@
-/* Safe areas apply in Home Screen mode and on both sides of landscape Safari. */
+/* BEGIN lanes tokens (generated by libexec/tokens.py --css; do not edit by hand) */
 html.lanes-mobile {
-  --lanes-bg: #101318;
-  --lanes-panel: #191e25;
-  --lanes-border: #2c333d;
-  --lanes-text: #edf1f5;
-  --lanes-muted: #9ca7b5;
-  --lanes-accent: #b4e3bf;
-  --lanes-current: #1a2721;
-  --lanes-current-border: #4b6955;
+  --lanes-surface: #101318;
+  --lanes-surface-raised: #191e25;
+  --lanes-line: #2c333d;
+  --lanes-accent-wash: #1a2721;
+  --lanes-accent-line: #4b6955;
   --lanes-press: #26332c;
-  --lanes-chip: #ffffff09;
-  --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;
+  --lanes-chip: #ffffff0f;
+  --lanes-ink: #edf1f5;
+  --lanes-ink-dim: #9ca7b5;
+  --lanes-ink-faint: #6b7683;
+  --lanes-accent: #b4e3bf;
+  --lanes-on-accent: #101318;
+  --lanes-on-accent-urgent: #7a1a12;
+  --lanes-tone-urgent: #f28b7d;
+  --lanes-tone-attention: #e5b84a;
+  --lanes-tone-working: #7fb3f2;
+  --lanes-tone-done: #6fd39a;
+  --lanes-scrim: #000000a6;
+  --lanes-shadow: 0 -16px 80px #0007;
   color-scheme: dark;
-  -webkit-text-size-adjust: 100%;
-  overscroll-behavior: none;
-}
-html.lanes-mobile:root {
-  --zj-bg: var(--lanes-bg);
-  --zj-surface: var(--lanes-panel);
-  --zj-border: var(--lanes-border);
-  --zj-text: var(--lanes-text);
-  --zj-text-dim: var(--lanes-muted);
-  --zj-green: var(--lanes-accent);
-  --zj-blue: var(--lanes-accent);
 }
 html.lanes-mobile:root[data-zj-theme="light"] {
-  --lanes-bg: #f3f5f2;
-  --lanes-panel: #ffffff;
-  --lanes-border: #d5ded6;
-  --lanes-text: #17241b;
-  --lanes-muted: #59695f;
-  --lanes-accent: #356544;
-  --lanes-current: #e5f0e6;
-  --lanes-current-border: #acc9b4;
+  --lanes-surface: #f3f5f2;
+  --lanes-surface-raised: #ffffff;
+  --lanes-line: #d5ded6;
+  --lanes-accent-wash: #e5f0e6;
+  --lanes-accent-line: #acc9b4;
   --lanes-press: #d8e9db;
   --lanes-chip: #edf3ec;
+  --lanes-ink: #17241b;
+  --lanes-ink-dim: #56616d;
+  --lanes-ink-faint: #7f8a96;
+  --lanes-accent: #2f6b45;
+  --lanes-on-accent: #ffffff;
+  --lanes-on-accent-urgent: #ffd3cc;
+  --lanes-tone-urgent: #b7322a;
+  --lanes-tone-attention: #8a5a00;
+  --lanes-tone-working: #2456a8;
+  --lanes-tone-done: #1b7142;
+  --lanes-scrim: #1a222b80;
+  --lanes-shadow: 0 -16px 80px #0003;
   color-scheme: light;
 }
-html.lanes-keyboard {
-  --lanes-dock: 48px;
-  --lanes-keys: 48px;
-  --lanes-safe-bottom: 0px;
-}
+html.lanes-mobile:root {
+  --lanes-bg: var(--lanes-surface);
+  --lanes-panel: var(--lanes-surface-raised);
+  --lanes-border: var(--lanes-line);
+  --lanes-text: var(--lanes-ink);
+  --lanes-muted: var(--lanes-ink-dim);
+  --lanes-current: var(--lanes-accent-wash);
+  --lanes-current-border: var(--lanes-accent-line);
+  --zj-bg: var(--lanes-surface);
+  --zj-surface: var(--lanes-surface-raised);
+  --zj-border: var(--lanes-line);
+  --zj-text: var(--lanes-ink);
+  --zj-text-dim: var(--lanes-ink-dim);
+  --zj-green: var(--lanes-tone-done);
+  --zj-blue: var(--lanes-tone-working);
+  --zj-red: var(--lanes-tone-urgent);
+  --zj-yellow: var(--lanes-tone-attention);
+}
+/* END lanes tokens */
+/* 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; }
@@ -262,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)); }
@@ -282,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; }