@idp.global/catalog 4.0.0 → 5.1.0

package/readme.md

@@ -78,6 +78,38 @@ The catalog uses shared tokens from `ts_web/elements/tokens.ts` for color, type,
 
 This package is component-only. It does not perform authentication, store sessions, call the idp.global backend, or implement business logic. Use it together with `@idp.global/sdk/browser` and `@idp.global/interfaces` when you need live identity behavior.
 
+Admin activity surfaces accept `TIdpAdminActivity`, an alias of the structured
+`@idp.global/interfaces` activity DTO. Activity rendering uses finite actions,
+outcomes, target types, and reason codes; it does not accept record IDs,
+free-text descriptions, IP addresses, user agents, or generic metadata.
+The current union includes global-administrator grant and removal lifecycle
+events emitted by the platform administration API.
+
+```ts
+import {
+  formatAdminActivityDetail,
+  formatAdminActivityTitle,
+  getAdminActivityTone,
+  type TIdpAdminActivity,
+} from '@idp.global/catalog';
+
+const activity: TIdpAdminActivity = {
+  action: 'passkey_login',
+  timestamp: Date.now(),
+  outcome: 'succeeded',
+  targetType: 'passkey',
+  facts: null,
+};
+
+const title = formatAdminActivityTitle(activity);
+const detail = formatAdminActivityDetail(activity);
+const statusColor = getAdminActivityTone(activity);
+```
+
+The npm package publishes ESM component modules, declarations, and assets. The
+local showcase HTML and its browser bundle are development artifacts and are
+not part of the npm tarball.
+
 ## Development
 
 ```bash

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/catalog',
-  version: '4.0.0',
+  version: '5.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

@@ -1,6 +1,16 @@
 import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
-import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
+import {
+  idpAdminSharedStyles,
+  renderAdminKpi,
+  renderAdminStateCard,
+  formatAdminTimeAgo,
+  formatAdminActivityTitle,
+  formatAdminActivityDetail,
+  getAdminActivityTone,
+  type TIdpAdminActivity,
+  type TIdpAdminKpi,
+} from './idp-admin-shared.js';
 import './idp-icon.js';
 import './idp-badge.js';
 import '@design.estate/dees-catalog/dist_ts_web/elements/00group-chart/dees-chart-area/index.js';
@@ -9,7 +19,6 @@ import type {
   IIdpAdminUser,
   IIdpAdminOrg,
   IIdpAdminSession,
-  IIdpAdminActivity,
   IIdpAdminPassportDevice,
   IIdpAdminOverviewData,
   IIdpAdminNavigateEventDetail,
@@ -38,8 +47,8 @@ export class IdpAdminOverview extends DeesElement {
           { id: 's2', deviceName: 'iPhone 15 Pro', browser: 'Safari', os: 'iOS 18', ip: '84.132.10.4', lastActive: now - 3600000, createdAt: now - 86400000 * 10, isCurrent: false },
         ]}
         .activities=${[
-          { id: 'a1', action: 'login_success', description: 'Signed in with passkey', timestamp: now - 300000 },
-          { id: 'a2', action: 'app_authorized', description: 'Granted access to foss.global', timestamp: now - 7200000 },
+          { action: 'passkey_login', timestamp: now - 300000, outcome: 'succeeded', targetType: 'passkey', facts: null },
+          { action: 'oidc_authorization_granted', timestamp: now - 7200000, outcome: 'succeeded', targetType: 'oidc_authorization', facts: { grantType: 'authorization_code' } },
         ]}
         .overviewData=${{
           chartLabel: 'Approval activity',
@@ -190,7 +199,7 @@ export class IdpAdminOverview extends DeesElement {
   public accessor sessions: IIdpAdminSession[] = [];
 
   @property({ type: Array })
-  public accessor activities: IIdpAdminActivity[] = [];
+  public accessor activities: TIdpAdminActivity[] = [];
 
   @property({ type: Array })
   public accessor passportDevices: IIdpAdminPassportDevice[] = [];
@@ -371,7 +380,7 @@ export class IdpAdminOverview extends DeesElement {
           <div class="card">
             <div class="card-head"><span class="card-title">Recent activity</span><idp-badge>${this.activities.length} events</idp-badge></div>
             ${this.activities.length ? this.activities.slice(0, 8).map((activityArg) => html`
-              <div class="feed-item"><span class="feed-dot" style="--dot-color:var(--idp-info)"></span><div class="feed-text"><strong>${activityArg.action.replace(/_/g, ' ')}</strong> - ${activityArg.description}</div><span class="feed-meta">${formatAdminTimeAgo(activityArg.timestamp)}</span></div>
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:${getAdminActivityTone(activityArg)}"></span><div class="feed-text"><strong>${formatAdminActivityTitle(activityArg)}</strong> - ${formatAdminActivityDetail(activityArg)}</div><span class="feed-meta">${formatAdminTimeAgo(activityArg.timestamp)}</span></div>
             `) : renderAdminStateCard('No activity yet', 'Activity events will appear here after logins, app changes, and organisation updates.', 'activity')}
           </div>
           <div class="card">

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

@@ -1,6 +1,9 @@
 import { css, html, type TemplateResult } from '@design.estate/dees-element';
+import type { dto } from '@idp.global/interfaces';
 import './idp-icon.js';
 
+export type TIdpAdminActivity = dto.TActivityEventDto;
+
 export type TIdpAdminKpi = {
   label: string;
   value: string;
@@ -417,3 +420,31 @@ export const formatAdminTimeAgo = (timestampArg?: number): string => {
   if (days < 7) return `${days}d ago`;
   return new Date(timestampArg).toLocaleDateString();
 };
+
+export const formatAdminActivityTitle = (activityArg: TIdpAdminActivity): string =>
+  activityArg.action
+    .split('_')
+    .map((segmentArg) => `${segmentArg.slice(0, 1).toUpperCase()}${segmentArg.slice(1)}`)
+    .join(' ');
+
+export const formatAdminActivityDetail = (activityArg: TIdpAdminActivity): string => {
+  const classifications = [
+    activityArg.outcome,
+    activityArg.targetType.replace(/_/g, ' '),
+    activityArg.reasonCode?.replace(/_/g, ' '),
+  ];
+  return classifications.filter(Boolean).join(' · ');
+};
+
+export const getAdminActivityTone = (activityArg: TIdpAdminActivity): string => {
+  switch (activityArg.outcome) {
+    case 'succeeded':
+      return 'var(--idp-ok)';
+    case 'denied':
+      return 'var(--idp-warn)';
+    case 'failed':
+      return 'var(--idp-error)';
+    case 'attempted':
+      return 'var(--idp-info)';
+  }
+};

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

@@ -10,7 +10,17 @@ import './idp-admin-sidebar.js';
 import './idp-admin-overview.js';
 import './idp-sso-connection-form.js';
 import './idp-scim-token-panel.js';
-import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
+import {
+  idpAdminSharedStyles,
+  renderAdminKpi,
+  renderAdminStateCard,
+  formatAdminTimeAgo,
+  formatAdminActivityTitle,
+  formatAdminActivityDetail,
+  getAdminActivityTone,
+  type TIdpAdminActivity,
+  type TIdpAdminKpi,
+} from './idp-admin-shared.js';
 import type { IIdpDelegation, IIdpDelegationApp } from './idp-delegation-section.js';
 import type { IIdpSsoConnectionItem, IIdpSsoSpDetails } from './idp-sso-connection-form.js';
 import type { IIdpScimTokenItem } from './idp-scim-token-panel.js';
@@ -199,15 +209,6 @@ export interface IIdpAdminSession {
   isCurrent: boolean;
 }
 
-export interface IIdpAdminActivity {
-  id: string;
-  action: string;
-  description: string;
-  timestamp: number;
-  ip?: string;
-  targetType?: string;
-}
-
 export interface IIdpAdminApp {
   id: string;
   name: string;
@@ -1007,7 +1008,7 @@ export class IdpAdminShell extends DeesElement {
   public accessor sessions: IIdpAdminSession[] = [];
 
   @property({ type: Array })
-  public accessor activities: IIdpAdminActivity[] = [];
+  public accessor activities: TIdpAdminActivity[] = [];
 
   @property({ type: Array })
   public accessor orgMembers: IIdpAdminMember[] = [];
@@ -2422,14 +2423,10 @@ export class IdpAdminShell extends DeesElement {
     const org = this.currentOrg;
     const connectedAppCount = this.orgApps.filter((appArg) => appArg.isConnected).length;
     const orgActivities = this.activities
-      .filter((activityArg) => {
-        const searchableText = `${activityArg.targetType || ''} ${activityArg.description || ''}`.toLowerCase();
-        return Boolean(org.slug && searchableText.includes(org.slug.toLowerCase()))
-          || Boolean(org.name && searchableText.includes(org.name.toLowerCase()))
-          || searchableText.includes('org')
-          || searchableText.includes('organization')
-          || searchableText.includes('organisation');
-      })
+      .filter((activityArg) =>
+        activityArg.targetType === 'organization'
+        || activityArg.targetType.startsWith('organization_')
+      )
       .slice(0, 5);
     const kpis: TIdpAdminKpi[] = [
       {
@@ -2496,10 +2493,10 @@ export class IdpAdminShell extends DeesElement {
             </div>
           </div>
           <div class="card">
-            <div class="card-head"><span class="card-title">Recent organisation activity</span><idp-badge>${orgActivities.length} events</idp-badge></div>
+            <div class="card-head"><span class="card-title">Organisation-classified account activity</span><idp-badge>${orgActivities.length} events</idp-badge></div>
             ${orgActivities.length ? orgActivities.map((activityArg) => html`
-              <div class="feed-item"><span class="feed-dot" style="--dot-color:var(--idp-info)"></span><div class="feed-text"><strong>${activityArg.action.replace(/_/g, ' ')}</strong> - ${activityArg.description}</div><span class="feed-meta">${this.formatTimeAgo(activityArg.timestamp)}</span></div>
-            `) : this.renderStateCard('No org activity yet', 'Organisation-related activity will appear here when the backend reports matching activity events.', 'activity')}
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:${getAdminActivityTone(activityArg)}"></span><div class="feed-text"><strong>${formatAdminActivityTitle(activityArg)}</strong> - ${formatAdminActivityDetail(activityArg)}</div><span class="feed-meta">${this.formatTimeAgo(activityArg.timestamp)}</span></div>
+            `) : this.renderStateCard('No organisation activity yet', 'Account events with an organisation target classification will appear here without exposing target identities.', 'activity')}
           </div>
         </div>
       </div>