npm - @leftoff/cli - Versions diffs - 0.9.7 → 0.9.8-beta.10 - Mend

@leftoff/cli 0.9.7 → 0.9.8-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/CHANGELOG.md +39 -0
package/bin/leftoff.js +414 -379
package/docs/SECURITY.md +10 -0
package/docs/peer-protocol.md +2 -0
package/mod/.claude-plugin/plugin.json +1 -1
package/mod/hooks/core.js +14 -4
package/mod/hooks/register.js +1 -1
package/package.json +1 -1
package/ui/app.css +425 -1
package/ui/app.js +952 -40
package/ui/index.html +18 -6
package/ui/live-status.js +97 -0
package/ui/live-view.js +374 -0
package/ui/live-wake.js +96 -0
package/ui/nav.js +88 -0
package/ui/navhide.js +35 -0
package/ui/needs.js +33 -2
package/ui/pull.js +31 -0
package/ui/push.js +140 -0
package/ui/relay-client.js +70 -5
package/ui/restore-gate.js +26 -2
package/ui/sw.js +66 -6
package/ui/tabs.js +216 -0
package/ui/tips.js +117 -0

package/ui/index.html CHANGED Viewed

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

@@ -0,0 +1,97 @@
+// 0.9.8 Live link: what a message sent from the board is doing right now,
+// shared by the daemon (src/live-link.js keeps it per message) and the board
+// (which draws it with a spinner and the time since Send).
+//
+// Channels can't stream tokens: Claude answers in one go. What we do see is
+// the channel's delivery (received), the mod's hooks for that session (a turn
+// started, a turn ended), the session's transcript as it is written (each
+// tool call and each block of text) and permission prompts. Those move one
+// message through:
+//
+//   sent ─► received ─► working (running Bash: ls · waiting for your OK) ─► replied
+//     └─► 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']
+const FINAL = new Set(['replied', 'failed'])
+const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t }
+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 | 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
+  if (FINAL.has(s.phase) && !(s.phase === 'replied' && ev.type === 'tool_done')) return s
+  switch (ev.type) {
+    case 'delivered': if (s.phase === 'sent') s.phase = 'received'; break
+    case 'failed': if (s.phase === 'sent') { s.phase = 'failed'; s.error = ev.error || null; s.endedAt = at } break
+    case 'started': case 'text': if (s.phase !== 'replied') s.phase = 'working'; if (ev.type === 'text') s.waiting = null; break
+    case 'tool': s.phase = 'working'; s.tool = { name: clip(ev.tool, 40), detail: clip(ev.detail, 300) }; s.waiting = null; break
+    case 'tool_done': {
+      const name = clip(ev.tool || (s.tool && s.tool.name), 40)
+      if (name) s.ran.push({ tool: name, detail: clip(ev.detail || (s.tool && s.tool.detail), 300), asked: !!ev.asked })
+      if (s.ran.length > 20) s.ran = s.ran.slice(-20)
+      s.tool = null; s.waiting = null
+      break
+    }
+    case 'ask': s.phase = 'working'; s.waiting = { tool: clip(ev.tool, 40), detail: clip(ev.detail, 300) }; break
+    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
+  }
+  s.last = at
+  return s
+}
+// The line under the message: { label, steps, spin, tone, elapsedMs }
+export function statusView(st, now = Date.now()) {
+  if (!st) return null
+  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 = 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.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' }
+}
+// 4s, 1m 05s, 12m
+export function elapsedText(ms) {
+  const s = Math.max(0, Math.round(Number(ms || 0) / 1000))
+  if (s < 60) return s + 's'
+  const m = Math.floor(s / 60)
+  return m < 10 ? m + 'm ' + String(s % 60).padStart(2, '0') + 's' : m + 'm'
+}
+// The tools that ran in this turn without a permission prompt: a note under the reply.
+export function ranWithoutAsking(st) {
+  const seen = new Set()
+  const out = []
+  for (const r of (st && st.ran) || []) { if (r.asked || seen.has(r.tool)) continue; seen.add(r.tool); out.push(r.tool) }
+  return out
+}

package/ui/live-view.js ADDED Viewed

@@ -0,0 +1,374 @@
+// 0.9.8 Live link on the board: the pieces of the Live box and the live card
+// that are pure (and unit tested), plus the small DOM keeper that lets the Live
+// thread survive the board's re-renders: the same list element stays on the
+// page, messages are diffed in, and it sticks to the bottom only when you are
+// already there.
+import { statusView, elapsedText, ranWithoutAsking } from './live-status.js'
+const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t }
+export const isLiveSession = (s) => !!(s && s.liveLink && s.liveLink.on && !s.endedAt && s.live !== 'closed')
+// The name a session goes by. A live session is never "Untitled": until it has
+// a title (its first prompt, Claude Code's /rename, a generated one) it goes by
+// its repo and branch.
+export function sessionTitle(s, { untitled = 'Untitled session' } = {}) {
+  if (!s) return untitled
+  const wrapped = isWrapped(s.title)
+  if (s.title && !wrapped) return s.title
+  // No name yet (or a raw <channel …> one an earlier beta kept): the first
+  // prompt's words, which another Mac's older Leftoff may have sent without a title.
+  const first = promptLine(s.firstPrompt) || (wrapped ? promptLine(s.title) : '')
+  if (first && (isLiveSession(s) || wrapped)) return first
+  if (isLiveSession(s)) {
+    const repo = s.repoLabel || s.repoName || (s.repo && s.repo.name) || null
+    const branch = s.branch || (s.repo && s.repo.branch) || null
+    const where = [repo, branch && branch !== repo ? branch : null].filter(Boolean).join(' · ')
+    if (where) return where
+    return 'Live session'
+  }
+  return untitled
+}
+// Is the card's name just where it runs ("repo · branch")? Then the repo chip
+// under it would say the same thing twice.
+export function titleIsWhere(s) {
+  if (!s || !isLiveSession(s)) return false
+  const t = sessionTitle(s)
+  const repo = s.repoLabel || s.repoName || (s.repo && s.repo.name) || ''
+  const branch = s.branch || (s.repo && s.repo.branch) || ''
+  return !!repo && (t === repo || t === repo + ' · ' + branch)
+}
+const isWrapped = (t) => /^\s*<channel\b/.test(String(t || ''))
+const NOISE_LINE = /^\s*<\/?(local-command-\w+|command-\w+|system-reminder|pasted_content)\b/
+// The first line of a prompt in its own words: no channel wrapper (even one
+// cut short), no system reminders; 60 characters at most.
+export function promptLine(text) {
+  let t = String(text || '').replace(/^\s*<channel\b[^>]*>?/, '').replace(/<\/channel>\s*$/, '').replace(/<system-reminder>[\s\S]*?(<\/system-reminder>|$)/g, '')
+  t = t.split('\n').map((l) => l.trim()).find((l) => l && !NOISE_LINE.test(l)) || ''
+  t = t.replace(/\s+/g, ' ')
+  return t.length > 60 ? t.slice(0, 59) + '…' : t
+}
+// A title as HTML that wraps where it reads: after a "/" in a repo or branch
+// (and at the spaces around " · "), not in the middle of a word.
+export function titleHtml(text, esc) {
+  return esc(String(text == null ? '' : text)).split('/').join('/<wbr>')
+}
+// Which pills a card shows: a live session that is just waiting for you shows
+// one Live pill (never "dormant"); one that is working or needs you shows that too.
+export function cardPills(s) {
+  const live = isLiveSession(s)
+  const st = s && s.status
+  if (!live) return { status: st || null, live: false }
+  return { status: ['active', 'needs_input', 'background'].includes(st) ? st : null, live: true }
+}
+// Is Claude running a turn in this live session right now? The Live pill's dot
+// pulses while it is. The same signals the board already shows: the session's
+// own status (a turn typed in the terminal, which the hooks see start), or the
+// board message whose turn is still going, read the way its Working bubble
+// reads it (spinning: sent, received or working; not waiting for your OK, not
+// gone quiet). Idle, waiting on you, or another Mac's daemon that doesn't say:
+// a steady dot.
+export function liveWorking(s, now = Date.now()) {
+  if (!cardPills(s).live) return false
+  if (s.status === 'active') return true
+  const t = s.liveLink && s.liveLink.turn
+  if (!t || !t.phase) return false
+  const v = statusView(t, now)
+  return !!(v && v.spin)
+}
+const LIVE_TIP = 'Live link: send this session messages from the board or your phone'
+export function liveBadgeHtml(s, now = Date.now()) {
+  if (!cardPills(s).live) return ''
+  const w = liveWorking(s, now)
+  return ' <span class="pill live-pill' + (w ? ' working' : '') + '" title="' + (w ? 'Claude is working on a turn · ' : '') + LIVE_TIP + '">Live</span>'
+}
+// The board redraws a card (innerHTML) on every update, which would restart a
+// CSS pulse each time: a visible hitch every second or so while a session
+// works. Pinning every pulse to the page's own clock (start time 0) makes a
+// fresh element pick up exactly where the one it replaced was, and keeps the
+// dots on the page beating together. Reduced motion has no animations to pin.
+export const PULSE_NAMES = new Set(['live-pulse', 'pulse', 'needpulse'])
+export function lockPulses(doc) {
+  if (!doc || typeof doc.getAnimations !== 'function') return 0
+  let n = 0
+  for (const a of doc.getAnimations()) {
+    if (!PULSE_NAMES.has(a.animationName) || a.startTime === 0) continue
+    try { a.startTime = 0; n++ } catch {}
+  }
+  return n
+}
+// The "N empty sessions" fold never takes a live session.
+export function foldsAsEmpty(s) { return !!(s && s.empty && !s.pinned && !(s.needsYou && s.needsYou.blocking) && !isLiveSession(s)) }
+// Who sent a message: "You · from <device>". The path (relay, direct,
+// Tailscale) is added only when it explains something: the message didn't arrive.
+const PATHS = { relay: 'through the relay', direct: 'direct', tailscale: 'over Tailscale', peer: 'through another Mac', local: null }
+export function senderLabel(m) {
+  if (!m) return ''
+  if (m.from === 'claude') return 'Claude'
+  if (m.from === 'event') return 'Event' + (m.source ? ' · ' + m.source : '')
+  if (m.from === 'terminal') return 'You · terminal' // typed in Claude Code itself (from its transcript)
+  if (m.history && !m.by) return 'You · board'
+  const by = m.by || {}
+  let device = by.device || null
+  if (!device && by.transport === 'local') device = 'this Mac'
+  if (!device && m.where) { // older entries: just the where line
+    const w = String(m.where)
+    device = /^on this machine/.test(w) ? 'this Mac' : (w.match(/ as ([^(·]+?)(?: \(|$| ·)/) || [])[1] || (w.match(/^from (.+?)’s board/) || [])[1] || null
+  }
+  let label = 'You' + (device ? ' · from ' + device : '')
+  const path = PATHS[by.transport] || null
+  if (path && m.state === 'failed') label += ' (' + path + ')'
+  return label
+}
+export function senderTitle(m) {
+  const by = (m && m.by) || {}
+  const path = PATHS[by.transport] || null
+  return [by.device ? 'From ' + by.device : null, path ? 'Path: ' + path : by.transport === 'local' ? 'Path: this Mac' : null].filter(Boolean).join(' · ') || (m && m.where) || ''
+}
+// Stick to the bottom? Only when you are already within `slack` px of it.
+export function atBottom({ scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = {}, slack = 80) {
+  return scrollHeight - clientHeight - scrollTop <= slack
+}
+// "Jump to latest ↓": shown whenever a thread that scrolls is away from its bottom, with the
+// count of what came in since when there is any; at the bottom it's hidden and nothing is unseen.
+export function jumpView(box = {}, unseen = 0) {
+  const { scrollHeight = 0, clientHeight = 0 } = box || {}
+  const away = scrollHeight > clientHeight + 1 && !atBottom(box)
+  const n = away && unseen > 0 ? unseen : 0
+  return { show: away, unseen: n, count: n > 0 ? ' · ' + n + ' new' : '', label: 'Jump to latest message' + (n > 0 ? ' (' + n + ' new)' : '') }
+}
+// After new content: follow it, or leave the view where it is and count what is new.
+export function scrollDecision({ wasAtBottom, newCount = 0, unseen = 0 }) {
+  if (wasAtBottom) return { follow: true, unseen: 0 }
+  return { follow: false, unseen: unseen + Math.max(0, newCount) }
+}
+// #/s/<id>/live: the session page, scrolled to the Live box with its input ready.
+export function liveHref(id) { return '#/s/' + encodeURIComponent(String(id)) + '/live' }
+export function parseLiveRoute(hash) {
+  const h = String(hash || '').replace(/^#\/?/, '').split('?')[0]
+  const p = h.split('/').filter(Boolean)
+  return p[0] === 's' && p[1] && p[2] === 'live' ? decodeURIComponent(p[1]) : null
+}
+// An unread dot on the Chat button: Claude replied after you last looked.
+export function hasUnread(lastReplyAt, seenAt) {
+  const r = Date.parse(lastReplyAt || '')
+  if (isNaN(r)) return false
+  const s = Date.parse(seenAt || '')
+  return isNaN(s) || r > s
+}
+// ------------------------------------------------------------ the thread's HTML
+// opts: { esc, ago, md (markdown -> html), now }
+export function entryKey(m) { return String(m.id || '') + ':' + m.from }
+// "Show earlier" at the top of the thread, when older turns are left out.
+export function earlierHtml(n, { esc }) {
+  if (!(n > 0)) return ''
+  return '<li class="lv-earlier" data-key="earlier" data-sig="' + esc(String(n)) + '" data-older="1"><button type="button" class="btn live-earlier" data-action="live-earlier">Show earlier <span class="faint">(' + esc(String(n)) + (n === 1 ? ' turn' : ' turns') + ')</span></button></li>'
+}
+// A message's time is when it was sent (a clock time today, the date before):
+// a relative "just now" drawn once stays "just now" while the bubble sits there.
+export function sentLabel(iso, now = Date.now()) {
+  const t = iso ? Date.parse(iso) : NaN
+  if (!Number.isFinite(t)) return ''
+  const d = new Date(t), n = new Date(now)
+  const today = d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth() && d.getDate() === n.getDate()
+  return today ? d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+}
+function timeHtml(iso, { esc, now }) {
+  const label = sentLabel(iso, now)
+  if (!label) return ''
+  const full = new Date(Date.parse(iso)).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+  return '<time class="faint" datetime="' + esc(new Date(Date.parse(iso)).toISOString()) + '" title="' + esc(full) + '">' + esc(label) + '</time>'
+}
+export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null }) {
+  const who = senderLabel(m)
+  const title = m.from === 'you' ? senderTitle(m) : ''
+  let body
+  if (m.from === 'claude') body = '<div class="lv-text lv-md">' + (md ? md(m.text || '') : esc(m.text || '')) + '</div>'
+  else body = '<div class="lv-text">' + esc(m.text || '') + '</div>'
+  let foot = ''
+  if (m.from === 'claude') {
+    // what Claude did for this turn sits with Claude's answer: still working, the tools it ran, the note
+    const st = status || null
+    if (st && !m.done && !FINAL_PHASES.has(st.phase)) foot += workingHtml(st, { esc, now })
+    else if (!m.done) foot += '<div class="lv-note">Still writing…</div>'
+    if (st && (st.ran || []).length) foot += toolsHtml(st, { esc, now, open: false })
+    const ran = (m.ranWithoutAsking || []).length ? m.ranWithoutAsking : []
+    if (ran.length) foot += '<div class="lv-note">Ran without asking: ' + esc(ran.join(', ')) + ' <span class="faint">(read-only or allowed in your Claude Code settings, so no Allow/Deny)</span></div>'
+  } else if (m.status) {
+    foot = deliveryHtml(m.status, { esc, error: m.errorText })
+  } else if (m.state) {
+    foot = '<div class="lv-tick ' + (m.state === 'failed' ? 'bad' : '') + '">' + esc(m.state === 'failed' ? (m.errorText || 'Didn’t arrive') : m.state === 'received' ? 'Received ✓✓' : 'Sent ✓') + '</div>'
+  }
+  const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '')
+  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' ' + timeHtml(m.at, { esc, now }) + '</div>' + body + foot + '</li>'
+}
+const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
+const statusSig = (st) => JSON.stringify([st.phase, st.tool, st.waiting, (st.ran || []).length, st.endedAt, st.lost])
+// Under your message: only whether it got there, like a chat app.
+export function deliveryHtml(st, { esc, error = null }) {
+  if (!st) return ''
+  if (st.phase === 'failed') return '<div class="lv-tick bad" role="status">' + esc(error || 'Didn’t arrive') + '</div>'
+  const got = st.phase !== 'sent'
+  // folded into a turn Claude was already on: the reply above answers it too, no Working bubble of its own
+  if (st.folded) return '<div class="lv-tick got lv-folded" role="status" title="It arrived while Claude was working, so Claude took it into that turn">Received <span aria-hidden="true">✓✓</span> · ' + esc(st.phase === 'replied' ? 'Answered with the reply above' : 'Taken into the turn above') + '</div>'
+  return '<div class="lv-tick' + (got ? ' got' : '') + '" title="' + esc(got ? 'Claude Code received it' : 'Waiting for the session to pick it up') + '">' + (got ? 'Received <span aria-hidden="true">✓✓</span>' : 'Sent <span aria-hidden="true">✓</span>') + '</div>'
+}
+// "git -C /a/b diff --cached --quiet" → "git -C /a… --cached --quiet": the start and the end stay visible.
+export function midClip(s, n = 56) {
+  const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim()
+  if (t.length <= n) return t
+  const head = Math.ceil((n - 1) * 0.55)
+  return t.slice(0, head) + '…' + t.slice(t.length - (n - 1 - head))
+}
+const toolLine = (name, detail, { esc, cls = '' }) => '<div class="lv-tool mono' + (cls ? ' ' + cls : '') + '"' + (detail ? ' title="' + esc(name + ' · ' + detail) + '"' : '') + '>' + esc(name) + (detail ? ' · ' + esc(midClip(detail)) : '') + '</div>'
+// The live line on Claude's side: spinner, "Working · 45s", what it is running now, the last few it ran.
+export function workingHtml(st, { esc, now = Date.now() }) {
+  const v = statusView(st, now)
+  if (!v) return ''
+  let label
+  if (st.waiting) label = 'Waiting for your OK'
+  else if (v.quiet) label = 'Quiet for a while · check the terminal'
+  else if (st.phase === 'sent') label = 'Waiting for the session'
+  else if (st.phase === 'received') label = 'Starting'
+  else label = 'Working'
+  let html = '<div class="lv-status lv-working ' + v.tone + '" data-since="' + esc(String(st.at || '')) + '" role="status"><div class="lvs-line">' + (v.spin ? '<span class="lv-spin" aria-hidden="true"></span>' : '') + '<span class="lvs-label">' + esc(label) + '</span><span class="lvs-sep" aria-hidden="true">·</span><span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div>'
+  const recent = (st.ran || []).slice(-3)
+  for (const r of recent) html += toolLine(r.tool, r.detail, { esc, cls: 'done' })
+  if (st.waiting) html += toolLine(st.waiting.tool || 'a tool', st.waiting.detail, { esc, cls: 'now' })
+  else if (st.tool) html += toolLine(st.tool.name, st.tool.detail, { esc, cls: 'now' })
+  return html + '</div>'
+}
+// After the turn: the tools folded into "Ran 3 commands".
+export function toolsHtml(st, { esc, now = Date.now(), open = false }) {
+  const ran = (st && st.ran) || []
+  if (!ran.length) return ''
+  const bash = ran.every((r) => r.tool === 'Bash')
+  const what = bash ? (ran.length === 1 ? 'Ran 1 command' : 'Ran ' + ran.length + ' commands') : (ran.length === 1 ? 'Used 1 tool' : 'Used ' + ran.length + ' tools')
+  const v = statusView(st, now)
+  const time = v && v.final && st.endedAt ? ' · ' + elapsedText(v.elapsedMs) : ''
+  return '<details class="lv-tools"' + (open ? ' open' : '') + '><summary>' + esc(what + time) + '</summary>' + ran.map((r) => toolLine(r.tool, r.detail, { esc })).join('') + '</details>'
+}
+// Claude's side before its answer lands (or when none came): the same bubble the answer replaces.
+export function pendingClaudeHtml(you, { esc, ago, now = Date.now() }) {
+  const st = you.status
+  const key = 'ans_' + you.id + ':claude'
+  let inner
+  if (st.phase === 'stopped') inner = '<div class="lv-text lv-none">' + esc(st.lost ? 'No reply recorded' : 'Stopped without a reply') + '</div>' + toolsHtml(st, { esc, now })
+  else if (st.phase === 'replied') inner = '<div class="lv-text lv-none">Replied in the terminal</div>' + toolsHtml(st, { esc, now }) // settled, its words not kept: never a Working bubble
+  else inner = workingHtml(st, { esc, now })
+  return '<li class="lv lv-claude lv-pending' + (FINAL_PHASES.has(st.phase) ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st))) + '"><div class="lv-who">Claude ' + timeHtml(st.last ? new Date(st.last).toISOString() : you.at, { esc, now }) + '</div>' + inner + '</li>'
+}
+// The whole thread: each message you sent, then Claude's side of that turn.
+export function threadHtml(msgs, opts) {
+  const list = msgs || []
+  const byId = new Map(list.filter((m) => m.from !== 'claude' && m.id).map((m) => [m.id, m]))
+  const answered = new Set(list.filter((m) => m.from === 'claude' && m.replyTo).map((m) => m.replyTo))
+  let html = ''
+  for (const m of list) {
+    if (m.from === 'claude') { const you = m.replyTo ? byId.get(m.replyTo) : null; html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null }); continue }
+    html += entryHtml(m, opts)
+    if (m.status && !m.status.folded && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') html += pendingClaudeHtml(m, opts)
+  }
+  return html
+}
+export function statusHtml(st, { esc, now = Date.now(), error = null }) {
+  const v = statusView(st, now)
+  if (!v) return ''
+  const label = st.phase === 'failed' && error ? error : v.label
+  const steps = v.steps.map((x) => '<span class="lvs-step ' + x.state + '">' + esc(x.name) + '</span>').join('<span class="lvs-arrow" aria-hidden="true">→</span>')
+  return '<div class="lv-status ' + v.tone + '" data-since="' + esc(String(st.at || '')) + '"' + (v.final ? ' data-final="' + esc(String(st.endedAt || '')) + '"' : '') + ' role="status">' +
+    (st.phase === 'replied' // done: the steps say it all, with the time it took
+      ? '<div class="lvs-steps">' + steps + '<span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div></div>'
+      : '<div class="lvs-steps">' + steps + '</div>' +
+        '<div class="lvs-line">' + (v.spin ? '<span class="lv-spin" aria-hidden="true"></span>' : '') + '<span class="lvs-label">' + esc(label) + '</span><span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div></div>')
+}
+export { ranWithoutAsking }
+// A content signature, to replace only the entries that changed (the time-ago
+// text is left out so a minute ticking over doesn't redraw a reply).
+function sigHash(s) { let h = 5381; for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0; return (h >>> 0).toString(36) }
+export function entrySig(m) { return JSON.stringify([m.text, m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt, m.status.folded || null], m.done, m.ranWithoutAsking, m.errorText]) }
+// ------------------------------------------------------------ the DOM keeper
+// A freshly drawn thread (a page load or refresh) opens at its latest message,
+// and stays there while late layout (fonts, code blocks) settles, unless you
+// scroll up in the meantime.
+export function pinToBottom(ol, { raf = (typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (f) => setTimeout(f, 16)), fonts = (typeof document !== 'undefined' && document.fonts) || null } = {}) {
+  let pinned = -1
+  const pin = () => { if (pinned >= 0 && ol.scrollTop < pinned - 4) return; ol.scrollTop = ol.scrollHeight; pinned = ol.scrollTop }
+  pin()
+  raf(() => { pin(); raf(pin) })
+  setTimeout(pin, 250)
+  if (fonts && fonts.ready && fonts.ready.then) fonts.ready.then(pin, () => {})
+}
+// Keeps the thread's <ol> across re-renders of the session page.
+export function createLiveKeeper() {
+  const kept = { sid: null, wrap: null, unseen: 0 }
+  return {
+    // Before the page is replaced: hold on to the current thread.
+    before(root) {
+      const w = root && root.querySelector('.live-thread')
+      // a detached element loses its scroll position (WebKit), so remember it and put it back in after()
+      const ol = w && w.querySelector('.live-log')
+      kept.scroll = ol ? { top: ol.scrollTop, bottom: atBottom(ol) } : null
+      if (w) { kept.wrap = w; kept.sid = w.dataset.sid; w.remove() } else { kept.wrap = null; kept.sid = null }
+    },
+    // After: put the old thread back in place of the new one and diff the new entries in.
+    after(root) {
+      const fresh = root && root.querySelector('.live-thread')
+      if (!fresh) { kept.wrap = null; return null }
+      const old = kept.wrap
+      if (!old || old.dataset.sid !== fresh.dataset.sid) { kept.unseen = 0; const ol = fresh.querySelector('.live-log'); if (ol) pinToBottom(ol); return { thread: fresh, follow: true, first: true } }
+      const oldOl = old.querySelector('.live-log'), newOl = fresh.querySelector('.live-log')
+      fresh.replaceWith(old)
+      if (!oldOl || !newOl) { if (newOl && !oldOl) old.replaceWith(fresh); return { thread: oldOl ? old : fresh, follow: true } }
+      if (kept.scroll) oldOl.scrollTop = kept.scroll.top
+      const wasAtBottom = kept.scroll ? kept.scroll.bottom : atBottom(oldOl)
+      const fromBottom = oldOl.scrollHeight - oldOl.scrollTop
+      const have = new Map([...oldOl.children].map((li) => [li.dataset.key, li]))
+      let added = 0, older = 0
+      let prev = null
+      let seenKept = false
+      for (const li of [...newOl.children]) {
+        const cur = have.get(li.dataset.key)
+        have.delete(li.dataset.key)
+        // added above everything already shown ("Show earlier"): older, not new
+        // Claude's "Working" bubble isn't news by itself; the answer that replaces it is
+        if (!cur) { if (seenKept && !li.dataset.older) { if (!li.dataset.pending) added++ } else older++; prev ? prev.after(li) : oldOl.prepend(li); prev = li; continue }
+        if (!cur.dataset.older) seenKept = true
+        if (cur.dataset.sig !== li.dataset.sig) { if (cur.dataset.pending && !li.dataset.pending) added++; cur.replaceWith(li); prev = li } else prev = cur
+      }
+      for (const li of have.values()) li.remove()
+      const d = scrollDecision({ wasAtBottom, newCount: added, unseen: kept.unseen })
+      kept.unseen = d.unseen
+      if (d.follow) oldOl.scrollTop = oldOl.scrollHeight
+      else if (older) oldOl.scrollTop = oldOl.scrollHeight - fromBottom // keep what you were reading in place
+      return { thread: old, follow: d.follow, unseen: d.unseen }
+    },
+    seen() { kept.unseen = 0 },
+    get unseen() { return kept.unseen },
+  }
+}