@worca/app 1.5.0 → 1.6.0-rc.1

package/ui/public/chat-settings-view.mjs

@@ -2,7 +2,8 @@
 // Pure DOM renderers for the Settings "Chat notifications" card
 // (chat-connectivity-design.md §4.8). Same contract as plugins-view.mjs:
 // detached elements, no fetch, no listeners — app.js owns I/O and mounting;
-// node:test drives these via jsdom.
+// node:test drives these via jsdom. (One exception: the Ask web fields keep their own
+// dirty flag with input/change listeners on their detached wrapper — no I/O.)
 
 function h(doc, tag, cls, text) {
   const n = doc.createElement(tag);
@@ -115,3 +116,53 @@ export function collectScriptToolsToggle(root) {
   const cb = root && typeof root.querySelector === 'function' ? root.querySelector('input.ask-script-tools') : null;
   return { scriptTools: cb ? cb.checked : true };
 }
+
+/** Ask Worca → Web access (docs/guardrails.md "Web access"): off by default; the allowlist is enforced by worca's server. */
+export function renderAskWebFields({ askWeb } = {}, { doc = globalThis.document } = {}) {
+  const w = askWeb || { enabled: false, anyHost: false, allowedDomains: [], search: null };
+  const wrap = h(doc, 'div', 'ask-web');
+  wrap.append(h(doc, 'div', 'label-row', 'Web access'));
+  const row = h(doc, 'label', 'check-row'); row.setAttribute('for', 'askWebEnabled');
+  const cb = h(doc, 'input'); cb.type = 'checkbox'; cb.id = 'askWebEnabled'; cb.checked = w.enabled === true;
+  row.append(cb, doc.createTextNode(' Let Ask Worca read web pages'));
+  const anyRow = h(doc, 'label', 'check-row'); anyRow.setAttribute('for', 'askWebAnyHost');
+  const any = h(doc, 'input'); any.type = 'checkbox'; any.id = 'askWebAnyHost'; any.checked = w.anyHost === true;
+  anyRow.append(any, doc.createTextNode(' Any site, without asking'));
+  const anyHint = h(doc, 'small', 'hint', 'Risky: a web page or a file Ask reads can then make it send data to any site in a URL. Leave off to approve each new site from the chat.');
+  const domains = h(doc, 'textarea', 'input'); domains.id = 'askWebDomains'; domains.rows = 4;
+  domains.placeholder = 'docs.python.org\n*.mozilla.org'; domains.value = (w.allowedDomains || []).join('\n');
+  const dHint = h(doc, 'small', 'hint', 'Sites Ask may read without asking. One host per line: example.com, or *.example.com for its subdomains. For any other site Ask shows a card in the chat: allow it for that chat, always (it is added here), or deny. https only. A site sees every URL Ask requests from it, so only allow sites you trust.');
+  const field = (id, label, placeholder, value) => {
+    const box = h(doc, 'div', 'field');
+    const l = h(doc, 'label', null, label); l.setAttribute('for', id);
+    const i = h(doc, 'input', 'input'); i.id = id; i.placeholder = placeholder; i.value = value || '';
+    box.append(l, i); return box;
+  };
+  const s = w.search || {};
+  // Dirty flag: the card posts askWeb only after the user touched a web field, so saving the other
+  // Ask limits never rewrites the stored web settings.
+  const markDirty = () => { wrap.dataset.dirty = '1'; };
+  wrap.addEventListener('input', markDirty);
+  wrap.addEventListener('change', markDirty);
+  wrap.append(row, anyRow, anyHint, domains, dHint,
+    field('askWebSearchUrl', 'Search endpoint (optional)', 'https://api.search.brave.com/res/v1/web/search?q={query}', s.url),
+    field('askWebSearchKey', 'Search key variable', '${BRAVE_API_KEY}', s.key),
+    field('askWebSearchHeader', 'Key header', 'X-Subscription-Token', s.keyHeader),
+    field('askWebSearchPrefix', 'Key prefix', 'Bearer ', s.keyPrefix),
+    h(doc, 'small', 'hint', 'Any GET search API that returns JSON. Use {query} (and optionally {key}) in the URL; the key is always a ${VAR} read from worca\'s environment.'));
+  return wrap;
+}
+
+/** The askWeb POST value, or null when the user did not touch the web fields (nothing to send). */
+export function collectAskWebFields(root) {
+  if (root.querySelector('.ask-web')?.dataset.dirty !== '1') return null;
+  const q = (id) => root.querySelector(`#${id}`);
+  const val = (id) => (q(id) ? q(id).value.trim() : '');
+  const url = val('askWebSearchUrl');
+  return {
+    enabled: !!q('askWebEnabled')?.checked,
+    anyHost: !!q('askWebAnyHost')?.checked,
+    allowedDomains: (q('askWebDomains')?.value || '').split('\n').map((x) => x.trim()).filter(Boolean),
+    search: url ? { url, key: val('askWebSearchKey'), keyHeader: val('askWebSearchHeader'), keyPrefix: q('askWebSearchPrefix') ? q('askWebSearchPrefix').value : '' } : null,
+  };
+}

package/ui/public/credential-badges.mjs

@@ -0,0 +1,63 @@
+// ui/public/credential-badges.mjs
+// "Your key / No key" badges on model pickers (credential broker, docs/credential-broker.md).
+// One cache of GET /api/credentials — which slot each catalog model spends from, and the
+// signed-in person's key state per slot — that every picker asks for a model's badge.
+// Nothing here without a broker: credentialBadge() returns null and no picker changes.
+
+let data = null;
+let pending = null;
+const listeners = new Set();
+
+/** Replace the cached payload (app.js after a fetch; tests directly). */
+export function setCredentialData(d) {
+  data = d && d.enabled ? d : null;
+  for (const fn of listeners) { try { fn(); } catch { /* a listener must not break the rest */ } }
+}
+
+/** Repaint hook: called whenever the cached payload changes. */
+export function onCredentialsChange(fn) { listeners.add(fn); return () => listeners.delete(fn); }
+
+/** Fetch /api/credentials once at a time; never throws (no broker or no answer = no badges). */
+export function loadCredentials(fetchImpl = globalThis.fetch) {
+  if (pending) return pending;
+  pending = (async () => {
+    try {
+      const r = await fetchImpl('/api/credentials');
+      setCredentialData(r.ok ? await r.json() : null);
+    } catch { setCredentialData(null); } finally { pending = null; }
+    return data;
+  })();
+  return pending;
+}
+
+/** The key page URL, when the broker has one. */
+export function keyPageUrl() { return data?.keyPage || null; }
+
+/**
+ * The badge for one model, or null (no broker, unknown model, nobody signed in).
+ * @returns {{text:string, tone:'green'|'blue'|'red', title:string, missing:boolean}|null}
+ */
+export function credentialBadge(modelId, d = data) {
+  if (!d || !d.enabled || !d.models) return null;
+  const m = d.models[modelId];
+  if (!m) return null;
+  if (m.keyless) return { text: 'local', tone: 'blue', title: 'A local model: no key needed.', missing: false };
+  if (m.error) return { text: 'no route', tone: 'red', title: m.error, missing: true };
+  if (d.mode === 'multi' && !d.person) return null;
+  const s = (d.slots || []).find((x) => x.id === m.slot);
+  const label = s?.label || m.slot;
+  const where = d.keyPage ? ' on the key page' : ' to the credential broker';
+  switch (s?.state) {
+    case 'set': return { text: 'your key', tone: 'green', title: `Runs with your ${label}.`, missing: false };
+    case 'operator': return { text: 'team key', tone: 'blue', title: `Runs with the team's ${label}.`, missing: false };
+    case 'keyless': return { text: 'local', tone: 'blue', title: 'No key needed.', missing: false };
+    case 'invalid': return { text: 'key rejected', tone: 'red', title: `The provider rejected your ${label}: replace it${where}.`, missing: true };
+    default: return { text: 'no key', tone: 'red', title: `Add your ${label}${where} to use this model.`, missing: true };
+  }
+}
+
+/** A short suffix for a plain <option> label (a select can't hold a styled badge). */
+export function credentialSuffix(modelId, d = data) {
+  const b = credentialBadge(modelId, d);
+  return b && b.missing ? ` · ${b.text}` : '';
+}

package/ui/public/credentials-view.mjs

@@ -0,0 +1,57 @@
+// ui/public/credentials-view.mjs
+// Pure DOM renderer for the Settings "My model credentials" card
+// (docs/credential-broker.md). Same contract as chat-settings-view.mjs: a detached
+// element, no fetch, no listeners — app.js owns I/O and mounting; node:test drives
+// it via jsdom. Status only: which of the signed-in person's credential slots hold a
+// key, as the credential broker reports it (GET /api/credentials). Keys are entered
+// on the broker's own key page, never here.
+
+function h(doc, tag, cls, text) {
+  const n = doc.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+export const CREDENTIAL_STATE_TEXT = Object.freeze({
+  set: 'Set', missing: 'Not set', invalid: 'Rejected', keyless: 'No key needed', operator: 'Provided by the team',
+});
+const STATE_TONE = Object.freeze({ set: 'green', missing: 'slate', invalid: 'red', keyless: 'blue', operator: 'blue' });
+
+/**
+ * @param {{enabled:boolean, mode?:string, keyPage?:string|null, person?:string|null, slots?:object[], error?:string}} data
+ * @param {Document} [doc]
+ * @returns {HTMLElement}
+ */
+export function renderCredentials(data, doc = document) {
+  const box = h(doc, 'div', 'cred-view');
+  if (data?.error) {
+    box.append(h(doc, 'p', 'hint err', `The credential broker didn't answer: ${data.error}`));
+    return box;
+  }
+  if (data?.mode === 'single') {
+    box.append(h(doc, 'p', 'hint', 'Model keys are held by the credential broker. To change them, update the broker\'s secrets and restart it.'));
+  } else if (!data?.person) {
+    box.append(h(doc, 'p', 'hint', 'Sign in through your team\'s sign-in page to see your credentials.'));
+    return box;
+  }
+  const list = h(doc, 'ul', 'cred-list');
+  for (const s of data.slots || []) {
+    const text = s.state === 'set' && s.suffix ? `Set ••••${s.suffix}` : (CREDENTIAL_STATE_TEXT[s.state] || s.state);
+    const row = h(doc, 'li', 'cred-row');
+    row.append(h(doc, 'span', 'cred-name', s.label || s.id), h(doc, 'span', `cred-chip tone-${STATE_TONE[s.state] || 'slate'}`, text));
+    list.append(row);
+  }
+  box.append(list);
+  if (data.mode === 'multi' && data.keyPage) {
+    const missing = (data.slots || []).some((s) => s.state === 'missing' || s.state === 'invalid');
+    const actions = h(doc, 'div', 'cred-actions');
+    const a = h(doc, 'a', `btn ${missing ? 'btn-primary' : 'btn-ghost'} btn-mini`, 'Manage keys');
+    a.href = data.keyPage;
+    a.target = '_blank';
+    a.rel = 'noopener';
+    actions.append(a, h(doc, 'small', 'hint', 'Opens the key page in a new tab. Reopen Settings afterwards to see the change.'));
+    box.append(actions);
+  }
+  return box;
+}

package/ui/public/index.html

@@ -408,6 +408,8 @@
 
                 <!-- Actions -->
                 <div class="hint err" id="newBlockedNote" hidden></div>
+                <!-- OpenRouter free requests left today vs what a run here takes (openrouter-free-view.mjs). -->
+                <div class="hint warn" id="newFreeNote" hidden></div>
                 <div class="actions" style="justify-content:flex-end">
                   <!-- A time picked BEFORE the task (Schedules › Schedule a run, or Change… here):
                        it waits on the form and Start run becomes Schedule. -->
@@ -988,7 +990,11 @@
                 <input id="wiz-name" class="input" type="text" placeholder="e.g. IoT SP Platform" spellcheck="false" />
               </div>
               <div class="field">
-                <label>Projects <span class="opt">(select 2 or more)</span></label>
+                <div class="wiz-proj-head">
+                  <label class="label">Projects <span class="opt">(select 2 or more)</span></label>
+                  <!-- Outside #wiz-projects so every checkbox in the list stays a project. -->
+                  <label class="wiz-select-all"><input type="checkbox" id="wiz-select-all" /> Select all</label>
+                </div>
                 <div class="wiz-proj-list" id="wiz-projects"></div>
                 <small class="hint" id="wiz-step1-hint">Onboard at least two projects to create a workspace.</small>
               </div>
@@ -1377,6 +1383,20 @@
               <small class="hint" id="themeMsg"></small>
             </section>
 
+            <!-- Credential broker (docs/credential-broker.md): shown only when worca runs with one. -->
+            <section class="card settings-card" id="credentials-card" data-min-level="simple" hidden>
+              <div class="card-head">
+                <div class="label-row">
+                  <h2>My model credentials</h2>
+                  <button type="button" class="info-tip" aria-label="About model credentials">i<span class="tip-content hidden">
+                    Model keys are held by the credential broker, not by Worca. Agents never see them.
+                    Each person uses their own keys, and what a run costs is charged to whoever started it.
+                  </span></button>
+                </div>
+              </div>
+              <div id="credentialsHost"></div>
+            </section>
+
             <!-- Interface mode (docs/ui-levels.md): the same setting as the sidebar item, same dialog. -->
             <section class="card settings-card" id="mode-settings-card" data-min-level="simple">
               <div class="card-head">
@@ -1506,24 +1526,27 @@
                 <div class="label-row">
                   <label for="askMaxTurns">Turn limit</label>
                   <button type="button" class="info-tip" aria-label="About Turn limit">i<span class="tip-content hidden">
-                    Maximum assistant/tool turns one chat message may use (1&ndash;500). Leave empty to restore the default of 40.
+                    Maximum assistant/tool turns one chat message may use (1&ndash;500). Leave empty to restore the default of 400.
                   </span></button>
                 </div>
-                <input id="askMaxTurns" class="input" type="number" min="1" max="500" step="1" inputmode="numeric" placeholder="40" autocomplete="off" />
+                <input id="askMaxTurns" class="input" type="number" min="1" max="500" step="1" inputmode="numeric" placeholder="400" autocomplete="off" />
               </div>
               <div class="field">
                 <div class="label-row">
                   <label for="askMaxBudgetUsd">Per-turn cost cap (USD)</label>
                   <button type="button" class="info-tip" aria-label="About Per-turn cost cap">i<span class="tip-content hidden">
-                    Stop a chat turn when its estimated cost reaches this amount (0.1&ndash;100). Leave empty to restore the default of $2, or tick No cap to disable the guard.
+                    There is no cap by default. Untick No cap and enter an amount (0.1&ndash;100) to turn the guard on: a chat turn then stops when its estimated cost reaches it. Leaving the amount empty, or pressing Use defaults, means no cap.
                   </span></button>
                 </div>
-                <input id="askMaxBudgetUsd" class="input" type="number" min="0.1" max="100" step="0.1" inputmode="decimal" placeholder="2" autocomplete="off" />
+                <input id="askMaxBudgetUsd" class="input" type="number" min="0.1" max="100" step="0.1" inputmode="decimal" placeholder="No cap" autocomplete="off" />
                 <label class="check-row" for="askNoCap"><input id="askNoCap" type="checkbox" /> No cap</label>
               </div>
               <!-- Scripts workbench W20: the chat's save_script / test_script switch. Body
                    rendered by chat-settings-view.mjs; saved with this card's Save button. -->
               <div class="field" id="ask-script-tools-host"></div>
+              <!-- Ask web access (off by default): rendered by chat-settings-view.mjs; saved with this
+                   card's Save button, and only when one of its fields was touched. -->
+              <div class="field" id="ask-web-host"></div>
               <div class="add-project-actions" style="margin-top:14px">
                 <button type="button" id="askLimitsReset" class="btn btn-ghost btn-mini">Use defaults</button>
                 <button type="button" id="askLimitsSave" class="btn btn-primary btn-mini">Save</button>
@@ -2235,7 +2258,8 @@
     </div>
 
     <!-- Connect Claude Code: the one checklist step with no control to ring. The
-         tick is derived (the CLI resolves on PATH); "Check again" refetches it. -->
+         tick is derived (the CLI resolves on PATH and is not signed out); "Check
+         again" refetches it with a fresh sign-in check. -->
     <div id="claude-setup-modal" class="viewer-modal hidden" role="dialog" aria-modal="true" aria-labelledby="claude-setup-title">
       <div class="card ob-claude">
         <div class="card-head">
@@ -2245,6 +2269,9 @@
         <p class="ob-claude-lead">Worca drives the <strong>Claude Code</strong> CLI. Real runs need it on your <code>PATH</code>; mock runs need nothing.</p>
         <pre class="ob-claude-cmd"><code>npm install -g @anthropic-ai/claude-code</code></pre>
         <p class="ob-claude-note">On native Windows the <a href="https://docs.anthropic.com/en/docs/claude-code/setup" target="_blank" rel="noopener noreferrer">native installer</a> works too. A binary elsewhere: set <code>WORCA_CLAUDE_BIN</code> to its full path and restart the UI.</p>
+        <p class="ob-claude-lead ob-claude-step"><strong>Then sign it in.</strong> Start it once in a terminal and type <code>/login</code>:</p>
+        <pre class="ob-claude-cmd"><code>claude</code></pre>
+        <p class="ob-claude-note">Signing in to the Claude desktop app does not carry over — the CLI keeps its own sign-in.</p>
         <div class="ob-claude-status" id="claude-setup-status" aria-live="polite"></div>
         <div class="stop-actions">
           <button type="button" id="claude-setup-check" class="btn btn-primary btn-mini">Check again</button>

package/ui/public/models-view.mjs

@@ -8,6 +8,7 @@
 // delegated listener on the list container.
 
 import { bridgedBadge, needsSignInPill, degradationLine, renderConnectionSection, collectConnection, applyConnectionMode } from './bridge-view.mjs';
+import { credentialBadge } from './credential-badges.mjs';
 
 function h(doc, tag, cls, text) {
   const n = doc.createElement(tag);
@@ -17,6 +18,15 @@ function h(doc, tag, cls, text) {
 }
 
 /** "medium · high" or "all efforts" (the full set carries no signal). */
+/** Credential broker: "your key / no key" for the signed-in person, after a model's name. */
+function keyBadge(parent, m, doc) {
+  const b = credentialBadge(m.id);
+  if (!b) return;
+  const el = h(doc, 'span', `badge ${b.tone} mv-key-badge`, b.text);
+  el.title = b.title;
+  parent.appendChild(el);
+}
+
 export function effortsSummary(efforts, allEfforts) {
   const list = Array.isArray(efforts) ? efforts : [];
   if (!list.length || (allEfforts && list.length === allEfforts.length)) return 'all efforts';
@@ -112,7 +122,10 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], poli
     const btn = h(doc, 'button', 'mv-sec-toggle');
     btn.type = 'button';
     btn.dataset.section = key;
-    btn.appendChild(h(doc, 'span', 'mv-sec-caret', '▾'));
+    // The shared disclosure chevron (style.css .adv-chev), turned down while the group is open.
+    const caret = h(doc, 'span', 'mv-sec-caret adv-chev');
+    caret.setAttribute('aria-hidden', 'true');
+    btn.appendChild(caret);
     btn.appendChild(h(doc, 'h3', 'mv-section-title', title));
     btn.appendChild(h(doc, 'span', 'mv-sec-count', ''));
     head.appendChild(btn);
@@ -185,6 +198,7 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], poli
     const body = h(doc, 'div', 'mv-body');
     const head = h(doc, 'div', 'mv-head');
     head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
+    keyBadge(head, m, doc);
     if (predefLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadow', 'overrides built-in'));
     else if (pluginLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadow', 'overrides plugin'));
     const rb = routedBadge(m);
@@ -238,6 +252,7 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], poli
       const body = h(doc, 'div', 'mv-body');
       const head = h(doc, 'div', 'mv-head');
       head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
+    keyBadge(head, m, doc);
       head.appendChild(h(doc, 'span', 'badge waiting mv-origin', 'project (legacy)'));
       body.appendChild(head);
       body.appendChild(h(doc, 'small', 'mv-summary hint', m.id));
@@ -262,6 +277,7 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], poli
       const body = h(doc, 'div', 'mv-body');
       const head = h(doc, 'div', 'mv-head');
       head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
+    keyBadge(head, m, doc);
       head.appendChild(h(doc, 'span', 'badge waiting mv-origin', `plugin: ${m.plugin}`));
       if (globalLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadowed', 'overridden by your copy'));
       const prb = routedBadge(m);
@@ -311,6 +327,7 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], poli
       const body = h(doc, 'div', 'mv-body');
       const head = h(doc, 'div', 'mv-head');
       head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
+    keyBadge(head, m, doc);
       const badge = h(doc, 'span', 'badge blue mv-origin', 'policy');
       badge.title = `Team policy on ${m.home}`;
       head.appendChild(badge);
@@ -339,6 +356,7 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], poli
     const row = h(doc, 'div', 'mv-builtin');
     row.dataset.id = m.id;
     row.appendChild(h(doc, 'b', 'mv-name', m.label));
+    keyBadge(row, m, doc);
     if (globalLc.has(m.id.toLowerCase()) || pluginLc.has(m.id.toLowerCase())) {
       row.appendChild(h(doc, 'span', 'badge violet mv-shadowed', 'overridden'));
     }

package/ui/public/openrouter-free-view.mjs

@@ -0,0 +1,118 @@
+// ui/public/openrouter-free-view.mjs
+// OpenRouter's daily allowance of `:free` requests (src/core/openrouter-free.mjs), where it
+// comes up: the sidebar line under the spend block, a run's cost pill, the new-run form's
+// warning and the Providers card. Pure helpers plus one renderer; app.js fetches
+// /api/openrouter/free-daily and mounts the result.
+
+/** Below this share of the day's allowance the line turns amber. */
+export const FREE_LOW_AT = 0.1;
+/** A run's typical free requests when this install has no history yet (a small pipeline run). */
+export const FREE_RUN_DEFAULT = 90;
+
+/** "3h 12m" / "12m" / "under a minute". Pure. */
+export function untilText(ms) {
+  const min = Math.floor(Math.max(0, ms) / 60_000);
+  if (min < 1) return 'under a minute';
+  const h = Math.floor(min / 60);
+  return h ? `${h}h ${min % 60}m` : `${min}m`;
+}
+
+/** "00:00 UTC". Pure. */
+export function utcClock(iso) {
+  const t = Date.parse(iso || '');
+  return Number.isFinite(t) ? `${new Date(t).toISOString().slice(11, 16)} UTC` : '';
+}
+
+/** 'ok' | 'low' | 'out' for a known status. Pure. */
+export function freeLevel(s) {
+  if (!s || !s.known || !(s.limit > 0)) return 'ok';
+  if (s.remaining <= 0) return 'out';
+  return s.remaining / s.limit < FREE_LOW_AT ? 'low' : 'ok';
+}
+
+/** The requests a run spent on OpenRouter `:free` models (its steps' bridgeFreeCalls). Pure. */
+export function runFreeRequests(steps) {
+  return (Array.isArray(steps) ? steps : []).reduce((n, s) => n + (Number.isFinite(s?.bridgeFreeCalls) ? s.bridgeFreeCalls : 0), 0);
+}
+
+/** " · 87 free requests" for a cost pill, '' when the run used none. Pure. */
+export function freeRequestsSuffix(steps) {
+  const n = runFreeRequests(steps);
+  return n > 0 ? ` · ${n} free request${n === 1 ? '' : 's'}` : '';
+}
+
+/**
+ * What a run usually takes on this install: the median of the last `max` finished runs that
+ * used free requests, else FREE_RUN_DEFAULT. Pure.
+ */
+export function typicalFreeRun(runs, { max = 10 } = {}) {
+  const done = new Set(['completed', 'failed', 'stopped']);
+  const counts = (Array.isArray(runs) ? runs : [])
+    .filter((r) => r && done.has(r.status))
+    .map((r) => runFreeRequests(r.steps))
+    .filter((n) => n > 0)
+    .slice(0, max)
+    .sort((a, b) => a - b);
+  if (!counts.length) return FREE_RUN_DEFAULT;
+  const mid = Math.floor(counts.length / 2);
+  return counts.length % 2 ? counts[mid] : Math.round((counts[mid - 1] + counts[mid]) / 2);
+}
+
+/**
+ * The new-run form's warning when a chosen model is `:free` and fewer requests are left than a
+ * run usually takes; null otherwise. Pure.
+ */
+export function newRunFreeWarning(s, { typical = FREE_RUN_DEFAULT, usesFree = false, now = Date.now() } = {}) {
+  if (!usesFree || !s || !s.known || s.remaining >= typical) return null;
+  const reset = Date.parse(s.resetAt || '');
+  const when = Number.isFinite(reset) ? ` (resets ${utcClock(s.resetAt)}, in ${untilText(reset - now)})` : '';
+  if (s.remaining <= 0) return `No OpenRouter free requests left today${when}: a free model would pause at its first call. Pick a paid model, or start after the reset.`;
+  return `${s.remaining} OpenRouter free request${s.remaining === 1 ? '' : 's'} left today${when}; a run here usually needs ~${typical}.`;
+}
+
+/** The Providers card's line about the allowance, '' when unknown. Pure. */
+export function providerFreeLine(s, { now = Date.now() } = {}) {
+  if (!s || !s.known) return '';
+  const reset = Date.parse(s.resetAt || '');
+  const when = Number.isFinite(reset) ? ` · resets ${utcClock(s.resetAt)} (in ${untilText(reset - now)})` : '';
+  return `Free-model requests today: ${s.remaining} of ${s.limit} left${when}.`;
+}
+
+/**
+ * The sidebar block: "OpenRouter free · 941 / 1000 today", a meter of what is left, amber
+ * below 10%, red at 0, the reset on hover. null when there is nothing to show.
+ */
+export function renderFreeDaily(s, { doc = globalThis.document, now = Date.now() } = {}) {
+  if (!s || !s.enabled || !s.known) return null;
+  const level = freeLevel(s);
+  const btn = doc.createElement('button');
+  btn.type = 'button';
+  btn.className = `spend-ind free-ind${level === 'low' ? ' warn' : level === 'out' ? ' over' : ''}`;
+  const reset = Date.parse(s.resetAt || '');
+  btn.title = `OpenRouter free-model requests left today: ${s.remaining} of ${s.limit}` +
+    (Number.isFinite(reset) ? ` · resets ${utcClock(s.resetAt)}, in ${untilText(reset - now)}` : '') +
+    ' — every model call on a :free model is one request';
+  const row = doc.createElement('span');
+  row.className = 'spend-ind-row';
+  const label = doc.createElement('span');
+  label.className = 'spend-ind-label';
+  label.textContent = 'OpenRouter free today';
+  const amt = doc.createElement('span');
+  amt.className = 'spend-ind-amt mono';
+  amt.textContent = `${s.remaining} / ${s.limit}`;
+  row.append(label, amt);
+  const meter = doc.createElement('span');
+  meter.className = 'spend-ind-meter';
+  const fill = doc.createElement('span');
+  fill.className = 'spend-ind-meter-fill';
+  fill.style.width = `${s.limit > 0 ? Math.max(0, Math.min(100, (s.remaining / s.limit) * 100)) : 0}%`;
+  meter.appendChild(fill);
+  btn.append(row, meter);
+  if (level === 'out') {
+    const sub = doc.createElement('small');
+    sub.className = 'spend-ind-sub';
+    sub.textContent = 'used up · free models pause until the reset';
+    btn.appendChild(sub);
+  }
+  return btn;
+}

package/ui/public/stats-view.mjs

@@ -678,6 +678,57 @@ export function renderRunsChart(spec, { doc = globalThis.document, fmt = DEFAULT
 }
 
 /** Full Statistics body: KPI row + the two chart cards (or empty notes). */
+const SLOT_NAMES = { anthropic: 'Anthropic', openai: 'OpenAI', openrouter: 'OpenRouter', copilot: 'Copilot', local: 'Local' };
+const compactCount = (n) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n));
+
+/**
+ * "By person" (credential broker, docs/credential-broker.md): model spend per person in the
+ * stats window, as the broker metered it — every call is charged to whoever caused it.
+ * @param {{people?:object[], error?:string}} byPerson
+ */
+export function renderPeopleCard(byPerson, rangeLabel, { doc = globalThis.document, fmt = DEFAULT_FMT } = {}) {
+  const card = chartCard(doc, 'By person', rangeLabel);
+  card.classList.add('people-card');
+  if (byPerson?.error) {
+    card.appendChild(h(doc, 'p', 'hint err', `The credential broker didn't answer: ${byPerson.error}`));
+    return card;
+  }
+  const people = byPerson?.people || [];
+  if (!people.length) {
+    card.appendChild(h(doc, 'p', 'chart-empty hint', 'No model calls in this period.'));
+    return card;
+  }
+  const top = Math.max(...people.map((p) => p.usd), 0);
+  const total = people.reduce((a, p) => a + p.usd, 0);
+  const table = h(doc, 'table', 'people-table');
+  const head = h(doc, 'tr', null);
+  for (const t of ['Person', 'Spend', 'Requests', 'Tokens in / out', 'Providers']) head.appendChild(h(doc, 'th', null, t));
+  const thead = h(doc, 'thead', null); thead.appendChild(head); table.appendChild(thead);
+  const tbody = h(doc, 'tbody', null);
+  for (const p of people) {
+    const tr = h(doc, 'tr', null);
+    tr.appendChild(h(doc, 'td', 'people-name', p.person === 'local' ? 'No signed-in person' : p.person));
+    const spend = h(doc, 'td', 'people-spend');
+    const bar = h(doc, 'span', 'people-bar');
+    const fill = h(doc, 'span', 'people-bar-fill');
+    fill.style.width = `${top > 0 ? Math.max(2, Math.round((p.usd / top) * 100)) : 0}%`;
+    bar.appendChild(fill);
+    spend.appendChild(h(doc, 'span', 'people-usd', fmt.usd(p.usd)));
+    spend.appendChild(bar);
+    tr.appendChild(spend);
+    tr.appendChild(h(doc, 'td', 'num', compactCount(p.requests)));
+    tr.appendChild(h(doc, 'td', 'num', `${compactCount(p.inputTokens + (p.cacheReadTokens || 0))} / ${compactCount(p.outputTokens)}`));
+    tr.appendChild(h(doc, 'td', 'people-slots', [...new Set(p.slots.map((s) => `${SLOT_NAMES[s.slot] || s.slot}${s.plan === 'subscription' ? ' (subscription)' : ''}`))].join(', ')));
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+  const scroll = h(doc, 'div', 'people-scroll');
+  scroll.appendChild(table);
+  card.appendChild(scroll);
+  card.appendChild(h(doc, 'small', 'hint', `${fmt.usd(total)} in total, metered by the credential broker. Each call is charged to the person whose action caused it.`));
+  return card;
+}
+
 export function renderStatsBody(model, opts = {}) {
   const { doc = globalThis.document } = opts;
   const wrap = h(doc, 'div', null);
@@ -706,5 +757,10 @@ export function renderStatsBody(model, opts = {}) {
       currentBucketStartMs, rangeLabel }, opts));
   }
   wrap.appendChild(grid);
+  if (model.byPerson) {
+    const people = h(doc, 'div', 'charts-grid people-grid');
+    people.appendChild(renderPeopleCard(model.byPerson, rangeLabel, opts));
+    wrap.appendChild(people);
+  }
   return wrap;
 }