{
  "id": "terminal-ledger-console",
  "name": "Command Console",
  "theme": "terminal-ledger",
  "category": "App Shell",
  "description": "A web console with real command history, where the last output stays pinned above the prompt and completions appear inline rather than in a popup.",
  "layout": "Full-height single column: scrollback fills the space, a completion strip sits directly above the prompt line, and the prompt is always the last row.",
  "modules": [
    {
      "key": "top",
      "name": "Session bar",
      "html": "\n<header class=\"sb\"><span class=\"sb-h\">ledger@prod-eu-west-1</span><span class=\"sb-sp\"></span><span class=\"sb-i\">ro</span><span class=\"sb-i\">mfa 07:12</span><button type=\"button\">DISCONNECT</button></header>"
    },
    {
      "key": "scroll",
      "name": "Scrollback",
      "html": "\n<div class=\"sc\">\n  <div class=\"cmd\"><span class=\"ps\">$</span> ledger topic describe queue.ingest</div>\n  <pre class=\"out\">NAME             PARTITIONS  REPLICAS  RETENTION  LAG\nqueue.ingest     12          3         168h       4,201,882</pre>\n  <div class=\"cmd\"><span class=\"ps\">$</span> ledger group members ingest-workers</div>\n  <pre class=\"out\">ID      HOST              STATE          LAST HEARTBEAT\n1a04    ip-10-2-14-88     STABLE         0.4s ago\n3c81    ip-10-2-19-12     STABLE         0.6s ago\n7f2a    ip-10-2-21-40     <span class=\"bad\">UNRESPONSIVE</span>   142.8s ago\nb0d3    ip-10-2-11-05     STABLE         0.3s ago</pre>\n  <div class=\"cmd\"><span class=\"ps\">$</span> ledger group evict ingest-workers 7f2a --dry-run</div>\n  <pre class=\"out\"><span class=\"warn\">DRY RUN</span> would evict member 7f2a and trigger rebalance across 4 members\nestimated rebalance duration 8–12s\nno data loss expected; 3 partitions would move</pre>\n</div>"
    },
    {
      "key": "prompt",
      "name": "Prompt line",
      "html": "\n<div class=\"pw\">\n  <div class=\"comp\"><span class=\"c on\">--dry-run</span><span class=\"c\">--force</span><span class=\"c\">--timeout=</span><span class=\"c\">--wait</span><span class=\"c-h\">tab to cycle · enter to accept</span></div>\n  <div class=\"pl\"><span class=\"ps\">$</span><input type=\"text\" value=\"ledger group evict ingest-workers 7f2a --\" aria-label=\"Command\"><span class=\"car\"></span></div>\n</div>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "terminal-ledger-console",
    "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-console.json",
  "structure": "Full-height single column: scrollback fills the space, a completion strip sits directly above the prompt line, and the prompt is always the last row.",
  "html": "<div class=\"dz dz-terminal-ledger-console\" data-design=\"terminal-ledger-console\" data-theme=\"terminal-ledger\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Session bar\">\n<header class=\"sb\"><span class=\"sb-h\">ledger@prod-eu-west-1</span><span class=\"sb-sp\"></span><span class=\"sb-i\">ro</span><span class=\"sb-i\">mfa 07:12</span><button type=\"button\">DISCONNECT</button></header></section>\n<section class=\"dz-mod\" data-mod=\"scroll\" aria-label=\"Scrollback\">\n<div class=\"sc\">\n  <div class=\"cmd\"><span class=\"ps\">$</span> ledger topic describe queue.ingest</div>\n  <pre class=\"out\">NAME             PARTITIONS  REPLICAS  RETENTION  LAG\nqueue.ingest     12          3         168h       4,201,882</pre>\n  <div class=\"cmd\"><span class=\"ps\">$</span> ledger group members ingest-workers</div>\n  <pre class=\"out\">ID      HOST              STATE          LAST HEARTBEAT\n1a04    ip-10-2-14-88     STABLE         0.4s ago\n3c81    ip-10-2-19-12     STABLE         0.6s ago\n7f2a    ip-10-2-21-40     <span class=\"bad\">UNRESPONSIVE</span>   142.8s ago\nb0d3    ip-10-2-11-05     STABLE         0.3s ago</pre>\n  <div class=\"cmd\"><span class=\"ps\">$</span> ledger group evict ingest-workers 7f2a --dry-run</div>\n  <pre class=\"out\"><span class=\"warn\">DRY RUN</span> would evict member 7f2a and trigger rebalance across 4 members\nestimated rebalance duration 8–12s\nno data loss expected; 3 partitions would move</pre>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"prompt\" aria-label=\"Prompt line\">\n<div class=\"pw\">\n  <div class=\"comp\"><span class=\"c on\">--dry-run</span><span class=\"c\">--force</span><span class=\"c\">--timeout=</span><span class=\"c\">--wait</span><span class=\"c-h\">tab to cycle · enter to accept</span></div>\n  <div class=\"pl\"><span class=\"ps\">$</span><input type=\"text\" value=\"ledger group evict ingest-workers 7f2a --\" aria-label=\"Command\"><span class=\"car\"></span></div>\n</div></section>\n</div>",
  "css": "\n.dz-terminal-ledger-console { background: var(--background); color: var(--foreground); font-family: var(--pv-mono); font-size: 12.5px; display: flex; flex-direction: column; min-height: 520px; }\n.dz-terminal-ledger-console .sb { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: var(--pv-bw) solid var(--border); font-size: 11.5px; }\n.dz-terminal-ledger-console .sb-h { color: var(--primary); }\n.dz-terminal-ledger-console .sb-sp { flex: 1; }\n.dz-terminal-ledger-console .sb-i { font-size: 10.5px; letter-spacing: .08em; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); padding: 1px 7px; }\n.dz-terminal-ledger-console .sb button { font: inherit; font-size: 10.5px; letter-spacing: .1em; padding: 4px 10px; border: var(--pv-bw) solid var(--destructive); background: var(--background); color: var(--destructive); cursor: pointer; }\n.dz-terminal-ledger-console .sc { flex: 1; overflow-y: auto; padding: 12px 14px; }\n.dz-terminal-ledger-console .cmd { padding: 7px 0 4px; }\n.dz-terminal-ledger-console .ps { color: var(--chart-1); margin-right: 8px; }\n.dz-terminal-ledger-console .out { margin: 0 0 6px; padding: 0 0 0 20px; white-space: pre; overflow-x: auto; color: var(--muted-foreground); line-height: 1.62; font-family: inherit; }\n.dz-terminal-ledger-console .out .bad { color: var(--destructive); }\n.dz-terminal-ledger-console .out .warn { color: var(--chart-4); }\n.dz-terminal-ledger-console .pw { border-top: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-console .comp { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-bottom: var(--pv-bw) solid var(--border); background: var(--muted); }\n.dz-terminal-ledger-console .c { font-size: 11.5px; padding: 2px 8px; border: var(--pv-bw) solid var(--border); color: var(--muted-foreground); }\n.dz-terminal-ledger-console .c.on { background: var(--foreground); color: var(--background); border-color: var(--foreground); }\n.dz-terminal-ledger-console .c-h { margin-left: auto; font-size: 10.5px; color: var(--muted-foreground); }\n.dz-terminal-ledger-console .pl { display: flex; align-items: center; padding: 10px 14px; }\n.dz-terminal-ledger-console .pl input { flex: 1; min-width: 0; font: inherit; font-size: 13px; border: 0; background: none; color: var(--foreground); padding: 0; }\n.dz-terminal-ledger-console .pl input:focus-visible { outline: none; }\n.dz-terminal-ledger-console .car { width: 8px; height: 15px; background: var(--chart-1); animation: dz-tl-console-caret 1s steps(1, end) infinite; }\n@keyframes dz-tl-console-caret { 50% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .dz-terminal-ledger-console *, .dz-terminal-ledger-console *::before, .dz-terminal-ledger-console *::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"
}