@absolutejs/voice 0.0.22-beta.500 → 0.0.22-beta.501

package/dist/vue/index.js

@@ -12082,14 +12082,569 @@ var VoiceWidget = defineComponent18({
     };
   }
 });
+// src/vue/VoiceCostDashboard.ts
+import { computed as computed11, defineComponent as defineComponent19, h as h19 } from "vue";
+
+// src/client/costDashboard.ts
+var padTwo = (value) => String(value).padStart(2, "0");
+var formatBucketKey = (epochMs, bucketBy) => {
+  const date = new Date(epochMs);
+  const y = date.getUTCFullYear();
+  const m = padTwo(date.getUTCMonth() + 1);
+  const d = padTwo(date.getUTCDate());
+  const h19 = padTwo(date.getUTCHours());
+  if (bucketBy === "month")
+    return `${y}-${m}`;
+  if (bucketBy === "day")
+    return `${y}-${m}-${d}`;
+  return `${y}-${m}-${d}T${h19}`;
+};
+var isCostBreakdown = (value) => Boolean(value) && typeof value === "object" && typeof value.totalUsd === "number";
+var emptyBucket = (bucketKey) => ({
+  bucketKey,
+  callCount: 0,
+  llmUsd: 0,
+  sttUsd: 0,
+  telephonyMinutes: 0,
+  telephonyUsd: 0,
+  totalUsd: 0,
+  ttsUsd: 0
+});
+var accumulate = (bucket, payload) => {
+  bucket.callCount += 1;
+  bucket.llmUsd += payload.llm.usd;
+  bucket.sttUsd += payload.stt.usd;
+  bucket.ttsUsd += payload.tts.usd;
+  bucket.telephonyUsd += payload.telephony.usd;
+  bucket.telephonyMinutes += payload.telephony.minutes;
+  bucket.totalUsd += payload.totalUsd;
+};
+var roundCurrency = (bucket) => {
+  bucket.llmUsd = Math.round(bucket.llmUsd * 1e6) / 1e6;
+  bucket.sttUsd = Math.round(bucket.sttUsd * 1e6) / 1e6;
+  bucket.ttsUsd = Math.round(bucket.ttsUsd * 1e6) / 1e6;
+  bucket.telephonyUsd = Math.round(bucket.telephonyUsd * 1e6) / 1e6;
+  bucket.totalUsd = Math.round(bucket.totalUsd * 1e6) / 1e6;
+};
+var buildVoiceCostDashboardReport = (options) => {
+  const bucketBy = options.bucketBy ?? "day";
+  const fromMs = options.fromMs ?? Number.NEGATIVE_INFINITY;
+  const toMs = options.toMs ?? Number.POSITIVE_INFINITY;
+  const buckets = new Map;
+  const grandTotal = emptyBucket("total");
+  let minMs = Number.POSITIVE_INFINITY;
+  let maxMs = Number.NEGATIVE_INFINITY;
+  for (const event of options.events) {
+    if (event.type !== "cost.ready")
+      continue;
+    if (event.at < fromMs || event.at > toMs)
+      continue;
+    if (!isCostBreakdown(event.payload))
+      continue;
+    minMs = Math.min(minMs, event.at);
+    maxMs = Math.max(maxMs, event.at);
+    const bucketKey = formatBucketKey(event.at, bucketBy);
+    let bucket = buckets.get(bucketKey);
+    if (!bucket) {
+      bucket = emptyBucket(bucketKey);
+      buckets.set(bucketKey, bucket);
+    }
+    accumulate(bucket, event.payload);
+    accumulate(grandTotal, event.payload);
+  }
+  for (const bucket of buckets.values()) {
+    roundCurrency(bucket);
+  }
+  roundCurrency(grandTotal);
+  return {
+    buckets: Array.from(buckets.values()).sort((a, b) => a.bucketKey.localeCompare(b.bucketKey)),
+    generatedAt: Date.now(),
+    grandTotal,
+    windowEndMs: Number.isFinite(maxMs) ? maxMs : 0,
+    windowStartMs: Number.isFinite(minMs) ? minMs : 0
+  };
+};
+
+// src/vue/VoiceCostDashboard.ts
+var formatUsd = (value, currency = "USD") => new Intl.NumberFormat("en-US", {
+  currency,
+  maximumFractionDigits: 4,
+  minimumFractionDigits: 2,
+  style: "currency"
+}).format(value);
+var formatInteger = (value) => new Intl.NumberFormat("en-US").format(value);
+var renderRow = (bucket, currency, isTotal) => h19("tr", {
+  "data-bucket-key": bucket.bucketKey,
+  style: {
+    borderTop: isTotal ? "2px solid rgba(255,255,255,0.15)" : undefined,
+    fontWeight: isTotal ? 600 : undefined
+  }
+}, [
+  h19("td", { style: { padding: "8px 12px" } }, bucket.bucketKey),
+  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatInteger(bucket.callCount)),
+  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.llmUsd, currency)),
+  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.ttsUsd, currency)),
+  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.sttUsd, currency)),
+  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.telephonyUsd, currency)),
+  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.totalUsd, currency))
+]);
+var VoiceCostDashboard = defineComponent19({
+  name: "VoiceCostDashboard",
+  props: {
+    bucketBy: {
+      default: "day",
+      type: String
+    },
+    currency: { default: "USD", type: String },
+    emptyMessage: { default: "No cost events in window.", type: String },
+    events: {
+      required: true,
+      type: Array
+    },
+    fromMs: Number,
+    title: { default: "Voice cost dashboard", type: String },
+    toMs: Number
+  },
+  setup(props) {
+    const report = computed11(() => buildVoiceCostDashboardReport({
+      bucketBy: props.bucketBy,
+      events: props.events,
+      fromMs: props.fromMs,
+      toMs: props.toMs
+    }));
+    return () => {
+      const r = report.value;
+      const rows = r.buckets.map((bucket) => renderRow(bucket, props.currency, false));
+      rows.push(renderRow(r.grandTotal, props.currency, true));
+      return h19("section", {
+        "aria-label": "voice-cost-dashboard",
+        class: "absolute-voice-cost-dashboard",
+        style: {
+          background: "#0f172a",
+          borderRadius: "16px",
+          color: "#f8fafc",
+          fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          padding: "20px"
+        }
+      }, [
+        h19("header", {
+          style: {
+            alignItems: "baseline",
+            display: "flex",
+            gap: "12px",
+            marginBottom: "12px"
+          }
+        }, [
+          h19("strong", { style: { fontSize: "16px" } }, props.title),
+          h19("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.buckets.length} buckets \xB7 grand total ${formatUsd(r.grandTotal.totalUsd, props.currency)}`)
+        ]),
+        r.buckets.length === 0 ? h19("p", { style: { fontSize: "13px", opacity: "0.7" } }, props.emptyMessage) : h19("table", {
+          style: {
+            borderCollapse: "collapse",
+            fontSize: "13px",
+            width: "100%"
+          }
+        }, [
+          h19("thead", [
+            h19("tr", { style: { opacity: "0.7", textAlign: "left" } }, [
+              h19("th", { style: { padding: "8px 12px" } }, "Bucket"),
+              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Calls"),
+              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "LLM"),
+              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "TTS"),
+              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "STT"),
+              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Tel."),
+              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Total")
+            ])
+          ]),
+          h19("tbody", rows)
+        ])
+      ]);
+    };
+  }
+});
+// src/vue/VoiceLiveCallViewer.ts
+import {
+  defineComponent as defineComponent20,
+  h as h20,
+  onUnmounted as onUnmounted23,
+  shallowRef as shallowRef22
+} from "vue";
+
+// src/client/liveCallViewer.ts
+var EVENT_BUFFER_LIMIT = 200;
+var createLiveCallViewer = (options) => {
+  const bufferLimit = options.bufferLimit ?? EVENT_BUFFER_LIMIT;
+  const subscribers = new Set;
+  let state = {
+    agentState: "idle",
+    callDurationMs: 0,
+    events: [],
+    isConnected: true,
+    isLiveListening: true,
+    partialTranscript: "",
+    sessionId: options.sessionId
+  };
+  const startedAt = options.startedAt ?? Date.now();
+  const notify = () => {
+    for (const subscriber of subscribers)
+      subscriber();
+  };
+  const update = (next) => {
+    state = { ...state, ...next };
+    state.callDurationMs = Math.max(0, Date.now() - startedAt);
+    state.agentState = deriveVoiceAgentUIState({
+      hasActivePartial: state.partialTranscript.length > 0,
+      isConnected: state.isConnected,
+      isPlaying: false,
+      isRecording: state.isLiveListening,
+      lastAssistantAt: state.lastAssistantAt,
+      lastTranscriptAt: state.lastTranscriptAt
+    });
+    notify();
+  };
+  const pushEvent = (event) => {
+    const next = state.events.concat(event);
+    if (next.length > bufferLimit) {
+      next.splice(0, next.length - bufferLimit);
+    }
+    update({ events: next });
+  };
+  return {
+    applyControl: (control) => {
+      pushEvent({
+        at: Date.now(),
+        detail: control.reason,
+        kind: "lifecycle",
+        title: `control:${control.type}`
+      });
+    },
+    applyEvent: pushEvent,
+    applyMonitorEvent: ({ payload, type }) => {
+      pushEvent({
+        at: Date.now(),
+        detail: JSON.stringify(payload).slice(0, 240),
+        kind: type === "call.lifecycle" ? "lifecycle" : "lifecycle",
+        title: type
+      });
+    },
+    getState: () => state,
+    noteAgentAudio: (at) => {
+      const ts = at ?? Date.now();
+      update({ lastAssistantAt: ts });
+      pushEvent({
+        at: ts,
+        kind: "agent_audio",
+        title: "Agent audio frame"
+      });
+    },
+    notePartial: (text, at) => {
+      update({ partialTranscript: text });
+      if (text) {
+        pushEvent({
+          at: at ?? Date.now(),
+          detail: text,
+          kind: "transcript",
+          title: "Partial"
+        });
+      }
+    },
+    noteTranscript: (text, at) => {
+      const ts = at ?? Date.now();
+      update({ lastTranscriptAt: ts, partialTranscript: "" });
+      pushEvent({
+        at: ts,
+        detail: text,
+        kind: "transcript",
+        title: "Final transcript"
+      });
+    },
+    reset: (sessionId, startedAtOverride) => {
+      state = {
+        agentState: "idle",
+        callDurationMs: 0,
+        events: [],
+        isConnected: true,
+        isLiveListening: true,
+        partialTranscript: "",
+        sessionId
+      };
+      if (typeof startedAtOverride === "number") {}
+      notify();
+    },
+    subscribe: (subscriber) => {
+      subscribers.add(subscriber);
+      return () => subscribers.delete(subscriber);
+    }
+  };
+};
+
+// src/vue/VoiceLiveCallViewer.ts
+var CATEGORY_COLOR = {
+  agent_audio: "#3b82f6",
+  agent_text: "#3b82f6",
+  lifecycle: "#94a3b8",
+  tool: "#f59e0b",
+  transcript: "#10b981"
+};
+var formatRelative = (ms) => {
+  const seconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
+};
+var VoiceLiveCallViewer = defineComponent20({
+  name: "VoiceLiveCallViewer",
+  props: {
+    sessionId: { default: "live", type: String },
+    title: { default: "Live call", type: String },
+    viewer: {
+      default: undefined,
+      type: Object
+    }
+  },
+  setup(props) {
+    const owned = !props.viewer;
+    const viewer = props.viewer ?? createLiveCallViewer({ sessionId: props.sessionId });
+    const state = shallowRef22(viewer.getState());
+    const unsubscribe = viewer.subscribe(() => {
+      state.value = viewer.getState();
+    });
+    onUnmounted23(() => {
+      unsubscribe();
+    });
+    return () => {
+      const s = state.value;
+      const firstAt = s.events[0]?.at ?? Date.now();
+      return h20("section", {
+        "aria-label": "voice-live-call-viewer",
+        class: "absolute-voice-live-call-viewer",
+        "data-agent-state": s.agentState,
+        style: {
+          background: "#0f172a",
+          borderRadius: "16px",
+          color: "#f8fafc",
+          fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          padding: "20px"
+        }
+      }, [
+        h20("header", {
+          style: {
+            alignItems: "center",
+            display: "flex",
+            gap: "12px",
+            marginBottom: "12px"
+          }
+        }, [
+          h20("strong", { style: { fontSize: "16px" } }, props.title),
+          h20("span", {
+            style: {
+              background: "rgba(59,130,246,0.18)",
+              borderRadius: "999px",
+              fontSize: "11px",
+              padding: "3px 10px",
+              textTransform: "uppercase"
+            }
+          }, s.agentState),
+          h20("span", {
+            style: {
+              fontSize: "13px",
+              marginLeft: "auto",
+              opacity: "0.7"
+            }
+          }, `${s.sessionId} \xB7 ${formatRelative(s.callDurationMs)}`)
+        ]),
+        s.partialTranscript ? h20("p", {
+          style: {
+            background: "rgba(16,185,129,0.12)",
+            borderRadius: "12px",
+            fontSize: "13px",
+            margin: "0 0 12px",
+            opacity: "0.95",
+            padding: "10px 12px"
+          }
+        }, `\u201C${s.partialTranscript}\u201D`) : null,
+        h20("ol", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            listStyle: "none",
+            margin: "0",
+            maxHeight: "320px",
+            overflowY: "auto",
+            padding: "0"
+          }
+        }, s.events.map((event, index) => h20("li", {
+          key: `${event.at}-${index}`,
+          style: {
+            alignItems: "center",
+            borderLeft: `3px solid ${CATEGORY_COLOR[event.kind] ?? "#94a3b8"}`,
+            display: "flex",
+            fontSize: "13px",
+            gap: "12px",
+            paddingLeft: "12px"
+          }
+        }, [
+          h20("span", {
+            style: {
+              color: "#cbd5e1",
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+              fontSize: "12px",
+              width: "60px"
+            }
+          }, formatRelative(event.at - firstAt)),
+          h20("strong", { style: { fontSize: "13px" } }, event.title),
+          event.detail ? h20("span", { style: { opacity: "0.85" } }, event.detail) : null
+        ])))
+      ]);
+    };
+  }
+});
+// src/vue/VoiceReplayTimeline.ts
+import { computed as computed12, defineComponent as defineComponent21, h as h21 } from "vue";
+
+// src/client/replayTimeline.ts
+var categorize = (entry) => {
+  const event = entry.event.toLowerCase();
+  if (event.startsWith("stt.") || event.includes("user"))
+    return "user";
+  if (event.startsWith("tts.") || event.includes("assistant") || event.includes("agent"))
+    return "agent";
+  if (event.startsWith("tool.") || event.includes("tool"))
+    return "tool";
+  return "lifecycle";
+};
+var buildReplayTimelineReport = (input) => {
+  const events = [];
+  let summaryAgentTurns = 0;
+  let summaryUserTurns = 0;
+  let summaryToolCalls = 0;
+  for (const entry of input.artifact.timeline ?? []) {
+    const category = categorize(entry);
+    if (category === "user")
+      summaryUserTurns += 1;
+    if (category === "agent")
+      summaryAgentTurns += 1;
+    if (category === "tool")
+      summaryToolCalls += 1;
+    events.push({
+      at: entry.atMs,
+      category,
+      detail: entry.text ?? entry.reason,
+      durationMs: entry.chunkDurationMs,
+      label: entry.event
+    });
+  }
+  events.sort((a, b) => a.at - b.at);
+  const first = events[0]?.at ?? 0;
+  const last = events.at(-1)?.at ?? first;
+  return {
+    duration: last - first,
+    events,
+    metadata: {
+      artifactId: input.artifact.id ?? "",
+      title: input.artifact.title
+    },
+    startedAt: first,
+    summary: {
+      agentTurns: summaryAgentTurns,
+      toolCalls: summaryToolCalls,
+      userTurns: summaryUserTurns
+    }
+  };
+};
+
+// src/vue/VoiceReplayTimeline.ts
+var CATEGORY_COLOR2 = {
+  agent: "#3b82f6",
+  lifecycle: "#94a3b8",
+  tool: "#f59e0b",
+  user: "#10b981"
+};
+var formatRelative2 = (ms) => {
+  const seconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
+};
+var VoiceReplayTimeline = defineComponent21({
+  name: "VoiceReplayTimeline",
+  props: {
+    artifact: {
+      required: true,
+      type: Object
+    },
+    title: String
+  },
+  setup(props) {
+    const report = computed12(() => buildReplayTimelineReport({ artifact: props.artifact }));
+    return () => {
+      const r = report.value;
+      return h21("section", {
+        "aria-label": "voice-replay-timeline",
+        class: "absolute-voice-replay-timeline",
+        style: {
+          background: "#0f172a",
+          borderRadius: "16px",
+          color: "#f8fafc",
+          fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          padding: "20px"
+        }
+      }, [
+        h21("header", {
+          style: {
+            alignItems: "baseline",
+            display: "flex",
+            gap: "12px",
+            marginBottom: "12px"
+          }
+        }, [
+          h21("strong", { style: { fontSize: "16px" } }, props.title ?? r.metadata.title ?? "Replay"),
+          h21("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.events.length} events \xB7 ${r.summary.userTurns} user \xB7 ${r.summary.agentTurns} agent \xB7 ${r.summary.toolCalls} tool`)
+        ]),
+        r.events.length === 0 ? h21("p", { style: { fontSize: "13px", opacity: "0.7" } }, "No timeline events.") : h21("ol", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            listStyle: "none",
+            margin: "0",
+            padding: "0"
+          }
+        }, r.events.map((event, index) => h21("li", {
+          key: `${event.at}-${index}`,
+          style: {
+            alignItems: "center",
+            borderLeft: `3px solid ${CATEGORY_COLOR2[event.category]}`,
+            display: "flex",
+            fontSize: "13px",
+            gap: "12px",
+            paddingLeft: "12px"
+          }
+        }, [
+          h21("span", {
+            style: {
+              color: "#cbd5e1",
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+              fontSize: "12px",
+              width: "60px"
+            }
+          }, formatRelative2(event.at - r.startedAt)),
+          h21("strong", { style: { fontSize: "13px" } }, event.label),
+          event.detail ? h21("span", { style: { opacity: "0.85" } }, event.detail) : null
+        ])))
+      ]);
+    };
+  }
+});
 // src/vue/useVoiceTraceTimeline.ts
-import { onUnmounted as onUnmounted23, ref as ref18, shallowRef as shallowRef22 } from "vue";
+import { onUnmounted as onUnmounted24, ref as ref19, shallowRef as shallowRef23 } from "vue";
 function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   const store = createVoiceTraceTimelineStore(path, options);
-  const error = ref18(null);
-  const isLoading = ref18(false);
-  const report = shallowRef22(null);
-  const updatedAt = ref18(undefined);
+  const error = ref19(null);
+  const isLoading = ref19(false);
+  const report = shallowRef23(null);
+  const updatedAt = ref19(undefined);
   const sync = () => {
     const snapshot = store.getSnapshot();
     error.value = snapshot.error;
@@ -12100,7 +12655,7 @@ function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   const unsubscribe = store.subscribe(sync);
   sync();
   store.refresh().catch(() => {});
-  onUnmounted23(() => {
+  onUnmounted24(() => {
     unsubscribe();
     store.close();
   });
@@ -12113,7 +12668,7 @@ function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   };
 }
 // src/vue/useVoiceWorkflowStatus.ts
-import { onMounted as onMounted10, onUnmounted as onUnmounted24, ref as ref19, shallowRef as shallowRef23 } from "vue";
+import { onMounted as onMounted10, onUnmounted as onUnmounted25, ref as ref20, shallowRef as shallowRef24 } from "vue";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -12197,10 +12752,10 @@ var createVoiceWorkflowStatusStore = (path = "/evals/scenarios/json", options =
 // src/vue/useVoiceWorkflowStatus.ts
 function useVoiceWorkflowStatus(path = "/evals/scenarios/json", options = {}) {
   const store = createVoiceWorkflowStatusStore(path, options);
-  const error = ref19(null);
-  const isLoading = ref19(false);
-  const report = shallowRef23(undefined);
-  const updatedAt = ref19(undefined);
+  const error = ref20(null);
+  const isLoading = ref20(false);
+  const report = shallowRef24(undefined);
+  const updatedAt = ref20(undefined);
   const sync = () => {
     const snapshot = store.getSnapshot();
     error.value = snapshot.error;
@@ -12213,7 +12768,7 @@ function useVoiceWorkflowStatus(path = "/evals/scenarios/json", options = {}) {
   onMounted10(() => {
     store.refresh().catch(() => {});
   });
-  onUnmounted24(() => {
+  onUnmounted25(() => {
     unsubscribe();
     store.close();
   });
@@ -12257,6 +12812,7 @@ export {
   VoiceSessionSnapshot,
   VoiceSessionObservability,
   VoiceRoutingStatus,
+  VoiceReplayTimeline,
   VoiceReconnectProfileEvidence,
   VoiceReadinessFailures,
   VoiceProviderStatus,
@@ -12267,6 +12823,8 @@ export {
   VoicePlatformCoverage,
   VoiceOpsStatus,
   VoiceOpsActionCenter,
+  VoiceLiveCallViewer,
   VoiceDeliveryRuntime,
+  VoiceCostDashboard,
   VoiceCallDebuggerLaunch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@absolutejs/voice",
-  "version": "0.0.22-beta.500",
+  "version": "0.0.22-beta.501",
   "description": "Voice primitives and Elysia plugin for AbsoluteJS",
   "repository": {
     "type": "git",