@worca/ui 0.2.0 → 0.3.1-rc.1

package/app/styles.css

@@ -528,6 +528,13 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 13px;
 }
 
+.run-template {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+
 .pipeline-cost-strip {
   display: flex;
   flex-wrap: wrap;
@@ -1247,6 +1254,15 @@ sl-details.log-history-panel::part(content) {
   font-variant-numeric: tabular-nums;
 }
 
+.run-card-template {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-left: 26px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
 .run-card-stages {
   display: flex;
   flex-wrap: wrap;
@@ -2249,6 +2265,43 @@ sl-details.live-output-panel::part(content) {
   font-weight: 500;
 }
 
+.new-run-section sl-select {
+  width: 100%;
+}
+
+/* Template group labels */
+.template-group-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 6px 12px 2px;
+}
+
+/* Indent grouped template options and bold the name */
+sl-option.template-grouped::part(base) {
+  padding-left: 24px;
+  flex-wrap: wrap;
+}
+
+sl-option.template-grouped::part(label) {
+  font-weight: 500;
+}
+
+/* Description wraps below name, aligned with label */
+sl-option.template-grouped::part(suffix) {
+  flex-basis: 100%;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 0 4px;
+}
+
 /* Plan file autocomplete */
 .plan-autocomplete {
   position: relative;
@@ -3937,3 +3990,120 @@ sl-details.learnings-panel::part(content) {
 .project-worca-version { font-size: 11px; color: var(--muted); font-family: var(--sl-font-mono); margin-top: 2px; }
 .project-worca-version--behind { color: var(--status-failed, #dc2626); }
 
+/* ─── Bead tooltip content ──────────────────────────────────────────── */
+.bead-tooltip-content {
+  max-width: 540px;
+  padding: 4px 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bead-tooltip-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+sl-tooltip.bead-tooltip::part(body) {
+  pointer-events: auto;
+}
+
+.bead-tooltip-badges {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.bead-tooltip-id {
+  font-family: var(--sl-font-mono);
+  font-size: 11px;
+  opacity: 0.7;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.bead-tooltip-separator {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 4px 0;
+}
+
+.bead-tooltip-label {
+  font-size: 11px;
+  opacity: 0.7;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.bead-tooltip-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.bead-tooltip-excerpt {
+  font-size: 12px;
+  white-space: pre-wrap;
+  margin-bottom: 2px;
+}
+
+.bead-tooltip-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 6px;
+}
+
+.bead-tooltip-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.15);
+  color: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.bead-tooltip-copy:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* ─── Graph node tooltip overlays ─────────────────────────────────── */
+.run-beads-graph {
+  position: relative;
+}
+
+.graph-tooltip-trigger {
+  position: absolute;
+  cursor: pointer;
+}
+
+.bead-chip-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-width: 240px;
+  padding: 2px 0;
+}
+
+.bead-chip-tooltip-id {
+  font-family: var(--sl-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bead-chip-tooltip-title {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+

package/package.json

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

package/server/process-manager.js

@@ -210,6 +210,9 @@ export class ProcessManager {
     if (opts.branch) {
       args.push('--branch', opts.branch);
     }
+    if (opts.template) {
+      args.push('--template', opts.template);
+    }
 
     const env = { ...process.env };
     delete env.CLAUDECODE;

package/server/project-routes.js

@@ -73,6 +73,9 @@ export function findRunStatusPath(worcaDir, runId) {
 
 /** Validate a branch name — alphanumeric, dots, hyphens, underscores, slashes */
 const BRANCH_RE = /^[\w.\-/]+$/;
+
+/** Validate a template identifier — lowercase alphanumeric and hyphens, 1-64 chars */
+const TEMPLATE_RE = /^[a-z0-9-]{1,64}$/;
 function validateBranch(branch) {
   return (
     typeof branch === 'string' && branch.length <= 200 && BRANCH_RE.test(branch)
@@ -472,8 +475,16 @@ export function createProjectScopedRoutes() {
   router.post('/runs', requireWorcaDir, async (req, res) => {
     const body = req.body || {};
 
-    let { sourceType, sourceValue, prompt, planFile, msize, mloops, branch } =
-      body;
+    let {
+      sourceType,
+      sourceValue,
+      prompt,
+      planFile,
+      msize,
+      mloops,
+      branch,
+      template,
+    } = body;
     if (body.inputType && sourceType === undefined) {
       if (body.inputType === 'prompt') {
         sourceType = 'none';
@@ -534,6 +545,15 @@ export function createProjectScopedRoutes() {
       }
     }
 
+    if (template !== undefined && template !== null) {
+      if (typeof template !== 'string' || !TEMPLATE_RE.test(template)) {
+        return res.status(400).json({
+          ok: false,
+          error: 'template must match ^[a-z0-9-]{1,64}$',
+        });
+      }
+    }
+
     const hasSource = sourceType !== 'none' && sourceValue;
     const hasPlan = typeof planFile === 'string' && planFile.trim().length > 0;
     const hasPrompt = typeof prompt === 'string' && prompt.length > 0;
@@ -561,6 +581,7 @@ export function createProjectScopedRoutes() {
         mloops: mloopsVal,
         planFile: hasPlan ? planFile.trim() : undefined,
         branch: branch || undefined,
+        template: template || undefined,
       });
       const { broadcast } = req.app.locals;
       if (broadcast) broadcast('run-started', { pid: result.pid });
@@ -1142,6 +1163,45 @@ export function createProjectScopedRoutes() {
     }
   });
 
+  // GET /api/projects/:projectId/templates — list available pipeline templates
+  router.get('/templates', (req, res) => {
+    const root = req.project.projectRoot;
+    const tiers = [
+      { tier: 'worca', dir: join(root, '.claude', 'worca', 'templates') },
+      { tier: 'project', dir: join(root, '.claude', 'templates') },
+      { tier: 'user', dir: join(homedir(), '.worca', 'templates') },
+    ];
+
+    const templates = [];
+    for (const { tier, dir } of tiers) {
+      if (!existsSync(dir)) continue;
+      let entries;
+      try {
+        entries = readdirSync(dir, { withFileTypes: true });
+      } catch {
+        continue;
+      }
+      for (const entry of entries) {
+        if (!entry.isDirectory()) continue;
+        const manifestPath = join(dir, entry.name, 'template.json');
+        if (!existsSync(manifestPath)) continue;
+        try {
+          const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+          templates.push({
+            id: manifest.id || entry.name,
+            name: manifest.name || entry.name,
+            description: manifest.description || '',
+            tier,
+          });
+        } catch {
+          /* skip malformed manifests */
+        }
+      }
+    }
+
+    res.json({ ok: true, templates });
+  });
+
   // GET /api/projects/:projectId/worca-status — check worca installation state
   router.get('/worca-status', (req, res) => {
     const installed = checkWorcaInstalled(req.project.projectRoot);

package/server/watcher.js

@@ -26,22 +26,9 @@ function isTerminal(status) {
   );
 }
 
-function isPipelineRunning(worcaDir) {
-  const pidPath = join(worcaDir, 'pipeline.pid');
-  if (!existsSync(pidPath)) return false;
-  try {
-    const pid = parseInt(readFileSync(pidPath, 'utf8').trim(), 10);
-    process.kill(pid, 0); // signal 0 = check if alive
-    return true;
-  } catch {
-    return false; // stale PID or unreadable
-  }
-}
-
 export function discoverRuns(worcaDir) {
   const runs = [];
   const seenIds = new Set();
-  const pipelineRunning = isPipelineRunning(worcaDir);
 
   // 1. Check active_run pointer for the current run
   const activeRunPath = join(worcaDir, 'active_run');
@@ -51,7 +38,8 @@ export function discoverRuns(worcaDir) {
       const candidate = join(worcaDir, 'runs', activeId, 'status.json');
       if (existsSync(candidate)) {
         const status = JSON.parse(readFileSync(candidate, 'utf8'));
-        const active = !isTerminal(status) && pipelineRunning;
+        const active =
+          !isTerminal(status) && status.pipeline_status === 'running';
         const id = createRunId(status);
         runs.push({ id, active, ...status });
         seenIds.add(id);
@@ -88,7 +76,8 @@ export function discoverRuns(worcaDir) {
       const status = JSON.parse(readFileSync(statusPath, 'utf8'));
       const id = createRunId(status);
       if (!seenIds.has(id)) {
-        const active = !isTerminal(status) && pipelineRunning;
+        const active =
+          !isTerminal(status) && status.pipeline_status === 'running';
         runs.push({ id, active, ...status });
         seenIds.add(id);
       }
@@ -142,7 +131,6 @@ export function discoverRuns(worcaDir) {
 export async function discoverRunsAsync(worcaDir) {
   const runs = [];
   const seenIds = new Set();
-  const pipelineRunning = isPipelineRunning(worcaDir); // cheap check (one stat + one kill)
 
   // 1. Active run
   const activeRunPath = join(worcaDir, 'active_run');
@@ -150,7 +138,7 @@ export async function discoverRunsAsync(worcaDir) {
     const activeId = (await readFile(activeRunPath, 'utf8')).trim();
     const candidate = join(worcaDir, 'runs', activeId, 'status.json');
     const status = JSON.parse(await readFile(candidate, 'utf8'));
-    const active = !isTerminal(status) && pipelineRunning;
+    const active = !isTerminal(status) && status.pipeline_status === 'running';
     const id = createRunId(status);
     runs.push({ id, active, ...status });
     seenIds.add(id);
@@ -191,7 +179,8 @@ export async function discoverRunsAsync(worcaDir) {
     );
     const id = createRunId(status);
     if (!seenIds.has(id)) {
-      const active = !isTerminal(status) && pipelineRunning;
+      const active =
+        !isTerminal(status) && status.pipeline_status === 'running';
       runs.push({ id, active, ...status });
       seenIds.add(id);
     }