harlay 0.2.1 → 0.3.0

package/app/dist/preload.cjs

@@ -9,5 +9,9 @@ import_electron.contextBridge.exposeInMainWorld("harlay", {
   addChat: (tool, id) => import_electron.ipcRenderer.invoke("harlay:addChat", { tool, id }),
   resize: (height) => import_electron.ipcRenderer.send("harlay:resize", height),
   hide: () => import_electron.ipcRenderer.send("harlay:hide"),
-  ready: () => import_electron.ipcRenderer.send("harlay:ready")
+  ready: () => import_electron.ipcRenderer.send("harlay:ready"),
+  // A handoff as it runs (the popover), and its last moment over the target's window (the overlay).
+  onHandoff: (cb) => void import_electron.ipcRenderer.on("harlay:handoff", (_e, view) => cb(view)),
+  onOverlay: (cb) => void import_electron.ipcRenderer.on("harlay:overlay", (_e, play) => cb(play)),
+  overlayDone: () => import_electron.ipcRenderer.send("harlay:overlayDone")
 });

package/app/renderer/overlay.css

@@ -0,0 +1,76 @@
+/* The handoff's last moment, over the whole display: see overlay.ts. Nothing here takes a click. */
+@property --p { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
+:root {
+  --accent-rgb: 59, 91, 246;
+  --accent: #3b5bf6;
+  --hi: #a9c3ff;
+  --ok-rgb: 30, 158, 90;
+  --sans: system-ui, -apple-system, "Helvetica Neue", sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --ease: cubic-bezier(.2, .7, .1, 1);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
+body { font: 13px/1.3 var(--sans); color: #fff; -webkit-font-smoothing: antialiased; user-select: none; pointer-events: none; }
+#stage { position: fixed; inset: 0; }
+
+/* the light: a comet whose head is at its own origin, so it can be moved and turned along the path */
+.comet { position: absolute; left: 0; top: 0; width: 130px; height: 4px; margin: -2px 0 0 -130px; transform-origin: 130px 2px; border-radius: 4px;
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55) 45%, var(--accent) 80%, var(--hi));
+  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .9)) drop-shadow(0 0 16px rgba(var(--accent-rgb), .55)); }
+.comet::after { content: ""; position: absolute; right: -5px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 4px rgba(var(--accent-rgb), .9), 0 0 26px 8px rgba(var(--accent-rgb), .45); }
+.burst { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--hi); box-shadow: 0 0 18px 4px rgba(var(--accent-rgb), .6); animation: burst .7s var(--ease) forwards; }
+@keyframes burst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(5); } }
+
+/* the target's window: its edge lights up from where the light lands (top middle) round to the bottom, then glows */
+.ring { position: absolute; border-radius: 13px; animation: fade-out 1.1s ease 3.6s forwards; }
+.ring-edge { position: absolute; inset: -2px; padding: 2.5px; border-radius: 15px;
+  background: conic-gradient(from 0deg, var(--hi), var(--accent) var(--p), transparent var(--p) calc(360deg - var(--p)), var(--accent) calc(360deg - var(--p)), var(--hi));
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
+  animation: edge 1s cubic-bezier(.55, 0, .2, 1) forwards; }
+@keyframes edge { to { --p: 180deg; } }
+.ring-glow { position: absolute; inset: -2px; border-radius: 15px; opacity: 0;
+  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 30px 4px rgba(var(--accent-rgb), .45), 0 0 90px 12px rgba(var(--accent-rgb), .22), inset 0 0 56px rgba(var(--accent-rgb), .2);
+  animation: glow-in .5s ease .8s forwards, breathe 1.5s ease-in-out 1.3s 2; }
+@keyframes glow-in { to { opacity: 1; } }
+@keyframes breathe { 50% { opacity: .55; } }
+@keyframes fade-out { to { opacity: 0; } }
+
+/* no window found: the screen's edges glow instead */
+.edge { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), .45), inset 0 0 70px 6px rgba(var(--accent-rgb), .32); animation: glow-in .5s ease forwards, fade-out 1s ease 2.4s forwards; }
+
+/* the widget, on the window's top edge */
+.pill { position: absolute; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 9px; border-radius: 999px; white-space: nowrap; transform: translate(-50%, -50%);
+  background: linear-gradient(180deg, #6582ff, var(--accent));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 32px -8px rgba(var(--accent-rgb), .75), 0 0 46px 4px rgba(var(--accent-rgb), .32);
+  transition: background .35s, box-shadow .35s; }
+.pill.got { background: linear-gradient(180deg, #3ccb84, #1e9e5a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 32px -8px rgba(var(--ok-rgb), .75), 0 0 46px 4px rgba(var(--ok-rgb), .3); }
+.pill > * { animation: content-in .32s var(--ease) .2s backwards; }
+@keyframes content-in { from { opacity: 0; transform: translateY(3px); } }
+.mk { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
+.mk svg { width: 14px; height: 14px; }
+.txt { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
+.txt .dim { opacity: .78; }
+.txt b { font-weight: 650; }
+.agent { width: 20px; height: 20px; border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .4); }
+.agent.badge { display: grid; place-items: center; background: rgba(255, 255, 255, .2); font: 600 8.5px var(--mono); }
+.act { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .14); font-size: 12px; font-weight: 500; }
+.act kbd { display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px; background: #fff; color: var(--accent); font: 600 12px var(--sans); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); animation: key 1.3s ease-in-out infinite; }
+@keyframes key { 50% { box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 0 0 4px rgba(255, 255, 255, .28); } }
+.dots { display: flex; gap: 3px; padding-left: 4px; }
+.dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: dot 1s ease-in-out infinite; }
+.dots i:nth-child(2) { animation-delay: .15s; }
+.dots i:nth-child(3) { animation-delay: .3s; }
+@keyframes dot { 0%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
+.check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #1e9e5a; }
+.check svg { width: 13px; height: 13px; }
+.got .txt { padding-right: 8px; }
+
+/* in a browser (design work): a pretend desktop with the window */
+body.demo { background: radial-gradient(120% 90% at 30% 10%, #2a3350, #11131a); }
+.demo-win { position: absolute; border-radius: 13px; background: #1d1f26; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
+.demo-bar { position: absolute; inset: 0 0 auto; height: 30px; background: rgba(255, 255, 255, .92); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
+}

package/app/renderer/overlay.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:">
+<title>Harlay</title>
+<link rel="stylesheet" href="overlay.css">
+</head>
+<body>
+<div id="stage" aria-live="polite"></div>
+<script src="overlay.js"></script>
+</body>
+</html>

package/app/renderer/overlay.js

@@ -0,0 +1,192 @@
+'use strict';
+
+// window.harlay comes from the preload script; opened in a browser, the overlay plays on a pretend desktop.
+const api = window.harlay ?? demoApi();
+
+const stage = document.getElementById('stage');
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const MARK = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 20 10 4h4.3L6.8 20z" fill="#fff" opacity=".6"/><path d="M10.2 20 17.7 4H22l-7.5 16z" fill="#fff"/></svg>';
+const CHECK = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3.5 8.5 3 3 6-7"/></svg>';
+const BADGE = { 'claude-code': 'CC', codex: 'CX', cursor: 'CU' };
+/** How long the widget stays when the agent doesn't pick the handoff up meanwhile. */
+const STAY_MS = { app: 10_000, terminal: 8_000 };
+/** How long it stays once the agent did. */
+const GOT_MS = 1_900;
+
+/** The play on screen: a newer one replaces it, and its timers check this before they act. */
+let playing = null;
+
+function el(tag, cls, parent = stage) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  parent.append(e);
+  return e;
+}
+
+/** Places an element through the CSSOM (the page's CSP forbids style attributes). */
+function place(e, box) {
+  for (const [k, v] of Object.entries(box)) e.style[k] = `${v}px`;
+  return e;
+}
+
+function svg(markup, cls, parent) {
+  const e = el('span', cls, parent);
+  e.innerHTML = markup; // constant markup only
+  return e;
+}
+
+/** A point on the quadratic curve a → c → b, and the curve's direction there. */
+function curve(a, c, b, t) {
+  const u = 1 - t;
+  return {
+    x: u * u * a.x + 2 * u * t * c.x + t * t * b.x,
+    y: u * u * a.y + 2 * u * t * c.y + t * t * b.y,
+    angle: Math.atan2(2 * u * (c.y - a.y) + 2 * t * (b.y - c.y), 2 * u * (c.x - a.x) + 2 * t * (b.x - c.x)),
+  };
+}
+
+/** The light: from the menu bar icon along the top, then down onto the window's edge. */
+function fly(a, b) {
+  const comet = el('div', 'comet');
+  // Along the menu bar first, then a curve down: the control point sits above the landing point.
+  const c = { x: b.x + (a.x - b.x) * 0.12, y: a.y };
+  const n = 32;
+  const frames = [];
+  for (let i = 0; i <= n; i++) {
+    const p = curve(a, c, b, i / n);
+    frames.push({ transform: `translate(${p.x}px, ${p.y}px) rotate(${p.angle}rad)`, opacity: i === 0 ? 0 : 1, offset: i / n });
+  }
+  const dist = Math.hypot(b.x - a.x, b.y - a.y);
+  const anim = comet.animate(frames, { duration: Math.min(1000, Math.max(620, 520 + dist * 0.25)), easing: 'cubic-bezier(.62, 0, .22, 1)', fill: 'forwards' });
+  return anim.finished.then(() => {
+    place(el('div', 'burst'), { left: b.x, top: b.y });
+    comet.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 220, fill: 'forwards' }).finished.then(() => comet.remove());
+  });
+}
+
+function glowWindow(w) {
+  const ring = place(el('div', 'ring'), { left: w.x, top: w.y, width: w.width, height: w.height });
+  el('div', 'ring-edge', ring);
+  el('div', 'ring-glow', ring);
+}
+
+function agentIcon(to, parent) {
+  if (to.icon) {
+    const img = el('img', 'agent', parent);
+    img.src = to.icon;
+    img.alt = '';
+    return img;
+  }
+  const b = el('span', 'agent badge', parent);
+  b.textContent = BADGE[to.tool] ?? '';
+  return b;
+}
+
+function fillPill(p, m) {
+  p.replaceChildren();
+  svg(MARK, 'mk', p);
+  const txt = el('span', 'txt', p);
+  el('span', 'dim', txt).textContent = 'Continuing in';
+  agentIcon(m.to, txt);
+  el('b', '', txt).textContent = m.to.label;
+  const act = el('span', 'act', p);
+  if (m.to.mode === 'app') {
+    el('kbd', '', act).textContent = '⏎';
+    act.append('to send');
+  } else {
+    const dots = el('span', 'dots', act);
+    for (let i = 0; i < 3; i++) el('i', '', dots);
+    act.append('picking it up');
+  }
+}
+
+function fillGot(p, m) {
+  p.replaceChildren();
+  svg(CHECK, 'check', p);
+  const txt = el('span', 'txt', p);
+  agentIcon(m.to, txt);
+  el('b', '', txt).textContent = m.to.label;
+  el('span', 'dim', txt).textContent = `has the context from ${m.fromLabel}`;
+}
+
+/** From a dot where the light landed to the whole widget. */
+function grow(p) {
+  if (reduce) return;
+  p.animate(
+    [{ clipPath: 'inset(calc(50% - 6px) calc(50% - 6px) round 999px)' }, { clipPath: 'inset(0 0 round 999px)' }],
+    { duration: 560, easing: 'cubic-bezier(.2, 1.15, .3, 1)' },
+  );
+}
+
+async function play(m) {
+  // `early`: the agent picked it up before the widget was on screen.
+  const me = { m, pill: null, timer: null, early: !!m.picked };
+  playing = me;
+  stage.replaceChildren();
+  const w = m.window;
+  // Where the light lands: the middle of the window's top edge, kept below the menu bar.
+  const land = w ? { x: w.x + w.width / 2, y: Math.max(w.y, m.menuBar + 24) } : { x: innerWidth / 2, y: m.menuBar + 44 };
+  if (!reduce) await fly(m.from, land);
+  if (playing !== me) return;
+  if (w) glowWindow(w);
+  else el('div', 'edge');
+  me.pill = place(el('div', 'pill'), { left: land.x, top: land.y });
+  fillPill(me.pill, m);
+  grow(me.pill);
+  me.timer = setTimeout(() => finish(me), STAY_MS[m.to.mode] ?? STAY_MS.app);
+  // Long enough to read where it went before it says it got there.
+  if (me.early) setTimeout(() => playing === me && got(), 900);
+}
+
+/** The agent picked it up: the widget turns green and says so, then goes. */
+function got() {
+  const me = playing;
+  if (!me) return;
+  if (!me.pill) {
+    me.early = true;
+    return;
+  }
+  if (me.pill.classList.contains('got')) return;
+  clearTimeout(me.timer);
+  me.pill.classList.add('got');
+  fillGot(me.pill, me.m);
+  me.timer = setTimeout(() => finish(me), GOT_MS);
+}
+
+async function finish(me) {
+  if (playing !== me) return;
+  const fades = [...stage.children].map((e) =>
+    e === me.pill && !reduce
+      ? e.animate([{ clipPath: 'inset(0 0 round 999px)', opacity: 1 }, { clipPath: 'inset(calc(50% - 6px) calc(50% - 6px) round 999px)', opacity: 0 }], { duration: 380, easing: 'cubic-bezier(.5, 0, .7, .4)', fill: 'forwards' }).finished
+      : e.animate([{ opacity: getComputedStyle(e).opacity }, { opacity: 0 }], { duration: 300, fill: 'forwards' }).finished,
+  );
+  await Promise.all(fades);
+  if (playing !== me) return;
+  playing = null;
+  stage.replaceChildren();
+  api.overlayDone();
+}
+
+api.onOverlay((m) => (m.read ? got() : void play(m)));
+
+function demoApi() {
+  document.body.classList.add('demo');
+  const menuBar = 33;
+  const win = { x: Math.round(innerWidth * 0.18), y: Math.round(innerHeight * 0.22), width: Math.round(innerWidth * 0.6), height: Math.round(innerHeight * 0.6) };
+  const params = new URLSearchParams(location.search);
+  let onOverlay = () => {};
+  const run = () => {
+    const mode = params.get('mode') === 'terminal' ? 'terminal' : 'app';
+    onOverlay({ key: 'demo', from: { x: innerWidth - 120, y: menuBar / 2 }, window: params.has('nowindow') ? null : win, menuBar, to: { tool: 'cursor', label: 'Cursor', icon: null, mode }, fromLabel: 'Claude Code', picked: params.has('picked') });
+    if (!params.has('noread')) setTimeout(() => onOverlay({ read: true }), 4200);
+  };
+  addEventListener('load', () => {
+    place(el('div', 'demo-bar', document.body), { height: menuBar });
+    if (!params.has('nowindow')) document.body.prepend(place(el('div', 'demo-win', document.body), { left: win.x, top: win.y, width: win.width, height: win.height }));
+    setTimeout(run, 400);
+  });
+  return {
+    onOverlay: (cb) => { onOverlay = cb; },
+    overlayDone: () => setTimeout(run, 1200),
+  };
+}

package/app/renderer/popover.css

@@ -272,3 +272,46 @@ kbd { margin-right: 6px; padding: 1px 5px; border-radius: 5px; border: 1px solid
 .h-state { font-size: 12px; font-weight: 600; }
 .health.long .h-state { color: var(--health-long); }
 .health.struggling .h-state { color: var(--health-bad); }
+
+/* a handoff as it runs: the two agents, then Detect, Extract, Distill, Rehydrate (as on harlay.dev) */
+.panel.out { opacity: 0; transform: translateY(-4px) scale(.985); transition: opacity .2s ease-in, transform .2s ease-in; }
+.top .tag { margin-left: auto; margin-right: 6px; }
+.tag { padding: 2px 8px; border-radius: 999px; border: 1px solid; font: 500 10.5px var(--mono); white-space: nowrap; transition: color .25s, border-color .25s, background-color .25s; }
+.tag.err { color: var(--bad); border-color: rgba(var(--bad-rgb), .3); background: rgba(var(--bad-rgb), .07); }
+.tag.ok { color: var(--fresh); border-color: rgba(23, 160, 108, .3); background: rgba(23, 160, 108, .08); }
+.tag.acc { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); }
+
+.hf-route { display: grid; grid-template-columns: 72px 1fr 72px; align-items: start; margin: 2px 16px 0; padding: 14px 6px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--rim), 0 0 0 1px var(--line2); }
+.hf-end { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
+.hf-end .agent { width: 34px; height: 34px; border-radius: 9px; }
+.hf-end .agent.badge { font-size: 10.5px; }
+.hf-end.to .tile-ic { border-radius: 10px; transition: box-shadow .4s var(--ease); }
+.hf-route.done .hf-end.to .tile-ic { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25), 0 8px 22px -6px rgba(var(--accent-rgb), .7); }
+.hf-name { max-width: 100%; font-size: 11px; font-weight: 500; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hf-line { position: relative; height: 2px; margin-top: 16px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .55) 0 5px, transparent 5px 10px); background-size: 20px 2px; animation: hf-flow .6s linear infinite; }
+.hf-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18), 0 0 14px 2px rgba(var(--accent-rgb), .55); animation: hf-travel 1.1s cubic-bezier(.65, 0, .35, 1) infinite; }
+.hf-route.done .hf-line { background: linear-gradient(90deg, rgba(var(--accent-rgb), .35), var(--accent)); animation: none; }
+.hf-route.done .hf-line i { left: calc(100% - 8px); animation: none; }
+.hf-route.failed .hf-line { background: repeating-linear-gradient(90deg, rgba(var(--bad-rgb), .45) 0 5px, transparent 5px 10px); animation: none; }
+.hf-route.failed .hf-line i { display: none; }
+@keyframes hf-flow { to { background-position: 20px 0; } }
+@keyframes hf-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
+
+.hf-title { margin: 13px 20px 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hf-steps { list-style: none; display: grid; gap: 2px; margin: 8px 12px 12px; }
+.hf-steps li { display: grid; grid-template-columns: 16px 1fr; column-gap: 11px; padding: 7px 8px; border-radius: 9px; color: var(--fg3); transition: background-color .3s, color .3s; }
+.hf-step { font-size: 13px; font-weight: 500; }
+.hf-steps em { grid-column: 2; font: normal 10.5px/1.5 var(--mono); color: var(--fg3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hf-steps em b { font-weight: 600; color: var(--accent); }
+.hf-steps .s { position: relative; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line3); transition: background-color .25s, border-color .25s; }
+.hf-steps li.run { color: var(--fg); background: var(--hover); }
+.hf-steps li.run .s { border-color: var(--accent); border-right-color: transparent; animation: spin .7s linear infinite; }
+.hf-steps li.done { color: var(--fg); }
+.hf-steps li.done .s { border-color: var(--fresh); background: var(--fresh); animation: hf-pop .3s var(--ease); }
+.hf-steps li.done .s::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
+.hf-steps li.fail { color: var(--fg); }
+.hf-steps li.fail .s { border-color: var(--bad); background: var(--bad); }
+.hf-steps li.fail .s::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px var(--sans); color: #fff; }
+@keyframes hf-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
+.hf-acts { margin: -2px 20px 14px; }
+.hf-error { margin: -4px 20px 10px; font-size: 12px; color: var(--bad); overflow-wrap: anywhere; user-select: text; }

package/app/renderer/popover.html

@@ -16,13 +16,15 @@
         harlay
       </div>
       <h1 class="view-title" id="view-title" hidden></h1>
+      <span class="tag" id="hf-tag" hidden></span>
       <button class="icon-btn" id="open-settings" aria-label="Settings" title="Settings"></button>
     </header>
     <section id="home"></section>
     <section id="route" hidden></section>
     <section id="usage" hidden></section>
     <section id="settings" hidden></section>
-    <footer class="foot">
+    <section id="handoff" hidden aria-live="polite"></section>
+    <footer class="foot" id="foot">
       <span><kbd id="hotkey">⌥H</kbd>routes your latest chat</span>
       <button class="quit" id="quit">Quit</button>
     </footer>

package/app/renderer/popover.js

@@ -374,16 +374,95 @@ function renderRoute() {
         h('button', { class: 'link r-all', onclick: () => go('home') }, icon('list'), 'All chats'))));
 }
 
+// ---- a handoff as it runs (see presentHandoff in main.ts) ----
+
+/** The handoff on show: its agents, its four steps, Distill's token counter. */
+let hf = null;
+/** Distill's counter as it runs: { from, to, t0 }, for the count it was started for. */
+let counting = null;
+const COUNT_MS = 900;
+const fmt = (n) => Math.round(n).toLocaleString('en-US');
+
+function hfTag() {
+  if (hf.tag === 'done') return ['handed off', 'ok'];
+  if (hf.tag === 'failed') return ['didn’t hand off', 'err'];
+  // A stopped chat says so until Harlay has read it; then it is on its way.
+  return hf.tag === 'stopped' && hf.steps[0].state === 'run' ? ['halt detected', 'err'] : ['handing off', 'acc'];
+}
+
+/** The counter's value now: the chat's tokens, easing down to the handoff file's. */
+function countNow() {
+  if (!counting) return hf.count.from;
+  const p = Math.min(1, (performance.now() - counting.t0) / COUNT_MS);
+  return counting.from + (counting.to - counting.from) * (1 - Math.pow(1 - p, 3));
+}
+
+function tickCount() {
+  const el = $('#hf-count');
+  if (el && counting) el.textContent = fmt(countNow());
+  if (counting && performance.now() - counting.t0 < COUNT_MS) requestAnimationFrame(tickCount);
+}
+
+function stepDetail(step) {
+  if (step.name !== 'Distill' || !hf.count) return step.detail;
+  return [h('span', { class: 'hf-was' }, fmt(hf.count.from)), ' → ', h('b', { id: 'hf-count' }, fmt(countNow())), ' tokens'];
+}
+
+function renderHandoff() {
+  const fresh = hf.from.tool === hf.to.tool;
+  put('#handoff',
+    h('div', { class: `hf-route ${hf.tag}` },
+      h('span', { class: 'hf-end' }, agentIcon(hf.from.tool), h('span', { class: 'hf-name' }, hf.from.label)),
+      h('span', { class: 'hf-line', 'aria-hidden': 'true' }, h('i')),
+      h('span', { class: 'hf-end to' },
+        h('span', { class: 'tile-ic' },
+          agentIcon(hf.to.tool),
+          fresh ? h('span', { class: 'corner' }, icon('fresh')) : hf.to.mode === 'terminal' ? h('span', { class: 'corner mono' }, '>_') : null),
+        h('span', { class: 'hf-name' }, hf.to.label))),
+    h('p', { class: 'hf-title', title: hf.title }, hf.title),
+    h('ol', { class: 'hf-steps' }, hf.steps.map((step) =>
+      h('li', { class: step.state }, h('span', { class: 's' }), h('span', { class: 'hf-step' }, step.name), h('em', {}, stepDetail(step))))),
+    hf.error ? h('p', { class: 'hf-error' }, hf.error) : null,
+    // A failed handoff stays until the user picks what's next (the panel may have opened without the keyboard).
+    hf.tag === 'failed'
+      ? h('div', { class: 'links hf-acts' },
+          h('button', { class: 'link', onclick: () => api.act(fresh ? { type: 'freshStart', key: hf.key } : { type: 'handoff', key: hf.key, target: hf.to.tool }) }, icon('fresh'), 'Try again'),
+          h('button', { class: 'link', onclick: () => { hf = null; go('home'); } }, icon('list'), 'All chats'),
+          h('button', { class: 'link quiet', onclick: () => api.hide() }, 'Close'))
+      : null);
+  const [text, cls] = hfTag();
+  $('#hf-tag').className = `tag ${cls}`;
+  $('#hf-tag').textContent = text;
+}
+
+function onHandoff(v) {
+  hf = v;
+  if (v.count && (!counting || counting.for !== `${v.key}:${v.count.from}:${v.count.to}`)) {
+    counting = { ...v.count, t0: performance.now(), for: `${v.key}:${v.count.from}:${v.count.to}` };
+    requestAnimationFrame(tickCount);
+  }
+  // Fades out as the overlay takes over (main hides the window right after).
+  $('#panel').classList.toggle('out', v.leaving);
+  if (view !== 'handoff') {
+    openKey = null;
+    adding = null;
+  }
+  go('handoff');
+}
+
 // ---- frame ----
 
 function render() {
   if (!model) return;
-  for (const v of ['home', 'route', 'usage', 'settings']) $(`#${v}`).hidden = view !== v;
-  const home = view === 'home' || view === 'route';
+  for (const v of ['home', 'route', 'usage', 'settings', 'handoff']) $(`#${v}`).hidden = view !== v;
+  const handing = view === 'handoff' && !!hf;
+  const home = view === 'home' || view === 'route' || handing;
   $('#brand').hidden = !home;
-  $('#open-settings').hidden = !home;
+  $('#open-settings').hidden = !home || handing;
+  $('#hf-tag').hidden = !handing;
+  $('#foot').hidden = handing;
   // The router (⌥H) goes back to all chats too.
-  $('#back').hidden = view === 'home';
+  $('#back').hidden = view === 'home' || handing;
   $('#back').title = view === 'route' ? 'All chats' : 'Back';
   $('#view-title').hidden = home;
   $('#view-title').textContent = TITLE[view] ?? '';
@@ -391,6 +470,7 @@ function render() {
   if (view === 'home') renderHome();
   else if (view === 'route') renderRoute();
   else if (view === 'usage') renderUsage();
+  else if (handing) renderHandoff();
   else renderSettings();
 }
 
@@ -404,8 +484,10 @@ function show(opts) {
   adding = null;
   routeKey = opts?.route ?? null;
   routeSel = 0;
+  hf = null;
   go(routeKey && findSession(routeKey) ? 'route' : 'home');
   const panel = $('#panel');
+  panel.classList.remove('out');
   // 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');
@@ -431,7 +513,7 @@ document.addEventListener('keydown', (e) => {
     }
   }
   if (e.key !== 'Escape') return;
-  if (view === 'route') api.hide();
+  if (view === 'route' || view === 'handoff') api.hide();
   else if (view !== 'home') go('home');
   else if (adding) { adding = null; render(); }
   else api.hide();
@@ -447,6 +529,7 @@ api.onModel((m) => {
   render();
 });
 api.onShown(show);
+api.onHandoff?.(onHandoff);
 api.ready();
 
 function demoApi() {
@@ -478,6 +561,43 @@ function demoApi() {
     { ...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 onHandoff = () => {};
+  let onShown = () => {};
+  /** The handoff's show, on main's timing (see presentHandoff). */
+  const demoShow = (c, to) => {
+    let v = {
+      key: c.key,
+      from: { tool: c.tool, label: label[c.tool] },
+      to: { tool: to, label: to === c.tool ? 'New chat' : label[to], mode: to === 'cursor' ? 'terminal' : 'app' },
+      title: c.title,
+      tag: c.status === 'limit' ? 'stopped' : 'moving',
+      steps: [
+        { name: 'Detect', state: 'run', detail: c.status === 'limit' ? 'usage limit, resets 3:00 PM' : 'moved by you' },
+        { name: 'Extract', state: 'wait', detail: 'reading the chat and git' },
+        { name: 'Distill', state: 'wait', detail: 'into one .harlay file' },
+        { name: 'Rehydrate', state: 'wait', detail: `opening ${label[to]}` },
+      ],
+      count: null,
+      error: null,
+      leaving: false,
+    };
+    const step = (name, state, detail) => { v = { ...v, steps: v.steps.map((x) => (x.name === name ? { ...x, state, detail: detail ?? x.detail } : x)) }; };
+    const fail = new URLSearchParams(location.search).has('fail');
+    const timeline = [
+      [0, () => {}],
+      [380, () => { step('Detect', 'done'); step('Extract', 'run'); }],
+      [520, () => { step('Extract', 'done', '318 messages · 4 files changed'); step('Distill', 'run'); }],
+      [150, () => { v = { ...v, count: { from: 188_412, to: 3_106 } }; }],
+      [950, () => { step('Distill', 'done'); step('Rehydrate', 'run'); }],
+      fail
+        ? [700, () => { v = { ...v, tag: 'failed', error: 'Cursor CLI not found. Install it or switch Cursor to app mode.', steps: v.steps.map((x) => (x.state === 'run' ? { ...x, state: 'fail' } : x)) }; }]
+        : [700, () => { step('Rehydrate', 'done', `${label[to]} · press ⏎ to send`); v = { ...v, tag: 'done' }; }],
+      ...(fail ? [] : [[800, () => { v = { ...v, leaving: true }; }]]),
+    ];
+    let t = 0;
+    for (const [d, f] of timeline) setTimeout(() => { f(); onHandoff(v); }, (t += d));
+    if (!fail) setTimeout(() => onShown({}), t + 1500);
+  };
   const emit = () => onModel({
     groups: ['claude-code', 'codex', 'cursor'].map((tool) => ({
       tool,
@@ -495,7 +615,8 @@ function demoApi() {
   });
   return {
     onModel: (cb) => { onModel = cb; },
-    onShown: (cb) => setTimeout(cb, 50),
+    onShown: (cb) => { onShown = cb; setTimeout(cb, 50); },
+    onHandoff: (cb) => { onHandoff = cb; },
     ready: emit,
     resize: () => {},
     hide: () => console.log('[demo] hide'),
@@ -522,6 +643,7 @@ function demoApi() {
         c.busy = true;
         emit();
         const to = label[a.target ?? c.tool];
+        demoShow(c, 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;