@giamme/forge 0.9.0 → 0.11.0

package/ui/forge_ui/static/style.css

@@ -91,13 +91,14 @@
 :root[data-theme=dark] { color-scheme: dark; }
 
 /* status: the lamp behind each forge state. Five lamps, one meaning each (--st; --st-lit on the 3D plate);
-   a hollow lamp is that lamp's family but not its plain case: passed without a merge, stopped, failed outside the code */
+   a hollow lamp is that lamp's family but not its plain case: passed without a merge, stopped, failed outside the code,
+   an outdated review */
 .st-merged, .st-pass, .st-accepted, .st-nochanges { --st: var(--lamp-green); --st-lit: var(--lit-green); }
 .st-running, .st-interrupted { --st: var(--lamp-amber); --st-lit: var(--lit-amber); }
-.st-pending, .st-none, .st-unknown, .st-invalidated { --st: var(--lamp-off); --st-lit: var(--lamp-off); }
+.st-pending, .st-none, .st-unknown, .st-invalidated, .st-outdated { --st: var(--lamp-off); --st-lit: var(--lamp-off); }
 .st-fail, .st-error, .st-conflict, .st-infra, .st-timeout, .st-blocked { --st: var(--lamp-red); --st-lit: var(--lit-red); }
 [class^="st-"], [class*=" st-"] { --st-fill: var(--st); --st-ring: var(--lamp-edge); }
-.st-accepted, .st-nochanges, .st-interrupted, .st-infra, .st-timeout, .st-blocked { --st-fill: transparent; --st-ring: var(--st); }
+.st-accepted, .st-nochanges, .st-interrupted, .st-infra, .st-timeout, .st-blocked, .st-outdated { --st-fill: transparent; --st-ring: var(--st); }
 /* review severity is a shape (P0 spike, P1 diamond, P2 cone, P3 pin) on a ramp of its own, never a status lamp */
 .sev-P0 { --sev: var(--sev-p0); --sev-shape: polygon(50% 0, 100% 100%, 0 100%); }
 .sev-P1 { --sev: var(--sev-p1); --sev-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@@ -152,6 +153,7 @@ kbd { font-family: var(--mono); font-size: var(--t-xs); padding: 0 5px; border:
 .chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 0 6px; border: 1px solid var(--rule); border-radius: var(--r-small); background: var(--key); color: var(--ink); white-space: nowrap;
   font-family: var(--font-plate); font-weight: 700; font-size: .857rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; font-variant-numeric: tabular-nums; }
 .chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--st-fill, var(--lamp-off)); box-shadow: inset 0 0 0 1.5px var(--st-ring, transparent); flex: none; }
+a.chip, a.chip:hover { color: inherit; text-decoration: none; }
 .chips { display: flex; gap: var(--s-1); flex-wrap: wrap; }
 .sev-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-xs); white-space: nowrap; }
 .sev-chip::before { content: ''; width: 9px; height: 9px; clip-path: var(--sev-shape, circle(30%)); background: var(--sev, var(--muted)); flex: none; }
@@ -320,7 +322,7 @@ body.no-tasks .tasks-module { display: none; }
 body[data-shell=workbench].no-tasks .run-view { grid-template-rows: auto minmax(0, 1fr) auto 0; }
 body[data-shell=immersive] .sidebar { position: absolute; z-index: 4; left: var(--gap); top: var(--gap); bottom: var(--gap); width: var(--runs-w); box-shadow: var(--ply-1); }
 body[data-shell=immersive][data-runs=closed] .sidebar { display: none; }
-body[data-shell=immersive]:is([data-view=models], [data-view=waiting], [data-view=loading], [data-view=first-run]) #main { left: calc(var(--L) - var(--gap)); }
+body[data-shell=immersive]:is([data-view=models], [data-view=findings], [data-view=settings], [data-view=waiting], [data-view=loading], [data-view=first-run]) #main { left: calc(var(--L) - var(--gap)); }
 body[data-shell=immersive] .stage-row, body[data-shell=immersive] .stage-col { position: absolute; inset: 0; }
 body[data-shell=immersive] .stage-col .stage-slot { position: absolute; inset: 0; }
 body[data-shell=immersive] .insp-module { position: absolute; z-index: 3; right: var(--gap); top: var(--gap); bottom: var(--gap); width: var(--insp-w); box-shadow: var(--ply-1); }
@@ -375,7 +377,7 @@ body[data-shell=workbench] .map-cards-host { overflow: auto; }
 body[data-shell=workbench] .map-cards { padding: var(--s-4); }
 
 /* content views: the leaderboard and the waiting pages */
-body:is([data-view=models], [data-view=waiting], [data-view=loading], [data-view=first-run]) #main { padding: var(--s-6) var(--s-6) var(--s-8); }
+body:is([data-view=models], [data-view=findings], [data-view=settings], [data-view=waiting], [data-view=loading], [data-view=first-run]) #main { padding: var(--s-6) var(--s-6) var(--s-8); }
 
 /* ---------- the stage: the panel the run is inlaid on ---------- */
 .stage-slot { position: relative; background: var(--stage-bg); }
@@ -583,6 +585,52 @@ pre.cmd { max-height: none; }
 .ft-d1 { padding-left: 16px; } .ft-d2 { padding-left: 32px; } .ft-d3 { padding-left: 48px; } .ft-d4 { padding-left: 64px; } .ft-d5 { padding-left: 80px; } .ft-d6 { padding-left: 96px; }
 .ft-node:not(.ft-d0) { border-left: 1px solid var(--rule-2); margin-left: 4px; }
 
+/* ---------- write helpers (uikit.js) ---------- */
+/* a result line: a lamp and a sentence; a green lamp for done, a red one for refused or failed */
+p.ui-outcome { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
+.ui-outcome .lamp { margin-top: .42em; }
+/* an inline confirm: a strip with Confirm and Cancel keys, its lamp the route lamp (red for a destructive change) */
+.ui-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 6px var(--s-2); border: 1px solid var(--route); border-radius: var(--r-key); background: var(--key); }
+.ui-confirm.danger { border-color: var(--lamp-red); }
+.ui-confirm-text { flex: 1 1 14em; min-width: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
+.ui-confirm button { min-height: 28px; }
+button.ui-danger { background: var(--lamp-red); border-color: var(--lamp-red); color: light-dark(#fff, #111613); }
+button.ui-danger:hover:not(:disabled) { background: var(--lamp-red); color: light-dark(#fff, #111613); opacity: .9; }
+input:disabled { opacity: .45; cursor: default; }
+
+/* ---------- the inspector's controls (controls.js) ---------- */
+/* each control is a tonal well on the module: its caption, the keys or field, what it means, and its result */
+.ctl-body { display: grid; gap: var(--s-2); }
+.ctl-row { display: grid; gap: 6px; padding: var(--s-2) 10px; border: 1px solid var(--rule); border-radius: var(--r-key); background: var(--module-2); }
+.ctl-status:empty, .ctl-notes:empty, .ctl-confirm:empty, .ctl-out:empty { display: none; }
+.ctl-label { font-family: var(--font-plate); font-weight: 700; font-size: .786rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); cursor: default; }
+label.ctl-label { cursor: pointer; }
+p.ctl-live { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); }
+p.ctl-note { margin: 0; }
+p.ctl-help, p.ctl-why { margin: 0; font-size: var(--t-xs); color: var(--muted); }
+p.ctl-why { display: flex; align-items: center; gap: 6px; }
+p.ctl-why::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lamp-off); flex: none; }
+.ctl-bank { flex-wrap: wrap; max-width: 100%; gap: 2px; justify-self: start; }
+.ctl-bank button.is-draft { box-shadow: inset 0 0 0 1px var(--route); }
+.ctl-set, .ctl-pin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.ctl-set input { width: 6.5em; font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.ctl-pin { align-items: end; }
+.ctl-pin .ctl-alias, .ctl-pin .ctl-harness { flex: 1 1 9em; min-width: 0; }
+.ctl-pin .ctl-effort { flex: 1 1 100%; }
+.ctl-pin input { min-width: 0; }
+.ctl-unit { color: var(--muted); font-size: var(--t-xs); }
+.ctl-set button, .ctl-pin > button { min-height: 28px; }
+.ctl-set button[aria-pressed=true] { background: var(--key); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--muted); }
+.ctl-pin-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
+p.ctl-stop { display: flex; align-items: center; gap: 7px; margin: 0; padding: 4px var(--s-2); border-radius: var(--r-small); background: var(--warn-wash); color: var(--warn-ink); font-weight: 600; }
+.ctl-log { margin-top: var(--s-1); }
+.ctl-changes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); }
+.ctl-changes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
+.ctl-what { color: var(--ink); font-weight: 600; }
+.ctl[aria-busy=true] .ctl-row { opacity: .7; }
+/* who decided an escalation, on the line that reports it */
+.src-plate { font-size: .714rem; padding: 0 5px; vertical-align: 1px; }
+
 /* ---------- tables ---------- */
 .table-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: var(--r-key); background: var(--module); }
 table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-variant-numeric: tabular-nums; }
@@ -637,6 +685,7 @@ th:hover .th-sort, .th-sort.on { color: var(--ink); }
 .fg-bar { fill: var(--st, var(--lamp-off)); }
 .fg-verdict { stroke: var(--lamp-red); }
 .fg-verdict.fg-pass { stroke: var(--st, var(--lamp-green)); }
+.fg-node.st-accepted .fg-box { fill: transparent; }
 .fg-empty { color: var(--muted); padding: var(--s-3) 0; }
 .gantt, .strip { display: block; font-family: var(--mono); }
 .gt-lane { fill: var(--module-2); }
@@ -647,6 +696,7 @@ th:hover .th-sort, .th-sort.on { color: var(--ink); }
 .gt-tick-label { fill: var(--muted); font-size: 10px; }
 .gt-item { cursor: pointer; }
 .gt-box { fill: var(--st, var(--lamp-off)); fill-opacity: .2; stroke: var(--st, var(--lamp-off)); stroke-width: 1.2; }
+.gt-item.st-accepted .gt-box { fill: transparent; }
 .gt-item:hover .gt-box, .gt-item:focus .gt-box { fill-opacity: .35; }
 .gt-item:focus { outline: none; }
 .gt-item.gt-sel .gt-box { stroke: var(--route); stroke-width: 2.5; }
@@ -1071,3 +1121,132 @@ dialog.export-dialog h2 { margin-bottom: var(--s-2); }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
 }
+
+/* ---------- open findings (#/runs/<key>/findings) ---------- */
+.findings-view { display: grid; gap: var(--s-3); max-width: 1400px; }
+.fnd-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
+.fnd-lede { margin: 0; }
+.fnd-scope { justify-self: start; }
+.fnd-lamp { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
+.fnd-amber { --st-fill: var(--lamp-amber); }
+.fnd-notes p { margin: 0; font-size: var(--t-sm); }
+.fnd-filters, .fnd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
+.fnd-field { display: inline-flex; align-items: center; gap: var(--s-2); }
+.fnd-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
+.fnd-actions { padding: 6px var(--s-2); border: 1px solid var(--rule); border-radius: var(--r-key); background: var(--key); }
+.fnd-actions button:disabled { opacity: .5; cursor: not-allowed; }
+.fnd-note { font-size: var(--t-sm); flex: 1 1 12em; }
+.fnd-reason { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
+.fnd-reason:empty { display: none; }
+.fnd-reason-field input { min-width: 22em; }
+.fnd-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.fnd-summary-line { display: flex; align-items: baseline; gap: 6px; }
+.fnd-more { padding: 0 4px; min-height: 22px; border: 1px solid var(--rule); border-radius: var(--r-small); background: var(--key); color: var(--ink); cursor: pointer; }
+.fnd-more:focus-visible, .fnd-back:focus-visible, .fnd-grid input:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }
+.fnd-detail { margin-top: var(--s-2); }
+.fnd-text, .fnd-body { margin: 0; padding: var(--s-2); max-height: 22em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--rule); border-radius: var(--r-small); font-family: var(--mono); font-size: var(--t-xs); }
+.fnd-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s-3); margin: var(--s-2) 0 0; font-size: var(--t-xs); }
+.fnd-meta dt { color: var(--muted); }
+.fnd-meta dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
+dialog.fnd-dialog { width: min(760px, calc(100vw - 24px)); max-height: 86vh; overflow: auto; padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--r-module); background: var(--module); color: var(--ink); box-shadow: var(--ply-2); }
+dialog.fnd-dialog::backdrop { background: light-dark(rgb(17 22 19 / .35), rgb(0 0 0 / .55)); }
+.fnd-warn, .fnd-same { display: flex; align-items: flex-start; gap: 7px; margin: var(--s-2) 0; }
+.fnd-warn .lamp, .fnd-same .lamp, .fnd-created .lamp { margin-top: .42em; }
+.fnd-draft { margin: var(--s-3) 0; }
+.fnd-draft-title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); overflow-wrap: anywhere; }
+.fnd-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }
+.fnd-created { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
+.fnd-created li { display: flex; align-items: flex-start; gap: 7px; overflow-wrap: anywhere; }
+.findings-link .findings-count:not(:empty) { font-family: var(--mono); }
+
+/* ---------- delete a run ---------- */
+.del-gap { align-self: stretch; width: 1px; margin: 0 6px; background: var(--rule-2); }
+button.del-key { border-color: var(--lamp-red); color: var(--lamp-red); }
+button.del-key:hover:not(:disabled) { background: var(--lamp-red); border-color: var(--lamp-red); color: light-dark(#fff, #111613); }
+button.del-key:focus-visible, button.del-go:focus-visible { outline: 2px solid var(--lamp-red); outline-offset: 2px; }
+dialog.del-dialog { width: min(680px, calc(100vw - 24px)); max-height: 90vh; overflow: auto; padding: 18px 20px; border: 1px solid var(--lamp-red); border-radius: var(--r-module); background: var(--module); color: var(--ink); box-shadow: var(--ply-2); }
+dialog.del-dialog::backdrop { background: light-dark(rgb(17 22 19 / .35), rgb(0 0 0 / .55)); }
+.del-title { margin: 0 0 var(--s-2); }
+.del-ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-3); overflow-wrap: anywhere; }
+.del-id { padding: 0 5px; border: 1px solid var(--rule-2); border-radius: var(--r-small); background: var(--field); font-family: var(--mono); }
+.del-status { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 var(--s-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
+.del-status .lamp, .del-warning .lamp, .del-outcome-head .lamp { margin-top: .42em; }
+.del-section { margin: 0 0 var(--s-3); }
+.del-section > h3 { margin: 0 0 var(--s-2); }
+.del-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s-3); margin: 0; font-size: var(--t-sm); }
+.del-facts dt { color: var(--muted); }
+.del-facts dd { margin: 0; overflow-wrap: anywhere; }
+.del-steps, .del-list, .del-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.del-step, .del-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
+.del-step .lamp { align-self: center; }
+.del-step-fail { color: var(--lamp-red); font-weight: 600; }
+.del-row-text { min-width: 0; overflow-wrap: anywhere; }
+.del-plate-foreign { background: var(--ink-2); }
+.del-plate-dirty, .del-plate-unmerged { background: var(--lamp-red); color: light-dark(#fff, #111613); }
+.del-options { margin: 0 0 var(--s-3); padding: 0; border: 0; min-width: 0; }
+.del-options legend { margin-bottom: var(--s-2); }
+.del-opt { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-2) 0; }
+.del-opt input { margin-top: 4px; }
+.del-opt span { display: grid; gap: 2px; }
+.del-opt .muted { font-size: var(--t-sm); }
+.del-warnings:empty { display: none; }
+.del-warnings { margin: 0 0 var(--s-3); }
+.del-warning { display: flex; align-items: flex-start; gap: 7px; padding: 6px var(--s-2); border: 1px solid var(--rule-2); border-radius: var(--r-key); background: var(--warn-wash); color: var(--warn-ink); font-size: var(--t-sm); overflow-wrap: anywhere; }
+.del-warning-warn { border-color: var(--lamp-red); }
+.del-confirm { display: grid; gap: 6px; margin: 0 0 var(--s-3); }
+.del-confirm-label { font-size: var(--t-sm); }
+.del-confirm-input { width: 100%; min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--rule-2); border-radius: var(--r-key); background: var(--field); font-family: var(--mono); }
+.del-confirm-input:focus-visible { outline: 2px solid var(--lamp-red); outline-offset: 1px; }
+.del-confirm-input:disabled { opacity: .45; }
+.del-outcome { margin: 0 0 var(--s-3); padding: var(--s-2); border: 1px solid var(--rule-2); border-radius: var(--r-key); }
+.del-outcome-head { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 var(--s-2); }
+.del-guidance { margin: var(--s-2) 0 0; font-weight: 600; overflow-wrap: anywhere; }
+.del-archive { margin: var(--s-2) 0 0; font-size: var(--t-xs); overflow-wrap: anywhere; }
+.del-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }
+
+/* ---------- settings (#/settings): registry, Jev and the repository's .forge files ---------- */
+.settings-view { display: grid; gap: var(--s-4); max-width: 1100px; }
+.set-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
+.set-lede { margin: 0; font-size: var(--t-sm); }
+.set-picker-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
+.set-picker select { min-width: 22em; max-width: 100%; }
+.set-field { display: inline-flex; align-items: center; }
+.set-repo-path, .set-why, .set-state-line, .set-file-status { display: flex; align-items: flex-start; gap: 7px; margin: var(--s-2) 0 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
+.set-repo-path .lamp, .set-why .lamp, .set-state-line .lamp, .set-file-status .lamp { margin-top: .42em; }
+.set-amber { --st-fill: var(--lamp-amber); }
+.set-body { display: grid; gap: var(--s-4); }
+.set-section { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-key); background: var(--module); }
+.set-section > * { max-width: 100%; margin-block: 0; }
+.set-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
+.set-path-label { font-family: var(--font-plate); font-weight: 700; font-size: .857rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.set-path .mono { overflow-wrap: anywhere; }
+.set-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-key); }
+.set-table th.set-alias { position: static; background: none; font-family: var(--mono); font-size: var(--t-sm); letter-spacing: 0; text-transform: none; color: var(--ink); }
+.set-switch-row { display: flex; align-items: center; gap: var(--s-3); }
+.set-state { font-weight: 600; }
+button.set-switch { gap: 8px; padding: 0 10px 0 4px; }
+.set-switch-knob { width: 26px; height: 14px; border-radius: 7px; background: var(--lamp-off); box-shadow: inset 0 0 0 1.5px var(--lamp-edge); position: relative; transition: background-color var(--relay); }
+.set-switch-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--key); box-shadow: 0 0 0 1px var(--lamp-edge); transition: translate var(--relay); }
+button.set-switch[aria-checked=true] .set-switch-knob { background: var(--lamp-green); }
+button.set-switch[aria-checked=true] .set-switch-knob::after { translate: 12px 0; }
+button.set-switch:focus-visible, .set-editor:focus-visible, .set-picker select:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }
+.set-file { display: grid; gap: var(--s-2); width: 100%; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-key); background: var(--module-2); }
+.set-file > * { margin-block: 0; }
+.set-file-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
+.set-file-name { margin: 0; font-family: var(--mono); font-size: var(--t-base); }
+.set-file-status { margin: 0; }
+.set-file-blurb, .set-file-note { font-size: var(--t-sm); }
+.set-editor { width: 100%; padding: 8px 10px; min-height: 4.5em; resize: vertical; font-family: var(--mono); font-size: var(--t-sm); line-height: 1.5; tab-size: 4; white-space: pre; overflow: auto; }
+.set-editor[aria-invalid=true] { border-color: var(--lamp-red); }
+.set-problem { font-size: var(--t-sm); }
+.set-keys { display: flex; gap: var(--s-2); }
+button.set-remove { border-color: var(--lamp-red); color: var(--lamp-red); }
+button.set-remove:hover:not(:disabled) { background: var(--lamp-red); border-color: var(--lamp-red); color: light-dark(#fff, #111613); }
+button.set-remove:focus-visible { outline: 2px solid var(--lamp-red); outline-offset: 2px; }
+.set-pre { max-height: 220px; }
+.set-result:empty { display: none; }
+.set-result { width: 100%; }
+.set-env { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s-4); margin: 0; width: 100%; }
+.set-env dt, .set-env dd { margin: 0; overflow-wrap: anywhere; }
+.set-env dt { color: var(--ink-2); }
+.set-readonly { margin: 0; }

package/ui/forge_ui/static/uikit.js

@@ -0,0 +1,161 @@
+/* forge-ui shared write helpers: window.ForgeUI, and a CommonJS module under node:test. Every page that changes a run
+   uses these and none re-implements them.
+     el(tag, text?, className?)            a DOM element; text enters as text
+     token()                               the write token from <meta name="forge-ui-token">, or null
+     controlsEnabled()                     Promise<bool>: a token AND /api/health says controls:true; asked once per page load
+     get(path) / post(path, body)          Promise<{ok, status, data, error, detail, result}>; post sends the token and never retries
+     outcome(host, res, okText)            an inline result line (a lamp and a sentence) in an aria-live region
+     confirmInline(host, text, {danger})   Promise<bool>: an inline Confirm / Cancel strip, Escape cancels
+   The write API is described in ui/docs/api.md, "Controls (write endpoints)". All API values enter the DOM as text. */
+(function (root, factory) {
+  'use strict';
+  const api = factory();
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  else root.ForgeUI = api.create(root);
+})(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  const TOKEN_HEADER = 'X-Forge-UI-Token';
+  const TIMED_OUT = 'timed out: it may have partly completed. Reload to see the current state.';
+
+  // The fetch options for a request. A POST carries the token and a JSON body; nothing else ever does.
+  function requestInit(method, body, token) {
+    const init = { method, cache: 'no-store', credentials: 'same-origin', headers: {} };
+    if (method === 'POST') {
+      init.headers[TOKEN_HEADER] = token;
+      init.headers['Content-Type'] = 'application/json';
+      init.body = JSON.stringify(body === undefined ? {} : body);
+    }
+    return init;
+  }
+
+  const object = v => v && typeof v === 'object' && !Array.isArray(v) ? v : null;
+
+  // An HTTP answer as {ok, status, data, error, detail, result}. `status` 0 is "no answer" (the network, or no token).
+  // `result` is what the server passes through from the forge CLI's own stdout (an error body may hold it).
+  function mapResponse(status, data) {
+    const body = object(data);
+    if (status >= 200 && status < 300) {
+      if (body) return { ok: true, status, data: body, error: null, detail: null, result: object(body.result) };
+      return { ok: false, status, data: null, error: 'bad response', detail: 'the server answered without a JSON object', result: null };
+    }
+    const error = body && typeof body.error === 'string' ? body.error : status === 0 ? 'network' : 'http ' + status;
+    const detail = body && typeof body.detail === 'string' ? body.detail : status === 0 ? 'could not reach forge-ui' : null;
+    return { ok: false, status, data: body, error, detail, result: body ? object(body.result) : null };
+  }
+
+  // What an inline result line says: {tone: 'ok' | 'bad', text}.
+  function outcomeText(res, okText) {
+    if (res && res.ok) return { tone: 'ok', text: okText || 'done' };
+    const r = res || {};
+    if (r.status === 409 && r.error === 'busy') return { tone: 'bad', text: 'busy, try again' };
+    if (r.status === 504 || r.error === 'timeout') return { tone: 'bad', text: TIMED_OUT };
+    if (r.status === 403) return { tone: 'bad', text: 'not allowed: reload the page (forge-ui may have restarted)' };
+    if (r.status === 405) return { tone: 'bad', text: 'this server is read-only' };
+    return { tone: 'bad', text: r.detail || r.error || 'failed' };
+  }
+
+  // The helpers over one environment ({document, fetch}); the page makes one over `window`, a test one over fakes.
+  function create(env) {
+    let enabled = null;                                      // Promise<bool>, kept for the page load
+    const open = new WeakMap();                              // host → the cancel of the confirm strip it holds
+
+    function el(tag, text, className) {
+      const node = env.document.createElement(tag);
+      if (text !== undefined && text !== null) node.textContent = String(text);
+      if (className) node.className = className;
+      return node;
+    }
+
+    function token() {
+      const meta = env.document && env.document.querySelector('meta[name="forge-ui-token"]');
+      const value = meta && meta.getAttribute('content');
+      return value ? value : null;
+    }
+
+    async function request(path, init) {
+      let response;
+      try { response = await env.fetch(path, init); } catch (_) { return mapResponse(0, null); }
+      let data = null;
+      try { data = await response.json(); } catch (_) { /* an empty or non-JSON body maps to the status alone */ }
+      return mapResponse(response.status, data);
+    }
+    const get = path => request(path, requestInit('GET'));
+    // Never retried: a write that timed out may have happened, and the caller says what to do next.
+    function post(path, body) {
+      const t = token();
+      if (!t) return Promise.resolve(mapResponse(0, { error: 'no token', detail: 'this page is read-only: it has no write token' }));
+      return request(path, requestInit('POST', body, t));
+    }
+
+    function controlsEnabled() {
+      if (enabled) return enabled;
+      if (!token()) return (enabled = Promise.resolve(false));
+      const asked = get('/api/health').then(res => {
+        if (res.status === 0) enabled = null;                // the server did not answer: ask again next time
+        return res.ok && res.data.controls === true;
+      });
+      return (enabled = asked);
+    }
+
+    function paint(line, o, silent) {
+      line.className = 'ui-outcome ' + o.tone;
+      line.setAttribute('aria-live', silent ? 'off' : 'polite');
+      line.replaceChildren(el('i', undefined, 'lamp st-' + (o.tone === 'ok' ? 'pass' : 'fail')), el('span', o.text));
+    }
+    // A live region has to exist before its text changes to be announced, so a new one is filled on the next tick.
+    // `opts.silent` draws a result again without announcing it twice.
+    function outcome(host, res, okText, opts) {
+      const o = outcomeText(res, okText), silent = !!(opts && opts.silent);
+      let line = Array.from(host.children).find(c => c.classList.contains('ui-outcome'));
+      if (line) { paint(line, o, silent); return line; }
+      line = el('p', undefined, 'ui-outcome');
+      line.setAttribute('role', 'status');
+      line.setAttribute('aria-atomic', 'true');
+      line.setAttribute('aria-live', silent ? 'off' : 'polite');
+      host.append(line);
+      if (silent) paint(line, o, true); else setTimeout(() => paint(line, o, false), 0);
+      return line;
+    }
+
+    // One strip per host: asking again cancels the first. Escape and Cancel answer false, Confirm true. Focus goes to
+    // Confirm (to Cancel when `danger`, so a stray Enter cannot delete) and returns to where it was.
+    function confirmInline(host, text, opts) {
+      const danger = !!(opts && opts.danger);
+      if (open.has(host)) open.get(host)(false);
+      return new Promise(resolve => {
+        const returnTo = env.document.activeElement;
+        const strip = el('div', undefined, 'ui-confirm' + (danger ? ' danger' : ''));
+        strip.setAttribute('role', 'group');
+        strip.setAttribute('aria-label', String(text));
+        const yes = el('button', 'Confirm', danger ? 'ui-danger' : 'primary'), no = el('button', 'Cancel');
+        yes.type = 'button'; no.type = 'button';
+        strip.append(el('span', undefined, 'ui-confirm-lamp lamp ' + (danger ? 'st-fail' : 'lamp-route')), el('span', text, 'ui-confirm-text'), yes, no);
+        let done = false;
+        const finish = answer => {
+          if (done) return;
+          done = true;
+          open.delete(host);
+          const inside = strip.contains(env.document.activeElement);
+          strip.remove();
+          if (inside && returnTo && returnTo.isConnected && returnTo.focus) returnTo.focus({ preventScroll: true });
+          resolve(answer);
+        };
+        open.set(host, finish);
+        yes.addEventListener('click', () => finish(true));
+        no.addEventListener('click', () => finish(false));
+        strip.addEventListener('keydown', e => {
+          if (e.key !== 'Escape') return;
+          e.preventDefault(); e.stopPropagation();           // the page's own Escape handlers are not for this
+          finish(false);
+        });
+        host.append(strip);
+        (danger ? no : yes).focus({ preventScroll: true });
+      });
+    }
+
+    return { el, token, controlsEnabled, get, post, outcome, confirmInline, requestInit, mapResponse, outcomeText };
+  }
+
+  return { create, requestInit, mapResponse, outcomeText, TOKEN_HEADER };
+});