npm - @tenonhq/dovetail-dashboard - Versions diffs - 0.0.38 → 0.0.40 - Mend

@tenonhq/dovetail-dashboard 0.0.38 → 0.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +2 -2
package/public/claude-plans.html +1 -0
package/public/prompt-editor.html +188 -0
package/public/prompt-editor.js +342 -0
package/server.js +120 -2

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tenonhq/dovetail-dashboard",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "description": "Update Set Dashboard for Dovetail",
   "main": "server.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "postpublish": "npm run version:bump"
   },
   "dependencies": {
-    "@tenonhq/dovetail-claude-plans": "~0.0.22",
+    "@tenonhq/dovetail-claude-plans": "~0.0.24",
     "@tenonhq/dovetail-todo": "~0.0.1",
     "axios": "^1.5.1",
     "axios-cookiejar-support": "^4.0.7",

package/public/claude-plans.html CHANGED Viewed

@@ -32,6 +32,7 @@
     </div>
     <div class="header-right">
       <a class="cp-nav-link" href="/">&larr; Update Sets</a>
+      <a class="cp-nav-link" href="/prompt-editor">Prompt Editor &rarr;</a>
       <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>

package/public/prompt-editor.html ADDED Viewed

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Dovetail — Prompt Editor</title>
+  <script>
+    /* Apply 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" />
+  <style>
+    .pe-body { margin: 0; display: flex; flex-direction: column; height: 100vh; }
+    .pe-toolbar {
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 16px; border-bottom: 1px solid var(--border, #d8dad7);
+      background: var(--bg-paper, #fff);
+    }
+    .pe-toolbar h2 { font-size: 14px; margin: 0; font-weight: 650; color: var(--fg, #1f2320); }
+    .pe-spacer { flex: 1; }
+    .pe-hint { font-size: 12px; color: var(--fg-muted, #6b6f6b); }
+    .pe-hint code {
+      background: var(--bg-subtle, #f1f2f0); padding: 1px 5px; border-radius: 4px;
+      font-size: 11px;
+    }
+    .pe-btn {
+      font: inherit; font-size: 13px; cursor: pointer;
+      border: 1px solid var(--border, #d8dad7); background: var(--bg-paper, #fff);
+      color: var(--fg, #1f2320); padding: 5px 11px; border-radius: 7px;
+    }
+    .pe-btn:hover { background: var(--bg-subtle, #f1f2f0); }
+    .pe-btn-accent { background: var(--accent, #00663c); color: var(--accent-fg, #fff); border-color: transparent; }
+    .pe-btn-accent:hover { background: var(--accent-hover, #00552f); }
+    /* Tab bar */
+    .pe-tabs {
+      display: flex; align-items: stretch; gap: 2px; overflow-x: auto;
+      background: var(--bg-subtle, #f1f2f0); border-bottom: 1px solid var(--border, #d8dad7);
+      padding: 0 8px; min-height: 40px;
+    }
+    .pe-tab {
+      display: flex; align-items: center; gap: 7px; cursor: pointer;
+      padding: 0 12px; font-size: 13px; color: var(--fg-muted, #6b6f6b);
+      border: 1px solid transparent; border-bottom: none; white-space: nowrap;
+      max-width: 240px; position: relative; top: 1px;
+    }
+    .pe-tab:hover { color: var(--fg, #1f2320); }
+    .pe-tab.is-open {
+      background: var(--bg-paper, #fff); color: var(--fg, #1f2320);
+      border-color: var(--border, #d8dad7); border-top-left-radius: 8px; border-top-right-radius: 8px;
+      font-weight: 600;
+    }
+    .pe-tab-title { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
+    .pe-tab-dot {
+      width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #00663c);
+      flex: none; visibility: hidden;
+    }
+    .pe-tab.is-active .pe-tab-dot { visibility: visible; }
+    .pe-tab-close {
+      border: none; background: none; cursor: pointer; color: var(--fg-subtle, #999);
+      font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 4px;
+    }
+    .pe-tab-close:hover { background: var(--bg-subtle, #e6e8e5); color: var(--danger, #b3261e); }
+    .pe-newtab {
+      border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1;
+      color: var(--fg-muted, #6b6f6b); padding: 0 12px; align-self: center;
+    }
+    .pe-newtab:hover { color: var(--accent, #00663c); }
+    /* Editor row */
+    .pe-editrow { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
+      border-bottom: 1px solid var(--border-subtle, #e6e8e5); background: var(--bg-paper, #fff); }
+    .pe-title-input {
+      font: inherit; font-size: 14px; font-weight: 600; color: var(--fg, #1f2320);
+      border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px;
+      min-width: 220px; flex: 1; max-width: 460px;
+    }
+    .pe-title-input:hover { border-color: var(--border, #d8dad7); }
+    .pe-title-input:focus { border-color: var(--accent, #00663c); outline: none; background: var(--bg-subtle, #f7f8f6); }
+    .pe-save-state { font-size: 12px; color: var(--fg-subtle, #999); min-width: 70px; }
+    .pe-view-toggle { display: flex; border: 1px solid var(--border, #d8dad7); border-radius: 7px; overflow: hidden; }
+    .pe-view-toggle button {
+      font: inherit; font-size: 12px; cursor: pointer; border: none; background: var(--bg-paper, #fff);
+      color: var(--fg-muted, #6b6f6b); padding: 4px 10px;
+    }
+    .pe-view-toggle button.is-on { background: var(--accent, #00663c); color: var(--accent-fg, #fff); }
+    /* Editor body — split */
+    .pe-main { flex: 1; display: flex; min-height: 0; }
+    .pe-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    .pe-pane.is-hidden { display: none; }
+    .pe-pane-label {
+      font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
+      color: var(--fg-subtle, #999); padding: 6px 14px 2px;
+    }
+    #pe-source {
+      flex: 1; resize: none; border: none; outline: none; padding: 12px 16px;
+      font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.55;
+      color: var(--fg, #1f2320); background: var(--bg, #fff); tab-size: 2;
+    }
+    .pe-preview {
+      flex: 1; overflow: auto; padding: 12px 18px; border-left: 1px solid var(--border-subtle, #e6e8e5);
+      background: var(--bg-paper, #fff); color: var(--fg, #1f2320); font-size: 14px; line-height: 1.6;
+    }
+    .pe-preview pre { background: var(--bg-subtle, #f1f2f0); padding: 10px 12px; border-radius: 8px; overflow: auto; }
+    .pe-empty { margin: auto; text-align: center; color: var(--fg-muted, #6b6f6b); padding: 40px; }
+    /* Toast for Claude live-enhance */
+    .pe-toast {
+      position: fixed; bottom: 18px; right: 18px; z-index: 50;
+      background: var(--accent, #00663c); color: var(--accent-fg, #fff);
+      padding: 10px 14px; border-radius: 9px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.2);
+      display: flex; gap: 10px; align-items: center; opacity: 0; transform: translateY(8px);
+      transition: opacity .2s, transform .2s; pointer-events: none;
+    }
+    .pe-toast.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
+    .pe-toast button {
+      font: inherit; font-size: 12px; cursor: pointer; border: 1px solid rgba(255,255,255,.5);
+      background: transparent; color: inherit; padding: 3px 9px; border-radius: 6px;
+    }
+  </style>
+</head>
+<body class="cp-body pe-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> Prompt Editor</h1>
+    </div>
+    <div class="header-right">
+      <a class="cp-nav-link" href="/">&larr; Update Sets</a>
+      <a class="cp-nav-link" href="/claude-plans">Claude Plans &rarr;</a>
+      <button class="cp-theme-toggle" id="cp-theme-toggle" type="button"
+        aria-label="Toggle dark mode" title="Toggle dark mode"></button>
+    </div>
+  </header>
+  <div class="pe-toolbar">
+    <h2>Prompts</h2>
+    <span class="pe-spacer"></span>
+    <span class="pe-hint">The open tab is what Claude edits — ask a session: <code>enhance the prompt I'm working on</code></span>
+  </div>
+  <nav class="pe-tabs" id="pe-tabs" aria-label="Prompt tabs"></nav>
+  <div class="pe-editrow" id="pe-editrow" hidden>
+    <input class="pe-title-input" id="pe-title" type="text" placeholder="Untitled prompt"
+      aria-label="Prompt title" maxlength="200" />
+    <span class="pe-save-state" id="pe-save-state"></span>
+    <span class="pe-spacer"></span>
+    <div class="pe-view-toggle" role="group" aria-label="View mode">
+      <button id="pe-view-edit" type="button">Edit</button>
+      <button id="pe-view-split" type="button" class="is-on">Split</button>
+      <button id="pe-view-preview" type="button">Preview</button>
+    </div>
+  </div>
+  <div class="pe-main" id="pe-main">
+    <div class="pe-pane" id="pe-pane-source">
+      <div class="pe-pane-label">HTML source</div>
+      <textarea id="pe-source" spellcheck="false"
+        placeholder="Write your prompt here — HTML/XML prompt-template markup is fine.&#10;&#10;Then ask a Claude Code session to enhance it; the result appears here live."></textarea>
+    </div>
+    <div class="pe-pane" id="pe-pane-preview">
+      <div class="pe-pane-label">Preview</div>
+      <div class="pe-preview" id="pe-preview"></div>
+    </div>
+  </div>
+  <div class="pe-toast" id="pe-toast" role="status">
+    <span id="pe-toast-msg">Claude updated this prompt</span>
+    <button id="pe-toast-load" type="button">Load it</button>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.5/dist/purify.min.js"></script>
+  <script src="/prompt-editor.js"></script>
+</body>
+</html>

package/public/prompt-editor.js ADDED Viewed

@@ -0,0 +1,342 @@
+/* Dovetail Prompt Editor — multi-tab HTML prompt drafts.
+ *
+ * Drafts persist to the claude-plans store via /api/prompt-drafts. The tab you
+ * have open is the "active" draft a Claude Code session reads with
+ * get_active_prompt_draft; when the session writes an enhanced prompt back with
+ * update_prompt_draft, the file changes, the server emits a draft:upsert SSE
+ * frame, and we merge it into the matching tab live. */
+(function () {
+  "use strict";
+  var state = {
+    drafts: [],        // [{id,title,content,updated_at,...}]
+    activeId: null,    // server-side active pointer (the Claude-referenced tab)
+    openId: null,      // tab currently shown in the editor (mirrors activeId)
+    dirty: false,      // unsaved local edits in the source textarea
+    pendingUpsert: null, // a draft:upsert for the open tab deferred while typing
+    view: "split"      // edit | split | preview
+  };
+  var els = {
+    tabs: document.getElementById("pe-tabs"),
+    editrow: document.getElementById("pe-editrow"),
+    title: document.getElementById("pe-title"),
+    saveState: document.getElementById("pe-save-state"),
+    source: document.getElementById("pe-source"),
+    preview: document.getElementById("pe-preview"),
+    paneSource: document.getElementById("pe-pane-source"),
+    panePreview: document.getElementById("pe-pane-preview"),
+    main: document.getElementById("pe-main"),
+    viewEdit: document.getElementById("pe-view-edit"),
+    viewSplit: document.getElementById("pe-view-split"),
+    viewPreview: document.getElementById("pe-view-preview"),
+    toast: document.getElementById("pe-toast"),
+    toastMsg: document.getElementById("pe-toast-msg"),
+    toastLoad: document.getElementById("pe-toast-load"),
+    themeToggle: document.getElementById("cp-theme-toggle")
+  };
+  // ---- API helpers ---------------------------------------------------------
+  function api(method, url, body) {
+    var opts = { method: method, headers: {} };
+    if (body !== undefined) {
+      opts.headers["Content-Type"] = "application/json";
+      opts.body = JSON.stringify(body);
+    }
+    return fetch(url, opts).then(function (res) {
+      if (!res.ok) {
+        return res.json().catch(function () { return {}; }).then(function (e) {
+          throw new Error(e.error || e.message || ("HTTP " + res.status));
+        });
+      }
+      return res.status === 204 ? null : res.json();
+    });
+  }
+  function loadAll() {
+    return api("GET", "/api/prompt-drafts").then(function (data) {
+      state.drafts = (data && data.drafts) || [];
+      state.activeId = data ? data.active_id : null;
+      if (!state.drafts.length) {
+        return createDraft();
+      }
+      // Open the server-active tab, else the first.
+      var openTarget = state.activeId && findDraft(state.activeId) ? state.activeId : state.drafts[0].id;
+      openDraft(openTarget, true);
+      renderTabs();
+    });
+  }
+  function findDraft(id) {
+    for (var i = 0; i < state.drafts.length; i++) if (state.drafts[i].id === id) return state.drafts[i];
+    return null;
+  }
+  // ---- Rendering -----------------------------------------------------------
+  function renderTabs() {
+    els.tabs.textContent = "";
+    state.drafts.forEach(function (d) {
+      var tab = document.createElement("div");
+      tab.className = "pe-tab";
+      if (d.id === state.openId) tab.classList.add("is-open");
+      if (d.id === state.activeId) tab.classList.add("is-active");
+      tab.setAttribute("role", "button");
+      tab.title = d.id === state.activeId ? "Active — Claude edits this tab" : "Open tab";
+      var dot = document.createElement("span");
+      dot.className = "pe-tab-dot";
+      dot.title = "Active for Claude";
+      tab.appendChild(dot);
+      var title = document.createElement("span");
+      title.className = "pe-tab-title";
+      title.textContent = d.title || "Untitled prompt";
+      tab.appendChild(title);
+      var close = document.createElement("button");
+      close.className = "pe-tab-close";
+      close.type = "button";
+      close.textContent = "×";
+      close.title = "Close tab";
+      close.setAttribute("aria-label", "Close " + (d.title || "tab"));
+      close.addEventListener("click", function (ev) {
+        ev.stopPropagation();
+        deleteDraft(d.id);
+      });
+      tab.addEventListener("click", function () { openDraft(d.id); });
+      tab.appendChild(close);
+      els.tabs.appendChild(tab);
+    });
+    var add = document.createElement("button");
+    add.className = "pe-newtab";
+    add.type = "button";
+    add.textContent = "＋";
+    add.title = "New prompt tab";
+    add.setAttribute("aria-label", "New prompt tab");
+    add.addEventListener("click", function () { createDraft(); });
+    els.tabs.appendChild(add);
+  }
+  function renderEditor() {
+    var d = findDraft(state.openId);
+    if (!d) {
+      els.editrow.hidden = true;
+      els.main.style.display = "none";
+      return;
+    }
+    els.editrow.hidden = false;
+    els.main.style.display = "flex";
+    els.title.value = d.title || "";
+    els.source.value = d.content || "";
+    state.dirty = false;
+    setSaveState("saved");
+    renderPreview();
+  }
+  function renderPreview() {
+    var raw = els.source.value || "";
+    var clean = window.DOMPurify ? window.DOMPurify.sanitize(raw) : escapeHtml(raw);
+    els.preview.innerHTML = clean ||
+      '<div class="pe-empty">Nothing to preview yet.</div>';
+  }
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+    });
+  }
+  function setSaveState(s) {
+    if (s === "saving") els.saveState.textContent = "Saving…";
+    else if (s === "saved") els.saveState.textContent = "Saved";
+    else if (s === "error") els.saveState.textContent = "Save failed";
+    else els.saveState.textContent = "";
+  }
+  // ---- Mutations -----------------------------------------------------------
+  function createDraft() {
+    return api("POST", "/api/prompt-drafts", { title: "Untitled prompt", content: "" }).then(function (d) {
+      state.drafts.push(d);
+      openDraft(d.id);
+      renderTabs();
+      els.title.focus();
+      els.title.select();
+    });
+  }
+  function openDraft(id, skipActivate) {
+    if (!findDraft(id)) return;
+    state.openId = id;
+    state.pendingUpsert = null;
+    hideToast();
+    renderEditor();
+    renderTabs();
+    // Opening a tab makes it the Claude-referenced active draft.
+    if (!skipActivate && id !== state.activeId) {
+      api("POST", "/api/prompt-drafts/active", { id: id }).then(function (r) {
+        state.activeId = r.active_id;
+        renderTabs();
+      }).catch(function () {});
+    } else if (skipActivate) {
+      state.activeId = state.activeId || id;
+    }
+  }
+  function deleteDraft(id) {
+    var d = findDraft(id);
+    var label = d && d.title ? d.title : "this prompt";
+    if (!window.confirm("Close and delete “" + label + "”?")) return;
+    api("DELETE", "/api/prompt-drafts/" + id).then(function (r) {
+      state.drafts = state.drafts.filter(function (x) { return x.id !== id; });
+      state.activeId = r.active_id;
+      if (state.openId === id) {
+        if (r.active_id && findDraft(r.active_id)) openDraft(r.active_id, true);
+        else if (state.drafts.length) openDraft(state.drafts[0].id, true);
+        else { state.openId = null; renderEditor(); }
+      }
+      renderTabs();
+    }).catch(function (e) { window.alert("Delete failed: " + e.message); });
+  }
+  var saveTimer = null;
+  function scheduleSave() {
+    state.dirty = true;
+    setSaveState("saving");
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = setTimeout(flushSave, 600);
+  }
+  function flushSave() {
+    var id = state.openId;
+    if (!id) return;
+    var body = { title: els.title.value, content: els.source.value };
+    api("PUT", "/api/prompt-drafts/" + id, body).then(function (d) {
+      var local = findDraft(id);
+      if (local) { local.title = d.title; local.content = d.content; local.updated_at = d.updated_at; }
+      state.dirty = false;
+      setSaveState("saved");
+      renderTabs(); // reflect a renamed title in its tab
+    }).catch(function () { setSaveState("error"); });
+  }
+  // ---- SSE live-reload -----------------------------------------------------
+  function connectStream() {
+    var es = new EventSource("/api/claude-plans/stream");
+    es.addEventListener("draft:upsert", function (ev) {
+      var d = JSON.parse(ev.data).draft;
+      if (!d) return;
+      var local = findDraft(d.id);
+      if (local) { local.title = d.title; local.updated_at = d.updated_at; }
+      else { state.drafts.push(d); }
+      renderTabs();
+      if (d.id === state.openId) {
+        // Same content we already show (our own autosave echo) — ignore.
+        if (d.content === els.source.value) { if (local) local.content = d.content; return; }
+        if (state.dirty || document.activeElement === els.source) {
+          // Don't clobber in-progress typing — offer to load instead.
+          state.pendingUpsert = d;
+          showToast("Claude updated this prompt");
+        } else {
+          if (local) local.content = d.content;
+          els.source.value = d.content || "";
+          renderPreview();
+          flashToast("Claude enhanced this prompt");
+        }
+      } else if (local) {
+        local.content = d.content;
+      }
+    });
+    es.addEventListener("draft:delete", function (ev) {
+      var id = JSON.parse(ev.data).id;
+      state.drafts = state.drafts.filter(function (x) { return x.id !== id; });
+      if (state.openId === id) {
+        state.openId = state.drafts.length ? state.drafts[0].id : null;
+        if (state.openId) openDraft(state.openId, true); else renderEditor();
+      }
+      renderTabs();
+    });
+    es.addEventListener("draft:active", function (ev) {
+      state.activeId = JSON.parse(ev.data).active_id;
+      renderTabs();
+    });
+    es.onerror = function () { /* EventSource auto-reconnects */ };
+  }
+  // ---- Toast ---------------------------------------------------------------
+  var toastTimer = null;
+  function showToast(msg) {
+    els.toastMsg.textContent = msg;
+    els.toastLoad.hidden = false;
+    els.toast.classList.add("is-show");
+  }
+  function flashToast(msg) {
+    els.toastMsg.textContent = msg;
+    els.toastLoad.hidden = true;
+    els.toast.classList.add("is-show");
+    if (toastTimer) clearTimeout(toastTimer);
+    toastTimer = setTimeout(hideToast, 2600);
+  }
+  function hideToast() { els.toast.classList.remove("is-show"); }
+  // ---- View toggle ---------------------------------------------------------
+  function setView(v) {
+    state.view = v;
+    els.paneSource.classList.toggle("is-hidden", v === "preview");
+    els.panePreview.classList.toggle("is-hidden", v === "edit");
+    els.viewEdit.classList.toggle("is-on", v === "edit");
+    els.viewSplit.classList.toggle("is-on", v === "split");
+    els.viewPreview.classList.toggle("is-on", v === "preview");
+    if (v !== "edit") renderPreview();
+  }
+  // ---- Theme toggle (shared cp-theme key) ----------------------------------
+  function initTheme() {
+    if (!els.themeToggle) return;
+    els.themeToggle.addEventListener("click", function () {
+      var cur = document.documentElement.getAttribute("data-theme");
+      var next = cur === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      try { localStorage.setItem("cp-theme", next); } catch (e) {}
+    });
+  }
+  // ---- Wire up -------------------------------------------------------------
+  els.source.addEventListener("input", function () { scheduleSave(); renderPreview(); });
+  els.title.addEventListener("input", function () { scheduleSave(); });
+  els.viewEdit.addEventListener("click", function () { setView("edit"); });
+  els.viewSplit.addEventListener("click", function () { setView("split"); });
+  els.viewPreview.addEventListener("click", function () { setView("preview"); });
+  els.toastLoad.addEventListener("click", function () {
+    if (state.pendingUpsert) {
+      var d = state.pendingUpsert;
+      var local = findDraft(d.id);
+      if (local) local.content = d.content;
+      els.source.value = d.content || "";
+      state.dirty = false;
+      setSaveState("saved");
+      renderPreview();
+      state.pendingUpsert = null;
+    }
+    hideToast();
+  });
+  // Save immediately if the user navigates away mid-edit.
+  window.addEventListener("beforeunload", function () { if (state.dirty) flushSave(); });
+  initTheme();
+  setView("split");
+  loadAll().catch(function (e) {
+    els.tabs.innerHTML = '<div class="pe-empty">Could not load drafts: ' + escapeHtml(e.message) + "</div>";
+  });
+  connectStream();
+})();

package/server.js CHANGED Viewed

@@ -823,6 +823,14 @@ function isValidSlug(slug) {
   return typeof slug === "string" && CLAUDE_PLAN_SLUG.test(slug);
 }
+// Prompt-draft ids are pd_<8-hex>, written by @tenonhq/dovetail-claude-plans.
+// Re-validated on the read side so a crafted id can't escape the store dir.
+const PROMPT_DRAFT_ID = /^pd_[0-9a-f]{8}$/;
+function isValidDraftId(id) {
+  return typeof id === "string" && PROMPT_DRAFT_ID.test(id);
+}
 function planFilePath(slug) {
   return path.join(CLAUDE_PLANS_DIR, slug + ".json");
 }
@@ -938,6 +946,10 @@ function classifyPath(filePath) {
   if (parts.length === 2 && parts[0] === "_lint-events" && parts[1].endsWith(".json")) {
     return { kind: "lint", id: parts[1].slice(0, -5) };
   }
+  if (parts.length === 2 && parts[0] === "_prompt-drafts" && parts[1].endsWith(".json")) {
+    if (parts[1] === "_active.json") return { kind: "draft-active" };
+    return { kind: "draft", id: parts[1].slice(0, -5) };
+  }
   if (parts.length === 1 && parts[0].endsWith(".json")) {
     return { kind: "plan", slug: parts[0].slice(0, -5) };
   }
@@ -1015,6 +1027,24 @@ function handleWatcherChange(event, filePath) {
     }
     const lint = safeReadJson(filePath);
     if (lint) broadcastClaudePlanEvent("lint:upsert", { lint: lint });
+    return;
+  }
+  if (info.kind === "draft-active") {
+    // The active-tab pointer changed (a draft was made active, or the active
+    // one was deleted and focus advanced). Tell editors which tab is active.
+    const ptr = safeReadJson(filePath);
+    broadcastClaudePlanEvent("draft:active", { active_id: ptr ? ptr.active_id : null });
+    return;
+  }
+  if (info.kind === "draft") {
+    if (event === "unlink") {
+      broadcastClaudePlanEvent("draft:delete", { id: info.id });
+      return;
+    }
+    // Fires when a Claude session writes an enhanced prompt back, or another
+    // editor instance autosaves — the editor merges it into the matching tab.
+    const draft = safeReadJson(filePath);
+    if (draft) broadcastClaudePlanEvent("draft:upsert", { draft: draft });
   }
 }
@@ -1043,6 +1073,12 @@ app.get("/claude-plans", function (req, res) {
   res.sendFile(path.join(__dirname, "public", "claude-plans.html"));
 });
+// Multi-tab HTML prompt editor. Drafts persist to the claude-plans store so a
+// Claude Code session can read the active tab and write an enhanced prompt back.
+app.get("/prompt-editor", claudePlansLimiter, function (req, res) {
+  res.sendFile(path.join(__dirname, "public", "prompt-editor.html"));
+});
 // Legacy path-segment deep links (/claude-plans/:slug) redirect to the
 // query-param form so relative assets resolve against /claude-plans.
 app.get("/claude-plans/:slug", function (req, res) {
@@ -1239,8 +1275,8 @@ function sendTypedError(res, err) {
       message: err.message
     });
   }
-  if (err && /plan not found/.test(err.message || "")) {
-    return res.status(404).json({ error: "plan_not_found", message: err.message });
+  if (err && /not found/i.test(err.message || "")) {
+    return res.status(404).json({ error: "not_found", message: err.message });
   }
   return res.status(500).json({ error: "internal", message: (err && err.message) || String(err) });
 }
@@ -1374,6 +1410,88 @@ app.delete("/api/claude-plans/:slug", claudePlansLimiter, function (req, res) {
   }
 });
+// --- Prompt Editor (multi-tab HTML prompt drafts) ---
+// All writes go through @tenonhq/dovetail-claude-plans' storage layer so the
+// draft/active-pointer rules live in exactly one place. Each write lands a file
+// under <root>/_prompt-drafts/, which the chokidar watcher turns into a
+// draft:upsert / draft:delete / draft:active SSE frame — so the editor (and a
+// Claude session's enhance write) refresh every connected tab automatically.
+// GET /api/prompt-drafts — list all drafts (oldest-first) + the active id.
+app.get("/api/prompt-drafts", claudePlansLimiter, function (req, res) {
+  try {
+    res.json(claudePlansLib.listPromptDraftsWithActive());
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
+// POST /api/prompt-drafts — create a new draft (tab). Body: { title?, content? }
+app.post("/api/prompt-drafts", claudePlansLimiter, express.json(), function (req, res) {
+  try {
+    var body = req.body || {};
+    var draft = claudePlansLib.createPromptDraft({
+      title: body.title,
+      content: body.content,
+      session_id: body.session_id
+    });
+    res.json(draft);
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
+// POST /api/prompt-drafts/active — set the active tab. Body: { id }
+// Declared before "/:id" so Express doesn't treat "active" as an id.
+app.post("/api/prompt-drafts/active", claudePlansLimiter, express.json(), function (req, res) {
+  try {
+    var body = req.body || {};
+    if (!isValidDraftId(body.id)) return res.status(400).json({ error: "invalid draft id" });
+    res.json(claudePlansLib.setActivePromptDraft(body.id));
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
+// GET /api/prompt-drafts/:id — read one draft.
+app.get("/api/prompt-drafts/:id", claudePlansLimiter, function (req, res) {
+  try {
+    var id = req.params.id;
+    if (!isValidDraftId(id)) return res.status(400).json({ error: "invalid draft id" });
+    var draft = claudePlansLib.getPromptDraft(id);
+    if (!draft) return res.status(404).json({ error: "draft not found" });
+    res.json(draft);
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
+// PUT /api/prompt-drafts/:id — autosave title/content. Body: { title?, content? }
+app.put("/api/prompt-drafts/:id", claudePlansLimiter, express.json(), function (req, res) {
+  try {
+    var id = req.params.id;
+    if (!isValidDraftId(id)) return res.status(400).json({ error: "invalid draft id" });
+    var body = req.body || {};
+    if (body.title === undefined && body.content === undefined) {
+      return res.status(400).json({ error: "nothing to update" });
+    }
+    res.json(claudePlansLib.updatePromptDraft({ id: id, title: body.title, content: body.content }));
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
+// DELETE /api/prompt-drafts/:id — close a tab. Returns the new active id.
+app.delete("/api/prompt-drafts/:id", claudePlansLimiter, function (req, res) {
+  try {
+    var id = req.params.id;
+    if (!isValidDraftId(id)) return res.status(400).json({ error: "invalid draft id" });
+    res.json(claudePlansLib.deletePromptDraft(id));
+  } catch (e) {
+    sendTypedError(res, e);
+  }
+});
 // --- TODO Panel ---
 // A drag-to-reorder priority checklist. All writes go through
 // @tenonhq/dovetail-todo's storage layer so the ordering/validation rules