wisp-agents 0.8.0 → 0.9.0

package/server/mcp-wisp.js

@@ -1,5 +1,5 @@
 // `wisp mcp`: a stdio MCP server that lets any MCP-capable agent or editor (Claude Code, Codex,
-// opencode, Cursor, Antigravity, Claude Desktop, Zed, …) hand tasks to wisp and read the results back.
+// opencode, Cursor, Antigravity, Grok, Claude Desktop, Zed, …) hand tasks to wisp and read the results back.
 // It talks to the running wisp over HTTP (starting a headless one if needed) via the client SDK.
 //
 //   claude mcp add wisp -- npx -y wisp-agents mcp
@@ -9,7 +9,7 @@ import fs from 'node:fs';
 import { WispClient } from './client.js';
 
 const VERSION = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf8')).version;
-const AGENTS = ['claude', 'codex', 'opencode', 'cursor', 'antigravity'];
+const AGENTS = ['claude', 'codex', 'opencode', 'cursor', 'antigravity', 'grok'];
 const DEFAULT_WAIT_S = 240; // stay under typical MCP client tool-call timeouts; call wisp_wait again for more
 
 const TOOLS = [

package/server/openapi.js

@@ -16,7 +16,7 @@ export function openapi({ version, port }) {
       title: 'wisp',
       version,
       description:
-        'Local API of wisp, a launcher and queue for coding agents (Claude Code, Codex, opencode, Cursor, Antigravity). ' +
+        'Local API of wisp, a launcher and queue for coding agents (Claude Code, Codex, opencode, Cursor, Antigravity, Grok). ' +
         'Binds to 127.0.0.1 only. Requests must carry a Host of 127.0.0.1/localhost:<port>; non-GET requests must be ' +
         'application/json (uploads: application/octet-stream) and, if they send an Origin, a local one. ' +
         'The running server advertises { url, port, pid, version } in ~/.wisp/server.json.',
@@ -143,6 +143,21 @@ export function openapi({ version, port }) {
           responses: { 200: json({ type: 'object' }), 400: err[400] },
         },
       },
+      '/machines': {
+        get: { summary: 'Machines (other computers over SSH) with connection state, steps, hints and their wisp version and harnesses', responses: { 200: json({ type: 'array', items: { type: 'object' } }) } },
+        post: {
+          summary: 'Add a machine and connect (unless connect: false). wisp starts itself there over SSH and tunnels back',
+          requestBody: body({ type: 'object', required: ['target'], properties: { target: { type: 'string', description: 'user@host, a host, or a Host from ~/.ssh/config' }, name: { type: 'string' }, port: { type: 'integer', default: 4477, description: 'wisp port on the machine' }, command: { type: 'string', description: 'Start command; default npx -y wisp-agents@<this version>' }, autoConnect: { type: 'boolean', default: true }, connect: { type: 'boolean', default: true } } }),
+          responses: { 201: json({ type: 'object' }), 400: err[400] },
+        },
+      },
+      '/machines/ssh-hosts': { get: { summary: 'Hosts from ~/.ssh/config, for suggestions', responses: { 200: json({ type: 'array', items: { type: 'object' } }) } } },
+      '/machines/{mid}': { parameters: [{ name: 'mid', in: 'path', required: true, schema: { type: 'string' } }], patch: { summary: 'Edit a machine (host, port or command changes reconnect)', responses: { 200: json({ type: 'object' }) } }, delete: { summary: 'Remove a machine and its projects here (nothing on the machine is touched)', responses: { 200: json({ type: 'object' }) } } },
+      '/machines/{mid}/connect': { parameters: [{ name: 'mid', in: 'path', required: true, schema: { type: 'string' } }], post: { summary: 'Connect: SSH in, start wisp there if needed, open the tunnel', responses: { 200: json({ type: 'object' }) } } },
+      '/machines/{mid}/disconnect': { parameters: [{ name: 'mid', in: 'path', required: true, schema: { type: 'string' } }], post: { summary: 'Close the tunnel; wisp and its agents keep running there', responses: { 200: json({ type: 'object' }) } } },
+      '/machines/{mid}/stop': { parameters: [{ name: 'mid', in: 'path', required: true, schema: { type: 'string' } }], post: { summary: 'Stop wisp on the machine (its agents too); restart: true starts this version in its place', requestBody: body({ type: 'object', properties: { restart: { type: 'boolean' } } }), responses: { 200: json({ type: 'object' }) } } },
+      '/machines/{mid}/fs': { parameters: [{ name: 'mid', in: 'path', required: true, schema: { type: 'string' } }, { name: 'q', in: 'query', schema: { type: 'string' } }], get: { summary: 'Folder suggestions on the machine', responses: { 200: json({ type: 'array', items: { type: 'string' } }) } } },
+      '/machines/{mid}/discover': { parameters: [{ name: 'mid', in: 'path', required: true, schema: { type: 'string' } }], get: { summary: 'Git repos found on the machine that are not projects yet', responses: { 200: json({ type: 'array', items: { type: 'object' } }) } } },
       '/remote/test': { post: { summary: 'Send a test message to the enabled channels', responses: { 200: json({ type: 'object' }), 400: err[400] } } },
       '/usage': {
         get: {
@@ -231,7 +246,7 @@ export function openapi({ version, port }) {
           properties: {
             prompt: { type: 'string' },
             cwd: { type: 'string', description: 'Project folder (absolute; ~ allowed). Default: the server’s cwd' },
-            agent: { enum: ['claude', 'codex', 'opencode', 'cursor', 'antigravity'], default: 'claude' },
+            agent: { enum: ['claude', 'codex', 'opencode', 'cursor', 'antigravity', 'grok'], default: 'claude' },
             mode: { enum: ['plan', 'edits', 'auto'], default: 'edits' },
             model: { type: 'string' },
             effort: { type: 'string', description: 'Thinking level: low, medium, high, xhigh, max (per harness)' },

package/server/remote.js

@@ -20,6 +20,7 @@ export class Remote {
   constructor({ store, act, onChange = () => {} }) {
     Object.assign(this, { store, act, onChange });
     this.status = { ntfy: null, telegram: null };
+    this.tgElsewhere = new Map(); // Telegram message id -> session id, for sessions on a machine (server/machines.js)
     this.ac = null;
     this.ntfyPollMs = 4000;
     this.tgLongPoll = 25;
@@ -188,9 +189,12 @@ export class Remote {
       text: clip(`${msg.title}\n\n${msg.text}${s ? '\n\n↩ Reply to this message to answer or follow up.' : ''}`, 4000),
       ...(buttons.length && { reply_markup: { inline_keyboard: buttons } }),
     });
-    if (s && sent?.message_id) {
+    if (s && sent?.message_id && this.store.get(s.id) === s) {
       s.remote = { ...s.remote, tg: [...(s.remote?.tg || []), sent.message_id].slice(-MAX_TG_IDS) };
       this.store.save(s);
+    } else if (s && sent?.message_id) {
+      this.tgElsewhere.set(sent.message_id, s.id);
+      if (this.tgElsewhere.size > 200) this.tgElsewhere.delete(this.tgElsewhere.keys().next().value);
     }
   }
 
@@ -238,9 +242,9 @@ export class Remote {
     }
     if (String(m.chat.id) !== String(t.chatId)) return;
     const replyTo = m.reply_to_message?.message_id;
-    const s = replyTo && this.store.all().find((x) => x.remote?.tg?.includes(replyTo));
-    if (!s) return say('Reply to one of wisp’s messages to answer it or send a follow-up.');
-    await say(await this.act({ sessionId: s.id, kind: 'text', text: m.text }), { reply_to_message_id: m.message_id });
+    const sessionId = replyTo && (this.store.all().find((x) => x.remote?.tg?.includes(replyTo))?.id || this.tgElsewhere.get(replyTo));
+    if (!sessionId) return say('Reply to one of wisp’s messages to answer it or send a follow-up.');
+    await say(await this.act({ sessionId, kind: 'text', text: m.text }), { reply_to_message_id: m.message_id });
   }
 
   // For the settings view: config with secrets masked, plus channel health.

package/server/runner.js

@@ -351,6 +351,8 @@ export class Runner extends EventEmitter {
       model: session.model,
       effort: session.effort || '',
       systemPrompt: prompt0 + workspaceNote(session) + this.promptExtra(session),
+      // A lead with a team delegates through wisp, so the harness's own subagent tool is switched off.
+      delegating: team.length > 0 && !!this.bridge,
       mcpServers: this.bridge && adapter.askTool !== null && !session.parentId
         ? {
             wisp: {

package/server/store.js

@@ -7,12 +7,13 @@ import { randomUUID } from 'node:crypto';
 import { parsePresentation } from './protocol.js';
 
 const DEFAULT_CONFIG = {
-  projects: [], // [{ id, name, path, color, addedAt }]
+  projects: [], // [{ id, name, path, color, addedAt, machine? }]; machine: the server/machines.js id it lives on
   defaults: { agent: 'claude', mode: 'edits', model: '', effort: '' },
   recipes: [], // saved prompts with {params}: server/recipes.js
   triggers: [], // schedules and GitHub watchers: server/triggers.js
   teams: [], // saved subagent presets: server/subagents.js
   remote: {}, // phone channels (ntfy, Telegram): server/remote.js
+  machines: [], // other computers reached over SSH: server/machines.js
 };
 
 const IMAGE_EXT = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg']);
@@ -55,6 +56,7 @@ export class Store {
       cfg.triggers ||= [];
       cfg.teams ||= [];
       cfg.remote ||= {};
+      cfg.machines ||= [];
       return cfg;
     } catch {
       return structuredClone(DEFAULT_CONFIG);
@@ -67,21 +69,24 @@ export class Store {
 
   // --- projects: plain folders, matched to sessions by path prefix ---
 
-  projectFor(cwd = '') {
+  // machine: a project on another computer (paths there are POSIX); null = this one.
+  projectFor(cwd = '', machine = null) {
+    const sep = machine ? '/' : path.sep;
     let best = null;
     for (const p of this.config.projects)
-      if ((cwd === p.path || cwd.startsWith(p.path + path.sep)) && (!best || p.path.length > best.path.length)) best = p;
+      if ((p.machine || null) === machine && (cwd === p.path || cwd.startsWith(p.path + sep)) && (!best || p.path.length > best.path.length)) best = p;
     return best;
   }
 
-  addProject(dir, { name, color } = {}) {
-    const existing = this.config.projects.find((p) => p.path === dir);
+  addProject(dir, { name, color, machine } = {}) {
+    const existing = this.config.projects.find((p) => p.path === dir && (p.machine || null) === (machine || null));
     if (existing) return existing;
     const used = new Set(this.config.projects.map((p) => p.color));
     const project = {
       id: Math.random().toString(36).slice(2, 10),
-      name: name || path.basename(dir) || dir,
+      name: name || (machine ? path.posix.basename(dir) : path.basename(dir)) || dir,
       path: dir,
+      ...(machine && { machine }),
       color: color || PROJECT_COLORS.find((c) => !used.has(c)) || PROJECT_COLORS[this.config.projects.length % PROJECT_COLORS.length],
       addedAt: Date.now(),
     };

package/server/subagents.js

@@ -65,7 +65,8 @@ Hand them work with the \`delegate\` tool (${tool}): pass one or more tasks, \`{
 ${multi ? `- A subagent with ×N has N identical copies that run at once. Put several tasks for \`${multi.name}\` in one delegate call and each goes to a free copy; name a copy (\`${copies(multi)[1]}\`) to continue that copy's conversation.\n` : ''}- Subagents work in your folder and see each other's edits. Give parallel subagents separate files or concerns.
 - Brief them like a colleague: goal, files, constraints, how to verify. They cannot see your conversation or ask the user.
 - Follow the user's "use it for" notes when you pick a subagent: send each kind of work to the one meant for it.
-- Use them when the user's request calls for it or when the work splits cleanly; you stay responsible for the result. Review what they changed before you report.
+- These are your subagents for this session. Whenever you would spawn a subagent, sub-task or helper agent (your harness's built-in Task/Agent tool included), use \`delegate\` instead: don't use built-in subagents.
+- Delegate when the user's request calls for it or when the work splits cleanly; you stay responsible for the result. Review what they changed before you report.
 - Your presentation covers the whole task; wisp shows each subagent's report next to it, so don't repeat them in full.`;
 }
 

package/skills/wisp/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wisp
-description: Delegate coding tasks to background agents (Claude Code, Codex, opencode, Cursor, Antigravity) through wisp, then read back their presentation (summary, diffs, tests). Use when the user asks to "send this to wisp", run something in the background or in parallel, fan a task out to other agents, or check on / follow up a wisp session.
+description: Delegate coding tasks to background agents (Claude Code, Codex, opencode, Cursor, Antigravity, Grok) through wisp, then read back their presentation (summary, diffs, tests). Use when the user asks to "send this to wisp", run something in the background or in parallel, fan a task out to other agents, or check on / follow up a wisp session.
 ---
 
 # wisp: hand tasks to background agents
@@ -22,7 +22,7 @@ wisp "audit dependencies for known CVEs" --mode plan --agent codex --json
 wisp "add pagination to /api/users" --cwd ~/code/api --wait     # block until done, print the result
 ```
 
-Options: `--agent claude|codex|opencode|cursor|antigravity`, `--mode plan|edits|auto`, `--model ID`,
+Options: `--agent claude|codex|opencode|cursor|antigravity|grok`, `--mode plan|edits|auto`, `--model ID`,
 `--effort low|medium|high`, `--cwd DIR` (default: current folder), `--wait`, `--json`.
 `--json` prints the session summary; its `id` is what every other command takes.
 

package/web/css/app.css

@@ -140,12 +140,43 @@ kbd {
 .link { color: var(--accent-ink); font-weight: 500; }
 .link:hover { text-decoration: underline; text-underline-offset: 3px; }
 .link.on { color: var(--ink); }
-select {
-  height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); padding: 0 26px 0 10px;
-  appearance: none; font-size: 13px; color: var(--ink-2);
+/* ---------- 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% - 13px) 13px, calc(100% - 9px) 13px; background-size: 4px 4px; background-repeat: no-repeat;
+  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. */
@@ -379,10 +410,7 @@ body:has(.launcher.docked:is(:focus-within, :has(.open))) .to-top { display: non
 .pk-text small:empty { display: none; }
 .pk-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
 .pk-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
-.pk-search { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 8px 2px; padding: 0 10px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-2); color: var(--faint); transition: border-color 0.15s, background 0.15s; }
-.pk-search:focus-within { border-color: var(--accent); background: var(--surface); }
-.pk-search .i { width: 14px; height: 14px; flex: none; }
-.pk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); }
+.pk-search { flex: none; width: auto; margin: 8px 8px 2px; color: var(--faint); }
 .pk-list { flex: 1; overflow-y: auto; padding: 6px; }
 .pk-group + .pk-group { margin-top: 4px; }
 .pk-check { width: 15px; height: 15px; flex: none; color: var(--accent); visibility: hidden; }
@@ -600,9 +628,7 @@ body:has(.launcher.docked:is(:focus-within, :has(.open))) .to-top { display: non
 .opt .k { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--bg-2); font: 500 11px var(--mono); color: var(--muted); flex: none; }
 .opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
 .opt.own { color: var(--muted); border-style: dashed; padding-left: 12px; }
-.q-own { display: flex; gap: 8px; margin-top: 12px; }
-.q-own input { flex: 1; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); padding: 0 12px; outline: 0; }
-.q-own input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.q-own { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
 .ask-card.sent { opacity: 0.5; pointer-events: none; }
 
 /* ---------- presentation blocks ---------- */
@@ -1105,13 +1131,11 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .rr-file .i { width: 12px; height: 12px; color: var(--muted); }
 .overlay:not([hidden]) ~ :is(.picker, .menu) { z-index: 55; }
 .add-row { display: flex; gap: 8px; }
-.path-input { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface-2); }
-.path-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
-.path-input .i { color: var(--muted); }
+.path-input { position: relative; flex: 1; }
+.path-input .i { width: 16px; height: 16px; }
 .path-input .browse { display: grid; place-items: center; margin-left: -4px; width: 26px; height: 26px; border-radius: 7px; }
 .path-input .browse:hover { background: var(--bg-2); }
 .path-input .browse:hover .i { color: var(--accent); }
-.path-input input { flex: 1; border: 0; outline: 0; background: transparent; font: 13px var(--mono); }
 .suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
 .suggest button { display: block; width: 100%; text-align: left; padding: 6px 10px; border-radius: 8px; font: 12.5px var(--mono); color: var(--ink-2); }
 .suggest button:hover, .suggest button.on { background: var(--accent-soft); color: var(--ink); }
@@ -1141,7 +1165,7 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .switch[aria-checked='true'] { background: var(--accent); }
 .switch[aria-checked='true']::after { transform: translateX(14px); }
 .switch:disabled { opacity: 0.4; cursor: not-allowed; }
-.settings-modal input { flex: 1; max-width: 340px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); padding: 0 10px; font: 12px var(--mono); outline: 0; }
+.settings-modal label > .input { flex: 1; max-width: 340px; }
 
 /* settings: sidebar of sections, one pane at a time */
 .modal.sx { display: grid; grid-template-columns: 196px 1fr; width: min(880px, 100%); height: min(620px, 86vh); padding: 0; overflow: hidden; }
@@ -1158,7 +1182,7 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .sx-main > header { align-items: flex-start; gap: 16px; margin-bottom: 18px; }
 .sx-title { margin: 2px 0 4px; font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; }
 .sx-lede { margin: 0; font-size: 12.5px; color: var(--muted); }
-.sx-group { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
+.sx-group { --field-bg: var(--surface); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
 .sx-group + .sx-group, .sx-pane > * + .sx-group { margin-top: 14px; }
 .sx-row { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 9px 14px; }
 .sx-row + .sx-row { border-top: 1px solid var(--line); }
@@ -1168,7 +1192,7 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .sx-text small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
 .sx-text code { font-size: 11px; }
 .sx-ctl { flex: none; display: flex; align-items: center; gap: 8px; }
-.sx-ctl input { width: 300px; }
+.sx-ctl .input { width: 300px; }
 .sx-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
 .sx-state.bad { color: var(--bad); }
 .sx-usage .it-loading { grid-column: 1 / -1; }
@@ -1184,7 +1208,7 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
   .sx-nav h2 { display: none; }
   .sx-nav button { flex: none; }
   .sx-main { padding: 16px; }
-  .sx-ctl input { width: 180px; }
+  .sx-ctl .input { width: 180px; }
   .sx-usage { grid-template-columns: repeat(2, 1fr); }
 }
 
@@ -1226,7 +1250,6 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .mem-item:hover .mem-acts, .mem-item:focus-within .mem-acts { opacity: 1; }
 .mem-edit { align-items: center; padding-top: 7px; padding-bottom: 7px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
 .mem-edit input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 13.5px var(--sans); color: var(--ink); }
-.memory-modal .mem-edit input { max-width: none; height: auto; padding: 0; }
 .mem-add { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 4px 8px 4px 6px; border-radius: 7px; font-size: 12.5px; color: var(--muted); }
 .mem-add:hover { color: var(--accent-ink); background: var(--accent-soft); }
 .mem-add .i { width: 13px; height: 13px; }
@@ -1335,6 +1358,117 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 @keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
 @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
 
+/* ---------- machines: other computers over SSH ---------- */
+.machines-btn.trouble .i { color: var(--warn); }
+.q-machine {
+  display: inline-flex; align-items: center; gap: 4px; max-width: 120px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line);
+  font-size: 11px; font-weight: 500; line-height: 17px; color: var(--ink-2); white-space: nowrap;
+}
+.q-machine span { overflow: hidden; text-overflow: ellipsis; }
+.q-machine .i { flex: none; width: 11px; height: 11px; color: var(--accent); }
+.q-machine.off { color: var(--faint); border-style: dashed; }
+.q-machine.off .i { color: var(--faint); }
+/* the launcher: one group of project chips per place it runs on */
+.l-projects { row-gap: 6px; }
+.lp-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.lp-group + .lp-group { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); }
+.lp-gl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
+.lp-gl .i { width: 13px; height: 13px; color: var(--accent); }
+.lp-gl.off { color: var(--faint); }
+.lp-gl.off .i { color: var(--faint); }
+.lp-gl .link { margin-left: 2px; }
+.where-btn .chev { width: 11px; height: 11px; opacity: 0.6; transform: rotate(90deg); }
+.where-btn.bare span, .where-btn.bare .chev { display: none; }
+.where-menu { min-width: 300px; }
+.wm-h { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
+.wm-h small { font-weight: 400; color: var(--faint); }
+.where-menu .wm-row { gap: 10px; }
+.wm-check { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid var(--line-2); color: transparent; }
+.wm-check .i { width: 11px; height: 11px; }
+.wm-row.on .wm-check { background: var(--accent); border-color: var(--accent); color: #fff; }
+.wm-icon { position: relative; display: inline-grid; place-items: center; flex: none; color: var(--muted); }
+.wm-icon .i { width: 16px; height: 16px; }
+.wm-icon .dot { position: absolute; right: -3px; bottom: -2px; width: 7px; height: 7px; border: 1.5px solid var(--surface); box-sizing: content-box; }
+.wm-row.on .wm-icon { color: var(--accent); }
+.wm-name { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
+.wm-name b { font-weight: 500; color: var(--ink); }
+.wm-name small { font: 11px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wm-agents { display: inline-flex; gap: 5px; }
+.wm-only { padding: 1px 6px; border-radius: 6px; font-size: 11px; color: var(--muted); opacity: 0; transition: opacity 0.12s; }
+.wm-row:hover .wm-only { opacity: 1; }
+.wm-only:hover { background: var(--bg-2); color: var(--ink); }
+.wm-sep { height: 1px; margin: 5px 4px; background: var(--line); }
+.p-chip .p-where { width: 11px; height: 11px; color: var(--muted); }
+.projects-modal .where { margin-bottom: 12px; }
+.projects-modal .where .i { width: 13px; height: 13px; color: var(--muted); }
+.projects-modal .where button.on .i { color: var(--accent); }
+.projects-modal .where .dot { width: 6px; height: 6px; }
+.machines-modal { width: min(640px, 100%); }
+.mc-list { display: flex; flex-direction: column; gap: 10px; }
+.mc { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
+.mc-head { display: flex; align-items: center; gap: 10px; }
+.mc-icon { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg-2); color: var(--muted); }
+.mc-icon .i { width: 17px; height: 17px; }
+.mc-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); border: 2px solid var(--surface); }
+.mc.st-online .mc-icon { color: var(--accent); }
+.mc.st-online .mc-dot { background: var(--good); }
+.mc.st-error .mc-dot { background: var(--bad); }
+.mc:is(.st-connecting, .st-reconnecting) .mc-dot { background: var(--warn); animation: blink 1.2s infinite; }
+.mc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.mc-title b { font-size: 14px; font-weight: 600; }
+.mc-title span { font: 11.5px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mc-state { font-size: 12px; color: var(--muted); white-space: nowrap; }
+.mc.st-online .mc-state { color: var(--good); }
+.mc.st-error .mc-state { color: var(--bad); }
+.mc-meta, .mc-steps, .mc-hint, .mc-projects, .mc-edit { margin-left: 42px; }
+.mc-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--muted); }
+.mc-meta .bad { color: var(--bad); }
+.mc-agents { display: inline-flex; gap: 7px; }
+.mc-steps { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 10px; margin-bottom: 0; padding: 0; }
+.mc-steps li { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; column-gap: 8px; font-size: 12.5px; color: var(--faint); }
+.mc-steps li b { font-weight: 500; }
+.mc-steps li small { font: 11.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mc-si { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); }
+.mc-si .i { width: 10px; height: 10px; }
+.mc-steps .s-done { color: var(--ink-2); }
+.mc-steps .s-done .mc-si { background: var(--good); border-color: var(--good); color: #fff; animation: check-in 0.25s var(--ease); }
+.mc-steps .s-run { color: var(--ink); }
+.mc-steps .s-run .mc-si { border-color: var(--accent); border-top-color: transparent; animation: spin 0.8s linear infinite; }
+.mc-steps .s-fail { color: var(--bad); }
+.mc-steps .s-fail .mc-si { background: var(--bad); border-color: var(--bad); color: #fff; }
+.mc-steps .s-fail small { color: var(--bad); white-space: normal; }
+.mc-steps .s-warn { color: var(--warn); }
+.mc-steps .s-warn .mc-si { border-color: var(--warn); color: var(--warn); }
+.mc-steps .s-warn small { white-space: normal; }
+.mc-hint { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--bad) 25%, var(--line)); background: var(--del-bg); font-size: 12.5px; color: var(--ink-2); }
+.mc-hint.soft { border-color: var(--line); background: var(--surface-2); }
+.mc-hint p { margin: 0 0 6px; }
+.mc-hint > :last-child { margin-bottom: 0; }
+.mc-cmd { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 3px 3px 3px 10px; border-radius: 8px; background: var(--term-bg); color: var(--term-ink); }
+.mc-cmd code { flex: 1; font: 12px var(--mono); }
+.mc-cmd .ghost { color: var(--term-ink); }
+.mc-cmd .ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+.mc-log summary { cursor: pointer; font-size: 12px; color: var(--muted); width: max-content; }
+.mc-log pre { max-height: 180px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font: 11px/1.5 var(--mono); white-space: pre-wrap; }
+.mc-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
+.mc-edit { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
+.mc-add { margin-top: 12px; }
+.mc-add h4 { margin-top: 18px; }
+.mc-new { height: 32px; }
+.mc-form { display: flex; flex-direction: column; gap: 10px; }
+.mc-row { display: flex; gap: 10px; }
+.mc-field { display: flex; flex-direction: column; gap: 5px; width: 150px; min-width: 0; }
+.mc-field.grow { flex: 1; width: auto; }
+.mc-field span { font-size: 12px; font-weight: 500; color: var(--ink-2); }
+.mc-adv summary { cursor: pointer; width: max-content; font-size: 12.5px; color: var(--muted); }
+.mc-adv[open] summary { margin-bottom: 8px; }
+.mc-check { margin-top: 8px; }
+.mc-foot { display: flex; align-items: center; gap: 10px; }
+.mc-foot .hint { flex: 1; margin: 0 !important; font-size: 12px !important; }
+.mc-foot .primary { flex: none; }
+.mc-foot .primary .i { width: 14px; height: 14px; }
+.menu button.danger:hover { color: var(--bad); background: var(--del-bg); }
+
 /* ---------- responsive ---------- */
 @media (max-width: 720px) {
   .topbar { padding: 0 12px; gap: 10px; }
@@ -1343,7 +1477,10 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
   .search-btn { padding: 0 8px; border-color: transparent; background: none; }
   .feed-wrap { padding: 14px 16px 80px; }
   .launcher.docked { width: calc(100% - 32px); }
-  .it-side .q-proj, .it-actions span, .c-done span { display: none; }
+  .it-side .q-proj, .it-actions span, .c-done span, .q-machine span { display: none; }
+  .mc-row { flex-direction: column; }
+  .mc-field { width: auto; }
+  .mc-meta, .mc-steps, .mc-hint, .mc-projects, .mc-edit { margin-left: 0; }
   .turns { padding: 6px 14px 8px; }
   .it-dock { padding: 4px 10px 10px; }
   .b-hero h2 { font-size: 22px; }
@@ -1441,12 +1578,8 @@ body.electron.mac .topbar { padding-left: 88px; }
 .ship-route .muted { margin-left: auto; }
 .ship-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
 .ship-field > span { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
-.ship-field input, .ship-field textarea, .ship-field select {
-  width: 100%; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); padding: 7px 10px; font: 13px var(--sans); outline: 0; resize: vertical;
-}
-.ship-field textarea { font: 12.5px/1.5 var(--mono); }
-.ship-field :is(input, textarea, select):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
-.ship-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
+.ship-field select { width: 100%; }
+.ship-check { display: flex; margin-top: 10px; }
 .ship-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
 .ship-foot > .muted { margin-right: auto; }
 .ship-foot code { font-size: 11px; }
@@ -1490,9 +1623,7 @@ body.electron.mac .topbar { padding-left: 88px; }
 .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 input, .au-form select, .au-form textarea { flex: 1; min-width: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); padding: 6px 9px; font: 13px var(--sans); outline: 0; }
-.au-form textarea { font: 12.5px/1.5 var(--mono); resize: vertical; }
-.au-form :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.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; }
@@ -1531,7 +1662,7 @@ body.electron.mac .topbar { padding-left: 88px; }
 .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; }
-.ph-check { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; font-size: 13px; }
+.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; }
@@ -1594,14 +1725,12 @@ body.electron.mac .topbar { padding-left: 88px; }
 .tp-warn[hidden] { display: none; }
 .tp-warn .i { flex: none; width: 14px; height: 14px; margin-top: 1px; }
 .tp-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
-.tp-row { display: grid; gap: 6px; padding: 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); animation: rise 0.25s var(--ease) both; }
+.tp-row { --field-bg: var(--surface); display: grid; gap: 6px; padding: 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); animation: rise 0.25s var(--ease) both; }
 .tp-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .tp-runner { flex: 0 1 auto; min-width: 0; overflow: hidden; }
 .tp-runner .rb-m { max-width: 140px; }
-.tp-name { flex: 1 1 90px; min-width: 70px; display: flex; align-items: center; height: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--faint); font: 12.5px var(--mono); }
-.tp-name:focus-within, .tp-use:focus-within { border-color: var(--accent); }
-.tp-name input, .tp-use input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--ink); }
-.tp-copies { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 2px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); }
+.tp-name { flex: 1 1 90px; min-width: 70px; width: auto; gap: 0; color: var(--faint); }
+.tp-copies { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 2px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); }
 .tp-copies b { min-width: 22px; text-align: center; font: 500 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
 .tp-copies.on { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
 .tp-copies.on b { color: var(--accent-ink); }
@@ -1612,16 +1741,14 @@ body.electron.mac .topbar { padding-left: 88px; }
 .tp-copies .i { width: 11px; height: 11px; }
 .tp-del { flex: none; width: 28px; height: 28px; }
 .tp-del .i { width: 13px; height: 13px; }
-.tp-use { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
 .tp-use > span { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
-.tp-use input::placeholder, .tp-name input::placeholder { color: var(--faint); }
 .tp-empty { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 11px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
 .tp-empty .i { flex: none; width: 22px; height: 22px; color: var(--faint); }
 .tp-empty p { margin: 0; line-height: 1.4; }
 .tp-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
 .tp-count { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
 .tp-saveform { display: flex; align-items: center; gap: 8px; flex: 1; }
-.tp-saveform input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--accent); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); outline: 0; }
+.tp-saveform .input { flex: 1; }
 .menu.tp-menu { width: 300px; }
 .menu.tp-menu button { align-items: center; text-align: left; }
 .menu.tp-menu button.on b { color: var(--accent-ink); }

package/web/index.html

@@ -53,6 +53,8 @@
       <symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></symbol>
       <symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13.5 3L5 13.5h6L10.5 21 19 10.5h-6L13.5 3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></symbol>
       <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 7.5V12l3 2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+      <symbol id="i-laptop" viewBox="0 0 24 24"><rect x="4.5" y="5" width="15" height="10.5" rx="1.8" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M2.5 19h19" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
+      <symbol id="i-server" viewBox="0 0 24 24"><rect x="3.5" y="4" width="17" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><rect x="3.5" y="13" width="17" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="7.3" cy="7.5" r="1.1" fill="currentColor"/><circle cx="7.3" cy="16.5" r="1.1" fill="currentColor"/><path d="M11 7.5h5.5M11 16.5h5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></symbol>
       <symbol id="i-play" viewBox="0 0 24 24"><path d="M7 5.5v13l11-6.5-11-6.5z" fill="currentColor"/></symbol>
     </defs>
   </svg>
@@ -67,6 +69,9 @@
       <button class="update-btn" id="updateBtn" hidden>
         <svg class="i"><use href="#i-update"/></svg><span>Update</span>
       </button>
+      <button class="auto-btn machines-btn" id="machinesBtn" title="Machines: run agents on another computer over SSH">
+        <svg class="i"><use href="#i-server"/></svg><span>Machines</span><b class="ab-n" hidden></b>
+      </button>
       <button class="auto-btn" id="autoBtn" title="Automations: recipes and triggers">
         <svg class="i"><use href="#i-bolt"/></svg><span>Automations</span><b class="ab-n" hidden></b>
       </button>