@azure-id/orc 0.55.0

package/bin/webui/css/panels/mockrun.css

@@ -0,0 +1,268 @@
+/* panels/mockrun.css — orc ui
+   The gallery, the document pane, and the markdown-as-DOM rules renderMd emits.
+
+   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. */
+
+/* --- Mocked skill use ---------------------------------------------------- */
+/* Two states in one pane: a GALLERY of every mocked run, and one DOCUMENT.
+   Same rail-plus-pane skeleton as Learn — the two panels are the same kind of
+   thing (reading, not doing), and giving them different furniture would be a
+   difference that means nothing. */
+
+.mock {
+  display: grid;
+  grid-template-columns: 244px minmax(0, 1fr);
+  gap: var(--sp-4);
+  align-items: start;
+}
+.mock-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));
+}
+.mock-side-head {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-faint);
+  padding: 0 var(--sp-2);
+}
+.mock-side .text-input { font-family: var(--font); font-size: 12.5px; padding: 5px 9px; }
+.mock-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  overflow-y: auto;
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.mock-nav::-webkit-scrollbar { width: 9px; }
+.mock-nav::-webkit-scrollbar-track { background: transparent; }
+.mock-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
+.mock-nav-group {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-faint);
+  padding: var(--sp-3) var(--sp-2) 2px;
+}
+.mock-nav-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  padding: 5px 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);
+}
+.mock-nav-item:hover { background: var(--surface-2); color: var(--text); }
+.mock-nav-item[aria-current="true"] {
+  background: var(--accent-wash);
+  color: var(--text);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.mock-nav-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
+.mock-nav-tag { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; flex: none; }
+
+.mock-pane {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: var(--sp-5);
+  min-width: 0;
+  animation: learn-in var(--dur) var(--ease);
+}
+.mock-intro { margin-bottom: var(--sp-4); }
+.mock-group + .mock-group { margin-top: var(--sp-5); }
+.mock-group-head {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-faint);
+  margin-bottom: var(--sp-3);
+}
+.mock-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
+  gap: var(--sp-3);
+}
+/* The cards arrive in reading order rather than all at once — the same idea as
+   `.stack > *`, but the delay is a variable because a grid has no useful
+   nth-child ladder. Reduced motion zeroes it centrally. */
+.mock-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  padding: var(--sp-3);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  animation: block-in var(--dur) var(--ease) backwards;
+  animation-delay: calc(var(--i, 0) * 35ms);
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
+              transform var(--dur-fast) var(--ease);
+}
+.mock-card:hover {
+  border-color: var(--accent);
+  background: var(--surface-3);
+  transform: translateY(-2px);
+}
+.mock-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
+.mock-card-lane { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
+.mock-card-sum {
+  font-size: 12.5px;
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.mock-card-foot { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
+
+.mock-back { margin-bottom: var(--sp-3); }
+.mock-doc-head { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--sp-3); }
+.mock-doc-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
+.mock-doc-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
+.mock-doc-path, .mock-doc-lines { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
+.mock-doc-lane {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--accent);
+  background: var(--accent-wash);
+  border-radius: 100px;
+  padding: 2px 10px;
+}
+.mock-doc-foot {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+  margin-top: var(--sp-5);
+  padding-top: var(--sp-4);
+  border-top: 1px solid var(--line-soft);
+}
+.mock-doc-foot .btn:last-child { margin-left: auto; }
+
+/* --- markdown, rendered as DOM (never innerHTML) */
+.mock-article { max-width: 78ch; }
+.md-h { font-weight: 600; letter-spacing: -.01em; color: var(--text); margin-top: var(--sp-5); }
+.md-h2 { font-size: 16px; }
+.md-h3 { font-size: 14px; }
+.md-h4, .md-h5, .md-h6 { font-size: 13px; color: var(--text-dim); }
+.md-p { font-size: 13.5px; line-height: 1.75; color: var(--text-dim); margin-top: var(--sp-3); }
+.md-hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--sp-5) 0; }
+.md-quote {
+  margin-top: var(--sp-3);
+  padding: var(--sp-2) var(--sp-3);
+  border-left: 2px solid var(--accent);
+  background: var(--accent-wash);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+}
+.md-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 4px; list-style: none; }
+.md-li {
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--text-dim);
+  padding-left: var(--sp-4);
+  position: relative;
+}
+.md-li::before { content: "•"; position: absolute; left: var(--sp-2); color: var(--accent); }
+.md-li-1 { margin-left: var(--sp-4); }
+.md-li-2 { margin-left: var(--sp-6); }
+ol.md-list { counter-reset: md; }
+ol.md-list .md-li::before { counter-increment: md; content: counter(md) "."; font-family: var(--mono); font-size: 11px; }
+
+/* A transcript is the point of these documents, so the code box is the loudest
+   thing on the page and it scrolls itself rather than the article. */
+.md-codebox { position: relative; margin-top: var(--sp-3); }
+.md-code {
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3) var(--sp-4);
+  overflow-x: auto;
+  white-space: pre;
+}
+.md-code-copy { position: absolute; top: 6px; right: 8px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
+.md-codebox:hover .md-code-copy, .md-code-copy:focus-visible { opacity: 1; }
+.md-code-inline {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  background: var(--surface-3);
+  border-radius: 4px;
+  padding: 1px 5px;
+  color: var(--text);
+}
+.md-tablewrap {
+  margin-top: var(--sp-3);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.md-tablewrap::-webkit-scrollbar { height: 9px; }
+.md-tablewrap::-webkit-scrollbar-track { background: transparent; }
+.md-tablewrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
+.md-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+.md-table th {
+  text-align: left;
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--text-faint);
+  padding: var(--sp-2) var(--sp-3);
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+.md-table td {
+  padding: var(--sp-2) var(--sp-3);
+  border-bottom: 1px solid var(--line-soft);
+  color: var(--text-dim);
+  vertical-align: top;
+}
+.md-link { color: var(--accent); text-decoration: none; }
+.md-link:hover { text-decoration: underline; }
+.md-link-flat { color: var(--text); }
+.md-doclink {
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: var(--accent);
+  cursor: pointer;
+  border-bottom: 1px dashed var(--accent-dim);
+}
+.md-doclink:hover { border-bottom-style: solid; }
+
+@media (max-width: 860px) {
+  .mock { grid-template-columns: minmax(0, 1fr); }
+  .mock-side { position: static; max-height: 320px; }
+}

package/bin/webui/css/panels/overview.css

@@ -0,0 +1,100 @@
+/* panels/overview.css — orc ui
+   The "worth doing" list, the all-clear, a doctor finding, the rail update dot.
+
+   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. */
+
+/* --- Overview: the "worth doing" list ------------------------------------ */
+/* Each row is a decision with somewhere to go. The colour bar on the left is
+   the severity; the arrow-side label names the panel that owns the fix, which
+   is the whole reason this list exists — a finding that sends you to the wrong
+   panel is worse than a finding with no button at all. */
+
+.todo-list { display: flex; flex-direction: column; gap: var(--sp-2); }
+.todo {
+  display: grid;
+  grid-template-columns: 4px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sp-3);
+  width: 100%;
+  padding: var(--sp-3);
+  padding-left: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
+              transform var(--dur-fast) var(--ease);
+}
+.todo:hover { border-color: var(--accent-dim); background: var(--surface-3); transform: translateX(3px); }
+.todo-mark { align-self: stretch; background: var(--idle); }
+.todo-bad  .todo-mark { background: var(--bad); }
+.todo-warn .todo-mark { background: var(--warn); }
+.todo-info .todo-mark { background: var(--accent); }
+.todo-body { min-width: 0; }
+.todo-title { font-size: 13px; font-weight: 600; }
+.todo-text { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
+/* The CLI's own words for WHY, kept visually distinct from our explanation. */
+.todo-evidence {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text-faint);
+  margin-top: 5px;
+  padding-left: var(--sp-3);
+  border-left: 2px solid var(--line);
+}
+.todo-cta { flex: none; font-size: 12px; color: var(--accent); white-space: nowrap; }
+.todo-cta::after { content: " →"; }
+/* The update row arrives after a network check, so it draws itself in rather
+   than appearing between two rows you were already reading. */
+.todo-late { animation: todo-in var(--dur-slow) var(--ease); }
+@keyframes todo-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: none; }
+}
+
+.all-clear { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }
+.all-clear-mark {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--ok-wash);
+  color: var(--ok);
+  font-size: 17px;
+  animation: all-clear-in var(--dur-slow) var(--ease);
+}
+.all-clear-title { font-size: 13px; font-weight: 600; }
+@keyframes all-clear-in {
+  from { transform: scale(.6); opacity: 0; }
+  to   { transform: none; opacity: 1; }
+}
+
+/* A doctor finding, with the button that goes where its fix actually is. */
+.finding { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 12.5px; }
+.finding > div { min-width: 0; }
+.finding .btn { margin-top: 5px; }
+
+/* the rail's "a newer release exists" line — one dot, every panel, never modal */
+.rail-update {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--warn);
+  animation: rail-update-in var(--dur-slow) var(--ease);
+}
+.rail-update:hover { text-decoration: none; color: var(--warn); filter: brightness(1.15); }
+@keyframes rail-update-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: none; }
+}
+
+.action-status { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

package/bin/webui/css/panels/pact.css

@@ -0,0 +1,43 @@
+/* panels/pact.css — orc ui
+   The promise sentence a card is ABOUT, and the "also" rows.
+
+   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. */
+
+/* ==================================== PROMISES - BOUNDARY - SELF-SERVE - COST
+   (v0.46.0)
+
+   These panels are mostly composed from the primitives already above - .card,
+   .chip, .note, .bar-track, .tbl. What is genuinely new is a small set of
+   shapes that carry MEANING and therefore cannot be a generic box:
+
+     .promise      the sentence a card is ABOUT - the thing you actually read
+     .checklist    what would make a REFUSE a yes. It is the product, so it is
+                   the most legible thing on a boundary card
+     .undo-box     the undo command, shown BEFORE a write. Given its own frame
+                   so it cannot be skimmed past
+     .lane-cmd     a PAID action, which is a copy-able command and never a
+                   button. This class is the visual form of that boundary
+     .bar-stack    the four-part token bar. A single-value bar would re-hide the
+                   cache-read share, which is the whole point of showing it   */
+
+.promise {
+  font-size: 14.5px;
+  line-height: 1.5;
+  color: var(--text);
+}
+
+.also {
+  border-left: 2px solid var(--accent);
+  padding-left: var(--sp-3);
+}
+.also-head {
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--text-dim);
+  margin-bottom: var(--sp-2);
+}
+.also-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 12.5px; }
+.also-row + .also-row { margin-top: var(--sp-2); }

package/bin/webui/css/panels/runs.css

@@ -0,0 +1,105 @@
+/* panels/runs.css — orc ui
+   The run accordion and its tabs.
+
+   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. */
+
+/* --- Runs ---------------------------------------------------------------- */
+/* An ACCORDION, not a list plus a detail box below it. A row expands in place,
+   so what you clicked stays where your eye already is however long the list
+   gets — which is the failure mode the old two-column layout had: the more runs
+   a repo accumulated, the further the detail was from the thing you clicked. */
+
+.run-list { display: flex; flex-direction: column; gap: var(--sp-2); }
+.run-row {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.run-row:hover { border-color: var(--accent-dim); }
+.run-row.open { border-color: var(--accent); box-shadow: 0 6px 22px rgba(0, 0, 0, .22); }
+:root[data-theme="light"] .run-row.open { box-shadow: 0 6px 22px rgba(16, 24, 40, .10); }
+
+.run-card {
+  display: grid;
+  grid-template-columns: 16px 88px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: background var(--dur-fast) var(--ease);
+}
+/* A row that NAVIGATES has no caret, so it declares one fewer column. Before
+   v0.49.2 the Overview built a three-child card against the four-column grid
+   and the chip printed over the slug — silently, because a grid never
+   complains. A card and its column count are now stated together. */
+.run-card.no-caret { grid-template-columns: 88px minmax(0, 1fr) auto; }
+/* An OPTIONAL second chip — the aftermath grade in Runs, "you edited it" in
+   Docs — is a fifth child, so it gets its own column rather than wrapping the
+   age onto a second row. Both panels hit this; the class names the SLOT. */
+.run-card.has-extra { grid-template-columns: 16px 88px auto minmax(0, 1fr) auto; }
+.run-card.no-caret.has-extra { grid-template-columns: 88px auto minmax(0, 1fr) auto; }
+.run-card:hover { background: var(--surface-2); }
+.run-row.open > .run-card { background: var(--surface-2); }
+.run-caret {
+  color: var(--text-faint);
+  font-size: 11px;
+  transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
+}
+.run-row.open .run-caret { transform: rotate(90deg); color: var(--accent); }
+.run-mid { min-width: 0; }
+.run-slug { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
+.run-where { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
+.run-age { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
+/* Why a run was closed. It rides in the row forever: a state change nobody can
+   see the reason for is a state nobody can audit. */
+.run-closed-why { font-size: 12px; color: var(--text-faint); margin-top: 2px; font-style: italic; }
+/* The action that CLEARS a row sits with the row, right-aligned under it — the
+   FINDING_ROUTE principle, at row scale. */
+.run-card-actions {
+  justify-content: flex-end;
+  padding: 0 var(--sp-4) var(--sp-3);
+  margin-top: calc(-1 * var(--sp-2));
+}
+
+/* The fold. Same `1fr -> 0fr` grid trick as the settings tiers: `height: auto`
+   cannot be transitioned, and the inner element is what there is to collapse
+   against. Closed is the default, so a fresh list never flashes open. */
+.run-body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
+  opacity: 0;
+}
+.run-body-inner { min-height: 0; overflow: hidden; }
+.run-row.open > .run-body { grid-template-rows: 1fr; opacity: 1; }
+.run-pane { padding: var(--sp-4) var(--sp-4) var(--sp-4); border-top: 1px solid var(--line-soft); }
+
+/* No margin-bottom — the card's own rhythm spaces the pane below it. */
+.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
+.tabs button {
+  border: 0;
+  background: transparent;
+  padding: 7px var(--sp-4);
+  color: var(--text-dim);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
+}
+.tabs button:hover { color: var(--text); }
+.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
+/* A tab swap replaces the pane's children; without a re-triggered fade the
+   change reads as a flicker rather than a transition. */
+.tab-pane { animation: tab-in var(--dur) var(--ease); }
+@keyframes tab-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: none; }
+}