super-backlog 1.3.3 → 1.3.5

package/README.md

@@ -1,130 +1,100 @@
+<div align="center">
+
+<img src="docs/assets/super-backlog-logo.jpg" alt="Super Backlog" width="100%">
+
 # super-backlog
 
 [![CI](https://github.com/adam-s-k-i/super-backlog/actions/workflows/ci.yml/badge.svg)](https://github.com/adam-s-k-i/super-backlog/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/super-backlog)](https://www.npmjs.com/package/super-backlog)
 [![Docs](https://img.shields.io/badge/docs-adam--s--k--i.github.io%2Fsuper--backlog-blue)](https://adam-s-k-i.github.io/super-backlog/)
 
-![Super Backlog](docs/assets/super-backlog-logo.jpg)
-
-One command to equip any project with [Backlog.md](https://github.com/MrLesk/Backlog.md) + [Superpowers](https://github.com/obra/superpowers), plus a Project Dashboard.
-
-## What & why
-
-Superpowers and Backlog.md are strong on their own, but nothing wires them together: Superpowers defines *how* agents should work (brainstorming → plans → TDD → review), Backlog.md defines *what* is tracked (markdown tasks, Kanban board, browser UI). Connecting them today means hand-copying glue from project to project — workflow blocks in `AGENTS.md`, bridge skills like `spec-to-backlog`, npm scripts, plugin config. super-backlog is the glue orchestrator that installs and maintains all of it in one step, with a guaranteed-clean exit path (`sbl uninstall`).
-
-## Requirements
-
-- Node >= 20
-- A package manager (npm, pnpm, or bun) for dependency installation
-- Works with **OpenCode** and **Claude Code** (both configured by default)
+**Supercharge your backlog. Watch it live.**
 
-## Quickstart
+One command to equip any project with [Backlog.md](https://github.com/MrLesk/Backlog.md) + [Superpowers](https://github.com/obra/superpowers), plus a live Project Dashboard.
 
-Install super-backlog into the current project with the official installer for your platform:
+</div>
 
-**Windows (PowerShell)** — bypasses Execution Policy automatically:
+---
 
-```powershell
-irm https://raw.githubusercontent.com/adam-s-k-i/super-backlog/master/scripts/install.ps1 | iex
-```
-
-**macOS / Linux**:
+## Start in 3 commands
 
 ```bash
+# 1 · install (Windows: irm https://raw.githubusercontent.com/adam-s-k-i/super-backlog/master/scripts/install.ps1 | iex)
 curl -fsSL https://raw.githubusercontent.com/adam-s-k-i/super-backlog/master/scripts/install.sh | bash
-```
-
-Both installers check Node.js and npm, install `super-backlog`, and run `sbl init` without using `npx`, so they work even when `npx` is blocked by PowerShell's Execution Policy.
 
-**Already have Node and npm?** You can also install manually without `npx`:
-
-```bash
-# Global install
-npm install -g super-backlog
+# 2 · wire your project (Backlog.md, skills, npm scripts, hooks)
 sbl init
-sbl init --models
-
-# Local install
-npm install super-backlog
-node ./node_modules/super-backlog/dist/bin.js init
-```
 
-After installation:
-
-```bash
-npm run board                   # open the Backlog.md kanban board
-sbl dashboard                   # live Project Dashboard on http://localhost:6428
+# 3 · open the live Project Dashboard
+sbl dashboard
 ```
 
-`init` is idempotent — safe to re-run any time; re-running with a newer kit version is the upgrade path for all injected files.
-
-## What gets installed
+That's it. Everything else below is detail.
 
-| Target | Content | Ownership model |
-|---|---|---|
-| `package.json` devDependencies | `backlog.md@latest` + `super-backlog@latest` | merged |
-| `backlog/` | created by `backlog init --defaults` (upstream owns it) | delegated |
-| `opencode.json` | `plugin[] += superpowers@git+https://github.com/obra/superpowers.git` | merged; other keys untouched |
-| `.claude/` | Superpowers via official marketplace — init prints the exact command to paste (`/plugin install superpowers@claude-plugins-official`); file-based skills work immediately | instructed/delegated |
-| `AGENTS.md` | `<!-- SUPER-BACKLOG:x.y.z START -->` … `<!-- SUPER-BACKLOG END -->` workflow block | marker-scoped |
-| `CLAUDE.md` | one-line pointer to the AGENTS.md block | marker-scoped |
-| `.opencode/skill/<skill>/SKILL.md` (3 glue skills) | skill templates | fingerprint header line |
-| `.claude/skills/<skill>/SKILL.md` | same templates | fingerprint header line |
-| `package.json` scripts | `tasks` → `backlog task list`, `board` → `backlog board`, `browser` → `backlog browser`, `dashboard` → `super-backlog dashboard` (never overwrite existing values) | merged, add-only-if-absent |
-| `dashboard.html` | generated Project Dashboard | not installed in user projects; generated on demand by `sbl dashboard` |
-| `.git/hooks/pre-commit` | integrity guard hook — only with `--guard` (opt-in) | appended marker block |
+---
 
-Commands: `sbl init` · `sbl models` · `sbl doctor` · `sbl uninstall [--with-backlog]` · `sbl update` · `sbl dashboard [--port <n>] [--no-open]` (alias: `sbl db`). See `sbl help` for every flag.
+## Command cheat sheet
 
-`sbl update` first self-updates a globally installed CLI to the latest npm version and re-runs itself (opt out with `--no-self` or `SBL_SKIP_UPDATE_CHECK`), then refreshes injected files.
+| Command | What it does |
+| --- | --- |
+| `sbl init` | Wire Backlog.md, Superpowers skills, npm scripts, and hooks into the current project. |
+| `sbl dashboard` | Live Project Dashboard on `http://localhost:6428` (alias: `sbl db`). |
+| `sbl phase TASK-1` | Show where a task stands: `phase/spec → plan → impl → verify`. |
+| `sbl phase TASK-1 plan` | Advance the phase after its gate is passed (`done` clears the label). |
+| `sbl doctor` | Check Node, PowerShell policy, the `backlog` CLI, and phase-label hygiene. |
+| `sbl update` | Self-update the CLI, then refresh every injected file. |
+| `sbl models enable` | Optional model router: cheap models for simple agents, your main model for hard work. |
+| `sbl uninstall` | Remove everything super-backlog owns — your `backlog/` data stays. |
 
-## Model router (opt-in)
+Full reference with flags and parameters: [Quick start guide](https://adam-s-k-i.github.io/super-backlog/guide/quickstart).
 
-`sbl init --models` adds an optional model router that routes simple work to cheaper model tiers while keeping your main model for complex tasks.
+---
 
-```bash
-sbl init --models              # install router + harness adapters
-sbl models enable              # turn routing on
-sbl models disable             # turn routing off
-sbl models show                # inspect current config
-sbl models discover            # discover available OpenCode models
-```
+## Why
 
-When enabled:
+Superpowers defines *how* agents work (brainstorm → plan → TDD → review), Backlog.md defines *what* is tracked (markdown tasks, kanban board). Nothing wired them together — super-backlog is the glue: one `sbl init` installs and maintains everything, with a guaranteed-clean exit (`sbl uninstall`).
 
-- **OpenCode** — the plugin `sbl-model-router.js` rewrites `chat.params` for the `sbl-worker` (workhorse) and `sbl-worker-cheap` / `explore` (budget) agents.
-- **Claude Code** — agent files carry a `model:` placeholder that is updated by a `SessionStart` hook based on your current main model.
-- **Dashboard** — `sbl dashboard` exposes `/api/models` and `/api/models/discover`.
+Tasks carry their pipeline phase as a label (`phase/spec → plan → impl → verify`), so every session resumes exactly where work stopped, the dashboard shows live phase counts, and `sbl doctor` guards the convention.
 
-The router is fully owned by super-backlog and removed by `sbl uninstall`. See the [model router design](docs/superpowers/specs/2026-08-26-sbl-model-router-design.md) for details.
+## What gets installed
 
-## Pipeline phases
+| Target | Content |
+| --- | --- |
+| `backlog/` | Your Backlog.md data (created by `backlog init --defaults`) |
+| `AGENTS.md` / `CLAUDE.md` | Workflow block with pipeline, gates, and phase rules |
+| `.opencode/skill/` + `.claude/skills/` | Glue skills: `spec-to-backlog`, `task-review-gate`, `backlog-status-report` |
+| `opencode.json` | Superpowers plugin entry |
+| `package.json` scripts | `tasks`, `board`, `browser`, `dashboard` |
+| `.git/hooks/pre-commit` | Integrity guard — opt-in via `--guard` |
 
-Tasks carry their pipeline phase as a label (`phase/spec` → `phase/plan` → `phase/impl` → `phase/verify`), managed by `sbl phase <task-id> [phase|done]` and checked by `sbl doctor`. The dashboard stepper, task table, and task modal render the live phase. Details: [docs/guide/pipeline-phases.md](docs/guide/pipeline-phases.md).
+`init` is idempotent — re-run any time to upgrade injected files.
 
 ## Project Dashboard
 
-`sbl dashboard` starts a local hub that serves an HTS-style cockpit (light/dark theme toggle) rendered from your Backlog data in eight sections — Board & Quick Actions, Status (KPI tiles, donut, and an aging strip for open tasks), Feature Cycle (pipeline stepper plus an Up Next / Blocked flow view from task dependencies), Milestones, Drafts (click a card for details), Tasks (sortable/filterable table; click a row to open a modal detail view with acceptance criteria and dependencies), Activity (a 26-week calendar heatmap; click a day for its tasks), and Decisions & Docs. Glossary tooltips explain domain terms inline; extend or override them project-wide via `backlog/docs/glossary.md` (`## Term` heading plus the text below it). Typefaces load from Google Fonts with full system fallbacks — the one external resource; everything else is inline, and the dashboard still renders offline. Bookmark `http://127.0.0.1:6428/p/<project_name>/`. The hub watches `backlog/`, regenerates on change, and serves on port `6428`; connected browser tabs reload automatically via Server-Sent Events. A second repo's `sbl dashboard` attaches to the same hub. `Ctrl+C` in the hub terminal stops all projects.
-
-### Keeping it fresh
+```bash
+sbl dashboard
+```
 
-Run `sbl dashboard` whenever you want a live view of the board. The hub regenerates the dashboard while it runs; stop it with `Ctrl+C` in the hub terminal. There is no static `dashboard.html` installed in your project.
+A live cockpit rendered from your backlog data: status KPIs, milestones, phase pipeline with live counts, drafts, tasks table (sortable, filterable), 26-week activity heatmap, decisions & docs. Watches `backlog/`, reloads connected tabs automatically, runs on port `6428`.
 
 ![Project Dashboard](docs/assets/dashboard.png)
 
-## Uninstall guarantee
+## Requirements
+
+- Node >= 20 and a package manager (npm, pnpm, or bun)
+- Works with **OpenCode** and **Claude Code**
 
-super-backlog uninstall removes only provably owned artifacts and keeps your Backlog task data unless you pass --with-backlog. Every removal decision is reported line by line as removed / kept / skipped; files whose ownership cannot be proven are left untouched.
+## Model router (opt-in)
 
-## Harness support
+`sbl init --models` routes simple agents to cheaper tiers while keeping your main model for complex work. Toggle with `sbl models enable|disable`, inspect with `sbl models show`, discover tiers with `sbl models discover`. [Design doc](docs/superpowers/specs/2026-08-26-sbl-model-router-design.md).
 
-- **OpenCode** — native: `opencode.json` plugin entry plus file-based skills under `.opencode/skill/` (spec-to-backlog, backlog-status-report, task-review-gate).
-- **Claude Code** — file-based skills under `.claude/skills/` always work immediately; the marketplace plugin cannot be installed from a script, so init prints the exact command to paste (`/plugin install superpowers@claude-plugins-official`) and exits with a warning (exit code 4).
+## Uninstall guarantee
 
-Details and matrix: [docs/guide/harness-support.md](docs/guide/harness-support.md).
+`sbl uninstall` removes only provably owned artifacts, reports every decision line by line, and keeps your task data unless you pass `--with-backlog`.
 
-## Troubleshooting
+## Docs & troubleshooting
 
-Windows OpenCode fallback, exit codes, and environment seams: [docs/guide/troubleshooting.md](docs/guide/troubleshooting.md). Architecture deep-dive: [docs/guide/architecture.md](docs/guide/architecture.md). Guard hook details: [docs/guide/guard.md](docs/guide/guard.md).
+Full documentation lives on [GitHub Pages](https://adam-s-k-i.github.io/super-backlog/) — quickstart, architecture, pipeline phases, harness support, guard hook, operations. Architecture deep-dive: [docs/guide/architecture.md](docs/guide/architecture.md).
 
 ## Development
 

package/dist/commands/dashboard.js

@@ -8,6 +8,7 @@ import { startHubServer } from '../dashboard/hub.js';
 import { renderDashboard } from '../dashboard/render.js';
 import { DASHBOARD_PORT } from '../dashboard/server.js';
 import { atomicWrite } from '../lib/atomic.js';
+import { defaultBuildFingerprint } from '../lib/build-fingerprint.js';
 import { clearHubState, isPidAlive, newHubToken, readHubState, writeHubState } from '../lib/hub-state.js';
 import { projectSlug } from '../lib/slug.js';
 import { KIT_VERSION } from '../lib/version.js';
@@ -157,6 +158,8 @@ export async function runDashboard(cwd, args, deps = {}) {
     const isAlive = deps.isAlive ?? isPidAlive;
     const killPid = deps.killPid ?? ((p) => { process.kill(p); });
     const sleep = deps.sleep ?? ((ms) => new Promise((resolve) => setTimeout(resolve, ms)));
+    const buildFingerprint = deps.buildFingerprint ?? defaultBuildFingerprint;
+    const myFingerprint = buildFingerprint();
     let slugResult;
     try {
         slugResult = projectSlug(cwd);
@@ -180,7 +183,14 @@ export async function runDashboard(cwd, args, deps = {}) {
                     : undefined;
                 const liveVersion = typeof statusJson?.version === 'string' ? statusJson.version : undefined;
                 const effectiveVersion = liveVersion ?? state.version;
-                if (effectiveVersion === KIT_VERSION) {
+                const liveFingerprint = typeof statusJson?.fingerprint === 'string' ? statusJson.fingerprint : undefined;
+                // Same version AND (proven identical build OR build cannot be
+                // assessed locally) -> attach. A missing live fingerprint from a
+                // same-version hub means it was started by an older CLI and cannot
+                // see the current build, so it is restarted exactly once.
+                const buildMatches = myFingerprint !== null && liveFingerprint === myFingerprint;
+                const buildUnassessable = myFingerprint === null;
+                if (effectiveVersion === KIT_VERSION && (buildMatches || buildUnassessable)) {
                     if (values['port'] !== undefined && port !== state.port) {
                         console.error(`error: a hub is already running on ${state.port}`);
                         return 1;
@@ -194,7 +204,12 @@ export async function runDashboard(cwd, args, deps = {}) {
                         noOpen,
                     });
                 }
-                console.error(`hub v${effectiveVersion ?? 'unknown'} does not match this CLI (v${KIT_VERSION}) — restarting it`);
+                if (effectiveVersion === KIT_VERSION) {
+                    console.error(`hub build changed (fingerprint mismatch, same version v${KIT_VERSION}) — restarting it`);
+                }
+                else {
+                    console.error(`hub v${effectiveVersion ?? 'unknown'} does not match this CLI (v${KIT_VERSION}) — restarting it`);
+                }
                 killPid(state.pid);
                 let dead = !isAlive(state.pid);
                 for (let attempt = 0; !dead && attempt < STOP_POLL_MAX_ATTEMPTS; attempt++) {
@@ -234,7 +249,7 @@ export async function runDashboard(cwd, args, deps = {}) {
         console.error(`error: dashboard serve failed (${err instanceof Error ? err.message : String(err)})`);
         return 1;
     }
-    writeHubState(home, { pid, port: hub.port, token, version: KIT_VERSION });
+    writeHubState(home, { pid, port: hub.port, token, version: KIT_VERSION, fingerprint: myFingerprint ?? undefined });
     const result = hub.register({ cwd, file: outPath, regenerate });
     if (!result.ok) {
         await hub.close();

package/dist/dashboard/hub.js

@@ -9,6 +9,7 @@ import { collectDashboardData } from './data.js';
 import { renderDashboard } from './render.js';
 import { createDebouncedReloader, createReloadBroker, DASHBOARD_PORT, recursiveWatchSupported, } from './server.js';
 import { atomicWrite } from '../lib/atomic.js';
+import { defaultBuildFingerprint } from '../lib/build-fingerprint.js';
 import { projectSlug, realpathKey } from '../lib/slug.js';
 import { KIT_VERSION } from '../lib/version.js';
 import { createModelApiHandler } from '../models/dashboard-api.js';
@@ -63,6 +64,7 @@ function generateDashboard(cwd, file) {
 export async function startHubServer(opts) {
     const projects = new Map();
     const token = opts.token;
+    const fingerprint = defaultBuildFingerprint();
     let port = 0;
     let watchWarned = false;
     function watchBacklog(cwd, reloader) {
@@ -166,7 +168,7 @@ export async function startHubServer(opts) {
                 sendText(res, 401, 'unauthorized');
                 return;
             }
-            sendJson(res, 200, { pid: process.pid, port, version: KIT_VERSION });
+            sendJson(res, 200, { pid: process.pid, port, version: KIT_VERSION, fingerprint: fingerprint ?? undefined });
             return;
         }
         if (pathname === '/api/hub/register' && method === 'POST') {

package/dist/lib/build-fingerprint.js

@@ -0,0 +1,50 @@
+// src/lib/build-fingerprint.ts
+import { createHash } from 'node:crypto';
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+const require = createRequire(import.meta.url);
+function distRoot() {
+    // Resolves from src/lib (dev/tests) and dist/lib (runtime) alike: both sit
+    // two levels below the package root that owns dist/.
+    const pkgPath = require.resolve('../../package.json');
+    return join(dirname(pkgPath), 'dist');
+}
+function walk(dir, out) {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const full = join(dir, entry.name);
+        if (entry.isDirectory())
+            walk(full, out);
+        else
+            out.push(full);
+    }
+}
+/**
+ * Stable content hash over the built CLI. Two builds of the same source
+ * produce the same fingerprint; any changed or added file changes it.
+ * Returns null when the build directory is missing.
+ */
+export function computeBuildFingerprint(root = distRoot()) {
+    if (!existsSync(root))
+        return null;
+    const files = [];
+    walk(root, files);
+    if (files.length === 0)
+        return null;
+    files.sort();
+    const hash = createHash('sha256');
+    for (const file of files) {
+        hash.update(file.slice(root.length + 1).replaceAll('\\', '/'));
+        hash.update('\0');
+        hash.update(readFileSync(file));
+        hash.update('\0');
+    }
+    return hash.digest('hex').slice(0, 16);
+}
+let cachedDefault;
+/** Process-lifetime cached fingerprint of the running build. */
+export function defaultBuildFingerprint() {
+    if (cachedDefault === undefined)
+        cachedDefault = computeBuildFingerprint();
+    return cachedDefault;
+}

package/dist/lib/hub-state.js

@@ -16,8 +16,14 @@ export function readHubState(home) {
             typeof parsed.token !== 'string') {
             return null;
         }
-        const { pid, port, token, version } = parsed;
-        return typeof version === 'string' ? { pid, port, token, version } : { pid, port, token };
+        const { pid, port, token, version, fingerprint } = parsed;
+        return {
+            pid,
+            port,
+            token,
+            ...(typeof version === 'string' ? { version } : {}),
+            ...(typeof fingerprint === 'string' ? { fingerprint } : {}),
+        };
     }
     catch {
         return null;

package/dist/templates/dashboard.html

@@ -197,11 +197,11 @@
   #backlog-close:hover { color: var(--text); border-color: var(--line); }
   #backlog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
   #backlog-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
-  .dialog-content { padding: 0 24px 26px; }
+  .dialog-content { padding: 6px 32px 32px; }
   .detail-head {
     position: sticky; top: 0; z-index: 1;
     display: flex; align-items: center; gap: 10px;
-    margin: 0 -24px 12px; padding: 16px 24px 12px;
+    margin: 0 -32px 12px; padding: 16px 32px 12px;
     background: var(--surface); border-bottom: 1px solid var(--line);
   }
   .detail-id { font-family: var(--mono); color: var(--accent); font-weight: 700; }
@@ -214,6 +214,10 @@
   .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; }
   #task-dialog .detail-desc { color: var(--muted); line-height: 1.6; margin-bottom: 10px; white-space: normal; }
+  /* the global reset strips ul padding: without this, list markers poke
+     out of the dialog's content box on the left */
+  #task-dialog ul { list-style-position: inside; padding-left: 1.15rem; }
+  #task-dialog .ac-list { list-style: none; padding-left: 0; }
   #task-dialog h4 { color: var(--dim); font-size: .7rem; letter-spacing: 1.3px; text-transform: uppercase; margin: 18px 0 8px; }
   .detail-meta {
     display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
@@ -282,11 +286,15 @@
   }
 
   /* ---------- Tasks table ---------- */
-  .toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--sp, 12px); }
-  input[type="search"] {
+  .toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: var(--sp, 12px); }
+  .status-grid { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 20px; align-items: start; }
+  @media (max-width: 900px) { .status-grid { grid-template-columns: 1fr; } }
+  input[type="search"], #tasksize {
     background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong);
     border-radius: 999px; padding: 7px 16px; min-width: 260px; font: inherit;
   }
+  #tasksize { min-width: 0; padding: 7px 12px; cursor: pointer; }
+  #tasksize:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 2px var(--focus-ring); }
   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; }
@@ -516,11 +524,10 @@
     <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>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>
+    <a href="#sec-04"><span class="n">04</span>Drafts</a>
+    <a href="#sec-05"><span class="n">05</span>Tasks</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>
   </nav>
   <div class="legend">
     <h4>Status</h4>
@@ -546,7 +553,13 @@
 <section id="sec-02">
   <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>
+  <div class="status-grid">
+    <div id="donut" class="mount"></div>
+    <div class="bars-col">
+      <h3 class="sub-head"><span class="term" data-term="Milestone">Milestone</span> &mdash; done / total</h3>
+      <div id="bars" class="mount"></div>
+    </div>
+  </div>
   <h3 class="sub-head">Aging &mdash; open tasks by days in the backlog</h3>
   <div id="aging" class="mount"></div>
 </section>
@@ -560,22 +573,24 @@
 </section>
 
 <section id="sec-04">
-  <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 class="sec-head"><span class="sec-num">04</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>
+<section id="sec-05">
+  <div class="sec-head"><span class="sec-num">05</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">
+      <select id="tasksize" aria-label="Rows to show">
+        <option value="10">10</option>
+        <option value="20" selected>20</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+        <option value="all">all</option>
+      </select>
     </div>
     <div class="table-wrap">
       <table id="tasks-table">
@@ -596,15 +611,15 @@
   </div>
 </section>
 
-<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>
+<section id="sec-06">
+  <div class="sec-head"><span class="sec-num">06</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-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>
+<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>
   <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>
@@ -671,7 +686,7 @@
   }
 
   var KEYS = ['id', 'title', 'status', 'milestone', 'priority', 'assignee', 'updated'];
-  var state = { key: 'id', dir: 1, query: '', status: null, hoverStatus: null, special: null };
+  var state = { key: 'updated', dir: -1, size: 20, query: '', status: null, hoverStatus: null, special: null };
   function field(task, key) {
     var v = task[key];
     return v === undefined || v === null ? '' : String(v);
@@ -754,8 +769,9 @@
     var rows = data.tasks
       .filter(matches)
       .sort(function (a, b) { return compareTasks(a, b, state.key) * state.dir; });
+    var shown = state.size === 'all' ? rows : rows.slice(0, state.size);
     tbody.textContent = '';
-    if (rows.length === 0) {
+    if (shown.length === 0) {
       var emptyTr = el('tr');
       var emptyTd = el('td', '', 'No matching tasks.');
       emptyTd.colSpan = KEYS.length;
@@ -763,7 +779,7 @@
       tbody.appendChild(emptyTr);
       return;
     }
-    rows.forEach(function (task) {
+    shown.forEach(function (task) {
       var tr = el('tr', 'task-row');
       tr.setAttribute('data-task', task.id);
       KEYS.forEach(function (k) {
@@ -811,6 +827,18 @@
       renderTasks();
     });
   });
+  var initialTh = document.querySelector('#tasks-table th[data-key="updated"]');
+  if (initialTh) {
+    initialTh.classList.add('sorted-desc');
+    initialTh.setAttribute('aria-sort', 'descending');
+  }
+  var sizeSel = document.getElementById('tasksize');
+  if (sizeSel) {
+    sizeSel.addEventListener('change', function () {
+      state.size = this.value === 'all' ? 'all' : parseInt(this.value, 10);
+      renderTasks();
+    });
+  }
   var filterInput = document.getElementById('taskfilter');
   if (filterInput) {
     filterInput.addEventListener('input', function (event) {
@@ -868,6 +896,14 @@
   }
   if (backlogBtn) {
     backlogBtn.addEventListener('click', function () {
+      var hosted = location.hostname !== '127.0.0.1' && location.hostname !== 'localhost';
+      if (hosted) {
+        /* static preview (e.g. GitHub Pages): no hub, no browser process */
+        cmdFeedback(backlogBtn, 'needs local hub');
+        backlogBtn.setAttribute('data-tip', 'Static preview: this button opens the Backlog.md UI only under sbl dashboard. Run sbl dashboard in your project and open http://localhost:6428');
+        backlogBtn.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+        return;
+      }
       cmdFeedback(backlogBtn, 'starting\u2026');
       fetch('api/backlog-browser', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
         .then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "super-backlog",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "One command to equip any project with Backlog.md + Superpowers, plus a Project Dashboard.",
   "license": "MIT",
   "repository": {