harlay 0.1.1 → 0.1.3

package/app/renderer/popover.css

@@ -87,6 +87,29 @@ button { font: inherit; color: inherit; background: none; border: 0; text-align:
 .label { display: flex; align-items: center; gap: 7px; padding: 8px 16px 6px; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
 .label::before { content: ""; width: 5px; height: 5px; background: var(--accent); }
 
+/* usage */
+.usage { padding: 0 8px 4px; }
+.usage .label { padding: 2px 8px 6px; }
+.u-row { display: flex; gap: 10px; padding: 6px 8px; }
+.u-name { flex: none; width: 86px; font-size: 12px; font-weight: 600; padding-top: 1px; }
+.u-body { flex: 1; min-width: 0; }
+.u-win { display: flex; align-items: center; gap: 8px; height: 18px; }
+.u-lbl { flex: none; width: 34px; font: 10.5px var(--mono); color: var(--fg3); }
+.u-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(var(--ink-rgb), .08); overflow: hidden; }
+.u-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
+.u-bar i.warm { background: var(--warn); }
+.u-bar i.hot { background: var(--err); }
+.u-pct { flex: none; width: 38px; text-align: right; font: 500 11px var(--mono); color: var(--fg); }
+.u-reset { flex: none; width: 92px; font: 10.5px var(--mono); color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.u-meta { margin-top: 2px; font-size: 11px; color: var(--fg3); }
+.link.inline { margin: 0 0 0 6px; font-size: 11px; }
+.switch:disabled { opacity: .4; }
+
+.ask { margin: 0 8px 8px; padding: 11px 12px; border-radius: 10px; background: var(--card); border: 1px solid rgba(var(--accent-rgb), .35); }
+.ask-title { font-size: 12.5px; font-weight: 600; }
+.ask-body { margin-top: 3px; font-size: 11.5px; color: var(--fg2); }
+.ask-btns { display: flex; gap: 6px; margin-top: 9px; }
+
 /* sessions */
 .label.group { padding: 10px 8px 4px; }
 .label.group:first-child { padding-top: 2px; }
@@ -163,6 +186,7 @@ kbd { margin-right: 6px; padding: 1px 5px; border-radius: 4px; border: 1px solid
 .md h3 { margin: 2px 0 8px; font: 500 16px/1.25 var(--serif); color: var(--fg); }
 .md h4 { margin: 14px 0 5px; font-size: 12.5px; font-weight: 600; color: var(--fg); }
 .md p { margin: 0 0 7px; }
+.md p.muted { font-size: 12px; color: var(--fg3); }
 .md strong { color: var(--fg); font-weight: 600; }
 .md code { padding: 0 4px; border-radius: 4px; background: var(--sunk); border: 1px solid var(--line); font: 11px var(--mono); color: var(--fg); word-break: break-word; }
 .md pre { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line); font: 11px/1.45 var(--mono); color: var(--fg); white-space: pre-wrap; word-break: break-word; }

package/app/renderer/popover.js

@@ -122,15 +122,56 @@ function groupSessions(sessions) {
   return { attention, projects: [...projects.values()] };
 }
 
+/** 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 });
+  el.style.width = `${Math.max(2, Math.min(100, pct))}%`;
+  return el;
+}
+
+/** 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 ask = model.askClaudeBridge
+    ? h('div', { class: 'ask' },
+        h('p', { class: 'ask-title' }, 'Show Claude’s exact usage?'),
+        h('p', { class: 'ask-body' }, 'Claude Code in Terminal can pass its real usage to Harlay through its status line. Harlay adds one line to ~/.claude/settings.json; a status line you already have keeps working.'),
+        h('div', { class: 'ask-btns' },
+          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'),
+    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' },
+          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));
+    }));
+}
+
 function renderHome() {
   const { sessions } = model;
   if (!sessions.length) {
-    $('#home').replaceChildren(renderHero(), h('p', { class: 'empty' }, 'Harlay reads session logs from ~/.claude, ~/.codex and ~/.cursor on this Mac.'));
+    $('#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) => [
@@ -144,10 +185,10 @@ function seg(options, current, onPick) {
     h('button', { 'aria-pressed': String(o.value === current), disabled: o.disabled, onclick: () => onPick(o.value) }, o.label)));
 }
 
-function toggleRow(label, hint, checked, action) {
+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', 'aria-checked': String(checked), 'aria-label': label, onclick: () => api.act(action) }));
+    h('button', { class: 'switch', role: 'switch', disabled, 'aria-checked': String(checked), 'aria-label': label, onclick: () => api.act(action) }));
 }
 
 function renderSettings() {
@@ -172,7 +213,16 @@ function renderSettings() {
       ], 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' })));
+      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')));
 }
 
 /** Inline markdown: `code` and **bold**; everything else stays plain text. */
@@ -240,12 +290,73 @@ function markdown(src) {
   return out;
 }
 
+/** Headings for the blocks of an inline handoff prompt (see packages/core/src/brief/prompt.ts). */
+const BRIEF_BLOCKS = {
+  original_goal: 'Original goal',
+  rules_from_user: 'Rules from the user',
+  recent_user_messages: 'Recent messages (oldest first)',
+  where_it_stopped: 'Where it stopped',
+  files: 'Files',
+  last_failure: 'Last failure',
+};
+
+/** `key="value"` pairs of the opening `<handoff …>` line (the prompt never puts `"` inside a value). */
+function tagAttrs(line) {
+  const out = {};
+  for (const m of line.matchAll(/([a-z_]+)="([^"]*)"/g)) out[m[1]] = m[2];
+  return out;
+}
+
+/**
+ * HANDOFF.md as Harlay writes it now: the tagged launch prompt. Block text is shown as written, never parsed as
+ * Markdown, so a line starting with ``` is plain text; the failure output is one verbatim block.
+ */
+function handoffBrief(src) {
+  const lines = src.replace(/\r\n/g, '\n').trim().split('\n');
+  const out = [];
+  let block = null;
+  let list = null;
+  let pre = null;
+  const close = () => {
+    if (pre) out.push(h('pre', {}, pre.join('\n')));
+    block = list = pre = null;
+  };
+  for (const line of lines) {
+    const t = line.trim();
+    let m;
+    if (!block && /^<handoff\s/.test(t)) {
+      const a = tagAttrs(t);
+      out.push(h('h3', {}, `Handoff from ${a.from || 'another agent'}${a.task ? ` · ${a.task}` : ''}`));
+    } else if (!block && (m = /^<([a-z_]+)(?:\s[^>]*)?>$/.exec(t)) && Object.hasOwn(BRIEF_BLOCKS, m[1])) {
+      block = m[1];
+      out.push(h('h4', {}, BRIEF_BLOCKS[block]));
+      if (block === 'last_failure') pre = [];
+    } else if ((m = /^<\/([a-z_]+)>$/.exec(t)) && (m[1] === block || (!block && m[1] === 'handoff'))) {
+      close();
+    } else if (pre) {
+      pre.push(line);
+    } else if (t === '') {
+      list = null;
+    } else if (!block) {
+      out.push(h('p', { class: 'muted' }, t));
+    } else if (t.startsWith('- ')) {
+      if (!list) out.push((list = h('ul', {})));
+      list.append(h('li', {}, t.slice(2)));
+    } else {
+      list = null;
+      out.push(h('p', {}, t));
+    }
+  }
+  close();
+  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));
+  else body = h('div', { class: 'md' }, brief.text.trim().startsWith('<handoff ') ? handoffBrief(brief.text) : 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)),
@@ -353,7 +464,12 @@ function demoApi() {
     { 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' };
+  const settings = { defaultTarget: 'codex', autoContinue: false, openAtLogin: true, theme: 'system', claudeBridge: 'off' };
+  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) => {
@@ -370,9 +486,46 @@ function demoApi() {
   ];
   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 sampleBrief = (title) => [
+    `<handoff from="Claude Code" reason="usage_limit" task="${title.replace(/"/g, "'")}">`,
+    "You are taking over a coding session that Claude Code could not finish (it hit a usage limit). What you need to start is below; don't re-read the repo to rebuild it.",
+    '',
+    '<rules_from_user>',
+    "- Don't change the public /v1 API shape.",
+    '- Never push to main.',
+    '</rules_from_user>',
+    '',
+    '<recent_user_messages oldest_first="true">',
+    '- Move auth from session cookies to JWT across api/.',
+    '- Also migrate billing.ts before you run the tests.',
+    '</recent_user_messages>',
+    '',
+    '<where_it_stopped>',
+    '```bash npm test -- auth ``` still fails on the refresh test. Next I will migrate the last 3 route handlers in api/routes/.',
+    'Open todos: [in progress] Migrate billing.ts; [pending] Delete the legacy session store',
+    '</where_it_stopped>',
+    '',
+    '<files>',
+    'Touched: src/lib/jwt.ts, api/routes/auth.ts',
+    'Uncommitted: src/lib/jwt.ts (added, +42 -0), api/routes/auth.ts (modified, +12 -30)',
+    '</files>',
+    '',
+    '<last_failure>',
+    '$ npm test -- auth (exit 1)',
+    'FAIL auth.test.ts > refresh token rotates',
+    '  expected 401, received 200',
+    '</last_failure>',
+    '',
+    "Only if you need more: .harlay/handoffs/1005-1742-migrate-auth-to-jwt/transcript.md (search it, don't read it all) and .harlay/handoffs/1005-1742-migrate-auth-to-jwt/diff.patch.",
+    '</handoff>',
+    '',
+    'Continue from the most recent user message. Start with the next concrete step.',
+    '',
+  ].join('\n');
   const emit = () => onModel({
     sessions: sessions.map((s) => ({ ...s, targets: targets(s.from) })),
+    usage,
+    askClaudeBridge: !settings.asked,
     settings: { ...settings },
     tools: tools.map((t) => ({ ...t })),
     hotkey: '⌥H',
@@ -391,6 +544,11 @@ function demoApi() {
       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;
+        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);