agy-plugin-porter 0.1.0 → 0.2.0

package/scripts/mod-runtime/ui-draw.js

@@ -0,0 +1,122 @@
+// Draws a ported mod's element trees ($.ui.resolve's names) as DOM. Text from the mod
+// is always set as text, never parsed as HTML; Markdown escapes before formatting.
+(() => {
+  const esc = (s) => s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const inline = (s) => esc(s).replace(/`([^`]+)`/g, '<code>$1</code>').replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>')
+    .replace(/(^|\W)\*([^*]+)\*/g, '$1<i>$2</i>').replace(/\[([^\]]+)\]\((https?:[^)\s"]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+  // Minimal Markdown: headings, lists, code spans, bold, italics, links.
+  function markdown(text) {
+    const out = [];
+    let list = null;
+    for (const line of String(text).split('\n')) {
+      const h = /^(#{1,6})\s+(.*)$/.exec(line);
+      const li = /^\s*(?:[-*+]|(\d+)[.)])\s+(.*)$/.exec(line);
+      if (li) {
+        const tag = li[1] ? 'ol' : 'ul';
+        if (list !== tag) { if (list) out.push(`</${list}>`); out.push(li[1] ? `<ol start="${Number(li[1])}">` : '<ul>'); list = tag; }
+        out.push(`<li>${inline(li[2])}</li>`);
+        continue;
+      }
+      if (list) { out.push(`</${list}>`); list = null; }
+      if (h) out.push(`<h${h[1].length}>${inline(h[2])}</h${h[1].length}>`);
+      else if (line.trim()) out.push(`<p>${inline(line)}</p>`);
+    }
+    if (list) out.push(`</${list}>`);
+    const div = document.createElement('div');
+    div.className = 'md';
+    div.innerHTML = out.join('');
+    return div;
+  }
+
+  const COLORS = ['cyan', 'green', 'red', 'yellow', 'magenta', 'blue', 'gray', 'grey', 'white', 'black'];
+  const SAFE_COLOR = /^(#[0-9a-f]{3,8}|[a-z]+)$/i;
+  const textOf = (n) => (typeof n === 'string' ? n : (n.children ?? []).map(textOf).join(''));
+  const unit = (v) => `${Number(v) * 0.5}em`;
+  const color = (c) => (COLORS.includes(c) ? `var(--${c === 'grey' || c === 'gray' ? 'dim' : c}, ${c})` : SAFE_COLOR.test(c) ? c : '');
+
+  function draw(node, act, inText = false) {
+    if (typeof node === 'string') return document.createTextNode(node);
+    const p = node.props ?? {};
+    const kids = (el, nested = inText) => { for (const c of node.children ?? []) el.appendChild(draw(c, act, nested)); return el; };
+    switch (node.type) {
+      case 'Box': {
+        const el = document.createElement('div');
+        el.style.display = 'flex';
+        el.style.flexDirection = p.flexDirection === 'column' ? 'column' : 'row';
+        if (p.flexWrap) el.style.flexWrap = String(p.flexWrap);
+        for (const k of ['gap', 'columnGap', 'rowGap']) if (p[k] != null) el.style[k] = unit(p[k]);
+        if (p.flexGrow != null) el.style.flexGrow = String(Number(p.flexGrow));
+        if (p.alignItems) el.style.alignItems = String(p.alignItems);
+        if (p.justifyContent) el.style.justifyContent = String(p.justifyContent);
+        if (el.style.flexDirection === 'row') el.style.alignItems ||= 'baseline';
+        return kids(el, false);
+      }
+      case 'Text': {
+        const el = document.createElement('span');
+        el.className = 'Text' + (String(p.wrap ?? '').startsWith('truncate') ? ' trunc' : '');
+        if (!inText) el.style.display = 'block';
+        if (p.bold) el.style.fontWeight = '600';
+        if (p.italic) el.style.fontStyle = 'italic';
+        if (p.underline) el.style.textDecoration = 'underline';
+        if (p.strikethrough) el.style.textDecoration = 'line-through';
+        if (p.dimColor) el.style.color = 'var(--dim)';
+        if (typeof p.color === 'string') el.style.color = color(p.color);
+        return kids(el, true);
+      }
+      case 'Button': {
+        const el = document.createElement('button');
+        el.type = 'button';
+        el.className = 'el' + (p.plain ? ' plain' : '') + (p.variant === 'primary' ? ' primary' : '') + (p.dimColor ? ' dim' : '');
+        el.textContent = p.label ?? textOf(node);
+        if (typeof p.hotkey === 'string') { el.title = `Hotkey: ${p.hotkey}`; el.dataset.hotkey = p.hotkey; }
+        if (p.onPress?.$cb) el.onclick = () => act(p.onPress);
+        return el;
+      }
+      case 'Input': {
+        const form = document.createElement('form');
+        form.className = 'input';
+        const input = document.createElement('input');
+        input.placeholder = p.placeholder ?? p.label ?? '';
+        input.value = p.value ?? '';
+        input.setAttribute('aria-label', p.label ?? p.placeholder ?? 'input');
+        const btn = document.createElement('button');
+        btn.className = 'el';
+        btn.textContent = p.submitLabel ?? 'OK';
+        form.append(input, btn);
+        form.onsubmit = (e) => {
+          e.preventDefault();
+          const cb = p.onSubmit?.$cb ? p.onSubmit : p.onChange;
+          if (cb?.$cb) act(cb, input.value);
+          input.value = '';
+        };
+        return form;
+      }
+      case 'Select': {
+        const sel = document.createElement('select');
+        for (const o of p.options ?? []) sel.add(new Option(o.label ?? String(o.value), o.value));
+        if (p.value !== undefined) sel.value = p.value;
+        const cb = p.onChange ?? p.onSelect ?? p.onSubmit;
+        if (cb?.$cb) sel.onchange = () => act(cb, sel.value);
+        return sel;
+      }
+      case 'Code': {
+        const pre = document.createElement('pre');
+        pre.textContent = p.source ?? textOf(node);
+        return pre;
+      }
+      case 'Markdown':
+        return markdown(p.text ?? p.source ?? textOf(node));
+      case 'Divider':
+        return document.createElement('hr');
+      default: {
+        const el = document.createElement('div');
+        el.dataset.type = String(node.type);
+        el.title = `${node.type} isn't drawn by the Antigravity port`;
+        return kids(el);
+      }
+    }
+  }
+
+  window.PorterDraw = { draw, markdown };
+})();

package/scripts/mod-runtime/ui.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Ported mod</title>
+<!-- Loaded first, like science's view, so the host's one-shot theme-change isn't missed.
+     preload.js reads the token from this page's URL, so its own URL needs none. -->
+<script src="/preload.js"></script>
+<style>
+  :root { --bg: #fafafa; --fg: #1f1f1f; --dim: #6b6b6b; --line: rgba(127,127,127,.25); --accent: #0b6bcb;
+    --cyan: #0e7490; --green: #15803d; --red: #b91c1c; --yellow: #a16207; --magenta: #a21caf; --blue: #1d4ed8; }
+  :root[data-theme="dark"] { --bg: #181818; --fg: #e6e6e6; --dim: #9a9a9a; --accent: #4ea1ff;
+    --cyan: #22d3ee; --green: #4ade80; --red: #f87171; --yellow: #facc15; --magenta: #e879f9; --blue: #60a5fa; }
+  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #181818; --fg: #e6e6e6; --dim: #9a9a9a; --accent: #4ea1ff;
+    --cyan: #22d3ee; --green: #4ade80; --red: #f87171; --yellow: #facc15; --magenta: #e879f9; --blue: #60a5fa; } }
+  body { font: 13px/1.45 system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
+  header { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; padding: 8px 10px; border-bottom: 1px solid var(--line); }
+  header .cmd { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
+  header .cmd label { color: var(--dim); font-size: 12px; }
+  header .cmd input { width: 9em; }
+  header .cmd .help { color: var(--dim); font-size: 11px; width: 100%; }
+  #strips > div { padding: 6px 10px; border-bottom: 1px solid var(--line); }
+  nav { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); }
+  nav button { border: 0; background: none; color: var(--dim); padding: 6px 8px; cursor: pointer; }
+  nav button.on { color: var(--fg); border-bottom: 2px solid var(--accent); }
+  nav .x { margin-left: 2px; opacity: .6; }
+  main { padding: 10px; }
+  footer { position: sticky; bottom: 0; padding: 4px 10px; border-top: 1px solid var(--line); color: var(--dim); background: var(--bg); min-height: 1.4em; }
+  #toasts { position: fixed; right: 10px; bottom: 34px; display: flex; flex-direction: column; gap: 6px; max-width: 80%; }
+  .toast { background: var(--fg); color: var(--bg); padding: 6px 10px; border-radius: 6px; font-size: 12px; }
+  .empty { color: var(--dim); padding: 20px 10px; }
+  button, input, select { font: inherit; color: inherit; }
+  button.el { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
+  button.el.primary { border-color: var(--accent); color: var(--accent); }
+  button.el.plain { border: 0; padding: 0 2px; text-align: left; }
+  button.el.dim { color: var(--dim); }
+  button.el:hover { background: var(--line); }
+  input, select { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
+  form.input { display: flex; gap: 4px; }
+  form.input input { flex: 1; }
+  .Text { white-space: pre-wrap; }
+  .Text.trunc { white-space: pre; overflow: hidden; text-overflow: ellipsis; display: block; }
+  pre { background: var(--line); padding: 6px; margin: 0; white-space: pre-wrap; }
+  .md p, .md ul, .md ol, .md h1, .md h2, .md h3 { margin: 2px 0; }
+  .md h1, .md h2, .md h3 { font-size: 13px; }
+  .md code { background: var(--line); padding: 0 3px; border-radius: 3px; }
+  .error { color: var(--red); }
+</style>
+</head>
+<body>
+<header id="commands" hidden></header>
+<div id="strips"></div>
+<nav id="tabs" hidden></nav>
+<main id="pane"><div class="empty">Connecting…</div></main>
+<footer id="status"></footer>
+<div id="toasts"></div>
+<script src="/ui-draw.js"></script>
+<script src="/ui.js"></script>
+</body>
+</html>

package/scripts/mod-runtime/ui.js

@@ -0,0 +1,149 @@
+// The side-pane view of a ported Claude Code mod: draws the panes the sidecar sends
+// over SSE, posts clicks back, and reports whether the person can see it.
+(() => {
+  const $ = (id) => document.getElementById(id);
+  const { draw } = window.PorterDraw;
+  const params = new URLSearchParams(location.search);
+  const token = params.get('token') || '';
+  const raw = params.get('conversationId') || '';
+  // A frame with no id, or _new, belongs to a conversation that doesn't exist yet (live).
+  const conv = raw && raw !== '_new' ? raw : '';
+  const headers = { 'Content-Type': 'application/json', 'X-Sidecar-Token': token };
+  const post = (path, body) => fetch(path, { method: 'POST', headers, body: JSON.stringify({ conv, ...body }) }).then((r) => r.json());
+  let state = { panes: [], strips: [], commands: [], status: null };
+  let active = null;
+  let viewId = null;
+
+  // Host theme: theme-change carries themeType (light/dark).
+  window.addEventListener('message', (e) => {
+    const parentOrigin = location.ancestorOrigins?.[0];
+    if (e.source !== window.parent || !e.origin || e.origin === 'null' || (parentOrigin && parentOrigin !== 'null' && e.origin !== parentOrigin)) return;
+    if (e.data?.type === 'theme-change') {
+      const t = e.data.payload?.themeType ?? e.data.payload?.theme;
+      if (t === 'dark' || t === 'light') document.documentElement.dataset.theme = t;
+    }
+  });
+
+  function toast(text) {
+    const el = document.createElement('div');
+    el.className = 'toast';
+    el.textContent = text;
+    $('toasts').appendChild(el);
+    setTimeout(() => el.remove(), 6000);
+  }
+  async function copy(text) {
+    try { await navigator.clipboard.writeText(text); return true; } catch {}
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand('copy');
+    ta.remove();
+    return ok;
+  }
+  const status = (text) => { $('status').textContent = text ?? ''; };
+  const act = (cb, ...args) => post('/api/action', { cb: cb.$cb, args }).then((r) => { if (r.error) toast(r.error); });
+  const note = (className, textContent) => Object.assign(document.createElement('div'), { className, textContent });
+
+  // Hidden copies (another conversation's frame, Hangar's embedded views) must not
+  // count as a placed pane: report visibilityState plus IntersectionObserver.
+  let inViewport = false;
+  let reported = null;
+  function report() {
+    const visible = document.visibilityState === 'visible' && inViewport;
+    if (viewId === null || visible === reported) return;
+    reported = visible;
+    post('/api/visibility', { view: viewId, visible }).catch(() => {});
+  }
+  new IntersectionObserver((entries) => { inViewport = entries.at(-1).isIntersecting; report(); }).observe(document.documentElement);
+  document.addEventListener('visibilitychange', report);
+
+  // One button per command, with a labeled argument field; argumentHint is help text.
+  function commandBar() {
+    const bar = $('commands');
+    bar.replaceChildren();
+    (state.commands ?? []).forEach((c, i) => {
+      const wrap = document.createElement('span');
+      wrap.className = 'cmd';
+      const btn = document.createElement('button');
+      btn.className = 'el';
+      btn.textContent = `/${c.name}`;
+      btn.title = c.description ?? '';
+      const input = document.createElement('input');
+      input.id = `cmd-arg-${i}`;
+      const label = Object.assign(document.createElement('label'), { htmlFor: input.id, textContent: 'Arguments' });
+      wrap.append(btn, label, input);
+      if (c.argumentHint) {
+        const help = Object.assign(document.createElement('span'), { id: `cmd-help-${i}`, className: 'help', textContent: `/${c.name} ${c.argumentHint}` });
+        input.setAttribute('aria-describedby', help.id);
+        wrap.append(help);
+      }
+      const run = () => post('/api/command', { command: c.name, args: input.value }).then(() => { input.value = ''; });
+      btn.onclick = run;
+      input.onkeydown = (e) => { if (e.key === 'Enter') run(); };
+      bar.appendChild(wrap);
+    });
+    bar.hidden = !(state.commands ?? []).length;
+  }
+
+  function renderAll() {
+    commandBar();
+    $('strips').replaceChildren(...(state.strips ?? []).map((s) => { const d = document.createElement('div'); d.appendChild(draw(s.tree, act)); return d; }));
+    const panes = state.panes ?? [];
+    if (!panes.some((p) => p.id === active)) active = panes.at(-1)?.id ?? null;
+    const tabs = $('tabs');
+    tabs.replaceChildren();
+    for (const p of panes) {
+      const b = document.createElement('button');
+      b.className = p.id === active ? 'on' : '';
+      b.textContent = p.title;
+      b.onclick = () => { active = p.id; renderAll(); };
+      const x = document.createElement('span');
+      x.className = 'x';
+      x.textContent = ' ×';
+      x.title = 'Close this pane';
+      x.onclick = (e) => { e.stopPropagation(); post('/api/close', { id: p.id }); };
+      b.appendChild(x);
+      tabs.appendChild(b);
+    }
+    tabs.hidden = panes.length === 0;
+    const pane = panes.find((p) => p.id === active);
+    const main = $('pane');
+    if (!pane) return main.replaceChildren(note('empty', 'No pane is open. Use a command above, or ask the agent.'));
+    if (pane.error) return main.replaceChildren(note('error', pane.error));
+    main.replaceChildren(pane.tree ? draw(pane.tree, act) : note('empty', '(empty)'));
+  }
+
+  // Hotkeys of the active pane's buttons, when no field has focus.
+  document.addEventListener('keydown', (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey || /INPUT|SELECT|TEXTAREA/.test(document.activeElement?.tagName ?? '')) return;
+    const btn = $('pane').querySelector(`button[data-hotkey="${CSS.escape(e.key)}"]`);
+    if (btn) { e.preventDefault(); btn.click(); }
+  });
+
+  if (!conv) {
+    $('pane').replaceChildren(note('empty', 'No conversation yet. Start one, then reopen this pane.'));
+    return;
+  }
+  const events = new EventSource(`/api/events?token=${encodeURIComponent(token)}&conv=${encodeURIComponent(conv)}`);
+  events.onmessage = async (e) => {
+    const msg = JSON.parse(e.data);
+    if (msg.type === 'hello') { document.title = msg.mod; viewId = msg.view; reported = null; report(); }
+    else if (msg.type === 'state') { state = msg; status(msg.status); renderAll(); }
+    else if (msg.type === 'status') status(msg.text);
+    else if (msg.type === 'toast') toast(msg.text);
+    else if (msg.type === 'copy') toast((await copy(msg.text)) ? 'Copied.' : 'Could not copy.');
+    else if (msg.type === 'fill') toast((await copy(msg.text)) ? 'Copied. Paste it into the prompt box.' : 'Could not copy the text for the prompt box.');
+  };
+  events.onerror = () => status('Disconnected from the sidecar. Retrying…');
+
+  // The workspace is the conversation's cwd until a hook reports it.
+  (async () => {
+    try {
+      const uris = await window.sidecar?.getWorkspaceUris?.();
+      const first = Array.isArray(uris) ? uris[0] : null;
+      const cwd = first ? decodeURIComponent(new URL(first).pathname).replace(/^\/([A-Za-z]:)/, '$1') : '';
+      await post('/api/view', { cwd });
+    } catch {}
+  })();
+})();