@worca/ui 0.1.1 → 0.2.0

package/app/styles.css

@@ -1735,10 +1735,20 @@ sl-details.log-history-panel::part(content) {
 }
 
 .pricing-table sl-input {
-  min-width: 90px;
-  max-width: 130px;
+  min-width: 72px;
+  max-width: 104px;
+  display: inline-block;
+}
+
+sl-input.pricing-input::part(input) {
+  text-align: right;
 }
 
+.pricing-table--auto {
+  width: auto;
+}
+
+
 .pricing-info {
   display: flex;
   gap: 16px;
@@ -3160,6 +3170,19 @@ sl-details.learnings-panel::part(content) {
   color: var(--muted);
 }
 
+.cost-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 0.7rem;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: var(--bg-tertiary);
+  color: var(--muted);
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
 /* Preflight checks view */
 
 .preflight-checks-view {

package/package.json

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

package/server/beads-reader.js

@@ -1,13 +1,15 @@
-import { execFileSync } from 'node:child_process';
+import { execFile } from 'node:child_process';
 import { existsSync } from 'node:fs';
+import { promisify } from 'node:util';
 
-function runBd(args, dbPath) {
+const execFileAsync = promisify(execFile);
+
+async function runBd(args, dbPath) {
   const fullArgs = [...args, '--json', '--db', dbPath, '--readonly'];
-  const stdout = execFileSync('bd', fullArgs, {
+  const { stdout } = await execFileAsync('bd', fullArgs, {
     encoding: 'utf8',
     timeout: 10000,
     maxBuffer: 10 * 1024 * 1024,
-    stdio: ['ignore', 'pipe', 'pipe'],
   });
   return JSON.parse(stdout);
 }
@@ -30,12 +32,12 @@ function transformIssue(issue, deps) {
   };
 }
 
-function enrichWithDeps(issues, dbPath) {
+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 = runBd(['show', ...needDeps.map((i) => i.id)], dbPath);
+  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) || []));
 }
@@ -44,18 +46,18 @@ export function dbExists(beadsDb) {
   return existsSync(beadsDb);
 }
 
-export function listIssues(beadsDb) {
+export async function listIssues(beadsDb) {
   try {
-    const issues = runBd(['list', '--limit', '0'], beadsDb);
+    const issues = await runBd(['list', '--limit', '0'], beadsDb);
     return enrichWithDeps(issues, beadsDb);
   } catch {
     return [];
   }
 }
 
-export function listIssuesByLabel(beadsDb, label) {
+export async function listIssuesByLabel(beadsDb, label) {
   try {
-    const issues = runBd(
+    const issues = await runBd(
       ['list', '--label-any', label, '--all', '--limit', '0'],
       beadsDb,
     );
@@ -65,12 +67,12 @@ export function listIssuesByLabel(beadsDb, label) {
   }
 }
 
-export function listUnlinkedIssues(beadsDb) {
+export async function listUnlinkedIssues(beadsDb) {
   try {
-    const issues = runBd(['list', '--limit', '0'], beadsDb);
+    const issues = await runBd(['list', '--limit', '0'], beadsDb);
     if (issues.length === 0) return [];
     // bd list doesn't include labels — use bd show to get them
-    const detailed = runBd(['show', ...issues.map((i) => i.id)], beadsDb);
+    const detailed = await runBd(['show', ...issues.map((i) => i.id)], beadsDb);
     const detailMap = new Map(detailed.map((d) => [d.id, d]));
     const unlinked = issues.filter((i) => {
       const d = detailMap.get(i.id);
@@ -87,9 +89,9 @@ export function listUnlinkedIssues(beadsDb) {
   }
 }
 
-export function countIssuesByRunLabel(beadsDb) {
+export async function countIssuesByRunLabel(beadsDb) {
   try {
-    const rows = runBd(['label', 'list-all'], beadsDb);
+    const rows = await runBd(['label', 'list-all'], beadsDb);
     const counts = {};
     for (const row of rows) {
       if (row.label.startsWith('run:')) {
@@ -102,18 +104,18 @@ export function countIssuesByRunLabel(beadsDb) {
   }
 }
 
-export function listDistinctRunLabels(beadsDb) {
+export async function listDistinctRunLabels(beadsDb) {
   try {
-    const rows = runBd(['label', 'list-all'], beadsDb);
+    const rows = await runBd(['label', 'list-all'], beadsDb);
     return rows.filter((r) => r.label.startsWith('run:')).map((r) => r.label);
   } catch {
     return [];
   }
 }
 
-export function getIssue(beadsDb, id) {
+export async function getIssue(beadsDb, id) {
   try {
-    const results = runBd(['show', id], beadsDb);
+    const results = await runBd(['show', id], beadsDb);
     if (!results || results.length === 0) return null;
     const issue = results[0];
     return transformIssue(issue, issue.dependencies || []);

package/server/project-routes.js

@@ -1174,76 +1174,43 @@ export function createProjectScopedRoutes() {
   });
 
   // GET /api/projects/:projectId/costs — token & cost data
+  // Reads per-iteration token_usage from each run's status.json.
   router.get('/costs', requireWorcaDir, (req, res) => {
     const { worcaDir } = req.project;
-    const resultsDir = join(worcaDir, 'results');
-    if (!existsSync(resultsDir)) return res.json({ ok: true, tokenData: {} });
-
+    const runs = discoverRuns(worcaDir);
     const tokenData = {};
 
-    for (const entry of readdirSync(resultsDir, { withFileTypes: true })) {
-      if (!entry.isDirectory()) continue;
-      const runDir = join(resultsDir, entry.name);
-      const stageNames = [];
-      try {
-        for (const sub of readdirSync(runDir, { withFileTypes: true })) {
-          if (sub.isDirectory()) stageNames.push(sub.name);
-        }
-      } catch {
-        continue;
-      }
-
-      if (stageNames.length === 0) continue;
-      tokenData[entry.name] = {};
+    for (const run of runs) {
+      const stages = run.stages || {};
+      const runEntry = {};
 
-      for (const stage of stageNames) {
-        const stageDir = join(runDir, stage);
+      for (const [stageName, stage] of Object.entries(stages)) {
+        const iterations = stage.iterations || [];
         const iters = [];
-        try {
-          const files = readdirSync(stageDir)
-            .filter((f) => f.startsWith('iter-') && f.endsWith('.json'))
-            .sort();
-          for (const file of files) {
-            try {
-              const data = JSON.parse(
-                readFileSync(join(stageDir, file), 'utf8'),
-              );
-              const mu = data.modelUsage || {};
-              let inputTokens = 0,
-                outputTokens = 0,
-                cacheReadInputTokens = 0,
-                cacheCreationInputTokens = 0;
-              const models = [];
-              for (const [model, usage] of Object.entries(mu)) {
-                inputTokens += usage.inputTokens || 0;
-                outputTokens += usage.outputTokens || 0;
-                cacheReadInputTokens += usage.cacheReadInputTokens || 0;
-                cacheCreationInputTokens += usage.cacheCreationInputTokens || 0;
-                models.push(model);
-              }
-              iters.push({
-                inputTokens,
-                outputTokens,
-                cacheReadInputTokens,
-                cacheCreationInputTokens,
-                models,
-              });
-            } catch {
-              /* skip bad files */
-            }
-          }
-        } catch {
-          /* skip */
+        for (const iter of iterations) {
+          const tu = iter.token_usage || {};
+          iters.push({
+            inputTokens: tu.input_tokens || 0,
+            outputTokens: tu.output_tokens || 0,
+            cacheReadInputTokens: tu.cache_read_input_tokens || 0,
+            cacheCreationInputTokens: tu.cache_creation_input_tokens || 0,
+            webSearchRequests: tu.web_search_requests || 0,
+            cacheEphemeral1hTokens: tu.cache_ephemeral_1h_tokens || 0,
+            cacheEphemeral5mTokens: tu.cache_ephemeral_5m_tokens || 0,
+            models: tu.model ? [tu.model] : [],
+          });
         }
-        if (iters.length > 0) tokenData[entry.name][stage] = iters;
+        if (iters.length > 0) runEntry[stageName] = iters;
       }
+
+      if (Object.keys(runEntry).length > 0) tokenData[run.id] = runEntry;
     }
 
     res.json({ ok: true, tokenData });
   });
 
   // ─── Beads (project-scoped) ─────────────────────────────────────────
-  router.get('/beads/issues', requireWorcaDir, (req, res) => {
+  router.get('/beads/issues', requireWorcaDir, async (req, res) => {
     const beadsDbPath = join(req.project.worcaDir, '..', '.beads', 'beads.db');
     if (!dbExists(beadsDbPath)) {
       return res.json({
@@ -1254,7 +1221,7 @@ export function createProjectScopedRoutes() {
       });
     }
     try {
-      const issues = listIssues(beadsDbPath);
+      const issues = await listIssues(beadsDbPath);
       res.json({ ok: true, issues, dbExists: true, dbPath: beadsDbPath });
     } catch (err) {
       res.status(500).json({ ok: false, error: err.message });
@@ -1269,7 +1236,7 @@ export function createProjectScopedRoutes() {
         .json({ ok: false, error: 'Issue ID must be a positive integer' });
     }
     const beadsDbPath = join(req.project.worcaDir, '..', '.beads', 'beads.db');
-    const issue = getIssue(beadsDbPath, issueId);
+    const issue = await getIssue(beadsDbPath, issueId);
     if (!issue) {
       return res
         .status(404)

package/server/versions.js

@@ -1,11 +1,9 @@
 // server/versions.js — version fetching + caching for worca-cc and @worca/ui
+import { execFileSync } from 'node:child_process';
 import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
 import { readPreferences } from './preferences.js';
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 /** Cache: { data, timestamp } */
 let _cache = null;
 const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
@@ -173,15 +171,19 @@ export function getDevPathVersions(sourceRepo) {
 }
 
 /**
- * Get installed @worca/ui version from own package.json.
+ * Get globally installed @worca/ui version via npm.
+ * Falls back to own package.json if npm query fails.
  * @returns {string|null}
  */
 function getInstalledUiVersion() {
   try {
-    const pkg = JSON.parse(
-      readFileSync(join(__dirname, '..', 'package.json'), 'utf8'),
-    );
-    return pkg.version || null;
+    const output = execFileSync('npm', ['list', '-g', '@worca/ui', '--json'], {
+      encoding: 'utf8',
+      timeout: 5000,
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+    const data = JSON.parse(output);
+    return data.dependencies?.['@worca/ui']?.version || null;
   } catch {
     return null;
   }

package/server/ws-beads-watcher.js

@@ -21,10 +21,10 @@ export function createBeadsWatcher({ worcaDir, broadcaster, projectId }) {
 
   function scheduleBeadsRefresh() {
     if (BEADS_REFRESH_TIMER) clearTimeout(BEADS_REFRESH_TIMER);
-    BEADS_REFRESH_TIMER = setTimeout(() => {
+    BEADS_REFRESH_TIMER = setTimeout(async () => {
       BEADS_REFRESH_TIMER = null;
       try {
-        const issues = listIssues(beadsDbPath);
+        const issues = await listIssues(beadsDbPath);
         broadcaster.broadcast(
           'beads-update',
           {

package/server/ws-message-router.js

@@ -531,7 +531,7 @@ export function createMessageRouter({
         );
         return;
       }
-      const issues = listIssues(beadsDbPath);
+      const issues = await listIssues(beadsDbPath);
       ws.send(
         JSON.stringify(
           makeOk(req, { issues, dbExists: true, dbPath: beadsDbPath }),
@@ -552,7 +552,7 @@ export function createMessageRouter({
         ws.send(JSON.stringify(makeOk(req, { issues: [], dbExists: false })));
         return;
       }
-      const issues = listUnlinkedIssues(beadsDbPath);
+      const issues = await listUnlinkedIssues(beadsDbPath);
       ws.send(JSON.stringify(makeOk(req, { issues, dbExists: true })));
       return;
     }
@@ -569,7 +569,7 @@ export function createMessageRouter({
         ws.send(JSON.stringify(makeOk(req, { refs: [] })));
         return;
       }
-      const refs = listDistinctRunLabels(beadsDbPath);
+      const refs = await listDistinctRunLabels(beadsDbPath);
       ws.send(JSON.stringify(makeOk(req, { refs })));
       return;
     }
@@ -586,7 +586,7 @@ export function createMessageRouter({
         ws.send(JSON.stringify(makeOk(req, { counts: {} })));
         return;
       }
-      const counts = countIssuesByRunLabel(beadsDbPath);
+      const counts = await countIssuesByRunLabel(beadsDbPath);
       ws.send(JSON.stringify(makeOk(req, { counts })));
       return;
     }
@@ -612,7 +612,7 @@ export function createMessageRouter({
         ws.send(JSON.stringify(makeOk(req, { issues: [], runId })));
         return;
       }
-      const issues = listIssuesByLabel(beadsDbPath, `run:${runId}`);
+      const issues = await listIssuesByLabel(beadsDbPath, `run:${runId}`);
       ws.send(JSON.stringify(makeOk(req, { issues, runId })));
       return;
     }