wisp-agents 0.15.0 → 0.17.0

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/usage.js

@@ -77,3 +77,97 @@ export function usage(sessions, { days = 30, now = Date.now(), project = () => n
     runners: sorted(byRunner),
   };
 }
+
+// Tool calls across sessions, for the agent-facing `wisp_stats` tool: how often each kind of
+// action ran (run, read, edit, search, web, …), per harness, project and day. Kinds are wisp's
+// normalized activity kinds, not the harness's own tool names. Spend and success come from usage().
+const NOT_TOOLS = new Set(['text', 'error', 'answer']);
+const tally = () => ({ calls: 0, kinds: {} });
+const count = (b, kind) => {
+  b.calls++;
+  b.kinds[kind] = (b.kinds[kind] || 0) + 1;
+};
+const ranked = (m) => [...m.values()].sort((a, b) => b.calls - a.calls);
+
+// filter: { agent, project } — agent is a harness id, project a project id or folder name.
+export function toolStats(sessions, { days = 30, now = Date.now(), project = () => null, filter = {} } = {}) {
+  const keep = sessions
+    .filter((s) => {
+      if (!filter.project) return true;
+      const p = project(s);
+      return p?.id === filter.project || (p?.name || String(s.cwd || '').split(/[\\/]/).pop()) === filter.project;
+    })
+    .map((s) => (filter.agent ? { ...s, turns: (s.turns || []).filter((t) => (t.agent || s.agent) === filter.agent) } : s));
+  const u = usage(keep, { days, now, project });
+  const since = u.since;
+
+  const total = tally();
+  const byAgent = new Map();
+  const byProject = new Map();
+  const byDay = new Map(u.daily.map((d) => [d.date, { date: d.date, ...tally() }]));
+  for (const s of keep) {
+    if (s.agent === 'wisp') continue;
+    const p = project(s);
+    for (const t of s.turns || []) {
+      if (!t.startedAt || t.startedAt < since || t.status === 'running') continue;
+      const agent = t.agent || s.agent;
+      const pk = p?.id || s.cwd;
+      if (!byAgent.has(agent)) byAgent.set(agent, { agent, ...tally() });
+      if (!byProject.has(pk)) byProject.set(pk, { id: p?.id || null, name: p?.name || String(s.cwd || '').split(/[\\/]/).pop(), ...tally() });
+      for (const a of t.activity || []) {
+        if (!a?.kind || NOT_TOOLS.has(a.kind)) continue;
+        count(total, a.kind);
+        count(byAgent.get(agent), a.kind);
+        count(byProject.get(pk), a.kind);
+        const d = byDay.get(dayKey(a.t || t.startedAt));
+        if (d) count(d, a.kind);
+      }
+    }
+  }
+  const outcome = (b) => ({ turns: b.turns, cost: b.cost, priced: b.priced, successRate: b.successRate });
+  const runs = new Map();
+  for (const r of u.runners) {
+    const b = runs.get(r.agent) || { turns: 0, done: 0, cost: 0, priced: 0 };
+    runs.set(r.agent, { turns: b.turns + r.turns, done: b.done + r.done, cost: b.cost + r.cost, priced: b.priced + r.priced });
+  }
+  const withRuns = (a) => {
+    const r = runs.get(a.agent) || { turns: 0, done: 0, cost: 0, priced: 0 };
+    return { ...a, turns: r.turns, cost: Math.round(r.cost * 10000) / 10000, priced: r.priced, successRate: r.turns ? r.done / r.turns : null };
+  };
+  const projectRuns = new Map(u.projects.map((p) => [p.id || p.name, p]));
+  return {
+    days: u.days,
+    since,
+    filter: { agent: filter.agent || null, project: filter.project || null },
+    total: { ...total, sessions: u.total.sessions, ...outcome(u.total), inputTokens: u.total.inputTokens, outputTokens: u.total.outputTokens, questions: u.total.questions },
+    kinds: Object.entries(total.kinds).map(([kind, calls]) => ({ kind, calls })).sort((a, b) => b.calls - a.calls),
+    agents: ranked(byAgent).map(withRuns),
+    projects: ranked(byProject).map((p) => ({ ...p, ...outcome(projectRuns.get(p.id || p.name) || { turns: 0, cost: 0, priced: 0, successRate: null }) })),
+    daily: [...byDay.values()],
+  };
+}
+
+// toolStats() as markdown for an agent to read.
+export function toolStatsText(st) {
+  const pct = (r) => (r === null || r === undefined ? '—' : `${Math.round(r * 100)}%`);
+  const usd = (b) => (b.priced ? `$${b.cost.toFixed(2)}${b.priced < b.turns ? ` (${b.priced}/${b.turns} turns priced)` : ''}` : '—');
+  const kinds = (k) => Object.entries(k).sort((a, b) => b[1] - a[1]).map(([n, c]) => `${n} ${c}`).join(', ') || '—';
+  const scope = [st.filter.agent && `harness ${st.filter.agent}`, st.filter.project && `project ${st.filter.project}`].filter(Boolean).join(', ');
+  const t = st.total;
+  const out = [
+    `## wisp tool stats — last ${st.days} day${st.days === 1 ? '' : 's'}${scope ? ` (${scope})` : ''}`,
+    `${t.calls} tool calls in ${t.turns} turns across ${t.sessions} sessions. Success rate ${pct(t.successRate)}, cost ${usd(t)}, ${t.questions} questions to the user, ${t.inputTokens} input / ${t.outputTokens} output tokens.`,
+    '',
+    'Kinds are wisp’s categories, not harness tool names: run = shell commands, read / edit / search = files, web = fetch and search, agent = subagents, tool = other (MCP) tools, ask = questions to the user, wait = waiting on the user or a background task.',
+  ];
+  if (!t.turns) return [...out, '', 'No finished turns in this range.'].join('\n');
+  out.push('', '### By kind', '| kind | calls | share |', '|---|---:|---:|');
+  for (const k of st.kinds) out.push(`| ${k.kind} | ${k.calls} | ${t.calls ? Math.round((k.calls / t.calls) * 100) : 0}% |`);
+  out.push('', '### By harness', '| harness | calls | turns | success | cost | top kinds |', '|---|---:|---:|---:|---:|---|');
+  for (const a of st.agents) out.push(`| ${a.agent} | ${a.calls} | ${a.turns} | ${pct(a.successRate)} | ${usd(a)} | ${kinds(a.kinds)} |`);
+  out.push('', '### By project', '| project | calls | turns | success | cost | top kinds |', '|---|---:|---:|---:|---:|---|');
+  for (const p of st.projects) out.push(`| ${p.name} | ${p.calls} | ${p.turns} | ${pct(p.successRate)} | ${usd(p)} | ${kinds(p.kinds)} |`);
+  out.push('', '### By day (days with activity)', '| day | calls | kinds |', '|---|---:|---|');
+  for (const d of st.daily.filter((d) => d.calls)) out.push(`| ${d.date} | ${d.calls} | ${kinds(d.kinds)} |`);
+  return out.join('\n');
+}

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();
@@ -129,8 +129,8 @@ export function welcomeSession() {
               title: 'Permission modes (pick per launch)',
               items: [
                 { text: 'Plan — read-only, the agent proposes', done: true },
-                { text: 'Edits — the agent may change files, no shell prompts', done: true },
-                { text: 'Full auto — no permission prompts at all; use on trusted repos', done: false },
+                { text: 'Edits — the agent may change files; anything else it needs, you approve', done: true },
+                { text: 'Full auto — no permission prompts at all; the default, each task in its own worktree', done: true },
               ],
             },
             {

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; } }
+