@azure-id/orc 0.55.0

package/bin/webui/css/06-responsive.css

@@ -0,0 +1,108 @@
+/* 06-responsive.css — orc ui
+   The width breakpoints that cross panel boundaries (the rail becomes a strip,
+   the Learn rail becomes a scrollable row). They override rules from the shell
+   AND from four panels, so they load after every one of them — the same reason
+   04-motion.css is last. Breakpoints that only touch ONE panel stay in that
+   panel's file.
+
+   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. */
+
+/* --------------------------------------------------------------- RESPONSIVE */
+
+@media (max-width: 1040px) {
+  /* The Learn rail stops being a rail and becomes a scrollable strip above the
+     reading pane — a 244px column plus prose does not fit twice over. */
+  .learn { grid-template-columns: 1fr; }
+  .learn-side { position: static; max-height: none; }
+  .learn-nav { flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
+  .learn-nav-item { flex: 0 0 auto; max-width: 210px; }
+}
+
+@media (max-width: 900px) {
+  .shell { grid-template-columns: 1fr; }
+  .rail {
+    position: static;
+    height: auto;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--sp-4);
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line-soft);
+  }
+  .nav { flex-direction: row; flex-wrap: nowrap; }
+  .nav a { white-space: nowrap; }
+  .rail-foot { flex-direction: row; align-items: center; }
+  .rail-project { max-width: 180px; }
+  .main { padding: var(--sp-4); }
+  .setting { grid-template-columns: 1fr; }
+  .setting-control { align-items: flex-start; }
+  /* Every `.run-card` VARIANT collapses explicitly. A variant that inherits a
+     column count it does not have is the v0.49.2 Overview collision again, just
+     at a narrower width. */
+  .run-card { grid-template-columns: 16px 80px minmax(0, 1fr); }
+  .run-card.no-caret { grid-template-columns: 80px minmax(0, 1fr); }
+  .run-card.has-extra { grid-template-columns: 16px 80px auto minmax(0, 1fr); }
+  .run-card.no-caret.has-extra { grid-template-columns: 80px auto minmax(0, 1fr); }
+  .run-age { grid-column: 3; }
+  .run-card.no-caret .run-age { grid-column: 2; }
+  .run-card.has-extra .run-age { grid-column: 4; }
+  .run-card.no-caret.has-extra .run-age { grid-column: 3; }
+  .todo { grid-template-columns: 4px minmax(0, 1fr); }
+  .todo-cta { grid-column: 2; margin-top: var(--sp-2); }
+  /* Extra. v0.50.0 brought the rail's segment floor down here so a band was
+     never squeezed to a sliver. v0.53.0 deleted that floor entirely: the band
+     ladder puts the proportional bar INSIDE a full-width row, so there is
+     nothing left to squeeze and nothing left to tune per viewport. What the
+     ladder does need at this width is for its head to stop pretending it has
+     five columns. */
+  .ex-band-head { grid-template-columns: minmax(0, 30%) minmax(0, auto) minmax(0, 1fr) 16px; }
+  /* v0.55.0 — EVERY VARIANT COLLAPSES EXPLICITLY. A position row has no bar, so
+     its first column is the slot name rather than a track; leaving it on the
+     band template here would put the target under the caret. */
+  .ex-slot-head { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 16px; }
+  .ex-slot-when { grid-column: 1 / -1; }
+  .ex-band-chips { grid-column: 1 / -1; justify-content: flex-start; }
+  .ex-route-controls { align-items: stretch; }
+  .ex-route-controls .btn { width: 100%; }
+  /* v0.53.0 — `.ex-tool` was the one `.ex-*` block with no entry here at all.
+     At this width a tool card's actions are the reason you opened the panel, so
+     they go full width rather than being squeezed onto the end of a row. */
+  .ex-tool > .row-actions:not(:first-child) { align-items: stretch; }
+  .ex-tool > .row-actions:not(:first-child) .btn { width: 100%; }
+  /* v0.54.0 — a recovery row's identity is the longest thing in it, so at this
+     width it takes its own line rather than truncating a profile and a model
+     into nothing. The row is a FLEX COLUMN, so this is a wrap rather than a
+     second grid template. */
+  .ex-rec-head { flex-wrap: wrap; }
+  .ex-rec-who { flex: 1 1 100%; white-space: normal; }
+}
+
+@media (max-width: 600px) {
+  /* Below this there is no honest way to keep a chip, a slug and an age on one
+     line, so the card stacks: chip, then the slug and where it stands, then the
+     age. One column, in reading order. */
+  .run-card,
+  .run-card.no-caret,
+  .run-card.has-extra,
+  .run-card.no-caret.has-extra {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--sp-2);
+  }
+  .run-caret { display: none; }
+  .run-card .run-age { grid-column: 1; }
+  /* Extra: the provider catalog stops being a grid — below this a two-column
+     tile cannot hold a base URL and two links without wrapping mid-word — and
+     the connect form's two columns become one. */
+  .ex-provider-grid { grid-template-columns: minmax(0, 1fr); }
+  .ex-strip { gap: var(--sp-3); }
+  .ex-route-controls > * { flex: 1 1 100%; }
+  /* The tool card's head stops being a row: a label, a binary name and a state
+     chip cannot share a line honestly below this. */
+  .ex-tool > .row-actions:first-child { flex-direction: column; align-items: flex-start; }
+  /* A per-file position line cannot hold a path, a state word and a line delta
+     on one row below this — and the path is the half that must stay readable. */
+  .ex-rec-file { flex-direction: column; align-items: flex-start; }
+}

package/bin/webui/css/panels/boundary.css

@@ -0,0 +1,26 @@
+/* panels/boundary.css — orc ui
+   The checklist — what would make a REFUSE a yes. It is the product, so it is
+   the most legible thing on the card.
+
+   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. */
+
+.checklist {
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+}
+.checklist-head {
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-dim);
+  margin-bottom: var(--sp-2);
+}
+.checklist-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 13px; }
+.checklist-row + .checklist-row { margin-top: var(--sp-2); }
+.checklist-box { color: var(--text-dim); font-family: var(--mono); }
+
+/* A paid action. Deliberately quiet - it is not a call to action, it is an
+   honest statement that this panel cannot do the thing. */

package/bin/webui/css/panels/challenge.css

@@ -0,0 +1,151 @@
+/* panels/challenge.css — orc ui
+   The iteration timeline, the convergence chart, the findings.
+
+   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. */
+
+/* ================================================================ CHALLENGE */
+/* Reuses the existing palette tokens — no new colours. The convergence bar is
+   deliberately the same visual family as the budget cost bar, because both are
+   "one row, several kinds, stacked, and the KINDS must stay visibly separate". */
+
+.ch-list .run-where { text-transform: none; }
+
+/* --- the goal block, the reader score --- */
+.ch-score { display: flex; align-items: baseline; gap: var(--sp-3); }
+.ch-score-num {
+  font: 600 30px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  color: var(--accent);
+}
+
+/* --- the iteration timeline (the hero) ---------------------------------- */
+/* The wrapper SCROLLS rather than squeezing: the SVG carries an intrinsic width
+   solved from the node box, so a 14-iteration cycle is legible sideways instead
+   of illegible in place. A transparent track, both syntaxes — neither falls back
+   to the other. */
+.ch-rail-wrap {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: var(--sp-2);
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.ch-rail-wrap::-webkit-scrollbar { height: 8px; }
+.ch-rail-wrap::-webkit-scrollbar-track { background: transparent; }
+.ch-rail-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+.ch-rail { display: block; }
+.ch-rail-link { stroke: var(--line); stroke-width: 2; }
+/* A version break: a comparison across one is not a comparison, so it is drawn,
+   not implied. */
+.ch-rail-break { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 3 3; }
+.ch-rail-breaklabel { fill: var(--warn); font-size: 10px; }
+.ch-rail-box { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
+.ch-rail-node.pass .ch-rail-box { stroke: var(--ok); fill: var(--ok-wash); }
+.ch-rail-node.fail .ch-rail-box { stroke: var(--warn); fill: var(--warn-wash); }
+.ch-rail-n { fill: var(--text); font: 600 15px/1 var(--mono, ui-monospace, monospace); }
+.ch-rail-verdict { fill: var(--text-dim); font-size: 11px; }
+/* Staggered entrance, `backwards` so the geometry lands once and the delay never
+   leaves a node invisible. */
+.ch-rail-node { animation: ch-node-in .28s ease-out backwards; }
+@keyframes ch-node-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+/* --- the convergence chart ---------------------------------------------- */
+.ch-conv { margin-top: var(--sp-3); display: grid; gap: var(--sp-1); }
+.ch-conv-row { display: grid; grid-template-columns: 2ch minmax(0, 1fr) 3ch; align-items: center; gap: var(--sp-2); }
+.ch-conv-n, .ch-conv-blocking { font: 500 12px/1 var(--mono, ui-monospace, monospace); color: var(--text-faint); }
+.ch-conv-blocking { text-align: right; color: var(--text-dim); }
+.ch-conv-bar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
+/* Draws left to right on open, once: the SHAPE of the trend is the information,
+   so animating it is the fastest way to read it. */
+.ch-conv-seg { width: var(--w); animation: ch-grow .5s ease-out backwards; }
+@keyframes ch-grow { from { width: 0; } to { width: var(--w); } }
+.ch-sev-p0 { background: var(--bad); }
+.ch-sev-p1 { background: var(--warn); }
+.ch-sev-p2 { background: var(--accent-dim); }
+.ch-sev-p3 { background: var(--idle); }
+
+/* --- findings ------------------------------------------------------------ */
+.ch-finding {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-3);
+  display: grid;
+  gap: var(--sp-2);
+}
+.ch-anchor { color: var(--text-faint); font-size: 12px; }
+.ch-quote {
+  margin: 0;
+  padding-left: var(--sp-3);
+  border-left: 3px solid var(--line);
+  color: var(--text-dim);
+  overflow-wrap: anywhere;
+}
+/* The paste block is wide by nature. It scrolls INSIDE itself — the page body
+   never scrolls horizontally. */
+.ch-prompt { max-height: 320px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
+.ch-prompt::-webkit-scrollbar { width: 8px; height: 8px; }
+.ch-prompt::-webkit-scrollbar-track { background: transparent; }
+.ch-prompt::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+
+/* --- the council (v0.49.1) ----------------------------------------------- */
+/* One row per roster lens. A NOT-RUN row keeps its slot and a NOT-SELECTED row
+   renders muted (`.row-muted`, defined once in 03-components.css) — filtering
+   either out makes "the contrarian found nothing" and "the contrarian never
+   ran" look identical. Same reason an OFF phase keeps its slot in the Flow
+   stepper. */
+.ch-lens-row {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-2);
+  display: grid;
+  gap: var(--sp-1);
+}
+.ch-lens-name { font-weight: 600; }
+.ch-lens-agent { font-size: 12px; }
+.ch-monday-head { margin-top: var(--sp-2); font-weight: 600; font-size: 13px; }
+.ch-monday { margin: 0; padding-left: var(--sp-4); color: var(--text-dim); display: grid; gap: 2px; }
+
+/* The per-lens legend under the convergence chart. The bar keeps SEVERITY
+   stacking — a bar that works does not gain a second dimension — so "which lens
+   is earning its money" gets its own row instead. */
+.ch-lens-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-3);
+  margin-top: var(--sp-2);
+  font-size: 12px;
+  color: var(--text-faint);
+}
+.ch-lens-legend-item { display: inline-flex; gap: 6px; align-items: baseline; }
+.ch-lens-legend-n { color: var(--text); font-variant-numeric: tabular-nums; }
+
+/* --- premise challenges --------------------------------------------------- */
+/* THE LOUDEST CARD ON THE PANEL when one is open, and it sits above the
+   findings: a premise disputes the yardstick every finding below it was
+   measured against. */
+.ch-premise-loud { border-color: var(--bad); }
+.ch-premise {
+  border: 1px solid var(--line-soft);
+  border-left: 3px solid var(--bad);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-3);
+  display: grid;
+  gap: var(--sp-2);
+}
+
+/* --- opportunities -------------------------------------------------------- */
+/* NO SEVERITY COLOUR ANYWHERE IN HERE. An opportunity never blocks and never has
+   a severity; colouring it like a defect is exactly the confusion the class
+   split exists to prevent. */
+.ch-opportunity {
+  border: 1px dashed var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-3);
+  display: grid;
+  gap: var(--sp-2);
+}

package/bin/webui/css/panels/crosslink.css

@@ -0,0 +1,194 @@
+/* panels/crosslink.css — orc ui
+   The vault graph and the folder picker. .vault-node's box MUST stay the same
+   size as VAULT.W/H in js/panels/crosslink.js — a test asserts it.
+
+   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. */
+
+/* --- Crosslink ----------------------------------------------------------- */
+
+/* Nothing is linked yet, so the Design tab has nothing to draw. The pulse points
+   at the tab that can fix that; it is dropped the moment a link exists. */
+.tabs button.tab-spot { color: var(--accent); animation: tab-spot 2s ease-in-out infinite; }
+@keyframes tab-spot {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: .5; }
+}
+
+/* THE VAULT GRAPH. Absolutely-positioned repo boxes over a stretched SVG edge
+   layer — both use the same normalised coordinates, so they line up at any
+   width without measuring anything. */
+/* Width and height are set inline by vaultCard — the canvas is sized to the
+   ring it has to hold, so it is never the thing that decides the spacing.
+   `margin: 0 auto` centres it when the panel is wider than the graph; when the
+   panel is NARROWER, the `.scroll-x` wrapper scrolls rather than compressing
+   the ring back into a collision. */
+.vault {
+  position: relative;
+  margin: 0 auto;
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius);
+  background: radial-gradient(circle at 50% 50%, var(--surface-2) 0%, var(--surface) 62%);
+}
+.vault-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
+.vault-line {
+  stroke: var(--line);
+  stroke-width: 1.5;
+  /* pathLength="1" — the draw-in is written in fractions, not pixels. */
+  stroke-dasharray: 1;
+  animation: edge-draw var(--dur-slow) var(--ease) var(--d, 0ms) both;
+}
+/* A short dash running from → to. The direction of travel IS the direction of
+   the dependency, which is the whole point of a crosslink edge. */
+.vault-pulse {
+  stroke: var(--accent);
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-dasharray: .07 .93;
+  opacity: .85;
+  animation: edge-pulse 2.8s linear var(--d, 0ms) infinite;
+}
+@keyframes edge-draw {
+  from { stroke-dashoffset: 1; opacity: 0; }
+  to   { stroke-dashoffset: 0; opacity: 1; }
+}
+@keyframes edge-pulse {
+  from { stroke-dashoffset: 1; }
+  to   { stroke-dashoffset: 0; }
+}
+.vault-via { fill: var(--text-faint); font-family: var(--mono); font-size: 11px; }
+
+/* Hover a repo: its edges brighten, every other edge steps back. */
+.vault-edge { transition: opacity var(--dur) var(--ease); }
+.vault-edge.edge-dim { opacity: .22; }
+.vault-edge.edge-hi .vault-line { stroke: var(--accent-dim); }
+.vault-edge.edge-hi .vault-pulse { stroke-width: 3.5; opacity: 1; }
+
+/* THE BOX SIZE IS FIXED, AND THAT IS LOAD-BEARING. These two numbers are the
+   VAULT.W / VAULT.H the ring radii are solved from in app.js — change one and
+   you must change the other, or the arithmetic that guarantees no two repos
+   overlap is being done against the wrong box. A box that grew to fit its
+   longest repo name could not be spaced by arithmetic at all, only measured;
+   long names ellipsis instead. */
+.vault-node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  width: 156px;
+  height: 78px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 2px;
+  padding: var(--sp-2) var(--sp-3);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  font: inherit;
+  text-align: left;
+  animation: vault-in var(--dur-slow) var(--ease) var(--d, 0ms) both;
+  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+}
+button.vault-node { cursor: pointer; }
+/* A hovered repo lifts above its neighbours' shadows, never under them. */
+.vault-node:hover, .vault-node.vault-hi { border-color: var(--accent); z-index: 3; }
+button.vault-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 3; }
+.vault-name,
+.vault-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vault-name { font-family: var(--mono); font-size: 13px; color: var(--text); }
+.vault-sub { font-size: 11px; color: var(--text-faint); }
+/* The state chip must not push the box taller than the geometry assumes. */
+.vault-node .chip { flex: none; margin-top: 2px; max-width: 100%; }
+/* This repo is the hub — it is the one node that is not a link. */
+.vault-hub { border-color: var(--accent); background: var(--accent-wash); z-index: 2; }
+.vault-consume { border-left: 3px solid var(--accent); }
+.vault-provide { border-left: 3px solid var(--ok); }
+.vault-none { border-left: 3px solid var(--warn); }
+@keyframes vault-in {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
+  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+/* Hovering a graph node lights its detail row, so the picture and the list are
+   visibly the same set of things. */
+.linked-hi { border-color: var(--accent) !important; background: var(--surface-2); }
+
+.linkform { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
+.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
+.field-hint { font-size: 11px; color: var(--text-faint); }
+.field select.text-input { padding: 5px 8px; }
+
+.kind-picker { display: flex; flex-wrap: wrap; gap: 4px; }
+.kind {
+  border: 1px solid var(--line);
+  background: var(--surface-2);
+  color: var(--text-dim);
+  border-radius: 100px;
+  padding: 2px 9px;
+  font-size: 11px;
+  font-family: var(--mono);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
+              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
+}
+.kind:hover { border-color: var(--accent-dim); color: var(--text); }
+.kind-on { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.04); }
+
+/* --- Crosslink: the folder picker ---------------------------------------- */
+/* A directory listing the SERVER walks, rendered as a list you click through.
+   Nothing here reads a file — the two chips are a single existsSync each. */
+
+.path-row { display: flex; gap: var(--sp-2); align-items: center; }
+.path-row .text-input { flex: 1 1 auto; min-width: 0; }
+.path-row .btn { flex: none; }
+
+.picker-crumbs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+.picker-path {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text-dim);
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  overflow-wrap: anywhere;
+}
+.picker-list {
+  max-height: 46vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-2);
+  background: var(--surface-2);
+}
+.picker-item {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: 6px var(--sp-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
+}
+.picker-item:hover { background: var(--surface-3); border-color: var(--accent-dim); }
+.picker-icon { color: var(--text-faint); font-size: 11px; }
+.picker-item:hover .picker-icon { color: var(--accent); }
+.picker-name { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
+.picker-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
+.picker-into { color: var(--text-faint); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
+.picker-item:hover .picker-into { opacity: 1; }
+.picker-foot { display: flex; justify-content: flex-end; }
+.picker-warn { color: var(--warn); }