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

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

@@ -0,0 +1,878 @@
+---
+/**
+ * Blog detail rail — B2.3 of docs/plans/2026-08-21-blog-platform-workstream.md.
+ *
+ * A row-select side-out for the admin Blog tab, mirroring the established
+ * OrdersWorkspace pattern (components/admin/orders/OrdersWorkspace.astro): the
+ * list panel and this sticky `aside` sit in a two-column workspace; one hidden
+ * `[data-blog-detail-record]` is pre-rendered per post and the row-select script
+ * toggles which one is visible + which row is `.selected`. Records are keyed by
+ * `(collection, slug)` — the same `data-collection`/`data-slug` the B2.1 table
+ * rows already carry — so this component adds NO markup to the table itself
+ * (keeps merge friction with the concurrent B3.4 editor low).
+ *
+ * The rail shows: status, category/pillar, tags (claim tags), author, last-saved,
+ * a preview link, a Draft→Preview→Publish→Live lifecycle timeline, the primary
+ * Publish/Unpublish action, and Edit/Duplicate/Delete. Publish/Unpublish/Duplicate/
+ * Delete ride the SAME content-only fast lane as the table (POST /api/admin/blog);
+ * they open a content-only change to review & promote in the Publish tab. Edit
+ * (in-browser authoring) is B3.4 — stubbed disabled here.
+ *
+ * B3.2 adds a Versions panel: per-post git-backed revision history (list +
+ * diff) read through `/api/admin/blog-history` (MCP's session-authenticated
+ * `repo_commits` / `repo_diff`, `@/lib/forge`). Restore re-submits a prior
+ * revision's raw content through the SAME content-only fast lane (POST to
+ * the same route, `action:"restore"`) — no new write path.
+ */
+import { categorySlug } from "@/lib/blog/collection.js";
+import { REACTIONS, type Reaction } from "@/lib/blog/reactions.js";
+import type { BlogPostSummary, PostStatus } from "@/lib/blog/types.js";
+
+interface Props {
+  rows: { collection: string; post: BlogPostSummary }[];
+  /**
+   * C1 editorial link-out: per-post open candidate PR, keyed `"<collection> <slug>"`.
+   * Present only when the post has an OPEN candidate awaiting review; absent ⇒ the
+   * post is idle/published and no Discussion link renders.
+   */
+  discussions?: Record<string, { prNumber: number; url: string }>;
+  /**
+   * E1.2 reader reaction tallies, keyed `"<collection> <slug>"` (same key as the
+   * record). Absent ⇒ no counts fetched (all-zero line renders).
+   */
+  reactions?: Record<string, Record<Reaction, number>>;
+}
+
+const { rows, discussions = {}, reactions = {} } = Astro.props;
+
+const REACTION_META: Record<Reaction, { emoji: string; label: string }> = {
+  like: { emoji: "👍", label: "Like" },
+  insightful: { emoji: "💡", label: "Insightful" },
+  celebrate: { emoji: "🎉", label: "Celebrate" },
+};
+
+const STATUS_LABEL: Record<PostStatus, string> = {
+  published: "Published",
+  draft: "Draft",
+  scheduled: "Scheduled",
+  unlisted: "Unlisted",
+};
+const STATUS_TONE: Record<PostStatus, string> = {
+  published: "green",
+  draft: "",
+  scheduled: "blue",
+  unlisted: "amber",
+};
+
+// The published lifecycle the timeline visualises. A post's status maps to the
+// stage it currently occupies; earlier stages render "done", the current stage
+// "current", later stages "pending". "Preview" is a transient stage (a candidate
+// change is open) we can't detect from the post's static status alone, so it is
+// shown as passed once a post is live and pending while it is still a draft.
+const STAGES = ["Draft", "Preview", "Publish", "Live"] as const;
+const STAGE_INDEX: Record<PostStatus, number> = {
+  draft: 0,
+  scheduled: 2,
+  unlisted: 3,
+  published: 3,
+};
+
+const primaryDate = (post: BlogPostSummary) => post.modifiedAt || post.publishedAt;
+const formatDate = (iso: string) => {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? "—"
+    : d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+};
+// Reader URL for a post: /<collection>/<slug>/ (collection id === route base).
+const previewHref = (collection: string, slug: string) => `/${collection}/${slug}/`;
+---
+
+<aside
+  class="panel blog-detail-rail"
+  id="blog-detail"
+  aria-labelledby="blog-detail-title"
+  data-blog-detail-root
+  data-selected-collection={rows[0]?.collection ?? ""}
+  data-selected-slug={rows[0]?.post.slug ?? ""}
+>
+  {rows.map(({ collection, post }, index) => {
+    const stage = STAGE_INDEX[post.status];
+    const isPublished = post.status === "published";
+    const discussion = discussions[`${collection} ${post.slug}`];
+    const postReactions = reactions[`${collection} ${post.slug}`];
+    return (
+      <div
+        class="blog-detail-record"
+        data-blog-detail-record
+        data-collection={collection}
+        data-slug={post.slug}
+        hidden={index !== 0}
+      >
+        <div class="blog-detail-head">
+          <div class="blog-detail-head-main">
+            <span class={`chip blog-status${STATUS_TONE[post.status] ? " " + STATUS_TONE[post.status] : ""}`}>
+              {STATUS_LABEL[post.status]}
+            </span>
+            <h3 id={index === 0 ? "blog-detail-title" : undefined}>{post.title}</h3>
+            <p class="blog-detail-slug">
+              <code>{collection}/{post.slug}</code>
+            </p>
+          </div>
+        </div>
+
+        <ol class="blog-lifecycle" aria-label="Publishing lifecycle">
+          {STAGES.map((label, i) => (
+            <li
+              class:list={[
+                "blog-lifecycle-step",
+                { done: i < stage, current: i === stage, pending: i > stage },
+              ]}
+              aria-current={i === stage ? "step" : undefined}
+            >
+              <span class="blog-lifecycle-dot" aria-hidden="true"></span>
+              <span class="blog-lifecycle-label">{label}</span>
+            </li>
+          ))}
+        </ol>
+
+        <div class="blog-detail-grid">
+          <div>
+            <span>Category</span>
+            <strong>{post.categories.length > 0 ? post.categories.join(", ") : "—"}</strong>
+          </div>
+          <div>
+            <span>Author</span>
+            <strong>{post.author || "—"}</strong>
+          </div>
+          <div>
+            <span>Last saved</span>
+            <strong>{formatDate(primaryDate(post))}</strong>
+          </div>
+          {post.status === "scheduled" && post.scheduledAt && (
+            <div>
+              <span>Scheduled</span>
+              <strong>{formatDate(post.scheduledAt)}</strong>
+            </div>
+          )}
+        </div>
+
+        <div class="blog-detail-engagement">
+          <span class="blog-detail-engagement-label">Reactions</span>
+          <div class="blog-detail-reactions">
+            {REACTIONS.map((reaction) => (
+              <span class="blog-detail-reaction" title={REACTION_META[reaction].label}>
+                <span aria-hidden="true">{REACTION_META[reaction].emoji}</span>
+                <strong>{postReactions?.[reaction] ?? 0}</strong>
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {post.tags.length > 0 && (
+          <div class="blog-detail-tags">
+            <span class="blog-detail-tags-label">Tags</span>
+            <div class="blog-detail-tags-list">
+              {post.tags.map((tag) => (
+                <span class="chip">{tag}</span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <a
+          class="blog-detail-preview"
+          href={previewHref(collection, post.slug)}
+          target="_blank"
+          rel="noopener"
+        >
+          <svg><use href="#i-file"></use></svg>
+          <span>{isPublished ? "View on site" : "Preview (visible once published)"}</span>
+        </a>
+
+        {discussion && (
+          <a
+            class="blog-detail-discussion"
+            href={discussion.url}
+            target="_blank"
+            rel="noopener"
+          >
+            <svg><use href="#i-ask"></use></svg>
+            <span>Discussion (#{discussion.prNumber})</span>
+            <span class="blog-detail-discussion-out" aria-hidden="true">↗</span>
+          </a>
+        )}
+
+        <div class="blog-detail-actions">
+          {isPublished ? (
+            <button
+              class="btn"
+              type="button"
+              data-blog-rail-action="unpublish"
+              data-blog-slug={post.slug}
+              data-blog-collection={collection}
+            >
+              Unpublish
+            </button>
+          ) : (
+            <button
+              class="btn primary"
+              type="button"
+              data-blog-rail-action="publish"
+              data-blog-slug={post.slug}
+              data-blog-collection={collection}
+            >
+              Publish
+            </button>
+          )}
+          {/* Edit (in-browser authoring) is B3.4 — inert placeholder here. */}
+          <button
+            class="btn"
+            type="button"
+            data-blog-rail-action="edit"
+            data-blog-slug={post.slug}
+            data-blog-collection={collection}
+            title="In-browser editing arrives with the markdown editor (B3.4)"
+            disabled
+          >
+            Edit
+          </button>
+          <button
+            class="btn"
+            type="button"
+            data-blog-rail-action="duplicate"
+            data-blog-slug={post.slug}
+            data-blog-collection={collection}
+            data-blog-title={post.title}
+          >
+            Duplicate
+          </button>
+          <button
+            class="btn danger"
+            type="button"
+            data-blog-rail-action="delete"
+            data-blog-slug={post.slug}
+            data-blog-collection={collection}
+          >
+            Delete
+          </button>
+          <button
+            class="btn"
+            type="button"
+            data-blog-rail-action="versions"
+            data-blog-slug={post.slug}
+            data-blog-collection={collection}
+            aria-expanded="false"
+            aria-controls={`blog-versions-${collection}-${post.slug}`}
+          >
+            Versions
+          </button>
+        </div>
+
+        <div
+          class="blog-versions"
+          id={`blog-versions-${collection}-${post.slug}`}
+          data-blog-versions
+          hidden
+        >
+          <p class="blog-versions-status" data-blog-versions-status>Loading versions…</p>
+          <ol class="blog-versions-list" data-blog-versions-list></ol>
+        </div>
+      </div>
+    );
+  })}
+</aside>
+
+<style>
+  .blog-detail-rail {
+    position: sticky;
+    top: 86px;
+    display: grid;
+    gap: 12px;
+    align-content: start;
+    padding: 14px;
+    box-shadow: var(--admin-shadow);
+    min-width: 0;
+  }
+
+  .blog-detail-head {
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+  .blog-detail-head h3 {
+    margin: 8px 0 4px;
+    font-size: 20px;
+    overflow-wrap: anywhere;
+  }
+  .blog-detail-slug {
+    margin: 0;
+    font-size: 12px;
+  }
+  .blog-detail-slug code {
+    color: var(--admin-muted);
+    overflow-wrap: anywhere;
+  }
+
+  /* Draft → Preview → Publish → Live mini-timeline. */
+  .blog-lifecycle {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .blog-lifecycle-step {
+    display: grid;
+    justify-items: center;
+    gap: 6px;
+    position: relative;
+    padding-top: 4px;
+  }
+  /* Connector line between dots. */
+  .blog-lifecycle-step::before {
+    content: "";
+    position: absolute;
+    top: 10px;
+    left: -50%;
+    width: 100%;
+    height: 2px;
+    background: var(--admin-line-strong);
+  }
+  .blog-lifecycle-step:first-child::before {
+    display: none;
+  }
+  .blog-lifecycle-step.done::before,
+  .blog-lifecycle-step.current::before {
+    background: var(--admin-teal);
+  }
+  .blog-lifecycle-dot {
+    width: 13px;
+    height: 13px;
+    border-radius: 999px;
+    border: 2px solid var(--admin-line-strong);
+    background: var(--admin-surface);
+    z-index: 1;
+  }
+  .blog-lifecycle-step.done .blog-lifecycle-dot {
+    border-color: var(--admin-teal);
+    background: var(--admin-teal);
+  }
+  .blog-lifecycle-step.current .blog-lifecycle-dot {
+    border-color: var(--admin-teal);
+    background: var(--admin-surface);
+    box-shadow: 0 0 0 3px var(--admin-teal-soft);
+  }
+  .blog-lifecycle-label {
+    font-size: 11px;
+    font-weight: 760;
+    color: var(--admin-muted);
+  }
+  .blog-lifecycle-step.current .blog-lifecycle-label,
+  .blog-lifecycle-step.done .blog-lifecycle-label {
+    color: var(--admin-ink);
+  }
+
+  .blog-detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+  .blog-detail-grid > div {
+    min-width: 0;
+    padding: 10px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface-soft);
+  }
+  .blog-detail-grid span {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+  .blog-detail-grid strong {
+    display: block;
+    margin-top: 4px;
+    overflow-wrap: anywhere;
+    font-size: 13px;
+  }
+
+  .blog-detail-engagement {
+    display: grid;
+    gap: 6px;
+  }
+  .blog-detail-engagement-label {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+  .blog-detail-reactions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .blog-detail-reaction {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 9px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface-soft);
+    font-size: 13px;
+  }
+  .blog-detail-reaction strong {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .blog-detail-tags {
+    display: grid;
+    gap: 6px;
+  }
+  .blog-detail-tags-label {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+  .blog-detail-tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .blog-detail-preview {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 12px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font-size: 13px;
+    font-weight: 700;
+    text-decoration: none;
+  }
+  .blog-detail-preview svg {
+    width: 15px;
+    height: 15px;
+  }
+  .blog-detail-preview:hover {
+    border-color: var(--admin-teal);
+  }
+
+  .blog-detail-discussion {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 12px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font-size: 13px;
+    font-weight: 700;
+    text-decoration: none;
+  }
+  .blog-detail-discussion svg {
+    width: 15px;
+    height: 15px;
+  }
+  .blog-detail-discussion:hover {
+    border-color: var(--admin-teal);
+  }
+  .blog-detail-discussion-out {
+    margin-left: auto;
+    color: var(--admin-muted);
+  }
+
+  .blog-detail-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding-top: 12px;
+    border-top: 1px solid var(--admin-line);
+  }
+  .blog-detail-actions .btn.danger {
+    color: var(--admin-danger, #b42318);
+    border-color: var(--admin-danger, #b42318);
+  }
+  .blog-detail-actions .btn.primary {
+    flex: 1 1 auto;
+  }
+
+  .blog-status {
+    text-transform: none;
+  }
+
+  .blog-versions {
+    display: grid;
+    gap: 8px;
+    padding-top: 12px;
+    border-top: 1px solid var(--admin-line);
+  }
+  .blog-versions-status {
+    margin: 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+  .blog-versions-list {
+    display: grid;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .blog-versions-item {
+    display: grid;
+    gap: 6px;
+    padding: 10px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface-soft);
+  }
+  .blog-versions-item-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .blog-versions-item-message {
+    font-size: 13px;
+    font-weight: 700;
+    overflow-wrap: anywhere;
+  }
+  .blog-versions-item-meta {
+    color: var(--admin-muted);
+    font-size: 11px;
+  }
+  .blog-versions-item-actions {
+    display: flex;
+    gap: 6px;
+  }
+  .blog-versions-item-actions .btn {
+    padding: 5px 10px;
+    font-size: 12px;
+  }
+  .blog-versions-diff {
+    margin: 0;
+    padding: 8px;
+    max-height: 260px;
+    overflow: auto;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11.5px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  @media (max-width: 1180px) {
+    .blog-detail-rail {
+      position: static;
+    }
+  }
+  @media (max-width: 760px) {
+    .blog-detail-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
+
+<script is:inline nonce={Astro.locals.cspNonce}>
+  (() => {
+    const root = document.getElementById("blog");
+    const rail = root?.querySelector("[data-blog-detail-root]");
+    if (!root || !rail) return;
+
+    const rows = Array.from(root.querySelectorAll("[data-blog-row]"));
+    const records = Array.from(rail.querySelectorAll("[data-blog-detail-record]"));
+
+    const keyOf = (el) => (el.dataset.collection || "") + "" + (el.dataset.slug || "");
+
+    const select = (collection, slug) => {
+      const key = collection + "" + slug;
+      for (const row of rows) {
+        const on = keyOf(row) === key;
+        row.classList.toggle("selected", on);
+        row.setAttribute("aria-pressed", on ? "true" : "false");
+      }
+      for (const record of records) {
+        record.hidden = keyOf(record) !== key;
+      }
+      rail.dataset.selectedCollection = collection;
+      rail.dataset.selectedSlug = slug;
+    };
+
+    // Make table rows a keyboard-operable "open detail" affordance without editing
+    // the B2.1 table markup: promote each row to a button-like control here.
+    rows.forEach((row) => {
+      row.setAttribute("role", "button");
+      row.setAttribute("tabindex", "0");
+      row.setAttribute("aria-controls", "blog-detail");
+      const open = (event) => {
+        // Don't hijack clicks/keys on the row's own action controls.
+        if (event.target instanceof Element && event.target.closest("button, a, input, select")) {
+          return;
+        }
+        const { collection, slug } = row.dataset;
+        if (collection && slug) select(collection, slug);
+      };
+      row.addEventListener("click", open);
+      row.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          open(event);
+        }
+      });
+    });
+
+    // Rail action buttons ride the same content-only fast lane as the table.
+    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");
+    };
+
+    rail.querySelectorAll("[data-blog-rail-action]").forEach((button) => {
+      const action = button.dataset.blogRailAction;
+      // edit is B3.4 (inert); versions is a panel toggle, wired separately below.
+      if (action === "edit" || action === "versions" || button.disabled) return;
+      button.addEventListener("click", async () => {
+        const collection = button.dataset.blogCollection;
+        const slug = button.dataset.blogSlug;
+        if (!collection || !slug) return;
+
+        let payload;
+        if (action === "duplicate") {
+          // Duplicate = create a fresh draft copy via the existing `new` action.
+          const title = ((button.dataset.blogTitle || slug) + " (copy)").trim();
+          payload = { action: "new", collection, title };
+        } else {
+          if (action === "delete" && !confirm('Delete "' + slug + '"? This opens a content-only change.')) {
+            return;
+          }
+          payload = { action, collection, slug };
+        }
+
+        button.disabled = true;
+        showMsg("Working…", null);
+        try {
+          const { ok, status, data } = await post(payload);
+          if (ok && data.ok) submitted(data);
+          else failed(data, status);
+        } catch (err) {
+          failed({ message: String(err) }, 0);
+        } finally {
+          button.disabled = false;
+        }
+      });
+    });
+
+    // Versions panel (B3.2): lazy-loaded git-backed revision history per post,
+    // read via /api/admin/blog-history (repo_commits / repo_diff). Restore rides
+    // the SAME content-only fast lane (postHistory below → the route's own
+    // getChangeClient().openCandidate, keyed by the same blog-<collection>-<slug>
+    // changeId as every other blog action).
+    const shortSha = (sha) => String(sha || "").slice(0, 7);
+    const versionsLoaded = new Set(); // "collection/slug" already fetched once
+
+    const fetchJson = async (url) => {
+      const res = await fetch(url);
+      let data = {};
+      try {
+        data = await res.json();
+      } catch {
+        /* non-JSON error body */
+      }
+      return { ok: res.ok, status: res.status, data };
+    };
+    const postHistory = async (payload) => {
+      const res = await fetch("/api/admin/blog-history", {
+        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 };
+    };
+
+    function renderVersions(panel, collection, slug, commits) {
+      const list = panel.querySelector("[data-blog-versions-list]");
+      const status = panel.querySelector("[data-blog-versions-status]");
+      list.innerHTML = "";
+      if (!commits.length) {
+        status.textContent = "No revision history yet.";
+        status.hidden = false;
+        return;
+      }
+      status.hidden = true;
+
+      commits.forEach((commit, index) => {
+        const li = document.createElement("li");
+        li.className = "blog-versions-item";
+
+        const head = document.createElement("div");
+        head.className = "blog-versions-item-head";
+        const message = document.createElement("span");
+        message.className = "blog-versions-item-message";
+        message.textContent = commit.message || "(no message)";
+        const meta = document.createElement("span");
+        meta.className = "blog-versions-item-meta";
+        const when = commit.date ? new Date(commit.date).toLocaleString() : "";
+        meta.textContent =
+          shortSha(commit.sha) + " · " + (commit.author || "unknown") + (when ? " · " + when : "");
+        head.append(message, meta);
+
+        const actions = document.createElement("div");
+        actions.className = "blog-versions-item-actions";
+
+        const diffBtn = document.createElement("button");
+        diffBtn.type = "button";
+        diffBtn.className = "btn";
+        diffBtn.textContent = "Diff";
+        const parent = commits[index + 1];
+        if (!parent) {
+          diffBtn.disabled = true;
+          diffBtn.title = "No earlier loaded revision to diff against";
+        }
+
+        const restoreBtn = document.createElement("button");
+        restoreBtn.type = "button";
+        restoreBtn.className = "btn";
+        restoreBtn.textContent = "Restore";
+
+        actions.append(diffBtn, restoreBtn);
+        li.append(head, actions);
+
+        const diffPre = document.createElement("pre");
+        diffPre.className = "blog-versions-diff";
+        diffPre.hidden = true;
+        li.append(diffPre);
+
+        diffBtn.addEventListener("click", async () => {
+          if (!diffPre.hidden) {
+            diffPre.hidden = true;
+            return;
+          }
+          if (!parent) return;
+          diffBtn.disabled = true;
+          diffPre.hidden = false;
+          diffPre.textContent = "Loading diff…";
+          const url =
+            "/api/admin/blog-history?collection=" + encodeURIComponent(collection) +
+            "&slug=" + encodeURIComponent(slug) +
+            "&base=" + encodeURIComponent(parent.sha) +
+            "&head=" + encodeURIComponent(commit.sha);
+          const { ok, data } = await fetchJson(url);
+          diffBtn.disabled = false;
+          if (!ok || !data.ok) {
+            diffPre.textContent = "Could not load diff: " + ((data && data.message) || "request failed");
+            return;
+          }
+          const files = data.files || [];
+          diffPre.textContent = files.length
+            ? files.map((f) => f.patch).join("\n\n")
+            : "No changes between these revisions.";
+        });
+
+        restoreBtn.addEventListener("click", async () => {
+          const ok0 = confirm(
+            'Restore "' + slug + '" to revision ' + shortSha(commit.sha) +
+              '? This opens a content-only change.',
+          );
+          if (!ok0) return;
+          restoreBtn.disabled = true;
+          showMsg("Working…", null);
+          try {
+            const { ok, status: code, data } = await postHistory({
+              action: "restore", collection, slug, sha: commit.sha,
+            });
+            if (ok && data.ok) submitted(data);
+            else failed(data, code);
+          } catch (err) {
+            failed({ message: String(err) }, 0);
+          } finally {
+            restoreBtn.disabled = false;
+          }
+        });
+
+        list.append(li);
+      });
+    }
+
+    rail.querySelectorAll('[data-blog-rail-action="versions"]').forEach((button) => {
+      button.addEventListener("click", async () => {
+        const collection = button.dataset.blogCollection;
+        const slug = button.dataset.blogSlug;
+        const controls = button.getAttribute("aria-controls");
+        if (!collection || !slug || !controls) return;
+        const panel = document.getElementById(controls);
+        if (!panel) return;
+
+        const wasHidden = panel.hidden;
+        panel.hidden = !wasHidden;
+        button.setAttribute("aria-expanded", wasHidden ? "true" : "false");
+        if (!wasHidden) return; // just closed — nothing to load
+
+        const key = collection + "/" + slug;
+        if (versionsLoaded.has(key)) return; // already fetched once this page load
+
+        const status = panel.querySelector("[data-blog-versions-status]");
+        const url =
+          "/api/admin/blog-history?collection=" + encodeURIComponent(collection) +
+          "&slug=" + encodeURIComponent(slug);
+        const { ok, data } = await fetchJson(url);
+        if (!ok || !data.ok) {
+          status.textContent = "Could not load versions: " + ((data && data.message) || "request failed");
+          status.hidden = false;
+          return; // leave un-cached so re-opening retries
+        }
+        versionsLoaded.add(key);
+        renderVersions(panel, collection, slug, data.commits || []);
+      });
+    });
+
+    // Default selection: the first row (its record is the one rendered visible).
+    if (rows[0]) {
+      const { collection, slug } = rows[0].dataset;
+      if (collection && slug) select(collection, slug);
+    }
+  })();
+</script>