wisp-agents 0.15.0 → 0.17.0

package/web/js/features/phone.js

@@ -0,0 +1,124 @@
+// Phone: questions and finished tasks over ntfy or Telegram, answered from there.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { $, $$, el, icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+import { present } from '../ui/overlay.js';
+import { toast, toastError } from '../ui/toast.js';
+import { placeName, recentFirst } from './places.js';
+
+export function phoneSummary(r) {
+  if (!r) return '';
+  const on = [r.ntfy.enabled && r.ntfy.topic && 'ntfy', r.telegram.enabled && r.telegram.linked && 'Telegram'].filter(Boolean);
+  return on.length ? `${on.join(' + ')} · ${r.events.map((e) => (e === 'waiting' ? 'questions' : 'finished')).join(' & ')}` : 'Off';
+}
+
+export async function openPhone({ host } = {}) {
+  const node = el(`<div class="modal phone-modal">
+      <header><h2>Phone</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <p class="mem-lede">Get questions and finished tasks on your phone, and answer from there. wisp polls both services, so nothing needs to reach this machine. They receive titles, summaries and questions (with their context), never code or diffs.</p>
+      <div class="ph-body"></div>
+    </div>`);
+  const close = present(node, host);
+  let r;
+  const put = async (patch) => {
+    try {
+      r = await api('/remote', { method: 'PUT', body: patch });
+      paint();
+    } catch (err) {
+      toastError(err);
+    }
+  };
+  const status = (st) => (!st ? '' : st.ok ? `<span class="ph-ok">${icon('check')}Working</span>` : `<span class="ph-bad">${icon('warn')}${esc(st.error || 'Failed')}</span>`);
+  const paint = () => {
+    const tg = r.telegram;
+    const projects = S.config.projects || [];
+    const lastUsed = [...projects].sort(recentFirst)[0];
+    $('.ph-body', node).innerHTML = `
+      <div class="settings-modal ph-sec">
+        <div class="setting"><span>Send me</span>
+          <label class="check"><input type="checkbox" data-ev="waiting" ${r.events.includes('waiting') ? 'checked' : ''}> Questions</label>
+          <label class="check"><input type="checkbox" data-ev="finished" ${r.events.includes('finished') ? 'checked' : ''}> Finished tasks</label></div>
+      </div>
+      <section class="ph-sec">
+        <h4>ntfy <span class="muted xs">· tap a button on the notification to answer</span>${status(r.status.ntfy)}<button class="switch" data-sw="ntfy" role="switch" aria-checked="${r.ntfy.enabled}"></button></h4>
+        <div class="settings-modal">
+          <label><span>Topic</span><input class="input mono" data-ntfy="topic" value="${esc(r.ntfy.topic)}" placeholder="wisp-…" spellcheck="false"></label>
+          <label><span>Server</span><input class="input mono" data-ntfy="server" value="${esc(r.ntfy.server)}" spellcheck="false"></label>
+          <label><span>Access token</span><input class="input mono" data-ntfy="token" value="${esc(r.ntfy.token)}" placeholder="Only for protected topics" spellcheck="false" type="password"></label>
+        </div>
+        <p class="hint">Install the ntfy app and subscribe to the topic. Anyone who knows the topic name can read it, so keep it long and random; answers are signed, so nobody else can send them.</p>
+      </section>
+      <section class="ph-sec">
+        <h4>Telegram <span class="muted xs">· buttons, or reply to a message in your own words</span>${status(r.status.telegram)}<button class="switch" data-sw="telegram" role="switch" aria-checked="${tg.enabled}"></button></h4>
+        <div class="settings-modal">
+          <label><span>Bot token</span><input class="input mono" data-tg="token" value="${esc(tg.token)}" placeholder="123456:ABC… from @BotFather" spellcheck="false" type="password"></label>
+        </div>
+        <p class="hint">${
+          tg.linked
+            ? `${icon('check')} Linked to <b>${esc(tg.chatName || 'your chat')}</b>. <button class="link xs" data-act="unlink">Unlink</button>`
+            : tg.token && tg.enabled
+              ? `Now send <code>/link ${esc(tg.linkCode)}</code> to your bot. Only the chat that sends this code gets linked.`
+              : 'Create a bot with @BotFather, paste its token here and switch Telegram on.'
+        }</p>
+        ${
+          tg.linked
+            ? `<div class="ph-start">
+          <div class="ph-row"><span class="grow">Start tasks from Telegram</span><button class="switch" data-sw="tgStart" role="switch" aria-checked="${tg.allowStart}"></button></div>
+          ${
+            tg.allowStart
+              ? `<div class="settings-modal"><label><span>Default project</span><select class="input" data-tg="project">
+              <option value="">Last used${lastUsed ? ` (${esc(lastUsed.name)})` : ''}</option>
+              ${projects.map((p) => `<option value="${esc(p.id)}" ${p.id === tg.project ? 'selected' : ''}>${esc(p.name)}${p.machine ? ` · ${esc(placeName(p.machine))}` : ''}</option>`).join('')}
+            </select></label></div>
+          <p class="hint">Send <code>/new fix the flaky login test</code> to start a task in the default project, or <code>/new @${esc(projects[0]?.name || 'project')} …</code> to pick one; <code>/projects</code> lists them. Tasks use the launcher's harness, model and mode. Only your linked chat can start them.</p>`
+              : '<p class="hint">Off: the bot only answers and follows up on tasks you started here.</p>'
+          }
+        </div>`
+            : ''
+        }
+      </section>
+      <div class="ship-foot"><span class="grow"></span><button class="ghost sm" data-act="test">${icon('send')}Send a test</button></div>`;
+  };
+  node.addEventListener('change', (e) => {
+    const t = e.target;
+    if (t.dataset.ev) put({ events: $$('[data-ev]', node).filter((x) => x.checked).map((x) => x.dataset.ev) });
+    if (t.dataset.ntfy) put({ ntfy: { ...r.ntfy, [t.dataset.ntfy]: t.value.trim() } });
+    if (t.dataset.tg === 'token') put({ telegram: { enabled: r.telegram.enabled, token: t.value.trim() } });
+    if (t.dataset.tg === 'project') put({ telegram: { project: t.value } });
+  });
+  node.addEventListener('click', async (e) => {
+    const sw = e.target.closest('[data-sw]')?.dataset.sw;
+    if (sw === 'ntfy') {
+      // A fresh random topic the first time, so it isn't guessable.
+      const topic = r.ntfy.topic || `wisp-${crypto.getRandomValues(new Uint32Array(2)).join('').slice(0, 14)}`;
+      return put({ ntfy: { ...r.ntfy, enabled: !r.ntfy.enabled, topic } });
+    }
+    if (sw === 'telegram') return put({ telegram: { enabled: !r.telegram.enabled, token: r.telegram.token } });
+    if (sw === 'tgStart') return put({ telegram: { allowStart: !r.telegram.allowStart } });
+    const act = e.target.closest('[data-act]')?.dataset.act;
+    if (act === 'unlink') return put({ telegram: { enabled: r.telegram.enabled, token: r.telegram.token, unlink: true } });
+    if (act === 'test') {
+      try {
+        r = await api('/remote/test', { method: 'POST', body: {} });
+        paint();
+        toast('Test sent');
+      } catch (err) {
+        toastError(err);
+      }
+    }
+  });
+  bus.on(
+    'remote',
+    async () => {
+      if (node.contains(document.activeElement) && document.activeElement.matches('input')) return; // don't clobber typing
+      r = await api('/remote').catch(() => r);
+      if (r && node.isConnected) paint();
+    },
+    { node },
+  );
+  r = await api('/remote').catch((err) => (toastError(err), null));
+  if (r) paint();
+}

package/web/js/features/places.js

@@ -0,0 +1,38 @@
+// Projects and machines: the places a task can run. A project is a folder, on this computer or on a
+// machine (another computer running its own wisp, reached over SSH).
+
+import { esc } from '../md.js';
+import { icon } from '../core/dom.js';
+import { S } from '../core/state.js';
+
+export const projectById = (id) => S.config.projects.find((p) => p.id === id);
+
+export const placeOf = (p) => p?.machine || '';
+export const placeName = (k) => (k ? machineById(k)?.name || 'machine' : 'This computer');
+export const recentFirst = (a, b) => (b.lastUsedAt || b.addedAt) - (a.lastUsedAt || a.addedAt);
+export const projectsAt = (k) => S.config.projects.filter((p) => placeOf(p) === k).sort(recentFirst);
+
+// A machine runs its own wisp; this one signs in over SSH, tunnels to it and shows its sessions
+// as <id>@<machine>. Projects can live on a machine; launching in one runs the agent there.
+export const machineById = (id) => S.machines.find((m) => m.id === id);
+const machineOnline = (id) => machineById(id)?.state === 'online';
+export const MACHINE_STATE = { online: 'Online', connecting: 'Connecting…', reconnecting: 'Reconnecting…', error: 'Couldn’t connect', off: 'Not connected' };
+export const projectTitle = (p) => {
+  if (!p) return '';
+  const m = p.machine && machineById(p.machine);
+  return m ? `${p.path} on ${m.name}${m.state === 'online' ? '' : ' (not connected)'}` : p.path;
+};
+
+export function machinePill(mt) {
+  const on = machineOnline(mt.id);
+  return `<span class="q-machine ${on ? '' : 'off'}" title="Runs on ${esc(mt.name)} (${esc(mt.target)})${on ? '' : ' · not connected'}">${icon('server')}<span>${esc(mt.name)}</span></span>`;
+}
+
+export function machinesSummary() {
+  const n = S.machines.length;
+  if (!n) return 'None yet · run agents on another computer over SSH';
+  const on = S.machines.filter((m) => m.state === 'online').length;
+  return `${n} machine${n === 1 ? '' : 's'} · ${on ? `${on} online` : 'none online'}`;
+}
+
+export const projectName = (p) => S.config.projects.find((x) => x.path === p)?.name || String(p || '').split(/[\\/]/).pop();

package/web/js/features/projects.js

@@ -0,0 +1,284 @@
+// Projects: the filter chips in the top bar and the dialog that adds, renames and removes them.
+
+import { esc } from '../md.js';
+import { api } from '../core/api.js';
+import * as bus from '../core/bus.js';
+import { $, $$, el, icon } from '../core/dom.js';
+import { launch, S, save, saveLaunch } from '../core/state.js';
+import { present } from '../ui/overlay.js';
+import { popover } from '../ui/popover.js';
+import { toast, toastError, tryApi } from '../ui/toast.js';
+import { feedToTop, renderFeed } from './feed.js';
+import { renderLaunchChips } from './launcher.js';
+import { loadConfig } from './live.js';
+import { connectMachine, openMachines } from './machines.js';
+import { MACHINE_STATE, machineById, placeOf, projectById, projectTitle } from './places.js';
+
+export function renderProjects() {
+  const all = [...S.sessions.values()];
+  const stats = (pid) => {
+    const l = pid === 'all' ? all : all.filter((s) => s.projectId === pid);
+    return { run: l.filter((s) => s.state === 'running').length, need: l.filter((s) => s.state === 'waiting' || (s.state === 'review' && s.unread)).length };
+  };
+  const chip = (id, name, color) => {
+    const st = stats(id);
+    return `<button class="p-chip ${S.filter === id ? 'on' : ''} c-${color}" data-id="${id}" title="${esc(id === 'all' ? 'All projects' : projectTitle(projectById(id)))}">
+      ${id === 'all' ? '' : '<i class="p-dot"></i>'}<span>${esc(name)}</span>${projectById(id)?.machine ? icon('server', 'p-where') : ''}${st.run ? `<span class="p-run" title="${st.run} working"></span>` : ''}${st.need ? `<span class="p-need">${st.need}</span>` : ''}
+    </button>`;
+  };
+  $('#projects').innerHTML = `${chip('all', 'All', 'slate')}${S.config.projects
+    .slice()
+    .sort((a, b) => (b.lastUsedAt || b.addedAt) - (a.lastUsedAt || a.addedAt))
+    .map((p) => chip(p.id, p.name, p.color))
+    .join('')}<button class="p-chip add" id="manageProjects" title="Manage projects">${icon('plus')}</button>`;
+  $$('.p-chip[data-id]').forEach((b) =>
+    b.addEventListener('click', () => {
+      S.filter = S.filter === b.dataset.id ? 'all' : b.dataset.id;
+      save('wisp.filter', S.filter);
+      renderFeed();
+      feedToTop();
+      renderLaunchChips();
+    }),
+  );
+  $$('.p-chip[data-id]:not([data-id="all"])').forEach((b) =>
+    b.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      projectMenu(b.dataset.id, e);
+    }),
+  );
+  $('#manageProjects').onclick = () => openProjects();
+}
+
+function projectMenu(id, e) {
+  const p = projectById(id);
+  if (!p) return;
+  $('.menu.project')?.close();
+  const menu = el(`
+    <div class="menu project" style="top:${e.clientY}px;left:${e.clientX}px">
+      <button data-a="manage">${icon('pen')}Manage projects…</button>
+      <button data-a="delete" class="danger">${icon('trash')}Remove project</button>
+    </div>`);
+  menu.onclick = async (ev) => {
+    const a = ev.target.closest('button')?.dataset.a;
+    close();
+    if (a === 'manage') openProjects();
+    if (a === 'delete' && confirm(`Remove “${p.name}” from wisp? Sessions and files are kept.`)) {
+      try {
+        await api(`/projects/${id}`, { method: 'DELETE' });
+      } catch (err) {
+        return toastError(err);
+      }
+      if (S.filter === id) {
+        S.filter = 'all';
+        save('wisp.filter', S.filter);
+      }
+      await loadConfig();
+      renderFeed();
+    }
+  };
+  const close = popover(menu);
+  // Keep the menu on-screen when right-clicking near the window edge.
+  const r = menu.getBoundingClientRect();
+  if (r.right > innerWidth - 8) menu.style.left = `${innerWidth - r.width - 8}px`;
+  if (r.bottom > innerHeight - 8) menu.style.top = `${innerHeight - r.height - 8}px`;
+}
+
+const COLORS = ['violet', 'teal', 'amber', 'rose', 'sky', 'lime', 'orange', 'indigo'];
+
+// where: a machine id to add folders on that computer (server/machines.js), else this one.
+export async function openProjects({ focusAdd = false, machine = null, host } = {}) {
+  const node = el(`
+    <div class="modal projects-modal">
+      <header><h2>Projects</h2><button class="icon-btn close">${icon('x')}</button></header>
+      <div class="mem-tabs where"></div>
+      <div class="add-row">
+        <div class="field lg mono path-input">
+          ${window.wispDesktop ? `<button class="browse" title="Browse…">${icon('folder')}</button>` : icon('folder')}
+          <input id="ppath" placeholder="~/code/my-app" spellcheck="false" autocomplete="off">
+          <div class="suggest" hidden></div>
+        </div>
+        ${window.wispDesktop ? `<button class="ghost" id="pbrowse">${icon('folder')}Browse…</button>` : ''}
+        <button class="primary" id="padd">Add</button>
+      </div>
+      <p class="hint"></p>
+      <div class="plist" id="plist"></div>
+      <div class="discover" id="discover"><h4>Found on this machine</h4><p class="muted">Looking for git repos…</p></div>
+    </div>`);
+  present(node, host);
+  const input = $('#ppath', node);
+  const sug = $('.suggest', node);
+  let where = machine && machineById(machine) ? machine : null;
+  const here = () => machineById(where);
+  const home = () => (where ? here()?.remote?.home : S.config.home) || '';
+  const tilde = (p) => (home() && p.startsWith(home()) ? `~${p.slice(home().length)}` : p);
+
+  const paintWhere = () => {
+    const tabs = $('.where', node);
+    tabs.innerHTML = `<button data-w="" class="${where ? '' : 'on'}">${icon('folder')}This computer</button>${S.machines
+      .map((m) => `<button data-w="${m.id}" class="${where === m.id ? 'on' : ''}" title="${esc(m.target)} · ${esc(MACHINE_STATE[m.state] || m.state)}">${icon('server')}${esc(m.name)}<i class="dot ${m.state === 'online' ? 'ok' : m.state === 'error' ? 'bad' : ''}"></i></button>`)
+      .join('')}<i></i>${host ? '' : `<button data-w="+" title="Run agents on another computer over SSH">${icon('plus')}Machine</button>`}`;
+    const m = here();
+    input.placeholder = m ? `~/code/my-app on ${m.name}` : '~/code/my-app';
+    $$('#pbrowse, .browse', node).forEach((b) => (b.hidden = !!m));
+    $('.hint', node).innerHTML = m
+      ? `Folders on <b>${esc(m.name)}</b>. Agents run there, in its own worktrees; you follow along here.`
+      : 'Tip: run <code>wisp add</code> inside any folder, or launch from a terminal with <code>wisp "task"</code> — the folder is added automatically.';
+  };
+  $('.where', node).addEventListener('click', (e) => {
+    const b = e.target.closest('[data-w]');
+    if (!b) return;
+    if (b.dataset.w === '+') {
+      openMachines({ focusAdd: true });
+      return;
+    }
+    where = b.dataset.w || null;
+    sug.hidden = true;
+    paintWhere();
+    list();
+    discover();
+    input.focus();
+  });
+
+  const add = async (p) => {
+    try {
+      const proj = await api('/projects', { method: 'POST', body: { path: p, ...(where && { machine: where }) } });
+      await loadConfig();
+      launch.picks[placeOf(proj)] = proj.id;
+      if (!launch.where.includes(placeOf(proj))) launch.where = [placeOf(proj)];
+      if (placeOf(proj) === launch.where[0]) launch.project = proj.id;
+      saveLaunch();
+      renderLaunchChips();
+      toast(`Added <b>${esc(proj.name)}</b>${where ? ` on ${esc(here()?.name || '')}` : ''}`);
+      input.value = '';
+      sug.hidden = true;
+      list();
+      discover();
+    } catch (err) {
+      toastError(err);
+    }
+  };
+  $('#padd', node).onclick = () => {
+    if (input.value.trim()) add(input.value.trim());
+  };
+  const browse = async () => {
+    const dir = await window.wispDesktop.pickFolder();
+    if (dir) add(dir);
+  };
+  $$('#pbrowse, .browse', node).forEach((b) => (b.onclick = browse));
+
+  let sel = -1;
+  let t;
+  input.addEventListener('input', () => {
+    clearTimeout(t);
+    t = setTimeout(async () => {
+      const q = input.value;
+      if (!q) return (sug.hidden = true);
+      const dirs = await api(`${where ? `/machines/${where}/fs` : '/fs'}?q=${encodeURIComponent(q)}`).catch(() => []);
+      sel = -1;
+      sug.hidden = !dirs.length;
+      sug.innerHTML = dirs.map((d) => `<button data-p="${esc(d)}">${esc(tilde(d))}</button>`).join('');
+    }, 120);
+  });
+  input.addEventListener('keydown', (e) => {
+    const opts = $$('button', sug);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      sel = (sel + (e.key === 'ArrowDown' ? 1 : -1) + opts.length) % opts.length;
+      opts.forEach((o, i) => o.classList.toggle('on', i === sel));
+    } else if (e.key === 'Tab' && opts.length) {
+      e.preventDefault();
+      input.value = tilde(opts[Math.max(0, sel)].dataset.p + '/');
+      input.dispatchEvent(new Event('input'));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      add(sel >= 0 ? opts[sel].dataset.p : input.value.trim());
+    }
+  });
+  sug.addEventListener('click', (e) => {
+    const b = e.target.closest('button');
+    if (b) add(b.dataset.p);
+  });
+
+  const list = () => {
+    const box = $('#plist', node);
+    const projects = S.config.projects.filter((p) => (p.machine || null) === where);
+    box.innerHTML = projects.length
+      ? projects
+          .map((p) => {
+            const n = [...S.sessions.values()].filter((s) => s.projectId === p.id).length;
+            return `<div class="prow c-${p.color}" data-id="${p.id}">
+              <button class="swatch" title="Change colour"><i class="p-dot"></i></button>
+              <div class="prow-main"><input class="pname" value="${esc(p.name)}"><span class="ppath">${esc(tilde(p.path))}</span></div>
+              <span class="pcount">${n} session${n === 1 ? '' : 's'}</span>
+              <button class="icon-btn premove" title="Remove from wisp (files untouched)">${icon('trash')}</button>
+            </div>`;
+          })
+          .join('')
+      : `<p class="muted">No projects ${where ? `on ${esc(here()?.name || '')} ` : ''}yet. Add a folder above, or pick one below.</p>`;
+    $$('.prow', box).forEach((row) => {
+      const id = row.dataset.id;
+      const p = projectById(id);
+      $('.pname', row).onchange = (e) => {
+        tryApi(async () => {
+          await api(`/projects/${id}`, { method: 'PATCH', body: { name: e.target.value } });
+          await loadConfig();
+        });
+      };
+      $('.swatch', row).onclick = () => {
+        const color = COLORS[(COLORS.indexOf(p.color) + 1) % COLORS.length];
+        tryApi(async () => {
+          await api(`/projects/${id}`, { method: 'PATCH', body: { color } });
+          await loadConfig();
+          list();
+        });
+      };
+      $('.premove', row).onclick = async () => {
+        if (!confirm(`Remove “${p.name}” from wisp? Sessions and files are kept.`)) return;
+        await tryApi(async () => {
+          await api(`/projects/${id}`, { method: 'DELETE' });
+          await loadConfig();
+          list();
+        });
+      };
+    });
+  };
+
+  const discover = async () => {
+    const box = $('#discover', node);
+    const m = here();
+    const at = where;
+    box.onclick = (e) => {
+      const b = e.target.closest('.found-item');
+      if (b) add(b.dataset.p);
+      if (e.target.closest('[data-a="connect"]')) connectMachine(at);
+    };
+    if (m && m.state !== 'online') {
+      box.innerHTML = `<p class="muted">${esc(m.name)} is ${m.state === 'connecting' || m.state === 'reconnecting' ? 'connecting…' : `offline. <button class="link" data-a="connect">Connect</button>`}</p>`;
+      return;
+    }
+    box.innerHTML = `<h4>Found on ${m ? esc(m.name) : 'this machine'}</h4><p class="muted">Looking for git repos…</p>`;
+    const found = await api(m ? `/machines/${m.id}/discover` : '/projects/discover').catch(() => []);
+    if (where !== at) return; // switched tabs meanwhile
+    box.innerHTML = found.length
+      ? `<h4>Found on ${m ? esc(m.name) : 'this machine'} <span class="muted">· git repos</span></h4><div class="found">${found
+          .map((f) => `<button class="found-item" data-p="${esc(f.path)}">${icon('plus')}<b>${esc(f.name)}</b><span>${esc(tilde(f.path).replace(/\/[^/]+$/, ''))}</span></button>`)
+          .join('')}</div>`
+      : '';
+  };
+  let wasOnline = here()?.state === 'online';
+  bus.on(
+    'machines',
+    () => {
+      paintWhere();
+      const online = here()?.state === 'online';
+      if (online !== wasOnline) discover();
+      wasOnline = online;
+    },
+    { node },
+  );
+
+  paintWhere();
+  list();
+  discover();
+  if (focusAdd) setTimeout(() => input.focus(), 60);
+}