@worca/app 1.0.0 → 1.1.1

package/ui/public/source-pane.mjs

@@ -34,13 +34,62 @@ function collectInputs(pane) {
   return inputs;
 }
 
-function taskRow(doc, t) {
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+/**
+ * Task timestamps read as "how stale is this", so recent ones are relative
+ * ("3d ago") and older ones absolute ("28 May") — past a week, relative time
+ * stops distinguishing two tickets from each other. Always LOCAL time: the
+ * contract carries UTC ISO strings, and printing the Z value would be an hour
+ * or two off for most readers.
+ * @returns {{ text: string, title: string }} short label + full-precision hover
+ */
+export function formatUpdated(iso, now = Date.now()) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return { text: String(iso), title: String(iso) };
+  const title = d.toLocaleString(undefined, {
+    day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit',
+  });
+  const age = now - d.getTime();
+  let text;
+  if (age < 0 || age < MINUTE) text = 'just now';        // clock skew reads as "now"
+  else if (age < HOUR) text = `${Math.floor(age / MINUTE)}m ago`;
+  else if (age < DAY) text = `${Math.floor(age / HOUR)}h ago`;
+  else if (age < 7 * DAY) text = `${Math.floor(age / DAY)}d ago`;
+  else {
+    const sameYear = d.getFullYear() === new Date(now).getFullYear();
+    text = d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', ...(sameYear ? {} : { year: 'numeric' }) });
+  }
+  return { text, title };
+}
+
+function taskRow(doc, t, now) {
   const row = h(doc, 'div', 'sp-row');
   row.dataset.taskId = t.id;
-  row.appendChild(h(doc, 'span', 'sp-row-title', t.title));
+  // The id goes INSIDE the title span, not beside it: .sp-row is a
+  // space-between flex with exactly two children, so a third would spread all
+  // three across the row. Prefixing t.title in the connector would be worse
+  // still — that string also feeds the preview header and sourceMeta.title,
+  // which is stored on the pipeline and shown as provenance.
+  const title = h(doc, 'span', 'sp-row-title');
+  const id = t.id == null ? '' : String(t.id);
+  const text = t.title == null ? '' : String(t.title);
+  if (id && !text.startsWith(id)) title.appendChild(h(doc, 'span', 'sp-key', id));
+  title.appendChild(doc.createTextNode(text));
+  row.appendChild(title);
   const meta = h(doc, 'span', 'sp-row-meta');
   for (const l of t.labels || []) meta.appendChild(h(doc, 'span', 'sp-label', l));
-  if (t.updatedAt) meta.appendChild(h(doc, 'span', 'sp-updated mono', t.updatedAt));
+  if (t.updatedAt) {
+    // Say WHICH date it is: the summary contract carries only a last-modified
+    // time, so a bare date leaves the reader guessing created-vs-updated.
+    const { text, title } = formatUpdated(t.updatedAt, now);
+    const el = h(doc, 'span', 'sp-updated', `updated ${text}`);
+    el.title = `Updated ${title}`;
+    el.dataset.updatedAt = t.updatedAt;
+    meta.appendChild(el);
+  }
   row.appendChild(meta);
   return row;
 }
@@ -51,10 +100,15 @@ function taskRow(doc, t) {
 // dropdown populated ONCE on first focus via call(optionsFrom) (promise kept on
 // ._load for deterministic tests); task-browser -> debounced (300ms) search +
 // result list + preview (call getTask on pick) + hidden selected taskId.
-export function renderSourcePane(source, { call, doc = globalThis.document, timers } = {}) {
+export function renderSourcePane(source, { call, doc = globalThis.document, timers, now } = {}) {
+  const clock = typeof now === 'function' ? now : () => Date.now();
   const pane = h(doc, 'div', 'sp-pane');
   pane.dataset.plugin = source.plugin;
   pane.dataset.sourceId = source.sourceId;
+  // Set by the task-browser branch below; re-runs the listing with whatever
+  // the other inputs currently hold. Declared out here because those inputs
+  // may be built BEFORE the browser they filter.
+  let rerun = null;
   for (const input of source.inputs || []) {
     const field = h(doc, 'div', 'field');
     field.appendChild(h(doc, 'label', '', input.label || input.key));
@@ -108,20 +162,39 @@ export function renderSourcePane(source, { call, doc = globalThis.document, time
       preview.hidden = true;
       const hidden = h(doc, 'input', 'sp-task-id');
       hidden.type = 'hidden';
+      // Latest-wins: responses paint only if no newer search started meanwhile.
+      // The debounce collapses pending TIMERS, not in-flight fetches — without
+      // this, the slow mount-time empty search can resolve after a fast typed
+      // one and repaint the unfiltered list over the filtered results.
+      let searchSeq = 0;
       const runSearch = async (text) => {
+        const seq = ++searchSeq;
         results.replaceChildren(h(doc, 'div', 'hint', 'Searching…'));
+        const inputs = collectInputs(pane);
+        // Nothing asked for is not the same as nothing found — a source may
+        // legitimately list nothing (or even refuse to list: the contract lets
+        // listTasks throw) until it is given something to go on.
+        const asked = text || Object.values(inputs).some((v) => String(v || '').trim());
         try {
-          const r = await call('listTasks', { inputs: collectInputs(pane), search: text });
+          const r = await call('listTasks', { inputs, search: text });
+          if (seq !== searchSeq) return;
           results.replaceChildren();
           const tasks = (r && r.tasks) || [];
-          for (const t of tasks) results.appendChild(taskRow(doc, t));
-          if (!tasks.length) results.appendChild(h(doc, 'div', 'hint', 'No tasks matched.'));
+          for (const t of tasks) results.appendChild(taskRow(doc, t, clock()));
+          if (!tasks.length) {
+            results.appendChild(h(doc, 'div', 'hint', asked ? 'No tasks matched.' : 'Type to search.'));
+          }
         } catch (e) {
-          results.replaceChildren(h(doc, 'div', 'hint err', `search failed: ${e.message}`));
+          if (seq !== searchSeq) return;
+          results.replaceChildren(asked
+            ? h(doc, 'div', 'hint err', `search failed: ${e.message}`)
+            : h(doc, 'div', 'hint', 'Type to search.'));
         }
       };
       const debounced = debounce(runSearch, 300, timers);
       search.addEventListener('input', () => debounced(search.value.trim()));
+      rerun = () => debounced(search.value.trim());
+      pane._search = runSearch;                  // deterministic awaiting in tests
       results.addEventListener('click', (e) => {
         const row = e.target.closest('.sp-row');
         if (!row) return;
@@ -143,9 +216,118 @@ export function renderSourcePane(source, { call, doc = globalThis.document, time
     }
     pane.appendChild(field);
   }
+  // A filter the user types must actually take effect: every non-browser input
+  // re-runs the listing. Without this, editing a JQL/filter field changed
+  // nothing until you also touched the search box, which reads as "my filter
+  // is ignored". 'change' covers <select>, 'input' covers text; the shared
+  // debounce collapses the two when a browser fires both.
+  if (rerun) {
+    for (const node of pane.querySelectorAll('[data-input-key]')) {
+      if (node.classList.contains('sp-task-browser')) continue;
+      node.addEventListener('input', rerun);
+      node.addEventListener('change', rerun);
+    }
+    // Populate on open rather than showing an empty list until the user types.
+    pane._initial = pane._search('');
+  }
   return pane;
 }
 
+/** <option> per profile, accepting both {id,label} and bare id strings. */
+function profileOptions(doc, sel, profiles) {
+  for (const p of profiles || []) {
+    const id = typeof p === 'string' ? p : String(p.id || '');
+    const label = typeof p === 'string' ? '' : (p.label || '');
+    const opt = h(doc, 'option', '', label ? `${label} (${id})` : id);
+    opt.value = id;
+    sel.appendChild(opt);
+  }
+  return sel;
+}
+
+/** How the profile was arrived at, in words. An inherited or implicit profile
+ *  must not read as a deliberate choice — that is how the wrong one survives. */
+const VIA_NOTE = {
+  only: 'the only profile configured',
+  members: 'inherited from this workspace’s projects',
+  binding: '',
+};
+
+/**
+ * The standing profile row above the pane: which configuration this
+ * project/workspace pulls from, always visible once resolved.
+ *
+ * It stays on screen deliberately. The gate below answers "which instance?"
+ * once; this answers "which instance am I reading from right now?" every time,
+ * which is the check that catches a wrong binding before a run rather than
+ * after. Changing it REBINDS the scope (the same PUT the gate makes), so it is
+ * a persistent property of the project — never a per-run filter.
+ *
+ * @param {{source, profiles, profile, via, scopeLabel?}} info
+ * @param {{doc?, onChange?: (profileId: string) => any}} opts
+ */
+export function renderProfileBar(info, { doc = globalThis.document, onChange } = {}) {
+  const { source = {}, profiles = [], profile, via, scopeLabel = '' } = info || {};
+  const bar = h(doc, 'div', 'sp-profile-bar');
+  bar.dataset.plugin = source.plugin || '';
+  bar.dataset.sourceId = source.sourceId || '';
+  if (profile) bar.dataset.profile = profile;
+  bar.appendChild(h(doc, 'label', '', 'Profile'));
+
+  const sel = profileOptions(doc, h(doc, 'select', 'select sp-profile-sel'), profiles);
+  if (profile) sel.value = profile;
+  sel.addEventListener('change', () => { if (typeof onChange === 'function') onChange(sel.value); });
+  bar.appendChild(sel);
+
+  const note = VIA_NOTE[via] || '';
+  if (note) bar.appendChild(h(doc, 'small', 'hint', note));
+  else if (scopeLabel) bar.appendChild(h(doc, 'small', 'hint', `bound to ${scopeLabel}`));
+  return bar;
+}
+
+/**
+ * The gate shown INSTEAD of the pane when a multi-profile source has no
+ * resolved profile for the selected project/workspace.
+ *
+ * Why a gate and not a dropdown inside the pane: the choice is "which tracker
+ * does this project belong to", which is a property of the project, not of the
+ * run. Asked once and remembered, a wrong answer is visible immediately and
+ * fixable; asked every run, it is a control nobody reads until a pipeline has
+ * already been started against the wrong instance.
+ *
+ * @param {{source, profiles, via, candidates?, scopeLabel?}} info
+ *        via: 'none' (nothing bound) | 'conflict' (workspace members disagree)
+ * @param {{doc?, onPick: (profileId: string) => any}} opts
+ */
+export function renderProfileGate(info, { doc = globalThis.document, onPick } = {}) {
+  const { source = {}, profiles = [], via, candidates = [], scopeLabel = '' } = info || {};
+  const root = h(doc, 'div', 'sp-profile-gate');
+  const name = source.displayName || source.sourceId || 'This source';
+
+  if (!profiles.length) {
+    root.appendChild(h(doc, 'p', 'hint', `${name} has no profiles configured yet.`));
+    const link = h(doc, 'a', 'sp-profile-settings', 'Add one in Plugins settings');
+    link.href = '#settings/plugins';
+    root.appendChild(link);
+    return root;
+  }
+
+  root.appendChild(h(doc, 'p', 'hint', via === 'conflict'
+    // Naming them is the point: the reader has to know it is ambiguous, and
+    // between WHICH instances, to fix it at the right project.
+    ? `The projects in ${scopeLabel || 'this workspace'} disagree about which ${name} profile to use (${candidates.join(', ')}). Pick the one this run should read from.`
+    : `Which ${name} profile does ${scopeLabel || 'this project'} pull from? Asked once, then remembered.`));
+
+  const sel = profileOptions(doc, h(doc, 'select', 'select sp-profile-sel'), profiles);
+  root.appendChild(sel);
+
+  const use = h(doc, 'button', 'btn btn-primary btn-mini sp-profile-use', 'Use this profile');
+  use.type = 'button';
+  use.addEventListener('click', () => { if (typeof onPick === 'function') onPick(sel.value); });
+  root.appendChild(use);
+  return root;
+}
+
 // collectSourcePane(paneEl) -> { inputs, taskId } | { error } when nothing picked.
 export function collectSourcePane(paneEl) {
   const inputs = collectInputs(paneEl);

package/ui/public/stats-view.mjs

@@ -56,6 +56,8 @@ function icon(doc, d) {
 
 const ICONS = {
   spent: 'M12 4v16M16 6.8c-.8-1-2.2-1.6-4-1.6-2.2 0-3.8 1-3.8 2.7 0 3.6 7.8 1.7 7.8 5.4 0 1.7-1.7 2.9-4 2.9-1.9 0-3.4-.7-4.2-1.8',
+  pipeline: 'M12 3.2 20.5 8 12 12.8 3.5 8 12 3.2ZM3.5 12l8.5 4.8 8.5-4.8M3.5 16l8.5 4.8 8.5-4.8',
+  ask: 'M12 19.6l-3.2-2.8H6.4A3.4 3.4 0 0 1 3 13.4V7.8a3.4 3.4 0 0 1 3.4-3.4h11.2A3.4 3.4 0 0 1 21 7.8v5.6a3.4 3.4 0 0 1-3.4 3.4h-2.4L12 19.6Z',
   time: 'M12 8v4l3 2M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z',
   finished: 'M20 7 9 18l-5-5',
   prs: 'M6 8.6v6.8M18 15.4V11a4 4 0 0 0-4-4h-2M6 3.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2ZM6 15.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2ZM18 15.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Z',
@@ -125,7 +127,7 @@ function meterEl(doc, cls, pct) {
   return m;
 }
 
-/** KPI row: Spent · Time worked · Pipelines finished · PRs merged (spec §6.13). */
+/** KPI row: Spent · Pipeline spend · Ask Worca · Time worked · Pipelines finished · PRs merged (D4). */
 export function renderKpiRow(model, { doc = globalThis.document, fmt = DEFAULT_FMT } = {}) {
   const { totals, prev, budget, range } = model;
   const row = h(doc, 'div', 'stat-row');
@@ -160,6 +162,32 @@ export function renderKpiRow(model, { doc = globalThis.document, fmt = DEFAULT_F
     title: fmt.estTitle(totals.spentUsd),
   }));
 
+  // Pipeline spend (D7): pipeline-only money; sub = share of the combined
+  // total. Falls back to spentUsd when the payload predates the ask split.
+  const pipeSpend = totals.pipelineSpendUsd ?? totals.spentUsd;
+  row.appendChild(tile(doc, {
+    iconD: ICONS.pipeline, label: 'Pipeline spend',
+    chip: prev ? deltaChip(doc, pipeSpend, prev.pipelineSpendUsd, range) : null,
+    valueNodes: [doc.createTextNode(fmt.usd(pipeSpend))],
+    sub: totals.spentUsd > 0
+      ? `${Math.round((pipeSpend / totals.spentUsd) * 100)}% of spend`
+      : 'no spend in this period',
+    title: fmt.estTitle(pipeSpend),
+  }));
+
+  // Ask Worca (D5/D6): chat spend; a session = a thread with a costed turn in
+  // the range, so cost/session is window spend over that count.
+  const ask = totals.ask || { spendUsd: 0, sessions: 0, turns: 0 };
+  row.appendChild(tile(doc, {
+    iconD: ICONS.ask, label: 'Ask Worca',
+    chip: prev ? deltaChip(doc, ask.spendUsd, prev.ask?.spendUsd, range) : null,
+    valueNodes: [doc.createTextNode(fmt.usd(ask.spendUsd))],
+    sub: ask.sessions > 0
+      ? `${ask.sessions} session${ask.sessions === 1 ? '' : 's'} · ${fmt.usd(ask.spendUsd / ask.sessions)}/session · ${ask.turns} turn${ask.turns === 1 ? '' : 's'}`
+      : 'no sessions in this period',
+    title: fmt.estTitle(ask.spendUsd),
+  }));
+
   // Time worked
   row.appendChild(tile(doc, {
     iconD: ICONS.time, label: 'Time worked',
@@ -218,6 +246,58 @@ export function renderBudgetIndicator(budget, { doc = globalThis.document, fmt =
   return btn;
 }
 
+/** Compact centre label for the ring: $4 · $317 · $3k · $12k. Four glyphs is
+ *  what fits inside a 29px disc at 9.5px mono, so thousands are WHOLE — "$8.8k"
+ *  is five glyphs and overflows the disc.
+ *  NAME: `ringAmount`, not `compactUsd` — this module ALREADY declares
+ *  `compactUsd(fmt, v)` at :410 (the spend-chart y-axis formatter), and a second
+ *  top-level function declaration in an ES module is a fatal SyntaxError, not a
+ *  shadow: it takes down stats-view.mjs, app.js and the whole UI. */
+function ringAmount(n) {
+  const v = n || 0;
+  // The ROUNDED value decides: 999.5 would otherwise fall through and render
+  // "$1000", five glyphs in a four-glyph disc.
+  if (Math.round(v) >= 1000) return `$${Math.round(v / 1000)}k`;
+  return `$${Math.round(v)}`;
+}
+
+/** Collapsed-rail budget ring — the sidebar indicator's 38px twin.
+ *  Keeps the `spend-ind` class because app.js routes the sidebar spend click
+ *  through `closest('.spend-ind')` (app.js:517). The arc percentage travels as the
+ *  custom property `--ring-pct` and the gradient is composed in the stylesheet,
+ *  so there is one definition of it and the cascade can swap the band colours by
+ *  class. With no total limit there is no denominator, so the ring shows a flat
+ *  neutral track and the amount rather than a fabricated percentage. */
+export function renderBudgetRing(budget, { doc = globalThis.document, fmt = DEFAULT_FMT } = {}) {
+  const b = budget || {};
+  const btn = h(doc, 'button', 'spend-ind spend-ring');
+  btn.type = 'button';
+  btn.dataset.nav = 'stats';
+  const hasLimit = b.totalLimitUsd != null;
+  const ratio = hasLimit ? b.windowSpendUsd / b.totalLimitUsd : 0;
+  // Clamped both ways: over-cap spend must not sweep past a full circle, and a
+  // refund must not sweep a negative arc.
+  const pct = b.blocked ? 100 : Math.max(0, Math.min(100, Math.round(ratio * 100)));
+
+  // `no-limit` is tested FIRST, unlike renderBudgetIndicator, which tests
+  // `blocked` first. Not a divergence: src/core/cost-budget.mjs:90 is
+  // `blocked = totalLimitUsd != null && windowSpendUsd >= totalLimitUsd`, and
+  // budgetStatus() is the only producer the UI ever sees, so a no-limit budget
+  // can never arrive blocked. Do not "fix" the order.
+  if (!hasLimit) btn.classList.add('no-limit');
+  else if (b.blocked) btn.classList.add('over');
+  else if (ratio >= BUDGET_WARN_AT) btn.classList.add('warn');
+
+  btn.style.setProperty('--ring-pct', String(hasLimit ? pct : 0));
+  btn.title = `Estimated spend this ${periodWord(b)}: ${fmt.usd4(b.windowSpendUsd)}` +
+    (hasLimit ? ` of ${fmt.usd(b.totalLimitUsd)}` : ' — no total limit') +
+    ` · resets ${fmtResetAt(b.windowEndMs)} — Claude Code client-side estimate ` +
+    `(total_cost_usd), not authoritative billing`;
+  btn.appendChild(h(doc, 'span', 'spend-ring-val',
+    hasLimit ? `${pct}%` : ringAmount(b.windowSpendUsd)));
+  return btn;
+}
+
 /** Settings budget readout: meter + one summary line. */
 export function renderBudgetReadout(budget, { doc = globalThis.document, fmt = DEFAULT_FMT } = {}) {
   const b = budget || {};