frontend-dashboard

# Frontend Dashboard Use this sub-skill when an Airweave task touches the React/Vite dashboard, user-facing app routes, dashboard API calls, auth state, organization switching, search UI, collection pages, billing/admin screens, webhooks, auth providers, usage gating, or cron schedule display utilities. ## Route to the right reference - Read [references/api-client.md](references/api-client.md) before changing API calls, auth token handling, request headers, SSE/fetch behavior, or organization auto-switching. - Read [references/search-ui.md](references/search-ui.md) before changing dashboard search tiers, filters, streamed agentic search traces, result rendering, or API-code snippets. - Read [references/collections-and-orgs.md](references/collections-and-orgs.md) before changing dashboard collection pages, organization state, billing/admin routes, webhooks, auth-provider pages, browse-tree UI, usage checks, or cron parser behavior. - Read [references/troubleshooting.md](references/troubleshooting.md) when diagnosing auth-disabled dev mode, Auth0 setup, stale organization context, usage/billing gates, search errors, OAuth callback state, admin hazards, or frontend build/test failures. - Cross-link to sibling [backend-api](../backend-api/SKILL.md) for endpoint schemas, request/response shapes, auth/header semantics, search route contracts, source-connection OAuth behavior, and webhook payload semantics. ## Operating rules 1. Use the shared `apiClient` for dashboard API calls. Endpoint strings should be root-relative, such as `/collections`, not `/api/v1/collections`. 2. Preserve the auth-token provider lifecycle: the app wires `AuthContext` into `apiClient`, queues requests until auth is ready, and retries once after `401` or `403` by clearing the cached token. 3. Preserve organization context. `X-Organization-ID` comes from the current organization store; successful `GET` responses with a different accessible `organization_id` can auto-switch the active organization and clear organization-scoped caches. Mutations must not auto-switch. 4. Treat usage checks as user-facing gates, not backend authorization. Buttons/search tiers can be disabled from cached `/usage` checks, but failed or missing checks default to allowed and the backend remains the source of truth. 5. Keep admin and billing flows explicit. Admin pages require `user.is_admin`; sync delete/cancel/resync actions are destructive. Billing setup/portal routes redirect through backend-created Stripe sessions and should fail closed with toasts/navigation. 6. Keep Connect widget internals, MCP server internals, backend implementation details, and Monke orchestration out of this sub-skill. Route those to their sibling sub-skills. ## Safe validation anchors - Cron parser unit behavior is the safe native anchor: run from the frontend package with `npm test -- src/utils/cronParser.test.ts`. - Later integration should add `npm run lint` and `npm run build` for dashboard-wide static/build coverage. - Do not introduce browser automation as a requirement for this sub-skill unless a later verification pass explicitly adds a frontend harness.