cctd-web 0.1.0

package/bin/cctd-web.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const { createServer } = require('../lib/server');
+
+const args = process.argv.slice(2);
+
+if (args.includes('-h') || args.includes('--help')) {
+  console.log(`
+Usage: cctd-web [options]
+
+Options:
+  -p, --port <number>   Port number (default: 3456)
+  -d, --dir <path>      .tasks/ directory path (default: ./.tasks)
+  --no-open             Don't auto-open browser
+  -h, --help            Show help
+`);
+  process.exit(0);
+}
+
+function getArg(flags, defaultVal) {
+  for (const flag of flags) {
+    const idx = args.indexOf(flag);
+    if (idx !== -1 && idx + 1 < args.length) return args[idx + 1];
+  }
+  return defaultVal;
+}
+
+const port = parseInt(getArg(['-p', '--port'], '3456'), 10);
+const dir = getArg(['-d', '--dir'], './.tasks');
+const noOpen = args.includes('--no-open');
+
+createServer({ port, dir, noOpen });

package/lib/activity.js

@@ -0,0 +1,110 @@
+const MAX_EVENTS = 500;
+
+class ActivityTracker {
+  constructor() {
+    this.events = [];
+    this.prevState = null;
+  }
+
+  update(newState) {
+    if (!this.prevState) {
+      this.prevState = deepCopy(newState);
+      return [];
+    }
+
+    const now = new Date().toISOString();
+    const changes = [];
+
+    const prevTaskMap = new Map(this.prevState.tasks.map(t => [t.id, t]));
+    const newTaskMap = new Map(newState.tasks.map(t => [t.id, t]));
+    const prevStoryMap = new Map(this.prevState.stories.map(s => [s.id, s]));
+    const newStoryMap = new Map(newState.stories.map(s => [s.id, s]));
+
+    // Detect task changes
+    for (const [id, task] of newTaskMap) {
+      const prev = prevTaskMap.get(id);
+      if (!prev) {
+        changes.push({ ts: now, type: 'task_added', taskId: id, title: task.title, status: task.status });
+        continue;
+      }
+
+      // Status change
+      if (prev.status !== task.status) {
+        changes.push({
+          ts: now, type: 'status_changed', taskId: id, title: task.title,
+          from: prev.status, to: task.status,
+        });
+      }
+
+      // Work log additions
+      if (task.workLog && task.workLog !== prev.workLog) {
+        const newLines = diffWorkLog(prev.workLog || '', task.workLog);
+        if (newLines.length) {
+          changes.push({
+            ts: now, type: 'worklog_added', taskId: id, title: task.title,
+            lines: newLines,
+          });
+        }
+      }
+
+      // Spec change
+      if (task.spec && task.spec !== prev.spec) {
+        changes.push({ ts: now, type: 'spec_updated', taskId: id, title: task.title });
+      }
+
+      // Deps change
+      if (JSON.stringify(task.deps || []) !== JSON.stringify(prev.deps || [])) {
+        changes.push({
+          ts: now, type: 'deps_changed', taskId: id, title: task.title,
+          from: prev.deps || [], to: task.deps || [],
+        });
+      }
+    }
+
+    // Detect removed tasks
+    for (const [id, prev] of prevTaskMap) {
+      if (!newTaskMap.has(id)) {
+        changes.push({ ts: now, type: 'task_removed', taskId: id, title: prev.title });
+      }
+    }
+
+    // Detect story changes
+    for (const [id, story] of newStoryMap) {
+      const prev = prevStoryMap.get(id);
+      if (!prev) {
+        changes.push({ ts: now, type: 'story_added', storyId: id, title: story.title, status: story.status });
+        continue;
+      }
+      if (prev.status !== story.status) {
+        changes.push({
+          ts: now, type: 'story_status_changed', storyId: id, title: story.title,
+          from: prev.status, to: story.status,
+        });
+      }
+    }
+
+    // Store and trim
+    this.events.push(...changes);
+    if (this.events.length > MAX_EVENTS) {
+      this.events = this.events.slice(-MAX_EVENTS);
+    }
+
+    this.prevState = deepCopy(newState);
+    return changes;
+  }
+
+  getAll() {
+    return this.events;
+  }
+}
+
+function diffWorkLog(oldLog, newLog) {
+  const oldLines = new Set(oldLog.split('\n').map(l => l.trim()).filter(Boolean));
+  return newLog.split('\n').map(l => l.trim()).filter(l => l && !oldLines.has(l));
+}
+
+function deepCopy(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+module.exports = { ActivityTracker };

package/lib/parser.js

@@ -0,0 +1,193 @@
+const fs = require('node:fs');
+const path = require('node:path');
+
+function parseIndex(tasksDir) {
+  const indexPath = path.join(tasksDir, 'index.md');
+  if (!fs.existsSync(indexPath)) return { stories: [], tasks: [] };
+
+  const content = fs.readFileSync(indexPath, 'utf-8');
+  const lines = content.split('\n');
+
+  const stories = [];
+  const tasks = [];
+  let section = null;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#')) {
+      if (/^#\s*stories/i.test(trimmed)) section = 'stories';
+      else if (/^#\s*tasks/i.test(trimmed)) section = 'tasks';
+      else if (/^#\s*task\s+index/i.test(trimmed)) section = 'tasks';
+      continue;
+    }
+
+    const parts = trimmed.split('|').map(s => s.trim());
+    if (parts.length < 4) continue;
+
+    if (section === 'stories' || (!section && !parts[0].includes('-') && parts.length === 6)) {
+      stories.push({
+        id: parts[0],
+        status: parts[1],
+        title: parts[2],
+        labels: parts[3] ? parts[3].split(',').map(s => s.trim()).filter(Boolean) : [],
+        priority: parts[4] || 'medium',
+        created: parts[5] || '',
+      });
+    } else {
+      // Tasks: ID|Status|Title|Agent(or Labels)|Deps(or Priority)|Created
+      const isFullFormat = parts[0].includes('-');
+      if (isFullFormat) {
+        tasks.push({
+          id: parts[0],
+          status: parts[1],
+          title: parts[2],
+          agent: parts[3] || '',
+          deps: parts[4] && parts[4] !== '-' ? parts[4].split(',').map(s => s.trim()) : [],
+          created: parts[5] || '',
+        });
+      } else {
+        tasks.push({
+          id: parts[0],
+          status: parts[1],
+          title: parts[2],
+          labels: parts[3] ? parts[3].split(',').map(s => s.trim()).filter(Boolean) : [],
+          priority: parts[4] || 'medium',
+          created: parts[5] || '',
+        });
+      }
+    }
+  }
+
+  return { stories, tasks };
+}
+
+function parseMdMeta(content) {
+  const meta = {};
+  const lines = content.split('\n');
+  let i = 0;
+
+  // Title from first H1
+  for (; i < lines.length; i++) {
+    const m = lines[i].match(/^#\s+(.+)/);
+    if (m) { meta.title = m[1].trim(); i++; break; }
+  }
+
+  // Key-value pairs: "- Key: Value"
+  for (; i < lines.length; i++) {
+    const m = lines[i].match(/^-\s+(.+?):\s*(.+)/);
+    if (m) {
+      const key = m[1].trim().toLowerCase().replace(/[- ]/g, '_');
+      meta[key] = m[2].trim();
+    } else if (lines[i].match(/^##/)) {
+      break;
+    }
+  }
+
+  // Sections: ## Name -> content
+  const sections = {};
+  let currentSection = null;
+  let sectionLines = [];
+
+  for (; i < lines.length; i++) {
+    const heading = lines[i].match(/^##\s+(.+)/);
+    if (heading) {
+      if (currentSection) sections[currentSection] = sectionLines.join('\n').trim();
+      currentSection = heading[1].trim().toLowerCase().replace(/\s+/g, '_');
+      sectionLines = [];
+    } else if (currentSection) {
+      sectionLines.push(lines[i]);
+    }
+  }
+  if (currentSection) sections[currentSection] = sectionLines.join('\n').trim();
+
+  return { ...meta, sections };
+}
+
+function parseStory(filePath) {
+  if (!fs.existsSync(filePath)) return null;
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const meta = parseMdMeta(content);
+
+  return {
+    id: meta.id || '',
+    title: meta.title || '',
+    status: meta.status || '',
+    labels: meta.labels ? meta.labels.split(',').map(s => s.trim()).filter(Boolean) : [],
+    priority: meta.priority || 'medium',
+    created: meta.created || '',
+    userStory: meta.sections?.user_story || '',
+    acceptanceCriteria: meta.sections?.acceptance_criteria || '',
+    workLog: meta.sections?.work_log || '',
+  };
+}
+
+function parseTask(filePath) {
+  if (!fs.existsSync(filePath)) return null;
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const meta = parseMdMeta(content);
+
+  const parseDeps = (val) => {
+    if (!val || val === '-') return [];
+    return val.split(',').map(s => s.trim()).filter(Boolean);
+  };
+
+  return {
+    id: meta.id || '',
+    title: meta.title || '',
+    status: meta.status || '',
+    story: meta.story || '',
+    agent: meta.agent || '',
+    labels: meta.labels ? meta.labels.split(',').map(s => s.trim()).filter(Boolean) : [],
+    priority: meta.priority || 'medium',
+    created: meta.created || '',
+    deps: parseDeps(meta.deps || meta.blocked_by),
+    blocks: parseDeps(meta.blocks),
+    spec: meta.sections?.spec || meta.sections?.description || '',
+    workLog: meta.sections?.work_log || '',
+  };
+}
+
+function parseAll(tasksDir) {
+  const index = parseIndex(tasksDir);
+
+  // Parse story files
+  const storiesDir = path.join(tasksDir, 'stories');
+  const storyDetails = [];
+  if (fs.existsSync(storiesDir)) {
+    const files = fs.readdirSync(storiesDir).filter(f => f.endsWith('.md'));
+    for (const file of files) {
+      const story = parseStory(path.join(storiesDir, file));
+      if (story) storyDetails.push(story);
+    }
+  }
+
+  // Parse task files
+  const tasksSubDir = path.join(tasksDir, 'tasks');
+  const taskDetails = [];
+  if (fs.existsSync(tasksSubDir)) {
+    const files = fs.readdirSync(tasksSubDir).filter(f => f.endsWith('.md'));
+    for (const file of files) {
+      const task = parseTask(path.join(tasksSubDir, file));
+      if (task) taskDetails.push(task);
+    }
+  }
+
+  // Merge index data with file details
+  const storiesMap = new Map(storyDetails.map(s => [s.id, s]));
+  const tasksMap = new Map(taskDetails.map(t => [t.id, t]));
+
+  const stories = index.stories.map(s => ({ ...s, ...storiesMap.get(s.id) }));
+  const tasks = index.tasks.map(t => ({ ...t, ...tasksMap.get(t.id) }));
+
+  // Also include tasks from files not in index
+  for (const t of taskDetails) {
+    if (!index.tasks.find(it => it.id === t.id)) tasks.push(t);
+  }
+  for (const s of storyDetails) {
+    if (!index.stories.find(is => is.id === s.id)) stories.push(s);
+  }
+
+  return { stories, tasks };
+}
+
+module.exports = { parseIndex, parseStory, parseTask, parseAll };

package/lib/server.js

@@ -0,0 +1,118 @@
+const http = require('node:http');
+const fs = require('node:fs');
+const path = require('node:path');
+const { exec } = require('node:child_process');
+const { parseAll } = require('./parser');
+const { createWatcher } = require('./watcher');
+const { ActivityTracker } = require('./activity');
+
+function createServer({ port, dir, noOpen }) {
+  const tasksDir = path.resolve(dir);
+  const publicDir = path.join(__dirname, '..', 'public');
+
+  // SSE clients
+  const clients = new Set();
+  const activity = new ActivityTracker();
+
+  // Initialize activity tracker with current state
+  activity.update(getData());
+
+  function broadcast(data, changes) {
+    const payload = `data: ${JSON.stringify(data)}\n\n`;
+    for (const res of clients) {
+      res.write(payload);
+    }
+    if (changes && changes.length) {
+      const actPayload = `event: activity\ndata: ${JSON.stringify(changes)}\n\n`;
+      for (const res of clients) {
+        res.write(actPayload);
+      }
+    }
+  }
+
+  function getData() {
+    try {
+      return parseAll(tasksDir);
+    } catch (err) {
+      console.error(`Parse error: ${err.message}`);
+      return { stories: [], tasks: [], error: err.message };
+    }
+  }
+
+  const server = http.createServer((req, res) => {
+    const url = new URL(req.url, `http://localhost:${port}`);
+
+    if (url.pathname === '/events') {
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      });
+      res.write(`data: ${JSON.stringify(getData())}\n\n`);
+      clients.add(res);
+      req.on('close', () => clients.delete(res));
+      return;
+    }
+
+    if (url.pathname === '/api/data') {
+      const data = getData();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify(data));
+      return;
+    }
+
+    if (url.pathname === '/api/activity') {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify(activity.getAll()));
+      return;
+    }
+
+    // Serve index.html for root
+    if (url.pathname === '/' || url.pathname === '/index.html') {
+      const htmlPath = path.join(publicDir, 'index.html');
+      if (fs.existsSync(htmlPath)) {
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        res.end(fs.readFileSync(htmlPath, 'utf-8'));
+      } else {
+        res.writeHead(500);
+        res.end('index.html not found');
+      }
+      return;
+    }
+
+    res.writeHead(404);
+    res.end('Not found');
+  });
+
+  // Watch .tasks/ directory
+  if (fs.existsSync(tasksDir)) {
+    createWatcher(tasksDir, () => {
+      const newData = getData();
+      const changes = activity.update(newData);
+      if (changes.length) {
+        console.log(`File change: ${changes.map(c => c.type).join(', ')}`);
+      }
+      broadcast(newData, changes);
+    });
+  } else {
+    console.warn(`\x1b[33mWarning: ${tasksDir} not found. Run /cctd init first.\x1b[0m`);
+  }
+
+  server.listen(port, () => {
+    const url = `http://localhost:${port}`;
+    console.log(`\x1b[32m✅ cctd-web running at ${url}\x1b[0m`);
+    console.log(`   Watching: ${tasksDir}`);
+    console.log(`   Press Ctrl+C to stop\n`);
+
+    if (!noOpen) {
+      const cmd = process.platform === 'darwin' ? 'open'
+        : process.platform === 'win32' ? 'start'
+        : 'xdg-open';
+      exec(`${cmd} ${url}`, () => {});
+    }
+  });
+
+  return server;
+}
+
+module.exports = { createServer };

package/lib/watcher.js

@@ -0,0 +1,21 @@
+const fs = require('node:fs');
+
+function createWatcher(dir, callback, debounceMs = 100) {
+  let timer = null;
+
+  const watcher = fs.watch(dir, { recursive: true }, (_event, _filename) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      callback();
+    }, debounceMs);
+  });
+
+  watcher.on('error', (err) => {
+    console.error(`Watch error: ${err.message}`);
+  });
+
+  return watcher;
+}
+
+module.exports = { createWatcher };

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "cctd-web",
+  "version": "0.1.0",
+  "description": "Lightweight web viewer for CCTD .tasks/ directory",
+  "bin": {
+    "cctd-web": "./bin/cctd-web.js"
+  },
+  "files": [
+    "bin/",
+    "lib/",
+    "public/"
+  ],
+  "keywords": [
+    "cctd",
+    "task-management",
+    "dashboard",
+    "cli"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/esakat/cctd-web.git"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/public/index.html

@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CCTD Web</title>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0A0F1C;--bg2:#111827;--bg3:#1F2937;--bg4:#374151;
+  --text:#E2E8F0;--text2:#94A3B8;--text3:#64748B;
+  --border:#1E293B;
+  --accent:#6366F1;
+  --backlog:#6B7280;--defined:#3B82F6;--ai_ready:#8B5CF6;
+  --in_progress:#EAB308;--testing:#F97316;--review:#F59E0B;--done:#22C55E;
+  --todo:#EAB308;--wip:#F97316;
+  --radius:8px;
+}
+html{font-size:14px}
+body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
+a{color:var(--accent);text-decoration:none}
+
+/* Header */
+.header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
+.header h1{font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:8px}
+.header h1 span{color:var(--accent)}
+.stats{display:flex;gap:16px;font-size:.85rem;color:var(--text2)}
+.stats .stat{display:flex;align-items:center;gap:4px}
+.stats .num{font-weight:700;color:var(--text)}
+.view-toggle{display:flex;gap:4px}
+.view-toggle button{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:6px 14px;border-radius:var(--radius);cursor:pointer;font-size:.8rem;transition:all .15s}
+.view-toggle button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
+.view-toggle button:hover:not(.active){background:var(--bg4)}
+
+/* Filter bar */
+.filter-bar{display:flex;gap:8px;padding:10px 24px;background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
+.filter-bar label{font-size:.8rem;color:var(--text2)}
+.filter-bar select{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:4px 8px;font-size:.8rem}
+
+/* Kanban */
+.kanban{display:flex;gap:12px;padding:16px 24px;overflow-x:auto;min-height:calc(100vh - 110px)}
+.kanban-col{min-width:220px;max-width:280px;flex:1;display:flex;flex-direction:column;gap:8px}
+.kanban-col-header{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between}
+.kanban-col-header .count{background:rgba(255,255,255,.1);padding:2px 8px;border-radius:10px;font-size:.7rem}
+.kanban-cards{display:flex;flex-direction:column;gap:6px;flex:1}
+
+/* Card */
+.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;cursor:pointer;transition:all .15s;border-left:3px solid transparent}
+.card:hover{background:var(--bg3);transform:translateY(-1px)}
+.card-title{font-size:.85rem;font-weight:600;margin-bottom:6px;line-height:1.3}
+.card-meta{display:flex;flex-wrap:wrap;gap:4px;font-size:.7rem}
+.card-meta .tag{padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.06)}
+.card-meta .agent{color:var(--accent)}
+.card-meta .story-ref{color:var(--text3)}
+.card-meta .priority-high{color:#EF4444}
+.card-meta .priority-medium{color:#EAB308}
+.card-meta .priority-low{color:#6B7280}
+
+/* List View */
+.list-view{padding:16px 24px;max-width:1200px}
+.story-group{margin-bottom:24px}
+.story-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:8px 0;border-bottom:1px solid var(--border)}
+.story-header h2{font-size:1rem;font-weight:600}
+.story-header .badge{font-size:.7rem;padding:2px 8px;border-radius:4px}
+.progress-bar{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-bottom:12px;max-width:400px}
+.progress-bar-fill{height:100%;background:var(--done);transition:width .3s}
+.task-table{width:100%;border-collapse:collapse}
+.task-table th{text-align:left;font-size:.7rem;text-transform:uppercase;color:var(--text3);padding:6px 10px;border-bottom:1px solid var(--border)}
+.task-table td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:.85rem}
+.task-table tr{cursor:pointer;transition:background .1s}
+.task-table tr:hover{background:var(--bg3)}
+
+/* Status badge */
+.status{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase}
+.status-backlog{background:rgba(107,114,128,.2);color:var(--backlog)}
+.status-defined{background:rgba(59,130,246,.15);color:var(--defined)}
+.status-ai_ready{background:rgba(139,92,246,.15);color:var(--ai_ready)}
+.status-in_progress,.status-wip{background:rgba(234,179,8,.15);color:var(--in_progress)}
+.status-testing{background:rgba(249,115,22,.15);color:var(--testing)}
+.status-review{background:rgba(245,158,11,.15);color:var(--review)}
+.status-done{background:rgba(34,197,94,.15);color:var(--done)}
+.status-todo{background:rgba(234,179,8,.15);color:var(--todo)}
+
+/* Modal */
+.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
+.modal-overlay.open{display:flex}
+.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;max-width:700px;width:100%;max-height:80vh;overflow-y:auto;padding:24px}
+.modal-close{float:right;background:none;border:none;color:var(--text2);font-size:1.2rem;cursor:pointer;padding:4px 8px}
+.modal-close:hover{color:var(--text)}
+.modal h2{font-size:1.1rem;margin-bottom:4px}
+.modal .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px;font-size:.8rem;color:var(--text2)}
+.modal .section{margin-top:16px}
+.modal .section h3{font-size:.85rem;font-weight:700;color:var(--text2);text-transform:uppercase;margin-bottom:8px;letter-spacing:.03em}
+.modal .section .content{font-size:.85rem;line-height:1.6;color:var(--text)}
+.modal .section .content p{margin-bottom:8px}
+.modal .section .content ul,.modal .section .content ol{margin-left:20px;margin-bottom:8px}
+.modal .section .content code{background:var(--bg4);padding:1px 4px;border-radius:3px;font-size:.8rem}
+.modal .section .content pre{background:var(--bg);padding:12px;border-radius:var(--radius);overflow-x:auto;margin:8px 0}
+.modal .deps{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
+.modal .dep-chip{background:var(--bg3);padding:2px 8px;border-radius:4px;font-size:.75rem;color:var(--text2)}
+
+/* Empty state */
+.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;color:var(--text3);text-align:center;gap:12px}
+.empty h2{font-size:1.2rem;color:var(--text2)}
+.empty p{max-width:400px;line-height:1.5}
+.empty code{background:var(--bg3);padding:4px 10px;border-radius:var(--radius);font-size:.9rem;color:var(--accent)}
+
+/* Connection indicator */
+.conn{width:8px;height:8px;border-radius:50%;display:inline-block}
+.conn.ok{background:var(--done)}
+.conn.err{background:#EF4444}
+
+/* Activity View */
+.activity-view{padding:16px 24px;max-width:900px}
+.activity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
+.activity-header h2{font-size:1rem;font-weight:600}
+.activity-count{font-size:.8rem;color:var(--text3)}
+.activity-empty{text-align:center;padding:60px 24px;color:var(--text3)}
+.activity-empty p{margin-top:8px;font-size:.85rem}
+.timeline{position:relative;padding-left:24px}
+.timeline::before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--border)}
+.tl-item{position:relative;padding:8px 0 16px;animation:fadeSlide .3s ease}
+@keyframes fadeSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
+.tl-dot{position:absolute;left:-21px;top:12px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg)}
+.tl-dot.status_changed{background:var(--in_progress)}
+.tl-dot.worklog_added{background:var(--accent)}
+.tl-dot.task_added{background:var(--done)}
+.tl-dot.task_removed{background:#EF4444}
+.tl-dot.spec_updated{background:var(--defined)}
+.tl-dot.deps_changed{background:var(--testing)}
+.tl-dot.story_added{background:var(--done)}
+.tl-dot.story_status_changed{background:var(--review)}
+.tl-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px}
+.tl-card:hover{background:var(--bg3)}
+.tl-time{font-size:.7rem;color:var(--text3);margin-bottom:4px;font-family:monospace}
+.tl-title{font-size:.85rem;font-weight:600;margin-bottom:4px}
+.tl-detail{font-size:.8rem;color:var(--text2);line-height:1.5}
+.tl-detail .arrow{color:var(--text3);margin:0 4px}
+.tl-detail .val-from{color:#EF4444;text-decoration:line-through}
+.tl-detail .val-to{color:var(--done);font-weight:600}
+.tl-detail .wl-line{display:block;padding:2px 0;border-left:2px solid var(--accent);padding-left:8px;margin:2px 0}
+
+/* Responsive */
+@media(max-width:768px){
+  .header{flex-wrap:wrap;gap:8px;padding:10px 16px}
+  .kanban{padding:12px 8px;gap:8px}
+  .kanban-col{min-width:200px}
+  .list-view{padding:12px 16px}
+  .activity-view{padding:12px 16px}
+}
+</style>
+</head>
+<body>
+
+<div class="header">
+  <h1><span>CCTD</span> Web <span class="conn ok" id="conn" title="Connected"></span></h1>
+  <div class="stats" id="stats"></div>
+  <div class="view-toggle">
+    <button class="active" data-view="kanban">Kanban</button>
+    <button data-view="list">List</button>
+    <button data-view="activity">Activity</button>
+  </div>
+</div>
+
+<div class="filter-bar" id="filterBar">
+  <label>Story:</label>
+  <select id="filterStory"><option value="">All</option></select>
+  <label>Priority:</label>
+  <select id="filterPriority">
+    <option value="">All</option>
+    <option value="high">High</option>
+    <option value="medium">Medium</option>
+    <option value="low">Low</option>
+  </select>
+</div>
+
+<main id="main"></main>
+
+<div class="modal-overlay" id="modalOverlay">
+  <div class="modal" id="modal"></div>
+</div>
+
+<script>
+const STATUSES = ['BACKLOG','DEFINED','AI_READY','IN_PROGRESS','TESTING','REVIEW','DONE'];
+const STATUS_ALIASES = {TODO:'BACKLOG', WIP:'IN_PROGRESS'};
+const STATUS_COLORS = {BACKLOG:'var(--backlog)',DEFINED:'var(--defined)',AI_READY:'var(--ai_ready)',IN_PROGRESS:'var(--in_progress)',TESTING:'var(--testing)',REVIEW:'var(--review)',DONE:'var(--done)'};
+
+let data = {stories:[], tasks:[]};
+let activityLog = [];
+let view = 'kanban';
+let filters = {story:'', priority:''};
+
+// Normalize status
+function norm(s){return STATUS_ALIASES[s?.toUpperCase()] || s?.toUpperCase() || 'BACKLOG';}
+
+// SSE connection
+let es;
+function connect(){
+  es = new EventSource('/events');
+  es.onmessage = (e) => {
+    data = JSON.parse(e.data);
+    render();
+    setConn(true);
+  };
+  es.addEventListener('activity', (e) => {
+    const changes = JSON.parse(e.data);
+    activityLog.push(...changes);
+    if(activityLog.length > 500) activityLog = activityLog.slice(-500);
+    if(view === 'activity') renderActivity();
+  });
+  es.onerror = () => setConn(false);
+}
+function setConn(ok){
+  const el = document.getElementById('conn');
+  el.className = ok ? 'conn ok' : 'conn err';
+  el.title = ok ? 'Connected' : 'Disconnected';
+}
+connect();
+
+// View toggle
+document.querySelectorAll('.view-toggle button').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.view-toggle button').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    view = btn.dataset.view;
+    render();
+  });
+});
+
+// Filters
+document.getElementById('filterStory').addEventListener('change', e => {filters.story = e.target.value; render();});
+document.getElementById('filterPriority').addEventListener('change', e => {filters.priority = e.target.value; render();});
+
+// Modal
+document.getElementById('modalOverlay').addEventListener('click', e => {
+  if(e.target === e.currentTarget) closeModal();
+});
+document.addEventListener('keydown', e => {if(e.key === 'Escape') closeModal();});
+
+function closeModal(){document.getElementById('modalOverlay').classList.remove('open');}
+
+function openTask(taskId){
+  const task = data.tasks.find(t => t.id === taskId);
+  if(!task) return;
+  const story = data.stories.find(s => s.id === task.story);
+  const status = norm(task.status);
+
+  let html = `<button class="modal-close" onclick="closeModal()">&times;</button>`;
+  html += `<h2>${esc(task.title)}</h2>`;
+  html += `<div class="meta-row">`;
+  html += `<span class="status status-${status.toLowerCase()}">${status}</span>`;
+  if(task.id) html += `<span>ID: ${esc(task.id)}</span>`;
+  if(task.agent) html += `<span>Agent: ${esc(task.agent)}</span>`;
+  if(task.priority) html += `<span>Priority: ${esc(task.priority)}</span>`;
+  if(story) html += `<span>Story: ${esc(story.title || story.id)}</span>`;
+  if(task.created) html += `<span>${esc(task.created)}</span>`;
+  html += `</div>`;
+
+  if(task.labels?.length) {
+    html += `<div class="meta-row">${task.labels.map(l=>`<span class="tag">${esc(l)}</span>`).join('')}</div>`;
+  }
+
+  if(task.deps?.length){
+    html += `<div class="section"><h3>Dependencies</h3><div class="deps">${task.deps.map(d=>`<span class="dep-chip">${esc(d)}</span>`).join('')}</div></div>`;
+  }
+  if(task.blocks?.length){
+    html += `<div class="section"><h3>Blocks</h3><div class="deps">${task.blocks.map(d=>`<span class="dep-chip">${esc(d)}</span>`).join('')}</div></div>`;
+  }
+
+  if(task.spec){
+    html += `<div class="section"><h3>Spec</h3><div class="content">${renderMd(task.spec)}</div></div>`;
+  }
+  if(task.workLog){
+    html += `<div class="section"><h3>Work Log</h3><div class="content">${renderMd(task.workLog)}</div></div>`;
+  }
+
+  document.getElementById('modal').innerHTML = html;
+  document.getElementById('modalOverlay').classList.add('open');
+}
+
+function openStory(storyId){
+  const story = data.stories.find(s => s.id === storyId);
+  if(!story) return;
+
+  let html = `<button class="modal-close" onclick="closeModal()">&times;</button>`;
+  html += `<h2>${esc(story.title)}</h2>`;
+  html += `<div class="meta-row">`;
+  html += `<span class="status status-${norm(story.status).toLowerCase()}">${norm(story.status)}</span>`;
+  if(story.id) html += `<span>ID: ${esc(story.id)}</span>`;
+  if(story.priority) html += `<span>Priority: ${esc(story.priority)}</span>`;
+  if(story.created) html += `<span>${esc(story.created)}</span>`;
+  html += `</div>`;
+
+  if(story.labels?.length) {
+    html += `<div class="meta-row">${story.labels.map(l=>`<span class="tag">${esc(l)}</span>`).join('')}</div>`;
+  }
+  if(story.userStory){
+    html += `<div class="section"><h3>User Story</h3><div class="content">${renderMd(story.userStory)}</div></div>`;
+  }
+  if(story.acceptanceCriteria){
+    html += `<div class="section"><h3>Acceptance Criteria</h3><div class="content">${renderMd(story.acceptanceCriteria)}</div></div>`;
+  }
+  if(story.workLog){
+    html += `<div class="section"><h3>Work Log</h3><div class="content">${renderMd(story.workLog)}</div></div>`;
+  }
+
+  document.getElementById('modal').innerHTML = html;
+  document.getElementById('modalOverlay').classList.add('open');
+}
+
+function renderMd(text){
+  if(typeof marked !== 'undefined') return marked.parse(text);
+  return `<pre>${esc(text)}</pre>`;
+}
+function esc(s){
+  if(!s) return '';
+  const d = document.createElement('div');
+  d.textContent = String(s);
+  return d.innerHTML;
+}
+
+function getFiltered(){
+  let tasks = data.tasks;
+  if(filters.story) tasks = tasks.filter(t => t.story === filters.story || t.id?.startsWith(filters.story));
+  if(filters.priority) tasks = tasks.filter(t => (t.priority||'medium').toLowerCase() === filters.priority);
+  return tasks;
+}
+
+function render(){
+  updateStats();
+  updateStoryFilter();
+  const fb = document.getElementById('filterBar');
+  if(view === 'activity'){ fb.style.display='none'; renderActivity(); }
+  else { fb.style.display=''; if(view === 'kanban') renderKanban(); else renderList(); }
+}
+
+function updateStats(){
+  const tasks = data.tasks;
+  const done = tasks.filter(t => norm(t.status) === 'DONE').length;
+  const total = tasks.length;
+  const pct = total ? Math.round(done/total*100) : 0;
+  document.getElementById('stats').innerHTML = `
+    <div class="stat">Stories: <span class="num">${data.stories.length}</span></div>
+    <div class="stat">Tasks: <span class="num">${total}</span></div>
+    <div class="stat">Done: <span class="num">${pct}%</span></div>
+  `;
+}
+
+function updateStoryFilter(){
+  const sel = document.getElementById('filterStory');
+  const cur = sel.value;
+  const opts = data.stories.map(s => `<option value="${esc(s.id)}">${esc(s.id)} - ${esc(s.title)}</option>`);
+  sel.innerHTML = `<option value="">All</option>` + opts.join('');
+  sel.value = cur;
+}
+
+function renderKanban(){
+  const tasks = getFiltered();
+  const main = document.getElementById('main');
+
+  if(!tasks.length && !data.stories.length){
+    main.innerHTML = `<div class="empty"><h2>No tasks found</h2><p>Create tasks with CCTD to see them here.</p><code>/cctd init</code></div>`;
+    return;
+  }
+
+  let html = '<div class="kanban">';
+  for(const status of STATUSES){
+    const col = tasks.filter(t => norm(t.status) === status);
+    const color = STATUS_COLORS[status] || 'var(--text3)';
+    html += `<div class="kanban-col">`;
+    html += `<div class="kanban-col-header" style="background:${color}20;color:${color}"><span>${status.replace('_',' ')}</span><span class="count">${col.length}</span></div>`;
+    html += `<div class="kanban-cards">`;
+    for(const t of col){
+      const story = data.stories.find(s => s.id === t.story);
+      html += `<div class="card" style="border-left-color:${color}" onclick="openTask('${esc(t.id)}')">`;
+      html += `<div class="card-title">${esc(t.title)}</div>`;
+      html += `<div class="card-meta">`;
+      if(t.id) html += `<span class="tag">${esc(t.id)}</span>`;
+      if(t.agent) html += `<span class="agent">${esc(t.agent)}</span>`;
+      if(story) html += `<span class="story-ref">${esc(story.id)}</span>`;
+      if(t.priority) html += `<span class="priority-${t.priority}">${esc(t.priority)}</span>`;
+      if(t.labels?.length) t.labels.forEach(l => {html += `<span class="tag">${esc(l)}</span>`;});
+      html += `</div></div>`;
+    }
+    html += `</div></div>`;
+  }
+  html += '</div>';
+  main.innerHTML = html;
+}
+
+function renderList(){
+  const tasks = getFiltered();
+  const main = document.getElementById('main');
+
+  if(!tasks.length && !data.stories.length){
+    main.innerHTML = `<div class="empty"><h2>No tasks found</h2><p>Create tasks with CCTD to see them here.</p><code>/cctd init</code></div>`;
+    return;
+  }
+
+  let html = '<div class="list-view">';
+
+  // Group tasks by story
+  const groups = new Map();
+  const noStory = [];
+  for(const t of tasks){
+    const sid = t.story || (t.id?.includes('-') ? t.id.split('-')[0] : '');
+    if(sid){
+      if(!groups.has(sid)) groups.set(sid, []);
+      groups.get(sid).push(t);
+    } else {
+      noStory.push(t);
+    }
+  }
+
+  // Render story groups
+  for(const [sid, stasks] of groups){
+    const story = data.stories.find(s => s.id === sid);
+    const done = stasks.filter(t => norm(t.status) === 'DONE').length;
+    const pct = stasks.length ? Math.round(done/stasks.length*100) : 0;
+
+    html += `<div class="story-group">`;
+    html += `<div class="story-header" style="cursor:pointer" onclick="openStory('${esc(sid)}')">`;
+    html += `<span class="status status-${norm(story?.status||'BACKLOG').toLowerCase()}">${norm(story?.status||'BACKLOG')}</span>`;
+    html += `<h2>${esc(story?.title || sid)}</h2>`;
+    html += `<span style="color:var(--text3);font-size:.8rem">${done}/${stasks.length} done</span>`;
+    html += `</div>`;
+    html += `<div class="progress-bar"><div class="progress-bar-fill" style="width:${pct}%"></div></div>`;
+    html += renderTaskTable(stasks);
+    html += `</div>`;
+  }
+
+  // Ungrouped tasks
+  if(noStory.length){
+    html += `<div class="story-group">`;
+    html += `<div class="story-header"><h2>Ungrouped Tasks</h2></div>`;
+    html += renderTaskTable(noStory);
+    html += `</div>`;
+  }
+
+  html += '</div>';
+  main.innerHTML = html;
+}
+
+function renderActivity(){
+  const main = document.getElementById('main');
+  if(!activityLog.length){
+    main.innerHTML = `<div class="activity-view"><div class="activity-empty"><h2>No activity yet</h2><p>Changes to .tasks/ will appear here in real-time.<br>Waiting for Claude Code to update tasks...</p></div></div>`;
+    return;
+  }
+  const sorted = [...activityLog].reverse();
+  let html = `<div class="activity-view">`;
+  html += `<div class="activity-header"><h2>Activity Log</h2><span class="activity-count">${sorted.length} events (in-memory)</span></div>`;
+  html += `<div class="timeline">`;
+  for(const ev of sorted){
+    const time = fmtTime(ev.ts);
+    const id = ev.taskId || ev.storyId || '';
+    html += `<div class="tl-item">`;
+    html += `<div class="tl-dot ${ev.type}"></div>`;
+    html += `<div class="tl-card">`;
+    html += `<div class="tl-time">${esc(time)}</div>`;
+    html += `<div class="tl-title">${esc(id)} ${esc(ev.title||'')}</div>`;
+    html += `<div class="tl-detail">${fmtEvent(ev)}</div>`;
+    html += `</div></div>`;
+  }
+  html += `</div></div>`;
+  main.innerHTML = html;
+}
+
+function fmtTime(iso){
+  if(!iso) return '';
+  const d = new Date(iso);
+  const hh = String(d.getHours()).padStart(2,'0');
+  const mm = String(d.getMinutes()).padStart(2,'0');
+  const ss = String(d.getSeconds()).padStart(2,'0');
+  return `${hh}:${mm}:${ss}`;
+}
+
+function fmtEvent(ev){
+  switch(ev.type){
+    case 'status_changed':
+      return `Status: <span class="val-from">${esc(ev.from)}</span><span class="arrow">&rarr;</span><span class="val-to">${esc(ev.to)}</span>`;
+    case 'worklog_added':
+      return (ev.lines||[]).map(l=>`<span class="wl-line">${esc(l)}</span>`).join('');
+    case 'task_added':
+      return `New task created <span class="status status-${norm(ev.status||'BACKLOG').toLowerCase()}">${norm(ev.status||'BACKLOG')}</span>`;
+    case 'task_removed':
+      return `Task removed`;
+    case 'spec_updated':
+      return `Spec was updated`;
+    case 'deps_changed':
+      return `Dependencies: <span class="val-from">${esc((ev.from||[]).join(', ')||'none')}</span><span class="arrow">&rarr;</span><span class="val-to">${esc((ev.to||[]).join(', ')||'none')}</span>`;
+    case 'story_added':
+      return `New story created <span class="status status-${norm(ev.status||'BACKLOG').toLowerCase()}">${norm(ev.status||'BACKLOG')}</span>`;
+    case 'story_status_changed':
+      return `Story status: <span class="val-from">${esc(ev.from)}</span><span class="arrow">&rarr;</span><span class="val-to">${esc(ev.to)}</span>`;
+    default:
+      return esc(ev.type);
+  }
+}
+
+function renderTaskTable(tasks){
+  let html = `<table class="task-table"><thead><tr><th>ID</th><th>Status</th><th>Title</th><th>Agent</th><th>Priority</th><th>Deps</th></tr></thead><tbody>`;
+  for(const t of tasks){
+    const status = norm(t.status);
+    html += `<tr onclick="openTask('${esc(t.id)}')">`;
+    html += `<td>${esc(t.id)}</td>`;
+    html += `<td><span class="status status-${status.toLowerCase()}">${status}</span></td>`;
+    html += `<td>${esc(t.title)}</td>`;
+    html += `<td>${esc(t.agent)}</td>`;
+    html += `<td><span class="priority-${t.priority||'medium'}">${esc(t.priority||'')}</span></td>`;
+    html += `<td>${(t.deps||[]).map(d=>esc(d)).join(', ')}</td>`;
+    html += `</tr>`;
+  }
+  html += `</tbody></table>`;
+  return html;
+}
+</script>
+</body>
+</html>