harlay 0.1.2 → 0.2.0

package/app/renderer/popover.js

@@ -6,22 +6,24 @@ const api = window.harlay ?? demoApi();
 
 const ICON = {
   gear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>',
-  sun: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>',
-  moon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>',
-  copy: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5V3.8a1.3 1.3 0 0 0-1.3-1.3H3.8a1.3 1.3 0 0 0-1.3 1.3v5.4a1.3 1.3 0 0 0 1.3 1.3h1.7"/></svg>',
-  back: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.5 5.5 8l4.5 4.5"/></svg>',
-  chev: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 3.5 4.5 4.5L6 12.5"/></svg>',
-  doc: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 1.8h5l3 3v9.4H4z"/><path d="M9 1.8v3h3M6 8.5h4M6 11h4"/></svg>',
+  back: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.5 5.5 8l4.5 4.5"/></svg>',
+  plus: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>',
+  arrow: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg>',
+  fresh: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8a5 5 0 1 1-1.6-3.7"/><path d="M13.2 2.5v3h-3"/></svg>',
+  gauge: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 11.5a6 6 0 1 1 11 0"/><path d="M8 9.5 10.8 6"/><circle cx="8" cy="10" r=".9" fill="currentColor"/></svg>',
+  list: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5.5 4h8M5.5 8h8M5.5 12h8"/><circle cx="2.6" cy="4" r=".6" fill="currentColor"/><circle cx="2.6" cy="8" r=".6" fill="currentColor"/><circle cx="2.6" cy="12" r=".6" fill="currentColor"/></svg>',
+  copy: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><rect x="5.5" y="5.5" width="8" height="8" rx="1.6"/><path d="M10.5 3.2V3a.9.9 0 0 0-.9-.9H3.4a.9.9 0 0 0-.9.9v6.2a.9.9 0 0 0 .9.9h.3"/></svg>',
 };
-const TAG = { limit: 'Stopped', warning: 'Near limit', handed_off: 'Handed off' };
+const TITLE = { usage: 'Usage', settings: 'Settings' };
+const BADGE = { 'claude-code': 'CC', codex: 'CX', cursor: 'CU' };
+const AGENT_LABEL = { 'claude-code': 'Claude Code', codex: 'Codex', cursor: 'Cursor' };
+const HEALTH_LABEL = { fresh: 'Healthy', long: 'Getting long', struggling: 'Running low' };
 
 let model = null;
 let view = 'home';
 let openKey = null;
-/** The brief being previewed: { key, title, loading } or { key, title, path, text } or { key, title, error }. */
-let brief = null;
-let copied = false;
-const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+/** The open "add a chat by ID" form: { tool, value, busy, error }. */
+let adding = null;
 
 const $ = (sel) => document.querySelector(sel);
 
@@ -38,6 +40,11 @@ function h(tag, props, ...kids) {
   return el;
 }
 
+/** Replaces a section's content; empty values (null, false) are skipped, as in h(). */
+function put(sel, ...kids) {
+  $(sel).replaceChildren(...kids.flat(Infinity).filter((k) => k != null && k !== false));
+}
+
 function icon(name, cls) {
   const t = document.createElement('template');
   t.innerHTML = ICON[name];
@@ -46,82 +53,157 @@ function icon(name, cls) {
   return svg;
 }
 
-function plural(n, word) {
-  return `${n} ${word}${n === 1 ? '' : 's'}`;
+/** The agent's app icon, or a lettered badge when its app isn't installed (or in the browser demo). */
+function agentIcon(tool) {
+  const src = model.icons?.[tool];
+  return src ? h('img', { class: 'agent', src, alt: '' }) : h('span', { class: 'agent badge', 'aria-hidden': 'true' }, BADGE[tool] ?? '?');
 }
 
-function renderHero() {
-  const { sessions, tools } = model;
-  const stopped = sessions.filter((s) => s.status === 'limit').length;
-  const installed = tools.filter((t) => t.app || t.terminal).length;
-  if (!sessions.length) {
-    return h('div', { class: 'hero' }, h('h1', {}, 'No sessions yet.'), h('p', {}, 'Start Claude Code, Codex or Cursor and they show up here.'));
-  }
-  if (stopped) {
-    return h('div', { class: 'hero' },
-      h('h1', {}, stopped === 1 ? 'One agent ' : `${stopped} agents `, h('em', {}, 'stopped.')),
-      h('p', {}, 'Hand it off and keep going.'));
-  }
-  return h('div', { class: 'hero' },
-    h('h1', {}, 'Nothing is ', h('em', {}, 'stuck.')),
-    h('p', {}, `${plural(sessions.length, 'recent session')} · ${plural(installed, 'agent')} ready`));
-}
+// ---- home: chats grouped by agent ----
 
-function renderSession(s, showRepo) {
+function renderSession(s) {
   const open = s.key === openKey;
-  const meta = [s.toolLabel, showRepo ? s.repo : null, s.ago].filter(Boolean).join(' · ');
-  const tool = (t) => model.tools.find((x) => x.tool === t.tool);
-  const actions = s.busy
-    ? h('div', { class: 'busy' }, h('span', { class: 'spin' }), 'Handing off…')
-    : h('div', { class: 'targets' }, s.targets.map((t) =>
-        h('button', {
-          class: `btn${t.isDefault && t.enabled ? ' primary' : ''}`,
-          disabled: !t.enabled,
-          title: t.enabled ? null : `${t.label} isn't available in ${tool(t).mode === 'app' ? 'App' : 'Terminal'} mode`,
-          onclick: () => api.act({ type: 'handoff', key: s.key, target: t.tool }),
-        }, t.label)));
   return h('div', { class: `item${open ? ' open' : ''}` },
-    h('button', {
-      class: 'row',
-      'aria-expanded': String(open),
-      onclick: () => { openKey = open ? null : s.key; render(); },
-    },
-      h('span', { class: `st ${s.status}` }),
-      h('span', { class: 'main' }, h('span', { class: 'title' }, s.title), h('span', { class: 'meta' }, meta)),
-      TAG[s.status] ? h('span', { class: `tag ${s.status}` }, TAG[s.status]) : null,
-      icon('chev', 'chev')),
+    h('button', { class: 'row', 'aria-expanded': String(open), title: s.title, onclick: () => { openKey = open ? null : s.key; render(); } },
+      h('span', { class: `st ${s.status}` }, s.status === 'idle' ? null : h('i')),
+      h('span', { class: 'title' }, s.title),
+      healthBattery(s.health),
+      h('span', { class: 'time' }, s.ago)),
     h('div', { class: 'drawer' },
       s.status !== 'idle' ? h('p', { class: 'detail' }, s.detail) : null,
-      s.cwd ? h('p', { class: 'path', title: s.cwd }, s.cwd) : null,
-      h('p', { class: 'sub' }, 'Hand off to'),
-      actions,
-      h('button', { class: 'link', onclick: () => previewBrief(s) }, icon('doc'), 'Preview brief')));
+      deliveryLinks(s),
+      healthCard(s),
+      h('p', { class: 'sub' }, s.health && s.health.state !== 'fresh' ? 'Or continue in' : 'Continue in'),
+      s.busy
+        ? h('div', { class: 'busy' }, h('span', { class: 'spin' }), 'Handing off…')
+        : s.targets.length
+          ? h('div', { class: 'targets' }, s.targets.map((t) =>
+              h('button', { class: 'btn', onclick: () => api.act({ type: 'handoff', key: s.key, target: t.tool }) }, agentIcon(t.tool), t.label)))
+          : h('p', { class: 'muted-note' }, 'No other agent is installed.'),
+      s.pinned ? h('div', { class: 'links' }, h('button', { class: 'link quiet', onclick: () => api.act({ type: 'unpinChat', key: s.key }) }, 'Remove from list')) : null,
+      s.cwd ? h('p', { class: 'path', title: s.cwd }, s.cwd) : null));
 }
 
-function previewBrief(s) {
-  brief = { key: s.key, title: s.title, loading: true };
-  copied = false;
-  view = 'brief';
-  render();
-  api.act({ type: 'previewBrief', key: s.key });
+/** A handoff the agent hasn't read yet: send it again, or copy its prompt to paste into any chat. */
+function deliveryLinks(s) {
+  if (!s.delivery || s.delivery === 'read') return null;
+  const copy = h('button', { class: 'link', onclick: () => { api.act({ type: 'copyPrompt', key: s.key }); copy.lastChild.textContent = 'Copied'; } }, icon('copy'), h('span', {}, 'Copy prompt'));
+  return h('div', { class: 'links' },
+    h('button', { class: 'link', onclick: () => api.act({ type: 'resendHandoff', key: s.key }) }, icon('arrow'), 'Open again'),
+    copy);
 }
 
+// ---- chat health ----
+
 /**
- * Stopped and near-limit sessions first, then everything else grouped by project (most recent project first,
- * as the sessions arrive newest first).
+ * The chat's battery: one look per state, no finer than the state (the signals are risks, not a measurement): full and
+ * green when healthy, half and amber when getting long, low and red when struggling. The word is in the tooltip.
  */
-function groupSessions(sessions) {
-  const attention = sessions.filter((s) => s.status === 'limit' || s.status === 'warning');
-  const projects = new Map();
-  for (const s of sessions) {
-    if (attention.includes(s)) continue;
-    const key = s.cwd ?? '';
-    if (!projects.has(key)) projects.set(key, { title: s.repo ?? 'No project folder', path: s.cwd, sessions: [] });
-    projects.get(key).sessions.push(s);
+const BATTERY = { fresh: 17, long: 9, struggling: 3 };
+
+function healthBattery(health, size = '') {
+  if (!health) return null;
+  const charge = BATTERY[health.state];
+  const t = document.createElement('template');
+  t.innerHTML = `<svg class="battery ${health.state}" viewBox="0 0 24 12" aria-hidden="true"><rect class="b-case" x=".75" y=".75" width="20.5" height="10.5" rx="2.6"/><rect class="b-nub" x="22" y="3.9" width="1.6" height="4.2" rx=".8"/><rect class="b-fill" x="2.5" y="2.5" width="${charge}" height="7" rx="1.3"/></svg>`;
+  return h('span', { class: `hw ${size}`, title: HEALTH_LABEL[health.state], role: 'img', 'aria-label': `Chat health: ${HEALTH_LABEL[health.state]}` }, t.content.firstElementChild);
+}
+
+/** A reason with its `command` shown as code. */
+function reasonText(text) {
+  return text.split(/(`[^`]+`)/).map((part) => (/^`[^`]+`$/.test(part) ? h('code', {}, part.slice(1, -1)) : part));
+}
+
+/** "850", "42K", "1.2M", as the reasons write token counts. */
+function formatTokens(n) {
+  return n >= 1_000_000 ? `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M` : n >= 1000 ? `${Math.round(n / 1000)}K` : String(n);
+}
+
+function healthCard(s) {
+  const hl = s.health;
+  if (!hl) return null;
+  const label = `New chat in ${s.agentLabel}`;
+  // Each number appears once: a long context's reason has the count, otherwise it gets a line of its own.
+  const tokens = hl.context?.tokens ?? null;
+  const size = tokens !== null && !hl.reasons.some((r) => r.startsWith('Long context')) ? `${formatTokens(tokens)} tokens` : null;
+  // A healthy chat has nothing to explain: just its size.
+  if (hl.state === 'fresh') return size ? h('p', { class: 'detail h-size' }, size) : null;
+  const lines = size ? [...hl.reasons, size] : hl.reasons;
+  // The state in words, then why: the specific reasons are what to weigh.
+  return h('div', { class: `health ${hl.state}` },
+    h('p', { class: 'h-state' }, HEALTH_LABEL[hl.state]),
+    lines.length ? h('ul', { class: 'h-why' }, lines.map((r) => h('li', {}, reasonText(r)))) : null,
+    s.busy
+      ? null
+      : s.canStartFresh
+        ? h('button', { class: 'btn', title: 'A new chat that picks up where this one left off', onclick: () => api.act({ type: 'freshStart', key: s.key }) }, icon('fresh'), label)
+        : h('p', { class: 'muted-note' }, `${s.agentLabel} isn’t installed in its mode, so a new chat can’t open here.`));
+}
+
+function renderAddForm(g) {
+  if (adding?.tool !== g.tool) return null;
+  const input = h('input', {
+    type: 'text',
+    value: adding.value,
+    placeholder: `Paste a ${g.label} chat ID`,
+    spellcheck: 'false',
+    disabled: adding.busy,
+    oninput: (e) => { adding.value = e.target.value; adding.error = null; },
+    onkeydown: (e) => {
+      if (e.key === 'Enter') submitAdd();
+      if (e.key === 'Escape') { e.stopPropagation(); adding = null; render(); }
+    },
+  });
+  return [
+    h('div', { class: 'add-form' }, input, h('button', { class: 'btn primary', disabled: adding.busy, onclick: submitAdd }, adding.busy ? 'Adding…' : 'Add')),
+    adding.error ? h('p', { class: 'add-error' }, adding.error) : null,
+  ];
+}
+
+async function submitAdd() {
+  if (!adding || adding.busy || !adding.value.trim()) return;
+  adding.busy = true;
+  render();
+  const res = await api.addChat(adding.tool, adding.value.trim()).catch(() => null);
+  if (res?.ok) adding = null;
+  else adding = { ...adding, busy: false, error: res?.error ?? 'Couldn’t add that chat.' };
+  render();
+}
+
+function renderGroup(g) {
+  const formOpen = adding?.tool === g.tool;
+  return h('section', { class: 'grp' },
+    h('div', { class: 'grp-h' },
+      agentIcon(g.tool),
+      h('span', { class: 'grp-name' }, g.label),
+      h('button', {
+        class: 'add',
+        'aria-expanded': String(formOpen),
+        'aria-label': `Add a ${g.label} chat by ID`,
+        title: `Add a ${g.label} chat by ID`,
+        onclick: () => { adding = formOpen ? null : { tool: g.tool, value: '', busy: false, error: null }; render(); },
+      }, icon('plus'))),
+    renderAddForm(g),
+    g.sessions.length ? g.sessions.map((s) => renderSession({ ...s, agentLabel: g.label })) : h('p', { class: 'none' }, 'No chats yet'));
+}
+
+function renderHome() {
+  const { groups } = model;
+  put('#home', 
+    groups.length
+      ? h('div', { class: 'scroll' }, groups.map(renderGroup))
+      : h('p', { class: 'empty' }, 'Install Claude Code, Codex or Cursor and their chats show up here.'),
+    model.usage?.length ? h('button', { class: 'more', onclick: () => go('usage') }, icon('gauge', 'gauge'), 'Check agent usage', icon('arrow', 'arrow')) : null);
+  // Keep focus in the add-a-chat field across re-renders.
+  const field = $('#home .add-form input');
+  if (field && !adding?.busy) {
+    field.focus();
+    field.setSelectionRange(field.value.length, field.value.length);
   }
-  return { attention, projects: [...projects.values()] };
 }
 
+// ---- usage ----
+
 /** A bar's fill. The page's CSP forbids style attributes, so the width is set through the CSSOM. */
 function fill(pct, cls) {
   const el = h('i', { class: cls });
@@ -129,10 +211,16 @@ function fill(pct, cls) {
   return el;
 }
 
+function toggleRow(label, hint, checked, action, disabled = false) {
+  return h('div', { class: 'set-row' },
+    h('span', { class: 'k' }, label, hint ? h('span', { class: 'hint' }, hint) : null),
+    h('button', { class: 'switch', role: 'switch', disabled, 'aria-checked': String(checked), 'aria-label': label, onclick: () => api.act(action) }));
+}
+
 /** Per-agent usage: a bar per window (≈ marks Harlay's estimate), then reset time, pace and notes. */
 function renderUsage() {
-  const rows = model.usage ?? [];
-  if (!rows.length) return null;
+  const { usage, settings } = model;
+  const level = (pct) => (pct >= 90 ? 'hot' : pct >= 70 ? 'warm' : '');
   const ask = model.askClaudeBridge
     ? h('div', { class: 'ask' },
         h('p', { class: 'ask-title' }, 'Show Claude’s exact usage?'),
@@ -141,240 +229,212 @@ function renderUsage() {
           h('button', { class: 'btn primary', onclick: () => api.act({ type: 'answerClaudeBridge', allow: true }) }, 'Allow'),
           h('button', { class: 'btn', onclick: () => api.act({ type: 'answerClaudeBridge', allow: false }) }, 'Not now')))
     : null;
-  return h('div', { class: 'usage' },
-    h('div', { class: 'label' }, 'Usage'),
+  const hasClaude = usage.some((r) => r.tool === 'claude-code');
+  put('#usage', 
     ask,
-    rows.map((r) => {
-      const level = (pct) => (pct >= 90 ? ' hot' : pct >= 70 ? ' warm' : '');
-      const meta = [r.windows.length === 1 ? r.windows[0].resets : null, r.pace, r.note].filter(Boolean);
-      return h('div', { class: 'u-row' },
-        h('div', { class: 'u-name' }, r.label),
-        h('div', { class: 'u-body' },
+    h('div', { class: 'u' },
+      usage.map((r) => {
+        const meta = [r.windows.length === 1 ? r.windows[0].resets : null, r.pace, r.note].filter(Boolean);
+        return h('div', { class: 'u-agent' },
+          h('div', { class: 'u-head' }, agentIcon(r.tool), h('span', { class: 'grp-name' }, r.label)),
           r.windows.map((w) => h('div', { class: 'u-win', title: w.exact ? 'Reported by the agent' : 'Harlay’s estimate from your session logs' },
             h('span', { class: 'u-lbl' }, w.label),
             h('span', { class: 'u-bar' }, fill(w.pct, level(w.pct))),
             h('span', { class: 'u-pct' }, `${w.exact ? '' : '≈'}${w.pct}%`),
             r.windows.length > 1 && w.resets ? h('span', { class: 'u-reset' }, w.resets.replace('resets ', '')) : null)),
           meta.length || r.usagePage
-            ? h('div', { class: 'u-meta' }, meta.join(' · '),
-                r.usagePage ? h('button', { class: 'link inline', onclick: () => api.act({ type: 'openCursorUsage' }) }, 'Open usage page') : null)
-            : null));
-    }));
+            ? h('p', { class: 'u-meta' }, meta.join(' · '),
+                r.usagePage ? h('button', { class: 'link', onclick: () => api.act({ type: 'openCursorUsage' }) }, 'Open usage page') : null)
+            : null);
+      })),
+    hasClaude && !model.askClaudeBridge
+      ? h('div', { class: 'set' }, toggleRow(
+          'Exact Claude usage',
+          settings.claudeBridge === 'unavailable'
+            ? 'Claude Code’s ~/.claude/settings.json isn’t valid JSON, so Harlay leaves it alone.'
+            : 'Read from Claude Code’s status line in Terminal.',
+          settings.claudeBridge === 'on',
+          { type: 'toggleClaudeBridge' },
+          settings.claudeBridge === 'unavailable'))
+      : null);
 }
 
-function renderHome() {
-  const { sessions } = model;
-  if (!sessions.length) {
-    $('#home').replaceChildren(renderHero(), renderUsage(), h('p', { class: 'empty' }, 'Harlay reads session logs from ~/.claude, ~/.codex and ~/.cursor on this Mac.'));
-    return;
-  }
-  const { attention, projects } = groupSessions(sessions);
-  $('#home').replaceChildren(
-    renderHero(),
-    renderUsage(),
-    h('div', { class: 'scroll' },
-      attention.length ? [h('div', { class: 'label group attn' }, 'Needs attention'), attention.map((s) => renderSession(s, true))] : null,
-      projects.map((p) => [
-        h('div', { class: 'label group', title: p.path }, p.title, h('span', { class: 'count' }, String(p.sessions.length))),
-        p.sessions.map((s) => renderSession(s, false)),
-      ])));
-}
+// ---- settings ----
 
 function seg(options, current, onPick) {
   return h('div', { class: 'seg', role: 'group' }, options.map((o) =>
-    h('button', { 'aria-pressed': String(o.value === current), disabled: o.disabled, onclick: () => onPick(o.value) }, o.label)));
-}
-
-function toggleRow(label, hint, checked, action, disabled = false) {
-  return h('div', { class: 'set-row' },
-    h('span', { class: 'k' }, label, hint ? h('span', { class: 'hint' }, hint) : null),
-    h('button', { class: 'switch', role: 'switch', disabled, 'aria-checked': String(checked), 'aria-label': label, onclick: () => api.act(action) }));
+    h('button', { 'aria-pressed': String(o.value === current), onclick: () => onPick(o.value) }, o.label)));
 }
 
 function renderSettings() {
-  const { settings, tools } = model;
-  $('#settings').replaceChildren(
-    h('div', { class: 'hero' }, h('h1', {}, 'Settings'), h('p', {}, 'Where stalled work goes, and how.')),
-    h('div', { class: 'set' },
-      h('div', { class: 'label' }, 'Default target'),
-      seg(tools.map((t) => ({ value: t.tool, label: t.label })), settings.defaultTarget, (v) => api.act({ type: 'setDefault', target: v })),
-      h('div', { class: 'label' }, 'Open targets in'),
-      tools.map((t) => h('div', { class: 'set-row' },
-        h('span', { class: 'k' }, t.label),
-        seg([
-          { value: 'app', label: 'App', disabled: !t.app },
-          { value: 'terminal', label: 'Terminal', disabled: !t.terminal },
-        ], t.mode, (m) => api.act({ type: 'setMode', target: t.tool, mode: m })))),
-      h('div', { class: 'label' }, 'Appearance'),
+  const { settings } = model;
+  put('#settings', h('div', { class: 'set' },
+    h('div', { class: 'set-row' },
+      h('span', { class: 'k' }, 'Appearance'),
       seg([
         { value: 'system', label: 'System' },
         { value: 'light', label: 'Light' },
         { value: 'dark', label: 'Dark' },
-      ], settings.theme, (v) => api.act({ type: 'setTheme', theme: v })),
-      h('div', { class: 'label' }, 'Behavior'),
-      toggleRow('Auto-continue', 'Hand off without asking when an agent stops', settings.autoContinue, { type: 'toggleAuto' }),
-      toggleRow('Open at login', null, settings.openAtLogin, { type: 'toggleLogin' }),
-      h('div', { class: 'label' }, 'Usage'),
-      toggleRow(
-        'Exact Claude usage',
-        settings.claudeBridge === 'unavailable'
-          ? 'Claude Code’s ~/.claude/settings.json isn’t valid JSON, so Harlay leaves it alone.'
-          : 'Claude Code in Terminal passes its real usage to Harlay through its status line. Your own status line keeps working; turning this off restores it.',
-        settings.claudeBridge === 'on',
-        { type: 'toggleClaudeBridge' },
-        settings.claudeBridge === 'unavailable')));
+      ], settings.theme, (v) => api.act({ type: 'setTheme', theme: v }))),
+    toggleRow('Auto-continue', 'Hand off without asking when an agent stops', settings.autoContinue, { type: 'toggleAuto' }),
+    toggleRow('Open at login', null, settings.openAtLogin, { type: 'toggleLogin' })));
 }
 
-/** Inline markdown: `code` and **bold**; everything else stays plain text. */
-function inline(text) {
-  const out = [];
-  text.split(/(`[^`]+`)/).forEach((part) => {
-    if (/^`[^`]+`$/.test(part)) return out.push(h('code', {}, part.slice(1, -1)));
-    part.split(/(\*\*[^*]+\*\*)/).forEach((p) => {
-      if (/^\*\*[^*]+\*\*$/.test(p)) out.push(h('strong', {}, p.slice(2, -2)));
-      else if (p) out.push(p.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'));
-    });
-  });
-  return out;
+function findSession(key) {
+  for (const g of model.groups) for (const s of g.sessions) if (s.key === key) return s;
+  return null;
 }
 
-/** Just enough markdown for HANDOFF.md: headings, quotes, lists, checkboxes, code blocks and paragraphs. */
-function markdown(src) {
-  let text = src.replace(/\r\n/g, '\n');
-  if (text.startsWith('---\n')) {
-    const end = text.indexOf('\n---\n', 4);
-    if (end !== -1) text = text.slice(end + 5);
-  }
-  const lines = text.split('\n');
-  const out = [];
-  let list = null;
-  let quote = null;
-  let para = [];
-  const flush = () => {
-    if (para.length) out.push(h('p', {}, inline(para.join(' '))));
-    para = [];
-    list = null;
-    quote = null;
-  };
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    let m;
-    if (line.startsWith('```')) {
-      flush();
-      const code = [];
-      while (++i < lines.length && !lines[i].startsWith('```')) code.push(lines[i]);
-      out.push(h('pre', {}, code.join('\n')));
-    } else if ((m = /^(#{1,6})\s+(.*)$/.exec(line))) {
-      flush();
-      out.push(h(m[1].length === 1 ? 'h3' : 'h4', {}, inline(m[2])));
-    } else if ((m = /^>\s?(.*)$/.exec(line))) {
-      if (para.length || list) flush();
-      if (!quote) out.push((quote = h('blockquote', {})));
-      if (m[1]) quote.append(h('p', {}, inline(m[1])));
-    } else if ((m = /^\s*(?:[-*]|\d+\.)\s+(?:\[([ xX])\]\s+)?(.*)$/.exec(line))) {
-      if (para.length || quote) flush();
-      if (!list) out.push((list = h('ul', {})));
-      const box = m[1] === undefined ? null : h('span', { class: `box${m[1] === ' ' ? '' : ' done'}` });
-      list.append(h('li', {}, box, inline(m[2])));
-    } else if (line.trim() === '') {
-      flush();
-    } else if (line.startsWith('|')) {
-      flush();
-      out.push(h('pre', {}, line));
-    } else {
-      if (list || quote) flush();
-      para.push(line.trim());
-    }
+function findTool(key) {
+  for (const g of model.groups) if (g.sessions.some((s) => s.key === key)) return g.tool;
+  return null;
+}
+
+// ---- router (⌥H): the latest chat, branching to the agents it can continue in ----
+
+/** Usage of an agent's fullest window, for the thin meter under its icon. */
+function usageOf(tool) {
+  const row = model.usage?.find((u) => u.tool === tool);
+  if (!row || !row.windows.length) return null;
+  return Math.max(...row.windows.map((w) => w.pct));
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/** Curves from the chat down to each tile; the selected one is drawn in the accent color and flows. */
+function routeLines(n, selected) {
+  const W = 320, H = 46, x0 = W / 2;
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+  svg.setAttribute('class', 'r-lines');
+  svg.setAttribute('aria-hidden', 'true');
+  for (let i = 0; i < n; i++) {
+    const x = ((i + 0.5) * W) / n;
+    const p = document.createElementNS(SVG_NS, 'path');
+    p.setAttribute('d', `M${x0} 0 C ${x0} ${H * 0.55}, ${x} ${H * 0.45}, ${x} ${H}`);
+    p.setAttribute('class', i === selected ? 'on' : '');
+    svg.append(p);
   }
-  flush();
+  const dot = document.createElementNS(SVG_NS, 'circle');
+  dot.setAttribute('cx', String(x0));
+  dot.setAttribute('cy', '2');
+  dot.setAttribute('r', '2.5');
+  svg.append(dot);
+  return svg;
+}
+
+/** The router's choices: other agents (default first), then a new chat in the same agent. */
+function routeChoices(s, tool) {
+  const out = s.targets.map((t) => ({ tool: t.tool, label: t.label, mode: t.mode, act: { type: 'handoff', key: s.key, target: t.tool } }));
+  // Not when this agent just hit its limit: a new chat with it would stop too.
+  if (s.canStartFresh && s.status !== 'limit') out.push({ tool, label: 'New chat', mode: null, fresh: true, act: { type: 'freshStart', key: s.key } });
   return out;
 }
 
-function renderBrief() {
-  const session = model.sessions.find((s) => s.key === brief.key);
-  let body;
-  if (brief.loading) body = h('div', { class: 'busy pad' }, h('span', { class: 'spin' }), 'Building the brief…');
-  else if (brief.error) body = h('p', { class: 'empty' }, `Couldn’t build the brief: ${brief.error}`);
-  else body = h('div', { class: 'md' }, markdown(brief.text));
-  const ready = !brief.loading && !brief.error;
-  $('#brief').replaceChildren(
-    h('div', { class: 'hero' }, h('h1', {}, 'Brief'), h('p', { class: 'one-line' }, brief.title)),
-    h('div', { class: 'scroll brief-scroll' }, body),
-    h('div', { class: 'brief-bar' },
-      h('button', {
-        class: 'btn',
-        disabled: !ready,
-        onclick: () => {
-          api.act({ type: 'copyBrief', key: brief.key });
-          copied = true;
-          render();
-        },
-      }, icon('copy'), copied ? 'Copied' : 'Copy'),
-      h('button', { class: 'btn', disabled: !ready, title: brief.path ?? null, onclick: () => api.act({ type: 'openBrief', key: brief.key }) }, icon('doc'), 'Open file'),
-      session && !session.busy
-        ? session.targets.filter((t) => t.enabled).slice(0, 1).map((t) =>
-            h('button', { class: 'btn primary push', disabled: !ready, onclick: () => api.act({ type: 'handoff', key: session.key, target: t.tool }) }, `Hand off to ${t.label}`))
-        : null));
+let routeKey = null;
+let routeSel = 0;
+
+function renderRoute() {
+  const s = routeKey ? findSession(routeKey) : null;
+  if (!s) return go('home');
+  const tool = findTool(s.key);
+  const choices = routeChoices(s, tool);
+  routeSel = Math.min(routeSel, Math.max(0, choices.length - 1));
+  const tile = (c, i) => {
+    const pct = c.fresh ? null : usageOf(c.tool);
+    return h('button', {
+      class: `tile${i === routeSel ? ' sel' : ''}`,
+      title: c.fresh ? 'New chat that picks up where this one left off' : `Continue in ${c.label}${c.mode === 'terminal' ? ' (Terminal)' : ''}`,
+      onmouseenter: () => { if (routeSel !== i) { routeSel = i; render(); } },
+      onclick: () => api.act(c.act),
+    },
+      h('span', { class: 'tile-ic' },
+        agentIcon(c.tool),
+        c.fresh ? h('span', { class: 'corner' }, icon('fresh')) : c.mode === 'terminal' ? h('span', { class: 'corner mono' }, '>_') : null),
+      h('span', { class: 'tile-name' }, c.label),
+      pct === null ? h('span', { class: 'tile-meter' }) : h('span', { class: 'tile-meter on', title: `${pct}% of its limit used` }, fill(pct, pct >= 90 ? 'hot' : pct >= 70 ? 'warm' : '')),
+      h('kbd', { class: 'tile-key' }, String(i + 1)));
+  };
+  put('#route',
+    // Opened by itself because this chat hit its limit: say so, and when it resets.
+    s.status === 'limit' ? h('p', { class: 'r-alert' }, `${AGENT_LABEL[tool]} stopped · ${s.detail}. Continue it in:`) : null,
+    h('div', { class: 'r-src' },
+      h('span', { class: 'r-src-ic' }, agentIcon(tool), h('span', { class: `st ${s.status}` }, s.status === 'idle' ? null : h('i'))),
+      h('span', { class: 'r-src-title', title: s.title }, s.title),
+      h('span', { class: 'r-src-time' }, s.ago)),
+    s.busy
+      ? h('div', { class: 'busy r-busy' }, h('span', { class: 'spin' }))
+      : choices.length
+        ? [routeLines(choices.length, routeSel), h('div', { class: `r-tiles n${choices.length}` }, choices.map(tile))]
+        : h('p', { class: 'none' }, 'No other agent installed'),
+    h('div', { class: 'r-foot' },
+      h('span', { class: 'r-hint' }, h('kbd', {}, '↵'), h('kbd', {}, '1–' + Math.max(1, choices.length))),
+      h('span', { class: 'r-acts' },
+        h('button', { class: 'link r-dismiss', onclick: () => api.hide() }, 'Not now'),
+        h('button', { class: 'link r-all', onclick: () => go('home') }, icon('list'), 'All chats'))));
 }
 
+// ---- frame ----
+
 function render() {
   if (!model) return;
-  $('#home').hidden = view !== 'home';
-  $('#settings').hidden = view !== 'settings';
-  $('#brief').hidden = view !== 'brief';
-  const btn = $('#toggle-settings');
-  btn.replaceChildren(icon(view === 'home' ? 'gear' : 'back'));
-  btn.setAttribute('aria-label', view === 'home' ? 'Settings' : 'Back');
-  btn.title = btn.getAttribute('aria-label');
-  const dark = darkQuery.matches;
-  const theme = $('#toggle-theme');
-  theme.replaceChildren(icon(dark ? 'sun' : 'moon'));
-  theme.setAttribute('aria-label', dark ? 'Light mode' : 'Dark mode');
-  theme.title = theme.getAttribute('aria-label');
-  const pill = $('#pill');
-  pill.classList.toggle('auto', model.settings.autoContinue);
-  $('#pill-text').textContent = model.settings.autoContinue ? 'Auto-continue' : 'Standing by';
+  for (const v of ['home', 'route', 'usage', 'settings']) $(`#${v}`).hidden = view !== v;
+  const home = view === 'home' || view === 'route';
+  $('#brand').hidden = !home;
+  $('#open-settings').hidden = !home;
+  // The router (⌥H) goes back to all chats too.
+  $('#back').hidden = view === 'home';
+  $('#back').title = view === 'route' ? 'All chats' : 'Back';
+  $('#view-title').hidden = home;
+  $('#view-title').textContent = TITLE[view] ?? '';
   $('#hotkey').textContent = model.hotkey;
   if (view === 'home') renderHome();
-  else if (view === 'settings') renderSettings();
-  else renderBrief();
+  else if (view === 'route') renderRoute();
+  else if (view === 'usage') renderUsage();
+  else renderSettings();
 }
 
-function show() {
-  view = 'home';
-  brief = null;
-  openKey = null;
+function go(next) {
+  view = next;
   render();
+}
+
+function show(opts) {
+  openKey = null;
+  adding = null;
+  routeKey = opts?.route ?? null;
+  routeSel = 0;
+  go(routeKey && findSession(routeKey) ? 'route' : 'home');
   const panel = $('#panel');
+  // Otherwise the window gives focus back to the last button clicked (often the gear), with a keyboard focus ring.
+  panel.focus({ preventScroll: true });
   panel.classList.remove('in');
   void panel.offsetWidth;
   panel.classList.add('in');
 }
 
-function goHome() {
-  view = 'home';
-  brief = null;
-  render();
-}
-
-$('#toggle-settings').addEventListener('click', () => {
-  if (view === 'home') {
-    view = 'settings';
-    render();
-  } else {
-    goHome();
-  }
-});
-$('#toggle-theme').addEventListener('click', () => api.act({ type: 'setTheme', theme: darkQuery.matches ? 'light' : 'dark' }));
-darkQuery.addEventListener('change', render);
+$('#back').append(icon('back'));
+$('#open-settings').append(icon('gear'));
+$('#back').addEventListener('click', () => go('home'));
+$('#open-settings').addEventListener('click', () => go('settings'));
 $('#quit').addEventListener('click', () => api.act({ type: 'quit' }));
 document.addEventListener('keydown', (e) => {
-  if (e.key !== 'Escape') return;
-  if (view !== 'home') {
-    goHome();
-  } else {
-    api.hide();
+  if (view === 'route' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+    const s = routeKey ? findSession(routeKey) : null;
+    const choices = s && !s.busy ? routeChoices(s, findTool(s.key)) : [];
+    const n = Number(e.key);
+    if (Number.isInteger(n) && n >= 1 && n <= choices.length) return api.act(choices[n - 1].act);
+    if (e.key === 'Enter' && choices[routeSel]) return api.act(choices[routeSel].act);
+    if ((e.key === 'ArrowRight' || e.key === 'ArrowLeft') && choices.length) {
+      routeSel = (routeSel + (e.key === 'ArrowRight' ? 1 : choices.length - 1)) % choices.length;
+      return render();
+    }
   }
+  if (e.key !== 'Escape') return;
+  if (view === 'route') api.hide();
+  else if (view !== 'home') go('home');
+  else if (adding) { adding = null; render(); }
+  else api.hide();
 });
 
 // Size the window to the panel: its height plus the wrap's padding (the room the shadow needs).
@@ -383,86 +443,87 @@ new ResizeObserver(() => api.resize(Math.ceil(wrap.getBoundingClientRect().heigh
 
 api.onModel((m) => {
   model = m;
-  if (openKey && !model.sessions.some((s) => s.key === openKey)) openKey = null;
+  if (openKey && !findSession(openKey)) openKey = null;
   render();
 });
 api.onShown(show);
-api.onBrief((b) => {
-  // Ignore a late reply for a brief the user already navigated away from.
-  if (b.loading || !brief || brief.key === b.key) {
-    brief = b;
-    view = 'brief';
-    render();
-  }
-});
 api.ready();
 
 function demoApi() {
-  const tools = [
-    { tool: 'claude-code', label: 'Claude Code', mode: 'app', app: true, terminal: false },
-    { tool: 'codex', label: 'Codex', mode: 'app', app: true, terminal: true },
-    { tool: 'cursor', label: 'Cursor', mode: 'app', app: true, terminal: false },
-  ];
-  const settings = { defaultTarget: 'codex', autoContinue: false, openAtLogin: true, theme: 'system', claudeBridge: 'off' };
+  const label = { 'claude-code': 'Claude Code', codex: 'Codex', cursor: 'Cursor' };
+  const settings = { autoContinue: false, openAtLogin: true, theme: 'system', claudeBridge: 'off' };
+  let asked = false;
   const usage = [
     { tool: 'claude-code', label: 'Claude Code', windows: [{ label: '5h', pct: 72, exact: false, resets: 'resets 4:10 PM' }], pace: '≈ 38 min to limit at this pace', note: '≈ estimated from your session logs', usagePage: false },
     { tool: 'codex', label: 'Codex', windows: [{ label: '5h', pct: 18, exact: true, resets: 'resets in 52m' }, { label: 'Week', pct: 41, exact: true, resets: 'resets Fri 7:12 PM' }], pace: null, note: '1 free limit reset available', usagePage: false },
     { tool: 'cursor', label: 'Cursor', windows: [], pace: null, note: 'Cursor keeps no usage on this Mac', usagePage: true },
   ];
-  const targets = (from) => {
-    const order = [settings.defaultTarget, ...tools.map((t) => t.tool).filter((t) => t !== settings.defaultTarget)];
-    return order.filter((t) => t !== from).map((t) => {
-      const info = tools.find((x) => x.tool === t);
-      return { tool: t, label: info.label, enabled: info[info.mode], isDefault: t === settings.defaultTarget };
-    });
+  const fresh = { state: 'fresh', reasons: [], context: { tokens: 42_000, window: null, compactions: 0 } };
+  const long = { state: 'long', reasons: ['Long context: 197K tokens'], context: { tokens: 197_000, window: null, compactions: 0 } };
+  const longer = { state: 'long', reasons: ['Long context: 527K tokens'], context: { tokens: 527_000, window: null, compactions: 0 } };
+  const struggling = {
+    state: 'struggling',
+    reasons: ['`npm test -- auth` failed 4 times in a row', 'You pushed back 2 times in your last 6 messages', 'Compacted 2 times, so early details are summaries'],
+    context: { tokens: 188_000, window: 258_400, compactions: 2 },
   };
-  const sessions = [
-    { key: 'claude-code:1', from: 'claude-code', title: 'Migrate auth to JWT', toolLabel: 'Claude Code', status: 'limit', detail: 'Limit hit · resets 6:00 PM', cwd: '/Users/you/acme-api', repo: 'acme-api', ago: 'now', busy: false },
-    { key: 'codex:2', from: 'codex', title: 'Fix flaky checkout tests', toolLabel: 'Codex', status: 'warning', detail: '92% of limit used', cwd: '/Users/you/shop', repo: 'shop', ago: '4m ago', busy: false },
-    { key: 'claude-code:3', from: 'claude-code', title: 'Harlay landing page', toolLabel: 'Claude Code', status: 'idle', detail: 'Idle', cwd: '/Users/you/harlay', repo: 'harlay', ago: '1h ago', busy: false },
-    { key: 'codex:5', from: 'codex', title: 'Rate limiter for /login', toolLabel: 'Codex', status: 'idle', detail: 'Idle', cwd: '/Users/you/acme-api', repo: 'acme-api', ago: '2h ago', busy: false },
-    { key: 'cursor:4', from: 'cursor', title: 'Onboarding copy pass', toolLabel: 'Cursor', status: 'handed_off', detail: 'Handed off to Codex', cwd: '/Users/you/web', repo: 'web', ago: '3h ago', busy: false },
+  const chat = (tool, id, title, ago, health, status = 'idle', detail = 'Idle', pinned = false) =>
+    ({ key: `${tool}:${id}`, tool, title, ago, status, detail, cwd: `/Users/you/${title.split(' ')[0].toLowerCase()}`, busy: false, pinned, health, canStartFresh: true, delivery: null });
+  const chats = [
+    chat('claude-code', '1', 'Migrate auth to JWT', 'now', struggling, 'limit', 'Limit hit · resets 3:00 PM'),
+    chat('claude-code', '2', 'Harlay landing page', '1h', long),
+    chat('claude-code', '3', 'Software architecture diagram', '3h', fresh),
+    chat('codex', '4', 'Fix flaky checkout tests', '4m', longer, 'warning', '92% of limit used'),
+    chat('codex', '5', 'Rate limiter for /login', '2h', fresh),
+    chat('codex', '6', 'Implement the task in Colab', '1d', fresh),
+    { ...chat('cursor', '7', 'Onboarding copy pass', '3h', null, 'handed_off', "Handed off to Codex · Codex hasn't picked it up"), delivery: 'missed' },
   ];
   let onModel = () => {};
-  let onBrief = () => {};
-  const sampleBrief = (title) => `---\nharlay: 1\n---\n\n# Continue: ${title}\n\n> You are continuing a coding task that another AI agent started.\n\n## 1. Goal (user's words)\n> Move auth from session cookies to JWT across \`api/\`.\n\n## 2. Next step\nMigrate the last 3 route handlers in \`api/routes/\`.\n\n## 4. Progress\n- [x] Added \`src/lib/jwt.ts\`\n- [ ] Migrate \`billing.ts\`\n\n\`\`\`text\nnpm test -- auth\n\`\`\`\n`;
   const emit = () => onModel({
-    sessions: sessions.map((s) => ({ ...s, targets: targets(s.from) })),
+    groups: ['claude-code', 'codex', 'cursor'].map((tool) => ({
+      tool,
+      label: label[tool],
+      sessions: chats.filter((c) => c.tool === tool).map((c) => ({
+        ...c,
+        targets: ['codex', 'claude-code', 'cursor'].filter((t) => t !== tool).map((t) => ({ tool: t, label: label[t], mode: t === 'cursor' ? 'terminal' : 'app' })),
+      })),
+    })),
     usage,
-    askClaudeBridge: !settings.asked,
+    icons: {},
+    askClaudeBridge: !asked,
     settings: { ...settings },
-    tools: tools.map((t) => ({ ...t })),
     hotkey: '⌥H',
   });
   return {
     onModel: (cb) => { onModel = cb; },
     onShown: (cb) => setTimeout(cb, 50),
-    onBrief: (cb) => { onBrief = cb; },
     ready: emit,
     resize: () => {},
     hide: () => console.log('[demo] hide'),
+    addChat: async (tool, id) => {
+      await new Promise((r) => setTimeout(r, 500));
+      if (id.length < 4) return { ok: false, error: 'That doesn’t look like a chat ID.' };
+      chats.push(chat(tool, id, `Chat ${id.slice(0, 8)}`, '5d', fresh, 'idle', 'Idle', true));
+      emit();
+      return { ok: true };
+    },
     act: (a) => {
       console.log('[demo] action', a);
-      if (a.type === 'setDefault') settings.defaultTarget = a.target;
-      if (a.type === 'setMode') tools.find((t) => t.tool === a.target).mode = a.mode;
       if (a.type === 'toggleAuto') settings.autoContinue = !settings.autoContinue;
       if (a.type === 'toggleLogin') settings.openAtLogin = !settings.openAtLogin;
       if (a.type === 'setTheme') settings.theme = a.theme;
       if (a.type === 'answerClaudeBridge') {
-        settings.asked = true;
+        asked = true;
         settings.claudeBridge = a.allow ? 'on' : 'off';
       }
       if (a.type === 'toggleClaudeBridge') settings.claudeBridge = settings.claudeBridge === 'on' ? 'off' : 'on';
-      if (a.type === 'previewBrief') {
-        const s = sessions.find((x) => x.key === a.key);
-        setTimeout(() => onBrief({ key: s.key, title: s.title, path: `${s.cwd}/.harlay/HANDOFF.md`, text: sampleBrief(s.title) }), 600);
-        return;
-      }
-      if (a.type === 'handoff') {
-        const s = sessions.find((x) => x.key === a.key);
-        s.busy = true;
+      if (a.type === 'unpinChat') chats.splice(chats.findIndex((c) => c.key === a.key), 1);
+      if (a.type === 'handoff' || a.type === 'freshStart') {
+        const c = chats.find((x) => x.key === a.key);
+        c.busy = true;
         emit();
-        setTimeout(() => { s.busy = false; s.status = 'handed_off'; s.detail = `Handed off to ${tools.find((t) => t.tool === a.target).label}`; emit(); }, 1200);
+        const to = label[a.target ?? c.tool];
+        setTimeout(() => { c.busy = false; c.status = 'handed_off'; c.delivery = 'waiting'; c.detail = `Handed off to ${to} · press Enter in ${to} to send it`; c.health = fresh; emit(); }, 1200);
+        setTimeout(() => { c.delivery = 'read'; c.detail = `Handed off to ${to} · ${to} read it`; emit(); }, 4000);
         return;
       }
       emit();