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

package/docs/peer-protocol.md

@@ -111,6 +111,8 @@ Only Macs registered for that user can connect: the first with `leftoff relay re
 
 Every few seconds (`peers.pollMs`, default 4 s) each daemon asks every machine that accepts for `needs.list`, so another Mac's permission prompts and questions show on this board with a ⌂ machine chip. Answer, reply and Go on another machine's session go out as envelopes. When that isn't possible, the button is grey and says why: not allowed on that machine, unreachable, key changed, no key yet (that Mac needs 0.5.2), or no route. Answering from a phone keeps its own rules (Settings → Privacy & security), and Go stays a local-browser action.
 
+Phone notifications (0.9.8) ride the same envelopes: `push.sync` carries the Web Push subscriptions a browser turned on (endpoint, keys, a device label) with the VAPID keys they were made with, plus 30-day removal tombstones; each side merges (newer word per endpoint wins) and answers with its own, so every Mac can push for its own sessions and only those. It is answered even when a Mac doesn't allow incoming commands, because it runs nothing there. Kept on each Mac in `~/.config/checkpoints/push/` (0600), never in the synced folder. Shared when a device subscribes or unsubscribes, at start, and every 20 minutes.
+
 ## Pairing through Syncthing (0.5.3)
 
 Before two Macs share a folder they have no channel to each other, so pairing rides on Syncthing itself. Leftoff never opens a port for it.

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.8-beta.6",
+  "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.6' // 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.6",
+  "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; } }
 
@@ -2313,3 +2313,91 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .card > .actions-row > .btn.icon-btn { width: 44px; }
   .card > .actions-row > .btn:not(.icon-btn) { min-width: 44px; }
 }
+
+/* Phone notifications (0.9.8): the one per-device button, in More and Settings → General */
+.push-slot[hidden] { display: none; }
+.push-box { display: flex; gap: 10px; align-items: flex-start; }
+.push-box > .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--muted); }
+.push-main { min-width: 0; flex: 1; }
+.push-line { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text2); }
+.push-line strong { color: var(--text); font-weight: 600; }
+.push-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.push-acts .btn { min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; justify-content: center; }
+.push-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
+.push-note.bad { color: var(--red, #c0392b); }
+.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,8 +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
@@ -2616,6 +2618,7 @@ async function viewSettings() {
     general: '<div class="section">Needs you</div>' +
       '<label for="f-notify">Notify me</label><label class="check"><input id="f-notify" type="checkbox"' + (c.notify && c.notify.needsYou === false ? '' : ' checked') + '><span>Show a notification when a prompt or question has waited ' + esc((c.notify && c.notify.delaySec != null) ? c.notify.delaySec : 10) + ' seconds</span></label>' +
       '<div class="hint">With <code>terminal-notifier</code>, a click jumps to the session.</div>' +
+      '<div class="full push-slot" data-push-slot hidden></div>' +
       '<div class="section">Appearance</div>' +
       '<label>Theme</label><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div>' +
       advanced('general', '<label for="f-dormant">Dormant after (min)</label><input id="f-dormant" type="number" min="1" step="1" value="' + esc(c.dormantAfterMin) + '">' +
@@ -3378,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()
@@ -3392,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>'
@@ -3499,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') })
@@ -3533,6 +3538,7 @@ function openMore() {
   if (!m) return
   closeQuickLook(); toggleStatus(false)
   paintMoreDots()
+  paintPush()
   m.hidden = false
   if (b) b.setAttribute('aria-expanded', 'true')
   const first = m.querySelector('a.on') || m.querySelector('a')
@@ -3661,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.
@@ -3669,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) => {
@@ -4973,3 +5187,6 @@ connect()
 // The home-screen app's service worker (v0.4.6): it only serves an offline page
 // when the Mac can't be reached; it caches no API data and no board pages.
 if ('serviceWorker' in navigator && window.isSecureContext) navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => {})
+// 0.9.8: phone notifications. The one per-device button (More on a phone,
+// Settings → General everywhere); the service worker shows the pushes.
+mountPush({ api })

package/ui/index.html

@@ -46,6 +46,7 @@
     <a href="#/digest" data-route="digest" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span>Digest</span></a>
     <a href="#/whats-new" data-route="whats-new" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span>What’s new</span><span class="newdot" hidden></span></a>
     <a href="#/settings" data-route="settings" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span>Settings</span><span class="topdot" hidden></span></a>
+    <div class="push-slot" data-push-slot role="group" aria-label="Notifications" hidden></div>
   </div>
   <div class="quicklook" id="quickLook" role="dialog" aria-labelledby="qlTitle" hidden></div>
   <div class="statuspop" id="statusPop" role="dialog" aria-label="Status" hidden></div>
@@ -56,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/live-status.js

@@ -12,6 +12,10 @@
 //     └─► failed                       └─► stopped (the turn ended with no answer)
 //   received/working with nothing new for LIVE_QUIET_MS reads "quiet" until
 //   something happens again; replied and failed are final.
+//   A message that arrived while Claude was already working on another one is
+//   folded into that turn (folded: the id of the message that owns the turn):
+//   it has no Working bubble of its own, and when the turn ends it is
+//   "Answered with the reply above".
 
 export const LIVE_QUIET_MS = 3 * 60 * 1000
 export const LIVE_PHASES = ['sent', 'received', 'working', 'replied', 'stopped', 'failed']
@@ -22,7 +26,7 @@ const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, '
 export function initStatus(at = 0) { return { phase: 'sent', at, last: at, tool: null, waiting: null, ran: [], endedAt: null } }
 
 // One thing that happened to the message. ev: { type, at, tool?, detail?, asked?, text? }
-//   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended
+//   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended | folded | answered | lost
 export function stepStatus(st, ev = {}) {
   const s = { ...(st || initStatus(ev.at || 0)), ran: [...((st && st.ran) || [])] }
   const at = ev.at || s.last
@@ -43,6 +47,8 @@ export function stepStatus(st, ev = {}) {
     case 'ask_done': s.waiting = null; break
     case 'reply': s.phase = 'replied'; s.tool = null; s.waiting = null; s.endedAt = at; break
     case 'ended': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = ev.text ? 'replied' : 'stopped'; break
+    case 'folded': if (s.phase === 'sent' || s.phase === 'received') s.phase = 'working'; s.folded = ev.owner || true; s.tool = null; s.waiting = null; break
+    case 'answered': s.phase = 'replied'; s.folded = ev.owner || s.folded || true; s.tool = null; s.waiting = null; s.endedAt = at; break // folded: the reply above is its answer
     case 'lost': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = 'stopped'; s.lost = true; break // a restart came in between and no answer is in the transcript
     default: return s
   }
@@ -53,22 +59,23 @@ export function stepStatus(st, ev = {}) {
 // The line under the message: { label, steps, spin, tone, elapsedMs }
 export function statusView(st, now = Date.now()) {
   if (!st) return null
-  const quiet = (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
+  const quiet = !st.folded && (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
   const elapsedMs = Math.max(0, (st.endedAt || now) - (st.at || now))
   let label
   if (st.phase === 'sent') label = 'Sent, waiting for the session'
   else if (st.phase === 'received') label = quiet ? 'Received · no word from Claude yet' : 'Received · Claude is starting…'
+  else if (st.phase === 'working' && st.folded) label = 'Taken into the turn above'
   else if (st.phase === 'working') {
     if (st.waiting) label = 'Waiting for your OK' + (st.waiting.tool ? ' (' + st.waiting.tool + (st.waiting.detail ? ': ' + st.waiting.detail : '') + ')' : '')
     else if (st.tool) label = 'Claude is working… (running ' + st.tool.name + (st.tool.detail ? ': ' + st.tool.detail : '') + ')'
     else label = quiet ? 'Claude has been quiet for a while (check the terminal)' : 'Claude is working…'
-  } else if (st.phase === 'replied') label = 'Replied'
+  } else if (st.phase === 'replied') label = st.folded ? 'Answered with the reply above' : 'Replied'
   else if (st.phase === 'stopped') label = st.lost ? 'No reply recorded' : 'Stopped without a reply'
   else label = 'Didn’t arrive'
   const at = { sent: 0, received: 1, working: 2, replied: 3, stopped: 3, failed: 0 }[st.phase] || 0
   const steps = ['Sent', 'Received', st.phase === 'stopped' ? (st.lost ? 'No reply' : 'Stopped') : 'Working', st.phase === 'stopped' ? null : 'Replied'].filter(Boolean)
     .map((name, i) => ({ name, state: st.phase === 'failed' ? (i === 0 ? 'bad' : 'todo') : i < at ? 'done' : i === at ? (FINAL.has(st.phase) || st.phase === 'stopped' ? 'done' : 'now') : 'todo' }))
-  const spin = !quiet && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
+  const spin = !quiet && !st.folded && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
   const tone = st.phase === 'failed' ? 'bad' : st.phase === 'stopped' || quiet || st.waiting ? 'warn' : st.phase === 'replied' ? 'good' : 'busy'
   return { label, steps, spin, tone, quiet, elapsedMs, final: FINAL.has(st.phase) || st.phase === 'stopped' }
 }