From ac5cdc642b32803047aae2827ef3295263854976 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:13:33 +0000
Subject: [PATCH 01/27] Voice widget: disable search by default, add
 requireProvider, tighter badge, hide group tabs

- Search bar now defaults to hidden (opt-in via filters={{ search: true }})
- New requireProvider prop: shows placeholder until a provider is selected
- Reduced badge-to-title vertical gap (margin: -0.25rem -0.15rem -0.45rem 0)
- Group-by toggle hidden when provider is locked or requireProvider is set
- Other filters (language, gender, pageSize) hidden while awaiting provider
- TTS overview page updated with requireProvider full-catalog widget

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx        | 42 +++++++++++++------
 fern/components/voice-widget/styles.css       |  6 ++-
 .../pages/calling/voice/TTS/index.mdx         |  6 +++
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index fef88d3c57..e49757514c 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -129,10 +129,17 @@ export interface VoiceWidgetProps {
   /**
    * Toggle the filter/search controls. `true` or unset shows all; `false` hides all (just the
    * title + grid). An object toggles individual controls — `search`, `provider`, `language`,
-   * `gender`, `group`, `pageSize` — each defaulting on unless set `false`. The provider control is
+   * `gender`, `group`, `pageSize` — each defaulting on unless set `false`. The search control
+   * defaults to `false` (hidden) unless explicitly set to `true`. The provider control is
    * always hidden when the `provider` lock prop is set.
    */
   filters?: boolean | Partial<Record<FilterKey, boolean>>;
+  /**
+   * When `true`, the widget shows a placeholder prompting the user to select a provider before
+   * rendering any voice cards. The provider dropdown is always shown when this is set. Once the
+   * user selects a provider, cards appear. Default: `false`.
+   */
+  requireProvider?: boolean;
 }
 
 export function VoiceWidget({
@@ -146,6 +153,7 @@ export function VoiceWidget({
   provider: lockedProvider,
   voiceIds,
   filters,
+  requireProvider = false,
 }: VoiceWidgetProps) {
   // Normalized single-provider lock (null when the widget shows all providers).
   const lock = lockedProvider?.trim().toLowerCase() || null;
@@ -186,13 +194,16 @@ export function VoiceWidget({
   const pageSizeOpts = [...new Set([...PAGE_SIZE_OPTIONS, pageSize])].sort((a, b) => a - b);
 
   // Resolve which filter/search controls are visible. `filters` is a boolean (all on/off) or a
-  // per-control object; each control defaults on unless explicitly false.
+  // per-control object; each control defaults on unless explicitly false. The `search` control
+  // defaults to off (must be opted in) — all others default on.
   const showFilter = (key: FilterKey) =>
     filters === false ? false
-    : filters && typeof filters === "object" ? filters[key] !== false
-    : true;
-  const showProvider = !lock && showFilter("provider");
-  const showGroup = group !== "none" && showFilter("group");
+    : filters && typeof filters === "object"
+      ? key === "search" ? filters[key] === true : filters[key] !== false
+    : key === "search" ? false : true;
+  const showProvider = (!lock || requireProvider) && showFilter("provider");
+  // Hide group-by toggle when a provider is locked or requireProvider is active.
+  const showGroup = group !== "none" && showFilter("group") && !lock && !requireProvider;
 
   useEffect(() => {
     let alive = true;
@@ -329,7 +340,8 @@ export function VoiceWidget({
   // Step from safePage, not the raw page state: `page` can be stale-high after effectivePageSize
   // grows (a mobile→desktop resize isn't in filterSig), and stepping from it makes Prev appear
   // dead until the raw value catches back up with the clamped one.
-  const pager = pageCount > 1 ? (
+  const awaitingProvider = requireProvider && provider === ALL;
+  const pager = pageCount > 1 && !awaitingProvider ? (
     <nav className="vw-pager" aria-label="Voice pages">
       <button className="vw-pager-btn" onClick={() => setPage(Math.max(0, safePage - 1))} disabled={safePage <= 0}>
         ‹ Prev
@@ -348,22 +360,22 @@ export function VoiceWidget({
     <div className="vw">
       <audio ref={audioRef} onEnded={() => setPlayingKey(null)} preload="none" />
       <header className="vw-head">
-        <div className="vw-title">TTS Voices <span className="vw-count">{filtered.length}</span></div>
+        <div className="vw-title">TTS Voices {!awaitingProvider && <span className="vw-count">{filtered.length}</span>}</div>
         {showFilter("search") && (
           <input className="vw-search" placeholder="Search voices…" value={q}
                  onChange={(e) => setQ(e.target.value)} />
         )}
       </header>
 
-      {(showProvider || showFilter("language") || showFilter("gender") || showFilter("pageSize") || showGroup) && (
+      {(showProvider || (!awaitingProvider && (showFilter("language") || showFilter("gender") || showFilter("pageSize"))) || showGroup) && (
         <div className="vw-filters">
           {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} />}
-          {showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
-          {showFilter("gender") && (
+          {!awaitingProvider && showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
+          {!awaitingProvider && showFilter("gender") && (
             <Select label="Gender" value={gender} onChange={setGender}
                     opts={["male", "female", "neutral", "unknown"]} />
           )}
-          {showFilter("pageSize") && (
+          {!awaitingProvider && showFilter("pageSize") && (
             <label className="vw-select">
               <span>Per page</span>
               <select value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
@@ -382,7 +394,11 @@ export function VoiceWidget({
 
       {pager}
 
-      {pageSections.length === 0 ? (
+      {awaitingProvider ? (
+        <div className="vw-require-provider">
+          <p>Select a provider above to browse available voices.</p>
+        </div>
+      ) : pageSections.length === 0 ? (
         <p className="vw-empty">No voices match your filters.</p>
       ) : (
         pageSections.map((sec, i) => (
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 0e811f975e..b2ec518d77 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -48,11 +48,11 @@
 .vw-name { font-weight: 600; flex: 1 1 auto;
   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* Provider badge sits in the card's top-right corner, on its own line above the title, tucked into
-   the corner so it can't overlap the title or meta chips and adds no tall empty strip. */
+   the corner so it can't overlap the title or meta chips and adds minimal vertical space. */
 .vw-badge { font-size: .68rem; padding: .15rem .4rem; border: 1px solid var(--vw-line);
   border-radius: 999px; color: var(--vw-muted); white-space: nowrap;
   align-self: flex-end; width: fit-content; max-width: 100%;
-  overflow: hidden; text-overflow: ellipsis; margin: -0.15rem -0.15rem -0.7rem 0; }
+  overflow: hidden; text-overflow: ellipsis; margin: -0.25rem -0.15rem -0.45rem 0; }
 .vw-meta { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .7rem; color: var(--vw-muted); }
 .vw-meta span { padding: .12rem .4rem; background: var(--grayscale-a3); border-radius: 6px; }
 .vw-gender.vw-male { color: #3b82f6; } .vw-gender.vw-female { color: #d6409f; }
@@ -81,6 +81,8 @@
 .vw-pager-info { font-size: .8rem; color: var(--fg-muted); }
 .vw-pager-page { color: var(--fg-muted); }
 .vw-empty { padding: 2rem 0; color: var(--fg-muted); font-size: .9rem; }
+.vw-require-provider { padding: 3rem 1rem; text-align: center; color: var(--fg-muted); font-size: .95rem;
+  border: 1px dashed var(--border-default); border-radius: var(--vw-radius); }
 
 /* On phones, collapse to a single column no matter what `columns` was set to. */
 @media (max-width: 640px) {
diff --git a/fern/products/platform/pages/calling/voice/TTS/index.mdx b/fern/products/platform/pages/calling/voice/TTS/index.mdx
index 27243370c4..534da6cfcd 100644
--- a/fern/products/platform/pages/calling/voice/TTS/index.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/index.mdx
@@ -56,6 +56,12 @@ lives on its reference page, linked in the table below.
   filters={false}
 />
 
+### All voices
+
+Choose a provider to browse and audition its full voice catalog.
+
+<VoiceWidget requireProvider={true} groupBy="none" />
+
 ## Compare providers and models
 
 SignalWire's TTS providers offer a wide range of voice engines optimized for various applications.

From 445a91c57d3c948c27602281c681acd3914dbc6a Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:31:32 +0000
Subject: [PATCH 02/27] Remove static preset voices from TTS overview, keep
 only requireProvider widget

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 .../pages/calling/voice/TTS/index.mdx         | 25 +------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/fern/products/platform/pages/calling/voice/TTS/index.mdx b/fern/products/platform/pages/calling/voice/TTS/index.mdx
index 534da6cfcd..c153830e79 100644
--- a/fern/products/platform/pages/calling/voice/TTS/index.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/index.mdx
@@ -33,33 +33,10 @@ Refer to each provider's documentation for up-to-date model details and service
 
 ## Browse and audition voices
 
-Press play to audition one sample voice from each supported provider, and use **copy config** to
+Choose a provider to browse and audition its full voice catalog. Press play to audition a voice, and use **copy config** to
 grab the engine and voice values for your SWML or SDK code. Each provider's complete voice list
 lives on its reference page, linked in the table below.
 
-<VoiceWidget
-  groupBy="none"
-  voiceIds={[
-    "polly/Nicole",
-    "azure/en-AU-AnnetteNeural",
-    "cartesia/3264ada2-4a79-4666-badc-49e2267be692",
-    "deepgram/aura-2-amalthea-en",
-    "elevenlabs/NNl6r8mD7vthiJatiJt1",
-    "gcloud/en-AU-News-E",
-    "openai/alloy",
-    "rime/abbie:mist",
-    "inworld/Abby",
-    "minimax/Spanish_Arnold",
-    "playai-turbo/austin",
-    "grok/ara",
-  ]}
-  filters={false}
-/>
-
-### All voices
-
-Choose a provider to browse and audition its full voice catalog.
-
 <VoiceWidget requireProvider={true} groupBy="none" />
 
 ## Compare providers and models

From 2fa892ae909c090f44392eef5f376acdd8af2cb5 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:46:05 +0000
Subject: [PATCH 03/27] Filter out 'all' provider option when requireProvider
 is set

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index e49757514c..1f462e9282 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -369,7 +369,7 @@ export function VoiceWidget({
 
       {(showProvider || (!awaitingProvider && (showFilter("language") || showFilter("gender") || showFilter("pageSize"))) || showGroup) && (
         <div className="vw-filters">
-          {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} />}
+          {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} noAll={requireProvider} />}
           {!awaitingProvider && showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
           {!awaitingProvider && showFilter("gender") && (
             <Select label="Gender" value={gender} onChange={setGender}
@@ -493,13 +493,15 @@ function VoiceWidgetSkeleton({ gridStyle }: { gridStyle?: CSSProperties }) {
   );
 }
 
-function Select({ label, value, onChange, opts }:
-  { label: string; value: string; onChange: (v: string) => void; opts: string[] }) {
+function Select({ label, value, onChange, opts, noAll }:
+  { label: string; value: string; onChange: (v: string) => void; opts: string[]; noAll?: boolean }) {
   return (
     <label className="vw-select">
       <span>{label}</span>
       <select value={value} onChange={(e) => onChange(e.target.value)}>
-        <option value={ALL}>all</option>
+        {noAll
+          ? <option value={ALL} disabled hidden>Choose a provider…</option>
+          : <option value={ALL}>all</option>}
         {opts.map((o) => <option key={o} value={o}>{o}</option>)}
       </select>
     </label>

From df8cce5454e7d297fd3713c0c06de9146a7f27ef Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:55:18 +0000
Subject: [PATCH 04/27] Fix: keep placeholder visible in dropdown so it shows
 as selected

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 1f462e9282..6084e2fe67 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -500,7 +500,7 @@ function Select({ label, value, onChange, opts, noAll }:
       <span>{label}</span>
       <select value={value} onChange={(e) => onChange(e.target.value)}>
         {noAll
-          ? <option value={ALL} disabled hidden>Choose a provider…</option>
+          ? <option value={ALL} disabled>Choose a provider…</option>
           : <option value={ALL}>all</option>}
         {opts.map((o) => <option key={o} value={o}>{o}</option>)}
       </select>

From e484677214eb651c935427dbbcfc08bec4a2d0fe Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:05:03 +0000
Subject: [PATCH 05/27] Filter page size options to only show values divisible
 by column count

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 6084e2fe67..ef1a212f1e 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -191,7 +191,8 @@ export function VoiceWidget({
   // single column is an excessive scroll on a phone.
   const isMobile = useIsMobile();
   const effectivePageSize = isMobile ? Math.min(pageSizeChoice, MOBILE_PAGE_SIZE) : pageSizeChoice;
-  const pageSizeOpts = [...new Set([...PAGE_SIZE_OPTIONS, pageSize])].sort((a, b) => a - b);
+  const pageSizeOpts = [...new Set([...PAGE_SIZE_OPTIONS, pageSize])].sort((a, b) => a - b)
+    .filter((n) => !columns || columns <= 0 || n % columns === 0);
 
   // Resolve which filter/search controls are visible. `filters` is a boolean (all on/off) or a
   // per-control object; each control defaults on unless explicitly false. The `search` control

From c86cdd25fd518acc7889511f545c87f4cb999ac4 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:15:48 +0000
Subject: [PATCH 06/27] Use stop icon instead of pause icon for playing state

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index ef1a212f1e..0622d83a88 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -443,7 +443,7 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
       <span className="vw-badge">{r.provider}</span>
       <div className="vw-card-top">
         <button className="vw-play" disabled={disabled} onClick={() => onPlay(r)}
-                aria-label={`Play ${r.display_name}`}>{playing ? "❚❚" : "▶"}</button>
+                aria-label={`Play ${r.display_name}`}>{playing ? "■" : "▶"}</button>
         <div className="vw-name" title={r.display_name}>{r.display_name}</div>
       </div>
       <div className="vw-meta">

From d2312448154ef4e55cdbd73cc6fb157e35220789 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 17:06:51 +0000
Subject: [PATCH 07/27] Move sample text to tooltip, remove requireProvider

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx        | 48 ++++++++-----------
 fern/components/voice-widget/styles.css       | 14 ++++--
 .../pages/calling/voice/TTS/index.mdx         |  2 +-
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 0622d83a88..728fa9c479 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -134,12 +134,6 @@ export interface VoiceWidgetProps {
    * always hidden when the `provider` lock prop is set.
    */
   filters?: boolean | Partial<Record<FilterKey, boolean>>;
-  /**
-   * When `true`, the widget shows a placeholder prompting the user to select a provider before
-   * rendering any voice cards. The provider dropdown is always shown when this is set. Once the
-   * user selects a provider, cards appear. Default: `false`.
-   */
-  requireProvider?: boolean;
 }
 
 export function VoiceWidget({
@@ -153,7 +147,6 @@ export function VoiceWidget({
   provider: lockedProvider,
   voiceIds,
   filters,
-  requireProvider = false,
 }: VoiceWidgetProps) {
   // Normalized single-provider lock (null when the widget shows all providers).
   const lock = lockedProvider?.trim().toLowerCase() || null;
@@ -202,9 +195,8 @@ export function VoiceWidget({
     : filters && typeof filters === "object"
       ? key === "search" ? filters[key] === true : filters[key] !== false
     : key === "search" ? false : true;
-  const showProvider = (!lock || requireProvider) && showFilter("provider");
-  // Hide group-by toggle when a provider is locked or requireProvider is active.
-  const showGroup = group !== "none" && showFilter("group") && !lock && !requireProvider;
+  const showProvider = !lock && showFilter("provider");
+  const showGroup = group !== "none" && showFilter("group") && !lock;
 
   useEffect(() => {
     let alive = true;
@@ -341,8 +333,7 @@ export function VoiceWidget({
   // Step from safePage, not the raw page state: `page` can be stale-high after effectivePageSize
   // grows (a mobile→desktop resize isn't in filterSig), and stepping from it makes Prev appear
   // dead until the raw value catches back up with the clamped one.
-  const awaitingProvider = requireProvider && provider === ALL;
-  const pager = pageCount > 1 && !awaitingProvider ? (
+  const pager = pageCount > 1 ? (
     <nav className="vw-pager" aria-label="Voice pages">
       <button className="vw-pager-btn" onClick={() => setPage(Math.max(0, safePage - 1))} disabled={safePage <= 0}>
         ‹ Prev
@@ -361,22 +352,22 @@ export function VoiceWidget({
     <div className="vw">
       <audio ref={audioRef} onEnded={() => setPlayingKey(null)} preload="none" />
       <header className="vw-head">
-        <div className="vw-title">TTS Voices {!awaitingProvider && <span className="vw-count">{filtered.length}</span>}</div>
+        <div className="vw-title">TTS Voices <span className="vw-count">{filtered.length}</span></div>
         {showFilter("search") && (
           <input className="vw-search" placeholder="Search voices…" value={q}
                  onChange={(e) => setQ(e.target.value)} />
         )}
       </header>
 
-      {(showProvider || (!awaitingProvider && (showFilter("language") || showFilter("gender") || showFilter("pageSize"))) || showGroup) && (
+      {(showProvider || showFilter("language") || showFilter("gender") || showFilter("pageSize") || showGroup) && (
         <div className="vw-filters">
-          {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} noAll={requireProvider} />}
-          {!awaitingProvider && showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
-          {!awaitingProvider && showFilter("gender") && (
+          {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} />}
+          {showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
+          {showFilter("gender") && (
             <Select label="Gender" value={gender} onChange={setGender}
                     opts={["male", "female", "neutral", "unknown"]} />
           )}
-          {!awaitingProvider && showFilter("pageSize") && (
+          {showFilter("pageSize") && (
             <label className="vw-select">
               <span>Per page</span>
               <select value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
@@ -395,11 +386,7 @@ export function VoiceWidget({
 
       {pager}
 
-      {awaitingProvider ? (
-        <div className="vw-require-provider">
-          <p>Select a provider above to browse available voices.</p>
-        </div>
-      ) : pageSections.length === 0 ? (
+      {pageSections.length === 0 ? (
         <p className="vw-empty">No voices match your filters.</p>
       ) : (
         pageSections.map((sec, i) => (
@@ -451,7 +438,12 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
         <span className={`vw-gender vw-${r.gender}`}>{r.gender}</span>
         {r.model && <span className="vw-model">{r.model}</span>}
       </div>
-      {r.clip?.sample_text && <p className="vw-sample">“{r.clip.sample_text}”</p>}
+      {r.clip?.sample_text && (
+        <span className="vw-tooltip-wrap">
+          <span className="vw-tooltip-icon" aria-label="Sample text">💬</span>
+          <span className="vw-tooltip" role="tooltip">“{r.clip.sample_text}”</span>
+        </span>
+      )}
       {(!r.clip || r.clip.status === "error") &&
         <p className="vw-note">{r.clip?.error ?? "no sample (provider key missing)"}</p>}
       {/* Both labels are always in the DOM and grid-stacked (see CSS) so the button keeps the width
@@ -494,15 +486,13 @@ function VoiceWidgetSkeleton({ gridStyle }: { gridStyle?: CSSProperties }) {
   );
 }
 
-function Select({ label, value, onChange, opts, noAll }:
-  { label: string; value: string; onChange: (v: string) => void; opts: string[]; noAll?: boolean }) {
+function Select({ label, value, onChange, opts }:
+  { label: string; value: string; onChange: (v: string) => void; opts: string[] }) {
   return (
     <label className="vw-select">
       <span>{label}</span>
       <select value={value} onChange={(e) => onChange(e.target.value)}>
-        {noAll
-          ? <option value={ALL} disabled>Choose a provider…</option>
-          : <option value={ALL}>all</option>}
+        <option value={ALL}>all</option>
         {opts.map((o) => <option key={o} value={o}>{o}</option>)}
       </select>
     </label>
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index b2ec518d77..981836ba37 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -56,7 +56,16 @@
 .vw-meta { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .7rem; color: var(--vw-muted); }
 .vw-meta span { padding: .12rem .4rem; background: var(--grayscale-a3); border-radius: 6px; }
 .vw-gender.vw-male { color: #3b82f6; } .vw-gender.vw-female { color: #d6409f; }
-.vw-sample { margin: 0; font-size: .82rem; color: var(--fg-secondary); font-style: italic; }
+/* Tooltip for sample text — keeps cards compact while still exposing the transcript on hover. */
+.vw-tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
+.vw-tooltip-icon { cursor: default; font-size: .85rem; line-height: 1; }
+.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 0;
+  width: max(200px, min(100vw - 2rem, 320px)); padding: .5rem .65rem;
+  background: var(--bg-surface-raised); color: var(--fg-secondary);
+  border: 1px solid var(--border-default); border-radius: 8px;
+  font-size: .78rem; font-style: italic; line-height: 1.45;
+  box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 10; pointer-events: none; }
+.vw-tooltip-wrap:hover .vw-tooltip { display: block; }
 .vw-note { margin: 0; font-size: .72rem; color: var(--warning-text); }
 /* margin-top:auto pins copy to the bottom so it aligns across a row regardless of sample length.
    The two labels are grid-stacked in one cell so the button always sizes to the wider label
@@ -81,8 +90,7 @@
 .vw-pager-info { font-size: .8rem; color: var(--fg-muted); }
 .vw-pager-page { color: var(--fg-muted); }
 .vw-empty { padding: 2rem 0; color: var(--fg-muted); font-size: .9rem; }
-.vw-require-provider { padding: 3rem 1rem; text-align: center; color: var(--fg-muted); font-size: .95rem;
-  border: 1px dashed var(--border-default); border-radius: var(--vw-radius); }
+
 
 /* On phones, collapse to a single column no matter what `columns` was set to. */
 @media (max-width: 640px) {
diff --git a/fern/products/platform/pages/calling/voice/TTS/index.mdx b/fern/products/platform/pages/calling/voice/TTS/index.mdx
index c153830e79..096d236109 100644
--- a/fern/products/platform/pages/calling/voice/TTS/index.mdx
+++ b/fern/products/platform/pages/calling/voice/TTS/index.mdx
@@ -37,7 +37,7 @@ Choose a provider to browse and audition its full voice catalog. Press play to a
 grab the engine and voice values for your SWML or SDK code. Each provider's complete voice list
 lives on its reference page, linked in the table below.
 
-<VoiceWidget requireProvider={true} groupBy="none" />
+<VoiceWidget groupBy="none" />
 
 ## Compare providers and models
 

From 5ac76f251f3ce2ae317ce96c1a5e745cac913c37 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 17:19:46 +0000
Subject: [PATCH 08/27] Replace emoji tooltip with SVG info icon, fix
 positioning to overlay outside card

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx  |  8 +++++++-
 fern/components/voice-widget/styles.css | 12 +++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 728fa9c479..9148ce7c54 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -440,7 +440,13 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
       </div>
       {r.clip?.sample_text && (
         <span className="vw-tooltip-wrap">
-          <span className="vw-tooltip-icon" aria-label="Sample text">💬</span>
+          <span className="vw-tooltip-icon" aria-label="Sample text">
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+              <path d="M8 7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              <circle cx="8" cy="5" r="0.75" fill="currentColor" />
+            </svg>
+          </span>
           <span className="vw-tooltip" role="tooltip">“{r.clip.sample_text}”</span>
         </span>
       )}
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 981836ba37..82be865bf6 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -39,7 +39,7 @@
 .vw-grid { display: grid; gap: .75rem;
   grid-template-columns: repeat(var(--vw-cols, auto-fill), minmax(var(--vw-col-min, 240px), 1fr)); }
 .vw-card { background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius);
-  padding: .75rem; display: flex; flex-direction: column; gap: .5rem; overflow: hidden; }
+  padding: .75rem; display: flex; flex-direction: column; gap: .5rem; overflow: visible; position: relative; }
 .vw-card.vw-disabled { opacity: .55; }
 .vw-card-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
 .vw-play { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
@@ -58,13 +58,15 @@
 .vw-gender.vw-male { color: #3b82f6; } .vw-gender.vw-female { color: #d6409f; }
 /* Tooltip for sample text — keeps cards compact while still exposing the transcript on hover. */
 .vw-tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
-.vw-tooltip-icon { cursor: default; font-size: .85rem; line-height: 1; }
-.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 0;
-  width: max(200px, min(100vw - 2rem, 320px)); padding: .5rem .65rem;
+.vw-tooltip-icon { cursor: help; color: var(--vw-muted); display: inline-flex; align-items: center;
+  transition: color .15s ease; }
+.vw-tooltip-wrap:hover .vw-tooltip-icon { color: var(--vw-accent); }
+.vw-tooltip { display: none; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
+  width: max(220px, min(100vw - 2rem, 340px)); padding: .6rem .75rem;
   background: var(--bg-surface-raised); color: var(--fg-secondary);
   border: 1px solid var(--border-default); border-radius: 8px;
   font-size: .78rem; font-style: italic; line-height: 1.45;
-  box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 10; pointer-events: none; }
+  box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 20; pointer-events: none; }
 .vw-tooltip-wrap:hover .vw-tooltip { display: block; }
 .vw-note { margin: 0; font-size: .72rem; color: var(--warning-text); }
 /* margin-top:auto pins copy to the bottom so it aligns across a row regardless of sample length.

From 05394ef3230745a954ab510fccd4180df2a6b298 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 17:27:16 +0000
Subject: [PATCH 09/27] Move tooltip icon next to voice name in title row

Co-Authored-By: bot_apk <apk@cognition.ai>
---
 fern/components/voice-widget/index.tsx  | 24 ++++++++++++------------
 fern/components/voice-widget/styles.css |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 9148ce7c54..7587890c43 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -432,24 +432,24 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
         <button className="vw-play" disabled={disabled} onClick={() => onPlay(r)}
                 aria-label={`Play ${r.display_name}`}>{playing ? "■" : "▶"}</button>
         <div className="vw-name" title={r.display_name}>{r.display_name}</div>
+        {r.clip?.sample_text && (
+          <span className="vw-tooltip-wrap">
+            <span className="vw-tooltip-icon" aria-label="Sample text">
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M8 7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                <circle cx="8" cy="5" r="0.75" fill="currentColor" />
+              </svg>
+            </span>
+            <span className="vw-tooltip" role="tooltip">“{r.clip.sample_text}”</span>
+          </span>
+        )}
       </div>
       <div className="vw-meta">
         <span className="vw-lang">{r.primary_language}</span>
         <span className={`vw-gender vw-${r.gender}`}>{r.gender}</span>
         {r.model && <span className="vw-model">{r.model}</span>}
       </div>
-      {r.clip?.sample_text && (
-        <span className="vw-tooltip-wrap">
-          <span className="vw-tooltip-icon" aria-label="Sample text">
-            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
-              <path d="M8 7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-              <circle cx="8" cy="5" r="0.75" fill="currentColor" />
-            </svg>
-          </span>
-          <span className="vw-tooltip" role="tooltip">“{r.clip.sample_text}”</span>
-        </span>
-      )}
       {(!r.clip || r.clip.status === "error") &&
         <p className="vw-note">{r.clip?.error ?? "no sample (provider key missing)"}</p>}
       {/* Both labels are always in the DOM and grid-stacked (see CSS) so the button keeps the width
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 82be865bf6..5562e177a1 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -57,7 +57,7 @@
 .vw-meta span { padding: .12rem .4rem; background: var(--grayscale-a3); border-radius: 6px; }
 .vw-gender.vw-male { color: #3b82f6; } .vw-gender.vw-female { color: #d6409f; }
 /* Tooltip for sample text — keeps cards compact while still exposing the transcript on hover. */
-.vw-tooltip-wrap { position: relative; display: inline-flex; align-items: center; }
+.vw-tooltip-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
 .vw-tooltip-icon { cursor: help; color: var(--vw-muted); display: inline-flex; align-items: center;
   transition: color .15s ease; }
 .vw-tooltip-wrap:hover .vw-tooltip-icon { color: var(--vw-accent); }

From dc5f092f74d189adc898ad383c7ffb6f0b8bdc2c Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:08:32 -0400
Subject: [PATCH 10/27] Voice widget: quiet-professional card redesign (footer
 provider label, dot meta, eq playing state)

---
 fern/components/voice-widget/index.tsx  | 36 +++++++----
 fern/components/voice-widget/styles.css | 85 ++++++++++++++++---------
 2 files changed, 79 insertions(+), 42 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 7587890c43..ca501ae962 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -427,10 +427,18 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
 
   return (
     <article className={`vw-card${r.clip?.status === "error" || !r.clip ? " vw-disabled" : ""}`}>
-      <span className="vw-badge">{r.provider}</span>
       <div className="vw-card-top">
-        <button className="vw-play" disabled={disabled} onClick={() => onPlay(r)}
-                aria-label={`Play ${r.display_name}`}>{playing ? "■" : "▶"}</button>
+        <button className={`vw-play${playing ? " vw-playing" : ""}`} disabled={disabled} onClick={() => onPlay(r)}
+                aria-label={playing ? `Stop ${r.display_name}` : `Play ${r.display_name}`}>
+          {playing ? (
+            <>
+              {/* Two glyphs for the playing state: animated bars normally, a static stop square when
+                  the user prefers reduced motion (CSS swaps their display). */}
+              <span className="vw-eq" aria-hidden="true"><i /><i /><i /></span>
+              <span className="vw-stop" aria-hidden="true">■</span>
+            </>
+          ) : "▶"}
+        </button>
         <div className="vw-name" title={r.display_name}>{r.display_name}</div>
         {r.clip?.sample_text && (
           <span className="vw-tooltip-wrap">
@@ -446,18 +454,22 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
         )}
       </div>
       <div className="vw-meta">
-        <span className="vw-lang">{r.primary_language}</span>
-        <span className={`vw-gender vw-${r.gender}`}>{r.gender}</span>
-        {r.model && <span className="vw-model">{r.model}</span>}
+        <span>{r.primary_language}</span>
+        <span className="vw-meta-dot" aria-hidden="true">·</span>
+        <span className="vw-gender">{r.gender}</span>
+        {r.model && <><span className="vw-meta-dot" aria-hidden="true">·</span><span>{r.model}</span></>}
       </div>
       {(!r.clip || r.clip.status === "error") &&
         <p className="vw-note">{r.clip?.error ?? "no sample (provider key missing)"}</p>}
-      {/* Both labels are always in the DOM and grid-stacked (see CSS) so the button keeps the width
-          of the wider one — no layout shift when it swaps to the copied state. */}
-      <button className={`vw-copy${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
-        <span className="vw-copy-default">copy config</span>
-        <span className="vw-copy-done">✓ copied</span>
-      </button>
+      <div className="vw-foot">
+        <span className="vw-prov" title={r.provider}>{r.provider}</span>
+        {/* Both labels stay in the DOM and grid-stacked (see CSS) so the button keeps the width
+            of the wider one — no layout shift when it swaps to the copied state. */}
+        <button className={`vw-copy${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
+          <span className="vw-copy-default">Copy config</span>
+          <span className="vw-copy-done">✓ Copied</span>
+        </button>
+      </div>
     </article>
   );
 });
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 5562e177a1..673cf09635 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -39,48 +39,73 @@
 .vw-grid { display: grid; gap: .75rem;
   grid-template-columns: repeat(var(--vw-cols, auto-fill), minmax(var(--vw-col-min, 240px), 1fr)); }
 .vw-card { background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius);
-  padding: .75rem; display: flex; flex-direction: column; gap: .5rem; overflow: visible; position: relative; }
-.vw-card.vw-disabled { opacity: .55; }
-.vw-card-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
-.vw-play { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
-  background: var(--vw-accent); color: var(--accent-contrast); border: none; font-size: .8rem; }
-.vw-play:disabled { background: var(--grayscale-a4); color: var(--vw-muted); cursor: not-allowed; }
-.vw-name { font-weight: 600; flex: 1 1 auto;
+  padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overflow: visible; position: relative;
+  transition: border-color .15s ease, box-shadow .15s ease; }
+.vw-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
+.vw-card.vw-disabled { opacity: .6; }
+.vw-card-top { display: flex; align-items: center; gap: .6rem; min-width: 0; }
+
+/* Ghost play button: outline at rest, fills with the accent while its clip plays. */
+.vw-play { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
+  background: transparent; color: var(--vw-fg); border: 1.5px solid var(--vw-line); font-size: .72rem;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background .15s ease, border-color .15s ease, color .15s ease; }
+.vw-play:hover:not(:disabled) { border-color: var(--vw-accent); color: var(--vw-accent); }
+.vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
+.vw-play:disabled { border-style: dashed; color: var(--vw-muted); cursor: not-allowed; }
+
+/* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below). */
+.vw-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
+.vw-eq i { width: 2.5px; background: currentColor; border-radius: 1px; animation: vw-eqb 1s ease-in-out infinite; }
+.vw-eq i:nth-child(1) { height: 60%; }
+.vw-eq i:nth-child(2) { height: 100%; animation-delay: .2s; }
+.vw-eq i:nth-child(3) { height: 40%; animation-delay: .4s; }
+@keyframes vw-eqb { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
+.vw-stop { display: none; }
+
+.vw-name { font-weight: 600; font-size: .92rem; letter-spacing: -.01em; flex: 1 1 auto;
   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* Provider badge sits in the card's top-right corner, on its own line above the title, tucked into
-   the corner so it can't overlap the title or meta chips and adds minimal vertical space. */
-.vw-badge { font-size: .68rem; padding: .15rem .4rem; border: 1px solid var(--vw-line);
-  border-radius: 999px; color: var(--vw-muted); white-space: nowrap;
-  align-self: flex-end; width: fit-content; max-width: 100%;
-  overflow: hidden; text-overflow: ellipsis; margin: -0.25rem -0.15rem -0.45rem 0; }
-.vw-meta { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .7rem; color: var(--vw-muted); }
-.vw-meta span { padding: .12rem .4rem; background: var(--grayscale-a3); border-radius: 6px; }
-.vw-gender.vw-male { color: #3b82f6; } .vw-gender.vw-female { color: #d6409f; }
-/* Tooltip for sample text — keeps cards compact while still exposing the transcript on hover. */
+
+/* Meta reads as a single muted line with middot separators — no chip backgrounds. */
+.vw-meta { font-size: .78rem; color: var(--vw-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
+.vw-meta-dot { color: var(--vw-line); }
+.vw-gender { text-transform: capitalize; }
+
+/* Transcript tooltip floats above the icon, centered, with a caret. */
 .vw-tooltip-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
 .vw-tooltip-icon { cursor: help; color: var(--vw-muted); display: inline-flex; align-items: center;
   transition: color .15s ease; }
 .vw-tooltip-wrap:hover .vw-tooltip-icon { color: var(--vw-accent); }
-.vw-tooltip { display: none; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
-  width: max(220px, min(100vw - 2rem, 340px)); padding: .6rem .75rem;
-  background: var(--bg-surface-raised); color: var(--fg-secondary);
-  border: 1px solid var(--border-default); border-radius: 8px;
+.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+  width: max(200px, min(100vw - 2rem, 260px)); padding: .5rem .7rem;
+  background: var(--vw-card); color: var(--fg-secondary);
+  border: 1px solid var(--vw-line); border-radius: 8px;
   font-size: .78rem; font-style: italic; line-height: 1.45;
-  box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 20; pointer-events: none; }
+  box-shadow: 0 6px 20px rgba(0,0,0,.15); z-index: 20; pointer-events: none; }
+.vw-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+  border: 6px solid transparent; border-top-color: var(--vw-card); }
 .vw-tooltip-wrap:hover .vw-tooltip { display: block; }
+
 .vw-note { margin: 0; font-size: .72rem; color: var(--warning-text); }
-/* margin-top:auto pins copy to the bottom so it aligns across a row regardless of sample length.
-   The two labels are grid-stacked in one cell so the button always sizes to the wider label
-   ("copy config") — swapping to the copied state causes no width change / layout shift. */
-.vw-copy { align-self: flex-start; margin-top: auto; font-size: .72rem; background: transparent;
-  color: var(--vw-accent); border: 1px solid var(--vw-line); border-radius: 6px; padding: .25rem .5rem;
-  cursor: pointer; display: inline-grid; text-align: center; transition: border-color .15s ease; }
-.vw-copy:hover:not(.vw-copied) { border-color: var(--accent); }
+
+/* Footer pins to the card bottom; provider label left, copy action right. */
+.vw-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
+.vw-prov { font-size: .7rem; font-weight: 500; color: var(--vw-muted); text-transform: uppercase;
+  letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.vw-copy { font-size: .78rem; background: transparent; color: var(--vw-accent); border: none; padding: 0;
+  cursor: pointer; font-weight: 500; display: inline-grid; text-align: right; }
 .vw-copy > span { grid-area: 1 / 1; }
 .vw-copy .vw-copy-done { visibility: hidden; }            /* reserves space but hidden until copied */
 .vw-copy.vw-copied .vw-copy-default { visibility: hidden; }
 .vw-copy.vw-copied .vw-copy-done { visibility: visible; }
-.vw-copy.vw-copied { color: #16a34a; border-color: #16a34a; }  /* green check, readable on light + dark */
+.vw-copy.vw-copied { color: #16a34a; }  /* green check, readable on light + dark */
+
+/* Reduced motion: static stop glyph instead of animated bars; no hover/state transitions. */
+@media (prefers-reduced-motion: reduce) {
+  .vw-eq { display: none; }
+  .vw-stop { display: inline; }
+  .vw-card, .vw-play, .vw-copy, .vw-tooltip-icon { transition: none; }
+}
 
 /* Pagination controls + empty state. */
 .vw-pager { display: flex; align-items: center; justify-content: center; gap: .75rem;

From b395b4483136b716ed4b599537f1142ebd698891 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:18:01 -0400
Subject: [PATCH 11/27] Voice widget: card review fixes (playing-state hover
 color, card-anchored tooltip, focus access)

---
 fern/components/voice-widget/index.tsx  |  2 +-
 fern/components/voice-widget/styles.css | 25 +++++++++++++++----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index ca501ae962..29275835c2 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -442,7 +442,7 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
         <div className="vw-name" title={r.display_name}>{r.display_name}</div>
         {r.clip?.sample_text && (
           <span className="vw-tooltip-wrap">
-            <span className="vw-tooltip-icon" aria-label="Sample text">
+            <span className="vw-tooltip-icon" role="img" aria-label="Sample text" tabIndex={0}>
               <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
                 <path d="M8 7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 673cf09635..2833b3b43a 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -41,7 +41,7 @@
 .vw-card { background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius);
   padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overflow: visible; position: relative;
   transition: border-color .15s ease, box-shadow .15s ease; }
-.vw-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
+.vw-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: var(--grayscale-a4); z-index: 1; }
 .vw-card.vw-disabled { opacity: .6; }
 .vw-card-top { display: flex; align-items: center; gap: .6rem; min-width: 0; }
 
@@ -50,13 +50,14 @@
   background: transparent; color: var(--vw-fg); border: 1.5px solid var(--vw-line); font-size: .72rem;
   display: inline-flex; align-items: center; justify-content: center;
   transition: background .15s ease, border-color .15s ease, color .15s ease; }
-.vw-play:hover:not(:disabled) { border-color: var(--vw-accent); color: var(--vw-accent); }
+.vw-play:hover:not(:disabled):not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
 .vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
 .vw-play:disabled { border-style: dashed; color: var(--vw-muted); cursor: not-allowed; }
 
 /* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below). */
 .vw-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
-.vw-eq i { width: 2.5px; background: currentColor; border-radius: 1px; animation: vw-eqb 1s ease-in-out infinite; }
+.vw-eq i { width: 2.5px; background: currentColor; border-radius: 1px; transform-origin: 50% 100%;
+  animation: vw-eqb 1s ease-in-out infinite; }
 .vw-eq i:nth-child(1) { height: 60%; }
 .vw-eq i:nth-child(2) { height: 100%; animation-delay: .2s; }
 .vw-eq i:nth-child(3) { height: 40%; animation-delay: .4s; }
@@ -71,20 +72,23 @@
 .vw-meta-dot { color: var(--vw-line); }
 .vw-gender { text-transform: capitalize; }
 
-/* Transcript tooltip floats above the icon, centered, with a caret. */
-.vw-tooltip-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
+/* Transcript tooltip is anchored to the card (the nearest positioned ancestor), so it spans the
+   card's width just above it — always fits the grid column, can't escape the viewport. */
+.vw-tooltip-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; }
 .vw-tooltip-icon { cursor: help; color: var(--vw-muted); display: inline-flex; align-items: center;
   transition: color .15s ease; }
-.vw-tooltip-wrap:hover .vw-tooltip-icon { color: var(--vw-accent); }
-.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
-  width: max(200px, min(100vw - 2rem, 260px)); padding: .5rem .7rem;
+.vw-tooltip-wrap:hover .vw-tooltip-icon,
+.vw-tooltip-wrap:focus-within .vw-tooltip-icon { color: var(--vw-accent); }
+.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: .5rem; right: .5rem;
+  width: auto; padding: .5rem .7rem;
   background: var(--vw-card); color: var(--fg-secondary);
   border: 1px solid var(--vw-line); border-radius: 8px;
   font-size: .78rem; font-style: italic; line-height: 1.45;
   box-shadow: 0 6px 20px rgba(0,0,0,.15); z-index: 20; pointer-events: none; }
 .vw-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
   border: 6px solid transparent; border-top-color: var(--vw-card); }
-.vw-tooltip-wrap:hover .vw-tooltip { display: block; }
+.vw-tooltip-wrap:hover .vw-tooltip,
+.vw-tooltip-wrap:focus-within .vw-tooltip { display: block; }
 
 .vw-note { margin: 0; font-size: .72rem; color: var(--warning-text); }
 
@@ -92,7 +96,8 @@
 .vw-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
 .vw-prov { font-size: .7rem; font-weight: 500; color: var(--vw-muted); text-transform: uppercase;
   letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vw-copy { font-size: .78rem; background: transparent; color: var(--vw-accent); border: none; padding: 0;
+.vw-copy { font-size: .78rem; background: transparent; color: var(--vw-accent); border: none;
+  padding: .35rem .5rem; margin: -.35rem -.5rem; /* invisible padding keeps a >=24px tap target */
   cursor: pointer; font-weight: 500; display: inline-grid; text-align: right; }
 .vw-copy > span { grid-area: 1 / 1; }
 .vw-copy .vw-copy-done { visibility: hidden; }            /* reserves space but hidden until copied */

From 9c23026116708ece8a29a268ee799af37ebfb63d Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:21:02 -0400
Subject: [PATCH 12/27] Voice widget: drop hover z-index that trapped tooltip
 under sticky toolbar

---
 fern/components/voice-widget/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 2833b3b43a..9ef3d95bb3 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -41,7 +41,7 @@
 .vw-card { background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius);
   padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overflow: visible; position: relative;
   transition: border-color .15s ease, box-shadow .15s ease; }
-.vw-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: var(--grayscale-a4); z-index: 1; }
+.vw-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: var(--grayscale-a4); }
 .vw-card.vw-disabled { opacity: .6; }
 .vw-card-top { display: flex; align-items: center; gap: .6rem; min-width: 0; }
 

From 5cda53d1974b9b6d0df1496c44e964b879eb1a7a Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:22:59 -0400
Subject: [PATCH 13/27] Voice widget: header live count, inline toolbar,
 segmented group toggle

---
 fern/components/voice-widget/index.tsx  | 30 ++++++++++-----------
 fern/components/voice-widget/styles.css | 35 ++++++++++++++-----------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 29275835c2..cdfcfc0537 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -352,14 +352,16 @@ export function VoiceWidget({
     <div className="vw">
       <audio ref={audioRef} onEnded={() => setPlayingKey(null)} preload="none" />
       <header className="vw-head">
-        <div className="vw-title">TTS Voices <span className="vw-count">{filtered.length}</span></div>
-        {showFilter("search") && (
-          <input className="vw-search" placeholder="Search voices…" value={q}
-                 onChange={(e) => setQ(e.target.value)} />
-        )}
+        <div className="vw-title">
+          {lock && baseRows[0] ? `${baseRows[0].provider} voices` : "TTS Voices"}
+          <span className="vw-count">
+            {baseRows.length.toLocaleString()} {baseRows.length === 1 ? "voice" : "voices"}
+            {filtered.length !== baseRows.length && <> · {filtered.length.toLocaleString()} match</>}
+          </span>
+        </div>
       </header>
 
-      {(showProvider || showFilter("language") || showFilter("gender") || showFilter("pageSize") || showGroup) && (
+      {(showFilter("search") || showProvider || showFilter("language") || showFilter("gender") || showGroup) && (
         <div className="vw-filters">
           {showProvider && <Select label="Provider" value={provider} onChange={setProvider} opts={providers} />}
           {showFilter("language") && <Select label="Language" value={language} onChange={setLanguage} opts={languages} />}
@@ -367,18 +369,14 @@ export function VoiceWidget({
             <Select label="Gender" value={gender} onChange={setGender}
                     opts={["male", "female", "neutral", "unknown"]} />
           )}
-          {showFilter("pageSize") && (
-            <label className="vw-select">
-              <span>Per page</span>
-              <select value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
-                {pageSizeOpts.map((n) => <option key={n} value={n}>{n}</option>)}
-              </select>
-            </label>
+          {showFilter("search") && (
+            <input className="vw-search" placeholder="Search voices…" value={q}
+                   onChange={(e) => setQ(e.target.value)} />
           )}
           {showGroup && (
-            <div className="vw-group">
-              <button className={group === "provider" ? "on" : ""} onClick={() => setGroup("provider")}>by provider</button>
-              <button className={group === "language" ? "on" : ""} onClick={() => setGroup("language")}>by language</button>
+            <div className="vw-group" role="group" aria-label="Group voices">
+              <button className={group === "provider" ? "on" : ""} onClick={() => setGroup("provider")}>By provider</button>
+              <button className={group === "language" ? "on" : ""} onClick={() => setGroup("language")}>By language</button>
             </div>
           )}
         </div>
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 9ef3d95bb3..056244a61c 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -14,25 +14,30 @@
 .vw-loading, .vw-error { padding: 2rem; color: var(--vw-muted); }
 .vw-error { color: var(--error-text); }
 
-.vw-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
-.vw-title { font-size: 1.15rem; font-weight: 700; }
-.vw-count { color: var(--vw-muted); font-weight: 400; margin-left: .35rem; }
-.vw-search { margin-left: auto; padding: .5rem .75rem; min-width: 220px;
-  background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius); color: inherit; }
+.vw-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
+.vw-title { font-size: 1.1rem; font-weight: 700; }
+.vw-count { color: var(--vw-muted); font-weight: 400; font-size: .82rem; margin-left: .4rem; }
 
-.vw-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem;
+/* Toolbar: one row of pill controls; sticks under the page header while scrolling the grid. */
+.vw-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
   position: sticky; top: 0; background: var(--vw-bg); padding: .5rem 0; z-index: 2; }
-.vw-select { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--vw-muted); }
-.vw-select select { padding: .4rem .5rem; background: var(--vw-card); color: var(--vw-fg);
-  border: 1px solid var(--vw-line); border-radius: 8px; }
-.vw-group { display: flex; gap: .25rem; margin-left: auto; }
-.vw-group button { padding: .4rem .6rem; background: var(--vw-card); color: var(--vw-muted);
-  border: 1px solid var(--vw-line); border-radius: 8px; cursor: pointer; }
-.vw-group button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-a3); }
+.vw-select { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--vw-muted);
+  background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: 9px; padding: .4rem .7rem; }
+.vw-select select { border: none; background: transparent; color: var(--vw-fg); font-weight: 600;
+  font-size: .8rem; padding: 0; cursor: pointer; }
+.vw-search { padding: .4rem .7rem; min-width: 200px; background: var(--vw-card);
+  border: 1px solid var(--vw-line); border-radius: 9px; color: inherit; font-size: .8rem; }
+
+/* Group toggle as a segmented control: gray track, raised white active segment. */
+.vw-group { display: flex; margin-left: auto; background: var(--grayscale-a3); border-radius: 9px; padding: 2px; }
+.vw-group button { padding: .35rem .7rem; background: transparent; color: var(--vw-muted); border: none;
+  border-radius: 7px; cursor: pointer; font-size: .78rem; }
+.vw-group button.on { background: var(--vw-card); color: var(--vw-fg); font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
 
 .vw-section { margin-bottom: 1.5rem; }
-.vw-section-title { font-size: .95rem; margin: .5rem 0; text-transform: capitalize; }
-.vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .35rem; }
+.vw-section-title { font-size: .85rem; font-weight: 650; margin: .5rem 0 .6rem; text-transform: capitalize; }
+.vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .3rem; }
 
 /* Column count is driven by --vw-cols (set inline by the `columns` prop; falls back to responsive
    auto-fill). Defining the template here lets the mobile media query override it regardless. */

From c3d47ebe985f1a9a9be89df18cece20bb7f87588 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:30:56 -0400
Subject: [PATCH 14/27] Voice widget: toolbar review fixes (select popup
 colors, aria-pressed, sticky comment)

---
 fern/components/voice-widget/index.tsx  | 6 ++++--
 fern/components/voice-widget/styles.css | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index cdfcfc0537..b759760c40 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -375,8 +375,10 @@ export function VoiceWidget({
           )}
           {showGroup && (
             <div className="vw-group" role="group" aria-label="Group voices">
-              <button className={group === "provider" ? "on" : ""} onClick={() => setGroup("provider")}>By provider</button>
-              <button className={group === "language" ? "on" : ""} onClick={() => setGroup("language")}>By language</button>
+              <button className={group === "provider" ? "on" : ""} aria-pressed={group === "provider"}
+                      onClick={() => setGroup("provider")}>By provider</button>
+              <button className={group === "language" ? "on" : ""} aria-pressed={group === "language"}
+                      onClick={() => setGroup("language")}>By language</button>
             </div>
           )}
         </div>
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 056244a61c..0641ee230d 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -18,13 +18,17 @@
 .vw-title { font-size: 1.1rem; font-weight: 700; }
 .vw-count { color: var(--vw-muted); font-weight: 400; font-size: .82rem; margin-left: .4rem; }
 
-/* Toolbar: one row of pill controls; sticks under the page header while scrolling the grid. */
+/* Toolbar: one row of pill controls; sticky at the scroll-container top while the grid scrolls
+   (the docs header offset gets verified in the visual pass). */
 .vw-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
   position: sticky; top: 0; background: var(--vw-bg); padding: .5rem 0; z-index: 2; }
 .vw-select { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--vw-muted);
   background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: 9px; padding: .4rem .7rem; }
 .vw-select select { border: none; background: transparent; color: var(--vw-fg); font-weight: 600;
   font-size: .8rem; padding: 0; cursor: pointer; }
+/* Chromium derives the option popup's colors from the select's computed background — transparent
+   would yield a white popup with near-white text in dark mode, so pin both explicitly. */
+.vw-select option { background: var(--vw-card); color: var(--vw-fg); }
 .vw-search { padding: .4rem .7rem; min-width: 200px; background: var(--vw-card);
   border: 1px solid var(--vw-line); border-radius: 9px; color: inherit; font-size: .8rem; }
 

From 760da1da9379ef69515b639eaad9fe6bfc35855c Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:33:08 -0400
Subject: [PATCH 15/27] Voice widget: numbered pagination with per-page select,
 drop duplicate top pager

---
 fern/components/voice-widget/index.tsx  | 41 ++++++++++++++++++++-----
 fern/components/voice-widget/styles.css | 22 ++++++++-----
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index b759760c40..8b837e87e1 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -335,16 +335,29 @@ export function VoiceWidget({
   // dead until the raw value catches back up with the clamped one.
   const pager = pageCount > 1 ? (
     <nav className="vw-pager" aria-label="Voice pages">
-      <button className="vw-pager-btn" onClick={() => setPage(Math.max(0, safePage - 1))} disabled={safePage <= 0}>
+      <button className="vw-page vw-page-nav" onClick={() => setPage(Math.max(0, safePage - 1))} disabled={safePage <= 0}>
         ‹ Prev
       </button>
-      <span className="vw-pager-info">
-        {ordered.length ? `${start + 1}–${end} of ${ordered.length}` : "0 of 0"}
-        <span className="vw-pager-page"> · page {safePage + 1}/{pageCount}</span>
-      </span>
-      <button className="vw-pager-btn" onClick={() => setPage(Math.min(pageCount - 1, safePage + 1))} disabled={safePage >= pageCount - 1}>
+      {pageNumbers(safePage, pageCount).map((p, i) =>
+        p === null ? (
+          <span key={`gap-${i}`} className="vw-page-gap" aria-hidden="true">…</span>
+        ) : (
+          <button key={p} className={`vw-page${p === safePage ? " vw-page-on" : ""}`}
+                  aria-current={p === safePage ? "page" : undefined}
+                  onClick={() => setPage(p)}>
+            {p + 1}
+          </button>
+        ))}
+      <button className="vw-page vw-page-nav" onClick={() => setPage(Math.min(pageCount - 1, safePage + 1))} disabled={safePage >= pageCount - 1}>
         Next ›
       </button>
+      {showFilter("pageSize") && (
+        <label className="vw-perpage" aria-label="Voices per page">
+          <select value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
+            {pageSizeOpts.map((n) => <option key={n} value={n}>{n} / page</option>)}
+          </select>
+        </label>
+      )}
     </nav>
   ) : null;
 
@@ -384,8 +397,6 @@ export function VoiceWidget({
         </div>
       )}
 
-      {pager}
-
       {pageSections.length === 0 ? (
         <p className="vw-empty">No voices match your filters.</p>
       ) : (
@@ -521,6 +532,20 @@ function uniq(xs?: string[]): string[] {
   return [...new Set((xs ?? []).filter(Boolean))].sort();
 }
 
+// Windowed page list for the numbered pager: first page, last page, and current ±1, with `null`
+// marking each collapsed gap (rendered as an ellipsis). Pages are 0-based here, 1-based in the UI.
+function pageNumbers(current: number, count: number): (number | null)[] {
+  const wanted = [...new Set([0, count - 1, current - 1, current, current + 1])]
+    .filter((p) => p >= 0 && p < count)
+    .sort((a, b) => a - b);
+  const out: (number | null)[] = [];
+  for (let i = 0; i < wanted.length; i++) {
+    if (i && wanted[i] - wanted[i - 1] > 1) out.push(null);
+    out.push(wanted[i]);
+  }
+  return out;
+}
+
 // Model-qualified catalog key (<engine>/<voice_id>[:<model>]) — the documented matching form for
 // the voiceIds allowlist. NOT unique in the wild: a few rime voices repeat key+model (once per
 // language, plus literal duplicate rows), so row identity uses Row._uid — this plus a collision
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 0641ee230d..60da05d958 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -122,14 +122,20 @@
 }
 
 /* Pagination controls + empty state. */
-.vw-pager { display: flex; align-items: center; justify-content: center; gap: .75rem;
-  margin: 1rem 0; flex-wrap: wrap; }
-.vw-pager-btn { padding: .4rem .8rem; background: var(--grayscale-2); color: var(--fg-default);
-  border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; font-size: .82rem; }
-.vw-pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
-.vw-pager-btn:disabled { opacity: .45; cursor: not-allowed; }
-.vw-pager-info { font-size: .8rem; color: var(--fg-muted); }
-.vw-pager-page { color: var(--fg-muted); }
+/* Numbered pager: ghost number buttons, inverted current page, bordered Prev/Next. */
+.vw-pager { display: flex; align-items: center; justify-content: center; gap: .3rem;
+  margin: 1.1rem 0 .25rem; flex-wrap: wrap; }
+.vw-page { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 .35rem; border-radius: 8px; font-size: .8rem; color: var(--vw-fg); background: transparent;
+  border: 1px solid transparent; cursor: pointer; }
+.vw-page:hover:not(:disabled):not(.vw-page-on) { border-color: var(--vw-line); }
+.vw-page-on { background: var(--vw-fg); color: var(--vw-bg); font-weight: 600; }
+.vw-page-nav { border-color: var(--vw-line); background: var(--vw-card); padding: 0 .65rem; }
+.vw-page-nav:disabled { opacity: .45; cursor: not-allowed; }
+.vw-page-gap { color: var(--vw-muted); padding: 0 .2rem; }
+.vw-perpage { margin-left: .6rem; }
+.vw-perpage select { font-size: .75rem; color: var(--vw-muted); background: transparent;
+  border: none; cursor: pointer; }
 .vw-empty { padding: 2rem 0; color: var(--fg-muted); font-size: .9rem; }
 
 

From 783c2723c6a61883dc3aeb82f9399c7fb0f0c0f9 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:39:48 -0400
Subject: [PATCH 16/27] Voice widget: pager review fixes (select a11y name,
 popup colors, nav hover, single-page gaps)

---
 fern/components/voice-widget/index.tsx  | 13 +++++++++----
 fern/components/voice-widget/styles.css |  2 ++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 8b837e87e1..5b4e1b42c3 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -352,8 +352,8 @@ export function VoiceWidget({
         Next ›
       </button>
       {showFilter("pageSize") && (
-        <label className="vw-perpage" aria-label="Voices per page">
-          <select value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
+        <label className="vw-perpage">
+          <select aria-label="Voices per page" value={pageSizeChoice} onChange={(e) => setPageSizeChoice(Number(e.target.value))}>
             {pageSizeOpts.map((n) => <option key={n} value={n}>{n} / page</option>)}
           </select>
         </label>
@@ -533,14 +533,19 @@ function uniq(xs?: string[]): string[] {
 }
 
 // Windowed page list for the numbered pager: first page, last page, and current ±1, with `null`
-// marking each collapsed gap (rendered as an ellipsis). Pages are 0-based here, 1-based in the UI.
+// marking each collapsed gap (rendered as an ellipsis). A gap of exactly one page emits that page
+// number instead — an ellipsis standing in for a single page reads worse than just showing it.
+// Pages are 0-based here, 1-based in the UI.
 function pageNumbers(current: number, count: number): (number | null)[] {
   const wanted = [...new Set([0, count - 1, current - 1, current, current + 1])]
     .filter((p) => p >= 0 && p < count)
     .sort((a, b) => a - b);
   const out: (number | null)[] = [];
   for (let i = 0; i < wanted.length; i++) {
-    if (i && wanted[i] - wanted[i - 1] > 1) out.push(null);
+    if (i && wanted[i] - wanted[i - 1] > 1) {
+      if (wanted[i] - wanted[i - 1] === 2) out.push(wanted[i] - 1);
+      else out.push(null);
+    }
     out.push(wanted[i]);
   }
   return out;
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 60da05d958..73031faa82 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -131,11 +131,13 @@
 .vw-page:hover:not(:disabled):not(.vw-page-on) { border-color: var(--vw-line); }
 .vw-page-on { background: var(--vw-fg); color: var(--vw-bg); font-weight: 600; }
 .vw-page-nav { border-color: var(--vw-line); background: var(--vw-card); padding: 0 .65rem; }
+.vw-page-nav:hover:not(:disabled) { border-color: var(--vw-accent); color: var(--vw-accent); }
 .vw-page-nav:disabled { opacity: .45; cursor: not-allowed; }
 .vw-page-gap { color: var(--vw-muted); padding: 0 .2rem; }
 .vw-perpage { margin-left: .6rem; }
 .vw-perpage select { font-size: .75rem; color: var(--vw-muted); background: transparent;
   border: none; cursor: pointer; }
+.vw-perpage option { background: var(--vw-card); color: var(--vw-fg); }
 .vw-empty { padding: 2rem 0; color: var(--fg-muted); font-size: .9rem; }
 
 

From 2a6db6ea0df50d5baf786021cb1537e566d99f74 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:41:13 -0400
Subject: [PATCH 17/27] Voice widget: skeleton mirrors redesigned layout,
 mobile toolbar tweaks

---
 fern/components/voice-widget/index.tsx  | 24 +++++++++++++-----------
 fern/components/voice-widget/styles.css |  5 +++--
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 5b4e1b42c3..1d727c91f9 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -485,29 +485,31 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
   );
 });
 
-// Loading state: skeleton placeholders that mirror the real header + card grid, so the layout
-// doesn't jump when the data arrives. Built from the shared <Skeleton> primitive.
+// Loading state: skeleton placeholders that mirror the real header + toolbar + card grid, so the
+// layout doesn't jump when the data arrives. Built from the shared <Skeleton> primitive.
 function VoiceWidgetSkeleton({ gridStyle }: { gridStyle?: CSSProperties }) {
   return (
     <div className="vw" aria-busy="true" aria-label="Loading voices">
       <header className="vw-head">
-        <Skeleton width={150} height={22} />
-        <Skeleton width={220} height={36} radius={10} style={{ marginLeft: "auto" }} />
+        <Skeleton width={170} height={20} />
       </header>
+      <div className="vw-filters">
+        <Skeleton width={112} height={33} radius={9} />
+        <Skeleton width={122} height={33} radius={9} />
+        <Skeleton width={104} height={33} radius={9} />
+      </div>
       <div className="vw-grid" style={gridStyle}>
         {Array.from({ length: 8 }).map((_, i) => (
           <article key={i} className="vw-card">
             <div className="vw-card-top">
-              <Skeleton width={32} height={32} radius="50%" />
+              <Skeleton width={34} height={34} radius="50%" />
               <Skeleton width="55%" height={14} />
             </div>
-            <div className="vw-meta">
-              <Skeleton width={48} height={16} radius={6} />
-              <Skeleton width={42} height={16} radius={6} />
-            </div>
-            <Skeleton width="90%" height={11} />
             <Skeleton width="70%" height={11} />
-            <Skeleton width={84} height={26} radius={6} />
+            <div className="vw-foot">
+              <Skeleton width={70} height={10} />
+              <Skeleton width={80} height={12} />
+            </div>
           </article>
         ))}
       </div>
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 73031faa82..445223b412 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -144,6 +144,7 @@
 /* On phones, collapse to a single column no matter what `columns` was set to. */
 @media (max-width: 640px) {
   .vw-grid { grid-template-columns: 1fr; }
-  .vw-filters { gap: .5rem; }
-  .vw-search { min-width: 0; }
+  .vw-filters { gap: .4rem; }
+  .vw-search { min-width: 0; flex: 1; }
+  .vw-group { margin-left: 0; }
 }

From 16d899d0036c091d2291b01f32a415bbb2f411d4 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 15:48:03 -0400
Subject: [PATCH 18/27] Voice widget: skeleton height/pill fidelity, drop dead
 vw-loading rule

---
 fern/components/voice-widget/index.tsx  | 28 ++++++++++++++-----------
 fern/components/voice-widget/styles.css |  3 ++-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 1d727c91f9..037b73008d 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -328,7 +328,7 @@ export function VoiceWidget({
   }, []);
 
   if (error) return <div className="vw vw-error">Failed to load voices: {error}</div>;
-  if (!baseRows) return <VoiceWidgetSkeleton gridStyle={gridStyle} />;
+  if (!baseRows) return <VoiceWidgetSkeleton gridStyle={gridStyle} pills={[showProvider, showFilter("language"), showFilter("gender")].filter(Boolean).length} />;
 
   // Step from safePage, not the raw page state: `page` can be stale-high after effectivePageSize
   // grows (a mobile→desktop resize isn't in filterSig), and stepping from it makes Prev appear
@@ -486,18 +486,22 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
 });
 
 // Loading state: skeleton placeholders that mirror the real header + toolbar + card grid, so the
-// layout doesn't jump when the data arrives. Built from the shared <Skeleton> primitive.
-function VoiceWidgetSkeleton({ gridStyle }: { gridStyle?: CSSProperties }) {
+// layout doesn't jump when the data arrives. Built from the shared <Skeleton> primitive. `pills`
+// is the number of toolbar pill placeholders — pass the count of controls that will actually
+// render so filters-off embeds get no phantom toolbar.
+function VoiceWidgetSkeleton({ gridStyle, pills = 3 }: { gridStyle?: CSSProperties; pills?: number }) {
   return (
     <div className="vw" aria-busy="true" aria-label="Loading voices">
       <header className="vw-head">
-        <Skeleton width={170} height={20} />
+        <Skeleton width={170} height={24} />
       </header>
-      <div className="vw-filters">
-        <Skeleton width={112} height={33} radius={9} />
-        <Skeleton width={122} height={33} radius={9} />
-        <Skeleton width={104} height={33} radius={9} />
-      </div>
+      {pills > 0 && (
+        <div className="vw-filters">
+          {Array.from({ length: pills }).map((_, i) => (
+            <Skeleton key={i} width={112} height={33} radius={9} />
+          ))}
+        </div>
+      )}
       <div className="vw-grid" style={gridStyle}>
         {Array.from({ length: 8 }).map((_, i) => (
           <article key={i} className="vw-card">
@@ -505,10 +509,10 @@ function VoiceWidgetSkeleton({ gridStyle }: { gridStyle?: CSSProperties }) {
               <Skeleton width={34} height={34} radius="50%" />
               <Skeleton width="55%" height={14} />
             </div>
-            <Skeleton width="70%" height={11} />
+            <Skeleton width="70%" height={16} />
             <div className="vw-foot">
-              <Skeleton width={70} height={10} />
-              <Skeleton width={80} height={12} />
+              <Skeleton width={70} height={14} />
+              <Skeleton width={80} height={16} />
             </div>
           </article>
         ))}
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 445223b412..9e7e18ad76 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -11,7 +11,7 @@
   --vw-radius: 10px;
   color: var(--vw-fg); font: 14px/1.45 system-ui, sans-serif;
 }
-.vw-loading, .vw-error { padding: 2rem; color: var(--vw-muted); }
+.vw-error { padding: 2rem; color: var(--vw-muted); }
 .vw-error { color: var(--error-text); }
 
 .vw-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
@@ -147,4 +147,5 @@
   .vw-filters { gap: .4rem; }
   .vw-search { min-width: 0; flex: 1; }
   .vw-group { margin-left: 0; }
+  .vw-perpage { margin-left: 0; }
 }

From 836ff0831f592e2f2b83439abd9506e3301b0773 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 16:03:24 -0400
Subject: [PATCH 19/27] Voice widget: visual-pass fixes (sticky toolbar header
 offset, icon hugs name, matching count wording)

---
 fern/components/voice-widget/index.tsx  | 2 +-
 fern/components/voice-widget/styles.css | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 037b73008d..2216e9b37f 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -369,7 +369,7 @@ export function VoiceWidget({
           {lock && baseRows[0] ? `${baseRows[0].provider} voices` : "TTS Voices"}
           <span className="vw-count">
             {baseRows.length.toLocaleString()} {baseRows.length === 1 ? "voice" : "voices"}
-            {filtered.length !== baseRows.length && <> · {filtered.length.toLocaleString()} match</>}
+            {filtered.length !== baseRows.length && <> · {filtered.length.toLocaleString()} matching</>}
           </span>
         </div>
       </header>
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 9e7e18ad76..d0cdcd5d6e 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -18,10 +18,10 @@
 .vw-title { font-size: 1.1rem; font-weight: 700; }
 .vw-count { color: var(--vw-muted); font-weight: 400; font-size: .82rem; margin-left: .4rem; }
 
-/* Toolbar: one row of pill controls; sticky at the scroll-container top while the grid scrolls
-   (the docs header offset gets verified in the visual pass). */
+/* Toolbar: one row of pill controls; sticks below the fixed docs header while the grid scrolls
+   (--header-height is set on :root by the Fern platform; 0 fallback for safety). */
 .vw-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
-  position: sticky; top: 0; background: var(--vw-bg); padding: .5rem 0; z-index: 2; }
+  position: sticky; top: var(--header-height, 0px); background: var(--vw-bg); padding: .5rem 0; z-index: 2; }
 .vw-select { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--vw-muted);
   background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: 9px; padding: .4rem .7rem; }
 .vw-select select { border: none; background: transparent; color: var(--vw-fg); font-weight: 600;
@@ -73,7 +73,8 @@
 @keyframes vw-eqb { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
 .vw-stop { display: none; }
 
-.vw-name { font-weight: 600; font-size: .92rem; letter-spacing: -.01em; flex: 1 1 auto;
+/* No flex-grow: the tooltip icon hugs the name instead of floating at the card's far edge. */
+.vw-name { font-weight: 600; font-size: .92rem; letter-spacing: -.01em; flex: 0 1 auto;
   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* Meta reads as a single muted line with middot separators — no chip backgrounds. */

From d6030d88030dbfc733b7a9642764b90a989e0fcc Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 16:10:55 -0400
Subject: [PATCH 20/27] Ignore .superpowers brainstorm artifacts

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 8bbf8e72f5..61594e6e47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@ dist
 .docs-review
 
 # Internal process artifacts (superpowers / brainstorming specs)
-docs/superpowers/
\ No newline at end of file
+docs/superpowers/
+.superpowers/
\ No newline at end of file

From 7387e4bb20da5cbbfc064a931539d04cc0ccf8d2 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Fri, 12 Jun 2026 16:16:06 -0400
Subject: [PATCH 21/27] Voice widget: final-review cleanups (merge vw-error
 rules, 12px card radius, stale comments)

---
 fern/components/voice-widget/styles.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index d0cdcd5d6e..4df03bbb61 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -8,11 +8,10 @@
   --vw-fg: var(--fg-default);
   --vw-muted: var(--fg-muted);
   --vw-accent: var(--accent);
-  --vw-radius: 10px;
+  --vw-radius: 12px;
   color: var(--vw-fg); font: 14px/1.45 system-ui, sans-serif;
 }
-.vw-error { padding: 2rem; color: var(--vw-muted); }
-.vw-error { color: var(--error-text); }
+.vw-error { padding: 2rem; color: var(--error-text); }
 
 .vw-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
 .vw-title { font-size: 1.1rem; font-weight: 700; }
@@ -119,10 +118,9 @@
 @media (prefers-reduced-motion: reduce) {
   .vw-eq { display: none; }
   .vw-stop { display: inline; }
-  .vw-card, .vw-play, .vw-copy, .vw-tooltip-icon { transition: none; }
+  .vw-card, .vw-play, .vw-tooltip-icon { transition: none; }
 }
 
-/* Pagination controls + empty state. */
 /* Numbered pager: ghost number buttons, inverted current page, bordered Prev/Next. */
 .vw-pager { display: flex; align-items: center; justify-content: center; gap: .3rem;
   margin: 1.1rem 0 .25rem; flex-wrap: wrap; }
@@ -141,7 +139,6 @@
 .vw-perpage option { background: var(--vw-card); color: var(--vw-fg); }
 .vw-empty { padding: 2rem 0; color: var(--fg-muted); font-size: .9rem; }
 
-
 /* On phones, collapse to a single column no matter what `columns` was set to. */
 @media (max-width: 640px) {
   .vw-grid { grid-template-columns: 1fr; }

From 5c7b13b50cfa1de4183300fde98d3c2d4df63b29 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Sat, 13 Jun 2026 10:03:29 -0400
Subject: [PATCH 22/27] Voice widget: wrap long voice names to 2 lines, fit
 provider label, keep Copy config single-line

---
 fern/components/voice-widget/styles.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 4df03bbb61..a02a478570 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -72,9 +72,13 @@
 @keyframes vw-eqb { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
 .vw-stop { display: none; }
 
-/* No flex-grow: the tooltip icon hugs the name instead of floating at the card's far edge. */
+/* No flex-grow: the tooltip icon hugs the name instead of floating at the card's far edge.
+   Long technical names (Google's "ar-XA-Chirp3-HD-Achernar") wrap to two lines at their hyphens
+   instead of truncating — the name is the copyable identity, so cutting it defeats the card.
+   line-clamp ellipsizes anything past two lines; the title attr still carries the full name. */
 .vw-name { font-weight: 600; font-size: .92rem; letter-spacing: -.01em; flex: 0 1 auto;
-  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  min-width: 0; line-height: 1.3; overflow: hidden; word-break: break-word;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 
 /* Meta reads as a single muted line with middot separators — no chip backgrounds. */
 .vw-meta { font-size: .78rem; color: var(--vw-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
@@ -103,11 +107,15 @@
 
 /* Footer pins to the card bottom; provider label left, copy action right. */
 .vw-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
-.vw-prov { font-size: .7rem; font-weight: 500; color: var(--vw-muted); text-transform: uppercase;
-  letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* Sentence case, not uppercase: in a 3-column card the label shares ~160px with the copy button,
+   and "GOOGLE CLOUD" in caps + tracking needs more than its share — sentence case fits all
+   providers with room to spare. Ellipsis stays as a last resort only. */
+.vw-prov { font-size: .72rem; font-weight: 500; color: var(--vw-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .vw-copy { font-size: .78rem; background: transparent; color: var(--vw-accent); border: none;
   padding: .35rem .5rem; margin: -.35rem -.5rem; /* invisible padding keeps a >=24px tap target */
-  cursor: pointer; font-weight: 500; display: inline-grid; text-align: right; }
+  cursor: pointer; font-weight: 500; display: inline-grid; text-align: right;
+  white-space: nowrap; flex: 0 0 auto; /* never wraps or shrinks — the provider label ellipsizes instead */ }
 .vw-copy > span { grid-area: 1 / 1; }
 .vw-copy .vw-copy-done { visibility: hidden; }            /* reserves space but hidden until copied */
 .vw-copy.vw-copied .vw-copy-default { visibility: hidden; }

From 0785e78d21c7556e7afe3b23d86a724aaaf53f2e Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Sun, 14 Jun 2026 17:20:50 -0400
Subject: [PATCH 23/27] =?UTF-8?q?Voice=20widget:=20card=20redesign=20?=
 =?UTF-8?q?=E2=80=94=20equal-width=20responsive=20grid,=20cleaned=20names,?=
 =?UTF-8?q?=20friendly=20meta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Responsive minmax(300px,1fr) grid: equal-width cards at every density (fixes the
  unequal-width bug from bare 1fr); auto-fill keeps partial rows equal-size.
- Display-time cleanup (commented as pipeline-bound): name split on space-bounded dash
  (0 false positives), Intl.DisplayNames language, normalized gender, per-provider model.
- Footer: provider + real model as neutral inline-code (never --code-fg, which equals the
  accent in both themes); container-query copy switch (labeled <=2 cols, icon at 3+).
- Filter out no-preview voices; delete the disabled-card state.
- Loading skeleton mirrors the new card at matching height (zero shift) + fade/rise-in.
- a11y: aria-labels, focusable aria-describedby tooltip, :focus-visible rings, AA contrast.
- Light/dark verified against real CDN data; tsc clean.
---
 fern/components/voice-widget/index.tsx  | 250 +++++++++++++++++++-----
 fern/components/voice-widget/styles.css | 210 ++++++++++++++------
 2 files changed, 352 insertions(+), 108 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 2216e9b37f..beaa737a56 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
-import type { CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type { Catalog, Manifest, VoiceRow } from "./types";
 import { Skeleton } from "../skeleton/index";
 
@@ -28,6 +28,100 @@ const MOBILE_QUERY = "(max-width: 640px)";
 // Multiples of the max column count (4) so every page fills complete rows; 4 = a single row.
 const PAGE_SIZE_OPTIONS = [4, 8, 12, 24, 48, 96];
 
+// ── Display-time data cleanup ────────────────────────────────────────────────────────────────
+// These four helpers normalize the raw catalog values for display only — the underlying data,
+// the copy payload, and the tooltips keep the originals. They are an INTERIM UI fix: the canonical
+// home for this cleanup is the generation pipeline (temp/voice_widget/providers/{elevenlabs,
+// cartesia}.py via make_voice(), plus the per-provider model strings), so re-running the pipeline
+// and re-uploading the CDN bundle is a clean lift-and-shift that retires these.
+
+// Clean display name: ElevenLabs/Cartesia bake a marketing sentence into the name
+// ("Austin Knox V3 - Good ol' Texas boy…"); split on the first SPACE-BOUNDED dash (" -"/" –"/" —")
+// and keep the leading segment. Verified against the full catalog: fires only on ElevenLabs (70) +
+// Cartesia (535), 0 false positives — Google/Polly/Azure names use spaceless hyphens
+// ("ar-XA-Chirp3-HD-Achernar", "Joanna-Neural") and are never touched. The full original stays in
+// title=/the icon tooltip. Pipeline home: providers/{elevenlabs,cartesia}.py make_voice().
+function cleanName(displayName: string): string {
+  const m = displayName.match(/\s[-–—]\s/);
+  if (!m || m.index === undefined) return displayName;
+  const lead = displayName.slice(0, m.index).trim();
+  // Guard against degenerate leads (too short/long to be a real name) — fall back to the original.
+  return lead.length >= 2 && lead.length <= 28 ? lead : displayName;
+}
+
+// Friendly language: turn a BCP-47 code ("af-ZA", "el") into an English name via Intl.DisplayNames
+// (resolves ~99% of real codes); fall back to the raw code on any miss/throw.
+function friendlyLanguage(code: string): string {
+  if (!code) return code;
+  try {
+    return new Intl.DisplayNames(["en"], { type: "language" }).of(code) || code;
+  } catch {
+    return code;
+  }
+}
+
+// Normalize gender: the catalog mixes "feminine"/"masculine" with "male"/"female"; map to the
+// display forms and HIDE "unknown" (599 voices) rather than render "Unknown". Returns "" to hide.
+function normalizeGender(gender: string): string {
+  switch (gender) {
+    case "feminine": case "female": return "Female";
+    case "masculine": case "male": return "Male";
+    case "neutral": return "Neutral";
+    case "non-binary": return "Non-binary";
+    case "unknown": case "": return "";
+    default: return gender.charAt(0).toUpperCase() + gender.slice(1);
+  }
+}
+
+// Normalize the model name: show the REAL model, lightly stripped of prefixes/suffixes that just
+// duplicate info already on the card (the provider, the voice id, the language). One rule per
+// provider (~10). This is NOT a lossy family token — it's the real model with redundant noise
+// removed. The raw value is always preserved in title=/copy. Pipeline home: the per-provider model
+// string in make_voice() (each provider module).
+const MODEL_RULES: { engines: string[]; clean: (model: string) => string }[] = [
+  // ElevenLabs: eleven_flash_v2_5 → Flash v2.5, eleven_turbo_v2 → Turbo v2, eleven_multilingual_v2
+  { engines: ["elevenlabs"], clean: (m) =>
+    titleWords(m.replace(/^eleven_/, "").replace(/_v(\d)_(\d)/, " v$1.$2").replace(/_v(\d)/, " v$1").replace(/_/g, " ")) },
+  // Cartesia: sonic-2 → Sonic 2, sonic-turbo → Sonic Turbo.
+  { engines: ["cartesia"], clean: (m) => titleWords(m.replace(/-/g, " ")) },
+  // Deepgram: aura-2-aurelia-de → Aura 2 (drop the voice+lang suffix, keep the real model family).
+  { engines: ["deepgram"], clean: (m) => {
+    const seg = m.split("-");
+    return /^\d+$/.test(seg[1] ?? "") ? `${cap(seg[0])} ${seg[1]}` : cap(seg[0]); } },
+  // MiniMax: speech-2.6-turbo → Speech 2.6 Turbo.
+  { engines: ["minimax"], clean: (m) => titleWords(m.replace(/-/g, " ")) },
+  // OpenAI: gpt-4o-mini-tts -> GPT-4o Mini. Drop the "-tts" suffix, then split into segments and
+  // re-join: the leading gpt[-4o] family token keeps its hyphen ("GPT-4o"), the rest become
+  // title-cased, space-separated words.
+  { engines: ["openai"], clean: (m) => {
+    const seg = m.replace(/-tts$/, "").split("-");
+    const head = seg[0].toLowerCase() === "gpt"
+      ? (seg[1]?.toLowerCase() === "4o" ? (seg.splice(0, 2), "GPT-4o") : (seg.shift(), "GPT"))
+      : cap(seg.shift()!);
+    return [head, ...seg.map(cap)].join(" "); } },
+  // Inworld: inworld-tts-1.5-max → TTS 1.5 Max.
+  { engines: ["inworld"], clean: (m) => titleWords(m.replace(/^inworld-/, "").replace(/-/g, " ")) },
+  // Rime: mist → Mist, mistv2 stays as-is via title-casing; arcana → Arcana.
+  { engines: ["rime"], clean: (m) => titleWords(m.replace(/v(\d)/, " v$1").replace(/-/g, " ")) },
+];
+function normalizeModel(engine: string, model: string): string {
+  const eng = engine.toLowerCase();
+  const rule = MODEL_RULES.find((r) => r.engines.includes(eng));
+  // Default (engines without a dedicated rule): just title-case the separated tokens. Slashes
+  // (e.g. a namespaced id) become spaces so it doesn't read as a path.
+  const out = (rule ? rule.clean(model) : titleWords(model.replace(/[-_/]/g, " "))).trim();
+  return out || model;
+}
+// Title-case helpers shared by the model rules. `cap` upper-cases the first letter only;
+// `titleWords` does it per word but leaves version-ish tokens ("v2.5", "4o") and already-cased
+// tokens alone, and upper-cases the common "tts" acronym.
+function cap(s: string): string { return s ? s.charAt(0).toUpperCase() + s.slice(1) : s; }
+function titleWords(s: string): string {
+  return s.split(/\s+/).filter(Boolean)
+    .map((w) => w.toLowerCase() === "tts" ? "TTS"
+      : /^v?\d/.test(w) || /[A-Z]/.test(w) ? w : cap(w)).join(" ");
+}
+
 type FilterKey = "search" | "provider" | "language" | "gender" | "group" | "pageSize";
 
 // Client-side row: a catalog voice joined with its clip, plus two precomputed fields — `_search`,
@@ -109,8 +203,10 @@ export interface VoiceWidgetProps {
   /** Cards rendered per page (page-size limit). Default: 48. Keeps the DOM small and the catalog fast. */
   pageSize?: number;
   /**
-   * Fixed number of grid columns. Default: 3. Collapses to 1 column on phones regardless. Pass 0
-   * for a responsive auto-fill grid (≈240px min per card) instead of a fixed count.
+   * Fixed number of grid columns. Default: 0 (a responsive equal-width auto-fill grid — 2-up in the
+   * docs prose column, 3-up only when the container is genuinely wide, every card a fixed ≥320px so
+   * none is squished). Pass a positive N to force exactly N equal columns. Collapses to 1 column on
+   * phones regardless.
    */
   columns?: number;
   /**
@@ -143,7 +239,7 @@ export function VoiceWidget({
   audioBaseUrl = AUDIO_BASE,
   groupBy: initialGroup = "provider",
   pageSize = DEFAULT_PAGE_SIZE,
-  columns = 3,
+  columns = 0,
   provider: lockedProvider,
   voiceIds,
   filters,
@@ -210,10 +306,15 @@ export function VoiceWidget({
   // them once here instead of re-checking the full catalog inside the per-keystroke filter below.
   // Everything downstream — dropdown options, search, grouping, pagination — then works over only
   // the voices this embed can ever show (12 on the index, one provider's voices on a provider page).
+  // Also drops no-preview voices (missing/errored clip) here so every visible card is auditionable —
+  // no dimmed "no sample" cards. Defensive: the current bundle has 0 such voices (the catalog/
+  // manifest delta is duplicate-key Rime rows sharing a clip). Caveat: if a provider's synthesis
+  // ever fails wholesale its voices silently drop from the widget — the pipeline's --diff flag
+  // catches that, and it beats showing broken cards.
   const baseRows = useMemo(() => {
     if (!allRows) return null;
-    if (!idAllowlist && !lock) return allRows;
     return allRows.filter((r) =>
+      r.clip?.status === "ok" &&
       (!idAllowlist ||
         idAllowlist.has(r.voice_id.toLowerCase()) ||
         idAllowlist.has(r.key.toLowerCase()) ||
@@ -403,11 +504,11 @@ export function VoiceWidget({
         pageSections.map((sec, i) => (
           <section key={`${sec.name}-${i}`} className="vw-section">
             {sec.name && <h3 className="vw-section-title">{sec.name} <span>{groupTotals.get(sec.name)}</span></h3>}
-            <div className="vw-grid" style={gridStyle}>
+            <FadeGrid style={gridStyle}>
               {sec.items.map((r) => (
                 <Card key={r._uid} r={r} playing={playingKey === r._uid} onPlay={play} onCopy={copyConfig} />
               ))}
-            </div>
+            </FadeGrid>
           </section>
         ))
       )}
@@ -417,12 +518,50 @@ export function VoiceWidget({
   );
 }
 
+// The loaded grid, fading/rising into the slots the skeleton held (no hard swap; reduced-motion-
+// gated in CSS). The `vw-fadein` animation (opacity + translateY) makes the grid a stacking context
+// for its duration AND — because of animation-fill-mode — permanently afterward. That would trap a
+// first-row card's sample-text popover *below* the sticky toolbar (z-index:2): the card's hover/
+// focus z-index can't escape the grid's stacking context. So drop the class once the animation ends,
+// returning the grid to a plain (z-index:auto) element whose hovered card can rise above the toolbar.
+function FadeGrid({ style, children }: { style?: CSSProperties; children: ReactNode }) {
+  const [animating, setAnimating] = useState(true);
+  return (
+    <div className={`vw-grid${animating ? " vw-fadein" : ""}`} style={style}
+         onAnimationEnd={() => setAnimating(false)}>
+      {children}
+    </div>
+  );
+}
+
+// Inline SVG icons with a shared `vw-` styling hook. Fern's <Icon>/<Tooltip> are global MDX-only
+// components — there is no @fern-* package to import them from (the components bundler only resolves
+// React + this folder), and FontAwesome ships only as Fern component props (icon="fa-…"), not a
+// global stylesheet that would style raw <i class="fa-…"> we emit here — so neither is usable from
+// this custom TSX. Self-contained SVGs (matching the design mockups) are the only path that's
+// guaranteed to render. Decorative ones are marked aria-hidden where rendered.
+const IconGlobe = () => (
+  <span className="vw-ic" aria-hidden="true">
+    <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.3" /><ellipse cx="8" cy="8" rx="2.6" ry="6.2" stroke="currentColor" strokeWidth="1.3" /><path d="M2 8h12" stroke="currentColor" strokeWidth="1.3" /></svg>
+  </span>
+);
+const IconPerson = () => (
+  <span className="vw-ic" aria-hidden="true">
+    <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="2.6" stroke="currentColor" strokeWidth="1.3" /><path d="M3.5 13c0-2.4 2-4 4.5-4s4.5 1.6 4.5 4" stroke="currentColor" strokeWidth="1.3" /></svg>
+  </span>
+);
+const IconInfo = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.4" /><path d="M8 7v4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /><circle cx="8" cy="5" r="0.8" fill="currentColor" /></svg>
+);
+const IconCopy = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4" /><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2H4a1.5 1.5 0 0 0-1.5 1.5V11A1.5 1.5 0 0 0 4 12.5" stroke="currentColor" strokeWidth="1.4" /></svg>
+);
+
 // Memoized so that playing/pausing a voice (which re-renders the widget) only re-renders the two
 // cards whose `playing` flag actually changed — not all ~60 cards on the page.
 const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
   r: Row; playing: boolean; onPlay: (r: Row) => void; onCopy: (r: VoiceRow) => Promise<boolean> | void;
 }) {
-  const disabled = !r.clip || r.clip.status !== "ok";
   const [copied, setCopied] = useState(false);
   const copyTimer = useRef<ReturnType<typeof setTimeout>>();
   useEffect(() => () => clearTimeout(copyTimer.current), []);
@@ -436,11 +575,19 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
     });
   };
 
+  // Display-time cleanup (originals stay in the catalog, the copy payload, and the title/tooltip).
+  const name = cleanName(r.display_name);
+  const language = friendlyLanguage(r.primary_language);
+  const gender = normalizeGender(r.gender);
+  const model = r.model ? normalizeModel(r.engine, r.model) : null;
+  const tipId = `vw-tip-${r._uid}`;
+
   return (
-    <article className={`vw-card${r.clip?.status === "error" || !r.clip ? " vw-disabled" : ""}`}>
+    // Per-card accessible name so screen-reader users navigate the grid as a list of named voices.
+    <article className="vw-card" aria-label={name}>
       <div className="vw-card-top">
-        <button className={`vw-play${playing ? " vw-playing" : ""}`} disabled={disabled} onClick={() => onPlay(r)}
-                aria-label={playing ? `Stop ${r.display_name}` : `Play ${r.display_name}`}>
+        <button className={`vw-play${playing ? " vw-playing" : ""}`} onClick={() => onPlay(r)}
+                aria-label={playing ? `Stop ${name}` : `Play ${name}`}>
           {playing ? (
             <>
               {/* Two glyphs for the playing state: animated bars normally, a static stop square when
@@ -450,50 +597,58 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
             </>
           ) : "▶"}
         </button>
-        <div className="vw-name" title={r.display_name}>{r.display_name}</div>
+        {/* Cleaned name; the full original stays in title= (and the tooltip below). */}
+        <div className="vw-name" title={r.display_name}>{name}</div>
         {r.clip?.sample_text && (
-          <span className="vw-tooltip-wrap">
-            <span className="vw-tooltip-icon" role="img" aria-label="Sample text" tabIndex={0}>
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
-                <path d="M8 7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-                <circle cx="8" cy="5" r="0.75" fill="currentColor" />
-              </svg>
-            </span>
-            <span className="vw-tooltip" role="tooltip">“{r.clip.sample_text}”</span>
+          // Icon-anchored sample-text popover. Focusable trigger + aria-describedby so the sample is
+          // announced (not just shown on hover); reveal is hover/focus-within (see CSS).
+          <span className="vw-tooltip-wrap" tabIndex={0} aria-describedby={tipId}>
+            <span className="vw-tooltip-icon"><IconInfo /></span>
+            <span className="vw-tooltip" id={tipId} role="tooltip">“{r.clip.sample_text}”</span>
           </span>
         )}
       </div>
+      {/* Meta — language · gender, each with a decorative type icon. "unknown" gender is hidden. */}
       <div className="vw-meta">
-        <span>{r.primary_language}</span>
-        <span className="vw-meta-dot" aria-hidden="true">·</span>
-        <span className="vw-gender">{r.gender}</span>
-        {r.model && <><span className="vw-meta-dot" aria-hidden="true">·</span><span>{r.model}</span></>}
+        <span className="vw-it"><IconGlobe />{language}</span>
+        {gender && <span className="vw-it"><IconPerson /><span className="vw-gender">{gender}</span></span>}
       </div>
-      {(!r.clip || r.clip.status === "error") &&
-        <p className="vw-note">{r.clip?.error ?? "no sample (provider key missing)"}</p>}
+      {/* Footer — PROVIDER · model (neutral inline-code) left, copy right. The left group is shrink-
+          safe (min-width:0 + model ellipsis) so it never forces the grid column wider. */}
       <div className="vw-foot">
-        <span className="vw-prov" title={r.provider}>{r.provider}</span>
-        {/* Both labels stay in the DOM and grid-stacked (see CSS) so the button keeps the width
-            of the wider one — no layout shift when it swaps to the copied state. */}
-        <button className={`vw-copy${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
-          <span className="vw-copy-default">Copy config</span>
-          <span className="vw-copy-done">✓ Copied</span>
+        <span className="vw-foot-l">
+          <span className="vw-prov" title={r.provider}>{r.provider}</span>
+          {model && <>
+            <span className="vw-foot-mid" aria-hidden="true">·</span>
+            <code className="vw-model" title={r.model!}>{model}</code>
+          </>}
+        </span>
+        {/* Both copy variants stay in the DOM; the container query (CSS) shows the labeled button at
+            ≤2 columns and the icon-only one at 3+. Payload is identical (display_name) for both. */}
+        <button className={`vw-copy-t${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite">
+          <IconCopy />{copied ? "✓ Copied" : "Copy config"}
+        </button>
+        <button className={`vw-copy-i${copied ? " vw-copied" : ""}`} onClick={handleCopy} aria-live="polite"
+                aria-label={copied ? "Copied" : "Copy config"} title="Copy config">
+          {copied ? "✓" : <IconCopy />}
         </button>
       </div>
     </article>
   );
 });
 
-// Loading state: skeleton placeholders that mirror the real header + toolbar + card grid, so the
-// layout doesn't jump when the data arrives. Built from the shared <Skeleton> primitive. `pills`
-// is the number of toolbar pill placeholders — pass the count of controls that will actually
-// render so filters-off embeds get no phantom toolbar.
+// Loading state: skeleton placeholders that mirror the NEW card on the same grid at MATCHING height,
+// so the layout doesn't jump when the data arrives (the core requirement). Built from the shared
+// <Skeleton> shimmer primitive. The footer is the height trap — the real footer is ~34px (copy
+// button + icon) — so the meta/footer placeholders carry the same min-heights as the real card
+// (.vw-sk-meta / .vw-sk-foot). `pills` is the number of toolbar pill placeholders — pass the count
+// of controls that will actually render so filters-off embeds get no phantom toolbar.
 function VoiceWidgetSkeleton({ gridStyle, pills = 3 }: { gridStyle?: CSSProperties; pills?: number }) {
   return (
     <div className="vw" aria-busy="true" aria-label="Loading voices">
       <header className="vw-head">
-        <Skeleton width={170} height={24} />
+        <Skeleton width={120} height={22} />
+        <Skeleton width={90} height={13} />
       </header>
       {pills > 0 && (
         <div className="vw-filters">
@@ -506,13 +661,20 @@ function VoiceWidgetSkeleton({ gridStyle, pills = 3 }: { gridStyle?: CSSProperti
         {Array.from({ length: 8 }).map((_, i) => (
           <article key={i} className="vw-card">
             <div className="vw-card-top">
-              <Skeleton width={34} height={34} radius="50%" />
-              <Skeleton width="55%" height={14} />
+              <Skeleton width={42} height={42} radius="50%" />
+              <Skeleton width="55%" height={15} />
+            </div>
+            {/* Meta: two (icon-dot + text-bar) pairs — language, gender. */}
+            <div className="vw-meta vw-sk-meta">
+              <Skeleton width={13} height={13} radius="50%" />
+              <Skeleton width={54} height={11} />
+              <Skeleton width={13} height={13} radius="50%" />
+              <Skeleton width={42} height={11} />
             </div>
-            <Skeleton width="70%" height={16} />
-            <div className="vw-foot">
-              <Skeleton width={70} height={14} />
-              <Skeleton width={80} height={16} />
+            {/* Footer: provider bar + copy bar, pinned at the real footer height. */}
+            <div className="vw-foot vw-sk-foot">
+              <Skeleton width={74} height={11} />
+              <Skeleton width={86} height={13} />
             </div>
           </article>
         ))}
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index a02a478570..23116d1804 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -1,21 +1,39 @@
 /* Voice widget styles, scoped under .vw so it can be dropped into the docs without clobbering host
-   styles. The palette maps onto the docs' theme-aware brand tokens so the widget follows light/dark
-   mode automatically. */
+   styles. The palette maps onto the docs' theme-aware brand tokens (fern/brand-tokens.css) so the
+   widget follows light/dark mode automatically — no hardcoded colors. The card/grid/meta/footer/
+   model/copy/skeleton rules are ported from the design mockups in
+   docs/superpowers/specs/2026-06-14-voice-widget-card-assets/, with their hardcoded hex values
+   mapped to these tokens:
+     --page  → --bg-page            --card → --bg-surface-raised   --ink  → --fg-default
+     --ink2  → --fg-secondary       --muted → --fg-muted           --line → --border-default
+     --line2 → --grayscale-a4 (lighter hairline)                   --accent → --accent
+     --codebg → --code-bg           --good → --status-success      card lift → --card-shadow/--card-inset
+   The model code is deliberately NEUTRAL (--fg-secondary), NOT --code-fg: the docs inline-<code>
+   --code-fg equals --accent in both themes (blue/turquoise), so a default <code> would render the
+   model the same color as the Copy link and read as clickable. */
 .vw {
   --vw-bg: var(--bg-page);
   --vw-card: var(--bg-surface-raised);
   --vw-line: var(--border-default);
+  /* Lighter than the card border — used only for the footer hairline. Grayscale alpha so it stays
+     subtle on both the light (#E8EAF0) and dark (#222436) card surfaces. */
+  --vw-line2: var(--grayscale-a4);
   --vw-fg: var(--fg-default);
+  --vw-fg2: var(--fg-secondary);
   --vw-muted: var(--fg-muted);
   --vw-accent: var(--accent);
   --vw-radius: 12px;
   color: var(--vw-fg); font: 14px/1.45 system-ui, sans-serif;
+  /* The widget root is the query container for the responsive Copy switch (see .vw-copy-* below). */
+  container-type: inline-size;
 }
 .vw-error { padding: 2rem; color: var(--error-text); }
 
 .vw-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
 .vw-title { font-size: 1.1rem; font-weight: 700; }
-.vw-count { color: var(--vw-muted); font-weight: 400; font-size: .82rem; margin-left: .4rem; }
+/* --fg-secondary (not --fg-muted): the count is 10.5–12.5px small text and --fg-muted (#737371)
+   is only ~3.95:1 on the light card — below the AA 4.5:1 floor. */
+.vw-count { color: var(--vw-fg2); font-weight: 400; font-size: .82rem; margin-left: .4rem; }
 
 /* Toolbar: one row of pill controls; sticks below the fixed docs header while the grid scrolls
    (--header-height is set on :root by the Fern platform; 0 fallback for safety). */
@@ -31,7 +49,7 @@
 .vw-search { padding: .4rem .7rem; min-width: 200px; background: var(--vw-card);
   border: 1px solid var(--vw-line); border-radius: 9px; color: inherit; font-size: .8rem; }
 
-/* Group toggle as a segmented control: gray track, raised white active segment. */
+/* Group toggle as a segmented control: gray track, raised active segment. */
 .vw-group { display: flex; margin-left: auto; background: var(--grayscale-a3); border-radius: 9px; padding: 2px; }
 .vw-group button { padding: .35rem .7rem; background: transparent; color: var(--vw-muted); border: none;
   border-radius: 7px; cursor: pointer; font-size: .78rem; }
@@ -42,92 +60,156 @@
 .vw-section-title { font-size: .85rem; font-weight: 650; margin: .5rem 0 .6rem; text-transform: capitalize; }
 .vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .3rem; }
 
-/* Column count is driven by --vw-cols (set inline by the `columns` prop; falls back to responsive
-   auto-fill). Defining the template here lets the mobile media query override it regardless. */
+/* Equal-width responsive grid. The column minimum is a FIXED width (set via --vw-col-min), not
+   `auto`: a bare 1fr track is minmax(auto, 1fr) whose minimum is the content's min-content width,
+   so a card with a longer nowrap footer would force its column wider and others narrower (the
+   unequal-width bug). Flooring the minimum guarantees every column — and every card — is exactly
+   equal. `auto-fill` (not auto-fit) keeps a partial last row's cards the same size, left-aligned
+   with trailing space, instead of stretching them to a different width.
+   The 300px floor is tuned to the docs prose column (Fern's w-content-width = 640px): 2×300 + the
+   12px gap = 612 ≤ 640, so the prose column reliably shows 2-up (cards ~314px — comfortably not
+   squished); a genuinely wide container goes 3-up at ≥924px (3×300 + gaps), where the copy switch
+   below also flips. The `columns` prop overrides --vw-cols to a fixed N with --vw-col-min:0 →
+   repeat(N, minmax(0,1fr)); defining the template here (not inline) lets the mobile media query
+   collapse to one column regardless. */
 .vw-grid { display: grid; gap: .75rem;
-  grid-template-columns: repeat(var(--vw-cols, auto-fill), minmax(var(--vw-col-min, 240px), 1fr)); }
+  grid-template-columns: repeat(var(--vw-cols, auto-fill), minmax(var(--vw-col-min, 300px), 1fr)); }
+
+/* Card: uniform shell. overflow:visible so the sample-text popover can escape the card; the grid's
+   default align-items:stretch sizes every card in a row to the tallest, and the footer's
+   margin-top:auto (below) pins it to the bottom so footers line up across the row. The light card
+   (#E8EAF0) is slightly darker than the page, so the lift comes from the border + --card-shadow;
+   --card-inset adds a top highlight in dark mode where the card (#222436) is already lighter. */
 .vw-card { background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: var(--vw-radius);
-  padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overflow: visible; position: relative;
+  padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 12px; overflow: visible;
+  position: relative; box-shadow: var(--card-shadow), var(--card-inset);
   transition: border-color .15s ease, box-shadow .15s ease; }
-.vw-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: var(--grayscale-a4); }
-.vw-card.vw-disabled { opacity: .6; }
-.vw-card-top { display: flex; align-items: center; gap: .6rem; min-width: 0; }
+.vw-card:hover { box-shadow: var(--card-hover-shadow), var(--card-inset-hover); border-color: var(--card-hover-border); }
+/* While a card is hovered/focused (the only states its sample-text popover opens), lift the whole
+   card into a stacking context above the sticky toolbar. The toolbar has z-index:2, which would
+   otherwise paint over a first-row card's popover (the popover's own z-index can't escape the card's
+   default z-index:auto level). 3 > 2 is enough; scoped to hover/focus so it never affects layout. */
+.vw-card:hover, .vw-card:focus-within { z-index: 3; }
+.vw-card-top { display: flex; align-items: center; gap: 12px; }
 
-/* Ghost play button: outline at rest, fills with the accent while its clip plays. */
-.vw-play { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
-  background: transparent; color: var(--vw-fg); border: 1.5px solid var(--vw-line); font-size: .72rem;
+/* Ghost play button: 42px outline circle at rest, fills with the accent while its clip plays. */
+.vw-play { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
+  background: transparent; color: var(--vw-fg); border: 1.5px solid var(--vw-line); font-size: 12px;
   display: inline-flex; align-items: center; justify-content: center;
   transition: background .15s ease, border-color .15s ease, color .15s ease; }
-.vw-play:hover:not(:disabled):not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
+.vw-play:hover:not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
 .vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
-.vw-play:disabled { border-style: dashed; color: var(--vw-muted); cursor: not-allowed; }
 
-/* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below). */
-.vw-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
+/* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below).
+   Mirrors the mockup's @keyframes vw-eqb (staggered scaleY bars). */
+.vw-eq { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 13px; }
 .vw-eq i { width: 2.5px; background: currentColor; border-radius: 1px; transform-origin: 50% 100%;
   animation: vw-eqb 1s ease-in-out infinite; }
 .vw-eq i:nth-child(1) { height: 60%; }
 .vw-eq i:nth-child(2) { height: 100%; animation-delay: .2s; }
-.vw-eq i:nth-child(3) { height: 40%; animation-delay: .4s; }
+.vw-eq i:nth-child(3) { height: 45%; animation-delay: .4s; }
 @keyframes vw-eqb { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
 .vw-stop { display: none; }
 
-/* No flex-grow: the tooltip icon hugs the name instead of floating at the card's far edge.
-   Long technical names (Google's "ar-XA-Chirp3-HD-Achernar") wrap to two lines at their hyphens
-   instead of truncating — the name is the copyable identity, so cutting it defeats the card.
-   line-clamp ellipsizes anything past two lines; the title attr still carries the full name. */
-.vw-name { font-weight: 600; font-size: .92rem; letter-spacing: -.01em; flex: 0 1 auto;
-  min-width: 0; line-height: 1.3; overflow: hidden; word-break: break-word;
+/* Name is the copyable identity, so it's never ellipsized mid-name: cleaned community names sit on
+   one line, only the longest untouched technical names (cmn-CN-Chirp3-HD-Zubenelgenubi) take a
+   graceful 2nd line at their hyphens. The full original name lives in title=/the icon tooltip. */
+.vw-name { flex: 1; min-width: 0; font-weight: 650; font-size: 15.5px; letter-spacing: -.012em;
+  line-height: 1.25; overflow: hidden; word-break: break-word;
   display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 
-/* Meta reads as a single muted line with middot separators — no chip backgrounds. */
-.vw-meta { font-size: .78rem; color: var(--vw-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
-.vw-meta-dot { color: var(--vw-line); }
+/* Meta line — perceptual identity: language · gender, each with a small type icon. */
+.vw-meta { display: flex; align-items: center; gap: 13px; font-size: 12.5px; color: var(--vw-fg2);
+  min-height: 15px; }
+.vw-meta .vw-it { display: inline-flex; align-items: center; gap: 5px; }
 .vw-gender { text-transform: capitalize; }
+/* Small decorative type icons (globe/person) — muted, sized 13px. aria-hidden in the markup. */
+.vw-ic { display: inline-flex; align-items: center; color: var(--vw-muted); flex: 0 0 auto; }
+.vw-ic svg { width: 13px; height: 13px; }
 
-/* Transcript tooltip is anchored to the card (the nearest positioned ancestor), so it spans the
-   card's width just above it — always fits the grid column, can't escape the viewport. */
-.vw-tooltip-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; }
-.vw-tooltip-icon { cursor: help; color: var(--vw-muted); display: inline-flex; align-items: center;
-  transition: color .15s ease; }
-.vw-tooltip-wrap:hover .vw-tooltip-icon,
-.vw-tooltip-wrap:focus-within .vw-tooltip-icon { color: var(--vw-accent); }
-.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: .5rem; right: .5rem;
-  width: auto; padding: .5rem .7rem;
-  background: var(--vw-card); color: var(--fg-secondary);
-  border: 1px solid var(--vw-line); border-radius: 8px;
-  font-size: .78rem; font-style: italic; line-height: 1.45;
-  box-shadow: 0 6px 20px rgba(0,0,0,.15); z-index: 20; pointer-events: none; }
-.vw-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+/* Sample-text popover: a fixed-width (210px), icon-anchored disclosure clamped to the card edge —
+   consistent at any column count and independent of name length (it positions on the icon, not the
+   card width). Revealed on hover/focus-within; the trigger carries aria-describedby → .vw-tooltip. */
+.vw-tooltip-wrap { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center;
+  color: var(--vw-muted); cursor: help; transition: color .15s ease; }
+.vw-tooltip-wrap:hover, .vw-tooltip-wrap:focus-within { color: var(--vw-accent); }
+.vw-tooltip-icon { display: inline-flex; }
+.vw-tooltip-icon svg { width: 15px; height: 15px; }
+.vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); right: -5px; width: 210px;
+  background: var(--vw-card); color: var(--vw-fg2);
+  border: 1px solid var(--vw-line); border-radius: 9px; padding: 8px 11px;
+  font-size: 11.5px; font-style: italic; line-height: 1.45;
+  box-shadow: var(--card-hover-shadow); z-index: 30; pointer-events: none; }
+.vw-tooltip::after { content: ""; position: absolute; top: 100%; right: 14px;
   border: 6px solid transparent; border-top-color: var(--vw-card); }
 .vw-tooltip-wrap:hover .vw-tooltip,
 .vw-tooltip-wrap:focus-within .vw-tooltip { display: block; }
 
-.vw-note { margin: 0; font-size: .72rem; color: var(--warning-text); }
-
-/* Footer pins to the card bottom; provider label left, copy action right. */
-.vw-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
-/* Sentence case, not uppercase: in a 3-column card the label shares ~160px with the copy button,
-   and "GOOGLE CLOUD" in caps + tracking needs more than its share — sentence case fits all
-   providers with room to spare. Ellipsis stays as a last resort only. */
-.vw-prov { font-size: .72rem; font-weight: 500; color: var(--vw-muted);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.vw-copy { font-size: .78rem; background: transparent; color: var(--vw-accent); border: none;
-  padding: .35rem .5rem; margin: -.35rem -.5rem; /* invisible padding keeps a >=24px tap target */
-  cursor: pointer; font-weight: 500; display: inline-grid; text-align: right;
-  white-space: nowrap; flex: 0 0 auto; /* never wraps or shrinks — the provider label ellipsizes instead */ }
-.vw-copy > span { grid-area: 1 / 1; }
-.vw-copy .vw-copy-done { visibility: hidden; }            /* reserves space but hidden until copied */
-.vw-copy.vw-copied .vw-copy-default { visibility: hidden; }
-.vw-copy.vw-copied .vw-copy-done { visibility: visible; }
-.vw-copy.vw-copied { color: #16a34a; }  /* green check, readable on light + dark */
-
-/* Reduced motion: static stop glyph instead of animated bars; no hover/state transitions. */
+/* Footer — config identity. Hairline top border; provider · inline-code model on the left, copy on
+   the right. margin-top:auto pins it to the card bottom so footers align across a row. */
+.vw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--vw-line2); }
+/* Shrink-safe left group: min-width:0 + the model ellipsis below let it shrink instead of forcing
+   the grid column wider (the unequal-width fix). */
+.vw-foot-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.vw-foot-mid { color: var(--vw-muted); opacity: .5; flex: 0 0 auto; }
+/* --fg-secondary (not --fg-muted): 10.5px provider label needs AA ≥4.5:1 on the light card. */
+.vw-prov { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
+  color: var(--vw-fg2); white-space: nowrap; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
+/* Model: the real (normalized) model as NEUTRAL inline-code — mono + --code-bg + --fg-secondary fg
+   (NOT --code-fg, which equals --accent and would read as clickable). Single-line, ellipsizes at the
+   tail if unusually long; the raw model stays in title=/copy. */
+.vw-model { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vw-fg2);
+  background: var(--code-bg); border-radius: 5px; padding: 1px 6px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+
+/* Responsive copy. The trigger is column count, not card width (cards are ~314px+ at every density),
+   so a container query on the widget root toggles which variant shows: labeled "Copy config" at
+   ≤2 columns (container < 924px, incl. the docs prose column), icon-only clipboard at 3+ columns
+   (≥ 924px = 3 × 300px + gaps — the same width the grid flips to 3-up). Both stay in the DOM; the
+   container query toggles display. The copied state greens via --status-success (theme-aware). */
+.vw-copy-t { font-size: 12.5px; color: var(--vw-accent); background: none; border: none; font-weight: 550;
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: 0 0 auto;
+  padding: 0; white-space: nowrap; }
+.vw-copy-t svg { width: 13px; height: 13px; }
+.vw-copy-i { display: none; flex: 0 0 auto; width: 28px; height: 28px; margin: -4px -4px -4px 0;
+  border: none; background: none; color: var(--vw-accent); border-radius: 7px;
+  align-items: center; justify-content: center; cursor: pointer; }
+.vw-copy-i svg { width: 15px; height: 15px; }
+.vw-copy-t.vw-copied, .vw-copy-i.vw-copied { color: var(--status-success); }
+@container (min-width: 924px) {
+  .vw-copy-t { display: none; }
+  .vw-copy-i { display: inline-flex; }
+}
+
+/* Smooth resolve: the loaded grid fades/rises into the slots the skeleton held, instead of a hard
+   swap. Gated behind reduced-motion below. */
+.vw-fadein { animation: vw-in .45s cubic-bezier(.2,.7,.2,1) both; }
+@keyframes vw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+/* Skeleton: the loading card mirrors the real one on the same grid at MATCHING height (zero layout
+   shift). The footer is the height trap — these min-heights pin the meta/footer sections to the real
+   card's values (~15px meta, ~34px footer) so the skeleton card height equals the loaded one. */
+.vw-sk-meta { min-height: 15px; }
+.vw-sk-foot { min-height: 34px; }
+
+/* Reduced motion: static stop glyph instead of animated bars, no transitions, no fade-in.
+   (The shimmer primitive disables its own animation in components/skeleton/styles.css.) */
 @media (prefers-reduced-motion: reduce) {
   .vw-eq { display: none; }
   .vw-stop { display: inline; }
-  .vw-card, .vw-play, .vw-tooltip-icon { transition: none; }
+  .vw-card, .vw-play, .vw-tooltip-wrap { transition: none; }
+  .vw-fadein { animation: none; }
+}
+
+/* Visible focus rings on every interactive control, both themes (2px accent outline + offset). */
+.vw-play:focus-visible, .vw-copy-t:focus-visible, .vw-copy-i:focus-visible,
+.vw-tooltip-wrap:focus-visible, .vw-page:focus-visible,
+.vw-select select:focus-visible, .vw-search:focus-visible,
+.vw-group button:focus-visible, .vw-perpage select:focus-visible {
+  outline: 2px solid var(--vw-accent); outline-offset: 2px; border-radius: 8px;
 }
+.vw-play:focus-visible { border-radius: 50%; }
 
 /* Numbered pager: ghost number buttons, inverted current page, bordered Prev/Next. */
 .vw-pager { display: flex; align-items: center; justify-content: center; gap: .3rem;
@@ -145,7 +227,7 @@
 .vw-perpage select { font-size: .75rem; color: var(--vw-muted); background: transparent;
   border: none; cursor: pointer; }
 .vw-perpage option { background: var(--vw-card); color: var(--vw-fg); }
-.vw-empty { padding: 2rem 0; color: var(--fg-muted); font-size: .9rem; }
+.vw-empty { padding: 2rem 0; color: var(--vw-fg2); font-size: .9rem; }
 
 /* On phones, collapse to a single column no matter what `columns` was set to. */
 @media (max-width: 640px) {

From adee08a1982df836515c4d01764e83d6cc5ee359 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 06:17:16 -0400
Subject: [PATCH 24/27] Voice widget cards: fix sticky-header hover overlap +
 Firefox non-Latin fonts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drop the card's hover/focus z-index. It made the whole card a stacking context above the sticky
  toolbar (z-index:2), so a card scrolled partly under the toolbar painted OVER it on hover. The
  card now stays below the toolbar; the sample-text popover (z-index:30) still escapes above it on
  its own via the .vw query-container stacking context. Verified: cardZ→auto, popover still shows.
- Inherit the docs body font (Lexend + its fallback chain) instead of overriding with system-ui,
  whose Firefox fallback tofu'd non-Latin voice names (Arabic, Amharic/Ethiopic). Verified rendering.
---
 fern/components/voice-widget/styles.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 23116d1804..0adbf13176 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -23,7 +23,10 @@
   --vw-muted: var(--fg-muted);
   --vw-accent: var(--accent);
   --vw-radius: 12px;
-  color: var(--vw-fg); font: 14px/1.45 system-ui, sans-serif;
+  /* Size/line-height only — DON'T override font-family: inherit the docs body font (Lexend + its
+     fallback chain). The previous `system-ui` override tofu'd non-Latin voice names (e.g. Azure's
+     Amharic/Ethiopic names) on Firefox, whose system-ui fallback doesn't cover those scripts. */
+  color: var(--vw-fg); font-size: 14px; line-height: 1.45;
   /* The widget root is the query container for the responsive Copy switch (see .vw-copy-* below). */
   container-type: inline-size;
 }
@@ -85,11 +88,11 @@
   position: relative; box-shadow: var(--card-shadow), var(--card-inset);
   transition: border-color .15s ease, box-shadow .15s ease; }
 .vw-card:hover { box-shadow: var(--card-hover-shadow), var(--card-inset-hover); border-color: var(--card-hover-border); }
-/* While a card is hovered/focused (the only states its sample-text popover opens), lift the whole
-   card into a stacking context above the sticky toolbar. The toolbar has z-index:2, which would
-   otherwise paint over a first-row card's popover (the popover's own z-index can't escape the card's
-   default z-index:auto level). 3 > 2 is enough; scoped to hover/focus so it never affects layout. */
-.vw-card:hover, .vw-card:focus-within { z-index: 3; }
+/* The card deliberately does NOT take a z-index on hover. Doing so made the whole card a stacking
+   context above the sticky toolbar (z-index:2), so a card scrolled partly under the toolbar painted
+   OVER it on hover. The card stays at z-index:auto (below the toolbar); only the sample-text popover
+   (z-index:30) needs to escape, and it does so on its own via the .vw query-container stacking
+   context — so the popover paints above the toolbar while the card body never does. */
 .vw-card-top { display: flex; align-items: center; gap: 12px; }
 
 /* Ghost play button: 42px outline circle at rest, fills with the accent while its clip plays. */

From eda7cda15f74f28c150edaee5b43d58e6b0cfcf0 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 08:39:00 -0400
Subject: [PATCH 25/27] bug fixes

---
 fern/components/voice-widget/index.tsx  |  7 ++---
 fern/components/voice-widget/styles.css | 35 +++++++++++++++++++++----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index beaa737a56..fcbd36daf1 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -597,14 +597,15 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
             </>
           ) : "▶"}
         </button>
-        {/* Cleaned name; the full original stays in title= (and the tooltip below). */}
-        <div className="vw-name" title={r.display_name}>{name}</div>
+        {/* Cleaned name; the full original stays in title= (and the tooltip below). lang tags the
+            native script for screen-reader pronunciation and language-appropriate glyph forms. */}
+        <div className="vw-name" lang={r.primary_language || undefined} title={r.display_name}>{name}</div>
         {r.clip?.sample_text && (
           // Icon-anchored sample-text popover. Focusable trigger + aria-describedby so the sample is
           // announced (not just shown on hover); reveal is hover/focus-within (see CSS).
           <span className="vw-tooltip-wrap" tabIndex={0} aria-describedby={tipId}>
             <span className="vw-tooltip-icon"><IconInfo /></span>
-            <span className="vw-tooltip" id={tipId} role="tooltip">“{r.clip.sample_text}”</span>
+            <span className="vw-tooltip" id={tipId} role="tooltip" lang={r.primary_language || undefined}>“{r.clip.sample_text}”</span>
           </span>
         )}
       </div>
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 0adbf13176..3f44e6cd68 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -1,3 +1,14 @@
+/* Non-Latin voice-name fallback. The catalog carries ~190 names across ~24 scripts (Arabic, CJK,
+   Devanagari, Ethiopic, Hangul, …) and the docs body font (Lexend, Latin-only subset) can't render
+   them — Firefox then walks the SYSTEM font list and tofu's on any script the OS lacks (Chrome
+   hardcodes per-script fonts so it hid the bug). Fix: serve Noto via the Google Fonts CSS API, which
+   returns one @font-face per script EACH WITH ITS OWN unicode-range, so the browser downloads only
+   the slices whose glyphs actually appear (CJK is the only heavy one and is itself range-sliced).
+   This needs no build-time knowledge of the glyph set — right for a runtime CDN catalog. The families
+   are wired into --vw-i18n-font below and used per-character after the body font (Latin still Lexend).
+   If a CSP ever blocks fonts.googleapis.com/gstatic.com, self-host range-subsetted Noto instead. */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&family=Noto+Sans+Bengali:wght@400;700&family=Noto+Sans+Tamil:wght@400;700&family=Noto+Sans+Telugu:wght@400;700&family=Noto+Sans+Kannada:wght@400;700&family=Noto+Sans+Malayalam:wght@400;700&family=Noto+Sans+Gujarati:wght@400;700&family=Noto+Sans+Gurmukhi:wght@400;700&family=Noto+Sans+Oriya:wght@400;700&family=Noto+Sans+Sinhala:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans+Lao:wght@400;700&family=Noto+Sans+Khmer:wght@400;700&family=Noto+Sans+Myanmar:wght@400;700&family=Noto+Sans+Ethiopic:wght@400;700&family=Noto+Sans+Armenian:wght@400;700&family=Noto+Sans+Georgian:wght@400;700&family=Noto+Sans+Canadian+Aboriginal:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');
+
 /* Voice widget styles, scoped under .vw so it can be dropped into the docs without clobbering host
    styles. The palette maps onto the docs' theme-aware brand tokens (fern/brand-tokens.css) so the
    widget follows light/dark mode automatically — no hardcoded colors. The card/grid/meta/footer/
@@ -23,9 +34,22 @@
   --vw-muted: var(--fg-muted);
   --vw-accent: var(--accent);
   --vw-radius: 12px;
-  /* Size/line-height only — DON'T override font-family: inherit the docs body font (Lexend + its
-     fallback chain). The previous `system-ui` override tofu'd non-Latin voice names (e.g. Azure's
-     Amharic/Ethiopic names) on Firefox, whose system-ui fallback doesn't cover those scripts. */
+  /* i18n name stack: the docs body font FIRST (Latin names stay Lexend), then the Noto script
+     families (loaded by the @import above) for per-character fallback on non-Latin glyphs. Applied
+     only to the elements that render catalog text (.vw-name, .vw-tooltip) — provider/model/meta are
+     always Latin. CJK order is SC→JP→KR: the catalog's Han names are mostly Chinese (zh/wuu/yue),
+     so SC first gives the majority correct glyph shapes; Japanese kanji names render with SC Han
+     forms (legible, a hair off — Han unification), Korean Hangul resolves to KR regardless. */
+  --vw-i18n-font: var(--typography-body-font-family), "Noto Sans", "Noto Sans Arabic",
+    "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil",
+    "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati",
+    "Noto Sans Gurmukhi", "Noto Sans Oriya", "Noto Sans Sinhala", "Noto Sans Thai", "Noto Sans Lao",
+    "Noto Sans Khmer", "Noto Sans Myanmar", "Noto Sans Ethiopic", "Noto Sans Armenian",
+    "Noto Sans Georgian", "Noto Sans Canadian Aboriginal", "Noto Sans SC", "Noto Sans JP",
+    "Noto Sans KR", sans-serif;
+  /* Size/line-height only — DON'T override font-family here: inherit the docs body font (Lexend) for
+     the chrome; the non-Latin fallback is scoped to .vw-name/.vw-tooltip via --vw-i18n-font. The
+     earlier `system-ui` override tofu'd non-Latin names on Firefox (system fallback misses scripts). */
   color: var(--vw-fg); font-size: 14px; line-height: 1.45;
   /* The widget root is the query container for the responsive Copy switch (see .vw-copy-* below). */
   container-type: inline-size;
@@ -117,7 +141,8 @@
 /* Name is the copyable identity, so it's never ellipsized mid-name: cleaned community names sit on
    one line, only the longest untouched technical names (cmn-CN-Chirp3-HD-Zubenelgenubi) take a
    graceful 2nd line at their hyphens. The full original name lives in title=/the icon tooltip. */
-.vw-name { flex: 1; min-width: 0; font-weight: 650; font-size: 15.5px; letter-spacing: -.012em;
+.vw-name { flex: 1; min-width: 0; font-family: var(--vw-i18n-font); font-weight: 650;
+  font-size: 15.5px; letter-spacing: -.012em;
   line-height: 1.25; overflow: hidden; word-break: break-word;
   display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 
@@ -141,7 +166,7 @@
 .vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); right: -5px; width: 210px;
   background: var(--vw-card); color: var(--vw-fg2);
   border: 1px solid var(--vw-line); border-radius: 9px; padding: 8px 11px;
-  font-size: 11.5px; font-style: italic; line-height: 1.45;
+  font-family: var(--vw-i18n-font); font-size: 11.5px; font-style: italic; line-height: 1.45;
   box-shadow: var(--card-hover-shadow); z-index: 30; pointer-events: none; }
 .vw-tooltip::after { content: ""; position: absolute; top: 100%; right: 14px;
   border: 6px solid transparent; border-top-color: var(--vw-card); }

From 7bd0119ec13943eb49f5f51fb826fde794f9c1b8 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 08:58:21 -0400
Subject: [PATCH 26/27] Voice widget: show the model name verbatim, drop the
 per-provider remapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove MODEL_RULES/normalizeModel (and the cap/titleWords helpers used only by them) — the
footer now renders r.model as-is instead of a title-cased/stripped variant. The raw value was
always what copy/title carried anyway, so this just shows the real model string everywhere.
---
 fern/components/voice-widget/index.tsx | 58 +++-----------------------
 1 file changed, 5 insertions(+), 53 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index fcbd36daf1..9b8f58c6f6 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -29,11 +29,11 @@ const MOBILE_QUERY = "(max-width: 640px)";
 const PAGE_SIZE_OPTIONS = [4, 8, 12, 24, 48, 96];
 
 // ── Display-time data cleanup ────────────────────────────────────────────────────────────────
-// These four helpers normalize the raw catalog values for display only — the underlying data,
+// These three helpers normalize the raw catalog values for display only — the underlying data,
 // the copy payload, and the tooltips keep the originals. They are an INTERIM UI fix: the canonical
 // home for this cleanup is the generation pipeline (temp/voice_widget/providers/{elevenlabs,
-// cartesia}.py via make_voice(), plus the per-provider model strings), so re-running the pipeline
-// and re-uploading the CDN bundle is a clean lift-and-shift that retires these.
+// cartesia}.py via make_voice()), so re-running the pipeline and re-uploading the CDN bundle is a
+// clean lift-and-shift that retires these. The model string is shown verbatim (no remapping).
 
 // Clean display name: ElevenLabs/Cartesia bake a marketing sentence into the name
 // ("Austin Knox V3 - Good ol' Texas boy…"); split on the first SPACE-BOUNDED dash (" -"/" –"/" —")
@@ -73,54 +73,6 @@ function normalizeGender(gender: string): string {
   }
 }
 
-// Normalize the model name: show the REAL model, lightly stripped of prefixes/suffixes that just
-// duplicate info already on the card (the provider, the voice id, the language). One rule per
-// provider (~10). This is NOT a lossy family token — it's the real model with redundant noise
-// removed. The raw value is always preserved in title=/copy. Pipeline home: the per-provider model
-// string in make_voice() (each provider module).
-const MODEL_RULES: { engines: string[]; clean: (model: string) => string }[] = [
-  // ElevenLabs: eleven_flash_v2_5 → Flash v2.5, eleven_turbo_v2 → Turbo v2, eleven_multilingual_v2
-  { engines: ["elevenlabs"], clean: (m) =>
-    titleWords(m.replace(/^eleven_/, "").replace(/_v(\d)_(\d)/, " v$1.$2").replace(/_v(\d)/, " v$1").replace(/_/g, " ")) },
-  // Cartesia: sonic-2 → Sonic 2, sonic-turbo → Sonic Turbo.
-  { engines: ["cartesia"], clean: (m) => titleWords(m.replace(/-/g, " ")) },
-  // Deepgram: aura-2-aurelia-de → Aura 2 (drop the voice+lang suffix, keep the real model family).
-  { engines: ["deepgram"], clean: (m) => {
-    const seg = m.split("-");
-    return /^\d+$/.test(seg[1] ?? "") ? `${cap(seg[0])} ${seg[1]}` : cap(seg[0]); } },
-  // MiniMax: speech-2.6-turbo → Speech 2.6 Turbo.
-  { engines: ["minimax"], clean: (m) => titleWords(m.replace(/-/g, " ")) },
-  // OpenAI: gpt-4o-mini-tts -> GPT-4o Mini. Drop the "-tts" suffix, then split into segments and
-  // re-join: the leading gpt[-4o] family token keeps its hyphen ("GPT-4o"), the rest become
-  // title-cased, space-separated words.
-  { engines: ["openai"], clean: (m) => {
-    const seg = m.replace(/-tts$/, "").split("-");
-    const head = seg[0].toLowerCase() === "gpt"
-      ? (seg[1]?.toLowerCase() === "4o" ? (seg.splice(0, 2), "GPT-4o") : (seg.shift(), "GPT"))
-      : cap(seg.shift()!);
-    return [head, ...seg.map(cap)].join(" "); } },
-  // Inworld: inworld-tts-1.5-max → TTS 1.5 Max.
-  { engines: ["inworld"], clean: (m) => titleWords(m.replace(/^inworld-/, "").replace(/-/g, " ")) },
-  // Rime: mist → Mist, mistv2 stays as-is via title-casing; arcana → Arcana.
-  { engines: ["rime"], clean: (m) => titleWords(m.replace(/v(\d)/, " v$1").replace(/-/g, " ")) },
-];
-function normalizeModel(engine: string, model: string): string {
-  const eng = engine.toLowerCase();
-  const rule = MODEL_RULES.find((r) => r.engines.includes(eng));
-  // Default (engines without a dedicated rule): just title-case the separated tokens. Slashes
-  // (e.g. a namespaced id) become spaces so it doesn't read as a path.
-  const out = (rule ? rule.clean(model) : titleWords(model.replace(/[-_/]/g, " "))).trim();
-  return out || model;
-}
-// Title-case helpers shared by the model rules. `cap` upper-cases the first letter only;
-// `titleWords` does it per word but leaves version-ish tokens ("v2.5", "4o") and already-cased
-// tokens alone, and upper-cases the common "tts" acronym.
-function cap(s: string): string { return s ? s.charAt(0).toUpperCase() + s.slice(1) : s; }
-function titleWords(s: string): string {
-  return s.split(/\s+/).filter(Boolean)
-    .map((w) => w.toLowerCase() === "tts" ? "TTS"
-      : /^v?\d/.test(w) || /[A-Z]/.test(w) ? w : cap(w)).join(" ");
-}
 
 type FilterKey = "search" | "provider" | "language" | "gender" | "group" | "pageSize";
 
@@ -579,7 +531,7 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
   const name = cleanName(r.display_name);
   const language = friendlyLanguage(r.primary_language);
   const gender = normalizeGender(r.gender);
-  const model = r.model ? normalizeModel(r.engine, r.model) : null;
+  const model = r.model || null;
   const tipId = `vw-tip-${r._uid}`;
 
   return (
@@ -621,7 +573,7 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
           <span className="vw-prov" title={r.provider}>{r.provider}</span>
           {model && <>
             <span className="vw-foot-mid" aria-hidden="true">·</span>
-            <code className="vw-model" title={r.model!}>{model}</code>
+            <code className="vw-model">{model}</code>
           </>}
         </span>
         {/* Both copy variants stay in the DOM; the container query (CSS) shows the labeled button at

From a5aef06f366b35cc7de78ea6cd25feb618130b04 Mon Sep 17 00:00:00 2001
From: Devon-White <devon.white@signalwire.com>
Date: Mon, 15 Jun 2026 09:40:59 -0400
Subject: [PATCH 27/27] =?UTF-8?q?Voice=20widget:=20SVG=20play/stop=20icons?=
 =?UTF-8?q?=20instead=20of=20=E2=96=B6/=E2=96=A0=20chars?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ▶ (U+25B6) and ■ (U+25A0) characters are emoji-capable and render as an OS color emoji
on some platforms (e.g. macOS Firefox) when no text font in the stack covers them. Replace
them with inline SVG (IconPlay/IconStop, currentColor-filled) so the play/stop glyph is a
crisp monochrome icon everywhere; the equalizer playing animation is unchanged.
---
 fern/components/voice-widget/index.tsx  | 13 +++++++++++--
 fern/components/voice-widget/styles.css |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/fern/components/voice-widget/index.tsx b/fern/components/voice-widget/index.tsx
index 9b8f58c6f6..eb46767aa6 100644
--- a/fern/components/voice-widget/index.tsx
+++ b/fern/components/voice-widget/index.tsx
@@ -508,6 +508,15 @@ const IconInfo = () => (
 const IconCopy = () => (
   <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4" /><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2H4a1.5 1.5 0 0 0-1.5 1.5V11A1.5 1.5 0 0 0 4 12.5" stroke="currentColor" strokeWidth="1.4" /></svg>
 );
+// Play/stop as inline SVG (not the "▶"/"■" chars, which are emoji-capable and render as an OS color
+// emoji on some platforms). Filled with currentColor so they follow the button's rest/hover/playing
+// color. The triangle is nudged right of viewBox-center so it reads optically centered in the circle.
+const IconPlay = () => (
+  <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.5v9l7-4.5z" fill="currentColor" /></svg>
+);
+const IconStop = () => (
+  <svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4.5" y="4.5" width="7" height="7" rx="1" fill="currentColor" /></svg>
+);
 
 // Memoized so that playing/pausing a voice (which re-renders the widget) only re-renders the two
 // cards whose `playing` flag actually changed — not all ~60 cards on the page.
@@ -545,9 +554,9 @@ const Card = memo(function Card({ r, playing, onPlay, onCopy }: {
               {/* Two glyphs for the playing state: animated bars normally, a static stop square when
                   the user prefers reduced motion (CSS swaps their display). */}
               <span className="vw-eq" aria-hidden="true"><i /><i /><i /></span>
-              <span className="vw-stop" aria-hidden="true">■</span>
+              <span className="vw-stop" aria-hidden="true"><IconStop /></span>
             </>
-          ) : "▶"}
+          ) : <IconPlay />}
         </button>
         {/* Cleaned name; the full original stays in title= (and the tooltip below). lang tags the
             native script for screen-reader pronunciation and language-appropriate glyph forms. */}
diff --git a/fern/components/voice-widget/styles.css b/fern/components/voice-widget/styles.css
index 3f44e6cd68..a59fa609c5 100644
--- a/fern/components/voice-widget/styles.css
+++ b/fern/components/voice-widget/styles.css
@@ -126,6 +126,8 @@
   transition: background .15s ease, border-color .15s ease, color .15s ease; }
 .vw-play:hover:not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
 .vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
+/* Play (rest) + stop (reduced-motion) SVG glyphs, sized to the old "▶"/"■" footprint. */
+.vw-play svg { width: 14px; height: 14px; display: block; }
 
 /* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below).
    Mirrors the mockup's @keyframes vw-eqb (staggered scaleY bars). */