super-backlog 1.1.1 → 1.3.0

package/dist/dashboard/backlog-browser.js

@@ -0,0 +1,98 @@
+// src/dashboard/backlog-browser.ts
+import { request } from 'node:http';
+import { createServer } from 'node:net';
+import crossSpawn from 'cross-spawn';
+import { resolveBacklogBin } from '../lib/run.js';
+function defaultSpawn(bin, args, cwd) {
+    const child = crossSpawn(bin, args, { cwd, stdio: 'ignore' });
+    return child;
+}
+function defaultGetFreePort() {
+    return new Promise((resolve, reject) => {
+        const srv = createServer();
+        srv.once('error', reject);
+        srv.listen(0, '127.0.0.1', () => {
+            const addr = srv.address();
+            const port = addr !== null && typeof addr === 'object' ? addr.port : 0;
+            srv.close(() => resolve(port));
+        });
+    });
+}
+function defaultProbe(url) {
+    return new Promise((resolve) => {
+        const r = request(url, { method: 'GET' }, (res) => {
+            res.resume();
+            resolve((res.statusCode ?? 500) < 500);
+        });
+        r.on('error', () => resolve(false));
+        r.end();
+    });
+}
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/** Manages one `backlog browser` process for one project cwd. */
+export function createBrowserManager(cwd, deps = {}) {
+    const resolveBin = deps.resolveBin ?? resolveBacklogBin;
+    const spawnFn = deps.spawnFn ?? defaultSpawn;
+    const getFreePort = deps.getFreePort ?? defaultGetFreePort;
+    const probe = deps.probe ?? defaultProbe;
+    const timeoutMs = deps.timeoutMs ?? 10_000;
+    const intervalMs = deps.intervalMs ?? 200;
+    let child = null;
+    let url = '';
+    let starting = null;
+    function alive() {
+        return child !== null && child.exitCode === null;
+    }
+    async function start() {
+        const bin = resolveBin(cwd);
+        if (!bin)
+            return { ok: false, code: 503, message: 'backlog cli not found' };
+        let port;
+        try {
+            port = await getFreePort();
+        }
+        catch {
+            return { ok: false, code: 500, message: 'no free port for the backlog browser' };
+        }
+        url = `http://127.0.0.1:${port}/`;
+        const spawned = spawnFn(bin, ['browser', '--port', String(port), '--no-open'], cwd);
+        let spawnFailed = false;
+        spawned.on('error', () => {
+            spawnFailed = true;
+            if (child === spawned)
+                child = null;
+        });
+        child = spawned;
+        const deadline = Date.now() + timeoutMs;
+        while (Date.now() < deadline) {
+            if (spawnFailed || spawned.exitCode !== null)
+                break;
+            if (await probe(url))
+                return { ok: true, url };
+            await sleep(intervalMs);
+        }
+        spawned.kill();
+        if (child === spawned)
+            child = null;
+        return { ok: false, code: 500, message: 'backlog browser did not start' };
+    }
+    return {
+        ensure() {
+            if (alive() && url !== '')
+                return Promise.resolve({ ok: true, url });
+            if (starting === null) {
+                starting = start().finally(() => {
+                    starting = null;
+                });
+            }
+            return starting;
+        },
+        close() {
+            if (alive())
+                child?.kill();
+            child = null;
+        },
+    };
+}

package/dist/dashboard/data.js

@@ -1,7 +1,9 @@
 // src/dashboard/data.ts
 import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { homedir } from 'node:os';
 import { basename, join } from 'node:path';
 import { resolveBacklogBin, runCapture } from '../lib/run.js';
+import { isNewerVersion } from '../lib/version-check.js';
 import { readSimpleKeys } from '../lib/yamlmini.js';
 function isRecord(v) {
     return typeof v === 'object' && v !== null && !Array.isArray(v);
@@ -50,17 +52,28 @@ function normalizeAcs(value) {
     }
     return out;
 }
+function firstAssignee(t) {
+    const list = t['assignees'];
+    if (Array.isArray(list)) {
+        for (const entry of list) {
+            const name = asString(entry);
+            if (name !== undefined)
+                return name;
+        }
+    }
+    return asString(t['assignee']);
+}
 export function normalizeTasks(rawTasks) {
     return rawTasks.map((t) => ({
         id: asString(t['id']) ?? '',
         title: asString(t['title']) ?? '(untitled)',
         status: asString(t['status']) ?? 'Unknown',
         priority: asString(t['priority']),
-        assignee: asString(t['assignee']),
-        updated: asString(t['updated_at']) ?? asString(t['updated']),
+        assignee: firstAssignee(t),
+        updated: asString(t['updatedAt']) ?? asString(t['updated_at']) ?? asString(t['updated']),
         milestone: asString(t['milestone']),
         description: asString(t['description']),
-        acs: normalizeAcs(t['acceptance_criteria']),
+        acs: normalizeAcs(t['acceptanceCriteria'] ?? t['acceptance_criteria']),
     }));
 }
 export function computeStatuses(tasks) {
@@ -263,6 +276,79 @@ function readProjectIdentity(cwd) {
     const description = asString(cfg['description']) ?? asString(pkg?.['description']) ?? '';
     return { name, description };
 }
+function sectionBetween(content, begin, end) {
+    const from = content.indexOf(begin);
+    if (from === -1)
+        return undefined;
+    const to = content.indexOf(end, from + begin.length);
+    if (to === -1)
+        return undefined;
+    const text = content.slice(from + begin.length, to).trim();
+    return text === '' ? undefined : text;
+}
+/** Parse one backlog task markdown file via its explicit section markers. */
+export function parseTaskFile(content) {
+    const idMatch = /^id:\s*['"]?([^'"\r\n]+)['"]?\s*$/m.exec(content);
+    const description = sectionBetween(content, '<!-- SECTION:DESCRIPTION:BEGIN -->', '<!-- SECTION:DESCRIPTION:END -->');
+    const acs = [];
+    const acBlock = sectionBetween(content, '<!-- AC:BEGIN -->', '<!-- AC:END -->');
+    if (acBlock !== undefined) {
+        for (const line of acBlock.split(/\r?\n/)) {
+            const m = /^-\s*\[( |x|X)\]\s*(?:#\d+\s*)?(.+)$/.exec(line.trim());
+            if (m)
+                acs.push({ text: m[2].trim(), checked: m[1].toLowerCase() === 'x' });
+        }
+    }
+    return { id: idMatch?.[1]?.trim(), description, acs };
+}
+/**
+ * Fill description/ACs from backlog/tasks/*.md where `task list --json`
+ * (schemaVersion 1) does not carry them. The CLI stays the source of truth
+ * for the list and statuses; files only supply missing detail fields.
+ */
+export function enrichTasksFromFiles(cwd, tasks) {
+    const dir = join(cwd, 'backlog', 'tasks');
+    let files;
+    try {
+        files = readdirSync(dir).filter((f) => f.endsWith('.md'));
+    }
+    catch {
+        return tasks;
+    }
+    const byId = new Map();
+    for (const file of files) {
+        try {
+            const detail = parseTaskFile(readFileSync(join(dir, file), 'utf8'));
+            if (detail.id !== undefined)
+                byId.set(detail.id.toUpperCase(), detail);
+        }
+        catch {
+            // unreadable file -> no enrichment for that task
+        }
+    }
+    return tasks.map((t) => {
+        const detail = byId.get(t.id.toUpperCase());
+        if (!detail)
+            return t;
+        return {
+            ...t,
+            description: t.description ?? detail.description,
+            acs: t.acs.length > 0 ? t.acs : detail.acs,
+        };
+    });
+}
+function readLatestVersion(home, kitVersion) {
+    try {
+        const raw = readFileSync(join(home, '.super-backlog', 'version-check.json'), 'utf8');
+        const parsed = JSON.parse(raw);
+        if (!isRecord(parsed) || typeof parsed.latest !== 'string')
+            return null;
+        return isNewerVersion(parsed.latest, kitVersion) ? parsed.latest : null;
+    }
+    catch {
+        return null;
+    }
+}
 export function collectDashboardData(cwd, opts) {
     const today = opts.today && /^\d{4}-\d{2}-\d{2}$/.test(opts.today.trim())
         ? opts.today.trim()
@@ -271,6 +357,7 @@ export function collectDashboardData(cwd, opts) {
         project: readProjectIdentity(cwd),
         generatedAt: new Date().toISOString(),
         kitVersion: opts.kitVersion,
+        latestVersion: readLatestVersion(opts.home ?? homedir(), opts.kitVersion),
         statuses: [],
         milestones: [],
         tasks: [],
@@ -288,7 +375,7 @@ export function collectDashboardData(cwd, opts) {
         if (res.status !== 0)
             return base;
         const rawTasks = parseTasksJson(res.stdout);
-        const tasks = normalizeTasks(rawTasks);
+        const tasks = enrichTasksFromFiles(cwd, normalizeTasks(rawTasks));
         return {
             ...base,
             tasks,

package/dist/dashboard/hub.js

@@ -4,9 +4,10 @@ import { createServer } from 'node:http';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 import process from 'node:process';
+import { createBrowserManager } from './backlog-browser.js';
 import { collectDashboardData } from './data.js';
 import { renderDashboard } from './render.js';
-import { createDebouncedReloader, createReloadBroker, createRunApiHandler, DASHBOARD_PORT, recursiveWatchSupported, } from './server.js';
+import { createDebouncedReloader, createReloadBroker, DASHBOARD_PORT, recursiveWatchSupported, } from './server.js';
 import { atomicWrite } from '../lib/atomic.js';
 import { projectSlug, realpathKey } from '../lib/slug.js';
 import { KIT_VERSION } from '../lib/version.js';
@@ -86,6 +87,7 @@ export async function startHubServer(opts) {
         entry.reloader.cancel();
         entry.broker.close();
         entry.watcher?.close();
+        entry.browser.close();
     }
     function register(project) {
         let computed;
@@ -133,7 +135,7 @@ export async function startHubServer(opts) {
             broker,
             reloader,
             watcher: watchBacklog(project.cwd, reloader),
-            runApi: createRunApiHandler(project.cwd),
+            browser: createBrowserManager(project.cwd, opts.browserDeps),
             modelApi: createModelApiHandler(project.cwd),
         };
         projects.set(slug, entry);
@@ -238,8 +240,9 @@ export async function startHubServer(opts) {
         }
         if (rest.startsWith('/api/')) {
             req.url = rest;
-            if (rest === '/api/run') {
-                await entry.runApi(req, res);
+            if (rest === '/api/backlog-browser' && method === 'POST') {
+                const result = await entry.browser.ensure();
+                sendJson(res, result.ok ? 200 : result.code, result);
                 return;
             }
             if (entry.broker.handler(req, res)) {

package/dist/dashboard/render.js

@@ -5,14 +5,14 @@ import { fileURLToPath } from 'node:url';
 /** The nine pipeline phases; must stay consistent with src/templates/workflow-block.md. */
 export const PIPELINE_PHASES = [
     { n: 1, name: 'Idea', gate: 'User states a need; capture it before doing anything else' },
-    { n: 2, name: 'Brainstorming', gate: 'Explore intent, requirements and design before any creative work' },
+    { n: 2, name: 'Brainstorming', gate: 'Explore intent, requirements and design before any creative work', command: '/superpowers:brainstorming' },
     { n: 3, name: 'Design gate', gate: 'Human approves the design document' },
-    { n: 4, name: 'Spec-to-backlog', gate: 'Decompose the approved design into reviewed tasks with acceptance criteria' },
-    { n: 5, name: 'Review gate', gate: 'Human reviews specs and acceptance criteria before any code exists' },
-    { n: 6, name: 'Plan-before-code', gate: 'A written implementation plan is approved by the human' },
-    { n: 7, name: 'TDD implementation', gate: 'Failing test first, then code; one task per session/PR' },
-    { n: 8, name: 'Verification & final summary', gate: 'Run tests/lint/typecheck; verification evidence before success claims' },
-    { n: 9, name: 'Merge & archive', gate: 'Merge the branch, then close/archive the task via the backlog CLI' },
+    { n: 4, name: 'Spec-to-backlog', gate: 'Decompose the approved design into reviewed tasks with acceptance criteria', command: '/spec-to-backlog' },
+    { n: 5, name: 'Review gate', gate: 'Human reviews specs and acceptance criteria before any code exists', command: '/task-review-gate' },
+    { n: 6, name: 'Plan-before-code', gate: 'A written implementation plan is approved by the human', command: '/superpowers:writing-plans' },
+    { n: 7, name: 'TDD implementation', gate: 'Failing test first, then code; one task per session/PR', command: '/superpowers:subagent-driven-development' },
+    { n: 8, name: 'Verification & final summary', gate: 'Run tests/lint/typecheck; verification evidence before success claims', command: '/superpowers:verification-before-completion' },
+    { n: 9, name: 'Merge & archive', gate: 'Merge the branch, then close/archive the task via the backlog CLI', command: 'backlog task archive <id>' },
 ];
 function readTemplate() {
     const here = dirname(fileURLToPath(import.meta.url)); // src/dashboard at dev time, dist/dashboard at runtime

package/dist/dashboard/server.js

@@ -2,83 +2,7 @@
 import { spawn } from 'node:child_process';
 import { isAbsolute, join } from 'node:path';
 import process from 'node:process';
-import crossSpawn from 'cross-spawn';
-import { resolveBacklogBin } from '../lib/run.js';
 export const DASHBOARD_PORT = 6428;
-const WHITELIST = new Map([
-    ['browser', ['browser']],
-    ['board', ['board']],
-]);
-function isRecord(v) {
-    return typeof v === 'object' && v !== null && !Array.isArray(v);
-}
-async function readBody(req) {
-    const chunks = [];
-    for await (const chunk of req) {
-        chunks.push(Buffer.from(chunk));
-    }
-    return Buffer.concat(chunks).toString('utf8');
-}
-/** Safe /api/run handler: only whitelisted backlog subcommands may be spawned. */
-export function createRunApiHandler(cwd) {
-    return async (req, res) => {
-        if (req.url !== '/api/run') {
-            res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
-            res.end('not found');
-            return;
-        }
-        if (req.method !== 'POST') {
-            res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
-            res.end('not found');
-            return;
-        }
-        let body;
-        try {
-            body = await readBody(req);
-        }
-        catch {
-            res.writeHead(400, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ error: 'failed to read body' }));
-            return;
-        }
-        let payload;
-        try {
-            payload = JSON.parse(body);
-        }
-        catch {
-            res.writeHead(400, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ error: 'invalid json' }));
-            return;
-        }
-        if (!isRecord(payload) || typeof payload.command !== 'string' || !WHITELIST.has(payload.command)) {
-            res.writeHead(400, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ error: 'unknown command' }));
-            return;
-        }
-        const bin = resolveBacklogBin(cwd);
-        if (!bin) {
-            res.writeHead(503, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ error: 'backlog cli not found' }));
-            return;
-        }
-        const args = WHITELIST.get(payload.command);
-        try {
-            const child = crossSpawn(bin, args, {
-                cwd,
-                detached: true,
-                stdio: 'ignore',
-            });
-            child.on('error', () => { });
-            child.unref();
-            res.writeHead(200, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ ok: true }));
-        }
-        catch (err) {
-            res.writeHead(500, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ error: err instanceof Error ? err.message : String(err) }));
-        }
-    };
-}
 /** SSE broker: keeps a set of response objects and broadcasts named events. */
 export function createReloadBroker() {
     const clients = new Set();

package/dist/lib/version-check.js

@@ -8,7 +8,8 @@ const FETCH_TIMEOUT_MS = 2000;
 function cachePath(home) {
     return join(home, '.super-backlog', 'version-check.json');
 }
-function isNewer(latest, installed) {
+/** Triple-numeric semver compare; non-numeric parts are treated as not newer. */
+export function isNewerVersion(latest, installed) {
     const a = latest.split('.').slice(0, 3).map(Number);
     const b = installed.split('.').slice(0, 3).map(Number);
     if (a.length < 3 || b.length < 3)
@@ -106,7 +107,7 @@ export async function applyVersionHint(installed, deps) {
     if (deps.env.SBL_SKIP_UPDATE_CHECK)
         return;
     const cache = readCache(deps.home);
-    if (cache && isNewer(cache.latest, installed)) {
+    if (cache && isNewerVersion(cache.latest, installed)) {
         deps.log(`super-backlog ${cache.latest} is available (installed ${installed}). Update: npm i -g super-backlog`);
     }
     if (!cache || isStale(cache.checkedAt, deps.now())) {

package/dist/models/dashboard-api.js

@@ -1,18 +1,47 @@
+// src/models/dashboard-api.ts
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
 import { loadConfig } from './config.js';
 import { discoverModels } from './discovery.js';
-export function createModelApiHandler(cwd) {
+import { writeResolvedTiers, writeRouterConfig } from './install.js';
+function sendJson(res, status, body) {
+    res.writeHead(status, { 'content-type': 'application/json' });
+    res.end(JSON.stringify(body));
+}
+function routerInstalled(cwd) {
+    return existsSync(join(cwd, '.super-backlog', 'models.json'));
+}
+export function createModelApiHandler(cwd, deps = {}) {
+    const discover = deps.discover ?? discoverModels;
     return async (req, res) => {
         const url = req.url ?? '/';
         const method = req.method ?? 'GET';
         if (method === 'GET' && url === '/api/models') {
-            res.writeHead(200, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ config: loadConfig(cwd), status: 'ok' }));
+            sendJson(res, 200, { config: loadConfig(cwd), installed: routerInstalled(cwd), status: 'ok' });
+            return;
+        }
+        if (method === 'POST' && (url === '/api/models/enable' || url === '/api/models/disable')) {
+            const enabled = url === '/api/models/enable';
+            try {
+                writeRouterConfig(cwd, enabled);
+                sendJson(res, 200, { ok: true, config: loadConfig(cwd), installed: routerInstalled(cwd) });
+            }
+            catch (err) {
+                sendJson(res, 500, { ok: false, message: err instanceof Error ? err.message : String(err) });
+            }
             return;
         }
         if (method === 'POST' && url === '/api/models/discover') {
-            const result = await discoverModels(cwd);
-            res.writeHead(200, { 'content-type': 'application/json' });
-            res.end(JSON.stringify(result ?? { error: 'discovery failed' }));
+            const result = await discover(cwd);
+            if (result) {
+                try {
+                    writeResolvedTiers(cwd, result);
+                }
+                catch {
+                    // discovery result still returned; the modal just won't remember it
+                }
+            }
+            sendJson(res, 200, result ?? { error: 'discovery failed' });
             return;
         }
         res.writeHead(404, { 'content-type': 'text/plain' });

package/dist/models/install.js

@@ -6,13 +6,20 @@ import { loadConfig } from './config.js';
 const CONFIG_DIR = '.super-backlog';
 const CONFIG_FILE = 'models.json';
 export function writeRouterConfig(cwd, enabled) {
+    writeConfigPatch(cwd, { enabled });
+    return true;
+}
+/** Persist discovered tiers so the dashboard shows them across sessions. */
+export function writeResolvedTiers(cwd, resolved) {
+    writeConfigPatch(cwd, { resolved });
+}
+function writeConfigPatch(cwd, patch) {
     const dir = join(cwd, CONFIG_DIR);
     const path = join(dir, CONFIG_FILE);
     if (!existsSync(dir)) {
         mkdirSync(dir, { recursive: true });
     }
     const current = loadConfig(cwd);
-    const next = { ...current, enabled };
+    const next = { ...current, ...patch };
     atomicWrite(path, `${JSON.stringify(next, null, 2)}\n`);
-    return true;
 }

package/dist/templates/dashboard.html

@@ -107,8 +107,9 @@
   }
 
   /* ---------- Detail panel ---------- */
+  dialog { margin: auto; } /* the global reset removes the UA margin that centers dialogs */
   #task-dialog {
-    width: min(640px, 92vw); max-height: 85vh; overflow-y: auto; padding: 0;
+    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);
@@ -122,8 +123,45 @@
     #task-dialog[open] { animation: none; }
   }
   @keyframes sbl-dialog-in { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
-  .dialog-content { padding: 22px 24px 28px; }
-  .detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+
+  /* ---------- Backlog browser overlay ---------- */
+  #backlog-dialog {
+    width: 96vw; height: 94vh; max-width: none; max-height: none; padding: 0;
+    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);
+  }
+  #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); }
+  @media (prefers-reduced-motion: reduce) {
+    #backlog-dialog[open] { animation: none; }
+  }
+  .backlog-dialog-bar {
+    display: flex; align-items: center; gap: 14px; padding: 8px 14px;
+    border-bottom: 1px solid var(--line-strong); background: var(--surface-2);
+  }
+  .backlog-dialog-title { font-weight: 700; font-size: .9rem; }
+  .backlog-dialog-bar a {
+    margin-left: auto; font-family: var(--mono); font-size: .72rem;
+    color: var(--muted); text-decoration: none;
+  }
+  .backlog-dialog-bar a:hover { color: var(--accent); }
+  #backlog-close {
+    font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
+    color: var(--muted); background: none; border: 1px solid transparent;
+    border-radius: 8px; padding: 4px 10px;
+  }
+  #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; }
+  .detail-head {
+    position: sticky; top: 0; z-index: 1;
+    display: flex; align-items: center; gap: 10px;
+    margin: 0 -24px 12px; padding: 16px 24px 12px;
+    background: var(--surface); border-bottom: 1px solid var(--line);
+  }
   .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); }
@@ -132,13 +170,31 @@
   .status-chip[data-tone="danger"] { color: var(--danger); border-color: #5c2c2c; 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.18rem; font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; }
-  #task-dialog .detail-desc { color: var(--muted); margin-bottom: 14px; white-space: normal; }
-  #task-dialog h4 { color: var(--dim); font-size: .7rem; letter-spacing: 1.3px; text-transform: uppercase; margin: 16px 0 6px; }
-  .meta-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--muted); }
-  .meta-row span { display: flex; align-items: center; gap: 4px; }
-  .meta-label { color: var(--dim); }
+  .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; }
+  #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));
+    gap: 12px 18px; margin: 16px 0 4px; padding: 14px 16px;
+    border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
+  }
+  .meta-cell .meta-label {
+    display: block; color: var(--dim); font-size: .66rem;
+    letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 4px;
+  }
+  .meta-value { font-size: .88rem; color: var(--text); overflow-wrap: anywhere; }
+  .meta-value.empty { color: var(--dim); }
+  .meta-value[data-tone="danger"] { color: var(--danger); }
+  .meta-value[data-tone="warn"] { color: var(--warn); }
+  .meta-value[data-tone="dim"] { color: var(--muted); }
+  .ac-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
+  .ac-count { font-family: var(--mono); font-size: .78rem; color: var(--muted); white-space: nowrap; }
+  .ac-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
+  .ac-bar-fill { height: 100%; border-radius: 999px; background: var(--ok); }
   .dep-row { display: flex; flex-wrap: wrap; gap: 6px; }
+  .dep-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 7px; background: var(--dim); }
+  .dep-dot.done { background: var(--ok); }
+  .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;
@@ -245,23 +301,98 @@
   .spark-axis { fill: var(--dim); font-size: 10px; font-family: var(--mono); }
 
   /* ---------- Pipeline stepper ---------- */
-  .stepper { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 4px 0 8px; }
-  .step { position: relative; min-width: 0; padding: 0 3px; text-align: center; }
+  .stepper { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; margin: 4px 0 6px; }
+  .step {
+    position: relative; min-width: 0; padding: 10px 4px 12px; text-align: center;
+    background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
+    font: inherit; color: inherit; transition: background .15s ease, border-color .15s ease;
+  }
   .step::before {
-    content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
+    content: ""; position: absolute; top: 27px; left: -50%; width: 100%; height: 2px;
     background: var(--line-strong); z-index: 0;
   }
   .step:first-child::before { display: none; }
+  .step:hover { background: var(--surface-2); border-color: var(--line); }
+  .step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .step[aria-expanded="true"] { background: var(--accent-dim); border-color: var(--accent); }
+  .step[aria-expanded="true"].gate { border-color: var(--warn); background: var(--warn-bg); }
   .step-num {
-    position: relative; z-index: 1; width: 32px; height: 32px; margin: 0 auto 8px;
+    position: relative; z-index: 1; width: 34px; height: 34px; margin: 0 auto 10px;
     display: flex; align-items: center; justify-content: center;
-    border-radius: 50%; font-family: var(--mono); font-size: .82rem; font-weight: 700;
+    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-label { font-size: .63rem; color: var(--muted); line-height: 1.35; }
-  .step-label b { display: block; color: var(--text); font-size: .71rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .step.gate .step-label b { color: var(--warn); }
+  .step-label {
+    display: block; font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.3;
+    overflow-wrap: break-word;
+  }
+  .step.gate .step-label { color: var(--warn); }
+
+  /* ---------- Phase detail panel ---------- */
+  #phase-detail {
+    margin: 2px 0 12px; padding: 14px 18px; border: 1px solid var(--line-strong);
+    border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface);
+  }
+  #phase-detail.open { animation: phasein .18s ease; }
+  #phase-detail.gate { border-left-color: var(--warn); }
+  @keyframes phasein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+  .phase-detail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
+  .phase-detail-num { font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--accent); }
+  #phase-detail.gate .phase-detail-num { color: var(--warn); }
+  .phase-detail-name { font-size: 1rem; font-weight: 700; }
+  .phase-detail-gate { margin: 0 0 10px; font-size: .88rem; line-height: 1.55; color: var(--muted); }
+  .phase-cmd {
+    display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px;
+    font: inherit; cursor: pointer; border-radius: 8px;
+    background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text);
+    transition: border-color .15s ease;
+  }
+  .phase-cmd:hover { border-color: var(--accent); }
+  .phase-cmd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .phase-cmd .cmd-line { font-family: var(--mono); font-size: .8rem; color: var(--accent); }
+  .phase-cmd .cmd-title { font-size: .72rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
+  @media (prefers-reduced-motion: reduce) {
+    .step, .phase-cmd { transition: none; }
+    #phase-detail.open { animation: none; }
+  }
+
+  /* ---------- Sidebar version + update badge ---------- */
+  .side-version {
+    display: flex; align-items: center; gap: 8px; margin: 6px 0 2px;
+    font-family: var(--mono); font-size: .78rem; color: var(--dim);
+  }
+  .update-badge {
+    font: inherit; font-family: var(--mono); font-size: .68rem; cursor: pointer;
+    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: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);
+  }
+  #models-dialog::backdrop { background: rgba(4,7,12,.65); backdrop-filter: blur(2px); }
+  #models-dialog[open] { animation: sbl-dialog-in .18s ease-out; }
+  @media (prefers-reduced-motion: reduce) {
+    #models-dialog[open] { animation: none; }
+  }
+  .phase-cmd:disabled { opacity: .6; cursor: default; }
+  .models-head-title { font-weight: 700; }
+  .models-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
 
   /* ---------- Dependency flow ---------- */
   .sub-head {
@@ -302,6 +433,8 @@
 <aside class="sbl-side">
   <div class="brand"><span class="brand-glyph">●</span><b>__PROJECT_NAME__</b></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>
@@ -322,14 +455,12 @@
 <main>
 
 <section id="sec-01">
-  <div class="sec-head"><span class="sec-num">01</span><h2>Board &amp; Quick Actions</h2><span class="tagline">commands &middot; board mirror only</span></div>
+  <div class="sec-head"><span class="sec-num">01</span><h2>Board &amp; Quick Actions</h2><span class="tagline">the full Backlog.md UI &middot; one click away</span></div>
   <div id="quickactions" class="mount">
     <div class="cmd-row" id="cmd-buttons">
-      <button type="button" class="cmd-btn" data-cmd="browser"><span class="cmd-title">Backlog Browser</span><span class="cmd-line">backlog browser</span></button>
-      <button type="button" class="cmd-btn" data-cmd="board"><span class="cmd-title">Backlog Board</span><span class="cmd-line">backlog board</span></button>
-      <button type="button" class="cmd-btn" data-copy="sbl dashboard"><span class="cmd-title">Live Dashboard</span><span class="cmd-line">sbl dashboard</span></button>
+      <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>
     </div>
-    <p class="hint">The board mirrors Backlog.md &mdash; it never writes execution state.</p>
+    <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>
@@ -373,8 +504,9 @@
 </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</span></div>
+  <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>
@@ -398,7 +530,27 @@
 </main>
 </div>
 
-<dialog id="task-dialog" aria-label="Task details"></dialog>
+<dialog id="task-dialog"></dialog>
+
+<dialog id="backlog-dialog" aria-label="Backlog browser">
+  <div class="backlog-dialog-bar">
+    <span class="backlog-dialog-title">Backlog</span>
+    <a id="backlog-open-tab" href="#" target="_blank" rel="noopener">open in new tab</a>
+    <button type="button" id="backlog-close" aria-label="Close">&#215;</button>
+  </div>
+  <iframe id="backlog-frame" title="Backlog.md browser"></iframe>
+</dialog>
+
+<dialog id="models-dialog" aria-label="Model router">
+  <div class="dialog-content">
+    <div class="detail-head">
+      <span class="detail-id">MODELS</span>
+      <span class="models-head-title">Model router</span>
+      <button type="button" class="detail-close" id="models-close" aria-label="Close">&#215;</button>
+    </div>
+    <div id="models-body"></div>
+  </div>
+</dialog>
 <div id="sbl-tip" role="tooltip" hidden></div>
 
 <script type="application/json" id="sbl-data">__SBL_DATA_JSON__</script>
@@ -421,6 +573,16 @@
     badge.textContent = data.source === 'fallback-empty' ? 'no live data' : 'live backlog data';
   }
 
+  var sideVersion = $('#side-version');
+  if (sideVersion && data.latestVersion) {
+    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.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 };
   function field(task, key) {
@@ -511,26 +673,134 @@
   /* ---------- Quick action buttons ---------- */
   function cmdFeedback(btn, text) {
     var title = btn.querySelector('.cmd-title');
-    if (!title || btn.getAttribute('data-busy')) return;
-    btn.setAttribute('data-busy', '1');
-    var orig = title.textContent;
+    if (!title) return;
+    if (btn.__sblFbTimer) {
+      clearTimeout(btn.__sblFbTimer); /* newer feedback overrides the pending one */
+    } else {
+      btn.__sblFbOrig = title.textContent;
+    }
     title.textContent = text;
-    setTimeout(function () { title.textContent = orig; btn.removeAttribute('data-busy'); }, 1200);
+    btn.__sblFbTimer = setTimeout(function () {
+      title.textContent = btn.__sblFbOrig;
+      btn.__sblFbTimer = null;
+    }, 1200);
   }
   function copyCommand(btn, command) {
     if (navigator.clipboard) navigator.clipboard.writeText(command).catch(function () {});
     cmdFeedback(btn, 'copied \u2713');
   }
-  document.querySelectorAll('#cmd-buttons .cmd-btn').forEach(function (b) {
-    b.addEventListener('click', function () {
-      var copy = b.getAttribute('data-copy');
-      if (copy) { copyCommand(b, copy); return; }
-      var cmd = b.getAttribute('data-cmd');
-      fetch('api/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ command: cmd }) })
-        .then(function (res) { if (!res.ok) throw new Error('run failed'); cmdFeedback(b, 'started \u2713'); })
+  var backlogBtn = document.getElementById('backlog-btn');
+  var backlogDialog = document.getElementById('backlog-dialog');
+  var backlogFrame = document.getElementById('backlog-frame');
+  var backlogTab = document.getElementById('backlog-open-tab');
+  function openBacklog(url) {
+    if (!backlogDialog || !backlogFrame) return;
+    if (backlogFrame.getAttribute('src') !== url) backlogFrame.setAttribute('src', url);
+    if (backlogTab) backlogTab.setAttribute('href', url);
+    backlogDialog.showModal();
+  }
+  if (backlogBtn) {
+    backlogBtn.addEventListener('click', function () {
+      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 }; }); })
+        .then(function (r) {
+          if (!r.ok || !r.data || !r.data.url) throw new Error('start failed');
+          openBacklog(r.data.url);
+        })
+        .catch(function () { cmdFeedback(backlogBtn, 'failed \u2717'); });
+    });
+  }
+  var backlogClose = document.getElementById('backlog-close');
+  if (backlogClose && backlogDialog) {
+    backlogClose.addEventListener('click', function () { backlogDialog.close(); });
+    backlogDialog.addEventListener('click', function (e) {
+      if (e.target === backlogDialog) backlogDialog.close();
+    });
+  }
+
+  /* ---------- Models modal ---------- */
+  var modelsBtn = document.getElementById('models-btn');
+  var modelsDialog = document.getElementById('models-dialog');
+  var modelsBody = document.getElementById('models-body');
+  function tierCell(label, value) {
+    var c = el('div', 'meta-cell');
+    c.appendChild(el('span', 'meta-label', label));
+    c.appendChild(el('span', 'meta-value' + (value ? '' : ' empty'), value || '—'));
+    return c;
+  }
+  function actionButton(cmdLine, label, onClick) {
+    var b = el('button', 'phase-cmd');
+    b.type = 'button';
+    b.appendChild(el('span', 'cmd-line', cmdLine));
+    b.appendChild(el('span', 'cmd-title', label));
+    b.addEventListener('click', onClick);
+    return b;
+  }
+  function renderTiers(mount, tiers) {
+    mount.textContent = '';
+    if (!tiers || tiers.error || (!tiers.workhorse && !tiers.budget)) {
+      mount.appendChild(el('p', 'hint', 'Discovery failed — is the OpenCode CLI available?'));
+      return;
+    }
+    mount.appendChild(tierCell('Workhorse', tiers.workhorse));
+    mount.appendChild(tierCell('Budget', tiers.budget));
+  }
+  function renderModelsDialog(info) {
+    if (!modelsBody) return;
+    modelsBody.textContent = '';
+    var enabled = !!(info.config && info.config.enabled);
+    var row = el('div', 'models-row');
+    var chip = el('span', 'status-chip', info.installed ? (enabled ? 'enabled' : 'disabled') : 'not installed');
+    if (info.installed) chip.setAttribute('data-tone', enabled ? 'ok' : 'warn');
+    row.appendChild(chip);
+    var toggle = actionButton(
+      enabled ? 'sbl models disable' : 'sbl models enable',
+      enabled ? 'disable' : 'enable',
+      function () {
+        fetch('api/models/' + (enabled ? 'disable' : 'enable'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+          .then(function (res) { if (!res.ok) throw new Error('toggle failed'); return res.json(); })
+          .then(function (next) { renderModelsDialog(next); })
+          .catch(function () { cmdFeedback(toggle, 'failed ✗'); });
+      },
+    );
+    row.appendChild(toggle);
+    var discover = actionButton('sbl models discover', 'run', function () {
+      discover.disabled = true;
+      cmdFeedback(discover, 'running…');
+      fetch('api/models/discover', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+        .then(function (res) { return res.json(); })
+        .then(function (r) { renderTiers(document.getElementById('models-tiers'), r); })
+        .catch(function () { cmdFeedback(discover, 'failed ✗'); })
+        .then(function () { discover.disabled = false; });
+    });
+    row.appendChild(discover);
+    modelsBody.appendChild(row);
+    var tiers = el('div', 'detail-meta');
+    tiers.id = 'models-tiers';
+    var resolved = (info.config && info.config.resolved) || {};
+    tiers.appendChild(tierCell('Workhorse', resolved.workhorse));
+    tiers.appendChild(tierCell('Budget', resolved.budget));
+    modelsBody.appendChild(tiers);
+    if (!info.installed) {
+      modelsBody.appendChild(el('p', 'hint', 'Install the router first, then enable it:'));
+      var hint = actionButton('sbl init --models', 'copy', function () { copyCommand(hint, 'sbl init --models'); });
+      modelsBody.appendChild(hint);
+    }
+  }
+  if (modelsBtn && modelsDialog) {
+    modelsBtn.addEventListener('click', function () {
+      fetch('api/models')
+        .then(function (res) { if (!res.ok) throw new Error('load failed'); return res.json(); })
+        .then(function (info) { renderModelsDialog(info); modelsDialog.showModal(); })
         .catch(function () {});
     });
-  });
+    var modelsClose = document.getElementById('models-close');
+    if (modelsClose) modelsClose.addEventListener('click', function () { modelsDialog.close(); });
+    modelsDialog.addEventListener('click', function (e) {
+      if (e.target === modelsDialog) modelsDialog.close();
+    });
+  }
 
   /* ---------- Drafts ---------- */
   function renderDrafts(drafts) {
@@ -702,23 +972,60 @@
     mount.appendChild(svg);
   }
 
+  function renderPhaseDetail(panel, p, isGate) {
+    panel.textContent = '';
+    panel.classList.toggle('gate', isGate);
+    var head = el('div', 'phase-detail-head');
+    head.appendChild(el('span', 'phase-detail-num', String(p.n).padStart(2, '0')));
+    head.appendChild(el('span', 'phase-detail-name', p.name));
+    panel.appendChild(head);
+    panel.appendChild(el('p', 'phase-detail-gate', p.gate));
+    if (p.command) {
+      var cmd = el('button', 'phase-cmd');
+      cmd.type = 'button';
+      cmd.appendChild(el('span', 'cmd-line', p.command));
+      cmd.appendChild(el('span', 'cmd-title', 'copy'));
+      cmd.addEventListener('click', function () { copyCommand(cmd, p.command); });
+      panel.appendChild(cmd);
+    }
+    panel.hidden = false;
+    panel.classList.remove('open');
+    void panel.offsetWidth; /* restart the open animation on re-render */
+    panel.classList.add('open');
+  }
+
   function renderStepper(mount, phases) {
     mount.textContent = '';
     if (!phases || phases.length === 0) {
       mount.appendChild(el('p', 'hint', 'Pipeline unavailable.'));
       return;
     }
+    var panel = document.getElementById('phase-detail');
     var wrap = el('div', 'stepper');
+    var current = null;
     phases.forEach(function (p) {
-      var step = el('div', 'step' + (/gate/i.test(String(p.name)) ? ' gate' : ''));
+      var isGate = /gate/i.test(String(p.name));
+      var step = el('button', 'step' + (isGate ? ' gate' : ''));
+      step.type = 'button';
       step.setAttribute('data-phase', p.n);
+      step.setAttribute('aria-expanded', 'false');
+      step.setAttribute('aria-controls', 'phase-detail');
       step.appendChild(el('div', 'step-num', String(p.n)));
-      var lab = el('div', 'step-label');
-      var b = document.createElement('b');
-      b.textContent = p.name;
-      lab.appendChild(b);
-      lab.appendChild(document.createTextNode(p.gate));
-      step.appendChild(lab);
+      step.appendChild(el('span', 'step-label', p.name));
+      step.addEventListener('click', function () {
+        if (!panel) return;
+        var wasOpen = current === step;
+        wrap.querySelectorAll('.step').forEach(function (s) { s.setAttribute('aria-expanded', 'false'); });
+        if (wasOpen) {
+          panel.hidden = true;
+          panel.classList.remove('open');
+          current = null;
+          return;
+        }
+        step.setAttribute('aria-expanded', 'true');
+        current = step;
+        renderPhaseDetail(panel, p, isGate);
+      });
       wrap.appendChild(step);
     });
     mount.appendChild(wrap);
@@ -830,32 +1137,67 @@
     return list;
   }
   function depSection(titleText, ids) {
+    var valid = ids.filter(function (id) { return findTask(id); });
+    if (valid.length === 0) return null;
     var block = el('div');
     block.appendChild(el('h4', '', titleText));
     var row = el('div', 'dep-row');
-    ids.filter(function (id) { return findTask(id); }).forEach(function (id) {
-      var btn = el('button', 'dep-link', id);
+    valid.forEach(function (id) {
+      var dep = findTask(id);
+      var btn = el('button', 'dep-link');
       btn.type = 'button';
+      var dot = el('span', 'dep-dot' + (dep && isDoneStatus(dep.status) ? ' done' : ''));
+      dot.setAttribute('aria-hidden', 'true');
+      btn.appendChild(dot);
+      btn.appendChild(document.createTextNode(id));
       btn.addEventListener('click', function () { openDetail(id); });
       row.appendChild(btn);
     });
-    if (row.children.length === 0) row.appendChild(el('p', 'detail-empty', 'None'));
     block.appendChild(row);
     return block;
   }
-  function metaRow(task) {
-    var row = el('div', 'meta-row');
-    function item(label, value) {
-      var s = el('span');
-      s.appendChild(el('span', 'meta-label', label + ': '));
-      s.appendChild(document.createTextNode(value || '—'));
-      return s;
+  var PRIORITY_TONE = { high: 'danger', medium: 'warn', low: 'dim' };
+  function priorityTone(priority) {
+    return PRIORITY_TONE[String(priority || '').toLowerCase()] || '';
+  }
+  function metaGrid(task) {
+    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;
     }
-    row.appendChild(item('Milestone', task.milestone));
-    row.appendChild(item('Priority', task.priority));
-    row.appendChild(item('Assignee', task.assignee));
-    row.appendChild(item('Updated', task.updated));
-    return row;
+    grid.appendChild(cell('Milestone', task.milestone));
+    grid.appendChild(cell('Priority', task.priority, priorityTone(task.priority)));
+    grid.appendChild(cell('Assignee', task.assignee));
+    grid.appendChild(cell('Updated', task.updated));
+    return grid;
+  }
+  function descParagraphs(text) {
+    var frag = document.createDocumentFragment();
+    String(text).split(/\n\s*\n/).forEach(function (para) {
+      var trimmed = para.trim();
+      if (trimmed !== '') frag.appendChild(el('p', 'detail-desc', trimmed));
+    });
+    return frag;
+  }
+  function acSection(task) {
+    var frag = document.createDocumentFragment();
+    var done = task.acs.filter(function (ac) { return ac.checked; }).length;
+    frag.appendChild(el('h4', '', 'Acceptance criteria'));
+    var progress = el('div', 'ac-progress');
+    progress.appendChild(el('span', 'ac-count', done + ' / ' + task.acs.length + ' done'));
+    var bar = el('div', 'ac-bar');
+    var fill = el('div', 'ac-bar-fill');
+    fill.style.width = task.acs.length > 0 ? Math.round((done / task.acs.length) * 100) + '%' : '0%';
+    bar.appendChild(fill);
+    progress.appendChild(bar);
+    frag.appendChild(progress);
+    frag.appendChild(acList(task));
+    return frag;
   }
   function openDetail(id) {
     var t = findTask(id);
@@ -872,15 +1214,29 @@
     closeBtn.addEventListener('click', closeDetail);
     head.appendChild(closeBtn);
     content.appendChild(head);
-    content.appendChild(el('h3', 'detail-title', t.title));
-    content.appendChild(el('p', 'detail-desc', t.description || 'No description.'));
-    content.appendChild(metaRow(t));
-    if (t.acs.length > 0) {
-      content.appendChild(el('h4', '', 'Acceptance criteria'));
-      content.appendChild(acList(t));
+    var title = el('h3', 'detail-title', t.title);
+    title.id = 'detail-title-h';
+    dialog.setAttribute('aria-labelledby', 'detail-title-h');
+    content.appendChild(title);
+    if (t.description) {
+      content.appendChild(descParagraphs(t.description));
+    } else {
+      content.appendChild(el('p', 'detail-desc', 'No description.'));
     }
-    content.appendChild(depSection('Depends on', depsOut[id] || []));
-    content.appendChild(depSection('Needed by', depsIn[id] || []));
+    content.appendChild(metaGrid(t));
+    if (t.acs.length > 0) content.appendChild(acSection(t));
+    var out = depSection('Depends on', depsOut[id] || []);
+    if (out) content.appendChild(out);
+    var inn = depSection('Needed by', depsIn[id] || []);
+    if (inn) content.appendChild(inn);
+    var cmd = el('button', 'phase-cmd detail-cmd');
+    cmd.type = 'button';
+    /* backlog task ids are TASK-<n>; other prefixes fall back to the raw id */
+    var cmdLine = 'backlog task edit ' + t.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();

package/package.json

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