generate_mockups.py

#!/usr/bin/env python3
"""Generate 7 flow-diagram mockups for the Shopify webhook service spec."""

import os
from playwright.sync_api import sync_playwright

OUT_DIR = "/root/projects/runs/b8eb8e1a-fb09-4fdf-bd9a-7f73f91733bf/attachments"
os.makedirs(OUT_DIR, exist_ok=True)

# Shared dark-theme CSS
BASE_STYLE = """
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #0f0c29; color: #fff; padding: 32px;
    min-height: 100vh; display: flex; flex-direction: column;
  }
  .title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: #6366f1; margin-bottom: 20px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(99,102,241,0.2);
  }
  .subtitle {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #818cf8; margin-bottom: 16px;
  }
  .step {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .step-num {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px; flex-shrink: 0;
  }
  .step-num.green { background: rgba(34,197,94,0.2); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
  .step-num.blue { background: rgba(99,102,241,0.2); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
  .step-num.yellow { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
  .step-num.red { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
  .step-title {
    font-size: 12.5px; font-weight: 600; color: #e0e7ff;
  }
  .step-desc {
    font-size: 10.5px; color: #6b7280; margin-top: 3px; line-height: 1.5;
  }
  .badge {
    font-size: 8.5px; padding: 2px 7px; border-radius: 8px;
    font-weight: 700; margin-left: 6px; vertical-align: middle;
  }
  .badge-built { background: rgba(34,197,94,0.2); color: #4ade80; }
  .badge-planned { background: rgba(99,102,241,0.2); color: #818cf8; }
  .badge-warning { background: rgba(245,158,11,0.2); color: #fbbf24; }
  .badge-error { background: rgba(239,68,68,0.2); color: #f87171; }

  .arrow-down {
    text-align: center; color: #4f46e5; font-size: 18px; padding: 6px 0;
    margin-left: 13px;
  }
  .box {
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px; padding: 14px 16px; margin: 10px 0;
  }
  .box-title {
    font-size: 11px; font-weight: 700; color: #818cf8;
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
  }
  .box-content {
    font-size: 11px; color: #c7d2fe; line-height: 1.6;
  }
  .code {
    font-family: 'Courier New', monospace; font-size: 10px;
    background: rgba(15,12,41,0.6); border: 1px solid rgba(99,102,241,0.15);
    border-radius: 6px; padding: 8px 12px; color: #a5b4fc;
    margin: 8px 0; display: inline-block;
  }
  .response-box {
    background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
    border-radius: 10px; padding: 10px 14px; margin: 8px 0;
  }
  .response-box.error {
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
  }
  .json-key { color: #818cf8; }
  .json-str { color: #4ade80; }
  .json-num { color: #fbbf24; }
"""


def make_html(title, subtitle, steps, extra_boxes=None, response_box=None):
    """Build an HTML page for a flow diagram mockup."""
    steps_html = ""
    for i, (num_class, title_text, desc, badge) in enumerate(steps):
        badge_html = f'<span class="badge {badge}">{badge.upper().replace("-"," ")}</span>' if badge else ""
        steps_html += f'''
        <div class="step">
          <div class="step-num {num_class}">{i+1}</div>
          <div>
            <div class="step-title">{title_text}{badge_html}</div>
            <div class="step-desc">{desc}</div>
          </div>
        </div>'''
        if i < len(steps) - 1:
            steps_html += '<div class="arrow-down">↓</div>'

    extra_html = ""
    if extra_boxes:
        for box in extra_boxes:
            extra_html += f'''
        <div class="box">
          <div class="box-title">{box["title"]}</div>
          <div class="box-content">{box["content"]}</div>
        </div>'''

    resp_html = ""
    if response_box:
        cls = " error" if response_box.get("error") else ""
        resp_html += f'''
        <div class="response-box{cls}">
          <div style="font-size:10px;font-weight:700;margin-bottom:4px;color:{'#f87171' if response_box.get('error') else '#4ade80'};">{response_box["label"]}</div>
          <div class="code" style="display:block;white-space:pre;">{response_box["body"]}</div>
        </div>'''

    return f'''<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>{BASE_STYLE}</style>
</head><body>
  <div class="title">{title}</div>
  <div class="subtitle">{subtitle}</div>
  {steps_html}
  {extra_html}
  {resp_html}
</body></html>'''


MOCKUPS = {
    "a-idle-state": make_html(
        "Shopify Webhook Service — A: Idle State",
        "Service running, port 8080, awaiting requests",
        [
            ("blue", "Uvicorn listening on 0.0.0.0:8080", "ASGI server started, accepting connections", "planned"),
            ("blue", "FastAPI app loaded", "Routes registered: POST /webhooks/shopify/product-update, GET /health", "planned"),
            ("blue", "structlog configured", "JSON renderer active, writing to stdout", "planned"),
            ("green", "Docker HEALTHCHECK passing", "GET /health → 200 OK", "planned"),
        ],
        extra_boxes=[
            {"title": "Container State", "content": "Non-root user • Python 3.12 • Uvicorn workers=1<br>No active connections • No queued requests • CPU idle"},
        ],
    ),

    "b-webhook-received": make_html(
        "Shopify Webhook Service — B: Webhook Received",
        "POST request arrives from Shopify",
        [
            ("green", "Shopify sends POST request", "HTTP POST to /webhooks/shopify/product-update<br>Content-Type: application/json", "planned"),
            ("blue", "Uvicorn accepts connection", "TCP connection established, request headers parsed", "planned"),
            ("blue", "FastAPI routes to handler", "Router matches POST /webhooks/shopify/product-update", "planned"),
            ("yellow", "Parsing JSON body", "Reading request body, deserializing JSON to dict", "planned"),
        ],
        extra_boxes=[
            {"title": "Incoming Request", "content": 'POST /webhooks/shopify/product-update<br>Content-Type: application/json<br>Body: { "id": 123456789, "title": "Widget", ... }'},
        ],
    ),

    "c-validation": make_html(
        "Shopify Webhook Service — C: Validation State",
        "Pydantic model validates top-level fields",
        [
            ("blue", "Pydantic model invoked", "ShopifyProductUpdateModel.parse_obj(payload)", "planned"),
            ("blue", "Required fields checked", "id (int) ✓ &nbsp; title (str) ✓", "planned"),
            ("blue", "Optional fields defaulted", "body_html, vendor, product_type → None if absent", "planned"),
            ("blue", "Extra fields allowed", "variants, images, metafields → passed through (extra='allow')", "planned"),
        ],
        extra_boxes=[
            {"title": "Pydantic Model", "content": 'Required: id: int, title: str<br>Optional: body_html, vendor, product_type,<br>handle, published_at, created_at, updated_at, status, tags<br><br>Config: extra = "allow"'},
            {"title": "⚠ HMAC Verification", "content": "SKIPPED per requirement — any well-formed JSON accepted"},
        ],
    ),

    "d-logging": make_html(
        "Shopify Webhook Service — D: Active Logging",
        "structlog writes structured JSON line to stdout",
        [
            ("blue", "Extract key fields", "product_id from payload.id, title from payload.title", "planned"),
            ("blue", "Build log event", 'event="shopify.product_update", product_id, title, payload', "planned"),
            ("green", "structlog emits JSON line", 'Single JSON line written to stdout', "planned"),
            ("green", "Log shipper ingests", "Fluentd / CloudWatch / Datadog picks up line", "planned"),
        ],
        extra_boxes=[
            {"title": "Log Output Example", "content": '{<br>&nbsp;&nbsp;<span class="json-key">"event"</span>: <span class="json-str">"shopify.product_update"</span>,<br>&nbsp;&nbsp;<span class="json-key">"timestamp"</span>: <span class="json-str">"2025-06-05T12:00:00Z"</span>,<br>&nbsp;&nbsp;<span class="json-key">"level"</span>: <span class="json-str">"info"</span>,<br>&nbsp;&nbsp;<span class="json-key">"product_id"</span>: <span class="json-num">123456789</span>,<br>&nbsp;&nbsp;<span class="json-key">"title"</span>: <span class="json-str">"Widget"</span>,<br>&nbsp;&nbsp;<span class="json-key">"payload"</span>: { ... }<br>}'},
        ],
    ),

    "e-success": make_html(
        "Shopify Webhook Service — E: Success / Completion",
        "200 OK returned to Shopify, log line emitted",
        [
            ("green", "Log line emitted", "structlog: single JSON line to stdout", "planned"),
            ("green", "HTTP 200 OK returned", 'Response: {"status": "received"}', "planned"),
            ("green", "Connection closed", "Uvicorn sends response, closes connection", "planned"),
            ("green", "Request complete", "Total: parse → validate → log → respond (<10ms typical)", "planned"),
        ],
        response_box={
            "label": "HTTP 200 OK",
            "body": '{\n  <span class="json-key">"status"</span>: <span class="json-str">"received"</span>\n}',
        },
    ),

    "f-health-check": make_html(
        "Shopify Webhook Service — F: Health Check",
        "Docker / load balancer probes GET /health",
        [
            ("green", "Docker HEALTHCHECK", "curl -f http://localhost:8080/health (every 30s)", "planned"),
            ("blue", "FastAPI routes to handler", "GET /health → health_router", "planned"),
            ("green", "200 OK returned", 'Response: {"status": "ok"}', "planned"),
            ("green", "Container marked healthy", "Docker health status: healthy", "planned"),
        ],
        extra_boxes=[
            {"title": "Dockerfile HEALTHCHECK", "content": "HEALTHCHECK --interval=30s --timeout=5s --start-period=5s \\<br>&nbsp;&nbsp;CMD curl -f http://localhost:8080/health || exit 1"},
        ],
        response_box={
            "label": "HTTP 200 OK",
            "body": '{\n  <span class="json-key">"status"</span>: <span class="json-str">"ok"</span>\n}',
        },
    ),

    "g-error": make_html(
        "Shopify Webhook Service — G: Error State",
        "Invalid payload fails Pydantic validation → 422",
        [
            ("red", "Malformed or invalid JSON", 'Missing required field "id" or non-JSON body', "planned"),
            ("red", "Pydantic validation fails", "Model raises ValidationError", "planned"),
            ("red", "422 Unprocessable Entity", "FastAPI auto-generates validation error response", "planned"),
            ("yellow", "Error logged (optional)", "structlog logs validation error at warning level", "planned"),
        ],
        extra_boxes=[
            {"title": "Example: Missing id", "content": 'Request: { "title": "Widget" }<br>Error: id field required'},
            {"title": "Example: Invalid JSON", "content": 'Request body: {not valid json}<br>Error: JSON decode error'},
        ],
        response_box={
            "label": "HTTP 422 Unprocessable Entity",
            "body": '{\n  <span class="json-key">"detail"</span>: [\n    {\n      <span class="json-key">"loc"</span>: [<span class="json-str">"body"</span>, <span class="json-str">"id"</span>],\n      <span class="json-key">"msg"</span>: <span class="json-str">"field required"</span>,\n      <span class="json-key">"type"</span>: <span class="json-str">"value_error.missing"</span>\n    }\n  ]\n}',
            "error": True,
        },
    ),
}


with sync_playwright() as p:
    browser = p.chromium.launch(
        executable_path="/usr/local/bin/chromium",
        args=["--no-sandbox"],
    )

    for slug, html in MOCKUPS.items():
        page = browser.new_page()
        page.set_viewport_size({"width": 480, "height": 700, "deviceScaleFactor": 2})
        page.set_content(html, wait_until="networkidle")
        page.wait_for_timeout(1500)  # wait for fonts
        out_path = os.path.join(OUT_DIR, f"mockup-{slug}.png")
        page.screenshot(path=out_path, full_page=True)
        page.close()
        print(f"  ✓ {out_path}")

    browser.close()
    print("All 7 mockups generated.")