{
  "title": "How a request becomes a finished page",
  "subtitle": "The portable-artifacts pipeline, from one request to one offline HTML page",
  "type": "architecture",
  "theme": "ink",
  "direction": "down",
  "animate": false,
  "groups": [
    { "id": "buildtime", "label": "Build-time pieces" }
  ],
  "nodes": [
    { "id": "request", "label": "Person's request", "kind": "user", "emoji": "🙋", "detail": "One sentence in chat: what to draw, for whom." },
    { "id": "agent", "label": "Claude Haiku agent", "kind": "service", "emoji": "🤖", "note": "Writes JSON only", "detail": "Reads SKILL.md, writes diagram.json, then runs validate, build and check in the same turn. Never writes coordinates, CSS, SVG or HTML." },
    { "id": "spec", "label": "JSON spec file", "kind": "other", "emoji": "📄", "note": "diagram.json" },
    { "id": "validate", "label": "validate.mjs", "kind": "service", "group": "buildtime", "emoji": "✅", "note": "Names the exact fix", "detail": "Schema and limits first, then a full layout and a geometry lint, so a spec that validates is buildable. Every error is a JSON path, the problem and the fix." },
    { "id": "build", "label": "build.mjs", "kind": "service", "group": "buildtime", "emoji": "🏗️" },
    { "id": "elk", "label": "ELK layout engine", "kind": "service", "group": "buildtime", "emoji": "🧭", "note": "Runs locally, computes every position" },
    { "id": "dashboard", "label": "make-dashboard renderer", "kind": "service", "group": "buildtime", "emoji": "📊", "note": "Draws chart cards" },
    { "id": "motion", "label": "make-motion renderer", "kind": "service", "group": "buildtime", "emoji": "🎬", "note": "Renders MP4 video" },
    { "id": "themes", "label": "Shared themes", "kind": "storage", "group": "buildtime", "emoji": "🎨", "note": "dusk, press, poster and four more" },
    { "id": "page", "label": "Offline HTML page", "kind": "client", "tone": "good", "emoji": "🌐", "note": "No network requests", "detail": "Inline CSS, fonts and icons behind a strict CSP. The same spec and versions give the same bytes." }
  ],
  "edges": [
    { "from": "request", "to": "agent", "label": "asks for a diagram" },
    { "from": "agent", "to": "spec", "label": "writes one file" },
    { "from": "spec", "to": "validate", "label": "is checked" },
    { "from": "validate", "to": "agent", "label": "returns the exact fix", "style": "dashed" },
    { "from": "validate", "to": "build", "label": "passes the spec on" },
    { "from": "build", "to": "elk", "label": "asks for layout" },
    { "from": "build", "to": "dashboard", "label": "renders chart cards", "style": "dashed" },
    { "from": "build", "to": "motion", "label": "renders video scenes", "style": "dashed" },
    { "from": "themes", "to": "build", "label": "supplies colours" },
    { "from": "build", "to": "page", "label": "writes one HTML file" }
  ],
  "stories": [
    {
      "id": "write",
      "title": "Write and check",
      "beats": [
        { "title": "Someone asks for a diagram", "from": "request", "to": "agent", "caption": "One sentence is enough; the agent plans the spec from it." },
        { "title": "The agent writes one JSON file", "from": "agent", "to": "spec", "caption": "A title, a type, nodes and edges. No coordinates, CSS, SVG or HTML." },
        { "title": "Validate reads the spec", "from": "spec", "to": "validate", "caption": "Schema and limits, then a full layout and a geometry lint." },
        { "title": "Validate names the exact fix", "from": "validate", "to": "agent", "caption": "A JSON path, the problem and the fix; the agent edits one field and runs it again." }
      ]
    },
    {
      "id": "build",
      "title": "Build the page",
      "beats": [
        { "title": "The spec passes to build", "from": "validate", "to": "build" },
        { "title": "ELK lays everything out", "from": "build", "to": "elk", "caption": "Every position comes from the layout engine, on this machine." },
        { "title": "Themes supply the colours", "from": "themes", "to": "build", "caption": "dusk, press, poster or any of four more: one spec, any look." },
        { "title": "Charts and video have their own renderers", "focus": ["dashboard", "motion"], "caption": "An explainer asks for them; a plain diagram never does." },
        { "title": "One offline HTML page", "from": "build", "to": "page", "caption": "Opens in any browser with no network; the CSP blocks requests." }
      ]
    }
  ]
}