@leftoff/cli 0.9.17-beta.5 → 0.9.17-beta.6

package/CHANGELOG.md

@@ -4,6 +4,7 @@ What changed in Leftoff (called Checkpoints until 0.4.5), newest first. The boar
 
 ## Unreleased
 - **Walkthrough: file status, standard diff colours, steadier scrolling.** Files show added, modified, deleted or renamed as GitHub-style square icons (+, dot, −, arrow) with the word in a tip. Diffs use GitHub's green and red everywhere, a step stronger in the line numbers. In Files, the file list and the diff scroll separately (on a phone the list folds above the diff). A slide no longer jumps back to the top when the session updates in the background, and the slides / one-page button has a tip.
+- **The left nav on every screen.** The sidebar no longer steps aside in full screen: it stays beside a session, the walkthrough, Settings and PRs, so there's no detour through Board. Its button at the bottom (or ⌘B, Ctrl+B off a Mac, or [ when you're not typing) collapses it to a slim rail of icons, each with its name on hover, and expands it again; it's remembered on this device and opening a session never changes it. The current page is marked by a filled pill and a bar, not colour alone. When the window is too narrow, or the session panel leaves the chat too little room, it collapses for that view and comes back when there's room, without changing your choice. On a phone, ☰ in full screen's bar opens the nav as a drawer (close it with the scrim, Esc, a swipe left or by picking a page); in a Home Screen app or a browser other than Safari, a swipe in from the left edge opens it too (Safari keeps that edge for Back). Reload the board after updating.
 - **The downloaded walkthrough shows its code again.** In the .html slideshow, the hidden slide switches shared a style with the diff lines, so every code line was hidden and slides showed only their notes.
 - **Walk me through it.** Next to Catch me up in a session's panel, **Walk me through it** opens the session's changes as a story in place of the chat (‹ Chat goes back): a one-line summary ("9 files · 2 that matter · ~2 min read"), a bar of Core, Supporting, Mechanical and Generated drawn with a pattern and a word as well as a colour, then the changes in reading order. Core steps show their code; Supporting steps are one line with **Show code**. Things worth a second look sit under the line they mean with a glyph and a word (Look closely, Assumption, Untested), and the line is marked in the gutter. Tests that only follow along, imports, whitespace, renames, lockfiles and the same edit repeated in many files fold into **Safe to skip** groups, and a line at the end says every changed line is in a step or a group. Read since the last checkpoint, the whole session, or the session's PR (the newest checkpoint on the timeline also has **Walk through since here**). **Files** shows the plain diff file by file. Filter to **Look closely**, **Mark reviewed** each step ("1 of 4 reviewed", kept in the session's record like a pin, on every Mac), move with j and k, and **Ask about this change…** puts your question, with its file and line, in the chat box. The eye on the session's tab and board card says how many things are left to look closely at. A big change gets a file map, and is read folder by folder. **Download .html** saves one self-contained page; **Copy as Markdown** is ready to paste into a PR. On a phone it's a tall sheet. Catch me up and Walk me through it always fit in the panel, never clipped: in a narrow panel "Away 3h" becomes a small line under Catch me up, and narrower still they stack. On a desktop its controls are compact and sit on one row with the exports (dimmed, with a reason, when there's nothing to export yet); if nothing changed since the last checkpoint it shows the whole session instead of a dead end. Who writes it is set under Settings → Models & summaries (below); with no model, the plain diff and a note. After updating, run `leftoff restart`.
 - **A session opens full screen, with its page beside the chat.** Opening a session from a card, an Open chip, a tab or a link lands in full-screen Live. On the right, a panel for that session: its name, status, repo · branch and machine; **Catch me up** at the top ("Away 3 hours · Catch me up" after time away) with **Checkpoint now** beside it; then checkpoints (newest first), what it did and details; a Terminal toggle at the bottom. Timeline, Copy resume, Copy Live resume and Done are in its ⋯. Hide it to a slim rail with ⌘\ or its chevron; it stays the way you left it. On a phone it's a sheet along the bottom that shows one line ("Working · 4 checkpoints") and Catch me up; tap it to pull it up. Between phone and laptop widths it starts as the rail, so the chat has room, until you open it. The separate session page is gone, so there's one layout. The Board tab (or Back) goes to the board; Esc in the message box clears a suggestion and no longer leaves.

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.17-beta.5",
+  "version": "0.9.17-beta.6",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "One Silly App"

package/mod/hooks/register.js

@@ -28,7 +28,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.9.17-beta.5' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.17-beta.6' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.17-beta.5",
+  "version": "0.9.17-beta.6",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -2862,12 +2862,21 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .tab-all[hidden] { display: none; }
 }
 @media (min-width: 700px) and (pointer: coarse) { .tab-keep { opacity: 1; } }
-/* the rail as icons (700–1099px): the labels stay for screen readers */
+/* the rail as icons: collapsed by you or by a short room (html.nav-slim, ui/navrail.js); before the
+   script runs, 700–1099px starts that way. The labels stay for screen readers. */
 @media (min-width: 700px) and (max-width: 1099.98px) {
-  :root { --rail-w: 64px; }
-  .tabs a .lbl, .topright .lbl, .topright .sb-lbl, .topright .health .label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
-  .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health { min-height: 48px; padding: 6px 2px; }
-  .navcount { left: calc(50% + 2px); }
+  html:not(.nav-ready) { --rail-w: 56px; }
+  html:not(.nav-ready) :is(.tabs a .lbl, .topright .lbl, .topright .sb-lbl, .topright .health .label) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+}
+@media (min-width: 700px) {
+  html.nav-slim { --rail-w: 56px; }
+  html.nav-slim :is(.tabs a .lbl, .topright .lbl, .topright .sb-lbl, .topright .health .label) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+  html.nav-slim :is(.tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health) { min-height: 44px; padding: 6px 2px; }
+  html.nav-slim .navcount { left: calc(50% + 2px); top: 1px; }
+  html.nav-slim .brand .logo { width: 26px; height: 26px; }
+}
+@media (min-width: 700px) and (hover: hover) and (pointer: fine) { /* 44px is for fingers */
+  html.nav-slim :is(.tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health) { min-height: 34px; padding: 4px 2px; }
 }
 /* phones (under 700px): the Open row on the board, ‹ N of M › on a session page */
 @media (max-width: 699.98px) {
@@ -3980,13 +3989,11 @@ a.fact.fact-link[data-tip]::after { content: attr(data-tip); display: none; posi
 
 /* ------------------------------------------------------------ 0.9.14 full screen keeps the open tabs
    From 700px: the board's own tab bar stays pinned at the top, full screen fills the
-   space under it, and the left rail steps aside until you leave full screen.
+   space under it and beside the left rail (0.9.18: the rail no longer steps aside).
    Under 700px (no tab bar there): one row of compact chips under the bar, 44px tall,
    never two rows: it scrolls sideways. */
 @media (min-width: 700px) {
-  html.live-full body { padding-left: 0; }
-  html.live-full .top { display: none !important; }
-  html.live-full .tabstrip { position: fixed; top: 0; left: 0; right: 0; z-index: 33; }
+  html.live-full .tabstrip { position: fixed; top: 0; left: calc(var(--rail-w) + env(safe-area-inset-left)); right: 0; z-index: 33; } /* 0.9.18: the rail stays beside full screen */
   html.live-full .live-box.full { top: calc(var(--lf-top, 0px) + var(--lf-bar, 44px)); height: calc(var(--lf-h, 100vh) - var(--lf-bar, 44px)); height: calc(var(--lf-h, 100dvh) - var(--lf-bar, 44px)); }
   .lf-tabs { display: none !important; }
 }
@@ -4935,3 +4942,64 @@ details[open] > summary .wt-g-chev { transform: rotate(90deg); }
 /* narrow / a phone: arrows and dots only */
 @media (max-width: 699.98px) { .wt-dnow, .wt-dcount, .wt-dl { display: none; } .wt-dnav { gap: 4px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); } .wt-dnav .btn { width: 44px; padding: 0; justify-content: center; } }
 @container (max-width: 560px) { .wt-dnow { display: none; } }
+
+/* ------------------------------------------------------------ 0.9.18 the left nav on every screen (ui/navrail.js)
+   From 700px the rail stays beside every page, full screen and the walkthrough too: expanded
+   (84px, icon over label) or collapsed (56px, icons with a tip), its toggle at the foot or [.
+   The current item: a filled pill and a bar at the rail's edge (shape, not color alone).
+   Under 700px: a menu button in full screen's bar (and an edge swipe) opens it as a drawer. */
+.navtoggle, .lf-menu { display: none; }
+.railtip { position: fixed; z-index: 60; left: 0; top: 0; transform: translateY(-50%); width: max-content; max-width: 260px; padding: 4px 8px; border-radius: 7px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font-size: 12px; line-height: 1.3; font-weight: 500; white-space: nowrap; pointer-events: none; animation: railtip-in .12s ease-out both; }
+@keyframes railtip-in { from { opacity: 0; } to { opacity: 1; } }
+.railtip[hidden] { display: none; }
+@media (min-width: 700px) {
+  html.live-full .top { z-index: 34; }
+  html.live-full .live-box.full { left: calc(var(--rail-w) + env(safe-area-inset-left)); }
+  .term-dock { left: calc(var(--rail-w) + env(safe-area-inset-left)); } /* the terminal docks beside the rail, its toggle stays reachable */
+  .top [data-tip]::after { display: none !important; } /* the rail scrolls and would cut a CSS tip off: one floating .railtip instead */
+  .tabs a.on::before, .topright .iconbtn.on::before { content: ''; position: absolute; left: -8px; top: 50%; width: 3px; height: 22px; transform: translateY(-50%); border-radius: 0 3px 3px 0; background: var(--accent); }
+  .topright .navtoggle { order: 10; display: flex; color: var(--faint); }
+  .topright .navtoggle:hover { color: var(--text); }
+  .topright .navtoggle[aria-disabled="true"] { opacity: .55; cursor: default; }
+  .topright .navtoggle[aria-disabled="true"]:hover { background: none; color: var(--faint); }
+  .top :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  html.nav-anim .top { transition: width .18s ease; }
+  html.nav-anim body { transition: padding-left .18s ease; }
+  html.nav-anim .live-box.full, html.nav-anim .tabstrip, html.nav-anim .term-dock { transition: left .18s ease; }
+  .navdrawer, .navscrim { display: none !important; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .railtip { animation: none; }
+  html.nav-anim .top, html.nav-anim body, html.nav-anim .live-box.full, html.nav-anim .tabstrip, html.nav-anim .term-dock { transition: none; }
+}
+@media (max-width: 699.98px) {
+  .live-fbar .lf-menu { display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; border-color: transparent; background: none; box-shadow: none; color: var(--muted); }
+  .live-fbar .lf-menu .ic { width: 20px; height: 20px; margin: 0; }
+  .live-fbar .lf-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .live-fbar .lf-menu + .live-fs-x { margin-left: -6px; }
+  .navtoggle { display: none !important; }
+}
+.navscrim { position: fixed; inset: 0; z-index: 70; background: rgba(8, 10, 16, .42); opacity: 0; transition: opacity .2s ease; -webkit-tap-highlight-color: transparent; }
+.navscrim.open { opacity: 1; }
+.navscrim[hidden], .navdrawer[hidden] { display: none; }
+.navdrawer { position: fixed; z-index: 71; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); display: flex; flex-direction: column; box-sizing: border-box; padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: var(--bg); border-right: 1px solid var(--line); box-shadow: 0 0 40px rgba(0, 0, 0, .25); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform .2s ease; outline: none; }
+.navdrawer.open { transform: none; }
+@media (prefers-reduced-motion: reduce) { .navdrawer, .navscrim { transition: none; } }
+html.nav-drawer-open, html.nav-drawer-open body { overflow: hidden; }
+.nd-head { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 6px; padding: 0 0 6px 8px; border-bottom: 1px solid var(--line); }
+.nd-head .logo { width: 22px; height: 22px; }
+.nd-title { flex: 1 1 auto; font-size: 15px; font-weight: 650; color: var(--text); }
+.nd-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
+.nd-x:hover { color: var(--text); background: var(--bg2); }
+.nd-x .ic { width: 18px; height: 18px; }
+.nd-list { display: flex; flex-direction: column; gap: 2px; }
+.nd-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--text2); font-size: 15px; font-weight: 550; text-decoration: none; -webkit-tap-highlight-color: transparent; }
+.nd-item .ic { flex: none; width: 20px; height: 20px; }
+.nd-item:hover { background: var(--bg2); color: var(--text); }
+.nd-item.on { background: var(--rail-on); color: var(--text); }
+.nd-item.on .ic { color: var(--accent); }
+.nd-item.on::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 22px; transform: translateY(-50%); border-radius: 0 3px 3px 0; background: var(--accent); }
+.nd-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nd-cur { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
+.nd-n { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 650; line-height: 1; }
+.nd-item:focus-visible, .nd-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

package/ui/app.js

@@ -71,6 +71,209 @@ import { recapLineHtml, beforeClearHtml } from './recap-line.js' // 0.9.15 Claud
 import { Presence, cardRows, awayWords } from './away.js' // 0.9.15 a card shows more the longer you've been away
 import { backLine, backLineHtml, BACK_PREFIX, BACK_AWAY_MS } from './back-line.js' // 0.9.15 the recap above the Live composer
 import { glyphState, glyphHtml, glyphWords, lastReplyOf, seenAtFor, ensureSeenBase, markSeen, GLYPH_LABEL, offlineWords, offlineTip, waitingOnYou } from './sglyph.js' // 0.9.14 status glyphs
+import { createNavStore, navState, toggleWords, isNavKey, navKeyLabel, safariOwnsEdge, edgeStart, swipeIntent, drawerHtml, RAIL_MIN, RAIL_W_SLIM } from './navrail.js'
+
+// ------------------------------------------------------------ 0.9.18 the left nav on every screen (ui/navrail.js)
+// From 700px the rail stays beside every page (full screen and the walkthrough
+// too), expanded or collapsed by its toggle or [ and remembered; a short room
+// collapses it for that view without touching the choice. Under 700px a menu
+// button (or a swipe in from the left edge where Safari doesn't own it) opens
+// the nav as a drawer.
+const navStore = createNavStore(window.localStorage)
+const navUi = { shown: null, drawer: false, opener: null, closeT: 0, animT: 0, tipT: 0, tipFor: null, sw: null }
+const navRailQ = window.matchMedia('(min-width: ' + RAIL_MIN + 'px)')
+const navReduced = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+const navMac = /Mac|iP(hone|ad|od)/.test(navigator.platform || navigator.userAgent)
+const navEdgeOk = !safariOwnsEdge(navigator.userAgent, navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches)
+// the room the session panel works in: the window less the (at least slim) rail
+function fsViewport() { return window.innerWidth - (navRailQ.matches ? RAIL_W_SLIM : 0) }
+// the session panel open beside a full-screen chat, else 0
+function navSideWidth() {
+  const de = document.documentElement, side = document.getElementById('fsSide')
+  if (!side || !de.classList.contains('live-full') || side.classList.contains('collapsed')) return 0
+  return Math.round(side.getBoundingClientRect().width) || 0
+}
+function applyNav() {
+  const st = navState({ width: window.innerWidth, saved: navStore.collapsed(), side: navSideWidth() })
+  const de = document.documentElement
+  de.classList.add('nav-ready')
+  de.classList.toggle('nav-slim', st.rail && st.collapsed)
+  de.classList.toggle('nav-auto', st.rail && st.auto)
+  const b = document.getElementById('navToggle')
+  if (b) {
+    const w = toggleWords(st, navKeyLabel(navMac))
+    b.setAttribute('aria-expanded', st.collapsed ? 'false' : 'true')
+    b.setAttribute('aria-label', w.label)
+    b.setAttribute('aria-disabled', st.auto ? 'true' : 'false')
+    b.dataset.tip = w.tip
+    const lbl = b.querySelector('.lbl')
+    if (lbl) lbl.textContent = st.collapsed ? 'Expand' : 'Collapse'
+    if (b.dataset.icon !== w.icon) { b.dataset.icon = w.icon; const svg = b.querySelector('svg'); if (svg) svg.outerHTML = icon(w.icon) }
+    if (navUi.tipFor === b) railTipShow(b, true)
+  }
+  const changed = !navUi.shown || navUi.shown.collapsed !== st.collapsed || navUi.shown.rail !== st.rail
+  navUi.shown = st
+  if (st.rail && navUi.drawer) closeDrawer(false)
+  return changed
+}
+function toggleNav() {
+  const st = navUi.shown || navState({ width: window.innerWidth, saved: navStore.collapsed(), side: navSideWidth() })
+  if (!st.rail) return false
+  if (st.auto) { const b = document.getElementById('navToggle'); if (b) railTipShow(b, true); return false } // no room: say so, change nothing
+  const de = document.documentElement
+  if (!navReduced()) { de.classList.add('nav-anim'); clearTimeout(navUi.animT); navUi.animT = setTimeout(() => de.classList.remove('nav-anim'), 260) }
+  navStore.set(!st.collapsed)
+  applyNav()
+  return true
+}
+// one floating tip for the rail (the rail scrolls, so a CSS ::after would be cut off at its edge)
+function railTipShow(el, now) {
+  const tip = document.getElementById('railTip')
+  if (!tip || !el || !navRailQ.matches) return
+  const text = el.dataset.tip || ''
+  const lbl = el.querySelector('.lbl, .sb-lbl, .label')
+  const words = lbl ? lbl.textContent.trim() : ''
+  // expanded, the label's already there; the tip shows only when it says more
+  if (!text || (!document.documentElement.classList.contains('nav-slim') && text === words)) { railTipHide(); return }
+  clearTimeout(navUi.tipT)
+  const show = () => {
+    if (!el.isConnected) return
+    tip.textContent = text
+    tip.hidden = false
+    const r = el.getBoundingClientRect()
+    const rail = document.getElementById('navRail')
+    tip.style.left = Math.round((rail ? rail.getBoundingClientRect().right : r.right) + 6) + 'px'
+    tip.style.top = Math.round(r.top + r.height / 2) + 'px'
+    navUi.tipFor = el
+  }
+  if (now) show(); else navUi.tipT = setTimeout(show, 350)
+}
+function railTipHide() {
+  clearTimeout(navUi.tipT)
+  const tip = document.getElementById('railTip')
+  if (tip) tip.hidden = true
+  navUi.tipFor = null
+}
+const navTipTarget = (t) => t && t.closest && t.closest('#navRail [data-tip]:not(#needsTab)') // Needs you has Quick look on hover
+document.addEventListener('pointerover', (e) => {
+  if (e.pointerType === 'touch') return
+  const el = navTipTarget(e.target)
+  if (!el) return
+  if (el !== navUi.tipFor) railTipShow(el, false)
+})
+document.addEventListener('pointerout', (e) => {
+  const el = navTipTarget(e.target)
+  if (el && !(e.relatedTarget && el.contains(e.relatedTarget)) && document.activeElement !== el) railTipHide()
+})
+document.addEventListener('focusin', (e) => {
+  const el = navTipTarget(e.target)
+  if (el && el.matches(':focus-visible')) railTipShow(el, true)
+  else if (navUi.tipFor && navUi.tipFor !== el) railTipHide()
+})
+document.addEventListener('focusout', (e) => { if (navTipTarget(e.target)) railTipHide() })
+window.addEventListener('scroll', railTipHide, true)
+document.addEventListener('click', (e) => {
+  const t = e.target
+  if (!t || !t.closest) return
+  if (t.closest('#navToggle')) { e.preventDefault(); toggleNav(); return }
+  const open = t.closest('[data-nav-drawer]')
+  if (open) { e.preventDefault(); if (navUi.drawer) closeDrawer(true); else openDrawer(open); return }
+  if (!navUi.drawer) return
+  if (t.closest('#navScrim') || t.closest('[data-nd-close]')) { e.preventDefault(); closeDrawer(true); return }
+  if (t.closest('#navDrawer .nd-item')) closeDrawer(false) // the link navigates; the page it opens takes focus
+})
+// the drawer (phones): the rail's destinations over the page, a scrim behind
+function navDrawerItems() {
+  const items = []
+  const take = (a) => {
+    if (!a) return
+    const lbl = a.querySelector('.lbl')
+    const n = a.querySelector('.navcount')
+    items.push({ href: a.getAttribute('href'), route: a.dataset.route || '', label: lbl ? lbl.textContent.trim() : a.getAttribute('aria-label') || '', svg: (a.querySelector('svg') || {}).outerHTML || '', on: a.classList.contains('on'), count: n && !n.hidden ? n.textContent.trim() : '' })
+  }
+  for (const a of document.querySelectorAll('#navRail .tabs a[data-route]')) take(a)
+  for (const id of ['newTab', 'wnTab', 'setTab']) take(document.getElementById(id))
+  return items
+}
+function openDrawer(opener) {
+  if (navRailQ.matches || navUi.drawer) return
+  const d = document.getElementById('navDrawer'), s = document.getElementById('navScrim')
+  if (!d || !s) return
+  clearTimeout(navUi.closeT)
+  d.innerHTML = drawerHtml(navDrawerItems())
+  navUi.opener = opener || (document.activeElement !== document.body ? document.activeElement : null)
+  d.hidden = false; s.hidden = false
+  void d.offsetWidth
+  d.classList.add('open'); s.classList.add('open')
+  document.documentElement.classList.add('nav-drawer-open')
+  navUi.drawer = true
+  for (const b of document.querySelectorAll('[data-nav-drawer]')) b.setAttribute('aria-expanded', 'true')
+  const f = d.querySelector('.nd-item.on') || d.querySelector('.nd-item')
+  if (f) f.focus({ preventScroll: true })
+}
+function closeDrawer(restore) {
+  if (!navUi.drawer) return
+  const d = document.getElementById('navDrawer'), s = document.getElementById('navScrim')
+  navUi.drawer = false
+  d.classList.remove('open'); s.classList.remove('open')
+  document.documentElement.classList.remove('nav-drawer-open')
+  for (const b of document.querySelectorAll('[data-nav-drawer]')) b.setAttribute('aria-expanded', 'false')
+  const done = () => { if (navUi.drawer) return; d.hidden = true; s.hidden = true; d.innerHTML = '' }
+  clearTimeout(navUi.closeT)
+  if (navReduced()) done(); else navUi.closeT = setTimeout(done, 200)
+  const o = navUi.opener
+  navUi.opener = null
+  if (restore && o && o.isConnected) o.focus({ preventScroll: true })
+  else if (restore) { const m = document.querySelector('[data-nav-drawer]'); if (m && m.offsetParent) m.focus({ preventScroll: true }) }
+}
+document.addEventListener('keydown', (e) => {
+  if (navUi.drawer) {
+    const d = document.getElementById('navDrawer')
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeDrawer(true); return }
+    if (e.key === 'Tab') { // focus stays inside while it's open
+      const f = [...d.querySelectorAll('a[href], button:not([disabled])')]
+      if (!f.length) return
+      const i = f.indexOf(document.activeElement)
+      if (e.shiftKey && (i <= 0)) { e.preventDefault(); f[f.length - 1].focus() }
+      else if (!e.shiftKey && (i === -1 || i === f.length - 1)) { e.preventDefault(); f[0].focus() }
+    }
+    return
+  }
+  if (e.defaultPrevented) return
+  const t = e.target
+  const term = !!(t && t.closest && t.closest('.xterm, .term-dock'))
+  const typing = term || !!(t && t.closest && t.closest('input, textarea, select, [contenteditable]'))
+  if (!isNavKey(e, { typing, term, mac: navMac }) || !navRailQ.matches) return
+  if (document.querySelector('.lo-menu, .cmdk:not([hidden]), .lightbox:not([hidden]), .pdfview:not([hidden])')) return
+  if ([...document.querySelectorAll('[role="dialog"][aria-modal="true"]')].some((d) => d.id !== 'navDrawer' && !d.closest('[hidden]') && d.getClientRects().length)) return
+  e.preventDefault()
+  toggleNav()
+}, true)
+// a swipe in from the left edge opens it, a swipe left on it closes it (phones; not where Safari's back-swipe owns the edge)
+function navOwnsTouch(x) { return !navRailQ.matches && (navUi.drawer || (navEdgeOk && edgeStart(x))) }
+document.addEventListener('touchstart', (e) => {
+  navUi.sw = null
+  if (navRailQ.matches || e.touches.length !== 1) return
+  const p = e.touches[0]
+  if (navUi.drawer) { navUi.sw = { x: p.clientX, y: p.clientY, open: true }; return }
+  if (navEdgeOk && edgeStart(p.clientX)) navUi.sw = { x: p.clientX, y: p.clientY, open: false }
+}, { passive: true })
+document.addEventListener('touchend', (e) => {
+  const sw = navUi.sw
+  navUi.sw = null
+  if (!sw || !e.changedTouches.length) return
+  const p = e.changedTouches[0]
+  const what = swipeIntent(p.clientX - sw.x, p.clientY - sw.y, sw.open)
+  if (what === 'open') openDrawer(null)
+  else if (what === 'close') closeDrawer(true)
+}, { passive: true })
+{
+  let raf = 0
+  window.addEventListener('resize', () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; railTipHide(); applyNav() }) })
+  navRailQ.addEventListener('change', () => { if (navRailQ.matches) closeDrawer(false) })
+}
+applyNav()
+
 const $app = document.getElementById('app')
 // 0.9.17 Walk me through it: which session shows it, and its view (this page only; the open one survives a reload)
 const wtUi = { sid: null, scope: new Map(), view: 'story', filter: 'all', data: new Map(), loading: new Set(), error: new Map(), cur: new Map(), code: new Set(), groups: new Set(), pending: [], ask: '', node: null, sig: '', restored: false, fellBack: new Set() }
@@ -1887,7 +2090,7 @@ function paintNeedsCount(n) {
   const c = document.getElementById('needsCount')
   if (c) { c.hidden = !n; c.textContent = badgeText(n) }
   const tab = document.getElementById('needsTab')
-  if (tab) { tab.classList.toggle('has-needs', !!n); tab.title = n ? n + ' waiting on you' : 'Nothing waiting on you' }
+  if (tab) { tab.classList.toggle('has-needs', !!n); tab.dataset.tip = n ? 'Needs you · ' + n + ' waiting' : 'Needs you' }
   if (quickLookOpen() && paintNeedsCount.count !== n) loadQuickLook()
   paintNeedsCount.count = n
   document.title = (n ? '(' + n + ') ' : '') + 'Leftoff'
@@ -2380,7 +2583,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   side += answeredList(s)
   const foot = '<div class="fs-foot"><button type="button" class="btn fs-term" data-term-toggle aria-label="Terminal" data-tip="Terminal (⌃`)">' + icon('terminal') + 'Terminal</button>' + termTabButtonHtml(s) + '</div>' // Open terminal (a window on the Mac): the head's ⋯
   const label = fsPeekWords(s)
-  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayMs)) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(window.innerWidth), viewport: window.innerWidth }, { esc, icon })
+  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayMs)) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(fsViewport()), viewport: fsViewport() }, { esc, icon })
 }
 // The middle for a session with no Live thread: the same full-screen frame and bar, and what it can say there.
 // "Away 3 hours" → "Away 3h", so Catch me up and Checkpoint now share one row
@@ -2606,26 +2809,27 @@ function exitFull(id) {
 const fsResize = { drag: null, raf: 0 }
 function applyFsWidth(w) {
   const de = document.documentElement
-  const n = clampSideWidth(w, window.innerWidth)
+  const n = clampSideWidth(w, fsViewport())
   if (n === SIDE_W_DEFAULT && fsWidth.stored() == null) de.style.removeProperty('--fs-uw')
   else de.style.setProperty('--fs-uw', n + 'px')
-  for (const h of document.querySelectorAll('.fs-resize')) { h.setAttribute('aria-valuenow', String(n)); h.setAttribute('aria-valuemax', String(sideMax(window.innerWidth))) }
+  for (const h of document.querySelectorAll('.fs-resize')) { h.setAttribute('aria-valuenow', String(n)); h.setAttribute('aria-valuemax', String(sideMax(fsViewport()))) }
+  applyNav()
   return n
 }
-applyFsWidth(fsWidth.shown(window.innerWidth))
-window.addEventListener('resize', () => { if (!fsResize.drag) applyFsWidth(fsWidth.shown(window.innerWidth)) })
+applyFsWidth(fsWidth.shown(fsViewport()))
+window.addEventListener('resize', () => { if (!fsResize.drag) applyFsWidth(fsWidth.shown(fsViewport())) })
 document.addEventListener('pointerdown', (e) => {
   const h = e.target.closest && e.target.closest('.fs-resize')
   if (!h || e.button !== 0 || window.innerWidth < WIDE_MIN) return
   e.preventDefault()
   try { h.setPointerCapture(e.pointerId) } catch {}
-  fsResize.drag = { id: e.pointerId, x: e.clientX, w: fsWidth.shown(window.innerWidth), now: null, h }
+  fsResize.drag = { id: e.pointerId, x: e.clientX, w: fsWidth.shown(fsViewport()), now: null, h }
   document.documentElement.classList.add('fs-resizing')
 })
 document.addEventListener('pointermove', (e) => {
   const d = fsResize.drag
   if (!d || e.pointerId !== d.id) return
-  d.now = clampSideWidth(d.w + (d.x - e.clientX), window.innerWidth) // the handle is the panel's left edge: left is wider
+  d.now = clampSideWidth(d.w + (d.x - e.clientX), fsViewport()) // the handle is the panel's left edge: left is wider
   if (!fsResize.raf) fsResize.raf = requestAnimationFrame(() => { fsResize.raf = 0; if (fsResize.drag && fsResize.drag.now != null) applyFsWidth(fsResize.drag.now) })
 })
 const fsResizeEnd = (e) => {
@@ -2634,7 +2838,7 @@ const fsResizeEnd = (e) => {
   fsResize.drag = null
   document.documentElement.classList.remove('fs-resizing')
   try { d.h.releasePointerCapture(d.id) } catch {}
-  if (d.now != null && d.now !== d.w) applyFsWidth(fsWidth.set(d.now, window.innerWidth))
+  if (d.now != null && d.now !== d.w) applyFsWidth(fsWidth.set(d.now, fsViewport()))
 }
 document.addEventListener('pointerup', fsResizeEnd)
 document.addEventListener('pointercancel', fsResizeEnd)
@@ -2642,7 +2846,7 @@ document.addEventListener('dblclick', (e) => { if (e.target.closest && e.target.
 document.addEventListener('keydown', (e) => {
   const h = e.target.closest && e.target.closest('.fs-resize')
   if (!h || e.metaKey || e.ctrlKey || e.altKey) return
-  const cur = fsWidth.shown(window.innerWidth)
+  const cur = fsWidth.shown(fsViewport())
   let next = null
   if (e.key === 'ArrowLeft') next = cur + SIDE_W_STEP
   else if (e.key === 'ArrowRight') next = cur - SIDE_W_STEP
@@ -2651,7 +2855,7 @@ document.addEventListener('keydown', (e) => {
   else if (e.key === 'Enter') { e.preventDefault(); fsWidth.reset(); applyFsWidth(SIDE_W_DEFAULT); return }
   if (next == null) return
   e.preventDefault()
-  applyFsWidth(fsWidth.set(Number.isFinite(next) ? next : sideMax(window.innerWidth), window.innerWidth))
+  applyFsWidth(fsWidth.set(Number.isFinite(next) ? next : sideMax(fsViewport()), fsViewport()))
 })
 // 0.9.16 the session panel: open, collapsed to its rail (⌘\, remembered), or on a phone a sheet
 function fsSideClasses() {
@@ -2660,6 +2864,7 @@ function fsSideClasses() {
   de.classList.toggle('fs-on', !!side)
   de.classList.toggle('fs-collapsed', !!side && side.classList.contains('collapsed'))
   de.classList.toggle('fs-sheet-up', !!side && side.classList.contains('sheet-up'))
+  applyNav() // 0.9.18: a session panel beside the chat can leave too little room for the expanded rail
 }
 function toggleFsSide(force) {
   const side = document.getElementById('fsSide')
@@ -2730,6 +2935,7 @@ document.addEventListener('keydown', (ev) => {
 function setFullClass(on) {
   document.documentElement.classList.toggle('live-full', !!on)
   if (on) fitFullViewport()
+  applyNav()
 }
 // The window as you see it: on a phone the keyboard takes the bottom of it,
 // and the composer stays just above the keyboard.
@@ -6637,10 +6843,10 @@ async function refreshHealth() {
     // the header shows this Mac's name; the rest is in the status popover (v0.5.9)
     const summary = h.sessionsOpen + ' open · ' + h.machine + ' · ' + h.summarizer
     el.querySelector('.label').textContent = h.machine
-    el.title = summary
+    el.dataset.tip = summary
     el.setAttribute('aria-label', 'Status: ' + summary)
     const brand = document.getElementById('brand')
-    if (brand) brand.title = 'Leftoff v' + h.version + (h.update && h.update.available ? ' · update available: v' + (h.update.remoteVersion || '?') : '')
+    if (brand) brand.dataset.tip = 'Leftoff v' + h.version + (h.update && h.update.available ? ' · update available: v' + (h.update.remoteVersion || '?') : '')
     paintTopDot()
     if (statusOpen()) paintStatus()
     paintNeedsCount(needsCountOf(h))
@@ -6656,8 +6862,8 @@ async function refreshHealth() {
     if (updateBar) updateBar.check(null) // a failed check changes nothing
     el.className = 'health down'
     el.querySelector('.label').textContent = e && e.code === 'login_required' ? 'not signed in' : 'daemon offline'
-    el.title = el.querySelector('.label').textContent
-    el.setAttribute('aria-label', 'Status: ' + el.title)
+    el.dataset.tip = el.querySelector('.label').textContent
+    el.setAttribute('aria-label', 'Status: ' + el.dataset.tip)
   }
 }
 
@@ -6667,7 +6873,7 @@ async function refreshHealth() {
 // Settings as icons. Nothing wraps or is cut off from 900px up.
 
 const isMac = /Mac|iP(hone|ad|od)/.test(navigator.platform || navigator.userAgent)
-{ const k = document.getElementById('searchKbd'); if (k) k.textContent = isMac ? '⌘K' : 'Ctrl K'; const b = document.getElementById('searchBtn'); if (b) b.title = 'Search (' + (isMac ? '⌘K' : 'Ctrl+K') + ' or /)' }
+{ const k = document.getElementById('searchKbd'); if (k) k.textContent = isMac ? '⌘K' : 'Ctrl K'; const b = document.getElementById('searchBtn'); if (b) b.dataset.tip = 'Search (' + (isMac ? '⌘K' : 'Ctrl+K') + ' or /)' }
 
 // The gear's dot: anything a Settings section would flag (an update, a failed digest, a feed that can't be pulled, sync trouble).
 function paintTopDot() {
@@ -6681,7 +6887,7 @@ function paintTopDot() {
   el.hidden = !all.length || (!warn && !(h.update && h.update.available))
   el.className = 'topdot' + (warn ? ' warn' : '')
   const why = all.flatMap((x) => x.why)
-  document.getElementById('setTab').title = 'Settings' + (why.length && !el.hidden ? ' · ' + why.join(' · ') : '')
+  document.getElementById('setTab').dataset.tip = 'Settings' + (why.length && !el.hidden ? ' · ' + why.join(' · ') : '')
   paintMoreDots()
 }
 
@@ -7206,6 +7412,7 @@ document.addEventListener('click', (e) => { if (e.target.closest && $app.contain
   document.addEventListener('touchstart', (e) => {
     sw = null
     if (!narrowQ.matches || tabsUi.route !== 's' || e.touches.length !== 1) return
+    if (navOwnsTouch(e.touches[0].clientX)) return // 0.9.18: the left edge (and the open drawer) belong to the nav drawer
     const t = e.target
     // a table (even one that fits) or a code block is for reading and scrolling sideways, not for changing sessions
     if (t.closest('input, textarea, select, [contenteditable], .lo-menu, .cmdk, .doc-viewer, .lightbox, .pdfview, .tabs, .lf-tabs, .moremenu, table, .doc-table, pre, #wtDeck, .wt-dnav') || scrollsSideways(t)) return

package/ui/icons.js

@@ -3,6 +3,9 @@
 // so they follow light and dark; always aria-hidden next to a text label.
 // index.html carries the nav's copies inline (no script needed to draw them).
 export const ICONS = {
+  "panel-left-close": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m16 15-3-3 3-3\"/>",
+  "panel-left-open": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m14 9 3 3-3 3\"/>",
+  "menu": "<path d=\"M4 5h16\"/> <path d=\"M4 12h16\"/> <path d=\"M4 19h16\"/>",
   "arrow-up": "<path d=\"m5 12 7-7 7 7\"/> <path d=\"M12 19V5\"/>",
   "eye": "<path d=\"M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z\"/> <circle cx=\"12\" cy=\"12\" r=\"3\"/>",
   "circle-help": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3\"/> <path d=\"M12 17h.01\"/>",

package/ui/index.html

@@ -20,29 +20,33 @@
   <link rel="stylesheet" href="app.css">
 </head>
 <body>
-  <header class="top">
-    <a class="brand" href="#/" id="brand" title="Leftoff" aria-label="Leftoff">
+  <header class="top" id="navRail">
+    <a class="brand" href="#/" id="brand" data-tip="Leftoff" aria-label="Leftoff">
       <img src="favicon.svg" class="logo" alt="" width="22" height="22">
       <span>Leftoff</span>
     </a>
     <nav class="tabs" aria-label="Sections">
-      <a href="#/" data-route="board"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/> <rect width="7" height="5" x="14" y="3" rx="1"/> <rect width="7" height="9" x="14" y="12" rx="1"/> <rect width="7" height="5" x="3" y="16" rx="1"/></svg><span class="lbl">Board</span></a>
-      <a href="#/waiting" data-route="waiting" id="needsTab" aria-haspopup="dialog" aria-expanded="false" aria-controls="quickLook"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
-      <a href="#/lists" data-route="lists" id="listsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 5h8"/> <path d="M13 12h8"/> <path d="M13 19h8"/> <path d="m3 17 2 2 4-4"/> <path d="m3 7 2 2 4-4"/></svg><span class="lbl">Lists</span><span class="navcount" id="listsCount" hidden></span></a>
-      <a href="#/prs" data-route="prs" id="prsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="18" cy="18" r="3"/> <circle cx="6" cy="6" r="3"/> <path d="M13 6h3a2 2 0 0 1 2 2v7"/> <line x1="6" x2="6" y1="9" y2="21"/></svg><span class="lbl">PRs</span></a>
-      <a href="#/timeline" data-route="timeline" class="tab-extra"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
-      <a href="#/digest" data-route="digest" class="tab-extra"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
+      <a href="#/" data-route="board" data-tip="Board"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/> <rect width="7" height="5" x="14" y="3" rx="1"/> <rect width="7" height="9" x="14" y="12" rx="1"/> <rect width="7" height="5" x="3" y="16" rx="1"/></svg><span class="lbl">Board</span></a>
+      <a href="#/waiting" data-route="waiting" id="needsTab" data-tip="Needs you" aria-haspopup="dialog" aria-expanded="false" aria-controls="quickLook"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
+      <a href="#/lists" data-route="lists" id="listsTab" data-tip="Lists"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 5h8"/> <path d="M13 12h8"/> <path d="M13 19h8"/> <path d="m3 17 2 2 4-4"/> <path d="m3 7 2 2 4-4"/></svg><span class="lbl">Lists</span><span class="navcount" id="listsCount" hidden></span></a>
+      <a href="#/prs" data-route="prs" id="prsTab" data-tip="PRs"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="18" cy="18" r="3"/> <circle cx="6" cy="6" r="3"/> <path d="M13 6h3a2 2 0 0 1 2 2v7"/> <line x1="6" x2="6" y1="9" y2="21"/></svg><span class="lbl">PRs</span></a>
+      <a href="#/timeline" data-route="timeline" class="tab-extra" data-tip="Timeline"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
+      <a href="#/digest" data-route="digest" class="tab-extra" data-tip="Digest"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
       <button type="button" class="tab-more" id="moreBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="moreMenu"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="1"/> <circle cx="19" cy="12" r="1"/> <circle cx="5" cy="12" r="1"/></svg><span class="lbl">More</span><span class="moredot" hidden></span></button>
     </nav>
     <div class="topright">
-      <button type="button" class="searchbtn" id="searchBtn" title="Search (⌘K)" aria-label="Search" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K /"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/> <path d="m21 21-4.3-4.3"/></svg><span class="sb-lbl">Search</span><kbd class="sb-kbd" id="searchKbd">⌘K</kbd></button>
+      <button type="button" class="searchbtn" id="searchBtn" data-tip="Search (⌘K)" aria-label="Search" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K /"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/> <path d="m21 21-4.3-4.3"/></svg><span class="sb-lbl">Search</span><kbd class="sb-kbd" id="searchKbd">⌘K</kbd></button>
       <a href="#/new" data-route="new" id="newTab" class="iconbtn newbtn" data-tip="New session" aria-label="New session"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14"/> <path d="M12 5v14"/></svg><span class="lbl">New session</span></a>
       <button type="button" id="termBtn" class="iconbtn termbtn" data-term-toggle data-tip="Terminal (⌃`)" aria-label="Terminal" aria-expanded="false" aria-controls="termDock" aria-keyshortcuts="Control+`"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19h8"/> <path d="m4 17 6-6-6-6"/></svg><span class="lbl">Terminal</span></button>
-      <button type="button" class="health" id="health" title="Status" aria-haspopup="dialog" aria-expanded="false" aria-controls="statusPop"><span class="dot"></span><span class="label">connecting…</span></button>
-      <a href="#/whats-new" data-route="whats-new" id="wnTab" class="iconbtn" title="What’s new" aria-label="What’s new"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span class="lbl">What’s new</span><span class="newdot" hidden></span></a>
-      <a href="#/settings" data-route="settings" id="setTab" class="iconbtn" title="Settings" aria-label="Settings"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span class="lbl">Settings</span><span class="topdot" hidden></span></a>
+      <button type="button" class="health" id="health" data-tip="Status" aria-haspopup="dialog" aria-expanded="false" aria-controls="statusPop"><span class="dot"></span><span class="label">connecting…</span></button>
+      <a href="#/whats-new" data-route="whats-new" id="wnTab" class="iconbtn" data-tip="What’s new" aria-label="What’s new"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span class="lbl">What’s new</span><span class="newdot" hidden></span></a>
+      <a href="#/settings" data-route="settings" id="setTab" class="iconbtn" data-tip="Settings" aria-label="Settings"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span class="lbl">Settings</span><span class="topdot" hidden></span></a>
+      <button type="button" class="iconbtn navtoggle" id="navToggle" aria-controls="navRail" aria-expanded="true" aria-label="Collapse the sidebar" aria-keyshortcuts="Meta+B Control+B [" data-tip="Collapse sidebar (⌘B)"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="18" height="18" x="3" y="3" rx="2"/> <path d="M9 3v18"/> <path d="m16 15-3-3 3-3"/></svg><span class="lbl">Collapse</span></button>
     </div>
   </header>
+  <div class="navscrim" id="navScrim" hidden></div>
+  <div class="navdrawer" id="navDrawer" role="dialog" aria-modal="true" aria-label="Menu" hidden></div>
+  <div class="railtip" id="railTip" role="tooltip" hidden></div>
   <div class="moremenu" id="moreMenu" role="menu" aria-label="More" hidden>
     <a href="#/timeline" data-route="timeline" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span>Timeline</span></a>
     <a href="#/digest" data-route="digest" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span>Digest</span></a>

package/ui/live-view.js

@@ -242,6 +242,8 @@ export function fullButtonHtml(id, { esc, icon }) {
 // name goes in as text (the caller fills .lf-title with textContent).
 export function fullBarHtml(id, { esc, icon, pills = '', stop = '', retitle = '', glyph = '' }) {
   return '<div class="live-fbar">' +
+    // 0.9.18 phones: the nav as a drawer (ui/navrail.js); from 700px the rail is beside full screen and this hides
+    '<button type="button" class="btn lf-menu" data-nav-drawer aria-label="Menu" aria-expanded="false" aria-controls="navDrawer" data-tip="Menu">' + icon('menu') + '</button>' +
     '<button type="button" class="btn live-fs-x" data-action="live-full-exit" data-id="' + esc(id) + '" aria-label="Back to the board" data-tip="Board">' + icon('chevron-left') + '</button>' + // 0.9.16 one layout: back is the board
     glyph + '<h2 class="lf-title"></h2>' + retitle + '<div class="lf-pills">' + pills + '</div>' + stop +
     // 0.9.15 the embedded terminal (ui/term.js): docked under full screen, which gets shorter

package/ui/navrail.js

@@ -0,0 +1,99 @@
+// 0.9.18 The left nav on every screen (feedback, Oct 28: "it seems weird that I
+// need to click on Board first to see the left hand nav").
+//
+// From 700px the rail stays beside every page, full screen and the walkthrough
+// included. Two widths: expanded (84px, icon over label, the rail as it always
+// was) and collapsed (56px, icons with a tip). The toggle at the rail's foot,
+// ⌘B, or [ when you're not typing, switches them, remembered on this device. When the
+// room is short (under 1100px, or a full-screen chat that would get narrower
+// than NAV_CHAT_MIN beside the session panel) the rail collapses for that view
+// only: your saved choice is untouched and comes back when there's room.
+//
+// Under 700px there's no rail: a menu button (and, in a Home Screen app or a
+// non-Safari browser, a swipe in from the left edge) opens the nav as a drawer
+// over the page. Safari's own back-swipe owns that edge in the browser, so there
+// the button is the way in.
+//
+// Pure functions and a tiny store (the unit tests use a fake storage); app.js wires them.
+
+export const NAV_KEY = 'lo-nav-v1' // '1' collapsed, '0' expanded (an explicit choice); none: expanded
+export const RAIL_MIN = 700 // from here the rail; under it the phone's bar and the drawer
+export const RAIL_ROOMY = 1100 // under this the rail is collapsed whatever you chose
+export const RAIL_W_OPEN = 84, RAIL_W_SLIM = 56
+export const NAV_CHAT_MIN = 560 // a full-screen chat keeps at least this beside an expanded rail
+export const EDGE_PX = 20 // a drawer swipe starts this close to the left edge
+export const SWIPE_MIN = 48 // and travels at least this far, mostly sideways
+
+export function createNavStore(storage) {
+  const stored = () => { try { const v = storage ? storage.getItem(NAV_KEY) : null; return v === '1' || v === '0' ? v : null } catch { return null } }
+  return {
+    collapsed: () => stored() === '1',
+    explicit: () => stored() != null,
+    set(collapsed) { try { storage && storage.setItem(NAV_KEY, collapsed ? '1' : '0') } catch {} },
+    toggle() { const c = stored() !== '1'; this.set(c); return c },
+  }
+}
+
+// What the rail shows now. width: the window's CSS width; saved: your choice
+// (true = collapsed); side: the full-screen session panel's width when it's open
+// beside the chat (0 when there's none, or it's a rail / collapsed).
+// → { rail, collapsed, auto } — auto: collapsed by the room, not by you.
+export function navState({ width = 0, saved = false, side = 0 } = {}) {
+  const w = Number(width) || 0
+  if (w < RAIL_MIN) return { rail: false, collapsed: false, auto: false }
+  const tight = w < RAIL_ROOMY || (side > 0 && w - RAIL_W_OPEN - side < NAV_CHAT_MIN)
+  if (saved) return { rail: true, collapsed: true, auto: false }
+  return { rail: true, collapsed: tight, auto: tight }
+}
+
+// The toggle's words for the state shown.
+export function toggleWords({ collapsed = false, auto = false } = {}, key = '⌘B') {
+  if (auto) return { label: 'Expand the sidebar', tip: 'Not enough room to expand here', icon: 'panel-left-open' }
+  return collapsed
+    ? { label: 'Expand the sidebar', tip: 'Expand sidebar (' + key + ')', icon: 'panel-left-open' }
+    : { label: 'Collapse the sidebar', tip: 'Collapse sidebar (' + key + ')', icon: 'panel-left-close' }
+}
+
+// ⌘B (Ctrl+B off a Mac) toggles the rail from anywhere, the composer included,
+// but not inside the terminal (Ctrl+B is tmux's); [ does too when you're not typing.
+// (⌘\ is the session panel's, ⌘⇧[ ] the tabs'.)
+export function isNavKey(ev, { typing = false, term = false, mac = true } = {}) {
+  if (!ev || ev.altKey) return false
+  const mod = mac ? ev.metaKey && !ev.ctrlKey : ev.ctrlKey && !ev.metaKey
+  if (mod && !ev.shiftKey && (ev.key === 'b' || ev.key === 'B')) return !term
+  return ev.key === '[' && !ev.metaKey && !ev.ctrlKey && !typing
+}
+export const navKeyLabel = (mac = true) => (mac ? '⌘B' : 'Ctrl+B')
+
+// Mobile Safari in the browser (not a Home Screen app): its back-swipe owns the left edge.
+export function safariOwnsEdge(ua = '', standalone = false) {
+  const s = String(ua)
+  const ios = /iP(hone|ad|od)/.test(s) || (/Macintosh/.test(s) && /Mobile/.test(s))
+  return ios && !standalone && /Safari/.test(s) && !/CriOS|FxiOS|EdgiOS/.test(s)
+}
+
+// A touch that starts this close to the left edge may open the drawer.
+export const edgeStart = (x, edge = EDGE_PX) => Number(x) >= 0 && Number(x) <= edge
+// What a finished swipe means: 'open' (rightwards from the edge), 'close'
+// (leftwards on the open drawer) or null (too short, or mostly up and down).
+export function swipeIntent(dx, dy, open) {
+  const x = Number(dx) || 0, y = Number(dy) || 0
+  if (Math.abs(x) < SWIPE_MIN || Math.abs(x) < Math.abs(y) * 1.5) return null
+  if (!open && x > 0) return 'open'
+  if (open && x < 0) return 'close'
+  return null
+}
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
+
+// The drawer: the nav's destinations as one list. items: [{ href, route, label, svg, on, count }]
+// (svg is the nav's own inline icon markup).
+export function drawerHtml(items = [], { title = 'Leftoff' } = {}) {
+  const row = (it) => '<a class="nd-item' + (it.on ? ' on' : '') + '" href="' + esc(it.href) + '"' + (it.route ? ' data-route="' + esc(it.route) + '"' : '') + (it.on ? ' aria-current="page"' : '') + '>' +
+    (it.svg || '') + '<span class="nd-lbl">' + esc(it.label) + '</span>' + (it.on ? '<span class="nd-cur">Current</span>' : '') +
+    (it.count ? '<span class="nd-n" aria-label="' + esc(it.count + ' waiting') + '">' + esc(String(it.count)) + '</span>' : '') + '</a>'
+  return '<div class="nd-head"><img src="favicon.svg" class="logo" alt="" width="22" height="22"><span class="nd-title">' + esc(title) + '</span>' +
+    '<button type="button" class="nd-x" data-nd-close aria-label="Close the menu" data-tip="Close (Esc)"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></div>' +
+    '<nav class="nd-list" aria-label="Sections">' + items.map(row).join('') + '</nav>'
+}