@absolutejs/voice 0.0.22-beta.51 → 0.0.22-beta.53

package/dist/angular/index.d.ts

@@ -1,3 +1,4 @@
+export { VoiceOpsStatusComponent } from './voice-ops-status.component';
 export { VoiceAppKitStatusService } from './voice-app-kit-status.service';
 export { VoiceStreamService } from './voice-stream.service';
 export { VoiceControllerService } from './voice-controller.service';

package/dist/angular/index.js

@@ -69,8 +69,8 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
   return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
 };
 
-// src/angular/voice-app-kit-status.service.ts
-import { computed, Injectable, signal } from "@angular/core";
+// src/angular/voice-ops-status.component.ts
+import { Component, Input, signal } from "@angular/core";
 
 // src/client/appKitStatus.ts
 var fetchVoiceAppKitStatus = async (path = "/app-kit/status", options = {}) => {
@@ -151,7 +151,269 @@ var createVoiceAppKitStatusStore = (path = "/app-kit/status", options = {}) => {
   };
 };
 
+// src/client/opsStatusWidget.ts
+var DEFAULT_TITLE = "Voice Ops Status";
+var DEFAULT_DESCRIPTION = "Certified workflow, provider, and handoff readiness from the AbsoluteJS voice app kit.";
+var SURFACE_LABELS = {
+  handoffs: "Handoffs",
+  providers: "Providers",
+  quality: "Quality",
+  sessions: "Sessions",
+  workflows: "Workflows"
+};
+var escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+var readNumber = (value, key) => value && typeof value === "object" && (key in value) ? Number(value[key] ?? 0) : 0;
+var surfaceDetail = (surface) => {
+  const total = readNumber(surface, "total");
+  const failed = readNumber(surface, "failed");
+  const degraded = readNumber(surface, "degraded");
+  const source = surface && typeof surface === "object" && "source" in surface && typeof surface.source === "string" ? ` from ${surface.source}` : "";
+  if (degraded > 0) {
+    return `${degraded} degraded of ${total}`;
+  }
+  if (failed > 0) {
+    return `${failed} failing of ${total}${source}`;
+  }
+  return total > 0 ? `${total} passing${source}` : `No failures${source}`;
+};
+var getVoiceOpsStatusLabel = (report, error) => {
+  if (error) {
+    return "Unavailable";
+  }
+  if (!report) {
+    return "Checking";
+  }
+  return report.status === "pass" ? "Passing" : "Needs attention";
+};
+var createVoiceOpsStatusViewModel = (snapshot, options = {}) => {
+  const report = snapshot.report;
+  const surfaces = Object.entries(report?.surfaces ?? {}).map(([id, surface]) => {
+    const failed = readNumber(surface, "failed") || readNumber(surface, "degraded");
+    const total = readNumber(surface, "total");
+    const status = surface && typeof surface === "object" && "status" in surface ? surface.status ?? "pass" : "pass";
+    return {
+      detail: surfaceDetail(surface),
+      failed,
+      id,
+      label: SURFACE_LABELS[id] ?? id,
+      status,
+      total
+    };
+  });
+  return {
+    description: options.description ?? DEFAULT_DESCRIPTION,
+    error: snapshot.error,
+    isLoading: snapshot.isLoading,
+    label: getVoiceOpsStatusLabel(report, snapshot.error),
+    links: options.includeLinks === false ? [] : report?.links ?? [],
+    passed: report?.passed ?? 0,
+    status: snapshot.error ? "error" : report ? report.status : snapshot.isLoading ? "loading" : "loading",
+    surfaces,
+    title: options.title ?? DEFAULT_TITLE,
+    total: report?.total ?? 0,
+    updatedAt: snapshot.updatedAt
+  };
+};
+var renderVoiceOpsStatusHTML = (snapshot, options = {}) => {
+  const model = createVoiceOpsStatusViewModel(snapshot, options);
+  const surfaces = model.surfaces.length ? model.surfaces.map((surface) => `<li class="absolute-voice-ops-status__surface absolute-voice-ops-status__surface--${escapeHtml(surface.status)}">
+  <span>${escapeHtml(surface.label)}</span>
+  <strong>${escapeHtml(surface.detail)}</strong>
+</li>`).join("") : '<li class="absolute-voice-ops-status__surface"><span>Status</span><strong>Waiting for first check</strong></li>';
+  const links = model.links.length ? `<nav class="absolute-voice-ops-status__links">${model.links.slice(0, 4).map((link) => `<a href="${escapeHtml(link.href)}">${escapeHtml(link.label)}</a>`).join("")}</nav>` : "";
+  return `<section class="absolute-voice-ops-status absolute-voice-ops-status--${escapeHtml(model.status)}">
+  <header class="absolute-voice-ops-status__header">
+    <span class="absolute-voice-ops-status__eyebrow">${escapeHtml(model.title)}</span>
+    <strong class="absolute-voice-ops-status__label">${escapeHtml(model.label)}</strong>
+  </header>
+  <p class="absolute-voice-ops-status__description">${escapeHtml(model.description)}</p>
+  <div class="absolute-voice-ops-status__summary">
+    <span>${model.passed} passing</span>
+    <span>${Math.max(model.total - model.passed, 0)} failing</span>
+    <span>${model.total} checks</span>
+  </div>
+  <ul class="absolute-voice-ops-status__surfaces">${surfaces}</ul>
+  ${model.error ? `<p class="absolute-voice-ops-status__error">${escapeHtml(model.error)}</p>` : ""}
+  ${links}
+</section>`;
+};
+var getVoiceOpsStatusCSS = () => `.absolute-voice-ops-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-ops-status--fail,.absolute-voice-ops-status--error{border-color:#f2a7a7;background:#fff5f3}.absolute-voice-ops-status__header{align-items:start;display:flex;gap:12px;justify-content:space-between}.absolute-voice-ops-status__eyebrow{color:#73664f;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.absolute-voice-ops-status__label{font-size:28px;line-height:1}.absolute-voice-ops-status__description{color:#514733;margin:12px 0 0}.absolute-voice-ops-status__summary,.absolute-voice-ops-status__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.absolute-voice-ops-status__summary span,.absolute-voice-ops-status__links a{border:1px solid #e6ddca;border-radius:999px;color:inherit;padding:6px 10px;text-decoration:none}.absolute-voice-ops-status__surfaces{display:grid;gap:8px;list-style:none;margin:16px 0 0;padding:0}.absolute-voice-ops-status__surface{align-items:center;background:#fff;border:1px solid #eee4d2;border-radius:14px;display:flex;gap:12px;justify-content:space-between;padding:10px 12px}.absolute-voice-ops-status__surface--fail{border-color:#f2a7a7}.absolute-voice-ops-status__surface span{color:#655944}.absolute-voice-ops-status__error{color:#9f1239;font-weight:700}`;
+var mountVoiceOpsStatus = (element, path = "/app-kit/status", options = {}) => {
+  const store = createVoiceAppKitStatusStore(path, options);
+  const render = () => {
+    element.innerHTML = renderVoiceOpsStatusHTML(store.getSnapshot(), options);
+  };
+  const unsubscribe = store.subscribe(render);
+  render();
+  store.refresh().catch(() => {});
+  return {
+    close: () => {
+      unsubscribe();
+      store.close();
+    },
+    refresh: store.refresh
+  };
+};
+var defineVoiceOpsStatusElement = (tagName = "absolute-voice-ops-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceOpsStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceOpsStatus(this, this.getAttribute("path") ?? "/app-kit/status", {
+        description: this.getAttribute("description") ?? undefined,
+        includeLinks: this.getAttribute("include-links") !== "false",
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
+
+// src/angular/voice-ops-status.component.ts
+var _dec = [
+  Component({
+    selector: "absolute-voice-ops-status",
+    standalone: true,
+    template: `
+		<section
+			class="absolute-voice-ops-status"
+			[class.absolute-voice-ops-status--pass]="model().status === 'pass'"
+			[class.absolute-voice-ops-status--fail]="model().status === 'fail'"
+			[class.absolute-voice-ops-status--loading]="model().status === 'loading'"
+			[class.absolute-voice-ops-status--error]="model().status === 'error'"
+		>
+			<header class="absolute-voice-ops-status__header">
+				<span class="absolute-voice-ops-status__eyebrow">{{
+					model().title
+				}}</span>
+				<strong class="absolute-voice-ops-status__label">{{
+					model().label
+				}}</strong>
+			</header>
+			<p class="absolute-voice-ops-status__description">
+				{{ model().description }}
+			</p>
+			<div class="absolute-voice-ops-status__summary">
+				<span>{{ model().passed }} passing</span>
+				<span>{{ model().total - model().passed }} failing</span>
+				<span>{{ model().total }} checks</span>
+			</div>
+			<ul class="absolute-voice-ops-status__surfaces">
+				@if (model().surfaces.length > 0) {
+					@for (surface of model().surfaces; track surface.id) {
+						<li
+							class="absolute-voice-ops-status__surface"
+							[class.absolute-voice-ops-status__surface--pass]="
+								surface.status === 'pass'
+							"
+							[class.absolute-voice-ops-status__surface--fail]="
+								surface.status === 'fail'
+							"
+						>
+							<span>{{ surface.label }}</span>
+							<strong>{{ surface.detail }}</strong>
+						</li>
+					}
+				} @else {
+					<li class="absolute-voice-ops-status__surface">
+						<span>Status</span>
+						<strong>Waiting for first check</strong>
+					</li>
+				}
+			</ul>
+			@if (model().error) {
+				<p class="absolute-voice-ops-status__error">{{ model().error }}</p>
+			}
+			@if (model().links.length > 0) {
+				<nav class="absolute-voice-ops-status__links">
+					@for (link of model().links.slice(0, 4); track link.href) {
+						<a [href]="link.href">{{ link.label }}</a>
+					}
+				</nav>
+			}
+		</section>
+	`
+  })
+];
+var _dec2 = [
+  Input()
+];
+var _dec3 = [
+  Input()
+];
+var _dec4 = [
+  Input()
+];
+var _dec5 = [
+  Input()
+];
+var _dec6 = [
+  Input()
+];
+var _init = __decoratorStart(undefined);
+
+class VoiceOpsStatusComponent {
+  constructor() {
+    this.description = __runInitializers(_init, 8, this);
+    __runInitializers(_init, 11, this);
+    this.includeLinks = __runInitializers(_init, 12, this, true);
+    __runInitializers(_init, 15, this);
+    this.intervalMs = __runInitializers(_init, 16, this);
+    __runInitializers(_init, 19, this);
+    this.path = __runInitializers(_init, 20, this, "/app-kit/status");
+    __runInitializers(_init, 23, this);
+    this.title = __runInitializers(_init, 24, this);
+    __runInitializers(_init, 27, this);
+  }
+  cleanup = () => {};
+  store;
+  model = signal(createVoiceOpsStatusViewModel({
+    error: null,
+    isLoading: true
+  }));
+  ngOnInit() {
+    const options = this.options();
+    this.store = createVoiceAppKitStatusStore(this.path, options);
+    const sync = () => {
+      this.model.set(createVoiceOpsStatusViewModel(this.store.getSnapshot(), options));
+    };
+    this.cleanup = this.store.subscribe(sync);
+    sync();
+    if (typeof window !== "undefined") {
+      this.store.refresh().catch(() => {});
+    }
+  }
+  ngOnDestroy() {
+    this.cleanup();
+    this.store?.close();
+  }
+  options() {
+    return {
+      description: this.description,
+      includeLinks: this.includeLinks,
+      intervalMs: this.intervalMs,
+      title: this.title
+    };
+  }
+}
+__decorateElement(_init, 5, "description", _dec2, VoiceOpsStatusComponent);
+__decorateElement(_init, 5, "includeLinks", _dec3, VoiceOpsStatusComponent);
+__decorateElement(_init, 5, "intervalMs", _dec4, VoiceOpsStatusComponent);
+__decorateElement(_init, 5, "path", _dec5, VoiceOpsStatusComponent);
+__decorateElement(_init, 5, "title", _dec6, VoiceOpsStatusComponent);
+VoiceOpsStatusComponent = __decorateElement(_init, 0, "VoiceOpsStatusComponent", _dec, VoiceOpsStatusComponent);
+__runInitializers(_init, 1, VoiceOpsStatusComponent);
+__decoratorMetadata(_init, VoiceOpsStatusComponent);
+let _VoiceOpsStatusComponent = VoiceOpsStatusComponent;
 // src/angular/voice-app-kit-status.service.ts
+import { computed, Injectable, signal as signal2 } from "@angular/core";
 var _dec = [
   Injectable({ providedIn: "root" })
 ];
@@ -160,10 +422,10 @@ var _init = __decoratorStart(undefined);
 class VoiceAppKitStatusService {
   connect(path = "/app-kit/status", options = {}) {
     const store = createVoiceAppKitStatusStore(path, options);
-    const errorSignal = signal(null);
-    const isLoadingSignal = signal(false);
-    const reportSignal = signal(undefined);
-    const updatedAtSignal = signal(undefined);
+    const errorSignal = signal2(null);
+    const isLoadingSignal = signal2(false);
+    const reportSignal = signal2(undefined);
+    const updatedAtSignal = signal2(undefined);
     const sync = () => {
       const snapshot = store.getSnapshot();
       errorSignal.set(snapshot.error);
@@ -194,7 +456,7 @@ __runInitializers(_init, 1, VoiceAppKitStatusService);
 __decoratorMetadata(_init, VoiceAppKitStatusService);
 let _VoiceAppKitStatusService = VoiceAppKitStatusService;
 // src/angular/voice-stream.service.ts
-import { computed as computed2, Injectable as Injectable2, signal as signal2 } from "@angular/core";
+import { computed as computed2, Injectable as Injectable2, signal as signal3 } from "@angular/core";
 
 // src/client/actions.ts
 var normalizeErrorMessage = (value) => {
@@ -718,15 +980,15 @@ var _init = __decoratorStart(undefined);
 class VoiceStreamService {
   connect(path, options = {}) {
     const stream = createVoiceStream(path, options);
-    const assistantAudioSignal = signal2([]);
-    const assistantTextsSignal = signal2([]);
-    const callSignal = signal2(null);
-    const errorSignal = signal2(null);
-    const isConnectedSignal = signal2(false);
-    const partialSignal = signal2("");
-    const sessionIdSignal = signal2(stream.sessionId);
-    const statusSignal = signal2(stream.status);
-    const turnsSignal = signal2([]);
+    const assistantAudioSignal = signal3([]);
+    const assistantTextsSignal = signal3([]);
+    const callSignal = signal3(null);
+    const errorSignal = signal3(null);
+    const isConnectedSignal = signal3(false);
+    const partialSignal = signal3("");
+    const sessionIdSignal = signal3(stream.sessionId);
+    const statusSignal = signal3(stream.status);
+    const turnsSignal = signal3([]);
     const sync = () => {
       assistantAudioSignal.set([...stream.assistantAudio]);
       assistantTextsSignal.set([...stream.assistantTexts]);
@@ -765,7 +1027,7 @@ __runInitializers(_init, 1, VoiceStreamService);
 __decoratorMetadata(_init, VoiceStreamService);
 let _VoiceStreamService = VoiceStreamService;
 // src/angular/voice-controller.service.ts
-import { computed as computed3, Injectable as Injectable3, signal as signal3 } from "@angular/core";
+import { computed as computed3, Injectable as Injectable3, signal as signal4 } from "@angular/core";
 
 // src/client/htmx.ts
 var DEFAULT_EVENT_NAME = "voice-refresh";
@@ -1406,16 +1668,16 @@ var _init = __decoratorStart(undefined);
 class VoiceControllerService {
   connect(path, options = {}) {
     const controller = createVoiceController(path, options);
-    const assistantAudioSignal = signal3([]);
-    const assistantTextsSignal = signal3([]);
-    const errorSignal = signal3(null);
-    const isConnectedSignal = signal3(false);
-    const isRecordingSignal = signal3(false);
-    const partialSignal = signal3("");
-    const recordingErrorSignal = signal3(null);
-    const sessionIdSignal = signal3(controller.sessionId);
-    const statusSignal = signal3(controller.status);
-    const turnsSignal = signal3([]);
+    const assistantAudioSignal = signal4([]);
+    const assistantTextsSignal = signal4([]);
+    const errorSignal = signal4(null);
+    const isConnectedSignal = signal4(false);
+    const isRecordingSignal = signal4(false);
+    const partialSignal = signal4("");
+    const recordingErrorSignal = signal4(null);
+    const sessionIdSignal = signal4(controller.sessionId);
+    const statusSignal = signal4(controller.status);
+    const turnsSignal = signal4([]);
     const sync = () => {
       assistantAudioSignal.set([...controller.assistantAudio]);
       assistantTextsSignal.set([...controller.assistantTexts]);
@@ -1459,7 +1721,7 @@ __runInitializers(_init, 1, VoiceControllerService);
 __decoratorMetadata(_init, VoiceControllerService);
 let _VoiceControllerService = VoiceControllerService;
 // src/angular/voice-provider-status.service.ts
-import { computed as computed4, Injectable as Injectable4, signal as signal4 } from "@angular/core";
+import { computed as computed4, Injectable as Injectable4, signal as signal5 } from "@angular/core";
 
 // src/client/providerStatus.ts
 var fetchVoiceProviderStatus = async (path = "/api/provider-status", options = {}) => {
@@ -1550,10 +1812,10 @@ var _init = __decoratorStart(undefined);
 class VoiceProviderStatusService {
   connect(path = "/api/provider-status", options = {}) {
     const store = createVoiceProviderStatusStore(path, options);
-    const errorSignal = signal4(null);
-    const isLoadingSignal = signal4(false);
-    const providersSignal = signal4([]);
-    const updatedAtSignal = signal4(undefined);
+    const errorSignal = signal5(null);
+    const isLoadingSignal = signal5(false);
+    const providersSignal = signal5([]);
+    const updatedAtSignal = signal5(undefined);
     const sync = () => {
       const snapshot = store.getSnapshot();
       errorSignal.set(snapshot.error);
@@ -1582,7 +1844,7 @@ __runInitializers(_init, 1, VoiceProviderStatusService);
 __decoratorMetadata(_init, VoiceProviderStatusService);
 let _VoiceProviderStatusService = VoiceProviderStatusService;
 // src/angular/voice-workflow-status.service.ts
-import { computed as computed5, Injectable as Injectable5, signal as signal5 } from "@angular/core";
+import { computed as computed5, Injectable as Injectable5, signal as signal6 } from "@angular/core";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -1672,10 +1934,10 @@ var _init = __decoratorStart(undefined);
 class VoiceWorkflowStatusService {
   connect(path = "/evals/scenarios/json", options = {}) {
     const store = createVoiceWorkflowStatusStore(path, options);
-    const errorSignal = signal5(null);
-    const isLoadingSignal = signal5(false);
-    const reportSignal = signal5(undefined);
-    const updatedAtSignal = signal5(undefined);
+    const errorSignal = signal6(null);
+    const isLoadingSignal = signal6(false);
+    const reportSignal = signal6(undefined);
+    const updatedAtSignal = signal6(undefined);
     const sync = () => {
       const snapshot = store.getSnapshot();
       errorSignal.set(snapshot.error);
@@ -1709,6 +1971,7 @@ export {
   VoiceWorkflowStatusService,
   VoiceStreamService,
   VoiceProviderStatusService,
+  VoiceOpsStatusComponent,
   VoiceControllerService,
   VoiceAppKitStatusService
 };

package/dist/angular/voice-ops-status.component.d.ts

@@ -0,0 +1,15 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { type VoiceOpsStatusViewModel } from '../client/opsStatusWidget';
+export declare class VoiceOpsStatusComponent implements OnDestroy, OnInit {
+    description?: string;
+    includeLinks: boolean;
+    intervalMs?: number;
+    path: string;
+    title?: string;
+    private cleanup;
+    private store?;
+    model: import("@angular/core").WritableSignal<VoiceOpsStatusViewModel>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private options;
+}

package/dist/client/index.d.ts

@@ -6,8 +6,10 @@ export { bindVoiceBargeIn, createVoiceDuplexController } from './duplex';
 export { bindVoiceHTMX } from './htmx';
 export { createMicrophoneCapture } from './microphone';
 export { createVoiceAppKitStatusStore, fetchVoiceAppKitStatus } from './appKitStatus';
+export { createVoiceOpsStatusViewModel, defineVoiceOpsStatusElement, getVoiceOpsStatusCSS, getVoiceOpsStatusLabel, mountVoiceOpsStatus, renderVoiceOpsStatusHTML } from './opsStatusWidget';
 export { createVoiceProviderStatusStore, fetchVoiceProviderStatus } from './providerStatus';
 export { createVoiceWorkflowStatusStore, fetchVoiceWorkflowStatus } from './workflowStatus';
 export type { VoiceAppKitStatusClientOptions, VoiceAppKitStatusSnapshot } from './appKitStatus';
+export type { VoiceOpsStatusSurfaceView, VoiceOpsStatusViewModel, VoiceOpsStatusWidgetOptions } from './opsStatusWidget';
 export type { VoiceProviderStatusClientOptions, VoiceProviderStatusSnapshot } from './providerStatus';
 export type { VoiceWorkflowStatusClientOptions, VoiceWorkflowStatusSnapshot } from './workflowStatus';

package/dist/client/index.js

@@ -1701,6 +1701,130 @@ var createVoiceAppKitStatusStore = (path = "/app-kit/status", options = {}) => {
     }
   };
 };
+// src/client/opsStatusWidget.ts
+var DEFAULT_TITLE = "Voice Ops Status";
+var DEFAULT_DESCRIPTION = "Certified workflow, provider, and handoff readiness from the AbsoluteJS voice app kit.";
+var SURFACE_LABELS = {
+  handoffs: "Handoffs",
+  providers: "Providers",
+  quality: "Quality",
+  sessions: "Sessions",
+  workflows: "Workflows"
+};
+var escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+var readNumber = (value, key) => value && typeof value === "object" && (key in value) ? Number(value[key] ?? 0) : 0;
+var surfaceDetail = (surface) => {
+  const total = readNumber(surface, "total");
+  const failed = readNumber(surface, "failed");
+  const degraded = readNumber(surface, "degraded");
+  const source = surface && typeof surface === "object" && "source" in surface && typeof surface.source === "string" ? ` from ${surface.source}` : "";
+  if (degraded > 0) {
+    return `${degraded} degraded of ${total}`;
+  }
+  if (failed > 0) {
+    return `${failed} failing of ${total}${source}`;
+  }
+  return total > 0 ? `${total} passing${source}` : `No failures${source}`;
+};
+var getVoiceOpsStatusLabel = (report, error) => {
+  if (error) {
+    return "Unavailable";
+  }
+  if (!report) {
+    return "Checking";
+  }
+  return report.status === "pass" ? "Passing" : "Needs attention";
+};
+var createVoiceOpsStatusViewModel = (snapshot, options = {}) => {
+  const report = snapshot.report;
+  const surfaces = Object.entries(report?.surfaces ?? {}).map(([id, surface]) => {
+    const failed = readNumber(surface, "failed") || readNumber(surface, "degraded");
+    const total = readNumber(surface, "total");
+    const status = surface && typeof surface === "object" && "status" in surface ? surface.status ?? "pass" : "pass";
+    return {
+      detail: surfaceDetail(surface),
+      failed,
+      id,
+      label: SURFACE_LABELS[id] ?? id,
+      status,
+      total
+    };
+  });
+  return {
+    description: options.description ?? DEFAULT_DESCRIPTION,
+    error: snapshot.error,
+    isLoading: snapshot.isLoading,
+    label: getVoiceOpsStatusLabel(report, snapshot.error),
+    links: options.includeLinks === false ? [] : report?.links ?? [],
+    passed: report?.passed ?? 0,
+    status: snapshot.error ? "error" : report ? report.status : snapshot.isLoading ? "loading" : "loading",
+    surfaces,
+    title: options.title ?? DEFAULT_TITLE,
+    total: report?.total ?? 0,
+    updatedAt: snapshot.updatedAt
+  };
+};
+var renderVoiceOpsStatusHTML = (snapshot, options = {}) => {
+  const model = createVoiceOpsStatusViewModel(snapshot, options);
+  const surfaces = model.surfaces.length ? model.surfaces.map((surface) => `<li class="absolute-voice-ops-status__surface absolute-voice-ops-status__surface--${escapeHtml(surface.status)}">
+  <span>${escapeHtml(surface.label)}</span>
+  <strong>${escapeHtml(surface.detail)}</strong>
+</li>`).join("") : '<li class="absolute-voice-ops-status__surface"><span>Status</span><strong>Waiting for first check</strong></li>';
+  const links = model.links.length ? `<nav class="absolute-voice-ops-status__links">${model.links.slice(0, 4).map((link) => `<a href="${escapeHtml(link.href)}">${escapeHtml(link.label)}</a>`).join("")}</nav>` : "";
+  return `<section class="absolute-voice-ops-status absolute-voice-ops-status--${escapeHtml(model.status)}">
+  <header class="absolute-voice-ops-status__header">
+    <span class="absolute-voice-ops-status__eyebrow">${escapeHtml(model.title)}</span>
+    <strong class="absolute-voice-ops-status__label">${escapeHtml(model.label)}</strong>
+  </header>
+  <p class="absolute-voice-ops-status__description">${escapeHtml(model.description)}</p>
+  <div class="absolute-voice-ops-status__summary">
+    <span>${model.passed} passing</span>
+    <span>${Math.max(model.total - model.passed, 0)} failing</span>
+    <span>${model.total} checks</span>
+  </div>
+  <ul class="absolute-voice-ops-status__surfaces">${surfaces}</ul>
+  ${model.error ? `<p class="absolute-voice-ops-status__error">${escapeHtml(model.error)}</p>` : ""}
+  ${links}
+</section>`;
+};
+var getVoiceOpsStatusCSS = () => `.absolute-voice-ops-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-ops-status--fail,.absolute-voice-ops-status--error{border-color:#f2a7a7;background:#fff5f3}.absolute-voice-ops-status__header{align-items:start;display:flex;gap:12px;justify-content:space-between}.absolute-voice-ops-status__eyebrow{color:#73664f;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.absolute-voice-ops-status__label{font-size:28px;line-height:1}.absolute-voice-ops-status__description{color:#514733;margin:12px 0 0}.absolute-voice-ops-status__summary,.absolute-voice-ops-status__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.absolute-voice-ops-status__summary span,.absolute-voice-ops-status__links a{border:1px solid #e6ddca;border-radius:999px;color:inherit;padding:6px 10px;text-decoration:none}.absolute-voice-ops-status__surfaces{display:grid;gap:8px;list-style:none;margin:16px 0 0;padding:0}.absolute-voice-ops-status__surface{align-items:center;background:#fff;border:1px solid #eee4d2;border-radius:14px;display:flex;gap:12px;justify-content:space-between;padding:10px 12px}.absolute-voice-ops-status__surface--fail{border-color:#f2a7a7}.absolute-voice-ops-status__surface span{color:#655944}.absolute-voice-ops-status__error{color:#9f1239;font-weight:700}`;
+var mountVoiceOpsStatus = (element, path = "/app-kit/status", options = {}) => {
+  const store = createVoiceAppKitStatusStore(path, options);
+  const render = () => {
+    element.innerHTML = renderVoiceOpsStatusHTML(store.getSnapshot(), options);
+  };
+  const unsubscribe = store.subscribe(render);
+  render();
+  store.refresh().catch(() => {});
+  return {
+    close: () => {
+      unsubscribe();
+      store.close();
+    },
+    refresh: store.refresh
+  };
+};
+var defineVoiceOpsStatusElement = (tagName = "absolute-voice-ops-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceOpsStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceOpsStatus(this, this.getAttribute("path") ?? "/app-kit/status", {
+        description: this.getAttribute("description") ?? undefined,
+        includeLinks: this.getAttribute("include-links") !== "false",
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
 // src/client/providerStatus.ts
 var fetchVoiceProviderStatus = async (path = "/api/provider-status", options = {}) => {
   const fetchImpl = options.fetch ?? globalThis.fetch;
@@ -1859,13 +1983,19 @@ var createVoiceWorkflowStatusStore = (path = "/evals/scenarios/json", options =
   };
 };
 export {
+  renderVoiceOpsStatusHTML,
+  mountVoiceOpsStatus,
+  getVoiceOpsStatusLabel,
+  getVoiceOpsStatusCSS,
   fetchVoiceWorkflowStatus,
   fetchVoiceProviderStatus,
   fetchVoiceAppKitStatus,
+  defineVoiceOpsStatusElement,
   decodeVoiceAudioChunk,
   createVoiceWorkflowStatusStore,
   createVoiceStream,
   createVoiceProviderStatusStore,
+  createVoiceOpsStatusViewModel,
   createVoiceDuplexController,
   createVoiceController,
   createVoiceConnection,

package/dist/client/opsStatusWidget.d.ts

@@ -0,0 +1,40 @@
+import type { VoiceAppKitStatusReport } from '../appKit';
+import { type VoiceAppKitStatusClientOptions, type VoiceAppKitStatusSnapshot } from './appKitStatus';
+export type VoiceOpsStatusSurfaceView = {
+    detail: string;
+    failed: number;
+    id: string;
+    label: string;
+    status: 'pass' | 'fail';
+    total: number;
+};
+export type VoiceOpsStatusViewModel = {
+    description: string;
+    error: string | null;
+    isLoading: boolean;
+    label: string;
+    links: Array<{
+        href: string;
+        label: string;
+    }>;
+    passed: number;
+    status: 'pass' | 'fail' | 'loading' | 'error';
+    surfaces: VoiceOpsStatusSurfaceView[];
+    title: string;
+    total: number;
+    updatedAt?: number;
+};
+export type VoiceOpsStatusWidgetOptions = VoiceAppKitStatusClientOptions & {
+    description?: string;
+    includeLinks?: boolean;
+    title?: string;
+};
+export declare const getVoiceOpsStatusLabel: (report?: VoiceAppKitStatusReport | null, error?: string | null) => "Unavailable" | "Checking" | "Passing" | "Needs attention";
+export declare const createVoiceOpsStatusViewModel: (snapshot: VoiceAppKitStatusSnapshot, options?: VoiceOpsStatusWidgetOptions) => VoiceOpsStatusViewModel;
+export declare const renderVoiceOpsStatusHTML: (snapshot: VoiceAppKitStatusSnapshot, options?: VoiceOpsStatusWidgetOptions) => string;
+export declare const getVoiceOpsStatusCSS: () => string;
+export declare const mountVoiceOpsStatus: (element: Element, path?: string, options?: VoiceOpsStatusWidgetOptions) => {
+    close: () => void;
+    refresh: () => Promise<VoiceAppKitStatusReport | undefined>;
+};
+export declare const defineVoiceOpsStatusElement: (tagName?: string) => void;

package/dist/react/VoiceOpsStatus.d.ts

@@ -0,0 +1,6 @@
+import { type VoiceOpsStatusWidgetOptions } from '../client/opsStatusWidget';
+export type VoiceOpsStatusProps = VoiceOpsStatusWidgetOptions & {
+    className?: string;
+    path?: string;
+};
+export declare const VoiceOpsStatus: ({ className, path, ...options }: VoiceOpsStatusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/react/index.d.ts

@@ -1,3 +1,4 @@
+export { VoiceOpsStatus } from './VoiceOpsStatus';
 export { useVoiceAppKitStatus } from './useVoiceAppKitStatus';
 export { useVoiceStream } from './useVoiceStream';
 export { useVoiceController } from './useVoiceController';