@ai-setting/roy-plugin-task-show 1.2.0 → 2.0.1

package/public/file-tree.js

@@ -0,0 +1,210 @@
+/* v2.0.0: file-tree sidebar hydrator.
+ *
+ * Loads the project file list from the data-files JSON attribute on the
+ * SSR-rendered `<ul id="file-tree">` and wires up:
+ *   - chevron toggle (▶ / ▼) for directories
+ *   - "expand all / collapse all" controls
+ *   - click-to-highlight a file node (calls window.setActiveToolCallFile)
+ *   - scrolling a node into view when window.__toolClick is fired
+ *
+ * Designed to be loaded AFTER app.js (so it can hook __toolClick) but
+ * BEFORE tool-call-detail.js (so that hydrator can call our
+ * setActiveToolCallFile when a Mermaid node is clicked).
+ *
+ * No dependencies — pure vanilla JS, no module loader, no JSX.
+ */
+
+(function attachFileTreeHydrator() {
+  const SIDEBAR_SELECTOR = "#file-tree";
+
+  // -----------------------------------------------------------------------
+  // State
+  // -----------------------------------------------------------------------
+  /** @type {HTMLElement|null} */
+  let root = null;
+  /** @type {Set<string>} */
+  let affectedSet = new Set();
+  /** @type {string|null} */
+  let activePath = null;
+
+  // -----------------------------------------------------------------------
+  // Helpers
+  // -----------------------------------------------------------------------
+
+  /**
+   * Toggle visibility of a directory's children.
+   * @param {HTMLElement} li
+   */
+  function toggleDir(li) {
+    const isOpen = li.getAttribute("aria-expanded") === "true";
+    const next = !isOpen;
+    li.setAttribute("aria-expanded", String(next));
+    const chev = li.querySelector(".file-tree-chevron");
+    if (chev) chev.textContent = next ? "▼" : "▶";
+    // Update descendant visibility by toggling the `data-collapsed` flag on
+    // every sibling immediately under this directory.
+    const depth = Number(li.getAttribute("data-depth") || "0");
+    let sibling = li.nextElementSibling;
+    while (sibling) {
+      const sDepth = Number(sibling.getAttribute("data-depth") || "0");
+      if (sDepth <= depth) break;
+      if (!next) {
+        sibling.setAttribute("data-collapsed", "true");
+      } else {
+        sibling.removeAttribute("data-collapsed");
+      }
+      sibling = sibling.nextElementSibling;
+    }
+  }
+
+  /**
+   * Set the active (highlighted) file path. Called by the tool-call
+   * detail hydrator when the user clicks a Mermaid tool node.
+   * @param {string|null} path
+   */
+  function setActive(path) {
+    if (!root) return;
+    if (activePath) {
+      const prev = root.querySelector(`[data-path="${cssEscape(activePath)}"]`);
+      if (prev) prev.classList.remove("is-active");
+    }
+    activePath = path;
+    if (path) {
+      const next = root.querySelector(`[data-path="${cssEscape(path)}"]`);
+      if (next) {
+        next.classList.add("is-active");
+        // Expand parent directories so the active node is visible.
+        expandAncestors(next);
+        // Scroll into view (block: 'center') — but only if it's not
+        // already on-screen so we don't fight the user mid-scroll.
+        try {
+          next.scrollIntoView({ behavior: "smooth", block: "center" });
+        } catch {
+          try {
+            next.scrollIntoView();
+          } catch (_) {
+            /* noop */
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Walk up the DOM expanding every ancestor directory so the given
+   * node becomes visible. Cheap because the tree is at most ~10 levels
+   * deep in practice.
+   * @param {HTMLElement} leaf
+   */
+  function expandAncestors(leaf) {
+    let cur = leaf.previousElementSibling;
+    let targetDepth = Number(leaf.getAttribute("data-depth") || "0");
+    while (cur) {
+      const d = Number(cur.getAttribute("data-depth") || "0");
+      if (d < targetDepth) {
+        if (cur.getAttribute("aria-expanded") === "false") {
+          toggleDir(cur);
+        }
+        targetDepth = d; // keep walking
+      }
+      cur = cur.previousElementSibling;
+    }
+  }
+
+  /**
+   * CSS.escape polyfill — older browsers / jsdom may lack it.
+   * @param {string} s
+   */
+  function cssEscape(s) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+      return CSS.escape(s);
+    }
+    return String(s).replace(/([^a-zA-Z0-9_-])/g, "\\$1");
+  }
+
+  // -----------------------------------------------------------------------
+  // Wiring
+  // -----------------------------------------------------------------------
+
+  /**
+   * Build the affected set from `[data-affected="true"]` nodes the SSR
+   * already flagged. Re-runs on each hydration so SSE-inserted nodes
+   * stay highlighted.
+   */
+  function rebuildAffectedSet() {
+    if (!root) return;
+    affectedSet = new Set();
+    root.querySelectorAll('[data-affected="true"]').forEach((el) => {
+      const p = el.getAttribute("data-path");
+      if (p) affectedSet.add(p);
+    });
+  }
+
+  /**
+   * Initial hydration: bind click handlers + collect the affected set.
+   * Idempotent — safe to call multiple times.
+   */
+  function hydrate() {
+    root = document.querySelector(SIDEBAR_SELECTOR);
+    if (!root) return;
+    rebuildAffectedSet();
+    root.addEventListener("click", (ev) => {
+      const target = ev.target;
+      // jsdom's eval'd scripts don't have `Element` in scope; use a
+      // duck-type check instead of `instanceof Element`.
+      if (!target || typeof target.getAttribute !== "function") return;
+      const li = target.closest && target.closest(".file-tree-node");
+      if (!li || typeof li.getAttribute !== "function") return;
+      const path = li.getAttribute("data-path") || null;
+      const type = li.getAttribute("data-type");
+      if (type === "directory") {
+        toggleDir(li);
+        // Suppress the subsequent active-path switch — directories
+        // aren't files, just containers.
+        return;
+      }
+      if (path) setActive(path);
+    });
+    // Auto-hydrate on DOMContentLoaded if the DOM is already ready.
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", hydrate, { once: true });
+    }
+  }
+  hydrate();
+
+  /**
+   * Expand every directory in the tree (used by the "expand all" button).
+   */
+  function expandAll() {
+    if (!root) return;
+    root.querySelectorAll('.file-tree-node[data-type="directory"]').forEach((li) => {
+      if (li.getAttribute("aria-expanded") === "false") toggleDir(li);
+    });
+  }
+
+  /**
+   * Collapse every directory (used by "collapse all").
+   */
+  function collapseAll() {
+    if (!root) return;
+    root.querySelectorAll('.file-tree-node[data-type="directory"]').forEach((li) => {
+      if (li.getAttribute("aria-expanded") === "true") toggleDir(li);
+    });
+  }
+
+  // Expose a tiny global API so other scripts (app.js, tool-call-detail.js)
+  // can drive the sidebar.
+  /** @type {any} */
+  const w = window;
+  w.__fileTree = {
+    setActive,
+    expandAll,
+    collapseAll,
+    /** Refresh affected-set from the current DOM (called by SSE handlers). */
+    refreshAffected: rebuildAffectedSet,
+    /** Return the currently-highlighted file path, or null. */
+    getActive() {
+      return activePath;
+    },
+  };
+})();

package/public/style.css

@@ -1154,3 +1154,505 @@ details summary {
     margin-bottom: 8px;
   }
 }
+
+/* ============================================================================
+ * v2.0.0: Monaco Editor + File Tree + Diff + Mermaid jump
+ *
+ * Sections (search for the header to navigate):
+ *   - .task-v2-layout        — sidebar + main grid
+ *   - .file-tree-panel       — left sidebar
+ *   - .file-tree             — collapsible nested list
+ *   - .file-tree-node        — individual rows
+ *   - .file-tree-chevron     — directory expand/collapse
+ *   - .tool-call-detail      — right-hand detail panel
+ *   - .monaco-editor         — Monaco container
+ *   - .diff-body / .diff-line — LCS diff rendering
+ *   - .v2-hint               — small inline hints
+ * ========================================================================== */
+
+/* ---------- v2.0.0 layout (sidebar + main) ---------- */
+.task-v2-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+  gap: 16px;
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 0 16px;
+}
+.task-v2-layout > .task-v2-main {
+  min-width: 0; /* allow grid item to shrink */
+}
+.file-tree-panel {
+  position: sticky;
+  top: 12px;
+  align-self: start;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--bg-panel, #fafafa);
+}
+.file-tree-panel h2 {
+  font-size: 14px;
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.file-tree-summary {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin: 0 0 8px;
+}
+@media (max-width: 900px) {
+  .task-v2-layout {
+    grid-template-columns: 1fr;
+  }
+  .file-tree-panel {
+    position: static;
+    max-height: none;
+  }
+}
+
+/* ---------- file tree sidebar ---------- */
+.file-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 4px 1px calc(4px + var(--depth, 0) * 12px);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+.file-tree-node[data-collapsed="true"] {
+  display: none;
+}
+.file-tree-node:hover {
+  background: rgba(99, 102, 241, 0.08);
+}
+.file-tree-node.is-active {
+  background: rgba(99, 102, 241, 0.18);
+  outline: 1px solid rgba(99, 102, 241, 0.45);
+  font-weight: 600;
+}
+.file-tree-node.is-affected .file-tree-name::after {
+  content: " ●";
+  color: rgba(220, 38, 38, 0.8);
+  font-size: 10px;
+}
+.file-tree-chevron {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  font-size: 9px;
+  color: var(--fg-muted, #6b7280);
+  flex: 0 0 12px;
+}
+.file-tree-spacer {
+  display: inline-block;
+  width: 12px;
+  flex: 0 0 12px;
+}
+.file-tree-name {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-tree-empty {
+  list-style: none;
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 4px;
+}
+
+/* ---------- tool-call detail panel ---------- */
+.tool-call-detail-panel {
+  border-left: 4px solid rgba(99, 102, 241, 0.55);
+  padding-left: 14px;
+  margin-top: 18px;
+}
+.tool-call-detail-panel .v2-hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fg-muted, #6b7280);
+  margin-left: 8px;
+}
+.tool-call-detail {
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-top: 8px;
+  background: #ffffff;
+}
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+.tool-call-header .tool-name code {
+  background: rgba(99, 102, 241, 0.08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.tool-call-header .tool-path {
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+}
+.tool-call-detail-empty {
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* ---------- Monaco container ---------- */
+.monaco-editor {
+  width: 100%;
+  height: 280px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  margin: 6px 0 0;
+  position: relative;
+  background: #fafafa;
+  overflow: hidden;
+}
+.monaco-editor .monaco-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+}
+.monaco-editor .monaco-error {
+  color: rgba(220, 38, 38, 0.9);
+  background: rgba(254, 226, 226, 0.5);
+}
+.monaco-editor .monaco-truncation-note {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  font-size: 10px;
+  color: var(--fg-muted, #6b7280);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+/* ---------- LCS diff body ---------- */
+.diff-body {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 4px;
+  background: #fafafa;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  max-height: 320px;
+  overflow: auto;
+}
+.diff-line {
+  display: flex;
+  gap: 8px;
+  padding: 0 4px;
+  white-space: pre;
+}
+.diff-line .diff-gutter {
+  flex: 0 0 14px;
+  text-align: center;
+  font-weight: 600;
+}
+.diff-line.diff-line-added {
+  background: rgba(220, 252, 231, 0.6);
+}
+.diff-line.diff-line-added .diff-gutter {
+  color: #15803d;
+}
+.diff-line.diff-line-removed {
+  background: rgba(254, 226, 226, 0.6);
+}
+.diff-line.diff-line-removed .diff-gutter {
+  color: #b91c1c;
+}
+.diff-line.diff-line-context .diff-gutter {
+  color: var(--fg-muted, #9ca3af);
+}
+.diff-line .diff-text {
+  flex: 1 1 auto;
+  white-space: pre;
+}
+
+/* ---------- v2 small inline hint ---------- */
+.v2-hint {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+}
+
+/* ============================================================================
+ * v2.0.0: Monaco Editor + File Tree + Diff + Mermaid jump
+ *
+ * Sections (search for the header to navigate):
+ *   - .task-v2-layout        — sidebar + main grid
+ *   - .file-tree-panel       — left sidebar
+ *   - .file-tree             — collapsible nested list
+ *   - .file-tree-node        — individual rows
+ *   - .file-tree-chevron     — directory expand/collapse
+ *   - .tool-call-detail      — right-hand detail panel
+ *   - .monaco-editor         — Monaco container
+ *   - .diff-body / .diff-line — LCS diff rendering
+ *   - .v2-hint               — small inline hints
+ * ========================================================================== */
+
+/* ---------- v2.0.0 layout (sidebar + main) ---------- */
+.task-v2-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+  gap: 16px;
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 0 16px;
+}
+.task-v2-layout > .task-v2-main {
+  min-width: 0; /* allow grid item to shrink */
+}
+.file-tree-panel {
+  position: sticky;
+  top: 12px;
+  align-self: start;
+  max-height: calc(100vh - 24px);
+  overflow: auto;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--bg-panel, #fafafa);
+}
+.file-tree-panel h2 {
+  font-size: 14px;
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.file-tree-summary {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+  margin: 0 0 8px;
+}
+@media (max-width: 900px) {
+  .task-v2-layout {
+    grid-template-columns: 1fr;
+  }
+  .file-tree-panel {
+    position: static;
+    max-height: none;
+  }
+}
+
+/* ---------- file tree sidebar ---------- */
+.file-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 4px 1px calc(4px + var(--depth, 0) * 12px);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+.file-tree-node[data-collapsed="true"] {
+  display: none;
+}
+.file-tree-node:hover {
+  background: rgba(99, 102, 241, 0.08);
+}
+.file-tree-node.is-active {
+  background: rgba(99, 102, 241, 0.18);
+  outline: 1px solid rgba(99, 102, 241, 0.45);
+  font-weight: 600;
+}
+.file-tree-node.is-affected .file-tree-name::after {
+  content: " ●";
+  color: rgba(220, 38, 38, 0.8);
+  font-size: 10px;
+}
+.file-tree-chevron {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  font-size: 9px;
+  color: var(--fg-muted, #6b7280);
+  flex: 0 0 12px;
+}
+.file-tree-spacer {
+  display: inline-block;
+  width: 12px;
+  flex: 0 0 12px;
+}
+.file-tree-name {
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-tree-empty {
+  list-style: none;
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 4px;
+}
+
+/* ---------- tool-call detail panel ---------- */
+.tool-call-detail-panel {
+  border-left: 4px solid rgba(99, 102, 241, 0.55);
+  padding-left: 14px;
+  margin-top: 18px;
+}
+.tool-call-detail-panel .v2-hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fg-muted, #6b7280);
+  margin-left: 8px;
+}
+.tool-call-detail {
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-top: 8px;
+  background: #ffffff;
+}
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+.tool-call-header .tool-name code {
+  background: rgba(99, 102, 241, 0.08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.tool-call-header .tool-path {
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+}
+.tool-call-detail-empty {
+  color: var(--fg-muted, #6b7280);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* ---------- Monaco container ---------- */
+.monaco-editor {
+  width: 100%;
+  height: 280px;
+  border: 1px solid var(--border, #d1d5db);
+  border-radius: 4px;
+  margin: 6px 0 0;
+  position: relative;
+  background: #fafafa;
+  overflow: hidden;
+}
+.monaco-editor .monaco-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fg-muted, #6b7280);
+  font-family: ui-monospace, Menlo, monospace;
+  font-size: 12px;
+}
+.monaco-editor .monaco-error {
+  color: rgba(220, 38, 38, 0.9);
+  background: rgba(254, 226, 226, 0.5);
+}
+.monaco-editor .monaco-truncation-note {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  font-size: 10px;
+  color: var(--fg-muted, #6b7280);
+  background: rgba(255, 255, 255, 0.85);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+
+/* ---------- LCS diff body ---------- */
+.diff-body {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 4px;
+  background: #fafafa;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  max-height: 320px;
+  overflow: auto;
+}
+.diff-line {
+  display: flex;
+  gap: 8px;
+  padding: 0 4px;
+  white-space: pre;
+}
+.diff-line .diff-gutter {
+  flex: 0 0 14px;
+  text-align: center;
+  font-weight: 600;
+}
+.diff-line.diff-line-added {
+  background: rgba(220, 252, 231, 0.6);
+}
+.diff-line.diff-line-added .diff-gutter {
+  color: #15803d;
+}
+.diff-line.diff-line-removed {
+  background: rgba(254, 226, 226, 0.6);
+}
+.diff-line.diff-line-removed .diff-gutter {
+  color: #b91c1c;
+}
+.diff-line.diff-line-context .diff-gutter {
+  color: var(--fg-muted, #9ca3af);
+}
+.diff-line .diff-text {
+  flex: 1 1 auto;
+  white-space: pre;
+}
+
+/* ---------- v2 small inline hint ---------- */
+.v2-hint {
+  font-size: 11px;
+  color: var(--fg-muted, #6b7280);
+}