bosun 0.41.2 → 0.41.4

package/ui/tabs/telemetry.js

@@ -260,6 +260,15 @@ function formatBytes(n) {
   return `${n}`;
 }
 
+function formatUsd(value) {
+  const amount = Number(value);
+  if (!Number.isFinite(amount)) return "–";
+  if (amount === 0) return "$0.00";
+  if (Math.abs(amount) < 0.01) return `$${amount.toFixed(4)}`;
+  if (Math.abs(amount) < 1) return `$${amount.toFixed(3)}`;
+  return `$${amount.toFixed(2)}`;
+}
+
 function formatShreddingLabel(value) {
   return String(value || "unknown")
     .replace(/[_-]+/g, " ")
@@ -318,10 +327,16 @@ function ShreddingPanel({ period }) {
   const {
     totalEvents = 0,
     totalOriginalChars = 0,
+    totalCompressedChars = 0,
     totalSavedChars = 0,
     avgSavedPct = 0,
     sortedDates = [],
+    dailyOriginal = {},
+    dailyCompressed = {},
     dailySaved = {},
+    dailySavedTokensEstimated = {},
+    dailyCostSavedUsd = {},
+    dailyReductionPct = {},
     dailyCounts = {},
     topAgents = [],
     stageCounts = {},
@@ -330,16 +345,38 @@ function ShreddingPanel({ period }) {
     liveCompaction = {},
     recentEvents = [],
     diagnostics = {},
+    totals = {},
+    estimation = {},
   } = data;
 
-  const sparkValues = sortedDates.map((d) => dailySaved[d] || 0);
+  const volumeSeriesMap = {
+    original: sortedDates.map((d) => dailyOriginal[d] || 0),
+    compressed: sortedDates.map((d) => dailyCompressed[d] || 0),
+    saved: sortedDates.map((d) => dailySaved[d] || 0),
+  };
+  const reductionSeriesMap = {
+    "reduction %": sortedDates.map((d) => dailyReductionPct[d] || 0),
+  };
+  const tokenSeriesMap = {
+    "tokens saved": sortedDates.map((d) => dailySavedTokensEstimated[d] || 0),
+  };
+  const costSeriesMap = {
+    "cost avoided": sortedDates.map((d) => dailyCostSavedUsd[d] || 0),
+  };
   const sparkCounts = sortedDates.map((d) => dailyCounts[d] || 0);
   const stageItems = Object.entries(stageCounts)
     .sort((a, b) => b[1] - a[1])
     .map(([name, count]) => ({ name: formatShreddingLabel(name), count }));
   const liveEvents = liveCompaction?.totalEvents || stageCounts.live_tool_compaction || 0;
   const liveSavedChars = liveCompaction?.totalSavedChars || 0;
+  const liveSavedTokensEstimated = liveCompaction?.savedTokensEstimated || 0;
   const liveAvgSavedPct = liveCompaction?.avgSavedPct || 0;
+  const totalSavedTokensEstimated = totals?.savedTokensEstimated || 0;
+  const totalEstimatedCostSavedUsd = totals?.estimatedCostSavedUsd ?? null;
+  const hasCostEstimate = Number.isFinite(Number(totalEstimatedCostSavedUsd))
+    && Number(totalEstimatedCostSavedUsd) > 0;
+  const hasCostTrend = sortedDates.some((day) => Number(dailyCostSavedUsd?.[day] || 0) > 0);
+  const observedCostRate = estimation?.blendedCostPerMillionTokensUsd ?? null;
 
   return html`
     <${Paper} elevation=${1} sx=${{ p: 2, mb: 2 }}>
@@ -355,11 +392,14 @@ function ShreddingPanel({ period }) {
 
       <${Stack} direction=${{ xs: "column", sm: "row" }} spacing=${1.5} sx=${{ mb: 2, flexWrap: "wrap" }}>
         <${AnalyticsStat} icon="✂" label="Events" value=${formatCount(totalEvents)} />
+        <${AnalyticsStat} icon="📦" label="Original Chars" value=${formatBytes(totalOriginalChars)} />
+        <${AnalyticsStat} icon="🧱" label="Compressed Chars" value=${formatBytes(totalCompressedChars)} />
         <${AnalyticsStat} icon="📉" label="Chars Saved" value=${formatBytes(totalSavedChars)} />
         <${AnalyticsStat} icon="%" label="Avg Reduction" value=${avgSavedPct > 0 ? `${avgSavedPct}%` : "–"} />
-        <${AnalyticsStat} icon="📦" label="Original Chars" value=${formatBytes(totalOriginalChars)} />
+        <${AnalyticsStat} icon="🧮" label="Est. Tokens Saved" value=${formatCount(totalSavedTokensEstimated)} />
+        <${AnalyticsStat} icon="💵" label="Est. Cost Avoided" value=${hasCostEstimate ? formatUsd(totalEstimatedCostSavedUsd) : "Unavailable"} />
         <${AnalyticsStat} icon="⚡" label="Live Events" value=${formatCount(liveEvents)} />
-        <${AnalyticsStat} icon="🧠" label="Live Avg" value=${liveAvgSavedPct > 0 ? `${liveAvgSavedPct}%` : "–"} />
+        <${AnalyticsStat} icon="🧠" label="Live Saved Tokens" value=${formatCount(liveSavedTokensEstimated)} />
       <//>
 
       ${(diagnostics?.excludedSynthetic || diagnostics?.excludedNoop || diagnostics?.unknownAttribution)
@@ -373,14 +413,24 @@ function ShreddingPanel({ period }) {
         `
         : null}
 
+      <${Alert} severity=${hasCostEstimate ? "success" : "info"} sx=${{ mb: 2 }}>
+        Token savings are estimated from characters using ${estimation?.charsPerToken || 4} chars per token.
+        ${hasCostEstimate
+          ? ` Cost avoided uses the observed blended session rate of ${formatUsd((observedCostRate || 0) / 1_000_000)} per token (${formatUsd(observedCostRate)} per million) across ${formatCount(estimation?.pricedSessions || 0)} priced session${(estimation?.pricedSessions || 0) === 1 ? "" : "s"}.`
+          : " Cost avoided is unavailable because recent completed sessions did not record usable token-and-cost pairs."}
+      <//>
+
       <${Stack} direction=${{ xs: "column", md: "row" }} spacing=${2} sx=${{ mb: 2 }}>
         <${Paper} variant="outlined" sx=${{ p: 1.5, flex: 1 }}>
-          <${Typography} variant="subtitle2" gutterBottom>Chars Saved per Day<//>
-          ${sparkValues.length > 1 ? html`
+          <${Typography} variant="subtitle2" gutterBottom>Context Volume per Day<//>
+          <${Typography} variant="caption" color="text.secondary">
+            Original context versus compressed output and net savings.
+          <//>
+          ${sortedDates.length > 1 ? html`
             <${Box} sx=${{ overflow: "hidden" }}>
               <${TrendLines}
                 dates=${sortedDates}
-                seriesMap=${{ "chars saved": sparkValues }}
+                seriesMap=${volumeSeriesMap}
                 palette=${SHRED_PALETTE}
               />
             <//>
@@ -388,13 +438,35 @@ function ShreddingPanel({ period }) {
         <//>
 
         <${Paper} variant="outlined" sx=${{ p: 1.5, flex: 1 }}>
-          <${Typography} variant="subtitle2" gutterBottom>By Agent Type<//>
-          <${TopBarChart} items=${topAgents} palette=${SHRED_PALETTE} title="By Agent" />
+          <${Typography} variant="subtitle2" gutterBottom>Reduction Efficiency<//>
+          <${Typography} variant="caption" color="text.secondary">
+            Daily reduction rate with ${sparkCounts.length ? sparkCounts.reduce((sum, value) => sum + value, 0) : 0} tracked events in this window.
+          <//>
+          ${sortedDates.length > 1 ? html`
+            <${Box} sx=${{ overflow: "hidden" }}>
+              <${TrendLines}
+                dates=${sortedDates}
+                seriesMap=${reductionSeriesMap}
+                palette=${SHRED_PALETTE}
+              />
+            <//>
+          ` : html`<${EmptyState} title="Not enough data" description="Need ≥2 days of events." />`}
         <//>
 
         <${Paper} variant="outlined" sx=${{ p: 1.5, flex: 1 }}>
-          <${Typography} variant="subtitle2" gutterBottom>By Stage<//>
-          <${TopBarChart} items=${stageItems} palette=${SHRED_PALETTE} title="By Stage" />
+          <${Typography} variant="subtitle2" gutterBottom>Estimated Input Tokens Saved<//>
+          <${Typography} variant="caption" color="text.secondary">
+            Estimated prompt-token savings from context compaction.
+          <//>
+          ${sortedDates.length > 1 ? html`
+            <${Box} sx=${{ overflow: "hidden" }}>
+              <${TrendLines}
+                dates=${sortedDates}
+                seriesMap=${tokenSeriesMap}
+                palette=${SHRED_PALETTE}
+              />
+            <//>
+          ` : html`<${EmptyState} title="Not enough data" description="Need ≥2 days of events." />`}
         <//>
       <//>
 
@@ -416,6 +488,29 @@ function ShreddingPanel({ period }) {
         <//>
       ` : null}
 
+      <${Stack} direction=${{ xs: "column", md: "row" }} spacing=${2} sx=${{ mb: 2 }}>
+        <${Paper} variant="outlined" sx=${{ p: 1.5, flex: 1 }}>
+          <${Typography} variant="subtitle2" gutterBottom>Estimated Cost Avoided per Day<//>
+          ${hasCostTrend ? html`
+            <${Box} sx=${{ overflow: "hidden" }}>
+              <${TrendLines}
+                dates=${sortedDates}
+                seriesMap=${costSeriesMap}
+                palette=${SHRED_PALETTE}
+              />
+            <//>
+          ` : html`<${EmptyState} title="No cost estimate yet" description="Need recent session pricing data to project API cost savings." />`}
+        <//>
+        <${Paper} variant="outlined" sx=${{ p: 1.5, flex: 1 }}>
+          <${Typography} variant="subtitle2" gutterBottom>By Agent Type<//>
+          <${TopBarChart} items=${topAgents} palette=${SHRED_PALETTE} title="By Agent" />
+        <//>
+        <${Paper} variant="outlined" sx=${{ p: 1.5, flex: 1 }}>
+          <${Typography} variant="subtitle2" gutterBottom>By Stage<//>
+          <${TopBarChart} items=${stageItems} palette=${SHRED_PALETTE} title="By Stage" />
+        <//>
+      <//>
+
       ${(liveEvents > 0 || topCompactionFamilies.length > 0 || topCommandFamilies.length > 0) ? html`
         <${Stack} direction=${{ xs: "column", md: "row" }} spacing=${2} sx=${{ mb: 2 }}>
           <${Paper} variant="outlined" sx=${{ p: 1.5, flex: 1 }}>
@@ -433,7 +528,7 @@ function ShreddingPanel({ period }) {
                 Saved ${formatBytes(liveSavedChars)} across ${formatCount(liveEvents)} live-compacted outputs.
               <//>
               <${Typography} variant="caption" color="text.secondary">
-                Daily samples: ${sparkCounts.length ? sparkCounts.reduce((sum, value) => sum + value, 0) : 0} tracked shredding events in this window.
+                Estimated ${formatCount(liveSavedTokensEstimated)} input tokens avoided during live compaction.
               <//>
               <${Chip}
                 label=${liveAvgSavedPct > 0 ? `${liveAvgSavedPct}% average live reduction` : "Live reductions pending"}
@@ -456,8 +551,11 @@ function ShreddingPanel({ period }) {
                 <${TableCell}>Stage<//>
                 <${TableCell}>Family<//>
                 <${TableCell} align="right">Original<//>
+                <${TableCell} align="right">Compressed<//>
                 <${TableCell} align="right">Saved<//>
                 <${TableCell} align="right">Reduction<//>
+                <${TableCell} align="right">Est. Tokens<//>
+                <${TableCell} align="right">Est. Cost<//>
                 <${TableCell}>Agent<//>
               </${TableRow}>
             <//>
@@ -480,6 +578,9 @@ function ShreddingPanel({ period }) {
                   <${TableCell} align="right">
                     <${Typography} variant="caption">${formatBytes(ev.originalChars)}<//>
                   <//>
+                  <${TableCell} align="right">
+                    <${Typography} variant="caption">${formatBytes(ev.compressedChars)}<//>
+                  <//>
                   <${TableCell} align="right">
                     <${Typography} variant="caption" color="success.main">
                       ${ev.savedChars > 0 ? `-${formatBytes(ev.savedChars)}` : "0"}
@@ -493,6 +594,14 @@ function ShreddingPanel({ period }) {
                       variant="outlined"
                     />
                   <//>
+                  <${TableCell} align="right">
+                    <${Typography} variant="caption">${formatCount(ev.estimatedSavedTokens || 0)}<//>
+                  <//>
+                  <${TableCell} align="right">
+                    <${Typography} variant="caption">
+                      ${Number.isFinite(Number(ev.estimatedCostSavedUsd)) ? formatUsd(ev.estimatedCostSavedUsd) : "–"}
+                    <//>
+                  <//>
                   <${TableCell}>
                     <${Typography} variant="caption" color="text.secondary">
                       ${ev.agentType || "–"}
@@ -608,6 +717,15 @@ export function TelemetryTab() {
           value=${formatDurationMs(lifetimeTotals?.durationMs || 0)} />
       <//>
 
+      ${data?.diagnostics?.agentRunSource ? html`
+        <${Alert} severity="info" sx=${{ mb: 2 }}>
+          Agent Runs are currently sourced from ${data.diagnostics.agentRunSource === "completed_sessions" ? "the persistent completed-session ledger" : "session-start telemetry"}.
+          ${data.diagnostics.agentRunSource === "completed_sessions"
+            ? ` Counted ${formatCount(data.diagnostics.completedSessions || 0)} completed sessions in this window.`
+            : ` Counted ${formatCount(data.diagnostics.sessionStarts || 0)} session-start events in this window.`}
+        <//>
+      ` : null}
+
       <!-- Activity trend chart -->
       <${Paper} elevation=${1} sx=${{ p: 2, mb: 2 }}>
         <${Typography} variant="h6" gutterBottom>Activity Trend<//>

package/ui/tabs/workflow-canvas-utils.mjs

@@ -35,6 +35,118 @@ function getLabel(type) {
   return String(type || "").split(".").pop()?.replace(/_/g, " ") || String(type || "");
 }
 
+function normalizePreviewLine(text, maxLength = 84) {
+  const compact = String(text || "").replace(/\s+/g, " ").trim();
+  if (!compact) return "";
+  return compact.length > maxLength
+    ? `${compact.slice(0, Math.max(0, maxLength - 1))}…`
+    : compact;
+}
+
+function collectPreviewText(value, lines = [], seen = new Set(), depth = 0) {
+  if (value == null || depth > 2 || lines.length >= 6) return lines;
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    const rawLines = String(value)
+      .split(/\r?\n/)
+      .map((line) => normalizePreviewLine(line))
+      .filter(Boolean);
+    for (const line of rawLines) {
+      if (seen.has(line)) continue;
+      seen.add(line);
+      lines.push(line);
+      if (lines.length >= 6) break;
+    }
+    return lines;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value.slice(0, 4)) {
+      collectPreviewText(item, lines, seen, depth + 1);
+      if (lines.length >= 6) break;
+    }
+    return lines;
+  }
+  if (typeof value !== "object") return lines;
+
+  const prioritizedKeys = [
+    "summary",
+    "narrative",
+    "text",
+    "message",
+    "content",
+    "output",
+    "result",
+    "answer",
+    "response",
+    "stdout",
+    "stderr",
+  ];
+  let matched = false;
+  for (const key of prioritizedKeys) {
+    if (!Object.prototype.hasOwnProperty.call(value, key)) continue;
+    matched = true;
+    collectPreviewText(value[key], lines, seen, depth + 1);
+    if (lines.length >= 6) return lines;
+  }
+  if (Array.isArray(value.lines)) {
+    matched = true;
+    collectPreviewText(value.lines, lines, seen, depth + 1);
+  }
+  if (value.preview && typeof value.preview === "object") {
+    matched = true;
+    collectPreviewText(value.preview, lines, seen, depth + 1);
+  }
+  if (!matched) {
+    try {
+      const json = JSON.stringify(value);
+      if (json) collectPreviewText(json, lines, seen, depth + 1);
+    } catch {}
+  }
+  return lines;
+}
+
+function extractPreviewTokenCount(value) {
+  if (!value || typeof value !== "object") return null;
+  const candidates = [
+    value.tokenCount,
+    value.totalTokens,
+    value.total_tokens,
+    value.tokens,
+    value.usage?.total_tokens,
+    value.usage?.totalTokens,
+    value.tokenUsage?.totalTokens,
+    value.metrics?.total_tokens,
+    value.metrics?.totalTokens,
+  ];
+  for (const candidate of candidates) {
+    const parsed = Number(candidate);
+    if (Number.isFinite(parsed) && parsed >= 0) {
+      return Math.max(0, Math.round(parsed));
+    }
+  }
+  const input = Number(
+    value.inputTokens
+    ?? value.input_tokens
+    ?? value.promptTokens
+    ?? value.prompt_tokens
+    ?? value.usage?.prompt_tokens
+    ?? value.usage?.inputTokens
+    ?? value.tokenUsage?.inputTokens,
+  );
+  const output = Number(
+    value.outputTokens
+    ?? value.output_tokens
+    ?? value.completionTokens
+    ?? value.completion_tokens
+    ?? value.usage?.completion_tokens
+    ?? value.usage?.outputTokens
+    ?? value.tokenUsage?.outputTokens,
+  );
+  if (Number.isFinite(input) || Number.isFinite(output)) {
+    return Math.max(0, Math.round((Number.isFinite(input) ? input : 0) + (Number.isFinite(output) ? output : 0)));
+  }
+  return null;
+}
+
 export function createGraphSnapshot(nodes = [], edges = []) {
   return {
     nodes: normalizeGraphValue(nodes),
@@ -217,3 +329,21 @@ export function buildNodeStatusesFromRunDetail(run) {
 
   return statuses;
 }
+
+export function resolveNodeOutputPreview(_nodeType, livePreview = null, rawOutput = null) {
+  const liveLines = Array.isArray(livePreview?.lines)
+    ? livePreview.lines.map((line) => normalizePreviewLine(line)).filter(Boolean)
+    : [];
+  const liveTokenCount = extractPreviewTokenCount(livePreview);
+  if (liveLines.length || liveTokenCount != null) {
+    return {
+      lines: liveLines.slice(0, 3),
+      tokenCount: liveTokenCount,
+    };
+  }
+
+  return {
+    lines: collectPreviewText(rawOutput).slice(0, 3),
+    tokenCount: extractPreviewTokenCount(rawOutput),
+  };
+}