@worca/ui 0.8.1-rc.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;
@@ -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 {
@@ -4318,3 +4317,205 @@ sl-tooltip.bead-tooltip::part(body) {
   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-rc.1",
+  "version": "0.9.0-rc.1",
   "description": "Pipeline monitoring UI for worca-cc",
   "license": "MIT",
   "author": "Sinisha Djukic",

package/server/app.js

@@ -2,13 +2,15 @@
 
 import { execFileSync } from 'node:child_process';
 import { createHmac, randomUUID } from 'node:crypto';
-import { existsSync } from 'node:fs';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } 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 { RAW_BODY } from './integrations/index.js';
+import { verify } from './integrations/verify.js';
 import { ProcessManager } from './process-manager.js';
 import { scanDirectory } from './project-registry.js';
 import {
@@ -16,6 +18,7 @@ import {
   createProjectScopedRoutes,
   projectResolver,
 } from './project-routes.js';
+import { validateIntegrationsConfig } from './settings-validator.js';
 import { discoverSubagents } from './subagents-discovery.js';
 import { getVersionInfo } from './versions.js';
 import { createInbox } from './webhook-inbox.js';
@@ -23,12 +26,25 @@ import { createInbox } from './webhook-inbox.js';
 export function createApp(options = {}) {
   const app = express();
   const appDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'app');
-  const { settingsPath, worcaDir, projectRoot, prefsDir } = options;
+  const {
+    settingsPath,
+    worcaDir,
+    projectRoot,
+    prefsDir,
+    serverHost,
+    serverPort,
+  } = 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());
+  app.use(
+    express.json({
+      verify: (req, _res, buf) => {
+        req.rawBody = buf;
+      },
+    }),
+  );
 
   // ─── Security headers ──────────────────────────────────────────────────
   app.use((_req, res, next) => {
@@ -94,7 +110,7 @@ export function createApp(options = {}) {
       };
       next();
     },
-    createProjectScopedRoutes(),
+    createProjectScopedRoutes({ serverHost, serverPort }),
   );
 
   // ─── Unique routes (not in project-scoped router) ──────────────────────
@@ -282,6 +298,16 @@ export function createApp(options = {}) {
 
   // POST /api/webhooks/inbox — receive webhook events
   app.post('/api/webhooks/inbox', (req, res) => {
+    const integrations = app.locals.integrations;
+    if (integrations?.strictInboxVerification) {
+      const ok = verify(
+        req.rawBody || Buffer.alloc(0),
+        req.headers['x-worca-signature'],
+        integrations.secrets || [],
+      );
+      if (!ok)
+        return res.status(401).json({ ok: false, error: 'invalid signature' });
+    }
     const headers = {
       'x-worca-event': req.headers['x-worca-event'] || '',
       'x-worca-delivery': req.headers['x-worca-delivery'] || '',
@@ -298,9 +324,11 @@ export function createApp(options = {}) {
       envelope: req.body || {},
       projectId,
     });
+    if (req.rawBody) stored[RAW_BODY] = req.rawBody;
     if (app.locals.broadcast) {
       app.locals.broadcast('webhook-inbox-event', stored);
     }
+    app.locals.integrations?.onEvent(stored);
     res.json({ control: { action: webhookInbox.getControlAction() } });
   });
 
@@ -332,6 +360,16 @@ export function createApp(options = {}) {
 
   // PUT /api/webhooks/inbox/control — set control action
   app.put('/api/webhooks/inbox/control', (req, res) => {
+    const integrations = app.locals.integrations;
+    if (integrations?.strictInboxVerification) {
+      const ok = verify(
+        req.rawBody || Buffer.alloc(0),
+        req.headers['x-worca-signature'],
+        integrations.secrets || [],
+      );
+      if (!ok)
+        return res.status(401).json({ ok: false, error: 'invalid signature' });
+    }
     const { action } = req.body || {};
     if (!['continue', 'pause', 'abort'].includes(action)) {
       return res.status(400).json({
@@ -475,14 +513,255 @@ export function createApp(options = {}) {
 
   // ─── Multi-project routes ──────────────────────────────────────────────
   if (prefsDir) {
-    app.use('/api/projects', createProjectRoutes({ prefsDir, projectRoot }));
+    app.use(
+      '/api/projects',
+      createProjectRoutes({ prefsDir, projectRoot, serverHost, serverPort }),
+    );
     app.use(
       '/api/projects/:projectId',
       projectResolver({ prefsDir, projectRoot }),
-      createProjectScopedRoutes({ prefsDir }),
+      createProjectScopedRoutes({ prefsDir, serverHost, serverPort }),
     );
   }
 
+  // POST /api/integrations/telegram/detect — find chat IDs from recent messages.
+  // If the Telegram adapter is running, temporarily pauses its poll loop so
+  // getUpdates returns results instead of being consumed by the long-poller.
+  app.post('/api/integrations/telegram/detect', async (req, res) => {
+    let token = req.body?.token;
+    if (!token) {
+      try {
+        const cfgRaw = readFileSync(
+          join(prefsDir, 'integrations', 'config.json'),
+          'utf8',
+        );
+        token = JSON.parse(cfgRaw).telegram?.bot_token;
+      } catch {
+        /* no config */
+      }
+    }
+    if (!token) token = process.env.TELEGRAM_BOT_TOKEN;
+    if (!token) {
+      return res.status(400).json({ error: 'No bot token provided' });
+    }
+
+    // Pause the running adapter so getUpdates isn't consumed by the poll loop
+    const integrations = app.locals.integrations;
+    const adapterEntry = integrations?._getAdapter?.('telegram');
+    let wasStopped = false;
+    if (adapterEntry) {
+      try {
+        await adapterEntry.adapter.stop();
+        wasStopped = true;
+        // Brief delay to let the in-flight long-poll request complete
+        await new Promise((r) => setTimeout(r, 200));
+      } catch {
+        /* ignore */
+      }
+    }
+
+    try {
+      const meRes = await fetch(`https://api.telegram.org/bot${token}/getMe`);
+      const me = await meRes.json();
+      const botUsername = me.ok ? me.result.username : null;
+
+      const updRes = await fetch(
+        `https://api.telegram.org/bot${token}/getUpdates?timeout=0&limit=20`,
+      );
+      const upd = await updRes.json();
+
+      const chats = [];
+      if (upd.ok) {
+        for (const u of upd.result) {
+          const msg = u.message;
+          if (msg?.chat?.id) {
+            const existing = chats.find((c) => c.id === msg.chat.id);
+            if (!existing) {
+              chats.push({
+                id: msg.chat.id,
+                type: msg.chat.type,
+                title:
+                  msg.chat.title || msg.chat.first_name || String(msg.chat.id),
+              });
+            }
+          }
+        }
+      }
+
+      res.json({ ok: true, botUsername, chats });
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    } finally {
+      // Restart the adapter if we paused it
+      if (wasStopped && adapterEntry) {
+        adapterEntry.adapter.start().catch(() => {});
+      }
+    }
+  });
+
+  // GET /api/integrations/status — adapter states, chat states, counters
+  app.get('/api/integrations/status', (_req, res) => {
+    const integrations = app.locals.integrations;
+    if (!integrations) return res.json({ enabled: false });
+    res.json(integrations.status());
+  });
+
+  // GET /api/integrations/config — return saved config (secrets redacted)
+  app.get('/api/integrations/config', (_req, res) => {
+    const configPath = join(prefsDir, 'integrations', 'config.json');
+    let cfg;
+    try {
+      cfg = JSON.parse(readFileSync(configPath, 'utf8'));
+    } catch {
+      return res.json({});
+    }
+    res.json(cfg);
+  });
+
+  // DELETE /api/integrations/config/:adapter — remove an adapter
+  // PATCH /api/integrations/config/:adapter/enabled — toggle adapter on/off
+  app.patch('/api/integrations/config/:adapter/enabled', async (req, res) => {
+    const { adapter } = req.params;
+    const { enabled } = req.body;
+    if (typeof enabled !== 'boolean') {
+      return res.status(400).json({ error: 'enabled must be a boolean' });
+    }
+    const adapterKeys = ['telegram', 'discord', 'slack'];
+    if (!adapterKeys.includes(adapter)) {
+      return res.status(400).json({ error: `Invalid adapter: ${adapter}` });
+    }
+    const configPath = join(prefsDir, 'integrations', 'config.json');
+    let cfg;
+    try {
+      cfg = JSON.parse(readFileSync(configPath, 'utf8'));
+    } catch {
+      return res.status(404).json({ error: 'No integrations config' });
+    }
+    if (!cfg[adapter]) {
+      return res
+        .status(404)
+        .json({ error: `Adapter ${adapter} not configured` });
+    }
+    cfg[adapter].enabled = enabled;
+    writeFileSync(configPath, `${JSON.stringify(cfg, null, 2)}\n`);
+
+    // Hot-reload: if disabling, remove the adapter; if enabling, reload it
+    if (app.locals.ensureIntegrations) app.locals.ensureIntegrations();
+    if (enabled) {
+      if (app.locals.integrations?.reloadAdapter) {
+        await app.locals.integrations.reloadAdapter(adapter);
+      }
+    } else {
+      if (app.locals.integrations?.removeAdapter) {
+        await app.locals.integrations.removeAdapter(adapter);
+      }
+    }
+    res.json({ ok: true, enabled });
+  });
+
+  app.delete('/api/integrations/config/:adapter', async (req, res) => {
+    const { adapter } = req.params;
+    const adapterKeys = ['telegram', 'discord', 'slack'];
+    if (!adapterKeys.includes(adapter)) {
+      return res.status(400).json({ error: `Invalid adapter: ${adapter}` });
+    }
+    const configDir = join(prefsDir, 'integrations');
+    const configPath = join(configDir, 'config.json');
+    let cfg;
+    try {
+      cfg = JSON.parse(readFileSync(configPath, 'utf8'));
+    } catch {
+      return res.json({ ok: true });
+    }
+    delete cfg[adapter];
+    const hasAdapters = adapterKeys.some((k) => cfg[k]?.enabled);
+    if (!hasAdapters) cfg.enabled = false;
+    try {
+      writeFileSync(configPath, `${JSON.stringify(cfg, null, 2)}\n`);
+    } catch (err) {
+      return res
+        .status(500)
+        .json({ error: `Failed to write config: ${err.message}` });
+    }
+    if (app.locals.integrations?.removeAdapter) {
+      await app.locals.integrations.removeAdapter(adapter);
+    }
+    res.json({ ok: true });
+  });
+
+  // POST /api/integrations/config — save adapter config
+  const ADAPTER_SCHEMA = {
+    telegram: { tokenKey: 'bot_token', idKey: 'chat_id' },
+    discord: { tokenKey: 'bot_token', idKey: 'channel_id' },
+    slack: { tokenKey: 'webhook_url', idKey: 'chat_id' },
+  };
+
+  app.post('/api/integrations/config', async (req, res) => {
+    const { adapter, token, chatId, events } = req.body;
+    if (
+      !adapter ||
+      !token ||
+      !chatId ||
+      !Array.isArray(events) ||
+      events.length === 0
+    ) {
+      return res.status(400).json({
+        error: 'Missing required fields: adapter, token, chatId, events',
+      });
+    }
+    const schema = ADAPTER_SCHEMA[adapter];
+    if (!schema) {
+      return res.status(400).json({
+        error: `Invalid adapter: ${adapter}. Must be one of: ${Object.keys(ADAPTER_SCHEMA).join(', ')}`,
+      });
+    }
+
+    const configDir = join(prefsDir, 'integrations');
+    const configPath = join(configDir, 'config.json');
+
+    // Load existing config or start fresh
+    let cfg = { schema_version: 1, enabled: true };
+    try {
+      const raw = readFileSync(configPath, 'utf8');
+      cfg = JSON.parse(raw);
+    } catch {
+      /* start fresh */
+    }
+
+    // Build adapter block — store token directly in config
+    const adapterBlock = { enabled: true, events };
+    adapterBlock[schema.tokenKey] = token;
+    adapterBlock[schema.idKey] = chatId;
+
+    cfg[adapter] = adapterBlock;
+    cfg.enabled = true;
+    if (!cfg.schema_version) cfg.schema_version = 1;
+
+    const result = validateIntegrationsConfig(cfg);
+    if (!result.valid) {
+      return res
+        .status(400)
+        .json({ error: `Validation failed: ${result.details.join('; ')}` });
+    }
+
+    try {
+      mkdirSync(configDir, { recursive: true });
+      writeFileSync(configPath, `${JSON.stringify(cfg, null, 2)}\n`);
+    } catch (err) {
+      return res
+        .status(500)
+        .json({ error: `Failed to write config: ${err.message}` });
+    }
+
+    // Hot-reload just this adapter (no full restart)
+    if (app.locals.ensureIntegrations) app.locals.ensureIntegrations();
+    if (app.locals.integrations?.reloadAdapter) {
+      await app.locals.integrations.reloadAdapter(adapter);
+    }
+
+    res.json({ ok: true, path: configPath });
+  });
+
   // ─── Dynamic favicon ──────────────────────────────────────────────────
   // Serve mode-specific favicon before express.static so it takes precedence.
   app.get('/favicon.svg', (_req, res) => {

package/server/ensure-webhook.js

@@ -0,0 +1,66 @@
+// ensure-webhook.js — auto-configure a webhook pointing to this worca-ui instance
+// in a project's settings.local.json so the pipeline sends events to the UI.
+
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { localPathFor } from './settings-merge.js';
+
+/**
+ * Ensure a webhook entry exists in the project's settings.local.json
+ * pointing to the worca-ui inbox at the given host:port.
+ *
+ * Skips if a webhook for this host:port already exists.
+ * Creates settings.local.json if it doesn't exist.
+ *
+ * @param {string} projectPath — absolute path to the project root
+ * @param {{ host: string, port: number }} server — worca-ui server address
+ */
+export function ensureWebhookForUi(projectPath, { host, port }) {
+  const settingsPath = join(projectPath, '.claude', 'settings.json');
+  const localPath = localPathFor(settingsPath);
+  // Use localhost instead of 127.0.0.1 — the pipeline validator only allows
+  // https:// or http://localhost for security.
+  const displayHost =
+    host === '127.0.0.1' || host === '::1' ? 'localhost' : host;
+  const inboxUrl = `http://${displayHost}:${port}/api/webhooks/inbox`;
+
+  // Read existing local settings (or start fresh)
+  let local = {};
+  if (existsSync(localPath)) {
+    try {
+      local = JSON.parse(readFileSync(localPath, 'utf8'));
+    } catch {
+      local = {};
+    }
+  }
+
+  if (!local.worca) local.worca = {};
+  if (!Array.isArray(local.worca.webhooks)) local.worca.webhooks = [];
+
+  // Check if a webhook for this URL already exists
+  const exists = local.worca.webhooks.some((wh) => wh.url === inboxUrl);
+  if (exists) return false;
+
+  // Also check base settings.json (in case it was manually configured there)
+  try {
+    const base = JSON.parse(readFileSync(settingsPath, 'utf8'));
+    const baseWebhooks = base?.worca?.webhooks || [];
+    if (baseWebhooks.some((wh) => wh.url === inboxUrl)) return false;
+  } catch {
+    // no base settings — proceed
+  }
+
+  local.worca.webhooks.push({
+    url: inboxUrl,
+    events: ['pipeline.*'],
+  });
+
+  // Ensure events are enabled
+  if (!local.worca.events) local.worca.events = {};
+  if (local.worca.events.enabled === undefined) {
+    local.worca.events.enabled = true;
+  }
+
+  writeFileSync(localPath, `${JSON.stringify(local, null, 2)}\n`, 'utf8');
+  return true;
+}

package/server/index.js

@@ -4,6 +4,7 @@ import { createServer } from 'node:http';
 import { homedir, platform } from 'node:os';
 import { join } from 'node:path';
 import { createApp } from './app.js';
+import { createIntegrations } from './integrations/index.js';
 import { attachWsServer } from './ws.js';
 
 // Parse argv
@@ -57,6 +58,8 @@ const app = createApp({
   projectRoot,
   webhookInbox,
   prefsDir,
+  serverHost: host,
+  serverPort: port,
 });
 const server = createServer(app);
 
@@ -104,6 +107,25 @@ app.locals.broadcast = broadcast;
 app.locals.scheduleRefresh = scheduleRefresh;
 app.locals.resolveRunProject = resolveRunProject;
 
+// Boot chat integrations only in global mode — project-scoped instances skip
+// integrations to avoid duplicate Telegram long-poll connections on the same bot.
+if (isGlobal) {
+  const integrationsOpts = {
+    port,
+    host,
+    prefsDir,
+    configPath: join(prefsDir, 'integrations', 'config.json'),
+  };
+  app.locals.integrations = createIntegrations(integrationsOpts);
+  app.locals.ensureIntegrations = () => {
+    if (!app.locals.integrations?.reloadAdapter) {
+      app.locals.integrations = createIntegrations(integrationsOpts);
+    }
+  };
+} else {
+  console.log('[integrations] Skipped — integrations only run in global mode');
+}
+
 // ─── worca-cc version check (non-blocking) ─────────────────────────────
 checkWorcaVersion().then((result) => {
   app.locals.worcaVersion = result;