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

package/ui/app.js

@@ -34,6 +34,7 @@ import { boardEmptyHtml, boardIsBrandNew, timelineEmptyHtml, digestFirstHtml, cp
 import { copyIconClick } from './copy-icon.js' // 0.9.15 Copy branch name // 0.9.9 the session page's info cards
 import { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
 import { paintKeyed, forgetPaint, UNITS as PAINT_UNITS } from './keyed-paint.js'
+import { createScrollKeep } from './scroll-keep.js' // 0.9.18 every scroll box keeps its place through redraws
 import { needsLine, needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml, askDocked, askDockHtml, askSlimHtml, askRows, askBottom } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
@@ -71,7 +72,214 @@ 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.18 (ui/scroll-keep.js): a redraw anywhere (a live update, a poll) puts every scroll box, the focus
+// and an open <details> back where you had them; the app's own positioning (stick to bottom, a new page) wins
+const scrollKeep = createScrollKeep()
+scrollKeep.start()
 // 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() }
 // 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
@@ -1887,7 +2095,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'
@@ -2320,16 +2528,25 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   // 0.9.17 Walk me through it: in place of the chat (the bar and tabs stay); ‹ Chat goes back
   if (wtUi.sid === s.id && isFullLive(s.id) && !s.agent) center = liveOpenHtml(s, liveV, '') + '<div class="wt-mount" id="wtMount" data-sid="' + esc(s.id) + '"></div></section>'
   // ---- the sidebar
+  // 2026-10-28 one aligned head row: › hide, then the title (two lines at most, the whole
+  // title in its tip), then the actions in one cluster on the first line: ✎ Rename and ⋯
+  // (Regenerate title is the ⋯'s first row; the ↻ beside the chat's own title stays). While a new
+  // title is being made, its spinner sits in the cluster.
+  const fullTitle = sessionTitle(s)
   const title = canRename
-    ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" data-tip="Rename">' + titleHtml(sessionTitle(s), esc) + '</span></h1>' + retitleButtonHtml(s, { esc, icon, reach: reachOf(s), busy: retitling.has(s.id) }) + '<button type="button" class="rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" data-tip="Rename">' + icon('pencil') + '</button></div>'
-    : '<div class="title s-title"><h1>' + titleHtml(sessionTitle(s), esc) + '</h1></div>'
+    ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1 data-tip="' + esc(fullTitle) + '"><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="' + esc('Rename: ' + fullTitle) + '">' + titleHtml(sessionTitle(s), esc) + '</span></h1></div>'
+    : '<div class="title s-title"><h1 data-tip="' + esc(fullTitle) + '"><span class="s-title-text">' + titleHtml(sessionTitle(s), esc) + '</span></h1></div>'
   const menu = fsMenuItems(s, mine)
+  const busyTitle = canRename && retitling.has(s.id) ? retitleButtonHtml(s, { esc, icon, reach: reachOf(s), busy: true, cls: 'fs-hact' }) : ''
   const more = menu ? '<span class="more-wrap s-more">' + moreMenu(s, menu, { project: false, title: s.title || 'This session', tip: true }) + '</span>' : ''
+  const acts0 = busyTitle + (canRename ? '<button type="button" class="rename-pen fs-hact" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" data-tip="Rename">' + icon('pencil') + '</button>' : '') + more
   const where = [s.repoLabel || s.repoName || (s.repo && s.repo.name) || '', branch || ''].filter(Boolean)
-  const head = '<div class="pagehead s-head fs-head" data-sid="' + esc(s.id) + '"><div class="fs-head-row">' + title + more +
-    '<button type="button" class="fs-side-x" data-action="fs-side" aria-expanded="true" aria-controls="fsSide" aria-label="Hide the session panel" data-tip="Hide panel (⌘\\)">' + icon('chevron-right') + '</button></div>' +
+  const wherePath = (s.repo && (s.repo.worktree || s.repo.root)) || s.cwd || ''
+  const head = '<div class="pagehead s-head fs-head" data-sid="' + esc(s.id) + '"><div class="fs-head-row">' +
+    '<button type="button" class="fs-side-x" data-action="fs-side" aria-expanded="true" aria-controls="fsSide" aria-label="Hide the session panel" data-tip="Hide panel (⌘\\)">' + icon('chevron-right') + '</button>' +
+    title + (acts0 ? '<div class="fs-hacts">' + acts0 + '</div>' : '') + '</div>' +
     '<div class="sub">' + glyphFor(s, { cls: 'head-sg' }) + statusPill(s) + liveBadge(s) + (isDone(s) ? doneChipHtml(s, { icon, esc }) : archivedChipHtml(s)) + projChip(s) + wtChips(s) + (s.titleSource ? '<span class="s-tsrc">' + esc(s.titleSource === 'prompt' ? 'named from the first prompt' : s.titleSource === 'fallback' ? 'named from your prompt' : s.titleSource + ' title') + '</span>' : '') + '</div>' +
-    (where.length ? '<div class="fs-where">' + icon('folder') + '<span>' + esc(where.join(' · ')) + '</span></div>' : '') +
+    (where.length ? '<div class="fs-where fs-repo" data-tip="' + esc(wherePath ? wherePath + (branch ? ' · ' + branch : '') : where.join(' · ')) + '">' + icon('folder') + '<span>' + esc(where.join(' · ')) + '</span></div>' : '') +
     '<div class="fs-where">' + icon('monitor') + '<span>' + esc(mEmoji(s.machine) + ' ' + s.machine) + '</span><span class="faint">· ' + esc(ago(s.lastActivityAt)) + '</span></div>' + '</div>'
   // the prominent actions: Catch me up (after time away, "Away 3h · Catch me up"), Checkpoint now
   noteOpenAway(s)
@@ -2380,7 +2597,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
@@ -2405,6 +2622,8 @@ function fsMenuItems(s, mine) {
   if (reachOf(s) === 'away') return awayMenuItems(s)
   const pinned = !!s.pinned
   return [
+    // 2026-10-28: Regenerate title is the ⋯'s first row (out of the head row, so ✎ and ⋯ line up; the chat's own ↻ stays)
+    mine && !ownerOffline(s) ? { action: 'title-auto', label: 'Regenerate title', icon: 'refresh-cw', attrs: { 'data-id': s.id, 'data-tip': RETITLE_TIP } } : null,
     { action: 'fs-timeline', label: 'Open in Timeline', icon: 'history', attrs: { 'data-id': s.id } },
     { action: 'resume', label: 'Copy resume command', icon: 'copy', attrs: { 'data-id': s.id } },
     s.liveResumeCommand ? { action: 'copy-cmd', label: 'Copy Live resume', icon: 'copy', attrs: { 'data-cmd': s.liveResumeCommand } } : null,
@@ -2426,17 +2645,63 @@ function paintGhost(sid) {
   const s = state.sessions.find((x) => x.id === sid)
   const g = ghostUi.get(sid)
   const show = ghostShows(g, { value: ta.value, idle: ghostIdle(s) }) && !ta.disabled
+  // 2026-10-29 (beta feedback: iOS has no Tab key, and a long suggestion was cut off): on a touch
+  // screen it is a chip above the box instead of grey text in it (paintSugChip)
+  const touch = isTouchUi(window.matchMedia)
+  paintSugChip(box, sid, show && touch ? g : null)
   let el = box.querySelector('.ghost')
-  if (!show) { if (el) el.hidden = true; box.classList.remove('has-ghost'); return }
+  if (!show || touch) { if (el) el.hidden = true; box.classList.remove('has-ghost'); if (!show) ta.removeAttribute('aria-description'); return }
   if (!el) { el = document.createElement('div'); el.className = 'ghost'; el.setAttribute('aria-hidden', 'true'); box.appendChild(el) }
   const cs = getComputedStyle(ta)
   Object.assign(el.style, { left: ta.offsetLeft + 'px', top: ta.offsetTop + 'px', width: ta.offsetWidth + 'px', height: ta.offsetHeight + 'px', padding: cs.padding, font: cs.font, lineHeight: cs.lineHeight, inset: 'auto' })
-  el.textContent = g.text
+  el.textContent = ''
+  // the words, then the Tab key (always visible: the words are cut, not the key); a long one gets ⋯ with all of it in its tip
+  const t = document.createElement('span'); t.className = 'ghost-t'; t.textContent = g.text; el.appendChild(t)
   const k = document.createElement('span'); k.className = 'ghost-k'; k.textContent = 'Tab'; el.appendChild(k)
   el.hidden = false
   box.classList.add('has-ghost')
+  if (t.scrollWidth > t.clientWidth + 1) {
+    const all = document.createElement('span'); all.className = 'ghost-all'; all.textContent = '⋯'; all.dataset.tip = g.text
+    el.insertBefore(all, k)
+  }
   ta.setAttribute('aria-description', 'Suggested: ' + g.text + '. Press Tab to use it.')
 }
+// The suggestion on a touch screen: a row above the composer. "↳ Use suggestion" and its words
+// (two lines; ⌄ or a long-press shows all of it) put it in the box to edit; ✕ dismisses it.
+// 44px targets. Never sent on its own.
+function paintSugChip(box, sid, g) {
+  const host = box.parentNode
+  let chip = host && host.querySelector(':scope > .sug-chip[data-sid="' + CSS.escape(sid) + '"]')
+  if (!g) { if (chip) chip.remove(); return }
+  if (chip && chip.dataset.text === g.text) return
+  if (chip) chip.remove()
+  chip = document.createElement('div')
+  chip.className = 'sug-chip'; chip.dataset.sid = sid; chip.dataset.text = g.text
+  chip.setAttribute('role', 'group'); chip.setAttribute('aria-label', 'Suggested message')
+  chip.innerHTML = '<button type="button" class="sug-use"><span class="sug-l"><span aria-hidden="true">↳ </span>Use suggestion</span><span class="sug-text"></span></button>' +
+    '<button type="button" class="sug-more" aria-expanded="false" aria-label="Show all of the suggestion" data-tip="Show all">' + icon('chevron-down') + '</button>' +
+    '<button type="button" class="sug-x" aria-label="Dismiss suggestion" data-tip="Dismiss">' + icon('x') + '</button>'
+  chip.querySelector('.sug-text').textContent = g.text
+  host.insertBefore(chip, box)
+  const text = chip.querySelector('.sug-text'), more = chip.querySelector('.sug-more'), use = chip.querySelector('.sug-use')
+  more.hidden = text.scrollHeight <= text.clientHeight + 1
+  const expand = (on) => { chip.classList.toggle('open', on); more.setAttribute('aria-expanded', String(on)); more.setAttribute('aria-label', on ? 'Show less of the suggestion' : 'Show all of the suggestion'); more.dataset.tip = on ? 'Show less' : 'Show all' }
+  more.addEventListener('click', () => expand(!chip.classList.contains('open')))
+  let press = 0, long = false
+  use.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse') return; long = false; clearTimeout(press); press = setTimeout(() => { long = true; if (!more.hidden) expand(true) }, 500) })
+  for (const t of ['pointerup', 'pointercancel', 'pointerleave']) use.addEventListener(t, () => clearTimeout(press))
+  use.addEventListener('contextmenu', (e) => e.preventDefault())
+  use.addEventListener('click', (e) => {
+    if (long) { long = false; e.preventDefault(); return } // a long-press shows it, it doesn't use it
+    const ta = box.querySelector('textarea.composer-input'), cur = ghostUi.get(sid)
+    if (!ta || !cur) return
+    ta.value = cur.text
+    cur.cleared = true
+    ta.dispatchEvent(new Event('input', { bubbles: true })) // the draft is kept, the box fits, the ↑ lights
+    paintGhost(sid)
+  })
+  chip.querySelector('.sug-x').addEventListener('click', () => { const cur = ghostUi.get(sid); if (cur) cur.cleared = true; paintGhost(sid) })
+}
 async function loadGhost(s, v) {
   if (!s || s.agent || !isFullLive(s.id) || state.mayAnswer === false) return
   const last = lastReply(v && !v.error ? v.messages : null)
@@ -2495,7 +2760,40 @@ const isLive = (s) => !!(s && s.liveLink && s.liveLink.on)
 function sessionNeedsStrip(s) {
   // 0.9.14: an asleep Mac's ask isn't live: what it was, muted, and no Allow / Deny
   if (ownerOffline(s)) return '<section class="needs-strip one off-was" aria-label="Was waiting on you"><p class="faint">' + icon('wifi-off') + ' Was waiting on you when ' + esc(s.machine) + ' went offline' + (needsLine(s.needsYou) ? ': “' + esc(needsLine(s.needsYou)) + '”' : '') + '. You can answer once it’s back.</p></section>'
-  return '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>' }
+  // 2026-10-29 (beta feedback: on a phone the block covered the message you're answering): it folds to a one-line bar
+  // (the question's words) and back; the choice is kept per session through repaints (needsFold)
+  const folded = needsFold.has(s.id)
+  const peek = needsLine(s.needsYou) || ''
+  return '<section class="needs-strip one' + (folded ? ' folded' : '') + '" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2>' + (peek ? '<span class="needs-peek" aria-hidden="' + !folded + '">' + esc(peek) + '</span>' : '') +
+    '<button type="button" class="needs-fold" data-action="needs-fold" data-id="' + esc(s.id) + '" aria-expanded="' + !folded + '" aria-label="' + (folded ? 'Show Needs you' : 'Fold Needs you to a bar') + '" data-tip="' + (folded ? 'Show' : 'Fold to a bar') + '">' + icon('chevron-down') + '</button></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>' }
+const needsFold = new Set() // session ids whose Needs-you block is folded to its bar (this page only)
+// Typing a reply in full screen's Needs you with the keyboard up: the Live composer under it steps aside (one box,
+// not two; app.css). It comes back a beat after the box loses focus, so the layout doesn't move under the tap that took focus away.
+{
+  let t = 0
+  document.addEventListener('focusin', (e) => { if (e.target && e.target.closest && e.target.closest('.live-box.full .lf-needs textarea')) { clearTimeout(t); document.documentElement.classList.add('ny-typing') } })
+  document.addEventListener('focusout', (e) => { if (e.target && e.target.closest && e.target.closest('.live-box.full .lf-needs textarea')) { clearTimeout(t); t = setTimeout(() => { if (!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box.full .lf-needs textarea'))) document.documentElement.classList.remove('ny-typing') }, 400) } })
+}
+function needsFoldClick(btn) {
+  const sid = btn.dataset.id
+  const on = !needsFold.has(sid)
+  if (on) needsFold.add(sid); else needsFold.delete(sid)
+  const strip = btn.closest('.needs-strip')
+  if (strip) strip.classList.toggle('folded', on)
+  btn.setAttribute('aria-expanded', String(!on))
+  btn.setAttribute('aria-label', on ? 'Show Needs you' : 'Fold Needs you to a bar')
+  btn.dataset.tip = on ? 'Show' : 'Fold to a bar'
+  const peek = strip && strip.querySelector('.needs-peek'); if (peek) peek.setAttribute('aria-hidden', String(!on))
+}
+// 2026-10-29: the full-screen thread keeps its end in view when the room under it changes (the keyboard,
+// Needs you folding or growing): a thread that was at its bottom stays there; one you scrolled up is left alone.
+function pinLogEnd(ol) {
+  if (!ol || ol._pinEnd || typeof ResizeObserver !== 'function') return
+  const atEnd = () => ol.scrollHeight - ol.clientHeight - ol.scrollTop <= 24
+  ol._pinEnd = { at: atEnd() }
+  ol.addEventListener('scroll', () => { ol._pinEnd.at = atEnd() }, { passive: true })
+  new ResizeObserver(() => { if (ol._pinEnd.at && ol.isConnected) ol.scrollTop = ol.scrollHeight }).observe(ol)
+}
 // 0.9.8 polish: the thread is ui/live-view.js (entries, status, sticking to the
 // bottom); Claude's answer is the session's own (markdown, like the terminal).
 const liveKeeper = createLiveKeeper()
@@ -2606,26 +2904,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 +2933,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 +2941,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 +2950,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 +2959,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 +3030,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.
@@ -2758,6 +3059,7 @@ function fullAfterRender(sid) {
     paintLfTabs()
     const ol = box.querySelector('.live-log')
     if (ol && ol._stick !== false) ol.scrollTop = ol.scrollHeight
+    pinLogEnd(ol)
   } else if (fullUi.back === sid) {
     fullUi.back = null
     const b = document.getElementById('live')
@@ -3354,6 +3656,7 @@ async function refreshLive(reason) {
         const r = liveKeeper.after(box)
         hydrateAttThumbs()
         if (r) liveJumpButton(r.thread, liveKeeper.unseen)
+        if (box.classList.contains('full')) pinLogEnd(fresh.querySelector('.live-log'))
       }
     }
     const c = sessionCache.get(id); if (c) c.live = v
@@ -6637,10 +6940,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 +6959,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 +6970,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 +6984,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()
 }
 
@@ -7160,13 +7463,13 @@ document.addEventListener('keydown', (e) => { const b = e.target.closest && e.ta
       tip.classList.add('on')
     }, delay)
   }
-  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt [data-tip]') // 0.9.18 everything in the walkthrough (its header's icon buttons, the slide nav, file status glyphs); before: the file map's eye, step number and long folders; a step header's files and (cut short) title the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
+  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt [data-tip], .ghost-all[data-tip], .sug-chip [data-tip], .lf-needs .needs-fold[data-tip]') // 0.9.18 everything in the walkthrough (its header's icon buttons, the slide nav, file status glyphs); before: the file map's eye, step number and long folders; a step header's files and (cut short) title the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
   document.addEventListener('pointerover', (e) => { const el = tipped(e); if (!el) { if (cur) hide() } else if (e.pointerType === 'mouse' && el !== cur) show(el, 350) })
   document.addEventListener('pointerout', (e) => { const el = tipped(e); if (el && el === cur && !el.contains(e.relatedTarget)) hide() })
   document.addEventListener('focusin', (e) => { if (wtRefocusing) return; const el = tipped(e); if (el && el.matches(':focus-visible')) show(el, 0); else if (cur) hide() })
   document.addEventListener('focusout', (e) => { if (tipped(e) === cur) hide() })
   for (const ev of ['pointerdown', 'hashchange', 'resize']) window.addEventListener(ev, hide, true)
-  window.addEventListener('scroll', () => { if (performance.now() >= wtQuietUntil) hide() }, true) // 0.9.18 not for a redraw putting the walkthrough's scroll back
+  window.addEventListener('scroll', () => { if (performance.now() >= wtQuietUntil && !scrollKeep.quiet()) hide() }, true) // 0.9.18 not for a redraw putting the walkthrough's scroll back
   document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur) hide() })
   // 0.9.18 touch: a long press shows the tip (the tap it ends with doesn't follow the link)
   let lp = 0, lpd = false
@@ -7184,7 +7487,7 @@ function wtStuck(sc) {
 }
 document.addEventListener('scroll', (e) => { const t = e.target; if (t && t.classList && t.classList.contains('wt-scroll')) wtStuck(t) }, true)
 // 0.9.18 Walk me through it and Catch me up explain themselves (ui/walk-pop.js): hover, focus, long-press, the (i)
-loPop = initPops({ esc, icon, contentFor: (kind, sid, el) => popContent(kind, { size: kind === 'wt' ? (wtSize.get(sid) || {}).data || null : null, away: !!(el && el.dataset.away) }) })
+loPop = initPops({ esc, icon, quiet: () => scrollKeep.quiet(), contentFor: (kind, sid, el) => popContent(kind, { size: kind === 'wt' ? (wtSize.get(sid) || {}).data || null : null, away: !!(el && el.dataset.away) }) })
 // Working in a session keeps its tab: a Live message, typing there, answering Claude there
 const promoteActive = () => { if (tabsUi.active && tabsUi.route === 's') { const m = promote(tabsUi.m, tabsUi.active); if (m !== tabsUi.m) { setTabs(m); paintTabs() } } }
 for (const ev of ['input', 'change', 'submit']) document.addEventListener(ev, (e) => { if (e.target && $app.contains(e.target) && e.target.type !== 'search') promoteActive() }, true)
@@ -7206,6 +7509,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
@@ -8440,6 +8744,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'live-earlier') return liveEarlierClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
+    if (action === 'needs-fold') return needsFoldClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)
     // ---- To do and Files (0.7.0)
     if (action === 'todo-restore' || action === 'todo-restore-all') {
@@ -8542,7 +8847,7 @@ document.addEventListener('click', async (ev) => {
       if (action === 'title-auto') toast('Naming it from the latest messages…', 20000)
       await runRetitle(id, { api, busy: retitling, render, toast })
     } else if (action === 'rename') {
-      const box = btn.closest('.title')
+      const box = btn.closest('.title') || (btn.closest('.fs-head') && btn.closest('.fs-head').querySelector('.title')) // the panel's ✎ sits in the head's action cluster
       if (!box || box.querySelector('input')) return
       const current = s ? s.title || '' : btn.dataset.title || ''
       box.innerHTML = '<input value="' + esc(current) + '" aria-label="Session title" maxlength="120" enterkeyhint="done">' +

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\"/>",