LETS GOOOOOOOOOOOOOOOOOOOOOOOOO

backend/app/pipeline/ingest.py

@@ -556,7 +556,7 @@ def store_entries(
             )
         doc.clean_text = "\n\n".join(f"## {h}\n{t}" if h else t for h, t in sections)
         doc.metadata_json = {
-            **(doc.metadata_json or {}),
+            **{k: v for k, v in (doc.metadata_json or {}).items() if k != "locked"},
             "headings": [h for h, _ in sections if h],
             "words": len(doc.clean_text.split()),
         }
@@ -575,16 +575,60 @@ def store_entries(
     return indexed, skipped, changed
 
 
+# Every plan reads the whole archive (up to this ceiling). Posts past the plan's indexed_posts are stored as locked:
+# listed with their title and text, but with no corpus file, so chat, notebooks and generation never see them.
+# Upgrading re-syncs and unlocks them without asking the writer to reconnect anything.
+ARCHIVE_SCAN_CAP = 5000
+# Sites without a feed are crawled page by page (Firecrawl scrapes when configured), so the ceiling is lower.
+SITE_SCAN_CAP = 500
+
+
+def _newest_first(entries: list[FeedEntry]) -> list[FeedEntry]:
+    """Dated posts newest first; undated ones (site crawls) keep their discovery order after them."""
+    dated = sorted((e for e in entries if e.published_at), key=lambda e: e.published_at.timestamp(), reverse=True)
+    return dated + [e for e in entries if not e.published_at]
+
+
+def store_locked(db: Session, source: Source, entries: list[FeedEntry]) -> tuple[int, set[str]]:
+    """Index posts beyond the plan limit without making them available. Returns (count, corpus paths to remove):
+    a post that was available before (a newer post pushed it out, or the plan went down) loses its corpus file."""
+    locked = 0
+    remove: set[str] = set()
+    for entry in entries:
+        sections = entry.sections if entry.sections is not None else html_to_sections(entry.html)
+        if not sections:
+            continue
+        doc = db.scalar(select(Document).where(Document.source_id == source.id, Document.url == entry.url))
+        if not doc:
+            doc = Document(id=uuid.uuid4(), workspace_id=source.workspace_id, source_id=source.id, url=entry.url)
+            db.add(doc)
+        if doc.path:
+            remove.add(doc.path)
+            doc.path = None
+        doc.title = entry.title
+        doc.published_at = entry.published_at
+        doc.content_hash = None  # forces a full store (corpus file, raw HTML) once the post unlocks
+        doc.clean_text = "\n\n".join(f"## {h}\n{t}" if h else t for h, t in sections)
+        doc.metadata_json = {
+            **(doc.metadata_json or {}),
+            "headings": [h for h, _ in sections if h],
+            "words": len(doc.clean_text.split()),
+            "locked": True,
+        }
+        locked += 1
+    db.commit()
+    return locked, remove
+
+
 def ingest_source(db: Session, source: Source, job: Job, max_posts: int) -> dict:
     source.sync_status = "syncing"
     update_job(db, job, status="running", progress=0.02, message="Contacting your feed")
-    # Fetch one past the plan cap so we can tell the user their archive holds more than was indexed.
-    fetch_limit = max_posts + 1
+    fetch_limit = ARCHIVE_SCAN_CAP
 
     if source.feed_url.startswith(SITE_PREFIX):
         update_job(db, job, message="Mapping your site")
         entries = crawl_site(
-            source.feed_url.removeprefix(SITE_PREFIX), fetch_limit,
+            source.feed_url.removeprefix(SITE_PREFIX), max(SITE_SCAN_CAP, max_posts),
             on_found=lambda n: update_job(db, job, progress=0.05, message=f"Found {n} pages, reading them"),
             on_post=lambda done, total: update_job(db, job, progress=0.05 + 0.05 * done / total,
                                                    message=f"Read {done} of {total} pages"),
@@ -604,20 +648,29 @@ def ingest_source(db: Session, source: Source, job: Job, max_posts: int) -> dict
         except (httpx.HTTPError, ValueError):
             log.warning("substack archive fetch failed for %s", site, exc_info=True)
 
-    capped = len(entries) > max_posts
-    entries = entries[:max_posts]
+    entries = _newest_first(entries)
+    available, beyond = entries[:max_posts], entries[max_posts:]
 
     def progress(done: int, total: int, post_title: str) -> None:
-        update_job(db, job, progress=0.1 + 0.8 * done / total, message=f"{post_title[:80]} is in orbit")
+        update_job(db, job, progress=0.1 + 0.7 * done / total, message=f"{post_title[:80]} is in orbit")
+
+    update_job(db, job, progress=0.1, message=f"Indexing {len(available)} posts")
+    indexed, skipped, changed = store_entries(db, source, available, progress)
 
-    update_job(db, job, progress=0.1, message=f"Indexing {len(entries)} posts")
-    indexed, skipped, changed = store_entries(db, source, entries, progress)
+    locked = 0
+    if beyond:
+        update_job(db, job, progress=0.85,
+                   message=f"Indexing {len(beyond)} more posts. Your plan makes the latest {max_posts} available")
+        locked, remove = store_locked(db, source, beyond)
+        if remove:
+            Corpus(source.workspace_id).write_files({INDEX: rebuild_index(db, source.workspace_id)}, remove=remove)
 
     source.sync_status = "ok"
     source.sync_error = None
     source.last_synced_at = datetime.now(UTC)
     db.commit()
-    return {"indexed": indexed, "skipped": skipped, "found": len(entries), "limit": max_posts, "capped": capped,
+    return {"indexed": indexed, "skipped": skipped, "found": len(entries), "limit": max_posts,
+            "capped": locked > 0, "locked": locked, "available": len(available),
             "changed": [str(i) for i in changed]}
 
 

backend/app/routers/artifacts.py

@@ -11,6 +11,7 @@ from app.services.artifacts import latest_jobs, serialize_artifact, start_artifa
 from app.services.jobs import create_job, serialize_job
 from app.services.renderer import COMPOSITIONS
 from app.services.storage import storage
+from app.services.plans import effective_plan, plan_limit_error
 from app.services.usage import check_limit
 
 router = APIRouter(prefix="/api/artifacts", tags=["artifacts"])
@@ -56,6 +57,11 @@ def _target_title(ctx: Ctx, notebook_id: uuid.UUID | None, document_id: uuid.UUI
                                                    Document.workspace_id == ctx.workspace.id))
         if not doc:
             raise HTTPException(404, "Post not found")
+        if not doc.path:
+            plan = effective_plan(ctx.db, ctx.workspace)
+            raise plan_limit_error(plan, "indexed_posts",
+                                   f"This post is locked. Your plan makes your latest {plan.indexed_posts} posts "
+                                   "available; upgrade to use your whole archive.")
         return doc.title
     if notebook_id:
         nb = ctx.db.scalar(select(Notebook).where(Notebook.id == notebook_id,

backend/app/routers/notebooks.py

@@ -52,7 +52,9 @@ def _get(ctx: Ctx, notebook_id: uuid.UUID) -> Notebook:
 
 def _add_docs(ctx: Ctx, nb: Notebook, ids: list[uuid.UUID]) -> int:
     valid = set(ctx.db.scalars(
-        select(Document.id).where(Document.id.in_(ids), Document.workspace_id == ctx.workspace.id)
+        # Locked posts (beyond the plan's post limit) have no corpus file and cannot join a notebook.
+        select(Document.id).where(Document.id.in_(ids), Document.workspace_id == ctx.workspace.id,
+                                  Document.path.is_not(None))
     ).all())
     existing = set(ctx.db.scalars(select(NotebookDocument.document_id).where(NotebookDocument.notebook_id == nb.id)))
     for doc_id in valid - existing:

backend/app/routers/sources.py

@@ -24,7 +24,7 @@ class UploadImportIn(BaseModel):
     upload_id: uuid.UUID
 
 
-def serialize_source(source: Source, doc_count: int = 0) -> dict:
+def serialize_source(source: Source, doc_count: int = 0, locked_count: int = 0) -> dict:
     return {
         "id": str(source.id),
         "feed_url": source.feed_url,
@@ -35,6 +35,8 @@ def serialize_source(source: Source, doc_count: int = 0) -> dict:
         "sync_error": source.sync_error,
         "last_synced_at": source.last_synced_at.isoformat() if source.last_synced_at else None,
         "document_count": doc_count,
+        # Indexed but beyond the plan's post limit: listed, not usable until the workspace upgrades.
+        "locked_count": locked_count,
         "is_imports": source.feed_url == IMPORTS_FEED,
     }
 
@@ -91,7 +93,12 @@ def list_sources(ctx: Ctx = Depends(get_ctx)):
         .group_by(Source.id)
         .order_by(Source.created_at)
     ).all()
-    return [serialize_source(s, n) for s, n in rows]
+    locked = dict(ctx.db.execute(
+        select(Document.source_id, func.count(Document.id))
+        .where(Document.workspace_id == ctx.workspace.id, Document.path.is_(None))
+        .group_by(Document.source_id)
+    ).all())
+    return [serialize_source(s, n, locked.get(s.id, 0)) for s, n in rows]
 
 
 @router.post("/{source_id}/sync")
@@ -151,6 +158,11 @@ def import_upload(body: UploadImportIn, ctx: Ctx = Depends(get_ctx)):
 documents_router = APIRouter(prefix="/api/documents", tags=["documents"])
 
 
+def is_locked(d: Document) -> bool:
+    """Indexed past the plan's post limit (see ingest.store_locked): visible, but not in the corpus."""
+    return not d.path and bool((d.metadata_json or {}).get("locked"))
+
+
 def serialize_document(d: Document, source: Source | None = None) -> dict:
     meta = d.metadata_json or {}
     return {
@@ -163,6 +175,7 @@ def serialize_document(d: Document, source: Source | None = None) -> dict:
         "published_at": d.published_at.isoformat() if d.published_at else None,
         "words": meta.get("words") or len((d.clean_text or "").split()),
         "evergreen_score": d.evergreen_score,
+        "locked": is_locked(d),
     }
 
 
@@ -198,6 +211,12 @@ def get_document(document_id: uuid.UUID, ctx: Ctx = Depends(get_ctx)):
     if not doc:
         raise HTTPException(404, "Post not found")
     source = ctx.db.get(Source, doc.source_id) if doc.source_id else None
+    if is_locked(doc):
+        # A preview only: the full post is part of what upgrading unlocks.
+        preview = [ln for ln in (doc.clean_text or "").splitlines() if ln.strip()][:3]
+        plan = effective_plan(ctx.db, ctx.workspace)
+        return {**serialize_document(doc, source), "lines": [f"# {doc.title}", "", *preview],
+                "preview": True, "limit": plan.indexed_posts}
     lines: list[str] = []
     if doc.path:
         corpus = Corpus(ctx.workspace.id)

backend/app/routers/voice.py

@@ -57,6 +57,23 @@ class PreviewIn(BaseModel):
     delivery: DeliveryIn | None = None
 
 
+class DesignIn(BaseModel):
+    """Either picked options (Build from options) or a free description (Describe in your own words)."""
+    prompt: str | None = Field(None, max_length=1000)
+    gender: str = Field("", max_length=20)
+    age: str = Field("", max_length=20)
+    persona: str = Field("", max_length=30)
+    pace: str = Field("", max_length=20)
+    accent: str = Field("", max_length=40)
+
+
+class DesignSaveIn(BaseModel):
+    generated_voice_id: str = Field(min_length=5, max_length=100)
+    name: str = Field(min_length=1, max_length=60)
+    description: str = Field("", max_length=1000)
+    use_as: str | None = None  # "host_a" | "host_b"
+
+
 class LibraryAddIn(BaseModel):
     public_owner_id: str = Field(min_length=5, max_length=100)
     voice_id: str = Field(min_length=5, max_length=60)
@@ -116,6 +133,8 @@ def _serialize(ctx: Ctx) -> dict:
             "error": job.error if job and job.status == "failed" else None,
             "preview_url": storage.presign_get(preview_key) if preview_key else None,
         },
+        # Voices this workspace generated with Voice Design (the ElevenLabs account is shared across workspaces).
+        "custom_voices": voices.get("custom") or [],
         "tts_configured": bool(settings.elevenlabs_api_key),
         "model": tts.model_id(),
         "models": tts.MODELS,
@@ -211,6 +230,61 @@ async def preview(body: PreviewIn, ctx: Ctx = Depends(get_ctx)):
     return {"url": storage.presign_get(key), "seconds": round(tts.mp3_seconds(clip), 1)}
 
 
+def _design_description(body: DesignIn) -> str:
+    if body.prompt and body.prompt.strip():
+        text = body.prompt.strip()
+        if len(text) < 20:
+            raise HTTPException(400, "Describe the voice in at least 20 characters.")
+        return text
+    parts = [f"A {body.age} {body.gender} voice".replace("  ", " ") if body.gender or body.age else "A voice"]
+    if body.accent:
+        parts.append(f"with a {body.accent} accent")
+    sentence = " ".join(parts) + "."
+    if body.persona:
+        sentence += f" Sounds {body.persona}."
+    if body.pace:
+        sentence += f" Speaks at a {body.pace} pace."
+    return sentence + " Clear studio quality, suited to podcasts and narration."
+
+
+@router.post("/design")
+async def design(body: DesignIn, ctx: Ctx = Depends(get_ctx)):
+    """Three previews of a new voice. Nothing is saved until the writer picks one."""
+    if not settings.elevenlabs_api_key:
+        raise HTTPException(503, "Set ELEVENLABS_API_KEY in .env to generate voices.")
+    description = _design_description(body)
+    try:
+        previews = await run_in_threadpool(tts.design_voice, description)
+    except tts.TTSError as exc:
+        raise HTTPException(502, str(exc)) from exc
+    out = []
+    for p in previews:
+        key = f"ws/{ctx.workspace.id}/voice-previews/{uuid.uuid4().hex}.mp3"
+        storage.put_bytes(key, p["audio"], "audio/mpeg")
+        out.append({"generated_voice_id": p["generated_voice_id"], "url": storage.presign_get(key), "seconds": p["seconds"]})
+    record_usage(ctx.db, workspace_id=ctx.workspace.id, kind="voice_design", provider="elevenlabs",
+                 quantity=len(out), unit="previews")
+    return {"description": description, "previews": out}
+
+
+@router.post("/design/save")
+async def save_design(body: DesignSaveIn, ctx: Ctx = Depends(get_ctx)):
+    try:
+        voice_id = await run_in_threadpool(tts.create_designed_voice, body.name, body.description,
+                                           body.generated_voice_id)
+    except tts.TTSError as exc:
+        raise HTTPException(502, str(exc)) from exc
+    vp = _ensure_profile(ctx)
+    voices = dict(vp.host_voices or {})
+    voices["custom"] = [*(voices.get("custom") or []),
+                        {"voice_id": voice_id, "name": body.name, "description": body.description[:300]}]
+    if body.use_as in ("host_a", "host_b"):
+        voices[body.use_as] = voice_id
+    vp.host_voices = voices
+    ctx.db.commit()
+    return {"voice_id": voice_id, **_serialize(ctx)}
+
+
 @router.get("/reading-script")
 def reading_script(ctx: Ctx = Depends(get_ctx)):
     """About two minutes of the writer's own prose to read aloud for the clone (their words, their rhythm)."""

backend/app/worker.py

@@ -91,8 +91,9 @@ def handle_ingest(db: Session, job: Job):
             raise PermanentJobError(str(exc)) from exc
         raise
     _after_import(db, job, source.workspace_id, result.get("changed", []))
-    if result.get("capped"):
-        return Done(result, f"First {result['limit']} posts in orbit: your plan's limit. Upgrade to index the rest")
+    if result.get("locked"):
+        return Done(result, f"All {result['found']} posts indexed. Your latest {result['available']} are available; "
+                            f"upgrade to unlock the other {result['locked']}")
     return Done(result, f"All posts in orbit: {result['indexed']} new or updated")
 
 

frontend/src/api/endpoints.ts

@@ -24,6 +24,8 @@ import type {
   Usage,
   Voice,
   Delivery,
+  VoiceDesignInput,
+  VoiceDesignPreview,
   VoiceProfileData,
   VoiceState,
 } from "./types";
@@ -129,6 +131,9 @@ export const voiceApi = {
   readingScript: () => api<{ title: string; text: string; words: number }>("/api/voice/reading-script"),
   quota: () => api<Quota>("/api/voice/quota"),
   revoke: () => del<VoiceState>("/api/voice/consent"),
+  design: (input: VoiceDesignInput) => post<{ description: string; previews: VoiceDesignPreview[] }>("/api/voice/design", input),
+  saveDesign: (body: { generated_voice_id: string; name: string; description: string; use_as?: "host_a" | "host_b" }) =>
+    post<VoiceState & { voice_id: string }>("/api/voice/design/save", body),
 };
 
 export type ItemBody = {

frontend/src/api/types.ts

@@ -195,9 +195,14 @@ export type VoiceState = {
     error: string | null;
     preview_url: string | null;
   };
+  /** Voices this workspace generated with Voice Design. */
+  custom_voices: { voice_id: string; name: string; description?: string }[];
   tts_configured: boolean;
 };
 
+export type VoiceDesignInput = { prompt?: string; gender?: string; age?: string; persona?: string; pace?: string; accent?: string };
+export type VoiceDesignPreview = { generated_voice_id: string; url: string; seconds: number | null };
+
 export type Delivery = { stability: number; similarity_boost: number; style: number; speed: number; use_speaker_boost?: boolean };
 
 export type Voice = {

frontend/src/pages/VoiceProfile.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { voiceApi } from "../api/endpoints";
-import type { Delivery, Job, LibraryVoice, Quota, Voice, VoiceProfileData, VoiceState } from "../api/types";
+import type { Delivery, Job, LibraryVoice, Quota, Voice, VoiceDesignInput, VoiceDesignPreview, VoiceProfileData, VoiceState } from "../api/types";
 import { DocPicker } from "../components/DocPicker";
-import { ConfirmButton, errorMessage, formatDate, JobProgress, Loading, Modal, PageHeader } from "../components/ui";
+import { ConfirmButton, errorMessage, formatDate, JobProgress, Loading, Modal, PageHeader, Tabs } from "../components/ui";
 import { useJob } from "../hooks/useJob";
 import { useUpgrade } from "../hooks/useUpgrade";
 
@@ -23,8 +23,6 @@ const SLIDERS: { key: keyof Delivery; label: string; min: number; max: number; s
   { key: "speed", label: "Speed", min: 0.7, max: 1.2, step: 0.05, hint: "1.0 is natural pace" },
 ];
 
-const HOST_LABEL: Record<Host, string> = { host_a: "Host A, leads and narrates videos", host_b: "Host B, the co-host" };
-
 /** Plays one URL at a time across the page. */
 function usePlayer() {
   const audio = useRef<HTMLAudioElement | null>(null);
@@ -51,83 +49,159 @@ function fmtSeconds(s: number) {
 
 // Speaking voices
 
-function HostCard({
-  host,
+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" },
+];
+
+const ICON_PATHS: Record<Icon, string> = {
+  sun: "M12 4V2m0 20v-2m8-8h2M2 12h2m13.66-5.66 1.41-1.41M4.93 19.07l1.41-1.41m0-11.32L4.93 4.93m14.14 14.14-1.41-1.41M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z",
+  book: "M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5v-15Zm0 15A2.5 2.5 0 0 0 6.5 23H20v-5",
+  mic: "M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Zm7 9a7 7 0 0 1-14 0m7 7v4m-4 0h8",
+  spark: "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Zm7 11 .8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14Z",
+  wave: "M3 12h2m3-5v10m4-13v16m4-11v6m4-3h1",
+  person: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 9a7 7 0 0 1 14 0",
+};
+
+function VoiceIcon({ icon }: { icon: Icon }) {
+  return (
+    <span className="voice-icon" aria-hidden="true">
+      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
+        <path d={ICON_PATHS[icon]} />
+      </svg>
+    </span>
+  );
+}
+
+type Tile = { voice_id: string; name: string; tag: string; icon: Icon; preview_url?: string | null };
+
+function VoicePicker({
   state,
   voices,
   onSaved,
   onBrowse,
+  onGenerate,
 }: {
-  host: Host;
   state: VoiceState;
   voices: Voice[];
   onSaved: (s: VoiceState) => void;
   onBrowse: (host: Host) => void;
+  onGenerate: (host: Host) => void;
 }) {
+  const [host, setHost] = useState<Host>("host_a");
   const [delivery, setDelivery] = useState<Delivery>(state.delivery[host]);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [dirty, setDirty] = useState(false);
+  const [loading, setLoading] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
   const { play, playing } = usePlayer();
   const current = state.host_voices[host];
-  const groups = voices.reduce<Record<string, Voice[]>>((acc, v) => {
-    const k = v.category ?? "other";
-    (acc[k] ??= []).push(v);
-    return acc;
-  }, {});
+  const other: Host = host === "host_a" ? "host_b" : "host_a";
+  const byId = new Map(voices.map((v) => [v.voice_id, v]));
 
   useEffect(() => {
     setDelivery(state.delivery[host]);
     setDirty(false);
   }, [state.delivery, host]);
 
-  const preview = async () => {
-    setBusy(true);
+  // Prebuilt first, then the writer's own voices, then whatever else a host is set to (e.g. a library voice).
+  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 });
+    }
+  }
+
+  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);
     setError(null);
     try {
-      const { url } = await voiceApi.preview(current, { delivery });
-      play(url, "preview");
+      const { url } = await voiceApi.preview(t.voice_id, { host });
+      play(url, t.voice_id);
     } catch (e) {
       setError(errorMessage(e));
     } finally {
-      setBusy(false);
+      setLoading(null);
+    }
+  };
+
+  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="host-card">
-      <div className="row between">
-        <strong>{HOST_LABEL[host]}</strong>
-        <button className="link-btn small" onClick={() => onBrowse(host)}>
-          Browse voice library
-        </button>
-      </div>
-      <div className="row">
-        <select
-          className="input input-sm"
-          value={current}
-          onChange={async (e) => onSaved(await voiceApi.update({ host_voices: { [host]: e.target.value } }))}
-          aria-label={`${HOST_LABEL[host]} voice`}
-        >
-          {Object.entries(groups).map(([cat, list]) => (
-            <optgroup key={cat} label={cat}>
-              {list.map((v) => (
-                <option key={v.voice_id} value={v.voice_id}>
-                  {v.name}
-                  {v.labels?.accent ? `, ${v.labels.accent}` : ""}
-                  {v.labels?.gender ? `, ${v.labels.gender}` : ""}
-                </option>
-              ))}
-            </optgroup>
-          ))}
-          {!voices.some((v) => v.voice_id === current) && <option value={current}>Current voice</option>}
-        </select>
-        <button className="btn btn-small" onClick={preview} disabled={busy || !state.tts_configured}>
-          {busy ? "Rendering..." : playing ? "Stop" : "Preview"}
-        </button>
-      </div>
+    <div className="stack">
+      <Tabs<Host>
+        tabs={[
+          { id: "host_a", label: "Host A · leads" },
+          { id: "host_b", label: "Host B · co-host" },
+        ]}
+        value={host}
+        onChange={setHost}
+      />
+      <ul className="voice-grid" 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 (
+            <li key={t.voice_id} className={`voice-tile${selected ? " on" : ""}`}>
+              <button type="button" className="voice-pick" onClick={() => choose(t.voice_id)} aria-pressed={selected}>
+                <VoiceIcon icon={t.icon} />
+                <strong>{t.name}</strong>
+                <span className="muted small">{t.tag}</span>
+              </button>
+              {selected && <span className="voice-badge mono">{host === "host_a" ? "Host A" : "Host B"}</span>}
+              {!selected && usedByOther && <span className="voice-badge dim mono">{other === "host_a" ? "Host A" : "Host B"}</span>}
+              <button
+                type="button"
+                className="icon-btn voice-play"
+                onClick={() => listen(t)}
+                disabled={loading !== null || (!t.preview_url && !state.tts_configured)}
+                aria-label={playing === t.voice_id ? `Stop ${t.name}` : `Play ${t.name}`}
+                title={playing === t.voice_id ? "Stop" : "Listen"}
+              >
+                {loading === t.voice_id ? (
+                  "…"
+                ) : (
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    {playing === t.voice_id ? <path d="M6 5h4v14H6zM14 5h4v14h-4z" /> : <path d="M7 4.5v15l13-7.5z" />}
+                  </svg>
+                )}
+              </button>
+            </li>
+          );
+        })}
+        <li className="voice-tile voice-new">
+          <button type="button" className="voice-pick" onClick={() => onGenerate(host)} aria-label="Add a voice">
+            <span className="voice-icon plus" aria-hidden="true">
+              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+            </span>
+            <strong>Add a voice</strong>
+            <span className="muted small">Generate or clone your own</span>
+          </button>
+        </li>
+      </ul>
+      {error && <p className="error-text">{error}</p>}
       <details className="delivery">
-        <summary className="mono muted small">Delivery settings</summary>
+        <summary className="mono muted small">Delivery settings for {host === "host_a" ? "Host A" : "Host B"}</summary>
         {SLIDERS.map((s) => (
           <label key={s.key} className="slider" title={s.hint}>
             <span className="row between">
@@ -164,11 +238,210 @@ function HostCard({
           </div>
         )}
       </details>
-      {error && <p className="error-text">{error}</p>}
+      <p className="muted small">
+        Want something else?{" "}
+        <button className="link-btn small" onClick={() => onBrowse(host)}>
+          Browse the full voice library
+        </button>
+      </p>
     </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[] }[] = [
+  { key: "gender", label: "Gender", values: ["female", "male", "neutral"] },
+  { key: "age", label: "Age", values: ["young", "middle-aged", "older"] },
+  { key: "persona", label: "Personality", values: ["warm", "professional", "calm", "friendly", "confident", "energetic"] },
+  { key: "pace", label: "Pace", values: ["slow", "measured", "brisk"] },
+  { key: "accent", label: "Accent", values: ["American", "British", "Australian", "Irish", "Scottish", "Indian", "Canadian", "South African"] },
+];
+
+const PROMPT_IDEAS = [
+  "A calm, low British voice for late night essays",
+  "An upbeat young American podcaster who smiles while talking",
+  "A thoughtful older narrator with a soft Irish lilt",
+];
+
+function GenerateVoiceModal({
+  host,
+  state,
+  onClose,
+  onSaved,
+  onClone,
+}: {
+  host: Host;
+  state: VoiceState;
+  onClose: () => void;
+  onSaved: (s: VoiceState) => void;
+  onClone: () => void;
+}) {
+  const [mode, setMode] = useState<GenMode>("options");
+  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);
+  const [picked, setPicked] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState<"generate" | "save" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { play, playing } = usePlayer();
+  const { openUpgrade } = useUpgrade();
+  const hostLabel = host === "host_a" ? "Host A" : "Host B";
+
+  const generate = async () => {
+    setBusy("generate");
+    setError(null);
+    setResult(null);
+    setPicked(null);
+    try {
+      const res = await voiceApi.design(mode === "prompt" ? { prompt } : opts);
+      setResult(res);
+      setPicked(res.previews[0]?.generated_voice_id ?? null);
+    } catch (e) {
+      setError(errorMessage(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const save = async () => {
+    if (!result || !picked) return;
+    setBusy("save");
+    setError(null);
+    try {
+      onSaved(await voiceApi.saveDesign({ generated_voice_id: picked, name: name.trim(), description: result.description, use_as: host }));
+      onClose();
+    } catch (e) {
+      setError(errorMessage(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <Modal title="Generate a new voice" onClose={onClose} wide>
+      <div className="stack">
+        <Tabs<GenMode>
+          tabs={[
+            { id: "options", label: "Build from options" },
+            { id: "prompt", label: "Describe it" },
+            { id: "clone", label: "Clone my voice" },
+          ]}
+          value={mode}
+          onChange={(m) => {
+            setMode(m);
+            setResult(null);
+            setError(null);
+          }}
+        />
+
+        {mode === "options" && (
+          <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">
+                  {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}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {mode === "prompt" && (
+          <>
+            <label className="field">
+              <span>Describe the voice you want</span>
+              <textarea className="textarea" rows={3} maxLength={1000} placeholder="A calm, low British voice for late night essays" value={prompt} onChange={(e) => setPrompt(e.target.value)} />
+            </label>
+            <div className="row between">
+              <div className="gen-chips">
+                {PROMPT_IDEAS.map((p) => (
+                  <button key={p} type="button" className="chip" onClick={() => setPrompt(p)}>
+                    {p}
+                  </button>
+                ))}
+              </div>
+              <span className="mono muted small">{prompt.trim().length} / 1000</span>
+            </div>
+          </>
+        )}
+
+        {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 overview and video sounds like you.</p>
+              <div className="row">
+                <button
+                  className="btn btn-primary"
+                  disabled={!state.tts_configured}
+                  onClick={() => {
+                    onClose();
+                    onClone();
+                  }}
+                >
+                  {state.clone.status === "ready" ? "Record my voice again" : "Start recording"}
+                </button>
+              </div>
+            </>
+          ) : (
+            <div className="vp-upgrade">
+              <div>
+                <strong>Voice cloning is on the Writer and Studio plans</strong>
+                <p className="muted small">Record a couple of minutes and every audio overview and video is narrated by you.</p>
+              </div>
+              <button className="btn btn-primary" onClick={() => openUpgrade("writer")}>
+                Upgrade to clone my voice
+              </button>
+            </div>
+          ))}
+
+        {mode !== "clone" && (
+          <div className="row end">
+            <button className="btn btn-primary" onClick={generate} disabled={busy !== null || !state.tts_configured || (mode === "prompt" && prompt.trim().length < 20)}>
+              {busy === "generate" ? "Generating previews..." : result ? "Generate again" : "Generate previews"}
+            </button>
+          </div>
+        )}
+
+        {result && mode !== "clone" && (
+          <div className="stack">
+            <p className="eyebrow">Pick the one you like</p>
+            <ul className="gen-previews">
+              {result.previews.map((p, i) => (
+                <li key={p.generated_voice_id} className={picked === p.generated_voice_id ? "on" : ""}>
+                  <label className="check">
+                    <input type="radio" name="gen-preview" checked={picked === p.generated_voice_id} onChange={() => setPicked(p.generated_voice_id)} />
+                    Option {i + 1}
+                  </label>
+                  <button type="button" className="btn btn-small" onClick={() => play(p.url, p.generated_voice_id)}>
+                    {playing === p.generated_voice_id ? "Stop" : "Play"}
+                  </button>
+                </li>
+              ))}
+            </ul>
+            <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..." : `Save and use as ${hostLabel}`}
+              </button>
+            </div>
+          </div>
+        )}
+        {!state.tts_configured && <p className="muted small">Set ELEVENLABS_API_KEY in .env to generate voices.</p>}
+        {error && <p className="error-text">{error}</p>}
+      </div>
+    </Modal>
+  );
+}
+
 // Voice library (commercially licensed voices from ElevenLabs)
 
 function LibraryModal({ host, onClose, onAdded }: { host: Host; onClose: () => void; onAdded: (s: VoiceState) => void }) {
@@ -483,6 +756,7 @@ export default function VoiceProfile() {
   const [cloneJob, setCloneJob] = useState<Job | null>(null);
   const [cloning, setCloning] = useState(false);
   const [browsing, setBrowsing] = useState<Host | null>(null);
+  const [generating, setGenerating] = useState<Host | null>(null);
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { play, playing } = usePlayer();
@@ -583,7 +857,7 @@ export default function VoiceProfile() {
             <>
               <label className="field">
                 <span>In a sentence, you sound like this</span>
-                <textarea className="textarea" rows={3} value={draft.summary} onChange={(e) => setDraft({ ...draft, summary: e.target.value })} />
+                <textarea className="textarea" rows={7} value={draft.summary} onChange={(e) => setDraft({ ...draft, summary: e.target.value })} />
               </label>
               <details className="delivery">
                 <summary className="mono muted small">Fine-tune tone, phrases and habits</summary>
@@ -631,14 +905,10 @@ export default function VoiceProfile() {
           <p className="eyebrow">Step 2 of 3</p>
           <h2>Pick who reads your work aloud</h2>
           <p className="muted">
-            Audio overviews are a conversation between two hosts. Videos are narrated by Host A. Press Preview to hear each one, or browse the library for more voices.
+            Audio overviews are a conversation between two hosts, and videos are narrated by Host A. Tap a voice to use it, press play to hear it, or generate your own.
           </p>
           {!state.tts_configured && <p className="muted">Set ELEVENLABS_API_KEY in .env to generate audio.</p>}
-          <div className="vp-hosts">
-            {(["host_a", "host_b"] as Host[]).map((h) => (
-              <HostCard key={h} host={h} state={state} voices={voices} onSaved={setState} onBrowse={setBrowsing} />
-            ))}
-          </div>
+          <VoicePicker state={state} voices={voices} onSaved={setState} onBrowse={setBrowsing} onGenerate={setGenerating} />
           <div className="row between">
             <button className="btn btn-small" onClick={() => setStep("writing")}>
               Back
@@ -746,6 +1016,18 @@ export default function VoiceProfile() {
         </Modal>
       )}
       {cloning && <CloneModal state={state} onClose={() => setCloning(false)} onDone={setCloneJob} />}
+      {generating && (
+        <GenerateVoiceModal
+          host={generating}
+          state={state}
+          onClose={() => setGenerating(null)}
+          onSaved={(s) => {
+            setState(s);
+            loadVoices();
+          }}
+          onClone={() => setCloning(true)}
+        />
+      )}
       {browsing && (
         <LibraryModal
           host={browsing}

frontend/src/styles/pages.css

@@ -2030,12 +2030,189 @@ select.input option {
   box-shadow: var(--glow-sm);
 }
 
-.vp-hosts {
+.voice-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
 }
 
+@media (max-width: 720px) {
+  .voice-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.voice-tile {
+  position: relative;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s;
+}
+
+.voice-tile:hover {
+  border-color: var(--line-strong);
+  transform: translateY(-2px);
+}
+
+.voice-tile.on {
+  border-color: var(--blue);
+  background: var(--blue-05);
+  box-shadow: var(--glow-sm);
+}
+
+.voice-pick {
+  width: 100%;
+  display: grid;
+  justify-items: center;
+  gap: 4px;
+  padding: 26px 12px 18px;
+  border: 0;
+  background: none;
+  color: var(--white);
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+}
+
+.voice-pick strong {
+  margin-top: 10px;
+  font-size: 1rem;
+}
+
+.voice-pick strong,
+.voice-pick span.small {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.voice-icon {
+  display: grid;
+  place-items: center;
+  width: 76px;
+  height: 76px;
+  border-radius: 999px;
+  border: 1px solid var(--blue-35);
+  color: var(--blue);
+  background: var(--blue-05);
+  transition: background 0.2s, color 0.2s;
+}
+
+.voice-tile.on .voice-icon {
+  background: var(--blue);
+  border-color: var(--blue);
+  color: var(--white);
+  box-shadow: var(--glow-sm);
+}
+
+.voice-badge {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--blue);
+  color: var(--white);
+  font-size: 0.625rem;
+  letter-spacing: 0.04em;
+  pointer-events: none;
+}
+
+.voice-badge.dim {
+  background: var(--line-strong);
+  color: var(--text-2);
+}
+
+.voice-play {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 0;
+  border-color: var(--line-strong);
+}
+
+.voice-new {
+  border-style: dashed;
+  border-color: var(--line-strong);
+}
+
+.voice-new:hover {
+  border-color: var(--blue-60);
+}
+
+.voice-icon.plus {
+  border-style: dashed;
+  background: transparent;
+}
+
+.voice-new:hover .voice-icon.plus {
+  color: var(--white);
+  border-color: var(--blue);
+}
+
+.gen-options {
+  display: grid;
+  gap: 12px;
+}
+
+.gen-row {
+  display: grid;
+  gap: 6px;
+}
+
+.gen-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.gen-chips .chip {
+  padding: 5px 12px;
+  background: transparent;
+  color: var(--text-2);
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+
+.gen-chips .chip:hover {
+  color: var(--white);
+}
+
+.gen-chips .chip.on {
+  background: var(--blue);
+  border-color: var(--blue);
+  color: var(--white);
+}
+
+.gen-previews {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.gen-previews li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.gen-previews li.on {
+  border-color: var(--blue);
+  background: var(--blue-05);
+}
+
 .vp-how {
   list-style: none;
   margin: 0;

frontend/src/styles/tools.css

@@ -23,12 +23,34 @@
   gap: 1rem;
 }
 
+/* Flat, opaque writing surface: overrides the pill shaped, see-through .input so the starfield does not show
+   through and the box edge is obvious. */
 .tool-input {
+  display: block;
   width: 100%;
+  height: auto;
   min-height: 14rem;
+  padding: 14px 16px;
   resize: vertical;
-  font: inherit;
-  line-height: 1.6;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: #0d0f14;
+  box-shadow: none;
+  color: var(--text);
+  font: 400 1rem/1.6 var(--font-body);
+}
+
+.tool-input:hover {
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.tool-input:focus {
+  border-color: var(--blue);
+  box-shadow: none;
+}
+
+.tool-input::placeholder {
+  color: var(--text-2);
 }
 
 .tool-output {