@worca/ui 0.9.0 → 0.11.0

package/app/styles.css

@@ -22,8 +22,9 @@
   --status-paused: #f59e0b;
   --status-completed: #22c55e;
   --status-failed: #ef4444;
-  --status-resuming: #3b82f6;
   --status-skipped: #94a3b8;
+  --status-interrupted: #f59e0b;
+  --status-cancelled: #94a3b8;
   /* legacy */
   --status-in-progress: #3b82f6;
   --status-error: #ef4444;
@@ -730,8 +731,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .stage-node.status-interrupted .stage-icon {
-  border-color: var(--status-in-progress);
-  opacity: 0.6;
+  border-color: var(--status-interrupted);
 }
 
 .stage-label {
@@ -1110,8 +1110,7 @@ sl-details.log-history-panel::part(content) {
 }
 
 .status-interrupted {
-  color: var(--status-in-progress);
-  opacity: 0.6;
+  color: var(--status-interrupted);
 }
 
 .status-running {
@@ -1126,8 +1125,8 @@ sl-details.log-history-panel::part(content) {
   color: var(--status-failed);
 }
 
-.status-resuming {
-  color: var(--status-resuming);
+.status-cancelled {
+  color: var(--status-cancelled);
 }
 
 /* --- 18b. Control Buttons --- */
@@ -1282,11 +1281,11 @@ sl-details.log-history-panel::part(content) {
 
 /* Status-colored left border accent on run cards */
 .run-card.status-running  { border-left: 3px solid var(--status-running); }
-.run-card.status-resuming { border-left: 3px solid var(--status-resuming); }
 .run-card.status-paused   { border-left: 3px solid var(--status-paused); }
 .run-card.status-completed { border-left: 3px solid var(--status-completed); }
 .run-card.status-failed   { border-left: 3px solid var(--status-failed); }
 .run-card.status-pending  { border-left: 3px solid var(--status-pending); }
+.run-card.status-cancelled { border-left: 3px solid var(--status-cancelled); }
 
 /* --- 21. Dashboard --- */
 .dashboard {
@@ -3890,7 +3889,12 @@ sl-details.learnings-panel::part(content) {
 .run-card-actions {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-left: 26px;
+}
+.run-card-actions:empty {
+  display: none;
 }
 .btn-quick-resume {
   display: inline-flex;
@@ -3992,6 +3996,7 @@ sl-details.learnings-panel::part(content) {
 .pipeline-succeeded { border-left-color: var(--status-completed); }
 .pipeline-failed { border-left-color: var(--status-failed); }
 .pipeline-paused { border-left-color: var(--status-paused); }
+.pipeline-cancelled { border-left-color: var(--status-cancelled); }
 .pipeline-unknown { border-left-color: var(--muted); }
 
 .pipeline-card-header {
@@ -4318,3 +4323,205 @@ sl-tooltip.bead-tooltip::part(body) {
   width: 100%;
 }
 
+/* ── Integrations (card catalog) ─────────────────────────────────────── */
+
+.ig-page {
+  max-width: 720px;
+}
+
+.ig-subtitle {
+  margin: 0 0 1.25rem;
+  font-size: 0.85rem;
+  color: var(--sl-color-neutral-500);
+}
+
+.ig-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ig-card {
+  border: 1px solid var(--sl-color-neutral-200);
+  border-radius: var(--sl-border-radius-medium);
+  padding: 1rem 1.25rem;
+  background: var(--sl-color-neutral-0);
+}
+
+.ig-card--connected {
+  border-left: 3px solid var(--sl-color-success-500);
+}
+
+.ig-card--disabled {
+  border-left: 3px solid var(--sl-color-neutral-300);
+  opacity: 0.7;
+}
+
+.ig-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.75rem;
+  padding-left: 2.75rem;
+}
+
+.ig-card--disconnected {
+  opacity: 0.85;
+}
+
+.ig-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ig-card-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.ig-card-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.ig-card-name {
+  display: block;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.ig-card-desc {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--sl-color-neutral-500);
+}
+
+.ig-badges {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+}
+
+.ig-card-stats {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  padding-left: 2.75rem;
+  font-size: 0.8rem;
+  color: var(--sl-color-neutral-500);
+}
+
+.ig-card-stats .stat-warn {
+  color: var(--sl-color-warning-600);
+}
+
+.ig-card-chats {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-top: 0.4rem;
+  padding-left: 2.75rem;
+}
+
+.ig-chat-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+}
+
+.ig-chat-id {
+  font-family: var(--sl-font-mono);
+  color: var(--sl-color-neutral-600);
+  font-size: 0.8rem;
+}
+
+.ig-card-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding-left: 2.75rem;
+}
+
+/* Inline form */
+
+.ig-form {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-top: 1px solid var(--sl-color-neutral-200);
+}
+
+.ig-env-hint {
+  font-size: 0.8rem;
+  color: var(--sl-color-neutral-600);
+  background: var(--sl-color-neutral-50);
+  border: 1px solid var(--sl-color-neutral-200);
+  border-radius: var(--sl-border-radius-small);
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.75rem;
+  font-family: var(--sl-font-mono);
+}
+
+.ig-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+@media (max-width: 600px) {
+  .ig-form-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ig-form-field {
+  margin-bottom: 0.75rem;
+}
+
+.ig-form-field label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-bottom: 0.2rem;
+  color: var(--sl-color-neutral-700);
+}
+
+.ig-form-field .form-hint {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--sl-color-neutral-500);
+  margin-top: 0.15rem;
+}
+
+.ig-detect-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.ig-detect-row sl-input {
+  flex: 1;
+}
+
+.ig-event-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.2rem 0.5rem;
+}
+
+.ig-form-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.ig-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--sl-color-neutral-500);
+  padding: 2rem;
+}
+

package/app/utils/state-actions.js

@@ -0,0 +1,55 @@
+export const STATES = [
+  'pending',
+  'running',
+  'paused',
+  'completed',
+  'failed',
+  'interrupted',
+  'cancelled',
+];
+
+const ACTION_MATRIX = {
+  stop: { running: true },
+  pause: { running: true },
+  resume: { paused: true, failed: true, interrupted: true },
+  cancel: {
+    pending: true,
+    running: true,
+    paused: true,
+    failed: true,
+    interrupted: true,
+  },
+  archive: {
+    pending: true,
+    paused: true,
+    completed: true,
+    failed: true,
+    interrupted: true,
+    cancelled: true,
+  },
+  unarchive: {
+    completed: true,
+    failed: true,
+    interrupted: true,
+    cancelled: true,
+  },
+  delete: {
+    pending: true,
+    paused: true,
+    completed: true,
+    failed: true,
+    interrupted: true,
+    cancelled: true,
+  },
+  learn: {
+    paused: true,
+    completed: true,
+    failed: true,
+    interrupted: true,
+    cancelled: true,
+  },
+};
+
+export function actionAllowed(action, status) {
+  return Boolean(ACTION_MATRIX[action]?.[status]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worca/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Pipeline monitoring UI for worca-cc",
   "license": "MIT",
   "author": "Sinisha Djukic",
@@ -23,9 +23,10 @@
   },
   "files": [
     "bin/worca-ui.js",
-    "server/*.js",
-    "!server/*.test.js",
-    "!server/test/",
+    "server/**/*.js",
+    "!server/**/*.test.js",
+    "!server/test/**",
+    "!server/**/test/**",
     "app/favicon-*.svg",
     "app/index.html",
     "app/main.bundle.js",
@@ -34,6 +35,7 @@
     "app/vendor/",
     "app/protocol.js",
     "app/utils/stage-order.js",
+    "app/utils/state-actions.js",
     "scripts/build-frontend.js"
   ],
   "engines": {