@wildo-ai/presets-components 1.1.5 → 1.1.6

package/dist/esm/config/resources/application.resource-presets.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { RelatedResourceSections, resourceUIBehavior, resourceUIBehaviorFrom, SummaryFlow, SummaryMeta, SummaryTitle, ResourceLayoutInlineEditDefault, } from '@wildo-ai/saas-frontend-lib';
+import { RelatedResourceSections, ResourceHeaderTitle, resourceUIBehavior, resourceUIBehaviorFrom, SummaryFlow, SummaryMeta, SummaryTitle, ResourceLayoutInlineEditDefault, } from '@wildo-ai/saas-frontend-lib';
 import { DisplayField, DisplayLayout, FormField, FormLayout, ObjectScope, Section, SummaryLayout, SummaryTitlePlacement, } from '@wildo-ai/saas-frontend-lib';
-import { BadgeSemanticVariant, DisplayChromeMode, EditChromeMode, EnumDisplayMode, SectionMode } from '@wildo-ai/zod-decorators';
-import { CalendarPlus, ChartColumn, GitBranch, Key, KeyRound, ShieldCheck, ShieldX, Ban, Hourglass, LayoutGrid, Power, PowerOff, RefreshCw, RotateCcw, RotateCw, ToggleLeft, ToggleRight, } from 'lucide-react';
+import { BadgeSemanticVariant, DisplayChromeMode, EditChromeMode, EnumDisplayMode, ForeignKeyDisplayMode, SectionMode, StringEditMode, } from '@wildo-ai/zod-decorators';
+import { BadgeCheck, CalendarPlus, FileText, ChartColumn, GitBranch, Key, KeyRound, ShieldCheck, ShieldX, Ban, Hourglass, LayoutGrid, Power, PowerOff, RefreshCw, RotateCcw, RotateCw, ToggleLeft, ToggleRight, } from 'lucide-react';
 import { CoreResourceType as R, CoreResourceOperation as Op, ApiKeyStatus, AppApiKeys_Operations, ApplicationFeatures_Operations, applicationResourceConfiguration_InitializationFactory as appFactory, applicationVersionsResourceConfiguration_InitializationFactory as appVersionsFactory, applicationMetadataResourceConfiguration_InitializationFactory as appMetadataFactory, appApiKeysResourceConfiguration_InitializationFactory as appApiKeysFactory, appOAuthClientsResourceConfiguration_InitializationFactory as appOAuthClientsFactory, applicationAccessGrantsResourceConfiguration_InitializationFactory as appAccessGrantsFactory, ApplicationAccessGrants_Operations, ApplicationAccessGrantSchema, PlatformAccessGrantStatus, AppOAuthClients_Operations, OAuthClientApplicationSchema, OAuthClientStatus, applicationFeaturesResourceConfiguration_InitializationFactory as appFeaturesFactory, ApplicationSchema, ApplicationVersionSchema, ApplicationMetadataSchema, ApiKeyApplicationSchema, ScopeFeaturesWithOverridesSchema, } from '@wildo-ai/saas-models';
-import { addressable, notAddressable, apiOnly } from './resource.config.utils.js';
+import { ApiKeyRotationWindowRows } from './api-key-rotation-window.js';
+import { addressable, notAddressable, apiOnly, ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE } from './resource.config.utils.js';
 /**
  * Application — Resource frontend presets
  *
@@ -67,19 +68,28 @@ export function buildApplicationAdminPresets(main) {
         })),
         [R.APPLICATION_VERSIONS]: resourceUIBehavior(appVersionsFactory, ApplicationVersionSchema, ({ schema, schemaShape, opsVariantResolver }) => ({
             icon: GitBranch,
+            // A release is named by its version string, so the page title IS the version and no row repeats it.
             getFrontendResourceLabel: ({ currentObject }) => currentObject.version,
             layout: {
                 refs: {
                     sections: ['overview', 'releaseNotes'],
                 },
-                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "version" }), _jsx(DisplayField, { name: "releaseDate" })] }), _jsx(Section, { name: "releaseNotes", children: _jsx(DisplayField, { name: "releaseNotes" }) })] })),
+                // Settings rows on the read page, bare values on a card, and a STACKED form: a release is authored
+                // content (a version string and a paragraph of notes), not a list of settings.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.STACKED },
+                display: () => (_jsxs(DisplayLayout, { children: [_jsx(Section, { name: "overview", appearance: SectionMode.CARD, hideTitle: true, hideDescription: true, children: _jsx(DisplayField, { name: "releaseDate" }) }), _jsx(Section, { name: "releaseNotes", appearance: SectionMode.CARD, chromeMode: DisplayChromeMode.HIDDEN, hideDescription: true, children: _jsx(DisplayField, { name: "releaseNotes" }) })] })),
                 summary: () => (
-                // TEMPLATE_OWNED with no title: this card's LABEL is the version string, which the first
-                // field already renders. At AUTO the row read "1.4.2 · Version: 1.4.2 · Released: …".
-                _jsxs(SummaryLayout, { flow: SummaryFlow.ROW, titlePlacement: SummaryTitlePlacement.TEMPLATE_OWNED, children: [_jsx(DisplayField, { name: "version" }), _jsx(DisplayField, { name: "releaseDate" })] })),
-                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "version" }), _jsx(FormField, { name: "releaseDate" })] }), _jsx(Section, { name: "releaseNotes", children: _jsx(FormField, { name: "releaseNotes" }) })] })),
+                // One line: the version and the day it shipped, bare. TEMPLATE_OWNED with no title, because the card's
+                // LABEL is the version string, which the first field already renders. At AUTO the row read
+                // "1.4.2 · Version: 1.4.2 · Released: …".
+                _jsxs(SummaryLayout, { flow: SummaryFlow.ROW, titlePlacement: SummaryTitlePlacement.TEMPLATE_OWNED, children: [_jsx(DisplayField, { name: "version", className: "w-auto" }), _jsx(DisplayField, { name: "releaseDate", className: "w-auto" })] })),
+                // One flat form: three fields need no headings, and "Release Notes" over the only field in its section
+                // said what the field's own label says.
+                edit: () => (_jsxs(FormLayout, { children: [_jsx(FormField, { name: "version", autoFocus: true }), _jsx(FormField, { name: "releaseDate" }), _jsx(FormField, { name: "releaseNotes" })] })),
+            },
+            fields: {
+                // Release notes are a paragraph, not a line.
+                releaseNotes: schemaShape.releaseNotes.stringUI({ edit: { editMode: StringEditMode.TEXTAREA } }),
             },
             views: [
                 // Versions are created by the app-version system (API-driven) — headless (API-only).
@@ -92,12 +102,14 @@ export function buildApplicationAdminPresets(main) {
             ],
         })),
         [R.APPLICATION_METADATA]: resourceUIBehavior(appMetadataFactory, ApplicationMetadataSchema, ({ schema, schemaShape, opsVariantResolver }) => ({
+            // The header showed the registry's missing-icon placeholder: nothing had ever named one.
+            icon: FileText,
             layout: {
-                refs: {
-                    sections: ['overview'],
-                },
-                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
+                // No sections. The record is one field — the application's description — and an "Overview" card with a
+                // "Purpose, audience, and positioning" description over it was a heading and a prompt per field.
+                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows, bare on a card,
+                // and a STACKED form, because the description is a paragraph someone writes.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.STACKED },
                 // Application metadata — the application’s own description. A settings pane is a list of decisions an operator came to TAKE, so its
                 // writable fields are offered in place rather than behind a whole-pane edit mode. The set is
                 // DERIVED (not primary key, not excludeFromUpdate, not hidden, not opted out), so a field
@@ -105,13 +117,16 @@ export function buildApplicationAdminPresets(main) {
                 defaultInlineEdit: ResourceLayoutInlineEditDefault.WRITABLE_FIELDS,
                 // And its empty rows say WHICH emptiness they are — "None yet" for a list with no members,
                 // "Not available" for a computed value, "No value" for a field awaiting input — instead of one
-                // em dash standing for all three. The surface policy's dash is right where a reader is scanning;
-                // on a settings row, which is read one at a time to decide something, it is an answer that
-                // refuses to answer.
+                // em dash standing for all three. Here the empty description IS the information: the seed writes
+                // an empty one, and the pane is where somebody fills it in.
                 defaultEmptyValue: 'placeholder',
-                display: () => (_jsx(DisplayLayout, { children: _jsx(Section, { name: "overview", appearance: SectionMode.CARD, children: _jsx(DisplayField, { name: "description" }) }) })),
+                display: () => (_jsx(DisplayLayout, { children: _jsx(DisplayField, { name: "description" }) })),
                 summary: () => (_jsx(SummaryLayout, { children: _jsx(DisplayField, { name: "description" }) })),
-                edit: () => (_jsx(FormLayout, { children: _jsx(Section, { name: "overview", appearance: SectionMode.CARD, children: _jsx(FormField, { name: "description" }) }) })),
+                edit: () => (_jsx(FormLayout, { children: _jsx(FormField, { name: "description", autoFocus: true }) })),
+            },
+            fields: {
+                // A description is a paragraph, not a line.
+                description: schemaShape.description.stringUI({ edit: { editMode: StringEditMode.TEXTAREA } }),
             },
             views: [
                 // Metadata is system-managed, auto-initialized with the app — headless (API-only).
@@ -122,13 +137,21 @@ export function buildApplicationAdminPresets(main) {
             ],
         })),
         [R.APPLICATION_FEATURES]: resourceUIBehavior(appFeaturesFactory, ScopeFeaturesWithOverridesSchema, ({ schema, schemaShape, opsVariantResolver }) => ({
+            // The header showed the registry's missing-icon placeholder: nothing had ever named one. The same glyph as
+            // the organization's entitlements, because it is the same record at another scope.
+            icon: BadgeCheck,
             layout: {
                 refs: { sections: ['overview', 'overrides'] },
-                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "features" }), _jsx(DisplayField, { name: "limits" })] }), _jsx(Section, { name: "overrides", children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(DisplayField, { name: "addedFeatures" }), _jsx(DisplayField, { name: "removedFeatures" }), _jsx(DisplayField, { name: "limitOverrides" })] }) })] })),
+                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows on read, bare
+                // values on a card. The form STACKS, because every field it edits is a list or a map of entries, which
+                // needs the full width a settings row gives to its label.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.STACKED },
+                // An override list with nothing in it IS the answer on this pane — "no feature was granted or withdrawn
+                // by hand" — so it says "None yet" rather than an em dash that reads as missing data.
+                defaultEmptyValue: 'placeholder',
+                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, hideTitle: true, hideDescription: true, children: [_jsx(DisplayField, { name: "features" }), _jsx(DisplayField, { name: "limits" })] }), _jsx(Section, { name: "overrides", hideDescription: true, children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(DisplayField, { name: "addedFeatures" }), _jsx(DisplayField, { name: "removedFeatures" }), _jsx(DisplayField, { name: "limitOverrides" })] }) })] })),
                 summary: () => (_jsxs(SummaryLayout, { children: [_jsx(DisplayField, { name: "features" }), _jsx(DisplayField, { name: "limits" })] })),
-                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "features" }), _jsx(FormField, { name: "limits" })] }), _jsx(Section, { name: "overrides", children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(FormField, { name: "addedFeatures" }), _jsx(FormField, { name: "removedFeatures" }), _jsx(FormField, { name: "limitOverrides" })] }) })] })),
+                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, hideTitle: true, hideDescription: true, children: [_jsx(FormField, { name: "features" }), _jsx(FormField, { name: "limits" })] }), _jsx(Section, { name: "overrides", children: _jsxs(ObjectScope, { name: "manualOverrides", children: [_jsx(FormField, { name: "addedFeatures" }), _jsx(FormField, { name: "removedFeatures" }), _jsx(FormField, { name: "limitOverrides" })] }) })] })),
             },
             views: [
                 [Op.READ, notAddressable()],
@@ -143,17 +166,24 @@ export function buildApplicationAdminPresets(main) {
             icon: Key,
             layout: {
                 refs: {
-                    sections: ['overview', 'access', 'lifecycle'],
+                    sections: ['overview', 'lifecycle'],
                 },
-                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "name" }), _jsx(DisplayField, { name: "scope" }), _jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "keyPrefix" })] }), _jsxs(Section, { name: "access", children: [_jsx(DisplayField, { name: "roles" }), _jsx(DisplayField, { name: "description" })] }), _jsxs(Section, { name: "lifecycle", children: [_jsx(DisplayField, { name: "expiresAt" }), _jsx(DisplayField, { name: "lastUsedAt" }), _jsx(DisplayField, { name: "createdAt" })] })] })),
-                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "name" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "scope" }), _jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "keyPrefix" })] })] })),
-                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "name" }), _jsx(FormField, { name: "status" }), _jsx(FormField, { name: "expiresAt" })] }), _jsxs(Section, { name: "access", children: [_jsx(FormField, { name: "roles" }), _jsx(FormField, { name: "description" })] })] })),
+                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows on read and on the
+                // form — a credential is configured, not written — and bare values on a card.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.SETTINGS_ROW },
+                // The identity line: the key's name (the page title) and its status beside it. Neither is repeated below.
+                header: () => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-field", children: [_jsx(ResourceHeaderTitle, {}), _jsx(DisplayField, { name: "status", hideLabel: true, hideDescription: true, className: "w-auto" })] })),
+                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, hideTitle: true, hideDescription: true, children: [_jsx(DisplayField, { name: "keyPrefix" }), _jsx(DisplayField, { name: "description" }), _jsx(DisplayField, { name: "roles" })] }), _jsxs(Section, { name: "lifecycle", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(DisplayField, { name: "expiresAt" }), _jsx(DisplayField, { name: "lastUsedAt" }), _jsx(DisplayField, { name: "createdAt" }), _jsx(ApiKeyRotationWindowRows, {})] })] })),
+                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "name" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "keyPrefix" }), _jsx(DisplayField, { name: "expiresAt" })] })] })),
+                // One flat form. The name first, because it is what the key is called everywhere; the description as a
+                // paragraph. Headings over two or three fields of one short form separated nothing.
+                edit: () => (_jsxs(FormLayout, { children: [_jsx(FormField, { name: "name", autoFocus: true }), _jsx(FormField, { name: "description" }), _jsx(FormField, { name: "status" }), _jsx(FormField, { name: "expiresAt" }), _jsx(FormField, { name: "roles" })] })),
             },
             fields: {
+                // The badge's colour carries the state; the state's description is a form hint, not a line under every
+                // badge on a list.
                 status: schemaShape.status.enumUI({
-                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: true },
+                    display: { displayMode: EnumDisplayMode.BADGE },
                     edit: { showDescription: true },
                     values: {
                         [ApiKeyStatus.ACTIVE]: { color: BadgeSemanticVariant.SUCCESS },
@@ -161,6 +191,23 @@ export function buildApplicationAdminPresets(main) {
                         [ApiKeyStatus.EXPIRED]: { color: BadgeSemanticVariant.WARNING },
                     },
                 }),
+                description: schemaShape.description.stringUI({
+                    display: { hideWhenEmpty: true },
+                    edit: { editMode: StringEditMode.TEXTAREA },
+                }),
+                // A key with no expiry never expires, and one never used has no last use: an empty row says nothing.
+                // On a card the expiry keeps its label — a bare date beside a name and a status could be any of the key's
+                // dates.
+                expiresAt: schemaShape.expiresAt.dateUI({
+                    display: { hideWhenEmpty: true },
+                    summaryOverride: { chromeMode: DisplayChromeMode.INLINE },
+                }),
+                lastUsedAt: schemaShape.lastUsedAt.dateUI({ display: { hideWhenEmpty: true } }),
+                // The rotation window, rendered only while the previous secret still authenticates (`ApiKeyRotationWindowRows`).
+                // The prefix row says what an empty end date means — after a regenerate the old secret has none and keeps
+                // working — so it carries its description; the end-date row hides itself when there is no date.
+                previousKeyPrefix: schemaShape.previousKeyPrefix.stringUI({ display: { hideWhenEmpty: true, showDescription: true } }),
+                previousKeyInvalidationDate: schemaShape.previousKeyInvalidationDate.dateUI({ display: { hideWhenEmpty: true } }),
             },
             getFrontendResourceLabel: ({ currentObject }) => currentObject.name,
             views: [
@@ -168,11 +215,11 @@ export function buildApplicationAdminPresets(main) {
                 [Op.LIST, notAddressable()],
                 [Op.SEARCH, notAddressable()],
                 [Op.CREATE, notAddressable()],
-                [AppApiKeys_Operations.ROTATE, notAddressable({ iconOverride: RotateCw })],
-                [AppApiKeys_Operations.REGENERATE, notAddressable({ iconOverride: RefreshCw })],
-                [AppApiKeys_Operations.DEACTIVATE, notAddressable({ iconOverride: PowerOff })],
-                [AppApiKeys_Operations.REACTIVATE, notAddressable({ iconOverride: Power })],
-                [AppApiKeys_Operations.EXTEND_EXPIRY, notAddressable({ iconOverride: CalendarPlus })],
+                [AppApiKeys_Operations.ROTATE, notAddressable({ iconOverride: RotateCw, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
+                [AppApiKeys_Operations.REGENERATE, notAddressable({ iconOverride: RefreshCw, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
+                [AppApiKeys_Operations.DEACTIVATE, notAddressable({ iconOverride: PowerOff, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
+                [AppApiKeys_Operations.REACTIVATE, notAddressable({ iconOverride: Power, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
+                [AppApiKeys_Operations.EXTEND_EXPIRY, notAddressable({ iconOverride: CalendarPlus, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
                 [AppApiKeys_Operations.USAGE_STATS, notAddressable({ iconOverride: ChartColumn })],
             ],
         })),
@@ -201,18 +248,22 @@ export function buildApplicationAdminPresets(main) {
                 refs: {
                     sections: ['overview', 'access', 'redirects', 'lifecycle'],
                 },
-                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "name" }), _jsx(DisplayField, { name: "description" }), _jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "secretPrefix" })] }), _jsxs(Section, { name: "access", children: [_jsx(DisplayField, { name: "allowedGrants" }), _jsx(DisplayField, { name: "allowedScopes" }), _jsx(DisplayField, { name: "roles" }), _jsx(DisplayField, { name: "tokenEndpointAuthMethod" }), _jsx(DisplayField, { name: "requiresConsent" })] }), _jsxs(Section, { name: "redirects", children: [_jsx(DisplayField, { name: "redirectUris" }), _jsx(DisplayField, { name: "postLogoutRedirectUris" })] }), _jsxs(Section, { name: "lifecycle", children: [_jsx(DisplayField, { name: "expiresAt" }), _jsx(DisplayField, { name: "lastUsedAt" }), _jsx(DisplayField, { name: "createdAt" })] })] })),
+                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows on read and on the
+                // form — a client is configured, not written — and bare values on a card.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.SETTINGS_ROW },
+                // The identity line: the client's name (the page title) and its status beside it. Neither is repeated below.
+                header: () => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-field", children: [_jsx(ResourceHeaderTitle, {}), _jsx(DisplayField, { name: "status", hideLabel: true, hideDescription: true, className: "w-auto" })] })),
+                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, hideTitle: true, hideDescription: true, children: [_jsx(DisplayField, { name: "secretPrefix" }), _jsx(DisplayField, { name: "description" })] }), _jsxs(Section, { name: "access", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(DisplayField, { name: "allowedGrants" }), _jsx(DisplayField, { name: "allowedScopes" }), _jsx(DisplayField, { name: "roles" }), _jsx(DisplayField, { name: "tokenEndpointAuthMethod" }), _jsx(DisplayField, { name: "requiresConsent" })] }), _jsxs(Section, { name: "redirects", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(DisplayField, { name: "redirectUris" }), _jsx(DisplayField, { name: "postLogoutRedirectUris" })] }), _jsxs(Section, { name: "lifecycle", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(DisplayField, { name: "expiresAt" }), _jsx(DisplayField, { name: "lastUsedAt" }), _jsx(DisplayField, { name: "createdAt" })] })] })),
                 summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "name" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "secretPrefix" }), _jsx(DisplayField, { name: "expiresAt" })] })] })),
-                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, children: [_jsx(FormField, { name: "name" }), _jsx(FormField, { name: "description" }), _jsx(FormField, { name: "expiresAt" })] }), _jsxs(Section, { name: "access", children: [_jsx(FormField, { name: "allowedGrants" }), _jsx(FormField, { name: "allowedScopes" }), _jsx(FormField, { name: "roles" }), _jsx(FormField, { name: "tokenEndpointAuthMethod" }), _jsx(FormField, { name: "requiresConsent" })] }), _jsxs(Section, { name: "redirects", children: [_jsx(FormField, { name: "redirectUris" }), _jsx(FormField, { name: "postLogoutRedirectUris" })] })] })),
+                edit: () => (_jsxs(FormLayout, { children: [_jsxs(Section, { name: "overview", appearance: SectionMode.CARD, hideTitle: true, hideDescription: true, children: [_jsx(FormField, { name: "name", autoFocus: true }), _jsx(FormField, { name: "description" }), _jsx(FormField, { name: "expiresAt" })] }), _jsxs(Section, { name: "access", hideDescription: true, children: [_jsx(FormField, { name: "allowedGrants" }), _jsx(FormField, { name: "allowedScopes" }), _jsx(FormField, { name: "roles" }), _jsx(FormField, { name: "tokenEndpointAuthMethod" }), _jsx(FormField, { name: "requiresConsent" })] }), _jsxs(Section, { name: "redirects", children: [_jsx(FormField, { name: "redirectUris" }), _jsx(FormField, { name: "postLogoutRedirectUris" })] })] })),
             },
             fields: {
                 // Same three states and the same colours as an API key, because they mean the same things.
                 // EXPIRED is a WARNING rather than a DESTRUCTIVE: it is the end of a validity window, not a
-                // failure, and it is the one state `reactivate` deliberately does NOT revive.
+                // failure, and it is the one state `reactivate` deliberately does NOT revive. The state's description
+                // is a form hint; under every badge on a list it read "Whether the client can obtain tokens…" per row.
                 status: schemaShape.status.enumUI({
-                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: true },
+                    display: { displayMode: EnumDisplayMode.BADGE },
                     edit: { showDescription: true },
                     values: {
                         [OAuthClientStatus.ACTIVE]: { color: BadgeSemanticVariant.SUCCESS },
@@ -220,6 +271,20 @@ export function buildApplicationAdminPresets(main) {
                         [OAuthClientStatus.EXPIRED]: { color: BadgeSemanticVariant.WARNING },
                     },
                 }),
+                description: schemaShape.description.stringUI({
+                    display: { hideWhenEmpty: true },
+                    edit: { editMode: StringEditMode.TEXTAREA },
+                }),
+                // A client-credentials client has no sign-out redirect, a client with no expiry never expires, and one
+                // never used has no last use: each empty row said nothing.
+                postLogoutRedirectUris: schemaShape.postLogoutRedirectUris.arrayUI({ display: { hideWhenEmpty: true } }),
+                // On a card the expiry keeps its label: a bare date beside a name and a status could be any of the
+                // client's dates.
+                expiresAt: schemaShape.expiresAt.dateUI({
+                    display: { hideWhenEmpty: true },
+                    summaryOverride: { chromeMode: DisplayChromeMode.INLINE },
+                }),
+                lastUsedAt: schemaShape.lastUsedAt.dateUI({ display: { hideWhenEmpty: true } }),
             },
             getFrontendResourceLabel: ({ currentObject }) => currentObject.name,
             views: [
@@ -227,10 +292,10 @@ export function buildApplicationAdminPresets(main) {
                 [Op.LIST, notAddressable()],
                 [Op.SEARCH, notAddressable()],
                 [Op.CREATE, notAddressable()],
-                [AppOAuthClients_Operations.ROTATE, notAddressable({ iconOverride: RotateCw })],
-                [AppOAuthClients_Operations.REGENERATE, notAddressable({ iconOverride: RefreshCw })],
-                [AppOAuthClients_Operations.DEACTIVATE, notAddressable({ iconOverride: PowerOff })],
-                [AppOAuthClients_Operations.REACTIVATE, notAddressable({ iconOverride: Power })],
+                [AppOAuthClients_Operations.ROTATE, notAddressable({ iconOverride: RotateCw, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
+                [AppOAuthClients_Operations.REGENERATE, notAddressable({ iconOverride: RefreshCw, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
+                [AppOAuthClients_Operations.DEACTIVATE, notAddressable({ iconOverride: PowerOff, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
+                [AppOAuthClients_Operations.REACTIVATE, notAddressable({ iconOverride: Power, ...ROW_VERB_ON_RESOURCE_WITHOUT_UPDATE })],
                 // Dispatched by the expiry sweep rather than by a person — headless, so it must carry no
                 // view fields at all. An operator ends a client early with DEACTIVATE.
                 [AppOAuthClients_Operations.EXPIRE, apiOnly()],
@@ -257,30 +322,40 @@ export function buildApplicationAdminPresets(main) {
          */
         [R.APPLICATION_ACCESS_GRANTS]: resourceUIBehavior(appAccessGrantsFactory, ApplicationAccessGrantSchema, ({ schema, schemaShape, opsVariantResolver }) => ({
             icon: ShieldCheck,
-            // The REQUESTING OPERATOR. Its own specification already says why — "the first question
-            // asked of any elevation is WHO holds it" — and documented `frontend.label` on that basis
-            // while this preset declared no label strategy at all. That combination THROWS at module
-            // scope in `resourceSpecificationFromFrontendConfiguration`, and because the engine's spec
-            // barrel evaluates every spec on import, one unmatched pair took the whole
-            // `@wildo-ai/saas-specifications` package down for every consumer, application companions
-            // included. Declaring it here is what makes the documentation true.
-            getFrontendResourceLabel: ({ currentObject }) => currentObject.operatorUserId,
+            // A request is named by the instant it was made, in the viewer's date-time format. It was named by the
+            // requesting operator's user id, which put a raw `6aa25215267f7e7758312323` at the top of the page and as the
+            // title of every card: this callback is synchronous over the record, and the record carries the operator's id
+            // alone, never their name. WHO asked is still the first thing the body and the card show, resolved to the
+            // person by the foreign-key renderer (see `operatorUserId` below). `createdAt` is optional on the row, so a
+            // row without it falls back to its id rather than to nothing.
+            //
+            // (History: this preset once declared no label strategy at all while the specification documented
+            // `frontend.label`, and that pair THROWS at module scope in `resourceSpecificationFromFrontendConfiguration`,
+            // taking the whole `@wildo-ai/saas-specifications` package down. Keep the two declared together.)
+            getFrontendResourceLabel: ({ currentObject, formatDateTime }) => currentObject.createdAt ? formatDateTime(currentObject.createdAt) : currentObject._id,
             layout: {
                 refs: {
                     sections: ['request', 'decision', 'window'],
                 },
-                // Settings-page chrome (Settings Hub → Administration): label-left / value-right rows.
-                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.INLINE, edit: EditChromeMode.SETTINGS_ROW },
-                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "request", appearance: SectionMode.CARD, children: [_jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "operatorUserId" }), _jsx(DisplayField, { name: "justification" }), _jsx(DisplayField, { name: "createdAt" })] }), _jsxs(Section, { name: "decision", children: [_jsx(DisplayField, { name: "approvedByUserId" }), _jsx(DisplayField, { name: "approvedAt" }), _jsx(DisplayField, { name: "decisionReason" })] }), _jsxs(Section, { name: "window", children: [_jsx(DisplayField, { name: "expiresAt" }), _jsx(DisplayField, { name: "grantedMachineCredential" })] })] })),
-                summary: () => (_jsxs(SummaryLayout, { children: [_jsx(SummaryTitle, { name: "operatorUserId" }), _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "expiresAt" })] })] })),
+                // Settings rows on the read page, bare values on a card. There is no form: every state change is a named verb.
+                defaultChromeMode: { display: DisplayChromeMode.SETTINGS_ROW, summary: DisplayChromeMode.HIDDEN, edit: EditChromeMode.SETTINGS_ROW },
+                // The identity line: when it was asked (the title) and where it stands. Neither is repeated below.
+                header: () => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-field", children: [_jsx(ResourceHeaderTitle, {}), _jsx(DisplayField, { name: "status", hideLabel: true, hideDescription: true, className: "w-auto" })] })),
+                // The three headings stay — they are what keeps the requester and the approver in separate blocks, which is
+                // the distinction this control exists for. Their descriptions do not: each explained the control to a
+                // reader who is looking at one of its records.
+                display: () => (_jsxs(DisplayLayout, { children: [_jsxs(Section, { name: "request", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(DisplayField, { name: "operatorUserId" }), _jsx(DisplayField, { name: "justification" })] }), _jsxs(Section, { name: "decision", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(DisplayField, { name: "approvedByUserId" }), _jsx(DisplayField, { name: "approvedAt" }), _jsx(DisplayField, { name: "decisionReason" })] }), _jsxs(Section, { name: "window", appearance: SectionMode.CARD, hideDescription: true, children: [_jsx(DisplayField, { name: "expiresAt" }), _jsx(DisplayField, { name: "grantedMachineCredential" })] })] })),
+                // The instant is the card's title (AUTO); below it, who asked, where it stands, and when the window ends.
+                summary: () => (_jsx(SummaryLayout, { children: _jsxs(SummaryMeta, { children: [_jsx(DisplayField, { name: "operatorUserId" }), _jsx(DisplayField, { name: "status" }), _jsx(DisplayField, { name: "expiresAt" })] }) })),
             },
             fields: {
                 // PENDING_APPROVAL is a WARNING rather than a neutral secondary: an unsigned request is the
                 // state a reviewer must act on, and the one state where the window does not yet exist.
                 // DENIED and REVOKED are both DESTRUCTIVE because both are a refusal; EXPIRED is not — it is
-                // the control working, a window closing on its own.
+                // the control working, a window closing on its own. The state's description ("Active status requires a
+                // valid, unexpired access window.") read under every badge on the queue, so it is not shown.
                 status: schemaShape.status.enumUI({
-                    display: { displayMode: EnumDisplayMode.BADGE, showDescription: true },
+                    display: { displayMode: EnumDisplayMode.BADGE },
                     values: {
                         [PlatformAccessGrantStatus.PENDING_APPROVAL]: { color: BadgeSemanticVariant.WARNING },
                         [PlatformAccessGrantStatus.ACTIVE]: { color: BadgeSemanticVariant.SUCCESS },
@@ -289,6 +364,17 @@ export function buildApplicationAdminPresets(main) {
                         [PlatformAccessGrantStatus.EXPIRED]: { color: BadgeSemanticVariant.SECONDARY },
                     },
                 }),
+                // Both identities resolve to the PERSON, never an id: a reviewer is asking "who", and a hex id answers
+                // nobody.
+                operatorUserId: schemaShape.operatorUserId.foreignKeyUI({ display: { mode: ForeignKeyDisplayMode.LABEL } }),
+                // Empty until somebody signs, and on a PENDING request that emptiness is the answer ("not signed yet"), so
+                // the approver row stays; the reason is optional even on a decision, and hides.
+                approvedByUserId: schemaShape.approvedByUserId.foreignKeyUI({ display: { mode: ForeignKeyDisplayMode.LABEL } }),
+                decisionReason: schemaShape.decisionReason.stringUI({ display: { hideWhenEmpty: true } }),
+                // Present only when the grant was requested for a machine credential.
+                grantedMachineCredential: schemaShape.grantedMachineCredential.objectUI({ display: { hideWhenEmpty: true } }),
+                // On a card the expiry keeps its label: a bare date beside a name and a status could be the request's.
+                expiresAt: schemaShape.expiresAt.dateUI({ summaryOverride: { chromeMode: DisplayChromeMode.INLINE } }),
             },
             views: [
                 [Op.READ, notAddressable()],