@azure-id/orc 0.55.0

package/bin/webui/css/panels/flow.css

@@ -0,0 +1,177 @@
+/* panels/flow.css — orc ui
+   The compiled DIY pipeline stepper, presets, and the staged-edit bar.
+
+   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. */
+
+/* --- Flow stepper -------------------------------------------------------- */
+
+/* The compiled DIY pipeline, left to right. The sweep LOOPS (v0.44.0): a single
+   pulse travels the rail every --sweep, and the rail is at rest for the ~88% of
+   the cycle in between. The stagger is per-element via --d, so the pulse moves
+   in stitch order instead of the whole rail blinking at once.
+
+   It runs forever because the rail is the one thing on this panel that says
+   "these phases happen in this order", and a one-shot said it before the card
+   had finished arriving. The long idle stretch is what keeps a permanent
+   animation from behaving like a permanent distraction.
+
+   The ENTRANCE and the PULSE are separate animations on purpose: one animates
+   geometry (once, `backwards`, so hover keeps its transform afterwards), the
+   other animates colour (forever). Merging them is how the old rule ended up
+   with a filled `transform: none` sitting on top of the hover lift. */
+.stepper { display: flex; align-items: stretch; gap: 0; padding: var(--sp-2) 2px var(--sp-3); min-width: min-content; --sweep: 4200ms; }
+.step {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: flex-start;
+  padding: var(--sp-2) var(--sp-3);
+  min-width: 84px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  animation: step-in var(--dur-slow) var(--ease) var(--d, 0ms) backwards;
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
+              transform var(--dur-fast) var(--ease);
+  /* The pulse lives on an overlay, not on the step itself. A running animation
+     wins over a transition for the SAME property, so pulsing `.step`'s own
+     border-color and background forever would have silently killed the hover
+     state on every step — a permanent animation must not cost an interaction.
+     `isolation: isolate` scopes the overlay's negative z-index to this box, so
+     it paints above the step's background and below its text. */
+  position: relative;
+  isolation: isolate;
+}
+.step::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: -1;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+  animation: step-pulse var(--sweep) linear var(--d, 0ms) infinite;
+}
+button.step { cursor: pointer; }
+button.step:hover { border-color: var(--accent-dim); background: var(--surface-3); transform: translateY(-2px); }
+button.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.step-name { font-family: var(--mono); font-size: 13px; color: var(--text); }
+.step-note { font-size: 11px; color: var(--text-faint); max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
+
+/* An OFF phase keeps its slot and turns RED. It is not a dimmed absence — it is
+   a phase this flow deliberately does not run, and that is worth seeing. */
+.step-off { border-color: var(--bad); background: var(--bad-wash); }
+.step-off::before { animation-name: step-pulse-off; }
+.step-off .step-name { color: var(--bad); text-decoration: line-through; text-decoration-color: rgba(240, 83, 63, .55); }
+.step-off .step-note { color: var(--bad); }
+button.step-off:hover { border-color: var(--bad); background: rgba(240, 83, 63, .2); }
+
+/* Geometry only — colour belongs to the pulse. */
+@keyframes step-in {
+  from { opacity: 0; transform: translateX(-10px); }
+  to   { opacity: 1; transform: none; }
+}
+/* Lit for ~4% of the cycle, fully transparent for the rest of it — the overlay
+   only ever ADDS colour, so at rest the step is exactly its own styling and
+   hover works normally. An OFF phase pulses in its own red, so the loop never
+   quietly recolours it back to "running". */
+@keyframes step-pulse {
+  0%, 12%, 100% { border-color: transparent; background: transparent; box-shadow: none; }
+  4%            { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 3px var(--accent-wash); }
+}
+@keyframes step-pulse-off {
+  0%, 12%, 100% { border-color: transparent; background: transparent; box-shadow: none; }
+  4%            { border-color: var(--bad); background: rgba(240, 83, 63, .22); box-shadow: 0 0 0 3px var(--bad-wash); }
+}
+
+/* The connector. The base hairline is always there; the accent segment travels
+   across it once per cycle, left to right, then fades — that IS the "in this
+   order", and it is what carries the pulse from one phase to the next. */
+.step-link { position: relative; align-self: center; width: 22px; height: 2px; background: var(--line); flex: none; }
+.step-flow {
+  position: absolute;
+  inset: 0;
+  background: var(--accent);
+  transform-origin: left center;
+  transform: scaleX(0);
+  animation: step-flow var(--sweep) linear var(--d, 0ms) infinite;
+}
+@keyframes step-flow {
+  0%          { transform: scaleX(0); opacity: 1; }
+  4%          { transform: scaleX(1); opacity: 1; }
+  9%          { transform: scaleX(1); opacity: 0; }
+  9.01%, 100% { transform: scaleX(0); opacity: 0; }
+}
+
+/* A shipped starting shape for the flow. Same two-column row as `.action` on
+   Maintenance — it is the same kind of thing: a named CLI invocation with its
+   command visible before you press it. */
+.preset-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--sp-4);
+  align-items: center;
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  transition: border-color var(--dur-fast) var(--ease);
+}
+.preset-row:hover { border-color: var(--accent-dim); }
+.preset-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+/* The shape you are already on. It keeps its row (removing it would make "you
+   are on lean" and "lean does not exist" look the same) and loses its button. */
+.preset-active { border-color: var(--ok); background: var(--ok-wash); }
+.preset-active:hover { border-color: var(--ok); }
+
+/* --- Staged edits -------------------------------------------------------- */
+
+/* A row with an unwritten change. The marker is on the LEFT edge and the label
+   is beside the key, because the control itself already shows the new value —
+   what is missing without this is "and it has not been written yet". */
+.setting.staged {
+  border-left: 2px solid var(--accent);
+  padding-left: calc(var(--sp-3) - 2px);
+  background: var(--accent-wash);
+}
+
+.edit-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-4);
+  flex-wrap: wrap;
+  padding: var(--sp-3) var(--sp-4);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+}
+/* It follows you ONLY while there is something to lose. A permanently sticky
+   bar is a permanently smaller viewport; a bar you have to scroll to find is an
+   Apply that gets forgotten. Dirty is the one state where both matter. */
+.edit-bar-dirty {
+  position: sticky;
+  bottom: var(--sp-4);
+  z-index: 6;
+  border-color: var(--accent-dim);
+  background: var(--surface-3);
+  box-shadow: var(--shadow);
+}
+.edit-summary { flex: 1 1 260px; min-width: 0; }
+.edit-actions { display: flex; gap: var(--sp-2); flex: none; margin-left: auto; }
+.edit-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
+.edit-chip {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-dim);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 100px;
+  padding: 1px 9px;
+}
+.edit-key { color: var(--accent); }

package/bin/webui/css/panels/handoff.css

@@ -0,0 +1,67 @@
+/* panels/handoff.css — orc ui
+   The undo box (shown BEFORE a write) and .lane-cmd — the visual form of
+   "a PAID action is a copy-able command, never a button".
+
+   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. */
+
+.lane-cmd {
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+}
+.lane-cmd-head {
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-dim);
+  margin-bottom: var(--sp-2);
+}
+.cmd {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-2) var(--sp-3);
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre;
+  /* Transparent track, both syntaxes - neither falls back to the other. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+.cmd::-webkit-scrollbar { height: 8px; }
+.cmd::-webkit-scrollbar-track { background: transparent; }
+.cmd::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+
+/* The undo command, before the write. Framed in the warning colour because the
+   moment it matters is a moment somebody is worried. */
+.undo-box {
+  border: 1px solid var(--warn);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  background: var(--warn-wash);
+}
+.undo-head { font-size: 12px; color: var(--warn); margin-bottom: var(--sp-2); font-weight: 600; }
+
+.free-box {
+  border: 1px solid var(--ok);
+  background: var(--ok-wash);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+}
+.free-head { font-size: 12px; color: var(--ok); font-weight: 600; margin-bottom: var(--sp-2); }
+.free-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 12.5px; }
+.free-row + .free-row { margin-top: var(--sp-2); }
+
+.after-box {
+  border-left: 2px solid var(--warn);
+  padding-left: var(--sp-3);
+}
+.after-head {
+  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
+  color: var(--text-dim); margin-bottom: var(--sp-2);
+}
+.after-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 12.5px; }
+.after-row + .after-row { margin-top: var(--sp-2); }

package/bin/webui/css/panels/knowledge.css

@@ -0,0 +1,86 @@
+/* panels/knowledge.css — the Knowledge panel (v0.49.1).
+
+   Five tabs' worth of surface. Loaded by app.html in the order its <link> sits
+   in that manifest, and for CSS the load order IS the cascade order — which is
+   why 06-responsive and 04-motion come after every panel sheet.
+
+   NO COLOUR TOKEN IS DEFINED HERE. Every one of them is declared once, on bare
+   :root, in 00-tokens.css. */
+
+/* --- the header strip (v0.49.1) ------------------------------------------ */
+/* Above the tabs, on every one of them: what ORC knows about this repo, in one
+   line. A `—` means the CLI could not compute it, and that is an ANSWER. */
+.kn-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-4);
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  margin-bottom: var(--sp-3);
+}
+.kn-strip-item { display: grid; gap: 2px; }
+.kn-strip-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.kn-strip-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
+
+/* --- the per-doc tier bar + the coverage bar ------------------------------ */
+.kn-tierbar {
+  display: flex;
+  height: 8px;
+  min-width: 120px;
+  flex: 1;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--line-soft);
+}
+.kn-tierbar-seg { width: var(--w); }
+.kn-tier-ok { background: var(--ok); }
+.kn-tier-warn { background: var(--warn); }
+.kn-tier-bad { background: var(--bad); }
+.kn-tier-idle { background: var(--idle); }
+
+.kn-coverage { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
+.kn-coverage-num { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+/* --- rows that expand IN PLACE ------------------------------------------- */
+/* One at a time, detail fetched on first open, and NO detail box below the
+   table — the Runs-row rule. */
+.kn-doc-row { cursor: pointer; }
+.kn-doc-row:hover td { background: var(--surface-2); }
+.kn-doc-row.open td { background: var(--surface-2); }
+.kn-doc-detail > td { background: var(--surface-2); padding: var(--sp-3); }
+
+/* --- revealed prose ------------------------------------------------------- */
+/* Rendered as DOM by renderMd, never as HTML. It scrolls INSIDE itself; the page
+   body never scrolls horizontally. */
+.kn-body {
+  margin-top: var(--sp-2);
+  max-height: 420px;
+  overflow: auto;
+  padding: var(--sp-3);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.kn-body::-webkit-scrollbar { width: 8px; height: 8px; }
+.kn-body::-webkit-scrollbar-track { background: transparent; }
+.kn-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+
+/* --- patterns ------------------------------------------------------------- */
+.kn-pattern {
+  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-2);
+}
+/* The most decision-shaped thing in a pattern file, and until now invisible
+   outside it. */
+.kn-conflicts { border-left: 3px solid var(--warn); padding-left: var(--sp-3); display: grid; gap: 4px; }
+.kn-conflicts-head { font-weight: 600; font-size: 13px; }
+
+/* --- preview-then-apply --------------------------------------------------- */
+.kn-prune { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
+.kn-prune-head { font-weight: 600; font-size: 13px; }

package/bin/webui/css/panels/learn.css

@@ -0,0 +1,154 @@
+/* panels/learn.css — orc ui
+   The contents rail plus one section.
+
+   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. */
+
+/* --- Learn --------------------------------------------------------------- */
+/* A contents rail plus ONE section, rather than every section stacked open.
+   The walkthrough is ordered and you are at a position in it — the layout says
+   so, which is what the wall of eight boxes could not. */
+
+.learn {
+  display: grid;
+  grid-template-columns: 244px minmax(0, 1fr);
+  gap: var(--sp-4);
+  align-items: start;
+}
+
+.learn-side {
+  position: sticky;
+  top: var(--sp-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+  padding: var(--sp-3);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  max-height: calc(100vh - var(--sp-6));
+}
+.learn-side-head {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-faint);
+  padding: 0 var(--sp-2);
+}
+.learn-side .text-input { font-family: var(--font); font-size: 12.5px; padding: 5px 9px; }
+.learn-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
+.learn-nav-item {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 6px var(--sp-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-dim);
+  text-align: left;
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.learn-nav-item:hover { background: var(--surface-2); color: var(--text); }
+.learn-nav-item[aria-current="true"] {
+  background: var(--accent-wash);
+  color: var(--text);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.learn-num {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid var(--line);
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--text-faint);
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
+              border-color var(--dur-fast) var(--ease);
+}
+.learn-nav-item[aria-current="true"] .learn-num { background: var(--accent); border-color: var(--accent); color: #fff; }
+/* Sections already behind you read as done, so the rail doubles as progress. */
+.learn-seen .learn-num { border-color: var(--ok); color: var(--ok); }
+.learn-nav-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.learn-result { font-size: 11.5px; color: var(--text-faint); padding: 0 var(--sp-2); }
+
+.learn-pane {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 0 var(--sp-5) var(--sp-4);
+  overflow: hidden;
+  min-width: 0;
+}
+.learn-progress { height: 3px; background: var(--surface-3); margin: 0 calc(var(--sp-5) * -1); }
+.learn-progress-fill {
+  height: 100%;
+  width: 0;
+  background: var(--accent);
+  transition: width var(--dur-slow) var(--ease);
+}
+.learn-meta {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-faint);
+  margin-top: var(--sp-4);
+  font-variant-numeric: tabular-nums;
+}
+.learn-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }
+
+.learn-article { margin-top: var(--sp-4); animation: learn-in var(--dur) var(--ease); }
+@keyframes learn-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: none; }
+}
+.learn-para { font-size: 13.5px; line-height: 1.7; color: var(--text-dim); }
+.learn-para + .learn-para { margin-top: var(--sp-3); }
+.learn-bullet {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-dim);
+  padding-left: var(--sp-4);
+  position: relative;
+  margin-top: var(--sp-2);
+}
+.learn-bullet::before { content: "•"; position: absolute; left: var(--sp-2); color: var(--accent); }
+/* A pipeline line is a diagram, not a sentence. */
+.learn-flowline {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  margin-top: var(--sp-3);
+  overflow-x: auto;
+  white-space: pre;
+}
+/* An indented command line becomes a click-to-copy chip. */
+.learn-cmd-row { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: 6px; flex-wrap: wrap; }
+.learn-cmd {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--accent);
+  background: var(--accent-wash);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  padding: 2px 9px;
+  cursor: pointer;
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+}
+.learn-cmd:hover { border-color: var(--accent); background: var(--surface-3); }
+.learn-cmd-what { font-size: 12.5px; color: var(--text-dim); }
+.learn-hint { margin-top: var(--sp-4); }
+
+.learn-foot { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-5); flex-wrap: wrap; }
+.learn-foot .btn:last-child { margin-left: auto; }

package/bin/webui/css/panels/maintenance.css

@@ -0,0 +1,55 @@
+/* panels/maintenance.css — orc ui
+   The preview/apply job surface.
+
+   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. */
+
+/* --- Maintenance --------------------------------------------------------- */
+
+.action {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--sp-4);
+  align-items: center;
+  padding: var(--sp-4);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+}
+.action-cmd {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--accent);
+  background: var(--accent-wash);
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  display: inline-block;
+  margin-top: 6px;
+}
+.file-list {
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--surface-2);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.file-list div { padding: 1px 0; }
+
+.job-output {
+  max-height: 320px;
+  overflow-y: auto;
+  background: #000;
+  color: #d7dae0;
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  font-family: var(--mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+:root[data-theme="light"] .job-output { background: #12151a; }