@worca/ui 0.29.0 → 0.31.0

package/app/styles.css

@@ -766,6 +766,13 @@ h1, h2, h3, h4, h5, h6 {
   to { transform: rotate(360deg); }
 }
 
+.effort-zap-icon {
+  width: 12px;
+  height: 12px;
+  vertical-align: -1px;
+  margin-right: 2px;
+}
+
 /* --- 13. Stage Connector --- */
 .stage-connector {
   width: 36px;
@@ -4779,9 +4786,9 @@ sl-details.learnings-panel::part(content) {
 
 .bead-tooltip-header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
 }
 
 sl-tooltip.bead-tooltip::part(body) {
@@ -4790,6 +4797,7 @@ sl-tooltip.bead-tooltip::part(body) {
 
 .bead-tooltip-badges {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
 }
@@ -6473,3 +6481,43 @@ sl-dialog.markdown-dialog::part(body) {
 .conflict-icon {
   color: var(--status-blocked);
 }
+
+/* Graphify cache location — selectable monospace path (W-053 cache relocation) */
+.graphify-codebox {
+  display: block;
+  margin: 0.25rem 0 0.75rem;
+  padding: 0.4rem 0.6rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85rem;
+  color: var(--fg);
+  word-break: break-all;
+  user-select: all;
+}
+
+/* A monospace value/command box with a copy button pinned to the right. */
+.graphify-copy-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0.25rem 0 0.75rem;
+}
+
+.graphify-copy-row .graphify-codebox {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+}
+
+/* Shown when the graphify CLI is missing/incompatible. */
+.graphify-not-installed {
+  margin: 0 0 0.75rem;
+}
+
+/* Caution color (action needed: install) on the message text only — not the
+   install-command code box, which keeps normal monospace styling. */
+.graphify-not-installed .settings-tab-description {
+  color: var(--status-paused);
+}

package/package.json

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

package/server/app.js

@@ -2,7 +2,13 @@
 
 import { execFile, execFileSync, spawn } from 'node:child_process';
 import { createHmac, randomUUID } from 'node:crypto';
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs';
 import { homedir } from 'node:os';
 import { basename, dirname, isAbsolute, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -10,13 +16,19 @@ import express from 'express';
 
 import { dbExists, getIssue, listIssues } from './beads-reader.js';
 import { createFleetRouter } from './fleet-routes.js';
+import {
+  _effectiveConfig,
+  clearRepoCache,
+  createGraphifyStatus,
+  snapshotDir,
+} from './graphify-status.js';
 import { RAW_BODY } from './integrations/index.js';
 import { verify } from './integrations/verify.js';
 import { LaunchLock } from './launch-lock.js';
 import { fleetRunsDir, workspaceRunsDir, workspacesDir } from './paths.js';
 import { createPreferencesRouter } from './preferences-routes.js';
 import { ProcessManager } from './process-manager.js';
-import { scanDirectory } from './project-registry.js';
+import { readProjects, scanDirectory } from './project-registry.js';
 import {
   createProjectRoutes,
   createProjectScopedRoutes,
@@ -994,6 +1006,154 @@ export function createApp(options = {}) {
     res.json({ ok: true, path: configPath });
   });
 
+  // ─── Graphify endpoints ──────────────────────────────────────────────
+  if (!app.locals.graphifyStatus) {
+    app.locals.graphifyStatus = createGraphifyStatus({});
+  }
+
+  // Resolve the graphify settings for a request. In single-project mode the
+  // server's own projectRoot/settingsPath are used. In global mode there is no
+  // fixed project, so the selected project is passed as ?project=<id> and we
+  // resolve its root + settings.json from the registry — otherwise the endpoint
+  // would be blind to every project and only ever see global settings.
+  function readGraphifySettings(projectId) {
+    const readJson = (p) => {
+      if (!p) return {};
+      try {
+        return JSON.parse(readFileSync(p, 'utf-8'));
+      } catch {
+        return {};
+      }
+    };
+    const globalSettingsPath = prefsDir
+      ? join(prefsDir, 'settings.json')
+      : settingsPath;
+
+    let projectSettingsPath = settingsPath;
+    let root = projectRoot || process.cwd();
+    if (projectId && prefsDir) {
+      const proj = readProjects(prefsDir).find((p) => p.name === projectId);
+      if (proj) {
+        projectSettingsPath =
+          proj.settingsPath || join(proj.path, '.claude', 'settings.json');
+        root = proj.path;
+      }
+    } else if (!projectSettingsPath && projectRoot) {
+      projectSettingsPath = join(projectRoot, '.claude', 'settings.json');
+    }
+
+    return {
+      globalSettings: readJson(globalSettingsPath),
+      projectSettings: readJson(projectSettingsPath),
+      root,
+    };
+  }
+
+  async function graphifyStatusPayload(projectId) {
+    const { globalSettings, projectSettings, root } =
+      readGraphifySettings(projectId);
+    const result = await app.locals.graphifyStatus.getStatus({
+      globalSettings,
+      projectSettings,
+      projectRoot: root,
+    });
+    return { ...result, building: Boolean(app.locals.graphifyBuilding) };
+  }
+
+  app.get('/api/graphify/status', async (req, res) => {
+    try {
+      res.json(await graphifyStatusPayload(req.query.project));
+    } catch (err) {
+      res.status(500).json({ ok: false, error: err.message });
+    }
+  });
+
+  app.post('/api/graphify/recheck', async (req, res) => {
+    try {
+      app.locals.graphifyStatus.invalidate();
+      res.json(await graphifyStatusPayload(req.query.project));
+    } catch (err) {
+      res.status(500).json({ ok: false, error: err.message });
+    }
+  });
+
+  // Build/refresh the current HEAD's cache snapshot (async, long-running).
+  // The lock + .complete publish discipline lives in run_graphify_preflight,
+  // so we drive it via a detached Python process and track a `building` flag
+  // the UI polls through /api/graphify/status.
+  app.post('/api/graphify/build', async (req, res) => {
+    try {
+      const { globalSettings, projectSettings, root } = readGraphifySettings(
+        req.query.project,
+      );
+      const effective = _effectiveConfig(globalSettings, projectSettings);
+      if (!effective.enabled) {
+        return res
+          .status(400)
+          .json({ ok: false, error: 'Graphify is not enabled' });
+      }
+      const detection = await app.locals.graphifyStatus.detect();
+      if (!detection.installed || !detection.compatible) {
+        return res.status(400).json({
+          ok: false,
+          error:
+            detection.error || 'Graphify is not installed or not compatible',
+        });
+      }
+      if (app.locals.graphifyBuilding) {
+        return res.json({ ok: true, status: 'building' });
+      }
+      // Fresh build for the current HEAD: clear its snapshot first.
+      const snap = snapshotDir(root);
+      if (snap) {
+        try {
+          rmSync(snap, { recursive: true, force: true });
+        } catch {}
+      }
+      app.locals.graphifyBuilding = true;
+      const child = spawn(
+        'python3',
+        [
+          '-c',
+          'from worca.scripts.graphify_preflight import run_graphify_preflight as r; r()',
+        ],
+        { cwd: root, stdio: 'ignore' },
+      );
+      const done = () => {
+        app.locals.graphifyBuilding = false;
+        app.locals.graphifyStatus.invalidate();
+      };
+      child.on('exit', done);
+      child.on('error', done);
+      res.json({ ok: true, status: 'building' });
+    } catch (err) {
+      app.locals.graphifyBuilding = false;
+      res.status(500).json({ ok: false, error: err.message });
+    }
+  });
+
+  // Clear ALL cached snapshots for this project's repo.
+  app.post('/api/graphify/clear', async (req, res) => {
+    try {
+      const { root } = readGraphifySettings(req.query.project);
+      const cleared = clearRepoCache(root);
+      app.locals.graphifyStatus.invalidate();
+      res.json({ ok: true, cleared });
+    } catch (err) {
+      res.status(500).json({ ok: false, error: err.message });
+    }
+  });
+
+  app.get('/api/graphify/graph.html', (req, res) => {
+    const { root } = readGraphifySettings(req.query.project);
+    const snap = snapshotDir(root);
+    const htmlPath = snap ? join(snap, 'graphify', 'graph.html') : null;
+    if (!htmlPath || !existsSync(htmlPath)) {
+      return res.status(404).json({ ok: false, error: 'graph.html not found' });
+    }
+    res.sendFile(htmlPath);
+  });
+
   // ─── Dynamic favicon ──────────────────────────────────────────────────
   // Serve mode-specific favicon before express.static so it takes precedence.
   app.get('/favicon.svg', (_req, res) => {

package/server/beads-reader.js

@@ -14,6 +14,13 @@ async function runBd(args, dbPath) {
   return JSON.parse(stdout);
 }
 
+export function extractEffortFromLabels(labels) {
+  if (!labels || labels.length === 0) return null;
+  const match = labels.find((l) => l.startsWith('worca-effort:'));
+  if (!match) return null;
+  return match.slice('worca-effort:'.length);
+}
+
 function transformIssue(issue, deps) {
   const depends_on = (deps || []).map((d) => d.id);
   const blocked_by = (deps || [])
@@ -29,17 +36,18 @@ function transformIssue(issue, deps) {
     external_ref: issue.external_ref || null,
     depends_on,
     blocked_by,
+    effort: extractEffortFromLabels(issue.labels),
   };
 }
 
 async function enrichWithDeps(issues, dbPath) {
-  const needDeps = issues.filter((i) => i.dependency_count > 0);
-  if (needDeps.length === 0) {
-    return issues.map((i) => transformIssue(i, []));
-  }
-  const detailed = await runBd(['show', ...needDeps.map((i) => i.id)], dbPath);
-  const depMap = new Map(detailed.map((d) => [d.id, d.dependencies || []]));
-  return issues.map((i) => transformIssue(i, depMap.get(i.id) || []));
+  if (issues.length === 0) return [];
+  const detailed = await runBd(['show', ...issues.map((i) => i.id)], dbPath);
+  const detailMap = new Map(detailed.map((d) => [d.id, d]));
+  return issues.map((i) => {
+    const d = detailMap.get(i.id);
+    return transformIssue(d || i, d?.dependencies || []);
+  });
 }
 
 export function dbExists(beadsDb) {
@@ -89,10 +97,9 @@ export async function listUnlinkedIssues(beadsDb) {
       const labels = d?.labels || [];
       return !labels.some((l) => l.startsWith('run:'));
     });
-    // detailed already has dependencies, use them directly
     return unlinked.map((i) => {
       const d = detailMap.get(i.id);
-      return transformIssue(i, d?.dependencies || []);
+      return transformIssue(d || i, d?.dependencies || []);
     });
   } catch {
     return [];

package/server/graphify-status.js

@@ -0,0 +1,234 @@
+import { execFileSync, spawn } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import { existsSync, realpathSync, rmSync, statSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { isAbsolute, join } from 'node:path';
+
+// Mirror of _GRAPHIFY_DEFAULTS in src/worca/utils/graphify.py — keep in sync.
+const GRAPHIFY_DEFAULTS = {
+  enabled: false,
+  mode: 'structural',
+  backend: null,
+  model_profile: null,
+  out_dir: 'graphify-out',
+  update_on: { preflight: true, guardian_post_commit: true },
+  min_repo_files: 100,
+  version_range: '>=0.8.16,<1',
+  preflight_timeout_seconds: 300,
+  freshness: 'clean_only',
+};
+
+// Mirror of effective_graphify_config() in src/worca/utils/graphify.py.
+// Enablement is project-level: the project opts in via graphify.enabled. Global
+// graphify.enabled is purely a kill-switch — an EXPLICIT global `false` disables
+// everywhere; `true`/unset defer to the project. These rules MUST match the
+// Python implementation; the parity is guarded by graphify-status.test.js
+// ("effective-config parity with Python"). Update both together.
+export function _effectiveConfig(globalSettings, projectSettings) {
+  const gGraphify = globalSettings?.worca?.graphify ?? {};
+  const pGraphify = projectSettings?.worca?.graphify ?? {};
+
+  // Only an explicit global `enabled: false` disables; `true`/unset defer.
+  if (gGraphify.enabled === false) {
+    return { ...GRAPHIFY_DEFAULTS, enabled: false, reason: 'global-off' };
+  }
+
+  const projectEnabled = pGraphify.enabled ?? false;
+  if (!projectEnabled) {
+    return { ...GRAPHIFY_DEFAULTS, enabled: false, reason: 'project-off' };
+  }
+
+  const merged = { ...GRAPHIFY_DEFAULTS };
+  for (const [k, v] of Object.entries(gGraphify)) {
+    if (v != null || k === 'enabled') merged[k] = v;
+  }
+  for (const [k, v] of Object.entries(pGraphify)) {
+    if (v != null || k === 'enabled') merged[k] = v;
+  }
+
+  return {
+    enabled: true,
+    mode: merged.mode,
+    backend: merged.backend,
+    model_profile: merged.model_profile,
+    out_dir: merged.out_dir,
+    update_on: merged.update_on,
+    min_repo_files: merged.min_repo_files,
+    version_range: merged.version_range,
+    preflight_timeout_seconds: merged.preflight_timeout_seconds,
+    freshness: merged.freshness,
+    reason: null,
+  };
+}
+
+// ─── Per-commit cache resolution (mirrors utils/paths.py + utils/git.py) ────
+
+export function cacheDir() {
+  if (process.env.WORCA_CACHE) return process.env.WORCA_CACHE;
+  const home = process.env.WORCA_HOME || join(homedir(), '.worca');
+  return join(home, 'cache');
+}
+
+export function repoId(projectRoot) {
+  try {
+    const common = execFileSync(
+      'git',
+      ['-C', projectRoot, 'rev-parse', '--git-common-dir'],
+      { encoding: 'utf-8' },
+    ).trim();
+    if (!common) return null;
+    const abs = isAbsolute(common) ? common : join(projectRoot, common);
+    const real = realpathSync(abs);
+    return createHash('sha256').update(real).digest('hex').slice(0, 12);
+  } catch {
+    return null;
+  }
+}
+
+export function headSha(projectRoot) {
+  try {
+    return execFileSync('git', ['-C', projectRoot, 'rev-parse', 'HEAD'], {
+      encoding: 'utf-8',
+    }).trim();
+  } catch {
+    return null;
+  }
+}
+
+/** Absolute snapshot dir for the project's current HEAD, or null. */
+export function snapshotDir(projectRoot) {
+  const rid = repoId(projectRoot);
+  const sha = headSha(projectRoot);
+  if (!rid || !sha) return null;
+  return join(cacheDir(), 'ast', rid, sha);
+}
+
+/** The per-project cache dir (<cache>/ast/<repo-id>/), or null if not a repo. */
+export function repoCacheDir(projectRoot) {
+  const rid = repoId(projectRoot);
+  if (!rid) return null;
+  return join(cacheDir(), 'ast', rid);
+}
+
+/** Remove all cached snapshots for the project's repo. Returns the path or null. */
+export function clearRepoCache(projectRoot) {
+  const repoCache = repoCacheDir(projectRoot);
+  if (!repoCache) return null;
+  rmSync(repoCache, { recursive: true, force: true });
+  return repoCache;
+}
+
+/** Stats for a per-commit snapshot dir, or null if not complete/present. */
+export function _graphStats(snapDir) {
+  if (!snapDir || !existsSync(join(snapDir, '.complete'))) return null;
+  const reportPath = join(snapDir, 'graphify', 'GRAPH_REPORT.md');
+  if (!existsSync(reportPath)) return null;
+
+  const stat = statSync(reportPath);
+  const ageSeconds = Math.max(0, (Date.now() - stat.mtimeMs) / 1000);
+  const htmlPath = join(snapDir, 'graphify', 'graph.html');
+  const graphJsonPath = join(snapDir, 'graphify', 'graph.json');
+
+  return {
+    report_path: reportPath,
+    // The queryable dataset for humans: `graphify query … --graph <path>`.
+    // null when the snapshot lacks graph.json (older/partial builds).
+    graph_json_path: existsSync(graphJsonPath) ? graphJsonPath : null,
+    snapshot_dir: snapDir,
+    age_seconds: ageSeconds,
+    size_bytes: stat.size,
+    has_html: existsSync(htmlPath),
+  };
+}
+
+function defaultDetect() {
+  return new Promise((resolve) => {
+    const child = spawn(
+      'python3',
+      [
+        '-c',
+        'import json; from worca.utils.graphify import detect_graphify; d = detect_graphify(); print(json.dumps({"installed": d.installed, "version": d.version, "compatible": d.compatible, "backend_env_present": d.backend_env_present, "error": d.error}))',
+      ],
+      { stdio: ['ignore', 'pipe', 'pipe'] },
+    );
+
+    let stdout = '';
+    let stderr = '';
+    child.stdout.on('data', (chunk) => {
+      stdout += chunk.toString();
+    });
+    child.stderr.on('data', (chunk) => {
+      stderr += chunk.toString();
+    });
+    child.on('error', () => {
+      resolve({
+        installed: false,
+        version: null,
+        compatible: false,
+        backend_env_present: [],
+        error: 'python3 not available',
+      });
+    });
+    child.on('exit', (code) => {
+      if (code === 0 && stdout.trim()) {
+        try {
+          resolve(JSON.parse(stdout.trim()));
+          return;
+        } catch {
+          // fall through
+        }
+      }
+      resolve({
+        installed: false,
+        version: null,
+        compatible: false,
+        backend_env_present: [],
+        error: stderr.trim() || `detect exited ${code}`,
+      });
+    });
+  });
+}
+
+const DEFAULT_TTL_MS = 60_000;
+
+export function createGraphifyStatus(opts = {}) {
+  const detectFn = opts.detectFn || defaultDetect;
+  const ttlMs = opts.ttlMs ?? DEFAULT_TTL_MS;
+
+  let cached = null;
+  let cachedAt = 0;
+
+  async function detect() {
+    const now = Date.now();
+    if (cached && now - cachedAt < ttlMs) return cached;
+    cached = await detectFn();
+    cachedAt = Date.now();
+    return cached;
+  }
+
+  function invalidate() {
+    cached = null;
+    cachedAt = 0;
+  }
+
+  async function getStatus({ globalSettings, projectSettings, projectRoot }) {
+    const effective = _effectiveConfig(globalSettings, projectSettings);
+    const detection = await detect();
+    const graphStats = effective.enabled
+      ? _graphStats(snapshotDir(projectRoot))
+      : null;
+    return {
+      ok: true,
+      effective,
+      detection,
+      graph_stats: graphStats,
+      // The cache path is a pure function of the repo location (it's null only
+      // when projectRoot isn't a git repo), so resolve it regardless of whether
+      // graphify is enabled. This lets the UI show the path immediately when
+      // the user toggles graphify on in-memory, before the setting is saved.
+      cache_path: repoCacheDir(projectRoot),
+    };
+  }
+
+  return { detect, invalidate, getStatus };
+}

package/server/index.js

@@ -90,22 +90,21 @@ server.on('error', (err) => {
   process.exit(1);
 });
 
-const { broadcast, scheduleRefresh, resolveRunProject } = attachWsServer(
-  server,
-  {
+const { broadcast, scheduleRefresh, resolveRunProject, getBeadsCounts } =
+  attachWsServer(server, {
     worcaDir,
     settingsPath,
     prefsPath: preferencesPath(),
     prefsDir,
     webhookInbox,
     projectRoot,
-  },
-);
+  });
 
-// Expose broadcast, scheduleRefresh, and resolveRunProject to REST route handlers
+// Expose broadcast, scheduleRefresh, resolveRunProject, and getBeadsCounts to REST route handlers
 app.locals.broadcast = broadcast;
 app.locals.scheduleRefresh = scheduleRefresh;
 app.locals.resolveRunProject = resolveRunProject;
+app.locals.getBeadsCounts = getBeadsCounts;
 
 // Boot chat integrations only in global mode — project-scoped instances skip
 // integrations to avoid duplicate Telegram long-poll connections on the same bot.

package/server/integrations/commands/global.js

@@ -211,6 +211,11 @@ export function createGlobalHandlers({ chatContext, prefsDir, restClient }) {
           } else if (elapsed) {
             parts.push(`   **Duration:** ${elapsed}`);
           }
+          if (run.beads_total > 0) {
+            parts.push(
+              `   **Beads:** ${run.beads_done ?? 0}/${run.beads_total}`,
+            );
+          }
           lines.push(parts.join('\n'));
         }
       }

package/server/integrations/commands/project.js

@@ -181,6 +181,9 @@ function fmtStatusBlock(run) {
     const iterPart = iteration ? ` (iteration ${iteration})` : '';
     parts.push(`   **Stage:** ${stage}${iterPart}`);
   }
+  if (run.beads_total > 0) {
+    parts.push(`   **Beads:** ${run.beads_done ?? 0}/${run.beads_total}`);
+  }
   if (elapsed) parts.push(`   **Duration:** ${elapsed}`);
   if (cost) parts.push(`   **Cost:** ${cost}`);
   if (ps === 'completed' && run.pr_url)

package/server/integrations/renderers.js

@@ -114,6 +114,9 @@ function renderStageCompleted(envelope) {
   parts.push(`   **Stage:** ${p.stage ?? 'unknown'} completed`);
   const dur = fmtMs(p.duration_ms);
   if (dur) parts.push(`   **Duration:** ${dur}`);
+  if (p.beads_total > 0) {
+    parts.push(`   **Beads:** ${p.beads_done ?? 0}/${p.beads_total}`);
+  }
   return mdMsg(parts.join('\n'), 'success');
 }
 
@@ -504,6 +507,17 @@ function renderWorkspaceGuideConflict(envelope) {
   return mdMsg(parts.join('\n'), 'warning');
 }
 
+function renderBeadNext(envelope) {
+  const p = envelope.payload;
+  const parts = [`⚙ **Run:** \`${runId(envelope)}\``];
+  const label =
+    p.max_beads != null
+      ? `${p.bead_iteration}/${p.max_beads}`
+      : `${p.bead_iteration}`;
+  parts.push(`   **Bead:** ${label}`);
+  return mdMsg(parts.join('\n'), 'info');
+}
+
 // ---------------------------------------------------------------------------
 // Registry
 // ---------------------------------------------------------------------------
@@ -550,6 +564,7 @@ const EVENT_RENDERERS = {
 // than Tier-1 defaults. Callers that want them can pull from this export and
 // register them in their own pipeline.
 export const OPT_IN_RENDERERS = {
+  'pipeline.bead.next': renderBeadNext,
   'fleet.launched': renderFleetLaunched,
   'workspace.launched': renderWorkspaceLaunched,
   'workspace.plan.started': renderWorkspacePlanStarted,

package/server/project-routes.js

@@ -360,10 +360,29 @@ export function createProjectScopedRoutes({
   });
 
   // GET /api/projects/:projectId/runs — list runs for this project
-  router.get('/runs', requireWorcaDir, (req, res) => {
+  router.get('/runs', requireWorcaDir, async (req, res) => {
     try {
       const runs = discoverRuns(req.project.worcaDir);
       const default_branch = getDefaultBranch(req.project.projectRoot);
+
+      const { getBeadsCounts } = req.app.locals;
+      if (getBeadsCounts) {
+        try {
+          const counts = await getBeadsCounts(req.project.name);
+          if (counts) {
+            for (const run of runs) {
+              const c = counts[run.id];
+              if (c) {
+                run.beads_done = c.done;
+                run.beads_total = c.total;
+              }
+            }
+          }
+        } catch {
+          /* non-fatal — runs returned without bead counts */
+        }
+      }
+
       const response = { ok: true, runs, default_branch };
       // Include settings so multi-project clients can use loop limits, etc.
       const { settingsPath } = req.project;