dw-kit 1.4.0 → 1.7.0-rc.1

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();
+}