super-backlog 1.3.0 → 1.3.2

package/dist/templates/dashboard.html

@@ -5,6 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>__PROJECT_NAME__ &middot; Project Dashboard</title>
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='42' fill='%235cc8ff'/%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">
 <style>
   :root {
     --bg:#0a0e16;
@@ -16,7 +19,7 @@
     --line-strong:#2c3b57;
     --text:#e8edf6;
     --muted:#8fa0ba;
-    --dim:#5d6d88;
+    --dim:#72839f;
     --accent:#5cc8ff;
     --accent-dim:#234257;
     --ok:#3ecf8e;
@@ -25,27 +28,59 @@
     --warn-bg:#33260f;
     --danger:#ff7a7a;
     --danger-bg:#331718;
-    --mono:"Cascadia Code",Consolas,"Courier New",monospace;
-  }
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter'), local('Inter-Regular');
-    font-weight: 400; font-style: normal;
-  }
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter Medium'), local('Inter-Medium');
-    font-weight: 500; font-style: normal;
-  }
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter SemiBold'), local('Inter-SemiBold');
-    font-weight: 600; font-style: normal;
+    --sans:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
+    --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
+    --ok-line:#2b5642;
+    --accent-bg:#10202e;
+    --accent-line:#274a63;
+    --warn-line:#5c4520;
+    --danger-line:#5c2c2c;
+    --backdrop:rgba(4,7,12,.65);
+    --tip-bg:rgba(13,19,32,.97);
+    --shadow-dialog:0 24px 80px rgba(0,0,0,.55);
+    --shadow-tip:0 10px 28px rgba(0,0,0,.5);
+    --glow-accent:rgba(92,200,255,.6);
+    --glow-warn:rgba(255,180,84,.25);
+    --glow-warn-soft:rgba(255,180,84,.3);
+    --focus-ring:rgba(92,200,255,.15);
+  }
+  :root[data-theme="light"] {
+    --bg:#f3f6fb;
+    --bg-glow-1: rgba(11,116,181,.05);
+    --bg-glow-2: rgba(23,122,78,.04);
+    --surface:#ffffff;
+    --surface-2:#e9eef7;
+    --line:#d7dfeb;
+    --line-strong:#b6c3d8;
+    --text:#17202f;
+    --muted:#4c5d77;
+    --dim:#5a6881;
+    --accent:#0a6ca8;
+    --accent-dim:#bcdcf0;
+    --ok:#16764b;
+    --ok-bg:#dff3e8;
+    --warn:#8a5a00;
+    --warn-bg:#fbecd2;
+    --danger:#b83a3a;
+    --danger-bg:#fbe3e3;
+    --ok-line:#9fd4b8;
+    --accent-bg:#e2f0f9;
+    --accent-line:#a8cfe6;
+    --warn-line:#e3c68e;
+    --danger-line:#eab5b5;
+    --backdrop:rgba(23,32,47,.45);
+    --tip-bg:rgba(255,255,255,.98);
+    --shadow-dialog:0 24px 80px rgba(23,32,47,.25);
+    --shadow-tip:0 10px 28px rgba(23,32,47,.18);
+    --glow-accent:rgba(11,116,181,.35);
+    --glow-warn:rgba(138,90,0,.2);
+    --glow-warn-soft:rgba(138,90,0,.25);
+    --focus-ring:rgba(11,116,181,.18);
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; }
   body {
-    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: var(--sans);
     background:
       radial-gradient(1100px 500px at 85% -10%, var(--bg-glow-1), transparent 60%),
       radial-gradient(900px 500px at -10% 30%, var(--bg-glow-2), transparent 55%),
@@ -66,8 +101,15 @@
 
   /* ---------- Sidebar ---------- */
   .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
-  .brand-glyph { color: var(--accent); font-size: .8rem; line-height: 1; text-shadow: 0 0 12px rgba(92,200,255,.6); }
+  .brand-glyph { color: var(--accent); font-size: .8rem; line-height: 1; text-shadow: 0 0 12px var(--glow-accent); }
   .brand b { font-size: .98rem; letter-spacing: .4px; overflow-wrap: anywhere; }
+  .theme-toggle {
+    margin-left: auto; width: 28px; height: 28px; border-radius: 50%;
+    font: inherit; font-size: .9rem; line-height: 1; cursor: pointer;
+    color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong);
+  }
+  .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
+  .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
   .kicker {
     color: var(--dim); font-size: .72rem; letter-spacing: 1.6px;
     text-transform: uppercase; margin-bottom: 22px;
@@ -88,10 +130,10 @@
     white-space: nowrap; cursor: pointer;
   }
   .pill .n { color: inherit; font-weight: 700; margin-right: 4px; }
-  .pill[data-tone="ok"] { color: var(--ok); border-color: #2b5642; background: var(--ok-bg); }
-  .pill[data-tone="accent"] { color: var(--accent); border-color: #274a63; background: #10202e; }
-  .pill[data-tone="warn"] { color: var(--warn); border-color: #5c4520; background: var(--warn-bg); }
-  .pill[data-tone="danger"] { color: var(--danger); border-color: #5c2c2c; background: var(--danger-bg); }
+  .pill[data-tone="ok"] { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
+  .pill[data-tone="accent"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-bg); }
+  .pill[data-tone="warn"] { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
+  .pill[data-tone="danger"] { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
   .pill:hover { filter: brightness(1.25); }
   .pill.active { outline: 2px solid var(--accent); outline-offset: 1px; }
   .pill-empty { color: var(--dim); font-size: .78rem; }
@@ -101,9 +143,9 @@
   .term:hover { color: var(--accent); border-color: var(--accent); }
   #sbl-tip {
     position: fixed; z-index: 70; max-width: 340px; padding: 8px 12px;
-    background: rgba(13,19,32,.97); border: 1px solid var(--line-strong); border-radius: 8px;
+    background: var(--tip-bg); border: 1px solid var(--line-strong); border-radius: 8px;
     font-size: .78rem; line-height: 1.45; color: var(--text);
-    box-shadow: 0 10px 28px rgba(0,0,0,.5); pointer-events: none;
+    box-shadow: var(--shadow-tip); pointer-events: none;
   }
 
   /* ---------- Detail panel ---------- */
@@ -112,10 +154,10 @@
     width: min(720px, 92vw); max-height: 85vh; overflow-y: auto; overflow-x: hidden; padding: 0;
     border: 1px solid var(--line-strong); border-radius: 14px;
     background: var(--surface); color: var(--text);
-    box-shadow: 0 24px 80px rgba(0,0,0,.55);
+    box-shadow: var(--shadow-dialog);
   }
   #task-dialog::backdrop {
-    background: rgba(4,7,12,.65);
+    background: var(--backdrop);
     backdrop-filter: blur(2px);
   }
   #task-dialog[open] { animation: sbl-dialog-in .18s ease-out; }
@@ -130,10 +172,10 @@
     display: none; flex-direction: column;
     border: 1px solid var(--line-strong); border-radius: 14px;
     background: var(--surface); color: var(--text);
-    box-shadow: 0 24px 80px rgba(0,0,0,.55);
+    box-shadow: var(--shadow-dialog);
   }
   #backlog-dialog[open] { display: flex; animation: sbl-dialog-in .18s ease-out; }
-  #backlog-dialog::backdrop { background: rgba(4,7,12,.65); backdrop-filter: blur(2px); }
+  #backlog-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
   @media (prefers-reduced-motion: reduce) {
     #backlog-dialog[open] { animation: none; }
   }
@@ -164,10 +206,10 @@
   }
   .detail-id { font-family: var(--mono); color: var(--accent); font-weight: 700; }
   .status-chip { font-family: var(--mono); font-size: .68rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
-  .status-chip[data-tone="ok"] { color: var(--ok); border-color: #2b5642; background: var(--ok-bg); }
-  .status-chip[data-tone="accent"] { color: var(--accent); border-color: #274a63; background: #10202e; }
-  .status-chip[data-tone="warn"] { color: var(--warn); border-color: #5c4520; background: var(--warn-bg); }
-  .status-chip[data-tone="danger"] { color: var(--danger); border-color: #5c2c2c; background: var(--danger-bg); }
+  .status-chip[data-tone="ok"] { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
+  .status-chip[data-tone="accent"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-bg); }
+  .status-chip[data-tone="warn"] { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
+  .status-chip[data-tone="danger"] { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
   .detail-close { margin-left: auto; background: none; border: none; color: var(--dim); font-size: 1.3rem; cursor: pointer; line-height: 1; }
   .detail-close:hover { color: var(--danger); }
   .detail-title { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; overflow-wrap: anywhere; }
@@ -197,7 +239,7 @@
   .detail-cmd { margin-top: 18px; }
   .dep-link {
     font-family: var(--mono); font-size: .74rem; padding: 2px 10px; border-radius: 999px;
-    border: 1px solid #274a63; background: #10202e; color: var(--accent); cursor: pointer;
+    border: 1px solid var(--accent-line); background: var(--accent-bg); color: var(--accent); cursor: pointer;
   }
   .dep-link:hover { filter: brightness(1.25); }
 
@@ -213,7 +255,7 @@
     background: linear-gradient(180deg, var(--accent), transparent 130%);
     -webkit-background-clip: text; background-clip: text; color: transparent;
   }
-  .sec-head h2 { font-size: 1.15rem; letter-spacing: .5px; }
+  .sec-head h2 { font-size: 1.15rem; letter-spacing: .5px; font-weight: 700; }
   .sec-head .tagline { color: var(--dim); font-size: .82rem; margin-left: auto; text-align: right; }
   .mount { min-height: 24px; }
 
@@ -228,12 +270,11 @@
   }
   .cmd-btn:hover { background: var(--surface-2); border-color: var(--accent); }
   .cmd-btn:active { transform: translateY(1px); }
-  .cmd-title { font-size: .95rem; font-weight: 600; color: var(--text); }
+  .cmd-title { font-size: .95rem; font-weight: 700; color: var(--text); }
   .cmd-btn:hover .cmd-title { color: var(--accent); }
   .cmd-line { font-family: var(--mono); font-size: .72rem; color: var(--dim); }
   .hint { color: var(--dim); font-size: .8rem; margin-top: 12px; }
   .drafts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
-  .drafts-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: .88rem; }
   code.inline {
     font-family: var(--mono); font-size: .85em;
     background: var(--surface-2); border: 1px solid var(--line);
@@ -246,7 +287,7 @@
     background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong);
     border-radius: 999px; padding: 7px 16px; min-width: 260px; font: inherit;
   }
-  input[type="search"]:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 2px rgba(92,200,255,.15); }
+  input[type="search"]:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 2px var(--focus-ring); }
   .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
   table { width: 100%; border-collapse: collapse; font-size: .89rem; }
   th, td { text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
@@ -262,7 +303,8 @@
   .task-row:hover td { background: var(--surface-2); }
   .cell-id { color: var(--accent); font-family: var(--mono); font-variant-numeric: tabular-nums; }
   .cell-title { font-weight: 400; white-space: normal; min-width: 220px; }
-  .cell-updated { font-family: var(--mono); color: var(--muted); }
+  .cell-updated { font-family: var(--mono); color: var(--muted); text-align: center; }
+  th[data-key="updated"] { text-align: center; }
 
   /* ---------- Footer ---------- */
   .footer {
@@ -281,6 +323,30 @@
   .legend-list li:hover { color: var(--text); }
   .legend-list .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
 
+  /* ---------- KPI tiles ---------- */
+  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
+  .kpi {
+    display: block; text-align: left; font: inherit; color: inherit; cursor: default;
+    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
+  }
+  .kpi-big { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
+  .kpi-cap { display: block; color: var(--dim); font-size: .66rem; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 4px; }
+  .kpi-sub { display: block; font-size: .78rem; color: var(--muted); margin-top: 8px; }
+  .kpi-sub[data-tone="ok"] { color: var(--ok); }
+  .kpi-sub[data-tone="danger"] { color: var(--danger); }
+  .kpi-link { font: inherit; background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font-family: var(--mono); font-size: .78rem; }
+  .kpi-link:hover { filter: brightness(1.25); }
+  .kpi-special-btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: none; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; cursor: pointer; }
+  .kpi-special-btn:hover { background: var(--surface-2); }
+  .kpi-special-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .kpi-special-btn[aria-pressed="true"] { background: var(--accent-bg); }
+  /* ---------- Aging strip ---------- */
+  .aging-lane-label { fill: var(--text); font-size: 12px; font-family: var(--mono); }
+  .aging-axis { fill: var(--dim); font-size: 10px; font-family: var(--mono); }
+  .aging-track { stroke: var(--line); }
+  .age-dot { cursor: pointer; }
+  .age-dot:hover { opacity: .8; }
+
   /* ---------- Milestone bars ---------- */
   .bars text { font-family: var(--mono); }
   .bar-label { fill: var(--text); font-size: 12.5px; }
@@ -289,16 +355,17 @@
   .bar-fill { fill: var(--accent); }
   .bar-fill.complete { fill: var(--ok); }
 
-  /* ---------- Sparkline ---------- */
-  .spark-line {
-    fill: none; stroke: var(--accent); stroke-width: 2;
-    stroke-linejoin: round; stroke-linecap: round;
-    filter: drop-shadow(0 0 6px rgba(92,200,255,.4));
-  }
-  .spark-area { fill: rgba(92,200,255,.09); stroke: none; }
-  .spark-dot { fill: var(--bg); stroke: var(--dim); stroke-width: 1; }
-  .spark-dot.nonzero { fill: var(--accent); stroke: var(--accent); }
-  .spark-axis { fill: var(--dim); font-size: 10px; font-family: var(--mono); }
+  /* ---------- Activity heatmap ---------- */
+  .hm-cell { cursor: pointer; }
+  .hm-cell:hover { stroke: var(--accent); stroke-width: 1; }
+  .hm-0 { fill: var(--surface-2); }
+  .hm-1 { fill: var(--accent); opacity: .3; }
+  .hm-2 { fill: var(--accent); opacity: .55; }
+  .hm-3 { fill: var(--accent); opacity: .8; }
+  .hm-4 { fill: var(--accent); }
+  .hm-axis { fill: var(--dim); font-size: 9px; font-family: var(--mono); }
+  #day-panel { margin-top: 16px; }
+  #day-panel h4 { font-family: var(--mono); }
 
   /* ---------- Pipeline stepper ---------- */
   .stepper { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; margin: 4px 0 6px; }
@@ -322,7 +389,7 @@
     border-radius: 50%; font-family: var(--mono); font-size: .9rem; font-weight: 700;
     background: var(--surface-2); border: 2px solid var(--line-strong); color: var(--muted);
   }
-  .step.gate .step-num { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); box-shadow: 0 0 14px rgba(255,180,84,.25); }
+  .step.gate .step-num { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); box-shadow: 0 0 14px var(--glow-warn); }
   .step-label {
     display: block; font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.3;
     overflow-wrap: break-word;
@@ -367,25 +434,18 @@
     color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn);
     border-radius: 999px; padding: 2px 9px; transition: box-shadow .15s ease;
   }
-  .update-badge:hover { box-shadow: 0 0 10px rgba(255,180,84,.3); }
+  .update-badge:hover { box-shadow: 0 0 10px var(--glow-warn-soft); }
   .update-badge:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
   .update-badge .cmd-title { font-size: inherit; font-weight: 600; color: inherit; }
-  .side-models {
-    display: block; margin: 4px 0 0; padding: 2px 0; cursor: pointer; text-align: left;
-    font: inherit; font-family: var(--mono); font-size: .78rem; color: var(--muted);
-    background: none; border: none;
-  }
-  .side-models:hover { color: var(--accent); }
-  .side-models:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
   /* ---------- Models modal ---------- */
   #models-dialog {
     width: min(560px, 92vw); max-height: 80vh; overflow-y: auto; overflow-x: hidden; padding: 0;
     border: 1px solid var(--line-strong); border-radius: 14px;
     background: var(--surface); color: var(--text);
-    box-shadow: 0 24px 80px rgba(0,0,0,.55);
+    box-shadow: var(--shadow-dialog);
   }
-  #models-dialog::backdrop { background: rgba(4,7,12,.65); backdrop-filter: blur(2px); }
+  #models-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
   #models-dialog[open] { animation: sbl-dialog-in .18s ease-out; }
   @media (prefers-reduced-motion: reduce) {
     #models-dialog[open] { animation: none; }
@@ -426,23 +486,35 @@
     main { padding: 24px 20px 40px; }
   }
 </style>
+<script>
+(function () {
+  var theme = null;
+  try { theme = localStorage.getItem('sbl-theme'); } catch (e) { theme = null; }
+  if (theme !== 'light' && theme !== 'dark') {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  }
+  document.documentElement.setAttribute('data-theme', theme);
+})();
+</script>
 </head>
 <body>
 <div class="layout">
 
 <aside class="sbl-side">
-  <div class="brand"><span class="brand-glyph">●</span><b>__PROJECT_NAME__</b></div>
+  <div class="brand"><span class="brand-glyph">●</span><b>__PROJECT_NAME__</b>
+    <button type="button" id="theme-toggle" class="theme-toggle" aria-label="Switch color theme">◐</button>
+  </div>
   <div class="kicker">SUPERPOWERS × BACKLOG.MD</div>
   <div class="side-version" id="side-version"><span>v__KIT_VERSION__</span></div>
-  <button type="button" id="models-btn" class="side-models">model router</button>
   <nav aria-label="Dashboard sections">
     <a href="#sec-01"><span class="n">01</span>Board &amp; Quick Actions</a>
     <a href="#sec-02"><span class="n">02</span>Status</a>
-    <a href="#sec-03"><span class="n">03</span>Milestones</a>
-    <a href="#sec-04"><span class="n">04</span>Tasks</a>
-    <a href="#sec-05"><span class="n">05</span>Feature Cycle</a>
-    <a href="#sec-06"><span class="n">06</span>Activity</a>
-    <a href="#sec-07"><span class="n">07</span>Decisions &amp; Docs</a>
+    <a href="#sec-03"><span class="n">03</span>Feature Cycle</a>
+    <a href="#sec-04"><span class="n">04</span>Milestones</a>
+    <a href="#sec-05"><span class="n">05</span>Drafts</a>
+    <a href="#sec-06"><span class="n">06</span>Tasks</a>
+    <a href="#sec-07"><span class="n">07</span>Activity</a>
+    <a href="#sec-08"><span class="n">08</span>Decisions &amp; Docs</a>
   </nav>
   <div class="legend">
     <h4>Status</h4>
@@ -459,27 +531,42 @@
   <div id="quickactions" class="mount">
     <div class="cmd-row" id="cmd-buttons">
       <button type="button" class="cmd-btn" id="backlog-btn"><span class="cmd-title">Backlog</span><span class="cmd-line">board &middot; tasks &middot; docs &middot; decisions</span></button>
+      <button type="button" class="cmd-btn" id="models-btn"><span class="cmd-title">Model Router</span><span class="cmd-line">workhorse &middot; budget &middot; tiers</span></button>
     </div>
     <p class="hint">Opens the Backlog.md browser in an overlay &mdash; served locally per project, started on demand.</p>
   </div>
-  <div id="drafts" class="mount">
-    <h3 class="sub-head">Drafts</h3>
-    <ul id="drafts-list" class="drafts-list"></ul>
-  </div>
 </section>
 
 <section id="sec-02">
-  <div class="sec-head"><span class="sec-num">02</span><h2>Status</h2><span class="tagline">tasks per status</span></div>
+  <div class="sec-head"><span class="sec-num">02</span><h2>Status</h2><span class="tagline">progress &middot; velocity &middot; wip &middot; age</span></div>
+  <div id="kpis" class="mount"></div>
   <div id="donut" class="mount"></div>
+  <h3 class="sub-head">Aging &mdash; open tasks by days in the backlog</h3>
+  <div id="aging" class="mount"></div>
 </section>
 
 <section id="sec-03">
-  <div class="sec-head"><span class="sec-num">03</span><h2>Milestones</h2><span class="tagline">done / total per <span class="term" data-term="Milestone">Milestone</span></span></div>
-  <div id="bars" class="mount"></div>
+  <div class="sec-head"><span class="sec-num">03</span><h2>Feature Cycle</h2><span class="tagline">idea &rarr; merge &middot; every <span class="term" data-term="Review Gate">Review Gate</span> included &middot; click a step for details</span></div>
+  <div id="stepper" class="mount"></div>
+  <div id="phase-detail" hidden></div>
+  <h3 class="sub-head">Flow</h3>
+  <div id="depgraph" class="mount"></div>
 </section>
 
 <section id="sec-04">
-  <div class="sec-head"><span class="sec-num">04</span><h2>Tasks</h2><span class="tagline">sort &middot; filter &middot; click row for details</span></div>
+  <div class="sec-head"><span class="sec-num">04</span><h2>Milestones</h2><span class="tagline">done / total per <span class="term" data-term="Milestone">Milestone</span></span></div>
+  <div id="bars" class="mount"></div>
+</section>
+
+<section id="sec-05">
+  <div class="sec-head"><span class="sec-num">05</span><h2>Drafts</h2><span class="tagline">ideas before they enter the backlog &middot; click a card for details</span></div>
+  <div id="drafts" class="mount">
+    <ul id="drafts-list" class="drafts-list"></ul>
+  </div>
+</section>
+
+<section id="sec-06">
+  <div class="sec-head"><span class="sec-num">06</span><h2>Tasks</h2><span class="tagline">sort &middot; filter &middot; click row for details</span></div>
   <div id="tasks" class="mount">
     <div class="toolbar">
       <input id="taskfilter" type="search" placeholder="Filter tasks&hellip;" aria-label="Filter tasks">
@@ -503,21 +590,15 @@
   </div>
 </section>
 
-<section id="sec-05">
-  <div class="sec-head"><span class="sec-num">05</span><h2>Feature Cycle</h2><span class="tagline">idea &rarr; merge &middot; every <span class="term" data-term="Review Gate">Review Gate</span> included &middot; click a step for details</span></div>
-  <div id="stepper" class="mount"></div>
-  <div id="phase-detail" hidden></div>
-  <h3 class="sub-head">Flow</h3>
-  <div id="depgraph" class="mount"></div>
-</section>
-
-<section id="sec-06">
-  <div class="sec-head"><span class="sec-num">06</span><h2>Activity</h2><span class="tagline">last 30 days</span></div>
-  <div id="spark" class="mount"></div>
+<section id="sec-07">
+  <div class="sec-head"><span class="sec-num">07</span><h2>Activity</h2><span class="tagline">last 26 weeks &middot; click a day for its tasks</span></div>
+  <div id="activity-kpis" class="mount"></div>
+  <div id="heatmap" class="mount"></div>
+  <div id="day-panel" class="flow-block" hidden></div>
 </section>
 
-<section id="sec-07">
-  <div class="sec-head"><span class="sec-num">07</span><h2>Decisions &amp; Docs</h2><span class="tagline">decisions &middot; docs &middot; glossary</span></div>
+<section id="sec-08">
+  <div class="sec-head"><span class="sec-num">08</span><h2>Decisions &amp; Docs</h2><span class="tagline">decisions &middot; docs &middot; glossary</span></div>
   <div id="docs" class="mount"></div>
   <p class="hint">The <span class="term" data-term="TDD">TDD</span> loop and the <span class="term" data-term="DoD">DoD</span> ship as built-in glossary terms &mdash; extend them via <code class="inline">backlog/docs/glossary.md</code>.</p>
 </section>
@@ -578,13 +659,13 @@
     var upd = el('button', 'update-badge');
     upd.type = 'button';
     upd.appendChild(el('span', 'cmd-title', 'v' + data.latestVersion + ' available'));
-    upd.setAttribute('data-tip', 'Update: npm i -g super-backlog (click to copy)');
+    upd.setAttribute('data-tip', 'Update: run sbl update (click copies npm i -g super-backlog)');
     upd.addEventListener('click', function () { copyCommand(upd, 'npm i -g super-backlog'); });
     sideVersion.appendChild(upd);
   }
 
   var KEYS = ['id', 'title', 'status', 'milestone', 'priority', 'assignee', 'updated'];
-  var state = { key: 'id', dir: 1, query: '', status: null, hoverStatus: null };
+  var state = { key: 'id', dir: 1, query: '', status: null, hoverStatus: null, special: null };
   function field(task, key) {
     var v = task[key];
     return v === undefined || v === null ? '' : String(v);
@@ -595,6 +676,8 @@
   function matches(task) {
     var eff = activeStatus();
     if (eff && field(task, 'status').toLowerCase() !== eff.toLowerCase()) return false;
+    if (state.special === 'wip' && !isWipStatus(task.status)) return false;
+    if (state.special === 'blocked' && !isBlockedTask(task)) return false;
     if (!state.query) return true;
     var hit = KEYS.some(function (k) {
       return field(task, k).toLowerCase().indexOf(state.query) !== -1;
@@ -603,13 +686,68 @@
       return ac.text.toLowerCase().indexOf(state.query) !== -1;
     });
   }
+  function isWipStatus(status) {
+    var s = String(status || '').toLowerCase();
+    return s.indexOf('progress') !== -1 || s.indexOf('review') !== -1;
+  }
+  function isBlockedTask(task) {
+    var s = String(task.status || '').toLowerCase();
+    if (isDoneStatus(task.status)) return false;
+    if (s.indexOf('block') !== -1) return true;
+    if (!depsOut) return false;
+    var blockers = depsOut[task.id] || [];
+    for (var i = 0; i < blockers.length; i++) {
+      var dep = findTask(blockers[i]);
+      if (dep && !isDoneStatus(dep.status)) return true;
+    }
+    return false;
+  }
+  function setSpecialFilter(kind) {
+    state.special = state.special === kind ? null : kind;
+    state.status = null;
+    document.querySelectorAll('#pills .pill').forEach(function (pill) { pill.classList.remove('active'); });
+    document.querySelectorAll('[data-special]').forEach(function (tile) {
+      tile.setAttribute('aria-pressed', String(state.special === tile.getAttribute('data-special')));
+    });
+    renderTasks();
+  }
   var tbody = $('#task-rows');
+  function compareTasks(a, b, key) {
+    if (key === 'updated') {
+      var ta = Date.parse(field(a, key)) || 0;
+      var tb = Date.parse(field(b, key)) || 0;
+      if (ta !== tb) return ta - tb;
+    }
+    return field(a, key).localeCompare(field(b, key), undefined, { numeric: true, sensitivity: 'base' });
+  }
+  var relFmt = window.Intl && Intl.RelativeTimeFormat ? new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' }) : null;
+  var exactFmt = window.Intl && Intl.DateTimeFormat ? new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }) : null;
+  var REL_UNITS = [['year', 31536000], ['month', 2592000], ['week', 604800], ['day', 86400], ['hour', 3600], ['minute', 60]];
+  function parseWhen(value) {
+    if (!value) return null;
+    /* date-only strings get a local noon so the day never shifts across timezones */
+    var t = Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value + 'T12:00:00' : value);
+    return isNaN(t) ? null : t;
+  }
+  function formatRelative(value) {
+    var t = parseWhen(value);
+    if (t === null || !relFmt) return value;
+    var diff = (t - Date.now()) / 1000;
+    for (var i = 0; i < REL_UNITS.length; i++) {
+      if (Math.abs(diff) >= REL_UNITS[i][1] || i === REL_UNITS.length - 1) {
+        return relFmt.format(Math.round(diff / REL_UNITS[i][1]), REL_UNITS[i][0]);
+      }
+    }
+    return value;
+  }
+  function formatExact(value) {
+    var t = parseWhen(value);
+    return t === null || !exactFmt ? '' : exactFmt.format(new Date(t));
+  }
   function renderTasks() {
     var rows = data.tasks
       .filter(matches)
-      .sort(function (a, b) {
-        return field(a, state.key).localeCompare(field(b, state.key)) * state.dir;
-      });
+      .sort(function (a, b) { return compareTasks(a, b, state.key) * state.dir; });
     tbody.textContent = '';
     if (rows.length === 0) {
       var emptyTr = el('tr');
@@ -623,7 +761,19 @@
       var tr = el('tr', 'task-row');
       tr.setAttribute('data-task', task.id);
       KEYS.forEach(function (k) {
-        tr.appendChild(el('td', 'cell-' + k, field(task, k)));
+        var td = el('td', 'cell-' + k);
+        if (k === 'status') {
+          var chip = el('span', 'status-chip', field(task, k));
+          chip.setAttribute('data-tone', toneOf(task.status));
+          td.appendChild(chip);
+        } else if (k === 'updated') {
+          td.textContent = formatRelative(field(task, k));
+          var exact = formatExact(field(task, k));
+          if (exact) td.setAttribute('data-tip', exact);
+        } else {
+          td.textContent = field(task, k);
+        }
+        tr.appendChild(td);
       });
       tr.addEventListener('click', function () { openDetail(task.id); });
       tbody.appendChild(tr);
@@ -657,9 +807,13 @@
   }
   function setStatusFilter(status) {
     state.status = status || null;
+    state.special = null;
     document.querySelectorAll('#pills .pill').forEach(function (pill) {
       pill.classList.toggle('active', !!state.status && pill.getAttribute('data-status') === state.status);
     });
+    document.querySelectorAll('[data-special]').forEach(function (tile) {
+      tile.setAttribute('aria-pressed', 'false');
+    });
     renderTasks();
   }
   document.querySelectorAll('#pills .pill').forEach(function (pill) {
@@ -719,6 +873,24 @@
     });
   }
 
+  /* ---------- Theme toggle ---------- */
+  var themeToggle = document.getElementById('theme-toggle');
+  function syncThemeToggle() {
+    if (!themeToggle) return;
+    var mode = document.documentElement.getAttribute('data-theme');
+    themeToggle.textContent = mode === 'light' ? '☾' : '☀';
+    themeToggle.setAttribute('aria-label', mode === 'light' ? 'Switch to dark theme' : 'Switch to light theme');
+  }
+  if (themeToggle) {
+    themeToggle.addEventListener('click', function () {
+      var next = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
+      document.documentElement.setAttribute('data-theme', next);
+      try { localStorage.setItem('sbl-theme', next); } catch (e) { /* private mode */ }
+      syncThemeToggle();
+    });
+    syncThemeToggle();
+  }
+
   /* ---------- Models modal ---------- */
   var modelsBtn = document.getElementById('models-btn');
   var modelsDialog = document.getElementById('models-dialog');
@@ -802,16 +974,6 @@
     });
   }
 
-  /* ---------- Drafts ---------- */
-  function renderDrafts(drafts) {
-    var list = document.getElementById('drafts-list');
-    if (!list) return;
-    list.textContent = '';
-    if (!drafts || drafts.length === 0) { list.appendChild(el('li', '', 'No drafts.')); return; }
-    drafts.forEach(function (d) { list.appendChild(el('li', '', d.id + ' \u2014 ' + d.title)); });
-  }
-  renderDrafts(data.drafts);
-
   /* ---------- Shared diagram helpers ---------- */
   var SVGNS = 'http://www.w3.org/2000/svg';
   var TONE_VAR = { ok: 'var(--ok)', accent: 'var(--accent)', warn: 'var(--warn)', danger: 'var(--danger)', dim: 'var(--dim)' };
@@ -896,6 +1058,123 @@
     mount.appendChild(wrap);
   }
 
+  var APPROX_TIP = 'Approximation from created/updated timestamps — Backlog.md keeps no status history.';
+  function kpiTile(opts) {
+    var node = el('div', 'kpi');
+    node.setAttribute('data-tip', APPROX_TIP);
+    node.appendChild(el('span', 'kpi-big', opts.big));
+    node.appendChild(el('span', 'kpi-cap', opts.cap));
+    if (opts.sub) {
+      var sub = el('span', 'kpi-sub', opts.sub);
+      if (opts.tone) sub.setAttribute('data-tone', opts.tone);
+      node.appendChild(sub);
+    }
+    return node;
+  }
+  function wipBlockedTile(k) {
+    var node = el('div', 'kpi');
+    node.setAttribute('data-tip', APPROX_TIP);
+    var wipBtn = el('button', 'kpi-special-btn');
+    wipBtn.type = 'button';
+    wipBtn.setAttribute('data-special', 'wip');
+    wipBtn.setAttribute('aria-pressed', 'false');
+    wipBtn.addEventListener('click', function () { setSpecialFilter('wip'); });
+    wipBtn.appendChild(el('span', 'kpi-big', String(k.wip)));
+    wipBtn.appendChild(el('span', 'kpi-cap', 'in progress'));
+    node.appendChild(wipBtn);
+    var blockedBtn = el('button', 'kpi-special-btn');
+    blockedBtn.type = 'button';
+    blockedBtn.setAttribute('data-special', 'blocked');
+    blockedBtn.setAttribute('aria-pressed', 'false');
+    blockedBtn.addEventListener('click', function () { setSpecialFilter('blocked'); });
+    var sub = el('span', 'kpi-sub', k.blocked + ' blocked · click to filter');
+    if (k.blocked > 0) sub.setAttribute('data-tone', 'danger');
+    blockedBtn.appendChild(sub);
+    node.appendChild(blockedBtn);
+    return node;
+  }
+  function renderKpis(mount, k) {
+    mount.textContent = '';
+    if (!k) return;
+    var grid = el('div', 'kpi-grid');
+    grid.appendChild(kpiTile({
+      big: k.progressPct + '%', cap: 'complete',
+      sub: k.done + ' / ' + k.total + ' done' + (k.forecastDate ? ' · at this pace done ~' + k.forecastDate : ''),
+    }));
+    var delta = k.velocity7 - k.velocityPrev7;
+    grid.appendChild(kpiTile({
+      big: String(k.velocity7), cap: 'done / last 7 days',
+      sub: delta === 0 ? '± 0 vs previous week' : (delta > 0 ? '▲ +' : '▼ ') + delta + ' vs previous week',
+      tone: delta > 0 ? 'ok' : delta < 0 ? 'danger' : undefined,
+    }));
+    grid.appendChild(wipBlockedTile(k));
+    var age = kpiTile({
+      big: k.oldestOpenDays === null ? '—' : k.oldestOpenDays + 'd', cap: 'oldest open task',
+      sub: k.medianOpenAgeDays === null ? '' : 'median ' + k.medianOpenAgeDays + 'd open',
+    });
+    if (k.oldestOpenId) {
+      var link = el('button', 'kpi-link', k.oldestOpenId);
+      link.type = 'button';
+      link.addEventListener('click', function () { openDetail(k.oldestOpenId); });
+      age.appendChild(link);
+    }
+    grid.appendChild(age);
+    mount.appendChild(grid);
+  }
+  function ageInDays(task) {
+    var raw = task.created || task.updated;
+    if (!raw) return null;
+    var t = Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(raw) ? raw + 'T12:00:00' : raw);
+    if (isNaN(t)) return null;
+    return Math.max(0, Math.round((Date.now() - t) / 86400000));
+  }
+  var STALE_DAYS = 14;
+  function renderAging(mount, tasks) {
+    mount.textContent = '';
+    var lanes = [];
+    var byStatus = {};
+    tasks.forEach(function (t) {
+      if (isDoneStatus(t.status)) return;
+      var days = ageInDays(t);
+      if (days === null) return;
+      if (!byStatus[t.status]) { byStatus[t.status] = []; lanes.push(t.status); }
+      byStatus[t.status].push({ task: t, days: days });
+    });
+    if (lanes.length === 0) {
+      mount.appendChild(el('p', 'hint', 'No datable open tasks.'));
+      return;
+    }
+    var maxDays = 1;
+    lanes.forEach(function (s) { byStatus[s].forEach(function (e) { if (e.days > maxDays) maxDays = e.days; }); });
+    var labelW = 130, w = 780, laneH = 34, padR = 20;
+    var h = lanes.length * laneH + 24;
+    var svg = svgEl('svg', { viewBox: '0 0 ' + w + ' ' + h, width: '100%', 'class': 'aging', role: 'img', 'aria-label': 'Open tasks by age in days' });
+    lanes.forEach(function (s, i) {
+      var y = i * laneH + 22;
+      var lbl = svgEl('text', { x: labelW - 12, y: y + 4, 'text-anchor': 'end', 'class': 'aging-lane-label' });
+      lbl.textContent = s;
+      svg.appendChild(lbl);
+      svg.appendChild(svgEl('line', { x1: labelW, y1: y, x2: w - padR, y2: y, 'class': 'aging-track' }));
+      byStatus[s].forEach(function (e) {
+        var cx = labelW + (w - labelW - padR) * e.days / maxDays;
+        var dot = svgEl('circle', {
+          cx: cx.toFixed(1), cy: y, r: 6, 'class': 'age-dot',
+          fill: e.days >= STALE_DAYS ? 'var(--warn)' : TONE_VAR[toneOf(s)]
+        });
+        attachTitle(dot, e.task.id + ' · ' + e.task.title + ' · ' + e.days + 'd');
+        dot.addEventListener('click', function () { openDetail(e.task.id); });
+        svg.appendChild(dot);
+      });
+    });
+    var axis0 = svgEl('text', { x: labelW, y: h - 4, 'class': 'aging-axis' });
+    axis0.textContent = '0d';
+    var axisMax = svgEl('text', { x: w - padR, y: h - 4, 'text-anchor': 'end', 'class': 'aging-axis' });
+    axisMax.textContent = maxDays + 'd';
+    svg.appendChild(axis0);
+    svg.appendChild(axisMax);
+    mount.appendChild(svg);
+  }
+
   function renderBars(mount, milestones) {
     mount.textContent = '';
     if (milestones.length === 0) {
@@ -931,44 +1210,95 @@
     mount.appendChild(svg);
   }
 
-  function renderSparkline(mount, activity) {
+  function weekdayName(idx, style) {
+    /* 2024-01-07 was a Sunday; offset from it gives any weekday */
+    var ref = new Date(Date.UTC(2024, 0, 7 + idx));
+    try {
+      return new Intl.DateTimeFormat(undefined, { weekday: style, timeZone: 'UTC' }).format(ref);
+    } catch (e) {
+      return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][idx];
+    }
+  }
+  function renderActivityKpis(mount, k) {
     mount.textContent = '';
-    if (!activity || activity.length < 2) {
+    if (!k) return;
+    var grid = el('div', 'kpi-grid');
+    grid.appendChild(kpiTile({ big: String(k.activityTotal30), cap: 'tasks touched / 30 days' }));
+    grid.appendChild(kpiTile({ big: String(k.activityAvgPerWeek), cap: 'avg per week (26w)' }));
+    grid.appendChild(kpiTile({
+      big: k.busiestWeekday === null ? '—' : weekdayName(k.busiestWeekday, 'long'),
+      cap: 'most active day'
+    }));
+    grid.appendChild(kpiTile({ big: k.streakDays + 'd', cap: 'current streak' }));
+    mount.appendChild(grid);
+  }
+  function renderDayPanel(panel, bucket) {
+    panel.textContent = '';
+    panel.hidden = false;
+    var head = el('h4', '', bucket.date + ' — ' + bucket.count + ' task' + (bucket.count === 1 ? '' : 's'));
+    panel.appendChild(head);
+    var list = el('ul', 'flow-list');
+    var shown = 0;
+    bucket.ids.forEach(function (id) {
+      var t = findTask(id);
+      if (!t) return;
+      shown++;
+      var li = el('li', 'flow-card');
+      var h = el('div', 'flow-card-head');
+      h.appendChild(el('span', 'flow-card-id', t.id));
+      var chip = el('span', 'status-chip', t.status);
+      chip.setAttribute('data-tone', toneOf(t.status));
+      h.appendChild(chip);
+      li.appendChild(h);
+      li.appendChild(el('div', 'flow-card-title', t.title));
+      li.addEventListener('click', function () { openDetail(t.id); });
+      list.appendChild(li);
+    });
+    if (shown === 0) panel.appendChild(el('p', 'flow-empty', 'No task details for this day.'));
+    else panel.appendChild(list);
+  }
+  function renderHeatmap(mount, activity) {
+    mount.textContent = '';
+    if (!activity || activity.length === 0) {
       mount.appendChild(el('p', 'hint', 'No activity data.'));
       return;
     }
-    var w = 780, h = 150, padL = 14, padR = 14, padT = 18, padB = 26;
+    var panel = document.getElementById('day-panel');
+    var cell = 12, gap = 3, padL = 34, padT = 16;
+    var first = new Date(activity[0].date + 'T00:00:00Z');
+    var offset = first.getUTCDay();
+    var cols = Math.ceil((activity.length + offset) / 7);
+    var w = padL + cols * (cell + gap);
+    var h = padT + 7 * (cell + gap) + 14;
     var max = 1;
     activity.forEach(function (b) { if (b.count > max) max = b.count; });
-    function px(i) { return padL + (w - padL - padR) * i / (activity.length - 1); }
-    function py(c) { return padT + (h - padT - padB) * (1 - c / max); }
-    var svg = svgEl('svg', {
-      viewBox: '0 0 ' + w + ' ' + h, width: '100%', 'class': 'spark',
-      role: 'img', 'aria-label': 'Task activity over the last 30 days'
-    });
-    var coords = activity.map(function (b, i) {
-      return px(i).toFixed(1) + ',' + py(b.count).toFixed(1);
+    var svg = svgEl('svg', { viewBox: '0 0 ' + w + ' ' + h, width: '100%', 'class': 'heatmap', role: 'img', 'aria-label': 'Daily task activity, last 26 weeks' });
+    [1, 3, 5].forEach(function (row) {
+      var lbl = svgEl('text', { x: padL - 6, y: padT + row * (cell + gap) + cell - 2, 'text-anchor': 'end', 'class': 'hm-axis' });
+      lbl.textContent = weekdayName(row, 'short');
+      svg.appendChild(lbl);
     });
-    var areaD = 'M' + px(0).toFixed(1) + ',' + (h - padB) +
-      ' L ' + coords.join(' L ') +
-      ' L ' + px(activity.length - 1).toFixed(1) + ',' + (h - padB) + ' Z';
-    svg.appendChild(svgEl('path', { d: areaD, 'class': 'spark-area' }));
-    svg.appendChild(svgEl('polyline', { points: coords.join(' '), 'class': 'spark-line' }));
+    var lastMonth = '';
     activity.forEach(function (b, i) {
-      var dot = svgEl('circle', {
-        cx: px(i).toFixed(1), cy: py(b.count).toFixed(1),
-        r: b.count > 0 ? 3.5 : 2,
-        'class': b.count > 0 ? 'spark-dot nonzero' : 'spark-dot'
+      var pos = i + offset;
+      var col = Math.floor(pos / 7), row = pos % 7;
+      var level = b.count === 0 ? 0 : Math.max(1, Math.ceil((b.count / max) * 4));
+      var rect = svgEl('rect', {
+        x: padL + col * (cell + gap), y: padT + row * (cell + gap),
+        width: cell, height: cell, rx: 2.5,
+        'class': 'hm-cell hm-' + level, 'data-date': b.date
       });
-      attachTitle(dot, b.date + ': ' + b.count);
-      svg.appendChild(dot);
+      attachTitle(rect, b.date + ': ' + b.count);
+      rect.addEventListener('click', function () { if (panel) renderDayPanel(panel, b); });
+      svg.appendChild(rect);
+      var month = b.date.slice(0, 7);
+      if (row === 0 && month !== lastMonth) {
+        lastMonth = month;
+        var m = svgEl('text', { x: padL + col * (cell + gap), y: padT - 5, 'class': 'hm-axis' });
+        m.textContent = b.date.slice(5, 7);
+        svg.appendChild(m);
+      }
     });
-    var first = svgEl('text', { x: padL, y: h - 7, 'class': 'spark-axis' });
-    first.textContent = activity[0].date;
-    var last = svgEl('text', { x: w - padR, y: h - 7, 'text-anchor': 'end', 'class': 'spark-axis' });
-    last.textContent = activity[activity.length - 1].date;
-    svg.appendChild(first);
-    svg.appendChild(last);
     mount.appendChild(svg);
   }
 
@@ -1039,9 +1369,12 @@
     phases = [];
   }
   if ($('#donut')) renderDonut($('#donut'), data.statuses);
+  if ($('#kpis')) renderKpis($('#kpis'), data.kpis);
+  if ($('#aging')) renderAging($('#aging'), data.tasks);
   if ($('#bars')) renderBars($('#bars'), data.milestones);
   if ($('#stepper')) renderStepper($('#stepper'), phases);
-  if ($('#spark')) renderSparkline($('#spark'), data.activity);
+  if ($('#activity-kpis')) renderActivityKpis($('#activity-kpis'), data.kpis);
+  if ($('#heatmap')) renderHeatmap($('#heatmap'), data.activity);
 
   /* ---------- Glossary tooltips ---------- */
   var glossary = {};
@@ -1244,6 +1577,76 @@
   window.__sblOpenDetail = openDetail;
   if (dialog) dialog.addEventListener('click', function (ev) { if (ev.target === dialog) closeDetail(); });
 
+  /* ---------- Drafts ---------- */
+  function draftMetaGrid(d) {
+    var grid = el('div', 'detail-meta');
+    function cell(label, value, tone) {
+      var c = el('div', 'meta-cell');
+      c.appendChild(el('span', 'meta-label', label));
+      var v = el('span', 'meta-value' + (value ? '' : ' empty'), value || '—');
+      if (value && tone) v.setAttribute('data-tone', tone);
+      c.appendChild(v);
+      return c;
+    }
+    grid.appendChild(cell('Priority', d.priority, priorityTone(d.priority)));
+    grid.appendChild(cell('Assignee', d.assignee));
+    grid.appendChild(cell('Created', d.created));
+    grid.appendChild(cell('Updated', d.updated));
+    return grid;
+  }
+  function openDraftDetail(d) {
+    if (!dialog) return;
+    var content = el('div', 'dialog-content');
+    var head = el('div', 'detail-head');
+    head.appendChild(el('span', 'detail-id', d.id));
+    var chip = el('span', 'status-chip', d.status);
+    chip.setAttribute('data-tone', toneOf(d.status));
+    head.appendChild(chip);
+    var closeBtn = el('button', 'detail-close', '×');
+    closeBtn.type = 'button';
+    closeBtn.setAttribute('aria-label', 'Close details');
+    closeBtn.addEventListener('click', closeDetail);
+    head.appendChild(closeBtn);
+    content.appendChild(head);
+    var title = el('h3', 'detail-title', d.title);
+    title.id = 'detail-title-h';
+    dialog.setAttribute('aria-labelledby', 'detail-title-h');
+    content.appendChild(title);
+    if (d.description) content.appendChild(descParagraphs(d.description));
+    else content.appendChild(el('p', 'detail-desc', 'No description.'));
+    content.appendChild(draftMetaGrid(d));
+    if (d.acs && d.acs.length > 0) content.appendChild(acSection(d));
+    var cmd = el('button', 'phase-cmd detail-cmd');
+    cmd.type = 'button';
+    var cmdLine = 'backlog draft promote ' + d.id.replace(/^task-/i, '');
+    cmd.appendChild(el('span', 'cmd-line', cmdLine));
+    cmd.appendChild(el('span', 'cmd-title', 'copy'));
+    cmd.addEventListener('click', function () { copyCommand(cmd, cmdLine); });
+    content.appendChild(cmd);
+    dialog.textContent = '';
+    dialog.appendChild(content);
+    dialog.showModal();
+  }
+  function renderDrafts(drafts) {
+    var list = document.getElementById('drafts-list');
+    if (!list) return;
+    list.textContent = '';
+    if (!drafts || drafts.length === 0) { list.appendChild(el('li', '', 'No drafts.')); return; }
+    drafts.forEach(function (d) {
+      var li = el('li', 'flow-card');
+      var head = el('div', 'flow-card-head');
+      head.appendChild(el('span', 'flow-card-id', d.id));
+      var chip = el('span', 'status-chip', d.status);
+      chip.setAttribute('data-tone', toneOf(d.status));
+      head.appendChild(chip);
+      li.appendChild(head);
+      li.appendChild(el('div', 'flow-card-title', d.title));
+      li.addEventListener('click', function () { openDraftDetail(d); });
+      list.appendChild(li);
+    });
+  }
+  renderDrafts(data.drafts);
+
   /* ---------- Keyboard shortcuts ---------- */
   document.addEventListener('keydown', function (ev) {
     if (ev.key === 'Escape') {