@yieldfabric/terminal 1.1.1 → 1.2.0

package/dist/index.js

@@ -6,7 +6,7 @@
  * Runtime use requires a separate express license.
  */
 import React15, { createContext, memo, useMemo, useRef, useEffect, useCallback, useContext, useState, useReducer } from 'react';
-import { X, Check, Plus, FileText, MessageCircle, ChevronRight, Paperclip, FolderOpen, Brain, XCircle, Loader2, Minimize2, Maximize2, AlertTriangle, HelpCircle, ChevronLeft, Pencil, ChevronDown, ExternalLink, Search, Network, Boxes, Settings, Terminal, CheckCircle, ArrowRight, Users, Eye, AlertCircle, CheckCircle2, Copy, Zap, Download, Trash2, Link2 } from 'lucide-react';
+import { X, Check, Plus, FileText, MessageCircle, ChevronRight, Paperclip, FolderOpen, Brain, XCircle, Loader2, Minimize2, Maximize2, Mic, AlertTriangle, HelpCircle, ChevronLeft, Pencil, ChevronDown, ExternalLink, Search, Network, Boxes, Settings, Terminal, CheckCircle, ArrowRight, Users, Eye, AlertCircle, CheckCircle2, Copy, Zap, Download, Trash2, Link2 } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -809,11 +809,11 @@ var AVATAR_COLORS = [
   "#ef4444"
 ];
 function avatarColor(entityId) {
-  let hash = 0;
+  let hash2 = 0;
   for (let i = 0; i < entityId.length; i++) {
-    hash = entityId.charCodeAt(i) + ((hash << 5) - hash);
+    hash2 = entityId.charCodeAt(i) + ((hash2 << 5) - hash2);
   }
-  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+  return AVATAR_COLORS[Math.abs(hash2) % AVATAR_COLORS.length];
 }
 function initials(name) {
   return name.split(" ").map((w) => w[0]).join("").toUpperCase().slice(0, 2);
@@ -3380,6 +3380,7 @@ function TerminalInputBar({
   selectedPaletteItem,
   onSelectPaletteItem,
   inputBarExtra,
+  leading,
   modeSelector,
   compactToolbar = false,
   submitTitle = "Send",
@@ -3658,6 +3659,7 @@ function TerminalInputBar({
                 })(),
                 /* @__PURE__ */ jsxs("div", { ref: toolbarRef, className: "flex items-center justify-between pt-2.5 gap-2", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] min-w-0 flex-wrap", children: [
+                    leading,
                     chipsVisible && /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(
                         "button",
@@ -3668,7 +3670,7 @@ function TerminalInputBar({
                             inputRef.current?.focus();
                           },
                           title: "Insert @ mention",
-                          className: `${toolbarIsCompact ? "px-2" : "px-2.5"} py-1 min-h-[40px] sm:min-h-0 inline-flex items-center rounded-lg transition-colors font-semibold flex-shrink-0`,
+                          className: `${toolbarIsCompact ? "px-2" : "px-2.5"} h-[22px] inline-flex items-center rounded-lg transition-colors font-semibold flex-shrink-0`,
                           style: toolbarButtonStyle,
                           onMouseEnter: (e) => {
                             e.currentTarget.style.backgroundColor = toolbarButtonHover;
@@ -3688,7 +3690,7 @@ function TerminalInputBar({
                             inputRef.current?.focus();
                           },
                           title: "Insert / command",
-                          className: `${toolbarIsCompact ? "px-2" : "px-2.5"} py-1 min-h-[40px] sm:min-h-0 inline-flex items-center rounded-lg transition-colors font-semibold flex-shrink-0`,
+                          className: `${toolbarIsCompact ? "px-2" : "px-2.5"} h-[22px] inline-flex items-center rounded-lg transition-colors font-semibold flex-shrink-0`,
                           style: toolbarButtonStyle,
                           onMouseEnter: (e) => {
                             e.currentTarget.style.backgroundColor = toolbarButtonHover;
@@ -3722,7 +3724,7 @@ function TerminalInputBar({
                       {
                         type: "button",
                         disabled: isExecuting || disabled,
-                        className: "h-10 w-10 sm:h-8 sm:w-8 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-all duration-200",
+                        className: "h-[22px] px-1.5 rounded-lg disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-all duration-200",
                         style: toolbarButtonStyle,
                         title: "Upload files",
                         onClick: () => fileInputRef.current?.click(),
@@ -3732,7 +3734,7 @@ function TerminalInputBar({
                         onMouseLeave: (e) => {
                           e.currentTarget.style.backgroundColor = toolbarButtonBg;
                         },
-                        children: /* @__PURE__ */ jsx(Paperclip, { className: "w-4 h-4" })
+                        children: /* @__PURE__ */ jsx(Paperclip, { className: "w-3.5 h-3.5" })
                       }
                     ),
                     showFilesButton && /* @__PURE__ */ jsx(
@@ -3740,7 +3742,7 @@ function TerminalInputBar({
                       {
                         type: "button",
                         disabled: isExecuting || disabled,
-                        className: "h-10 w-10 sm:h-8 sm:w-8 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-all duration-200",
+                        className: "h-[22px] px-1.5 rounded-lg disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-all duration-200",
                         style: toolbarButtonStyle,
                         title: "List files",
                         onClick: () => onListFilesCommand(),
@@ -3750,7 +3752,7 @@ function TerminalInputBar({
                         onMouseLeave: (e) => {
                           e.currentTarget.style.backgroundColor = toolbarButtonBg;
                         },
-                        children: /* @__PURE__ */ jsx(FolderOpen, { className: "w-4 h-4" })
+                        children: /* @__PURE__ */ jsx(FolderOpen, { className: "w-3.5 h-3.5" })
                       }
                     )
                   ] })
@@ -5538,6 +5540,7 @@ Path: ${parsed.endpoint.path}`);
             core.setCommandPaletteItems([]);
           },
           inputBarExtra: slots?.inputBarExtra,
+          leading: slots?.inputBarLeading,
           modeSelector: slots?.modeSelector
         }
       ),
@@ -6210,6 +6213,7 @@ function ChatTerminal({
             core.setCommandPaletteItems([]);
           },
           inputBarExtra: slots?.inputBarExtra,
+          leading: slots?.inputBarLeading,
           modeSelector: slots?.modeSelector
         }
       ),
@@ -7613,6 +7617,1104 @@ function agentStepTraceExtra(entry) {
   const working = meta?.agentStepsLive ?? entry.content.endsWith("\u258B");
   return /* @__PURE__ */ jsx(AgentStepTrace, { steps, working });
 }
+var BAR_SHAPE = [0.55, 1, 0.8, 0.45];
+function tintOf(color, alpha) {
+  return `color-mix(in srgb, ${color} ${Math.round(alpha * 100)}%, transparent)`;
+}
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(
+    () => typeof window !== "undefined" && !!window.matchMedia?.("(pointer: coarse)").matches
+  );
+  useEffect(() => {
+    const mq = window.matchMedia?.("(pointer: coarse)");
+    if (!mq) return void 0;
+    const on = () => setCoarse(mq.matches);
+    mq.addEventListener?.("change", on);
+    return () => mq.removeEventListener?.("change", on);
+  }, []);
+  return coarse;
+}
+function VoiceInputButton({
+  state,
+  onToggle,
+  disabled = false,
+  level,
+  startTitle = "Talk",
+  stopTitle = "End voice"
+}) {
+  const t = useTheme();
+  const coarse = useCoarsePointer();
+  const isLight = t.mode ? t.mode === "light" : t.bgRaised === "#ffffff";
+  const on = state !== "off";
+  const tint = (a) => tintOf(t.primary, a);
+  const bars = useRef([]);
+  const levelRef = useRef(level);
+  levelRef.current = level;
+  useEffect(() => {
+    if (state !== "live") return void 0;
+    let raf = 0;
+    let smooth = 0;
+    const tick = (now) => {
+      const raw = levelRef.current ? Math.min(1, Math.max(0, levelRef.current())) : 0;
+      smooth = raw > smooth ? smooth + (raw - smooth) * 0.55 : smooth + (raw - smooth) * 0.12;
+      bars.current.forEach((bar, i) => {
+        if (!bar) return;
+        const idle = 0.18 + 0.1 * Math.sin(now / 320 + i * 1.3);
+        const h = Math.max(idle, smooth * BAR_SHAPE[i] * (0.85 + 0.15 * Math.sin(now / 90 + i * 2.1)));
+        bar.style.transform = `scaleY(${Math.min(1, h).toFixed(3)})`;
+      });
+      raf = window.requestAnimationFrame(tick);
+    };
+    raf = window.requestAnimationFrame(tick);
+    return () => window.cancelAnimationFrame(raf);
+  }, [state]);
+  const size = coarse ? 32 : 22;
+  const title = on ? stopTitle : startTitle;
+  const style = on ? {
+    backgroundColor: t.primary,
+    border: `1px solid ${t.primary}`,
+    color: t.textInverse,
+    boxShadow: `0 0 0 3px ${tint(0.18)}, 0 6px 18px -6px ${tint(0.75)}`
+  } : {
+    backgroundColor: isLight ? tint(0.07) : tint(0.1),
+    border: `1px solid ${tint(isLight ? 0.35 : 0.3)}`,
+    color: t.primary
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: disabled && !on,
+      "aria-pressed": on,
+      "aria-label": title,
+      title,
+      className: `relative flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-200 active:scale-95 ${coarse ? "rounded-full" : "rounded-lg px-1.5"}`,
+      style: { ...style, height: size, minWidth: size, WebkitTapHighlightColor: "transparent" },
+      onClick: onToggle,
+      children: [
+        state === "live" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `pointer-events-none absolute inset-0 animate-ping ${coarse ? "rounded-full" : "rounded-lg"}`,
+            style: { backgroundColor: tint(0.35), animationDuration: "1.8s" }
+          }
+        ) : null,
+        state === "connecting" ? /* @__PURE__ */ jsx(Loader2, { className: coarse ? "w-4 h-4 animate-spin" : "w-3.5 h-3.5 animate-spin" }) : state === "live" ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "relative flex items-center gap-[2px]", style: { height: coarse ? 14 : 11 }, children: BAR_SHAPE.map((_, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: (el) => {
+              bars.current[i] = el;
+            },
+            className: "block rounded-full",
+            style: {
+              width: coarse ? 2.5 : 2,
+              height: "100%",
+              backgroundColor: "currentColor",
+              transform: "scaleY(0.25)",
+              transformOrigin: "center",
+              transition: "transform 60ms linear"
+            }
+          },
+          i
+        )) }) : /* @__PURE__ */ jsx(Mic, { className: coarse ? "w-4 h-4" : "w-3.5 h-3.5" })
+      ]
+    }
+  );
+}
+
+// src/voice/askQueue.ts
+var REPLACED_OUTPUT = "Replaced by their corrected question, which is being answered instead. Say nothing about this one.";
+var AskQueue = class {
+  /**
+   * `run` asks the host (resolves with what the voice speaks from; a
+   * rejection is reported as a failure). `finish` sends the result: `speak`
+   * false for a replaced question.
+   */
+  constructor(run, finish) {
+    this.run = run;
+    this.finish = finish;
+    this.waiting = [];
+    this.running = null;
+  }
+  /** Questions being worked on or waiting. */
+  get size() {
+    return this.waiting.length + (this.running ? 1 : 0);
+  }
+  add(ask) {
+    if (ask.replaces && this.size > 0) {
+      for (const dropped of this.waiting) this.finish(dropped, REPLACED_OUTPUT, false);
+      this.waiting = [ask];
+      this.running?.controller.abort();
+    } else {
+      this.waiting.push(ask);
+    }
+    this.next();
+  }
+  next() {
+    if (this.running) return;
+    const ask = this.waiting.shift();
+    if (!ask) return;
+    const controller = new AbortController();
+    this.running = { ask, controller };
+    this.run(ask, controller.signal).catch((e) => `The assistant could not answer: ${e?.message || "unknown error"}. Tell them it failed; do not guess.`).then((output) => {
+      this.running = null;
+      if (controller.signal.aborted) this.finish(ask, REPLACED_OUTPUT, false);
+      else this.finish(ask, output, true);
+      this.next();
+    });
+  }
+};
+
+// src/voice/pcm.ts
+var WIRE_RATE = 24e3;
+var FRAME_SAMPLES = 2400;
+var Downsampler = class {
+  constructor(inputRate, outputRate = WIRE_RATE) {
+    /** Input samples not yet consumed. */
+    this.carry = new Float32Array(0);
+    /** Fractional read position into `carry`. */
+    this.pos = 0;
+    if (!(inputRate > 0) || !(outputRate > 0)) throw new Error("Sample rates must be positive");
+    this.ratio = inputRate / outputRate;
+  }
+  push(input) {
+    const buf = new Float32Array(this.carry.length + input.length);
+    buf.set(this.carry, 0);
+    buf.set(input, this.carry.length);
+    const out = [];
+    let pos = this.pos;
+    while (pos + this.ratio <= buf.length) {
+      const start = Math.floor(pos);
+      const end = Math.max(start + 1, Math.floor(pos + this.ratio));
+      let sum = 0;
+      for (let i = start; i < end; i += 1) sum += buf[i];
+      out.push(floatToInt16(sum / (end - start)));
+      pos += this.ratio;
+    }
+    const consumed = Math.floor(pos);
+    this.carry = buf.slice(consumed);
+    this.pos = pos - consumed;
+    return Int16Array.from(out);
+  }
+};
+function floatToInt16(sample) {
+  const s = Math.max(-1, Math.min(1, Number.isFinite(sample) ? sample : 0));
+  return s < 0 ? Math.round(s * 32768) : Math.round(s * 32767);
+}
+var FrameBuffer = class {
+  constructor() {
+    this.pending = [];
+  }
+  push(samples) {
+    for (let i = 0; i < samples.length; i += 1) this.pending.push(samples[i]);
+    const frames = [];
+    while (this.pending.length >= FRAME_SAMPLES) {
+      frames.push(toLittleEndian(this.pending.splice(0, FRAME_SAMPLES)));
+    }
+    return frames;
+  }
+};
+function toLittleEndian(samples) {
+  const view = new DataView(new ArrayBuffer(samples.length * 2));
+  samples.forEach((s, i) => view.setInt16(i * 2, s, true));
+  return view.buffer;
+}
+function pcm16ToFloat32(bytes) {
+  const view = new DataView(bytes);
+  const out = new Float32Array(Math.floor(bytes.byteLength / 2));
+  for (let i = 0; i < out.length; i += 1) out[i] = view.getInt16(i * 2, true) / 32768;
+  return out;
+}
+
+// src/voice/persona.ts
+var VOICE_NAMES = [
+  "alloy",
+  "ash",
+  "ballad",
+  "cedar",
+  "coral",
+  "echo",
+  "marin",
+  "sage",
+  "shimmer",
+  "verse"
+];
+var VOICE_LANGUAGES = ["en", "es", "pt", "fr", "de", "it", "nl", "ar", "hi", "ja", "ko", "zh"];
+function encodePersona(persona) {
+  if (!persona) return null;
+  const fields = Object.fromEntries(Object.entries(persona).filter(([, v]) => v !== void 0));
+  return Object.keys(fields).length ? JSON.stringify(fields) : null;
+}
+
+// src/voice/worklet.ts
+var VOICE_CAPTURE_WORKLET_SOURCE = `class YfVoiceCapture extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.batch = new Float32Array(2048);
+    this.filled = 0;
+  }
+  process(inputs) {
+    const channel = inputs[0] && inputs[0][0];
+    if (channel) {
+      let offset = 0;
+      while (offset < channel.length) {
+        const n = Math.min(channel.length - offset, this.batch.length - this.filled);
+        this.batch.set(channel.subarray(offset, offset + n), this.filled);
+        this.filled += n;
+        offset += n;
+        if (this.filled === this.batch.length) {
+          this.port.postMessage(this.batch, [this.batch.buffer]);
+          this.batch = new Float32Array(2048);
+          this.filled = 0;
+        }
+      }
+    }
+    return true;
+  }
+}
+registerProcessor('yf-voice-capture', YfVoiceCapture);
+`;
+var VOICE_CAPTURE_PROCESSOR = "yf-voice-capture";
+
+// src/voice/session.ts
+function socketBase(base) {
+  return base.replace(/^http/i, "ws").replace(/\/+$/, "");
+}
+var OFF = { enabled: false, blocked: null, maxSessionSecs: 0, persona: null };
+async function getVoiceStatus(connection, signal) {
+  const token = await connection.getToken();
+  if (!token) return OFF;
+  try {
+    const res = await fetch(`${connection.baseUrl.replace(/\/+$/, "")}/voice/status`, {
+      headers: { Authorization: `Bearer ${token}` },
+      signal
+    });
+    if (!res.ok) return OFF;
+    const body = await res.json();
+    return {
+      enabled: body?.enabled === true,
+      blocked: typeof body?.blocked === "string" ? body.blocked : null,
+      maxSessionSecs: Number(body?.max_session_secs) || 0,
+      persona: body?.persona && typeof body.persona.name === "string" ? body.persona : null
+    };
+  } catch {
+    return OFF;
+  }
+}
+var SILENT = { input: 0, output: 0 };
+function rms(analyser, buf) {
+  if (!analyser || !buf) return 0;
+  analyser.getFloatTimeDomainData(buf);
+  let sum = 0;
+  for (let i = 0; i < buf.length; i += 1) sum += buf[i] * buf[i];
+  return Math.sqrt(sum / buf.length);
+}
+var PcmPlayer = class {
+  constructor(ctx, out, onIdle) {
+    this.ctx = ctx;
+    this.out = out;
+    this.onIdle = onIdle;
+    this.next = 0;
+    this.live = /* @__PURE__ */ new Set();
+  }
+  get playing() {
+    return this.live.size > 0;
+  }
+  enqueue(bytes) {
+    const samples = pcm16ToFloat32(bytes);
+    if (samples.length === 0) return;
+    const buffer = this.ctx.createBuffer(1, samples.length, WIRE_RATE);
+    buffer.getChannelData(0).set(samples);
+    const source = this.ctx.createBufferSource();
+    source.buffer = buffer;
+    source.connect(this.out);
+    const at = Math.max(this.ctx.currentTime + 0.02, this.next);
+    source.start(at);
+    this.next = at + buffer.duration;
+    this.live.add(source);
+    source.onended = () => {
+      this.live.delete(source);
+      if (this.live.size === 0) this.onIdle();
+    };
+  }
+  stop() {
+    this.live.forEach((source) => {
+      source.onended = null;
+      try {
+        source.stop();
+      } catch {
+      }
+    });
+    this.live.clear();
+    this.next = 0;
+  }
+};
+var FINISH_GRACE_MS = 800;
+var FINISH_MAX_WAIT_MS = 15e3;
+var CLOSE_REASONS = {
+  time_limit: "time_limit",
+  replaced: "replaced",
+  upstream_closed: "lost",
+  upstream_error: "lost"
+};
+function voiceSocketUrl(connection, token) {
+  const params = new URLSearchParams({ access_token: token });
+  if (connection.threadId) params.set("thread_id", connection.threadId);
+  if (connection.workingGroupId) params.set("working_group_id", connection.workingGroupId);
+  const persona = encodePersona(connection.persona);
+  if (persona) params.set("persona", persona);
+  return `${socketBase(connection.baseUrl)}/voice/realtime?${params.toString()}`;
+}
+var VoiceSession = class {
+  constructor(h, connection) {
+    this.h = h;
+    this.connection = connection;
+    this.ctx = null;
+    this.stream = null;
+    this.node = null;
+    this.ws = null;
+    this.player = null;
+    this.inputAnalyser = null;
+    this.outputAnalyser = null;
+    this.inputBuf = null;
+    this.outputBuf = null;
+    this.ready = false;
+    this.ended = false;
+    this.phase = null;
+    /** The voice's questions to the host, one at a time (see `askQueue.ts`). */
+    this.asks = new AskQueue(
+      (ask, signal) => {
+        let open = true;
+        const progress = (line, kind) => {
+          if (open && !signal.aborted && line.trim()) this.send({ type: "progress", kind, text: line.slice(0, 240) });
+        };
+        return this.h.onAsk(ask.question, ask.heard, ask.utterance, progress, signal).finally(() => {
+          open = false;
+        });
+      },
+      (ask, output, speak) => {
+        if (this.ended) return;
+        this.send({ type: "tool_result", call_id: ask.callId, output, ...speak ? {} : { speak: false } });
+        this.settle();
+      }
+    );
+    this.heard = null;
+    this.partialHeard = "";
+    this.saying = "";
+    this.endingReason = null;
+    this.finishTimer = null;
+    this.blobUrl = null;
+  }
+  /** Call from the tap itself: iOS only lets audio start inside a gesture,
+   *  so the AudioContext is created before the first `await`. */
+  async start() {
+    const Ctx = window.AudioContext ?? window.webkitAudioContext;
+    if (!Ctx || !navigator.mediaDevices?.getUserMedia || typeof AudioWorkletNode === "undefined") {
+      this.end("unavailable", "This browser cannot do live voice.");
+      return;
+    }
+    const ctx = new Ctx();
+    this.ctx = ctx;
+    void ctx.resume();
+    this.setPhase("connecting");
+    const status = await getVoiceStatus(this.connection);
+    if (this.ended) return;
+    if (status.blocked) {
+      this.end("blocked", status.blocked);
+      return;
+    }
+    if (!status.enabled) {
+      this.end("unavailable", "Voice is not switched on.");
+      return;
+    }
+    try {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true, autoGainControl: true }
+      });
+    } catch (e) {
+      this.end("mic_denied", e?.message);
+      return;
+    }
+    if (this.ended) {
+      this.release();
+      return;
+    }
+    try {
+      let url = this.connection.workletUrl;
+      if (!url) {
+        this.blobUrl = URL.createObjectURL(new Blob([VOICE_CAPTURE_WORKLET_SOURCE], { type: "application/javascript" }));
+        url = this.blobUrl;
+      }
+      await ctx.audioWorklet.addModule(url);
+    } catch (e) {
+      this.end("unavailable", e?.message);
+      return;
+    }
+    if (this.ended) return;
+    const down = new Downsampler(ctx.sampleRate);
+    const frames = new FrameBuffer();
+    const node = new AudioWorkletNode(ctx, VOICE_CAPTURE_PROCESSOR);
+    this.node = node;
+    node.port.onmessage = (e) => {
+      const ws2 = this.ws;
+      if (!this.ready || !ws2 || ws2.readyState !== WebSocket.OPEN) return;
+      for (const frame of frames.push(down.push(e.data))) ws2.send(frame);
+    };
+    const mic = ctx.createMediaStreamSource(this.stream);
+    const inputAnalyser = ctx.createAnalyser();
+    inputAnalyser.fftSize = 1024;
+    const outputAnalyser = ctx.createAnalyser();
+    outputAnalyser.fftSize = 1024;
+    this.inputAnalyser = inputAnalyser;
+    this.outputAnalyser = outputAnalyser;
+    this.inputBuf = new Float32Array(inputAnalyser.fftSize);
+    this.outputBuf = new Float32Array(outputAnalyser.fftSize);
+    const mute = ctx.createGain();
+    mute.gain.value = 0;
+    mic.connect(inputAnalyser);
+    inputAnalyser.connect(node);
+    node.connect(mute);
+    mute.connect(ctx.destination);
+    outputAnalyser.connect(ctx.destination);
+    this.player = new PcmPlayer(ctx, outputAnalyser, () => this.settle());
+    const token = await this.connection.getToken();
+    if (this.ended) return;
+    if (!token) {
+      this.end("unavailable", "Sign in again to use voice.");
+      return;
+    }
+    const ws = new WebSocket(voiceSocketUrl(this.connection, token));
+    ws.binaryType = "arraybuffer";
+    this.ws = ws;
+    ws.onmessage = (e) => {
+      if (typeof e.data === "string") this.onEvent(e.data);
+      else this.onAudio(e.data);
+    };
+    ws.onclose = (e) => {
+      if (this.ended) return;
+      if (!this.ready) {
+        this.end("unavailable");
+        return;
+      }
+      this.end(this.endingReason ?? CLOSE_REASONS[e.reason] ?? "lost");
+    };
+  }
+  stop() {
+    this.end("stopped");
+  }
+  /** Cheap enough to call every animation frame. */
+  levels() {
+    if (this.ended) return SILENT;
+    return {
+      input: rms(this.inputAnalyser, this.inputBuf),
+      output: this.player?.playing ? rms(this.outputAnalyser, this.outputBuf) : 0
+    };
+  }
+  setPhase(phase) {
+    if (this.ended || this.phase === phase) return;
+    this.phase = phase;
+    this.h.onPhase(phase);
+  }
+  settle() {
+    if (this.asks.size > 0) this.setPhase("thinking");
+    else if (this.player?.playing) this.setPhase("speaking");
+    else this.setPhase("listening");
+  }
+  send(message) {
+    if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(message));
+  }
+  onAudio(bytes) {
+    if (this.ended || !this.player) return;
+    this.player.enqueue(bytes);
+    this.setPhase("speaking");
+  }
+  onEvent(raw) {
+    let ev;
+    try {
+      ev = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    const text = (k) => typeof ev[k] === "string" ? ev[k] : "";
+    switch (ev.type) {
+      case "session.ready":
+        this.ready = true;
+        this.setPhase("listening");
+        break;
+      case "input_audio_buffer.speech_started":
+        this.cancelFinish();
+        this.player?.stop();
+        this.saying = "";
+        this.partialHeard = "";
+        this.heard = null;
+        this.setPhase("hearing");
+        break;
+      case "input_audio_buffer.speech_stopped":
+        this.setPhase("thinking");
+        break;
+      case "conversation.item.input_audio_transcription.delta":
+        this.partialHeard += text("delta");
+        this.h.onHeard(this.partialHeard, false);
+        break;
+      case "conversation.item.input_audio_transcription.completed":
+        this.heard = text("transcript").trim() || null;
+        this.partialHeard = "";
+        this.h.onHeard(this.heard ?? "", true);
+        if (this.heard && text("message_id")) {
+          this.h.onUtterance?.({ itemId: text("item_id"), messageId: text("message_id"), text: this.heard });
+        }
+        break;
+      case "voice.reply":
+        if (text("message_id") && text("text")) {
+          this.h.onReply?.({
+            messageId: text("message_id"),
+            itemId: text("item_id") || null,
+            text: text("text"),
+            interrupted: ev.interrupted === true
+          });
+        }
+        break;
+      case "response.audio_transcript.delta":
+        this.saying += text("delta");
+        this.h.onSaying(this.saying, false);
+        break;
+      case "response.audio_transcript.done":
+        this.h.onSaying(text("transcript") || this.saying, true);
+        this.saying = "";
+        break;
+      case "tool_call":
+        this.asks.add({
+          callId: text("call_id"),
+          question: text("question"),
+          replaces: ev.replaces_earlier === true,
+          heard: this.heard,
+          utterance: text("message_id") ? { itemId: text("item_id"), messageId: text("message_id") } : null
+        });
+        this.setPhase("thinking");
+        break;
+      case "response.done":
+        if (!this.player?.playing) this.settle();
+        break;
+      case "session.ending":
+        this.endingReason = CLOSE_REASONS[text("reason")] ?? "lost";
+        break;
+      case "session.finish":
+        this.finishAfterGoodbye();
+        break;
+      case "error":
+        console.warn("[voice]", ev.code, ev.message);
+        break;
+    }
+  }
+  /** They are done: end once the goodbye has finished playing. */
+  finishAfterGoodbye() {
+    this.cancelFinish();
+    const deadline = Date.now() + FINISH_MAX_WAIT_MS;
+    const check = () => {
+      if (this.ended) return;
+      if (this.player?.playing && Date.now() < deadline) {
+        this.finishTimer = setTimeout(check, 200);
+        return;
+      }
+      this.finishTimer = setTimeout(() => this.end("finished"), FINISH_GRACE_MS);
+    };
+    check();
+  }
+  cancelFinish() {
+    if (this.finishTimer) clearTimeout(this.finishTimer);
+    this.finishTimer = null;
+  }
+  release() {
+    this.node?.port.close();
+    this.node?.disconnect();
+    this.stream?.getTracks().forEach((t) => t.stop());
+    this.player?.stop();
+    void this.ctx?.close().catch(() => void 0);
+    if (this.blobUrl) URL.revokeObjectURL(this.blobUrl);
+    this.blobUrl = null;
+    this.inputAnalyser = null;
+    this.outputAnalyser = null;
+    this.node = null;
+    this.stream = null;
+    this.ctx = null;
+  }
+  end(reason, detail) {
+    if (this.ended) return;
+    this.ended = true;
+    this.cancelFinish();
+    const ws = this.ws;
+    this.ws = null;
+    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) ws.close(1e3);
+    this.release();
+    this.h.onEnd(reason, detail);
+  }
+};
+
+// src/voice/voiceprint.ts
+var GLYPHS = "\uFF71\uFF72\uFF73\uFF74\uFF75\uFF76\uFF77\uFF78\uFF79\uFF7A\uFF7B\uFF7C\uFF7D\uFF7E\uFF7F\uFF80\uFF81\uFF82\uFF83\uFF84\uFF85\uFF86\uFF87\uFF88\uFF89\uFF8A\uFF8B\uFF8C\uFF8D\uFF8E\uFF8F\uFF90\uFF91\uFF92\uFF93\uFF94\uFF95\uFF96\uFF97\uFF98\uFF99\uFF9A\uFF9B\uFF9C\uFF9D01".split("");
+var STEP_MS = 42;
+function loudness(rms2) {
+  const v = Math.max(0, rms2 - 4e-3);
+  return Math.min(1, Math.sqrt(v * 7));
+}
+function nextColumn(levels, phase, t, seed) {
+  const you = loudness(levels.input);
+  const javier = loudness(levels.output);
+  if (javier > 0.05 && javier >= you * 0.8) return { amp: javier, voice: 2 /* Javier */, seed };
+  if (you > 0.12) return { amp: you, voice: 1 /* You */, seed };
+  if (phase === "thinking" || phase === "connecting") {
+    const swell = 0.24 + 0.17 * Math.sin(t / 170) * Math.sin(t / 530);
+    return { amp: Math.max(0.06, swell), voice: 3 /* Working */, seed };
+  }
+  return { amp: 0.06 + 0.035 * Math.sin(t / 650), voice: 0 /* Quiet */, seed };
+}
+function cellIntensity(amp, rows, row) {
+  const half = rows / 2;
+  const d = Math.abs(row + 0.5 - half) / half;
+  const reach = Math.max(amp, 0);
+  if (reach <= 0 || d > reach) return 0;
+  return 0.5 + 0.5 * Math.pow(1 - d / reach, 0.8);
+}
+function hash(a, b) {
+  let h = Math.imul(a | 0, 374761393) + Math.imul(b | 0, 668265263) | 0;
+  h = Math.imul(h ^ h >>> 13, 1274126177);
+  return (h ^ h >>> 16) >>> 0;
+}
+function glyphFor(seed, row) {
+  return GLYPHS[hash(seed, row) % GLYPHS.length];
+}
+function ageFade(x, width) {
+  const span = width * 0.42;
+  if (span <= 0) return 1;
+  const k = Math.min(1, Math.max(0, x / span));
+  return k * k * (3 - 2 * k);
+}
+function clock(ms) {
+  const s = Math.max(0, Math.floor(ms / 1e3));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+function captionTail(text, max) {
+  const t = text.trim();
+  if (t.length <= max) return t;
+  const cut = t.slice(t.length - max);
+  const space = cut.indexOf(" ");
+  return `\u2026${space > 0 && space < 24 ? cut.slice(space + 1) : cut}`;
+}
+function parseCssColor(value, fallback) {
+  const v = value.trim();
+  const srgb = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/i.exec(v);
+  if (srgb) return [srgb[1], srgb[2], srgb[3]].map((n) => Math.round(Math.min(1, Math.max(0, Number(n))) * 255));
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(v);
+  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])].map((n) => Math.round(n));
+  return fallback;
+}
+
+// src/voice/useVoiceSession.ts
+function useVoiceSession(host, connection) {
+  const [available, setAvailable] = useState(false);
+  const [defaultName, setDefaultName] = useState(null);
+  const [maxSessionSecs, setMaxSessionSecs] = useState(0);
+  const [phase, setPhase] = useState("off");
+  const [heard, setHeard] = useState("");
+  const [saying, setSaying] = useState("");
+  const [ended, setEnded] = useState(null);
+  const [startedAt, setStartedAt] = useState(null);
+  const session = useRef(null);
+  const hostRef = useRef(host);
+  hostRef.current = host;
+  const connectionRef = useRef(connection);
+  connectionRef.current = connection;
+  const { baseUrl } = connection;
+  useEffect(() => {
+    const controller = new AbortController();
+    void getVoiceStatus(connectionRef.current, controller.signal).then((s) => {
+      if (controller.signal.aborted) return;
+      setAvailable(s.enabled);
+      setMaxSessionSecs(s.maxSessionSecs);
+      setDefaultName(s.persona?.name ?? null);
+    });
+    return () => controller.abort();
+  }, [baseUrl]);
+  const start = useCallback(() => {
+    if (session.current) return;
+    setEnded(null);
+    setHeard("");
+    setSaying("");
+    setStartedAt(null);
+    const s = new VoiceSession(
+      {
+        onPhase: (p) => {
+          setPhase(p);
+          if (p !== "connecting") setStartedAt((at) => at ?? Date.now());
+        },
+        onHeard: (text) => setHeard(text),
+        onSaying: (text) => setSaying(text),
+        onAsk: (question, h, utterance, progress, signal) => hostRef.current.onAsk(question, h, utterance, progress, signal),
+        onUtterance: (u) => hostRef.current.onUtterance?.(u),
+        onReply: (r) => hostRef.current.onReply?.(r),
+        onEnd: (reason, detail) => {
+          if (session.current === s) session.current = null;
+          setPhase("off");
+          setStartedAt(null);
+          setEnded(reason === "stopped" || reason === "finished" ? null : { reason, detail });
+        }
+      },
+      { ...connectionRef.current }
+    );
+    session.current = s;
+    void s.start();
+  }, []);
+  const stop = useCallback(() => session.current?.stop(), []);
+  const toggle = useCallback(() => session.current ? stop() : start(), [start, stop]);
+  const dismiss = useCallback(() => setEnded(null), []);
+  const levels = useCallback(() => session.current?.levels() ?? SILENT, []);
+  const level = useCallback(() => {
+    const l = levels();
+    return Math.max(loudness(l.input), loudness(l.output));
+  }, [levels]);
+  useEffect(() => () => session.current?.stop(), []);
+  return {
+    available,
+    defaultName,
+    phase,
+    heard,
+    saying,
+    ended,
+    startedAt,
+    maxSessionSecs,
+    levels,
+    level,
+    buttonState: phase === "off" ? "off" : phase === "connecting" ? "connecting" : "live",
+    start,
+    stop,
+    toggle,
+    dismiss
+  };
+}
+function voiceEndedMessage(ended, name = "the assistant") {
+  if (!ended) return null;
+  switch (ended.reason) {
+    case "time_limit":
+      return "Voice ends after a while to keep costs in check. Tap the microphone to keep talking.";
+    case "replaced":
+      return "Voice moved to your other window.";
+    case "blocked":
+      return ended.detail === "card_required" ? "Add a card to use voice." : ended.detail === "credit_exhausted" ? "You are out of credit. Top up to use voice." : "Voice needs an active billing plan.";
+    case "mic_denied":
+      return `Allow microphone access to talk to ${name}.`;
+    case "unavailable":
+      return ended.detail && !/^[a-z_]+$/.test(ended.detail) ? ended.detail : "Voice could not connect. Try again in a moment.";
+    case "lost":
+      return "Voice disconnected. Tap the microphone to reconnect.";
+    default:
+      return null;
+  }
+}
+
+// src/voice/styles.ts
+var VOICE_DECK_CSS = `
+@property --yf-voice-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
+@keyframes yf-voice-orbit { to { --yf-voice-angle: 360deg; } }
+@keyframes yf-voice-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes yf-voice-beacon {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yf-voice-live) 55%, transparent); }
+  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--yf-voice-live) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yf-voice-live) 0%, transparent); }
+}
+.yf-voice-deck {
+  --yf-voice-live: var(--yf-voice-accent);
+  position: relative;
+  border-radius: 16px;
+  padding: 1px;
+  background:
+    conic-gradient(
+      from var(--yf-voice-angle),
+      transparent 0deg,
+      color-mix(in srgb, var(--yf-voice-live) 95%, transparent) 50deg,
+      color-mix(in srgb, var(--yf-voice-live) 15%, transparent) 110deg,
+      transparent 180deg,
+      transparent 360deg
+    ),
+    linear-gradient(color-mix(in srgb, var(--yf-voice-live) 22%, transparent), color-mix(in srgb, var(--yf-voice-live) 22%, transparent));
+  box-shadow: 0 24px 60px -32px color-mix(in srgb, var(--yf-voice-live) 65%, transparent);
+  animation: yf-voice-orbit 5s linear infinite;
+  transition: box-shadow 0.5s ease;
+}
+.yf-voice-deck[data-phase='hearing'] { --yf-voice-live: var(--yf-voice-ink); animation-duration: 2.6s; }
+.yf-voice-deck[data-phase='thinking'] { animation-duration: 1.4s; }
+.yf-voice-deck[data-phase='speaking'] { animation-duration: 3.2s; }
+.yf-voice-deck[data-phase='listening'],
+.yf-voice-deck[data-phase='connecting'] { animation-duration: 9s; }
+.yf-voice-deck__panel {
+  position: relative;
+  overflow: hidden;
+  border-radius: 15px;
+  background:
+    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--yf-voice-live) 13%, transparent), transparent 58%),
+    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--yf-voice-live) 5%, transparent), transparent 60%),
+    color-mix(in srgb, var(--yf-voice-panel) 90%, transparent);
+  -webkit-backdrop-filter: blur(14px) saturate(1.2);
+  backdrop-filter: blur(14px) saturate(1.2);
+  animation: yf-voice-rise 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.yf-voice-beacon {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--yf-voice-live);
+  animation: yf-voice-beacon 1.8s ease-out infinite;
+  transition: background-color 0.3s ease;
+}
+.yf-voice-deck[data-phase='listening'] .yf-voice-beacon { animation-duration: 3.2s; }
+.yf-voice-phase {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--yf-voice-live);
+  transition: color 0.3s ease;
+}
+.yf-voice-clock { font-size: 11px; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--yf-voice-muted); }
+.yf-voice-clock[data-soon] { color: var(--yf-voice-accent); }
+.yf-voice-end {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 28px;
+  padding: 0 12px 0 10px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--yf-voice-ink) 16%, transparent);
+  background: color-mix(in srgb, var(--yf-voice-ink) 5%, transparent);
+  color: color-mix(in srgb, var(--yf-voice-ink) 85%, transparent);
+  font-size: 12px;
+  font-weight: 500;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.yf-voice-end:hover { background: color-mix(in srgb, var(--yf-voice-ink) 10%, transparent); border-color: color-mix(in srgb, var(--yf-voice-ink) 28%, transparent); color: var(--yf-voice-ink); }
+.yf-voice-end:active { transform: scale(0.97); }
+.yf-voice-end__mark { width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
+.yf-voice-print {
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 100%);
+  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 100%);
+}
+.yf-voice-caption { display: flex; min-width: 0; align-items: baseline; gap: 8px; color: color-mix(in srgb, var(--yf-voice-ink) 72%, transparent); }
+.yf-voice-caption--javier { display: block; color: var(--yf-voice-ink); font-weight: 450; text-wrap: pretty; }
+.yf-voice-hint { color: var(--yf-voice-muted); }
+.yf-voice-who {
+  flex-shrink: 0;
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--yf-voice-muted);
+}
+.yf-voice-deck[data-phone] { border-radius: 20px; }
+.yf-voice-deck[data-phone] .yf-voice-deck__panel { border-radius: 19px; }
+.yf-voice-deck[data-phone] .yf-voice-end { height: 40px; padding: 0 16px 0 14px; font-size: 14px; }
+.yf-voice-deck[data-phone] .yf-voice-phase { font-size: 11.5px; }
+@media (prefers-reduced-motion: reduce) {
+  .yf-voice-deck, .yf-voice-beacon, .yf-voice-deck__panel { animation: none; }
+}
+`;
+var STYLE_ID = "yf-voice-deck-styles";
+function ensureVoiceDeckStyles(doc = typeof document === "undefined" ? void 0 : document) {
+  if (!doc || doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = VOICE_DECK_CSS;
+  doc.head.appendChild(style);
+}
+function VoiceDeck({ voice, name, phone = false, hint }) {
+  const t = useTheme();
+  useEffect(() => ensureVoiceDeckStyles(), []);
+  const now = useClock(voice.startedAt !== null);
+  if (voice.phase === "off") return null;
+  const speaker = name ?? voice.defaultName ?? "Assistant";
+  const phaseWords = {
+    connecting: "Connecting",
+    listening: "Listening",
+    hearing: "Hearing you",
+    thinking: "Working on it",
+    speaking: speaker
+  };
+  const { startedAt, maxSessionSecs } = voice;
+  const elapsed = startedAt === null ? 0 : now - startedAt;
+  const remaining = maxSessionSecs > 0 && startedAt !== null ? maxSessionSecs * 1e3 - elapsed : Infinity;
+  const endingSoon = remaining < 6e4;
+  const said = captionTail(voice.saying, phone ? 170 : 240);
+  const words = captionTail(voice.heard, phone ? 90 : 140);
+  const vars = {
+    "--yf-voice-accent": t.primary,
+    "--yf-voice-ink": t.text,
+    "--yf-voice-muted": t.textMuted,
+    "--yf-voice-panel": t.bgRaised
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "yf-voice-deck", "data-phase": voice.phase, "data-phone": phone ? "" : void 0, style: vars, children: [
+    /* @__PURE__ */ jsxs("div", { className: "yf-voice-deck__panel", children: [
+      /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2.5 ${phone ? "px-4 pt-3.5" : "px-4 pt-3"}`, children: [
+        /* @__PURE__ */ jsx("span", { className: "yf-voice-beacon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "yf-voice-phase", children: phaseWords[voice.phase] }),
+        startedAt !== null ? /* @__PURE__ */ jsx("span", { className: "yf-voice-clock", "data-soon": endingSoon ? "" : void 0, title: endingSoon ? "Voice ends soon" : "Time in this voice session", children: endingSoon && Number.isFinite(remaining) ? `ends in ${clock(remaining)}` : clock(elapsed) }) : null,
+        /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: voice.stop, className: "yf-voice-end", "aria-label": "End voice", children: [
+          /* @__PURE__ */ jsx("span", { className: "yf-voice-end__mark", "aria-hidden": "true" }),
+          "End"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Voiceprint, { phase: voice.phase, levels: voice.levels, height: phone ? 104 : 76, cell: phone ? 13 : 11 }),
+      /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-1.5 ${phone ? "px-4 pb-4" : "px-4 pb-3.5"}`, style: { minHeight: "1.25rem" }, "aria-live": "off", children: [
+        words ? /* @__PURE__ */ jsxs("p", { className: "yf-voice-caption", style: { fontSize: phone ? 13.5 : 12.5 }, children: [
+          /* @__PURE__ */ jsx("span", { className: "yf-voice-who", children: "You" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: words })
+        ] }) : null,
+        said ? /* @__PURE__ */ jsx("p", { className: "yf-voice-caption yf-voice-caption--javier", style: { fontSize: phone ? 16 : 14, lineHeight: phone ? 1.45 : 1.5 }, children: said }) : !words ? /* @__PURE__ */ jsx("p", { className: "yf-voice-hint", style: { fontSize: phone ? 14 : 12.5 }, children: voice.phase === "connecting" ? "Opening the line\u2026" : hint ?? "Ask anything. Talk over me to interrupt." }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { "data-voice-probe": "ink", hidden: true, style: { color: "var(--yf-voice-ink)" } }),
+    /* @__PURE__ */ jsx("span", { "data-voice-probe": "accent", hidden: true, style: { color: "var(--yf-voice-accent)" } }),
+    /* @__PURE__ */ jsx("span", { "data-voice-probe": "muted", hidden: true, style: { color: "var(--yf-voice-muted)" } })
+  ] });
+}
+function useClock(running) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!running) return void 0;
+    setNow(Date.now());
+    const id = window.setInterval(() => setNow(Date.now()), 1e3);
+    return () => window.clearInterval(id);
+  }, [running]);
+  return now;
+}
+function Voiceprint({ phase, levels, height, cell }) {
+  const canvasRef = useRef(null);
+  const phaseRef = useRef(phase);
+  phaseRef.current = phase;
+  const levelsRef = useRef(levels);
+  levelsRef.current = levels;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return void 0;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    const cellW = Math.round(cell * 0.8);
+    const cellH = Math.round(cell * 0.95);
+    let width = 0;
+    let dpr = 1;
+    let rows = 1;
+    let columns = [];
+    let colors = { ink: [236, 232, 225], accent: [255, 140, 66], muted: [140, 140, 140] };
+    let seed = 1;
+    let last = performance.now();
+    let colorsAt = 0;
+    let raf = 0;
+    const readColors = () => {
+      const deck = canvas.closest(".yf-voice-deck");
+      const probe = (which, fallback) => {
+        const el = deck?.querySelector(`[data-voice-probe="${which}"]`);
+        return el ? parseCssColor(getComputedStyle(el).color, fallback) : fallback;
+      };
+      colors = { ink: probe("ink", colors.ink), accent: probe("accent", colors.accent), muted: probe("muted", colors.muted) };
+    };
+    const resize = () => {
+      dpr = Math.min(window.devicePixelRatio || 1, 3);
+      width = canvas.clientWidth;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      rows = Math.max(3, Math.floor(height / cellH));
+      const need = Math.ceil(width / cellW) + 3;
+      columns = columns.slice(-need);
+      while (columns.length < need) columns.unshift({ amp: 0.05, voice: 0 /* Quiet */, seed: seed++ });
+    };
+    const rgba = (c, a) => `rgba(${c[0]},${c[1]},${c[2]},${a.toFixed(3)})`;
+    const colorOf = (v) => v === 1 /* You */ ? colors.ink : v === 0 /* Quiet */ ? colors.muted : colors.accent;
+    const draw = (time) => {
+      if (time - colorsAt > 1e3) {
+        readColors();
+        colorsAt = time;
+      }
+      const step = reduced ? STEP_MS * 2.5 : STEP_MS;
+      while (time - last >= step) {
+        columns.shift();
+        columns.push(nextColumn(levelsRef.current(), phaseRef.current, time, seed++));
+        last += step;
+      }
+      if (time - last > step * 4) last = time;
+      const frac = reduced ? 0 : (time - last) / step;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      ctx.font = `500 ${cell}px "Hiragino Kaku Gothic ProN", "Noto Sans JP", ui-monospace, monospace`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const n = columns.length;
+      const top = (height - rows * cellH) / 2 + cellH / 2;
+      for (let i = 0; i < n; i += 1) {
+        const col = columns[i];
+        const x = width - (n - 1 - i + frac) * cellW + cellW / 2 - cellW;
+        if (x < -cellW || x > width + cellW) continue;
+        const fade = ageFade(x, width);
+        const fresh = n - 1 - i < 3;
+        const color = colorOf(col.voice);
+        const reach = Math.min(1, col.amp * 1.15);
+        for (let r = 0; r < rows; r += 1) {
+          const k = cellIntensity(reach, rows, r);
+          const s = fresh && !reduced ? col.seed + Math.floor(time / 90) : col.seed;
+          const y = top + r * cellH;
+          if (k <= 0.02) {
+            ctx.fillStyle = rgba(colors.muted, 0.07 * (0.25 + 0.75 * fade));
+            ctx.fillText(glyphFor(s + 7, r), x, y);
+            continue;
+          }
+          const alpha = Math.min(1, k * (col.voice === 0 /* Quiet */ ? 0.45 : 0.95) * (0.12 + 0.88 * fade) * (fresh ? 1.3 : 1));
+          const bright = k > 0.8 && col.voice !== 0 /* Quiet */ && !reduced;
+          if (bright) {
+            ctx.shadowColor = rgba(color, 0.9);
+            ctx.shadowBlur = 7;
+          }
+          ctx.fillStyle = rgba(color, alpha);
+          ctx.fillText(glyphFor(s, r), x, y);
+          if (bright) ctx.shadowBlur = 0;
+        }
+      }
+      const head = columns[n - 1];
+      if (head) {
+        const c = colorOf(head.voice);
+        const radius = height * 0.48;
+        ctx.save();
+        ctx.translate(width, height / 2);
+        ctx.scale(1.9, 1);
+        const glow = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
+        glow.addColorStop(0, rgba(c, 0.1 + 0.3 * head.amp));
+        glow.addColorStop(1, rgba(c, 0));
+        ctx.fillStyle = glow;
+        ctx.beginPath();
+        ctx.arc(0, 0, radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+        const reach = Math.max(6, Math.min(1, head.amp * 1.15) * height * 0.9);
+        const line = ctx.createLinearGradient(0, (height - reach) / 2, 0, (height + reach) / 2);
+        line.addColorStop(0, rgba(c, 0));
+        line.addColorStop(0.5, rgba(c, 0.5 + 0.5 * head.amp));
+        line.addColorStop(1, rgba(c, 0));
+        ctx.fillStyle = line;
+        ctx.fillRect(width - 1.5, (height - reach) / 2, 1.5, reach);
+      }
+      raf = window.requestAnimationFrame(draw);
+    };
+    readColors();
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(canvas);
+    raf = window.requestAnimationFrame(draw);
+    return () => {
+      window.cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, [height, cell]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "yf-voice-print block w-full", style: { height }, "aria-hidden": "true" });
+}
 
 // src/knowledge/graphTheme.ts
 var NODE_TYPE_COLORS = {
@@ -14646,4 +15748,4 @@ var terminalClassNames = {
   promptSymbol: "terminal-prompt-symbol"
 };
 
-export { ADVANCE_PHASE_SIGNAL, AGENT_PALETTE, AgentAvatar, AgentPresenceBar, AgentStepTrace, AnnotationThread, CLAIM_STATUS_COLORS, ChatTerminal, CheckpointCard, ClaimNode, ConstructionProgress, CoreTerminal, DEFAULT_AGENT_LABEL, DOCUMENT_PIPELINE_STEPS, DocumentProcessingProgress, EDGE_TYPE_COLORS, EdgeDetailDrawer, EdgeMarkerDefs, CoreTerminal as EmbeddedTerminal, ExpandableTerminal, GraphChatPanel, GraphEdge, GraphNode, InlineTerminal, KnowledgeGraphView, LIVE_KG_ID, LiveActivityTicker, MarkdownContent, MarkdownEditor, NODE_TYPE_COLORS, NODE_TYPE_LABELS, NodeDetailDrawer, PROGRESS_EVENT_NAME, PipelineProgressBar, ReasoningHistoryCard, ReasoningOverlay, ReasoningView, SSE_KEEPALIVE_MS, SSE_STALL_MS, SYNTHESIS_DONE_SIGNAL, ScopedReasoningProvider, SettlementBar, SlashMentionPicker, StageCanvas, StandardTerminal, TerminalInputBar, TerminalThemeProvider, agentSeed, agentStepTraceExtra, avatarColor, blueScope, buildClaimsGraph, buildTerminalCommand, buttonShadow, captureReasoningSnapshot, defaultTheme, dispatchProgressEvent, documentEventToActivity, emeraldCollab, emeraldRevised, eventToActivity, extractKGSources, extractKgId, filterCommands, formatAssetDisplay, formatPaymentAmount, formatTokenAssetId, getAgentColor, getBuiltInCommands, getClaimStatusColors, getEdgeColor, getEdgeTypeLabel, getNodeColors, getNodeTypeLabel, getVocabTypeColors, getVocabTypeLabel, greenAction, handleSSEStream, handleStreamingResponse, hostApp, initials, isFixedKgId, isNaturalLanguage, layoutGraph, mergeTheme, openPipelineEventStream, orangeRebuttal, parseTerminalCommand, pipelineBg, processStreamLines, purple, reduceProgress, renderMarkdownBlock, resolvePaymentAssetDisplay, snapshotToSubgraph, terminalClassNames, terminalColors, useScopedProgressEvent, useSlashMentionPicker, useTheme, warmBg, withStallTimeout };
+export { ADVANCE_PHASE_SIGNAL, AGENT_PALETTE, AgentAvatar, AgentPresenceBar, AgentStepTrace, AnnotationThread, AskQueue, CLAIM_STATUS_COLORS, ChatTerminal, CheckpointCard, ClaimNode, ConstructionProgress, CoreTerminal, DEFAULT_AGENT_LABEL, DOCUMENT_PIPELINE_STEPS, DocumentProcessingProgress, EDGE_TYPE_COLORS, EdgeDetailDrawer, EdgeMarkerDefs, CoreTerminal as EmbeddedTerminal, ExpandableTerminal, GraphChatPanel, GraphEdge, GraphNode, InlineTerminal, KnowledgeGraphView, LIVE_KG_ID, LiveActivityTicker, MarkdownContent, MarkdownEditor, NODE_TYPE_COLORS, NODE_TYPE_LABELS, NodeDetailDrawer, PROGRESS_EVENT_NAME, PipelineProgressBar, REPLACED_OUTPUT, ReasoningHistoryCard, ReasoningOverlay, ReasoningView, SILENT, SSE_KEEPALIVE_MS, SSE_STALL_MS, SYNTHESIS_DONE_SIGNAL, ScopedReasoningProvider, SettlementBar, SlashMentionPicker, StageCanvas, StandardTerminal, TerminalInputBar, TerminalThemeProvider, VOICE_CAPTURE_WORKLET_SOURCE, VOICE_LANGUAGES, VOICE_NAMES, VoiceDeck, VoiceInputButton, VoiceSession, agentSeed, agentStepTraceExtra, avatarColor, blueScope, buildClaimsGraph, buildTerminalCommand, buttonShadow, captureReasoningSnapshot, defaultTheme, dispatchProgressEvent, documentEventToActivity, emeraldCollab, emeraldRevised, encodePersona, eventToActivity, extractKGSources, extractKgId, filterCommands, formatAssetDisplay, formatPaymentAmount, formatTokenAssetId, getAgentColor, getBuiltInCommands, getClaimStatusColors, getEdgeColor, getEdgeTypeLabel, getNodeColors, getNodeTypeLabel, getVocabTypeColors, getVocabTypeLabel, getVoiceStatus, greenAction, handleSSEStream, handleStreamingResponse, hostApp, initials, isFixedKgId, isNaturalLanguage, layoutGraph, mergeTheme, openPipelineEventStream, orangeRebuttal, parseTerminalCommand, pipelineBg, processStreamLines, purple, reduceProgress, renderMarkdownBlock, resolvePaymentAssetDisplay, snapshotToSubgraph, socketBase, terminalClassNames, terminalColors, useScopedProgressEvent, useSlashMentionPicker, useTheme, useVoiceSession, voiceEndedMessage, voiceSocketUrl, warmBg, withStallTimeout };