@idp.global/catalog 1.2.1 → 2.1.0

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

@@ -3,6 +3,13 @@ import { idpElementStyles } from './tokens.js';
 import './idp-badge.js';
 import './idp-icon.js';
 import './idp-data-table.js';
+import './idp-avatar.js';
+import './idp-toggle.js';
+import './idp-delegation-section.js';
+import './idp-admin-sidebar.js';
+import './idp-admin-overview.js';
+import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
+import type { IIdpDelegation, IIdpDelegationApp } from './idp-delegation-section.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,25 +17,6 @@ declare global {
   }
 }
 
-type TNavItem = {
-  id: TIdpAdminPage;
-  label: string;
-  icon: string;
-  badge?: string;
-};
-
-type TKpi = {
-  label: string;
-  value: string;
-  unit?: string;
-  delta: string;
-  deltaKind: 'up' | 'live';
-  sub: string;
-  accent: string;
-  spark: number[];
-  sparkColor: string;
-};
-
 export type TIdpAdminPage =
   | 'overview'
   | 'profile'
@@ -58,6 +46,10 @@ export interface IIdpAdminOrg {
   name: string;
   slug: string;
   myRole?: string;
+  plan?: string;
+  status?: string;
+  memberCount?: number;
+  createdAt?: number;
 }
 
 export interface IIdpAdminNavigateEventDetail {
@@ -69,6 +61,79 @@ export interface IIdpAdminOrgSelectEventDetail {
   org: IIdpAdminOrg | null;
 }
 
+export interface IIdpAdminLogoutEventDetail {
+  everywhere: boolean;
+}
+
+export interface IIdpAdminAccountSwitchEventDetail {
+  account: IIdpAdminUser;
+}
+
+export interface IIdpAdminOrgCreateEventDetail {
+  name: string;
+  slug: string;
+}
+
+export interface IIdpAdminGaUser {
+  id: string;
+  name: string;
+  email: string;
+  status: string;
+  isGlobalAdmin: boolean;
+  orgCount: number;
+  createdAt: number;
+}
+
+export interface IIdpAdminGaUserActionEventDetail {
+  userId: string;
+  action: 'suspend' | 'unsuspend';
+}
+
+export interface IIdpAdminGaOrgActionEventDetail {
+  orgId: string;
+  action: 'suspend' | 'unsuspend';
+}
+
+export interface IIdpAdminGaAppActionEventDetail {
+  appId: string;
+  action: 'approve' | 'reject' | 'suspend' | 'reinstate';
+}
+
+export interface IIdpAdminOverviewSeriesPoint {
+  /** epoch-ms timestamp or Date-parseable string; plain clock times like '14:00' are not chartable */
+  x: string | number;
+  y: number;
+}
+
+export interface IIdpAdminOverviewThreat {
+  severity: 'error' | 'warning' | 'info';
+  title: string;
+  meta: string;
+  action?: string;
+}
+
+export interface IIdpAdminOverviewRegion {
+  name: string;
+  code: string;
+  count: number;
+  share: number;
+  kind?: 'home' | 'risk';
+}
+
+export interface IIdpAdminOverviewFeedItem {
+  tone: 'ok' | 'info' | 'warn' | 'error';
+  text: string;
+  meta: string;
+}
+
+export interface IIdpAdminOverviewData {
+  chartLabel?: string;
+  chartSeries?: { name: string; data: IIdpAdminOverviewSeriesPoint[] }[];
+  threats?: IIdpAdminOverviewThreat[];
+  regions?: IIdpAdminOverviewRegion[];
+  feed?: IIdpAdminOverviewFeedItem[];
+}
+
 export interface IIdpAdminSession {
   id: string;
   deviceName: string;
@@ -274,11 +339,95 @@ export interface IIdpAdminPasskeyEventDetail {
 
 @customElement('idp-admin-shell')
 export class IdpAdminShell extends DeesElement {
-  public static demo = () => html`<idp-admin-shell global-admin></idp-admin-shell>`;
-  public static demoGroups = ['idp.global v3 full pages'];
+  public static demo = () => {
+    const now = Date.now();
+    const hours = Array.from({ length: 24 }, (unused, indexArg) => indexArg);
+    return html`
+      <idp-admin-shell
+        global-admin
+        .user=${{ name: 'Alex Mercer', email: 'alex@lossless.com' }}
+        .accounts=${[
+          { name: 'Alex Mercer', email: 'alex.mercer@gmail.com' },
+        ]}
+        .orgs=${[
+          { id: 'org_foss', name: 'Lossless GmbH', slug: 'lossless', myRole: 'owner', plan: 'Pro', status: 'active', memberCount: 5, createdAt: now - 86400000 * 200 },
+          { id: 'org_task', name: 'Task VC', slug: 'task', myRole: 'admin', plan: 'Pro', status: 'active', memberCount: 3, createdAt: now - 86400000 * 140 },
+          { id: 'org_sus', name: 'Suspended Co.', slug: 'suspended', myRole: 'viewer', plan: 'Pro', status: 'suspended', memberCount: 2, createdAt: now - 86400000 * 80 },
+        ]}
+        .sessions=${[
+          { id: 's1', deviceName: 'MacBook Pro', browser: 'Safari 18', os: 'macOS', ip: '84.132.10.4', lastActive: now - 120000, createdAt: now - 86400000 * 3, isCurrent: true },
+          { 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 },
+          { id: 's3', deviceName: 'Work laptop', browser: 'Chrome 132', os: 'Windows 11', ip: '13.48.2.1', lastActive: now - 86400000, createdAt: now - 86400000 * 30, isCurrent: false },
+        ]}
+        .gaUsers=${[
+          { id: 'u01', name: 'Alex Mercer', email: 'alex@lossless.com', status: 'active', isGlobalAdmin: true, orgCount: 2, createdAt: now - 86400000 * 200 },
+          { id: 'u02', name: 'Jordan Kim', email: 'jordan@lossless.com', status: 'active', isGlobalAdmin: false, orgCount: 1, createdAt: now - 86400000 * 100 },
+          { id: 'u05', name: 'Dana Walsh', email: 'dana@suspended.de', status: 'suspended', isGlobalAdmin: false, orgCount: 0, createdAt: now - 86400000 * 60 },
+          { id: 'u06', name: 'Morgan Lee', email: 'morgan@newuser.com', status: 'new', isGlobalAdmin: false, orgCount: 0, createdAt: now - 86400000 },
+        ]}
+        .adminApps=${[
+          { id: 'app_foss', name: 'foss.global', type: 'global', category: 'Productivity', status: 'active' },
+          { id: 'app_p1', name: 'Acme HR Portal', type: 'partner', category: 'HR', connectionCount: 412, status: 'approved' },
+          { id: 'app_p2', name: 'DevOps Suite', type: 'partner', category: 'DevOps', connectionCount: 87, status: 'pending_review' },
+        ]}
+        .overviewData=${{
+          chartLabel: 'Approval activity',
+          chartSeries: [
+            { name: 'Approvals', data: hours.map((hourArg) => ({ x: now - (23 - hourArg) * 3600000, y: [22, 18, 14, 10, 8, 7, 9, 14, 22, 38, 52, 64, 71, 74, 70, 65, 58, 52, 45, 38, 32, 28, 25, 23][hourArg] })) },
+            { name: 'OAuth grants', data: hours.map((hourArg) => ({ x: now - (23 - hourArg) * 3600000, y: [16, 12, 9, 7, 6, 5, 7, 11, 18, 30, 42, 50, 56, 58, 56, 52, 47, 41, 36, 30, 26, 23, 20, 18][hourArg] })) },
+          ],
+          threats: [
+            { severity: 'error', title: 'Repeated denied logins', meta: '5 attempts · Lagos, NG · last 1h', action: 'Block IP' },
+            { severity: 'warning', title: 'Stale device key', meta: 'sam@ · Apple Watch · 9 mo old', action: 'Rotate' },
+            { severity: 'info', title: 'Pending key rotations', meta: '3 identities · Cardano awaiting', action: 'Run' },
+          ],
+          regions: [
+            { name: 'Berlin, DE', code: 'DE', count: 1284, share: 1, kind: 'home' },
+            { name: 'Amsterdam, NL', code: 'NL', count: 642, share: 0.5 },
+            { name: 'San Francisco, US', code: 'US', count: 521, share: 0.41 },
+            { name: 'Lagos, NG', code: 'NG', count: 12, share: 0.01, kind: 'risk' },
+          ],
+          feed: [
+            { tone: 'info', text: 'Identity created · did:idp:0x9b12…f034', meta: 'block #9 841 222' },
+            { tone: 'ok', text: 'Anchor confirmed · 12 blocks deep', meta: '2m' },
+            { tone: 'warn', text: 'Device registered · MacBook Pro · pending', meta: '7m' },
+          ],
+        }}
+        .delegationApps=${[
+          {
+            id: 'foss',
+            name: 'foss.global',
+            perms: [
+              { id: 'projects:read', label: 'View projects', hint: 'Read-only access to your projects' },
+              { id: 'projects:write', label: 'Manage projects', hint: 'Create, edit and archive projects' },
+            ],
+          },
+          {
+            id: 'task',
+            name: 'task.vc',
+            perms: [
+              { id: 'tasks:read', label: 'View tasks', hint: 'See your tasks and boards' },
+              { id: 'tasks:write', label: 'Act on tasks', hint: 'Create, assign and complete tasks as you' },
+            ],
+          },
+        ]}
+        .delegations=${[
+          {
+            id: 'd1',
+            account: { name: 'Jordan Kim', email: 'jordan@lossless.com' },
+            grants: { task: ['tasks:read', 'tasks:write'] },
+            expiresAt: now + 86400000 * 24,
+            createdAt: now - 86400000 * 6,
+          },
+        ]}
+      ></idp-admin-shell>
+    `;
+  };
+  public static demoGroups = ['idp.global v5 full pages'];
 
   public static styles = [
     ...idpElementStyles,
+    idpAdminSharedStyles,
     css`
       :host {
         display: block;
@@ -297,78 +446,9 @@ export class IdpAdminShell extends DeesElement {
         border: 0;
         background: var(--idp-bg);
       }
-      .sidebar {
+      idp-admin-sidebar {
         height: 100%;
         min-height: 0;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        border-right: 1px solid var(--idp-border);
-        background: var(--idp-bg);
-      }
-      .logo-block {
-        padding: 14px 16px 10px;
-        border-bottom: 1px solid var(--idp-border);
-      }
-      .logo {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .logo-icon {
-        width: 26px;
-        height: 26px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        border-radius: 7px;
-        background: var(--idp-primary);
-        color: var(--idp-primary-fg);
-      }
-      .logo-text {
-        color: var(--idp-fg);
-        font-size: 13px;
-        font-weight: 700;
-        letter-spacing: -0.3px;
-      }
-      .nav-wrap {
-        flex: 1;
-        min-height: 0;
-        overflow: auto;
-        padding: 10px 8px;
-      }
-      .state-card {
-        padding: 42px 24px;
-        border: 1px solid var(--idp-border);
-        border-radius: var(--idp-radius);
-        background: var(--idp-card);
-        color: var(--idp-muted-fg);
-        text-align: center;
-      }
-      .state-icon {
-        width: 38px;
-        height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 12px;
-        border: 1px solid var(--idp-border);
-        border-radius: 10px;
-        background: var(--idp-muted);
-        color: var(--idp-muted-fg);
-      }
-      .state-title {
-        margin-bottom: 4px;
-        color: var(--idp-fg);
-        font-size: 14px;
-        font-weight: 600;
-      }
-      .state-description {
-        max-width: 420px;
-        margin: 0 auto;
-        font-size: 12px;
-        line-height: 1.5;
       }
       .notice-card {
         display: flex;
@@ -383,219 +463,48 @@ export class IdpAdminShell extends DeesElement {
       .notice-card .muted {
         color: var(--idp-muted-fg);
       }
-      .nav-section {
-        margin-bottom: 20px;
-      }
-      .nav-title {
-        padding: 0 8px;
-        margin-bottom: 4px;
-        color: var(--idp-muted-fg);
-        font-size: 10px;
-        font-weight: 600;
-        letter-spacing: 0.8px;
-        text-transform: uppercase;
-      }
-      .nav-list {
-        display: grid;
-      }
-      .nav-item,
-      .org-switch,
-      .plain-button {
-        border: 0;
-        font-family: inherit;
-      }
-      .nav-item {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 6px 8px;
-        border-radius: 7px;
-        background: transparent;
-        color: var(--idp-muted-fg);
-        font-size: 13px;
-        font-weight: 400;
-        text-align: left;
-      }
-      .nav-item.active {
-        background: var(--idp-muted);
-        color: var(--idp-fg);
-        font-weight: 500;
-      }
-      .nav-item idp-icon {
-        color: currentColor;
-      }
-      .nav-item.active idp-icon {
-        color: var(--idp-accent);
-      }
-      .org-switch-wrap {
-        position: relative;
-        margin-bottom: 2px;
-      }
-      .org-switch {
-        width: 100%;
+      .logout-everywhere-row {
         display: flex;
         align-items: center;
-        gap: 8px;
-        padding: 6px 8px;
-        border-radius: 7px;
-        background: transparent;
-        color: var(--idp-muted-fg);
-        cursor: pointer;
-      }
-      .org-switch:hover {
-        background: var(--idp-muted);
-      }
-      .org-switch.open {
-        background: var(--idp-muted);
-      }
-      .org-switch.open .org-name {
-        color: var(--idp-accent);
-      }
-      .org-switch.open idp-icon {
-        transform: rotate(180deg);
-      }
-      .org-menu {
-        position: absolute;
-        top: calc(100% + 4px);
-        left: 0;
-        right: 0;
-        z-index: 40;
-        overflow: hidden;
+        gap: 10px;
+        margin-top: 14px;
+        padding: 10px 12px;
         border: 1px solid var(--idp-border);
-        border-radius: 10px;
-        background: var(--idp-card);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-      }
-      .org-menu-title {
-        padding: 6px 8px 3px;
-        color: var(--idp-muted-fg);
-        font-size: 10px;
-        font-weight: 600;
-        letter-spacing: 0.7px;
-        text-transform: uppercase;
-      }
-      .org-menu-item,
-      .org-create {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        border: 0;
-        background: transparent;
-        font-family: inherit;
-        text-align: left;
-      }
-      .org-menu-item {
-        padding: 6px 8px;
-        cursor: pointer;
-      }
-      .org-menu-item.selected {
-        background: var(--idp-accent-soft);
-      }
-      .org-menu-item .org-avatar {
-        width: 20px;
-        height: 20px;
-        font-size: 7px;
-      }
-      .org-menu-name {
-        overflow: hidden;
+        border-radius: 9px;
+        font-size: 12.5px;
         color: var(--idp-fg);
-        font-size: 12px;
-        font-weight: 400;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .org-menu-item.selected .org-menu-name {
-        color: var(--idp-accent);
-      }
-      .org-menu-role {
-        color: var(--idp-muted-fg);
-        font-size: 10px;
-      }
-      .org-menu-divider {
-        height: 1px;
-        margin: 3px 0;
-        background: var(--idp-border);
-      }
-      .org-create {
-        padding: 6px 8px 8px;
-        color: var(--idp-muted-fg);
         cursor: pointer;
-        font-size: 12px;
       }
-      .org-create-icon {
-        width: 20px;
-        height: 20px;
+      .toast {
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        z-index: 60;
         display: flex;
         align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        border: 1.5px dashed var(--idp-border);
-        border-radius: 5px;
-      }
-      .org-name {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        color: var(--idp-muted-fg);
+        gap: 10px;
+        max-width: 320px;
+        padding: 10px 14px;
+        border-radius: 9px;
+        border: 1px solid;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
         font-size: 13px;
-        font-weight: 400;
-        text-align: left;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .org-avatar,
-      .user-avatar {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        font-family: var(--idp-mono);
-        font-weight: 700;
-      }
-      .org-avatar {
-        width: 14px;
-        height: 14px;
-        border: 1px solid var(--idp-border);
-        border-radius: 6px;
-        background: var(--idp-accent-soft);
-        color: var(--idp-accent);
-        font-size: 5px;
-      }
-      .user-footer {
-        display: flex;
-        align-items: center;
-        gap: 9px;
-        padding: 10px 12px;
-        border-top: 1px solid var(--idp-border);
-      }
-      .user-avatar {
-        width: 26px;
-        height: 26px;
-        border-radius: 50%;
-        background: oklch(0.85 0.08 240);
-        color: oklch(0.3 0.08 240);
-        font-size: 9px;
-      }
-      .user-meta {
-        flex: 1;
-        min-width: 0;
+        font-weight: 500;
       }
-      .user-name,
-      .user-email {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+      .toast.ok {
+        background: var(--idp-ok-bg);
+        border-color: var(--idp-ok-border);
+        color: var(--idp-ok);
       }
-      .user-name {
-        color: var(--idp-fg);
-        font-size: 12px;
-        font-weight: 500;
+      .toast.warn {
+        background: var(--idp-warn-bg);
+        border-color: var(--idp-warn-border);
+        color: var(--idp-warn);
       }
-      .user-email {
-        color: var(--idp-muted-fg);
-        font-size: 10px;
+      .toast.error {
+        background: var(--idp-error-bg);
+        border-color: var(--idp-error-border);
+        color: var(--idp-error);
       }
       main {
         height: 100%;
@@ -604,146 +513,6 @@ export class IdpAdminShell extends DeesElement {
         overflow: auto;
         background: var(--idp-bg);
       }
-      .page-head {
-        display: flex;
-        align-items: flex-end;
-        justify-content: space-between;
-        gap: 16px;
-        flex-wrap: wrap;
-        padding: 24px 28px 18px;
-        border-bottom: 1px solid var(--idp-border);
-        background: var(--idp-bg);
-      }
-      .eyebrow-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 4px;
-      }
-      .eyebrow {
-        color: var(--idp-muted-fg);
-        font-family: var(--idp-mono);
-        font-size: 10px;
-        font-weight: 600;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-      .live-pill {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 1px 7px;
-        border: 1px solid var(--idp-ok-border);
-        border-radius: 999px;
-        background: var(--idp-ok-bg);
-        color: var(--idp-ok);
-        font-family: var(--idp-mono);
-        font-size: 10px;
-        font-weight: 500;
-      }
-      .live-dot,
-      .feed-dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: var(--idp-ok);
-        box-shadow: 0 0 6px var(--idp-ok);
-        animation: idp-blink 1.6s ease-in-out infinite;
-      }
-      @keyframes idp-blink {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.35; }
-      }
-      h1,
-      h2 {
-        margin: 0;
-        color: var(--idp-fg);
-        font-family: var(--idp-display);
-        letter-spacing: -0.025em;
-      }
-      h1 {
-        font-size: 26px;
-        font-weight: 700;
-        line-height: 1.1;
-      }
-      .lead {
-        margin-top: 4px;
-        color: var(--idp-muted-fg);
-        font-size: 13px;
-      }
-      .lead code,
-      .mono {
-        color: var(--idp-info);
-        font-family: var(--idp-mono);
-      }
-      .page-actions {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-      .tabs {
-        display: inline-flex;
-        gap: 1px;
-        padding: 2px;
-        border: 1px solid var(--idp-border);
-        border-radius: 6px;
-        background: var(--idp-bg-2);
-      }
-      .tab {
-        padding: 4px 10px;
-        border-radius: 4px;
-        color: var(--idp-muted-fg);
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        font-weight: 500;
-      }
-      .tab.active {
-        background: var(--idp-muted);
-        color: var(--idp-fg);
-      }
-      .plain-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        height: 28px;
-        padding: 5px 10px;
-        border-radius: 8px;
-        background: transparent;
-        color: var(--idp-fg);
-        font-size: 12px;
-        font-weight: 500;
-        white-space: nowrap;
-      }
-      .plain-button.outline {
-        border: 1px solid var(--idp-border);
-      }
-      .plain-button.primary {
-        background: var(--idp-accent);
-        color: var(--idp-accent-fg);
-      }
-      .plain-button.destructive {
-        background: var(--idp-destructive);
-        color: var(--idp-accent-fg);
-      }
-      .plain-button.ghost {
-        color: var(--idp-fg);
-      }
-      .plain-button:disabled {
-        opacity: 0.45;
-        cursor: not-allowed;
-      }
-      .body {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        padding: 20px 28px 32px;
-      }
-      .narrow-body {
-        max-width: 700px;
-      }
-      .wide-body {
-        max-width: 860px;
-      }
       .section-card {
         margin-bottom: 16px;
         padding: 20px;
@@ -913,183 +682,54 @@ export class IdpAdminShell extends DeesElement {
       }
       .split-row {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-      }
-      .chip-row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-      }
-      .switch {
-        width: 36px;
-        height: 20px;
-        position: relative;
-        flex-shrink: 0;
-        border-radius: 10px;
-        background: var(--idp-accent);
-      }
-      .switch::after {
-        content: '';
-        position: absolute;
-        top: 2px;
-        left: 18px;
-        width: 16px;
-        height: 16px;
-        border-radius: 8px;
-        background: #fff;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-      }
-      .sub-tabs {
-        width: fit-content;
-        display: flex;
-        gap: 2px;
-        margin-bottom: 16px;
-        padding: 3px;
-        border-radius: 8px;
-        background: var(--idp-muted);
-      }
-      .sub-tab {
-        padding: 5px 12px;
-        border-radius: 6px;
-        color: var(--idp-muted-fg);
-        font-size: 12px;
-      }
-      .sub-tab.active {
-        background: var(--idp-bg);
-        color: var(--idp-fg);
-        font-weight: 500;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-      }
-      .kpis {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 12px;
-      }
-      .kpi,
-      .card {
-        border: 1px solid var(--idp-border);
-        background: var(--idp-card);
-      }
-      .kpi {
-        position: relative;
-        min-height: 132px;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        overflow: hidden;
-        padding: 18px 20px 14px;
-        border-radius: 10px;
-      }
-      .kpi::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 2px;
-        background: var(--kpi-accent);
-      }
-      .kpi-label {
-        color: var(--idp-muted-fg);
-        font-size: 11.5px;
-        font-weight: 500;
-        letter-spacing: 0.02em;
-      }
-      .kpi-value {
-        color: var(--idp-fg);
-        font-family: var(--idp-display);
-        font-size: 30px;
-        font-weight: 700;
-        font-variant-numeric: tabular-nums;
-        letter-spacing: -0.025em;
-        line-height: 1.1;
-      }
-      .kpi-value span {
-        margin-left: 2px;
-        color: var(--idp-muted-fg);
-        font-size: 14px;
-        font-weight: 500;
-      }
-      .kpi-sub {
-        color: var(--idp-fg-3);
-        font-family: var(--idp-mono);
-        font-size: 11px;
-      }
-      .kpi-foot {
-        display: flex;
-        align-items: flex-end;
+        align-items: center;
         justify-content: space-between;
-        gap: 8px;
-        margin-top: auto;
+        gap: 16px;
       }
-      .delta {
-        display: inline-flex;
-        align-items: center;
+      .chip-row {
+        display: flex;
+        flex-wrap: wrap;
         gap: 4px;
-        color: var(--idp-ok);
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        font-weight: 600;
       }
-      .sparkline {
-        width: 84px;
-        opacity: 0.85;
-      }
-      .primary-grid,
-      .secondary-grid {
-        display: grid;
-        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
-        gap: 16px;
+      .switch {
+        width: 36px;
+        height: 20px;
+        position: relative;
+        flex-shrink: 0;
+        border-radius: 10px;
+        background: var(--idp-accent);
       }
-      .card {
-        overflow: hidden;
+      .switch::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 18px;
+        width: 16px;
+        height: 16px;
         border-radius: 8px;
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
       }
-      .card-head {
+      .sub-tabs {
+        width: fit-content;
         display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 12px 16px;
-        border-bottom: 1px solid var(--idp-border-soft);
-      }
-      .card-title {
-        color: var(--idp-fg);
-        font-size: 13px;
-        font-weight: 600;
-      }
-      .feed-dot {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 4px;
-        background: var(--dot-color);
-        box-shadow: var(--dot-glow, none);
+        gap: 2px;
+        margin-bottom: 16px;
+        padding: 3px;
+        border-radius: 8px;
+        background: var(--idp-muted);
       }
-      .feed-meta {
+      .sub-tab {
+        padding: 5px 12px;
+        border-radius: 6px;
         color: var(--idp-muted-fg);
-        font-family: var(--idp-mono);
-        font-size: 11.5px;
-      }
-      .feed-item {
-        display: grid;
-        grid-template-columns: 14px 1fr auto;
-        gap: 12px;
-        align-items: center;
-        padding: 11px 16px;
-        border-bottom: 1px solid var(--idp-border-soft);
-      }
-      .feed-item:last-child {
-        border-bottom: 0;
-      }
-      .feed-text {
-        color: var(--idp-fg-2);
-        font-size: 12.5px;
+        font-size: 12px;
       }
-      .feed-text strong {
+      .sub-tab.active {
+        background: var(--idp-bg);
         color: var(--idp-fg);
-        font-weight: 600;
+        font-weight: 500;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
       }
       .dialog-backdrop {
         position: fixed;
@@ -1190,29 +830,11 @@ export class IdpAdminShell extends DeesElement {
         .shell {
           grid-template-columns: 1fr;
         }
-        .sidebar {
+        idp-admin-sidebar {
           display: none;
         }
-        .kpis {
-          grid-template-columns: repeat(2, 1fr);
-        }
-        .primary-grid,
-        .secondary-grid {
-          grid-template-columns: 1fr;
-        }
       }
       @media (max-width: 720px) {
-        .page-head,
-        .body {
-          padding-left: 20px;
-          padding-right: 20px;
-        }
-        .page-actions {
-          flex-wrap: wrap;
-        }
-        .kpis {
-          grid-template-columns: 1fr;
-        }
         .mapping-row {
           grid-template-columns: 1fr;
         }
@@ -1289,8 +911,37 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: String, attribute: 'credential-message' })
   public accessor credentialMessage = '';
 
+  @property({ type: Array })
+  public accessor accounts: IIdpAdminUser[] = [];
+
+  @property({ type: Array })
+  public accessor gaUsers: IIdpAdminGaUser[] = [];
+
+  @property({ type: Object })
+  public accessor overviewData: IIdpAdminOverviewData | null = null;
+
+  @property({ type: Array })
+  public accessor delegationApps: IIdpDelegationApp[] = [];
+
+  @property({ type: Array })
+  public accessor delegations: IIdpDelegation[] = [];
+
+  @state()
+  private accessor logoutEverywhere = false;
+
+  @state()
+  private accessor createOrgName = '';
+
+  @state()
+  private accessor createOrgSlug = '';
+
+  @state()
+  private accessor gaUserSearch = '';
+
   @state()
-  private accessor orgMenuOpen = false;
+  private accessor toast: { message: string; tone: 'ok' | 'warn' | 'error' } | null = null;
+
+  private toastTimer: ReturnType<typeof setTimeout> | null = null;
 
   @state()
   private accessor currentPassword = '';
@@ -1329,7 +980,7 @@ export class IdpAdminShell extends DeesElement {
   private accessor orgSettingsError = '';
 
   @state()
-  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' = 'none';
+  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' | 'create-org' | 'logout-confirm' = 'none';
 
   @state()
   private accessor dialogError = '';
@@ -1358,34 +1009,6 @@ export class IdpAdminShell extends DeesElement {
   @state()
   private accessor dialogAppMappings: IIdpAdminAppRoleMapping[] = [];
 
-  private workspaceNav: TNavItem[] = [
-    { id: 'overview', label: 'Overview', icon: 'grid' },
-  ];
-
-  private accountNav: TNavItem[] = [
-    { id: 'profile', label: 'Profile', icon: 'user' },
-    { id: 'security', label: 'Security', icon: 'shield' },
-    { id: 'sessions', label: 'Sessions & Devices', icon: 'monitor' },
-    { id: 'apps', label: 'Connected Apps', icon: 'grid' },
-  ];
-
-  private orgNav: TNavItem[] = [
-    { id: 'org-general', label: 'General', icon: 'building' },
-    { id: 'org-settings', label: 'Settings', icon: 'settings' },
-    { id: 'org-members', label: 'Members', icon: 'users' },
-    { id: 'org-apps', label: 'OAuth Apps', icon: 'box' },
-  ];
-
-  private supportNav: TNavItem[] = [
-    { id: 'support', label: 'Support', icon: 'shield' },
-  ];
-
-  private adminNav: TNavItem[] = [
-    { id: 'ga-users', label: 'All Users', icon: 'users' },
-    { id: 'ga-orgs', label: 'All Organisations', icon: 'building' },
-    { id: 'ga-apps', label: 'Platform Apps', icon: 'globe' },
-  ];
-
   private get safeOrgs(): IIdpAdminOrg[] {
     return Array.isArray(this.orgs) ? this.orgs.filter(Boolean) : [];
   }
@@ -1617,7 +1240,6 @@ export class IdpAdminShell extends DeesElement {
 
   private setPage(pageArg: TIdpAdminPage) {
     this.page = pageArg;
-    this.orgMenuOpen = false;
     this.dispatchEvent(new CustomEvent<IIdpAdminNavigateEventDetail>('idp-admin-navigate', {
       detail: { page: pageArg },
       bubbles: true,
@@ -1625,26 +1247,76 @@ export class IdpAdminShell extends DeesElement {
     }));
   }
 
-  private selectOrg(orgIdArg: string) {
-    this.selectedOrgId = orgIdArg;
-    this.orgMenuOpen = false;
+  private handleSidebarNavigate(eventArg: CustomEvent<IIdpAdminNavigateEventDetail>) {
+    this.page = eventArg.detail.page;
+  }
+
+  private handleSidebarOrgSelect(eventArg: CustomEvent<IIdpAdminOrgSelectEventDetail>) {
+    this.selectedOrgId = eventArg.detail.orgId;
     this.page = 'org-general';
-    this.dispatchEvent(new CustomEvent<IIdpAdminOrgSelectEventDetail>('idp-admin-org-select', {
-      detail: {
-        orgId: orgIdArg,
-        org: this.orgs.find((orgArg) => orgArg.id === orgIdArg) || null,
-      },
-      bubbles: true,
-      composed: true,
-    }));
   }
 
   private requestOrgCreate() {
-    this.orgMenuOpen = false;
-    this.dispatchEvent(new CustomEvent('idp-admin-org-create', {
-      bubbles: true,
-      composed: true,
-    }));
+    this.createOrgName = '';
+    this.createOrgSlug = '';
+    this.dialogError = '';
+    this.dialogMode = 'create-org';
+  }
+
+  private slugify(valueArg: string): string {
+    return valueArg
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+
+  private setCreateOrgName(eventArg: Event) {
+    const value = (eventArg.target as HTMLInputElement).value;
+    this.createOrgName = value;
+    this.createOrgSlug = this.slugify(value);
+  }
+
+  private submitCreateOrg() {
+    if (!this.createOrgName.trim()) {
+      this.dialogError = 'Enter an organisation name.';
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminOrgCreateEventDetail>('idp-admin-org-create', {
+      name: this.createOrgName.trim(),
+      slug: this.createOrgSlug || this.slugify(this.createOrgName),
+    });
+    this.closeDialog();
+  }
+
+  private requestLogout() {
+    this.logoutEverywhere = false;
+    this.dialogMode = 'logout-confirm';
+  }
+
+  private confirmLogout() {
+    const everywhere = this.logoutEverywhere;
+    this.closeDialog();
+    this.dispatchShellEvent<IIdpAdminLogoutEventDetail>('idp-admin-logout', { everywhere });
+  }
+
+  public showToast(messageArg: string, toneArg: 'ok' | 'warn' | 'error' = 'ok') {
+    this.toast = { message: messageArg, tone: toneArg };
+    if (this.toastTimer) {
+      clearTimeout(this.toastTimer);
+    }
+    this.toastTimer = setTimeout(() => {
+      this.toast = null;
+      this.toastTimer = null;
+    }, 3000);
+  }
+
+  public override async disconnectedCallback() {
+    if (this.toastTimer) {
+      clearTimeout(this.toastTimer);
+      this.toastTimer = null;
+    }
+    await super.disconnectedCallback();
   }
 
   private dispatchShellEvent<TDetail>(eventNameArg: string, detailArg: TDetail) {
@@ -1656,30 +1328,11 @@ export class IdpAdminShell extends DeesElement {
   }
 
   private formatTimeAgo(timestampArg?: number): string {
-    if (!timestampArg) {
-      return 'unknown';
-    }
-
-    const diff = Date.now() - timestampArg;
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
-
-    if (minutes < 1) return 'just now';
-    if (minutes < 60) return `${minutes}m ago`;
-    if (hours < 24) return `${hours}h ago`;
-    if (days < 7) return `${days}d ago`;
-    return new Date(timestampArg).toLocaleDateString();
+    return formatAdminTimeAgo(timestampArg);
   }
 
   private renderStateCard(titleArg: string, descriptionArg: string, iconArg = 'box'): TemplateResult {
-    return html`
-      <div class="state-card">
-        <span class="state-icon"><idp-icon name=${iconArg as any} size="17"></idp-icon></span>
-        <div class="state-title">${titleArg}</div>
-        <div class="state-description">${descriptionArg}</div>
-      </div>
-    `;
+    return renderAdminStateCard(titleArg, descriptionArg, iconArg);
   }
 
   private renderDataState(emptyTitleArg: string, emptyDescriptionArg: string, iconArg = 'box'): TemplateResult | null {
@@ -1995,121 +1648,66 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
-  private renderDialog(): TemplateResult {
-    if (this.dialogMode === 'none') {
-      return html``;
-    }
-
-    const dialog = this.dialogMode === 'role-upsert'
-      ? this.renderRoleUpsertDialog()
-      : this.dialogMode === 'role-delete'
-        ? this.renderRoleDeleteDialog()
-        : this.dialogMode === 'member-roles'
-          ? this.renderMemberRolesDialog()
-          : this.renderAppRoleMappingsDialog();
-    return html`<div class="dialog-backdrop" @click=${() => this.closeDialog()}>${dialog}</div>`;
-  }
-
-  private renderNavGroup(items: TNavItem[], active = ''): TemplateResult {
+  private renderCreateOrgDialog(): TemplateResult {
     return html`
-      <div class="nav-list">
-        ${items.map((item) => html`
-          <button class="nav-item ${item.id === active ? 'active' : ''}" @click=${() => this.setPage(item.id)}>
-            <idp-icon name=${item.icon as any} size="14"></idp-icon>
-            ${item.label}
-            ${item.badge ? html`<idp-badge variant="accent" style="margin-left:auto">${item.badge}</idp-badge>` : html``}
-          </button>
-        `)}
+      <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Create organisation</div><div class="muted">Organisations group members, roles, and OAuth apps.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          ${this.renderFormRow('Organisation name', 'Shown to members and in app consent screens.', html`<input class="input" placeholder="Acme Corp" .value=${this.createOrgName} @input=${(eventArg: Event) => this.setCreateOrgName(eventArg)} />`, true)}
+          ${this.renderFormRow('URL slug', 'Public identifier under idp.global/', html`<input class="input" placeholder="acme-corp" .value=${this.createOrgSlug} @input=${(eventArg: Event) => { this.createOrgSlug = this.slugify((eventArg.target as HTMLInputElement).value); }} />`)}
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button primary" ?disabled=${!this.createOrgName.trim()} @click=${() => this.submitCreateOrg()}>Create</button>
+        </div>
       </div>
     `;
   }
 
-  private renderSidebar(): TemplateResult {
-    const currentOrg = this.currentOrg;
+  private renderLogoutConfirmDialog(): TemplateResult {
+    const otherSessionCount = this.sessions.filter((sessionArg) => !sessionArg.isCurrent).length;
     return html`
-      <aside class="sidebar">
-        <div class="logo-block">
-          <div class="logo">
-            <div class="logo-icon" aria-hidden="true">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
-              </svg>
-            </div>
-            <span class="logo-text">idp.global</span>
-          </div>
+      <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Sign out?</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
         </div>
-        <div class="nav-wrap">
-          <div class="nav-section"><div class="nav-title">Workspace</div>${this.renderNavGroup(this.workspaceNav, this.page)}</div>
-          <div class="nav-section"><div class="nav-title">My Account</div>${this.renderNavGroup(this.accountNav, this.page)}</div>
-          <div class="nav-section">
-            <div class="nav-title">Organisation</div>
-            <div class="org-switch-wrap">
-              <button class="org-switch ${this.orgMenuOpen ? 'open' : ''}" @click=${() => { this.orgMenuOpen = !this.orgMenuOpen; }}>
-                <span class="org-avatar">${currentOrg.name.slice(0, 2).toUpperCase()}</span>
-                <span class="org-name">${currentOrg.name}</span>
-                <idp-icon name="chevron-down" size="10"></idp-icon>
-              </button>
-              ${this.orgMenuOpen ? html`
-                <div class="org-menu">
-                  <div class="org-menu-title">Switch organisation</div>
-                  ${this.safeOrgs.map((orgArg) => html`
-                    <button class="org-menu-item ${orgArg.id === this.selectedOrgId ? 'selected' : ''}" @click=${() => this.selectOrg(orgArg.id)}>
-                      <span class="org-avatar">${orgArg.name.slice(0, 2).toUpperCase()}</span>
-                      <span style="flex:1;min-width:0"><span class="org-menu-name">${orgArg.name}</span><span class="org-menu-role">${orgArg.myRole || 'member'}</span></span>
-                      ${orgArg.id === this.selectedOrgId ? html`<idp-icon name="check" size="11"></idp-icon>` : html``}
-                    </button>
-                  `)}
-                  <div class="org-menu-divider"></div>
-                  <button class="org-create" @click=${() => this.requestOrgCreate()}><span class="org-create-icon"><idp-icon name="plus" size="9"></idp-icon></span>Create organisation</button>
-                </div>
-              ` : html``}
-            </div>
-            ${this.renderNavGroup(this.orgNav, this.page)}
-          </div>
-          <div class="nav-section"><div class="nav-title">Support</div>${this.renderNavGroup(this.supportNav, this.page)}</div>
-          ${this.globalAdmin ? html`<div class="nav-section"><div class="nav-title">Global Admin</div>${this.renderNavGroup(this.adminNav, this.page)}</div>` : html``}
+        <div class="dialog-body">
+          <div class="muted">You'll be signed out of idp.global on this device. Apps you've signed into with idp.global keep their own sessions.</div>
+          <label class="logout-everywhere-row">
+            <idp-toggle .checked=${this.logoutEverywhere} @idp-toggle-change=${(eventArg: CustomEvent) => { this.logoutEverywhere = !!eventArg.detail?.checked; }}></idp-toggle>
+            <span>Also sign out of all other devices${otherSessionCount ? html` <span class="muted">(${otherSessionCount} other ${otherSessionCount === 1 ? 'session' : 'sessions'})</span>` : html``}</span>
+          </label>
         </div>
-        <div class="user-footer">
-          <span class="user-avatar">${this.userInitials}</span>
-          <div class="user-meta"><div class="user-name">${this.user?.name || 'Unknown User'}</div><div class="user-email">${this.user?.email || 'No email'}</div></div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button destructive" @click=${() => this.confirmLogout()}>${this.logoutEverywhere ? 'Sign out everywhere' : 'Sign out'}</button>
         </div>
-      </aside>
+      </div>
     `;
   }
 
-  private renderSparkline(data: number[], color: string): TemplateResult {
-    const max = Math.max(...data);
-    const min = Math.min(...data);
-    const range = max - min || 1;
-    const width = 100;
-    const height = 22;
-    const points = data.map((valueArg, indexArg) => {
-      const x = (indexArg / (data.length - 1)) * width;
-      const y = height - ((valueArg - min) / range) * (height - 4) - 2;
-      return `${x},${y}`;
-    }).join(' ');
-    const area = `0,${height} ${points} ${width},${height}`;
-
-    return html`
-      <svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
-        <polygon points=${area} fill=${color} opacity="0.12"></polygon>
-        <polyline points=${points} fill="none" stroke=${color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polyline>
-      </svg>
-    `;
-  }
+  private renderDialog(): TemplateResult {
+    if (this.dialogMode === 'none') {
+      return html``;
+    }
 
-  private renderKpi(kpi: TKpi): TemplateResult {
-    return html`
-      <div class="kpi" style="--kpi-accent:${kpi.accent}">
-        <div class="kpi-label">${kpi.label}</div>
-        <div class="kpi-value">${kpi.value}${kpi.unit ? html`<span>${kpi.unit}</span>` : html``}</div>
-        <div class="kpi-sub">${kpi.sub}</div>
-        <div class="kpi-foot">
-          <span class="delta">${kpi.deltaKind === 'live' ? html`<span class="live-dot"></span>` : html``}${kpi.delta}</span>
-          <div class="sparkline">${this.renderSparkline(kpi.spark, kpi.sparkColor)}</div>
-        </div>
-      </div>
-    `;
+    const dialog = this.dialogMode === 'role-upsert'
+      ? this.renderRoleUpsertDialog()
+      : this.dialogMode === 'role-delete'
+        ? this.renderRoleDeleteDialog()
+        : this.dialogMode === 'member-roles'
+          ? this.renderMemberRolesDialog()
+          : this.dialogMode === 'create-org'
+            ? this.renderCreateOrgDialog()
+            : this.dialogMode === 'logout-confirm'
+              ? this.renderLogoutConfirmDialog()
+              : this.renderAppRoleMappingsDialog();
+    return html`<div class="dialog-backdrop" @click=${() => this.closeDialog()}>${dialog}</div>`;
   }
 
   private renderPageHeader(titleArg: string, descriptionArg: string, actionArg?: TemplateResult): TemplateResult {
@@ -2149,78 +1747,17 @@ export class IdpAdminShell extends DeesElement {
   }
 
   private renderOverview(): TemplateResult {
-    const firstName = this.user?.name?.split(' ')[0] || 'there';
-    const activeSessionCount = this.sessions.filter((sessionArg) => sessionArg.isCurrent).length || this.sessions.length;
-    const activePassportCount = this.passportDevices.filter((deviceArg) => deviceArg.status === 'active').length;
-    const kpis: TKpi[] = [
-      {
-        label: 'Organisations',
-        value: String(this.orgs.length),
-        delta: 'live',
-        deltaKind: 'live',
-        spark: [1, 1, 1, 1, 1, 1, 1, Math.max(this.orgs.length, 1)],
-        sparkColor: 'var(--idp-spark-info)',
-        accent: 'var(--idp-chart-1)',
-        sub: 'Memberships visible to this account',
-      },
-      {
-        label: 'Sessions',
-        value: String(this.sessions.length),
-        delta: `${activeSessionCount} active`,
-        deltaKind: 'up',
-        spark: [1, 2, 1, 2, 3, 2, Math.max(this.sessions.length, 1)],
-        sparkColor: 'var(--idp-spark-up)',
-        accent: 'var(--idp-chart-2)',
-        sub: this.sessions.length ? `Latest ${this.formatTimeAgo(Math.max(...this.sessions.map((sessionArg) => sessionArg.lastActive)))}` : 'No active sessions loaded',
-      },
-      {
-        label: 'Passport devices',
-        value: String(this.passportDevices.length),
-        delta: `${activePassportCount} active`,
-        deltaKind: 'live',
-        spark: [1, 1, 1, Math.max(this.passportDevices.length, 1)],
-        sparkColor: 'var(--idp-spark-info)',
-        accent: 'var(--idp-chart-5)',
-        sub: 'Cryptographic credentials',
-      },
-      {
-        label: 'Activity',
-        value: String(this.activities.length),
-        delta: 'live',
-        deltaKind: 'live',
-        spark: [1, 2, 2, 3, Math.max(this.activities.length, 1)],
-        sparkColor: 'var(--idp-spark-info)',
-        accent: 'var(--idp-info)',
-        sub: 'Recent account events',
-      },
-    ];
     return html`
-      <header class="page-head">
-        <div>
-          <div class="eyebrow-row"><span class="eyebrow">Account - Overview</span><span class="live-pill"><span class="live-dot"></span>live</span></div>
-          <h1>Good morning, ${firstName}.</h1>
-          <div class="lead">Account-wide operational snapshot using live identity data.</div>
-        </div>
-        <div class="page-actions"><button class="plain-button outline" @click=${() => this.setPage('sessions')}>Review sessions</button><button class="plain-button primary" @click=${() => this.setPage('security')}>Manage security</button></div>
-      </header>
-      <div class="body">
-        <div class="kpis">${kpis.map((kpiArg) => this.renderKpi(kpiArg))}</div>
-        ${this.dataLoading || this.dataError ? this.renderDataState('No overview data', 'The console has not received live account data yet.', 'activity') : html``}
-        <div class="primary-grid">
-          <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">${this.formatTimeAgo(activityArg.timestamp)}</span></div>
-            `) : this.renderStateCard('No activity yet', 'Activity events will appear here after logins, app changes, and organisation updates.', 'activity')}
-          </div>
-          <div class="card">
-            <div class="card-head"><span class="card-title">Current sessions</span><idp-badge>${this.sessions.length} total</idp-badge></div>
-            ${this.sessions.length ? this.sessions.slice(0, 5).map((sessionArg) => html`
-              <div class="feed-item"><span class="feed-dot" style="--dot-color:${sessionArg.isCurrent ? 'var(--idp-ok)' : 'var(--idp-muted-fg)'}"></span><div class="feed-text"><strong>${sessionArg.deviceName || 'Unknown device'}</strong> - <span class="mono">${sessionArg.browser} ${sessionArg.os}</span></div><span class="feed-meta">${this.formatTimeAgo(sessionArg.lastActive)}</span></div>
-            `) : this.renderStateCard('No sessions loaded', 'Active session telemetry is unavailable or there are no sessions.', 'monitor')}
-          </div>
-        </div>
-      </div>
+      <idp-admin-overview
+        .user=${this.user}
+        .orgs=${this.orgs}
+        .sessions=${this.sessions}
+        .activities=${this.activities}
+        .passportDevices=${this.passportDevices}
+        .dataLoading=${this.dataLoading}
+        .dataError=${this.dataError}
+        .overviewData=${this.overviewData}
+      ></idp-admin-overview>
     `;
   }
 
@@ -2238,6 +1775,9 @@ export class IdpAdminShell extends DeesElement {
           ${this.renderFormRow('Mobile number', 'Used for SMS verification', html`<input class="input" .value=${this.user?.mobileNumber || ''} disabled />`)}
         `)}
         ${this.renderSectionCard('Account status', '', html`<div class="split-row"><div><div class="section-title">Status</div><div class="muted">Your account is currently ${status}.</div></div><idp-badge variant=${status === 'active' ? 'ok' : status === 'suspended' ? 'error' : 'warn'}>${status}</idp-badge></div>${this.globalAdmin ? html`<div class="divider"></div><div class="split-row"><div><div class="section-title">Global admin</div><div class="muted">You have platform-wide administrative access.</div></div><idp-badge variant="accent">Admin</idp-badge></div>` : html``}`)}
+        ${this.delegationApps.length
+          ? html`<idp-delegation-section .apps=${this.delegationApps} .delegations=${this.delegations}></idp-delegation-section>`
+          : html``}
       </div>
     `;
   }
@@ -2411,7 +1951,7 @@ export class IdpAdminShell extends DeesElement {
           || searchableText.includes('organisation');
       })
       .slice(0, 5);
-    const kpis: TKpi[] = [
+    const kpis: TIdpAdminKpi[] = [
       {
         label: 'Members',
         value: String(this.orgMembers.length),
@@ -2464,7 +2004,7 @@ export class IdpAdminShell extends DeesElement {
         <div class="page-actions"><button class="plain-button outline" @click=${() => this.setPage('org-members')}>Manage members</button><button class="plain-button primary" @click=${() => this.setPage('org-apps')}>Manage apps</button></div>
       </header>
       <div class="body">
-        <div class="kpis">${kpis.map((kpiArg) => this.renderKpi(kpiArg))}</div>
+        <div class="kpis">${kpis.map((kpiArg) => renderAdminKpi(kpiArg))}</div>
         ${this.dataLoading || this.dataError ? this.renderDataState('No organisation data', 'The console has not received live organisation data yet.', 'building') : html``}
         <div class="primary-grid">
           <div class="card">
@@ -2695,10 +2235,64 @@ export class IdpAdminShell extends DeesElement {
   }
 
   private renderGAUsers(): TemplateResult {
-    return html`${this.renderPageHeader('All Users', 'Platform-wide user administration.')}<div class="body wide-body">${this.renderDataState('User directory not connected', 'The shell is ready for global user data, but no platform user-list endpoint is wired into this app yet. No demo users are shown in production mode.', 'users')}</div>`;
+    if (!this.gaUsers.length) {
+      return html`${this.renderPageHeader('All Users', 'Platform-wide user administration.')}<div class="body wide-body">${this.renderDataState('User directory not connected', 'The shell is ready for global user data, but no platform user-list endpoint is wired into this app yet. No demo users are shown in production mode.', 'users')}</div>`;
+    }
+
+    const query = this.gaUserSearch.trim().toLowerCase();
+    const filtered = query
+      ? this.gaUsers.filter((userArg) => userArg.name.toLowerCase().includes(query) || userArg.email.toLowerCase().includes(query))
+      : this.gaUsers;
+    const statusVariant = (statusArg: string): 'ok' | 'error' | 'warn' | 'default' =>
+      statusArg === 'active' ? 'ok' : statusArg === 'suspended' ? 'error' : statusArg === 'new' ? 'warn' : 'default';
+    const userRows = filtered.map((userArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <idp-avatar name=${userArg.name || userArg.email} size="28"></idp-avatar>
+            <div>
+              <div class="identity-primary">${userArg.name}</div>
+              <div class="identity-secondary">${userArg.email}</div>
+            </div>
+          </div>
+        `,
+        String(userArg.orgCount),
+        html`<idp-badge variant=${statusVariant(userArg.status)}>${userArg.status}</idp-badge>`,
+        userArg.isGlobalAdmin ? html`<idp-badge variant="accent">Admin</idp-badge>` : '-',
+        this.formatTimeAgo(userArg.createdAt),
+        html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaUserActionEventDetail>('idp-admin-ga-user-action', { userId: userArg.id, action: userArg.status === 'suspended' ? 'unsuspend' : 'suspend' })}>${userArg.status === 'suspended' ? 'Unsuspend' : 'Suspend'}</button>`,
+      ],
+    }));
+
+    return html`
+      ${this.renderPageHeader('All Users', `${this.gaUsers.length} users on the platform`)}
+      <div class="body wide-body">
+        <div style="margin-bottom:12px;max-width:360px">
+          <input class="input" placeholder="Search users…" .value=${this.gaUserSearch} @input=${(eventArg: Event) => { this.gaUserSearch = (eventArg.target as HTMLInputElement).value; }} />
+        </div>
+        <idp-data-table
+          title="Users"
+          badge=${`${filtered.length} shown`}
+          empty-title="No matching users"
+          empty-description="No users match the current search."
+          .columns=${[
+            { label: 'User' },
+            { label: 'Orgs', mono: true, hideBelow: 'mobile' },
+            { label: 'Status' },
+            { label: 'Admin', hideBelow: 'mobile' },
+            { label: 'Joined', hideBelow: 'tablet' },
+            { label: '' },
+          ]}
+          .rows=${userRows}
+        ></idp-data-table>
+      </div>
+    `;
   }
 
   private renderGAOrgs(): TemplateResult {
+    const planVariant = (planArg: string): 'accent' | 'ok' | 'warn' | 'default' =>
+      planArg === 'Pro' ? 'accent' : planArg === 'Enterprise' ? 'ok' : planArg === 'Internal' ? 'warn' : 'default';
+    const hasAdminFields = this.orgs.some((orgArg) => orgArg.status || orgArg.plan);
     const orgRows = this.orgs.map((orgArg) => ({
       cells: [
         html`
@@ -2711,8 +2305,17 @@ export class IdpAdminShell extends DeesElement {
           </div>
         `,
         orgArg.slug || '-',
-        html`<idp-badge variant=${this.roleVariant(orgArg.myRole || 'member')}>${orgArg.myRole || 'member'}</idp-badge>`,
-        orgArg.id,
+        ...(hasAdminFields
+          ? [
+              orgArg.memberCount !== undefined ? String(orgArg.memberCount) : '-',
+              orgArg.plan ? html`<idp-badge variant=${planVariant(orgArg.plan)}>${orgArg.plan}</idp-badge>` : '-',
+              html`<idp-badge variant=${orgArg.status === 'suspended' ? 'error' : 'ok'}>${orgArg.status || 'active'}</idp-badge>`,
+              html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaOrgActionEventDetail>('idp-admin-ga-org-action', { orgId: orgArg.id, action: orgArg.status === 'suspended' ? 'unsuspend' : 'suspend' })}>${orgArg.status === 'suspended' ? 'Unsuspend' : 'Suspend'}</button>`,
+            ]
+          : [
+              html`<idp-badge variant=${this.roleVariant(orgArg.myRole || 'member')}>${orgArg.myRole || 'member'}</idp-badge>`,
+              orgArg.id,
+            ]),
       ],
     }));
 
@@ -2724,12 +2327,21 @@ export class IdpAdminShell extends DeesElement {
           badge=${`${this.orgs.length} total`}
           empty-title="No organisations"
           empty-description="No organisations are visible to this admin session."
-          .columns=${[
-            { label: 'Organisation' },
-            { label: 'Slug', mono: true, hideBelow: 'mobile' },
-            { label: 'Role' },
-            { label: 'Identifier', mono: true, hideBelow: 'tablet' },
-          ]}
+          .columns=${hasAdminFields
+            ? [
+                { label: 'Organisation' },
+                { label: 'Slug', mono: true, hideBelow: 'mobile' },
+                { label: 'Members', mono: true, hideBelow: 'mobile' },
+                { label: 'Plan' },
+                { label: 'Status' },
+                { label: '' },
+              ]
+            : [
+                { label: 'Organisation' },
+                { label: 'Slug', mono: true, hideBelow: 'mobile' },
+                { label: 'Role' },
+                { label: 'Identifier', mono: true, hideBelow: 'tablet' },
+              ]}
           .rows=${orgRows}
         ></idp-data-table>
       </div>
@@ -2752,7 +2364,15 @@ export class IdpAdminShell extends DeesElement {
         html`<idp-badge variant=${appArg.type === 'global' ? 'accent' : 'outline'}>${appArg.type || 'global'}</idp-badge>`,
         appArg.category || '-',
         appArg.connectionCount ?? '-',
-        html`<idp-badge variant=${appArg.status === 'suspended' ? 'error' : appArg.status === 'pending_review' ? 'warn' : 'ok'}>${appArg.status || 'active'}</idp-badge>`,
+        html`<idp-badge variant=${appArg.status === 'suspended' || appArg.status === 'rejected' ? 'error' : appArg.status === 'pending_review' ? 'warn' : 'ok'}>${(appArg.status || 'active').replace(/_/g, ' ')}</idp-badge>`,
+        appArg.status === 'pending_review'
+          ? html`
+              <div style="display:flex;gap:4px">
+                <button class="plain-button outline" style="font-size:11px;color:var(--idp-ok);border-color:var(--idp-ok-border)" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: 'approve' })}>Approve</button>
+                <button class="plain-button ghost" style="font-size:11px;color:var(--idp-destructive)" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: 'reject' })}>Reject</button>
+              </div>
+            `
+          : html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: appArg.status === 'suspended' ? 'reinstate' : 'suspend' })}>${appArg.status === 'suspended' ? 'Reinstate' : 'Suspend'}</button>`,
       ],
     }));
 
@@ -2770,6 +2390,7 @@ export class IdpAdminShell extends DeesElement {
             { label: 'Category', hideBelow: 'mobile' },
             { label: 'Connections', align: 'right', mono: true, hideBelow: 'mobile' },
             { label: 'Status' },
+            { label: '' },
           ]}
           .rows=${appRows}
         ></idp-data-table>
@@ -2798,11 +2419,33 @@ export class IdpAdminShell extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="shell">
-        ${this.renderSidebar()}
+      <div
+        class="shell"
+        @idp-admin-navigate=${this.handleSidebarNavigate}
+        @idp-admin-org-select=${this.handleSidebarOrgSelect}
+        @idp-admin-org-create-request=${this.requestOrgCreate}
+        @idp-admin-logout-request=${this.requestLogout}
+      >
+        <idp-admin-sidebar
+          .page=${this.page}
+          .user=${this.user}
+          .accounts=${this.accounts}
+          .orgs=${this.orgs}
+          .selectedOrgId=${this.selectedOrgId}
+          .globalAdmin=${this.globalAdmin}
+          .sessionCount=${this.sessions.length}
+        ></idp-admin-sidebar>
         <main>${this.renderMainContent()}</main>
       </div>
       ${this.renderDialog()}
+      ${this.toast
+        ? html`
+            <div class="toast ${this.toast.tone}">
+              <idp-icon name=${this.toast.tone === 'ok' ? 'check' : 'alert'} size="14"></idp-icon>
+              <span style="flex:1">${this.toast.message}</span>
+            </div>
+          `
+        : html``}
     `;
   }
 }