@worca/ui 0.8.1 → 0.9.0

package/app/styles.css

@@ -714,7 +714,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 {
@@ -1539,6 +1539,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 +1653,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 +1663,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 +1919,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 +4234,87 @@ 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%;
+}
+

package/package.json

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

package/server/app.js

@@ -2,17 +2,21 @@
 
 import { execFileSync } from 'node:child_process';
 import { createHmac, randomUUID } from 'node:crypto';
-import { basename, dirname, join } from 'node:path';
+import { existsSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { basename, dirname, isAbsolute, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import express from 'express';
 
 import { dbExists, getIssue, listIssues } from './beads-reader.js';
 import { ProcessManager } from './process-manager.js';
+import { scanDirectory } from './project-registry.js';
 import {
   createProjectRoutes,
   createProjectScopedRoutes,
   projectResolver,
 } from './project-routes.js';
+import { discoverSubagents } from './subagents-discovery.js';
 import { getVersionInfo } from './versions.js';
 import { createInbox } from './webhook-inbox.js';
 
@@ -20,6 +24,9 @@ export function createApp(options = {}) {
   const app = express();
   const appDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'app');
   const { settingsPath, worcaDir, projectRoot, prefsDir } = options;
+  // subagentDirs is a test-injection seam; production calls omit it and we
+  // resolve from homedir() + projectRoot.
+  const subagentDirs = options.subagentDirs || null;
 
   app.use(express.json());
 
@@ -92,6 +99,31 @@ export function createApp(options = {}) {
 
   // ─── Unique routes (not in project-scoped router) ──────────────────────
 
+  // GET /api/subagents — list discoverable subagent types for the dispatch editor.
+  // Walks ~/.claude/agents/ (user-global), ~/.claude/plugins/cache/
+  // (plugin-cached), and the active project's .claude/agents/ (in single-project
+  // mode). Tests inject alternate dirs via createApp({ subagentDirs: {...} }).
+  app.get('/api/subagents', (_req, res) => {
+    try {
+      const userDir =
+        subagentDirs?.userDir ?? join(homedir(), '.claude', 'agents');
+      const pluginCacheDir =
+        subagentDirs?.pluginCacheDir ??
+        join(homedir(), '.claude', 'plugins', 'cache');
+      const projectAgentsDir =
+        subagentDirs?.projectAgentsDir ??
+        (projectRoot ? join(projectRoot, '.claude', 'agents') : undefined);
+      const subagents = discoverSubagents({
+        userDir,
+        pluginCacheDir,
+        projectAgentsDir,
+      });
+      res.json({ ok: true, subagents });
+    } catch (err) {
+      res.status(500).json({ ok: false, error: err.message });
+    }
+  });
+
   // GET /api/beads/issues
   app.get('/api/beads/issues', (_req, res) => {
     if (!worcaDir)
@@ -404,6 +436,30 @@ export function createApp(options = {}) {
     }
   });
 
+  // POST /api/scan-directory — scan parent folder for immediate git subdirectories
+  app.post('/api/scan-directory', async (req, res) => {
+    const { path: dirPath } = req.body || {};
+    if (!dirPath || typeof dirPath !== 'string') {
+      return res.status(400).json({ ok: false, error: 'path is required' });
+    }
+    if (!isAbsolute(dirPath)) {
+      return res
+        .status(400)
+        .json({ ok: false, error: 'path must be absolute' });
+    }
+    if (!existsSync(dirPath)) {
+      return res
+        .status(400)
+        .json({ ok: false, error: `directory does not exist: ${dirPath}` });
+    }
+    try {
+      const subfolders = await scanDirectory(dirPath);
+      res.json({ ok: true, subfolders });
+    } catch (err) {
+      res.status(500).json({ ok: false, error: err.message });
+    }
+  });
+
   // GET /api/versions — installed + registry version info
   app.get('/api/versions', async (req, res) => {
     const force = req.query.force === '1';
@@ -423,7 +479,7 @@ export function createApp(options = {}) {
     app.use(
       '/api/projects/:projectId',
       projectResolver({ prefsDir, projectRoot }),
-      createProjectScopedRoutes(),
+      createProjectScopedRoutes({ prefsDir }),
     );
   }
 

package/server/dispatch-events-aggregator.js

@@ -0,0 +1,161 @@
+/**
+ * Dispatch-event aggregator — reads pipeline.hook.dispatch_{allowed,blocked}
+ * events from a run's events.jsonl and assigns them to the matching iteration
+ * in status.json by timestamp range.
+ *
+ * Works for both live and completed runs because it reads only persisted data
+ * (events.jsonl is append-only and survives the pipeline process exiting).
+ *
+ * Aggregation: events are deduplicated per iteration by (type, subagent_type).
+ * A `count` field tracks how many times the same (type, subagent_type) fired
+ * in that iteration. The `reason` from the first occurrence is kept (reasons
+ * for the same key are deterministic — derived from the denylist/rule check).
+ *
+ * Output shape per iteration:
+ *   dispatch_events: [
+ *     { type, subagent_type, reason?, count }
+ *   ]
+ */
+
+import { existsSync, readFileSync } from 'node:fs';
+
+const DISPATCH_EVENT_TYPES = new Set([
+  'pipeline.hook.dispatch_allowed',
+  'pipeline.hook.dispatch_blocked',
+]);
+
+/**
+ * Parse events.jsonl and return only the dispatch events, with normalised shape.
+ * Malformed lines are silently skipped so a corrupt event doesn't break the run view.
+ *
+ * @param {string} eventsPath — absolute path to events.jsonl
+ * @returns {Array<{type, subagent_type, reason?, timestamp}>}
+ */
+export function readDispatchEventsFromJsonl(eventsPath) {
+  if (!eventsPath || !existsSync(eventsPath)) return [];
+  let content;
+  try {
+    content = readFileSync(eventsPath, 'utf8');
+  } catch {
+    return [];
+  }
+  const out = [];
+  for (const line of content.split('\n')) {
+    if (!line.trim()) continue;
+    let e;
+    try {
+      e = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    if (!DISPATCH_EVENT_TYPES.has(e.event_type)) continue;
+    const payload = e.payload || {};
+    if (!payload.subagent_type) continue;
+    out.push({
+      type: e.event_type,
+      subagent_type: payload.subagent_type,
+      reason: payload.reason,
+      timestamp: e.timestamp,
+    });
+  }
+  return out;
+}
+
+/**
+ * Given a list of dispatch events and a stages map from status.json, return
+ * a new stages map where each iteration that overlaps an event's timestamp
+ * is enriched with a `dispatch_events` array (deduplicated by type+subagent_type
+ * with a count).
+ *
+ * Non-destructive: input stages object is shallow-copied; iterations get new
+ * objects with the extra field. Existing iteration fields are preserved.
+ *
+ * @param {Array<{type, subagent_type, reason?, timestamp}>} events
+ * @param {object} stages — status.stages
+ * @returns {object} enriched stages
+ */
+export function assignEventsToIterations(events, stages) {
+  if (!stages || typeof stages !== 'object') return stages;
+  if (!events || events.length === 0) {
+    // Nothing to add — return input unchanged to avoid unnecessary allocation.
+    return stages;
+  }
+
+  // Bucket events into iterations first, then aggregate per bucket.
+  // Bucket key: `${stageKey}|${iterationNumber}`.
+  const buckets = new Map();
+
+  for (const ev of events) {
+    if (!ev.timestamp) continue;
+    const eventTime = Date.parse(ev.timestamp);
+    if (Number.isNaN(eventTime)) continue;
+
+    let matched = false;
+    for (const [stageKey, stage] of Object.entries(stages)) {
+      const iterations = stage?.iterations;
+      if (!Array.isArray(iterations)) continue;
+      for (const iter of iterations) {
+        const start = iter.started_at ? Date.parse(iter.started_at) : NaN;
+        if (Number.isNaN(start)) continue;
+        // If the iteration hasn't completed, treat end as +infinity so live events land here.
+        const end = iter.completed_at
+          ? Date.parse(iter.completed_at)
+          : Number.POSITIVE_INFINITY;
+        if (eventTime >= start && eventTime <= end) {
+          const key = `${stageKey}|${iter.number}`;
+          if (!buckets.has(key)) buckets.set(key, []);
+          buckets.get(key).push(ev);
+          matched = true;
+          break;
+        }
+      }
+      if (matched) break;
+    }
+    // If no iteration matched, the event is silently dropped — it falls
+    // outside any recorded iteration window (e.g. during stage transitions).
+  }
+
+  if (buckets.size === 0) return stages;
+
+  // Aggregate each bucket and build the enriched stages map.
+  const enrichedStages = { ...stages };
+  for (const [key, bucketEvents] of buckets) {
+    const [stageKey, iterNumStr] = key.split('|');
+    const iterNum = Number(iterNumStr);
+    const stage = enrichedStages[stageKey];
+    if (!stage) continue;
+    const aggregated = aggregate(bucketEvents);
+    const newIterations = stage.iterations.map((iter) =>
+      iter.number === iterNum ? { ...iter, dispatch_events: aggregated } : iter,
+    );
+    enrichedStages[stageKey] = { ...stage, iterations: newIterations };
+  }
+  return enrichedStages;
+}
+
+/**
+ * Deduplicate an array of dispatch events by (type, subagent_type) and count
+ * occurrences. First reason wins for blocked events.
+ *
+ * @param {Array<{type, subagent_type, reason?}>} events
+ * @returns {Array<{type, subagent_type, reason?, count}>}
+ */
+function aggregate(events) {
+  const map = new Map();
+  for (const ev of events) {
+    const key = `${ev.type}|${ev.subagent_type}`;
+    const existing = map.get(key);
+    if (existing) {
+      existing.count += 1;
+    } else {
+      const entry = {
+        type: ev.type,
+        subagent_type: ev.subagent_type,
+        count: 1,
+      };
+      if (ev.reason) entry.reason = ev.reason;
+      map.set(key, entry);
+    }
+  }
+  return [...map.values()];
+}

package/server/project-registry.js

@@ -10,7 +10,9 @@ import {
   unlinkSync,
   writeFileSync,
 } from 'node:fs';
+import { readdir } from 'node:fs/promises';
 import { basename, isAbsolute, join } from 'node:path';
+import { checkWorcaInstalled, readProjectWorcaVersion } from './worca-setup.js';
 
 export const SLUG_RE = /^[a-z0-9_-]{1,64}$/i;
 const DEFAULT_MAX_PROJECTS = 20;
@@ -24,6 +26,7 @@ export function slugify(name) {
     .toLowerCase()
     .replace(/[^a-z0-9_-]/g, '-')
     .replace(/-{2,}/g, '-')
+    .replace(/^-+|-+$/g, '')
     .slice(0, 64);
 }
 
@@ -130,6 +133,40 @@ export function synthesizeDefaultProject(projectRoot) {
   };
 }
 
+const SCAN_MAX_RESULTS = 200;
+
+/**
+ * Scan a directory for immediate child folders that contain a .git subdirectory.
+ * Skips dotfiles (names starting with ".") and "node_modules".
+ * Returns entries sorted alphabetically by name, capped at SCAN_MAX_RESULTS.
+ *
+ * @param {string} dirPath - Absolute path to the parent directory
+ * @returns {Promise<{ name: string, path: string }[]>}
+ */
+export async function scanDirectory(dirPath) {
+  const entries = await readdir(dirPath, { withFileTypes: true });
+  const results = [];
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    if (entry.name.startsWith('.') || entry.name === 'node_modules') continue;
+    const childPath = join(dirPath, entry.name);
+    if (existsSync(join(childPath, '.git'))) {
+      const installed = checkWorcaInstalled(childPath);
+      const worcaVersion = installed
+        ? readProjectWorcaVersion(childPath)
+        : null;
+      results.push({
+        name: entry.name,
+        path: childPath,
+        installed,
+        worcaVersion,
+      });
+      if (results.length >= SCAN_MAX_RESULTS) break;
+    }
+  }
+  return results.sort((a, b) => a.name.localeCompare(b.name));
+}
+
 /**
  * Read max projects from {prefsDir}/config.json. Defaults to 20.
  */