@worca/ui 0.8.1 → 0.9.0-rc.1

package/app/styles.css

@@ -24,6 +24,7 @@
   --status-failed: #ef4444;
   --status-resuming: #3b82f6;
   --status-skipped: #94a3b8;
+  --status-interrupted: #f59e0b;
   /* legacy */
   --status-in-progress: #3b82f6;
   --status-error: #ef4444;
@@ -714,7 +715,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .stage-node.status-in-progress .stage-icon {
   border-color: var(--status-in-progress);
-  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
 }
 
 .stage-node.status-completed .stage-icon {
@@ -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 {
@@ -1539,6 +1538,11 @@ sl-details.log-history-panel::part(content) {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 14px;
 }
+/* Worca Versions panels — 50% wider min column (200 → 300) to fit longer
+   version strings (e.g. RCs + local-repo dirty markers) without wrapping */
+.settings-grid--versions {
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
 
 .settings-switches {
   display: flex;
@@ -1648,8 +1652,8 @@ sl-details.log-history-panel::part(content) {
 
 .settings-dispatch-row {
   display: grid;
-  grid-template-columns: 120px 1fr;
-  align-items: center;
+  grid-template-columns: 120px 1fr auto;
+  align-items: start;
   gap: 12px;
 }
 
@@ -1658,6 +1662,97 @@ sl-details.log-history-panel::part(content) {
   font-weight: 500;
   color: var(--fg);
   text-transform: capitalize;
+  padding-top: 6px;
+}
+
+/* Tag input component */
+.dispatch-tag-input-wrapper {
+  position: relative;
+}
+
+.dispatch-tag-input {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  padding: 4px 8px;
+  border: 1px solid var(--sl-color-neutral-300);
+  border-radius: var(--sl-border-radius-medium);
+  min-height: 32px;
+  cursor: text;
+  background: var(--sl-color-neutral-0);
+}
+
+.dispatch-tag-input:focus-within {
+  border-color: var(--sl-color-primary-500);
+  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-primary-200);
+}
+
+.dispatch-tag-input-field {
+  border: none;
+  outline: none;
+  flex: 1;
+  min-width: 60px;
+  font-size: var(--sl-font-size-small);
+  background: transparent;
+  color: var(--fg);
+}
+
+.dispatch-suggestions {
+  position: absolute;
+  z-index: 100;
+  top: calc(100% + 2px);
+  left: 0;
+  right: 0;
+  background: var(--sl-color-neutral-0);
+  border: 1px solid var(--sl-color-neutral-200);
+  border-radius: var(--sl-border-radius-medium);
+  box-shadow: var(--sl-shadow-large);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dispatch-suggestions .item {
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: var(--sl-font-size-small);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dispatch-suggestions .item:hover,
+.dispatch-suggestions .item.active {
+  background: var(--sl-color-primary-50);
+}
+
+.dispatch-suggestions .item.denied {
+  opacity: 0.5;
+  text-decoration: line-through;
+  cursor: not-allowed;
+}
+
+.dispatch-suggestions .item-label {
+  font-size: 11px;
+  color: var(--sl-color-neutral-500);
+}
+
+.dispatch-suggestions .group-label {
+  padding: 4px 12px;
+  font-size: 11px;
+  color: var(--sl-color-neutral-500);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--sl-color-neutral-50);
+}
+
+.dispatch-reset-btn {
+  padding-top: 2px;
+}
+
+.dispatch-reset-placeholder {
+  width: 28px;
+  display: inline-block;
 }
 
 /* Permissions list */
@@ -1823,27 +1918,22 @@ sl-input.pricing-input::part(input) {
   color: var(--muted);
 }
 
-.iteration-trigger {
-  display: inline-flex;
+/* --- Iteration Tags Row (trigger, outcome, classification, subagents) --- */
+.iteration-tags-row {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  background: var(--bg-tertiary);
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 13px;
 }
 
-.iteration-outcome {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-weight: 500;
+.iteration-tags-sep {
+  color: var(--fg);
+  opacity: 0.7;
+  margin: 0 2px;
 }
 
-.iteration-outcome.success { color: var(--status-completed); }
-.iteration-outcome.failure { color: var(--status-error); }
-
 /* --- Agent Prompt Section --- */
 sl-details.agent-prompt-section {
   margin-top: 12px;
@@ -4143,3 +4233,289 @@ sl-tooltip.bead-tooltip::part(body) {
   text-overflow: ellipsis;
 }
 
+/* ─── Add Project / Worca Setup dialog shared styles ─────────────────── */
+.dialog-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  font-size: 0.85rem;
+  color: var(--sl-color-neutral-700);
+  margin-bottom: 0.5rem;
+}
+
+.dialog-meta-row .sep {
+  color: var(--sl-color-neutral-400);
+}
+
+.dialog-meta-row .spacer {
+  flex: 1;
+}
+
+.dialog-section-heading {
+  margin: 0.75rem 0 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--sl-color-neutral-900);
+}
+
+.dialog-list {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid var(--sl-color-neutral-200);
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+
+.dialog-list-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  min-height: 28px;
+}
+
+.dialog-list-row + .dialog-list-row {
+  border-top: 1px solid var(--sl-color-neutral-100);
+}
+
+.dialog-list-row.is-terminal .dialog-list-row-name {
+  opacity: 0.6;
+}
+
+.dialog-list-row-icon {
+  flex: 0 0 auto;
+  width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+
+.dialog-list-row-icon.is-success {
+  color: var(--sl-color-success-600);
+}
+
+.dialog-list-row-icon.is-failed {
+  color: var(--sl-color-danger-600);
+}
+
+.dialog-list-row-name {
+  flex: 0 0 auto;
+}
+
+.dialog-list-row-error {
+  color: var(--sl-color-danger-600);
+  font-size: 0.8rem;
+  margin-left: 0.25rem;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worca/ui",
-  "version": "0.8.1",
+  "version": "0.9.0-rc.1",
   "description": "Pipeline monitoring UI for worca-cc",
   "license": "MIT",
   "author": "Sinisha Djukic",