@cosmicdrift/kumiko-bundled-features 0.239.0 → 0.241.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.239.0",
+  "version": "0.241.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -130,12 +130,12 @@
     "./workflow-runner": "./src/workflow-runner/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.239.0",
-    "@cosmicdrift/kumiko-framework": "0.239.0",
-    "@cosmicdrift/kumiko-headless": "0.239.0",
-    "@cosmicdrift/kumiko-renderer": "0.239.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.239.0",
-    "@cosmicdrift/kumiko-types": "0.239.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.241.0",
+    "@cosmicdrift/kumiko-framework": "0.241.0",
+    "@cosmicdrift/kumiko-headless": "0.241.0",
+    "@cosmicdrift/kumiko-renderer": "0.241.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.241.0",
+    "@cosmicdrift/kumiko-types": "0.241.0",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/mailparser": "^3.4.6",
@@ -145,10 +145,10 @@
     "lucide-react": "^1.14.0",
     "mailparser": "^3.9.8",
     "marked": "^18.0.3",
-    "nodemailer": "^9.0.1",
+    "nodemailer": "^9.1.1",
     "qrcode": "^1.5.4",
     "react": "^19.2.6",
-    "sharp": "^0.35.3",
+    "sharp": "^0.35.4",
     "stripe": "^22.1.1",
     "tailwind-merge": "^3.6.0"
   },
@@ -164,7 +164,7 @@
   "devDependencies": {
     "@testing-library/user-event": "^14.6.1",
     "@types/qrcode": "^1.5.5",
-    "@cosmicdrift/kumiko-locale-de": "0.239.0",
-    "@cosmicdrift/kumiko-locale-es": "0.239.0"
+    "@cosmicdrift/kumiko-locale-de": "0.241.0",
+    "@cosmicdrift/kumiko-locale-es": "0.241.0"
   }
 }

package/src/admin-shell/__tests__/admin-shell-security.integration.test.ts

@@ -39,12 +39,10 @@ import {
   ADMIN_SHELL_FEATURE,
   DEFAULT_PLATFORM_WORKSPACE_ID,
   DEFAULT_TENANT_WORKSPACE_ID,
+  TENANT_OVERVIEW_SCREEN_ID,
 } from "../constants";
 import { createAdminShellFeature } from "../feature";
-import {
-  TENANT_OVERVIEW_ALLOWED_QUERIES,
-  TENANT_OVERVIEW_FORBIDDEN_QUERIES,
-} from "../overview-allowlist";
+import { isOverviewQueryAllowed, TENANT_OVERVIEW_FORBIDDEN_QUERIES } from "../overview-allowlist";
 
 let stack: TestStack;
 let TENANT_ID: TenantId;
@@ -175,9 +173,20 @@ describe("SystemAdmin platform queries", () => {
 });
 
 describe("tenant overview query allowlist", () => {
-  test("static allowlist excludes every forbidden platform query", () => {
-    for (const qn of TENANT_OVERVIEW_FORBIDDEN_QUERIES) {
-      expect(TENANT_OVERVIEW_ALLOWED_QUERIES).not.toContain(qn);
+  // The tenant-overview screen dispatches only the queries baked into its
+  // own dashboard panels (no client-side allowlist gate anymore, fw#2312) —
+  // this checks the actual screen definition against the allowlist instead
+  // of the allowlist against itself.
+  test("tenant-overview screen panels stay inside the allowlist and off the forbidden list", () => {
+    const screen = createAdminShellFeature().screens[TENANT_OVERVIEW_SCREEN_ID];
+    if (screen?.type !== "dashboard")
+      throw new Error("expected tenant-overview to be a dashboard screen");
+    for (const panel of screen.panels) {
+      if (panel.kind !== "stat") throw new Error(`expected stat panel, got ${panel.kind}`);
+      expect(isOverviewQueryAllowed("tenant", panel.query)).toBe(true);
+      expect((TENANT_OVERVIEW_FORBIDDEN_QUERIES as readonly string[]).includes(panel.query)).toBe(
+        false,
+      );
     }
   });
 

package/src/admin-shell/__tests__/overview-allowlist.test.ts

@@ -2,6 +2,8 @@ import { describe, expect, test } from "bun:test";
 import { JobQueries } from "../../jobs/constants";
 import { TenantQueries } from "../../tenant/constants";
 import { UserQueries } from "../../user/constants";
+import { PLATFORM_OVERVIEW_SCREEN_ID, TENANT_OVERVIEW_SCREEN_ID } from "../constants";
+import { createAdminShellFeature } from "../feature";
 import {
   isOverviewQueryAllowed,
   PLATFORM_OVERVIEW_ALLOWED_QUERIES,
@@ -9,6 +11,19 @@ import {
   TENANT_OVERVIEW_FORBIDDEN_QUERIES,
 } from "../overview-allowlist";
 
+// Every screen dispatches only the queries baked into its own panel
+// definitions (no client-side allowlist gate anymore, fw#2312) — the
+// allowlist's regression value now lives in this static cross-check instead
+// of a runtime guard.
+function statPanelQueries(screenId: string): readonly string[] {
+  const screen = createAdminShellFeature().screens[screenId];
+  if (screen?.type !== "dashboard") throw new Error(`expected dashboard screen: ${screenId}`);
+  return screen.panels.map((panel) => {
+    if (panel.kind !== "stat") throw new Error(`expected stat panel on ${screenId}: ${panel.kind}`);
+    return panel.query;
+  });
+}
+
 describe("overview query allowlist", () => {
   test("tenant allowlist excludes platform-only queries", () => {
     for (const forbidden of TENANT_OVERVIEW_FORBIDDEN_QUERIES) {
@@ -41,3 +56,18 @@ describe("overview query allowlist", () => {
     expect(isOverviewQueryAllowed("tenant", UserQueries.list)).toBe(false);
   });
 });
+
+describe("overview screen panels vs allowlist (fw#2312 regression)", () => {
+  test("tenant-overview panels use only allowlisted, never forbidden, queries", () => {
+    for (const query of statPanelQueries(TENANT_OVERVIEW_SCREEN_ID)) {
+      expect(isOverviewQueryAllowed("tenant", query)).toBe(true);
+      expect((TENANT_OVERVIEW_FORBIDDEN_QUERIES as readonly string[]).includes(query)).toBe(false);
+    }
+  });
+
+  test("platform-overview panels use only allowlisted queries", () => {
+    for (const query of statPanelQueries(PLATFORM_OVERVIEW_SCREEN_ID)) {
+      expect(isOverviewQueryAllowed("platform", query)).toBe(true);
+    }
+  });
+});

package/src/admin-shell/__tests__/overview-screens.boot.test.ts

@@ -1,35 +1,43 @@
 import { describe, expect, test } from "bun:test";
-import { access, createRegistry } from "@cosmicdrift/kumiko-framework/engine";
-import { createAuditFeature } from "../../audit/feature";
-import { createConfigFeature } from "../../config/feature";
-import { createJobsFeature } from "../../jobs/feature";
-import { createTenantFeature } from "../../tenant/feature";
-import { tierEngineFeature } from "../../tier-engine/feature";
-import { createUserFeature } from "../../user/feature";
+import { access } from "@cosmicdrift/kumiko-framework/engine";
+import { ConfigQueries } from "../../config/constants";
+import { JobQueries } from "../../jobs/constants";
+import { TenantQueries } from "../../tenant/constants";
+import { UserQueries } from "../../user/constants";
 import { PLATFORM_OVERVIEW_SCREEN_ID, TENANT_OVERVIEW_SCREEN_ID } from "../constants";
 import { createAdminShellFeature } from "../feature";
 
-const features = [
-  createConfigFeature(),
-  createUserFeature(),
-  createTenantFeature(),
-  createAuditFeature(),
-  createJobsFeature(),
-  tierEngineFeature,
-  createAdminShellFeature(),
-];
+const adminShell = createAdminShellFeature();
+
+function statPanelQueries(screenId: string): readonly string[] {
+  const screen = adminShell.screens[screenId];
+  if (screen?.type !== "dashboard") throw new Error(`expected dashboard screen: ${screenId}`);
+  return screen.panels.map((panel) => {
+    if (panel.kind !== "stat") throw new Error(`expected stat panel on ${screenId}: ${panel.kind}`);
+    return panel.query;
+  });
+}
 
 describe("overview screens boot", () => {
-  test("tenant-overview screen is access.admin", () => {
-    const registry = createRegistry(features);
-    const screen = registry.getScreen(`admin-shell:screen:${TENANT_OVERVIEW_SCREEN_ID}`);
+  test("tenant-overview screen is access.admin, dashboard with 3 stat panels", () => {
+    const screen = adminShell.screens[TENANT_OVERVIEW_SCREEN_ID];
     expect(screen?.access).toEqual({ roles: access.admin });
-    expect(screen?.type).toBe("custom");
+    expect(screen?.type).toBe("dashboard");
+    expect(statPanelQueries(TENANT_OVERVIEW_SCREEN_ID)).toEqual([
+      TenantQueries.invitations,
+      TenantQueries.members,
+      ConfigQueries.readiness,
+    ]);
   });
 
-  test("platform-overview screen is SystemAdmin-only", () => {
-    const registry = createRegistry(features);
-    const screen = registry.getScreen(`admin-shell:screen:${PLATFORM_OVERVIEW_SCREEN_ID}`);
+  test("platform-overview screen is SystemAdmin-only, dashboard with 3 stat panels", () => {
+    const screen = adminShell.screens[PLATFORM_OVERVIEW_SCREEN_ID];
     expect(screen?.access).toEqual({ roles: access.systemAdmin });
+    expect(screen?.type).toBe("dashboard");
+    expect(statPanelQueries(PLATFORM_OVERVIEW_SCREEN_ID)).toEqual([
+      TenantQueries.list,
+      UserQueries.list,
+      JobQueries.list,
+    ]);
   });
 });

package/src/admin-shell/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.241.0",
+    "type": "fix",
+    "title": "tenant-overview/platform-overview dashboards no longer show \"undefined\" tiles; both converted to declarative dashboard screens (fw#2312).",
+    "detail": "Both overview screens sent `totalCount: true` to `tenant:query:list`/`jobs:query:list`, but neither handler's Zod schema declared the field, so it was stripped before the handler saw it and the tile rendered the literal string \"undefined\". Both handlers now accept `totalCount: boolean` and return `total` when set — `jobs:query:list`'s total is a real count (via `countWhere`), not `rows.length`, so it isn't capped by `limit`. `config:query:readiness` gains `missingCount`/`missingTone` alongside the existing `missing` array. `PlatformOverviewScreen`/`TenantOverviewScreen` (never public exports) and their `overview-layout`/`overview-query` support modules are gone — both screens are now `type: \"dashboard\"` (`kind: \"stat\"` panels) rendered by the generic renderer, using the new `DashboardStatPanel.params` (see framework changelog) to pin the failed-jobs tile's `status: \"failed\"` filter server-side. The `overview-allowlist` exports (`isOverviewQueryAllowed`, `overviewAllowedQueries`, the allow/forbidden-list constants) are unchanged and still importable — they're now checked against the screen definitions in tests instead of gating a deleted client-side dispatch call."
+  },
   {
     "version": "0.125.0",
     "type": "improvement",

package/src/admin-shell/feature.ts

@@ -7,6 +7,10 @@ import {
   defineFeature,
   type FeatureDefinition,
 } from "@cosmicdrift/kumiko-framework/engine";
+import { ConfigQueries } from "../config";
+import { JobQueries } from "../jobs";
+import { TenantQueries } from "../tenant";
+import { UserQueries } from "../user";
 import {
   ADMIN_SHELL_FEATURE,
   DEFAULT_PLATFORM_WORKSPACE_ID,
@@ -71,14 +75,40 @@ export function createAdminShellFeature(options: CreateAdminShellOptions = {}):
       ...(includeTierAdmin ? (["admin-shell:nav:tier-admin"] as const) : []),
     ];
 
-    // kumiko-lint-ignore app-feature-structure Phase-3 conversion tracked in #2312
     r.screen({
       id: TENANT_OVERVIEW_SCREEN_ID,
-      type: "custom",
-      renderer: { react: { __component: "TenantOverviewScreen" } },
+      type: "dashboard",
       access: { roles: access.admin },
       description:
         "Landing page of the tenant-admin workspace, showing pending invitation, member and missing-config counts for the caller's own tenant so an operator sees what needs attention there.",
+      panels: [
+        {
+          kind: "stat",
+          id: "pending-invitations",
+          label: "admin-shell:overview.pendingInvitations",
+          query: TenantQueries.invitations,
+          // tenant:query:invitations returns a bare array, not a paged
+          // envelope — "length" reads record["length"], i.e. the array's
+          // own .length. Not a typo.
+          valueField: "length",
+        },
+        {
+          kind: "stat",
+          id: "members",
+          label: "admin-shell:overview.members",
+          query: TenantQueries.members,
+          // Same array-shaped response as invitations above.
+          valueField: "length",
+        },
+        {
+          kind: "stat",
+          id: "missing-config",
+          label: "admin-shell:overview.missingConfig",
+          query: ConfigQueries.readiness,
+          valueField: "missingCount",
+          toneField: "missingTone",
+        },
+      ],
     });
     r.nav({
       id: "tenant-overview",
@@ -88,14 +118,38 @@ export function createAdminShellFeature(options: CreateAdminShellOptions = {}):
       order: 1,
     });
 
-    // kumiko-lint-ignore app-feature-structure Phase-3 conversion tracked in #2312
     r.screen({
       id: PLATFORM_OVERVIEW_SCREEN_ID,
-      type: "custom",
-      renderer: { react: { __component: "PlatformOverviewScreen" } },
+      type: "dashboard",
       access: { roles: access.systemAdmin },
       description:
         "Landing page of the platform-admin workspace, showing installation-wide tenant, user and failed-job counts so a system admin sees the health of the whole deployment at a glance.",
+      panels: [
+        {
+          kind: "stat",
+          id: "tenants",
+          label: "admin-shell:overview.tenants",
+          query: TenantQueries.list,
+          params: { totalCount: true },
+          valueField: "total",
+        },
+        {
+          kind: "stat",
+          id: "users",
+          label: "admin-shell:overview.users",
+          query: UserQueries.list,
+          params: { totalCount: true },
+          valueField: "total",
+        },
+        {
+          kind: "stat",
+          id: "failed-jobs",
+          label: "admin-shell:overview.failedJobs",
+          query: JobQueries.list,
+          params: { status: "failed", totalCount: true },
+          valueField: "total",
+        },
+      ],
     });
     r.nav({
       id: "platform-overview",

package/src/admin-shell/i18n.ts

@@ -15,9 +15,6 @@ export const ADMIN_SHELL_I18N: Readonly<Record<string, LocalizedString>> = {
   "admin-shell:nav.tierAdmin": { en: "Assign tier" },
   "admin-shell:nav.myCaps": { en: "Plans & Caps" },
   "admin-shell:nav.tenantCaps": { en: "Plans & Caps" },
-  "admin-shell:overview.tenantTitle": { en: "Administration" },
-  "admin-shell:overview.platformTitle": { en: "Platform" },
-  "admin-shell:overview.loading": { en: "Loading…" },
   "admin-shell:overview.pendingInvitations": {
     en: "Pending invitations",
   },
@@ -25,11 +22,7 @@ export const ADMIN_SHELL_I18N: Readonly<Record<string, LocalizedString>> = {
   "admin-shell:overview.missingConfig": {
     en: "Missing configuration",
   },
-  "admin-shell:overview.missingConfigHint": {
-    en: "Check required settings",
-  },
   "admin-shell:overview.tenants": { en: "Tenants" },
   "admin-shell:overview.users": { en: "Users" },
   "admin-shell:overview.failedJobs": { en: "Failed jobs" },
-  "admin-shell:overview.failedJobsHint": { en: "Review job runs" },
 };

package/src/admin-shell/web/client-plugin.tsx

@@ -1,14 +1,8 @@
 // @runtime client
 import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
-import {
-  ADMIN_SHELL_FEATURE,
-  PLATFORM_OVERVIEW_SCREEN_ID,
-  TENANT_OVERVIEW_SCREEN_ID,
-} from "../constants";
+import { ADMIN_SHELL_FEATURE } from "../constants";
 import { defaultTranslations } from "./i18n";
-import { PlatformOverviewScreen } from "./platform-overview-screen";
-import { TenantOverviewScreen } from "./tenant-overview-screen";
 
 export type AdminShellClientOptions = {
   readonly translations?: TranslationsByLocale;
@@ -18,9 +12,5 @@ export function adminShellClient(options?: AdminShellClientOptions): ClientFeatu
   return {
     name: ADMIN_SHELL_FEATURE,
     translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
-    components: {
-      [TENANT_OVERVIEW_SCREEN_ID]: TenantOverviewScreen,
-      [PLATFORM_OVERVIEW_SCREEN_ID]: PlatformOverviewScreen,
-    },
   };
 }

package/src/audit/__tests__/audit-screens.boot.test.ts

@@ -5,6 +5,7 @@ import { createConfigFeature } from "../../config/feature";
 import { createTenantFeature } from "../../tenant/feature";
 import { AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID, AuditQueries } from "../constants";
 import { createAuditFeature } from "../feature";
+import { AUDIT_I18N } from "../i18n";
 
 describe("audit log screen + handler access alignment", () => {
   const features = [createConfigFeature(), createTenantFeature(), createAuditFeature()];
@@ -13,11 +14,13 @@ describe("audit log screen + handler access alignment", () => {
     expect(() => validateBoot(features)).not.toThrow();
   });
 
-  test("audit-log screen is custom, access.admin-gated", () => {
+  test("audit-log screen is declarative, access.admin-gated", () => {
     const audit = createAuditFeature();
     const screen = audit.screens[AUDIT_LOG_SCREEN_ID];
-    if (screen?.type !== "custom") {
-      throw new Error(`expected a custom screen for ${AUDIT_LOG_SCREEN_ID}, got ${screen?.type}`);
+    if (screen?.type !== "projectionList") {
+      throw new Error(
+        `expected a projectionList screen for ${AUDIT_LOG_SCREEN_ID}, got ${screen?.type}`,
+      );
     }
     if (!("access" in screen) || !screen.access || !("roles" in screen.access)) {
       throw new Error(`expected role-gated access on ${AUDIT_LOG_SCREEN_ID}`);
@@ -25,12 +28,12 @@ describe("audit log screen + handler access alignment", () => {
     expect(screen.access.roles).toEqual(access.admin);
   });
 
-  test("audit-log-detail screen is custom, admin-gated, breadcrumb-linked to list", () => {
+  test("audit-log-detail screen is declarative, admin-gated, breadcrumb-linked to list", () => {
     const audit = createAuditFeature();
     const screen = audit.screens[AUDIT_LOG_DETAIL_SCREEN_ID];
-    if (screen?.type !== "custom") {
+    if (screen?.type !== "projectionDetail") {
       throw new Error(
-        `expected a custom screen for ${AUDIT_LOG_DETAIL_SCREEN_ID}, got ${screen?.type}`,
+        `expected a projectionDetail screen for ${AUDIT_LOG_DETAIL_SCREEN_ID}, got ${screen?.type}`,
       );
     }
     if (!("listScreenId" in screen)) {
@@ -43,6 +46,23 @@ describe("audit log screen + handler access alignment", () => {
     expect(screen.access.roles).toEqual(access.admin);
   });
 
+  test("audit-log-detail: aggregate type and aggregate id resolve to distinct labels", () => {
+    const audit = createAuditFeature();
+    const screen = audit.screens[AUDIT_LOG_DETAIL_SCREEN_ID];
+    if (screen?.type !== "projectionDetail") {
+      throw new Error(
+        `expected a projectionDetail screen for ${AUDIT_LOG_DETAIL_SCREEN_ID}, got ${screen?.type}`,
+      );
+    }
+    const aggregateTypeKey = screen.fieldLabels?.["aggregateType"];
+    const aggregateIdKey = screen.fieldLabels?.["aggregateId"];
+    if (aggregateTypeKey === undefined || aggregateIdKey === undefined) {
+      throw new Error("expected fieldLabels for both aggregateType and aggregateId");
+    }
+    expect(aggregateTypeKey).not.toBe(aggregateIdKey);
+    expect(AUDIT_I18N[aggregateTypeKey]?.en).not.toBe(AUDIT_I18N[aggregateIdKey]?.en);
+  });
+
   test("audit queries use access.admin (screen ⊆ handler)", () => {
     const audit = createAuditFeature();
     expect(rolesOf(audit.queryHandlers["list"]?.access)).toEqual([...access.admin]);

package/src/audit/changes.json

@@ -1,4 +1,11 @@
 [
+  {
+    "version": "0.241.0",
+    "type": "breaking",
+    "title": "AuditLogScreen and AuditLogDetailScreen removed; audit-log/audit-log-detail are now declarative screens (fw#2312).",
+    "detail": "`audit-log` and `audit-log-detail` render through the generic renderer (`projectionList`/`projectionDetail`) instead of custom React components — the renderer selects a screen by its `screen.type`, not a client component registry, so `AuditLogScreen`/`AuditLogDetailScreen` were dead exports the moment the screen definitions switched. The `payload`/`metadata` fields now use the `format: \"json\"` field-renderer (see framework changelog) instead of a raw escaped-string dump.",
+    "migration": "Breaking only if you imported these components directly (no shipped consumer app did). Remove `import { AuditLogScreen, AuditLogDetailScreen } from \"@cosmicdrift/kumiko-bundled-features/audit/web\"` and any `components: { AuditLogScreen: ..., AuditLogDetailScreen: ... }` entry in your `auditClient()`/renderer setup — the bundled feature registers its own `audit-log`/`audit-log-detail` screens now, nothing left for an app to wire."
+  },
   {
     "version": "0.127.0",
     "type": "improvement",

package/src/audit/feature.ts

@@ -3,7 +3,7 @@ import {
   defineFeature,
   type FeatureDefinition,
 } from "@cosmicdrift/kumiko-framework/engine";
-import { AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID } from "./constants";
+import { AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID, AuditQueries } from "./constants";
 import { detailsQuery } from "./handlers/details.query";
 import { listQuery } from "./handlers/list.query";
 import { AUDIT_I18N } from "./i18n";
@@ -39,20 +39,70 @@ export function createAuditFeature(): FeatureDefinition {
       details: r.queryHandler(detailsQuery),
     };
 
-    // kumiko-lint-ignore app-feature-structure Phase-3 conversion tracked in #2312
     r.screen({
       id: AUDIT_LOG_SCREEN_ID,
-      type: "custom",
-      renderer: { react: { __component: "AuditLogScreen" } },
+      type: "projectionList",
+      query: AuditQueries.list,
+      columns: [
+        { field: "createdAt", label: "audit.log.col.when", renderer: { format: "timestamp" } },
+        { field: "type", label: "audit.log.col.type" },
+        { field: "createdBy", label: "audit.log.col.actor" },
+      ],
+      searchable: true,
+      defaultSort: { field: "createdAt", dir: "desc" },
+      rowActions: [
+        {
+          kind: "navigate",
+          id: "details",
+          label: "audit.log.details",
+          screen: AUDIT_LOG_DETAIL_SCREEN_ID,
+          entityId: "id",
+          rowClick: true,
+        },
+      ],
+      pagination: "infinite",
       description:
         "Admin table of the tenant's audit-trail events with actor names and event-type/date filters; open it to browse recent changes and drill into a single event.",
       access: { roles: access.admin },
     });
-    // kumiko-lint-ignore app-feature-structure Phase-3 conversion tracked in #2312
     r.screen({
       id: AUDIT_LOG_DETAIL_SCREEN_ID,
-      type: "custom",
-      renderer: { react: { __component: "AuditLogDetailScreen" } },
+      type: "projectionDetail",
+      query: AuditQueries.details,
+      idParam: "id",
+      fieldLabels: {
+        type: "audit.log.col.type",
+        createdAt: "audit.log.col.when",
+        aggregateType: "audit.log.col.aggregateType",
+        aggregateId: "audit.log.col.aggregateId",
+        createdBy: "audit.log.col.actor",
+        id: "audit.log.detail.field.id",
+        payload: "audit.log.detail.payload",
+        metadata: "audit.log.detail.metadata",
+      },
+      layout: {
+        sections: [
+          {
+            fields: [
+              "type",
+              { field: "createdAt", renderer: { format: "timestamp" } },
+              "aggregateType",
+              "aggregateId",
+              "createdBy",
+              "id",
+            ],
+          },
+          // No section `title` here (fw#2312 label-dedup fix): each section
+          // holds exactly one field, so a title would repeat the field's own
+          // label (rendered by RenderField as the Field's heading) verbatim.
+          {
+            fields: [{ field: "payload", renderer: { format: "json" } }],
+          },
+          {
+            fields: [{ field: "metadata", renderer: { format: "json" } }],
+          },
+        ],
+      },
       description:
         "Read-only detail view of one audit event showing actor, timestamp, aggregate and the raw event payload and metadata; reached from a row of the audit log.",
       listScreenId: AUDIT_LOG_SCREEN_ID,

package/src/audit/handlers/list.query.ts

@@ -19,18 +19,60 @@ import { z } from "zod";
 
 const MAX_LIMIT = 100;
 
+function buildDateRange(
+  from: string | undefined,
+  to: string | undefined,
+): { gte?: unknown; lte?: unknown } | null {
+  if (!from && !to) return null;
+  const range: { gte?: unknown; lte?: unknown } = {};
+  if (from) range.gte = Temporal.Instant.from(from);
+  if (to) range.lte = Temporal.Instant.from(to);
+  return range;
+}
+
+function buildAuditWhere(
+  tenantId: string,
+  p: {
+    aggregateType?: string;
+    aggregateId?: string;
+    eventType?: string;
+    search?: string;
+    userId?: string;
+    from?: string;
+    to?: string;
+    cursor?: string;
+    before?: string;
+  },
+): WhereObject {
+  const where: WhereObject = { tenantId };
+  if (p.aggregateType) where["aggregateType"] = p.aggregateType;
+  if (p.aggregateId) where["aggregateId"] = p.aggregateId;
+  const type = p.eventType ?? p.search;
+  if (type) where["type"] = type;
+  if (p.userId) where["createdBy"] = p.userId;
+  const range = buildDateRange(p.from, p.to);
+  if (range) where["createdAt"] = range;
+  const cursor = p.cursor ?? p.before;
+  if (cursor) where["id"] = { lt: BigInt(cursor) };
+  return where;
+}
+
 export const listQuery = defineQueryHandler({
   name: "list",
   description:
     "Lists the tenant's audit-trail events newest-first with cursor paging, filterable by aggregate type, aggregate id, event type, actor and time range; use it to answer who changed what and when.",
   schema: z
     .object({
+      cursor: z.string().regex(/^\d+$/, "cursor must be a positive integer").optional(),
       before: z.string().regex(/^\d+$/, "cursor must be a positive integer").optional(),
+      search: z.string().trim().optional(),
       limit: z.number().int().min(1).max(MAX_LIMIT).default(50),
       aggregateType: z.string().optional(),
       aggregateId: z.uuid().optional(),
       eventType: z.string().optional(),
       userId: z.string().optional(),
+      sort: z.enum(["createdAt", "type"]).optional(),
+      sortDirection: z.enum(["asc", "desc"]).optional(),
       from: z.iso.datetime().optional(),
       to: z.iso.datetime().optional(),
     })
@@ -41,18 +83,7 @@ export const listQuery = defineQueryHandler({
   access: { roles: access.admin },
   handler: async (query, ctx) => {
     const p = query.payload;
-    const where: WhereObject = { tenantId: query.user.tenantId };
-    if (p.aggregateType) where["aggregateType"] = p.aggregateType;
-    if (p.aggregateId) where["aggregateId"] = p.aggregateId;
-    if (p.eventType) where["type"] = p.eventType;
-    if (p.userId) where["createdBy"] = p.userId;
-    if (p.from || p.to) {
-      const range: { gte?: unknown; lte?: unknown } = {};
-      if (p.from) range.gte = Temporal.Instant.from(p.from);
-      if (p.to) range.lte = Temporal.Instant.from(p.to);
-      where["createdAt"] = range;
-    }
-    if (p.before) where["id"] = { lt: BigInt(p.before) };
+    const where = buildAuditWhere(query.user.tenantId, p);
 
     const rows = await selectMany<{
       id: bigint;
@@ -65,7 +96,10 @@ export const listQuery = defineQueryHandler({
       createdAt: unknown;
       createdBy: string;
     }>(ctx.db, eventsTable, where, {
-      orderBy: { col: "id", direction: "desc" },
+      orderBy: {
+        col: query.payload.sort === "type" ? "type" : "createdAt",
+        direction: query.payload.sortDirection ?? "desc",
+      },
       limit: p.limit,
     });
 
@@ -81,9 +115,11 @@ export const listQuery = defineQueryHandler({
       createdBy: r.createdBy,
     }));
     const last = serialised[serialised.length - 1];
+    const nextId = serialised.length === p.limit && last ? last.id : null;
     return {
       rows: serialised,
-      nextBefore: serialised.length === p.limit && last ? last.id : null,
+      nextCursor: nextId,
+      nextBefore: nextId,
     };
   },
 });