{
  "id": "terminal-ledger-log-stream",
  "name": "Log Stream",
  "theme": "terminal-ledger",
  "category": "Data & Reports",
  "description": "A live tail where the level filter is a row of toggles that shows its own count, and the timestamp column never moves.",
  "layout": "Fixed filter bar, then a virtual-feeling log body of fixed-width columns — time, level, source, message — with wrapping confined to the message column only.",
  "modules": [
    {
      "key": "filters",
      "name": "Level filters",
      "html": "\n<div class=\"lf\">\n  <button type=\"button\" class=\"lv-b on err\">ERROR <b>14</b></button>\n  <button type=\"button\" class=\"lv-b on warn\">WARN <b>106</b></button>\n  <button type=\"button\" class=\"lv-b on\">INFO <b>4,812</b></button>\n  <button type=\"button\" class=\"lv-b off\">DEBUG <b>91,004</b></button>\n  <span class=\"lf-sp\"></span>\n  <input type=\"search\" placeholder=\"grep…\" aria-label=\"Filter log lines\">\n  <button type=\"button\" class=\"pause\">▮▮ PAUSE</button>\n</div>"
    },
    {
      "key": "body",
      "name": "Log body",
      "html": "\n<div class=\"lb\">\n  <div class=\"ln err\"><span class=\"t\">14:02:11.402</span><span class=\"l\">ERROR</span><span class=\"s\">queue.ingest</span><span class=\"m\">consumer group rebalance timed out after 45000ms; member 7f2a did not respond</span></div>\n  <div class=\"ln warn\"><span class=\"t\">14:02:09.118</span><span class=\"l\">WARN</span><span class=\"s\">queue.ingest</span><span class=\"m\">lag 4,201,882 messages on partition 11, threshold is 500000</span></div>\n  <div class=\"ln\"><span class=\"t\">14:02:08.900</span><span class=\"l\">INFO</span><span class=\"s\">queue.ingest</span><span class=\"m\">partition assignment changed: 11 added, 4 removed</span></div>\n  <div class=\"ln\"><span class=\"t\">14:02:04.771</span><span class=\"l\">INFO</span><span class=\"s\">api.core</span><span class=\"m\">GET /v2/records 200 in 38ms</span></div>\n  <div class=\"ln warn\"><span class=\"t\">14:01:58.203</span><span class=\"l\">WARN</span><span class=\"s\">api.core</span><span class=\"m\">upstream queue.ingest p99 38.4s exceeds budget 2.0s, shedding non-critical writes</span></div>\n  <div class=\"ln\"><span class=\"t\">14:01:55.010</span><span class=\"l\">INFO</span><span class=\"s\">auth.idp</span><span class=\"m\">token issued sub=u_88213 aud=api.core ttl=3600</span></div>\n  <div class=\"ln err\"><span class=\"t\">14:01:52.664</span><span class=\"l\">ERROR</span><span class=\"s\">queue.ingest</span><span class=\"m\">checkpoint write failed: connection reset by peer (attempt 3 of 3)</span></div>\n  <div class=\"ln\"><span class=\"t\">14:01:51.339</span><span class=\"l\">INFO</span><span class=\"s\">store.blob</span><span class=\"m\">compaction segment 4188 complete, reclaimed 1.2GiB</span></div>\n</div>"
    },
    {
      "key": "status",
      "name": "Stream status",
      "html": "\n<footer class=\"ls\"><span class=\"dot\"></span><span>STREAMING</span><span class=\"ls-sp\"></span><span>96,936 lines buffered</span><span>retention 7d</span><a href=\"#\">EXPORT RANGE</a></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "terminal-ledger-log-stream",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:41:55+09:00",
    "updatedAt": "2026-08-29T18:41:55+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/terminal-ledger-log-stream.json",
  "structure": "Fixed filter bar, then a virtual-feeling log body of fixed-width columns — time, level, source, message — with wrapping confined to the message column only.",
  "html": "<div class=\"dz dz-terminal-ledger-log-stream\" data-design=\"terminal-ledger-log-stream\" data-theme=\"terminal-ledger\">\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Level filters\">\n<div class=\"lf\">\n  <button type=\"button\" class=\"lv-b on err\">ERROR <b>14</b></button>\n  <button type=\"button\" class=\"lv-b on warn\">WARN <b>106</b></button>\n  <button type=\"button\" class=\"lv-b on\">INFO <b>4,812</b></button>\n  <button type=\"button\" class=\"lv-b off\">DEBUG <b>91,004</b></button>\n  <span class=\"lf-sp\"></span>\n  <input type=\"search\" placeholder=\"grep…\" aria-label=\"Filter log lines\">\n  <button type=\"button\" class=\"pause\">▮▮ PAUSE</button>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Log body\">\n<div class=\"lb\">\n  <div class=\"ln err\"><span class=\"t\">14:02:11.402</span><span class=\"l\">ERROR</span><span class=\"s\">queue.ingest</span><span class=\"m\">consumer group rebalance timed out after 45000ms; member 7f2a did not respond</span></div>\n  <div class=\"ln warn\"><span class=\"t\">14:02:09.118</span><span class=\"l\">WARN</span><span class=\"s\">queue.ingest</span><span class=\"m\">lag 4,201,882 messages on partition 11, threshold is 500000</span></div>\n  <div class=\"ln\"><span class=\"t\">14:02:08.900</span><span class=\"l\">INFO</span><span class=\"s\">queue.ingest</span><span class=\"m\">partition assignment changed: 11 added, 4 removed</span></div>\n  <div class=\"ln\"><span class=\"t\">14:02:04.771</span><span class=\"l\">INFO</span><span class=\"s\">api.core</span><span class=\"m\">GET /v2/records 200 in 38ms</span></div>\n  <div class=\"ln warn\"><span class=\"t\">14:01:58.203</span><span class=\"l\">WARN</span><span class=\"s\">api.core</span><span class=\"m\">upstream queue.ingest p99 38.4s exceeds budget 2.0s, shedding non-critical writes</span></div>\n  <div class=\"ln\"><span class=\"t\">14:01:55.010</span><span class=\"l\">INFO</span><span class=\"s\">auth.idp</span><span class=\"m\">token issued sub=u_88213 aud=api.core ttl=3600</span></div>\n  <div class=\"ln err\"><span class=\"t\">14:01:52.664</span><span class=\"l\">ERROR</span><span class=\"s\">queue.ingest</span><span class=\"m\">checkpoint write failed: connection reset by peer (attempt 3 of 3)</span></div>\n  <div class=\"ln\"><span class=\"t\">14:01:51.339</span><span class=\"l\">INFO</span><span class=\"s\">store.blob</span><span class=\"m\">compaction segment 4188 complete, reclaimed 1.2GiB</span></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"status\" aria-label=\"Stream status\">\n<footer class=\"ls\"><span class=\"dot\"></span><span>STREAMING</span><span class=\"ls-sp\"></span><span>96,936 lines buffered</span><span>retention 7d</span><a href=\"#\">EXPORT RANGE</a></footer></section>\n</div>",
  "css": "\n.dz-terminal-ledger-log-stream { background: var(--background); color: var(--foreground); font-family: var(--pv-mono); font-size: 12.5px; display: flex; flex-direction: column; min-height: 500px; }\n.dz-terminal-ledger-log-stream .lf { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-log-stream .lv-b { font: inherit; font-size: 11px; letter-spacing: .08em; padding: 5px 10px; border: var(--pv-bw) solid var(--border); background: var(--background); color: var(--muted-foreground); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-terminal-ledger-log-stream .lv-b b { font-weight: 400; opacity: .6; margin-left: 5px; }\n.dz-terminal-ledger-log-stream .lv-b.on { color: var(--foreground); border-color: var(--foreground); }\n.dz-terminal-ledger-log-stream .lv-b.on.err { color: var(--destructive); border-color: var(--destructive); }\n.dz-terminal-ledger-log-stream .lv-b.on.warn { color: var(--chart-4); border-color: var(--chart-4); }\n.dz-terminal-ledger-log-stream .lv-b.off { opacity: .45; }\n.dz-terminal-ledger-log-stream .lf-sp { flex: 1; }\n.dz-terminal-ledger-log-stream .lf input { font: inherit; font-size: 12px; padding: 5px 10px; width: 180px; border: var(--pv-bw) solid var(--input); background: var(--muted); color: var(--foreground); }\n.dz-terminal-ledger-log-stream .lf input:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }\n.dz-terminal-ledger-log-stream .pause { font: inherit; font-size: 11px; letter-spacing: .08em; padding: 5px 10px; border: var(--pv-bw) solid var(--border); background: var(--background); color: var(--foreground); cursor: pointer; }\n.dz-terminal-ledger-log-stream .lb { flex: 1; overflow-y: auto; }\n.dz-terminal-ledger-log-stream .ln { display: grid; grid-template-columns: 106px 54px 96px minmax(0, 1fr); gap: 12px; padding: 4px 14px; align-items: start; border-left: 2px solid transparent; transition: background var(--dur) var(--ease); }\n.dz-terminal-ledger-log-stream .ln:hover { background: var(--muted); }\n.dz-terminal-ledger-log-stream .ln.err { border-left-color: var(--destructive); }\n.dz-terminal-ledger-log-stream .ln.warn { border-left-color: var(--chart-4); }\n.dz-terminal-ledger-log-stream .t { color: var(--muted-foreground); }\n.dz-terminal-ledger-log-stream .l { font-size: 11px; letter-spacing: .06em; color: var(--muted-foreground); }\n.dz-terminal-ledger-log-stream .ln.err .l { color: var(--destructive); }\n.dz-terminal-ledger-log-stream .ln.warn .l { color: var(--chart-4); }\n.dz-terminal-ledger-log-stream .s { color: var(--primary); }\n.dz-terminal-ledger-log-stream .m { white-space: pre-wrap; word-break: break-word; }\n.dz-terminal-ledger-log-stream .ls { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: var(--pv-bw) solid var(--border); font-size: 11px; color: var(--muted-foreground); }\n.dz-terminal-ledger-log-stream .dot { width: 7px; height: 7px; background: var(--chart-1); }\n.dz-terminal-ledger-log-stream .ls-sp { flex: 1; }\n.dz-terminal-ledger-log-stream .ls a { color: var(--primary); text-decoration: none; }\n@media (prefers-reduced-motion: reduce) { .dz-terminal-ledger-log-stream *, .dz-terminal-ledger-log-stream *::before, .dz-terminal-ledger-log-stream *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/terminal-ledger.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}