Frontend

Pages

• /dashboard: KPI cards computed from api.runs.listRunsByOrganization over last 30 days. See components/dashboard-page.md
• /runs: filterable table of runs_live via api.runs.listRuns for the current project. See components/runs-page.md
• /settings: project info and API key management (create/revoke, copy‑once display). See components/settings-page.md
• /projects: list and navigate between projects; create project dialog.

Data sources

• Convex queries:
• api.runs.listRuns(projectId, sinceMs)
• api.runs.listRunsByOrganization(organizationId, sinceMs)
• api.projects.listByOrganization(organizationId)
• api.projects.getById(projectId)
• api.apiKeys.listByProject(projectId)

Components

• components/project-context.tsx: supplies current project and list; auto‑selects first.
• components/project-selector.tsx: dropdown to switch projects; navigates to /projects/[id].
• components/ConvexClientProvider.tsx: wraps app with Convex + Clerk and Notifications provider.
• Navbar with Clerk OrganizationSwitcher and UserMenu.

Loading & error states

• Queries accept "skip" to defer until IDs are known.
• Pages render placeholders when projects undefined or currentProject null.
• API key full value is displayed only on creation, cached ephemerally in sessionStorage.

See also: ../08-convex-realtime.md, ../backend/auth.md