Merge pull request #3 from FireBird-Technologies/fix/utils

backend/app/pipeline/media.py

@@ -64,7 +64,8 @@ def audio_overview(db: Session, job: Job, artifact: Artifact) -> dict:
     if not lines:
         raise RuntimeError("The script came back empty")
     tools = tools_for(corpus, docs)
-    voice_a, voice_b = host_voices(db, artifact.workspace_id)
+    default_a, default_b = host_voices(db, artifact.workspace_id)
+    voice_a, voice_b = params.get("host_a") or default_a, params.get("host_b") or default_b  # picked when made
     delivery = host_settings(db, artifact.workspace_id)
     script = [
         tts.Line(text=ln["text"], voice_id=voice_b if ln.get("speaker") == "host_b" else voice_a,

backend/app/routers/artifacts.py

@@ -6,7 +6,8 @@ from pydantic import BaseModel, Field
 from sqlalchemy import func, or_, select
 
 from app.auth import Ctx, get_ctx
-from app.models import Artifact, CalendarItem, Document, Job, Notebook
+from app.config import settings
+from app.models import Artifact, CalendarItem, Document, Job, Notebook, UserSavedVoice
 from app.routers.notebooks import ensure_archive_notebook
 from app.services.artifacts import latest_jobs, serialize_artifact, start_artifact
 from app.services.jobs import create_job, serialize_job
@@ -33,6 +34,9 @@ class GenerateIn(BaseModel):
     # audio_overview
     format: Literal["deep_dive", "brief", "debate"] = "deep_dive"
     minutes: int = Field(6, ge=1, le=30)
+    # the two hosts' voices, from the workspace's voices (none: the defaults)
+    host_a: str | None = Field(None, max_length=100)
+    host_b: str | None = Field(None, max_length=100)
     # video: only audiograms here; other videos are made by blog2video (/api/videos)
     style: str = "audiogram"
     audio_artifact_id: uuid.UUID | None = None
@@ -44,6 +48,18 @@ class GenerateIn(BaseModel):
     focus: str | None = Field(None, max_length=500)
 
 
+def _hosts(ctx: Ctx, body: GenerateIn) -> dict:
+    """The voices picked for an audio overview's two hosts: each one from the workspace's voices (or a default)."""
+    picked = {k: v for k, v in (("host_a", body.host_a), ("host_b", body.host_b)) if v}
+    if picked:
+        ok = set(ctx.db.scalars(select(UserSavedVoice.voice_id).where(UserSavedVoice.workspace_id == ctx.workspace.id,
+                                                                     UserSavedVoice.voice_id.in_(picked.values()))))
+        ok |= {settings.elevenlabs_voice_a, settings.elevenlabs_voice_b}
+        if any(v not in ok for v in picked.values()):
+            raise HTTPException(400, "Pick the hosts' voices from your voices")
+    return picked
+
+
 class PatchIn(BaseModel):
     title: str | None = Field(None, max_length=300)
     content: dict | None = None
@@ -102,7 +118,7 @@ def generate(body: GenerateIn, ctx: Ctx = Depends(get_ctx)):
     target = _target_title(ctx, body.notebook_id, body.document_id)
     if body.type == "audio_overview":
         check_limit(ctx.db, ctx.workspace, "audio_minutes", body.minutes)
-        params = {"format": body.format, "minutes": body.minutes}
+        params = {"format": body.format, "minutes": body.minutes, **_hosts(ctx, body)}
         title = f"Audio overview: {target}"
     elif body.type == "mind_map":
         if not body.notebook_id:

backend/app/routers/video_voices.py

@@ -1,8 +1,8 @@
 """Voices for videos: the workspace's saved voices, the built-in library, custom voices (design, clone), and its
 Notestack voices (made on the Voice page; blog2video speaks with the same ElevenLabs account).
 
-"My voices" (user_saved_voices, at most MAX_SAVED_VOICES) lives only here: blog2video's saved-voice list is one list
-for the whole account.
+"Your voices" (user_saved_voices, as many as wanted) is the one list for audio overviews and videos, and lives only
+here: blog2video's saved-voice list is one list for the whole account.
 Custom voices are made on our blog2video account, so b2v_custom_voices records which workspace made each one;
 only that workspace can use, play or delete it. Designing, keeping, cloning and samples are premium (★) and come out
 of the workspace's own daily and total counters (video_limits).
@@ -20,7 +20,7 @@ from app.models import B2VCustomVoice, UserSavedVoice
 from app.routers.videos import b2v_ready, upstream
 from app.services import b2v_access, video_limits
 from app.services import blog2video as b2v
-from app.services.notestack_voices import notestack_voices
+from app.services.notestack_voices import notestack_voices, save_notestack_voice
 
 log = logging.getLogger(__name__)
 
@@ -28,7 +28,6 @@ router = APIRouter(prefix="/api/video-voices", tags=["videos"])
 
 CLONE_MAX_BYTES = 50 * 1024 * 1024
 STARTER_VOICES = 4  # a new workspace starts with this many free built-in voices saved
-MAX_SAVED_VOICES = 5  # "My voices": what step 3 of a new video offers
 
 
 def _labels(v: dict) -> dict:
@@ -41,14 +40,6 @@ def _voice_out(v: UserSavedVoice, ours: set[str] = frozenset()) -> dict:
             "source": "notestack" if v.voice_id in ours else "blog2video"}
 
 
-def _room(ctx: Ctx) -> bool:
-    return len(_saved(ctx)) < MAX_SAVED_VOICES
-
-
-def _full() -> HTTPException:
-    return HTTPException(409, f"You can keep {MAX_SAVED_VOICES} voices. Remove one first.")
-
-
 def _library_out(v: dict, saved: set[str]) -> dict:
     labels = _labels(v)
     return {"voice_id": v["voice_id"], "name": (v.get("name") or "Voice").split(" - ")[0].strip(),
@@ -74,7 +65,7 @@ def _saved(ctx: Ctx) -> list[UserSavedVoice]:
 
 @router.get("")
 def voices(ctx: Ctx = Depends(get_ctx), _: None = Depends(b2v_ready)):
-    """My voices (for the wizard), the built-in library (to save from) and my custom voices."""
+    """Your voices (audio overviews and videos), the built-in library (to save from) and my custom voices."""
     with upstream():
         library = b2v.prebuilt_voices()
     saved = _saved(ctx)
@@ -88,7 +79,7 @@ def voices(ctx: Ctx = Depends(get_ctx), _: None = Depends(b2v_ready)):
                             .order_by(B2VCustomVoice.created_at.desc()))
     mine = notestack_voices(ctx.db, ctx.workspace.id)
     ours = {v["voice_id"] for v in mine}
-    return {"saved": [_voice_out(v, ours) for v in saved], "max_saved": MAX_SAVED_VOICES,
+    return {"saved": [_voice_out(v, ours) for v in saved],
             "notestack": [{**v, "saved": v["voice_id"] in ids} for v in mine],
             "library": [_library_out(v, ids) for v in library if v.get("voice_id")],
             "custom": [{"id": c.b2v_custom_voice_id, "voice_id": c.voice_id, "name": c.name, "source": c.source,
@@ -103,16 +94,12 @@ class SaveIn(BaseModel):
 def save_voice(body: SaveIn, ctx: Ctx = Depends(get_ctx), _: None = Depends(b2v_ready)):
     if ctx.db.get(UserSavedVoice, {"workspace_id": ctx.workspace.id, "voice_id": body.voice_id}):
         return _voice_out(ctx.db.get(UserSavedVoice, {"workspace_id": ctx.workspace.id, "voice_id": body.voice_id}))
-    if not _room(ctx):
-        raise _full()
     custom = ctx.db.scalar(select(B2VCustomVoice).where(B2VCustomVoice.voice_id == body.voice_id,
                                                         B2VCustomVoice.workspace_id == ctx.workspace.id))
     mine = next((v for v in notestack_voices(ctx.db, ctx.workspace.id) if v["voice_id"] == body.voice_id), None)
     if mine:
-        # A Notestack voice: premium, like a custom voice. No preview link (the Voice page plays it).
-        video_limits.require_premium(ctx.db, ctx.workspace, "Custom voices")
-        row = ctx.db.merge(UserSavedVoice(workspace_id=ctx.workspace.id, voice_id=mine["voice_id"],
-                                          name=mine["name"][:255], premium=True, is_custom=True))
+        # A Notestack voice: saved on any plan, premium to use in a video. No preview link (the Voice page plays it).
+        row = save_notestack_voice(ctx.db, ctx.workspace.id, mine["voice_id"], mine["name"])
         ctx.db.commit()
         return _voice_out(row, {row.voice_id})
     if custom:
@@ -191,13 +178,11 @@ def _record_custom(ctx: Ctx, made: dict, source: str) -> dict:
                          voice_id=made["voice_id"], name=(made.get("name") or "My voice")[:255], source=source,
                          preview_url=made.get("preview_url"))
     ctx.db.add(row)
-    saved = _room(ctx)  # kept in My voices only while there is room; otherwise added from the list later
-    if saved:
-        ctx.db.merge(UserSavedVoice(workspace_id=ctx.workspace.id, voice_id=row.voice_id, name=row.name,
-                                    preview_url=row.preview_url, premium=True, is_custom=True))
+    ctx.db.merge(UserSavedVoice(workspace_id=ctx.workspace.id, voice_id=row.voice_id, name=row.name,
+                                preview_url=row.preview_url, premium=True, is_custom=True))  # a new voice is saved
     ctx.db.commit()
     return {"id": row.b2v_custom_voice_id, "voice_id": row.voice_id, "name": row.name, "source": source,
-            "preview_url": row.preview_url, "saved": saved}
+            "preview_url": row.preview_url, "saved": True}
 
 
 def _make_custom(ctx: Ctx, source: str, send) -> dict:

backend/app/routers/voice.py

@@ -12,7 +12,7 @@ from app.config import settings
 from app.models import Document, Job, Upload, VoiceConsent, VoiceProfile
 from app.services import tts
 from app.services.jobs import create_job, record_usage, serialize_job
-from app.services.notestack_voices import forget_video_voice
+from app.services.notestack_voices import forget_video_voice, save_notestack_voice
 from app.services.plans import effective_plan, plan_limit_error
 from app.services.storage import storage
 
@@ -215,6 +215,7 @@ async def add_from_library(body: LibraryAddIn, ctx: Ctx = Depends(get_ctx)):
     if body.use_as in ("host_a", "host_b"):
         voices[body.use_as] = voice_id
     vp.host_voices = voices
+    save_notestack_voice(ctx.db, ctx.workspace.id, voice_id, body.name)  # a voice added is a voice saved
     ctx.db.commit()
     return {"voice_id": voice_id, **_serialize(ctx)}
 
@@ -293,6 +294,7 @@ async def save_design(body: DesignSaveIn, ctx: Ctx = Depends(get_ctx)):
     if body.use_as in ("host_a", "host_b"):
         voices[body.use_as] = voice_id
     vp.host_voices = voices
+    save_notestack_voice(ctx.db, ctx.workspace.id, voice_id, body.name)  # a voice made is a voice saved
     ctx.db.commit()
     return {"voice_id": voice_id, **_serialize(ctx)}
 

backend/app/services/notestack_voices.py

@@ -31,6 +31,18 @@ def is_notestack_voice(db: Session, workspace_id: uuid.UUID, voice_id: str) -> b
     return any(v["voice_id"] == voice_id for v in notestack_voices(db, workspace_id))
 
 
+def save_notestack_voice(db: Session, workspace_id: uuid.UUID, voice_id: str, name: str) -> UserSavedVoice:
+    """Put a Notestack voice in the workspace's voices (the one list for audio and video), once. Saving needs no plan:
+    using it in a video is premium (b2v_access.check_voice). No preview link: it is played through /api/voice/preview.
+    The caller commits."""
+    row = db.get(UserSavedVoice, {"workspace_id": workspace_id, "voice_id": voice_id})
+    if row is None:
+        row = UserSavedVoice(workspace_id=workspace_id, voice_id=voice_id, name=(name or "Voice")[:255], premium=True,
+                             is_custom=True)
+        db.add(row)
+    return row
+
+
 def forget_video_voice(db: Session, workspace_id: uuid.UUID, voice_id: str) -> None:
     """A Notestack voice that is gone (clone revoked) leaves the workspace's saved video voices too."""
     db.execute(delete(UserSavedVoice).where(UserSavedVoice.workspace_id == workspace_id,

backend/app/worker.py

@@ -61,6 +61,7 @@ from app.services.jobs import (
     stale_jobs,
     update_job,
 )
+from app.services.notestack_voices import save_notestack_voice
 from app.services.plans import effective_plan
 from app.services.renderer import PermanentJobError, request_render
 from app.services.storage import keys, storage
@@ -212,13 +213,15 @@ def handle_voice_clone(db: Session, job: Job):
     consent.elevenlabs_voice_id = voice_id
     db.commit()
 
-    # Make the new voice host A and record a short preview so the writer can judge it straight away.
+    # Save the new voice to the workspace's voices (and keep it as the default host A), then record a short preview
+    # so the writer can judge it straight away.
     update_job(db, job, progress=0.7, message="Recording a preview in your voice")
     vp = db.scalar(select(VoiceProfile).where(VoiceProfile.workspace_id == consent.workspace_id))
     if not vp:
         vp = VoiceProfile(workspace_id=consent.workspace_id)
         db.add(vp)
     vp.host_voices = {**(vp.host_voices or {}), "host_a": voice_id}
+    save_notestack_voice(db, consent.workspace_id, voice_id, "My voice")
     db.commit()
     preview_text = job.params.get("preview_text") or (
         "Hi, this is my Notestack voice. From now on, my audio overviews and videos can sound like me.")

backend/tests/test_buildout.py

@@ -18,6 +18,7 @@ from app.models import (
     Source,
     TrackedLink,
     UsageEvent,
+    UserSavedVoice,
     Workspace,
 )
 from app.services.email import ConsoleEmailProvider
@@ -766,7 +767,13 @@ def test_artifact_ownership(client, auth, db_session):
 # Voice pipeline (ElevenLabs stubbed)
 
 
-def test_voice_library_preview_and_script(client, auth, monkeypatch, feed, run_jobs):
+def saved_voices(db_session) -> dict[str, str]:
+    """The workspace's voices (the one list for audio and video): voice id -> name."""
+    db_session.expire_all()
+    return {v.voice_id: v.name for v in db_session.query(UserSavedVoice)}
+
+
+def test_voice_library_preview_and_script(client, auth, monkeypatch, feed, run_jobs, db_session):
     from app.config import settings
     from app.services import tts
 
@@ -783,6 +790,7 @@ def test_voice_library_preview_and_script(client, auth, monkeypatch, feed, run_j
         "public_owner_id": "owner-1", "voice_id": "lib-voice-1", "name": "Narrator",
                                                     "use_as": "host_b"}, headers=auth).json()
     assert r["voice_id"] == "added-lib-voice-1" and r["host_voices"]["host_b"] == "added-lib-voice-1"
+    assert saved_voices(db_session) == {"added-lib-voice-1": "Narrator"}  # added, so saved
 
     prev = client.post("/api/voice/preview", json={"voice_id": "added-lib-voice-1", "text": "Hello there",
                                                    "delivery": {"stability": 0.3, "similarity_boost": 0.8,
@@ -794,7 +802,7 @@ def test_voice_library_preview_and_script(client, auth, monkeypatch, feed, run_j
     assert script["words"] > 5 and script["title"]
 
 
-def test_voice_clone_multi_sample_sets_host_and_preview(client, auth, monkeypatch, run_jobs):
+def test_voice_clone_multi_sample_sets_host_and_preview(client, auth, monkeypatch, run_jobs, db_session):
     from app.config import settings
     from app.services import tts
 
@@ -823,6 +831,54 @@ def test_voice_clone_multi_sample_sets_host_and_preview(client, auth, monkeypatc
     voice = client.get("/api/voice", headers=auth).json()
     assert voice["clone"]["status"] == "ready" and voice["host_voices"]["host_a"] == "clone-1"
     assert voice["clone"]["preview_url"]
+    assert saved_voices(db_session) == {"clone-1": "My voice"}
+
+
+def test_a_designed_voice_is_saved_to_the_voices(client, auth, monkeypatch, db_session):
+    from app.config import settings
+    from app.services import tts
+
+    monkeypatch.setattr(settings, "elevenlabs_api_key", "test")
+    monkeypatch.setattr(tts, "create_designed_voice", lambda name, description, generated: "designed-1")
+    r = client.post("/api/voice/design/save", json={"generated_voice_id": "gen-12345", "name": "Narrator",
+                                                    "description": "A calm narrator"}, headers=auth)
+    assert r.status_code == 200 and r.json()["voice_id"] == "designed-1"
+    assert saved_voices(db_session) == {"designed-1": "Narrator"}
+    client.post("/api/voice/design/save", json={"generated_voice_id": "gen-12345", "name": "Narrator"}, headers=auth)
+    assert len(saved_voices(db_session)) == 1  # saved once
+
+
+def test_audio_overview_hosts_are_picked_from_the_voices(client, auth, run_jobs, feed, llm, monkeypatch,
+                                                         db_session):
+    from app.config import settings
+    from app.services import tts
+
+    connect(client, auth, run_jobs)
+    doc = docs(client, auth)[0]
+    monkeypatch.setattr(settings, "elevenlabs_api_key", "test")
+    used = []
+    monkeypatch.setattr(tts, "synthesize", lambda ws, text, voice, vs=None, *a: used.append((text, voice)) or
+                        b"\x00" * 16000)
+    llm["PodcastScript"] = {"lines": [{"speaker": "host_a", "text": "Welcome in.", "sources": []},
+                                      {"speaker": "host_b", "text": "Thanks.", "sources": []}]}
+    ws_id = db_session.get(Document, uuid.UUID(doc["id"])).workspace_id
+    db_session.add_all([UserSavedVoice(workspace_id=ws_id, voice_id=v, name=v) for v in ("mine-1", "mine-2")])
+    db_session.commit()
+    body = {"type": "audio_overview", "document_id": doc["id"], "minutes": 3}
+    art = client.post("/api/artifacts/generate", json={**body, "host_a": "mine-2", "host_b": "mine-1"},
+                      headers=auth).json()
+    run_jobs()
+    done = client.get(f"/api/artifacts/{art['id']}", headers=auth).json()
+    assert done["content"]["voices"] == {"host_a": "mine-2", "host_b": "mine-1"}
+    assert dict(used) == {"Welcome in.": "mine-2", "Thanks.": "mine-1"}
+    # Only the workspace's own voices (or the defaults).
+    r = client.post("/api/artifacts/generate", json={**body, "host_a": "someone-elses"}, headers=auth)
+    assert r.status_code == 400
+    # None picked: the defaults, as before.
+    art = client.post("/api/artifacts/generate", json=body, headers=auth).json()
+    run_jobs()
+    voices = client.get(f"/api/artifacts/{art['id']}", headers=auth).json()["content"]["voices"]
+    assert voices == {"host_a": settings.elevenlabs_voice_a, "host_b": settings.elevenlabs_voice_b}
 
 
 def test_tts_retries_rate_limits(monkeypatch):

backend/tests/test_videos.py

@@ -1157,15 +1157,15 @@ def notestack_voice(db, ws, voice_id="nv_narrator", name="Narrator") -> None:
     db.commit()
 
 
-def test_my_voices_are_capped_at_five(client, b2v, owner, db_session):
+def test_any_number_of_voices_can_be_saved(client, b2v, owner, db_session):
     headers, ws = owner
     client.get("/api/video-voices", headers=headers)  # the starter voice
-    for i in range(4):
+    for i in range(7):
         db_session.add(UserSavedVoice(workspace_id=ws.id, voice_id=f"v{i}", name=f"V{i}"))
     db_session.commit()
-    r = client.post("/api/video-voices/saved", json={"voice_id": BELLA}, headers=headers)
-    assert r.status_code == 409 and "5 voices" in r.json()["detail"]
-    assert client.get("/api/video-voices", headers=headers).json()["max_saved"] == 5
+    assert client.post("/api/video-voices/saved", json={"voice_id": BELLA}, headers=headers).status_code == 201
+    got = client.get("/api/video-voices", headers=headers).json()
+    assert len(got["saved"]) == 9 and "max_saved" not in got
 
 
 def test_notestack_voices_can_be_saved_and_used_in_a_video(client, b2v, owner, other, db_session):
@@ -1185,11 +1185,14 @@ def test_notestack_voices_can_be_saved_and_used_in_a_video(client, b2v, owner, o
     assert r.status_code == 404
 
 
-def test_notestack_voices_need_premium_in_videos(client, b2v, owner, db_session, free_plan):
+def test_notestack_voices_are_saved_on_any_plan_but_need_premium_in_videos(client, b2v, owner, db_session,
+                                                                          free_plan):
     headers, ws = owner
     notestack_voice(db_session, ws)
     assert client.post("/api/video-voices/saved", json={"voice_id": "nv_narrator"},
-                       headers=headers).status_code == 402
+                       headers=headers).status_code == 201  # in the list, for audio overviews
+    r = client.post("/api/videos", json={"url": "https://a.test/x", "custom_voice_id": "nv_narrator"}, headers=headers)
+    assert r.status_code == 402 and not creates(b2v)
 
 
 def test_revoking_the_clone_drops_it_from_video_voices(client, b2v, owner, db_session, monkeypatch):

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes, useSearchParams } from "react-router-dom";
 import AppShell from "./components/AppShell";
 import { PublicFooter, PublicNav } from "./components/PublicChrome";
 import PricingTiers from "./components/PricingTiers";
@@ -20,10 +20,8 @@ import Sources from "./pages/Sources";
 import Studio from "./pages/Studio";
 import VideoCreate from "./pages/VideoCreate";
 import VideoEditor from "./pages/VideoEditor";
-import Videos from "./pages/Videos";
 import TopicMap from "./pages/TopicMap";
 import { ToolPage, ToolsHub } from "./pages/Tools";
-import VoiceProfile from "./pages/VoiceProfile";
 import Welcome from "./pages/Welcome";
 import { SupportWidget } from "./components/support/SupportWidget";
 
@@ -60,13 +58,13 @@ export default function App() {
         <Route index element={<MissionControl />} />
         <Route path="notebooks" element={<Notebooks />} />
         <Route path="notebooks/:id" element={<NotebookView />} />
-        <Route path="videos" element={<Videos />} />
+        <Route path="videos" element={<Navigate to="/app/archive?tab=videos" replace />} />
         <Route path="videos/new" element={<VideoCreate />} />
-        <Route path="videos/voices" element={<Navigate to="/app/voice?step=hosts#video-voices" replace />} />
+        <Route path="videos/voices" element={<Navigate to="/app/archive?tab=voices" replace />} />
         <Route path="videos/:id" element={<VideoEditor />} />
         <Route path="sources" element={<Sources />} />
         <Route path="map" element={<TopicMap />} />
-        <Route path="voice" element={<VoiceProfile />} />
+        <Route path="voice" element={<VoiceRedirect />} />
         <Route path="studio" element={<Studio />} />
         <Route path="launch-kit" element={<LaunchKit />} />
         <Route path="launchpad" element={<Launchpad />} />
@@ -81,3 +79,10 @@ export default function App() {
     </>
   );
 }
+
+/** The old Voice page (/app/voice, ?step=writing for the writing voice) is the Library's Voices tab now. */
+function VoiceRedirect() {
+  const [params] = useSearchParams();
+  const writing = params.get("step") === "writing";
+  return <Navigate to={`/app/archive?tab=voices${writing ? "&step=writing" : ""}`} replace />;
+}

frontend/src/api/endpoints.ts

@@ -113,6 +113,9 @@ export type GenerateBody = {
   minutes?: number;
   style?: "audiogram";
   audio_artifact_id?: string;
+  /** audio_overview: the two hosts' voices, from the workspace's voices (none: the defaults). */
+  host_a?: string;
+  host_b?: string;
   slides?: { heading: string; body: string }[];
   parent_id?: string;
   /** mind_map: the posts to chart (none: all in the notebook) and what to centre on. */

frontend/src/api/types.ts

@@ -485,8 +485,6 @@ export type VideoVoicesResponse = {
   library: VideoLibraryVoice[];
   custom: VideoCustomVoice[];
   notestack: VideoNotestackVoice[];
-  /** How many voices "My voices" can hold. */
-  max_saved: number;
 };
 
 export type VideoDesignedVoice = {

frontend/src/components/AppShell.tsx

@@ -7,9 +7,8 @@ import { FuelGauge, NudgeDock } from "./Nudges";
 import SkyCanvas from "./SkyCanvas";
 import UpgradeModal from "./UpgradeModal";
 import {
-  CometIcon,
-  HelmetIcon,
   LaunchpadIcon,
+  LibraryIcon,
   OrbitIcon,
   PlanetIcon,
   SatelliteDishIcon,
@@ -19,8 +18,7 @@ import {
 const NAV: { to: string; label: string; icon: typeof PlanetIcon; end?: boolean; also?: string[] }[] = [
   { to: "/app/notebooks", label: "Notebooks", icon: PlanetIcon },
   { to: "/app/sources", label: "Sources", icon: SatelliteDishIcon, also: ["/app/map"] },
-  { to: "/app/videos", label: "Videos", icon: CometIcon },
-  { to: "/app/voice", label: "Voices", icon: HelmetIcon },
+  { to: "/app/archive", label: "Library", icon: LibraryIcon, also: ["/app/videos"] },
   { to: "/app/launchpad", label: "Launchpad", icon: LaunchpadIcon, also: ["/app/resurface"] },
 ];
 

frontend/src/components/icons/Icons.tsx

@@ -161,6 +161,32 @@ export const DownloadIcon = (p: P) => (
   </Icon>
 );
 
+/** A stack of media with a play mark on the front: the Library (what you made, your videos and your voices). */
+export const LibraryIcon = (p: P) => (
+  <Icon {...p}>
+    <rect x="3" y="8" width="18" height="12.5" rx="2.5" />
+    <path d="M5.5 5h13M8 2.5h8" />
+    <path d="M10.25 11.6v5.3l4.4-2.65z" />
+  </Icon>
+);
+
+/** A video camera: the Videos section. */
+export const VideoIcon = (p: P) => (
+  <Icon {...p}>
+    <rect x="3" y="6.5" width="12.5" height="11" rx="2.5" />
+    <path d="M15.5 10.5l4.6-2.7a.6.6 0 0 1 .9.5v7.4a.6.6 0 0 1-.9.5l-4.6-2.7" />
+  </Icon>
+);
+
+/** A microphone with sound waves: the Voices section. */
+export const MicIcon = (p: P) => (
+  <Icon {...p}>
+    <rect x="9" y="3" width="6" height="11" rx="3" />
+    <path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6" />
+    <path d="M2.5 9v3M21.5 9v3" />
+  </Icon>
+);
+
 export const FilmIcon = (p: P) => (
   <Icon {...p}>
     <rect x="3" y="5" width="18" height="14" rx="2" />

frontend/src/components/video/VideoVoicesSection.tsx

@@ -1,208 +0,0 @@
-import { type ReactNode, useCallback, useEffect, useState } from "react";
-import { videosApi, videoVoicesApi, voiceApi } from "../../api/endpoints";
-import type { VideoSavedVoice, VideoVoicesResponse } from "../../api/types";
-import { errorMessage, Loading, Modal, Tabs } from "../ui";
-import { useUpgrade } from "../../hooks/useUpgrade";
-import { VoiceLibrary } from "./VoiceLibrary";
-import { Premium, PlayButton, useAudio } from "./parts";
-
-const KIND = { clone: "Your cloned voice", designed: "Generated", library: "From the voice library" } as const;
-
-/** Play a voice: blog2video voices have a sample link; Notestack voices have none, so the Voice page speaks a line. */
-function useVoicePlayer(onError: (msg: string) => void) {
-  const { playing, play, stop } = useAudio();
-  const playNotestack = async (voiceId: string) => {
-    if (playing === voiceId) return stop();
-    const res = await voiceApi.preview(voiceId).catch((e) => {
-      onError(errorMessage(e));
-      return null;
-    });
-    if (res?.url) play(voiceId, res.url);
-  };
-  const playSaved = (v: VideoSavedVoice) =>
-    v.source === "notestack" ? playNotestack(v.voice_id) : play(v.voice_id, v.preview_url);
-  return { playing, playNotestack, playSaved };
-}
-
-/** The Voice page's "Video voiceovers" tab: My video voices (what step 3 of a new video offers, up to max_saved) and
- * "Manage your voiceovers", which adds from the video voice library or the workspace's own Notestack voices. Notestack
- * voices work in videos because blog2video speaks with the same ElevenLabs account. */
-export function VideoVoicesSection({ renderAddVoice, reloadKey = 0 }: {
-  /** The modal's Add your voice tab: the Voice page's generator. onDone = saved (back to the library); close = close the
-   * modal (cloning opens its own). The new voice is added to the video voices by the Voice page. */
-  renderAddVoice: (onDone: () => void, close: () => void) => ReactNode;
-  /** Bumped by the Voice page after it made a voice, so the list here reloads. */
-  reloadKey?: number;
-}) {
-  const [voices, setVoices] = useState<VideoVoicesResponse | null>(null);
-  const [premium, setPremium] = useState(false);
-  const [managing, setManaging] = useState(false);
-  const [busy, setBusy] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const { playing, playSaved } = useVoicePlayer(setError);
-
-  const load = useCallback(() => videoVoicesApi.list().then(setVoices).catch((e) => setError(errorMessage(e))), []);
-  useEffect(() => {
-    load();
-    videosApi.config().then((c) => setPremium(!!c.premium)).catch(() => undefined);
-  }, [load, reloadKey]);
-
-  const remove = async (voiceId: string) => {
-    setBusy(voiceId);
-    setError(null);
-    try {
-      await videoVoicesApi.unsave(voiceId);
-      await load();
-    } catch (e) {
-      setError(errorMessage(e));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  return (
-    <div id="video-voices" className="stack">
-      <div className="row between wrap manage-top">
-        <p className="muted">
-          Up to {voices?.max_saved ?? 5} voices, offered in step 3 of a new video. Mix your own voices with the video
-          voice library.
-        </p>
-        <button className="btn btn-primary" disabled={!voices} onClick={() => setManaging(true)}>
-          Manage your voiceovers
-        </button>
-      </div>
-      {error && <p className="error-text">{error}</p>}
-      {!voices && !error && <div className="loading-center inline"><Loading label="Loading voices" /></div>}
-
-      {voices && (
-        <div className="stack">
-          <h3>My video voices <span className="mono muted small">{voices.saved.length} of {voices.max_saved}</span></h3>
-          <div className="vw-voice-list">
-            {voices.saved.map((v) => (
-              <div key={v.voice_id} className="vw-vrow">
-                <PlayButton on={playing === v.voice_id} disabled={v.source !== "notestack" && !v.preview_url}
-                            label={v.name} onClick={() => playSaved(v)} />
-                <div className="vw-vpick static">
-                  <strong>{v.name}</strong>
-                  <span className="muted">
-                    {v.source === "notestack" || v.is_custom ? "Your voice" : [v.gender, v.accent].filter(Boolean).join(" • ")}
-                  </span>
-                </div>
-                {v.premium && <Premium small />}
-                <button className="btn btn-small" disabled={busy === v.voice_id} onClick={() => remove(v.voice_id)}>
-                  Remove
-                </button>
-              </div>
-            ))}
-            {voices.saved.length === 0 && <p className="muted">No voices yet. Add some with Manage your voiceovers.</p>}
-          </div>
-        </div>
-      )}
-
-      {managing && voices && (
-        <ManageVideoVoicesModal voices={voices} premium={premium} onChange={load} onClose={() => setManaging(false)}
-                                renderAddVoice={renderAddVoice} />
-      )}
-    </div>
-  );
-}
-
-/** Add or remove video voices: blog2video's library (and custom voices) plus the workspace's own Notestack voices, or
- * make a new voice (Add your voice). */
-function ManageVideoVoicesModal({ voices, premium, onChange, onClose, renderAddVoice }: {
-  voices: VideoVoicesResponse;
-  premium: boolean;
-  onChange: () => Promise<unknown>;
-  onClose: () => void;
-  renderAddVoice: (onDone: () => void, close: () => void) => ReactNode;
-}) {
-  const { openUpgrade } = useUpgrade();
-  const [tab, setTab] = useState<"library" | "add">("library");
-  const [busy, setBusy] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const { playing, playNotestack } = useVoicePlayer(setError);
-  const full = voices.saved.length >= voices.max_saved;
-  // Sections: saved (from a voice library) and cloned voices, voices created (designed), and the built-in library.
-  const ownSaved = voices.notestack.filter((v) => v.kind !== "designed");
-  const ownCreated = voices.notestack.filter((v) => v.kind === "designed");
-  const clonedCustom = voices.custom.some((c) => c.source === "clone");
-  const createdCustom = voices.custom.some((c) => c.source !== "clone");
-  const libProps = { voices, premium, full, onChange, onLocked: () => openUpgrade() };
-
-  const ownRow = (v: VideoVoicesResponse["notestack"][number]) => (
-    <div key={v.voice_id} className="vw-vrow">
-      <PlayButton on={playing === v.voice_id} label={v.name} onClick={() => playNotestack(v.voice_id)} />
-      <div className="vw-vpick static">
-        <strong>{v.name}</strong>
-        <span className="muted">{KIND[v.kind]}</span>
-      </div>
-      <Premium small />
-      {v.saved ? (
-        <button className="btn btn-small" disabled={busy === v.voice_id}
-                onClick={() => act(v.voice_id, () => videoVoicesApi.unsave(v.voice_id))}>Remove</button>
-      ) : (
-        <button className="btn btn-small btn-primary" disabled={busy === v.voice_id || full}
-                onClick={() => (premium ? act(v.voice_id, () => videoVoicesApi.save(v.voice_id)) : openUpgrade())}>
-          Add
-        </button>
-      )}
-    </div>
-  );
-
-  async function act(key: string, fn: () => Promise<unknown>) {
-    setBusy(key);
-    setError(null);
-    try {
-      await fn();
-      await onChange();
-    } catch (e) {
-      setError(errorMessage(e));
-    } finally {
-      setBusy(null);
-    }
-  }
-
-  return (
-    <Modal title="Manage your voiceovers" onClose={onClose} wide>
-      <div className="stack">
-        <p className="mono muted small">
-          {voices.saved.length} of {voices.max_saved} added
-          {full ? ". Remove one to add another." : ""}
-        </p>
-        <Tabs
-          tabs={[
-            { id: "library", label: "Voice library" },
-            { id: "add", label: "Add your voice" },
-          ]}
-          value={tab}
-          onChange={setTab}
-        />
-        {error && <p className="error-text">{error}</p>}
-        {tab === "add" ? (
-          renderAddVoice(() => setTab("library"), onClose)
-        ) : (
-          <div className="stack">
-            {(ownSaved.length > 0 || clonedCustom) && (
-              <section className="stack">
-                <h3>Saved and cloned</h3>
-                {ownSaved.length > 0 && <div className="vw-voice-list">{ownSaved.map(ownRow)}</div>}
-                <VoiceLibrary {...libProps} part="custom" customKind="clone" />
-              </section>
-            )}
-            {(ownCreated.length > 0 || createdCustom) && (
-              <section className="stack">
-                <h3>Created by you</h3>
-                {ownCreated.length > 0 && <div className="vw-voice-list">{ownCreated.map(ownRow)}</div>}
-                <VoiceLibrary {...libProps} part="custom" customKind="designed" />
-              </section>
-            )}
-            <section className="stack">
-              <h3>Built-in voices</h3>
-              <VoiceLibrary {...libProps} part="library" />
-            </section>
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
-}

frontend/src/components/video/VoiceLibrary.tsx

@@ -1,107 +0,0 @@
-import { useState } from "react";
-import { videoVoicesApi } from "../../api/endpoints";
-import type { VideoVoicesResponse } from "../../api/types";
-import { ConfirmButton, errorMessage } from "../ui";
-import { Premium, PlayButton, useAudio } from "./parts";
-
-const cap = (s?: string | null) => (s ? s[0].toUpperCase() + s.slice(1) : "");
-
-/** The built-in voices to add to "My voices", and this workspace's custom voices. */
-export function VoiceLibrary({ voices, premium, onChange, onLocked, full = false, part, customKind }: {
-  voices: VideoVoicesResponse; premium: boolean; onChange: () => void; onLocked: () => void;
-  /** My voices is at its cap: nothing more can be added until one is removed. */
-  full?: boolean;
-  /** Just one part, with no heading of its own (the caller titles it): the custom voices or the built-in library. */
-  part?: "custom" | "library";
-  /** With part "custom": only cloned or only designed custom voices. */
-  customKind?: "clone" | "designed";
-}) {
-  const [busy, setBusy] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const { playing, play } = useAudio();
-
-  const shown = voices.library;
-  const custom = voices.custom.filter((c) => !customKind || (customKind === "clone") === (c.source === "clone"));
-
-  async function act(key: string, fn: () => Promise<unknown>) {
-    setBusy(key);
-    setError(null);
-    try {
-      await fn();
-      onChange();
-    } catch (e) {
-      setError(errorMessage(e));
-    } finally {
-      setBusy(null);
-    }
-  }
-
-  async function playCustom(id: number, url: string | null) {
-    if (url) return play(`c${id}`, url);
-    const res = await videoVoicesApi.customPreview(id).catch(() => null);
-    if (res?.preview_url) play(`c${id}`, res.preview_url);
-    else setError("The preview is not ready yet. Try again in a minute.");
-  }
-
-  return (
-    <div className="stack">
-      {part !== "library" && custom.length > 0 && (
-        <section className="stack">
-          {!part && <h3>Your custom voices</h3>}
-          <div className="vw-voice-list">
-            {custom.map((c) => (
-              <div key={c.id} className="vw-vrow">
-                <PlayButton on={playing === `c${c.id}`} label={c.name} onClick={() => playCustom(c.id, c.preview_url)} />
-                <div className="vw-vpick static">
-                  <strong>{c.name}</strong>
-                  <span className="muted">{c.source === "clone" ? "Cloned" : "Designed"}</span>
-                </div>
-                {c.saved ? (
-                  <button className="btn btn-small" disabled={busy === c.voice_id}
-                          onClick={() => act(c.voice_id, () => videoVoicesApi.unsave(c.voice_id))}>Remove</button>
-                ) : (
-                  <button className="btn btn-small" disabled={busy === c.voice_id || full}
-                          onClick={() => act(c.voice_id, () => videoVoicesApi.save(c.voice_id))}>Add</button>
-                )}
-                <ConfirmButton onConfirm={() => act(`d${c.id}`, () => videoVoicesApi.removeCustom(c.id))}>Delete</ConfirmButton>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {part === "custom" && error && <p className="error-text">{error}</p>}
-      {part !== "custom" && (
-      <section className="stack">
-        {error && <p className="error-text">{error}</p>}
-        <div className="vw-voice-list">
-          {shown.map((v) => (
-            <div key={v.voice_id} className="vw-vrow">
-              <PlayButton on={playing === v.voice_id} disabled={!v.preview_url} label={v.name}
-                          onClick={() => play(v.voice_id, v.preview_url)} />
-              <div className="vw-vpick static">
-                <strong>{v.name}</strong>
-                <span className="muted">
-                  {[cap(v.gender), cap(v.accent), cap(v.age)].filter(Boolean).join(" • ")}
-                  {v.description ? ` - ${v.description}` : ""}
-                </span>
-              </div>
-              {v.premium && <Premium small />}
-              {v.saved ? (
-                <button className="btn btn-small" disabled={busy === v.voice_id}
-                        onClick={() => act(v.voice_id, () => videoVoicesApi.unsave(v.voice_id))}>Remove</button>
-              ) : (
-                <button className="btn btn-small btn-primary" disabled={busy === v.voice_id || full}
-                        onClick={() => (v.premium && !premium ? onLocked() : act(v.voice_id, () => videoVoicesApi.save(v.voice_id)))}>
-                  Add
-                </button>
-              )}
-            </div>
-          ))}
-          {shown.length === 0 && <p className="muted">No voices in the library right now.</p>}
-        </div>
-      </section>
-      )}
-    </div>
-  );
-}

frontend/src/components/voice/YourVoices.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useState } from "react";
+import { videosApi, videoVoicesApi, voiceApi } from "../../api/endpoints";
+import type { VideoLibraryVoice, VideoSavedVoice, VideoVoicesResponse } from "../../api/types";
+import { useUpgrade } from "../../hooks/useUpgrade";
+import { errorMessage, Loading } from "../ui";
+import { Premium, PlayButton, useAudio } from "../video/parts";
+
+const cap = (s?: string | null) => (s ? s[0].toUpperCase() + s.slice(1) : "");
+
+/** Play a voice: library voices have a sample link; the workspace's own (Notestack) voices have none, so the Voice
+ * page speaks a line in them. */
+export function useVoicePlayer(onError: (msg: string) => void) {
+  const { playing, play, stop } = useAudio();
+  const playNotestack = async (voiceId: string) => {
+    if (playing === voiceId) return stop();
+    const res = await voiceApi.preview(voiceId).catch((e) => {
+      onError(errorMessage(e));
+      return null;
+    });
+    if (res?.url) play(voiceId, res.url);
+  };
+  const playSaved = (v: VideoSavedVoice) =>
+    v.source === "notestack" ? playNotestack(v.voice_id) : play(v.voice_id, v.preview_url);
+  return { playing, play, playNotestack, playSaved };
+}
+
+/** The Voice page's Speaking voices: the workspace's voices (one list for audio overviews and videos, as many as
+ * wanted) and, below, the built-in library to add from. New voices (Add voices) are saved here by the server. */
+export function YourVoices({ reloadKey = 0, onAdd }: {
+  /** Bumped by the Voice page after a voice was made or cloned, so the list reloads. */
+  reloadKey?: number;
+  /** Opens the Add voices modal (build, describe or clone). */
+  onAdd: () => void;
+}) {
+  const [voices, setVoices] = useState<VideoVoicesResponse | null>(null);
+  const [premium, setPremium] = useState(false);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { playing, play, playSaved } = useVoicePlayer(setError);
+  const { openUpgrade } = useUpgrade();
+
+  const load = useCallback(() => videoVoicesApi.list().then(setVoices).catch((e) => setError(errorMessage(e))), []);
+  useEffect(() => {
+    load();
+    videosApi.config().then((c) => setPremium(!!c.premium)).catch(() => undefined);
+  }, [load, reloadKey]);
+
+  async function act(voiceId: string, fn: () => Promise<unknown>) {
+    setBusy(voiceId);
+    setError(null);
+    try {
+      await fn();
+      await load();
+    } catch (e) {
+      setError(errorMessage(e));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  const add = (v: VideoLibraryVoice) =>
+    v.premium && !premium ? openUpgrade() : act(v.voice_id, () => videoVoicesApi.save(v.voice_id));
+  const library = voices?.library.filter((v) => !v.saved) ?? [];
+
+  return (
+    <div className="stack">
+      <div className="row between wrap manage-top">
+        <p className="muted">Your voices read your audio overviews and videos. Add your own, or pick from the library.</p>
+        <button className="btn btn-primary" onClick={onAdd}>Add voices</button>
+      </div>
+      {error && <p className="error-text">{error}</p>}
+      {!voices && !error && <div className="loading-center inline"><Loading label="Loading voices" /></div>}
+
+      {voices && (
+        <>
+          <section className="stack yv-panel">
+            <h3 className="yv-head">Your voices <span className="yv-count mono">{voices.saved.length}</span></h3>
+            {voices.saved.length === 0 ? (
+              <p className="muted">No voices yet. Add one, or pick from the library below.</p>
+            ) : (
+              <div className="vw-voice-list vw-voice-list-tight vw-voice-list-four">
+                {voices.saved.map((v) => (
+                  <div key={v.voice_id} className="vw-vrow">
+                    <PlayButton on={playing === v.voice_id} disabled={v.source !== "notestack" && !v.preview_url}
+                                label={v.name} onClick={() => playSaved(v)} />
+                    <div className="vw-vpick static">
+                      <strong>{v.name}</strong>
+                      <span className="muted">
+                        {v.source === "notestack" || v.is_custom ? "Your voice"
+                          : [cap(v.gender), cap(v.accent)].filter(Boolean).join(" • ")}
+                      </span>
+                    </div>
+                    {v.premium && <Premium small />}
+                    <button className="btn btn-small" disabled={busy === v.voice_id}
+                            onClick={() => act(v.voice_id, () => videoVoicesApi.unsave(v.voice_id))}>
+                      Remove
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+
+          <section className="stack yv-panel">
+            <h3 className="yv-head">Voice library</h3>
+            {library.length === 0 ? (
+              <p className="muted">Every library voice is in your voices.</p>
+            ) : (
+              <div className="vw-voice-list vw-voice-list-tight">
+                {library.map((v) => (
+                  <div key={v.voice_id} className="vw-vrow">
+                    <PlayButton on={playing === v.voice_id} disabled={!v.preview_url} label={v.name}
+                                onClick={() => play(v.voice_id, v.preview_url)} />
+                    <div className="vw-vpick static">
+                      <strong>{v.name}</strong>
+                      <span className="muted">
+                        {[cap(v.gender), cap(v.accent), cap(v.age)].filter(Boolean).join(" • ")}
+                        {v.description ? ` - ${v.description}` : ""}
+                      </span>
+                    </div>
+                    {v.premium && <Premium small />}
+                    <button className="btn btn-small btn-primary" disabled={busy === v.voice_id} onClick={() => add(v)}>
+                      Add
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Archive.tsx

@@ -1,16 +1,41 @@
 import { useCallback, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { artifactsApi } from "../api/endpoints";
 import type { Artifact } from "../api/types";
 import { ArtifactRow } from "../components/ArtifactRow";
 import { Reader } from "../components/Reader";
 import { EmptyState, Loading, PageHeader, Tabs } from "../components/ui";
+import Videos from "./Videos";
+import VoiceProfile from "./VoiceProfile";
 
-type Filter = "all" | "summary" | "audio_overview" | "video" | "launch_kit" | "quote_card,carousel";
+type Filter = "all" | "summary" | "audio_overview" | "launch_kit" | "quote_card,carousel";
+/** The Library's tabs: kinds of things made (a filter on one list), plus your videos and your voices (their own pages). */
+type Tab = Filter | "videos" | "voices";
+// For now just these three; the per-kind filters (Summaries, Audio, Launch Kits, Stills) can come back as tabs.
+const TABS: { id: Tab; label: string }[] = [
+  { id: "all", label: "All" },
+  { id: "videos", label: "Videos" },
+  { id: "voices", label: "Voices" },
+];
 const PAGE = 30;
 
 export default function Archive() {
-  const [filter, setFilter] = useState<Filter>("all");
+  const [params, setParams] = useSearchParams();
+  const tab: Tab = TABS.find((t) => t.id === params.get("tab"))?.id ?? "all";
+  // The tab lives in the URL (?tab=videos), so the sidebar, redirects and Back land on it.
+  const pickTab = (t: Tab) => setParams(t === "all" ? {} : { tab: t });
+
+  return (
+    <div className="page-wrap">
+      <PageHeader eyebrow="Library" title="Everything you have made" />
+      <Tabs<Tab> tabs={TABS} value={tab} onChange={pickTab} />
+      {tab === "videos" ? <Videos /> : tab === "voices" ? <VoiceProfile /> : <MadeList filter={tab} />}
+    </div>
+  );
+}
+
+/** What was made, of one kind (or all), searchable. */
+function MadeList({ filter }: { filter: Filter }) {
   const [q, setQ] = useState("");
   const [items, setItems] = useState<Artifact[] | null>(null);
   const [total, setTotal] = useState(0);
@@ -33,21 +58,8 @@ export default function Archive() {
   }, [load]);
 
   return (
-    <div className="page-wrap">
-      <PageHeader eyebrow="Library" title="Everything you have made" />
-      <div className="row between wrap">
-        <Tabs<Filter>
-          tabs={[
-            { id: "all", label: "All" },
-            { id: "summary", label: "Summaries" },
-            { id: "audio_overview", label: "Audio" },
-            { id: "video", label: "Video" },
-            { id: "launch_kit", label: "Launch Kits" },
-            { id: "quote_card,carousel", label: "Stills" },
-          ]}
-          value={filter}
-          onChange={setFilter}
-        />
+    <div className="stack">
+      <div className="row end wrap">
         <input className="input input-sm search" placeholder={`Search ${total} items by post or notebook`} value={q} onChange={(e) => setQ(e.target.value)} aria-label="Search" />
       </div>
       {!items && <Loading />}

frontend/src/pages/NotebookView.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
 import { Link, useParams, useSearchParams } from "react-router-dom";
-import { artifactsApi, notebooksApi, type GenerateBody } from "../api/endpoints";
+import { artifactsApi, notebooksApi, videoVoicesApi, type GenerateBody } from "../api/endpoints";
 import { streamSSE } from "../api/stream";
-import type { AnswerFeedback as Feedback, Artifact, ChatSummary, Citation, MemoryChange, Notebook } from "../api/types";
+import type { AnswerFeedback as Feedback, Artifact, ChatSummary, Citation, MemoryChange, Notebook, VideoSavedVoice } from "../api/types";
 import { AnswerFeedback } from "../components/AnswerFeedback";
 import { ArtifactCard, CitationList } from "../components/ArtifactCard";
 import { Markdown } from "../components/Markdown";
@@ -52,6 +52,9 @@ function StudioPanel({ notebookId, docs, disabled, onCreateVideo }: {
   const [busy, setBusy] = useState(false);
   const [reading, setReading] = useState<{ id: string; start: number; end: number } | null>(null);
   const [audioOpen, setAudioOpen] = useState(false); // the Audio overview tile is opened to its options
+  // The two hosts' voices, picked from the workspace's voices (loaded when the options first open).
+  const [hostVoices, setHostVoices] = useState<VideoSavedVoice[] | null>(null);
+  const [hosts, setHosts] = useState<[string, string]>(["", ""]);
   const [mapDialog, setMapDialog] = useState(false);
   const [mapBusy, setMapBusy] = useState(false);
   const [mapError, setMapError] = useState<string | null>(null);
@@ -59,6 +62,25 @@ function StudioPanel({ notebookId, docs, disabled, onCreateVideo }: {
   const [exploring, setExploring] = useState<Artifact | null>(null);
 
   const load = useCallback(() => notebooksApi.artifacts(notebookId).then(setArtifacts), [notebookId]);
+
+  useEffect(() => {
+    if (!audioOpen || hostVoices) return;
+    videoVoicesApi.list().then((r) => {
+      setHostVoices(r.saved);
+      // The first two voices by default; with just one, it reads both parts.
+      setHosts([r.saved[0]?.voice_id ?? "", (r.saved[1] ?? r.saved[0])?.voice_id ?? ""]);
+    }).catch(() => setHostVoices([])); // none to pick: the server's default voices
+  }, [audioOpen, hostVoices]);
+
+  /** Pick a host's voice; the other host moves off it, so the two never share one (when there are two to pick). */
+  const pickHost = (i: 0 | 1, voiceId: string) =>
+    setHosts((cur) => {
+      const next: [string, string] = [...cur];
+      next[i] = voiceId;
+      const other = i === 0 ? 1 : 0;
+      if (next[other] === voiceId) next[other] = hostVoices?.find((v) => v.voice_id !== voiceId)?.voice_id ?? voiceId;
+      return next;
+    });
   useEffect(() => {
     load();
   }, [load]);
@@ -134,9 +156,18 @@ function StudioPanel({ notebookId, docs, disabled, onCreateVideo }: {
                 <Dropdown<string> label="Length" value={String(minutes)} onChange={(v) => setMinutes(Number(v))}
                   options={[3, 6, 10, 15].map((m) => ({ value: String(m), label: `${m} min` }))} />
               </div>
+              {hostVoices && hostVoices.length > 0 && ([0, 1] as const).map((i) => (
+                <div key={i} className="field">
+                  <span className="small muted">Host {i + 1}</span>
+                  <Dropdown<string> label={`Host ${i + 1} voice`} value={hosts[i]} onChange={(v) => pickHost(i, v)}
+                    options={hostVoices.map((v) => ({ value: v.voice_id, label: v.name }))} />
+                </div>
+              ))}
             </div>
-            <button className="btn btn-primary btn-small" disabled={off}
-                    onClick={() => make({ type: "audio_overview", format, minutes }).then(() => setAudioOpen(false))}>
+            <button className="btn btn-primary btn-small" disabled={off || (audioOpen && hostVoices === null)}
+                    onClick={() => make({ type: "audio_overview", format, minutes,
+                                          ...(hosts[0] ? { host_a: hosts[0], host_b: hosts[1] || hosts[0] } : {}) })
+                      .then(() => setAudioOpen(false))}>
               {busy ? "Starting..." : "Create audio overview"}
             </button>
           </div>

frontend/src/pages/VideoCreate.tsx

@@ -145,7 +145,7 @@ export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal
     }).catch((e) => setLoadError(errorMessage(e)));
     loadVoices()
       .then((v) => v.saved[0] && pickVoice(v.saved[0]))
-      .catch(() => setVoices({ saved: [], library: [], custom: [], notestack: [], max_saved: 5 }));
+      .catch(() => setVoices({ saved: [], library: [], custom: [], notestack: [] }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config?.configured]);
 
@@ -279,7 +279,7 @@ export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal
       {step === 1 && !inModal && (
         // Leaves the wizard for wherever it was opened from. Steps 2 and 3 have their own Back at the bottom.
         <button type="button" className="vw-back"
-                onClick={() => (window.history.length > 1 ? navigate(-1) : navigate("/app/videos"))}>
+                onClick={() => (window.history.length > 1 ? navigate(-1) : navigate("/app/archive?tab=videos"))}>
           Back
         </button>
       )}
@@ -367,13 +367,7 @@ export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal
                     <small className="muted mono">{custom.length}/500</small>
                   </span>
                 </label>
-                {shownTopics && (
-                  <small className="muted vw-hint">
-                    {focus ? "The video is mainly about this topic."
-                      : custom.trim() ? "The video follows your topic, as far as the posts cover it."
-                      : "None picked: the video covers the material as a whole."}
-                  </small>
-                )}
+                
               </div>
             )}
 
@@ -471,7 +465,7 @@ export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal
               {voices === null ? (
                 <Loading label="Loading voices" />
               ) : saved.length === 0 ? (
-                <p className="muted">No voices saved yet. Add some on the <Link to="/app/voice?step=hosts#video-voices">Voice</Link> page.</p>
+                <p className="muted">No voices yet. Add some on the <Link to="/app/archive?tab=voices">Voices</Link> tab of your Library.</p>
               ) : (
                 <div className="vw-voice-list vw-voice-list-compact" role="radiogroup" aria-label="Narration voice">
                   {saved.map((v) => {

frontend/src/pages/VideoEditor.tsx

@@ -282,14 +282,14 @@ export default function VideoEditor() {
 
   const remove = async () => {
     await videosApi.remove(id);
-    navigate("/app/videos");
+    navigate("/app/archive?tab=videos");
   };
 
   if (notFound) {
     return (
       <div className="page-wrap">
         <PageHeader eyebrow="Videos" title="Video not found" />
-        <Link to="/app/videos" className="btn">Back to videos</Link>
+        <Link to="/app/archive?tab=videos" className="btn">Back to videos</Link>
       </div>
     );
   }

frontend/src/pages/VideoTemplates.tsx

@@ -16,7 +16,7 @@ export default function VideoTemplates() {
   return (
     <div className="page-wrap">
       <PageHeader eyebrow="Videos" title="Templates">
-        <Link to="/app/videos" className="btn">Back to videos</Link>
+        <Link to="/app/archive?tab=videos" className="btn">Back to videos</Link>
         <Link to="/app/videos/templates/new" className="btn btn-primary">Create a template</Link>
       </PageHeader>
       {slots && (

frontend/src/pages/Videos.tsx

@@ -3,7 +3,7 @@ import { Link, useLocation } from "react-router-dom";
 import { videosApi } from "../api/endpoints";
 import type { VideoListItem, VideoQuota } from "../api/types";
 import { TrashIcon } from "../components/icons/Icons";
-import { EmptyState, errorMessage, formatDate, Loading, Modal, PageHeader } from "../components/ui";
+import { EmptyState, errorMessage, formatDate, Loading, Modal } from "../components/ui";
 import { useUpgrade } from "../hooks/useUpgrade";
 
 const JOB_LABELS: Record<string, string> = {
@@ -76,21 +76,21 @@ export default function Videos() {
   const out = !!quota && quota.used >= quota.limit;
 
   return (
-    <div className="page-wrap">
-      <PageHeader eyebrow="Videos" title="Your videos">
+    // The Library's Videos tab: the allowance on the left, New video on the right, then the list.
+    <div className="stack">
+      <div className="row between wrap lib-tab-head">
+        <p className="mono muted">
+          {quota && <>
+            {quota.used} of {quota.limit} video{quota.limit === 1 ? "" : "s"} used
+            {quota.resets_at ? ` this period, refills ${formatDate(quota.resets_at)}` : " on your plan"}
+          </>}
+        </p>
         {out && status?.can_upgrade ? (
           <button className="btn btn-primary" onClick={() => openUpgrade()}>Get more videos</button>
         ) : (
           <Link to="/app/videos/new" className="btn btn-primary">New video</Link>
         )}
-      </PageHeader>
-
-      {quota && (
-        <p className="mono muted">
-          {quota.used} of {quota.limit} video{quota.limit === 1 ? "" : "s"} used
-          {quota.resets_at ? ` this period, refills ${formatDate(quota.resets_at)}` : " on your plan"}
-        </p>
-      )}
+      </div>
       {notice && <p className="notice">{notice}</p>}
       {error && <p className="error-text">{error}</p>}
       {!videos && !error && <div className="loading-center"><Loading label="Loading videos" /></div>}

frontend/src/pages/VoiceProfile.tsx

@@ -1,16 +1,13 @@
-import { type CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { videoVoicesApi, voiceApi } from "../api/endpoints";
-import type { Delivery, Job, LibraryVoice, Voice, VoiceDesignInput, VoiceDesignPreview, VoiceProfileData, VoiceState } from "../api/types";
+import { voiceApi } from "../api/endpoints";
+import type { Job, VoiceDesignInput, VoiceDesignPreview, VoiceProfileData, VoiceState } from "../api/types";
 import { DocPicker } from "../components/DocPicker";
-import { PlayButton } from "../components/video/parts";
-import { VideoVoicesSection } from "../components/video/VideoVoicesSection";
-import { ConfirmButton, errorMessage, formatDate, JobProgress, Loading, Modal, PageHeader, Tabs } from "../components/ui";
+import { YourVoices } from "../components/voice/YourVoices";
+import { ConfirmButton, errorMessage, formatDate, JobProgress, Loading, Modal, Tabs } from "../components/ui";
 import { useJob } from "../hooks/useJob";
 import { useUpgrade } from "../hooks/useUpgrade";
 
-type Host = "host_a" | "host_b";
-
 const LIST_FIELDS: { key: keyof VoiceProfileData; label: string; hint: string }[] = [
   { key: "tone", label: "Tone", hint: "warm, wry, direct" },
   { key: "vocabulary", label: "Signature words and phrases", hint: "readers, the long game" },
@@ -19,13 +16,6 @@ const LIST_FIELDS: { key: keyof VoiceProfileData; label: string; hint: string }[
   { key: "avoid", label: "Never does", hint: "jargon, hashtags" },
 ];
 
-const SLIDERS: { key: keyof Delivery; label: string; min: number; max: number; step: number; hint: string }[] = [
-  { key: "stability", label: "Stability", min: 0, max: 1, step: 0.05, hint: "Lower is more expressive, higher is steadier" },
-  { key: "similarity_boost", label: "Clarity and similarity", min: 0, max: 1, step: 0.05, hint: "How closely it sticks to the original voice" },
-  { key: "style", label: "Style", min: 0, max: 1, step: 0.05, hint: "Exaggerates the speaker's style; keep low for news" },
-  { key: "speed", label: "Speed", min: 0.7, max: 1.2, step: 0.05, hint: "1.0 is natural pace" },
-];
-
 /** Plays one URL at a time across the page. */
 function usePlayer() {
   const audio = useRef<HTMLAudioElement | null>(null);
@@ -50,188 +40,6 @@ function fmtSeconds(s: number) {
   return `${Math.floor(s / 60)}:${String(Math.round(s % 60)).padStart(2, "0")}`;
 }
 
-// Speaking voices
-
-type Icon = "sun" | "book" | "mic" | "spark" | "wave" | "person";
-
-/** The four ElevenLabs premade voices offered up front. Each has a glyph so they read at a glance. */
-const PREBUILT: { voice_id: string; name: string; tag: string; icon: Icon }[] = [
-  { voice_id: "EXAVITQu4vr4xnSDxMaL", name: "Sarah", tag: "Warm and reassuring", icon: "sun" },
-  { voice_id: "JBFqnCBsd6RMkjVDRZzb", name: "George", tag: "British storyteller", icon: "book" },
-  { voice_id: "nPczCjzI2devNBz1zQrb", name: "Brian", tag: "Deep narrator", icon: "mic" },
-  { voice_id: "cgSgspJ2msm6clMCkdW9", name: "Jessica", tag: "Bright and lively", icon: "spark" },
-];
-
-type Tile = { voice_id: string; name: string; tag: string; icon: Icon; preview_url?: string | null };
-
-/** The voices a host can use: the premade four, then the writer's own (clone, generated), then whatever else a host is
- * set to (e.g. a library voice). Shared by the tiles and the Manage voices modal. */
-function hostTiles(state: VoiceState, voices: Voice[]): Tile[] {
-  const byId = new Map(voices.map((v) => [v.voice_id, v]));
-  const tiles: Tile[] = PREBUILT.map((p) => ({ ...p, preview_url: byId.get(p.voice_id)?.preview_url }));
-  if (state.clone.status === "ready" && state.clone.voice_id) {
-    tiles.push({ voice_id: state.clone.voice_id, name: "My voice", tag: "Your clone", icon: "person", preview_url: state.clone.preview_url });
-  }
-  for (const c of state.custom_voices) tiles.push({ voice_id: c.voice_id, name: c.name, tag: "Generated", icon: "wave" });
-  for (const id of [state.host_voices.host_a, state.host_voices.host_b]) {
-    if (!tiles.some((t) => t.voice_id === id)) {
-      const v = byId.get(id);
-      tiles.push({ voice_id: id, name: v?.name ?? "Current voice", tag: v?.labels?.accent ?? "Library voice", icon: "wave", preview_url: v?.preview_url });
-    }
-  }
-  return tiles;
-}
-
-/** Listen to a voice: its sample link when it has one, otherwise a line spoken with the host's delivery. */
-function useListen(host: Host, onError: (msg: string | null) => void) {
-  const [loading, setLoading] = useState<string | null>(null);
-  const { play, playing } = usePlayer();
-  const listen = async (t: Tile) => {
-    if (playing === t.voice_id || t.preview_url) return play(t.preview_url ?? "", t.voice_id);
-    setLoading(t.voice_id);
-    onError(null);
-    try {
-      const { url } = await voiceApi.preview(t.voice_id, { host });
-      play(url, t.voice_id);
-    } catch (e) {
-      onError(errorMessage(e));
-    } finally {
-      setLoading(null);
-    }
-  };
-  return { listen, loading, playing };
-}
-
-function VoicePicker({
-  state,
-  voices,
-  onSaved,
-  onManage,
-}: {
-  state: VoiceState;
-  voices: Voice[];
-  onSaved: (s: VoiceState) => void;
-  onManage: (host: Host) => void;
-}) {
-  const [host, setHost] = useState<Host>("host_a");
-  const [delivery, setDelivery] = useState<Delivery>(state.delivery[host]);
-  const [dirty, setDirty] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { listen, loading, playing } = useListen(host, setError);
-  const current = state.host_voices[host];
-  const other: Host = host === "host_a" ? "host_b" : "host_a";
-
-  useEffect(() => {
-    setDelivery(state.delivery[host]);
-    setDirty(false);
-  }, [state.delivery, host]);
-
-  const tiles = hostTiles(state, voices);
-
-  const choose = async (voice_id: string) => {
-    if (voice_id === current) return;
-    setError(null);
-    try {
-      onSaved(await voiceApi.update({ host_voices: { [host]: voice_id } }));
-    } catch (e) {
-      setError(errorMessage(e));
-    }
-  };
-
-  return (
-    <div className="stack">
-      <div className="row between wrap manage-top">
-        <p className="muted">Audio overviews are a conversation between two hosts. Tap a voice to use it, or add your own.</p>
-        <button className="btn btn-primary" onClick={() => onManage(host)}>
-          Manage voices
-        </button>
-      </div>
-      <Tabs<Host>
-        tabs={[
-          { id: "host_a", label: "Host A · leads" },
-          { id: "host_b", label: "Host B · co-host" },
-        ]}
-        value={host}
-        onChange={setHost}
-      />
-      {/* One row per voice, as in Video voiceovers: tap a row to give it to this host */}
-      <div className="vw-voice-list" role="radiogroup" aria-label={`Voices for ${host === "host_a" ? "Host A" : "Host B"}`}>
-        {tiles.map((t) => {
-          const selected = t.voice_id === current;
-          const usedByOther = t.voice_id === state.host_voices[other];
-          return (
-            <div key={t.voice_id} className={`vw-vrow${selected ? " on" : ""}`}>
-              <PlayButton on={playing === t.voice_id} label={t.name} onClick={() => listen(t)}
-                          disabled={loading !== null || (!t.preview_url && !state.tts_configured)} />
-              <button type="button" role="radio" aria-checked={selected} className="vw-vpick" onClick={() => choose(t.voice_id)}>
-                <strong>{t.name}</strong>
-                <span className="muted">{t.tag}</span>
-              </button>
-              {selected && <span className="voice-badge-inline mono">{host === "host_a" ? "Host A" : "Host B"}</span>}
-              {!selected && usedByOther && <span className="voice-badge-inline dim mono">{other === "host_a" ? "Host A" : "Host B"}</span>}
-            </div>
-          );
-        })}
-      </div>
-      {error && <p className="error-text">{error}</p>}
-      <details className="delivery-card">
-        <summary>
-          Delivery settings for {host === "host_a" ? "Host A" : "Host B"}
-          <svg className="delivery-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-               strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-            <path d="m6 9 6 6 6-6" />
-          </svg>
-        </summary>
-        <div className="delivery-grid">
-          {SLIDERS.map((s) => {
-            const value = Number(delivery[s.key]);
-            const pct = ((value - s.min) / (s.max - s.min)) * 100;
-            return (
-              <label key={s.key} className="delivery-slider">
-                <span className="row between">
-                  <span>{s.label}</span>
-                  <span className="delivery-value mono">{value.toFixed(2)}</span>
-                </span>
-                <input
-                  type="range"
-                  min={s.min}
-                  max={s.max}
-                  step={s.step}
-                  value={value}
-                  style={{ "--pct": `${pct}%` } as CSSProperties}
-                  onChange={(e) => {
-                    setDelivery({ ...delivery, [s.key]: Number(e.target.value) });
-                    setDirty(true);
-                  }}
-                />
-                <span className="muted small">{s.hint}</span>
-              </label>
-            );
-          })}
-        </div>
-        {dirty && (
-          <div className="row end delivery-actions">
-            <button className="btn btn-small" onClick={() => (setDelivery(state.delivery[host]), setDirty(false))}>
-              Reset
-            </button>
-            <button
-              className="btn btn-small btn-primary"
-              onClick={async () => {
-                onSaved(await voiceApi.update({ delivery: { [host]: delivery } }));
-                setDirty(false);
-              }}
-            >
-              Save delivery
-            </button>
-          </div>
-        )}
-      </details>
-    </div>
-  );
-}
-
-// Generating a new voice: build from options, describe it, or clone your own
-
 type GenMode = "options" | "prompt" | "clone";
 
 const GEN_OPTIONS: { key: keyof Omit<VoiceDesignInput, "prompt">; label: string; values: string[] }[] = [
@@ -250,21 +58,18 @@ const PROMPT_IDEAS = [
 
 /** Make a new voice: build it from options, describe it, or clone your own. Inside the Manage voices modals. */
 function GenerateVoicePanel({
-  host,
   state,
   onDone,
   onSaved,
   onClone,
 }: {
-  /** The host the new voice is for; null when made for video voiceovers (no host changes). */
-  host: Host | null;
   state: VoiceState;
   /** Saved: the caller closes or switches away. */
   onDone: () => void;
   onSaved: (s: VoiceState, voiceId: string) => void;
   onClone: () => void;
 }) {
-  const [mode, setMode] = useState<GenMode>("options");
+  const [mode, setMode] = useState<GenMode>("prompt"); // Describe it first
   const [opts, setOpts] = useState<VoiceDesignInput>({ gender: "female", age: "middle-aged", persona: "warm", pace: "measured", accent: "American" });
   const [prompt, setPrompt] = useState("");
   const [result, setResult] = useState<{ description: string; previews: VoiceDesignPreview[] } | null>(null);
@@ -274,7 +79,6 @@ function GenerateVoicePanel({
   const [error, setError] = useState<string | null>(null);
   const { play, playing } = usePlayer();
   const { openUpgrade } = useUpgrade();
-  const hostLabel = host === "host_a" ? "Host A" : host === "host_b" ? "Host B" : null;
 
   const generate = async () => {
     setBusy("generate");
@@ -297,8 +101,7 @@ function GenerateVoicePanel({
     setBusy("save");
     setError(null);
     try {
-      const saved = await voiceApi.saveDesign({ generated_voice_id: picked, name: name.trim(), description: result.description,
-                                                ...(host ? { use_as: host } : {}) });
+      const saved = await voiceApi.saveDesign({ generated_voice_id: picked, name: name.trim(), description: result.description });
       onSaved(saved, saved.voice_id);
       onDone();
     } catch (e) {
@@ -313,9 +116,9 @@ function GenerateVoicePanel({
       <div className="stack">
         <Tabs<GenMode>
           tabs={[
-            { id: "options", label: "Build from options" },
             { id: "prompt", label: "Describe it" },
             { id: "clone", label: "Clone my voice" },
+            { id: "options", label: "Build from options" },
           ]}
           value={mode}
           onChange={(m) => {
@@ -329,8 +132,8 @@ function GenerateVoicePanel({
           <div className="gen-options">
             {GEN_OPTIONS.map((g) => (
               <div key={g.key} className="gen-row">
-                <span className="mono muted small">{g.label}</span>
-                <div className="gen-chips">
+                <span className="gen-label">{g.label}</span>
+                <div className="gen-chips" role="group" aria-label={g.label}>
                   {g.values.map((v) => (
                     <button key={v} type="button" className={`chip${opts[g.key] === v ? " on" : ""}`} aria-pressed={opts[g.key] === v} onClick={() => setOpts({ ...opts, [g.key]: v })}>
                       {v}
@@ -364,7 +167,7 @@ function GenerateVoicePanel({
         {mode === "clone" &&
           (state.clone.allowed ? (
             <>
-              <p className="muted">Read a passage from your own writing for one to three minutes. Your voice becomes Host A, so every audio overview sounds like you.</p>
+              <p className="muted">Read a passage from your own writing for one to three minutes. Your voice joins your voices, ready for audio overviews and videos.</p>
               <div className="row">
                 <button
                   className="btn btn-primary"
@@ -414,7 +217,7 @@ function GenerateVoicePanel({
             <div className="row">
               <input className="input input-sm" placeholder="Name it, e.g. Late night narrator" maxLength={60} value={name} onChange={(e) => setName(e.target.value)} aria-label="Voice name" />
               <button className="btn btn-primary" onClick={save} disabled={busy !== null || !picked || !name.trim()}>
-                {busy === "save" ? "Saving..." : hostLabel ? `Save and use as ${hostLabel}` : "Save voice"}
+                {busy === "save" ? "Saving..." : "Save voice"}
               </button>
             </div>
           </div>
@@ -426,152 +229,6 @@ function GenerateVoicePanel({
   );
 }
 
-// Voice library (commercially licensed voices from ElevenLabs)
-
-function LibraryBrowser({ host, onAdded }: { host: Host; onAdded: (s: VoiceState) => void }) {
-  const [filters, setFilters] = useState({ search: "", gender: "", age: "", accent: "", use_case: "" });
-  const [voices, setVoices] = useState<LibraryVoice[] | null>(null);
-  const [page, setPage] = useState(0);
-  const [hasMore, setHasMore] = useState(false);
-  const [adding, setAdding] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const { play, playing } = usePlayer();
-
-  const load = useCallback(
-    async (p = 0) => {
-      setError(null);
-      try {
-        const res = await voiceApi.library({ ...filters, page: p });
-        setVoices((cur) => (p ? [...(cur ?? []), ...res.voices] : res.voices));
-        setHasMore(res.has_more);
-        setPage(p);
-      } catch (e) {
-        setError(errorMessage(e));
-        setVoices([]);
-      }
-    },
-    [filters],
-  );
-
-  useEffect(() => {
-    const t = setTimeout(() => load(0), 250);
-    return () => clearTimeout(t);
-  }, [load]);
-
-  const select = (key: keyof typeof filters, options: [string, string][]) => (
-    <select className="input input-sm" value={filters[key]} onChange={(e) => setFilters({ ...filters, [key]: e.target.value })} aria-label={key}>
-      {options.map(([v, l]) => (
-        <option key={v} value={v}>
-          {l}
-        </option>
-      ))}
-    </select>
-  );
-
-  return (
-    <>
-      <div className="stack">
-        <p className="muted small">
-          Voices from the ElevenLabs Voice Library, licensed for commercial use on paid ElevenLabs plans. Adding one puts it in your ElevenLabs account.
-        </p>
-        <div className="library-filters">
-          <input className="input input-sm" placeholder="Search: calm narrator, british, podcast" value={filters.search} onChange={(e) => setFilters({ ...filters, search: e.target.value })} aria-label="Search voices" />
-          {select("gender", [["", "Any gender"], ["female", "Female"], ["male", "Male"], ["neutral", "Neutral"]])}
-          {select("age", [["", "Any age"], ["young", "Young"], ["middle_aged", "Middle aged"], ["old", "Older"]])}
-          {select("accent", [["", "Any accent"], ["american", "American"], ["british", "British"], ["australian", "Australian"], ["irish", "Irish"], ["indian", "Indian"], ["african", "African"]])}
-          {select("use_case", [["", "Any use"], ["conversational", "Conversational"], ["narrative_story", "Narration"], ["informative_educational", "Educational"], ["social_media", "Social media"], ["entertainment_tv", "Entertainment"]])}
-        </div>
-        {error && <p className="error-text">{error}</p>}
-        {!voices && <Loading label="Searching voices" />}
-        <ul className="library-grid">
-          {voices?.map((v) => (
-            <li key={`${v.public_owner_id}-${v.voice_id}`} className="library-voice">
-              <div className="row between">
-                <strong>{v.name}</strong>
-                {v.preview_url && (
-                  <button className="btn btn-small" onClick={() => play(v.preview_url!, v.voice_id)} aria-label={`Play ${v.name}`}>
-                    {playing === v.voice_id ? "Stop" : "Play"}
-                  </button>
-                )}
-              </div>
-              <p className="mono muted small">{[v.gender, v.age?.replace("_", " "), v.accent, v.use_case?.replace(/_/g, " ")].filter(Boolean).join(" · ")}</p>
-              {v.description && <p className="muted small clamp-3">{v.description}</p>}
-              {v.notice_period ? <p className="mono muted small">Owner notice period: {v.notice_period} days</p> : null}
-              <button
-                className="btn btn-small btn-primary"
-                disabled={adding !== null}
-                onClick={async () => {
-                  setAdding(v.voice_id);
-                  setError(null);
-                  try {
-                    onAdded(await voiceApi.addFromLibrary(v, host));
-                  } catch (e) {
-                    setError(errorMessage(e));
-                  } finally {
-                    setAdding(null);
-                  }
-                }}
-              >
-                {adding === v.voice_id ? "Adding..." : `Use as ${host === "host_a" ? "Host A" : "Host B"}`}
-              </button>
-            </li>
-          ))}
-          {voices?.length === 0 && !error && <li className="muted">No voices match those filters.</li>}
-        </ul>
-        {hasMore && (
-          <button className="btn" onClick={() => load(page + 1)}>
-            More voices
-          </button>
-        )}
-      </div>
-    </>
-  );
-}
-
-// Managing a host's voices: add one from the library, or make your own
-
-type ManageTab = "library" | "add";
-
-function ManageHostVoicesModal({
-  host,
-  state,
-  onClose,
-  onSaved,
-  onClone,
-}: {
-  host: Host;
-  state: VoiceState;
-  onClose: () => void;
-  onSaved: (s: VoiceState) => void;
-  onClone: () => void;
-}) {
-  const [tab, setTab] = useState<ManageTab>("library");
-  const { openUpgrade } = useUpgrade();
-
-  return (
-    <Modal title={`Voices for ${host === "host_a" ? "Host A" : "Host B"}`} onClose={onClose} wide>
-      <div className="stack">
-        <Tabs<ManageTab>
-          tabs={[
-            { id: "library", label: "Voice library" },
-            { id: "add", label: "Add your voice" },
-          ]}
-          value={tab}
-          onChange={setTab}
-        />
-        {/* Either way the voice is set for this host and shows in the rows, so the modal closes */}
-        {tab === "library" && <LibraryBrowser host={host} onAdded={(s) => { onSaved(s); onClose(); }} />}
-        {tab === "add" && (
-          <GenerateVoicePanel host={host} state={state} onSaved={(s) => onSaved(s)} onDone={onClose}
-                              onClone={() => (state.clone.allowed ? onClone() : openUpgrade("writer"))} />
-        )}
-      </div>
-    </Modal>
-  );
-}
-
-// Cloning
-
 type Take = { file: File; url: string; seconds: number };
 
 function Recorder({ onTake }: { onTake: (t: Take) => void }) {
@@ -764,29 +421,31 @@ function CloneModal({ state, onClose, onDone }: { state: VoiceState; onClose: ()
 
 type Step = "writing" | "hosts";
 
-const STEPS: { id: Step; label: string }[] = [
-  { id: "writing", label: "Writing voice" },
-  { id: "hosts", label: "Speaking voices" },
-];
+/** The underlined link between the two views (Speaking voices <-> Writing voice), its arrow pointing the way. */
+function ViewLink({ to, label, onGo }: { to: Step; label: string; onGo: (s: Step) => void }) {
+  const back = to === "hosts";
+  return (
+    <button type="button" className={`vp-switch${back ? " back" : ""}`} onClick={() => onGo(to)}>
+      {back && <span aria-hidden="true">←</span>}
+      <span className="vp-switch-text">{label}</span>
+      {!back && <span aria-hidden="true">→</span>}
+    </button>
+  );
+}
 
 export default function VoiceProfile() {
   const [state, setState] = useState<VoiceState | null>(null);
   const [draft, setDraft] = useState<VoiceProfileData | null>(null);
-  const [voices, setVoices] = useState<Voice[]>([]);
   const [params] = useSearchParams();
-  // ?step=hosts opens Speaking voices (the old Videos > Voices link lands there, on the video voices).
-  const [step, setStep] = useState<Step | null>(params.get("step") === "hosts" ? "hosts" : null);
+  // Opens on Speaking voices; ?step=writing opens the writing voice (links between the two switch views).
+  const [step, setStep] = useState<Step>(params.get("step") === "writing" ? "writing" : "hosts");
   const [picking, setPicking] = useState(false);
   const [samples, setSamples] = useState<string[]>([]);
   const [buildJob, setBuildJob] = useState<Job | null>(null);
   const [cloneJob, setCloneJob] = useState<Job | null>(null);
   const [cloning, setCloning] = useState(false);
-  const [managing, setManaging] = useState<Host | null>(null);
-  // The Speaking voices card's two tabs. #video-voices (the old Videos > Voices link) opens the video one.
-  const [speakTab, setSpeakTab] = useState<"hosts" | "video">(
-    typeof window !== "undefined" && window.location.hash === "#video-voices" ? "video" : "hosts",
-  );
-  const [videoKey, setVideoKey] = useState(0);
+  const [adding, setAdding] = useState(false); // the Add voices modal
+  const [voicesKey, setVoicesKey] = useState(0); // bumped when a voice was made, so Your voices reloads
   const { openUpgrade } = useUpgrade();
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -798,10 +457,9 @@ export default function VoiceProfile() {
       setState(s);
       setDraft(s.profile);
       setSamples(s.sample_doc_ids);
-      setStep((cur) => cur ?? (s.profile ? "hosts" : "writing"));
       return s;
     });
-  const loadVoices = () => voiceApi.voices().then(setVoices, () => setVoices([]));
+  const loadVoices = () => setVoicesKey((k) => k + 1);
 
   const startBuild = async (ids: string[]) => {
     setPicking(false);
@@ -821,21 +479,18 @@ export default function VoiceProfile() {
         void startBuild([]);
       }
     });
-    loadVoices();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const build = useJob(buildJob, () => load());
   const clone = useJob(cloneJob, () => {
     load();
-    loadVoices();
-    setVideoKey((k) => k + 1); // a new clone shows up under video voiceovers' Your voices
+    loadVoices(); // a finished clone is saved to Your voices as "My voice"
   });
 
-  if (!state || !step) return <Loading />;
+  if (!state) return <Loading />;
   const building = build && (build.status === "queued" || build.status === "running");
   const cloneRunning = clone && (clone.status === "queued" || clone.status === "running");
-  const done: Record<Step, boolean> = { writing: Boolean(state.profile), hosts: Boolean(state.profile) && step === "hosts" };
   const showClone = state.clone.status !== "none" || Boolean(clone);
 
   const saveProfile = async () => {
@@ -850,22 +505,14 @@ export default function VoiceProfile() {
   };
 
   return (
-    <div className="page-wrap vp">
-      <PageHeader eyebrow="Voice profile" title="How you sound, on the page and out loud" />
+    // The Library's Voices tab: speaking voices, and the writing voice behind a link.
+    <div className="stack vp">
 
-      <ol className="vp-steps mono" aria-label="Voice profile steps">
-        {STEPS.map((s, i) => (
-          <li key={s.id} className={s.id === step ? "current" : done[s.id] ? "done" : ""}>
-            <button type="button" onClick={() => setStep(s.id)} aria-current={s.id === step ? "step" : undefined}>
-              <span className="vp-dot" />
-              <span>
-                {i + 1}. {s.label}
-                {done[s.id] && s.id !== step ? " ✓" : ""}
-              </span>
-            </button>
-          </li>
-        ))}
-      </ol>
+      <div className="vp-switch-row">
+        {step === "hosts"
+          ? <ViewLink to="writing" label="Writing voice" onGo={setStep} />
+          : <ViewLink to="hosts" label="Speaking voices" onGo={setStep} />}
+      </div>
       {error && <p className="error-text">{error}</p>}
 
       {step === "writing" && (
@@ -922,9 +569,6 @@ export default function VoiceProfile() {
                 <button className="btn btn-small" onClick={saveProfile}>
                   {saved ? "Saved" : "Save changes"}
                 </button>
-                <button className="btn btn-primary" onClick={() => setStep("hosts")}>
-                  Next: pick your hosts
-                </button>
               </div>
             </>
           )}
@@ -934,47 +578,14 @@ export default function VoiceProfile() {
       {step === "hosts" && (
         <section className="card stack vp-card">
           <h2>Who reads your work aloud</h2>
-          <Tabs<"hosts" | "video">
-            tabs={[
-              { id: "hosts", label: "Hosts Audios" },
-              { id: "video", label: "Video voiceovers" },
-            ]}
-            value={speakTab}
-            onChange={setSpeakTab}
-          />
-          {speakTab === "video" && (
-            <VideoVoicesSection reloadKey={videoKey}
-                                renderAddVoice={(onDone, close) => (
-                                  <GenerateVoicePanel
-                                    host={null}
-                                    state={state}
-                                    onDone={onDone}
-                                    onSaved={(s, voiceId) => {
-                                      setState(s);
-                                      loadVoices();
-                                      // Made for video voiceovers: added there straight away (room and plan permitting).
-                                      videoVoicesApi.save(voiceId)
-                                        .catch((e) => setError(`Saved to your voices, not added to video voiceovers: ${errorMessage(e)}`))
-                                        .finally(() => setVideoKey((k) => k + 1));
-                                    }}
-                                    onClone={() => {
-                                      close(); // the recorder opens in its own modal
-                                      if (state.clone.allowed) setCloning(true);
-                                      else openUpgrade("writer");
-                                    }}
-                                  />
-                                )} />
-          )}
-          {speakTab === "hosts" && (
-          <>
           {!state.tts_configured && <p className="muted">Voice previews are unavailable right now.</p>}
-          <VoicePicker state={state} voices={voices} onSaved={setState} onManage={setManaging} />
+          <YourVoices reloadKey={voicesKey} onAdd={() => setAdding(true)} />
 
           {showClone && (
             <div className="vp-clone">
               <strong>Your cloned voice</strong>
               {clone && (cloneRunning || clone.status === "failed") && <JobProgress job={clone} compact />}
-              {state.clone.status === "processing" && !clone && <p className="muted small">Your voice is being created. It becomes Host A when ready.</p>}
+              {state.clone.status === "processing" && !clone && <p className="muted small">Your voice is being created. It joins your voices when ready.</p>}
               {state.clone.status === "failed" && state.clone.error && !cloneRunning && <p className="error-text">{state.clone.error}</p>}
               <div className="row">
                 {state.clone.status === "ready" && state.clone.preview_url && (
@@ -1001,19 +612,6 @@ export default function VoiceProfile() {
               </div>
             </div>
           )}
-
-          </>
-          )}
-
-          <div className="row">
-            <button className="back-link" onClick={() => setStep("writing")}>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"
-                   strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                <path d="M19 12H5m6-6-6 6 6 6" />
-              </svg>
-              Back to writing voice
-            </button>
-          </div>
         </section>
       )}
 
@@ -1029,20 +627,22 @@ export default function VoiceProfile() {
         </Modal>
       )}
       {cloning && <CloneModal state={state} onClose={() => setCloning(false)} onDone={setCloneJob} />}
-      {managing && (
-        <ManageHostVoicesModal
-          host={managing}
-          state={state}
-          onClose={() => setManaging(null)}
-          onSaved={(s) => {
-            setState(s);
-            loadVoices();
-          }}
-          onClone={() => {
-            setCloning(true);
-            setManaging(null);
-          }}
-        />
+      {adding && (
+        <Modal title="Add voices" onClose={() => setAdding(false)} wide>
+          <GenerateVoicePanel
+            state={state}
+            onDone={() => setAdding(false)}
+            onSaved={(s) => {
+              setState(s);
+              loadVoices(); // the server saved it to Your voices
+            }}
+            onClone={() => {
+              setAdding(false); // the recorder opens in its own modal
+              if (state.clone.allowed) setCloning(true);
+              else openUpgrade("writer");
+            }}
+          />
+        </Modal>
       )}
     </div>
   );

frontend/src/styles/pages.css

@@ -662,7 +662,6 @@ select.input option {
   accent-color: var(--blue);
 }
 
-
 .picker-list {
   list-style: none;
   margin: 0;
@@ -2180,51 +2179,52 @@ select.input option {
   animation: welcome-in 0.35s ease both;
 }
 
-.vp-steps {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  font-size: 0.75rem;
+/* The link between the two views (Speaking voices / Writing voice): underlined text and an arrow */
+.vp-switch-row {
+  display: flex;
+  justify-content: flex-end; /* at the right end */
+  margin: -6px 0 4px;
 }
 
-.vp-steps button {
-  display: grid;
+.vp-switch {
+  display: inline-flex;
+  align-items: center;
   gap: 8px;
-  width: 100%;
-  padding: 0;
+  padding: 4px 0;
   border: 0;
   background: none;
-  color: var(--text-3);
+  color: var(--text-2);
   font: inherit;
-  text-align: left;
+  font-size: 0.95rem;
   cursor: pointer;
+  transition: color 0.15s;
 }
 
-.vp-steps li.done button {
-  color: var(--text-2);
+.vp-switch-text {
+  text-decoration: underline;
+  text-decoration-color: var(--line-strong);
+  text-underline-offset: 4px;
+  transition: text-decoration-color 0.15s;
 }
 
-.vp-steps li.current button {
-  color: var(--white);
+.vp-switch:hover {
+  color: var(--text);
 }
 
-.vp-dot {
-  height: 3px;
-  border-radius: 999px;
-  background: var(--line-strong);
-  transition: background 0.3s, box-shadow 0.3s;
+.vp-switch:hover .vp-switch-text {
+  text-decoration-color: var(--blue);
 }
 
-.vp-steps li.done .vp-dot {
-  background: var(--blue-60);
+.vp-switch > span[aria-hidden] {
+  transition: transform 0.15s;
 }
 
-.vp-steps li.current .vp-dot {
-  background: var(--blue);
-  box-shadow: var(--glow-sm);
+.vp-switch:hover > span[aria-hidden] {
+  transform: translateX(3px);
+}
+
+.vp-switch.back:hover > span[aria-hidden] {
+  transform: translateX(-3px);
 }
 
 .voice-grid {
@@ -2352,14 +2352,69 @@ select.input option {
   border-color: var(--blue);
 }
 
+/* Build from options: one grey card, a label column on the left and its choices on the right, a line between rows */
 .gen-options {
   display: grid;
-  gap: 12px;
+  padding: 6px 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .gen-row {
   display: grid;
-  gap: 6px;
+  grid-template-columns: 110px minmax(0, 1fr);
+  align-items: start; /* the label lines up with the first line of chips, also when they wrap */
+  gap: 8px 16px;
+  padding: 18px 0;
+}
+
+.gen-row + .gen-row {
+  border-top: 1px solid var(--line);
+}
+
+.gen-label {
+  color: var(--text-2);
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 32px; /* a chip's height */
+}
+
+.gen-options .gen-chips {
+  gap: 8px;
+}
+
+/* Its chips: smaller than the app's default chip (the later .chip rule), only in this card */
+/* Soft pills: a faint fill and border; the picked one is tinted blue rather than solid */
+.gen-options .gen-chips .chip {
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-2);
+  font-size: 0.85rem;
+  font-weight: 400;
+  line-height: 30px;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.gen-options .gen-chips .chip:hover {
+  border-color: var(--line-strong);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+}
+
+.gen-options .gen-chips .chip.on {
+  border-color: rgba(33, 124, 255, 0.55);
+  background: rgba(33, 124, 255, 0.2);
+  color: var(--white);
+}
+
+@media (max-width: 560px) {
+  .gen-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 .gen-chips {
@@ -2478,30 +2533,6 @@ select.input option {
   grid-column: 1 / -1;
 }
 
-.library-grid {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  max-height: 52vh;
-  overflow: auto;
-}
-
-.library-voice {
-  display: grid;
-  gap: 6px;
-  align-content: start;
-  padding: 12px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-sm);
-}
-
-.library-voice:hover {
-  border-color: var(--blue-35);
-}
-
 .clone-tips {
   margin: 0;
   padding-left: 18px;
@@ -2777,7 +2808,6 @@ select.input option {
 .artifact-head > div,
 .source-title,
 .nb-card,
-.library-voice,
 .host-card,
 .post-edit,
 .slide-edit,
@@ -4082,27 +4112,11 @@ details.map-legend[open] summary {
   white-space: nowrap;
 }
 
-
 .voice-new .voice-pick:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-/* The host a voice row belongs to (Audio hosts list) */
-.voice-badge-inline {
-  padding: 3px 10px;
-  border-radius: 999px;
-  background: var(--blue);
-  color: var(--white);
-  font-size: 0.72rem;
-  letter-spacing: 0.06em;
-}
-
-.voice-badge-inline.dim {
-  background: var(--surface-2, rgba(255, 255, 255, 0.08));
-  color: var(--text-2);
-}
-
 /* Audio hosts / Video voiceovers: the explainer takes the room, the Manage button sits at the right end */
 .manage-top > p {
   flex: 1;
@@ -4141,98 +4155,6 @@ details.map-legend[open] summary {
   transition: transform 0.15s;
 }
 
-/* Delivery settings for a host: a text link with a chevron that opens a two-column grid of sliders */
-.delivery-card summary {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--text-2);
-  font-size: 0.9rem;
-  cursor: pointer;
-  list-style: none;
-}
-
-.delivery-card summary::-webkit-details-marker {
-  display: none;
-}
-
-.delivery-card summary:hover {
-  color: var(--text);
-}
-
-.delivery-chevron {
-  flex-shrink: 0;
-  transition: transform 0.2s;
-}
-
-.delivery-card[open] .delivery-chevron {
-  transform: rotate(180deg);
-}
-
-.delivery-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 22px 32px;
-  padding-top: 18px;
-}
-
-.delivery-slider {
-  display: grid;
-  gap: 8px;
-  font-size: 0.9rem;
-}
-
-.delivery-value {
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: rgba(33, 124, 255, 0.14);
-  color: var(--blue);
-  font-size: 0.78rem;
-}
-
-/* A slim track, filled up to the thumb (--pct) */
-.delivery-slider input[type="range"] {
-  width: 100%;
-  height: 4px;
-  border-radius: 999px;
-  background: linear-gradient(to right, var(--blue) var(--pct, 50%), var(--line-strong) var(--pct, 50%));
-  appearance: none;
-  outline: none;
-  cursor: pointer;
-}
-
-.delivery-slider input[type="range"]::-webkit-slider-thumb {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--white);
-  border-radius: 50%;
-  background: var(--blue);
-  box-shadow: 0 0 0 4px rgba(33, 124, 255, 0.2);
-  appearance: none;
-}
-
-.delivery-slider input[type="range"]::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--white);
-  border-radius: 50%;
-  background: var(--blue);
-}
-
-.delivery-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 6px rgba(33, 124, 255, 0.35);
-}
-
-.delivery-actions {
-  padding-top: 14px;
-}
-
-@media (max-width: 640px) {
-  .delivery-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 .mm-row-progress {
   flex-basis: 100%;
   padding: 0 6px 6px;

frontend/src/styles/videos.css

@@ -477,6 +477,74 @@
   gap: 2px;
 }
 
+/* The Voice page's two lists (Your voices, Voice library): each in its own grey panel so they read as separate */
+.yv-panel {
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.yv-panel + .yv-panel {
+  margin-top: 8px;
+}
+
+/* Section headings: a step up from the rows, with the count in a small pill */
+.yv-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.yv-count {
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  color: var(--text-2);
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+
+/* Their rows: darker than the panel, four and a half in view, the rest scrolls inside */
+.vw-voice-list-tight {
+  gap: 6px;
+  max-height: calc(4.5 * 60px + 4 * 6px);
+}
+
+.vw-voice-list-tight .vw-vrow {
+  gap: 12px;
+  height: 60px;
+  padding: 0 12px 0 10px;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+/* Your voices: four rows in view and a sliver of the fifth (so it reads as scrollable), plus the list's 2px padding */
+.vw-voice-list-tight.vw-voice-list-four {
+  max-height: calc(4.3 * 60px + 4 * 6px + 2px);
+}
+
+.vw-voice-list-tight .vw-vplay {
+  width: 38px;
+  height: 38px;
+}
+
+.vw-voice-list-tight .vw-vpick {
+  gap: 1px;
+}
+
+.vw-voice-list-tight .vw-vpick strong {
+  font-size: 0.95rem;
+}
+
+.vw-voice-list-tight .vw-vpick span {
+  font-size: 0.8rem;
+}
+
 .vw-vrow:hover {
   border-color: var(--line-strong);
 }