bosun 0.37.1 → 0.37.2

package/ui/tabs/telemetry.js

@@ -1,166 +1,388 @@
 /* ─────────────────────────────────────────────────────────────
- *  Tab: Telemetry — analytics, quality signals, alerts
+ *  Tab: Telemetry / Usage Analytics
+ *  Shows agent runs, skill invocations, MCP tool usage, activity
+ *  trend chart, and top-N bar charts.
  * ────────────────────────────────────────────────────────────── */
 import { h } from "preact";
-import { useMemo } from "preact/hooks";
+import { useState, useMemo, useEffect } from "preact/hooks";
 import htm from "htm";
 
 const html = htm.bind(h);
 
 import {
-  telemetrySummary,
   telemetryErrors,
-  telemetryExecutors,
   telemetryAlerts,
+  usageAnalytics,
   loadTelemetrySummary,
   loadTelemetryErrors,
   loadTelemetryExecutors,
   loadTelemetryAlerts,
+  loadUsageAnalytics,
   scheduleRefresh,
 } from "../modules/state.js";
-import { Card, EmptyState, SkeletonCard, Badge } from "../components/shared.js";
+import { Card, EmptyState, Badge } from "../components/shared.js";
+
+// ── Colour palettes ──────────────────────────────────────────────────────────
+
+const AGENT_PALETTE = [
+  "#6366f1", "#8b5cf6", "#a78bfa", "#c4b5fd", "#e879f9", "#f472b6",
+];
+const SKILL_PALETTE = [
+  "#10b981", "#14b8a6", "#f59e0b", "#84cc16", "#2dd4bf", "#fbbf24",
+];
+const MCP_PALETTE = [
+  "#f97316", "#fb923c", "#fbbf24", "#f43f5e", "#22d3ee", "#a3e635",
+];
+
+function paletteColor(palette, index) {
+  return palette[index % palette.length];
+}
+
+// ── Formatters ───────────────────────────────────────────────────────────────
 
 function formatCount(value) {
   if (value == null) return "–";
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
   return String(value);
 }
 
-function formatSeconds(value) {
-  if (!value && value !== 0) return "–";
-  if (value >= 60) return `${Math.round(value / 60)}m`;
-  return `${value}s`;
+function formatRelative(isoStr) {
+  if (!isoStr) return "never";
+  const diff = Date.now() - Date.parse(isoStr);
+  if (!Number.isFinite(diff) || diff < 0) return "just now";
+  const mins = Math.floor(diff / 60000);
+  if (mins < 2) return "just now";
+  if (mins < 60) return `${mins} minutes ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `about ${hrs} hour${hrs > 1 ? "s" : ""} ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days} day${days > 1 ? "s" : ""} ago`;
+}
+
+function formatSinceDate(isoStr) {
+  if (!isoStr) return null;
+  const d = new Date(isoStr);
+  if (isNaN(d)) return null;
+  return d.toLocaleDateString("en-US", {
+    month: "short", day: "numeric", year: "numeric",
+  });
 }
 
 function severityBadge(sev = "medium") {
-  const normalized = String(sev).toLowerCase();
-  if (normalized === "high" || normalized === "critical") return "danger";
-  if (normalized === "medium") return "warning";
+  const n = String(sev).toLowerCase();
+  if (n === "high" || n === "critical") return "danger";
+  if (n === "medium") return "warning";
   return "info";
 }
 
+// ── SVG Trend Chart ──────────────────────────────────────────────────────────
+
+/**
+ * Renders smooth catmull-rom curves for each series in `seriesMap`.
+ * `seriesMap` is `{ name: number[] }` aligned with `dates`.
+ */
+function TrendLines({ dates, seriesMap, palette }) {
+  if (!dates?.length || !seriesMap) return null;
+  const entries = Object.entries(seriesMap);
+  if (!entries.length) return null;
+
+  const W = 400, H = 140;
+  const PL = 28, PR = 8, PT = 8, PB = 24;
+  const iW = W - PL - PR;
+  const iH = H - PT - PB;
+
+  const allVals = entries.flatMap(([, v]) => v);
+  const maxVal = Math.max(...allVals, 1);
+  const n = dates.length;
+  const xOf = (i) => PL + (n < 2 ? iW / 2 : (i / (n - 1)) * iW);
+  const yOf = (v) => PT + iH - (v / maxVal) * iH;
+
+  function smoothPath(values) {
+    if (!values.length) return "";
+    const pts = values.map((v, i) => [xOf(i), yOf(v)]);
+    if (pts.length === 1) return `M ${pts[0][0]} ${pts[0][1]}`;
+    let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+      const p0 = pts[Math.max(0, i - 1)];
+      const p1 = pts[i];
+      const p2 = pts[i + 1];
+      const p3 = pts[Math.min(pts.length - 1, i + 2)];
+      const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
+      const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
+      const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
+      const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+      d += ` C ${cp1x.toFixed(1)} ${cp1y.toFixed(1)},${cp2x.toFixed(1)} ${cp2y.toFixed(1)},${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
+    }
+    return d;
+  }
+
+  const ySteps = [0, Math.ceil(maxVal / 2), maxVal];
+  const labelIdxs = n <= 3 ? [...Array(n).keys()] : [0, Math.floor(n / 2), n - 1];
+  const xLabels = [...new Set(labelIdxs)].map((i) => ({
+    x: xOf(i),
+    label: (dates[i] || "").slice(5),
+  }));
+
+  return html`
+    <svg viewBox="0 0 ${W} ${H}" class="analytics-trend-svg" aria-hidden="true">
+      ${ySteps.map((v) => html`
+        <g key=${v}>
+          <line x1=${PL} y1=${yOf(v)} x2=${W - PR} y2=${yOf(v)}
+            stroke="var(--border)" stroke-width="0.5" stroke-dasharray="3,3"/>
+          <text x=${PL - 4} y=${yOf(v) + 4} text-anchor="end"
+            font-size="9" fill="var(--text-hint)">${v}</text>
+        </g>
+      `)}
+      ${xLabels.map(({ x, label }) => html`
+        <text key=${label} x=${x} y=${H - 5} text-anchor="middle"
+          font-size="9" fill="var(--text-hint)">${label}</text>
+      `)}
+      ${entries.map(([name, values], i) => html`
+        <path key=${name} d=${smoothPath(values)} fill="none"
+          stroke=${paletteColor(palette, i)} stroke-width="1.8"
+          stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
+      `)}
+    </svg>
+  `;
+}
+
+function ChartLegend({ label, seriesMap, palette }) {
+  const names = Object.keys(seriesMap || {});
+  if (!names.length) return null;
+  return html`
+    <div class="analytics-legend-group">
+      <span class="analytics-legend-category">${label}</span>
+      ${names.map((name, i) => html`
+        <span key=${name} class="analytics-legend-item">
+          <span class="analytics-legend-dot"
+            style="background:${paletteColor(palette, i)}"></span>
+          ${name}
+        </span>
+      `)}
+    </div>
+  `;
+}
+
+// ── Bar Chart ────────────────────────────────────────────────────────────────
+
+function TopBarChart({ items, palette, title }) {
+  if (!items?.length) {
+    return html`<${EmptyState} title="No data yet"
+      description="Activity will appear here once tasks run." />`;
+  }
+  const max = items[0].count || 1;
+  return html`
+    <ul class="analytics-bar-list" aria-label=${title}>
+      ${items.map(({ name, count }, i) => html`
+        <li key=${name} class="analytics-bar-row">
+          <span class="analytics-bar-label" title=${name}>${name}</span>
+          <div class="analytics-bar-track">
+            <div class="analytics-bar-fill"
+              style="width:${Math.max(2, (count / max) * 100).toFixed(1)}%;background:${paletteColor(palette, i)}">
+            </div>
+          </div>
+          <span class="analytics-bar-count">${count}</span>
+        </li>
+      `)}
+    </ul>
+  `;
+}
+
+// ── Stat card ────────────────────────────────────────────────────────────────
+
+function AnalyticsStat({ icon, label, value }) {
+  return html`
+    <div class="analytics-stat">
+      <div class="analytics-stat-icon">${icon}</div>
+      <div class="analytics-stat-body">
+        <div class="analytics-stat-label">${label}</div>
+        <div class="analytics-stat-value">${value}</div>
+      </div>
+    </div>
+  `;
+}
+
+// ── Constants ────────────────────────────────────────────────────────────────
+
+const PERIODS = [
+  { days: 7,  label: "7d"  },
+  { days: 30, label: "30d" },
+  { days: 90, label: "90d" },
+];
+
+const TREND_TABS = ["agents", "skills", "mcp"];
+
+// ── Main exported component ──────────────────────────────────────────────────
+
 export function TelemetryTab() {
-  const summary = telemetrySummary.value;
-  const errors = telemetryErrors.value || [];
-  const executors = telemetryExecutors.value || {};
-  const alerts = telemetryAlerts.value || [];
+  const data = usageAnalytics.value;
+  const [period, setPeriod] = useState(30);
+  const [trendTab, setTrendTab] = useState("agents");
+
+  useEffect(() => {
+    loadUsageAnalytics(period).catch(() => {});
+  }, [period]);
 
-  const hasSummary = summary && summary.total > 0;
+  const trend = data?.trend;
 
-  const executorRows = useMemo(
-    () => Object.entries(executors).sort((a, b) => b[1] - a[1]),
-    [executors],
-  );
+  const trendSeriesMap = useMemo(() => {
+    if (!trend) return null;
+    if (trendTab === "agents") return trend.agents || {};
+    if (trendTab === "skills") return trend.skills || {};
+    return trend.mcpTools || {};
+  }, [trend, trendTab]);
 
-  const alertRows = useMemo(
-    () => alerts.slice(-10).reverse(),
-    [alerts],
-  );
+  const trendPalette =
+    trendTab === "agents" ? AGENT_PALETTE
+    : trendTab === "skills" ? SKILL_PALETTE
+    : MCP_PALETTE;
+
+  const hasTrend = trend?.dates?.length > 0 &&
+    Object.keys(trendSeriesMap || {}).length > 0;
+
+  const sinceLabel = formatSinceDate(data?.sinceAt);
 
   return html`
-    <section class="telemetry-tab">
-      <div class="section-header">
-        <h2>Telemetry</h2>
-        <button
-          class="btn btn-ghost btn-sm"
-          onClick=${() => {
+    <section class="telemetry-tab analytics-tab">
+
+      <div class="section-header analytics-header">
+        <div class="analytics-title-row">
+          <h2>Usage Analytics</h2>
+          ${sinceLabel ? html`
+            <span class="analytics-since">Since ${sinceLabel}</span>
+          ` : null}
+        </div>
+        <div class="analytics-header-actions">
+          <div class="analytics-period-toggle">
+            ${PERIODS.map(({ days, label }) => html`
+              <button key=${days}
+                class="analytics-period-btn ${period === days ? "active" : ""}"
+                onClick=${() => setPeriod(days)}>
+                ${label}
+              </button>
+            `)}
+          </div>
+          <button class="btn btn-ghost btn-sm" onClick=${() => {
+            loadUsageAnalytics(period).catch(() => {});
             loadTelemetrySummary();
             loadTelemetryErrors();
             loadTelemetryExecutors();
             loadTelemetryAlerts();
             scheduleRefresh(4000);
-          }}
-        >
-          Refresh
-        </button>
+          }}>Refresh</button>
+        </div>
       </div>
 
-      ${!hasSummary
-        ? html`<${EmptyState}
-            title="No telemetry yet"
-            description="Telemetry appears here once agents start running."
-          />`
-        : html`<${Card} title="Summary" class="telemetry-summary">
-            <div class="metric-grid">
-              <div>
-                <div class="metric-label">Sessions</div>
-                <div class="metric-value">${formatCount(summary.total)}</div>
-              </div>
-              <div>
-                <div class="metric-label">Success</div>
-                <div class="metric-value">
-                  ${formatCount(summary.success)} (${summary.successRate}%)
-                </div>
-              </div>
-              <div>
-                <div class="metric-label">Avg Duration</div>
-                <div class="metric-value">${formatSeconds(summary.avgDuration)}</div>
-              </div>
-              <div>
-                <div class="metric-label">Errors</div>
-                <div class="metric-value">${formatCount(summary.totalErrors)}</div>
-              </div>
-            </div>
-          </${Card}>`}
-
-      <div class="telemetry-grid">
-        <${Card} title="Top Errors">
-          ${errors.length === 0
-            ? html`<${EmptyState}
-                title="No errors logged"
-                description="Errors appear here when failures are detected."
-              />`
-            : html`<ul class="telemetry-list">
-                ${errors.slice(0, 8).map(
-                  (err) => html`<li>
-                    <span class="telemetry-label">${err.fingerprint}</span>
-                    <span class="telemetry-count">${err.count}</span>
-                  </li>`,
-                )}
-              </ul>`}
-        </${Card}>
+      <!-- Summary stat cards -->
+      <div class="analytics-stats-row">
+        <${AnalyticsStat} icon="⚡" label="Agent Runs"
+          value=${data ? formatCount(data.agentRuns) : "–"} />
+        <${AnalyticsStat} icon="✦" label="Skill Invocations"
+          value=${data ? formatCount(data.skillInvocations) : "–"} />
+        <${AnalyticsStat} icon="⚙" label="MCP Tools"
+          value=${data ? formatCount(data.mcpToolCalls) : "–"} />
+        <${AnalyticsStat} icon="≈" label="Avg / Day"
+          value=${data ? formatCount(data.avgPerDay) : "–"} />
+        <${AnalyticsStat} icon="🕐" label="Last Active"
+          value=${data?.lastActiveAt ? formatRelative(data.lastActiveAt) : "–"} />
+      </div>
+
+      <!-- Activity trend chart -->
+      <${Card} title="Activity Trend" class="analytics-trend-card">
+        <div class="analytics-trend-header">
+          <div class="analytics-trend-tabs">
+            ${TREND_TABS.map((tab) => html`
+              <button key=${tab}
+                class="analytics-trend-tab ${trendTab === tab ? "active" : ""}"
+                onClick=${() => setTrendTab(tab)}>
+                ${tab === "agents" ? "Agents" : tab === "skills" ? "Skills" : "MCP Tools"}
+              </button>
+            `)}
+          </div>
+        </div>
+
+        ${hasTrend ? html`
+          <div class="analytics-legend">
+            <${ChartLegend}
+              label=${trendTab === "agents" ? "AGENTS" : trendTab === "skills" ? "SKILLS" : "MCP TOOLS"}
+              seriesMap=${trendSeriesMap}
+              palette=${trendPalette}
+            />
+          </div>
+          <${TrendLines} dates=${trend.dates} seriesMap=${trendSeriesMap} palette=${trendPalette} />
+        ` : html`
+          <${EmptyState} title="No activity data"
+            description="Agent runs will appear here once they start." />
+        `}
+      </${Card}>
 
-        <${Card} title="Executors">
-          ${executorRows.length === 0
-            ? html`<${EmptyState}
-                title="No executor data"
-                description="Run tasks to populate executor usage."
-              />`
-            : html`<ul class="telemetry-list">
-                ${executorRows.map(
-                  ([name, count]) => html`<li>
-                    <span class="telemetry-label">${name}</span>
-                    <span class="telemetry-count">${count}</span>
-                  </li>`,
-                )}
-              </ul>`}
+      <!-- Top-N bar charts row -->
+      <div class="analytics-top-grid">
+        <${Card} title="Top Agents">
+          <${TopBarChart} items=${data?.topAgents || []}
+            palette=${AGENT_PALETTE} title="Top Agents" />
+        </${Card}>
+        <${Card} title="Top Skills">
+          <${TopBarChart} items=${data?.topSkills || []}
+            palette=${SKILL_PALETTE} title="Top Skills" />
+        </${Card}>
+        <${Card} title="Top MCP Tools">
+          <${TopBarChart} items=${data?.topMcpTools || []}
+            palette=${MCP_PALETTE} title="Top MCP Tools" />
         </${Card}>
       </div>
 
+      <!-- Errors + alerts (preserved from classic telemetry) -->
+      <${ClassicTelemetry} />
+    </section>
+  `;
+}
+
+// ── Classic error/alert section ──────────────────────────────────────────────
+
+function ClassicTelemetry() {
+  const errors = telemetryErrors.value || [];
+  const alerts = telemetryAlerts.value || [];
+  const alertRows = useMemo(() => alerts.slice(-10).reverse(), [alerts]);
+  if (!errors.length && !alerts.length) return null;
+
+  return html`
+    <div class="telemetry-grid">
+      <${Card} title="Top Errors">
+        ${errors.length === 0
+          ? html`<${EmptyState} title="No errors logged"
+              description="Errors appear here when failures are detected." />`
+          : html`<ul class="telemetry-list">
+              ${errors.slice(0, 8).map((err) => html`
+                <li key=${err.fingerprint}>
+                  <span class="telemetry-label">${err.fingerprint}</span>
+                  <span class="telemetry-count">${err.count}</span>
+                </li>`)}
+            </ul>`}
+      </${Card}>
+
       <${Card} title="Recent Alerts">
         ${alertRows.length === 0
-          ? html`<${EmptyState}
-              title="No alerts"
-              description="Analyzer alerts will show up here."
-            />`
+          ? html`<${EmptyState} title="No alerts"
+              description="Analyzer alerts will show up here." />`
           : html`<ul class="telemetry-alerts">
-              ${alertRows.map(
-                (alert) => html`<li>
+              ${alertRows.map((alert) => html`
+                <li key=${(alert.attempt_id || "") + (alert.type || "")}>
                   <div>
                     <div class="telemetry-alert-title">
                       ${alert.type || "alert"}
-                      <${Badge} tone=${severityBadge(alert.severity)}>${
-                        String(alert.severity || "medium").toUpperCase()
-                      }</${Badge}>
+                      <${Badge} tone=${severityBadge(alert.severity)}>
+                        ${String(alert.severity || "medium").toUpperCase()}
+                      </${Badge}>
                     </div>
                     <div class="telemetry-alert-meta">
                       ${alert.attempt_id || "unknown"}
                       ${alert.executor ? html` · ${alert.executor}` : ""}
                     </div>
                   </div>
-                </li>`,
-              )}
+                </li>`)}
             </ul>`}
       </${Card}>
-    </section>
+    </div>
   `;
 }

package/ui/tabs/workflows.js

@@ -1116,11 +1116,9 @@ function WorkflowAgentLibraryPicker({ config, onUpdate }) {
     if (agents.length > 0) { setExpanded(e => !e); return; }
     setLoading(true);
     try {
-      const res = await apiFetch("/api/library?type=agent");
-      if (res.ok) {
-        const data = await res.json();
-        setAgents(data.entries || data || []);
-      }
+      const res = await apiFetch("/api/library?type=agent&agentType=task");
+      const data = Array.isArray(res?.data) ? res.data : [];
+      setAgents(data);
     } catch { /* ignore */ }
     setLoading(false);
     setExpanded(true);
@@ -2321,6 +2319,25 @@ export function WorkflowsTab() {
     loadNodeTypes();
   }, []);
 
+  useEffect(() => {
+    const onWorkspaceSwitched = () => {
+      activeWorkflow.value = null;
+      selectedRunId.value = null;
+      selectedRunDetail.value = null;
+      workflowRuns.value = [];
+      workflowRunsLimit.value = WORKFLOW_RUN_PAGE_SIZE;
+      viewMode.value = "list";
+      setRouteParams({}, { replace: true, skipGuard: true });
+      loadWorkflows();
+      loadTemplates();
+      loadNodeTypes();
+    };
+    window.addEventListener("ve:workspace-switched", onWorkspaceSwitched);
+    return () => {
+      window.removeEventListener("ve:workspace-switched", onWorkspaceSwitched);
+    };
+  }, []);
+
   useEffect(() => {
     const route = routeParams.value || {};
     const workflowId = String(route.workflowId || "").trim();