{
  "id": "aurora-console-shell",
  "name": "Query Workspace",
  "theme": "aurora-console",
  "category": "App Shell",
  "description": "A three-pane workspace where the query is the document: saved queries on the left, an editor above, results below, and nothing floating.",
  "layout": "A 220px collapsible rail, then a vertical split where the editor takes a fixed 190px and the result table takes whatever is left, with the run bar welded between them.",
  "modules": [
    {
      "key": "rail",
      "name": "Query rail",
      "html": "\n<aside class=\"rl\"><span class=\"k\">Saved</span>\n  <ul><li class=\"on\">p99 by route</li><li>5xx last hour</li><li>Cold starts</li><li>Queue depth</li><li>Cache hit ratio</li><li>Slow SQL</li></ul>\n  <span class=\"k\">Sources</span>\n  <ul class=\"src\"><li>metrics.prod</li><li>traces.prod</li><li>logs.edge</li></ul></aside>"
    },
    {
      "key": "editor",
      "name": "Query editor",
      "html": "\n<section class=\"ed\"><header><span class=\"k\">Query</span><span class=\"m\">metrics.prod · last 1h</span></header>\n<pre><code><span class=\"kw\">select</span> route, <span class=\"fn\">quantile</span>(0.99, latency_ms) <span class=\"kw\">as</span> p99\n<span class=\"kw\">from</span> requests\n<span class=\"kw\">where</span> ts &gt; now() - <span class=\"num\">1h</span> <span class=\"kw\">and</span> status &lt; <span class=\"num\">500</span>\n<span class=\"kw\">group by</span> route <span class=\"kw\">order by</span> p99 <span class=\"kw\">desc</span> <span class=\"kw\">limit</span> <span class=\"num\">8</span></code></pre></section>"
    },
    {
      "key": "runbar",
      "name": "Run bar",
      "html": "\n<div class=\"rb\"><button type=\"button\" class=\"go\">Run</button><span class=\"m\">31 ms · 8 rows · scanned 2.1M</span><span class=\"grow\"></span><button type=\"button\" class=\"gh\">Save</button><button type=\"button\" class=\"gh\">Share</button></div>"
    },
    {
      "key": "results",
      "name": "Result table",
      "html": "\n<section class=\"rs\"><table>\n  <thead><tr><th>Route</th><th class=\"r\">p99 ms</th><th class=\"r\">p50 ms</th><th class=\"r\">rps</th><th>Trend</th></tr></thead>\n  <tbody>\n    <tr><td>/v2/checkout</td><td class=\"r hi\">1284</td><td class=\"r\">212</td><td class=\"r\">184</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/media/upload</td><td class=\"r\">942</td><td class=\"r\">301</td><td class=\"r\">62</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/search</td><td class=\"r\">388</td><td class=\"r\">88</td><td class=\"r\">1204</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/cart</td><td class=\"r\">274</td><td class=\"r\">64</td><td class=\"r\">840</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/session</td><td class=\"r\">141</td><td class=\"r\">41</td><td class=\"r\">2210</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/health</td><td class=\"r\">18</td><td class=\"r\">6</td><td class=\"r\">60</td><td><span class=\"sp\"></span></td></tr>\n  </tbody></table></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "aurora-console-shell",
    "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-shell.json",
  "structure": "A 220px collapsible rail, then a vertical split where the editor takes a fixed 190px and the result table takes whatever is left, with the run bar welded between them.",
  "html": "<div class=\"dz dz-aurora-console-shell\" data-design=\"aurora-console-shell\" data-theme=\"aurora-console\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Query rail\">\n<aside class=\"rl\"><span class=\"k\">Saved</span>\n  <ul><li class=\"on\">p99 by route</li><li>5xx last hour</li><li>Cold starts</li><li>Queue depth</li><li>Cache hit ratio</li><li>Slow SQL</li></ul>\n  <span class=\"k\">Sources</span>\n  <ul class=\"src\"><li>metrics.prod</li><li>traces.prod</li><li>logs.edge</li></ul></aside></section><section class=\"dz-mod\" data-mod=\"editor\" aria-label=\"Query editor\">\n<section class=\"ed\"><header><span class=\"k\">Query</span><span class=\"m\">metrics.prod · last 1h</span></header>\n<pre><code><span class=\"kw\">select</span> route, <span class=\"fn\">quantile</span>(0.99, latency_ms) <span class=\"kw\">as</span> p99\n<span class=\"kw\">from</span> requests\n<span class=\"kw\">where</span> ts &gt; now() - <span class=\"num\">1h</span> <span class=\"kw\">and</span> status &lt; <span class=\"num\">500</span>\n<span class=\"kw\">group by</span> route <span class=\"kw\">order by</span> p99 <span class=\"kw\">desc</span> <span class=\"kw\">limit</span> <span class=\"num\">8</span></code></pre></section></section><section class=\"dz-mod\" data-mod=\"runbar\" aria-label=\"Run bar\">\n<div class=\"rb\"><button type=\"button\" class=\"go\">Run</button><span class=\"m\">31 ms · 8 rows · scanned 2.1M</span><span class=\"grow\"></span><button type=\"button\" class=\"gh\">Save</button><button type=\"button\" class=\"gh\">Share</button></div></section><section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Result table\">\n<section class=\"rs\"><table>\n  <thead><tr><th>Route</th><th class=\"r\">p99 ms</th><th class=\"r\">p50 ms</th><th class=\"r\">rps</th><th>Trend</th></tr></thead>\n  <tbody>\n    <tr><td>/v2/checkout</td><td class=\"r hi\">1284</td><td class=\"r\">212</td><td class=\"r\">184</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/media/upload</td><td class=\"r\">942</td><td class=\"r\">301</td><td class=\"r\">62</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/search</td><td class=\"r\">388</td><td class=\"r\">88</td><td class=\"r\">1204</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/cart</td><td class=\"r\">274</td><td class=\"r\">64</td><td class=\"r\">840</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/v2/session</td><td class=\"r\">141</td><td class=\"r\">41</td><td class=\"r\">2210</td><td><span class=\"sp\"></span></td></tr>\n    <tr><td>/health</td><td class=\"r\">18</td><td class=\"r\">6</td><td class=\"r\">60</td><td><span class=\"sp\"></span></td></tr>\n  </tbody></table></section></section>\n</div>",
  "css": "\n.dz-aurora-console-shell { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 190px auto minmax(0, 1fr); min-height: 560px; }\n.dz-aurora-console-shell .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-shell .rl { grid-row: 1 / 4; border-right: var(--pv-bw) solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; }\n.dz-aurora-console-shell .rl ul { list-style: none; margin: 0 0 14px; padding: 0; }\n.dz-aurora-console-shell .rl li { font-size: 13px; padding: 7px 9px; border-radius: var(--pv-radius-sm); color: var(--muted-foreground); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }\n.dz-aurora-console-shell .rl li:hover { background: var(--muted); color: var(--foreground); }\n.dz-aurora-console-shell .rl li.on { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--foreground); }\n.dz-aurora-console-shell .src li { font-family: var(--pv-mono); font-size: 11.5px; }\n.dz-aurora-console-shell .ed { padding: 16px 22px; border-bottom: var(--pv-bw) solid var(--border); overflow: hidden; }\n.dz-aurora-console-shell .ed header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }\n.dz-aurora-console-shell .m { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-aurora-console-shell .ed pre { margin: 0; font-family: var(--pv-mono); font-size: 13px; line-height: 1.72; color: var(--foreground); }\n.dz-aurora-console-shell .kw { color: var(--primary); } .dz-aurora-console-shell .fn { color: var(--accent); } .dz-aurora-console-shell .num { color: var(--chart-3); }\n.dz-aurora-console-shell .rb { display: flex; align-items: center; gap: 14px; padding: 10px 22px; border-bottom: var(--pv-bw) solid var(--border); background: var(--card); }\n.dz-aurora-console-shell .grow { flex: 1; }\n.dz-aurora-console-shell .go { font: inherit; font-size: 12.5px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 8px 18px; cursor: pointer; }\n.dz-aurora-console-shell .gh { font: inherit; font-size: 12.5px; background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 8px 14px; cursor: pointer; }\n.dz-aurora-console-shell .gh:hover { color: var(--foreground); border-color: var(--primary); }\n.dz-aurora-console-shell .rs { overflow: auto; padding: 0 22px 20px; }\n.dz-aurora-console-shell table { width: 100%; border-collapse: collapse; }\n.dz-aurora-console-shell th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); text-align: left; padding: 12px 10px; position: sticky; top: 0; background: var(--background); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-aurora-console-shell td { padding: 9px 10px; font-size: 13px; border-bottom: var(--pv-bw) solid color-mix(in srgb, var(--border) 55%, transparent); }\n.dz-aurora-console-shell .r { text-align: right; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; }\n.dz-aurora-console-shell .hi { color: var(--destructive); }\n.dz-aurora-console-shell .sp { display: block; height: 14px; width: 72px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--primary) 70%, transparent)); border-radius: 2px; }\n@media (prefers-reduced-motion: reduce) { .dz-aurora-console-shell *, .dz-aurora-console-shell *::before, .dz-aurora-console-shell *::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"
}