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

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

@@ -1,7 +1,7 @@
 ---
 /**
  * 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
+ * (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 })`
@@ -10,10 +10,10 @@
  *
  * 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
+ * (the content-only fast lane) 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.
+ * and the disabled action buttons (`data-blog-action`) are the contract the row
+ * actions wire to.
  */
 import { listCollections, listPosts, categorySlug } from "@/lib/blog/collection.js";
 import type { BlogPostSummary, PostStatus } from "@/lib/blog/types.js";
@@ -22,13 +22,16 @@ import { type Reaction } from "@/lib/blog/reactions.js";
 import { formatDate } from "@/lib/format";
 import AdminBlogDetailRail from "./AdminBlogDetailRail.astro";
 
-const { tenant } = Astro.locals;
+const { tenant, content } = Astro.locals;
 
-const collections = listCollections(tenant.tenant_id);
+const collections = await listCollections(tenant.tenant_id, content);
 const rows = (
   await Promise.all(
     collections.map(async (collection) =>
-      (await listPosts(tenant.tenant_id, collection, { includeUnpublished: true })).map((post) => ({
+      (await listPosts(tenant.tenant_id, collection, {
+        includeUnpublished: true,
+        content,
+      })).map((post) => ({
         collection,
         post,
       })),
@@ -43,7 +46,7 @@ const rows = (
     return at < bt ? 1 : at > bt ? -1 : 0;
   });
 
-// Editorial "Discussion" link-out (C1): every post's edits ride ONE candidate PR
+// Editorial "Discussion" link-out: 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.
 //
@@ -58,7 +61,7 @@ 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").
+// The four post statuses the engine can surface, including "scheduled".
 const STATUS_ORDER: PostStatus[] = ["published", "draft", "scheduled", "unlisted"];
 const STATUS_LABEL: Record<PostStatus, string> = {
   published: "Published",
@@ -90,7 +93,7 @@ const categoryOptions = [
 
 const columnCount = multiCollection ? 7 : 6;
 
-// ---- I4: language-variant chips ----
+// ---- 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
@@ -133,7 +136,7 @@ const primaryDate = (post: BlogPostSummary) => post.modifiedAt || post.published
 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) ----
+// ---- Engagement: top posts by views (rides the 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
@@ -495,7 +498,7 @@ const sparkPoints = (series: DailyViews[] | undefined, w = 108, h = 26): string
                             Publish
                           </button>
                         )}
-                        {/* Edit (in-browser markdown authoring) — B3.4. */}
+                        {/* Edit (in-browser markdown authoring). */}
                         <button
                           class="btn"
                           type="button"
@@ -505,7 +508,7 @@ const sparkPoints = (series: DailyViews[] | undefined, w = 108, h = 26): string
                         >
                           Edit
                         </button>
-                        {/* Translate (I4) — scaffold a draft sibling language variant. */}
+                        {/* Translate — scaffold a draft sibling language variant. */}
                         <button
                           class="btn"
                           type="button"
@@ -541,7 +544,7 @@ const sparkPoints = (series: DailyViews[] | undefined, w = 108, h = 26): string
   </div>
 
   {/*
-    B3.4 markdown editor v1 — a plain textarea for title/excerpt/category/author/body.
+    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
@@ -960,7 +963,7 @@ const sparkPoints = (series: DailyViews[] | undefined, w = 108, h = 26): string
     }
   }
 
-  /* ---- Newsletter send panel + confirm dialog (N5) ---- */
+  /* ---- Newsletter send panel + confirm dialog ---- */
   .blog-newsletter-actions {
     display: flex;
     flex-wrap: wrap;
@@ -1088,7 +1091,7 @@ const sparkPoints = (series: DailyViews[] | undefined, w = 108, h = 26): string
       });
     });
 
-    // ---- B3.4 markdown editor modal ----
+    // ---- Markdown editor modal ----
     const editor = root.querySelector("[data-blog-editor]");
     const appDomain = root.dataset.appDomain || "";
     const previewUrlFor = (pr) =>

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

@@ -0,0 +1,105 @@
+---
+/** Managed rows use only the frozen ManagedAnalyticsApiV1 transport. */
+import { withBase } from "@/lib/basePath";
+const { envelope } = Astro.props;
+const { tenant, basePath } = Astro.locals;
+const viewerCapability = Astro.locals.viewer?.capability ?? "none";
+const canManage = viewerCapability === "owner" || viewerCapability === "admin";
+const managedEndpoint = withBase(basePath || "", "/api/integrations/v1");
+const localReadModelEndpoint = withBase(basePath || "", "/api/apps/admin/integrations");
+const gtmMigrationEndpoint = withBase(basePath || "", "/api/apps/admin/gtm-migration");
+const targetTenant = envelope.targetTenant ?? tenant.appDomain;
+---
+
+<!-- agent-hook:integrations-tab -->
+<section id="integrations" class="band integrations-tab" aria-labelledby="admin-tab-integrations integrations-title" data-admin-panel data-agent-scope="integrations" role="tabpanel" data-integrations-panel data-managed-endpoint={managedEndpoint} data-local-readmodel-endpoint={localReadModelEndpoint} data-target-tenant={targetTenant} data-stage="staged" data-can-manage={canManage ? "true" : "false"}>
+  <div class="section-title">
+    <div><h2 id="integrations-title">Managed analytics</h2><p>Configure reviewed, native analytics adapters. New and revised configurations remain disabled until you explicitly publish them.</p></div>
+    <div class="actions"><button class="btn" type="button" data-integrations-refresh><svg><use href="#i-refresh"></use></svg>Refresh</button></div>
+  </div>
+  {!canManage && <div class="ship-gate amber"><div class="ship-gate-main"><span class="seal"><svg><use href="#i-shield"></use></svg></span><div><b>Read-only view</b><span>Only an owner or admin can change managed analytics.</span></div></div></div>}
+  <p class="chip" data-integrations-status role="status" aria-live="polite" tabindex="-1">Loading managed analytics…</p>
+
+  <div class="panel" id="managed-analytics-inventory">
+    <div class="panel-head"><h3><svg><use href="#i-workflows"></use></svg>Managed installs</h3><span class="chip teal">Native adapters</span></div>
+    <div class="panel-body"><div class="table-wrap"><table class="integrations-table"><thead><tr><th>Integration</th><th>Status</th><th>Revisions</th><th>Configuration</th><th class="action">Actions</th></tr></thead><tbody data-managed-integrations-body><tr><td colspan="5" class="subtle">Loading installs…</td></tr></tbody></table></div></div>
+  </div>
+
+  <div class="panel" id="integrations-catalog">
+    <div class="panel-head"><h3><svg><use href="#i-box"></use></svg>Add managed analytics</h3><span class="chip">Reviewed catalog</span></div>
+    <div class="panel-body"><p class="note">Collection origins, consent purposes, and manual event types are fixed by the reviewed adapter. Nothing is enabled until Publish.</p><div class="integrations-catalog-grid" data-managed-integrations-catalog><p class="subtle">Loading catalog…</p></div></div>
+  </div>
+
+  <!-- READ-ONLY diagnostic: the uploaded GTM export is parsed only as inert data;
+       analysis never publishes, activates, renders, or executes imported code. -->
+  <div class="panel" id="integrations-gtm-migration" data-gtm-migration-panel data-gtm-endpoint={gtmMigrationEndpoint} data-target-tenant={targetTenant}>
+    <div class="panel-head"><h3><svg><use href="#i-file"></use></svg>Migrate from GTM</h3><span class="chip teal">Read-only report</span></div>
+    <div class="panel-body grid">
+      <p class="note">Upload a Google Tag Manager container export. It is parsed as inert data to produce an inventory, dependency map, and migration dispositions. Nothing is published or activated; the file is never executed.</p>
+      <div class="gtm-upload">
+        <label class="gtm-upload-label" for="gtm-migration-file">GTM container export (JSON)</label>
+        <input id="gtm-migration-file" type="file" accept="application/json,.json" data-gtm-file />
+        <div class="actions">
+          <button class="btn primary" type="button" data-gtm-analyze><svg><use href="#i-file"></use></svg>Analyze</button>
+          <button class="btn" type="button" data-gtm-download disabled><svg><use href="#i-export"></use></svg>Download support bundle</button>
+        </div>
+        <p class="chip" data-gtm-status role="status" aria-live="polite">Choose a GTM export file to begin.</p>
+      </div>
+      <div class="gtm-results" data-gtm-results hidden>
+        <section class="gtm-section" aria-labelledby="gtm-inventory-title"><h4 id="gtm-inventory-title">Inventory</h4><div data-gtm-inventory></div></section>
+        <section class="gtm-section" aria-labelledby="gtm-dispositions-title"><h4 id="gtm-dispositions-title">Dispositions</h4><div data-gtm-dispositions></div></section>
+        <section class="gtm-section" aria-labelledby="gtm-graph-title"><h4 id="gtm-graph-title">Dependency map</h4><div data-gtm-graph></div></section>
+        <section class="gtm-section" aria-labelledby="gtm-findings-title"><h4 id="gtm-findings-title">Unresolved findings</h4><div data-gtm-findings></div></section>
+        <section class="gtm-section" aria-labelledby="gtm-recommendations-title"><h4 id="gtm-recommendations-title">Recommendations</h4><div data-gtm-recommendations></div></section>
+      </div>
+    </div>
+  </div>
+
+  <details class="panel" id="tenant-local-integrations">
+    <summary class="panel-head"><h3>Other tenant-local integrations</h3><span class="chip">Read only</span></summary>
+    <div class="panel-body"><div class="table-wrap"><table class="integrations-table local"><thead><tr><th>Integration</th><th>Status</th><th>Authority</th><th>State</th><th>Consent</th></tr></thead><tbody data-local-integrations-body><tr><td colspan="5" class="subtle">Loading tenant-local integrations…</td></tr></tbody></table></div></div>
+  </details>
+</section>
+
+<script>
+  import { initIntegrationsTab } from "@/lib/apps/integrationsTab";
+  import { initGtmMigrationTab } from "@/lib/apps/gtmMigrationTab";
+  initIntegrationsTab();
+  initGtmMigrationTab();
+</script>
+
+<style>
+  .integrations-table { min-width: 760px; width: 100%; border-collapse: collapse; }
+  .integrations-table th, .integrations-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--admin-line); }
+  .integrations-table td .subtle { display: block; color: var(--admin-muted); font-size: 12px; }
+  .integrations-actions, .integrations-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+  .integrations-inline input, .integrations-inline select { min-width: 0; max-width: 210px; padding: 7px 9px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius-sm); }
+  [data-integrations-status][data-tone="error"] { background: var(--admin-red); color: #fff; }
+  .integrations-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
+  .integrations-adapter-card { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius); background: var(--admin-surface); }
+  .integrations-adapter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
+  .integrations-adapter-meta { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 12px; }
+  .integrations-adapter-meta dt { color: var(--admin-muted); }
+  .integrations-adapter-meta dd { margin: 0; overflow-wrap: anywhere; }
+  .integrations-adapter-config { display: flex; flex-wrap: wrap; gap: 8px; }
+  .integrations-adapter-config input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius-sm); }
+  .integrations-adapter-result[data-tone="error"] { color: var(--admin-red); }
+  .gtm-upload { display: grid; gap: 8px; }
+  .gtm-upload-label { font-size: 12px; color: var(--admin-muted); }
+  .gtm-upload input[type="file"] { max-width: 100%; }
+  [data-gtm-status][data-tone="error"] { background: var(--admin-red); color: #fff; }
+  .gtm-results { display: grid; gap: 16px; margin-top: 8px; }
+  .gtm-section h4 { margin: 0 0 6px; }
+  .gtm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
+  .gtm-stat { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius-sm); background: var(--admin-surface); }
+  .gtm-stat strong { font-size: 18px; }
+  .gtm-stat span { font-size: 12px; color: var(--admin-muted); overflow-wrap: anywhere; }
+  .gtm-disposition-group { margin-bottom: 12px; }
+  .gtm-disposition-group h4 { display: flex; align-items: center; gap: 8px; }
+  .gtm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+  .gtm-list li { padding: 6px 8px; border-bottom: 1px solid var(--admin-line); overflow-wrap: anywhere; }
+  .gtm-list li .note { margin: 2px 0 0; color: var(--admin-muted); font-size: 12px; }
+  details.panel > summary { cursor: pointer; list-style-position: inside; }
+  details.panel > summary h3 { display: inline-flex; }
+  @media (max-width: 760px) { .integrations-adapter-config, .integrations-inline { flex-direction: column; align-items: stretch; } .integrations-inline input, .integrations-inline select { max-width: none; } .table-wrap { max-width: 100%; overflow-x: auto; } }
+</style>