@jabworks/condux 0.14.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jabworks/condux",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "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/blueprint/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: blueprint
-description: "Produce dependency-free visual clarity artifacts at design time — grayscale HTML wireframes for UI screens and flows, and inline-SVG system diagrams (data models, flows, architecture, state machines) for backend work. During /discovery when the feature has a UI surface or a data model, from /draft-plan task cards, or standalone on \"mock this up\", \"wireframe this screen\", \"visualize the data model\", \"sketch the architecture\", \"diagram the flow\". Not for aesthetic or brand direction, editable design canvases or Figma, charts from real data, or generating code from a mockup."
+description: "Produce dependency-free visual clarity artifacts at design time — HTML wireframes and full renders for UI screens and flows in the house design language (surface-kit tokens), and inline-SVG system diagrams (data models, flows, architecture, state machines) for backend work. During /discovery when the feature has a UI surface or a data model, from /draft-plan task cards, or standalone on \"mock this up\", \"wireframe this screen\", \"visualize the data model\", \"sketch the architecture\", \"diagram the flow\". Not for aesthetic or brand direction, editable design canvases or Figma, charts from real data, or generating code from a mockup."
 argument-hint: "[surface or model to visualize — optional; defaults to the current design context]"
 ---
 
@@ -8,7 +8,9 @@ argument-hint: "[surface or model to visualize — optional; defaults to the cur
 
 Make the design visible before it's built. Wireframes tell a frontend dev what
 goes where and why; system diagrams tell a backend dev what talks to what.
-Structure, never style.
+Structure first — and everything speaks the house design language (the
+surface-kit token core), so a mockup already looks like it belongs to the
+product family.
 
 ## Usage
 
@@ -33,9 +35,11 @@ Structure, never style.
 │                                                                  │
 │  Step 2: PRODUCE                                                 │
 │  One self-contained HTML file per screen / flow state / diagram. │
-│  Wireframes follow references/wireframe-kit.md.                  │
-│  Diagrams follow references/diagram-kit.md.                      │
-│  No external assets, no CDN, no fonts beyond the system stack.   │
+│  Wireframes follow references/wireframe-kit.md — wireframe mode  │
+│  by default; render mode when structure is signed off or the     │
+│  user asks for fidelity. Diagrams follow references/             │
+│  diagram-kit.md. All styling from references/token-core.css.     │
+│  No external assets, no CDN, no font files.                      │
 │                                                                  │
 │  Step 3: DELIVER                                                 │
 │  Open in the browser (xdg-open / open). If neither works         │
@@ -50,11 +54,15 @@ Structure, never style.
 
 ## The Two Families
 
-**Wireframes (UI clarity).** Grayscale boxes with real content hierarchy and
-annotation callouts. A wireframe answers: what elements exist, how they group,
-what order they read in, what happens on each state (empty, loading, error,
-populated). Multiple states of one flow are separate files, named for the
-state. The full discipline — hard rules plus a copyable base-CSS block — is in
+**Wireframes and renders (UI clarity).** Two modes over one shared skeleton,
+both in the house tokens. *Wireframe mode* (default) is schematic — dashed
+grouping, neutral roles only, annotation callouts — and answers: what elements
+exist, how they group, what order they read in, what happens on each state
+(empty, loading, error, populated). *Render mode* unlocks the full language
+(accent, semantic and categorical colour, elevation, motion) to show how the
+settled structure will look; promotion is a style-block swap, the skeleton
+never changes. Multiple states of one flow are separate files, named for the
+state. The full discipline — hard rules plus copyable mode CSS blocks — is in
 `references/wireframe-kit.md`.
 
 **System diagrams (BE clarity).** Hand-authored inline SVG for four shapes:
@@ -94,8 +102,9 @@ mockup into the spec directory first and cite the committed copy.
 ## What Does NOT Happen
 
 ```
-✗ Brand styling, palettes, typography choices, premium polish — structure only
-✗ Colors beyond grayscale (one muted annotation accent is the ceiling)
+✗ Palettes or typography outside the shared token core — the house language
+  is the ceiling, render mode included; blueprint is not a brand playground
+✗ Chromatic colour in wireframe mode (neutral roles + the annotation accent)
 ✗ External dependencies — no Mermaid CDN, no image generation, no Figma
 ✗ Code generation from the mockup (that's implementation's job, later)
 ✗ Charts of real data (that's a dataviz concern, not a design mockup)

package/skills/blueprint/references/diagram-kit.md

@@ -2,28 +2,33 @@
 
 Reference for `/blueprint`. Hand-authored inline SVG — no Mermaid, no CDN, no
 renderer dependency. Every diagram is a self-contained HTML file that renders
-from `file://`.
+from `file://`. Diagrams have one look — no wireframe/render split — and it is
+the house language: paste `token-core.css` (sibling of this file) at the top
+of the `<style>` block, verbatim.
 
 ## Shared Conventions
 
 - Canvas: `<svg viewBox="0 0 W H" style="max-width:100%">` sized to content;
-  the page wraps it in the same `.frame` shell as the wireframe kit.
-- Palette mirrors the wireframe discipline: fills `#fff`/`#f0f0f0`, strokes
-  `#777`, text `#222`, the `#5b7c99` accent for the one thing the diagram is
-  about (the new entity, the changed edge) — never more than one accent use.
-- Text: `font-family: -apple-system, "Segoe UI", Roboto, sans-serif`, 13–14px
-  labels, 11px annotations. If a label doesn't fit its box, the box grows —
-  never shrink the font below 11px.
+  the page wraps it in the wireframe kit's `.frame` shell (either mode's).
+- Palette is token roles, referenced with `var(--…)` (CSS variables work in
+  inline SVG attributes): fills `var(--card)` / `var(--muted)`, strokes
+  `var(--border)`, edges `var(--subtle)`, text `var(--foreground)`. The one
+  accent is the `--primary` family — for the one thing the diagram is about
+  (the new entity, the changed edge) — never more than one accent use.
+- Text: `--sans` for titles, `--mono` for everything that is data — field
+  rows, cardinalities, edge labels (D2). 13–14px labels, 11px annotations
+  in `var(--muted-foreground)`. If a label doesn't fit its box, the box
+  grows — never shrink the font below 11px.
 - Arrowheads via one shared `<marker>`:
 
 ```html
 <defs>
   <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
           markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-    <path d="M0,0 L10,5 L0,10 z" fill="#777"/>
+    <path d="M0,0 L10,5 L0,10 z" fill="var(--subtle)"/>
   </marker>
 </defs>
-<!-- usage: <line ... stroke="#777" marker-end="url(#arrow)"/> -->
+<!-- usage: <line ... stroke="var(--subtle)" marker-end="url(#arrow)"/> -->
 ```
 
 - Every relationship line gets a label. An unlabeled arrow is a guess the
@@ -36,18 +41,22 @@ labels carry cardinality (`1..*`, `0..1`).
 
 ```html
 <g transform="translate(40,40)">
-  <rect width="200" height="24" fill="#f0f0f0" stroke="#777"/>
+  <rect width="200" height="24" fill="var(--muted)" stroke="var(--border)" rx="3"/>
   <text x="100" y="17" text-anchor="middle" font-weight="600">orders</text>
-  <rect y="24" width="200" height="72" fill="#fff" stroke="#777"/>
+  <rect y="24" width="200" height="72" fill="var(--card)" stroke="var(--border)"/>
   <text x="8"  y="41">id  PK</text>
   <text x="8"  y="61">user_id  FK</text>
   <text x="8"  y="81">status</text>
 </g>
 <!-- edge: users 1..* orders -->
-<line x1="240" y1="80" x2="340" y2="80" stroke="#777" marker-end="url(#arrow)"/>
-<text x="290" y="72" text-anchor="middle" font-size="11">1..*</text>
+<line x1="240" y1="80" x2="340" y2="80" stroke="var(--subtle)" marker-end="url(#arrow)"/>
+<text x="290" y="72" text-anchor="middle" font-size="11" fill="var(--muted-foreground)">1..*</text>
 ```
 
+An accented entity (the diagram's one accent) swaps its title-bar fill to
+`var(--primary-muted)`, its strokes to `var(--primary)`, and its title text to
+`var(--primary-text)`.
+
 ## 2. Request / Data Flow
 
 Actors and stores as boxes on one horizontal band; numbered edges show

package/skills/blueprint/references/token-core.css

@@ -0,0 +1,173 @@
+/* Shared design core — do not hand-edit; edit scripts/tokens/core.css. */
+:root {
+  --background: #111110;
+  --card: #191918;
+  --card-foreground: #eeeeec;
+  --popover: #222221;
+  --foreground: #eeeeec;
+  --muted: #222221;
+  --muted-foreground: #b5b3ad;
+  --border: #3b3a37;
+  --input: #3b3a37;
+  --primary: #978365;
+  --primary-foreground: #ffffff;
+  --primary-hover: #a39073;
+  --primary-muted: #24231f;
+  --primary-text: #cbb99f;
+  --ring: #978365;
+  --accent: #2a2a28;
+  --success: #71d083;
+  --success-muted: #1b2a1e;
+  --success-border: #2d5736;
+  --warning: #ffca16;
+  --warning-muted: #302008;
+  --warning-border: #5c3d05;
+  --destructive: #ff977d;
+  --destructive-muted: #391714;
+  --destructive-border: #6e2920;
+  --info: #70b8ff;
+  --info-muted: #0d2847;
+  --info-border: #104d87;
+  /* categorical — series identity; neither the accent nor the semantics */
+  --cat-1: #cf686e;
+  --cat-2: #897ed6;
+  --cat-3: #41a265;
+  --cat-4: #3694d4;
+  --cat-5: #94911b;
+  --cat-6: #ba6cae;
+  --cat-7: #c37827;
+  --cat-8: #00a0a4;
+  --cat-other: #686560;
+  --outline: rgba(237, 237, 236, 0.08);
+  --subtle: #686560;
+  --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:not([data-theme="dark"]) {
+    --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;
+    --cat-1: #b04d54;
+    --cat-2: #6f63b8;
+    --cat-3: #1e874b;
+    --cat-4: #0a78b7;
+    --cat-5: #797600;
+    --cat-6: #9d5192;
+    --cat-7: #a45e00;
+    --cat-8: #008f93;
+    --cat-other: #a8a294;
+    --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;
+  --cat-1: #b04d54;
+  --cat-2: #6f63b8;
+  --cat-3: #1e874b;
+  --cat-4: #0a78b7;
+  --cat-5: #797600;
+  --cat-6: #9d5192;
+  --cat-7: #a45e00;
+  --cat-8: #008f93;
+  --cat-other: #a8a294;
+  --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);
+}

package/skills/blueprint/references/wireframe-kit.md

@@ -1,88 +1,295 @@
 # Wireframe Kit
 
-Reference for `/blueprint`. The discipline is what keeps a wireframe
-unambiguous: the moment brand styling creeps in, reviewers debate taste
-instead of structure.
+Reference for `/blueprint`. Every mockup speaks the house design language —
+the surface-kit token core in `token-core.css` beside this file — in one of
+two modes. The discipline is what keeps a mockup unambiguous: in wireframe
+mode the schematic look keeps reviewers debating structure instead of taste;
+in render mode the full language shows how the approved structure will
+actually look.
+
+## The Two Modes
+
+| | `wireframe` | `render` |
+|---|---|---|
+| When | design time — structure is the open question | sign-off / presentation — structure is settled |
+| Colour roles | neutrals only; semantics stay silent | full palette: accent, semantic, categorical |
+| Grouping | dashed borders, flat corners | solid borders, radius + elevation |
+| Buttons | transparent outlines, emphasis by border weight | filled `--primary`, hover, motion |
+| Overall read | "schematic under discussion" | "this is how it'll look" |
+
+**Same skeleton, two skins.** Both modes share identical HTML structure and
+class names; only the component CSS block differs. Promoting a signed-off
+wireframe to a render is a style-block swap — nothing may move. Declare the
+mode on the body: `<body data-blueprint-mode="wireframe">` (or `"render"`).
+
+Default to wireframe mode. Produce a render when the structure is already
+signed off, when the user asks for fidelity ("make it look real", "mock this
+up properly"), or when discovery offers promotion at sign-off.
 
 ## Hard Rules
 
-1. **Grayscale only.** Backgrounds `#fff`–`#f5f5f5`, borders `#ccc`,
-   text `#222`/`#777`. One muted accent (`#5b7c99`) is allowed for
-   annotation callouts only — never for UI elements.
-2. **System font stack.** `-apple-system, "Segoe UI", Roboto, sans-serif`.
-   No webfonts, no font files.
-3. **No imagery.** Photos and illustrations render as a crossed box with a
+1. **Tokens only.** Every colour, size, radius, and duration comes from a
+   `var(--…)` defined in the token core. No raw hex, no ad-hoc px values
+   where a ramp token exists. Paste `token-core.css` (sibling of this file)
+   at the top of every `<style>` block, verbatim.
+2. **Wireframe mode is neutral.** Its component CSS may reference only:
+   `--background`, `--card`, `--foreground`, `--muted`, `--muted-foreground`,
+   `--border`, `--input`, `--accent`, `--subtle`, the `--primary*` family
+   (annotation callouts only), and every type / space / radius / motion /
+   font token. Semantic (`--success*`, `--warning*`, `--destructive*`,
+   `--info*`), categorical (`--cat-*`), and elevation (`--shadow-*`) tokens
+   are render-mode vocabulary.
+3. **Fonts per D2.** `--sans` for the UI's own copy; `--mono` for everything
+   meta — labels, badges, annotations, data. The stacks are fallbacks; never
+   load font files.
+4. **No imagery.** Photos and illustrations render as a crossed box with a
    label (`.img-box`). Icons render as their name in brackets, e.g. `[gear]`.
-4. **Real hierarchy, placeholder content.** Headings, labels, and CTAs carry
+5. **Real hierarchy, placeholder content.** Headings, labels, and CTAs carry
    their actual intended text; body copy may be greeked with `▓▓▓` bars.
-5. **Annotate decisions, not furniture.** A callout explains *why this is
+6. **Annotate decisions, not furniture.** A callout explains *why this is
    here* or *what happens on interaction* — not "this is a button".
-6. **One file per screen or flow state.** Empty, loading, error, and populated
+7. **One file per screen or flow state.** Empty, loading, error, and populated
    are different files named for the state:
    `settings-page.html`, `settings-page-empty.html`, `settings-page-error.html`.
-7. **Self-contained.** All CSS inline in a `<style>` block. No external
+8. **Self-contained.** All CSS inline in a `<style>` block. No external
    requests of any kind. The file must render identically from `file://`.
+   The token core carries dark and light themes; the page follows the OS.
 
-## Base CSS
+## Page Skeleton
+
+```html
+<title>settings-page — wireframe</title>
+<style>
+/* 1. token-core.css pasted verbatim */
+/* 2. ONE mode block from below */
+</style>
+<body data-blueprint-mode="wireframe">
+<div class="frame">
+  <div class="box"><strong>Header</strong> · [logo] · nav: Account / Billing / Team</div>
+  <div class="row">
+    <div class="box"><!-- sidebar --></div>
+    <div class="box" style="flex:3"><!-- main content --></div>
+  </div>
+  <div class="note">Sidebar collapses below 768px — Billing moves into the header nav.</div>
+</div>
+</body>
+```
 
-Copy this block into every wireframe's `<style>` and build on it.
+## Wireframe Mode CSS
 
 ```css
+/* wireframe mode — surface-kit neutrals only, schematic look.
+   Emphasis by value and weight, never hue. */
 * { margin: 0; box-sizing: border-box; }
 body {
-  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
-  background: #f5f5f5; color: #222; padding: 24px;
+  font-family: var(--sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  background: var(--background);
+  color: var(--foreground);
+  padding: var(--space-6);
 }
-.frame {            /* the device/viewport boundary */
-  background: #fff; border: 2px solid #ccc; border-radius: 6px;
-  max-width: 1100px; margin: 0 auto; padding: 24px;
+.frame {
+  background: var(--card);
+  border: 1px dashed var(--muted-foreground);
+  border-radius: var(--radius-sm);
+  max-width: 1100px; margin: 0 auto; padding: var(--space-6);
 }
-.box {              /* generic grouping region */
-  border: 1px dashed #bbb; border-radius: 4px;
-  padding: 16px; margin-bottom: 16px;
+.topbar {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border);
+  margin-bottom: var(--space-5);
 }
-.row { display: flex; gap: 16px; }
+.nav { display: flex; gap: var(--space-4); font-size: var(--text-sm); }
+.nav a { color: var(--muted-foreground); }
+.nav a.active { color: var(--foreground); border-bottom: 2px solid var(--foreground); padding-bottom: 2px; }
+.row { display: flex; gap: var(--space-4); }
 .row > * { flex: 1; }
-.img-box {          /* rule 3: imagery placeholder */
-  border: 1px solid #ccc; background:
-    linear-gradient(45deg, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%),
-    linear-gradient(-45deg, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%);
+.box {
+  background: var(--card); border: 1px dashed var(--border);
+  border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-4);
+}
+h2 { font-size: var(--text-md); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
+.side-item {
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
+  color: var(--muted-foreground); font-size: var(--text-sm);
+}
+.side-item.active { background: var(--accent); color: var(--foreground); }
+.field { margin-bottom: var(--space-3); }
+label {
+  display: block; font-family: var(--mono); font-size: var(--text-2xs);
+  text-transform: uppercase; letter-spacing: var(--tracking-wide);
+  color: var(--muted-foreground); margin-bottom: var(--space-1);
+}
+input {
+  width: 100%; background: transparent; color: var(--foreground);
+  border: 1px solid var(--input); border-radius: var(--radius);
+  padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm);
+}
+.btn {
+  display: inline-block; border: 1px solid var(--muted-foreground); border-radius: var(--radius-sm);
+  padding: var(--space-2) var(--space-4); background: transparent;
+  color: var(--foreground); font-size: var(--text-sm);
+}
+.btn.primary { border-width: 2px; font-weight: 600; }
+.btn.danger { color: var(--muted-foreground); }   /* semantics stay silent in wireframe */
+.greek { color: var(--border); letter-spacing: 2px; overflow: hidden; white-space: nowrap; }
+.img-box {
+  border: 1px solid var(--border); background:
+    linear-gradient(45deg, transparent 49.5%, var(--border) 49.5%, var(--border) 50.5%, transparent 50.5%),
+    linear-gradient(-45deg, transparent 49.5%, var(--border) 49.5%, var(--border) 50.5%, transparent 50.5%)
+    var(--muted);
   display: flex; align-items: center; justify-content: center;
-  color: #777; min-height: 120px;
+  color: var(--muted-foreground); font-family: var(--mono); font-size: var(--text-xs);
+  min-height: 120px; border-radius: var(--radius);
 }
-.btn {              /* any actionable element */
-  display: inline-block; border: 1px solid #777; border-radius: 4px;
-  padding: 8px 20px; background: #eee; color: #222;
+table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+th {
+  font-family: var(--mono); font-size: var(--text-2xs); text-transform: uppercase;
+  letter-spacing: var(--tracking-wide); color: var(--muted-foreground);
+  text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border);
 }
-.greek {            /* rule 4: body-copy placeholder */
-  color: #ccc; letter-spacing: 2px; overflow: hidden; white-space: nowrap;
+td { padding: var(--space-2); border-bottom: 1px solid var(--border); }
+.badge {
+  display: inline-block; font-family: var(--mono); font-size: var(--text-2xs);
+  padding: 2px var(--space-2); border-radius: var(--radius-full);
+  border: 1px solid var(--border); color: var(--muted-foreground);
 }
-.note {             /* rule 5: annotation callout — the only accent use */
-  border-left: 3px solid #5b7c99; background: #eef2f6; color: #33475b;
-  padding: 8px 12px; font-size: 13px; margin: 8px 0;
+.note::before { content: "\25B8 note  "; font-weight: 600; letter-spacing: var(--tracking-wide); }
+.note {
+  border-left: 3px solid var(--primary); background: var(--primary-muted);
+  color: var(--primary-text); border-radius: 0 var(--radius) var(--radius) 0;
+  padding: var(--space-2) var(--space-3); margin: var(--space-3) 0;
+  font-family: var(--mono); font-size: var(--text-xs); line-height: var(--leading-snug);
 }
+.actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
+.choice { display: flex; gap: var(--space-2); }
+.empty { text-align: center; padding: var(--space-8); border-style: dashed; }
+.muted { color: var(--muted-foreground); }
 ```
 
 Greeked copy: `<div class="greek">▓▓▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓</div>` at whatever
 width the real copy would occupy.
 
-## Page Skeleton
+## Render Mode CSS
 
-```html
-<title>settings-page — wireframe</title>
-<style>/* base CSS above */</style>
-<div class="frame">
-  <div class="box"><strong>Header</strong> · [logo] · nav: Account / Billing / Team</div>
-  <div class="row">
-    <div class="box"><!-- sidebar --></div>
-    <div class="box" style="flex:3"><!-- main content --></div>
-  </div>
-  <div class="note">Sidebar collapses below 768px — Billing moves into the header nav.</div>
-</div>
+```css
+/* render mode — the full house language. Same skeleton, colour unlocked:
+   accent on primary actions, semantic status colours, categorical chips,
+   elevation, motion. */
+* { margin: 0; box-sizing: border-box; }
+body {
+  font-family: var(--sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  background: var(--background);
+  color: var(--foreground);
+  padding: var(--space-6);
+}
+.frame {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  max-width: 1100px; margin: 0 auto; padding: var(--space-6);
+}
+.topbar {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border);
+  margin-bottom: var(--space-5);
+}
+.topbar strong { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
+.nav { display: flex; gap: var(--space-4); font-size: var(--text-sm); }
+.nav a { color: var(--muted-foreground); transition: color var(--dur-fast) var(--ease-out); }
+.nav a.active { color: var(--primary-text); border-bottom: 2px solid var(--primary); padding-bottom: 2px; }
+.row { display: flex; gap: var(--space-4); }
+.row > * { flex: 1; }
+.box {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4);
+  box-shadow: var(--shadow-sm);
+}
+h2 { font-size: var(--text-md); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
+.side-item {
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
+  color: var(--muted-foreground); font-size: var(--text-sm);
+  transition: background var(--dur-fast) var(--ease-out);
+}
+.side-item.active { background: var(--primary-muted); color: var(--primary-text); }
+.field { margin-bottom: var(--space-3); }
+label {
+  display: block; font-family: var(--mono); font-size: var(--text-2xs);
+  text-transform: uppercase; letter-spacing: var(--tracking-wide);
+  color: var(--muted-foreground); margin-bottom: var(--space-1);
+}
+input {
+  width: 100%; background: var(--muted); color: var(--foreground);
+  border: 1px solid var(--input); border-radius: var(--radius);
+  padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm);
+  transition: border-color var(--dur-fast) var(--ease-out);
+}
+input:focus { outline: none; border-color: var(--ring); }
+.btn {
+  display: inline-block; border: 1px solid var(--border); border-radius: var(--radius);
+  padding: var(--space-2) var(--space-4); background: var(--accent);
+  color: var(--foreground); font-size: var(--text-sm); cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-out);
+}
+.btn.primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
+.btn.primary:hover { background: var(--primary-hover); }
+.btn.danger {
+  background: var(--destructive-muted); color: var(--destructive);
+  border-color: var(--destructive-border);
+}
+.greek { color: var(--border); letter-spacing: 2px; overflow: hidden; white-space: nowrap; }
+.img-box {
+  border: 1px solid var(--border); background:
+    linear-gradient(45deg, transparent 49.5%, var(--border) 49.5%, var(--border) 50.5%, transparent 50.5%),
+    linear-gradient(-45deg, transparent 49.5%, var(--border) 49.5%, var(--border) 50.5%, transparent 50.5%)
+    var(--muted);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--muted-foreground); font-family: var(--mono); font-size: var(--text-xs);
+  min-height: 120px; border-radius: var(--radius);
+}
+table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+th {
+  font-family: var(--mono); font-size: var(--text-2xs); text-transform: uppercase;
+  letter-spacing: var(--tracking-wide); color: var(--muted-foreground);
+  text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border);
+}
+td { padding: var(--space-2); border-bottom: 1px solid var(--border); }
+.badge {
+  display: inline-block; font-family: var(--mono); font-size: var(--text-2xs);
+  padding: 2px var(--space-2); border-radius: var(--radius-full);
+  border: 1px solid var(--border); color: var(--muted-foreground);
+}
+.badge.ok   { color: var(--success);     background: var(--success-muted);     border-color: var(--success-border); }
+.badge.warn { color: var(--warning);     background: var(--warning-muted);     border-color: var(--warning-border); }
+.badge.err  { color: var(--destructive); background: var(--destructive-muted); border-color: var(--destructive-border); }
+.badge.role-1 { color: var(--cat-2); border-color: var(--cat-2); background: transparent; }
+.badge.role-2 { color: var(--cat-4); border-color: var(--cat-4); background: transparent; }
+.badge.role-3 { color: var(--cat-other); border-color: var(--cat-other); background: transparent; }
+.note {
+  border-left: 3px solid var(--primary); background: var(--primary-muted);
+  color: var(--primary-text); border-radius: 0 var(--radius) var(--radius) 0;
+  padding: var(--space-2) var(--space-3); margin: var(--space-3) 0;
+  font-family: var(--mono); font-size: var(--text-xs); line-height: var(--leading-snug);
+}
+.actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
+.choice { display: flex; gap: var(--space-2); }
+.empty { text-align: center; padding: var(--space-8); border-style: dashed; box-shadow: none; }
+.muted { color: var(--muted-foreground); }
 ```
 
+The `.badge.role-*` classes are categorical-colour examples — rename them for
+the domain at hand (`.badge.plan-pro`, `.badge.env-staging`, …); the pattern
+to keep is one `--cat-N` per identity, `--cat-other` for the long tail.
+
 ## Review Posture
 
 Present a wireframe as a question, not an answer: "this is the structure I
 understood — what's wrong with it?" When two structures genuinely compete,
-produce both files and let discovery's mockup-picker run the choice.
+produce both files and let discovery's mockup-picker run the choice. A render
+is the opposite posture — it presents the settled structure in the house
+language, so changes at render stage should be taste-level, not structural;
+structural feedback at that point reopens the wireframe.

package/skills/discovery/SKILL.md

@@ -171,10 +171,12 @@ design that lives only in conversation doesn't count as signed off.
 ignored — see the bootstrap step there. Honour an `AGENTS.md` path override
 if the project defines one.
 
-For full design mockups — grayscale UI wireframes, data-model / flow /
-architecture diagrams — load the `blueprint` skill; the design doc links the
-files it produces. For *picking between* side-by-side options in the browser,
-see `references/mockup-picker.md` (it can point at blueprint's files).
+For full design mockups — UI wireframes and renders in the house token
+language, data-model / flow / architecture diagrams — load the `blueprint`
+skill; the design doc links the files it produces. At sign-off, offer to
+promote the chosen wireframes to render mode (a style-block swap). For
+*picking between* side-by-side options in the browser, see
+`references/mockup-picker.md` (it can point at blueprint's files).
 
 ## Design Review Loop
 

package/skills/discovery/evals/trigger_eval.json

@@ -7,12 +7,12 @@
   { "query": "design session for the new onboarding", "should_trigger": true, "expected_skill": "discovery" },
   { "query": "brainstorm ideas for the notifications feature", "should_trigger": true, "expected_skill": "discovery" },
   { "query": "whats done look like for this feature? lets align first", "should_trigger": true, "expected_skill": "discovery" },
-  { "query": "resume the design we started yesterday", "should_trigger": true, "expected_skill": "discovery" },
-  { "query": "found an existing design doc for this, continue from it", "should_trigger": true, "expected_skill": "discovery" },
+  { "query": "resume the design we started yesterday", "should_trigger": true, "expected_skill": "discovery", "disallowed": ["session-handoff"] },
+  { "query": "found an existing design doc for this, continue from it", "should_trigger": true, "expected_skill": "discovery", "disallowed": ["session-handoff"] },
   { "query": "design a database schema for multi-tenancy", "should_trigger": true, "expected_skill": "discovery" },
   { "query": "big refactor, unclear boundaries — where do we even start", "should_trigger": true, "expected_skill": "discovery" },
-  { "query": "resume where we left off last session", "should_trigger": true, "expected_skill": "session-handoff" },
-  { "query": "pick up from the handoff doc", "should_trigger": true, "expected_skill": "session-handoff" },
+  { "query": "resume where we left off last session", "should_trigger": true, "expected_skill": "session-handoff", "disallowed": ["discovery"] },
+  { "query": "pick up from the handoff doc", "should_trigger": true, "expected_skill": "session-handoff", "disallowed": ["discovery"] },
   { "query": "we already have a signed off design, write the plan", "should_trigger": true, "expected_skill": "draft-plan" },
   { "query": "skip discovery, just plan it", "should_trigger": true, "expected_skill": "draft-plan" },
   { "query": "small tweak to the button color", "should_trigger": true, "expected_skill": "workflow" },

package/skills/draft-plan/evals/trigger_eval.json

@@ -1,8 +1,8 @@
 [
-  { "query": "write the implementation plan", "should_trigger": true, "expected_skill": "draft-plan", "accept": ["workflow"] },
-  { "query": "turn the design into task cards", "should_trigger": true, "expected_skill": "draft-plan" },
+  { "query": "write the implementation plan", "should_trigger": true, "expected_skill": "draft-plan", "accept": ["workflow"], "disallowed": ["technical-spec"] },
+  { "query": "turn the design into task cards", "should_trigger": true, "expected_skill": "draft-plan", "disallowed": ["technical-spec"] },
   { "query": "plan out the epic we signed off yesterday", "should_trigger": true, "expected_skill": "draft-plan" },
-  { "query": "create the .condux/plans file for this feature", "should_trigger": true, "expected_skill": "draft-plan" },
+  { "query": "create the .condux/plans file for this feature", "should_trigger": true, "expected_skill": "draft-plan", "disallowed": ["technical-spec"] },
   { "query": "break this down into tasks with dependencies", "should_trigger": true, "expected_skill": "draft-plan" },
   { "query": "write-plan for checkout v2", "should_trigger": true, "expected_skill": "draft-plan" },
   { "query": "we havent designed this yet but write a plan anyway", "should_trigger": true, "expected_skill": "draft-plan", "accept": ["discovery"] },

package/skills/subagent-execution/evals/trigger_eval.json

@@ -2,14 +2,14 @@
   { "query": "execute the plan with specialist agents", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "run the plan task by task with subagents", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "use the coder agent to implement the plan", "should_trigger": true, "expected_skill": "subagent-execution" },
-  { "query": "resume plan execution from the ledger", "should_trigger": true, "expected_skill": "subagent-execution" },
+  { "query": "resume plan execution from the ledger", "should_trigger": true, "expected_skill": "subagent-execution", "disallowed": ["session-handoff"] },
   { "query": "spawn agents for the LARGE plan", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "whats in spawn-rules for picking an agent", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "prepare a task brief for task 4", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "build the review package for the implementer's commits", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "which model should the coder agent get for this task", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "continue the wave, tasks 5 and 6 are unblocked", "should_trigger": true, "expected_skill": "subagent-execution" },
-  { "query": "we compacted mid-plan, where were we with the agents", "should_trigger": true, "expected_skill": "subagent-execution" },
+  { "query": "we compacted mid-plan, where were we with the agents", "should_trigger": true, "expected_skill": "subagent-execution", "disallowed": ["session-handoff"] },
   { "query": "dont re-dispatch tasks that are already done", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "spawn the agents for this plan", "should_trigger": true, "expected_skill": "subagent-execution" },
   { "query": "dispatch these three unrelated fixes in parallel", "should_trigger": true, "expected_skill": "subagent-deployment" },

package/skills/technical-spec/evals/trigger_eval.json

@@ -1,17 +1,17 @@
 [
   { "query": "save spec", "should_trigger": true, "expected_skill": "technical-spec" },
-  { "query": "document what we decided", "should_trigger": true, "expected_skill": "technical-spec" },
+  { "query": "document what we decided", "should_trigger": true, "expected_skill": "technical-spec", "disallowed": ["draft-plan"] },
   { "query": "spec this out", "should_trigger": true, "expected_skill": "technical-spec" },
   { "query": "persist the api contract and the quirks we found", "should_trigger": true, "expected_skill": "technical-spec" },
   { "query": "write up the field mappings from backend to UI", "should_trigger": true, "expected_skill": "technical-spec" },
   { "query": "update the spec for wan-config", "should_trigger": true, "expected_skill": "technical-spec" },
   { "query": "scaffold a spec folder for this feature", "should_trigger": true, "expected_skill": "technical-spec" },
   { "query": "whats the format for quirks.md", "should_trigger": true, "expected_skill": "technical-spec", "kind": "in-context" },
-  { "query": "record the decision rationale for future sessions", "should_trigger": true, "expected_skill": "technical-spec" },
+  { "query": "record the decision rationale for future sessions", "should_trigger": true, "expected_skill": "technical-spec", "disallowed": ["draft-plan"] },
   { "query": "bump the index.md changelog for the spec", "should_trigger": true, "expected_skill": "technical-spec" },
-  { "query": "save the design as a tech spec with live preview", "should_trigger": true, "expected_skill": "technical-spec" },
+  { "query": "save the design as a tech spec with live preview", "should_trigger": true, "expected_skill": "technical-spec", "disallowed": ["draft-plan"] },
   { "query": "sepc this out pls", "should_trigger": true, "expected_skill": "technical-spec" },
-  { "query": "write up what we decided about the milestone", "should_trigger": true, "expected_skill": "technical-spec" },
+  { "query": "write up what we decided about the milestone", "should_trigger": true, "expected_skill": "technical-spec", "disallowed": ["draft-plan"] },
   { "query": "update the spec with what we built", "should_trigger": true, "expected_skill": "technical-spec" },
   { "query": "load the spec for checkout before we start the task", "should_trigger": true, "expected_skill": "workflow", "accept": ["spec-browser"], "note": "spec-browser owns \"where is the spec for X\" navigation; loading a spec before a task is servable by either the router's step-2 lookup or the spec site." },
   { "query": "browse the specs tree", "should_trigger": true, "expected_skill": "spec-browser" },