@absolutejs/voice 0.0.22-beta.57 → 0.0.22-beta.59

package/dist/react/index.js

@@ -387,9 +387,256 @@ var VoiceOpsStatus = ({
     ]
   }, undefined, true, undefined, this);
 };
-// src/react/useVoiceStream.tsx
+// src/react/useVoiceRoutingStatus.tsx
 import { useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 
+// src/client/routingStatus.ts
+var fetchVoiceRoutingStatus = async (path = "/api/routing/latest", options = {}) => {
+  const fetchImpl = options.fetch ?? globalThis.fetch;
+  const response = await fetchImpl(path);
+  if (!response.ok) {
+    throw new Error(`Voice routing status failed: HTTP ${response.status}`);
+  }
+  return await response.json();
+};
+var createVoiceRoutingStatusStore = (path = "/api/routing/latest", options = {}) => {
+  const listeners = new Set;
+  let closed = false;
+  let timer;
+  let snapshot = {
+    decision: null,
+    error: null,
+    isLoading: false
+  };
+  const emit = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  const refresh = async () => {
+    if (closed) {
+      return snapshot.decision;
+    }
+    snapshot = {
+      ...snapshot,
+      error: null,
+      isLoading: true
+    };
+    emit();
+    try {
+      const decision = await fetchVoiceRoutingStatus(path, options);
+      snapshot = {
+        decision,
+        error: null,
+        isLoading: false,
+        updatedAt: Date.now()
+      };
+      emit();
+      return decision;
+    } catch (error) {
+      snapshot = {
+        ...snapshot,
+        error: error instanceof Error ? error.message : String(error),
+        isLoading: false
+      };
+      emit();
+      throw error;
+    }
+  };
+  const close = () => {
+    closed = true;
+    if (timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+    listeners.clear();
+  };
+  if (options.intervalMs && options.intervalMs > 0) {
+    timer = setInterval(() => {
+      refresh().catch(() => {});
+    }, options.intervalMs);
+  }
+  return {
+    close,
+    getServerSnapshot: () => snapshot,
+    getSnapshot: () => snapshot,
+    refresh,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+};
+
+// src/react/useVoiceRoutingStatus.tsx
+var useVoiceRoutingStatus = (path = "/api/routing/latest", options = {}) => {
+  const storeRef = useRef2(null);
+  if (!storeRef.current) {
+    storeRef.current = createVoiceRoutingStatusStore(path, options);
+  }
+  const store = storeRef.current;
+  useEffect2(() => {
+    store.refresh().catch(() => {});
+    return () => store.close();
+  }, [store]);
+  return {
+    ...useSyncExternalStore2(store.subscribe, store.getSnapshot, store.getServerSnapshot),
+    refresh: store.refresh
+  };
+};
+
+// src/client/routingStatusWidget.ts
+var DEFAULT_TITLE2 = "Voice Routing";
+var DEFAULT_DESCRIPTION2 = "Latest provider routing decision from the self-hosted trace store.";
+var escapeHtml2 = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+var formatValue = (value, fallback = "None") => typeof value === "string" && value.trim() ? value : typeof value === "number" && Number.isFinite(value) ? String(value) : fallback;
+var createVoiceRoutingStatusViewModel = (snapshot, options = {}) => {
+  const decision = snapshot.decision;
+  const rows = decision ? [
+    { label: "Kind", value: decision.kind.toUpperCase() },
+    { label: "Policy", value: formatValue(decision.routing, "Unknown") },
+    { label: "Provider", value: formatValue(decision.provider, "Unknown") },
+    {
+      label: "Selected",
+      value: formatValue(decision.selectedProvider, "Unknown")
+    },
+    {
+      label: "Fallback",
+      value: formatValue(decision.fallbackProvider)
+    },
+    { label: "Status", value: formatValue(decision.status, "unknown") },
+    {
+      label: "Latency budget",
+      value: typeof decision.latencyBudgetMs === "number" ? `${decision.latencyBudgetMs}ms` : "None"
+    }
+  ] : [];
+  return {
+    decision,
+    description: options.description ?? DEFAULT_DESCRIPTION2,
+    error: snapshot.error,
+    isLoading: snapshot.isLoading,
+    label: snapshot.error ? "Unavailable" : decision ? `${formatValue(decision.kind).toUpperCase()} ${formatValue(decision.status, "unknown")}` : snapshot.isLoading ? "Checking" : "No routing yet",
+    rows,
+    status: snapshot.error ? "error" : decision ? "ready" : snapshot.isLoading ? "loading" : "empty",
+    title: options.title ?? DEFAULT_TITLE2,
+    updatedAt: snapshot.updatedAt
+  };
+};
+var renderVoiceRoutingStatusHTML = (snapshot, options = {}) => {
+  const model = createVoiceRoutingStatusViewModel(snapshot, options);
+  const rows = model.rows.length ? `<div class="absolute-voice-routing-status__grid">${model.rows.map((row) => `<div>
+  <span>${escapeHtml2(row.label)}</span>
+  <strong>${escapeHtml2(row.value)}</strong>
+</div>`).join("")}</div>` : '<p class="absolute-voice-routing-status__empty">Start a voice session to see the selected provider.</p>';
+  return `<section class="absolute-voice-routing-status absolute-voice-routing-status--${escapeHtml2(model.status)}">
+  <header class="absolute-voice-routing-status__header">
+    <span class="absolute-voice-routing-status__eyebrow">${escapeHtml2(model.title)}</span>
+    <strong class="absolute-voice-routing-status__label">${escapeHtml2(model.label)}</strong>
+  </header>
+  <p class="absolute-voice-routing-status__description">${escapeHtml2(model.description)}</p>
+  ${rows}
+  ${model.error ? `<p class="absolute-voice-routing-status__error">${escapeHtml2(model.error)}</p>` : ""}
+</section>`;
+};
+var getVoiceRoutingStatusCSS = () => `.absolute-voice-routing-status{border:1px solid #d8d2c4;border-radius:20px;background:#fffaf0;color:#16130d;padding:18px;box-shadow:0 18px 40px rgba(47,37,18,.12);font-family:inherit}.absolute-voice-routing-status--error{border-color:#f2a7a7;background:#fff5f3}.absolute-voice-routing-status__header{align-items:start;display:flex;gap:12px;justify-content:space-between}.absolute-voice-routing-status__eyebrow{color:#73664f;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.absolute-voice-routing-status__label{font-size:24px;line-height:1}.absolute-voice-routing-status__description{color:#514733;margin:12px 0 0}.absolute-voice-routing-status__grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.absolute-voice-routing-status__grid div{background:#fff;border:1px solid #eee4d2;border-radius:14px;padding:10px 12px}.absolute-voice-routing-status__grid span{color:#655944;display:block;font-size:12px;margin-bottom:4px}.absolute-voice-routing-status__grid strong{overflow-wrap:anywhere}.absolute-voice-routing-status__empty{color:#655944;margin:14px 0 0}.absolute-voice-routing-status__error{color:#9f1239;font-weight:700}`;
+var mountVoiceRoutingStatus = (element, path = "/api/routing/latest", options = {}) => {
+  const store = createVoiceRoutingStatusStore(path, options);
+  const render = () => {
+    element.innerHTML = renderVoiceRoutingStatusHTML(store.getSnapshot(), options);
+  };
+  const unsubscribe = store.subscribe(render);
+  render();
+  store.refresh().catch(() => {});
+  return {
+    close: () => {
+      unsubscribe();
+      store.close();
+    },
+    refresh: store.refresh
+  };
+};
+var defineVoiceRoutingStatusElement = (tagName = "absolute-voice-routing-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceRoutingStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceRoutingStatus(this, this.getAttribute("path") ?? "/api/routing/latest", {
+        description: this.getAttribute("description") ?? undefined,
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
+
+// src/react/VoiceRoutingStatus.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var VoiceRoutingStatus = ({
+  className,
+  path = "/api/routing/latest",
+  ...options
+}) => {
+  const snapshot = useVoiceRoutingStatus(path, options);
+  const model = createVoiceRoutingStatusViewModel(snapshot, options);
+  return /* @__PURE__ */ jsxDEV2("section", {
+    className: [
+      "absolute-voice-routing-status",
+      `absolute-voice-routing-status--${model.status}`,
+      className
+    ].filter(Boolean).join(" "),
+    children: [
+      /* @__PURE__ */ jsxDEV2("header", {
+        className: "absolute-voice-routing-status__header",
+        children: [
+          /* @__PURE__ */ jsxDEV2("span", {
+            className: "absolute-voice-routing-status__eyebrow",
+            children: model.title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("strong", {
+            className: "absolute-voice-routing-status__label",
+            children: model.label
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("p", {
+        className: "absolute-voice-routing-status__description",
+        children: model.description
+      }, undefined, false, undefined, this),
+      model.rows.length ? /* @__PURE__ */ jsxDEV2("div", {
+        className: "absolute-voice-routing-status__grid",
+        children: model.rows.map((row) => /* @__PURE__ */ jsxDEV2("div", {
+          children: [
+            /* @__PURE__ */ jsxDEV2("span", {
+              children: row.label
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("strong", {
+              children: row.value
+            }, undefined, false, undefined, this)
+          ]
+        }, row.label, true, undefined, this))
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("p", {
+        className: "absolute-voice-routing-status__empty",
+        children: "Start a voice session to see the selected provider."
+      }, undefined, false, undefined, this),
+      model.error ? /* @__PURE__ */ jsxDEV2("p", {
+        className: "absolute-voice-routing-status__error",
+        children: model.error
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/react/useVoiceStream.tsx
+import { useEffect as useEffect3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore3 } from "react";
+
 // src/client/actions.ts
 var normalizeErrorMessage = (value) => {
   if (typeof value === "string" && value.trim()) {
@@ -916,13 +1163,13 @@ var EMPTY_SNAPSHOT = {
   turns: []
 };
 var useVoiceStream = (path, options = {}) => {
-  const streamRef = useRef2(null);
+  const streamRef = useRef3(null);
   if (!streamRef.current) {
     streamRef.current = createVoiceStream(path, options);
   }
   const stream = streamRef.current;
-  useEffect2(() => () => stream.close(), [stream]);
-  const snapshot = useSyncExternalStore2(stream.subscribe, stream.getSnapshot, stream.getServerSnapshot) ?? EMPTY_SNAPSHOT;
+  useEffect3(() => () => stream.close(), [stream]);
+  const snapshot = useSyncExternalStore3(stream.subscribe, stream.getSnapshot, stream.getServerSnapshot) ?? EMPTY_SNAPSHOT;
   return {
     ...snapshot,
     callControl: (message) => stream.callControl(message),
@@ -932,7 +1179,7 @@ var useVoiceStream = (path, options = {}) => {
   };
 };
 // src/react/useVoiceController.tsx
-import { useEffect as useEffect3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useSyncExternalStore as useSyncExternalStore4 } from "react";
 
 // src/client/htmx.ts
 var DEFAULT_EVENT_NAME = "voice-refresh";
@@ -1579,13 +1826,13 @@ var EMPTY_SNAPSHOT2 = {
   turns: []
 };
 var useVoiceController = (path, options = {}) => {
-  const controllerRef = useRef3(null);
+  const controllerRef = useRef4(null);
   if (!controllerRef.current) {
     controllerRef.current = createVoiceController(path, options);
   }
   const controller = controllerRef.current;
-  useEffect3(() => () => controller.close(), [controller]);
-  const snapshot = useSyncExternalStore3(controller.subscribe, controller.getSnapshot, controller.getServerSnapshot) ?? EMPTY_SNAPSHOT2;
+  useEffect4(() => () => controller.close(), [controller]);
+  const snapshot = useSyncExternalStore4(controller.subscribe, controller.getSnapshot, controller.getServerSnapshot) ?? EMPTY_SNAPSHOT2;
   return {
     ...snapshot,
     bindHTMX: controller.bindHTMX,
@@ -1599,7 +1846,7 @@ var useVoiceController = (path, options = {}) => {
   };
 };
 // src/react/useVoiceProviderStatus.tsx
-import { useEffect as useEffect4, useRef as useRef4, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useSyncExternalStore as useSyncExternalStore5 } from "react";
 
 // src/client/providerStatus.ts
 var fetchVoiceProviderStatus = async (path = "/api/provider-status", options = {}) => {
@@ -1683,22 +1930,22 @@ var createVoiceProviderStatusStore = (path = "/api/provider-status", options = {
 
 // src/react/useVoiceProviderStatus.tsx
 var useVoiceProviderStatus = (path = "/api/provider-status", options = {}) => {
-  const storeRef = useRef4(null);
+  const storeRef = useRef5(null);
   if (!storeRef.current) {
     storeRef.current = createVoiceProviderStatusStore(path, options);
   }
   const store = storeRef.current;
-  useEffect4(() => {
+  useEffect5(() => {
     store.refresh().catch(() => {});
     return () => store.close();
   }, [store]);
   return {
-    ...useSyncExternalStore4(store.subscribe, store.getSnapshot, store.getServerSnapshot),
+    ...useSyncExternalStore5(store.subscribe, store.getSnapshot, store.getServerSnapshot),
     refresh: store.refresh
   };
 };
 // src/react/useVoiceWorkflowStatus.tsx
-import { useEffect as useEffect5, useRef as useRef5, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useEffect as useEffect6, useRef as useRef6, useSyncExternalStore as useSyncExternalStore6 } from "react";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -1781,25 +2028,27 @@ var createVoiceWorkflowStatusStore = (path = "/evals/scenarios/json", options =
 
 // src/react/useVoiceWorkflowStatus.tsx
 var useVoiceWorkflowStatus = (path = "/evals/scenarios/json", options = {}) => {
-  const storeRef = useRef5(null);
+  const storeRef = useRef6(null);
   if (!storeRef.current) {
     storeRef.current = createVoiceWorkflowStatusStore(path, options);
   }
   const store = storeRef.current;
-  useEffect5(() => {
+  useEffect6(() => {
     store.refresh().catch(() => {});
     return () => store.close();
   }, [store]);
   return {
-    ...useSyncExternalStore5(store.subscribe, store.getSnapshot, store.getServerSnapshot),
+    ...useSyncExternalStore6(store.subscribe, store.getSnapshot, store.getServerSnapshot),
     refresh: store.refresh
   };
 };
 export {
   useVoiceWorkflowStatus,
   useVoiceStream,
+  useVoiceRoutingStatus,
   useVoiceProviderStatus,
   useVoiceController,
   useVoiceAppKitStatus,
+  VoiceRoutingStatus,
   VoiceOpsStatus
 };

package/dist/react/useVoiceRoutingStatus.d.ts

@@ -0,0 +1,8 @@
+import { type VoiceRoutingStatusClientOptions } from '../client/routingStatus';
+export declare const useVoiceRoutingStatus: (path?: string, options?: VoiceRoutingStatusClientOptions) => {
+    refresh: () => Promise<import("..").VoiceRoutingEvent | null>;
+    decision: import("..").VoiceRoutingDecisionSummary | null;
+    error: string | null;
+    isLoading: boolean;
+    updatedAt?: number;
+};

package/dist/resilienceRoutes.d.ts

@@ -13,12 +13,21 @@ export type VoiceRoutingEvent = {
     latencyBudgetMs?: number;
     operation?: string;
     provider?: string;
+    routing?: string;
     selectedProvider?: string;
     sessionId: string;
     status?: string;
+    suppressionRemainingMs?: number;
     timedOut: boolean;
     turnId?: string;
 };
+export type VoiceRoutingDecisionSummary = VoiceRoutingEvent;
+export type VoiceRoutingDecisionSummaryOptions = {
+    kind?: VoiceRoutingEventKind;
+    limit?: number;
+    sessionId?: string;
+    store: VoiceTraceEventStore;
+};
 export type VoiceResilienceLink = {
     href: string;
     label: string;
@@ -63,6 +72,8 @@ export type VoiceResilienceRoutesOptions = {
     ttsSimulation?: VoiceResilienceIOSimulator<string>;
 };
 export declare const listVoiceRoutingEvents: (events: StoredVoiceTraceEvent[]) => VoiceRoutingEvent[];
+export declare const summarizeVoiceRoutingDecision: (events: StoredVoiceTraceEvent[], options?: Omit<VoiceRoutingDecisionSummaryOptions, "store">) => VoiceRoutingDecisionSummary | null;
+export declare const createVoiceRoutingDecisionSummary: (options: VoiceRoutingDecisionSummaryOptions) => Promise<VoiceRoutingDecisionSummary | null>;
 export declare const renderVoiceResilienceHTML: (input: VoiceResiliencePageData) => string;
 export declare const createVoiceResilienceRoutes: (options: VoiceResilienceRoutesOptions) => Elysia<"", {
     decorator: {};

package/dist/svelte/createVoiceRoutingStatus.d.ts

@@ -0,0 +1,10 @@
+import { type VoiceRoutingStatusWidgetOptions } from '../client/routingStatusWidget';
+export declare const createVoiceRoutingStatus: (path?: string, options?: VoiceRoutingStatusWidgetOptions) => {
+    getHTML: () => string;
+    getViewModel: () => import("../client").VoiceRoutingStatusViewModel;
+    close: () => void;
+    getServerSnapshot: () => import("../client").VoiceRoutingStatusSnapshot;
+    getSnapshot: () => import("../client").VoiceRoutingStatusSnapshot;
+    refresh: () => Promise<import("..").VoiceRoutingEvent | null>;
+    subscribe: (listener: () => void) => () => void;
+};

package/dist/svelte/index.d.ts

@@ -2,5 +2,6 @@ export { createVoiceAppKitStatus } from './createVoiceAppKitStatus';
 export { createVoiceOpsStatus } from './createVoiceOpsStatus';
 export { createVoiceStream } from './createVoiceStream';
 export { createVoiceProviderStatus } from './createVoiceProviderStatus';
+export { createVoiceRoutingStatus } from './createVoiceRoutingStatus';
 export { createVoiceWorkflowStatus } from './createVoiceWorkflowStatus';
 export { createVoiceController } from '../client/controller';

package/dist/svelte/index.js

@@ -884,6 +884,186 @@ var createVoiceProviderStatusStore = (path = "/api/provider-status", options = {
 
 // src/svelte/createVoiceProviderStatus.ts
 var createVoiceProviderStatus = (path = "/api/provider-status", options = {}) => createVoiceProviderStatusStore(path, options);
+// src/client/routingStatus.ts
+var fetchVoiceRoutingStatus = async (path = "/api/routing/latest", options = {}) => {
+  const fetchImpl = options.fetch ?? globalThis.fetch;
+  const response = await fetchImpl(path);
+  if (!response.ok) {
+    throw new Error(`Voice routing status failed: HTTP ${response.status}`);
+  }
+  return await response.json();
+};
+var createVoiceRoutingStatusStore = (path = "/api/routing/latest", options = {}) => {
+  const listeners = new Set;
+  let closed = false;
+  let timer;
+  let snapshot = {
+    decision: null,
+    error: null,
+    isLoading: false
+  };
+  const emit = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  const refresh = async () => {
+    if (closed) {
+      return snapshot.decision;
+    }
+    snapshot = {
+      ...snapshot,
+      error: null,
+      isLoading: true
+    };
+    emit();
+    try {
+      const decision = await fetchVoiceRoutingStatus(path, options);
+      snapshot = {
+        decision,
+        error: null,
+        isLoading: false,
+        updatedAt: Date.now()
+      };
+      emit();
+      return decision;
+    } catch (error) {
+      snapshot = {
+        ...snapshot,
+        error: error instanceof Error ? error.message : String(error),
+        isLoading: false
+      };
+      emit();
+      throw error;
+    }
+  };
+  const close = () => {
+    closed = true;
+    if (timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+    listeners.clear();
+  };
+  if (options.intervalMs && options.intervalMs > 0) {
+    timer = setInterval(() => {
+      refresh().catch(() => {});
+    }, options.intervalMs);
+  }
+  return {
+    close,
+    getServerSnapshot: () => snapshot,
+    getSnapshot: () => snapshot,
+    refresh,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+};
+
+// src/client/routingStatusWidget.ts
+var DEFAULT_TITLE2 = "Voice Routing";
+var DEFAULT_DESCRIPTION2 = "Latest provider routing decision from the self-hosted trace store.";
+var escapeHtml2 = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+var formatValue = (value, fallback = "None") => typeof value === "string" && value.trim() ? value : typeof value === "number" && Number.isFinite(value) ? String(value) : fallback;
+var createVoiceRoutingStatusViewModel = (snapshot, options = {}) => {
+  const decision = snapshot.decision;
+  const rows = decision ? [
+    { label: "Kind", value: decision.kind.toUpperCase() },
+    { label: "Policy", value: formatValue(decision.routing, "Unknown") },
+    { label: "Provider", value: formatValue(decision.provider, "Unknown") },
+    {
+      label: "Selected",
+      value: formatValue(decision.selectedProvider, "Unknown")
+    },
+    {
+      label: "Fallback",
+      value: formatValue(decision.fallbackProvider)
+    },
+    { label: "Status", value: formatValue(decision.status, "unknown") },
+    {
+      label: "Latency budget",
+      value: typeof decision.latencyBudgetMs === "number" ? `${decision.latencyBudgetMs}ms` : "None"
+    }
+  ] : [];
+  return {
+    decision,
+    description: options.description ?? DEFAULT_DESCRIPTION2,
+    error: snapshot.error,
+    isLoading: snapshot.isLoading,
+    label: snapshot.error ? "Unavailable" : decision ? `${formatValue(decision.kind).toUpperCase()} ${formatValue(decision.status, "unknown")}` : snapshot.isLoading ? "Checking" : "No routing yet",
+    rows,
+    status: snapshot.error ? "error" : decision ? "ready" : snapshot.isLoading ? "loading" : "empty",
+    title: options.title ?? DEFAULT_TITLE2,
+    updatedAt: snapshot.updatedAt
+  };
+};
+var renderVoiceRoutingStatusHTML = (snapshot, options = {}) => {
+  const model = createVoiceRoutingStatusViewModel(snapshot, options);
+  const rows = model.rows.length ? `<div class="absolute-voice-routing-status__grid">${model.rows.map((row) => `<div>
+  <span>${escapeHtml2(row.label)}</span>
+  <strong>${escapeHtml2(row.value)}</strong>
+</div>`).join("")}</div>` : '<p class="absolute-voice-routing-status__empty">Start a voice session to see the selected provider.</p>';
+  return `<section class="absolute-voice-routing-status absolute-voice-routing-status--${escapeHtml2(model.status)}">
+  <header class="absolute-voice-routing-status__header">
+    <span class="absolute-voice-routing-status__eyebrow">${escapeHtml2(model.title)}</span>
+    <strong class="absolute-voice-routing-status__label">${escapeHtml2(model.label)}</strong>
+  </header>
+  <p class="absolute-voice-routing-status__description">${escapeHtml2(model.description)}</p>
+  ${rows}
+  ${model.error ? `<p class="absolute-voice-routing-status__error">${escapeHtml2(model.error)}</p>` : ""}
+</section>`;
+};
+var getVoiceRoutingStatusCSS = () => `.absolute-voice-routing-status{border:1px solid #d8d2c4;border-radius:20px;background:#fffaf0;color:#16130d;padding:18px;box-shadow:0 18px 40px rgba(47,37,18,.12);font-family:inherit}.absolute-voice-routing-status--error{border-color:#f2a7a7;background:#fff5f3}.absolute-voice-routing-status__header{align-items:start;display:flex;gap:12px;justify-content:space-between}.absolute-voice-routing-status__eyebrow{color:#73664f;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.absolute-voice-routing-status__label{font-size:24px;line-height:1}.absolute-voice-routing-status__description{color:#514733;margin:12px 0 0}.absolute-voice-routing-status__grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.absolute-voice-routing-status__grid div{background:#fff;border:1px solid #eee4d2;border-radius:14px;padding:10px 12px}.absolute-voice-routing-status__grid span{color:#655944;display:block;font-size:12px;margin-bottom:4px}.absolute-voice-routing-status__grid strong{overflow-wrap:anywhere}.absolute-voice-routing-status__empty{color:#655944;margin:14px 0 0}.absolute-voice-routing-status__error{color:#9f1239;font-weight:700}`;
+var mountVoiceRoutingStatus = (element, path = "/api/routing/latest", options = {}) => {
+  const store = createVoiceRoutingStatusStore(path, options);
+  const render = () => {
+    element.innerHTML = renderVoiceRoutingStatusHTML(store.getSnapshot(), options);
+  };
+  const unsubscribe = store.subscribe(render);
+  render();
+  store.refresh().catch(() => {});
+  return {
+    close: () => {
+      unsubscribe();
+      store.close();
+    },
+    refresh: store.refresh
+  };
+};
+var defineVoiceRoutingStatusElement = (tagName = "absolute-voice-routing-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceRoutingStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceRoutingStatus(this, this.getAttribute("path") ?? "/api/routing/latest", {
+        description: this.getAttribute("description") ?? undefined,
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
+
+// src/svelte/createVoiceRoutingStatus.ts
+var createVoiceRoutingStatus = (path = "/api/routing/latest", options = {}) => {
+  const store = createVoiceRoutingStatusStore(path, options);
+  return {
+    ...store,
+    getHTML: () => renderVoiceRoutingStatusHTML(store.getSnapshot(), options),
+    getViewModel: () => createVoiceRoutingStatusViewModel(store.getSnapshot(), options)
+  };
+};
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
   const fetchImpl = options.fetch ?? globalThis.fetch;
@@ -1597,6 +1777,7 @@ var createVoiceController = (path, options = {}) => {
 export {
   createVoiceWorkflowStatus,
   createVoiceStream2 as createVoiceStream,
+  createVoiceRoutingStatus,
   createVoiceProviderStatus,
   createVoiceOpsStatus,
   createVoiceController,

package/dist/vue/VoiceRoutingStatus.d.ts

@@ -0,0 +1,51 @@
+export declare const VoiceRoutingStatus: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    class: {
+        default: string;
+        type: StringConstructor;
+    };
+    description: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    intervalMs: {
+        default: number;
+        type: NumberConstructor;
+    };
+    path: {
+        default: string;
+        type: StringConstructor;
+    };
+    title: {
+        default: undefined;
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        default: string;
+        type: StringConstructor;
+    };
+    description: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    intervalMs: {
+        default: number;
+        type: NumberConstructor;
+    };
+    path: {
+        default: string;
+        type: StringConstructor;
+    };
+    title: {
+        default: undefined;
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    description: string;
+    title: string;
+    path: string;
+    intervalMs: number;
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;