@bpmnkit/operate 0.0.5

package/README.md

@@ -0,0 +1,131 @@
+<div align="center">
+  <img src="https://raw.githubusercontent.com/bpmn-sdk/monorepo/main/doc/logos/logo-2-gateway.svg" width="72" height="72" alt="BPMN Kit logo">
+  <h1>@bpmnkit/operate</h1>
+  <p>Monitoring and operations frontend for Camunda 8 clusters — real-time SSE, zero dependencies</p>
+
+  [![npm](https://img.shields.io/npm/v/@bpmnkit/operate?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmnkit/operate)
+  [![license](https://img.shields.io/npm/l/@bpmnkit/operate?style=flat-square)](https://github.com/bpmnkit/monorepo/blob/main/LICENSE)
+  [![typescript](https://img.shields.io/badge/TypeScript-strict-6244d7?style=flat-square&logo=typescript&logoColor=white)](https://github.com/bpmnkit/monorepo)
+
+  [Documentation](https://bpmn-sdk-docs.pages.dev) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/operate/CHANGELOG.md)
+</div>
+
+---
+
+## Overview
+
+`@bpmnkit/operate` is a zero-dependency monitoring and operations frontend for Camunda 8. Mount it into any HTML element to get a full process monitoring UI — live dashboard, instance browser, incident management, job queue, and user tasks.
+
+It pairs with the `@bpmnkit/proxy` local server, which polls the Camunda REST API server-side and pushes updates via **Server-Sent Events**. The frontend stays clean with no polling timers.
+
+A **mock mode** (`mock: true`) ships fixture data without any running proxy or cluster — useful for demos and local development.
+
+## Features
+
+- **Dashboard** — real-time stats: active instances, open incidents, active jobs, pending tasks
+- **Process Definitions** — deployed process list with name, version, and tenant
+- **Process Instances** — paginated list with state filter (Active / Completed / Terminated)
+- **Instance Detail** — BPMN canvas via `@bpmnkit/canvas` with live token-highlight overlay; active elements glow amber, visited elements show green tint
+- **Incidents** — error type, message, process, and resolution state
+- **Jobs** — job type, worker, retries, state, error message
+- **User Tasks** — name, assignee, state, due date, priority
+- **Profile switcher** — header dropdown populated from the proxy `/profiles` endpoint; switches reconnect all SSE streams
+- **Mock/demo mode** — fully self-contained fixture data, no cluster required
+- **SSE architecture** — proxy polls server-side; frontend opens one `EventSource` per view, gets pushed updates
+- **Hash router** — `#/`, `#/instances`, `#/instances/:key`, `#/definitions`, etc.
+- **Themeable** — light / dark / auto via `--bpmnkit-*` CSS custom properties from `@bpmnkit/ui`; theme choice persisted to `localStorage`
+
+## Installation
+
+```sh
+npm install @bpmnkit/operate @bpmnkit/proxy
+```
+
+## Quick Start
+
+### Demo mode (no cluster needed)
+
+```typescript
+import { createOperate } from "@bpmnkit/operate"
+
+createOperate({
+  container: document.getElementById("app")!,
+  mock: true,
+  theme: "auto",
+})
+```
+
+### Connected to a real Camunda cluster via proxy
+
+```typescript
+import { createOperate } from "@bpmnkit/operate"
+
+createOperate({
+  container: document.getElementById("app")!,
+  proxyUrl: "http://localhost:3033",   // default
+  profile: "production",               // optional, uses active profile if omitted
+  pollInterval: 15_000,                // ms between server-side polls (default: 30 000)
+  theme: "dark",
+})
+```
+
+The proxy must be running (`pnpm proxy`) and have at least one profile configured via the `casen` CLI.
+
+## How it works
+
+```
+Browser  ──── EventSource ────▶  @bpmnkit/proxy  ──── CamundaClient ────▶  Camunda cluster
+         ◀─── SSE events ──────  (polls on interval, pushes results)
+```
+
+1. Each view opens an SSE connection to `/operate/stream?topic=<view>&interval=<ms>`.
+2. The proxy creates a `CamundaClient` using the configured profile's auth credentials.
+3. On each polling tick, the proxy fetches the relevant Camunda data and emits a `{ type: "data", payload }` SSE event.
+4. The store updates and the view re-renders.
+
+## API Reference
+
+### `createOperate(options)`
+
+```typescript
+interface OperateOptions {
+  container: HTMLElement
+  proxyUrl?: string        // default: "http://localhost:3033"
+  profile?: string         // profile name; uses active profile if omitted
+  theme?: "light" | "dark" | "auto"  // default: "auto"
+  pollInterval?: number    // ms between polls; default: 30 000
+  mock?: boolean           // use built-in fixture data; default: false
+}
+```
+
+Returns an `OperateApi`:
+
+```typescript
+interface OperateApi {
+  el: HTMLElement
+  setProfile(name: string | null): void
+  setTheme(theme: "light" | "dark" | "auto"): void
+  navigate(path: string): void  // e.g. "/instances/123456789"
+  destroy(): void
+}
+```
+
+---
+
+## Related Packages
+
+| Package | Description |
+|---------|-------------|
+| [`@bpmnkit/core`](https://www.npmjs.com/package/@bpmnkit/core) | BPMN/DMN/Form parser, builder, layout engine |
+| [`@bpmnkit/canvas`](https://www.npmjs.com/package/@bpmnkit/canvas) | Zero-dependency SVG BPMN viewer |
+| [`@bpmnkit/editor`](https://www.npmjs.com/package/@bpmnkit/editor) | Full-featured interactive BPMN editor |
+| [`@bpmnkit/engine`](https://www.npmjs.com/package/@bpmnkit/engine) | Lightweight BPMN process execution engine |
+| [`@bpmnkit/feel`](https://www.npmjs.com/package/@bpmnkit/feel) | FEEL expression language parser & evaluator |
+| [`@bpmnkit/plugins`](https://www.npmjs.com/package/@bpmnkit/plugins) | 22 composable canvas plugins |
+| [`@bpmnkit/api`](https://www.npmjs.com/package/@bpmnkit/api) | Camunda 8 REST API TypeScript client |
+| [`@bpmnkit/ascii`](https://www.npmjs.com/package/@bpmnkit/ascii) | Render BPMN diagrams as Unicode ASCII art |
+| [`@bpmnkit/profiles`](https://www.npmjs.com/package/@bpmnkit/profiles) | Shared auth, profile storage, and client factories for CLI & proxy |
+
+## License
+
+[MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © bpmn-sdk

package/dist/components/badge.d.ts

@@ -0,0 +1,2 @@
+export { badge, cell } from "@bpmnkit/ui";
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge.js

@@ -0,0 +1,2 @@
+export { badge, cell } from "@bpmnkit/ui";
+//# sourceMappingURL=badge.js.map

package/dist/components/card.d.ts

@@ -0,0 +1,2 @@
+export { createStatsCard } from "@bpmnkit/ui";
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.js

@@ -0,0 +1,2 @@
+export { createStatsCard } from "@bpmnkit/ui";
+//# sourceMappingURL=card.js.map

package/dist/components/chart.d.ts

@@ -0,0 +1,6 @@
+import type { DashboardData } from "../types.js";
+export declare function createBarChart(container: HTMLElement): {
+    update(data: DashboardData | null): void;
+    destroy(): void;
+};
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/chart.js

@@ -0,0 +1,161 @@
+const METRICS = [
+    { key: "activeInstances", label: "Active Instances", cssVar: "--bpmnkit-accent" },
+    { key: "openIncidents", label: "Open Incidents", cssVar: "--op-c-amber" },
+    { key: "activeJobs", label: "Active Jobs", cssVar: "--op-c-green" },
+    { key: "pendingTasks", label: "Pending Tasks", cssVar: "--op-c-purple" },
+];
+const MARGIN = { top: 12, right: 16, bottom: 36, left: 36 };
+const SVG_NS = "http://www.w3.org/2000/svg";
+function niceMax(raw) {
+    if (raw <= 0)
+        return 4;
+    const mag = 10 ** Math.floor(Math.log10(raw));
+    const nice = Math.ceil(raw / mag) * mag;
+    return Math.max(nice, 4);
+}
+function makeSvgEl(tag) {
+    return document.createElementNS(SVG_NS, tag);
+}
+// ── Chart factory ─────────────────────────────────────────────────────────────
+export function createBarChart(container) {
+    const el = document.createElement("div");
+    el.className = "op-chart";
+    container.appendChild(el);
+    const svg = makeSvgEl("svg");
+    svg.setAttribute("class", "op-chart-svg");
+    svg.setAttribute("aria-hidden", "true");
+    el.appendChild(svg);
+    let lastData = null;
+    let svgWidth = 0;
+    let svgHeight = 0;
+    function clearSvg() {
+        while (svg.firstChild)
+            svg.removeChild(svg.firstChild);
+    }
+    function draw(data) {
+        clearSvg();
+        if (svgWidth <= 0 || svgHeight <= 0)
+            return;
+        if (!data) {
+            // Loading dots
+            const cx = svgWidth / 2;
+            const cy = svgHeight / 2;
+            for (let i = 0; i < 3; i++) {
+                const circle = makeSvgEl("circle");
+                circle.setAttribute("cx", String(cx + (i - 1) * 16));
+                circle.setAttribute("cy", String(cy));
+                circle.setAttribute("r", "4");
+                circle.setAttribute("class", "op-chart-dot-pulse");
+                circle.setAttribute("style", `animation-delay: ${i * 0.2}s`);
+                svg.appendChild(circle);
+            }
+            return;
+        }
+        const plotW = Math.max(1, svgWidth - MARGIN.left - MARGIN.right);
+        const plotH = Math.max(1, svgHeight - MARGIN.top - MARGIN.bottom);
+        // Y scale
+        let yMax = 0;
+        for (const m of METRICS) {
+            const v = data[m.key];
+            if (v > yMax)
+                yMax = v;
+        }
+        yMax = niceMax(yMax);
+        function toY(v) {
+            return MARGIN.top + plotH - (v / yMax) * plotH;
+        }
+        // Y grid + labels
+        for (let i = 0; i <= 4; i++) {
+            const v = Math.round((i / 4) * yMax);
+            const y = toY(v);
+            const line = makeSvgEl("line");
+            line.setAttribute("x1", String(MARGIN.left));
+            line.setAttribute("x2", String(MARGIN.left + plotW));
+            line.setAttribute("y1", String(y));
+            line.setAttribute("y2", String(y));
+            line.setAttribute("class", i === 0 ? "op-chart-axis" : "op-chart-grid");
+            svg.appendChild(line);
+            const lbl = makeSvgEl("text");
+            lbl.setAttribute("x", String(MARGIN.left - 6));
+            lbl.setAttribute("y", String(y + 4));
+            lbl.setAttribute("text-anchor", "end");
+            lbl.setAttribute("class", "op-chart-axis-label");
+            lbl.textContent = String(v);
+            svg.appendChild(lbl);
+        }
+        // X axis baseline
+        const xBase = makeSvgEl("line");
+        xBase.setAttribute("x1", String(MARGIN.left));
+        xBase.setAttribute("x2", String(MARGIN.left + plotW));
+        xBase.setAttribute("y1", String(MARGIN.top + plotH));
+        xBase.setAttribute("y2", String(MARGIN.top + plotH));
+        xBase.setAttribute("class", "op-chart-axis");
+        svg.appendChild(xBase);
+        // Bars — one per metric, evenly spaced
+        const n = METRICS.length;
+        const groupGap = Math.max(8, plotW * 0.06);
+        const barW = Math.max(1, (plotW - groupGap * (n + 1)) / n);
+        for (let i = 0; i < METRICS.length; i++) {
+            const m = METRICS[i];
+            if (!m)
+                continue;
+            const v = data[m.key];
+            const barH = (v / yMax) * plotH;
+            const x = MARGIN.left + groupGap * (i + 1) + barW * i;
+            const y = MARGIN.top + plotH - barH;
+            const rect = makeSvgEl("rect");
+            rect.setAttribute("x", String(x));
+            rect.setAttribute("y", String(y));
+            rect.setAttribute("width", String(barW));
+            rect.setAttribute("height", String(Math.max(1, barH)));
+            rect.setAttribute("fill", `var(${m.cssVar})`);
+            rect.setAttribute("opacity", "0.85");
+            rect.setAttribute("rx", "2");
+            svg.appendChild(rect);
+            // Value label above bar
+            if (barH > 0) {
+                const valLbl = makeSvgEl("text");
+                valLbl.setAttribute("x", String(x + barW / 2));
+                valLbl.setAttribute("y", String(Math.max(MARGIN.top + 10, y - 4)));
+                valLbl.setAttribute("text-anchor", "middle");
+                valLbl.setAttribute("class", "op-chart-axis-label");
+                valLbl.textContent = String(v);
+                svg.appendChild(valLbl);
+            }
+            // X label below bar
+            const xLbl = makeSvgEl("text");
+            xLbl.setAttribute("x", String(x + barW / 2));
+            xLbl.setAttribute("y", String(MARGIN.top + plotH + 20));
+            xLbl.setAttribute("text-anchor", "middle");
+            xLbl.setAttribute("class", "op-chart-axis-label");
+            // Abbreviate for space
+            const short = m.label.replace("Active ", "").replace("Open ", "").replace("Pending ", "");
+            xLbl.textContent = short;
+            svg.appendChild(xLbl);
+        }
+    }
+    function drawLast() {
+        draw(lastData);
+    }
+    const ro = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry)
+            return;
+        svgWidth = Math.floor(entry.contentRect.width);
+        svgHeight = Math.floor(entry.contentRect.height);
+        svg.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
+        drawLast();
+    });
+    ro.observe(svg);
+    return {
+        update(data) {
+            lastData = data;
+            draw(data);
+        },
+        destroy() {
+            ro.disconnect();
+            el.remove();
+        },
+    };
+}
+//# sourceMappingURL=chart.js.map

package/dist/components/filter-table.d.ts

@@ -0,0 +1,20 @@
+export interface FilterColumn<T> {
+    label: string;
+    width?: string;
+    render(row: T): string | HTMLElement;
+    /** If provided, column header becomes clickable for sort */
+    sortValue?: (row: T) => string | number | null | undefined;
+}
+export declare function createFilterTable<T>(options: {
+    columns: FilterColumn<T>[];
+    /** Function returning searchable text for a row */
+    searchFn?: (row: T) => string;
+    onRowClick?: (row: T) => void;
+    emptyText?: string;
+    /** Initial page size (default: 10) */
+    pageSize?: number;
+}): {
+    el: HTMLElement;
+    setRows(rows: T[]): void;
+};
+//# sourceMappingURL=filter-table.d.ts.map

package/dist/components/filter-table.js

@@ -0,0 +1,215 @@
+export function createFilterTable(options) {
+    let allRows = [];
+    let searchQuery = "";
+    let sortState = null;
+    let currentPage = 0;
+    let pageSize = options.pageSize ?? 10;
+    const el = document.createElement("div");
+    el.className = "op-filter-table";
+    // Toolbar row: search input + count
+    const toolbar = document.createElement("div");
+    toolbar.className = "op-toolbar";
+    const searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.className = "op-search";
+    searchInput.placeholder = "Search…";
+    toolbar.appendChild(searchInput);
+    const countEl = document.createElement("span");
+    countEl.className = "op-search-count";
+    toolbar.appendChild(countEl);
+    el.appendChild(toolbar);
+    // Table wrap
+    const tableWrap = document.createElement("div");
+    tableWrap.className = "bpmnkit-table-wrap";
+    el.appendChild(tableWrap);
+    // Header with sort support
+    const headerEl = document.createElement("div");
+    headerEl.className = "bpmnkit-table-header";
+    const headerCells = [];
+    for (let i = 0; i < options.columns.length; i++) {
+        const col = options.columns[i];
+        if (!col)
+            continue;
+        const th = document.createElement("div");
+        th.className = "bpmnkit-table-th";
+        if (col.width)
+            th.style.width = col.width;
+        if (col.sortValue) {
+            th.classList.add("op-th-sort");
+            const labelSpan = document.createElement("span");
+            labelSpan.textContent = col.label;
+            th.appendChild(labelSpan);
+            const icon = document.createElement("span");
+            icon.className = "op-sort-icon";
+            icon.textContent = "↕";
+            th.appendChild(icon);
+            const idx = i;
+            th.addEventListener("click", () => {
+                if (sortState?.col === idx) {
+                    sortState = sortState.dir === "asc" ? { col: idx, dir: "desc" } : null;
+                }
+                else {
+                    sortState = { col: idx, dir: "asc" };
+                }
+                currentPage = 0;
+                updateSortIcons();
+                renderRows();
+            });
+        }
+        else {
+            th.textContent = col.label;
+        }
+        headerCells.push(th);
+        headerEl.appendChild(th);
+    }
+    tableWrap.appendChild(headerEl);
+    const bodyEl = document.createElement("div");
+    bodyEl.className = "bpmnkit-table-body";
+    tableWrap.appendChild(bodyEl);
+    // Pagination bar (outside scroll area, always visible)
+    const paginationEl = document.createElement("div");
+    paginationEl.className = "op-pagination";
+    el.appendChild(paginationEl);
+    function updateSortIcons() {
+        for (let i = 0; i < headerCells.length; i++) {
+            const icon = headerCells[i]?.querySelector(".op-sort-icon");
+            if (!icon)
+                continue;
+            if (sortState?.col === i) {
+                icon.textContent = sortState.dir === "asc" ? "↑" : "↓";
+                icon.classList.add("op-sort-icon--active");
+            }
+            else {
+                icon.textContent = "↕";
+                icon.classList.remove("op-sort-icon--active");
+            }
+        }
+    }
+    function applyFilterSort() {
+        let rows = allRows;
+        if (searchQuery && options.searchFn) {
+            const q = searchQuery.toLowerCase();
+            rows = rows.filter((row) => options.searchFn?.(row).toLowerCase().includes(q));
+        }
+        if (sortState !== null) {
+            const st = sortState;
+            const col = options.columns[st.col];
+            if (col?.sortValue) {
+                const dir = st.dir === "asc" ? 1 : -1;
+                rows = [...rows].sort((a, b) => {
+                    const av = col.sortValue?.(a) ?? "";
+                    const bv = col.sortValue?.(b) ?? "";
+                    if (av < bv)
+                        return -1 * dir;
+                    if (av > bv)
+                        return 1 * dir;
+                    return 0;
+                });
+            }
+        }
+        return rows;
+    }
+    function renderPagination(total, start, end, totalPages) {
+        paginationEl.innerHTML = "";
+        const sizeLabel = document.createElement("span");
+        sizeLabel.textContent = "Rows:";
+        paginationEl.appendChild(sizeLabel);
+        const sizeSelect = document.createElement("select");
+        sizeSelect.className = "op-page-size";
+        for (const sz of [10, 25, 50, 100]) {
+            const opt = document.createElement("option");
+            opt.value = String(sz);
+            opt.textContent = String(sz);
+            if (sz === pageSize)
+                opt.selected = true;
+            sizeSelect.appendChild(opt);
+        }
+        sizeSelect.addEventListener("change", () => {
+            pageSize = Number(sizeSelect.value);
+            currentPage = 0;
+            renderRows();
+        });
+        paginationEl.appendChild(sizeSelect);
+        const prevBtn = document.createElement("button");
+        prevBtn.className = "op-pagination-btn";
+        prevBtn.textContent = "‹";
+        prevBtn.disabled = currentPage === 0;
+        prevBtn.addEventListener("click", () => {
+            currentPage--;
+            renderRows();
+        });
+        paginationEl.appendChild(prevBtn);
+        const infoEl = document.createElement("span");
+        infoEl.className = "op-pagination-info";
+        infoEl.textContent = total > 0 ? `${start + 1}–${end} of ${total}` : "0 results";
+        paginationEl.appendChild(infoEl);
+        const nextBtn = document.createElement("button");
+        nextBtn.className = "op-pagination-btn";
+        nextBtn.textContent = "›";
+        nextBtn.disabled = currentPage >= totalPages - 1;
+        nextBtn.addEventListener("click", () => {
+            currentPage++;
+            renderRows();
+        });
+        paginationEl.appendChild(nextBtn);
+    }
+    function renderRows() {
+        const filtered = applyFilterSort();
+        const total = filtered.length;
+        const totalPages = Math.max(1, Math.ceil(total / pageSize));
+        if (currentPage >= totalPages)
+            currentPage = totalPages - 1;
+        const start = currentPage * pageSize;
+        const pageRows = filtered.slice(start, start + pageSize);
+        const end = start + pageRows.length;
+        countEl.textContent =
+            filtered.length !== allRows.length
+                ? `${filtered.length} / ${allRows.length}`
+                : String(allRows.length);
+        bodyEl.innerHTML = "";
+        if (total === 0) {
+            const empty = document.createElement("div");
+            empty.className = "bpmnkit-table-empty";
+            empty.textContent = searchQuery ? "No results" : (options.emptyText ?? "No data");
+            bodyEl.appendChild(empty);
+            renderPagination(0, 0, 0, 1);
+            return;
+        }
+        for (const row of pageRows) {
+            const tr = document.createElement("div");
+            tr.className = "bpmnkit-table-row";
+            if (options.onRowClick) {
+                tr.classList.add("bpmnkit-table-row--clickable");
+                tr.addEventListener("click", () => options.onRowClick?.(row));
+            }
+            for (const col of options.columns) {
+                const td = document.createElement("div");
+                td.className = "bpmnkit-table-td";
+                if (col.width)
+                    td.style.width = col.width;
+                const content = col.render(row);
+                if (typeof content === "string")
+                    td.textContent = content;
+                else
+                    td.appendChild(content);
+                tr.appendChild(td);
+            }
+            bodyEl.appendChild(tr);
+        }
+        renderPagination(total, start, end, totalPages);
+    }
+    searchInput.addEventListener("input", () => {
+        searchQuery = searchInput.value;
+        currentPage = 0;
+        renderRows();
+    });
+    return {
+        el,
+        setRows(rows) {
+            allRows = rows;
+            currentPage = 0;
+            renderRows();
+        },
+    };
+}
+//# sourceMappingURL=filter-table.js.map

package/dist/components/table.d.ts

@@ -0,0 +1,2 @@
+export { type Column, type TableOptions, createTable } from "@bpmnkit/ui";
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table.js

@@ -0,0 +1,2 @@
+export { createTable } from "@bpmnkit/ui";
+//# sourceMappingURL=table.js.map

package/dist/css.d.ts

@@ -0,0 +1,2 @@
+export declare function injectOperateStyles(): void;
+//# sourceMappingURL=css.d.ts.map