{
  "id": "aurora-console-connect",
  "name": "Connect a Source",
  "theme": "aurora-console",
  "category": "Auth & Onboarding",
  "description": "Onboarding as a wiring diagram: pick a runtime, copy one command, and watch the first span arrive without leaving the page.",
  "layout": "A four-step vertical stepper in a 300px rail with the active step expanded to fill the remaining width, and a waiting-for-data strip that spans the whole footer.",
  "modules": [
    {
      "key": "steps",
      "name": "Stepper",
      "html": "\n<aside class=\"st\"><span class=\"k\">Setup</span>\n<ol>\n  <li class=\"done\"><b>Create workspace</b><span>aurora / production</span></li>\n  <li class=\"done\"><b>Invite the on-call</b><span>3 people</span></li>\n  <li class=\"now\"><b>Connect a source</b><span>Choose a runtime</span></li>\n  <li><b>Set your first alert</b><span>Takes 30 seconds</span></li>\n</ol></aside>"
    },
    {
      "key": "picker",
      "name": "Runtime picker",
      "html": "\n<section class=\"pk\"><span class=\"k\">Runtime</span>\n<div class=\"opts\"><button type=\"button\" class=\"on\">Node</button><button type=\"button\">Go</button><button type=\"button\">Python</button><button type=\"button\">Rust</button><button type=\"button\">JVM</button><button type=\"button\">Kubernetes</button></div></section>"
    },
    {
      "key": "command",
      "name": "Install command",
      "html": "\n<section class=\"cmd\"><header><span class=\"k\">Run this where the service runs</span><button type=\"button\" class=\"cp\">Copy</button></header>\n<pre><code><span class=\"pr\">$</span> npm i @aurora/otel &amp;&amp; \\\n  AURORA_KEY=<span class=\"tk\">wk_live_8f2c…</span> node --import @aurora/otel server.js</code></pre>\n<p>The agent auto-instruments HTTP, SQL and the queue client. Nothing else needs changing.</p></section>"
    },
    {
      "key": "waiting",
      "name": "Waiting strip",
      "html": "\n<footer class=\"wt\"><span class=\"dot\"></span><b>Waiting for the first span…</b><span class=\"m\">Listening on ingest.eu-west · usually under 40 seconds</span><a href=\"#\">Having trouble?</a></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "aurora-console-connect",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:40:57+09:00",
    "updatedAt": "2026-09-01T19:40:57+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/aurora-console-connect.json",
  "structure": "A four-step vertical stepper in a 300px rail with the active step expanded to fill the remaining width, and a waiting-for-data strip that spans the whole footer.",
  "html": "<div class=\"dz dz-aurora-console-connect\" data-design=\"aurora-console-connect\" data-theme=\"aurora-console\">\n<section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Stepper\">\n<aside class=\"st\"><span class=\"k\">Setup</span>\n<ol>\n  <li class=\"done\"><b>Create workspace</b><span>aurora / production</span></li>\n  <li class=\"done\"><b>Invite the on-call</b><span>3 people</span></li>\n  <li class=\"now\"><b>Connect a source</b><span>Choose a runtime</span></li>\n  <li><b>Set your first alert</b><span>Takes 30 seconds</span></li>\n</ol></aside></section><section class=\"dz-mod\" data-mod=\"picker\" aria-label=\"Runtime picker\">\n<section class=\"pk\"><span class=\"k\">Runtime</span>\n<div class=\"opts\"><button type=\"button\" class=\"on\">Node</button><button type=\"button\">Go</button><button type=\"button\">Python</button><button type=\"button\">Rust</button><button type=\"button\">JVM</button><button type=\"button\">Kubernetes</button></div></section></section><section class=\"dz-mod\" data-mod=\"command\" aria-label=\"Install command\">\n<section class=\"cmd\"><header><span class=\"k\">Run this where the service runs</span><button type=\"button\" class=\"cp\">Copy</button></header>\n<pre><code><span class=\"pr\">$</span> npm i @aurora/otel &amp;&amp; \\\n  AURORA_KEY=<span class=\"tk\">wk_live_8f2c…</span> node --import @aurora/otel server.js</code></pre>\n<p>The agent auto-instruments HTTP, SQL and the queue client. Nothing else needs changing.</p></section></section><section class=\"dz-mod\" data-mod=\"waiting\" aria-label=\"Waiting strip\">\n<footer class=\"wt\"><span class=\"dot\"></span><b>Waiting for the first span…</b><span class=\"m\">Listening on ingest.eu-west · usually under 40 seconds</span><a href=\"#\">Having trouble?</a></footer></section>\n</div>",
  "css": "\n.dz-aurora-console-connect { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; padding: 30px 32px; align-content: start; }\n.dz-aurora-console-connect .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-connect .st { grid-row: 1 / 3; border-right: var(--pv-bw) solid var(--border); padding-right: 28px; }\n.dz-aurora-console-connect .st ol { list-style: none; margin: 14px 0 0; padding: 0; }\n.dz-aurora-console-connect .st li { position: relative; padding: 0 0 26px 30px; }\n.dz-aurora-console-connect .st li::before { content: \"\"; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); background: var(--background); }\n.dz-aurora-console-connect .st li::after { content: \"\"; position: absolute; left: 6px; top: 20px; bottom: 4px; width: 2px; background: var(--border); }\n.dz-aurora-console-connect .st li:last-child::after { display: none; }\n.dz-aurora-console-connect .done::before { background: var(--accent); border-color: var(--accent); }\n.dz-aurora-console-connect .now::before { border-color: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 22%, transparent); }\n.dz-aurora-console-connect .st b { display: block; font-size: 14px; }\n.dz-aurora-console-connect .st span { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-aurora-console-connect .st li:not(.done):not(.now) b { color: var(--muted-foreground); }\n.dz-aurora-console-connect .pk { padding-bottom: 22px; }\n.dz-aurora-console-connect .opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }\n.dz-aurora-console-connect .opts button { font: inherit; font-size: 13px; background: var(--card); color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all var(--dur) var(--ease); }\n.dz-aurora-console-connect .opts button:hover { color: var(--foreground); border-color: var(--primary); }\n.dz-aurora-console-connect .opts .on { background: color-mix(in srgb, var(--primary) 20%, transparent); border-color: var(--primary); color: var(--foreground); }\n.dz-aurora-console-connect .cmd { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--foreground) 42%, transparent); padding: 16px 18px; }\n.dz-aurora-console-connect .cmd header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n.dz-aurora-console-connect .cp { font: inherit; font-size: 11.5px; background: transparent; color: var(--accent); border: var(--pv-bw) solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--pv-radius-sm); padding: 5px 11px; cursor: pointer; }\n.dz-aurora-console-connect .cmd pre { margin: 0 0 12px; font-family: var(--pv-mono); font-size: 12.5px; line-height: 1.7; overflow-x: auto; }\n.dz-aurora-console-connect .pr { color: var(--muted-foreground); } .dz-aurora-console-connect .tk { color: var(--primary); }\n.dz-aurora-console-connect .cmd p { font-size: 13px; color: var(--muted-foreground); margin: 0; }\n.dz-aurora-console-connect .wt { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 18px; border-top: var(--pv-bw) solid var(--border); }\n.dz-aurora-console-connect .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: dz-au-wait 1.8s ease-out infinite; }\n@keyframes dz-au-wait { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent) } 100% { box-shadow: 0 0 0 14px transparent } }\n.dz-aurora-console-connect .wt b { font-size: 14px; }\n.dz-aurora-console-connect .m { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-aurora-console-connect .wt a { margin-left: auto; font-size: 12.5px; color: var(--accent); }\n@media (prefers-reduced-motion: reduce) { .dz-aurora-console-connect *, .dz-aurora-console-connect *::before, .dz-aurora-console-connect *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/aurora-console.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}