@bpmnkit/operate 0.0.5

package/dist/stream.d.ts

@@ -0,0 +1,12 @@
+type Unsub = () => void;
+/**
+ * Polls the proxy's /operate/stream endpoint via plain fetch (one-shot JSON).
+ * Using fetch instead of EventSource releases the HTTP connection after each
+ * response, preventing connection-pool exhaustion when multiple stores poll
+ * the same origin concurrently.
+ */
+export declare function createStream<T>(url: string, onData: (payload: T) => void, onError: (msg: string) => void): Unsub;
+/** Simulates an SSE stream using mock data. Calls onData immediately and then on interval. */
+export declare function createMockStream<T>(getData: () => T, onData: (payload: T) => void, interval: number): Unsub;
+export {};
+//# sourceMappingURL=stream.d.ts.map

package/dist/stream.js

@@ -0,0 +1,42 @@
+/**
+ * Polls the proxy's /operate/stream endpoint via plain fetch (one-shot JSON).
+ * Using fetch instead of EventSource releases the HTTP connection after each
+ * response, preventing connection-pool exhaustion when multiple stores poll
+ * the same origin concurrently.
+ */
+export function createStream(url, onData, onError) {
+    const interval = Math.max(5_000, Number(new URL(url).searchParams.get("interval") ?? "30000"));
+    let aborted = false;
+    async function poll() {
+        if (aborted)
+            return;
+        try {
+            const r = await fetch(url);
+            if (aborted)
+                return;
+            if (!r.ok)
+                throw new Error(`HTTP ${r.status}`);
+            const data = (await r.json());
+            onData(data);
+        }
+        catch {
+            if (!aborted)
+                onError("Connection error. Retrying…");
+        }
+    }
+    void poll();
+    const id = setInterval(() => void poll(), interval);
+    return () => {
+        aborted = true;
+        clearInterval(id);
+    };
+}
+/** Simulates an SSE stream using mock data. Calls onData immediately and then on interval. */
+export function createMockStream(getData, onData, interval) {
+    onData(getData());
+    if (interval <= 0)
+        return () => { };
+    const id = setInterval(() => onData(getData()), interval);
+    return () => clearInterval(id);
+}
+//# sourceMappingURL=stream.js.map

package/dist/types.d.ts

@@ -0,0 +1,48 @@
+import type { DecisionDefinitionResult, IncidentResult, JobSearchResult, MessageSubscriptionResult, ProcessDefinitionResult, ProcessInstanceResult, UserTaskResult, VariableResult } from "@bpmnkit/api";
+import type { Theme } from "@bpmnkit/ui";
+export type { Theme };
+export interface OperateOptions {
+    container: HTMLElement;
+    /** Proxy server base URL. Default: http://localhost:3033 */
+    proxyUrl?: string;
+    /** Active profile name. Sent as x-profile header. */
+    profile?: string;
+    theme?: Theme;
+    /** Polling interval in ms. Default: 30000. Set to 0 to disable auto-refresh. */
+    pollInterval?: number;
+    /** Use mock/demo data instead of connecting to proxy. */
+    mock?: boolean;
+}
+export interface OperateApi {
+    readonly el: HTMLElement;
+    setProfile(name: string | null): void;
+    setTheme(theme: Theme): void;
+    navigate(path: string): void;
+    destroy(): void;
+}
+export interface StreamEvent<T> {
+    type: "data" | "error" | "keepalive";
+    topic?: string;
+    payload?: T;
+    message?: string;
+}
+export interface ProfileInfo {
+    name: string;
+    active: boolean;
+    apiType: string;
+    baseUrl: string | null;
+    authType: string;
+}
+export interface DashboardData {
+    activeInstances: number;
+    openIncidents: number;
+    activeJobs: number;
+    pendingTasks: number;
+    definitions: number;
+    /** Usage metrics — aggregate totals (may be absent if endpoint unavailable) */
+    usageTotalProcessInstances?: number;
+    usageDecisionInstances?: number;
+    usageAssignees?: number;
+}
+export type { DecisionDefinitionResult, IncidentResult, JobSearchResult, MessageSubscriptionResult, ProcessDefinitionResult, ProcessInstanceResult, UserTaskResult, VariableResult, };
+//# sourceMappingURL=types.d.ts.map

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/views/dashboard.d.ts

@@ -0,0 +1,6 @@
+import type { DashboardStore } from "../stores/dashboard.js";
+export declare function createDashboardView(store: DashboardStore, onNavigate: (path: string) => void): {
+    el: HTMLElement;
+    destroy(): void;
+};
+//# sourceMappingURL=dashboard.d.ts.map

package/dist/views/dashboard.js

@@ -0,0 +1,98 @@
+import { IC_UI } from "@bpmnkit/ui";
+import { createBarChart } from "../components/chart.js";
+// ── Dashboard card ────────────────────────────────────────────────────────────
+function createDashboardCard(label, value, icon, accent, onClick) {
+    const card = document.createElement("div");
+    card.className = "op-dash-card";
+    card.style.setProperty("--accent", accent);
+    const top = document.createElement("div");
+    top.className = "op-dash-card-top";
+    const lbl = document.createElement("div");
+    lbl.className = "op-dash-card-label";
+    lbl.textContent = label;
+    const iconWrap = document.createElement("div");
+    iconWrap.className = "op-dash-card-icon";
+    iconWrap.innerHTML = icon;
+    top.appendChild(lbl);
+    top.appendChild(iconWrap);
+    card.appendChild(top);
+    const val = document.createElement("div");
+    val.className = "op-dash-card-value";
+    val.textContent = String(value);
+    card.appendChild(val);
+    card.addEventListener("click", onClick);
+    return card;
+}
+function createUsageCard(label, value) {
+    const card = document.createElement("div");
+    card.className = "op-usage-card";
+    const lbl = document.createElement("div");
+    lbl.className = "op-usage-card-label";
+    lbl.textContent = label;
+    const val = document.createElement("div");
+    val.className = "op-usage-card-value";
+    val.textContent = value !== undefined ? value.toLocaleString() : "—";
+    card.appendChild(val);
+    card.appendChild(lbl);
+    return card;
+}
+// ── View ──────────────────────────────────────────────────────────────────────
+export function createDashboardView(store, onNavigate) {
+    const el = document.createElement("div");
+    el.className = "op-view op-dashboard";
+    const grid = document.createElement("div");
+    grid.className = "op-card-grid";
+    el.appendChild(grid);
+    // Usage metrics section (only shown if data available)
+    const usageSection = document.createElement("div");
+    usageSection.className = "op-usage-section";
+    usageSection.style.display = "none";
+    el.appendChild(usageSection);
+    const usageHeading = document.createElement("div");
+    usageHeading.className = "op-chart-heading";
+    usageHeading.textContent = "Lifetime usage";
+    usageSection.appendChild(usageHeading);
+    const usageGrid = document.createElement("div");
+    usageGrid.className = "op-usage-grid";
+    usageSection.appendChild(usageGrid);
+    const chartWrap = document.createElement("div");
+    chartWrap.className = "op-chart-section";
+    const chartHeading = document.createElement("div");
+    chartHeading.className = "op-chart-heading";
+    chartHeading.textContent = "Activity over time";
+    chartWrap.appendChild(chartHeading);
+    el.appendChild(chartWrap);
+    const chart = createBarChart(chartWrap);
+    function render() {
+        grid.innerHTML = "";
+        const d = store.state.data;
+        grid.appendChild(createDashboardCard("Active Instances", d?.activeInstances ?? "—", IC_UI.instances, "var(--bpmnkit-accent)", () => onNavigate("/instances")));
+        const incAccent = d?.openIncidents ? "var(--op-c-amber)" : "var(--bpmnkit-accent)";
+        grid.appendChild(createDashboardCard("Open Incidents", d?.openIncidents ?? "—", IC_UI.incidents, incAccent, () => onNavigate("/incidents")));
+        grid.appendChild(createDashboardCard("Active Jobs", d?.activeJobs ?? "—", IC_UI.jobs, "var(--op-c-green)", () => onNavigate("/jobs")));
+        grid.appendChild(createDashboardCard("Pending Tasks", d?.pendingTasks ?? "—", IC_UI.tasks, "var(--op-c-purple)", () => onNavigate("/tasks")));
+        grid.appendChild(createDashboardCard("Deployed Processes", d?.definitions ?? "—", IC_UI.processes, "var(--bpmnkit-fg-muted)", () => onNavigate("/definitions")));
+        // Usage metrics cards (only if data arrived)
+        const hasUsage = d?.usageTotalProcessInstances !== undefined ||
+            d?.usageDecisionInstances !== undefined ||
+            d?.usageAssignees !== undefined;
+        if (hasUsage) {
+            usageSection.style.display = "";
+            usageGrid.innerHTML = "";
+            usageGrid.appendChild(createUsageCard("Process Instances", d?.usageTotalProcessInstances));
+            usageGrid.appendChild(createUsageCard("Decision Evaluations", d?.usageDecisionInstances));
+            usageGrid.appendChild(createUsageCard("Active Assignees", d?.usageAssignees));
+        }
+        chart.update(store.state.data ?? null);
+    }
+    const unsub = store.subscribe(render);
+    render();
+    return {
+        el,
+        destroy() {
+            unsub();
+            chart.destroy();
+        },
+    };
+}
+//# sourceMappingURL=dashboard.js.map

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

@@ -0,0 +1,15 @@
+import type { DecisionsStore } from "../stores/decisions.js";
+interface Config {
+    proxyUrl: string;
+    profile: string | null;
+    mock: boolean;
+    theme: "light" | "dark";
+    navigate?: (path: string) => void;
+}
+export declare function createDecisionDetailView(definitionKey: string, store: DecisionsStore, cfg: Config, onBack: () => void): {
+    el: HTMLElement;
+    setTheme(t: "light" | "dark"): void;
+    destroy(): void;
+};
+export {};
+//# sourceMappingURL=decision-detail.d.ts.map

package/dist/views/decision-detail.js

@@ -0,0 +1,167 @@
+import { DmnEditor } from "@bpmnkit/plugins/dmn-editor";
+const MOCK_DMN_XML = `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" id="Definitions_1" name="DRD" namespace="http://camunda.org/schema/1.0/dmn">
+  <decision id="approve-order" name="Approve Order">
+    <decisionTable id="decisionTable_1">
+      <input id="input_1" label="Order Amount">
+        <inputExpression id="inputExpression_1" typeRef="double">
+          <text>amount</text>
+        </inputExpression>
+      </input>
+      <output id="output_1" label="Approved" name="approved" typeRef="boolean"/>
+      <rule id="rule_1">
+        <inputEntry id="inputEntry_1"><text>&lt; 1000</text></inputEntry>
+        <outputEntry id="outputEntry_1"><text>true</text></outputEntry>
+      </rule>
+      <rule id="rule_2">
+        <inputEntry id="inputEntry_2"><text>&gt;= 1000</text></inputEntry>
+        <outputEntry id="outputEntry_2"><text>false</text></outputEntry>
+      </rule>
+    </decisionTable>
+  </decision>
+</definitions>`;
+export function createDecisionDetailView(definitionKey, store, cfg, onBack) {
+    const el = document.createElement("div");
+    el.className = "op-view op-def-detail";
+    // Breadcrumb
+    const breadcrumb = document.createElement("div");
+    breadcrumb.className = "op-breadcrumb";
+    const backBtn = document.createElement("button");
+    backBtn.className = "op-back-btn";
+    backBtn.textContent = "← Decisions";
+    backBtn.addEventListener("click", onBack);
+    breadcrumb.appendChild(backBtn);
+    el.appendChild(breadcrumb);
+    // Metadata row
+    const meta = document.createElement("div");
+    meta.className = "op-def-meta";
+    el.appendChild(meta);
+    // Editor pane
+    const editorWrap = document.createElement("div");
+    editorWrap.className = "op-def-canvas";
+    el.appendChild(editorWrap);
+    let editor = null;
+    function getDef() {
+        return store.state.data?.items.find((d) => d.decisionDefinitionKey === definitionKey) ?? null;
+    }
+    function getVersions() {
+        const def = getDef();
+        if (!def)
+            return [];
+        const id = def.decisionDefinitionId;
+        return (store.state.data?.items ?? [])
+            .filter((d) => d.decisionDefinitionId === id)
+            .sort((a, b) => (b.version ?? 0) - (a.version ?? 0));
+    }
+    function renderMeta(def) {
+        meta.innerHTML = "";
+        if (!def)
+            return;
+        const name = document.createElement("span");
+        name.className = "op-def-meta-name";
+        name.textContent = def.name ?? def.decisionDefinitionId;
+        meta.appendChild(name);
+        const versions = getVersions();
+        if (versions.length > 1 && cfg.navigate) {
+            const select = document.createElement("select");
+            select.className = "op-version-select";
+            for (const v of versions) {
+                const opt = document.createElement("option");
+                opt.value = v.decisionDefinitionKey;
+                opt.textContent = `v${v.version ?? "?"}`;
+                opt.selected = v.decisionDefinitionKey === definitionKey;
+                select.appendChild(opt);
+            }
+            select.addEventListener("change", () => {
+                cfg.navigate?.(`/decisions/${select.value}`);
+            });
+            meta.appendChild(select);
+        }
+        else {
+            const ver = document.createElement("span");
+            ver.className = "op-def-meta-version";
+            ver.textContent = `v${def.version ?? "?"}`;
+            meta.appendChild(ver);
+        }
+        if (def.decisionRequirementsName) {
+            const drg = document.createElement("span");
+            drg.className = "op-def-meta-version";
+            drg.textContent = `DRG: ${def.decisionRequirementsName}`;
+            meta.appendChild(drg);
+        }
+        if (def.tenantId) {
+            const tenant = document.createElement("span");
+            tenant.className = "op-def-meta-version";
+            tenant.textContent = `tenant: ${def.tenantId}`;
+            meta.appendChild(tenant);
+        }
+        const key = document.createElement("span");
+        key.className = "op-instance-key";
+        key.textContent = def.decisionDefinitionKey;
+        meta.appendChild(key);
+    }
+    function loadEditor(xml) {
+        editor?.destroy();
+        editorWrap.innerHTML = "";
+        editor = new DmnEditor({ container: editorWrap, theme: cfg.theme });
+        editor.loadXML(xml).catch(() => { });
+    }
+    let xmlStarted = false;
+    function startXmlFetch(def) {
+        if (xmlStarted)
+            return;
+        xmlStarted = true;
+        renderMeta(def);
+        if (cfg.mock) {
+            loadEditor(MOCK_DMN_XML);
+            return;
+        }
+        const headers = {};
+        if (cfg.profile)
+            headers["x-profile"] = cfg.profile;
+        fetch(`${cfg.proxyUrl}/api/decision-definitions/${def.decisionDefinitionKey}/xml`, { headers })
+            .then((r) => (r.ok ? r.text() : null))
+            .then((xml) => {
+            if (xml)
+                loadEditor(xml);
+        })
+            .catch(() => { });
+    }
+    // Try to resolve from store immediately
+    const def = getDef();
+    if (def) {
+        startXmlFetch(def);
+    }
+    else if (!cfg.mock) {
+        // Deep-link: fetch directly
+        const headers = {};
+        if (cfg.profile)
+            headers["x-profile"] = cfg.profile;
+        fetch(`${cfg.proxyUrl}/api/decision-definitions/${definitionKey}`, { headers })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((inst) => {
+            if (inst && !xmlStarted)
+                startXmlFetch(inst);
+        })
+            .catch(() => { });
+    }
+    // Re-check when store updates (in case we navigated before store loaded)
+    const unsub = store.subscribe(() => {
+        if (xmlStarted)
+            return;
+        const found = getDef();
+        if (found)
+            startXmlFetch(found);
+    });
+    return {
+        el,
+        setTheme(t) {
+            editor?.setTheme(t);
+        },
+        destroy() {
+            unsub();
+            editor?.destroy();
+        },
+    };
+}
+//# sourceMappingURL=decision-detail.js.map

package/dist/views/decisions.d.ts

@@ -0,0 +1,7 @@
+import type { DecisionsStore } from "../stores/decisions.js";
+import type { DecisionDefinitionResult } from "../types.js";
+export declare function createDecisionsView(store: DecisionsStore, onSelect: (def: DecisionDefinitionResult) => void): {
+    el: HTMLElement;
+    destroy(): void;
+};
+//# sourceMappingURL=decisions.d.ts.map

package/dist/views/decisions.js

@@ -0,0 +1,78 @@
+import { createFilterTable } from "../components/filter-table.js";
+export function createDecisionsView(store, onSelect) {
+    const el = document.createElement("div");
+    el.className = "op-view op-def-view";
+    const { el: tableEl, setRows } = createFilterTable({
+        columns: [
+            {
+                label: "Name",
+                render: (row) => row.latest.name ?? row.latest.decisionDefinitionId,
+                sortValue: (row) => row.latest.name ?? row.latest.decisionDefinitionId,
+            },
+            {
+                label: "ID",
+                width: "200px",
+                render: (row) => {
+                    const span = document.createElement("span");
+                    span.className = "op-mono-cell";
+                    span.textContent = row.latest.decisionDefinitionId;
+                    return span;
+                },
+                sortValue: (row) => row.latest.decisionDefinitionId,
+            },
+            {
+                label: "DRG",
+                width: "180px",
+                render: (row) => row.latest.decisionRequirementsName ?? "—",
+                sortValue: (row) => row.latest.decisionRequirementsName ?? "",
+            },
+            {
+                label: "Versions",
+                width: "80px",
+                render: (row) => String(row.versionCount),
+                sortValue: (row) => row.versionCount,
+            },
+            {
+                label: "Latest",
+                width: "80px",
+                render: (row) => `v${row.latest.version ?? "?"}`,
+                sortValue: (row) => row.latest.version ?? 0,
+            },
+        ],
+        searchFn: (row) => [
+            row.latest.name,
+            row.latest.decisionDefinitionId,
+            row.latest.decisionRequirementsName,
+            row.latest.decisionDefinitionKey,
+        ]
+            .filter(Boolean)
+            .join(" "),
+        onRowClick: (row) => onSelect(row.latest),
+        emptyText: "No decision definitions deployed",
+    });
+    el.appendChild(tableEl);
+    function buildRows(items) {
+        const map = new Map();
+        for (const item of items) {
+            const id = item.decisionDefinitionId;
+            const existing = map.get(id);
+            if (!existing) {
+                map.set(id, { latest: item, versionCount: 1 });
+            }
+            else {
+                existing.versionCount++;
+                if ((item.version ?? 0) > (existing.latest.version ?? 0)) {
+                    existing.latest = item;
+                }
+            }
+        }
+        return Array.from(map.values());
+    }
+    function render() {
+        setRows(buildRows(store.state.data?.items ?? []));
+    }
+    const unsub = store.subscribe(render);
+    render();
+    return { el, destroy: unsub };
+}
+//# sourceMappingURL=decisions.js.map

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

@@ -0,0 +1,15 @@
+import type { DefinitionsStore } from "../stores/definitions.js";
+interface Config {
+    proxyUrl: string;
+    profile: string | null;
+    mock: boolean;
+    theme: "light" | "dark";
+    navigate?: (path: string) => void;
+}
+export declare function createDefinitionDetailView(definitionKey: string, store: DefinitionsStore, cfg: Config, onBack: () => void): {
+    el: HTMLElement;
+    setTheme(t: "light" | "dark"): void;
+    destroy(): void;
+};
+export {};
+//# sourceMappingURL=definition-detail.d.ts.map