instar 1.3.1286 → 1.3.1287

package/dashboard/index.html

@@ -3720,6 +3720,20 @@
       .sub-provider-heading { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
         opacity:.6; margin:14px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--border,#2a2a2a); }
       .sub-provider-heading:first-child { margin-top:0; }
+      /* Provider colors (operator request 2026-09-25): Claude and Codex are told apart
+         at a glance — a colored band on each group heading and a colored edge on every
+         account card and grid row. Claude = clay orange, Codex = blue. */
+      .sub-prov-claude { --prov:#e07a4f; --prov-tint:rgba(224,122,79,.12); }
+      .sub-prov-codex { --prov:#4f8ff0; --prov-tint:rgba(79,143,240,.12); }
+      .sub-prov-other { --prov:#9ca3af; --prov-tint:rgba(156,163,175,.10); }
+      .sub-provider-heading.sub-prov-claude, .sub-provider-heading.sub-prov-codex, .sub-provider-heading.sub-prov-other {
+        opacity:1; color:var(--prov); font-size:15px; background:var(--prov-tint); border-bottom:none;
+        border-left:6px solid var(--prov); border-radius:6px; padding:8px 12px; margin:20px 0 10px; }
+      .sub-account.sub-prov-claude, .sub-account.sub-prov-codex, .sub-account.sub-prov-other { border-left:6px solid var(--prov); }
+      .sub-matrix-group.sub-prov-claude, .sub-matrix-group.sub-prov-codex, .sub-matrix-group.sub-prov-other {
+        color:var(--prov); background:var(--prov-tint); font-size:14px; opacity:1; border-left:6px solid var(--prov); padding:10px 12px; }
+      .sub-matrix tr.sub-prov-claude > .sub-matrix-acct, .sub-matrix tr.sub-prov-codex > .sub-matrix-acct, .sub-matrix tr.sub-prov-other > .sub-matrix-acct {
+        border-left:6px solid var(--prov); background:var(--prov-tint); }
       .sub-account { border:1px solid var(--border,#2a2a2a); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
       .sub-account-inuse { border-color:#16a34a; box-shadow:0 0 0 1px #16a34a44; }
       .sub-account-inuse-badge { font-size:11px; font-weight:600; color:#22c55e; margin-right:auto; }

package/dashboard/subscriptions.js

@@ -282,6 +282,15 @@ export function quotaBar(doc, label, pct, resetIso, now = Date.now()) {
  *   pinned by a test, because "we grouped everything" would quietly add a redundant
  *   heading to the common case.
  */
+/** CSS class that colors a provider's group at a glance (operator request 2026-09-25:
+ *  Claude and Codex must be distinguishable without reading). Closed mapping, so a
+ *  provider string never reaches a class name raw. */
+export function providerClass(provider) {
+  if (provider === 'anthropic') return 'sub-prov-claude';
+  if (provider === 'openai') return 'sub-prov-codex';
+  return 'sub-prov-other';
+}
+
 export function groupAccountsByProvider(accounts) {
   if (!Array.isArray(accounts)) return [];
   const groups = new Map(); // provider key (raw) → accounts, in first-appearance order
@@ -298,7 +307,7 @@ export function groupAccountsByProvider(accounts) {
       // else, so an unrecognised or hostile provider string cannot reach the DOM raw.
       // An absent provider has no honest name, so say so rather than invent one.
       const label = friendlyProvider(key) || 'Other';
-      out.push({ __providerHeading: label });
+      out.push({ __providerHeading: label, __providerKey: key });
     }
     for (const m of members) out.push(m);
   }
@@ -322,11 +331,11 @@ export function renderAccounts(doc, target, accounts, now = Date.now(), inUseAcc
     // accounts mixed together with only a small per-card meta line to tell them
     // apart. The heading is what makes the split scannable.)
     if (a && a.__providerHeading) {
-      target.appendChild(el(doc, 'div', 'sub-provider-heading', a.__providerHeading));
+      target.appendChild(el(doc, 'div', `sub-provider-heading ${providerClass(a.__providerKey)}`, a.__providerHeading));
       continue;
     }
     const inUse = !!(inUseAccountId && a && a.id === inUseAccountId);
-    const card = el(doc, 'div', inUse ? 'sub-account sub-account-inuse' : 'sub-account');
+    const card = el(doc, 'div', `${inUse ? 'sub-account sub-account-inuse' : 'sub-account'} ${providerClass(a && a.provider)}`);
     const head = el(doc, 'div', 'sub-account-head');
     head.appendChild(el(doc, 'span', 'sub-account-nick', sanitizeForDisplay(a && a.nickname, 'label')));
     if (inUse) head.appendChild(el(doc, 'span', 'sub-account-inuse-badge', '● In use now'));
@@ -924,7 +933,7 @@ export function renderAccountMatrix(doc, target, poolScope, pendingScope, transi
   for (const entry of groupMatrixRowsByProvider(model.rows)) {
     if (entry && entry.__providerHeading) {
       const gtr = doc.createElement('tr');
-      const gth = el(doc, 'th', 'sub-matrix-group', entry.__providerHeading);
+      const gth = el(doc, 'th', `sub-matrix-group ${providerClass(entry.__providerKey)}`, entry.__providerHeading);
       // Span the account column + every machine column so the heading reads as a band
       // across the grid rather than a stray cell.
       gth.setAttribute('colspan', String(model.machines.length + 1));
@@ -934,7 +943,7 @@ export function renderAccountMatrix(doc, target, poolScope, pendingScope, transi
       continue;
     }
     const row = entry.__row;
-    const tr = doc.createElement('tr');
+    const tr = el(doc, 'tr', providerClass(row && row.account && row.account.provider));
     tr.appendChild(el(doc, 'th', 'sub-matrix-acct', sanitizeForDisplay(row.account.email, 'label')));
     for (const c of row.cells) {
       const repairCandidate = Array.isArray(reloginEpisodes)

package/dist/data/standards-guard-index.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "generatedFrom": "source-tree",
   "registrySha256": "35448db940d659661ebdfb09761439033f93a15157540ee2f6eecf825488e1e6",
-  "packageVersion": "1.3.1286",
+  "packageVersion": "1.3.1287",
   "guards": [
     {
       "ref": "docs/audits/phase-b/f10-triage.md",

package/dist/data/standards-guard-index.meta.json

@@ -1,5 +1,5 @@
 {
-  "sha256": "4c0019f5f7019a607696ddeaa4422711ade3c81d4cd69135e2a9640dda4e90ba",
+  "sha256": "df1053d2818e9f17380b047970f345813ee788eedfeaf13b135c750177dd97ff",
   "registrySha256": "35448db940d659661ebdfb09761439033f93a15157540ee2f6eecf825488e1e6",
-  "packageVersion": "1.3.1286"
+  "packageVersion": "1.3.1287"
 }

package/dist/data/standards-registry.meta.json

@@ -2,5 +2,5 @@
   "sha256": "35448db940d659661ebdfb09761439033f93a15157540ee2f6eecf825488e1e6",
   "articleCount": 92,
   "generatedFrom": "docs/STANDARDS-REGISTRY.md",
-  "packageVersion": "1.3.1286"
+  "packageVersion": "1.3.1287"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instar",
-  "version": "1.3.1286",
+  "version": "1.3.1287",
   "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-09-25T20:15:27.730Z",
-  "instarVersion": "1.3.1286",
+  "generatedAt": "2026-09-25T21:14:00.636Z",
+  "instarVersion": "1.3.1287",
   "entryCount": 203,
   "entries": {
     "hook:session-start": {

package/src/data/standards-guard-index.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "generatedFrom": "source-tree",
   "registrySha256": "35448db940d659661ebdfb09761439033f93a15157540ee2f6eecf825488e1e6",
-  "packageVersion": "1.3.1286",
+  "packageVersion": "1.3.1287",
   "guards": [
     {
       "ref": "docs/audits/phase-b/f10-triage.md",

package/src/data/standards-guard-index.meta.json

@@ -1,5 +1,5 @@
 {
-  "sha256": "4c0019f5f7019a607696ddeaa4422711ade3c81d4cd69135e2a9640dda4e90ba",
+  "sha256": "df1053d2818e9f17380b047970f345813ee788eedfeaf13b135c750177dd97ff",
   "registrySha256": "35448db940d659661ebdfb09761439033f93a15157540ee2f6eecf825488e1e6",
-  "packageVersion": "1.3.1286"
+  "packageVersion": "1.3.1287"
 }

package/src/data/standards-registry.meta.json

@@ -2,5 +2,5 @@
   "sha256": "35448db940d659661ebdfb09761439033f93a15157540ee2f6eecf825488e1e6",
   "articleCount": 92,
   "generatedFrom": "docs/STANDARDS-REGISTRY.md",
-  "packageVersion": "1.3.1286"
+  "packageVersion": "1.3.1287"
 }

package/upgrades/1.3.1287.md

@@ -0,0 +1,21 @@
+# Upgrade Guide — vNEXT
+
+<!-- assembled-by: assemble-next-md -->
+<!-- bump: patch -->
+
+## What Changed
+
+The Subscriptions dashboard colors each provider so Claude and Codex are told apart at a glance: Claude in clay orange, Codex in blue. Each group heading in the account-by-machine grid and in the account list becomes a wide tinted band in its provider color. Each grid row's account cell and each account card gets a thick left edge in that color. A new closed mapping, `providerClass()` (anthropic → `sub-prov-claude`, openai → `sub-prov-codex`, anything else → `sub-prov-other`), is the only path from a provider string to a class name. Grouping, ordering and the single-provider "no heading" rule are unchanged.
+
+## What to Tell Your User
+
+On the Subscriptions page, Claude accounts now show in orange and Codex accounts in blue, both in the grid and in the list below, so you can see which is which without reading the labels.
+
+## Summary of New Capabilities
+
+- Provider color-coding on the Subscriptions dashboard (grid bands, row edges, card edges).
+
+## Evidence
+
+- Operator request 2026-09-25: "make the various claude/codex sections MUCH more differentiated/apparent so its much easier to at-a-glance know which accounts I'm looking at".
+- Tests: `tests/unit/subscriptions-render.test.ts` (+3: card and heading classes, grid band and row classes, closed mapping for unknown or hostile provider strings); 100/100 pass. A visual mockup was rendered from the real CSS and renderer.

package/upgrades/side-effects/subscriptions-provider-colors.md

@@ -0,0 +1,44 @@
+# Side-Effects Review — provider colors on the Subscriptions dashboard
+
+**Version / slug:** `subscriptions-provider-colors`
+**Date:** 2026-09-25
+**Author:** Echo
+
+## Summary of the change
+
+`dashboard/subscriptions.js`: new exported `providerClass()` (closed mapping). The provider group entries carry `__providerKey`. Headings, cards, grid band cells and grid rows add the provider class. `dashboard/index.html`: CSS for the three classes (tinted band, colored left edges). There are no data, route or state changes.
+
+## Decision-point inventory
+
+None. This is presentation only.
+
+## 1. Over-block
+None.
+
+## 2. Under-block
+None. Providers other than Claude and Codex fall back to a neutral grey.
+
+## 3. Level-of-abstraction fit
+Styling lives in the dashboard CSS, and the class choice sits beside the existing grouping helper.
+
+## 4. Signal vs authority compliance
+Not applicable. No decision logic.
+
+## 5. Interactions
+`groupAccountsByProvider`'s order and single-provider rules are untouched (their tests still pass). Existing classes stay in place, so the existing selectors still match.
+
+## 6. External surfaces
+The dashboard's look only. A provider string cannot reach a class name raw; `providerClass` is a closed mapping, and a test covers a hostile string.
+
+## 7. Multi-machine posture
+Unchanged. It renders the same pool-scope data.
+
+## 8. Rollback cost
+Revert the PR.
+
+## Conclusion
+Presentation-only and safe to ship.
+
+## Class-Closure Declaration (display-only mirror)
+
+`{defectClass: "unbounded-self-action", closure: "n/a", reason: "presentation-only dashboard styling"}`

package/upgrades/subscriptions-provider-colors.eli16.md

@@ -0,0 +1,9 @@
+# Claude and Codex get their own colors on the Subscriptions page (plain-English version)
+
+The Subscriptions page lists every Claude and Codex account twice: once in the grid that shows which machine each account is signed in on, and once as a list of account cards with usage bars. Both places already grouped Claude accounts together and Codex accounts together, but the only thing marking each group was a small grey word. Many accounts use the same email for both Claude and Codex, so it was easy to lose track of which group you were looking at.
+
+Now each provider has its own color. Claude is orange and Codex is blue. Each group starts with a wide colored band that names it. Every account row in the grid and every account card has a thick colored stripe on its left edge. You can tell at a glance, without reading, whether you're looking at a Claude account or a Codex account.
+
+Nothing else about the page changes. The order is the same, the buttons are the same, and an install with only one provider still shows no group heading at all. Providers other than Claude and Codex get a neutral grey.
+
+Nothing needs deciding.