{
  "id": "terminal-ledger-pipeline",
  "name": "Pipeline Run",
  "theme": "terminal-ledger",
  "category": "Dashboard",
  "description": "A CI run drawn as a left-to-right chain of stages with the failing job expanded inline, because that is the only job anybody opened this page for.",
  "layout": "Horizontal stage chain across the full width joined by rules, then the failing stage expands beneath it into a job list and a tail of its own output.",
  "modules": [
    {
      "key": "meta",
      "name": "Run header",
      "html": "\n<header class=\"rh\"><span class=\"rh-id\">#4,118</span><span class=\"rh-b\">main</span><span class=\"rh-c\">a3f9c21</span><span class=\"rh-m\">fix(queue): rebalance on partition change</span><span class=\"rh-sp\"></span><span class=\"rh-s fail\">FAILED · 6m 12s</span></header>"
    },
    {
      "key": "chain",
      "name": "Stage chain",
      "html": "\n<div class=\"chain\">\n  <div class=\"stg ok\"><b>CHECKOUT</b><span>4s</span></div>\n  <div class=\"stg ok\"><b>INSTALL</b><span>1m 02s</span></div>\n  <div class=\"stg ok\"><b>LINT</b><span>18s</span></div>\n  <div class=\"stg ok\"><b>UNIT</b><span>2m 41s</span></div>\n  <div class=\"stg fail\"><b>INTEGRATION</b><span>2m 07s</span></div>\n  <div class=\"stg skip\"><b>BUILD</b><span>skipped</span></div>\n  <div class=\"stg skip\"><b>DEPLOY</b><span>skipped</span></div>\n</div>"
    },
    {
      "key": "jobs",
      "name": "Job list",
      "html": "\n<div class=\"jobs\">\n  <h2>INTEGRATION — 3 JOBS, 1 FAILED</h2>\n  <ul>\n    <li class=\"ok\"><span class=\"mk\">PASS</span><b>postgres-15</b><span class=\"d\">48s</span></li>\n    <li class=\"ok\"><span class=\"mk\">PASS</span><b>postgres-16</b><span class=\"d\">51s</span></li>\n    <li class=\"fail on\"><span class=\"mk\">FAIL</span><b>postgres-17</b><span class=\"d\">2m 07s</span></li>\n  </ul>\n</div>"
    },
    {
      "key": "tail",
      "name": "Output tail",
      "html": "\n<pre class=\"tail\"><code>  ✓ ingest/partition rebalance on add        (412ms)\n  ✓ ingest/partition rebalance on remove     (388ms)\n  ✗ ingest/consumer resumes from checkpoint\n\n    AssertionError: expected offset 41902, received 41618\n\n      at consumer.test.ts:114:7\n      at async runNext (runner.ts:88:5)\n\n  2 passing, 1 failing\n  exit status 1</code></pre>"
    },
    {
      "key": "acts",
      "name": "Run actions",
      "html": "\n<footer class=\"ra\"><button type=\"button\">RE-RUN FAILED</button><button type=\"button\">RE-RUN ALL</button><button type=\"button\">DOWNLOAD LOGS</button><span class=\"ra-sp\"></span><a href=\"#\">BLAME a3f9c21</a></footer>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "terminal-ledger-pipeline",
    "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-pipeline.json",
  "structure": "Horizontal stage chain across the full width joined by rules, then the failing stage expands beneath it into a job list and a tail of its own output.",
  "html": "<div class=\"dz dz-terminal-ledger-pipeline\" data-design=\"terminal-ledger-pipeline\" data-theme=\"terminal-ledger\">\n<section class=\"dz-mod\" data-mod=\"meta\" aria-label=\"Run header\">\n<header class=\"rh\"><span class=\"rh-id\">#4,118</span><span class=\"rh-b\">main</span><span class=\"rh-c\">a3f9c21</span><span class=\"rh-m\">fix(queue): rebalance on partition change</span><span class=\"rh-sp\"></span><span class=\"rh-s fail\">FAILED · 6m 12s</span></header></section>\n<section class=\"dz-mod\" data-mod=\"chain\" aria-label=\"Stage chain\">\n<div class=\"chain\">\n  <div class=\"stg ok\"><b>CHECKOUT</b><span>4s</span></div>\n  <div class=\"stg ok\"><b>INSTALL</b><span>1m 02s</span></div>\n  <div class=\"stg ok\"><b>LINT</b><span>18s</span></div>\n  <div class=\"stg ok\"><b>UNIT</b><span>2m 41s</span></div>\n  <div class=\"stg fail\"><b>INTEGRATION</b><span>2m 07s</span></div>\n  <div class=\"stg skip\"><b>BUILD</b><span>skipped</span></div>\n  <div class=\"stg skip\"><b>DEPLOY</b><span>skipped</span></div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"jobs\" aria-label=\"Job list\">\n<div class=\"jobs\">\n  <h2>INTEGRATION — 3 JOBS, 1 FAILED</h2>\n  <ul>\n    <li class=\"ok\"><span class=\"mk\">PASS</span><b>postgres-15</b><span class=\"d\">48s</span></li>\n    <li class=\"ok\"><span class=\"mk\">PASS</span><b>postgres-16</b><span class=\"d\">51s</span></li>\n    <li class=\"fail on\"><span class=\"mk\">FAIL</span><b>postgres-17</b><span class=\"d\">2m 07s</span></li>\n  </ul>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"tail\" aria-label=\"Output tail\">\n<pre class=\"tail\"><code>  ✓ ingest/partition rebalance on add        (412ms)\n  ✓ ingest/partition rebalance on remove     (388ms)\n  ✗ ingest/consumer resumes from checkpoint\n\n    AssertionError: expected offset 41902, received 41618\n\n      at consumer.test.ts:114:7\n      at async runNext (runner.ts:88:5)\n\n  2 passing, 1 failing\n  exit status 1</code></pre></section>\n<section class=\"dz-mod\" data-mod=\"acts\" aria-label=\"Run actions\">\n<footer class=\"ra\"><button type=\"button\">RE-RUN FAILED</button><button type=\"button\">RE-RUN ALL</button><button type=\"button\">DOWNLOAD LOGS</button><span class=\"ra-sp\"></span><a href=\"#\">BLAME a3f9c21</a></footer></section>\n</div>",
  "css": "\n.dz-terminal-ledger-pipeline { background: var(--background); color: var(--foreground); font-family: var(--pv-mono); font-size: 13px; display: flex; flex-direction: column; min-height: 500px; }\n.dz-terminal-ledger-pipeline .rh { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: var(--pv-bw) solid var(--border); font-size: 12.5px; }\n.dz-terminal-ledger-pipeline .rh-id { font-weight: 700; }\n.dz-terminal-ledger-pipeline .rh-b, .dz-terminal-ledger-pipeline .rh-c { color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); padding: 1px 7px; font-size: 11.5px; }\n.dz-terminal-ledger-pipeline .rh-m { color: var(--muted-foreground); }\n.dz-terminal-ledger-pipeline .rh-sp { flex: 1; }\n.dz-terminal-ledger-pipeline .rh-s { font-size: 11px; letter-spacing: .1em; padding: 3px 9px; }\n.dz-terminal-ledger-pipeline .fail { color: var(--destructive); }\n.dz-terminal-ledger-pipeline .ok { color: var(--chart-1); }\n.dz-terminal-ledger-pipeline .rh-s.fail { background: var(--destructive); color: var(--background); }\n.dz-terminal-ledger-pipeline .chain { display: flex; padding: 18px; gap: 0; }\n.dz-terminal-ledger-pipeline .stg { flex: 1; border: var(--pv-bw) solid var(--border); border-right: 0; padding: 10px 12px; }\n.dz-terminal-ledger-pipeline .stg:last-child { border-right: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-pipeline .stg b { display: block; font-size: 11px; letter-spacing: .1em; }\n.dz-terminal-ledger-pipeline .stg span { font-size: 11px; color: var(--muted-foreground); }\n.dz-terminal-ledger-pipeline .stg.ok { border-top: 2px solid var(--chart-1); }\n.dz-terminal-ledger-pipeline .stg.fail { border-top: 2px solid var(--destructive); background: var(--muted); }\n.dz-terminal-ledger-pipeline .stg.fail b { color: var(--destructive); }\n.dz-terminal-ledger-pipeline .stg.skip { opacity: .42; }\n.dz-terminal-ledger-pipeline .jobs { padding: 0 18px; }\n.dz-terminal-ledger-pipeline .jobs h2 { font-size: 11px; letter-spacing: .16em; margin: 0 0 6px; padding-bottom: 6px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-terminal-ledger-pipeline .jobs ul { list-style: none; margin: 0; padding: 0; }\n.dz-terminal-ledger-pipeline .jobs li { display: grid; grid-template-columns: 60px minmax(0, 1fr) 70px; gap: 12px; padding: 7px 8px 7px 0; border-bottom: var(--pv-bw) solid var(--border); transition: background var(--dur) var(--ease); }\n.dz-terminal-ledger-pipeline .jobs li:hover { background: var(--muted); }\n.dz-terminal-ledger-pipeline .jobs li.on { background: var(--muted); box-shadow: inset 2px 0 0 var(--destructive); padding-left: 8px; }\n.dz-terminal-ledger-pipeline .mk { font-size: 11px; letter-spacing: .1em; }\n.dz-terminal-ledger-pipeline .jobs .ok .mk { color: var(--chart-1); }\n.dz-terminal-ledger-pipeline .jobs .fail .mk { color: var(--destructive); }\n.dz-terminal-ledger-pipeline .d { color: var(--muted-foreground); text-align: right; font-size: 12px; }\n.dz-terminal-ledger-pipeline .tail { margin: 14px 18px 0; padding: 14px 16px; background: var(--muted); border-left: 2px solid var(--destructive); overflow-x: auto; font-size: 12px; line-height: 1.66; color: var(--muted-foreground); }\n.dz-terminal-ledger-pipeline .tail code { font-family: inherit; white-space: pre; }\n.dz-terminal-ledger-pipeline .ra { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 18px; border-top: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-pipeline .ra button { font: inherit; font-size: 11px; letter-spacing: .1em; padding: 7px 13px; border: var(--pv-bw) solid var(--border); background: var(--background); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-terminal-ledger-pipeline .ra button:hover { background: var(--foreground); color: var(--background); }\n.dz-terminal-ledger-pipeline .ra-sp { flex: 1; }\n.dz-terminal-ledger-pipeline .ra a { font-size: 11.5px; color: var(--primary); text-decoration: none; }\n@media (prefers-reduced-motion: reduce) { .dz-terminal-ledger-pipeline *, .dz-terminal-ledger-pipeline *::before, .dz-terminal-ledger-pipeline *::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"
}