feat(series): manage-view redesign — big pages, editable Part #, slide-over picker (FC-6.4)

Operator feedback: thumbnails too small to judge order, no obvious way to mark
'this installment is Part 2', and the permanent two-pane picker was busy and
competed with the ordering work.

- Full-width parts, each a card with a big page grid (150px, contain so whole
  pages are visible) and drag-to-reorder; positional page number as a badge.
- Editable Part # (hero field) backed by new series_chapter.stated_part —
  separate from the auto-managed chapter_number, mirroring the page_number vs
  stated_page split so reorder/delete renumbering can't wipe a hand-set part.
  Missing-Part hints when consecutive parts' stated_part jump >1.
- Each part labels its source post (derived from pages' primary_post_id) and
  shows the printed-page range with clear labels.
- Picker demoted to an on-demand right slide-over ('Add pages') with a target-
  part selector; part actions (move/merge/delete) collapsed into an overflow ⋮.

alembic 0042 adds series_chapter.stated_part (nullable int).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

alembic/versions/0042_series_chapter_stated_part.py

@@ -0,0 +1,32 @@
+"""series chapter stated_part: operator-facing Part N label (FC-6.4)
+
+Revision ID: 0042
+Revises: 0041
+Create Date: 2026-06-07
+
+A chapter's positional chapter_number is auto-managed (rewritten 1..N on
+reorder/delete), so it can't double as the installment number the operator wants
+to type (e.g. a series authored from a post that is Part 2). Add a nullable
+stated_part alongside it — the same split as series_page.page_number (order) vs
+series_page.stated_page (printed number). Nullable; the UI falls back to
+chapter_number when unset.
+"""
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+
+revision: str = "0042"
+down_revision: Union[str, None] = "0041"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "series_chapter", sa.Column("stated_part", sa.Integer, nullable=True)
+    )
+
+
+def downgrade() -> None:
+    op.drop_column("series_chapter", "stated_part")

backend/app/api/tags.py

@@ -528,6 +528,11 @@ async def series_chapter_update(tag_id: int, chapter_id: int):
         if body["title"] is not None and not isinstance(body["title"], str):
             return jsonify({"error": "title must be a string"}), 400
         kwargs.update(set_title=True, title=body["title"])
+    if "stated_part" in body:
+        part, perr = _opt_int(body, "stated_part")
+        if perr:
+            return perr
+        kwargs.update(set_part=True, stated_part=part)
     if "stated_page_start" in body:
         start, serr = _opt_int(body, "stated_page_start")
         if serr:

backend/app/models/series_chapter.py

@@ -12,6 +12,12 @@ A chapter may be a placeholder (is_placeholder=True) — a reserved empty slot f
 a section the operator doesn't have yet; it holds no pages and shows as a gap in
 the reader. stated_page_start/end carry the page range parsed from the source
 post (FC-6.2), used to flag missing-page gaps; both are nullable when unknown.
+
+stated_part is the operator-facing "Part N" label (FC-6.4), separate from the
+positional chapter_number: chapter_number is auto-managed ordering (rewritten
+1..N on reorder/delete), while stated_part is the real installment number the
+operator types — e.g. a series authored from a post that is Part 2 of a story.
+Nullable when unset (the UI then falls back to showing chapter_number).
 """
 
 from datetime import datetime
@@ -30,6 +36,7 @@ class SeriesChapter(Base):
         ForeignKey("tag.id", ondelete="CASCADE"), nullable=False, index=True
     )
     chapter_number: Mapped[int] = mapped_column(Integer, nullable=False)
+    stated_part: Mapped[int | None] = mapped_column(Integer, nullable=True)
     title: Mapped[str | None] = mapped_column(Text, nullable=True)
     is_placeholder: Mapped[bool] = mapped_column(
         Boolean, nullable=False, server_default="false"

backend/app/services/series_service.py

@@ -131,6 +131,29 @@ class SeriesService:
             prev = ch
         return out
 
+    @staticmethod
+    def _part_gaps(chapters: list[dict]) -> list[dict]:
+        """Missing-Part gaps between consecutive chapters whose stated_part
+        numbers jump by more than 1 (e.g. a series with Part 1 and Part 3, or one
+        authored straight from a Part 2 post). Mirrors _gaps but on stated_part —
+        only chapters that actually carry a stated_part participate."""
+        out: list[dict] = []
+        prev = None
+        for ch in chapters:
+            cur = ch["stated_part"]
+            if cur is None:
+                continue
+            if prev is not None and cur > prev["stated_part"] + 1:
+                out.append(
+                    {
+                        "after_chapter_id": prev["id"],
+                        "start": prev["stated_part"] + 1,
+                        "end": cur - 1,
+                    }
+                )
+            prev = ch
+        return out
+
     async def list_pages(self, series_tag_id: int) -> dict:
         tag = await self._require_series(series_tag_id)
         rows = (
@@ -138,6 +161,7 @@ class SeriesService:
                 select(
                     SeriesChapter.id.label("chapter_id"),
                     SeriesChapter.chapter_number,
+                    SeriesChapter.stated_part,
                     SeriesChapter.title,
                     SeriesChapter.is_placeholder,
                     SeriesChapter.stated_page_start,
@@ -149,10 +173,13 @@ class SeriesService:
                     ImageRecord.mime,
                     ImageRecord.path,
                     ImageRecord.thumbnail_path,
+                    ImageRecord.primary_post_id,
+                    Post.post_title,
                 )
                 .select_from(SeriesChapter)
                 .outerjoin(SeriesPage, SeriesPage.chapter_id == SeriesChapter.id)
                 .outerjoin(ImageRecord, ImageRecord.id == SeriesPage.image_id)
+                .outerjoin(Post, Post.id == ImageRecord.primary_post_id)
                 .where(SeriesChapter.series_tag_id == series_tag_id)
                 .order_by(
                     SeriesChapter.chapter_number.asc(),
@@ -164,22 +191,30 @@ class SeriesService:
         chapters: list[dict] = []
         flat: list[dict] = []
         by_id: dict[int, dict] = {}
+        # chapter_id -> {post_id: title} seen across its pages, so we can label a
+        # chapter with its source post when all its pages come from one post.
+        posts_seen: dict[int, dict[int, str | None]] = {}
         for r in rows:
             ch = by_id.get(r.chapter_id)
             if ch is None:
                 ch = {
                     "id": r.chapter_id,
                     "chapter_number": r.chapter_number,
+                    "stated_part": r.stated_part,
                     "title": r.title,
                     "is_placeholder": r.is_placeholder,
                     "stated_page_start": r.stated_page_start,
                     "stated_page_end": r.stated_page_end,
+                    "source_post": None,
                     "pages": [],
                 }
                 by_id[r.chapter_id] = ch
+                posts_seen[r.chapter_id] = {}
                 chapters.append(ch)
             if r.image_id is None:
                 continue  # placeholder / empty chapter
+            if r.primary_post_id is not None:
+                posts_seen[r.chapter_id][r.primary_post_id] = r.post_title
             page = {
                 "image_id": r.image_id,
                 "chapter_id": r.chapter_id,
@@ -191,11 +226,21 @@ class SeriesService:
             ch["pages"].append(page)
             flat.append(page)
 
+        # A chapter's source_post is set only when every page shares one post —
+        # the common case (a series authored from a post). Mixed chapters stay
+        # null rather than guessing.
+        for ch in chapters:
+            seen = posts_seen.get(ch["id"], {})
+            if len(seen) == 1:
+                pid, title = next(iter(seen.items()))
+                ch["source_post"] = {"id": pid, "title": title}
+
         return {
             "series": {"id": tag.id, "name": tag.name},
             "chapters": chapters,
             "pages": flat,  # back-compat: flat reading order across chapters
             "gaps": self._gaps(chapters),
+            "part_gaps": self._part_gaps(chapters),
         }
 
     # ---- pages ------------------------------------------------------------
@@ -353,19 +398,23 @@ class SeriesService:
         chapter_id: int,
         *,
         title: str | None = None,
+        stated_part: int | None = None,
         stated_page_start: int | None = None,
         stated_page_end: int | None = None,
         set_title: bool = False,
+        set_part: bool = False,
         set_start: bool = False,
         set_end: bool = False,
     ) -> None:
         """Partial chapter edit. The set_* flags say which fields to write (so
-        None can be written explicitly, e.g. clearing a stated page)."""
+        None can be written explicitly, e.g. clearing a stated page or part)."""
         await self._require_series(series_tag_id)
         await self._require_chapter(series_tag_id, chapter_id)
         values: dict = {}
         if set_title:
             values["title"] = title
+        if set_part:
+            values["stated_part"] = stated_part
         if set_start:
             values["stated_page_start"] = stated_page_start
         if set_end:

frontend/src/stores/seriesManage.js

@@ -16,8 +16,9 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
 
   const tagId = ref(null)
   const series = ref(null)
-  const chapters = ref([])           // [{id, chapter_number, title, is_placeholder, stated_page_start/end, pages:[...]}]
+  const chapters = ref([])           // [{id, chapter_number, stated_part, title, is_placeholder, stated_page_start/end, source_post, pages:[...]}]
-  const gaps = ref([])               // [{after_chapter_id, start, end}]
+  const gaps = ref([])               // missing-page gaps: [{after_chapter_id, start, end}]
+  const partGaps = ref([])           // missing-Part gaps: [{after_chapter_id, start, end}]
   const pageCount = ref(0)
   const targetChapterId = ref(null)  // which chapter the picker adds into
   const picker = ref([])             // gallery scroll results
@@ -33,6 +34,7 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
       series.value = body.series
       chapters.value = body.chapters || []
       gaps.value = body.gaps || []
+      partGaps.value = body.part_gaps || []
       pageCount.value = (body.pages || []).length
       // Keep a valid add-target: the selected chapter, else the first one.
       const ids = chapters.value.map(c => c.id)
@@ -52,6 +54,10 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
     return gaps.value.find(g => g.after_chapter_id === chapterId) || null
   }
 
+  function partGapAfter(chapterId) {
+    return partGaps.value.find(g => g.after_chapter_id === chapterId) || null
+  }
+
   // ---- chapters ----
   async function createChapter({ title = null, isPlaceholder = false } = {}) {
     await api.post(`/api/series/${tagId.value}/chapters`, {
@@ -67,6 +73,13 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
     await refresh()
   }
 
+  async function setChapterPart(chapterId, part) {
+    await api.patch(`/api/series/${tagId.value}/chapters/${chapterId}`, {
+      body: { stated_part: part }
+    })
+    await refresh()
+  }
+
   async function setChapterStated(chapterId, start, end) {
     await api.patch(`/api/series/${tagId.value}/chapters/${chapterId}`, {
       body: { stated_page_start: start, stated_page_end: end }
@@ -151,11 +164,11 @@ export const useSeriesManageStore = defineStore('seriesManage', () => {
   }
 
   return {
-    tagId, series, chapters, gaps, pageCount, targetChapterId,
+    tagId, series, chapters, gaps, partGaps, pageCount, targetChapterId,
     picker, pickerCursor, pickerSelection, loading,
-    load, refresh, gapAfter,
+    load, refresh, gapAfter, partGapAfter,
-    createChapter, renameChapter, setChapterStated, reorderChapters,
+    createChapter, renameChapter, setChapterPart, setChapterStated,
-    moveChapter, deleteChapter, mergeChapter, reorderPages,
+    reorderChapters, moveChapter, deleteChapter, mergeChapter, reorderPages,
     loadPicker, togglePick, addSelected, remove, setCover
   }
 })

frontend/src/views/SeriesManageView.vue

@@ -1,159 +1,227 @@
 <template>
-  <v-container fluid class="pt-2 pb-6">
+  <v-container fluid class="pt-2 pb-10 fc-series">
     <div class="fc-series__head">
       <span class="fc-series__name">{{ store.series?.name || 'Series' }}</span>
       <span class="fc-series__count">
-        {{ store.chapters.length }} chapter(s) · {{ store.pageCount }} page(s)
+        {{ store.chapters.length }} part(s) · {{ store.pageCount }} page(s)
       </span>
+      <v-spacer />
       <v-btn
         v-if="store.pageCount > 0"
         size="small" variant="tonal" color="accent"
         prepend-icon="mdi-book-open"
-        class="fc-series__read"
         @click="$router.push({ name: 'series-read', params: { tagId: store.tagId } })"
       >Read</v-btn>
     </div>
 
-    <div class="fc-series__body">
+    <p class="fc-series__hint">
-      <!-- Chapters column -->
+      Each part is one installment — drag pages to set their order, and set the
-      <div class="fc-series__chapters">
+      <strong>Part #</strong> to mark where it falls in the story. Use
-        <template v-for="(ch, ci) in store.chapters" :key="ch.id">
+      <strong>Add pages</strong> to pull images from the gallery into the part
-          <section
+      you're working on.
-            class="fc-chapter"
+    </p>
-            :class="{ 'fc-chapter--target': ch.id === store.targetChapterId }"
-          >
-            <header class="fc-chapter__head">
-              <span class="fc-chapter__num">{{ ch.chapter_number }}</span>
-              <v-text-field
-                v-model="titleDraft[ch.id]"
-                :placeholder="`Chapter ${ch.chapter_number}`"
-                density="compact" variant="plain" hide-details
-                class="fc-chapter__title"
-                @keydown.enter="commitTitle(ch)"
-                @blur="commitTitle(ch)"
-              />
-              <span v-if="ch.is_placeholder" class="fc-chapter__ph">placeholder</span>
-              <span v-else class="fc-chapter__pc">{{ ch.pages.length }} pg</span>
 
-              <div class="fc-chapter__stated">
+    <!-- Parts, full width -->
-                <input
+    <div class="fc-parts">
-                  class="fc-chapter__num-in" type="number" min="0"
+      <template v-for="(ch, ci) in store.chapters" :key="ch.id">
-                  :value="ch.stated_page_start ?? ''" placeholder="–"
+        <section class="fc-part">
-                  title="Stated first page"
+          <header class="fc-part__head">
-                  @change="onStated(ch, 'start', $event)"
+            <label class="fc-part__partfield" :title="'Part number for this installment'">
-                >
+              <span class="fc-part__partlabel">Part</span>
-                <span>–</span>
+              <input
-                <input
+                class="fc-part__partnum" type="number" min="1"
-                  class="fc-chapter__num-in" type="number" min="0"
+                :value="partDraft[ch.id] ?? ''"
-                  :value="ch.stated_page_end ?? ''" placeholder="–"
+                :placeholder="String(ch.chapter_number)"
-                  title="Stated last page"
+                @input="partDraft[ch.id] = $event.target.value"
-                  @change="onStated(ch, 'end', $event)"
+                @keydown.enter.prevent="commitPart(ch)"
-                >
+                @blur="commitPart(ch)"
-              </div>
+              >
+            </label>
 
-              <div class="fc-chapter__actions">
+            <v-text-field
+              v-model="titleDraft[ch.id]"
+              :placeholder="`Untitled — Part ${ch.stated_part ?? ch.chapter_number}`"
+              density="compact" variant="plain" hide-details
+              class="fc-part__title"
+              @keydown.enter="commitTitle(ch)"
+              @blur="commitTitle(ch)"
+            />
+
+            <span
+              v-if="ch.source_post?.title" class="fc-part__src"
+              :title="ch.source_post.title"
+            >
+              <v-icon size="x-small">mdi-link-variant</v-icon>
+              {{ ch.source_post.title }}
+            </span>
+
+            <span v-if="ch.is_placeholder" class="fc-part__badge">placeholder</span>
+            <span v-else class="fc-part__pc">{{ ch.pages.length }} pg</span>
+
+            <v-spacer />
+
+            <v-btn
+              v-if="!ch.is_placeholder"
+              size="small" variant="tonal" color="accent"
+              prepend-icon="mdi-image-plus"
+              @click="openPicker(ch.id)"
+            >Add pages</v-btn>
+
+            <v-menu location="bottom end">
+              <template #activator="{ props }">
                 <v-btn
-                  size="x-small" variant="text" icon="mdi-chevron-up"
+                  v-bind="props" size="small" variant="text"
-                  title="Move chapter up" :disabled="ci === 0"
+                  icon="mdi-dots-vertical" title="Part actions"
+                />
+              </template>
+              <v-list density="compact">
+                <v-list-item
+                  prepend-icon="mdi-chevron-up" title="Move up"
+                  :disabled="ci === 0"
                   @click="store.moveChapter(ch.id, -1)"
                 />
-                <v-btn
+                <v-list-item
-                  size="x-small" variant="text" icon="mdi-chevron-down"
+                  prepend-icon="mdi-chevron-down" title="Move down"
-                  title="Move chapter down"
                   :disabled="ci === store.chapters.length - 1"
                   @click="store.moveChapter(ch.id, 1)"
                 />
-                <v-btn
+                <v-list-item
-                  size="x-small" variant="text" icon="mdi-arrow-collapse-up"
+                  prepend-icon="mdi-arrow-collapse-up" title="Merge into previous"
-                  title="Merge into previous chapter" :disabled="ci === 0"
+                  :disabled="ci === 0"
                   @click="store.mergeChapter(ch.id, store.chapters[ci - 1].id)"
                 />
-                <v-btn
+                <v-divider />
-                  size="x-small" variant="text" icon="mdi-target"
+                <v-list-item
-                  :color="ch.id === store.targetChapterId ? 'accent' : undefined"
+                  prepend-icon="mdi-delete-outline" title="Delete part"
-                  title="Add picked images here"
+                  base-color="error"
-                  @click="store.targetChapterId = ch.id"
+                  @click="confirmDelete(ch)"
                 />
-                <v-btn
+              </v-list>
-                  size="x-small" variant="text" icon="mdi-delete-outline"
+            </v-menu>
-                  title="Delete chapter (removes its pages from the series)"
+          </header>
-                  @click="store.deleteChapter(ch.id)"
-                />
-              </div>
-            </header>
 
-            <div v-if="ch.is_placeholder" class="fc-chapter__reserved">
+          <div class="fc-part__statedrow">
-              Reserved slot — a section you don't have yet.
+            <span class="fc-part__statedlabel">Printed pages</span>
-            </div>
+            <input
-            <div v-else-if="ch.pages.length === 0" class="fc-chapter__empty">
+              class="fc-part__statedin" type="number" min="0"
-              No pages — pick this chapter (◎) then add from the right.
+              :value="ch.stated_page_start ?? ''" placeholder="start"
-            </div>
+              @change="onStated(ch, 'start', $event)"
-            <div v-else class="fc-chapter__pages">
+            >
-              <div
+            <span class="fc-part__dash">–</span>
-                v-for="(p, pi) in ch.pages" :key="p.image_id"
+            <input
-                class="fc-page" draggable="true"
+              class="fc-part__statedin" type="number" min="0"
-                @dragstart="drag = { chapterId: ch.id, idx: pi }"
+              :value="ch.stated_page_end ?? ''" placeholder="end"
-                @dragover.prevent
+              @change="onStated(ch, 'end', $event)"
-                @drop="onPageDrop(ch, pi)"
+            >
-              >
+            <span class="fc-part__statedhelp">
-                <span class="fc-page__pn">{{ p.page_number }}</span>
+              optional — the page numbers printed in this installment
-                <img :src="p.thumbnail_url" alt="" loading="lazy" />
+            </span>
-                <div class="fc-page__actions">
-                  <v-btn size="x-small" variant="text" icon="mdi-image-frame"
-                         title="Make cover" @click="store.setCover(p.image_id)" />
-                  <v-btn size="x-small" variant="text" icon="mdi-close"
-                         title="Remove" @click="store.remove(p.image_id)" />
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <div
-            v-if="store.gapAfter(ch.id)"
-            class="fc-gap"
-          >
-            <v-icon size="x-small">mdi-alert-outline</v-icon>
-            Gap: pages {{ store.gapAfter(ch.id).start }}–{{ store.gapAfter(ch.id).end }} missing
           </div>
-        </template>
 
-        <div v-if="store.chapters.length === 0" class="fc-series__empty">
+          <div v-if="ch.is_placeholder" class="fc-part__reserved">
-          No chapters yet — add one, then add images from the right.
+            Reserved slot — a part you don't have yet.
-        </div>
+          </div>
+          <div v-else-if="ch.pages.length === 0" class="fc-part__empty">
+            No pages yet.
+            <v-btn
+              size="small" variant="text" color="accent"
+              prepend-icon="mdi-image-plus" @click="openPicker(ch.id)"
+            >Add pages</v-btn>
+          </div>
+          <div v-else class="fc-part__pages">
+            <div
+              v-for="(p, pi) in ch.pages" :key="p.image_id"
+              class="fc-page" draggable="true"
+              :class="{ 'fc-page--dragging': drag && drag.chapterId === ch.id && drag.idx === pi }"
+              @dragstart="drag = { chapterId: ch.id, idx: pi }"
+              @dragend="drag = null"
+              @dragover.prevent
+              @drop="onPageDrop(ch, pi)"
+            >
+              <span class="fc-page__pn">{{ p.page_number }}</span>
+              <img :src="p.thumbnail_url" alt="" loading="lazy" />
+              <div class="fc-page__actions">
+                <v-btn size="x-small" variant="flat" icon="mdi-image-frame"
+                       title="Make series cover" @click="store.setCover(p.image_id)" />
+                <v-btn size="x-small" variant="flat" icon="mdi-close"
+                       title="Remove from series" @click="store.remove(p.image_id)" />
+              </div>
+            </div>
+          </div>
+        </section>
 
-        <div class="fc-series__chapter-add">
+        <div v-if="store.partGapAfter(ch.id)" class="fc-gap">
-          <v-btn size="small" variant="tonal" prepend-icon="mdi-plus"
+          <v-icon size="x-small">mdi-alert-outline</v-icon>
-                 @click="store.createChapter()">Add chapter</v-btn>
+          Missing
-          <v-btn size="small" variant="text" prepend-icon="mdi-bookmark-outline"
+          <template v-if="store.partGapAfter(ch.id).start === store.partGapAfter(ch.id).end">
-                 @click="store.createChapter({ isPlaceholder: true })">
+            Part {{ store.partGapAfter(ch.id).start }}
-            Add placeholder
+          </template>
-          </v-btn>
+          <template v-else>
+            Parts {{ store.partGapAfter(ch.id).start }}–{{ store.partGapAfter(ch.id).end }}
+          </template>
         </div>
+        <div v-if="store.gapAfter(ch.id)" class="fc-gap">
+          <v-icon size="x-small">mdi-alert-outline</v-icon>
+          Gap: printed pages {{ store.gapAfter(ch.id).start }}–{{ store.gapAfter(ch.id).end }} missing
+        </div>
+      </template>
+
+      <div v-if="store.chapters.length === 0" class="fc-series__empty">
+        No parts yet — add one, then add pages from the gallery.
       </div>
 
-      <!-- Picker column -->
+      <div class="fc-parts__add">
-      <div class="fc-series__picker">
+        <v-btn size="small" variant="tonal" prepend-icon="mdi-plus"
-        <div class="fc-series__pickerhead">
+               @click="store.createChapter()">Add part</v-btn>
+        <v-btn size="small" variant="text" prepend-icon="mdi-bookmark-outline"
+               @click="store.createChapter({ isPlaceholder: true })">
+          Add placeholder
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Picker slide-over -->
+    <v-navigation-drawer
+      v-model="pickerOpen" location="right" temporary width="420"
+      class="fc-picker"
+    >
+      <div class="fc-picker__head">
+        <div class="fc-picker__title">
+          <span>Add pages</span>
+          <v-btn size="x-small" variant="text" icon="mdi-close"
+                 @click="pickerOpen = false" />
+        </div>
+        <v-select
+          v-model="store.targetChapterId"
+          :items="chapterItems" item-title="label" item-value="id"
+          density="compact" variant="outlined" hide-details
+          label="Add to part" class="mt-2"
+        />
+        <div class="fc-picker__bar">
           <span>{{ store.pickerSelection.length }} selected</span>
           <v-btn
             size="small" color="accent" variant="flat"
             :disabled="store.pickerSelection.length === 0"
             @click="store.addSelected()"
-          >Add to {{ targetLabel }}</v-btn>
+          >Add to part</v-btn>
         </div>
-        <div class="fc-series__pickergrid">
-          <div
-            v-for="img in store.picker" :key="img.id"
-            class="fc-series__pick"
-            :class="{ on: store.pickerSelection.includes(img.id) }"
-            @click="store.togglePick(img.id)"
-          >
-            <img :src="img.thumbnail_url" alt="" loading="lazy" />
-          </div>
-        </div>
-        <div ref="sentinel" class="fc-series__sentinel" />
       </div>
-    </div>
+      <div class="fc-picker__grid">
+        <div
+          v-for="img in store.picker" :key="img.id"
+          class="fc-picker__pick"
+          :class="{ on: store.pickerSelection.includes(img.id) }"
+          @click="store.togglePick(img.id)"
+        >
+          <img :src="img.thumbnail_url" alt="" loading="lazy" />
+          <v-icon
+            v-if="store.pickerSelection.includes(img.id)"
+            class="fc-picker__check" color="accent" size="small"
+          >mdi-check-circle</v-icon>
+        </div>
+        <div ref="sentinel" class="fc-picker__sentinel" />
+      </div>
+    </v-navigation-drawer>
   </v-container>
 </template>
 
@@ -167,20 +235,29 @@ const route = useRoute()
 const store = useSeriesManageStore()
 const sentinel = ref(null)
 const drag = ref(null)            // { chapterId, idx }
-const titleDraft = reactive({})   // chapterId -> draft string
+const titleDraft = reactive({})   // chapterId -> draft title
+const partDraft = reactive({})    // chapterId -> draft stated_part (string)
+const pickerOpen = ref(false)
 
-// Keep local title drafts in sync with the loaded chapters. Edits commit on
+// Keep local drafts in sync with loaded chapters. Edits commit on blur/Enter,
-// blur/Enter, which refreshes and resets the draft to the saved value.
+// which refreshes and resets the draft to the saved value.
 watch(() => store.chapters, (chs) => {
-  Object.keys(titleDraft).forEach(k => delete titleDraft[k])
+  for (const k of Object.keys(titleDraft)) delete titleDraft[k]
-  for (const c of chs) titleDraft[c.id] = c.title || ''
+  for (const k of Object.keys(partDraft)) delete partDraft[k]
+  for (const c of chs) {
+    titleDraft[c.id] = c.title || ''
+    partDraft[c.id] = c.stated_part == null ? '' : String(c.stated_part)
+  }
 }, { immediate: true })
 
-const targetLabel = computed(() => {
+const chapterItems = computed(() =>
-  const ch = store.chapters.find(c => c.id === store.targetChapterId)
+  store.chapters.map(c => ({
-  if (!ch) return 'chapter'
+    id: c.id,
-  return ch.title || `Chapter ${ch.chapter_number}`
+    label: `Part ${c.stated_part ?? c.chapter_number}` +
-})
+      (c.title ? ` — ${c.title}` : '') +
+      (c.is_placeholder ? ' (placeholder)' : ` · ${c.pages.length} pg`),
+  }))
+)
 
 function commitTitle(ch) {
   const v = (titleDraft[ch.id] || '').trim()
@@ -188,6 +265,17 @@ function commitTitle(ch) {
   store.renameChapter(ch.id, v || null)
 }
 
+function commitPart(ch) {
+  const raw = (partDraft[ch.id] ?? '').trim()
+  const next = raw === '' ? null : parseInt(raw, 10)
+  if (raw !== '' && (Number.isNaN(next) || next < 1)) {
+    partDraft[ch.id] = ch.stated_part == null ? '' : String(ch.stated_part)
+    return
+  }
+  if (next === (ch.stated_part ?? null)) return
+  store.setChapterPart(ch.id, next)
+}
+
 function onStated(ch, which, ev) {
   const raw = ev.target.value
   const n = raw === '' ? null : parseInt(raw, 10)
@@ -206,6 +294,20 @@ function onPageDrop(chapter, toIdx) {
   store.reorderPages(chapter.id, ordered)
 }
 
+function confirmDelete(ch) {
+  const label = `Part ${ch.stated_part ?? ch.chapter_number}`
+  const n = ch.pages.length
+  const msg = n
+    ? `Delete ${label} and remove its ${n} page(s) from the series?`
+    : `Delete ${label}?`
+  if (window.confirm(msg)) store.deleteChapter(ch.id)
+}
+
+function openPicker(chapterId) {
+  store.targetChapterId = chapterId
+  pickerOpen.value = true
+}
+
 useInfiniteScroll(sentinel, () => store.loadPicker())
 
 onMounted(async () => {
@@ -216,91 +318,146 @@ onMounted(async () => {
 
 <style scoped>
 .fc-series__head {
-  display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
+  display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;
 }
-.fc-series__name { font-family: 'Fraunces', Georgia, serif; font-size: 22px; }
+.fc-series__name { font-family: 'Fraunces', Georgia, serif; font-size: 24px; }
 .fc-series__count {
   font-size: 13px; color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-series__body { display: flex; gap: 16px; align-items: flex-start; }
+.fc-series__hint {
-.fc-series__chapters {
+  font-size: 13px; color: rgb(var(--v-theme-on-surface-variant));
-  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
+  margin-bottom: 18px; max-width: 760px;
 }
 
-.fc-chapter {
+/* Parts — full width, stacked */
+.fc-parts { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
+.fc-part {
   border: 1px solid rgb(var(--v-theme-surface-light));
-  border-radius: 8px; padding: 8px 10px;
+  border-radius: 10px; padding: 12px 14px;
   background: rgb(var(--v-theme-surface));
 }
-.fc-chapter--target { border-color: rgb(var(--v-theme-accent), 0.7); }
+.fc-part__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
-.fc-chapter__head { display: flex; align-items: center; gap: 8px; }
+
-.fc-chapter__num {
+.fc-part__partfield {
-  flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 4px;
+  display: inline-flex; align-items: center; gap: 6px;
-  display: inline-flex; align-items: center; justify-content: center;
+  background: rgb(var(--v-theme-accent), 0.12);
-  font-size: 12px; font-variant-numeric: tabular-nums;
+  border: 1px solid rgb(var(--v-theme-accent), 0.35);
-  background: rgb(var(--v-theme-accent), 0.16);
+  border-radius: 8px; padding: 4px 8px;
+}
+.fc-part__partlabel {
+  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
   color: rgb(var(--v-theme-accent));
 }
-.fc-chapter__title { flex: 1; min-width: 0; }
+.fc-part__partnum {
-.fc-chapter__ph {
+  width: 46px; text-align: center; font-size: 18px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  background: transparent; border: none; color: rgb(var(--v-theme-on-surface));
+}
+.fc-part__partnum:focus { outline: none; }
+.fc-part__partnum::placeholder { color: rgb(var(--v-theme-on-surface-variant)); opacity: 0.6; }
+
+.fc-part__title { flex: 1 1 180px; min-width: 120px; font-size: 15px; }
+.fc-part__src {
+  display: inline-flex; align-items: center; gap: 4px; max-width: 240px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 12px; color: rgb(var(--v-theme-on-surface-variant));
+}
+.fc-part__badge {
   font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
   color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-chapter__pc {
+.fc-part__pc {
   font-size: 12px; color: rgb(var(--v-theme-on-surface-variant));
   font-variant-numeric: tabular-nums;
 }
-.fc-chapter__stated { display: inline-flex; align-items: center; gap: 4px; }
+
-.fc-chapter__num-in {
+.fc-part__statedrow {
-  width: 42px; text-align: center; font-size: 12px;
+  display: flex; align-items: center; gap: 6px; margin: 8px 0 2px;
+  font-size: 12px; color: rgb(var(--v-theme-on-surface-variant));
+}
+.fc-part__statedlabel { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
+.fc-part__statedin {
+  width: 56px; text-align: center; font-size: 12px;
   background: rgb(var(--v-theme-surface-light));
   border: 1px solid transparent; border-radius: 4px; padding: 2px 4px;
   color: rgb(var(--v-theme-on-surface));
 }
-.fc-chapter__num-in:focus { outline: none; border-color: rgb(var(--v-theme-accent)); }
+.fc-part__statedin:focus { outline: none; border-color: rgb(var(--v-theme-accent)); }
-.fc-chapter__actions { flex: 0 0 auto; display: inline-flex; }
+.fc-part__dash { opacity: 0.6; }
-.fc-chapter__reserved, .fc-chapter__empty {
+.fc-part__statedhelp { font-size: 11px; opacity: 0.7; }
-  padding: 14px; text-align: center; font-size: 13px;
+
+.fc-part__reserved, .fc-part__empty {
+  padding: 18px; text-align: center; font-size: 13px;
   color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-chapter__pages { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+
+/* Big page grid */
+.fc-part__pages {
+  display: grid; gap: 10px; margin-top: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
 .fc-page {
-  display: flex; align-items: center; gap: 10px; padding: 6px;
+  position: relative; border-radius: 8px; overflow: hidden; cursor: grab;
-  background: rgb(var(--v-theme-surface-light)); border-radius: 6px; cursor: grab;
+  background: rgb(var(--v-theme-surface-light));
+  border: 1px solid rgb(var(--v-theme-surface-light));
+}
+.fc-page--dragging { opacity: 0.4; }
+.fc-page img {
+  width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
+  display: block; background: rgb(var(--v-theme-background));
 }
-.fc-page img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
 .fc-page__pn {
-  width: 26px; text-align: center; font-variant-numeric: tabular-nums;
+  position: absolute; top: 6px; left: 6px; z-index: 2;
-  color: rgb(var(--v-theme-on-surface-variant));
+  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
+  background: rgb(var(--v-theme-accent)); color: rgb(var(--v-theme-on-accent, 0 0 0));
 }
-.fc-page__actions { margin-left: auto; }
+.fc-page__actions {
+  position: absolute; top: 4px; right: 4px; z-index: 2;
+  display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s;
+}
+.fc-page:hover .fc-page__actions, .fc-page:focus-within .fc-page__actions { opacity: 1; }
+.fc-page__actions :deep(.v-btn) {
+  background: rgba(0, 0, 0, 0.55); color: #fff;
+}
+
 .fc-gap {
-  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
+  display: flex; align-items: center; gap: 6px; padding: 2px 10px;
   font-size: 12px; color: rgb(var(--v-theme-warning, var(--v-theme-accent)));
 }
-.fc-series__chapter-add { display: flex; gap: 8px; margin-top: 4px; }
+.fc-parts__add { display: flex; gap: 8px; margin-top: 4px; }
 .fc-series__empty {
-  padding: 32px; text-align: center; color: rgb(var(--v-theme-on-surface-variant));
+  padding: 40px; text-align: center; color: rgb(var(--v-theme-on-surface-variant));
 }
 
-.fc-series__picker { flex: 1; min-width: 0; }
+/* Picker slide-over */
-.fc-series__pickerhead {
+.fc-picker__head {
+  position: sticky; top: 0; z-index: 1; padding: 12px 14px;
+  background: rgb(var(--v-theme-surface));
+  border-bottom: 1px solid rgb(var(--v-theme-surface-light));
+}
+.fc-picker__title {
   display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: 8px;
+  font-family: 'Fraunces', Georgia, serif; font-size: 18px;
 }
-.fc-series__pickergrid {
+.fc-picker__bar {
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  display: flex; align-items: center; justify-content: space-between;
-  gap: 6px;
+  margin-top: 10px; font-size: 13px;
 }
-.fc-series__pick {
+.fc-picker__grid {
-  cursor: pointer; aspect-ratio: 1; overflow: hidden;
+  display: grid; gap: 6px; padding: 12px;
-  border-radius: 4px; outline: 2px solid transparent;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
 }
-.fc-series__pick img { width: 100%; height: 100%; object-fit: cover; }
+.fc-picker__pick {
-.fc-series__pick.on { outline-color: rgb(var(--v-theme-accent)); }
+  position: relative; cursor: pointer; aspect-ratio: 1; overflow: hidden;
-.fc-series__sentinel { height: 40px; }
+  border-radius: 6px; outline: 2px solid transparent;
-
-@media (max-width: 900px) {
-  .fc-series__body { flex-direction: column; }
 }
+.fc-picker__pick img { width: 100%; height: 100%; object-fit: cover; }
+.fc-picker__pick.on { outline-color: rgb(var(--v-theme-accent)); }
+.fc-picker__check {
+  position: absolute; top: 4px; right: 4px;
+  background: rgba(0, 0, 0, 0.5); border-radius: 50%;
+}
+.fc-picker__sentinel { grid-column: 1 / -1; height: 40px; }
 </style>

frontend/test/seriesManage.spec.js

@@ -75,6 +75,33 @@ describe('seriesManage', () => {
     expect(r.body).toEqual({ chapter_ids: [2, 1, 3] })
   })
 
+  it('setChapterPart patches stated_part on the chapter', async () => {
+    const s = useSeriesManageStore()
+    s.tagId = 7
+    const calls = []
+    stubFetch((url, init) => {
+      calls.push({ url, method: init.method, body: init.body ? JSON.parse(init.body) : null })
+      if (init.method === 'PATCH') return { status: 200, body: { ok: true } }
+      return { status: 200, body: SERIES_BODY }
+    })
+    await s.setChapterPart(1, 2)
+    const p = calls.find(c => c.method === 'PATCH')
+    expect(p.url).toContain('/api/series/7/chapters/1')
+    expect(p.body).toEqual({ stated_part: 2 })
+  })
+
+  it('load surfaces part_gaps and partGapAfter looks them up', async () => {
+    const s = useSeriesManageStore()
+    stubFetch(() => ({
+      status: 200,
+      body: { ...SERIES_BODY, part_gaps: [{ after_chapter_id: 1, start: 2, end: 2 }] }
+    }))
+    await s.load(7)
+    expect(s.partGaps).toHaveLength(1)
+    expect(s.partGapAfter(1)).toEqual({ after_chapter_id: 1, start: 2, end: 2 })
+    expect(s.partGapAfter(99)).toBeNull()
+  })
+
   it('addSelected posts selection + target chapter then clears', async () => {
     const s = useSeriesManageStore()
     s.tagId = 7

tests/test_series_from_post.py

@@ -113,3 +113,52 @@ async def test_list_series_cards(db):
     # artist filter keeps it; a different artist id drops it.
     assert any(r["id"] == out["series_tag_id"] for r in await svc.list_series(artist_id=artist.id))
     assert all(r["id"] != out["series_tag_id"] for r in await svc.list_series(artist_id=artist.id + 99999))
+
+
+# --- FC-6.4: stated_part, part_gaps, source_post label ---------------------
+
+
+@pytest.mark.asyncio
+async def test_update_chapter_sets_and_clears_stated_part(db):
+    svc = SeriesService(db)
+    sid = (await TagService(db).find_or_create("Part Series", TagKind.series)).id
+    ch = await svc.create_chapter(sid)
+    # Set the installment to Part 2 (chapter_number stays its positional value).
+    await svc.update_chapter(sid, ch["id"], stated_part=2, set_part=True)
+    data = await svc.list_pages(sid)
+    assert data["chapters"][0]["stated_part"] == 2
+    assert data["chapters"][0]["chapter_number"] == 1
+    # Clearing it writes NULL back.
+    await svc.update_chapter(sid, ch["id"], stated_part=None, set_part=True)
+    data = await svc.list_pages(sid)
+    assert data["chapters"][0]["stated_part"] is None
+
+
+@pytest.mark.asyncio
+async def test_part_gaps_flagged_from_stated_part(db):
+    svc = SeriesService(db)
+    sid = (await TagService(db).find_or_create("Gappy Series", TagKind.series)).id
+    c1 = await svc.create_chapter(sid)
+    c3 = await svc.create_chapter(sid)
+    await svc.update_chapter(sid, c1["id"], stated_part=1, set_part=True)
+    await svc.update_chapter(sid, c3["id"], stated_part=3, set_part=True)
+    data = await svc.list_pages(sid)
+    assert len(data["part_gaps"]) == 1
+    gap = data["part_gaps"][0]
+    assert gap["after_chapter_id"] == c1["id"]
+    assert gap["start"] == 2
+    assert gap["end"] == 2
+
+
+@pytest.mark.asyncio
+async def test_source_post_label_when_pages_share_one_post(db):
+    svc = SeriesService(db)
+    artist = await _artist(db, "Src Artist")
+    post = await _post(db, artist, "Source Comic pages 1-2", "pp5")
+    await _post_images(db, post, artist, 2)
+    out = await svc.promote_post_to_series(post.id)
+    data = await svc.list_pages(out["series_tag_id"])
+    sp = data["chapters"][0]["source_post"]
+    assert sp is not None
+    assert sp["id"] == post.id
+    assert sp["title"] == "Source Comic pages 1-2"