@leftoff/cli 0.9.9-beta.8 → 0.9.9-beta.9

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.9-beta.8",
+  "version": "0.9.9-beta.9",
   "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.9-beta.8' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.9-beta.9' // 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.9-beta.8",
+  "version": "0.9.9-beta.9",
   "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

@@ -2114,16 +2114,28 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .lv-tick { margin-top: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }
 .lv-tick.got span { color: var(--accent); letter-spacing: -2px; padding-right: 2px; }
 .lv-tick.bad { color: var(--red); text-align: left; }
-/* 0.9.9 Queued: sent while Claude works, not taken in yet: dimmed, a dashed edge, Queued (not Working) */
-.lv-you.lv-queued { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
-.lv-you.lv-queued .lv-text, .lv-you.lv-queued .lv-who, .lv-you.lv-queued .att-bubble { opacity: .62; }
-.lv-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
-.lv-q-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
-.lv-q-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
+/* 0.9.9 Queued: sent while Claude works, not taken in yet: dimmed, a dashed edge, Queued (not Working).
+   Compact: no sender line, a long one folds to two lines (a tap opens it), and one small row
+   "◷ Queued · Send now · Edit · Cancel" of text buttons, each with a 44px hit area (the
+   negative margins keep the row 18px tall and the words evenly spaced; neighbours' hit
+   areas don't overlap). Several stack tight. */
+.lv-you.lv-queued { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); padding: 6px 10px; margin-bottom: 6px; }
+.lv-you.lv-queued .lv-text, .lv-you.lv-queued .att-bubble { opacity: .62; }
+.lv-you.lv-queued .lv-text { margin-top: 0; }
+.lv-queued .lv-q-long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; cursor: pointer; border-radius: 4px; }
+.lv-queued .lv-q-long.open { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
+.lv-queued .lv-q-long:focus:not(:focus-visible) { outline: none; }
+.lv-queued .lv-q-long:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.lv-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 5px; row-gap: 0; margin-top: 4px; min-height: 18px; font-size: 12.5px; line-height: 18px; color: var(--muted); }
+.lv-q-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
+.lv-q-tag::before { content: "◷"; font-size: 13px; font-weight: 400; }
+.lv-q-dot { opacity: .7; }
 .lv-q-hint { color: var(--muted); }
-.lv-q-acts { display: inline-flex; gap: 6px; }
-.lv-q-btn { min-height: 44px; min-width: 64px; padding: 0 14px; font-size: 14px; }
+.lv-q-btn { background: none; border: 0; box-shadow: none; margin: -13px -4px; padding: 0 4px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--accent); cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
+.lv-q-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
 .lv-q-btn:focus:not(:focus-visible) { outline: none; }
+.lv-q-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; }
+.lv-q-btn:disabled { opacity: .45; cursor: default; text-decoration: none; }
 .lv-working .lvs-line { margin-top: 0; }
 .lv-pending .lv-working { margin-top: 4px; }
 .lvs-sep { color: var(--faint); }

package/ui/app.js

@@ -2120,6 +2120,26 @@ document.addEventListener('visibilitychange', onWake)
 // 0.9.9 Cancel / Edit on a Queued message: the daemon takes it back from
 // Claude Code's queue (only while it still waits; too late says so plainly).
 // Edit then puts its words (and files) back in the box, after anything typed.
+// 0.9.9 Send now on a Queued message: Claude stops its current step and this
+// one runs next (ahead of any queued before it). The daemon says what Claude
+// Code did; too late (Claude already has it) is a plain message.
+async function sendNowClick(btn) {
+  const box = btn.closest('.live-box')
+  const sid = box && box.dataset.id
+  const msg = btn.dataset.msg
+  if (!sid || !msg || btn.disabled) return
+  const li = btn.closest('.lv')
+  if (li) li.querySelectorAll('.lv-q-btn').forEach((b) => { b.disabled = true })
+  btn.setAttribute('aria-busy', 'true')
+  try {
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/live/' + encodeURIComponent(msg) + '/sendnow', {})
+    toast(r.result === 'stopped' ? 'Sent now · Claude stopped its step for it' : 'Sending now', 3000)
+  } catch (e) {
+    toast(e.message, 4200)
+  }
+  await refreshLive('sendnow')
+  await render()
+}
 async function queuedClick(btn, edit) {
   const box = btn.closest('.live-box')
   const sid = box && box.dataset.id
@@ -5336,7 +5356,7 @@ window.addEventListener('hashchange', () => closeActionMenu())
 const tipsUi = wireTips(document) // 0.9.8: the ⓘ tooltips (Always allow here)
 window.addEventListener('hashchange', () => tipsUi.hide())
 // 0.8.9: a session page's title is a button too (Enter or Space renames it)
-document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"]')) { e.preventDefault(); t.click() } })
+document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"], .lv-q-long[role="button"]')) { e.preventDefault(); t.click() } })
 // 0.8.7: a card's ⋯ opens from the keyboard with the arrows too (Enter and Space click it).
 document.addEventListener('keydown', (ev) => {
   const b = ev.target && ev.target.closest && ev.target.closest('[data-action="card-more"]')
@@ -5828,6 +5848,8 @@ document.addEventListener('click', async (ev) => {
     if (action === 'reply-send') return replyClick(btn)
     if (action === 'live-send') return liveSendClick(btn)
     if (action === 'lv-queued-cancel' || action === 'lv-queued-edit') return queuedClick(btn, action === 'lv-queued-edit')
+    if (action === 'lv-queued-now') return sendNowClick(btn)
+    if (action === 'lv-queued-more') { if (ev.target.closest('a[href]')) return; const open = !btn.classList.contains('open'); btn.classList.toggle('open', open); btn.setAttribute('aria-expanded', open ? 'true' : 'false'); return }
     if (action === 'attach') { const inp = btn.closest('.composer') && btn.closest('.composer').querySelector('.att-input'); if (inp && !inp.disabled) inp.click(); return }
     if (action === 'att-remove') return removeAttachment(btn.dataset.lid)
     if (action === 'att-retry') return retryAttachment(btn.dataset.lid)

package/ui/live-status.js

@@ -18,7 +18,8 @@
 //   "Answered with the reply above".
 //   0.9.9: until Claude takes it in (at its next step, or when the turn ends)
 //   such a message is Queued (queued: true; cancellable: Leftoff can still take
-//   it back). Anything Claude does with it ends that.
+//   it back; sendNow: Send now can make it run next). Anything Claude does
+//   with it ends that.
 
 export const LIVE_QUIET_MS = 3 * 60 * 1000
 export const LIVE_PHASES = ['sent', 'received', 'working', 'replied', 'stopped', 'failed']
@@ -34,10 +35,10 @@ const KEEPS_QUEUED = new Set(['delivered', 'queued', 'ask_done', 'noop'])
 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')) { if (s.queued) { delete s.queued; delete s.cancellable } return s }
-  if (s.queued && !KEEPS_QUEUED.has(ev.type)) { delete s.queued; delete s.cancellable }
+  if (FINAL.has(s.phase) && !(s.phase === 'replied' && ev.type === 'tool_done')) { if (s.queued) { delete s.queued; delete s.cancellable; delete s.sendNow } return s }
+  if (s.queued && !KEEPS_QUEUED.has(ev.type)) { delete s.queued; delete s.cancellable; delete s.sendNow }
   switch (ev.type) {
-    case 'queued': if (s.phase === 'sent' || s.phase === 'received') { s.queued = true; s.cancellable = !!ev.cancellable } else return s; break
+    case 'queued': if (s.phase === 'sent' || s.phase === 'received') { s.queued = true; s.cancellable = !!ev.cancellable; if (ev.cancellable && ev.sendNow) s.sendNow = true; else delete s.sendNow } else return s; break
     case 'unqueued': break
     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

package/ui/live-view.js

@@ -225,7 +225,10 @@ export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, at
   if (m.from === 'claude') body = '<div class="lv-text lv-md">' + (md ? md(m.text || '') : esc(m.text || '')) + '</div>'
   else if (m.from === 'you') {
     const a = messageAttachments(m)
-    body = (a.text || !a.attachments.length ? '<div class="lv-text lv-md">' + (md ? md(a.text) : esc(a.text)) + '</div>' : '') + (a.attachments.length && attHtml ? attHtml(a.attachments, m) : '')
+    // 0.9.9 Queued: a long one folds to two lines; a tap opens it in place
+    const fold = isQueued(m.status) && queuedLong(a.text)
+    const open = fold ? ' lv-q-long" role="button" tabindex="0" aria-expanded="false" aria-label="Show the whole message" data-action="lv-queued-more' : ''
+    body = (a.text || !a.attachments.length ? '<div class="lv-text lv-md' + open + '">' + (md ? md(a.text) : esc(a.text)) + '</div>' : '') + (a.attachments.length && attHtml ? attHtml(a.attachments, m) : '')
   } else if (m.from === 'terminal') 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 = ''
@@ -246,7 +249,10 @@ export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, at
   }
   const queued = m.from === 'you' && isQueued(m.status)
   const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '') + (queued ? '|q' + (may ? 1 : 0) : '')
-  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + (queued ? ' lv-queued' : '') + '" 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>'
+  // 0.9.9: a Queued one is compact: no "You · from this Mac 10:04 PM" line
+  // (it comes back once Claude takes the message in)
+  const head = queued ? '' : '<div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' ' + timeHtml(m.at, { esc, now }) + '</div>'
+  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + (queued ? ' lv-queued' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '">' + head + body + foot + '</li>'
 }
 
 const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
@@ -262,18 +268,25 @@ export function deliveryHtml(st, { esc, error = null }) {
   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>'
 }
 
-// 0.9.9 Under a message still waiting behind Claude's turn: "Queued", then
-// Edit and Cancel where Leftoff can truly take it back (a session Leftoff runs,
-// and you may send from this device), else the plain fact. No tooltip.
+// 0.9.9 Under a message still waiting behind Claude's turn, one small row:
+// "◷ Queued · Send now · Edit · Cancel". Send now where Claude Code can make it
+// run next (a session Leftoff runs, a CLI with Send now); Edit and Cancel where
+// Leftoff can truly take it back; and only if you may send from this device.
+// Otherwise the plain fact. Small text buttons, each with a 44px hit area
+// (app.css). No tooltip.
 export function queuedHtml(m, { esc, may = true }) {
   const st = m.status || {}
   const id = esc(m.id || '')
+  const dot = '<span class="lv-q-dot" aria-hidden="true">·</span>'
+  const btn = (action, label, aria) => dot + '<button type="button" class="lv-q-btn" data-action="' + action + '" data-msg="' + id + '" aria-label="' + aria + '">' + label + '</button>'
   const acts = st.cancellable && may
-    ? '<span class="lv-q-acts"><button type="button" class="btn lv-q-btn" data-action="lv-queued-edit" data-msg="' + id + '" aria-label="Edit this queued message">Edit</button>' +
-      '<button type="button" class="btn lv-q-btn" data-action="lv-queued-cancel" data-msg="' + id + '" aria-label="Cancel this queued message">Cancel</button></span>'
-    : '<span class="lv-q-hint">Claude reads it after its current step</span>'
+    ? (st.sendNow ? btn('lv-queued-now', 'Send now', 'Send now: Claude stops its current step') : '') +
+      btn('lv-queued-edit', 'Edit', 'Edit this queued message') + btn('lv-queued-cancel', 'Cancel', 'Cancel this queued message')
+    : dot + '<span class="lv-q-hint">Claude reads it after its current step</span>'
   return '<div class="lv-q" role="status"><span class="lv-q-tag">Queued</span>' + acts + '</div>'
 }
+// A queued message longer than about two lines folds (tap to open in place).
+export function queuedLong(text) { const t = String(text || '').trim(); return t.length > 80 || t.includes('\n') }
 
 // "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) {
@@ -381,7 +394,7 @@ 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.attachments || []).map((a) => a.id), 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.status.queued, !!m.status.cancellable], m.done, m.ranWithoutAsking, m.errorText]) }
+export function entrySig(m) { return JSON.stringify([m.text, (m.attachments || []).map((a) => a.id), 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.status.queued, !!m.status.cancellable, !!m.status.sendNow], m.done, m.ranWithoutAsking, m.errorText]) }
 
 // ------------------------------------------------------------ the DOM keeper