@tenonhq/dovetail-dashboard 0.0.33 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Update Set Dashboard for Dovetail",
   "main": "server.js",
   "scripts": {
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@tenonhq/dovetail-claude-plans": "*",
+    "@tenonhq/dovetail-todo": "*",
     "axios": "^1.5.1",
     "axios-cookiejar-support": "^4.0.7",
     "chokidar": "^3.6.0",

package/public/claude-plans.html

@@ -33,6 +33,7 @@
       <a class="cp-nav-link" href="/prompt-lints">Prompt Lints
         <span class="cp-lints-badge" id="cp-lints-badge" title="Prompts needing review" hidden>0</span>
         &rarr;</a>
+      <a class="cp-nav-link" href="/todos">TODO</a>
       <button class="cp-theme-toggle" id="cp-theme-toggle" type="button"
         aria-label="Toggle dark mode" title="Toggle dark mode"></button>
       <span class="cp-storage" id="cp-storage" title="storage root"></span>

package/public/index.html

@@ -31,6 +31,7 @@
     <div class="header-right">
       <button class="btn-refresh" id="refresh-btn" title="Refresh scopes and update sets">Refresh</button>
       <a class="btn-refresh" href="/claude-plans" title="Claude plans and diagrams pushed via MCP">Claude Plans</a>
+      <a class="btn-refresh" href="/todos" title="Priority TODO checklist">TODO</a>
       <button class="cp-theme-toggle" id="cp-theme-toggle" type="button"
         aria-label="Toggle dark mode" title="Toggle dark mode"></button>
       <div class="active-task-chip" id="active-task-chip" style="display:none;"></div>

package/public/todos.css

@@ -0,0 +1,178 @@
+/* ============================================================================
+   Dovetail TODO panel — Tenon brand theme. Tokens come from tokens.css.
+   List order is priority; drag a row's handle to reprioritize.
+   ============================================================================ */
+
+.td-body { min-height: 100vh; }
+
+.td-main {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-5) var(--space-12);
+}
+
+.td-panel {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-1);
+  padding: var(--space-5);
+}
+
+/* ── Add input ──────────────────────────────────────────────────────────── */
+.td-add {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+}
+.td-input {
+  flex: 1;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
+}
+.td-input:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(185, 225, 59, 0.25);
+}
+.td-add-btn {
+  font-family: var(--font-sans);
+  font-weight: var(--weight-semibold);
+  font-size: 14px;
+  color: var(--accent-fg);
+  background: var(--accent);
+  border: 1px solid var(--accent-hover);
+  border-radius: var(--radius-md);
+  padding: 0 18px;
+  cursor: pointer;
+  transition: background var(--dur-1) var(--ease-out);
+}
+.td-add-btn:hover { background: var(--accent-hover); }
+.td-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ── Toolbar ────────────────────────────────────────────────────────────── */
+.td-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+}
+.td-summary { font-size: 13px; color: var(--fg-muted); }
+.td-toolbar-actions { display: flex; align-items: center; gap: var(--space-4); }
+.td-toggle-done {
+  font-size: 13px;
+  color: var(--fg-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+.td-clear-btn {
+  font-size: 13px;
+  color: var(--danger);
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
+}
+.td-clear-btn:hover { border-color: var(--danger); background: var(--tag-red-bg); }
+
+/* ── List ───────────────────────────────────────────────────────────────── */
+.td-list { list-style: none; margin: 0; padding: 0; }
+
+.td-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 10px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  margin-bottom: var(--space-2);
+  transition: box-shadow var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out),
+    border-color var(--dur-1) var(--ease-out);
+}
+.td-item:hover { box-shadow: var(--shadow-1); }
+.td-item.td-dragging { opacity: 0.4; }
+.td-item.td-drop-target { border-color: var(--brand); border-style: dashed; }
+
+.td-rank {
+  min-width: 22px;
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--fg-subtle);
+}
+.td-handle {
+  cursor: grab;
+  color: var(--fg-subtle);
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 2px;
+  user-select: none;
+}
+.td-handle:active { cursor: grabbing; }
+
+.td-check {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  cursor: pointer;
+  accent-color: var(--brand);
+}
+
+.td-text {
+  flex: 1;
+  font-size: 15px;
+  color: var(--fg);
+  word-break: break-word;
+  cursor: text;
+}
+.td-item.td-done .td-text { color: var(--fg-subtle); text-decoration: line-through; }
+
+.td-text-edit {
+  flex: 1;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border-focus);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+}
+.td-text-edit:focus { outline: none; box-shadow: 0 0 0 3px rgba(185, 225, 59, 0.25); }
+
+.td-del {
+  flex: 0 0 auto;
+  background: transparent;
+  border: none;
+  color: var(--fg-subtle);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
+}
+.td-del:hover { color: var(--danger); background: var(--tag-red-bg); }
+
+.td-empty {
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 14px;
+  padding: var(--space-8) var(--space-4);
+}
+.td-hint {
+  margin-top: var(--space-4);
+  font-size: 12px;
+  color: var(--fg-subtle);
+  text-align: center;
+}

package/public/todos.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dovetail — TODO</title>
+  <script>
+    /* Apply the saved theme before first paint to avoid a flash of light. */
+    (function () {
+      try {
+        var t = localStorage.getItem("cp-theme");
+        if (t === "dark" || t === "light") {
+          document.documentElement.setAttribute("data-theme", t);
+        }
+      } catch (e) {}
+    })();
+  </script>
+  <link rel="stylesheet" href="tokens.css">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="todos.css">
+</head>
+<body class="td-body">
+  <header>
+    <div class="header-left">
+      <svg class="brand-mark" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M34.3254 13.7847H48.0563H54.9235V0H48.0563H34.3254H20.5946H6.8637H0V13.7847H6.8637H20.5946V27.5693H34.3254V13.7847Z" fill="#00663C"></path>
+        <path d="M54.9235 41.354V27.5693H48.0563H34.3254V41.354H20.5946V27.5693H6.8637H0V41.354V55.1387H20.5946H34.3254H54.9235V41.354Z" fill="#00663C"></path>
+      </svg>
+      <h1><span>Dovetail</span> TODO</h1>
+    </div>
+    <div class="header-right">
+      <a class="cp-nav-link" href="/" title="Update Sets dashboard">Update Sets</a>
+      <a class="cp-nav-link" href="/claude-plans" title="Claude plans pushed via MCP">Claude Plans</a>
+      <button class="cp-theme-toggle" id="cp-theme-toggle" type="button"
+        aria-label="Toggle dark mode" title="Toggle dark mode"></button>
+    </div>
+  </header>
+
+  <main class="td-main">
+    <section class="td-panel">
+      <form class="td-add" id="td-add-form" autocomplete="off">
+        <input type="text" id="td-input" class="td-input" maxlength="280"
+          placeholder="Add a priority… (Enter to add to bottom, Shift+Enter to top)">
+        <button type="submit" class="td-add-btn" id="td-add-btn">Add</button>
+      </form>
+
+      <div class="td-toolbar">
+        <div class="td-summary" id="td-summary">—</div>
+        <div class="td-toolbar-actions">
+          <label class="td-toggle-done">
+            <input type="checkbox" id="td-hide-done"> Hide done
+          </label>
+          <button class="td-clear-btn" id="td-clear-done" type="button" title="Remove all completed items">Clear done</button>
+        </div>
+      </div>
+
+      <ul class="td-list" id="td-list" aria-label="Priority TODO list"></ul>
+      <div class="td-empty" id="td-empty" style="display:none;">
+        Nothing here yet. Add your first priority above — top of the list is what you work on next.
+      </div>
+      <p class="td-hint">Drag a row by its handle to reprioritize. Order is priority: the top item is next.</p>
+    </section>
+  </main>
+
+  <div class="toast-container" id="toast-container"></div>
+  <script src="todos.js"></script>
+</body>
+</html>

package/public/todos.js

@@ -0,0 +1,261 @@
+/* Dovetail TODO panel client.
+ * Renders the priority list, drives add/toggle/edit/remove/reorder via REST,
+ * and live-refreshes from the server's SSE stream. List order = priority
+ * (index 0 is the top). Reorder is drag-the-handle; on drop we POST the full
+ * id order so the server persists one consistent ordering.
+ */
+(function () {
+  "use strict";
+
+  var listEl = document.getElementById("td-list");
+  var emptyEl = document.getElementById("td-empty");
+  var summaryEl = document.getElementById("td-summary");
+  var form = document.getElementById("td-add-form");
+  var input = document.getElementById("td-input");
+  var addBtn = document.getElementById("td-add-btn");
+  var hideDoneEl = document.getElementById("td-hide-done");
+  var clearDoneBtn = document.getElementById("td-clear-done");
+
+  var items = [];          // current ordered items from the server
+  var dragId = null;       // id of the row being dragged
+  var isEditing = false;   // suppress SSE re-render while editing text
+
+  // ── Theme toggle (mirrors the other dashboard pages) ──────────────────────
+  (function initTheme() {
+    var btn = document.getElementById("cp-theme-toggle");
+    if (!btn) return;
+    function current() {
+      return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+    }
+    function paint() { btn.textContent = current() === "dark" ? "☀" : "☾"; }
+    paint();
+    btn.addEventListener("click", function () {
+      var next = current() === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      try { localStorage.setItem("cp-theme", next); } catch (e) {}
+      paint();
+    });
+  })();
+
+  function toast(message, kind) {
+    var c = document.getElementById("toast-container");
+    if (!c) return;
+    var t = document.createElement("div");
+    t.className = "toast" + (kind ? " toast-" + kind : "");
+    t.textContent = message;
+    c.appendChild(t);
+    setTimeout(function () { t.remove(); }, 3200);
+  }
+
+  function api(method, url, body) {
+    var opts = { method: method, headers: { "Content-Type": "application/json" } };
+    if (body !== undefined) opts.body = JSON.stringify(body);
+    return fetch(url, opts).then(function (res) {
+      return res.json().then(function (data) {
+        if (!res.ok) throw new Error((data && data.error) || ("HTTP " + res.status));
+        return data;
+      });
+    });
+  }
+
+  function visibleItems() {
+    if (hideDoneEl.checked) {
+      return items.filter(function (it) { return !it.done; });
+    }
+    return items;
+  }
+
+  function render() {
+    if (isEditing) return;
+    listEl.innerHTML = "";
+    var shown = visibleItems();
+    var doneCount = items.filter(function (it) { return it.done; }).length;
+    summaryEl.textContent =
+      items.length === 0
+        ? "No items"
+        : items.length + " item" + (items.length === 1 ? "" : "s") + " · " + doneCount + " done";
+    emptyEl.style.display = items.length === 0 ? "block" : "none";
+
+    shown.forEach(function (it, idx) {
+      listEl.appendChild(renderItem(it, idx));
+    });
+  }
+
+  function renderItem(it, idx) {
+    var li = document.createElement("li");
+    li.className = "td-item" + (it.done ? " td-done" : "");
+    li.setAttribute("data-id", it.id);
+
+    var handle = document.createElement("span");
+    handle.className = "td-handle";
+    handle.textContent = "⠿";
+    handle.title = "Drag to reprioritize";
+    handle.setAttribute("draggable", "true");
+    wireDrag(handle, li, it);
+    li.appendChild(handle);
+
+    var rank = document.createElement("span");
+    rank.className = "td-rank";
+    rank.textContent = String(idx + 1);
+    li.appendChild(rank);
+
+    var check = document.createElement("input");
+    check.type = "checkbox";
+    check.className = "td-check";
+    check.checked = it.done;
+    check.title = it.done ? "Mark not done" : "Mark done";
+    check.addEventListener("change", function () {
+      api("PATCH", "/api/todos/" + encodeURIComponent(it.id), { done: check.checked })
+        .then(function (r) { applyList(r.list); })
+        .catch(function (e) { toast(e.message, "error"); check.checked = it.done; });
+    });
+    li.appendChild(check);
+
+    var text = document.createElement("span");
+    text.className = "td-text";
+    text.textContent = it.text;
+    text.title = "Double-click to edit";
+    text.addEventListener("dblclick", function () { beginEdit(li, text, it); });
+    li.appendChild(text);
+
+    var del = document.createElement("button");
+    del.className = "td-del";
+    del.type = "button";
+    del.textContent = "×";
+    del.title = "Delete";
+    del.addEventListener("click", function () {
+      api("DELETE", "/api/todos/" + encodeURIComponent(it.id))
+        .then(function (r) { applyList(r.list); })
+        .catch(function (e) { toast(e.message, "error"); });
+    });
+    li.appendChild(del);
+
+    return li;
+  }
+
+  function beginEdit(li, text, it) {
+    isEditing = true;
+    var editor = document.createElement("input");
+    editor.type = "text";
+    editor.className = "td-text-edit";
+    editor.maxLength = 280;
+    editor.value = it.text;
+    li.replaceChild(editor, text);
+    editor.focus();
+    editor.setSelectionRange(editor.value.length, editor.value.length);
+
+    function commit() {
+      var next = editor.value.trim();
+      isEditing = false;
+      if (!next || next === it.text) { render(); return; }
+      api("PATCH", "/api/todos/" + encodeURIComponent(it.id), { text: next })
+        .then(function (r) { applyList(r.list); })
+        .catch(function (e) { toast(e.message, "error"); render(); });
+    }
+    function cancel() { isEditing = false; render(); }
+
+    editor.addEventListener("blur", commit);
+    editor.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") { e.preventDefault(); editor.blur(); }
+      else if (e.key === "Escape") { e.preventDefault(); editor.removeEventListener("blur", commit); cancel(); }
+    });
+  }
+
+  // ── Drag-and-drop reorder ─────────────────────────────────────────────────
+  function wireDrag(handle, li, it) {
+    handle.addEventListener("dragstart", function (e) {
+      dragId = it.id;
+      li.classList.add("td-dragging");
+      if (e.dataTransfer) { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", it.id); }
+    });
+    handle.addEventListener("dragend", function () {
+      dragId = null;
+      li.classList.remove("td-dragging");
+      Array.prototype.forEach.call(listEl.children, function (c) { c.classList.remove("td-drop-target"); });
+    });
+    li.addEventListener("dragover", function (e) {
+      if (dragId === null || dragId === it.id) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+      li.classList.add("td-drop-target");
+    });
+    li.addEventListener("dragleave", function () { li.classList.remove("td-drop-target"); });
+    li.addEventListener("drop", function (e) {
+      e.preventDefault();
+      li.classList.remove("td-drop-target");
+      if (dragId === null || dragId === it.id) return;
+      reorder(dragId, it.id);
+    });
+  }
+
+  // Move dragged id to the slot occupied by targetId, then persist full order.
+  function reorder(sourceId, targetId) {
+    var order = items.map(function (i) { return i.id; });
+    var from = order.indexOf(sourceId);
+    var to = order.indexOf(targetId);
+    if (from === -1 || to === -1) return;
+    order.splice(from, 1);
+    order.splice(to, 0, sourceId);
+    // Optimistic: reorder local items immediately for snappy UX.
+    var byId = {};
+    items.forEach(function (i) { byId[i.id] = i; });
+    items = order.map(function (id) { return byId[id]; });
+    render();
+    api("POST", "/api/todos/reorder", { ids: order })
+      .then(function (r) { applyList(r.list); })
+      .catch(function (e) { toast(e.message, "error"); load(); });
+  }
+
+  function applyList(list) {
+    if (list && Array.isArray(list.items)) {
+      items = list.items;
+      render();
+    }
+  }
+
+  // ── Add ───────────────────────────────────────────────────────────────────
+  form.addEventListener("submit", function (e) { e.preventDefault(); submitAdd("bottom"); });
+  input.addEventListener("keydown", function (e) {
+    if (e.key === "Enter" && e.shiftKey) { e.preventDefault(); submitAdd("top"); }
+  });
+
+  function submitAdd(position) {
+    var text = input.value.trim();
+    if (!text) return;
+    addBtn.disabled = true;
+    api("POST", "/api/todos", { text: text, position: position })
+      .then(function (r) { input.value = ""; applyList(r.list); })
+      .catch(function (e) { toast(e.message, "error"); })
+      .then(function () { addBtn.disabled = false; input.focus(); });
+  }
+
+  hideDoneEl.addEventListener("change", render);
+  clearDoneBtn.addEventListener("click", function () {
+    api("POST", "/api/todos/clear-done")
+      .then(function (r) { applyList(r.list); toast("Cleared " + r.removed + " completed", "success"); })
+      .catch(function (e) { toast(e.message, "error"); });
+  });
+
+  // ── Load + live updates ─────────────────────────────────────────────────────
+  function load() {
+    api("GET", "/api/todos")
+      .then(function (r) { items = (r.list && r.list.items) || []; render(); })
+      .catch(function (e) { toast(e.message, "error"); });
+  }
+
+  function connectStream() {
+    try {
+      var es = new EventSource("/api/todos/stream");
+      es.addEventListener("todos:update", function (ev) {
+        try {
+          var data = JSON.parse(ev.data);
+          if (data && data.list) applyList(data.list);
+        } catch (e) {}
+      });
+      es.onerror = function () { /* browser auto-reconnects */ };
+    } catch (e) { /* SSE unsupported — page still works via manual actions */ }
+  }
+
+  load();
+  connectStream();
+})();

package/server.js

@@ -1374,16 +1374,179 @@ app.delete("/api/claude-plans/:slug", claudePlansLimiter, function (req, res) {
   }
 });
 
+// --- TODO Panel ---
+// A drag-to-reorder priority checklist. All writes go through
+// @tenonhq/dovetail-todo's storage layer so the ordering/validation rules
+// live in exactly one place (same pattern as the claude-plans routes above).
+// The single store file is watched so MCP-driven and dashboard-driven changes
+// both stream to the /todos page.
+const todoLib = require("@tenonhq/dovetail-todo/dist/storage");
+
+const TODO_DIR =
+  process.env.DOVE_TODO_DIR || path.join(os.homedir(), ".dovetail", "todos");
+const TODO_FILE = path.join(TODO_DIR, "todos.json");
+
+const todoLimiter = RateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 240,
+});
+
+// SSE fan-out for the TODO panel — one frame per connected client.
+const todoSseClients = new Set();
+
+function broadcastTodos(list) {
+  const frame = "event: todos:update\ndata: " + JSON.stringify({ list: list }) + "\n\n";
+  for (const res of todoSseClients) {
+    try {
+      res.write(frame);
+    } catch (err) {
+      todoSseClients.delete(res);
+    }
+  }
+}
+
+function emitTodoState() {
+  try {
+    broadcastTodos(todoLib.loadList({ rootDir: TODO_DIR }));
+  } catch (e) {
+    // A torn/partial read between rename events is transient; ignore.
+  }
+}
+
+let todoWatcher = null;
+function startTodoWatcher() {
+  if (todoWatcher) return;
+  try {
+    fs.mkdirSync(TODO_DIR, { recursive: true });
+  } catch (err) {
+    console.warn("[todos] could not create storage dir:", err.message);
+  }
+  todoWatcher = chokidar.watch(TODO_FILE, {
+    ignoreInitial: true,
+    awaitWriteFinish: { stabilityThreshold: 50, pollInterval: 25 },
+  });
+  todoWatcher.on("add", emitTodoState);
+  todoWatcher.on("change", emitTodoState);
+  todoWatcher.on("unlink", function () { broadcastTodos({ schema_version: 1, items: [] }); });
+}
+
+app.get("/todos", function (req, res) {
+  res.sendFile(path.join(__dirname, "public", "todos.html"));
+});
+
+app.get("/api/todos", function (req, res) {
+  try {
+    res.json({ list: todoLib.loadList({ rootDir: TODO_DIR }), storage: TODO_DIR });
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
+app.get("/api/todos/stream", function (req, res) {
+  res.set({
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    Connection: "keep-alive",
+    "X-Accel-Buffering": "no",
+  });
+  res.flushHeaders();
+  res.write("event: hello\ndata: {}\n\n");
+  todoSseClients.add(res);
+
+  const heartbeat = setInterval(function () {
+    try {
+      res.write(": heartbeat\n\n");
+    } catch (err) {
+      clearInterval(heartbeat);
+      todoSseClients.delete(res);
+    }
+  }, 25000);
+
+  req.on("close", function () {
+    clearInterval(heartbeat);
+    todoSseClients.delete(res);
+  });
+});
+
+// POST /api/todos — add a one-line item. Body: { text, position? }
+app.post("/api/todos", todoLimiter, function (req, res) {
+  try {
+    const body = req.body || {};
+    const result = todoLib.addTodo(
+      { text: body.text, position: body.position },
+      { rootDir: TODO_DIR }
+    );
+    broadcastTodos(result.list);
+    res.json(result);
+  } catch (e) {
+    res.status(400).json({ error: e.message });
+  }
+});
+
+// POST /api/todos/reorder — persist a full priority order. Body: { ids: [] }
+app.post("/api/todos/reorder", todoLimiter, function (req, res) {
+  try {
+    const body = req.body || {};
+    const list = todoLib.reorderTodos({ ids: body.ids }, { rootDir: TODO_DIR });
+    broadcastTodos(list);
+    res.json({ list: list });
+  } catch (e) {
+    res.status(400).json({ error: e.message });
+  }
+});
+
+// POST /api/todos/clear-done — drop every completed item.
+app.post("/api/todos/clear-done", todoLimiter, function (req, res) {
+  try {
+    const result = todoLib.clearDone({ rootDir: TODO_DIR });
+    broadcastTodos(result.list);
+    res.json(result);
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
+// PATCH /api/todos/:id — toggle done or edit text. Body: { done? } or { text }
+app.patch("/api/todos/:id", todoLimiter, function (req, res) {
+  try {
+    const id = req.params.id;
+    const body = req.body || {};
+    let result;
+    if (typeof body.text === "string") {
+      result = todoLib.updateTodo({ id: id, text: body.text }, { rootDir: TODO_DIR });
+    } else {
+      result = todoLib.toggleTodo({ id: id, done: body.done }, { rootDir: TODO_DIR });
+    }
+    broadcastTodos(result.list);
+    res.json(result);
+  } catch (e) {
+    res.status(400).json({ error: e.message });
+  }
+});
+
+// DELETE /api/todos/:id — remove one item.
+app.delete("/api/todos/:id", todoLimiter, function (req, res) {
+  try {
+    const result = todoLib.removeTodo({ id: req.params.id }, { rootDir: TODO_DIR });
+    broadcastTodos(result.list);
+    res.json(result);
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
 // Only start the server when run directly (not when require()-d).
 // Callers like dashboardCommand.ts and allScopesCommands.ts use
 // spawn("node", [serverPath]) which sets require.main === module.
 if (require.main === module) {
   startClaudePlanWatcher();
+  startTodoWatcher();
   app.listen(PORT, "127.0.0.1", function () {
     console.log("\n  Dovetail Update Set Dashboard");
     console.log("  Instance:  " + SN_INSTANCE);
     console.log("  Project:   " + PROJECT_ROOT);
     console.log("  Dashboard: http://localhost:" + PORT);
-    console.log("  Claude:    http://localhost:" + PORT + "/claude-plans\n");
+    console.log("  Claude:    http://localhost:" + PORT + "/claude-plans");
+    console.log("  TODO:      http://localhost:" + PORT + "/todos\n");
   });
 }