@mohasinac/appkit 4.71.0 → 4.72.0

package/dist/_internal/client/features/layout/PortalBackLink.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * "Back to main site" — the persistent way OUT of a dashboard portal.
+ *
+ * Mounted once, in `DashboardLayoutClient`'s cross-nav footer, so every
+ * portal (`admin.`, `seller.`, `user.`, `employee.`, and any portal added
+ * later) gets it with no per-layout wiring. That placement is the whole point:
+ * the alternative — threading a host-aware href down from each portal's
+ * `layout.tsx` — is four files today and one more per portal, i.e. exactly the
+ * per-site editing the portal registry exists to remove.
+ *
+ * ── Why the host is read on the CLIENT rather than from `headers()` ─────────
+ *
+ * `headers()` is a dynamic API. Reading it in a layout opts that layout's
+ * whole subtree into dynamic rendering, and `/user/layout.tsx` carries an
+ * explicit, measured decision NOT to read the session server-side for exactly
+ * that reason (the `/user/*` shell prerenders; nothing sensitive is in it).
+ * Adding a `headers()` call there to position a footer link would reverse a
+ * documented performance decision to place a footer link.
+ *
+ * ── Why it renders nothing until mounted ────────────────────────────────────
+ *
+ * 🛑 Returning null on the server AND on the first client render is what makes
+ * this hydration-safe. `window.location` does not exist during SSR, so a
+ * component that rendered the link immediately would produce server HTML
+ * without it and client HTML with it — a hydration mismatch on every
+ * dashboard page. The link appearing one frame after mount is the correct
+ * trade for a footer affordance; it is never the only way out of a portal
+ * (typing the main host always works).
+ *
+ * On the canonical host the link stays hidden permanently, because
+ * `mainSiteOriginFromPortalHost` returns null for a non-portal host — there is
+ * nothing to go back from, and a "Back to main site" link on the main site is
+ * noise.
+ */
+import { useEffect, useState } from "react";
+import { ExternalLink } from "lucide-react";
+import { mainSiteOriginFromPortalHost } from "../../../../next/routing/portals.js";
+export function PortalBackLink({ canonicalOrigin, className, onNavigate, label = "Back to main site", }) {
+    const [origin, setOrigin] = useState(null);
+    useEffect(() => {
+        const derived = mainSiteOriginFromPortalHost(window.location.origin);
+        // `canonicalOrigin` wins, but ONLY on a portal host: `derived` being null
+        // is how we know this is not a portal, and an override must not be able to
+        // force the link onto the main site itself.
+        setOrigin(derived === null ? null : (canonicalOrigin ?? derived));
+    }, [canonicalOrigin]);
+    if (!origin)
+        return null;
+    return (
+    /*
+     * A plain <a>, not next/link: this leaves the origin, so there is no
+     * client-side route to push and a prefetch would be a cross-origin
+     * request for a page this app does not serve.
+     */
+    _jsxs("a", { href: origin, onClick: onNavigate, className: className, children: [_jsx(ExternalLink, { "aria-hidden": "true", className: "h-4 w-4" }), label] }));
+}

package/dist/_internal/client/features/layout/SidebarCollapseToggle.js

@@ -14,5 +14,41 @@ export function SidebarCollapseToggle({ expanded, onToggle, expandedLabel = "Col
     // Chevron rotation direction mirrors along with the dock side so it keeps
     // pointing "into" the collapsed panel regardless of which edge it's on.
     const chevronRotated = edge === "left" ? !expanded : expanded;
-    return (_jsx(IconButton, { type: "button", onClick: onToggle, "aria-label": expanded ? expandedLabel : collapsedLabel, "aria-expanded": expanded, variant: "ghost", style: HANDLE_STYLE, className: `w-9 shrink-0 ${roundedClass} shadow-lg transition-all duration-200 hover:shadow-xl hover:brightness-110 active:scale-[0.96]`, icon: _jsx("svg", { className: `w-4 h-4 drop-shadow-sm transition-transform duration-300 ${chevronRotated ? "rotate-180" : ""} shrink-0`, style: CHEVRON_STYLE, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }));
+    /*
+     * 🛑 MUST be `position: absolute`, pinned to the panel's INNER (content-
+     * facing) edge — never a normal flex sibling after the nav panel.
+     *
+     * 🛑 `position: absolute` does NOT decouple this handle from the parent
+     * panel's `transform`. A CSS `transform` on an ancestor moves its entire
+     * rendered subtree — including absolutely-positioned descendants — as one
+     * painted unit; `position: absolute` only controls which box the element
+     * is positioned *relative to*, not whether it rides along with an
+     * ancestor's transform. (An earlier version of this comment claimed the
+     * opposite — that was the root cause of the "Expand sidebar" handle
+     * rendering flush against, and reading as clipped by, the viewport edge.)
+     *
+     * `sidebarPositionClasses.ts`'s collapsed state now translates the WHOLE
+     * panel by a full `100%` (off-screen, no readable-text sliver left
+     * bleeding into the viewport — see that file's own comment). Because this
+     * handle is a child of that same transformed panel, it rides the full
+     * 100% shift too, landing with ZERO clearance from the viewport edge —
+     * which, combined with its half-pill shape (`roundedClass` rounds only
+     * the content-facing side, square on the outer/edge side by design), is
+     * visually indistinguishable from a circle clipped in half.
+     *
+     * `edgeOffsetClass` below compensates for exactly that: expanded state is
+     * unchanged (flush against the panel's inner edge, which was never
+     * broken); collapsed state adds back `+1.25rem` of inward offset — same
+     * magic number as `roundedClass`'s corner radius, not a new constant — so
+     * the handle keeps real clearance from the viewport edge specifically
+     * when the panel's full-width shift would otherwise push it flush.
+     */
+    const edgeOffsetClass = edge === "left"
+        ? expanded
+            ? "right-0 translate-x-full"
+            : "right-0 translate-x-[calc(100%+1.25rem)]"
+        : expanded
+            ? "left-0 -translate-x-full"
+            : "left-0 -translate-x-[calc(100%+1.25rem)]";
+    return (_jsx(IconButton, { type: "button", onClick: onToggle, "aria-label": expanded ? expandedLabel : collapsedLabel, "aria-expanded": expanded, variant: "ghost", style: HANDLE_STYLE, className: `absolute top-0 ${edgeOffsetClass} w-9 shrink-0 ${roundedClass} shadow-lg transition-all duration-200 hover:shadow-xl hover:brightness-110 active:scale-[0.96]`, icon: _jsx("svg", { className: `w-4 h-4 drop-shadow-sm transition-transform duration-300 ${chevronRotated ? "rotate-180" : ""} shrink-0`, style: CHEVRON_STYLE, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }));
 }

package/dist/_internal/client/features/layout/filterNavItems.d.ts

@@ -3,6 +3,10 @@ type FilterableItem = {
     id?: string;
     requiredPermission?: string;
 };
+type NavConfigMap = Record<string, {
+    enabled: boolean;
+    order?: number;
+}> | undefined;
 /**
  * Filters nav items by:
  * 1. siteSettings.navConfig[item.id].enabled (admin toggle)
@@ -31,9 +35,7 @@ type FilterableItem = {
  * data to satisfy it is the same shape as seeding a ratchet from the wrong
  * measurement — Root Cause #84.
  */
-export declare function filterNavItems<T extends FilterableItem>(items: T[], navConfig: Record<string, {
-    enabled: boolean;
-}> | undefined, userPermissions: string[] | undefined, isAdmin?: boolean): T[];
+export declare function filterNavItems<T extends FilterableItem>(items: T[], navConfig: NavConfigMap, userPermissions: string[] | undefined, isAdmin?: boolean): T[];
 /**
  * The GROUP-level filter — the sidebar's and the dashboard hubs' single answer
  * to "which sections and links may this viewer see".
@@ -57,8 +59,11 @@ export declare function filterNavItems<T extends FilterableItem>(items: T[], nav
  * An empty group is dropped rather than rendered as a heading with nothing
  * under it — on a hub that is a section card claiming "0 screens", which reads
  * as a fault rather than as "not for you".
+ *
+ * REORDER (added 2026-11-04, 3B-1b backlog item 4) applies AFTER visibility
+ * filtering, same "filter then sort" order every other `applyXVisibility`
+ * wrapper in this codebase uses — an item hidden by `navConfig` never
+ * occupies a position in the reordered list to begin with.
  */
-export declare function filterNavGroups<T extends SidebarNavGroup>(groups: T[], navConfig: Record<string, {
-    enabled: boolean;
-}> | undefined, permissions: string[] | null | undefined): T[];
+export declare function filterNavGroups<T extends SidebarNavGroup>(groups: T[], navConfig: NavConfigMap, permissions: string[] | null | undefined): T[];
 export {};

package/dist/_internal/client/features/layout/filterNavItems.js

@@ -1,3 +1,24 @@
+import { sortByFieldOrder } from "../../../../features/shell/field-ui-meta.js";
+/**
+ * Derives a `sortByFieldOrder`-shaped `fieldOrder: string[]` from
+ * `navConfig`'s own `order: number` entries — reorder, same as hide, reuses
+ * the canonical 3B-1b hide/reorder primitive rather than a bespoke sort.
+ *
+ * `navConfig` stores a sparse per-item `order` (not a `fieldOrder: string[]`
+ * array like `field-visibility.ts`) because it predates 3B-1b and is its
+ * OWN, already-live, already-generic per-item override store — see the plan's
+ * "🛑 THE CANONICAL PATTERN" section for why this subsystem deliberately
+ * does not move its storage onto `field-visibility.ts`. Only the SORT LOGIC
+ * is shared, not the storage shape.
+ */
+function navConfigFieldOrder(navConfig) {
+    if (!navConfig)
+        return [];
+    return Object.entries(navConfig)
+        .filter((entry) => typeof entry[1].order === "number")
+        .sort((a, b) => a[1].order - b[1].order)
+        .map(([id]) => id);
+}
 /**
  * Filters nav items by:
  * 1. siteSettings.navConfig[item.id].enabled (admin toggle)
@@ -64,15 +85,26 @@ export function filterNavItems(items, navConfig, userPermissions, isAdmin = fals
  * An empty group is dropped rather than rendered as a heading with nothing
  * under it — on a hub that is a section card claiming "0 screens", which reads
  * as a fault rather than as "not for you".
+ *
+ * REORDER (added 2026-11-04, 3B-1b backlog item 4) applies AFTER visibility
+ * filtering, same "filter then sort" order every other `applyXVisibility`
+ * wrapper in this codebase uses — an item hidden by `navConfig` never
+ * occupies a position in the reordered list to begin with.
  */
 export function filterNavGroups(groups, navConfig, permissions) {
     const isAdmin = permissions === null;
     if (isAdmin && !navConfig)
         return groups;
+    const fieldOrder = navConfigFieldOrder(navConfig);
     return groups
-        .map((group) => ({
-        ...group,
-        items: filterNavItems(group.items, navConfig, permissions ?? undefined, isAdmin),
-    }))
+        .map((group) => {
+        const visible = filterNavItems(group.items, navConfig, permissions ?? undefined, isAdmin);
+        return {
+            ...group,
+            items: fieldOrder.length > 0
+                ? sortByFieldOrder(visible, fieldOrder, (item) => item.id ?? "")
+                : visible,
+        };
+    })
         .filter((group) => group.items.length > 0);
 }

package/dist/_internal/client/features/layout/sidebarPositionClasses.js

@@ -1,15 +1,23 @@
 export function getSidebarRailClasses(hand) {
+    // Collapsed state hides the panel FULLY off-screen (-translate-x-full /
+    // translate-x-full), not a partial `calc(100% - 1.25rem)` that left a
+    // ~20px sliver of the full-width, still-text-labelled panel bleeding into
+    // the viewport — read as a rendering bug, not a control, and flagged
+    // directly (owner screenshot, 2026-11-05). The toggle handle itself
+    // (SidebarCollapseToggle) is positioned relative to the panel's own edge
+    // via `position: absolute`, independent of this transform, so it stays
+    // fully visible and clickable in both states regardless.
     if (hand === "left") {
         return {
             edgeClass: "left-0",
             borderClass: "border-r",
-            collapsedTranslateClass: "-translate-x-[calc(100%-1.25rem)]",
+            collapsedTranslateClass: "-translate-x-full",
         };
     }
     return {
         edgeClass: "right-0",
         borderClass: "border-l",
-        collapsedTranslateClass: "translate-x-[calc(100%-1.25rem)]",
+        collapsedTranslateClass: "translate-x-full",
     };
 }
 export function getSidebarOverlayClasses(hand) {

package/dist/_internal/client/features/maintenance/views/AnalysisRunnerView.d.ts

@@ -1,2 +1,7 @@
 import * as React from "react";
-export declare function AnalysisRunnerView(): React.JSX.Element;
+import type { DashboardCard } from "../../../../shared/features/dashboard/recent-entry";
+export interface AnalysisRunnerViewProps {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+}
+export declare function AnalysisRunnerView({ pageRegionCards }?: AnalysisRunnerViewProps): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/AnalysisRunnerView.js

@@ -6,7 +6,8 @@ import * as React from "react";
 import { Button, Div, Heading, Input, Li, Section, Span, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "@mohasinac/appkit/client";
 import { Select } from "@mohasinac/appkit/ui";
 import { ADMIN_ENDPOINTS } from "../../../../../constants/api-endpoints.js";
-export function AnalysisRunnerView() {
+import { AdminComposableRegion } from "../../../../../features/dashboard/components/AdminComposableRegion.js";
+export function AnalysisRunnerView({ pageRegionCards = [] } = {}) {
     const [days, setDays] = React.useState(7);
     const [source, setSource] = React.useState("all");
     const [running, setRunning] = React.useState(false);
@@ -22,7 +23,7 @@ export function AnalysisRunnerView() {
                 body: JSON.stringify({ days, source }),
             });
             const body = (await res.json());
-            if (!res.ok || !body.ok) {
+            if (!res.ok || !body.success) {
                 setError(toUserMessage("code" in body ? String(body.code) : undefined, undefined, { fallback: `The analysis run failed (HTTP ${res.status}).` }));
                 setRunning(false);
                 return;
@@ -39,7 +40,7 @@ export function AnalysisRunnerView() {
             setRunning(false);
         }
     }
-    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Maintenance analysis" }), _jsxs(Div, { style: { display: "flex", gap: "1rem", alignItems: "center", margin: "1rem 0" }, children: [_jsxs("label", { children: ["Days back:\u00A0", _jsx(Input, { bare: true, type: "number", min: 1, max: 30, value: days, onChange: (e) => setDays(Math.max(1, Math.min(30, Number(e.target.value) || 7))), style: { width: 80, padding: "0.35rem 0.5rem", border: "1px solid var(--appkit-color-border)", borderRadius: 4 } })] }), _jsxs("label", { children: ["Source:\u00A0", _jsx(Select, { options: [
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Maintenance analysis" }), _jsx(AdminComposableRegion, { pageId: "admin-maintenance-analysis", initialCards: pageRegionCards }), _jsxs(Div, { style: { display: "flex", gap: "1rem", alignItems: "center", margin: "1rem 0" }, children: [_jsxs("label", { children: ["Days back:\u00A0", _jsx(Input, { bare: true, type: "number", min: 1, max: 30, value: days, onChange: (e) => setDays(Math.max(1, Math.min(30, Number(e.target.value) || 7))), style: { width: 80, padding: "0.35rem 0.5rem", border: "1px solid var(--appkit-color-border)", borderRadius: 4 } })] }), _jsxs("label", { children: ["Source:\u00A0", _jsx(Select, { options: [
                                     { value: "all", label: "all" },
                                     { value: "vercel", label: "server (vercel)" },
                                     { value: "client", label: "client" },

package/dist/_internal/client/features/maintenance/views/CacheInvalidationPanel.js

@@ -54,7 +54,7 @@ export function CacheInvalidationPanel() {
                 body: JSON.stringify({}),
             });
             const body = (await res.json());
-            if (!res.ok || !body.ok) {
+            if (!res.ok || !body.success) {
                 /*
                  * 🛑 `toUserMessage`, never `?? body.error`. The server's own message
                  * is server text; piping it into the UI is how a Node MODULE_NOT_FOUND

package/dist/_internal/client/features/maintenance/views/CloudLogsListView.d.ts

@@ -1,9 +1,12 @@
 import * as React from "react";
 import type { CloudLogEntry } from "../../../../server/features/maintenance/cloud-logs-data";
+import type { DashboardCard } from "../../../../shared/features/dashboard/recent-entry";
 export interface CloudLogsListViewProps {
     title: string;
     subtitle?: string;
     initialEntries: CloudLogEntry[];
     initialNextPageToken: string | null;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function CloudLogsListView({ title, subtitle, initialEntries, initialNextPageToken, }: CloudLogsListViewProps): React.JSX.Element;
+export declare function CloudLogsListView({ title, subtitle, initialEntries, initialNextPageToken, pageRegionCards, }: CloudLogsListViewProps): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/CloudLogsListView.js

@@ -5,6 +5,7 @@ import { Button, Div, Heading, Span, Table, Tbody, Td, Text, Th, Thead, Tr } fro
 import { ADMIN_ENDPOINTS } from "../../../../../constants/api-endpoints.js";
 import { normalizeError } from "../../../../../errors/normalize.js";
 import { toUserMessage } from "../../../../../errors/error-display-map.js";
+import { AdminComposableRegion } from "../../../../../features/dashboard/components/AdminComposableRegion.js";
 const BORDER_STYLE = "1px solid var(--appkit-color-border)";
 const COLUMNS = [
     { key: "timestampFmt", label: "When", width: "180px" },
@@ -16,7 +17,7 @@ function fmt(timestamp) {
     const d = new Date(timestamp);
     return Number.isNaN(d.getTime()) ? timestamp : d.toISOString().replace("T", " ").slice(0, 19);
 }
-export function CloudLogsListView({ title, subtitle, initialEntries, initialNextPageToken, }) {
+export function CloudLogsListView({ title, subtitle, initialEntries, initialNextPageToken, pageRegionCards = [], }) {
     const [entries, setEntries] = React.useState(initialEntries);
     const [nextPageToken, setNextPageToken] = React.useState(initialNextPageToken);
     const [loadingMore, setLoadingMore] = React.useState(false);
@@ -31,7 +32,7 @@ export function CloudLogsListView({ title, subtitle, initialEntries, initialNext
             url.searchParams.set("pageToken", nextPageToken);
             const res = await fetch(url.toString());
             const body = (await res.json());
-            if (!res.ok || !body.ok) {
+            if (!res.ok || !body.success) {
                 setError(toUserMessage("code" in body ? String(body.code) : undefined, undefined, { fallback: `Could not load logs (HTTP ${res.status}).` }));
                 return;
             }
@@ -48,7 +49,7 @@ export function CloudLogsListView({ title, subtitle, initialEntries, initialNext
             setLoadingMore(false);
         }
     }
-    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1400px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: title }), subtitle ? (_jsx(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)", marginBottom: "1rem" }, children: subtitle })) : null, _jsxs(Span, { style: { fontSize: "0.85rem", color: "var(--appkit-color-text-muted)" }, children: [entries.length, " entries loaded"] }), error ? (_jsx(Text, { as: "p", style: { color: "var(--appkit-color-error)", marginTop: "0.5rem" }, children: error })) : null, _jsx(Div, { style: { overflowX: "auto", border: BORDER_STYLE, borderRadius: 6, marginTop: "0.75rem" }, children: _jsxs(Table, { style: { width: "100%", borderCollapse: "collapse", fontSize: "0.85rem" }, children: [_jsx(Thead, { style: { background: "var(--appkit-color-bg)" }, children: _jsx(Tr, { children: COLUMNS.map((c) => (_jsx(Th, { style: {
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1400px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: title }), subtitle ? (_jsx(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)", marginBottom: "1rem" }, children: subtitle })) : null, _jsx(AdminComposableRegion, { pageId: "admin-maintenance-cloud-logs", initialCards: pageRegionCards }), _jsxs(Span, { style: { fontSize: "0.85rem", color: "var(--appkit-color-text-muted)" }, children: [entries.length, " entries loaded"] }), error ? (_jsx(Text, { as: "p", style: { color: "var(--appkit-color-error)", marginTop: "0.5rem" }, children: error })) : null, _jsx(Div, { style: { overflowX: "auto", border: BORDER_STYLE, borderRadius: 6, marginTop: "0.75rem" }, children: _jsxs(Table, { style: { width: "100%", borderCollapse: "collapse", fontSize: "0.85rem" }, children: [_jsx(Thead, { style: { background: "var(--appkit-color-bg)" }, children: _jsx(Tr, { children: COLUMNS.map((c) => (_jsx(Th, { style: {
                                         textAlign: "left",
                                         padding: "0.5rem 0.75rem",
                                         borderBottom: BORDER_STYLE,

package/dist/_internal/client/features/maintenance/views/MaintenanceDashboardView.d.ts

@@ -1,7 +1,10 @@
 import * as React from "react";
 import type { MaintenanceDashboardCounts } from "../../../../server/features/maintenance/data";
+import type { DashboardCard } from "../../../../shared/features/dashboard/recent-entry";
 export interface MaintenanceDashboardViewProps {
     counts: MaintenanceDashboardCounts;
     basePath: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function MaintenanceDashboardView({ counts, basePath, }: MaintenanceDashboardViewProps): React.JSX.Element;
+export declare function MaintenanceDashboardView({ counts, basePath, pageRegionCards, }: MaintenanceDashboardViewProps): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/MaintenanceDashboardView.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Anchor, Div, Heading, Li, Nav, Section, Span, Text, Ul } from "@mohasinac/appkit/client";
 import { CacheInvalidationPanel } from "./CacheInvalidationPanel.js";
+import { RepositoryCacheStatusPanel } from "./RepositoryCacheStatusPanel.js";
+import { AdminComposableRegion } from "../../../../../features/dashboard/components/AdminComposableRegion.js";
 const card = {
     padding: "1rem 1.25rem",
     border: "1px solid var(--appkit-color-border)",
     borderRadius: 8,
     background: "var(--appkit-color-surface)",
 };
-export function MaintenanceDashboardView({ counts, basePath, }) {
-    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Maintenance" }), _jsx(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: "Errors and failures across the platform \u2014 server, client, and Cloud Functions." }), _jsxs(Div, { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(170px, 1fr))", gap: "0.75rem", marginBottom: "1.5rem" }, children: [_jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 24 hours" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last24h })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 7 days" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last7d })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 30 days" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last30d })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Server (Vercel)" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.vercel })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Client" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.client })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Cloud Functions" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.function })] })] }), _jsx(CacheInvalidationPanel, {}), _jsxs(Section, { style: { marginBottom: "1.5rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600 }, children: "Top codes (30d)" }), _jsx(Ul, { style: { listStyle: "none", padding: 0 }, children: counts.topCodes.length === 0 ? _jsx(Li, { style: { color: "var(--appkit-color-text-muted)" }, children: "No errors recorded." }) :
+export function MaintenanceDashboardView({ counts, basePath, pageRegionCards = [], }) {
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Maintenance" }), _jsx(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: "Errors and failures across the platform \u2014 server, client, and Cloud Functions." }), _jsx(AdminComposableRegion, { pageId: "admin-maintenance", initialCards: pageRegionCards }), _jsxs(Div, { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(170px, 1fr))", gap: "0.75rem", marginBottom: "1.5rem" }, children: [_jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 24 hours" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last24h })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 7 days" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last7d })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 30 days" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last30d })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Server (Vercel)" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.vercel })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Client" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.client })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Cloud Functions" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.function })] })] }), _jsx(CacheInvalidationPanel, {}), _jsx(RepositoryCacheStatusPanel, {}), _jsxs(Section, { style: { marginBottom: "1.5rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600 }, children: "Top codes (30d)" }), _jsx(Ul, { style: { listStyle: "none", padding: 0 }, children: counts.topCodes.length === 0 ? _jsx(Li, { style: { color: "var(--appkit-color-text-muted)" }, children: "No errors recorded." }) :
                             counts.topCodes.map((c) => (_jsxs(Li, { style: { display: "flex", justifyContent: "space-between", padding: "0.25rem 0", borderBottom: "1px solid var(--appkit-color-border-subtle)" }, children: [_jsx(Span, { style: { fontFamily: "monospace" }, children: c.code }), _jsx(Span, { children: c.count })] }, c.code))) })] }), _jsxs(Section, { style: { marginBottom: "1.5rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600 }, children: "Top routes (30d)" }), _jsx(Ul, { style: { listStyle: "none", padding: 0 }, children: counts.topRoutes.length === 0 ? _jsx(Li, { style: { color: "var(--appkit-color-text-muted)" }, children: "No errors recorded." }) :
                             counts.topRoutes.map((r) => (_jsxs(Li, { style: { display: "flex", justifyContent: "space-between", padding: "0.25rem 0", borderBottom: "1px solid var(--appkit-color-border-subtle)" }, children: [_jsxs(Span, { style: { fontFamily: "monospace" }, children: ["[", r.source, "] ", r.route] }), _jsx(Span, { children: r.count })] }, `${r.source}:${r.route}`))) })] }), _jsxs(Nav, { "aria-label": "Maintenance sections", style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "0.5rem" }, children: [_jsxs(Anchor, { href: `${basePath}/server-errors`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Server errors" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Vercel function failures" })] }), _jsxs(Anchor, { href: `${basePath}/client-errors`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Client errors" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "window.onerror + unhandledrejection + boundaries" })] }), _jsxs(Anchor, { href: `${basePath}/function-errors`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Function errors" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Cloud Functions handler exceptions" })] }), _jsxs(Anchor, { href: `${basePath}/cloud-logs`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Cloud Logging" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Live stream from Cloud Logging API" })] }), _jsxs(Anchor, { href: `${basePath}/payment-rollbacks`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Payment rollbacks" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "PhonePe refund + upstream-unavailable rows" })] }), _jsxs(Anchor, { href: `${basePath}/analysis`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Analysis" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Run the maintenance analyzer + recommendations" })] })] })] }));
 }

package/dist/_internal/client/features/maintenance/views/RepositoryCacheStatusPanel.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+/**
+ * Item 8 §18 (overhaul brief) — the `CacheManager` in-memory read cache
+ * (today: site settings' 2 fixed keys, products' dynamic per-id/per-slug
+ * prefix), a different layer entirely from `CacheInvalidationPanel` above it
+ * on this page, which clears Next.js's page/ISR cache instead.
+ *
+ * 🛑 "Clear" is write-gated SERVER-SIDE on `admin:maintenance:clear-cache`,
+ * which `maintenance_employee` does not hold (viewing is `view-cache`, which
+ * it does). `ActionDef.permissions` is UI metadata only — `<Button action>`
+ * does not read it — so the buttons are hidden here via `isAdminUser`
+ * directly, the same predicate CLAUDE.md's RBAC rules require everywhere
+ * else, rather than relying on the 403 alone to communicate the boundary.
+ */
+export declare function RepositoryCacheStatusPanel(): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/RepositoryCacheStatusPanel.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Button, Div, FieldInput, Heading, Skeleton, Span, Text } from "@mohasinac/appkit/client";
+import { normalizeError } from "../../../../../errors/normalize.js";
+import { toUserMessage } from "../../../../../errors/error-display-map.js";
+import { ADMIN_ENDPOINTS } from "../../../../../constants/api-endpoints.js";
+import { ACTIONS } from "../../../../shared/actions/action-registry.js";
+import { useSession } from "../../../../../react/contexts/SessionContext.js";
+import { isAdminUser } from "../../../../../features/auth/role-predicates.js";
+function formatMs(ms) {
+    if (ms === null)
+        return "—";
+    if (ms < 1000)
+        return `${ms}ms`;
+    const s = Math.round(ms / 1000);
+    if (s < 60)
+        return `${s}s`;
+    return `${Math.round(s / 60)}m`;
+}
+/**
+ * Item 8 §18 (overhaul brief) — the `CacheManager` in-memory read cache
+ * (today: site settings' 2 fixed keys, products' dynamic per-id/per-slug
+ * prefix), a different layer entirely from `CacheInvalidationPanel` above it
+ * on this page, which clears Next.js's page/ISR cache instead.
+ *
+ * 🛑 "Clear" is write-gated SERVER-SIDE on `admin:maintenance:clear-cache`,
+ * which `maintenance_employee` does not hold (viewing is `view-cache`, which
+ * it does). `ActionDef.permissions` is UI metadata only — `<Button action>`
+ * does not read it — so the buttons are hidden here via `isAdminUser`
+ * directly, the same predicate CLAUDE.md's RBAC rules require everywhere
+ * else, rather than relying on the 403 alone to communicate the boundary.
+ */
+export function RepositoryCacheStatusPanel() {
+    const { user } = useSession();
+    const canClear = isAdminUser(user);
+    const [status, setStatus] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [clearingId, setClearingId] = React.useState(null);
+    // Item 8 (overhaul brief) — draft TTL-minutes input per named row, keyed
+    // by source id. Seeded from the live ttlMs once status loads; typing
+    // doesn't save until "Save".
+    const [ttlDrafts, setTtlDrafts] = React.useState({});
+    const [savingTtlId, setSavingTtlId] = React.useState(null);
+    const load = React.useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(ADMIN_ENDPOINTS.MAINTENANCE_CACHE);
+            const body = (await res.json());
+            if (!res.ok || !body.success) {
+                setError(toUserMessage("code" in body ? String(body.code) : undefined, undefined, {
+                    fallback: `Could not load cache status (HTTP ${res.status}).`,
+                }));
+                return;
+            }
+            setStatus(body.data);
+            setTtlDrafts((prev) => {
+                const next = { ...prev };
+                for (const n of body.data.named) {
+                    if (next[n.id] === undefined) {
+                        next[n.id] = n.ttlMs !== null ? String(Math.round(n.ttlMs / 60000)) : "";
+                    }
+                }
+                return next;
+            });
+        }
+        catch (err) {
+            const e = normalizeError(err);
+            setError(toUserMessage(e.code, undefined, {
+                fallback: "Could not reach the cache status endpoint.",
+            }));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    React.useEffect(() => {
+        void load();
+    }, [load]);
+    async function clear(kind, id) {
+        setClearingId(id ?? "all");
+        setError(null);
+        try {
+            const res = await fetch(ADMIN_ENDPOINTS.MAINTENANCE_CACHE, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(kind === "all" ? { kind } : { kind, id }),
+            });
+            const body = (await res.json());
+            if (!res.ok || !body.success) {
+                setError(toUserMessage("code" in body ? String(body.code) : undefined, undefined, {
+                    fallback: `Could not clear that cache (HTTP ${res.status}).`,
+                }));
+                return;
+            }
+            setStatus(body.data.status);
+        }
+        catch (err) {
+            const e = normalizeError(err);
+            setError(toUserMessage(e.code, undefined, {
+                fallback: "Could not reach the cache endpoint.",
+            }));
+        }
+        finally {
+            setClearingId(null);
+        }
+    }
+    async function saveTtl(id) {
+        const raw = ttlDrafts[id] ?? "";
+        const minutes = Number(raw);
+        if (raw.trim() === "" || !Number.isFinite(minutes) || minutes < 0) {
+            setError("Enter a whole number of minutes, 0 or greater.");
+            return;
+        }
+        setSavingTtlId(id);
+        setError(null);
+        try {
+            const res = await fetch(ADMIN_ENDPOINTS.MAINTENANCE_CACHE, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ id, minutes }),
+            });
+            const body = (await res.json());
+            if (!res.ok || !body.success) {
+                setError(toUserMessage("code" in body ? String(body.code) : undefined, undefined, {
+                    fallback: `Could not save that TTL (HTTP ${res.status}).`,
+                }));
+                return;
+            }
+            setStatus(body.data.status);
+        }
+        catch (err) {
+            const e = normalizeError(err);
+            setError(toUserMessage(e.code, undefined, {
+                fallback: "Could not reach the cache endpoint.",
+            }));
+        }
+        finally {
+            setSavingTtlId(null);
+        }
+    }
+    const row = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0.5rem 0",
+        borderBottom: "1px solid var(--appkit-color-border-subtle)",
+        gap: "0.75rem",
+    };
+    return (_jsxs(Div, { style: {
+            padding: "1rem 1.25rem",
+            border: "1px solid var(--appkit-color-border)",
+            borderRadius: 8,
+            background: "var(--appkit-color-surface)",
+            marginBottom: "1.5rem",
+        }, children: [_jsxs(Div, { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600 }, children: "Repository read cache" }), canClear ? (_jsx(Button, { action: ACTIONS.ADMIN["clear-repository-cache"], variant: "ghost", size: "sm", isLoading: clearingId === "all", disabled: clearingId !== null, onClick: () => clear("all"), children: "Clear all" })) : null] }), _jsx(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)", margin: "0.35rem 0 0.9rem" }, children: "In-memory reads of Firestore documents \u2014 a different layer from the page cache above. Clearing one forces its next read to go to Firestore instead of this process\u2019s memory." }), error ? (_jsx(Text, { as: "p", role: "alert", style: { color: "var(--appkit-color-error)", marginBottom: "0.75rem" }, children: error })) : null, loading ? (_jsxs(Div, { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [_jsx(Skeleton, { height: "1.5rem" }), _jsx(Skeleton, { height: "1.5rem" }), _jsx(Skeleton, { height: "1.5rem" })] })) : status ? (_jsxs(_Fragment, { children: [_jsx(Div, { style: row, children: _jsx(Span, { weight: "semibold", style: { fontSize: "0.8rem", color: "var(--appkit-color-text-muted)" }, children: "Named caches" }) }), status.named.map((n) => (_jsxs(Div, { style: row, children: [_jsxs(Div, { children: [_jsx(Text, { size: "sm", children: n.label }), _jsx(Text, { size: "xs", style: { color: "var(--appkit-color-text-muted)" }, children: n.cached
+                                            ? `cached, age ${formatMs(n.ageMs)}, expires in ${formatMs(n.expiresInMs)}`
+                                            : "not cached" })] }), canClear ? (_jsxs(Div, { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx(Div, { style: { width: "5.5rem" }, children: _jsx(FieldInput, { name: `ttl-${n.id}`, type: "number", label: "TTL (min)", value: ttlDrafts[n.id] ?? "", onChange: (next) => setTtlDrafts((prev) => ({ ...prev, [n.id]: next })) }) }), _jsx(Button, { variant: "outline", size: "sm", isLoading: savingTtlId === n.id, disabled: savingTtlId !== null, onClick: () => saveTtl(n.id), children: "Save" }), _jsx(Button, { action: ACTIONS.ADMIN["clear-repository-cache"], variant: "ghost", size: "sm", isLoading: clearingId === n.id, disabled: clearingId !== null || !n.cached, onClick: () => clear("named", n.id) })] })) : null] }, n.id))), _jsx(Div, { style: { ...row, marginTop: "0.5rem" }, children: _jsx(Span, { weight: "semibold", style: { fontSize: "0.8rem", color: "var(--appkit-color-text-muted)" }, children: "Keyed caches (per-id/per-slug)" }) }), status.keyed.map((k) => (_jsxs(Div, { style: row, children: [_jsxs(Div, { children: [_jsx(Text, { size: "sm", children: k.label }), _jsxs(Text, { size: "xs", style: { color: "var(--appkit-color-text-muted)" }, children: [k.entryCount, " entr", k.entryCount === 1 ? "y" : "ies", " cached"] })] }), canClear ? (_jsxs(Button, { action: ACTIONS.ADMIN["clear-repository-cache"], variant: "ghost", size: "sm", isLoading: clearingId === k.id, disabled: clearingId !== null || k.entryCount === 0, onClick: () => clear("keyed", k.id), children: ["Clear all ", k.label] })) : null] }, k.id)))] })) : null] }));
+}

package/dist/_internal/client/features/maintenance/views/ServerErrorDetailView.d.ts

@@ -1,8 +1,11 @@
 import * as React from "react";
 import type { ServerErrorDocument } from "../../../../../features/server-errors/schemas/firestore";
+import type { DashboardCard } from "../../../../shared/features/dashboard/recent-entry";
 export interface ServerErrorDetailViewProps {
     doc: ServerErrorDocument;
     related: ServerErrorDocument[];
     backHref: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function ServerErrorDetailView({ doc, related, backHref, }: ServerErrorDetailViewProps): React.JSX.Element;
+export declare function ServerErrorDetailView({ doc, related, backHref, pageRegionCards, }: ServerErrorDetailViewProps): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/ServerErrorDetailView.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Anchor, Div, Heading, Li, Pre, Section, Text, Ul } from "@mohasinac/appkit/client";
+import { AdminComposableRegion } from "../../../../../features/dashboard/components/AdminComposableRegion.js";
 function fmt(t) {
     return new Date(t).toISOString().replace("T", " ").slice(0, 19);
 }
-export function ServerErrorDetailView({ doc, related, backHref, }) {
-    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Text, { as: "p", children: _jsx(Anchor, { href: backHref, external: false, children: "\u2190 Back to list" }) }), _jsxs(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: [doc.code, " ", _jsx(Text, { size: "xs", style: { fontSize: "1rem", color: "var(--appkit-color-text-muted)" }, children: doc.source })] }), _jsxs(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)" }, children: [fmt(doc.occurredAt), " \u2014 ", doc.method ?? "—", " ", doc.route] }), _jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Message" }), _jsx(Text, { as: "p", style: { fontFamily: "monospace", whiteSpace: "pre-wrap" }, children: doc.message })] }), _jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Metadata" }), _jsxs("dl", { style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.25rem 1rem", fontSize: "0.85rem" }, children: [_jsx("dt", { children: "request ID" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.requestId }), doc.userId ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "user ID" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.userId })] })) : null, doc.userAgent ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "user agent" }), _jsx("dd", { children: doc.userAgent })] })) : null, doc.bodyDigest ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "body digest" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.bodyDigest })] })) : null] })] }), doc.stack ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Stack" }), _jsx(Pre, { style: { fontFamily: "monospace", fontSize: "0.78rem", background: "var(--appkit-color-text)", color: "var(--appkit-color-border)", padding: "0.75rem", borderRadius: 4, overflowX: "auto" }, children: doc.stack })] })) : null, doc.componentStack ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Component stack" }), _jsx(Pre, { style: { fontFamily: "monospace", fontSize: "0.78rem", background: "var(--appkit-color-text)", color: "var(--appkit-color-border)", padding: "0.75rem", borderRadius: 4, overflowX: "auto" }, children: doc.componentStack })] })) : null, related.length > 0 ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Related client errors (same requestId)" }), _jsx(Ul, { children: related.map((r) => (_jsxs(Li, { style: { fontFamily: "monospace", fontSize: "0.82rem" }, children: [fmt(r.occurredAt), " \u2014 ", r.code, " \u2014 ", r.message.slice(0, 100)] }, r.id))) })] })) : null] }));
+export function ServerErrorDetailView({ doc, related, backHref, pageRegionCards = [], }) {
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Text, { as: "p", children: _jsx(Anchor, { href: backHref, external: false, children: "\u2190 Back to list" }) }), _jsxs(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: [doc.code, " ", _jsx(Text, { size: "xs", style: { fontSize: "1rem", color: "var(--appkit-color-text-muted)" }, children: doc.source })] }), _jsxs(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)" }, children: [fmt(doc.occurredAt), " \u2014 ", doc.method ?? "—", " ", doc.route] }), _jsx(AdminComposableRegion, { pageId: "admin-maintenance-server-errors-id", initialCards: pageRegionCards }), _jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Message" }), _jsx(Text, { as: "p", style: { fontFamily: "monospace", whiteSpace: "pre-wrap" }, children: doc.message })] }), _jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Metadata" }), _jsxs("dl", { style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.25rem 1rem", fontSize: "0.85rem" }, children: [_jsx("dt", { children: "request ID" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.requestId }), doc.userId ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "user ID" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.userId })] })) : null, doc.userAgent ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "user agent" }), _jsx("dd", { children: doc.userAgent })] })) : null, doc.bodyDigest ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "body digest" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.bodyDigest })] })) : null] })] }), doc.stack ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Stack" }), _jsx(Pre, { style: { fontFamily: "monospace", fontSize: "0.78rem", background: "var(--appkit-color-text)", color: "var(--appkit-color-border)", padding: "0.75rem", borderRadius: 4, overflowX: "auto" }, children: doc.stack })] })) : null, doc.componentStack ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Component stack" }), _jsx(Pre, { style: { fontFamily: "monospace", fontSize: "0.78rem", background: "var(--appkit-color-text)", color: "var(--appkit-color-border)", padding: "0.75rem", borderRadius: 4, overflowX: "auto" }, children: doc.componentStack })] })) : null, related.length > 0 ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Related client errors (same requestId)" }), _jsx(Ul, { children: related.map((r) => (_jsxs(Li, { style: { fontFamily: "monospace", fontSize: "0.82rem" }, children: [fmt(r.occurredAt), " \u2014 ", r.code, " \u2014 ", r.message.slice(0, 100)] }, r.id))) })] })) : null] }));
 }

package/dist/_internal/client/features/maintenance/views/ServerErrorsListView.d.ts

@@ -1,10 +1,20 @@
 import * as React from "react";
 import type { ServerErrorDocument, ServerErrorSource } from "../../../../../features/server-errors/schemas/firestore";
+import type { DashboardCard } from "../../../../shared/features/dashboard/recent-entry";
 export interface ServerErrorsListViewProps {
     title: string;
     subtitle?: string;
     source: ServerErrorSource | "all";
     rows: ServerErrorDocument[];
     detailHrefBase: string;
+    /**
+     * Stable, hand-chosen page-region id (Phase 12) — this one view is shared
+     * by four distinct `/admin/maintenance/*-errors` (+ payment-rollbacks)
+     * routes, so every caller computes its own route-template-derived id
+     * rather than this component guessing one.
+     */
+    pageId: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function ServerErrorsListView({ title, subtitle, source, rows, detailHrefBase, }: ServerErrorsListViewProps): React.JSX.Element;
+export declare function ServerErrorsListView({ title, subtitle, source, rows, detailHrefBase, pageId, pageRegionCards, }: ServerErrorsListViewProps): React.JSX.Element;