@leftoff/cli 0.9.8-beta.7 → 0.9.8-beta.8

package/CHANGELOG.md

@@ -9,6 +9,7 @@ What changed in Leftoff (called Checkpoints until 0.4.5), newest first. The boar
 - **Outside events**: CI or a webhook can post into a live session with this Mac's key (`leftoff live key`), signed through your leftoff.dev board.
 - **Restore from your phone or another Mac**: it asks that Mac first, and nothing opens until someone there confirms.
 - **Sidebar**: the sections move to a narrow rail on the left, with a count on Needs you. On phones they sit in a bar at the bottom, the rest under More.
+- **Tabs**: sessions open in tabs next to the board. A click opens one italic preview tab that the next click replaces; it stays once you send a Live message, type there, or double-click it. On a phone, an Open row on the board and a swipe between open sessions. The layout follows the window's width, so iPad, Split View and folding keep your tabs.
 - **Quick look**: hover Needs you (or long-press it on a phone) to see the five longest waits and Allow or Deny a permission prompt right there.
 - **Pull to refresh** on phones: pull down from the top of any page to read it again.
 - **Always allow here** on permission prompts, like Claude Code's own "don't ask again". It adds the exact rule (say `Bash(rm /tmp/x)`) to the project's `.claude/settings.local.json`; the ⓘ beside it shows which rule and where. Quick look calls it **Always**.

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.8-beta.7",
+  "version": "0.9.8-beta.8",
   "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": "Joel"

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.8-beta.7' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.8-beta.8' // 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.8-beta.7",
+  "version": "0.9.8-beta.8",
   "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

@@ -2141,10 +2141,10 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 }
 
 /* ------------------------------------------------------------ the sidebar rail (0.9.8)
-   From 820px up: a narrow rail on the left. The Leftoff mark at the top, then
+   From 700px up (0.9.8 tabs: was 820): a narrow rail on the left. The Leftoff mark at the top, then
    the sections as an icon over a small label, the current one in a soft pill,
    a red count on Needs you; search, What's new, Settings and this Mac's status
-   (the Mac switcher) at the bottom. Under 820px: the mark, search and status in
+   (the Mac switcher) at the bottom; 700–1099px it shows icons only. Under 700px: the mark, search and status in
    a slim top row, and a bottom tab bar (Board, Needs you, Lists, PRs, More). */
 :root { --rail-w: 84px; --rail-on: color-mix(in srgb, var(--accent) 13%, transparent); --bar-h: 58px; }
 .tab-more { display: none; }
@@ -2153,7 +2153,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .moredot[hidden] { display: none; }
 .iconbtn .lbl { display: none; }
 .tabs a, .tab-more { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
-@media (min-width: 820px) {
+@media (min-width: 700px) {
   body { padding-left: calc(var(--rail-w) + env(safe-area-inset-left)); }
   .top { position: fixed !important; top: 0; bottom: 0; left: 0; width: calc(var(--rail-w) + env(safe-area-inset-left)); z-index: 20; /* !important: the rail never joins the page flow */
     flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0;
@@ -2181,11 +2181,11 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .newdot, .topdot { top: 8px; right: calc(50% - 15px); box-shadow: 0 0 0 2px var(--bg); }
   .set-nav { top: 24px; }
 }
-@media (min-width: 820px) and (max-height: 640px) {
+@media (min-width: 700px) and (max-height: 640px) {
   .tabs a, .topright .searchbtn, .topright .iconbtn, .topright .health { min-height: 46px; padding: 4px 2px; gap: 2px; }
   .brand { padding-bottom: 4px; }
 }
-@media (max-width: 819.98px) {
+@media (max-width: 699.98px) {
   .top { flex-wrap: nowrap; gap: 8px; min-height: 52px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
   .brand { order: 1; }
   .topright { order: 2; margin-left: auto; gap: 2px; }
@@ -2224,7 +2224,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .moremenu a.on { background: var(--rail-on); }
 .moremenu a.on .ic { color: var(--accent); }
 .moremenu .newdot, .moremenu .topdot { position: static; margin-left: auto; box-shadow: none; }
-@media (min-width: 820px) { .moremenu { display: none !important; } }
+@media (min-width: 700px) { .moremenu { display: none !important; } }
 /* Quick look on Needs you (0.9.8) */
 .quicklook { position: fixed; z-index: 45; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
   background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 20, 35, .18), 0 2px 6px rgba(15, 20, 35, .08); padding: 12px 12px 8px; font-size: 13.5px; animation: lo-in .12s ease-out; }
@@ -2254,8 +2254,8 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .ql-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 0 6px; margin-top: 2px; color: var(--accent); font-weight: 600; text-decoration: none; border-radius: 8px; }
 .ql-foot:hover { text-decoration: underline; }
 .ql-foot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-@media (pointer: coarse), (max-width: 819.98px) { .ql-actions .btn { min-height: 44px; min-width: 64px; } .ql-main { min-height: 44px; justify-content: center; } }
-@media (max-width: 819.98px) { .quicklook { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; max-width: none; bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--bar-h) - 80px); } }
+@media (pointer: coarse), (max-width: 699.98px) { .ql-actions .btn { min-height: 44px; min-width: 64px; } .ql-main { min-height: 44px; justify-content: center; } }
+@media (max-width: 699.98px) { .quicklook { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; max-width: none; bottom: calc(var(--bar-h) + 8px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--bar-h) - 80px); } }
 @media (prefers-reduced-motion: reduce) { .quicklook, .moremenu { animation: none; } }
 
 /* Pull to refresh (phones, 0.9.8): the spinner comes down from under the top row */
@@ -2267,7 +2267,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .ptr-ring svg { width: 19px; height: 19px; }
 .ptr.armed { color: var(--accent); }
 .ptr.busy .ptr-ring { animation: spin .8s linear infinite; }
-@media (pointer: coarse) and (max-width: 819.98px) { html, body { overscroll-behavior-y: contain; } }
+@media (pointer: coarse) and (max-width: 699.98px) { html, body { overscroll-behavior-y: contain; } }
 @media (prefers-reduced-motion: reduce) { .ptr-ring { transform: none; } .ptr.busy .ptr-ring { animation: lo-pulse 1.2s ease-in-out infinite; } }
 @keyframes lo-pulse { 50% { opacity: .35; } }
 
@@ -2328,3 +2328,76 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .moremenu .push-slot { border-top: 1px solid var(--line); margin-top: 6px; padding: 12px 8px 6px; }
 .moremenu:has(.push-slot:not([hidden])) { width: 270px; }
 .form .push-slot { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2, transparent); margin-top: 4px; }
+
+/* ------------------------------------------------------------ tabs for sessions (0.9.8)
+   By width, never by device. Under 700px: no strip; an Open row on the board
+   and "‹ 2 of 4 ›" on a session page (swipe works too). 700–1099px: the strip,
+   the rail as icons. From 1100px: the full rail and the strip. */
+.tabstrip, .openrow, .tabpager { display: none; }
+.tabstrip[hidden], .openrow[hidden], .tabpager[hidden] { display: none !important; }
+.tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.preview .tab-t, .tab-s.preview .tab-t, .ochip.preview .tab-t { font-style: italic; }
+.tab-live, .tab-need { flex: none; width: 8px; height: 8px; border-radius: 50%; position: relative; }
+.tab-live { background: var(--green); animation: live-pulse 1.6s ease-in-out infinite; }
+.tab-need { background: var(--red); }
+@media (prefers-reduced-motion: reduce) { .tab-live { animation: none; } }
+@media (min-width: 700px) {
+  .tabstrip { display: flex; position: sticky; top: 0; z-index: 15; align-items: stretch; height: 44px; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
+  .tabstrip-in { flex: 1; min-width: 0; display: flex; align-items: stretch; }
+  .tab-scroll { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
+  .tab-scroll::-webkit-scrollbar { display: none; }
+  .tab { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
+  .tab .ic { width: 16px; height: 16px; flex: none; }
+  .tab:hover { color: var(--text); }
+  .tab:focus-visible, .tab-x:focus-visible, .tab-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .tab-board { flex: none; border-right: 1px solid var(--line); }
+  .tab-cell { position: relative; flex: 0 1 200px; min-width: 120px; display: flex; align-items: stretch; border-right: 1px solid var(--line); }
+  .tab-s { flex: 1; min-width: 0; padding-right: 0; }
+  .tab.on, .tab-cell.on { color: var(--text); background: var(--card); }
+  .tab-board.on, .tab-cell.on { box-shadow: inset 0 -2px 0 var(--accent); }
+  .tab-x { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; border-radius: 8px; }
+  .tab-x .ic { width: 14px; height: 14px; }
+  .tab-x:hover { color: var(--text); background: var(--bg2); }
+  .tab-keep { opacity: 0; }
+  .tab-cell:hover .tab-keep, .tab-keep:focus-visible, .tab-cell.on .tab-keep { opacity: 1; }
+  .tab-cell.dragging { opacity: .5; }
+  .tab-cell.drop-before { box-shadow: inset 2px 0 0 var(--accent); }
+  .tab-all { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
+  .tab-all .ic { width: 18px; height: 18px; }
+  .tab-all:hover, .tab-all[aria-expanded="true"] { color: var(--text); background: var(--bg2); }
+  .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 */
+@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); }
+}
+/* phones (under 700px): the Open row on the board, ‹ N of M › on a session page */
+@media (max-width: 699.98px) {
+  body[data-route="board"] .openrow { display: block; }
+  body[data-route="s"] .tabpager { display: block; }
+  .openrow { padding: 8px 0 0; }
+  .openrow-h { display: flex; gap: 8px; align-items: baseline; padding: 0 max(16px, env(safe-area-inset-left)); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
+  .openrow-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px max(16px, env(safe-area-inset-left)) 6px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
+  .openrow-chips::-webkit-scrollbar { display: none; }
+  .ochip-cell { flex: none; display: flex; align-items: stretch; max-width: 62vw; border: 1px solid var(--line); border-radius: 22px; background: var(--card); scroll-snap-align: start; }
+  .ochip-cell.preview { border-style: dashed; }
+  .ochip { display: flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 14px; color: var(--text); text-decoration: none; font-size: 15px; max-width: 100%; min-width: 0; }
+  .ochip-cell:not(.preview) .ochip { padding-right: 2px; }
+  .ochip-x { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 22px; }
+  .ochip-x .ic { width: 15px; height: 15px; }
+  .tabpager { padding: 4px max(8px, env(safe-area-inset-left)) 0; }
+  .pager-in { display: flex; align-items: center; gap: 6px; }
+  .pager-b { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; color: var(--text); text-decoration: none; }
+  .pager-b .ic { width: 22px; height: 22px; }
+  .pager-b.off { opacity: .25; }
+  .pager-b:not(.off):active { background: var(--bg2); }
+  .pager-n { flex: 1; text-align: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .pager-keep { flex: none; min-height: 44px; }
+  .swipe-next main { animation: lo-page-fwd .18s ease-out; }
+  .swipe-prev main { animation: lo-page-back .18s ease-out; }
+}
+@media (prefers-reduced-motion: reduce) { .swipe-next main, .swipe-prev main { animation: none !important; } }

package/ui/app.js

@@ -19,9 +19,10 @@ import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, pr
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
-import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses } from './live-view.js' // 0.9.8 Live link polish
+import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
 import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
+import { TABS_KEY, layoutFor, parseStored, serialize, openTab, promote, remember, closeTab, moveTab, neighbours, indexOf, sessionOfHash, keepHash, tabView, stripHtml, allTabsItems, openRowHtml, pagerHtml, swipeDir } from './tabs.js' // 0.9.8 tabs for sessions
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
 // 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
@@ -3380,6 +3381,7 @@ function parseRoute() {
 async function render() {
   const r = (state.route = parseRoute())
   paintNav(r)
+  tabsOnRoute(r)
   try {
     if (r.name === 's' && r.arg) await viewSession(r.arg)
     else if (r.name === 'waiting') await viewWaiting()
@@ -3394,6 +3396,7 @@ async function render() {
     else if (r.name === 'search') await viewSearch(r.q || '')
     else if (r.name === 'setup') await viewSetup()
     else await viewBoard()
+    tabsAfterRender()
   } catch (e) {
     if (e.code === 'login_required') return showLogin()
     $app.innerHTML = '<div class="empty">Couldn’t load: ' + esc(e.message) + '</div>'
@@ -3501,12 +3504,12 @@ function paintTopDot() {
 }
 
 // ------------------------------------------------------------ the rail, the bottom bar and Quick look (0.9.8)
-// From 820px up the sections sit in a rail on the left; under it, in a bottom
+// From 700px up the sections sit in a rail on the left; under it, in a bottom
 // bar with the rest under More. Hover the Needs you item (or long-press it on a
 // phone, or press ↓/→ on it) for Quick look: the count and the five longest
 // waits, with Allow / Deny on permission prompts (the Needs you page's own
 // buttons, so the same checks apply and nothing is answered without a click).
-const railMode = () => window.matchMedia('(min-width: 820px)').matches
+const railMode = () => window.matchMedia('(min-width: 700px)').matches
 function paintNav(r = state.route || parseRoute()) {
   const key = navKey(r.name)
   document.querySelectorAll('.tabs a[data-route], .topright a[data-route], #moreMenu a[data-route]').forEach((a) => { const on = a.dataset.route === key; a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') })
@@ -3664,6 +3667,214 @@ function closeQuickLook(focusTab = false) {
   window.addEventListener('resize', () => { placeQuickLook(); if (statusOpen()) placeStatus() })
 }
 
+// ------------------------------------------------------------ tabs for sessions (0.9.8, ui/tabs.js)
+// The board is the first tab; a session opens as the one preview tab (italic)
+// that the next click replaces, and stays open once you send a Live message,
+// type there, choose Keep open or double-click its tab (⌘/Ctrl-click or a
+// middle-click opens it permanent straight away). Kept per device in
+// localStorage. By width: under 700px the Open row on the board and ‹ N of M ›
+// (or a swipe) on a session page; from 700px the strip. A width change (fold,
+// Split View, rotation) only changes the CSS: the open set, the session and
+// where you were on the page stay.
+const tabsUi = { m: parseStored(localStorage.getItem(TABS_KEY)), active: null, route: null, permanent: null, html: { strip: '', row: '', pager: '' }, anchor: null, logs: new WeakMap(), quietUntil: 0, fetchT: 0, fetchedAt: 0, scrolls: {} }
+window.leftoffTabs = { model: () => JSON.parse(serialize(tabsUi.m)) } // read by test:tabs-ui
+function setTabs(m) {
+  if (m === tabsUi.m) return
+  tabsUi.m = m
+  try { localStorage.setItem(TABS_KEY, serialize(m)) } catch {}
+}
+const tabSession = (id) => state.sessions.find((s) => s.id === id)
+const tabViews = () => tabsUi.m.tabs.map((t) => tabView(t, tabSession(t.id), { title: sessionTitle, working: (s) => liveWorking(s) }))
+function tabsOnRoute(r) {
+  const id = r.name === 's' && r.arg ? String(r.arg) : null
+  if (tabsUi.active && tabsUi.active !== id) tabsUi.scrolls[tabsUi.active] = window.scrollY || 0
+  if (id) {
+    const permanent = tabsUi.permanent === id
+    setTabs(openTab(tabsUi.m, id, { permanent, hash: keepHash(location.hash), title: (tabSession(id) && sessionTitle(tabSession(id))) || '' }))
+  }
+  tabsUi.permanent = null
+  const changed = tabsUi.active !== id || tabsUi.route !== r.name
+  tabsUi.active = id; tabsUi.route = r.name
+  document.body.dataset.route = r.name
+  paintTabs()
+  if (changed) scrollActiveTab()
+}
+function tabsAfterRender() {
+  let m = tabsUi.m
+  for (const t of m.tabs) { const s = tabSession(t.id); if (s) m = remember(m, t.id, { title: sessionTitle(s) }) }
+  setTabs(m)
+  paintTabs()
+  const back = tabsUi.active && tabsUi.restoreScroll === tabsUi.active ? tabsUi.scrolls[tabsUi.active] : null
+  tabsUi.restoreScroll = null
+  if (back != null) window.scrollTo(0, back)
+  noteAnchor()
+  // the other open tabs' pulse and dot: read the sessions again now and then while you're off the board
+  if (tabsUi.route !== 'board' && tabsUi.m.tabs.some((t) => t.id !== tabsUi.active) && Date.now() - tabsUi.fetchedAt > 15000) refreshTabSessions()
+}
+async function refreshTabSessions() {
+  tabsUi.fetchedAt = Date.now()
+  try {
+    const { sessions = [], parked = [] } = await api('GET', '/v1/sessions?limit=200')
+    const fresh = new Map(sessions.concat(parked).map((s) => [s.id, s]))
+    state.sessions = state.sessions.map((s) => (s.id !== tabsUi.active && fresh.has(s.id) ? fresh.get(s.id) : s)).concat([...fresh.values()].filter((s) => !state.sessions.some((x) => x.id === s.id)))
+    paintTabs()
+  } catch {}
+}
+function paintTabs() {
+  const views = tabViews()
+  const strip = document.getElementById('tabStrip'), row = document.getElementById('openRow'), pager = document.getElementById('tabPager')
+  if (!strip) return
+  const sh = stripHtml(views, tabsUi.active, tabsUi.route === 'board', esc)
+  if (sh !== tabsUi.html.strip) {
+    const sc = strip.querySelector('.tab-scroll'), left = sc ? sc.scrollLeft : 0
+    const had = strip.contains(document.activeElement) ? (document.activeElement.dataset.tab || document.activeElement.dataset.tabClose || document.activeElement.dataset.tabKeep || document.activeElement.id) : null
+    strip.innerHTML = sh; tabsUi.html.strip = sh
+    const nsc = strip.querySelector('.tab-scroll'); if (nsc) nsc.scrollLeft = left
+    if (had) { const el = strip.querySelector('[data-tab="' + CSS.escape(had) + '"], [data-tab-close="' + CSS.escape(had) + '"], [data-tab-keep="' + CSS.escape(had) + '"], #' + CSS.escape(had)); if (el) el.focus({ preventScroll: true }) }
+  }
+  strip.hidden = false
+  const rh = openRowHtml(views, esc)
+  if (rh !== tabsUi.html.row) { const c = row.querySelector('.openrow-chips'), l = c ? c.scrollLeft : 0; row.innerHTML = rh; tabsUi.html.row = rh; const nc = row.querySelector('.openrow-chips'); if (nc) nc.scrollLeft = l }
+  row.hidden = !rh
+  const ph = tabsUi.active ? pagerHtml(tabsUi.m, tabsUi.active, views, esc) : ''
+  if (ph !== tabsUi.html.pager) { pager.innerHTML = ph; tabsUi.html.pager = ph }
+  pager.hidden = !ph
+}
+function scrollActiveTab() {
+  const el = document.querySelector('#tabStrip .tab-cell.on'), sc = document.querySelector('#tabStrip .tab-scroll')
+  if (!el || !sc) return
+  const r = el.getBoundingClientRect(), b = sc.getBoundingClientRect()
+  if (r.left < b.left) sc.scrollLeft -= b.left - r.left + 8
+  else if (r.right > b.right) sc.scrollLeft += r.right - b.right + 8
+}
+function keepTab(id) { setTabs(promote(tabsUi.m, id)); paintTabs() }
+function closeTabNow(id) {
+  const { model, next } = closeTab(tabsUi.m, id, tabsUi.active)
+  setTabs(model)
+  delete tabsUi.scrolls[id]
+  if (tabsUi.active === String(id)) {
+    const t = next && model.tabs.find((x) => x.id === next)
+    if (t) tabsUi.restoreScroll = t.id
+    location.hash = t ? tabView(t).href : '#/'
+  } else paintTabs()
+}
+function goTab(href) {
+  const id = sessionOfHash(href)
+  if (id) tabsUi.restoreScroll = id
+  if (location.hash === href) render(); else location.hash = href
+}
+// ⌘/Ctrl-click or a middle-click on any session link: open it as a permanent tab (here, not a new browser tab)
+function sessionLinkId(a) { return a && a.getAttribute && sessionOfHash(a.getAttribute('href') || '') }
+document.addEventListener('click', (e) => {
+  const a = e.target.closest && e.target.closest('a[href^="#/s/"]')
+  if (!a || !(e.metaKey || e.ctrlKey) || e.button !== 0) return
+  const id = sessionLinkId(a); if (!id) return
+  e.preventDefault(); e.stopPropagation()
+  if (indexOf(tabsUi.m, id) >= 0) setTabs(promote(tabsUi.m, id)); else tabsUi.permanent = id
+  if (location.hash === a.getAttribute('href')) render(); else location.hash = a.getAttribute('href')
+}, true)
+document.addEventListener('mousedown', (e) => { if (e.button === 1 && e.target.closest && e.target.closest('a[href^="#/s/"], #tabStrip .tab-cell')) e.preventDefault() }) // no autoscroll
+document.addEventListener('auxclick', (e) => {
+  if (e.button !== 1 || !e.target.closest) return
+  const cell = e.target.closest('#tabStrip .tab-cell')
+  if (cell) { e.preventDefault(); closeTabNow(cell.dataset.tabId); return } // middle-click a tab: close it
+  const a = e.target.closest('a[href^="#/s/"]')
+  const id = sessionLinkId(a); if (!id) return
+  e.preventDefault()
+  if (indexOf(tabsUi.m, id) >= 0) { setTabs(promote(tabsUi.m, id)); paintTabs() }
+  else { setTabs(openTab(tabsUi.m, id, { permanent: true })); paintTabs() } // opened in the background, the way a middle-click does
+})
+document.addEventListener('click', (e) => {
+  if (!e.target.closest) return
+  const close = e.target.closest('[data-tab-close]')
+  if (close) { e.preventDefault(); return closeTabNow(close.dataset.tabClose) }
+  const keep = e.target.closest('[data-tab-keep]')
+  if (keep) { e.preventDefault(); return keepTab(keep.dataset.tabKeep) }
+  const go = e.target.closest('[data-tab-go]')
+  if (go) { e.preventDefault(); return goTab(go.dataset.tabGo) }
+  const all = e.target.closest('#tabAll')
+  if (all) { e.preventDefault(); return openActionMenu(all, allTabsItems(tabViews(), tabsUi.active), { title: 'Open sessions' }) }
+  const t = e.target.closest('#tabStrip a[data-tab], #openRow a[data-tab], #tabPager a[data-tab]')
+  if (t && !e.metaKey && !e.ctrlKey && t.dataset.tab !== 'board') { e.preventDefault(); goTab(t.getAttribute('href')) }
+})
+document.addEventListener('dblclick', (e) => { const t = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (t) { e.preventDefault(); keepTab(t.dataset.tabId) } })
+// 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)
+document.addEventListener('click', (e) => { if (e.target.closest && $app.contains(e.target) && e.target.closest('[data-action="live-send"], .live-box [data-action], .need [data-choice], [data-action="ask-answer"], [data-action="rename"]')) promoteActive() }, true)
+// Drag a tab to reorder
+{
+  let dragId = null
+  document.addEventListener('dragstart', (e) => { const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (!c) return; dragId = c.dataset.tabId; c.classList.add('dragging'); try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', dragId) } catch {} })
+  document.addEventListener('dragover', (e) => { if (!dragId) return; const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (!c) return; e.preventDefault(); document.querySelectorAll('#tabStrip .drop-before').forEach((x) => x.classList.remove('drop-before')); c.classList.add('drop-before') })
+  document.addEventListener('drop', (e) => { if (!dragId) return; const c = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (c) { e.preventDefault(); const to = indexOf(tabsUi.m, c.dataset.tabId); const from = indexOf(tabsUi.m, dragId); setTabs(moveTab(tabsUi.m, dragId, from < to ? to - 1 : to)); paintTabs() } })
+  document.addEventListener('dragend', () => { dragId = null; document.querySelectorAll('#tabStrip .dragging, #tabStrip .drop-before').forEach((x) => x.classList.remove('dragging', 'drop-before')) })
+}
+// Phones: swipe left / right on a session page for the next / previous open session
+{
+  let sw = null
+  const narrowQ = window.matchMedia('(max-width: 699.98px)')
+  const scrollsSideways = (el) => { for (let n = el; n && n !== document.body; n = n.parentElement) { if (n.scrollWidth > n.clientWidth + 2 && /(auto|scroll)/.test(getComputedStyle(n).overflowX)) return true } return false }
+  document.addEventListener('touchstart', (e) => {
+    sw = null
+    if (!narrowQ.matches || tabsUi.route !== 's' || e.touches.length !== 1) return
+    const t = e.target
+    if (t.closest('input, textarea, select, [contenteditable], .lo-menu, .cmdk, .doc-viewer, .tabs, .moremenu') || scrollsSideways(t)) return
+    sw = { x: e.touches[0].clientX, y: e.touches[0].clientY, at: Date.now() }
+  }, { passive: true })
+  document.addEventListener('touchend', (e) => {
+    if (!sw || !e.changedTouches.length) return
+    const p = e.changedTouches[0]
+    const dir = swipeDir(p.clientX - sw.x, p.clientY - sw.y, Date.now() - sw.at)
+    sw = null
+    if (!dir || (window.getSelection && String(window.getSelection()))) return
+    const n = neighbours(tabsUi.m, tabsUi.active)
+    const to = dir === 'next' ? n.next : n.prev
+    if (!to) return
+    const t = tabsUi.m.tabs.find((x) => x.id === to)
+    document.body.classList.remove('swipe-next', 'swipe-prev'); void document.body.offsetWidth
+    document.body.classList.add('swipe-' + dir); setTimeout(() => document.body.classList.remove('swipe-' + dir), 260)
+    goTab(tabView(t).href)
+  }, { passive: true })
+}
+// A width change keeps your place: the element at the top of the page stays at
+// the top, and a Live chat that was at its newest stays there.
+function anchorY() {
+  let y = 0
+  for (const el of [document.querySelector('.top'), document.getElementById('tabStrip'), document.getElementById('tabPager')]) {
+    if (!el) continue
+    const cs = getComputedStyle(el); if (cs.display === 'none' || !/(fixed|sticky)/.test(cs.position)) continue
+    const r = el.getBoundingClientRect(); if (r.top <= 1 && r.bottom < innerHeight / 2) y = Math.max(y, r.bottom)
+  }
+  return y
+}
+function noteAnchor() {
+  if (Date.now() < tabsUi.quietUntil) return
+  const y = anchorY() + 6, m = $app.getBoundingClientRect()
+  if (m.bottom < y) { tabsUi.anchor = null; return }
+  let el = document.elementFromPoint(Math.max(m.left + 24, Math.min(m.left + m.width / 2, innerWidth - 24)), y)
+  if (!el || !$app.contains(el) || el === $app) { const kids = [...$app.querySelectorAll('h1, h2, h3, p, li, .card, .fact, .lv-msg, section, div')]; el = kids.find((k) => { const r = k.getBoundingClientRect(); return r.bottom > y && r.height > 0 }) || null }
+  tabsUi.anchor = el ? { el, top: el.getBoundingClientRect().top, scrollY: window.scrollY } : null
+}
+function keepPlace() {
+  const a = tabsUi.anchor
+  tabsUi.quietUntil = Date.now() + 250
+  if (a && a.el.isConnected && a.scrollY > 0) window.scrollBy(0, a.el.getBoundingClientRect().top - a.top)
+  document.querySelectorAll('.live-log').forEach((log) => { const st = tabsUi.logs.get(log); if (st && st.bottom) log.scrollTop = log.scrollHeight })
+}
+{
+  let raf = 0
+  window.addEventListener('scroll', () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; noteAnchor() }) }, { passive: true })
+  document.addEventListener('scroll', (e) => { const log = e.target; if (log && log.classList && log.classList.contains('live-log') && Date.now() >= tabsUi.quietUntil) tabsUi.logs.set(log, { bottom: log.scrollHeight - log.scrollTop - log.clientHeight < 24 }) }, true)
+  let lay = layoutFor(innerWidth)
+  window.addEventListener('resize', () => {
+    keepPlace()
+    const now = layoutFor(innerWidth)
+    if (now !== lay) { lay = now; document.body.dataset.layout = now; scrollActiveTab() }
+  })
+  document.body.dataset.layout = lay
+}
+
 // Pull to refresh (phones, 0.9.8): pull down from the top of a page and let go
 // past the line; the page reads its data again, the same as a live update (no
 // full reload unless that fails). Never from a field, the Live box or a menu.
@@ -3672,7 +3883,7 @@ function closeQuickLook(focusTab = false) {
   ptr.className = 'ptr'; ptr.id = 'ptr'; ptr.setAttribute('aria-hidden', 'true'); ptr.hidden = true
   ptr.innerHTML = '<span class="ptr-ring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg></span>'
   document.body.appendChild(ptr)
-  const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 819.98px)')
+  const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 699.98px)')
   const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .emoji-sheet-wrap')
   let pull = null, refreshing = false
   const paint = (step) => {

package/ui/index.html

@@ -57,6 +57,9 @@
       <div class="cmdk-foot"><span><kbd>↑</kbd><kbd>↓</kbd> to move</span><span><kbd>↵</kbd> to open</span><span><kbd>esc</kbd> to close</span></div>
     </div>
   </div>
+  <nav class="tabstrip" id="tabStrip" aria-label="Open sessions" hidden></nav>
+  <div class="openrow" id="openRow" role="navigation" aria-label="Open sessions" hidden></div>
+  <div class="tabpager" id="tabPager" role="navigation" aria-label="Open sessions" hidden></div>
   <main id="app"></main>
   <div class="toast" id="toast" role="status" aria-live="polite"></div>
   <script src="relay-client.js" type="module"></script>

package/ui/tabs.js

@@ -0,0 +1,216 @@
+// Tabs for sessions (0.9.8). The board is always the first tab and can't be
+// closed. Clicking a session opens it in ONE preview tab (its title in italics)
+// that the next click replaces, VS Code style; it stays open (permanent, with a
+// close ×) once you send a Live message in it, type there, choose Keep open or
+// double-click the tab, and a middle-click or ⌘/Ctrl-click opens a session
+// straight as permanent. The open set and its order are kept per device
+// (localStorage) and survive a reload; a deep link opens as the preview.
+//
+// The layout follows the window's WIDTH, never the device: under 700px no strip
+// (an Open row on the board, swipe or ‹ › between open sessions on a session
+// page); 700–1099px the strip with the rail as icons; from 1100px the full rail
+// and the strip. Pure functions over a plain model; app.js wires them.
+
+export const TABS_KEY = 'cp.tabs'
+export const MAX_TABS = 40
+export const NARROW_MAX = 699.98 // < 700: phones, a foldable closed
+export const WIDE_MIN = 1100 // ≥ 1100: iPad landscape, a Mac
+
+// 'narrow' | 'medium' | 'wide' for a CSS width
+export function layoutFor(width) {
+  const w = Number(width) || 0
+  return w < 700 ? 'narrow' : w < WIDE_MIN ? 'medium' : 'wide'
+}
+
+const clean = (e) => ({ id: String(e.id), title: typeof e.title === 'string' ? e.title.slice(0, 200) : '', preview: !!e.preview, ...(typeof e.hash === 'string' && e.hash.startsWith('#/s/') ? { hash: e.hash } : {}) })
+
+// Any stored or hand-made value → a valid model: string ids, no repeats, at most
+// one preview (the last one wins), at most MAX_TABS.
+export function normalize(raw) {
+  const list = raw && Array.isArray(raw.tabs) ? raw.tabs : []
+  const seen = new Set(), tabs = []
+  for (const e of list) {
+    if (!e || e.id == null || e.id === '' || seen.has(String(e.id))) continue
+    seen.add(String(e.id)); tabs.push(clean(e))
+  }
+  let pi = -1
+  tabs.forEach((t, i) => { if (t.preview) { if (pi >= 0) tabs[pi].preview = false; pi = i } })
+  return { tabs: tabs.slice(-MAX_TABS) }
+}
+export function emptyTabs() { return { tabs: [] } }
+export function parseStored(text) {
+  try { return normalize(JSON.parse(text || 'null')) } catch { return emptyTabs() }
+}
+export function serialize(m) { return JSON.stringify({ v: 1, tabs: normalize(m).tabs }) }
+
+export const indexOf = (m, id) => m.tabs.findIndex((t) => t.id === String(id))
+export const isOpen = (m, id) => indexOf(m, id) >= 0
+export const previewOf = (m) => m.tabs.find((t) => t.preview) || null
+
+// Open a session. Already open: it just gets focus (permanent promotes a preview).
+// Not open: as the preview, replacing the old preview in place; or, permanent,
+// appended at the end.
+export function openTab(m, id, { permanent = false, title, hash } = {}) {
+  const tabs = m.tabs.map((t) => ({ ...t }))
+  id = String(id)
+  const i = tabs.findIndex((t) => t.id === id)
+  const extra = { ...(title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') ? { hash } : {}) }
+  if (i >= 0) {
+    Object.assign(tabs[i], extra)
+    if (permanent) tabs[i].preview = false
+    return { tabs }
+  }
+  const e = { id, title: '', preview: !permanent, ...extra }
+  const pi = tabs.findIndex((t) => t.preview)
+  if (!permanent && pi >= 0) tabs[pi] = e
+  else tabs.push(e)
+  // too many: the oldest permanent tab that isn't this one goes
+  while (tabs.length > MAX_TABS) { const k = tabs.findIndex((t) => t.id !== id); tabs.splice(k, 1) }
+  return { tabs }
+}
+
+// The preview becomes permanent (a Live message, typing there, Keep open, a double-click).
+export function promote(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0 || !m.tabs[i].preview) return m
+  return { tabs: m.tabs.map((t, k) => (k === i ? { ...t, preview: false } : t)) }
+}
+
+// Keep a tab's title (shown while its session isn't loaded) and where in it you were.
+export function remember(m, id, { title, hash } = {}) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const t = m.tabs[i]
+  const nt = { ...t, ...(title && title !== t.title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') && hash !== t.hash ? { hash } : {}) }
+  if (nt.title === t.title && nt.hash === t.hash) return m
+  return { tabs: m.tabs.map((x, k) => (k === i ? nt : x)) }
+}
+
+// Close a tab. When it was the one you're on, `next` is where to go: the
+// neighbour on the right, else the one on the left, else the board (null).
+export function closeTab(m, id, activeId = null) {
+  const i = indexOf(m, id)
+  if (i < 0) return { model: m, next: activeId == null ? null : String(activeId) }
+  const tabs = m.tabs.filter((_, k) => k !== i)
+  let next = activeId == null ? null : String(activeId)
+  if (String(id) === next) next = tabs.length ? (tabs[i] || tabs[i - 1]).id : null
+  return { model: { tabs }, next }
+}
+
+// Move a tab to another position (drag on the strip).
+export function moveTab(m, id, to) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const tabs = m.tabs.slice()
+  const [t] = tabs.splice(i, 1)
+  tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, t)
+  return { tabs }
+}
+
+// Where a session sits among the open ones (the phone's "2 of 4", swipe and ‹ ›).
+export function neighbours(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0) return { index: 0, count: m.tabs.length, prev: null, next: null }
+  return { index: i + 1, count: m.tabs.length, prev: i > 0 ? m.tabs[i - 1].id : null, next: i < m.tabs.length - 1 ? m.tabs[i + 1].id : null }
+}
+
+// The session id a hash opens (#/s/<id>, #/s/<id>/live, #/s/<id>?hit=…), or null.
+export function sessionOfHash(hash) {
+  const h = String(hash || '').replace(/^#\/?/, '').split('?')[0]
+  const p = h.split('/').filter(Boolean)
+  if (p[0] !== 's' || !p[1]) return null
+  try { return decodeURIComponent(p[1]) } catch { return p[1] }
+}
+// Where a tab goes back to: its own page, keeping /live (not a search hit).
+export function tabHref(t) {
+  const base = '#/s/' + encodeURIComponent(t.id)
+  if (t.hash && sessionOfHash(t.hash) === t.id && t.hash.split('?')[0].endsWith('/live')) return base + '/live'
+  return base
+}
+export function keepHash(hash) { return String(hash || '').split('?')[0] }
+
+// What a tab shows for its session: the title, the Live pulse while Claude is
+// working (the Live chip's own signal), a dot when it needs you (the same as
+// Needs you). `session` may be missing (not loaded yet): the kept title, no marks.
+export function tabView(t, session, { title, working } = {}) {
+  const s = session || null
+  return {
+    id: t.id, preview: !!t.preview, href: tabHref(t),
+    title: (s && title ? title(s) : '') || t.title || 'Session',
+    working: !!(s && working && working(s)),
+    needs: !!(s && s.needsYou && !s.archived),
+  }
+}
+
+const X = '<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>'
+const BOARD_IC = '<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>'
+const DOTS = '<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>'
+const PREV = '<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 18-6-6 6-6"/></svg>'
+const NEXT = '<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 18 6-6-6-6"/></svg>'
+
+// The marks after a title: a pulsing Live dot, or the red needs-you dot (both when both).
+function marks(v, esc) {
+  return (v.working ? '<span class="tab-live" title="Claude is working"><span class="lo-vh">, Claude is working</span></span>' : '') +
+    (v.needs ? '<span class="tab-need" title="Needs you"><span class="lo-vh">, needs you</span></span>' : '')
+}
+function label(v) { return (v.preview ? 'Preview: ' : '') + v.title + (v.working ? ' · Claude is working' : '') + (v.needs ? ' · needs you' : '') }
+
+// The strip (700px and up): Board, then the open sessions, then ⋯ (all of them).
+// The current tab is aria-current="true" (the current item of this set); the rail keeps "page".
+export function stripHtml(views, activeId, onBoard, esc) {
+  const board = '<a class="tab tab-board' + (onBoard ? ' on' : '') + '" href="#/" data-tab="board"' + (onBoard ? ' aria-current="true"' : '') + ' title="Board">' + BOARD_IC + '<span class="tab-t">Board</span></a>'
+  const tabs = views.map((v) => {
+    const on = v.id === activeId
+    return '<div class="tab-cell' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" data-tab-id="' + esc(v.id) + '">' +
+      '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' title="' + esc(v.title + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc(label(v)) + '" draggable="true">' +
+      '<span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
+      (v.preview
+        ? '<button type="button" class="tab-x tab-keep" data-tab-keep="' + esc(v.id) + '" title="Keep open" aria-label="' + esc('Keep ' + v.title + ' open') + '"><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 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></button>'
+        : '<button type="button" class="tab-x" data-tab-close="' + esc(v.id) + '" title="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button>') +
+      '</div>'
+  }).join('')
+  return '<div class="tabstrip-in">' + board + '<div class="tab-scroll" role="list">' + tabs + '</div></div>' +
+    '<button type="button" class="tab-all" id="tabAll" title="All open sessions" aria-label="All open sessions (' + views.length + ')" aria-haspopup="menu"' + (views.length ? '' : ' hidden') + '>' + DOTS + '</button>'
+}
+
+// The menu behind ⋯ (picker.js's action menu): every open session, in order.
+export function allTabsItems(views, activeId) {
+  return [{ label: 'Board', attrs: { 'data-tab-go': '#/' }, on: activeId == null }].concat(views.map((v) => ({
+    label: v.title + (v.preview ? ' (preview)' : ''), sub: [v.working ? 'Claude is working' : '', v.needs ? 'Needs you' : ''].filter(Boolean).join(' · ') || undefined,
+    on: v.id === activeId, attrs: { 'data-tab-go': v.href },
+  })))
+}
+
+// The phone's Open row on the board: the same order, the same marks, the preview in italics.
+export function openRowHtml(views, esc) {
+  if (!views.length) return ''
+  return '<div class="openrow-h"><span>Open</span><span class="faint">' + views.length + '</span></div><div class="openrow-chips">' + views.map((v) =>
+    '<span class="ochip-cell' + (v.preview ? ' preview' : '') + '"><a class="ochip' + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '" aria-label="' + esc(label(v)) + '"><span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
+    (v.preview ? '' : '<button type="button" class="ochip-x" data-tab-close="' + esc(v.id) + '" aria-label="' + esc('Close ' + v.title) + '" title="Close">' + X + '</button>') + '</span>').join('') + '</div>'
+}
+
+// A session page on a phone: "2 of 4" with ‹ › (44px) for people who don't swipe,
+// and Keep open on a preview.
+export function pagerHtml(m, id, views, esc) {
+  const n = neighbours(m, id)
+  if (!n.index || n.count < 2) {
+    const v = views.find((x) => x.id === String(id))
+    return v && v.preview ? '<div class="pager-in"><span class="pager-n faint">Preview</span><button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button></div>' : ''
+  }
+  const byId = (x) => views.find((v) => v.id === x)
+  const v = byId(String(id))
+  const btn = (to, dir) => {
+    const t = to ? byId(to) : null
+    return t ? '<a class="pager-b pager-' + dir + '" href="' + esc(t.href) + '" data-tab="' + esc(t.id) + '" data-pager="' + dir + '" aria-label="' + esc((dir === 'prev' ? 'Previous: ' : 'Next: ') + t.title) + '" title="' + esc(t.title) + '">' + (dir === 'prev' ? PREV : NEXT) + '</a>'
+      : '<span class="pager-b pager-' + dir + ' off" aria-hidden="true">' + (dir === 'prev' ? PREV : NEXT) + '</span>'
+  }
+  return '<div class="pager-in">' + btn(n.prev, 'prev') + '<span class="pager-n" aria-live="polite">' + n.index + ' of ' + n.count + '<span class="lo-vh"> open sessions</span></span>' +
+    (v && v.preview ? '<button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button>' : '') + btn(n.next, 'next') + '</div>'
+}
+
+// A horizontal swipe on a phone's session page: which way, or null. Mostly
+// sideways (twice as far across as down), at least 60px, quick (under 700ms).
+export function swipeDir(dx, dy, ms) {
+  if (Math.abs(dx) < 60 || Math.abs(dx) < 2 * Math.abs(dy) || ms > 700) return null
+  return dx < 0 ? 'next' : 'prev'
+}