dw-kit 1.4.0 → 1.6.0-rc.1

package/src/commands/task-rotate.mjs

@@ -0,0 +1,168 @@
+import { readFileSync, writeFileSync, existsSync, appendFileSync, statSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+import chalk from 'chalk';
+import { parseTimeline } from '../lib/timeline-parser.mjs';
+import { logEvent } from '../lib/telemetry.mjs';
+
+const TASKS_DIR = '.dw/tasks';
+const SECTION_4_MAX_LINES = 400;
+const KEEP_RECENT_ENTRIES = 8;
+
+function findV3Tasks(rootDir) {
+  const tasksRoot = join(rootDir, TASKS_DIR);
+  if (!existsSync(tasksRoot)) return [];
+  return readdirSync(tasksRoot)
+    .filter((e) => e !== 'archive' && e !== 'ACTIVE.md')
+    .map((e) => ({ name: e, path: join(tasksRoot, e) }))
+    .filter((e) => {
+      try { return statSync(e.path).isDirectory() && existsSync(join(e.path, 'task.md')); }
+      catch { return false; }
+    });
+}
+
+function splitChangelogEntries(text) {
+  const lines = text.split('\n');
+  const entries = [];
+  let header = [];
+  let current = null;
+  let preEntries = [];
+  for (const line of lines) {
+    const heading = line.match(/^###\s+/);
+    if (heading) {
+      if (current) entries.push(current);
+      current = { headerLine: line, bodyLines: [] };
+    } else if (current) {
+      current.bodyLines.push(line);
+    } else {
+      preEntries.push(line);
+    }
+  }
+  if (current) entries.push(current);
+  return { preEntries, entries };
+}
+
+function rotateTimeline(taskDir, opts = {}) {
+  const timelineFile = join(taskDir, 'task.md');
+  if (!existsSync(timelineFile)) {
+    return { ok: false, reason: 'no-timeline' };
+  }
+
+  const content = readFileSync(timelineFile, 'utf8');
+  const parsed = parseTimeline(content);
+  const sec4 = parsed.sections[4];
+  if (!sec4) return { ok: false, reason: 'no-section-4' };
+
+  const lineCount = sec4.text.split('\n').length;
+  if (lineCount <= SECTION_4_MAX_LINES) {
+    return { ok: true, rotated: false, lineCount, reason: 'under-cap' };
+  }
+
+  const { preEntries, entries } = splitChangelogEntries(sec4.text);
+  if (entries.length <= KEEP_RECENT_ENTRIES) {
+    return { ok: true, rotated: false, lineCount, reason: 'few-entries' };
+  }
+
+  const keep = entries.slice(0, KEEP_RECENT_ENTRIES);
+  const rotated = entries.slice(KEEP_RECENT_ENTRIES);
+
+  const historyFile = join(taskDir, 'timeline-history.md');
+  const today = new Date().toISOString().slice(0, 10);
+
+  const historyChunk = [
+    `<!-- Auto-rotated from task.md Section 4 on ${today} -->`,
+    '',
+    ...rotated.map((e) => [e.headerLine, ...e.bodyLines].join('\n').trimEnd()),
+    '',
+  ].join('\n');
+
+  if (opts.dryRun) {
+    return {
+      ok: true,
+      rotated: true,
+      dryRun: true,
+      lineCount,
+      historyFile,
+      rotatedCount: rotated.length,
+      kept: keep.length,
+    };
+  }
+
+  if (existsSync(historyFile)) {
+    appendFileSync(historyFile, '\n' + historyChunk, 'utf8');
+  } else {
+    const header = [
+      `# Timeline History — ${parsed.title || taskDir.split(/[\\/]/).pop()}`,
+      '',
+      '<!-- Auto-rotated overflow from task.md Section 4. Newest entries at top. -->',
+      '',
+    ].join('\n');
+    writeFileSync(historyFile, header + historyChunk, 'utf8');
+  }
+
+  const newSec4Body = [
+    `> Older entries auto-rotated to [\`timeline-history.md\`](./timeline-history.md) on ${today} (kept last ${KEEP_RECENT_ENTRIES}).`,
+    '',
+    preEntries.join('\n').trim(),
+    '',
+    ...keep.map((e) => [e.headerLine, ...e.bodyLines].join('\n').trimEnd()),
+  ].join('\n');
+
+  const sec4Header = '## 4. Timeline / Changelog';
+  const sec4Index = content.indexOf(sec4Header);
+  const afterSec4 = content.slice(sec4Index + sec4Header.length);
+  const nextSecMatch = afterSec4.match(/^##\s+/m);
+  const sec4EndIdx = nextSecMatch ? sec4Index + sec4Header.length + nextSecMatch.index : content.length;
+
+  const newContent = content.slice(0, sec4Index + sec4Header.length) + '\n\n' + newSec4Body + '\n\n' + content.slice(sec4EndIdx);
+  writeFileSync(timelineFile, newContent, 'utf8');
+
+  return {
+    ok: true,
+    rotated: true,
+    lineCount,
+    historyFile,
+    rotatedCount: rotated.length,
+    kept: keep.length,
+  };
+}
+
+export async function taskRotateCommand(taskName, opts = {}) {
+  const rootDir = process.cwd();
+
+  let targets;
+  if (taskName) {
+    targets = [{ name: taskName, path: join(rootDir, TASKS_DIR, taskName) }];
+  } else {
+    targets = findV3Tasks(rootDir);
+  }
+
+  if (targets.length === 0) {
+    if (!opts.quiet) console.log(chalk.dim('  No v3 tasks to rotate.'));
+    return;
+  }
+
+  let rotatedCount = 0;
+  for (const t of targets) {
+    const r = rotateTimeline(t.path, opts);
+    if (r.rotated) {
+      rotatedCount++;
+      if (!opts.quiet) {
+        console.log(chalk.green(`  ✓  ${t.name} — rotated ${r.rotatedCount} entries to timeline-history.md (kept ${r.kept})`));
+      }
+      logEvent({
+        event: 'task',
+        action: 'rotate.run',
+        name: t.name,
+        rotated: r.rotatedCount,
+        kept: r.kept,
+        dry_run: !!opts.dryRun,
+      }, rootDir);
+    } else if (!opts.quiet && r.ok) {
+      console.log(chalk.dim(`  · ${t.name} — under cap (${r.lineCount} lines)`));
+    }
+  }
+
+  if (!opts.quiet && rotatedCount === 0) {
+    console.log(chalk.dim(`  No rotations needed (Section 4 cap: ${SECTION_4_MAX_LINES} lines).`));
+  }
+}

package/src/commands/task-show.mjs

@@ -0,0 +1,137 @@
+import { readFileSync, existsSync, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import chalk from 'chalk';
+import { parseFrontmatter } from '../lib/frontmatter.mjs';
+import { parseTimeline, parseSubtaskTracker } from '../lib/timeline-parser.mjs';
+import { logEvent } from '../lib/telemetry.mjs';
+
+const TASKS_DIR = '.dw/tasks';
+
+const STATUS_COLOR = {
+  Draft: chalk.gray,
+  Approved: chalk.cyan,
+  'In Progress': chalk.yellow,
+  Blocked: chalk.red,
+  Paused: chalk.magenta,
+  Done: chalk.green,
+};
+
+const TRACKER_GLYPH_COLOR = {
+  '⬜': chalk.gray,
+  '🟡': chalk.yellow,
+  '✅': chalk.green,
+  '🔴': chalk.red,
+  '⏸': chalk.magenta,
+};
+
+function colorStatus(status) {
+  const fn = STATUS_COLOR[status] || chalk.white;
+  return fn.bold(status);
+}
+
+function colorTrackerStatus(s) {
+  for (const [glyph, color] of Object.entries(TRACKER_GLYPH_COLOR)) {
+    if (s.startsWith(glyph)) return color(s);
+  }
+  return s;
+}
+
+function resolveTaskDir(taskName, rootDir) {
+  if (taskName) return join(rootDir, TASKS_DIR, taskName);
+  const tasksRoot = join(rootDir, TASKS_DIR);
+  if (!existsSync(tasksRoot)) return null;
+  const candidates = readdirSync(tasksRoot)
+    .filter((e) => e !== 'archive' && e !== 'ACTIVE.md')
+    .map((e) => ({
+      name: e,
+      path: join(tasksRoot, e),
+    }))
+    .filter((e) => {
+      try { return statSync(e.path).isDirectory() && existsSync(join(e.path, 'task.md')); }
+      catch { return false; }
+    });
+  if (candidates.length === 0) return null;
+  if (candidates.length === 1) return candidates[0].path;
+  candidates.sort((a, b) => statSync(b.path).mtimeMs - statSync(a.path).mtimeMs);
+  return candidates[0].path;
+}
+
+export async function taskShowCommand(taskName, opts = {}) {
+  const rootDir = process.cwd();
+  const taskDir = resolveTaskDir(taskName, rootDir);
+
+  if (!taskDir) {
+    console.error(chalk.red('✗ No v3 task found.'));
+    console.error(chalk.dim('  Pass a task name or run from a project with .dw/tasks/{name}/task.md'));
+    process.exit(1);
+  }
+
+  const timelineFile = join(taskDir, 'task.md');
+  if (!existsSync(timelineFile)) {
+    console.error(chalk.red(`✗ Not a v3 task (no task.md): ${taskDir}`));
+    console.error(chalk.dim('  Run `dw task migrate` to upgrade v2 spec+tracking to v3.'));
+    process.exit(1);
+  }
+
+  const content = readFileSync(timelineFile, 'utf8');
+  const fm = parseFrontmatter(content);
+  const parsed = parseTimeline(content);
+
+  const taskId = fm.task_id || taskDir.split(/[\\/]/).pop();
+  logEvent({ event: 'task', action: 'show', name: taskId }, rootDir);
+
+  const width = 60;
+  const hr = chalk.dim('─'.repeat(width));
+
+  console.log();
+  console.log(chalk.bold.cyan(`  ${parsed.title || taskId}`));
+  console.log(`  ${hr}`);
+
+  const statusLine = colorStatus(fm.status || 'unknown');
+  const phase = fm.phase ? chalk.dim(` · ${fm.phase}`) : '';
+  console.log(`  ${chalk.bold('Status:')} ${statusLine}${phase}`);
+
+  if (fm.owner) console.log(`  ${chalk.bold('Owner:')}  ${fm.owner}`);
+  if (fm.depth) console.log(`  ${chalk.bold('Depth:')}  ${fm.depth}`);
+  if (fm.related_adr && fm.related_adr !== 'none') {
+    console.log(`  ${chalk.bold('ADR:')}    ${chalk.cyan(fm.related_adr)}`);
+  }
+  if (fm.target_ship) console.log(`  ${chalk.bold('Target:')} ${fm.target_ship}`);
+  if (fm.last_updated) console.log(`  ${chalk.bold('Updated:')} ${fm.last_updated}`);
+  const blockers = fm.blockers || 'none';
+  const blockersColor = blockers === 'none' ? chalk.green : chalk.red;
+  console.log(`  ${chalk.bold('Blockers:')} ${blockersColor(blockers)}`);
+
+  console.log(`  ${hr}`);
+
+  const tracker = parseSubtaskTracker(parsed.sections[3]?.text);
+  if (tracker.length > 0) {
+    console.log();
+    console.log(chalk.bold('  Subtask Tracker:'));
+    const idWidth = Math.max(4, ...tracker.map((r) => r.id.length));
+    for (const row of tracker) {
+      const id = row.id.padEnd(idWidth);
+      const status = colorTrackerStatus(row.status);
+      const date = row.date ? chalk.dim(` (${row.date})`) : '';
+      const truncatedName = row.name.length > 50 ? row.name.slice(0, 47) + '...' : row.name;
+      console.log(`    ${chalk.dim(id)}  ${status}  ${truncatedName}${date}`);
+    }
+  }
+
+  if (opts.verbose && parsed.sections[1]) {
+    console.log();
+    console.log(chalk.bold('  Snapshot:'));
+    const lines = parsed.sections[1].text.split('\n').filter(Boolean).slice(0, 10);
+    for (const l of lines) console.log(`    ${l}`);
+  }
+
+  console.log();
+  console.log(chalk.dim(`  File: ${timelineFile}`));
+  const svgPath = join(taskDir, 'timeline.svg');
+  if (existsSync(svgPath)) {
+    console.log(chalk.dim(`  SVG:  ${svgPath}`));
+  } else {
+    console.log(chalk.dim(`  SVG:  (not yet rendered — run \`dw task render\` or commit to trigger hook)`));
+  }
+  console.log();
+}

package/src/commands/task-view.mjs

@@ -0,0 +1,386 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync, statSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { execSync } from 'node:child_process';
+import chalk from 'chalk';
+import { parseFrontmatter } from '../lib/frontmatter.mjs';
+import { parseTimeline, parseSubtaskTracker, splitChangelogEntries } from '../lib/timeline-parser.mjs';
+import { logEvent } from '../lib/telemetry.mjs';
+
+const TASKS_DIR = '.dw/tasks';
+const CACHE_DIR = '.dw/cache/preview';
+
+const STATUS_COLORS = {
+  Draft: '#6b7280',
+  Approved: '#0891b2',
+  'In Progress': '#f59e0b',
+  Blocked: '#dc2626',
+  Paused: '#a855f7',
+  Done: '#10b981',
+};
+
+const TRACKER_GLYPH_META = {
+  '⬜': { color: '#6b7280', label: 'Pending', pct: 0 },
+  '🟡': { color: '#f59e0b', label: 'In Progress', pct: 50 },
+  '✅': { color: '#10b981', label: 'Done', pct: 100 },
+  '🔴': { color: '#dc2626', label: 'Blocked', pct: 25 },
+  '⏸': { color: '#a855f7', label: 'Paused', pct: 30 },
+};
+
+function findV3Tasks(rootDir) {
+  const tasksRoot = join(rootDir, TASKS_DIR);
+  if (!existsSync(tasksRoot)) return [];
+  return readdirSync(tasksRoot)
+    .filter((e) => e !== 'archive' && e !== 'ACTIVE.md')
+    .map((e) => ({ name: e, path: join(tasksRoot, e) }))
+    .filter((e) => {
+      try { return statSync(e.path).isDirectory() && existsSync(join(e.path, 'task.md')); }
+      catch { return false; }
+    });
+}
+
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function getGlyph(status) {
+  if (!status) return '⬜';
+  const m = status.trim().match(/^(⬜|🟡|✅|🔴|⏸)/);
+  return m ? m[1] : '⬜';
+}
+
+function buildSnapshotCard(fm, parsed, taskName) {
+  const status = fm.status || 'Draft';
+  const color = STATUS_COLORS[status] || STATUS_COLORS.Draft;
+  const blockers = (fm.blockers && fm.blockers !== 'none') ? fm.blockers : null;
+  const subtaskRows = parseSubtaskTracker(parsed.sections[3]?.text) || [];
+  const total = subtaskRows.length;
+  const done = subtaskRows.filter((r) => getGlyph(r.status) === '✅').length;
+  const inProgress = subtaskRows.filter((r) => getGlyph(r.status) === '🟡').length;
+  const blocked = subtaskRows.filter((r) => getGlyph(r.status) === '🔴').length;
+  const pending = total - done - inProgress - blocked;
+  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+
+  return `
+    <div class="card snapshot">
+      <div class="snap-head">
+        <span class="badge" style="background:${color};">${escapeHtml(status)}</span>
+        <h1>${escapeHtml(parsed.title || taskName)}</h1>
+      </div>
+      <div class="snap-meta">
+        ${fm.phase ? `<span>${escapeHtml(fm.phase)}</span>` : ''}
+        ${fm.owner ? `<span>· ${escapeHtml(fm.owner)}</span>` : ''}
+        ${fm.related_adr && fm.related_adr !== 'none' ? `<span>· <strong>${escapeHtml(fm.related_adr)}</strong></span>` : ''}
+        ${fm.last_updated ? `<span class="muted">· updated ${escapeHtml(fm.last_updated)}</span>` : ''}
+      </div>
+      ${blockers ? `<div class="blocker"><strong>⚠ BLOCKERS</strong> ${escapeHtml(blockers)}</div>` : ''}
+      <div class="progress">
+        <div class="bar"><div class="fill" style="width:${pct}%; background:${color};"></div></div>
+        <div class="counts">
+          <span class="ct done">✅ ${done}</span>
+          <span class="ct prog">🟡 ${inProgress}</span>
+          <span class="ct blk">🔴 ${blocked}</span>
+          <span class="ct pend">⬜ ${pending}</span>
+          <span class="ct tot">${pct}% (${done}/${total})</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function buildTrackerCard(parsed) {
+  const rows = parseSubtaskTracker(parsed.sections[3]?.text) || [];
+  if (rows.length === 0) {
+    return `<div class="card empty">No subtasks yet — populate Section 3 in <code>task.md</code>.</div>`;
+  }
+
+  const items = rows.map((r) => {
+    const glyph = getGlyph(r.status);
+    const meta = TRACKER_GLYPH_META[glyph] || TRACKER_GLYPH_META['⬜'];
+    return `
+      <div class="track-row">
+        <span class="dot" style="background:${meta.color};" title="${escapeHtml(meta.label)}">${glyph}</span>
+        <span class="tid">${escapeHtml(r.id || '')}</span>
+        <span class="tname">${escapeHtml((r.name || '').slice(0, 80))}</span>
+        ${r.date && r.date !== '—' ? `<span class="tdate">${escapeHtml(r.date)}</span>` : ''}
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="card">
+      <h2>Subtasks <span class="muted">(${rows.length})</span></h2>
+      <div class="tracker">${items}</div>
+    </div>
+  `;
+}
+
+function buildRecentActivityCard(parsed) {
+  const entries = splitChangelogEntries(parsed.sections[4]?.text || '');
+  if (entries.length === 0) {
+    return '';
+  }
+  const recent = entries.slice(0, 3).map((e) => {
+    const heading = e.heading || 'Untitled';
+    const bodyText = e.lines.join(' ').replace(/\s+/g, ' ').replace(/[*_`]/g, '').trim();
+    const preview = bodyText.slice(0, 140);
+    return `
+      <div class="activity-row">
+        <span class="aheading">${escapeHtml(heading.slice(0, 100))}</span>
+        ${preview ? `<span class="apreview">${escapeHtml(preview)}${bodyText.length > 140 ? '…' : ''}</span>` : ''}
+      </div>
+    `;
+  }).join('');
+
+  const moreCount = Math.max(0, entries.length - 3);
+  const moreNote = moreCount > 0 ? `<div class="more">+ ${moreCount} earlier session${moreCount === 1 ? '' : 's'} — see <code>task.md</code> Section 4</div>` : '';
+
+  return `
+    <div class="card">
+      <h2>Recent activity <span class="muted">(${entries.length} session${entries.length === 1 ? '' : 's'})</span></h2>
+      <div class="activity">${recent}</div>
+      ${moreNote}
+    </div>
+  `;
+}
+
+function buildHandoffCard(parsed) {
+  const text = parsed.sections[5]?.text;
+  if (!text) return '';
+
+  const bullets = [];
+  const re = /\*\*(Read first|Current state|Don't do|Watch out|For next session)[^:*]*:\*\*\s*([^\n]+)/gi;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    bullets.push({ label: m[1].trim(), value: m[2].trim() });
+  }
+
+  if (bullets.length === 0) {
+    const lines = text.split('\n').filter((l) => l.trim().startsWith('-')).slice(0, 4);
+    if (lines.length === 0) return '';
+    const items = lines.map((l) => `<li>${escapeHtml(l.replace(/^-\s*/, '').slice(0, 140))}</li>`).join('');
+    return `
+      <div class="card">
+        <h2>Handoff</h2>
+        <ul class="handoff">${items}</ul>
+      </div>
+    `;
+  }
+
+  const items = bullets.slice(0, 5).map((b) => `
+    <div class="hand-row">
+      <span class="hlabel">${escapeHtml(b.label)}</span>
+      <span class="hval">${escapeHtml(b.value.slice(0, 200))}</span>
+    </div>
+  `).join('');
+
+  return `
+    <div class="card">
+      <h2>Handoff</h2>
+      <div class="handoff">${items}</div>
+    </div>
+  `;
+}
+
+function buildOpenLinks(taskDir, taskName, hasSvg) {
+  const md = join(taskDir, 'task.md').replace(/\\/g, '/');
+  const svg = hasSvg ? join(taskDir, 'timeline.svg').replace(/\\/g, '/') : null;
+  return `
+    <div class="links">
+      <a href="file://${md}" class="link primary">📄 Open <code>task.md</code> for full details</a>
+      ${svg ? `<a href="file://${svg}" class="link">🖼️ SVG sidecar</a>` : ''}
+    </div>
+  `;
+}
+
+const PAGE_CSS = `
+:root {
+  --bg: #0d1117;
+  --panel: #161b22;
+  --border: #30363d;
+  --text: #c9d1d9;
+  --muted: #6b7280;
+  --accent: #58a6ff;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #ffffff;
+    --panel: #f6f8fa;
+    --border: #d0d7de;
+    --text: #1f2328;
+    --muted: #57606a;
+    --accent: #0969da;
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  padding: 24px;
+  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  max-width: 880px;
+  margin: 0 auto;
+}
+h1, h2 { margin: 0; }
+.muted { color: var(--muted); font-weight: normal; }
+.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 12px; }
+.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
+.card.empty { color: var(--muted); font-size: 13px; padding: 12px 18px; }
+.card code { background: var(--bg); padding: 1px 6px; border-radius: 3px; font-size: 12px; border: 1px solid var(--border); }
+.snapshot { padding: 18px 22px; }
+.snap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+.badge { padding: 4px 10px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
+.snap-head h1 { font-size: 18px; flex: 1; }
+.snap-meta { font-size: 12px; color: var(--muted); }
+.snap-meta strong { color: var(--text); }
+.blocker { margin-top: 10px; padding: 8px 12px; background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220, 38, 38, 0.4); border-radius: 6px; color: #ff7b72; font-size: 13px; }
+.blocker strong { color: #f87171; margin-right: 6px; }
+.progress { margin-top: 12px; }
+.bar { height: 8px; background: rgba(110, 118, 129, 0.2); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
+.fill { height: 100%; }
+.counts { display: flex; gap: 14px; font-size: 12px; align-items: center; }
+.ct.done { color: #10b981; }
+.ct.prog { color: #f59e0b; }
+.ct.blk { color: #dc2626; }
+.ct.pend { color: var(--muted); }
+.ct.tot { margin-left: auto; font-weight: 600; color: var(--text); }
+.tracker { display: flex; flex-direction: column; gap: 4px; }
+.track-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 2px 0; }
+.dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-size: 12px; color: #fff; flex-shrink: 0; }
+.tid { font-weight: 600; color: var(--muted); width: 60px; flex-shrink: 0; font-size: 12px; }
+.tname { flex: 1; }
+.tdate { color: var(--muted); font-size: 11px; }
+.activity { display: flex; flex-direction: column; gap: 8px; }
+.activity-row { display: flex; flex-direction: column; gap: 2px; }
+.aheading { font-size: 13px; font-weight: 600; }
+.apreview { font-size: 12px; color: var(--muted); }
+.more { font-size: 12px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
+.handoff { display: flex; flex-direction: column; gap: 6px; }
+.handoff.ul { padding-left: 20px; }
+.hand-row { display: flex; gap: 8px; font-size: 13px; }
+.hlabel { font-weight: 600; color: var(--muted); min-width: 100px; flex-shrink: 0; font-size: 12px; }
+.hval { flex: 1; }
+ul.handoff li { font-size: 13px; margin-bottom: 4px; }
+.links { display: flex; gap: 12px; padding: 12px 0 4px; flex-wrap: wrap; }
+.link { color: var(--accent); text-decoration: none; font-size: 13px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
+.link:hover { border-color: var(--accent); }
+.link.primary { font-weight: 600; }
+.link code { background: transparent; border: none; padding: 0; font-size: 12px; }
+.footer { color: var(--muted); font-size: 11px; padding: 12px 0; text-align: center; }
+`;
+
+function buildHtml(taskName, taskDir, fm, parsed) {
+  const hasSvg = existsSync(join(taskDir, 'timeline.svg'));
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>${escapeHtml(parsed.title || taskName)} — dw task</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>${PAGE_CSS}</style>
+</head>
+<body>
+${buildSnapshotCard(fm, parsed, taskName)}
+${buildTrackerCard(parsed)}
+${buildRecentActivityCard(parsed)}
+${buildHandoffCard(parsed)}
+${buildOpenLinks(taskDir, taskName, hasSvg)}
+<div class="footer">
+  <code>dw task view ${escapeHtml(taskName)}</code> — ADR-0008 · lean preview, full details in <code>task.md</code>
+</div>
+</body>
+</html>`;
+}
+
+function openInBrowser(filePath) {
+  const platform = process.platform;
+  try {
+    if (platform === 'win32') {
+      execSync(`start "" "${filePath}"`, { stdio: 'ignore', shell: true });
+    } else if (platform === 'darwin') {
+      execSync(`open "${filePath}"`, { stdio: 'ignore' });
+    } else {
+      execSync(`xdg-open "${filePath}"`, { stdio: 'ignore' });
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function viewOne(taskName, taskDir, opts) {
+  const rootDir = process.cwd();
+  const timelineFile = join(taskDir, 'task.md');
+  if (!existsSync(timelineFile)) {
+    return { ok: false, reason: 'no-timeline' };
+  }
+
+  const content = readFileSync(timelineFile, 'utf8');
+  const fm = parseFrontmatter(content);
+  const parsed = parseTimeline(content);
+  const html = buildHtml(taskName, taskDir, fm, parsed);
+
+  const cacheDir = join(rootDir, CACHE_DIR);
+  if (!existsSync(cacheDir)) mkdirSync(cacheDir, { recursive: true });
+  const outFile = join(cacheDir, `${taskName}.html`);
+  writeFileSync(outFile, html, 'utf8');
+
+  const shouldOpen = opts.open !== false && !opts.noOpen;
+  logEvent({
+    event: 'task',
+    action: 'view.invoke',
+    name: taskName,
+    opened: shouldOpen,
+  }, rootDir);
+
+  let opened = false;
+  if (shouldOpen) {
+    opened = openInBrowser(outFile);
+  }
+
+  return { ok: true, outFile, opened };
+}
+
+export async function taskViewCommand(taskName, opts = {}) {
+  const rootDir = process.cwd();
+  let targets;
+  if (taskName) {
+    targets = [{ name: taskName, path: join(rootDir, TASKS_DIR, taskName) }];
+  } else {
+    const all = findV3Tasks(rootDir);
+    if (all.length === 0) {
+      console.log(chalk.dim('  No v3 tasks to view.'));
+      return;
+    }
+    if (all.length === 1) {
+      targets = all;
+    } else {
+      all.sort((a, b) => statSync(b.path).mtimeMs - statSync(a.path).mtimeMs);
+      targets = [all[0]];
+      console.log(chalk.dim(`  No task specified — picking most recent: ${all[0].name}`));
+    }
+  }
+
+  console.log();
+  for (const t of targets) {
+    const r = await viewOne(t.name, t.path, opts);
+    if (!r.ok) {
+      console.log(chalk.red(`  ✗  ${t.name} — ${r.reason}`));
+      continue;
+    }
+    console.log(chalk.green(`  ✓  ${t.name}`));
+    console.log(chalk.dim(`     HTML: ${r.outFile}`));
+    const shouldOpen = opts.open !== false && !opts.noOpen;
+    if (r.opened) {
+      console.log(chalk.dim(`     Browser opened`));
+    } else if (shouldOpen) {
+      console.log(chalk.yellow(`     Could not auto-open browser — open the file manually`));
+    }
+  }
+  console.log();
+}