@azure-id/orc 1.2.0 → 1.4.0

package/bin/webui/api.js

@@ -45,6 +45,14 @@ function clearCache() {
   cache.clear();
 }
 
+// v1.4.0 — the board a statusline request is about. A value this server does
+// not recognise is DROPPED rather than forwarded: the CLI would refuse it, and
+// a query string is user input like any other.
+function slBoard(q) {
+  const b = q && q.board ? String(q.board) : "";
+  return b === "subagent" ? ["--board", "subagent"] : [];
+}
+
 // ── running the CLI ─────────────────────────────────────────────────────────
 
 // Several commands use a NON-ZERO exit as a normal answer, not a failure:
@@ -243,6 +251,27 @@ const READS = {
   // a wait — a wait lives in a Claude Code session, and `orc ui` never runs a
   // lane. It configures the defaults, shows a wait, and cancels one.
   "/api/usage": () => ["usage", "check"],
+  // v1.3.0 — the CLI Hook Interface. THE PANEL DRAWS THE CATALOGUE AND DERIVES
+  // NONE OF IT: the groups, the renderers, their option sets and the rendered
+  // sample per renderer all come from `statusline components --json`, and a
+  // test greps the panel for component ids, renderer names, glyph-set names,
+  // ramp names, colour tokens and state words. It must name none of them.
+  //
+  // `preview` is the one that earns the panel its place: it renders through the
+  // SAME engine the hook does, so what you see is what the bar will print.
+  // v1.4.0 — TWO BOARDS through one set of routes. `--board` is passed
+  // through verbatim; the CLI owns which boards exist and which components
+  // each may hold, and the panel — as everywhere else — decides none of it.
+  "/api/statusline/components": (q) => ["statusline", "components", ...slBoard(q)],
+  "/api/statusline/show": (q) => ["statusline", "show", ...slBoard(q)],
+  "/api/statusline/presets": (q) => ["statusline", "presets", ...slBoard(q)],
+  "/api/statusline/preview": (q) => {
+    const argv = ["statusline", "preview", ...slBoard(q)];
+    if (q.width) argv.push("--width", String(q.width));
+    if (q.state) argv.push("--state", String(q.state));
+    return argv;
+  },
+  "/api/statusline/explain": (q) => ["statusline", "explain", String(q.at || "1:1"), ...slBoard(q)],
   "/api/wait/lanes": () => ["wait", "lanes"],
   "/api/wait/status": (q) => (q.slug ? ["wait", "status", String(q.slug)] : ["wait", "status"]),
   "/api/pact": () => ["pact", "status"],
@@ -421,6 +450,48 @@ const WRITES = {
   // already running. A BLOCK cannot be created here on purpose: it needs a
   // reason typed in the moment, and a reason typed into a settings page days
   // later is not the record that makes the risk demonstrably the user's.
+  // v1.3.0 — the layout's writers. Every one shells the same validator the CLI
+  // uses, so an illegal placement is refused BY NAME here exactly as it is
+  // there. The board makes the illegal drop impossible; this is the guarantee.
+  "/api/statusline/set": (b) => {
+    const argv = ["statusline", "set", String(b.line), String(b.pos)];
+    if (b.type) argv.push(String(b.type));
+    for (const [k, f] of [
+      ["render", "--render"], ["label", "--label"], ["color", "--color"],
+      ["label_color", "--label-color"], ["value_color", "--value-color"],
+      ["bg", "--bg"], ["ramp", "--ramp"], ["glyphs", "--glyphs"],
+      ["format", "--format"], ["case", "--case"], ["truncate", "--truncate"],
+      ["compact", "--compact"], ["prefix", "--prefix"], ["suffix", "--suffix"],
+      ["emphasis", "--emphasis"], ["hide_when", "--hide-when"],
+      ["width", "--width"], ["precision", "--precision"],
+      ["min_width", "--min-width"], ["min_cols", "--min-cols"],
+      ["max_cols", "--max-cols"], ["priority", "--priority"],
+    ]) {
+      if (b[k] !== undefined && b[k] !== null && b[k] !== "") argv.push(f, String(b[k]));
+    }
+    if (b.draw_empty) argv.push("--draw-empty");
+    return argv.concat(slBoard(b));
+  },
+  "/api/statusline/move": (b) => ["statusline", "move", String(b.from), String(b.to), ...slBoard(b)],
+  "/api/statusline/remove": (b) => ["statusline", "remove", String(b.at), ...slBoard(b)],
+  "/api/statusline/line": (b) => {
+    const argv = ["statusline", "line", String(b.line)];
+    if (b.separator !== undefined) argv.push("--separator", String(b.separator));
+    if (b.theme) argv.push("--theme", String(b.theme));
+    if (b.max_width !== undefined) argv.push("--max-width", String(b.max_width));
+    return argv.concat(slBoard(b));
+  },
+  // A preset REPLACES the layout, so the panel always confirms it and names
+  // the loss — the `orc diy init --force` rule.
+  "/api/statusline/apply": (b) => ["statusline", "apply", String(b.name), ...slBoard(b)],
+  // v1.3.0 W5. `group` wraps 2-4 as one object, `expand` is its inverse and is
+  // also how a composite becomes editable, `clone` is for two `config` chips on
+  // different keys — a normal thing to want.
+  "/api/statusline/group": (b) => ["statusline", "group", ...(b.refs || []).map(String), ...slBoard(b)],
+  "/api/statusline/expand": (b) => ["statusline", "expand", String(b.at), ...slBoard(b)],
+  "/api/statusline/clone": (b) => ["statusline", "clone", String(b.at), ...slBoard(b)],
+  "/api/statusline/reset": (b) => ["statusline", "reset", ...slBoard(b)],
+  "/api/statusline/compile": (b) => ["statusline", "compile", ...slBoard(b)],
   "/api/wait/unblock": (b) => (b.slug ? ["wait", "unblock", String(b.slug)] : ["wait", "unblock"]),
   "/api/wait/cancel": (b) => (b.slug ? ["wait", "cancel", String(b.slug)] : ["wait", "cancel"]),
   "/api/wiki/sync": () => ["wiki", "sync"],

package/bin/webui/app.html

@@ -1,210 +1,213 @@
-<!doctype html>
-<html lang="en" data-theme="dark">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="referrer" content="no-referrer">
-<title>orc ui</title>
-<!--
-  THE ASSET MANIFEST. This list is the load order, and for CSS the load order is
-  the cascade order — which is why the files carry numeric prefixes and why
-  06-responsive and 04-motion are last (both override rules from the shell AND
-  from panels, and several of their declarations are deliberately not
-  !important). One <link> per file, never @import: an @import request carries no
-  session token of its own and would 401.
-
-  A file that is not listed here does not run, and the test suite reads THIS
-  list — appJs()/appCss() in test/_helpers.js concatenate exactly what the
-  browser loads, so a forgotten entry cannot hide behind a passing suite.
--->
-<link rel="stylesheet" href="css/00-tokens.css">
-<link rel="stylesheet" href="css/01-base.css">
-<link rel="stylesheet" href="css/02-shell.css">
-<link rel="stylesheet" href="css/03-components.css">
-<link rel="stylesheet" href="css/panels/overview.css">
-<link rel="stylesheet" href="css/05-tour.css">
-<link rel="stylesheet" href="css/panels/settings.css">
-<link rel="stylesheet" href="css/panels/lanes.css">
-<link rel="stylesheet" href="css/panels/runs.css">
-<link rel="stylesheet" href="css/panels/knowledge.css">
-<link rel="stylesheet" href="css/panels/stats.css">
-<link rel="stylesheet" href="css/panels/flow.css">
-<link rel="stylesheet" href="css/panels/crosslink.css">
-<link rel="stylesheet" href="css/panels/learn.css">
-<link rel="stylesheet" href="css/panels/mockrun.css">
-<link rel="stylesheet" href="css/panels/experiment.css">
-<link rel="stylesheet" href="css/panels/maintenance.css">
-<link rel="stylesheet" href="css/panels/pact.css">
-<link rel="stylesheet" href="css/panels/boundary.css">
-<link rel="stylesheet" href="css/panels/wait.css">
-<link rel="stylesheet" href="css/panels/handoff.css">
-<link rel="stylesheet" href="css/panels/challenge.css">
-<link rel="stylesheet" href="css/panels/docs.css">
-<link rel="stylesheet" href="css/panels/extra.css">
-<link rel="stylesheet" href="css/06-responsive.css">
-<link rel="stylesheet" href="css/04-motion.css">
-</head>
-<body>
-
-<!--
-  The shell is deliberately static and small: every panel is rendered by its own
-  function in app.js against its own endpoint, with no shared mutable state, so
-  rewriting one panel cannot break another. See the plan, §9.
-  No inline <script> or style="" anywhere — the server sends a strict CSP.
--->
-
-<div class="shell">
-
-  <nav class="rail" aria-label="Panels">
-    <div class="brand">
-      <span class="brand-mark" aria-hidden="true">◆</span>
-      <span class="brand-text">orc<span class="brand-dim">&nbsp;ui</span></span>
-    </div>
-
-    <!--
-      data-idx is the keyboard shortcut for that panel; the rail reveals the
-      numbers on hover so they are discoverable without a legend.
-      data-i18n names the string table entry: the text between the tags is the
-      English fallback that ships in the markup, so a failed i18n fetch renders
-      a readable English rail rather than a column of empty links.
-    -->
-    <ul class="nav" id="nav">
-      <li><a href="#/overview"    data-panel="overview"    data-idx="1" data-i18n="nav.overview">Overview</a></li>
-      <li><a href="#/settings"    data-panel="settings"    data-idx="2" data-i18n="nav.settings">Settings</a></li>
-      <!--
-        v1.0.0 W16. Lanes sits directly under Settings because it answers the
-        other half of the same question. Settings says what a key resolves to
-        and which lanes read it; this says what those lanes then DO with it —
-        which shared phases they run, in order, and which CLI calls they make.
-      -->
-      <li><a href="#/lanes"       data-panel="lanes"       data-idx="l" data-i18n="nav.lanes">Lanes</a></li>
-      <li><a href="#/runs"        data-panel="runs"        data-idx="3" data-i18n="nav.runs">Runs</a></li>
-      <li><a href="#/knowledge"   data-panel="knowledge"   data-idx="4" data-i18n="nav.knowledge">Knowledge</a></li>
-      <li><a href="#/stats"       data-panel="stats"       data-idx="5" data-i18n="nav.stats">Stats</a></li>
-      <!--
-        v0.46.0. Promises and Boundary sit next to Knowledge because they ARE
-        knowledge — derived, coverage-anchored, and stale the same way a wiki doc
-        is. Self-serve sits last of the three: it is the only panel here aimed at
-        somebody who does not read code, and it is the one a developer opens
-        least often.
-      -->
-      <!--
-        v0.48.0. Docs sits directly above Challenge because that is the order
-        the two are used in: you write a document, then you grade it — and the
-        grading has to happen in a different session, which is the one thing
-        both panels say out loud.
-      -->
-      <li><a href="#/docs"        data-panel="docs"        data-idx="d" data-i18n="nav.docs">Docs</a></li>
-      <li><a href="#/challenge"   data-panel="challenge"   data-idx="c" data-i18n="nav.challenge">Challenge</a></li>
-      <li><a href="#/pact"        data-panel="pact"        data-idx="p" data-i18n="nav.pact">Promises</a></li>
-      <li><a href="#/boundary"    data-panel="boundary"    data-idx="b" data-i18n="nav.boundary">Boundary</a></li>
-      <li><a href="#/wait"        data-panel="wait"        data-idx="w" data-i18n="nav.wait">Wait</a></li>
-      <li><a href="#/handoff"     data-panel="handoff"     data-idx="h" data-i18n="nav.handoff">Self-serve</a></li>
-      <!--
-        v0.50.0. Extra sits directly above Flow because both answer the same
-        question — WHERE does a task run — and this is the one that can send it
-        off this machine. It is the last thing above the composer for that
-        reason, never buried under the reading panels.
-      -->
-      <li><a href="#/extra"       data-panel="extra"       data-idx="e" data-i18n="nav.extra">Extra</a></li>
-      <li><a href="#/flow"        data-panel="flow"        data-idx="6" data-i18n="nav.flow">Flow</a></li>
-      <li><a href="#/crosslink"   data-panel="crosslink"   data-idx="7" data-i18n="nav.crosslink">Crosslink</a></li>
-      <li><a href="#/learn"       data-panel="learn"       data-idx="8" data-i18n="nav.learn">Learn</a></li>
-      <!--
-        Next to Learn because it is the same kind of thing: reading, not doing.
-        The walkthroughs ship with the package, so this panel works on a machine
-        with no project at all — the same as Learn and unlike every other panel.
-      -->
-      <li><a href="#/mockrun"     data-panel="mockrun"     data-idx="m" data-i18n="nav.mockrun">Mocked Skill Use</a></li>
-      <li><a href="#/experiment"  data-panel="experiment"  data-idx="9" data-i18n="nav.experiment">Experiment</a></li>
-      <li><a href="#/maintenance" data-panel="maintenance" data-idx="0" data-i18n="nav.maintenance">Maintenance</a></li>
-    </ul>
-
-    <div class="rail-foot">
-      <div class="rail-project" id="rail-project" title="">—</div>
-      <div class="rail-version" id="rail-version"></div>
-      <div class="rail-buttons">
-        <button class="btn btn-ghost btn-sm" id="theme-toggle" type="button">Light</button>
-        <button class="btn btn-ghost btn-sm" id="shortcut-hint" type="button" title="Keyboard shortcuts">?</button>
-      </div>
-      <!--
-        Language sits BELOW the theme row on purpose: it is the same class of
-        control (a per-browser display preference, never a project setting) and
-        it is switched far less often, so it gets the calmer position.
-      -->
-      <div class="rail-buttons">
-        <button class="btn btn-ghost btn-sm lang-btn" id="lang-toggle" type="button">
-          <span class="lang-globe" aria-hidden="true">🌐</span><span id="lang-label">English</span>
-        </button>
-      </div>
-    </div>
-  </nav>
-
-  <main class="main">
-    <!--
-      Global banner slot. The one thing that must be visible on EVERY panel is
-      the global-install warning: if ORC is installed globally, the skills that
-      actually run may be the global copy reading the global config, while this
-      panel edits the project one that nothing reads.
-    -->
-    <div id="banners" class="banners"></div>
-
-    <div id="panel" class="panel" aria-live="polite"></div>
-  </main>
-
-</div>
-
-<!-- Single modal host. Every confirmation and preview renders into it. -->
-<div class="modal-host" id="modal-host" hidden>
-  <div class="modal-backdrop" id="modal-backdrop"></div>
-  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
-    <h2 class="modal-title" id="modal-title"></h2>
-    <div class="modal-body" id="modal-body"></div>
-    <div class="modal-foot" id="modal-foot"></div>
-  </div>
-</div>
-
-<!-- Transient confirmations (a committed setting, a failed write). -->
-<div class="toasts" id="toasts" aria-live="polite"></div>
-
-<!--
-  Classic scripts in an explicit load order — no type="module" anywhere. An ES
-  module `import` carries no query string, so every import would 401 against the
-  per-launch token unless static auth were weakened, and weakening it is not on
-  the table. Classic scripts also mean every top-level function and const lands
-  in ONE shared global scope, so the split needed no import/export and changed
-  no call site.
-
-  99-boot.js is last because boot() is the one call that runs at load time.
--->
-<script src="js/00-core.js"></script>
-<script src="js/01-i18n.js"></script>
-<script src="js/02-ui.js"></script>
-<script src="js/03-md.js"></script>
-<script src="js/04-router.js"></script>
-<script src="js/05-banners.js"></script>
-<script src="js/06-edit.js"></script>
-<script src="js/panels/overview.js"></script>
-<script src="js/panels/settings.js"></script>
-<script src="js/panels/lanes.js"></script>
-<script src="js/panels/runs.js"></script>
-<script src="js/panels/knowledge.js"></script>
-<script src="js/panels/stats.js"></script>
-<script src="js/panels/flow.js"></script>
-<script src="js/panels/crosslink.js"></script>
-<script src="js/panels/learn.js"></script>
-<script src="js/panels/mockrun.js"></script>
-<script src="js/panels/experiment.js"></script>
-<script src="js/panels/maintenance.js"></script>
-<script src="js/panels/pact.js"></script>
-<script src="js/panels/boundary.js"></script>
-<script src="js/panels/handoff.js"></script>
-<script src="js/panels/challenge.js"></script>
-<script src="js/panels/docs.js"></script>
-<script src="js/panels/extra.js"></script>
-<script src="js/panels/wait.js"></script>
-<script src="js/90-tour.js"></script>
-<script src="js/91-shortcuts.js"></script>
-<script src="js/99-boot.js"></script>
-</body>
-</html>
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<title>orc ui</title>
+<!--
+  THE ASSET MANIFEST. This list is the load order, and for CSS the load order is
+  the cascade order — which is why the files carry numeric prefixes and why
+  06-responsive and 04-motion are last (both override rules from the shell AND
+  from panels, and several of their declarations are deliberately not
+  !important). One <link> per file, never @import: an @import request carries no
+  session token of its own and would 401.
+
+  A file that is not listed here does not run, and the test suite reads THIS
+  list — appJs()/appCss() in test/_helpers.js concatenate exactly what the
+  browser loads, so a forgotten entry cannot hide behind a passing suite.
+-->
+<link rel="stylesheet" href="css/00-tokens.css">
+<link rel="stylesheet" href="css/01-base.css">
+<link rel="stylesheet" href="css/02-shell.css">
+<link rel="stylesheet" href="css/03-components.css">
+<link rel="stylesheet" href="css/panels/overview.css">
+<link rel="stylesheet" href="css/05-tour.css">
+<link rel="stylesheet" href="css/panels/settings.css">
+<link rel="stylesheet" href="css/panels/lanes.css">
+<link rel="stylesheet" href="css/panels/runs.css">
+<link rel="stylesheet" href="css/panels/knowledge.css">
+<link rel="stylesheet" href="css/panels/stats.css">
+<link rel="stylesheet" href="css/panels/flow.css">
+<link rel="stylesheet" href="css/panels/crosslink.css">
+<link rel="stylesheet" href="css/panels/learn.css">
+<link rel="stylesheet" href="css/panels/mockrun.css">
+<link rel="stylesheet" href="css/panels/experiment.css">
+<link rel="stylesheet" href="css/panels/maintenance.css">
+<link rel="stylesheet" href="css/panels/pact.css">
+<link rel="stylesheet" href="css/panels/boundary.css">
+<link rel="stylesheet" href="css/panels/wait.css">
+<link rel="stylesheet" href="css/panels/hookui.css">
+<link rel="stylesheet" href="css/panels/handoff.css">
+<link rel="stylesheet" href="css/panels/challenge.css">
+<link rel="stylesheet" href="css/panels/docs.css">
+<link rel="stylesheet" href="css/panels/extra.css">
+<link rel="stylesheet" href="css/06-responsive.css">
+<link rel="stylesheet" href="css/04-motion.css">
+</head>
+<body>
+
+<!--
+  The shell is deliberately static and small: every panel is rendered by its own
+  function in app.js against its own endpoint, with no shared mutable state, so
+  rewriting one panel cannot break another. See the plan, §9.
+  No inline <script> or style="" anywhere — the server sends a strict CSP.
+-->
+
+<div class="shell">
+
+  <nav class="rail" aria-label="Panels">
+    <div class="brand">
+      <span class="brand-mark" aria-hidden="true">◆</span>
+      <span class="brand-text">orc<span class="brand-dim">&nbsp;ui</span></span>
+    </div>
+
+    <!--
+      data-idx is the keyboard shortcut for that panel; the rail reveals the
+      numbers on hover so they are discoverable without a legend.
+      data-i18n names the string table entry: the text between the tags is the
+      English fallback that ships in the markup, so a failed i18n fetch renders
+      a readable English rail rather than a column of empty links.
+    -->
+    <ul class="nav" id="nav">
+      <li><a href="#/overview"    data-panel="overview"    data-idx="1" data-i18n="nav.overview">Overview</a></li>
+      <li><a href="#/settings"    data-panel="settings"    data-idx="2" data-i18n="nav.settings">Settings</a></li>
+      <!--
+        v1.0.0 W16. Lanes sits directly under Settings because it answers the
+        other half of the same question. Settings says what a key resolves to
+        and which lanes read it; this says what those lanes then DO with it —
+        which shared phases they run, in order, and which CLI calls they make.
+      -->
+      <li><a href="#/lanes"       data-panel="lanes"       data-idx="l" data-i18n="nav.lanes">Lanes</a></li>
+      <li><a href="#/runs"        data-panel="runs"        data-idx="3" data-i18n="nav.runs">Runs</a></li>
+      <li><a href="#/knowledge"   data-panel="knowledge"   data-idx="4" data-i18n="nav.knowledge">Knowledge</a></li>
+      <li><a href="#/stats"       data-panel="stats"       data-idx="5" data-i18n="nav.stats">Stats</a></li>
+      <!--
+        v0.46.0. Promises and Boundary sit next to Knowledge because they ARE
+        knowledge — derived, coverage-anchored, and stale the same way a wiki doc
+        is. Self-serve sits last of the three: it is the only panel here aimed at
+        somebody who does not read code, and it is the one a developer opens
+        least often.
+      -->
+      <!--
+        v0.48.0. Docs sits directly above Challenge because that is the order
+        the two are used in: you write a document, then you grade it — and the
+        grading has to happen in a different session, which is the one thing
+        both panels say out loud.
+      -->
+      <li><a href="#/docs"        data-panel="docs"        data-idx="d" data-i18n="nav.docs">Docs</a></li>
+      <li><a href="#/challenge"   data-panel="challenge"   data-idx="c" data-i18n="nav.challenge">Challenge</a></li>
+      <li><a href="#/pact"        data-panel="pact"        data-idx="p" data-i18n="nav.pact">Promises</a></li>
+      <li><a href="#/boundary"    data-panel="boundary"    data-idx="b" data-i18n="nav.boundary">Boundary</a></li>
+      <li><a href="#/wait"        data-panel="wait"        data-idx="w" data-i18n="nav.wait">Wait</a></li>
+      <li><a href="#/hookui"      data-panel="hookui"      data-idx="s" data-i18n="nav.hookui">CLI Hook Interface</a></li>
+      <li><a href="#/handoff"     data-panel="handoff"     data-idx="h" data-i18n="nav.handoff">Self-serve</a></li>
+      <!--
+        v0.50.0. Extra sits directly above Flow because both answer the same
+        question — WHERE does a task run — and this is the one that can send it
+        off this machine. It is the last thing above the composer for that
+        reason, never buried under the reading panels.
+      -->
+      <li><a href="#/extra"       data-panel="extra"       data-idx="e" data-i18n="nav.extra">Extra</a></li>
+      <li><a href="#/flow"        data-panel="flow"        data-idx="6" data-i18n="nav.flow">Flow</a></li>
+      <li><a href="#/crosslink"   data-panel="crosslink"   data-idx="7" data-i18n="nav.crosslink">Crosslink</a></li>
+      <li><a href="#/learn"       data-panel="learn"       data-idx="8" data-i18n="nav.learn">Learn</a></li>
+      <!--
+        Next to Learn because it is the same kind of thing: reading, not doing.
+        The walkthroughs ship with the package, so this panel works on a machine
+        with no project at all — the same as Learn and unlike every other panel.
+      -->
+      <li><a href="#/mockrun"     data-panel="mockrun"     data-idx="m" data-i18n="nav.mockrun">Mocked Skill Use</a></li>
+      <li><a href="#/experiment"  data-panel="experiment"  data-idx="9" data-i18n="nav.experiment">Experiment</a></li>
+      <li><a href="#/maintenance" data-panel="maintenance" data-idx="0" data-i18n="nav.maintenance">Maintenance</a></li>
+    </ul>
+
+    <div class="rail-foot">
+      <div class="rail-project" id="rail-project" title="">—</div>
+      <div class="rail-version" id="rail-version"></div>
+      <div class="rail-buttons">
+        <button class="btn btn-ghost btn-sm" id="theme-toggle" type="button">Light</button>
+        <button class="btn btn-ghost btn-sm" id="shortcut-hint" type="button" title="Keyboard shortcuts">?</button>
+      </div>
+      <!--
+        Language sits BELOW the theme row on purpose: it is the same class of
+        control (a per-browser display preference, never a project setting) and
+        it is switched far less often, so it gets the calmer position.
+      -->
+      <div class="rail-buttons">
+        <button class="btn btn-ghost btn-sm lang-btn" id="lang-toggle" type="button">
+          <span class="lang-globe" aria-hidden="true">🌐</span><span id="lang-label">English</span>
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <main class="main">
+    <!--
+      Global banner slot. The one thing that must be visible on EVERY panel is
+      the global-install warning: if ORC is installed globally, the skills that
+      actually run may be the global copy reading the global config, while this
+      panel edits the project one that nothing reads.
+    -->
+    <div id="banners" class="banners"></div>
+
+    <div id="panel" class="panel" aria-live="polite"></div>
+  </main>
+
+</div>
+
+<!-- Single modal host. Every confirmation and preview renders into it. -->
+<div class="modal-host" id="modal-host" hidden>
+  <div class="modal-backdrop" id="modal-backdrop"></div>
+  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+    <h2 class="modal-title" id="modal-title"></h2>
+    <div class="modal-body" id="modal-body"></div>
+    <div class="modal-foot" id="modal-foot"></div>
+  </div>
+</div>
+
+<!-- Transient confirmations (a committed setting, a failed write). -->
+<div class="toasts" id="toasts" aria-live="polite"></div>
+
+<!--
+  Classic scripts in an explicit load order — no type="module" anywhere. An ES
+  module `import` carries no query string, so every import would 401 against the
+  per-launch token unless static auth were weakened, and weakening it is not on
+  the table. Classic scripts also mean every top-level function and const lands
+  in ONE shared global scope, so the split needed no import/export and changed
+  no call site.
+
+  99-boot.js is last because boot() is the one call that runs at load time.
+-->
+<script src="js/00-core.js"></script>
+<script src="js/01-i18n.js"></script>
+<script src="js/02-ui.js"></script>
+<script src="js/03-md.js"></script>
+<script src="js/04-router.js"></script>
+<script src="js/05-banners.js"></script>
+<script src="js/06-edit.js"></script>
+<script src="js/panels/overview.js"></script>
+<script src="js/panels/settings.js"></script>
+<script src="js/panels/lanes.js"></script>
+<script src="js/panels/runs.js"></script>
+<script src="js/panels/knowledge.js"></script>
+<script src="js/panels/stats.js"></script>
+<script src="js/panels/flow.js"></script>
+<script src="js/panels/crosslink.js"></script>
+<script src="js/panels/learn.js"></script>
+<script src="js/panels/mockrun.js"></script>
+<script src="js/panels/experiment.js"></script>
+<script src="js/panels/maintenance.js"></script>
+<script src="js/panels/pact.js"></script>
+<script src="js/panels/boundary.js"></script>
+<script src="js/panels/handoff.js"></script>
+<script src="js/panels/challenge.js"></script>
+<script src="js/panels/docs.js"></script>
+<script src="js/panels/extra.js"></script>
+<script src="js/panels/wait.js"></script>
+<script src="js/panels/hookui.js"></script>
+<script src="js/90-tour.js"></script>
+<script src="js/91-shortcuts.js"></script>
+<script src="js/99-boot.js"></script>
+</body>
+</html>

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

@@ -117,4 +117,32 @@
   /* 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; }
+
+  /* v1.3.0 — the CLI Hook Interface. Every variant that DECLARES columns
+     collapses explicitly; the ones that do not (the chip, the palette row) are
+     flex and wrap on their own, which is exactly why they were written that
+     way. The PREVIEW never collapses: it is a monospaced grid and squeezing it
+     would misreport the width the user is deciding. It scrolls instead. */
+  .hk-degrade-row,
+  .hk-field,
+  .hk-check {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+  .hk-degrade-label {
+    text-align: left;
+  }
+  .hk-gallery {
+    grid-template-columns: 1fr 1fr;
+  }
+  .hk-prow-id {
+    min-width: 0;
+  }
+  /* The caution KEEPS its two columns. The mark and the sentence belong to each
+     other, and stacking them puts a lone ✕ on a line of its own above the text
+     it is about. The mark column narrows instead. */
+  .hk-caution {
+    grid-template-columns: 14px 1fr;
+    gap: 6px;
+  }
 }