@checkstack/auth-frontend 0.6.7 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,127 @@
 # @checkstack/auth-frontend
 
+## 0.7.1
+
+### Patch Changes
+
+- Updated dependencies [13373ce]
+  - @checkstack/common@0.14.0
+  - @checkstack/auth-common@0.8.1
+  - @checkstack/frontend-api@0.7.1
+  - @checkstack/ui@1.13.1
+
+## 0.7.0
+
+### Minor Changes
+
+- 9dcc848: Add the AI platform: a transport-agnostic tool spine, an OAuth Authorization Server + read-only MCP server, a propose/apply flow with audit log, a streaming in-app chat agent, per-conversation permission modes, per-integration spend caps, and user-scoped tool authorization.
+
+  Two new packages, `@checkstack/ai-common` (the `AiTool` contract, `read`/`mutate`/`destructive` effect classification, the `ai.*` access rules, the OpenAI-compatible connection shape, and the wire contracts) and `@checkstack/ai-backend` (the tool registry, extension points, principal-to-tool resolver, shared zod-to-JSON-Schema serializer, and all transports). The OpenAI-compatible integration provider registers through the existing integration provider extension point, so its API key is stored in the Secrets Vault and configured in the generic Connections UI.
+
+  What ships:
+
+  - Tool spine and extension points: `aiToolExtensionPoint.registerTool` (hand-authored composite tools) and `aiToolProjectionExtensionPoint.expose` (opt-in projections of existing oRPC procedures). Authorization mirrors `autoAuthMiddleware` exactly - a tool is surfaced only when every `requiredAccessRules` entry is satisfied, so a scope-narrowed principal can only ever see fewer tools.
+  - OAuth + MCP: Checkstack can act as its own OAuth 2.1 Authorization Server (authorization code + PKCE, consent screen, Dynamic Client Registration) and expose a read-only MCP server over Streamable HTTP at `/api/ai/mcp`. Off by default, enabled by the admin `ai.mcp-oauth` setting. A Bearer OAuth-token branch is added to the auth strategy; token scopes are intersected live with the bound user's access rules on every call. A shared-Postgres rate limiter throttles the DCR endpoint per client IP. `getMcpOAuthSettings` / `setMcpOAuthSettings` contracts added to `@checkstack/auth-common`. A minimal OAuth consent page (`/auth/oauth-consent`) renders the requesting client and scopes.
+  - Propose/apply + audit: a transport-agnostic two-step service - `propose` re-checks authz, runs the tool's `dryRun` without mutating, and returns a single-use proposal token (the `proposed` audit row IS the token store, 10-minute TTL, atomic single-use); `apply` re-parses the server-stored payload, re-checks authz, and atomically commits. The `ai_tool_calls` audit table records every call across both transports with a SHA-256 args hash (never raw arguments) and stamps who proposed and who applied. An `ai.toolCalled` event carries metadata only.
+  - In-app chat: a server-side, provider-agnostic Vercel AI SDK agent loop (OpenAI, Azure, OpenRouter, Ollama, vLLM, LM Studio, ...). The model provider is built on the backend from the integration credentials, so the API key never leaves the backend. The loop offers only resolver-allowed tools, auto-runs read tools (re-entering the live router as the logged-in user) and routes mutating / destructive tools through propose/apply. Durable conversation persistence (`ai_conversations`, `ai_messages`, owner-scoped RPCs) plus a streaming chat UI with a confirm-card component and per-integration model picker.
+  - Per-conversation permission mode (Claude-Code-style approve/auto), a durable `permission_mode` column on `ai_conversations` (default `approve`). `read` always auto-runs in both modes; `mutate` inherits the mode (auto-applies server-side in `auto`, confirm-carded in `approve`); `destructive` ALWAYS requires the human `applyTool` in both modes. Security invariant (structural + tested): the mode is consulted only on the `mutate` branch, so no `(effect, mode)` pair routes a destructive tool to auto-apply.
+  - Per-integration LLM spend cap (optional `spendCap` = `tokenBudget` + `windowMinutes`, default OFF). Spend is tracked in a shared-Postgres `ai_spend` ledger; enforcement is a rolling-window SUM run before each turn (HTTP 429 over budget). Per-principal tool rate-limit budgets are a rolling COUNT over `ai_tool_calls`, enforced on both transports. An absent / empty / incomplete `spendCap` is treated as "no cap" rather than rejected.
+  - Full tool-call replay: `ai_messages.model_messages` (jsonb) persists the canonical AI-SDK `ResponseMessage[]` per turn and replays them verbatim on the next turn; legacy rows fall back to text-only replay.
+  - Enforced no-secret-leak scrubbing: `appendMessage` runs `scrubContent` on every write, redacting credential-shaped keys and high-confidence credential values; a canary regression test asserts injected secrets are stripped. A hardening test suite asserts no secret appears in any AI-surface DTO and that handler-side authz holds when the model misbehaves.
+  - Provider correctness: the chat provider uses `@ai-sdk/openai-compatible`'s `chatModel` (plain `/chat/completions`), so OpenAI-compatible gateways (OpenRouter, DeepSeek, Ollama, vLLM) no longer reject turns with `invalid_prompt`; `@ai-sdk/openai` is removed.
+
+  BREAKING CHANGES:
+
+  - The `AiTool` contract (`@checkstack/ai-common`) gained a `TRpc` type parameter, and both `dryRun` and `execute` now receive a USER-SCOPED `rpcClient` arg bound to the originating user. Every plugin procedure a tool calls re-enters the live router AS THAT USER, so handler-side authorization (access rules AND per-resource/team scope) is enforced exactly as a direct UI/RPC call - closing a prior privilege-escalation where tools captured a trusted service client at construction. A hand-authored tool MUST resolve its plugin client from this per-call arg and MUST NOT capture a trusted service client at factory scope. Tool factories that previously took `{ rpcClient }` should drop that parameter.
+  - `AiToolProjectionExtensionPoint.expose` no longer takes a second `pluginMetadata` argument; the owning metadata lives on `input.sourcePluginMetadata`. Callers must drop the second argument.
+
+  State and scale: conversations, messages, the audit log, proposal tokens, the rate-limit counter, and the spend ledger all live in shared Postgres, so every pod answers identically and the agent loop is resumable on any pod. The only pod-local state is the live MCP connection registry (bookkeeping, never a source of truth). Cross-pod conversation readback, the spend cap, and the tool budget are verified by env-gated two-pod integration tests.
+
+  This is a beta minor.
+
+- 9dcc848: Cut initial-load JS: lazy plugin contributions, a hardened lazy-by-default contribution contract, on-demand Monaco, and a lighter icon/chart load.
+
+  - Lazy plugin route pages: each plugin's route `element` references a `React.lazy`-wrapped page rendered inside a shared `<Suspense>` boundary. Plugins still register synchronously, so nav, slots, commands, API factories, and `foreignSignals` are available on first paint. This moves ~37 route-page chunks (~600 KB) out of the entry; the entry chunk drops from ~2.4 MB to ~190 KB. Auth flow pages stay eager. The `@checkstack/scripts` scaffold template generates lazy route pages too.
+  - Hardened contribution contract (BREAKING, frontend plugin contract): plugins declare contributions lazily and let the framework own code-splitting, Suspense, and per-plugin error isolation. Routes use `load: () => import("./Page").then((m) => ({ default: m.Page }))` instead of `element: <Page />` (`element` is still accepted for the rare page that must paint without a chunk fetch; provide exactly one). Slot extensions accept either an eager `component` or a lazy `load`; new `getLazyContribution` + `ExtensionComponent` exports from `@checkstack/frontend-api` render either kind. This also fixes runtime-installed plugins: `ExtensionSlot` subscribes to the plugin registry, and the API registry rebuilds when the plugin set changes (`getPlugins()` returns an immutable snapshot via `useSyncExternalStore`). A per-plugin error boundary contains a bad contribution.
+  - On-demand Monaco: the `@checkstack/ui` barrel no longer pulls the `@codingame/*` / `monaco-languageclient` stack into the initial load. `CodeEditor` lazy-loads its Monaco-backed editor behind `React.lazy` + Suspense, `validateTypeScriptSources` imports the editor API via in-body `await import(...)`, and the "vscode services ready" signal moved to a Monaco-free module. The ~10 MB editor body loads only when a `CodeEditor` mounts. A `react-vendor` `manualChunks` split was added for stable vendor caching.
+  - lucide-react 1.x + lighter icons/charts (BREAKING for icon consumers): lucide-react unified from three drifting ranges to `^1.17.0`. lucide v1 removed brand icons, so the GitHub/GitLab marks are vendored in `@checkstack/ui` (`GithubIcon`, `GitlabIcon`, `brandIcons`); a new `IconName` type (`LucideIconName | BrandIconName`) in `@checkstack/common` is canonical, accepted by `AuthStrategy.icon` and the card components, so data-driven brand names keep working. `DynamicIcon` no longer eagerly imports lucide's ~1600-icon map (~1 MB) - it lives in a `React.lazy` `iconRegistry` chunk fetched on first data-driven render, while statically named-imported icons tree-shake normally. The recharts-backed health-check charts (~300 KB) and the `HealthCheckSystemOverview` drawer leave the initial load.
+
+  BREAKING CHANGES:
+
+  - Frontend plugin contract: routes/slot contributions are lazy-by-default (`load` instead of `element`/eager elements) as described above.
+  - Any external consumer importing a brand icon from `lucide-react` (e.g. `import { Github } from "lucide-react"`) must switch to the vendored `@checkstack/ui` brand icons or a custom SVG.
+
+  This is a beta minor.
+
+- 9dcc848: Move primary navigation into a left sidebar, and serve the user guide in-app.
+
+  Feature navigation (a ~20-item user-menu dropdown) now lives in a persistent left sidebar (a slide-over drawer on mobile), grouped by section with the active route highlighted; the user menu keeps only account actions. A route opts into the sidebar with new `nav` metadata (`{ group, icon, label?, order?, accessRule? }`) on its registration, co-located with path + access + title. The sidebar filters entries with the same access check as page guards. `@checkstack/common` gains `isAccessRuleSatisfied` and a centralized set of in-app doc slugs (`APP_DOC_SLUGS` + `docsPath`, with a test asserting each resolves to a real docs page); `@checkstack/auth-frontend` exports `useAccessRules`.
+
+  The backend now serves the Astro Starlight docs build same-origin at `/checkstack/*` (the same artifact deployed to GitHub Pages), so the user guide is available inside the app including for self-hosted / air-gapped installs (served verbatim, no rebuild, no link rewriting; from `CHECKSTACK_DOCS_DIST`, before the SPA catch-all, degrading gracefully when absent; the Docker image builds and ships `docs/dist`; Vite proxies `/checkstack` in dev). The "Docs" link is a shell-owned external sidebar entry under the Documentation group (book icon), opening `/checkstack/user-guide/` in a new tab; the group renders even when no plugin route contributes to it.
+
+  BREAKING (plugin authors): `UserMenuItemsSlot` is no longer the way to add navigation - registering a top user-menu item no longer surfaces it anywhere. Add `nav` to the page's route instead. `UserMenuItemsBottomSlot` (account items) is unchanged. All bundled plugins have been migrated.
+
+  This is a beta minor.
+
+- 9dcc848: Align workspace dependency versions and migrate React Router to v7.
+
+  BREAKING CHANGES (React Router v7): All frontend packages now depend on `react-router-dom@^7.16.0`. Previously the workspace declared four divergent ranges (`^6.20.0`, `^6.22.0`, `^7.1.1`, `^7.14.2`), which resolved both `react-router@6` and `react-router@7` into a single bundle. Everything is now unified on v7. The public imports the app uses (`BrowserRouter`, `Routes`, `Route`, `Link`, `NavLink`, `MemoryRouter`, `useNavigate`, `useParams`, `useSearchParams`, `useLocation`) are unchanged between v6 and v7, so no source rewrites were required - but any out-of-tree plugin still on react-router v6 should upgrade to v7 (see the React Router v6 -> v7 upgrade guide) to share the host's single router instance via the import map.
+
+  Other unified ranges (no API change): `react` -> `^18.3.1`, the `@orpc/*` family (`contract`, `server`, `client`, `tanstack-query`, `openapi`, `zod`) -> `^1.14.4`, and `better-auth` -> `^1.6.13`.
+
+  Removed the pre-rename `@orpc/react-query` leftover from `@checkstack/frontend-api`; its `createRouterUtils` / `RouterUtils` / `ProcedureUtils` now come from `@orpc/tanstack-query` (the package already in use).
+
+  Stale in-range runtime deps pulled up to current published versions: `hono` `^4.12.23`, `@tanstack/react-query` (+devtools) `^5.100.14`, `date-fns` `^4.4.0`, `jose` `^6.2.3`, `tar` `^7.5.16`, `semver` `^7.8.1`, `@xyflow/react` `^12.11.0`.
+
+### Patch Changes
+
+- 9dcc848: Assorted bug fixes and small hardening across the platform.
+
+  - announcement-backend: `updateAnnouncement` now invalidates the active-announcements and admin-list caches (it was missing the `invalidateAllActive` / `invalidateListAll` calls), so an edited announcement no longer stays stale up to the 45s TTL.
+  - anomaly-backend: anomaly/drift state transitions (confirmations, recoveries, self-resolutions) now log at `debug` instead of info/warn - they are already surfaced via the `ANOMALY_STATE_CHANGED` signal, so logging them louder just added noise; genuine failure paths stay `warn`.
+  - backend: the `/api/:pluginId/*` dispatcher now populates `requestHeaders` on the per-request RPC context, so a handler that re-enters the router as the originating user (e.g. an AI tool's user-scoped client) can forward the caller's session cookie / bearer - previously the loopback failed with "Authentication required". Guarded by a real end-to-end integration test. The HTTP server idle timeout is also raised (default 255s, configurable via `CHECKSTACK_SERVER_IDLE_TIMEOUT_SECONDS`, clamped 0-255, reset on each streamed chunk) so long AI chat SSE turns are not severed mid-stream.
+  - backend: a request for an unknown plugin id (`/api/<unknown>/...`) now returns `404 Not Found` instead of `500` (and logs at warn, not error, since it is a client request) - an unknown _procedure_ on a known plugin already 404'd. The in-app docs namespace `/checkstack/*` now serves Starlight's own `404.html` with a real 404 status for a missing doc, instead of falling through to the SPA catch-all and 200-ing the app shell. Both guarded by tests.
+  - automation-common: remove polynomial-time backtracking from `toShellEnvKey`'s underscore-trim (CodeQL `js/polynomial-redos`); a negative look-behind anchors the trailing run, keeping the trim linear.
+  - common + script-packages-common: the pure transport-safe sandbox-policy schema (`sandboxPolicySchema` and its sub-schemas + inferred types) moved to `@checkstack/common` (the neutral base), removing two inverted deps that existed only to reach the shape; `@checkstack/backend-api` continues to re-export it. The schema is no longer exported from `@checkstack/script-packages-common`. Pure refactor, no behavior change.
+  - catalog-backend: reject duplicate system names (a `CONFLICT` on create/rename, enforced by a pre-write check AND a new DB unique index on `systems.name`, migration 0004 which first resolves pre-existing duplicates by suffixing).
+  - catalog-frontend: detail-page cleanups (use `<NotFound />` not `<AccessDenied />` on the not-found branch, a readable key/value metadata list via `normalizeMetadata`, runtime locale via `formatDate`); and stop the browse view re-rendering on every health report (adopt a new statuses report only when a value actually changed, via `healthStatusesEqual`, so rows stay stable and interactive).
+  - healthcheck-backend: fix the daily-rollup retention step failing with an `ON CONFLICT` mismatch (SQLSTATE 42P10) after `environmentId` joined the `health_check_aggregates` unique constraint - the rollup now groups by (day, environmentId, sourceId) and uses a single exported conflict-target constant (`DAILY_AGGREGATE_CONFLICT_TARGET`) kept in lock-step with the schema by a unit test.
+  - automation-frontend: the service-account picker's "Learn more" links are now absolute URLs to the deployed Astro docs site (they 404ed as in-app relative paths). The Monaco script editor double-init crash is fixed (serialized cold init, a guarded `monacoGuard` accessor, theme/type effects gated on `apiReady`).
+  - auth-frontend: bound the desktop user-menu popover height (`max-h-[var(--radix-popover-content-available-height)]` + `overflow-y-auto`) so it no longer clips on short viewports, and fold the standalone `Account > Profile` item into a focusable name/email header (`profileHref` on `UserMenu`); the now-empty `Account` group no longer renders.
+  - satellite-frontend: picked up via the sidebar-nav migration (account-only user menu).
+
+  (Related UI fixes - the Monaco editor following the app theme, the `DynamicOptionsField` no-flash fix, the shared `Spinner`, GFM tables, and the user-menu popover bound - land their `@checkstack/ui` bump in the UI/perf changesets where `@checkstack/ui` is already minored.)
+
+  This is a beta patch.
+
+- 9dcc848: Guard component animations behind isLowPower, and add a shared inline Spinner.
+
+  - `@checkstack/ui` shared components (`Tabs`, `ConfirmationModal`, `Accordion`, `CodeEditor` popout-button backdrop blur) now drop their `animate-*` / `backdrop-blur` classes when the device reports the low-power tier, matching `LoadingSpinner` / `Skeleton`. No public API change; normal-power rendering is unchanged.
+  - A new shared inline `Spinner` (`@checkstack/ui`) renders a lucide `Loader2` whose `animate-spin` is gated internally behind `usePerformance().isLowPower`, so call sites inherit the low-power guard. Props: `size` (`sm`/`md`/`lg`), `className`, rest spread to the icon; decorative by default (`aria-hidden`), `role="status"` when given `aria-label`. The hand-rolled `Loader2` button/table spinners in `HealthCheckDrawer`, `HealthCheckRunsTable`, `IncidentEditor`, `IncidentUpdateForm`, `ProviderConnectionsPage`, `MaintenanceEditor`, `MaintenanceUpdateForm`, `UserChannelCard`, and `DynamicOptionsField` are migrated onto it.
+  - Remaining unguarded `animate-*` / `animate-in` / blur classes across the auth, gitops, healthcheck, incident, integration, maintenance, and notification frontends are gated behind `usePerformance().isLowPower`, so effects degrade gracefully on low-power devices per the performance rule.
+
+  Normal-power behavior is unchanged; low-power rendering drops the animations.
+
+  This is a beta minor.
+
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+  - @checkstack/ui@1.13.0
+  - @checkstack/auth-common@0.8.0
+  - @checkstack/common@0.13.0
+  - @checkstack/frontend-api@0.7.0
+
 ## 0.6.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.6.7",
+  "version": "0.7.1",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -18,21 +18,21 @@
     "test:e2e": "bunx playwright test"
   },
   "dependencies": {
-    "@checkstack/frontend-api": "0.6.0",
-    "@checkstack/common": "0.12.0",
-    "@checkstack/ui": "1.11.0",
-    "react": "^18.2.0",
-    "react-router-dom": "^6.22.0",
-    "lucide-react": "^0.344.0",
-    "better-auth": "^1.1.8",
-    "@checkstack/auth-common": "0.7.2"
+    "@checkstack/frontend-api": "0.7.0",
+    "@checkstack/common": "0.13.0",
+    "@checkstack/ui": "1.13.0",
+    "react": "^18.3.1",
+    "react-router-dom": "^7.16.0",
+    "lucide-react": "^1.17.0",
+    "better-auth": "^1.6.13",
+    "@checkstack/auth-common": "0.8.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@playwright/test": "^1.49.0",
-    "@checkstack/test-utils-frontend": "0.0.5",
+    "@playwright/test": "^1.60.0",
+    "@checkstack/test-utils-frontend": "0.1.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.3.4"
+    "@checkstack/scripts": "0.4.0"
   }
 }

package/src/components/AuthStrategyCard.tsx

@@ -2,7 +2,6 @@ import { useCallback, useMemo } from "react";
 import {
   StrategyConfigCard,
   type ConfigSection,
-  type LucideIconName,
   type OptionsResolver,
 } from "@checkstack/ui";
 import { usePluginClient } from "@checkstack/frontend-api";
@@ -87,7 +86,7 @@ export function AuthStrategyCard({
         id: strategy.id,
         displayName: strategy.displayName,
         description: strategy.description,
-        icon: strategy.icon as LucideIconName,
+        icon: strategy.icon,
         enabled: strategy.enabled,
       }}
       configSections={configSections}

package/src/components/LoginPage.tsx

@@ -4,12 +4,9 @@ import { LogIn, LogOut, AlertCircle, ArrowLeft } from "lucide-react";
 import {
   useApi,
   ExtensionSlot,
-  pluginRegistry,
   usePluginClient,
-  UserMenuItemsSlot,
   UserMenuItemsBottomSlot,
   UserMenuItemsContext,
-  Extension,
 } from "@checkstack/frontend-api";
 import { AuthApi, authRoutes } from "@checkstack/auth-common";
 import { resolveRoute } from "@checkstack/common";
@@ -25,8 +22,6 @@ import {
   CardFooter,
   UserMenu,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   Alert,
   AlertIcon,
   AlertContent,
@@ -37,6 +32,8 @@ import {
   InfoBannerContent,
   InfoBannerTitle,
   InfoBannerDescription,
+  usePerformance,
+  cn,
 } from "@checkstack/ui";
 import { useToast } from "@checkstack/ui";
 import { extractErrorMessage } from "@checkstack/common";
@@ -62,6 +59,7 @@ export const LoginPage = () => {
   const authClient = usePluginClient(AuthApi);
   const { strategies, loading: strategiesLoading } = useEnabledStrategies();
   const toast = useToast();
+  const { isLowPower } = usePerformance();
 
   // Query: Registration status
   const { data: registrationData } = authClient.getRegistrationStatus.useQuery(
@@ -165,10 +163,30 @@ export const LoginPage = () => {
         <Card className="w-full max-w-md">
           <CardContent className="pt-6">
             <div className="space-y-4">
-              <div className="h-4 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div
+                className={cn(
+                  "h-4 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
             </div>
           </CardContent>
         </Card>
@@ -418,41 +436,6 @@ export const LogoutMenuItem = (_props: UserMenuItemsContext) => {
   );
 };
 
-type UserMenuExtension = Extension<typeof UserMenuItemsSlot>;
-
-function groupTopExtensions(
-  extensions: UserMenuExtension[],
-): Array<{ label: string | undefined; items: UserMenuExtension[] }> {
-  const buckets = new Map<string, UserMenuExtension[]>();
-  const ungrouped: UserMenuExtension[] = [];
-
-  for (const ext of extensions) {
-    const groupName = ext.metadata?.group;
-    if (!groupName) {
-      ungrouped.push(ext);
-      continue;
-    }
-    const list = buckets.get(groupName);
-    if (list) {
-      list.push(ext);
-    } else {
-      buckets.set(groupName, [ext]);
-    }
-  }
-
-  // Groups are displayed alphabetically by label (items keep their order
-  // within a group).
-  const result: Array<{ label: string | undefined; items: UserMenuExtension[] }> =
-    [...buckets.entries()]
-      .toSorted(([a], [b]) => a.localeCompare(b))
-      .map(([name, items]) => ({ label: name, items }));
-  // Untagged extensions go last with no header.
-  if (ungrouped.length > 0) {
-    result.push({ label: undefined, items: ungrouped });
-  }
-  return result;
-}
-
 export const LoginNavbarAction = () => {
   const authApi = useApi(authApiRef);
   const { data: session, isPending } = authApi.useSession();
@@ -460,6 +443,7 @@ export const LoginNavbarAction = () => {
   const [hasCredentialAccount, setHasCredentialAccount] =
     useState<boolean>(false);
   const [credentialLoading, setCredentialLoading] = useState(true);
+  const { isLowPower } = usePerformance();
 
   useEffect(() => {
     if (!session?.user) {
@@ -478,36 +462,30 @@ export const LoginNavbarAction = () => {
   }, [session?.user]);
 
   if (isPending || accessRulesLoading || credentialLoading) {
-    return <div className="w-20 h-9 bg-muted animate-pulse rounded-full" />;
+    return (
+      <div
+        className={cn(
+          "w-20 h-9 bg-muted rounded-full",
+          !isLowPower && "animate-pulse",
+        )}
+      />
+    );
   }
 
   if (session?.user) {
-    const topExtensions = pluginRegistry.getExtensions(
-      UserMenuItemsSlot.id,
-    ) as UserMenuExtension[];
-    const bottomExtensions = pluginRegistry.getExtensions(
-      UserMenuItemsBottomSlot.id,
-    );
-    const hasBottomItems = bottomExtensions.length > 0;
+    // The user menu is account-only now: profile header (rendered by UserMenu)
+    // plus the bottom slot (About, theme, low-power, logout). Feature navigation
+    // lives in the left sidebar (routes that declare `nav` metadata).
     const menuContext: UserMenuItemsContext = {
       accessRules,
       hasCredentialAccount,
     };
-    const groups = groupTopExtensions(topExtensions);
 
     return (
-      <UserMenu user={session.user}>
-        {groups.map(({ label, items }, groupIndex) => (
-          <React.Fragment key={label ?? `__group-${groupIndex}`}>
-            {groupIndex > 0 && <DropdownMenuSeparator />}
-            {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
-            {items.map((ext) => {
-              const Component = ext.component as React.ComponentType<UserMenuItemsContext>;
-              return <Component key={ext.id} {...menuContext} />;
-            })}
-          </React.Fragment>
-        ))}
-        {hasBottomItems && <DropdownMenuSeparator />}
+      <UserMenu
+        user={session.user}
+        profileHref={resolveRoute(authRoutes.routes.profile)}
+      >
         <ExtensionSlot slot={UserMenuItemsBottomSlot} context={menuContext} />
       </UserMenu>
     );

package/src/components/OAuthConsentPage.tsx

@@ -0,0 +1,177 @@
+import { useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { ShieldCheck, AlertCircle } from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+import { getCachedRuntimeConfig } from "@checkstack/frontend-api";
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+  Badge,
+} from "@checkstack/ui";
+
+/**
+ * OAuth 2.1 consent screen for the AI platform's Authorization Server.
+ *
+ * better-auth's `oidcProvider` redirects the interactive authorization-code
+ * flow to `consentPage` (configured as `/auth/oauth-consent`) with the
+ * `consent_code`, `client_id`, and granted `scope` as query params. Without a
+ * route here the flow 404s; this minimal page renders the requested client and
+ * scopes, then POSTs the user's decision to the better-auth consent endpoint
+ * and follows the returned `redirectURI`.
+ *
+ * The decision endpoint requires the user's session cookie (it runs behind
+ * `sessionMiddleware`), so the POST uses `credentials: "include"`.
+ */
+export const OAuthConsentPage = () => {
+  const [searchParams] = useSearchParams();
+  const consentCode = searchParams.get("consent_code");
+  const clientId = searchParams.get("client_id");
+  const scope = searchParams.get("scope") ?? "";
+
+  const [loading, setLoading] = useState<"accept" | "deny" | undefined>();
+  const [error, setError] = useState<string>();
+
+  const baseUrl = getCachedRuntimeConfig()?.baseUrl ?? globalThis.location.origin;
+  const scopes = scope.split(" ").filter(Boolean);
+
+  const submit = async (accept: boolean) => {
+    setError(undefined);
+    setLoading(accept ? "accept" : "deny");
+    try {
+      const res = await fetch(`${baseUrl}/api/auth/oauth2/consent`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ accept, consent_code: consentCode }),
+      });
+      if (!res.ok) {
+        let detail: string | undefined;
+        try {
+          const body = (await res.json()) as {
+            error_description?: string;
+            message?: string;
+          };
+          detail = body.error_description ?? body.message;
+        } catch {
+          // Non-JSON error body — fall back to the generic message below.
+        }
+        setError(
+          detail ??
+            "Consent could not be processed. The request may have expired.",
+        );
+        setLoading(undefined);
+        return;
+      }
+      const data = (await res.json()) as { redirectURI?: string };
+      if (data.redirectURI) {
+        globalThis.location.href = data.redirectURI;
+        return;
+      }
+      setError("The authorization server did not return a redirect.");
+    } catch (error_) {
+      setError(extractErrorMessage(error_, "Consent request failed."));
+    } finally {
+      setLoading(undefined);
+    }
+  };
+
+  if (!consentCode || !clientId) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1 text-center">
+            <div className="mx-auto w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mb-2">
+              <AlertCircle className="h-6 w-6 text-destructive" />
+            </div>
+            <CardTitle className="text-2xl font-bold">Invalid Request</CardTitle>
+            <CardDescription>
+              This authorization request is missing required parameters. Start
+              the connection again from your client application.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
+            <ShieldCheck className="h-6 w-6 text-primary" />
+          </div>
+          <CardTitle className="text-2xl font-bold">Authorize access</CardTitle>
+          <CardDescription>
+            <span className="font-medium text-foreground">{clientId}</span> is
+            requesting access to your Checkstack account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error && (
+            <Alert variant="error">
+              <AlertIcon>
+                <AlertCircle className="h-4 w-4" />
+              </AlertIcon>
+              <AlertContent>
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </AlertContent>
+            </Alert>
+          )}
+
+          <div className="space-y-2">
+            <p className="text-sm text-muted-foreground">
+              This application will be able to act on your behalf with the
+              following scopes:
+            </p>
+            {scopes.length > 0 ? (
+              <div className="flex flex-wrap gap-2">
+                {scopes.map((s) => (
+                  <Badge key={s} variant="secondary">
+                    {s}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground italic">
+                No specific scopes requested.
+              </p>
+            )}
+            <p className="text-xs text-muted-foreground pt-2">
+              Access is always limited to what your own account already permits.
+            </p>
+          </div>
+        </CardContent>
+        <CardFooter className="flex gap-3">
+          <Button
+            variant="outline"
+            className="flex-1"
+            disabled={loading !== undefined}
+            onClick={() => submit(false)}
+          >
+            {loading === "deny" ? "Denying..." : "Deny"}
+          </Button>
+          <Button
+            variant="primary"
+            className="flex-1"
+            disabled={loading !== undefined}
+            onClick={() => submit(true)}
+          >
+            {loading === "accept" ? "Authorizing..." : "Allow"}
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};

package/src/components/OnboardingPage.tsx

@@ -19,6 +19,8 @@ import {
   AlertContent,
   AlertTitle,
   AlertDescription,
+  usePerformance,
+  cn,
 } from "@checkstack/ui";
 import { getAuthClientLazy } from "../lib/auth-client";
 
@@ -37,6 +39,7 @@ export const OnboardingPage = () => {
   const completeOnboardingMutation =
     authClient.completeOnboarding.useMutation();
   const betterAuthClient = getAuthClientLazy();
+  const { isLowPower } = usePerformance();
 
   // Check if onboarding is needed
   const { data: onboardingStatus, isLoading: checkingStatus } =
@@ -125,9 +128,24 @@ export const OnboardingPage = () => {
         <Card className="w-full max-w-md">
           <CardContent className="pt-6">
             <div className="space-y-4">
-              <div className="h-4 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div
+                className={cn(
+                  "h-4 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
             </div>
           </CardContent>
         </Card>

package/src/components/ProfilePage.tsx

@@ -26,6 +26,8 @@ import {
   AlertContent,
   AlertTitle,
   AlertDescription,
+  usePerformance,
+  cn,
 } from "@checkstack/ui";
 
 export const ProfilePage = () => {
@@ -40,6 +42,7 @@ export const ProfilePage = () => {
   const [hasCredentialAccount, setHasCredentialAccount] = useState(false);
 
   const authClient = usePluginClient(AuthApi);
+  const { isLowPower } = usePerformance();
 
   // Fetch current user profile
   const { data: profile, isLoading: loadingProfile } =
@@ -104,9 +107,24 @@ export const ProfilePage = () => {
         <Card className="w-full max-w-md">
           <CardContent className="pt-6">
             <div className="space-y-4">
-              <div className="h-4 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div
+                className={cn(
+                  "h-4 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
             </div>
           </CardContent>
         </Card>

package/src/components/RegisterPage.tsx

@@ -21,6 +21,8 @@ import {
   InfoBannerTitle,
   InfoBannerDescription,
   useToast,
+  usePerformance,
+  cn,
 } from "@checkstack/ui";
 import { useEnabledStrategies } from "../hooks/useEnabledStrategies";
 import { SocialProviderButton } from "./SocialProviderButton";
@@ -37,6 +39,7 @@ export const RegisterPage = () => {
   const { strategies, loading: strategiesLoading } = useEnabledStrategies();
   const authBetterClient = getAuthClientLazy();
   const toast = useToast();
+  const { isLowPower } = usePerformance();
 
   // Derive validation errors directly from password (no state/effect needed)
   const validationErrors = useMemo(() => {
@@ -100,10 +103,30 @@ export const RegisterPage = () => {
         <Card className="w-full max-w-md">
           <CardContent className="pt-6">
             <div className="space-y-4">
-              <div className="h-4 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
-              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div
+                className={cn(
+                  "h-4 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
+              <div
+                className={cn(
+                  "h-10 bg-muted rounded",
+                  !isLowPower && "animate-pulse",
+                )}
+              />
             </div>
           </CardContent>
         </Card>

package/src/index.tsx

@@ -1,11 +1,9 @@
-import React from "react";
 import {
   ApiRef,
   accessApiRef,
   createFrontendPlugin,
   createSlotExtension,
   NavbarRightSlot,
-  UserMenuItemsSlot,
   UserMenuItemsBottomSlot,
   NavbarLeftSlot,
 } from "@checkstack/frontend-api";
@@ -21,15 +19,13 @@ import { ResetPasswordPage } from "./components/ResetPasswordPage";
 import { ChangePasswordPage } from "./components/ChangePasswordPage";
 import { OnboardingPage } from "./components/OnboardingPage";
 import { ProfilePage } from "./components/ProfilePage";
+import { OAuthConsentPage } from "./components/OAuthConsentPage";
 import { authApiRef, AuthApi, AuthSession } from "./api";
 import { getAuthClientLazy } from "./lib/auth-client";
 import { AuthAccessApi } from "./lib/AuthAccessApi";
 import { useSessionContext } from "./lib/SessionProvider";
 
-import { useNavigate } from "react-router-dom";
-import { Settings2, User } from "lucide-react";
-import { DropdownMenuItem } from "@checkstack/ui";
-import { UserMenuItemsContext } from "@checkstack/frontend-api";
+import { Settings2 } from "lucide-react";
 import { AuthSettingsPage } from "./components/AuthSettingsPage";
 import {
   authAccess,
@@ -120,6 +116,10 @@ export type { TeamAccessEditorProps } from "./components/TeamAccessEditor";
 // Re-export SessionProvider for App.tsx to wrap the component tree
 export { SessionProvider } from "./lib/SessionProvider";
 
+// Re-export the access-rules hook so the app shell (sidebar) can resolve
+// nav visibility from the granted rules in one place.
+export { useAccessRules } from "./hooks/useAccessRules";
+
 export const authPlugin = createFrontendPlugin({
   metadata: pluginMetadata,
   apis: [
@@ -148,6 +148,12 @@ export const authPlugin = createFrontendPlugin({
     {
       route: authRoutes.routes.settings,
       element: <AuthSettingsPage />,
+      nav: {
+        group: "Configuration",
+        icon: Settings2,
+        label: "Auth Settings",
+        accessRule: authAccess.strategies,
+      },
     },
     {
       route: authRoutes.routes.forgotPassword,
@@ -169,6 +175,10 @@ export const authPlugin = createFrontendPlugin({
       route: authRoutes.routes.onboarding,
       element: <OnboardingPage />,
     },
+    {
+      route: authRoutes.routes.oauthConsent,
+      element: <OAuthConsentPage />,
+    },
   ],
   extensions: [
     {
@@ -176,45 +186,6 @@ export const authPlugin = createFrontendPlugin({
       slot: NavbarRightSlot,
       component: LoginNavbarAction,
     },
-    createSlotExtension(UserMenuItemsSlot, {
-      id: "auth.user-menu.settings",
-      metadata: { group: "Configuration" },
-      component: ({ accessRules: userPerms }: UserMenuItemsContext) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks -- Inline component used via createSlotExtension
-        const navigate = useNavigate();
-        const qualifiedId = `${pluginMetadata.pluginId}.${authAccess.strategies.id}`;
-        const canManage =
-          userPerms.includes("*") || userPerms.includes(qualifiedId);
-
-        if (!canManage) return <React.Fragment />;
-
-        return (
-          <DropdownMenuItem
-            onClick={() => navigate(resolveRoute(authRoutes.routes.settings))}
-            icon={<Settings2 className="h-4 w-4" />}
-          >
-            Auth Settings
-          </DropdownMenuItem>
-        );
-      },
-    }),
-    createSlotExtension(UserMenuItemsSlot, {
-      id: "auth.user-menu.profile",
-      metadata: { group: "Account" },
-      component: () => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks -- Inline component used via createSlotExtension
-        const navigate = useNavigate();
-
-        return (
-          <DropdownMenuItem
-            onClick={() => navigate(resolveRoute(authRoutes.routes.profile))}
-            icon={<User className="h-4 w-4" />}
-          >
-            Profile
-          </DropdownMenuItem>
-        );
-      },
-    }),
     createSlotExtension(UserMenuItemsBottomSlot, {
       id: "auth.user-menu.logout",
       component: LogoutMenuItem,

package/src/lib/AuthAccessApi.ts

@@ -1,6 +1,6 @@
 import { AccessApi } from "@checkstack/frontend-api";
 import { useAccessRules } from "../hooks/useAccessRules";
-import type { AccessRule } from "@checkstack/common";
+import { isAccessRuleSatisfied, type AccessRule } from "@checkstack/common";
 
 /**
  * Unified access API implementation.
@@ -20,19 +20,9 @@ export class AuthAccessApi implements AccessApi {
       return { loading: false, allowed: false };
     }
 
-    const accessRuleId = accessRule.id;
-
-    // Check wildcard, exact match, or manage implies read
-    const isWildcard = accessRules.includes("*");
-    const hasExact = accessRules.includes(accessRuleId);
-
-    // For read actions, also check if user has manage access for the same resource
-    const hasManage =
-      accessRule.level === "read"
-        ? accessRules.includes(`${accessRule.resource}.manage`)
-        : false;
-
-    const allowed = isWildcard || hasExact || hasManage;
-    return { loading: false, allowed };
+    return {
+      loading: false,
+      allowed: isAccessRuleSatisfied(accessRules, accessRule),
+    };
   }
 }