{
  "id": "aurora-console-explorer",
  "name": "Log Explorer",
  "theme": "aurora-console",
  "category": "Search & Browse",
  "description": "A log search where the facets are counts you can read and the result rows are dense enough that scanning beats filtering.",
  "layout": "A 260px facet column of count bars beside a full-height virtualised log list, with the query bar spanning both and a histogram strip welded under it.",
  "modules": [
    {
      "key": "query",
      "name": "Query bar",
      "html": "\n<div class=\"qb\"><span class=\"pr\">$</span><input type=\"text\" value=\"service:media-proc status:&gt;=500 duration:&gt;1s\" aria-label=\"Log query\"><button type=\"button\">Search</button><span class=\"m\">1,204 matches · 14.2s window</span></div>"
    },
    {
      "key": "histogram",
      "name": "Histogram",
      "html": "\n<div class=\"hg\" aria-label=\"Matches over time\">\n  <i style=\"--h:18%\"></i><i style=\"--h:24%\"></i><i style=\"--h:16%\"></i><i style=\"--h:32%\"></i><i style=\"--h:28%\"></i><i style=\"--h:44%\"></i><i style=\"--h:38%\"></i><i style=\"--h:62%\"></i><i style=\"--h:54%\"></i><i class=\"pk\" style=\"--h:100%\"></i><i style=\"--h:72%\"></i><i style=\"--h:46%\"></i><i style=\"--h:34%\"></i><i style=\"--h:28%\"></i><i style=\"--h:22%\"></i><i style=\"--h:19%\"></i><i style=\"--h:26%\"></i><i style=\"--h:15%\"></i>\n</div>"
    },
    {
      "key": "facets",
      "name": "Facets",
      "html": "\n<aside class=\"fc\">\n  <section><span class=\"k\">Service</span>\n    <ul><li><b>media-proc</b><span class=\"ct\">812</span><i style=\"--w:100%\"></i></li><li><b>checkout-api</b><span class=\"ct\">241</span><i style=\"--w:30%\"></i></li><li><b>ledger</b><span class=\"ct\">88</span><i style=\"--w:11%\"></i></li><li><b>notify</b><span class=\"ct\">63</span><i style=\"--w:8%\"></i></li></ul></section>\n  <section><span class=\"k\">Status</span>\n    <ul><li><b>503</b><span class=\"ct\">704</span><i style=\"--w:100%\"></i></li><li><b>500</b><span class=\"ct\">402</span><i style=\"--w:57%\"></i></li><li><b>502</b><span class=\"ct\">98</span><i style=\"--w:14%\"></i></li></ul></section>\n  <section><span class=\"k\">Region</span>\n    <ul><li><b>eu-west-1</b><span class=\"ct\">998</span><i style=\"--w:100%\"></i></li><li><b>us-east-1</b><span class=\"ct\">206</span><i style=\"--w:21%\"></i></li></ul></section>\n</aside>"
    },
    {
      "key": "rows",
      "name": "Log rows",
      "html": "\n<ol class=\"lg\">\n  <li class=\"e\"><span class=\"ts\">14:02:11.442</span><span class=\"sv\">503</span><span class=\"ms\">thumbnail worker pool exhausted after 3 attempts</span><span class=\"tg\">media-proc</span></li>\n  <li class=\"e\"><span class=\"ts\">14:02:11.390</span><span class=\"sv\">503</span><span class=\"ms\">queue depth 4,182 exceeds high-water mark 2,000</span><span class=\"tg\">media-proc</span></li>\n  <li><span class=\"ts\">14:02:10.118</span><span class=\"sv w\">499</span><span class=\"ms\">client closed connection while waiting on upstream</span><span class=\"tg\">edge</span></li>\n  <li class=\"e\"><span class=\"ts\">14:02:09.884</span><span class=\"sv\">500</span><span class=\"ms\">s3.put timed out after 30000ms bucket=media-eu</span><span class=\"tg\">media-proc</span></li>\n  <li><span class=\"ts\">14:02:08.201</span><span class=\"sv w\">429</span><span class=\"ms\">rate limit applied to tenant 8841 for 60s</span><span class=\"tg\">edge</span></li>\n  <li class=\"e\"><span class=\"ts\">14:02:07.663</span><span class=\"sv\">503</span><span class=\"ms\">thumbnail worker pool exhausted after 3 attempts</span><span class=\"tg\">media-proc</span></li>\n  <li><span class=\"ts\">14:02:06.005</span><span class=\"sv w\">408</span><span class=\"ms\">upstream read deadline exceeded on /internal/thumb</span><span class=\"tg\">checkout-api</span></li>\n</ol>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "aurora-console-explorer",
    "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-explorer.json",
  "structure": "A 260px facet column of count bars beside a full-height virtualised log list, with the query bar spanning both and a histogram strip welded under it.",
  "html": "<div class=\"dz dz-aurora-console-explorer\" data-design=\"aurora-console-explorer\" data-theme=\"aurora-console\">\n<section class=\"dz-mod\" data-mod=\"query\" aria-label=\"Query bar\">\n<div class=\"qb\"><span class=\"pr\">$</span><input type=\"text\" value=\"service:media-proc status:&gt;=500 duration:&gt;1s\" aria-label=\"Log query\"><button type=\"button\">Search</button><span class=\"m\">1,204 matches · 14.2s window</span></div></section><section class=\"dz-mod\" data-mod=\"histogram\" aria-label=\"Histogram\">\n<div class=\"hg\" aria-label=\"Matches over time\">\n  <i style=\"--h:18%\"></i><i style=\"--h:24%\"></i><i style=\"--h:16%\"></i><i style=\"--h:32%\"></i><i style=\"--h:28%\"></i><i style=\"--h:44%\"></i><i style=\"--h:38%\"></i><i style=\"--h:62%\"></i><i style=\"--h:54%\"></i><i class=\"pk\" style=\"--h:100%\"></i><i style=\"--h:72%\"></i><i style=\"--h:46%\"></i><i style=\"--h:34%\"></i><i style=\"--h:28%\"></i><i style=\"--h:22%\"></i><i style=\"--h:19%\"></i><i style=\"--h:26%\"></i><i style=\"--h:15%\"></i>\n</div></section><section class=\"dz-mod\" data-mod=\"facets\" aria-label=\"Facets\">\n<aside class=\"fc\">\n  <section><span class=\"k\">Service</span>\n    <ul><li><b>media-proc</b><span class=\"ct\">812</span><i style=\"--w:100%\"></i></li><li><b>checkout-api</b><span class=\"ct\">241</span><i style=\"--w:30%\"></i></li><li><b>ledger</b><span class=\"ct\">88</span><i style=\"--w:11%\"></i></li><li><b>notify</b><span class=\"ct\">63</span><i style=\"--w:8%\"></i></li></ul></section>\n  <section><span class=\"k\">Status</span>\n    <ul><li><b>503</b><span class=\"ct\">704</span><i style=\"--w:100%\"></i></li><li><b>500</b><span class=\"ct\">402</span><i style=\"--w:57%\"></i></li><li><b>502</b><span class=\"ct\">98</span><i style=\"--w:14%\"></i></li></ul></section>\n  <section><span class=\"k\">Region</span>\n    <ul><li><b>eu-west-1</b><span class=\"ct\">998</span><i style=\"--w:100%\"></i></li><li><b>us-east-1</b><span class=\"ct\">206</span><i style=\"--w:21%\"></i></li></ul></section>\n</aside></section><section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Log rows\">\n<ol class=\"lg\">\n  <li class=\"e\"><span class=\"ts\">14:02:11.442</span><span class=\"sv\">503</span><span class=\"ms\">thumbnail worker pool exhausted after 3 attempts</span><span class=\"tg\">media-proc</span></li>\n  <li class=\"e\"><span class=\"ts\">14:02:11.390</span><span class=\"sv\">503</span><span class=\"ms\">queue depth 4,182 exceeds high-water mark 2,000</span><span class=\"tg\">media-proc</span></li>\n  <li><span class=\"ts\">14:02:10.118</span><span class=\"sv w\">499</span><span class=\"ms\">client closed connection while waiting on upstream</span><span class=\"tg\">edge</span></li>\n  <li class=\"e\"><span class=\"ts\">14:02:09.884</span><span class=\"sv\">500</span><span class=\"ms\">s3.put timed out after 30000ms bucket=media-eu</span><span class=\"tg\">media-proc</span></li>\n  <li><span class=\"ts\">14:02:08.201</span><span class=\"sv w\">429</span><span class=\"ms\">rate limit applied to tenant 8841 for 60s</span><span class=\"tg\">edge</span></li>\n  <li class=\"e\"><span class=\"ts\">14:02:07.663</span><span class=\"sv\">503</span><span class=\"ms\">thumbnail worker pool exhausted after 3 attempts</span><span class=\"tg\">media-proc</span></li>\n  <li><span class=\"ts\">14:02:06.005</span><span class=\"sv w\">408</span><span class=\"ms\">upstream read deadline exceeded on /internal/thumb</span><span class=\"tg\">checkout-api</span></li>\n</ol></section>\n</div>",
  "css": "\n.dz-aurora-console-explorer { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 22px; padding: 0 26px 24px; }\n.dz-aurora-console-explorer .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-explorer .qb { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 16px 0 12px; }\n.dz-aurora-console-explorer .pr { font-family: var(--pv-mono); color: var(--accent); font-size: 14px; }\n.dz-aurora-console-explorer .qb input { flex: 1; font: inherit; font-family: var(--pv-mono); font-size: 13px; background: var(--card); color: var(--foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-md); padding: 11px 14px; }\n.dz-aurora-console-explorer .qb input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.dz-aurora-console-explorer .qb button { font: inherit; font-size: 12.5px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 11px 18px; cursor: pointer; }\n.dz-aurora-console-explorer .m { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-aurora-console-explorer .hg { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 3px; height: 56px; padding-bottom: 14px; border-bottom: var(--pv-bw) solid var(--border); margin-bottom: 16px; }\n.dz-aurora-console-explorer .hg i { flex: 1; height: var(--h); background: color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 2px 2px 0 0; transition: background var(--dur) var(--ease); }\n.dz-aurora-console-explorer .hg i:hover { background: var(--primary); }\n.dz-aurora-console-explorer .hg .pk { background: var(--destructive); }\n.dz-aurora-console-explorer .fc { display: flex; flex-direction: column; gap: 22px; }\n.dz-aurora-console-explorer .fc ul { list-style: none; margin: 8px 0 0; padding: 0; }\n.dz-aurora-console-explorer .fc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; padding: 6px 0; }\n.dz-aurora-console-explorer .fc b { font-size: 12.5px; font-weight: 500; }\n.dz-aurora-console-explorer .ct { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-aurora-console-explorer .fc i { grid-column: 1 / -1; height: 3px; width: var(--w); background: color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 2px; }\n.dz-aurora-console-explorer .lg { list-style: none; margin: 0; padding: 0; font-family: var(--pv-mono); }\n.dz-aurora-console-explorer .lg li { display: grid; grid-template-columns: 108px 44px minmax(0, 1fr) 106px; align-items: baseline; gap: 12px; padding: 8px 10px; border-bottom: var(--pv-bw) solid color-mix(in srgb, var(--border) 50%, transparent); font-size: 12px; transition: background var(--dur-fast) var(--ease); }\n.dz-aurora-console-explorer .lg li:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }\n.dz-aurora-console-explorer .ts { color: var(--muted-foreground); }\n.dz-aurora-console-explorer .sv { color: var(--destructive); font-weight: 600; }\n.dz-aurora-console-explorer .sv.w { color: var(--chart-3); }\n.dz-aurora-console-explorer .ms { color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dz-aurora-console-explorer .e .ms { color: var(--foreground); }\n.dz-aurora-console-explorer .tg { color: var(--accent); text-align: right; }\n@media (prefers-reduced-motion: reduce) { .dz-aurora-console-explorer *, .dz-aurora-console-explorer *::before, .dz-aurora-console-explorer *::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"
}