wisp-agents 0.15.0 → 0.16.0

package/server/services/ship.js

@@ -0,0 +1,82 @@
+// Ship it: whether a worktree session has something to ship, the draft commit message and PR
+// text, and following open PRs (checks, reviews, merges) so their cards stay current.
+
+import fs from 'node:fs';
+import { worktreeStatus, prView } from '../git.js';
+import { blocksToMarkdown } from '../render.js';
+import { summarize } from '../runner.js';
+
+const PR_POLL_MS = 60_000;
+const SHIP_RECHECK_MS = 5_000;
+
+export function createShip(app) {
+  const { store, runner } = app;
+
+  // Ship it shows only when the worktree has something to ship: uncommitted changes, or commits
+  // not yet pushed. Rechecked whenever wisp might have changed the worktree.
+  const check = async (s) => {
+    if (!s?.worktree || s.parentId) return;
+    const { dirty, ahead, unpushed } = await worktreeStatus(s.worktree);
+    const next = { dirty, ahead, unpushed };
+    if (JSON.stringify(next) === JSON.stringify(s.toShip)) return;
+    s.toShip = next;
+    app.sessionChanged(s);
+  };
+  // One check at a time per session (one asked for meanwhile runs right after); `lazy` (a card
+  // fetching its session) skips running sessions and runs at most every few seconds.
+  const checks = new Map(); // id → true while checking, 'again' if another check is due
+  const checkedAt = new Map();
+  const recheck = (s, { lazy = false } = {}) => {
+    if (!s?.worktree || s.parentId) return;
+    if (lazy && (runner.live.has(s.id) || checks.has(s.id) || Date.now() - (checkedAt.get(s.id) || 0) < SHIP_RECHECK_MS)) return;
+    if (checks.has(s.id)) return void checks.set(s.id, 'again');
+    checks.set(s.id, true);
+    checkedAt.set(s.id, Date.now());
+    check(s)
+      .catch(() => {})
+      .finally(() => {
+        const again = checks.get(s.id) === 'again';
+        checks.delete(s.id);
+        if (again) recheck(s);
+      });
+  };
+
+  const refreshPr = async (s) => {
+    if (!s.pr || !s.worktree) return s.pr;
+    const prev = s.pr;
+    const dir = fs.existsSync(s.worktree.path) ? s.worktree.path : s.worktree.root;
+    const pr = await prView(dir, prev.number);
+    const changed = (k) => JSON.stringify(k(pr)) !== JSON.stringify(k(prev));
+    s.pr = pr;
+    if (pr.state !== prev.state) app.auto.signals(summarize(s, store));
+    // Things worth coming back for: CI finished either way, a review landed, it merged or closed.
+    const settledChecks = (x) => (x.checks.pending ? 'pending' : x.checks.fail ? 'fail' : 'pass');
+    if (changed((x) => x.state) || changed((x) => x.review) || (changed(settledChecks) && settledChecks(pr) !== 'pending')) s.unread = true;
+    app.sessionChanged(s);
+    return pr;
+  };
+
+  // Default commit message and PR text, from the session's latest presentation.
+  const draft = (s) => {
+    const turn = s.turns.findLast((t) => t.status === 'done') || s.turns.at(-1);
+    const blocks = turn?.presentation?.blocks || [];
+    const hero = blocks.find((b) => b?.type === 'hero');
+    const text = `${hero?.title || s.title}`.trim();
+    const conventional = /^[a-z]+(\([\w./-]+\))?!?: /.test(text);
+    const type = /\b(fix|bug|broken|crash|flaky|regression)/i.test(`${text} ${s.turns[0]?.prompt || ''}`) ? 'fix' : /\b(docs?|readme|changelog)\b/i.test(text) ? 'docs' : /\b(refactor|clean ?up|simplif)/i.test(text) ? 'refactor' : /\btests?\b/i.test(text) ? 'test' : 'feat';
+    const title = conventional ? text : `${type}: ${text.charAt(0).toLowerCase()}${text.slice(1)}`;
+    const keep = blocks.filter((b) => !['hero', 'next', 'question', 'diff', 'code', 'image', 'terminal'].includes(b?.type));
+    const body = [hero?.summary, blocksToMarkdown(keep, turn)].filter(Boolean).join('\n\n').trim();
+    return { title: title.slice(0, 100), body: `${body}\n\n_Shipped from [wisp](https://github.com/M0xoo/wisp)._`.trim() };
+  };
+
+  runner.on('ended', ({ session }) => recheck(store.get(session.id)));
+  for (const s of store.all()) if (s.worktree && !s.archived && s.pr?.state !== 'MERGED') recheck(s);
+
+  const timer = setInterval(async () => {
+    for (const s of store.all()) if (s.pr?.state === 'OPEN') await refreshPr(s).catch(() => {});
+  }, PR_POLL_MS);
+  timer.unref();
+
+  return { recheck, refreshPr, draft, stop: () => clearInterval(timer) };
+}

package/server/services/telemetry.js

@@ -0,0 +1,34 @@
+// What the runner, the router and the retro report to telemetry: fixed values about how a turn
+// ran and ended, never the prompt or the result.
+
+import { envDisabled } from '../telemetry.js';
+
+export const runProps = (s, t) => ({ agent: s.agent, model: s.model || 'default', mode: s.mode, effort: s.effort || 'default', followUp: s.turns.indexOf(t) > 0 });
+
+// Auto's choice, as fixed values only: never the prompt.
+const routeProps = (s) =>
+  s.route ? { routed: true, routeGoal: s.route.goal, routeType: s.route.type, routeSize: s.route.size, routeExplored: !!s.route.explored, routeTrying: !!s.route.trying, routePropensity: s.route.propensity } : {};
+
+export function trackTurns({ runner, telemetry }) {
+  runner.on('started', ({ session, turn }) => telemetry.track('turn_started', { ...runProps(session, turn), attachments: turn.attachments.length }));
+  runner.on('ended', ({ session, turn, interrupted, errorText }) => {
+    const blocks = turn.presentation?.blocks || [];
+    const st = turn.stats || {};
+    telemetry.track('turn_ended', {
+      ...runProps(session, turn),
+      ...routeProps(session),
+      status: interrupted ? 'interrupted' : turn.status, // done | error | stopped | interrupted
+      heroStatus: blocks.find((b) => b.type === 'hero')?.status,
+      durationMs: turn.endedAt - turn.startedAt,
+      blockCount: blocks.length,
+      blockTypes: [...new Set(blocks.map((b) => b.type))],
+      presentationFallback: !!turn.presentation?.fallback, // agent ignored or broke the wisp protocol
+      changedFiles: turn.changes.length,
+      inputTokens: st.inputTokens,
+      outputTokens: st.outputTokens,
+      costUsd: st.costUsd,
+    });
+    if (errorText) telemetry.captureError(new Error(errorText), { type: 'AgentError', ...runProps(session, turn) });
+  });
+  if (!envDisabled()) process.on('uncaughtExceptionMonitor', (err) => telemetry.crashed(err));
+}

package/server/services/uploads.js

@@ -0,0 +1,59 @@
+// Attachments: raw bodies streamed to disk, referenced by id from launches and replies.
+// Each upload is <id>-<name> next to an <id>.json with its metadata.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { MIME } from '../http/static.js';
+import { bad, newId } from '../util.js';
+
+export const MAX_UPLOAD = 500 * 1024 * 1024;
+
+export class Uploads {
+  constructor(dir) {
+    this.dir = dir;
+    this.byId = new Map(); // id -> { id, name, mime, size, path }
+    fs.mkdirSync(dir, { recursive: true });
+    for (const f of fs.readdirSync(dir)) {
+      if (!f.endsWith('.json')) continue;
+      try {
+        const u = JSON.parse(fs.readFileSync(path.join(dir, f), 'utf8'));
+        this.byId.set(u.id, u);
+      } catch {}
+    }
+  }
+
+  get(id) {
+    return this.byId.get(id);
+  }
+
+  // Upload ids from a request body → their records (unknown ids are dropped).
+  resolve(ids) {
+    return Array.isArray(ids) ? ids.map((i) => this.byId.get(i)).filter(Boolean) : [];
+  }
+
+  async receive(req, { name, type }) {
+    name = path.basename(name || 'file').replace(/[^\w.\- ]+/g, '_').slice(-120) || 'file';
+    const id = newId();
+    const file = path.join(this.dir, `${id}-${name}`);
+    let size = 0;
+    await new Promise((resolve, reject) => {
+      const out = fs.createWriteStream(file);
+      req.on('data', (c) => {
+        size += c.length;
+        if (size > MAX_UPLOAD) {
+          req.destroy();
+          out.destroy();
+          fs.rmSync(file, { force: true });
+          reject(bad('file too large (500 MB max)', 413));
+        }
+      });
+      req.pipe(out);
+      out.on('finish', resolve);
+      out.on('error', reject);
+    });
+    const meta = { id, name, size, mime: type || MIME[path.extname(name).toLowerCase()] || 'application/octet-stream', path: file };
+    this.byId.set(id, meta);
+    fs.writeFileSync(path.join(this.dir, `${id}.json`), JSON.stringify(meta));
+    return meta;
+  }
+}

package/server/services/webhooks.js

@@ -0,0 +1,28 @@
+// POST { event, session, markdown } to each configured webhook (Slack bridges, CI, notifiers).
+// event: session.waiting (blocked on ask_user) | session.finished. Fire and forget.
+
+import { sessionToMarkdown } from '../render.js';
+import { VERSION } from '../util.js';
+
+export function notifyWebhooks(store, summary) {
+  const hooks = store.config.webhooks || [];
+  if (!hooks.length) return;
+  const s = store.get(summary.id);
+  if (!s) return;
+  const event = s.state === 'waiting' ? 'session.waiting' : 'session.finished';
+  const body = JSON.stringify({ event, session: summary, markdown: sessionToMarkdown(s), at: Date.now() });
+  for (const h of hooks) {
+    if (h.events?.length && !h.events.includes(event)) continue;
+    fetch(h.url, { method: 'POST', headers: { 'content-type': 'application/json', 'user-agent': `wisp/${VERSION}` }, body, signal: AbortSignal.timeout(10_000) }).catch((err) =>
+      console.warn(`wisp: webhook ${h.url} failed: ${err.message}`),
+    );
+  }
+}
+
+// A webhook entry from the config API: a URL string or { url, events }.
+export function normalizeWebhooks(list) {
+  const hooks = Array.isArray(list) ? list : [];
+  const wrong = hooks.find((h) => !/^https?:\/\/\S+$/.test(String(h?.url ?? h)));
+  if (wrong !== undefined) return { error: `Not an http(s) URL: ${wrong?.url ?? wrong}` };
+  return { hooks: hooks.map((h) => (typeof h === 'string' ? { url: h } : { url: h.url, events: Array.isArray(h.events) ? h.events : undefined })) };
+}

package/server/store.js

@@ -5,6 +5,7 @@ import path from 'node:path';
 import os from 'node:os';
 import { randomUUID } from 'node:crypto';
 import { parsePresentation } from './protocol.js';
+import { writeJsonAtomic } from './util.js';
 
 const DEFAULT_CONFIG = {
   projects: [], // [{ id, name, path, color, addedAt, machine? }]; machine: the server/machines.js id it lives on
@@ -72,7 +73,9 @@ export class Store {
   }
 
   saveConfig() {
-    fs.writeFileSync(path.join(this.home, 'config.json'), JSON.stringify(this.config, null, 2));
+    // Atomic: a crash mid-write used to leave a cut-off config.json, which loads as the defaults
+    // (no projects, recipes, triggers or machines) and is then saved over.
+    writeJsonAtomic(path.join(this.home, 'config.json'), this.config, 2);
   }
 
   // --- projects: plain folders, matched to sessions by path prefix ---
@@ -130,8 +133,7 @@ export class Store {
       this.timers.delete(session.id);
       if (!this.sessions.has(session.id)) return;
       const file = path.join(this.dir, `${session.id}.json`);
-      fs.writeFileSync(`${file}.tmp`, JSON.stringify(session));
-      fs.renameSync(`${file}.tmp`, file);
+      writeJsonAtomic(file, session);
     };
     if (now) write();
     else this.timers.set(session.id, setTimeout(write, 400));

package/server/subagents.js

@@ -3,6 +3,7 @@
 // hidden child session working in the lead's folder; delegating to it again resumes it.
 
 import { blocksToMarkdown } from './render.js';
+import { bad } from './util.js';
 
 export const MAX_SUBAGENTS = 6; // rows in the team
 export const MAX_COPIES = 5; // parallel copies of one row
@@ -20,7 +21,7 @@ export function normalizeTeam(list, adapters) {
   const team = list.slice(0, MAX_SUBAGENTS).map((m) => {
     const agent = String(m?.agent || '');
     // auto: wisp picks the harness and model when this member gets its first task.
-    if ((!adapters[agent] && agent !== 'auto') || agent === 'wisp') throw Object.assign(new Error(`unknown subagent harness: ${agent}`), { status: 400 });
+    if ((!adapters[agent] && agent !== 'auto') || agent === 'wisp') throw bad(`unknown subagent harness: ${agent}`);
     let base = slug(m.name) || agent;
     let name = base;
     for (let i = 2; taken.has(name); i++) name = `${base}-${i}`;
@@ -30,7 +31,7 @@ export function normalizeTeam(list, adapters) {
     return { name, agent, model: typeof m.model === 'string' ? m.model.slice(0, 120) : '', effort: EFFORT.test(m.effort || '') ? m.effort : '', use, count };
   });
   const total = team.reduce((n, m) => n + m.count, 0);
-  if (total > MAX_INSTANCES) throw Object.assign(new Error(`At most ${MAX_INSTANCES} subagents in all (this team has ${total}).`), { status: 400 });
+  if (total > MAX_INSTANCES) throw bad(`At most ${MAX_INSTANCES} subagents in all (this team has ${total}).`);
   return team;
 }
 
@@ -40,9 +41,9 @@ export const copies = (m) => ((m.count || 1) > 1 ? Array.from({ length: m.count
 // Saved teams the user can reuse from the launcher: { id, name, members }.
 export function normalizePreset(body, adapters, prev = {}) {
   const name = String(body?.name ?? prev.name ?? '').trim().slice(0, 60);
-  if (!name) throw Object.assign(new Error('A preset needs a name.'), { status: 400 });
+  if (!name) throw bad('A preset needs a name.');
   const members = body?.members !== undefined ? normalizeTeam(body.members, adapters) : prev.members || [];
-  if (!members.length) throw Object.assign(new Error('A preset needs at least one subagent.'), { status: 400 });
+  if (!members.length) throw bad('A preset needs at least one subagent.');
   return { id: prev.id || slug(name) + '-' + Math.random().toString(36).slice(2, 6), name, members, updatedAt: Date.now() };
 }
 

package/server/telemetry.js

@@ -15,6 +15,7 @@ import os from 'node:os';
 import path from 'node:path';
 import { randomUUID } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
+import { VERSION } from './util.js';
 
 // PostHog project API key: write-only, safe to ship in the client.
 const KEY = process.env.WISP_POSTHOG_KEY ?? 'phc_wowwZkbP8e4zYuwT67JtX6oxdPwkMWL5kKnrUmYYXhcD';
@@ -23,7 +24,6 @@ const FLUSH_MS = 15_000;
 const MAX_QUEUE = 50;
 const TIMEOUT_MS = 3000;
 
-const VERSION = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf8')).version;
 const truthy = (v) => !!v && !/^(0|false|no|off)$/i.test(v);
 
 const falsy = (v) => /^(0|false|no|off)$/i.test(v || '');

package/server/terminal.js

@@ -6,6 +6,7 @@
 import { spawn } from 'node:child_process';
 import fs from 'node:fs';
 import { escapeCmdArgument, escapeCmdCommand, onPath } from './proc.js';
+import { shq } from './util.js';
 
 // os: which platforms list the entry (all if omitted).
 const ALL_TERMINALS = [
@@ -31,7 +32,7 @@ const ALL_TERMINALS = [
 export const terminalsFor = (platform = process.platform) => ALL_TERMINALS.filter((t) => !t.os || t.os.includes(platform === 'darwin' || platform === 'win32' ? platform : 'linux')).map(({ id, label }) => ({ id, label }));
 export const TERMINALS = terminalsFor();
 
-export const shq = (s) => `'${String(s).replace(/'/g, `'\\''`)}'`;
+export { shq };
 const psq = (s) => `'${String(s).replace(/'/g, "''")}'`; // PowerShell single-quoted string
 const asStr = (s) => `"${s.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`; // AppleScript string
 

package/server/triggers.js

@@ -7,12 +7,11 @@
 
 import fs from 'node:fs';
 import path from 'node:path';
-import { newId } from './runner.js';
+import { bad, MODES, newId } from './util.js';
 import { gh as ghCli } from './git.js';
 import { fill, findRecipe } from './recipes.js';
 
 const KINDS = new Set(['schedule', 'ci', 'issues']);
-const MODES = new Set(['plan', 'edits', 'auto']);
 const TICK_MS = 20_000;
 const MAX_SEEN = 200;
 const MAX_PER_POLL = 3; // a burst of failures shouldn't start a dozen agents
@@ -37,20 +36,20 @@ const ALIASES = { '@hourly': '0 * * * *', '@daily': '0 0 * * *', '@weekly': '0 0
 export function parseCron(expr) {
   const src = ALIASES[String(expr || '').trim()] || String(expr || '').trim();
   const parts = src.split(/\s+/);
-  if (parts.length !== 5) throw Object.assign(new Error('A schedule needs 5 fields: minute hour day-of-month month day-of-week'), { status: 400 });
+  if (parts.length !== 5) throw bad('A schedule needs 5 fields: minute hour day-of-month month day-of-week');
   const out = {};
   parts.forEach((part, i) => {
     const [name, lo, hi] = FIELDS[i];
     const set = new Set();
     for (const piece of part.split(',')) {
       const m = piece.match(/^(\*|(\d+)(?:-(\d+))?)(?:\/(\d+))?$/);
-      if (!m) throw Object.assign(new Error(`Bad ${name} field: ${piece}`), { status: 400 });
+      if (!m) throw bad(`Bad ${name} field: ${piece}`);
       let a = m[1] === '*' ? lo : Number(m[2]);
       let b = m[1] === '*' ? hi : m[3] !== undefined ? Number(m[3]) : m[4] ? hi : a;
       const step = m[4] ? Number(m[4]) : 1;
       if (name === 'dow' && b === 7) b = 6, set.add(0); // 7 is Sunday too
       if (name === 'dow' && a === 7) a = 0;
-      if (a < lo || b > hi || a > b || step < 1) throw Object.assign(new Error(`Bad ${name} field: ${piece}`), { status: 400 });
+      if (a < lo || b > hi || a > b || step < 1) throw bad(`Bad ${name} field: ${piece}`);
       for (let v = a; v <= b; v += step) set.add(v);
     }
     out[name] = set;
@@ -86,7 +85,6 @@ export function nextRun(c, from = Date.now()) {
 
 // --- config ----------------------------------------------------------------------------------
 
-const bad = (msg) => Object.assign(new Error(msg), { status: 400 });
 
 export function normalizeTrigger(body, prev = null, { recipes = [] } = {}) {
   const v = (k, d = '') => (body[k] !== undefined ? body[k] : prev?.[k] !== undefined ? prev[k] : d);

package/server/update.js

@@ -9,6 +9,7 @@ import { spawn } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { bad } from './util.js';
 
 const ROOT = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
 const PKG = JSON.parse(fs.readFileSync(path.join(ROOT, 'package.json'), 'utf8'));
@@ -79,8 +80,8 @@ export class Updater {
   // Installs (global) then hands off to a detached helper that waits for this server's port to
   // free up and starts the new version. The caller shuts this process down.
   async install() {
-    if (this.method === 'git') throw Object.assign(new Error('This is a git checkout: run `git pull` to update.'), { status: 400 });
-    if (this.state.status === 'installing') throw Object.assign(new Error('Already updating.'), { status: 409 });
+    if (this.method === 'git') throw bad('This is a git checkout: run `git pull` to update.');
+    if (this.state.status === 'installing') throw bad('Already updating.', 409);
     this.set({ status: 'installing', error: null });
     try {
       if (this.method === 'global') await run(`npm install -g ${PKG.name}@latest`);
@@ -109,7 +110,7 @@ function run(cmd) {
     child.on('exit', (code) => {
       if (code === 0) return resolve();
       const hint = /EACCES|permission denied/i.test(err) ? ' (permission denied — run it yourself, maybe with sudo)' : '';
-      reject(Object.assign(new Error(`\`${cmd}\` failed${hint}: ${err.trim().split('\n').slice(-3).join(' ')}`), { status: 400 }));
+      reject(bad(`\`${cmd}\` failed${hint}: ${err.trim().split('\n').slice(-3).join(' ')}`));
     });
   });
 }

package/server/util.js

@@ -0,0 +1,42 @@
+// Small helpers shared across the server. Nothing here imports another wisp module, so any
+// file can use it without dragging in the runner, the store or an adapter.
+
+import { randomUUID } from 'node:crypto';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+export const VERSION = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf8')).version;
+export const DEFAULT_PORT = 4477;
+// The modes a session can run in: read-only planning, edits with approval rules, or full auto.
+export const MODES = new Set(['plan', 'edits', 'auto']);
+
+export const newId = () => randomUUID().replace(/-/g, '').slice(0, 12);
+
+// An error the HTTP layer answers with `status` (400 unless said otherwise) and its message.
+export const bad = (msg, status = 400) => Object.assign(new Error(msg), { status });
+
+// ~ and ~/x → the home folder. `expandHome` keeps the string as typed otherwise; `expand` also resolves it.
+export const expandHome = (p) => String(p).replace(/^~(?=$|[\\/])/, os.homedir());
+export const expand = (p) => path.resolve(expandHome(p));
+
+// wisp's own copies of harness CLIs, installed from the app when there's none (~/.wisp/tools).
+export const toolsDir = () => path.join(process.env.WISP_HOME || path.join(os.homedir(), '.wisp'), 'tools');
+
+// Single-quote for a POSIX shell.
+export const shq = (s) => `'${String(s).replace(/'/g, `'\\''`)}'`;
+
+// One line, at most n characters (whitespace collapsed).
+export function clip(s, n = 80) {
+  s = String(s ?? '').replace(/\s+/g, ' ').trim();
+  return s.length > n ? `${s.slice(0, n - 1)}…` : s;
+}
+
+// Write JSON so a crash mid-write never leaves a half file behind: tmp file, then rename.
+export function writeJsonAtomic(file, data, space) {
+  fs.writeFileSync(`${file}.tmp`, JSON.stringify(data, null, space));
+  fs.renameSync(`${file}.tmp`, file);
+}
+
+// At most n characters, line breaks kept (messages, not one-liners).
+export const truncate = (s, n) => (String(s || '').length > n ? `${String(s).slice(0, n - 1)}…` : String(s || ''));

package/server/welcome.js

@@ -2,7 +2,7 @@
 // using the same blocks an agent would. Doubles as a living block gallery.
 
 import os from 'node:os';
-import { newId } from './runner.js';
+import { newId } from './util.js';
 
 export function welcomeSession() {
   const now = Date.now();

package/web/css/auto.css

@@ -0,0 +1,29 @@
+/* Auto: wisp's router as a harness (picker, card badge, Settings → Auto) */
+.auto-mark { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
+.auto-mark .i { width: 100%; height: 100%; }
+.model-logo.routed::before { content: ''; position: absolute; right: -3px; bottom: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--surface); }
+.pk-note { margin: 8px 10px 4px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
+.pk-note a { color: var(--accent-ink); }
+.ro-goal { flex: none; }
+.ro-allowed { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 360px; }
+.chip-tog { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
+.chip-tog:hover { color: var(--ink); }
+.chip-tog.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
+.router-modal { width: min(720px, 100%); position: relative; padding-bottom: 20px; }
+.router-modal .hint { margin: 0 0 12px; }
+.router-modal h4 { margin: 16px 0 6px; }
+.ro-table td small.ro-types { display: block; margin: 2px 0 0 19px; font-size: 11px; color: var(--faint); }
+.ro-table .sx-state { justify-content: flex-end; }
+.sx-state.ok { color: var(--good); }
+.sx-state.warn { color: var(--warn); }
+.dot.warn { background: var(--warn); }
+.ro-recent { list-style: none; margin: 0; padding: 0; }
+.ro-recent li { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
+.ro-recent .ro-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
+.ro-recent small { flex: none; color: var(--faint); }
+.ro-recent .ok { color: var(--good); }
+.ro-recent .warn { color: var(--warn); }
+.ro-recent .bad { color: var(--bad); }
+.ro-recent .dim { color: var(--faint); }
+.ro-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
+.ro-foot .hint { margin: 0; }

package/web/css/automations.css

@@ -0,0 +1,71 @@
+/* ---------- automations, usage, phone ---------- */
+.auto-modal, .usage-modal, .phone-modal { width: min(720px, 100%); position: relative; }
+.usage-modal { padding-bottom: 24px; }
+.mem-lede code { font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: var(--bg-2); }
+.auto-body { padding-top: 10px; }
+.au-list { display: flex; flex-direction: column; gap: 2px; }
+.au-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: 10px; }
+.au-item:hover { background: var(--surface-2); }
+.au-item.off .au-main { opacity: 0.55; }
+.au-main { flex: 1; min-width: 0; }
+.au-main b { font-size: 13.5px; }
+.au-main p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
+.au-main code { font-size: 11.5px; padding: 0 4px; border-radius: 4px; background: var(--bg-2); }
+.au-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+.au-tags i { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--bg-2); color: var(--ink-2); }
+.au-tags a { color: var(--accent-ink); }
+.au-err { display: flex; align-items: center; gap: 5px; color: var(--bad) !important; }
+.au-err .i { width: 12px; height: 12px; }
+.au-acts { display: flex; align-items: center; gap: 4px; flex: none; }
+.au-form { display: flex; flex-direction: column; gap: 0; }
+.au-form > label, .au-form > div > label, .au-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
+.au-form label > span, .au-row > span { width: 92px; flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
+.au-form label.stack { flex-direction: column; align-items: stretch; gap: 6px; }
+.au-form label.stack > span { width: auto; }
+.au-form :is(.input, .textarea, select) { flex: 1; }
+.au-form [hidden] { display: none !important; }
+.au-params { margin: 6px 0 2px; }
+.au-params code, .k-vars code { font-size: 11px; }
+.au-runner { display: flex; align-items: center; gap: 10px; }
+.au-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px 106px; }
+.au-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
+.au-kinds button { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
+.au-kinds button .i { grid-row: span 2; margin-top: 2px; color: var(--muted); }
+.au-kinds button b { font-size: 13px; }
+.au-kinds button small { font-size: 11px; color: var(--muted); }
+.au-kinds button.on { border-color: var(--accent); background: var(--accent-soft); }
+.au-kinds button.on .i { color: var(--accent); }
+.au-warn { display: flex; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
+.au-warn .i { flex: none; margin-top: 1px; }
+.au-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+
+.usage-modal header { gap: 12px; }
+.usage-modal header h2 { margin-right: auto; }
+.us-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+.us-tiles div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); }
+.us-tiles span { font-size: 11.5px; color: var(--muted); }
+.us-tiles b { font: 600 22px/1.3 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
+.us-tiles small { font-size: 11px; color: var(--faint); }
+.us-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-bottom: 1px; border-bottom: 1px solid var(--line-2); }
+.us-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
+.us-bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); opacity: 0.85; }
+.us-bar:hover i { opacity: 1; }
+.us-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--faint); }
+.us-tip { position: absolute; z-index: 5; transform: translate(-50%, -100%); padding: 3px 7px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 11px; white-space: nowrap; pointer-events: none; }
+.us-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
+.us-table th { text-align: right; font-weight: 500; font-size: 11px; color: var(--faint); padding: 4px 6px; border-bottom: 1px solid var(--line); }
+.us-table td { text-align: right; padding: 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
+.us-table :is(th, td):first-child { text-align: left; color: var(--ink); }
+.us-proj, .us-runner { display: inline-flex; align-items: center; gap: 6px; }
+
+.phone-modal .ph-sec h4 { display: flex; align-items: center; gap: 8px; }
+.phone-modal .ph-sec h4 .switch { margin-left: auto; }
+.phone-modal .settings-modal { width: auto; padding: 0; border: 0; box-shadow: none; background: none; }
+.settings-modal label.check { padding: 0; border: 0; gap: 6px; }
+.ph-ok, .ph-bad { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; }
+.ph-ok { color: var(--good); }
+.ph-bad { color: var(--bad); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ph-ok .i, .ph-bad .i { width: 12px; height: 12px; }
+.ph-start { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
+.ph-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
+

package/web/css/base.css

@@ -0,0 +1,83 @@
+/* ---------- buttons ---------- */
+.primary {
+  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 16px;
+  border-radius: 8px; background: var(--ink); color: var(--bg); font-weight: 500;
+  transition: opacity 0.15s;
+}
+.primary:hover { opacity: 0.86; }
+.primary:disabled { opacity: 0.5; }
+.primary kbd { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--bg) 35%, transparent); opacity: 0.7; }
+.primary.sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
+.ghost {
+  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px;
+  color: var(--ink-2); transition: background 0.15s, color 0.15s;
+}
+.ghost:hover { background: var(--bg-2); color: var(--ink); }
+.ghost.on { color: var(--good); }
+.ghost.sm { height: 28px; font-size: 13px; }
+.ghost.xs { height: 24px; padding: 0 6px; border-radius: 7px; }
+.ghost.danger:hover { color: var(--bad); background: var(--del-bg); }
+.icon-btn {
+  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted);
+  transition: background 0.15s, color 0.15s;
+}
+.icon-btn:hover { background: var(--bg-2); color: var(--ink); }
+.link { color: var(--accent-ink); font-weight: 500; }
+.link:hover { text-decoration: underline; text-underline-offset: 3px; }
+.link.on { color: var(--ink); }
+/* ---------- form kit ----------
+   One look for every standalone control. Use these classes, don't restyle controls per component:
+     <input class="input">  <textarea class="textarea">  <select> (styled by default)
+     .mono      code-ish values: paths, cron, tokens, commands
+     .sm / .lg  30px rows in dense panels / the 38px add-project row
+     .field     a box holding an icon / prefix + a bare <input>: <label class="field">icon<input></label>
+     .check     a label wrapping a checkbox and its text
+   Components set only layout (width, flex) on these; a container already tinted surface-2 sets
+   --field-bg: var(--surface) so its fields don't melt into it. Prompt boxes (launcher, composer, rerun) and
+   inline renames (project name, memory edit) are their own, deliberately borderless pattern. */
+:is(.input, .textarea, select, .field) {
+  width: 100%; min-width: 0; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2);
+  background-color: var(--field-bg, var(--surface-2)); color: var(--ink); font: 13px/1.4 var(--sans); outline: 0;
+  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
+}
+:is(.input, .textarea, select, .field):hover { border-color: color-mix(in srgb, var(--ink) 14%, var(--line-2)); }
+:is(.input, .textarea, select):focus, .field:focus-within {
+  border-color: var(--accent); background-color: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft);
+}
+:is(.input, .textarea, .field input)::placeholder { color: var(--faint); }
+:is(.input, .textarea, select):disabled { opacity: 0.55; cursor: not-allowed; }
+:is(.input, .textarea, select):is([aria-invalid='true'], :user-invalid) { border-color: var(--bad); }
+:is(.input, .textarea, select):is([aria-invalid='true'], :user-invalid):focus { box-shadow: 0 0 0 3px var(--del-bg); }
+.textarea { display: block; height: auto; min-height: 64px; padding: 7px 10px; line-height: 1.5; resize: vertical; }
+:is(.input, .textarea, .field).mono { font-family: var(--mono); font-size: 12.5px; }
+:is(.input, .field).sm { height: 30px; padding: 0 8px; }
+:is(.input, .field).lg { height: 38px; padding: 0 12px; border-radius: 11px; }
+select:not([multiple]) {
+  width: auto; padding-right: 28px; appearance: none; cursor: pointer; text-overflow: ellipsis;
+  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%; background-size: 4px 4px; background-repeat: no-repeat;
+}
+.field { display: flex; align-items: center; gap: 8px; color: var(--muted); }
+.field .i { width: 14px; height: 14px; flex: none; }
+.field > input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--ink); }
+input[type='checkbox'] { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
+.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
+
+/* ---------- the mark ---------- */
+/* A plain dot. Brand: ink dot with an offset accent dot. Live: a thin spinner ring. */
+.orb { --s: 14px; position: relative; display: inline-block; width: var(--s); height: var(--s); border-radius: 50%; background: var(--ink); flex: none; }
+.orb i { display: none; }
+.orb.tiny { --s: 12px; }
+.orb.tiny::after {
+  content: ''; position: absolute; width: 6px; height: 6px; right: -4px; bottom: -2px; border-radius: 50%;
+  background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
+}
+.orb.big { display: none; }
+.orb.live {
+  --s: 18px; background: none; border: 2px solid var(--line-2); border-top-color: var(--accent);
+  animation: orb-spin 0.9s linear infinite;
+}
+.waiting .orb.live { border: 0; background: var(--warn); --s: 10px; margin: 4px; animation: pulse 1.6s ease-in-out infinite; }
+
+@keyframes orb-spin { to { rotate: 360deg; } }
+