@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/voice-agent/components/VoiceAgentSurface.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useRouter } from "../../host/navigation.js";
 import { Music2, Radio, Settings2 } from "lucide-react";
@@ -175,111 +176,132 @@ function VoiceAgentSurface({
       });
     }
   }, [liveError]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     SurfaceRuntimeProvider,
     {
       surfaceName: VOICE_CHAT_SURFACE,
-      getScope: getSurfaceScope
-    },
-    /* @__PURE__ */ React.createElement(
-      RouteHeader,
-      {
-        left: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-          ChevronLeftTapButton,
+      getScope: getSurfaceScope,
+      children: [
+        /* @__PURE__ */ jsx(
+          RouteHeader,
           {
-            onClick: () => router.back(),
-            ariaLabel: "Back"
+            left: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                ChevronLeftTapButton,
+                {
+                  onClick: () => router.back(),
+                  ariaLabel: "Back"
+                }
+              ),
+              /* @__PURE__ */ jsx("h1", { className: "ml-1 text-sm font-medium text-foreground", children: preset === "intro" ? "AI Matrx" : "Voice Playground" })
+            ] }),
+            right: preset === "playground" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                TapTargetButton,
+                {
+                  href: "/chat/voice/music",
+                  icon: /* @__PURE__ */ jsx(Music2, { className: "h-4 w-4" }),
+                  label: "Music"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TapTargetButton,
+                {
+                  href: "/chat/voice/gemini",
+                  icon: /* @__PURE__ */ jsx(Radio, { className: "h-4 w-4" }),
+                  label: "Gemini Live"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TapTargetButton,
+                {
+                  icon: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" }),
+                  label: "Settings",
+                  ariaLabel: "Voice settings",
+                  onClick: () => setSettingsOpen(true)
+                }
+              )
+            ] }) : void 0
           }
-        ), /* @__PURE__ */ React.createElement("h1", { className: "ml-1 text-sm font-medium text-foreground" }, preset === "intro" ? "AI Matrx" : "Voice Playground")),
-        right: preset === "playground" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-          TapTargetButton,
-          {
-            href: "/chat/voice/music",
-            icon: /* @__PURE__ */ React.createElement(Music2, { className: "h-4 w-4" }),
-            label: "Music"
-          }
-        ), /* @__PURE__ */ React.createElement(
-          TapTargetButton,
-          {
-            href: "/chat/voice/gemini",
-            icon: /* @__PURE__ */ React.createElement(Radio, { className: "h-4 w-4" }),
-            label: "Gemini Live"
-          }
-        ), /* @__PURE__ */ React.createElement(
-          TapTargetButton,
+        ),
+        preset === "playground" && /* @__PURE__ */ jsx(
+          PlaygroundSettingsSheet,
           {
-            icon: /* @__PURE__ */ React.createElement(Settings2, { className: "h-4 w-4" }),
-            label: "Settings",
-            ariaLabel: "Voice settings",
-            onClick: () => setSettingsOpen(true)
+            instanceId,
+            disabled: liveStatus !== "idle" && liveStatus !== "error",
+            open: settingsOpen,
+            onOpenChange: setSettingsOpen
           }
-        )) : void 0
-      }
-    ),
-    preset === "playground" && /* @__PURE__ */ React.createElement(
-      PlaygroundSettingsSheet,
-      {
-        instanceId,
-        disabled: liveStatus !== "idle" && liveStatus !== "error",
-        open: settingsOpen,
-        onOpenChange: setSettingsOpen
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          // h-full, never h-dvh: `.shell-main` already fills the viewport
-          // behind the glass header, so the stage must not re-add its height.
-          "relative h-full flex flex-col overflow-hidden bg-background text-foreground"
-        )
-      },
-      /* @__PURE__ */ React.createElement(VoiceEdgeRibbon, { status: liveStatus }),
-      /* @__PURE__ */ React.createElement("main", { className: "relative flex-1 min-h-0" }, /* @__PURE__ */ React.createElement(
-        "section",
-        {
-          className: cn(
-            "absolute inset-0 z-0 overflow-y-auto",
-            // Mask older content so the eye is drawn toward the orb.
-            "[mask-image:linear-gradient(to_bottom,transparent,#000_12%,#000_72%,transparent)]"
-          ),
-          "aria-label": "Voice transcript",
-          "data-surface-value": "transcript_text"
-        },
-        turns.length === 0 ? /* @__PURE__ */ React.createElement(EmptyTranscript, { preset }) : /* @__PURE__ */ React.createElement(VoiceTranscriptStream, { turns })
-      ), /* @__PURE__ */ React.createElement(
-        "section",
-        {
-          className: cn(
-            "pointer-events-none absolute inset-x-0 top-[54%] z-10",
-            "-translate-y-1/2 flex flex-col items-center gap-5 px-4 pb-safe"
-          )
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            "data-surface-value": "connection_status",
-            className: "flex flex-col items-center gap-1"
-          },
-          /* @__PURE__ */ React.createElement(VoiceStatusPill, { status: liveStatus, micMuted }),
-          preset === "intro" && /* @__PURE__ */ React.createElement("div", { className: "pointer-events-auto" }, /* @__PURE__ */ React.createElement(LiveVoiceDoor, { voiceId: scopeVoiceId, agentId }))
         ),
-        /* @__PURE__ */ React.createElement("div", { className: "pointer-events-auto relative size-[260px]" }, /* @__PURE__ */ React.createElement(VoiceOrb, { status: liveStatus }), /* @__PURE__ */ React.createElement("div", { className: "absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2" }, /* @__PURE__ */ React.createElement(
-          VoiceControlCluster,
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            status: liveStatus,
-            micMuted,
-            onToggleSession: toggle,
-            onToggleMute: toggleMute
+            className: cn(
+              // h-full, never h-dvh: `.shell-main` already fills the viewport
+              // behind the glass header, so the stage must not re-add its height.
+              "relative h-full flex flex-col overflow-hidden bg-background text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(VoiceEdgeRibbon, { status: liveStatus }),
+              /* @__PURE__ */ jsxs("main", { className: "relative flex-1 min-h-0", children: [
+                /* @__PURE__ */ jsx(
+                  "section",
+                  {
+                    className: cn(
+                      "absolute inset-0 z-0 overflow-y-auto",
+                      // Mask older content so the eye is drawn toward the orb.
+                      "[mask-image:linear-gradient(to_bottom,transparent,#000_12%,#000_72%,transparent)]"
+                    ),
+                    "aria-label": "Voice transcript",
+                    "data-surface-value": "transcript_text",
+                    children: turns.length === 0 ? /* @__PURE__ */ jsx(EmptyTranscript, { preset }) : /* @__PURE__ */ jsx(VoiceTranscriptStream, { turns })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "section",
+                  {
+                    className: cn(
+                      "pointer-events-none absolute inset-x-0 top-[54%] z-10",
+                      "-translate-y-1/2 flex flex-col items-center gap-5 px-4 pb-safe"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          "data-surface-value": "connection_status",
+                          className: "flex flex-col items-center gap-1",
+                          children: [
+                            /* @__PURE__ */ jsx(VoiceStatusPill, { status: liveStatus, micMuted }),
+                            preset === "intro" && /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(LiveVoiceDoor, { voiceId: scopeVoiceId, agentId }) })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto relative size-[260px]", children: [
+                        /* @__PURE__ */ jsx(VoiceOrb, { status: liveStatus }),
+                        /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
+                          VoiceControlCluster,
+                          {
+                            status: liveStatus,
+                            micMuted,
+                            onToggleSession: toggle,
+                            onToggleMute: toggleMute
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "pointer-events-auto w-full max-w-md", children: /* @__PURE__ */ jsx(VoiceErrorBanner, { error: liveError }) })
+                    ]
+                  }
+                )
+              ] })
+            ]
           }
-        ))),
-        /* @__PURE__ */ React.createElement("div", { className: "pointer-events-auto w-full max-w-md" }, /* @__PURE__ */ React.createElement(VoiceErrorBanner, { error: liveError }))
-      ))
-    )
+        )
+      ]
+    }
   );
 }
 function EmptyTranscript({ preset }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "absolute inset-x-0 top-[72%] px-6 flex justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "max-w-md text-center text-base text-muted-foreground leading-relaxed" }, preset === "intro" ? "Tap to begin a conversation about your business and how AI can transform it." : "Voice playground \u2014 adjust the voice, tools, and instructions in settings before you start."));
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-[72%] px-6 flex justify-center", children: /* @__PURE__ */ jsx("p", { className: "max-w-md text-center text-base text-muted-foreground leading-relaxed", children: preset === "intro" ? "Tap to begin a conversation about your business and how AI can transform it." : "Voice playground \u2014 adjust the voice, tools, and instructions in settings before you start." }) });
 }
 export {
   VoiceAgentSurface

package/dist/voice-agent/components/VoiceControlCluster.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ai-matrx/design-system";
 import { VoiceMicButton } from "./VoiceMicButton.js";
 import { VoiceMuteButton } from "./VoiceMuteButton.js";
@@ -13,7 +14,10 @@ function VoiceControlCluster({
   className
 }) {
   const showMute = isLiveSession(status);
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-3", className) }, showMute ? /* @__PURE__ */ React.createElement(VoiceMuteButton, { muted: micMuted, onToggle: onToggleMute }) : null, /* @__PURE__ */ React.createElement(VoiceMicButton, { status, onToggle: onToggleSession }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
+    showMute ? /* @__PURE__ */ jsx(VoiceMuteButton, { muted: micMuted, onToggle: onToggleMute }) : null,
+    /* @__PURE__ */ jsx(VoiceMicButton, { status, onToggle: onToggleSession })
+  ] });
 }
 export {
   VoiceControlCluster

package/dist/voice-agent/components/VoiceDebugPanel.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { toast as copyToast } from "../../host/notify.js";
 import { Badge, Button, Tile } from "@ai-matrx/design-system/controls";
@@ -18,7 +19,7 @@ function Flag({
   on,
   tone = "bool"
 }) {
-  return /* @__PURE__ */ React.createElement(Badge, { tone: on ? tone === "warn" ? "warning" : "success" : "neutral" }, label);
+  return /* @__PURE__ */ jsx(Badge, { tone: on ? tone === "warn" ? "warning" : "success" : "neutral", children: label });
 }
 const LEVEL_CLASS = {
   info: "text-muted-foreground",
@@ -76,113 +77,217 @@ function VoiceDebugPanel({
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "pointer-events-auto w-full overflow-hidden rounded-lg border border-border bg-zinc-950/95 text-zinc-100 shadow-lg backdrop-blur" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-between gap-2 px-3 py-1.5" }, /* @__PURE__ */ React.createElement(
-    Tile,
-    {
-      variant: "quiet",
-      icon: /* @__PURE__ */ React.createElement(Bug, null),
-      glyphTone: "success",
-      title: "Live voice debug",
-      onClick: () => setOpen((o) => !o),
-      className: "flex-1"
-    }
-  ), /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      tone: flags.status === "error" ? "destructive" : flags.status === "idle" ? "neutral" : "success"
-    },
-    flags.status
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      variant: "quiet",
-      onClick: handleCopy,
-      title: "Copy debug data",
-      "aria-label": "Copy debug data",
-      icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null),
-      glyphTone: copied ? "success" : void 0
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "quiet",
-      icon: open ? /* @__PURE__ */ React.createElement(ChevronDown, null) : /* @__PURE__ */ React.createElement(ChevronUp, null),
-      "aria-label": open ? "Collapse" : "Expand",
-      onClick: () => setOpen((o) => !o)
-    }
-  ))), open && /* @__PURE__ */ React.createElement("div", { className: "space-y-2 border-t border-zinc-800 px-3 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1" }, /* @__PURE__ */ React.createElement(Flag, { label: "ws open", on: flags.wsOpen }), /* @__PURE__ */ React.createElement(Flag, { label: "streaming", on: flags.streamingReady }), /* @__PURE__ */ React.createElement(Flag, { label: "mic active", on: flags.captureActive }), /* @__PURE__ */ React.createElement(Flag, { label: "token", on: flags.tokenPresent }), /* @__PURE__ */ React.createElement(
-    Flag,
-    {
-      label: `mic: ${flags.micPermission}`,
-      on: flags.micPermission === "granted",
-      tone: flags.micPermission === "denied" ? "warn" : "bool"
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-x-3 gap-y-0.5 font-mono text-[10px] text-zinc-400 sm:grid-cols-3" }, /* @__PURE__ */ React.createElement("div", null, "token exp:", " ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.tokenExpiresInS === null ? "\u2014" : `${flags.tokenExpiresInS}s`)), /* @__PURE__ */ React.createElement("div", null, "session: ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, sessionAge)), /* @__PURE__ */ React.createElement("div", null, "starts: ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.startCount)), /* @__PURE__ */ React.createElement("div", null, "connects:", " ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.connectOkCount)), /* @__PURE__ */ React.createElement("div", null, "closes: ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.closeCount)), /* @__PURE__ */ React.createElement("div", null, "errors: ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.errorCount)), /* @__PURE__ */ React.createElement("div", null, "last close:", " ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.lastCloseCode ?? "\u2014", flags.lastCloseIntentional === null ? "" : flags.lastCloseIntentional ? " (intent)" : " (net)")), /* @__PURE__ */ React.createElement("div", { className: "col-span-2" }, "last event:", " ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.lastEventType ?? "\u2014", " \xB7", " ", formatRelativeTime(flags.lastEventAt))), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "col-span-full",
-        flags.micFramesSent === 0 && flags.streamingReady ? "text-red-400" : ""
-      )
-    },
-    "mic flow:",
-    " ",
-    /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, "captured=", flags.micFramesCaptured, " \xB7 sent=", flags.micFramesSent, " ", "\xB7 rms=", flags.micRms.toFixed(3))
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "col-span-full",
-        flags.captureActive && flags.micCtxState !== "running" ? "text-red-400" : ""
-      )
-    },
-    "audio ctx:",
-    " ",
-    /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, flags.micCtxState)
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "col-span-full",
-        flags.captureActive && (flags.micProcessCalls === 0 || !flags.micHasInput) ? "text-red-400" : ""
-      )
-    },
-    "worklet:",
-    " ",
-    /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, "process calls=", flags.micProcessCalls, " \xB7 hasInput=", String(flags.micHasInput))
-  ), /* @__PURE__ */ React.createElement("div", { className: "col-span-full" }, "mic mgr:", " ", /* @__PURE__ */ React.createElement("span", { className: "text-zinc-200" }, mic.state, " \xB7 refs=", mic.refCount, " \xB7 live=", String(mic.live)))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between pt-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-zinc-500" }, "Event log"), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      variant: "quiet",
-      onClick: () => voiceDebugClear(instanceId),
-      icon: /* @__PURE__ */ React.createElement(Trash2, null)
-    },
-    "Clear"
-  )), /* @__PURE__ */ React.createElement("div", { className: "max-h-44 overflow-y-auto rounded bg-black/40 font-mono text-[10px] leading-relaxed" }, entries.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1.5 text-zinc-600" }, "No events yet.") : [...entries].reverse().map((e) => /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      key: e.id,
-      className: "flex gap-2 border-b border-zinc-900 px-2 py-0.5 last:border-0"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-zinc-600" }, new Date(e.t).toLocaleTimeString([], {
-      hour12: false,
-      minute: "2-digit",
-      second: "2-digit"
-    })),
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn(
-          "shrink-0 font-semibold",
-          LEVEL_CLASS[e.level]
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto w-full overflow-hidden rounded-lg border border-border bg-zinc-950/95 text-zinc-100 shadow-lg backdrop-blur", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Tile,
+        {
+          variant: "quiet",
+          icon: /* @__PURE__ */ jsx(Bug, {}),
+          glyphTone: "success",
+          title: "Live voice debug",
+          onClick: () => setOpen((o) => !o),
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            tone: flags.status === "error" ? "destructive" : flags.status === "idle" ? "neutral" : "success",
+            children: flags.status
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "quiet",
+            onClick: handleCopy,
+            title: "Copy debug data",
+            "aria-label": "Copy debug data",
+            icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+            glyphTone: copied ? "success" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "quiet",
+            icon: open ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronUp, {}),
+            "aria-label": open ? "Collapse" : "Expand",
+            onClick: () => setOpen((o) => !o)
+          }
+        )
+      ] })
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-zinc-800 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx(Flag, { label: "ws open", on: flags.wsOpen }),
+        /* @__PURE__ */ jsx(Flag, { label: "streaming", on: flags.streamingReady }),
+        /* @__PURE__ */ jsx(Flag, { label: "mic active", on: flags.captureActive }),
+        /* @__PURE__ */ jsx(Flag, { label: "token", on: flags.tokenPresent }),
+        /* @__PURE__ */ jsx(
+          Flag,
+          {
+            label: `mic: ${flags.micPermission}`,
+            on: flags.micPermission === "granted",
+            tone: flags.micPermission === "denied" ? "warn" : "bool"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3 gap-y-0.5 font-mono text-[10px] text-zinc-400 sm:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          "token exp:",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-200", children: flags.tokenExpiresInS === null ? "\u2014" : `${flags.tokenExpiresInS}s` })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "session: ",
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-200", children: sessionAge })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "starts: ",
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-200", children: flags.startCount })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "connects:",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-200", children: flags.connectOkCount })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "closes: ",
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-200", children: flags.closeCount })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "errors: ",
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-200", children: flags.errorCount })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          "last close:",
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-zinc-200", children: [
+            flags.lastCloseCode ?? "\u2014",
+            flags.lastCloseIntentional === null ? "" : flags.lastCloseIntentional ? " (intent)" : " (net)"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "col-span-2", children: [
+          "last event:",
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-zinc-200", children: [
+            flags.lastEventType ?? "\u2014",
+            " \xB7",
+            " ",
+            formatRelativeTime(flags.lastEventAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "col-span-full",
+              flags.micFramesSent === 0 && flags.streamingReady ? "text-red-400" : ""
+            ),
+            children: [
+              "mic flow:",
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-zinc-200", children: [
+                "captured=",
+                flags.micFramesCaptured,
+                " \xB7 sent=",
+                flags.micFramesSent,
+                " ",
+                "\xB7 rms=",
+                flags.micRms.toFixed(3)
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "col-span-full",
+              flags.captureActive && flags.micCtxState !== "running" ? "text-red-400" : ""
+            ),
+            children: [
+              "audio ctx:",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-200", children: flags.micCtxState })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "col-span-full",
+              flags.captureActive && (flags.micProcessCalls === 0 || !flags.micHasInput) ? "text-red-400" : ""
+            ),
+            children: [
+              "worklet:",
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-zinc-200", children: [
+                "process calls=",
+                flags.micProcessCalls,
+                " \xB7 hasInput=",
+                String(flags.micHasInput)
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "col-span-full", children: [
+          "mic mgr:",
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-zinc-200", children: [
+            mic.state,
+            " \xB7 refs=",
+            mic.refCount,
+            " \xB7 live=",
+            String(mic.live)
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-zinc-500", children: "Event log" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "quiet",
+            onClick: () => voiceDebugClear(instanceId),
+            icon: /* @__PURE__ */ jsx(Trash2, {}),
+            children: "Clear"
+          }
         )
-      },
-      e.label
-    ),
-    e.detail && /* @__PURE__ */ React.createElement("span", { className: "truncate text-zinc-500", title: e.detail }, e.detail)
-  )))));
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-44 overflow-y-auto rounded bg-black/40 font-mono text-[10px] leading-relaxed", children: entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-zinc-600", children: "No events yet." }) : [...entries].reverse().map((e) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex gap-2 border-b border-zinc-900 px-2 py-0.5 last:border-0",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-zinc-600", children: new Date(e.t).toLocaleTimeString([], {
+              hour12: false,
+              minute: "2-digit",
+              second: "2-digit"
+            }) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 font-semibold",
+                  LEVEL_CLASS[e.level]
+                ),
+                children: e.label
+              }
+            ),
+            e.detail && /* @__PURE__ */ jsx("span", { className: "truncate text-zinc-500", title: e.detail, children: e.detail })
+          ]
+        },
+        e.id
+      )) })
+    ] })
+  ] });
 }
 export {
   VoiceDebugPanel