@bpmnkit/operate 0.0.11 → 0.0.13

package/README.md

@@ -113,6 +113,9 @@ interface OperateApi {
 | [`@bpmnkit/connector-gen`](https://www.npmjs.com/package/@bpmnkit/connector-gen) | Generate connector templates from OpenAPI specs |
 | [`@bpmnkit/cli`](https://www.npmjs.com/package/@bpmnkit/cli) | Camunda 8 command-line interface (casen) |
 | [`@bpmnkit/proxy`](https://www.npmjs.com/package/@bpmnkit/proxy) | Local AI bridge and Camunda API proxy server |
+| [`@bpmnkit/cli-sdk`](https://www.npmjs.com/package/@bpmnkit/cli-sdk) | Plugin authoring SDK for the casen CLI |
+| [`@bpmnkit/create-casen-plugin`](https://www.npmjs.com/package/@bpmnkit/create-casen-plugin) | Scaffold a new casen CLI plugin in seconds |
+| [`@bpmnkit/casen-report`](https://www.npmjs.com/package/@bpmnkit/casen-report) | HTML reports from Camunda 8 incident and SLA data |
 
 ## License
 

package/dist/operate.js

@@ -27,7 +27,7 @@ import { createTasksView } from "./views/tasks.js";
 export function createOperate(options) {
     injectUiStyles();
     injectOperateStyles();
-    const { container, proxyUrl = "http://localhost:3033", pollInterval = 30_000, mock = false, } = options;
+    const { container, proxyUrl = "http://localhost:3033", pollInterval = 30_000, mock = false, onOpenInEditor, } = options;
     let profile = options.profile ?? null;
     const initialTheme = loadPersistedTheme() ?? options.theme ?? "neon";
     // ── Root element ──────────────────────────────────────────────────────────
@@ -147,7 +147,14 @@ export function createOperate(options) {
         };
         header.setTitle("Process Definition");
         nav.setActive("/definitions");
-        const { el: vEl, destroy, setTheme, } = createDefinitionDetailView(params.key ?? "", defStore, { proxyUrl, profile, mock, theme: getTheme(), navigate: (path) => router.navigate(path) }, () => router.navigate("/definitions"));
+        const { el: vEl, destroy, setTheme, } = createDefinitionDetailView(params.key ?? "", defStore, {
+            proxyUrl,
+            profile,
+            mock,
+            theme: getTheme(),
+            navigate: (path) => router.navigate(path),
+            onOpenInEditor,
+        }, () => router.navigate("/definitions"));
         showView(vEl, destroy, setTheme);
     });
     router.on("/decisions", () => {
@@ -204,6 +211,7 @@ export function createOperate(options) {
             mock,
             theme: getTheme(),
             navigate: (path) => router.navigate(path),
+            onOpenInEditor,
         }, () => router.navigate("/instances"));
         showView(vEl, destroy, setTheme);
     });
@@ -229,7 +237,14 @@ export function createOperate(options) {
         const incidentKey = params.key ?? "";
         header.setTitle(`Incident ${incidentKey}`);
         nav.setActive("/incidents");
-        const { el: vEl, destroy } = createIncidentDetailView(incidentKey, incStore, { proxyUrl, profile, mock, theme: getTheme(), navigate: (path) => router.navigate(path) }, () => router.navigate("/incidents"));
+        const { el: vEl, destroy } = createIncidentDetailView(incidentKey, incStore, {
+            proxyUrl,
+            profile,
+            mock,
+            theme: getTheme(),
+            navigate: (path) => router.navigate(path),
+            onOpenInEditor,
+        }, () => router.navigate("/incidents"));
         showView(vEl, destroy);
     });
     router.on("/jobs", () => {

package/dist/types.d.ts

@@ -12,6 +12,11 @@ export interface OperateOptions {
     pollInterval?: number;
     /** Use mock/demo data instead of connecting to proxy. */
     mock?: boolean;
+    /**
+     * Called when the user clicks "Open in Editor" on a diagram view.
+     * Receives the raw BPMN XML and a suggested file name.
+     */
+    onOpenInEditor?: (xml: string, name: string) => void;
 }
 export interface OperateApi {
     readonly el: HTMLElement;

package/dist/views/definition-detail.d.ts

@@ -5,6 +5,7 @@ interface Config {
     mock: boolean;
     theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
+    onOpenInEditor?: (xml: string, name: string) => void;
 }
 export declare function createDefinitionDetailView(definitionKey: string, store: DefinitionsStore, cfg: Config, onBack: () => void): {
     el: HTMLElement;

package/dist/views/definition-detail.js

@@ -28,6 +28,19 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
     backBtn.textContent = "← Processes";
     backBtn.addEventListener("click", onBack);
     breadcrumb.appendChild(backBtn);
+    let _openInEditorXml = null;
+    let _openInEditorName = "";
+    const openInEditorBtn = document.createElement("button");
+    openInEditorBtn.className = "op-action-btn";
+    openInEditorBtn.textContent = "Open in Editor ↗";
+    openInEditorBtn.style.marginLeft = "auto";
+    openInEditorBtn.style.display = "none";
+    openInEditorBtn.addEventListener("click", () => {
+        if (_openInEditorXml)
+            cfg.onOpenInEditor?.(_openInEditorXml, _openInEditorName);
+    });
+    if (cfg.onOpenInEditor)
+        breadcrumb.appendChild(openInEditorBtn);
     el.appendChild(breadcrumb);
     // Metadata row
     const meta = document.createElement("div");
@@ -292,7 +305,10 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
         el.appendChild(overlay);
         setTimeout(() => bizInput.focus(), 0);
     }
-    function loadCanvas(xml) {
+    function loadCanvas(xml, name) {
+        _openInEditorXml = xml;
+        _openInEditorName = name;
+        openInEditorBtn.style.display = "";
         canvas?.destroy();
         canvasWrap.innerHTML = "";
         canvas = new BpmnCanvas({
@@ -303,12 +319,15 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
         });
     }
     if (cfg.mock) {
-        renderMeta(getDef());
-        loadCanvas(MOCK_BPMN_XML);
+        const def = getDef();
+        renderMeta(def);
+        const mockName = def?.name ?? def?.processDefinitionId ?? "Process";
+        loadCanvas(MOCK_BPMN_XML, mockName);
     }
     else {
         const def = getDef();
         renderMeta(def);
+        const defName = def?.name ?? def?.processDefinitionId ?? "Process";
         fetch(`${cfg.proxyUrl}/api/process-definitions/${definitionKey}/xml`, {
             headers: {
                 accept: "text/xml",
@@ -316,7 +335,7 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
             },
         })
             .then((r) => r.text())
-            .then((xml) => loadCanvas(xml))
+            .then((xml) => loadCanvas(xml, defName))
             .catch(() => {
             canvasWrap.innerHTML = `<div style="padding:24px;color:var(--bpmnkit-fg-muted)">Failed to load diagram</div>`;
         });

package/dist/views/incident-detail.d.ts

@@ -5,6 +5,7 @@ interface Config {
     mock: boolean;
     theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
+    onOpenInEditor?: (xml: string, name: string) => void;
 }
 export declare function createIncidentDetailView(incidentKey: string, store: IncidentsStore, cfg: Config, onBack: () => void): {
     el: HTMLElement;

package/dist/views/incident-detail.js

@@ -44,6 +44,19 @@ export function createIncidentDetailView(incidentKey, store, cfg, onBack) {
     backBtn.textContent = "← Incidents";
     backBtn.addEventListener("click", onBack);
     breadcrumb.appendChild(backBtn);
+    let _openInEditorXml = null;
+    let _openInEditorName = "";
+    const openInEditorBtn = document.createElement("button");
+    openInEditorBtn.className = "op-action-btn";
+    openInEditorBtn.textContent = "Open in Editor ↗";
+    openInEditorBtn.style.marginLeft = "auto";
+    openInEditorBtn.style.display = "none";
+    openInEditorBtn.addEventListener("click", () => {
+        if (_openInEditorXml)
+            cfg.onOpenInEditor?.(_openInEditorXml, _openInEditorName);
+    });
+    if (cfg.onOpenInEditor)
+        breadcrumb.appendChild(openInEditorBtn);
     el.appendChild(breadcrumb);
     // Process chain (shows Root / Parent / Current)
     const processChainEl = document.createElement("div");
@@ -221,7 +234,10 @@ export function createIncidentDetailView(incidentKey, store, cfg, onBack) {
     // Canvas
     const tokenHighlight = createTokenHighlightPlugin();
     let canvas = null;
-    function loadCanvas(xml) {
+    function loadCanvas(xml, name) {
+        _openInEditorXml = xml;
+        _openInEditorName = name;
+        openInEditorBtn.style.display = "";
         canvas?.destroy();
         canvasWrap.innerHTML = "";
         canvas = new BpmnCanvas({
@@ -459,7 +475,7 @@ export function createIncidentDetailView(incidentKey, store, cfg, onBack) {
     let storeUnsub;
     if (cfg.mock) {
         const mockInc = MOCK_INCIDENTS.find((i) => i.incidentKey === incidentKey) ?? null;
-        loadCanvas(MOCK_BPMN_XML);
+        loadCanvas(MOCK_BPMN_XML, mockInc?.processDefinitionId ?? "Process");
         if (mockInc) {
             renderMeta(mockInc);
             renderDetails(mockInc);
@@ -488,6 +504,7 @@ export function createIncidentDetailView(incidentKey, store, cfg, onBack) {
             renderDetails(inc);
             fetchProcessChain(inc).catch(() => { });
             const pdKey = inc.processDefinitionKey;
+            const incName = inc.processDefinitionId ?? "Process";
             if (pdKey) {
                 fetch(`${cfg.proxyUrl}/api/process-definitions/${pdKey}/xml`, {
                     headers: {
@@ -497,7 +514,7 @@ export function createIncidentDetailView(incidentKey, store, cfg, onBack) {
                 })
                     .then((r) => r.text())
                     .then((xml) => {
-                    loadCanvas(xml);
+                    loadCanvas(xml, incName);
                     if (inc.elementId) {
                         tokenHighlight.api.setActive([inc.elementId]);
                     }

package/dist/views/instance-detail.d.ts

@@ -6,6 +6,7 @@ interface Config {
     mock: boolean;
     theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
+    onOpenInEditor?: (xml: string, name: string) => void;
 }
 export declare function createInstanceDetailView(instanceKey: string, instancesStore: InstancesStore, cfg: Config, onBack: () => void): {
     el: HTMLElement;

package/dist/views/instance-detail.js

@@ -139,6 +139,19 @@ export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBac
     backBtn.textContent = "← Instances";
     backBtn.addEventListener("click", onBack);
     breadcrumb.appendChild(backBtn);
+    let _openInEditorXml = null;
+    let _openInEditorName = "";
+    const openInEditorBtn = document.createElement("button");
+    openInEditorBtn.className = "op-action-btn";
+    openInEditorBtn.textContent = "Open in Editor ↗";
+    openInEditorBtn.style.marginLeft = "auto";
+    openInEditorBtn.style.display = "none";
+    openInEditorBtn.addEventListener("click", () => {
+        if (_openInEditorXml)
+            cfg.onOpenInEditor?.(_openInEditorXml, _openInEditorName);
+    });
+    if (cfg.onOpenInEditor)
+        breadcrumb.appendChild(openInEditorBtn);
     el.appendChild(breadcrumb);
     // Process hierarchy chain (shown for sub-process instances)
     const processChainEl = document.createElement("div");
@@ -241,7 +254,10 @@ export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBac
     // Token-highlight plugin + canvas
     const tokenHighlight = createTokenHighlightPlugin();
     let canvas = null;
-    function loadCanvas(xml) {
+    function loadCanvas(xml, name) {
+        _openInEditorXml = xml;
+        _openInEditorName = name;
+        openInEditorBtn.style.display = "";
         canvas?.destroy();
         canvasWrap.innerHTML = "";
         canvas = new BpmnCanvas({
@@ -618,7 +634,7 @@ export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBac
     // ── Instance data loading ────────────────────────────────────────────────
     let instUnsub;
     if (cfg.mock) {
-        loadCanvas(MOCK_BPMN_XML);
+        loadCanvas(MOCK_BPMN_XML, "Order Processing");
         applyTokens(MOCK_ACTIVE_ELEMENTS, MOCK_VISITED_ELEMENTS);
         renderVariables(MOCK_VARIABLES.filter((v) => v.processInstanceKey === instanceKey));
         setTimeout(() => applyTokens(MOCK_ACTIVE_ELEMENTS, MOCK_VISITED_ELEMENTS), 100);
@@ -645,6 +661,7 @@ export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBac
             renderMeta(inst);
             fetchProcessChain(inst.processInstanceKey).catch(() => { });
             const pdKey = inst.processDefinitionKey;
+            const instName = inst.processDefinitionName ?? inst.processDefinitionId ?? "Process";
             fetch(`${cfg.proxyUrl}/api/process-definitions/${pdKey}/xml`, {
                 headers: {
                     accept: "text/xml",
@@ -653,7 +670,7 @@ export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBac
             })
                 .then((r) => r.text())
                 .then((xml) => {
-                loadCanvas(xml);
+                loadCanvas(xml, instName);
                 return fetch(`${cfg.proxyUrl}/api/element-instances/search`, {
                     method: "POST",
                     headers: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/operate",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Monitoring and operations frontend for Camunda 8 clusters — real-time SSE, zero dependencies",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,11 +18,11 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/api": "0.0.12",
-    "@bpmnkit/canvas": "0.0.13",
-    "@bpmnkit/core": "0.0.13",
-    "@bpmnkit/plugins": "0.0.14",
-    "@bpmnkit/ui": "0.0.8"
+    "@bpmnkit/api": "0.0.13",
+    "@bpmnkit/canvas": "0.0.14",
+    "@bpmnkit/core": "0.0.14",
+    "@bpmnkit/plugins": "0.0.16",
+    "@bpmnkit/ui": "0.0.9"
   },
   "keywords": [
     "bpmn",