release: 0.6.1 — patter.* OTel span attributes (Python)

dashboard-app/package.json

@@ -9,6 +9,7 @@
     "build": "tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "tsc --noEmit",
+    "test": "vitest run",
     "sync": "node ./scripts/sync.mjs"
   },
   "dependencies": {
@@ -21,6 +22,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
-    "vite-plugin-singlefile": "^2.0.3"
+    "vite-plugin-singlefile": "^2.0.3",
+    "vitest": "^2.1.4"
   }
 }

dashboard-app/src/App.tsx

@@ -3,6 +3,7 @@ import { Topbar } from './components/Topbar';
 import { PageHeader } from './components/PageHeader';
 import { Metric, type MetricBucket } from './components/Metric';
 import { CallTable, type Call } from './components/CallTable';
+import { fmtCostUSD } from './components/format';
 import { LiveCallPanel } from './components/LiveCallPanel';
 import { MetricsPanel } from './components/MetricsPanel';
 import { useDashboardData } from './hooks/useDashboardData';
@@ -174,6 +175,7 @@ export function App() {
             spark={sparkTotalCalls.heights}
             buckets={toBuckets(sparkTotalCalls)}
             onSelectCall={setSelectedId}
+            kind="count"
           />
           <Metric
             label="Avg latency p95"
@@ -182,13 +184,15 @@ export function App() {
             spark={sparkLatency.heights}
             buckets={toBuckets(sparkLatency)}
             onSelectCall={setSelectedId}
+            kind="latency"
           />
           <Metric
             label={`Spend · ${RANGE_LABEL[range]}`}
-            value={`$${rangeSpend.toFixed(2)}`}
+            value={fmtCostUSD(rangeSpend)}
             spark={sparkSpend.heights}
             buckets={toBuckets(sparkSpend)}
             onSelectCall={setSelectedId}
+            kind="spend"
           />
           <Metric
             label="Active now"
@@ -199,6 +203,7 @@ export function App() {
             spark={sparkLive.heights}
             buckets={toBuckets(sparkLive)}
             onSelectCall={setSelectedId}
+            kind="count"
           />
         </div>
 

dashboard-app/src/components/CallTable.tsx

@@ -1,10 +1,13 @@
 import { useMemo } from 'react';
-import { fmtDuration, fmtPhone } from './format';
+import { fmtDuration, fmtPhone, fmtCostUSD } from './format';
 import { IconArrowDown, IconArrowUp, IconSearch } from './icons';
 
 export interface CallCost {
   telco?: number;
   llm?: number;
+  stt?: number;
+  tts?: number;
+  /** @deprecated Sum of stt+tts kept for legacy aggregate-spend callers. */
   sttTts?: number;
   cached?: number;
   total?: number;
@@ -25,12 +28,26 @@ export interface Call {
   duration?: number;
   latencyP95?: number;
   latencyP50?: number;
+  /** avg(llm_ms) across this call's turns — for the waterfall llm bar. */
+  llmAvg?: number;
   sttAvg?: number;
   ttsAvg?: number;
+  /** Number of completed turns. p50/p95 are statistically meaningful only when this is >= 5. */
+  turnCount?: number;
+  /** p50 of agent_response_ms (wait time after user stops speaking) — user-perceived latency. */
+  agentResponseP50?: number;
+  /** p95 of agent_response_ms — user-perceived latency outlier. */
+  agentResponseP95?: number;
   cost: CallCost;
   agent?: string;
   model?: string;
   mode?: CallMode;
+  sttProvider?: string;
+  ttsProvider?: string;
+  /** Model identifier within the provider, e.g. "ink-whisper", "eleven_flash_v2_5", "gpt-oss-120b". */
+  sttModel?: string;
+  ttsModel?: string;
+  llmModel?: string;
   transcriptKey?: string;
   endedAgo?: number;
 }
@@ -98,7 +115,7 @@ function CallRow({ call, isSelected, onSelect, isNew }: CallRowProps) {
           '—'
         )}
       </td>
-      <td className="num-cell">${totalCost.toFixed(2)}</td>
+      <td className="num-cell">{fmtCostUSD(totalCost)}</td>
     </tr>
   );
 }

dashboard-app/src/components/CostPanel.tsx

@@ -1,51 +1,83 @@
 import type { Call } from './CallTable';
+import { fmtCostUSD } from './format';
 
 export interface CostPanelProps {
   call: Call | null;
 }
 
+function titleCase(s: string): string {
+  if (s.length === 0) return s;
+  // Strip provider-key transport suffixes (_ws, _rest) and role suffixes
+  // (_stt, _tts, _llm). Repeated `+` handles compound suffixes like
+  // "cartesia_tts_ws" -> "cartesia". The SDK uses provider_key like
+  // "elevenlabs_ws" / "cartesia_stt" to disambiguate adapter classes;
+  // the suffix is internal noise in user-facing UI.
+  const cleaned = s.replace(/(?:_(?:ws|rest|stt|tts|llm))+$/i, '');
+  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+}
+
 export function CostPanel({ call }: CostPanelProps) {
   if (!call || !call.cost?.telco) return null;
 
   const c = call.cost;
   const telco = c.telco ?? 0;
   const llm = c.llm ?? 0;
-  const sttTts = c.sttTts ?? 0;
+  const stt = c.stt ?? 0;
+  const tts = c.tts ?? 0;
+  const sttTtsLegacy = c.sttTts ?? stt + tts;
   const cached = c.cached ?? 0;
 
-  const subtotal = telco + llm + sttTts;
+  const subtotal = telco + llm + sttTtsLegacy;
   const total = subtotal - cached;
   const seg = (v: number) => (subtotal > 0 ? (v / subtotal) * 100 : 0);
 
+  const sttLabel = call.sttProvider
+    ? `${titleCase(call.sttProvider)} STT${call.sttModel ? ` · ${call.sttModel}` : ''}`
+    : 'STT';
+  const ttsLabel = call.ttsProvider
+    ? `${titleCase(call.ttsProvider)} TTS${call.ttsModel ? ` · ${call.ttsModel}` : ''}`
+    : 'TTS';
+  const llmLabel = call.llmModel
+    ? `${call.model ? titleCase(call.model) + ' · ' : ''}${call.llmModel}`
+    : call.model || 'LLM';
+
   return (
     <div className="rr-card peach">
       <h3 style={{ marginBottom: 14 }}>Cost breakdown</h3>
       <div className="cost-bar">
         <i style={{ background: '#cc0000', width: seg(telco) + '%' }} />
         <i style={{ background: '#DF9367', width: seg(llm) + '%' }} />
-        <i style={{ background: '#1a1a1a', width: seg(sttTts) + '%' }} />
+        <i style={{ background: '#1a1a1a', width: seg(stt) + '%' }} />
+        <i style={{ background: '#6c6c6c', width: seg(tts) + '%' }} />
       </div>
       <div className="stack-row">
         <span className="lbl">
           <span className="swatch" style={{ background: '#cc0000' }}></span>
           {call.carrier === 'twilio' ? 'Twilio' : 'Telnyx'}
         </span>
-        <span className="v">${telco.toFixed(3)}</span>
+        <span className="v">{fmtCostUSD(telco)}</span>
       </div>
       <div className="stack-row">
         <span className="lbl">
           <span className="swatch" style={{ background: '#DF9367' }}></span>
-          {call.model || 'LLM'}
+          {llmLabel}
         </span>
-        <span className="v">${llm.toFixed(3)}</span>
-        {cached > 0 && <span className="saved">−${cached.toFixed(3)} cached</span>}
+        <span className="v">{fmtCostUSD(llm)}</span>
+        {cached > 0 && <span className="saved">−{fmtCostUSD(cached)} cached</span>}
       </div>
       <div className="stack-row">
         <span className="lbl">
           <span className="swatch" style={{ background: '#1a1a1a' }}></span>
-          STT / TTS
+          {sttLabel}
+        </span>
+        <span className="v">{fmtCostUSD(stt)}</span>
+      </div>
+      <div className="stack-row">
+        <span className="lbl">
+          <span className="swatch" style={{ background: '#6c6c6c' }}></span>
+          {ttsLabel}
         </span>
-        <span className="v">${sttTts.toFixed(3)}</span>
+        <span className="v">{fmtCostUSD(tts)}</span>
       </div>
       <div className="stack-row">
         <span className="lbl">
@@ -61,7 +93,7 @@ export function CostPanel({ call }: CostPanelProps) {
             {call.status === 'live' ? '(running)' : ''}
           </span>
         </span>
-        <span className="v">${total.toFixed(3)}</span>
+        <span className="v">{fmtCostUSD(total)}</span>
       </div>
     </div>
   );

dashboard-app/src/components/LatencyPanel.tsx

@@ -4,48 +4,64 @@ export interface LatencyPanelProps {
   call: Call | null;
 }
 
+// 2 turn = almeno 1 turn user genuino oltre al firstMessage. Sotto a 2 i
+// percentili sono privi di senso (un singolo campione). Sopra a 2 sono
+// statisticamente magri ma informativi — meglio mostrarli che lasciare il
+// pannello con "—" quando la tabella sopra mostra già una p95 dal fallback
+// ad avg.
+const MIN_TURNS_FOR_PERCENTILES = 2;
+
 export function LatencyPanel({ call }: LatencyPanelProps) {
-  if (!call || !call.latencyP95) return null;
+  if (!call || (!call.latencyP95 && !call.agentResponseP95)) return null;
 
-  const stt = call.sttAvg || 0;
-  const llm = call.latencyP50 || 0;
-  const tts = call.ttsAvg || 0;
+  const stt = call.sttAvg ?? 0;
+  const llm = call.llmAvg ?? 0;
+  const tts = call.ttsAvg ?? 0;
   const total = stt + llm + tts;
   const max = Math.max(total, 800);
 
+  const turns = call.turnCount ?? 0;
+  const showPercentiles = turns >= MIN_TURNS_FOR_PERCENTILES;
+  const dash = '—';
+
   return (
     <div className="rr-card">
       <h3 style={{ marginBottom: 14 }}>Latency · this call</h3>
       <div className="lat-grid">
         <div className="latbox">
-          <div className="l">p50</div>
+          <div className="l">p50 round-trip</div>
           <div className="v">
-            {call.latencyP50}
-            <span className="u">ms</span>
+            {showPercentiles ? call.latencyP50 ?? dash : dash}
+            {showPercentiles && <span className="u">ms</span>}
           </div>
         </div>
-        <div className={'latbox' + (call.latencyP95 > 600 ? ' warn' : '')}>
-          <div className="l">p95</div>
+        <div className={'latbox' + (showPercentiles && (call.latencyP95 ?? 0) > 600 ? ' warn' : '')}>
+          <div className="l">p95 round-trip</div>
           <div className="v">
-            {call.latencyP95}
-            <span className="u">ms</span>
+            {showPercentiles ? call.latencyP95 ?? dash : dash}
+            {showPercentiles && <span className="u">ms</span>}
           </div>
         </div>
         <div className="latbox">
-          <div className="l">stt avg</div>
+          <div className="l">p50 wait</div>
           <div className="v">
-            {call.sttAvg}
-            <span className="u">ms</span>
+            {showPercentiles ? call.agentResponseP50 ?? dash : dash}
+            {showPercentiles && <span className="u">ms</span>}
           </div>
         </div>
-        <div className="latbox">
-          <div className="l">tts avg</div>
+        <div className={'latbox' + (showPercentiles && (call.agentResponseP95 ?? 0) > 600 ? ' warn' : '')}>
+          <div className="l">p95 wait</div>
           <div className="v">
-            {call.ttsAvg}
-            <span className="u">ms</span>
+            {showPercentiles ? call.agentResponseP95 ?? dash : dash}
+            {showPercentiles && <span className="u">ms</span>}
           </div>
         </div>
       </div>
+      {!showPercentiles && (
+        <div style={{ marginTop: -6, marginBottom: 10, fontSize: 11, opacity: 0.6 }}>
+          {turns} {turns === 1 ? 'turn' : 'turns'} — percentiles need ≥{MIN_TURNS_FOR_PERCENTILES}
+        </div>
+      )}
 
       <div className="waterfall">
         <div className="wf-row">
@@ -89,7 +105,7 @@ export function LatencyPanel({ call }: LatencyPanelProps) {
         <span>
           <i style={{ background: '#278EFF', opacity: 0.8 }}></i>tts
         </span>
-        <span style={{ marginLeft: 'auto' }}>total {total} ms</span>
+        <span style={{ marginLeft: 'auto' }}>avg wait {Math.round(total)} ms</span>
       </div>
     </div>
   );