/* Voyage Fleet — Tenant Detail (sticky header + 8 tabs). Exports: TenantDetail. */ const { useState: useS_t, useMemo: useMemo_t } = React; function HeaderLink({ icon, label, mono }) { return ( e.preventDefault()} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--jrni-color-primary-1)", fontWeight: 500, fontFamily: mono ? "var(--jrni-font-family-mono)" : "var(--jrni-font-family-sans)", whiteSpace: "nowrap" }}> {icon}{label} ); } function MiniKpi({ label, value, tone, sub }) { const c = { neutral: "var(--jrni-color-neutral-1)", success: "var(--jrni-color-semantic-green-1)", warning: "var(--jrni-color-semantic-orange-1)", danger: "var(--jrni-color-semantic-red-1)", info: "var(--jrni-color-semantic-blue-1)" }[tone || "neutral"]; return (
{label}
{value}
{sub ?
{sub}
: null} ); } /* ── timeline ── */ function TimelineItem({ icon, isBot, title, meta, last }) { return (
{!last ? : null} {icon}
{title}
{meta}
); } /* ════ TAB: Overview ════ */ function TabOverview({ t, mods }) { return (
Activity · last 14 days
} isBot title={Bumped @voyage/events to 2.4.0 — PR #214 merged, deploy passing.} meta="GitHub Actions · 2 days ago" /> } title={PR #211 merged — bump @voyage/notifications to 2.2.0.} meta="Marek Singh · 4 days ago" /> } isBot title={Applied migration 2026_04_waitlists to D1.} meta="GitHub Actions · 5 days ago" /> } title="Rotated SENDGRID_API_KEY via Wrangler secrets." meta="Lori Owens · 8 days ago" /> } title="Pages + Workers redeploy (convention bump)." meta="GitHub Actions · 11 days ago" last />
Current composition
{mods.map(m => (
{m.id} {m.current}
))}
); } const mono13 = { fontFamily: "var(--jrni-font-family-mono)", fontSize: 12.5, background: "var(--jrni-color-neutral-6)", padding: "1px 5px", borderRadius: 3 }; /* ════ TAB: Modules ════ */ function TabModules({ t, mods }) { const [expanded, setExpanded] = useS_t(null); return ( {["Module", "Current pin", "Latest", "Drift", ""].map((h, i) => )} {mods.map(m => ( {expanded === m.id ? ( ) : null} ))}
{h}
{m.name} {m.current} {m.latest} {m.drift !== "none" ? : null}
{[`${m.latest} — fast-pass race fix, retry backoff`, `${m.current} → migration 2026_04 introduces D1 column`, "Worker binding QUEUE_DO added"].map((c, i) => (
{c}
))}
{t.customOverlay ? (
Custom overlay detected. This tenant has 2 custom screens + 1 integration beyond its starter template. e.preventDefault()} style={{ color: "var(--jrni-color-primary-1)", fontWeight: 600 }}>View diff →
) : null} ); } const thStyle = { textAlign: "left", padding: "10px 14px", fontSize: 11, fontWeight: 700, color: "var(--jrni-color-text-soft)", textTransform: "uppercase", letterSpacing: 0.04 }; /* ════ TAB: Deployments ════ */ function TabDeployments({ t }) { const deploys = useMemo_t(() => Array.from({ length: 8 }, (_, i) => { const kinds = ["Workers + Pages", "D1 migration", "Workers", "Pages", "All"]; const sha = Math.floor(Math.random() * 1e7).toString(16).slice(0, 7); const status = i === 0 && t.ci === "failing" ? "failing" : i === 1 ? "running" : "passing"; return { sha, kind: kinds[i % kinds.length], status, actor: i % 3 === 0 ? "GitHub Actions" : "Lori Owens", dur: `${(1 + Math.random() * 4).toFixed(1)}m`, when: i === 0 ? "Today 08:51" : `${i + 1}d ago`, msg: ["Rev to v1.4.2", "Bump notifications 2.2.0", "Apply waitlists migration", "Convention redeploy", "Rotate secret"][i % 5] }; }), [t.slug]); const [open, setOpen] = useS_t(0); return ( {["When", "Commit", "Kind", "Status", "Duration", "By", ""].map((h, i) => )} {deploys.map((d, i) => ( setOpen(open === i ? -1 : i)} style={{ borderBottom: "1px solid var(--jrni-color-surface-border)", cursor: "pointer" }}> {open === i ? ( ) : null} ))}
{h}
{d.when} {d.sha}{d.msg} {d.kind} {d.dur}
Smoke checks
12/12 passing
Console errors
{d.status === "failing" ? "3 errors" : "0 errors"}
axe audit
0 violations
} label="View Actions run" />
); } const subLbl = { fontSize: 10.5, fontWeight: 700, color: "var(--jrni-color-text-soft)", textTransform: "uppercase", letterSpacing: 0.04, marginBottom: 4 }; /* ════ TAB: Migrations ════ */ function TabMigrations({ t }) { const applied = Array.from({ length: 6 }, (_, i) => ({ id: `2026_0${5 - Math.floor(i/2)}_${["waitlists","fastpass","reporting_idx","kv_rename","do_binding","r2_assets"][i]}`, when: `${i + 2}d ago`, by: i % 2 ? "GitHub Actions" : "Marek Singh", mod: ["events","queuing","reporting","notifications","queuing","booking"][i], status: "applied" })); const [mf, setMf] = useS_t({ status: "all", time: "all" }); return (
setMf(s => ({ ...s, status: v }))} options={[{ value: "all", label: "All" }, { value: "applied", label: "Applied" }, { value: "pending", label: "Pending" }, { value: "failed", label: "Failed" }, { value: "held", label: "Held" }]} /> {}} options={t.modules.map(m => ({ value: m, label: m }))} /> setMf(s => ({ ...s, time: v }))} options={[{ value: "all", label: "Any time" }, { value: "7", label: "7d" }, { value: "30", label: "30d" }]} />
{t.pendingMigrations > 0 ? (
{t.pendingMigrations} pending migration{t.pendingMigrations > 1 ? "s" : ""}
{Array.from({ length: t.pendingMigrations }, (_, i) => (
2026_05_{["waitlist_v2","queue_state","stripe_evt"][i % 3]} {["deploy pending","migration failed","manual hold"][i % 3]} from @voyage/{t.modules[i % t.modules.length]}
))} ) : null}
Applied ledger
{["Migration", "Applied", "By", "Source module", "Status", ""].map((h, i) => )}{applied.map((m, i) => ( ))}
{h}
{m.id} {m.when} @voyage/{m.mod} Applied
); } /* ════ TAB: Configuration ════ */ function TabConfiguration({ t, mods, archived }) { const bindings = [ { type: "D1", name: `${t.slug}-primary`, status: "provisioned" }, { type: "D1", name: `${t.slug}-reporting`, status: "provisioned" }, { type: "KV", name: `${t.slug}-sessions`, status: "provisioned" }, { type: "R2", name: `${t.slug}-assets`, status: "provisioned" }, { type: "Queue", name: `${t.slug}-notifications`, status: "provisioned" }, { type: "DO", name: `${t.slug}-queue-state`, status: t.drift === "major" ? "pending" : "provisioned" }, ]; const envs = [["SENDGRID_API_KEY", "12 days ago"], ["STRIPE_WEBHOOK_SECRET", "16h ago"], ["JWT_SIGNING_KEY", "3 months ago"], ["OAUTH_CLIENT_SECRET", "1 month ago"]]; return (
Every change writes a PR against {t.repo}. Choose Open PR or Auto-merge & deploy for low-risk edits.
}>Cloudflare bindings {bindings.map((b, i) => ( ))}
{b.type} {b.name} {b.status === "provisioned" ? Provisioned : Pending}
}>Environment variables {envs.map((e, i) => ( ))}
{e[0]} •••••••• rotated {e[1]}
}>Brand tokens
Primary color#5142C7
Logo URLcdn/{t.slug}/logo.svg
TypographyDM Sans (default)
 }>Integration credentials
{[["Google", "success", "2h ago"], ["Salesforce", t.modules.includes("int-salesforce") ? "success" : "neutral", "1d ago"], ["Stripe", t.modules.includes("int-stripe") ? "success" : "neutral", "16h ago"]].map((c, i) => (
{c[0]} {c[1] === "success" ? refreshed {c[2]} · connected : not connected}
))}
}>Custom domains
{[[`${t.slug === "aperture" ? "aperture.com" : t.slug + ".com"}`, "active", "valid"], [`book.${t.slug}.com`, t.modules.includes("booking") ? "active" : "pending", t.modules.includes("booking") ? "valid" : "pending"]].map((d, i) => (
{d[0]} cf-pages-host TLS {d[1] === "active" ? "active" : "pending"} DNS {d[2]}
))}
Config changes file a PR against {t.repo}.
); } /* ════ TAB: Drift ════ */ function TabDrift({ t, mods }) { if (t.drift === "none") return } title="No drift — all components current" body="Every pinned @voyage/* component is at its latest published version. No bumps or migrations pending." />; return (
Components behind
{t.modulesBehind} / {t.moduleCount}
Below latest minor
{t.modulesOutdatedMinor + t.modulesOutdatedMajor}
Pending migrations
{t.pendingMigrations}
Rollout effort
{t.effort}
or open per-component PRs in the Components tab
Per-module drift detail
{mods.filter(m => m.drift !== "none").map((m, i, arr) => (
{m.name} {m.current}{m.latest}
Changelog: capacity rounding fix · waitlist D1 column · retry backoff (2 intervening versions)
))}
); } /* ════ TAB: CI/CD ════ */ function TabCICD({ t }) { const runs = Array.from({ length: 6 }, (_, i) => ({ status: i === 0 && t.ci === "failing" ? "failing" : i === 1 && t.ci === "running" ? "running" : "passing", wf: ["deploy.yml", "ci.yml", "deploy.yml", "migrate.yml", "ci.yml", "deploy.yml"][i], dur: `${(2 + Math.random() * 5).toFixed(1)}m`, when: i === 0 ? "Today 08:51" : `${i}d ago` })); return (
{t.ci === "failing" ? (
Latest run failing — test suite, 3 consecutive failures
Worker deploy step exited 1 — binding QUEUE_DO not found. Request ID req_8fk2a9d.
 ) : null} {["Workflow", "Status", "Duration", "When", ""].map((h, i) => )}{runs.map((r, i) => ( ))}
{h}
.github/workflows/{r.wf} {r.dur} {r.when} } label="Logs" />
); } /* ════ TAB: Activity / Audit ════ */ function TabActivity({ t }) { const rows = window.FLEET.AUDIT.filter(a => a.target === t.slug).slice(0, 10); const shown = rows.length ? rows : window.FLEET.AUDIT.slice(0, 8).map(a => ({ ...a, target: t.slug })); const [af, setAf] = useS_t({ actor: "all", time: "all" }); const filtered = shown.filter(a => af.actor === "all" || (af.actor === "bot" ? a.isBot : !a.isBot)); return (
{}} options={["deploy", "migration", "config-change", "secret-rotation", "rev-tenant", "rollback"].map(a => ({ value: a, label: a }))} /> setAf(s => ({ ...s, actor: v }))} options={[{ value: "all", label: "All" }, { value: "operator", label: "Operators" }, { value: "bot", label: "Automation" }]} /> setAf(s => ({ ...s, time: v }))} options={[{ value: "all", label: "Any time" }, { value: "24", label: "24h" }, { value: "7", label: "7d" }]} />
{["When", "Actor", "Action", "Outcome", "Request ID"].map((h, i) => )}{filtered.map((a, i) => ( ))}
{h}
{a.time} {a.action} {a.outcome === "success" ? Success : Failure} {a.reqId}
); } /* ════ Tenant Detail shell ════ */ function TenantDetail({ params }) { const t = window.FLEET.tenantBySlug(params.slug) || window.FLEET.TENANTS[0]; const mods = useMemo_t(() => window.FLEET.tenantModules(t), [t.slug]); const tab = params.tab || "overview"; const setTab = id => navigate("/tenant", { slug: t.slug, tab: id }); const tabs = [ { id: "overview", label: "Overview" }, { id: "modules", label: "Modules", count: mods.length }, { id: "deployments", label: "Deployments" }, { id: "migrations", label: "Migrations", count: t.pendingMigrations || undefined }, { id: "configuration", label: "Configuration" }, { id: "drift", label: "Drift" }, { id: "cicd", label: "CI/CD" }, { id: "activity", label: "Activity" }, ]; const statusTone = { healthy: "success", drift: "warning", "failed-deploy": "danger", paused: "neutral" }[t.status]; const archived = t.status === "archived"; const booting = useBoot(params); const elasticityLabel = { "region-pinned": "Region-pinned", "cold-standby": "Cold standby", "active-active": "Active-active", "customer-hosted": "Customer-hosted" }[t.elasticity] || "Region-pinned"; return (
{/* sticky header */}

{t.slug}

{t.customOverlay ? Custom overlay : null}
{t.name} {t.env} {t.region} {elasticityLabel} Started from {t.seamName}
} label="Live URL" /> } label={t.repo} mono /> } label="Cloudflare" />
{archived ? : } {archived ? null : } {archived ? null : }
{/* content */}
{archived ? (
This tenant was archived on {t.archivedOn} by {t.archivedBy}. Deployments are paused; data is retained but read-only.
) : null} {booting ? (
{Array.from({ length: 4 }, (_, i) => )}
) : ( {tab === "overview" && } {tab === "modules" && } {tab === "deployments" && } {tab === "migrations" && } {tab === "configuration" && } {tab === "drift" && } {tab === "cicd" && } {tab === "activity" && } )}
); } window.TenantDetail = TenantDetail;