@metyatech/task-tracker 0.1.0 → 0.2.1

package/README.md

@@ -104,6 +104,13 @@ npm run format:check # Prettier (check)
 npm run verify       # format:check + lint + build + test
 ```
 
+## Community
+
+- [Security Policy](SECURITY.md)
+- [Contributing](CONTRIBUTING.md)
+- [Code of Conduct](CODE_OF_CONDUCT.md)
+- [Changelog](CHANGELOG.md)
+
 ## License
 
-MIT © metyatech
+MIT © [metyatech](https://github.com/metyatech)

package/dist/cli.js

@@ -2,9 +2,9 @@
 
 // src/cli.ts
 import { Command } from "commander";
-import { fileURLToPath } from "url";
-import { dirname as dirname2, join as join2 } from "path";
-import { readFileSync as readFileSync2 } from "fs";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import { dirname as dirname3, join as join4 } from "path";
+import { readFileSync as readFileSync3 } from "fs";
 
 // src/storage.ts
 import { readFileSync, writeFileSync, existsSync, appendFileSync, mkdirSync } from "fs";
@@ -146,6 +146,30 @@ function removeTask(storagePath, id) {
   writeTasks(storagePath, filtered);
   return true;
 }
+function purgeTasks(storagePath, options = {}) {
+  const tasks = readTasks(storagePath);
+  const doneTasks = tasks.filter((t) => DONE_STAGES.includes(t.stage));
+  let toPurge;
+  if (options.keep !== void 0) {
+    const sorted = [...doneTasks].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+    toPurge = sorted.slice(options.keep);
+  } else {
+    toPurge = doneTasks;
+  }
+  if (!options.dryRun && toPurge.length > 0) {
+    const purgeIds = new Set(toPurge.map((t) => t.id));
+    const remaining = tasks.filter((t) => !purgeIds.has(t.id));
+    writeTasks(storagePath, remaining);
+  }
+  return { purged: toPurge, count: toPurge.length };
+}
+function autoPurgeTasks(storagePath, options = {}) {
+  const keep = options.keep ?? 20;
+  if (keep === 0) {
+    return { purged: [], count: 0 };
+  }
+  return purgeTasks(storagePath, { keep });
+}
 
 // src/format.ts
 import chalk from "chalk";
@@ -215,13 +239,233 @@ function formatCheckReport(activeTasks, repoStatus) {
   return lines.join("\n");
 }
 
-// src/cli.ts
-import process from "process";
+// src/gui.ts
+import { createServer } from "http";
+import { readFileSync as readFileSync2, existsSync as existsSync3 } from "fs";
+import { join as join3, dirname as dirname2, resolve } from "path";
+import { fileURLToPath } from "url";
+import { exec } from "child_process";
+
+// src/scanner.ts
+import { existsSync as existsSync2, readdirSync, statSync } from "fs";
+import { join as join2, basename } from "path";
+function scanTaskFiles(dir) {
+  const rootFile = join2(dir, ".tasks.jsonl");
+  const root = existsSync2(rootFile) ? { path: rootFile, dir, name: basename(dir) } : null;
+  const repos = [];
+  try {
+    const entries = readdirSync(dir);
+    for (const entry of entries) {
+      if (entry.startsWith(".")) continue;
+      const subDir = join2(dir, entry);
+      try {
+        if (statSync(subDir).isDirectory()) {
+          const taskFile = join2(subDir, ".tasks.jsonl");
+          if (existsSync2(taskFile)) {
+            repos.push({ path: taskFile, dir: subDir, name: entry });
+          }
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+  return { root, repos };
+}
+
+// src/gui.ts
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname2(__filename);
+function getHtmlPath() {
+  const candidates = [
+    join3(__dirname, "public", "index.html"),
+    join3(__dirname, "..", "public", "index.html")
+  ];
+  for (const p of candidates) {
+    if (existsSync3(p)) return p;
+  }
+  throw new Error("Could not find public/index.html. Make sure the public/ directory exists.");
+}
+function parseBody(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    req.on("end", () => {
+      try {
+        resolve2(body ? JSON.parse(body) : {});
+      } catch {
+        reject(new Error("Invalid JSON body"));
+      }
+    });
+    req.on("error", reject);
+  });
+}
+function sendJson(res, data, status = 200) {
+  res.writeHead(status, { "Content-Type": "application/json" });
+  res.end(JSON.stringify(data));
+}
+function sendError(res, message, status = 400) {
+  sendJson(res, { error: message }, status);
+}
+function tryListen(server, port, maxAttempts = 10) {
+  return new Promise((resolve2, reject) => {
+    const onError = (err) => {
+      server.removeListener("error", onError);
+      if (err.code === "EADDRINUSE" && maxAttempts > 1) {
+        tryListen(server, port + 1, maxAttempts - 1).then(resolve2, reject);
+      } else {
+        reject(err);
+      }
+    };
+    server.once("error", onError);
+    server.listen(port, "127.0.0.1", () => {
+      server.removeListener("error", onError);
+      resolve2(port);
+    });
+  });
+}
+function openBrowser(url) {
+  let cmd;
+  if (process.platform === "win32") {
+    cmd = `start "" "${url}"`;
+  } else if (process.platform === "darwin") {
+    cmd = `open "${url}"`;
+  } else {
+    cmd = `xdg-open "${url}"`;
+  }
+  exec(cmd, (err) => {
+    if (err) {
+      console.log(`Could not open browser automatically. Visit: ${url}`);
+    }
+  });
+}
+function startGui(dir, port = 3333) {
+  const resolvedDir = resolve(dir);
+  const server = createServer((req, res) => {
+    void (async () => {
+      const url = new URL(req.url ?? "/", `http://localhost:${port}`);
+      const method = req.method ?? "GET";
+      const pathname = url.pathname;
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+      if (method === "OPTIONS") {
+        res.writeHead(204);
+        res.end();
+        return;
+      }
+      try {
+        if (pathname === "/" && method === "GET") {
+          const html = readFileSync2(getHtmlPath(), "utf-8");
+          const injected = html.replace("__GUI_DIR__", JSON.stringify(resolvedDir));
+          res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+          res.end(injected);
+          return;
+        }
+        if (pathname === "/api/tasks" && method === "GET") {
+          const queryDir = url.searchParams.get("dir") ?? resolvedDir;
+          const scan = scanTaskFiles(queryDir);
+          const result = {
+            root: scan.root ? {
+              path: scan.root.path,
+              dir: scan.root.dir,
+              name: scan.root.name,
+              tasks: readTasks(scan.root.path)
+            } : null,
+            repos: scan.repos.map((r) => ({
+              path: r.path,
+              dir: r.dir,
+              name: r.name,
+              tasks: readTasks(r.path)
+            }))
+          };
+          sendJson(res, result);
+          return;
+        }
+        if (pathname === "/api/tasks/purge" && method === "POST") {
+          const body = await parseBody(req);
+          const targetDir = typeof body.dir === "string" ? body.dir : resolvedDir;
+          const taskFile = join3(targetDir, ".tasks.jsonl");
+          const result = purgeTasks(taskFile);
+          sendJson(res, { count: result.count, ids: result.purged.map((t) => t.id) });
+          return;
+        }
+        if (pathname === "/api/tasks" && method === "POST") {
+          const body = await parseBody(req);
+          if (typeof body.description !== "string" || !body.description) {
+            sendError(res, "description is required");
+            return;
+          }
+          const targetDir = typeof body.dir === "string" ? body.dir : resolvedDir;
+          const taskFile = join3(targetDir, ".tasks.jsonl");
+          const stage = typeof body.stage === "string" && STAGES.includes(body.stage) ? body.stage : void 0;
+          const task = createTask(taskFile, body.description, { stage });
+          sendJson(res, task, 201);
+          return;
+        }
+        const taskIdMatch = pathname.match(/^\/api\/tasks\/([^/]+)$/);
+        if (taskIdMatch) {
+          const id = taskIdMatch[1];
+          if (method === "PUT") {
+            const body = await parseBody(req);
+            const targetDir = typeof body.dir === "string" ? body.dir : resolvedDir;
+            const taskFile = join3(targetDir, ".tasks.jsonl");
+            const updates = {};
+            if (typeof body.stage === "string" && STAGES.includes(body.stage)) {
+              updates.stage = body.stage;
+            }
+            if (typeof body.description === "string" && body.description) {
+              updates.description = body.description;
+            }
+            const task = updateTask(taskFile, id, updates);
+            if (!task) {
+              sendError(res, "Task not found", 404);
+              return;
+            }
+            sendJson(res, task);
+            return;
+          }
+          if (method === "DELETE") {
+            const queryDir = url.searchParams.get("dir") ?? resolvedDir;
+            const taskFile = join3(queryDir, ".tasks.jsonl");
+            const removed = removeTask(taskFile, id);
+            if (!removed) {
+              sendError(res, "Task not found", 404);
+              return;
+            }
+            sendJson(res, { removed: true });
+            return;
+          }
+        }
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("Not found");
+      } catch (err) {
+        console.error("[gui] Request error:", err);
+        sendError(res, "Internal server error", 500);
+      }
+    })();
+  });
+  tryListen(server, port).then((actualPort) => {
+    const url = `http://localhost:${actualPort}`;
+    console.log(`Task Tracker GUI running at ${url}`);
+    console.log(`Watching: ${resolvedDir}`);
+    console.log("Press Ctrl+C to stop.");
+    openBrowser(url);
+  }).catch((err) => {
+    console.error("Failed to start GUI server:", err.message);
+    process.exit(1);
+  });
+}
+
+// src/cli.ts
+import process2 from "process";
+var __filename2 = fileURLToPath2(import.meta.url);
+var __dirname2 = dirname3(__filename2);
 var version = "0.0.0";
 try {
-  const pkg = JSON.parse(readFileSync2(join2(__dirname, "..", "package.json"), "utf-8"));
+  const pkg = JSON.parse(readFileSync3(join4(__dirname2, "..", "package.json"), "utf-8"));
   version = pkg.version;
 } catch {
 }
@@ -233,7 +477,7 @@ function getStorage() {
     return getStoragePath();
   } catch (e) {
     console.error(e instanceof Error ? e.message : "Not in a git repository");
-    process.exit(1);
+    process2.exit(1);
   }
 }
 var program = new Command();
@@ -242,7 +486,7 @@ program.command("add <description>").description("Add a new task").option("--sta
   if (!isValidStage(opts.stage)) {
     console.error(`Invalid stage: ${opts.stage}
 Valid stages: ${STAGES.join(", ")}`);
-    process.exit(1);
+    process2.exit(1);
   }
   const task = createTask(getStorage(), description, { stage: opts.stage });
   if (opts.json) {
@@ -256,7 +500,7 @@ program.command("list").description("List tasks").option("--all", "Include compl
   if (opts.stage && !stage) {
     console.error(`Invalid stage: ${opts.stage}
 Valid stages: ${STAGES.join(", ")}`);
-    process.exit(1);
+    process2.exit(1);
   }
   const tasks = listTasks(getStorage(), { all: opts.all, stage });
   if (opts.json) {
@@ -269,7 +513,7 @@ program.command("update <id>").description("Update a task").option("--stage <sta
   if (opts.stage && !isValidStage(opts.stage)) {
     console.error(`Invalid stage: ${opts.stage}
 Valid stages: ${STAGES.join(", ")}`);
-    process.exit(1);
+    process2.exit(1);
   }
   const updates = {};
   if (opts.stage) updates.stage = opts.stage;
@@ -277,7 +521,7 @@ Valid stages: ${STAGES.join(", ")}`);
   const task = updateTask(getStorage(), id, updates);
   if (!task) {
     console.error(`Task not found: ${id}`);
-    process.exit(1);
+    process2.exit(1);
   }
   if (opts.json) {
     console.log(JSON.stringify(task, null, 2));
@@ -285,25 +529,30 @@ Valid stages: ${STAGES.join(", ")}`);
     console.log("Updated: " + formatTask(task));
   }
 });
-program.command("done <id>").description("Mark task as done").action((id) => {
-  const task = updateTask(getStorage(), id, { stage: "done" });
+program.command("done <id>").description("Mark task as done").option("--keep <n>", "Auto-purge: keep N most recent done tasks (0=disabled)", "20").action((id, opts) => {
+  const storage = getStorage();
+  const task = updateTask(storage, id, { stage: "done" });
   if (!task) {
     console.error(`Task not found: ${id}`);
-    process.exit(1);
+    process2.exit(1);
   }
   console.log("Done: " + formatTask(task));
+  const keep = parseInt(opts.keep, 10);
+  if (!isNaN(keep)) {
+    autoPurgeTasks(storage, { keep });
+  }
 });
 program.command("remove <id>").description("Remove a task permanently").action((id) => {
   const removed = removeTask(getStorage(), id);
   if (!removed) {
     console.error(`Task not found: ${id}`);
-    process.exit(1);
+    process2.exit(1);
   }
   console.log(`Removed task: ${id}`);
 });
 program.command("check").description("Show active tasks and git status for this repo").option("--json", "JSON output").action((opts) => {
   const storage = getStorage();
-  const repoRoot = dirname2(storage);
+  const repoRoot = dirname3(storage);
   const activeTasks = listTasks(storage, { all: false });
   const repoStatus = getRepoStatus(repoRoot);
   if (opts.json) {
@@ -312,4 +561,29 @@ program.command("check").description("Show active tasks and git status for this
     console.log(formatCheckReport(activeTasks, repoStatus));
   }
 });
-program.parse(process.argv);
+program.command("purge").description("Remove all done tasks from storage").option("--dry-run", "Show what would be removed without removing").option("--keep <n>", "Keep N most recent done tasks, purge the rest").option("--json", "JSON output").action((opts) => {
+  const keep = opts.keep !== void 0 ? parseInt(opts.keep, 10) : void 0;
+  const result = purgeTasks(getStorage(), { dryRun: opts.dryRun, keep });
+  const ids = result.purged.map((t) => t.id);
+  if (opts.json) {
+    console.log(JSON.stringify({ count: result.count, ids }));
+  } else if (opts.dryRun) {
+    if (result.count === 0) {
+      console.log("No done tasks to purge.");
+    } else {
+      console.log(`Would purge ${result.count} task(s): ${ids.join(", ")}`);
+    }
+  } else {
+    if (result.count === 0) {
+      console.log("No done tasks to purge.");
+    } else {
+      console.log(`Purged ${result.count} task(s): ${ids.join(", ")}`);
+    }
+  }
+});
+program.command("gui [dir]").description("Start the web GUI (defaults to current directory)").option("--port <port>", "Port to listen on", "3333").action((dir, opts) => {
+  const targetDir = dir ?? process2.cwd();
+  const port = parseInt(opts.port, 10) || 3333;
+  startGui(targetDir, port);
+});
+program.parse(process2.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metyatech/task-tracker",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Persistent task lifecycle tracker for AI agent sessions",
   "type": "module",
   "bin": {
@@ -8,6 +8,7 @@
   },
   "files": [
     "dist",
+    "public",
     "LICENSE",
     "README.md"
   ],
@@ -28,7 +29,7 @@
   "scripts": {
     "build": "tsup",
     "test": "vitest run",
-    "lint": "eslint src --ext .ts",
+    "lint": "eslint src",
     "format": "prettier --write \"src/**/*.ts\" \"*.json\" \"*.md\"",
     "format:check": "prettier --check \"src/**/*.ts\" \"*.json\" \"*.md\"",
     "verify": "npm run format:check && npm run lint && npm run build && npm run test"
@@ -39,13 +40,13 @@
     "nanoid": "^5.0.7"
   },
   "devDependencies": {
+    "@eslint/js": "^9.0.0",
     "@types/node": "^20.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "prettier": "^3.2.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
+    "typescript-eslint": "^8.0.0",
     "vitest": "^1.4.0"
   }
 }

package/public/index.html

@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Task Tracker</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      .stage-cell {
+        width: 18px;
+        height: 14px;
+        border-radius: 2px;
+        flex-shrink: 0;
+        transition: opacity 0.1s;
+      }
+      .task-desc-input {
+        background: #374151;
+        color: #f3f4f6;
+        border: 1px solid #6b7280;
+        border-radius: 4px;
+        padding: 1px 6px;
+        font-size: 0.875rem;
+        width: 100%;
+        outline: none;
+      }
+      .task-desc-input:focus {
+        border-color: #3b82f6;
+      }
+      .stage-picker {
+        position: absolute;
+        z-index: 50;
+        top: calc(100% + 4px);
+        left: 0;
+        background: #1f2937;
+        border: 1px solid #4b5563;
+        border-radius: 6px;
+        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+        padding: 4px;
+        min-width: 150px;
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+      }
+      .stage-picker-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 5px 8px;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        text-align: left;
+        cursor: pointer;
+        color: #d1d5db;
+        background: transparent;
+        border: none;
+        width: 100%;
+      }
+      .stage-picker-btn:hover {
+        background: #374151;
+      }
+      .stage-picker-btn.active {
+        background: #374151;
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body class="bg-gray-900 text-gray-100 min-h-screen" style="font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;">
+    <!-- Header -->
+    <header class="sticky top-0 z-10 bg-gray-950 border-b border-gray-700 px-4 py-3 flex items-center gap-3 flex-wrap" style="background:#030712;">
+      <h1 class="font-bold text-white text-base">Task Tracker</h1>
+      <span id="dir-label" class="text-gray-500 text-xs truncate flex-1" style="min-width:0;"></span>
+      <div class="flex items-center gap-2 flex-shrink-0">
+        <label class="text-xs text-gray-500" for="tz-select">TZ:</label>
+        <select id="tz-select" class="bg-gray-800 text-gray-300 text-xs rounded px-2 py-1 border border-gray-700 focus:outline-none focus:border-blue-500"></select>
+      </div>
+      <button onclick="loadTasks()" class="text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 px-2 py-1 rounded flex-shrink-0">↻ Refresh</button>
+    </header>
+
+    <!-- Main -->
+    <main class="max-w-5xl mx-auto px-4 py-6 space-y-6" id="main">
+      <p class="text-gray-500 text-sm text-center py-16">Loading...</p>
+    </main>
+
+    <script>
+      // Injected by server
+      const GUI_DIR = __GUI_DIR__;
+
+      const STAGES = [
+        'pending','in-progress','implemented','verified','committed',
+        'pushed','pr-created','merged','released','published','done'
+      ];
+
+      const STAGE_COLORS = {
+        'pending':     '#6b7280',
+        'in-progress': '#3b82f6',
+        'implemented': '#06b6d4',
+        'verified':    '#eab308',
+        'committed':   '#a855f7',
+        'pushed':      '#22c55e',
+        'pr-created':  '#84cc16',
+        'merged':      '#16a34a',
+        'released':    '#38bdf8',
+        'published':   '#4ade80',
+        'done':        '#374151',
+      };
+
+      // ── Timezone setup ─────────────────────────────────────────────
+      const tzSelect = document.getElementById('tz-select');
+      let currentTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+      try {
+        const zones = Intl.supportedValuesOf('timeZone');
+        zones.forEach(tz => {
+          const opt = document.createElement('option');
+          opt.value = tz;
+          opt.textContent = tz;
+          if (tz === currentTz) opt.selected = true;
+          tzSelect.appendChild(opt);
+        });
+      } catch {
+        const opt = document.createElement('option');
+        opt.value = currentTz;
+        opt.textContent = currentTz;
+        opt.selected = true;
+        tzSelect.appendChild(opt);
+      }
+
+      tzSelect.addEventListener('change', () => {
+        currentTz = tzSelect.value;
+        renderAll(lastData);
+      });
+
+      document.getElementById('dir-label').textContent = GUI_DIR;
+
+      // ── Helpers ────────────────────────────────────────────────────
+      function formatDate(iso) {
+        if (!iso) return '';
+        try {
+          return new Date(iso).toLocaleString(undefined, {
+            timeZone: currentTz,
+            dateStyle: 'short',
+            timeStyle: 'short',
+          });
+        } catch {
+          return iso;
+        }
+      }
+
+      function stageIndex(stage) {
+        return STAGES.indexOf(stage);
+      }
+
+      // ── Stage gauge ────────────────────────────────────────────────
+      let activeDropdown = null;
+
+      function makeGauge(task, repoDir) {
+        const idx = stageIndex(task.stage);
+        const wrap = document.createElement('div');
+        wrap.style.cssText = 'position:relative; display:inline-flex; gap:2px; cursor:pointer;';
+        wrap.title = 'Click to change stage';
+
+        STAGES.forEach((s, i) => {
+          const cell = document.createElement('div');
+          cell.className = 'stage-cell';
+          cell.style.backgroundColor = STAGE_COLORS[s];
+          cell.style.opacity = i <= idx ? '1' : '0.15';
+          cell.title = s;
+          wrap.appendChild(cell);
+        });
+
+        wrap.addEventListener('click', (e) => {
+          e.stopPropagation();
+          showStagePicker(wrap, task, repoDir);
+        });
+
+        return wrap;
+      }
+
+      function showStagePicker(anchor, task, repoDir) {
+        if (activeDropdown) {
+          activeDropdown.remove();
+          activeDropdown = null;
+        }
+
+        const picker = document.createElement('div');
+        picker.className = 'stage-picker';
+
+        STAGES.forEach(s => {
+          const btn = document.createElement('button');
+          btn.className = 'stage-picker-btn' + (s === task.stage ? ' active' : '');
+
+          const dot = document.createElement('span');
+          dot.style.cssText = `display:inline-block;width:8px;height:8px;border-radius:50%;background:${STAGE_COLORS[s]};flex-shrink:0;`;
+
+          const label = document.createElement('span');
+          label.textContent = s;
+          if (s === task.stage) label.style.color = STAGE_COLORS[s];
+
+          btn.appendChild(dot);
+          btn.appendChild(label);
+
+          btn.addEventListener('click', async () => {
+            picker.remove();
+            activeDropdown = null;
+            await fetch(`/api/tasks/${task.id}`, {
+              method: 'PUT',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ dir: repoDir, stage: s }),
+            });
+            loadTasks();
+          });
+
+          picker.appendChild(btn);
+        });
+
+        anchor.appendChild(picker);
+        activeDropdown = picker;
+
+        const closeHandler = (e) => {
+          if (!picker.contains(e.target)) {
+            picker.remove();
+            if (activeDropdown === picker) activeDropdown = null;
+            document.removeEventListener('click', closeHandler);
+          }
+        };
+        setTimeout(() => document.addEventListener('click', closeHandler), 0);
+      }
+
+      // ── Task row ───────────────────────────────────────────────────
+      function makeTaskRow(task, repoDir) {
+        const row = document.createElement('div');
+        row.style.cssText = 'background:#1f2937;border:1px solid #374151;border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;';
+
+        // Top row: gauge + stage badge + delete button
+        const topRow = document.createElement('div');
+        topRow.style.cssText = 'display:flex;align-items:center;gap:8px;flex-wrap:wrap;';
+
+        const gauge = makeGauge(task, repoDir);
+
+        const stageBadge = document.createElement('span');
+        stageBadge.style.cssText = `font-size:0.7rem;padding:1px 6px;border-radius:4px;background:${STAGE_COLORS[task.stage]}22;color:${STAGE_COLORS[task.stage]};border:1px solid ${STAGE_COLORS[task.stage]}44;flex-shrink:0;`;
+        stageBadge.textContent = task.stage;
+
+        const spacer = document.createElement('div');
+        spacer.style.flex = '1';
+
+        const deleteBtn = document.createElement('button');
+        deleteBtn.style.cssText = 'color:#6b7280;font-size:1rem;line-height:1;padding:0 4px;background:none;border:none;cursor:pointer;flex-shrink:0;';
+        deleteBtn.textContent = '×';
+        deleteBtn.title = 'Delete task';
+        deleteBtn.onmouseenter = () => { deleteBtn.style.color = '#f87171'; };
+        deleteBtn.onmouseleave = () => { deleteBtn.style.color = '#6b7280'; };
+        deleteBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          if (confirm(`Delete task "${task.description}"?`)) {
+            await fetch(`/api/tasks/${task.id}?dir=${encodeURIComponent(repoDir)}`, { method: 'DELETE' });
+            loadTasks();
+          }
+        });
+
+        topRow.appendChild(gauge);
+        topRow.appendChild(stageBadge);
+        topRow.appendChild(spacer);
+        topRow.appendChild(deleteBtn);
+
+        // Description row
+        const descEl = document.createElement('span');
+        descEl.style.cssText = 'font-size:0.875rem;color:#f3f4f6;cursor:pointer;display:block;';
+        descEl.textContent = task.description;
+        descEl.title = 'Click to edit description';
+        descEl.addEventListener('click', () => {
+          const input = document.createElement('input');
+          input.type = 'text';
+          input.value = task.description;
+          input.className = 'task-desc-input';
+          descEl.replaceWith(input);
+          input.focus();
+          input.select();
+          const save = async () => {
+            const newDesc = input.value.trim();
+            if (newDesc && newDesc !== task.description) {
+              await fetch(`/api/tasks/${task.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ dir: repoDir, description: newDesc }),
+              });
+            }
+            loadTasks();
+          };
+          input.addEventListener('blur', save);
+          input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
+            if (e.key === 'Escape') { loadTasks(); }
+          });
+        });
+
+        // Meta row
+        const meta = document.createElement('div');
+        meta.style.cssText = 'font-size:0.7rem;color:#6b7280;';
+        meta.textContent = `#${task.id} · created ${formatDate(task.createdAt)} · updated ${formatDate(task.updatedAt)}`;
+
+        row.appendChild(topRow);
+        row.appendChild(descEl);
+        row.appendChild(meta);
+
+        return row;
+      }
+
+      // ── Add-task form ──────────────────────────────────────────────
+      function toggleAddForm(sectionEl, info) {
+        let formDiv = sectionEl.querySelector('.add-form-container');
+
+        if (formDiv && !formDiv.classList.contains('hidden')) {
+          formDiv.classList.add('hidden');
+          formDiv.innerHTML = '';
+          return;
+        }
+
+        if (!formDiv) {
+          formDiv = document.createElement('div');
+          formDiv.className = 'add-form-container';
+          formDiv.style.cssText = 'border-bottom:1px solid #374151;padding:12px 16px;background:#0f172a;';
+          const header = sectionEl.querySelector('.section-header');
+          header.insertAdjacentElement('afterend', formDiv);
+        } else {
+          formDiv.classList.remove('hidden');
+          formDiv.innerHTML = '';
+        }
+
+        const form = document.createElement('div');
+        form.style.cssText = 'display:flex;gap:8px;flex-wrap:wrap;align-items:center;';
+
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = 'Task description...';
+        input.style.cssText = 'flex:1;min-width:180px;background:#374151;color:#f3f4f6;border:1px solid #6b7280;border-radius:4px;padding:6px 10px;font-size:0.875rem;outline:none;';
+        input.addEventListener('focus', () => { input.style.borderColor = '#3b82f6'; });
+        input.addEventListener('blur', () => { input.style.borderColor = '#6b7280'; });
+
+        const stageSelect = document.createElement('select');
+        stageSelect.style.cssText = 'background:#374151;color:#d1d5db;border:1px solid #6b7280;border-radius:4px;padding:6px 8px;font-size:0.875rem;outline:none;';
+        STAGES.forEach(s => {
+          const opt = document.createElement('option');
+          opt.value = s;
+          opt.textContent = s;
+          if (s === 'pending') opt.selected = true;
+          stageSelect.appendChild(opt);
+        });
+
+        const addBtn = document.createElement('button');
+        addBtn.textContent = 'Add';
+        addBtn.style.cssText = 'background:#2563eb;color:#fff;border:none;border-radius:4px;padding:6px 14px;font-size:0.875rem;cursor:pointer;flex-shrink:0;';
+        addBtn.onmouseenter = () => { addBtn.style.background = '#1d4ed8'; };
+        addBtn.onmouseleave = () => { addBtn.style.background = '#2563eb'; };
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = 'Cancel';
+        cancelBtn.style.cssText = 'background:#374151;color:#d1d5db;border:none;border-radius:4px;padding:6px 14px;font-size:0.875rem;cursor:pointer;flex-shrink:0;';
+        cancelBtn.onmouseenter = () => { cancelBtn.style.background = '#4b5563'; };
+        cancelBtn.onmouseleave = () => { cancelBtn.style.background = '#374151'; };
+
+        const doAdd = async () => {
+          const desc = input.value.trim();
+          if (!desc) { input.focus(); return; }
+          await fetch('/api/tasks', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ dir: info.dir, description: desc, stage: stageSelect.value }),
+          });
+          formDiv.classList.add('hidden');
+          formDiv.innerHTML = '';
+          loadTasks();
+        };
+
+        addBtn.addEventListener('click', doAdd);
+        cancelBtn.addEventListener('click', () => {
+          formDiv.classList.add('hidden');
+          formDiv.innerHTML = '';
+        });
+        input.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter') doAdd();
+          if (e.key === 'Escape') cancelBtn.click();
+        });
+
+        form.appendChild(input);
+        form.appendChild(stageSelect);
+        form.appendChild(addBtn);
+        form.appendChild(cancelBtn);
+        formDiv.appendChild(form);
+        setTimeout(() => input.focus(), 0);
+      }
+
+      // ── Section ────────────────────────────────────────────────────
+      function makeSection(info, isRoot) {
+        const section = document.createElement('div');
+        section.style.cssText = 'background:#1f2937;border:1px solid #374151;border-radius:8px;overflow:hidden;';
+
+        // Header
+        const header = document.createElement('div');
+        header.className = 'section-header';
+        header.style.cssText = 'display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #374151;background:#111827;flex-wrap:wrap;';
+
+        const icon = isRoot ? '📁' : '📦';
+        const title = document.createElement('h2');
+        title.style.cssText = 'font-weight:700;font-size:0.875rem;color:#f9fafb;flex-shrink:0;';
+        title.textContent = `${icon} ${info.name}${isRoot ? ' (root)' : ''}`;
+
+        const activeTasks = info.tasks.filter(t => t.stage !== 'done');
+        const doneTasks = info.tasks.filter(t => t.stage === 'done');
+
+        const count = document.createElement('span');
+        count.style.cssText = 'font-size:0.75rem;color:#9ca3af;flex:1;';
+        count.textContent = `${activeTasks.length} active / ${info.tasks.length} total`;
+
+        const purgeBtn = document.createElement('button');
+        purgeBtn.textContent = 'Purge done';
+        purgeBtn.style.cssText = `font-size:0.75rem;padding:4px 10px;border-radius:4px;border:none;cursor:pointer;flex-shrink:0;background:${doneTasks.length > 0 ? '#374151' : '#1f2937'};color:${doneTasks.length > 0 ? '#d1d5db' : '#6b7280'};`;
+        purgeBtn.disabled = doneTasks.length === 0;
+        if (doneTasks.length > 0) {
+          purgeBtn.onmouseenter = () => { purgeBtn.style.background = '#7f1d1d'; purgeBtn.style.color = '#fca5a5'; };
+          purgeBtn.onmouseleave = () => { purgeBtn.style.background = '#374151'; purgeBtn.style.color = '#d1d5db'; };
+        }
+        purgeBtn.addEventListener('click', async () => {
+          if (confirm(`Purge ${doneTasks.length} done task(s) from "${info.name}"?`)) {
+            await fetch('/api/tasks/purge', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ dir: info.dir }),
+            });
+            loadTasks();
+          }
+        });
+
+        const addBtn = document.createElement('button');
+        addBtn.textContent = '+ Add task';
+        addBtn.style.cssText = 'font-size:0.75rem;padding:4px 10px;border-radius:4px;border:none;cursor:pointer;flex-shrink:0;background:#1d4ed8;color:#fff;';
+        addBtn.onmouseenter = () => { addBtn.style.background = '#1e40af'; };
+        addBtn.onmouseleave = () => { addBtn.style.background = '#1d4ed8'; };
+        addBtn.addEventListener('click', () => toggleAddForm(section, info));
+
+        header.appendChild(title);
+        header.appendChild(count);
+        header.appendChild(purgeBtn);
+        header.appendChild(addBtn);
+
+        // Task list
+        const taskList = document.createElement('div');
+        taskList.style.cssText = 'padding:12px;display:flex;flex-direction:column;gap:8px;';
+
+        if (info.tasks.length === 0) {
+          const empty = document.createElement('p');
+          empty.style.cssText = 'color:#6b7280;font-size:0.875rem;text-align:center;padding:24px 0;';
+          empty.textContent = 'No tasks. Click "+ Add task" to create one.';
+          taskList.appendChild(empty);
+        } else {
+          // Active tasks first (sorted by updatedAt desc), then done
+          const sorted = [...info.tasks].sort((a, b) => {
+            if (a.stage === 'done' && b.stage !== 'done') return 1;
+            if (a.stage !== 'done' && b.stage === 'done') return -1;
+            return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+          });
+          sorted.forEach(task => taskList.appendChild(makeTaskRow(task, info.dir)));
+        }
+
+        section.appendChild(header);
+        section.appendChild(taskList);
+        return section;
+      }
+
+      // ── Render ─────────────────────────────────────────────────────
+      let lastData = null;
+
+      function renderAll(data) {
+        if (!data) return;
+        lastData = data;
+        const main = document.getElementById('main');
+        main.innerHTML = '';
+
+        if (data.root) {
+          main.appendChild(makeSection(data.root, true));
+        }
+
+        if (data.repos && data.repos.length > 0) {
+          data.repos.forEach(repo => main.appendChild(makeSection(repo, false)));
+        }
+
+        if (!data.root && (!data.repos || data.repos.length === 0)) {
+          const empty = document.createElement('div');
+          empty.style.cssText = 'text-align:center;padding:64px 0;color:#6b7280;';
+          empty.innerHTML = `
+            <p style="font-size:1.125rem;margin-bottom:8px;">No .tasks.jsonl files found</p>
+            <p style="font-size:0.875rem;">Run <code style="background:#1f2937;padding:1px 6px;border-radius:3px;">task-tracker add "task"</code> in a git repo to get started</p>
+          `;
+          main.appendChild(empty);
+        }
+      }
+
+      // ── Data fetching ──────────────────────────────────────────────
+      async function loadTasks() {
+        try {
+          const res = await fetch(`/api/tasks?dir=${encodeURIComponent(GUI_DIR)}`);
+          if (res.ok) {
+            const data = await res.json();
+            renderAll(data);
+          }
+        } catch (e) {
+          console.error('Failed to load tasks:', e);
+        }
+      }
+
+      loadTasks();
+      setInterval(loadTasks, 5000);
+    </script>
+  </body>
+</html>