@tokenoftrust/storefront-runner 1.4.0 → 1.4.2-rc.0

package/apps/storefront/src/components/admin/AdminBlogTab.astro

@@ -0,0 +1,1432 @@
+---
+/**
+ * Blog tab — read-only management list for the resolved tenant's blog content
+ * (B2.1 of docs/plans/2026-08-21-blog-platform-workstream.md). Rides the same
+ * per-tenant × multi-collection engine the reader routes use
+ * (src/lib/blog/collection.ts): every post — draft, published, unlisted, and
+ * scheduled — is listed via `listPosts(tenantId, collection, { includeUnpublished })`
+ * across the collections that actually have content for THIS tenant
+ * (`listCollections`). No tenant or collection is hardcoded.
+ *
+ * READ-ONLY: list + client-side status/category/collection filter + title
+ * search. Row actions are inert placeholders here — add/publish/unpublish/delete
+ * (the content-only fast lane) is B2.2, which builds directly on this DOM. The
+ * row data hooks (`data-blog-row`, `data-slug`, `data-collection`, `data-status`)
+ * and the disabled action buttons (`data-blog-action`) are the contract B2.2
+ * wires to.
+ */
+import { listCollections, listPosts, categorySlug } from "@/lib/blog/collection.js";
+import type { BlogPostSummary, PostStatus } from "@/lib/blog/types.js";
+import { getTopPosts, type DailyViews } from "@/lib/blog/viewCounts.js";
+import { type Reaction } from "@/lib/blog/reactions.js";
+import { formatDate } from "@/lib/format";
+import AdminBlogDetailRail from "./AdminBlogDetailRail.astro";
+
+const { tenant } = Astro.locals;
+
+const collections = listCollections(tenant.tenant_id);
+const rows = (
+  await Promise.all(
+    collections.map(async (collection) =>
+      (await listPosts(tenant.tenant_id, collection, { includeUnpublished: true })).map((post) => ({
+        collection,
+        post,
+      })),
+    ),
+  )
+)
+  .flat()
+  // Newest-edited first across every collection, so the freshest work is on top.
+  .sort((a, b) => {
+    const at = a.post.modifiedAt || a.post.publishedAt;
+    const bt = b.post.modifiedAt || b.post.publishedAt;
+    return at < bt ? 1 : at > bt ? -1 : 0;
+  });
+
+// Editorial "Discussion" link-out (C1): every post's edits ride ONE candidate PR
+// with a deterministic changeId `blog-<collection>-<slug>` (branch
+// `candidate/<changeId>`), whose OPEN forge PR carries a web `url` we link to.
+//
+// This resolution is DELIBERATELY NOT done here: a live `repo_pr_list` in this
+// frontmatter ran during the SSR of EVERY admin tab (admin.astro renders them all)
+// and blocked the whole document stream on slow Gitea (seconds → tens of seconds).
+// The links are a best-effort enhancement, so SSR ships an EMPTY map (the rail omits
+// the links) and the reliable path is a lazy client-side load — resolved only when
+// the Blog tab is viewed, where Gitea latency is an invisible async fetch instead of
+// a render-blocking stall. TODO(lazy-discussion-links): wire that client fetch.
+const discussions: Record<string, { prNumber: number; url: string }> = {};
+
+const multiCollection = collections.length > 1;
+
+// The four post statuses the engine can surface (B0.1 + B3.1's "scheduled").
+const STATUS_ORDER: PostStatus[] = ["published", "draft", "scheduled", "unlisted"];
+const STATUS_LABEL: Record<PostStatus, string> = {
+  published: "Published",
+  draft: "Draft",
+  scheduled: "Scheduled",
+  unlisted: "Unlisted",
+};
+// Status → admin chip tone (see admin.astro's .chip.* palette).
+const STATUS_TONE: Record<PostStatus, string> = {
+  published: "green",
+  draft: "",
+  scheduled: "blue",
+  unlisted: "amber",
+};
+
+const statusCounts = Object.fromEntries(
+  STATUS_ORDER.map((status) => [status, rows.filter((r) => r.post.status === status).length]),
+) as Record<PostStatus, number>;
+
+// Category filter options: the union of categories actually present, so the
+// dropdown never offers a pillar that matches nothing in this list.
+const categoryOptions = [
+  ...new Map(
+    rows.flatMap((r) => r.post.categories).map((name) => [categorySlug(name), name]),
+  ).entries(),
+]
+  .map(([slug, label]) => ({ slug, label }))
+  .sort((a, b) => a.label.localeCompare(b.label));
+
+const columnCount = multiCollection ? 7 : 6;
+
+// ---- I4: language-variant chips ----
+// Group the rows that share a `translationGroupId` so each grouped article shows
+// its full variant set at a glance ("EN live · ES draft"). Pure read over
+// `translationGroupId` + each variant's `inLanguage`+`status`. Singletons (no
+// group id) render no chips.
+interface LangVariant {
+  lang: string;
+  status: PostStatus;
+  slug: string;
+  collection: string;
+}
+const translationGroups = new Map<string, LangVariant[]>();
+for (const { collection, post } of rows) {
+  if (!post.translationGroupId) continue;
+  const variant: LangVariant = {
+    lang: post.inLanguage ?? "en",
+    status: post.status,
+    slug: post.slug,
+    collection,
+  };
+  const existing = translationGroups.get(post.translationGroupId);
+  if (existing) existing.push(variant);
+  else translationGroups.set(post.translationGroupId, [variant]);
+}
+// Stable per-group ordering by language tag so the chip row doesn't reshuffle.
+for (const variants of translationGroups.values()) {
+  variants.sort((a, b) => a.lang.localeCompare(b.lang));
+}
+// A compact language label for a chip — the tag upper-cased ("es" -> "ES",
+// "pt-BR" -> "PT-BR").
+const langLabel = (code: string) => code.toUpperCase();
+// A one-word status for the chip, tighter than the full STATUS_LABEL.
+const STATUS_SHORT: Record<PostStatus, string> = {
+  published: "live",
+  draft: "draft",
+  scheduled: "queued",
+  unlisted: "unlisted",
+};
+
+const primaryDate = (post: BlogPostSummary) => post.modifiedAt || post.publishedAt;
+const rowSearch = (r: { collection: string; post: BlogPostSummary }) =>
+  [r.post.title, r.post.slug, r.post.author, r.collection].join(" ").toLowerCase();
+
+// ---- Engagement: top posts by views (rides B3.3's RUM-beacon view counters) ----
+// DELIBERATELY NOT computed in SSR. getTopPosts fans out a 30-day KV view series PER
+// post and getReactionCounts reads per-reaction PER post — MEASURED at 1,425 KV reads
+// for this tenant (98% of the entire admin document's KV I/O), and it GROWS with post
+// count. Because admin.astro renders every tab server-side, that fan-out dominated the
+// whole admin document render (7-11s of KV wait, ~450ms CPU). A Promise.race budget did
+// NOT help: it caps the awaited value but the 1,425 reads still fire. So SSR ships the
+// empty/zero state (identical to KV-absent local dev, which the panels already handle),
+// and engagement must load LAZILY client-side when the Blog tab is viewed — ideally from
+// ONE precomputed ranking, never a per-post live fan-out.
+// TODO(lazy-blog-analytics): wire the client fetch + a precomputed aggregate.
+const ANALYTICS_WINDOW_DAYS = 30;
+const topPosts: (Awaited<ReturnType<typeof getTopPosts>>[number] & { last7: number })[] = [];
+const hasEngagement = false;
+const totalWindowViews = 0;
+const reactions: Record<string, Record<Reaction, number>> = {};
+
+// A sparkline polyline (points string) for a post's day series, scaled to fit.
+const sparkPoints = (series: DailyViews[] | undefined, w = 108, h = 26): string => {
+  const vals = (series ?? []).map((d) => d.views);
+  if (vals.length === 0) return `0,${h} ${w},${h}`;
+  const max = Math.max(1, ...vals);
+  if (vals.length === 1) return `0,${h - (vals[0]! / max) * h} ${w},${h - (vals[0]! / max) * h}`;
+  return vals
+    .map((v, i) => `${((i / (vals.length - 1)) * w).toFixed(1)},${(h - (v / max) * h).toFixed(1)}`)
+    .join(" ");
+};
+---
+
+<section
+  id="blog"
+  class="band blog-tab"
+  aria-labelledby="blog-title"
+  data-admin-panel
+  data-agent-scope="blog"
+  role="tabpanel"
+  data-multi-collection={multiCollection ? "true" : "false"}
+  data-single-collection={multiCollection ? undefined : (collections[0] ?? "blog")}
+  data-app-domain={tenant.appDomain}
+>
+  <div class="section-title">
+    <div>
+      <h2 id="blog-title">Blog</h2>
+      <p>
+        Every article across this store's {multiCollection ? "collections" : "blog"} — drafts,
+        scheduled, and published in one place.
+      </p>
+    </div>
+    <div class="actions">
+      <button class="btn primary" type="button" data-blog-new-toggle aria-expanded="false">
+        <svg><use href="#i-file"></use></svg>New article
+      </button>
+    </div>
+  </div>
+
+  <p class="note blog-msg" data-blog-msg hidden></p>
+
+  <form class="panel blog-new-form" data-blog-new-form hidden>
+    <div class="panel-body grid">
+      <p class="note">
+        Creates a <b>draft</b> post as a content-only change. Review &amp; publish it from the
+        <a href="#publish" data-admin-tab-link>Publish</a> tab.
+      </p>
+      <div class="blog-new-grid">
+        {multiCollection && (
+          <label class="blog-field">
+            <span class="blog-field-label">Collection</span>
+            <select data-blog-new-collection>
+              {collections.map((collection) => (
+                <option value={collection}>{collection}</option>
+              ))}
+            </select>
+          </label>
+        )}
+        <label class="blog-field blog-field-grow">
+          <span class="blog-field-label">Title</span>
+          <input type="text" placeholder="Article title" autocomplete="off" data-blog-new-title required />
+        </label>
+        <label class="blog-field">
+          <span class="blog-field-label">Category</span>
+          <input type="text" placeholder="e.g. Category Insurance" autocomplete="off" list="blog-category-list" data-blog-new-category />
+          <datalist id="blog-category-list">
+            {categoryOptions.map((category) => (
+              <option value={category.label}></option>
+            ))}
+          </datalist>
+        </label>
+        <label class="blog-field">
+          <span class="blog-field-label">Author</span>
+          <input type="text" placeholder="Byline" autocomplete="off" data-blog-new-author />
+        </label>
+      </div>
+      <div class="blog-new-actions">
+        <button class="btn primary" type="submit" data-blog-new-submit>Create draft</button>
+        <button class="btn" type="button" data-blog-new-cancel>Cancel</button>
+      </div>
+    </div>
+  </form>
+
+  <div class="grid cols-4 blog-summary">
+    <div class="metric">
+      <span>All posts</span>
+      <strong>{rows.length}</strong>
+      <small>Across {collections.length} {collections.length === 1 ? "collection" : "collections"}</small>
+    </div>
+    {STATUS_ORDER.map((status) => (
+      <div class="metric">
+        <span>{STATUS_LABEL[status]}</span>
+        <strong>{statusCounts[status]}</strong>
+        <small>{status === "published" ? "Live on the site" : status === "scheduled" ? "Queued to publish" : status === "unlisted" ? "Reachable, not listed" : "Not yet published"}</small>
+      </div>
+    ))}
+  </div>
+
+  {rows.length > 0 && (
+    <div class="panel blog-analytics" data-blog-analytics>
+      <div class="panel-head">
+        <h3><svg><use href="#i-chart"></use></svg>Engagement</h3>
+        <span class="chip">Top posts · last {ANALYTICS_WINDOW_DAYS} days</span>
+      </div>
+      <div class="panel-body grid">
+        {hasEngagement ? (
+          <>
+            <p class="note blog-analytics-lede">
+              {totalWindowViews.toLocaleString("en-US")} views in the last {ANALYTICS_WINDOW_DAYS} days
+              across your most-read articles. Counts ride the site's page-view beacon — no cookies, no
+              per-visitor tracking.
+            </p>
+            <div class="table-wrap">
+              <table class="blog-table blog-analytics-table">
+                <thead>
+                  <tr>
+                    <th class="rank">#</th>
+                    <th>Article</th>
+                    <th class="num">7d</th>
+                    <th class="num">{ANALYTICS_WINDOW_DAYS}d</th>
+                    <th class="num">Lifetime</th>
+                    <th class="trend">Trend</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {topPosts.map((post, index) => (
+                    <tr>
+                      <td class="rank">{index + 1}</td>
+                      <td class="blog-analytics-article">
+                        <b>{post.title}</b>
+                        <span class="subtle">{multiCollection ? `${post.collection}/` : ""}{post.slug}</span>
+                      </td>
+                      <td class="num">{post.last7.toLocaleString("en-US")}</td>
+                      <td class="num"><b>{post.views.toLocaleString("en-US")}</b></td>
+                      <td class="num">{post.lifetime.toLocaleString("en-US")}</td>
+                      <td class="trend">
+                        <svg class="blog-spark" viewBox="0 0 108 26" preserveAspectRatio="none" aria-hidden="true">
+                          <polyline points={sparkPoints(post.series)} fill="none" />
+                        </svg>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </>
+        ) : (
+          <p class="note">
+            No views recorded yet. As readers visit your published articles, the most-read ones will
+            rank here — views over the last 7 and {ANALYTICS_WINDOW_DAYS} days, with a trend sparkline.
+          </p>
+        )}
+      </div>
+    </div>
+  )}
+
+  {rows.length > 0 && (
+    <div
+      class="panel blog-newsletter"
+      data-newsletter-panel
+      data-single-collection={multiCollection ? undefined : (collections[0] ?? "blog")}
+    >
+      <div class="panel-head">
+        <h3><svg><use href="#i-export"></use></svg>Newsletter</h3>
+        <span class="chip">Weekly digest</span>
+      </div>
+      <div class="panel-body grid">
+        <p class="note">
+          Email the weekly digest of new posts to confirmed subscribers. You'll see a preview —
+          how many posts and recipients — before anything is sent.
+        </p>
+        <div class="blog-newsletter-actions">
+          {multiCollection && (
+            <label class="blog-field">
+              <span class="blog-field-label">Collection</span>
+              <select data-newsletter-collection>
+                {collections.map((collection) => (
+                  <option value={collection}>{collection}</option>
+                ))}
+              </select>
+            </label>
+          )}
+          <button class="btn primary" type="button" data-newsletter-send>
+            <svg><use href="#i-export"></use></svg>Send digest…
+          </button>
+        </div>
+      </div>
+    </div>
+  )}
+
+  <dialog class="blog-newsletter-dialog" data-newsletter-dialog aria-labelledby="newsletter-dialog-title">
+    <form method="dialog" class="blog-newsletter-dialog-form">
+      <h3 id="newsletter-dialog-title">Send weekly digest</h3>
+      <p class="note" data-newsletter-dialog-status>Calculating…</p>
+      <div class="blog-newsletter-preview" data-newsletter-preview hidden>
+        <div class="metric">
+          <span>New posts</span>
+          <strong data-newsletter-post-count>0</strong>
+        </div>
+        <div class="metric">
+          <span>Recipients</span>
+          <strong data-newsletter-recipient-count>0</strong>
+        </div>
+      </div>
+      <p class="note blog-newsletter-warn" data-newsletter-dialog-warn hidden></p>
+      <div class="blog-newsletter-dialog-actions">
+        <button class="btn primary" type="button" data-newsletter-confirm hidden>Send now</button>
+        <button class="btn" type="button" data-newsletter-cancel>Cancel</button>
+      </div>
+    </form>
+  </dialog>
+
+  <div class="blog-workspace" data-has-rail={rows.length > 0 ? "true" : "false"}>
+  <div class="panel blog-list-panel">
+    <div class="panel-head">
+      <h3><svg><use href="#i-file"></use></svg>Posts</h3>
+      <span class="chip" data-blog-visible-count>{rows.length} shown</span>
+    </div>
+    <div class="panel-body grid">
+      {rows.length === 0 ? (
+        <p class="note">
+          This store has no blog content yet. Articles live in
+          <code>tenants/&lt;store&gt;/content/&lt;collection&gt;/posts/</code>.
+        </p>
+      ) : (
+        <>
+          <div class="blog-filters">
+            <div class="tabs blog-status-seg" role="group" aria-label="Filter by status">
+              <button class="tab active" type="button" data-blog-status-filter="all">
+                All <span class="blog-seg-count">{rows.length}</span>
+              </button>
+              {STATUS_ORDER.filter((status) => statusCounts[status] > 0).map((status) => (
+                <button class="tab" type="button" data-blog-status-filter={status}>
+                  {STATUS_LABEL[status]} <span class="blog-seg-count">{statusCounts[status]}</span>
+                </button>
+              ))}
+            </div>
+
+            <div class="blog-filter-controls">
+              {multiCollection && (
+                <label class="blog-field">
+                  <span class="blog-field-label">Collection</span>
+                  <select data-blog-collection-filter>
+                    <option value="all">All collections</option>
+                    {collections.map((collection) => (
+                      <option value={collection}>{collection}</option>
+                    ))}
+                  </select>
+                </label>
+              )}
+              <label class="blog-field">
+                <span class="blog-field-label">Category</span>
+                <select data-blog-category-filter>
+                  <option value="all">All categories</option>
+                  {categoryOptions.map((category) => (
+                    <option value={category.slug}>{category.label}</option>
+                  ))}
+                </select>
+              </label>
+              <label class="blog-field blog-field-search">
+                <span class="blog-field-label">Search</span>
+                <input
+                  type="search"
+                  placeholder="Search title, slug, author…"
+                  autocomplete="off"
+                  spellcheck="false"
+                  data-blog-search
+                />
+              </label>
+            </div>
+          </div>
+
+          <div class="table-wrap">
+            <table class="blog-table">
+              <thead>
+                <tr>
+                  <th>Article</th>
+                  {multiCollection && <th>Collection</th>}
+                  <th>Status</th>
+                  <th>Category</th>
+                  <th>Author</th>
+                  <th>Updated</th>
+                  <th class="action">Actions</th>
+                </tr>
+              </thead>
+              <tbody data-blog-body>
+                {rows.map(({ collection, post }) => (
+                  <tr
+                    data-blog-row
+                    data-slug={post.slug}
+                    data-collection={collection}
+                    data-status={post.status}
+                    data-categories={post.categories.map((c) => categorySlug(c)).join(" ")}
+                    data-search={rowSearch({ collection, post })}
+                  >
+                    <td class="blog-article" data-status={post.status}>
+                      <b>{post.title}</b>
+                      <span class="subtle">{post.slug}</span>
+                      {post.translationGroupId && (translationGroups.get(post.translationGroupId)?.length ?? 0) > 0 && (
+                        <div class="blog-langs" aria-label="Language variants">
+                          {translationGroups.get(post.translationGroupId)!.map((variant) => (
+                            <span
+                              class={`blog-lang-chip${variant.slug === post.slug && variant.collection === collection ? " current" : ""}`}
+                              data-status={variant.status}
+                              title={`${langLabel(variant.lang)} — ${STATUS_LABEL[variant.status]}`}
+                            >
+                              <b>{langLabel(variant.lang)}</b> {STATUS_SHORT[variant.status]}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </td>
+                    {multiCollection && <td>{collection}</td>}
+                    <td>
+                      <span class={`chip blog-status${STATUS_TONE[post.status] ? " " + STATUS_TONE[post.status] : ""}`}>
+                        {STATUS_LABEL[post.status]}
+                      </span>
+                    </td>
+                    <td>{post.categories.length > 0 ? post.categories.join(", ") : "—"}</td>
+                    <td>{post.author || "—"}</td>
+                    <td>
+                      <time datetime={primaryDate(post)}>{formatDate(primaryDate(post)) || "—"}</time>
+                    </td>
+                    <td class="action">
+                      <div class="blog-row-actions">
+                        {post.status === "published" ? (
+                          <button
+                            class="btn"
+                            type="button"
+                            data-blog-action="unpublish"
+                            data-blog-slug={post.slug}
+                            data-blog-collection={collection}
+                          >
+                            Unpublish
+                          </button>
+                        ) : (
+                          <button
+                            class="btn primary"
+                            type="button"
+                            data-blog-action="publish"
+                            data-blog-slug={post.slug}
+                            data-blog-collection={collection}
+                          >
+                            Publish
+                          </button>
+                        )}
+                        {/* Edit (in-browser markdown authoring) — B3.4. */}
+                        <button
+                          class="btn"
+                          type="button"
+                          data-blog-action="edit"
+                          data-blog-slug={post.slug}
+                          data-blog-collection={collection}
+                        >
+                          Edit
+                        </button>
+                        {/* Translate (I4) — scaffold a draft sibling language variant. */}
+                        <button
+                          class="btn"
+                          type="button"
+                          data-blog-action="translate"
+                          data-blog-slug={post.slug}
+                          data-blog-collection={collection}
+                        >
+                          Translate
+                        </button>
+                        <button
+                          class="btn danger"
+                          type="button"
+                          data-blog-action="delete"
+                          data-blog-slug={post.slug}
+                          data-blog-collection={collection}
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <p class="note" data-blog-empty hidden>No posts match these filters.</p>
+        </>
+      )}
+    </div>
+  </div>
+
+  {rows.length > 0 && <AdminBlogDetailRail rows={rows} discussions={discussions} reactions={reactions} />}
+  </div>
+
+  {/*
+    B3.4 markdown editor v1 — a plain textarea for title/excerpt/category/author/body.
+    Serializes to the post JSON (contentHtml rendered from markdown server-side) via
+    the SAME content-only fast lane the row actions use (POST /api/admin/blog action=edit),
+    then surfaces the resulting candidate in the preview plane (the shared
+    /<tenant>/preview/pr/<N> route the Publish tab iframes). No block editor, no image
+    upload — those are Phase 4.
+  */}
+  <div class="blog-editor-overlay" data-blog-editor hidden aria-hidden="true">
+    <div class="blog-editor-modal" role="dialog" aria-modal="true" aria-labelledby="blog-editor-title">
+      <div class="blog-editor-head">
+        <h3 id="blog-editor-title">Edit article</h3>
+        <button class="btn" type="button" data-blog-editor-close aria-label="Close editor">Close</button>
+      </div>
+      <div class="blog-editor-grid">
+        <form class="blog-editor-form" data-blog-editor-form>
+          <input type="hidden" data-editor-slug />
+          <input type="hidden" data-editor-collection />
+          <label class="blog-field">
+            <span class="blog-field-label">Title</span>
+            <input type="text" autocomplete="off" data-editor-title required />
+          </label>
+          <label class="blog-field">
+            <span class="blog-field-label">Excerpt</span>
+            <textarea rows="2" data-editor-excerpt placeholder="Short summary for listings & SEO"></textarea>
+          </label>
+          <div class="blog-editor-meta">
+            <label class="blog-field">
+              <span class="blog-field-label">Category</span>
+              <input type="text" autocomplete="off" list="blog-category-list" data-editor-category />
+            </label>
+            <label class="blog-field">
+              <span class="blog-field-label">Author</span>
+              <input type="text" autocomplete="off" data-editor-author />
+            </label>
+            <label class="blog-field">
+              <span class="blog-field-label">Access</span>
+              <select data-editor-access>
+                <option value="public">Public</option>
+                <option value="authenticated">Signed-in</option>
+                <option value="members">Members</option>
+              </select>
+            </label>
+          </div>
+          <label class="blog-field blog-field-grow">
+            <span class="blog-field-label">Body (Markdown)</span>
+            <textarea rows="16" class="blog-editor-textarea" data-editor-body spellcheck="true" placeholder="# Heading&#10;&#10;Write your article in Markdown…"></textarea>
+          </label>
+          <p class="note" data-editor-htmlonly hidden>
+            This post has no Markdown source yet — its existing HTML stays unless you write new Markdown here.
+          </p>
+          <div class="blog-editor-actions">
+            <button class="btn primary" type="submit" data-editor-save>Save &amp; preview</button>
+            <button class="btn" type="button" data-blog-editor-close>Cancel</button>
+            <span class="note blog-editor-status" data-editor-status></span>
+          </div>
+        </form>
+        <div class="blog-editor-preview">
+          <div class="blog-editor-preview-head">
+            <span class="blog-field-label">Preview plane</span>
+            <a class="btn" data-editor-preview-link target="_blank" rel="noopener" hidden>Open ↗</a>
+          </div>
+          <p class="note blog-editor-preview-empty" data-editor-preview-empty>
+            Save to open a content-only change and build its preview here.
+          </p>
+          <iframe class="blog-editor-preview-frame" data-editor-preview-frame title="Change preview" hidden></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  /* Left status stripe on the first cell — a quiet at-a-glance signal that
+     doubles the status pill. Tones mirror admin.astro's .chip.* palette. */
+  .blog-article {
+    border-left: 3px solid var(--admin-line-strong);
+  }
+  .blog-article[data-status="published"] {
+    border-left-color: var(--admin-green);
+  }
+  .blog-article[data-status="scheduled"] {
+    border-left-color: var(--admin-blue);
+  }
+  .blog-article[data-status="unlisted"] {
+    border-left-color: var(--admin-amber);
+  }
+  .blog-article[data-status="draft"] {
+    border-left-color: var(--admin-muted-2);
+  }
+  .blog-article b {
+    display: block;
+    font-size: 13px;
+  }
+
+  /* Two-column workspace: post list + detail rail (mirrors OrdersWorkspace).
+     Collapses to one column when there's no rail, and on narrow viewports. */
+  .blog-workspace[data-has-rail="true"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr);
+    gap: 14px;
+    align-items: start;
+  }
+  .blog-list-panel {
+    min-width: 0;
+  }
+  .blog-table tbody tr {
+    cursor: pointer;
+  }
+  .blog-table tbody tr.selected {
+    background: var(--admin-teal-soft);
+    box-shadow: inset 3px 0 0 var(--admin-teal);
+  }
+  @media (max-width: 1180px) {
+    .blog-workspace[data-has-rail="true"] {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .blog-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+  }
+  .blog-status-seg {
+    border-bottom: 0;
+  }
+  .blog-status-seg .tab {
+    border: 1px solid var(--admin-line);
+    border-radius: 999px;
+    padding: 0 12px;
+    min-height: 32px;
+  }
+  .blog-status-seg .tab.active {
+    border-color: var(--admin-teal);
+    background: var(--admin-teal-soft);
+    color: var(--admin-ink);
+  }
+  .blog-seg-count {
+    margin-left: 4px;
+    color: var(--admin-muted);
+    font-weight: 700;
+  }
+  .blog-status-seg .tab.active .blog-seg-count {
+    color: var(--admin-teal-dark);
+  }
+
+  .blog-filter-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 10px;
+  }
+  .blog-field {
+    display: grid;
+    gap: 3px;
+    min-width: 0;
+  }
+  .blog-field-label {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+  .blog-field select,
+  .blog-field input {
+    min-height: 34px;
+    padding: 0 10px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+  }
+  .blog-field-search input {
+    min-width: 200px;
+  }
+
+  .blog-status {
+    text-transform: none;
+  }
+
+  /* ---- I4 language-variant chips (in the Article cell) ---- */
+  .blog-langs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 5px;
+  }
+  .blog-lang-chip {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 3px;
+    padding: 1px 6px;
+    border: 1px solid var(--admin-line);
+    border-radius: 999px;
+    font-size: 10.5px;
+    line-height: 1.5;
+    color: var(--admin-muted);
+    background: var(--admin-surface);
+    white-space: nowrap;
+  }
+  .blog-lang-chip b {
+    font-size: 10.5px;
+    font-weight: 780;
+    letter-spacing: 0.02em;
+    color: var(--admin-ink);
+  }
+  .blog-lang-chip.current {
+    border-color: var(--admin-teal);
+    background: var(--admin-teal-soft);
+  }
+  .blog-lang-chip[data-status="published"] b {
+    color: var(--admin-green);
+  }
+  .blog-lang-chip[data-status="scheduled"] b {
+    color: var(--admin-blue);
+  }
+  .blog-lang-chip[data-status="unlisted"] b {
+    color: var(--admin-amber);
+  }
+
+  .blog-row-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    justify-content: flex-end;
+  }
+  .blog-row-actions .btn.danger {
+    color: var(--admin-danger, #b42318);
+    border-color: var(--admin-danger, #b42318);
+  }
+
+  .blog-msg {
+    margin: 0;
+  }
+  .blog-msg[data-tone="error"] {
+    color: var(--admin-danger, #b42318);
+  }
+
+  .blog-new-form {
+    margin-top: 0;
+  }
+  .blog-new-grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 10px;
+  }
+  .blog-field-grow {
+    flex: 1 1 220px;
+  }
+  .blog-new-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  /* ---- Engagement / top-posts analytics panel ---- */
+  .blog-analytics-lede {
+    margin: 0;
+  }
+  .blog-analytics-table th.num,
+  .blog-analytics-table td.num {
+    text-align: right;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+  .blog-analytics-table th.rank,
+  .blog-analytics-table td.rank {
+    width: 1%;
+    color: var(--admin-muted);
+    font-variant-numeric: tabular-nums;
+  }
+  .blog-analytics-article b {
+    display: block;
+    font-size: 13px;
+  }
+  .blog-analytics-table th.trend,
+  .blog-analytics-table td.trend {
+    width: 120px;
+  }
+  .blog-spark {
+    display: block;
+    width: 108px;
+    height: 26px;
+    overflow: visible;
+  }
+  .blog-spark polyline {
+    stroke: var(--admin-teal);
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* ---- B3.4 markdown editor modal ---- */
+  .blog-editor-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    padding: 24px;
+    background: color-mix(in srgb, var(--admin-ink) 55%, transparent);
+  }
+  .blog-editor-overlay[hidden] {
+    display: none;
+  }
+  .blog-editor-modal {
+    display: flex;
+    flex-direction: column;
+    width: min(1080px, 100%);
+    max-height: 100%;
+    background: var(--admin-surface);
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius);
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
+    overflow: hidden;
+  }
+  .blog-editor-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+  .blog-editor-head h3 {
+    margin: 0;
+    font-size: 15px;
+  }
+  .blog-editor-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 0;
+    min-height: 0;
+    flex: 1;
+  }
+  .blog-editor-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px 18px;
+    overflow-y: auto;
+    border-right: 1px solid var(--admin-line);
+  }
+  .blog-editor-meta {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
+  .blog-editor-form textarea {
+    padding: 8px 10px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font: inherit;
+    resize: vertical;
+  }
+  .blog-editor-textarea {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    min-height: 260px;
+  }
+  .blog-editor-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+  .blog-editor-status[data-tone="error"] {
+    color: var(--admin-danger, #b42318);
+  }
+  .blog-editor-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px 18px;
+    min-height: 0;
+  }
+  .blog-editor-preview-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  .blog-editor-preview-frame {
+    flex: 1;
+    width: 100%;
+    min-height: 320px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+  }
+
+  @media (max-width: 760px) {
+    .blog-filters {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .blog-filter-controls {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .blog-field-search input {
+      min-width: 0;
+    }
+    .blog-editor-grid {
+      grid-template-columns: 1fr;
+    }
+    .blog-editor-form {
+      border-right: 0;
+      border-bottom: 1px solid var(--admin-line);
+    }
+  }
+
+  /* ---- Newsletter send panel + confirm dialog (N5) ---- */
+  .blog-newsletter-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 12px;
+  }
+  .blog-newsletter-dialog {
+    border: 1px solid var(--admin-line);
+    border-radius: 12px;
+    padding: 0;
+    max-width: 24rem;
+    width: calc(100vw - 2rem);
+    color: var(--admin-ink, inherit);
+    background: var(--admin-surface, #fff);
+  }
+  .blog-newsletter-dialog::backdrop {
+    background: rgba(15, 23, 20, 0.45);
+  }
+  .blog-newsletter-dialog-form {
+    display: grid;
+    gap: 12px;
+    padding: 16px 18px;
+  }
+  .blog-newsletter-dialog-form h3 {
+    margin: 0;
+    font-size: 15px;
+  }
+  .blog-newsletter-preview {
+    display: flex;
+    gap: 16px;
+  }
+  .blog-newsletter-preview .metric strong {
+    font-size: 22px;
+  }
+  .blog-newsletter-warn {
+    color: var(--admin-amber, #a15c00);
+  }
+  .blog-newsletter-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+  [data-newsletter-dialog-status][data-tone="error"] {
+    color: var(--admin-red, #b42318);
+  }
+</style>
+
+<script is:inline nonce={Astro.locals.cspNonce}>
+  (() => {
+    const root = document.getElementById("blog");
+    if (!root) return;
+
+    // ---- Action fast lane: post/publish/unpublish/delete/new -> /api/admin/blog ----
+    const msg = root.querySelector("[data-blog-msg]");
+    const showMsg = (text, tone) => {
+      if (!msg) return;
+      msg.textContent = text;
+      if (tone) msg.setAttribute("data-tone", tone);
+      else msg.removeAttribute("data-tone");
+      msg.hidden = !text;
+    };
+
+    const post = async (payload) => {
+      const res = await fetch("/api/admin/blog", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      let data = {};
+      try {
+        data = await res.json();
+      } catch {
+        /* non-JSON error body */
+      }
+      return { ok: res.ok, status: res.status, data };
+    };
+
+    const submitted = (data) => {
+      const pr = data && data.prNumber ? " (#" + data.prNumber + ")" : "";
+      showMsg(
+        "Change opened" + pr + " — review & publish it in the Publish tab.",
+        null,
+      );
+    };
+    const failed = (data, status) => {
+      const why = (data && data.message) || "request failed (" + status + ")";
+      showMsg("Could not complete: " + why, "error");
+    };
+
+    // Row actions (publish / unpublish / delete / edit).
+    root.querySelectorAll('[data-blog-action]').forEach((button) => {
+      const action = button.dataset.blogAction;
+      button.addEventListener("click", async () => {
+        const slug = button.dataset.blogSlug;
+        const collection = button.dataset.blogCollection;
+        if (!slug || !collection) return;
+        if (action === "edit") {
+          window.openEditor?.(collection, slug);
+          return;
+        }
+        let extra = {};
+        if (action === "translate") {
+          const targetLanguage = (
+            prompt(
+              'Translate "' + slug + '" into which language?\nEnter a language code (e.g. es, fr, pt-BR).',
+            ) || ""
+          ).trim();
+          if (!targetLanguage) return;
+          extra = { targetLanguage };
+        }
+        if (action === "delete" && !confirm('Delete "' + slug + '"? This opens a content-only change.')) {
+          return;
+        }
+        button.disabled = true;
+        showMsg("Working…", null);
+        try {
+          const { ok, status, data } = await post({ action, collection, slug, ...extra });
+          if (ok && data.ok) submitted(data);
+          else failed(data, status);
+        } catch (err) {
+          failed({ message: String(err) }, 0);
+        } finally {
+          button.disabled = false;
+        }
+      });
+    });
+
+    // ---- B3.4 markdown editor modal ----
+    const editor = root.querySelector("[data-blog-editor]");
+    const appDomain = root.dataset.appDomain || "";
+    const previewUrlFor = (pr) =>
+      pr != null ? "/" + encodeURIComponent(appDomain) + "/preview/pr/" + pr : null;
+
+    if (editor) {
+      const form = editor.querySelector("[data-blog-editor-form]");
+      const f = {
+        slug: editor.querySelector("[data-editor-slug]"),
+        collection: editor.querySelector("[data-editor-collection]"),
+        title: editor.querySelector("[data-editor-title]"),
+        excerpt: editor.querySelector("[data-editor-excerpt]"),
+        category: editor.querySelector("[data-editor-category]"),
+        author: editor.querySelector("[data-editor-author]"),
+        access: editor.querySelector("[data-editor-access]"),
+        body: editor.querySelector("[data-editor-body]"),
+      };
+      const htmlOnly = editor.querySelector("[data-editor-htmlonly]");
+      const status = editor.querySelector("[data-editor-status]");
+      const previewLink = editor.querySelector("[data-editor-preview-link]");
+      const previewEmpty = editor.querySelector("[data-editor-preview-empty]");
+      const previewFrame = editor.querySelector("[data-editor-preview-frame]");
+      const save = editor.querySelector("[data-editor-save]");
+
+      const editorStatus = (text, tone) => {
+        if (!status) return;
+        status.textContent = text || "";
+        if (tone) status.setAttribute("data-tone", tone);
+        else status.removeAttribute("data-tone");
+      };
+      const resetPreview = () => {
+        if (previewLink) previewLink.hidden = true;
+        if (previewFrame) {
+          previewFrame.hidden = true;
+          previewFrame.removeAttribute("src");
+        }
+        if (previewEmpty) previewEmpty.hidden = false;
+      };
+      const closeEditor = () => {
+        editor.hidden = true;
+        editor.setAttribute("aria-hidden", "true");
+      };
+      editor.querySelectorAll("[data-blog-editor-close]").forEach((b) =>
+        b.addEventListener("click", closeEditor),
+      );
+      editor.addEventListener("click", (event) => {
+        if (event.target === editor) closeEditor();
+      });
+      document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && !editor.hidden) closeEditor();
+      });
+
+      window.openEditor = async (collection, slug) => {
+        f.slug.value = slug;
+        f.collection.value = collection;
+        f.title.value = "";
+        f.excerpt.value = "";
+        f.category.value = "";
+        f.author.value = "";
+        f.access.value = "public";
+        f.body.value = "";
+        if (htmlOnly) htmlOnly.hidden = true;
+        resetPreview();
+        editorStatus("Loading…", null);
+        editor.hidden = false;
+        editor.setAttribute("aria-hidden", "false");
+        try {
+          const res = await fetch(
+            "/api/admin/blog?collection=" +
+              encodeURIComponent(collection) +
+              "&slug=" +
+              encodeURIComponent(slug),
+          );
+          const data = await res.json();
+          if (!res.ok || !data.ok) {
+            editorStatus((data && data.message) || "Could not load this post.", "error");
+            return;
+          }
+          const p = data.post;
+          f.title.value = p.title || "";
+          f.excerpt.value = p.excerpt || "";
+          f.category.value = p.category || "";
+          f.author.value = p.author || "";
+          f.access.value = p.access || "public";
+          f.body.value = p.bodyMarkdown || "";
+          if (htmlOnly) htmlOnly.hidden = !p.hasHtmlOnly;
+          editorStatus("", null);
+          f.title.focus();
+        } catch (err) {
+          editorStatus("Could not load this post: " + String(err), "error");
+        }
+      };
+
+      form?.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const title = (f.title.value || "").trim();
+        if (!title) {
+          editorStatus("A title is required.", "error");
+          f.title.focus();
+          return;
+        }
+        if (save) save.disabled = true;
+        editorStatus("Saving…", null);
+        try {
+          const { ok, status: httpStatus, data } = await post({
+            action: "edit",
+            collection: f.collection.value,
+            slug: f.slug.value,
+            title,
+            excerpt: (f.excerpt.value || "").trim(),
+            category: (f.category.value || "").trim(),
+            author: (f.author.value || "").trim(),
+            access: f.access.value || "public",
+            body: f.body.value || "",
+          });
+          if (!ok || !data.ok) {
+            editorStatus("Could not save: " + ((data && data.message) || httpStatus), "error");
+            return;
+          }
+          const pr = data.prNumber;
+          const url = previewUrlFor(pr);
+          editorStatus("Change opened" + (pr ? " (#" + pr + ")" : "") + " — preview building.", null);
+          submitted(data); // also surface it on the tab-level message strip
+          if (url && previewLink && previewFrame && previewEmpty) {
+            previewLink.href = url;
+            previewLink.hidden = false;
+            previewFrame.src = url;
+            previewFrame.hidden = false;
+            previewEmpty.hidden = true;
+          }
+        } catch (err) {
+          editorStatus("Could not save: " + String(err), "error");
+        } finally {
+          if (save) save.disabled = false;
+        }
+      });
+    }
+
+    // New-article form.
+    const newToggle = root.querySelector("[data-blog-new-toggle]");
+    const newForm = root.querySelector("[data-blog-new-form]");
+    if (newToggle && newForm) {
+      const setOpen = (open) => {
+        newForm.hidden = !open;
+        newToggle.setAttribute("aria-expanded", open ? "true" : "false");
+        if (open) newForm.querySelector("[data-blog-new-title]")?.focus();
+      };
+      newToggle.addEventListener("click", () => setOpen(newForm.hidden));
+      newForm.querySelector("[data-blog-new-cancel]")?.addEventListener("click", () => setOpen(false));
+      newForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const collectionEl = newForm.querySelector("[data-blog-new-collection]");
+        const collection = collectionEl ? collectionEl.value : root.dataset.singleCollection;
+        const title = (newForm.querySelector("[data-blog-new-title]")?.value || "").trim();
+        const category = (newForm.querySelector("[data-blog-new-category]")?.value || "").trim();
+        const author = (newForm.querySelector("[data-blog-new-author]")?.value || "").trim();
+        if (!collection || !title) {
+          showMsg("A title is required.", "error");
+          return;
+        }
+        const submit = newForm.querySelector("[data-blog-new-submit]");
+        if (submit) submit.disabled = true;
+        showMsg("Creating draft…", null);
+        try {
+          const { ok, status, data } = await post({ action: "new", collection, title, category, author });
+          if (ok && data.ok) {
+            submitted(data);
+            setOpen(false);
+            newForm.reset();
+          } else {
+            failed(data, status);
+          }
+        } catch (err) {
+          failed({ message: String(err) }, 0);
+        } finally {
+          if (submit) submit.disabled = false;
+        }
+      });
+    }
+
+    // ---- Client-side list filtering (only when there are rows) ----
+    const body = root.querySelector("[data-blog-body]");
+    if (!body) return; // empty state — no filter controls rendered
+
+    const rows = Array.from(body.querySelectorAll("[data-blog-row]"));
+    const statusButtons = Array.from(root.querySelectorAll("[data-blog-status-filter]"));
+    const collectionSelect = root.querySelector("[data-blog-collection-filter]");
+    const categorySelect = root.querySelector("[data-blog-category-filter]");
+    const searchInput = root.querySelector("[data-blog-search]");
+    const visibleCount = root.querySelector("[data-blog-visible-count]");
+    const emptyNote = root.querySelector("[data-blog-empty]");
+
+    const state = { status: "all", collection: "all", category: "all", search: "" };
+
+    const apply = () => {
+      let shown = 0;
+      const term = state.search.trim().toLowerCase();
+      for (const row of rows) {
+        const ds = row.dataset;
+        const categories = (ds.categories || "").split(" ").filter(Boolean);
+        const match =
+          (state.status === "all" || ds.status === state.status) &&
+          (state.collection === "all" || ds.collection === state.collection) &&
+          (state.category === "all" || categories.includes(state.category)) &&
+          (term === "" || (ds.search || "").includes(term));
+        row.hidden = !match;
+        if (match) shown += 1;
+      }
+      if (visibleCount) visibleCount.textContent = shown + " shown";
+      if (emptyNote) emptyNote.hidden = shown !== 0;
+    };
+
+    statusButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        state.status = button.dataset.blogStatusFilter || "all";
+        statusButtons.forEach((b) => b.classList.toggle("active", b === button));
+        apply();
+      });
+    });
+    collectionSelect?.addEventListener("change", (event) => {
+      state.collection = event.target.value;
+      apply();
+    });
+    categorySelect?.addEventListener("change", (event) => {
+      state.category = event.target.value;
+      apply();
+    });
+    searchInput?.addEventListener("input", (event) => {
+      state.search = event.target.value;
+      apply();
+    });
+
+    apply();
+
+    // ---- Newsletter: dry-run preview -> confirm -> real send ----
+    (() => {
+      const panel = root.querySelector("[data-newsletter-panel]");
+      const dialog = root.querySelector("[data-newsletter-dialog]");
+      if (!panel || !dialog) return;
+      const collectionSel = panel.querySelector("[data-newsletter-collection]");
+      const singleCollection = panel.getAttribute("data-single-collection");
+      const sendBtn = panel.querySelector("[data-newsletter-send]");
+      const statusEl = dialog.querySelector("[data-newsletter-dialog-status]");
+      const previewEl = dialog.querySelector("[data-newsletter-preview]");
+      const postCountEl = dialog.querySelector("[data-newsletter-post-count]");
+      const recipientCountEl = dialog.querySelector("[data-newsletter-recipient-count]");
+      const warnEl = dialog.querySelector("[data-newsletter-dialog-warn]");
+      const confirmBtn = dialog.querySelector("[data-newsletter-confirm]");
+      const cancelBtn = dialog.querySelector("[data-newsletter-cancel]");
+
+      const currentCollection = () => (collectionSel ? collectionSel.value : singleCollection) || "";
+
+      const postSend = async (payload) => {
+        const res = await fetch("/api/admin/newsletter/send", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        let data = {};
+        try {
+          data = await res.json();
+        } catch {
+          /* non-JSON error body */
+        }
+        return { ok: res.ok, status: res.status, data };
+      };
+
+      const SKIP_TEXT = {
+        "already-sent-this-period": "This week's digest was already sent — nothing to send.",
+        "no-new-posts": "No new posts since the last send — nothing to send.",
+        "no-subscribers": "No confirmed subscribers yet — nothing to send.",
+      };
+
+      const closeDialog = () => {
+        if (dialog.open) dialog.close();
+      };
+
+      let plannedCollection = "";
+
+      sendBtn?.addEventListener("click", async () => {
+        const collection = currentCollection();
+        if (!collection) return;
+        plannedCollection = collection;
+        previewEl.hidden = true;
+        warnEl.hidden = true;
+        confirmBtn.hidden = true;
+        statusEl.textContent = "Calculating what would be sent…";
+        statusEl.removeAttribute("data-tone");
+        if (typeof dialog.showModal === "function") dialog.showModal();
+        else dialog.setAttribute("open", "");
+
+        const { ok, status, data } = await postSend({ collection, dryRun: true });
+        if (!ok || !data || data.ok !== true) {
+          statusEl.textContent =
+            "Couldn't build a preview: " + ((data && data.message) || "request failed (" + status + ")");
+          statusEl.setAttribute("data-tone", "error");
+          return;
+        }
+        postCountEl.textContent = String(data.postCount ?? 0);
+        recipientCountEl.textContent = String(data.recipientCount ?? 0);
+        previewEl.hidden = false;
+        if (data.skip) {
+          statusEl.textContent = SKIP_TEXT[data.skip] || "Nothing to send.";
+        } else if (data.notReady) {
+          statusEl.textContent = "Almost ready — one thing to configure first:";
+          warnEl.textContent = data.notReady;
+          warnEl.hidden = false;
+        } else {
+          statusEl.textContent = "Digest " + (data.digestId || "") + " is ready to send.";
+          confirmBtn.hidden = false;
+        }
+      });
+
+      confirmBtn?.addEventListener("click", async () => {
+        if (!plannedCollection) return;
+        confirmBtn.disabled = true;
+        statusEl.textContent = "Sending…";
+        statusEl.removeAttribute("data-tone");
+        const { ok, status, data } = await postSend({ collection: plannedCollection, dryRun: false });
+        confirmBtn.disabled = false;
+        if (ok && data && data.ok === true) {
+          const r = data.result || {};
+          if (r.skipped) {
+            statusEl.textContent = SKIP_TEXT[r.reason] || "Nothing was sent.";
+          } else {
+            statusEl.textContent =
+              "Sent to " + (r.sent ?? 0) + " " + (r.sent === 1 ? "recipient" : "recipients") + ".";
+          }
+          confirmBtn.hidden = true;
+          setTimeout(closeDialog, 1500);
+        } else {
+          statusEl.textContent =
+            "Send failed: " + ((data && data.message) || "request failed (" + status + ")");
+          statusEl.setAttribute("data-tone", "error");
+        }
+      });
+
+      cancelBtn?.addEventListener("click", closeDialog);
+    })();
+  })();
+</script>