@worca/ui 0.3.0 → 0.3.1-rc.2

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worca/ui",
-  "version": "0.3.0",
+  "version": "0.3.1-rc.2",
   "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);