LETS GOOOOOOOOOOOOOOOOOOOOOOOOO

backend/alembic/versions/0004_archive_notebook.py

@@ -0,0 +1,24 @@
+"""notebooks.is_archive: the workspace's always-present "All posts" notebook
+
+Revision ID: 0004_archive_notebook
+Revises: 0003_billing_events
+Create Date: 2026-09-28
+"""
+import sqlalchemy as sa
+from alembic import op
+
+revision = "0004_archive_notebook"
+down_revision = "0003_billing_events"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # 0001 builds from the live models, so a fresh database may already have the column.
+    columns = {c["name"] for c in sa.inspect(op.get_bind()).get_columns("notebooks")}
+    if "is_archive" not in columns:
+        op.add_column("notebooks", sa.Column("is_archive", sa.Boolean(), nullable=False, server_default=sa.false()))
+
+
+def downgrade() -> None:
+    op.drop_column("notebooks", "is_archive")

backend/app/models/content.py

@@ -65,6 +65,8 @@ class Notebook(IdMixin, TimestampMixin, Base):
     title: Mapped[str] = mapped_column(String(300))
     description: Mapped[str | None] = mapped_column(Text)
     summary: Mapped[str | None] = mapped_column(Text)
+    # The workspace's "All posts" notebook: created on demand, kept in step with every indexed post.
+    is_archive: Mapped[bool] = mapped_column(Boolean, default=False)
 
 
 class NotebookDocument(Base):

backend/app/routers/artifacts.py

@@ -7,6 +7,7 @@ from sqlalchemy import func, or_, select
 
 from app.auth import Ctx, get_ctx
 from app.models import Artifact, CalendarItem, Document, Job, Notebook
+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
 from app.services.renderer import COMPOSITIONS
@@ -28,6 +29,7 @@ class GenerateIn(BaseModel):
     type: Literal["summary", "audio_overview", "video", "quote_card", "carousel", "launch_kit"]
     notebook_id: uuid.UUID | None = None
     document_id: uuid.UUID | None = None
+    archive: bool = False  # no notebook or post picked: use the "All posts" notebook
     # audio_overview
     format: Literal["deep_dive", "brief", "debate"] = "deep_dive"
     minutes: int = Field(6, ge=1, le=30)
@@ -75,6 +77,8 @@ def _target_title(ctx: Ctx, notebook_id: uuid.UUID | None, document_id: uuid.UUI
 @router.post("/generate")
 def generate(body: GenerateIn, ctx: Ctx = Depends(get_ctx)):
     """One entry point for every generated artifact."""
+    if body.archive and not body.notebook_id and not body.document_id:
+        body.notebook_id = ensure_archive_notebook(ctx).id
     params: dict = {}
     content: dict = {}
     if body.type == "video" and body.style == "audiogram":

backend/app/routers/notebooks.py

@@ -72,6 +72,29 @@ def create_notebook(body: NotebookIn, ctx: Ctx = Depends(get_ctx)):
     return {"id": str(nb.id), "title": nb.title, "added": added}
 
 
+ARCHIVE_TITLE = "All posts"
+
+
+def ensure_archive_notebook(ctx: Ctx) -> Notebook:
+    """The workspace's "All posts" notebook, topped up with every indexed post (locked posts are skipped)."""
+    nb = ctx.db.scalar(select(Notebook).where(Notebook.workspace_id == ctx.workspace.id, Notebook.is_archive.is_(True)))
+    if not nb:
+        nb = Notebook(workspace_id=ctx.workspace.id, title=ARCHIVE_TITLE, is_archive=True,
+                      description="Every indexed post in your archive, kept up to date.")
+        ctx.db.add(nb)
+        ctx.db.flush()
+    ids = list(ctx.db.scalars(select(Document.id).where(Document.workspace_id == ctx.workspace.id)))
+    _add_docs(ctx, nb, ids)
+    ctx.db.commit()
+    return nb
+
+
+@router.post("/archive")
+def archive_notebook(ctx: Ctx = Depends(get_ctx)):
+    nb = ensure_archive_notebook(ctx)
+    return {"id": str(nb.id), "title": nb.title}
+
+
 @router.post("/from-topic/{topic_id}")
 def notebook_from_topic(topic_id: uuid.UUID, ctx: Ctx = Depends(get_ctx)):
     topic = ctx.db.scalar(select(Topic).where(Topic.id == topic_id, Topic.workspace_id == ctx.workspace.id))
@@ -89,7 +112,8 @@ def notebook_from_topic(topic_id: uuid.UUID, ctx: Ctx = Depends(get_ctx)):
 @router.get("")
 def list_notebooks(ctx: Ctx = Depends(get_ctx)):
     rows = ctx.db.scalars(
-        select(Notebook).where(Notebook.workspace_id == ctx.workspace.id).order_by(Notebook.updated_at.desc())
+        select(Notebook).where(Notebook.workspace_id == ctx.workspace.id)
+        .order_by(Notebook.is_archive.desc(), Notebook.updated_at.desc())
     ).all()
     ids = [n.id for n in rows]
     doc_counts = dict(ctx.db.execute(
@@ -105,7 +129,7 @@ def list_notebooks(ctx: Ctx = Depends(get_ctx)):
     return [
         {"id": str(n.id), "title": n.title, "description": n.description, "summary": n.summary,
          "document_count": doc_counts.get(n.id, 0), "chat_count": chat_counts.get(n.id, 0),
-         "artifact_count": artifact_counts.get(n.id, 0),
+         "artifact_count": artifact_counts.get(n.id, 0), "is_archive": n.is_archive,
          "updated_at": n.updated_at.isoformat() if n.updated_at else None}
         for n in rows
     ]
@@ -114,6 +138,8 @@ def list_notebooks(ctx: Ctx = Depends(get_ctx)):
 @router.get("/{notebook_id}")
 def get_notebook(notebook_id: uuid.UUID, ctx: Ctx = Depends(get_ctx)):
     nb = _get(ctx, notebook_id)
+    if nb.is_archive:  # posts synced since it was made join on open
+        ensure_archive_notebook(ctx)
     docs = ctx.db.scalars(
         select(Document)
         .join(NotebookDocument, NotebookDocument.document_id == Document.id)
@@ -125,6 +151,7 @@ def get_notebook(notebook_id: uuid.UUID, ctx: Ctx = Depends(get_ctx)):
         "title": nb.title,
         "description": nb.description,
         "summary": nb.summary,
+        "is_archive": nb.is_archive,
         "documents": [serialize_document(d) for d in docs],
     }
 

backend/app/routers/voice.py

@@ -165,6 +165,11 @@ def update_voice(body: ProfileIn, ctx: Ctx = Depends(get_ctx)):
 
 @router.post("/build")
 def build(body: BuildIn, ctx: Ctx = Depends(get_ctx)):
+    if not body.document_ids:  # the automatic build after a sync may already be running; follow that one
+        pending = ctx.db.scalar(select(Job).where(Job.workspace_id == ctx.workspace.id, Job.kind == "voice_profile",
+                                                  Job.status.in_(("queued", "running"))).limit(1))
+        if pending:
+            return serialize_job(pending)
     job = create_job(ctx.db, ctx.workspace.id, "voice_profile",
                      {"document_ids": [str(i) for i in body.document_ids]}, max_attempts=2)
     return serialize_job(job)

backend/app/services/billing.py

@@ -112,7 +112,7 @@ def build_nudges(db: Session, workspace: Workspace, plan: Plan, meters: list[dic
                           "Open Launchpad", "/app/launchpad", priority=35))
     out.append(_nudge(f"act-resurface-{month}", "action", "Old posts, new orbit",
                       "Resurfacing finds evergreen posts worth sharing again this month.", "Find evergreen posts",
-                      "/app/resurface", priority=20))
+                      "/app/launchpad#ideas", priority=20))
     return sorted(out, key=lambda n: -n["priority"])
 
 

backend/app/worker.py

@@ -67,10 +67,22 @@ HANDED_OFF = object()  # the job continues elsewhere (renderer) and reports back
 # Handlers: (db, job) -> Done | HANDED_OFF. Raise to trigger a retry.
 
 
+def _pending(db: Session, workspace_id: uuid.UUID, kind: str) -> bool:
+    return db.scalar(select(Job.id).where(Job.workspace_id == workspace_id, Job.kind == kind,
+                                          Job.status.in_(("queued", "running"))).limit(1)) is not None
+
+
 def _after_import(db: Session, job: Job, workspace_id: uuid.UUID, changed: list[str]) -> None:
-    """New or changed posts get mapped into the topic constellation automatically."""
-    if changed and settings.llm_api_key:
-        create_job(db, workspace_id, "topics", {"document_ids": changed}, max_attempts=2)
+    """New or changed posts are mapped into the topic constellation and scored for resurfacing, and the
+    first import builds the writing voice, so none of these need a button press."""
+    if not changed or not settings.llm_api_key:
+        return
+    create_job(db, workspace_id, "topics", {"document_ids": changed}, max_attempts=2)
+    if not _pending(db, workspace_id, "resurface_scan"):
+        create_job(db, workspace_id, "resurface_scan", {}, max_attempts=2)
+    vp = db.scalar(select(VoiceProfile).where(VoiceProfile.workspace_id == workspace_id))
+    if not (vp and vp.profile_json) and not _pending(db, workspace_id, "voice_profile"):
+        create_job(db, workspace_id, "voice_profile", {"document_ids": []}, max_attempts=2)
 
 
 def handle_ingest(db: Session, job: Job):

backend/tests/test_simplified_flows.py

@@ -0,0 +1,47 @@
+"""One-click flows: the "All posts" notebook, whole-archive generation, and jobs that run after a sync."""
+
+from sqlalchemy import select
+
+from app.config import settings
+from app.models import Job
+from tests.test_buildout import auth, connect, docs, feed, llm  # noqa: F401  (fixtures)
+
+
+def test_archive_notebook_is_created_once_and_listed_first(client, auth, run_jobs, feed):
+    connect(client, auth, run_jobs)
+    client.post("/api/notebooks", json={"title": "Newer"}, headers=auth)
+    first = client.post("/api/notebooks/archive", headers=auth).json()
+    again = client.post("/api/notebooks/archive", headers=auth).json()
+    assert first["id"] == again["id"] and first["title"] == "All posts"
+
+    listed = client.get("/api/notebooks", headers=auth).json()
+    assert listed[0]["id"] == first["id"] and listed[0]["is_archive"]
+    indexed = [d for d in docs(client, auth) if d["path"]]
+    assert listed[0]["document_count"] == len(indexed) > 0
+
+    nb = client.get(f"/api/notebooks/{first['id']}", headers=auth).json()
+    assert nb["is_archive"] and len(nb["documents"]) == len(indexed)
+
+
+def test_generate_from_whole_archive_uses_the_archive_notebook(client, auth, run_jobs, feed):
+    connect(client, auth, run_jobs)
+    art = client.post("/api/artifacts/generate", json={"type": "summary", "archive": True}, headers=auth).json()
+    archive = client.post("/api/notebooks/archive", headers=auth).json()
+    assert art["notebook_id"] == archive["id"]
+
+
+def test_sync_queues_resurfacing_and_writing_voice_once(client, auth, feed, db_session, session_factory,
+                                                       monkeypatch):
+    from app.services.jobs import claim_next
+    from app.worker import run_job
+
+    monkeypatch.setattr(settings, "llm_api_key", "test-key")
+    client.post("/api/sources", json={"url": "ada.example.com"}, headers=auth)
+    with session_factory() as db:
+        job_id = claim_next(db, "test")
+    run_job(job_id, session_factory=session_factory)  # the ingest job only; follow-ups stay queued
+    db_session.expire_all()
+    kinds = [j.kind for j in db_session.scalars(select(Job).where(Job.status == "queued"))]
+    assert kinds.count("resurface_scan") == 1
+    assert kinds.count("voice_profile") == 1
+    assert kinds.count("topics") == 1

frontend/src/api/endpoints.ts

@@ -56,6 +56,8 @@ export const notebooksApi = {
   get: (id: string) => api<Notebook>(`/api/notebooks/${id}`),
   create: (title: string, document_ids: string[] = [], description?: string) =>
     post<{ id: string; title: string; added: number }>("/api/notebooks", { title, document_ids, description }),
+  /** The "All posts" notebook, created on first use. */
+  archive: () => post<{ id: string; title: string }>("/api/notebooks/archive"),
   fromTopic: (topicId: string) => post<{ id: string; title: string }>(`/api/notebooks/from-topic/${topicId}`),
   update: (id: string, body: { title?: string; description?: string }) => patch(`/api/notebooks/${id}`, body),
   remove: (id: string) => del(`/api/notebooks/${id}`),
@@ -72,6 +74,8 @@ export type GenerateBody = {
   type: ArtifactType;
   notebook_id?: string;
   document_id?: string;
+  /** No notebook or post: use the "All posts" notebook. */
+  archive?: boolean;
   format?: "deep_dive" | "brief" | "debate";
   minutes?: number;
   style?: "short" | "explainer" | "audiogram";

frontend/src/api/types.ts

@@ -56,6 +56,8 @@ export type NotebookSummary = {
   document_count: number;
   chat_count: number;
   artifact_count: number;
+  /** The always-present "All posts" notebook. */
+  is_archive: boolean;
   updated_at: string | null;
 };
 
@@ -64,6 +66,7 @@ export type Notebook = {
   title: string;
   description: string | null;
   summary: string | null;
+  is_archive: boolean;
   documents: Doc[];
 };
 

frontend/src/components/AppShell.tsx

@@ -8,31 +8,25 @@ import SkyCanvas from "./SkyCanvas";
 import UpgradeModal from "./UpgradeModal";
 import {
   AsteroidIcon,
-  CometIcon,
-  ConstellationIcon,
   HelmetIcon,
   LaunchpadIcon,
   LaunchWindowIcon,
   OrbitIcon,
   PlanetIcon,
   RadarIcon,
-  RocketIcon,
   SatelliteDishIcon,
 } from "./icons/Icons";
 
 // Theme in the icon, clarity in the label: the plain label always shows.
-const NAV = [
-  { to: "/app", label: "Mission Control", icon: RadarIcon, end: true },
+// Seven stops: related pages share one entry (`also` keeps it lit on them).
+const NAV: { to: string; label: string; icon: typeof RadarIcon; end?: boolean; also?: string[] }[] = [
+  { to: "/app", label: "Home", icon: RadarIcon, end: true },
+  { to: "/app/sources", label: "Sources", icon: SatelliteDishIcon, also: ["/app/map"] },
   { to: "/app/notebooks", label: "Notebooks", icon: PlanetIcon },
-  { to: "/app/sources", label: "Sources", icon: SatelliteDishIcon },
-  { to: "/app/map", label: "Topic map", icon: ConstellationIcon },
-  { to: "/app/voice", label: "Voice profile", icon: HelmetIcon },
-  { to: "/app/studio", label: "Video and audio", icon: LaunchWindowIcon },
-  { to: "/app/launch-kit", label: "Launch Kit", icon: RocketIcon },
-  { to: "/app/launchpad", label: "Launchpad", icon: LaunchpadIcon },
-  { to: "/app/archive", label: "Archive", icon: AsteroidIcon },
-  { to: "/app/resurface", label: "Resurfacing", icon: CometIcon },
-  { to: "/app/settings", label: "Settings", icon: OrbitIcon },
+  { to: "/app/studio", label: "Create", icon: LaunchWindowIcon, also: ["/app/launch-kit"] },
+  { to: "/app/launchpad", label: "Launchpad", icon: LaunchpadIcon, also: ["/app/resurface"] },
+  { to: "/app/archive", label: "Library", icon: AsteroidIcon },
+  { to: "/app/voice", label: "Voice", icon: HelmetIcon },
 ];
 
 const COLLAPSED_KEY = "ns_sidebar_collapsed";
@@ -95,14 +89,24 @@ export default function AppShell() {
             </button>
           </div>
           <nav aria-label="App">
-            {NAV.map(({ to, label, icon: Icon, end }) => (
-              <NavLink key={to} to={to} end={end} title={collapsed ? label : undefined} className={({ isActive }) => `side-link${isActive ? " active" : ""}`}>
+            {NAV.map(({ to, label, icon: Icon, end, also }) => (
+              <NavLink
+                key={to}
+                to={to}
+                end={end}
+                title={collapsed ? label : undefined}
+                className={({ isActive }) => `side-link${isActive || also?.some((p) => location.pathname.startsWith(p)) ? " active" : ""}`}
+              >
                 <Icon />
                 <span className="side-label">{label}</span>
               </NavLink>
             ))}
           </nav>
           <FuelGauge collapsed={collapsed} />
+          <NavLink to="/app/settings" title={collapsed ? "Settings" : undefined} className={({ isActive }) => `side-link side-settings${isActive ? " active" : ""}`}>
+            <OrbitIcon />
+            <span className="side-label">Settings</span>
+          </NavLink>
           <div className="sidebar-user">
             <span className="mono muted side-label">{user.email}</span>
             <button className="link-btn" onClick={logout} title="Sign out">

frontend/src/pages/Archive.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { artifactsApi } from "../api/endpoints";
 import type { Artifact } from "../api/types";
 import { ArtifactCard } from "../components/ArtifactCard";
@@ -10,7 +11,6 @@ const PAGE = 30;
 
 export default function Archive() {
   const [filter, setFilter] = useState<Filter>("all");
-  const [status, setStatus] = useState<"" | "ready" | "failed">("");
   const [q, setQ] = useState("");
   const [items, setItems] = useState<Artifact[] | null>(null);
   const [total, setTotal] = useState(0);
@@ -19,12 +19,12 @@ export default function Archive() {
   const load = useCallback(
     (offset = 0) =>
       artifactsApi
-        .list({ type: filter === "all" ? undefined : filter, status: status || undefined, q, limit: PAGE, offset })
+        .list({ type: filter === "all" ? undefined : filter, q, limit: PAGE, offset })
         .then((p) => {
           setTotal(p.total);
           setItems((cur) => (offset ? [...(cur ?? []), ...p.items] : p.items));
         }),
-    [filter, status, q],
+    [filter, q],
   );
 
   useEffect(() => {
@@ -34,7 +34,7 @@ export default function Archive() {
 
   return (
     <div className="page-wrap">
-      <PageHeader eyebrow="Archive" title="Everything you have launched" />
+      <PageHeader eyebrow="Library" title="Everything you have made" />
       <div className="row between wrap">
         <Tabs<Filter>
           tabs={[
@@ -48,18 +48,16 @@ export default function Archive() {
           value={filter}
           onChange={setFilter}
         />
-        <div className="row">
-          <select className="input input-sm" value={status} onChange={(e) => setStatus(e.target.value as typeof status)} aria-label="Status">
-            <option value="">Any status</option>
-            <option value="ready">Ready</option>
-            <option value="failed">Failed</option>
-          </select>
-          <input className="input input-sm search" placeholder="Search by post or notebook" value={q} onChange={(e) => setQ(e.target.value)} aria-label="Search" />
-        </div>
+        <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>
-      <p className="mono muted">{total} artifacts</p>
       {!items && <Loading />}
-      {items?.length === 0 && <EmptyState title="Nothing here yet" body="Summaries, audio, videos and launch kits you create show up here." />}
+      {items?.length === 0 && <EmptyState title="Nothing here yet" body="Summaries, audio, videos and launch kits you create show up here."
+          action={
+            <Link className="btn btn-primary" to="/app/studio">
+              Create something
+            </Link>
+          }
+        />}
       <div className="gallery">
         {items?.map((a) => (
           <ArtifactCard

frontend/src/pages/AuthPage.tsx

@@ -63,7 +63,7 @@ function GoogleButton({ onCredential }: { onCredential: (c: string) => void }) {
   }, [onCredential]);
 
   if (!GOOGLE_CLIENT_ID) {
-    return <p className="mono muted auth-hint">Set GOOGLE_CLIENT_ID in .env to enable Google sign in.</p>;
+    return null;
   }
   return <div ref={ref} className="google-btn" />;
 }
@@ -171,9 +171,6 @@ export default function AuthPage() {
             <>
               {providers?.google === "redirect" && <GoogleRedirectButton next={next} />}
               {providers?.google === "popup" && <GoogleButton onCredential={onGoogle} />}
-              {providers && !providers.google && (
-                <p className="mono muted auth-hint">Set GOOGLE_CLIENT_ID in .env to enable Google sign in.</p>
-              )}
               {!providers && <div className="google-btn" />}
               <div className="auth-divider mono">
                 <span>or with email</span>

frontend/src/pages/LaunchKit.tsx

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { artifactsApi } from "../api/endpoints";
-import type { Artifact, LaunchKitContent, Platform } from "../api/types";
+import { artifactsApi, docsApi } from "../api/endpoints";
+import type { Artifact, Doc, LaunchKitContent, Platform } from "../api/types";
 import { ArtifactCard } from "../components/ArtifactCard";
 import { DocPicker } from "../components/DocPicker";
 import { ScheduleModal } from "../components/ScheduleModal";
-import { ConfirmButton, CopyButton, EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader, StatusPill, Tabs } from "../components/ui";
+import { ConfirmButton, CopyButton, errorMessage, formatDate, JobProgress, Loading, PageHeader, StatusPill, Tabs } from "../components/ui";
 import { useJob } from "../hooks/useJob";
 
 type PostKey = keyof LaunchKitContent["posts"];
-type Tab = "hooks" | PostKey | "seo" | "carousel" | "quotes" | "claims";
+type Tab = "posts" | "hooks" | "visuals" | "seo";
 
 const PLATFORM_OF: Record<PostKey, { platform: Platform; label: string; limit: number; thread: boolean }> = {
   x_thread: { platform: "x", label: "X thread", limit: 280, thread: true },
@@ -175,7 +175,8 @@ function QuotesTab({ kit }: { kit: Artifact }) {
 
 function KitView({ kit: initial, onDeleted }: { kit: Artifact; onDeleted: () => void }) {
   const [kit, setKit] = useState(initial);
-  const [tab, setTab] = useState<Tab>("hooks");
+  const [tab, setTab] = useState<Tab>("posts");
+  const [platform, setPlatform] = useState<PostKey>("x_thread");
   const job = useJob(initial.job, () => artifactsApi.get(initial.id).then(setKit));
   useEffect(() => setKit(initial), [initial]);
   const c = kit.content as LaunchKitContent;
@@ -220,16 +221,23 @@ function KitView({ kit: initial, onDeleted }: { kit: Artifact; onDeleted: () =>
         <>
           <Tabs<Tab>
             tabs={[
+              { id: "posts", label: "Posts" },
               { id: "hooks", label: "Hooks", count: c.hooks?.length },
-              ...(Object.keys(PLATFORM_OF) as PostKey[]).map((k) => ({ id: k as Tab, label: PLATFORM_OF[k].label })),
+              { id: "visuals", label: "Visuals", count: (c.carousel?.length ?? 0) + (c.quotes?.length ?? 0) },
               { id: "seo", label: "SEO" },
-              { id: "carousel", label: "Carousel", count: c.carousel?.length },
-              { id: "quotes", label: "Quotes", count: c.quotes?.length },
-              { id: "claims", label: "Claims", count: c.claims?.length },
             ]}
             value={tab}
             onChange={setTab}
           />
+          {tab === "posts" && (
+            <div className="gen-chips" role="tablist" aria-label="Platform">
+              {(Object.keys(PLATFORM_OF) as PostKey[]).map((k) => (
+                <button key={k} type="button" role="tab" aria-selected={platform === k} className={`chip${platform === k ? " on" : ""}`} onClick={() => setPlatform(k)}>
+                  {PLATFORM_OF[k].label}
+                </button>
+              ))}
+            </div>
+          )}
           {tab === "hooks" && (
             <ol className="hooks">
               {(c.hooks ?? []).map((h, i) => (
@@ -243,7 +251,7 @@ function KitView({ kit: initial, onDeleted }: { kit: Artifact; onDeleted: () =>
               ))}
             </ol>
           )}
-          {tab in PLATFORM_OF && <PostsEditor kit={kit} keyName={tab as PostKey} onSave={(p) => savePosts(tab as PostKey, p)} />}
+          {tab === "posts" && <PostsEditor kit={kit} keyName={platform} onSave={(p) => savePosts(platform, p)} />}
           {tab === "seo" && (
             <dl className="seo">
               <dt>Title options</dt>
@@ -287,9 +295,17 @@ function KitView({ kit: initial, onDeleted }: { kit: Artifact; onDeleted: () =>
               </dd>
             </dl>
           )}
-          {tab === "carousel" && <CarouselTab kit={kit} />}
-          {tab === "quotes" && <QuotesTab kit={kit} />}
-          {tab === "claims" && (
+          {tab === "visuals" && (
+            <>
+              <h3>Carousel</h3>
+              <CarouselTab kit={kit} />
+              <h3>Quotes</h3>
+              <QuotesTab kit={kit} />
+            </>
+          )}
+          {tab === "posts" && (c.claims?.length ?? 0) > 0 && (
+            <details className="delivery">
+              <summary className="mono muted small">Fact check: {c.claims?.length} claims traced to the post</summary>
             <ol className="claims">
               {(c.claims ?? []).map((cl, i) => (
                 <li key={i}>
@@ -305,6 +321,7 @@ function KitView({ kit: initial, onDeleted }: { kit: Artifact; onDeleted: () =>
                 </li>
               ))}
             </ol>
+            </details>
           )}
         </>
       )}
@@ -312,91 +329,144 @@ function KitView({ kit: initial, onDeleted }: { kit: Artifact; onDeleted: () =>
   );
 }
 
+/** Pick a post card (one click generates), or reopen an earlier kit from the rail. */
 export default function LaunchKit() {
   const [params, setParams] = useSearchParams();
   const [kits, setKits] = useState<Artifact[] | null>(null);
-  const [post, setPost] = useState<string[]>(params.get("post") ? [params.get("post")!] : []);
+  const [newest, setNewest] = useState<Doc[] | null>(null);
+  const [post, setPost] = useState<string[]>([]);
+  const [searching, setSearching] = useState(false);
   const [active, setActive] = useState<Artifact | null>(null);
-  const [busy, setBusy] = useState(false);
+  const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const autoStarted = useRef(false);
 
   const load = useCallback(() => artifactsApi.list({ type: "launch_kit", limit: 100 }).then((p) => setKits(p.items)), []);
   useEffect(() => {
     load();
+    docsApi.list({ limit: 24 }).then((p) => setNewest(p.items.filter((d) => !d.locked).slice(0, 6)));
   }, [load]);
   useEffect(() => {
     const id = params.get("kit");
     if (id && active?.id !== id) artifactsApi.get(id).then(setActive, () => setActive(null));
-  }, [params, active?.id]);
+    if (!id && active) setActive(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params]);
 
-  const generate = async () => {
-    if (!post[0]) return;
-    setBusy(true);
+  const generate = async (documentId: string) => {
+    setBusy(documentId);
     setError(null);
     try {
-      const kit = await artifactsApi.generate({ type: "launch_kit", document_id: post[0] });
+      const kit = await artifactsApi.generate({ type: "launch_kit", document_id: documentId });
       setKits((k) => [kit, ...(k ?? [])]);
       setActive(kit);
       setParams({ kit: kit.id });
     } catch (e) {
       setError(errorMessage(e));
     } finally {
-      setBusy(false);
+      setBusy(null);
+    }
+  };
+
+  // ?post=<id> (from Resurfacing or a post page) starts the kit straight away.
+  useEffect(() => {
+    const id = params.get("post");
+    if (id && !autoStarted.current) {
+      autoStarted.current = true;
+      void generate(id);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const open = (k: Artifact) => {
+    setActive(k);
+    setParams({ kit: k.id });
   };
 
   return (
     <div className="page-wrap">
-      <PageHeader eyebrow="Launch Kit" title="Everything you need to launch a post" />
-      <div className="kit-layout">
-        <aside className="stack">
-          <section className="card stack">
-            <h2>New kit</h2>
-            <p className="muted">Hooks, a thread, LinkedIn, Notes, Bluesky, SEO, a carousel and quote cards, in your voice and grounded in the post.</p>
-            <DocPicker selected={post} onChange={setPost} single />
-            {error && <p className="error-text">{error}</p>}
-            <button className="btn btn-primary" disabled={!post.length || busy} onClick={generate}>
-              {busy ? "Launching..." : "Generate Launch Kit"}
-            </button>
-          </section>
-          <section className="card">
-            <h2>Kits</h2>
-            {!kits && <Loading />}
+      <PageHeader eyebrow="Launch Kit" title="Everything you need to launch a post">
+        {active && (
+          <button className="btn btn-primary" onClick={() => setParams({})}>
+            New kit
+          </button>
+        )}
+      </PageHeader>
+      {error && <p className="error-text">{error}</p>}
+      {active ? (
+        <div className="kit-layout kit-open">
+          <aside className="card kit-rail">
+            <p className="eyebrow">Your kits</p>
             <ul className="kit-list">
               {kits?.map((k) => (
                 <li key={k.id}>
-                  <button
-                    className={`link-btn${active?.id === k.id ? " active" : ""}`}
-                    onClick={() => {
-                      setActive(k);
-                      setParams({ kit: k.id });
-                    }}
-                  >
+                  <button className={`link-btn${active.id === k.id ? " active" : ""}`} onClick={() => open(k)}>
                     {(k.content.post_title as string | undefined) ?? k.title}
                   </button>
                   <span className="mono muted"> {k.status === "ready" ? formatDate(k.created_at) : k.status}</span>
                 </li>
               ))}
-              {kits?.length === 0 && <li className="muted">No kits yet.</li>}
             </ul>
+          </aside>
+          <KitView
+            key={active.id}
+            kit={active}
+            onDeleted={() => {
+              setParams({});
+              load();
+            }}
+          />
+        </div>
+      ) : (
+        <>
+          <section className="card stack">
+            <div className="row between">
+              <h2>Pick a post to launch</h2>
+              <button className="link-btn small" onClick={() => setSearching(!searching)}>
+                {searching ? "Show newest posts" : "Search all posts"}
+              </button>
+            </div>
+            <p className="muted">Hooks, a thread, LinkedIn, Notes, Bluesky, SEO, a carousel and quote cards, in your voice and grounded in the post.</p>
+            {searching ? (
+              <>
+                <DocPicker selected={post} onChange={setPost} single />
+                <div className="row end">
+                  <button className="btn btn-primary" disabled={!post.length || busy !== null} onClick={() => generate(post[0])}>
+                    {busy ? "Launching..." : "Generate Launch Kit"}
+                  </button>
+                </div>
+              </>
+            ) : (
+              <div className="post-cards">
+                {!newest && <Loading />}
+                {newest?.length === 0 && <p className="muted">No indexed posts yet. Connect a source first.</p>}
+                {newest?.map((d) => (
+                  <button key={d.id} type="button" className="post-card" disabled={busy !== null} onClick={() => generate(d.id)}>
+                    <span className="mono muted small">{formatDate(d.published_at)}</span>
+                    <strong className="clamp-3">{d.title}</strong>
+                    <span className="post-card-go">{busy === d.id ? "Launching..." : "Launch this post"}</span>
+                  </button>
+                ))}
+              </div>
+            )}
           </section>
-        </aside>
-        <div>
-          {active ? (
-            <KitView
-              key={active.id}
-              kit={active}
-              onDeleted={() => {
-                setActive(null);
-                setParams({});
-                load();
-              }}
-            />
-          ) : (
-            <EmptyState title="Pick a post to launch" body="Or open a kit you made before." />
+          {kits && kits.length > 0 && (
+            <section className="card">
+              <h2>Earlier kits</h2>
+              <ul className="kit-list">
+                {kits.map((k) => (
+                  <li key={k.id}>
+                    <button className="link-btn" onClick={() => open(k)}>
+                      {(k.content.post_title as string | undefined) ?? k.title}
+                    </button>
+                    <span className="mono muted"> {k.status === "ready" ? formatDate(k.created_at) : k.status}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
           )}
-        </div>
-      </div>
+        </>
+      )}
     </div>
   );
 }

frontend/src/pages/Launchpad.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useMemo, useState, type FormEvent } from "react";
-import { useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { launchpadApi } from "../api/endpoints";
 import type { CalendarItem, SocialAccounts } from "../api/types";
 import { PLATFORMS, ScheduleModal, toLocalInput } from "../components/ScheduleModal";
 import { ConfirmButton, CopyButton, errorMessage, formatDate, Loading, Modal, PageHeader, StatusPill, Tabs } from "../components/ui";
+import { ResurfaceIdeas } from "./Resurface";
 
 const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
@@ -289,55 +290,42 @@ export default function Launchpad() {
       {notice && <p className="notice">{notice}</p>}
       {error && <p className="error-text">{error}</p>}
 
-      <section className="card accounts">
-        <div className="row between">
-          <h2>Connected accounts</h2>
-          <div className="row">
-            <button className="btn btn-small" onClick={() => connect("x")} disabled={!accounts?.available.x} title={accounts?.available.x ? "" : "Set X_CLIENT_ID and X_CLIENT_SECRET"}>
-              Connect X
-            </button>
-            <button className="btn btn-small" onClick={() => connect("linkedin")} disabled={!accounts?.available.linkedin} title={accounts?.available.linkedin ? "" : "Set LINKEDIN_CLIENT_ID and LINKEDIN_CLIENT_SECRET"}>
-              Connect LinkedIn
-            </button>
-            <button className="btn btn-small" onClick={() => setBluesky(true)}>
-              Connect Bluesky
-            </button>
-          </div>
-        </div>
-        <ul className="account-list">
-          {accounts?.accounts.map((a) => (
-            <li key={a.id} className="account">
-              {a.avatar_url && <img src={a.avatar_url} alt="" width={28} height={28} />}
-              <span>
-                <strong>{a.platform_label}</strong> <span className="mono muted">{a.handle}</span>
-              </span>
-              {a.status !== "active" && <StatusPill status={a.status === "expired" ? "failed" : a.status} />}
-              <ConfirmButton
-                onConfirm={async () => {
-                  await launchpadApi.disconnect(a.id);
-                  setAccounts(await launchpadApi.accounts());
-                }}
-              >
-                Disconnect
-              </ConfirmButton>
-            </li>
-          ))}
-          {accounts?.accounts.length === 0 && <li className="muted">No accounts yet. Posts for unconnected platforms and Substack Notes arrive as email reminders.</li>}
-        </ul>
-        {accounts && (!accounts.available.x || !accounts.available.linkedin) && (
-          <details className="muted small">
-            <summary>Setting up X or LinkedIn</summary>
-            <p>
-              Create a developer app, then add these redirect URIs and put the client id and secret in .env:
-            </p>
-            <ul className="mono">
-              <li>X: {accounts.redirect_uris.x}</li>
-              <li>LinkedIn: {accounts.redirect_uris.linkedin}</li>
-            </ul>
-          </details>
+      <section className="lp-accounts" aria-label="Connected accounts">
+        {accounts?.accounts.map((a) => (
+          <span key={a.id} className={`lp-chip${a.status !== "active" ? " warn" : ""}`}>
+            {a.avatar_url && <img src={a.avatar_url} alt="" width={18} height={18} />}
+            <strong>{a.platform_label}</strong> <span className="mono muted">{a.handle}</span>
+            {a.status !== "active" && <StatusPill status={a.status === "expired" ? "failed" : a.status} />}
+            <ConfirmButton
+              className="link-btn small"
+              onConfirm={async () => {
+                await launchpadApi.disconnect(a.id);
+                setAccounts(await launchpadApi.accounts());
+              }}
+            >
+              ×
+            </ConfirmButton>
+          </span>
+        ))}
+        {accounts?.available.x && !accounts.accounts.some((a) => a.platform === "x") && (
+          <button className="lp-chip add" onClick={() => connect("x")}>
+            + X
+          </button>
+        )}
+        {accounts?.available.linkedin && !accounts.accounts.some((a) => a.platform === "linkedin") && (
+          <button className="lp-chip add" onClick={() => connect("linkedin")}>
+            + LinkedIn
+          </button>
         )}
+        {!accounts?.accounts.some((a) => a.platform === "bluesky") && (
+          <button className="lp-chip add" onClick={() => setBluesky(true)}>
+            + Bluesky
+          </button>
+        )}
+        {accounts && accounts.accounts.length === 0 && <span className="muted small">Not connected? Posts arrive as email reminders instead.</span>}
       </section>
 
+      <div className="lp-layout">
       <section className="card">
         <div className="row between cal-head">
           <div className="row">
@@ -352,6 +340,14 @@ export default function Launchpad() {
           <Tabs tabs={[{ id: "month", label: "Month" }, { id: "agenda", label: "Agenda" }]} value={view} onChange={setView} />
         </div>
         {!items && <Loading />}
+        {items && items.length === 0 && (
+          <div className="lp-empty">
+            <p className="muted">Nothing scheduled this month.</p>
+            <Link className="btn btn-small" to="/app/launch-kit">
+              Schedule your latest Launch Kit
+            </Link>
+          </div>
+        )}
         {items && view === "month" && (
           <div className="cal-grid">
             {WEEKDAYS.map((d) => (
@@ -396,6 +392,12 @@ export default function Launchpad() {
         {items && <p className="mono muted small">{upcoming.length} upcoming in view</p>}
       </section>
 
+        <aside className="card stack lp-ideas" id="ideas">
+          <h2>Ideas worth resharing</h2>
+          <ResurfaceIdeas onScheduled={() => load()} />
+        </aside>
+      </div>
+
       {open && <ItemModal item={open} accounts={accounts} onClose={() => setOpen(null)} onChanged={changed} />}
       {composing && <ScheduleModal platform="x" posts={[""]} onClose={() => setComposing(false)} onScheduled={() => load()} />}
       {bluesky && <BlueskyModal onClose={() => setBluesky(false)} onConnected={setAccounts} />}

frontend/src/pages/MissionControl.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { api } from "../api/client";
-import { artifactsApi, jobsApi, launchpadApi, notebooksApi, sourcesApi, voiceApi } from "../api/endpoints";
-import type { Artifact, CalendarItem, Job, NotebookSummary, Source } from "../api/types";
-import { CheckIcon } from "../components/icons/Icons";
-import { formatDate, JobProgress, StatusPill } from "../components/ui";
+import { artifactsApi, docsApi, jobsApi, launchpadApi, notebooksApi, resurfaceApi, sourcesApi, type GenerateBody } from "../api/endpoints";
+import type { Artifact, CalendarItem, Doc, Job, NotebookSummary, ResurfaceItem, Source } from "../api/types";
+import { LaunchWindowIcon, PlanetIcon, RocketIcon, TelescopeIcon } from "../components/icons/Icons";
+import { errorMessage, formatDate, JobProgress, StatusPill } from "../components/ui";
 import { useAuth } from "../hooks/useAuth";
 import { useJobMap } from "../hooks/useJob";
 import { AddSource } from "./Sources";
@@ -26,9 +26,9 @@ const JOB_LABELS: Record<string, string> = {
   import_url: "Importing an article",
   import_upload: "Importing a file",
   topics: "Mapping topics",
-  voice_profile: "Building your voice profile",
+  voice_profile: "Building your writing voice",
   voice_clone: "Cloning your voice",
-  resurface_scan: "Scoring evergreen posts",
+  resurface_scan: "Finding posts worth resharing",
   summary: "Writing a summary",
   audio_overview: "Recording an audio overview",
   video: "Making a video",
@@ -38,26 +38,31 @@ const JOB_LABELS: Record<string, string> = {
   render: "Rendering",
 };
 
+/** Home: ask the archive, one-click creation, and only the next thing worth doing. */
 export default function MissionControl() {
   const { user } = useAuth();
-  const [sources, setSources] = useState<Source[]>([]);
+  const [sources, setSources] = useState<Source[] | null>(null);
   const [notebooks, setNotebooks] = useState<NotebookSummary[]>([]);
   const [recent, setRecent] = useState<Artifact[]>([]);
   const [upcoming, setUpcoming] = useState<CalendarItem[]>([]);
+  const [newest, setNewest] = useState<Doc | null>(null);
+  const [reshare, setReshare] = useState<ResurfaceItem[]>([]);
   const [plan, setPlan] = useState<Plan | null>(null);
-  const [hasVoice, setHasVoice] = useState(false);
+  const [question, setQuestion] = useState("");
+  const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const started = useRef(false);
   const navigate = useNavigate();
 
   const refresh = useCallback(async () => {
-    const [s, n, p, a, c, v] = await Promise.all([
+    const [s, n, p, a, c, d, r] = await Promise.all([
       sourcesApi.list(),
       notebooksApi.list(),
       api<{ plan: Plan }>("/api/billing/me"),
-      artifactsApi.list({ limit: 6 }),
+      artifactsApi.list({ limit: 8 }),
       launchpadApi.items({ start: new Date().toISOString(), status: "scheduled,draft" }),
-      voiceApi.get(),
+      docsApi.list({ limit: 20 }),
+      resurfaceApi.get().catch(() => null),
     ]);
     setSources(s);
     // First visit with nothing connected: run the guided setup once.
@@ -69,13 +74,14 @@ export default function MissionControl() {
     setPlan(p.plan);
     setRecent(a.items);
     setUpcoming(c.slice(0, 5));
-    setHasVoice(Boolean(v.profile));
+    setNewest(d.items.find((x) => !x.locked) ?? null);
+    setReshare((r?.evergreen ?? []).slice(0, 3));
   }, [navigate]);
 
   const { jobs, watch } = useJobMap(() => refresh());
 
   useEffect(() => {
-    refresh().catch(() => setError("Could not reach Mission Control. Is the API running?"));
+    refresh().catch(() => setError("Could not load your dashboard. Refresh to try again."));
     jobsApi.active().then((active) => active.forEach((j) => watch(j.id, j)));
     if (started.current) return;
     started.current = true;
@@ -92,45 +98,141 @@ export default function MissionControl() {
           watch(res.job.id, res.job);
           refresh();
         },
-        (e) => setError(e instanceof Error ? e.message : "Could not add that source."),
+        (e) => setError(errorMessage(e, "Could not add that source.")),
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refresh]);
 
-  const totalDocs = sources.reduce((n, s) => n + s.document_count, 0);
+  const run = async (key: string, fn: () => Promise<void>) => {
+    setBusy(key);
+    setError(null);
+    try {
+      await fn();
+    } catch (e) {
+      setError(errorMessage(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const ask = (e: FormEvent) => {
+    e.preventDefault();
+    void run("ask", async () => {
+      const nb = await notebooksApi.archive();
+      navigate(`/app/notebooks/${nb.id}${question.trim() ? `?q=${encodeURIComponent(question.trim())}` : ""}`);
+    });
+  };
+  const create = (key: string, body: GenerateBody) =>
+    run(key, async () => {
+      await artifactsApi.generate(body);
+      navigate("/app/studio");
+    });
+  const launch = (doc: Doc) =>
+    run(`kit-${doc.id}`, async () => {
+      const kit = await artifactsApi.generate({ type: "launch_kit", document_id: doc.id });
+      navigate(`/app/launch-kit?kit=${kit.id}`);
+    });
+
+  const totalDocs = (sources ?? []).reduce((n, s) => n + s.document_count, 0);
+  const hasPosts = totalDocs > 0;
   const activeJobs = Object.values(jobs).filter((j: Job) => j.status === "queued" || j.status === "running" || j.status === "failed");
-  const checklist = [
-    { done: sources.length > 0 && totalDocs > 0, label: "Connect your archive", to: "/app/sources" },
-    { done: hasVoice, label: "Build your voice profile", to: "/app/voice" },
-    { done: notebooks.length > 0, label: "Open a research notebook", to: "/app/notebooks" },
-    { done: recent.some((a) => a.type === "launch_kit"), label: "Make your first Launch Kit", to: "/app/launch-kit" },
-    { done: upcoming.length > 0, label: "Schedule a launch", to: "/app/launchpad" },
-  ];
+  const lastKit = recent.find((a) => a.type === "launch_kit" && a.status === "ready");
+  const next: { text: string; action: ReactNode } | null = !hasPosts
+    ? null
+    : !lastKit && newest
+      ? {
+          text: `Launch your newest post, "${newest.title}", with hooks, threads and SEO in your voice.`,
+          action: (
+            <button className="btn btn-primary" disabled={busy !== null} onClick={() => launch(newest)}>
+              {busy === `kit-${newest.id}` ? "Launching..." : "Generate Launch Kit"}
+            </button>
+          ),
+        }
+      : lastKit && upcoming.length === 0
+        ? {
+            text: `Your Launch Kit for "${lastKit.title}" is ready. Put it on the calendar.`,
+            action: (
+              <Link className="btn btn-primary" to={`/app/launch-kit?kit=${lastKit.id}`}>
+                Schedule it
+              </Link>
+            ),
+          }
+        : null;
+
+  const first = (user?.name ?? user?.email ?? "").split(/[ @]/)[0];
 
   return (
     <div className="mc">
       <header className="mc-head">
         <div>
           <p className="eyebrow">Mission Control</p>
-          <h1>Good to see you, {(user?.name ?? user?.email ?? "").split(/[ @]/)[0]}</h1>
+          <h1>Good to see you, {first}</h1>
         </div>
         {plan && <span className="badge">{plan.name} plan</span>}
       </header>
       {error && <p className="error-text">{error}</p>}
 
-      {checklist.some((c) => !c.done) && (
-        <section className="card checklist">
-          <p className="eyebrow">Pre-flight checklist</p>
-          <ol>
-            {checklist.map((c) => (
-              <li key={c.label} className={c.done ? "done" : ""}>
-                <span className="check-dot">{c.done && <CheckIcon size={14} />}</span>
-                <Link to={c.to}>{c.label}</Link>
-              </li>
-            ))}
-          </ol>
+      {sources && !hasPosts ? (
+        <section className="card mc-hero stack">
+          <h2>Bring in your writing</h2>
+          <p className="muted">Connect a blog or newsletter, import an article or drop in files. Everything else starts from here.</p>
+          <AddSource
+            onAdded={(source, job) => {
+              setSources((list) => [...(list ?? []).filter((s) => s.id !== source.id), source]);
+              watch(job.id, job);
+            }}
+          />
         </section>
+      ) : (
+        <>
+          <section className="card mc-hero">
+            <form onSubmit={ask} className="mc-ask">
+              <TelescopeIcon size={22} />
+              <input
+                className="input"
+                value={question}
+                onChange={(e) => setQuestion(e.target.value)}
+                placeholder="Ask anything about your writing: what have I said about pricing?"
+                aria-label="Ask your archive"
+              />
+              <button className="btn btn-primary" disabled={busy !== null}>
+                {busy === "ask" ? "Opening..." : "Ask"}
+              </button>
+            </form>
+            <div className="mc-actions">
+              <button className="mc-action" disabled={busy !== null || !hasPosts} onClick={() => create("audio", { type: "audio_overview", archive: true, format: "deep_dive", minutes: 6 })}>
+                <PlanetIcon size={28} />
+                <strong>{busy === "audio" ? "Starting..." : "Audio overview"}</strong>
+                <span className="muted small">Two hosts, 6 minutes, your whole archive</span>
+              </button>
+              <button className="mc-action" disabled={busy !== null || !hasPosts} onClick={() => create("video", { type: "video", style: "short", archive: true })}>
+                <LaunchWindowIcon size={28} />
+                <strong>{busy === "video" ? "Starting..." : "Short video"}</strong>
+                <span className="muted small">Vertical 9:16 with captions</span>
+              </button>
+              <button className="mc-action" disabled={busy !== null || !newest} onClick={() => newest && launch(newest)}>
+                <RocketIcon size={28} />
+                <strong>{newest && busy === `kit-${newest.id}` ? "Launching..." : "Launch newest post"}</strong>
+                <span className="muted small clamp-1">{newest ? newest.title : "No indexed posts yet"}</span>
+              </button>
+              <Link className="mc-action" to="/app/studio">
+                <span className="mc-more" aria-hidden="true">
+                  +
+                </span>
+                <strong>More formats</strong>
+                <span className="muted small">Explainers, quote cards, audiograms</span>
+              </Link>
+            </div>
+          </section>
+
+          {next && (
+            <section className="mc-next">
+              <p>{next.text}</p>
+              {next.action}
+            </section>
+          )}
+        </>
       )}
 
       {activeJobs.length > 0 && (
@@ -145,102 +247,97 @@ export default function MissionControl() {
         </section>
       )}
 
-      <section className="mc-grid">
-        <div className="card mc-card mc-sources">
-          <div className="row between">
-            <h2>Sources</h2>
-            <Link to="/app/sources" className="mono muted small-link">
-              Manage
-            </Link>
-          </div>
-          <AddSource
-            onAdded={(source, job) => {
-              setSources((list) => [...list.filter((s) => s.id !== source.id), source]);
-              watch(job.id, job);
-            }}
-          />
-          <ul className="source-list">
-            {sources.map((s) => (
-              <li key={s.id} className="source-row">
-                <div className="source-title">
-                  <strong>{s.title ?? s.feed_url}</strong>
-                  <span className="mono muted">
-                    {s.is_imports ? "imports" : s.platform} · {s.document_count} posts
-                  </span>
-                </div>
-                <StatusPill status={s.sync_status} />
-              </li>
-            ))}
-            {sources.length === 0 && <li className="muted">No sources yet. A lone satellite, waiting for signal.</li>}
-          </ul>
-        </div>
-
-        <div className="card mc-card">
-          <div className="row between">
-            <h2>Notebooks</h2>
-            <Link to="/app/notebooks" className="mono muted small-link">
-              All
-            </Link>
-          </div>
-          <p className="muted">{totalDocs} posts indexed across your sources.</p>
-          <ul className="nb-list">
-            {notebooks.slice(0, 6).map((n) => (
-              <li key={n.id}>
-                <Link to={`/app/notebooks/${n.id}`} className="nb-link">
-                  {n.title}
-                </Link>
-                <span className="mono muted"> {n.document_count} posts</span>
-              </li>
-            ))}
-          </ul>
-          <Link className="btn" to="/app/notebooks">
-            {notebooks.length ? "Open notebooks" : "Create a notebook"}
+      {hasPosts && (
+        <section className="mc-stats">
+          <Link to="/app/sources" className="mc-stat">
+            <strong>{totalDocs}</strong>
+            <span className="muted small">posts in {sources?.length} {sources?.length === 1 ? "source" : "sources"}</span>
           </Link>
-        </div>
+          <Link to="/app/notebooks" className="mc-stat">
+            <strong>{notebooks.length}</strong>
+            <span className="muted small">notebooks</span>
+          </Link>
+          <Link to="/app/archive" className="mc-stat">
+            <strong>{recent.length}</strong>
+            <span className="muted small">recent launches</span>
+          </Link>
+          <Link to="/app/launchpad" className="mc-stat">
+            <strong>{upcoming.length}</strong>
+            <span className="muted small">scheduled</span>
+          </Link>
+        </section>
+      )}
 
-        <div className="card mc-card">
-          <div className="row between">
-            <h2>Recent launches</h2>
-            <Link to="/app/archive" className="mono muted small-link">
-              Archive
-            </Link>
-          </div>
-          {recent.length === 0 && <p className="muted">Audio overviews, videos and launch kits will show up here.</p>}
-          <ul className="recent-list">
-            {recent.map((a) => (
-              <li key={a.id}>
-                <Link to={a.type === "launch_kit" ? `/app/launch-kit?kit=${a.id}` : a.notebook_id ? `/app/notebooks/${a.notebook_id}` : "/app/archive"}>
-                  {a.title}
+      {(recent.length > 0 || upcoming.length > 0 || reshare.length > 0) && (
+        <section className="mc-grid">
+          {recent.length > 0 && (
+            <div className="card mc-card">
+              <div className="row between">
+                <h2>Recent launches</h2>
+                <Link to="/app/archive" className="mono muted small-link">
+                  Library
                 </Link>
-                <span className="row">
-                  <span className="mono muted">{formatDate(a.created_at)}</span>
-                  <StatusPill status={a.status} />
-                </span>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="card mc-card">
-          <div className="row between">
-            <h2>Launchpad</h2>
-            <Link to="/app/launchpad" className="mono muted small-link">
-              Calendar
-            </Link>
+              </div>
+              <ul className="recent-list">
+                {recent.map((a) => (
+                  <li key={a.id}>
+                    <Link to={a.type === "launch_kit" ? `/app/launch-kit?kit=${a.id}` : a.notebook_id ? `/app/notebooks/${a.notebook_id}` : "/app/archive"}>{a.title}</Link>
+                    <span className="row">
+                      <span className="mono muted">{formatDate(a.created_at)}</span>
+                      <StatusPill status={a.status} />
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <div className="stack">
+            {reshare.length > 0 && (
+              <div className="card mc-card">
+                <div className="row between">
+                  <h2>Worth resharing</h2>
+                  <Link to="/app/launchpad" className="mono muted small-link">
+                    More ideas
+                  </Link>
+                </div>
+                <ul className="recent-list">
+                  {reshare.map((i) => (
+                    <li key={i.id}>
+                      <span>
+                        <strong>{i.title}</strong>
+                        {i.angle && <span className="muted small"> · {i.angle}</span>}
+                      </span>
+                      <button className="btn btn-small" disabled={busy !== null} onClick={() => launch(i)}>
+                        {busy === `kit-${i.id}` ? "Launching..." : "Launch Kit"}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {upcoming.length > 0 && (
+              <div className="card mc-card">
+                <div className="row between">
+                  <h2>Coming up</h2>
+                  <Link to="/app/launchpad" className="mono muted small-link">
+                    Calendar
+                  </Link>
+                </div>
+                <ul className="recent-list">
+                  {upcoming.map((i) => (
+                    <li key={i.id}>
+                      <Link to={`/app/launchpad?item=${i.id}`}>
+                        <strong>{i.platform_label}</strong> <span className="muted">{i.content.slice(0, 70)}</span>
+                      </Link>
+                      <span className="mono muted">{formatDate(i.scheduled_at, true)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </div>
-          {upcoming.length === 0 && <p className="muted">Nothing scheduled. Quiet moon tonight.</p>}
-          <ul className="recent-list">
-            {upcoming.map((i) => (
-              <li key={i.id}>
-                <Link to={`/app/launchpad?item=${i.id}`}>
-                  <strong>{i.platform_label}</strong> <span className="muted">{i.content.slice(0, 70)}</span>
-                </Link>
-                <span className="mono muted">{formatDate(i.scheduled_at, true)}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </section>
+        </section>
+      )}
     </div>
   );
 }

frontend/src/pages/NotebookView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams, useSearchParams } from "react-router-dom";
 import { artifactsApi, notebooksApi, type GenerateBody } from "../api/endpoints";
 import { streamSSE } from "../api/stream";
 import type { Artifact, ChatSummary, Citation, Notebook } from "../api/types";
@@ -8,15 +8,19 @@ import { Markdown } from "../components/Markdown";
 import { DocPicker } from "../components/DocPicker";
 import { TelescopeIcon } from "../components/icons/Icons";
 import { Reader } from "../components/Reader";
-import { ConfirmButton, errorMessage, formatDate, Loading, Modal } from "../components/ui";
+import { ConfirmButton, errorMessage, formatDate, Loading, Modal, Tabs } from "../components/ui";
 
 type Turn = { role: "user" | "assistant"; text: string; citations?: Citation[]; status?: string; steps?: string[] };
 
+type Pane = "create" | "posts";
+
+const STARTERS = ["What are the strongest ideas across these posts?", "Where do I contradict myself?", "Which post is most worth updating, and why?"];
+
+/** The Create tab: one click per format with sensible defaults, options folded away. */
 function StudioPanel({ notebookId, disabled }: { notebookId: string; disabled: boolean }) {
   const [artifacts, setArtifacts] = useState<Artifact[] | null>(null);
   const [format, setFormat] = useState<"deep_dive" | "brief" | "debate">("deep_dive");
   const [minutes, setMinutes] = useState(6);
-  const [style, setStyle] = useState<"short" | "explainer">("short");
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
   const [reading, setReading] = useState<{ id: string; start: number; end: number } | null>(null);
@@ -40,19 +44,32 @@ function StudioPanel({ notebookId, disabled }: { notebookId: string; disabled: b
   };
 
   const cite = (c: Citation) => c.document_id && setReading({ id: c.document_id, start: c.line_start, end: c.line_end });
+  const off = disabled || busy;
 
   return (
-    <aside className="card nbv-pane nbv-studio">
-      <p className="eyebrow">Studio</p>
-      <div className="studio-buttons">
-        <button className="btn btn-small" disabled={disabled || busy} onClick={() => make({ type: "summary" })}>
+    <div className="stack">
+      <div className="nbv-make">
+        <button className="nbv-make-main" disabled={off} onClick={() => make({ type: "audio_overview", format, minutes })}>
+          <strong>Audio overview</strong>
+          <span className="muted small">
+            {format === "deep_dive" ? "Deep dive" : format === "brief" ? "Brief" : "Debate"} · {minutes} min
+          </span>
+        </button>
+        <button disabled={off} onClick={() => make({ type: "video", style: "short" })}>
+          Short video
+        </button>
+        <button disabled={off} onClick={() => make({ type: "video", style: "explainer" })}>
+          Explainer
+        </button>
+        <button disabled={off} onClick={() => make({ type: "summary" })}>
           Summary
         </button>
-        <button className="btn btn-small" disabled={disabled || busy} onClick={() => make({ type: "quote_card" })}>
+        <button disabled={off} onClick={() => make({ type: "quote_card" })}>
           Quote card
         </button>
       </div>
-      <div className="studio-group">
+      <details className="delivery">
+        <summary className="mono muted small">Audio options</summary>
         <div className="row">
           <select className="input input-sm" value={format} onChange={(e) => setFormat(e.target.value as typeof format)} aria-label="Audio format">
             <option value="deep_dive">Deep dive</option>
@@ -67,19 +84,7 @@ function StudioPanel({ notebookId, disabled }: { notebookId: string; disabled: b
             ))}
           </select>
         </div>
-        <button className="btn btn-small btn-primary" disabled={disabled || busy} onClick={() => make({ type: "audio_overview", format, minutes })}>
-          Audio overview
-        </button>
-      </div>
-      <div className="studio-group">
-        <select className="input input-sm" value={style} onChange={(e) => setStyle(e.target.value as typeof style)} aria-label="Video style">
-          <option value="short">Short, vertical 9:16</option>
-          <option value="explainer">Explainer, 16:9</option>
-        </select>
-        <button className="btn btn-small" disabled={disabled || busy} onClick={() => make({ type: "video", style })}>
-          Video
-        </button>
-      </div>
+      </details>
       {disabled && <p className="muted small">Add posts to this notebook to start creating.</p>}
       {error && <p className="error-text">{error}</p>}
       <div className="studio-list">
@@ -101,7 +106,7 @@ function StudioPanel({ notebookId, disabled }: { notebookId: string; disabled: b
         ))}
       </div>
       {reading && <Reader documentId={reading.id} highlight={{ start: reading.start, end: reading.end }} onClose={() => setReading(null)} />}
-    </aside>
+    </div>
   );
 }
 
@@ -120,6 +125,9 @@ export default function NotebookView() {
   const [reading, setReading] = useState<{ id: string; start?: number; end?: number } | null>(null);
   const [editingTitle, setEditingTitle] = useState(false);
   const [title, setTitle] = useState("");
+  const [pane, setPane] = useState<Pane>("create");
+  const [params, setParams] = useSearchParams();
+  const asked = useRef(false);
   const bottom = useRef<HTMLDivElement>(null);
 
   const load = useCallback(
@@ -152,9 +160,8 @@ export default function NotebookView() {
     setTurns(msgs.map((m) => ({ role: m.role, text: m.text, citations: m.citations })));
   };
 
-  const ask = async (e: FormEvent) => {
-    e.preventDefault();
-    const question = q.trim();
+  const ask = async (text: string) => {
+    const question = text.trim();
     if (!question || busy) return;
     setQ("");
     setBusy(true);
@@ -189,6 +196,16 @@ export default function NotebookView() {
     }
   };
 
+  // A question passed in the link (from the Home ask box) is asked as soon as the notebook opens.
+  useEffect(() => {
+    const pending = params.get("q");
+    if (!nb || !pending || asked.current || !nb.documents.length) return;
+    asked.current = true;
+    setParams({}, { replace: true });
+    void ask(pending);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nb]);
+
   if (loadError) return <p className="error-text">{loadError}</p>;
   if (!nb) return <Loading label="Opening notebook" />;
 
@@ -197,90 +214,73 @@ export default function NotebookView() {
 
   return (
     <div className="nbv">
-      <aside className="card nbv-pane">
-        <Link to="/app/notebooks" className="mono muted small-link">
-          All notebooks
-        </Link>
-        {editingTitle ? (
-          <form
-            onSubmit={async (e) => {
-              e.preventDefault();
-              await notebooksApi.update(nb.id, { title });
-              setEditingTitle(false);
-              load();
-            }}
-          >
-            <input className="input input-sm" autoFocus value={title} onChange={(e) => setTitle(e.target.value)} onBlur={() => setEditingTitle(false)} aria-label="Notebook title" />
-          </form>
-        ) : (
-          <h2 className="nbv-title" onDoubleClick={() => setEditingTitle(true)} title="Double click to rename">
-            {nb.title}
-          </h2>
-        )}
-        <div className="row between">
-          <p className="eyebrow">{nb.documents.length} posts</p>
-          <button className="btn btn-small" onClick={() => setAdding(true)}>
-            Add posts
-          </button>
-        </div>
-        <ul className="nbv-docs">
-          {nb.documents.map((d) => (
-            <li key={d.id} className="nbv-doc">
-              <button className="link-btn" onClick={() => setReading({ id: d.id })}>
-                {d.title}
-              </button>
-              <span className="mono muted">{formatDate(d.published_at)}</span>
-              <button
-                className="icon-btn nbv-remove"
-                aria-label={`Remove ${d.title}`}
-                title="Remove from notebook"
-                onClick={async () => {
-                  await notebooksApi.removeDoc(nb.id, d.id);
+      <section className="card nbv-pane nbv-chat">
+        <div className="chat-bar">
+          <div className="nbv-titlebar">
+            <Link to="/app/notebooks" className="mono muted small-link">
+              Notebooks /
+            </Link>
+            {editingTitle ? (
+              <form
+                onSubmit={async (e) => {
+                  e.preventDefault();
+                  await notebooksApi.update(nb.id, { title });
+                  setEditingTitle(false);
                   load();
                 }}
               >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
-                  <path d="M6 6l12 12M18 6L6 18" />
-                </svg>
-              </button>
-            </li>
-          ))}
-        </ul>
-      </aside>
-
-      <section className="card nbv-pane nbv-chat">
-        <div className="chat-bar">
-          <select
-            className="input input-sm"
-            value={chatId ?? ""}
-            onChange={(e) => (e.target.value ? openChat(e.target.value) : (setChatId(null), setTurns([])))}
-            aria-label="Chat history"
-          >
-            <option value="">New chat</option>
-            {chats.map((c) => (
-              <option key={c.id} value={c.id}>
-                {(c.title ?? "Chat").slice(0, 60)} · {formatDate(c.updated_at)}
-              </option>
-            ))}
-          </select>
-          {chatId && (
-            <ConfirmButton
-              onConfirm={async () => {
-                await notebooksApi.removeChat(chatId);
-                setChatId(null);
-                setTurns([]);
-                loadChats();
-              }}
-            >
-              Delete chat
-            </ConfirmButton>
-          )}
+                <input className="input input-sm" autoFocus value={title} onChange={(e) => setTitle(e.target.value)} onBlur={() => setEditingTitle(false)} aria-label="Notebook title" />
+              </form>
+            ) : (
+              <h2 className="nbv-title" onDoubleClick={() => setEditingTitle(true)} title="Double click to rename">
+                {nb.title}
+              </h2>
+            )}
+          </div>
+          <div className="row">
+            {(chats.length > 0 || chatId) && (
+              <select
+                className="input input-sm"
+                value={chatId ?? ""}
+                onChange={(e) => (e.target.value ? openChat(e.target.value) : (setChatId(null), setTurns([])))}
+                aria-label="Chat history"
+              >
+                <option value="">New chat</option>
+                {chats.map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {(c.title ?? "Chat").slice(0, 60)} · {formatDate(c.updated_at)}
+                  </option>
+                ))}
+              </select>
+            )}
+            {chatId && (
+              <ConfirmButton
+                onConfirm={async () => {
+                  await notebooksApi.removeChat(chatId);
+                  setChatId(null);
+                  setTurns([]);
+                  loadChats();
+                }}
+              >
+                Delete chat
+              </ConfirmButton>
+            )}
+          </div>
         </div>
         <div className="nbv-turns">
           {turns.length === 0 && (
-            <div className="empty-state small">
+            <div className="nbv-empty">
               <TelescopeIcon size={32} />
-              <p className="muted">Ask anything about these posts. Answers cite the passage they came from.</p>
+              <p className="muted">Ask anything about {nb.documents.length} posts. Answers cite the passage they came from.</p>
+              {nb.documents.length > 0 && (
+                <div className="nbv-starters">
+                  {STARTERS.map((s) => (
+                    <button key={s} type="button" className="nbv-starter" onClick={() => ask(s)}>
+                      {s}
+                    </button>
+                  ))}
+                </div>
+              )}
             </div>
           )}
           {turns.map((t, i) => (
@@ -307,7 +307,13 @@ export default function NotebookView() {
           ))}
           <div ref={bottom} />
         </div>
-        <form onSubmit={ask} className="inline-form">
+        <form
+          onSubmit={(e: FormEvent) => {
+            e.preventDefault();
+            void ask(q);
+          }}
+          className="inline-form nbv-ask"
+        >
           <input
             className="input"
             value={q}
@@ -322,7 +328,53 @@ export default function NotebookView() {
         </form>
       </section>
 
-      <StudioPanel notebookId={nb.id} disabled={nb.documents.length === 0} />
+      <aside className="card nbv-pane nbv-side">
+        <Tabs<Pane>
+          tabs={[
+            { id: "create", label: "Create" },
+            { id: "posts", label: "Posts", count: nb.documents.length },
+          ]}
+          value={pane}
+          onChange={setPane}
+        />
+        {pane === "create" && <StudioPanel notebookId={nb.id} disabled={nb.documents.length === 0} />}
+        {pane === "posts" && (
+          <>
+            {nb.is_archive ? (
+              <p className="muted small">Every indexed post. New posts join automatically.</p>
+            ) : (
+              <button className="btn btn-small" onClick={() => setAdding(true)}>
+                Add posts
+              </button>
+            )}
+            <ul className="nbv-docs">
+              {nb.documents.map((d) => (
+                <li key={d.id} className="nbv-doc">
+                  <button className="link-btn" onClick={() => setReading({ id: d.id })}>
+                    {d.title}
+                  </button>
+                  <span className="mono muted">{formatDate(d.published_at)}</span>
+                  {!nb.is_archive && (
+                    <button
+                      className="icon-btn nbv-remove"
+                      aria-label={`Remove ${d.title}`}
+                      title="Remove from notebook"
+                      onClick={async () => {
+                        await notebooksApi.removeDoc(nb.id, d.id);
+                        load();
+                      }}
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                        <path d="M6 6l12 12M18 6L6 18" />
+                      </svg>
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </aside>
 
       {adding && (
         <Modal title="Add posts" onClose={() => setAdding(false)} wide>

frontend/src/pages/Notebooks.tsx

@@ -1,23 +1,41 @@
 import { useCallback, useEffect, useState, type FormEvent } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { notebooksApi } from "../api/endpoints";
-import type { NotebookSummary } from "../api/types";
+import { docsApi, notebooksApi } from "../api/endpoints";
+import type { Doc, NotebookSummary } from "../api/types";
 import { DocPicker } from "../components/DocPicker";
-import { ConfirmButton, EmptyState, errorMessage, formatDate, Loading, Modal, PageHeader } from "../components/ui";
+import { PlanetIcon } from "../components/icons/Icons";
+import { ConfirmButton, errorMessage, formatDate, Loading, Modal, PageHeader } from "../components/ui";
 
+/** New notebook from a topic: typing it finds and pre-selects the matching posts; hand picking is the fallback. */
 export function NewNotebookModal({ onClose, initialDocs = [] }: { onClose: () => void; initialDocs?: string[] }) {
-  const [title, setTitle] = useState("");
+  const [topic, setTopic] = useState("");
+  const [matches, setMatches] = useState<Doc[]>([]);
   const [selected, setSelected] = useState<string[]>(initialDocs);
+  const [manual, setManual] = useState(initialDocs.length > 0);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (manual || topic.trim().length < 2) {
+      if (!manual) setMatches([]);
+      return;
+    }
+    const t = setTimeout(async () => {
+      const page = await docsApi.list({ q: topic.trim(), limit: 50 });
+      const found = page.items.filter((d) => !d.locked);
+      setMatches(found);
+      setSelected(found.map((d) => d.id));
+    }, 250);
+    return () => clearTimeout(t);
+  }, [topic, manual]);
+
   const submit = async (e: FormEvent) => {
     e.preventDefault();
     setBusy(true);
     setError(null);
     try {
-      const nb = await notebooksApi.create(title.trim() || "Untitled notebook", selected);
+      const nb = await notebooksApi.create(topic.trim() || "Untitled notebook", selected);
       navigate(`/app/notebooks/${nb.id}`);
     } catch (err) {
       setError(errorMessage(err));
@@ -29,19 +47,43 @@ export function NewNotebookModal({ onClose, initialDocs = [] }: { onClose: () =>
     <Modal title="New notebook" onClose={onClose} wide>
       <form onSubmit={submit} className="stack">
         <label className="field">
-          <span>Title</span>
-          <input className="input input-sm" autoFocus value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Pricing and paid tiers" />
+          <span>What is it about?</span>
+          <input className="input" autoFocus value={topic} onChange={(e) => setTopic(e.target.value)} placeholder="Pricing, paid tiers, 2024 essays..." />
         </label>
-        <div className="field">
-          <span>Posts in this notebook</span>
+        {manual ? (
           <DocPicker selected={selected} onChange={setSelected} />
-        </div>
+        ) : (
+          <>
+            {topic.trim().length >= 2 && (
+              <p className="muted small">
+                {matches.length ? `${matches.length} posts mention it. Untick any that do not belong.` : "No posts mention that yet."}
+              </p>
+            )}
+            {matches.length > 0 && (
+              <ul className="picker-list nb-matches">
+                {matches.map((d) => (
+                  <li key={d.id}>
+                    <label className={`picker-row${selected.includes(d.id) ? " on" : ""}`}>
+                      <input
+                        type="checkbox"
+                        checked={selected.includes(d.id)}
+                        onChange={(e) => setSelected(e.target.checked ? [...selected, d.id] : selected.filter((x) => x !== d.id))}
+                      />
+                      <span className="picker-title">{d.title}</span>
+                      <span className="mono muted picker-meta">{formatDate(d.published_at)}</span>
+                    </label>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </>
+        )}
         {error && <p className="error-text">{error}</p>}
-        <div className="row end">
-          <button type="button" className="btn" onClick={onClose}>
-            Cancel
+        <div className="row between">
+          <button type="button" className="link-btn small" onClick={() => setManual(!manual)}>
+            {manual ? "Find posts by topic instead" : "Pick posts by hand"}
           </button>
-          <button className="btn btn-primary" disabled={busy}>
+          <button className="btn btn-primary" disabled={busy || !selected.length}>
             {busy ? "Creating..." : `Create with ${selected.length} posts`}
           </button>
         </div>
@@ -50,6 +92,31 @@ export function NewNotebookModal({ onClose, initialDocs = [] }: { onClose: () =>
   );
 }
 
+function CardMenu({ onRename, onDelete }: { onRename: () => void; onDelete: () => Promise<void> }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="card-menu">
+      <button type="button" className="icon-btn" aria-label="Notebook options" aria-expanded={open} onClick={() => setOpen(!open)}>
+        ⋯
+      </button>
+      {open && (
+        <div className="card-menu-list" onMouseLeave={() => setOpen(false)}>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false);
+              onRename();
+            }}
+          >
+            Rename
+          </button>
+          <ConfirmButton onConfirm={onDelete}>Delete</ConfirmButton>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function Notebooks() {
   const [notebooks, setNotebooks] = useState<NotebookSummary[] | null>(null);
   const [creating, setCreating] = useState(false);
@@ -58,7 +125,8 @@ export default function Notebooks() {
 
   const load = useCallback(() => notebooksApi.list().then(setNotebooks), []);
   useEffect(() => {
-    load();
+    // "All posts" always exists, so asking the whole archive never needs setup.
+    notebooksApi.archive().finally(load);
   }, [load]);
 
   return (
@@ -68,24 +136,10 @@ export default function Notebooks() {
           New notebook
         </button>
       </PageHeader>
-      <p className="muted lede">
-        A notebook is a set of posts you can question, summarize and turn into audio, video and launch kits. Every answer cites the lines it came from.
-      </p>
       {!notebooks && <Loading />}
-      {notebooks?.length === 0 && (
-        <EmptyState
-          title="No notebooks yet"
-          body="Group posts by theme, series or year. You can also make one from a topic on the Topic map."
-          action={
-            <button className="btn btn-primary" onClick={() => setCreating(true)}>
-              Create your first notebook
-            </button>
-          }
-        />
-      )}
-      <section className="grid-cards">
+      <section className="nb-grid">
         {notebooks?.map((n) => (
-          <article key={n.id} className="card nb-card">
+          <article key={n.id} className={`card nb-card${n.is_archive ? " nb-archive" : ""}`}>
             {renaming === n.id ? (
               <form
                 className="inline-form"
@@ -101,37 +155,37 @@ export default function Notebooks() {
               </form>
             ) : (
               <Link to={`/app/notebooks/${n.id}`} className="nb-card-link">
+                {n.is_archive && <PlanetIcon size={26} />}
                 <h3>{n.title}</h3>
                 {(n.description || n.summary) && <p className="muted clamp-3">{n.description || n.summary}</p>}
+                <p className="mono muted">
+                  {n.document_count} posts
+                  {n.chat_count ? ` · ${n.chat_count} chats` : ""}
+                  {n.artifact_count ? ` · ${n.artifact_count} made` : ""} · {formatDate(n.updated_at)}
+                </p>
               </Link>
             )}
-            <p className="mono muted">
-              {n.document_count} posts · {n.chat_count} chats · {n.artifact_count} artifacts · {formatDate(n.updated_at)}
-            </p>
-            <footer className="row">
-              <Link className="btn btn-small" to={`/app/notebooks/${n.id}`}>
-                Open
-              </Link>
-              <button
-                className="btn btn-small"
-                onClick={() => {
+            {!n.is_archive && renaming !== n.id && (
+              <CardMenu
+                onRename={() => {
                   setRenaming(n.id);
                   setName(n.title);
                 }}
-              >
-                Rename
-              </button>
-              <ConfirmButton
-                onConfirm={async () => {
+                onDelete={async () => {
                   await notebooksApi.remove(n.id);
                   load();
                 }}
-              >
-                Delete
-              </ConfirmButton>
-            </footer>
+              />
+            )}
           </article>
         ))}
+        <button type="button" className="card nb-card nb-new" onClick={() => setCreating(true)}>
+          <span className="mc-more" aria-hidden="true">
+            +
+          </span>
+          <strong>New notebook</strong>
+          <span className="muted small">Group posts by theme, series or year</span>
+        </button>
       </section>
       {creating && <NewNotebookModal onClose={() => setCreating(false)} />}
     </div>

frontend/src/pages/Resurface.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
 import { resurfaceApi } from "../api/endpoints";
 import type { Job, ResurfaceItem } from "../api/types";
 import { Reader } from "../components/Reader";
 import { ScheduleModal } from "../components/ScheduleModal";
-import { EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader } from "../components/ui";
+import { errorMessage, formatDate, JobProgress, Loading } from "../components/ui";
 import { useJob } from "../hooks/useJob";
 
 type Data = Awaited<ReturnType<typeof resurfaceApi.get>>;
@@ -12,7 +12,7 @@ type Data = Awaited<ReturnType<typeof resurfaceApi.get>>;
 function Row({ item, onRead, onSchedule }: { item: ResurfaceItem; onRead: () => void; onSchedule: () => void }) {
   const navigate = useNavigate();
   return (
-    <li className="card resurface-row">
+    <li className="idea">
       <div className="row between">
         <button className="link-btn doc-title" onClick={onRead}>
           {item.title}
@@ -23,16 +23,15 @@ function Row({ item, onRead, onSchedule }: { item: ResurfaceItem; onRead: () =>
           </span>
         )}
       </div>
-      <p className="mono muted">
+      <p className="mono muted small">
         {formatDate(item.published_at)}
         {item.years_ago ? ` · ${item.years_ago} year${item.years_ago > 1 ? "s" : ""} ago today` : ""}
         {item.last_resurfaced_at ? ` · reshared ${formatDate(item.last_resurfaced_at)}` : ""}
       </p>
       {item.angle && <p className="angle">{item.angle}</p>}
-      {item.reason && <p className="muted small">{item.reason}</p>}
       <div className="row">
         <button className="btn btn-small btn-primary" onClick={() => navigate(`/app/launch-kit?post=${item.id}`)}>
-          Make a Launch Kit
+          Launch Kit
         </button>
         <button className="btn btn-small" onClick={onSchedule}>
           Schedule a reshare
@@ -42,7 +41,8 @@ function Row({ item, onRead, onSchedule }: { item: ResurfaceItem; onRead: () =>
   );
 }
 
-export default function Resurface() {
+/** Old posts worth a second orbit. Scoring runs after every sync, so there is nothing to press first. */
+export function ResurfaceIdeas({ onScheduled }: { onScheduled?: () => void }) {
   const [data, setData] = useState<Data | null>(null);
   const [job, setJob] = useState<Job | null>(null);
   const [reading, setReading] = useState<string | null>(null);
@@ -56,54 +56,37 @@ export default function Resurface() {
   const live = useJob(job, () => load());
   const running = live && (live.status === "queued" || live.status === "running");
 
-  const scan = async () => {
-    setError(null);
-    try {
-      setJob(await resurfaceApi.scan());
-    } catch (e) {
-      setError(errorMessage(e));
-    }
-  };
+  if (!data) return <Loading />;
+  const items = [...data.on_this_day, ...data.evergreen.filter((e) => !data.on_this_day.some((o) => o.id === e.id))];
 
   return (
-    <div className="page-wrap">
-      <PageHeader eyebrow="Resurfacing" title="Old posts worth a second orbit">
-        <button className="btn btn-primary" disabled={Boolean(running)} onClick={scan}>
-          {data?.unscored ? `Score ${data.unscored} new posts` : "Rescan"}
-        </button>
-      </PageHeader>
-      <p className="muted lede">
-        Notestack scores how timeless each post is, then ranks the old, evergreen ones you have not reshared in 90 days.
-      </p>
-      {live && (running || live.status === "failed") && <JobProgress job={live} />}
+    <div className="stack">
+      {live && (running || live.status === "failed") && <JobProgress job={live} compact />}
       {error && <p className="error-text">{error}</p>}
-      {!data && <Loading />}
-      {data && (
-        <div className="two-col">
-          <section className="stack">
-            <h2>Evergreen picks</h2>
-            {data.evergreen.length === 0 && (
-              <EmptyState
-                title={data.total_posts ? "Nothing scored yet" : "No posts yet"}
-                body={data.total_posts ? "Run a scan to find your evergreen posts." : "Connect a source first."}
-              />
-            )}
-            <ul className="stack">
-              {data.evergreen.map((i) => (
-                <Row key={i.id} item={i} onRead={() => setReading(i.id)} onSchedule={() => setScheduling(i)} />
-              ))}
-            </ul>
-          </section>
-          <section className="stack">
-            <h2>On this day</h2>
-            {data.on_this_day.length === 0 && <p className="muted">Nothing published on this date in past years.</p>}
-            <ul className="stack">
-              {data.on_this_day.map((i) => (
-                <Row key={i.id} item={i} onRead={() => setReading(i.id)} onSchedule={() => setScheduling(i)} />
-              ))}
-            </ul>
-          </section>
-        </div>
+      {items.length === 0 && (
+        <p className="muted small">
+          {data.total_posts ? "No reshare ideas yet. They appear after your posts are scored." : "Connect a source to get reshare ideas."}
+        </p>
+      )}
+      <ul className="stack">
+        {items.slice(0, 8).map((i) => (
+          <Row key={i.id} item={i} onRead={() => setReading(i.id)} onSchedule={() => setScheduling(i)} />
+        ))}
+      </ul>
+      {data.unscored > 0 && !running && (
+        <button
+          className="link-btn small"
+          onClick={async () => {
+            setError(null);
+            try {
+              setJob(await resurfaceApi.scan());
+            } catch (e) {
+              setError(errorMessage(e));
+            }
+          }}
+        >
+          Score {data.unscored} new posts now
+        </button>
       )}
       {reading && <Reader documentId={reading} onClose={() => setReading(null)} />}
       {scheduling && (
@@ -112,9 +95,17 @@ export default function Resurface() {
           posts={[`${scheduling.angle ?? scheduling.title}\n\n${scheduling.url.startsWith("http") ? scheduling.url : ""}`.trim()]}
           documentId={scheduling.id}
           onClose={() => setScheduling(null)}
-          onScheduled={() => load()}
+          onScheduled={() => {
+            load();
+            onScheduled?.();
+          }}
         />
       )}
     </div>
   );
 }
+
+/** The old Resurfacing page now lives inside Launchpad. */
+export default function Resurface() {
+  return <Navigate to="/app/launchpad#ideas" replace />;
+}

frontend/src/pages/Settings.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
 import { authApi } from "../api/auth";
 import { tokens, uploadFile } from "../api/client";
@@ -27,10 +27,13 @@ function Meter({ label, used, limit, unit }: { label: string; used: number; limi
   );
 }
 
-function Section({ title, children }: { title: string; children: ReactNode }) {
+function Section({ title, saved, children }: { title: string; saved?: boolean; children: ReactNode }) {
   return (
     <section className="card stack">
-      <h2>{title}</h2>
+      <div className="row between">
+        <h2>{title}</h2>
+        {saved && <span className="mono muted small">Saved</span>}
+      </div>
       {children}
     </section>
   );
@@ -44,7 +47,6 @@ export default function Settings() {
   const [accent, setAccent] = useState("#217cff");
   const [saved, setSaved] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const logoRef = useRef<HTMLInputElement>(null);
   const [sounds, setSounds] = useState(soundsEnabled);
   const { logout } = useAuth();
   const upgrade = useUpgrade();
@@ -75,6 +77,13 @@ export default function Settings() {
 
   if (!s) return error ? <p className="error-text">{error}</p> : <Loading />;
   const u = s.usage;
+  // Fields save on their own when the writer leaves them, so there are no Save buttons.
+  const saveProfile = () => {
+    if (name !== (s.user.name ?? "") || workspace !== s.workspace.name) void save({ name, workspace_name: workspace }, "profile");
+  };
+  const saveBrand = (next = { brandName, accent }) => {
+    if (next.brandName !== (s.brand.name ?? "") || next.accent !== s.brand.accent) void save({ brand_name: next.brandName, brand_accent: next.accent }, "brand");
+  };
 
   return (
     <div className="page-wrap">
@@ -82,58 +91,54 @@ export default function Settings() {
       {error && <p className="error-text">{error}</p>}
       <div className="two-col">
         <div className="stack">
-          <Section title="Profile">
+          <Section title="Profile" saved={saved === "profile"}>
             <label className="field">
               <span>Name</span>
-              <input className="input input-sm" value={name} onChange={(e) => setName(e.target.value)} />
+              <input className="input input-sm" value={name} onChange={(e) => setName(e.target.value)} onBlur={saveProfile} />
             </label>
             <p className="mono muted">
               {s.user.email} · signed in with {s.user.auth_provider === "google" ? "Google" : "email and password"}
             </p>
             <label className="field">
               <span>Workspace name</span>
-              <input className="input input-sm" value={workspace} onChange={(e) => setWorkspace(e.target.value)} />
+              <input className="input input-sm" value={workspace} onChange={(e) => setWorkspace(e.target.value)} onBlur={saveProfile} />
             </label>
-            <div className="row end">
-              <button className="btn btn-primary btn-small" onClick={() => save({ name, workspace_name: workspace }, "profile")}>
-                {saved === "profile" ? "Saved" : "Save"}
-              </button>
-            </div>
           </Section>
 
-          <Section title="Brand kit">
+          <Section title="Brand kit" saved={saved === "brand" || saved === "logo"}>
             <p className="muted">Used on videos, quote cards and carousels.</p>
             <label className="field">
               <span>Name on renders</span>
-              <input className="input input-sm" placeholder="Your publication" value={brandName} onChange={(e) => setBrandName(e.target.value)} />
+              <input className="input input-sm" placeholder="Your publication" value={brandName} onChange={(e) => setBrandName(e.target.value)} onBlur={() => saveBrand()} />
             </label>
             <label className="field">
               <span>Accent color</span>
               <div className="row">
-                <input type="color" value={accent} onChange={(e) => setAccent(e.target.value)} aria-label="Accent color" className="color" />
-                <input className="input input-sm mono" value={accent} onChange={(e) => setAccent(e.target.value)} />
+                <input type="color" value={accent} onChange={(e) => setAccent(e.target.value)} onBlur={() => saveBrand()} aria-label="Accent color" className="color" />
+                <input className="input input-sm mono" value={accent} onChange={(e) => setAccent(e.target.value)} onBlur={() => saveBrand()} aria-label="Accent hex" />
               </div>
             </label>
             <div className="field">
               <span>Logo</span>
               <div className="row">
                 {s.brand.logo_url && <img src={s.brand.logo_url} alt="Logo" className="logo-preview" />}
-                <input ref={logoRef} type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" className="input file-input" aria-label="Logo file" />
-                <button
-                  className="btn btn-small"
-                  onClick={async () => {
-                    const file = logoRef.current?.files?.[0];
+                <input
+                  type="file"
+                  accept="image/png,image/jpeg,image/webp,image/svg+xml"
+                  className="input file-input"
+                  aria-label="Logo file"
+                  onChange={async (e) => {
+                    const file = e.target.files?.[0];
+                    e.target.value = "";
                     if (!file) return;
                     try {
                       const up = await uploadFile(file);
                       await save({ logo_upload_id: up.upload_id }, "logo");
-                    } catch (e) {
-                      setError(errorMessage(e));
+                    } catch (err) {
+                      setError(errorMessage(err));
                     }
                   }}
-                >
-                  Upload
-                </button>
+                />
                 {s.brand.logo_url && (
                   <button className="btn btn-small" onClick={() => save({ logo_upload_id: "" }, "logo")}>
                     Remove
@@ -141,11 +146,6 @@ export default function Settings() {
                 )}
               </div>
             </div>
-            <div className="row end">
-              <button className="btn btn-primary btn-small" onClick={() => save({ brand_name: brandName, brand_accent: accent }, "brand")}>
-                {saved === "brand" ? "Saved" : "Save brand"}
-              </button>
-            </div>
           </Section>
 
           <Section title="Privacy and email">
@@ -198,36 +198,10 @@ export default function Settings() {
             )}
             {upgrade.error && !upgrade.modal && <p className="error-text">{upgrade.error}</p>}
             <p className="mono muted small">
-              {s.plan.sources} sources · {s.plan.indexed_posts.toLocaleString()} indexed posts · {u.used.llm_tokens.toLocaleString()} LLM tokens this month
+              {s.plan.sources} sources · {s.plan.indexed_posts.toLocaleString()} indexed posts
             </p>
           </Section>
 
-          <Section title="Connections">
-            <ul className="integrations mono">
-              <li>
-                LLM <span className={s.integrations.llm ? "ok" : "off"}>{s.integrations.llm ? "configured" : "set LLM_API_KEY"}</span>
-              </li>
-              <li>
-                ElevenLabs <span className={s.integrations.elevenlabs ? "ok" : "off"}>{s.integrations.elevenlabs ? "configured" : "set ELEVENLABS_API_KEY"}</span>
-              </li>
-              <li>
-                X app <span className={s.integrations.x ? "ok" : "off"}>{s.integrations.x ? "configured" : "set X_CLIENT_ID"}</span>
-              </li>
-              <li>
-                LinkedIn app <span className={s.integrations.linkedin ? "ok" : "off"}>{s.integrations.linkedin ? "configured" : "set LINKEDIN_CLIENT_ID"}</span>
-              </li>
-              <li>
-                Storage <span className="ok">{s.integrations.storage === "local" ? "local disk" : "Cloudflare R2"}</span>
-              </li>
-              <li>
-                Renderer <span className="muted">{s.integrations.renderer}</span>
-              </li>
-            </ul>
-            <button className="btn btn-small" onClick={() => navigate("/app/launchpad")}>
-              Manage social accounts
-            </button>
-          </Section>
-
           <Section title="Account">
             <div className="row">
               <button

frontend/src/pages/Sources.tsx

@@ -1,81 +1,137 @@
 import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
+import { NavLink } from "react-router-dom";
 import { docsApi, jobsApi, sourcesApi } from "../api/endpoints";
 import type { Doc, Job, Source } from "../api/types";
 import { Reader } from "../components/Reader";
-import { ConfirmButton, EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader, StatusPill, Tabs } from "../components/ui";
+import { ConfirmButton, EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader, StatusPill } from "../components/ui";
 import { useJobMap } from "../hooks/useJob";
 import { useUpgrade } from "../hooks/useUpgrade";
 
-type AddMode = "feed" | "url" | "file";
-
 const PAGE = 50;
 
+/** Sources and the Topic map share one sidebar entry; this strip switches between them. */
+export function SourcesNav() {
+  return (
+    <nav className="tabs" aria-label="Sources views">
+      <NavLink to="/app/sources" className={({ isActive }) => `tab${isActive ? " active" : ""}`}>
+        Posts
+      </NavLink>
+      <NavLink to="/app/map" className={({ isActive }) => `tab${isActive ? " active" : ""}`}>
+        Topic map
+      </NavLink>
+    </nav>
+  );
+}
+
+export const FILE_ACCEPT = ".md,.markdown,.txt,.html,.htm,.pdf,text/markdown,text/plain,text/html,application/pdf";
+
+/** A bare domain, a Substack or a feed URL is a whole archive; a deep link is one article. */
+export function looksLikeArticle(raw: string): boolean {
+  const v = raw.trim();
+  if (!v) return false;
+  try {
+    const u = new URL(v.includes("://") ? v : `https://${v}`);
+    const path = u.pathname.replace(/\/+$/, "");
+    if (!path || /(feed|rss|atom)(\.xml)?$/i.test(path) || /^\/@[^/]+$/.test(path)) return false;
+    const parts = path.split("/").filter(Boolean);
+    return /\/p\/|\/posts?\/|\/\d{4}\/|\.html?$/i.test(path) || parts.length >= 2 || path.length > 24;
+  } catch {
+    return false;
+  }
+}
+
+/** Imports each file as its own post. Returns how many failed. */
+export async function importFiles(files: File[], onAdded: (source: Source, job: Job) => void): Promise<number> {
+  let failed = 0;
+  for (const f of files) {
+    try {
+      const res = await sourcesApi.importFile(f);
+      onAdded(res.source, res.job);
+    } catch {
+      failed += 1;
+    }
+  }
+  return failed;
+}
+
+/** One box for everything: paste a link (feed or article is worked out for you) or add files. */
 export function AddSource({ onAdded }: { onAdded: (source: Source, job: Job) => void }) {
-  const [mode, setMode] = useState<AddMode>("feed");
   const [value, setValue] = useState("");
+  const [override, setOverride] = useState<"feed" | "url" | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
+  const mode = override ?? (looksLikeArticle(value) ? "url" : "feed");
 
   const submit = async (e: FormEvent) => {
     e.preventDefault();
+    if (!value.trim()) return;
     setError(null);
     setBusy(true);
     try {
-      if (mode === "file") {
-        const file = fileRef.current?.files?.[0];
-        if (!file) throw new Error("Choose a file first.");
-        const res = await sourcesApi.importFile(file);
-        onAdded(res.source, res.job);
-        if (fileRef.current) fileRef.current.value = "";
-      } else {
-        if (!value.trim()) return;
-        const res = mode === "feed" ? await sourcesApi.connect(value.trim()) : await sourcesApi.importUrl(value.trim());
-        onAdded(res.source, res.job);
-        setValue("");
-      }
+      const res = mode === "feed" ? await sourcesApi.connect(value.trim()) : await sourcesApi.importUrl(value.trim());
+      onAdded(res.source, res.job);
+      setValue("");
+      setOverride(null);
     } catch (err) {
-      setError(errorMessage(err, "Could not add that."));
+      setError(errorMessage(err, mode === "feed" ? "We could not find a feed there." : "We could not import that page."));
     } finally {
       setBusy(false);
     }
   };
 
+  const upload = async (files: FileList | null) => {
+    const list = Array.from(files ?? []);
+    if (!list.length) return;
+    setError(null);
+    setBusy(true);
+    const failed = await importFiles(list, onAdded);
+    if (failed) setError(`${failed} of ${list.length} files could not be uploaded.`);
+    setBusy(false);
+    if (fileRef.current) fileRef.current.value = "";
+  };
+
   return (
     <div className="card add-source">
-      <Tabs<AddMode>
-        tabs={[
-          { id: "feed", label: "Connect a feed" },
-          { id: "url", label: "Import one URL" },
-          { id: "file", label: "Upload a file" },
-        ]}
-        value={mode}
-        onChange={(m) => {
-          setMode(m);
-          setError(null);
-        }}
-      />
-      <p className="muted">
-        {mode === "feed" && "Any blog, newsletter or site: Substack, Ghost, WordPress, Medium or anything with an RSS feed. We find the feed and pull in your archive."}
-        {mode === "url" && "One article from anywhere on the web. It lands in Imported posts."}
-        {mode === "file" && "Markdown, text, HTML or PDF. Handy for drafts and posts that never had a feed."}
-      </p>
-      <form onSubmit={submit} className="inline-form">
-        {mode === "file" ? (
-          <input ref={fileRef} className="input file-input" type="file" accept=".md,.markdown,.txt,.html,.htm,.pdf,text/markdown,text/plain,text/html,application/pdf" aria-label="File" />
-        ) : (
-          <input
-            className="input"
-            placeholder={mode === "feed" ? "yourblog.com" : "https://example.com/my-essay"}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            aria-label={mode === "feed" ? "Feed or site URL" : "Article URL"}
-          />
-        )}
-        <button className="btn btn-primary" type="submit" disabled={busy}>
-          {busy ? (mode === "feed" ? "Finding feed..." : "Starting...") : mode === "feed" ? "Connect" : "Import"}
+      <form onSubmit={submit} className="add-smart">
+        <input
+          className="input"
+          placeholder="Paste a blog, newsletter or article link"
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            setOverride(null);
+          }}
+          aria-label="Blog, newsletter or article link"
+        />
+        <button className="btn btn-primary" type="submit" disabled={busy || !value.trim()}>
+          {busy ? "Working..." : mode === "feed" ? "Connect" : "Import article"}
+        </button>
+        <span className="muted small">or</span>
+        <button type="button" className="btn" disabled={busy} onClick={() => fileRef.current?.click()}>
+          Upload files
         </button>
+        <input ref={fileRef} type="file" multiple accept={FILE_ACCEPT} hidden onChange={(e) => upload(e.target.files)} aria-label="Files to upload" />
       </form>
+      <p className="muted small">
+        {!value.trim() && "Substack, Ghost, WordPress, Medium or any site with a feed. Markdown, text, HTML and PDF files work too; drop them anywhere on this page."}
+        {value.trim() && mode === "feed" && (
+          <>
+            We will pull in the whole archive and keep it in sync.{" "}
+            <button type="button" className="link-btn small" onClick={() => setOverride("url")}>
+              Just this one page instead
+            </button>
+          </>
+        )}
+        {value.trim() && mode === "url" && (
+          <>
+            Looks like a single article, so we will import just this page.{" "}
+            <button type="button" className="link-btn small" onClick={() => setOverride("feed")}>
+              Connect the whole site instead
+            </button>
+          </>
+        )}
+      </p>
       {error && (
         <p className="error-text" role="alert">
           {error}
@@ -115,7 +171,7 @@ export default function Sources() {
   });
 
   useEffect(() => {
-    loadSources().catch(() => setError("Could not reach the API. Is it running?"));
+    loadSources().catch(() => setError("Could not load your sources. Refresh to try again."));
   }, [loadSources]);
 
   useEffect(() => {
@@ -144,8 +200,29 @@ export default function Sources() {
     watch(source.id, job);
   };
 
+  const [dropping, setDropping] = useState(false);
+
   return (
-    <div className="page-wrap">
+    <div
+      className={`page-wrap${dropping ? " drop-over" : ""}`}
+      onDragOver={(e) => {
+        if (!e.dataTransfer.types.includes("Files")) return;
+        e.preventDefault();
+        setDropping(true);
+      }}
+      onDragLeave={(e) => {
+        if (e.currentTarget === e.target) setDropping(false);
+      }}
+      onDrop={async (e) => {
+        if (!e.dataTransfer.files.length) return;
+        e.preventDefault();
+        setDropping(false);
+        const files = Array.from(e.dataTransfer.files);
+        const failed = await importFiles(files, added);
+        setError(failed ? `${failed} of ${files.length} files could not be uploaded.` : null);
+      }}
+    >
+      <SourcesNav />
       <PageHeader eyebrow="Sources" title="Your knowledge, in orbit" />
       <AddSource onAdded={added} />
       {error && <p className="error-text">{error}</p>}

frontend/src/pages/Studio.tsx

@@ -1,61 +1,54 @@
 import { useCallback, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { artifactsApi, notebooksApi, type GenerateBody } from "../api/endpoints";
 import type { Artifact, NotebookSummary } from "../api/types";
 import { ArtifactCard } from "../components/ArtifactCard";
 import { DocPicker } from "../components/DocPicker";
+import { LaunchWindowIcon, PlanetIcon, RocketIcon, SparkleIcon } from "../components/icons/Icons";
 import { Reader } from "../components/Reader";
-import { EmptyState, errorMessage, Loading, PageHeader, Tabs } from "../components/ui";
+import { errorMessage, PageHeader } from "../components/ui";
 
-type Kind = "audio" | "short" | "explainer" | "audiogram" | "quote";
+type Kind = "audio" | "short" | "explainer" | "quote";
 
-const KINDS: { id: Kind; label: string; blurb: string }[] = [
-  { id: "audio", label: "Audio overview", blurb: "Two hosts talk through your posts, every line grounded in what you wrote." },
-  { id: "short", label: "Short 9:16", blurb: "A vertical video with a hook in the first two seconds, narration and captions." },
-  { id: "explainer", label: "Explainer 16:9", blurb: "A title card and narrated scenes for YouTube or your post." },
-  { id: "audiogram", label: "Audiogram 1:1", blurb: "A square waveform video of an audio overview, with the live transcript." },
-  { id: "quote", label: "Quote card", blurb: "Your most quotable line, verified against the post, as a 1080 square." },
+const KINDS: { id: Kind; label: string; blurb: string; icon: typeof PlanetIcon }[] = [
+  { id: "audio", label: "Audio overview", blurb: "Two hosts talk through your posts, every line grounded in what you wrote.", icon: PlanetIcon },
+  { id: "short", label: "Short video", blurb: "Vertical 9:16 with a hook in the first two seconds, narration and captions.", icon: LaunchWindowIcon },
+  { id: "explainer", label: "Explainer", blurb: "16:9 title card and narrated scenes for YouTube or your post.", icon: SparkleIcon },
+  { id: "quote", label: "Quote card", blurb: "Your most quotable line, verified against the post, as a 1080 square.", icon: RocketIcon },
 ];
 
+const ARCHIVE = "archive";
+const ONE_POST = "post";
+
+/** Create: pick a format, say what it is about (the whole archive by default), press Create. */
 export default function Studio() {
   const [kind, setKind] = useState<Kind>("audio");
-  const [target, setTarget] = useState<"notebook" | "post">("notebook");
+  const [about, setAbout] = useState(ARCHIVE);
   const [notebooks, setNotebooks] = useState<NotebookSummary[]>([]);
-  const [notebookId, setNotebookId] = useState("");
   const [postIds, setPostIds] = useState<string[]>([]);
   const [format, setFormat] = useState<"deep_dive" | "brief" | "debate">("deep_dive");
   const [minutes, setMinutes] = useState(6);
-  const [audioId, setAudioId] = useState("");
-  const [gallery, setGallery] = useState<Artifact[] | null>(null);
-  const [filter, setFilter] = useState<"all" | "audio_overview" | "video" | "quote_card,carousel">("all");
+  const [recent, setRecent] = useState<Artifact[] | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [reading, setReading] = useState<{ id: string; start: number; end: number } | null>(null);
 
   const load = useCallback(
-    () =>
-      artifactsApi
-        .list({ type: filter === "all" ? "audio_overview,video,quote_card,carousel" : filter, limit: 60 })
-        .then((p) => setGallery(p.items)),
-    [filter],
+    () => artifactsApi.list({ type: "audio_overview,video,quote_card", limit: 6 }).then((p) => setRecent(p.items)),
+    [],
   );
 
   useEffect(() => {
-    notebooksApi.list().then((n) => {
-      setNotebooks(n);
-      setNotebookId((cur) => cur || n[0]?.id || "");
-    });
-  }, []);
-  useEffect(() => {
+    notebooksApi.list().then((n) => setNotebooks(n.filter((x) => !x.is_archive)));
     load();
   }, [load]);
 
-  const audios = (gallery ?? []).filter((a) => a.type === "audio_overview" && a.status === "ready");
-
   const create = async () => {
     setError(null);
-    const where: Partial<GenerateBody> = target === "notebook" ? { notebook_id: notebookId } : { document_id: postIds[0] };
-    if (kind !== "audiogram" && !where.notebook_id && !where.document_id) {
-      setError(target === "notebook" ? "Pick a notebook." : "Pick a post.");
+    const where: Partial<GenerateBody> =
+      about === ARCHIVE ? { archive: true } : about === ONE_POST ? { document_id: postIds[0] } : { notebook_id: about };
+    if (about === ONE_POST && !postIds[0]) {
+      setError("Pick a post.");
       return;
     }
     const body: GenerateBody =
@@ -63,17 +56,11 @@ export default function Studio() {
         ? { type: "audio_overview", format, minutes, ...where }
         : kind === "quote"
           ? { type: "quote_card", ...where }
-          : kind === "audiogram"
-            ? { type: "video", style: "audiogram", audio_artifact_id: audioId }
-            : { type: "video", style: kind, ...where };
-    if (kind === "audiogram" && !audioId) {
-      setError("Pick an audio overview first.");
-      return;
-    }
+          : { type: "video", style: kind, ...where };
     setBusy(true);
     try {
       const a = await artifactsApi.generate(body);
-      setGallery((g) => [a, ...(g ?? [])]);
+      setRecent((g) => [a, ...(g ?? [])].slice(0, 6));
     } catch (e) {
       setError(errorMessage(e));
     } finally {
@@ -85,108 +72,109 @@ export default function Studio() {
 
   return (
     <div className="page-wrap">
-      <PageHeader eyebrow="Video and audio" title="Studio" />
+      <PageHeader eyebrow="Create" title="Make something from your writing" />
       <section className="card stack studio-maker">
-        <Tabs<Kind> tabs={KINDS.map((k) => ({ id: k.id, label: k.label }))} value={kind} onChange={setKind} />
+        <div className="format-grid">
+          {KINDS.map((k) => (
+            <button key={k.id} type="button" className={`format-tile${kind === k.id ? " on" : ""}`} aria-pressed={kind === k.id} onClick={() => setKind(k.id)}>
+              <k.icon size={30} />
+              <strong>{k.label}</strong>
+            </button>
+          ))}
+          <Link to="/app/launch-kit" className="format-tile">
+            <span className="mc-more" aria-hidden="true">
+              +
+            </span>
+            <strong>Launch Kit</strong>
+          </Link>
+        </div>
         <p className="muted">{meta.blurb}</p>
-        {kind === "audiogram" ? (
+
+        <div className="studio-row">
           <label className="field">
-            <span>Audio overview</span>
-            <select className="input input-sm" value={audioId} onChange={(e) => setAudioId(e.target.value)}>
-              <option value="">Pick one</option>
-              {audios.map((a) => (
-                <option key={a.id} value={a.id}>
-                  {a.title}
-                </option>
-              ))}
-            </select>
-            {audios.length === 0 && <span className="muted small">Make an audio overview first.</span>}
-          </label>
-        ) : (
-          <>
-            <div className="row">
-              <label className="check">
-                <input type="radio" checked={target === "notebook"} onChange={() => setTarget("notebook")} /> From a notebook
-              </label>
-              <label className="check">
-                <input type="radio" checked={target === "post"} onChange={() => setTarget("post")} /> From one post
-              </label>
-            </div>
-            {target === "notebook" ? (
-              notebooks.length ? (
-                <select className="input input-sm" value={notebookId} onChange={(e) => setNotebookId(e.target.value)} aria-label="Notebook">
+            <span>What is it about?</span>
+            <select className="input" value={about} onChange={(e) => setAbout(e.target.value)}>
+              <option value={ARCHIVE}>My whole archive</option>
+              {notebooks.length > 0 && (
+                <optgroup label="A notebook">
                   {notebooks.map((n) => (
                     <option key={n.id} value={n.id}>
                       {n.title} ({n.document_count} posts)
                     </option>
                   ))}
+                </optgroup>
+              )}
+              <option value={ONE_POST}>One post...</option>
+            </select>
+          </label>
+          {kind === "audio" && (
+            <>
+              <label className="field">
+                <span>Format</span>
+                <select className="input" value={format} onChange={(e) => setFormat(e.target.value as typeof format)}>
+                  <option value="deep_dive">Deep dive</option>
+                  <option value="brief">Brief</option>
+                  <option value="debate">Debate</option>
+                </select>
+              </label>
+              <label className="field">
+                <span>Length</span>
+                <select className="input" value={minutes} onChange={(e) => setMinutes(Number(e.target.value))}>
+                  {[3, 6, 10, 15, 20].map((m) => (
+                    <option key={m} value={m}>
+                      {m} minutes
+                    </option>
+                  ))}
                 </select>
-              ) : (
-                <p className="muted">No notebooks yet. Switch to one post, or create a notebook first.</p>
-              )
-            ) : (
-              <DocPicker selected={postIds} onChange={setPostIds} single />
-            )}
-          </>
-        )}
-        {kind === "audio" && (
-          <div className="row">
-            <label className="field">
-              <span>Format</span>
-              <select className="input input-sm" value={format} onChange={(e) => setFormat(e.target.value as typeof format)}>
-                <option value="deep_dive">Deep dive</option>
-                <option value="brief">Brief</option>
-                <option value="debate">Debate</option>
-              </select>
-            </label>
-            <label className="field">
-              <span>Length</span>
-              <select className="input input-sm" value={minutes} onChange={(e) => setMinutes(Number(e.target.value))}>
-                {[3, 6, 10, 15, 20].map((m) => (
-                  <option key={m} value={m}>
-                    {m} minutes
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-        )}
-        {error && <p className="error-text">{error}</p>}
-        <div className="row end">
-          <button className="btn btn-primary" onClick={create} disabled={busy}>
+              </label>
+            </>
+          )}
+          <button className="btn btn-primary studio-go" onClick={create} disabled={busy}>
             {busy ? "Launching..." : `Create ${meta.label.toLowerCase()}`}
           </button>
         </div>
+        {about === ONE_POST && <DocPicker selected={postIds} onChange={setPostIds} single />}
+        {error && <p className="error-text">{error}</p>}
       </section>
 
-      <section className="stack">
-        <div className="row between">
-          <h2>Renders</h2>
-          <Tabs
-            tabs={[
-              { id: "all", label: "All" },
-              { id: "audio_overview", label: "Audio" },
-              { id: "video", label: "Video" },
-              { id: "quote_card,carousel", label: "Stills" },
-            ]}
-            value={filter}
-            onChange={setFilter}
-          />
-        </div>
-        {!gallery && <Loading />}
-        {gallery?.length === 0 && <EmptyState title="Nothing rendered yet" body="Your audio overviews, videos and cards will land here." />}
-        <div className="gallery">
-          {gallery?.map((a) => (
-            <ArtifactCard
-              key={a.id}
-              artifact={a}
-              onCite={(c) => c.document_id && setReading({ id: c.document_id, start: c.line_start, end: c.line_end })}
-              onRemoved={(id) => setGallery((g) => (g ?? []).filter((x) => x.id !== id))}
-              onChanged={(next) => setGallery((g) => (g ?? []).map((x) => (x.id === next.id ? next : x)))}
-            />
-          ))}
-        </div>
-      </section>
+      {recent && recent.length > 0 && (
+        <section className="stack">
+          <div className="row between">
+            <h2>Latest</h2>
+            <Link to="/app/archive" className="mono muted small-link">
+              Everything in Library
+            </Link>
+          </div>
+          <div className="gallery">
+            {recent.map((a) => (
+              <ArtifactCard
+                key={a.id}
+                artifact={a}
+                onCite={(c) => c.document_id && setReading({ id: c.document_id, start: c.line_start, end: c.line_end })}
+                onRemoved={(id) => setRecent((g) => (g ?? []).filter((x) => x.id !== id))}
+                onChanged={(next) => setRecent((g) => (g ?? []).map((x) => (x.id === next.id ? next : x)))}
+                actions={(art) =>
+                  art.type === "audio_overview" && art.status === "ready" ? (
+                    <button
+                      className="btn btn-small"
+                      onClick={async () => {
+                        try {
+                          const v = await artifactsApi.generate({ type: "video", style: "audiogram", audio_artifact_id: art.id });
+                          setRecent((g) => [v, ...(g ?? [])].slice(0, 6));
+                        } catch (e) {
+                          setError(errorMessage(e));
+                        }
+                      }}
+                    >
+                      Make audiogram
+                    </button>
+                  ) : null
+                }
+              />
+            ))}
+          </div>
+        </section>
+      )}
       {reading && <Reader documentId={reading.id} highlight={{ start: reading.start, end: reading.end }} onClose={() => setReading(null)} />}
     </div>
   );

frontend/src/pages/TopicMap.tsx

@@ -9,7 +9,8 @@ import {
   type RefObject,
 } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { notebooksApi, topicsApi } from "../api/endpoints";
+import { artifactsApi, notebooksApi, topicsApi } from "../api/endpoints";
+import { SourcesNav } from "./Sources";
 import type { Job, TopicDetail, TopicMap as TopicMapData, TopicNode } from "../api/types";
 import { Reader } from "../components/Reader";
 import { EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader, Tabs } from "../components/ui";
@@ -299,6 +300,9 @@ export default function TopicMap() {
   const [data, setData] = useState<TopicMapData | null>(null);
   const [job, setJob] = useState<Job | null>(null);
   const [selected, setSelected] = useState<TopicDetail | null>(null);
+  const [briefing, setBriefing] = useState(false);
+  const [menu, setMenu] = useState(false);
+  const [acting, setActing] = useState<string | null>(null);
   const [hover, setHover] = useState<string | null>(null);
   const [mode, setMode] = useState<ColorMode>("recency");
   const [reading, setReading] = useState<string | null>(null);
@@ -458,6 +462,7 @@ export default function TopicMap() {
 
   return (
     <div className="page-wrap">
+      <SourcesNav />
       <PageHeader eyebrow="Topic map" title="The constellations in your archive">
         <Tabs<ColorMode>
           tabs={[
@@ -467,12 +472,35 @@ export default function TopicMap() {
           value={mode}
           onChange={setMode}
         />
-        <button className="btn btn-small" disabled={Boolean(running)} onClick={() => rebuild(false)}>
-          {data?.has_untagged_posts ? "Map new posts" : "Refresh"}
-        </button>
-        <button className="btn btn-small" disabled={Boolean(running)} onClick={() => rebuild(true)}>
-          Rebuild
-        </button>
+        {data && data.nodes.length > 0 && (
+          <button className={`btn btn-small${briefing ? " btn-primary" : ""}`} onClick={() => setBriefing(!briefing)} aria-pressed={briefing}>
+            Briefing
+          </button>
+        )}
+        {data?.has_untagged_posts && (
+          <button className="btn btn-small" disabled={Boolean(running)} onClick={() => rebuild(false)}>
+            Map new posts
+          </button>
+        )}
+        <div className="card-menu map-menu">
+          <button type="button" className="icon-btn" aria-label="Map options" aria-expanded={menu} onClick={() => setMenu(!menu)}>
+            ⋯
+          </button>
+          {menu && (
+            <div className="card-menu-list" onMouseLeave={() => setMenu(false)}>
+              <button
+                type="button"
+                disabled={Boolean(running)}
+                onClick={() => {
+                  setMenu(false);
+                  rebuild(true);
+                }}
+              >
+                Rebuild the whole map
+              </button>
+            </div>
+          )}
+        </div>
       </PageHeader>
       {live && (running || live.status === "failed") && <JobProgress job={live} />}
       {error && <p className="error-text">{error}</p>}
@@ -489,7 +517,7 @@ export default function TopicMap() {
         />
       )}
       {data && data.nodes.length > 0 && (
-        <div className="map-layout">
+        <div className={`map-layout${selected || briefing ? "" : " map-full"}`}>
           <div className="card map-canvas">
             <div className="map-controls">
               <button className="icon-btn" onClick={() => zoomAt(0.75)} aria-label="Zoom in" title="Zoom in">
@@ -524,7 +552,8 @@ export default function TopicMap() {
               )}
             </div>
 
-            <div className="map-legend mono" aria-label="Legend">
+            <details className="map-legend mono" aria-label="Legend">
+              <summary>Legend</summary>
               <span>
                 <i className="lg-size" /> size = posts
               </span>
@@ -545,7 +574,7 @@ export default function TopicMap() {
               <span>
                 <i className="lg-line" /> lines = shared posts
               </span>
-            </div>
+            </details>
 
             <svg
               ref={svgRef}
@@ -713,6 +742,7 @@ export default function TopicMap() {
             </svg>
           </div>
 
+          {(selected || briefing) && (
           <aside className="card map-side">
             {!selected && (
               <>
@@ -771,7 +801,7 @@ export default function TopicMap() {
                     {data.insights.dormant.length === 0 && <li className="muted small">Every topic has been visited lately.</li>}
                   </ul>
                   {data.insights.dormant.length > 0 && (
-                    <Link to="/app/resurface" className="small-link mono">
+                    <Link to="/app/launchpad#ideas" className="small-link mono">
                       Resurface old posts
                     </Link>
                   )}
@@ -802,7 +832,7 @@ export default function TopicMap() {
             {selected && (
               <>
                 <button className="link-btn mono muted small" onClick={() => setSelected(null)}>
-                  Back to briefing
+                  {briefing ? "Back to briefing" : "Close"}
                 </button>
                 <div className="row between">
                   <h2>{selected.name}</h2>
@@ -851,15 +881,39 @@ export default function TopicMap() {
                   </div>
                 )}
 
-                <button
-                  className="btn btn-small btn-primary"
-                  onClick={async () => {
-                    const nb = await notebooksApi.fromTopic(selected.id);
-                    navigate(`/app/notebooks/${nb.id}`);
-                  }}
-                >
-                  Make a notebook from this topic
-                </button>
+                <div className="topic-actions">
+                  <button
+                    className="btn btn-small btn-primary"
+                    disabled={acting !== null}
+                    onClick={async () => {
+                      setActing("audio");
+                      try {
+                        const nb = await notebooksApi.fromTopic(selected.id);
+                        await artifactsApi.generate({ type: "audio_overview", notebook_id: nb.id, format: "deep_dive", minutes: 6 });
+                        navigate(`/app/notebooks/${nb.id}`);
+                      } finally {
+                        setActing(null);
+                      }
+                    }}
+                  >
+                    {acting === "audio" ? "Starting..." : "Audio about this"}
+                  </button>
+                  {selected.posts[0] && (
+                    <button className="btn btn-small" disabled={acting !== null} onClick={() => navigate(`/app/launch-kit?post=${selected.posts[0].id}`)}>
+                      Launch Kit for the latest post
+                    </button>
+                  )}
+                  <button
+                    className="btn btn-small"
+                    disabled={acting !== null}
+                    onClick={async () => {
+                      const nb = await notebooksApi.fromTopic(selected.id);
+                      navigate(`/app/notebooks/${nb.id}`);
+                    }}
+                  >
+                    Open as notebook
+                  </button>
+                </div>
                 <ul className="doc-list">
                   {selected.posts.map((d) => (
                     <li key={d.id} className="doc-row">
@@ -873,6 +927,7 @@ export default function TopicMap() {
               </>
             )}
           </aside>
+          )}
         </div>
       )}
       {reading && <Reader documentId={reading} onClose={() => setReading(null)} />}

frontend/src/pages/VoiceProfile.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { voiceApi } from "../api/endpoints";
-import type { Delivery, Job, LibraryVoice, Quota, Voice, VoiceDesignInput, VoiceDesignPreview, VoiceProfileData, VoiceState } from "../api/types";
+import type { Delivery, Job, LibraryVoice, Voice, VoiceDesignInput, VoiceDesignPreview, VoiceProfileData, VoiceState } from "../api/types";
 import { DocPicker } from "../components/DocPicker";
 import { ConfirmButton, errorMessage, formatDate, JobProgress, Loading, Modal, PageHeader, Tabs } from "../components/ui";
 import { useJob } from "../hooks/useJob";
@@ -435,7 +435,7 @@ function GenerateVoiceModal({
             </div>
           </div>
         )}
-        {!state.tts_configured && <p className="muted small">Set ELEVENLABS_API_KEY in .env to generate voices.</p>}
+        {!state.tts_configured && <p className="muted small">Voice generation is unavailable right now.</p>}
         {error && <p className="error-text">{error}</p>}
       </div>
     </Modal>
@@ -734,21 +734,20 @@ function CloneModal({ state, onClose, onDone }: { state: VoiceState; onClose: ()
   );
 }
 
-// The page: a three step flow. Writing voice first, then the two hosts, and cloning last.
+// The page: two steps. The writing voice builds itself, then the writer picks the two hosts.
+// Cloning lives in the "+ Add a voice" menu; a clone's status shows under the voice cards.
 
-type Step = "writing" | "hosts" | "clone";
+type Step = "writing" | "hosts";
 
 const STEPS: { id: Step; label: string }[] = [
   { id: "writing", label: "Writing voice" },
   { id: "hosts", label: "Speaking voices" },
-  { id: "clone", label: "Your own voice" },
 ];
 
 export default function VoiceProfile() {
   const [state, setState] = useState<VoiceState | null>(null);
   const [draft, setDraft] = useState<VoiceProfileData | null>(null);
   const [voices, setVoices] = useState<Voice[]>([]);
-  const [quota, setQuota] = useState<Quota>({});
   const [step, setStep] = useState<Step | null>(null);
   const [picking, setPicking] = useState(false);
   const [samples, setSamples] = useState<string[]>([]);
@@ -759,8 +758,8 @@ export default function VoiceProfile() {
   const [generating, setGenerating] = useState<Host | null>(null);
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const autoBuilt = useRef(false);
   const { play, playing } = usePlayer();
-  const { openUpgrade } = useUpgrade();
 
   const load = () =>
     voiceApi.get().then((s) => {
@@ -768,13 +767,30 @@ export default function VoiceProfile() {
       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 startBuild = async (ids: string[]) => {
+    setPicking(false);
+    setError(null);
+    try {
+      setBuildJob(await voiceApi.build(ids));
+    } catch (e) {
+      setError(errorMessage(e));
+    }
+  };
+
   useEffect(() => {
-    load();
+    // No writing voice yet: build one from the longest posts straight away instead of asking.
+    load().then((s) => {
+      if (!s.profile && !autoBuilt.current) {
+        autoBuilt.current = true;
+        void startBuild([]);
+      }
+    });
     loadVoices();
-    voiceApi.quota().then(setQuota, () => setQuota({}));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const build = useJob(buildJob, () => load());
@@ -786,22 +802,8 @@ export default function VoiceProfile() {
   if (!state || !step) return <Loading />;
   const building = build && (build.status === "queued" || build.status === "running");
   const cloneRunning = clone && (clone.status === "queued" || clone.status === "running");
-  const stepIndex = STEPS.findIndex((s) => s.id === step);
-  const done: Record<Step, boolean> = {
-    writing: Boolean(state.profile),
-    hosts: Boolean(state.profile) && stepIndex > 1,
-    clone: state.clone.status === "ready",
-  };
-
-  const startBuild = async (ids: string[]) => {
-    setPicking(false);
-    setError(null);
-    try {
-      setBuildJob(await voiceApi.build(ids));
-    } catch (e) {
-      setError(errorMessage(e));
-    }
-  };
+  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 () => {
     setError(null);
@@ -835,20 +837,16 @@ export default function VoiceProfile() {
 
       {step === "writing" && (
         <section className="card stack vp-card">
-          <p className="eyebrow">Step 1 of 3</p>
-          <h2>Teach Notestack how you write</h2>
+          <h2>How you write</h2>
           <p className="muted">Launch Kits, carousels, hooks and scripts are all written in this voice, so they read like you wrote them.</p>
           {build && (building || build.status === "failed") && <JobProgress job={build} />}
-
           {!draft && !building && (
-            <div className="vp-choices">
-              <button className="vp-choice" onClick={() => startBuild([])}>
-                <strong>Let Notestack choose</strong>
-                <span className="muted small">We read your longest posts. One click, about a minute.</span>
+            <div className="row">
+              <button className="btn btn-primary" onClick={() => startBuild([])}>
+                Build my writing voice
               </button>
-              <button className="vp-choice" onClick={() => setPicking(true)}>
-                <strong>I'll pick my posts</strong>
-                <span className="muted small">Choose 5 to 10 posts that sound most like you.</span>
+              <button className="link-btn small" onClick={() => setPicking(true)}>
+                or pick the posts yourself
               </button>
             </div>
           )}
@@ -902,103 +900,46 @@ export default function VoiceProfile() {
 
       {step === "hosts" && (
         <section className="card stack vp-card">
-          <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, 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>}
+          <h2>Who reads your work aloud</h2>
+          <p className="muted">Audio overviews are a conversation between two hosts, and videos are narrated by Host A. Tap a voice to use it, or add your own.</p>
+          {!state.tts_configured && <p className="muted">Voice previews are unavailable right now.</p>}
           <VoicePicker state={state} voices={voices} onSaved={setState} onBrowse={setBrowsing} onGenerate={setGenerating} />
-          <div className="row between">
-            <button className="btn btn-small" onClick={() => setStep("writing")}>
-              Back
-            </button>
-            <button className="btn btn-primary" onClick={() => setStep("clone")}>
-              Last step: use your own voice
-            </button>
-          </div>
-        </section>
-      )}
-
-      {step === "clone" && (
-        <section className="card stack vp-card">
-          <p className="eyebrow">Step 3 of 3</p>
-          <h2>Make Host A sound exactly like you</h2>
-
-          {!state.clone.allowed && (
-            <>
-              <p className="muted">Clone your voice and every audio overview and video you make is narrated by you, not a stock voice.</p>
-              <ol className="vp-how">
-                <li>
-                  <strong>Read for 1 to 3 minutes</strong>
-                  <span className="muted small">We give you a passage from your own writing.</span>
-                </li>
-                <li>
-                  <strong>We build your voice</strong>
-                  <span className="muted small">Takes a few minutes. Only you can use it.</span>
-                </li>
-                <li>
-                  <strong>Everything sounds like you</strong>
-                  <span className="muted small">Your voice becomes Host A across overviews and videos.</span>
-                </li>
-              </ol>
-              <div className="vp-upgrade">
-                <div>
-                  <strong>Voice cloning is on the Writer and Studio plans</strong>
-                  <p className="muted small">Your writing voice and hosts are all set. Upgrade whenever you want to add your own.</p>
-                </div>
-                <button className="btn btn-primary" onClick={() => openUpgrade("writer")}>
-                  Upgrade to clone my voice
-                </button>
-              </div>
-            </>
-          )}
 
-          {state.clone.allowed && quota.can_use_instant_voice_cloning === false && (
-            <p className="muted small">Your ElevenLabs plan does not include instant voice cloning. Upgrade it at elevenlabs.io.</p>
-          )}
-          {state.clone.allowed && (state.clone.status === "none" || state.clone.status === "failed") && !cloneRunning && (
-            <>
-              <p className="muted">
-                Record one to three minutes of your own writing, read aloud. Your voice becomes Host A, so audio overviews and videos sound like you.
-              </p>
-              {state.clone.status === "failed" && state.clone.error && <p className="error-text">{state.clone.error}</p>}
+          {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 === "failed" && state.clone.error && !cloneRunning && <p className="error-text">{state.clone.error}</p>}
               <div className="row">
-                <button className="btn btn-primary" onClick={() => setCloning(true)} disabled={!state.tts_configured}>
-                  Clone my voice
-                </button>
-              </div>
-            </>
-          )}
-          {clone && (cloneRunning || clone.status === "failed") && <JobProgress job={clone} />}
-          {state.clone.status === "processing" && !clone && <p className="muted">Your voice is being created.</p>}
-          {state.clone.status === "ready" && (
-            <>
-              <p className="muted">Your voice is live and set as Host A. Adjust its delivery in step 2.</p>
-              <div className="row">
-                {state.clone.preview_url && (
+                {state.clone.status === "ready" && state.clone.preview_url && (
                   <button className="btn btn-small" onClick={() => play(state.clone.preview_url!, "clone")}>
                     {playing === "clone" ? "Stop" : "Hear my voice"}
                   </button>
                 )}
-                <button className="btn btn-small" onClick={() => setCloning(true)}>
-                  Record again
-                </button>
-                <ConfirmButton
-                  confirmLabel="Revoke and delete my voice?"
-                  onConfirm={async () => {
-                    setState(await voiceApi.revoke());
-                    loadVoices();
-                  }}
-                >
-                  Revoke consent
-                </ConfirmButton>
+                {!cloneRunning && state.clone.allowed && (
+                  <button className="btn btn-small" onClick={() => setCloning(true)}>
+                    {state.clone.status === "failed" ? "Try again" : "Record again"}
+                  </button>
+                )}
+                {state.clone.status !== "none" && (
+                  <ConfirmButton
+                    confirmLabel="Revoke and delete my voice?"
+                    onConfirm={async () => {
+                      setState(await voiceApi.revoke());
+                      loadVoices();
+                    }}
+                  >
+                    Revoke consent
+                  </ConfirmButton>
+                )}
               </div>
-            </>
+            </div>
           )}
+
           <div className="row">
-            <button className="btn btn-small" onClick={() => setStep("hosts")}>
-              Back
+            <button className="btn btn-small" onClick={() => setStep("writing")}>
+              Back to writing voice
             </button>
           </div>
         </section>

frontend/src/styles/app.css

@@ -1046,8 +1046,8 @@
   display: grid;
   justify-items: center;
   text-align: center;
-  gap: 14px;
-  padding: 80px 16px;
+  gap: 12px;
+  padding: 40px 16px;
 }
 
 .empty-state.small {

frontend/src/styles/pages.css

@@ -1952,17 +1952,15 @@ select.input option {
 
 /* Voice page */
 .vp .vp-card {
-  max-width: 760px;
   animation: welcome-in 0.35s ease both;
 }
 
 .vp-steps {
   list-style: none;
-  margin: 0 0 20px;
+  margin: 0;
   padding: 0;
-  max-width: 760px;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 8px;
   font-size: 0.75rem;
 }
@@ -2004,32 +2002,6 @@ select.input option {
   box-shadow: var(--glow-sm);
 }
 
-.vp-choices {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 12px;
-}
-
-.vp-choice {
-  display: grid;
-  gap: 6px;
-  padding: 18px;
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--white);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.vp-choice:hover,
-.vp-choice:focus-visible {
-  border-color: var(--blue-60);
-  box-shadow: var(--glow-sm);
-}
-
 .voice-grid {
   list-style: none;
   margin: 0;
@@ -2213,29 +2185,12 @@ select.input option {
   background: var(--blue-05);
 }
 
-.vp-how {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.vp-clone {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-  counter-reset: vp-how;
-}
-
-.vp-how li {
-  display: grid;
-  gap: 4px;
-  padding: 14px;
+  gap: 8px;
+  padding: 14px 16px;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
-  counter-increment: vp-how;
-}
-
-.vp-how li::before {
-  content: counter(vp-how);
-  font: 600 0.75rem var(--font-mono);
-  color: var(--blue);
 }
 
 .vp-upgrade {
@@ -2751,3 +2706,631 @@ select.input,
     grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
   }
 }
+
+/* Simplified layouts (2026-09-28): bigger components, fewer steps */
+
+.clamp-1 {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Mission Control */
+.mc-hero {
+  display: grid;
+  gap: 18px;
+  padding: clamp(18px, 3vw, 28px);
+}
+
+.mc-ask {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--blue);
+}
+
+.mc-ask .input {
+  flex: 1;
+  min-width: 0;
+  height: 54px;
+  font-size: 1.05rem;
+}
+
+.mc-ask .btn {
+  height: 54px;
+  padding: 0 28px;
+}
+
+.mc-actions {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 900px) {
+  .mc-actions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.mc-action {
+  display: grid;
+  justify-items: start;
+  align-content: start;
+  gap: 6px;
+  min-height: 132px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--white);
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
+}
+
+.mc-action svg {
+  color: var(--blue);
+  margin-bottom: 6px;
+}
+
+.mc-action:hover:not(:disabled) {
+  border-color: var(--blue-60);
+  box-shadow: var(--glow-sm);
+  transform: translateY(-2px);
+}
+
+.mc-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.mc-more {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin-bottom: 6px;
+  border: 1px dashed var(--blue-60);
+  border-radius: 999px;
+  color: var(--blue);
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.mc-next {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px;
+  border: 1px solid var(--blue-35);
+  border-radius: var(--radius-sm);
+  background: var(--blue-05);
+}
+
+.mc-next p {
+  margin: 0;
+  flex: 1 1 320px;
+}
+
+.mc-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 720px) {
+  .mc-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.mc-stat {
+  display: grid;
+  gap: 2px;
+  padding: 14px 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  color: var(--white);
+  text-decoration: none;
+  transition: border-color 0.2s;
+}
+
+.mc-stat:hover {
+  border-color: var(--line-strong);
+}
+
+.mc-stat strong {
+  font: 600 1.6rem var(--font-display, inherit);
+}
+
+/* Notebook view: chat takes the room, one side panel with Create / Posts tabs */
+@media (min-width: 1100px) {
+  .nbv {
+    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
+  }
+}
+
+.nbv-titlebar {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.nbv-titlebar .nbv-title {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nbv-empty {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--blue);
+}
+
+.nbv-starters {
+  display: grid;
+  gap: 8px;
+  width: min(100%, 520px);
+}
+
+.nbv-starter {
+  padding: 12px 16px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.nbv-starter:hover {
+  border-color: var(--blue-60);
+  background: var(--blue-05);
+}
+
+.nbv-ask .input {
+  height: 52px;
+  font-size: 1rem;
+}
+
+.nbv-ask .btn {
+  height: 52px;
+  padding: 0 24px;
+}
+
+.nbv-make {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.nbv-make button {
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--white);
+  font: 500 0.875rem var(--font-body);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.nbv-make button:hover:not(:disabled) {
+  border-color: var(--blue-60);
+}
+
+.nbv-make button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.nbv-make .nbv-make-main {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 2px;
+  padding: 16px;
+  border-color: var(--blue-35);
+  background: var(--blue-05);
+}
+
+.nbv-make .nbv-make-main strong {
+  font-size: 1rem;
+}
+
+/* Notebooks: big clickable cards, options in a menu */
+.nb-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 14px;
+}
+
+.nb-grid .nb-card {
+  position: relative;
+  min-height: 170px;
+}
+
+.nb-grid .nb-card-link {
+  height: 100%;
+  align-content: start;
+  color: var(--white);
+}
+
+.nb-card-link svg {
+  color: var(--blue);
+}
+
+.nb-archive {
+  border-color: var(--blue-35);
+  background: var(--blue-05);
+}
+
+.nb-new {
+  display: grid;
+  justify-items: start;
+  align-content: center;
+  gap: 4px;
+  border-style: dashed;
+  border-color: var(--line-strong);
+  color: var(--white);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.nb-new:hover {
+  border-color: var(--blue-60);
+}
+
+.card-menu {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.card-menu-list {
+  position: absolute;
+  top: 34px;
+  right: 0;
+  z-index: 5;
+  display: grid;
+  min-width: 140px;
+  padding: 6px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  background: var(--black, #000);
+  box-shadow: var(--glow-sm);
+}
+
+.card-menu-list button {
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.card-menu-list button:hover {
+  background: var(--blue-10);
+}
+
+.nb-matches {
+  max-height: 320px;
+  overflow: auto;
+}
+
+/* Create (Studio): format tiles and one row of choices */
+.format-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 900px) {
+  .format-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.format-tile {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 10px;
+  min-height: 120px;
+  padding: 16px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--white);
+  font: inherit;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+}
+
+.format-tile svg {
+  color: var(--blue);
+}
+
+.format-tile:hover {
+  border-color: var(--line-strong);
+}
+
+.format-tile.on {
+  border-color: var(--blue);
+  background: var(--blue-05);
+  box-shadow: var(--glow-sm);
+}
+
+.studio-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.studio-row .field {
+  flex: 1 1 200px;
+}
+
+.studio-row .field:first-child {
+  flex: 2 1 280px;
+}
+
+.studio-go {
+  height: 44px;
+  padding: 0 26px;
+}
+
+/* Launch Kit: post cards to start, a thin rail of kits once one is open */
+@media (min-width: 1100px) {
+  .kit-layout.kit-open {
+    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
+  }
+}
+
+.kit-rail {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.post-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.post-card {
+  display: grid;
+  align-content: space-between;
+  gap: 10px;
+  min-height: 150px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--white);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
+}
+
+.post-card strong {
+  font-size: 1.02rem;
+  line-height: 1.35;
+}
+
+.post-card-go {
+  color: var(--blue);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.post-card:hover:not(:disabled) {
+  border-color: var(--blue-60);
+  box-shadow: var(--glow-sm);
+  transform: translateY(-2px);
+}
+
+.post-card:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* Launchpad: account chips in one line, calendar first, ideas beside it */
+.lp-accounts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.lp-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--white);
+  font: inherit;
+  font-size: 0.8125rem;
+}
+
+.lp-chip img {
+  border-radius: 999px;
+}
+
+.lp-chip.warn {
+  border-color: #ff8a3d;
+}
+
+.lp-chip.add {
+  border-style: dashed;
+  color: var(--text-2);
+  cursor: pointer;
+}
+
+.lp-chip.add:hover {
+  border-color: var(--blue);
+  color: var(--white);
+}
+
+.lp-layout {
+  display: grid;
+  gap: 16px;
+  align-items: start;
+}
+
+@media (min-width: 1200px) {
+  .lp-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
+  }
+}
+
+.lp-ideas {
+  align-content: start;
+}
+
+.lp-ideas .idea {
+  display: grid;
+  gap: 6px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.lp-ideas .idea:last-child {
+  border-bottom: 0;
+}
+
+.lp-empty {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 12px 14px;
+  border: 1px dashed var(--line-strong);
+  border-radius: var(--radius-sm);
+}
+
+.lp-empty p {
+  margin: 0;
+}
+
+/* Topic map: full width until a topic or the briefing is open */
+@media (min-width: 1100px) {
+  .map-layout.map-full {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.map-menu {
+  position: relative;
+  top: auto;
+  right: auto;
+}
+
+details.map-legend summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+details.map-legend:not([open]) {
+  padding: 4px 10px;
+}
+
+details.map-legend[open] summary {
+  margin-bottom: 4px;
+}
+
+.topic-actions {
+  display: grid;
+  gap: 8px;
+}
+
+/* Sources: one smart input, files drop anywhere */
+.add-smart {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.add-smart .input {
+  flex: 1 1 320px;
+  height: 50px;
+  font-size: 1rem;
+}
+
+.add-smart .btn {
+  height: 50px;
+  padding: 0 22px;
+}
+
+.page-wrap.drop-over {
+  outline: 2px dashed var(--blue);
+  outline-offset: 8px;
+  border-radius: var(--radius);
+}
+
+/* Sidebar: seven stops, Settings pinned to the bottom */
+@media (min-width: 900px) {
+  .sidebar .side-settings {
+    margin-top: auto;
+  }
+
+  .sidebar .side-settings ~ .sidebar-user {
+    margin-top: 0;
+  }
+}
+
+@media (max-width: 899px) {
+  .sidebar {
+    position: relative;
+  }
+
+  .sidebar .side-settings {
+    position: absolute;
+    top: 14px;
+    right: 16px;
+    padding: 8px;
+  }
+
+  .sidebar .side-settings .side-label {
+    display: none;
+  }
+}
+
+@media (min-width: 900px) {
+  .shell.collapsed .side-settings {
+    display: none;
+  }
+}
+
+.tabs a.tab {
+  text-decoration: none;
+}