@idp.global/catalog 7.2.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/catalog",
-  "version": "7.2.0",
+  "version": "8.1.0",
   "private": false,
   "description": "Web component catalog for idp.global, based on the v5 Apple-system design language.",
   "exports": {
@@ -12,19 +12,17 @@
   "author": "Task Venture Capital GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-catalog": "^3.96.3",
-    "@design.estate/dees-domtools": "^2.5.6",
-    "@design.estate/dees-element": "^2.4.0",
-    "@design.estate/dees-wcctools": "^3.9.2",
+    "@design.estate/dees-catalog": "^16.13.0",
+    "@design.estate/dees-domtools": "^3.0.1",
+    "@design.estate/dees-element": "^3.4.0",
     "@idp.global/interfaces": "^25.1.0",
     "lucide": "^1.24.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.4.2",
-    "@git.zone/tsbundle": "^2.11.3",
-    "@git.zone/tswatch": "^3.3.5",
+    "@design.estate/dees-wcctools": "^4.0.0",
+    "@git.zone/tsrepo": "^2.1.0",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^26.1.1"
+    "@types/node": "^26.6.6"
   },
   "files": [
     "ts_web/**/*",
@@ -55,8 +53,8 @@
   ],
   "scripts": {
     "test": "pnpm run build",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
-    "watch": "tswatch",
-    "buildDocs": "tsdoc"
+    "build": "tsrepo build tsfolders --allowimplicitany && tsrepo bundle",
+    "watch": "tsrepo watch",
+    "buildDocs": "tsrepo docs"
   }
 }

package/readme.md

@@ -38,6 +38,7 @@ import type {
   IIdpSelectOption,
   IIdpAdminNavigateEventDetail,
   IIdpAdminGaAppConfigureEventDetail,
+  IIdpAdminGaAppCreateEventDetail,
   IIdpAdminGaAppRotateSecretEventDetail,
   IIdpAdminGaAppSecretDismissEventDetail,
   IIdpAdminClientSecret,
@@ -46,6 +47,8 @@ import type {
 
 `idp-admin-shell` dispatches `idp-admin-ga-app-configure` for safe OIDC client configuration and `idp-admin-ga-app-rotate-secret` for confidential-client secret rotation. After the host supplies the one-time result through `.oidcClientSecret`, the shell displays the plaintext secret until the user confirms secure storage through `idp-admin-ga-app-secret-dismiss`. The host must clear the property on dismissal and must not persist the plaintext secret.
 
+In the global-admin console (`superadmin` and `global-admin`), the Platform Apps page offers "New app", which dispatches `idp-admin-ga-app-create` with an `IIdpAdminGaAppCreateEventDetail` for one confidential client. The first submit freezes the payload: every retry dispatches the same values, so the host can keep one idempotent operation for it. "Discard and edit" drops the frozen draft and dispatches `idp-admin-ga-app-create-discard`, after which the host drops its pending operation. Once the app exists, the host supplies the secret through `.oidcClientSecret` and calls `completeGaAppCreate()` to clear the draft. The shell refuses a create while a secret is displayed.
+
 ## Element Surface
 
 | Element | Purpose |

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/catalog',
-  version: '7.2.0',
+  version: '8.1.0',
   description: 'Web component catalog for idp.global, based on the v5 Apple-system design language.'
 }

package/ts_web/elements/idp-admin-overview.ts

@@ -245,8 +245,8 @@ export class IdpAdminOverview extends DeesElement {
       <div class="primary-grid">
         ${data?.chartSeries?.length ? html`
           <div class="card chart-card">
-            <div class="card-head"><span class="card-title">${data.chartLabel || 'Approval activity'}</span></div>
             <dees-chart-area
+              .frameless=${true}
               .label=${data.chartLabel || 'Approval activity'}
               .yAxisFormatter=${(valueArg: number) => `${Math.round(valueArg)}`}
               .series=${data.chartSeries.map((seriesArg) => ({

package/ts_web/elements/idp-admin-shell.ts

@@ -151,6 +151,29 @@ export interface IIdpAdminGaAppConfigureEventDetail {
   };
 }
 
+/**
+ * Detail of `idp-admin-ga-app-create`: one confidential global OIDC client to create.
+ * The shell freezes these fields at the first submit; every retry dispatches the same
+ * values until the host calls `completeGaAppCreate()` or the admin discards the draft,
+ * which dispatches `idp-admin-ga-app-create-discard`.
+ */
+export interface IIdpAdminGaAppCreateEventDetail {
+  name: string;
+  description: string;
+  logoUrl: string;
+  appUrl: string;
+  category: string;
+  redirectUris: string[];
+  postLogoutRedirectUris: string[];
+  allowedScopes: string[];
+  grantTypes: Array<'authorization_code' | 'refresh_token'>;
+  oidcSettings: {
+    accessTokenLifetime: number;
+    idTokenLifetime: number;
+    refreshTokenLifetime: number;
+  };
+}
+
 export interface IIdpAdminGaAppRotateSecretEventDetail {
   appId: string;
   gracePeriodSeconds: number;
@@ -407,7 +430,7 @@ export interface IIdpAdminPasskeyEventDetail {
 
 @customElement('idp-admin-shell')
 export class IdpAdminShell extends DeesElement {
-  public static demo = () => {
+  public static demo = [() => {
     const now = Date.now();
     const hours = Array.from({ length: 24 }, (unused, indexArg) => indexArg);
     return html`
@@ -490,7 +513,21 @@ export class IdpAdminShell extends DeesElement {
         ]}
       ></idp-admin-shell>
     `;
-  };
+  }, () => html`
+    <idp-admin-shell
+      superadmin
+      global-admin
+      page="ga-apps"
+      .user=${{ name: 'Alex Mercer', email: 'alex@lossless.com' }}
+      .adminApps=${[
+        { id: 'app_foss', name: 'foss.global', type: 'global', category: 'Development', status: 'active', clientType: 'confidential' },
+        { id: 'app_task', name: 'task.vc', type: 'global', category: 'Productivity', status: 'active', clientType: 'confidential' },
+      ]}
+      @idp-admin-ga-app-create=${(eventArg: CustomEvent<IIdpAdminGaAppCreateEventDetail>) => {
+        (eventArg.target as IdpAdminShell).showToast(`Demo: create requested for ${eventArg.detail.name}.`);
+      }}
+    ></idp-admin-shell>
+  `];
   public static demoGroups = ['idp.global v5 full pages'];
 
   public static styles = [
@@ -1176,7 +1213,7 @@ export class IdpAdminShell extends DeesElement {
   private accessor orgSettingsError = '';
 
   @state()
-  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' | 'oidc-app-config' | 'oidc-secret-rotate' | 'create-org' | 'logout-confirm' = 'none';
+  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' | 'oidc-app-config' | 'oidc-app-create' | 'oidc-secret-rotate' | 'create-org' | 'logout-confirm' = 'none';
 
   @state()
   private accessor dialogError = '';
@@ -1238,6 +1275,25 @@ export class IdpAdminShell extends DeesElement {
   @state()
   private accessor dialogSecretGracePeriod = 86400;
 
+  @state()
+  private accessor dialogAppName = '';
+
+  @state()
+  private accessor dialogAppDescription = '';
+
+  @state()
+  private accessor dialogAppLogoUrl = '';
+
+  @state()
+  private accessor dialogAppUrl = '';
+
+  @state()
+  private accessor dialogAppCategory = '';
+
+  /** the create payload frozen at its first submit; it outlives the dialog until resolved or discarded */
+  @state()
+  private accessor gaAppCreateSubmission: IIdpAdminGaAppCreateEventDetail | null = null;
+
   private get safeOrgs(): IIdpAdminOrg[] {
     return Array.isArray(this.orgs) ? this.orgs.filter(Boolean) : [];
   }
@@ -1651,6 +1707,11 @@ export class IdpAdminShell extends DeesElement {
     this.dialogIdTokenLifetime = 3600;
     this.dialogRefreshTokenLifetime = 2592000;
     this.dialogSecretGracePeriod = 86400;
+    this.dialogAppName = '';
+    this.dialogAppDescription = '';
+    this.dialogAppLogoUrl = '';
+    this.dialogAppUrl = '';
+    this.dialogAppCategory = '';
   }
 
   private openRoleUpsertDialog(roleArg?: IIdpAdminOrgRoleDefinition) {
@@ -1708,6 +1769,30 @@ export class IdpAdminShell extends DeesElement {
     this.dialogRefreshTokenLifetime = appArg.refreshTokenLifetime || 2592000;
   }
 
+  private openOidcAppCreateDialog() {
+    this.closeDialog();
+    this.dialogMode = 'oidc-app-create';
+    const submission = this.gaAppCreateSubmission;
+    if (submission) {
+      // a submitted draft reopens exactly as it was sent, locked
+      this.dialogAppName = submission.name;
+      this.dialogAppDescription = submission.description;
+      this.dialogAppLogoUrl = submission.logoUrl;
+      this.dialogAppUrl = submission.appUrl;
+      this.dialogAppCategory = submission.category;
+      this.dialogRedirectUris = submission.redirectUris.join('\n');
+      this.dialogPostLogoutRedirectUris = submission.postLogoutRedirectUris.join('\n');
+      this.dialogAllowedScopes = submission.allowedScopes.join(', ');
+      this.dialogGrantTypes = submission.grantTypes.join(', ');
+      this.dialogAccessTokenLifetime = submission.oidcSettings.accessTokenLifetime;
+      this.dialogIdTokenLifetime = submission.oidcSettings.idTokenLifetime;
+      this.dialogRefreshTokenLifetime = submission.oidcSettings.refreshTokenLifetime;
+      return;
+    }
+    this.dialogAllowedScopes = 'openid, profile, email';
+    this.dialogGrantTypes = 'authorization_code, refresh_token';
+  }
+
   private openOidcSecretRotateDialog(appArg: IIdpAdminApp) {
     this.dialogMode = 'oidc-secret-rotate';
     this.dialogError = '';
@@ -1743,8 +1828,11 @@ export class IdpAdminShell extends DeesElement {
     this.dialogError = '';
   }
 
-  private submitOidcAppConfigDialog() {
-    if (!this.dialogApp) return;
+  /** validates the OIDC client fields the configure and create dialogs share; sets dialogError and returns null when invalid */
+  private validateOidcClientDialogFields(): Pick<
+    IIdpAdminGaAppConfigureEventDetail,
+    'redirectUris' | 'postLogoutRedirectUris' | 'allowedScopes' | 'grantTypes' | 'oidcSettings'
+  > | null {
     const redirectUris = this.parseLines(this.dialogRedirectUris);
     const postLogoutRedirectUris = this.parseLines(this.dialogPostLogoutRedirectUris);
     const allowedScopes = this.parseCsv(this.dialogAllowedScopes);
@@ -1761,32 +1849,29 @@ export class IdpAdminShell extends DeesElement {
       && this.dialogRefreshTokenLifetime <= 7776000;
     if (invalidGrantTypes.length) {
       this.dialogError = `Unsupported grant types: ${invalidGrantTypes.join(', ')}.`;
-      return;
+      return null;
     }
     if (invalidUris.length) {
       this.dialogError = `Invalid exact redirect URIs: ${invalidUris.join(', ')}.`;
-      return;
+      return null;
     }
     if (!grantTypes.length) {
       this.dialogError = 'Add at least one supported grant type.';
-      return;
+      return null;
     }
     if (grantTypes.includes('authorization_code') && (!redirectUris.length || !allowedScopes.includes('openid'))) {
       this.dialogError = 'The authorization_code grant requires a callback URI and the openid scope.';
-      return;
+      return null;
     }
     if (grantTypes.includes('refresh_token') && !grantTypes.includes('authorization_code')) {
       this.dialogError = 'The refresh_token grant requires the authorization_code grant.';
-      return;
+      return null;
     }
     if (!lifetimesAreValid) {
       this.dialogError = 'Access and ID token lifetimes must be 300 to 86400 seconds; refresh family lifetime must be 3600 to 7776000 seconds.';
-      return;
+      return null;
     }
-    this.dispatchShellEvent<IIdpAdminGaAppConfigureEventDetail>('idp-admin-ga-app-configure', {
-      appId: this.dialogApp.id,
-      clientType: this.dialogClientType,
-      isActive: this.dialogAppActive,
+    return {
       redirectUris,
       postLogoutRedirectUris,
       allowedScopes,
@@ -1796,10 +1881,111 @@ export class IdpAdminShell extends DeesElement {
         idTokenLifetime: this.dialogIdTokenLifetime,
         refreshTokenLifetime: this.dialogRefreshTokenLifetime,
       },
+    };
+  }
+
+  private submitOidcAppConfigDialog() {
+    if (!this.dialogApp) return;
+    const oidcClientFields = this.validateOidcClientDialogFields();
+    if (!oidcClientFields) return;
+    this.dispatchShellEvent<IIdpAdminGaAppConfigureEventDetail>('idp-admin-ga-app-configure', {
+      appId: this.dialogApp.id,
+      clientType: this.dialogClientType,
+      isActive: this.dialogAppActive,
+      ...oidcClientFields,
     });
     this.closeDialog();
   }
 
+  /** an HTTPS URL without credentials, as the app stores registered app and logo URLs */
+  private isValidHttpsUrl(valueArg: string): boolean {
+    try {
+      const url = new URL(valueArg);
+      return url.protocol === 'https:' && !url.username && !url.password;
+    } catch {
+      return false;
+    }
+  }
+
+  /** the app metadata limits idp.global stores: lengths in UTF-16 code units, no control characters */
+  private validateGaAppCreateMetadata(): Pick<
+    IIdpAdminGaAppCreateEventDetail,
+    'name' | 'description' | 'logoUrl' | 'appUrl' | 'category'
+  > | null {
+    const controlCharacters = /[\u0000-\u001f\u007f]/;
+    const name = this.dialogAppName.trim();
+    const description = this.dialogAppDescription.trim();
+    const logoUrl = this.dialogAppLogoUrl.trim();
+    const appUrl = this.dialogAppUrl.trim();
+    const category = this.dialogAppCategory.trim();
+    if (!name || name.length > 512 || controlCharacters.test(name)) {
+      this.dialogError = 'Enter an app name of at most 512 characters without control characters.';
+      return null;
+    }
+    if (description.length > 8192 || controlCharacters.test(description)) {
+      this.dialogError = 'The description must be at most 8192 characters without control characters.';
+      return null;
+    }
+    if (!appUrl || appUrl.length > 2048 || !this.isValidHttpsUrl(appUrl)) {
+      this.dialogError = 'Enter the app URL as an absolute HTTPS URL without credentials.';
+      return null;
+    }
+    if (logoUrl && (logoUrl.length > 2048 || !this.isValidHttpsUrl(logoUrl))) {
+      this.dialogError = 'The logo URL must be an absolute HTTPS URL without credentials, or empty.';
+      return null;
+    }
+    if (!category || category.length > 256 || controlCharacters.test(category)) {
+      this.dialogError = 'Enter a category of at most 256 characters without control characters.';
+      return null;
+    }
+    return { name, description, logoUrl, appUrl, category };
+  }
+
+  /** only one one-time secret is on screen at a time */
+  private ensureNoDisplayedClientSecret(): boolean {
+    if (this.oidcClientSecret) {
+      this.dialogError = 'Store and dismiss the displayed client secret before creating another app.';
+      return false;
+    }
+    return true;
+  }
+
+  private submitOidcAppCreateDialog() {
+    if (!this.ensureNoDisplayedClientSecret()) return;
+    // the first submit freezes the payload; every retry resends exactly it
+    let submission = this.gaAppCreateSubmission;
+    if (!submission) {
+      const metadata = this.validateGaAppCreateMetadata();
+      if (!metadata) return;
+      const oidcClientFields = this.validateOidcClientDialogFields();
+      if (!oidcClientFields) return;
+      submission = { ...metadata, ...oidcClientFields };
+      this.gaAppCreateSubmission = submission;
+    }
+    // a fresh copy per dispatch, so a listener can never alter the frozen draft
+    this.dispatchShellEvent<IIdpAdminGaAppCreateEventDetail>('idp-admin-ga-app-create', structuredClone(submission));
+    this.closeDialog();
+  }
+
+  /** drops the frozen draft and unlocks its values for editing; the next submit is a new creation */
+  private discardOidcAppCreate() {
+    if (!this.gaAppCreateSubmission) return;
+    this.gaAppCreateSubmission = null;
+    this.dialogError = '';
+    this.dispatchShellEvent('idp-admin-ga-app-create-discard', {});
+  }
+
+  /**
+   * The host calls this once `idp-admin-ga-app-create` has created the app (after it set
+   * `oidcClientSecret`): the frozen draft is cleared and an open create dialog closes.
+   */
+  public completeGaAppCreate() {
+    this.gaAppCreateSubmission = null;
+    if (this.dialogMode === 'oidc-app-create') {
+      this.closeDialog();
+    }
+  }
+
   private submitOidcSecretRotateDialog() {
     if (!this.dialogApp) return;
     if (!Number.isInteger(this.dialogSecretGracePeriod) || this.dialogSecretGracePeriod < 0 || this.dialogSecretGracePeriod > 604800) {
@@ -2068,15 +2254,7 @@ export class IdpAdminShell extends DeesElement {
             </select>
           `, true)}
           ${this.renderFormRow('Active', 'Deactivation rejects authorization, exchange, refresh, and UserInfo.', html`<input type="checkbox" .checked=${this.dialogAppActive} @change=${(eventArg: Event) => { this.dialogAppActive = (eventArg.target as HTMLInputElement).checked; }} />`)}
-          ${this.renderFormRow('Callback URIs', 'One exact absolute URI per line; required for authorization_code.', html`<textarea class="textarea" .value=${this.dialogRedirectUris} @input=${(eventArg: Event) => { this.dialogRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
-          ${this.renderFormRow('Post-logout URIs', 'One exact RP-Initiated Logout destination per line.', html`<textarea class="textarea" .value=${this.dialogPostLogoutRedirectUris} @input=${(eventArg: Event) => { this.dialogPostLogoutRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
-          ${this.renderFormRow('Allowed scopes', 'Comma-separated scopes; authorization_code requires openid.', html`<input class="input" .value=${this.dialogAllowedScopes} @input=${(eventArg: Event) => { this.dialogAllowedScopes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
-          ${this.renderFormRow('Grant types', 'authorization_code and refresh_token are supported.', html`<input class="input" .value=${this.dialogGrantTypes} @input=${(eventArg: Event) => { this.dialogGrantTypes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
-          <div class="mapping-row">
-            <div>${this.renderFormRow('Access token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogAccessTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('access', eventArg)} />`, true)}</div>
-            <div>${this.renderFormRow('ID token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogIdTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('id', eventArg)} />`, true)}</div>
-            <div>${this.renderFormRow('Refresh family seconds', '3600 to 7776000; absolute lifetime.', html`<input class="input" type="number" .value=${String(this.dialogRefreshTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('refresh', eventArg)} />`, true)}</div>
-          </div>
+          ${this.renderOidcClientFieldRows(false)}
         </div>
         <div class="dialog-actions">
           <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
@@ -2086,6 +2264,67 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  /** the OIDC client rows the configure and create dialogs share */
+  private renderOidcClientFieldRows(lockedArg: boolean): TemplateResult {
+    return html`
+      ${this.renderFormRow('Callback URIs', 'One exact absolute URI per line; required for authorization_code.', html`<textarea class="textarea" .value=${this.dialogRedirectUris} ?disabled=${lockedArg} @input=${(eventArg: Event) => { this.dialogRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
+      ${this.renderFormRow('Post-logout URIs', 'One exact RP-Initiated Logout destination per line.', html`<textarea class="textarea" .value=${this.dialogPostLogoutRedirectUris} ?disabled=${lockedArg} @input=${(eventArg: Event) => { this.dialogPostLogoutRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
+      ${this.renderFormRow('Allowed scopes', 'Comma-separated scopes; authorization_code requires openid.', html`<input class="input" .value=${this.dialogAllowedScopes} ?disabled=${lockedArg} @input=${(eventArg: Event) => { this.dialogAllowedScopes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+      ${this.renderFormRow('Grant types', 'authorization_code and refresh_token are supported.', html`<input class="input" .value=${this.dialogGrantTypes} ?disabled=${lockedArg} @input=${(eventArg: Event) => { this.dialogGrantTypes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+      <div class="mapping-row">
+        <div>${this.renderFormRow('Access token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogAccessTokenLifetime)} ?disabled=${lockedArg} @input=${(eventArg: Event) => this.setDialogNumber('access', eventArg)} />`, true)}</div>
+        <div>${this.renderFormRow('ID token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogIdTokenLifetime)} ?disabled=${lockedArg} @input=${(eventArg: Event) => this.setDialogNumber('id', eventArg)} />`, true)}</div>
+        <div>${this.renderFormRow('Refresh family seconds', '3600 to 7776000; absolute lifetime.', html`<input class="input" type="number" .value=${String(this.dialogRefreshTokenLifetime)} ?disabled=${lockedArg} @input=${(eventArg: Event) => this.setDialogNumber('refresh', eventArg)} />`, true)}</div>
+      </div>
+    `;
+  }
+
+  private setDialogAppField(fieldArg: 'name' | 'description' | 'logoUrl' | 'appUrl' | 'category', eventArg: Event) {
+    const value = (eventArg.target as HTMLInputElement).value;
+    if (fieldArg === 'name') this.dialogAppName = value;
+    if (fieldArg === 'description') this.dialogAppDescription = value;
+    if (fieldArg === 'logoUrl') this.dialogAppLogoUrl = value;
+    if (fieldArg === 'appUrl') this.dialogAppUrl = value;
+    if (fieldArg === 'category') this.dialogAppCategory = value;
+    this.dialogError = '';
+  }
+
+  private renderOidcAppCreateDialog(): TemplateResult {
+    const locked = this.gaAppCreateSubmission !== null;
+    return html`
+      <div class="dialog-card wide" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Create global app</div><div class="muted">Registers a confidential OIDC client. Its client secret is shown once, after creation.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          <div class="notice-card"><idp-icon name="key" size="16"></idp-icon><div><div class="section-title">Passkey required</div><div class="muted">Creating a confidential client requires a passkey sign-in within the last 5 minutes.</div></div></div>
+          ${locked
+            ? html`<div class="notice-card" style="border-color:var(--idp-warn-border);background:var(--idp-warn-bg)"><idp-icon name="alert" size="16" style="color:var(--idp-warn)"></idp-icon><div><div class="section-title" style="color:var(--idp-warn)">Submitted values are locked</div><div class="muted">Retry sends exactly these values again. To change them, discard this draft.</div></div></div>`
+            : html``}
+          ${this.renderFormRow('App name', 'Shown on consent screens and in the app directory.', html`<input class="input" maxlength="512" .value=${this.dialogAppName} ?disabled=${locked} @input=${(eventArg: Event) => this.setDialogAppField('name', eventArg)} />`, true)}
+          ${this.renderFormRow('Description', 'Optional one-line summary.', html`<input class="input" maxlength="8192" .value=${this.dialogAppDescription} ?disabled=${locked} @input=${(eventArg: Event) => this.setDialogAppField('description', eventArg)} />`)}
+          ${this.renderFormRow('App URL', 'Absolute HTTPS URL of the app.', html`<input class="input" type="url" maxlength="2048" placeholder="https://app.example.com" .value=${this.dialogAppUrl} ?disabled=${locked} @input=${(eventArg: Event) => this.setDialogAppField('appUrl', eventArg)} />`, true)}
+          ${this.renderFormRow('Logo URL', 'Optional absolute HTTPS URL of the app logo.', html`<input class="input" type="url" maxlength="2048" .value=${this.dialogAppLogoUrl} ?disabled=${locked} @input=${(eventArg: Event) => this.setDialogAppField('logoUrl', eventArg)} />`)}
+          ${this.renderFormRow('Category', 'Free text, at most 256 characters, for example Development.', html`<input class="input" maxlength="256" .value=${this.dialogAppCategory} ?disabled=${locked} @input=${(eventArg: Event) => this.setDialogAppField('category', eventArg)} />`, true)}
+          ${this.renderOidcClientFieldRows(locked)}
+        </div>
+        <div class="dialog-actions">
+          ${locked
+            ? html`
+                <button class="plain-button outline" @click=${() => this.discardOidcAppCreate()}>Discard and edit</button>
+                <button class="plain-button primary" @click=${() => this.submitOidcAppCreateDialog()}>Retry create</button>
+              `
+            : html`
+                <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+                <button class="plain-button primary" @click=${() => this.submitOidcAppCreateDialog()}>Create app</button>
+              `}
+        </div>
+      </div>
+    `;
+  }
+
   private renderOidcSecretRotateDialog(): TemplateResult {
     return html`
       <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
@@ -2166,9 +2405,11 @@ export class IdpAdminShell extends DeesElement {
               ? this.renderLogoutConfirmDialog()
               : this.dialogMode === 'oidc-app-config'
                 ? this.renderOidcAppConfigDialog()
-                : this.dialogMode === 'oidc-secret-rotate'
-                  ? this.renderOidcSecretRotateDialog()
-                  : this.renderAppRoleMappingsDialog();
+                : this.dialogMode === 'oidc-app-create'
+                  ? this.renderOidcAppCreateDialog()
+                  : this.dialogMode === 'oidc-secret-rotate'
+                    ? this.renderOidcSecretRotateDialog()
+                    : this.renderAppRoleMappingsDialog();
     return html`<div class="dialog-backdrop" @click=${() => this.closeDialog()}>${dialog}</div>`;
   }
 
@@ -2924,8 +3165,12 @@ export class IdpAdminShell extends DeesElement {
       ],
     }));
 
+    const createAction = this.superadmin && this.globalAdmin
+      ? html`<button class="plain-button primary" @click=${() => this.openOidcAppCreateDialog()}><idp-icon name="plus" size="12"></idp-icon>New app</button>`
+      : undefined;
+
     return html`
-      ${this.renderPageHeader('Platform Apps', 'Global and partner apps across the platform.')}
+      ${this.renderPageHeader('Platform Apps', 'Global and partner apps across the platform.', createAction)}
       <div class="body wide-body">
         ${this.oidcClientSecret
           ? html`