@jant/core 0.6.15 → 0.6.16

package/src/client/components/jant-compose-dialog.ts

@@ -9,6 +9,7 @@
 
 import { LitElement, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { repeat } from "lit/directives/repeat.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import type { Editor, JSONContent } from "@tiptap/core";
@@ -20,8 +21,10 @@ import type {
   ComposeSubmitDetail,
   ComposeSubmitAttachment,
   ComposeAttachment,
+  ComposeRowStatus,
   DraftItem,
   LocalDraft,
+  LocalDraftMedia,
   ComposeFullscreenOpenDetail,
   ComposeFullscreenReplyContext,
   ComposeFullscreenCloseDetail,
@@ -61,6 +64,18 @@ interface ReplyToData {
 interface ThreadItem {
   id: string;
   format: ComposeFormat;
+  /**
+   * Per-post publish date. Empty means "follows the thread" — the server fills
+   * it from the root (see `createThreadWithAttachments`). The root's own date
+   * stays on `_publishedAtInput` so every existing edit/draft/submit path keeps
+   * working unchanged.
+   */
+  publishedAtInput?: string;
+  publishedAtTimeMinutes?: number | null;
+  /** Per-post permalink. Empty means the server assigns a random id. */
+  slug?: string;
+  /** Last availability answer for this post's slug. */
+  slugTaken?: boolean;
 }
 
 interface ApiMediaAttachment {
@@ -91,6 +106,7 @@ type ApiAttachment = ApiMediaAttachment | ApiTextAttachment;
 interface ComposePostResponse {
   id: string;
   threadId?: string;
+  threadPosition?: number;
   format: ComposeFormat;
   slug?: string | null;
   visibility?: ComposeVisibility | null;
@@ -116,11 +132,17 @@ interface ComposeOpenOptions {
   collectionId?: string;
   restoreDraft?: boolean;
   initialFormat?: ComposeFormat;
+  /** false suppresses the "Draft restored." toast (failure reopen: the error toast is enough) */
+  restoreToast?: boolean;
+  /** Uploads the bridge knows completed — merged over the draft's own media snapshot */
+  restoreMedia?: LocalDraftMedia[];
 }
 
 interface ComposeReplyOpenOptions {
   restoreDraft?: boolean;
   initialFormat?: ComposeFormat;
+  restoreToast?: boolean;
+  restoreMedia?: LocalDraftMedia[];
 }
 
 interface ComposeStateSnapshot {
@@ -136,7 +158,6 @@ interface ComposeStateSnapshot {
   quoteText: string;
   quoteAuthor: string;
   rating: number;
-  showTitle: boolean;
   showRating: boolean;
   attachments: Array<{
     clientId: string;
@@ -160,21 +181,20 @@ interface ComposeStateSnapshot {
 
 const EDITOR_FLOATING_UI_SELECTOR = "[data-editor-floating-ui]";
 
+/**
+ * Row key for the single-post composer. Thread posts key on their own id; a
+ * lone post has no thread item to borrow one from.
+ */
+const SINGLE_ROW_ID = "single";
+
 interface ComposeFilePickerCloseDetail {
   cancelled?: boolean;
 }
 
-interface ComposePublishSummaryChip {
-  kind: "publishedAt" | "slug";
-  text: string;
-  actionLabel: string;
-  value: string;
-}
-
 const COMPOSE_PUBLISH_PANEL_FULLSCREEN_QUERY =
   "(max-width: 700px), (max-height: 760px), (hover: none) and (pointer: coarse)";
 
-const COMPOSE_DIALOG_HEADER_ICONS = {
+const COMPOSE_SHEET_ROW_ICONS = {
   drafts: `
     <rect x="3.85" y="3.45" width="7.85" height="8.35" rx="2.35" />
     <rect
@@ -183,7 +203,7 @@ const COMPOSE_DIALOG_HEADER_ICONS = {
       width="7.85"
       height="8.35"
       rx="2.35"
-      fill="var(--compose-dialog-icon-paper-fill)"
+      fill="var(--compose-icon-paper-fill)"
       stroke="none"
     />
     <rect x="6.15" y="5.75" width="7.85" height="8.35" rx="2.35" />
@@ -191,6 +211,14 @@ const COMPOSE_DIALOG_HEADER_ICONS = {
     <path d="M8.55 10.8h3.95" stroke-width="1.2" />
     <path d="M8.55 13.05h2.45" stroke-width="1.2" />
   `,
+  /* A bookmark: keep this where you can come back to it. One silhouette holds
+     up at the 16px these rows render at, where the page-and-pencil it replaced
+     turned to mush — and it stays clearly apart from the stacked pages above,
+     which the page alone did not. The down-arrow/tray before that read as a
+     download. */
+  saveDraft: `
+    <path d="M6.65 3.6h4.7a2 2 0 0 1 2 2v8.7L9 11.75l-4.35 2.55V5.6a2 2 0 0 1 2-2Z" />
+  `,
 } as const;
 
 const COMPOSE_PUBLISH_VISIBILITY_ICONS: Record<ComposeVisibility, string> = {
@@ -216,15 +244,43 @@ const COMPOSE_PUBLISH_ACTION_ICONS = {
   check: `
     <path d="M4.35 8.2 6.9 10.7 11.65 5.95" />
   `,
-  chevron: `
-    <path d="M5.1 6.45 8 9.3l2.9-2.85" />
+  caretRight: `
+    <path d="M6.45 5.1 9.3 8l-2.85 2.9" />
+  `,
+  close: `
+    <path d="M4.5 4.5 11.5 11.5" />
+    <path d="M11.5 4.5 4.5 11.5" />
+  `,
+  calendar: `
+    <rect x="2.75" y="3.45" width="10.5" height="9.8" rx="2.2" />
+    <path d="M5.35 2.55v2.1" />
+    <path d="M10.65 2.55v2.1" />
+    <path d="M2.75 6.2h10.5" />
+  `,
+  /* Two sliders — "settings for this thing", without borrowing the gear, which
+     elsewhere means site settings. No enclosing box: the trigger is already a
+     round button, and a rounded square inside a circle read as two competing
+     frames. Drawn on a 24 grid so the tracks have room to separate. */
+  options: `
+    <path d="M4 8.5h3.4" stroke-width="1.8" />
+    <path d="M12.6 8.5H20" stroke-width="1.8" />
+    <circle cx="10" cy="8.5" r="2.2" stroke-width="1.8" />
+    <path d="M4 15.5h7.4" stroke-width="1.8" />
+    <path d="M16.6 15.5H20" stroke-width="1.8" />
+    <circle cx="14" cy="15.5" r="2.2" stroke-width="1.8" />
   `,
 } as const;
 
 const COMPOSE_COLLECTION_PICKER_ICONS = {
+  /* A stack seen edge-on, not a folder: a collection is a post filed under
+     several topics at once, and the folder glyph promises a single container
+     the model does not have. Drawn spanning y 3.5–12.5 so the artwork's centre
+     is the viewBox's — it used to sit at 6.9 against a centre of 8, and since
+     layout centres the svg *box*, that 1.1-unit drift rode straight through as
+     an icon floating above its own label. */
   collection: `
-    <rect x="3" y="5.05" width="10" height="8.15" rx="2.2" />
-    <path d="M5.1 5.05V4.2a1.1 1.1 0 0 1 1.1-1.1h3.6a1.1 1.1 0 0 1 1.1 1.1v.85" />
+    <path d="M2.5 6.3 8 3.5l5.5 2.8L8 9.1 2.5 6.3Z" />
+    <path d="M2.5 9.7 8 12.5l5.5-2.8" />
   `,
   search: `
     <circle cx="7.1" cy="7.1" r="3.65" />
@@ -239,18 +295,15 @@ const COMPOSE_COLLECTION_PICKER_ICONS = {
     <path d="M8 5.55v4.9" />
     <path d="M5.55 8h4.9" />
   `,
-  chevron: `
-    <path d="M5.1 6.45 8 9.3l2.9-2.85" />
-  `,
 } as const;
 
-function renderComposeHeaderIcon(
-  icon: (typeof COMPOSE_DIALOG_HEADER_ICONS)[keyof typeof COMPOSE_DIALOG_HEADER_ICONS],
+function renderComposeSheetRowIcon(
+  icon: (typeof COMPOSE_SHEET_ROW_ICONS)[keyof typeof COMPOSE_SHEET_ROW_ICONS],
 ) {
   return html`<svg
-    class="compose-dialog-header-icon"
-    width="24"
-    height="24"
+    class="compose-sheet-row-icon"
+    width="18"
+    height="18"
     viewBox="0 0 18 18"
     fill="none"
     stroke="currentColor"
@@ -528,6 +581,38 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
+  /**
+   * Whether a note's title field starts visible, remembered per browser.
+   * Titling notes is a habit rather than a per-post decision, so the last
+   * deliberate answer carries over. One key, not one per collection: where the
+   * note was started says nothing about whether it wants a name.
+   */
+  private static _NOTE_TITLE_KEY = "jant:compose-note-title";
+
+  /** Defaults to on, so a browser with nothing stored behaves as it always has. */
+  private static _getNoteTitleDefault(): boolean {
+    try {
+      return (
+        globalThis.localStorage.getItem(JantComposeDialog._NOTE_TITLE_KEY) !==
+        "0"
+      );
+    } catch {
+      // localStorage unavailable
+      return true;
+    }
+  }
+
+  private static _setNoteTitleDefault(show: boolean) {
+    try {
+      globalThis.localStorage.setItem(
+        JantComposeDialog._NOTE_TITLE_KEY,
+        show ? "1" : "0",
+      );
+    } catch {
+      // localStorage unavailable
+    }
+  }
+
   static properties = {
     collections: { type: Array },
     labels: { type: Object },
@@ -561,13 +646,16 @@ export class JantComposeDialog extends LitElement {
     _addCollectionPanelOpen: { state: true },
     _replyToId: { state: true },
     _replyToData: { state: true },
+    _replyParentPosition: { state: true },
     _replyExpanded: { state: true },
     _threadItems: { state: true },
+    _rowStatus: { state: true },
     _focusedThreadIndex: { state: true },
     _slug: { state: true },
     _publishedAtInput: { state: true },
     _visibility: { state: true },
     _showPublishPanel: { state: true },
+    _postMetaIndex: { state: true },
     _publishPanelFullscreen: { state: true },
     _suggestedSlug: { state: true },
     _suggestedSlugLoading: { state: true },
@@ -606,13 +694,20 @@ export class JantComposeDialog extends LitElement {
   declare _addCollectionPanelOpen: boolean;
   declare _replyToId: string | null;
   declare _replyToData: ReplyToData | null;
+  /** Where the post being replied to sits in its own chain; see
+   *  `_positionLabel`. Null until the parent has been read back. */
+  declare _replyParentPosition: number | null;
   declare _replyExpanded: boolean;
   declare _threadItems: ThreadItem[];
+  /** Each row's own answer, keyed by row id. See `_rowIds`. */
+  declare _rowStatus: ReadonlyMap<string, ComposeRowStatus>;
   declare _focusedThreadIndex: number;
   declare _slug: string;
   declare _publishedAtInput: string;
   declare _visibility: ComposeVisibility;
   declare _showPublishPanel: boolean;
+  /** Index of the post whose date/permalink panel is open; null when closed. */
+  declare _postMetaIndex: number | null;
   declare _publishPanelFullscreen: boolean;
   declare _suggestedSlug: string;
   declare _suggestedSlugLoading: boolean;
@@ -696,8 +791,10 @@ export class JantComposeDialog extends LitElement {
     this._replyToData = null;
     this._replyExpanded = false;
     this._threadItems = [];
+    this._rowStatus = new Map();
     this._focusedThreadIndex = 0;
     this._replyThreadRootId = null;
+    this._replyParentPosition = null;
     this._replyRefreshKind = null;
     this._replyRefreshId = null;
     this._slug = "";
@@ -711,6 +808,7 @@ export class JantComposeDialog extends LitElement {
     this._sourceCollectionId = null;
     this._showPublishPanel = false;
     this._publishPanelFullscreen = false;
+    this._postMetaIndex = null;
     this._suggestedSlug = "";
     this._suggestedSlugLoading = false;
     this._slugCheckLoading = false;
@@ -723,11 +821,62 @@ export class JantComposeDialog extends LitElement {
     return this.querySelector("jant-compose-editor");
   }
 
+  /**
+   * The rows the composer currently has, in order — thread posts by their own
+   * id, or the single composer's one row.
+   *
+   * Everything derived from row content reduces over this list, so a row that
+   * has been removed stops being asked the moment `_threadItems` changes. No
+   * DOM read is involved, which is the point: a render reads the DOM as it
+   * stands *before* that render's own changes are committed.
+   */
+  private get _rowIds(): string[] {
+    return this._threadItems.length > 0
+      ? this._threadItems.map((item) => item.id)
+      : [SINGLE_ROW_ID];
+  }
+
+  private _handleRowStatus(rowId: string, status: ComposeRowStatus) {
+    const previous = this._rowStatus.get(rowId);
+    if (
+      previous?.hasContent === status.hasContent &&
+      previous?.publishable === status.publishable
+    ) {
+      return;
+    }
+    const next = new Map(this._rowStatus);
+    next.set(rowId, status);
+    this._rowStatus = next;
+  }
+
+  protected willUpdate(changed: Map<string, unknown>) {
+    super.willUpdate(changed);
+
+    // An answer belongs to the row that gave it. When the set of rows changes,
+    // drop the ones that are gone so a row can never inherit an answer that
+    // was never about it — leaving thread mode, in particular, hands the single
+    // row's key back to a fresh editor.
+    if (changed.has("_threadItems")) {
+      const live = new Set(this._rowIds);
+      if ([...this._rowStatus.keys()].some((id) => !live.has(id))) {
+        this._rowStatus = new Map(
+          [...this._rowStatus].filter(([id]) => live.has(id)),
+        );
+      }
+    }
+  }
+
   protected updated(changed: Map<string, unknown>) {
     super.updated(changed);
     if (this._initialSnapshot === null && this._editor) {
       this._captureInitialSnapshot();
     }
+    // The visible title used to be the dialog's accessible name. Nothing on
+    // screen needs to replace it, but a screen reader announcing an unnamed
+    // dialog does — so the name moves to an attribute, where it costs no space.
+    if (changed.has("labels") && this._dialogEl && this.labels) {
+      this._dialogEl.setAttribute("aria-label", this.labels.composeDialogLabel);
+    }
     if (
       changed.has("_addCollectionPanelOpen") &&
       this._addCollectionPanelOpen
@@ -762,6 +911,9 @@ export class JantComposeDialog extends LitElement {
     if (this._showCollection) {
       this._updateCollectionPopoverSide();
     }
+    if (this._postMetaIndex !== null) {
+      this._updatePostMetaPanelLayout();
+    }
   }
 
   reset() {
@@ -789,8 +941,10 @@ export class JantComposeDialog extends LitElement {
     this._replyToData = null;
     this._replyExpanded = false;
     this._threadItems = [];
+    this._rowStatus = new Map();
     this._focusedThreadIndex = 0;
     this._replyThreadRootId = null;
+    this._replyParentPosition = null;
     this._replyRefreshKind = null;
     this._replyRefreshId = null;
     this._slug = "";
@@ -846,7 +1000,7 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
-  async openEdit(id: string) {
+  async openEdit(id: string, options?: { restoreToast?: boolean }) {
     this.reset();
     const requestId = ++this._openEditRequestId;
     this._openingEdit = true;
@@ -905,7 +1059,10 @@ export class JantComposeDialog extends LitElement {
       if (requestId !== this._openEditRequestId) return;
 
       // Check for a local edit draft (unsaved changes from a previous session)
-      const restored = this._restoreEditDraftIfAvailable(id);
+      const restored = this._restoreEditDraftIfAvailable(
+        id,
+        options?.restoreToast,
+      );
 
       if (!restored) {
         this._editor?.populate({
@@ -943,11 +1100,30 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
+  async openDraft(id: string) {
+    const dialog = this.closest("dialog");
+    if (dialog && !dialog.open) {
+      dialog.showModal();
+    }
+    await this.updateComplete;
+    this._focusDialogShell();
+    await this._loadDraft(id);
+  }
+
   async openNew(options?: ComposeOpenOptions) {
     this.reset();
 
+    // `reset()` seeds the toggle from `titleByDefault`, which Lit only refreshes
+    // on the next render — after a reply, that value is still the reply's. Say
+    // it outright here. A restored draft overwrites it below with its own
+    // answer, which is right: that one belongs to the draft, not to the habit.
+    this._editor?.setTitleDefault(JantComposeDialog._getNoteTitleDefault());
+
     if (options?.restoreDraft !== false) {
-      await this.restoreLocalDraft();
+      await this.restoreLocalDraft({
+        notify: options?.restoreToast,
+        extraMedia: options?.restoreMedia,
+      });
     }
 
     if (options?.initialFormat) {
@@ -1006,7 +1182,11 @@ export class JantComposeDialog extends LitElement {
     this._format = options?.initialFormat ?? "note";
 
     if (options?.restoreDraft !== false) {
-      await this.restoreLocalDraft({ expectedReplyToId: id });
+      await this.restoreLocalDraft({
+        expectedReplyToId: id,
+        notify: options?.restoreToast,
+        extraMedia: options?.restoreMedia,
+      });
     }
     // Collection membership belongs to the existing Thread. Reply compose
     // must not restore or submit stale per-compose Collection state.
@@ -1016,6 +1196,30 @@ export class JantComposeDialog extends LitElement {
     await this.updateComplete;
     this._editor?.focusInput();
     this._captureInitialSnapshot();
+    // Deliberately not awaited: this only feeds the `3/3` marker, and blocking
+    // the composer's open on it would trade a visible delay for a decoration.
+    // The marker stays hidden until the number is known rather than counting
+    // from 1 and then correcting itself.
+    void this._loadReplyParentPosition(id);
+  }
+
+  /**
+   * Read back where the parent sits in its own chain, so the editors below it
+   * can be numbered from there. Failure is silent — a missing marker is a much
+   * smaller problem than a wrong one.
+   */
+  private async _loadReplyParentPosition(replyToId: string) {
+    try {
+      const res = await fetch(`/api/posts/${replyToId}`);
+      if (!res.ok) return;
+      const post = (await res.json()) as ComposePostResponse;
+      // The composer may have been closed, or pointed at another post, while
+      // this was in flight.
+      if (this._replyToId !== replyToId) return;
+      this._replyParentPosition = post.threadPosition ?? null;
+    } catch {
+      // Leave the marker hidden.
+    }
   }
 
   /**
@@ -1030,6 +1234,7 @@ export class JantComposeDialog extends LitElement {
       this._replyThreadRootId = (post.replyToId as string | null)
         ? (post.threadId as string)
         : (post.id as string);
+      this._replyParentPosition = post.threadPosition ?? null;
       const dateText = post.publishedAt
         ? new Date(post.publishedAt * 1000).toLocaleDateString(undefined, {
             month: "short",
@@ -1103,39 +1308,16 @@ export class JantComposeDialog extends LitElement {
     return false;
   }
 
+  /**
+   * Whether any row holds something worth keeping.
+   *
+   * Collection selection alone isn't content — it's metadata that only matters
+   * when paired with actual post content.
+   */
   private _hasContent(): boolean {
-    if (this._threadItems.length > 0) {
-      // Thread mode: check the first editor for content
-      const firstEditor = this.querySelector<JantComposeEditor>(
-        "jant-compose-editor",
-      );
-      if (!firstEditor) return false;
-      const data = firstEditor.getData();
-      return (
-        !!data.body ||
-        !!data.title.trim() ||
-        !!data.url.trim() ||
-        !!data.quoteText.trim() ||
-        data.attachments.length > 0
-      );
-    }
-
-    const editor = this._editor;
-    if (!editor) return false;
-
-    const data = editor.getData();
-    if (data.body) return true;
-    if (data.title.trim()) return true;
-    if (data.url.trim()) return true;
-    if (data.quoteText.trim()) return true;
-    if (data.quoteAuthor.trim()) return true;
-    if (data.attachedTexts.length > 0) return true;
-    if (data.rating > 0) return true;
-    if (data.attachments.length > 0) return true;
-    // Collection selection alone isn't content — it's metadata that
-    // only matters when paired with actual post content above.
-
-    return false;
+    return this._rowIds.some(
+      (id) => this._rowStatus.get(id)?.hasContent === true,
+    );
   }
 
   private _buildSnapshot(): ComposeStateSnapshot | null {
@@ -1144,10 +1326,8 @@ export class JantComposeDialog extends LitElement {
 
     const editorData = editor.getData();
     const attachedTexts = editor.getEffectiveAttachedTexts();
-    const showTitle =
-      this._format === "note" && editorData.title.trim().length > 0
-        ? editor._showTitle
-        : false;
+    // No `showTitle` here: a hidden title reads back as an empty one, so the
+    // toggle is already visible in `title`.
     const showRating = editorData.rating > 0 ? editor._showRating : false;
 
     return {
@@ -1163,7 +1343,6 @@ export class JantComposeDialog extends LitElement {
       quoteText: editorData.quoteText,
       quoteAuthor: editorData.quoteAuthor,
       rating: editorData.rating,
-      showTitle,
       showRating,
       attachments: editor._attachments.map((attachment) => ({
         clientId: attachment.clientId,
@@ -1366,8 +1545,10 @@ export class JantComposeDialog extends LitElement {
       quoteText: editorData.quoteText,
       quoteAuthor: editorData.quoteAuthor,
       status,
-      slug: isRoot ? this._slug.trim() || undefined : undefined,
-      publishedAt: isRoot ? this._getPublishedAtSubmitValue(status) : undefined,
+      slug: this._getPostSlug(index).trim() || undefined,
+      // Every post carries its own date; a reply that left it blank sends
+      // undefined and the server fills it from the root.
+      publishedAt: this._getPostPublishedAtSubmitValue(index, status),
       visibility: isRoot
         ? this._visibilityLocked
           ? undefined
@@ -1377,7 +1558,10 @@ export class JantComposeDialog extends LitElement {
       collectionIds: isRoot && !this._replyToId ? [...this._collectionIds] : [],
       attachments: orderedAttachments,
       replyToId: isRoot ? (this._replyToId ?? undefined) : undefined,
-      quietReply: isRoot ? this._quietReply || undefined : undefined,
+      quietReply:
+        isRoot && this._canReplyQuietly()
+          ? this._quietReply || undefined
+          : undefined,
       replyThreadRootId: isRoot
         ? (this._replyThreadRootId ?? undefined)
         : undefined,
@@ -1448,8 +1632,11 @@ export class JantComposeDialog extends LitElement {
       collectionIds: this._replyToId ? [] : [...this._collectionIds],
       attachments: orderedAttachments,
       editPostId: this._editPostId ?? this._draftSourceId ?? undefined,
+      draftSourceId: this._draftSourceId ?? undefined,
       replyToId: this._replyToId ?? undefined,
-      quietReply: this._quietReply || undefined,
+      quietReply: this._canReplyQuietly()
+        ? this._quietReply || undefined
+        : undefined,
       replyThreadRootId: this._replyThreadRootId ?? undefined,
       replyRefreshKind: this._replyRefreshKind ?? undefined,
       replyRefreshId: this._replyRefreshId ?? undefined,
@@ -1457,17 +1644,24 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _focusBlockedSubmitField(status: "published" | "draft"): boolean {
-    if (
-      status === "published" &&
-      this._getPublishedAtValidationMessage() !== null
-    ) {
-      this._revealPublishedAtField();
-      return true;
+    if (status === "published") {
+      const posts = Math.max(1, this._threadItems.length);
+      for (let i = 0; i < posts; i++) {
+        if (this._getPostPublishedAtValidationMessage(i) !== null) {
+          this._revealPublishedAtField(i);
+          return true;
+        }
+      }
     }
 
-    if (this._getSlugValidationMessage()) {
-      this._revealSlugField();
-      return true;
+    {
+      const posts = Math.max(1, this._threadItems.length);
+      for (let i = 0; i < posts; i++) {
+        if (this._getPostSlugValidationMessage(i)) {
+          this._revealSlugField(i);
+          return true;
+        }
+      }
     }
 
     // ── Thread mode: validate each editor against its own format ──────
@@ -1566,6 +1760,7 @@ export class JantComposeDialog extends LitElement {
           detail: {
             ...threadPosts[0],
             editPostId: this._editPostId ?? this._draftSourceId ?? undefined,
+            draftSourceId: this._draftSourceId ?? undefined,
             threadPosts,
             pendingAttachments: allPending,
           },
@@ -1975,7 +2170,9 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _scheduleSuggestedSlugRefresh(immediate = false) {
-    if (!this._showPublishPanel || this._hasManualSlug()) return;
+    // Only worth fetching while the slug UI is on screen — which is the post's
+    // own panel now, not the publish panel.
+    if (this._postMetaIndex !== 0 || this._hasManualSlug()) return;
     if (!this._canSuggestSlug()) {
       this._slugSuggestRequestId += 1;
       this._suggestedSlug = "";
@@ -2030,7 +2227,7 @@ export class JantComposeDialog extends LitElement {
       if (
         requestId !== this._slugSuggestRequestId ||
         this._hasManualSlug() ||
-        !this._showPublishPanel
+        this._postMetaIndex !== 0
       ) {
         return;
       }
@@ -2045,9 +2242,9 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
-  private _scheduleSlugAvailabilityCheck() {
-    if (!this._hasManualSlug()) {
-      this._slugTaken = false;
+  private _scheduleSlugAvailabilityCheck(index = 0) {
+    if (!this._hasPostManualSlug(index)) {
+      this._setPostSlugTaken(index, false);
       this._slugCheckLoading = false;
       return;
     }
@@ -2057,21 +2254,20 @@ export class JantComposeDialog extends LitElement {
       this._slugCheckTimer = null;
     }
 
-    const syncError = this._getSlugSyncValidationMessage();
-    if (syncError) {
-      this._slugTaken = false;
+    if (this._getPostSlugSyncValidationMessage(index)) {
+      this._setPostSlugTaken(index, false);
       this._slugCheckLoading = false;
       return;
     }
 
     this._slugCheckLoading = true;
-    const slug = this._slug.trim();
+    const slug = this._getPostSlug(index).trim();
     this._slugCheckTimer = setTimeout(() => {
-      void this._checkSlugAvailability(slug);
+      void this._checkSlugAvailability(slug, index);
     }, 250);
   }
 
-  private async _checkSlugAvailability(slug: string) {
+  private async _checkSlugAvailability(slug: string, index = 0) {
     this._slugCheckTimer = null;
     const requestId = ++this._slugCheckRequestId;
 
@@ -2088,11 +2284,11 @@ export class JantComposeDialog extends LitElement {
       const json = (await res.json()) as { available?: boolean };
       if (
         requestId !== this._slugCheckRequestId ||
-        this._slug.trim() !== slug
+        this._getPostSlug(index).trim() !== slug
       ) {
         return;
       }
-      this._slugTaken = json.available === false;
+      this._setPostSlugTaken(index, json.available === false);
     } catch {
       // Server-side create/update remains the final authority.
     } finally {
@@ -2114,9 +2310,9 @@ export class JantComposeDialog extends LitElement {
     });
   }
 
-  private _resetCustomSlug() {
-    this._slug = "";
-    this._slugTaken = false;
+  private _resetCustomSlug(index = 0) {
+    this._setPostSlug(index, "");
+    this._setPostSlugTaken(index, false);
     this._slugCheckLoading = false;
     this._scheduleSuggestedSlugRefresh(true);
     this.updateComplete.then(() => {
@@ -2140,6 +2336,10 @@ export class JantComposeDialog extends LitElement {
       "jant:compose-content-changed",
       this._onContentChanged,
     );
+    this.addEventListener(
+      "jant:title-toggle",
+      this._handleTitleToggle as EventListener,
+    );
     this.addEventListener("jant:file-picker-open", this._handleFilePickerOpen);
     this.addEventListener(
       "jant:file-picker-close",
@@ -2162,6 +2362,10 @@ export class JantComposeDialog extends LitElement {
     window.addEventListener("scroll", this._handleViewportChange, {
       passive: true,
     });
+    document.addEventListener("scroll", this._handleAnyScroll, {
+      capture: true,
+      passive: true,
+    });
     globalThis.visualViewport?.addEventListener(
       "resize",
       this._handleViewportChange,
@@ -2197,6 +2401,10 @@ export class JantComposeDialog extends LitElement {
       "jant:compose-content-changed",
       this._onContentChanged,
     );
+    this.removeEventListener(
+      "jant:title-toggle",
+      this._handleTitleToggle as EventListener,
+    );
     this.removeEventListener(
       "jant:file-picker-open",
       this._handleFilePickerOpen,
@@ -2217,6 +2425,9 @@ export class JantComposeDialog extends LitElement {
     window.removeEventListener("beforeunload", this._onBeforeUnload);
     window.removeEventListener("resize", this._handleViewportChange);
     window.removeEventListener("scroll", this._handleViewportChange);
+    document.removeEventListener("scroll", this._handleAnyScroll, {
+      capture: true,
+    });
     globalThis.visualViewport?.removeEventListener(
       "resize",
       this._handleViewportChange,
@@ -2273,6 +2484,20 @@ export class JantComposeDialog extends LitElement {
     if (this._showCollection) {
       this.updateComplete.then(() => this._updateCollectionPopoverSide());
     }
+    if (this._postMetaIndex !== null) {
+      this.updateComplete.then(() => this._updatePostMetaPanelLayout());
+    }
+  };
+
+  /**
+   * The date/permalink panel is pinned to a pill inside `.compose-scroll`, and
+   * a `scroll` event on that box never reaches `window` — it doesn't bubble.
+   * Capture phase catches it wherever it fires, so the panel travels with its
+   * pill instead of hanging in place once the composer moves under it.
+   */
+  private _handleAnyScroll = () => {
+    if (this._postMetaIndex === null) return;
+    this._updatePostMetaPanelLayout();
   };
 
   private _handleDialogCancel = (e: Event) => {
@@ -2397,6 +2622,12 @@ export class JantComposeDialog extends LitElement {
       return true;
     }
 
+    if (this._postMetaIndex !== null) {
+      // `_closePostMeta` hands focus back to the post itself.
+      this._closePostMeta();
+      return true;
+    }
+
     if (this._altPanelOpen) {
       this._closeAltPanel();
       this._restorePageEditorFocus();
@@ -2928,9 +3159,16 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _getDraftPreview(draft: DraftItem): string | null {
-    if (draft.bodyText) return draft.bodyText;
+    if (draft.format === "quote") {
+      if (draft.quoteText) return draft.quoteText;
+      if (draft.title) return draft.title;
+      if (draft.bodyText) return draft.bodyText;
+      if (draft.url) return draft.url;
+      return null;
+    }
+
     if (draft.title) return draft.title;
-    if (draft.quoteText) return draft.quoteText;
+    if (draft.bodyText) return draft.bodyText;
     if (draft.url) return draft.url;
     return null;
   }
@@ -2966,6 +3204,18 @@ export class JantComposeDialog extends LitElement {
     }
   };
 
+  /**
+   * Remember the note title toggle for the next new note. Same guard as
+   * `_setVisibility`: an edit, a loaded draft, or a reply answers for that one
+   * post, not for how this author writes. Thread rows are excluded too — the
+   * toggle there answers for a position in a thread.
+   */
+  private _handleTitleToggle = (e: CustomEvent<{ showTitle: boolean }>) => {
+    if (this._editPostId || this._draftSourceId || this._replyToId) return;
+    if ((e.target as JantComposeEditor | null)?.threadItem) return;
+    JantComposeDialog._setNoteTitleDefault(e.detail.showTitle);
+  };
+
   private _cancelDraftSaveTimer() {
     if (this._draftSaveTimer !== null) {
       clearTimeout(this._draftSaveTimer);
@@ -3028,6 +3278,9 @@ export class JantComposeDialog extends LitElement {
           const data = editor.getData();
           return {
             format: item.format,
+            publishedAtInput: item.publishedAtInput,
+            publishedAtTimeMinutes: item.publishedAtTimeMinutes,
+            slug: item.slug,
             title: data.title,
             bodyJson: editor.getNormalizedBodyJson(),
             url: data.url,
@@ -3040,6 +3293,9 @@ export class JantComposeDialog extends LitElement {
               summary: t.summary,
             })),
             attachmentOrder: [...data.attachmentOrder],
+            mediaAttachments: JantComposeDialog._mediaSnapshotFromAttachments(
+              data.attachments,
+            ),
           };
         })
         .filter((item): item is NonNullable<typeof item> => item !== null);
@@ -3097,6 +3353,7 @@ export class JantComposeDialog extends LitElement {
       !!data.quoteText.trim() ||
       !!data.quoteAuthor.trim() ||
       data.rating > 0 ||
+      data.attachments.length > 0 ||
       data.attachedTexts.length > 0;
 
     if (!hasContent) {
@@ -3116,10 +3373,10 @@ export class JantComposeDialog extends LitElement {
       publishedAtTimeMinutes: this._publishedAtTimeMinutes,
       visibility: this._visibility,
       rating: data.rating,
-      showTitle:
-        this._format === "note" && data.title.trim().length > 0
-          ? editor._showTitle
-          : false,
+      // The toggle as it stands, not "does a title exist" — restoring a draft
+      // should put the editor back the way it was left, including an open but
+      // still-empty title field.
+      showTitle: this._format === "note" ? editor._showTitle : false,
       showRating: data.rating > 0 ? editor._showRating : false,
       collectionIds: [...this._collectionIds],
       replyToId: this._replyToId,
@@ -3130,6 +3387,9 @@ export class JantComposeDialog extends LitElement {
         summary: t.summary,
       })),
       attachmentOrder: [...data.attachmentOrder],
+      mediaAttachments: JantComposeDialog._mediaSnapshotFromAttachments(
+        data.attachments,
+      ),
       savedAt: Date.now(),
     };
 
@@ -3158,7 +3418,67 @@ export class JantComposeDialog extends LitElement {
     );
   }
 
-  async restoreLocalDraft(options?: { expectedReplyToId?: string }) {
+  /**
+   * Snapshot attachments whose upload completed. Only these can be restored
+   * later — for the rest the bytes exist nowhere but in-memory.
+   */
+  private static _mediaSnapshotFromAttachments(
+    attachments: ComposeAttachment[],
+  ): LocalDraftMedia[] {
+    return attachments.flatMap((a) =>
+      a.status === "done" && a.mediaId && a.remoteUrl
+        ? [
+            {
+              clientId: a.clientId,
+              mediaId: a.mediaId,
+              url: a.remoteUrl,
+              mimeType: a.file.type,
+              name: a.file.name || undefined,
+              alt: a.alt || undefined,
+              summary: a.summary,
+              chars: a.chars,
+            },
+          ]
+        : [],
+    );
+  }
+
+  /** Convert stored media snapshots into `populate()` media entries. */
+  private static _restoredMediaToPopulate(media: LocalDraftMedia[]) {
+    return media.map((m) => ({
+      id: m.mediaId,
+      clientId: m.clientId,
+      previewUrl: m.url,
+      mimeType: m.mimeType,
+      originalName: m.name,
+      alt: m.alt,
+      summary: m.summary ?? undefined,
+      chars: m.chars ?? undefined,
+    }));
+  }
+
+  /**
+   * Merge a draft's media snapshot with bridge-supplied completed uploads.
+   * Bridge entries win: they include uploads that finished after the dialog
+   * closed, which the autosaved snapshot predates.
+   */
+  private static _mergeRestoredMedia(
+    snapshot: LocalDraftMedia[] | undefined,
+    extra: LocalDraftMedia[] | undefined,
+  ): Map<string, LocalDraftMedia> {
+    const merged = new Map<string, LocalDraftMedia>();
+    for (const m of snapshot ?? []) merged.set(m.clientId, m);
+    for (const m of extra ?? []) merged.set(m.clientId, m);
+    return merged;
+  }
+
+  async restoreLocalDraft(options?: {
+    expectedReplyToId?: string;
+    /** false suppresses the "Draft restored." toast */
+    notify?: boolean;
+    /** Completed uploads known to the bridge at failure time */
+    extraMedia?: LocalDraftMedia[];
+  }) {
     // Don't restore if already in edit or draft-load mode
     if (this._editPostId || this._draftSourceId) return;
     // Don't restore if the editor already has content (e.g. reopened dialog)
@@ -3219,6 +3539,9 @@ export class JantComposeDialog extends LitElement {
       this._threadItems = draft.threadItems.map((item) => ({
         id: randomUUID(),
         format: item.format,
+        publishedAtInput: item.publishedAtInput,
+        publishedAtTimeMinutes: item.publishedAtTimeMinutes,
+        slug: item.slug,
       }));
       this._focusedThreadIndex = 0;
 
@@ -3245,6 +3568,18 @@ export class JantComposeDialog extends LitElement {
           ];
         });
 
+        // Bridge entries are a flat list — this item owns the clientIds in
+        // its own attachmentOrder.
+        const itemExtraMedia = options?.extraMedia?.filter((m) =>
+          item.attachmentOrder?.includes(m.clientId),
+        );
+        const media = [
+          ...JantComposeDialog._mergeRestoredMedia(
+            item.mediaAttachments,
+            itemExtraMedia,
+          ).values(),
+        ];
+
         editor.populate({
           format: item.format,
           title: item.title || undefined,
@@ -3252,6 +3587,9 @@ export class JantComposeDialog extends LitElement {
           url: item.url || undefined,
           quoteText: item.quoteText || undefined,
           quoteAuthor: item.quoteAuthor || undefined,
+          media: media.length
+            ? JantComposeDialog._restoredMediaToPopulate(media)
+            : undefined,
           textAttachments: textAttachments?.length
             ? textAttachments
             : undefined,
@@ -3260,7 +3598,7 @@ export class JantComposeDialog extends LitElement {
       }
 
       this._draftRestored = true;
-      showToast(this.labels.draftRestored);
+      if (options?.notify !== false) showToast(this.labels.draftRestored);
       globalThis.requestAnimationFrame(() => {
         this._captureInitialSnapshot();
       });
@@ -3285,6 +3623,13 @@ export class JantComposeDialog extends LitElement {
       ];
     });
 
+    const media = [
+      ...JantComposeDialog._mergeRestoredMedia(
+        draft.mediaAttachments,
+        options?.extraMedia,
+      ).values(),
+    ];
+
     this._editor?.populate({
       format: draft.format,
       title: draft.title || undefined,
@@ -3295,12 +3640,15 @@ export class JantComposeDialog extends LitElement {
       rating: draft.rating || undefined,
       showTitle: draft.showTitle,
       showRating: draft.showRating,
+      media: media.length
+        ? JantComposeDialog._restoredMediaToPopulate(media)
+        : undefined,
       textAttachments: textAttachments?.length ? textAttachments : undefined,
       attachmentOrder: draft.attachmentOrder,
     });
 
     this._draftRestored = true;
-    showToast(this.labels.draftRestored);
+    if (options?.notify !== false) showToast(this.labels.draftRestored);
     globalThis.requestAnimationFrame(() => {
       this._captureInitialSnapshot();
     });
@@ -3310,7 +3658,10 @@ export class JantComposeDialog extends LitElement {
    * Check for a local edit draft for the given post ID and restore it if valid.
    * Returns true if a draft was restored, false otherwise.
    */
-  private _restoreEditDraftIfAvailable(postId: string): boolean {
+  private _restoreEditDraftIfAvailable(
+    postId: string,
+    notify?: boolean,
+  ): boolean {
     const key = JantComposeDialog._EDIT_DRAFT_KEY_PREFIX + postId;
 
     let raw: string | null;
@@ -3373,7 +3724,7 @@ export class JantComposeDialog extends LitElement {
     });
 
     this._draftRestored = true;
-    showToast(this.labels.draftRestored);
+    if (notify !== false) showToast(this.labels.draftRestored);
     return true;
   }
 
@@ -3455,11 +3806,12 @@ export class JantComposeDialog extends LitElement {
 
   private _renderDraftItem(draft: DraftItem) {
     const preview = this._getDraftPreview(draft);
+    const formatLabel = this.labels[draft.format];
     const menuId = `draft-actions-${draft.id}`;
     const menuOpen = this._draftMenuOpenId === draft.id;
 
     return html`
-      <div class="compose-draft-item" @click=${() => this._loadDraft(draft.id)}>
+      <div class="compose-draft-item" @click=${() => this.openDraft(draft.id)}>
         <div class="compose-draft-content">
           ${preview
             ? html`<div class="compose-draft-preview">${preview}</div>`
@@ -3469,6 +3821,8 @@ export class JantComposeDialog extends LitElement {
                 Empty draft
               </div>`}
           <div class="compose-draft-meta">
+            <span class="compose-draft-format">${formatLabel}</span>
+            <span aria-hidden="true">·</span>
             ${this._formatDraftDate(draft.updatedAt)}
           </div>
         </div>
@@ -3649,12 +4003,6 @@ export class JantComposeDialog extends LitElement {
     // already pending from loading the post.
     this._cancelDraftSaveTimer();
     this._format = target;
-    // Sync the editor's format this tick. Lit commits the `.format` binding
-    // only after this render returns, so `_canPublish()` (which reads
-    // `editor.getData()`, keyed on the editor's format) would otherwise compute
-    // against the stale format for one render and leave the submit button
-    // wrongly disabled.
-    if (editor) editor.format = target;
     this._showPublishPanel = false;
     if (this._shouldAutofocusFormatInput()) {
       globalThis.requestAnimationFrame(() => this._editor?.focusInput());
@@ -3663,82 +4011,40 @@ export class JantComposeDialog extends LitElement {
 
   // ── Render helpers ────────────────────────────────────────────────
 
-  private _renderHeader() {
-    const formats = JantComposeDialog._FORMATS;
-    const formatLabels: Record<ComposeFormat, string> = {
-      note: this.labels.note,
-      link: this.labels.link,
-      quote: this.labels.quote,
-    };
-    const draftButtonLabel = this._hasContent()
-      ? this.labels.saveAsDraft
-      : this.labels.drafts;
-    // Format selector sits inline (above each post) whenever more than one post
-    // is on screen — a reply (parent shown above) or a multi-post thread. The
-    // header then shows a plain title instead of the format selector.
-    const isReply = !!(this._replyToId && this._replyToData);
-    const showTitle = isReply || this._threadItems.length > 0;
-    const headerTitle = this._editPostId
-      ? this.labels.editTitle
-      : isReply
-        ? this.labels.replyTitle
-        : this.labels.newThread;
+  /**
+   * The way out, sitting at the end of the post header row where a thread post
+   * keeps its own ×. Compose has no title bar to hang a Cancel off any more:
+   * "New post" restated what an empty composer already says, and Publish
+   * already reads "Update" when editing, so the row was carrying nothing but
+   * two controls that belong closer to the work.
+   *
+   * A thread's posts each own that slot for removing themselves, so there the
+   * exit lives in the options panel instead — see `_renderCloseComposeRow`.
+   */
+  private _renderCloseComposeControl() {
+    if (this.pageMode || this._threadItems.length > 0) return nothing;
 
     return html`
-      <header class="compose-dialog-header">
-        <button
-          type="button"
-          class="compose-dialog-cancel"
-          @click=${() => this.requestClose()}
+      <button
+        type="button"
+        class="compose-close-btn"
+        aria-label=${this.labels.cancel}
+        title=${this.labels.cancel}
+        @click=${() => this.requestClose()}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          aria-hidden="true"
         >
-          ${this.labels.cancel}
-        </button>
-
-        <div class="compose-dialog-header-center">
-          ${showTitle
-            ? html`<span class="compose-dialog-title">${headerTitle}</span>`
-            : html`
-                <div class="compose-segmented">
-                  <div
-                    class=${classMap({
-                      "compose-format-pill": true,
-                      "compose-format-pill-link": this._format === "link",
-                      "compose-format-pill-quote": this._format === "quote",
-                    })}
-                  ></div>
-                  ${formats.map(
-                    (f) => html`
-                      <button
-                        type="button"
-                        class=${classMap({
-                          "compose-segmented-item": true,
-                          "compose-segmented-item-active": this._format === f,
-                        })}
-                        @click=${() => this._switchFormat(f)}
-                      >
-                        ${formatLabels[f]}
-                      </button>
-                    `,
-                  )}
-                </div>
-              `}
-        </div>
-
-        <div class="compose-dialog-header-actions">
-          ${this._editPostId
-            ? nothing
-            : html`<button
-                type="button"
-                class="compose-dialog-header-btn compose-dialog-draft-btn"
-                aria-label=${draftButtonLabel}
-                title=${draftButtonLabel}
-                ?disabled=${this._loading}
-                @click=${() => this._handleDraftButtonClick()}
-              >
-                ${renderComposeHeaderIcon(COMPOSE_DIALOG_HEADER_ICONS.drafts)}
-              </button>`}
-        </div>
-      </header>
+          <path d="M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5" />
+        </svg>
+      </button>
     `;
   }
 
@@ -3795,17 +4101,13 @@ export class JantComposeDialog extends LitElement {
               }
             }}
           >
-            <span class="compose-collection-trigger-icon">
-              ${renderComposeCollectionPickerIcon(
-                COMPOSE_COLLECTION_PICKER_ICONS.collection,
-                "compose-collection-trigger-svg",
-              )}
-            </span>
-            <span class="compose-collection-label">${selectedLabel}</span>
+            <!-- No chevron: the glyph already says "picker", and a second one
+                 pointing down only made the control wider. -->
             ${renderComposeCollectionPickerIcon(
-              COMPOSE_COLLECTION_PICKER_ICONS.chevron,
-              "compose-collection-chevron",
+              COMPOSE_COLLECTION_PICKER_ICONS.collection,
+              "compose-collection-trigger-svg",
             )}
+            <span class="compose-collection-label">${selectedLabel}</span>
           </button>
           <div
             class="compose-collection-popover"
@@ -4375,56 +4677,24 @@ export class JantComposeDialog extends LitElement {
     };
   }
 
-  private _getSlugSummary(): ComposePublishSummaryChip | null {
-    const currentSlug = this._slug.trim();
-
-    if (currentSlug && this._getSlugValidationMessage() !== null) {
-      return null;
-    }
-
-    if (this._editPostId || this._draftSourceId) {
-      if (currentSlug === this._initialSlug) {
-        return null;
-      }
-
-      if (!currentSlug) {
-        return {
-          kind: "slug",
-          text: this.labels.publishSlugSummaryAuto,
-          actionLabel: this.labels.publishSlugSummaryAction,
-          value: currentSlug,
-        };
-      }
-    }
-
-    if (!currentSlug) return null;
-
-    return {
-      kind: "slug",
-      text: `/${currentSlug}`,
-      actionLabel: this.labels.publishSlugSummaryAction,
-      value: currentSlug,
-    };
-  }
-
-  private _getPublishSummaryChips(): ComposePublishSummaryChip[] {
-    const chips: ComposePublishSummaryChip[] = [];
-    const publishedAtSummary = this._getPublishedAtSummary();
-    if (publishedAtSummary !== null) {
-      chips.push({
-        kind: "publishedAt",
-        text: publishedAtSummary.text,
-        actionLabel: this.labels.publishDateSummaryAction,
-        value: publishedAtSummary.input,
-      });
-    }
+  private _getPostPublishedAtSubmitValue(
+    index: number,
+    status: "published" | "draft",
+  ): number | undefined {
+    if (index === 0) return this._getPublishedAtSubmitValue(status);
+    if (status === "draft") return undefined;
 
-    const slugSummary = this._getSlugSummary();
-    if (slugSummary !== null) {
-      chips.push(slugSummary);
-    }
+    const item = this._threadItems[index];
+    const input = item?.publishedAtInput ?? "";
+    if (!input.trim()) return undefined;
 
-    return chips;
+    const timestamp = buildTimestampFromLocalDate(
+      input,
+      item?.publishedAtTimeMinutes ??
+        getTimestampTimeMinutes(this._getCurrentTimestamp()),
+    );
+    if (timestamp === null) return undefined;
+    return Math.min(timestamp, this._getCurrentTimestamp());
   }
 
   private _getPublishedAtSubmitValue(
@@ -4460,66 +4730,33 @@ export class JantComposeDialog extends LitElement {
     return undefined;
   }
 
-  private _openPublishPanelAndFocus(selector: string) {
+  private _openPublishPanelAndFocus(selector: string, index = 0) {
     this._showCollection = false;
     this._collectionSearch = "";
-    this._showPublishPanel = true;
+    this._showPublishPanel = false;
+    this._postMetaIndex = index;
     this._confirmPanelOpen = false;
     this._scheduleSuggestedSlugRefresh(true);
-    this.updateComplete.then(() => {
-      this.querySelector<HTMLElement>(selector)?.focus();
-    });
+    this._placeAndFocusPostMetaPanel(selector);
   }
 
-  private _revealSlugField() {
-    this._openPublishPanelAndFocus(".compose-publish-slug-input");
+  private _revealSlugField(index = 0) {
+    this._openPublishPanelAndFocus(".compose-publish-slug-input", index);
   }
 
-  private _revealPublishedAtField() {
-    this._openPublishPanelAndFocus(".compose-publish-date-input");
+  private _revealPublishedAtField(index = 0) {
+    this._openPublishPanelAndFocus(".compose-publish-date-input", index);
   }
 
+  /** Every row ready, and every row's own date and permalink accepted. */
   private _canPublish(): boolean {
     if (this._loading) return false;
-    if (this._getPublishedAtValidationMessage()) return false;
-    if (this._getSlugValidationMessage()) return false;
-
-    if (this._threadItems.length > 0) {
-      // Thread mode: validate all editors
-      const editors = Array.from(
-        this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
-      );
-      if (editors.length === 0) return false;
-      for (const editor of editors) {
-        if (editor.getUrlValidationMessage()) return false;
-        if (editor.getLinkTitleValidationMessage()) return false;
-      }
-      // Every editor in the thread must have content
-      return editors.every((editor) => {
-        const data = editor.getData();
-        return (
-          !!data.body ||
-          !!data.title.trim() ||
-          !!data.url.trim() ||
-          !!data.quoteText.trim() ||
-          data.attachments.length > 0
-        );
-      });
-    }
-
-    const editor = this._editor;
-    if (!editor) return false;
-    if (editor.getUrlValidationMessage()) return false;
-    if (editor.getLinkTitleValidationMessage()) return false;
-
-    const data = editor.getData();
-    if (this._format === "link") {
-      return data.url.trim().length > 0;
-    }
-    if (this._format === "quote") {
-      return data.quoteText.trim().length > 0;
+    const rowIds = this._rowIds;
+    for (let i = 0; i < rowIds.length; i++) {
+      if (this._getPostPublishedAtValidationMessage(i)) return false;
+      if (this._getPostSlugValidationMessage(i)) return false;
     }
-    return this._hasContent();
+    return rowIds.every((id) => this._rowStatus.get(id)?.publishable === true);
   }
 
   private _focusPublishPanelInitialField() {
@@ -4551,6 +4788,9 @@ export class JantComposeDialog extends LitElement {
   private _setVisibility(visibility: ComposeVisibility) {
     if (this._visibilityLocked) return;
     this._visibility = visibility;
+    // Choosing is the whole job of the panel, so dismiss it. Nothing here
+    // needs confirming — a radio selection is not a form.
+    if (this._showPublishPanel) this._closePublishPanel(true);
     if (!this._editPostId && !this._draftSourceId && !this._replyToId) {
       JantComposeDialog._lastNewPostVisibility = visibility;
       if (this._sourceCollectionId) {
@@ -4562,26 +4802,28 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
-  private _onSlugInput(e: Event) {
+  private _onSlugInput(e: Event, index = 0) {
     const value = (e.target as HTMLInputElement).value;
-    this._slug = value.toLowerCase();
-    this._slugTaken = false;
+    this._setPostSlug(index, value.toLowerCase());
+    this._setPostSlugTaken(index, false);
     this._slugCheckLoading = false;
-    if (this._hasManualSlug()) {
-      this._scheduleSlugAvailabilityCheck();
+    if (this._hasPostManualSlug(index)) {
+      this._scheduleSlugAvailabilityCheck(index);
       return;
     }
     this._scheduleSuggestedSlugRefresh();
   }
 
-  private _onPublishedAtInput(e: Event) {
-    this._publishedAtInput = (e.target as HTMLInputElement).value;
-  }
-
-  private _resetPublishedAt() {
+  private _resetPublishedAt(index = 0) {
     const currentTimestamp = this._getCurrentTimestamp();
-    this._publishedAtInput = toLocalDateInputValue(currentTimestamp);
-    this._publishedAtTimeMinutes = getTimestampTimeMinutes(currentTimestamp);
+    this._setPostPublishedAtInput(
+      index,
+      toLocalDateInputValue(currentTimestamp),
+    );
+    this._setPostPublishedAtTimeMinutes(
+      index,
+      getTimestampTimeMinutes(currentTimestamp),
+    );
     this.updateComplete.then(() => {
       this.querySelector<HTMLInputElement>(
         ".compose-publish-date-input",
@@ -4607,9 +4849,15 @@ export class JantComposeDialog extends LitElement {
     );
   }
 
-  private _renderPublishVisibilityChip(
+  /**
+   * One choice in the options sheet: title, one-line explanation, and a check
+   * on the selected row. Every option carries its own hint so they can be
+   * compared before choosing, which a single hint under a chip group can't do.
+   */
+  private _renderVisibilityRow(
     visibility: ComposeVisibility,
     label: string,
+    hint: string,
   ) {
     const selected = this._visibility === visibility;
 
@@ -4617,8 +4865,8 @@ export class JantComposeDialog extends LitElement {
       <button
         type="button"
         class=${classMap({
-          "compose-publish-chip": true,
-          "compose-publish-chip-selected": selected,
+          "compose-sheet-row": true,
+          "compose-sheet-row-selected": selected,
         })}
         role="radio"
         aria-checked=${selected ? "true" : "false"}
@@ -4626,168 +4874,212 @@ export class JantComposeDialog extends LitElement {
         @click=${() => this._setVisibility(visibility)}
       >
         ${this._renderVisibilityIcon(visibility)}
-        <span class="compose-publish-chip-label">${label}</span>
+        <span class="compose-sheet-main">
+          <span class="compose-sheet-title">${label}</span>
+          <span class="compose-sheet-sub">${hint}</span>
+        </span>
+        ${selected
+          ? html`<span class="compose-sheet-check" aria-hidden="true">
+              ${renderComposePublishActionIcon(
+                COMPOSE_PUBLISH_ACTION_ICONS.check,
+                "compose-sheet-check-icon",
+              )}
+            </span>`
+          : nothing}
       </button>
     `;
   }
 
-  private _getVisibilityHint(): string {
-    switch (this._visibility) {
-      case "public":
-        return this.labels.publishVisibilityPublicHint;
-      case "latest_hidden":
-        return this.labels.publishVisibilityHiddenFromLatestHint;
-      case "private":
-        return this.labels.publishVisibilityPrivateHint;
-    }
+  /**
+   * The label above a field, with its reset on the right. The reset only shows
+   * once there is something to reset, so the default state is a bare label.
+   */
+  private _renderMetaFieldHead(label: string, reset: unknown) {
+    return html`
+      <div class="compose-meta-field-head">
+        <span class="compose-meta-label">${label}</span>
+        ${reset}
+      </div>
+    `;
   }
 
-  private _renderPublishDateSection() {
-    const publishedAtError = this._getPublishedAtValidationMessage();
+  /**
+   * Chrome opens the calendar only from its own indicator glyph — a ~13px
+   * target that reads as a browser default next to everything else in this
+   * panel, and that other engines place differently or not at all. The
+   * indicator is hidden in CSS and this button drives the same picker through
+   * `showPicker()`, so there is one target, it is ours, and it is the height of
+   * the field. Typing a date into the field still works either way, which is
+   * why the button is the only thing that opens the picker: taking over the
+   * whole field would put the calendar in front of anyone reaching for the
+   * keyboard.
+   */
+  private _openDatePicker(index: number) {
+    const fields = this.querySelectorAll<HTMLInputElement>(
+      ".compose-publish-date-input",
+    );
+    // One panel is open at a time, so the panel's own field is the only one in
+    // the DOM; `index` is kept for the thread case if that ever changes.
+    const input = fields[index] ?? fields[0];
+    if (!input) return;
 
-    return html`
-      <section class="compose-publish-section">
-        <div class="compose-publish-section-header">
-          <div class="compose-publish-section-copy">
-            <p class="compose-publish-section-label">
-              ${this.labels.publishDateLabel}
-            </p>
-            <p class="compose-publish-section-hint">
-              ${this.labels.publishDateHint}
-            </p>
-          </div>
-          ${this._hasPublishedAtValue()
-            ? html`
-                <button
-                  type="button"
-                  class="compose-publish-section-action"
-                  @click=${() => this._resetPublishedAt()}
-                >
-                  ${this.labels.publishDateReset}
-                </button>
-              `
-            : nothing}
-        </div>
-        <div class="compose-publish-date-field">
-          <div class="compose-publish-date-input-wrap">
-            <input
-              type="date"
-              class="compose-input compose-publish-date-input"
-              .value=${this._publishedAtInput}
-              max=${this._getPublishedAtMaxInput()}
-              aria-invalid=${publishedAtError ? "true" : "false"}
-              @input=${(e: Event) => this._onPublishedAtInput(e)}
-            />
-          </div>
-          ${publishedAtError
-            ? html`<p
-                class=${classMap({
-                  "compose-publish-date-status": true,
-                  "compose-publish-date-status-error": true,
-                })}
+    input.focus();
+    try {
+      input.showPicker();
+    } catch {
+      // Older engines, or a browser that declined: the field is still typable.
+    }
+  }
+
+  private _renderPublishDateSection(index: number) {
+    const publishedAtError = this._getPostPublishedAtValidationMessage(index);
+    const hasValue = this._hasPostPublishedAtValue(index);
+
+    return html`
+      <div class="compose-meta-field compose-publish-date-field">
+        ${this._renderMetaFieldHead(
+          this.labels.publishDateLabel,
+          hasValue
+            ? html`<button
+                type="button"
+                class="compose-publish-section-action"
+                @click=${() => this._resetPublishedAt(index)}
               >
-                ${publishedAtError}
-              </p>`
-            : nothing}
+                ${this.labels.publishDateReset}
+              </button>`
+            : nothing,
+        )}
+        <div class="compose-publish-date-input-wrap">
+          <input
+            type="date"
+            class=${classMap({
+              "compose-input": true,
+              "compose-publish-date-input": true,
+              // The browser draws `yyyy-mm-dd` in the value's own colour, so an
+              // empty field reads as a date that has been set. Dim it instead.
+              "compose-publish-date-input-empty": !hasValue,
+            })}
+            .value=${this._getPostPublishedAtInput(index)}
+            max=${this._getPublishedAtMaxInput()}
+            aria-label=${this.labels.publishDateLabel}
+            aria-invalid=${publishedAtError ? "true" : "false"}
+            @input=${(e: Event) =>
+              this._setPostPublishedAtInput(
+                index,
+                (e.target as HTMLInputElement).value,
+              )}
+          />
+          <button
+            type="button"
+            class="compose-publish-date-picker"
+            aria-label=${this.labels.publishDateSummaryAction}
+            data-compose-date-picker
+            @click=${() => this._openDatePicker(index)}
+          >
+            ${renderComposePublishActionIcon(
+              COMPOSE_PUBLISH_ACTION_ICONS.calendar,
+              "compose-publish-date-picker-icon",
+            )}
+          </button>
         </div>
-      </section>
+        ${publishedAtError
+          ? html`<p
+              class="compose-publish-date-status compose-publish-date-status-error"
+            >
+              ${publishedAtError}
+            </p>`
+          : hasValue
+            ? nothing
+            : html`<p class="compose-sheet-hint">
+                ${this.labels.publishDateHint}
+              </p>`}
+      </div>
     `;
   }
 
-  private _renderPublishSlugSection() {
-    const slugError = this._getSlugValidationMessage();
-    const slugStatus = this._getSlugStatusMessage();
-    const slugPreview = this._getSlugPreviewParts();
+  private _renderPublishSlugSection(index: number) {
+    const isRoot = index === 0;
+    const slugError = this._getPostSlugValidationMessage(index);
+    const slugStatus = isRoot ? this._getSlugStatusMessage() : slugError;
+    const slugPreview = isRoot ? this._getSlugPreviewParts() : null;
+    // Suggestions come from the title, which replies do not have.
     const showSuggestion =
+      isRoot &&
       !this._hasManualSlug() &&
       !this._suggestedSlugLoading &&
       Boolean(this._suggestedSlug);
 
     return html`
-      <section class="compose-publish-section">
-        <div class="compose-publish-section-header">
-          <div class="compose-publish-section-copy">
-            <p class="compose-publish-section-label">
-              ${this.labels.publishSlugLabel}
-            </p>
-            <p class="compose-publish-section-hint">
-              ${this.labels.publishSlugHint}
-            </p>
-          </div>
-          ${this._hasManualSlug()
-            ? html`
-                <button
-                  type="button"
-                  class="compose-publish-section-action"
-                  @click=${() => this._resetCustomSlug()}
-                >
-                  ${this.labels.publishSlugReset}
-                </button>
-              `
-            : nothing}
+      <div class="compose-meta-field compose-publish-slug-field">
+        ${this._renderMetaFieldHead(
+          this.labels.publishSlugLabel,
+          this._hasManualSlug()
+            ? html`<button
+                type="button"
+                class="compose-publish-section-action"
+                @click=${() => this._resetCustomSlug()}
+              >
+                ${this.labels.publishSlugReset}
+              </button>`
+            : nothing,
+        )}
+        <div class="compose-publish-slug-input-wrap">
+          <span class="compose-publish-slug-prefix" aria-hidden="true">/</span>
+          <input
+            type="text"
+            class="compose-input compose-publish-slug-input"
+            .value=${this._getPostSlug(index)}
+            placeholder=${this.labels.publishSlugPlaceholder}
+            aria-label=${this.labels.publishSlugLabel}
+            aria-invalid=${slugError ? "true" : "false"}
+            spellcheck="false"
+            autocapitalize="off"
+            autocomplete="off"
+            @input=${(e: Event) => this._onSlugInput(e, index)}
+          />
         </div>
-        <div class="compose-publish-slug-field">
-          <div class="compose-publish-slug-input-wrap">
-            <span class="compose-publish-slug-prefix">/</span>
-            <input
-              type="text"
-              class="compose-input compose-publish-slug-input"
-              .value=${this._slug}
-              placeholder=${this.labels.publishSlugPlaceholder}
-              aria-invalid=${slugError ? "true" : "false"}
-              spellcheck="false"
-              autocapitalize="off"
-              autocomplete="off"
-              @input=${(e: Event) => this._onSlugInput(e)}
-            />
-          </div>
-          ${showSuggestion
-            ? html`
-                <button
-                  type="button"
-                  class="compose-slug-suggestion"
-                  @click=${() => this._useSuggestedSlug()}
-                >
-                  <span class="compose-slug-suggestion-copy">
-                    <span class="compose-slug-suggestion-label"
-                      >${this.labels.publishSlugSuggested}</span
-                    >
-                    <span class="compose-slug-suggestion-chip">
-                      <span class="compose-slug-suggestion-value"
-                        >/${this._suggestedSlug}</span
-                      >
-                    </span>
-                  </span>
-                  <span class="compose-slug-suggestion-icon" aria-hidden="true">
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 14 14"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="1.4"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    >
-                      <path d="M3 7h8" />
-                      <path d="m8 3 4 4-4 4" />
-                    </svg>
-                  </span>
-                </button>
-              `
-            : nothing}
-          ${slugStatus
-            ? html`<p
-                class=${classMap({
-                  "compose-publish-slug-status": true,
-                  "compose-publish-slug-status-error": Boolean(slugError),
-                })}
-                data-compose-slug-error=${slugError ? "true" : nothing}
+        ${showSuggestion
+          ? html`
+              <button
+                type="button"
+                class="compose-slug-suggestion"
+                @click=${() => this._useSuggestedSlug()}
               >
-                ${slugStatus}
-              </p>`
-            : nothing}
-          ${slugPreview
+                <span class="compose-slug-suggestion-label"
+                  >${this.labels.publishSlugSuggested}</span
+                >
+                <span class="compose-slug-suggestion-value"
+                  >/${this._suggestedSlug}</span
+                >
+                <span class="compose-slug-suggestion-icon" aria-hidden="true">
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 14 14"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.4"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M3 7h8" />
+                    <path d="m8 3 4 4-4 4" />
+                  </svg>
+                </span>
+              </button>
+            `
+          : nothing}
+        ${slugStatus
+          ? html`<p
+              class=${classMap({
+                "compose-publish-slug-status": true,
+                "compose-publish-slug-status-error": Boolean(slugError),
+              })}
+              data-compose-slug-error=${slugError ? "true" : nothing}
+            >
+              ${slugStatus}
+            </p>`
+          : slugPreview
             ? html`<p
                 class="compose-publish-slug-preview"
                 data-compose-slug-preview
@@ -4799,79 +5091,576 @@ export class JantComposeDialog extends LitElement {
                   >${slugPreview.path}</span
                 >
               </p>`
-            : nothing}
-        </div>
-      </section>
+            : this._hasPostManualSlug(index)
+              ? nothing
+              : html`<p class="compose-sheet-hint">
+                  ${this.labels.publishSlugHint}
+                </p>`}
+      </div>
     `;
   }
 
+  /**
+   * Replying quietly is an instruction for the moment a reply is written: the
+   * server's only job is to skip the thread-activity bump it would otherwise
+   * do on create. Saving an existing post goes through the update path, which
+   * has no such bump to skip and no way to carry the intent — so the switch is
+   * not offered there rather than sitting dead. A thread draft is the one
+   * exception: saving it deletes and recreates every post, so the flag lands.
+   */
+  private _canReplyQuietly(): boolean {
+    if (!this._replyToId) return false;
+    const editsExistingPost = !!(this._editPostId || this._draftSourceId);
+    return !editsExistingPost || this._threadItems.length >= 2;
+  }
+
   private _renderQuietReplySection() {
-    if (!this._replyToId) return nothing;
+    if (!this._canReplyQuietly()) return nothing;
 
     return html`
-      <section class="compose-publish-section">
-        <label class="compose-publish-switch-row">
-          <div class="compose-publish-section-copy">
-            <p class="compose-publish-section-label">
-              ${this.labels.quietReplyLabel}
-            </p>
-            <p class="compose-publish-section-hint">
-              ${this.labels.quietReplyHint}
-            </p>
-          </div>
-          <input
-            type="checkbox"
-            role="switch"
-            class="input"
-            .checked=${this._quietReply}
-            @change=${(e: Event) => {
-              this._quietReply = (e.target as HTMLInputElement).checked;
-            }}
-          />
-        </label>
-      </section>
+      <label class="compose-sheet-row compose-sheet-row-switch">
+        <span class="compose-sheet-main">
+          <span class="compose-sheet-title"
+            >${this.labels.quietReplyLabel}</span
+          >
+          <span class="compose-sheet-sub">${this.labels.quietReplyHint}</span>
+        </span>
+        <input
+          type="checkbox"
+          role="switch"
+          class="input"
+          .checked=${this._quietReply}
+          @change=${(e: Event) => {
+            this._quietReply = (e.target as HTMLInputElement).checked;
+          }}
+        />
+      </label>
     `;
   }
 
-  private _renderPublishPanelSections() {
+  /**
+   * Value shown on the collapsed "Published on" row. Always reflects the
+   * current date — unlike the old summary chip, which deliberately stayed
+   * silent when nothing had changed.
+   */
+  private _getPublishedAtRowValue(): string {
+    const parsed = parseLocalDateInputValue(this._publishedAtInput);
+    if (parsed === null) return this.labels.publishDateSummaryNow;
+
+    return new Intl.DateTimeFormat(undefined, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    }).format(new Date(parsed.year, parsed.monthIndex, parsed.day));
+  }
+
+  /** Value shown on the collapsed "Custom link" row. */
+  private _getPostSlugRowValue(index: number): string {
+    const slug = this._getPostSlug(index).trim();
+    return slug ? `/${slug}` : this.labels.publishSlugSummaryAuto;
+  }
+
+  /* ── Per-post publish date ───────────────────────────────────────────
+     Only the root carries a permalink control: a reply's slug is a random id
+     assigned at publish time, and overriding it is not a thing people do. The
+     date is — backfilling an old thread is the whole reason this exists. */
+
+  private _getPostSlug(index: number): string {
+    if (index === 0) return this._slug;
+    return this._threadItems[index]?.slug ?? "";
+  }
+
+  private _setPostSlug(index: number, value: string) {
+    if (index === 0) {
+      this._slug = value;
+      return;
+    }
+    this._threadItems = this._threadItems.map((item, i) =>
+      i === index ? { ...item, slug: value } : item,
+    );
+  }
+
+  private _setPostSlugTaken(index: number, taken: boolean) {
+    if (index === 0) {
+      this._slugTaken = taken;
+      return;
+    }
+    this._threadItems = this._threadItems.map((item, i) =>
+      i === index ? { ...item, slugTaken: taken } : item,
+    );
+  }
+
+  private _hasPostManualSlug(index: number): boolean {
+    return this._getPostSlug(index).trim().length > 0;
+  }
+
+  private _getPostSlugSyncValidationMessage(index: number): string | null {
+    const issue = getSlugValidationIssue(this._getPostSlug(index));
+    if (issue === "invalid") return this.labels.publishSlugInvalid;
+    if (issue === "reserved") return this.labels.publishSlugReserved;
+    return null;
+  }
+
+  private _getPostSlugValidationMessage(index: number): string | null {
+    const sync = this._getPostSlugSyncValidationMessage(index);
+    if (sync) return sync;
+    const taken =
+      index === 0 ? this._slugTaken : this._threadItems[index]?.slugTaken;
+    if (this._hasPostManualSlug(index) && taken) {
+      return this.labels.publishSlugTaken;
+    }
+    return null;
+  }
+
+  private _getPostPublishedAtInput(index: number): string {
+    if (index === 0) return this._publishedAtInput;
+    return this._threadItems[index]?.publishedAtInput ?? "";
+  }
+
+  private _setPostPublishedAtInput(index: number, value: string) {
+    if (index === 0) {
+      this._publishedAtInput = value;
+      return;
+    }
+    this._threadItems = this._threadItems.map((item, i) =>
+      i === index ? { ...item, publishedAtInput: value } : item,
+    );
+  }
+
+  private _setPostPublishedAtTimeMinutes(index: number, value: number | null) {
+    if (index === 0) {
+      this._publishedAtTimeMinutes = value;
+      return;
+    }
+    this._threadItems = this._threadItems.map((item, i) =>
+      i === index ? { ...item, publishedAtTimeMinutes: value } : item,
+    );
+  }
+
+  private _hasPostPublishedAtValue(index: number): boolean {
+    return this._getPostPublishedAtInput(index).trim().length > 0;
+  }
+
+  /** Same rules as the root's, applied to any post in the thread. */
+  private _getPostPublishedAtValidationMessage(index: number): string | null {
+    const input = this._getPostPublishedAtInput(index);
+    if (!input.trim()) return null;
+    if (parseLocalDateInputValue(input) === null) {
+      return this.labels.publishDateInvalid;
+    }
+    if (input > this._getPublishedAtMaxInput()) {
+      return this.labels.publishDateFutureError;
+    }
+    return null;
+  }
+
+  private _getPostPublishedAtRowValue(index: number): string {
+    const parsed = parseLocalDateInputValue(
+      this._getPostPublishedAtInput(index),
+    );
+    if (parsed !== null) {
+      return new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }).format(new Date(parsed.year, parsed.monthIndex, parsed.day));
+    }
+    // A reply with no date of its own inherits the root's — say so rather than
+    // implying it publishes "now" independently.
+    if (index > 0 && this._hasPublishedAtValue()) {
+      return this._getPublishedAtRowValue();
+    }
+    return this.labels.publishDateSummaryNow;
+  }
+
+  /**
+   * Date (and, on the root, permalink) describe one post, so they live on that
+   * post rather than in the publish panel, which speaks for the whole
+   * submission. The control stays quiet until the post is hovered, focused, or
+   * carries a non-default value.
+   */
+  private _renderPostMetaControl(index: number) {
+    if (this._openingEdit) return nothing;
+
+    const isRoot = index === 0;
+    const open = this._postMetaIndex === index;
+    const custom =
+      this._hasPostPublishedAtValue(index) || this._hasPostManualSlug(index);
+
     return html`
-      ${this._replyToId ? this._renderQuietReplySection() : nothing}
-      ${this._visibilityLocked
-        ? nothing
-        : html`
-            <section class="compose-publish-section">
-              <div class="compose-publish-section-header">
-                <div class="compose-publish-section-copy">
-                  <p class="compose-publish-section-label">
-                    ${this.labels.publishVisibilityLabel}
-                  </p>
-                </div>
+      <div
+        class=${classMap({
+          "compose-post-meta": true,
+          "compose-post-meta-set": custom,
+          "compose-post-meta-open": open,
+        })}
+      >
+        ${open
+          ? html`<div
+              class="compose-dropdown-backdrop"
+              @click=${() => this._closePostMeta()}
+            ></div>`
+          : nothing}
+        <button
+          type="button"
+          class="compose-post-meta-pill"
+          aria-haspopup="dialog"
+          aria-expanded=${open ? "true" : "false"}
+          data-compose-post-meta-pill
+          data-post-index=${index}
+          @click=${() => {
+            if (open) return this._closePostMeta();
+            this._showPublishPanel = false;
+            this._showCollection = false;
+            this._postMetaIndex = index;
+            if (isRoot) this._scheduleSuggestedSlugRefresh(true);
+            // Focus the panel, not its first field: a focused `type="date"`
+            // opens with its year segment highlighted in the OS accent colour,
+            // which Chrome will not let us restyle. Tab reaches the fields.
+            this._placeAndFocusPostMetaPanel();
+          }}
+        >
+          ${renderComposePublishActionIcon(
+            COMPOSE_PUBLISH_ACTION_ICONS.calendar,
+            "compose-post-meta-icon",
+          )}
+          <span class="compose-post-meta-value"
+            >${this._getPostPublishedAtRowValue(index)}</span
+          >
+          <span class="compose-post-meta-sep" aria-hidden="true">·</span>
+          <!-- No link icon: the permalink already renders with its leading
+               slash, and two icons in a control this quiet read as clutter. -->
+          <span class="compose-post-meta-value compose-post-meta-value-slug"
+            >${this._getPostSlugRowValue(index)}</span
+          >
+        </button>
+        ${open
+          ? html`<div
+              class="compose-post-meta-panel"
+              role="dialog"
+              aria-label=${this.labels.publishSettings}
+              tabindex="-1"
+              data-compose-post-meta-panel
+            >
+              ${this._renderPublishDateSection(index)}
+              ${this._renderPublishSlugSection(index)}
+              <div class="compose-post-meta-footer">
+                <button
+                  type="button"
+                  class="compose-publish-done"
+                  data-compose-post-meta-done
+                  @click=${() => this._closePostMeta()}
+                >
+                  ${this.labels.done}
+                </button>
               </div>
-              <div class="compose-publish-chips" role="radiogroup">
-                ${this._renderPublishVisibilityChip(
+            </div>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  /**
+   * Places the just-opened date/permalink panel, then puts focus in it.
+   *
+   * Both wait on `updateComplete` because the panel is not ours to render: it
+   * is handed to the post's editor row as `headerExtra`, so it only reaches the
+   * DOM on the editor's own update, one below this one. Focus is `preventScroll`
+   * — the panel is already pinned where it should be, and without it the browser
+   * scrolls `.compose-scroll` to "reveal" a panel that is not in that box,
+   * taking the format switcher off the top of the composer with it.
+   */
+  private _placeAndFocusPostMetaPanel(focusSelector?: string) {
+    this.updateComplete.then(() => {
+      this._updatePostMetaPanelLayout();
+      this.querySelector<HTMLElement>(
+        focusSelector ?? "[data-compose-post-meta-panel]",
+      )?.focus({ preventScroll: true });
+    });
+  }
+
+  /**
+   * Pins the open date/permalink panel under the pill it belongs to.
+   *
+   * The pill sits inside `.compose-scroll`, and that box scrolls: an absolutely
+   * positioned panel is clipped by it, and an empty post makes the box shorter
+   * than the panel every time, so the whole footer — Done included — used to be
+   * cut off. `position: fixed` takes the panel out of the scroller, which hands
+   * the coordinates to us.
+   *
+   * They are not viewport coordinates. The dialog's open animation leaves a
+   * transform behind, and a transformed ancestor becomes the containing block
+   * for `fixed` descendants — so the panel is parked at 0,0 first and the rect
+   * that comes back is the origin everything else is measured from. Reading it
+   * beats naming the ancestor: the page-mode composer has no dialog at all.
+   */
+  private _updatePostMetaPanelLayout() {
+    const index = this._postMetaIndex;
+    if (index === null) return;
+
+    const panel = this.querySelector<HTMLElement>(
+      "[data-compose-post-meta-panel]",
+    );
+    const pill = this.querySelector<HTMLElement>(
+      `[data-compose-post-meta-pill][data-post-index="${index}"]`,
+    );
+    if (!panel || !pill) return;
+
+    const visualViewport = globalThis.visualViewport;
+    const viewportTop = visualViewport?.offsetTop ?? 0;
+    const viewportLeft = visualViewport?.offsetLeft ?? 0;
+    const viewportBottom =
+      viewportTop + (visualViewport?.height ?? globalThis.innerHeight);
+    const viewportRight =
+      viewportLeft + (visualViewport?.width ?? globalThis.innerWidth);
+    const edgePadding = 12;
+    const gap = 6;
+
+    // Same rule as the publish panel: open into whichever side has more room,
+    // and cap the panel at what that side actually offers so a short window
+    // scrolls the panel's own body instead of hiding its footer.
+    const pillRect = pill.getBoundingClientRect();
+    const availableAbove = Math.max(
+      0,
+      pillRect.top - (viewportTop + edgePadding) - gap,
+    );
+    const availableBelow = Math.max(
+      0,
+      viewportBottom - edgePadding - pillRect.bottom - gap,
+    );
+    const direction = availableBelow >= availableAbove ? "down" : "up";
+    const maxHeight = Math.max(
+      1,
+      Math.floor(direction === "up" ? availableAbove : availableBelow),
+    );
+
+    panel.style.top = "0px";
+    panel.style.left = "0px";
+    const origin = panel.getBoundingClientRect();
+    // The dialog opens with a `scale(0.97)` animation, so for a third of a
+    // second every measured rect is smaller than the box it describes while the
+    // offsets we write are not. `offsetWidth` is the same box before the
+    // transform, so their ratio is the scale to divide back out.
+    const scale = origin.width / (panel.offsetWidth || origin.width || 1) || 1;
+
+    panel.style.setProperty(
+      "--compose-post-meta-panel-max-height",
+      `${maxHeight / scale}px`,
+    );
+    // Read back rather than reuse `origin.height`: the cap above is what
+    // decides how tall the panel actually is, and a panel opening upwards is
+    // placed from its own bottom edge.
+    const height = panel.offsetHeight * scale;
+
+    const top =
+      direction === "down"
+        ? pillRect.bottom + gap
+        : pillRect.top - gap - height;
+    // Right-aligned to the pill, which is itself flush with the composer's
+    // right edge — then held inside the viewport, since a narrow screen can
+    // put the panel's left edge past it.
+    const left = Math.min(
+      Math.max(pillRect.right - origin.width, viewportLeft + edgePadding),
+      Math.max(viewportRight - edgePadding - origin.width, viewportLeft),
+    );
+
+    panel.style.top = `${(top - origin.top) / scale}px`;
+    panel.style.left = `${(left - origin.left) / scale}px`;
+  }
+
+  /**
+   * Hands focus back to the post the panel belongs to. The panel takes focus
+   * when it opens, so without this the closing panel takes the focus with it as
+   * it leaves the DOM: focus lands on `<body>`, the editor loses
+   * `:focus-within`, and on a wide screen the pill — quiet until hovered or
+   * focused — fades out from under the pointer. It also leaves the compose
+   * element entirely, which matters more: the `keydown` listener is bound to
+   * this component, so Escape would stop closing compose afterwards.
+   */
+  private _closePostMeta() {
+    const index = this._postMetaIndex;
+    if (index === null) return;
+
+    const heldFocus =
+      this.querySelector("[data-compose-post-meta-panel]")?.contains(
+        document.activeElement,
+      ) ?? false;
+    this._postMetaIndex = null;
+    if (!heldFocus) return;
+
+    this.updateComplete.then(() => {
+      const editors = this.querySelectorAll<JantComposeEditor>(
+        "jant-compose-editor",
+      );
+      (editors[index] ?? editors[0])?.focusInput();
+    });
+  }
+
+  /**
+   * Whether the settings panel would have anything in it.
+   *
+   * Asks the row renderers instead of restating their conditions, so it cannot
+   * drift out of sync with what the panel actually shows — the same reason
+   * `_renderQuickActionsRow` inspects its children rather than recomputing
+   * them. Editing a thread reply empties every row (visibility belongs to the
+   * root, the draft rows only apply to unsaved posts), and an Options button
+   * that opens a blank sheet is worse than no button.
+   */
+  private _hasPublishPanelContent(): boolean {
+    if (!this._visibilityLocked) return true;
+    if (this._replyToId && this._renderQuietReplySection() !== nothing) {
+      return true;
+    }
+    return (
+      this._renderSaveDraftRow() !== nothing ||
+      this._renderDraftsRow() !== nothing ||
+      this._renderCloseComposeRow() !== nothing
+    );
+  }
+
+  /**
+   * A vertical list, not a toolbar: grouped by a muted label, one row per
+   * setting, value or control on the right.
+   */
+  private _renderPublishPanelSections() {
+    const divider = html`<div
+      class="compose-sheet-divider"
+      aria-hidden="true"
+    ></div>`;
+    const saveDraftRow = this._renderSaveDraftRow();
+    const draftsRow = this._renderDraftsRow();
+    const closeRow = this._renderCloseComposeRow();
+    const hasSessionRows =
+      saveDraftRow !== nothing || draftsRow !== nothing || closeRow !== nothing;
+
+    return html`
+      <div class="compose-sheet">
+        ${this._visibilityLocked
+          ? nothing
+          : html`
+              <p class="compose-sheet-label">
+                ${this.labels.publishVisibilityLabel}
+              </p>
+              <div
+                role="radiogroup"
+                aria-label=${this.labels.publishVisibilityLabel}
+              >
+                ${this._renderVisibilityRow(
                   "public",
                   this.labels.publishVisibilityPublic,
+                  this.labels.publishVisibilityPublicHint,
                 )}
-                ${this._renderPublishVisibilityChip(
+                ${this._renderVisibilityRow(
                   "latest_hidden",
                   this.labels.publishVisibilityHiddenFromLatest,
+                  this.labels.publishVisibilityHiddenFromLatestHint,
                 )}
-                ${this._renderPublishVisibilityChip(
+                ${this._renderVisibilityRow(
                   "private",
                   this.labels.publishVisibilityPrivate,
+                  this.labels.publishVisibilityPrivateHint,
                 )}
               </div>
-              <p class="compose-publish-chip-hint">
-                ${this._getVisibilityHint()}
-              </p>
-            </section>
-          `}
-      ${this._visibilityLocked && !this._replyToId
-        ? nothing
-        : html`<div class="compose-publish-divider" aria-hidden="true"></div>`}
-      ${this._renderPublishDateSection()}
-      <div class="compose-publish-divider" aria-hidden="true"></div>
-      ${this._renderPublishSlugSection()}
+            `}
+        ${this._replyToId
+          ? html`${this._visibilityLocked ? nothing : divider}
+            ${this._renderQuietReplySection()}`
+          : nothing}
+        ${hasSessionRows
+          ? html`${divider} ${saveDraftRow} ${draftsRow} ${closeRow}`
+          : nothing}
+      </div>
+    `;
+  }
+
+  /**
+   * "Save as draft" is an action on what is in front of you; "Drafts" is a
+   * place to go. One row cannot be both, which is what the old title-bar button
+   * tried to do: it read "Save as draft" and then dropped you in the list. Once
+   * there is something to save, both are offered and each does one thing.
+   */
+  private _renderSaveDraftRow() {
+    if (this._editPostId || !this._hasContent()) return nothing;
+
+    return html`
+      <button
+        type="button"
+        class="compose-sheet-row"
+        ?disabled=${this._loading}
+        @click=${() => {
+          this._closePublishPanel(false);
+          void this._submit("draft");
+        }}
+      >
+        ${renderComposeSheetRowIcon(COMPOSE_SHEET_ROW_ICONS.saveDraft)}
+        <span class="compose-sheet-main">
+          <span class="compose-sheet-title">${this.labels.saveAsDraft}</span>
+        </span>
+      </button>
+    `;
+  }
+
+  /**
+   * Drafts moved off the title bar and in here when that bar went away. It is
+   * the rarer of the two things the bar held — a session action, not part of
+   * writing — so it belongs behind the same trigger as the rest of them.
+   *
+   * Leaving unsaved work behind still asks first, but that prompt is now the
+   * fallback rather than the only path: `_renderSaveDraftRow` is sitting right
+   * above it for anyone who already knows what they want.
+   */
+  private _renderDraftsRow() {
+    if (this._editPostId) return nothing;
+
+    return html`
+      <button
+        type="button"
+        class="compose-sheet-row"
+        ?disabled=${this._loading}
+        @click=${() => {
+          this._closePublishPanel(false);
+          this._handleDraftButtonClick();
+        }}
+      >
+        ${renderComposeSheetRowIcon(COMPOSE_SHEET_ROW_ICONS.drafts)}
+        <span class="compose-sheet-main">
+          <span class="compose-sheet-title">${this.labels.drafts}</span>
+        </span>
+        ${renderComposePublishActionIcon(
+          COMPOSE_PUBLISH_ACTION_ICONS.caretRight,
+          "compose-sheet-caret",
+        )}
+      </button>
+    `;
+  }
+
+  /**
+   * A thread's posts each spend their × on removing themselves, so this is the
+   * only visible exit there — and the only one at all on a phone, which has no
+   * Escape key and no backdrop to tap. It routes through `requestClose`, so
+   * unsaved work still gets the "Save to drafts?" prompt.
+   */
+  private _renderCloseComposeRow() {
+    if (this._threadItems.length === 0) return nothing;
+
+    return html`
+      <button
+        type="button"
+        class="compose-sheet-row"
+        ?disabled=${this._loading}
+        @click=${() => {
+          this._closePublishPanel(false);
+          this.requestClose();
+        }}
+      >
+        ${renderComposePublishActionIcon(
+          COMPOSE_PUBLISH_ACTION_ICONS.close,
+          "compose-sheet-row-icon",
+        )}
+        <span class="compose-sheet-main">
+          <span class="compose-sheet-title">${this.labels.closeCompose}</span>
+        </span>
+      </button>
     `;
   }
 
@@ -4890,15 +5679,6 @@ export class JantComposeDialog extends LitElement {
         data-compose-publish-panel-desktop
       >
         ${this._renderPublishPanelSections()}
-        <div class="compose-publish-panel-footer">
-          <button
-            type="button"
-            class="compose-publish-done"
-            @click=${() => this._closePublishPanel(true)}
-          >
-            ${this.labels.done}
-          </button>
-        </div>
       </div>
     `;
   }
@@ -4953,75 +5733,6 @@ export class JantComposeDialog extends LitElement {
     `;
   }
 
-  private _renderPublishSummary(summary: ComposePublishSummaryChip) {
-    const isPublishedAt = summary.kind === "publishedAt";
-
-    return html`
-      <button
-        type="button"
-        class="compose-publish-summary"
-        data-compose-publish-summary=${summary.kind}
-        data-compose-publish-date-summary=${isPublishedAt ? "" : nothing}
-        data-compose-publish-slug-summary=${isPublishedAt ? nothing : ""}
-        data-publish-summary-value=${summary.value}
-        data-publish-date=${isPublishedAt ? summary.value : nothing}
-        data-publish-slug=${isPublishedAt ? nothing : summary.value}
-        aria-label=${summary.actionLabel}
-        title=${summary.actionLabel}
-        ?disabled=${this._loading}
-        @click=${() =>
-          isPublishedAt
-            ? this._revealPublishedAtField()
-            : this._revealSlugField()}
-      >
-        <span class="compose-publish-summary-icon" aria-hidden="true">
-          ${isPublishedAt
-            ? html`<svg
-                width="14"
-                height="14"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.35"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <rect x="2.75" y="3.45" width="10.5" height="9.8" rx="2.2" />
-                <path d="M5.35 2.55v2.1" />
-                <path d="M10.65 2.55v2.1" />
-                <path d="M2.75 6.2h10.5" />
-              </svg>`
-            : html`<svg
-                width="14"
-                height="14"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.35"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M9.75 4.15h1.35a2.75 2.75 0 0 1 0 5.5H9.75" />
-                <path d="M6.25 9.65H4.9a2.75 2.75 0 1 1 0-5.5h1.35" />
-                <path d="M5.65 8h4.7" />
-              </svg>`}
-        </span>
-        <span class="compose-publish-summary-text">${summary.text}</span>
-      </button>
-    `;
-  }
-
-  private _renderPublishSummaries() {
-    const summaries = this._getPublishSummaryChips();
-    if (summaries.length === 0) return nothing;
-
-    return html`
-      <div class="compose-publish-summaries">
-        ${summaries.map((summary) => this._renderPublishSummary(summary))}
-      </div>
-    `;
-  }
-
   private _updatePublishPanelLayout() {
     if (this._publishPanelFullscreen) return;
 
@@ -5075,7 +5786,6 @@ export class JantComposeDialog extends LitElement {
 
     return html`
       <div class="compose-publish-shell">
-        ${this._renderPublishSummaries()}
         <div
           class=${classMap({
             "compose-publish-group": true,
@@ -5106,31 +5816,50 @@ export class JantComposeDialog extends LitElement {
             >
               ${this._loading ? spinner : nothing} ${this._getSubmitLabel()}
             </button>
-            <button
-              type="button"
-              class=${classMap({
-                "compose-publish-toggle": true,
-                "compose-publish-toggle-loading": this._loading,
-              })}
-              ?disabled=${this._loading}
-              aria-haspopup="dialog"
-              aria-expanded=${this._showPublishPanel ? "true" : "false"}
-              aria-label=${this.labels.publishSettings}
-              title=${this.labels.publishSettings}
-              @click=${() => this._togglePublishPanel()}
-            >
-              ${renderComposePublishActionIcon(
-                COMPOSE_PUBLISH_ACTION_ICONS.chevron,
-                "compose-publish-toggle-chevron",
-              )}
-            </button>
           </div>
+          <!-- Options sits past Publish as its own control rather than a
+               chevron welded to it: a split button reads as one button, which
+               is why nobody found the settings. -->
+          ${this._hasPublishPanelContent()
+            ? html`<button
+                type="button"
+                class=${classMap({
+                  "compose-options-trigger": true,
+                  "compose-options-trigger-open": this._showPublishPanel,
+                })}
+                ?disabled=${this._loading}
+                aria-haspopup="dialog"
+                aria-expanded=${this._showPublishPanel ? "true" : "false"}
+                aria-label=${this.labels.publishSettings}
+                title=${this.labels.publishSettings}
+                @click=${() => this._togglePublishPanel()}
+              >
+                <svg
+                  class="compose-options-trigger-icon"
+                  width="22"
+                  height="22"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  ${unsafeSVG(COMPOSE_PUBLISH_ACTION_ICONS.options)}
+                </svg>
+              </button>`
+            : nothing}
           ${this._renderDesktopPublishPanel()}
         </div>
       </div>
     `;
   }
 
+  /**
+   * Shortcuts for the two settings that get reached for constantly, sitting
+   * under Publish where they can be flipped without opening the panel. Both are
+   * mirrors of a row inside it, not a second source of truth.
+   */
   private _renderQuickActionsRow() {
     const hideFromLatest = this._renderHideFromLatestQuickToggle();
     const quietReply = this._renderQuietReplyQuickToggle();
@@ -5143,7 +5872,7 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _renderQuietReplyQuickToggle() {
-    if (!this._replyToId) return nothing;
+    if (!this._canReplyQuietly()) return nothing;
     return html`
       <label class="compose-publish-quick-toggle">
         <input
@@ -5160,6 +5889,11 @@ export class JantComposeDialog extends LitElement {
     `;
   }
 
+  /**
+   * Visibility has three states, so a checkbox cannot speak for all of them: it
+   * covers the public ↔ hidden-from-Latest pair and steps aside once the post
+   * is private, where the panel's radio list is the only honest control.
+   */
   private _renderHideFromLatestQuickToggle() {
     if (this._visibilityLocked) return nothing;
     if (this._visibility === "private") return nothing;
@@ -5190,6 +5924,12 @@ export class JantComposeDialog extends LitElement {
         aria-live="polite"
         aria-busy="true"
       >
+        <!-- The post header this normally rides on has not rendered yet, so the
+             close control gets its own row rather than leaving a fetch with no
+             way out on a phone, where there is no Escape key. -->
+        <div class="compose-edit-loading-close">
+          ${this._renderCloseComposeControl()}
+        </div>
         <div class="compose-edit-loading-status">
           <svg
             class="animate-spin size-5"
@@ -5311,11 +6051,9 @@ export class JantComposeDialog extends LitElement {
         "jant-compose-editor",
       );
       editors[this._focusedThreadIndex]?.focusInput();
-      const threadLayout = this.querySelector<HTMLElement>(
-        ".compose-thread-compose-layout",
-      );
-      if (threadLayout) {
-        threadLayout.scrollTop = threadLayout.scrollHeight;
+      const scroller = this.querySelector<HTMLElement>(".compose-scroll");
+      if (scroller) {
+        scroller.scrollTop = scroller.scrollHeight;
       }
     });
   }
@@ -5386,7 +6124,6 @@ export class JantComposeDialog extends LitElement {
           singleEditor._showRating = capturedShowRating;
         }
         singleEditor.focusInput();
-        this.requestUpdate();
       });
     } else {
       this._threadItems = newItems;
@@ -5397,14 +6134,46 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
+  /**
+   * Where this editor sits in the thread it is extending, as `3/3`.
+   *
+   * A reply continues a chain that already exists, so it counts from the end of
+   * that chain, not from 1: replying to the second post of a thread makes the
+   * third. Only the parent's own depth can tell us this, so the marker stays
+   * hidden until `_loadReplyParentPosition` has read it back — a number that
+   * starts at 2 and jumps to 3 is worse than one that arrives late.
+   *
+   * Empty when there is no chain to place the post in: a lone new post is not
+   * "1/1", and an edit says the more useful thing through its "Editing" marker
+   * (the post being edited may have replies below that compose cannot see, so a
+   * total would be a guess).
+   */
+  private _positionLabel(index: number): string {
+    if (this._editPostId) return "";
+    const isReply = !!(this._replyToId && this._replyToData);
+    if (isReply && this._replyParentPosition === null) return "";
+    const posted = isReply ? (this._replyParentPosition ?? 0) : 0;
+    const total = posted + (this._threadItems.length || 1);
+    if (total < 2) return "";
+    return `${posted + index + 1}/${total}`;
+  }
+
   private _renderThreadPost(
     item: ThreadItem,
     index: number,
     showRemove: boolean,
+    startsThread: boolean,
   ) {
     return html`
       <div
-        class="compose-editor-row compose-thread-post"
+        class=${classMap({
+          "compose-editor-row": true,
+          "compose-thread-post": true,
+          // Marks the post the cursor is in, which is what the rail's accent
+          // dot points at. Every post in a thread is equally "new", so being an
+          // editor row is not what makes one of them current.
+          "is-current": index === this._focusedThreadIndex,
+        })}
         data-thread-index=${index}
         @focusin=${() => {
           this._focusedThreadIndex = index;
@@ -5432,6 +6201,10 @@ export class JantComposeDialog extends LitElement {
           e.stopPropagation();
           this._removeThreadItem(index);
         }}
+        @jant:compose-status=${(e: CustomEvent<ComposeRowStatus>) => {
+          e.stopPropagation();
+          this._handleRowStatus(item.id, e.detail);
+        }}
       >
         <div class="compose-thread-dot"></div>
         <jant-compose-editor
@@ -5440,6 +6213,9 @@ export class JantComposeDialog extends LitElement {
           .uploadMaxFileSize=${this.uploadMaxFileSize}
           .threadItem=${true}
           .removable=${showRemove}
+          .titleByDefault=${startsThread}
+          .positionLabel=${this._positionLabel(index)}
+          .headerExtra=${this._renderPostMetaControl(index)}
           .slashCommandDiscovered=${this.slashCommandDiscovered}
           data-thread-id=${item.id}
         ></jant-compose-editor>
@@ -5448,19 +6224,9 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _renderAddToThreadRow() {
-    const PLUS_ICON = `<circle cx="8" cy="8" r="5.7"/><path d="M8 5.55v4.9M5.55 8h4.9"/>`;
-    const editors = this.querySelectorAll<JantComposeEditor>(
-      "jant-compose-editor",
-    );
-    const lastEditor = editors[editors.length - 1];
-    const lastData = lastEditor?.getData();
-    const lastEmpty =
-      !lastData ||
-      (!lastData.body &&
-        !lastData.title.trim() &&
-        !lastData.url.trim() &&
-        !lastData.quoteText.trim() &&
-        lastData.attachments.length === 0);
+    const rowIds = this._rowIds;
+    const lastId = rowIds[rowIds.length - 1];
+    const lastEmpty = !this._rowStatus.get(lastId)?.hasContent;
     const atLimit = this._threadItems.length >= MAX_THREAD_POSTS;
     return html`
       <div class="compose-thread-add-row">
@@ -5471,19 +6237,6 @@ export class JantComposeDialog extends LitElement {
           ?disabled=${lastEmpty || atLimit}
           @click=${() => this._addThreadItem()}
         >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.65"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            ${unsafeSVG(PLUS_ICON)}
-          </svg>
           Add to thread
         </button>
       </div>
@@ -5505,40 +6258,54 @@ export class JantComposeDialog extends LitElement {
         @jant:compose-content-changed=${() => this._scheduleDraftSave()}
       >
         ${isReply ? this._renderReplyContext() : nothing}
-        ${items.map((item, i) => this._renderThreadPost(item, i, showRemove))}
+        <!-- Keyed by row id, not by position: an editor holds its own content,
+             so an unkeyed list would reuse elements by position and drop the
+             last one when a middle post is removed — taking that post's text
+             with it, and pairing the survivors with the wrong dates and
+             permalinks. -->
+        ${repeat(
+          items,
+          (item) => item.id,
+          (item, i) =>
+            this._renderThreadPost(
+              item,
+              i,
+              showRemove,
+              // Only the post that opens a thread of its own gets a title field
+              // by default — everything downstream of it continues a thought
+              // that is already named.
+              i === 0 && !isReply,
+            ),
+        )}
         ${this._renderAddToThreadRow()}
       </div>
     `;
   }
 
-  private _renderAddThreadTrigger() {
-    const PLUS_ICON = `<circle cx="8" cy="8" r="5.7"/><path d="M8 5.55v4.9M5.55 8h4.9"/>`;
+  // `onRail` is for the reply composer, which is already a thread layout: the
+  // row joins the rail with the same dashed dot thread compose uses, so the
+  // placeholder sits where the next post will land instead of floating out at
+  // the dialog's own left edge, a rail's width clear of everything above it.
+  private _renderAddThreadTrigger(onRail: boolean) {
     const disabled = !this._hasContent();
-    return html`
-      <div class="compose-add-thread-trigger">
-        <button
-          type="button"
-          class="compose-add-thread-btn"
-          ?disabled=${disabled}
-          @click=${() => this._addThreadItem()}
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.65"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            ${unsafeSVG(PLUS_ICON)}
-          </svg>
-          Add to thread
-        </button>
-      </div>
+    const button = html`
+      <button
+        type="button"
+        class="compose-thread-add-btn"
+        ?disabled=${disabled}
+        @click=${() => this._addThreadItem()}
+      >
+        Add to thread
+      </button>
     `;
+    return onRail
+      ? html`
+          <div class="compose-thread-add-row">
+            <div class="compose-thread-add-dot"></div>
+            ${button}
+          </div>
+        `
+      : html`<div class="compose-add-thread-trigger">${button}</div>`;
   }
 
   render() {
@@ -5550,8 +6317,34 @@ export class JantComposeDialog extends LitElement {
       .labels=${this.labels}
       .uploadMaxFileSize=${this.uploadMaxFileSize}
       .inlineFormat=${isReply}
+      .titleByDefault=${!isReply && JantComposeDialog._getNoteTitleDefault()}
+      .positionLabel=${this._positionLabel(0)}
+      .badgeLabel=${this._editPostId ? this.labels.editing : ""}
+      .headerExtra=${html`${this._renderPostMetaControl(0)}
+      ${this._renderCloseComposeControl()}`}
       .slashCommandDiscovered=${this.slashCommandDiscovered}
+      @jant:format-change=${(e: CustomEvent<{ format: ComposeFormat }>) => {
+        e.stopPropagation();
+        this._switchFormat(e.detail.format);
+      }}
+      @jant:compose-status=${(e: CustomEvent<ComposeRowStatus>) => {
+        e.stopPropagation();
+        this._handleRowStatus(SINGLE_ROW_ID, e.detail);
+      }}
     ></jant-compose-editor>`;
+    // The handler sits on the editor itself rather than a delegating wrapper.
+    // Single-post mode renders this editor as a direct child of
+    // `.compose-scroll`, and the rules that lay it out are keyed on that child
+    // relationship — a wrapper breaks them even at `display: contents`, which
+    // drops the box but not the DOM parentage a selector matches on.
+    // (Thread mode builds its own editors in `_renderThreadPost`.)
+
+    // Thread mode grows its own row at the end of the layout, and editing an
+    // existing post has no next slot to offer at all.
+    const addThreadRow =
+      isOpeningEdit || isThreadMode || this._editPostId
+        ? nothing
+        : this._renderAddThreadTrigger(isReply);
 
     return html`
       <div
@@ -5564,35 +6357,26 @@ export class JantComposeDialog extends LitElement {
         aria-hidden=${this._addCollectionPanelOpen ? "true" : "false"}
         ?inert=${this._addCollectionPanelOpen}
       >
-        ${this._renderHeader()}
-        ${isOpeningEdit
-          ? this._renderEditLoadingState()
-          : isThreadMode
-            ? this._renderThreadComposeLayout()
-            : isReply
-              ? html`
-                  <div
-                    class="compose-thread-layout compose-reply-compose-layout"
-                  >
-                    ${this._renderReplyContext()}
+        <div class="compose-scroll">
+          ${isOpeningEdit
+            ? this._renderEditLoadingState()
+            : isThreadMode
+              ? this._renderThreadComposeLayout()
+              : isReply
+                ? html`
                     <div
-                      class="compose-editor-row"
-                      @jant:format-change=${(
-                        e: CustomEvent<{ format: ComposeFormat }>,
-                      ) => {
-                        e.stopPropagation();
-                        this._switchFormat(e.detail.format);
-                      }}
+                      class="compose-thread-layout compose-reply-compose-layout"
                     >
-                      <div class="compose-thread-dot"></div>
-                      ${editor}
+                      ${this._renderReplyContext()}
+                      <div class="compose-editor-row is-current">
+                        <div class="compose-thread-dot"></div>
+                        ${editor}
+                      </div>
+                      ${addThreadRow}
                     </div>
-                  </div>
-                `
-              : editor}
-        ${isOpeningEdit || isThreadMode || this._editPostId
-          ? nothing
-          : this._renderAddThreadTrigger()}
+                  `
+                : html`${editor}${addThreadRow}`}
+        </div>
         ${isOpeningEdit
           ? nothing
           : html`<div