docs: two new AI-generated diagrams — setup wizard + notifications fan-out

- CloudNode Setup section now leads with a 5-step wizard flow
  (Prerequisites → Configuration → Install → Verify → Launch),
  with annotated branches for the FFmpeg package-manager fallback
  (winget / brew / apt-dnf-pacman) and encoder auto-detect
  (NVENC / QSV / AMF / libx264 fallback).
- Notifications section now leads with a fan-out diagram showing
  EVENT → AUDIENCE FILTER → 4 channels (in-app inbox, email,
  incidents tab, MCP activity log), with the email gate
  (per-org opt-in, bounce suppression, motion cooldown) inlined on
  the email channel, plus the motion-digest 1+1 capping rule.

Both shipped as 2752×1536 WebP (primary) + JPEG (fallback) via
<picture>, lazy-loaded, with descriptive alt text. Specs live in
docs/image-specs/ alongside the existing diagram specs so future
regenerations stay deterministic.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Sbussiso

docs/image-specs/notifications-fanout-diagram.json

@@ -0,0 +1,132 @@
+{
+  "diagram_spec": {
+    "meta": {
+      "spec_version": "1.0.0",
+      "title": "Notifications Fan-out — one event, four channels",
+      "description": "A platform event enters from the left, passes through the audience filter (admin-only vs all members) and the email opt-in gate, then fans out to four delivery channels on the right: in-app SSE inbox, email via Resend, Incidents tab, and the MCP activity log. The diagram shows where each gate sits and which channels are gated by what."
+    },
+    "canvas": {
+      "width": 1920,
+      "height": 1000,
+      "unit": "px",
+      "background_color": "#0a0a0f",
+      "style_notes": "Flat dark UI. NOT photographic. NOT 3D. NOT illustrative. Subtle grid background. Premium technical-doc aesthetic — crisp typography, generous whitespace, soft glow on accents."
+    },
+    "regions": {
+      "event_source": {
+        "x_pct": 0.06,
+        "y_pct": 0.50,
+        "label": "EVENT",
+        "subtitle": "platform-detected change",
+        "examples_panel": {
+          "title": "examples",
+          "items": [
+            "node offline / recovered",
+            "camera offline / recovered",
+            "motion detected",
+            "incident opened",
+            "MCP key created / revoked",
+            "member added / role changed",
+            "CloudNode disk almost full"
+          ],
+          "styling": "small panel attached below the EVENT node, JetBrains Mono items, muted grey, no bullets — just a stacked list"
+        },
+        "node_styling": "tall rounded rectangle, amber accent border, label in spaced caps, subtitle in muted grey Inter"
+      },
+      "audience_gate": {
+        "x_pct": 0.30,
+        "y_pct": 0.50,
+        "label": "AUDIENCE FILTER",
+        "subtitle": "admin-only vs all members",
+        "node_styling": "diamond / hexagonal shape with subtle purple accent border to read as 'decision point', label centered"
+      },
+      "email_gate": {
+        "x_pct": 0.52,
+        "y_pct": 0.18,
+        "label": "EMAIL GATE",
+        "subtitle": "per-org opt-in · bounce suppression · motion cooldown 15 min",
+        "node_styling": "rectangular gate with green accent border, sits ON the line going to the email channel"
+      }
+    },
+    "channels": [
+      {
+        "label": "IN-APP INBOX",
+        "subtitle": "bell icon · SSE · real-time",
+        "accent": "cyan",
+        "x_pct": 0.85,
+        "y_pct": 0.10
+      },
+      {
+        "label": "EMAIL",
+        "subtitle": "Resend · opt-in · cooldown",
+        "accent": "green",
+        "x_pct": 0.85,
+        "y_pct": 0.36
+      },
+      {
+        "label": "INCIDENTS TAB",
+        "subtitle": "if filed as incident",
+        "accent": "amber",
+        "x_pct": 0.85,
+        "y_pct": 0.62
+      },
+      {
+        "label": "MCP ACTIVITY LOG",
+        "subtitle": "admin dashboard · audit",
+        "accent": "purple",
+        "x_pct": 0.85,
+        "y_pct": 0.88
+      }
+    ],
+    "arrows": [
+      {"from": "event_source", "to": "audience_gate", "style": "solid_white_with_arrowhead"},
+      {"from": "audience_gate", "to": "channel_in_app",       "style": "solid_cyan_curve_up"},
+      {"from": "audience_gate", "to": "email_gate",           "style": "solid_white_with_arrowhead"},
+      {"from": "email_gate",    "to": "channel_email",        "style": "solid_green_curve"},
+      {"from": "audience_gate", "to": "channel_incidents",    "style": "solid_amber_curve_down"},
+      {"from": "audience_gate", "to": "channel_mcp_log",      "style": "solid_purple_curve_down"}
+    ],
+    "annotations": [
+      {
+        "near": "channel_email",
+        "label": "MOTION DIGEST",
+        "subtitle": "1 immediate + 1 summary, capped at 2 / cycle / camera",
+        "position": "small_pill_below_email_channel",
+        "color": "#06b6d4"
+      },
+      {
+        "near": "channel_mcp_log",
+        "label": "ADMIN ONLY",
+        "position": "small_pill_above_mcp_log_channel",
+        "color": "#a855f7"
+      }
+    ],
+    "constraints": {
+      "layout_lock": true,
+      "exact_text": [
+        "EVENT", "platform-detected change",
+        "examples",
+        "node offline / recovered",
+        "camera offline / recovered",
+        "motion detected",
+        "incident opened",
+        "MCP key created / revoked",
+        "member added / role changed",
+        "CloudNode disk almost full",
+        "AUDIENCE FILTER", "admin-only vs all members",
+        "EMAIL GATE", "per-org opt-in · bounce suppression · motion cooldown 15 min",
+        "IN-APP INBOX", "bell icon · SSE · real-time",
+        "EMAIL", "Resend · opt-in · cooldown",
+        "INCIDENTS TAB", "if filed as incident",
+        "MCP ACTIVITY LOG", "admin dashboard · audit",
+        "MOTION DIGEST", "1 immediate + 1 summary, capped at 2 / cycle / camera",
+        "ADMIN ONLY"
+      ],
+      "do_not_change_text": true,
+      "do_not_misspell_anything": true,
+      "do_not_render_metadata": "Do NOT render any color hex codes, rgba() values, x_pct/y_pct positioning values, JSON field names, or any other JSON metadata as visible text on the canvas. Visible text must come ONLY from the exact_text array.",
+      "do_not_show_logos": "Do NOT render any company logos (no real Resend logo, no Gmail icon, no Slack mark). Text labels alone.",
+      "rendering_notes": "Premium technical-doc style matching the existing dashboard-ia and mcp-workflow diagrams. The fan-out reads left-to-right: EVENT → AUDIENCE FILTER → 4 channels stacked on the right. The EMAIL GATE is an inline gate that sits ON the line going to the EMAIL channel, NOT a separate node. Channel boxes are rounded rectangles, accent border per channel. The 'examples' panel under EVENT lists the seven event types as a clean stacked list with NO bullet symbols. Gate shapes are visually distinct from channel shapes — diamonds/hexagons read as decisions, rectangles read as destinations. Aspect ratio 16:8.3. NOT photographic."
+    }
+  }
+}

docs/image-specs/setup-wizard-diagram.json

@@ -0,0 +1,76 @@
+{
+  "diagram_spec": {
+    "meta": {
+      "spec_version": "1.0.0",
+      "title": "CloudNode Setup Wizard — 5-step flow",
+      "description": "Left-to-right pipeline showing the 5 wizard steps a user walks through after running install.sh / the MSI. Two annotation branches: FFmpeg fallback path above step 1 (winget / brew / apt), encoder auto-detect options below step 3 (NVENC / QSV / AMF / libx264)."
+    },
+    "canvas": {
+      "width": 1920,
+      "height": 840,
+      "unit": "px",
+      "background_color": "#0a0a0f",
+      "style_notes": "Flat dark UI. NOT photographic. NOT 3D. NOT illustrative. Subtle grid background. Premium technical-doc aesthetic — crisp typography, generous whitespace, soft glow on accents."
+    },
+    "main_pipeline": [
+      {"step": 1, "label": "Prerequisites", "subtitle": "platform · cameras · FFmpeg", "accent": "cyan",   "x_pct": 0.08},
+      {"step": 2, "label": "Configuration", "subtitle": "node_id · API key",          "accent": "cyan",   "x_pct": 0.27},
+      {"step": 3, "label": "Install",       "subtitle": "encrypted config · encoder", "accent": "cyan",   "x_pct": 0.46},
+      {"step": 4, "label": "Verify",        "subtitle": "round-trip Command Center",  "accent": "purple", "x_pct": 0.65},
+      {"step": 5, "label": "Launch",        "subtitle": "node online",                "accent": "green",  "x_pct": 0.84}
+    ],
+    "main_arrows": [
+      {"from": 1, "to": 2},
+      {"from": 2, "to": 3},
+      {"from": 3, "to": 4},
+      {"from": 4, "to": 5}
+    ],
+    "node_styling": "Each main step is a rounded rectangle with a circled white step-number badge top-left, a bold title, and a muted-grey monospace subtitle. Accent border colour per step (cyan for steps 1-3, purple for verify, green for launch). Soft glow matching the accent.",
+    "ffmpeg_branch": {
+      "lane_label": "IF FFMPEG MISSING",
+      "lane_color": "#f59e0b",
+      "position": "above_step_1",
+      "explanatory_text": "wizard offers to install via OS package manager",
+      "nodes": [
+        {"label": "winget", "subtitle": "Windows", "x_offset_from_step_1": -0.04},
+        {"label": "brew",   "subtitle": "macOS",   "x_offset_from_step_1":  0.00},
+        {"label": "apt / dnf / pacman", "subtitle": "Linux", "x_offset_from_step_1": 0.05}
+      ],
+      "connections_style": "thin dashed amber curved line from step 1 up to a small junction, then three short branches to each pill",
+      "node_styling": "small pill-shaped rounded rectangles, amber border, JetBrains Mono label + Inter subtitle below"
+    },
+    "encoder_branch": {
+      "lane_label": "ENCODER AUTO-DETECT",
+      "lane_color": "#3b82f6",
+      "position": "below_step_3",
+      "explanatory_text": "wizard picks the best available, falls back left-to-right",
+      "nodes": [
+        {"label": "NVENC",   "subtitle": "NVIDIA",  "x_offset_from_step_3": -0.06},
+        {"label": "QSV",     "subtitle": "Intel",   "x_offset_from_step_3": -0.02},
+        {"label": "AMF",     "subtitle": "AMD",     "x_offset_from_step_3":  0.02},
+        {"label": "libx264", "subtitle": "fallback","x_offset_from_step_3":  0.06}
+      ],
+      "connections_style": "thin dashed blue curved line from step 3 down to a junction, then four short branches to each encoder pill. The first three pills (NVENC / QSV / AMF) share the same subtle blue accent; libx264 has a slightly muted grey accent to read as the always-available fallback.",
+      "node_styling": "small pill-shaped rounded rectangles, blue border, JetBrains Mono label + Inter subtitle below"
+    },
+    "constraints": {
+      "layout_lock": true,
+      "exact_text": [
+        "Prerequisites", "platform · cameras · FFmpeg",
+        "Configuration", "node_id · API key",
+        "Install", "encrypted config · encoder",
+        "Verify", "round-trip Command Center",
+        "Launch", "node online",
+        "IF FFMPEG MISSING", "wizard offers to install via OS package manager",
+        "winget", "Windows", "brew", "macOS", "apt / dnf / pacman", "Linux",
+        "ENCODER AUTO-DETECT", "wizard picks the best available, falls back left-to-right",
+        "NVENC", "NVIDIA", "QSV", "Intel", "AMF", "AMD", "libx264", "fallback"
+      ],
+      "do_not_change_text": true,
+      "do_not_misspell_anything": true,
+      "do_not_render_metadata": "Do NOT render any color hex codes, rgba() values, x_pct/x_offset positioning values, JSON field names, or any other JSON metadata as visible text on the canvas. Visible text must come ONLY from the exact_text array.",
+      "do_not_show_logos": "Do NOT render any company logos (no real Intel/NVIDIA/AMD/Apple/Microsoft/Linux logos). The text labels alone identify each platform.",
+      "rendering_notes": "Premium technical-doc style matching incident-lifecycle and motion-fsm diagrams. Step 1-3 cyan, step 4 purple, step 5 green. Numbered step badges read '1' through '5'. The two branches (ffmpeg above, encoder below) are visually subordinate — smaller pills, dashed connectors, lane labels in spaced caps. Aspect ratio 16:7. NOT photographic."
+    }
+  }
+}

frontend/public/images/notifications-fanout.jpg

@@ -13,6 +13,23 @@ function CloudNodeSetup() {
         backend, which serves them to viewers from an in-memory cache.
       </p>
 
+      <figure className="docs-diagram">
+        <picture>
+          <source srcSet="/images/setup-wizard.webp" type="image/webp" />
+          <img
+            src="/images/setup-wizard.jpg"
+            alt="CloudNode setup wizard 5-step flow: Prerequisites, Configuration, Install, Verify, Launch — left to right. Annotation branches: 'IF FFMPEG MISSING' (winget on Windows, brew on macOS, apt/dnf/pacman on Linux) above step 1; 'ENCODER AUTO-DETECT' (NVENC/NVIDIA, QSV/Intel, AMF/AMD, libx264 fallback) below step 3."
+            className="docs-diagram-image"
+            width="2752"
+            height="1536"
+            loading="lazy"
+          />
+        </picture>
+        <figcaption className="docs-diagram-caption">
+          The wizard runs once per machine. Steps 1–3 set you up, step 4 round-trips a credential check against Command Center, and step 5 hands the node off to live operation. The two annotated branches show where the wizard makes choices for you — installing FFmpeg via the OS package manager and picking the best available hardware encoder.
+        </figcaption>
+      </figure>
+
       <h3>Installation</h3>
       <OsTabs id="cn" />
       <p style={{ marginTop: '0.75rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>

frontend/public/images/notifications-fanout.webp

@@ -9,6 +9,23 @@ function Notifications() {
         the MCP tool activity log.
       </p>
 
+      <figure className="docs-diagram">
+        <picture>
+          <source srcSet="/images/notifications-fanout.webp" type="image/webp" />
+          <img
+            src="/images/notifications-fanout.jpg"
+            alt="Notifications fan-out: a single platform event passes through the audience filter (admin-only vs all members), then fans out to four channels — In-app inbox (SSE, real-time), Email (Resend, with per-org opt-in, bounce suppression, and 15-minute motion cooldown), Incidents tab (when filed as incident), and MCP activity log (admin only). Motion digest behavior is surfaced near the email channel: 1 immediate + 1 summary, capped at 2 per cycle per camera."
+            className="docs-diagram-image"
+            width="2752"
+            height="1536"
+            loading="lazy"
+          />
+        </picture>
+        <figcaption className="docs-diagram-caption">
+          One event, four destinations. The audience filter decides whether the event goes to admins only or to every member. The email gate adds per-org opt-in, bounce suppression, and motion-event cooldown — so the in-app inbox can be loud while email volume stays bounded.
+        </figcaption>
+      </figure>
+
       <h3>What triggers a notification</h3>
       <ul>
         <li><strong>Node offline</strong> — Command Center hasn't received a heartbeat from a node for 90 seconds.</li>