@bpmnkit/plugins 0.0.16 → 0.0.17

package/dist/pattern-advisor/index.d.ts

@@ -0,0 +1,20 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+import type { BpmnDefinitions } from "@bpmnkit/core";
+export interface PatternAdvisorOptions {
+    /** Container element to mount the advisor panel into. */
+    container?: HTMLElement;
+    /**
+     * Called when a fix is applied. Use this to re-serialize and reload the
+     * modified definitions (e.g. serialize to XML and call `canvas.load(xml)`).
+     */
+    onApplyFix?: (defs: BpmnDefinitions, description: string) => void;
+}
+export interface PatternAdvisorPlugin extends CanvasPlugin {
+    readonly name: "pattern-advisor";
+    /** The side-panel element. Mount it in your dock or sidebar. */
+    readonly panel: HTMLElement;
+    /** Mount the panel into a container element. */
+    mount(container: HTMLElement): void;
+}
+export declare function createPatternAdvisorPlugin(options?: PatternAdvisorOptions): PatternAdvisorPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/pattern-advisor/index.js

@@ -0,0 +1,233 @@
+import { optimize } from "@bpmnkit/core";
+import { injectPatternAdvisorStyles } from "./css.js";
+// ── Plugin factory ──────────────────────────────────────────────────────────
+export function createPatternAdvisorPlugin(options) {
+    let canvasApi = null;
+    let currentDefs = null;
+    let findings = [];
+    const dismissed = new Set(); // finding IDs dismissed by user
+    const unsubs = [];
+    // ── Panel DOM ───────────────────────────────────────────────────────────
+    const panelEl = document.createElement("div");
+    panelEl.className = "bpmnkit-pa-panel";
+    const headerEl = document.createElement("div");
+    headerEl.className = "bpmnkit-pa-header";
+    const titleEl = document.createElement("span");
+    titleEl.className = "bpmnkit-pa-title";
+    titleEl.textContent = "Pattern Advisor";
+    const countsEl = document.createElement("div");
+    countsEl.className = "bpmnkit-pa-counts";
+    headerEl.appendChild(titleEl);
+    headerEl.appendChild(countsEl);
+    const bodyEl = document.createElement("div");
+    bodyEl.className = "bpmnkit-pa-body";
+    panelEl.appendChild(headerEl);
+    panelEl.appendChild(bodyEl);
+    // ── Helpers ─────────────────────────────────────────────────────────────
+    function clearEl(el) {
+        while (el.firstChild !== null)
+            el.removeChild(el.firstChild);
+    }
+    function makeBadge(severity) {
+        const badge = document.createElement("span");
+        badge.className = `bpmnkit-pa-badge bpmnkit-pa-badge-${severity}`;
+        badge.textContent = severity.toUpperCase();
+        return badge;
+    }
+    function makeSeverityTag(severity) {
+        const tag = document.createElement("span");
+        tag.className = `bpmnkit-pa-severity bpmnkit-pa-severity-${severity}`;
+        tag.textContent = severity;
+        return tag;
+    }
+    // ── Canvas badge management ─────────────────────────────────────────────
+    const BADGE_CLASSES = [
+        "bpmnkit-pa-error-ring",
+        "bpmnkit-pa-warning-ring",
+        "bpmnkit-pa-info-ring",
+    ];
+    function clearCanvasBadges() {
+        const vp = canvasApi?.viewportEl;
+        if (vp === undefined)
+            return;
+        for (const cls of BADGE_CLASSES) {
+            for (const el of vp.querySelectorAll(`.${cls}`)) {
+                el.classList.remove(cls);
+            }
+        }
+    }
+    function applyCanvasBadges(activeFindings) {
+        const vp = canvasApi?.viewportEl;
+        if (vp === undefined)
+            return;
+        clearCanvasBadges();
+        // Track the worst severity per element
+        const worstSeverity = new Map();
+        for (const f of activeFindings) {
+            for (const id of f.elementIds) {
+                const current = worstSeverity.get(id);
+                if (current === undefined ||
+                    (f.severity === "error" && current !== "error") ||
+                    (f.severity === "warning" && current === "info")) {
+                    worstSeverity.set(id, f.severity);
+                }
+            }
+        }
+        for (const [elementId, severity] of worstSeverity) {
+            const el = vp.querySelector(`[data-bpmnkit-id="${elementId}"]`);
+            if (el !== null) {
+                el.classList.add(`bpmnkit-pa-${severity}-ring`);
+            }
+        }
+    }
+    // ── Rendering ───────────────────────────────────────────────────────────
+    function renderPanel() {
+        clearEl(countsEl);
+        clearEl(bodyEl);
+        const active = findings.filter((f) => !dismissed.has(f.id));
+        if (active.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "bpmnkit-pa-empty";
+            empty.textContent =
+                currentDefs === null
+                    ? "Open a process to see pattern suggestions."
+                    : "No pattern issues found. The process looks good.";
+            bodyEl.appendChild(empty);
+            clearEl(countsEl);
+            return;
+        }
+        // Summary badges
+        const errors = active.filter((f) => f.severity === "error").length;
+        const warnings = active.filter((f) => f.severity === "warning").length;
+        const infos = active.filter((f) => f.severity === "info").length;
+        if (errors > 0) {
+            const b = makeBadge("error");
+            b.textContent = String(errors);
+            countsEl.appendChild(b);
+        }
+        if (warnings > 0) {
+            const b = makeBadge("warning");
+            b.textContent = String(warnings);
+            countsEl.appendChild(b);
+        }
+        if (infos > 0) {
+            const b = makeBadge("info");
+            b.textContent = String(infos);
+            countsEl.appendChild(b);
+        }
+        // Group findings by first elementId (or processId if empty)
+        const groups = new Map();
+        for (const f of active) {
+            const groupKey = f.elementIds[0] ?? f.processId;
+            const arr = groups.get(groupKey) ?? [];
+            arr.push(f);
+            groups.set(groupKey, arr);
+        }
+        // Sort groups: errors first, then warnings, then info
+        const severityOrder = { error: 0, warning: 1, info: 2 };
+        const sortedGroups = [...groups.entries()].sort(([, a], [, b]) => {
+            const aMin = Math.min(...a.map((f) => severityOrder[f.severity]));
+            const bMin = Math.min(...b.map((f) => severityOrder[f.severity]));
+            return aMin - bMin;
+        });
+        for (const [groupKey, groupFindings] of sortedGroups) {
+            const groupEl = document.createElement("div");
+            groupEl.className = "bpmnkit-pa-group";
+            const groupHeader = document.createElement("div");
+            groupHeader.className = "bpmnkit-pa-group-header";
+            groupHeader.textContent = groupKey;
+            groupEl.appendChild(groupHeader);
+            // Sort within group: errors first
+            const sorted = [...groupFindings].sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
+            for (const finding of sorted) {
+                const findingEl = document.createElement("div");
+                findingEl.className = "bpmnkit-pa-finding";
+                findingEl.appendChild(makeSeverityTag(finding.severity));
+                const bodyDiv = document.createElement("div");
+                bodyDiv.className = "bpmnkit-pa-finding-body";
+                const msgEl = document.createElement("div");
+                msgEl.className = "bpmnkit-pa-finding-msg";
+                msgEl.textContent = finding.message;
+                const sugEl = document.createElement("div");
+                sugEl.className = "bpmnkit-pa-finding-sug";
+                sugEl.textContent = finding.suggestion;
+                bodyDiv.appendChild(msgEl);
+                bodyDiv.appendChild(sugEl);
+                // Action buttons
+                const actionsEl = document.createElement("div");
+                actionsEl.className = "bpmnkit-pa-finding-actions";
+                if (finding.applyFix !== undefined && currentDefs !== null) {
+                    const fixBtn = document.createElement("button");
+                    fixBtn.className = "bpmnkit-pa-btn bpmnkit-pa-btn-fix";
+                    fixBtn.textContent = "Apply Fix";
+                    const defs = currentDefs;
+                    const fix = finding.applyFix;
+                    fixBtn.addEventListener("click", () => {
+                        const result = fix(defs);
+                        options?.onApplyFix?.(defs, result.description);
+                    });
+                    actionsEl.appendChild(fixBtn);
+                }
+                const dismissBtn = document.createElement("button");
+                dismissBtn.className = "bpmnkit-pa-btn";
+                dismissBtn.textContent = "Dismiss";
+                dismissBtn.addEventListener("click", () => {
+                    dismissed.add(finding.id);
+                    renderPanel();
+                    applyCanvasBadges(findings.filter((f) => !dismissed.has(f.id)));
+                });
+                actionsEl.appendChild(dismissBtn);
+                bodyDiv.appendChild(actionsEl);
+                findingEl.appendChild(bodyDiv);
+                groupEl.appendChild(findingEl);
+            }
+            bodyEl.appendChild(groupEl);
+        }
+    }
+    // ── Analysis ────────────────────────────────────────────────────────────
+    function runAnalysis(defs) {
+        currentDefs = defs;
+        const report = optimize(defs, { categories: ["pattern"] });
+        findings = report.findings;
+        renderPanel();
+        applyCanvasBadges(findings.filter((f) => !dismissed.has(f.id)));
+    }
+    function clearAnalysis() {
+        currentDefs = null;
+        findings = [];
+        clearCanvasBadges();
+        renderPanel();
+    }
+    // ── CanvasPlugin ────────────────────────────────────────────────────────
+    return {
+        name: "pattern-advisor",
+        panel: panelEl,
+        mount(container) {
+            container.appendChild(panelEl);
+        },
+        install(api) {
+            canvasApi = api;
+            injectPatternAdvisorStyles();
+            renderPanel();
+            if (options?.container !== undefined) {
+                options.container.appendChild(panelEl);
+            }
+            const onAny = api.on;
+            unsubs.push(api.on("diagram:load", (defs) => {
+                runAnalysis(defs);
+            }), api.on("diagram:clear", () => {
+                clearAnalysis();
+            }), onAny("diagram:change", (defs) => {
+                runAnalysis(defs);
+            }));
+        },
+        uninstall() {
+            for (const off of unsubs)
+                off();
+            clearCanvasBadges();
+            panelEl.remove();
+            canvasApi = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/process-runner/css.js

@@ -40,6 +40,20 @@ const CSS = `
   position: relative;
 }
 
+.bpmnkit-runner-chaos-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--bpmnkit-fg-muted, rgba(255,255,255,0.55));
+  cursor: pointer;
+  user-select: none;
+  padding: 0 4px;
+}
+.bpmnkit-runner-chaos-label:has(.bpmnkit-runner-chaos-checkbox:checked) {
+  color: var(--bpmnkit-warn, #f59e0b);
+}
+
 .bpmnkit-runner-btn {
   display: flex;
   align-items: center;
@@ -289,6 +303,45 @@ const CSS = `
 }
 .bpmnkit-runner-play-pane--hidden { display: none !important; }
 
+/* ── Timeline scrubber ───────────────────────────────────────────────────── */
+.bpmnkit-runner-scrubber-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  font-size: 11px;
+}
+.bpmnkit-runner-scrubber {
+  flex: 1;
+  height: 4px;
+  accent-color: var(--bpmnkit-accent, #6b9df7);
+  cursor: pointer;
+}
+.bpmnkit-runner-scrubber-index {
+  color: rgba(255,255,255,0.4);
+  white-space: nowrap;
+  min-width: 100px;
+  text-align: right;
+}
+.bpmnkit-runner-scrubber-live,
+.bpmnkit-runner-scrubber-replay {
+  background: none;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 4px;
+  color: rgba(255,255,255,0.7);
+  font-size: 10px;
+  padding: 2px 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.bpmnkit-runner-scrubber-live:hover,
+.bpmnkit-runner-scrubber-replay:hover { border-color: var(--bpmnkit-accent, #6b9df7); color: var(--bpmnkit-accent, #6b9df7); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-scrubber-row { border-color: rgba(0,0,0,0.08); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-scrubber-index { color: rgba(0,0,0,0.4); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-scrubber-live,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-scrubber-replay { border-color: rgba(0,0,0,0.2); color: rgba(0,0,0,0.6); }
+
 .bpmnkit-runner-play-empty {
   color: rgba(255,255,255,0.25);
   text-align: center;
@@ -453,6 +506,81 @@ const CSS = `
   color: rgba(0,0,0,0.4);
 }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-runner-play-ivar-add:hover { border-color: var(--bpmnkit-accent, #1a56db); color: var(--bpmnkit-accent, #1a56db); }
+
+/* ── Tests tab ───────────────────────────────────────────────────────────── */
+.bpmnkit-runner-tests-header {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  margin-bottom: 8px;
+}
+.bpmnkit-runner-tests-run-all, .bpmnkit-runner-tests-add { font-size: 11px; padding: 3px 8px; }
+.bpmnkit-runner-tests-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+.bpmnkit-runner-tests-pass .bpmnkit-runner-tests-status { color: var(--bpmnkit-success, #22c55e); }
+.bpmnkit-runner-tests-fail .bpmnkit-runner-tests-status { color: var(--bpmnkit-danger, #f87171); }
+.bpmnkit-runner-tests-status { font-size: 14px; width: 16px; text-align: center; }
+.bpmnkit-runner-tests-name {
+  flex: 1;
+  background: none;
+  border: none;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  color: inherit;
+  font-size: 12px;
+  padding: 2px 4px;
+}
+.bpmnkit-runner-tests-name:focus { outline: none; border-color: var(--bpmnkit-accent, #6b9df7); }
+.bpmnkit-runner-tests-run-one, .bpmnkit-runner-tests-del {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.4);
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 12px;
+}
+.bpmnkit-runner-tests-run-one:hover { color: var(--bpmnkit-accent, #6b9df7); }
+.bpmnkit-runner-tests-del:hover { color: var(--bpmnkit-danger, #f87171); }
+.bpmnkit-runner-tests-diff {
+  padding: 4px 0 4px 22px;
+  font-size: 11px;
+  color: rgba(255,255,255,0.5);
+}
+.bpmnkit-runner-tests-diff-row { padding: 1px 0; }
+.bpmnkit-runner-tests-diff-error { color: var(--bpmnkit-danger, #f87171); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-header { border-color: rgba(0,0,0,0.08); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-row { border-color: rgba(0,0,0,0.04); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-name { border-color: rgba(0,0,0,0.15); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-run-one,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-del { color: rgba(0,0,0,0.3); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-diff { color: rgba(0,0,0,0.4); }
+
+/* ── Tests tab extra buttons ─────────────────────────────────────────────── */
+.bpmnkit-runner-tests-gen, .bpmnkit-runner-tests-chaos-import { font-size: 11px; padding: 3px 8px; }
+.bpmnkit-runner-tests-chaos-import {
+  color: var(--bpmnkit-warn, #f59e0b);
+  border-color: var(--bpmnkit-warn, #f59e0b);
+}
+.bpmnkit-runner-tests-chaos-import:hover {
+  background: rgba(245,158,11,0.12);
+}
+
+/* ── Chaos run summary banner ─────────────────────────────────────────────── */
+.bpmnkit-runner-chaos-summary {
+  font-size: 11px;
+  padding: 6px 10px;
+  margin-bottom: 8px;
+  border-radius: 5px;
+  background: rgba(245,158,11,0.12);
+  border: 1px solid var(--bpmnkit-warn, #f59e0b);
+  color: var(--bpmnkit-warn, #f59e0b);
+}
 `;
 export function injectProcessRunnerStyles() {
     if (typeof document === "undefined")

package/dist/process-runner/index.d.ts

@@ -26,6 +26,38 @@ interface TokenHighlightLike {
         setError(elementId: string): void;
     };
 }
+/** Minimal scenario interface — avoids hard dep on @bpmnkit/engine. */
+export interface ScenarioLike {
+    id: string;
+    name: string;
+    processId?: string;
+    inputs?: Record<string, unknown>;
+    mocks?: Record<string, {
+        outputs?: Record<string, unknown>;
+        error?: string;
+    }>;
+    expect?: {
+        path?: string[];
+        variables?: Record<string, unknown>;
+    };
+}
+export interface ScenarioResultLike {
+    scenarioId: string;
+    scenarioName: string;
+    passed: boolean;
+    visitedElements: string[];
+    finalVariables: Record<string, unknown>;
+    errors: Array<{
+        elementId?: string;
+        message: string;
+    }>;
+    failures: Array<{
+        field: string;
+        expected: unknown;
+        actual: unknown;
+    }>;
+    durationMs: number;
+}
 export interface ProcessRunnerOptions {
     /** The engine instance used to deploy and execute processes. */
     engine: EngineLike;
@@ -46,6 +78,26 @@ export interface ProcessRunnerOptions {
     onExitPlayMode?: () => void;
     /** Returns the current project ID, used to scope input variable persistence. */
     getProjectId?: () => string | null;
+    /**
+     * Optional scenario runner callback. When provided, the Tests tab is active.
+     * Inject `runScenario` from `@bpmnkit/engine` here to avoid a hard dep.
+     */
+    runScenario?: (scenario: ScenarioLike) => Promise<ScenarioResultLike>;
+    /**
+     * Called on diagram load to check for a companion .bpmn.tests.json sidecar.
+     * Return parsed scenarios, or null if no sidecar exists.
+     */
+    loadSidecarScenarios?: () => Promise<ScenarioLike[] | null>;
+    /**
+     * Optional AI scenario generator. When provided, a "Generate" button appears
+     * in the Tests tab. Should return draft scenarios to add to the list.
+     */
+    generateScenarios?: () => Promise<ScenarioLike[]>;
+    /**
+     * Returns the Zeebe job type string for a given element ID.
+     * Used to map chaos injections to scenario mocks for export.
+     */
+    getJobType?: (elementId: string) => string | null;
 }
 export declare function createProcessRunnerPlugin(options: ProcessRunnerOptions): CanvasPlugin & {
     toolbar: HTMLDivElement;