# Demo UI Component Architecture

This demo now uses composable, named UI sections so the auth and org experience can evolve into a reusable UI layer.

## Auth flow composition

`AuthCard` is now orchestration-only and delegates to dedicated components:

- `AuthEnvironmentControls`: target/environment + trusted-origin controls
- `AuthSubmitForm`: sign-in/sign-up/forgot-password form controls
- `AuthFeedbackStack`: runtime fallback notices + submit/resend feedback
- `AuthResultPanels`: target/session-like response summaries + raw payloads
- `AuthNavigationLinks`: route navigation links for auth/test flows

The card keeps state and request handling; sections only render UI.

## Runtime fallback behavior

Runtime fallback is triggered when the browser reports:

- `Cannot read properties of undefined`
- and the failing read is `includes`

When detected, UI retries with direct auth endpoints using `callAuthEndpoint(...)`:

- Submit flow: `/sign-in/email`, `/sign-up/email`, `/forget-password`
- Resend flow: `/send-verification-email`

This keeps the UI functional even when extension/runtime interference breaks SDK internals.

## Session-aware organization context

`SessionOrganizationSwitcher` is reusable and mounted in both:

- `SessionPanel`
- `OrganizationLab`

It reads organization options from `/organization/list` and writes active org to `/organization/set-active`.
After set-active succeeds, it asks parent views to refresh session data so organization-dependent UI can branch on current session state.

## No manual refresh controls

Session/org/email views now refresh passively using:

- interval refresh (30 seconds)
- visibility refresh (when tab gains focus)

This avoids explicit refresh buttons while keeping state current.

## Preflight + RBAC debug

`OrganizationLab` now exposes a preflight debugger that computes:

- selected organization
- active organization in session
- current user membership role
- action guard status for invite/member management

Actions that are expected to fail are disabled before request-time, with guard reason text shown in UI.

## API key management surface

`OrganizationLab` now includes an API key panel against existing auth routes:

- `GET /api-key/list`
- `POST /api-key/create`
- `POST /api-key/delete`

New raw key output is surfaced on create for immediate copy.

## Email template customization

Template customization UI is not implemented yet in this pass.
Recommended next step: add a dedicated Email Templates section backed by server-side template CRUD and preview/send-test actions.

## Reuse contract

To treat these as library components:

1. Keep network side effects in page/container components.
2. Keep section components presentational and prop-driven.
3. Reuse `SessionOrganizationSwitcher` wherever org-aware session context should be visible/editable.
4. Preserve stable prop names so pages can be swapped without changing component internals.
