The Agent Harness

import os, httpx

OR = "https://openrouter.ai/api/v1"
HEADERS = {
    "Authorization": f"Bearer {os.environ['OPENROUTER_API_KEY']}",
    "HTTP-Referer": "https://poster.studio",   # optional: app attribution
    "X-Title": "Poster Studio",                # shows in OpenRouter rankings
}

r = httpx.post(f"{OR}/chat/completions", headers=HEADERS, timeout=120, json={
    "model": "anthropic/claude-sonnet-4.5",
    "messages": [
        {"role": "system", "content": "You are a poster art director. Be terse."},
        {"role": "user",   "content": "Three concepts for a jazz night at a Nairobi rooftop bar."},
    ],
    "temperature": 0.8,
    "max_tokens": 600,
    "usage": {"include": True},        # ask for real cost back in the response
})
d = r.json()
print(d["choices"][0]["message"]["content"])
print(d["usage"])   # prompt_tokens, completion_tokens, cost in USD

import json, httpx

TOOLS = [{
  "type": "function",
  "function": {
    "name": "check_contrast",
    "description": (
        "Compute the WCAG contrast ratio between two hex colours. "
        "Use before committing a text colour over a background. "
        "Returns the ratio and whether it passes AA for the given size."
    ),
    "parameters": {
      "type": "object",
      "properties": {
        "fg":       {"type": "string", "pattern": "^#[0-9a-fA-F]{6}$"},
        "bg":       {"type": "string", "pattern": "^#[0-9a-fA-F]{6}$"},
        "pt_size":  {"type": "number", "minimum": 4},
      },
      "required": ["fg", "bg", "pt_size"],
      "additionalProperties": False,
    },
  },
}]

def check_contrast(fg, bg, pt_size):
    def lin(c):
        c = c / 255
        return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
    def lum(h):
        r, g, b = (int(h[i:i+2], 16) for i in (1, 3, 5))
        return 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b)
    a, b = sorted([lum(fg), lum(bg)], reverse=True)
    ratio = (a + 0.05) / (b + 0.05)
    threshold = 3.0 if pt_size >= 18 else 4.5
    return {"ratio": round(ratio, 2), "passes_aa": ratio >= threshold,
            "threshold": threshold}

REGISTRY = {"check_contrast": check_contrast}

msgs = [
  {"role": "system", "content": "You are a poster art director."},
  {"role": "user",   "content": "Is #6B5B2A text OK on #2A2418 at 14pt?"},
]

while True:
    r = httpx.post(f"{OR}/chat/completions", headers=HEADERS, timeout=120, json={
        "model": "anthropic/claude-sonnet-4.5",
        "messages": msgs, "tools": TOOLS, "tool_choice": "auto",
    }).json()

    m = r["choices"][0]["message"]
    msgs.append(m)                      # append the model's own turn, verbatim

    calls = m.get("tool_calls") or []
    if not calls:
        print(m["content"]); break      # ← the loop's only natural exit

    for c in calls:                     # models may request several at once
        try:
            args = json.loads(c["function"]["arguments"])   # can be malformed
            out  = REGISTRY[c["function"]["name"]](**args)
            body = json.dumps(out)
        except Exception as e:
            body = json.dumps({"error": str(e)})            # feedback, not a crash
        msgs.append({"role": "tool", "tool_call_id": c["id"], "content": body})

import asyncio, json, time, uuid
from dataclasses import dataclass, field

@dataclass
class Budget:
    max_turns: int = 24
    max_cost_usd: float = 2.00
    max_seconds: float = 300.0
    spent_usd: float = 0.0
    started: float = field(default_factory=time.monotonic)

    def check(self, turn):
        if turn >= self.max_turns:                      return "max_turns"
        if self.spent_usd >= self.max_cost_usd:         return "cost_cap"
        if time.monotonic() - self.started > self.max_seconds: return "deadline"
        return None

@dataclass
class Tool:
    name: str
    schema: dict
    fn: object
    timeout: float = 30.0
    approval: str = "allow"        # allow | ask | deny
    max_result_chars: int = 6000

class Agent:
    def __init__(self, client, tools, system, *, on_event=None, on_approve=None):
        self.client, self.system = client, system
        self.tools = {t.name: t for t in tools}
        self.on_event   = on_event   or (lambda **kw: None)
        self.on_approve = on_approve or (lambda name, args: True)

    async def run(self, goal, *, model="anthropic/claude-sonnet-4.5",
                  budget=None, cancel: asyncio.Event = None):
        budget = budget or Budget()
        cancel = cancel or asyncio.Event()
        run_id = uuid.uuid4().hex[:8]
        msgs   = [{"role": "user", "content": goal}]

        for turn in range(budget.max_turns + 1):
            if cancel.is_set():                  return self._stop(msgs, "cancelled")
            if (why := budget.check(turn)):      return self._stop(msgs, why)

            # 1. assemble — the whole request is rebuilt here, every turn (§4)
            request = self.assemble(msgs, model)

            # 2. call the model, with bounded retries
            t0 = time.monotonic()
            reply, usage = await self._call_with_retry(request, cancel)
            budget.spent_usd += usage.get("cost", 0.0)
            self.on_event(type="model", run=run_id, turn=turn, model=model,
                          ms=int((time.monotonic()-t0)*1000), usage=usage,
                          spent=round(budget.spent_usd, 4))

            msgs.append(reply)
            calls = reply.get("tool_calls") or []
            if not calls:
                return self._stop(msgs, "complete", text=reply.get("content"))

            # 3-6. dispatch every requested call concurrently, each bounded
            results = await asyncio.gather(
                *(self._dispatch(c, run_id, turn) for c in calls))
            msgs.extend(results)

        return self._stop(msgs, "max_turns")

    async def _dispatch(self, call, run_id, turn):
        cid  = call["id"]
        name = call["function"]["name"]
        tool = self.tools.get(name)

        def result(body, ok=True):
            self.on_event(type="tool", run=run_id, turn=turn, tool=name, ok=ok)
            return {"role": "tool", "tool_call_id": cid,
                    "content": body[:tool.max_result_chars] if tool else body}

        if tool is None:
            return result(f"No such tool '{name}'. Available: "
                          f"{', '.join(sorted(self.tools))}", ok=False)
        try:
            args = json.loads(call["function"]["arguments"] or "{}")
        except json.JSONDecodeError as e:
            return result(f"Arguments were not valid JSON: {e}. Re-send them "
                          f"as a JSON object matching the schema.", ok=False)

        if tool.approval == "deny":
            return result(f"'{name}' is not permitted in this run.", ok=False)
        if tool.approval == "ask" and not await _maybe_await(
                self.on_approve(name, args)):
            return result(f"The user declined '{name}'. Try another approach "
                          f"or ask them what they would prefer.", ok=False)

        try:
            out = await asyncio.wait_for(_maybe_await(tool.fn(**args)),
                                         timeout=tool.timeout)
            return result(out if isinstance(out, str) else json.dumps(out))
        except asyncio.TimeoutError:
            return result(f"'{name}' timed out after {tool.timeout}s. "
                          f"Try a narrower request.", ok=False)
        except Exception as e:
            # the model can often fix this itself — hand it back, don't raise
            return result(f"{type(e).__name__}: {e}", ok=False)

// → tools/call
{ "name": "doc.create", "arguments": { "preset": "A2_portrait" } }

// ← result
{ "resultType": "complete",
  "content": [{ "type": "text", "text": "Created document doc_9fk2 (A2, 300dpi)" }],
  "structuredContent": { "doc_id": "doc_9fk2", "version": 1 } }

// → tools/call  — the model carries doc_id forward; the server looks it up
{ "name": "doc.patch",
  "arguments": { "doc_id": "doc_9fk2", "ops": [
      { "op": "set", "path": "/layers/headline/size_pt", "value": 148 } ] } }

// → request. _meta is required and carries what the handshake used to.
{ "jsonrpc": "2.0", "id": 1, "method": "tools/list",
  "params": {},
  "_meta": {
    "io.modelcontextprotocol/protocolVersion": "2026-07-28",
    "io.modelcontextprotocol/clientInfo": { "name": "poster-studio", "version": "0.4.1" },
    "io.modelcontextprotocol/clientCapabilities": {}
  } }

// ← result
{ "jsonrpc": "2.0", "id": 1, "result": {
    "resultType": "complete",
    "tools": [{
      "name": "render.preview",
      "title": "Render preview",
      "description": "Rasterise a design document to a downscaled PNG. Call after any layout change, before judging composition.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "doc_id":   { "type": "string" },
          "long_edge":{ "type": "integer", "minimum": 256, "maximum": 2048, "default": 1024 }
        },
        "required": ["doc_id"],
        "additionalProperties": false
      },
      "outputSchema": {
        "type": "object",
        "properties": { "width": {"type":"integer"}, "height": {"type":"integer"},
                        "version": {"type":"integer"} },
        "required": ["width","height","version"]
      }
    }],
    "ttlMs": 300000,
    "cacheScope": "public"
} }

// ← a tool result carrying an image the model can actually look at
{ "jsonrpc": "2.0", "id": 2, "result": {
    "resultType": "complete",
    "content": [
      { "type": "text",  "text": "Rendered doc_9fk2 v18 at 1024x1448." },
      { "type": "image", "data": "iVBORw0KGgoAAA...", "mimeType": "image/png",
        "annotations": { "audience": ["assistant"], "priority": 0.9 } }
    ],
    "structuredContent": { "width": 1024, "height": 1448, "version": 18 },
    "isError": false
} }

from mcp.server.fastmcp import FastMCP, Image

mcp = FastMCP("poster-render")

@mcp.tool()
def render_preview(doc_id: str, long_edge: int = 1024) -> list:
    """Rasterise a design document to a downscaled PNG.

    Call after any layout change and before judging composition.
    Returns the preview image plus its pixel dimensions and doc version.
    """
    doc = STORE.get(doc_id)                      # server-side state, by handle
    if doc is None:
        raise ValueError(f"Unknown doc_id {doc_id!r}. Call doc.create first.")
    png, w, h = rasterise(doc, long_edge=long_edge)
    return [
        f"Rendered {doc_id} v{doc.version} at {w}x{h}.",
        Image(data=png, format="png"),
    ]

if __name__ == "__main__":
    mcp.run()          # stdio by default; streamable HTTP for remote

import pytest
from studio import run_brief, checks

GOLDEN = load_briefs("evals/briefs/*.yaml")

@pytest.mark.parametrize("brief", GOLDEN, ids=lambda b: b.id)
def test_brief_produces_a_shippable_poster(brief):
    result = run_brief(brief, seed=7, budget_usd=1.50)

    # hard gates — a failure here is a release blocker
    assert result.stop_reason == "complete"
    assert result.cost_usd <= 1.50
    report = checks.run_all(result.doc)
    assert report.contrast_failures == []
    assert report.overflow_failures == []
    assert report.min_effective_dpi >= 300
    for fact in brief.must_appear:            # date, venue, price, age rating
        assert fact in result.doc.text_content()

    # soft signals — recorded per run, alerted on trend, never asserted
    metrics.record(brief.id, turns=result.turns, cost=result.cost_usd,
                   seconds=result.seconds, judge=judge_vs_baseline(result))

from pydantic import BaseModel, Field
from typing import Literal, Union, Annotated

Mm = float                            # one unit everywhere: millimetres

class Canvas(BaseModel):
    width_mm: Mm = 420.0              # A2 portrait
    height_mm: Mm = 594.0
    bleed_mm: Mm = 3.0
    safe_mm: Mm = 10.0
    dpi: int = 300
    colour_space: Literal["sRGB", "CMYK"] = "CMYK"

class Grid(BaseModel):
    columns: int = 6
    gutter_mm: Mm = 6.0
    margin_mm: Mm = 18.0
    baseline_mm: Mm = 4.0             # everything snaps to this

class TypeScale(BaseModel):
    display: str                      # font family, must exist in the font set
    text: str
    ratio: float = 1.333              # sizes are derived, not chosen ad hoc
    base_pt: float = 11.0

class Box(BaseModel):
    x_mm: Mm; y_mm: Mm; w_mm: Mm; h_mm: Mm
    rotation_deg: float = 0.0

class TextLayer(BaseModel):
    kind: Literal["text"] = "text"
    id: str                           # stable, human-readable: "headline"
    role: Literal["headline","subhead","body","credit","caption"]
    box: Box
    content: str
    step: int = 0                     # position on the type scale, not a pt size
    weight: int = 400
    tracking: float = 0.0
    leading: float = 1.15
    colour: str = Field(pattern=r"^#[0-9a-fA-F]{6}$")
    align: Literal["left","center","right"] = "left"

class ImageLayer(BaseModel):
    kind: Literal["image"] = "image"
    id: str
    box: Box
    asset_id: str                     # a handle. bytes live in the asset store.
    fit: Literal["cover","contain"] = "cover"
    opacity: float = 1.0
    blend: Literal["normal","multiply","screen"] = "normal"

class ShapeLayer(BaseModel):
    kind: Literal["shape"] = "shape"
    id: str
    box: Box
    shape: Literal["rect","ellipse","line"]
    fill: str | None = None
    stroke: str | None = None
    stroke_mm: Mm = 0.0

Layer = Annotated[Union[TextLayer, ImageLayer, ShapeLayer],
                  Field(discriminator="kind")]

class Document(BaseModel):
    doc_id: str
    version: int = 1
    canvas: Canvas = Canvas()
    grid: Grid = Grid()
    type_scale: TypeScale
    palette: list[str]                # ordered: ground, ink, accent, …
    layers: list[Layer]               # painted back to front

from pydantic import ValidationError

ALLOWED_FIELDS = {"box", "content", "step", "weight", "tracking", "leading",
                  "colour", "align", "opacity", "blend", "fit", "asset_id",
                  "fill", "stroke", "stroke_mm", "palette", "type_scale"}

def doc_patch(doc_id: str, ops: list[dict]) -> dict:
    """Apply a list of edit operations to a design document.

    Each op is one of:
      {"op":"set",       "layer":"headline", "field":"step", "value":4}
      {"op":"add_layer", "layer":{...full layer object...}, "after":"headline"}
      {"op":"move",      "layer":"credit", "dx_mm":0, "dy_mm":-12}
      {"op":"remove",    "layer":"stray_rect"}
    Operations apply in order and all-or-nothing: if any op is invalid the
    document is unchanged and the error tells you which op and why.
    """
    doc = STORE.load(doc_id)
    if doc is None:
        raise ValueError(f"Unknown doc_id {doc_id!r}. Call doc.create first.")

    draft   = doc.model_copy(deep=True)
    by_id   = {l.id: l for l in draft.layers}
    applied = 0

    for i, op in enumerate(ops):
        kind = op.get("op")
        if kind in ("set", "move", "remove"):
            layer = by_id.get(op.get("layer"))
            if layer is None:
                raise ValueError(
                    f"op[{i}]: no layer {op.get('layer')!r}. "
                    f"Layers are: {', '.join(sorted(by_id))}")
            if getattr(layer, "locked", False):
                raise ValueError(
                    f"op[{i}]: layer {layer.id!r} is locked by the designer. "
                    f"Leave it alone and adjust something else.")

        if kind == "set":
            if op["field"] not in ALLOWED_FIELDS:
                raise ValueError(f"op[{i}]: field {op['field']!r} is not "
                                 f"editable. Editable: {sorted(ALLOWED_FIELDS)}")
            setattr(by_id[op["layer"]], op["field"], op["value"])
        elif kind == "move":
            b = by_id[op["layer"]].box
            b.x_mm += op.get("dx_mm", 0.0); b.y_mm += op.get("dy_mm", 0.0)
        elif kind == "remove":
            draft.layers = [l for l in draft.layers if l.id != op["layer"]]
        elif kind == "add_layer":
            new = parse_layer(op["layer"])                 # validates the union
            if new.id in by_id:
                raise ValueError(f"op[{i}]: layer id {new.id!r} already exists")
            idx = next((n for n, l in enumerate(draft.layers)
                        if l.id == op.get("after")), len(draft.layers) - 1)
            draft.layers.insert(idx + 1, new)
        else:
            raise ValueError(f"op[{i}]: unknown op {kind!r}")
        applied += 1

    try:
        Document.model_validate(draft.model_dump())        # whole-doc invariants
    except ValidationError as e:
        raise ValueError(f"Result would be invalid: {e.errors()[0]['msg']}")

    draft.version = doc.version + 1
    STORE.save(draft)                       # append-only: every version kept
    return {"ok": True, "ops_applied": applied, "version": draft.version}

import base64, hashlib, httpx

ASPECTS = {(420, 594): "3:4", (594, 420): "4:3", (1080, 1350): "4:5"}

async def image_generate(doc_id: str, layer_id: str, prompt: str,
                         style: str = "", seed: int | None = None) -> dict:
    """Generate artwork for one image layer and store it as an asset.

    The prompt should describe imagery only — never text, headlines or logos.
    Type is set by the layout engine; asking an image model for words is how
    posters end up with beautiful gibberish on them.
    """
    doc   = STORE.load(doc_id)
    layer = doc.layer(layer_id)
    ratio = nearest_aspect(layer.box.w_mm, layer.box.h_mm)

    r = await httpx.AsyncClient().post(
        f"{OR}/images", headers=HEADERS, timeout=120,
        json={
            "model": "google/gemini-2.5-flash-image",
            "prompt": f"{prompt}. {style}. No text, no lettering, no logos.",
            "aspect_ratio": ratio,
            "resolution": "2K",              # enough for 300dpi at this box size
            "output_format": "png",
            "n": 1,
            **({"seed": seed} if seed is not None else {}),
        })
    r.raise_for_status()
    body = r.json()

    img   = body["data"][0]
    raw   = base64.b64decode(img["b64_json"])          # base64, never a URL
    aid   = "img_" + hashlib.sha256(raw).hexdigest()[:16]
    w, h  = ASSETS.put(aid, raw, img.get("media_type", "image/png"))

    # check print viability NOW, not at export time
    dpi = min(w / (layer.box.w_mm / 25.4), h / (layer.box.h_mm / 25.4))

    return {                        # a handle and facts. never the bytes.
        "asset_id": aid, "width": w, "height": h,
        "effective_dpi": round(dpi),
        "print_ok": dpi >= 300,
        "cost_usd": body.get("usage", {}).get("cost"),
        "next": f"call doc.patch to set layer {layer_id!r} asset_id to {aid}",
    }

MM_PER_IN = 25.4

def to_svg(doc: Document, *, embed_assets=True) -> str:
    """The single source of truth for geometry. Preview and export both
    go through here, so what the agent judged is what gets printed."""
    W, H, bl = doc.canvas.width_mm, doc.canvas.height_mm, doc.canvas.bleed_mm
    out = [f'<svg xmlns="http://www.w3.org/2000/svg" '
           f'width="{W+2*bl}mm" height="{H+2*bl}mm" '
           f'viewBox="{-bl} {-bl} {W+2*bl} {H+2*bl}">']
    out.append(f'<rect x="{-bl}" y="{-bl}" width="{W+2*bl}" '
               f'height="{H+2*bl}" fill="{doc.palette[0]}"/>')
    for layer in doc.layers:                        # back to front
        out.append(render_layer(doc, layer, embed_assets))
    out.append("</svg>")
    return "".join(out)

def render_preview(doc_id: str, long_edge: int = 1024) -> list:
    """Rasterise to a downscaled PNG. Call after any layout change and
    before judging composition or claiming something looks right."""
    doc = STORE.load(doc_id)
    png = rasterise(to_svg(doc), long_edge=long_edge)   # resvg / cairosvg
    return [f"Rendered {doc_id} v{doc.version}.",
            ImageContent(data=png, mime="image/png")]   # ← the model sees this

def checks_run(doc_id: str) -> dict:
    """Deterministic pre-flight. Every finding names a layer and a fix."""
    doc, findings = STORE.load(doc_id), []
    pixels = rasterise(to_svg(doc), long_edge=1024)     # for real contrast

    for layer in doc.layers:
        if layer.kind == "text":
            behind = dominant_colour_under(pixels, doc, layer.box)
            ratio  = contrast(layer.colour, behind)
            pt     = doc.type_scale.base_pt * doc.type_scale.ratio ** layer.step
            need   = 3.0 if pt >= 18 else 4.5
            if ratio < need:
                findings.append({
                    "layer": layer.id, "check": "contrast", "severity": "error",
                    "detail": f"{ratio:.1f}:1 against {behind}, needs {need}:1",
                    "fix": "lighten the text, or add a scrim behind it"})
            w, h = measure_text(layer, doc.type_scale)
            if w > layer.box.w_mm or h > layer.box.h_mm:
                findings.append({
                    "layer": layer.id, "check": "overflow", "severity": "error",
                    "detail": f"text needs {w:.0f}x{h:.0f}mm, box is "
                              f"{layer.box.w_mm:.0f}x{layer.box.h_mm:.0f}mm",
                    "fix": "drop one type step, or widen the box"})
            if outside_safe_area(layer.box, doc.canvas):
                findings.append({"layer": layer.id, "check": "safe_area",
                    "severity": "error", "detail": "inside the trim margin",
                    "fix": f"keep text {doc.canvas.safe_mm}mm from every edge"})
        if layer.kind == "image":
            a = ASSETS.meta(layer.asset_id)
            dpi = min(a.w / (layer.box.w_mm / MM_PER_IN),
                      a.h / (layer.box.h_mm / MM_PER_IN))
            if dpi < 300:
                findings.append({"layer": layer.id, "check": "dpi",
                    "severity": "error", "detail": f"{dpi:.0f} dpi at this size",
                    "fix": "regenerate at higher resolution or shrink the box"})

    return {"version": doc.version, "errors":
            sum(f["severity"] == "error" for f in findings), "findings": findings}

SYSTEM = """You are a poster art director working in a structured design tool.

You never draw pixels. You edit a design document made of typed layers, and a
deterministic renderer turns it into a poster. Type is always set by the layout
engine — never ask an image model for words.

Method, every time:
1. doc.summary to see the current state.
2. Make one coherent change with doc.patch. Prefer few, decisive ops.
3. render.preview, then LOOK at it.
4. checks.run. Fix every error before doing anything else.
5. Repeat until checks are clean and the brief is satisfied. Then stop.

Rules:
- Type sizes are steps on the scale. Never invent a point size.
- Everything snaps to the grid and the baseline. Use layout.grid.
- Contrast failures and overflow are never acceptable, even if it looks fine.
- A locked layer belongs to the designer. Work around it.
- Say what you changed and why in one sentence. No commentary on your process.
"""

TOOLS = [                       # deterministic order: cache-friendly (§4)
    Tool("doc.summary",     S.doc_summary,   doc_summary,   timeout=5),
    Tool("doc.patch",       S.doc_patch,     doc_patch,     timeout=10),
    Tool("doc.undo",        S.doc_undo,      doc_undo,      timeout=5),
    Tool("type.pair",       S.type_pair,     type_pair,     timeout=5),
    Tool("palette.build",   S.palette_build, palette_build, timeout=5),
    Tool("layout.grid",     S.layout_grid,   layout_grid,   timeout=10),
    Tool("render.preview",  S.render_prev,   render_preview,timeout=20),
    Tool("checks.run",      S.checks_run,    checks_run,    timeout=20),
    Tool("image.generate",  S.image_gen,     image_generate,timeout=120,
         approval="ask"),
    Tool("render.export",   S.render_export, render_export, timeout=60,
         approval="ask"),
]

async def design(brief_text: str, on_event):
    brief = await parse_brief(brief_text)          # structured output, temp 0
    doc   = doc_create(preset=brief.format)

    agent = Agent(client, TOOLS, SYSTEM, on_event=on_event,
                  on_approve=ui_approval_prompt)

    result = await agent.run(
        goal=f"{brief.as_prompt()}\n\nWorking on document {doc['doc_id']}.",
        model="anthropic/claude-sonnet-4.5",       # the hot loop model
        budget=Budget(max_turns=28, max_cost_usd=3.00, max_seconds=420),
    )

    for _ in range(2):                             # bounded maker–critic (§6)
        notes = await critique(doc["doc_id"], brief) # vision model, other vendor
        if not notes.blocking:
            break
        result = await agent.run(goal=notes.as_instructions(),
                                 budget=Budget(max_turns=10, max_cost_usd=1.00))
    return result

import { useEffect, useReducer } from "react";

// The agent streams { type:"patch", version, ops } events. We apply them
// locally so the canvas updates live, mid-turn, instead of after the run.
function reduce(doc, ev) {
  switch (ev.type) {
    case "doc":     return ev.doc;                       // full state on load
    case "patch":   return applyOps(doc, ev.ops, ev.version);
    case "locked":  return setLayer(doc, ev.layer, { locked: ev.locked });
    default:        return doc;
  }
}

export function Canvas({ docId, onSelect }) {
  const [doc, dispatch] = useReducer(reduce, null);

  useEffect(() => {
    const es = new EventSource(`/api/docs/${docId}/stream`);
    es.onmessage = (e) => dispatch(JSON.parse(e.data));
    return () => es.close();
  }, [docId]);

  if (!doc) return <div className="canvas-skeleton" />;
  const { width_mm: W, height_mm: H, bleed_mm: B, safe_mm: S } = doc.canvas;

  return (
    <svg viewBox={`${-B} ${-B} ${W + 2 * B} ${H + 2 * B}`} className="canvas">
      <rect x={-B} y={-B} width={W + 2 * B} height={H + 2 * B}
            fill={doc.palette[0]} />

      {doc.layers.map((l) => (
        <Layer key={l.id} layer={l} doc={doc}
               onClick={() => onSelect(l.id)}
               style={{ cursor: l.locked ? "not-allowed" : "pointer" }} />
      ))}

      {/* print furniture — drawn last, never exported */}
      <rect x={0} y={0} width={W} height={H}
            fill="none" stroke="#A62834" strokeWidth={0.3} strokeDasharray="2 2" />
      <rect x={S} y={S} width={W - 2 * S} height={H - 2 * S}
            fill="none" stroke="#12695B" strokeWidth={0.2} strokeDasharray="1 3" />
    </svg>
  );
}