wisp-agents 0.12.0 → 0.14.0

package/server/telemetry.js

@@ -5,6 +5,10 @@
 //
 // Off when any of: no API key, DO_NOT_TRACK=1, WISP_TELEMETRY=0, CI, or "telemetry": "off" in
 // settings. See the Telemetry section of the README.
+//
+// Feedback (thumbs on a result, /feedback, "Send feedback") is different: the user hands it to us
+// on purpose, so it goes out even with usage stats off. Only WISP_FEEDBACK=0 or no key stops it.
+// Offline, it waits in feedback-outbox.json and goes with the next feedback or the next start.
 
 import fs from 'node:fs';
 import os from 'node:os';
@@ -22,10 +26,16 @@ const TIMEOUT_MS = 3000;
 const VERSION = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf8')).version;
 const truthy = (v) => !!v && !/^(0|false|no|off)$/i.test(v);
 
+const falsy = (v) => /^(0|false|no|off)$/i.test(v || '');
+
 export function envDisabled(env = process.env) {
-  return !KEY || truthy(env.DO_NOT_TRACK) || /^(0|false|no|off)$/i.test(env.WISP_TELEMETRY || '') || truthy(env.CI);
+  return !KEY || truthy(env.DO_NOT_TRACK) || falsy(env.WISP_TELEMETRY) || truthy(env.CI);
 }
 
+export const feedbackAvailable = (env = process.env) => !!KEY && !falsy(env.WISP_FEEDBACK);
+const FEEDBACK_MAX = 4000;
+const OUTBOX_MAX = 100;
+
 const ROOT = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
 
 // Paths in messages and stacks would leak usernames and project names: wisp's own files keep
@@ -50,10 +60,12 @@ function frames(stack = '') {
 }
 
 export class Telemetry {
-  constructor(store, { shell = process.versions.electron ? 'electron' : 'browser' } = {}) {
+  constructor(store, { shell = process.versions.electron ? 'electron' : 'browser', post } = {}) {
     this.store = store;
     this.queue = [];
     this.pendingFile = path.join(store.home, 'telemetry-pending.json');
+    this.outboxFile = path.join(store.home, 'feedback-outbox.json');
+    if (post) this.post = post;
     this.common = {
       $lib: 'wisp',
       $process_person_profile: false, // anonymous events: no person profiles
@@ -68,6 +80,7 @@ export class Telemetry {
     this.timer = setInterval(() => this.flush(), FLUSH_MS);
     this.timer.unref();
     this.#sendPending();
+    this.#sendOutbox();
   }
 
   get enabled() {
@@ -93,17 +106,49 @@ export class Telemetry {
     });
   }
 
-  async flush() {
-    if (!this.queue.length) return;
-    const batch = this.queue.splice(0);
+  // Thumbs on a turn ('turn_rated') or a written note ('feedback'). Resolves true once PostHog has
+  // it; false means it's kept in the outbox and retried.
+  async feedback(event, props = {}) {
+    if (!feedbackAvailable()) return false;
+    // With usage stats off, a fresh id per message so feedback can't be tied to anything else.
+    const id = (this.enabled && this.store.config.telemetryId) || randomUUID();
+    const text = props.text ? String(props.text).split(os.homedir()).join('~').slice(0, FEEDBACK_MAX) : undefined;
+    const ev = { event, timestamp: new Date().toISOString(), properties: { ...this.common, ...props, text, distinct_id: id } };
+    const batch = [...this.#outbox(), ev].slice(-OUTBOX_MAX);
+    const ok = await this.post(batch);
+    try {
+      if (ok) fs.rmSync(this.outboxFile, { force: true });
+      else fs.writeFileSync(this.outboxFile, JSON.stringify(batch));
+    } catch {}
+    return ok;
+  }
+
+  #outbox() {
+    try {
+      const list = JSON.parse(fs.readFileSync(this.outboxFile, 'utf8'));
+      return Array.isArray(list) ? list : [];
+    } catch {
+      return [];
+    }
+  }
+
+  async post(batch) {
     try {
-      await fetch(`${HOST}/batch/`, {
+      const res = await fetch(`${HOST}/batch/`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({ api_key: KEY, batch }),
         signal: AbortSignal.timeout(TIMEOUT_MS),
       });
-    } catch {} // offline or blocked: drop it, telemetry must never get in the way
+      return res.ok;
+    } catch {
+      return false;
+    }
+  }
+
+  async flush() {
+    if (!this.queue.length) return;
+    await this.post(this.queue.splice(0)); // offline or blocked: drop it, telemetry must never get in the way
   }
 
   // Shutdown and crashes leave no time for a request: write what's queued to disk (sync) and
@@ -122,6 +167,12 @@ export class Telemetry {
     this.persist();
   }
 
+  #sendOutbox() {
+    const batch = this.#outbox();
+    if (!batch.length || !feedbackAvailable()) return;
+    this.post(batch).then((ok) => ok && fs.rmSync(this.outboxFile, { force: true }));
+  }
+
   #sendPending() {
     try {
       const pending = JSON.parse(fs.readFileSync(this.pendingFile, 'utf8'));

package/web/css/app.css

@@ -305,7 +305,8 @@ body:has(.launcher.docked:is(:focus-within, :has(.open))) .to-top { display: non
 .l-bar { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
 .l-bar > :not(.runners) { flex: none; }
 .l-bar .grow { flex: 1; }
-/* harness pill(s): "vs" rides on the end of it; on, the second harness joins the same pill */
+/* harness pill(s): "vs" rides on the end of it; each harness added joins the same pill behind a
+   "vs" of its own (hover: ×, removes it), and the end button turns into a + for the next one */
 .runners {
   display: inline-flex; align-items: stretch; min-width: 0; height: 30px; border-radius: 9px;
   border: 1px solid var(--line); background: var(--surface); transition: border-color 0.15s;
@@ -318,6 +319,12 @@ body:has(.launcher.docked:is(:focus-within, :has(.open))) .to-top { display: non
 .runners .rb-h { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .runners .rb-m { flex: 0 100 auto; min-width: 0; }
 .runners.cmp .rb-e, .l-bar:has(.runners.cmp) #wtBtn span { display: none; }
+/* three or four harnesses: logos only (each button's tooltip names it), the bar's other labels fold too */
+.runners.many .runner-btn { flex: none; padding-inline: 6px; }
+.runners.many :is(.rb-h, .rb-m) { display: none; }
+.runners.many .rb-logo { margin-right: 3px; }
+.runners.many .runner-btn .chev { margin-left: 0; }
+.l-bar:has(.runners.many) :is(.mode-btn span, .team-btn .tb-label) { display: none; }
 /* two harnesses on a narrow bar: drop the model names, then the harness names (logos stay) */
 @container launcher (max-width: 640px) { .runners.cmp .rb-m { display: none; } }
 @container launcher (max-width: 520px) {
@@ -326,20 +333,29 @@ body:has(.launcher.docked:is(:focus-within, :has(.open))) .to-top { display: non
   .runners.cmp .runner-btn .chev { margin-left: 0; }
   .runners.cmp .rb-logo { margin-right: 4px; }
 }
+@container launcher (max-width: 600px) {
+  .runners.many .runner-btn .chev { display: none; }
+  .runners.many .vs-del { width: 18px; }
+}
 .vs-btn {
   position: relative; flex: none; display: grid; place-items: center; width: 30px;
   font: 600 11px var(--mono); letter-spacing: 0.02em; color: var(--faint); transition: color 0.15s, background 0.15s;
 }
-.vs-btn::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
+.vs-btn[hidden] { display: none; }
 .vs-btn:hover { color: var(--accent-ink); }
 .vs-btn .i { display: none; width: 13px; height: 13px; }
 .vs-btn:focus-visible { outline: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--accent); }
+.vs-add::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
 .runners.cmp { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
-.runners.cmp .vs-btn { width: 26px; color: var(--accent-ink); }
-.runners.cmp .vs-btn::before { display: none; }
-.runners.cmp .vs-btn:hover { color: var(--ink); }
-.runners.cmp .vs-btn:is(:hover, :focus-visible) span { display: none; }
-.runners.cmp .vs-btn:is(:hover, :focus-visible) .i { display: block; }
+.runners.cmp .vs-add { width: 26px; }
+.runners.cmp .vs-add span { display: none; }
+.runners.cmp .vs-add .i { display: block; width: 12px; height: 12px; }
+.vs-del { width: 24px; color: var(--accent-ink); }
+.runners.many .vs-del { width: 20px; }
+.vs-del:hover { color: var(--bad); }
+.vs-del:not(.fresh):is(:hover, :focus-visible) span { display: none; }
+.vs-del:not(.fresh):is(:hover, :focus-visible) .i { display: block; }
+.vs-del.fresh { cursor: default; }
 /* permission mode: icon-only on the default, labelled otherwise */
 .mode-btn {
   display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 9px; border-radius: 9px;
@@ -1070,6 +1086,28 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .trail-bar .link { font-size: 12px; }
 .trail-body { padding: 8px 0 0; animation: rise 0.4s var(--ease); }
 .trail-body .presentation { gap: 10px; }
+/* Thumbs: faint until the trail is hovered or the turn is rated, so a finished turn reads the same. */
+.rate { display: inline-flex; gap: 1px; margin-left: -6px; opacity: 0.5; transition: opacity 0.15s; }
+.turn:hover .rate, .rate.rated, .rate:focus-within { opacity: 1; }
+.rate-btn { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; color: var(--faint); transition: color 0.15s, background 0.15s; }
+.rate-btn .i { width: 13px; height: 13px; }
+.rate-btn:hover { color: var(--ink); background: var(--bg-2); }
+.rate-btn[data-rate="up"].on { color: var(--good); }
+.rate-btn[data-rate="down"].on { color: var(--bad); }
+.rate-btn.on .i { fill: color-mix(in srgb, currentColor 18%, transparent); }
+.rate.thanked [data-rate="up"].on .i { animation: thumb-pop 0.45s var(--ease); }
+@keyframes thumb-pop { 40% { transform: scale(1.35) rotate(-12deg); } }
+.why { display: grid; gap: 6px; }
+.why .textarea { min-height: 0; resize: none; }
+.why-foot { display: flex; align-items: center; gap: 10px; }
+.why-foot .muted { margin-right: auto; }
+.why-foot .primary { height: 24px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
+.fb-modal { width: min(520px, 100%); }
+.fb-rate { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
+.fb-rate span { margin-right: 6px; }
+.fb-rate .rate-btn { width: 30px; height: 28px; }
+.fb-rate .rate-btn .i { width: 16px; height: 16px; }
+.fb-modal .ship-foot { margin-top: 12px; }
 
 /* ---------- per-item composer ---------- */
 .composer {
@@ -1087,6 +1125,12 @@ pre.code { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background
 .cq .att-x:hover { color: var(--bad); }
 .cq-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
 .c-hint { flex: 1; font-size: 11.5px; color: var(--faint); }
+.c-bar .mode-btn { height: 30px; min-width: 30px; padding: 0 8px; }
+.c-bar .mode-btn.changed { background: var(--bg-2); }
+.t-mode { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; font: 500 11px var(--sans); color: var(--muted); border: 1px solid var(--line); }
+.t-mode .i { width: 12px; height: 12px; }
+.t-mode.m-plan { color: var(--accent-ink); }
+.t-mode.m-auto { color: var(--warn); }
 .send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); transition: opacity 0.15s; }
 .send:hover { opacity: 0.86; }
 .send:disabled { opacity: 0.5; }
@@ -1693,6 +1737,8 @@ body.electron.mac .topbar { padding-left: 88px; }
 .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; }
 
 /* ---------- subagents ---------- */
 /* logo stack: the lead in front, its subagents tucked behind; they fan out on hover */
@@ -1823,3 +1869,33 @@ body.electron.mac .topbar { padding-left: 88px; }
 .sub-task p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; }
 .sub-wait { margin: 0; font-size: 13px; }
 @container (max-width: 520px) { .sub-files, .sub-dur, .sub-model { display: none; } }
+
+/* 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/index.html

@@ -56,6 +56,8 @@
       <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-thumb-up" viewBox="0 0 24 24"><path d="M7.5 10.5v9H4.8a.8.8 0 01-.8-.8v-7.4a.8.8 0 01.8-.8h2.7zm0 0l3.6-6.3a1.7 1.7 0 013.1 1.2l-.6 3.6h4.6a2 2 0 012 2.3l-1.1 6.4a2.4 2.4 0 01-2.4 2.1H7.5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></symbol>
+      <symbol id="i-thumb-down" viewBox="0 0 24 24"><path d="M7.5 13.5v-9H4.8a.8.8 0 00-.8.8v7.4a.8.8 0 00.8.8h2.7zm0 0l3.6 6.3a1.7 1.7 0 003.1-1.2l-.6-3.6h4.6a2 2 0 002-2.3l-1.1-6.4a2.4 2.4 0 00-2.4-2.1H7.5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="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>