@jant/core 0.6.15 → 0.7.0

package/src/client/compose-bridge.ts

@@ -8,16 +8,14 @@
 import type { ComposeSubmitDetail } from "./components/compose-types.js";
 import type { ComposeAttachment } from "./components/compose-types.js";
 import type { ComposeSubmitAttachment } from "./components/compose-types.js";
+import type { LocalDraftMedia } from "./components/compose-types.js";
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
 import type { JantComposeEditor } from "./components/jant-compose-editor.js";
 import type { PostAttachmentInput } from "../types.js";
 import { AudioProcessor } from "./audio-processor.js";
 import { ImageProcessor } from "./image-processor.js";
 import { VideoProcessor } from "./video-processor.js";
-import {
-  extractMediaMetadata,
-  extractAudioWaveform,
-} from "./media-metadata.js";
+import { extractAudioWaveform } from "./audio-waveform.js";
 import {
   showToast,
   showPersistentToast,
@@ -25,18 +23,89 @@ import {
   replaceWithAutoClose,
   queueToastForNextPage,
 } from "./toast.js";
-import { openReplyForArticle } from "./compose-launch.js";
-import { hydratePartial } from "./hydrate-partial.js";
+import {
+  refreshPostCardView,
+  refreshPostPageView,
+  refreshTimelineThreadView,
+} from "./post-refresh.js";
 import { getJsonString, readJsonObject } from "./json.js";
 import { uploadViaSession } from "./upload-session.js";
+import type { UploadSessionResult } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
 import { tiptapJsonToMarkdown } from "../lib/tiptap-to-markdown.js";
-import { getMediaCategory } from "../lib/upload.js";
+import { getMediaCategory, sniffImageMimeType } from "../lib/upload.js";
 import {
   resolveInlineImageUrls,
   hasPendingInlineImagePlaceholders,
 } from "./tiptap/inline-image-upload.js";
 
+/**
+ * POST a compose payload, treating a dropped connection as a failed response.
+ *
+ * A publish that never reaches the server and a publish the server rejects are
+ * the same event to the author: the post did not go up. Letting `fetch` reject
+ * here would send only one of them down the recovery path, so the request that
+ * failed hardest — no connection at all — would be the one that skipped saving
+ * a draft.
+ *
+ * @param url - Compose endpoint to post to
+ * @param body - Request body, already serialized
+ * @param method - HTTP method, defaulting to POST
+ * @returns The response, or null when the request never completed
+ * @example
+ * const res = await postCompose("/compose/thread", JSON.stringify(threadBody));
+ * if (!res?.ok) await saveAsDraftInstead();
+ */
+async function postCompose(
+  url: string,
+  body: string,
+  method = "POST",
+): Promise<globalThis.Response | null> {
+  try {
+    return await fetch(url, {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body,
+    });
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * What to tell the author when a compose request did not land.
+ *
+ * Prefers the server's own words, because it knows what was wrong with the
+ * post. A request that never completed has no words of its own, so it says so
+ * — "no connection" and "the server refused this" call for different next
+ * steps from the author.
+ *
+ * @param res - The response, or null when the request never completed
+ * @param labels - Composer labels, absent before the element has upgraded
+ * @returns A message ready to show in a toast
+ * @example
+ * await handleSubmitError(await submitErrorMessage(res, labels));
+ */
+async function submitErrorMessage(
+  res: globalThis.Response | null,
+  labels: JantComposeDialog["labels"] | undefined,
+): Promise<string> {
+  if (!res) {
+    return (
+      labels?.publishFailedOffline ?? "Couldn't reach the server. Try again."
+    );
+  }
+  const data = await readJsonObject(res);
+  return (
+    getJsonString(data, "error") ??
+    labels?.publishFailed ??
+    "Couldn't publish. Try again."
+  );
+}
+
 /**
  * Whether a serialized post body still references inline image placeholders
  * pending upload or paste-rehost. Drives the "uploading" toast and whether to
@@ -66,104 +135,6 @@ function getComposeDialogFromEventTarget(
     : null;
 }
 
-async function fetchPartialHtml(path: string): Promise<string | null> {
-  const res = await fetch(path, {
-    headers: { Accept: "text/html" },
-  });
-  if (!res.ok) return null;
-  return res.text();
-}
-
-async function refreshTimelineThreadView(
-  threadRootId: string,
-): Promise<boolean> {
-  try {
-    const timelineItem = document.querySelector<HTMLElement>(
-      `[data-timeline-item][data-thread-root-id="${threadRootId}"]`,
-    );
-    const content = timelineItem?.querySelector<HTMLElement>(
-      "[data-timeline-item-content]",
-    );
-    if (!content) return false;
-
-    const html = await fetchPartialHtml(
-      `/_/timeline-item/${encodeURIComponent(threadRootId)}`,
-    );
-    if (!html) return false;
-
-    content.innerHTML = html;
-    // Swapped-in markup carries interactions whose per-element setup only runs
-    // on DOMContentLoaded (thread "Show more" toggle, feed video autoplay, audio
-    // waveform); re-initialize them or they stay inert until a full reload.
-    hydratePartial(content);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function refreshPostCardView(postId: string): Promise<boolean> {
-  try {
-    const timelineItem = document
-      .querySelector<HTMLElement>(`article[data-post-id="${postId}"]`)
-      ?.closest<HTMLElement>("[data-timeline-item]");
-    const html = await fetchPartialHtml(
-      `/_/post-card/${encodeURIComponent(postId)}`,
-    );
-    if (!html) return false;
-
-    if (timelineItem) {
-      const content = timelineItem.querySelector<HTMLElement>(
-        "[data-timeline-item-content]",
-      );
-      if (!content) return false;
-      content.innerHTML = html;
-      hydratePartial(content);
-      return true;
-    }
-
-    const article = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
-    if (!article) return false;
-
-    article.outerHTML = html;
-    // outerHTML detaches `article`; re-query the replacement to hydrate it.
-    const nextArticle = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
-    if (nextArticle) hydratePartial(nextArticle);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function refreshPostPageView(postId: string): Promise<boolean> {
-  try {
-    const container = document.querySelector<HTMLElement>(
-      `[data-post-view][data-post-view-id="${postId}"]`,
-    );
-    if (!container) return false;
-
-    const html = await fetchPartialHtml(
-      `/_/post-view/${encodeURIComponent(postId)}`,
-    );
-    if (!html) return false;
-
-    container.outerHTML = html;
-    // outerHTML detaches `container`; re-query the replacement to hydrate it
-    // (see refreshTimelineThreadView).
-    const next = document.querySelector<HTMLElement>(
-      `[data-post-view][data-post-view-id="${postId}"]`,
-    );
-    if (next) hydratePartial(next);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 async function refreshReplyTarget(
   detail: ComposeSubmitDetail,
 ): Promise<boolean> {
@@ -233,17 +204,47 @@ function refreshUploadToast() {
 }
 
 /**
- * Track completed upload mediaIds by clientId.
+ * Track completed upload results by clientId.
+ *
+ * By the time the user submits, a finished upload's promise has been deleted
+ * from `uploadPromises`, so the deferred handler can't look it up. This map
+ * provides a fallback: we record the result here as soon as any upload
+ * succeeds, and `buildRequestAttachments` reads it when `attachment.mediaId`
+ * is null and the clientId isn't in `uploadPromises`.
  *
- * When an attachment is migrated between editor instances (e.g. entering thread
- * mode while an upload is in-flight), `updateAttachmentStatus` fires on the old
- * detached editor — not the new thread editor. By the time the user submits,
- * the upload promise has been deleted from `uploadPromises`, so the deferred
- * handler can't look it up. This map provides a fallback: we record the result
- * here as soon as any upload succeeds, and `buildRequestAttachments` reads it
- * when `attachment.mediaId` is null and the clientId isn't in `uploadPromises`.
+ * The full result (not just the id) is kept so a failed publish can restore
+ * uploaded attachments into the reopened compose dialog.
  */
-const completedMediaIds = new Map<string, string>();
+const completedUploads = new Map<string, UploadSessionResult>();
+
+/**
+ * The editor holding an attachment now.
+ *
+ * Entering or leaving thread mode renders the post in a new editor element,
+ * which takes the attachments over from the one it replaced. An upload that
+ * outlives the swap has to follow the attachment: reporting to the editor it
+ * started in leaves the new one showing "uploading" forever, never showing an
+ * error, and keeping the finished file out of the local draft. Until a
+ * connected editor holds the attachment — the moment between the swap and the
+ * handover — the starting editor is still the one with the latest copy.
+ *
+ * @param started - The editor the upload was started from
+ * @param clientId - The attachment's client-side id
+ * @returns The editor to report progress and status to
+ */
+function attachmentOwner(
+  started: JantComposeEditor | null,
+  clientId: string,
+): JantComposeEditor | null {
+  if (!started || started.isConnected) return started;
+  const editors = document.querySelectorAll<JantComposeEditor>(
+    "jant-compose-editor",
+  );
+  for (const editor of editors) {
+    if (editor.hasAttachment(clientId)) return editor;
+  }
+  return started;
+}
 
 /**
  * Quickly grab the very first decoded frame of a video as a small poster.
@@ -314,6 +315,19 @@ function captureQuickPoster(file: File): Promise<Blob | null> {
   });
 }
 
+/** Bytes that settle whether a file is HEIC: the `ftyp` box and its brand. */
+const HEIC_SNIFF_BYTES = 12;
+
+/**
+ * Whether the file's bytes say HEIC/HEIF, whatever its name or type claims.
+ * Reads the header only — the decoder's own check pulled the whole file into
+ * memory to look at four bytes of it.
+ */
+async function isHeicFile(file: File): Promise<boolean> {
+  const head = await file.slice(0, HEIC_SNIFF_BYTES).arrayBuffer();
+  return sniffImageMimeType(new Uint8Array(head)) === "image/heic";
+}
+
 /**
  * Upload a single file: process locally, then send it through the upload
  * session API so the backend can choose relay vs direct transport.
@@ -324,6 +338,7 @@ async function uploadFile(
   clientId: string,
   editor: JantComposeEditor | null,
 ): Promise<string | null> {
+  const owner = () => attachmentOwner(editor, clientId);
   // Capture cheap metadata up-front so we can release `file` (the original
   // potentially-huge blob) as soon as transcoding finishes. On iOS Safari
   // holding a 300MB+ source blob alongside the transcoded output, upload
@@ -343,7 +358,7 @@ async function uploadFile(
     if (fileType.startsWith("video/")) {
       // Video: transcode with mediabunny (requires WebCodecs)
       if (!VideoProcessor.isSupported()) {
-        editor?.updateAttachmentStatus(
+        owner()?.updateAttachmentStatus(
           clientId,
           "error",
           null,
@@ -354,14 +369,19 @@ async function uploadFile(
 
       // Capture the first frame quickly so Safari shows a preview while
       // the heavy transcoding runs. Chrome shows it natively via
-      // <video preload="metadata">, Safari does not.
-      captureQuickPoster(file).then((blob) => {
-        if (blob) editor?.updateAttachmentPoster(clientId, blob);
-      });
-
-      editor?.updateAttachmentStatus(clientId, "processing", null, null);
+      // <video preload="metadata">, Safari does not. Kept, rather than shown
+      // and dropped: it is also the fallback for the upload below, so the
+      // card and the stored media can never disagree about having a poster.
+      const quickPoster = captureQuickPoster(file)
+        .then((blob) => {
+          if (blob) owner()?.updateAttachmentPoster(clientId, blob);
+          return blob;
+        })
+        .catch(() => null);
+
+      owner()?.updateAttachmentStatus(clientId, "processing", null, null);
       const result = await VideoProcessor.processToFile(file, (progress) => {
-        editor?.updateAttachmentProgress(clientId, progress);
+        owner()?.updateAttachmentProgress(clientId, progress);
       });
       toUpload = result.file;
       // Drop the original blob ref now that we have the transcoded output.
@@ -370,14 +390,18 @@ async function uploadFile(
       height = result.height;
       durationSeconds = result.durationSeconds;
       blurhash = result.blurhash;
-      poster = result.poster;
+      // The probe's poster is the better one — a frame from a tenth of the way
+      // in, at full decode quality. Falling back to the quick one costs a
+      // slightly worse still; not falling back costs a thumbnail entirely, on
+      // exactly the files whose frames the probe could not read.
+      poster = result.poster ?? (await quickPoster) ?? undefined;
       if (poster) {
-        editor?.updateAttachmentPoster(clientId, poster);
+        owner()?.updateAttachmentPoster(clientId, poster);
       }
     } else if (fileType.startsWith("audio/")) {
       // Audio: transcode to AAC (.m4a) (requires WebCodecs)
       if (!AudioProcessor.isSupported()) {
-        editor?.updateAttachmentStatus(
+        owner()?.updateAttachmentStatus(
           clientId,
           "error",
           null,
@@ -393,9 +417,9 @@ async function uploadFile(
         // Waveform extraction is best-effort
       }
 
-      editor?.updateAttachmentStatus(clientId, "processing", null, null);
+      owner()?.updateAttachmentStatus(clientId, "processing", null, null);
       const result = await AudioProcessor.processToFile(file, (progress) => {
-        editor?.updateAttachmentProgress(clientId, progress);
+        owner()?.updateAttachmentProgress(clientId, progress);
       });
       toUpload = result.file;
       file = null as unknown as File;
@@ -407,9 +431,11 @@ async function uploadFile(
       // Image: convert HEIC/HEIF if needed, then resize + convert to WebP
       let imageFile = file;
       try {
-        const { isHeic, heicTo } = await import("heic-to");
-        if (await isHeic(imageFile)) {
-          editor?.updateAttachmentStatus(clientId, "processing", null, null);
+        if (await isHeicFile(imageFile)) {
+          // heic-to carries libheif — a 3MB chunk — so it is fetched for a
+          // file whose bytes say HEIC, not for every photo on the off chance.
+          const { heicTo } = await import("heic-to");
+          owner()?.updateAttachmentStatus(clientId, "processing", null, null);
           const blob = await heicTo({
             blob: imageFile,
             type: "image/jpeg",
@@ -418,16 +444,17 @@ async function uploadFile(
           imageFile = new File([blob], fileName.replace(/\.heic$/i, ".jpg"), {
             type: "image/jpeg",
           });
-          editor?.updateAttachmentPreview(clientId, imageFile);
+          owner()?.updateAttachmentPreview(clientId, imageFile);
         }
         const result = await ImageProcessor.processToFile(imageFile);
         toUpload = result.file;
         width = result.width;
         height = result.height;
+        blurhash = result.blurhash;
         file = null as unknown as File;
         imageFile = null as unknown as File;
       } catch {
-        editor?.removeAttachment(clientId);
+        owner()?.removeAttachment(clientId);
         showToast("Image format not supported.", "error");
         return null;
       }
@@ -436,21 +463,7 @@ async function uploadFile(
     }
 
     // Update status to uploading
-    editor?.updateAttachmentStatus(clientId, "uploading", null, null);
-
-    // Extract metadata for non-video files (video metadata comes from VideoProcessor)
-    // Audio waveform is already extracted above (before AudioProcessor runs).
-    if (!fileType.startsWith("video/")) {
-      const meta = await extractMediaMetadata(toUpload);
-      width ??= meta.width;
-      height ??= meta.height;
-      blurhash ??= meta.blurhash;
-      waveform ??= meta.waveform;
-      if (!poster && meta.poster) {
-        poster = meta.poster;
-        editor?.updateAttachmentPoster(clientId, poster);
-      }
-    }
+    owner()?.updateAttachmentStatus(clientId, "uploading", null, null);
 
     // Text attachments keep summary/chars in the media record. This covers
     // plain text-file uploads (.md, .txt, .csv). Jant-composed rich text
@@ -487,7 +500,7 @@ async function uploadFile(
         chars,
       },
       (progress) => {
-        editor?.updateAttachmentProgress(clientId, progress);
+        owner()?.updateAttachmentProgress(clientId, progress);
         uploadProgress.set(clientId, progress);
         refreshUploadToast();
       },
@@ -495,14 +508,20 @@ async function uploadFile(
 
     uploadProgress.set(clientId, 1);
     refreshUploadToast();
-    editor?.updateAttachmentStatus(clientId, "done", result.id, null);
-    completedMediaIds.set(clientId, result.id);
+    owner()?.updateAttachmentStatus(
+      clientId,
+      "done",
+      result.id,
+      null,
+      result.url,
+    );
+    completedUploads.set(clientId, result);
     return result.id;
   } catch (error) {
     uploadProgress.delete(clientId);
     refreshUploadToast();
     const message = error instanceof Error ? error.message : "Upload failed";
-    editor?.updateAttachmentStatus(clientId, "error", null, message);
+    owner()?.updateAttachmentStatus(clientId, "error", null, message);
     // Error is shown on the attachment thumbnail; only toast when there's no editor context.
     if (!editor) showToast(message, "error");
     return null;
@@ -516,7 +535,7 @@ document.addEventListener("jant:attachment-removed", (e: Event) => {
     e as CustomEvent<{ clientId: string; mediaId: string | null }>
   ).detail;
 
-  completedMediaIds.delete(clientId);
+  completedUploads.delete(clientId);
 
   if (mediaId) {
     // Upload already finished — fire-and-forget delete
@@ -552,19 +571,6 @@ document.addEventListener("jant:files-selected", (e: Event) => {
   }
 });
 
-// ── Reply trigger handler ───────────────────────────────────────────
-
-document.addEventListener("click", (e: MouseEvent) => {
-  const trigger = (e.target as HTMLElement).closest<HTMLButtonElement>(
-    "[data-reply-trigger]",
-  );
-  if (!trigger) return;
-
-  const article = trigger.closest<HTMLElement>("article[data-post]");
-  if (!article) return;
-  void openReplyForArticle(article);
-});
-
 // ── Submit handler ──────────────────────────────────────────────────
 
 /** Build the JSON body for both create and update requests */
@@ -628,6 +634,12 @@ function buildPostBody(
     attachments: attachments.length > 0 ? attachments : undefined,
     replyToId: detail.replyToId || undefined,
     quietReply: detail.quietReply || undefined,
+    // Absent means the author left the language to detection; the server runs
+    // the same detector against the final text.
+    language: detail.language || undefined,
+    // A translation group is only ever minted on create — an edit that carried
+    // this would silently regroup an existing post.
+    translationOfId: isEdit ? undefined : detail.translationOfId || undefined,
   };
 }
 
@@ -651,7 +663,7 @@ function buildRequestAttachments(
       const mediaId =
         attachment.mediaId ??
         pendingMediaIds.get(attachment.clientId) ??
-        completedMediaIds.get(attachment.clientId);
+        completedUploads.get(attachment.clientId)?.id;
       if (!mediaId) continue;
 
       requestAttachments.push({
@@ -694,36 +706,54 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     getComposeDialogFromEventTarget(event.target) ??
     (document.querySelector("jant-compose-dialog") as JantComposeDialog | null);
   const isPageMode = !!composeEl?.pageMode;
+  const isDraftPreviewPage = !!document.querySelector("[data-preview-status]");
 
   // Get labels for toast messages
   const labels = composeEl?.labels;
   const uploadingMsg = labels?.uploading ?? "Uploading...";
+  const publishingMsg = labels?.publishing ?? "Publishing...";
+  const savingMsg = labels?.saving ?? "Saving...";
   const hasInlinePending = detail.threadPosts
     ? detail.threadPosts.some((p) => bodyHasPendingInline(p.body))
     : bodyHasPendingInline(detail.body);
   const hasPending = detail.pendingAttachments.length > 0 || hasInlinePending;
   const publishedMsg = labels?.published ?? "Published!";
   const viewLabel = labels?.view ?? "View";
-
-  // Show persistent toast only when uploads are still in flight
-  if (hasPending) {
-    showPersistentToast("compose-deferred", uploadingMsg);
-    if (detail.pendingAttachments.length > 0) {
-      activeUploadToast = {
-        clientIds: detail.pendingAttachments.map((a) => a.clientId),
-        baseMsg: uploadingMsg,
-      };
-      refreshUploadToast();
-    }
+  const isEdit = !!detail.editPostId;
+  const isThread = !!(detail.threadPosts && detail.threadPosts.length >= 2);
+  // Publishing a draft goes through the edit endpoint but still ends published.
+  const willPublish =
+    detail.status === "published" && (!isEdit || !!detail.draftSourceId);
+
+  // The composer closes the moment it dispatches, so this toast is the only
+  // sign that work is still running. Uploads name themselves and grow a
+  // percentage; everything else says what it is doing — a Link post can sit on
+  // the server for seconds while its preview thumbnail is fetched and stored.
+  let progressToastOpen = true;
+  showPersistentToast(
+    "compose-deferred",
+    hasPending ? uploadingMsg : willPublish ? publishingMsg : savingMsg,
+  );
+  if (detail.pendingAttachments.length > 0) {
+    activeUploadToast = {
+      clientIds: detail.pendingAttachments.map((a) => a.clientId),
+      baseMsg: uploadingMsg,
+    };
+    refreshUploadToast();
   }
 
-  /** Show result toast — replaces persistent toast if one exists, otherwise shows a new one */
+  /**
+   * Show a result toast. The first one takes over the progress toast in place;
+   * a later message (a retry result, say) gets its own toast instead of
+   * overwriting one that has not been read yet.
+   */
   const toastMsg = (msg: string, type: "success" | "error" = "success") => {
     if (activeUploadToast) {
       for (const id of activeUploadToast.clientIds) uploadProgress.delete(id);
       activeUploadToast = null;
     }
-    if (hasPending) {
+    if (progressToastOpen) {
+      progressToastOpen = false;
       replaceWithAutoClose("compose-deferred", msg, type);
     } else {
       showToast(msg, type);
@@ -751,12 +781,48 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     }
     composeEl?.clearLocalDraftFromStorage?.();
   };
+  /**
+   * Uploads that completed before the publish failed. The local draft's own
+   * media snapshot misses uploads that finished after the dialog closed, so
+   * the reopened compose merges these over it.
+   */
+  const collectRestorableMedia = (): LocalDraftMedia[] => {
+    const details = detail.threadPosts?.length ? detail.threadPosts : [detail];
+    const media: LocalDraftMedia[] = [];
+    const seen = new Set<string>();
+    for (const d of details) {
+      for (const attachment of d.attachments) {
+        if (attachment.type !== "media" || seen.has(attachment.clientId)) {
+          continue;
+        }
+        seen.add(attachment.clientId);
+        const upload = completedUploads.get(attachment.clientId);
+        if (!upload) continue;
+        media.push({
+          clientId: attachment.clientId,
+          mediaId: upload.id,
+          url: upload.url,
+          mimeType: upload.mimeType,
+          name: upload.filename || undefined,
+          alt: attachment.alt || undefined,
+        });
+      }
+    }
+    return media;
+  };
+
   const reopenComposeAfterFailure = async () => {
     if (!composeEl || isPageMode) return;
 
+    if (detail.draftSourceId) {
+      if (typeof composeEl.openDraft !== "function") return;
+      await composeEl.openDraft(detail.draftSourceId);
+      return;
+    }
+
     if (isEdit && detail.editPostId) {
       if (typeof composeEl.openEdit !== "function") return;
-      await composeEl.openEdit(detail.editPostId);
+      await composeEl.openEdit(detail.editPostId, { restoreToast: false });
       return;
     }
 
@@ -772,13 +838,22 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
               id: detail.replyRefreshId,
             }
           : undefined,
-        { restoreDraft: true, initialFormat: detail.format },
+        {
+          restoreDraft: true,
+          initialFormat: detail.format,
+          restoreToast: false,
+          restoreMedia: collectRestorableMedia(),
+        },
       );
       return;
     }
 
     if (typeof composeEl.openNew !== "function") return;
-    await composeEl.openNew({ restoreDraft: true });
+    await composeEl.openNew({
+      restoreDraft: true,
+      restoreToast: false,
+      restoreMedia: collectRestorableMedia(),
+    });
   };
   const handleSubmitError = async (message: string) => {
     clearPageLoading();
@@ -801,8 +876,6 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     globalThis.location.assign(composeEl.closeHref || publicPath("/"));
     return true;
   };
-  const isEdit = !!detail.editPostId;
-  const isThread = !!(detail.threadPosts && detail.threadPosts.length >= 2);
   let draftFallback: "upload" | "server" | null = null;
 
   try {
@@ -818,10 +891,10 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     const results = await Promise.all(pendingPromises);
 
     // If any pending upload failed (null result where we expected a mediaId
-    // AND the upload wasn't already tracked in completedMediaIds):
+    // AND the upload wasn't already tracked in completedUploads):
     const failedCount = results.filter(
       (id, i) =>
-        id === null && !completedMediaIds.has(pendingClientIds[i] ?? ""),
+        id === null && !completedUploads.has(pendingClientIds[i] ?? ""),
     ).length;
     if (failedCount > 0) {
       if (detail.status === "published" && !isEdit) {
@@ -872,30 +945,23 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         threadBody.replaceThreadId = detail.editPostId;
       }
 
-      const res = await fetch("/compose/thread", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify(threadBody),
-      });
+      const res = await postCompose(
+        "/compose/thread",
+        JSON.stringify(threadBody),
+      );
 
-      if (!res.ok) {
-        // Server error on publish: retry as draft
+      if (!res?.ok) {
+        // The publish did not land — whether the server refused it or the
+        // request never arrived. Try to keep the work as a draft either way.
         if (detail.status === "published" && !draftFallback) {
           const retryPayload = {
             posts: postsPayload.map((p) => ({ ...p, status: "draft" })),
           };
-          const retryRes = await fetch("/compose/thread", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Accept: "application/json",
-            },
-            body: JSON.stringify(retryPayload),
-          });
-          if (retryRes.ok) {
+          const retryRes = await postCompose(
+            "/compose/thread",
+            JSON.stringify(retryPayload),
+          );
+          if (retryRes?.ok) {
             draftFallback = "server";
             clearRecoveredLocalDraft();
             const fallbackMsg =
@@ -906,10 +972,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
             return;
           }
         }
-        const data = await readJsonObject(res);
-        await handleSubmitError(
-          getJsonString(data, "error") ?? "Something went wrong",
-        );
+        await handleSubmitError(await submitErrorMessage(res, labels));
         return;
       }
 
@@ -930,7 +993,12 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
 
       if (threadStatus === "published") {
         clearRecoveredLocalDraft();
-        if (isPageMode) {
+        if (isDraftPreviewPage && detail.draftSourceId) {
+          queueSuccessToast(publishedMsg);
+          globalThis.location.assign(
+            threadPermalink ?? globalThis.location.pathname,
+          );
+        } else if (isPageMode) {
           await refreshComposeCollections();
           resetPageCompose();
           toastMsg(publishedMsg);
@@ -945,6 +1013,11 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         }
       } else {
         clearRecoveredLocalDraft();
+        if (isDraftPreviewPage && detail.draftSourceId) {
+          queueSuccessToast(threadToast ?? "Draft saved.");
+          globalThis.location.assign(globalThis.location.pathname);
+          return;
+        }
         await refreshComposeCollections();
         if (!leavePageAfterConfirmSave()) resetPageCompose();
         toastMsg(threadToast ?? "Draft saved.");
@@ -982,29 +1055,24 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       requestAttachments,
     );
 
-    const res = await fetch(endpoint, {
+    const res = await postCompose(
+      endpoint,
+      JSON.stringify(bodyPayload),
       method,
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify(bodyPayload),
-    });
+    );
 
-    if (!res.ok) {
-      // Server error on a new publish: retry as draft
+    if (!res?.ok) {
+      // As in thread mode: a refused request and a request that never arrived
+      // both mean the post is not up, so both get the save-as-draft attempt.
       if (detail.status === "published" && !isEdit && !draftFallback) {
         const retryPayload = { ...bodyPayload, status: "draft" };
-        const retryRes = await fetch(endpoint, {
+        const retryRes = await postCompose(
+          endpoint,
+          JSON.stringify(retryPayload),
           method,
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-          },
-          body: JSON.stringify(retryPayload),
-        });
+        );
 
-        if (retryRes.ok) {
+        if (retryRes?.ok) {
           draftFallback = "server";
           clearRecoveredLocalDraft();
           const retryData = await readJsonObject(retryRes);
@@ -1021,10 +1089,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         }
       }
 
-      const data = await readJsonObject(res);
-      await handleSubmitError(
-        getJsonString(data, "error") ?? "Something went wrong",
-      );
+      await handleSubmitError(await submitErrorMessage(res, labels));
       return;
     }
 
@@ -1033,21 +1098,50 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       const editData = await readJsonObject(res);
       const editPostId = detail.editPostId ?? "";
       const newSlug = getJsonString(editData, "slug");
-      const newPath = newSlug ? publicPath(`/${newSlug}`) : null;
+      const nextStatus = getJsonString(editData, "status") ?? detail.status;
+      const newPath = newSlug
+        ? publicPath(
+            nextStatus === "draft" ? `/preview/${newSlug}` : `/${newSlug}`,
+          )
+        : null;
+      const editSuccessMessage =
+        nextStatus === "draft"
+          ? "Draft saved."
+          : detail.draftSourceId
+            ? publishedMsg
+            : "Post updated.";
+
+      // Draft preview pages cannot use the public post-view refresh endpoint.
+      // Reload the authenticated preview so saved content stays visible.
+      if (nextStatus === "draft") {
+        if (isDraftPreviewPage) {
+          queueSuccessToast(editSuccessMessage);
+          globalThis.location.assign(newPath ?? globalThis.location.pathname);
+          return;
+        }
+
+        // Drafts opened from the compose panel stay in that workflow. The
+        // completion event lets a pending "save and open drafts" action fetch
+        // the updated list only after the write has finished.
+        await refreshComposeCollections();
+        toastMsg(editSuccessMessage);
+        dispatchSubmitComplete(composeEl, "draft");
+        return;
+      }
 
       if (isPageMode) {
         // On the post detail page: refresh or navigate if slug changed
         if (newPath && newPath !== globalThis.location.pathname) {
-          queueSuccessToast("Post updated.");
+          queueSuccessToast(editSuccessMessage);
           globalThis.location.assign(newPath);
         } else {
           const refreshed =
             editPostId && (await refreshPostPageView(editPostId));
           if (!refreshed) {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.assign(globalThis.location.pathname);
           } else {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           }
         }
       } else if (editPostId) {
@@ -1057,15 +1151,15 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         );
         if (postView) {
           if (newPath && newPath !== globalThis.location.pathname) {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.assign(newPath);
             return;
           }
           const refreshed = await refreshPostPageView(editPostId);
           if (refreshed) {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           } else {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.reload();
           }
         } else {
@@ -1080,14 +1174,14 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
             ? await refreshTimelineThreadView(threadRootId)
             : await refreshPostCardView(editPostId);
           if (refreshed) {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           } else {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.reload();
           }
         }
       } else {
-        queueSuccessToast("Post updated.");
+        queueSuccessToast(editSuccessMessage);
         globalThis.location.reload();
       }
       return;
@@ -1147,7 +1241,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       dispatchSubmitComplete(composeEl, "draft");
     }
   } catch {
-    await handleSubmitError("Something went wrong");
+    await handleSubmitError(await submitErrorMessage(null, labels));
   }
 });