diff --git a/docker-compose.yml b/docker-compose.yml
index e9522a6..ff1a3e6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,12 +1,4 @@
 services:
-  flaresolverr:
-    image: ghcr.io/flaresolverr/flaresolverr:latest
-    environment:
-      LOG_LEVEL: info
-    ports:
-      - "8191:8191"
-    restart: unless-stopped
-
   cxyz:
     build: .
     ports:
@@ -18,7 +10,6 @@ services:
       WATCH_CRON: "0 * * * *"
       # Each title is eligible again after this many hours (daily).
       WATCH_TITLE_INTERVAL_HOURS: "24"
-      FLARESOLVERR_URL: http://flaresolverr:8191/v1
       # Shared login (optional). When AUTH_PASSWORD is set, the UI and /api require a session.
       # AUTH_USERNAME: admin
       # AUTH_PASSWORD: change-me
@@ -26,6 +17,4 @@ services:
       # SESSION_TTL_HOURS: "168"
     volumes:
       - ./data:/app/data
-    depends_on:
-      - flaresolverr
     restart: unless-stopped
diff --git a/web/src/App.svelte b/web/src/App.svelte
index ff3343c..5328ccf 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,8 +1,15 @@
 <script>
+  import { api as apiRequest } from "./lib/api.js";
+  import AppHeader from "./components/AppHeader.svelte";
+  import LoginForm from "./components/LoginForm.svelte";
+  import ErrorBanner from "./components/ErrorBanner.svelte";
+  import AddTitleForm from "./components/AddTitleForm.svelte";
+  import JobsStrip from "./components/JobsStrip.svelte";
+  import TitleList from "./components/TitleList.svelte";
+
   let titles = $state([]);
   let jobs = $state([]);
   let chaptersByTitle = $state({});
-  let url = $state("");
   let error = $state("");
   let busy = $state(false);
   let loadingChapters = $state({});
@@ -12,42 +19,19 @@
   let authRequired = $state(false);
   let authenticated = $state(false);
   let authUsername = $state("");
-  let loginUser = $state("admin");
-  let loginPass = $state("");
   let loginError = $state("");
   let loginBusy = $state(false);
 
-  async function api(path, options = {}) {
-    const method = (options.method || "GET").toUpperCase();
-    const headers = { ...(options.headers || {}) };
-    let body = options.body;
-
-    if (body !== undefined && body !== null) {
-      if (!headers["Content-Type"]) {
-        headers["Content-Type"] = "application/json";
-      }
-    } else if (method === "POST" || method === "PUT" || method === "PATCH") {
-      // Fastify rejects Content-Type: application/json with an empty body
-      headers["Content-Type"] = "application/json";
-      body = "{}";
-    }
-
-    const res = await fetch(path, {
-      ...options,
-      method,
-      headers,
-      body,
-      credentials: "include",
-    });
-    const data = await res.json().catch(() => ({}));
-    if (res.status === 401 && authRequired) {
+  function markUnauthorized() {
+    if (authRequired) {
       authenticated = false;
       authUsername = "";
     }
-    if (!res.ok) {
-      throw new Error(data.error || data.message || res.statusText || "Request failed");
-    }
-    return data;
+  }
+
+  /** @param {string} path @param {RequestInit} [options] */
+  function api(path, options = {}) {
+    return apiRequest(path, { ...options, onUnauthorized: markUnauthorized });
   }
 
   async function checkAuth() {
@@ -58,22 +42,17 @@
     authReady = true;
   }
 
-  async function login(event) {
-    event.preventDefault();
+  async function login({ username, password }) {
     loginError = "";
     loginBusy = true;
     try {
       const data = await api("/api/auth/login", {
         method: "POST",
-        body: JSON.stringify({
-          username: loginUser.trim(),
-          password: loginPass,
-        }),
+        body: JSON.stringify({ username, password }),
       });
       authRequired = Boolean(data.authRequired);
       authenticated = Boolean(data.authenticated);
-      authUsername = typeof data.username === "string" ? data.username : loginUser.trim();
-      loginPass = "";
+      authUsername = typeof data.username === "string" ? data.username : username;
       await refresh();
     } catch (err) {
       loginError = err instanceof Error ? err.message : String(err);
@@ -124,16 +103,14 @@
     }
   }
 
-  async function addTitle(event) {
-    event.preventDefault();
+  async function addTitle(url) {
     error = "";
     busy = true;
     try {
       await api("/api/titles", {
         method: "POST",
-        body: JSON.stringify({ url: url.trim() }),
+        body: JSON.stringify({ url }),
       });
-      url = "";
       await refresh();
     } catch (err) {
       error = err instanceof Error ? err.message : String(err);
@@ -262,236 +239,32 @@
 </script>
 
 <main class="app-shell">
-  <header class="app-header">
-    <h1>Watch & Download</h1>
-    {#if authReady && authRequired && authenticated}
-      <div class="header-auth">
-        {#if authUsername}
-          <span class="muted">{authUsername}</span>
-        {/if}
-        <button type="button" class="outline contrast" onclick={logout}>Log out</button>
-      </div>
-    {/if}
-  </header>
+  <AppHeader
+    showLogout={authReady && authRequired && authenticated}
+    username={authUsername}
+    onLogout={logout}
+  />
 
   {#if !authReady}
     <p class="muted">Loading…</p>
   {:else if authRequired && !authenticated}
-    {#if loginError}
-      <p class="error-banner" role="alert">{loginError}</p>
-    {/if}
-    <form class="login-form" onsubmit={login}>
-      <label>
-        Username
-        <input
-          type="text"
-          bind:value={loginUser}
-          autocomplete="username"
-          required
-          disabled={loginBusy}
-        />
-      </label>
-      <label>
-        Password
-        <input
-          type="password"
-          bind:value={loginPass}
-          autocomplete="current-password"
-          required
-          disabled={loginBusy}
-        />
-      </label>
-      <button type="submit" disabled={loginBusy || !loginPass}>
-        {loginBusy ? "Signing in…" : "Sign in"}
-      </button>
-    </form>
+    <LoginForm error={loginError} busy={loginBusy} onSubmit={login} />
   {:else}
-    {#if error}
-      <p class="error-banner" role="alert">{error}</p>
-    {/if}
-
-    <form class="add-title" onsubmit={addTitle}>
-      <label>
-        Series URL
-        <input
-          type="url"
-          bind:value={url}
-          placeholder=""
-          required
-          disabled={busy}
-        />
-      </label>
-      <button type="submit" disabled={busy || !url.trim()}>
-        {busy ? "Working…" : "Add & watch"}
-      </button>
-    </form>
-
-    <section class="jobs-strip" aria-live="polite">
-      <div class="section-heading">
-        <h2>Activity</h2>
-        <button
-          type="button"
-          class="outline contrast"
-          disabled={jobs.length === 0}
-          onclick={clearQueue}
-        >
-          Clear queue
-        </button>
-      </div>
-      {#if jobs.length === 0}
-        <p class="muted">No active jobs.</p>
-      {:else}
-        <ul class="job-list">
-          {#each jobs as job (job.id)}
-            <li class="job-row">
-              <div class="job-info">
-                <strong>{job.status}</strong>
-                — {job.message || job.type}
-                {#if job.title_name}
-                  <span class="muted">({job.title_name})</span>
-                {/if}
-              </div>
-              {#if job.chapter_id}
-                <button
-                  type="button"
-                  class="outline contrast job-cancel"
-                  onclick={() => cancelChapter(job.chapter_id, job.title_id)}
-                >
-                  Cancel
-                </button>
-              {/if}
-            </li>
-          {/each}
-        </ul>
-      {/if}
-    </section>
-
-    <section>
-      <h2>Titles</h2>
-      {#if titles.length === 0}
-        <p class="muted">No titles yet. Add a series URL above.</p>
-      {:else}
-        {#each titles as title (title.id)}
-          <article>
-            <header>
-              <div class="title-meta">
-                <strong>{title.title}</strong>
-                <span class="muted">{title.source}</span>
-                <span class="progress-text">
-                  {title.downloaded} / {title.total} downloaded
-                  {#if title.downloading > 0}
-                    · {title.downloading} downloading
-                  {/if}
-                  {#if title.failed > 0}
-                    · {title.failed} failed
-                  {/if}
-                </span>
-              </div>
-              <p class="muted url-line">
-                <a href={title.url} target="_blank" rel="noreferrer">{title.url}</a>
-                {#if title.last_checked_at}
-                  · last checked {title.last_checked_at}
-                {/if}
-                · watch {title.enabled ? "on" : "off"}
-              </p>
-              <div class="row-actions">
-                <button type="button" class="outline" onclick={() => toggleExpand(title.id)}>
-                  {expanded[title.id] ? "Hide chapters" : "Show chapters"}
-                </button>
-                <button type="button" class="outline" disabled={busy} onclick={() => syncTitle(title.id)}>
-                  Sync now
-                </button>
-                <button type="button" class="outline secondary" onclick={() => toggleEnabled(title)}>
-                  {title.enabled ? "Disable watch" : "Enable watch"}
-                </button>
-                <button type="button" class="outline contrast" onclick={() => removeTitle(title.id)}>
-                  Remove
-                </button>
-              </div>
-            </header>
-
-            {#if expanded[title.id]}
-              {#if loadingChapters[title.id] && !chaptersByTitle[title.id]}
-                <p class="muted">Loading chapters…</p>
-              {:else}
-                <ul class="chapter-list">
-                  {#each chaptersByTitle[title.id] || [] as ch (ch.id)}
-                    <li class="chapter-card">
-                      <div class="chapter-label">{ch.label}</div>
-                      <span class={`status status-${ch.status}`}>{ch.status}</span>
-                      {#if ch.error}
-                        <div class="muted chapter-error">{ch.error}</div>
-                      {/if}
-                      <div class="chapter-actions">
-                        {#if ch.status === "downloading"}
-                          <button
-                            type="button"
-                            class="outline contrast"
-                            onclick={() => cancelChapter(ch.id, title.id)}
-                          >
-                            Cancel
-                          </button>
-                        {/if}
-                        <button
-                          type="button"
-                          class="outline"
-                          onclick={() => redownload(ch.id, title.id)}
-                        >
-                          Redownload
-                        </button>
-                      </div>
-                    </li>
-                  {/each}
-                </ul>
-                <div class="table-wrap">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Chapter</th>
-                        <th>Status</th>
-                        <th></th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {#each chaptersByTitle[title.id] || [] as ch (ch.id)}
-                        <tr>
-                          <td>{ch.label}</td>
-                          <td>
-                            <span class={`status status-${ch.status}`}>{ch.status}</span>
-                            {#if ch.error}
-                              <div class="muted">{ch.error}</div>
-                            {/if}
-                          </td>
-                          <td>
-                            <div class="chapter-actions">
-                              {#if ch.status === "downloading"}
-                                <button
-                                  type="button"
-                                  class="outline contrast"
-                                  onclick={() => cancelChapter(ch.id, title.id)}
-                                >
-                                  Cancel
-                                </button>
-                              {/if}
-                              <button
-                                type="button"
-                                class="outline"
-                                onclick={() => redownload(ch.id, title.id)}
-                              >
-                                Redownload
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
-                      {/each}
-                    </tbody>
-                  </table>
-                </div>
-              {/if}
-            {/if}
-          </article>
-        {/each}
-      {/if}
-    </section>
+    <ErrorBanner message={error} />
+    <AddTitleForm {busy} onSubmit={addTitle} />
+    <JobsStrip {jobs} onClear={clearQueue} onCancel={cancelChapter} />
+    <TitleList
+      {titles}
+      {expanded}
+      {loadingChapters}
+      {chaptersByTitle}
+      {busy}
+      onToggleExpand={toggleExpand}
+      onSync={syncTitle}
+      onToggleEnabled={toggleEnabled}
+      onRemove={removeTitle}
+      onCancelChapter={cancelChapter}
+      onRedownload={redownload}
+    />
   {/if}
 </main>
diff --git a/web/src/components/AddTitleForm.svelte b/web/src/components/AddTitleForm.svelte
new file mode 100644
index 0000000..70efffa
--- /dev/null
+++ b/web/src/components/AddTitleForm.svelte
@@ -0,0 +1,32 @@
+<script>
+  /**
+   * @typedef {object} Props
+   * @property {boolean} [busy]
+   * @property {(url: string) => void | Promise<void>} onSubmit
+   */
+
+  /** @type {Props} */
+  let { busy = false, onSubmit } = $props();
+
+  let url = $state("");
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const value = url.trim();
+    if (!value) {
+      return;
+    }
+    await onSubmit(value);
+    url = "";
+  }
+</script>
+
+<form class="add-title" onsubmit={handleSubmit}>
+  <label>
+    Series URL
+    <input type="url" bind:value={url} placeholder="" required disabled={busy} />
+  </label>
+  <button type="submit" disabled={busy || !url.trim()}>
+    {busy ? "Working…" : "Add & watch"}
+  </button>
+</form>
diff --git a/web/src/components/AppHeader.svelte b/web/src/components/AppHeader.svelte
new file mode 100644
index 0000000..e81b9b5
--- /dev/null
+++ b/web/src/components/AppHeader.svelte
@@ -0,0 +1,23 @@
+<script>
+  /**
+   * @typedef {object} Props
+   * @property {boolean} showLogout
+   * @property {string} [username]
+   * @property {() => void} [onLogout]
+   */
+
+  /** @type {Props} */
+  let { showLogout = false, username = "", onLogout } = $props();
+</script>
+
+<header class="app-header">
+  <h1>Watch & Download</h1>
+  {#if showLogout}
+    <div class="header-auth">
+      {#if username}
+        <span class="muted">{username}</span>
+      {/if}
+      <button type="button" class="outline contrast" onclick={onLogout}>Log out</button>
+    </div>
+  {/if}
+</header>
diff --git a/web/src/components/ChapterList.svelte b/web/src/components/ChapterList.svelte
new file mode 100644
index 0000000..a4940eb
--- /dev/null
+++ b/web/src/components/ChapterList.svelte
@@ -0,0 +1,87 @@
+<script>
+  /**
+   * @typedef {object} Chapter
+   * @property {number} id
+   * @property {string} label
+   * @property {string} status
+   * @property {string} [error]
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {Chapter[]} chapters
+   * @property {number} titleId
+   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onCancel
+   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onRedownload
+   */
+
+  /** @type {Props} */
+  let { chapters = [], titleId, onCancel, onRedownload } = $props();
+</script>
+
+<ul class="chapter-list">
+  {#each chapters as ch (ch.id)}
+    <li class="chapter-card">
+      <div class="chapter-label">{ch.label}</div>
+      <span class={`status status-${ch.status}`}>{ch.status}</span>
+      {#if ch.error}
+        <div class="muted chapter-error">{ch.error}</div>
+      {/if}
+      <div class="chapter-actions">
+        {#if ch.status === "downloading"}
+          <button
+            type="button"
+            class="outline contrast"
+            onclick={() => onCancel(ch.id, titleId)}
+          >
+            Cancel
+          </button>
+        {/if}
+        <button type="button" class="outline" onclick={() => onRedownload(ch.id, titleId)}>
+          Redownload
+        </button>
+      </div>
+    </li>
+  {/each}
+</ul>
+
+<div class="table-wrap">
+  <table>
+    <thead>
+      <tr>
+        <th>Chapter</th>
+        <th>Status</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each chapters as ch (ch.id)}
+        <tr>
+          <td>{ch.label}</td>
+          <td>
+            <span class={`status status-${ch.status}`}>{ch.status}</span>
+            {#if ch.error}
+              <div class="muted">{ch.error}</div>
+            {/if}
+          </td>
+          <td>
+            <div class="chapter-actions">
+              {#if ch.status === "downloading"}
+                <button
+                  type="button"
+                  class="outline contrast"
+                  onclick={() => onCancel(ch.id, titleId)}
+                >
+                  Cancel
+                </button>
+              {/if}
+              <button type="button" class="outline" onclick={() => onRedownload(ch.id, titleId)}>
+                Redownload
+              </button>
+            </div>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/web/src/components/ErrorBanner.svelte b/web/src/components/ErrorBanner.svelte
new file mode 100644
index 0000000..146624e
--- /dev/null
+++ b/web/src/components/ErrorBanner.svelte
@@ -0,0 +1,13 @@
+<script>
+  /**
+   * @typedef {object} Props
+   * @property {string} message
+   */
+
+  /** @type {Props} */
+  let { message } = $props();
+</script>
+
+{#if message}
+  <p class="error-banner" role="alert">{message}</p>
+{/if}
diff --git a/web/src/components/JobsStrip.svelte b/web/src/components/JobsStrip.svelte
new file mode 100644
index 0000000..33a5be4
--- /dev/null
+++ b/web/src/components/JobsStrip.svelte
@@ -0,0 +1,62 @@
+<script>
+  /**
+   * @typedef {object} Job
+   * @property {number} id
+   * @property {string} status
+   * @property {string} [message]
+   * @property {string} [type]
+   * @property {string} [title_name]
+   * @property {number} [chapter_id]
+   * @property {number} [title_id]
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {Job[]} jobs
+   * @property {() => void | Promise<void>} onClear
+   * @property {(chapterId: number, titleId: number|undefined) => void | Promise<void>} onCancel
+   */
+
+  /** @type {Props} */
+  let { jobs = [], onClear, onCancel } = $props();
+</script>
+
+<section class="jobs-strip" aria-live="polite">
+  <div class="section-heading">
+    <h2>Activity</h2>
+    <button
+      type="button"
+      class="outline contrast"
+      disabled={jobs.length === 0}
+      onclick={onClear}
+    >
+      Clear queue
+    </button>
+  </div>
+  {#if jobs.length === 0}
+    <p class="muted">No active jobs.</p>
+  {:else}
+    <ul class="job-list">
+      {#each jobs as job (job.id)}
+        <li class="job-row">
+          <div class="job-info">
+            <strong>{job.status}</strong>
+            — {job.message || job.type}
+            {#if job.title_name}
+              <span class="muted">({job.title_name})</span>
+            {/if}
+          </div>
+          {#if job.chapter_id}
+            <button
+              type="button"
+              class="outline contrast job-cancel"
+              onclick={() => onCancel(job.chapter_id, job.title_id)}
+            >
+              Cancel
+            </button>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
diff --git a/web/src/components/LoginForm.svelte b/web/src/components/LoginForm.svelte
new file mode 100644
index 0000000..e42c99b
--- /dev/null
+++ b/web/src/components/LoginForm.svelte
@@ -0,0 +1,50 @@
+<script>
+  /**
+   * @typedef {object} Props
+   * @property {string} [error]
+   * @property {boolean} [busy]
+   * @property {(payload: { username: string, password: string }) => void | Promise<void>} onSubmit
+   */
+
+  /** @type {Props} */
+  let { error = "", busy = false, onSubmit } = $props();
+
+  let username = $state("admin");
+  let password = $state("");
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    await onSubmit({ username: username.trim(), password });
+    password = "";
+  }
+</script>
+
+{#if error}
+  <p class="error-banner" role="alert">{error}</p>
+{/if}
+
+<form class="login-form" onsubmit={handleSubmit}>
+  <label>
+    Username
+    <input
+      type="text"
+      bind:value={username}
+      autocomplete="username"
+      required
+      disabled={busy}
+    />
+  </label>
+  <label>
+    Password
+    <input
+      type="password"
+      bind:value={password}
+      autocomplete="current-password"
+      required
+      disabled={busy}
+    />
+  </label>
+  <button type="submit" disabled={busy || !password}>
+    {busy ? "Signing in…" : "Sign in"}
+  </button>
+</form>
diff --git a/web/src/components/TitleCard.svelte b/web/src/components/TitleCard.svelte
new file mode 100644
index 0000000..aff46da
--- /dev/null
+++ b/web/src/components/TitleCard.svelte
@@ -0,0 +1,99 @@
+<script>
+  import ChapterList from "./ChapterList.svelte";
+
+  /**
+   * @typedef {object} Title
+   * @property {number} id
+   * @property {string} title
+   * @property {string} source
+   * @property {string} url
+   * @property {boolean} enabled
+   * @property {number} downloaded
+   * @property {number} total
+   * @property {number} downloading
+   * @property {number} failed
+   * @property {string} [last_checked_at]
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {Title} title
+   * @property {boolean} expanded
+   * @property {boolean} loading
+   * @property {any[]} chapters
+   * @property {boolean} busy
+   * @property {() => void | Promise<void>} onToggleExpand
+   * @property {() => void | Promise<void>} onSync
+   * @property {() => void | Promise<void>} onToggleEnabled
+   * @property {() => void | Promise<void>} onRemove
+   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onCancelChapter
+   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onRedownload
+   */
+
+  /** @type {Props} */
+  let {
+    title,
+    expanded = false,
+    loading = false,
+    chapters = [],
+    busy = false,
+    onToggleExpand,
+    onSync,
+    onToggleEnabled,
+    onRemove,
+    onCancelChapter,
+    onRedownload,
+  } = $props();
+</script>
+
+<article>
+  <header>
+    <div class="title-meta">
+      <strong>{title.title}</strong>
+      <span class="muted">{title.source}</span>
+      <span class="progress-text">
+        {title.downloaded} / {title.total} downloaded
+        {#if title.downloading > 0}
+          · {title.downloading} downloading
+        {/if}
+        {#if title.failed > 0}
+          · {title.failed} failed
+        {/if}
+      </span>
+    </div>
+    <p class="muted url-line">
+      <a href={title.url} target="_blank" rel="noreferrer">{title.url}</a>
+      {#if title.last_checked_at}
+        · last checked {title.last_checked_at}
+      {/if}
+      · watch {title.enabled ? "on" : "off"}
+    </p>
+    <div class="row-actions">
+      <button type="button" class="outline" onclick={onToggleExpand}>
+        {expanded ? "Hide chapters" : "Show chapters"}
+      </button>
+      <button type="button" class="outline" disabled={busy} onclick={onSync}>
+        Sync now
+      </button>
+      <button type="button" class="outline secondary" onclick={onToggleEnabled}>
+        {title.enabled ? "Disable watch" : "Enable watch"}
+      </button>
+      <button type="button" class="outline contrast" onclick={onRemove}>
+        Remove
+      </button>
+    </div>
+  </header>
+
+  {#if expanded}
+    {#if loading && chapters.length === 0}
+      <p class="muted">Loading chapters…</p>
+    {:else}
+      <ChapterList
+        {chapters}
+        titleId={title.id}
+        onCancel={onCancelChapter}
+        {onRedownload}
+      />
+    {/if}
+  {/if}
+</article>
diff --git a/web/src/components/TitleList.svelte b/web/src/components/TitleList.svelte
new file mode 100644
index 0000000..6641ffc
--- /dev/null
+++ b/web/src/components/TitleList.svelte
@@ -0,0 +1,56 @@
+<script>
+  import TitleCard from "./TitleCard.svelte";
+
+  /**
+   * @typedef {object} Props
+   * @property {any[]} titles
+   * @property {Record<string|number, boolean>} expanded
+   * @property {Record<string|number, boolean>} loadingChapters
+   * @property {Record<string|number, any[]>} chaptersByTitle
+   * @property {boolean} busy
+   * @property {(titleId: number) => void | Promise<void>} onToggleExpand
+   * @property {(titleId: number) => void | Promise<void>} onSync
+   * @property {(title: any) => void | Promise<void>} onToggleEnabled
+   * @property {(titleId: number) => void | Promise<void>} onRemove
+   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onCancelChapter
+   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onRedownload
+   */
+
+  /** @type {Props} */
+  let {
+    titles = [],
+    expanded = {},
+    loadingChapters = {},
+    chaptersByTitle = {},
+    busy = false,
+    onToggleExpand,
+    onSync,
+    onToggleEnabled,
+    onRemove,
+    onCancelChapter,
+    onRedownload,
+  } = $props();
+</script>
+
+<section>
+  <h2>Titles</h2>
+  {#if titles.length === 0}
+    <p class="muted">No titles yet. Add a series URL above.</p>
+  {:else}
+    {#each titles as title (title.id)}
+      <TitleCard
+        {title}
+        expanded={Boolean(expanded[title.id])}
+        loading={Boolean(loadingChapters[title.id])}
+        chapters={chaptersByTitle[title.id] || []}
+        {busy}
+        onToggleExpand={() => onToggleExpand(title.id)}
+        onSync={() => onSync(title.id)}
+        onToggleEnabled={() => onToggleEnabled(title)}
+        onRemove={() => onRemove(title.id)}
+        {onCancelChapter}
+        {onRedownload}
+      />
+    {/each}
+  {/if}
+</section>
diff --git a/web/src/lib/api.js b/web/src/lib/api.js
new file mode 100644
index 0000000..53fa3b6
--- /dev/null
+++ b/web/src/lib/api.js
@@ -0,0 +1,37 @@
+/**
+ * @param {string} path - API path.
+ * @param {RequestInit & { onUnauthorized?: () => void }} [options] - Fetch options.
+ * @returns {Promise<any>} Parsed JSON body.
+ */
+export async function api(path, options = {}) {
+  const { onUnauthorized, ...fetchOptions } = options;
+  const method = (fetchOptions.method || "GET").toUpperCase();
+  const headers = { ...(fetchOptions.headers || {}) };
+  let body = fetchOptions.body;
+
+  if (body !== undefined && body !== null) {
+    if (!headers["Content-Type"]) {
+      headers["Content-Type"] = "application/json";
+    }
+  } else if (method === "POST" || method === "PUT" || method === "PATCH") {
+    // Fastify rejects Content-Type: application/json with an empty body
+    headers["Content-Type"] = "application/json";
+    body = "{}";
+  }
+
+  const res = await fetch(path, {
+    ...fetchOptions,
+    method,
+    headers,
+    body,
+    credentials: "include",
+  });
+  const data = await res.json().catch(() => ({}));
+  if (res.status === 401 && typeof onUnauthorized === "function") {
+    onUnauthorized();
+  }
+  if (!res.ok) {
+    throw new Error(data.error || data.message || res.statusText || "Request failed");
+  }
+  return data;
+}