wisp-agents 0.16.0 → 0.18.0

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

@@ -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/composer.css

@@ -60,3 +60,25 @@
 .c-runner.changed .rb-logo { margin-right: 4px; }
 .c-runner:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }
 .cr-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+
+/* ---------- task mentions (features/mentions.js) ---------- */
+/* In a prompt box: the textarea's own text sits over a mirror that paints a chip under each @Title. */
+.mn-wrap { position: relative; }
+.mn-wrap > textarea { position: relative; z-index: 1; }
+.mn-mirror {
+  position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; pointer-events: none;
+  border-style: solid; border-color: transparent; color: transparent;
+}
+.mn-wrap:not(.has-mn) .mn-mirror { display: none; }
+.mn-mirror mark.mn {
+  color: transparent; border-radius: 4px;
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+.launcher.docked:not(:focus-within):not(:has(.open)) .mn-wrap { flex: 1; min-width: 0; }
+/* In a sent prompt: the same chip, with the task's title; a link opens that task. */
+:is(a, span).mn {
+  padding: 0 5px; border-radius: 5px; font-weight: 500; color: var(--accent-ink); text-decoration: none;
+  background: color-mix(in srgb, var(--accent) 12%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone;
+}
+a.mn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

package/web/css/feed.css

@@ -96,6 +96,7 @@
 .it-bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; }
 .it-meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
 .it-actions { display: flex; gap: 2px; flex: none; }
+.it-done:hover { color: var(--good); }
 .it-body .earlier { display: block; margin: 4px 0 0 18px; }
 .it-dock { padding: 4px 14px 14px; }
 
@@ -206,3 +207,29 @@
 .q-own { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
 .ask-card.sent { opacity: 0.5; pointer-events: none; }
 
+/* approvals: live (paused on a tool call) and after the fact (what the permissions blocked) */
+.ask-card.perm .q-head { color: var(--warn); }
+.ask-card.perm .q-text code { font-size: 0.86em; }
+.perm-detail {
+  margin: -4px 0 12px; padding: 9px 12px; max-height: 180px; overflow: auto; border-radius: 8px;
+  background: var(--surface-2); border: 1px solid var(--line); font: 12.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word;
+}
+.ask-card.perm .opt.go { border-color: color-mix(in srgb, var(--good) 55%, var(--line-2)); }
+.ask-card.perm .opt.no { color: var(--ink-2); }
+.b-blocked {
+  padding: 14px 16px; border-radius: var(--radius); background: var(--surface);
+  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
+}
+.b-blocked.resolved { background: var(--surface-2); border-color: var(--line); }
+.b-blocked .q-head { margin-bottom: 8px; }
+.b-blocked.resolved .q-head { color: var(--muted); }
+.bl-state { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--muted); }
+.bl-state svg { width: 13px; height: 13px; }
+.bl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.bl-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
+.bl-tool { font: 500 11px var(--mono); padding: 1px 6px; border-radius: 5px; background: var(--bg-2); color: var(--ink-2); flex: none; }
+.bl-items code { font: 12.5px/1.45 var(--mono); color: var(--ink); word-break: break-all; min-width: 0; }
+.bl-items small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
+.bl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
+.bl-note { font-size: 12px; color: var(--muted); }
+

package/web/css/launcher.css

@@ -4,6 +4,11 @@
    while it's open so switching between the two harness pickers doesn't flash the ring off and on. */
 .launcher:is(:focus-within, :has(.open)) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 0 0 3px var(--accent-soft); }
 .launcher.drop, .composer.drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+/* index.html's first paint: same height as the real launcher, so nothing jumps when it fills in */
+.launcher.skel .l-projects { height: 35px; }
+.launcher.skel .l-bar { height: 38px; }
+.launcher.skel .l-recipes { height: 40px; }
+@container launcher (max-width: 480px) { .launcher.skel .l-recipes { height: 90px; } } /* its hint wraps on phones */
 .l-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px 8px; }
 /* no harness yet: one quiet line offering to install opencode */
 .l-setup { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 6px 6px 6px 10px; border-radius: 9px; background: var(--accent-soft); font-size: 13px; color: var(--ink-2); }
@@ -24,8 +29,20 @@
 }
 .lp-chip:hover { border-color: var(--line-2); background: var(--surface-2); }
 .lp-chip.on { background: var(--bg-2); border-color: var(--line-2); color: var(--ink); font-weight: 500; }
+#wtBtn[hidden] { display: none; }
+.lp-chip.none .i { width: 13px; height: 13px; color: var(--muted); }
+.lp-chip.none.on .i { color: var(--ink); }
 .lp-chip.add { color: var(--muted); border-style: dashed; }
+.lp-chip.cloning .orb.live { --s: 11px; margin: 0; }
+.lp-chip .lp-note { color: var(--faint); font-weight: 400; font-size: 11.5px; }
 .lp-chip.add .i { width: 14px; height: 14px; }
+/* "+N": the projects that didn't get a chip, one search away */
+.lp-chip.more { gap: 5px; padding: 0 9px; color: var(--muted); }
+.lp-chip.more:hover, .lp-chip.more.open { color: var(--ink); border-color: var(--line-2); }
+.lp-chip.more .i { width: 12px; height: 12px; }
+.l-projects .lp-chip[hidden] { display: none; }
+/* narrow, with "+N" (whose list has No folder too): it goes icon-only unless picked */
+@container launcher (max-width: 520px) { .l-projects:has(.more:not([hidden])) .lp-chip.none:not(.on) span { display: none; } }
 /* recipes: one-click prompts under the launch bar */
 .l-recipes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px -12px -10px; padding: 7px 14px 8px; border-top: 1px solid var(--line); }
 .l-recipes .l-in { display: inline-flex; align-items: center; gap: 5px; }

package/web/css/layout.css

@@ -45,8 +45,16 @@
 .dot.bad { background: var(--bad); }
 
 /* project filter chips in the top bar */
-.projects { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
-.projects::-webkit-scrollbar { display: none; }
+.projects { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
+/* only whole chips: those that don't fit the bar fold into "+N" (projects.js fits them) */
+.p-scroll { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; }
+.p-chip[hidden], .p-chip > [hidden], .p-scroll[hidden] { display: none; }
+.p-chip.more.solo { min-width: 0; flex: 0 1 auto; gap: 6px; padding-left: 10px; color: var(--ink); font-weight: 500; }
+.p-chip.more.solo .p-more-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.p-chip.more { flex: none; gap: 4px; padding: 0 7px 0 9px; color: var(--muted); border-color: var(--line); }
+.p-chip.more:hover, .p-chip.more.open { border-color: var(--line-2); color: var(--ink); }
+.p-chip.more .chev { width: 11px; height: 11px; transform: rotate(90deg); transition: transform 0.2s var(--ease); }
+.p-chip.more.open .chev { transform: rotate(-90deg); }
 .p-chip {
   display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; flex: none;
   font-size: 12.5px; color: var(--muted); border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;

package/web/css/modals.css

@@ -43,6 +43,14 @@
 .pname:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
 .ppath { font: 11.5px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pcount { font-size: 12px; color: var(--muted); }
+.discover h4 { display: flex; align-items: center; gap: 6px; }
+.discover h4 .i { width: 14px; height: 14px; }
+.discover h4 .muted { font-weight: 400; }
+.prow.cloning .ppath { color: var(--muted); }
+.discover h4 .link { margin-left: auto; font-size: 12px; }
+.prow.cloning .orb.live { margin: 0; }
+.hint .clonedir { width: 220px; height: 24px; padding: 0 7px; margin: 0 4px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 12px; outline: 0; }
+.hint .clonedir:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .found { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
 .found-item { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; text-align: left; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); transition: all 0.15s; }
 .found-item:hover { border-color: var(--accent); background: var(--accent-soft); }

package/web/css/palette.css

@@ -53,6 +53,28 @@
 .menu { position: fixed; z-index: 40; min-width: 220px; padding: 5px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: pop 0.2s var(--ease); }
 .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); }
 .menu button:hover { background: var(--bg-2); color: var(--ink); }
+/* the project list: search over every project, rows below, fixed extras at the bottom */
+.menu.pm { display: flex; flex-direction: column; width: 340px; max-width: calc(100vw - 16px); padding: 0; overflow: hidden; }
+.menu .pm-search, .menu .pm-search:is(:hover, :focus-within) {
+  flex: none; height: 42px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font-size: 13.5px;
+}
+.pm-list { max-height: min(340px, 48vh); overflow-y: auto; padding: 5px; }
+.pm-extras { flex: none; padding: 5px; border-top: 1px solid var(--line); }
+.menu .pm-row { gap: 8px; padding: 6px 9px; text-align: left; }
+.menu .pm-row:hover { background: none; }
+.menu .pm-row.act { background: var(--bg-2); color: var(--ink); }
+.pm-row .p-dot { flex: none; }
+.pm-name { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pm-row.on .pm-name { font-weight: 500; color: var(--ink); }
+.pm-name mark { background: none; color: var(--accent-ink); font-weight: 600; }
+.pm-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--faint); }
+.pm-row .pm-where { width: 11px; height: 11px; color: var(--muted); flex: none; }
+.pm-row .p-need { flex: none; }
+.pm-row .p-run { flex: none; }
+.pm-row .pm-check { flex: none; width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
+.pm-row.on .pm-check { visibility: visible; }
+.pm-x .i { width: 14px; height: 14px; color: var(--muted); }
+.pm-empty { padding: 18px 10px; text-align: center; font-size: 13px; color: var(--muted); }
 .menu .danger:hover { color: var(--bad); background: var(--del-bg); }
 .menu-kbd { margin-left: auto; }
 

package/web/css/ship.css

@@ -53,13 +53,13 @@
 .pill.pr-merged, .pr-strip.pr-merged { --tone: #8250df; }
 .pill.pr-closed, .pr-strip.pr-closed { --tone: var(--faint); }
 .pr-strip {
-  display: flex; align-items: center; gap: 8px; margin: 0 14px 4px; padding: 5px 6px 5px 10px; border-radius: 9px;
+  display: flex; align-items: center; gap: 8px; margin: 8px 14px 4px; padding: 5px 6px 5px 10px; border-radius: 9px;
   font-size: 12.5px; background: color-mix(in srgb, var(--tone) 7%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
 }
 .pr-strip[hidden] { display: none; }
 .pr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; }
 .pr-strip.pr-pending .pr-dot { animation: pulse 1.4s ease-in-out infinite; }
-.pr-num { font-weight: 600; color: var(--ink); }
+.pr-num { font-weight: 600; color: var(--ink); white-space: nowrap; }
 .pr-line { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pr-strip .ghost .i { width: 13px; height: 13px; }
 .pr-strip .pr-merge { color: var(--good); font-weight: 500; }
@@ -93,3 +93,43 @@
 .cmp-body { flex: 1; min-height: 160px; max-height: 58vh; overflow: auto; padding: 12px; background: var(--surface); }
 .cmp-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); }
 
+
+/* Ship it in flight: the PR row turns into a track of stages that fills in as they run */
+.pr-strip.ship-run {
+  --tone: var(--accent); position: relative; overflow: hidden; animation: ship-in 0.32s var(--ease);
+  background: color-mix(in srgb, var(--tone) 6%, transparent); border-color: color-mix(in srgb, var(--tone) 22%, transparent);
+}
+.ship-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; color: var(--accent-ink); background: color-mix(in srgb, var(--tone) 14%, transparent); }
+.ship-icon .i { width: 12px; height: 12px; animation: ship-fly 1.1s ease-in-out infinite; }
+.ship-what { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.ship-what .dots::after { content: '…'; animation: pulse 1.1s ease-in-out infinite; }
+.ship-track { display: flex; align-items: center; gap: 4px; margin: 0 0 0 4px; padding: 0; list-style: none; font-size: 11.5px; color: var(--faint); flex: none; }
+.ship-track li { display: inline-flex; align-items: center; gap: 4px; transition: color 0.25s; }
+.ship-track li + li::before { content: ''; width: 14px; height: 1.5px; margin-right: 2px; border-radius: 1px; background: var(--line-2); transition: background 0.3s; }
+.ship-track li.done::before, .ship-track li.now::before, .ship-track li.bad::before { background: var(--tone); }
+.ship-track i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background 0.25s, border-color 0.25s; }
+.ship-track i .i { width: 8px; height: 8px; color: #fff; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.25s var(--ease); }
+.ship-track li.done { color: var(--ink-2); }
+.ship-track li.done i { background: var(--good); border-color: var(--good); }
+.ship-track li.done i .i { opacity: 1; transform: none; }
+.ship-track li.now { color: var(--ink); font-weight: 500; }
+.ship-track li.now i { border-color: var(--tone); border-top-color: transparent; animation: spin 0.8s linear infinite; }
+.ship-track li.bad { color: var(--bad); font-weight: 500; }
+.ship-track li.bad i { background: var(--bad); border-color: var(--bad); }
+.ship-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tone), transparent) 0 0 / 40% 100% no-repeat; animation: ship-sweep 1.3s ease-in-out infinite; }
+.ship-run.failed .ship-bar, .ship-run.failed .ship-icon .i { animation: none; }
+.ship-run.failed .ship-bar { display: none; }
+.ship-run.failed .ship-icon { color: var(--bad); }
+.ship-run.failed { animation: nudge 0.4s ease; }
+.ship-err { font-weight: 400; color: var(--ink-2); }
+.ship-acts { display: inline-flex; gap: 2px; }
+.ship-acts .i { width: 13px; height: 13px; }
+.pr-strip.landed { animation: ship-land 0.9s var(--ease); }
+.pill.ship-pill { --tone: var(--accent); }
+.pill.ship-pill i { animation: pulse 1.1s ease-in-out infinite; }
+@keyframes ship-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
+@keyframes ship-fly { 50% { transform: translate(2px, -2px); } }
+@keyframes ship-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
+@keyframes ship-land { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 30%, transparent); transform: scale(1.015); } }
+@media (max-width: 640px) { .ship-track span { display: none; } }
+@media (prefers-reduced-motion: reduce) { .ship-run, .ship-run *, .pr-strip.landed { animation: none !important; } }

package/web/index.html

@@ -39,9 +39,11 @@
       <symbol id="i-dots" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="18" cy="12" r="1.6" fill="currentColor"/></symbol>
       <symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2" fill="none" stroke="currentColor" stroke-width="1.7"/></symbol>
       <symbol id="i-branch" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="6" cy="19" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><circle cx="18" cy="7" r="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M6 7.2v9.6M18 9.2c0 5-12 3-12 7.6" fill="none" stroke="currentColor" stroke-width="1.7"/></symbol>
+      <symbol id="i-github" viewBox="0 0 24 24"><path d="M12 2.5a9.5 9.5 0 00-3 18.52c.48.09.65-.2.65-.46v-1.62c-2.64.57-3.2-1.27-3.2-1.27-.43-1.1-1.05-1.39-1.05-1.39-.86-.59.07-.58.07-.58.95.07 1.45.98 1.45.98.85 1.45 2.22 1.03 2.76.79.09-.61.33-1.03.6-1.27-2.1-.24-4.32-1.05-4.32-4.68 0-1.03.37-1.88.98-2.54-.1-.24-.42-1.2.09-2.5 0 0 .8-.26 2.61.97a9.1 9.1 0 014.76 0c1.81-1.23 2.61-.97 2.61-.97.51 1.3.19 2.26.09 2.5.61.66.98 1.51.98 2.54 0 3.64-2.22 4.44-4.34 4.67.34.3.64.88.64 1.77v2.63c0 .26.17.56.66.46A9.5 9.5 0 0012 2.5z" fill="currentColor"/></symbol>
       <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M12 11v6M12 7.5v.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
       <symbol id="i-warn" viewBox="0 0 24 24"><path d="M12 3.5l9.5 16.5h-19L12 3.5z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 10v4.5M12 17.2v.3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
       <symbol id="i-ask" viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 016.5 3h11A2.5 2.5 0 0120 5.5v8a2.5 2.5 0 01-2.5 2.5H10l-4.5 4v-4h0A1.5 1.5 0 014 14.5v-9z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M10 8.2a2 2 0 113 1.7c-.7.4-1 .8-1 1.6M12 13.2v.3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
+      <symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="10.5" width="14" height="9.5" rx="2.2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M8.5 10.5V8a3.5 3.5 0 017 0v2.5M12 14.3v2" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></symbol>
       <symbol id="i-pen" viewBox="0 0 24 24"><path d="M4 20l1-4L16 5l3 3L8 19l-4 1z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></symbol>
       <symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6L12 3zM18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2z" fill="currentColor"/></symbol>
       <symbol id="i-stop" viewBox="0 0 24 24"><rect x="6.5" y="6.5" width="11" height="11" rx="2" fill="currentColor"/></symbol>
@@ -101,13 +103,22 @@
       </button>
     </header>
     <div class="feed-wrap">
-      <div class="launch-slot" id="launchSlot"><section class="launcher card" id="launcher"></section></div>
+      <div class="launch-slot" id="launchSlot">
+        <!-- First paint, before the scripts load: the launcher's shape, and a box you can already type
+             in. renderLauncher() fills in the rest and keeps what was typed. -->
+        <section class="launcher card skel" id="launcher">
+          <div class="l-projects"><span class="l-in">in</span></div>
+          <textarea id="prompt" rows="2" spellcheck="false" autofocus placeholder="What should I go do? Paste screenshots, drop logs or videos…"></textarea>
+          <div class="l-bar"><span class="grow"></span><button class="send" tabindex="-1" aria-hidden="true"><svg class="i"><use href="#i-enter"/></svg></button></div>
+          <div class="l-recipes"></div>
+        </section>
+      </div>
       <div class="feed-head" id="feedHead"></div>
       <div class="feed" id="feed">
-        <section class="f-group needs" id="secNeeds"><h4>Needs you<span class="n"></span></h4><div class="f-list"></div></section>
-        <section class="f-group working" id="secWorking"><h4>Working<span class="n"></span></h4><div class="f-list"></div></section>
-        <section class="f-group done" id="secDone"><h4 class="toggle-done">Done<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
-        <section class="f-group done archived" id="secArchived"><h4 class="toggle-done">Archived<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
+        <section class="f-group needs" id="secNeeds" hidden><h4>Needs you<span class="n"></span></h4><div class="f-list"></div></section>
+        <section class="f-group working" id="secWorking" hidden><h4>Working<span class="n"></span></h4><div class="f-list"></div></section>
+        <section class="f-group done" id="secDone" hidden><h4 class="toggle-done">Done<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
+        <section class="f-group done archived" id="secArchived" hidden><h4 class="toggle-done">Archived<span class="n"></span><svg class="i chev"><use href="#i-chevron"/></svg></h4><div class="f-list"></div></section>
       </div>
       <div class="feed-empty" id="feedEmpty" hidden></div>
     </div>

package/web/js/app.js

@@ -7,7 +7,7 @@ import { api } from './core/api.js';
 import * as bus from './core/bus.js';
 import { $, $$ } from './core/dom.js';
 import { ago } from './core/format.js';
-import { S, save } from './core/state.js';
+import { S, save, setAgents } from './core/state.js';
 import { combo } from './ui/kbd.js';
 import { openAutomations } from './features/automations.js';
 import { openPalette } from './features/commands.js';
@@ -70,12 +70,23 @@ window.addEventListener('focus', () => {
   for (const id of S.open) if (S.sessions.get(id)?.unread) scheduleRefetch(id);
 });
 
+// The launcher paints as soon as config and machines are in (local, fast), from the last harness
+// list seen. Detecting harnesses can take seconds on a cold start: it repaints the launcher when
+// it lands, only if the list changed.
 (async () => {
-  [S.agents] = await Promise.all([api('/agents').catch(() => []), loadConfig(), loadSessions(), loadMachines()]);
+  const agents = api('/agents').catch(() => null);
+  const sessions = loadSessions();
+  await Promise.all([loadConfig(), loadMachines()]);
   renderLauncher();
   bus.emit('agents');
+  $('#prompt')?.focus();
+  await sessions;
   connect();
   route();
-  $('#prompt')?.focus();
   telemetryNotice();
+  const list = await agents;
+  if (!list || JSON.stringify(list) === JSON.stringify(S.agents)) return;
+  setAgents(list);
+  renderLauncher();
+  bus.emit('agents');
 })();

package/web/js/blocks.js

@@ -788,6 +788,52 @@ R.question = (b, ctx) => {
   return node;
 };
 
+// What the turn's permissions refused. On the latest turn: Allow & retry (exactly these where the
+// harness can scope a grant, else one follow-up in Full auto) or Deny.
+R.blocked = (b, ctx) => {
+  const items = (b.items || []).filter((i) => i && typeof i === 'object');
+  const t = ctx.turn || {};
+  const scoped = !!t.blocked?.length && t.blocked.every((i) => i.rule !== undefined);
+  const open = ctx.isLatest && !t.approval && !!ctx.approve && ctx.session?.state !== 'running';
+  const state = (a) => (a === 'allowed' ? `${icon('check')}Allowed and retried` : a === 'denied' ? `${icon('x')}Denied` : '');
+  const node = el(`
+    <div class="b-blocked ${open ? '' : 'resolved'}">
+      <div class="q-head">${icon('lock')}<span>Blocked by permissions</span>${t.approval ? `<span class="bl-state">${state(t.approval)}</span>` : ''}</div>
+      <ul class="bl-items">${items
+        .map((i) => `<li><span class="bl-tool">${esc(i.tool || 'tool')}</span>${i.detail ? `<code>${esc(i.detail)}</code>` : ''}${i.why ? `<small>${inlineMd(i.why)}</small>` : ''}</li>`)
+        .join('')}</ul>
+      ${open ? `<div class="bl-foot">
+        <button class="primary sm bl-allow">${icon('check')}Allow &amp; retry</button>
+        <button class="ghost sm bl-deny">Deny</button>
+        <span class="bl-note">${scoped ? 'Allows exactly these, for the retry only.' : 'This harness can’t allow single actions, so the retry runs in Full auto (that follow-up only).'}</span>
+      </div>` : ''}
+    </div>`);
+  if (!open) return node;
+  const decide = async (allow) => {
+    // Instant: the card settles at once and goes back if the server says no.
+    const foot = node.querySelector('.bl-foot');
+    const head = node.querySelector('.q-head');
+    const tag = el(`<span class="bl-state">${state(allow ? 'allowed' : 'denied')}</span>`);
+    node.classList.add('resolved');
+    foot.hidden = true;
+    head.append(tag);
+    try {
+      await ctx.approve(allow);
+    } catch {
+      node.classList.remove('resolved');
+      foot.hidden = false;
+      tag.remove();
+    }
+  };
+  node.querySelector('.bl-allow').onclick = () => {
+    decide(true);
+  };
+  node.querySelector('.bl-deny').onclick = () => {
+    decide(false);
+  };
+  return node;
+};
+
 R.actions = (b, ctx) => {
   const items = (b.items || []).map((it, i) => (typeof it === 'string' ? { label: it, command: it, _i: i } : { ...it, _i: i }));
   const node = el(`

package/web/js/core/state.js

@@ -22,7 +22,7 @@ export const S = {
   tasks: new Map(), // compare task key -> { card, head, runs, lead }
   focus: null, // id of the keyboard-focused item
   config: { defaults: {}, projects: [] },
-  agents: [],
+  agents: load('wisp.agents', []), // the last list seen, so the launcher paints before detection answers
   machines: [], // other computers over SSH: GET /api/machines, kept fresh by the 'machines' event
   filter: load('wisp.filter', 'all'),
   showDone: load('wisp.showDone', false),
@@ -32,6 +32,7 @@ export const S = {
   replyRunners: new Map(), // session id → { agent, model, effort } its next follow-up switches to
 };
 export const saveOpen = () => save('wisp.open', [...S.open]);
+export const setAgents = (list) => ((S.agents = list), save('wisp.agents', list));
 
 // Where the launcher sends a prompt: '' = this computer, else machine ids. Several run in parallel,
 // each in the project picked for it (launch.picks[place]), and show up as one task.

package/web/js/features/actions.js

@@ -15,8 +15,9 @@ import { saveAsRecipe } from './automations.js';
 import { compareView } from './compare.js';
 import { collapse, expand, handOff, renderFeed, setFocus } from './feed.js';
 import { launchBehind } from './launcher.js';
+import { copyTaskId, mentionBox } from './mentions.js';
 import { runnerPicker } from './runner-picker.js';
-import { agentName, effortsFor, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
+import { agentName, DEFAULT_MODE, effortsFor, modeMenu, MODES, paintRunnerBtn, savedEffort, savedModel } from './runners.js';
 import { feedAnchor, keepInPlace } from './scroll.js';
 import { mergePr, shipDialog, shipLabel, shippable } from './ship.js';
 
@@ -143,6 +144,7 @@ export function moreMenu(id, anchor) {
   const menu = el(`
     <div class="menu" style="top:${r.bottom + 6}px;right:${innerWidth - r.right}px">
       <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
+      <button data-a="copy-id">${icon('copy')}Copy task ID</button>
       ${s.agentSessionId ? `<button data-a="copy">${icon('copy')}Copy resume command</button>` : ''}
       <button data-a="folder">${icon('folder')}Open project in editor</button>
       ${canRollback ? `<button data-a="rollback">${icon(rolledBack ? 'rerun' : 'replay')}${rolledBack ? 'Re-apply latest turn' : 'Restore to before latest turn'}</button>` : ''}
@@ -153,6 +155,7 @@ export function moreMenu(id, anchor) {
     const a = e.target.closest('button')?.dataset.a;
     close();
     if (a === 'rename') rename(id);
+    if (a === 'copy-id') copyTaskId(id);
     if (a === 'copy') {
       await tryApi(async () => {
         const { command } = await api(`/sessions/${id}/takeover`);
@@ -178,6 +181,7 @@ export function taskMenu(id, e) {
     <div class="menu task" style="top:${e.clientY}px;left:${e.clientX}px">
       ${S.open.has(id) ? `<button data-a="collapse">${icon('chevron')}Collapse${keyHint('O')}</button>` : `<button data-a="open">${icon('chevron')}Open${keyHint('O')}</button>`}
       <button data-a="rename">${icon('pen')}Rename${keyHint('M')}</button>
+      <button data-a="copy-id">${icon('copy')}Copy task ID</button>
       <button data-a="rerun">${icon('rerun')}Rerun…${keyHint('⇧R')}</button>
       ${shippable(s) ? `<button data-a="ship">${icon('send')}${shipLabel(s)}${keyHint('S')}</button>` : ''}
       ${s.pr?.state === 'OPEN' ? `<button data-a="merge">${icon('check')}Merge PR #${s.pr.number}…</button>` : ''}
@@ -193,6 +197,7 @@ export function taskMenu(id, e) {
     if (a === 'open') expand(id);
     if (a === 'collapse') collapse(id);
     if (a === 'rename') rename(id);
+    if (a === 'copy-id') copyTaskId(id);
     if (a === 'rerun') rerun(id);
     if (a === 'ship') shipDialog(id);
     if (a === 'merge') mergePr(id);
@@ -229,7 +234,7 @@ export async function rerun(id) {
   const models = S.agents.find((x) => x.id === agent)?.models || [];
   let model = agent === s.agent && models.some((m) => m.id === s.model) ? s.model : savedModel(agent);
   let effort = agent === s.agent && effortsFor(agent, model).includes(s.effort) ? s.effort : savedEffort(agent, model);
-  let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || 'edits';
+  let mode = MODES.some((m) => m.id === s.mode) ? s.mode : S.config.defaults.mode || DEFAULT_MODE.id;
   const files = first.attachments || [];
 
   const node = el(`
@@ -249,12 +254,12 @@ export async function rerun(id) {
     </div>`);
   const close = overlay(node);
   $('.close', node).onclick = close;
-  const ta = $('.rr-prompt', node);
+  const ta = mentionBox($('.rr-prompt', node));
   ta.value = first.prompt;
   autosize(ta);
   const modeBtn = $('[data-a="mode"]', node);
   const paintMode = () => {
-    const m = MODES.find((x) => x.id === mode) || MODES[1];
+    const m = MODES.find((x) => x.id === mode) || DEFAULT_MODE;
     modeBtn.className = `mode-btn m-${m.id}`;
     modeBtn.innerHTML = `${icon(m.icon)}<span>${m.label}</span>`;
     modeBtn.title = m.hint;

package/web/js/features/automations.js

@@ -178,7 +178,7 @@ export function openAutomations({ tab = 'recipes', edit = null, host } = {}) {
         <div class="k-gh"><label><span>Check every</span><select name="every">${[2, 5, 15, 60].map((m) => `<option value="${m}" ${Number(d.every || 5) === m ? 'selected' : ''}>${m} min</option>`).join('')}</select></label></div>
         <label><span>Run</span><select name="recipeId"><option value="">This prompt</option>${recipes.map((r) => `<option value="${r.id}" ${r.id === d.recipeId ? 'selected' : ''}>Recipe: ${esc(r.name)}</option>`).join('')}</select></label>
         <label class="stack k-prompt"><span>Prompt <small class="muted k-vars"></small></span><textarea class="textarea mono" name="prompt" rows="6" spellcheck="false"></textarea></label>
-        <label><span>Mode</span><select name="mode">${modeOptions(d.mode || (d.kind === 'issues' ? 'plan' : 'edits'))}</select></label>
+        <label><span>Mode</span><select name="mode">${modeOptions(d.mode || (d.kind === 'issues' ? 'plan' : 'auto'))}</select></label>
         <div class="au-row"><span>Harness</span></div>
         <p class="au-warn" hidden>${icon('warn')}<span>Issue text comes from GitHub: anyone who can open and label issues can steer this agent. Plan mode only reads; Full auto runs shell commands without asking.</span></p>
         <div class="au-foot"><button type="button" class="ghost sm" data-act="cancel">Cancel</button><button class="primary sm">${d.id ? 'Save' : 'Create trigger'}</button></div>