@azure-id/orc 0.55.0

package/bin/webui/css/panels/settings.css

@@ -0,0 +1,227 @@
+/* panels/settings.css — orc ui
+   The toolbar, the tier accordions, every control kind, the ladder.
+
+   The <link> ORDER in app.html is the cascade order, and the numeric
+   prefix is that order. No @import: it would carry no session token and
+   401. */
+
+/* ---------------------------------------------------------------- PANELS -- */
+
+/* --- Settings ------------------------------------------------------------ */
+
+/* The settings toolbar — find a key across every tier without scrolling. */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  flex-wrap: wrap;
+  padding: var(--sp-3) var(--sp-4);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  position: sticky;
+  top: var(--sp-3);
+  z-index: 5;
+}
+.search { flex: 1 1 220px; min-width: 0; }
+.search .text-input { width: 100%; padding: 6px 10px; font-size: 13px; }
+.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
+.toggle:has(input:disabled) { opacity: .5; cursor: default; }
+.toolbar-result { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
+.toolbar-result-none { color: var(--warn); }
+
+/* `hidden` here is the FILTER's hide. It is a class, not the [hidden]
+   attribute, so a filtered-out row cannot fight a component that sets its own
+   display. */
+.hidden { display: none !important; }
+
+/* Each tier is its own card with a clickable header, so 36 keys read as three
+   labelled groups instead of one wall. */
+.tier { padding: 0; overflow: hidden; }
+.tier-head {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  width: 100%;
+  padding: var(--sp-3) var(--sp-4);
+  background: var(--surface-2);
+  border: 0;
+  border-bottom: 1px solid var(--line-soft);
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--dur-fast) var(--ease);
+}
+.tier-head:hover { background: var(--surface-3); }
+.tier-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
+.tier-count { font-size: 12px; color: var(--text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
+.tier-caret {
+  color: var(--text-faint);
+  font-size: 11px;
+  transform: rotate(90deg);
+  transition: transform var(--dur) var(--ease);
+}
+.tier-desc { padding: var(--sp-3) var(--sp-4) 0; color: var(--text-dim); font-size: 12.5px; }
+.tier-rows { padding: 0 var(--sp-4) var(--sp-2); }
+
+/* Collapsed: the caret turns and the body folds away. `grid-template-rows`
+   animates 1fr -> 0fr, which `height: auto` cannot do — and it needs a real
+   element to collapse against, which is what `.tier-body-inner` is for. */
+.tier-body {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
+}
+.tier-body-inner { min-height: 0; overflow: hidden; }
+.tier.collapsed > .tier-body { grid-template-rows: 0fr; opacity: 0; }
+.tier.collapsed .tier-caret { transform: rotate(0deg); }
+
+.setting {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 260px;
+  gap: var(--sp-4);
+  align-items: start;
+  padding: var(--sp-3) var(--sp-2);
+  margin: 0 calc(var(--sp-2) * -1);
+  border-radius: var(--radius-sm);
+  border-bottom: 1px solid var(--line-soft);
+  /* 220ms desaturate + lock slide when another key shadows this one. */
+  transition: opacity var(--dur-shadow) var(--ease), filter var(--dur-shadow) var(--ease),
+              background var(--dur-fast) var(--ease);
+}
+/* Which row you are on, at a glance — 36 rows of the same weight is where a
+   mis-click on the wrong key comes from. */
+.setting:hover { background: var(--surface-2); }
+.setting:last-child { border-bottom: 0; }
+.setting-name { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--mono); font-size: 13px; }
+.setting-desc { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; }
+.setting-control { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-width: 0; }
+.setting-control > * { max-width: 100%; }
+
+/* the overridden dot animates in when a value is committed */
+.dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent);
+  flex: none;
+  animation: dot-in var(--dur) var(--ease);
+}
+.dot-warn { background: var(--warn); }
+@keyframes dot-in {
+  from { transform: scale(0); opacity: 0; }
+  to   { transform: none; opacity: 1; }
+}
+
+/* THE SHADOWING ANIMATION (plan §6.2). Flip opus5_only on and the fable5_*
+   rows desaturate, a lock slides in, and the reason is right there. The
+   animation teaches the precedence rule — that is the whole point. */
+.setting.shadowed { opacity: .42; filter: saturate(.15); }
+.lock {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--warn);
+  background: var(--warn-wash);
+  border-radius: 100px;
+  padding: 1px 8px;
+  animation: lock-in var(--dur-shadow) var(--ease);
+}
+@keyframes lock-in {
+  from { opacity: 0; transform: translateX(-10px); }
+  to   { opacity: 1; transform: none; }
+}
+.shadow-why { font-size: 11.5px; color: var(--warn); margin-top: 4px; }
+
+/* WRAPPING is not cosmetic here: the control column is a fixed 260px, and a
+   subset control with nine choices (`extra_roles`, v0.50.0) overflowed it and
+   printed straight over the description text. A segmented control has to fold
+   inside its own column, never past it. */
+.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
+.seg button {
+  border: 0;
+  background: var(--surface-2);
+  padding: 4px 11px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text-dim);
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.seg button + button { border-left: 1px solid var(--line); }
+.seg button:hover { background: var(--surface-3); color: var(--text); }
+.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
+
+.stepper { display: inline-flex; align-items: center; gap: 6px; }
+.stepper input {
+  width: 74px;
+  padding: 4px 8px;
+  text-align: center;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+}
+.text-input {
+  width: 100%;
+  padding: 4px 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.text-input.invalid { border-color: var(--bad); }
+.input-err { font-size: 11.5px; color: var(--bad); }
+
+/* A closed set gets a dropdown, not a text box (v0.44.0). The native control is
+   kept — it is the one widget every platform already knows how to open with a
+   keyboard, and a hand-rolled listbox on a write surface is a lot of new
+   behaviour for no new capability. Only the chrome is ours. */
+.select-input {
+  min-width: 190px;
+  max-width: 100%;
+  padding: 4px 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color var(--dur-fast) var(--ease);
+}
+.select-input:hover { border-color: var(--accent-dim); }
+.select-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+/* The out-of-set placeholder (an unset fixed_executor) reads as absent, not as
+   a value you could have chosen. */
+.select-input option:disabled { color: var(--text-faint); }
+
+.readonly-value {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text-faint);
+  background: var(--surface-2);
+  border: 1px dashed var(--line);
+  border-radius: var(--radius-sm);
+  padding: 3px 8px;
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+/* the score ladder — a diagram, not an editor */
+.ladder { display: flex; flex-direction: column; gap: 4px; }
+.rung {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--sp-3);
+  padding: 5px var(--sp-3);
+  background: var(--surface-2);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.rung-band { color: var(--text-faint); }
+.rung-bar { height: 4px; border-radius: 2px; background: var(--accent); opacity: .55; }
+.rung-agent { color: var(--text-dim); }
+.ladder-note { font-size: 12px; color: var(--text-faint); margin-top: var(--sp-2); }

package/bin/webui/css/panels/stats.css

@@ -0,0 +1,87 @@
+/* panels/stats.css — orc ui
+   The usage bars, the Usage|Cost tabs, the four-part token bar, the tables.
+
+   The <link> ORDER in app.html is the cascade order, and the numeric
+   prefix is that order. No @import: it would carry no session token and
+   401. */
+
+/* --- Stats --------------------------------------------------------------- */
+
+.bars { display: flex; flex-direction: column; gap: var(--sp-2); }
+.bar-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 76px; align-items: center; gap: var(--sp-3); font-size: 13px; }
+.bar-label { font-family: var(--mono); color: var(--text-dim); }
+.bar-track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
+.bar-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 4px;
+  width: 0;
+  transition: width var(--dur-slow) var(--ease);
+}
+.bar-value { text-align: right; color: var(--text-faint); font-size: 12px; }
+
+/* --- tabs (Stats: Usage | Cost) */
+.tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--border); }
+.tab {
+  background: none; border: none; border-bottom: 2px solid transparent;
+  color: var(--text-dim); font: inherit; font-size: 13px;
+  padding: var(--sp-2) var(--sp-3); cursor: pointer;
+}
+.tab:hover { color: var(--text); }
+.tab-on { color: var(--text); border-bottom-color: var(--accent); }
+
+/* --- the unit switch */
+.seg-ctl { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
+.seg-btn {
+  background: none; border: none; color: var(--text-dim);
+  font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
+}
+.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
+.seg-on { background: var(--accent-wash); color: var(--accent); }
+
+/* --- the four-part token bar. THE SEGMENTS EXIST SO CACHE-READ IS VISIBLY
+   SEPARATE; a single fill would re-hide exactly what it is here to expose. */
+.bar-stack { display: flex; height: 100%; width: 0; transition: width .32s ease; }
+.bar-seg { height: 100%; flex-grow: 0; flex-basis: 0; transition: flex-grow .32s ease; }
+.seg-in  { background: var(--accent); }
+.seg-cw  { background: var(--warn); }
+.seg-cr  { background: var(--border); }
+.seg-out { background: var(--bad); }
+.bar-none { font-size: 11.5px; color: var(--text-dim); padding-left: var(--sp-2); line-height: 8px; }
+.bar-mark { color: var(--accent); font-family: var(--mono); }
+
+.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); }
+.legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
+
+/* --- tables (wiki plan, cost bands) */
+.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; display: block; overflow-x: auto;
+       scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+.tbl::-webkit-scrollbar { height: 8px; }
+.tbl::-webkit-scrollbar-track { background: transparent; }
+.tbl::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+.tbl th {
+  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
+  letter-spacing: .06em; color: var(--text-dim); padding: var(--sp-2) var(--sp-3);
+  border-bottom: 1px solid var(--border); white-space: nowrap;
+}
+.tbl td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
+.tbl td.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
+/* A zero-use row and a thin-sample row KEEP THEIR SLOT and render muted. Hiding
+   either would make "measured and unused" look identical to "not there". */
+.row-muted td { opacity: .55; }
+.row-soft td { opacity: .62; }
+.row-note td { border-bottom: none; padding-top: 0; color: var(--text-dim); font-size: 11.5px; }
+
+.usage-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
+.usage-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 52px 90px; gap: var(--sp-3); align-items: center; font-size: 12.5px; }
+.usage-row .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.form { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center; }
+.form label { font-size: 12.5px; color: var(--text-dim); }
+
+@media (max-width: 720px) {
+  .usage-row { grid-template-columns: minmax(0, 1fr) 52px; }
+  .usage-row .bar-track, .usage-row .note { display: none; }
+  .form { grid-template-columns: minmax(0, 1fr); }
+}

package/bin/webui/fixtures/boundary.js

@@ -0,0 +1,92 @@
+"use strict";
+/* fixtures/boundary.js — canned data for `orc ui --fixtures`.
+   Boundary cards with a REFUSE that carries its checklist, an ESCALATE with a
+   named person, and an EXECUTE.
+
+   THE RULE FOR EVERY FILE IN HERE: carry ONE OF EVERY STATE, including the
+   ugly ones. You cannot DESIGN a STALE chip on a fresh wiki, and a state
+   with no fixture is a state nobody has ever looked at. A per-state count
+   test asserts this, so a new state cannot ship without one.
+
+   Shapes MUST match what `bin/cli.js --json` really emits — a drifted
+   fixture is worse than no fixture. */
+
+const { PROJECT } = require("./shell.js");
+
+const boundary = {
+  ok: true,
+  dir: PROJECT + "/.claude/orc/boundary",
+  counts: { EXECUTE: 2, ESCALATE: 1, REFUSE: 1 },
+  stale: 1,
+  malformed: [],
+  line: "boundary: 2 execute · 1 escalate · 1 refuse (1 stale)",
+  cards: [
+    {
+      file: "src-payments.md",
+      path: PROJECT + "/.claude/orc/boundary/src-payments.md",
+      area: "src/payments",
+      verdict: "REFUSE",
+      checklist: [
+        "add a test runner to this package",
+        "cover the idempotency path",
+        "record the money invariant in PACT.md",
+      ],
+      escalate_to: null,
+      anchored_files: ["src/payments/ledger.ts", "src/payments/idempotency.ts"],
+      verified_commit: "8a62b4f1c9",
+      distance: 0,
+      stale: false,
+      malformed: [],
+      reasons: [
+        "self-verify: no — no test runner in this package",
+        "reversible: no — writes to a live ledger",
+      ],
+    },
+    {
+      file: "db-migrations.md",
+      path: PROJECT + "/.claude/orc/boundary/db-migrations.md",
+      area: "db/migrations",
+      verdict: "ESCALATE",
+      checklist: [],
+      escalate_to: "the data owner",
+      anchored_files: ["db/migrations"],
+      verified_commit: "c273793aa1",
+      distance: 0,
+      stale: false,
+      malformed: [],
+      reasons: ["reversible: no — a forward migration on live rows", "decision: yes — the rollout window is not ORC's call"],
+    },
+    {
+      file: "web-locales.md",
+      path: PROJECT + "/.claude/orc/boundary/web-locales.md",
+      area: "web/locales",
+      verdict: "EXECUTE",
+      checklist: [],
+      escalate_to: null,
+      anchored_files: ["web/locales/en.json"],
+      verified_commit: "783f6971aa",
+      distance: 0,
+      stale: false,
+      malformed: [],
+      reasons: ["self-verify: yes — `npm run i18n:check`", "reversible: yes — one git checkout"],
+    },
+    {
+      file: "src-notifications.md",
+      path: PROJECT + "/.claude/orc/boundary/src-notifications.md",
+      area: "src/notifications",
+      verdict: "EXECUTE",
+      checklist: [],
+      escalate_to: null,
+      anchored_files: ["src/notifications/dispatcher.ts"],
+      verified_commit: "9f2c41ab8d",
+      // STALE: the evidence moved. Not a wrong card — one whose four answers
+      // were computed against a commit that is 12 behind.
+      distance: 12,
+      stale: true,
+      malformed: [],
+      reasons: ["self-verify: yes — covered by test/notifications", "reversible: yes"],
+    },
+  ],
+};
+
+module.exports = { boundary };