{
  "id": "aurora-console-trace",
  "name": "Trace Waterfall",
  "theme": "aurora-console",
  "category": "Data & Reports",
  "description": "One request pulled apart into thirty spans, laid on a shared time axis so the slow one is a shape rather than a number you have to look up.",
  "layout": "A fixed 320px span-name column beside a proportional-width waterfall, with a sticky millisecond ruler at the top and a detail drawer pinned to the bottom edge across the full width.",
  "modules": [
    {
      "key": "head",
      "name": "Trace header",
      "html": "\n<header class=\"th\"><div><span class=\"k\">Trace</span><h1>POST /v2/checkout</h1></div>\n<dl><div><dt>Duration</dt><dd>1,284 ms</dd></div><div><dt>Spans</dt><dd>31</dd></div><div><dt>Services</dt><dd>6</dd></div><div><dt>Status</dt><dd class=\"err\">1 error</dd></div></dl></header>"
    },
    {
      "key": "ruler",
      "name": "Time ruler",
      "html": "\n<div class=\"ru\"><span>0</span><span>320</span><span>640</span><span>960</span><span>1280 ms</span></div>"
    },
    {
      "key": "waterfall",
      "name": "Span waterfall",
      "html": "\n<ol class=\"wf\">\n  <li><span class=\"n\">checkout-api · handler</span><span class=\"bar\" style=\"--s:0%;--w:100%\"></span><span class=\"d\">1284</span></li>\n  <li><span class=\"n\">↳ identity · verify</span><span class=\"bar a\" style=\"--s:2%;--w:6%\"></span><span class=\"d\">77</span></li>\n  <li><span class=\"n\">↳ ledger · reserve</span><span class=\"bar\" style=\"--s:9%;--w:14%\"></span><span class=\"d\">180</span></li>\n  <li><span class=\"n\">↳ ledger · pg.query</span><span class=\"bar a\" style=\"--s:11%;--w:10%\"></span><span class=\"d\">128</span></li>\n  <li class=\"slow\"><span class=\"n\">↳ media-proc · thumbnail</span><span class=\"bar e\" style=\"--s:24%;--w:52%\"></span><span class=\"d\">668</span></li>\n  <li><span class=\"n\">↳ media-proc · s3.put</span><span class=\"bar a\" style=\"--s:60%;--w:14%\"></span><span class=\"d\">180</span></li>\n  <li><span class=\"n\">↳ notify · enqueue</span><span class=\"bar\" style=\"--s:78%;--w:5%\"></span><span class=\"d\">64</span></li>\n  <li><span class=\"n\">↳ search · index</span><span class=\"bar\" style=\"--s:84%;--w:12%\"></span><span class=\"d\">154</span></li>\n</ol>"
    },
    {
      "key": "drawer",
      "name": "Span detail",
      "html": "\n<footer class=\"dw\"><div><span class=\"k\">Selected span</span><b>media-proc · thumbnail</b></div>\n<dl><div><dt>Start</dt><dd>+308 ms</dd></div><div><dt>Self time</dt><dd>488 ms</dd></div><div><dt>Attempt</dt><dd>2 of 3</dd></div><div><dt>Host</dt><dd>ip-10-0-4-91</dd></div></dl>\n<button type=\"button\" class=\"btn\">Copy span id</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "aurora-console-trace",
    "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-trace.json",
  "structure": "A fixed 320px span-name column beside a proportional-width waterfall, with a sticky millisecond ruler at the top and a detail drawer pinned to the bottom edge across the full width.",
  "html": "<div class=\"dz dz-aurora-console-trace\" data-design=\"aurora-console-trace\" data-theme=\"aurora-console\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Trace header\">\n<header class=\"th\"><div><span class=\"k\">Trace</span><h1>POST /v2/checkout</h1></div>\n<dl><div><dt>Duration</dt><dd>1,284 ms</dd></div><div><dt>Spans</dt><dd>31</dd></div><div><dt>Services</dt><dd>6</dd></div><div><dt>Status</dt><dd class=\"err\">1 error</dd></div></dl></header></section>\n<section class=\"dz-mod\" data-mod=\"ruler\" aria-label=\"Time ruler\">\n<div class=\"ru\"><span>0</span><span>320</span><span>640</span><span>960</span><span>1280 ms</span></div></section>\n<section class=\"dz-mod\" data-mod=\"waterfall\" aria-label=\"Span waterfall\">\n<ol class=\"wf\">\n  <li><span class=\"n\">checkout-api · handler</span><span class=\"bar\" style=\"--s:0%;--w:100%\"></span><span class=\"d\">1284</span></li>\n  <li><span class=\"n\">↳ identity · verify</span><span class=\"bar a\" style=\"--s:2%;--w:6%\"></span><span class=\"d\">77</span></li>\n  <li><span class=\"n\">↳ ledger · reserve</span><span class=\"bar\" style=\"--s:9%;--w:14%\"></span><span class=\"d\">180</span></li>\n  <li><span class=\"n\">↳ ledger · pg.query</span><span class=\"bar a\" style=\"--s:11%;--w:10%\"></span><span class=\"d\">128</span></li>\n  <li class=\"slow\"><span class=\"n\">↳ media-proc · thumbnail</span><span class=\"bar e\" style=\"--s:24%;--w:52%\"></span><span class=\"d\">668</span></li>\n  <li><span class=\"n\">↳ media-proc · s3.put</span><span class=\"bar a\" style=\"--s:60%;--w:14%\"></span><span class=\"d\">180</span></li>\n  <li><span class=\"n\">↳ notify · enqueue</span><span class=\"bar\" style=\"--s:78%;--w:5%\"></span><span class=\"d\">64</span></li>\n  <li><span class=\"n\">↳ search · index</span><span class=\"bar\" style=\"--s:84%;--w:12%\"></span><span class=\"d\">154</span></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"drawer\" aria-label=\"Span detail\">\n<footer class=\"dw\"><div><span class=\"k\">Selected span</span><b>media-proc · thumbnail</b></div>\n<dl><div><dt>Start</dt><dd>+308 ms</dd></div><div><dt>Self time</dt><dd>488 ms</dd></div><div><dt>Attempt</dt><dd>2 of 3</dd></div><div><dt>Host</dt><dd>ip-10-0-4-91</dd></div></dl>\n<button type=\"button\" class=\"btn\">Copy span id</button></footer></section>\n</div>",
  "css": "\n.dz-aurora-console-trace { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px 28px 0; }\n.dz-aurora-console-trace .th { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 16px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-aurora-console-trace .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-trace .th h1 { font-family: var(--pv-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 0; }\n.dz-aurora-console-trace .th dl { display: flex; gap: 26px; margin: 0; }\n.dz-aurora-console-trace .th dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 4px; }\n.dz-aurora-console-trace .th dd { margin: 0; font-family: var(--pv-mono); font-size: 15px; }\n.dz-aurora-console-trace .err { color: var(--destructive); }\n.dz-aurora-console-trace .ru { display: grid; grid-template-columns: 320px repeat(4, 1fr) 60px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); font-family: var(--pv-mono); padding: 12px 0 6px; position: sticky; top: 0; background: var(--background); }\n.dz-aurora-console-trace .ru span:first-child { grid-column: 2; }\n.dz-aurora-console-trace .wf { list-style: none; margin: 0; padding: 0; }\n.dz-aurora-console-trace .wf li { display: grid; grid-template-columns: 320px minmax(0, 1fr) 60px; align-items: center; gap: 14px; padding: 7px 0; border-bottom: var(--pv-bw) solid color-mix(in srgb, var(--border) 55%, transparent); transition: background var(--dur-fast) var(--ease); }\n.dz-aurora-console-trace .wf li:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }\n.dz-aurora-console-trace .n { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dz-aurora-console-trace .wf li:first-child .n, .dz-aurora-console-trace .slow .n { color: var(--foreground); }\n.dz-aurora-console-trace .bar { height: 12px; border-radius: 3px; background: var(--primary); margin-left: var(--s); width: var(--w); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--primary) 60%, transparent); }\n.dz-aurora-console-trace .bar.a { background: var(--accent); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent) 60%, transparent); }\n.dz-aurora-console-trace .bar.e { background: var(--destructive); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--destructive) 70%, transparent); }\n.dz-aurora-console-trace .d { font-family: var(--pv-mono); font-size: 12px; text-align: right; color: var(--muted-foreground); font-feature-settings: \"tnum\" 1; }\n.dz-aurora-console-trace .slow .d { color: var(--foreground); }\n.dz-aurora-console-trace .dw { 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); margin: 18px 0 22px; padding: 14px 18px; display: flex; align-items: center; gap: 30px; }\n.dz-aurora-console-trace .dw b { display: block; font-family: var(--pv-mono); font-size: 15px; margin-top: 4px; }\n.dz-aurora-console-trace .dw dl { display: flex; gap: 26px; margin: 0; }\n.dz-aurora-console-trace .dw dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 4px; }\n.dz-aurora-console-trace .dw dd { margin: 0; font-family: var(--pv-mono); font-size: 13px; }\n.dz-aurora-console-trace .btn { font: inherit; font-size: 12.5px; margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 9px 15px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-aurora-console-trace *, .dz-aurora-console-trace *::before, .dz-aurora-console-trace *::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"
}