{
  "id": "terminal-ledger-tokens",
  "name": "Access Tokens",
  "theme": "terminal-ledger",
  "category": "Settings & Forms",
  "description": "A token list where the scope is spelled out per token and the reveal-once panel is shown in the state it actually appears in.",
  "layout": "A one-time reveal block pinned at the top, then a token table whose scope column wraps to a second line rather than truncating, and a last-used column that names the caller.",
  "modules": [
    {
      "key": "reveal",
      "name": "One-time reveal",
      "html": "\n<div class=\"rv\">\n  <div class=\"rv-h\"><b>NEW TOKEN — SHOWN ONCE</b><button type=\"button\">COPY</button></div>\n  <code class=\"rv-t\">lgr_pat_7Qx4nR2vK8mYc1TzWb5JhF0sAeD3gU9p</code>\n  <p>This value is not stored. Close this panel and it is gone. If you lose it, revoke and issue a new one.</p>\n</div>"
    },
    {
      "key": "table",
      "name": "Token table",
      "html": "\n<div class=\"tw\">\n  <div class=\"tw-h\"><b>ACTIVE TOKENS</b><span>4 of 10</span><span class=\"tw-sp\"></span><button type=\"button\">NEW TOKEN</button></div>\n  <table>\n    <thead><tr><th scope=\"col\">NAME</th><th scope=\"col\">SCOPE</th><th scope=\"col\">LAST USED</th><th scope=\"col\">EXPIRES</th><th scope=\"col\"></th></tr></thead>\n    <tbody>\n      <tr><td><b>ci-deploy</b><em>lgr_pat_…9p</em></td><td class=\"sc\">topics:read topics:write<br>groups:read</td><td>4m ago<em>github-actions</em></td><td>in 82d</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n      <tr><td><b>grafana-ro</b><em>lgr_pat_…4k</em></td><td class=\"sc\">metrics:read</td><td>31s ago<em>10.2.40.11</em></td><td>never</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n      <tr class=\"stale\"><td><b>laptop-mokafor</b><em>lgr_pat_…c2</em></td><td class=\"sc\">topics:read groups:read<br>groups:write</td><td>114d ago<em>10.2.19.4</em></td><td>in 9d</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n      <tr><td><b>backup-runner</b><em>lgr_pat_…7t</em></td><td class=\"sc\">store:read store:write</td><td>2h ago<em>backup.internal</em></td><td>in 240d</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n    </tbody>\n  </table>\n</div>"
    },
    {
      "key": "policy",
      "name": "Policy notes",
      "html": "\n<footer class=\"pol\"><div><b>ROTATION</b><p>Tokens with write scope expire after 90 days and cannot be extended. Issue a new one and update the caller.</p></div><div><b>STALE</b><p>One token has not been used in 114 days. Unused write tokens are the cheapest thing you will ever revoke.</p></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "terminal-ledger-tokens",
    "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-tokens.json",
  "structure": "A one-time reveal block pinned at the top, then a token table whose scope column wraps to a second line rather than truncating, and a last-used column that names the caller.",
  "html": "<div class=\"dz dz-terminal-ledger-tokens\" data-design=\"terminal-ledger-tokens\" data-theme=\"terminal-ledger\">\n<section class=\"dz-mod\" data-mod=\"reveal\" aria-label=\"One-time reveal\">\n<div class=\"rv\">\n  <div class=\"rv-h\"><b>NEW TOKEN — SHOWN ONCE</b><button type=\"button\">COPY</button></div>\n  <code class=\"rv-t\">lgr_pat_7Qx4nR2vK8mYc1TzWb5JhF0sAeD3gU9p</code>\n  <p>This value is not stored. Close this panel and it is gone. If you lose it, revoke and issue a new one.</p>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Token table\">\n<div class=\"tw\">\n  <div class=\"tw-h\"><b>ACTIVE TOKENS</b><span>4 of 10</span><span class=\"tw-sp\"></span><button type=\"button\">NEW TOKEN</button></div>\n  <table>\n    <thead><tr><th scope=\"col\">NAME</th><th scope=\"col\">SCOPE</th><th scope=\"col\">LAST USED</th><th scope=\"col\">EXPIRES</th><th scope=\"col\"></th></tr></thead>\n    <tbody>\n      <tr><td><b>ci-deploy</b><em>lgr_pat_…9p</em></td><td class=\"sc\">topics:read topics:write<br>groups:read</td><td>4m ago<em>github-actions</em></td><td>in 82d</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n      <tr><td><b>grafana-ro</b><em>lgr_pat_…4k</em></td><td class=\"sc\">metrics:read</td><td>31s ago<em>10.2.40.11</em></td><td>never</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n      <tr class=\"stale\"><td><b>laptop-mokafor</b><em>lgr_pat_…c2</em></td><td class=\"sc\">topics:read groups:read<br>groups:write</td><td>114d ago<em>10.2.19.4</em></td><td>in 9d</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n      <tr><td><b>backup-runner</b><em>lgr_pat_…7t</em></td><td class=\"sc\">store:read store:write</td><td>2h ago<em>backup.internal</em></td><td>in 240d</td><td class=\"r\"><button type=\"button\">REVOKE</button></td></tr>\n    </tbody>\n  </table>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"policy\" aria-label=\"Policy notes\">\n<footer class=\"pol\"><div><b>ROTATION</b><p>Tokens with write scope expire after 90 days and cannot be extended. Issue a new one and update the caller.</p></div><div><b>STALE</b><p>One token has not been used in 114 days. Unused write tokens are the cheapest thing you will ever revoke.</p></div></footer></section>\n</div>",
  "css": "\n.dz-terminal-ledger-tokens { background: var(--background); color: var(--foreground); font-family: var(--pv-mono); font-size: 12.5px; padding: 16px 18px 20px; }\n.dz-terminal-ledger-tokens .rv { border: var(--pv-bw) solid var(--chart-1); border-left-width: 2px; padding: 12px 14px; margin-bottom: 20px; }\n.dz-terminal-ledger-tokens .rv-h { display: flex; justify-content: space-between; align-items: center; }\n.dz-terminal-ledger-tokens .rv b { font-size: 11px; letter-spacing: .12em; color: var(--chart-1); }\n.dz-terminal-ledger-tokens .rv button { font: inherit; font-size: 10.5px; letter-spacing: .08em; padding: 4px 12px; border: var(--pv-bw) solid var(--chart-1); background: var(--background); color: var(--chart-1); cursor: pointer; }\n.dz-terminal-ledger-tokens .rv-t { display: block; margin: 10px 0 8px; padding: 9px 11px; background: var(--muted); font-family: inherit; font-size: 13px; word-break: break-all; }\n.dz-terminal-ledger-tokens .rv p { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-terminal-ledger-tokens .tw-h { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-terminal-ledger-tokens .tw-h b { font-size: 11px; letter-spacing: .14em; }\n.dz-terminal-ledger-tokens .tw-h span { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-terminal-ledger-tokens .tw-sp { flex: 1; }\n.dz-terminal-ledger-tokens .tw-h button { font: inherit; font-size: 10.5px; letter-spacing: .1em; padding: 5px 13px; border: var(--pv-bw) solid var(--foreground); background: var(--foreground); color: var(--background); cursor: pointer; }\n.dz-terminal-ledger-tokens table { width: 100%; border-collapse: collapse; }\n.dz-terminal-ledger-tokens th { text-align: left; font-size: 10px; letter-spacing: .12em; color: var(--muted-foreground); font-weight: 400; padding: 9px 12px 9px 0; }\n.dz-terminal-ledger-tokens td { padding: 11px 12px 11px 0; border-bottom: var(--pv-bw) solid var(--border); vertical-align: top; font-size: 12px; }\n.dz-terminal-ledger-tokens tbody tr { transition: background var(--dur) var(--ease); }\n.dz-terminal-ledger-tokens tbody tr:hover td { background: var(--muted); }\n.dz-terminal-ledger-tokens td b { display: block; font-weight: 400; color: var(--primary); }\n.dz-terminal-ledger-tokens td em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted-foreground); margin-top: 2px; }\n.dz-terminal-ledger-tokens .sc { color: var(--muted-foreground); line-height: 1.5; }\n.dz-terminal-ledger-tokens .stale td { color: var(--chart-4); }\n.dz-terminal-ledger-tokens .stale .sc { color: var(--chart-4); }\n.dz-terminal-ledger-tokens .r { text-align: right; }\n.dz-terminal-ledger-tokens .r button { font: inherit; font-size: 10px; letter-spacing: .08em; padding: 4px 9px; border: var(--pv-bw) solid var(--border); background: var(--background); color: var(--muted-foreground); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-terminal-ledger-tokens .r button:hover { color: var(--destructive); border-color: var(--destructive); }\n.dz-terminal-ledger-tokens .pol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 18px; padding-top: 14px; border-top: var(--pv-bw) solid var(--border); }\n.dz-terminal-ledger-tokens .pol b { font-size: 10.5px; letter-spacing: .14em; color: var(--primary); }\n.dz-terminal-ledger-tokens .pol p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-terminal-ledger-tokens *, .dz-terminal-ledger-tokens *::before, .dz-terminal-ledger-tokens *::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"
}