@azure-id/orc 0.55.0

package/bin/webui/css/panels/docs.css

@@ -0,0 +1,254 @@
+/* panels/docs.css — orc ui
+   The section ribbon, the health bars, the wave preview.
+
+   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. */
+
+/* ============================================================ DOCS (v0.48.0) */
+
+/* --- THE RIBBON — the one picture this panel is for ---------------------- */
+/* Each segment's width is `lines × PX` with a floor, solved in JS from the box
+   size, so the SVG carries an INTRINSIC width. The wrapper therefore SCROLLS
+   rather than squeezing a 40-section document into unreadable slivers — the
+   ch-rail rule, and the reason the viewBox is never stretched. Transparent
+   track, both syntaxes: neither falls back to the other. */
+.doc-ribbon-wrap {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: var(--sp-2);
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.doc-ribbon-wrap::-webkit-scrollbar { height: 8px; }
+.doc-ribbon-wrap::-webkit-scrollbar-track { background: transparent; }
+.doc-ribbon-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+.doc-ribbon { display: block; }
+
+.doc-seg { cursor: pointer; outline: none; }
+.doc-seg-box { fill: var(--surface-3); stroke: var(--line-soft); stroke-width: 1; }
+.doc-seg-n { fill: var(--text-faint); font: 500 9px/1 var(--mono, ui-monospace, monospace); }
+.doc-seg:hover .doc-seg-box,
+.doc-seg:focus-visible .doc-seg-box { stroke: var(--accent); stroke-width: 2; }
+
+/* The six states the CLI can emit, and no others. An `open` section is drawn
+   in the warning colour because it is a REAL state of the document — something
+   nobody has decided yet — not a defect and not an absence. `unconfirmed` is
+   drawn the same way and for the same reason: it is an honest answer about a
+   file nobody validated, not a defect in it. */
+.doc-seg-planned .doc-seg-box { fill: var(--surface-3); stroke-dasharray: 3 3; }
+.doc-seg-written .doc-seg-box { fill: var(--accent-dim); stroke: var(--accent-dim); }
+.doc-seg-checked .doc-seg-box { fill: var(--ok); stroke: var(--ok); }
+.doc-seg-useredited .doc-seg-box,
+.doc-seg-user-edited .doc-seg-box { fill: var(--warn-wash); stroke: var(--warn); }
+.doc-seg-open .doc-seg-box { fill: var(--warn-wash); stroke: var(--warn); stroke-dasharray: 3 3; }
+.doc-seg-unconfirmed .doc-seg-box { fill: var(--warn-wash); stroke: var(--warn); stroke-dasharray: 1 2; }
+/* A findings marker is STATIC. A blinking error is a reduced-motion hazard and
+   reads as an urgency this panel has no right to imply. */
+.doc-seg-mark { fill: var(--bad); }
+
+/* Two SEPARATE animations, for the reason the flow stepper needed two: the
+   entrance places geometry ONCE and fills `backwards`, the pulse carries colour
+   forever. One animation doing both freezes the geometry when the other is
+   capped. */
+.doc-seg { animation: doc-seg-in .26s ease-out backwards; }
+@keyframes doc-seg-in { from { opacity: 0; transform: scaleY(.4); transform-origin: center; } to { opacity: 1; transform: none; } }
+/* The travelling sheen loops across the WRITTEN segments only — a long, mostly
+   idle cycle, like the flow stepper's sweep. */
+.doc-seg-written .doc-seg-box { animation: doc-sheen 9s ease-in-out infinite; }
+@keyframes doc-sheen { 0%, 82% { opacity: .85; } 90% { opacity: 1; } 100% { opacity: .85; } }
+/* A section the human edited gets a soft pulse in its OWN colour, so it reads
+   as "yours", never as "wrong". */
+.doc-seg-user-edited .doc-seg-box { animation: doc-mine 3.4s ease-in-out infinite; }
+@keyframes doc-mine { 0%, 100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }
+
+.doc-legend { gap: var(--sp-3); flex-wrap: wrap; }
+.doc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.doc-legend-swatch {
+  width: 14px; height: 10px; border-radius: 2px;
+  background: var(--surface-3); border: 1px solid var(--line-soft);
+}
+.doc-legend-swatch.doc-seg-written { background: var(--accent-dim); border-color: var(--accent-dim); }
+.doc-legend-swatch.doc-seg-checked { background: var(--ok); border-color: var(--ok); }
+.doc-legend-swatch.doc-seg-user-edited { background: var(--warn-wash); border-color: var(--warn); }
+.doc-legend-swatch.doc-seg-open { background: var(--warn-wash); border-color: var(--warn); border-style: dashed; }
+.doc-legend-swatch.doc-seg-unconfirmed { background: var(--warn-wash); border-color: var(--warn); border-style: dotted; }
+
+/* --- sections + reveal ---------------------------------------------------- */
+.doc-rows { display: grid; gap: var(--sp-1); }
+.doc-reveal {
+  border-left: 3px solid var(--line);
+  padding-left: var(--sp-3);
+  max-height: 340px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.doc-reveal::-webkit-scrollbar { width: 8px; height: 8px; }
+.doc-reveal::-webkit-scrollbar-track { background: transparent; }
+.doc-reveal::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+
+/* --- health bars ---------------------------------------------------------- */
+.doc-bars { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
+.doc-bar-row { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr) 3ch; align-items: center; gap: var(--sp-2); }
+.doc-bar-label { font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
+.doc-bar { height: 10px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
+.doc-bar-seg { width: var(--w); height: 100%; background: var(--warn); animation: doc-grow .45s ease-out backwards; }
+@keyframes doc-grow { from { width: 0; } to { width: var(--w); } }
+.doc-bar-n { text-align: right; font: 500 12px/1 var(--mono, ui-monospace, monospace); color: var(--text-dim); }
+
+/* --- the wave preview ----------------------------------------------------- */
+.doc-waves { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
+.doc-wave {
+  display: grid;
+  grid-template-columns: minmax(0, 9ch) minmax(0, 1fr);
+  gap: var(--sp-3);
+  align-items: start;
+  animation: doc-wave-in .3s ease-out backwards;
+  animation-delay: calc(var(--i) * 70ms);
+}
+@keyframes doc-wave-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
+.doc-wave-n { font: 600 12px/1.6 var(--mono, ui-monospace, monospace); color: var(--text-faint); }
+.doc-wave-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-2); }
+.doc-agent {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-2) var(--sp-3);
+  display: grid;
+  gap: 6px;
+}
+.doc-agent.oversized { border-color: var(--bad); }
+.doc-agent-name { font-size: 11px; color: var(--text-faint); overflow-wrap: anywhere; }
+.doc-agent-secs { font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
+
+/* --- the SECTION FILES (v0.49.0) ------------------------------------------
+   sections/ is the source of truth, so this list is the one that has to read
+   well before a single compile has ever run. A `planned` row KEEPS ITS SLOT:
+   "not written yet" is an answer, and a list that hides it cannot be designed. */
+.doc-part {
+  border: 1px solid var(--line-soft); border-radius: var(--r-2);
+  background: var(--surface-2); padding: var(--sp-2); display: grid; gap: 4px;
+}
+.doc-part-head { display: flex; align-items: center; gap: var(--sp-2); }
+.doc-subpart {
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding-left: var(--sp-4); color: var(--text-dim); font-size: var(--fs-sm);
+}
+.doc-subpart-mark { color: var(--text-faint); font-family: var(--mono, ui-monospace, monospace); }
+.doc-wave-strip { margin-bottom: var(--sp-2); flex-wrap: wrap; }
+
+/* ── v0.49.2 — house rules, the run map, and what it cost ──────────────────
+   No colour token is defined here: every one comes from 00-tokens.css on bare
+   :root, which is what keeps the light/dark/system trio honest. */
+
+.rule-group { margin-top: var(--sp-3); }
+.rule-group-head {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: var(--sp-2);
+}
+/* v0.49.5 — THE LEDGER IS A TEXT CONFIG, so the control is a textarea and not a
+   form. It is monospaced because the file has a shape (three headings) the user
+   is editing directly, and it resizes vertically because a P0 is as long as it
+   needs to be. */
+.rule-editor {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: var(--sp-3);
+  min-height: 320px;
+  resize: vertical;
+  padding: var(--sp-3);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  tab-size: 2;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  /* Both syntaxes, because neither falls back to the other. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.rule-editor::-webkit-scrollbar { width: 9px; }
+.rule-editor::-webkit-scrollbar-track { background: transparent; }
+.rule-editor::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
+.rule-editor:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.rule-path {
+  font-family: var(--mono);
+  font-size: 11px;
+  margin-top: var(--sp-2);
+  overflow-x: auto;
+  white-space: nowrap;
+}
+/* A frozen block, VERBATIM — the user's own words, wrapped but never re-flowed
+   into ORC's voice. */
+.rule-block {
+  margin: 0;
+  padding: var(--sp-2) var(--sp-3);
+  border-left: 2px solid var(--line);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.rule-block-new { border-left-color: var(--warn); }
+.rule-boundary { margin-top: var(--sp-3); border-top: 1px solid var(--line-soft); padding-top: var(--sp-2); }
+.rule-drift { margin-top: var(--sp-3); }
+.rule-drift-row {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  padding: 2px 0;
+  margin-top: var(--sp-2);
+}
+
+/* The wave table and the per-section cost table share one shape. Wide content
+   scrolls INSIDE its own box; the page body never scrolls sideways. */
+.fc-table { margin-top: var(--sp-3); overflow-x: auto; }
+.fc-row {
+  display: grid;
+  grid-template-columns: 78px minmax(0, 1fr) 72px 90px;
+  gap: var(--sp-3);
+  align-items: center;
+  padding: var(--sp-2) 0;
+  border-top: 1px solid var(--line-soft);
+  font-size: 12.5px;
+}
+.fc-wave { font-family: var(--mono); color: var(--text-dim); }
+.fc-secs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fc-lines, .fc-agents { font-family: var(--mono); color: var(--text-dim); text-align: right; }
+/* A section nothing could be joined to KEEPS ITS SLOT and reads as unknown —
+   an em dash, never a zero. */
+.fc-row-unknown .fc-agents { color: var(--text-faint); }
+
+/* FOUR TOKEN KINDS, NEVER BLENDED. cache-read is usually the largest count at
+   about a tenth of the price, which is the whole reason it stays its own band. */
+.tok-bar-wrap { margin-top: var(--sp-3); }
+.tok-bar {
+  display: flex;
+  height: 12px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--surface-2);
+}
+.tok-seg { width: var(--w); min-width: 0; }
+.tok-input { background: var(--accent); }
+.tok-cache-write { background: var(--warn); }
+.tok-cache-read { background: var(--idle); }
+.tok-output { background: var(--ok); }
+.tok-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-3);
+  margin-top: var(--sp-2);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text-dim);
+}
+.tok-legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.tok-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

package/bin/webui/css/panels/experiment.css

@@ -0,0 +1,23 @@
+/* panels/experiment.css — orc ui
+   The lane list.
+
+   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. */
+
+/* --- Experiment ---------------------------------------------------------- */
+
+.lane-list { display: flex; flex-direction: column; gap: var(--sp-2); }
+.lane {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-2) 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), background var(--dur-fast) var(--ease);
+}
+.lane:hover { border-color: var(--accent-dim); background: var(--surface-3); }
+.lane-cmd { font-family: var(--mono); font-size: 13px; color: var(--accent); }