@worca/ui 0.26.0 → 0.28.0-rc.1

package/app/styles.css

@@ -1928,6 +1928,25 @@ sl-input [slot="prefix"] {
   cursor: not-allowed;
 }
 
+.dispatch-suggestions .item.warn {
+  background: var(--sl-color-warning-50);
+  border-left: 3px solid var(--sl-color-warning-300);
+  padding-left: 9px;
+}
+
+.dispatch-suggestions .item.warn:hover,
+.dispatch-suggestions .item.warn.active {
+  background: var(--sl-color-warning-100);
+}
+
+.dispatch-suggestions .item-hint {
+  font-size: var(--sl-font-size-x-small);
+  color: var(--sl-color-warning-700);
+  margin-left: auto;
+  padding-left: 6px;
+  font-style: italic;
+}
+
 .dispatch-suggestions .item-label {
   font-size: 11px;
   color: var(--sl-color-neutral-500);
@@ -1951,6 +1970,128 @@ sl-input [slot="prefix"] {
   display: inline-block;
 }
 
+/* Dispatch chip variants */
+.dispatch-chip-wildcard {
+  --sl-color-neutral-200: var(--sl-color-primary-200);
+  background: var(--sl-color-primary-100);
+  font-weight: 600;
+}
+
+.dispatch-chip-locked {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+/* Auto-included meta-tool chips (Skill, Agent) — locked but not crossed-out;
+ * the line-through reads as "blocked", but these are present-and-required. */
+.dispatch-chip-auto {
+  text-decoration: none;
+  opacity: 0.75;
+  font-style: italic;
+  border-style: dashed;
+}
+
+.dispatch-chip-auto::part(base) {
+  border-style: dashed;
+}
+
+/* Lockdown placeholder — semantically distinct from a real chip. */
+.dispatch-chip-lockdown {
+  text-decoration: none;
+  opacity: 0.7;
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 10px;
+}
+
+.dispatch-chip-warn {
+  --sl-color-neutral-200: var(--sl-color-warning-200);
+  background: var(--sl-color-warning-100);
+}
+
+/* Dispatch section layout */
+.dispatch-section {
+  margin-bottom: 16px;
+}
+
+.dispatch-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 12px 0 4px;
+}
+
+.dispatch-section-hint {
+  font-size: 12px;
+  color: var(--sl-color-neutral-600);
+  line-height: 1.4;
+  margin: 0 0 8px;
+  max-width: 720px;
+}
+
+sl-alert.dispatch-wildcard-deny-warning {
+  margin: 0 0 12px;
+  font-size: 12px;
+  max-width: 720px;
+}
+
+sl-alert.dispatch-wildcard-deny-warning code {
+  font-size: 12px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: var(--sl-color-neutral-100);
+}
+
+/* Collapsible wrapper for each dispatch section in the Governance tab.
+ * Mirrors .model-env-details so users get a consistent collapse pattern. */
+sl-details.dispatch-section-details {
+  margin-bottom: 0.5rem;
+}
+
+sl-details.dispatch-section-details::part(base) {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+sl-details.dispatch-section-details::part(header) {
+  padding: 0.4rem 0.5rem;
+  border-radius: 6px;
+}
+
+sl-details.dispatch-section-details::part(header):hover {
+  background: var(--hover, rgba(0, 0, 0, 0.04));
+}
+
+sl-details.dispatch-section-details::part(content) {
+  padding: 0.25rem 0 0.5rem;
+}
+
+.dispatch-section-details-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 0.75rem;
+}
+
+.dispatch-tier {
+  margin-bottom: 12px;
+}
+
+.dispatch-tier-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sl-color-neutral-600);
+  margin-bottom: 4px;
+}
+
+.dispatch-tier-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
 /* Permissions list */
 .settings-permissions {
   display: flex;
@@ -2031,7 +2172,7 @@ sl-input [slot="prefix"] {
 
 .pricing-model-name {
   font-weight: 500;
-  text-transform: capitalize;
+  text-transform: uppercase;
 }
 
 .pricing-table sl-input {
@@ -2130,6 +2271,95 @@ sl-input.pricing-input::part(input) {
   margin: 0 2px;
 }
 
+/* PR B — wider subagent fanout under wildcard defaults. The badge row needs
+ * to wrap gracefully when an iteration dispatches 5+ distinct subagents.
+ * Inherits flex-wrap from .iteration-tags-row; adds a small visual cue so
+ * wildcard dispatches read differently from explicit ones. */
+/* One row with both sections: "Skills: <badges>  Subagents: <badges>".
+ * row-gap covers the case where chips wrap to a second line; column-gap
+ * spaces the two section groups apart so the eye finds the boundary. */
+.dispatch-events-row {
+  row-gap: 4px;
+  column-gap: 16px;
+}
+
+.dispatch-badge::part(base) {
+  font-variant-numeric: tabular-nums;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* CircleCheck (allowed) / X (blocked) glyph sits inline before the badge
+ * label, with the badge's own foreground colour. */
+.dispatch-badge-icon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+.dispatch-badge-icon svg {
+  display: block;
+}
+
+.dispatch-events-section {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Empty-section placeholder: keeps the label visible so layout stays
+ * stable across iterations. Muted on purpose — explicit absence. */
+.dispatch-events-empty {
+  font-size: 12px;
+  color: var(--sl-color-neutral-500);
+}
+
+.meta-value-muted {
+  color: var(--sl-color-neutral-500);
+}
+
+/* Overflow control: when an iteration dispatches more than _DISPATCH_VISIBLE_LIMIT
+ * candidates (typical under PR B's wildcard default), the tail goes inside a
+ * compact sl-details. */
+sl-details.dispatch-events-overflow {
+  display: inline-block;
+}
+
+sl-details.dispatch-events-overflow::part(base) {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+sl-details.dispatch-events-overflow::part(header) {
+  padding: 0 0.4rem;
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--sl-color-neutral-700);
+}
+
+sl-details.dispatch-events-overflow::part(header):hover {
+  background: var(--hover, rgba(0, 0, 0, 0.04));
+}
+
+sl-details.dispatch-events-overflow::part(content) {
+  padding: 0.25rem 0 0;
+}
+
+.dispatch-events-overflow-summary {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.dispatch-events-overflow-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
 /* --- Agent Prompt Section --- */
 sl-details.agent-prompt-section {
   margin-top: 12px;
@@ -5084,6 +5314,56 @@ sl-tooltip.bead-tooltip::part(body) {
   border-color: var(--status-failed, #ef4444);
 }
 
+.rename-model-input.is-invalid::part(base) {
+  border-color: var(--status-failed, #ef4444);
+}
+
+.rename-model-error {
+  color: var(--status-failed, #ef4444);
+  font-size: 12px;
+  margin: 0.4rem 0 0;
+}
+
+.model-env-details::part(base) {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.model-env-details::part(header) {
+  padding: 0.25rem 0.4rem;
+  border-radius: 6px;
+}
+
+.model-env-details::part(header):hover {
+  background: var(--hover, rgba(0, 0, 0, 0.04));
+}
+
+.model-env-details::part(content) {
+  padding: 0.5rem 0 0;
+}
+
+.model-env-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 0.75rem;
+}
+
+.model-env-invalid-chip {
+  color: var(--status-failed, #ef4444);
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.model-env-details.has-invalid::part(header) {
+  border-left: 3px solid var(--status-failed, #ef4444);
+  padding-left: 0.5rem;
+}
+
 .model-env-value::part(input) {
   font-size: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worca/ui",
-  "version": "0.26.0",
+  "version": "0.28.0-rc.1",
   "description": "Pipeline monitoring UI for worca-cc",
   "license": "MIT",
   "author": "Sinisha Djukic",
@@ -26,6 +26,8 @@
     "server/**/*.js",
     "server/schemas/keys.json",
     "server/reserved-env-keys.json",
+    "server/known-tools.json",
+    "server/known-skills.json",
     "!server/**/*.test.js",
     "!server/test/**",
     "!server/**/test/**",

package/server/app.js

@@ -1,6 +1,6 @@
 // server/app.js
 
-import { execFileSync, spawn } from 'node:child_process';
+import { execFile, execFileSync, spawn } from 'node:child_process';
 import { createHmac, randomUUID } from 'node:crypto';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { homedir } from 'node:os';
@@ -183,6 +183,52 @@ export function createApp(options = {}) {
     }
   });
 
+  // GET /api/tools — static known-tools list for autocomplete.
+  const knownToolsPath = join(
+    dirname(fileURLToPath(import.meta.url)),
+    'known-tools.json',
+  );
+  const knownTools = JSON.parse(readFileSync(knownToolsPath, 'utf8'));
+
+  app.get('/api/tools', (_req, res) => {
+    res.json({ ok: true, tools: knownTools });
+  });
+
+  // GET /api/skills — try `claude --list-skills --json`, fallback to static list.
+  const knownSkillsPath = join(
+    dirname(fileURLToPath(import.meta.url)),
+    'known-skills.json',
+  );
+  const knownSkills = JSON.parse(readFileSync(knownSkillsPath, 'utf8'));
+
+  app.get('/api/skills', (_req, res) => {
+    execFile(
+      'claude',
+      ['--list-skills', '--json'],
+      { timeout: 5000 },
+      (err, stdout) => {
+        if (!err && stdout) {
+          try {
+            const parsed = JSON.parse(stdout);
+            const skills = Array.isArray(parsed)
+              ? parsed.map((s) => ({
+                  name: typeof s === 'string' ? s : s.name,
+                  group:
+                    typeof s === 'string'
+                      ? 'Discovered'
+                      : s.group || 'Discovered',
+                }))
+              : knownSkills;
+            return res.json({ ok: true, skills, source: 'live' });
+          } catch {
+            // JSON parse failed — fall through to fallback
+          }
+        }
+        res.json({ ok: true, skills: knownSkills, source: 'fallback' });
+      },
+    );
+  });
+
   // GET /api/beads/issues
   app.get('/api/beads/issues', (_req, res) => {
     if (!worcaDir)

package/server/beads-reader.js

@@ -59,14 +59,21 @@ export async function listIssues(beadsDb) {
 }
 
 export async function listIssuesByLabel(beadsDb, label) {
-  try {
+  const attempt = async () => {
     const issues = await runBd(
       ['list', '--label-any', label, '--all', '--limit', '0'],
       beadsDb,
     );
     return await enrichWithDeps(issues, beadsDb);
+  };
+  try {
+    return await attempt();
   } catch {
-    return [];
+    // bd/SQLite contention during active runs is usually sub-second — one
+    // retry covers the observed window. If it still fails, propagate so the
+    // WS handler can return an error rather than masquerading as "no beads."
+    await new Promise((r) => setTimeout(r, 150));
+    return await attempt();
   }
 }
 

package/server/dispatch-defaults.js

@@ -0,0 +1,81 @@
+/**
+ * Dispatch governance defaults — JS mirror of Python _DISPATCH_DEFAULTS
+ * in src/worca/hooks/tracking.py.
+ *
+ * Single source of truth for the JS side; used by dispatch-migration.js
+ * and the settings editor.
+ */
+
+export const DISPATCH_DEFAULTS = {
+  tools: {
+    always_disallowed: ['EnterPlanMode', 'EnterWorktree', 'TodoWrite'],
+    default_denied: [],
+    per_agent_allow: { _defaults: ['*'] },
+  },
+  skills: {
+    always_disallowed: [
+      'batch',
+      'fewer-permission-prompts',
+      'loop',
+      'schedule',
+      'worca-*',
+      'update-config',
+      'hookify:hookify',
+      'hookify:configure',
+      'hookify:list',
+      'hookify:writing-rules',
+      'init',
+    ],
+    default_denied: [
+      'claude-api',
+      'debug',
+      'review',
+      'security-review',
+      'simplify',
+      'feature-dev:feature-dev',
+      'claude-md-management:revise-claude-md',
+      'claude-md-management:claude-md-improver',
+    ],
+    per_agent_allow: {
+      _defaults: ['*'],
+      implementer: ['*', 'simplify', 'claude-api'],
+      tester: ['*', 'debug'],
+      reviewer: ['*', 'review', 'security-review'],
+      learner: [
+        '*',
+        'claude-md-management:revise-claude-md',
+        'claude-md-management:claude-md-improver',
+      ],
+    },
+  },
+  subagents: {
+    always_disallowed: ['general-purpose'],
+    default_denied: [],
+    per_agent_allow: { _defaults: ['*'] },
+  },
+};
+
+/**
+ * Check if candidate matches any pattern in the list.
+ *
+ * Supported: exact match, trailing-* prefix glob, bare '*' (matches all).
+ * JS port of Python _matches_any() in src/worca/hooks/tracking.py (§11).
+ *
+ * @param {string} candidate
+ * @param {string[]} patterns
+ * @returns {boolean}
+ */
+export function matchesAny(candidate, patterns) {
+  for (const pattern of patterns) {
+    if (pattern === candidate) return true;
+    if (pattern === '*') return true;
+    if (
+      pattern.endsWith('*') &&
+      pattern.length > 1 &&
+      candidate.startsWith(pattern.slice(0, -1))
+    ) {
+      return true;
+    }
+  }
+  return false;
+}

package/server/dispatch-events-aggregator.js

@@ -6,14 +6,14 @@
  * 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).
+ * Aggregation: events are deduplicated per iteration by (type, section, candidate).
+ * A `count` field tracks how many times the same key 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 }
+ *     { type, section, candidate, via?, reason?, count }
  *   ]
  */
 
@@ -29,7 +29,7 @@ const DISPATCH_EVENT_TYPES = new Set([
  * 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}>}
+ * @returns {Array<{type, section, candidate, via?, reason?, timestamp}>}
  */
 export function readDispatchEventsFromJsonl(eventsPath) {
   if (!eventsPath || !existsSync(eventsPath)) return [];
@@ -50,13 +50,17 @@ export function readDispatchEventsFromJsonl(eventsPath) {
     }
     if (!DISPATCH_EVENT_TYPES.has(e.event_type)) continue;
     const payload = e.payload || {};
-    if (!payload.subagent_type) continue;
-    out.push({
+    const candidate = payload.candidate;
+    if (!candidate) continue;
+    const entry = {
       type: e.event_type,
-      subagent_type: payload.subagent_type,
-      reason: payload.reason,
+      section: payload.section || 'subagents',
+      candidate,
       timestamp: e.timestamp,
-    });
+    };
+    if (payload.reason) entry.reason = payload.reason;
+    if (payload.via) entry.via = payload.via;
+    out.push(entry);
   }
   return out;
 }
@@ -64,13 +68,13 @@ export function readDispatchEventsFromJsonl(eventsPath) {
 /**
  * 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
+ * is enriched with a `dispatch_events` array (deduplicated by type+section+candidate
  * 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 {Array<{type, section, candidate, via?, reason?, timestamp}>} events
  * @param {object} stages — status.stages
  * @returns {object} enriched stages
  */
@@ -134,26 +138,28 @@ export function assignEventsToIterations(events, stages) {
 }
 
 /**
- * Deduplicate an array of dispatch events by (type, subagent_type) and count
- * occurrences. First reason wins for blocked events.
+ * Deduplicate an array of dispatch events by (type, section, candidate) and
+ * count occurrences. First reason wins for blocked events.
  *
- * @param {Array<{type, subagent_type, reason?}>} events
- * @returns {Array<{type, subagent_type, reason?, count}>}
+ * @param {Array<{type, section, candidate, via?, reason?}>} events
+ * @returns {Array<{type, section, candidate, via?, reason?, count}>}
  */
 function aggregate(events) {
   const map = new Map();
   for (const ev of events) {
-    const key = `${ev.type}|${ev.subagent_type}`;
+    const key = `${ev.type}|${ev.section}|${ev.candidate}`;
     const existing = map.get(key);
     if (existing) {
       existing.count += 1;
     } else {
       const entry = {
         type: ev.type,
-        subagent_type: ev.subagent_type,
+        section: ev.section,
+        candidate: ev.candidate,
         count: 1,
       };
       if (ev.reason) entry.reason = ev.reason;
+      if (ev.via) entry.via = ev.via;
       map.set(key, entry);
     }
   }