feat(showcase/voice): D5 mapping + sample-button bypasses /transcribe

The langgraph-python voice cell sat at D4 even when its d5-voice probe
row was green. Root cause: the dashboard's CATALOG_TO_D5_KEY mirror in
showcase/shell-dashboard/src/lib/live-status.ts was missing voice ->
["voice"], so computeMaxPossible capped voice at D4 regardless of probe
state. The harness REGISTRY_TO_D5 already had the entry; only the
dashboard mirror was out of sync.

Separately, the "Play sample" button used to fetch sample.wav and POST
it to /transcribe. With aimock that meant both the sample button AND
the mic returned the same canned response, which made it impossible to
demo the mic path locally without conflating the two affordances.
Reworked the button into a synchronous static-text injector
(onTranscribed(sampleText)) so:

- Sample button = deterministic test/demo affordance, no runtime calls.
- Mic = real Whisper transcription via /transcribe.

Synced across all 18 voice-enabled integrations. Phrase stays "What is
the weather in Tokyo?" so aimock's "weather in Tokyo" substring fixture
still matches.

Also adds the missing d5-voice.test.ts companion (every other d5-* probe
script has one) and trims the langgraph-python qa/voice.md + e2e steps
that depended on the now-removed async behavior.

Author: AlemTuzlak

showcase/harness/src/probes/scripts/d5-voice.test.ts

@@ -0,0 +1,226 @@
+import { describe, it, expect } from "vitest";
+import { getD5Script, type D5BuildContext } from "../helpers/d5-registry.js";
+import type { Page } from "../helpers/conversation-runner.js";
+// Top-level import triggers the script's `registerD5Script` side effect
+// against the singleton registry. Mirrors the pattern in
+// `d5-tool-rendering.test.ts` — the registry is process-wide, modules
+// are cached, so we register once at import time and read it back via
+// `getD5Script` per assertion.
+import {
+  buildTurns,
+  SAMPLE_AUDIO_BUTTON_SELECTOR,
+} from "./d5-voice.js";
+
+/**
+ * Tests for the D5 voice script. Three concerns:
+ *
+ *   1. Side-effect registration — the import wires up `voice` in the
+ *      registry pointing at the bundled `d5-all.json` fixture (the
+ *      script reuses the canned transcription + weather fixtures that
+ *      already live there).
+ *   2. `buildTurns` produces a single `skipFill` turn whose `preFill`
+ *      drives the sample-audio button click + textarea-poll path.
+ *   3. The `assertions` callback fires (throws) when the assistant
+ *      transcript is empty/missing the weather/Tokyo content, and
+ *      passes through when the transcript contains the expected
+ *      keywords.
+ */
+
+interface FakePageScript {
+  /** Sequence of textContent values returned by readAssistantTranscript. */
+  evaluateValues?: unknown[];
+  /** Whether `waitForSelector` should throw (button not visible). */
+  throwOnWaitForSelector?: boolean;
+  /** Whether the click should throw. */
+  throwOnClick?: boolean;
+  /** Sequence of textarea values returned to the textarea poll. */
+  textareaValues?: string[];
+  /** Tracks how many times the click was invoked. */
+  clickCalls?: { count: number };
+}
+
+/**
+ * Build a fake Page that satisfies the runner's `Page` interface plus the
+ * additional `click` method d5-voice's preFill uses. The fake interleaves
+ * two `evaluate` consumers: the textarea-value poll inside preFill, and
+ * the assistant-transcript read inside the assertion. We split them by
+ * tagging `evaluateValues` (used after preFill returns) and
+ * `textareaValues` (consumed by the textarea poll). The fake hands out
+ * textareaValues first, then falls through to evaluateValues.
+ */
+function makePage(script: FakePageScript = {}): Page & {
+  click: (sel: string, opts?: { timeout?: number }) => Promise<void>;
+} {
+  const transcripts = [...(script.evaluateValues ?? [])];
+  const textareaQueue = [...(script.textareaValues ?? [])];
+  return {
+    async waitForSelector() {
+      if (script.throwOnWaitForSelector) {
+        throw new Error("waitForSelector timeout (test fake)");
+      }
+    },
+    async fill() {
+      // Unused — voice script uses skipFill: true.
+    },
+    async press() {
+      // Unused — these tests assert on preFill + assertion, not the
+      // runner's press step.
+    },
+    async click() {
+      if (script.clickCalls) script.clickCalls.count += 1;
+      if (script.throwOnClick) {
+        throw new Error("click failed (test fake)");
+      }
+    },
+    async evaluate<R>(): Promise<R> {
+      // The textarea-value poll runs first (during preFill); after it
+      // resolves, evaluateValues feeds the assistant-transcript reader.
+      if (textareaQueue.length > 0) {
+        const next = textareaQueue.shift();
+        // The textarea poll evaluator returns a string. Wrap as the
+        // generic R the caller asked for — the runner doesn't introspect.
+        return next as unknown as R;
+      }
+      if (transcripts.length === 0) return undefined as R;
+      if (transcripts.length === 1) return transcripts[0] as R;
+      return transcripts.shift() as R;
+    },
+  };
+}
+
+describe("d5-voice script", () => {
+  describe("registration", () => {
+    it("registers under featureType 'voice' with the bundled d5-all.json fixture", () => {
+      const script = getD5Script("voice");
+      expect(script).toBeDefined();
+      expect(script?.featureTypes).toEqual(["voice"]);
+      // Voice piggybacks on the bundled d5-all.json fixture because the
+      // canned transcription + weather get_weather entries already live
+      // there. No per-feature fixture file is needed.
+      expect(script?.fixtureFile).toBe("d5-all.json");
+    });
+
+    it("registers a buildTurns function that round-trips through the registry", () => {
+      const script = getD5Script("voice");
+      expect(script?.buildTurns).toBe(buildTurns);
+    });
+  });
+
+  describe("buildTurns", () => {
+    const ctx: D5BuildContext = {
+      integrationSlug: "langgraph-python",
+      featureType: "voice",
+      baseUrl: "https://example.test",
+    };
+
+    it("produces a single turn with skipFill=true and an empty input", () => {
+      const turns = buildTurns(ctx);
+      expect(turns).toHaveLength(1);
+      const turn = turns[0]!;
+      expect(turn.skipFill).toBe(true);
+      // input is empty because preFill + the synchronous text injection
+      // populate the textarea — `page.fill()` would overwrite it.
+      expect(turn.input).toBe("");
+      expect(typeof turn.preFill).toBe("function");
+      expect(typeof turn.assertions).toBe("function");
+    });
+
+    it("uses the canonical sample-audio-button testid", () => {
+      // Pinning the selector here so a refactor that breaks the testid
+      // surfaces as a test failure rather than a silent probe miss.
+      expect(SAMPLE_AUDIO_BUTTON_SELECTOR).toBe(
+        '[data-testid="voice-sample-audio-button"]',
+      );
+    });
+  });
+
+  describe("preFill", () => {
+    it("clicks the sample audio button and resolves once the textarea is populated", async () => {
+      const turns = buildTurns({
+        integrationSlug: "langgraph-python",
+        featureType: "voice",
+        baseUrl: "https://example.test",
+      });
+      const turn = turns[0]!;
+      const clickCalls = { count: 0 };
+      const page = makePage({
+        clickCalls,
+        // First poll returns "" (still empty), second returns the canned
+        // phrase — the script must keep polling until non-empty rather
+        // than returning on first read.
+        textareaValues: ["", "What is the weather in Tokyo?"],
+      });
+
+      await turn.preFill!(page);
+
+      expect(clickCalls.count).toBe(1);
+    });
+
+    it("throws when the sample-audio button never becomes visible", async () => {
+      const turns = buildTurns({
+        integrationSlug: "langgraph-python",
+        featureType: "voice",
+        baseUrl: "https://example.test",
+      });
+      const turn = turns[0]!;
+      const page = makePage({ throwOnWaitForSelector: true });
+
+      await expect(turn.preFill!(page)).rejects.toThrow(
+        /sample audio button.*not visible/,
+      );
+    });
+  });
+
+  describe("assertion", () => {
+    it("passes when the assistant transcript mentions weather", async () => {
+      const turns = buildTurns({
+        integrationSlug: "langgraph-python",
+        featureType: "voice",
+        baseUrl: "https://example.test",
+      });
+      const turn = turns[0]!;
+      const page = makePage({
+        evaluateValues: ["the weather in tokyo is 22°c and partly cloudy"],
+      });
+
+      await expect(turn.assertions!(page)).resolves.toBeUndefined();
+    });
+
+    it("passes on temperature-only mention (matches the weather/tokyo/temperature OR cascade)", async () => {
+      const turns = buildTurns({
+        integrationSlug: "langgraph-python",
+        featureType: "voice",
+        baseUrl: "https://example.test",
+      });
+      const turn = turns[0]!;
+      const page = makePage({
+        evaluateValues: ["current temperature: 22 degrees"],
+      });
+
+      await expect(turn.assertions!(page)).resolves.toBeUndefined();
+    });
+
+    it(
+      "throws when the assistant transcript is unrelated to weather",
+      async () => {
+        const turns = buildTurns({
+          integrationSlug: "langgraph-python",
+          featureType: "voice",
+          baseUrl: "https://example.test",
+        });
+        const turn = turns[0]!;
+        const page = makePage({
+          evaluateValues: ["i don't know how to answer that question"],
+        });
+
+        // The assertion polls for up to 5s before giving up — give the
+        // test enough headroom to observe the rejection rather than
+        // racing it against vitest's default 5000ms timeout.
+        await expect(turn.assertions!(page)).rejects.toThrow(
+          /assistant transcript missing weather\/Tokyo content/,
+        );
+      },
+      10_000,
+    );
+  });
+});

showcase/integrations/ag2/src/app/demos/voice/page.tsx

@@ -7,16 +7,16 @@ import { SampleAudioButton } from "./sample-audio-button";
 
 const RUNTIME_URL = "/api/copilotkit-voice";
 const AGENT_ID = "voice-demo";
-const SAMPLE_AUDIO_PATH = "/demo-audio/sample.wav";
-const SAMPLE_LABEL = "What is the weather in Tokyo?";
+const SAMPLE_TEXT = "What is the weather in Tokyo?";
 
 // Voice demo (AG2). Two affordances on this page:
 //
 // 1. The default mic button rendered by <CopilotChat /> when the runtime at
 //    RUNTIME_URL advertises `audioFileTranscriptionEnabled: true`.
-// 2. A "Play sample" button that POSTs a bundled clip to /transcribe and
-//    injects the transcript into the chat composer (bypasses mic perms so
-//    Playwright + screenshot flows work too).
+// 2. A "Play sample" button that synchronously injects a canned phrase into
+//    the composer (bypasses mic perms and the runtime entirely so Playwright
+//    + screenshot flows work too). Real transcription only happens through
+//    the mic path.
 // @region[voice-page]
 export default function VoiceDemoPage() {
   const handleTranscribed = useCallback((text: string) => {
@@ -59,9 +59,7 @@ export default function VoiceDemoPage() {
         </header>
         <SampleAudioButton
           onTranscribed={handleTranscribed}
-          runtimeUrl={RUNTIME_URL}
-          audioSrc={SAMPLE_AUDIO_PATH}
-          sampleLabel={SAMPLE_LABEL}
+          sampleText={SAMPLE_TEXT}
         />
         <div className="min-h-0 flex-1 overflow-hidden rounded-md border border-black/10 dark:border-white/10">
           <CopilotChat agentId={AGENT_ID} className="h-full" />

showcase/integrations/ag2/src/app/demos/voice/sample-audio-button.tsx

@@ -1,61 +1,32 @@
 "use client";
 
-import { useState } from "react";
-
 /**
- * Sample-audio button for the voice demo (AG2).
+ * Sample-audio button for the voice demo.
  *
- * Bypasses the microphone entirely: fetches a bundled audio clip from
- * /public and POSTs it as multipart/form-data to the runtime's
- * `/transcribe` endpoint. On success, invokes `onTranscribed(text)` so the
- * caller can populate the chat composer.
+ * Pure test/demo affordance: clicking the button synchronously injects a
+ * canned phrase into the chat composer via `onTranscribed(sampleText)`.
+ * No microphone permission, no audio fetch, no `/transcribe` round trip
+ * — those concerns belong to the mic button rendered by `<CopilotChat />`.
+ * Keeping this affordance deterministic means the d5-voice probe and the
+ * Playwright e2e never depend on the runtime's transcription endpoint
+ * being healthy or on any specific aimock fixture surviving across
+ * environments.
  */
 export interface SampleAudioButtonProps {
+  /** Called with the canned sample text when the button is clicked. */
   onTranscribed: (text: string) => void;
-  runtimeUrl: string;
-  audioSrc: string;
-  sampleLabel: string;
+  /**
+   * Phrase that doubles as the visible caption AND the text injected
+   * into the composer when the button is clicked.
+   */
+  sampleText: string;
 }
 
 // @region[sample-audio-button]
 export function SampleAudioButton({
   onTranscribed,
-  runtimeUrl,
-  audioSrc,
-  sampleLabel,
+  sampleText,
 }: SampleAudioButtonProps) {
-  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
-
-  async function handleClick() {
-    setStatus("loading");
-    try {
-      const audioRes = await fetch(audioSrc);
-      if (!audioRes.ok) {
-        throw new Error(`Failed to fetch sample audio: ${audioRes.status}`);
-      }
-      const blob = await audioRes.blob();
-      const formData = new FormData();
-      formData.append("audio", blob, "sample.wav");
-      const base = runtimeUrl.replace(/\/$/, "");
-      const transcribeRes = await fetch(`${base}/transcribe`, {
-        method: "POST",
-        body: formData,
-      });
-      if (!transcribeRes.ok) {
-        throw new Error(`Transcribe failed: ${transcribeRes.status}`);
-      }
-      const json = (await transcribeRes.json()) as { text?: string };
-      if (!json.text) {
-        throw new Error("Transcribe returned no text");
-      }
-      onTranscribed(json.text);
-      setStatus("idle");
-    } catch (err) {
-      console.error("[voice-demo] sample transcription failed", err);
-      setStatus("error");
-    }
-  }
-
   return (
     <div
       data-testid="voice-sample-audio"
@@ -64,23 +35,14 @@ export function SampleAudioButton({
       <button
         type="button"
         data-testid="voice-sample-audio-button"
-        onClick={handleClick}
-        disabled={status === "loading"}
-        className="rounded border border-black/10 bg-white px-3 py-1 text-xs font-medium hover:bg-black/5 disabled:opacity-50 dark:border-white/10 dark:bg-black/30 dark:hover:bg-white/10"
+        onClick={() => onTranscribed(sampleText)}
+        className="rounded border border-black/10 bg-white px-3 py-1 text-xs font-medium hover:bg-black/5 dark:border-white/10 dark:bg-black/30 dark:hover:bg-white/10"
       >
-        {status === "loading" ? "Transcribing..." : "Play sample"}
+        Play sample
       </button>
       <span className="text-black/60 dark:text-white/60">
-        Sample: &ldquo;{sampleLabel}&rdquo;
+        Sample: &ldquo;{sampleText}&rdquo;
       </span>
-      {status === "error" && (
-        <span
-          data-testid="voice-sample-audio-error"
-          className="ml-auto text-red-600 dark:text-red-400"
-        >
-          Error — see console
-        </span>
-      )}
     </div>
   );
 }

showcase/integrations/agno/src/app/demos/voice/page.tsx

@@ -6,16 +6,15 @@ import { SampleAudioButton } from "./sample-audio-button";
 
 const RUNTIME_URL = "/api/copilotkit-voice";
 const AGENT_ID = "voice-demo";
-const SAMPLE_AUDIO_PATH = "/demo-audio/sample.wav";
-const SAMPLE_LABEL = "What is the weather in Tokyo?";
+const SAMPLE_TEXT = "What is the weather in Tokyo?";
 
 // Voice demo (Agno).
 //
 // The mic button on <CopilotChat /> appears when the runtime advertises
 // `audioFileTranscriptionEnabled: true`. Click it, speak, click again — text
 // is transcribed into the composer. The <SampleAudioButton /> below the
-// chat fetches a bundled wav and POSTs it to /transcribe so screenshot &
-// playwright runs work without mic permissions.
+// chat synchronously injects a canned phrase so screenshot & playwright runs
+// work without mic permissions; the runtime is not involved on that path.
 // @region[voice-page]
 export default function VoiceDemoPage() {
   const handleTranscribed = useCallback((text: string) => {
@@ -58,9 +57,7 @@ export default function VoiceDemoPage() {
         </header>
         <SampleAudioButton
           onTranscribed={handleTranscribed}
-          runtimeUrl={RUNTIME_URL}
-          audioSrc={SAMPLE_AUDIO_PATH}
-          sampleLabel={SAMPLE_LABEL}
+          sampleText={SAMPLE_TEXT}
         />
         <div className="min-h-0 flex-1 overflow-hidden rounded-md border border-black/10 dark:border-white/10">
           <CopilotChat agentId={AGENT_ID} className="h-full" />