instar 1.3.402 → 1.3.403

package/dashboard/index.html

@@ -2692,6 +2692,7 @@
           <button class="tab" data-tab="threadline" onclick="switchTab('threadline')">Threadline</button>
           <button class="tab" data-tab="evidence" onclick="switchTab('evidence')">Evidence</button>
           <button class="tab" data-tab="process-health" onclick="switchTab('process-health')">Process Health</button>
+          <button class="tab" data-tab="subscriptions" onclick="switchTab('subscriptions')">Subscriptions</button>
           <button class="tab" data-tab="preferences-learning" onclick="switchTab('preferences-learning')">Preferences</button>
           <button class="tab" data-tab="machines" onclick="switchTab('machines')">Machines</button>
           <button class="tab" data-tab="mandates" onclick="switchTab('mandates')">Mandates</button>
@@ -3243,6 +3244,44 @@
       </details>
     </div>
 
+    <!-- subscriptions tab (Subscription & Auth Standard P2.2 — live quota + pending logins) -->
+    <style>
+      .sub-account { border:1px solid var(--border,#2a2a2a); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
+      .sub-account-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
+      .sub-account-nick { font-weight:600; font-size:15px; }
+      .sub-account-status { font-size:12px; opacity:.75; }
+      .sub-account-meta { font-size:12px; opacity:.6; margin:2px 0 10px; }
+      .sub-account-noquota { font-size:12px; opacity:.6; }
+      .sub-quota { margin:8px 0; }
+      .sub-quota-head { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
+      .sub-quota-label { opacity:.8; }
+      .sub-quota-pct { opacity:.65; }
+      .sub-quota-track { height:8px; border-radius:4px; background:var(--border,#2a2a2a); overflow:hidden; }
+      .sub-quota-fill { height:100%; background:linear-gradient(90deg,#4caf80,#3a9); }
+      .sub-pending { border:1px solid var(--border,#2a2a2a); border-radius:10px; padding:12px 16px; margin-bottom:10px; }
+      .sub-pending-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
+      .sub-pending-label { font-weight:600; }
+      .sub-pending-ttl { font-size:12px; opacity:.7; }
+      .sub-pending-code { font-family:monospace; font-size:14px; margin-top:6px; }
+      .sub-pending-url { font-size:12px; opacity:.7; word-break:break-all; margin-top:4px; }
+      .sub-pending-reissue { font-size:11px; opacity:.55; margin-top:4px; }
+      .sub-empty, .sub-disabled { font-size:13px; opacity:.7; padding:8px 0; }
+    </style>
+    <div id="subscriptionsPanel" class="ph-root" style="display:none;flex-direction:column;padding:28px;gap:24px;overflow-y:auto">
+      <h2 class="ph-title">Subscriptions</h2>
+      <p class="ph-intro">Your subscription accounts and how much of each is left before it resets — plus any logins waiting for you to approve on your phone.</p>
+      <section class="ph-section">
+        <h3 class="ph-h">Accounts</h3>
+        <p class="ph-h-sub">Each account’s live usage (5-hour and weekly) and when it resets.</p>
+        <div id="subAccounts"></div>
+      </section>
+      <section class="ph-section">
+        <h3 class="ph-h">Pending logins</h3>
+        <p class="ph-h-sub">Logins waiting for approval — open the link on your phone and confirm. An expired code is re-issued automatically.</p>
+        <div id="subPending"></div>
+      </section>
+    </div>
+
     <!-- mandates tab (coordination-mandate spec, decision 2A — the operator's PIN-gated surface) -->
     <div id="mandatesPanel" class="ph-root" style="display:none;flex-direction:column;padding:28px;gap:24px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:baseline">
@@ -4650,6 +4689,13 @@
         onActivate: () => { if (typeof startProcessHealth === 'function') startProcessHealth(); },
         onDeactivate: () => { if (typeof stopProcessHealth === 'function') stopProcessHealth(); },
       },
+      {
+        id: 'subscriptions',
+        panels: ['subscriptionsPanel'],
+        display: ['flex'],
+        onActivate: () => { if (typeof startSubscriptions === 'function') startSubscriptions(); },
+        onDeactivate: () => { if (typeof stopSubscriptions === 'function') stopSubscriptions(); },
+      },
       {
         id: 'preferences-learning',
         panels: ['preferencesLearningPanel'],
@@ -8602,6 +8648,34 @@
       if (__phController) __phController.stop();
     }
 
+    // ── Subscriptions tab (Subscription & Auth Standard P2.2) ──
+    // Same lazy dynamic-import pattern as Process Health: the controller lives in
+    // this (classic) scope so it can read `token`; the module ships the pure
+    // renderers + the polling controller.
+    let __subController = null;
+    let __subModule = null;
+    async function startSubscriptions() {
+      if (!__subModule) {
+        try { __subModule = await import('/dashboard/subscriptions.js'); }
+        catch (e) { console.error('[subscriptions] module load failed', e); return; }
+      }
+      if (!__subController) {
+        const els = {
+          accounts: document.getElementById('subAccounts'),
+          pending: document.getElementById('subPending'),
+        };
+        const fetchImpl = (url, opts = {}) => fetch(url, {
+          headers: { 'Authorization': `Bearer ${token}`, ...(opts.headers || {}) },
+          signal: opts.signal,
+        });
+        __subController = __subModule.createController({ doc: document, els, fetchImpl });
+      }
+      __subController.start();
+    }
+    function stopSubscriptions() {
+      if (__subController) __subController.stop();
+    }
+
     // ── Mandates tab (coordination-mandate spec, decision 2A) ──
     // Same lazy dynamic-import pattern as Process Health. The PIN typed in this
     // tab is sent once per action and never stored anywhere.

package/dashboard/subscriptions.js

@@ -0,0 +1,264 @@
+// Subscriptions tab — a read surface for the multi-account Subscription & Auth
+// pool: per-account live quota bars (5h / weekly + reset countdown), status, and
+// the Pending Logins panel (device codes / verification URLs awaiting approval,
+// with TTL). Spec: docs/specs/_drafts/subscription-auth-standard-master-spec.md.
+//
+// Browser-native ESM (no build step; served at /dashboard/subscriptions.js and
+// loaded by index.html via <script type="module">). The pure functions are
+// exported so the 3-tier jsdom tests exercise the SHIPPED code, not a copy; the
+// controller is attached to window.Subscriptions so index.html drives start/stop
+// on tab activation.
+//
+// Load-bearing safety contract (mirrors the Process Health tab §4.6): every
+// dynamic value flows through sanitizeForDisplay before the DOM; all DOM writes
+// are textContent only (never innerHTML); the only dynamic ATTRIBUTE written is a
+// quota-bar width, set from a clamped NUMBER (0–100) — never a string from data.
+// No verification URL is ever rendered as a live href (defense-in-depth): it is
+// shown as sanitized TEXT for the operator to copy.
+
+const CAPS = { label: 64, code: 48, url: 320, summary: 240 };
+
+// Structural presentation-glyph class (NFKC-fold THEN strip), identical to the
+// Process Health tab: \p{So} + arrows + geometric + box-drawing + dingbats +
+// variation-selectors + bullet/middot — so a confusable can't impersonate chrome.
+const CHROME_GLYPH_RE = new RegExp(
+  '[\\p{So}\\u2190-\\u21FF\\u25A0-\\u25FF\\u2500-\\u257F\\u2700-\\u27BF\\uFE00-\\uFE0F\\u2022\\u00B7\\u2027\\u2043]',
+  'gu',
+);
+const CONTROL_RE = new RegExp('[\\u0000-\\u0008\\u000B\\u000C\\u000E-\\u001F\\u007F-\\u009F]', 'g');
+const BIDI_RE = new RegExp('[\\u202A-\\u202E\\u2066-\\u2069]', 'g');
+
+/** Sanitize a dynamic value before it touches the DOM (see contract above). */
+export function sanitizeForDisplay(value, fieldKind = 'summary') {
+  let s = value == null ? '' : String(value);
+  s = s.normalize('NFKC');
+  s = s.replace(CONTROL_RE, '');
+  s = s.replace(BIDI_RE, '');
+  s = s.replace(/\n{2,}/g, '\n').replace(/[ \t]{5,}/g, '    ');
+  s = s.replace(CHROME_GLYPH_RE, '');
+  s = capGraphemes(s, CAPS[fieldKind] ?? CAPS.summary);
+  return s;
+}
+
+function capGraphemes(s, max) {
+  if (s.length <= max) return s;
+  if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+    const arr = Array.from(new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(s), (x) => x.segment);
+    if (arr.length <= max) return s;
+    return arr.slice(0, max - 1).join('') + '…';
+  }
+  let cut = max - 1;
+  const c = s.charCodeAt(cut - 1);
+  if (c >= 0xd800 && c <= 0xdbff) cut -= 1;
+  return s.slice(0, cut) + '…';
+}
+
+/** Clamp a utilization value to an integer 0–100 (the only dynamic attribute). */
+export function clampPct(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(100, Math.round(n)));
+}
+
+const STATUS_WORDS = {
+  active: 'Active',
+  warming: 'Warming up',
+  'rate-limited': 'At its limit',
+  'needs-reauth': 'Needs sign-in',
+  disabled: 'Disabled',
+};
+export function friendlyStatus(status) {
+  return STATUS_WORDS[typeof status === 'string' ? status : ''] || 'Unknown';
+}
+
+const PROVIDER_WORDS = { anthropic: 'Claude', openai: 'Codex', 'github-copilot': 'Copilot', google: 'Gemini' };
+export function friendlyProvider(provider) {
+  return PROVIDER_WORDS[typeof provider === 'string' ? provider : ''] || sanitizeForDisplay(provider, 'label');
+}
+
+/** Human countdown to a reset/expiry instant: "resets in 2h 15m" / "expired". */
+export function countdown(iso, now = Date.now(), { expiredWord = 'expired' } = {}) {
+  const t = typeof iso === 'string' ? Date.parse(iso) : NaN;
+  if (Number.isNaN(t)) return '';
+  const sec = Math.floor((t - now) / 1000);
+  if (sec <= 0) return expiredWord;
+  const hr = Math.floor(sec / 3600);
+  const min = Math.floor((sec % 3600) / 60);
+  if (hr >= 24) { const d = Math.floor(hr / 24); return `${d}d ${hr % 24}h`; }
+  if (hr >= 1) return `${hr}h ${min}m`;
+  if (min >= 1) return `${min}m`;
+  return `${sec}s`;
+}
+
+// ── DOM helpers (textContent ONLY — never innerHTML) ────────────────────────
+function el(doc, tag, cls, text) {
+  const node = doc.createElement(tag);
+  if (cls) node.setAttribute('class', cls); // static literal
+  if (text != null) node.textContent = text; // dynamic text → textContent ONLY
+  return node;
+}
+
+/** A labelled quota bar. `pct` is clamped to a 0–100 NUMBER before it reaches the
+ *  only dynamic attribute (style width); the percent text is also from that number. */
+export function quotaBar(doc, label, pct, resetIso, now = Date.now()) {
+  const wrap = el(doc, 'div', 'sub-quota');
+  const used = clampPct(pct);
+  const head = el(doc, 'div', 'sub-quota-head');
+  head.appendChild(el(doc, 'span', 'sub-quota-label', sanitizeForDisplay(label, 'label')));
+  const resetTxt = resetIso ? countdown(resetIso, now, { expiredWord: 'resetting' }) : '';
+  head.appendChild(el(doc, 'span', 'sub-quota-pct', `${used}% used${resetTxt ? ` · resets in ${resetTxt}` : ''}`));
+  wrap.appendChild(head);
+  const track = el(doc, 'div', 'sub-quota-track');
+  const fill = el(doc, 'div', 'sub-quota-fill');
+  fill.style.width = `${used}%`; // safe: `used` is a clamped integer
+  track.appendChild(fill);
+  wrap.appendChild(track);
+  return wrap;
+}
+
+/** Per-account rows: nickname, status, provider·framework, 5h + weekly quota bars. */
+export function renderAccounts(doc, target, accounts, now = Date.now()) {
+  if (!target) return;
+  target.replaceChildren();
+  if (!Array.isArray(accounts) || accounts.length === 0) {
+    target.appendChild(el(doc, 'div', 'sub-empty', 'No subscription accounts enrolled yet.'));
+    return;
+  }
+  for (const a of accounts) {
+    const card = el(doc, 'div', 'sub-account');
+    const head = el(doc, 'div', 'sub-account-head');
+    head.appendChild(el(doc, 'span', 'sub-account-nick', sanitizeForDisplay(a && a.nickname, 'label')));
+    head.appendChild(el(doc, 'span', 'sub-account-status', friendlyStatus(a && a.status)));
+    card.appendChild(head);
+    card.appendChild(el(doc, 'div', 'sub-account-meta',
+      `${friendlyProvider(a && a.provider)} · ${sanitizeForDisplay(a && a.framework, 'label')}`));
+    const q = (a && a.lastQuota) || null;
+    if (q && (q.fiveHour || q.sevenDay)) {
+      if (q.fiveHour) card.appendChild(quotaBar(doc, '5-hour', q.fiveHour.utilizationPct, q.fiveHour.resetsAt, now));
+      if (q.sevenDay) card.appendChild(quotaBar(doc, 'Weekly', q.sevenDay.utilizationPct, q.sevenDay.resetsAt, now));
+    } else {
+      card.appendChild(el(doc, 'div', 'sub-account-noquota', 'No quota reading yet.'));
+    }
+    target.appendChild(card);
+  }
+}
+
+/** Pending Logins panel: device code / verification URL (as TEXT) + TTL + reissues. */
+export function renderPendingLogins(doc, target, logins, now = Date.now()) {
+  if (!target) return;
+  target.replaceChildren();
+  if (!Array.isArray(logins) || logins.length === 0) {
+    target.appendChild(el(doc, 'div', 'sub-empty', 'No logins waiting for approval.'));
+    return;
+  }
+  for (const l of logins) {
+    const row = el(doc, 'div', 'sub-pending');
+    const head = el(doc, 'div', 'sub-pending-head');
+    head.appendChild(el(doc, 'span', 'sub-pending-label', sanitizeForDisplay(l && l.label, 'label')));
+    const ttl = l && l.ttlExpiresAt ? countdown(l.ttlExpiresAt, now) : '';
+    head.appendChild(el(doc, 'span', 'sub-pending-ttl', ttl ? `expires in ${ttl}` : 'expired'));
+    row.appendChild(head);
+    if (l && l.userCode) {
+      row.appendChild(el(doc, 'div', 'sub-pending-code', `Code: ${sanitizeForDisplay(l.userCode, 'code')}`));
+    }
+    // Verification URL shown as TEXT for the operator to copy — never a live href.
+    row.appendChild(el(doc, 'div', 'sub-pending-url', sanitizeForDisplay(l && l.verificationUrl, 'url')));
+    const rc = l && Number(l.reissueCount);
+    if (Number.isFinite(rc) && rc > 0) {
+      row.appendChild(el(doc, 'div', 'sub-pending-reissue', `Re-issued ${rc} time${rc === 1 ? '' : 's'}`));
+    }
+    target.appendChild(row);
+  }
+}
+
+export function renderDisabled(doc, els) {
+  if (els && els.accounts) {
+    els.accounts.replaceChildren(
+      el(doc, 'div', 'sub-disabled', 'The subscription pool isn’t set up yet. Enroll an account to get started.'),
+    );
+  }
+  if (els && els.pending) els.pending.replaceChildren();
+}
+
+// ── Controller (fetch /subscription-pool + /pending-logins, render) ─────────
+const URLS = {
+  accounts: '/subscription-pool',
+  pending: '/subscription-pool/pending-logins',
+};
+
+export function createController(opts) {
+  const {
+    doc,
+    els = {},
+    fetchImpl,
+    now = () => Date.now(),
+    cadenceMs = 30_000,
+    schedule = (fn, ms) => setTimeout(fn, ms),
+    cancel = (id) => clearTimeout(id),
+  } = opts;
+
+  const state = { timerId: null, active: false, inFlight: null };
+
+  async function fetchJson(url, controller) {
+    const resp = await fetchImpl(url, { signal: controller.signal });
+    if (!resp.ok) throw new Error(`${url} ${resp.status}`);
+    return resp.json();
+  }
+
+  async function tick() {
+    if (!state.active) return;
+    if (state.inFlight) { try { state.inFlight.abort(); } catch { /* superseded */ } }
+    const controller = typeof AbortController !== 'undefined' ? new AbortController() : { signal: undefined, abort() {} };
+    state.inFlight = controller;
+    let accountsBody, pendingBody;
+    try {
+      [accountsBody, pendingBody] = await Promise.all([
+        fetchJson(URLS.accounts, controller),
+        fetchJson(URLS.pending, controller),
+      ]);
+    } catch {
+      if (controller.signal && controller.signal.aborted) return;
+      state.inFlight = null;
+      reschedule();
+      return;
+    }
+    if (controller.signal && controller.signal.aborted) return;
+    state.inFlight = null;
+    // Feature dark → both routes answer { enabled:false }. Show the friendly copy.
+    if (accountsBody && accountsBody.enabled === false && pendingBody && pendingBody.enabled === false) {
+      renderDisabled(doc, els);
+      reschedule();
+      return;
+    }
+    render(accountsBody, pendingBody);
+    reschedule();
+  }
+
+  function render(accountsBody, pendingBody) {
+    const accounts = accountsBody && Array.isArray(accountsBody.accounts) ? accountsBody.accounts : [];
+    const logins = pendingBody && Array.isArray(pendingBody.logins) ? pendingBody.logins : [];
+    renderAccounts(doc, els.accounts, accounts, now());
+    renderPendingLogins(doc, els.pending, logins, now());
+  }
+
+  function reschedule() {
+    if (!state.active) return;
+    if (state.timerId != null) cancel(state.timerId);
+    state.timerId = schedule(() => { void tick(); }, cadenceMs);
+  }
+
+  function start() { if (state.active) return; state.active = true; void tick(); }
+  function stop() {
+    state.active = false;
+    if (state.timerId != null) { cancel(state.timerId); state.timerId = null; }
+    if (state.inFlight) { try { state.inFlight.abort(); } catch { /* ignore */ } state.inFlight = null; }
+  }
+  function onVisible() { if (!state.active) start(); }
+  function onHidden() { stop(); }
+
+  return { start, stop, onVisible, onHidden, tick, render, _state: state };
+}
+
+if (typeof window !== 'undefined') {
+  window.Subscriptions = { createController, sanitizeForDisplay, renderAccounts, renderPendingLogins };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instar",
-  "version": "1.3.402",
+  "version": "1.3.403",
   "description": "Coherence infrastructure for self-evolving AI agents — on the Claude Code or Codex subscription you already have.",
   "type": "module",
   "main": "dist/index.js",

package/src/data/builtin-manifest.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./builtin-manifest.schema.json",
   "schemaVersion": 1,
-  "generatedAt": "2026-06-07T08:26:35.260Z",
-  "instarVersion": "1.3.402",
+  "generatedAt": "2026-06-07T08:45:36.629Z",
+  "instarVersion": "1.3.403",
   "entryCount": 199,
   "entries": {
     "hook:session-start": {

package/upgrades/1.3.403.md

@@ -0,0 +1,50 @@
+# Upgrade Guide — vNEXT
+
+<!-- assembled-by: assemble-next-md -->
+<!-- bump: minor -->
+
+## What Changed
+
+Added a **Subscriptions** tab to the dashboard — the visual surface for the
+multi-account Subscription & Auth pool (P1.1–P2.1). It shows, per account: the
+nickname, a friendly status, and live quota bars for the 5-hour and weekly
+windows with a "resets in …" countdown. A **Pending Logins** panel below lists
+any in-flight enrollment — the device code / verification URL (shown as copyable
+text, never a live link) with its TTL countdown and how many times it has been
+re-issued.
+
+The tab is a self-contained browser-native ESM module (`dashboard/subscriptions.js`)
+served statically, registered in `index.html` exactly like the Process Health and
+Preferences tabs (lazy dynamic-import, start/stop on tab activation, polled every
+30s). It consumes the existing `GET /subscription-pool` and
+`GET /subscription-pool/pending-logins` routes — no new server routes, no `src/`
+change. When the pool isn't set up the routes answer `{ enabled:false }` and the
+tab shows a friendly "not set up yet" message (never an error).
+
+It carries the same load-bearing display-safety contract as the Process Health
+tab: every dynamic value is sanitized (NFKC fold + control/bidi/chrome-glyph
+strip + grapheme cap) before the DOM, all writes are `textContent` only, and the
+only dynamic attribute (a quota-bar width) comes from a clamped 0–100 integer.
+
+Coverage: 26 tests across three tiers — render unit tests (sanitize/clamp/
+countdown/renderers + XSS-survives-as-inert-text), a controller integration test
+(jsdom + injected fetch/timers: render, feature-dark, XSS through the controller,
+fetch-failure resilience, visibility gating), and an e2e feature-alive test that
+boots a real server with the production routes and drives the shipped controller
+against it (accounts + pending logins render; feature-off → friendly copy).
+
+## What to Tell Your User
+
+There's a new **Subscriptions** tab on your dashboard. It shows each of your
+subscription accounts, how much of each is left (5-hour and weekly) and when it
+resets, and any logins still waiting for you to approve on your phone — with the
+code and a countdown. Open it from any device with your dashboard PIN.
+
+## Summary of New Capabilities
+
+- **Subscriptions dashboard tab** — per-account live quota bars (5h + weekly) with
+  reset countdowns + friendly status, on any device behind the dashboard PIN.
+- **Pending Logins panel** — in-flight enrollment codes / verification URLs (as
+  copyable text) with TTL countdown + re-issue count.
+- **Mobile-responsive + safe** — sanitized, `textContent`-only rendering; no live
+  links; reuses the Process Health tab's hardened display contract.