error messages added and loaders fixed

backend/app/pipeline/launchkit.py

@@ -1,16 +1,22 @@
 """Launch Kit: one post in, everything needed to launch it out, in the writer's voice and grounded in
 the post's own claims."""
 
+import logging
+
 from sqlalchemy.orm import Session
 
+from app.config import settings
 from app.corpus import INDEX, Corpus
 from app.llm import run
 from app.llm.signatures import CarouselSlides, ExtractClaims, HookGenerator, PickQuotes, PlatformAdapter, SeoPack
 from app.models import Artifact, Document, Job
 from app.pipeline.generate import NothingToDo
 from app.pipeline.passages import passages_for, tools_for, verify_refs, voice_text
+from app.services import renderer
 from app.services.jobs import create_job, update_job
 
+log = logging.getLogger(__name__)
+
 PLATFORMS = {
     "x_thread": ("X thread", "5 to 9 posts, each under 270 characters. Post 1 is the hook and stands alone. "
                  "No hashtags except at most one at the end. The last post links to the article with {url}."),
@@ -94,8 +100,13 @@ def build_launch_kit(db: Session, job: Job, artifact: Artifact) -> dict:
     artifact.status = "ready"
     db.commit()
 
-    # Quote cards render as their own artifacts, so a missing renderer does not sink the kit.
+    # Quote cards render as their own artifacts, so a missing renderer does not sink the kit. With the renderer
+    # down they would only fail, so skip them: the kit keeps its quotes as text either way.
     card_ids = []
+    if quotes and not renderer.available():
+        log.warning("Renderer unreachable at %s: launch kit %s made without quote cards",
+                    settings.renderer_url, artifact.id)
+        quotes = []
     for q in quotes:
         card = Artifact(workspace_id=ws, document_id=doc.id, type="quote_card", status="pending",
                         content_json={"title": f"Quote: {doc.title}", "parent_id": str(artifact.id), **q})

backend/app/services/blog2video.py

@@ -85,7 +85,7 @@ class Denied(B2VError):
 
 
 UNAVAILABLE = "Video creation is temporarily unavailable. Try again later."
-NOT_RESPONDING = "The video service is not responding. Try again in a minute."
+NOT_RESPONDING = "The video service is being updated. Please try again in a while."
 
 
 def configured() -> bool:

backend/app/services/renderer.py

@@ -17,6 +17,14 @@ class PermanentJobError(RuntimeError):
     """Fail the job now; retrying will not help."""
 
 
+def available() -> bool:
+    """Whether the render service answers right now (a quick health check, not a promise for later)."""
+    try:
+        return httpx.get(f"{settings.renderer_url}/health", timeout=2).status_code == 200
+    except httpx.HTTPError:
+        return False
+
+
 def request_render(job: Job, artifact: Artifact, composition: str, props: dict | None = None,
                    stills: list[dict] | None = None) -> None:
     """Start a render. `stills` renders one PNG per props dict (carousels) instead of a single output."""

backend/tests/test_buildout.py

@@ -542,7 +542,10 @@ def test_launch_kit(client, auth, run_jobs, feed, llm, monkeypatch, db_session):
         "PickQuotes": {"quotes": [{"quote": "Charging more made my readers take the work seriously.",
                                    "source": ref}]},
     })
+    from app.services import renderer
+
     monkeypatch.setattr(media, "request_render", lambda *a, **k: None)
+    monkeypatch.setattr(renderer, "available", lambda: True)
     art = client.post("/api/artifacts/generate", json={"type": "launch_kit", "document_id": doc["id"]},
                       headers=auth).json()
     run_jobs()
@@ -563,6 +566,15 @@ def test_launch_kit(client, auth, run_jobs, feed, llm, monkeypatch, db_session):
 
     listing = client.get("/api/artifacts", params={"type": "launch_kit"}, headers=auth).json()
     assert listing["total"] == 1
+
+    # Renderer down: the kit keeps its quotes as text and makes no quote cards that could only fail.
+    monkeypatch.setattr(renderer, "available", lambda: False)
+    art = client.post("/api/artifacts/generate", json={"type": "launch_kit", "document_id": doc["id"]},
+                      headers=auth).json()
+    run_jobs()
+    kit = client.get(f"/api/artifacts/{art['id']}", headers=auth).json()
+    assert kit["status"] == "ready"
+    assert kit["content"]["quotes"] and kit["content"]["quote_card_ids"] == []
     assert client.delete(f"/api/artifacts/{art['id']}", headers=auth).status_code == 200
 
 

backend/tests/test_videos.py

@@ -440,7 +440,7 @@ def test_slow_catalog_is_a_clean_error_not_a_500(client, b2v, owner, db_session)
     b2v.queue("GET", "/api/templates", (0, httpx.ReadTimeout("slow")))
     r = client.post("/api/videos", json={"url": "https://ada.example.com/p/a", "template": "geometric"},
                     headers=headers)
-    assert r.status_code == 502 and "not responding" in r.json()["detail"]
+    assert r.status_code == 502 and "being updated" in r.json()["detail"]
     assert not creates(b2v) and used(db_session, ws) == 0
 
 

frontend/src/components/ui.tsx

@@ -8,6 +8,24 @@ export function errorMessage(e: unknown, fallback = "Something went wrong. Try a
   return e instanceof ApiError ? e.message : e instanceof Error && e.message ? e.message : fallback;
 }
 
+/** Matches blog2video.NOT_RESPONDING on the backend: the video service is down or redeploying. */
+export const VIDEO_UPDATING = "The video service is being updated";
+
+/**
+ * An inline error. The "video service is being updated" message is a status, not a mistake: it is shown centered
+ * and in bold instead, and with `page` it fills the page under the header.
+ */
+export function ErrorText({ message, page = false }: { message: string; page?: boolean }) {
+  if (message.startsWith(VIDEO_UPDATING)) {
+    return (
+      <div className={`service-notice${page ? " page" : ""}`} role="status">
+        <strong>{message}</strong>
+      </div>
+    );
+  }
+  return <p className="error-text">{message}</p>;
+}
+
 /** Launch progress bar for a job. */
 export function JobProgress({ job, compact = false }: { job: Job; compact?: boolean }) {
   const pct = Math.round((job.status === "done" ? 1 : job.progress) * 100);
@@ -216,8 +234,12 @@ export function EmptyState({ title, body, action }: { title: string; body?: stri
   );
 }
 
-export function Loading({ label = "Loading" }: { label?: string }) {
-  return (
+/**
+ * Spinner with its label underneath, centered. `center="page"` puts it in the middle of the space under a page
+ * header; `center="full"` in the middle of the window, for a page that has no header yet.
+ */
+export function Loading({ label = "Loading", center }: { label?: string; center?: "page" | "full" }) {
+  const loader = (
     <div className="loading mono muted" role="status">
       <div className="orbit-loader">
         <span />
@@ -225,6 +247,7 @@ export function Loading({ label = "Loading" }: { label?: string }) {
       {label}...
     </div>
   );
+  return center ? <div className={`loading-center${center === "full" ? " full" : ""}`}>{loader}</div> : loader;
 }
 
 export function StatusPill({ status }: { status: string }) {

frontend/src/components/video/EditorPanels.tsx

@@ -7,7 +7,7 @@ import type {
   VideoScene,
 } from "../../api/types";
 import { ChevronIcon, TrashIcon } from "../icons/Icons";
-import { ConfirmButton, errorMessage } from "../ui";
+import { ConfirmButton, ErrorText, errorMessage } from "../ui";
 import { Premium } from "./parts";
 import { DeleteAssetModal, RemoveMediaModal } from "./SceneMedia";
 import { Voiceovers } from "./Voiceovers";
@@ -77,7 +77,7 @@ export function ScriptPanel(p: PanelProps) {
           Try again
         </button>
       </div>
-      {error && <p className="error-text">{error}</p>}
+      {error && <ErrorText message={error} />}
       {preview && <pre className="vw-pre">{JSON.stringify(preview, null, 2)}</pre>}
     </section>
   );
@@ -137,7 +137,7 @@ export function ChatPanel(p: PanelProps) {
         {lines.length === 0 && <p className="muted">Ask for changes, like "make scene 2 shorter" or "use warmer colors".</p>}
         {lines.map((l, i) => <p key={i} className={`vw-chat-line ${l.role}`}>{l.text}</p>)}
       </div>
-      {error && <p className="error-text">{error}</p>}
+      {error && <ErrorText message={error} />}
       <div className="row">
         <input className="input" value={message} maxLength={4000} disabled={busy || p.disabled} placeholder="Ask for a change"
                onChange={(e) => setMessage(e.target.value)} onKeyDown={(e) => e.key === "Enter" && send()} />
@@ -247,7 +247,7 @@ export function FramesPanel(p: PanelProps) {
         <button className="btn btn-small" disabled={busy} onClick={load}>{busy ? "Rendering..." : "Show frame"}</button>
         {src && <a className="btn btn-small" href={src} download={`frame-${frame}.png`}>Download</a>}
       </div>
-      {error && <p className="error-text">{error}</p>}
+      {error && <ErrorText message={error} />}
       {src && <img className="vw-still" src={src} alt={`Frame ${frame}`} />}
     </section>
   );

frontend/src/components/voice/YourVoices.tsx

@@ -69,7 +69,7 @@ export function YourVoices({ reloadKey = 0, onAdd }: {
         <button className="btn btn-primary" onClick={onAdd}>Add voices</button>
       </div>
       {error && <p className="error-text">{error}</p>}
-      {!voices && !error && <div className="loading-center inline stacked"><Loading label="Loading voices" /></div>}
+      {!voices && !error && <div className="loading-center inline"><Loading label="Loading voices" /></div>}
 
       {voices && (
         <>

frontend/src/pages/Archive.tsx

@@ -63,7 +63,7 @@ function MadeList({ filter }: { filter: Filter }) {
       <div className="row end wrap">
         <input className="input input-sm search" placeholder={`Search ${total} items by post or notebook`} value={q} onChange={(e) => setQ(e.target.value)} aria-label="Search" />
       </div>
-      {!items && <div className="loading-center stacked"><Loading label="Loading your Library" /></div>}
+      {!items && <div className="loading-center"><Loading label="Loading your Library" /></div>}
       {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">

frontend/src/pages/LaunchKit.tsx

@@ -252,7 +252,7 @@ export function LaunchKitPage() {
     <div className="page-wrap">
       <BackArrow fallback="/app/launchpad/kits" />
       {error && <p className="error-text">{error}</p>}
-      {!kit && !error && <div className="loading-center full stacked"><Loading label="Opening the kit" /></div>}
+      {!kit && !error && <div className="loading-center full"><Loading label="Opening the kit" /></div>}
       {kit && <KitView key={kit.id} kit={kit} onDeleted={() => navigate("/app/launchpad/kits", { replace: true })} />}
     </div>
   );

frontend/src/pages/Launchpad.tsx

@@ -253,7 +253,7 @@ function ConnectionsPanel({ accounts, onConnect, onChanged }: {
     <aside className="card stack lp-connections" aria-label="Connected accounts">
       <h2>Connections</h2>
       <p className="muted small">Posts go out through these accounts at their scheduled time.</p>
-      {!accounts && <div className="loading-center inline stacked"><Loading label="Loading your connections" /></div>}
+      {!accounts && <div className="loading-center inline"><Loading label="Loading your connections" /></div>}
       {accounts && CONNECT.map((c) => {
         const a = accounts.accounts.find((x) => x.platform === c.id);
         const days = a?.expires_at ? Math.max(0, Math.ceil((new Date(a.expires_at).getTime() - Date.now()) / 864e5)) : null;
@@ -426,7 +426,7 @@ export default function Launchpad() {
           </div>
           <Tabs tabs={[{ id: "month", label: "Month" }, { id: "agenda", label: "Agenda" }]} value={view} onChange={setView} />
         </div>
-        {!items && <div className="loading-center stacked lp-cal-loading"><Loading label="Loading your calendar" /></div>}
+        {!items && <div className="loading-center lp-cal-loading"><Loading label="Loading your calendar" /></div>}
         {items && items.length === 0 && (
           <div className="lp-empty">
             <p className="muted">Nothing scheduled this month.</p>

frontend/src/pages/NotebookView.tsx

@@ -440,7 +440,7 @@ export default function NotebookView() {
   }, [nb]);
 
   if (loadError) return <p className="error-text">{loadError}</p>;
-  if (!nb) return <Loading label="Opening notebook" />;
+  if (!nb) return <Loading label="Opening notebook" center="full" />;
 
   const cite = (c: Citation) => {
     if (c.kind === "chat") setQuoted(c);

frontend/src/pages/Notebooks.tsx

@@ -136,7 +136,7 @@ export default function Notebooks() {
           New notebook
         </button>
       </PageHeader>
-      {!notebooks && <Loading />}
+      {!notebooks && <Loading center="page" />}
       <section className="nb-grid">
         {notebooks?.map((n) => (
           <article key={n.id} className={`card nb-card${n.is_archive ? " nb-archive" : ""}`}>

frontend/src/pages/Resurface.tsx

@@ -56,7 +56,7 @@ export function ResurfaceIdeas({ onScheduled }: { onScheduled?: () => void }) {
   const live = useJob(job, () => load());
   const running = live && (live.status === "queued" || live.status === "running");
 
-  if (!data) return <Loading />;
+  if (!data) return <Loading center="full" />;
   const items = [...data.on_this_day, ...data.evergreen.filter((e) => !data.on_this_day.some((o) => o.id === e.id))];
 
   return (

frontend/src/pages/Settings.tsx

@@ -74,7 +74,7 @@ export default function Settings() {
     }
   };
 
-  if (!s) return error ? <p className="error-text">{error}</p> : <Loading />;
+  if (!s) return error ? <p className="error-text">{error}</p> : <Loading center="full" />;
   const u = s.usage;
   // Fields save on their own when the writer leaves them, so there are no Save buttons.
   const saveProfile = () => {

frontend/src/pages/Sources.tsx

@@ -227,8 +227,9 @@ export default function Sources() {
       <AddSource onAdded={added} />
       {error && <p className="error-text">{error}</p>}
 
+      {/* Outside the card grid, so the loader is centered across the page rather than in the first column */}
+      {!sources && <Loading center="page" />}
       <section className="grid-cards">
-        {!sources && <Loading />}
         {sources?.map((s) => {
           const job = jobs[s.id];
           const active = job && (job.status === "queued" || job.status === "running");

frontend/src/pages/TopicMap.tsx

@@ -504,7 +504,7 @@ export default function TopicMap() {
       </PageHeader>
       {live && (running || live.status === "failed") && <JobProgress job={live} />}
       {error && <p className="error-text">{error}</p>}
-      {!data && <Loading />}
+      {!data && <Loading center="page" />}
       {data && data.nodes.length === 0 && !running && (
         <EmptyState
           title="No constellations yet"

frontend/src/pages/VideoCreate.tsx

@@ -16,7 +16,7 @@ import type {
 } from "../api/types";
 import { Dropdown } from "../components/Dropdown";
 import { CheckIcon, SparkleIcon } from "../components/icons/Icons";
-import { errorMessage, Loading, PageHeader } from "../components/ui";
+import { ErrorText, errorMessage, Loading, PageHeader } from "../components/ui";
 import { SourcePicker, type VideoSource } from "../components/video/SourcePicker";
 import { loadArchiveId, sourceCache } from "../components/video/sourceCache";
 import { PlayButton, TemplateThumb, useAudio } from "../components/video/parts";
@@ -248,11 +248,11 @@ export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal
     return (
       <div className={inModal ? "vw-in-modal" : "page-wrap"}>
         {!inModal && <PageHeader eyebrow="Videos" title="New video" />}
-        <p className="error-text">{loadError}</p>
+        <ErrorText message={loadError} page />
       </div>
     );
   }
-  if (!config) return <Loading label="Loading" />;
+  if (!config) return <Loading label="Loading" center="full" />;
   if (!config.configured) {
     return (
       <div className={inModal ? "vw-in-modal" : "page-wrap"}>
@@ -371,7 +371,7 @@ export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal
               </div>
             )}
 
-            {error && <p className="error-text">{error}</p>}
+            {error && <ErrorText message={error} />}
             <div className="vw-nav">
               {/* Waits for the focus suggestions (shown, or none to show), so they are never skipped past */}
               <button className="btn btn-primary vw-next" disabled={!sourceReady || shownTopics === null}
@@ -487,7 +487,7 @@ export function VideoCreateForm({ startNotebook = null, startDoc = null, inModal
               )}
             </div>
 
-            {error && <p className="error-text">{error}</p>}
+            {error && <ErrorText message={error} />}
             {left === 0 && (
               <p className="notice">
                 You have used all your videos{quota?.resets_at ? " this period" : " on your plan"}.{" "}

frontend/src/pages/VideoEditor.tsx

@@ -4,7 +4,7 @@ import { ApiError } from "../api/client";
 import { videoEditApi, videosApi, type LayoutInfo, type LayoutSchema } from "../api/endpoints";
 import type { LegacyVideo, ScriptScene, VideoCatalog, VideoConfig, VideoJobState, VideoProject, VideoStatus } from "../api/types";
 import { CheckIcon, DownloadIcon, SparkleIcon } from "../components/icons/Icons";
-import { ConfirmButton, errorMessage, Loading, Modal, PageHeader, StatusPill, Tabs } from "../components/ui";
+import { ConfirmButton, ErrorText, errorMessage, Loading, Modal, PageHeader, StatusPill, Tabs, VIDEO_UPDATING } from "../components/ui";
 import { ImagesPanel, VoicePanel, type PanelProps } from "../components/video/EditorPanels";
 import { LookPanel } from "../components/video/SettingsPanel";
 import { SceneList } from "../components/video/SceneList";
@@ -157,7 +157,7 @@ export default function VideoEditor() {
     () =>
       videosApi.get(id).then((p) => {
         setProject(p);
-        setError((err) => (err?.startsWith("The video service is not responding") ? null : err));
+        setError((err) => (err?.startsWith(VIDEO_UPDATING) ? null : err));
       }).catch((e) => {
         if (e instanceof ApiError && e.status === 404) setNotFound(true);
         else setError(errorMessage(e));
@@ -382,7 +382,7 @@ export default function VideoEditor() {
       {failed && (
         <section className="card stack">
           <h2>This video could not be made</h2>
-          <p className="error-text">{status?.error ?? "Generation failed."}</p>
+          <ErrorText message={status?.error ?? "Generation failed."} />
           <p className="muted">It was not charged against your videos.</p>
           <div className="row">
             <Link to="/app/videos/new" className="btn btn-primary">Try again</Link>
@@ -415,7 +415,7 @@ export default function VideoEditor() {
         </section>
       )}
 
-      {error && <p className="error-text">{error}</p>}
+      {error && <ErrorText message={error} />}
       {/* A background job (not a render, which shows its own progress) takes the editor's place until it ends */}
       {fullScreenJob && running && <JobProgress label={running.label} name={title} state={job.data ?? null} />}
 
@@ -582,7 +582,7 @@ function ScriptReview({ id, premium, locked, onApproved }: { id: string; premium
           </div>
         </div>
       ))}
-      {error && <p className="error-text">{error}</p>}
+      {error && <ErrorText message={error} />}
       <div className="row">
         <button className="btn btn-primary" onClick={approve} disabled={!!busy || !scenes}>
           {busy === "approve" ? "Starting..." : "Generate Video"}

frontend/src/pages/VideoTemplateEditor.tsx

@@ -97,7 +97,7 @@ export default function VideoTemplateEditor() {
       </div>
     );
   }
-  if (!tpl) return error ? <p className="error-text">{error}</p> : <Loading label="Loading template" />;
+  if (!tpl) return error ? <p className="error-text">{error}</p> : <Loading label="Loading template" center="full" />;
 
   const premium = !!config?.premium;
   const sceneKeys = ["intro", ...(tpl.content_codes ?? []).map((_, i) => `content_${i}`), "outro"];

frontend/src/pages/VideoTemplates.tsx

@@ -25,7 +25,7 @@ export default function VideoTemplates() {
         </p>
       )}
       {error && <p className="error-text">{error}</p>}
-      {!data && !error && <Loading label="Loading templates" />}
+      {!data && !error && <Loading label="Loading templates" center="page" />}
       {data?.templates.length === 0 && (
         <EmptyState title="No templates yet"
                     body="Make a template from your website, a brand document or a description. Your videos then match your brand."

frontend/src/pages/Videos.tsx

@@ -94,7 +94,7 @@ export default function Videos() {
       </div>
       {notice && <p className="notice">{notice}</p>}
       {error && <p className="error-text">{error}</p>}
-      {!videos && !error && <div className="loading-center stacked"><Loading label="Loading videos" /></div>}
+      {!videos && !error && <div className="loading-center"><Loading label="Loading videos" /></div>}
       {videos?.length === 0 && (
         <EmptyState
           title="No videos yet"

frontend/src/pages/VoiceProfile.tsx

@@ -488,7 +488,7 @@ export default function VoiceProfile() {
     loadVoices(); // a finished clone is saved to Your voices as "My voice"
   });
 
-  if (!state) return <div className="loading-center stacked"><Loading label="Loading your voice" /></div>;
+  if (!state) return <div className="loading-center"><Loading label="Loading your voice" /></div>;
   const building = build && (build.status === "queued" || build.status === "running");
   const cloneRunning = clone && (clone.status === "queued" || clone.status === "running");
   const showClone = state.clone.status !== "none" || Boolean(clone);

frontend/src/styles/pages.css

@@ -446,11 +446,15 @@ select.input option {
   height: 4px;
 }
 
+/* Every loader: the spinner with its label underneath, both centered */
 .loading {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
+  justify-content: center;
+  gap: 16px;
   padding: 24px 0;
+  text-align: center;
 }
 
 /* A page's first load: the loader in the middle of the space under the header */
@@ -475,10 +479,17 @@ select.input option {
   min-height: 200px;
 }
 
-/* The label sits under the spinner, both centred */
-.loading-center .loading {
-  flex-direction: column;
-  gap: 16px;
+/* "The video service is being updated": a centered status line, not an error */
+.service-notice {
+  display: grid;
+  place-items: center;
+  padding: 24px 0;
+  text-align: center;
+  color: var(--white);
+}
+
+.service-notice.page {
+  min-height: 60vh;
 }
 
 .empty-state h3 {
@@ -4339,14 +4350,6 @@ select.input,
   min-height: calc(4.5 * 64px + 4 * 6px);
 }
 
-/* These loaders (Library, Create a launch kit, opening a kit): the text under the spinner, centered */
-.lp-loading .loading,
-.lk-loading .loading,
-.loading-center.stacked .loading {
-  flex-direction: column;
-  text-align: center;
-}
-
 .lp-loading.fill {
   min-height: max(calc(4.5 * 64px + 4 * 6px), calc(100dvh - 340px));
 }

renderer/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "studio": "remotion studio src/index.ts",
-    "start": "tsx --env-file-if-exists=../.env server/index.ts",
+    "start": "tsx --env-file-if-exists=../.env --env-file-if-exists=../backend/.env server/index.ts",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {