v1.10.0

- Marked the status of "Invite and Manage Team Members" story as Complete in README.
- Updated the status of ORG-002 to Complete in the corresponding markdown file.
- Modified OrganizationManager to assign roles as 'owner' during organization creation.
- Implemented bulk invitation feature in UserInvitationManager, allowing multiple users to be invited via CSV upload.
- Added IReq_BulkCreateInvitations interface for bulk invitation requests.
- Enhanced CreateOrgForm to update state with new roles upon organization creation.
- Introduced BulkInviteModal for bulk inviting users, including email validation and role assignment.
- Updated UsersView to support ownership transfer and bulk invitation functionality.
- Improved account state management to handle new roles and organizations.

changelog.md

@@ -1,5 +1,70 @@
 # Changelog
 
+## 2025-12-07 - 1.10.0 - feat(billingplan)
+Add Paddle v2 checkout support and backend config endpoint; add CSP headers and bump typedserver
+
+- Add getPaddleConfig typedrequest handler in BillingPlanManager to expose PADDLE_TOKEN and PADDLE_PRICE_ID from environment.
+- Introduce IReq_GetPaddleConfig typedrequest interface.
+- Update frontend paddlesetup to use Paddle v2: load v2 script, call Paddle.Initialize with token, open Checkout using items.priceId and customer.email, and handle checkout.completed events (store transaction_id).
+- Attempt to obtain user email from account state or via idpClient.whoIs before starting checkout; show error if email unavailable.
+- Add Content Security Policy securityHeaders to website server configuration to allow Paddle, ProfitWell, Sentry and related assets/connections.
+- Bump dependency @api.global/typedserver from ^7.8.17 to ^7.10.2.
+
+## 2025-12-01 - 1.9.0 - feat(account)
+Refactor account UI: migrate modals to promise-based show() API and improve navigation URL tracking
+
+- Replace inline modal elements with programmatic / static show() calls for OrgSelectModal and CreateOrgModal; navigation now reacts to the results returned from show() and pushes appropriate URLs.
+- Remove embedded <idp-org-select-modal> and <idp-create-org-modal> elements from the account template to use on-demand modal invocation.
+- Navigation component now exposes currentPath state, listens to popstate, and watches for external URL changes (requestAnimationFrame loop) to keep UI in sync with location changes.
+- Updated readme.hints.md with guidance for dees-catalog components and clarified dees-input-* event pattern (use RxJS Subjects, subscribe to changeSubject and access element.value).
+
+## 2025-12-01 - 1.8.0 - feat(reception)
+Add activity logging, session metadata and org-selection UI (backend and frontend)
+
+- Introduce ActivityLog and ActivityLogManager to track user actions (TActivityAction, IActivityLog) for audit/display.
+- Export new activity interface (IActivityLog) from ts_interfaces and add type TActivityAction.
+- Wire ActivityLogManager into Reception so activity logging is available via the typed router.
+- Enhance LoginSession data model with deviceInfo, createdAt and lastActive fields for richer session metadata.
+- Add getUserSessions typed handler to return detailed session list (device, browser, os, ip, createdAt, lastActive, isCurrent).
+- Revoke session endpoint now logs a 'session_revoked' activity when a session is revoked (and blocks revoking the current session).
+- Add request interfaces IReq_GetUserSessions and IReq_GetUserActivity to typed request definitions.
+- Frontend: account element now includes org-select and create-org modals, OrgView route, and handlers to open modals and navigate to new org/billing pages.
+- Frontend: organization dropdown adds a '+ Create new...' option and wiring to open the creation modal.
+- Minor refactors and routing exports: account index exports new modal components and views updated (OrgView).
+
+## 2025-12-01 - 1.7.0 - feat(admin)
+Add global admin functionality: backend admin APIs, model fields and UI integration
+
+- Backend: Add AppManager admin endpoints (getGlobalAppStats, create/update/delete/global apps, regenerate credentials) and checkGlobalAdmin handler; enforce admin checks via verifyGlobalAdmin
+- Data models: Add createdAt and createdByUserId to global app data; add optional isGlobalAdmin flag to user data (IUser)
+- Typed requests: Add new request definitions in loint-reception.admin.ts and export it from request index
+- UI: Expose Global Admin entry in account navigation (isGlobalAdmin reactive state), add /admin subroute and AdminView export
+- Account state: Fetch whoIs() on load to populate user information for admin checks
+- App seeding: Seed global apps with createdAt and createdByUserId metadata
+- Docs: Story index updated to include ADM-008 Manage Global Apps and adjust priority summary
+
+## 2025-12-01 - 1.6.0 - feat(apps)
+Add Apps subsystem: App and AppConnection models, managers, typed request handlers, web UI routes and documentation
+
+- Introduce App and AppConnection SmartData models (ts/reception/classes.app.ts, ts/reception/classes.appconnection.ts)
+- Add AppManager and AppConnectionManager with typed handlers for getGlobalApps, getAppConnections and toggleAppConnection (ts/reception/classes.appmanager.ts, ts/reception/classes.appconnectionmanager.ts)
+- Add request and data interfaces for apps and app connections (ts_interfaces/data/loint-reception.app.ts, ts_interfaces/data/loint-reception.appconnection.ts, ts_interfaces/request/loint-reception.app.ts)
+- Seed default global apps and support OAuth credential shape (IOAuthCredentials) in app data
+- Wire App managers into Reception (ts/reception/classes.reception.ts) and Reception startup
+- Update idp client types to use legacy app shape where required (IAppLegacy) and adapt typed requests (ts_idpclient/*)
+- Expose web UI routes and navigation for organization Apps view and export the AppsView (ts_web/elements/account/*, ts_web/elements/account/views/index.ts)
+- Add registration of new stories for Apps feature (stories/*: ORG-009, ORG-010, ORG-011, DEV-008) and update story index
+- Adjust typed request shapes for login/transfer flows to accept IAppLegacy where transfer/app data is exchanged
+
+## 2025-12-01 - 1.5.0 - feat(account)
+Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior
+
+- Introduce accountDesignTokens and split shared styles into tokens (accountDesignTokens), cardStyles and typographyStyles while keeping a legacy default export for compatibility
+- Apply new design tokens to account components (content, baseview, subscriptions) and switch background to use CSS variable (--background)
+- Small UI tweaks: smoother transition easing on view container, updated icon for organization entries and adjusted spacing
+- Add placeholder sections for Upcoming Billable Items and Past Invoices in subscriptions view
+- Fix login prompt submit handling by disabling the submit button via its #loginSubmitButton selector and improving button text logic
+
 ## 2025-04-03 - 1.4.3 - fix(website)
 Update packageManager configuration in package.json and refine view container background styling
 

npmextra.json

@@ -31,7 +31,11 @@
         "user data",
         "user sessions"
       ]
-    }
+    },
+    "services": [
+      "mongodb",
+      "minio"
+    ]
   },
   "npmci": {
     "npmGlobalTools": [],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/idp.global",
-  "version": "1.4.3",
+  "version": "1.10.0",
   "description": "An identity provider software managing user authentications, registrations, and sessions.",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
@@ -16,45 +16,45 @@
   "author": "Task Venture Capital GmbH",
   "license": "MIT",
   "dependencies": {
-    "@api.global/typedrequest": "^3.0.32",
+    "@api.global/typedrequest": "^3.2.5",
     "@api.global/typedrequest-interfaces": "^3.0.19",
-    "@api.global/typedserver": "^3.0.51",
+    "@api.global/typedserver": "^7.10.2",
-    "@api.global/typedsocket": "^3.0.1",
+    "@api.global/typedsocket": "^4.1.0",
-    "@consentsoftware_private/catalog": "^1.0.73",
+    "@consent.software/catalog": "^2.0.1",
-    "@design.estate/dees-catalog": "^1.2.0",
+    "@design.estate/dees-catalog": "^2.0.3",
-    "@design.estate/dees-domtools": "^2.0.64",
+    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.0.39",
+    "@design.estate/dees-element": "^2.1.3",
-    "@push.rocks/lik": "^6.0.15",
+    "@push.rocks/lik": "^6.2.2",
-    "@push.rocks/qenv": "^6.0.5",
+    "@push.rocks/qenv": "^6.1.3",
-    "@push.rocks/smartdata": "^5.2.10",
+    "@push.rocks/smartdata": "^7.0.15",
     "@push.rocks/smartdelay": "^3.0.5",
-    "@push.rocks/smarthash": "^3.0.4",
+    "@push.rocks/smarthash": "^3.2.6",
-    "@push.rocks/smartjson": "^5.0.20",
+    "@push.rocks/smartjson": "^5.2.0",
     "@push.rocks/smartjwt": "^2.2.1",
-    "@push.rocks/smartlog": "^3.0.7",
+    "@push.rocks/smartlog": "^3.1.10",
-    "@push.rocks/smartmail": "^1.0.24",
+    "@push.rocks/smartmail": "^2.2.0",
-    "@push.rocks/smartpath": "^5.0.5",
+    "@push.rocks/smartpath": "^6.0.0",
-    "@push.rocks/smartpromise": "^4.0.4",
+    "@push.rocks/smartpromise": "^4.2.3",
-    "@push.rocks/smartrx": "^3.0.7",
+    "@push.rocks/smartrx": "^3.0.10",
-    "@push.rocks/smartstate": "^2.0.19",
+    "@push.rocks/smartstate": "^2.0.27",
-    "@push.rocks/smarttime": "^4.0.8",
+    "@push.rocks/smarttime": "^4.1.1",
     "@push.rocks/smartunique": "^3.0.9",
     "@push.rocks/smarturl": "^3.1.0",
-    "@push.rocks/taskbuffer": "^3.1.7",
+    "@push.rocks/taskbuffer": "^3.5.0",
     "@push.rocks/webjwt": "^1.0.9",
     "@push.rocks/websetup": "^3.0.15",
     "@push.rocks/webstore": "^2.0.20",
     "@serve.zone/platformclient": "^1.1.2",
-    "@tsclass/tsclass": "^4.1.2",
+    "@tsclass/tsclass": "^9.3.0",
-    "@uptime.link/webwidget": "^1.1.2"
+    "@uptime.link/webwidget": "^1.2.5"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.17",
+    "@git.zone/tsbuild": "^3.1.2",
-    "@git.zone/tsbundle": "^2.0.3",
+    "@git.zone/tsbundle": "^2.6.3",
-    "@git.zone/tsrun": "^1.2.8",
+    "@git.zone/tsrun": "^2.0.0",
-    "@git.zone/tswatch": "^2.0.1",
+    "@git.zone/tswatch": "^2.2.3",
     "@push.rocks/projectinfo": "^5.0.1",
-    "@types/node": "^22.7.4"
+    "@types/node": "^24.10.1"
   },
   "private": true,
   "repository": {

readme.hints.md

@@ -1,3 +1,23 @@
 # Project Readme Hints
 
-This is the initial readme hints file.
+## UI Components
+Always check dees-catalog for available elements before implementing custom solutions:
+- Documentation: https://code.foss.global/design.estate/dees-catalog
+- Key components: `dees-modal`, `dees-button`, `dees-input-*`, `dees-form`, etc.
+
+### dees-input-* Event Pattern
+All dees-input components use **RxJS Subjects** for value changes, NOT DOM events:
+```typescript
+// Subscribe to value changes in firstUpdated():
+const inputElement = this.shadowRoot.querySelector('dees-input-text');
+inputElement.changeSubject.subscribe((element) => {
+  const value = element.value;
+  // handle value change
+});
+```
+- Do NOT use `@changeValue` or similar DOM events - they don't exist
+- The Subject emits the element itself, access value via `element.value`
+
+## Project Structure
+- `ts_web/elements/account/` - Account dashboard components
+- `ts_web/states/` - State management (accountstate, idp.state)

stories/README.md

@@ -0,0 +1,92 @@
+# idp.global User Stories
+
+This directory contains user stories for the idp.global Identity Provider platform, organized by persona.
+
+## Directory Structure
+
+```
+stories/
+├── end-user/           # Stories for regular users (8)
+├── organization-owner/ # Stories for organization admins (11)
+├── developer/          # Stories for API/SDK consumers (8)
+└── admin/              # Stories for platform administrators (8)
+```
+
+## Story Index
+
+### End User (EU)
+| ID | Title | Priority | Source |
+|----|-------|----------|--------|
+| EU-001 | [Multi-Device Login Sessions](end-user/EU-001-multi-device-login.md) | High | TODO |
+| EU-002 | [Complete Password Reset Flow](end-user/EU-002-password-reset.md) | Critical | Incomplete |
+| EU-003 | [View and Manage Logged-in Devices](end-user/EU-003-device-management.md) | Medium | TODO |
+| EU-004 | [Enable Two-Factor Authentication](end-user/EU-004-two-factor-auth.md) | High | New |
+| EU-005 | [Login with Social Providers](end-user/EU-005-social-login.md) | Medium | New |
+| EU-006 | [Delete My Account](end-user/EU-006-account-deletion.md) | Medium | New |
+| EU-007 | [View Login History](end-user/EU-007-session-history.md) | Low | New |
+| EU-008 | [Upload Profile Avatar](end-user/EU-008-profile-avatar.md) | Low | New |
+
+### Organization Owner (ORG)
+| ID | Title | Priority | Source |
+|----|-------|----------|--------|
+| ORG-001 | [Sync Billing Plans with Users](organization-owner/ORG-001-billing-sync.md) | High | TODO |
+| ORG-002 | [Invite and Manage Team Members](organization-owner/ORG-002-member-management.md) | Critical | Complete |
+| ORG-003 | [Assign Roles to Members](organization-owner/ORG-003-role-assignment.md) | High | Partial |
+| ORG-004 | [Customize Organization Branding](organization-owner/ORG-004-org-branding.md) | Medium | New |
+| ORG-005 | [View Organization Usage Analytics](organization-owner/ORG-005-usage-analytics.md) | Medium | New |
+| ORG-006 | [Configure SSO for Organization](organization-owner/ORG-006-sso-config.md) | High | New |
+| ORG-007 | [View Organization Audit Logs](organization-owner/ORG-007-audit-logs.md) | Medium | New |
+| ORG-008 | [Manage Subscription and Billing](organization-owner/ORG-008-subscription-management.md) | Medium | Enhance |
+| ORG-009 | [Connect Global Apps](organization-owner/ORG-009-global-apps.md) | High | New |
+| ORG-010 | [Browse and Install Partner Apps](organization-owner/ORG-010-app-store.md) | Medium | New |
+| ORG-011 | [Create Custom OIDC Apps](organization-owner/ORG-011-custom-oidc-apps.md) | Medium | New |
+
+### Developer (DEV)
+| ID | Title | Priority | Source |
+|----|-------|----------|--------|
+| DEV-001 | [Create and Manage API Tokens](developer/DEV-001-api-token-management.md) | High | Partial |
+| DEV-002 | [Comprehensive SDK Documentation](developer/DEV-002-sdk-documentation.md) | High | New |
+| DEV-003 | [Configure Webhook Notifications](developer/DEV-003-webhook-events.md) | Medium | New |
+| DEV-004 | [Proper App ID Initialization](developer/DEV-004-app-id-setup.md) | High | TODO |
+| DEV-005 | [Register OAuth Client App](developer/DEV-005-oauth-client.md) | Medium | New |
+| DEV-006 | [Understand API Rate Limits](developer/DEV-006-rate-limiting.md) | Low | New |
+| DEV-007 | [Validate JWTs in My Application](developer/DEV-007-jwt-validation.md) | Medium | Enhance |
+| DEV-008 | [Submit App to AppStore](developer/DEV-008-submit-partner-app.md) | Low | New |
+
+### Platform Admin (ADM)
+| ID | Title | Priority | Source |
+|----|-------|----------|--------|
+| ADM-001 | [Secure JWT Endpoints with Backend Token](admin/ADM-001-backend-token-security.md) | Critical | TODO |
+| ADM-002 | [Suspend and Delete Users](admin/ADM-002-user-suspension.md) | High | Partial |
+| ADM-003 | [Platform-wide Audit Logging](admin/ADM-003-global-audit-log.md) | High | New |
+| ADM-004 | [Customize Email Templates](admin/ADM-004-email-templates.md) | Medium | New |
+| ADM-005 | [Security Monitoring Dashboard](admin/ADM-005-security-dashboard.md) | Medium | New |
+| ADM-006 | [Impersonate Users for Support](admin/ADM-006-user-impersonation.md) | Low | New |
+| ADM-007 | [Manage JWT Blocklist](admin/ADM-007-blocklist-management.md) | Medium | Enhance |
+| ADM-008 | [Manage Global Apps](admin/ADM-008-global-app-management.md) | High | In Development |
+
+## Priority Summary
+
+| Priority | Count | Stories |
+|----------|-------|---------|
+| Critical | 2 | EU-002, ADM-001 |
+| High | 12 | EU-001, EU-004, ORG-001, ORG-003, ORG-006, ORG-009, DEV-001, DEV-002, DEV-004, ADM-002, ADM-003, ADM-008 |
+| Medium | 14 | EU-003, EU-005, EU-006, ORG-004, ORG-005, ORG-007, ORG-008, ORG-010, ORG-011, DEV-003, DEV-005, DEV-007, ADM-004, ADM-005, ADM-007 |
+| Low | 6 | EU-007, EU-008, DEV-006, DEV-008, ADM-006 |
+
+## Source Legend
+
+- **TODO**: Derived from TODO comments in codebase
+- **Incomplete**: Feature exists but implementation is incomplete
+- **Partial**: Infrastructure exists, needs completion
+- **Enhance**: Feature works, could be improved
+- **New**: New feature not currently in codebase
+
+## Related Code References
+
+Stories derived from code TODOs reference these files:
+- `ts/reception/classes.jwt.ts:39`
+- `ts/reception/classes.jwtmanager.ts:40,52`
+- `ts/reception/classes.loginsessionmanager.ts:229-238,256`
+- `ts/reception/classes.billingplan.ts:16`
+- `ts_idpclient/classes.idpclient.ts:30`

stories/admin/ADM-001-backend-token-security.md

@@ -0,0 +1,28 @@
+# Secure JWT Endpoints with Backend Token
+
+**ID:** ADM-001
+**Priority:** Critical
+**Status:** Planned
+
+## User Story
+As a platform administrator, I want JWT-related endpoints to be secured with backend token validation so that only authorized services can access sensitive security operations.
+
+## Acceptance Criteria
+- [ ] Public key endpoint requires valid backend token
+- [ ] JWT blocklist endpoint requires valid backend token
+- [ ] Backend tokens are securely generated and distributed
+- [ ] Token validation is performed on every request
+- [ ] Invalid/missing token returns 401 Unauthorized
+- [ ] Tokens can be rotated without service interruption
+- [ ] Audit log for all backend token usage
+
+## Technical Notes
+- Two TODOs exist for backend token validation in JwtManager
+- `getPublicKeyForValidation` and `pushOrGetJwtIdBlocklist` need protection
+- Backend token should be separate from user JWT
+- Consider service-to-service authentication pattern
+- Environment variable for backend token configuration
+
+## Related TODOs
+- `ts/reception/classes.jwtmanager.ts:40` - `// TODO control backend token`
+- `ts/reception/classes.jwtmanager.ts:52` - `// TODO control backend token`

stories/admin/ADM-002-user-suspension.md

@@ -0,0 +1,28 @@
+# Suspend and Delete Users
+
+**ID:** ADM-002
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As a platform administrator, I want to suspend and delete user accounts so that I can handle policy violations, security incidents, and account removal requests.
+
+## Acceptance Criteria
+- [ ] Admin can search for users by email, name, or ID
+- [ ] Admin can suspend a user account with reason
+- [ ] Suspended users cannot log in
+- [ ] Suspended users' active sessions are invalidated
+- [ ] Admin can unsuspend accounts
+- [ ] Admin can permanently delete suspended accounts
+- [ ] Deletion removes all user data (GDPR compliance)
+- [ ] Audit log for all suspension/deletion actions
+
+## Technical Notes
+- `suspendUser` and `deleteSuspendedUser` endpoints exist
+- Need admin UI for user management
+- Consider soft delete with retention period
+- Handle organization ownership before deletion
+- Email notification to user on suspension
+
+## Related TODOs
+- Partial implementation in UserManager

stories/admin/ADM-003-global-audit-log.md

@@ -0,0 +1,28 @@
+# Platform-wide Audit Logging
+
+**ID:** ADM-003
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As a platform administrator, I want to view platform-wide audit logs so that I can monitor security events, investigate incidents, and demonstrate compliance.
+
+## Acceptance Criteria
+- [ ] Log all authentication events (login, logout, failed attempts)
+- [ ] Log all administrative actions (user changes, config changes)
+- [ ] Log all security events (password changes, 2FA changes, token revocations)
+- [ ] Searchable log interface with filters
+- [ ] Real-time log streaming for monitoring
+- [ ] Export logs in standard formats (JSON, CSV, CEF)
+- [ ] Log retention configuration
+- [ ] Integration with external SIEM systems
+
+## Technical Notes
+- Separate from organization audit logs (ORG-007)
+- Platform-wide view across all organizations
+- Consider ELK stack or similar for log aggregation
+- Structured logging format for parsing
+- Compliance: SOC 2, ISO 27001, GDPR audit requirements
+
+## Related TODOs
+- New feature - platform security requirement

stories/admin/ADM-004-email-templates.md

@@ -0,0 +1,28 @@
+# Customize Email Templates
+
+**ID:** ADM-004
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As a platform administrator, I want to customize email templates so that all system emails match our branding and communication style.
+
+## Acceptance Criteria
+- [ ] Edit templates for: registration, password reset, login verification, welcome
+- [ ] Rich text editor for template content
+- [ ] Variable placeholders ({{userName}}, {{resetLink}}, etc.)
+- [ ] Preview emails before saving
+- [ ] Send test emails to verify
+- [ ] Localization support for multiple languages
+- [ ] Reset to default template option
+- [ ] Version history for templates
+
+## Technical Notes
+- ReceptionMailer handles email sending
+- Currently uses hardcoded or simple templates
+- Consider template engine (Handlebars, Mjml for responsive)
+- Store templates in database for dynamic updates
+- Support HTML and plain text versions
+
+## Related TODOs
+- New feature - enhance ReceptionMailer

stories/admin/ADM-005-security-dashboard.md

@@ -0,0 +1,28 @@
+# Security Monitoring Dashboard
+
+**ID:** ADM-005
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As a platform administrator, I want a security monitoring dashboard so that I can quickly identify and respond to potential security threats.
+
+## Acceptance Criteria
+- [ ] Real-time metrics: active sessions, login rate, failure rate
+- [ ] Anomaly detection alerts (unusual login patterns)
+- [ ] Geographic map of login locations
+- [ ] Failed login attempt heatmap
+- [ ] Blocked JWT/token statistics
+- [ ] Suspicious activity indicators
+- [ ] Configurable alert thresholds
+- [ ] Integration with alerting systems (PagerDuty, Slack)
+
+## Technical Notes
+- Aggregate metrics from login events
+- Real-time updates via WebSocket
+- Consider time-series database for metrics
+- Machine learning for anomaly detection (future)
+- Alert rules engine for custom notifications
+
+## Related TODOs
+- New feature - security operations

stories/admin/ADM-006-user-impersonation.md

@@ -0,0 +1,28 @@
+# Impersonate Users for Support
+
+**ID:** ADM-006
+**Priority:** Low
+**Status:** Planned
+
+## User Story
+As a platform administrator, I want to temporarily impersonate a user so that I can troubleshoot issues they're experiencing without asking for their credentials.
+
+## Acceptance Criteria
+- [ ] Admin can initiate impersonation session for any user
+- [ ] Impersonation requires confirmation and reason
+- [ ] Clear visual indicator when in impersonation mode
+- [ ] Admin can end impersonation and return to their session
+- [ ] All actions during impersonation are logged
+- [ ] User is optionally notified of impersonation
+- [ ] Impersonation sessions have time limit
+- [ ] Cannot impersonate other admins without super-admin
+
+## Technical Notes
+- Special JWT claim to indicate impersonation
+- Original admin identity preserved in token
+- Audit log must capture both admin and impersonated user
+- Consider "read-only" impersonation mode
+- Security review required before implementation
+
+## Related TODOs
+- New feature - support tooling

stories/admin/ADM-007-blocklist-management.md

@@ -0,0 +1,28 @@
+# Manage JWT Blocklist
+
+**ID:** ADM-007
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As a platform administrator, I want to view and manage the JWT blocklist so that I can revoke tokens during security incidents and verify that revocations are working.
+
+## Acceptance Criteria
+- [ ] View all blocked JWT IDs with metadata
+- [ ] Search blocklist by JWT ID or user
+- [ ] Manually add JWTs to blocklist
+- [ ] View reason for each blocklist entry
+- [ ] Blocklist entries show expiration (when they can be removed)
+- [ ] Bulk revoke all tokens for a user
+- [ ] Bulk revoke all tokens for an organization
+- [ ] Automatic cleanup of expired blocklist entries
+
+## Technical Notes
+- JwtManager has `blockedJwtIdList` infrastructure
+- `pushOrGetJwtIdBlocklist` endpoint exists
+- Need admin UI for blocklist management
+- ReceptionHousekeeping could handle cleanup
+- Consider Redis for high-performance blocklist checks
+
+## Related TODOs
+- Enhancement to existing blocklist infrastructure

stories/admin/ADM-008-global-app-management.md

@@ -0,0 +1,130 @@
+# Manage Global Apps
+
+**ID:** ADM-008
+**Priority:** High
+**Status:** In Development
+**Phase:** 1
+
+## User Story
+As a global administrator, I want to create, configure, and manage first-party global apps (foss.global, task.vc, etc.) so that organization owners can connect to these integrated services.
+
+## Acceptance Criteria
+- [ ] Only users with `isGlobalAdmin: true` can access the admin page
+- [ ] View list of all global apps with their status
+- [ ] Create new global apps with OAuth credentials
+- [ ] Edit existing global app details (name, description, logo, URLs)
+- [ ] Activate/deactivate global apps (inactive apps hidden from org owners)
+- [ ] View connection statistics per app (how many orgs connected)
+- [ ] Regenerate OAuth client credentials for an app
+- [ ] Delete global apps (with confirmation and impact warning)
+- [ ] Admin page accessible at `/admin` route
+
+## Technical Notes
+- Global admin flag stored on user: `isGlobalAdmin: boolean`
+- Separate from organization roles (platform-level permission)
+- OAuth credentials generated server-side, secrets never exposed in full
+- App deletion should warn about existing connections
+- Audit logging for all admin actions
+
+## Data Model
+
+```typescript
+interface IUser {
+  id: string;
+  data: {
+    // ... existing fields ...
+    isGlobalAdmin?: boolean; // Platform-level admin flag
+  };
+}
+
+interface IGlobalApp {
+  id: string;
+  type: 'global';
+  data: {
+    name: string;
+    description: string;
+    logoUrl: string;
+    appUrl: string;
+    oauthCredentials: IOAuthCredentials;
+    isActive: boolean;
+    category: string;
+    createdAt: number;
+    createdByUserId: string;
+  };
+}
+```
+
+## Request Interfaces
+
+```typescript
+interface IReq_CreateGlobalApp {
+  method: 'createGlobalApp';
+  request: {
+    jwt: string;
+    name: string;
+    description: string;
+    logoUrl: string;
+    appUrl: string;
+    category: string;
+    redirectUris: string[];
+    allowedScopes: string[];
+  };
+  response: {
+    app: IGlobalApp;
+    clientSecret: string; // Only shown once on creation
+  };
+}
+
+interface IReq_UpdateGlobalApp {
+  method: 'updateGlobalApp';
+  request: {
+    jwt: string;
+    appId: string;
+    updates: Partial<IGlobalApp['data']>;
+  };
+  response: {
+    app: IGlobalApp;
+  };
+}
+
+interface IReq_DeleteGlobalApp {
+  method: 'deleteGlobalApp';
+  request: {
+    jwt: string;
+    appId: string;
+  };
+  response: {
+    success: boolean;
+    disconnectedOrganizations: number;
+  };
+}
+
+interface IReq_GetGlobalAppStats {
+  method: 'getGlobalAppStats';
+  request: {
+    jwt: string;
+  };
+  response: {
+    apps: Array<{
+      app: IGlobalApp;
+      connectionCount: number;
+    }>;
+  };
+}
+```
+
+## UI Components
+- **GlobalAdminView** (`/admin`) - Main admin dashboard
+- **Global Apps Tab** - List of global apps with CRUD operations
+- **Create/Edit App Dialog** - Form for app configuration
+- Navigation shows "Admin" link only for global admins
+
+## Security Considerations
+- Server-side validation of `isGlobalAdmin` flag on all admin endpoints
+- JWT must be validated and user's admin status checked
+- Rate limiting on credential regeneration
+- Audit trail for all changes
+
+## Related Stories
+- ORG-009: Connect Global Apps (organization perspective)
+- ADM-003: Platform-wide Audit Logging

stories/developer/DEV-001-api-token-management.md

@@ -0,0 +1,28 @@
+# Create and Manage API Tokens
+
+**ID:** DEV-001
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As a developer, I want to create and manage API tokens so that I can integrate my applications with the identity provider programmatically.
+
+## Acceptance Criteria
+- [ ] Developer can create new API tokens with custom names
+- [ ] Token is shown once at creation (cannot be retrieved later)
+- [ ] Developer can set token expiration (or no expiration)
+- [ ] Developer can set token scopes/permissions
+- [ ] List all tokens with creation date and last used
+- [ ] Revoke individual tokens
+- [ ] Revoke all tokens at once
+- [ ] Rate limiting information shown per token
+
+## Technical Notes
+- ApiTokenManager exists with basic infrastructure
+- `loginWithApiToken` endpoint available
+- Need UI for token management (currently backend only)
+- Tokens should be hashed before storage (show once)
+- Consider token prefixes for easy identification (idp_...)
+
+## Related TODOs
+- Partial implementation in ApiTokenManager

stories/developer/DEV-002-sdk-documentation.md

@@ -0,0 +1,28 @@
+# Comprehensive SDK Documentation
+
+**ID:** DEV-002
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As a developer, I want comprehensive documentation for the IDP client SDK so that I can integrate authentication into my applications quickly and correctly.
+
+## Acceptance Criteria
+- [ ] Getting started guide with installation and setup
+- [ ] Authentication flow explanations with diagrams
+- [ ] API reference for all client methods
+- [ ] Code examples for common use cases
+- [ ] TypeScript type definitions documented
+- [ ] Error handling guide with error codes
+- [ ] Migration guides for version upgrades
+- [ ] Interactive API playground/sandbox
+
+## Technical Notes
+- `ts_idpclient/` contains the client SDK
+- README.md has basic usage but needs expansion
+- Generate API docs from TypeScript using TypeDoc
+- Host documentation on dedicated site or GitHub pages
+- Consider OpenAPI/Swagger spec for REST endpoints
+
+## Related TODOs
+- New feature - documentation enhancement

stories/developer/DEV-003-webhook-events.md

@@ -0,0 +1,28 @@
+# Configure Webhook Notifications
+
+**ID:** DEV-003
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As a developer, I want to configure webhooks so that my application is notified in real-time when authentication events occur.
+
+## Acceptance Criteria
+- [ ] Register webhook endpoints with URL and secret
+- [ ] Select which events to subscribe to
+- [ ] Events include: user.created, user.login, user.logout, org.member.added, etc.
+- [ ] Webhook payloads include event type, timestamp, and relevant data
+- [ ] Signature verification using shared secret (HMAC)
+- [ ] Retry logic for failed deliveries (exponential backoff)
+- [ ] Webhook delivery logs with success/failure status
+- [ ] Test webhook button to send sample event
+
+## Technical Notes
+- Create Webhook model with URL, secret, events, and status
+- Queue webhook deliveries for reliability (consider bull/bullmq)
+- Sign payloads with HMAC-SHA256
+- Timeout for webhook delivery (10 seconds)
+- Dashboard for delivery monitoring and debugging
+
+## Related TODOs
+- New feature - event-driven integration

stories/developer/DEV-004-app-id-setup.md

@@ -0,0 +1,44 @@
+# Proper App ID Initialization
+
+**ID:** DEV-004
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As a developer, I want to properly register my application with a unique App ID so that the identity provider can identify and configure my app correctly.
+
+## Acceptance Criteria
+- [ ] Developer can register new applications
+- [ ] Each app gets unique App ID and App Secret
+- [ ] Configure allowed redirect URIs per app
+- [ ] Configure allowed origins (CORS) per app
+- [ ] App-specific settings (token expiry, etc.)
+- [ ] View app analytics (logins per app)
+- [ ] Regenerate app secret if compromised
+- [ ] Delete/deactivate applications
+
+## Technical Notes
+- Current client has `id: ''` placeholder (TODO in code)
+- App ID is now part of the unified Apps model (`IApp` discriminated union)
+- Three app types exist: Global Apps, Partner Apps, Custom OIDC Apps
+- For custom applications, use the Custom OIDC Apps flow (ORG-011)
+- App credentials stored as `IOAuthCredentials` with hashed client secret
+- Validate redirect URIs to prevent open redirector attacks
+- App ID/Client ID is included in JWT claims
+
+## Apps Architecture
+
+The Apps system supports three types:
+1. **Global Apps** (ORG-009) - First-party platform apps (foss.global, task.vc)
+2. **Partner Apps** (ORG-010, DEV-008) - AppStore model for third-party apps
+3. **Custom OIDC Apps** (ORG-011) - Organization-created OAuth/OIDC clients
+
+## Related Stories
+- ORG-009: Connect Global Apps
+- ORG-010: Browse and Install Partner Apps
+- ORG-011: Create Custom OIDC Apps
+- DEV-005: Register OAuth Client App
+- DEV-008: Submit App to AppStore
+
+## Related TODOs
+- `ts_idpclient/classes.idpclient.ts:30` - `id: '', // TODO`

stories/developer/DEV-005-oauth-client.md

@@ -0,0 +1,51 @@
+# Register OAuth Client App
+
+**ID:** DEV-005
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As a developer, I want to register my application as an OAuth client so that users can authorize my app to access their data using standard OAuth 2.0 flows.
+
+## Acceptance Criteria
+- [ ] Register OAuth 2.0 client application
+- [ ] Support Authorization Code flow
+- [ ] Support PKCE for public clients (mobile/SPA)
+- [ ] Configure allowed scopes per client
+- [ ] Consent screen customization
+- [ ] Token endpoint for code exchange
+- [ ] Refresh token support
+- [ ] Client credentials flow for server-to-server
+
+## Technical Notes
+- OAuth/OIDC client registration is now part of the Apps system
+- **For organization owners**: Use Custom OIDC Apps (ORG-011) to create OAuth clients
+- **For third-party developers**: Submit to AppStore (DEV-008) for public apps
+- Standard OAuth 2.0 / OpenID Connect flows supported
+- Scopes: openid, profile, email, organizations
+- PKCE is required for mobile and SPA security
+
+## Implementation Path
+
+This story's functionality is now implemented through:
+1. **Custom OIDC Apps** (ORG-011) - Create org-specific OAuth clients via the Apps UI
+2. **Partner Apps** (DEV-008) - Submit public apps to the AppStore
+
+Both use the same underlying `IOAuthCredentials` model:
+```typescript
+interface IOAuthCredentials {
+  clientId: string;
+  clientSecretHash: string;
+  redirectUris: string[];
+  allowedScopes: string[];
+  grantTypes: ('authorization_code' | 'client_credentials' | 'refresh_token')[];
+}
+```
+
+## Related Stories
+- ORG-011: Create Custom OIDC Apps (primary implementation)
+- DEV-004: Proper App ID Initialization
+- DEV-008: Submit App to AppStore
+
+## Related TODOs
+- New feature - OAuth server implementation

stories/developer/DEV-006-rate-limiting.md

@@ -0,0 +1,27 @@
+# Understand API Rate Limits
+
+**ID:** DEV-006
+**Priority:** Low
+**Status:** Planned
+
+## User Story
+As a developer, I want to understand and monitor API rate limits so that I can build applications that respect limits and handle throttling gracefully.
+
+## Acceptance Criteria
+- [ ] Clear documentation of rate limits per endpoint
+- [ ] Rate limit headers in API responses (X-RateLimit-*)
+- [ ] Different limits for different API token tiers
+- [ ] Dashboard showing current usage vs limits
+- [ ] Alerts when approaching rate limits
+- [ ] Retry-After header when rate limited
+- [ ] Ability to request limit increase
+
+## Technical Notes
+- Implement rate limiting middleware (consider express-rate-limit)
+- Store rate limit counters in Redis for distributed systems
+- Different limits: login attempts, API calls, token operations
+- Consider sliding window algorithm for smooth limits
+- 429 Too Many Requests response with helpful error message
+
+## Related TODOs
+- New feature - API management

stories/developer/DEV-007-jwt-validation.md

@@ -0,0 +1,27 @@
+# Validate JWTs in My Application
+
+**ID:** DEV-007
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As a developer, I want clear guidance and tools to validate JWTs issued by the identity provider so that I can securely authenticate users in my backend services.
+
+## Acceptance Criteria
+- [ ] Public key endpoint for JWT validation (JWKS format)
+- [ ] Documentation explaining JWT structure and claims
+- [ ] Example code for validation in multiple languages
+- [ ] Key rotation with multiple valid keys during transition
+- [ ] Token introspection endpoint for server-side validation
+- [ ] Clear error messages for invalid tokens
+- [ ] Guidance on caching public keys
+
+## Technical Notes
+- `getPublicKeyForValidation` endpoint exists
+- Consider standard JWKS endpoint (/.well-known/jwks.json)
+- OpenID Connect discovery endpoint would help
+- JWTs contain: sub, email, roles, orgId, exp, iat
+- Document all custom claims in JWT
+
+## Related TODOs
+- Enhancement to existing JWT infrastructure

stories/developer/DEV-008-submit-partner-app.md

@@ -0,0 +1,70 @@
+# Submit App to AppStore
+
+**ID:** DEV-008
+**Priority:** Low
+**Status:** Planned
+**Phase:** 4
+
+## User Story
+As a developer, I want to submit my application to the AppStore so that other organizations can discover and install my app.
+
+## Acceptance Criteria
+- [ ] Submit a new app to the AppStore
+- [ ] Provide app name, description, and logo
+- [ ] Add screenshots for the store listing
+- [ ] Select app category and tags
+- [ ] Set pricing model (free, paid, freemium)
+- [ ] Configure OAuth credentials (redirect URIs, scopes)
+- [ ] Submit for review
+- [ ] View submission status (draft, pending_review, approved, rejected, suspended)
+- [ ] Receive notification on approval/rejection
+- [ ] Edit app listing after approval
+- [ ] View app analytics (install count, usage)
+
+## Technical Notes
+- Submitter organization becomes `ownerOrganizationId`
+- Apps start in `draft` status, move to `pending_review` on submit
+- Platform admins review and approve/reject apps
+- Approved apps become visible in the AppStore
+- App updates may require re-approval
+
+## Approval Workflow
+
+```
+draft → pending_review → approved → published
+                      ↘ rejected
+
+approved ↔ suspended (admin action)
+```
+
+## Data Model
+
+```typescript
+interface IPartnerApp {
+  id: string;
+  type: 'partner';
+  data: {
+    ownerOrganizationId: string;
+    appStoreMetadata: {
+      shortDescription: string;
+      longDescription: string;
+      screenshots: string[];
+      category: string;
+      tags: string[];
+      pricing: { model: 'free' | 'paid' | 'freemium' };
+    };
+    approvalStatus: 'draft' | 'pending_review' | 'approved' | 'rejected' | 'suspended';
+    isPublished: boolean;
+    installCount: number;
+    // ... other fields
+  };
+}
+```
+
+## UI Components
+- **AppSubmissionView** (`/account/org/:orgName/apps/submit`) - Submit new partner app form
+
+## Related Stories
+- ORG-010: Browse and Install Partner Apps
+- ORG-011: Create Custom OIDC Apps
+- ADM-008: Review Partner App Submissions (new admin story)

stories/end-user/EU-001-multi-device-login.md

@@ -0,0 +1,24 @@
+# Multi-Device Login Sessions
+
+**ID:** EU-001
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As an end user, I want to stay logged in on multiple devices simultaneously so that I can access my account from my phone, tablet, and computer without being logged out elsewhere.
+
+## Acceptance Criteria
+- [ ] User can have active sessions on multiple devices at the same time
+- [ ] Each device gets its own refresh token
+- [ ] Logging out on one device does not affect sessions on other devices
+- [ ] User can see all active sessions in account settings
+- [ ] User can revoke individual sessions remotely
+
+## Technical Notes
+- Currently only one refresh token per login session is supported
+- Need to refactor `LoginSession` to support multiple refresh tokens
+- Consider storing device metadata (browser, OS, last active time) with each token
+- JWT blocklist needs to handle individual token revocation
+
+## Related TODOs
+- `ts/reception/classes.jwt.ts:39` - `// TODO: handle multiple refresh tokens`

stories/end-user/EU-002-password-reset.md

@@ -0,0 +1,26 @@
+# Complete Password Reset Flow
+
+**ID:** EU-002
+**Priority:** Critical
+**Status:** Planned
+
+## User Story
+As an end user, I want to reset my password when I forget it so that I can regain access to my account securely.
+
+## Acceptance Criteria
+- [ ] User can request a password reset via email
+- [ ] Reset email contains a secure, time-limited token link
+- [ ] Clicking the link opens a form to set a new password
+- [ ] Password must meet security requirements (length, complexity)
+- [ ] Old password is invalidated after successful reset
+- [ ] User receives confirmation email after password change
+- [ ] All existing sessions are invalidated after password reset
+
+## Technical Notes
+- `resetPassword` handler exists but `setNewPassword` is a stub (returns `{ status: 'ok' }` without implementation)
+- Need to implement actual password update logic
+- Should use `ReceptionMailer` for email sending
+- Consider rate limiting reset requests to prevent abuse
+
+## Related TODOs
+- `ts/reception/classes.loginsessionmanager.ts:229-238` - `setNewPassword` handler is incomplete

stories/end-user/EU-003-device-management.md

@@ -0,0 +1,25 @@
+# View and Manage Logged-in Devices
+
+**ID:** EU-003
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As an end user, I want to view all devices where I'm logged in and remotely log out of specific devices so that I can maintain control over my account security.
+
+## Acceptance Criteria
+- [ ] User can view a list of all active sessions/devices
+- [ ] Each device entry shows: device type, browser, location (approximate), last activity
+- [ ] User can name/label devices for easy identification
+- [ ] User can log out of any individual device remotely
+- [ ] User can log out of all devices except the current one
+- [ ] User receives notification when a new device logs in
+
+## Technical Notes
+- Device ID tracking infrastructure exists but is blocked by JWT handling issues
+- Need to complete `attachDeviceId` handler (currently returns `ok: false`)
+- Store device fingerprint, user agent, IP-based geolocation
+- Integrate with multi-refresh-token system (EU-001)
+
+## Related TODOs
+- `ts/reception/classes.loginsessionmanager.ts:256` - `// TODO: Blocked by proper JWT handling`

stories/end-user/EU-004-two-factor-auth.md

@@ -0,0 +1,27 @@
+# Enable Two-Factor Authentication
+
+**ID:** EU-004
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As an end user, I want to enable two-factor authentication on my account so that my account is protected even if my password is compromised.
+
+## Acceptance Criteria
+- [ ] User can enable 2FA from account settings
+- [ ] Support for TOTP apps (Google Authenticator, Authy, etc.)
+- [ ] Backup codes are generated and shown once during setup
+- [ ] User must verify 2FA code during setup to confirm it works
+- [ ] Login flow prompts for 2FA code when enabled
+- [ ] User can disable 2FA (requires current 2FA code)
+- [ ] Account recovery option if 2FA device is lost
+
+## Technical Notes
+- Mobile verification infrastructure exists (SMS OTP in registration)
+- Can leverage existing `smarttwilio` integration for SMS-based 2FA
+- TOTP implementation needs `otplib` or similar library
+- Store encrypted TOTP secret in User model
+- Consider supporting multiple 2FA methods (TOTP, SMS, security keys)
+
+## Related TODOs
+- New feature - no existing TODO

stories/end-user/EU-005-social-login.md

@@ -0,0 +1,28 @@
+# Login with Social Providers
+
+**ID:** EU-005
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As an end user, I want to log in using my existing Google, GitHub, or Microsoft account so that I don't have to remember another password.
+
+## Acceptance Criteria
+- [ ] User can sign in with Google
+- [ ] User can sign in with GitHub
+- [ ] User can sign in with Microsoft
+- [ ] First-time social login creates a new account automatically
+- [ ] Social login can be linked to existing account
+- [ ] User can unlink social providers from settings
+- [ ] Profile data (name, email, avatar) is imported from provider
+- [ ] User can still set a password for email/password login
+
+## Technical Notes
+- Package.json keywords mention OAuth - infrastructure may be partially planned
+- Implement OAuth 2.0 / OpenID Connect flows
+- Store provider tokens securely for API access if needed
+- Handle email conflicts (social email matches existing account)
+- Consider using passport.js or similar for provider abstraction
+
+## Related TODOs
+- New feature - OAuth mentioned in package.json keywords but not implemented

stories/end-user/EU-006-account-deletion.md

@@ -0,0 +1,28 @@
+# Delete My Account
+
+**ID:** EU-006
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As an end user, I want to permanently delete my account and all associated data so that I can exercise my right to be forgotten (GDPR compliance).
+
+## Acceptance Criteria
+- [ ] User can request account deletion from settings
+- [ ] Deletion requires password confirmation or 2FA
+- [ ] User sees summary of what will be deleted
+- [ ] Grace period (e.g., 30 days) before permanent deletion
+- [ ] User receives email confirmation of deletion request
+- [ ] User can cancel deletion during grace period
+- [ ] All personal data is removed after grace period
+- [ ] User is removed from all organizations they belong to
+
+## Technical Notes
+- `suspendUser` and `deleteSuspendedUser` endpoints exist in admin context
+- Need user-facing self-service deletion flow
+- Consider soft delete with scheduled hard delete
+- Must handle organization ownership transfer if user owns orgs
+- Audit log should retain anonymized record for compliance
+
+## Related TODOs
+- New feature - builds on existing suspension infrastructure

stories/end-user/EU-007-session-history.md

@@ -0,0 +1,26 @@
+# View Login History
+
+**ID:** EU-007
+**Priority:** Low
+**Status:** Planned
+
+## User Story
+As an end user, I want to view my login history so that I can detect any unauthorized access to my account.
+
+## Acceptance Criteria
+- [ ] User can view list of recent logins (last 30 days)
+- [ ] Each entry shows: date/time, IP address, location, device/browser
+- [ ] Failed login attempts are also shown
+- [ ] Suspicious logins are highlighted (new location, unusual time)
+- [ ] User can export login history
+- [ ] User receives alert for logins from new locations/devices
+
+## Technical Notes
+- Login events need to be logged with metadata
+- Create new LoginHistory collection in MongoDB
+- IP geolocation service needed (consider MaxMind or ipinfo.io)
+- Privacy considerations: IP retention policy, GDPR compliance
+- Could integrate with EU-003 (device management) for unified view
+
+## Related TODOs
+- New feature - no existing infrastructure

stories/end-user/EU-008-profile-avatar.md

@@ -0,0 +1,28 @@
+# Upload Profile Avatar
+
+**ID:** EU-008
+**Priority:** Low
+**Status:** Planned
+
+## User Story
+As an end user, I want to upload a profile picture so that my identity is visually recognizable across applications that use this identity provider.
+
+## Acceptance Criteria
+- [ ] User can upload an image from their device
+- [ ] Supported formats: JPEG, PNG, GIF
+- [ ] Maximum file size: 5MB
+- [ ] Image is automatically resized/cropped to standard dimensions
+- [ ] User can crop/adjust image before saving
+- [ ] Avatar is served via CDN for fast loading
+- [ ] Default avatar (initials or Gravatar) when no upload
+- [ ] Avatar is available to connected applications via API
+
+## Technical Notes
+- User model needs avatar URL field
+- Consider using cloud storage (S3, Cloudflare R2) for images
+- Implement image processing for resize/crop (sharp library)
+- Gravatar integration as fallback using email hash
+- Expose avatar in JWT claims or user info endpoint
+
+## Related TODOs
+- New feature - no existing infrastructure

stories/organization-owner/ORG-001-billing-sync.md

@@ -0,0 +1,27 @@
+# Sync Billing Plans with Users
+
+**ID:** ORG-001
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As an organization owner, I want billing plans to automatically sync with user seats so that I'm only charged for active users and can easily manage costs.
+
+## Acceptance Criteria
+- [ ] Adding a user to org automatically updates billing (for per-seat plans)
+- [ ] Removing a user adjusts billing accordingly
+- [ ] Prorated charges/credits for mid-cycle changes
+- [ ] Organization dashboard shows current seat count vs plan limit
+- [ ] Warning notification when approaching seat limit
+- [ ] Automatic upgrade prompt when exceeding limit
+- [ ] Billing history shows seat changes over time
+
+## Technical Notes
+- `BillingPlan.syncForUser()` method exists but is not implemented
+- Paddle integration exists for payment processing
+- Need to track user-to-organization seat assignments
+- Consider grace period for temporary overages
+- Webhook from Paddle for payment confirmations
+
+## Related TODOs
+- `ts/reception/classes.billingplan.ts:16` - `// TODO sync this for user`

stories/organization-owner/ORG-002-member-management.md

@@ -0,0 +1,128 @@
+# Invite and Manage Team Members
+
+**ID:** ORG-002
+**Priority:** Critical
+**Status:** Complete
+
+## User Story
+As an organization owner, I want to invite team members to my organization and manage their access so that my team can collaborate securely.
+
+## Acceptance Criteria
+- [x] Owner can invite users via email address
+- [x] Invited user receives email with invitation link
+- [x] Invitation can be accepted by existing users or during registration
+- [x] Owner can view pending invitations and resend/cancel them
+- [x] Owner can see all current members with their roles
+- [x] Owner can remove members from organization
+- [x] Owner can transfer ownership to another member
+- [x] Bulk invite via CSV upload
+
+## Technical Implementation
+
+### UserInvitation System
+
+The invitation system uses a shared `UserInvitation` model that supports multiple organizations inviting the same email address.
+
+#### Invitation Lifecycle
+
+1. **Create**: Org admin invites email → `UserInvitation` created (or existing one is updated)
+2. **Share**: Multiple orgs can link to the same invitation (by email)
+3. **Convert**: When user registers with that email → invitation converts to real User
+4. **Fold**: If existing user adds that email as secondary → invitation folds into existing user
+5. **Expire**: Auto-delete after 90 days with cleanup of all org refs
+
+#### Data Model
+
+```typescript
+// IUserInvitation
+{
+  id: string;
+  data: {
+    email: string;                    // Unique key for sharing
+    token: string;                    // Secure invitation link token
+    status: 'pending' | 'accepted' | 'expired' | 'cancelled';
+    createdAt: number;
+    expiresAt: number;                // 90 days from creation
+    organizationRefs: Array<{         // Multiple orgs can share
+      organizationId: string;
+      invitedByUserId: string;
+      invitedAt: number;
+      roles: string[];                // Roles to assign on acceptance
+    }>;
+    acceptedAt?: number;
+    convertedToUserId?: string;
+  };
+}
+```
+
+### Role System Enhancement
+
+Users can have multiple roles within an organization:
+
+```typescript
+// IRole
+{
+  id: string;
+  data: {
+    userId: string;
+    organizationId: string;
+    roles: string[];  // e.g., ['owner', 'billing-admin', 'developer']
+  };
+}
+```
+
+Standard roles: `owner`, `admin`, `editor`, `viewer`, `guest`
+Custom roles are also supported.
+
+### API Endpoints
+
+| Method | Purpose |
+|--------|---------|
+| `createInvitation` | Invite email to org with roles |
+| `getOrgInvitations` | List pending invitations |
+| `getOrgMembers` | List members with roles |
+| `cancelInvitation` | Cancel pending invitation |
+| `resendInvitation` | Resend invitation email |
+| `removeMember` | Remove user from org |
+| `updateMemberRoles` | Change member's roles |
+| `transferOwnership` | Transfer org ownership |
+| `acceptInvitation` | Accept invitation |
+| `getInvitationByToken` | Get invitation details for landing page |
+
+### Frontend Implementation
+
+The Users page (`/account/org/:orgName/users`) provides:
+
+- **Members tab**: List all members with roles, remove/edit actions
+- **Pending tab**: List pending invitations with resend/cancel
+- **Invite tab**: Form to invite by email with role selection
+
+### Files
+
+**Backend:**
+- `ts_interfaces/data/loint-reception.userinvitation.ts` - Data interface
+- `ts_interfaces/request/loint-reception.userinvitation.ts` - API contracts
+- `ts/reception/classes.userinvitation.ts` - Model
+- `ts/reception/classes.userinvitationmanager.ts` - Manager with handlers
+- `ts/reception/classes.receptionmailer.ts` - Invitation email
+
+**Frontend:**
+- `ts_web/elements/account/views/usersview.ts` - Users page component
+- `ts_web/elements/account/content.ts` - Route registration
+- `ts_web/elements/account/navigation.ts` - Nav link
+
+## Technical Notes
+- Organization and User models exist with association
+- UserInvitation model stores invitation data with 90-day expiry
+- `ReceptionMailer.sendInvitationEmail()` handles email delivery
+- RoleManager updated to support `roles: string[]` array
+- Backward compatible with existing single-role data
+
+## Related Stories
+- ORG-003: Assign Roles to Members (enhanced with multi-role support)
+
+## Related TODOs
+- [ ] Integrate invitation acceptance into registration flow
+- [ ] Add email verification flow for secondary emails (folding)
+- [ ] Implement scheduled cleanup job for expired invitations
+- [ ] Add CSV bulk invite feature

stories/organization-owner/ORG-003-role-assignment.md

@@ -0,0 +1,28 @@
+# Assign Roles to Members
+
+**ID:** ORG-003
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As an organization owner, I want to assign different roles to team members so that I can control what each person can access and do within the organization.
+
+## Acceptance Criteria
+- [ ] Owner can create custom roles for the organization
+- [ ] Default roles: Owner, Admin, Member, Viewer
+- [ ] Each role has configurable permissions
+- [ ] Owner can assign/change roles for any member
+- [ ] Role changes take effect immediately
+- [ ] Members can view their own role and permissions
+- [ ] Audit log for role changes
+- [ ] At least one Owner must exist at all times
+
+## Technical Notes
+- RoleManager exists with basic role infrastructure
+- `getRolesAndOrganizationsForUserId` endpoint available
+- Need to expand Role model with permissions array
+- Consider permission inheritance (Admin inherits Member permissions)
+- JWT claims should include role for authorization
+
+## Related TODOs
+- Partial implementation exists in RoleManager

stories/organization-owner/ORG-004-org-branding.md

@@ -0,0 +1,27 @@
+# Customize Organization Branding
+
+**ID:** ORG-004
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As an organization owner, I want to customize the branding of my organization's login and account pages so that my team sees our company identity when authenticating.
+
+## Acceptance Criteria
+- [ ] Upload organization logo
+- [ ] Set primary and secondary brand colors
+- [ ] Custom login page welcome message
+- [ ] Organization name displayed on login/register
+- [ ] Preview branding changes before saving
+- [ ] Reset to default branding option
+- [ ] Branding applies to email templates (org-specific emails)
+
+## Technical Notes
+- Organization model needs branding fields (logo URL, colors, message)
+- Frontend components need to accept branding props
+- Email templates should support organization branding
+- Consider white-label subdomain support (org.idp.global)
+- Image storage similar to user avatars (EU-008)
+
+## Related TODOs
+- New feature - no existing infrastructure

stories/organization-owner/ORG-005-usage-analytics.md

@@ -0,0 +1,27 @@
+# View Organization Usage Analytics
+
+**ID:** ORG-005
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As an organization owner, I want to view analytics about how my organization uses the identity platform so that I can understand adoption and identify potential issues.
+
+## Acceptance Criteria
+- [ ] Dashboard showing key metrics (active users, logins, registrations)
+- [ ] Time-series charts for login activity
+- [ ] Most active users ranking
+- [ ] Failed login attempts summary
+- [ ] Authentication method breakdown (password, email link, 2FA)
+- [ ] Date range selector for historical data
+- [ ] Export analytics data (CSV, PDF)
+
+## Technical Notes
+- Need to aggregate login events per organization
+- Consider time-series database or aggregation pipeline in MongoDB
+- Privacy: show aggregates, not individual user activity details
+- Cache analytics for performance
+- Real-time updates via WebSocket for dashboard
+
+## Related TODOs
+- New feature - requires event logging infrastructure

stories/organization-owner/ORG-006-sso-config.md

@@ -0,0 +1,28 @@
+# Configure SSO for Organization
+
+**ID:** ORG-006
+**Priority:** High
+**Status:** Planned
+
+## User Story
+As an organization owner, I want to configure Single Sign-On with my company's identity provider so that employees can use their corporate credentials.
+
+## Acceptance Criteria
+- [ ] Support SAML 2.0 SSO configuration
+- [ ] Support OIDC/OAuth SSO configuration
+- [ ] Test connection before enabling
+- [ ] Auto-provision users on first SSO login (JIT provisioning)
+- [ ] Map SSO attributes to user profile fields
+- [ ] Option to require SSO for all org members
+- [ ] Bypass SSO for emergency admin access
+- [ ] Support multiple SSO providers per organization
+
+## Technical Notes
+- Implement SAML assertion consumer service
+- Store SSO configuration securely (encrypted secrets)
+- Certificate management for SAML
+- Consider using passport-saml and passport-openidconnect
+- Metadata endpoint for easy IdP configuration
+
+## Related TODOs
+- New feature - enterprise SSO capability

stories/organization-owner/ORG-007-audit-logs.md

@@ -0,0 +1,28 @@
+# View Organization Audit Logs
+
+**ID:** ORG-007
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As an organization owner, I want to view audit logs for my organization so that I can track security-relevant events and meet compliance requirements.
+
+## Acceptance Criteria
+- [ ] Log all security-relevant events (logins, role changes, member changes)
+- [ ] Searchable audit log interface
+- [ ] Filter by event type, user, date range
+- [ ] Each entry shows: timestamp, actor, action, target, IP address
+- [ ] Immutable logs (cannot be deleted or modified)
+- [ ] Export logs for compliance (CSV, JSON)
+- [ ] Retention policy configuration (90 days default)
+- [ ] Real-time event streaming option
+
+## Technical Notes
+- Create AuditLog collection with write-only access pattern
+- Index for efficient querying
+- Consider separate database/collection for audit data
+- Comply with SOC 2 / ISO 27001 logging requirements
+- Webhook option for SIEM integration
+
+## Related TODOs
+- New feature - compliance and security requirement

stories/organization-owner/ORG-008-subscription-management.md

@@ -0,0 +1,28 @@
+# Manage Subscription and Billing
+
+**ID:** ORG-008
+**Priority:** Medium
+**Status:** Planned
+
+## User Story
+As an organization owner, I want to manage my subscription plan and billing details so that I can upgrade, downgrade, or update payment methods as needed.
+
+## Acceptance Criteria
+- [ ] View current subscription plan and features
+- [ ] Compare available plans with feature matrix
+- [ ] Upgrade to higher plan with immediate effect
+- [ ] Downgrade with effect at end of billing period
+- [ ] Update payment method (credit card via Paddle)
+- [ ] View billing history and download invoices
+- [ ] Cancel subscription with confirmation
+- [ ] Apply coupon/discount codes
+
+## Technical Notes
+- Paddle integration exists (`paddlesetup` view, `BillingPlanManager`)
+- Enhance existing subscription view with more functionality
+- Paddle handles PCI compliance for payment data
+- Webhook handlers for subscription status changes
+- VAT handling for EU customers (Paddle manages this)
+
+## Related TODOs
+- Enhancement to existing Paddle integration

stories/organization-owner/ORG-009-global-apps.md

@@ -0,0 +1,65 @@
+# Connect Global Apps
+
+**ID:** ORG-009
+**Priority:** High
+**Status:** In Development
+**Phase:** 1
+
+## User Story
+As an organization owner, I want to connect and disconnect first-party apps (foss.global, task.vc, etc.) for my organization so that my team members can use these integrated services.
+
+## Acceptance Criteria
+- [ ] View list of available global apps (foss.global, task.vc)
+- [ ] See connection status for each global app
+- [ ] Connect a global app to the organization
+- [ ] Disconnect a global app from the organization
+- [ ] View which user connected the app and when
+- [ ] See what scopes/permissions each app requires
+- [ ] Toggle does not require page reload
+
+## Technical Notes
+- Global apps are pre-registered by the platform administrators
+- Uses `IAppConnection` to track org-to-app relationships
+- Connection creates OAuth authorization for the app
+- Apps access org data via granted scopes
+- No credentials shown to org owners (managed by platform)
+
+## Data Model
+
+```typescript
+interface IGlobalApp {
+  id: string;
+  type: 'global';
+  data: {
+    name: string;
+    description: string;
+    logoUrl: string;
+    appUrl: string;
+    oauthCredentials: IOAuthCredentials;
+    isActive: boolean;
+    category: string;
+  };
+}
+
+interface IAppConnection {
+  id: string;
+  data: {
+    organizationId: string;
+    appId: string;
+    appType: 'global' | 'partner' | 'custom_oidc';
+    status: 'active' | 'disconnected';
+    connectedAt: number;
+    connectedByUserId: string;
+    grantedScopes: string[];
+  };
+}
+```
+
+## UI Components
+- **AppsView** (`/account/org/:orgName/apps`) - Main tabbed interface
+- **Global Apps Tab** - List of global apps with toggle switches
+
+## Related Stories
+- ORG-010: Browse and Install Partner Apps (AppStore)
+- ORG-011: Create Custom OIDC Apps
+- DEV-004: Proper App ID Initialization

stories/organization-owner/ORG-010-app-store.md

@@ -0,0 +1,63 @@
+# Browse and Install Partner Apps
+
+**ID:** ORG-010
+**Priority:** Medium
+**Status:** Planned
+**Phase:** 3
+
+## User Story
+As an organization owner, I want to browse and install partner apps from the AppStore so that my organization can benefit from third-party integrations.
+
+## Acceptance Criteria
+- [ ] Browse available partner apps in the AppStore
+- [ ] Search apps by name or description
+- [ ] Filter apps by category
+- [ ] View curated sections (Featured, Popular, New)
+- [ ] View app details (description, screenshots, pricing)
+- [ ] See app install count and ratings
+- [ ] Install/connect a partner app to the organization
+- [ ] Uninstall/disconnect a partner app
+- [ ] View installed apps list
+
+## Technical Notes
+- Partner apps are submitted by other organizations (DEV-008)
+- Apps must be approved by platform admins before appearing in store
+- Uses `IPartnerApp` with `appStoreMetadata`
+- Connection uses same `IAppConnection` as global apps
+
+## Data Model
+
+```typescript
+interface IPartnerApp {
+  id: string;
+  type: 'partner';
+  data: {
+    name: string;
+    description: string;
+    logoUrl: string;
+    appUrl: string;
+    ownerOrganizationId: string;
+    oauthCredentials: IOAuthCredentials;
+    appStoreMetadata: {
+      shortDescription: string;
+      longDescription: string;
+      screenshots: string[];
+      category: string;
+      tags: string[];
+      pricing: { model: 'free' | 'paid' | 'freemium' };
+    };
+    approvalStatus: TAppApprovalStatus;
+    isPublished: boolean;
+    installCount: number;
+  };
+}
+```
+
+## UI Components
+- **AppsView** - App Store tab with search and categories
+- **AppStoreDetailView** (`/account/org/:orgName/apps/store/:appId`) - Full app details page
+
+## Related Stories
+- ORG-009: Connect Global Apps
+- ORG-011: Create Custom OIDC Apps
+- DEV-008: Submit App to AppStore

stories/organization-owner/ORG-011-custom-oidc-apps.md

@@ -0,0 +1,70 @@
+# Create Custom OIDC Apps
+
+**ID:** ORG-011
+**Priority:** Medium
+**Status:** Planned
+**Phase:** 2
+
+## User Story
+As an organization owner, I want to create custom OAuth/OIDC client applications so that I can integrate my own internal tools and services with the identity provider.
+
+## Acceptance Criteria
+- [ ] Create a new custom OIDC application
+- [ ] Configure application name and description
+- [ ] Upload application logo
+- [ ] Set application URL
+- [ ] Configure redirect URIs
+- [ ] Select allowed OAuth scopes
+- [ ] Choose grant types (authorization_code, client_credentials, refresh_token)
+- [ ] View client ID and client secret
+- [ ] Regenerate client secret if compromised
+- [ ] Edit existing applications
+- [ ] Delete applications
+- [ ] Configure token lifetimes
+
+## Technical Notes
+- Custom OIDC apps are organization-scoped
+- Client secret is hashed in database, shown only once at creation
+- Redirect URIs validated to prevent open redirect attacks
+- Standard OAuth 2.0 / OpenID Connect flows supported
+- PKCE support for public clients
+
+## Data Model
+
+```typescript
+interface ICustomOidcApp {
+  id: string;
+  type: 'custom_oidc';
+  data: {
+    name: string;
+    description: string;
+    logoUrl: string;
+    appUrl: string;
+    ownerOrganizationId: string;
+    oauthCredentials: IOAuthCredentials;
+    oidcSettings: {
+      accessTokenLifetime: number;  // seconds
+      refreshTokenLifetime: number; // seconds
+    };
+  };
+}
+
+interface IOAuthCredentials {
+  clientId: string;
+  clientSecretHash: string;
+  redirectUris: string[];
+  allowedScopes: string[];
+  grantTypes: ('authorization_code' | 'client_credentials' | 'refresh_token')[];
+}
+```
+
+## UI Components
+- **AppsView** - Custom OIDC tab with app list
+- **OidcAppFormView** (`/account/org/:orgName/apps/custom/new`) - Create new app form
+- **OidcAppFormView** (`/account/org/:orgName/apps/custom/:appId`) - Edit existing app
+
+## Related Stories
+- ORG-009: Connect Global Apps
+- ORG-010: Browse and Install Partner Apps
+- DEV-004: Proper App ID Initialization
+- DEV-005: Register OAuth Client App

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.4.3',
+  version: '1.10.0',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts/index.ts

@@ -8,16 +8,28 @@ export const runCli = async () => {
     feedMetadata: null,
     domain: 'idp.global',
     serveDir: paths.distWebDir,
+    securityHeaders: {
+      csp: {
+        defaultSrc: "'self'",
+        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://cdn.paddle.com", "https://public.profitwell.com"],
+        styleSrc: ["'self'", "'unsafe-inline'", "https://cdn.paddle.com", "https://assetbroker.lossless.one"],
+        imgSrc: ["'self'", "data:", "https:"],
+        fontSrc: ["'self'", "data:"],
+        connectSrc: ["'self'", "https://*.paddle.com", "https://buy.paddle.com", "https://checkout.paddle.com", "https://checkout-service.paddle.com", "https://cdn.paddle.com", "https://*.sentry.io", "https://public.profitwell.com", "wss:"],
+        frameSrc: ["https://buy.paddle.com", "https://checkout.paddle.com", "https://*.paddle.com"],
+      },
+    },
+    addCustomRoutes: async (typedserver) => {
+      // Enable SPA fallback - serves index.html for non-file routes (e.g., /login, /dashboard)
+      typedserver.options.spaFallback = true;
+    },
   });
 
   // lets add the reception routes
   const reception = new Reception({
     name: (await serviceQenv.getEnvVarOnDemand('INSTANCE_NAME')) || 'idp.global',
     mongoDescriptor: {
-      mongoDbUser: await serviceQenv.getEnvVarOnDemand('MONGO_DB_USER'),
+      mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGODB_URL'),
-      mongoDbName: await serviceQenv.getEnvVarOnDemand('MONGO_DB_NAME'),
-      mongoDbPass: await serviceQenv.getEnvVarOnDemand('MONGO_DB_PASS'),
-      mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'),
     },
     websiteServer: websiteServer,
     baseUrl: await serviceQenv.getEnvVarOnDemand('IDP_BASEURL'),

ts/reception/classes.activitylog.ts

@@ -0,0 +1,62 @@
+import * as plugins from '../plugins.js';
+import { ActivityLogManager } from './classes.activitylogmanager.js';
+
+/**
+ * ActivityLog tracks user actions for audit and display purposes
+ */
+@plugins.smartdata.Manager()
+export class ActivityLog extends plugins.smartdata.SmartDataDbDoc<
+  ActivityLog,
+  plugins.idpInterfaces.data.IActivityLog,
+  ActivityLogManager
+> {
+  // ======
+  // static
+  // ======
+  public static async createActivityLog(
+    managerArg: ActivityLogManager,
+    userId: string,
+    action: plugins.idpInterfaces.data.TActivityAction,
+    description: string,
+    metadata?: {
+      ip?: string;
+      userAgent?: string;
+      targetId?: string;
+      targetType?: string;
+    }
+  ) {
+    const activityLog = new managerArg.CActivityLog();
+    activityLog.id = plugins.smartunique.shortId();
+    activityLog.data = {
+      userId,
+      action,
+      timestamp: Date.now(),
+      metadata: {
+        description,
+        ...metadata,
+      },
+    };
+    await activityLog.save();
+    return activityLog;
+  }
+
+  // ========
+  // INSTANCE
+  // ========
+  @plugins.smartdata.unI()
+  public id: string;
+
+  @plugins.smartdata.svDb()
+  public data: plugins.idpInterfaces.data.IActivityLog['data'] = {
+    userId: null,
+    action: null,
+    timestamp: null,
+    metadata: {
+      description: null,
+    },
+  };
+
+  constructor() {
+    super();
+  }
+}

ts/reception/classes.activitylogmanager.ts

@@ -0,0 +1,77 @@
+import * as plugins from '../plugins.js';
+import { ActivityLog } from './classes.activitylog.js';
+import { Reception } from './classes.reception.js';
+
+export class ActivityLogManager {
+  // refs
+  public receptionRef: Reception;
+  public get db() {
+    return this.receptionRef.db.smartdataDb;
+  }
+
+  public CActivityLog = plugins.smartdata.setDefaultManagerForDoc(this, ActivityLog);
+
+  public typedRouter = new plugins.typedrequest.TypedRouter();
+
+  constructor(receptionRefArg: Reception) {
+    this.receptionRef = receptionRefArg;
+    this.receptionRef.typedrouter.addTypedRouter(this.typedRouter);
+
+    // Get user activity handler
+    this.typedRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetUserActivity>(
+        'getUserActivity',
+        async (requestArg) => {
+          const jwt = await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
+          if (!jwt) {
+            throw new plugins.typedrequest.TypedResponseError('Invalid JWT');
+          }
+
+          const limit = requestArg.limit || 20;
+          const offset = requestArg.offset || 0;
+
+          // Get activities for this user
+          const activities = await this.CActivityLog.getInstances({
+            'data.userId': jwt.data.userId,
+          });
+
+          // Sort by timestamp descending
+          const sortedActivities = activities
+            .sort((a, b) => b.data.timestamp - a.data.timestamp)
+            .slice(offset, offset + limit);
+
+          return {
+            activities: sortedActivities.map((a) => ({
+              id: a.id,
+              data: a.data,
+            })),
+            total: activities.length,
+          };
+        }
+      )
+    );
+  }
+
+  /**
+   * Log a user activity
+   */
+  public async logActivity(
+    userId: string,
+    action: plugins.idpInterfaces.data.TActivityAction,
+    description: string,
+    metadata?: {
+      ip?: string;
+      userAgent?: string;
+      targetId?: string;
+      targetType?: string;
+    }
+  ) {
+    return await ActivityLog.createActivityLog(
+      this,
+      userId,
+      action,
+      description,
+      metadata
+    );
+  }
+}

ts/reception/classes.app.ts

@@ -0,0 +1,40 @@
+import * as plugins from '../plugins.js';
+import type { AppManager } from './classes.appmanager.js';
+
+@plugins.smartdata.Manager()
+export class App extends plugins.smartdata.SmartDataDbDoc<
+  App,
+  plugins.idpInterfaces.data.IAppDocument,
+  AppManager
+> {
+  // INSTANCE
+  @plugins.smartdata.unI()
+  id: plugins.idpInterfaces.data.IAppDocument['id'];
+
+  @plugins.smartdata.svDb()
+  type: plugins.idpInterfaces.data.IAppDocument['type'];
+
+  @plugins.smartdata.svDb()
+  data: plugins.idpInterfaces.data.IAppDocument['data'];
+
+  /**
+   * Check if the app is a global app
+   */
+  public isGlobalApp(): this is App & { type: 'global' } {
+    return this.type === 'global';
+  }
+
+  /**
+   * Check if the app is a partner app
+   */
+  public isPartnerApp(): this is App & { type: 'partner' } {
+    return this.type === 'partner';
+  }
+
+  /**
+   * Check if the app is a custom OIDC app
+   */
+  public isCustomOidcApp(): this is App & { type: 'custom_oidc' } {
+    return this.type === 'custom_oidc';
+  }
+}

ts/reception/classes.appconnection.ts

@@ -0,0 +1,41 @@
+import * as plugins from '../plugins.js';
+import type { AppConnectionManager } from './classes.appconnectionmanager.js';
+
+@plugins.smartdata.Manager()
+export class AppConnection extends plugins.smartdata.SmartDataDbDoc<
+  AppConnection,
+  plugins.idpInterfaces.data.IAppConnection,
+  AppConnectionManager
+> {
+  // INSTANCE
+  @plugins.smartdata.unI()
+  id: plugins.idpInterfaces.data.IAppConnection['id'];
+
+  @plugins.smartdata.svDb()
+  data: plugins.idpInterfaces.data.IAppConnection['data'];
+
+  /**
+   * Check if the connection is active
+   */
+  public isActive(): boolean {
+    return this.data.status === 'active';
+  }
+
+  /**
+   * Disconnect the app
+   */
+  public async disconnect(): Promise<void> {
+    this.data.status = 'disconnected';
+    await this.save();
+  }
+
+  /**
+   * Reconnect the app
+   */
+  public async reconnect(userId: string): Promise<void> {
+    this.data.status = 'active';
+    this.data.connectedAt = Date.now();
+    this.data.connectedByUserId = userId;
+    await this.save();
+  }
+}

ts/reception/classes.appconnectionmanager.ts

@@ -0,0 +1,187 @@
+import * as plugins from '../plugins.js';
+import type { Reception } from './classes.reception.js';
+import { AppConnection } from './classes.appconnection.js';
+
+export class AppConnectionManager {
+  public receptionRef: Reception;
+  public get db() {
+    return this.receptionRef.db.smartdataDb;
+  }
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
+  public CAppConnection = plugins.smartdata.setDefaultManagerForDoc(this, AppConnection);
+
+  constructor(receptionRefArg: Reception) {
+    this.receptionRef = receptionRefArg;
+    this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
+
+    // Handler: Get app connections for an organization
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetAppConnections>(
+        'getAppConnections',
+        async (requestArg) => {
+          // Verify JWT and get user
+          const jwtData = await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
+          const user = await this.receptionRef.userManager.CUser.getInstance({
+            id: jwtData.data.userId,
+          });
+
+          // Check user has access to the organization
+          const organization = await this.receptionRef.organizationmanager.COrganization.getInstance({
+            id: requestArg.organizationId,
+          });
+
+          if (!organization) {
+            throw new plugins.typedrequest.TypedResponseError('Organization not found');
+          }
+
+          const role = await this.receptionRef.roleManager.CRole.getInstance({
+            data: {
+              organizationId: organization.id,
+              userId: user.id,
+            },
+          });
+
+          if (!role) {
+            throw new plugins.typedrequest.TypedResponseError(
+              'User not authorized for this organization'
+            );
+          }
+
+          // Get all connections for this organization
+          const connections = await this.CAppConnection.getInstances({
+            'data.organizationId': requestArg.organizationId,
+          });
+
+          const connectionObjects = await Promise.all(
+            connections.map(async (conn) => await conn.createSavableObject())
+          );
+
+          return {
+            connections: connectionObjects,
+          };
+        }
+      )
+    );
+
+    // Handler: Toggle app connection (connect/disconnect)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_ToggleAppConnection>(
+        'toggleAppConnection',
+        async (requestArg) => {
+          // Verify JWT and get user
+          const jwtData = await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
+          const user = await this.receptionRef.userManager.CUser.getInstance({
+            id: jwtData.data.userId,
+          });
+
+          // Check user has admin access to the organization
+          const organization = await this.receptionRef.organizationmanager.COrganization.getInstance({
+            id: requestArg.organizationId,
+          });
+
+          if (!organization) {
+            throw new plugins.typedrequest.TypedResponseError('Organization not found');
+          }
+
+          const isAdmin = await organization.checkIfUserIsAdmin(user);
+          if (!isAdmin) {
+            throw new plugins.typedrequest.TypedResponseError(
+              'Only organization admins can manage app connections'
+            );
+          }
+
+          // Get the app
+          const app = await this.receptionRef.appManager.getAppById(requestArg.appId);
+          if (!app) {
+            throw new plugins.typedrequest.TypedResponseError('App not found');
+          }
+
+          // Find existing connection
+          let connection = await this.CAppConnection.getInstance({
+            'data.organizationId': requestArg.organizationId,
+            'data.appId': requestArg.appId,
+          });
+
+          if (requestArg.action === 'connect') {
+            if (connection && connection.isActive()) {
+              // Already connected
+              return {
+                success: true,
+                connection: await connection.createSavableObject(),
+              };
+            }
+
+            if (connection) {
+              // Reconnect existing connection
+              await connection.reconnect(user.id);
+            } else {
+              // Create new connection
+              connection = new AppConnection();
+              connection.id = plugins.smartunique.shortId();
+              connection.data = {
+                organizationId: requestArg.organizationId,
+                appId: requestArg.appId,
+                appType: app.type,
+                status: 'active',
+                connectedAt: Date.now(),
+                connectedByUserId: user.id,
+                grantedScopes: app.data.oauthCredentials?.allowedScopes || [],
+              };
+              await connection.save();
+            }
+
+            return {
+              success: true,
+              connection: await connection.createSavableObject(),
+            };
+          } else {
+            // Disconnect
+            if (!connection) {
+              return {
+                success: true,
+              };
+            }
+
+            await connection.disconnect();
+
+            return {
+              success: true,
+              connection: await connection.createSavableObject(),
+            };
+          }
+        }
+      )
+    );
+  }
+
+  /**
+   * Get all connections for an organization
+   */
+  public async getConnectionsForOrganization(organizationId: string): Promise<AppConnection[]> {
+    return await this.CAppConnection.getInstances({
+      'data.organizationId': organizationId,
+    });
+  }
+
+  /**
+   * Get connection for a specific app and organization
+   */
+  public async getConnection(
+    organizationId: string,
+    appId: string
+  ): Promise<AppConnection | null> {
+    return await this.CAppConnection.getInstance({
+      'data.organizationId': organizationId,
+      'data.appId': appId,
+    });
+  }
+
+  /**
+   * Check if an app is connected to an organization
+   */
+  public async isAppConnected(organizationId: string, appId: string): Promise<boolean> {
+    const connection = await this.getConnection(organizationId, appId);
+    return connection?.isActive() || false;
+  }
+}

ts/reception/classes.appmanager.ts

@@ -0,0 +1,316 @@
+import * as plugins from '../plugins.js';
+import type { Reception } from './classes.reception.js';
+import { App } from './classes.app.js';
+// Note: App class is imported for use with setDefaultManagerForDoc
+
+export class AppManager {
+  public receptionRef: Reception;
+  public get db() {
+    return this.receptionRef.db.smartdataDb;
+  }
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
+  public CApp = plugins.smartdata.setDefaultManagerForDoc(this, App);
+
+  constructor(receptionRefArg: Reception) {
+    this.receptionRef = receptionRefArg;
+    this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
+
+    // Handler: Get all global apps (for org owners)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetGlobalApps>(
+        'getGlobalApps',
+        async (requestArg) => {
+          // Verify JWT
+          await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
+
+          // Get all active global apps
+          const globalApps = await this.CApp.getInstances({
+            type: 'global',
+            'data.isActive': true,
+          });
+
+          const appObjects = await Promise.all(
+            globalApps.map(async (app) => await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp)
+          );
+
+          return {
+            apps: appObjects,
+          };
+        }
+      )
+    );
+
+    // Handler: Check if user is global admin
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_CheckGlobalAdmin>(
+        'checkGlobalAdmin',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwt(requestArg.jwt);
+          return {
+            isGlobalAdmin: user?.data?.isGlobalAdmin ?? false,
+          };
+        }
+      )
+    );
+
+    // Handler: Get global apps with stats (admin only)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetGlobalAppStats>(
+        'getGlobalAppStats',
+        async (requestArg) => {
+          await this.verifyGlobalAdmin(requestArg.jwt);
+
+          // Get all global apps (including inactive)
+          const globalApps = await this.CApp.getInstances({
+            type: 'global',
+          });
+
+          const appsWithStats = await Promise.all(
+            globalApps.map(async (app) => {
+              const connections = await this.receptionRef.appConnectionManager.CAppConnection.getInstances({
+                'data.appId': app.id,
+                'data.status': 'active',
+              });
+              return {
+                app: await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp,
+                connectionCount: connections.length,
+              };
+            })
+          );
+
+          return { apps: appsWithStats };
+        }
+      )
+    );
+
+    // Handler: Create global app (admin only)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_CreateGlobalApp>(
+        'createGlobalApp',
+        async (requestArg) => {
+          const jwtData = await this.verifyGlobalAdmin(requestArg.jwt);
+
+          // Generate OAuth credentials
+          const clientId = `app-${plugins.smartunique.shortId(12)}`;
+          const clientSecret = plugins.smartunique.shortId(32);
+          const clientSecretHash = await plugins.smarthash.sha256FromString(clientSecret);
+
+          const app = new this.CApp();
+          app.id = `app-${plugins.smartunique.shortId(8)}`;
+          app.type = 'global';
+          app.data = {
+            name: requestArg.name,
+            description: requestArg.description,
+            logoUrl: requestArg.logoUrl,
+            appUrl: requestArg.appUrl,
+            category: requestArg.category,
+            isActive: true,
+            createdAt: Date.now(),
+            createdByUserId: jwtData.data.userId,
+            oauthCredentials: {
+              clientId,
+              clientSecretHash,
+              redirectUris: requestArg.redirectUris,
+              allowedScopes: requestArg.allowedScopes,
+              grantTypes: ['authorization_code', 'refresh_token'],
+            },
+          };
+          await app.save();
+
+          return {
+            app: await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp,
+            clientSecret, // Only shown once
+          };
+        }
+      )
+    );
+
+    // Handler: Update global app (admin only)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_UpdateGlobalApp>(
+        'updateGlobalApp',
+        async (requestArg) => {
+          await this.verifyGlobalAdmin(requestArg.jwt);
+
+          const app = await this.CApp.getInstance({ id: requestArg.appId });
+          if (!app) {
+            throw new Error('App not found');
+          }
+
+          if (!app.isGlobalApp()) {
+            throw new Error('Can only update global apps');
+          }
+
+          // Update allowed fields - cast data to global app type after type guard
+          const appData = app.data as plugins.idpInterfaces.data.IGlobalApp['data'];
+          if (requestArg.updates.name !== undefined) appData.name = requestArg.updates.name;
+          if (requestArg.updates.description !== undefined) appData.description = requestArg.updates.description;
+          if (requestArg.updates.logoUrl !== undefined) appData.logoUrl = requestArg.updates.logoUrl;
+          if (requestArg.updates.appUrl !== undefined) appData.appUrl = requestArg.updates.appUrl;
+          if (requestArg.updates.category !== undefined) appData.category = requestArg.updates.category;
+          if (requestArg.updates.isActive !== undefined) appData.isActive = requestArg.updates.isActive;
+          if (requestArg.updates.redirectUris !== undefined) appData.oauthCredentials.redirectUris = requestArg.updates.redirectUris;
+          if (requestArg.updates.allowedScopes !== undefined) appData.oauthCredentials.allowedScopes = requestArg.updates.allowedScopes;
+
+          await app.save();
+
+          return {
+            app: await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp,
+          };
+        }
+      )
+    );
+
+    // Handler: Delete global app (admin only)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_DeleteGlobalApp>(
+        'deleteGlobalApp',
+        async (requestArg) => {
+          await this.verifyGlobalAdmin(requestArg.jwt);
+
+          const app = await this.CApp.getInstance({ id: requestArg.appId });
+          if (!app) {
+            throw new Error('App not found');
+          }
+
+          // Get and disconnect all connections
+          const connections = await this.receptionRef.appConnectionManager.CAppConnection.getInstances({
+            'data.appId': requestArg.appId,
+          });
+
+          for (const connection of connections) {
+            await connection.delete();
+          }
+
+          await app.delete();
+
+          return {
+            success: true,
+            disconnectedOrganizations: connections.length,
+          };
+        }
+      )
+    );
+
+    // Handler: Regenerate OAuth credentials (admin only)
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_RegenerateAppCredentials>(
+        'regenerateAppCredentials',
+        async (requestArg) => {
+          await this.verifyGlobalAdmin(requestArg.jwt);
+
+          const app = await this.CApp.getInstance({ id: requestArg.appId });
+          if (!app) {
+            throw new Error('App not found');
+          }
+
+          // Generate new credentials
+          const clientId = `app-${plugins.smartunique.shortId(12)}`;
+          const clientSecret = plugins.smartunique.shortId(32);
+          const clientSecretHash = await plugins.smarthash.sha256FromString(clientSecret);
+
+          app.data.oauthCredentials.clientId = clientId;
+          app.data.oauthCredentials.clientSecretHash = clientSecretHash;
+          await app.save();
+
+          return {
+            clientId,
+            clientSecret, // Only shown once
+          };
+        }
+      )
+    );
+  }
+
+  /**
+   * Verify that the user is a global admin
+   */
+  private async verifyGlobalAdmin(jwt: string) {
+    const jwtData = await this.receptionRef.jwtManager.verifyJWTAndGetData(jwt);
+    const user = await this.receptionRef.userManager.getUserByJwt(jwt);
+    if (!user?.data?.isGlobalAdmin) {
+      throw new Error('Access denied: Global admin privileges required');
+    }
+    return jwtData;
+  }
+
+  /**
+   * Get all global apps
+   */
+  public async getGlobalApps(): Promise<App[]> {
+    return await this.CApp.getInstances({
+      type: 'global',
+    });
+  }
+
+  /**
+   * Get app by ID
+   */
+  public async getAppById(appId: string): Promise<App | null> {
+    return await this.CApp.getInstance({
+      id: appId,
+    });
+  }
+
+  /**
+   * Seed initial global apps (for development/testing)
+   */
+  public async seedGlobalApps() {
+    const defaultGlobalApps: Partial<plugins.idpInterfaces.data.IGlobalApp>[] = [
+      {
+        id: 'app-foss-global',
+        type: 'global',
+        data: {
+          name: 'foss.global',
+          description: 'Open Source Package Registry and Collaboration Platform',
+          logoUrl: 'https://foss.global/assets/logo.png',
+          appUrl: 'https://foss.global',
+          oauthCredentials: {
+            clientId: 'foss-global-client',
+            clientSecretHash: '', // Will be set when OAuth is configured
+            redirectUris: ['https://foss.global/auth/callback'],
+            allowedScopes: ['openid', 'profile', 'email', 'organizations'],
+            grantTypes: ['authorization_code', 'refresh_token'],
+          },
+          isActive: true,
+          category: 'Development',
+          createdAt: Date.now(),
+          createdByUserId: 'system',
+        },
+      },
+      {
+        id: 'app-task-vc',
+        type: 'global',
+        data: {
+          name: 'task.vc',
+          description: 'Task Management and Project Collaboration',
+          logoUrl: 'https://task.vc/assets/logo.png',
+          appUrl: 'https://task.vc',
+          oauthCredentials: {
+            clientId: 'task-vc-client',
+            clientSecretHash: '',
+            redirectUris: ['https://task.vc/auth/callback'],
+            allowedScopes: ['openid', 'profile', 'email', 'organizations'],
+            grantTypes: ['authorization_code', 'refresh_token'],
+          },
+          isActive: true,
+          category: 'Productivity',
+          createdAt: Date.now(),
+          createdByUserId: 'system',
+        },
+      },
+    ];
+
+    for (const appData of defaultGlobalApps) {
+      const existing = await this.CApp.getInstance({ id: appData.id });
+      if (!existing) {
+        const app = new this.CApp();
+        app.id = appData.id!;
+        app.type = appData.type!;
+        app.data = appData.data as any;
+        await app.save();
+      }
+    }
+  }
+}

ts/reception/classes.billingplanmanager.ts

@@ -59,6 +59,17 @@ export class BillingPlanManager {
           }
         }
       }
-    }))
+    }));
+
+    // Paddle configuration endpoint
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetPaddleConfig>(
+        'getPaddleConfig',
+        async () => ({
+          paddleToken: await this.receptionRef.serviceQenv.getEnvVarOnDemand('PADDLE_TOKEN'),
+          paddlePriceId: await this.receptionRef.serviceQenv.getEnvVarOnDemand('PADDLE_PRICE_ID'),
+        })
+      )
+    );
   }
 }

ts/reception/classes.jwtmanager.ts

@@ -122,7 +122,7 @@ export class JwtManager {
 
   public async verifyJWTAndGetData(jwtArg: string): Promise<Jwt> {
     const jwtData: plugins.idpInterfaces.data.IJwt = await this.smartjwtInstance.verifyJWTAndGetData(jwtArg);
-    const jwt = await Jwt.getInstance({
+    const jwt = await this.CJwt.getInstance({
       id: jwtData.id,
     });
     if (jwt.blocked) {

ts/reception/classes.loginsession.ts

@@ -60,7 +60,10 @@ export class LoginSession extends plugins.smartdata.SmartDataDbDoc<
     validUntil: Date.now() + plugins.smarttime.getMilliSecondsFromUnits({ weeks: 1 }),
     invalidated: false,
     refreshToken: null,
-    deviceId: null
+    deviceId: null,
+    deviceInfo: null,
+    createdAt: Date.now(),
+    lastActive: Date.now(),
   };
 
   public transferToken: string;

ts/reception/classes.loginsessionmanager.ts

@@ -259,6 +259,83 @@ export class LoginSessionManager {
           ok: false
         }
       })
+    );
+
+    // Get all sessions for the current user
+    this.typedRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetUserSessions>(
+        'getUserSessions',
+        async (requestArg) => {
+          const jwt = await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
+          if (!jwt) {
+            throw new plugins.typedrequest.TypedResponseError('Invalid JWT');
+          }
+
+          // Get the current session's refresh token to identify the current session
+          const currentRefreshToken = jwt.data.refreshToken;
+
+          // Get all sessions for this user
+          const sessions = await this.CLoginSession.getInstances({
+            'data.userId': jwt.data.userId,
+            'data.invalidated': false,
+          });
+
+          return {
+            sessions: sessions.map((session) => ({
+              id: session.id,
+              deviceId: session.data.deviceId || 'unknown',
+              deviceName: session.data.deviceInfo?.deviceName || 'Unknown Device',
+              browser: session.data.deviceInfo?.browser || 'Unknown Browser',
+              os: session.data.deviceInfo?.os || 'Unknown OS',
+              ip: session.data.deviceInfo?.ip || 'Unknown',
+              lastActive: session.data.lastActive || session.data.createdAt || Date.now(),
+              createdAt: session.data.createdAt || Date.now(),
+              isCurrent: session.data.refreshToken === currentRefreshToken,
+            })),
+          };
+        }
       )
+    );
+
+    // Revoke a specific session
+    this.typedRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_RevokeSession>(
+        'revokeSession',
+        async (requestArg) => {
+          const jwt = await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
+          if (!jwt) {
+            throw new plugins.typedrequest.TypedResponseError('Invalid JWT');
+          }
+
+          // Get the session to revoke
+          const sessionToRevoke = await this.CLoginSession.getInstance({
+            id: requestArg.sessionId,
+            'data.userId': jwt.data.userId, // Ensure user can only revoke their own sessions
+          });
+
+          if (!sessionToRevoke) {
+            throw new plugins.typedrequest.TypedResponseError('Session not found');
+          }
+
+          // Don't allow revoking the current session via this method
+          if (sessionToRevoke.data.refreshToken === jwt.data.refreshToken) {
+            throw new plugins.typedrequest.TypedResponseError(
+              'Cannot revoke current session. Use logout instead.'
+            );
+          }
+
+          await sessionToRevoke.invalidate();
+
+          // Log the activity
+          await this.receptionRef.activityLogManager.logActivity(
+            jwt.data.userId,
+            'session_revoked',
+            `Revoked session on ${sessionToRevoke.data.deviceInfo?.deviceName || 'unknown device'}`
+          );
+
+          return { success: true };
+        }
+      )
+    );
   }
 }

ts/reception/classes.organization.ts

@@ -35,6 +35,6 @@ export class Organization extends plugins.smartdata.SmartDataDbDoc<
 
   public async checkIfUserIsAdmin(userArg: User) {
     const role = await this.manager.receptionRef.roleManager.getRoleForUserAndOrg(userArg, this);
-    return role.data.role === 'admin';
+    return role.data.roles?.includes('admin') || role.data.roles?.includes('owner');
   }
 }

ts/reception/classes.organizationmanager.ts

@@ -50,13 +50,14 @@ export class OrganizationManager {
                 action: 'create',
                 organizationId: newOrg.id,
                 userId: userData.id,
-                role: 'admin',
+                roles: ['owner'],
               });
               newOrg.data.roleIds.push(role.id);
               await newOrg.save();
               return {
                 nameAvailable: true,
-                resultingOrganization: await newOrg.createSavableObject()
+                resultingOrganization: await newOrg.createSavableObject(),
+                role: await role.createSavableObject(),
               }
               break;
           }

ts/reception/classes.reception.ts

@@ -13,6 +13,10 @@ import { ReceptionHousekeeping } from './classes.housekeeping.js';
 import { OrganizationManager } from './classes.organizationmanager.js';
 import { RoleManager } from './classes.rolemanager.js';
 import { BillingPlanManager } from './classes.billingplanmanager.js';
+import { AppManager } from './classes.appmanager.js';
+import { AppConnectionManager } from './classes.appconnectionmanager.js';
+import { ActivityLogManager } from './classes.activitylogmanager.js';
+import { UserInvitationManager } from './classes.userinvitationmanager.js';
 
 export interface IReceptionOptions {
   /**
@@ -41,6 +45,10 @@ export class Reception {
   public organizationmanager = new OrganizationManager(this);
   public roleManager = new RoleManager(this);
   public billingPlanManager = new BillingPlanManager(this);
+  public appManager = new AppManager(this);
+  public appConnectionManager = new AppConnectionManager(this);
+  public activityLogManager = new ActivityLogManager(this);
+  public userInvitationManager = new UserInvitationManager(this);
   housekeeping = new ReceptionHousekeeping(this);
 
   constructor(public options: IReceptionOptions) {

ts/reception/classes.receptionmailer.ts

@@ -268,4 +268,33 @@ export class ReceptionMailer {
       `),
     });
   }
+
+  public sendInvitationEmail(
+    email: string,
+    organizationName: string,
+    invitationToken: string,
+    baseUrl: string
+  ) {
+    const invitationUrl = `${baseUrl}/invite?token=${encodeURI(invitationToken)}`;
+
+    this.receptionRef.szPlatformClient.emailConnector.sendEmail({
+      from: `idp.global@${this.receptionRef.options.baseUrl} <noreply@mail.workspace.global>`,
+      title: `You've been invited to join ${organizationName}`,
+      to: email,
+      body: this.createBodyString(`
+        <h1>You're Invited!</h1>
+        <p>You've been invited to join <b>${organizationName}</b> on idp.global.</p>
+        <p>Click the button below to accept the invitation and join the organization.</p>
+        <a href="${invitationUrl}"><div class="button">
+          Accept Invitation
+        </div></a>
+        <p style="color: #888888; font-size: 12px; margin-top: 20px;">
+          If you don't have an account yet, you'll be able to create one when you accept the invitation.
+        </p>
+        <p style="color: #888888; font-size: 12px;">
+          This invitation will expire in 90 days.
+        </p>
+      `),
+    });
+  }
 }

ts/reception/classes.rolemanager.ts

@@ -15,13 +15,24 @@ export class RoleManager {
     this.receptionRef = receptionRefArg;
   }
 
+  /**
+   * Create, change, or delete a role for a user in an organization.
+   * Supports both old single-role and new multi-role patterns.
+   */
   public async modifyRoleForUserAtOrg(optionsArg: {
     action: 'create' | 'change' | 'delete';
     userId: string;
     organizationId: string;
-    role: plugins.idpInterfaces.data.IRole['data']['role'];
+    /** @deprecated Use `roles` instead */
+    role?: string;
+    /** Array of roles to assign */
+    roles?: string[];
   }) {
     let returnRole: Role;
+
+    // Support both old single role and new roles array
+    const roles = optionsArg.roles || (optionsArg.role ? [optionsArg.role] : ['viewer']);
+
     switch (optionsArg.action) {
       case 'create':
         returnRole = new this.CRole();
@@ -29,9 +40,35 @@ export class RoleManager {
         returnRole.data = {
           userId: optionsArg.userId,
           organizationId: optionsArg.organizationId,
-          role: optionsArg.role,
+          roles: roles,
         };
         await returnRole.save();
+        break;
+
+      case 'change':
+        returnRole = await this.CRole.getInstance({
+          data: {
+            userId: optionsArg.userId,
+            organizationId: optionsArg.organizationId,
+          },
+        });
+        if (returnRole) {
+          returnRole.data.roles = roles;
+          await returnRole.save();
+        }
+        break;
+
+      case 'delete':
+        returnRole = await this.CRole.getInstance({
+          data: {
+            userId: optionsArg.userId,
+            organizationId: optionsArg.organizationId,
+          },
+        });
+        if (returnRole) {
+          await returnRole.delete();
+        }
+        break;
     }
     return returnRole;
   }
@@ -54,4 +91,13 @@ export class RoleManager {
     });
     return roles;
   }
+
+  public async getAllRolesForOrg(organizationId: string) {
+    const roles = await this.CRole.getInstances({
+      data: {
+        organizationId: organizationId
+      }
+    });
+    return roles;
+  }
 }

ts/reception/classes.userinvitation.ts

@@ -0,0 +1,136 @@
+import * as plugins from '../plugins.js';
+
+/**
+ * UserInvitation represents an invitation to join one or more organizations.
+ *
+ * Key characteristics:
+ * - Unique by email (multiple orgs can share the same invitation)
+ * - Converts to real User on registration
+ * - Can fold into existing user if they add the email as secondary
+ * - Auto-expires after 90 days
+ */
+@plugins.smartdata.Manager()
+export class UserInvitation extends plugins.smartdata.SmartDataDbDoc<
+  UserInvitation,
+  plugins.idpInterfaces.data.IUserInvitation
+> {
+  // STATIC
+  public static readonly EXPIRY_DAYS = 90;
+
+  public static generateToken(): string {
+    return plugins.smartunique.shortId() + '-' + plugins.smartunique.shortId();
+  }
+
+  public static async createNewInvitation(
+    email: string,
+    organizationId: string,
+    invitedByUserId: string,
+    roles: string[]
+  ): Promise<UserInvitation> {
+    const invitation = new UserInvitation();
+    invitation.id = plugins.smartunique.shortId();
+    const now = Date.now();
+    const expiresAt = now + (UserInvitation.EXPIRY_DAYS * 24 * 60 * 60 * 1000);
+
+    invitation.data = {
+      email: email.toLowerCase().trim(),
+      token: UserInvitation.generateToken(),
+      status: 'pending',
+      createdAt: now,
+      expiresAt: expiresAt,
+      organizationRefs: [{
+        organizationId,
+        invitedByUserId,
+        invitedAt: now,
+        roles,
+      }],
+    };
+
+    await invitation.save();
+    return invitation;
+  }
+
+  // INSTANCE
+  @plugins.smartdata.unI()
+  id: string;
+
+  @plugins.smartdata.svDb()
+  public data: plugins.idpInterfaces.data.IUserInvitation['data'];
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Add another organization to this invitation
+   */
+  public async addOrganization(
+    organizationId: string,
+    invitedByUserId: string,
+    roles: string[]
+  ): Promise<void> {
+    // Check if org already exists
+    const existingRef = this.data.organizationRefs.find(
+      ref => ref.organizationId === organizationId
+    );
+
+    if (existingRef) {
+      // Update roles for existing org ref
+      existingRef.roles = roles;
+      existingRef.invitedAt = Date.now();
+      existingRef.invitedByUserId = invitedByUserId;
+    } else {
+      // Add new org ref
+      this.data.organizationRefs.push({
+        organizationId,
+        invitedByUserId,
+        invitedAt: Date.now(),
+        roles,
+      });
+    }
+
+    await this.save();
+  }
+
+  /**
+   * Remove an organization from this invitation
+   */
+  public async removeOrganization(organizationId: string): Promise<void> {
+    this.data.organizationRefs = this.data.organizationRefs.filter(
+      ref => ref.organizationId !== organizationId
+    );
+
+    // If no more org refs, cancel the invitation
+    if (this.data.organizationRefs.length === 0) {
+      this.data.status = 'cancelled';
+    }
+
+    await this.save();
+  }
+
+  /**
+   * Check if invitation is expired
+   */
+  public isExpired(): boolean {
+    return Date.now() > this.data.expiresAt || this.data.status === 'expired';
+  }
+
+  /**
+   * Mark invitation as accepted and record the user ID
+   */
+  public async accept(userId: string): Promise<void> {
+    this.data.status = 'accepted';
+    this.data.acceptedAt = Date.now();
+    this.data.convertedToUserId = userId;
+    await this.save();
+  }
+
+  /**
+   * Regenerate token and extend expiry (for resend)
+   */
+  public async regenerateToken(): Promise<void> {
+    this.data.token = UserInvitation.generateToken();
+    this.data.expiresAt = Date.now() + (UserInvitation.EXPIRY_DAYS * 24 * 60 * 60 * 1000);
+    await this.save();
+  }
+}

ts/reception/classes.userinvitationmanager.ts

@@ -0,0 +1,717 @@
+import * as plugins from '../plugins.js';
+import { Reception } from './classes.reception.js';
+import { UserInvitation } from './classes.userinvitation.js';
+import { Organization } from './classes.organization.js';
+import { User } from './classes.user.js';
+import { Role } from './classes.role.js';
+
+export class UserInvitationManager {
+  public receptionRef: Reception;
+  public get db() {
+    return this.receptionRef.db.smartdataDb;
+  }
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
+  public CUserInvitation = plugins.smartdata.setDefaultManagerForDoc(this, UserInvitation);
+
+  constructor(receptionRefArg: Reception) {
+    this.receptionRef = receptionRefArg;
+    this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
+
+    this.setupHandlers();
+  }
+
+  private setupHandlers() {
+    // Create invitation
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_CreateInvitation>(
+        'createInvitation',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsAdminOfOrg(user.id, requestArg.organizationId);
+
+          const email = requestArg.email.toLowerCase().trim();
+
+          // Check if user with this email already exists
+          const existingUser = await this.receptionRef.userManager.CUser.getInstance({
+            data: { email },
+          });
+          if (existingUser) {
+            // User already exists - just add them to the org directly
+            const existingRole = await this.receptionRef.roleManager.CRole.getInstance({
+              data: {
+                userId: existingUser.id,
+                organizationId: requestArg.organizationId,
+              },
+            });
+            if (existingRole) {
+              return {
+                success: false,
+                isNew: false,
+                message: 'User is already a member of this organization.',
+              };
+            }
+            // Add user to org with the specified roles
+            await this.receptionRef.roleManager.modifyRoleForUserAtOrg({
+              action: 'create',
+              userId: existingUser.id,
+              organizationId: requestArg.organizationId,
+              roles: requestArg.roles,
+            });
+            return {
+              success: true,
+              isNew: false,
+              message: 'Existing user has been added to the organization.',
+            };
+          }
+
+          // Check if invitation already exists for this email
+          let invitation = await this.CUserInvitation.getInstance({
+            data: { email },
+          });
+
+          let isNew = false;
+          if (invitation) {
+            // Add org to existing invitation
+            await invitation.addOrganization(requestArg.organizationId, user.id, requestArg.roles);
+          } else {
+            // Create new invitation
+            invitation = await UserInvitation.createNewInvitation(
+              email,
+              requestArg.organizationId,
+              user.id,
+              requestArg.roles
+            );
+            isNew = true;
+          }
+
+          // Send invitation email
+          await this.sendInvitationEmail(invitation, requestArg.organizationId);
+
+          return {
+            success: true,
+            invitation: await invitation.createSavableObject(),
+            isNew,
+          };
+        }
+      )
+    );
+
+    // Get org invitations
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetOrgInvitations>(
+        'getOrgInvitations',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsAdminOfOrg(user.id, requestArg.organizationId);
+
+          const allInvitations = await this.CUserInvitation.getInstances({});
+          const orgInvitations = allInvitations.filter(inv =>
+            inv.data.status === 'pending' &&
+            !inv.isExpired() &&
+            inv.data.organizationRefs.some(ref => ref.organizationId === requestArg.organizationId)
+          );
+
+          return {
+            invitations: await Promise.all(orgInvitations.map(inv => inv.createSavableObject())),
+          };
+        }
+      )
+    );
+
+    // Get org members
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetOrgMembers>(
+        'getOrgMembers',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsMemberOfOrg(user.id, requestArg.organizationId);
+
+          const roles = await this.receptionRef.roleManager.CRole.getInstances({
+            data: { organizationId: requestArg.organizationId },
+          });
+
+          const members: Array<{
+            user: plugins.idpInterfaces.data.IUser;
+            role: plugins.idpInterfaces.data.IRole;
+          }> = [];
+
+          for (const role of roles) {
+            const memberUser = await this.receptionRef.userManager.CUser.getInstance({
+              id: role.data.userId,
+            });
+            if (memberUser) {
+              members.push({
+                user: await memberUser.createSavableObject(),
+                role: await role.createSavableObject(),
+              });
+            }
+          }
+
+          return { members };
+        }
+      )
+    );
+
+    // Cancel invitation
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_CancelInvitation>(
+        'cancelInvitation',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsAdminOfOrg(user.id, requestArg.organizationId);
+
+          const invitation = await this.CUserInvitation.getInstance({ id: requestArg.invitationId });
+          if (!invitation) {
+            return { success: false, message: 'Invitation not found.' };
+          }
+
+          await invitation.removeOrganization(requestArg.organizationId);
+
+          return { success: true };
+        }
+      )
+    );
+
+    // Resend invitation
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_ResendInvitation>(
+        'resendInvitation',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsAdminOfOrg(user.id, requestArg.organizationId);
+
+          const invitation = await this.CUserInvitation.getInstance({ id: requestArg.invitationId });
+          if (!invitation) {
+            return { success: false, message: 'Invitation not found.' };
+          }
+
+          await invitation.regenerateToken();
+          await this.sendInvitationEmail(invitation, requestArg.organizationId);
+
+          return { success: true, message: 'Invitation resent.' };
+        }
+      )
+    );
+
+    // Remove member
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_RemoveMember>(
+        'removeMember',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsAdminOfOrg(user.id, requestArg.organizationId);
+
+          // Cannot remove yourself if you're the only owner
+          const role = await this.receptionRef.roleManager.CRole.getInstance({
+            data: {
+              userId: requestArg.userId,
+              organizationId: requestArg.organizationId,
+            },
+          });
+
+          if (!role) {
+            return { success: false, message: 'Member not found.' };
+          }
+
+          // Check if trying to remove an owner
+          if (role.data.roles.includes('owner')) {
+            // Count owners
+            const allRoles = await this.receptionRef.roleManager.CRole.getInstances({
+              data: { organizationId: requestArg.organizationId },
+            });
+            const ownerCount = allRoles.filter(r => r.data.roles.includes('owner')).length;
+            if (ownerCount <= 1) {
+              return {
+                success: false,
+                message: 'Cannot remove the last owner. Transfer ownership first.',
+              };
+            }
+          }
+
+          await role.delete();
+
+          // Remove org from user's connectedOrgs
+          const memberUser = await this.receptionRef.userManager.CUser.getInstance({
+            id: requestArg.userId,
+          });
+          if (memberUser && memberUser.data.connectedOrgs) {
+            memberUser.data.connectedOrgs = memberUser.data.connectedOrgs.filter(
+              orgId => orgId !== requestArg.organizationId
+            );
+            await memberUser.save();
+          }
+
+          return { success: true };
+        }
+      )
+    );
+
+    // Update member roles
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_UpdateMemberRoles>(
+        'updateMemberRoles',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsAdminOfOrg(user.id, requestArg.organizationId);
+
+          const role = await this.receptionRef.roleManager.CRole.getInstance({
+            data: {
+              userId: requestArg.userId,
+              organizationId: requestArg.organizationId,
+            },
+          });
+
+          if (!role) {
+            return { success: false, message: 'Member not found.' };
+          }
+
+          // If removing owner role, check we're not removing the last owner
+          if (role.data.roles.includes('owner') && !requestArg.roles.includes('owner')) {
+            const allRoles = await this.receptionRef.roleManager.CRole.getInstances({
+              data: { organizationId: requestArg.organizationId },
+            });
+            const ownerCount = allRoles.filter(r => r.data.roles.includes('owner')).length;
+            if (ownerCount <= 1) {
+              return {
+                success: false,
+                message: 'Cannot remove owner role from the last owner.',
+              };
+            }
+          }
+
+          role.data.roles = requestArg.roles;
+          await role.save();
+
+          return { success: true, role: await role.createSavableObject() };
+        }
+      )
+    );
+
+    // Transfer ownership
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_TransferOwnership>(
+        'transferOwnership',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+
+          // Verify current user is an owner
+          const currentUserRole = await this.receptionRef.roleManager.CRole.getInstance({
+            data: {
+              userId: user.id,
+              organizationId: requestArg.organizationId,
+            },
+          });
+          if (!currentUserRole || !currentUserRole.data.roles.includes('owner')) {
+            throw new plugins.typedrequest.TypedResponseError(
+              'Only owners can transfer ownership.'
+            );
+          }
+
+          // Get new owner's role
+          const newOwnerRole = await this.receptionRef.roleManager.CRole.getInstance({
+            data: {
+              userId: requestArg.newOwnerId,
+              organizationId: requestArg.organizationId,
+            },
+          });
+          if (!newOwnerRole) {
+            return { success: false, message: 'New owner must be a member of the organization.' };
+          }
+
+          // Add owner role to new owner
+          if (!newOwnerRole.data.roles.includes('owner')) {
+            newOwnerRole.data.roles.push('owner');
+            await newOwnerRole.save();
+          }
+
+          // Remove owner role from current user (but keep other roles)
+          currentUserRole.data.roles = currentUserRole.data.roles.filter(r => r !== 'owner');
+          if (currentUserRole.data.roles.length === 0) {
+            currentUserRole.data.roles = ['admin']; // Demote to admin
+          }
+          await currentUserRole.save();
+
+          return { success: true };
+        }
+      )
+    );
+
+    // Get invitation by token
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetInvitationByToken>(
+        'getInvitationByToken',
+        async (requestArg) => {
+          const invitation = await this.CUserInvitation.getInstance({
+            data: { token: requestArg.token },
+          });
+
+          if (!invitation) {
+            return { isExpired: true, requiresRegistration: false };
+          }
+
+          if (invitation.isExpired()) {
+            return { isExpired: true, requiresRegistration: false };
+          }
+
+          // Get organization names
+          const organizations: Array<{ id: string; name: string }> = [];
+          for (const ref of invitation.data.organizationRefs) {
+            const org = await this.receptionRef.organizationmanager.COrganization.getInstance({
+              id: ref.organizationId,
+            });
+            if (org) {
+              organizations.push({ id: org.id, name: org.data.name });
+            }
+          }
+
+          // Check if user with this email exists
+          const existingUser = await this.receptionRef.userManager.CUser.getInstance({
+            data: { email: invitation.data.email },
+          });
+
+          return {
+            invitation: await invitation.createSavableObject(),
+            organizations,
+            isExpired: false,
+            requiresRegistration: !existingUser,
+          };
+        }
+      )
+    );
+
+    // Accept invitation
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_AcceptInvitation>(
+        'acceptInvitation',
+        async (requestArg) => {
+          const invitation = await this.CUserInvitation.getInstance({
+            data: { token: requestArg.token },
+          });
+
+          if (!invitation) {
+            return { success: false, message: 'Invalid invitation token.' };
+          }
+
+          if (invitation.isExpired()) {
+            return { success: false, message: 'This invitation has expired.' };
+          }
+
+          const user = await this.receptionRef.userManager.CUser.getInstance({
+            id: requestArg.userId,
+          });
+          if (!user) {
+            return { success: false, message: 'User not found.' };
+          }
+
+          // Create roles for each organization
+          const organizations: plugins.idpInterfaces.data.IOrganization[] = [];
+          const roles: plugins.idpInterfaces.data.IRole[] = [];
+
+          for (const ref of invitation.data.organizationRefs) {
+            // Check if role already exists
+            let role = await this.receptionRef.roleManager.CRole.getInstance({
+              data: {
+                userId: user.id,
+                organizationId: ref.organizationId,
+              },
+            });
+
+            if (!role) {
+              role = await this.receptionRef.roleManager.modifyRoleForUserAtOrg({
+                action: 'create',
+                userId: user.id,
+                organizationId: ref.organizationId,
+                roles: ref.roles,
+              });
+            }
+
+            roles.push(await role.createSavableObject());
+
+            const org = await this.receptionRef.organizationmanager.COrganization.getInstance({
+              id: ref.organizationId,
+            });
+            if (org) {
+              // Add role to org's roleIds if not already there
+              if (!org.data.roleIds.includes(role.id)) {
+                org.data.roleIds.push(role.id);
+                await org.save();
+              }
+              organizations.push(await org.createSavableObject());
+            }
+
+            // Update user's connectedOrgs
+            if (!user.data.connectedOrgs) {
+              user.data.connectedOrgs = [];
+            }
+            if (!user.data.connectedOrgs.includes(ref.organizationId)) {
+              user.data.connectedOrgs.push(ref.organizationId);
+            }
+          }
+
+          await user.save();
+          await invitation.accept(user.id);
+
+          return { success: true, organizations, roles };
+        }
+      )
+    );
+
+    // Bulk create invitations
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_BulkCreateInvitations>(
+        'bulkCreateInvitations',
+        async (requestArg) => {
+          const user = await this.receptionRef.userManager.getUserByJwtValidation(requestArg.jwt);
+          await this.verifyUserIsAdminOfOrg(user.id, requestArg.organizationId);
+
+          const org = await this.receptionRef.organizationmanager.COrganization.getInstance({
+            id: requestArg.organizationId,
+          });
+          const orgName = org?.data.name || 'an organization';
+
+          const results: Array<{
+            email: string;
+            success: boolean;
+            status: 'invited' | 'already_member' | 'invalid_email' | 'error';
+            message?: string;
+          }> = [];
+          const summary = {
+            total: 0,
+            invited: 0,
+            alreadyMembers: 0,
+            invalid: 0,
+            errors: 0,
+          };
+
+          // Deduplicate emails in the batch
+          const processedEmails = new Set<string>();
+
+          for (const inv of requestArg.invitations) {
+            summary.total++;
+            const email = inv.email?.toLowerCase().trim();
+
+            // Validate email format
+            if (!email || !this.isValidEmail(email)) {
+              results.push({
+                email: inv.email || '',
+                success: false,
+                status: 'invalid_email',
+                message: 'Invalid email format',
+              });
+              summary.invalid++;
+              continue;
+            }
+
+            // Skip duplicates within batch
+            if (processedEmails.has(email)) {
+              results.push({
+                email,
+                success: false,
+                status: 'invalid_email',
+                message: 'Duplicate email in batch',
+              });
+              summary.invalid++;
+              continue;
+            }
+            processedEmails.add(email);
+
+            try {
+              // Check if user with this email already exists
+              const existingUser = await this.receptionRef.userManager.CUser.getInstance({
+                data: { email },
+              });
+
+              if (existingUser) {
+                // Check if already a member
+                const existingRole = await this.receptionRef.roleManager.CRole.getInstance({
+                  data: {
+                    userId: existingUser.id,
+                    organizationId: requestArg.organizationId,
+                  },
+                });
+
+                if (existingRole) {
+                  results.push({
+                    email,
+                    success: false,
+                    status: 'already_member',
+                    message: 'Already a member of this organization',
+                  });
+                  summary.alreadyMembers++;
+                  continue;
+                }
+
+                // Add existing user to org
+                const roles = inv.roles?.length ? inv.roles : requestArg.defaultRoles;
+                await this.receptionRef.roleManager.modifyRoleForUserAtOrg({
+                  action: 'create',
+                  userId: existingUser.id,
+                  organizationId: requestArg.organizationId,
+                  roles,
+                });
+                results.push({
+                  email,
+                  success: true,
+                  status: 'invited',
+                  message: 'Existing user added to organization',
+                });
+                summary.invited++;
+                continue;
+              }
+
+              // Check if invitation already exists
+              let invitation = await this.CUserInvitation.getInstance({
+                data: { email },
+              });
+
+              const roles = inv.roles?.length ? inv.roles : requestArg.defaultRoles;
+
+              if (invitation) {
+                // Add org to existing invitation
+                await invitation.addOrganization(requestArg.organizationId, user.id, roles);
+              } else {
+                // Create new invitation
+                invitation = await UserInvitation.createNewInvitation(
+                  email,
+                  requestArg.organizationId,
+                  user.id,
+                  roles
+                );
+              }
+
+              // Send invitation email
+              await this.receptionRef.receptionMailer.sendInvitationEmail(
+                email,
+                orgName,
+                invitation.data.token,
+                this.receptionRef.options.baseUrl
+              );
+
+              results.push({
+                email,
+                success: true,
+                status: 'invited',
+              });
+              summary.invited++;
+            } catch (error: any) {
+              results.push({
+                email,
+                success: false,
+                status: 'error',
+                message: error.message || 'Unknown error',
+              });
+              summary.errors++;
+            }
+          }
+
+          return { success: true, results, summary };
+        }
+      )
+    );
+  }
+
+  /**
+   * Find invitation by email
+   */
+  public async getInvitationByEmail(email: string): Promise<UserInvitation | null> {
+    return this.CUserInvitation.getInstance({
+      data: { email: email.toLowerCase().trim() },
+    });
+  }
+
+  /**
+   * Get pending invitations for an email (for registration flow)
+   */
+  public async getPendingInvitationsForEmail(email: string): Promise<UserInvitation | null> {
+    const invitation = await this.getInvitationByEmail(email);
+    if (invitation && invitation.data.status === 'pending' && !invitation.isExpired()) {
+      return invitation;
+    }
+    return null;
+  }
+
+  /**
+   * Clean up expired invitations
+   */
+  public async cleanupExpiredInvitations(): Promise<number> {
+    const allInvitations = await this.CUserInvitation.getInstances({
+      data: { status: 'pending' },
+    });
+
+    let cleanedCount = 0;
+    for (const invitation of allInvitations) {
+      if (invitation.isExpired()) {
+        invitation.data.status = 'expired';
+        await invitation.save();
+        cleanedCount++;
+      }
+    }
+
+    return cleanedCount;
+  }
+
+  /**
+   * Send invitation email
+   */
+  private async sendInvitationEmail(
+    invitation: UserInvitation,
+    organizationId: string
+  ): Promise<void> {
+    const org = await this.receptionRef.organizationmanager.COrganization.getInstance({
+      id: organizationId,
+    });
+    const orgName = org?.data.name || 'an organization';
+
+    await this.receptionRef.receptionMailer.sendInvitationEmail(
+      invitation.data.email,
+      orgName,
+      invitation.data.token,
+      this.receptionRef.options.baseUrl
+    );
+  }
+
+  /**
+   * Verify user is admin/owner of organization
+   */
+  private async verifyUserIsAdminOfOrg(userId: string, organizationId: string): Promise<void> {
+    const role = await this.receptionRef.roleManager.CRole.getInstance({
+      data: { userId, organizationId },
+    });
+
+    if (!role) {
+      throw new plugins.typedrequest.TypedResponseError('Not a member of this organization.');
+    }
+
+    const hasAdminRole = role.data.roles.some(r =>
+      ['owner', 'admin'].includes(r)
+    );
+
+    if (!hasAdminRole) {
+      throw new plugins.typedrequest.TypedResponseError(
+        'You do not have permission to perform this action.'
+      );
+    }
+  }
+
+  /**
+   * Verify user is member of organization
+   */
+  private async verifyUserIsMemberOfOrg(userId: string, organizationId: string): Promise<void> {
+    const role = await this.receptionRef.roleManager.CRole.getInstance({
+      data: { userId, organizationId },
+    });
+
+    if (!role) {
+      throw new plugins.typedrequest.TypedResponseError('Not a member of this organization.');
+    }
+  }
+
+  /**
+   * Validate email format
+   */
+  private isValidEmail(email: string): boolean {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+}

ts/reception/classes.usermanager.ts

@@ -51,6 +51,7 @@ export class UserManager {
               connectedOrgs: user.data.connectedOrgs,
               status: null,
               password: null,
+              isGlobalAdmin: user.data.isGlobalAdmin,
             } as plugins.idpInterfaces.data.IUser['data']
           }
         }

ts_idpclient/classes.idpclient.ts

@@ -11,12 +11,12 @@ export class IdpClient {
 
   // INSTANCE PUBLIC
 
-  public appData: plugins.idpInterfaces.data.IApp;
+  public appData: plugins.idpInterfaces.data.IAppLegacy;
   public rolesReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
   public organizationsReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
 
   public parsedReceptionUrl: plugins.smarturl.Smarturl;
-  constructor(receptionBaseUrlArg: string, appDataArg?: plugins.idpInterfaces.data.IApp) {
+  constructor(receptionBaseUrlArg: string, appDataArg?: plugins.idpInterfaces.data.IAppLegacy) {
     if (receptionBaseUrlArg.endsWith('/')) {
       receptionBaseUrlArg = receptionBaseUrlArg.slice(0, -1);
     }
@@ -126,9 +126,9 @@ export class IdpClient {
     if (!refreshTokenArg) {
       extractedJwt = await this.helpers.extractDataFromJwtString(await this.getJwt());
     }
+    await this.typedsocketDeferred.promise;
     const refreshJwtReq =
-      new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
+      this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
-        this.parsedReceptionUrl.toString(),
         'refreshJwt'
       );
     const response = await refreshJwtReq.fire({
@@ -146,12 +146,12 @@ export class IdpClient {
   /**
    * can be used to switch between pages
    */
-  public async getTransferToken(appDataArg?: plugins.idpInterfaces.data.IApp): Promise<string> {
+  public async getTransferToken(appDataArg?: plugins.idpInterfaces.data.IAppLegacy): Promise<string> {
     const jwt = await this.performJwtHousekeeping();
     const extractedJwt = await this.helpers.extractDataFromJwtString(jwt);
+    await this.typedsocketDeferred.promise;
     const getTransferToken =
-      new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
+      this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-        this.parsedReceptionUrl.toString(),
         'exchangeRefreshTokenAndTransferToken'
       );
     const response = await getTransferToken.fire({
@@ -187,9 +187,9 @@ export class IdpClient {
     const url = plugins.smarturl.Smarturl.createFromUrl(href);
     const transferToken = url.searchParams['transfertoken'];
     if (transferToken) {
+      await this.typedsocketDeferred.promise;
       const getTransferToken =
-        new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
+        this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-          this.parsedReceptionUrl.toString(),
           'exchangeRefreshTokenAndTransferToken'
         );
       const response = await getTransferToken.fire({

ts_idpclient/classes.idprequests.ts

@@ -3,6 +3,7 @@ import type { IdpClient } from "./classes.idpclient.js";
 
 /**
  * this class bundles all the typed requests that are used by the idp
+ * All requests use TypedSocket (WebSocket) transport
  */
 export class IdpRequests {
   idpClientArg: IdpClient;
@@ -11,51 +12,44 @@ export class IdpRequests {
   }
 
   public get afterRegistrationEmailClicked () {
-    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_AfterRegistrationEmailClicked>(
+    return this.idpClientArg.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_AfterRegistrationEmailClicked>(
-      this.idpClientArg.parsedReceptionUrl.toString(),
       'afterRegistrationEmailClicked'
     );
   }
 
   public get setData() {
-    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_SetDataForRegistration>(
+    return this.idpClientArg.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_SetDataForRegistration>(
-      this.idpClientArg.parsedReceptionUrl.toString(),
       'setDataForRegistration'
     );
   }
 
   public get mobileNumberVerification () {
-    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_MobileVerificationForRegistration>(
+    return this.idpClientArg.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_MobileVerificationForRegistration>(
-      this.idpClientArg.parsedReceptionUrl.toString(),
       'mobileVerificationForRegistration'
     );
   }
 
 
   public get finishRegistration() {
-    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_FinishRegistration>(
+    return this.idpClientArg.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_FinishRegistration>(
-      this.idpClientArg.parsedReceptionUrl.toString(),
       'finishRegistration'
     );
   }
 
   public get loginWithUserNameAndPassword () {
-    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
+    return this.idpClientArg.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
-      this.idpClientArg.parsedReceptionUrl.toString(),
       'loginWithEmailOrUsernameAndPassword'
     );
   }
 
   public get obtainJwt () {
-    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
+    return this.idpClientArg.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
-      this.idpClientArg.parsedReceptionUrl.toString(),
       'refreshJwt'
     );
   }
 
   public get obtainOneTimeToken () {
-    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
+    return this.idpClientArg.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-      this.idpClientArg.parsedReceptionUrl.toString(),
       'exchangeRefreshTokenAndTransferToken'
     );
   }

ts_interfaces/data/index.ts

@@ -1,4 +1,6 @@
+export * from './loint-reception.activity.js';
 export * from './loint-reception.app.js';
+export * from './loint-reception.appconnection.js';
 export * from './loint-reception.billingplan.js';
 export * from './loint-reception.device.js';
 export * from './loint-reception.jwt.js';
@@ -7,3 +9,4 @@ export * from './loint-reception.organization.js';
 export * from './loint-reception.paddlecheckoutdata.js';
 export * from './loint-reception.role.js';
 export * from './loint-reception.user.js';
+export * from './loint-reception.userinvitation.js';

ts_interfaces/data/loint-reception.activity.ts

@@ -0,0 +1,28 @@
+export type TActivityAction =
+  | 'login'
+  | 'logout'
+  | 'session_created'
+  | 'session_revoked'
+  | 'org_created'
+  | 'org_joined'
+  | 'org_left'
+  | 'role_changed'
+  | 'profile_updated'
+  | 'app_connected'
+  | 'app_disconnected';
+
+export interface IActivityLog {
+  id: string;
+  data: {
+    userId: string;
+    action: TActivityAction;
+    timestamp: number;
+    metadata: {
+      ip?: string;
+      userAgent?: string;
+      targetId?: string;
+      targetType?: string;
+      description: string;
+    };
+  };
+}

ts_interfaces/data/loint-reception.app.ts

@@ -1,4 +1,80 @@
-export interface IApp {
+// App Types
+export type TAppType = 'global' | 'partner' | 'custom_oidc';
+export type TAppApprovalStatus = 'draft' | 'pending_review' | 'approved' | 'rejected' | 'suspended';
+
+// OAuth Credentials
+export interface IOAuthCredentials {
+  clientId: string;
+  clientSecretHash: string;
+  redirectUris: string[];
+  allowedScopes: string[];
+  grantTypes: ('authorization_code' | 'client_credentials' | 'refresh_token')[];
+}
+
+// Base app data shared by all app types
+export interface IAppBaseData {
+  name: string;
+  description: string;
+  logoUrl: string;
+  appUrl: string;
+}
+
+// Global App - First-party apps managed by platform (foss.global, task.vc, etc.)
+export interface IGlobalApp {
+  id: string;
+  type: 'global';
+  data: IAppBaseData & {
+    oauthCredentials: IOAuthCredentials;
+    isActive: boolean;
+    category: string;
+    createdAt: number;
+    createdByUserId: string;
+  };
+}
+
+// Partner App - Third-party apps submitted to AppStore
+export interface IPartnerApp {
+  id: string;
+  type: 'partner';
+  data: IAppBaseData & {
+    ownerOrganizationId: string;
+    oauthCredentials: IOAuthCredentials;
+    appStoreMetadata: {
+      shortDescription: string;
+      longDescription: string;
+      screenshots: string[];
+      category: string;
+      tags: string[];
+      pricing: { model: 'free' | 'paid' | 'freemium' };
+    };
+    approvalStatus: TAppApprovalStatus;
+    isPublished: boolean;
+    installCount: number;
+  };
+}
+
+// Custom OIDC App - Organization-created OAuth clients
+export interface ICustomOidcApp {
+  id: string;
+  type: 'custom_oidc';
+  data: IAppBaseData & {
+    ownerOrganizationId: string;
+    oauthCredentials: IOAuthCredentials;
+    oidcSettings: {
+      accessTokenLifetime: number; // seconds
+      refreshTokenLifetime: number; // seconds
+    };
+  };
+}
+
+// Union type for all app types
+export type IApp = IGlobalApp | IPartnerApp | ICustomOidcApp;
+
+/**
+ * Legacy interface for backwards compatibility with existing code
+ * that expects a flat app structure (e.g., idpclient, transfermanager)
+ */
+export interface IAppLegacy {
   /**
    * must be unique
    */
@@ -11,3 +87,13 @@ export interface IApp {
   logoUrl: string;
   appUrl: string;
 }
+
+/**
+ * Storage interface for SmartData documents
+ * Uses the discriminated union approach with a 'type' field
+ */
+export interface IAppDocument {
+  id: string;
+  type: TAppType;
+  data: IGlobalApp['data'] | IPartnerApp['data'] | ICustomOidcApp['data'];
+}

ts_interfaces/data/loint-reception.appconnection.ts

@@ -0,0 +1,16 @@
+import type { TAppType } from './loint-reception.app.js';
+
+export type TAppConnectionStatus = 'active' | 'disconnected';
+
+export interface IAppConnection {
+  id: string;
+  data: {
+    organizationId: string;
+    appId: string;
+    appType: TAppType;
+    status: TAppConnectionStatus;
+    connectedAt: number;
+    connectedByUserId: string;
+    grantedScopes: string[];
+  };
+}

ts_interfaces/data/loint-reception.loginsession.ts

@@ -10,5 +10,22 @@ export interface ILoginSession {
      * in different contexts on the same device
      */
     deviceId: string;
+    /**
+     * Device metadata for session display
+     */
+    deviceInfo?: {
+      deviceName: string;
+      browser: string;
+      os: string;
+      ip: string;
+    };
+    /**
+     * When this session was created
+     */
+    createdAt?: number;
+    /**
+     * Last time this session was active (e.g., refreshed)
+     */
+    lastActive?: number;
   };
 }

ts_interfaces/data/loint-reception.role.ts

@@ -1,13 +1,18 @@
 import * as plugins from '../loint-reception.plugins.js';
 
+/** Standard role types available in all organizations */
+export type TStandardRole = 'owner' | 'admin' | 'editor' | 'guest' | 'viewer' | 'outlaw';
+
 /**
- * a role describes a
+ * A role describes a user's permissions within an organization.
+ * Users can have multiple roles (e.g., ['owner', 'billing-admin']).
  */
 export interface IRole {
   id: string;
   data: {
     userId: string;
     organizationId: string;
-    role: 'owner' | 'admin' | 'editor' | 'guest' | 'viewer' | 'outlaw';
+    /** Array of roles - supports standard roles and custom role names */
+    roles: string[];
   };
 }

ts_interfaces/data/loint-reception.user.ts

@@ -26,5 +26,11 @@ export interface IUser {
      * speeds up lookup
      */
     connectedOrgs: string[];
+    /**
+     * Platform-level admin flag
+     * Users with this flag can access the global admin panel
+     * to manage global apps, view platform stats, etc.
+     */
+    isGlobalAdmin?: boolean;
   };
 }

ts_interfaces/data/loint-reception.userinvitation.ts

@@ -0,0 +1,58 @@
+import * as plugins from '../loint-reception.plugins.js';
+
+/**
+ * A UserInvitation represents an invitation to join an organization.
+ * Key characteristics:
+ * - Unique by email (multiple orgs can share the same invitation)
+ * - Converts to real User on registration or folds into existing user
+ * - Auto-expires after 90 days
+ */
+export interface IUserInvitation {
+  id: string;
+  data: {
+    /** The invited email address - unique key for sharing across orgs */
+    email: string;
+
+    /** Secure token for invitation link validation */
+    token: string;
+
+    /** Current status of the invitation */
+    status: 'pending' | 'accepted' | 'expired' | 'cancelled';
+
+    /** When the invitation was first created */
+    createdAt: number;
+
+    /** When the invitation expires (createdAt + 90 days) */
+    expiresAt: number;
+
+    /**
+     * Organizations that have invited this email.
+     * Multiple orgs can link to the same invitation.
+     */
+    organizationRefs: IOrganizationInvitationRef[];
+
+    /** When the invitation was accepted (user registered/folded) */
+    acceptedAt?: number;
+
+    /** The User ID after conversion (when accepted) */
+    convertedToUserId?: string;
+  };
+}
+
+/**
+ * Represents one organization's invitation to the user.
+ * Stored as part of IUserInvitation.organizationRefs array.
+ */
+export interface IOrganizationInvitationRef {
+  /** The organization that sent this invitation */
+  organizationId: string;
+
+  /** The user who sent the invitation */
+  invitedByUserId: string;
+
+  /** When this org invited the user */
+  invitedAt: number;
+
+  /** Roles to assign when the invitation is accepted */
+  roles: string[];
+}

ts_interfaces/request/index.ts

@@ -1,4 +1,6 @@
+export * from './loint-reception.admin.js';
 export * from './loint-reception.apitoken.js';
+export * from './loint-reception.app.js';
 export * from './loint-reception.authorization.js';
 export * from './loint-reception.billingplan.js';
 export * from './loint-reception.jwt.js';
@@ -7,3 +9,4 @@ export * from './loint-reception.organization.js';
 export * from './loint-reception.plan.js';
 export * from './loint-reception.registration.js';
 export * from './loint-reception.user.js';
+export * from './loint-reception.userinvitation.js';

ts_interfaces/request/loint-reception.admin.ts

@@ -0,0 +1,130 @@
+import * as plugins from '../loint-reception.plugins.js';
+import * as data from '../data/index.js';
+
+/**
+ * Check if the current user is a global admin
+ */
+export interface IReq_CheckGlobalAdmin
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_CheckGlobalAdmin
+  > {
+  method: 'checkGlobalAdmin';
+  request: {
+    jwt: string;
+  };
+  response: {
+    isGlobalAdmin: boolean;
+  };
+}
+
+/**
+ * Get all global apps with statistics (admin only)
+ */
+export interface IReq_GetGlobalAppStats
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetGlobalAppStats
+  > {
+  method: 'getGlobalAppStats';
+  request: {
+    jwt: string;
+  };
+  response: {
+    apps: Array<{
+      app: data.IGlobalApp;
+      connectionCount: number;
+    }>;
+  };
+}
+
+/**
+ * Create a new global app (admin only)
+ */
+export interface IReq_CreateGlobalApp
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_CreateGlobalApp
+  > {
+  method: 'createGlobalApp';
+  request: {
+    jwt: string;
+    name: string;
+    description: string;
+    logoUrl: string;
+    appUrl: string;
+    category: string;
+    redirectUris: string[];
+    allowedScopes: string[];
+  };
+  response: {
+    app: data.IGlobalApp;
+    clientSecret: string; // Only shown once on creation
+  };
+}
+
+/**
+ * Update an existing global app (admin only)
+ */
+export interface IReq_UpdateGlobalApp
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_UpdateGlobalApp
+  > {
+  method: 'updateGlobalApp';
+  request: {
+    jwt: string;
+    appId: string;
+    updates: {
+      name?: string;
+      description?: string;
+      logoUrl?: string;
+      appUrl?: string;
+      category?: string;
+      isActive?: boolean;
+      redirectUris?: string[];
+      allowedScopes?: string[];
+    };
+  };
+  response: {
+    app: data.IGlobalApp;
+  };
+}
+
+/**
+ * Delete a global app (admin only)
+ */
+export interface IReq_DeleteGlobalApp
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_DeleteGlobalApp
+  > {
+  method: 'deleteGlobalApp';
+  request: {
+    jwt: string;
+    appId: string;
+  };
+  response: {
+    success: boolean;
+    disconnectedOrganizations: number;
+  };
+}
+
+/**
+ * Regenerate OAuth credentials for a global app (admin only)
+ */
+export interface IReq_RegenerateAppCredentials
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_RegenerateAppCredentials
+  > {
+  method: 'regenerateAppCredentials';
+  request: {
+    jwt: string;
+    appId: string;
+  };
+  response: {
+    clientId: string;
+    clientSecret: string; // Only shown once
+  };
+}

ts_interfaces/request/loint-reception.app.ts

@@ -0,0 +1,52 @@
+import * as data from '../data/index.js';
+import * as plugins from '../loint-reception.plugins.js';
+
+// Get all global apps
+export interface IReq_GetGlobalApps
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetGlobalApps
+  > {
+  method: 'getGlobalApps';
+  request: {
+    jwt: string;
+  };
+  response: {
+    apps: data.IGlobalApp[];
+  };
+}
+
+// Get app connections for an organization
+export interface IReq_GetAppConnections
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetAppConnections
+  > {
+  method: 'getAppConnections';
+  request: {
+    jwt: string;
+    organizationId: string;
+  };
+  response: {
+    connections: data.IAppConnection[];
+  };
+}
+
+// Connect/disconnect an app for an organization
+export interface IReq_ToggleAppConnection
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_ToggleAppConnection
+  > {
+  method: 'toggleAppConnection';
+  request: {
+    jwt: string;
+    organizationId: string;
+    appId: string;
+    action: 'connect' | 'disconnect';
+  };
+  response: {
+    success: boolean;
+    connection?: data.IAppConnection;
+  };
+}

ts_interfaces/request/loint-reception.billingplan.ts

@@ -37,3 +37,19 @@ export interface IReq_GetBillingPlan
     billingPlan: data.IBillingPlan;
   };
 }
+
+/**
+ * Returns Paddle configuration from environment variables
+ */
+export interface IReq_GetPaddleConfig
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetPaddleConfig
+  > {
+  method: 'getPaddleConfig';
+  request: {};
+  response: {
+    paddleToken: string;
+    paddlePriceId: string;
+  };
+}

ts_interfaces/request/loint-reception.login.ts

@@ -103,7 +103,7 @@ export interface IReq_ExchangeRefreshTokenAndTransferToken
   request: {
     transferToken?: string;
     refreshToken?: string;
-    appData: data.IApp;
+    appData: data.IAppLegacy;
   };
   response: {
     refreshToken?: string;

ts_interfaces/request/loint-reception.user.ts

@@ -84,3 +84,59 @@ export interface IReq_WhoIs {
     user: data.IUser;
   };
 }
+
+export interface IReq_GetUserSessions
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetUserSessions
+  > {
+  method: 'getUserSessions';
+  request: {
+    jwt: string;
+  };
+  response: {
+    sessions: Array<{
+      id: string;
+      deviceId: string;
+      deviceName: string;
+      browser: string;
+      os: string;
+      ip: string;
+      lastActive: number;
+      createdAt: number;
+      isCurrent: boolean;
+    }>;
+  };
+}
+
+export interface IReq_RevokeSession
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_RevokeSession
+  > {
+  method: 'revokeSession';
+  request: {
+    jwt: string;
+    sessionId: string;
+  };
+  response: {
+    success: boolean;
+  };
+}
+
+export interface IReq_GetUserActivity
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetUserActivity
+  > {
+  method: 'getUserActivity';
+  request: {
+    jwt: string;
+    limit?: number;
+    offset?: number;
+  };
+  response: {
+    activities: data.IActivityLog[];
+    total: number;
+  };
+}

ts_interfaces/request/loint-reception.userinvitation.ts

@@ -0,0 +1,247 @@
+import * as data from '../data/index.js';
+import * as plugins from '../loint-reception.plugins.js';
+
+/**
+ * Create an invitation to join an organization
+ */
+export interface IReq_CreateInvitation
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_CreateInvitation
+  > {
+  method: 'createInvitation';
+  request: {
+    jwt: string;
+    organizationId: string;
+    email: string;
+    roles: string[];
+  };
+  response: {
+    success: boolean;
+    invitation?: data.IUserInvitation;
+    message?: string;
+    /** True if a new invitation was created, false if email was added to existing */
+    isNew: boolean;
+  };
+}
+
+/**
+ * Get pending invitations for an organization
+ */
+export interface IReq_GetOrgInvitations
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetOrgInvitations
+  > {
+  method: 'getOrgInvitations';
+  request: {
+    jwt: string;
+    organizationId: string;
+  };
+  response: {
+    invitations: data.IUserInvitation[];
+  };
+}
+
+/**
+ * Get members of an organization (users with roles)
+ */
+export interface IReq_GetOrgMembers
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetOrgMembers
+  > {
+  method: 'getOrgMembers';
+  request: {
+    jwt: string;
+    organizationId: string;
+  };
+  response: {
+    members: Array<{
+      user: data.IUser;
+      role: data.IRole;
+    }>;
+  };
+}
+
+/**
+ * Cancel a pending invitation
+ */
+export interface IReq_CancelInvitation
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_CancelInvitation
+  > {
+  method: 'cancelInvitation';
+  request: {
+    jwt: string;
+    organizationId: string;
+    invitationId: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Resend invitation email
+ */
+export interface IReq_ResendInvitation
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_ResendInvitation
+  > {
+  method: 'resendInvitation';
+  request: {
+    jwt: string;
+    organizationId: string;
+    invitationId: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Remove a member from an organization
+ */
+export interface IReq_RemoveMember
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_RemoveMember
+  > {
+  method: 'removeMember';
+  request: {
+    jwt: string;
+    organizationId: string;
+    userId: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Update a member's roles
+ */
+export interface IReq_UpdateMemberRoles
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_UpdateMemberRoles
+  > {
+  method: 'updateMemberRoles';
+  request: {
+    jwt: string;
+    organizationId: string;
+    userId: string;
+    roles: string[];
+  };
+  response: {
+    success: boolean;
+    role?: data.IRole;
+    message?: string;
+  };
+}
+
+/**
+ * Transfer organization ownership to another member
+ */
+export interface IReq_TransferOwnership
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_TransferOwnership
+  > {
+  method: 'transferOwnership';
+  request: {
+    jwt: string;
+    organizationId: string;
+    newOwnerId: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Accept an invitation (called during registration or email verification)
+ */
+export interface IReq_AcceptInvitation
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_AcceptInvitation
+  > {
+  method: 'acceptInvitation';
+  request: {
+    token: string;
+    userId: string;
+  };
+  response: {
+    success: boolean;
+    organizations?: data.IOrganization[];
+    roles?: data.IRole[];
+    message?: string;
+  };
+}
+
+/**
+ * Get invitation by token (for invitation landing page)
+ */
+export interface IReq_GetInvitationByToken
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_GetInvitationByToken
+  > {
+  method: 'getInvitationByToken';
+  request: {
+    token: string;
+  };
+  response: {
+    invitation?: data.IUserInvitation;
+    organizations?: Array<{
+      id: string;
+      name: string;
+    }>;
+    isExpired: boolean;
+    requiresRegistration: boolean;
+  };
+}
+
+/**
+ * Bulk create invitations from a list (typically from CSV import)
+ */
+export interface IReq_BulkCreateInvitations
+  extends plugins.typedRequestInterfaces.implementsTR<
+    plugins.typedRequestInterfaces.ITypedRequest,
+    IReq_BulkCreateInvitations
+  > {
+  method: 'bulkCreateInvitations';
+  request: {
+    jwt: string;
+    organizationId: string;
+    invitations: Array<{
+      email: string;
+      roles?: string[];
+    }>;
+    defaultRoles: string[];
+  };
+  response: {
+    success: boolean;
+    results: Array<{
+      email: string;
+      success: boolean;
+      status: 'invited' | 'already_member' | 'invalid_email' | 'error';
+      message?: string;
+    }>;
+    summary: {
+      total: number;
+      invited: number;
+      alreadyMembers: number;
+      invalid: number;
+      errors: number;
+    };
+  };
+}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.4.3',
+  version: '1.10.0',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts_web/elements/account/bulk-invite-modal.ts

@@ -0,0 +1,585 @@
+import * as plugins from '../../plugins.js';
+import {
+  customElement,
+  DeesElement,
+  html,
+  css,
+  cssManager,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { accountDesignTokens } from './sharedstyles.js';
+import { IdpState } from '../../states/idp.state.js';
+
+interface IParsedEmail {
+  email: string;
+  valid: boolean;
+  error?: string;
+}
+
+interface IBulkInviteResult {
+  invitedCount: number;
+  failedCount: number;
+  alreadyMemberCount: number;
+}
+
+// Internal form element for reactive state management
+@customElement('idp-bulk-invite-form')
+export class BulkInviteForm extends DeesElement {
+  @state()
+  accessor organizationId: string = '';
+
+  @state()
+  accessor organizationName: string = '';
+
+  @state()
+  accessor parsedEmails: IParsedEmail[] = [];
+
+  @state()
+  accessor selectedRoles: string[] = ['viewer'];
+
+  @state()
+  accessor submitting: boolean = false;
+
+  @state()
+  accessor error: string = '';
+
+  @state()
+  accessor results: IBulkInviteResult | null = null;
+
+  private static readonly AVAILABLE_ROLES = ['admin', 'editor', 'viewer', 'guest'];
+
+  public resolveWith: ((result: IBulkInviteResult | null) => void) | null = null;
+  public modal: plugins.deesCatalog.DeesModal | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    accountDesignTokens,
+    css`
+      :host {
+        display: block;
+      }
+
+      .description {
+        color: var(--muted-foreground);
+        font-size: 14px;
+        margin-bottom: 20px;
+      }
+
+      .file-upload-area {
+        border: 2px dashed var(--border);
+        border-radius: 12px;
+        padding: 32px;
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        margin-bottom: 20px;
+      }
+
+      .file-upload-area:hover {
+        border-color: var(--muted-foreground);
+        background: var(--muted);
+      }
+
+      .file-upload-area.has-data {
+        border-style: solid;
+        border-color: #22c55e;
+        background: rgba(34, 197, 94, 0.05);
+      }
+
+      .upload-icon {
+        font-size: 32px;
+        color: var(--muted-foreground);
+        margin-bottom: 12px;
+      }
+
+      .upload-text {
+        font-size: 14px;
+        color: var(--foreground);
+        margin-bottom: 4px;
+      }
+
+      .upload-hint {
+        font-size: 12px;
+        color: var(--muted-foreground);
+      }
+
+      .sample-link {
+        color: #3b82f6;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+
+      input[type="file"] {
+        display: none;
+      }
+
+      .preview-section {
+        margin-bottom: 20px;
+      }
+
+      .preview-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+
+      .preview-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--foreground);
+      }
+
+      .preview-stats {
+        font-size: 12px;
+        color: var(--muted-foreground);
+      }
+
+      .preview-stats .valid {
+        color: #22c55e;
+      }
+
+      .preview-stats .invalid {
+        color: #ef4444;
+      }
+
+      .preview-list {
+        max-height: 200px;
+        overflow-y: auto;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+      }
+
+      .preview-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--border);
+        font-size: 13px;
+      }
+
+      .preview-item:last-child {
+        border-bottom: none;
+      }
+
+      .preview-item.invalid {
+        background: rgba(239, 68, 68, 0.05);
+      }
+
+      .preview-email {
+        color: var(--foreground);
+      }
+
+      .preview-status {
+        font-size: 11px;
+        padding: 2px 8px;
+        border-radius: 4px;
+      }
+
+      .preview-status.valid {
+        background: rgba(34, 197, 94, 0.2);
+        color: #22c55e;
+      }
+
+      .preview-status.invalid {
+        background: rgba(239, 68, 68, 0.2);
+        color: #ef4444;
+      }
+
+      .role-section {
+        margin-bottom: 20px;
+      }
+
+      .section-label {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--foreground);
+        margin-bottom: 10px;
+      }
+
+      .role-selector {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .role-option {
+        padding: 8px 16px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        border: 1px solid var(--border);
+        background: transparent;
+        color: var(--muted-foreground);
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .role-option:hover {
+        border-color: var(--foreground);
+        color: var(--foreground);
+      }
+
+      .role-option.selected {
+        border-color: #3b82f6;
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+      }
+
+      .error-message {
+        padding: 12px 16px;
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid rgba(239, 68, 68, 0.3);
+        border-radius: 8px;
+        color: #ef4444;
+        font-size: 13px;
+        margin-bottom: 16px;
+      }
+
+      .results-section {
+        padding: 16px;
+        background: rgba(34, 197, 94, 0.1);
+        border: 1px solid rgba(34, 197, 94, 0.3);
+        border-radius: 8px;
+        margin-bottom: 16px;
+      }
+
+      .results-section.has-failures {
+        background: rgba(234, 179, 8, 0.1);
+        border-color: rgba(234, 179, 8, 0.3);
+      }
+
+      .results-title {
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: var(--foreground);
+      }
+
+      .results-stats {
+        font-size: 13px;
+        color: var(--muted-foreground);
+      }
+
+      .clear-button {
+        font-size: 12px;
+        color: #ef4444;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px 8px;
+      }
+
+      .clear-button:hover {
+        text-decoration: underline;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (this.results) {
+      return this.renderResults();
+    }
+
+    return html`
+      <div class="description">
+        Upload a CSV file with email addresses to invite multiple people at once.
+      </div>
+
+      ${this.error ? html`
+        <div class="error-message">${this.error}</div>
+      ` : ''}
+
+      ${this.renderFileUpload()}
+      ${this.parsedEmails.length > 0 ? this.renderPreview() : ''}
+      ${this.parsedEmails.length > 0 ? this.renderRoleSelector() : ''}
+    `;
+  }
+
+  private renderFileUpload(): TemplateResult {
+    const validCount = this.parsedEmails.filter(e => e.valid).length;
+    const hasData = this.parsedEmails.length > 0;
+
+    return html`
+      <div
+        class="file-upload-area ${hasData ? 'has-data' : ''}"
+        @click=${() => this.triggerFileInput()}
+        @dragover=${(e: DragEvent) => { e.preventDefault(); }}
+        @drop=${(e: DragEvent) => this.handleFileDrop(e)}
+      >
+        <input
+          type="file"
+          accept=".csv,.txt"
+          @change=${(e: Event) => this.handleFileSelect(e)}
+        />
+        ${hasData ? html`
+          <div class="upload-icon">
+            <dees-icon .icon=${'lucide:check-circle'}></dees-icon>
+          </div>
+          <div class="upload-text">${validCount} valid email(s) loaded</div>
+          <div class="upload-hint">Click to replace with a different file</div>
+        ` : html`
+          <div class="upload-icon">
+            <dees-icon .icon=${'lucide:upload'}></dees-icon>
+          </div>
+          <div class="upload-text">Drop CSV file here or click to browse</div>
+          <div class="upload-hint">
+            <span class="sample-link" @click=${(e: Event) => { e.stopPropagation(); this.downloadSampleCSV(); }}>Download sample CSV</span>
+          </div>
+        `}
+      </div>
+    `;
+  }
+
+  private renderPreview(): TemplateResult {
+    const validCount = this.parsedEmails.filter(e => e.valid).length;
+    const invalidCount = this.parsedEmails.filter(e => !e.valid).length;
+
+    return html`
+      <div class="preview-section">
+        <div class="preview-header">
+          <span class="preview-title">Email Preview</span>
+          <span class="preview-stats">
+            <span class="valid">${validCount} valid</span>
+            ${invalidCount > 0 ? html`, <span class="invalid">${invalidCount} invalid</span>` : ''}
+          </span>
+          <button class="clear-button" @click=${() => this.clearEmails()}>Clear</button>
+        </div>
+        <div class="preview-list">
+          ${this.parsedEmails.map(item => html`
+            <div class="preview-item ${item.valid ? '' : 'invalid'}">
+              <span class="preview-email">${item.email}</span>
+              <span class="preview-status ${item.valid ? 'valid' : 'invalid'}">
+                ${item.valid ? 'Valid' : (item.error || 'Invalid')}
+              </span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderRoleSelector(): TemplateResult {
+    return html`
+      <div class="role-section">
+        <div class="section-label">Assign Role</div>
+        <div class="role-selector">
+          ${BulkInviteForm.AVAILABLE_ROLES.map(role => html`
+            <button
+              class="role-option ${this.selectedRoles.includes(role) ? 'selected' : ''}"
+              @click=${() => this.toggleRole(role)}
+              ?disabled=${this.submitting}
+            >
+              ${role}
+            </button>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderResults(): TemplateResult {
+    const hasFailures = this.results!.failedCount > 0 || this.results!.alreadyMemberCount > 0;
+
+    return html`
+      <div class="results-section ${hasFailures ? 'has-failures' : ''}">
+        <div class="results-title">Bulk Invite Complete</div>
+        <div class="results-stats">
+          ${this.results!.invitedCount} invitation(s) sent successfully.
+          ${this.results!.alreadyMemberCount > 0 ? html`<br>${this.results!.alreadyMemberCount} already member(s).` : ''}
+          ${this.results!.failedCount > 0 ? html`<br>${this.results!.failedCount} failed.` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  private triggerFileInput(): void {
+    const input = this.shadowRoot?.querySelector('input[type="file"]') as HTMLInputElement;
+    input?.click();
+  }
+
+  private handleFileDrop(e: DragEvent): void {
+    e.preventDefault();
+    const file = e.dataTransfer?.files[0];
+    if (file) {
+      this.parseCSVFile(file);
+    }
+  }
+
+  private handleFileSelect(e: Event): void {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) {
+      this.parseCSVFile(file);
+    }
+  }
+
+  private async parseCSVFile(file: File): Promise<void> {
+    const text = await file.text();
+    const lines = text.split(/\r?\n/).filter(line => line.trim());
+
+    const parsed: IParsedEmail[] = [];
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const seen = new Set<string>();
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+
+      // Skip header row if it looks like "email" or similar
+      if (i === 0 && (line.toLowerCase() === 'email' || line.toLowerCase() === 'emails' || line.toLowerCase() === 'e-mail')) {
+        continue;
+      }
+
+      // Extract email from line (handle quoted values, commas)
+      const email = line.replace(/["']/g, '').split(',')[0].trim().toLowerCase();
+
+      if (!email) {
+        continue;
+      }
+
+      if (seen.has(email)) {
+        parsed.push({ email, valid: false, error: 'Duplicate' });
+        continue;
+      }
+      seen.add(email);
+
+      if (!emailRegex.test(email)) {
+        parsed.push({ email, valid: false, error: 'Invalid format' });
+        continue;
+      }
+
+      parsed.push({ email, valid: true });
+    }
+
+    this.parsedEmails = parsed;
+    this.error = '';
+  }
+
+  private downloadSampleCSV(): void {
+    const content = 'email\nuser1@example.com\nuser2@example.com\nuser3@example.com';
+    const blob = new Blob([content], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'sample-invite-list.csv';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  private clearEmails(): void {
+    this.parsedEmails = [];
+    this.error = '';
+  }
+
+  private toggleRole(role: string): void {
+    if (this.selectedRoles.includes(role)) {
+      this.selectedRoles = this.selectedRoles.filter(r => r !== role);
+    } else {
+      this.selectedRoles = [...this.selectedRoles, role];
+    }
+    if (this.selectedRoles.length === 0) {
+      this.selectedRoles = ['viewer'];
+    }
+  }
+
+  public canSubmit(): boolean {
+    const validEmails = this.parsedEmails.filter(e => e.valid);
+    return validEmails.length > 0 && this.selectedRoles.length > 0 && !this.submitting && !this.results;
+  }
+
+  public async handleSubmit(): Promise<IBulkInviteResult | null> {
+    if (!this.canSubmit()) {
+      return null;
+    }
+
+    this.submitting = true;
+    this.error = '';
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const validEmails = this.parsedEmails.filter(e => e.valid);
+
+      const request = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_BulkCreateInvitations>(
+        'bulkCreateInvitations'
+      );
+
+      const response = await request.fire({
+        jwt,
+        organizationId: this.organizationId,
+        invitations: validEmails.map(e => ({ email: e.email })),
+        defaultRoles: this.selectedRoles,
+      });
+
+      this.results = {
+        invitedCount: response.summary.invited,
+        failedCount: response.summary.errors + response.summary.invalid,
+        alreadyMemberCount: response.summary.alreadyMembers,
+      };
+
+      return this.results;
+    } catch (error) {
+      console.error('Error sending bulk invitations:', error);
+      this.error = error instanceof Error ? error.message : 'Failed to send invitations. Please try again.';
+      return null;
+    } finally {
+      this.submitting = false;
+    }
+  }
+
+  public handleCancel(): void {
+    this.modal?.destroy();
+    this.resolveWith?.(null);
+  }
+
+  public handleClose(): void {
+    this.modal?.destroy();
+    this.resolveWith?.(this.results);
+  }
+}
+
+// Export the modal utility class
+export class BulkInviteModal {
+  public static async show(options: {
+    organizationId: string;
+    organizationName: string;
+  }): Promise<IBulkInviteResult | null> {
+    return new Promise<IBulkInviteResult | null>((resolve) => {
+      const formElement = new BulkInviteForm();
+      formElement.organizationId = options.organizationId;
+      formElement.organizationName = options.organizationName;
+      formElement.resolveWith = resolve;
+
+      plugins.deesCatalog.DeesModal.createAndShow({
+        heading: 'Bulk Invite Members',
+        content: html`${formElement}`,
+        menuOptions: [
+          {
+            name: 'Cancel',
+            action: async () => {
+              formElement.handleCancel();
+            },
+          },
+          {
+            name: 'Send Invitations',
+            action: async () => {
+              const result = await formElement.handleSubmit();
+              if (result) {
+                // Wait a bit for user to see results, then close
+                setTimeout(() => {
+                  formElement.handleClose();
+                }, 2000);
+              }
+            },
+          },
+        ],
+        width: 520,
+      }).then((modal) => {
+        formElement.modal = modal;
+      });
+    });
+  }
+}

ts_web/elements/account/content.ts

@@ -12,6 +12,9 @@ import {
 } from '@design.estate/dees-element';
 
 import { LeleAccountNavigation } from './navigation.js';
+import { OrgSelectModal, type IOrgSelectResult } from './org-select-modal.js';
+import { CreateOrgModal } from './create-org-modal.js';
+import { accountDesignTokens } from './sharedstyles.js';
 
 import * as views from './views/index.js';
 import * as accountstate from '../../states/accountstate.js';
@@ -36,15 +39,13 @@ export class IdpAccountContent extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    accountDesignTokens,
     css`
       :host {
         display: block;
-        color: #fff;
-        padding-top: 10px;
-        padding-bottom: 10px;
         height: 100%;
         width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000000')}
+        background: var(--background);
       }
       :host([hidden]) {
         display: none;
@@ -72,7 +73,7 @@ export class IdpAccountContent extends DeesElement {
         height: 100vh;
         overflow-y: scroll;
         overscroll-behavior: contain;
-        transition: all 0.3s;
+        transition: all 0.3s ease;
         opacity: 1;
       }
 
@@ -101,6 +102,25 @@ export class IdpAccountContent extends DeesElement {
     this.subrouter = this.domtools.router.createSubRouter('/account');
     const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');
 
+    // Setup event listeners for modals
+    this.addEventListener('open-org-select-modal', (async (e: CustomEvent) => {
+      const result = await OrgSelectModal.show({
+        targetPath: e.detail.targetPath,
+        title: e.detail.title,
+        description: e.detail.description,
+      });
+      if (result) {
+        this.subrouter.pushUrl(result.path);
+      }
+    }) as EventListener);
+
+    this.addEventListener('open-create-org-modal', async () => {
+      const org = await CreateOrgModal.show();
+      if (org) {
+        this.subrouter.pushUrl(`/org/${org.data.slug}/billing`);
+      }
+    });
+
     const cleanupViews = async () => {
       for (const child of Array.from(viewcontainer.children)) {
         viewcontainer.removeChild(child);
@@ -130,6 +150,56 @@ export class IdpAccountContent extends DeesElement {
       await this.domtools.convenience.smartdelay.delayFor(300);
     });
 
+    this.subrouter.on('/org/:orgName/paddlesetup', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the paddle setup page');
+      await cleanupViews();
+      viewcontainer.append(new views.PaddleSetupView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
+    this.subrouter.on('/org/:orgName', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the org overview page');
+      await cleanupViews();
+      viewcontainer.append(new views.OrgView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
+    this.subrouter.on('/org/:orgName/apps', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the apps page');
+      await cleanupViews();
+      viewcontainer.append(new views.AppsView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
+    this.subrouter.on('/org/:orgName/users', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the users page');
+      await cleanupViews();
+      viewcontainer.append(new views.UsersView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
+    this.subrouter.on('/admin', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the admin page');
+      await cleanupViews();
+      viewcontainer.append(new views.AdminView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
     this.subrouter._handleRouteState();
 
     this.registerGarbageFunction(async () => {

ts_web/elements/account/create-org-modal.ts

@@ -0,0 +1,329 @@
+import * as plugins from '../../plugins.js';
+import {
+  customElement,
+  DeesElement,
+  html,
+  css,
+  cssManager,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { accountDesignTokens } from './sharedstyles.js';
+import * as accountStateModule from '../../states/accountstate.js';
+import { IdpState } from '../../states/idp.state.js';
+
+// Internal form element for reactive state management
+@customElement('idp-create-org-form')
+class CreateOrgForm extends DeesElement {
+  @state()
+  accessor orgName: string = '';
+
+  @state()
+  accessor orgSlug: string = '';
+
+  @state()
+  accessor validating: boolean = false;
+
+  @state()
+  accessor validationResult: { available: boolean; message: string } | null = null;
+
+  @state()
+  accessor creating: boolean = false;
+
+  @state()
+  accessor error: string = '';
+
+  private validationDebounceTimer: any = null;
+  public resolveWith: ((org: plugins.idpInterfaces.data.IOrganization | null) => void) | null = null;
+  public modal: plugins.deesCatalog.DeesModal | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .slug-preview {
+        margin-top: 12px;
+        padding: 12px 16px;
+        background: var(--dees-color-background);
+        border: 1px solid var(--dees-color-line);
+        border-radius: 8px;
+      }
+
+      .slug-label {
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--dees-color-muted);
+        margin-bottom: 4px;
+      }
+
+      .slug-value {
+        font-family: 'Geist Mono', monospace;
+        font-size: 14px;
+        color: var(--dees-color-text);
+      }
+
+      .validation-status {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 12px;
+        padding: 10px 14px;
+        border-radius: 8px;
+        font-size: 13px;
+      }
+
+      .validation-status.validating {
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+      }
+
+      .validation-status.available {
+        background: rgba(34, 197, 94, 0.1);
+        color: #22c55e;
+      }
+
+      .validation-status.unavailable {
+        background: rgba(239, 68, 68, 0.1);
+        color: #ef4444;
+      }
+
+      .validation-status dees-icon {
+        font-size: 16px;
+      }
+
+      .error-message {
+        margin-top: 16px;
+        padding: 12px 16px;
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid rgba(239, 68, 68, 0.3);
+        border-radius: 8px;
+        color: #ef4444;
+        font-size: 13px;
+      }
+
+      .description {
+        color: var(--dees-color-muted);
+        font-size: 14px;
+        margin-bottom: 20px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="description">Create a new organization to manage apps, users, and billing.</div>
+      <dees-input-text
+        .label=${'Organization Name'}
+        .placeholder=${'e.g., Acme Inc.'}
+        .value=${this.orgName}
+        ?disabled=${this.creating}
+      ></dees-input-text>
+
+      ${this.orgSlug ? html`
+        <div class="slug-preview">
+          <div class="slug-label">Organization URL Slug</div>
+          <div class="slug-value">${this.orgSlug}</div>
+        </div>
+      ` : ''}
+
+      ${this.renderValidationStatus()}
+
+      ${this.error ? html`
+        <div class="error-message">${this.error}</div>
+      ` : ''}
+    `;
+  }
+
+  private renderValidationStatus(): TemplateResult | null {
+    if (!this.orgSlug) {
+      return null;
+    }
+
+    if (this.validating) {
+      return html`
+        <div class="validation-status validating">
+          <dees-icon .icon=${'lucide:loader-2'}></dees-icon>
+          Checking availability...
+        </div>
+      `;
+    }
+
+    if (this.validationResult) {
+      if (this.validationResult.available) {
+        return html`
+          <div class="validation-status available">
+            <dees-icon .icon=${'lucide:check-circle'}></dees-icon>
+            ${this.validationResult.message}
+          </div>
+        `;
+      } else {
+        return html`
+          <div class="validation-status unavailable">
+            <dees-icon .icon=${'lucide:x-circle'}></dees-icon>
+            ${this.validationResult.message}
+          </div>
+        `;
+      }
+    }
+
+    return null;
+  }
+
+  public async firstUpdated() {
+    const inputElement = this.shadowRoot.querySelector('dees-input-text') as any;
+    if (inputElement) {
+      inputElement.changeSubject.subscribe((element: any) => {
+        this.handleNameInput(element.value);
+      });
+    }
+  }
+
+  private handleNameInput(value: string) {
+    this.orgName = value;
+    this.orgSlug = this.generateSlug(this.orgName);
+    this.error = '';
+
+    // Debounce validation
+    if (this.validationDebounceTimer) {
+      clearTimeout(this.validationDebounceTimer);
+    }
+
+    if (this.orgSlug) {
+      this.validating = true;
+      this.validationResult = null;
+      this.validationDebounceTimer = setTimeout(() => {
+        this.validateSlug();
+      }, 500);
+    } else {
+      this.validating = false;
+      this.validationResult = null;
+    }
+  }
+
+  private generateSlug(name: string): string {
+    return name
+      .replace(/[^a-zA-Z0-9\s-]/g, '')
+      .replace(/\s+/g, '-')
+      .toLowerCase();
+  }
+
+  private async validateSlug() {
+    if (!this.orgSlug) {
+      this.validating = false;
+      return;
+    }
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const result = await idpState.idpClient.createOrganization(
+        this.orgName,
+        this.orgSlug,
+        'checkAvailability'
+      );
+
+      this.validationResult = {
+        available: result.nameAvailable,
+        message: result.nameAvailable
+          ? 'This name is available!'
+          : 'This name is already taken. Please choose another.',
+      };
+    } catch (error) {
+      console.error('Validation error:', error);
+      this.validationResult = {
+        available: false,
+        message: 'Unable to validate. Please try again.',
+      };
+    } finally {
+      this.validating = false;
+    }
+  }
+
+  public canCreate(): boolean {
+    return this.orgName.length > 0 &&
+           this.validationResult?.available === true &&
+           !this.validating &&
+           !this.creating;
+  }
+
+  public async handleCreate(): Promise<void> {
+    if (!this.canCreate()) {
+      return;
+    }
+
+    this.creating = true;
+    this.error = '';
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const result = await idpState.idpClient.createOrganization(
+        this.orgName,
+        this.orgSlug,
+        'manifest'
+      );
+
+      // Update state with new organization and role
+      const currentState = accountStateModule.accountState.getState();
+      currentState.organizations.push(result.resultingOrganization);
+      if (result.role) {
+        currentState.roles.push(result.role);
+      }
+      accountStateModule.accountState.dispatchAction(
+        accountStateModule.setSelectedOrg,
+        result.resultingOrganization
+      );
+
+      this.modal?.destroy();
+      this.resolveWith?.(result.resultingOrganization);
+    } catch (error) {
+      console.error('Error creating organization:', error);
+      this.error = error instanceof Error ? error.message : 'Failed to create organization. Please try again.';
+      this.creating = false;
+    }
+  }
+
+  public handleCancel(): void {
+    if (this.validationDebounceTimer) {
+      clearTimeout(this.validationDebounceTimer);
+    }
+    this.modal?.destroy();
+    this.resolveWith?.(null);
+  }
+}
+
+// Export the modal utility class
+export class CreateOrgModal {
+  public static async show(): Promise<plugins.idpInterfaces.data.IOrganization | null> {
+    return new Promise<plugins.idpInterfaces.data.IOrganization | null>((resolve) => {
+      const formElement = new CreateOrgForm();
+      formElement.resolveWith = resolve;
+
+      plugins.deesCatalog.DeesModal.createAndShow({
+        heading: 'Create Organization',
+        content: html`${formElement}`,
+        menuOptions: [
+          {
+            name: 'Cancel',
+            action: async () => {
+              formElement.handleCancel();
+            },
+          },
+          {
+            name: 'Create Organization',
+            action: async () => {
+              await formElement.handleCreate();
+            },
+          },
+        ],
+        width: 480,
+      }).then((modal) => {
+        formElement.modal = modal;
+      });
+    });
+  }
+}

ts_web/elements/account/index.ts

@@ -1,2 +1,4 @@
 export * from './content.js';
 export * from './navigation.js';
+export * from './org-select-modal.js';
+export * from './create-org-modal.js';

ts_web/elements/account/navigation.ts

@@ -6,13 +6,16 @@ import {
   cssManager,
   unsafeCSS,
   css,
+  state,
   type TemplateResult,
-  subscribe,
 } from '@design.estate/dees-element';
 
 import * as plugins from '../../plugins.js';
 import * as states from '../../states/accountstate.js';
 import { IdpState } from '../../states/idp.state.js';
+import { accountDesignTokens } from './sharedstyles.js';
+import { CreateOrgModal } from './create-org-modal.js';
+import { OrgSelectModal } from './org-select-modal.js';
 
 import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
 
@@ -24,108 +27,163 @@ declare global {
 
 @customElement('lele-accountnavigation')
 export class LeleAccountNavigation extends DeesElement {
-  @property()
+  @state()
-  public options: { text: string; id: string }[] = [
+  accessor isGlobalAdmin: boolean = false;
-    {
+
-      id: '1',
+  @state()
-      text: 'Apps',
+  accessor currentPath: string = window.location.pathname;
-    },
-    {
-      id: '2',
-      text: 'Users',
-    },
-    {
-      id: '3',
-      text: 'Activity',
-    },
-    {
-      id: '4',
-      text: 'Billing & Subscription',
-    },
-  ];
 
   constructor() {
     super();
   }
 
+  private async navigateTo(path: string) {
+    const subrouter = await this.getAccountRouter();
+    subrouter.pushUrl(path);
+    // Update state after navigation to trigger re-render
+    this.currentPath = window.location.pathname;
+  }
+
+  private async navigateToOrgPage(page: string) {
+    const currentState = states.accountState.getState();
+    if (currentState.selectedOrg) {
+      const path = page ? `/org/${currentState.selectedOrg.data.slug}/${page}` : `/org/${currentState.selectedOrg.data.slug}`;
+      await this.navigateTo(path);
+    } else {
+      const targetPath = page ? `/org/:orgName/${page}` : '/org/:orgName';
+      const description = page ? `Choose an organization to view its ${page}.` : 'Choose an organization to view its overview.';
+      const result = await OrgSelectModal.show({
+        targetPath,
+        title: 'Select Organization',
+        description,
+      });
+      if (result) {
+        await this.navigateTo(result.path.replace('/account', ''));
+      }
+    }
+  }
+
   public static styles = [
     cssManager.defaultStyles,
+    accountDesignTokens,
     css`
       :host {
-        display: block;
+        display: flex;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        flex-direction: column;
-        padding: 10px;
+        background: var(--card);
-        padding-left: 0px;
+        border-right: 1px solid var(--border);
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        height: 100%;
-        border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')};
       }
       :host([hidden]) {
         display: none;
       }
 
+      .logoArea {
+        padding: 20px 16px;
+        border-bottom: 1px solid var(--border);
+        flex-shrink: 0;
+      }
+
       .logo {
-        font-family: 'Cal Sans';
+        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
-        letter-spacing: 0.0125em;
+        letter-spacing: -0.02em;
-        font-size: 16px;
+        font-size: 20px;
-        text-align: center;
+        font-weight: 600;
-        padding: 16px 0px 16px 0px;
+        color: var(--foreground);
-        margin: -8px -8px -16px 0px;
+        cursor: pointer;
-        border-bottom: 1px solid #111111;
+        transition: opacity 0.15s ease;
-        cursor: default;
+        display: flex;
-        position: relative;
+        align-items: center;
-        z-index: 10;
+        gap: 8px;
       }
 
       .logo:hover {
-        background: ${unsafeCSS(plugins.deesCatalog.colors.dark.blue)};
+        opacity: 0.8;
+      }
+
+      .logo dees-icon {
+        font-size: 24px;
+        opacity: 0.9;
+      }
+
+      .navContent {
+        flex: 1;
+        overflow-y: auto;
+        padding-bottom: 16px;
       }
 
       .commitinfo {
+        flex-shrink: 0;
         text-align: center;
-        position: absolute;
+        font-family: 'Geist Mono', monospace;
-        bottom: 0px;
+        font-size: 10px;
-        left: 0px;
+        padding: 12px 16px;
-        font-family: 'Intel One Mono';
+        border-top: 1px solid var(--border);
-        width: 100%;
+        color: var(--muted-foreground);
-        font-size: 12px;
+        opacity: 0.6;
-        padding: 8px;
+        background: var(--card);
-        border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
-        color: ${cssManager.bdTheme('#666', '#ccc')};
       }
 
       .navigationGroupLabel {
-        width: min-content;
+        font-size: 10px;
-        white-space: nowrap;
+        font-weight: 600;
         text-transform: uppercase;
-        font-size: 12px;
+        letter-spacing: 0.08em;
-        font-weight: 300;
+        color: var(--muted-foreground);
-        border-bottom: 1px solid;
+        padding: 20px 16px 8px;
-        border-image: linear-gradient(to right, orange, #44444400) 1;
+        opacity: 0.7;
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+      }
-        margin-bottom: 5px;
+
-        padding-top: 32px;
+      .navigationGroupLabel:first-of-type {
-        padding-left: 10px;
+        padding-top: 16px;
-        padding-bottom: 5px;
       }
 
       .navigationOption {
-        border-top-right-radius: 30px;
+        display: flex;
-        border-bottom-right-radius: 30px;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        margin: 2px 8px;
+        border-radius: 8px;
+        font-size: 13px;
         font-weight: 500;
-        padding: 8px;
+        color: var(--muted-foreground);
-        padding-left: 10px;
+        transition: all 0.15s ease;
-        margin-bottom: 5px;
+        cursor: pointer;
-        font-size: 14px;
       }
 
       .navigationOption:hover {
-        cursor: default;
+        background: var(--muted);
-        background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)};
+        color: var(--foreground);
       }
+
+      .navigationOption dees-icon {
+        font-size: 16px;
+        opacity: 0.7;
+        flex-shrink: 0;
+      }
+
+      .navigationOption:hover dees-icon {
+        opacity: 1;
+      }
+
+      .navigationOption.active {
+        background: var(--muted);
+        color: var(--foreground);
+      }
+
+      .navigationOption.active dees-icon {
+        opacity: 1;
+      }
+
+      .divider {
+        height: 1px;
+        background: var(--border);
+        margin: 8px 16px;
+      }
+
       dees-input-dropdown {
-        margin-top: 16px;
+        margin: 8px;
-        margin-bottom: 16px;
-        margin-left: 8px;
       }
     `,
   ];
@@ -137,18 +195,30 @@ export class LeleAccountNavigation extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <style></style>
+      <div class="logoArea">
-      <div class="commitinfo">idp.global v${commitinfo.version}</div>
+        <div class="logo">
-      <div class="logo">idp.global</div>
+          <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
-      <div class="navigationGroupLabel">Account Settings</div>
+          idp.global
+        </div>
+      </div>
+
+      <div class="navContent">
+        <div class="navigationGroupLabel">Account</div>
+        <div
+          class="navigationOption ${this.isActive('') ? 'active' : ''}"
+          @click=${() => this.navigateTo('')}
+        >
+          <dees-icon .icon=${'lucide:home'}></dees-icon>
+          Overview
+        </div>
         <div
           class="navigationOption"
           @click=${async () => {
-          const subrouter = await this.getAccountRouter();
+
-          subrouter.pushUrl('');
           }}
         >
-        overview
+          <dees-icon .icon=${'lucide:shield'}></dees-icon>
+          Manage Roles
         </div>
         <div
           class="navigationOption"
@@ -157,41 +227,134 @@ export class LeleAccountNavigation extends DeesElement {
             idpState.domtools.router.pushUrl('/logout');
           }}
         >
-        logout
+          <dees-icon .icon=${'lucide:power'}></dees-icon>
+          Log Out
         </div>
-      <div
-        class="navigationOption"
-        @click=${async () => {
 
-        }}
+        <div class="divider"></div>
-      >
+
-        manage roles
+        <div class="navigationGroupLabel">Organization</div>
-      </div>
-      <div
-        class="navigationOption"
-        @click=${async () => {
-        }}
-      >
-        create an org
-      </div>
-      <div class="navigationGroupLabel">Organization Settings</div>
         <dees-input-dropdown
-        .label=${'choose org:'}
+          .label=${'Select organization'}
-        @selectedOption=${(eventArg: CustomEvent) => {
+          @selectedOption=${async (eventArg: CustomEvent) => {
+            // Handle "Create new..." option
+            if (eventArg.detail.key === '__create_new__') {
+              const org = await CreateOrgModal.show();
+              if (org) {
+                await this.navigateTo(`/org/${org.data.slug}/billing`);
+              }
+              return;
+            }
             const currentState = states.accountState.getState();
-          states.accountState.dispatchAction(
+            const newOrg = currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload);
-            states.setSelectedOrg,
+            states.accountState.dispatchAction(states.setSelectedOrg, newOrg);
-            currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
+
-          );
+            // Auto-navigate to new org's current page type (reactivity)
+            const currentPath = window.location.pathname;
+            if (currentPath.includes('/org/') && newOrg) {
+              // Extract the page type (apps, billing, etc.) and navigate to new org
+              const pathParts = currentPath.split('/');
+              const pageType = pathParts[5]; // /account/org/:orgName/:pageType
+              if (pageType) {
+                await this.navigateTo(`/org/${newOrg.data.slug}/${pageType}`);
+              } else {
+                await this.navigateTo(`/org/${newOrg.data.slug}`);
+              }
+            }
           }}
         ></dees-input-dropdown>
-      ${this.options.map((option) => {
+
-        return html` <div class="navigationOption">${option.text}</div> `;
+        <div
-      })}
+          class="navigationOption ${this.isActive('org-overview') ? 'active' : ''}"
+          @click=${() => this.navigateToOrgPage('')}
+        >
+          <dees-icon .icon=${'lucide:home'}></dees-icon>
+          Overview
+        </div>
+        <div
+          class="navigationOption ${this.isActive('apps') ? 'active' : ''}"
+          @click=${() => this.navigateToOrgPage('apps')}
+        >
+          <dees-icon .icon=${'lucide:box'}></dees-icon>
+          Apps
+        </div>
+        <div
+          class="navigationOption ${this.isActive('users') ? 'active' : ''}"
+          @click=${() => this.navigateToOrgPage('users')}
+        >
+          <dees-icon .icon=${'lucide:users'}></dees-icon>
+          Users
+        </div>
+        <div
+          class="navigationOption"
+          @click=${async () => {}}
+        >
+          <dees-icon .icon=${'lucide:activity'}></dees-icon>
+          Activity
+        </div>
+        <div
+          class="navigationOption ${this.isActive('billing') ? 'active' : ''}"
+          @click=${() => this.navigateToOrgPage('billing')}
+        >
+          <dees-icon .icon=${'lucide:wallet'}></dees-icon>
+          Billing
+        </div>
+
+        ${this.renderAdminLink()}
+      </div>
+
+      <div class="commitinfo">v${commitinfo.version}</div>
     `;
   }
 
-  public firstUpdated() {
+  private renderAdminLink(): TemplateResult | null {
+    if (!this.isGlobalAdmin) {
+      return null;
+    }
+    return html`
+      <div class="divider"></div>
+      <div class="navigationGroupLabel">Platform</div>
+      <div
+        class="navigationOption ${this.isActive('admin') ? 'active' : ''}"
+        @click=${() => this.navigateTo('/admin')}
+      >
+        <dees-icon .icon=${'lucide:shield'}></dees-icon>
+        Global Admin
+      </div>
+    `;
+  }
+
+  private isActive(page: string): boolean {
+    const path = this.currentPath;
+    if (page === '') {
+      // Account overview - exact match
+      return path === '/account' || path === '/account/';
+    }
+    if (page === 'org-overview') {
+      // Org overview - /account/org/:slug without trailing page type
+      return /^\/account\/org\/[^\/]+\/?$/.test(path);
+    }
+    // For other pages, check if the path contains the page segment
+    return path.includes(`/${page}`);
+  }
+
+  public async firstUpdated() {
+    // Listen for popstate (browser back/forward)
+    window.addEventListener('popstate', () => {
+      this.currentPath = window.location.pathname;
+    });
+
+    // Watch for URL changes from external navigation (e.g., modals)
+    let lastPath = this.currentPath;
+    const checkPath = () => {
+      if (window.location.pathname !== lastPath) {
+        lastPath = window.location.pathname;
+        this.currentPath = lastPath;
+      }
+      requestAnimationFrame(checkPath);
+    };
+    requestAnimationFrame(checkPath);
+
     const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
     const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
       if (!orgArg) {
@@ -203,11 +366,21 @@ export class LeleAccountNavigation extends DeesElement {
         payload: orgArg.data.slug,
       };
     };
+
+    // "Create new..." option to add at the end
+    const createNewOption = {
+      option: '+ Create new...',
+      key: '__create_new__',
+      payload: '__create_new__',
+    };
+
     states.accountState
       .select((stateArg) => stateArg.organizations)
       .pipe(
         plugins.deesDomtools.plugins.smartrx.rxjs.ops.map((orgArrayArg) => {
-          return orgArrayArg.map(orgToMenuEntry);
+          const orgEntries = orgArrayArg.map(orgToMenuEntry);
+          // Add "Create new..." at the end
+          return [...orgEntries, createNewOption];
         })
       )
       .subscribe((menuEntries) => {
@@ -219,5 +392,12 @@ export class LeleAccountNavigation extends DeesElement {
       .subscribe((selectedOrgArg) => {
         deesInputDropdown.selectedOption = selectedOrgArg;
       });
+
+    // Check if user is global admin
+    states.accountState
+      .select((stateArg) => stateArg.user)
+      .subscribe((user) => {
+        this.isGlobalAdmin = user?.data?.isGlobalAdmin ?? false;
+      });
   }
 }

ts_web/elements/account/org-select-modal.ts

@@ -0,0 +1,209 @@
+import * as plugins from '../../plugins.js';
+import {
+  html,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { accountDesignTokens } from './sharedstyles.js';
+import * as accountStateModule from '../../states/accountstate.js';
+
+export interface IOrgSelectResult {
+  org: plugins.idpInterfaces.data.IOrganization;
+  path: string;
+}
+
+const modalStyles = css`
+  .org-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .org-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--dees-color-line);
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+
+  .org-item:last-child {
+    border-bottom: none;
+  }
+
+  .org-item:hover {
+    background: var(--dees-color-softBackground);
+  }
+
+  .org-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: var(--dees-color-softBackground);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .org-item:hover .org-icon {
+    background: var(--dees-color-line);
+  }
+
+  .org-icon dees-icon {
+    opacity: 0.7;
+  }
+
+  .org-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .org-name {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 2px;
+    color: var(--dees-color-text);
+  }
+
+  .org-slug {
+    font-size: 12px;
+    color: var(--dees-color-muted);
+  }
+
+  .org-arrow {
+    opacity: 0.5;
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 40px 24px;
+    color: var(--dees-color-muted);
+  }
+
+  .empty-state dees-icon {
+    font-size: 40px;
+    opacity: 0.5;
+    margin-bottom: 12px;
+  }
+
+  .empty-state p {
+    margin: 0 0 16px 0;
+    font-size: 14px;
+  }
+
+  .description {
+    color: var(--dees-color-muted);
+    font-size: 14px;
+    margin-bottom: 16px;
+    padding: 0 20px;
+  }
+`;
+
+export class OrgSelectModal {
+  public static async show(options: {
+    targetPath: string;
+    title?: string;
+    description?: string;
+  }): Promise<IOrgSelectResult | null> {
+    const title = options.title || 'Select Organization';
+    const description = options.description || 'Choose an organization to continue.';
+
+    // Load organizations from state
+    const state = accountStateModule.accountState.getState();
+    const organizations = state.organizations;
+
+    return new Promise<IOrgSelectResult | null>((resolve) => {
+      let modal: plugins.deesCatalog.DeesModal | null = null;
+      let resolved = false;
+
+      const handleSelectOrg = (org: plugins.idpInterfaces.data.IOrganization) => {
+        if (resolved) return;
+        resolved = true;
+
+        accountStateModule.accountState.dispatchAction(accountStateModule.setSelectedOrg, org);
+        const path = options.targetPath.replace(':orgName', org.data.slug);
+
+        modal?.destroy();
+        resolve({ org, path });
+      };
+
+      const handleCreateOrg = async () => {
+        if (resolved) return;
+        resolved = true;
+        modal?.destroy();
+
+        // Import dynamically to avoid circular dependency
+        const { CreateOrgModal } = await import('./create-org-modal.js');
+        const createdOrg = await CreateOrgModal.show();
+
+        if (createdOrg) {
+          const path = options.targetPath.replace(':orgName', createdOrg.data.slug);
+          resolve({ org: createdOrg, path });
+        } else {
+          resolve(null);
+        }
+      };
+
+      const renderOrgList = (): TemplateResult => {
+        return html`
+          <style>${modalStyles}</style>
+          <div class="description">${description}</div>
+          <div class="org-list">
+            ${organizations.map((org) => html`
+              <div class="org-item" @click=${() => handleSelectOrg(org)}>
+                <div class="org-icon">
+                  <dees-icon .icon=${'lucide:building2'}></dees-icon>
+                </div>
+                <div class="org-info">
+                  <div class="org-name">${org.data.name}</div>
+                  <div class="org-slug">${org.data.slug}</div>
+                </div>
+                <dees-icon class="org-arrow" .icon=${'lucide:chevron-right'}></dees-icon>
+              </div>
+            `)}
+          </div>
+        `;
+      };
+
+      const renderEmptyState = (): TemplateResult => {
+        return html`
+          <style>${modalStyles}</style>
+          <div class="empty-state">
+            <dees-icon .icon=${'lucide:building2'}></dees-icon>
+            <p>You don't have any organizations yet.</p>
+            <dees-button @clicked=${handleCreateOrg}>
+              <dees-icon .icon=${'lucide:plus'} slot="iconLeft"></dees-icon>
+              Create Organization
+            </dees-button>
+          </div>
+        `;
+      };
+
+      const content = organizations.length === 0 ? renderEmptyState() : renderOrgList();
+
+      plugins.deesCatalog.DeesModal.createAndShow({
+        heading: title,
+        content,
+        menuOptions: [
+          {
+            name: 'Cancel',
+            action: async (modalRef) => {
+              if (!resolved) {
+                resolved = true;
+                resolve(null);
+              }
+              modalRef.destroy();
+            },
+          },
+        ],
+        width: 420,
+      }).then((m) => {
+        modal = m;
+      });
+    });
+  }
+}

ts_web/elements/account/sharedstyles.ts

@@ -1,29 +1,117 @@
 import { css } from '@design.estate/dees-element';
 
-export default css`
+/**
+ * Design tokens matching the login page aesthetic (idp-centercontainer.ts)
+ */
+export const accountDesignTokens = css`
+  :host {
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
+    --border: hsl(240 3.7% 15.9%);
+    --card: hsl(240 6% 6%);
+
+    font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+    color: var(--foreground);
+  }
+`;
+
+/**
+ * Card container styles
+ */
+export const cardStyles = css`
+  .card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 32px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  }
+`;
+
+/**
+ * Typography styles for consistent text hierarchy
+ */
+export const typographyStyles = css`
   h1 {
-    margin-top: 50px;
+    font-size: 24px;
-    border-bottom: 1px solid;
+    font-weight: 600;
-    border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
+    color: var(--foreground);
-    padding-bottom: 10px;
+    margin: 0 0 8px 0;
-    font-weight: 500;
+    letter-spacing: -0.02em;
   }
 
   h2 {
-    border-top: 1px dotted #666;
+    font-size: 18px;
-    padding-top: 16px;
+    font-weight: 600;
+    color: var(--foreground);
+    margin: 24px 0 8px 0;
+    letter-spacing: -0.01em;
   }
 
   p {
-    line-height: 1.5em;
+    font-size: 14px;
+    color: var(--muted-foreground);
+    margin: 0 0 16px 0;
+    line-height: 1.5;
+  }
+
+  .description {
+    font-size: 14px;
+    color: var(--muted-foreground);
+    margin: 0;
+    line-height: 1.5;
   }
 
   dees-button {
     margin-top: 16px;
-    width: 200px;
   }
 
   dees-input-text {
-    max-width: 400px;
+    max-width: 100%;
   }
 `;
+
+/**
+ * Navigation styles for the sidebar
+ */
+export const navigationStyles = css`
+  .nav-item {
+    padding: 10px 16px;
+    margin: 2px 8px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--muted-foreground);
+    transition: all 0.15s ease;
+    cursor: pointer;
+  }
+
+  .nav-item:hover {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+
+  .nav-item.active {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+
+  .nav-group-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted-foreground);
+    padding: 24px 16px 8px;
+  }
+`;
+
+/**
+ * Legacy export for backwards compatibility
+ */
+export default css`
+  ${accountDesignTokens}
+  ${typographyStyles}
+`;

ts_web/elements/account/views/adminview.ts

@@ -0,0 +1,754 @@
+import * as plugins from '../../../plugins.js';
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  css,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { IdpState } from '../../../states/idp.state.js';
+import { accountDesignTokens } from '../sharedstyles.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountview-admin': AdminView;
+  }
+}
+
+interface IAppWithStats {
+  app: plugins.idpInterfaces.data.IGlobalApp;
+  connectionCount: number;
+}
+
+@customElement('lele-accountview-admin')
+export class AdminView extends DeesElement {
+  @state()
+  accessor apps: IAppWithStats[] = [];
+
+  @state()
+  accessor loading: boolean = true;
+
+  @state()
+  accessor showCreateDialog: boolean = false;
+
+  @state()
+  accessor editingApp: plugins.idpInterfaces.data.IGlobalApp | null = null;
+
+  @state()
+  accessor newClientSecret: string | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    accountDesignTokens,
+    css`
+      :host {
+        display: block;
+        min-height: 100%;
+        background: var(--background);
+        color: var(--foreground);
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 32px 24px;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 32px;
+      }
+
+      h1 {
+        font-size: 32px;
+        font-weight: 600;
+        margin: 0;
+        letter-spacing: -0.02em;
+      }
+
+      .subtitle {
+        color: #71717a;
+        margin-top: 8px;
+        font-size: 14px;
+      }
+
+      .stats-row {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 32px;
+      }
+
+      .stat-card {
+        background: #18181b;
+        border: 1px solid #27272a;
+        border-radius: 12px;
+        padding: 20px;
+      }
+
+      .stat-value {
+        font-size: 28px;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+
+      .stat-label {
+        font-size: 13px;
+        color: #71717a;
+      }
+
+      .apps-section {
+        background: #18181b;
+        border: 1px solid #27272a;
+        border-radius: 12px;
+        overflow: hidden;
+      }
+
+      .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 24px;
+        border-bottom: 1px solid #27272a;
+      }
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+      }
+
+      .app-list {
+        padding: 0;
+      }
+
+      .app-item {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 16px 24px;
+        border-bottom: 1px solid #27272a;
+      }
+
+      .app-item:last-child {
+        border-bottom: none;
+      }
+
+      .app-logo {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        background: #27272a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      .app-logo img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .app-logo dees-icon {
+        font-size: 24px;
+        opacity: 0.7;
+      }
+
+      .app-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .app-name {
+        font-size: 15px;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+
+      .app-details {
+        font-size: 13px;
+        color: #71717a;
+        display: flex;
+        gap: 16px;
+      }
+
+      .app-status {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 10px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .app-status.active {
+        background: rgba(34, 197, 94, 0.1);
+        color: #22c55e;
+      }
+
+      .app-status.inactive {
+        background: rgba(239, 68, 68, 0.1);
+        color: #ef4444;
+      }
+
+      .app-actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .action-btn {
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        border: 1px solid #27272a;
+        background: transparent;
+        color: #fafafa;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .action-btn:hover {
+        background: #27272a;
+      }
+
+      .action-btn.danger:hover {
+        background: rgba(239, 68, 68, 0.1);
+        border-color: #ef4444;
+        color: #ef4444;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 48px;
+        color: #71717a;
+      }
+
+      .empty-state dees-icon {
+        font-size: 48px;
+        opacity: 0.5;
+        margin-bottom: 16px;
+      }
+
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: #71717a;
+      }
+
+      /* Dialog styles */
+      .dialog-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+      }
+
+      .dialog {
+        background: #18181b;
+        border: 1px solid #27272a;
+        border-radius: 16px;
+        width: 100%;
+        max-width: 520px;
+        max-height: 90vh;
+        overflow-y: auto;
+      }
+
+      .dialog-header {
+        padding: 20px 24px;
+        border-bottom: 1px solid #27272a;
+      }
+
+      .dialog-title {
+        font-size: 18px;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .dialog-body {
+        padding: 24px;
+      }
+
+      .dialog-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+        padding: 16px 24px;
+        border-top: 1px solid #27272a;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      .form-label {
+        display: block;
+        font-size: 13px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        color: #a1a1aa;
+      }
+
+      .form-input {
+        width: 100%;
+        padding: 10px 14px;
+        border-radius: 8px;
+        border: 1px solid #27272a;
+        background: #0a0a0a;
+        color: #fafafa;
+        font-size: 14px;
+        box-sizing: border-box;
+      }
+
+      .form-input:focus {
+        outline: none;
+        border-color: #3b82f6;
+      }
+
+      .form-textarea {
+        min-height: 80px;
+        resize: vertical;
+      }
+
+      .secret-display {
+        background: #0a0a0a;
+        border: 1px solid #27272a;
+        border-radius: 8px;
+        padding: 16px;
+        margin-top: 16px;
+      }
+
+      .secret-label {
+        font-size: 12px;
+        color: #71717a;
+        margin-bottom: 8px;
+      }
+
+      .secret-value {
+        font-family: 'Geist Mono', monospace;
+        font-size: 13px;
+        word-break: break-all;
+        color: #22c55e;
+      }
+
+      .secret-warning {
+        font-size: 12px;
+        color: #f59e0b;
+        margin-top: 12px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="container">
+        <div class="header">
+          <div>
+            <h1>Global Admin</h1>
+            <p class="subtitle">Manage platform-wide settings and global apps</p>
+          </div>
+        </div>
+
+        <div class="stats-row">
+          <div class="stat-card">
+            <div class="stat-value">${this.apps.length}</div>
+            <div class="stat-label">Total Global Apps</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">${this.apps.filter(a => a.app.data.isActive).length}</div>
+            <div class="stat-label">Active Apps</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">${this.apps.reduce((sum, a) => sum + a.connectionCount, 0)}</div>
+            <div class="stat-label">Total Connections</div>
+          </div>
+        </div>
+
+        <div class="apps-section">
+          <div class="section-header">
+            <span class="section-title">Global Apps</span>
+            <dees-button
+              @clicked=${() => this.showCreateDialog = true}
+            >
+              <dees-icon .icon=${'lucide:plus'} slot="iconLeft"></dees-icon>
+              Create App
+            </dees-button>
+          </div>
+
+          ${this.loading ? this.renderLoading() : this.renderAppList()}
+        </div>
+      </div>
+
+      ${this.showCreateDialog ? this.renderCreateDialog() : null}
+      ${this.editingApp ? this.renderEditDialog() : null}
+      ${this.newClientSecret ? this.renderSecretDialog() : null}
+    `;
+  }
+
+  private renderLoading(): TemplateResult {
+    return html`
+      <div class="loading">
+        <span>Loading apps...</span>
+      </div>
+    `;
+  }
+
+  private renderAppList(): TemplateResult {
+    if (this.apps.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:box'}></dees-icon>
+          <h3>No Global Apps</h3>
+          <p>Create your first global app to get started.</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="app-list">
+        ${this.apps.map(({ app, connectionCount }) => html`
+          <div class="app-item">
+            <div class="app-logo">
+              ${app.data.logoUrl
+                ? html`<img src="${app.data.logoUrl}" alt="${app.data.name}" />`
+                : html`<dees-icon .icon=${'lucide:box'}></dees-icon>`
+              }
+            </div>
+            <div class="app-info">
+              <div class="app-name">${app.data.name}</div>
+              <div class="app-details">
+                <span>${app.data.category}</span>
+                <span>${connectionCount} connections</span>
+                <span>${app.data.appUrl}</span>
+              </div>
+            </div>
+            <span class="app-status ${app.data.isActive ? 'active' : 'inactive'}">
+              ${app.data.isActive ? 'Active' : 'Inactive'}
+            </span>
+            <div class="app-actions">
+              <button class="action-btn" @click=${() => this.editingApp = app}>
+                Edit
+              </button>
+              <button class="action-btn" @click=${() => this.regenerateCredentials(app.id)}>
+                Regenerate
+              </button>
+              <button class="action-btn danger" @click=${() => this.deleteApp(app.id)}>
+                Delete
+              </button>
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderCreateDialog(): TemplateResult {
+    return html`
+      <div class="dialog-overlay" @click=${(e: Event) => {
+        if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
+          this.showCreateDialog = false;
+        }
+      }}>
+        <div class="dialog">
+          <div class="dialog-header">
+            <h2 class="dialog-title">Create Global App</h2>
+          </div>
+          <div class="dialog-body">
+            <div class="form-group">
+              <label class="form-label">App Name</label>
+              <input type="text" class="form-input" id="app-name" placeholder="e.g., foss.global" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Description</label>
+              <textarea class="form-input form-textarea" id="app-description" placeholder="Describe what this app does..."></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label">App URL</label>
+              <input type="url" class="form-input" id="app-url" placeholder="https://app.example.com" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Logo URL</label>
+              <input type="url" class="form-input" id="app-logo" placeholder="https://example.com/logo.png" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Category</label>
+              <input type="text" class="form-input" id="app-category" placeholder="e.g., Productivity" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Redirect URIs (comma-separated)</label>
+              <input type="text" class="form-input" id="app-redirects" placeholder="https://app.example.com/callback" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Allowed Scopes (comma-separated)</label>
+              <input type="text" class="form-input" id="app-scopes" placeholder="openid, profile, email" />
+            </div>
+          </div>
+          <div class="dialog-footer">
+            <dees-button type="secondary" @clicked=${() => this.showCreateDialog = false}>
+              Cancel
+            </dees-button>
+            <dees-button @clicked=${this.createApp}>
+              Create App
+            </dees-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderEditDialog(): TemplateResult {
+    const app = this.editingApp!;
+    return html`
+      <div class="dialog-overlay" @click=${(e: Event) => {
+        if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
+          this.editingApp = null;
+        }
+      }}>
+        <div class="dialog">
+          <div class="dialog-header">
+            <h2 class="dialog-title">Edit ${app.data.name}</h2>
+          </div>
+          <div class="dialog-body">
+            <div class="form-group">
+              <label class="form-label">App Name</label>
+              <input type="text" class="form-input" id="edit-name" .value=${app.data.name} />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Description</label>
+              <textarea class="form-input form-textarea" id="edit-description">${app.data.description}</textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label">App URL</label>
+              <input type="url" class="form-input" id="edit-url" .value=${app.data.appUrl} />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Logo URL</label>
+              <input type="url" class="form-input" id="edit-logo" .value=${app.data.logoUrl} />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Category</label>
+              <input type="text" class="form-input" id="edit-category" .value=${app.data.category} />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Status</label>
+              <dees-input-checkbox
+                .label=${'App is active'}
+                .value=${app.data.isActive}
+                id="edit-active"
+              ></dees-input-checkbox>
+            </div>
+          </div>
+          <div class="dialog-footer">
+            <dees-button type="secondary" @clicked=${() => this.editingApp = null}>
+              Cancel
+            </dees-button>
+            <dees-button @clicked=${this.updateApp}>
+              Save Changes
+            </dees-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderSecretDialog(): TemplateResult {
+    return html`
+      <div class="dialog-overlay" @click=${(e: Event) => {
+        if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
+          this.newClientSecret = null;
+        }
+      }}>
+        <div class="dialog">
+          <div class="dialog-header">
+            <h2 class="dialog-title">Client Secret Generated</h2>
+          </div>
+          <div class="dialog-body">
+            <p>Your new client secret has been generated. Copy it now - you won't be able to see it again.</p>
+            <div class="secret-display">
+              <div class="secret-label">Client Secret</div>
+              <div class="secret-value">${this.newClientSecret}</div>
+            </div>
+            <div class="secret-warning">
+              <dees-icon .icon=${'lucide:alert-triangle'}></dees-icon>
+              This secret will only be shown once. Store it securely.
+            </div>
+          </div>
+          <div class="dialog-footer">
+            <dees-button @clicked=${() => {
+              navigator.clipboard.writeText(this.newClientSecret!);
+            }}>
+              Copy to Clipboard
+            </dees-button>
+            <dees-button type="secondary" @clicked=${() => this.newClientSecret = null}>
+              Close
+            </dees-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.loadApps();
+  }
+
+  private async loadApps() {
+    this.loading = true;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetGlobalAppStats>(
+        'getGlobalAppStats'
+      );
+
+      const response = await typedRequest.fire({ jwt });
+      this.apps = response?.apps ?? [];
+    } catch (error) {
+      console.error('Error loading apps:', error);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private async createApp() {
+    const nameInput = this.shadowRoot!.querySelector('#app-name') as HTMLInputElement;
+    const descInput = this.shadowRoot!.querySelector('#app-description') as HTMLTextAreaElement;
+    const urlInput = this.shadowRoot!.querySelector('#app-url') as HTMLInputElement;
+    const logoInput = this.shadowRoot!.querySelector('#app-logo') as HTMLInputElement;
+    const categoryInput = this.shadowRoot!.querySelector('#app-category') as HTMLInputElement;
+    const redirectsInput = this.shadowRoot!.querySelector('#app-redirects') as HTMLInputElement;
+    const scopesInput = this.shadowRoot!.querySelector('#app-scopes') as HTMLInputElement;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_CreateGlobalApp>(
+        'createGlobalApp'
+      );
+
+      const response = await typedRequest.fire({
+        jwt,
+        name: nameInput.value,
+        description: descInput.value,
+        appUrl: urlInput.value,
+        logoUrl: logoInput.value,
+        category: categoryInput.value,
+        redirectUris: redirectsInput.value.split(',').map(s => s.trim()).filter(Boolean),
+        allowedScopes: scopesInput.value.split(',').map(s => s.trim()).filter(Boolean),
+      });
+
+      this.showCreateDialog = false;
+      this.newClientSecret = response.clientSecret;
+      await this.loadApps();
+    } catch (error) {
+      console.error('Error creating app:', error);
+      alert('Failed to create app');
+    }
+  }
+
+  private async updateApp() {
+    const app = this.editingApp!;
+    const nameInput = this.shadowRoot!.querySelector('#edit-name') as HTMLInputElement;
+    const descInput = this.shadowRoot!.querySelector('#edit-description') as HTMLTextAreaElement;
+    const urlInput = this.shadowRoot!.querySelector('#edit-url') as HTMLInputElement;
+    const logoInput = this.shadowRoot!.querySelector('#edit-logo') as HTMLInputElement;
+    const categoryInput = this.shadowRoot!.querySelector('#edit-category') as HTMLInputElement;
+    const activeCheckbox = this.shadowRoot!.querySelector('#edit-active') as any;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_UpdateGlobalApp>(
+        'updateGlobalApp'
+      );
+
+      await typedRequest.fire({
+        jwt,
+        appId: app.id,
+        updates: {
+          name: nameInput.value,
+          description: descInput.value,
+          appUrl: urlInput.value,
+          logoUrl: logoInput.value,
+          category: categoryInput.value,
+          isActive: activeCheckbox.value,
+        },
+      });
+
+      this.editingApp = null;
+      await this.loadApps();
+    } catch (error) {
+      console.error('Error updating app:', error);
+      alert('Failed to update app');
+    }
+  }
+
+  private async regenerateCredentials(appId: string) {
+    if (!confirm('Are you sure you want to regenerate credentials? The current credentials will stop working.')) {
+      return;
+    }
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_RegenerateAppCredentials>(
+        'regenerateAppCredentials'
+      );
+
+      const response = await typedRequest.fire({ jwt, appId });
+      this.newClientSecret = response.clientSecret;
+    } catch (error) {
+      console.error('Error regenerating credentials:', error);
+      alert('Failed to regenerate credentials');
+    }
+  }
+
+  private async deleteApp(appId: string) {
+    if (!confirm('Are you sure you want to delete this app? All organizations will be disconnected.')) {
+      return;
+    }
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_DeleteGlobalApp>(
+        'deleteGlobalApp'
+      );
+
+      const response = await typedRequest.fire({ jwt, appId });
+
+      if (response.disconnectedOrganizations > 0) {
+        alert(`App deleted. ${response.disconnectedOrganizations} organizations were disconnected.`);
+      }
+
+      await this.loadApps();
+    } catch (error) {
+      console.error('Error deleting app:', error);
+      alert('Failed to delete app');
+    }
+  }
+}

ts_web/elements/account/views/appsview.ts

@@ -0,0 +1,447 @@
+import * as plugins from '../../../plugins.js';
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  css,
+  state,
+} from '@design.estate/dees-element';
+
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
+import * as accountState from '../../../states/accountstate.js';
+import { IdpState } from '../../../states/idp.state.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountview-apps': AppsView;
+  }
+}
+
+interface IAppDisplay {
+  id: string;
+  name: string;
+  description: string;
+  logoUrl: string;
+  appUrl: string;
+  category: string;
+  isConnected: boolean;
+}
+
+@customElement('lele-accountview-apps')
+export class AppsView extends DeesElement {
+  @state()
+  accessor globalApps: IAppDisplay[] = [];
+
+  @state()
+  accessor loading: boolean = true;
+
+  @state()
+  accessor activeTab: 'global' | 'store' | 'custom' = 'global';
+
+  @state()
+  accessor organizationId: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    accountDesignTokens,
+    cardStyles,
+    typographyStyles,
+    css`
+      :host {
+        display: block;
+        padding: 48px;
+        max-width: 1000px;
+        margin: 0 auto;
+      }
+
+      .tabs {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 32px;
+        border-bottom: 1px solid var(--border);
+        padding-bottom: 8px;
+      }
+
+      .tab {
+        padding: 10px 20px;
+        border-radius: 8px 8px 0 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--muted-foreground);
+        cursor: pointer;
+        transition: all 0.15s ease;
+        border: none;
+        background: transparent;
+      }
+
+      .tab:hover {
+        color: var(--foreground);
+        background: var(--muted);
+      }
+
+      .tab.active {
+        color: var(--foreground);
+        background: var(--muted);
+      }
+
+      .app-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 24px;
+      }
+
+      .app-card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 24px;
+        transition: all 0.15s ease;
+      }
+
+      .app-card:hover {
+        border-color: var(--muted-foreground);
+      }
+
+      .app-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+        margin-bottom: 16px;
+      }
+
+      .app-logo {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        background: var(--muted);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      .app-logo img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .app-logo dees-icon {
+        font-size: 24px;
+        opacity: 0.7;
+      }
+
+      .app-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .app-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 4px 0;
+      }
+
+      .app-category {
+        font-size: 12px;
+        color: var(--muted-foreground);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .app-description {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        line-height: 1.5;
+        margin: 0 0 16px 0;
+      }
+
+      .app-actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .app-link {
+        font-size: 13px;
+        color: var(--muted-foreground);
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        transition: color 0.15s ease;
+      }
+
+      .app-link:hover {
+        color: var(--foreground);
+      }
+
+      .app-link dees-icon {
+        font-size: 14px;
+      }
+
+      .toggle-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .toggle-label {
+        font-size: 13px;
+        color: var(--muted-foreground);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 48px;
+        color: var(--muted-foreground);
+      }
+
+      .empty-state dees-icon {
+        font-size: 48px;
+        opacity: 0.5;
+        margin-bottom: 16px;
+      }
+
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: var(--muted-foreground);
+      }
+
+      .coming-soon {
+        text-align: center;
+        padding: 48px;
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+      }
+
+      .coming-soon dees-icon {
+        font-size: 48px;
+        opacity: 0.5;
+        margin-bottom: 16px;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <h1>Apps</h1>
+      <p>Manage apps connected to your organization. Connect global apps, browse the AppStore, or create custom OAuth clients.</p>
+
+      <div class="tabs">
+        <button
+          class="tab ${this.activeTab === 'global' ? 'active' : ''}"
+          @click=${() => this.activeTab = 'global'}
+        >
+          Global Apps
+        </button>
+        <button
+          class="tab ${this.activeTab === 'store' ? 'active' : ''}"
+          @click=${() => this.activeTab = 'store'}
+        >
+          App Store
+        </button>
+        <button
+          class="tab ${this.activeTab === 'custom' ? 'active' : ''}"
+          @click=${() => this.activeTab = 'custom'}
+        >
+          Custom OIDC
+        </button>
+      </div>
+
+      ${this.renderTabContent()}
+    `;
+  }
+
+  private renderTabContent() {
+    switch (this.activeTab) {
+      case 'global':
+        return this.renderGlobalApps();
+      case 'store':
+        return this.renderAppStore();
+      case 'custom':
+        return this.renderCustomOidc();
+    }
+  }
+
+  private renderGlobalApps() {
+    if (this.loading) {
+      return html`
+        <div class="loading">
+          <span>Loading apps...</span>
+        </div>
+      `;
+    }
+
+    if (this.globalApps.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:box'}></dees-icon>
+          <h2>No Global Apps Available</h2>
+          <p>There are no global apps configured yet.</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="app-grid">
+        ${this.globalApps.map(app => html`
+          <div class="app-card">
+            <div class="app-header">
+              <div class="app-logo">
+                ${app.logoUrl ? html`<img src="${app.logoUrl}" alt="${app.name}" />` : html`<dees-icon .icon=${'lucide:box'}></dees-icon>`}
+              </div>
+              <div class="app-info">
+                <h3 class="app-name">${app.name}</h3>
+                <span class="app-category">${app.category}</span>
+              </div>
+            </div>
+            <p class="app-description">${app.description}</p>
+            <div class="app-actions">
+              <a class="app-link" href="${app.appUrl}" target="_blank">
+                <dees-icon .icon=${'lucide:external-link'}></dees-icon>
+                Visit App
+              </a>
+              <div class="toggle-container">
+                <span class="toggle-label">${app.isConnected ? 'Connected' : 'Disconnected'}</span>
+                <dees-input-checkbox
+                  .value=${app.isConnected}
+                  @change=${(e: CustomEvent) => this.toggleAppConnection(app.id, e.detail)}
+                ></dees-input-checkbox>
+              </div>
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderAppStore() {
+    return html`
+      <div class="coming-soon">
+        <dees-icon .icon=${'lucide:store'}></dees-icon>
+        <h2>App Store</h2>
+        <p>Browse and install partner apps from other organizations.</p>
+        <p><em>Coming soon in Phase 3</em></p>
+      </div>
+    `;
+  }
+
+  private renderCustomOidc() {
+    return html`
+      <div class="coming-soon">
+        <dees-icon .icon=${'lucide:key'}></dees-icon>
+        <h2>Custom OIDC Apps</h2>
+        <p>Create and manage your own OAuth/OIDC client applications.</p>
+        <p><em>Coming soon in Phase 2</em></p>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.loadApps();
+  }
+
+  private async loadApps() {
+    this.loading = true;
+
+    try {
+      // Get the organization ID from the URL
+      const pathParts = window.location.pathname.split('/');
+      const orgSlug = pathParts[3];
+
+      const currentState = accountState.accountState.getState();
+      const selectedOrg = currentState.organizations.find(org => org.data.slug === orgSlug);
+
+      if (!selectedOrg) {
+        console.error('Organization not found');
+        this.loading = false;
+        return;
+      }
+
+      this.organizationId = selectedOrg.id;
+
+      // Get JWT from IdpState
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      // Fetch global apps
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetGlobalApps>(
+        'getGlobalApps'
+      );
+
+      const appsResponse = await typedRequest.fire({
+        jwt,
+      });
+
+      // Fetch connections for this organization
+      const connectionsRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetAppConnections>(
+        'getAppConnections'
+      );
+
+      const connectionsResponse = await connectionsRequest.fire({
+        jwt,
+        organizationId: this.organizationId,
+      });
+
+      // Map apps with connection status
+      const connectionMap = new Map(
+        connectionsResponse.connections
+          .filter(c => c.data.status === 'active')
+          .map(c => [c.data.appId, true])
+      );
+
+      this.globalApps = appsResponse.apps.map(app => ({
+        id: app.id,
+        name: app.data.name,
+        description: app.data.description,
+        logoUrl: app.data.logoUrl,
+        appUrl: app.data.appUrl,
+        category: app.data.category,
+        isConnected: connectionMap.has(app.id),
+      }));
+
+    } catch (error) {
+      console.error('Error loading apps:', error);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private async toggleAppConnection(appId: string, isConnected: boolean) {
+    try {
+      // Get JWT from IdpState
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_ToggleAppConnection>(
+        'toggleAppConnection'
+      );
+
+      await typedRequest.fire({
+        jwt,
+        organizationId: this.organizationId,
+        appId: appId,
+        action: isConnected ? 'connect' : 'disconnect',
+      });
+
+      // Update local state
+      this.globalApps = this.globalApps.map(app =>
+        app.id === appId ? { ...app, isConnected } : app
+      );
+
+    } catch (error) {
+      console.error('Error toggling app connection:', error);
+      // Revert the checkbox on error
+      await this.loadApps();
+    }
+  }
+}

ts_web/elements/account/views/baseview.ts

@@ -5,13 +5,14 @@ import {
   property,
   html,
   cssManager,
-  unsafeCSS,
   css,
-  render,
+  state,
-  subscribe,
+  type TemplateResult,
 } from '@design.estate/dees-element';
 
-import sharedStyles from '../sharedstyles.js';
+import { accountDesignTokens } from '../sharedstyles.js';
+import * as accountStateModule from '../../../states/accountstate.js';
+import { IdpState } from '../../../states/idp.state.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,175 +20,822 @@ declare global {
   }
 }
 
-import * as state from '../../../states/accountstate.js';
+interface ISessionDisplay {
+  id: string;
+  deviceId: string;
+  deviceName: string;
+  browser: string;
+  os: string;
+  ip: string;
+  lastActive: number;
+  createdAt: number;
+  isCurrent: boolean;
+}
+
+interface IActivityDisplay {
+  id: string;
+  data: plugins.idpInterfaces.data.IActivityLog['data'];
+}
 
 @customElement('lele-accountview-baseview')
 export class BaseView extends DeesElement {
-  @property({
+  @state()
-    type: Array,
+  accessor loading: boolean = true;
-  })
+
-  subscriptions: any[] = [
+  @state()
-    {
+  accessor sessions: ISessionDisplay[] = [];
-      organization: 'org1',
+
-      'subscription type': 'workspace.global SaaS',
+  @state()
-      price: '4€',
+  accessor activities: IActivityDisplay[] = [];
-      userFactor: 4,
+
-      total: '16.00€',
+  @state()
-    },
+  accessor user: plugins.idpInterfaces.data.IUser | null = null;
-    {
+
-      organization: 'org1',
+  @state()
-      'subscription type': 'workspace.global IaaS Base Access',
+  accessor organizations: plugins.idpInterfaces.data.IOrganization[] = [];
-      price: '0€',
+
-      userFactor: 4,
+  @state()
-      total: '0€',
+  accessor roles: plugins.idpInterfaces.data.IRole[] = [];
-    },
-    {
-      organization: 'org1',
-      'subscription type': 'workspace.global SLA Senior',
-      price: '2000€',
-      userFactor: 'none',
-      total: '2000.00€',
-    },
-  ];
 
   public static styles = [
     cssManager.defaultStyles,
-    sharedStyles,
+    accountDesignTokens,
     css`
       :host {
         display: block;
-        max-width: 900px;
+        min-height: 100%;
-        margin: auto;
+        background: var(--background);
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: var(--foreground);
-      }
-      .slug {
-        color: orange;
       }
 
-      .orgGrid {
+      .container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 32px 24px;
+      }
+
+      .header {
+        margin-bottom: 32px;
+      }
+
+      h1 {
+        font-size: 32px;
+        font-weight: 600;
+        margin: 0;
+        letter-spacing: -0.02em;
+      }
+
+      .subtitle {
+        color: #71717a;
+        margin-top: 8px;
+        font-size: 14px;
+      }
+
+      .dashboard-grid {
         display: grid;
-        grid-gap: 16px;
+        grid-template-columns: 1fr 1fr;
-        grid-template-columns: ${cssManager.cssGridColumns(2, 16)};
+        gap: 24px;
       }
 
-      .org {
+      @media (max-width: 768px) {
-        padding: 16px;
+        .dashboard-grid {
-        border-top: 1px solid #444;
+          grid-template-columns: 1fr;
-        background: ${cssManager.bdTheme('#ccc', '#222')};
+        }
-        border-radius: 16px;
       }
 
-      .org:hover {
+      .card {
-        cursor: default;
+        background: #18181b;
-        background: ${cssManager.bdTheme('#CCC', '#333')};
+        border: 1px solid #27272a;
+        border-radius: 12px;
+        overflow: hidden;
+      }
+
+      .card.full-width {
+        grid-column: 1 / -1;
+      }
+
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px 20px;
+        border-bottom: 1px solid #27272a;
+      }
+
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .card-title dees-icon {
+        opacity: 0.7;
+      }
+
+      .card-body {
+        padding: 16px 20px;
+      }
+
+      .card-body.no-padding {
+        padding: 0;
+      }
+
+      /* Profile Card */
+      .profile-info {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .avatar {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        font-weight: 600;
+        color: white;
+        flex-shrink: 0;
+      }
+
+      .profile-details {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .profile-name {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+
+      .profile-email {
+        font-size: 14px;
+        color: #71717a;
+        word-break: break-all;
+      }
+
+      /* Organizations */
+      .org-list {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .org-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 20px;
+        border-bottom: 1px solid #27272a;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .org-item:last-child {
+        border-bottom: none;
+      }
+
+      .org-item:hover {
+        background: #27272a;
+      }
+
+      .org-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        background: #27272a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .org-icon dees-icon {
+        opacity: 0.7;
+      }
+
+      .org-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .org-name {
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 2px;
+      }
+
+      .org-role {
+        font-size: 12px;
+        color: #71717a;
+      }
+
+      .role-badge {
+        padding: 4px 10px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 500;
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+      }
+
+      .role-badge.admin {
+        background: rgba(245, 158, 11, 0.1);
+        color: #f59e0b;
+      }
+
+      .role-badge.owner {
+        background: rgba(139, 92, 246, 0.1);
+        color: #8b5cf6;
+      }
+
+      /* Sessions */
+      .session-list {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .session-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 20px;
+        border-bottom: 1px solid #27272a;
+        overflow: hidden;
+        transition: all 0.3s ease-out;
+        opacity: 1;
+        max-height: 100px;
+      }
+
+      .session-item.removing {
+        opacity: 0;
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin: 0;
+        border-bottom-color: transparent;
+      }
+
+      .session-item:last-child {
+        border-bottom: none;
+      }
+
+      .session-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        background: #27272a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .session-icon dees-icon {
+        opacity: 0.7;
+      }
+
+      .session-icon.current {
+        background: rgba(34, 197, 94, 0.1);
+      }
+
+      .session-icon.current dees-icon {
+        color: #22c55e;
+        opacity: 1;
+      }
+
+      .session-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .session-device {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 2px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .current-badge {
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 10px;
+        font-weight: 500;
+        background: rgba(34, 197, 94, 0.1);
+        color: #22c55e;
+      }
+
+      .session-details {
+        font-size: 12px;
+        color: #71717a;
+      }
+
+      .session-actions {
+        flex-shrink: 0;
+      }
+
+      .revoke-btn {
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        border: 1px solid #27272a;
+        background: transparent;
+        color: #fafafa;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .revoke-btn:hover {
+        background: rgba(239, 68, 68, 0.1);
+        border-color: #ef4444;
+        color: #ef4444;
+      }
+
+      /* Activity */
+      .activity-list {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .activity-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 12px 20px;
+        border-bottom: 1px solid #27272a;
+      }
+
+      .activity-item:last-child {
+        border-bottom: none;
+      }
+
+      .activity-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+        background: #27272a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .activity-icon dees-icon {
+        font-size: 14px;
+        opacity: 0.7;
+      }
+
+      .activity-icon.login {
+        background: rgba(34, 197, 94, 0.1);
+      }
+
+      .activity-icon.login dees-icon {
+        color: #22c55e;
+        opacity: 1;
+      }
+
+      .activity-icon.logout {
+        background: rgba(239, 68, 68, 0.1);
+      }
+
+      .activity-icon.logout dees-icon {
+        color: #ef4444;
+        opacity: 1;
+      }
+
+      .activity-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .activity-description {
+        font-size: 14px;
+        margin-bottom: 2px;
+      }
+
+      .activity-time {
+        font-size: 12px;
+        color: #71717a;
+      }
+
+      /* Empty states */
+      .empty-state {
+        text-align: center;
+        padding: 32px 20px;
+        color: #71717a;
+      }
+
+      .empty-state dees-icon {
+        font-size: 32px;
+        opacity: 0.5;
+        margin-bottom: 12px;
+      }
+
+      .empty-state p {
+        margin: 0;
+        font-size: 14px;
+      }
+
+      /* Loading state */
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: #71717a;
+      }
+
+      /* Create org button */
+      .create-org-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        border: 1px solid #27272a;
+        background: transparent;
+        color: #fafafa;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .create-org-btn:hover {
+        background: #27272a;
+      }
+
+      .create-org-btn dees-icon {
+        font-size: 14px;
       }
     `,
   ];
 
-  public render() {
+  public render(): TemplateResult {
+    if (this.loading) {
       return html`
-    <div class="viewHost">
+        <div class="container">
-
+          <div class="loading">Loading your account...</div>
-    </div> `;
+        </div>
+      `;
     }
 
-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    const userInitial = this.user?.data?.username?.charAt(0).toUpperCase() ||
-    await this.domtoolsPromise;
+                        this.user?.data?.email?.charAt(0).toUpperCase() || '?';
-    super.firstUpdated(_changedProperties);
-    const viewHost: HTMLDivElement = this.shadowRoot.querySelector('.viewHost');
-    await state.accountState.dispatchAction(state.getOrganizationsAction, null);
-    console.log('got orgs');
-    if (state.accountState.getState().organizations.length === 0) {
-      render(
-        html`
-          <h1>Setup Your Account</h1>
-          <p>
-            There are no organizations for your account. Please create one now. Alternatively you
-            can ask an admin of an existing organization to invite you.
-          </p>
-          <dees-form>
-            <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
-          </dees-form>
-          <p>
-            The organization slug corresponds to the organization name:<br />
-            <span class="slug"
-              >${subscribe(
-                state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
-              )}</span
-            >
-          </p>
-          <span class="hint"></span>
-          <dees-button .disabled=${true}>Create the Organization</dees-button>
-        `,
-        viewHost
-      );
-      const subscriptions: plugins.deesDomtools.plugins.smartrx.rxjs.Subscription[] = [];
-      const form = this.shadowRoot.querySelector('dees-form');
-      const orgInput = this.shadowRoot.querySelector('dees-input-text');
-      const hint = this.shadowRoot.querySelector('.hint');
-      const button = this.shadowRoot.querySelector('dees-button');
-      const newOrgSubscription = state.accountState
-        .select((stateArg) => stateArg.newOrg)
-        .subscribe((data) => {
-          if (data.chosenSlug) {
-            hint.innerHTML = 'Waiting: Validating...';
-          } else {
-            hint.innerHTML = 'Hint: Enter a valid organization name.';
-          }
-          if (data.validated && data.validationOk) {
-            hint.innerHTML =
-              'Success: Name is available. Please click the button to create the organization.';
-            button.disabled = false;
-          } else if (!data.validated || !data.validationOk) {
-            hint.innerHTML = `Info: Name not available. Please choose another one.`;
-            button.disabled = true;
-          }
-        });
-      subscriptions.push(newOrgSubscription);
 
-      const formSubscription = form.changeSubject.subscribe(async (dataArg: any) => {
-        await state.accountState.dispatchAction(state.setNewOrgName, dataArg.orgName);
-      });
-      subscriptions.push(formSubscription);
-      button.addEventListener('clicked', async () => {
-        orgInput.disabled = true;
-        button.text = 'creating org...';
-        button.status = 'pending';
-        hint.innerHTML = 'Waiting for creation of the organization...';
-        await state.accountState.dispatchAction(state.manifestNewOrgName, null);
-        hint.innerHTML = `The Organization with name ${
-          state.accountState.getState().organizations[0].data.name
-        } has been created!`;
-        button.text = 'created!';
-        button.status = 'success';
-        const parentElement = (this.getRootNode() as any).host;
-        parentElement.subrouter.pushUrl(
-          `/org/${state.accountState.getState().organizations[0].data.slug}/billing`
-        );
-      });
-    } else {
-      render(
-        html`
-          <h1>Select An Organization</h1>
-          <div class="orgGrid">
-            ${state.accountState.getState().organizations.map((orgArg) => {
     return html`
-                <div
+      <div class="container">
-                  class="org"
+        <div class="header">
-                  @click=${() => {
+          <h1>Account Overview</h1>
-                    state.accountState.dispatchAction(state.setSelectedOrg, orgArg);
+          <p class="subtitle">Manage your profile, organizations, and security settings</p>
-                    const parentElement = (this.getRootNode() as any).host;
+        </div>
-                    parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
+
-                  }}
+        <div class="dashboard-grid">
-                >
+          <!-- Profile Card -->
-                  <dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">
+                <dees-icon .icon=${'lucide:user'}></dees-icon>
+                Profile
+              </span>
+            </div>
+            <div class="card-body">
+              <div class="profile-info">
+                <div class="avatar">${userInitial}</div>
+                <div class="profile-details">
+                  <div class="profile-name">${this.user?.data?.username || 'Unknown User'}</div>
+                  <div class="profile-email">${this.user?.data?.email || 'No email'}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Organizations Card -->
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">
+                <dees-icon .icon=${'lucide:building2'}></dees-icon>
+                Organizations
+              </span>
+              <button class="create-org-btn" @click=${this.handleCreateOrg}>
+                <dees-icon .icon=${'lucide:plus'}></dees-icon>
+                New
+              </button>
+            </div>
+            <div class="card-body no-padding">
+              ${this.renderOrganizations()}
+            </div>
+          </div>
+
+          <!-- Sessions Card -->
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">
+                <dees-icon .icon=${'lucide:monitor-smartphone'}></dees-icon>
+                Active Sessions
+              </span>
+            </div>
+            <div class="card-body no-padding">
+              ${this.renderSessions()}
+            </div>
+          </div>
+
+          <!-- Activity Card -->
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">
+                <dees-icon .icon=${'lucide:activity'}></dees-icon>
+                Recent Activity
+              </span>
+            </div>
+            <div class="card-body no-padding">
+              ${this.renderActivity()}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderOrganizations(): TemplateResult {
+    if (this.organizations.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:building2'}></dees-icon>
+          <p>You're not a member of any organizations yet.</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="org-list">
+        ${this.organizations.map((org) => {
+          const roleObj = this.roles.find(r => r.data.organizationId === org.id);
+          const roleName = roleObj?.data.roles?.[0] || 'member';
+          const roleClass = roleName === 'owner' ? 'owner' :
+                           roleName === 'admin' ? 'admin' : '';
+          const roleDisplay = roleName.charAt(0).toUpperCase() + roleName.slice(1);
+          return html`
+            <div class="org-item" @click=${() => this.handleSelectOrg(org)}>
+              <div class="org-icon">
+                <dees-icon .icon=${'lucide:building2'}></dees-icon>
+              </div>
+              <div class="org-info">
+                <div class="org-name">${org.data.name}</div>
+                <div class="org-role">${org.data.slug}</div>
+              </div>
+              <span class="role-badge ${roleClass}">${roleDisplay}</span>
             </div>
           `;
         })}
       </div>
-        `,
+    `;
-        viewHost
-      );
   }
+
+  private renderSessions(): TemplateResult {
+    if (this.sessions.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:monitor'}></dees-icon>
+          <p>No active sessions found.</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="session-list">
+        ${this.sessions.map((session) => html`
+          <div class="session-item" data-session-id=${session.id}>
+            <div class="session-icon ${session.isCurrent ? 'current' : ''}">
+              <dees-icon .icon=${this.getDeviceIcon(session.os)}></dees-icon>
+            </div>
+            <div class="session-info">
+              <div class="session-device">
+                ${session.deviceName || 'Unknown Device'}
+                ${session.isCurrent ? html`<span class="current-badge">Current</span>` : ''}
+              </div>
+              <div class="session-details">
+                ${session.browser} · ${session.os} · Last active ${this.formatTimeAgo(session.lastActive)}
+              </div>
+            </div>
+            ${!session.isCurrent ? html`
+              <div class="session-actions">
+                <button class="revoke-btn" @click=${() => this.handleRevokeSession(session.id)}>
+                  Revoke
+                </button>
+              </div>
+            ` : ''}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderActivity(): TemplateResult {
+    if (this.activities.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:activity'}></dees-icon>
+          <p>No recent activity.</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="activity-list">
+        ${this.activities.slice(0, 5).map((activity) => html`
+          <div class="activity-item">
+            <div class="activity-icon ${this.getActivityIconClass(activity.data.action)}">
+              <dees-icon .icon=${this.getActivityIcon(activity.data.action)}></dees-icon>
+            </div>
+            <div class="activity-info">
+              <div class="activity-description">${activity.data.metadata.description}</div>
+              <div class="activity-time">${this.formatTimeAgo(activity.data.timestamp)}</div>
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private getDeviceIcon(os: string): string {
+    const osLower = os?.toLowerCase() || '';
+    if (osLower.includes('mac') || osLower.includes('ios')) {
+      return 'lucide:laptop';
+    } else if (osLower.includes('android')) {
+      return 'lucide:smartphone';
+    } else if (osLower.includes('windows')) {
+      return 'lucide:monitor';
+    } else if (osLower.includes('linux')) {
+      return 'lucide:terminal';
+    }
+    return 'lucide:monitor';
+  }
+
+  private getActivityIcon(action: string): string {
+    switch (action) {
+      case 'login':
+        return 'lucide:log-in';
+      case 'logout':
+        return 'lucide:log-out';
+      case 'session_created':
+        return 'lucide:key';
+      case 'session_revoked':
+        return 'lucide:shield-off';
+      case 'org_created':
+        return 'lucide:building-2';
+      case 'org_joined':
+        return 'lucide:user-plus';
+      case 'org_left':
+        return 'lucide:user-minus';
+      case 'role_changed':
+        return 'lucide:shield';
+      case 'profile_updated':
+        return 'lucide:user-cog';
+      case 'app_connected':
+        return 'lucide:plug';
+      case 'app_disconnected':
+        return 'lucide:unplug';
+      default:
+        return 'lucide:activity';
+    }
+  }
+
+  private getActivityIconClass(action: string): string {
+    if (action === 'login' || action === 'session_created' || action === 'org_joined' || action === 'app_connected') {
+      return 'login';
+    }
+    if (action === 'logout' || action === 'session_revoked' || action === 'org_left' || action === 'app_disconnected') {
+      return 'logout';
+    }
+    return '';
+  }
+
+  private formatTimeAgo(timestamp: number): string {
+    const now = Date.now();
+    const diff = now - timestamp;
+    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(timestamp).toLocaleDateString();
+  }
+
+  public async firstUpdated() {
+    await this.loadDashboardData();
+  }
+
+  private async loadDashboardData() {
+    this.loading = true;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+
+      // Load organizations and roles from account state
+      await accountStateModule.accountState.dispatchAction(accountStateModule.getOrganizationsAction, null);
+      const state = accountStateModule.accountState.getState();
+      this.organizations = state.organizations;
+      this.roles = state.roles;
+      this.user = state.user;
+
+      // Load sessions
+      await this.loadSessions();
+
+      // Load activity
+      await this.loadActivity();
+    } catch (error) {
+      console.error('Error loading dashboard data:', error);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private async loadSessions() {
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetUserSessions>(
+        'getUserSessions'
+      );
+
+      const response = await typedRequest.fire({ jwt });
+      this.sessions = response?.sessions ?? [];
+    } catch (error) {
+      console.error('Error loading sessions:', error);
+      this.sessions = [];
+    }
+  }
+
+  private async loadActivity() {
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetUserActivity>(
+        'getUserActivity'
+      );
+
+      const response = await typedRequest.fire({ jwt, limit: 10 });
+      this.activities = response?.activities ?? [];
+    } catch (error) {
+      console.error('Error loading activity:', error);
+      this.activities = [];
+    }
+  }
+
+  private async handleRevokeSession(sessionId: string) {
+    if (!confirm('Are you sure you want to revoke this session? The device will be logged out.')) {
+      return;
+    }
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_RevokeSession>(
+        'revokeSession'
+      );
+
+      await typedRequest.fire({ jwt, sessionId });
+
+      // Animate the session item collapse before removing from DOM
+      const sessionElement = this.shadowRoot?.querySelector(`[data-session-id="${sessionId}"]`) as HTMLElement;
+      if (sessionElement) {
+        sessionElement.classList.add('removing');
+        await new Promise(resolve => setTimeout(resolve, 300)); // Wait for animation
+      }
+
+      await this.loadSessions();
+    } catch (error) {
+      console.error('Error revoking session:', error);
+      alert('Failed to revoke session');
+    }
+  }
+
+  private handleSelectOrg(org: plugins.idpInterfaces.data.IOrganization) {
+    accountStateModule.accountState.dispatchAction(accountStateModule.setSelectedOrg, org);
+    const parentElement = (this.getRootNode() as any).host;
+    parentElement.subrouter.pushUrl(`/org/${org.data.slug}/billing`);
+  }
+
+  private handleCreateOrg() {
+    // Dispatch event to open create org modal
+    this.dispatchEvent(new CustomEvent('open-create-org-modal', {
+      bubbles: true,
+      composed: true,
+    }));
   }
 }

ts_web/elements/account/views/index.ts

@@ -1,4 +1,8 @@
+export * from './adminview.js';
+export * from './appsview.js';
 export * from './baseview.js';
 export * from './orgsetup.js';
+export * from './orgview.js';
 export * from './paddlesetup.js';
 export * from './subscriptions.js';
+export * from './usersview.js';

ts_web/elements/account/views/orgview.ts

@@ -0,0 +1,513 @@
+import * as plugins from '../../../plugins.js';
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  css,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { accountDesignTokens } from '../sharedstyles.js';
+import * as accountStateModule from '../../../states/accountstate.js';
+import { IdpState } from '../../../states/idp.state.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountview-orgview': OrgView;
+  }
+}
+
+interface IOrgStats {
+  memberCount: number;
+  appCount: number;
+}
+
+@customElement('lele-accountview-orgview')
+export class OrgView extends DeesElement {
+  @state()
+  accessor loading: boolean = true;
+
+  @state()
+  accessor organization: plugins.idpInterfaces.data.IOrganization | null = null;
+
+  @state()
+  accessor userRole: plugins.idpInterfaces.data.IRole | null = null;
+
+  @state()
+  accessor stats: IOrgStats = { memberCount: 0, appCount: 0 };
+
+  public static styles = [
+    cssManager.defaultStyles,
+    accountDesignTokens,
+    css`
+      :host {
+        display: block;
+        min-height: 100%;
+        background: var(--background);
+        color: var(--foreground);
+      }
+
+      .container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 32px 24px;
+      }
+
+      .header {
+        margin-bottom: 32px;
+      }
+
+      h1 {
+        font-size: 32px;
+        font-weight: 600;
+        margin: 0;
+        letter-spacing: -0.02em;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      h1 dees-icon {
+        opacity: 0.7;
+      }
+
+      .subtitle {
+        color: #71717a;
+        margin-top: 8px;
+        font-size: 14px;
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      @media (max-width: 640px) {
+        .stats-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .stat-card {
+        background: #18181b;
+        border: 1px solid #27272a;
+        border-radius: 12px;
+        padding: 20px;
+        text-align: center;
+      }
+
+      .stat-value {
+        font-size: 32px;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+
+      .stat-label {
+        font-size: 13px;
+        color: #71717a;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .dashboard-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 24px;
+      }
+
+      @media (max-width: 768px) {
+        .dashboard-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .card {
+        background: #18181b;
+        border: 1px solid #27272a;
+        border-radius: 12px;
+        overflow: hidden;
+      }
+
+      .card.full-width {
+        grid-column: 1 / -1;
+      }
+
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px 20px;
+        border-bottom: 1px solid #27272a;
+      }
+
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .card-title dees-icon {
+        opacity: 0.7;
+      }
+
+      .card-body {
+        padding: 16px 20px;
+      }
+
+      .card-body.no-padding {
+        padding: 0;
+      }
+
+      /* Info rows */
+      .info-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid #27272a;
+      }
+
+      .info-row:last-child {
+        border-bottom: none;
+      }
+
+      .info-label {
+        font-size: 13px;
+        color: #71717a;
+      }
+
+      .info-value {
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .info-value.slug {
+        font-family: 'Geist Mono', monospace;
+        background: #27272a;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+
+      /* Role badge */
+      .role-badge {
+        padding: 4px 12px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+      }
+
+      .role-badge.admin {
+        background: rgba(245, 158, 11, 0.1);
+        color: #f59e0b;
+      }
+
+      .role-badge.owner {
+        background: rgba(139, 92, 246, 0.1);
+        color: #8b5cf6;
+      }
+
+      /* Quick actions */
+      .action-list {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .action-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 14px 20px;
+        border-bottom: 1px solid #27272a;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .action-item:last-child {
+        border-bottom: none;
+      }
+
+      .action-item:hover {
+        background: #27272a;
+      }
+
+      .action-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: #27272a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .action-item:hover .action-icon {
+        background: #3f3f46;
+      }
+
+      .action-icon dees-icon {
+        opacity: 0.7;
+      }
+
+      .action-info {
+        flex: 1;
+      }
+
+      .action-name {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 2px;
+      }
+
+      .action-description {
+        font-size: 12px;
+        color: #71717a;
+      }
+
+      .action-arrow {
+        color: #71717a;
+      }
+
+      /* Billing status */
+      .billing-status {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .billing-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #71717a;
+      }
+
+      .billing-indicator.active {
+        background: #22c55e;
+      }
+
+      .billing-indicator.none {
+        background: #f59e0b;
+      }
+
+      /* Loading state */
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: #71717a;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (this.loading) {
+      return html`
+        <div class="container">
+          <div class="loading">Loading organization...</div>
+        </div>
+      `;
+    }
+
+    if (!this.organization) {
+      return html`
+        <div class="container">
+          <div class="loading">Organization not found</div>
+        </div>
+      `;
+    }
+
+    const roleName = this.userRole?.data.roles?.[0] || 'member';
+    const roleClass = roleName === 'owner' ? 'owner' : roleName === 'admin' ? 'admin' : '';
+    const roleDisplay = roleName.charAt(0).toUpperCase() + roleName.slice(1);
+
+    return html`
+      <div class="container">
+        <div class="header">
+          <h1>
+            <dees-icon .icon=${'lucide:building2'}></dees-icon>
+            ${this.organization.data.name}
+          </h1>
+          <p class="subtitle">Organization dashboard and settings</p>
+        </div>
+
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-value">${this.stats.memberCount}</div>
+            <div class="stat-label">Members</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">${this.stats.appCount}</div>
+            <div class="stat-label">Connected Apps</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">
+              <span class="role-badge ${roleClass}">${roleDisplay}</span>
+            </div>
+            <div class="stat-label">Your Role</div>
+          </div>
+        </div>
+
+        <div class="dashboard-grid">
+          <!-- Organization Info -->
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">
+                <dees-icon .icon=${'lucide:info'}></dees-icon>
+                Organization Info
+              </span>
+            </div>
+            <div class="card-body">
+              <div class="info-row">
+                <span class="info-label">Name</span>
+                <span class="info-value">${this.organization.data.name}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Slug</span>
+                <span class="info-value slug">${this.organization.data.slug}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Billing</span>
+                <span class="info-value">
+                  <div class="billing-status">
+                    <span class="billing-indicator ${this.organization.data.billingPlanId ? 'active' : 'none'}"></span>
+                    ${this.organization.data.billingPlanId ? 'Active' : 'Not configured'}
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quick Actions -->
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">
+                <dees-icon .icon=${'lucide:zap'}></dees-icon>
+                Quick Actions
+              </span>
+            </div>
+            <div class="card-body no-padding">
+              <div class="action-list">
+                <div class="action-item" @click=${this.navigateToApps}>
+                  <div class="action-icon">
+                    <dees-icon .icon=${'lucide:box'}></dees-icon>
+                  </div>
+                  <div class="action-info">
+                    <div class="action-name">Manage Apps</div>
+                    <div class="action-description">Connect and configure applications</div>
+                  </div>
+                  <dees-icon class="action-arrow" .icon=${'lucide:chevron-right'}></dees-icon>
+                </div>
+                <div class="action-item" @click=${this.navigateToBilling}>
+                  <div class="action-icon">
+                    <dees-icon .icon=${'lucide:wallet'}></dees-icon>
+                  </div>
+                  <div class="action-info">
+                    <div class="action-name">View Billing</div>
+                    <div class="action-description">Manage subscription and invoices</div>
+                  </div>
+                  <dees-icon class="action-arrow" .icon=${'lucide:chevron-right'}></dees-icon>
+                </div>
+                <div class="action-item" @click=${this.handleInviteUser}>
+                  <div class="action-icon">
+                    <dees-icon .icon=${'lucide:user-plus'}></dees-icon>
+                  </div>
+                  <div class="action-info">
+                    <div class="action-name">Invite Member</div>
+                    <div class="action-description">Add team members to your organization</div>
+                  </div>
+                  <dees-icon class="action-arrow" .icon=${'lucide:chevron-right'}></dees-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.loadOrgData();
+  }
+
+  private async loadOrgData() {
+    this.loading = true;
+
+    try {
+      // Get the organization slug from the URL
+      const pathParts = window.location.pathname.split('/');
+      const orgSlug = pathParts[3];
+
+      const currentState = accountStateModule.accountState.getState();
+      const selectedOrg = currentState.organizations.find(org => org.data.slug === orgSlug);
+
+      if (!selectedOrg) {
+        console.error('Organization not found');
+        this.loading = false;
+        return;
+      }
+
+      this.organization = selectedOrg;
+
+      // Find user's role in this org
+      this.userRole = currentState.roles.find(r => r.data.organizationId === selectedOrg.id) || null;
+
+      // Calculate stats
+      const memberCount = selectedOrg.data.roleIds?.length || 1;
+
+      // Get app connections count
+      let appCount = 0;
+      try {
+        const idpState = await IdpState.getSingletonInstance();
+        const jwt = await idpState.idpClient.getJwt();
+
+        const connectionsRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetAppConnections>(
+          'getAppConnections'
+        );
+
+        const connectionsResponse = await connectionsRequest.fire({
+          jwt,
+          organizationId: selectedOrg.id,
+        });
+
+        appCount = connectionsResponse.connections?.filter(c => c.data.status === 'active').length || 0;
+      } catch (error) {
+        console.error('Error loading app connections:', error);
+      }
+
+      this.stats = { memberCount, appCount };
+    } catch (error) {
+      console.error('Error loading org data:', error);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private async navigateToApps() {
+    if (!this.organization) return;
+    const parentElement = (this.getRootNode() as any).host;
+    parentElement.subrouter.pushUrl(`/org/${this.organization.data.slug}/apps`);
+  }
+
+  private async navigateToBilling() {
+    if (!this.organization) return;
+    const parentElement = (this.getRootNode() as any).host;
+    parentElement.subrouter.pushUrl(`/org/${this.organization.data.slug}/billing`);
+  }
+
+  private handleInviteUser() {
+    // TODO: Implement invite user modal
+    alert('Invite member functionality coming soon');
+  }
+}

ts_web/elements/account/views/paddlesetup.ts

@@ -11,6 +11,7 @@ import {
 import * as plugins from '../../../plugins.js';
 import sharedStyles from '../sharedstyles.js';
 import * as state from '../../../states/accountstate.js';
+import { IdpState } from '../../../states/idp.state.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -54,41 +55,57 @@ export class PaddleSetupView extends DeesElement {
         Paddle takes care of tax compliance for us. This allows us to sell our products world wide
         while Paddle makes sure any sales are in compliance with local laws.
       </p>
-      <dees-button>Let's do it!</dees-button>
+      <dees-button @clicked=${() => this.openPaddle()}>Let's do it!</dees-button>
     `;
   }
 
-  /**
+  public async openPaddle() {
-   *
-   */
-  public async firstUpdated() {
     await this.domtoolsPromise;
     const paddleButton = this.shadowRoot.querySelector('dees-button');
-    const openPaddle = async () => {
+    const idpState = await IdpState.getSingletonInstance();
-      await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
+
-      globalThis.Paddle.Setup({
+    // Get user email - first try from state, then fetch directly
-        vendor: 30954,
+    let userEmail = state.accountState.getState().user?.data?.email;
-        eventCallback: async (dataArg) => {
+
-          // The data.event will specify the event type
+    if (!userEmail) {
-          if (dataArg.event === 'Checkout.Complete') {
+      // State not loaded, fetch user directly
-            const data: plugins.idpInterfaces.data.IPaddleCheckoutData = dataArg.eventData;
+      const whoIsResponse = await idpState.idpClient.whoIs().catch(() => null);
+      userEmail = whoIsResponse?.user?.data?.email;
+    }
+
+    if (!userEmail) {
+      console.error('Unable to get user email for Paddle checkout');
+      paddleButton.status = 'error';
+      paddleButton.text = 'Error: Not logged in';
+      return;
+    }
+
+    // Fetch Paddle config from backend
+    const configRequest = idpState.idpClient.typedsocket
+      .createTypedRequest<plugins.idpInterfaces.request.IReq_GetPaddleConfig>('getPaddleConfig');
+    const { paddleToken, paddlePriceId } = await configRequest.fire({});
+
+    await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/v2/paddle.js');
+    globalThis.Paddle.Initialize({
+      token: paddleToken,
+      eventCallback: async (dataArg: any) => {
+        // Paddle Billing v2 event handling
+        if (dataArg.name === 'checkout.completed') {
           const paddleIframe = document.body.querySelector('iframe');
+          if (paddleIframe) {
             document.body.removeChild(paddleIframe);
+          }
           paddleButton.status = 'pending';
           paddleButton.text = 'Processing...';
-            await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
+          await state.accountState.dispatchAction(state.updatePaddleCheckoutId, dataArg.data.transaction_id);
           paddleButton.status = 'success';
           paddleButton.text = 'Paddle connected!'
         }
       },
     });
     globalThis.Paddle.Checkout.open({
-        product: 561076,
+      items: [{ priceId: paddlePriceId, quantity: 1 }],
-        email: 'phil@kunz.io',
+      customer: { email: userEmail },
-      });
-    };
-    paddleButton.addEventListener('clicked', async () => {
-      openPaddle();
     });
   }
 }

ts_web/elements/account/views/subscriptions.ts

@@ -8,7 +8,7 @@ import {
   css,
 } from '@design.estate/dees-element';
 
-import sharedStyles from '../sharedstyles.js';
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
 
 import * as state from '../../../states/accountstate.js';
 
@@ -24,7 +24,7 @@ export class SubscriptionView extends DeesElement {
   @property({
     type: Array,
   })
-  subscriptions: any[] = [{
+  accessor subscriptions: any[] = [{
     organization: 'org1',
     'subscription type': 'workspace.global SaaS',
     price: '4€',
@@ -46,48 +46,110 @@ export class SubscriptionView extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
-    sharedStyles,
+    accountDesignTokens,
+    cardStyles,
+    typographyStyles,
     css`
       :host {
         display: block;
+        padding: 48px;
         max-width: 900px;
-        margin: auto;
+        margin: 0 auto;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+
+      .section {
+        margin-bottom: 48px;
+      }
+
+      .card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 24px;
+        margin-top: 16px;
+      }
+
+      h3 {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 24px 0 8px 0;
+      }
+
+      dees-table {
+        margin-top: 16px;
+      }
+
+      dees-button {
+        margin-top: 16px;
       }
     `
   ]
 
   public render() {
     return html`
-      <h1>-> Billing & Subscription</h1>
+      <h1>Billing & Subscription</h1>
-      This page allows you to setup how you are billed for any workspace.global charges.
+      <p>Manage your billing settings and subscriptions for your organization.</p>
-      <h2>PaymentMethod</h2>
+
+      <div class="section">
+        <h2>Payment Method</h2>
+        <div class="card">
           <p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
           and we will bill any occurring charges as an extra on the monthly date of your choosing.
           Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
+
           <h3>Paddle</h3>
           <dees-button @click=${async () => {
-        await this.domtoolsPromise;
+            // Extract org slug from current URL: /account/org/{orgSlug}/billing
-        this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
+            const pathParts = window.location.pathname.split('/');
-      }}>set up paddle.com</dees-button>
+            const orgSlug = pathParts[3];
-      <h3>Enterprise billing</h3>
+            // Use parent's subrouter for proper navigation within account section
-      Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here. Note: You are currently not eligible.
+            const parentElement = (this.getRootNode() as any).host;
+            parentElement.subrouter.pushUrl(`/org/${orgSlug}/paddlesetup`);
+          }}>Set up Paddle.com</dees-button>
+
+          <h3>Enterprise Billing</h3>
+          <p>Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.</p>
+          <p><em>Note: You are currently not eligible.</em></p>
+        </div>
+      </div>
+
+      <div class="section">
         <h2>Subscriptions</h2>
+        <div class="card">
           <p>
             The total price of a subscription already includes all taxes. If you are a VAT registered business,
             the actual price might be cheaper in case you can claim VAT exemption from the purchase.
           </p>
           <p>
-        Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
+            <em>Note: Subscriptions are tied to organizations. Select the respective organization from the sidebar to view its subscriptions.</em>
-        To see other organization, select the respective organization at the top left of this page.
           </p>
-      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+          <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
-      <dees-button>Add subscription</dees-button>
+          <dees-button>Add Subscription</dees-button>
+        </div>
+      </div>
+
+      <div class="section">
         <h2>Accrued IaaS Usage</h2>
-      <p>Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.</p>
+        <div class="card">
-      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+          <p>The accrued IaaS Usage will be charged by adjusting the workspace.global IaaS Postpaid Access price prior to the renewal date.</p>
+          <dees-table .heading1=${'Usage'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
+        </div>
+      </div>
+
+      <div class="section">
         <h2>Upcoming Billable Items</h2>
+        <div class="card">
+          <p>No upcoming billable items.</p>
+        </div>
+      </div>
+
+      <div class="section">
         <h2>Past Invoices</h2>
+        <div class="card">
+          <p>No past invoices available.</p>
+        </div>
+      </div>
     `;
   }
 }

ts_web/elements/account/views/usersview.ts

@@ -0,0 +1,941 @@
+import * as plugins from '../../../plugins.js';
+import {
+  customElement,
+  DeesElement,
+  html,
+  cssManager,
+  css,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
+import * as accountState from '../../../states/accountstate.js';
+import { IdpState } from '../../../states/idp.state.js';
+import { BulkInviteModal } from '../bulk-invite-modal.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lele-accountview-users': UsersView;
+  }
+}
+
+interface IMemberDisplay {
+  userId: string;
+  name: string;
+  email: string;
+  roles: string[];
+  isOwner: boolean;
+}
+
+interface IInvitationDisplay {
+  id: string;
+  email: string;
+  roles: string[];
+  invitedAt: number;
+  expiresAt: number;
+}
+
+@customElement('lele-accountview-users')
+export class UsersView extends DeesElement {
+  @state()
+  accessor members: IMemberDisplay[] = [];
+
+  @state()
+  accessor invitations: IInvitationDisplay[] = [];
+
+  @state()
+  accessor loading: boolean = true;
+
+  @state()
+  accessor activeTab: 'members' | 'pending' | 'invite' = 'members';
+
+  @state()
+  accessor organizationId: string = '';
+
+  @state()
+  accessor organizationName: string = '';
+
+  @state()
+  accessor inviteEmail: string = '';
+
+  @state()
+  accessor inviteRoles: string[] = ['viewer'];
+
+  @state()
+  accessor isAdmin: boolean = false;
+
+  @state()
+  accessor isOwner: boolean = false;
+
+  @state()
+  accessor currentUserId: string = '';
+
+  @state()
+  accessor submitting: boolean = false;
+
+  @state()
+  accessor actionMessage: { type: 'success' | 'error'; text: string } | null = null;
+
+  private static readonly AVAILABLE_ROLES = ['owner', 'admin', 'editor', 'viewer', 'guest'];
+
+  private emailInputSubscribed: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    accountDesignTokens,
+    cardStyles,
+    typographyStyles,
+    css`
+      :host {
+        display: block;
+        padding: 48px;
+        max-width: 1000px;
+        margin: 0 auto;
+      }
+
+      .tabs {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 32px;
+        border-bottom: 1px solid var(--border);
+        padding-bottom: 8px;
+      }
+
+      .tab {
+        padding: 10px 20px;
+        border-radius: 8px 8px 0 0;
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--muted-foreground);
+        cursor: pointer;
+        transition: all 0.15s ease;
+        border: none;
+        background: transparent;
+      }
+
+      .tab:hover {
+        color: var(--foreground);
+        background: var(--muted);
+      }
+
+      .tab.active {
+        color: var(--foreground);
+        background: var(--muted);
+      }
+
+      .member-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .member-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 16px 20px;
+        transition: all 0.15s ease;
+      }
+
+      .member-card:hover {
+        border-color: var(--muted-foreground);
+      }
+
+      .member-info {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .member-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: var(--muted);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--foreground);
+      }
+
+      .member-details {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .member-name {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--foreground);
+      }
+
+      .member-email {
+        font-size: 13px;
+        color: var(--muted-foreground);
+      }
+
+      .member-roles {
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+
+      .role-badge {
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .role-badge.owner {
+        background: rgba(234, 179, 8, 0.2);
+        color: #eab308;
+      }
+
+      .role-badge.admin {
+        background: rgba(59, 130, 246, 0.2);
+        color: #3b82f6;
+      }
+
+      .role-badge.editor {
+        background: rgba(34, 197, 94, 0.2);
+        color: #22c55e;
+      }
+
+      .role-badge.viewer {
+        background: rgba(148, 163, 184, 0.2);
+        color: #94a3b8;
+      }
+
+      .role-badge.guest {
+        background: rgba(168, 162, 158, 0.2);
+        color: #a8a29e;
+      }
+
+      .member-actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .action-button {
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        border: 1px solid var(--border);
+        background: transparent;
+        color: var(--muted-foreground);
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .action-button:hover {
+        border-color: var(--foreground);
+        color: var(--foreground);
+      }
+
+      .action-button.danger:hover {
+        border-color: #ef4444;
+        color: #ef4444;
+      }
+
+      .action-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .invitation-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 16px 20px;
+      }
+
+      .invitation-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .invitation-email {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--foreground);
+      }
+
+      .invitation-meta {
+        font-size: 12px;
+        color: var(--muted-foreground);
+      }
+
+      .invite-form {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 24px;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      .form-label {
+        display: block;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--foreground);
+        margin-bottom: 8px;
+      }
+
+      .role-selector {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .role-option {
+        padding: 8px 16px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        border: 1px solid var(--border);
+        background: transparent;
+        color: var(--muted-foreground);
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .role-option:hover {
+        border-color: var(--foreground);
+        color: var(--foreground);
+      }
+
+      .role-option.selected {
+        border-color: #3b82f6;
+        background: rgba(59, 130, 246, 0.1);
+        color: #3b82f6;
+      }
+
+      .message {
+        padding: 12px 16px;
+        border-radius: 8px;
+        font-size: 13px;
+        margin-bottom: 20px;
+      }
+
+      .message.success {
+        background: rgba(34, 197, 94, 0.1);
+        color: #22c55e;
+        border: 1px solid rgba(34, 197, 94, 0.3);
+      }
+
+      .message.error {
+        background: rgba(239, 68, 68, 0.1);
+        color: #ef4444;
+        border: 1px solid rgba(239, 68, 68, 0.3);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 48px;
+        color: var(--muted-foreground);
+      }
+
+      .empty-state dees-icon {
+        font-size: 48px;
+        opacity: 0.5;
+        margin-bottom: 16px;
+      }
+
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: var(--muted-foreground);
+      }
+
+      .you-badge {
+        font-size: 10px;
+        padding: 2px 6px;
+        background: rgba(59, 130, 246, 0.2);
+        color: #3b82f6;
+        border-radius: 4px;
+        margin-left: 8px;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <h1>Users</h1>
+      <p>Manage members and invitations for ${this.organizationName || 'your organization'}.</p>
+
+      ${this.actionMessage ? html`
+        <div class="message ${this.actionMessage.type}">${this.actionMessage.text}</div>
+      ` : ''}
+
+      <div class="tabs">
+        <button
+          class="tab ${this.activeTab === 'members' ? 'active' : ''}"
+          @click=${() => this.activeTab = 'members'}
+        >
+          Members (${this.members.length})
+        </button>
+        <button
+          class="tab ${this.activeTab === 'pending' ? 'active' : ''}"
+          @click=${() => this.activeTab = 'pending'}
+        >
+          Pending (${this.invitations.length})
+        </button>
+        ${this.isAdmin ? html`
+          <button
+            class="tab ${this.activeTab === 'invite' ? 'active' : ''}"
+            @click=${() => this.activeTab = 'invite'}
+          >
+            Invite
+          </button>
+        ` : ''}
+      </div>
+
+      ${this.renderTabContent()}
+    `;
+  }
+
+  private renderTabContent() {
+    if (this.loading) {
+      return html`
+        <div class="loading">
+          <span>Loading users...</span>
+        </div>
+      `;
+    }
+
+    switch (this.activeTab) {
+      case 'members':
+        return this.renderMembers();
+      case 'pending':
+        return this.renderPendingInvitations();
+      case 'invite':
+        return this.renderInviteForm();
+    }
+  }
+
+  private renderMembers() {
+    if (this.members.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:users'}></dees-icon>
+          <h2>No Members</h2>
+          <p>This organization has no members yet.</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="member-list">
+        ${this.members.map(member => html`
+          <div class="member-card">
+            <div class="member-info">
+              <div class="member-avatar">
+                ${member.name.charAt(0).toUpperCase()}
+              </div>
+              <div class="member-details">
+                <span class="member-name">
+                  ${member.name}
+                  ${member.userId === this.currentUserId ? html`<span class="you-badge">You</span>` : ''}
+                </span>
+                <span class="member-email">${member.email}</span>
+              </div>
+            </div>
+            <div class="member-roles">
+              ${member.roles.map(role => html`
+                <span class="role-badge ${role}">${role}</span>
+              `)}
+            </div>
+            ${member.userId !== this.currentUserId ? html`
+              <div class="member-actions">
+                ${this.isOwner && !member.isOwner ? html`
+                  <button
+                    class="action-button"
+                    @click=${() => this.handleTransferOwnership(member.userId, member.name)}
+                    ?disabled=${this.submitting}
+                    title="Transfer ownership to this member"
+                  >
+                    Transfer Ownership
+                  </button>
+                ` : ''}
+                ${this.isAdmin ? html`
+                  <button
+                    class="action-button danger"
+                    @click=${() => this.handleRemoveMember(member.userId, member.name)}
+                    ?disabled=${this.submitting || member.isOwner}
+                    title=${member.isOwner ? 'Cannot remove owner' : 'Remove member'}
+                  >
+                    Remove
+                  </button>
+                ` : ''}
+              </div>
+            ` : ''}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderPendingInvitations() {
+    if (this.invitations.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:mail'}></dees-icon>
+          <h2>No Pending Invitations</h2>
+          <p>There are no pending invitations for this organization.</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="member-list">
+        ${this.invitations.map(inv => html`
+          <div class="invitation-card">
+            <div class="invitation-info">
+              <span class="invitation-email">${inv.email}</span>
+              <span class="invitation-meta">
+                Invited ${this.formatDate(inv.invitedAt)} · Expires ${this.formatDate(inv.expiresAt)}
+              </span>
+            </div>
+            <div class="member-roles">
+              ${inv.roles.map(role => html`
+                <span class="role-badge ${role}">${role}</span>
+              `)}
+            </div>
+            ${this.isAdmin ? html`
+              <div class="member-actions">
+                <button
+                  class="action-button"
+                  @click=${() => this.handleResendInvitation(inv.id)}
+                  ?disabled=${this.submitting}
+                >
+                  Resend
+                </button>
+                <button
+                  class="action-button danger"
+                  @click=${() => this.handleCancelInvitation(inv.id, inv.email)}
+                  ?disabled=${this.submitting}
+                >
+                  Cancel
+                </button>
+              </div>
+            ` : ''}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderInviteForm(): TemplateResult {
+    return html`
+      <div class="invite-form">
+        <div class="form-group">
+          <label class="form-label">Email Address</label>
+          <dees-input-text
+            .label=${''}
+            .placeholder=${'Enter email address'}
+            .value=${this.inviteEmail}
+            ?disabled=${this.submitting}
+          ></dees-input-text>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">Role</label>
+          <div class="role-selector">
+            ${UsersView.AVAILABLE_ROLES.filter(r => r !== 'owner').map(role => html`
+              <button
+                class="role-option ${this.inviteRoles.includes(role) ? 'selected' : ''}"
+                @click=${() => this.toggleRole(role)}
+                ?disabled=${this.submitting}
+              >
+                ${role}
+              </button>
+            `)}
+          </div>
+        </div>
+
+        <dees-button
+          .text=${'Send Invitation'}
+          .status=${this.submitting ? 'pending' : 'normal'}
+          @click=${() => this.handleSendInvitation()}
+        ></dees-button>
+
+        <div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border);">
+          <p style="color: var(--muted-foreground); font-size: 13px; margin: 0 0 12px 0;">
+            Need to invite multiple people at once?
+          </p>
+          <dees-button
+            .text=${'Import from CSV'}
+            .type=${'secondary'}
+            @click=${() => this.handleBulkImport()}
+          ></dees-button>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.loadData();
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+
+    // Subscribe to email input when Invite tab is shown
+    if (this.activeTab === 'invite' && !this.emailInputSubscribed) {
+      const emailInput = this.shadowRoot?.querySelector('.invite-form dees-input-text') as any;
+      if (emailInput?.changeSubject) {
+        emailInput.changeSubject.subscribe((element: any) => {
+          this.inviteEmail = element.value;
+        });
+        this.emailInputSubscribed = true;
+      }
+    }
+  }
+
+  private async loadData() {
+    this.loading = true;
+
+    try {
+      // Get the organization from URL
+      const pathParts = window.location.pathname.split('/');
+      const orgSlug = pathParts[3];
+
+      const currentState = accountState.accountState.getState();
+      const selectedOrg = currentState.organizations.find(org => org.data.slug === orgSlug);
+
+      if (!selectedOrg) {
+        console.error('Organization not found');
+        this.loading = false;
+        return;
+      }
+
+      this.organizationId = selectedOrg.id;
+      this.organizationName = selectedOrg.data.name;
+      this.currentUserId = currentState.user?.id || '';
+
+      // Check if current user is admin/owner
+      const currentUserRole = currentState.roles.find(
+        r => r.data.organizationId === this.organizationId && r.data.userId === this.currentUserId
+      );
+      this.isAdmin = currentUserRole?.data?.roles?.some(r => ['owner', 'admin'].includes(r)) ?? false;
+      this.isOwner = currentUserRole?.data?.roles?.includes('owner') ?? false;
+
+      // Get JWT from IdpState
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      // Fetch members
+      const membersRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetOrgMembers>(
+        'getOrgMembers'
+      );
+
+      const membersResponse = await membersRequest.fire({
+        jwt,
+        organizationId: this.organizationId,
+      });
+
+      this.members = membersResponse.members.map(m => ({
+        userId: m.user.id,
+        name: m.user.data.name || m.user.data.username || 'Unknown',
+        email: m.user.data.email,
+        roles: m.role.data.roles || [],
+        isOwner: m.role.data.roles?.includes('owner') ?? false,
+      }));
+
+      // Fetch invitations if admin
+      if (this.isAdmin) {
+        const invitationsRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetOrgInvitations>(
+          'getOrgInvitations'
+        );
+
+        const invitationsResponse = await invitationsRequest.fire({
+          jwt,
+          organizationId: this.organizationId,
+        });
+
+        this.invitations = invitationsResponse.invitations.map(inv => {
+          const orgRef = inv.data.organizationRefs.find(ref => ref.organizationId === this.organizationId);
+          return {
+            id: inv.id,
+            email: inv.data.email,
+            roles: orgRef?.roles || [],
+            invitedAt: orgRef?.invitedAt || inv.data.createdAt,
+            expiresAt: inv.data.expiresAt,
+          };
+        });
+      }
+
+    } catch (error) {
+      console.error('Error loading users:', error);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private toggleRole(role: string) {
+    if (this.inviteRoles.includes(role)) {
+      this.inviteRoles = this.inviteRoles.filter(r => r !== role);
+    } else {
+      this.inviteRoles = [...this.inviteRoles, role];
+    }
+    // Ensure at least one role is selected
+    if (this.inviteRoles.length === 0) {
+      this.inviteRoles = ['viewer'];
+    }
+  }
+
+  private async handleSendInvitation() {
+    if (!this.inviteEmail.trim()) {
+      this.showMessage('error', 'Please enter an email address.');
+      return;
+    }
+
+    if (this.inviteRoles.length === 0) {
+      this.showMessage('error', 'Please select at least one role.');
+      return;
+    }
+
+    this.submitting = true;
+    this.actionMessage = null;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const request = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_CreateInvitation>(
+        'createInvitation'
+      );
+
+      const response = await request.fire({
+        jwt,
+        organizationId: this.organizationId,
+        email: this.inviteEmail.trim(),
+        roles: this.inviteRoles,
+      });
+
+      if (response.success) {
+        this.showMessage('success', response.message || 'Invitation sent successfully!');
+        this.inviteEmail = '';
+        this.inviteRoles = ['viewer'];
+        await this.loadData();
+        this.activeTab = 'pending';
+      } else {
+        this.showMessage('error', response.message || 'Failed to send invitation.');
+      }
+    } catch (error) {
+      console.error('Error sending invitation:', error);
+      this.showMessage('error', 'Failed to send invitation. Please try again.');
+    } finally {
+      this.submitting = false;
+    }
+  }
+
+  private async handleResendInvitation(invitationId: string) {
+    this.submitting = true;
+    this.actionMessage = null;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const request = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_ResendInvitation>(
+        'resendInvitation'
+      );
+
+      const response = await request.fire({
+        jwt,
+        organizationId: this.organizationId,
+        invitationId,
+      });
+
+      if (response.success) {
+        this.showMessage('success', 'Invitation resent successfully!');
+        await this.loadData();
+      } else {
+        this.showMessage('error', response.message || 'Failed to resend invitation.');
+      }
+    } catch (error) {
+      console.error('Error resending invitation:', error);
+      this.showMessage('error', 'Failed to resend invitation. Please try again.');
+    } finally {
+      this.submitting = false;
+    }
+  }
+
+  private async handleCancelInvitation(invitationId: string, email: string) {
+    if (!confirm(`Cancel invitation for ${email}?`)) {
+      return;
+    }
+
+    this.submitting = true;
+    this.actionMessage = null;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const request = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_CancelInvitation>(
+        'cancelInvitation'
+      );
+
+      const response = await request.fire({
+        jwt,
+        organizationId: this.organizationId,
+        invitationId,
+      });
+
+      if (response.success) {
+        this.showMessage('success', 'Invitation cancelled.');
+        await this.loadData();
+      } else {
+        this.showMessage('error', response.message || 'Failed to cancel invitation.');
+      }
+    } catch (error) {
+      console.error('Error cancelling invitation:', error);
+      this.showMessage('error', 'Failed to cancel invitation. Please try again.');
+    } finally {
+      this.submitting = false;
+    }
+  }
+
+  private async handleRemoveMember(userId: string, name: string) {
+    if (!confirm(`Remove ${name} from this organization?`)) {
+      return;
+    }
+
+    this.submitting = true;
+    this.actionMessage = null;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const request = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_RemoveMember>(
+        'removeMember'
+      );
+
+      const response = await request.fire({
+        jwt,
+        organizationId: this.organizationId,
+        userId,
+      });
+
+      if (response.success) {
+        this.showMessage('success', `${name} has been removed from the organization.`);
+        await this.loadData();
+      } else {
+        this.showMessage('error', response.message || 'Failed to remove member.');
+      }
+    } catch (error) {
+      console.error('Error removing member:', error);
+      this.showMessage('error', 'Failed to remove member. Please try again.');
+    } finally {
+      this.submitting = false;
+    }
+  }
+
+  private async handleTransferOwnership(newOwnerId: string, name: string) {
+    const confirmed = await this.showTransferConfirmation(name);
+    if (!confirmed) return;
+
+    this.submitting = true;
+    this.actionMessage = null;
+
+    try {
+      const idpState = await IdpState.getSingletonInstance();
+      const jwt = await idpState.idpClient.getJwt();
+
+      const request = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_TransferOwnership>(
+        'transferOwnership'
+      );
+
+      const response = await request.fire({
+        jwt,
+        organizationId: this.organizationId,
+        newOwnerId,
+      });
+
+      if (response.success) {
+        this.showMessage('success', `Ownership transferred to ${name}. You are now an admin.`);
+        await this.loadData();
+      } else {
+        this.showMessage('error', response.message || 'Failed to transfer ownership.');
+      }
+    } catch (error) {
+      console.error('Error transferring ownership:', error);
+      this.showMessage('error', 'Failed to transfer ownership. Please try again.');
+    } finally {
+      this.submitting = false;
+    }
+  }
+
+  private async showTransferConfirmation(name: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      plugins.deesCatalog.DeesModal.createAndShow({
+        heading: 'Transfer Ownership',
+        content: html`
+          <div style="padding: 16px 0;">
+            <p style="margin: 0 0 12px 0;">Are you sure you want to transfer ownership to <strong>${name}</strong>?</p>
+            <p style="margin: 0; color: var(--muted-foreground);">
+              You will be demoted to admin role and will no longer be the owner of this organization.
+            </p>
+          </div>
+        `,
+        menuOptions: [
+          { name: 'Cancel', action: async (modal) => { modal.destroy(); resolve(false); } },
+          { name: 'Transfer Ownership', action: async (modal) => { modal.destroy(); resolve(true); } },
+        ],
+        width: 420,
+      });
+    });
+  }
+
+  private async handleBulkImport() {
+    const result = await BulkInviteModal.show({
+      organizationId: this.organizationId,
+      organizationName: this.organizationName,
+    });
+
+    if (result && result.invitedCount > 0) {
+      this.showMessage('success', `${result.invitedCount} invitation(s) sent successfully.`);
+      await this.loadData();
+      this.activeTab = 'pending';
+    }
+  }
+
+  private showMessage(type: 'success' | 'error', text: string) {
+    this.actionMessage = { type, text };
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+      this.actionMessage = null;
+    }, 5000);
+  }
+
+  private formatDate(timestamp: number): string {
+    return new Date(timestamp).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+}

ts_web/elements/idp-centercontainer.ts

@@ -32,89 +32,288 @@ export class IdpCenterContainer extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Sans';
+        --background: hsl(240 10% 3.9%);
+        --foreground: hsl(0 0% 98%);
+        --muted: hsl(240 3.7% 15.9%);
+        --muted-foreground: hsl(240 5% 64.9%);
+        --border: hsl(240 3.7% 15.9%);
+        --card: hsl(240 6% 6%);
+
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
         position: absolute;
         width: 100%;
         height: 100%;
+        background: var(--background);
       }
 
-      .mainContainer {
+      .split-container {
         position: absolute;
-        top: 0px;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
+        display: grid;
+        grid-template-columns: 45% 55%;
+      }
+
+      /* Left Panel - Branding */
+      .brand-panel {
+        background: linear-gradient(135deg, hsl(240 10% 8%) 0%, hsl(240 10% 4%) 50%, hsl(240 12% 6%) 100%);
         display: flex;
+        flex-direction: column;
         justify-content: center;
-        align-items: center;
+        padding: 48px;
-        opacity: 0;
+        position: relative;
-        transition: all 0.2s;
-        transition-delay: 0.05s;
-        transform: translate3d(0px, 8px, 0px);
-        pointer-events: none;
-      }
-
-      .mainContainer.show {
-        opacity: 1;
-        pointer-events: all;
-        transform: translate3d(0px, 0px, 0px);
-      }
-
-      .loginblock {
-        max-width: 500px;
-        flex-grow: 1;
-        transform: translate3d(0px, 0px, 0px);
-        transition: all 0.2s;
-        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-        background: ${cssManager.bdTheme('#ffffff', '#111111')};
-        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
-        border-radius: 16px;
         overflow: hidden;
       }
 
-      h1 {
+      .brand-panel::before {
-        font-size: 24px;
+        content: '';
-        font-family: 'Cal Sans';
+        position: absolute;
-        text-align: center;
+        top: 0;
-        letter-spacing:0.0125em;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(ellipse at 30% 20%, hsla(240 20% 20% / 0.3) 0%, transparent 50%),
+                    radial-gradient(ellipse at 70% 80%, hsla(240 20% 15% / 0.2) 0%, transparent 50%);
+        pointer-events: none;
       }
 
-      .contentSpacer {
+      .brand-content {
-        padding: 0px 0px 16px 0px;
+        position: relative;
+        z-index: 1;
+        max-width: 400px;
       }
 
-      .legalinfo {
+      .logo {
+        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
+        font-size: 42px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 12px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .tagline {
+        font-size: 18px;
+        color: var(--muted-foreground);
+        margin: 0 0 48px 0;
+        line-height: 1.5;
+      }
+
+      .features {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+      }
+
+      .feature {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+      }
+
+      .feature-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        background: hsla(240 10% 20% / 0.5);
+        border: 1px solid hsla(240 10% 30% / 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .feature-icon dees-icon {
+        color: var(--muted-foreground);
+        font-size: 18px;
+      }
+
+      .feature-text h3 {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 4px 0;
+      }
+
+      .feature-text p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+        line-height: 1.4;
+      }
+
+      .learn-more {
+        margin-top: 48px;
+      }
+
+      /* Right Panel - Form */
+      .form-panel {
+        background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 48px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .form-content {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        max-width: 400px;
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 32px;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+        transform: translateY(8px);
+        opacity: 0;
+        transition: all 0.3s ease;
+      }
+
+      .form-content.show {
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      .form-footer {
+        position: absolute;
+        bottom: 24px;
+        left: 0;
+        right: 0;
         text-align: center;
-        margin: auto;
-        color: ${cssManager.bdTheme('#666', '#ccc')};
         font-size: 12px;
-        line-height: 100%;
+        color: var(--muted-foreground);
-        padding: 8px;
-        background: ${cssManager.bdTheme('#f5f5f5', '#111')};
-        border-top: 1px solid ${cssManager.bdTheme('#ccc', '#222222')};
-        color: ${cssManager.bdTheme('#666', '#888')};
       }
 
-      .legalinfo a {
+      .form-footer a {
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+        color: var(--muted-foreground);
         text-decoration: none;
+        transition: color 0.15s ease;
+      }
+
+      .form-footer a:hover {
+        color: var(--foreground);
+      }
+
+      .form-footer .separator {
+        margin: 0 8px;
+        opacity: 0.5;
+      }
+
+      .version {
+        margin-top: 8px;
+        font-size: 11px;
+        opacity: 0.6;
+      }
+
+      /* Mobile Responsive */
+      @media (max-width: 900px) {
+        .split-container {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
+        }
+
+        .brand-panel {
+          padding: 32px 24px;
+          min-height: auto;
+        }
+
+        .brand-content {
+          max-width: 100%;
+        }
+
+        .logo {
+          font-size: 32px;
+        }
+
+        .tagline {
+          font-size: 16px;
+          margin-bottom: 24px;
+        }
+
+        .features {
+          display: none;
+        }
+
+        .form-panel {
+          padding: 32px 24px;
+        }
+
+        .form-content {
+          padding: 24px;
+        }
       }
     `,
   ];
 
   render() {
     return html`
-      <div class="mainContainer">
+      <div class="split-container">
-        <div class="loginblock">
+        <!-- Left: Branding Panel -->
-          <h1>idp.global</h1>
+        <div class="brand-panel">
-          <div class="contentSpacer">
+          <div class="brand-content">
+            <h1 class="logo">idp.global</h1>
+            <p class="tagline">Your permanent identity on the web</p>
+
+            <div class="features">
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:code'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Open Source</h3>
+                  <p>Fully transparent, community-driven, no vendor lock-in</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Always Free</h3>
+                  <p>Free for individuals and organizations. Paid support available for SLAs</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Permanent Identity</h3>
+                  <p>One identity across all your applications</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="learn-more">
+              <dees-button
+                type="secondary"
+                @click=${() => window.open('https://about.idp.global', '_blank')}
+              >Learn more</dees-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Form Panel -->
+        <div class="form-panel">
+          <div class="form-content">
             <slot></slot>
           </div>
-          <div class="legalinfo">
+          <footer class="form-footer">
-            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
+            <a href="https://legal.task.vc/" target="_blank">Legal</a>
-            | <a href="https://task.vc/" target="_blank">Company Website</a>
+            <span class="separator">·</span>
-            | <a href="https://support.task.vc/" target="_blank">Support</a>
+            <a href="https://task.vc/" target="_blank">Company</a>
-            | idp.global v${commitinfo.version}
+            <span class="separator">·</span>
-          </div>
+            <a href="https://support.task.vc/" target="_blank">Support</a>
+            <div class="version">v${commitinfo.version}</div>
+          </footer>
         </div>
       </div>
     `;
@@ -125,8 +324,8 @@ export class IdpCenterContainer extends DeesElement {
     const domtoolsInstance = await this.domtoolsPromise;
     const done = plugins.smartpromise.defer();
     requestAnimationFrame(async () => {
-      this.shadowRoot.querySelector('.mainContainer').classList.add('show');
+      this.shadowRoot.querySelector('.form-content').classList.add('show');
-      await domtoolsInstance.convenience.smartdelay.delayFor(250);
+      await domtoolsInstance.convenience.smartdelay.delayFor(350);
       done.resolve();
     });
     return done.promise;
@@ -137,8 +336,8 @@ export class IdpCenterContainer extends DeesElement {
     const domtoolsInstance = await this.domtoolsPromise;
     const done = plugins.smartpromise.defer();
     requestAnimationFrame(async () => {
-      this.shadowRoot.querySelector('.mainContainer').classList.remove('show');
+      this.shadowRoot.querySelector('.form-content').classList.remove('show');
-      await domtoolsInstance.convenience.smartdelay.delayFor(250);
+      await domtoolsInstance.convenience.smartdelay.delayFor(350);
       done.resolve();
     });
     return done.promise;

ts_web/elements/idp-loginprompt.ts

@@ -30,16 +30,16 @@ export class IdpLoginPrompt extends DeesElement {
   public static demo = () => html`<idp-loginprompt></idp-loginprompt>`;
 
   @property()
-  public productOfInterest: string;
+  accessor productOfInterest: string;
 
   @property()
-  jwt: string;
+  accessor jwt: string;
 
   @property({
     reflect: true,
     type: Object,
   })
-  appData: plugins.idpInterfaces.data.IApp;
+  accessor appData: plugins.idpInterfaces.data.IApp;
 
   public jwtObserable = new domtools.plugins.smartrx.rxjs.Subject<string>();
 
@@ -52,17 +52,56 @@ export class IdpLoginPrompt extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Sans';
+        --foreground: hsl(0 0% 98%);
+        --muted-foreground: hsl(240 5% 64.9%);
+
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
         display: block;
-        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        color: var(--foreground);
       }
 
-      .boxcontent {
+      .form-header {
-        margin: 0px 20px;
+        margin-bottom: 32px;
+        text-align: center;
       }
 
-      .registerButton {
+      .form-header h2 {
-        margin-top: 16px;
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 8px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .form-header p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+      }
+
+      dees-form {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .form-footer {
+        margin-top: 24px;
+        text-align: center;
+        font-size: 14px;
+        color: var(--muted-foreground);
+      }
+
+      .form-footer a {
+        color: var(--foreground);
+        text-decoration: none;
+        font-weight: 500;
+        cursor: pointer;
+        transition: opacity 0.15s ease;
+      }
+
+      .form-footer a:hover {
+        opacity: 0.8;
       }
     `,
   ];
@@ -70,7 +109,10 @@ export class IdpLoginPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
+        <div class="form-header">
+          <h2>Sign in to your account</h2>
+          <p>Enter your credentials to continue</p>
+        </div>
         <dees-form
           id="loginForm"
           @formData="${(eventArg) => {
@@ -84,7 +126,7 @@ export class IdpLoginPrompt extends DeesElement {
             id="loginEmailInput"
             .required=${true}
             key="emailAddress"
-              label="Email-Address or Username"
+            label="Email or Username"
           ></dees-input-text>
           <dees-input-text
             .id=${'loginPasswordInput'}
@@ -94,10 +136,11 @@ export class IdpLoginPrompt extends DeesElement {
           ></dees-input-text>
           <dees-form-submit id="loginSubmitButton"></dees-form-submit>
         </dees-form>
-          <dees-button type="discreet" class="registerButton" @clicked=${async () => {
+        <div class="form-footer">
+          Don't have an account? <a @click=${async () => {
             const idpState = await IdpState.getSingletonInstance();
             idpState.domtools.router.pushUrl('/register');
-          }}>Register instead</dees-button>
+          }}>Create one</a>
         </div>
       </idp-centercontainer>
     `;
@@ -124,20 +167,18 @@ export class IdpLoginPrompt extends DeesElement {
   }
 
   private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
-    // lets disable the register button
+    // lets disable the submit button
-    const registerButton: plugins.deesCatalog.DeesButton = this.shadowRoot.querySelector('.registerButton');
+    const loginSubmitButton: plugins.deesCatalog.DeesFormSubmit = this.shadowRoot.querySelector('#loginSubmitButton');
-    registerButton.disabled = true;
+    loginSubmitButton.disabled = true;
     // lets define the needed requests
     const idpState = await IdpState.getSingletonInstance();
     const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
     const loginRequestWithUsernameAndPassword =
-      new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
+      idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
-        '/typedrequest',
         'loginWithEmailOrUsernameAndPassword'
       );
     const loginRequestWithEmail =
-      new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
+      idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
-        '/typedrequest',
         'loginWithEmail'
       );
 

ts_web/elements/idp-registerprompt.ts

@@ -30,16 +30,16 @@ export class IdpRegistrationPrompt extends DeesElement {
   public static demo = () => html`<idp-login></idp-login>`;
 
   @property()
-  public productOfInterest: string;
+  accessor productOfInterest: string;
 
   @property()
-  jwt: string;
+  accessor jwt: string;
 
   @property({
     reflect: true,
     type: Object,
   })
-  appData: plugins.idpInterfaces.data.IApp;
+  accessor appData: plugins.idpInterfaces.data.IApp;
 
   public jwtObserable = new domtools.plugins.smartrx.rxjs.Subject<string>();
 
@@ -52,29 +52,56 @@ export class IdpRegistrationPrompt extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Sans';
+        --foreground: hsl(0 0% 98%);
+        --muted-foreground: hsl(240 5% 64.9%);
+
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
         display: block;
-        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        color: var(--foreground);
       }
 
-      .boxcontent {
+      .form-header {
-        margin: 0px 20px;
+        margin-bottom: 32px;
+        text-align: center;
       }
 
-      .registerButton {
+      .form-header h2 {
-        display: block;
+        font-size: 24px;
-        transition: all 0.2s ease;
+        font-weight: 600;
-        will-change: transform;
+        color: var(--foreground);
+        margin: 0 0 8px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .form-header p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+      }
+
+      dees-form {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .form-footer {
+        margin-top: 24px;
+        text-align: center;
+        font-size: 14px;
+        color: var(--muted-foreground);
+      }
+
+      .form-footer a {
+        color: var(--foreground);
+        text-decoration: none;
+        font-weight: 500;
         cursor: pointer;
+        transition: opacity 0.15s ease;
       }
 
-      .registerButton:hover {
+      .form-footer a:hover {
-        color: #fff;
+        opacity: 0.8;
-        transform: scale(1.02);
-      }
-
-      .loginButton {
-        margin-top: 16px;
       }
     `,
   ];
@@ -82,7 +109,10 @@ export class IdpRegistrationPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
+        <div class="form-header">
+          <h2>Create your account</h2>
+          <p>Get started with your permanent identity</p>
+        </div>
         <dees-form
           id="registrationForm"
           @formData="${(eventArg) => {
@@ -94,17 +124,19 @@ export class IdpRegistrationPrompt extends DeesElement {
           <dees-input-text
             .required=${true}
             key="emailAddress"
-              label="Email-Address"
+            label="Email Address"
           ></dees-input-text>
           <dees-input-checkbox
-              .label="${'Agree to the Terms and Conditions'}"
+            .label="${'I agree to the Terms and Conditions'}"
+            .required=${true}
           ></dees-input-checkbox>
           <dees-form-submit>Send Verification Email</dees-form-submit>
         </dees-form>
-          <dees-button type="discreet" class="loginButton" @click=${async () => {
+        <div class="form-footer">
+          Already have an account? <a @click=${async () => {
             const idpState = await IdpState.getSingletonInstance();
             idpState.domtools.router.pushUrl('/login');
-          }}>Login instead</dees-button>
+          }}>Sign in</a>
         </div>
       </idp-centercontainer>
     `;
@@ -138,9 +170,9 @@ export class IdpRegistrationPrompt extends DeesElement {
   private register = async (valueArg: { emailAddress: string }) => {
     const registrationForm: DeesForm = this.shadowRoot.querySelector('#registrationForm');
     registrationForm.setStatus('pending', 'registering...');
+    const idpState = await IdpState.getSingletonInstance();
     const firstSignupRequest =
-      new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_FirstRegistration>(
+      idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_FirstRegistration>(
-        '/typedrequest',
         'firstRegistrationRequest'
       );
     const response = await firstSignupRequest
@@ -177,8 +209,8 @@ export class IdpRegistrationPrompt extends DeesElement {
   public async handleRefreshToken(refreshTokenArg: string, delayDispatchMillisArg = 0) {
     // a refreshToken binds directly to a session.
     // the refresh token is used on a continuous basis to get fresh and short-lived jwts
-    const refreshJwt = new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
+    const idpState = await IdpState.getSingletonInstance();
-      '/typedrequest',
+    const refreshJwt = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
       'refreshJwt'
     );
     const responseJwt = await refreshJwt.fire({

ts_web/elements/idp-registration-stepper.ts

@@ -15,10 +15,10 @@ import {
 @customElement('idp-registration-stepper')
 export class IdpRegistrationStepper extends DeesElement {
   @state()
-  private usedSubTemplate: TemplateResult;
+  accessor usedSubTemplate: TemplateResult;
 
   @state()
-  private storedData = {
+  accessor storedData = {
     validationTokenUrlParam: 'string',
     email: '',
     refreshToken: '',
@@ -34,31 +34,251 @@ export class IdpRegistrationStepper extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        display: block;
+        --background: hsl(240 10% 3.9%);
-        height: 100px;
+        --foreground: hsl(0 0% 98%);
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        --muted: hsl(240 3.7% 15.9%);
+        --muted-foreground: hsl(240 5% 64.9%);
+        --border: hsl(240 3.7% 15.9%);
+
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: var(--background);
+        color: var(--foreground);
       }
 
-      .main {
+      .split-container {
         position: absolute;
-        top: 0px;
+        top: 0;
-        right: 0px;
+        left: 0;
-        left: 0px;
+        width: 100%;
-        bottom: 0px;
+        height: 100%;
+        display: grid;
+        grid-template-columns: 45% 55%;
+      }
+
+      /* Left Panel - Branding */
+      .brand-panel {
+        background: linear-gradient(135deg, hsl(240 10% 8%) 0%, hsl(240 10% 4%) 50%, hsl(240 12% 6%) 100%);
         display: flex;
+        flex-direction: column;
         justify-content: center;
+        padding: 48px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .brand-panel::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(ellipse at 30% 20%, hsla(240 20% 20% / 0.3) 0%, transparent 50%),
+                    radial-gradient(ellipse at 70% 80%, hsla(240 20% 15% / 0.2) 0%, transparent 50%);
+        pointer-events: none;
+      }
+
+      .brand-content {
+        position: relative;
+        z-index: 1;
+        max-width: 400px;
+      }
+
+      .logo {
+        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
+        font-size: 42px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 12px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .tagline {
+        font-size: 18px;
+        color: var(--muted-foreground);
+        margin: 0 0 48px 0;
+        line-height: 1.5;
+      }
+
+      .features {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+      }
+
+      .feature {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+      }
+
+      .feature-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        background: hsla(240 10% 20% / 0.5);
+        border: 1px solid hsla(240 10% 30% / 0.3);
+        display: flex;
         align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .feature-icon dees-icon {
+        color: var(--muted-foreground);
+        font-size: 18px;
+      }
+
+      .feature-text h3 {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 4px 0;
+      }
+
+      .feature-text p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+        line-height: 1.4;
+      }
+
+      .learn-more {
+        margin-top: 48px;
+      }
+
+      /* Right Panel - Stepper */
+      .stepper-panel {
+        background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .stepper-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow-y: auto;
+      }
+
+      .error-message {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        text-align: center;
+        color: var(--muted-foreground);
+        font-size: 14px;
+        line-height: 1.6;
+      }
+
+      .spinner-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      dees-stepper {
+        --dees-stepper-background: transparent;
+        height: 100%;
+      }
+
+      /* Mobile Responsive */
+      @media (max-width: 900px) {
+        .split-container {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
+        }
+
+        .brand-panel {
+          padding: 32px 24px;
+          min-height: auto;
+        }
+
+        .brand-content {
+          max-width: 100%;
+        }
+
+        .logo {
+          font-size: 32px;
+        }
+
+        .tagline {
+          font-size: 16px;
+          margin-bottom: 24px;
+        }
+
+        .features {
+          display: none;
+        }
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style></style>
+      <div class="split-container">
-      <div class="main">
+        <!-- Left: Branding Panel -->
+        <div class="brand-panel">
+          <div class="brand-content">
+            <h1 class="logo">idp.global</h1>
+            <p class="tagline">Your permanent identity on the web</p>
+
+            <div class="features">
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:code'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Open Source</h3>
+                  <p>Fully transparent, community-driven, no vendor lock-in</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Always Free</h3>
+                  <p>Free for individuals and organizations. Paid support available for SLAs</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Permanent Identity</h3>
+                  <p>One identity across all your applications</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="learn-more">
+              <dees-button
+                type="secondary"
+                @click=${() => window.open('https://about.idp.global', '_blank')}
+              >Learn more</dees-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Stepper Panel -->
+        <div class="stepper-panel">
+          <div class="stepper-content">
             ${this.usedSubTemplate
               ? this.usedSubTemplate
-          : html`<dees-spinner size="60"></dees-spinner>`}
+              : html`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
+          </div>
+        </div>
       </div>
     `;
   }
@@ -71,8 +291,10 @@ export class IdpRegistrationStepper extends DeesElement {
     console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
     if (!this.storedData.validationTokenUrlParam) {
       this.usedSubTemplate = html`
-        You need a validation token, but we couldn't find one. Please contact workspace.global
+        <div class="error-message">
-        support.
+          You need a validation token, but we couldn't find one.<br/>
+          Please contact support for assistance.
+        </div>
       `;
       await this.domtools.convenience.smartdelay.delayFor(5000);
       window.location.href = '/';
@@ -97,8 +319,10 @@ export class IdpRegistrationStepper extends DeesElement {
 
     if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
       this.usedSubTemplate = html`
-        the supplied validation token does not match any registration sessions.<br />
+        <div class="error-message">
-        ${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
+          The supplied validation token does not match any registration sessions.<br/>
+          ${tokenErrorMessage ? html`<br/>Reason: ${tokenErrorMessage}` : null}
+        </div>
       `;
       await this.domtools.convenience.smartdelay.delayFor(5000);
       idpState.domtools.router.pushUrl('/');
@@ -125,10 +349,10 @@ export class IdpRegistrationStepper extends DeesElement {
               <dees-form-submit>Next</dees-form-submit>
             </dees-form>
           `,
-          validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
             const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
             deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-              const response = await idpState.idpClient.requests.setData
+              await idpState.idpClient.requests.setData
                 .fire({
                   token: this.storedData.validationTokenUrlParam,
                   userData: {
@@ -148,7 +372,7 @@ export class IdpRegistrationStepper extends DeesElement {
                 );
               deesForm.setStatus('success', 'ok!');
               stepperArg.goNext();
-            });
+            }, { signal });
           },
           onReturnToStepFunc: async (stepperArg, stepElementArg) => {
             const deesForm = stepElementArg.querySelector('dees-form');
@@ -167,10 +391,10 @@ export class IdpRegistrationStepper extends DeesElement {
               <dees-form-submit>Next</dees-form-submit>
             </dees-form>
           `,
-          validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
             const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
             deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-              const response = await idpState.idpClient.requests.mobileNumberVerification
+              await idpState.idpClient.requests.mobileNumberVerification
                 .fire({
                   token: this.storedData.validationTokenUrlParam,
                   mobileNumber: eventArg.detail.data.mobileNumber,
@@ -184,7 +408,7 @@ export class IdpRegistrationStepper extends DeesElement {
                 );
               deesForm.setStatus('success', 'ok!');
               stepperArg.goNext();
-            });
+            }, { signal });
           },
           onReturnToStepFunc: async (stepperArg, stepElementArg) => {
             const deesForm = stepElementArg.querySelector('dees-form');
@@ -203,7 +427,7 @@ export class IdpRegistrationStepper extends DeesElement {
               <dees-form-submit>Next</dees-form-submit>
             </dees-form>
           `,
-          validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
             const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
             deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
               const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
@@ -219,7 +443,7 @@ export class IdpRegistrationStepper extends DeesElement {
                 await this.domtools.convenience.smartdelay.delayFor(3000);
                 deesForm.setStatus('normal', 'Retry And Next!');
               }
-            });
+            }, { signal });
           },
           onReturnToStepFunc: async (stepperArg, stepElementArg) => {
             stepperArg.goBack();
@@ -239,10 +463,10 @@ export class IdpRegistrationStepper extends DeesElement {
               <dees-form-submit>Next</dees-form-submit>
             </dees-form>
           `,
-          validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
             const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
             deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-              const response = await idpState.idpClient.requests.setData.fire({
+              await idpState.idpClient.requests.setData.fire({
                 token: this.storedData.validationTokenUrlParam,
                 userData: {
                   username: null,
@@ -253,7 +477,6 @@ export class IdpRegistrationStepper extends DeesElement {
                   password: eventArg.detail.data.password,
                 },
               });
-              const finishRegistrationResponse =
               await idpState.idpClient.requests.finishRegistration.fire({
                 token: this.storedData.validationTokenUrlParam,
               });
@@ -275,11 +498,19 @@ export class IdpRegistrationStepper extends DeesElement {
               deesForm.setStatus('success', 'Ok! Lets Go!');
               await idpState.idpClient.setJwt(jwtResponse.jwt);
               idpState.domtools.router.pushUrl('/account');
-            });
+            }, { signal });
           },
         },
       ] as plugins.deesCatalog.IStep[]}
     ></dees-stepper>`;
     await this.domtools.convenience.smartdelay.delayFor(100);
   }
+
+  public async show() {
+    await this.updateComplete;
+  }
+
+  public async hide() {
+    await this.updateComplete;
+  }
 }

ts_web/elements/idp-transfermanager.ts

@@ -21,7 +21,7 @@ declare global {
 @customElement('idp-transfermanager')
 export class IdpTransfermanager extends DeesElement {
 
-  public appData: plugins.idpInterfaces.data.IApp;
+  public appData: plugins.idpInterfaces.data.IAppLegacy;
 
   public static styles = [
     cssManager.defaultStyles,

ts_web/elements/idp-welcome.ts

@@ -9,9 +9,10 @@ import {
   cssManager,
   unsafeCSS,
   css,
-  resolveExec,
   type TemplateResult,
+  directives
 } from '@design.estate/dees-element';
+
 import type { IdpViewcontainer } from '../views/viewcontainer.js';
 import { IdpState } from '../states/idp.state.js';
 
@@ -27,86 +28,125 @@ export class IdpWelcome extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
+        --foreground: hsl(0 0% 98%);
+        --muted-foreground: hsl(240 5% 64.9%);
+
         display: block;
-        color: #fff;
+        color: var(--foreground);
-        font-family: 'Geist Sans';
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
       }
+
       :host([hidden]) {
         display: none;
       }
 
-      .maincontainer {
+      .form-header {
-        padding: 0px 16px;
+        margin-bottom: 32px;
+        text-align: center;
+      }
+
+      .form-header h2 {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 8px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .form-header p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+      }
+
+      .button-group {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .secondary-actions {
+        margin-top: 24px;
+        padding-top: 24px;
+        border-top: 1px solid hsla(240 3.7% 15.9% / 0.5);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
       }
 
       .greeting {
+        font-size: 14px;
+        color: var(--muted-foreground);
         text-align: center;
-        font-size: 16px;
+        margin-bottom: 8px;
-        font-weight: 600;
-        margin: 24px auto;
       }
 
-      dees-button {
+      .greeting strong {
-        margin-top: 16px;
+        color: var(--foreground);
-        margin-bottom: 16px;
+        font-weight: 600;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style></style>
       <idp-centercontainer>
-        <div class="maincontainer">
+        ${directives.resolveExec(async () => {
-        ${resolveExec(async () => {
           const idpState = await IdpState.getSingletonInstance();
           await idpState.idpClient.determineLoginStatus();
           const data = await idpState.idpClient.whoIs().catch();
           if (data?.user) {
             return html`
-              <div class="greeting">Hello ${data.user.data.name}!</div>
+              <div class="form-header">
+                <h2>Welcome back</h2>
+                <p class="greeting">Signed in as <strong>${data.user.data.name}</strong></p>
+              </div>
+              <div class="button-group">
                 <dees-button
                   @click=${async () => {
                     const idpState = await IdpState.getSingletonInstance();
                     idpState.domtools.router.pushUrl('/account');
                   }}
-                >Manage your account</dees-button
+                >Manage your account</dees-button>
-              >
                 <dees-button
+                  type="secondary"
                   @click=${async () => {
                     const idpState = await IdpState.getSingletonInstance();
                     idpState.domtools.router.pushUrl('/logout');
                   }}
-                >Logout</dees-button
+                >Sign out</dees-button>
-              >
+              </div>
             `;
           }
           return html`
-            Do you want to sign in or register?
+            <div class="form-header">
+              <h2>Welcome</h2>
+              <p>Sign in to your account or create a new one</p>
+            </div>
+            <div class="button-group">
               <dees-button
                 @click=${async () => {
                   const idpState = await IdpState.getSingletonInstance();
                   idpState.domtools.router.pushUrl('/login');
                 }}
-              >Sign In</dees-button
+              >Sign In</dees-button>
-            >
               <dees-button
+                type="secondary"
                 @click=${async () => {
                   const idpState = await IdpState.getSingletonInstance();
                   idpState.domtools.router.pushUrl('/register');
                 }}
-              >Register</dees-button
+              >Create Account</dees-button>
-            >
+            </div>
           `;
         })}
-        <dees-button @click=${() => {}}>Learn more about idp.global</dees-button>
+        <div class="secondary-actions">
-        <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
           <dees-button
+            type="discreet"
             @click=${() => {
               window.open('https://code.foss.global/idp.global/idp.global', '_blank');
             }}
-          >Get the Source Code</dees-button
+          >View Source Code</dees-button>
-        >
         </div>
       </idp-centercontainer>
     `;