@ai-setting/roy-plugin-task-show 2.4.1 → 2.5.0

package/public/chat-panel.js

@@ -0,0 +1,260 @@
+/**
+ * @fileoverview Home chat panel — client controller.
+ *
+ * v2.5.0+ REQ-2: lives on the index page (top of body). Hooks the
+ * following DOM contract (pinned by `test/home-chat-v25.test.ts`):
+ *
+ *   [data-chat-shell]      <section> wrapper
+ *   [data-chat-messages]   <div>    message log (role="log")
+ *   [data-chat-form]       <form>   submit handler
+ *   [data-chat-input]      <input>  text input
+ *   [data-chat-send]       <button> send button (type="submit")
+ *
+ * sessionId is persisted in `localStorage["taskShow.chat.sessionId"]`
+ * across page loads so the conversation survives reloads. The first
+ * run (no stored id) POSTs `/api/chat/start` to allocate one.
+ *
+ * The server speaks SSE for streaming chunks. We use `fetch` + an
+ * `ReadableStream` reader instead of `EventSource` because the chat
+ * endpoint is POST (EventSource can't POST) and we need to send the
+ * `message` in the request body.
+ *
+ * If the chat feature is disabled server-side (503), the panel hides
+ * itself with a banner instead of throwing.
+ */
+
+(function () {
+  const STORAGE_KEY = "taskShow.chat.sessionId";
+  const SHELL_SEL = "[data-chat-shell]";
+  const MESSAGES_SEL = "[data-chat-messages]";
+  const FORM_SEL = "[data-chat-form]";
+  const INPUT_SEL = "[data-chat-input]";
+  const SEND_SEL = "[data-chat-send]";
+
+  function $(sel) { return document.querySelector(sel); }
+
+  function readSessionId() {
+    try { return window.localStorage.getItem(STORAGE_KEY) || ""; }
+    catch { return ""; }
+  }
+
+  function writeSessionId(id) {
+    try { window.localStorage.setItem(STORAGE_KEY, id); } catch { /* ignore */ }
+  }
+
+  function clearMessages(container) {
+    while (container.firstChild) container.removeChild(container.firstChild);
+  }
+
+  function appendMessage(container, role, text) {
+    const empty = container.querySelector(".chat-empty");
+    if (empty) empty.remove();
+    const el = document.createElement("div");
+    el.className = "chat-message chat-message--" + role;
+    el.dataset.role = role;
+    const label = role === "user" ? "You" : role === "assistant" ? "Assistant" : "Error";
+    el.innerHTML =
+      `<div class="chat-message-meta">${label}</div>` +
+      `<div class="chat-message-text"></div>`;
+    el.querySelector(".chat-message-text").textContent = text;
+    container.appendChild(el);
+    container.scrollTop = container.scrollHeight;
+    return el;
+  }
+
+  /**
+   * Append a streaming chunk to the last assistant message. If no
+   * assistant message exists yet (first chunk of a turn), create one.
+   */
+  function appendChunk(container, text) {
+    let last = container.querySelector(".chat-message--assistant:last-of-type");
+    if (!last) last = appendMessage(container, "assistant", "");
+    const textEl = last.querySelector(".chat-message-text");
+    textEl.textContent += text;
+    container.scrollTop = container.scrollHeight;
+  }
+
+  function setBusy(form, busy) {
+    const input = form.querySelector(INPUT_SEL);
+    const send = form.querySelector(SEND_SEL);
+    if (input) input.disabled = busy;
+    if (send) {
+      send.disabled = busy;
+      send.textContent = busy ? "Sending…" : "Send";
+    }
+  }
+
+  function showDisabledBanner(shell, msg) {
+    const banner = document.createElement("p");
+    banner.className = "chat-banner";
+    banner.dataset.role = "banner";
+    banner.textContent = msg;
+    shell.appendChild(banner);
+    const form = shell.querySelector(FORM_SEL);
+    if (form) form.remove();
+  }
+
+  async function ensureSessionId() {
+    let id = readSessionId();
+    if (id) return id;
+    const res = await fetch("/api/chat/start", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+    });
+    if (!res.ok) throw new Error("chat_start_failed: " + res.status);
+    const j = await res.json();
+    id = j.sessionId;
+    writeSessionId(id);
+    return id;
+  }
+
+  async function sendMessage(form, container, message) {
+    let sessionId;
+    try {
+      sessionId = await ensureSessionId();
+    } catch (e) {
+      appendMessage(container, "error", String(e && e.message || e));
+      return;
+    }
+    appendMessage(container, "user", message);
+    setBusy(form, true);
+
+    let res;
+    try {
+      res = await fetch(`/api/chat/${encodeURIComponent(sessionId)}/message`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "text/event-stream",
+        },
+        body: JSON.stringify({ message }),
+      });
+    } catch (e) {
+      appendMessage(container, "error", "network_error: " + (e && e.message || e));
+      setBusy(form, false);
+      return;
+    }
+
+    if (!res.ok || !res.body) {
+      let detail = "";
+      try { detail = await res.text(); } catch { /* ignore */ }
+      appendMessage(container, "error", `server_error: ${res.status} ${detail.slice(0, 200)}`);
+      setBusy(form, false);
+      return;
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder("utf-8");
+    let buf = "";
+    let sawError = false;
+
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        let nl;
+        while ((nl = buf.indexOf("\n\n")) >= 0) {
+          const frame = buf.slice(0, nl);
+          buf = buf.slice(nl + 2);
+          handleFrame(frame, container, (err) => { sawError = sawError || !!err; });
+        }
+      }
+      // Flush trailing frame if any.
+      if (buf.trim().length > 0) handleFrame(buf, container, () => {});
+    } catch (e) {
+      appendMessage(container, "error", "stream_error: " + (e && e.message || e));
+    } finally {
+      setBusy(form, false);
+      // Suppress the final empty-message that may have been left if the
+      // assistant produced no text. We intentionally leave error messages
+      // alone so the user can see what went wrong.
+      if (!sawError) {
+        const last = container.querySelector(".chat-message--assistant:last-of-type");
+        if (last && !last.querySelector(".chat-message-text").textContent.trim()) {
+          last.remove();
+        }
+      }
+    }
+  }
+
+  /** Parse one SSE frame (event:/data:/id: lines). Returns the parsed frame or null. */
+  function handleFrame(raw, container, onError) {
+    let event = "";
+    let data = "";
+    let id = "";
+    for (const line of raw.split(/\r?\n/)) {
+      if (line.startsWith(":")) continue;
+      if (line.startsWith("event:")) event = line.slice(6).trim();
+      else if (line.startsWith("data:")) data += (data ? "\n" : "") + line.slice(5).trim();
+      else if (line.startsWith("id:")) id = line.slice(3).trim();
+    }
+    if (!event && !data) return null;
+    let parsed = null;
+    if (data) {
+      try { parsed = JSON.parse(data); } catch { parsed = data; }
+    }
+    if (event === "chunk" && parsed && typeof parsed === "object") {
+      if (parsed.type === "text" && typeof parsed.text === "string") {
+        appendChunk(container, parsed.text);
+      } else if (parsed.type === "reasoning" && typeof parsed.text === "string") {
+        // Reasoning is hidden in the chat UI by design; we still log it
+        // so a developer can inspect via DevTools.
+        if (window.console && window.console.debug) {
+          window.console.debug("[chat] reasoning:", parsed.text);
+        }
+      } else if (parsed.type === "start") {
+        // No-op: the assistant bubble is created lazily on first text chunk.
+      } else if (parsed.type === "error" && parsed.error) {
+        onError(parsed);
+        appendMessage(container, "error", parsed.error.message || "unknown error");
+      }
+    } else if (event === "done") {
+      // Terminal marker — nothing to render.
+    } else if (event === "error") {
+      onError(parsed);
+      const msg = parsed && parsed.error && parsed.error.message
+        ? parsed.error.message
+        : "stream error";
+      appendMessage(container, "error", msg);
+    } else if (event === "ready") {
+      // SSE handshake — nothing to render.
+    }
+    return { event, data, id, parsed };
+  }
+
+  function init() {
+    const shell = document.querySelector(SHELL_SEL);
+    if (!shell) return;
+    const form = shell.querySelector(FORM_SEL);
+    const container = shell.querySelector(MESSAGES_SEL);
+    const input = shell.querySelector(INPUT_SEL);
+    if (!form || !container || !input) return;
+
+    // Probe feature availability with a HEAD request. If 503, hide UI.
+    fetch("/api/chat/start", { method: "HEAD" }).then((res) => {
+      if (res.status === 503) {
+        showDisabledBanner(shell, "Chat disabled (server returned 503 — chatOptions not configured).");
+      }
+    }).catch(() => { /* offline — leave UI alone */ });
+
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const message = (input.value || "").trim();
+      if (!message) return;
+      input.value = "";
+      sendMessage(form, container, message);
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  // Expose a tiny test hook so headless harness can drive the panel
+  // without firing real events.
+  window.taskShowChatPanel = { init, sendMessage, STORAGE_KEY };
+})();

package/public/mermaid-renderer.js

@@ -293,10 +293,17 @@
       if (cw === 0 && ch === 0 && sw === 0 && sh === 0) {
         return { tx: safeTx, ty: safeTy };
       }
+      // v2.4.2: bidirectional pan — when the diagram is wider/taller
+      // than the container, allow tx/ty in [-(dim-stage-dim-container),
+      // +(dim-stage-dim-container)] so the user can drag in any
+      // direction and see any part of the diagram. When the diagram
+      // fits, pin to 0 on that axis.
       const minTx = sw > cw ? -(sw - cw) : 0;
+      const maxTx = sw > cw ?  (sw - cw) : 0;
       const minTy = sh > ch ? -(sh - ch) : 0;
-      const nextTx = Math.max(minTx, Math.min(0, safeTx));
-      const nextTy = Math.max(minTy, Math.min(0, safeTy));
+      const maxTy = sh > ch ?  (sh - ch) : 0;
+      const nextTx = Math.max(minTx, Math.min(maxTx, safeTx));
+      const nextTy = Math.max(minTy, Math.min(maxTy, safeTy));
       return { tx: nextTx, ty: nextTy };
     }
 
@@ -477,9 +484,23 @@
       return { tx: clamped.tx, ty: clamped.ty };
     }
 
-    // v2.4.1: pointer-driven drag handlers. We wire them on the
-    // stage (not the container) so they don't interfere with
-    // text selection inside the toolbar.
+    // v2.4.2: pointer-driven drag handlers. The pointerdown
+    // listener is wired on the CONTAINER (not the stage) because
+    // real mermaid SVGs include child elements (mermaid's
+    // `bindFunctions` injects click handlers on `<g>` and
+    // `<path>`) that may call `event.stopPropagation()`. If the
+    // listener lived on the stage, those child handlers would
+    // silently eat the pointerdown and the pan would never start
+    // — but the CSS-driven `cursor: grab` on the stage would
+    // still show, fooling the user into thinking drag was wired
+    // up. Listening on the container (a parent of the stage)
+    // bypasses any stopPropagation that originates inside the
+    // SVG and still lets us reject clicks on the zoom toolbar
+    // (the toolbar is a sibling of the stage, not a descendant).
+    //
+    // pointermove / pointerup / pointercancel still attach to
+    // the stage so `setPointerCapture` keeps the events flowing
+    // to the stage even when the pointer leaves the SVG bounds.
     function attachPanHandlers(container) {
       if (!container || !container.ownerDocument) return;
       // Already wired — don't double-bind.
@@ -492,9 +513,25 @@
       // the current pan offsets so subsequent pointermove events
       // can compute the delta.
       function onPointerDown(ev) {
-        // Only respond to the primary pointer button (left click
-        // or primary touch). Ignore right-click and middle-click.
-        if (ev && typeof ev.button === "number" && ev.button !== 0) return;
+        // Only respond to the primary pointer button. We accept
+        // button === 0 (left click / primary touch) AND
+        // button === -1 (Wacom / iPad Pencil hover events that
+        // report `button: -1` in PointerEvent spec). We reject
+        // button > 0 (right / middle / x1 / x2). The previous
+        // `!== 0` check rejected -1 and broke touch/pen entirely.
+        if (ev && typeof ev.button === "number" && ev.button > 0) return;
+        // Ignore secondary pointers: if a drag is already in
+        // progress (e.g. multi-touch), a second pointerdown
+        // should NOT overwrite the captured drag state. Without
+        // this guard the primary drag's startX/startTx are
+        // silently lost and the next pointermove from the
+        // primary pointer is filtered out by the pointerId
+        // mismatch check.
+        if (dragState.get(container)) return;
+        // The container holds both the stage (pan target) and
+        // the zoom toolbar (which we must NOT pan). Only start
+        // a pan when the pointerdown target is inside the stage.
+        if (ev && ev.target && typeof stage.contains === "function" && !stage.contains(ev.target)) return;
         // Allow the user to drag using touch / pen too.
         const pid = ev && typeof ev.pointerId === "number" ? ev.pointerId : 1;
         const cur = getPan(container);
@@ -509,7 +546,9 @@
         try {
           stage.setPointerCapture && stage.setPointerCapture(pid);
         } catch (_) {
-          // ignore — setPointerCapture can throw in jsdom
+          // ignore — setPointerCapture can throw when the
+          // element is detached, has zero size, or the pointer
+          // is already captured by another element.
         }
         if (ev && typeof ev.preventDefault === "function") {
           try { ev.preventDefault(); } catch (_) { /* ignore */ }
@@ -544,18 +583,28 @@
         }
       }
 
-      // pointermove + pointerup + pointercancel all attach to the
-      // stage itself so the drag survives the pointer leaving
-      // the stage element. setPointerCapture keeps the events
-      // routed to the stage even if the cursor drifts off the
-      // diagram. Attaching to the stage (rather than window)
-      // also keeps the implementation deterministic in test
-      // environments where `window` and `doc.defaultView` can
-      // be distinct objects.
-      stage.addEventListener("pointerdown", onPointerDown);
-      stage.addEventListener("pointermove", onPointerMove);
-      stage.addEventListener("pointerup", endDrag);
-      stage.addEventListener("pointercancel", endDrag);
+      // pointerdown attaches to the CONTAINER in CAPTURE phase
+      // so that any stopPropagation inside the SVG (mermaid's
+      // bindFunctions, custom `<path>` handlers, etc.) cannot
+      // block the pan handler. Capture-phase listeners fire on
+      // the way DOWN to the target, BEFORE the target's bubble
+      // phase handlers run — so even if a `<g>` child calls
+      // `e.stopPropagation()`, our container listener has
+      // already fired. The `stage.contains(target)` check above
+      // still rejects clicks on the toolbar (a sibling of the
+      // stage).
+      container.addEventListener("pointerdown", onPointerDown, true);
+      // v2.4.2: pointermove + pointerup + pointercancel also
+      // attach to the CONTAINER in capture phase for the same
+      // reason. Real mermaid SVGs may call `stopPropagation` on
+      // pointermove (e.g. when binding drag-to-pan on a node),
+      // which would otherwise silently drop every move event
+      // after the drag started. We still call setPointerCapture
+      // on the stage below so the drag survives the pointer
+      // leaving the container entirely.
+      container.addEventListener("pointermove", onPointerMove, true);
+      container.addEventListener("pointerup", endDrag, true);
+      container.addEventListener("pointercancel", endDrag, true);
       // Also attach to document/window as a safety net — some
       // browsers route pointercancel through the document even
       // when capture is set. We swallow duplicates in endDrag.
@@ -565,7 +614,7 @@
       }
       // We need a way to remove these listeners on destroy();
       // stash a teardown closure on the container.
-      container.__panHandlers = { onPointerDown, onPointerMove, endDrag, doc, stage };
+      container.__panHandlers = { onPointerDown, onPointerMove, endDrag, doc, stage, container };
       container.__panHandlersAttached = true;
     }
 
@@ -573,10 +622,16 @@
       if (!container || !container.__panHandlers) return;
       const h = container.__panHandlers;
       try {
-        h.stage && h.stage.removeEventListener && h.stage.removeEventListener("pointerdown", h.onPointerDown);
-        h.stage && h.stage.removeEventListener && h.stage.removeEventListener("pointermove", h.onPointerMove);
-        h.stage && h.stage.removeEventListener && h.stage.removeEventListener("pointerup", h.endDrag);
-        h.stage && h.stage.removeEventListener && h.stage.removeEventListener("pointercancel", h.endDrag);
+        // v2.4.2: pointerdown was moved to the container (capture
+        // phase) so it can survive stopPropagation in SVG
+        // children. pointermove/up/cancel also moved. Mirror
+        // those changes here so destroy() actually unbinds.
+        if (h.container && h.container.removeEventListener) {
+          h.container.removeEventListener("pointerdown", h.onPointerDown, true);
+          h.container.removeEventListener("pointermove", h.onPointerMove, true);
+          h.container.removeEventListener("pointerup", h.endDrag, true);
+          h.container.removeEventListener("pointercancel", h.endDrag, true);
+        }
         if (h.doc && h.doc.removeEventListener) {
           h.doc.removeEventListener("pointerup", h.endDrag);
           h.doc.removeEventListener("pointercancel", h.endDrag);

package/public/style.css

@@ -1987,3 +1987,144 @@ details summary {
   font-size: 11px;
   color: var(--fg-muted, #6b7280);
 }
+
+/* ============================================================
+ * v2.5.0+ REQ-2: home-page chat panel
+ * ============================================================ */
+
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.chat-panel-header h2 {
+  margin: 0 0 4px;
+  font-size: 18px;
+}
+
+.chat-panel-meta {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fg-muted, #6b7280);
+}
+
+.chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 80px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 12px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 8px;
+  background: #fff;
+  font-size: 14px;
+}
+
+.chat-empty {
+  margin: 0;
+  color: var(--fg-muted, #9ca3af);
+  font-style: italic;
+}
+
+.chat-message {
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+}
+
+.chat-message-meta {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin-bottom: 2px;
+}
+
+.chat-message-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.chat-message--user {
+  align-self: flex-end;
+  background: #dbeafe;
+  border-color: #93c5fd;
+  max-width: 80%;
+}
+
+.chat-message--assistant {
+  align-self: flex-start;
+  background: #f3f4f6;
+  border-color: #d1d5db;
+  max-width: 80%;
+}
+
+.chat-message--error {
+  align-self: stretch;
+  background: #fee2e2;
+  border-color: #fca5a5;
+  color: #991b1b;
+}
+
+.chat-form {
+  display: flex;
+  gap: 8px;
+}
+
+.chat-input {
+  flex: 1 1 auto;
+  padding: 8px 10px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.chat-input:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: -1px;
+  border-color: #3b82f6;
+}
+
+.chat-send {
+  padding: 8px 16px;
+  background: #2563eb;
+  color: #fff;
+  border: 1px solid #1d4ed8;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.chat-send:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.chat-send:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chat-banner {
+  padding: 8px 12px;
+  margin: 0;
+  background: #fef3c7;
+  border: 1px solid #fcd34d;
+  border-radius: 6px;
+  color: #78350f;
+  font-size: 13px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}