@ultimat3/admin 22.14.0 → 23.0.0

package/src/describe.ts

@@ -0,0 +1,131 @@
+// One admin, as plain data: its resources with the filters, sorts and scopes each list answers,
+// whether a row scope narrows it, how its detail and form are arranged, the related lists and the
+// actions it offers — and its routes with the permissions that gate them.
+// JSON-safe and deterministic — what `x manifest` records, read off `AdminApp.describe()` by a
+// tier that may not import this package.
+
+import type { AdminRoute } from './admin';
+import { batchPlan } from './batch';
+import type { AdminAction } from './registry';
+import type { AdminResource } from './resource';
+import type { AdminSection } from './resource-layout';
+
+export interface AdminScopeDescription {
+  readonly name: string;
+  readonly default: boolean;
+  /** The tab reads a count — one extra query per list page. */
+  readonly count: boolean;
+}
+
+/** One titled group of a detail page or a form. `null`: the untitled default group. */
+export interface AdminSectionDescription {
+  readonly title: string | null;
+  readonly fields: readonly string[];
+}
+
+/** One action as an agent, the batch bar and a reviewer need to know it. */
+export interface AdminActionDescription {
+  readonly name: string;
+  readonly permission: string;
+  readonly destructive: boolean;
+  /** It declares an input schema: its button is a form. */
+  readonly input: boolean;
+  /** It declares `when`: it applies to some rows only. */
+  readonly when: boolean;
+  /** It is in the batch bar and its MCP tool takes `ids`. */
+  readonly batch: boolean;
+  /** Rows a batch runs inline before it is queued as `admin.batch` jobs. `null`: always inline. */
+  readonly threshold: number | null;
+}
+
+export interface AdminResourceDescription {
+  readonly entity: string;
+  /** Mount-relative: `/posts`. */
+  readonly path: string;
+  /** The fields a list URL's `f.<field>` and the MCP list tool's `where` may name. */
+  readonly filters: readonly string[];
+  /** The fields `?sort=` may name. */
+  readonly sorts: readonly string[];
+  readonly scopes: readonly AdminScopeDescription[];
+  /** `rows` is declared: every read of the resource is narrowed per actor. */
+  readonly rowScoped: boolean;
+  readonly sections: readonly AdminSectionDescription[];
+  readonly formGroups: readonly AdminSectionDescription[];
+  /** The `hasMany` relations drawn on the detail page, by name. */
+  readonly related: readonly string[];
+  /** Declaration order — the order the buttons are drawn in. */
+  readonly actions: readonly AdminActionDescription[];
+}
+
+export interface AdminRouteDescription {
+  readonly url: string;
+  readonly view: string;
+  /** The resource a generated screen belongs to; `null` for the dashboard, a page, a system screen. */
+  readonly entity: string | null;
+  readonly permissions: readonly string[];
+}
+
+export interface AdminDescription {
+  readonly basePath: string;
+  /** Which audit log the admin writes: `memory` forgets at a restart, `postgres` is the record. */
+  readonly audit: string;
+  readonly resources: readonly AdminResourceDescription[];
+  readonly routes: readonly AdminRouteDescription[];
+}
+
+const byCodeUnit = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0);
+
+const sectionOf = (section: AdminSection): AdminSectionDescription => ({
+  title: section.titleKey,
+  fields: section.fields.map((field) => field.name),
+});
+
+const actionOf = (action: AdminAction): AdminActionDescription => ({
+  name: action.name,
+  permission: action.permission,
+  destructive: action.destructive === true,
+  input: action.input !== undefined,
+  when: action.when !== undefined,
+  batch: action.batch !== undefined,
+  threshold: batchPlan(action)?.threshold ?? null,
+});
+
+/** Sorted by name and by URL, so two boots of one app describe it in the same bytes. */
+export function describeAdmin(
+  basePath: string,
+  resources: readonly AdminResource[],
+  routes: readonly AdminRoute[],
+  audit: string,
+): AdminDescription {
+  return {
+    basePath,
+    audit,
+    resources: resources
+      .map((resource) => ({
+        entity: resource.name,
+        path: resource.path,
+        // Declaration order for both: it is the order the filter bar and the tabs are drawn in.
+        filters: resource.filters.map((field) => field.name),
+        sorts: resource.fields.filter((field) => field.sortable).map((field) => field.name),
+        scopes: resource.scopes.map((scope) => ({
+          name: scope.name,
+          default: scope.default,
+          count: scope.count,
+        })),
+        rowScoped: resource.rowScope !== undefined,
+        sections: resource.sections.map(sectionOf),
+        formGroups: resource.formGroups.map(sectionOf),
+        related: [...resource.related],
+        actions: resource.actions.map(actionOf),
+      }))
+      .sort((a, b) => byCodeUnit(a.entity, b.entity)),
+    routes: routes
+      .map((route) => ({
+        url: route.path,
+        view: route.view,
+        entity: route.entity,
+        permissions: [...route.permissions],
+      }))
+      .sort((a, b) => byCodeUnit(a.url, b.url)),
+  };
+}

package/src/detail.tsx

@@ -1,16 +1,21 @@
-// The detail view: every field as a labelled read-only row, the audit trail for this row,
-// and the actions this actor may run on it. Loading and error states are first-class, not an
-// afterthought — a detail page with no row is a state, not a blank card.
+// The detail view: the row's fields in their sections, the related resources' own lists filtered
+// to this row, the row's history, and the actions this actor may run on it — each a link or a
+// native form, so the screen ships no script. A detail page with no row is a state, not a card.
 
 import { t } from '@ultimat3/i18n';
-import { Card, ErrorState } from '@ultimat3/ui';
+import { Button, Card, DataTable, ErrorState, Link } from '@ultimat3/ui';
 import type { JSX } from 'solid-js';
-import type { AdminActionButton } from './action-gate';
-import { AdminActions } from './actions';
-import type { AuditEntry } from './audit';
+import { AdminActions, ConfirmationField, DELETE_OPERATION, OPERATION_FIELD } from './actions';
+import styles from './admin.module.scss';
+import type { AuditCursor, AuditEntry } from './audit';
 import type { AdminActor, AdminAuthz } from './authz';
 import { type AdminErrorParts, adminErrorFrom } from './errors';
+import { valueText } from './json-text';
+import { resourceColumns } from './list-columns';
+import { confirmationToken } from './permissions';
 import type { AdminRow } from './registry';
+import { rowId } from './registry';
+import type { AdminRelatedList } from './related';
 import type { AdminResource } from './resource';
 import type { WidgetContext } from './widget-value';
 import { Widget } from './widgets';
@@ -18,19 +23,24 @@ import { Widget } from './widgets';
 export interface AdminDetailProps<Row extends AdminRow> {
   readonly resource: AdminResource<Row>;
   readonly row: Row | null;
-  readonly loading: boolean;
   readonly error: AdminErrorParts | null;
   readonly ctx: WidgetContext;
   readonly actor: AdminActor;
   readonly authz: AdminAuthz;
+  /** This row's history, newest first: one keyset page of what changed it or was refused. */
   readonly audit: readonly AuditEntry[];
+  /** The URL of the next, older page of the history, or `null` when this page is the last. */
+  readonly olderHref?: string | null;
+  /** Each declared related resource's own list, filtered to this row. */
+  readonly related?: readonly AdminRelatedList[];
+  /** The URL of a related resource's list, filtered to this row — "everything", one link away. */
+  readonly relatedHref?: (list: AdminRelatedList) => string;
   readonly basePath: string;
-  readonly pending?: AdminActionButton | null;
-  readonly confirmation?: string;
-  readonly onRun?: (button: AdminActionButton, confirmation: string) => void;
-  readonly onRequestConfirm?: (button: AdminActionButton) => void;
-  readonly onConfirmationInput?: (value: string) => void;
-  readonly onCancel?: () => void;
+  /**
+   * What the gate already decided about THIS row, so the view renders a control only for an
+   * operation the POST behind it would allow. Absent reads as "not allowed".
+   */
+  readonly may?: { readonly update: boolean; readonly delete: boolean };
 }
 
 /**
@@ -49,13 +59,6 @@ export function AdminDetail<Row extends AdminRow>(props: AdminDetailProps<Row>):
   if (props.error !== null) {
     return <ErrorState error={adminErrorFrom(props.error)} />;
   }
-  if (props.loading) {
-    return (
-      <Card header={<h2>{t(props.resource.titleKey)}</h2>}>
-        <p aria-busy="true">{t('admin.detail.loading')}</p>
-      </Card>
-    );
-  }
   if (props.row === null) {
     return (
       <ErrorState
@@ -73,6 +76,7 @@ export function AdminDetail<Row extends AdminRow>(props: AdminDetailProps<Row>):
 
   const row = props.row;
   const id = String(row[props.resource.idField] ?? '');
+  const href = `${props.basePath}${props.resource.path}/${id}`;
 
   return (
     <>
@@ -81,31 +85,76 @@ export function AdminDetail<Row extends AdminRow>(props: AdminDetailProps<Row>):
           actions={props.resource.actions}
           actor={props.actor}
           authz={props.authz}
-          subject={{ entity: props.resource.name, id }}
-          pending={props.pending ?? null}
-          confirmation={props.confirmation ?? ''}
-          onRun={props.onRun}
-          onRequestConfirm={props.onRequestConfirm}
-          onConfirmationInput={props.onConfirmationInput}
-          onCancel={props.onCancel}
+          subject={{ entity: props.resource.name, id, row }}
+          sealed={props.resource.secretFields.map((field) => field.name)}
+          href={href}
         />
 
-        <dl class="x-admin-detail">
-          {props.resource.fields
-            .filter((field) => !field.sensitive)
-            .map((field) => (
-              <>
-                <dt>{t(field.labelKey)}</dt>
-                <dd>
-                  <Widget field={field} value={row[field.name]} ctx={props.ctx} mode="read" />
-                </dd>
-              </>
-            ))}
-        </dl>
+        {props.resource.sections.map((section) => (
+          <section class={styles['section']}>
+            {section.titleKey === null ? null : <h3>{t(section.titleKey)}</h3>}
+            <dl class={styles['fields']}>
+              {section.fields.map((field) => (
+                <>
+                  <dt>{t(field.labelKey)}</dt>
+                  <dd>
+                    <Widget field={field} value={row[field.name]} ctx={props.ctx} mode="read" />
+                  </dd>
+                </>
+              ))}
+            </dl>
+          </section>
+        ))}
 
-        <a href={`${props.basePath}${props.resource.path}/${id}/edit`}>{t('admin.detail.edit')}</a>
+        <div class={styles['actions']}>
+          {props.may?.update === true ? (
+            <Link appearance="button" variant="secondary" tone="neutral" href={`${href}/edit`}>
+              {t('admin.detail.edit')}
+            </Link>
+          ) : null}
+          {props.may?.delete === true ? (
+            // Destructive, so it re-confirms: the token is on screen to be copied, and typing it
+            // is the deliberate act. A native POST — the row's own URL is the subject.
+            <form class={styles['actionForm']} method="post" action={href}>
+              <input type="hidden" name={OPERATION_FIELD} value={DELETE_OPERATION} />
+              <ConfirmationField token={confirmationToken(props.resource.name, id)} />
+              <Button type="submit" size="sm" variant="secondary" tone="danger">
+                {t('admin.detail.delete')}
+              </Button>
+            </form>
+          ) : null}
+        </div>
       </Card>
 
+      {(props.related ?? []).map((list) => {
+        const target = list.related.resource;
+        const base = `${props.basePath}${target.path}`;
+        return (
+          <Card header={<h2>{t(target.titleKey)}</h2>}>
+            {list.page.rows.length === 0 ? (
+              <p class="x-admin-empty">{t('admin.list.empty')}</p>
+            ) : (
+              <DataTable
+                caption={t(target.titleKey)}
+                // The related resource's OWN columns, minus the key every row here shares.
+                columns={resourceColumns({
+                  resource: target,
+                  ctx: props.ctx,
+                  hrefOf: (rowKey) => `${base}/${rowKey}`,
+                  omit: list.related.field,
+                })}
+                rows={list.page.rows}
+                rowKey={(one) => rowId(one, target.idField)}
+                hrefFor={() => props.relatedHref?.(list) ?? base}
+              />
+            )}
+            {list.page.hasMore && props.relatedHref !== undefined ? (
+              <Link href={props.relatedHref(list)}>{t('admin.related.all')}</Link>
+            ) : null}
+          </Card>
+        );
+      })}
+
       <Card header={<h2>{t('admin.audit.title')}</h2>}>
         {props.audit.length === 0 ? (
           <p class="x-admin-empty">{t('admin.audit.empty')}</p>
@@ -121,8 +170,8 @@ export function AdminDetail<Row extends AdminRow>(props: AdminDetailProps<Row>):
                 <ul>
                   {entry.diff.map((change) => (
                     <li>
-                      <code>{change.field}</code>: <del>{String(change.before ?? '')}</del>{' '}
-                      <ins>{String(change.after ?? '')}</ins>
+                      <code>{change.field}</code>: <del>{valueText(change.before)}</del>{' '}
+                      <ins>{valueText(change.after)}</ins>
                     </li>
                   ))}
                 </ul>
@@ -130,7 +179,30 @@ export function AdminDetail<Row extends AdminRow>(props: AdminDetailProps<Row>):
             ))}
           </ol>
         )}
+        {props.olderHref === null || props.olderHref === undefined ? null : (
+          <Link href={props.olderHref}>{t('admin.audit.older')}</Link>
+        )}
       </Card>
     </>
   );
 }
+
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/** The query parameter an older page of a row's history is asked for by: `?history=<at>~<id>`. */
+export const HISTORY_PARAM = 'history';
+
+/** The cursor as one parameter value — an ISO instant holds no `~`, a uuid neither. */
+export const historyCursorText = (cursor: AuditCursor): string => `${cursor.at}~${cursor.id}`;
+
+/** A posted-back cursor, or `undefined` for anything that is not one: page one, never an error. */
+export function historyCursorOf(raw: string | null): AuditCursor | undefined {
+  if (raw === null) return undefined;
+  const at = raw.indexOf('~');
+  if (at <= 0) return undefined;
+  const instant = raw.slice(0, at);
+  const id = raw.slice(at + 1);
+  // A uuid, because the durable log compares it as one: anything else would be a cast error from
+  // the database where a hand-edited URL deserves page one.
+  return Number.isNaN(Date.parse(instant)) || !UUID.test(id) ? undefined : { at: instant, id };
+}

package/src/dev/data.ts

@@ -164,6 +164,12 @@ export function defaultDevSources(opts: DevSourceOptions = {}): DevSources {
         // `revalidateTags`, already flattened to keys — never `revalidate.tags`, a shape the
         // descriptor does not have and which answered `[]` for every ISR route in the app.
         revalidateTags: route.revalidateTags,
+        // Present only on a route a package mounted. Copied, never aliased: the fact is a panel
+        // payload, and the registry's own list must not be reachable through it.
+        mount:
+          route.mount === undefined
+            ? null
+            : { by: route.mount.by, permissions: [...route.mount.permissions] },
       }));
     },
 
@@ -211,24 +217,27 @@ export function defaultDevSources(opts: DevSourceOptions = {}): DevSources {
         // field on a descriptor that never carried it, so every job on the panel reported
         // non-idempotent — the opposite of what `job()` refuses to register without.
         idempotent: job.idempotent,
+        concurrency: job.concurrency,
+        onSettled: job.onSettled,
       }));
     },
 
     async queues(): Promise<readonly QueueFact[]> {
-      const { inspectJobList, inspectQueues, jobDriver } = await import('@ultimat3/jobs');
+      const { inspectQueues, jobDriver } = await import('@ultimat3/jobs');
       const driver = jobDriver();
       if (driver === undefined) throw unavailable('queues', 'jobs');
       const report = await inspectQueues(driver);
-      // `stats()` counts states, and a failed job is one of them only until it is retried or
-      // dead-lettered; the honest count comes from the job list, which needs introspection.
-      const failed =
-        driver.introspect === undefined ? [] : await inspectJobList(driver, { state: 'failed' });
+      // A driver with no introspection has nothing to pause a queue with.
+      const paused = new Set((await driver.introspect?.pausedQueues())?.map((entry) => entry.name));
       return report.queues.map((queue) => ({
         name: queue.queue,
         depth: queue.ready + queue.delayed,
         running: queue.running,
-        failed: failed.filter((record) => record.queue === queue.queue).length,
+        // `stats()` has its own `failed` bucket: it was counted off the job LIST, one page of it,
+        // so a queue with more failed rows than a page holds reported the page size.
+        failed: queue.failed,
         deadLetter: queue.dead,
+        paused: paused.has(queue.queue),
       }));
     },
 
@@ -248,6 +257,15 @@ export function defaultDevSources(opts: DevSourceOptions = {}): DevSources {
           queue: trace.queue,
           status: RUN_STATUS[trace.state],
           attempt: trace.attempt,
+          concurrencyKey: trace.concurrencyKey,
+          progress:
+            trace.progress === null
+              ? null
+              : {
+                  done: trace.progress.done,
+                  total: trace.progress.total,
+                  note: trace.progress.note ?? null,
+                },
           steps: trace.steps.map((step) => ({
             name: step.name,
             status: STEP_STATUS[step.status],

package/src/dev/facts.ts

@@ -22,6 +22,12 @@ export interface RouteFact {
   readonly handler: string;
   readonly budget: { readonly js?: string; readonly lcp?: number };
   readonly revalidateTags: readonly string[];
+  /**
+   * `RouteDescriptor.mount` — who mounted a route no surface file declares (`defineAdmin`), and
+   * every permission that gates it. `null` for a file route: nobody mounted it, and `handler` is
+   * then a path an editor can open rather than a package name.
+   */
+  readonly mount: { readonly by: string; readonly permissions: readonly string[] } | null;
 }
 
 /**
@@ -104,6 +110,17 @@ export interface JobDefFact {
    * the app unsafe to retry.
    */
   readonly idempotent: boolean;
+  /**
+   * `JobDescriptor.concurrency` — the declared fleet-wide cap, `null` for none. `keyed` says the
+   * limit holds per `concurrency.key(input)`; the key itself is a RUN's fact (`JobRunFact`).
+   */
+  readonly concurrency: {
+    readonly limit: number;
+    readonly keyed: boolean;
+    readonly whenBusy: 'wait' | 'fail' | null;
+  } | null;
+  /** Whether the job declares an `onSettled` hook — what is told how each run ended. */
+  readonly onSettled: boolean;
 }
 
 export interface QueueFact {
@@ -112,6 +129,8 @@ export interface QueueFact {
   readonly running: number;
   readonly failed: number;
   readonly deadLetter: number;
+  /** A paused queue is claimed by no worker; its depth is work waiting on an operator. */
+  readonly paused: boolean;
 }
 
 export interface JobStepFact {
@@ -128,6 +147,14 @@ export interface JobRunFact {
   readonly queue: string;
   readonly status: 'ok' | 'running' | 'failed' | 'dead';
   readonly attempt: number;
+  /** The concurrency key this run counts under — `null` unless its job declares a keyed cap. */
+  readonly concurrencyKey: string | null;
+  /** What the body last reported through `progress()`; `null` until it reports. */
+  readonly progress: {
+    readonly done: number;
+    readonly total: number;
+    readonly note: string | null;
+  } | null;
   readonly steps: readonly JobStepFact[];
 }
 

package/src/dev/panel-db.ts

@@ -8,8 +8,31 @@ import { DevSourceUnavailableError } from '../errors';
 import type { DriftFact, SqlResult, TableFact } from './facts';
 import type { DevPanel } from './panel';
 
+/**
+ * Where the whole schema can be READ, as SQL: the dump `x db gen` writes from the migrations, one
+ * file per table, with the framework's own tables under `framework/`. The table list above it is
+ * what THIS database holds; the dump is what the migrations say every database holds, and the
+ * gate keeps it true (`X_SCHEMA_DUMP_DRIFT`).
+ *
+ * A path and a command, not a URL: `/_x` serves no files, and the panel's job is to say where to
+ * look. The directory is `@ultimat3/cli`'s `SCHEMA_DUMP_DIR` repeated — this package sits below
+ * the CLI and cannot import it — and `packages/cli/src/db-schema-dump.test.ts` holds the two equal.
+ */
+export interface SchemaDumpLink {
+  /** App-root-relative, POSIX. */
+  readonly directory: string;
+  /** The one command that rewrites it. */
+  readonly regenerate: string;
+}
+
+const SCHEMA_DUMP: SchemaDumpLink = Object.freeze({
+  directory: 'packages/db/schema',
+  regenerate: 'x db gen',
+});
+
 export interface DbPanelData {
   readonly tables: readonly TableFact[];
+  readonly schemaDump: SchemaDumpLink;
   /**
    * `null` when no host wired the check — NOT `[]`. Drift is the entities against the database,
    * so it needs the connection this process may not have, and an empty list reads as "the schema
@@ -58,7 +81,7 @@ function sanitize(sql: string): string {
 /**
  * Read-only is enforced here, not just in the UI: /_x runs with the developer's own DB
  * credentials, so "the textarea only sends SELECTs" would be the whole safety story.
- * `x db psql --write` is the deliberate way out.
+ * The developer's own client (`psql "$DATABASE_URL"`) is the deliberate way out.
  *
  * ONE implementation of "is this a read", and it is `@ultimat3/mcp`'s. That guard refuses four
  * things this file's own keyword scan never did — a batch of statements, a call into the
@@ -106,11 +129,11 @@ export function assertReadOnly(sql: string): ReadOnlyVerdict {
     if (!isUltimateError(error)) throw error;
     // Two classes arrive through one code, and the panel cannot tell them apart without reading
     // another package's prose — so the way out is phrased to be true for both. It used to assert
-    // `Run it with: x db psql --write`, which is the wrong instruction for a missing quote: that
-    // flag grants writes, it does not close a delimiter.
+    // `Run it with: x db psql --write`, which is the wrong instruction for a missing quote — and
+    // named a command `x db` never had. The way out for a write is the developer's own client.
     return {
       kind: 'refused',
-      refused: `refused: ${error.cause}. Fix the statement, or — if it is meant to write — run it with: x db psql --write`,
+      refused: `refused: ${error.cause}. Fix the statement, or — if it is meant to write — run it in your own client: psql "$DATABASE_URL"`,
     };
   }
 }
@@ -132,7 +155,15 @@ export const dbPanel: DevPanel<DbPanelData> = {
     ]);
     const sql = params.get('sql');
     if (sql === null || sql.trim() === '') {
-      return { tables, drift, sql: null, result: null, refused: null, readOnly: true };
+      return {
+        tables,
+        schemaDump: SCHEMA_DUMP,
+        drift,
+        sql: null,
+        result: null,
+        refused: null,
+        readOnly: true,
+      };
     }
 
     // `verdict.sql`, never `sql`: what the guard proved read-only is what runs. `sql` below is
@@ -140,6 +171,7 @@ export const dbPanel: DevPanel<DbPanelData> = {
     const verdict = assertReadOnly(sql);
     return {
       tables,
+      schemaDump: SCHEMA_DUMP,
       drift,
       sql,
       result: verdict.kind === 'runnable' ? await sources.runSql(verdict.sql) : null,

package/src/dev/panel-jobs.ts

@@ -74,4 +74,12 @@ export const jobsPanel: DevPanel<JobsPanelData> = {
       backfillsInFlight: backfills.filter((pass) => pass.status === 'running').length,
     };
   },
+  /**
+   * One jobs UI: the tab draws the admin's own overview component over this process's queue.
+   * Dynamic, so `/_x`'s mount graph loads no view until this tab is opened.
+   */
+  async html(params, tabPath) {
+    const { jobsTabHtml } = await import('../jobs/overview-tab');
+    return jobsTabHtml(tabPath, params);
+  },
 };

package/src/dev/panel-routes.ts

@@ -13,6 +13,11 @@ export interface RoutesPanelData {
   // no member it could ever hold — and it was published from a `RouteFact.hasMeta` that read a
   // key no descriptor has, which made it name EVERY route instead. See `RouteFact` in `facts.ts`.
   readonly overBudget: readonly string[];
+  /**
+   * Routes no surface file declares, counted per mounting call — `{ defineAdmin: 14 }`. Each row's
+   * own `mount` names its permissions; this is the line that says an admin is mounted at all.
+   */
+  readonly mountedBy: Readonly<Record<string, number>>;
 }
 
 const BUDGET_LIMIT_KB = 40;
@@ -35,6 +40,10 @@ export const routesPanel: DevPanel<RoutesPanelData> = {
     const counts = new Map<string, number>();
     for (const route of routes) counts.set(route.render, (counts.get(route.render) ?? 0) + 1);
     const byRenderMode = Object.fromEntries(counts);
+    const mounts = new Map<string, number>();
+    for (const route of routes) {
+      if (route.mount !== null) mounts.set(route.mount.by, (mounts.get(route.mount.by) ?? 0) + 1);
+    }
     return {
       // Code units, never `localeCompare`: with no locale argument it answers from the runtime's
       // ICU default locale and collation version, so the same route table reads in a different
@@ -46,6 +55,7 @@ export const routesPanel: DevPanel<RoutesPanelData> = {
       overBudget: routes
         .filter((route) => kb(route.budget.js) > BUDGET_LIMIT_KB)
         .map((route) => route.path),
+      mountedBy: Object.fromEntries(mounts),
     };
   },
 };

package/src/dev/panel.ts

@@ -16,6 +16,12 @@ export interface DevPanel<Data = unknown> {
    */
   readonly questionKey: string;
   data(sources: DevSources, params: URLSearchParams): Promise<Data>;
+  /**
+   * The tab's body as HTML, when the panel draws one — the jobs tab renders the admin's own
+   * jobs overview. Absent: the tab is its `--json` payload in a `<pre>`. Asked only once `data`
+   * answered, so an unwired source is still the payload's own error with its fix.
+   */
+  html?(params: URLSearchParams, tabPath: string): Promise<string>;
 }
 
 export type PanelPayload =

package/src/dev/server.ts

@@ -170,6 +170,8 @@ function shell(
   panels: readonly DevPanel[],
   active: DevPanel,
   payload: PanelPayload,
+  /** The panel's own drawing, when it has one; the payload follows it, folded. */
+  drawn: string | null,
 ): string {
   const tabs = panels
     .map(
@@ -186,7 +188,11 @@ function shell(
 <body><header><h1>_x</h1><nav>${tabs}</nav>
 <a href="${basePath}/${active.key}?json=1">--json</a></header>
 <main><p class="question">${escapeHtml(t(active.questionKey))}</p>
-<pre>${escapeHtml(JSON.stringify(payload, null, 2))}</pre></main></body></html>`;
+${
+  drawn === null
+    ? `<pre>${escapeHtml(JSON.stringify(payload, null, 2))}</pre>`
+    : `${drawn}<details><summary>--json</summary><pre>${escapeHtml(JSON.stringify(payload, null, 2))}</pre></details>`
+}</main></body></html>`;
 }
 
 /** Build the dashboard. Throws X_DEV_DASHBOARD_IN_PROD before anything else happens. */
@@ -232,12 +238,14 @@ export function devDashboard(opts: DevDashboardOptions = {}): DevDashboard {
         url.searchParams.has('json') ||
         (request.headers.get('accept') ?? '').includes('application/json');
 
-      return wantsJson
-        ? jsonResponse(payload, payload.ok ? 200 : 500)
-        : new Response(shell(await devShellStyle(), basePath, panels, panel, payload), {
-            status: 200,
-            headers: { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' },
-          });
+      if (wantsJson) return jsonResponse(payload, payload.ok ? 200 : 500);
+      const tabPath = `${basePath}/${panel.key}`;
+      const drawn =
+        payload.ok && panel.html !== undefined ? await panel.html(url.searchParams, tabPath) : null;
+      return new Response(shell(await devShellStyle(), basePath, panels, panel, payload, drawn), {
+        status: 200,
+        headers: { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' },
+      });
     },
   };
 }