@eventmodelers/cli 2.0.34 → 2.0.36

package/extensions/prototype/local-build.js

@@ -4,6 +4,7 @@
 import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { skeleton } from '../../stacks/modeling-kit/templates/.claude/skills/prototype/assets/scaffold.mjs';
 import { loadScreens, loadSlices, paths, readJson, sliceHash, writeJson } from './state.js';
 
 const PKG = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
@@ -61,12 +62,24 @@ export function status(cwd) {
   const p = paths(cwd);
   const { byId, ...report } = plan(cwd);
   mkdirSync(p.blocks, { recursive: true });
+  const screens = loadScreens(p);
+  const sliceById = Object.fromEntries(loadSlices(p).map(({ slice }) => [slice.id, slice]));
   // Every slice that already has a block keeps it in the work folder: unchanged ones as the page has them, changed ones as the previous
   // version — to be patched in place (Edit) and given the new hash, not rewritten from nothing. Work already done on a changed
   // slice's block is never overwritten by running `status` again. Only new slices start empty.
   for (const s of report.slices) {
     const file = join(p.blocks, `${s.id}.html`);
     if (byId[s.id] && (s.state === 'unchanged' || !existsSync(file))) writeFileSync(file, byId[s.id].block + '\n');
+    // The deterministic part of a new or changed slice's block — specs from the scenarios, screens as JSX, a defineSlice stub — is generated
+    // (shared with the platform skill); the agent only fills the @@TODO. A block already being worked on is left alone.
+    if (s.state !== 'unchanged') {
+      const slice = sliceById[s.id];
+      const own = (slice.screens || []).map((x) => ({ title: x.title, lane: x.lane, ...(screens[x.linkedId || x.id] || {}) }));
+      if (byId[s.id]) { mkdirSync(join(p.work, 'previous'), { recursive: true }); writeFileSync(join(p.work, 'previous', `${s.id}.html`), byId[s.id].block + '\n'); }
+      if (!existsSync(file) || (byId[s.id] && readFileSync(file, 'utf8').trim() === byId[s.id].block.trim())) {
+        writeFileSync(file, skeleton({ slice, hash: s.hash, order: s.order, specSlice: slice, screens: own }).block);
+      }
+    }
   }
   writeJson(join(p.work, 'status.json'), report);
   return report;
@@ -88,6 +101,7 @@ export function assemble(cwd) {
     const [found] = blocksIn(block);
     if (!found || found.id !== s.id) problems.push(`${file}: not a slice block for ${s.id}`);
     else if (found.hash !== s.hash) problems.push(`${file}: data-em-hash is ${found.hash}, the slice's hash is ${s.hash}`);
+    if (block.includes('@@TODO')) problems.push(`${file}: still has @@TODO — fill every one`);
     if ((block.match(/<\/script/gi) || []).length !== 1) problems.push(`${file}: a closing script tag appears inside the block`);
     return block;
   });

package/extensions/prototype/skills/local-prototype-build/SKILL.md

@@ -14,7 +14,7 @@ The page `.prototype/index.html` is derived from the model: slice by slice, one
    {{CLI}} prototype status
    ```
    Lists every slice as `new`, `changed` or `unchanged`, and puts the blocks of unchanged slices into `.prototype/work/slices/`. The hash covers the slice's elements, scenarios and its screens — not its status or comments.
-2. **Write a block for every `new` slice and patch the block of every `changed` one** in `.prototype/work/slices/<slice id>.html`, with exactly the `data-em-hash` that `status` printed. A `changed` slice's previous block is already in that file: change only what the model change touched (`Edit` the field, the `evolve` branch, the markup — never rewrite the block from nothing) and set the new hash. A `new` slice gets a whole block. Read the slice from `.slices/<context>/<slice>/slice.json` and its screens from `.prototype/screens/<node id>/` (`screen.json` + `page-N.html`).
+2. **Complete the block of every `new` and `changed` slice** in `.prototype/work/slices/<slice id>.html`. `status` has already generated its deterministic part — the script tag with the right hash, `GENERATED_SPECS` (every scenario and storyline), each HTML page of its screens as a JSX component, and a `defineSlice` stub with `@@TODO` — so only the judgment is left: `decide` / `evolve` / `process` and wiring the screen part to the hooks. `Edit` the skeleton in place (never rewrite it); `assemble` refuses a block that still has `@@TODO`. A `changed` slice's previous block is in `.prototype/work/previous/<slice id>.html` for reference. Read the slice from `.slices/<context>/<slice>/slice.json` and its screens from `.prototype/screens/<node id>/` (`screen.json` + `page-N.html`). Slices are independent: one after another works everywhere; if your environment can run sub-agents, you may give each slice's file to its own worker (about six at a time) and redo any that fail serially.
    How to write a block — its logic from the scenarios, its part of the screen, its exact shape — is `references/block-rules.md`; follow its steps 4, 5 and 6, and the contract in `references/slices.example.html`. Ignore everything there about `connect`, MCP tools, reading from the board, `prototype.mjs` and uploading: the files above replace all of it.
 3. **Assemble.**
    ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventmodelers/cli",
-  "version": "2.0.34",
+  "version": "2.0.36",
   "description": "Eventmodelers CLI — real-time Claude agent + skills for Claude Code, for any stack (Node, Supabase, Axon, OpenCQRS, UmaDB, Kurrent, or modeling-only)",
   "type": "module",
   "bin": {

package/stacks/modeling-kit/templates/.claude/skills/prototype/SKILL.md

@@ -59,28 +59,30 @@ EM_TOKEN="$TOKEN" node <skill-dir>/assets/prototype.mjs status \
 
 Per slice, the hash covers its elements with their fields and dependencies, its scenarios and storylines, and the content of its screens (HTML pages and marks, or the sketch) — not its status, assignee, ticket or comments, so moving a slice to Done rebuilds nothing. The hashes are compared with those on the blocks of the prototype the platform stores for this context — the page itself is the memory, no other state is kept — so a run in another chat session, folder or machine still rebuilds only what changed. `status` downloads it itself; the page never passes through you. Only when the platform has none yet does it fall back to a local `<out>/index.html` (an earlier run whose upload failed); `baseline` in `status.json` says which it was (`platform` / `local` / `none`).
 
-`<out>/.work/status.json` carries the context's id (`contextId` — the MODEL_CONTEXT or timeline the name matched; the platform resolves a timeline to its effective context when storing) and lists every slice with `state` (`new` / `changed` / `unchanged`), its `hash`, `order` and `sliceType`, plus `removed` slices and the CSS framework the screens use. The blocks of unchanged slices are already copied to `<out>/.work/slices/<slice id>.html`.
+`<out>/.work/status.json` carries the context's id (`contextId` — the MODEL_CONTEXT or timeline the name matched; the platform resolves a timeline to its effective context when storing) and lists every slice with `state` (`new` / `changed` / `unchanged`), its `hash`, `order` and `sliceType`, plus `removed` slices, and the CSS framework the screens use. The blocks of unchanged slices are already copied to `<out>/.work/slices/<slice id>.html`.
 
-**Nothing new or changed and nothing removed** → the local page is up to date, but that says nothing about the platform's copy (an earlier run may have stopped before uploading). Skip writing blocks (Steps 3–5) but still run `assemble` and **Upload** in Step 6 — `assemble` takes the template and runtime fresh from the skill, so a kit fix to the harness reaches the page even when the board didn't change — then report.
+**For every new or changed slice `status` also writes the deterministic part of its block** — you don't write it:
 
-A change in one slice can matter to another (a renamed event field that a read model in another slice reads): that slice's own JSON changes with it, so it is flagged too. Build only what is flagged.
+| File | What it is |
+|---|---|
+| `<out>/.work/slices/<slice id>.html` | the block **skeleton**: script tag with the right hash and `order`, `GENERATED_SPECS` (every scenario and storyline as a spec entry, example values typed), one component per HTML page of its screens (translated to JSX 1:1), and a `defineSlice` stub with `@@TODO` where judgment is needed |
+| `<out>/.work/data/<slice id>.json` | the slice as the board has it: `slice` (elements with fields, descriptions, dependencies), `specs` (scenarios, storylines) and `screens` (pages, marks, or sketch) — **read this instead of calling the board again** |
+| `<out>/.work/previous/<slice id>.html` | for a `changed` slice, the block as it was — reference only |
 
----
+`assemble` refuses a block that still contains `@@TODO`. `// NEEDS:` lines in a skeleton name scenarios the generator could not turn into a spec; write those by hand.
 
-## Step 3 — Read the flagged slices
+**Nothing new or changed and nothing removed** → the local page is up to date, but that says nothing about the platform's copy (an earlier run may have stopped before uploading). Skip Steps 3–5 and 6's block work, but still write the questions (Step 5b), run `assemble` and **Upload** in Step 6 — `assemble` takes the template and runtime fresh from the skill, so a kit fix to the harness reaches the page even when the board didn't change — then report.
 
-For the new and changed slices only, **one call for all of them** — never one call per slice:
+A change in one slice can matter to another (a renamed event field that a read model in another slice reads): that slice's own JSON changes with it, so it is flagged too. Build only what is flagged.
 
-```
-mcp__eventmodelers__get_slice_data { "boardId": "<BOARD_ID>", "contextName": "<CONTEXT>", "sliceIds": ["<id>", …], "format": "json" }
-```
+---
 
-No `projection`: each slice comes with its fields **and** its specs.
+## Step 3 — Read the flagged slices
 
-- the slice's elements → `sliceType`, `commands[]`, `events[]`, `readmodels[]`, `screens[]`, `processors[]` (automations), each element with `fields[]` (`type`, `example`, `generated`, `idAttribute`, `cardinality`, `subfields`, `mapping`), `description` and `dependencies[]` (`INBOUND`/`OUTBOUND`) — the wiring SCREEN → COMMAND → EVENT → READMODEL → SCREEN / AUTOMATION → COMMAND.
-- its specs → `specifications[]` (`given` / `when` / `then` with example values; a rejection is a `then` step of type `SPEC_ERROR` whose `description` is the message; `expectEmptyList` on read-model steps) and `storylines[]`.
+Read `<out>/.work/data/<slice id>.json` for each flagged slice. No board call is needed for them. (`mcp__eventmodelers__get_slice_data` / `get_nodes` only if a file is missing.)
 
-**Screens.** For each of the slices' screens read its own node — `linkedId` when set (a copy can carry its own marks), else `id` — all of them in one call: `mcp__eventmodelers__get_nodes { "boardId", "nodeIds": [...] }`. `HTML_SCREEN` → `meta.pages`, `meta.marks`, `meta.fields`. `SCREEN` → `mcp__eventmodelers__get_image_snapshot_description { "boardId", "nodeId" }` for its sketch `{ elements }` (grid vocabulary in `storyboard-screen`); none (an uploaded screenshot) → the screen's fields are all there is.
+- the slice's elements → `commands[]`, `events[]`, `readmodels[]`, `screens[]`, `processors[]` (automations), each element with `fields[]` (`type`, `example`, `generated`, `idAttribute`, `cardinality`, `subfields`, `mapping`), `description` and `dependencies[]` (`INBOUND`/`OUTBOUND`) — the wiring SCREEN → COMMAND → EVENT → READMODEL → SCREEN / AUTOMATION → COMMAND.
+- `specs` → `specifications[]` and `storylines[]`; `screens` → `pages` and `marks` for an HTML screen, `sketch` `{ elements }` for a SCREEN (grid vocabulary in `storyboard-screen`), nothing for an uploaded screenshot (the screen's fields are all there is).
 
 **Copies.** An element with `elementCopy: true` is a linked copy (its `id` is the original's). It is defined by the slice that owns the original, never twice. An EVENT whose original lives in another context, or that no COMMAND in this context produces, is an **external event**.
 
@@ -106,7 +108,7 @@ Write each flagged slice's logic before its UI. Names are the board's titles wit
 
 **External events** — `externalEvents: [{ type, from, fields: [{ name, type, example }] }]` on the slice that consumes them; the simulate panel records them, which is how translation automations get triggered.
 
-**Specs — every scenario and every storyline of the slice**, one entry each:
+**Specs — already generated** into `GENERATED_SPECS` from the scenarios and storylines (the table below is the mapping the generator applies). Check it against the scenarios you analysed, fix what is off, and write any `// NEEDS:` entry by hand:
 
 | Scenario | Spec entry |
 |---|---|
@@ -122,6 +124,8 @@ Example values become typed data (`Int`/`Double` → numbers, `Boolean` → bool
 
 ## Step 5 — The slice's part of the screen
 
+**The skeleton already holds each HTML page translated to JSX** — one component per page, markup 1:1, inline handlers dropped. What is left is judgment: cut the component to this slice's region, replace sample data with the hooks, wire the buttons. Do that by editing the skeleton in place (small edits), never by rewriting the page. A sketch screen has no generated component — redraw it as below.
+
 **Screens are tabs, one per screen name.** Slices whose screens share a name contribute to the same tab, in timeline order — so a screen shown in three slices with three different marks is one tab with three parts. A slice declares its part as `screens: { '<Screen Title>': { actor: '<lane>', part: Component } }`.
 
 **Read the screen HTML for what belongs to this slice:**
@@ -131,7 +135,7 @@ Example values become typed data (`Int`/`Double` → numbers, `Boolean` → bool
 - a button inside a list row navigates with the row's ids (`go('<title>', { orderId })`) or issues that row's command with them.
 - a button the model gives no meaning to: kept as designed, `onClick={() => notModeled('<label>')}` (`const notModeled = useNotModeled()`), and listed in the report.
 
-**HTML screens — 1:1**: translate the slice's region of `meta.pages` into JSX without redesigning it (`class` → `className`, `for` → `htmlFor`, style strings → objects, void elements closed). Several pages → a step-through with local `page` state. **Sketch screens — redrawn**: a 1000×800 relative container, each element absolutely positioned at `gridX*20`/`gridY*20` (`gridWidth*20` × `gridHeight*20`) — `rectangle` → `div`, `headline`/`text` → text at its `fontSize`, `button` → `<button>`, `input` → `<input placeholder>`, `image` → a filled box, `line`/`circle` → inline SVG — then wired the same way.
+**HTML screens — 1:1**: the generated component is the translation (several pages → a step-through with local `page` state, already generated); do not redesign it. **Sketch screens — redrawn**: a 1000×800 relative container, each element absolutely positioned at `gridX*20`/`gridY*20` (`gridWidth*20` × `gridHeight*20`) — `rectangle` → `div`, `headline`/`text` → text at its `fontSize`, `button` → `<button>`, `input` → `<input placeholder>`, `image` → a filled box, `line`/`circle` → inline SVG — then wired the same way.
 
 Automation slices usually have no screen part — the Automations tab shows them.
 
@@ -141,7 +145,7 @@ Automation slices usually have no screen part — the Automations tab shows them
 
 The prototype also **asks**: a guided tour through the screens, one `?` tag per question on the element it is about, a Next button leading from question to question — also onto another screen. This is how the people playing it tell us what the screens do (what is stored, what happens next, which rules apply). **What to ask, in which order and in which words: `eventmodeling-workshop-questions`** — read it, don't improvise a catalog.
 
-**Regenerate the questions on every run, from the model as it is now** — also when every slice is `unchanged`, and never copied from the stored page: a question that was answered by the model since, or points at an element that is gone, must not come back. Write them to `<out>/.work/questions.json` (`assemble` embeds them; without the file the page asks nothing), an array in tour order:
+**Regenerate the questions on every run, from the model as it is now** — also when every slice is `unchanged`, and never copied from the stored page: a question that was answered by the model since, or points at an element that is gone, must not come back, and a fresh look often finds questions the last run did not. Write them to `<out>/.work/questions.json` (`assemble` embeds them; without the file the page asks nothing), an array in tour order:
 
 ```json
 [{ "id": "save-note-action", "screen": "Activity Composer", "ref": "text:Save note", "category": "action",
@@ -156,12 +160,17 @@ The prototype also **asks**: a guided tour through the screens, one `?` tag per
 
 ## Step 6 — Write the blocks, assemble, check
 
-Write each new or changed slice to `<out>/.work/slices/<slice id>.html`, exactly in the shape of `assets/slices.example.html`:
+Complete each new or changed slice's skeleton in `<out>/.work/slices/<slice id>.html` (Steps 4–5): replace every `@@TODO`, keep the script tag and its hash as generated, keep the shape of `assets/slices.example.html`:
 
-- one `<script type="text/plain" data-em-slice="<slice id>" data-em-title="<slice title>" data-em-hash="<hash from status.json>">` element whose body ends with one `EMRuntime.defineSlice({ id, title, order, commands, readModels, automations, externalEvents, specs, screens })` call; `order` from `status.json`;
+- one `<script type="text/plain" data-em-slice=… data-em-hash=…>` element whose body ends with one `EMRuntime.defineSlice({ id, title, order, commands, readModels, automations, externalEvents, specs, screens })` call (already in the skeleton);
 - JSX and modern JavaScript; React hooks as `React.useState`; `useCommand`, `useReadModel`, `useNav`, `useNotModeled` are globals;
 - never the text of a closing script tag inside the block, not even in a string or comment.
 
+**Slices are independent of each other — each one touches only its own files.** So the work can be split, but it never has to be:
+
+- **Default, any agent: one slice after another**, in `order`. Nothing else is needed.
+- **Only if your environment can run sub-agents / parallel workers** (a task or sub-agent tool; check what you actually have, don't assume): hand each flagged slice to one worker — at most about six at a time — with this brief: *"Complete `<out>/.work/slices/<id>.html` following Steps 3–5 and 6 of `<skill-dir>/SKILL.md` for this one slice; read `<out>/.work/data/<id>.json`; edit only that file; reply with the gaps you found (buttons not modeled and so on)."* Meanwhile you write the questions (Step 5b) — they need only `status.json` and the data files — and, when every worker is done, continue with `assemble`. A worker that fails or returns a block with `@@TODO` left is redone serially. With no such tool, ignore this paragraph.
+
 Then:
 
 ```bash

package/stacks/modeling-kit/templates/.claude/skills/prototype/assets/index.template.html

@@ -34,23 +34,45 @@
     .em-badge button:hover { color: #bfdbfe; }
     .em-outline-toggle { display: inline-flex; gap: 5px; align-items: center; font: 12px system-ui; color: #9ca3af; cursor: pointer; }
     .em-part-label { font: 600 11px system-ui; color: #6b7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
-    .em-panel { background: #111827; color: #e5e7eb; padding: 12px; overflow-y: auto; max-height: 100vh; position: sticky; top: 0; font: 14px/1.4 system-ui, sans-serif; }
-    .em-panel h2, .em-auto h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin: 16px 0 6px; }
+    .em-panel { --p-bg: #0e1522; --p-surface: #161f30; --p-raised: #1d283c; --p-line: #232f45; --p-text: #e7eaf0; --p-muted: #8a95a9; --p-accent: #f97316;
+      background: var(--p-bg); color: var(--p-text); padding: 0 16px 24px; overflow-y: auto; max-height: 100vh; position: sticky; top: 0; font: 13px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
+    .em-panel::-webkit-scrollbar { width: 8px; } .em-panel::-webkit-scrollbar-thumb { background: var(--p-line); border-radius: 4px; }
+    .em-panel h2, .em-auto h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #8a95a9; margin: 0; }
+    .em-sect { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 12px; min-height: 28px; }
+    .em-sect .em-sub { color: var(--p-muted); font-size: 12px; margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 400; }
+    .em-empty { color: var(--p-muted); background: var(--p-surface); border: 1px dashed var(--p-line); border-radius: 10px; padding: 18px; text-align: center; }
     /* The panel's tabs are real tabs: a strip with a rule under it, the open tab joined to the content below (same colour, no rule under it) with an orange top edge. */
     .em-panel.em-collapsed { padding: 8px 4px; overflow: hidden; }
-    .em-toggle { background: #1f2937; color: #e5e7eb; border: 0; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font: 14px system-ui; flex: none; }
-    .em-toggle:hover { background: #374151; }
+    .em-toggle { background: #161f30; color: #8a95a9; border: 1px solid #232f45; border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font: 14px system-ui; flex: none; }
+    .em-toggle:hover { background: #1d283c; color: #e7eaf0; }
     .em-tabs .em-toggle { width: 28px; height: 28px; padding: 0; margin-bottom: 0; border-radius: 6px; color: #e5e7eb; }
     .em-collapsed .em-toggle { display: block; margin: 0 auto 8px; }
     .em-collapsed .em-vlabel { writing-mode: vertical-rl; color: #9ca3af; font: 12px system-ui; letter-spacing: .06em; text-transform: uppercase; text-align: center; cursor: pointer; width: 100%; }
-    .em-tabs { display: flex; gap: 2px; border-bottom: 1px solid #374151; margin: 0 -12px 4px; padding: 0 12px; }
-    .em-tabs button { background: #1f2937; color: #9ca3af; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; padding: 7px 12px; margin-bottom: -1px; cursor: pointer; font: 13px system-ui; }
-    .em-tabs button:hover { color: #e5e7eb; }
-    .em-tabs button.em-active { background: #111827; color: #fff; font-weight: 600; border-color: #374151; border-top: 2px solid #f97316; padding-top: 6px; }
-    .em-btn { background: #374151; color: #e5e7eb; border: 0; border-radius: 6px; padding: 5px 9px; cursor: pointer; font: 12px system-ui; }
-    .em-btn.em-on { background: #f97316; color: #111827; }
-    .em-ev { background: #1f2937; border-left: 4px solid #f97316; border-radius: 6px; padding: 6px 8px; margin: 6px 0; font-size: 12px; color: #e5e7eb; }
-    .em-ev b { color: #fdba74; }
+    .em-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--p-line); margin: 0 -16px; padding: 10px 16px 0; position: sticky; top: 0; background: var(--p-bg); z-index: 5; }
+    .em-tabs button:not(.em-toggle) { background: none; color: var(--p-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px 10px; margin-bottom: -1px; cursor: pointer; font: 500 13px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; text-transform: capitalize; transition: color .15s, border-color .15s; }
+    .em-tabs button:not(.em-toggle):hover { color: var(--p-text); }
+    .em-tabs button.em-active { color: #fff; border-bottom-color: var(--p-accent); }
+    .em-btn { background: var(--p-raised, #1d283c); color: #e7eaf0; border: 1px solid #2c3a55; border-radius: 7px; padding: 5px 11px; cursor: pointer; font: 500 12px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; transition: background .15s, border-color .15s; }
+    .em-btn:hover { background: #26344e; border-color: #3a4b6b; }
+    .em-btn.em-on { background: #f97316; border-color: #f97316; color: #1a0f05; }
+    .em-btn.em-ghost { background: transparent; border-color: transparent; color: #8a95a9; padding: 5px 8px; } .em-btn.em-ghost:hover { background: #1d283c; color: #e7eaf0; }
+    .em-btn.em-icon { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
+.em-ev { background: var(--p-surface, #161f30); border: 1px solid var(--p-line, #232f45); border-left: 3px solid #f97316; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 12px; color: #e7eaf0; }
+    .em-ev b { color: #fdba74; font-weight: 600; }
+    .em-ev-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; cursor: pointer; }
+    .em-ev-pos { font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #8a95a9; background: #0e1522; border-radius: 5px; padding: 1px 6px; }
+    .em-ev-type { font-weight: 600; font-size: 13px; color: #fdba74; }
+    .em-ev-from { color: #8a95a9; font-size: 12px; }
+    .em-ev-time { margin-left: auto; color: #6b7690; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .em-kv { display: grid; grid-template-columns: minmax(70px, max-content) 1fr; gap: 3px 14px; margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--p-line, #232f45); }
+    .em-kv dt { color: #8a95a9; margin: 0; } .em-kv dd { margin: 0; word-break: break-word; color: #e7eaf0; } .em-kv dd.em-none { color: #4f5b73; }
+    .em-kv dd a { color: #e7eaf0; text-decoration: none; border-bottom: 1px dotted #4f5b73; } .em-kv dd a:hover { color: #fdba74; border-color: #fdba74; }
+    .em-ev-foot { margin-top: 10px; }
+    .em-pill { display: inline-flex; align-items: center; gap: 4px; font: 600 11px -apple-system, system-ui, sans-serif; padding: 1px 8px; border-radius: 999px; background: #1d283c; color: #8a95a9; }
+    .em-pill.em-pass { background: rgba(34,197,94,.14); color: #4ade80; } .em-pill.em-fail { background: rgba(239,68,68,.15); color: #f87171; }
+    .em-spec-title { font-weight: 600; font-size: 13px; color: #e7eaf0; line-height: 1.35; }
+    .em-spec-meta { color: #8a95a9; font-size: 12px; margin-top: 2px; }
+    .em-chev { display: inline-block; width: 14px; color: #6b7690; font-size: 10px; }
     .em-ev pre { margin: 4px 0 0; padding: 0; background: transparent; white-space: pre-wrap; word-break: break-word; color: #d1d5db; font-size: 11px; } /* background set explicitly: a screen framework (Bulma) styles bare <pre> light, which left this text unreadable */
     .em-slider { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: #9ca3af; } .em-slider .em-slider-text { min-width: 120px; text-align: right; }
     /* `.em-panel input` (below) makes every panel input a full-width text box: the slider and the checkbox undo that, with a selector that beats it. */
@@ -59,8 +81,11 @@
     .em-hl { outline: 3px solid #f97316 !important; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.25) !important; }
     .em-ev.em-cmd { border-left-color: #3b82f6; } .em-ev.em-cmd b { color: #93c5fd; }
     .em-ev.em-fail { border-left-color: #ef4444; } .em-ev.em-pass { border-left-color: #22c55e; }
+    .em-ev.em-pass:hover, .em-ev.em-fail:hover { border-color: #2c3a55; }
     .em-ev.em-out { border-left-color: #14b8a6; }
-    .em-panel input, .em-panel textarea { width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 4px 6px; border-radius: 4px; border: 1px solid #4b5563; background: #111827; color: #fff; }
+    .em-panel input, .em-panel textarea { width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 6px 9px; border-radius: 7px; border: 1px solid #2c3a55; background: #0e1522; color: #fff; font: inherit; }
+    .em-panel input:focus, .em-panel textarea:focus { outline: none; border-color: #f97316; }
+    .em-panel select { box-sizing: border-box; margin: 0; padding: 6px 9px; border-radius: 7px; border: 1px solid #2c3a55; background: #0e1522; color: #fff; font: inherit; } .em-panel .em-input { margin: 0; width: auto; }
     .em-auto { max-width: 760px; }
     .em-auto .em-ev { font-size: 13px; }
     .em-auto h2 { color: #6b7280; }
@@ -309,7 +334,8 @@ function EventBrowser({ events }) {
           <button className="em-btn" onClick={() => setFollow(null)}>×</button>
         </div>
       )}
-      <h2>{shown.length === events.length ? `${events.length} events` : `${shown.length} of ${events.length} events`}{withIx ? ` · ${recorded.length} interactions` : ''}</h2>
+      <div className="em-sect" style={{ margin: '4px 0 0' }}><span className="em-pill">{shown.length === events.length ? `${events.length} event${events.length === 1 ? '' : 's'}` : `${shown.length} of ${events.length} events`}{withIx ? ` · ${recorded.length} interactions` : ''}</span></div>
+      {rows.length === 0 && <div className="em-empty">No events yet. Use the prototype and they appear here.</div>}
       {[...rows].reverse().map((row) => {
         if (row.kind === 'interaction') {
           return (
@@ -326,35 +352,41 @@ function EventBrowser({ events }) {
         const future = cursor != null && e.position > cursor;
         return (
           <div key={e.id} className="em-ev" style={future ? { opacity: 0.4 } : null}>
-            <div style={{ cursor: 'pointer' }} onClick={() => setOpen(isOpen ? null : e.id)}>
-              <b>#{e.position} {e.type}</b>
-              {e.metadata.command && <span> ← {e.metadata.command}</span>}
-              {e.metadata.automation && <span> (automation)</span>}
-              {e.metadata.simulated && <span> (simulated)</span>}
-              <span style={{ float: 'right', color: '#9ca3af' }}>{new Date(e.metadata.at).toLocaleTimeString()}</span>
-            </div>
-            <div style={{ marginTop: 4 }}>
-              {Object.entries(e.data || {}).map(([k, v]) => (
-                <div key={k}>
-                  <span style={{ color: '#9ca3af' }}>{k}: </span>
-                  {v != null && typeof v === 'object' ? (
-                    <code>{JSON.stringify(v)}</code>
-                  ) : (
-                    <a href="#" title="Show every event carrying this value" style={{ color: '#e5e7eb' }}
-                       onClick={(ev) => { ev.preventDefault(); setFollow({ field: k, value: v }); }}>
-                      {String(v)}
-                    </a>
-                  )}
-                </div>
-              ))}
+            <div className="em-ev-head" onClick={() => setOpen(isOpen ? null : e.id)}>
+              <span className="em-ev-pos">#{e.position}</span>
+              <span className="em-ev-type">{e.type}</span>
+              {e.metadata.command && <span className="em-ev-from">← {e.metadata.command}</span>}
+              {e.metadata.automation && <span className="em-pill">automation</span>}
+              {e.metadata.simulated && <span className="em-pill">simulated</span>}
+              <span className="em-ev-time">{new Date(e.metadata.at).toLocaleTimeString()}</span>
             </div>
+            {Object.keys(e.data || {}).length > 0 && (
+              <dl className="em-kv">
+                {Object.entries(e.data || {}).flatMap(([k, v]) => {
+                  const none = v === '' || v == null || v === undefined || v === 'undefined';
+                  return [
+                    <dt key={k + 't'}>{k}</dt>,
+                    <dd key={k + 'd'} className={none ? 'em-none' : ''}>
+                      {none ? '—' : v != null && typeof v === 'object' ? (
+                        <code>{JSON.stringify(v)}</code>
+                      ) : (
+                        <a href="#" title="Show every event carrying this value"
+                           onClick={(ev) => { ev.preventDefault(); setFollow({ field: k, value: v }); }}>
+                          {String(v)}
+                        </a>
+                      )}
+                    </dd>,
+                  ];
+                })}
+              </dl>
+            )}
             {isOpen && (
               <pre>{JSON.stringify(
                 Object.assign({ id: e.id, at: e.metadata.at }, e.metadata.command && { command: e.metadata.command },
                   e.metadata.actor && { actor: e.metadata.actor }, e.metadata.automation && { automation: e.metadata.automation },
                   e.metadata.simulated && { simulated: true }), null, 1)}</pre>
             )}
-            <button className="em-btn" style={{ marginTop: 4 }} onClick={() => rt.viewAsOf(e.position)}>View as of here</button>
+            <div className="em-ev-foot"><button className="em-btn" onClick={() => rt.viewAsOf(e.position)}>View as of here</button></div>
           </div>
         );
       })}
@@ -424,6 +456,48 @@ function SpecView({ spec }) {
   );
 }
 
+// Named snapshots of the event log. The page has no storage of its own, so the player keeps them: this asks it for the list, and a save / load /
+// delete is a message to it (see the contract at emMount). Outside the player nobody answers: `list` stays null and nothing is shown.
+function Snapshots() {
+  const [list, setList] = useState(null);
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [picked, setPicked] = useState('');
+  React.useEffect(() => {
+    const onMsg = (e) => {
+      const d = e.data;
+      if (e.source !== window.parent || !d || d.source !== 'proto-host' || d.type !== 'snapshots') return;
+      setList(Array.isArray(d.list) ? d.list : []);
+      setError(d.error || '');
+      setPicked((p) => (Array.isArray(d.list) && d.list.some((s) => s.id === p) ? p : ''));
+    };
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ source: 'proto-kit', type: 'snapshots-request' }, '*');
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+  if (list === null) return null;
+  const send = (msg) => window.parent.postMessage({ source: 'proto-kit', ...msg }, '*');
+  const save = () => { if (!name.trim()) return; send({ type: 'snapshot-save', name: name.trim(), events: rt.events }); setName(''); };
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, margin: '0 0 10px' }}>
+      <div style={{ display: 'flex', gap: 6 }}>
+        <select className="em-input" style={{ flex: 1, minWidth: 0 }} value={picked} onChange={(e) => setPicked(e.target.value)} aria-label="Snapshots">
+          <option value="">{list.length ? 'Snapshots…' : 'No snapshots yet'}</option>
+          {list.map((s) => <option key={s.id} value={s.id}>{s.name} · {s.count} event{s.count === 1 ? '' : 's'} · {new Date(s.at).toLocaleString()}</option>)}
+        </select>
+        <button className="em-btn" disabled={!picked} onClick={() => send({ type: 'snapshot-load', id: picked })} title="Replace the event log with this snapshot">Load</button>
+        <button className="em-btn" disabled={!picked} onClick={() => send({ type: 'snapshot-delete', id: picked })} title="Delete the selected snapshot" aria-label="Delete snapshot">Delete</button>
+      </div>
+      <div style={{ display: 'flex', gap: 6 }}>
+        <input className="em-input" style={{ flex: 1, minWidth: 0 }} placeholder="Snapshot name" maxLength={60} value={name}
+          onChange={(e) => { setName(e.target.value); setError(''); }} onKeyDown={(e) => { if (e.key === 'Enter') save(); }} />
+        <button className="em-btn" disabled={!name.trim()} onClick={save} title="Save the current event log under this name">Save</button>
+      </div>
+      {error && <div style={{ color: '#f87171', fontSize: 12 }}>{error}</div>}
+    </div>
+  );
+}
+
 function Panel({ slices, open: panelOpen, onToggle }) {
   const events = useLog();
   const [tab, setTab] = useState('events');
@@ -467,8 +541,8 @@ function Panel({ slices, open: panelOpen, onToggle }) {
 
       {tab === 'events' && (
         <>
-          <h2>Event log</h2>
-          <button className="em-btn" onClick={() => rt.reset()}>Reset</button>
+          <div className="em-sect"><h2>Event log</h2><button className="em-btn" onClick={() => rt.reset()}>Reset</button></div>
+          <Snapshots />
           <EventBrowser events={events} />
         </>
       )}
@@ -483,27 +557,31 @@ function Panel({ slices, open: panelOpen, onToggle }) {
 
       {tab === 'specs' && (
         <>
-          <h2>Scenarios from the board</h2>
-          {slices && (
-            <p style={{ color: '#9ca3af' }}>
-              {allSpecs ? 'All screens' : 'This screen'}: {shownSpecs.length} of {specResults.length}{' '}
-              <button className="em-btn" onClick={() => setAllSpecs(!allSpecs)}>{allSpecs ? 'This screen only' : 'Show all'}</button>
-            </p>
-          )}
+          <div className="em-sect">
+            <div>
+              <h2>Scenarios</h2>
+              {slices && <div className="em-sub">{allSpecs ? 'All screens' : 'This screen'} · {shownSpecs.length} of {specResults.length}</div>}
+            </div>
+            {slices && <button className="em-btn" onClick={() => setAllSpecs(!allSpecs)}>{allSpecs ? 'This screen only' : 'Show all'}</button>}
+          </div>
+          {shownSpecs.length === 0 && <div className="em-empty">No scenarios for this screen.</div>}
           {shownSpecs.map(([r, i]) => (
-            <div key={i} className={'em-ev ' + (r.pass ? 'em-pass' : 'em-fail')} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <div key={i} className={'em-ev ' + (r.pass ? 'em-pass' : 'em-fail')} style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ cursor: 'pointer' }} onClick={() => setOpen({ ...open, [i]: !open[i] })} title="Show or hide the scenario as text">
-                  <span style={{ display: 'inline-block', width: 12 }}>{open[i] ? '▾' : '▸'}</span>
-                  <b>{r.pass ? '✓' : '✗'} {r.spec.title}</b> <span>{r.spec.slice}</span>
+                <div style={{ cursor: 'pointer', display: 'flex', gap: 6 }} onClick={() => setOpen({ ...open, [i]: !open[i] })} title="Show or hide the scenario as text">
+                  <span className="em-chev" style={{ marginTop: 3 }}>{open[i] ? '▼' : '▶'}</span>
+                  <div style={{ minWidth: 0 }}>
+                    <div className="em-spec-title">{r.spec.title}</div>
+                    <div className="em-spec-meta"><span className={'em-pill ' + (r.pass ? 'em-pass' : 'em-fail')}>{r.pass ? '✓ Passing' : '✗ Failing'}</span> <span style={{ marginLeft: 4 }}>{r.spec.slice}</span></div>
+                  </div>
                 </div>
                 {open[i] && <SpecView spec={r.spec} />}
                 {!r.pass && <pre>{r.detail}</pre>}
               </div>
-              <button className={'em-btn' + (armed === i ? ' em-on' : '')} style={{ flex: 'none' }} onClick={() => playGiven(r.spec, i)}
+              <button className={'em-btn em-icon' + (armed === i ? ' em-on' : '')} style={{ flex: 'none' }} onClick={() => playGiven(r.spec, i)}
                       title="Play the given events: the screens show this scenario's starting state">▶</button>
               {r.spec.sliceId && (
-                <button className="em-btn" style={{ flex: 'none' }} onClick={() => EMRuntime.zoomToSlice(r.spec.sliceId)}
+                <button className="em-btn em-icon" style={{ flex: 'none' }} onClick={() => EMRuntime.zoomToSlice(r.spec.sliceId)}
                         title="Show this scenario's slice on the board"><span aria-hidden>◎</span></button>
               )}
             </div>
@@ -614,6 +692,8 @@ function App() {
  * The message contract with the board's player (feedback + replay). Only the embedding page may talk to it; everything else is ignored.
  *   player → page  { source: 'proto-host', type: 'events-request', id }   → { source: 'proto-kit', type: 'events', id, events, cursor }
  *                  { source: 'proto-host', type: 'load', events }          replace the log (a replay starts from a recorded one)
+ *   snapshots      page → player { source: 'proto-kit', type: 'snapshots-request' | 'snapshot-save' {name, events} | 'snapshot-load' {id} | 'snapshot-delete' {id} }
+ *                  player → page { source: 'proto-host', type: 'snapshots', list: [{id, name, at, count}], error? } — the Event log panel's list; a load arrives as `load`
  *                  { source: 'proto-host', type: 'view', position }        show the state as of event #position (null = now)
  *                  { source: 'proto-host', type: 'screen', title }         switch to that screen's tab
  *   page → player  { source: 'proto-kit', type: 'ready' }                  once mounted

package/stacks/modeling-kit/templates/.claude/skills/prototype/assets/prototype.mjs

@@ -11,6 +11,9 @@
  *          <out>/index.html — so a fresh session or folder still rebuilds only what changed), copies the kept blocks to
  *          <out>/.work/slices/<id>.html and writes <out>/.work/status.json. Prints which slices are new,
  *          changed, unchanged or removed. Only new and changed slices need a new block.
+ *          For every new/changed slice it also writes a block skeleton to <out>/.work/slices/<id>.html (generated specs from the
+ *          scenarios and storylines, HTML screens converted to JSX, a defineSlice stub with @@TODO where judgment is needed),
+ *          and the slice's data to <out>/.work/data/<id>.json.
  * assemble writes <out>/index.html from the template, runtime.js and every block in .work/slices that
  *          belongs to a current slice, in timeline order.
  * upload   sends <out>/index.html to the platform (POST .../prototype/<context id>), which sanitizes, gzips
@@ -22,6 +25,7 @@ import { createHash } from 'node:crypto';
 import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { skeleton } from './scaffold.mjs';
 
 const ASSETS = dirname(fileURLToPath(import.meta.url));
 const [command, ...rest] = process.argv.slice(2);
@@ -139,13 +143,25 @@ async function status() {
   rmSync(BLOCKS, { recursive: true, force: true });
   mkdirSync(BLOCKS, { recursive: true });
 
+  mkdirSync(join(WORK, 'data'), { recursive: true });
+  mkdirSync(join(WORK, 'previous'), { recursive: true });
   const frameworkVotes = {};
+  const generated = {};
   const slices = (fields.slices || []).map((slice, order) => {
     const own = (slice.screens || []).map((x) => screens[x.linkedId || x.id] || null);
     for (const s of own) if (s && s.pages) frameworkVotes[(s.cssFrameworks || [])[0] || 'bulma'] = (frameworkVotes[(s.cssFrameworks || [])[0] || 'bulma'] || 0) + 1;
     const h = hash({ slice, specs: specsById[slice.id] || null, screens: own });
     const before = byId[slice.id];
     if (before && before.hash === h) writeFileSync(join(BLOCKS, `${slice.id}.html`), before.block + '\n');
+    const state = !before ? 'new' : before.hash === h ? 'unchanged' : 'changed';
+    if (state !== 'unchanged') {
+      const ownScreens = (slice.screens || []).map((x) => ({ title: x.title, lane: x.lane, ...(screens[x.linkedId || x.id] || {}) }));
+      writeFileSync(join(WORK, 'data', `${slice.id}.json`), JSON.stringify({ slice, specs: specsById[slice.id] || null, screens: ownScreens }, null, 2));
+      if (before) writeFileSync(join(WORK, 'previous', `${slice.id}.html`), before.block + '\n');
+      const sk = skeleton({ slice, hash: h, order: order + 1, specSlice: specsById[slice.id] || null, screens: ownScreens });
+      writeFileSync(join(BLOCKS, `${slice.id}.html`), sk.block);
+      generated[slice.id] = { specs: sk.specCount, needs: sk.needs };
+    }
     return {
       id: slice.id,
       title: slice.title,
@@ -153,7 +169,7 @@ async function status() {
       chapter: slice.chapter,
       order: order + 1,
       hash: h,
-      state: !before ? 'new' : before.hash === h ? 'unchanged' : 'changed',
+      state,
     };
   });
   const current = new Set(slices.map((s) => s.id));
@@ -169,13 +185,16 @@ async function status() {
   }
   if (!contextName && !contextIsId) contextName = args.context;
 
+  rmSync(join(WORK, 'questions.json'), { force: true }); // the questions are written afresh on every run (SKILL.md Step 5b), never carried over
+
   const report = { context: contextName, contextId, baseline, cssFramework, mixedFrameworks: Object.keys(frameworkVotes).length > 1, slices, removed };
   writeFileSync(join(WORK, 'status.json'), JSON.stringify(report, null, 2));
   for (const s of slices) console.log(`${s.state.padEnd(9)} ${s.hash}  ${s.id}  ${s.title}`);
   for (const r of removed) console.log(`removed   ${''.padEnd(16)}  ${r.id}  ${r.title}`);
   const todo = slices.filter((s) => s.state !== 'unchanged').length;
   console.log(`\n${todo} of ${slices.length} slices to build, ${removed.length} removed (${{ platform: 'compared with the stored prototype', local: 'compared with the local page', none: 'no prototype yet' }[baseline]}) — see ${join(WORK, 'status.json')}`);
-  console.log(`Even with 0 slices to build, this run still writes ${join(WORK, 'questions.json')} (SKILL.md Step 5b) and uploads — "nothing changed" does not skip the questions.`);
+  for (const s of slices.filter((x) => x.state !== 'unchanged')) console.log(`skeleton  ${s.title}: ${generated[s.id].specs} spec(s) generated${generated[s.id].needs.length ? `, ${generated[s.id].needs.length} need(s) by hand` : ''} → ${join(BLOCKS, `${s.id}.html`)}`);
+  console.log(`Questions: this run writes ${join(WORK, 'questions.json')} afresh (SKILL.md Step 5b) and uploads — "nothing changed" does not skip the questions.`);
 }
 
 const CSS = {
@@ -198,6 +217,7 @@ function assemble() {
     const [found] = blocksIn(block);
     if (!found || found.id !== s.id) problems.push(`${file}: not a slice block for ${s.id}`);
     else if (found.hash !== s.hash) problems.push(`${file}: data-em-hash is ${found.hash}, the slice's hash is ${s.hash}`);
+    if (block.includes('@@TODO')) problems.push(`${file}: still has @@TODO — fill every one`);
     if ((block.match(/<\/script/gi) || []).length !== 1) problems.push(`${file}: a closing script tag appears inside the block`);
     return block;
   });

package/stacks/modeling-kit/templates/.claude/skills/prototype/assets/scaffold.mjs

@@ -0,0 +1,192 @@
+/*
+ * Deterministic parts of a slice block — generated by `prototype.mjs status`, so the agent only writes what needs judgment
+ * (decide / evolve / process and wiring the screen to hooks). Shared by the platform skill and the local prototype.
+ *
+ *   specsOf(slice, specs)   the slice's `specs` array (every scenario and storyline, Step 4's table) as data
+ *   htmlToJsx(html)         one HTML page → JSX (class→className, style strings→objects, void elements closed, handlers dropped)
+ *   skeleton(...)           the block file: script tag with hash, GENERATED_SPECS, one component per HTML page, a defineSlice stub
+ *
+ * Anything the generator cannot decide is left as `@@TODO` — `assemble` refuses a block that still contains one.
+ */
+
+const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
+const ATTR = {
+  class: 'className', for: 'htmlFor', tabindex: 'tabIndex', colspan: 'colSpan', rowspan: 'rowSpan', readonly: 'readOnly',
+  maxlength: 'maxLength', minlength: 'minLength', autocomplete: 'autoComplete', autofocus: 'autoFocus', contenteditable: 'contentEditable',
+  crossorigin: 'crossOrigin', enctype: 'encType', formaction: 'formAction', frameborder: 'frameBorder', srcset: 'srcSet',
+  cellpadding: 'cellPadding', cellspacing: 'cellSpacing', datetime: 'dateTime', novalidate: 'noValidate', spellcheck: 'spellCheck',
+  'accept-charset': 'acceptCharset', 'stroke-width': 'strokeWidth', 'stroke-linecap': 'strokeLinecap', 'stroke-linejoin': 'strokeLinejoin',
+  'fill-rule': 'fillRule', 'clip-rule': 'clipRule', 'clip-path': 'clipPath', viewbox: 'viewBox', 'stop-color': 'stopColor',
+};
+const BOOLEAN = new Set(['checked', 'disabled', 'selected', 'readonly', 'required', 'multiple', 'hidden', 'autofocus', 'open', 'novalidate']);
+
+const camel = (s) => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+const slug = (s) => String(s || '').replace(/[^A-Za-z0-9]+(.)?/g, (_, c) => (c || '').toUpperCase()).replace(/^[^A-Za-z]+/, '') || 'Screen';
+export const pascal = (s) => { const x = slug(s); return x.charAt(0).toUpperCase() + x.slice(1); };
+
+function styleObject(css) {
+  const parts = css.split(';').map((d) => d.trim()).filter(Boolean).map((d) => {
+    const i = d.indexOf(':');
+    if (i < 0) return null;
+    const k = d.slice(0, i).trim();
+    const v = d.slice(i + 1).trim();
+    const key = k.startsWith('--') ? JSON.stringify(k) : camel(k.replace(/^-ms-/, 'ms-'));
+    return `${key}: ${JSON.stringify(v)}`;
+  }).filter(Boolean);
+  return `{{ ${parts.join(', ')} }}`;
+}
+
+function attrsToJsx(raw) {
+  const out = [];
+  const re = /([^\s=/"'<>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g;
+  for (let m; (m = re.exec(raw)); ) {
+    const name = m[1];
+    const val = m[2] ?? m[3] ?? m[4];
+    const lower = name.toLowerCase();
+    if (lower.startsWith('on')) continue; // inline handlers: the page sanitizer strips them, the block wires its own
+    if (lower === 'style') { if (val) out.push(`style=${styleObject(val)}`); continue; }
+    const key = ATTR[lower] || (lower.startsWith('data-') || lower.startsWith('aria-') ? lower : /^[a-z]+$/.test(lower) ? lower : camel(name));
+    if (val === undefined) out.push(BOOLEAN.has(lower) ? `${key}` : `${key}={true}`);
+    else if (lower === 'value' || lower === 'checked') out.push(`${lower === 'value' ? 'defaultValue' : 'defaultChecked'}=${JSON.stringify(val)}`);
+    else out.push(`${key}=${JSON.stringify(val.replace(/&quot;/g, '"').replace(/&amp;/g, '&'))}`);
+  }
+  return out.length ? ' ' + out.join(' ') : '';
+}
+
+/** One HTML page (document or fragment) → a JSX expression body (single root). */
+export function htmlToJsx(html) {
+  let src = String(html || '');
+  const body = src.match(/<body\b[^>]*>([\s\S]*?)<\/body>/i);
+  if (body) src = body[1];
+  src = src.replace(/<!--[\s\S]*?-->/g, '').replace(/<script\b[\s\S]*?<\/script>/gi, '').replace(/<style\b[\s\S]*?<\/style>/gi, '');
+  const out = [];
+  const re = /<(\/?)([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)(\/?)>|([^<]+)|(<)/g;
+  const stack = [];
+  for (let m; (m = re.exec(src)); ) {
+    if (m[5] !== undefined) {
+      out.push(m[5].replace(/[{}]/g, (c) => `{'${c}'}`).replace(/&nbsp;/g, ' '));
+    } else if (m[6]) {
+      out.push('&lt;');
+    } else if (m[1]) {
+      const tag = m[2].toLowerCase();
+      if (VOID.has(tag)) continue;
+      const at = stack.lastIndexOf(tag);
+      if (at < 0) continue;
+      while (stack.length > at) out.push(`</${stack.pop()}>`);
+    } else {
+      const tag = m[2].toLowerCase() === m[2] ? m[2] : m[2];
+      const lower = tag.toLowerCase();
+      const attrs = attrsToJsx(m[3] || '');
+      if (VOID.has(lower) || m[4]) out.push(`<${tag}${attrs} />`);
+      else { out.push(`<${tag}${attrs}>`); stack.push(lower === tag ? tag : tag); }
+    }
+  }
+  while (stack.length) out.push(`</${stack.pop()}>`);
+  return out.join('').trim();
+}
+
+// ── specs ───────────────────────────────────────────────────────────────────
+
+const kindOf = (step) => String(step.type || '').replace(/^SPEC_/, '').toUpperCase();
+
+/** Typed value of a step field example: numbers/booleans stay, JSON-looking strings of lists/objects are parsed. */
+function typed(v) {
+  if (typeof v !== 'string') return v;
+  const t = v.trim();
+  if (t === 'true' || t === 'false') return t === 'true';
+  if (t !== '' && /^-?\d+(\.\d+)?$/.test(t)) return Number(t);
+  if (/^[[{]/.test(t)) { try { return JSON.parse(t); } catch { /* keep the text */ } }
+  return v;
+}
+
+const dataOf = (step) => Object.fromEntries((step.fields || []).filter((f) => f.name && f.example !== undefined && f.example !== '').map((f) => [f.name, typed(f.example)]));
+const nameOf = (step) => String(step.title || '').replace(/\s+/g, '');
+const eventOf = (step) => ({ type: nameOf(step), data: dataOf(step) });
+
+/** The slice's specs: every GWT scenario and storyline as a spec entry (SKILL.md Step 4 table). `needs` lists what only a person/agent can add. */
+export function specsOf(slice, specSlice) {
+  const specs = [];
+  const needs = [];
+  const automation = (slice.processors || [])[0];
+  for (const s of (specSlice && specSlice.specifications) || []) {
+    const then = s.then || [];
+    const given = (s.given || []).filter((x) => kindOf(x) === 'EVENT').map(eventOf);
+    const err = then.find((x) => kindOf(x) === 'ERROR');
+    const when = (s.when || []).find((x) => kindOf(x) === 'COMMAND');
+    const rm = then.find((x) => kindOf(x) === 'READMODEL') || (s.when || []).find((x) => kindOf(x) === 'READMODEL');
+    const cmds = then.filter((x) => kindOf(x) === 'COMMAND');
+    if (when && err) specs.push({ title: s.title, kind: 'command', given, when: { type: nameOf(when), data: dataOf(when) }, error: err.description || err.title });
+    else if (when) specs.push({ title: s.title, kind: 'command', given, when: { type: nameOf(when), data: dataOf(when) }, then: then.filter((x) => kindOf(x) === 'EVENT').map(eventOf) });
+    else if (rm) specs.push({ title: s.title, kind: 'readmodel', readModel: nameOf(rm), given, expect: s.expectEmptyList ? [] : Array.isArray(s.examples) ? s.examples.map((r) => (r && typeof r === 'object' ? Object.fromEntries(Object.entries(r).map(([k, v]) => [k, typed(v)])) : r)) : [] });
+    else if (cmds.length && automation) specs.push({ title: s.title, kind: 'automation', automation: String(automation.title).replace(/\s+/g, ''), given, expectCommands: cmds.map((c) => ({ type: nameOf(c), data: dataOf(c) })) });
+    else needs.push(`scenario "${s.title}" has no shape the generator knows — write its spec by hand`);
+  }
+  for (const sl of (specSlice && specSlice.storylines) || []) {
+    const given = [];
+    for (const beat of sl.elements || []) {
+      const k = kindOf(beat);
+      if (k === 'EVENT') given.push(eventOf(beat));
+      else if (k === 'COMMAND') specs.push({ title: `${sl.title}: ${beat.title}`, kind: 'command', given: [...given], when: { type: nameOf(beat), data: dataOf(beat) }, then: [] });
+      else if (k === 'READMODEL' && Array.isArray(beat.examples) && beat.examples.length) specs.push({ title: `${sl.title}: ${beat.title}`, kind: 'readmodel', readModel: nameOf(beat), given: [...given], expect: beat.examples });
+    }
+    if (!(sl.elements || []).length) needs.push(`storyline "${sl.title}" is empty`);
+  }
+  return { specs, needs };
+}
+
+// ── the block skeleton ──────────────────────────────────────────────────────
+
+const lit = (v) => JSON.stringify(v, null, 2).replace(/\n/g, '\n');
+
+/**
+ * The block file of one flagged slice. `screens` = the slice's screen nodes ({ title, node }) from status; `keep` = the previous block's text
+ * for a changed slice is NOT used here — a changed slice's old block is kept by status and patched by the agent, skeletons are for new slices.
+ */
+export function skeleton({ slice, hash, order, specSlice, screens }) {
+  const { specs, needs } = specsOf(slice, specSlice);
+  const parts = [];
+  const todos = [];
+  const screenEntries = [];
+  (screens || []).forEach((s, i) => {
+    const comp = `Screen${pascal(s.title)}${i + 1}`;
+    if (s.pages && s.pages.length) {
+      const pageNames = s.pages.map((p, n) => {
+        const name = s.pages.length > 1 ? `${comp}Page${n + 1}` : comp;
+        const html = typeof p === 'string' ? p : p.html || p.content || '';
+        parts.push(`function ${name}() {\n  return (\n    <>\n${htmlToJsx(html)}\n    </>\n  );\n}`);
+        return name;
+      });
+      if (pageNames.length > 1) {
+        parts.push(`function ${comp}() {\n  const pages = [${pageNames.join(', ')}];\n  const [page, setPage] = React.useState(0);\n  const Page = pages[page];\n  return <Page next={() => setPage(Math.min(page + 1, pages.length - 1))} />;\n}`);
+      }
+      todos.push(`${comp}: markup is the whole page translated 1:1 — cut it to this slice's region (marks decide when the screen is shared), replace sample data with useReadModel / useCommand, wire the buttons`);
+      screenEntries.push(`    ${JSON.stringify(s.title)}: { actor: ${JSON.stringify(s.lane || 'User')}, part: ${comp} },`);
+    } else {
+      todos.push(`screen "${s.title}" is a sketch or has no pages — write its part by hand (sketch elements are in .work/data/${slice.id}.json)`);
+    }
+  });
+  const cmdStubs = (slice.commands || []).filter((c) => !c.elementCopy).map((c) => `    ${String(c.title).replace(/\s+/g, '')}: { decide(history, cmd, ctx) { /* @@TODO */ } },`);
+  const rmStubs = (slice.readmodels || []).filter((c) => !c.elementCopy).map((c) => `    ${String(c.title).replace(/\s+/g, '')}: { initial: () => null, evolve(state, e) { /* @@TODO */ return state; } },`);
+  const autoStubs = (slice.processors || []).map((a) => `    ${String(a.title).replace(/\s+/g, '')}: { readModel: '@@TODO', trigger: 'auto', todo: (items) => items, process: (item) => ({ command: { type: '@@TODO', data: {} } }) },`);
+  const head = `<script type="text/plain" data-em-slice="${slice.id}" data-em-title="${String(slice.title).replace(/"/g, '&quot;')}" data-em-hash="${hash}">`;
+  const body = [
+    `// GENERATED by prototype.mjs status — specs and screen markup. Edit in place and fill every open marker (assemble refuses a block that still has one).`,
+    ...(needs.length ? needs.map((n) => `// NEEDS: ${n}`) : []),
+    ...todos.map((t) => `// TODO: ${t}`),
+    `const GENERATED_SPECS = ${lit(specs)};`,
+    ...parts,
+    [
+      `EMRuntime.defineSlice({`,
+      `  id: ${JSON.stringify(slice.id)},`,
+      `  title: ${JSON.stringify(slice.title)},`,
+      `  order: ${order},`,
+      cmdStubs.length ? `  commands: {\n${cmdStubs.join('\n')}\n  },` : '',
+      rmStubs.length ? `  readModels: {\n${rmStubs.join('\n')}\n  },` : '',
+      autoStubs.length ? `  automations: {\n${autoStubs.join('\n')}\n  },` : '',
+      `  specs: GENERATED_SPECS,`,
+      screenEntries.length ? `  screens: {\n${screenEntries.join('\n')}\n  },` : '',
+      `});`,
+    ].filter(Boolean).join('\n'),
+  ].filter(Boolean).join('\n\n');
+  return { block: `${head}\n${body}\n</script>\n`, specCount: specs.length, needs, todos };
+}