@jabworks/condux 0.12.1 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jabworks/condux",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "OpenCode plugin for the condux workflow toolkit — bundles the condux skills and injects the specialist agents (coder, explorer, planner, researcher) plus an opt-in plan-review listener.",
   "type": "module",
   "publishConfig": {

package/skills/plan-review/references/plan-review-template.html

@@ -9,7 +9,7 @@
          Card, Textarea, Popover, Separator) — adapted as vanilla CSS, no React. -->
     <style>
 /* tokens:core:start */
-/* Shared colour core — do not hand-edit; edit scripts/tokens/core.css. */
+/* Shared design core — do not hand-edit; edit scripts/tokens/core.css. */
 :root {
   --background: #111110;
   --card: #191918;
@@ -41,11 +41,49 @@
   --info-border: #104d87;
   --outline: rgba(237, 237, 236, 0.08);
   --subtle: #686560;
-  --radius: 0.25rem;
+  --shadow-sm: 0 1px 2px rgba(6, 6, 5, 0.5);
+  --shadow-md: 0 4px 14px rgba(6, 6, 5, 0.55);
+  --shadow-lg: 0 20px 60px rgba(6, 6, 5, 0.62);
   --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;
+  --sans: "Geist", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --text-2xs: 0.6875rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-md: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.375rem;
+  --text-2xl: 1.75rem;
+  --text-3xl: 2.5rem;
+  --text-4xl: 3.5rem;
+  --leading-tight: 1.15;
+  --leading-snug: 1.35;
+  --leading-normal: 1.55;
+  --leading-relaxed: 1.7;
+  --tracking-tight: -0.022em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.06em;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-8: 3rem;
+  --space-12: 4rem;
+  --radius-sm: 0.1875rem;
+  --radius: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-full: 9999px;
+  --dur-fast: 120ms;
+  --dur: 200ms;
+  --dur-slow: 320ms;
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (prefers-color-scheme: light) {
-  :root {
+  :root:not([data-theme="dark"]) {
     --background: #f6f5ef;
     --card: #fcfbf6;
     --card-foreground: #36302a;
@@ -76,34 +114,381 @@
     --info-border: #bed7ef;
     --outline: rgba(54, 48, 42, 0.08);
     --subtle: #a8a294;
+    --shadow-sm: 0 1px 2px rgba(54, 48, 42, 0.1);
+    --shadow-md: 0 4px 14px rgba(54, 48, 42, 0.13);
+    --shadow-lg: 0 20px 60px rgba(54, 48, 42, 0.18);
   }
 }
+:root[data-theme="light"] {
+  --background: #f6f5ef;
+  --card: #fcfbf6;
+  --card-foreground: #36302a;
+  --popover: #fcfbf6;
+  --foreground: #36302a;
+  --muted: #f0efe3;
+  --muted-foreground: #726c5e;
+  --border: #ddd6c6;
+  --input: #ddd6c6;
+  --primary: #967e60;
+  --primary-foreground: #ffffff;
+  --primary-hover: #897254;
+  --primary-muted: #efece0;
+  --primary-text: #6f5e44;
+  --ring: #967e60;
+  --accent: #eae7da;
+  --success: #3f7a34;
+  --success-muted: #e6f5e2;
+  --success-border: #c2e1b3;
+  --warning: #93761d;
+  --warning-muted: #fbf4c4;
+  --warning-border: #ebd87f;
+  --destructive: #bf4f3b;
+  --destructive-muted: #fbe8e2;
+  --destructive-border: #f0c9ba;
+  --info: #3f6fa6;
+  --info-muted: #e6f1fc;
+  --info-border: #bed7ef;
+  --outline: rgba(54, 48, 42, 0.08);
+  --subtle: #a8a294;
+  --shadow-sm: 0 1px 2px rgba(54, 48, 42, 0.1);
+  --shadow-md: 0 4px 14px rgba(54, 48, 42, 0.13);
+  --shadow-lg: 0 20px 60px rgba(54, 48, 42, 0.18);
+}
 /* tokens:core:end */
 
-      /* plan-review extensions — the annotation highlight and a second radius
-         step. Outside the markers on purpose: anything inside is replaced. */
+/* kit:css:start */
+/* Shared state layer — do not hand-edit; edit scripts/tokens/kit.css. */
+
+/* :where() keeps these at zero specificity, so a surface overrides them by
+   writing a plain rule rather than escalating into an !important contest. */
+:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* Mouse users should not see the ring; keyboard users must. */
+:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
+  outline: none;
+}
+
+.kit-skip {
+  position: absolute;
+  left: var(--space-2);
+  top: -4rem;
+  z-index: 999;
+  padding: var(--space-2) var(--space-3);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-radius: var(--radius);
+  text-decoration: none;
+  transition: top var(--dur) var(--ease-out);
+}
+
+.kit-skip:focus {
+  top: var(--space-2);
+}
+
+/* Empty, loading and error states. Namespaced kit- because three of the four
+   surfaces already own an .empty or .error class of their own. */
+.kit-empty {
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-8) var(--space-4);
+  text-align: center;
+  color: var(--muted-foreground);
+}
+
+.kit-empty__title {
+  margin: 0 0 var(--space-1);
+  font-size: var(--text-md);
+  color: var(--foreground);
+}
+
+.kit-empty__body {
+  margin: 0 auto;
+  max-width: 44ch;
+  font-size: var(--text-sm);
+  text-wrap: pretty;
+}
+
+.kit-error {
+  display: flex;
+  gap: var(--space-2);
+  align-items: baseline;
+  padding: var(--space-2) var(--space-3);
+  background: var(--destructive-muted);
+  border: 1px solid var(--destructive-border);
+  border-radius: var(--radius);
+  color: var(--destructive);
+  font-size: var(--text-sm);
+}
+
+/* Shaped like the content it stands in for — never a spinner. Width is the
+   caller's job, so one rule serves a title, a row and a paragraph. */
+.kit-skel {
+  height: 0.75rem;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, var(--muted) 0%, var(--accent) 50%, var(--muted) 100%);
+  background-size: 200% 100%;
+  animation: kit-shimmer 1.4s var(--ease-out) infinite;
+}
+
+@keyframes kit-shimmer {
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Keyboard help overlay, populated by kit.js from the live binding registry. */
+.kit-help {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+  display: grid;
+  place-items: center;
+  padding: var(--space-4);
+  background: color-mix(in oklch, var(--background) 78%, transparent);
+}
+
+.kit-help[hidden] {
+  display: none;
+}
+
+.kit-help__panel {
+  width: min(34rem, 100%);
+  max-height: 80dvh;
+  overflow-y: auto;
+  padding: var(--space-5);
+  background: var(--card);
+  color: var(--card-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+}
+
+.kit-help__title {
+  margin: 0 0 var(--space-4);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--subtle);
+}
+
+.kit-help__row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-1) 0;
+  font-size: var(--text-sm);
+}
+
+.kit-help__keys {
+  flex: none;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.kit-kbd {
+  min-width: 1.4rem;
+  padding: 0.1rem 0.4rem;
+  text-align: center;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  color: var(--foreground);
+  background: var(--popover);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.kit-theme {
+  display: inline-flex;
+  gap: 1px;
+}
+
+.kit-theme button {
+  font: inherit;
+  font-size: var(--text-2xs);
+  padding: var(--space-1) var(--space-2);
+  color: var(--muted-foreground);
+  background: var(--card);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition:
+    color var(--dur-fast) var(--ease-out),
+    background-color var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+
+.kit-theme button:first-child {
+  border-radius: var(--radius) 0 0 var(--radius);
+}
+
+.kit-theme button:last-child {
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+.kit-theme button:hover {
+  color: var(--foreground);
+  border-color: var(--primary);
+}
+
+.kit-theme button[aria-pressed="true"] {
+  color: var(--primary-foreground);
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+/* A keyboard layer nobody can discover is a keyboard layer nobody uses. kit.js
+   places this next to every theme group, so the ? overlay has a visible way in
+   for anyone who was never told the shortcut exists. */
+/* kit.js wraps the theme group and the help button in this. The theme group
+   keeps growing where its host stretched it (the guide's rail), and stays
+   content-sized where the host did not (the board's action row). */
+.kit-controls {
+  display: flex;
+  align-items: center;
+}
+
+.kit-controls > .kit-theme {
+  flex: 1 1 auto;
+}
+
+.kit-helpbtn {
+  margin-left: var(--space-2);
+  width: 1.65rem;
+  height: 1.65rem;
+  flex: none;
+  font: inherit;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  line-height: 1;
+  color: var(--muted-foreground);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition:
+    color var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+
+.kit-helpbtn:hover {
+  color: var(--foreground);
+  border-color: var(--primary);
+}
+
+.kit-copied {
+  color: var(--success);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Browsers do not print background colours by default, so a dark-themed page
+   prints light text onto white and reads as blank. Repointing the tokens is
+   what makes Ctrl-P work at all; hiding chrome is the surface's opt-in. */
+@media print {
+  :root {
+    --background: #ffffff;
+    --card: #ffffff;
+    --popover: #ffffff;
+    --muted: #f4f4f2;
+    --accent: #f4f4f2;
+    --foreground: #000000;
+    --card-foreground: #000000;
+    --muted-foreground: #444444;
+    --subtle: #666666;
+    --border: #999999;
+    --input: #999999;
+    --shadow-sm: none;
+    --shadow-md: none;
+    --shadow-lg: none;
+  }
+
+  body {
+    background: #ffffff;
+    color: #000000;
+  }
+
+  .kit-skip,
+  .kit-help,
+  .kit-helpbtn,
+  .kit-theme,
+  [data-kit-chrome] {
+    display: none !important;
+  }
+
+  a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 90%;
+    color: #555555;
+  }
+
+  .kit-skel {
+    animation: none;
+  }
+}
+/* kit:css:end */
+
+      /* plan-review extensions — the annotation highlight. Outside the markers
+         on purpose: anything inside is replaced.
+         --radius-md was defined here at 0.25rem, shadowing the core's 0.5rem
+         by source order. The core value is adopted as-is; spots that wanted
+         the smaller 0.25rem step now say so explicitly via --radius, which
+         already carries that value and is already this file's convention
+         (.nav .tabs, .popover, .chip, code, pre, …). */
       :root {
         --hl: rgba(255, 202, 22, 0.30); --hl-active: rgba(255, 202, 22, 0.55);
-        --radius-md: 0.25rem;
       }
       @media (prefers-color-scheme: light) {
         :root { --hl: rgba(234, 179, 8, 0.42); --hl-active: rgba(202, 138, 4, 0.62); }
       }
       * { box-sizing: border-box; }
       html, body { height: 100%; }
-      body { margin: 0; background: var(--background); color: var(--foreground); font: 13px/1.6 var(--mono); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; height: 100vh; }
-      .app { display: grid; grid-template-columns: 248px minmax(0, 1fr) 372px; flex: 1 1 auto; min-height: 0; }
+      /* .kit-error sets display:flex unconditionally; an author rule beats the
+         UA [hidden] default regardless of specificity, so the hidden attribute
+         needs its own author rule to still win. */
+      .kit-error[hidden] { display: none; }
+      /* Page shell: content row fills, the decision bar pins to the bottom.
+         .app below is the second axis (3 columns) — together they are the
+         one legitimately 2-D layout in this file; everything else here is a
+         one-dimensional row or column and stays flex. */
+      body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--sans); font-size: var(--text-sm); line-height: var(--leading-normal); font-variant-numeric: tabular-nums; display: grid; grid-template-rows: 1fr auto; height: 100dvh; }
+      .app { display: grid; grid-template-columns: 248px minmax(0, 1fr) 372px; min-height: 0; }
+      @media (max-width: 1100px) {
+        .app { grid-template-columns: 208px minmax(0, 1fr) 320px; }
+      }
+      @media (max-width: 860px) {
+        .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; max-height: none; }
+        .nav { max-height: 38vh; border-right: none; border-bottom: 1px solid var(--border); }
+        .chat { max-height: 34vh; border-left: none; border-top: 1px solid var(--border); }
+      }
+      @media (max-width: 640px) {
+        .main { padding: var(--space-5) var(--space-4) 100px; }
+        .popover { width: calc(100vw - 24px); }
+      }
       ::-webkit-scrollbar { width: 9px; height: 9px; }
       ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
       ::-webkit-scrollbar-track { background: transparent; }
 
       /* ---- Terminus: Button ---- */
       .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
-        font: 500 13px var(--mono); border-radius: var(--radius-md); padding: 8px 14px; border: 1px solid transparent;
+        font: 500 var(--text-sm) var(--sans); border-radius: var(--radius); padding: 8px 14px; border: 1px solid transparent;
         background: transparent; color: var(--foreground); cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
       .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklch, var(--ring) 45%, transparent); }
       .btn:disabled { pointer-events: none; opacity: .4; }
-      .btn-sm { padding: 6px 10px; font-size: 12px; }
+      .btn-sm { padding: 6px 10px; font-size: var(--text-xs); }
       .btn-block { width: 100%; }
       .btn-solid { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
       .btn-solid:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
@@ -119,40 +504,41 @@
       .btn-danger:hover { background: color-mix(in oklch, var(--destructive-muted) 70%, var(--destructive)); }
 
       /* ---- Terminus: Badge ---- */
-      .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-md); border: 1px solid transparent;
-        font: 500 11px var(--mono); padding: 1px 6px; min-width: 18px; justify-content: center; }
+      .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius); border: 1px solid transparent;
+        font: 500 var(--text-2xs) var(--mono); padding: 1px 6px; min-width: 18px; justify-content: center; }
       .badge-warning { background: var(--warning-muted); color: var(--warning); border-color: var(--warning-border); }
       .badge-soft { background: var(--primary-muted); color: var(--primary-text); }
 
       /* Left: navigation — Contents (docs + headings) | Files (paths touched) */
       .nav { border-right: 1px solid var(--border); background: var(--card); overflow-y: auto; padding: 18px 14px 40px; }
+      .nav .kit-theme { margin: 0 0 12px; }
       .nav .tabs { display: flex; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
-      .nav .tab { flex: 1; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 4px;
+      .nav .tab { flex: 1; font: 500 var(--text-2xs) var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 4px;
         background: transparent; border: none; border-right: 1px solid var(--border); color: var(--subtle); cursor: pointer; }
       .nav .tab:last-child { border-right: none; }
       .nav .tab:hover { color: var(--foreground); }
       .nav .tab.active { background: var(--accent); color: var(--foreground); }
       .nav a.doc { font-weight: 600; color: var(--foreground); }
       .nav a.doc.active { border-left-color: var(--primary); background: var(--accent); }
-      .nav a.file .t { font-size: 12px; }
-      .nav .none { color: var(--subtle); font-size: 12px; padding: 4px 6px; }
+      .nav a.file .t { font-family: var(--mono); font-size: var(--text-xs); }
+      .nav .none { color: var(--subtle); font-size: var(--text-xs); padding: 4px 6px; }
       code.mention-flash { outline: 2px solid var(--warning); outline-offset: 1px; }
-      .nav .label, .chat .label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); margin: 0 0 12px; padding: 0 6px; }
+      .nav .label, .chat .label { font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); margin: 0 0 12px; padding: 0 6px; }
       .nav a { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); text-decoration: none; padding: 4px 6px; border-radius: 4px; border-left: 2px solid transparent; }
       .nav a span.t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
       .nav a:hover { background: var(--accent); color: var(--foreground); }
       .nav a.active { color: var(--foreground); border-left-color: var(--primary); background: var(--accent); }
-      .nav a.lvl2 { padding-left: 16px; } .nav a.lvl3 { padding-left: 28px; font-size: 12px; color: var(--subtle); }
+      .nav a.lvl2 { padding-left: 16px; } .nav a.lvl3 { padding-left: 28px; font-size: var(--text-xs); color: var(--subtle); }
 
       /* Directory mode: doc-site tree — folder rows fold, filter narrows, the
          active doc alone carries its headings. All of it DIRMODE-gated. */
       .nav .tree-filter { display: none; margin: 0 0 10px; }
-      .nav .tree-filter input { width: 100%; font: inherit; font-size: 13px; color: var(--foreground); background: var(--background);
+      .nav .tree-filter input { width: 100%; font: inherit; font-size: var(--text-sm); color: var(--foreground); background: var(--background);
         border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; outline: none; }
       .nav .tree-filter input:focus { border-color: var(--ring); }
       .nav a.folder { font-weight: 600; color: var(--muted-foreground); }
-      .nav a.folder .arrow { flex: none; width: 12px; color: var(--subtle); font-size: 10px; }
-      .crumbs { display: none; max-width: 760px; margin: 0 auto 18px; font: 12px var(--mono); color: var(--subtle);
+      .nav a.folder .arrow { flex: none; width: 12px; color: var(--subtle); font-size: var(--text-2xs); }
+      .crumbs { display: none; max-width: 760px; margin: 0 auto 18px; font: var(--text-xs) var(--mono); color: var(--subtle);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
       .crumbs .seg { color: var(--muted-foreground); }
       .crumbs a.seg { color: var(--muted-foreground); text-decoration: none; cursor: pointer; }
@@ -162,7 +548,7 @@
       .pnav { display: none; max-width: 760px; margin: 32px auto 0; padding-top: 14px; border-top: 1px solid var(--border);
         justify-content: space-between; gap: 12px; }
       .pnav a { display: inline-flex; align-items: center; gap: 6px; max-width: 48%; color: var(--muted-foreground);
-        text-decoration: none; font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius);
+        text-decoration: none; font-size: var(--text-sm); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
       .pnav a:hover { background: var(--accent); color: var(--foreground); }
       .pnav .spacer { flex: 1; }
@@ -173,20 +559,20 @@
           linear-gradient(to right, color-mix(in oklab, var(--foreground) 3%, transparent) 1px, transparent 1px),
           linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 3%, transparent) 1px, transparent 1px);
         background-size: 32px 32px; }
-      .main .hint { color: var(--subtle); margin: 0 auto 24px; font-size: 12px; max-width: 760px; }
-      .doc { max-width: 760px; margin: 0 auto; }
+      .main .hint { color: var(--subtle); margin: 0 auto 24px; font-size: var(--text-xs); max-width: 760px; }
+      .doc { max-width: 760px; margin: 0 auto; line-height: var(--leading-relaxed); }
 
       /* Revision diff — on a revised plan, show what changed instead of a silent swap. */
       .revbar { display: none; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto 20px;
         padding: 9px 12px; border: 1px solid var(--warning-border); background: var(--warning-muted); border-radius: var(--radius); }
       .revbar.show { display: flex; }
-      .revbar .rb-text { color: var(--warning); font: 600 12px var(--mono); }
-      .revbar .rb-stat { color: var(--muted-foreground); font-size: 12px; }
+      .revbar .rb-text { color: var(--warning); font: 600 var(--text-xs) var(--sans); }
+      .revbar .rb-stat { color: var(--muted-foreground); font-size: var(--text-xs); }
       .revbar .rb-actions { margin-left: auto; display: flex; gap: 6px; }
       .diffwrap { display: none; max-width: 760px; margin: 0 auto; }
       .diffwrap.show { display: block; }
       .diffview { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius);
-        padding: 8px 0; overflow-x: auto; font: 12px/1.55 var(--mono); }
+        padding: 8px 0; overflow-x: auto; font: var(--text-xs)/var(--leading-normal) var(--mono); }
       .diffline { display: flex; white-space: pre; padding: 0 12px; }
       .diffline .g { width: 14px; flex: none; color: var(--subtle); user-select: none; }
       .diffline.ctx { color: var(--muted-foreground); }
@@ -195,20 +581,20 @@
       .diffline.del { background: var(--destructive-muted); color: var(--destructive); }
       .diffline.del .g { color: var(--destructive); }
       .diffline.fold { justify-content: center; color: var(--subtle); font-style: italic; padding: 3px 12px; }
-      h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin: 1.5em 0 0.6em; scroll-margin-top: 24px; }
-      h1 { font-size: 21px; } h2 { font-size: 16px; } h3 { font-size: 14px; color: var(--muted-foreground); }
-      h4 { font-size: 13px; } h5, h6 { font-size: 12px; color: var(--muted-foreground); }
+      h1, h2, h3, h4, h5, h6 { line-height: var(--leading-snug); margin: 1.5em 0 0.6em; scroll-margin-top: 24px; }
+      h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-md); } h3 { font-size: var(--text-base); color: var(--muted-foreground); }
+      h4 { font-size: var(--text-sm); } h5, h6 { font-size: var(--text-xs); color: var(--muted-foreground); }
       p { margin: 0.6em 0; }
       ul, ol { margin: 0.6em 0; padding-left: 22px; } li { margin: 0.25em 0; }
       li.task { list-style: none; margin-left: -18px; }
       del { color: var(--subtle); }
       a { color: var(--info); }
-      code { background: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
-      pre { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; }
+      code { background: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: var(--text-xs); }
+      pre { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font-family: var(--mono); }
       pre code { background: none; border: none; padding: 0; }
       blockquote { margin: 0.6em 0; padding: 2px 14px; color: var(--muted-foreground); border-left: 3px solid var(--primary); }
       hr { border: none; border-top: 1px solid var(--border); margin: 1.6em 0; }
-      table { border-collapse: collapse; margin: 0.9em 0; width: 100%; display: block; overflow-x: auto; font-size: 13px; }
+      table { border-collapse: collapse; margin: 0.9em 0; width: 100%; display: block; overflow-x: auto; font-size: var(--text-sm); }
       th, td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
       th { background: var(--muted); font-weight: 600; }
       tbody tr:nth-child(even) { background: color-mix(in oklch, var(--muted) 40%, transparent); }
@@ -224,18 +610,18 @@
       .popover:not(.expanded) .chip:last-child { border-bottom-right-radius: var(--radius); }
       /* Floating annotation toolbar — a menubar of category items over an input. */
       .popover { position: absolute; z-index: 31; display: none; width: 340px; background: var(--popover); border: 1px solid var(--border);
-        border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 0; }
-      .popover .q { color: var(--muted-foreground); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0; }
+      .popover .q { color: var(--muted-foreground); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         padding: 6px 10px; margin: 0; background: var(--muted); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
       /* Menubar strip: category items, evenly split, divider-separated */
       .popover .cats { display: flex; margin: 0; border-bottom: 1px solid var(--border); }
-      .chip { flex: 1; font: 500 11px var(--mono); padding: 6px 8px; text-align: center; border: none; border-right: 1px solid var(--border);
+      .chip { flex: 1; font: 500 var(--text-2xs) var(--sans); padding: 6px 8px; text-align: center; border: none; border-right: 1px solid var(--border);
         background: transparent; color: var(--muted-foreground); cursor: pointer; transition: background-color .12s, color .12s; }
       .chip:last-child { border-right: none; }
       .chip:hover { background: var(--accent); color: var(--foreground); }
       .chip.active { background: var(--primary-muted); color: var(--primary-text); }
       .popover .row { display: flex; justify-content: flex-end; gap: 8px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--border); }
-      .popover .hintk { color: var(--subtle); font-size: 11px; margin-right: auto; }
+      .popover .hintk { color: var(--subtle); font-size: var(--text-2xs); margin-right: auto; }
       /* Caret pointing at the selection (down when the toolbar sits above it) */
       .popover::after { content: ''; position: absolute; left: 18px; width: 9px; height: 9px; background: var(--popover);
         border: 1px solid var(--border); transform: rotate(45deg); display: none; }
@@ -243,8 +629,8 @@
       .popover.below::after { display: block; top: -5px; background: var(--muted); border-bottom: none; border-right: none; }
 
       /* ---- Terminus: Textarea ---- */
-      .ta { width: 100%; resize: vertical; font: 13px/1.5 var(--mono); color: var(--foreground); background: transparent;
-        border: 1px solid var(--input); border-radius: var(--radius-md); padding: 8px 10px; }
+      .ta { width: 100%; resize: vertical; font: var(--text-sm)/var(--leading-normal) var(--sans); color: var(--foreground); background: transparent;
+        border: 1px solid var(--input); border-radius: var(--radius); padding: 8px 10px; }
       .ta::placeholder { color: var(--subtle); }
       .ta:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
       .popover .ta { min-height: 132px; border: none; border-radius: 0; padding: 8px 10px; } .popover .ta:focus-visible { outline: none; box-shadow: none; }
@@ -256,26 +642,26 @@
       .thread { flex: 1; overflow-y: auto; padding: 6px 14px; display: flex; flex-direction: column; gap: 8px; }
       .thread .empty { color: var(--subtle); padding: 8px 4px; }
       /* Terminus: Card */
-      .msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,0.16); cursor: default; }
+      .msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--card); box-shadow: var(--shadow-sm); cursor: default; }
       .msg.note { border-color: var(--warning-border); cursor: pointer; }
       .msg.note.active { box-shadow: 0 0 0 2px var(--warning); }
       .msg .meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; align-items: center; }
-      .msg .who { color: var(--muted-foreground); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } .msg.note .who { color: var(--warning); }
-      .msg .del { cursor: pointer; border: none; background: none; color: var(--subtle); font-size: 11px; padding: 0 2px; } .msg .del:hover { color: var(--destructive); }
-      .msg .quote { color: var(--muted-foreground); font-size: 11px; border-left: 2px solid var(--warning); padding: 1px 8px; margin-bottom: 5px; max-height: 42px; overflow: hidden; }
+      .msg .who { color: var(--muted-foreground); font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } .msg.note .who { color: var(--warning); }
+      .msg .del { cursor: pointer; border: none; background: none; color: var(--subtle); font-size: var(--text-2xs); padding: 0 2px; } .msg .del:hover { color: var(--destructive); }
+      .msg .quote { color: var(--muted-foreground); font-size: var(--text-2xs); border-left: 2px solid var(--warning); padding: 1px 8px; margin-bottom: 5px; max-height: 42px; overflow: hidden; }
       .msg .body { white-space: pre-wrap; word-break: break-word; color: var(--card-foreground); }
 
       /* Terminus: Separator + composer */
       .composer { border-top: 1px solid var(--border); padding: 12px 14px; }
       .actions { padding: 0 14px 14px; }
-      .count { color: var(--subtle); font-size: 11px; }
+      .count { color: var(--subtle); font-family: var(--mono); font-size: var(--text-2xs); }
 
       /* Bottom decision bar — decisions read as the end of the review. Reject sits
          isolated on the left; the two "continue" actions group on the right. The
          summary in the middle says what rides along with the decision. */
       .dbar { flex: none; display: flex; align-items: center; border-top: 1px solid var(--border); background: var(--card); padding: 10px 16px; min-height: 58px; }
       .dbar-live { display: flex; flex: 1; align-items: center; gap: 12px; }
-      .dbar-summary { flex: 1; text-align: center; color: var(--subtle); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .dbar-summary { flex: 1; text-align: center; color: var(--subtle); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
       .dbar-group { display: flex; gap: 8px; }
 
       /* Post-submit confirmation — replaces the decision bar content once a decision
@@ -285,12 +671,12 @@
       .sent.approve { border-color: var(--success-border); background: var(--success-muted); }
       .sent.revise  { border-color: var(--warning-border); background: var(--warning-muted); }
       .sent.deny    { border-color: var(--destructive-border); background: var(--destructive-muted); }
-      .sent .h { display: flex; align-items: center; gap: 8px; font: 600 13px var(--mono); }
+      .sent .h { display: flex; align-items: center; gap: 8px; font: 600 var(--text-sm) var(--sans); }
       .sent.approve .h { color: var(--success); }
       .sent.revise  .h { color: var(--warning); }
       .sent.deny    .h { color: var(--destructive); }
       .sent .h { flex: none; }
-      .sent .sub { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
+      .sent .sub { color: var(--muted-foreground); font-size: var(--text-xs); line-height: var(--leading-normal); }
       .sent .ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
       .sent .again { margin-top: 10px; }
       .dot { width: 7px; height: 7px; border-radius: 9999px; background: currentColor; animation: pulse 1.3s ease-in-out infinite; }
@@ -299,21 +685,32 @@
   </head>
   <body>
     <div class="app">
-      <aside class="nav">
+      <aside class="nav" data-kit-chrome>
+        <div class="kit-theme">
+          <button type="button" data-kit-theme="light">Light</button>
+          <button type="button" data-kit-theme="dark">Dark</button>
+          <button type="button" data-kit-theme="system">Auto</button>
+        </div>
         <div class="tabs">
           <button type="button" class="tab active" id="tab-contents">Contents</button>
           <button type="button" class="tab" id="tab-files">Files</button>
         </div>
         <div id="pane-contents">
-          <div class="tree-filter" id="tree-filter"><input type="search" id="tree-q" placeholder="Filter docs…" aria-label="Filter documents"></div>
-          <nav id="toc"></nav>
+          <div class="tree-filter" id="tree-filter"><input type="search" id="tree-q" data-kit-filter placeholder="Filter docs…" aria-label="Filter documents"></div>
+          <nav id="toc">
+            <div class="kit-skel" style="width:70%;height:0.85rem;margin:0 6px 10px"></div>
+            <div class="kit-skel" style="width:55%;height:0.85rem;margin:0 6px 10px"></div>
+            <div class="kit-skel" style="width:80%;height:0.85rem;margin:0 6px 10px"></div>
+            <div class="kit-skel" style="width:45%;height:0.85rem;margin:0 6px 10px"></div>
+          </nav>
         </div>
         <div id="pane-files" style="display:none"><nav id="filelist"></nav></div>
       </aside>
 
       <main class="main">
         <p class="hint">Select any text to comment on it. Or chat with the agent on the right. Then decide.</p>
-        <div class="revbar" id="revbar">
+        <div class="kit-error" id="api-error" hidden><span class="msg-text"></span></div>
+        <div class="revbar" id="revbar" data-kit-chrome>
           <span class="rb-text">Plan revised</span>
           <span class="rb-stat" id="rb-stat"></span>
           <span class="rb-actions">
@@ -322,10 +719,15 @@
           </span>
         </div>
         <div class="crumbs" id="crumbs"></div>
-        <div class="doc" id="plan">Loading plan…</div>
+        <div class="doc" id="plan">
+          <div class="kit-skel" style="width:60%;height:1.4rem;margin-bottom:1em"></div>
+          <div class="kit-skel" style="width:100%;margin-bottom:0.6em"></div>
+          <div class="kit-skel" style="width:96%;margin-bottom:0.6em"></div>
+          <div class="kit-skel" style="width:88%;margin-bottom:0.6em"></div>
+        </div>
         <div class="pnav" id="pnav"></div>
         <div class="diffwrap" id="diffwrap"><div class="diffview" id="diffview"></div></div>
-        <div class="popover" id="popover">
+        <div class="popover" id="popover" data-kit-chrome>
           <div class="q" id="pop-quote"></div>
           <div class="cats" id="pop-cats">
             <button type="button" class="chip active" data-cat="Comment">Comment</button>
@@ -341,7 +743,7 @@
         </div>
       </main>
 
-      <aside class="chat">
+      <aside class="chat" data-kit-chrome>
         <p class="label">Review <span class="count" id="count"></span></p>
         <div class="thread" id="thread"><div class="empty">No notes yet. Select text to comment, or send a message.</div></div>
         <div class="composer">
@@ -355,7 +757,7 @@
 
     <!-- Decisions live in a fixed bottom bar — the rail above is purely
          conversational (notes + messages). Reject is isolated on the left. -->
-    <footer class="dbar">
+    <footer class="dbar" data-kit-chrome>
       <div class="dbar-live" id="dbar-live">
         <button class="btn btn-danger" id="btn-reject" data-decision="Reject">Reject</button>
         <span class="dbar-summary" id="dbar-summary"></span>
@@ -370,6 +772,373 @@
       </div>
     </footer>
 
+    <script>
+/* kit:js:start */
+/* Shared behaviour layer — do not hand-edit; edit scripts/tokens/kit.js. */
+
+/* Deliberately free of backticks and interpolation openers. No target is a JS
+   template literal since the board-shell extraction, so this is insurance
+   rather than a requirement — but it is the difference between this file being
+   safe to inline anywhere and being safe only where someone remembered to
+   check. Regexes and escapes are avoided for the same reason. */
+
+(function () {
+  'use strict';
+
+  var THEME_KEY = 'jabworks-theme';
+  var THEME_MODES = ['light', 'dark', 'system'];
+  var root = document.documentElement;
+
+  /* localStorage throws on an opaque origin, which is what a file:// artifact
+     often gets. Degrade to session-only theming; never break the page. */
+  function readStored(key) {
+    try {
+      return window.localStorage.getItem(key);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function writeStored(key, value) {
+    try {
+      window.localStorage.setItem(key, value);
+    } catch (e) {
+      /* no-op */
+    }
+  }
+
+  function applyTheme(mode) {
+    if (mode === 'light' || mode === 'dark') root.setAttribute('data-theme', mode);
+    else root.removeAttribute('data-theme');
+
+    writeStored(THEME_KEY, mode);
+
+    var buttons = document.querySelectorAll('[data-kit-theme]');
+
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].setAttribute('aria-pressed', String(buttons[i].getAttribute('data-kit-theme') === mode));
+    }
+  }
+
+  function currentTheme() {
+    return root.getAttribute('data-theme') || 'system';
+  }
+
+  function cycleTheme() {
+    applyTheme(THEME_MODES[(THEME_MODES.indexOf(currentTheme()) + 1) % THEME_MODES.length]);
+  }
+
+  function items() {
+    return Array.prototype.slice.call(document.querySelectorAll('[data-kit-item]'));
+  }
+
+  /* document.activeElement is null in a detached or not-yet-painted document,
+     and Element.closest is absent on the document node itself. */
+  function activeWithin(selector) {
+    var el = document.activeElement;
+
+    return el && el.closest ? el.closest(selector) : null;
+  }
+
+  function moveItem(step) {
+    var all = items();
+
+    if (all.length === 0) return;
+
+    var index = all.indexOf(activeWithin('[data-kit-item]'));
+    var next = all[Math.min(Math.max(index + step, 0), all.length - 1)] || all[0];
+
+    next.setAttribute('tabindex', '-1');
+    next.focus();
+    next.scrollIntoView({ block: 'nearest' });
+
+    /* Reflect the focused item in the URL so a board or a review can be linked
+       to a specific row. replaceState, not a hash assignment: assigning to
+       location.hash pushes a history entry per keypress. */
+    if (next.id && window.history && window.history.replaceState) {
+      window.history.replaceState(null, '', '#' + next.id);
+    }
+  }
+
+  function reveal(el) {
+    if (el && el.focus) {
+      el.focus();
+      if (el.select) el.select();
+
+      return true;
+    }
+
+    return false;
+  }
+
+  /* A surface whose filter field ships hidden cannot hang the hook on the field
+     itself — a hidden element does not take focus, so the binding would be a
+     silent no-op. Those surfaces put the hook on the control that REVEALS the
+     field instead; activate it, then focus what it revealed via aria-controls.
+     Without this the ? overlay would advertise "Focus filter" for a key that
+     only moves focus to a button, and a generated overlay that misdescribes its
+     own bindings is worse than no overlay. */
+  function focusFilter() {
+    var hook = document.querySelector('[data-kit-filter]');
+
+    if (!hook) return false;
+
+    if (hook.tagName === 'BUTTON') {
+      if (hook.getAttribute('aria-expanded') === 'false' && hook.click) hook.click();
+
+      if (reveal(document.getElementById(hook.getAttribute('aria-controls') || ''))) return true;
+    }
+
+    return reveal(hook);
+  }
+
+  function flashCopied(el) {
+    el.classList.add('kit-copied');
+    window.setTimeout(function () {
+      el.classList.remove('kit-copied');
+    }, 900);
+  }
+
+  function copyFrom(el) {
+    if (!el) return;
+
+    var text = el.getAttribute('data-kit-copy') || el.textContent || '';
+
+    if (!text || !navigator.clipboard || !navigator.clipboard.writeText) return;
+
+    navigator.clipboard.writeText(text.trim()).then(
+      function () {
+        flashCopied(el);
+      },
+      function () {
+        /* Clipboard is permission-gated; a refusal is not an error worth
+           interrupting the page for. */
+      },
+    );
+  }
+
+  function sections() {
+    return Array.prototype.slice.call(document.querySelectorAll('[data-kit-section]'));
+  }
+
+  function jumpToSection(n) {
+    var target = sections()[n - 1];
+
+    if (target) target.scrollIntoView({ block: 'start' });
+  }
+
+  /* One registry drives both the key handler and the help overlay, so the
+     documented shortcuts cannot drift from the implemented ones. */
+  var BINDINGS = [
+    { keys: ['j'], label: 'Next item', when: function () { return items().length > 0; }, run: function () { moveItem(1); } },
+    { keys: ['k'], label: 'Previous item', when: function () { return items().length > 0; }, run: function () { moveItem(-1); } },
+    {
+      keys: ['/'],
+      label: 'Focus filter',
+      when: function () { return Boolean(document.querySelector('[data-kit-filter]')); },
+      run: focusFilter,
+    },
+    {
+      keys: ['y'],
+      label: 'Copy id or path',
+      when: function () { return Boolean(document.querySelector('[data-kit-copy]')); },
+      run: function () {
+        copyFrom(activeWithin('[data-kit-copy]'));
+      },
+    },
+    { keys: ['t'], label: 'Cycle theme', when: function () { return true; }, run: cycleTheme },
+    {
+      keys: ['g', '1-9'],
+      label: 'Jump to section',
+      when: function () { return sections().length > 0; },
+      run: null,
+    },
+    { keys: ['?'], label: 'Show shortcuts', when: function () { return true; }, run: null },
+    { keys: ['Esc'], label: 'Dismiss', when: function () { return true; }, run: null },
+  ];
+
+  var overlay = null;
+
+  function buildOverlay() {
+    var host = document.createElement('div');
+
+    host.className = 'kit-help';
+    host.hidden = true;
+    host.setAttribute('role', 'dialog');
+    host.setAttribute('aria-modal', 'true');
+    host.setAttribute('aria-label', 'Keyboard shortcuts');
+
+    var panel = document.createElement('div');
+
+    panel.className = 'kit-help__panel';
+
+    var title = document.createElement('p');
+
+    title.className = 'kit-help__title';
+    title.textContent = 'Keyboard shortcuts';
+    panel.appendChild(title);
+
+    for (var i = 0; i < BINDINGS.length; i++) {
+      if (!BINDINGS[i].when()) continue;
+
+      var row = document.createElement('div');
+
+      row.className = 'kit-help__row';
+
+      var label = document.createElement('span');
+
+      label.textContent = BINDINGS[i].label;
+      row.appendChild(label);
+
+      var keys = document.createElement('span');
+
+      keys.className = 'kit-help__keys';
+
+      for (var k = 0; k < BINDINGS[i].keys.length; k++) {
+        var kbd = document.createElement('kbd');
+
+        kbd.className = 'kit-kbd';
+        kbd.textContent = BINDINGS[i].keys[k];
+        keys.appendChild(kbd);
+      }
+
+      row.appendChild(keys);
+      panel.appendChild(row);
+    }
+
+    host.appendChild(panel);
+    host.addEventListener('click', function (event) {
+      if (event.target === host) toggleOverlay(false);
+    });
+    document.body.appendChild(host);
+
+    return host;
+  }
+
+  function toggleOverlay(show) {
+    if (!overlay) overlay = buildOverlay();
+
+    overlay.hidden = !show;
+  }
+
+  function isTypingTarget(el) {
+    if (!el) return false;
+
+    var tag = el.tagName;
+
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable === true;
+  }
+
+  var pendingJump = false;
+
+  function onKeydown(event) {
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+    if (event.key === 'Escape') {
+      toggleOverlay(false);
+      if (isTypingTarget(event.target) && event.target.blur) event.target.blur();
+
+      return;
+    }
+
+    /* A filter box must be typeable: every other binding is inert while the
+       caret is in a field. Escape above is the deliberate exception. */
+    if (isTypingTarget(event.target)) return;
+
+    if (pendingJump) {
+      pendingJump = false;
+
+      if (event.key >= '1' && event.key <= '9') {
+        jumpToSection(Number(event.key));
+        event.preventDefault();
+
+        return;
+      }
+    }
+
+    if (event.key === 'g' && sections().length > 0) {
+      pendingJump = true;
+      window.setTimeout(function () {
+        pendingJump = false;
+      }, 1200);
+
+      return;
+    }
+
+    if (event.key === '?') {
+      toggleOverlay(overlay ? overlay.hidden : true);
+      event.preventDefault();
+
+      return;
+    }
+
+    for (var i = 0; i < BINDINGS.length; i++) {
+      if (BINDINGS[i].run && BINDINGS[i].keys.indexOf(event.key) !== -1 && BINDINGS[i].when()) {
+        BINDINGS[i].run();
+        event.preventDefault();
+
+        return;
+      }
+    }
+  }
+
+  function init() {
+    applyTheme(readStored(THEME_KEY) || 'system');
+
+    var buttons = document.querySelectorAll('[data-kit-theme]');
+
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', function (event) {
+        applyTheme(event.currentTarget.getAttribute('data-kit-theme'));
+      });
+    }
+
+    /* Give the ? overlay a visible way in. It rides alongside the theme group
+       because every surface already has one, and because a floating badge is
+       chrome each surface would then have to design around. */
+    var groups = document.querySelectorAll('.kit-theme');
+
+    for (var g = 0; g < groups.length; g++) {
+      if (!groups[g].parentNode) continue;
+
+      var help = document.createElement('button');
+
+      help.type = 'button';
+      help.className = 'kit-helpbtn';
+      help.textContent = '?';
+      help.title = 'Keyboard shortcuts (?)';
+      help.setAttribute('aria-label', 'Keyboard shortcuts');
+      help.addEventListener('click', function () {
+        toggleOverlay(true);
+      });
+
+      /* Wrap rather than insert as a sibling: a surface may host the theme group
+         in a flex row (the board) or in block flow (the guide's rail), and in
+         block flow a bare sibling drops onto its own line. The wrapper makes the
+         pairing hold in either. */
+      var controls = document.createElement('div');
+
+      controls.className = 'kit-controls';
+      groups[g].parentNode.insertBefore(controls, groups[g]);
+      controls.appendChild(groups[g]);
+      controls.appendChild(help);
+    }
+
+    document.addEventListener('click', function (event) {
+      var target = event.target.closest ? event.target.closest('[data-kit-copy]') : null;
+
+      if (target) copyFrom(target);
+    });
+
+    document.addEventListener('keydown', onKeydown);
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();
+/* kit:js:end */
+    </script>
+
     <script>
       // ---- Self-contained Markdown renderer (no external deps) ----
       function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');}
@@ -395,13 +1164,26 @@
           if(/^#{1,6}\s/.test(line)){const lvl=line.match(/^#+/)[0].length;const text=line.replace(/^#+\s/,'');out.push({html:'<h'+lvl+'>'+inline(text)+'</h'+lvl+'>',heading:{level:lvl,text:text}});i++;continue;}
           if(/^---+\s*$/.test(line)){out.push({html:'<hr>',heading:null});i++;continue;}
           if(/^\s*>/.test(line)){const buf=[];while(i<lines.length&&/^\s*>/.test(lines[i]))buf.push(lines[i++].replace(/^\s*>\s?/,''));out.push({html:'<blockquote>'+inline(buf.join(' '))+'</blockquote>',heading:null});continue;}
-          if(/^\s*([-*+]|\d+\.)\s/.test(line)){const ordered=/^\s*\d+\./.test(line);const buf=[];while(i<lines.length&&/^\s*([-*+]|\d+\.)\s/.test(lines[i])){let it=lines[i].replace(/^\s*([-*+]|\d+\.)\s/,'');const cb=it.match(/^\[([ xX])\]\s+/);if(cb){it=it.slice(cb[0].length);buf.push('<li class="task">'+(/[xX]/.test(cb[1])?'☑':'☐')+' '+inline(it)+'</li>');}else{buf.push('<li>'+inline(it)+'</li>');}i++;}out.push({html:'<'+(ordered?'ol':'ul')+'>'+buf.join('')+'</'+(ordered?'ol':'ul')+'>',heading:null});continue;}
+          // Lazy continuation: a soft-wrapped bullet leaves its follow-on lines with no
+          // marker. Advancing only on marker lines ended the list there and rendered the
+          // remainder as a left-margin paragraph — every wrapped bullet in every spec.
+          // The exclusion set is deliberately the paragraph loop's below, not a new one.
+          if(/^\s*([-*+]|\d+\.)\s/.test(line)){const ordered=/^\s*\d+\./.test(line);const buf=[];while(i<lines.length&&/^\s*([-*+]|\d+\.)\s/.test(lines[i])){let it=lines[i].replace(/^\s*([-*+]|\d+\.)\s/,'');i++;while(i<lines.length&&!/^\s*$/.test(lines[i])&&!/^(#{1,6}\s|```|\s*>|\s*([-*+]|\d+\.)\s|---+\s*$)/.test(lines[i])&&!(lines[i].indexOf('|')>=0&&i+1<lines.length&&isDelim(lines[i+1]))){it+=' '+lines[i].trim();i++;}const cb=it.match(/^\[([ xX])\]\s+/);if(cb){it=it.slice(cb[0].length);buf.push('<li class="task">'+(/[xX]/.test(cb[1])?'☑':'☐')+' '+inline(it)+'</li>');}else{buf.push('<li>'+inline(it)+'</li>');}}out.push({html:'<'+(ordered?'ol':'ul')+'>'+buf.join('')+'</'+(ordered?'ol':'ul')+'>',heading:null});continue;}
           if(line.indexOf('|')>=0&&i+1<lines.length&&isDelim(lines[i+1])){const header=tcells(line);const aligns=tcells(lines[i+1]).map(function(c){const l=/^:/.test(c),r=/:$/.test(c);return l&&r?'center':r?'right':l?'left':'';});i+=2;const rows=[];while(i<lines.length&&lines[i].indexOf('|')>=0&&!/^\s*$/.test(lines[i])&&!/^(#{1,6}\s|```|---+\s*$)/.test(lines[i])){rows.push(tcells(lines[i]));i++;}let h='<table><thead><tr>';header.forEach(function(c,ci){h+='<th'+(aligns[ci]?' style="text-align:'+aligns[ci]+'"':'')+'>'+inline(c)+'</th>';});h+='</tr></thead><tbody>';rows.forEach(function(cs){h+='<tr>';header.forEach(function(_,ci){h+='<td'+(aligns[ci]?' style="text-align:'+aligns[ci]+'"':'')+'>'+inline(cs[ci]!==undefined?cs[ci]:'')+'</td>';});h+='</tr>';});h+='</tbody></table>';out.push({html:h,heading:null});continue;}
           const buf=[];while(i<lines.length&&!/^\s*$/.test(lines[i])&&!/^(#{1,6}\s|```|\s*>|\s*([-*+]|\d+\.)\s|---+\s*$)/.test(lines[i])&&!(lines[i].indexOf('|')>=0&&i+1<lines.length&&isDelim(lines[i+1])))buf.push(lines[i++]);
           out.push({html:'<p>'+inline(buf.join(' '))+'</p>',heading:null});}
         return out;
       }
 
+      // ---- API error banner (kit-error) ----
+      function showApiError(msg){
+        const el=document.getElementById('api-error'); if(!el) return;
+        el.querySelector('.msg-text').textContent=msg; el.hidden=false;
+      }
+      function hideApiError(){
+        const el=document.getElementById('api-error'); if(el) el.hidden=true;
+      }
+
       // ---- State ----
       const annotations = []; let nextId = 1;
       const planEl=document.getElementById('plan');
@@ -482,6 +1264,7 @@
           node.docs.forEach(function(doc){
             const m=matches(doc); if(!m.show) return;
             const d=document.createElement('a'); d.href='#'; d.className='doc'+(doc===activeDoc?' active':''); d.dataset.doc=doc; d.title=doc;
+            d.setAttribute('data-kit-item','');
             indent(d,depth);
             const t=document.createElement('span'); t.className='t'; t.textContent=doc.slice(pathStr?pathStr.length+1:0); d.appendChild(t);
             const bd=document.createElement('span'); bd.className='badge badge-warning'; bd.style.display='none'; bd.dataset.fordoc=doc; d.appendChild(bd);
@@ -718,7 +1501,7 @@
         'Request Revisions':{cls:'revise', ico:'',wait:true, title:'Revisions requested',sub:'Your notes are on their way. The agent will revise the plan; the updated version reloads here when it’s ready.'},
         'Reject':           {cls:'deny',   ico:'✕',wait:false,title:'Rejected',sub:'Sent to the agent — it will not implement this. It steps back to reconsider whether the feature should be built at all.'},
       };
-      let submitting=false;
+      let submitting=false, decisionSent=false;
       function clearAllNotes(){
         annotations.slice().forEach(function(a){ if(a.kind==='note') unhighlight(a.id); });
         annotations.length=0; nextId=1; paint();
@@ -740,10 +1523,18 @@
       async function submit(decision){
         if(submitting) return; submitting=true;
         document.querySelectorAll('.dbar button').forEach(function(b){b.disabled=true;});
-        try{ await fetch('/api/feedback',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({decision:decision,thread:annotations})}); }
-        catch(e){}
-        clearAllNotes();        // notes clear the moment the decision is sent
-        showSent(decision);
+        try{
+          const r=await fetch('/api/feedback',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({decision:decision,thread:annotations})});
+          if(!r.ok) throw new Error('status '+r.status);
+          hideApiError();
+          decisionSent=true;    // a terminal decision makes the server exit —
+                                 // the SSE drop that follows is expected, not a fault
+          clearAllNotes();      // notes clear the moment the decision is sent
+          showSent(decision);
+        }catch(e){
+          showApiError('Could not send your decision — the review server may be unreachable. Nothing was sent; try again.');
+          document.querySelectorAll('.dbar button').forEach(function(b){b.disabled=false;});
+        }
         submitting=false;
       }
       document.getElementById('send').onclick=sendChat;
@@ -850,10 +1641,18 @@
       tabC.onclick=function(){setTab(false);}; tabF.onclick=function(){setTab(true);};
 
       // ---- Load + live reload ----
-      function fetchDoc(doc){ return fetch(DIRMODE?'/api/plan?doc='+encodeURIComponent(doc):'/api/plan').then(function(r){return r.text();}); }
+      // null means "fetch failed" (error banner already shown) and is kept
+      // distinct from '' so a transient failure can never masquerade as a
+      // real empty document and trip the revised-doc diff below.
+      function fetchDoc(doc){
+        return fetch(DIRMODE?'/api/plan?doc='+encodeURIComponent(doc):'/api/plan')
+          .then(function(r){ if(!r.ok) throw new Error('status '+r.status); hideApiError(); return r.text(); })
+          .catch(function(e){ showApiError('Could not load "'+doc+'" — the review server may be unreachable.'); return null; });
+      }
       async function reloadDoc(doc){
         if(!docState[doc]) return;
         const md=await fetchDoc(doc);
+        if(md===null) return;   // load failed; state untouched, banner already shown
         const st=docState[doc];
         if(md===st.md) return;                   // spurious watch event, no content change
         const prev=st.md, revised=prev!==null;
@@ -869,8 +1668,22 @@
       }
       async function boot(){
         let meta={dir:false,docs:['plan']};
-        try{ meta=await (await fetch('/api/docs')).json(); }catch(e){}
+        try{
+          const r=await fetch('/api/docs');
+          if(!r.ok) throw new Error('status '+r.status);
+          meta=await r.json();
+          hideApiError();
+        }catch(e){ showApiError('Could not reach the review server. Retry once it is back up.'); }
         DIRMODE=!!meta.dir; docs=meta.docs||[];
+        // A directory with no markdown at all — nothing to render, nothing to
+        // load per-doc. Show the empty state and stop before the doc loop.
+        if(DIRMODE&&!docs.length){
+          tocEl.innerHTML='';
+          planEl.innerHTML='<div class="kit-empty"><p class="kit-empty__title">No documents to review</p>'
+            +'<p class="kit-empty__body">This directory has no markdown files.</p></div>';
+          paint();
+          return;
+        }
         // Accept-or-fix reviews hide the plan-only "Reject / don't build it"
         // verdict: directory (spec) review always — a spec documents work already
         // decided — and single-file review when the server was started with
@@ -889,22 +1702,31 @@
           };
           qEl.onkeydown=function(e){ if(e.key==='Escape'){ qEl.value=''; qEl.oninput(); qEl.blur(); } };
         }
-        planEl.innerHTML='';
+        // Panes are built off-DOM and only swapped in once every doc has
+        // resolved, so the .kit-skel placeholders already in #plan stay
+        // visible for the whole fetch instead of being wiped to blank first.
+        const frag=document.createDocumentFragment();
         docs.forEach(function(d,i){
           const pane=document.createElement('div'); pane.className='docpane'; pane.style.display='none';
-          planEl.appendChild(pane);
+          frag.appendChild(pane);
           docState[d]={md:null,pane:pane,scroll:0,key:'d'+i,headings:[]};
         });
-        for(let i=0;i<docs.length;i++){ const d=docs[i]; renderDocPane(d,await fetchDoc(d)); }
+        for(let i=0;i<docs.length;i++){ const d=docs[i]; const md=await fetchDoc(d); if(md!==null) renderDocPane(d,md); }
+        planEl.innerHTML=''; planEl.appendChild(frag);
         if(!DIRMODE||!docs.length) buildToc();   // DIRMODE: switchDoc below builds the tree once, seeded
         paint();
         if(docs.length) switchDoc(docs[0]);
         buildFilesIndex();
       }
-      try{const es=new EventSource('/api/events');es.onmessage=function(ev){
-        const m=String((ev&&ev.data)||''); const doc=m.indexOf('change:')===0?m.slice(7):docs[0];
-        reloadDoc(doc);
-      };}catch(e){}
+      try{
+        const es=new EventSource('/api/events');
+        es.onmessage=function(ev){
+          hideApiError();
+          const m=String((ev&&ev.data)||''); const doc=m.indexOf('change:')===0?m.slice(7):docs[0];
+          reloadDoc(doc);
+        };
+        es.onerror=function(){ if(!decisionSent) showApiError('Live connection to the review server was lost — revised docs will not auto-reload. Your notes are safe.'); };
+      }catch(e){ showApiError('Live reload is unavailable in this browser.'); }
       boot();
     </script>
   </body>