harlay 0.3.0 → 0.4.0

package/app/renderer/overlay.js

@@ -7,9 +7,9 @@ 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' };
+const BADGE = { 'claude-code': 'CC', codex: 'CX', cursor: 'CU', 'claude-web': 'C', chatgpt: 'G' };
 /** How long the widget stays when the agent doesn't pick the handoff up meanwhile. */
-const STAY_MS = { app: 10_000, terminal: 8_000 };
+const STAY_MS = { app: 10_000, terminal: 8_000, web: 10_000 };
 /** How long it stays once the agent did. */
 const GOT_MS = 1_900;
 
@@ -90,7 +90,8 @@ function fillPill(p, m) {
   agentIcon(m.to, txt);
   el('b', '', txt).textContent = m.to.label;
   const act = el('span', 'act', p);
-  if (m.to.mode === 'app') {
+  // An app or a web chat waits for Enter; a terminal starts at once.
+  if (m.to.mode === 'app' || m.to.mode === 'web') {
     el('kbd', '', act).textContent = '⏎';
     act.append('to send');
   } else {

package/app/renderer/popover.css

@@ -246,16 +246,24 @@ kbd { margin-right: 6px; padding: 1px 5px; border-radius: 5px; border: 1px solid
 .tile-meter i { display: block; height: 100%; background: var(--accent); }
 .tile-meter i.warm { background: var(--long); }
 .tile-meter i.hot { background: var(--bad); }
-.tile-key { position: absolute; top: 5px; right: 6px; font: 500 9px var(--mono); color: var(--fg3); opacity: 0; transition: opacity .15s; }
-.tile.sel .tile-key, .tile:hover .tile-key { opacity: 1; }
 .r-busy { justify-content: center; height: 110px; }
-.r-foot { display: flex; align-items: center; justify-content: space-between; margin: 6px 12px 10px; }
-.r-hint { display: flex; gap: 4px; }
+.r-more { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 8px 12px 2px; }
+.r-more-k { font-size: 11.5px; color: var(--fg3); margin-right: 2px; }
+.chip { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 5px; border-radius: 9px; border: 1px solid transparent; font-size: 11.5px; font-weight: 500; color: var(--fg2); transition: background-color .15s, border-color .15s; }
+.chip.sel { background: var(--card); border-color: rgba(var(--accent-rgb), .45); color: var(--fg); }
+.chip .agent { width: 18px; height: 18px; border-radius: 5px; }
+.chip .agent.badge { font-size: 8px; }
+.chip .corner { right: -4px; bottom: -3px; min-width: 11px; height: 11px; padding: 0 1px; border-radius: 4px; }
+.chip .corner svg { width: 8px; height: 8px; }
+.chip .corner.mono { font-size: 6px; }
+.r-folder { margin: 6px 16px 0; text-align: center; font-size: 11.5px; color: var(--fg3); }
+.r-folder .link { font-size: 11.5px; font-weight: 600; }
+.agent.badge.globe svg { width: 11px; height: 11px; }
+.r-foot { display: flex; align-items: center; justify-content: flex-end; margin: 6px 12px 10px; }
 .r-acts { display: flex; align-items: center; gap: 14px; }
 .link.r-dismiss { color: var(--fg3); }
 .link.r-dismiss:hover { color: var(--fg); }
 .r-alert { margin: 4px 16px 8px; font-size: 12px; font-weight: 500; color: var(--bad); }
-.r-hint kbd { padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line3); font: 500 10px var(--mono); color: var(--fg3); }
 
 /* chat health: a battery with one look per state (fresh, long, struggling), and the state in words in the card */
 .battery { width: 22px; height: 11px; overflow: visible; }

package/app/renderer/popover.js

@@ -12,11 +12,12 @@ const ICON = {
   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>',
+  globe: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="5.6"/><path d="M2.6 8h10.8M8 2.4c1.6 1.6 2.3 3.5 2.3 5.6S9.6 12 8 13.6M8 2.4C6.4 4 5.7 5.9 5.7 8S6.4 12 8 13.6"/></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 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 BADGE = { 'claude-code': 'CC', codex: 'CX', cursor: 'CU', 'claude-web': 'C', chatgpt: 'G' };
+const AGENT_LABEL = { 'claude-code': 'Claude Code', codex: 'Codex', cursor: 'Cursor', 'claude-web': 'claude.ai', chatgpt: 'ChatGPT' };
 const HEALTH_LABEL = { fresh: 'Healthy', long: 'Getting long', struggling: 'Running low' };
 
 let model = null;
@@ -187,11 +188,24 @@ function renderGroup(g) {
     g.sessions.length ? g.sessions.map((s) => renderSession({ ...s, agentLabel: g.label })) : h('p', { class: 'none' }, 'No chats yet'));
 }
 
+/** Web chats Harlay read (⌥H on one, or a limit it spotted), first: each opens where it can go, to switch. */
+function renderWebGroup() {
+  if (!model.webChats?.length) return null;
+  return h('section', { class: 'grp' },
+    h('div', { class: 'grp-h' }, h('span', { class: 'agent badge globe', 'aria-hidden': 'true' }, icon('globe')), h('span', { class: 'grp-name' }, 'Web chats')),
+    model.webChats.map((s) =>
+      h('div', { class: 'item' },
+        h('button', { class: 'row', title: s.title, onclick: () => { routeKey = s.key; routeSel = 0; go('route'); } },
+          h('span', { class: `st ${s.status}` }, s.status === 'idle' ? null : h('i')),
+          h('span', { class: 'title' }, s.title),
+          h('span', { class: 'time' }, s.ago)))));
+}
+
 function renderHome() {
   const { groups } = model;
   put('#home', 
-    groups.length
-      ? h('div', { class: 'scroll' }, groups.map(renderGroup))
+    groups.length || model.webChats?.length
+      ? h('div', { class: 'scroll' }, renderWebGroup(), 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.
@@ -277,24 +291,40 @@ function renderSettings() {
         { value: 'dark', label: 'Dark' },
       ], 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(
+      'Web chats',
+      settings.webChats && !settings.webChatsAllowed
+        ? 'Allow Harlay in System Settings › Privacy & Security › Accessibility.'
+        : 'Spots limits on claude.ai and ChatGPT, and ⌥H moves the one in front.',
+      settings.webChats,
+      { type: 'toggleWebChats' }),
     toggleRow('Open at login', null, settings.openAtLogin, { type: 'toggleLogin' })));
 }
 
 function findSession(key) {
   for (const g of model.groups) for (const s of g.sessions) if (s.key === key) return s;
-  return null;
+  return model.webChats?.find((s) => s.key === key) ?? null;
 }
 
+/** The agent a chat is in, or a web chat's site. */
 function findTool(key) {
   for (const g of model.groups) if (g.sessions.some((s) => s.key === key)) return g.tool;
-  return null;
+  return model.webChats?.find((s) => s.key === key)?.web ?? null;
+}
+
+/** For a web chat: the folder its agents open in, and a way to change it. */
+function folderLine(s) {
+  if (!s.web || !s.targets.some((t) => t.mode !== 'web')) return null;
+  const name = model.agentFolder ? model.agentFolder.split('/').filter(Boolean).pop() : null;
+  const pick = (label) => h('button', { class: 'link', title: model.agentFolder ? `${model.agentFolder} · click to change` : 'Pick a folder', onclick: () => api.act({ type: 'pickFolder', key: s.key }) }, label);
+  return h('p', { class: 'r-folder' }, name ? ['Agents open in ', pick(name)] : ['Agents need a ', pick('folder')]);
 }
 
 // ---- 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. */
+/** Usage of an agent's fullest window, for the thin meter under its icon. claude.ai draws on Claude Code's plan. */
 function usageOf(tool) {
-  const row = model.usage?.find((u) => u.tool === tool);
+  const row = model.usage?.find((u) => u.tool === (tool === 'claude-web' ? 'claude-code' : tool));
   if (!row || !row.windows.length) return null;
   return Math.max(...row.windows.map((w) => w.pct));
 }
@@ -323,12 +353,31 @@ function routeLines(n, selected) {
   return svg;
 }
 
-/** The router's choices: other agents (default first), then a new chat in the same agent. */
+/**
+ * The router's choices: tiles for what's offered first (other agents and a new chat for a chat about code, web chats for
+ * one that only talked), and a row of smaller choices for the rest. `all` is both, in order, for the keys.
+ */
 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 } }));
+  const pick = (t) => ({ tool: t.tool, label: t.label, mode: t.mode, act: { type: 'handoff', key: s.key, target: t.tool } });
+  let tiles = s.targets.filter((t) => t.primary).map(pick);
+  let more = s.targets.filter((t) => !t.primary).map(pick);
   // 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;
+  if (s.canStartFresh && s.status !== 'limit') (s.kind === 'chat' ? more : tiles).push({ tool, label: 'New chat', mode: null, fresh: true, act: { type: 'freshStart', key: s.key } });
+  if (!tiles.length) [tiles, more] = [more, []];
+  return { tiles, more, all: [...tiles, ...more] };
+}
+
+/** The small mark on a choice's icon: a new chat, a terminal, or the browser. */
+function cornerOf(c) {
+  if (c.fresh) return h('span', { class: 'corner' }, icon('fresh'));
+  if (c.mode === 'terminal') return h('span', { class: 'corner mono' }, '>_');
+  if (c.mode === 'web') return h('span', { class: 'corner' }, icon('globe'));
+  return null;
+}
+
+function choiceTitle(c) {
+  if (c.fresh) return 'New chat that picks up where this one left off';
+  return `Continue in ${c.label}${c.mode === 'terminal' ? ' (Terminal)' : c.mode === 'web' ? ' in your browser' : ''}`;
 }
 
 let routeKey = null;
@@ -338,22 +387,20 @@ 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 { tiles, more, all } = routeChoices(s, tool);
+  routeSel = Math.min(routeSel, Math.max(0, all.length - 1));
+  const hover = (i) => () => { if (routeSel !== i) { routeSel = i; render(); } };
   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(); } },
+      title: choiceTitle(c),
+      onmouseenter: hover(i),
       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-ic' }, agentIcon(c.tool), cornerOf(c)),
       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)));
+      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' : '')));
   };
   put('#route',
     // Opened by itself because this chat hit its limit: say so, and when it resets.
@@ -364,14 +411,23 @@ function renderRoute() {
       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))]
+      : tiles.length
+        ? [
+            routeLines(tiles.length, routeSel),
+            h('div', { class: `r-tiles n${tiles.length}` }, tiles.map(tile)),
+            more.length
+              ? h('div', { class: 'r-more' }, h('span', { class: 'r-more-k' }, 'Or'), more.map((c, j) => {
+                  const i = tiles.length + j;
+                  return h('button', { class: `chip${i === routeSel ? ' sel' : ''}`, title: choiceTitle(c), onmouseenter: hover(i), onclick: () => api.act(c.act) },
+                    h('span', { class: 'tile-ic' }, agentIcon(c.tool), cornerOf(c)), c.label);
+                }))
+              : null,
+            folderLine(s),
+          ]
         : 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'))));
+        h('button', { class: 'link r-dismiss', onclick: () => api.hide() }, 'Not now'))));
 }
 
 // ---- a handoff as it runs (see presentHandoff in main.ts) ----
@@ -415,9 +471,7 @@ function renderHandoff() {
       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: 'tile-ic' }, agentIcon(hf.to.tool), cornerOf({ fresh, mode: hf.to.mode })),
         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) =>
@@ -503,7 +557,7 @@ $('#quit').addEventListener('click', () => api.act({ type: 'quit' }));
 document.addEventListener('keydown', (e) => {
   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 choices = s && !s.busy ? routeChoices(s, findTool(s.key)).all : [];
     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);
@@ -533,8 +587,9 @@ api.onHandoff?.(onHandoff);
 api.ready();
 
 function demoApi() {
-  const label = { 'claude-code': 'Claude Code', codex: 'Codex', cursor: 'Cursor' };
-  const settings = { autoContinue: false, openAtLogin: true, theme: 'system', claudeBridge: 'off' };
+  const label = { 'claude-code': 'Claude Code', codex: 'Codex', cursor: 'Cursor', 'claude-web': 'claude.ai', chatgpt: 'ChatGPT' };
+  const web = ['claude-web', 'chatgpt'];
+  const settings = { autoContinue: false, openAtLogin: true, theme: 'system', claudeBridge: 'off', webChats: true, webChatsAllowed: true };
   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 },
@@ -549,12 +604,12 @@ function demoApi() {
     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 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 chat = (tool, id, title, ago, health, status = 'idle', detail = 'Idle', pinned = false, kind = 'coding') =>
+    ({ key: `${tool}:${id}`, tool, title, ago, status, detail, cwd: `/Users/you/${title.split(' ')[0].toLowerCase()}`, busy: false, pinned, health, canStartFresh: true, delivery: null, kind });
   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('claude-code', '3', 'Which database for a side project?', '3h', fresh, 'idle', 'Idle', false, 'chat'),
     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),
@@ -568,7 +623,7 @@ function demoApi() {
     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' },
+      to: { tool: to, label: to === c.tool ? 'New chat' : label[to], mode: to === 'cursor' ? 'terminal' : web.includes(to) ? 'web' : 'app' },
       title: c.title,
       tag: c.status === 'limit' ? 'stopped' : 'moving',
       steps: [
@@ -604,11 +659,19 @@ function demoApi() {
       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' })),
+        targets: [
+          ...['codex', 'claude-code', 'cursor'].filter((t) => t !== tool).map((t) => ({ tool: t, label: label[t], mode: t === 'cursor' ? 'terminal' : 'app', primary: c.kind !== 'chat' })),
+          ...web.filter((w) => !(w === 'claude-web' && tool === 'claude-code' && c.status === 'limit')).map((w) => ({ tool: w, label: label[w], mode: 'web', primary: c.kind === 'chat' })),
+        ].sort((a, b) => b.primary - a.primary),
       })),
     })),
     usage,
     icons: {},
+    webChats: [
+      { key: 'web:https://claude.ai/chat/1', web: 'claude-web', title: 'Trip plan for Tokyo', ago: 'now', status: 'limit', detail: 'Limit hit · resets 3:00 PM', cwd: null, busy: false, pinned: false, health: null, canStartFresh: false, delivery: null, kind: 'chat',
+        targets: [{ tool: 'chatgpt', label: 'ChatGPT', mode: 'web', primary: true }, { tool: 'codex', label: 'Codex', mode: 'app', primary: false }, { tool: 'cursor', label: 'Cursor', mode: 'terminal', primary: false }] },
+    ],
+    agentFolder: '/Users/you/robotic-harness',
     askClaudeBridge: !asked,
     settings: { ...settings },
     hotkey: '⌥H',
@@ -631,6 +694,7 @@ function demoApi() {
       console.log('[demo] action', a);
       if (a.type === 'toggleAuto') settings.autoContinue = !settings.autoContinue;
       if (a.type === 'toggleLogin') settings.openAtLogin = !settings.openAtLogin;
+      if (a.type === 'toggleWebChats') settings.webChats = !settings.webChats;
       if (a.type === 'setTheme') settings.theme = a.theme;
       if (a.type === 'answerClaudeBridge') {
         asked = true;