@vibelord/lanes 1.1.0 → 1.2.0

package/payload/lanes/web/mobile.js

@@ -1,4 +1,3 @@
-/* Lanes browser shell; see web/README.md, Code notes */
 function laneShellMode({userAgent, coarse, width, height} = {}) {
   if (/iPhone|iPod|Android.*Mobile/i.test(userAgent) || (coarse && (width <= 600 || height <= 500))) return 'phone';
   return coarse ? 'tablet' : 'desktop';
@@ -11,7 +10,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     width: innerWidth, height: innerHeight});
   const root = document.documentElement;
   // BEGIN lanes tokens (generated by libexec/tokens.py --js; do not edit by hand)
-  const LANES_ANSI = {dark: ['#7d8896', '#f28b7d', '#6fd39a', '#e5b84a', '#7fb3f2', '#c9a6ff', '#6fd6d0', '#9ca7b5', '#8a95a3', '#ff9d96', '#8fe0a3', '#f7cf7f', '#a5cbff', '#dcc6ff', '#9ae6e0', '#edf1f5'], light: ['#3b4a42', '#b7322a', '#1b7142', '#8a5a00', '#2456a8', '#7a3fb8', '#0f7b7b', '#56616d', '#5f6d66', '#c2332a', '#1b7a38', '#8f5a00', '#2860c4', '#8a4dc8', '#0f7272', '#17241b']};
+  const LANES_ANSI = {dark: ['#8792a0', '#ff7b6e', '#5fdc8a', '#ffc233', '#6fb6ff', '#c58bff', '#3fd9cf', '#a6b1be', '#97a3b1', '#ff9a8e', '#86f0ad', '#ffd866', '#98cbff', '#dcb2ff', '#7deee6', '#f2f5f8'], light: ['#2f3b34', '#c41c1c', '#0d7338', '#a04d00', '#1a56c4', '#8228c4', '#006f73', '#4a5661', '#55625b', '#d0221a', '#0e7a3a', '#a85200', '#1f5fd8', '#9133d0', '#00797c', '#111a14']};
   // END lanes tokens
   root.dataset.lanesShell = mode;
   if (mode !== 'phone') {
@@ -23,7 +22,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   root.classList.add('lanes-mobile');
   if (mode === 'tablet') {
     root.classList.add('lanes-tablet');
-    try {localStorage.getItem('zellij:mobile-ui') || localStorage.setItem('zellij:mobile-ui', 'on');} catch (_) {}
+    try {localStorage.getItem('zellij:mobile-ui') || localStorage.setItem('zellij:mobile-ui', 'on');} catch {}
   }
 
   const elementFocus = HTMLElement.prototype.focus;
@@ -38,9 +37,9 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     const theme = localStorage.getItem('zellij:mobile-theme') || 'dark';
     localStorage.setItem('zellij:mobile-theme', theme);
     root.dataset.zjTheme = theme;
-  } catch (_) {}
+  } catch {}
   const icons = {
-    workspaces: '<rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/>',
+    workspaces: [[3, 3], [14, 3], [3, 14], [14, 14]].map(([x, y]) => `<rect x="${x}" y="${y}" width="7" height="7" rx="2"/>`).join(''),
     lanes: '<path d="M8 5h13M8 12h13M8 19h13"/><path d="M3 5h.01M3 12h.01M3 19h.01"/>',
     panes: '<rect x="3" y="4" width="18" height="16" rx="3"/><path d="M12 4v16"/>',
     keyboard: '<rect x="2" y="5" width="20" height="14" rx="3"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 16h8"/>',
@@ -49,6 +48,8 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     arrow: '<path d="m9 5 7 7-7 7"/>',
     check: '<path d="m5 12 4 4L19 6"/>',
     search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>',
+    copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5h10"/>',
+    paste: '<rect x="5" y="5" width="14" height="16" rx="2"/><path d="M9 3h6v4H9z"/>',
   };
   const svg = name => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icons[name]}</svg>`;
   const make = (tag, cls, text) => {
@@ -61,33 +62,34 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   const button = (label, icon, action) => {
     const el = make('button', 'lanes-button');
     el.type = 'button';
-    el.setAttribute('aria-label', label);
+    aria(el, label);
     el.innerHTML = svg(icon);
     el.append(make('span', '', label));
     el.addEventListener('click', action);
     return el;
   };
-  let shell, heading, subtitle, dock, sheet, list, search, count, lanesButton, typingField, quickRow, quickOn;
-  let laneFilterBar, laneFilterInput, laneFilterPrev = '';
-  let api, term, previousCards = '', sheetOpen = false, returnFocus;
+  let shell, heading, subtitle, dock, sheet, list, search, count, lanesButton, panesButton, pasteKey, typingField, quickRow, quickOn;
+  let laneFilterBar, laneFilterInput, laneFilterPrev = '', sentAt = 0, filterTab, owed = new Set();
+  let api, term, previousCards = '', sheetOpen = false, returnFocus, menuWas, hintN = 0, timer;
+  const queue = [];
   let fontSize = 16;
   try {
     const stored = Number(localStorage.getItem('lanes:font-size'));
     if (stored >= 14 && stored <= 24) fontSize = stored;
-  } catch (_) {}
+  } catch {}
   const state = () => api?.getState();
   const data = () => state()?.data;
   const nativeClick = selector => document.querySelector(selector)?.click();
   const resize = () => window.dispatchEvent(new Event('zellij:rendering-resize'));
+  const kbd = () => window.__zjSoftKbdCapture, aria = (el, label) => el.setAttribute('aria-label', label);
 
   function viewport() {
     const vv = window.visualViewport;
-    root.style.setProperty('--lanes-vh', `${vv?.height ?? innerHeight}px`);
-    root.style.setProperty('--lanes-vw', `${vv?.width ?? innerWidth}px`);
-    root.style.setProperty('--lanes-offset-top', `${vv?.offsetTop ?? 0}px`);
-    root.style.setProperty('--lanes-offset-left', `${vv?.offsetLeft ?? 0}px`);
+    const px = (k, v) => root.style.setProperty(`--lanes-${k}`, `${v}px`);
+    px('vh', vv?.height ?? innerHeight); px('vw', vv?.width ?? innerWidth);
+    px('offset-top', vv?.offsetTop ?? 0); px('offset-left', vv?.offsetLeft ?? 0);
     const occluded = !!vv && innerHeight - vv.height - vv.offsetTop > 120;
-    const focused = window.__zjSoftKbdCapture?.isFocused || document.activeElement?.matches('input, textarea');
+    const focused = kbd()?.isFocused || document.activeElement?.matches('input, textarea');
     setKeyboard(occluded && focused);
   }
   function setKeyboard(visible) {
@@ -95,10 +97,10 @@ if (typeof module === 'object') module.exports = {laneShellMode};
       root.classList.toggle('lanes-keyboard', !!visible);
       resize();
     }
-    typingField?.classList.toggle('is-typing', !!window.__zjSoftKbdCapture?.isFocused);
+    typingField?.classList.toggle('is-typing', !!kbd()?.isFocused);
   }
   function buildTypingField() {
-    const capture = window.__zjSoftKbdCapture?.element;
+    const capture = kbd()?.element;
     const host = document.getElementById('zj-mobile-capture-host');
     if (!capture || !host) return null;
     const field = make('div', 'lanes-terminal-input');
@@ -107,16 +109,23 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     label.append(make('span', '', 'Type here'));
     label.setAttribute('aria-hidden', 'true');
     host.removeAttribute('aria-hidden');
-    host.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;opacity:1;pointer-events:auto;';
+    const fill = 'position:absolute;inset:0;width:100%;height:100%;opacity:1;pointer-events:auto;';
+    host.style.cssText = fill;
     capture.removeAttribute('aria-hidden');
-    capture.setAttribute('aria-label', 'Type in terminal');
+    aria(capture, 'Type in terminal');
+    for (const a of ['type text', 'autocomplete off', 'autocapitalize none']) capture.setAttribute(...a.split(' '));
     capture.tabIndex = 0;
-    capture.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;font-size:16px;' +
-      'border:0;border-radius:12px;padding:0;margin:0;opacity:1;background:transparent;color:transparent;' +
-      'caret-color:transparent;outline:none;pointer-events:auto;user-select:text;-webkit-user-select:text;';
+    capture.style.cssText = fill + 'box-sizing:border-box;font-size:16px;border:0;border-radius:12px;padding:0;margin:0;' +
+      'background:transparent;color:transparent;caret-color:transparent;outline:none;user-select:text;-webkit-user-select:text;';
     field.append(label, host);
-    capture.addEventListener('focus', () => field.classList.add('is-typing'));
-    capture.addEventListener('blur', () => field.classList.remove('is-typing'));
+    capture.addEventListener('beforeinput', ev => {
+      const t = ev.data ?? ev.dataTransfer?.getData('text'), r = ev.getTargetRanges?.()[0];
+      if (ev.cancelable && t && (ev.inputType == 'insertReplacementText' || ev.inputType == 'insertText' && t.length > 1)) {
+        ev.preventDefault();
+        send('\x7f'.repeat(r ? r.endOffset - r.startOffset : capture.selectionEnd - capture.selectionStart) + t);
+      }
+    });
+    capture.addEventListener('paste', ev => { ev.preventDefault(); paste(ev.clipboardData.getData('text')); });
     return field;
   }
   function focusTab(tab) {
@@ -153,7 +162,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   }
   function openSheet() {
     returnFocus = document.activeElement;
-    window.__zjSoftKbdCapture?.element.blur();
+    kbd()?.element.blur();
     document.activeElement?.blur();
     sheetOpen = true;
     sheet.hidden = false;
@@ -188,7 +197,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
       const active = item.name === activeName;
       const card = make('button', `lanes-workspace${active ? ' is-current' : ''}`);
       card.type = 'button';
-      card.setAttribute('aria-label', `${item.name}${active ? ', current workspace' : ''}`);
+      aria(card, `${item.name}${active ? ', current workspace' : ''}`);
       if (active) card.setAttribute('aria-current', 'true');
       const monogram = make('span', 'lanes-monogram', Array.from(item.name)[0]?.toUpperCase() || 'L');
       const copy = make('span', 'lanes-workspace-copy');
@@ -211,22 +220,26 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     const brand = make('img', 'lanes-brand');
     brand.src = '/lanes-assets/icon.svg'; brand.alt = 'Lanes';
     const context = make('button', 'lanes-context');
-    context.type = 'button'; context.setAttribute('aria-label', 'Choose workspace');
+    context.type = 'button'; aria(context, 'Choose workspace');
     heading = make('strong', '', 'Lanes'); subtitle = make('span', '', 'Connecting…');
     context.append(heading, subtitle); context.addEventListener('click', openSheet);
-    const more = button('More options', 'more', () => nativeClick('.zj-hamburger'));
-    more.classList.add('lanes-more');
-    header.append(brand, context, more);
-    dock = make('nav', 'lanes-dock'); dock.setAttribute('aria-label', 'Workspace controls');
+    addEventListener('pointerdown', () => { menuWas = document.querySelector('.zj-mobile-menu.zj-open'); }, true);
+    const more = button('More options', 'more', () => menuWas ? menuWas = null : nativeClick('.zj-hamburger'));
+    const copyKey = button('Copy screen', 'copy', () => clip(c => c.writeText(screen()), () => hint('Copied')));
+    pasteKey = button('Paste', 'paste', () => clip(c => c.readText(), t => paste(t) && hint('Pasted')));
+    for (const b of [copyKey, pasteKey, more]) b.classList.add('lanes-more');
+    for (const b of [copyKey, pasteKey]) b.addEventListener('mousedown', ev => ev.preventDefault());
+    header.append(brand, context, copyKey, pasteKey, more);
+    dock = make('nav', 'lanes-dock'); aria(dock, 'Workspace controls');
     const spaces = button('Workspaces', 'workspaces', openSheet);
     lanesButton = button('Lanes', 'lanes', () => {
       const picker = pickerTab((currentTab()?.name || '').replace(/ ☰$/, ''));
       if (picker) focusTab(picker); else openSheet();
     });
-    const panes = button('Panes', 'panes', () => nativeClick('.zj-pane'));
+    panesButton = button('Panes', 'panes', () => nativeClick('.zj-pane'));
     typingField = buildTypingField();
     laneFilterBar = buildLaneFilterBar();
-    dock.append(spaces, lanesButton, panes, laneFilterBar, typingField);
+    dock.append(spaces, lanesButton, panesButton, laneFilterBar, typingField);
     sheet = make('div', 'lanes-sheet'); sheet.hidden = true;
     sheet.setAttribute('role', 'dialog'); sheet.setAttribute('aria-labelledby', 'lanes-sheet-title');
     const panel = make('section', 'lanes-sheet-panel');
@@ -240,7 +253,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     searchWrap.innerHTML = svg('search');
     search = make('input'); search.type = 'search'; search.placeholder = 'Find a workspace';
     search.autocomplete = 'off'; search.spellcheck = false;
-    search.setAttribute('aria-label', 'Find a workspace');
+    aria(search, 'Find a workspace');
     search.addEventListener('input', renderCards); searchWrap.append(search);
     list = make('div', 'lanes-workspaces');
     const sessionButton = make('button', 'lanes-session-link', 'Switch session');
@@ -266,65 +279,94 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     installFontControls();
     resize();
   }
-  function sendToTerminal(bytes) {
-    try { window.__zjSendControl?.({type: 'Write', bytes}); } catch (_) {}
+  function send(...frames) {
+    const f = kbd()?.sendFn;
+    queue.push(...frames);
+    if (f) try {
+      while (queue.length) {
+        if (queue[0] !== null) { f(queue.shift()); sentAt = Date.now(); }
+        else if (Date.now() - sentAt < 60) return arm();
+        else queue.shift();
+      }
+    } catch { queue.length = 0; }
+  }
+  const paste = t => currentTab()?.name.endsWith(' ☰') ? hint('Open a lane to paste') :
+    (send('\x1b[200~' + t.replace(/\x1b+(?=\[201~)/g, '').replace(/\r?\n/g, '\r') + '\x1b[201~'), 1);
+  function applyLaneFilter(value) {
+    const q = [...new TextDecoder().decode(new TextEncoder().encode(value).filter(b => b > 31 && b != 127))];
+    const p = [...laneFilterPrev], s = q.join('');
+    if (s === laneFilterPrev) return;
+    let i = 0;
+    while (i < p.length && p[i] === q[i]) i++;
+    laneFilterPrev = s;
+    if (!s) { clearLaneFilter(); refresh(); }
+    else if (!p.length) send('\x1b', null, '/', s);
+    else send('\x7f'.repeat(p.length - i) + q.slice(i).join(''));
+  }
+  async function clip(f, ok) {
+    try { ok(await f(navigator.clipboard)); } catch { hint('Clipboard blocked'); }
   }
-  function applyLaneFilter(query) {
-    const bytes = [...new TextEncoder().encode(query)].filter(b => b >= 0x20 && b !== 0x7f);
-    sendToTerminal([0x1b, 0x2f, ...bytes]);
+  function screen() {
+    if (term.hasSelection()) return term.getSelection();
+    const b = term.buffer.active, rows = [];
+    for (let i = 0; i < term.rows; i++) rows.push(b.getLine(b.viewportY + i)?.translateToString(true));
+    return rows.join('\n').trimEnd();
   }
+  function hint(s) { text(subtitle, s); hintN = 8; arm(); }
   function buildQuickRow() {
     const row = make('div', 'lanes-quick');
     row.hidden = true;
-    for (const [label, bytes, name, hold] of [['⏎', [13], 'Enter'], ['y', [121]], ['n', [110], 0, 1], ['Esc', [27]],
-      ['^C', [3], 'Control C', 1], ['↑', [27, 91, 65], 'Up'], ['↓', [27, 91, 66], 'Down']]) {
-      const key = make('button', hold ? 'is-destructive' : '', label);
+    for (const [label, key, name, hold] of [['⏎', '\r', 'Enter'], ['y'], ['n', 0, 0, 1], ['Esc', '\x1b'],
+      ['^C', '\x03', 'Control C', 1], ['↑', '\x1b[A', 'Up'], ['↓', '\x1b[B', 'Down']]) {
+      const b = make('button', hold ? 'is-destructive' : '', label);
       let down = -1;
-      key.type = 'button'; if (name) key.setAttribute('aria-label', name);
-      key.addEventListener('mousedown', ev => ev.preventDefault());
-      key.addEventListener('pointerdown', ev => { down = ev.timeStamp; });
-      key.addEventListener('pointerup', ev => {
-        if (!hold || (down >= 0 && ev.timeStamp - down >= 400)) sendToTerminal(bytes); else text(subtitle, 'Hold to send');
+      b.type = 'button'; if (name) aria(b, name);
+      b.addEventListener('mousedown', ev => ev.preventDefault());
+      b.addEventListener('pointerdown', ev => { down = ev.timeStamp; });
+      for (const t of ['pointercancel', 'pointerleave']) b.addEventListener(t, () => { down = -1; });
+      b.addEventListener('pointerup', ev => {
+        if (down >= 0) !hold || ev.timeStamp - down >= 400 ? send(key || label) : hint('Hold to send');
         down = -1;
       });
-      row.append(key);
+      row.append(b);
     }
     return row;
   }
   function clearLaneFilter() {
-    sendToTerminal([0x1b]);
-    laneFilterPrev = '';
-    if (laneFilterInput) laneFilterInput.value = '';
+    owed.add(filterTab);
+    laneFilterPrev = laneFilterInput.value = '';
   }
   function buildLaneFilterBar() {
     const bar = make('div', 'lanes-filter-bar');
-    bar.setAttribute('aria-label', 'Filter lanes');
+    aria(bar, 'Filter lanes');
     bar.hidden = true;
     bar.innerHTML = svg('search');
     laneFilterInput = make('input');
     laneFilterInput.type = 'search'; laneFilterInput.placeholder = 'Filter lanes';
     laneFilterInput.autocomplete = 'off'; laneFilterInput.spellcheck = false;
-    laneFilterInput.setAttribute('aria-label', 'Filter lanes in this workspace');
-    laneFilterInput.addEventListener('input', () => {
-      const q = laneFilterInput.value;
-      if (q !== laneFilterPrev) { applyLaneFilter(q); laneFilterPrev = q; }
-    });
+    aria(laneFilterInput, 'Filter lanes in this workspace');
+    laneFilterInput.addEventListener('input', () => applyLaneFilter(laneFilterInput.value));
     laneFilterInput.addEventListener('keydown', ev => {
-      if (ev.key === 'Escape') { ev.preventDefault(); clearLaneFilter(); laneFilterInput.blur(); }
-      if (ev.key === 'Enter') { ev.preventDefault(); laneFilterInput.blur(); }
+      if (ev.key === 'Escape') { clearLaneFilter(); refresh(); }
+      if (/^E(scape|nter)$/.test(ev.key)) { ev.preventDefault(); laneFilterInput.blur(); }
     });
     bar.append(laneFilterInput);
     return bar;
   }
-  function updateLaneFilterBar(isPicker) {
-    if (!laneFilterBar) return;
+  function updateLaneFilterBar(tab, isPicker) {
     laneFilterBar.hidden = !isPicker;
-    if (!isPicker && laneFilterPrev) clearLaneFilter();
+    if (tab !== filterTab) {
+      const wait = queue.indexOf(null);
+      if (wait >= 0) queue.length = wait;
+      if (laneFilterPrev) clearLaneFilter();
+    }
+    if (owed.delete(tab)) send('\x1b', null);
+    if (isPicker) filterTab = tab;
   }
   function applyFont() {
     term.options.fontSize = fontSize;
     term.options.lineHeight = 1.1;
-    try {localStorage.setItem('lanes:font-size', String(fontSize));} catch (_) {}
+    try {localStorage.setItem('lanes:font-size', String(fontSize));} catch {}
     text(document.getElementById('lanes-font-value'), `${fontSize} px`);
     resize();
   }
@@ -339,17 +381,23 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     return t;
   }
   const applyTheme = () => { if (term) term.options.theme = lanesTheme(); };
-  function installFontControls() {
+  function menuRow(label) {
     const row = make('div', 'lanes-font-controls');
-    row.append(make('span', '', 'Text size'));
+    row.append(make('span', '', label));
+    document.querySelector('.zj-mobile-menu')?.prepend(row);
+    return row;
+  }
+  function installFontControls() {
+    const row = menuRow('Text size');
     const smaller = make('button', '', 'A−'), larger = make('button', '', 'A+');
-    smaller.setAttribute('aria-label', 'Smaller terminal text');
-    larger.setAttribute('aria-label', 'Larger terminal text');
+    aria(smaller, 'Smaller terminal text');
+    aria(larger, 'Larger terminal text');
     const value = make('output', '', `${fontSize} px`); value.id = 'lanes-font-value';
     smaller.addEventListener('click', () => {fontSize = Math.max(14, fontSize - 1); applyFont();});
     larger.addEventListener('click', () => {fontSize = Math.min(24, fontSize + 1); applyFont();});
     row.append(smaller, value, larger);
-    document.querySelector('.zj-mobile-menu')?.prepend(row);
+    fetch('/enrol/site', {credentials: 'same-origin'}).then(r => r.json())
+      .then(({version: v}) => /^\d[\w.+-]{0,31}$/.test(v) && menuRow(`Lanes v${v}`)).catch(() => {});
   }
   function refresh() {
     if (!api || !shell) return;
@@ -360,18 +408,21 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     const name = tab?.name.replace(/ ☰$/, '') || 'Lanes';
     const picker = tab?.name.endsWith(' ☰');
     const pane = data()?.panes.find(p => p.pane_id === data()?.active_pane?.pane_id && !p.is_plugin);
-    const counts = parseCounts(pickerTitle(name));
+    const title = pickerTitle(name), counts = parseCounts(title);
     const chips = countParts(counts).map(([glyph, n]) => glyph + n).join(' ');
     text(heading, name);
-    text(subtitle, picker ? chips || 'Choose a lane to continue' : pane?.title || 'Your workspace');
+    if (!hintN) text(subtitle, picker ? chips || 'Choose a lane to continue' : pane?.title || 'Your workspace');
     lanesButton.setAttribute('aria-pressed', String(!!picker));
+    panesButton.hidden = pasteKey.hidden = !!picker;
     const needs = counts ? counts.approval + counts.input : 0;
     if (needs) lanesButton.dataset.count = String(needs); else delete lanesButton.dataset.count;
-    updateLaneFilterBar(picker);
-    const quick = active && !picker;
+    updateLaneFilterBar(tab?.name, picker);
+    send();
+    const quick = active && (!picker || / · [›>] \w+$/.test(title) && 2);
     if (quick !== quickOn) {
       quickOn = quick;
       quickRow.hidden = !quick;
+      for (const key of quickRow.children) key.hidden = quick > 1 && !['⏎', 'y', 'Esc'].includes(key.textContent);
       root.style.setProperty('--lanes-quick', quick ? '48px' : '0px');
       resize();
     }
@@ -379,7 +430,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     renderCards();
   }
   function connect() {
-    if (api || !window.__zjMobileUi || !window.term || !window.__zjSoftKbdCapture?.element) return;
+    if (api || !window.__zjMobileUi || !window.term || !kbd()?.element) return;
     if (!window.__zjMobileUi.getState()?.data?.tabs?.length) return;
     api = window.__zjMobileUi; term = window.term;
     build(); applyFont(); applyTheme();
@@ -396,7 +447,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
     const token = document.getElementById('token');
     if (!token || token.dataset.lanes) return;
     token.dataset.lanes = 'true';
-    token.autocomplete = 'current-password'; token.setAttribute('aria-label', 'Login token');
+    token.autocomplete = 'current-password'; aria(token, 'Login token');
     token.closest('.security-modal-content').querySelector('h3').textContent = 'Connect to Lanes';
     token.closest('.security-modal-content').querySelector('.submit-btn').textContent = 'Connect';
   }
@@ -412,6 +463,7 @@ if (typeof module === 'object') module.exports = {laneShellMode};
   });
   document.addEventListener('focusout', () => requestAnimationFrame(viewport));
   new MutationObserver(() => {styleLogin(); connect();}).observe(document.body, {childList: true});
-  const awaitingClient = setInterval(() => {connect(); if (api) clearInterval(awaitingClient);}, 200);
-  styleLogin(); connect();
+  function tick() { connect(); send(); if (hintN && !--hintN) refresh(); if (api && !hintN && queue[0] !== null) timer = clearInterval(timer); }
+  function arm() { timer ||= setInterval(tick, 200); }
+  arm(); styleLogin(); connect();
 })();

package/payload/lanes/workspaces.example/README.md

@@ -24,7 +24,9 @@ A lane is whatever the registry says it is: `lanes sync` (every two minutes, rea
 terminal into a lane with a stable id `<board>--<slug of the terminal name>` (with the repository `prefix`). A
 `displayNames` entry, which the sidebar `R` key and `lanes rename <lane-id> <name>` write into the repository's block
 of `workspaces.<board>.json` (first write keeps a `.bak-<UTC>` copy beside it), changes only the shown name, never the
-id. Add a terminal to `.vscode/terminals.json` for an editor-defined lane.
+id. The repository can also name a lane itself with `lanes.terminals[<name>].displayName` in its `terminals.json`;
+the manifest's `displayNames` entry wins over it, and a `displayName` another lane on the board already answers to is
+ignored (the lane keeps its title). Add a terminal to `.vscode/terminals.json` for an editor-defined lane.
 Alternatively, use **+** beside a discovered session to register its existing binding and ID in a workspace
 using the same container. Sync includes these local registrations; they never run a create command.
 Repository declarations take precedence when they declare the same binding. Legacy Docker shells cannot be adopted.