@desplega.ai/agent-swarm 1.113.0 → 1.115.0

package/src/be/script-credential-broker.ts

@@ -4,8 +4,9 @@ import {
   SwarmConfigCredentialBindingStore,
 } from "@/scripts-runtime/credential-broker";
 import type { EgressSecretEntry } from "@/scripts-runtime/executors/types";
-import { registerVolatileSecret } from "@/utils/secret-scrubber";
+import { registerVolatileSecret, scrubSecrets } from "@/utils/secret-scrubber";
 import { getResolvedConfig, getSwarmConfigs } from "./db";
+import { resolveOAuthBindingToken } from "./oauth-credential-bindings";
 import { listRelationalCredentialBindings } from "./script-connections";
 
 class RelationalCredentialBindingStore extends SwarmConfigCredentialBindingStore {
@@ -18,12 +19,37 @@ class RelationalCredentialBindingStore extends SwarmConfigCredentialBindingStore
   }
 }
 
-export function buildScriptCredentialBindings(input: {
+export async function buildScriptCredentialBindings(input: {
   agentId?: string;
   repoId?: string;
-}): EgressSecretEntry[] {
+}): Promise<EgressSecretEntry[]> {
   const resolvedConfigs = getResolvedConfig(input.agentId, input.repoId);
   const configMap = new Map(resolvedConfigs.map((config) => [config.key, config.value]));
+  const relationalBindings = listRelationalCredentialBindings(input);
+  for (const binding of relationalBindings) {
+    if (binding.authKind !== "oauth") continue;
+    configMap.set(binding.configKey, "");
+    if (!binding.oauthProvider) continue;
+
+    let accessToken: string | undefined;
+    try {
+      accessToken = await resolveOAuthBindingToken(binding.oauthProvider);
+    } catch (err) {
+      // A stale/broken provider must not take down unrelated script runs —
+      // skip just this binding (the "" shadow above keeps the placeholder
+      // unresolved instead of falling through to a same-named config value).
+      const message = err instanceof Error ? err.message : String(err);
+      console.warn(
+        `[script-credential-broker] skipping OAuth binding ${binding.configKey}: token refresh for provider ${binding.oauthProvider} failed: ${scrubSecrets(message)}`,
+      );
+      continue;
+    }
+    if (!accessToken) continue;
+
+    configMap.set(binding.configKey, accessToken);
+    registerVolatileSecret(accessToken, binding.configKey);
+  }
+
   const broker = new CredentialBroker(
     new RelationalCredentialBindingStore((filters) => getSwarmConfigs(filters)),
     (configKey) => configMap.get(configKey) ?? process.env[configKey],

package/src/be/scripts/typecheck.ts

@@ -1,5 +1,5 @@
 import ts from "typescript";
-import { getScriptApiTypes } from "@/be/script-connections";
+import { getScriptApiTypes, getScriptMcpTypes } from "@/be/script-connections";
 
 /**
  * Structured diagnostic record returned to API callers when typecheck fails.
@@ -30,6 +30,17 @@ export const SCRIPT_SDK_TYPES = `
 export type JsonValue = null | boolean | number | string | JsonValue[] | { [key: string]: JsonValue };
 export type ScriptScope = "agent" | "global";
 export type ScriptFsMode = "none" | "workspace-rw";
+export type ScriptApiRawOptions = { raw: true };
+export type ScriptApiDefaultOptions = { raw?: false };
+
+export interface ScriptApiRawResult {
+  ok: boolean;
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  url: string;
+  response: Response;
+}
 
 export interface Redacted<T> {
   readonly __redactedBrand?: T;
@@ -77,7 +88,7 @@ export interface SwarmSdk {
   swarm_get(args?: { includeFull?: boolean }): Promise<unknown>;
   agent_info(args?: Record<string, unknown>): Promise<unknown>;
   metrics_get(args?: Record<string, unknown>): Promise<unknown>;
-  user_resolve(args?: { kind?: string; externalId?: string; email?: string; userId?: string }): Promise<unknown>;
+  user_resolve(args?: { kind?: string; externalId?: string; email?: string; userId?: string; name?: string }): Promise<unknown>;
   db_query(args: { sql: string; params?: unknown[] }): Promise<unknown>;
   // --- config ---
   config_get(args?: { agentId?: string; repoId?: string; key?: string; includeSecrets?: boolean }): Promise<unknown>;
@@ -210,6 +221,7 @@ export interface SwarmSdk {
 
   // --- pages & metrics ---
   page_create(args: Record<string, unknown>): Promise<unknown>;
+  page_delete(args: { pageId?: string; slug?: string }): Promise<unknown>;
   metric_create(args: Record<string, unknown>): Promise<unknown>;
 
   // --- human input ---
@@ -276,6 +288,7 @@ export interface ScriptContext {
   step?: ScriptWorkflowSteps;
   swarm: SwarmSdk & { config: SwarmConfig };
   api: ScriptApiRegistry;
+  mcp: ScriptMcpRegistry;
   stdlib: ScriptStdlib;
   logger: ScriptLogger;
 }
@@ -284,11 +297,14 @@ export interface ScriptContext {
 export type ScriptMain = (args: any, ctx: ScriptContext) => unknown | Promise<unknown>;
 `;
 
-export function scriptSdkTypesWithGeneratedApis(apiTypes = getScriptApiTypes()): string {
-  return `${SCRIPT_SDK_TYPES}\n${apiTypes}\n`;
+export function scriptSdkTypesWithGeneratedApis(
+  apiTypes = getScriptApiTypes(),
+  mcpTypes = getScriptMcpTypes(),
+): string {
+  return `${SCRIPT_SDK_TYPES}\n${apiTypes}\n${mcpTypes}\n`;
 }
 
-export const SCRIPT_STDLIB_TYPES = `
+const STDLIB_MODULE_TYPES = `
 declare module "stdlib" {
   export interface Redacted<T> {
     readonly __redactedBrand?: T;
@@ -306,11 +322,36 @@ declare module "stdlib" {
   export function glob(pattern: string): Promise<string[]>;
   export function table(rows: Array<Record<string, unknown>>): string;
 }
+`;
 
+function stdlibTypesFor(sdkModuleBody: string): string {
+  return `${STDLIB_MODULE_TYPES}
 declare module "swarm-sdk" {
-${SCRIPT_SDK_TYPES.replace(/^/gm, "  ")}
+${sdkModuleBody.replace(/^/gm, "  ")}
 }
 `;
+}
+
+export const SCRIPT_STDLIB_TYPES = stdlibTypesFor(SCRIPT_SDK_TYPES);
+
+/**
+ * Stdlib blob whose ambient `declare module "swarm-sdk"` also carries the
+ * generated per-connection registries (`ScriptApiRegistry` / `ScriptMcpRegistry`
+ * and their `<Slug>Api` / `<Slug>Mcp` interfaces).
+ *
+ * Monaco resolves the bare `import ... from "swarm-sdk"` through this ambient
+ * module — unlike the server typechecker, whose custom resolver maps the
+ * specifier onto the flat SDK virtual file. Without the generated registries
+ * inlined here, the ambient copy of `ScriptContext` references names that do
+ * not exist in that module scope ("Cannot find name 'ScriptApiRegistry'") and
+ * `ctx.api.<slug>` completions break in the editor.
+ */
+export function scriptStdlibTypesWithGeneratedApis(
+  apiTypes = getScriptApiTypes(),
+  mcpTypes = getScriptMcpTypes(),
+): string {
+  return stdlibTypesFor(`${SCRIPT_SDK_TYPES}\n${apiTypes}\n${mcpTypes}`);
+}
 
 /**
  * Minimal ambient declarations for runtime globals the executor (Bun) actually
@@ -799,7 +840,10 @@ export function typecheckScript(
     types: [],
   };
 
-  const sdkTypes = scriptSdkTypesWithGeneratedApis(getScriptApiTypes(context));
+  const sdkTypes = scriptSdkTypesWithGeneratedApis(
+    getScriptApiTypes(context),
+    getScriptMcpTypes(context),
+  );
   const files = new Map<string, string>([
     [USER_FILE, source],
     [SDK_FILE, sdkTypes],

package/src/be/seed-scripts/catalog/catalog-report.inline.ts

@@ -47,6 +47,7 @@ function catalogReportHumanLabel(value: string): string {
 
 function catalogReportFormatMetric(value: unknown): string {
   if (typeof value === "number") return new Intl.NumberFormat("en-US").format(value);
+  if (typeof value === "boolean") return value ? "Yes" : "No";
   return catalogReportAsText(value);
 }
 
@@ -57,6 +58,25 @@ function catalogReportSeverityTone(value?: string): string {
   return "low";
 }
 
+function catalogReportIsScalar(value: unknown): boolean {
+  return value == null || ["string", "number", "boolean"].includes(typeof value);
+}
+
+function catalogReportIsRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function catalogReportValueClass(value: unknown): string {
+  if (typeof value === "number") return "numeric";
+  if (typeof value === "boolean") return value ? "positive" : "muted-value";
+  return "";
+}
+
+function catalogReportClassAttr(value: unknown): string {
+  const className = catalogReportValueClass(value);
+  return className ? ` class="${catalogReportHtmlEscape(className)}"` : "";
+}
+
 function catalogReportRenderSampleValue(value: unknown): string {
   if (Array.isArray(value)) {
     return value
@@ -94,9 +114,116 @@ function catalogReportRenderSamples(samples?: unknown[]): string {
   </div>`;
 }
 
+function catalogReportTableRows(rows: Record<string, unknown>[], limit = 12): string {
+  if (rows.length === 0) return '<p class="empty">No rows.</p>';
+  const columns = Array.from(new Set(rows.flatMap((row) => Object.keys(row).slice(0, 8)))).slice(0, 8);
+  const visible = rows.slice(0, limit);
+  const hiddenCount = Math.max(0, rows.length - visible.length);
+  return `<div class="data-table" role="region" aria-label="Data table">
+    <table>
+      <thead><tr>${columns.map((column) => `<th>${catalogReportHtmlEscape(catalogReportHumanLabel(column))}</th>`).join("")}</tr></thead>
+      <tbody>
+        ${visible
+          .map(
+            (row) =>
+              `<tr>${columns
+                .map((column) => {
+                  const value = row[column];
+                  return `<td${catalogReportClassAttr(value)}>${catalogReportHtmlEscape(
+                    catalogReportRenderSampleValue(value),
+                  )}</td>`;
+                })
+                .join("")}</tr>`,
+          )
+          .join("")}
+      </tbody>
+    </table>
+    ${hiddenCount ? `<p class="table-note">Showing ${visible.length} of ${rows.length} rows. Full payload remains in the appendix.</p>` : ""}
+  </div>`;
+}
+
+function catalogReportRenderDataValue(value: unknown): string {
+  if (catalogReportIsScalar(value)) {
+    return `<strong${catalogReportClassAttr(value)}>${catalogReportHtmlEscape(
+      catalogReportFormatMetric(value),
+    )}</strong>`;
+  }
+  if (Array.isArray(value)) {
+    if (value.every((item) => catalogReportIsRecord(item))) {
+      return catalogReportTableRows(value as Record<string, unknown>[]);
+    }
+    return `<div class="value-list">${value
+      .slice(0, 12)
+      .map((item) => `<span>${catalogReportHtmlEscape(catalogReportRenderSampleValue(item))}</span>`)
+      .join("")}</div>`;
+  }
+  if (catalogReportIsRecord(value)) {
+    const entries = Object.entries(value);
+    const scalarEntries = entries.filter(([, entryValue]) => catalogReportIsScalar(entryValue));
+    const complexEntries = entries.filter(([, entryValue]) => !catalogReportIsScalar(entryValue));
+    return `<div class="data-object">
+      ${
+        scalarEntries.length
+          ? `<div class="object-stats">${scalarEntries
+              .map(
+                ([label, entryValue]) =>
+                  `<div><span>${catalogReportHtmlEscape(catalogReportHumanLabel(label))}</span><strong${catalogReportClassAttr(
+                    entryValue,
+                  )}>${catalogReportHtmlEscape(catalogReportFormatMetric(entryValue))}</strong></div>`,
+              )
+              .join("")}</div>`
+          : ""
+      }
+      ${complexEntries
+        .map(
+          ([label, entryValue]) => `<section class="data-nested">
+            <h4>${catalogReportHtmlEscape(catalogReportHumanLabel(label))}</h4>
+            ${catalogReportRenderDataValue(entryValue)}
+          </section>`,
+        )
+        .join("")}
+    </div>`;
+  }
+  return `<pre>${catalogReportHtmlEscape(JSON.stringify(value, null, 2))}</pre>`;
+}
+
+function catalogReportRenderDataPanels(entries: Array<[string, unknown]>): string {
+  if (entries.length === 0) return "";
+  return `<div class="data-panels">
+    ${entries
+      .map(
+        ([label, value]) => `<section class="data-panel">
+          <div class="data-panel-head">
+            <h3>${catalogReportHtmlEscape(catalogReportHumanLabel(label))}</h3>
+            <span>${catalogReportHtmlEscape(
+              Array.isArray(value)
+                ? `${value.length} rows`
+                : catalogReportIsRecord(value)
+                  ? `${Object.keys(value).length} fields`
+                  : "value",
+            )}</span>
+          </div>
+          ${catalogReportRenderDataValue(value)}
+        </section>`,
+      )
+      .join("")}
+  </div>`;
+}
+
 export function renderCatalogReportPage(report: CatalogReport): string {
+  const nav = report.sections
+    .map(
+      (section) =>
+        `<a href="#${catalogReportHtmlEscape(section.key)}"><span>${catalogReportHtmlEscape(
+          section.label || catalogReportHumanLabel(section.key),
+        )}</span><strong>${catalogReportHtmlEscape(catalogReportFormatMetric(section.findingCount ?? section.findings?.length ?? 0))}</strong></a>`,
+    )
+    .join("");
   const sections = report.sections
     .map((section) => {
+      const checkEntries = Object.entries(section.checks || {});
+      const scalarChecks = checkEntries.filter(([, value]) => catalogReportIsScalar(value));
+      const dataChecks = checkEntries.filter(([, value]) => !catalogReportIsScalar(value));
       const findings = (section.findings || [])
         .map(
           (finding) => `<article class="finding ${catalogReportHtmlEscape(catalogReportSeverityTone(finding.severity))}">
@@ -114,25 +241,26 @@ export function renderCatalogReportPage(report: CatalogReport): string {
           </article>`,
         )
         .join("");
-      const checks = Object.entries(section.checks || {})
+      const checks = scalarChecks
         .map(
           ([label, value]) =>
-            `<div class="check"><span>${catalogReportHtmlEscape(catalogReportHumanLabel(label))}</span><strong>${catalogReportHtmlEscape(
-              catalogReportFormatMetric(value),
-            )}</strong></div>`,
+            `<div class="check"><span>${catalogReportHtmlEscape(catalogReportHumanLabel(label))}</span><strong${catalogReportClassAttr(
+              value,
+            )}>${catalogReportHtmlEscape(catalogReportFormatMetric(value))}</strong></div>`,
         )
         .join("");
-      return `<section class="section">
+      return `<section class="section" id="${catalogReportHtmlEscape(section.key)}">
         <div class="section-grid">
           <aside class="checks">
             <p class="section-kicker">${catalogReportHtmlEscape(section.label || catalogReportHumanLabel(section.key))}</p>
-            <div class="check-list">${checks}</div>
+            <div class="check-list">${checks || '<p class="empty">No scalar checks.</p>'}</div>
           </aside>
           <div>
             <div class="section-head">
               <h2>${catalogReportHtmlEscape(section.goal)}</h2>
               <span>${catalogReportHtmlEscape(catalogReportFormatMetric(section.findingCount ?? section.findings?.length ?? 0))} finding(s)</span>
             </div>
+            ${catalogReportRenderDataPanels(dataChecks)}
             <div class="findings">
               ${findings || '<p class="empty">No actionable findings in this cluster.</p>'}
             </div>
@@ -153,10 +281,14 @@ export function renderCatalogReportPage(report: CatalogReport): string {
       color-scheme: light;
       --bg: #f5f2ea;
       --panel: #ffffff;
+      --panel-soft: #fbfaf6;
       --ink: #18181b;
       --muted: #5f6368;
+      --muted-strong: #3f3f46;
       --line: #ded8cb;
+      --line-soft: #ebe5d7;
       --accent: #255c99;
+      --accent-soft: #edf5ff;
       --danger: #b42318;
       --danger-bg: #fff1f0;
       --warn: #b54708;
@@ -178,11 +310,19 @@ export function renderCatalogReportPage(report: CatalogReport): string {
       line-height: 1.55;
     }
     main {
-      width: min(1120px, calc(100% - 32px));
+      width: min(1240px, calc(100% - 32px));
       margin: 0 auto;
       padding: 48px 0 72px;
     }
-    header { margin-bottom: 28px; }
+    header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 24px;
+      align-items: end;
+      margin-bottom: 24px;
+      padding-bottom: 22px;
+      border-bottom: 1px solid var(--line);
+    }
     .eyebrow {
       margin: 0 0 8px;
       color: var(--muted);
@@ -194,34 +334,48 @@ export function renderCatalogReportPage(report: CatalogReport): string {
     h1 {
       margin: 0;
       max-width: 860px;
-      font-size: clamp(2rem, 4vw, 3rem);
+      font-size: clamp(2rem, 3.8vw, 3.25rem);
       line-height: 1.05;
       letter-spacing: 0;
     }
     .lede {
-      max-width: 780px;
+      max-width: 840px;
       margin: 16px 0 0;
-      color: var(--muted);
+      color: var(--muted-strong);
       font-size: 18px;
     }
+    .description {
+      max-width: 340px;
+      margin: 0;
+      color: var(--muted);
+      font-size: 14px;
+      text-align: right;
+    }
     .metrics {
       display: grid;
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+      grid-template-columns: repeat(6, minmax(0, 1fr));
       gap: 12px;
-      margin: 32px 0;
+      margin: 24px 0 16px;
     }
-    .metric, .section, details {
+    .metric, .section, details, .report-nav {
       background: var(--panel);
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
     }
-    .metric { padding: 18px; }
+    .metric {
+      min-height: 112px;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
     .metric strong {
       display: block;
-      font-size: 32px;
+      font-size: 30px;
       line-height: 1;
       font-variant-numeric: tabular-nums;
+      overflow-wrap: anywhere;
     }
     .metric span {
       display: block;
@@ -230,14 +384,45 @@ export function renderCatalogReportPage(report: CatalogReport): string {
       font-size: 13px;
       font-weight: 650;
     }
+    .report-nav {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+      gap: 1px;
+      overflow: hidden;
+      margin: 0 0 20px;
+      background: var(--line);
+    }
+    .report-nav a {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      min-height: 48px;
+      padding: 11px 13px;
+      background: var(--panel);
+      color: var(--muted-strong);
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .report-nav a:hover { background: var(--accent-soft); }
+    .report-nav strong {
+      color: var(--accent);
+      font-variant-numeric: tabular-nums;
+    }
     .section {
-      margin-top: 18px;
-      padding: 24px;
+      margin-top: 16px;
+      padding: 22px;
     }
     .section-grid {
       display: grid;
-      grid-template-columns: 260px minmax(0, 1fr);
-      gap: 28px;
+      grid-template-columns: 240px minmax(0, 1fr);
+      gap: 24px;
+    }
+    .checks {
+      position: sticky;
+      top: 18px;
+      align-self: start;
     }
     .section-kicker {
       margin: 0 0 12px;
@@ -259,6 +444,7 @@ export function renderCatalogReportPage(report: CatalogReport): string {
       padding: 10px 0;
       border-bottom: 1px solid var(--line);
     }
+    .check:last-child { border-bottom: 0; }
     .check span {
       color: var(--muted);
       font-size: 13px;
@@ -266,6 +452,8 @@ export function renderCatalogReportPage(report: CatalogReport): string {
     .check strong {
       font-size: 18px;
       font-variant-numeric: tabular-nums;
+      text-align: right;
+      overflow-wrap: anywhere;
     }
     .section-head {
       display: flex;
@@ -283,11 +471,113 @@ export function renderCatalogReportPage(report: CatalogReport): string {
     }
     .section-head > span {
       flex: 0 0 auto;
-      color: var(--muted);
+      color: var(--accent);
+      background: var(--accent-soft);
+      border: 1px solid #cfe5ff;
+      border-radius: 999px;
+      padding: 5px 10px;
       font-size: 13px;
       font-weight: 700;
       white-space: nowrap;
     }
+    .data-panels {
+      display: grid;
+      gap: 12px;
+      margin: 0 0 16px;
+    }
+    .data-panel {
+      border: 1px solid var(--line-soft);
+      border-radius: var(--radius);
+      background: var(--panel-soft);
+      overflow: hidden;
+    }
+    .data-panel-head {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 12px 14px;
+      border-bottom: 1px solid var(--line-soft);
+      background: #fffdf8;
+    }
+    .data-panel-head h3,
+    .data-nested h4 {
+      margin: 0;
+      color: var(--muted-strong);
+      font-size: 14px;
+      line-height: 1.25;
+      letter-spacing: 0;
+    }
+    .data-panel-head span,
+    .table-note {
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .data-object {
+      display: grid;
+      gap: 12px;
+      padding: 14px;
+    }
+    .object-stats {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+    .object-stats > div {
+      min-height: 76px;
+      padding: 12px;
+      border: 1px solid var(--line-soft);
+      border-radius: var(--radius);
+      background: var(--panel);
+    }
+    .object-stats span,
+    .value-list span {
+      display: block;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .object-stats strong {
+      display: block;
+      margin-top: 6px;
+      color: var(--ink);
+      font-size: 20px;
+      line-height: 1.1;
+      font-variant-numeric: tabular-nums;
+      overflow-wrap: anywhere;
+    }
+    .data-nested {
+      display: grid;
+      gap: 8px;
+    }
+    .data-table {
+      overflow-x: auto;
+      background: var(--panel);
+    }
+    .data-table .table-note {
+      margin: 0;
+      padding: 10px 12px;
+      border-top: 1px solid var(--line-soft);
+      background: var(--panel-soft);
+    }
+    .value-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 14px;
+    }
+    .value-list span {
+      padding: 6px 9px;
+      border: 1px solid var(--line-soft);
+      border-radius: 999px;
+      background: var(--panel);
+      color: var(--muted-strong);
+      overflow-wrap: anywhere;
+    }
+    .numeric { font-variant-numeric: tabular-nums; }
+    .positive { color: var(--low); }
+    .muted-value { color: var(--muted); }
     .findings {
       display: grid;
       gap: 12px;
@@ -396,26 +686,36 @@ export function renderCatalogReportPage(report: CatalogReport): string {
     }
     @media (max-width: 860px) {
       main { width: min(100% - 24px, 1120px); padding-top: 32px; }
+      header { grid-template-columns: 1fr; }
+      .description { max-width: none; text-align: left; }
       .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .report-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .section-grid { grid-template-columns: 1fr; gap: 18px; }
+      .checks { position: static; }
       .section { padding: 18px; }
       .section-head { display: block; }
       .section-head > span { display: block; margin-top: 8px; }
+      .object-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     }
     @media (max-width: 520px) {
       .metrics { grid-template-columns: 1fr; }
+      .report-nav { grid-template-columns: 1fr; }
       .lede { font-size: 16px; }
       .finding-head { display: block; }
       .pill { margin-top: 10px; }
+      .object-stats { grid-template-columns: 1fr; }
     }
   </style>
 </head>
 <body>
   <main>
     <header>
-      <p class="eyebrow">Generated ${catalogReportHtmlEscape(report.generatedAt)}</p>
-      <h1>${catalogReportHtmlEscape(report.title)}</h1>
-      <p class="lede">${catalogReportHtmlEscape(report.lede)}</p>
+      <div>
+        <p class="eyebrow">Generated ${catalogReportHtmlEscape(report.generatedAt)}</p>
+        <h1>${catalogReportHtmlEscape(report.title)}</h1>
+        <p class="lede">${catalogReportHtmlEscape(report.lede)}</p>
+      </div>
+      <p class="description">${catalogReportHtmlEscape(report.description)}</p>
     </header>
     <section class="metrics" aria-label="Audit summary">
       ${report.metrics
@@ -427,6 +727,7 @@ export function renderCatalogReportPage(report: CatalogReport): string {
         )
         .join("")}
     </section>
+    <nav class="report-nav" aria-label="Report sections">${nav}</nav>
     ${sections}
     <details>
       <summary>Compressed JSON appendix</summary>