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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "roy-agent plugin: visualize task solving process via tool call flow on a local web service",
   "type": "module",
   "main": "dist/index.js",

package/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-setting/roy-plugin-task-show",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "type": "tool-plugin",
   "description": "v2.4.1: Mermaid zoom now supports click-and-drag pan (Task #2785). After zooming in, users can drag the diagram to view the surrounding canvas area. Implementation: per-container panState/dragState WeakMap (no global state leak); applyTransform(translate+scale) single-source-of-truth for the CSS transform; attachPanHandlers on pointerdown/move/up/cancel with setPointerCapture for off-element drags; pointer cursor switches to grab/grabbing with touch-action: none to prevent native scrolling; reset/zoomReset now also resets pan to (0,0). 14/14 new mermaid-pan tests pass, full suite 558/564 with 6 pre-existing failures unrelated to this commit. v2.4.0: Combines v2.3.0 Combines v2.3.0 (worktree-aware file-tree + unbounded Mermaid zoom, Task #2773) with the v2.3.0 mermaid placeholder expansion (Task #2771). Sidebar + endpoint scope git ls-files to session.context.worktree (fallback process.cwd()); Mermaid zoom-in is no longer capped at 3.0×; .mermaid placeholder is now min-height: 2400px and .mermaid-zoom-stage is min-width: 6400px / min-height: 2400px (5× base, via --mermaid-placeholder-multiplier CSS custom property) so dense diagrams get enough canvas to pan/zoom comfortably. v2.3.0: Worktree-aware file tree sidebar + unbounded Mermaid zoom-in. The file-tree sidebar (and /api/task/:id/file-tree endpoint) now scope git ls-files to session.context.worktree when the host (task:before.create / task:after.create payload) supplies a worktree path, so the sidebar shows the files the agent is actually editing instead of the plugin process cwd. New resolveWorktreePath helper in src/file-tree.ts returns session.context.worktree (trimmed, with empty/non-string guard) or falls back to process.cwd() for backward compatibility with pre-v2.3.0 hosts. TypeScript: TaskSession gains an optional context?: { worktree?: string } field. TaskShowServer exposes getCollector() so tests can seed sessions with context.worktree set. The Mermaid zoom toolbar (introduced in v2.0.8) no longer caps zoom-in at 3.0× — the ZOOM_MAX constant is REMOVED and clampZoom only enforces ZOOM_MIN=0.25, so dense diagrams remain readable on high-DPI monitors when the user wants to zoom way in. ZOOM_MIN stays in place so zoom-out still bottoms out before rendering a black screen. New tests: test/file-tree-worktree.test.ts (10 cases — resolveWorktreePath edges, SSR scope, endpoint scope, fallback), test/mermaid-zoom-unlimited.test.ts (8 cases — source guard, behaviour at 6×/10×/50×, lower-bound preserved), test/mermaid-placeholder-size.test.ts (7 cases — min-height/min-width 5× checks, transform-origin preserved, --mermaid-placeholder-multiplier hint). v2.3.0: Major visual overhaul of the per-task detail page — VS Code-style tool-call browser powered by Monaco Editor + LCS-based diff + project file tree with mermaid-driven navigation. The detail page now renders a 2-column layout: a sticky left sidebar with the project's git-tracked file tree (chevron-toggle directories, `is-affected` highlight for files touched by the current task), and a main column with the existing Mermaid + stats + toolcalls table + a new dedicated `<section id=\"tool-call-detail-panel\">` that hosts the LCS diff body + Monaco container for the currently-selected tool call. The legacy inline `<details class=\"diff-panel\">` (naive split-and-filter, prone to mis-tagging context lines) is replaced by `<ol class=\"diff-body\">` with proper added/removed/context markers driven by a real LCS dynamic-programming table (`computeDiff()` in `src/tool-call-detail.ts`). Tool calls with a file path get a Monaco Editor placeholder (`<div class=\"monaco-editor\" data-file-path=\"...\" data-language=\"...\">`) which the client-side `public/tool-call-detail.js` lazy-loads from `cdn.jsdelivr.net/npm/monaco-editor@0.45.0` the first time the user clicks a tool row. The Mermaid `__toolClick(toolId)` callback now drives THREE things: (a) the existing row scroll + highlight (preserved from v1.x), (b) the dedicated detail panel re-renders with the matching call, (c) the file-tree sidebar highlights the corresponding file (when `data-file-path` is present). New `GET /api/task/:id/file-tree` endpoint serves the git-tracked file list (`{ files: string[] }`) with a 30-second in-memory TTL + 8-entry FIFO bound. New modules: `src/file-tree.ts` (pure data layer: `buildFileTree / extractAffectedPaths / findNodeByPath / collectAllPaths / gitLsFiles / parseLsFiles`), `src/tool-call-detail.ts` (SSR + LCS diff + HTML escaping), `public/file-tree.js` (vanilla JS hydrator with chevron toggle + keyboard navigation + scrollIntoView), `public/tool-call-detail.js` (Monaco AMD loader + `__toolClick` wrapper + file-content fetch). New tests: `test/file-tree.test.ts` (21 cases — empty/single/nested/dedup/sort/depth/parseLsFiles/gitLsFiles), `test/tool-call-detail.test.ts` (22 cases — LCS diff edges, HTML escape, path aliases, summary stats), `test/tool-call-detail-server-integration.test.ts` (7 cases — SSR HTML contracts + endpoint), `test/tool-call-detail-jsdom.test.ts` (7 cases — client-side hydrators). v1.2.0: CSS context & packaged release hotfix. The plugin's public assets (notably `public/style.css`) and runtime adapters now correctly resolve relative to the installed package directory even when consumed via the published npm tarball. The session-scoped `TaskSessionStore` now preserves the full host session context (parent-child task links, plugin-handle id, env scope) across render cycles — previously the session was collapsed to its `sessionId` on first load and never refreshed, so the home page lost the 「session ancestors」 chain and external tasks from outside the current session silently disappeared from the tree. Adds `src/task-metadata.ts` as the single source of truth for the public `Task` shape exposed by `/api/tasks` + `/api/tasks/:id`, including the v1.0.0+ `processDescription` field, and re-exports it through the CLI adapters (`cli-tasks-adapter.ts` + `cli-tasks-tree-adapter.ts`) so the home page tree + the per-task page render against the same metadata contract. Bundles 244-line regression test (`test/context-and-packed-release.test.ts`) that boots the plugin from the **npm-pack** directory (not the repo working tree), spawns `roy-agent tasks get <id> --json`, and asserts (a) `public/style.css` is present and ≥ 64 lines, (b) the `/api/events` SSE endpoint survives a reload, and (c) `task.session` survives a render cycle. v1.1.0: Full Server-Sent Events realtime subscription across 3 event classes (task.created / operation.updated / tool.called) on both the home page and the per-task /task/<id> page. The per-task pipeline now subscribes to /api/events and patches the DOM in place on operation.updated — no more 5s-poll delay before the user sees a new milestone. The 'Task lifecycle pipeline' header badge is replaced by a 5-state SSE-aware badge (stale / connecting / live / reconnecting / error) so the user can tell at a glance whether real-time updates are flowing, the connection dropped, or 3+ consecutive errors triggered the polling fallback. Legacy boolean `stale` cache-TTL pill and `tool.recorded` event name are preserved for back-compat with v0.9.x / v1.0.0 clients. v1.0.0: First stable release. Replaces the v0.9.x fixture-based verify scripts (which built fake TaskOperationsEnvelope and never invoked the real `roy-agent` CLI, masking regressions in the public-schema `processDescription` field) with a real-CLI scenario test + verify (`test/process-description-real-scenario.test.ts` + `scripts/verify-v100-real-scenario.ts`) that spawns `roy-agent tasks get <id> --operations --json` via `defaultRunner` and asserts the API response carries `processDescription` end-to-end. The 0.9.9 processDescription fix is preserved verbatim — this release only swaps the verify surface. Visualize the tool call chain of a task on a local web service with real-time SSE updates. v0.9.9: Task lifecycle pipeline on /task/<id> now exposes BOTH the milestone badge AND the 「过程描述」 column at a glance — the server-side `/api/tasks/:id/operations` endpoint exposes `processDescription` on every operation (no longer stripped from the public schema), the client-side `renderPipelineHtml` mirrors the server's `.op-desc-block` + `.op-proc-block` block layout so SSR ↔ CSR stay in sync, and a long-standing CSS right-side text-truncation bug in the pipeline timeline (long CJK titles overflowing the panel edge) is fixed via `min-width: 0` on `.op-row1` + `overflow-wrap: anywhere` on `.op-title`. v0.9.0: Session-scoped home page (only show tasks created after plugin load + their external ancestors), with per-row 「显示全部栏位」 toggle and lazy-loaded operations timeline; per-task Mermaid labels now correctly render CJK / mixed-Latin / emoji text (encoded as \\uXXXX before emission, decoded by the browser); detail page layout reordered to lifecycle → pipeline → stats → toolcalls → rawjson. v0.5.0+: page refreshes stream over GET /api/events (Server-Sent Events). Subscribes to tool:before.execute, tool:after.execute, task:before.create, task:after.create, task:after.complete (preferred, 2026-07-10+), and task:after.update (legacy fallback). v0.6.11: Mermaid re-rendering is delegated to a self-contained controller (public/mermaid-renderer.js) that prevents the SVG→raw-source regression on async updates and surfaces recoverable .mermaid-error states. v0.6.12: Task lifecycle pipeline (operations timeline) server now emits data-task-id on the pipeline section; client preserves it on swap, so the page actually fetches /api/tasks/<id>/operations and renders the 7-op timeline (previously silently bailed). v0.7.0: Home page redesigned as a hierarchical task tree (driven by `roy-agent tasks tree --json`); new /api/tasks/tree endpoint with status / priority / type / root-id filters, expand/collapse UI, search, and live 30s polling. v0.8.0: per-task page Mermaid area now renders the hierarchical 'Task lifecycle + tools' view — each operation record owns a subgraph that nests its tool calls, with click callbacks (`window.__toolClick`) that scroll-into-view + highlight + auto-expand the matching row in the tool-call table below. Operation record descriptions (`description` + `processDescription`) are now always rendered inline (no `<details>` collapse) so the user sees the lifecycle state at a glance; a fallback `<details>` kicks in only for descriptions longer than 600 chars. v0.8.1: hotfix for two pre-existing bugs in v0.8.0 (browser smoke test surfaced after merge). (a) Mermaid click directives were emitted as `click t1 __toolClick(1)` (missing `call` keyword) — Mermaid 10's parser rejects this with `got 'PS'`. Fixed to `click t1 call __toolClick(1)` (the v10 grammar requires `call` to invoke a callback with arguments). (b) `buildMermaidSource` lived inside the `attachTaskPageTimeline` IIFE but was also called from a listener in the `attachToolClickBridge` IIFE — sibling IIFEs cannot see each other's locals, so the listener threw `ReferenceError: buildMermaidSource is not defined` and the Mermaid diagram silently failed to re-render after `task-show:lifecycle-ops-loaded`. Fixed by hoisting the function (and its three helpers) to script top-level so both IIFEs can see it via the script-wide closure; the function is also exposed on `window.buildMermaidSource` for tests + tooling. v0.8.3: tree-display fix (Task #2426). The home page used to look like a flat list of root tasks because `autoExpandFirstLevels(..., 2)` only opened the first 2 levels — 30/47 roots were leaf nodes and the remaining 17 collapsed to one level so grandchildren were never visible. Default expand depth is now 3 (root + child + grandchild + great-grandchild are visible on first paint), the summary line now shows per-depth count pills (root / child / grandchild / great-grandchild / level-N), each `tree-row` carries a `data-depth` attribute so CSS can paint coloured left rails per level, and the duplicated 'Live tool-call sessions (legacy view)' panel that made the page look like both a flat table AND a tree is now hidden behind `#legacy-sessions[hidden]` (kept for future debug-toggle restoration). v0.8.10: bug-fix release (Task #2537 + Task #2534). (a) Heap-bounded plugin caches: OperationsCache and TasksTreeCache now enforce a hard maxEntries cap (default 256 / 64). Oldest stale entries are evicted before inserting a new one, so long-lived roy-agent sessions (BackgroundTaskManager + MemorySessionStore) no longer leak Map entries through the plugin's per-task caches — see Task #2537 for the heap-unbounded-state RED→GREEN repro. (b) Mermaid CJK font-family: server.ts renderTaskPage now configures mermaid.initialize({ themeVariables: { fontFamily: '\"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", \"Source Han Sans CN\", \"WenQuanYi Micro Hei\", sans-serif' } }) so Chinese node labels render correctly in browsers that have at least one of those fonts installed (see Task #2534).",
   "main": "dist/index.js",

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);