@bpmnkit/operate 0.0.9 → 0.0.11

package/dist/css.js

@@ -1293,6 +1293,28 @@ const OPERATE_CSS = `
   font-family: var(--bpmnkit-font-mono);
   padding: 2px 0 6px;
 }
+.op-ai-var-process {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.op-ai-var-process > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.op-ai-var-subprocess-badge {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bpmnkit-accent-subtle);
+  color: var(--bpmnkit-accent);
+}
 `;
 export function injectOperateStyles() {
     injectStyle(OPERATE_STYLE_ID, OPERATE_CSS);

package/dist/views/search.js

@@ -26,7 +26,8 @@ function saveTemplates(key, templates) {
 function relTime(iso) {
     if (!iso)
         return "—";
-    const diff = Date.now() - new Date(iso).getTime();
+    const d = new Date(iso);
+    const diff = Date.now() - d.getTime();
     const m = Math.floor(diff / 60_000);
     if (m < 1)
         return "just now";
@@ -34,8 +35,13 @@ function relTime(iso) {
         return `${m}m ago`;
     const h = Math.floor(m / 60);
     if (h < 24)
-        return `${h}h ago`;
-    return `${Math.floor(h / 24)}d ago`;
+        return `${h}h ${m % 60}m ago`;
+    return d.toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
 }
 const INST_FIELDS = [
     { id: "state", label: "State", type: "state-select", serverSide: true },
@@ -428,13 +434,13 @@ export function createSearchView(cfg, onNavigate) {
             },
             {
                 label: "Started",
-                width: "90px",
+                width: "120px",
                 render: (row) => relTime(row.startDate),
                 sortValue: (row) => row.startDate ?? "",
             },
             {
                 label: "Ended",
-                width: "90px",
+                width: "120px",
                 render: (row) => relTime(row.endDate),
                 sortValue: (row) => row.endDate ?? "",
             },
@@ -860,7 +866,7 @@ export function createSearchView(cfg, onNavigate) {
             },
             {
                 label: "Started",
-                width: "90px",
+                width: "120px",
                 render: (row) => relTime(row.startDate),
                 sortValue: (row) => row.startDate ?? "",
             },
@@ -874,6 +880,38 @@ export function createSearchView(cfg, onNavigate) {
     aiResultsSection.appendChild(aiInstTableEl);
     const { el: aiVarTableEl, setRows: setAiVarRows } = createFilterTable({
         columns: [
+            {
+                label: "Process",
+                render: (row) => {
+                    const wrap = document.createElement("span");
+                    wrap.className = "op-ai-var-process";
+                    const name = row.instanceProcessName ?? row.instanceProcessId ?? "—";
+                    const nameEl = document.createElement("span");
+                    nameEl.textContent = name;
+                    wrap.appendChild(nameEl);
+                    if (row.instanceIsSubprocess) {
+                        const sub = document.createElement("span");
+                        sub.className = "op-ai-var-subprocess-badge";
+                        sub.textContent = "sub";
+                        wrap.appendChild(sub);
+                    }
+                    return wrap;
+                },
+                sortValue: (row) => row.instanceProcessName ?? row.instanceProcessId ?? "",
+            },
+            {
+                label: "State",
+                width: "110px",
+                render: (row) => {
+                    if (!row.instanceState)
+                        return "—";
+                    const wrap = document.createElement("div");
+                    wrap.className = "bpmnkit-badge-wrap";
+                    wrap.appendChild(badge(row.instanceState));
+                    return wrap;
+                },
+                sortValue: (row) => row.instanceState ?? "",
+            },
             {
                 label: "Name",
                 width: "160px",
@@ -910,8 +948,16 @@ export function createSearchView(cfg, onNavigate) {
                 },
                 sortValue: (row) => row.processInstanceKey,
             },
+            {
+                label: "Started",
+                width: "120px",
+                render: (row) => relTime(row.instanceStartDate),
+                sortValue: (row) => row.instanceStartDate ?? "",
+            },
         ],
-        searchFn: (row) => [row.name, row.value, row.processInstanceKey].join(" "),
+        searchFn: (row) => [row.name, row.value, row.processInstanceKey, row.instanceProcessName, row.instanceProcessId]
+            .filter(Boolean)
+            .join(" "),
         emptyText: "No variables found",
     });
     aiResultsSection.appendChild(aiVarTableEl);

package/package.json

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