@worca/app 1.5.0 → 1.6.0-rc.2

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