@ai-setting/roy-plugin-task-show 0.6.12 → 0.8.5

package/dist/task-detail-mermaid.js

@@ -0,0 +1,697 @@
+/**
+ * @fileoverview Mermaid "task lifecycle + tool calls" diagram generator.
+ *
+ * v0.8.0: replaces the per-task page's old "Execution flow (Mermaid)"
+ * section (which only listed tool calls in a flat sequence) with a
+ * two-level view that nests each tool call under the operation record
+ * that produced it. The structure is:
+ *
+ *   Start([Task #X start]) --> opN subgraph  --> End([Task #X end])
+ *                                │
+ *                                ├── tool_1["🔧 edit_file / adapter.ts"]
+ *                                └── tool_2["🔧 bash / ls -la"]
+ *
+ * Each tool node has a `click tool_1 callback` directive so the browser
+ * navigates to the tool table row when the user clicks the node. The
+ * callback is `window.__toolClick(toolId)` — see `public/app.js` and
+ * `public/mermaid-renderer.js` for the implementation.
+ *
+ * v0.8.2 (fix/mermaid-readable-labels): replaces the raw
+ * `<seq>. <title>` operation-subgraph labels (which leaked technical
+ * details such as `plan_doc: docs/.../plan.md - 485 - worktree: HEAD
+ * a487b25f from main`) with a concise, human-readable label derived
+ * from a `PHASE_LABELS` metadata map. The map is keyed by a canonical
+ * phase id (`init-task`, `setup-worktree`, `plan`, `tdd-implement`,
+ * `code-review`, `cli-e2e-test`, `final-verify`, `merge-to-main`,
+ * `summary-report`, `task-complete`) and each entry has an emoji, a
+ * friendly name, and a short description. `getPhaseLabel(op)` parses
+ * the operation title for a `Phase N: <name>` pattern, looks up the
+ * matching phaseId via `PHASE_ALIASES`, and returns
+ * `<emoji> Phase N: <friendly-name><br/><description>`. Unknown
+ * titles fall back to a sanitized version (technical fields stripped
+ * at the first ` - <field>:` marker). The same logic is mirrored in
+ * `public/app.js` so the client-side re-render stays in sync.
+ *
+ * This module is a pure function. No DOM access. No I/O. Easy to unit
+ * test and to compose with other renderers.
+ */
+export const PHASE_LABELS = {
+    "init-task": {
+        emoji: "📋",
+        name: "任务管理",
+        description: "task_search + task_create",
+    },
+    "setup-worktree": {
+        emoji: "🌿",
+        name: "Worktree 隔离",
+        description: "git worktree add",
+    },
+    "plan": {
+        emoji: "📝",
+        name: "Plan",
+        description: "brainstorming + writing-plans",
+    },
+    "tdd-implement": {
+        emoji: "🧪",
+        name: "TDD 循环",
+        description: "RED → GREEN → REFACTOR",
+    },
+    "code-review": {
+        emoji: "🔍",
+        name: "Code Review",
+        description: "BLOCKING/IMPORTANT/MINOR/NIT",
+    },
+    "cli-e2e-test": {
+        emoji: "⚙️",
+        name: "CLI E2E",
+        description: "build + test + cli smoke",
+    },
+    "final-verify": {
+        emoji: "✅",
+        name: "最终验证",
+        description: "8 项 checklist",
+    },
+    "merge-to-main": {
+        emoji: "🔀",
+        name: "Merge",
+        description: "auto_merge 铁律",
+    },
+    "summary-report": {
+        emoji: "📊",
+        name: "总结报告",
+        description: "reports/ summary",
+    },
+    "task-complete": {
+        emoji: "🏁",
+        name: "任务闭环",
+        description: "task_complete",
+    },
+};
+/**
+ * Aliases that map the various spellings the workflow uses in
+ * `milestoneTitle` to a canonical phaseId. The lookup is performed
+ * case-insensitively, with whitespace + punctuation normalised, so
+ * "Plan" / "plan" / "(Plan)" / "Plan — ..." all resolve the same way.
+ * Extend this map (rather than special-casing in `getPhaseLabel`) when
+ * the workflow grows new phase aliases.
+ */
+export const PHASE_ALIASES = {
+    // init-task
+    "init-task": "init-task",
+    "init_task": "init-task",
+    "inittask": "init-task",
+    "任务管理": "init-task",
+    "任务创建": "init-task",
+    "task create": "init-task",
+    "task-create": "init-task",
+    "create task": "init-task",
+    // setup-worktree
+    "setup-worktree": "setup-worktree",
+    "setup_worktree": "setup-worktree",
+    "setupworktree": "setup-worktree",
+    "worktree": "setup-worktree",
+    "worktree 隔离": "setup-worktree",
+    "worktree隔离": "setup-worktree",
+    "worktree isolation": "setup-worktree",
+    // plan
+    "plan": "plan",
+    "planning": "plan",
+    "计划": "plan",
+    "设计与计划": "plan",
+    "plan/design": "plan",
+    "plan doc": "plan",
+    "planner": "plan",
+    // tdd-implement
+    "tdd": "tdd-implement",
+    "tdd-implement": "tdd-implement",
+    "tdd_implement": "tdd-implement",
+    "tddimplement": "tdd-implement",
+    "tdd 循环": "tdd-implement",
+    "tdd cycle": "tdd-implement",
+    "red → green → refactor": "tdd-implement",
+    "red green refactor": "tdd-implement",
+    "red→green→refactor": "tdd-implement",
+    "implement": "tdd-implement",
+    // code-review
+    "code-review": "code-review",
+    "code_review": "code-review",
+    "codereview": "code-review",
+    "code review": "code-review",
+    "review": "code-review",
+    "审查": "code-review",
+    // cli-e2e-test
+    "cli-e2e-test": "cli-e2e-test",
+    "cli_e2e_test": "cli-e2e-test",
+    "clie2etest": "cli-e2e-test",
+    "cli e2e": "cli-e2e-test",
+    "cli e2e test": "cli-e2e-test",
+    "e2e": "cli-e2e-test",
+    "e2e test": "cli-e2e-test",
+    "smoke": "cli-e2e-test",
+    // final-verify
+    "final-verify": "final-verify",
+    "final_verify": "final-verify",
+    "finalverify": "final-verify",
+    "verify": "final-verify",
+    "最终验证": "final-verify",
+    "verification": "final-verify",
+    // merge-to-main
+    "merge-to-main": "merge-to-main",
+    "merge_to_main": "merge-to-main",
+    "mergetomain": "merge-to-main",
+    "merge": "merge-to-main",
+    "merge to main": "merge-to-main",
+    "merge-to-main.": "merge-to-main",
+    // summary-report
+    "summary-report": "summary-report",
+    "summary_report": "summary-report",
+    "summaryreport": "summary-report",
+    "summary": "summary-report",
+    "总结": "summary-report",
+    "总结报告": "summary-report",
+    "report": "summary-report",
+    // task-complete
+    "task-complete": "task-complete",
+    "task_complete": "task-complete",
+    "taskcomplete": "task-complete",
+    "完成": "task-complete",
+    "闭环": "task-complete",
+    "done": "task-complete",
+    "completed": "task-complete",
+};
+/**
+ * Normalise a phase-name string for alias lookup. We lowercase,
+ * strip surrounding punctuation, and collapse internal whitespace
+ * + dash runs to a single hyphen, so "Plan — ..." / "(plan)" /
+ * "Code Review" all match the same canonical key.
+ */
+function normaliseAliasKey(raw) {
+    return raw
+        .toLowerCase()
+        .replace(/[—–_]+/g, "-")
+        .replace(/[()（）【】\[\]「」『』、,，.。:：;；]/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+/**
+ * Try to extract "Phase N" + name from an operation title. Returns
+ * `null` if no `Phase N` token is present. Exported for tests so the
+ * parser is independently testable.
+ *
+ * Recognised shapes:
+ *   "Phase 3: Plan - plan_doc: ..."
+ *   "Phase 3 (Plan) 完成 — ..."
+ *   "Phase 3 Plan 完整循环 ..."
+ *   "Phase 3. Plan: ..."
+ *   "phase 5 code-review: PASS"          (lowercase ok)
+ *   "Task #X 创建成功（Phase 1 任务管理完成）"  (Phase N anywhere in the title)
+ *
+ * The name is captured up to the first stop-token (`-`, `—`, `:`,
+ * `,`, `。`, `完成`, `pass`, newline), so trailing technical details
+ * like `plan_doc:` or `worktree: HEAD ...` don't leak in. Hyphens
+ * inside the name (e.g. `setup-worktree`, `code-review`) are
+ * preserved.
+ */
+export function extractPhaseInfo(title) {
+    if (!title)
+        return null;
+    // We look for `Phase <N>` anywhere in the title, then capture the
+    // name up to the first stop-token. The pattern is permissive on
+    // the separator between "Phase N" and the name (`:`, `(`, ` `, or
+    // a combination).
+    const m = title.match(/phase\s+(\d+)\s*[:：(\s]*\s*([^\n:：(\)、,，]+?)(?=$|\s*(?:[:：(\)、,，]|完成|pass|fail|running|pending|[\r\n]))/i);
+    if (!m)
+        return null;
+    const num = m[1];
+    let rawName = m[2].trim();
+    if (!rawName)
+        return null;
+    // Defensively strip a trailing stop-token if the regex's
+    // lookahead didn't catch it.
+    for (const stop of ["完成", "pass", "fail", "pending", "running", ":", "：", "—", "-", "，", ",", "。"]) {
+        const i = rawName.toLowerCase().lastIndexOf(stop.toLowerCase());
+        if (i >= 0 && i >= 2 && i >= rawName.length - stop.length - 1) {
+            rawName = rawName.substring(0, i).trim();
+        }
+    }
+    if (!rawName)
+        return null;
+    // Strip a trailing status keyword like "完成" or "pass".
+    const cleaned = rawName.replace(/\s*(完成|pass|fail|pending|running)\s*$/i, "").trim();
+    return { num, name: cleaned || rawName };
+}
+/**
+ * Map a raw phase name to a canonical phaseId via `PHASE_ALIASES`.
+ * Returns `null` if no alias matches.
+ */
+export function resolvePhaseId(phaseName) {
+    if (!phaseName)
+        return null;
+    const exact = PHASE_ALIASES[phaseName];
+    if (exact)
+        return exact;
+    const norm = normaliseAliasKey(phaseName);
+    if (!norm)
+        return null;
+    if (PHASE_ALIASES[norm])
+        return PHASE_ALIASES[norm];
+    // Also try without any trailing space + token.
+    for (const key of Object.keys(PHASE_ALIASES)) {
+        if (normaliseAliasKey(key) === norm)
+            return PHASE_ALIASES[key];
+    }
+    return null;
+}
+/**
+ * Strip a noisy title of trailing technical fields. We look for the
+ * first ` - <known-marker>:` or ` - <known-marker> ` pattern and
+ * truncate there. This keeps "Phase 3: Plan - plan_doc: docs/.../plan.md
+ * - 485 - worktree: HEAD a487b25f from main" from leaking into the
+ * Mermaid label, leaving just "Phase 3: Plan".
+ */
+const NOISE_FIELD_MARKERS = [
+    "plan_doc",
+    "plan_doc:",
+    "plan_doc ",
+    "worktree:",
+    "worktree ",
+    "worktree 已",
+    "commits:",
+    "commits_reviewed",
+    "commits reviewed",
+    "commit ",
+    "duration",
+    "files_changed",
+    "files changed",
+    "tests_passed",
+    "tests_pass",
+    "tests/cli/",
+    "tests/",
+    "test_hello_world",
+    "baseline",
+    "modified:",
+    "modified ",
+    "new:",
+    "tdd-implement",
+    "tdd_implement",
+    "tdd ",
+    "tdd-",
+    "code-review",
+    "code review",
+    "code-review:",
+    "(test_",
+    "scripts/",
+    "verify-installed",
+    "verify-installed:",
+    "HEAD=",
+    "HEAD:",
+];
+export function sanitiseTitleForLabel(title) {
+    if (!title)
+        return "";
+    let s = title;
+    // Only consider cutting at a noise marker if it appears AFTER a
+    // phase-name-like prefix, i.e. somewhere in the first ~80 chars.
+    const limit = Math.min(s.length, 80);
+    let cutAt = -1;
+    // 1. Cut at the first ": commit " / " commit " (with trailing
+    // space) — common in milestone titles like
+    // "Phase 4 tdd-implement: commit 18c2ee2b landed".
+    const commitMarkers = [": commit ", " commit "];
+    for (const m of commitMarkers) {
+        const idx = s.indexOf(m);
+        if (idx > 0 && idx < limit && (cutAt < 0 || idx < cutAt)) {
+            cutAt = idx;
+        }
+    }
+    // 2. Cut at the first noise-marker after a known separator
+    // (` - `, ` — `, ` | `, ` (`). This catches patterns like
+    // "Phase 3: Plan - plan_doc: docs/..." or
+    // "RED: 3 failing tests added (test_hello_world.py)".
+    const seps = [" - ", " — ", " | ", " (", ": "];
+    for (const marker of NOISE_FIELD_MARKERS) {
+        for (const sep of seps) {
+            const idx = s.indexOf(sep + marker, 0);
+            if (idx > 0 && idx < limit && (cutAt < 0 || idx < cutAt)) {
+                cutAt = idx;
+            }
+        }
+    }
+    // 3. Cut at the first ": <commit-hash>" or " <commit-hash>"
+    // pattern, since most commit-style noise has a hash right after
+    // a colon or space.
+    const hashMatch = s.match(/[:\s]\s*[a-f0-9]{7,}\b/i);
+    if (hashMatch && hashMatch.index != null && hashMatch.index < limit && (cutAt < 0 || hashMatch.index < cutAt)) {
+        cutAt = hashMatch.index + (hashMatch[0].startsWith(":") ? 1 : 0);
+    }
+    if (cutAt > 0)
+        s = s.substring(0, cutAt);
+    return escapeMermaidLabel(s);
+}
+/**
+ * Build a human-readable Mermaid label for a single operation
+ * record. The output is a single line (with `<br/>` for visual
+ * line-break in the Mermaid render) and contains no Mermaid-hostile
+ * characters. Examples:
+ *
+ *   getPhaseLabel({ title: "Phase 3: Plan - plan_doc: ... - worktree: HEAD ..." })
+ *     -> "📝 Phase 3: Plan<br/>brainstorming + writing-plans"
+ *
+ *   getPhaseLabel({ title: "Phase 5 code-review: PASS" })
+ *     -> "🔍 Phase 5: Code Review<br/>BLOCKING/IMPORTANT/MINOR/NIT"
+ *
+ *   getPhaseLabel({ title: "TDD 完整循环结束" })
+ *     -> "🧪 TDD 循环<br/>RED → GREEN → REFACTOR"
+ *
+ *   getPhaseLabel({ title: "RED: 3 failing tests added" })
+ *     -> "⚙️ RED: 3 failing tests added"   (fallback, no Phase prefix)
+ *
+ *   getPhaseLabel({ title: "" })
+ *     -> "⚙️ op"                          (milestoneType fallback)
+ */
+export function getPhaseLabel(op) {
+    const title = (op.title ?? "").toString();
+    const milestoneType = (op.milestoneType ?? "op").toString();
+    // 1. Try the structured "Phase N: <name>" path. This works
+    // regardless of where in the title the "Phase N" appears, so
+    // titles like "Task #X 创建成功（Phase 1 任务管理完成）" are
+    // handled correctly.
+    const info = extractPhaseInfo(title);
+    if (info) {
+        const phaseId = resolvePhaseId(info.name);
+        if (phaseId && PHASE_LABELS[phaseId]) {
+            const meta = PHASE_LABELS[phaseId];
+            return `${meta.emoji} Phase ${info.num}: ${meta.name}<br/>${meta.description}`;
+        }
+        // Phase prefix matched but the name doesn't resolve to a
+        // canonical phase. Render the raw name (sanitised) so the user
+        // still sees the phase number.
+        const cleanName = escapeMermaidLabel(info.name);
+        return `⚙️ Phase ${info.num}: ${cleanName}`;
+    }
+    // 2. Try matching the entire title (or first word) as a phase
+    // alias. This handles titles like "TDD 完整循环结束" where
+    // there's no "Phase N" prefix but the title IS a phase description.
+    // Only do this for short titles — long titles are usually verbose
+    // descriptions that happen to contain phase keywords.
+    if (title.length <= 60) {
+        const fullId = resolvePhaseId(title);
+        if (fullId && PHASE_LABELS[fullId]) {
+            const meta = PHASE_LABELS[fullId];
+            return `${meta.emoji} ${meta.name}<br/>${meta.description}`;
+        }
+    }
+    // 3. Substring scan: we only fire this for titles that start
+    // with a clear phase keyword. This avoids false positives in
+    // long descriptive titles that happen to contain phase words
+    // mid-sentence (e.g. "Plan completed — 4 tasks, 3 TDD tests" is
+    // about Plan, not TDD; "Atomic commit ... no merge to main" is
+    // about a commit, not a merge phase).
+    const lowerStart = title.toLowerCase();
+    const startsWithPhase = (needle) => lowerStart.startsWith(needle.toLowerCase());
+    const startsWithPhaseHits = [
+        ["init-task", "init-task"],
+        ["任务管理", "init-task"],
+        ["setup-worktree", "setup-worktree"],
+        ["worktree", "setup-worktree"],
+        ["plan", "plan"],
+        ["计划", "plan"],
+        ["设计与计划", "plan"],
+        ["tdd", "tdd-implement"],
+        ["tdd-implement", "tdd-implement"],
+        ["review", "code-review"],
+        ["code review", "code-review"],
+        ["code-review", "code-review"],
+        ["cli e2e", "cli-e2e-test"],
+        ["cli-e2e-test", "cli-e2e-test"],
+        ["smoke", "cli-e2e-test"],
+        ["verify", "final-verify"],
+        ["最终验证", "final-verify"],
+        ["merge-to-main", "merge-to-main"],
+        ["merge to main", "merge-to-main"],
+        ["merge", "merge-to-main"],
+        ["summary", "summary-report"],
+        ["总结报告", "summary-report"],
+        ["总结", "summary-report"],
+        ["报告", "summary-report"],
+        ["完成", "task-complete"],
+        ["闭环", "task-complete"],
+    ];
+    for (const [needle, phaseId] of startsWithPhaseHits) {
+        if (startsWithPhase(needle)) {
+            const meta = PHASE_LABELS[phaseId];
+            return `${meta.emoji} ${meta.name}<br/>${meta.description}`;
+        }
+    }
+    // 4. Last resort: sanitise the raw title (drop technical fields)
+    // and prefix with a neutral ⚙️ emoji.
+    const sanitised = sanitiseTitleForLabel(title);
+    if (sanitised) {
+        return `⚙️ ${sanitised}`;
+    }
+    // 5. Absolute fallback: use milestoneType as the label.
+    return `⚙️ ${escapeMermaidLabel(milestoneType || "op")}`;
+}
+/** What the Mermaid node identifier looks like for a given tool call. */
+export function toolNodeId(sequence) {
+    // Mermaid ids are [A-Za-z0-9_]+
+    return `t${Math.max(0, Math.floor(sequence))}`;
+}
+/** Mermaid node identifier for an operation record (by sequence). */
+export function opNodeId(sequence) {
+    return `op${Math.max(0, Math.floor(sequence))}`;
+}
+/** Mermaid node identifier for the "pre-task" / "post-task" bookends. */
+export const PRE_TASK_NODE = "pre_task";
+export const POST_TASK_NODE = "post_task";
+export const START_NODE = "task_start";
+export const END_NODE = "task_end";
+/**
+ * Decide which operation (if any) "owns" a given tool call. The
+ * heuristic: a tool with timestamp T belongs to opN if
+ *   opN.timestamp <= T < opN+1.timestamp
+ * (sorted ascending by timestamp). Tools before the first op go to
+ * "pre-task", tools after the last op go to "post-task".
+ *
+ * Exported so tests can verify the bucketing independently of the
+ * Mermaid rendering.
+ */
+export function assignToolsToOps(operations, toolCalls) {
+    if (operations.length === 0) {
+        return toolCalls.map((t) => ({
+            toolSequence: t.sequence,
+            opSequence: null,
+            bucket: "pre-task",
+        }));
+    }
+    // Make sure ops are sorted ascending by timestamp. OperationRecord.timestamp
+    // is an ISO 8601 string, ToolCallRecord.timestamp is Unix ms — we
+    // normalise ops to ms for comparison.
+    const sortedOps = [...operations]
+        .map((op) => ({ op, ms: parseIsoToMs(op.timestamp) }))
+        .sort((a, b) => a.ms - b.ms);
+    return toolCalls.map((t) => {
+        if (sortedOps.length === 0) {
+            return { toolSequence: t.sequence, opSequence: null, bucket: "pre-task" };
+        }
+        if (t.timestamp < sortedOps[0].ms) {
+            return { toolSequence: t.sequence, opSequence: null, bucket: "pre-task" };
+        }
+        if (t.timestamp >= sortedOps[sortedOps.length - 1].ms) {
+            return { toolSequence: t.sequence, opSequence: null, bucket: "post-task" };
+        }
+        // Find the op whose timestamp is the largest one <= t.timestamp.
+        let owner = null;
+        for (const o of sortedOps) {
+            if (o.ms <= t.timestamp)
+                owner = o.op;
+            else
+                break;
+        }
+        return {
+            toolSequence: t.sequence,
+            opSequence: owner ? owner.sequence : null,
+            bucket: "in-op",
+        };
+    });
+}
+/** Best-effort parse of an ISO 8601 timestamp to Unix ms. Falls back to
+ *  `Number(s)` and finally to `0` so a malformed timestamp never crashes
+ *  the renderer — it just gets bucketed into pre-task. */
+function parseIsoToMs(s) {
+    if (!s)
+        return 0;
+    const d = new Date(s);
+    if (!isNaN(d.getTime()))
+        return d.getTime();
+    const n = Number(s);
+    return Number.isFinite(n) ? n : 0;
+}
+/**
+ * Pick the most descriptive path label from a tool's args. We try a
+ * bunch of canonical field names; if none matches, return the empty
+ * string (the caller will decide whether to show just the tool name).
+ */
+export function pickPathLabel(args) {
+    if (!args || typeof args !== "object")
+        return "";
+    const keys = [
+        "file_path",
+        "filepath",
+        "path",
+        "target_file",
+        "uri",
+        "filename",
+        "file",
+    ];
+    for (const k of keys) {
+        const v = args[k];
+        if (typeof v === "string" && v.length > 0) {
+            // Show only the basename so labels stay short in the diagram.
+            const parts = v.split(/[\\/]/).filter(Boolean);
+            return parts.length > 0 ? parts[parts.length - 1] : v;
+        }
+    }
+    return "";
+}
+/** Replace Mermaid-unfriendly characters in a label with safe equivalents. */
+export function escapeMermaidLabel(s) {
+    return s
+        .replace(/[<>"#|]/g, "_")
+        .replace(/[\r\n\t]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+/** Build the diagram source. */
+export function buildTaskLifecycleDiagram(opts) {
+    const { taskId, operations, toolCalls, withHeader = true, endLabel = "end", } = opts;
+    const lines = [];
+    if (withHeader) {
+        lines.push(`flowchart TD`);
+        lines.push(`  classDef ok fill:#dcfce7,stroke:#16a34a,color:#064e3b`);
+        lines.push(`  classDef fail fill:#fee2e2,stroke:#dc2626,color:#7f1d1d`);
+        lines.push(`  classDef op fill:#dbeafe,stroke:#2563eb,color:#1e3a8a`);
+        lines.push(`  classDef runtime fill:#ede9fe,stroke:#6d28d9,color:#3b0764`);
+        lines.push(`  classDef bookend fill:#f1f5f9,stroke:#475569,color:#0f172a`);
+    }
+    lines.push(`  ${START_NODE}([Task #${taskId} start]):::runtime`);
+    // Bucket tools.
+    const assignments = assignToolsToOps(operations, toolCalls);
+    const toolsByBucket = {
+        "pre-task": [],
+        "post-task": [],
+    };
+    const toolsByOp = {};
+    for (let i = 0; i < toolCalls.length; i++) {
+        const t = toolCalls[i];
+        const a = assignments[i];
+        if (a.bucket === "in-op" && a.opSequence != null) {
+            if (!toolsByOp[a.opSequence])
+                toolsByOp[a.opSequence] = [];
+            toolsByOp[a.opSequence].push(t);
+        }
+        else if (a.bucket === "pre-task") {
+            toolsByBucket["pre-task"].push(t);
+        }
+        else {
+            toolsByBucket["post-task"].push(t);
+        }
+    }
+    // Pre-task subgraph.
+    if (toolsByBucket["pre-task"].length > 0) {
+        lines.push(`  subgraph ${PRE_TASK_NODE}["pre-task"]`);
+        for (const t of toolsByBucket["pre-task"]) {
+            const id = toolNodeId(t.sequence);
+            const label = makeToolLabel(t);
+            lines.push(`    ${id}["${label}"]`);
+            applyToolClass(lines, t, id);
+            // v0.8.1: Mermaid 10 click-directive grammar requires the `call`
+            // keyword to invoke a JavaScript callback with arguments. The bare
+            // `click id __toolClick("N")` form is rejected by the parser
+            // (parse error: got 'PS'). The `call` keyword enters Mermaid's
+            // callbackname lexer state which then handles the function name +
+            // parenthesised args. See flow.jison in mermaid-js/mermaid.
+            lines.push(`    click ${id} call __toolClick("${t.sequence}")`);
+        }
+        lines.push(`  end`);
+        lines.push(`  ${START_NODE} --> ${PRE_TASK_NODE}`);
+    }
+    else {
+        // No pre-task tools — still create a tiny stub so the start -> pre chain
+        // is implicit. We skip it to keep the diagram uncluttered.
+    }
+    // Operation subgraphs. Iterate in ascending sequence so the left-to-right
+    // flow matches the timeline.
+    const sortedOps = [...operations].sort((a, b) => a.sequence - b.sequence);
+    let prev = null;
+    if (toolsByBucket["pre-task"].length > 0) {
+        prev = PRE_TASK_NODE;
+    }
+    else {
+        prev = START_NODE;
+    }
+    for (const op of sortedOps) {
+        const opId = opNodeId(op.sequence);
+        // v0.8.2 (fix/mermaid-readable-labels): replace the raw
+        // `<seq>. <title>` label (which leaked technical details like
+        // `plan_doc: docs/.../plan.md - 485 - worktree: HEAD <hash> from
+        // main`) with a concise, emoji + friendly-name + short-description
+        // label derived from `PHASE_LABELS` via `getPhaseLabel`.
+        const opLabel = getPhaseLabel(op);
+        const sub = `op${op.sequence}`;
+        lines.push(`  subgraph ${sub}["${opLabel}"]`);
+        lines.push(`    direction TB`);
+        const ownTools = toolsByOp[op.sequence] ?? [];
+        if (ownTools.length === 0) {
+            lines.push(`    ${opId}_body["（无工具调用）"]:::bookend`);
+        }
+        else {
+            for (const t of ownTools) {
+                const id = toolNodeId(t.sequence);
+                const label = makeToolLabel(t);
+                lines.push(`    ${id}["${label}"]`);
+                applyToolClass(lines, t, id);
+                lines.push(`    click ${id} call __toolClick("${t.sequence}")`);
+            }
+        }
+        lines.push(`  end`);
+        lines.push(`  ${prev} --> ${sub}`);
+        prev = sub;
+    }
+    // Post-task subgraph.
+    if (toolsByBucket["post-task"].length > 0) {
+        lines.push(`  subgraph ${POST_TASK_NODE}["post-task"]`);
+        for (const t of toolsByBucket["post-task"]) {
+            const id = toolNodeId(t.sequence);
+            const label = makeToolLabel(t);
+            lines.push(`    ${id}["${label}"]`);
+            applyToolClass(lines, t, id);
+            lines.push(`    click ${id} call __toolClick("${t.sequence}")`);
+        }
+        lines.push(`  end`);
+        lines.push(`  ${prev} --> ${POST_TASK_NODE}`);
+        prev = POST_TASK_NODE;
+    }
+    // End node.
+    lines.push(`  ${END_NODE}([${escapeMermaidLabel(endLabel)}]):::runtime`);
+    lines.push(`  ${prev} --> ${END_NODE}`);
+    return lines.join("\n");
+}
+/** Compose a short label for a tool call node. */
+function makeToolLabel(t) {
+    const status = t.success ? "✓" : "✗";
+    const path = pickPathLabel(t.args);
+    const base = path ? `${t.toolName} / ${path}` : t.toolName;
+    const head = escapeMermaidLabel(`🔧 ${base}`);
+    return `${head}<br/><small>${status} · ${t.durationMs}ms</small>`;
+}
+/** Append a `class` line for a tool call. */
+function applyToolClass(lines, t, id) {
+    if (!t.success) {
+        lines.push(`  class ${id} fail`);
+    }
+    else {
+        lines.push(`  class ${id} ok`);
+    }
+}
+//# sourceMappingURL=task-detail-mermaid.js.map