Commit Graph

18 Commits

Author SHA1 Message Date
Konsti Wohlwend
433d4dcc96
Upgrade TypeScript from 5.9.3 to 6.0.3 (#1644) 2026-06-22 17:18:15 -07:00
Mantra
e93b7520c4
feat(analytics): add route analytics heatmaps (#1520)
## Summary

Adds route analytics heatmaps, stacked on top of
`codex/analytics-overview-filters` (#1496).

- Heatmap API routes (`/analytics/heatmap`, internal heatmap +
heatmap-token endpoints)
- Signed heatmap token signing/verification lib + tests
- Dashboard heatmaps page (client + route)
- Dev-tool + event-tracker support for heatmap capture
- ClickHouse migration support

## Demo


https://app.devin.ai/attachments/49cd6a96-8962-46d9-b8fb-145746cc6dee/rec-c80ec66f-21a3-49fb-bfae-19195ce7b930-edited.mp4

## Notes
Base branch is `codex/analytics-overview-filters` so the diff shows only
the heatmap changes. Will retarget to `dev` once the base PR lands.

Link to Devin session:
https://app.devin.ai/sessions/16f8adac29b948b38280c85418617fea
Requested by: @mantrakp04

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added clickmap overlay to analytics dashboard, enabling visual click
heatmap analysis on live websites.
* Enhanced analytics metrics with hourly breakdowns, bounce rates, and
top regions/browsers/devices filtering.

* **Bug Fixes**
  * Improved click event tracking accuracy and dead-click detection.
  * Fixed overlay z-index stacking for better visibility.

* **Style**
* Updated dashboard card padding and navigation button styling for
consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: mantra <mantra@stack-auth.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-15 12:06:16 -07:00
Mantra
59daf1321c
[codex] Add analytics overview filters (#1496)
## Summary

Adds richer analytics overview metrics and filterable dashboard
breakdowns.

- adds hourly overview series for the 1-day range
- adds country, referrer, browser, OS, and device filters to internal
metrics
- adds bounce rate, session duration, top countries, top browsers, top
operating systems, and device breakdowns
- updates the overview dashboard with filter chips, top-list cards,
animated metric states, and 1-day hourly chart support
- captures user agent on page-view analytics events, with a server-side
fallback for older clients

## Validation

Attempted targeted tests:

`pnpm test run
apps/backend/src/app/api/latest/internal/metrics/route.test.ts
'apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/analytics-chart-mode.test.ts'`

This did not reach Vitest in the temporary split worktree because
`node_modules` is not installed there and the repo pre-step failed at
`pnpm exec tsx ./scripts/generate-sdks.ts`.

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Adds analytics overview filters with optional date‑range bounds and
1‑day hourly charts, plus smoother, accessible animations across charts
and top lists. Improves correctness and stability with deterministic
caching, normalized inputs, client‑only user‑agent capture, and
globe/layout fixes.

- **New Features**
- Filterable analytics overview (country, referrer, browser, OS, device)
with normalized inputs and optional `since`/`until`; API/admin/dashboard
accept `AnalyticsOverviewFilters` with deterministic cache keys.
- 1‑day hourly charts (page views, visitors) and a metric mode toggle
(DAU, Visitors, Revenue); animated top‑lists and sparklines powered by
`motion` with reduced‑motion support.
- UI: filter chips/menu, clearer tooltips (incl. user metric cards),
optional interactive globe with dynamic camera distance; exported
`TooltipPortal` from `@hexclave/ui`.

- **Refactors & Bug Fixes**
- Event ingest: client sends `user_agent`; removed server‑side fallback;
added user‑agent filter‑fragment builder and tests.
- Metrics correctness: aligned hourly bounds to start of UTC hour;
derived 1‑day revenue total from daily series; resilient chart x‑axis
formatting; country filter options use analytics `top_regions`;
fixed‑'en' locale for top‑lists; added date‑range parsing/validation for
filters.
- UI/runtime: smoother pill/tab slider animations with guards for
missing Web APIs; added `containedHeight` to `PageLayout` and wired into
sidebar/session replays; globe disables zoom when non‑interactive.
- Misc: instrumentation runs only in Node (`process.env.NEXT_RUNTIME ===
"nodejs"`); analytics/overview page redirects with URL‑encoded
`projectId`; Docker: include `@hexclave/template` in `turbo prune` to
fix CI builds.

<sup>Written for commit 7fcd3558a5.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/hexclave/hexclave/pull/1496?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Analytics filters (country, referrer, browser, OS, device); hourly
signup and active-user series; expanded hourly/daily analytics payloads
and top-lists UI.
* Chart metric modes (DAU, Visitors, Revenue), optional page-views
series, interactive globe support, animated Top Lists, and sparkline
animations.

* **Improvements**
* Better user-agent capture/normalization for batched events and
page-view tracking; reduced-motion aware animations; enhanced tooltips
and UI slider/tab indicators.
  * Added motion library dependency.

* **Tests**
  * New unit tests for analytics filters and chart metric mode behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: mantra <mantra@stack-auth.com>
2026-06-10 17:50:35 -07:00
Armaan Jain
b246e4ab65
Consistency and design changes light mode (#1500)
# PR #1500 Visual Writeup


Visual assets hosted in [this
gist](https://gist.github.com/b0c1d3d072a71e30b65380f8b2cf53a1).

- Base: `dev`
- Head: `Consistency-and-design-changes-light-mode`
- Dashboard dev server: `http://localhost:8101`
- Viewport: `1920x1200`
- Screenshots: `74` referenced (`18` surfaces x `2` themes x
`before/after`, plus the attached Conversations create-dialog pair)
- Red outlines appear only on **after** screenshots to mark the changed
surface.

## Summary

This PR refreshes light-mode consistency across dashboard surfaces and
adds a dashboard-only Account Settings implementation. The screenshots
below compare the base branch against the PR branch for every changed
dashboard route/surface included in the scope.

## Screenshot Matrix

### Account Settings - Profile

Dashboard-only profile page redesign against the previous Stack handler
page.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-profile-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-before-light.png)
|
![account-profile-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-after-light.png)
|
| Dark |
![account-profile-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-before-dark.png)
|
![account-profile-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-profile-after-dark.png)
|

### Account Settings - Emails & Auth

Email, password, passkey, OTP, and MFA settings shell.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-emails-auth-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-before-light.png)
|
![account-emails-auth-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-after-light.png)
|
| Dark |
![account-emails-auth-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-before-dark.png)
|
![account-emails-auth-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-emails-auth-after-dark.png)
|

### Account Settings - Notifications

Notification preferences styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-notifications-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-before-light.png)
|
![account-notifications-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-after-light.png)
|
| Dark |
![account-notifications-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-before-dark.png)
|
![account-notifications-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-notifications-after-dark.png)
|

### Account Settings - Active Sessions

Active session table and action styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-sessions-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-before-light.png)
|
![account-sessions-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-after-light.png)
|
| Dark |
![account-sessions-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-before-dark.png)
|
![account-sessions-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-sessions-after-dark.png)
|

### Account Settings - Payments

Billing surface and account/team billing selector.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-payments-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-before-light.png)
|
![account-payments-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-after-light.png)
|
| Dark |
![account-payments-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-before-dark.png)
|
![account-payments-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-payments-after-dark.png)
|

### Account Settings - Settings

Sign out and account deletion settings.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-settings-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-before-light.png)
|
![account-settings-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-after-light.png)
|
| Dark |
![account-settings-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-before-dark.png)
|
![account-settings-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-settings-after-dark.png)
|

### Account Settings - Team

Team profile, members, and leave-team sections.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-team-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-before-light.png)
|
![account-team-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-after-light.png)
|
| Dark |
![account-team-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-before-dark.png)
|
![account-team-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-after-dark.png)
|

### Account Settings - Create Team

Team creation form.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![account-team-create-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-before-light.png)
|
![account-team-create-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-after-light.png)
|
| Dark |
![account-team-create-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-before-dark.png)
|
![account-team-create-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/account-team-create-after-dark.png)
|

### Analytics Queries

Touched analytics query page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![analytics-queries-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-before-light.png)
|
![analytics-queries-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-after-light.png)
|
| Dark |
![analytics-queries-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-before-dark.png)
|
![analytics-queries-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-queries-after-dark.png)
|

### Analytics Tables

Analytics table/query controls and data-grid surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![analytics-tables-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-before-light.png)
|
![analytics-tables-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-after-light.png)
|
| Dark |
![analytics-tables-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-before-dark.png)
|
![analytics-tables-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/analytics-tables-after-dark.png)
|

### Auth Methods

Authentication method configuration surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![auth-methods-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-before-light.png)
|
![auth-methods-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-after-light.png)
|
| Dark |
![auth-methods-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-before-dark.png)
|
![auth-methods-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/auth-methods-after-dark.png)
|

### Conversations

Support conversation UI surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![conversations-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-before-light.png)
|
![conversations-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-after-light.png)
|
| Dark |
![conversations-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-before-dark.png)
|
![conversations-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-after-dark.png)
|

#### Conversations - Create Dialog

Attached screenshots for the create conversation dialog.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![conversations-dialog-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-dialog-before-light.png)
|
![conversations-dialog-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/conversations-dialog-after-light.png)
|

### Domains

Trusted domains alert/card styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![domains-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-before-light.png)
|
![domains-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-after-light.png)
|
| Dark |
![domains-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-before-dark.png)
|
![domains-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/domains-after-dark.png)
|

### Email Sent

Sent email and reputation card styling.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![email-sent-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-before-light.png)
|
![email-sent-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-after-light.png)
|
| Dark |
![email-sent-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-before-dark.png)
|
![email-sent-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/email-sent-after-dark.png)
|

### Launch Checklist

Launch checklist page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![launch-checklist-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-before-light.png)
|
![launch-checklist-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-after-light.png)
|
| Dark |
![launch-checklist-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-before-dark.png)
|
![launch-checklist-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/launch-checklist-after-dark.png)
|

### Payment Products

Products/items payment page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![payments-products-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-before-light.png)
|
![payments-products-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-after-light.png)
|
| Dark |
![payments-products-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-before-dark.png)
|
![payments-products-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/payments-products-after-dark.png)
|

### Session Replays

Session replay page layout.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![session-replays-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-before-light.png)
|
![session-replays-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-after-light.png)
|
| Dark |
![session-replays-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-before-dark.png)
|
![session-replays-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/session-replays-after-dark.png)
|

### Sign-up Rules

Sign-up rules page surface.

| Theme | Before | After |
| --- | --- | --- |
| Light |
![sign-up-rules-before-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-before-light.png)
|
![sign-up-rules-after-light.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-after-light.png)
|
| Dark |
![sign-up-rules-before-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-before-dark.png)
|
![sign-up-rules-after-dark.png](https://gist.githubusercontent.com/Developing-Gamer/b0c1d3d072a71e30b65380f8b2cf53a1/raw/sign-up-rules-after-dark.png)
|


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added comprehensive account settings dashboard with profile
management, email and authentication settings, active sessions
monitoring, API key generation and management, payment methods,
notification preferences, and team creation/management.
* Introduced user profile image editing with circular cropping and
compression.
  * Added multi-factor authentication (MFA) setup via TOTP QR codes.
  * Enabled team-based API key management and team member invitations.

* **Design Improvements**
* Refined UI styling across analytics, forms, and dialogs for better
visual hierarchy.
  * Enhanced dark mode support throughout dashboard components.
  * Improved responsive layouts and spacing on dashboard pages.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-05 10:57:13 -07:00
Konstantin Wohlwend
c80b087316 Self-wrap TooltipProvider 2026-06-04 11:19:41 -07:00
Konstantin Wohlwend
d1d96fdcc4 Update light mode logo 2026-06-01 15:05:44 -07:00
BilalG1
609579abab
feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482)
Some checks failed
all-good: Did all the other checks pass? / all-good (push) Has been cancelled
Ensure Prisma migrations are in sync with the schema / check_prisma_migrations (22.x) (push) Has been cancelled
DB migration compat / Check if migrations changed (push) Has been cancelled
Docker Server Build and Push / Docker Build and Push Server (push) Has been cancelled
Docker Server Build and Run / docker (push) Has been cancelled
Runs E2E API Tests (Local Emulator) / E2E Tests (Local Emulator, Node ${{ matrix.node-version }}) (22.x) (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (mock, 22.x) (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (prod, 22.x) (push) Has been cancelled
Runs E2E API Tests with custom port prefix / build (22.x) (push) Has been cancelled
Runs E2E Fallback Tests / E2E Fallback Tests (Node ${{ matrix.node-version }}) (22.x) (push) Has been cancelled
Lint & build / lint_and_build (24) (push) Has been cancelled
TOC Generator / TOC Generator (push) Has been cancelled
DB migration compat / Back-compat — Current branch migrations with ${{ needs.check-migrations-changed.outputs.base_branch }} branch code (push) Has been cancelled
DB migration compat / Forward-compat — Current branch code with ${{ needs.check-migrations-changed.outputs.base_branch }} branch migrations (push) Has been cancelled
DB migration compat / No migration changes (skipped) (push) Has been cancelled
2026-05-29 15:21:59 -07:00
Konsti Wohlwend
0db13f412a
Fix SSO provider dialog closing when switching pill toggle tabs (#1515) 2026-05-28 17:37:19 -07:00
Armaan Jain
a27e4d9bb5
Small onboarding fixes (#1489)
<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/hexclave/stack-auth/blob/dev/CONTRIBUTING.md

-->

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Improves onboarding and analytics visuals. Adds clear Stripe setup
actions (Connect or Do Later) with safe redirects and precise
loading/disabled states, and fixes a stuck dashboard reload after
linking an existing project.

- **New Features**
- Payments onboarding: separate Connect/Do Later actions with per-button
loading and mutual disabling.
- US-only: “Do Later” creates a deferred Stripe account before finishing
onboarding.
- Secure redirect: enforce HTTPS on Connect and navigate via
window.location.href.
- Refresh Stripe account cache after `setupPayments()` to avoid stale
data on return.
- Analytics: smoother pie hover transitions, fading center label,
optional `showDateRange`; dashboard donut hides date range and adjusts
radii; revenue hover chart uses split bars for rounded tops and an avg
line.
- Tests cover deferred/unsupported payments setup and button loading
isolation.

- **Bug Fixes**
- After linking an existing config, use a full page navigation to the
project to prevent the dashboard from getting stuck on initial load.

<sup>Written for commit c80034ad1f.
Summary will update on new commits. <a
href="https://cubic.dev/pr/hexclave/stack-auth/pull/1489?utm_source=github">Review
in cubic</a></sup>

<!-- End of auto-generated description by cubic. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Option to defer payments setup during project onboarding;
connect/defer actions show targeted loading states.

* **Improvements**
* Linking existing projects now performs full navigation when
applicable.
* Charts: refined donut/pie sizing, smoother center fade animation,
optional date-range display, and improved color/stack rendering.
  * Payments setup now refreshes account info after setup.

* **Tests**
* Added tests covering payments deferral, connect flows, and UI/loading
behavior.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/hexclave/stack-auth/pull/1489?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-26 17:45:50 -07:00
Armaan Jain
e42ec65c88
Payments app design fixes (#1375)
<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

## Summary

This PR brings the Payments dashboard surfaces in line with the shared
design system: product creation, product-line / included-item dialogs,
auth-method toggles, payments empty states, and related layout polish.
Dialogs migrate from raw shadcn `Dialog` to `DesignDialog` with
consistent headers, footers, inputs, and selector dropdowns.

**Base:** `dev` → **Head:** `Payments-app-design-fixes`  
**Scope:** 31 files, ~+1.4k / −1.3k lines  
**Captured on:** local dev server (`internal` project), signed in as
`admin@example.com`

## Screenshots

Captured from `http://localhost:8101` (viewport: **1920×1200** standard,
**2560×1440** widescreen). Assets hosted in [this
gist](https://gist.github.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf).

> Red outlines on the **after** shots mark the new or changed UI
introduced by this PR.

### Create Product — payments form redesign

| | Before | After |
| --- | --- | --- |
| Light |
![payments-products-new-before-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-before-light.png)
|
![payments-products-new-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-after-light.png)
|
| Dark |
![payments-products-new-before-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-before-dark.png)
|
![payments-products-new-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-after-dark.png)
|

Widescreen:

| | Before | After |
| --- | --- | --- |
| Light |
![payments-products-new-before-light-wide](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-before-light-wide.png)
|
![payments-products-new-after-light-wide](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-after-light-wide.png)
|
| Dark |
![payments-products-new-before-dark-wide](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-before-dark-wide.png)
|
![payments-products-new-after-dark-wide](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-products-new-after-dark-wide.png)
|

### Product Lines onboarding — vertical centering fix

| | Before | After |
| --- | --- | --- |
| Light |
![payments-product-lines-before-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-product-lines-before-light.png)
|
![payments-product-lines-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-product-lines-after-light.png)
|
| Dark |
![payments-product-lines-before-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-product-lines-before-dark.png)
|
![payments-product-lines-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-product-lines-after-dark.png)
|

### Create Product Line dialog — `DesignDialog` migration

| | Before | After |
| --- | --- | --- |
| Light | *(legacy shadcn dialog on `dev` — open via Product Line →
Create new)* |
![dialog-create-product-line-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/dialog-create-product-line-after-light.png)
|
| Dark | |
![dialog-create-product-line-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/dialog-create-product-line-after-dark.png)
|

### Auth Methods — toggle row accessibility

| | Before | After |
| --- | --- | --- |
| Light |
![auth-methods-before-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/auth-methods-before-light.png)
|
![auth-methods-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/auth-methods-after-light.png)
|
| Dark |
![auth-methods-before-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/auth-methods-before-dark.png)
|
![auth-methods-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/auth-methods-after-dark.png)
|

### Other migrated surfaces (after only)

| Page | Light | Dark |
| --- | --- | --- |
| Payments settings |
![payments-settings-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-settings-after-light.png)
|
![payments-settings-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/payments-settings-after-dark.png)
|
| Sign-up rules |
![sign-up-rules-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/sign-up-rules-after-light.png)
|
![sign-up-rules-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/sign-up-rules-after-dark.png)
|
| Projects list (Create Project button) |
![projects-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/projects-after-light.png)
|
![projects-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/projects-after-dark.png)
|
| Playground / DesignDialog |
![playground-dialog-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/playground-dialog-after-light.png)
|
![playground-dialog-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/playground-dialog-after-dark.png)
|
| Included Item dialog |
![dialog-included-item-after-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/dialog-included-item-after-light.png)
|
![dialog-included-item-after-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/dialog-included-item-after-dark.png)
|

### Scroll behaviour — Sign-up Rules

| | Light | Dark |
| --- | --- | --- |
| Scroll |
![sign-up-rules-scroll-light](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/sign-up-rules-scroll-light.gif)
|
![sign-up-rules-scroll-dark](https://gist.githubusercontent.com/mantrakp04/ca3483d2b66b8e28f0872488df573ccf/raw/sign-up-rules-scroll-dark.gif)
|

## What's new

- **`DesignDialog`** extended with `customHeader`, `noBodyPadding`, and
section `className` hooks; Playground updated to showcase them.
- **Payments dialogs** (`CreateProductLineDialog`, `IncludedItemDialog`,
price edit, item dialog) migrated to design-system components.
- **Create Product** page uses `DesignButton`, `DesignInput`,
`DesignSelectorDropdown`, and refreshed header actions.
- **Auth Methods** toggle rows use semantic `<Label htmlFor>` instead of
click-capture divs.
- **Payments layout** empty-state card centers correctly; product-lines
onboarding slideshow vertically centers.
- **Backend** seed invariant for Growth product price; removed unused
import in product switch route.

## Notes for reviewers

- Dialog migrations preserve validation + async error handling
(`runAsynchronouslyWithAlert` where applicable).
- Included-item dialog uses a sentinel value for “Create new item” to
avoid colliding with real item IDs.
- `packages/stack` / `packages/js` are untouched; template +
dashboard-ui-components carry SDK-facing dialog changes.

## Test plan

- [x] Visual capture on `internal` project (`admin@example.com`) —
light/dark, standard + widescreen
- [ ] Create product flow: customer type → product line dropdown →
create line dialog
- [ ] Add included item dialog from create/edit product
- [ ] Auth Methods toggles (label click + switch)
- [ ] Payments product-lines onboarding slideshow at varied viewport
heights
- [ ] `pnpm typecheck` / `pnpm lint` / targeted E2E if API surface
changed

---------

Co-authored-by: nams1570 <amanganapathy@gmail.com>
Co-authored-by: mantrakp04 <mantrakp@gmail.com>
Co-authored-by: Mantra <87142457+mantrakp04@users.noreply.github.com>
2026-05-21 14:48:56 -07:00
Armaan Jain
055304d3fd
Onboarding app redesign (#1370)
# Onboarding app redesign

Rolls out a unified dashboard visual language centered on `DesignCard`
groupings, a new canonical `DesignDialog`, and an inline live-preview
pattern. Touches the project listing, project overview, auth methods,
design language, onboarding, and sign-up rules surfaces. Reusable
primitives (`DesignCard`, `DesignDialog`, `MethodToggleRow`) replace
one-off layouts, and the project card now leads with **total users +
30-day signups** instead of a weekly-users tile.

**Base:** `dev` → **Head:** `onboarding-app-redesign`

> Red outlines on the "after" shots highlight the UI that changed in
this PR. Empty outlines = layout/chrome change with no data delta.

---

## Flagship: Project listing (`/projects`)

Project cards swap the weekly-users widget for a `ProjectUsersMetric`
(total user count + 30-day signups sparkline). Hover lifts the card; the
metrics row is now part of the card body instead of a footer strip.

|        | Light | Dark |
|--------|-------|------|
| Before | ![before
light](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/projects-before-light.png)
| ![before
dark](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/projects-before-dark.png)
|
| After | ![after
light](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/projects-after-light.png)
| ![after
dark](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/projects-after-dark.png)
|

## Flagship: Auth methods (`/projects/[id]/auth-methods`)

Full restructure: the horizontal `SettingCard` strips are replaced by
stacked `DesignCard` sections (Sign-in methods · Sign-up policies · User
deletion), with a sticky **live sign-in preview** column on the right.
Provider rows become `MethodToggleRow`s with inline configure actions.

|        | Light | Dark |
|--------|-------|------|
| Before | ![before
light](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/auth-methods-before-light.png)
| ![before
dark](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/auth-methods-before-dark.png)
|
| After | ![after
light](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/auth-methods-after-light.png)
| ![after
dark](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/auth-methods-after-dark.png)
|

## Flagship: Project overview (`/projects/[id]`)

Line + donut charts migrate to the shared `AnalyticsChart` component.
Referrers list gains a max-height + scroll affordance so it no longer
pushes neighbouring tiles off-screen.

|        | Light | Dark |
|--------|-------|------|
| Before | ![before
light](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/overview-before-light.png)
| ![before
dark](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/overview-before-dark.png)
|
| After | ![after
light](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/overview-after-light.png)
| ![after
dark](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/overview-after-dark.png)
|

## Other migrated surfaces

| Surface | Before (dark) | After (dark) | What changed |
|---------|---------------|--------------|--------------|
| `/projects/[id]/onboarding` |
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/onboarding-before-dark.png)
|
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/onboarding-after-dark.png)
| Email-verification toggle adopts the new `MethodToggleRow` +
confirmation `DesignDialog` variant |
| `/projects/[id]/sign-up-rules` |
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/sign-up-rules-before-dark.png)
|
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/sign-up-rules-after-dark.png)
| Rule builder rewrapped in `DesignCard`/`DesignAlert`/`DesignButton`
primitives |
| `/projects/[id]/design-language` |
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/design-language-before-dark.png)
|
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/design-language-after-dark.png)
| Adds a `DesignDialog` showcase section so consumers can see the
canonical modal styling |
| `/playground` |
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/playground-before-dark.png)
|
![](https://gist.githubusercontent.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7/raw/playground-after-dark.png)
| New `dialog` playground entry exercising the size/variant/icon-chip
permutations |

Light-mode counterparts for the long-tail surfaces are in the [companion
gist](https://gist.github.com/mantrakp04/ff6b32969cb08510860e94be7d67dbf7).

---

## What's new

- **`DesignDialog`**
(`packages/dashboard-ui-components/src/components/dialog.tsx`) —
canonical modal with configurable size/variant, optional icon chip, and
split header/body/footer regions. Replaces ad-hoc `Dialog` +
`DialogContent` usage across the dashboard.
- **`MethodToggleRow`** — shared row primitive used by auth-methods and
onboarding for "thing with a toggle and an inline configure CTA".
- **`ProjectUsersMetric`** — total users + 30-day signups sparkline;
powers the new project card metric and reuses the
`projects-weekly-users` backend route renamed to `projects-metrics`.
- **`action-dialog`** gains `keepOpenOnOutsideInteraction` and
`contentClassName` props so variant chrome can ride along through the
existing helper.
- Backend: new internal `projects-metrics` route + test;
`seed-dummy-data.ts` updated to populate the new metric.

## Notes for reviewers

- Reusable primitives (`DesignCard`, `DesignDialog`, `MethodToggleRow`)
live in `packages/dashboard-ui-components` — please flag any inline
duplications you spot.
- The auth-methods live-preview only renders at `lg+`. Below that
breakpoint the page falls back to the stacked card layout.
- The OAuth provider config dialogs adopt the new pill toggle for
**Shared keys / Custom OAuth credentials**; the underlying form fields
are unchanged.

## Test plan

- [ ] `/projects` — verify the metric tile renders both empty-state and
populated (Demo Project has 584 users seeded)
- [ ] `/projects/[id]/auth-methods` — toggle each method on/off, confirm
live preview updates in real time
- [ ] `/projects/[id]/auth-methods` — open a provider dialog, switch
between Shared / Custom keys, verify form state preserved
- [ ] `/projects/[id]/onboarding` — toggle email verification, confirm
the confirmation dialog variant
- [ ] `/projects/[id]/sign-up-rules` — verify rule builder still saves
correctly under the new chrome
- [ ] Mobile/`md` breakpoint — auth-methods falls back to stacked
layout, no overflow
- [ ] Dark mode parity on every flagship surface

<sub>Visuals captured via local dev server (`localhost:8101`) on
`admin@example.com` seeded account. Red outlines mark new/changed UI on
the "after" pass.</sub>

---------

Co-authored-by: mantrakp04 <mantrakp@gmail.com>
Co-authored-by: Mantra <87142457+mantrakp04@users.noreply.github.com>
2026-05-20 13:10:22 -07:00
Armaan Jain
5dbfb1ebab
Auth app redesign (#1367)
<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a reusable DesignDialog modal system (sizes, variants,
header/footer/headerContent, trigger/close controls).
* Added a documented "roids" skill and pinned it in the skills registry.

* **Documentation**
* Expanded design guide with comprehensive dialog usage patterns,
examples, and props.

* **Improvements**
  * Playground now previews and generates dialog code interactively.
* Auth methods and sign-up rules UIs migrated to the new design system.
* Action dialogs can opt to ignore outside interactions and accept
custom content classes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---

## Summary

Two things bundled together:

1. **New `DesignDialog` primitive** in
`@stackframe/dashboard-ui-components` — the canonical glassmorphic
dashboard modal shell. Exposes configurable sizes (`sm`→`7xl`/`full`),
`glassmorphic` vs `plain` variant, optional icon / title / description /
footer / custom header slots, and a `DesignDialogClose` companion.
Replaces the ad-hoc dialog wrappers scattered across the dashboard.
2. **Auth-app pages migrated onto the design-components system** —
`auth-methods` and `sign-up-rules` are rebuilt on `DesignCard` /
`DesignAlert` / `DesignButton` / `DesignBadge` / `DesignInput` /
`DesignMenu` / `DesignSelectorDropdown` / `DesignDialog`. Live
OAuth-page preview frame, glassmorphic confirmation dialogs, and a
redesigned rule-builder all live behind these new shells.

The design-language catalog page and the `/playground` component
explorer were both extended with full dialog showcases so the new
primitive has a single discoverable home.

**Base:** `dev` → **Head:** `auth-app-redesign`
**Scope:** 11 files changed · +2553 / −1151 lines

---

## Screenshots — before and after

> Captured locally against `http://localhost:8101` at 1440×900 with a
fresh project (`Demo Project`) created via the sign-up + new-project
flow. Dev-only overlays (outdated-version banner, console toasts) are
hidden via injected CSS for clarity.

### Auth methods — `/projects/<id>/auth-methods`

The big page-client rewrite. Before was a flat list of toggleable rows
with a live preview pinned to the right. After is a sectioned layout —
`SIGN-IN METHODS` and `SSO PROVIDERS` get uppercase subheaders, each
method gets a `DesignBadge` icon + description ("Classic email +
password credentials.", "One-time codes delivered by email.",
"Phishing-resistant device-bound credentials."), and empty states (e.g.
SSO with no providers configured) become real call-outs instead of plain
rows.

| Before (`dev`) | After (this PR) |
| --- | --- |
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/before-auth-methods__light.png)
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-auth-methods__light.png)
|
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/before-auth-methods__dark.png)
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-auth-methods__dark.png)
|

### Sign-up rules — `/projects/<id>/sign-up-rules`

Full rule-builder rewrite (CEL ↔ visual tree round-trip kept intact,
just dressed in the new design system). Before's empty state was a flat
alert + plain "Default action" row. After uses `DesignCard` variants —
`NO RULES YET` with an inline "Add your first rule" CTA, an "If no rules
match → Allow sign-up" surface, and a dedicated `TEST RULES` card
linking the simulator.

| Before (`dev`) | After (this PR) |
| --- | --- |
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/before-sign-up-rules__light.png)
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-sign-up-rules__light.png)
|
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/before-sign-up-rules__dark.png)
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-sign-up-rules__dark.png)
|

### Component playground — `/playground`

A new **Dialog** entry was added to the component selector. The before
shots show `dev` — the selector only listed Button (and a handful of
other primitives) and had no Dialog playground at all. The after shots
show the new entry: a props panel for `shape` / `size` / `variant` /
`title` / `description` / `headerIcon` / `footer` / `topRightClose`,
plus an "Open confirmation" button that mounts the live `DesignDialog`.

#### Closed (props panel + code preview)

| Before (`dev` — no Dialog entry) | After (this PR) |
| --- | --- |
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/before-playground-dialog__light.png)
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-playground-dialog__light.png)
|
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/before-playground-dialog__dark.png)
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-playground-dialog__dark.png)
|

> The "before" shots default to the Button playground because the Dialog
entry doesn't exist on `dev` — that's the change.

#### Open (glassmorphic surface in action)

The dialog itself — only available after this PR, so no `dev`
equivalent.

| Light | Dark |
| --- | --- |
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-playground-dialog-open__light.png)
|
![](https://gist.githubusercontent.com/aadesh18/7789d1cf8622693a85f61cd7db91f5c2/raw/after-playground-dialog-open__dark.png)
|
## What changed

- **New** `packages/dashboard-ui-components/src/components/dialog.tsx` —
the `DesignDialog` primitive. Props shape: `size` × `variant` × optional
`icon` / `title` / `description` / `headerContent` / `customHeader` /
`footer` slots, plus `trigger`, `noBodyPadding`, `hideTopCloseButton`,
and per-section `*ClassName` escape hatches. Exports `DesignDialog`,
`DesignDialogClose`, plus the `DesignDialogSize` / `DesignDialogVariant`
/ `DesignDialogProps` types.
- **Exports** wired through
`packages/dashboard-ui-components/src/index.ts` so consumers import from
`@stackframe/dashboard-ui-components` or, by extension, the dashboard's
local `@/components/design-components` barrel.
- **Auth methods page**
(`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx`)
— full migration. Sign-in methods, OAuth provider list, dot-menu
actions, "Add disabled providers" search dialog, two confirmation
dialogs, sign-up policy block, user-deletion block. Old `Card` / `Input`
/ `Button` / `SettingCard` imports replaced with their design-component
counterparts. `providers.tsx` follows the same migration for the
per-provider config dialogs.
- **Sign-up rules page**
(`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx`)
— the big 1830-line rewrite. Rule builder, empty state,
conditional-group editor, and tester sheet all rebuilt on the new
primitives. CEL ↔ visual-tree conversion (`parseCelToVisualTree` /
`visualTreeToCel`) is unchanged.
- **Design-language catalog**
(`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx`)
— adds the Dialog section so the catalog reflects the new primitive.
- **Playground**
(`apps/dashboard/src/app/(main)/(outside-dashboard)/playground/page-client.tsx`)
— adds the Dialog entry with `Shape` / `Size` / `Variant` / `Title` /
`Description` / `Header Icon` / `Footer` / `Top-right close` controls
and live JSX generation.
- **Design guide** (`apps/dashboard/DESIGN-GUIDE.md`) — new "Dialogs"
section documenting when to reach for `DesignDialog` (default),
`DesignDrawer`, `ActionDialog`, or the raw `<Dialog>` primitives, plus
the canonical usage snippet.
- **Action dialog shim**
(`apps/dashboard/src/components/ui/action-dialog.tsx`) — small follow-on
edits so existing `ActionDialog` callers stay consistent with the new
look.

## Notes for reviewers

- **Start with**
`packages/dashboard-ui-components/src/components/dialog.tsx` — it's the
load-bearing piece. The two state machines worth eyeballing are the
`dialogSurfaceClasses` map (glassmorphic vs plain shells, including the
dark-mode ring/backdrop tweaks) and the header/body/footer composition
inside the main `DesignDialog` function.
- **Then** `sign-up-rules/page-client.tsx`. 1830 lines, but the diff is
mostly mechanical (Card→DesignCard, Button→DesignButton, etc.). The
interesting bits are the rule-row layout, the conditional-group editor,
and the simulator drawer — those received structural tweaks, not just
visual ones. The CEL serialization (`parseCelToVisualTree` /
`visualTreeToCel`) was deliberately left alone.
- **OAuth provider migration to non-pushable config** — a `// OAuth
client ID/secret are environment-level (not pushable)` comment was
removed from a couple of call-sites. Behaviour-equivalent (the call
already passes `pushable: false`), just trimmed because the new code is
cleaner. Flag if you want it kept.
- **Catalog routes are dashboard-internal**
(`/projects/<id>/design-language`, `/playground`) — exposed only in
dev/staging, not customer-facing. They exist so design changes have a
discoverable demo surface.
- **Live-preview frame on `auth-methods`** uses a real `<AuthPage>`
inside `BrowserFrame`, fed by the in-progress config. Verify your
changes still render correctly there if you touch `<AuthPage>` props.

## Test plan

- [ ] `/projects/<id>/auth-methods` — toggle each sign-in method; live
preview reflects the change; "Save changes" inline action works; "Add
SSO providers" dialog filters via the search input
- [ ] OAuth provider dot-menu — open the provider config dialog (now
`DesignDialog` glassmorphic), confirm the per-provider switches/inputs
save through the `useUpdateConfig` hook
- [ ] Sign-up confirmation dialogs — toggling "Allow new user sign-ups"
off and back on shows the new warning `DesignAlert`s inside the dialog
- [ ] `/projects/<id>/sign-up-rules` — add a rule, add a condition
group, run the tester sheet; CEL output unchanged vs `dev`
- [ ] `/projects/<id>/design-language` — Dialog showcase renders all
sizes/variants without overflow
- [ ] `/playground` → select **Dialog** — all prop combinations render;
generated code snippet matches the rendered component; "Open
confirmation" launches the glassmorphic shell
- [ ] Light + dark mode visual sanity across all four pages (screenshots
above are the canonical reference)

---------

Co-authored-by: Aadesh Kheria <kheriaaadesh@gmail.com>
2026-05-19 23:03:46 -07:00
Mantra
c808e23b7d
Data-grid overhaul + session-replays / team-payments dashboard surfaces (#1424)
## Summary

Refactors the dashboard data-grid into a smaller, URL-state-aware
primitive and lands several new dashboard surfaces around it: per-user
session replays, team-level analytics and payments, and pagination for
permission definitions. Also moves session replays out from under
`/analytics` to a top-level surface and adds a
`project_user.last_active_at` index that the new weekly-active metrics
depend on.

**Base:** `dev` → **Head:** `refactor/data-grid-and-dashboard-surfaces`
**Scope:** 91 files, +5,644 / −1,858. Assets in [this
gist](https://gist.github.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7).

## Screenshots

Captured from a local dev server (dashboard at `:8101`, dummy project
seeded with 26 users). Standard viewport **1920×1200**, widescreen
**2560×1440**.

### Users list — data-grid overhaul in context

| Light | Dark |
| --- | --- |
|
![users-list-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/users-list-light.png)
|
![users-list-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/users-list-dark.png)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![users-list-light-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/users-list-light-wide.png)
|
![users-list-dark-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/users-list-dark-wide.png)
|

### User detail — new session-replays card + weekly metrics

| Light | Dark |
| --- | --- |
|
![user-detail-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/user-detail-light.png)
|
![user-detail-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/user-detail-dark.png)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![user-detail-light-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/user-detail-light-wide.png)
|
![user-detail-dark-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/user-detail-dark-wide.png)
|

### Session replays — moved out of `/analytics`

| Light | Dark |
| --- | --- |
|
![session-replays-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/session-replays-light.png)
|
![session-replays-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/session-replays-dark.png)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![session-replays-light-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/session-replays-light-wide.png)
|
![session-replays-dark-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/session-replays-dark-wide.png)
|

### Project permissions — new pagination

| Light | Dark |
| --- | --- |
|
![project-permissions-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/project-permissions-light.png)
|
![project-permissions-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/project-permissions-dark.png)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![project-permissions-light-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/project-permissions-light-wide.png)
|
![project-permissions-dark-wide](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/project-permissions-dark-wide.png)
|

### Other migrated surfaces

| Page | Light | Dark |
| --- | --- | --- |
| Project picker |
![projects-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/projects-light.png)
|
![projects-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/projects-dark.png)
|
| Overview / setup |
![overview-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/overview-light.png)
|
![overview-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/overview-dark.png)
|
| Teams list |
![teams-list-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/teams-list-light.png)
|
![teams-list-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/teams-list-dark.png)
|
| Team permissions |
![team-permissions-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/team-permissions-light.png)
|
![team-permissions-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/team-permissions-dark.png)
|
| API keys |
![api-keys-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/api-keys-light.png)
|
![api-keys-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/api-keys-dark.png)
|

### Scroll behaviour — new data-grid on the users list

| Light | Dark |
| --- | --- |
|
![users-list-scroll-light](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/users-list-scroll-light.gif)
|
![users-list-scroll-dark](https://gist.githubusercontent.com/mantrakp04/01bf8db4c71ec7a119b73d6ee60717a7/raw/users-list-scroll-dark.gif)
|

## What's new

- **`packages/dashboard-ui-components/src/components/data-grid`** —
rewritten. Trimmed `data-grid.tsx` from ~1.7k LOC, split sizing logic
into `data-grid-sizing.ts`, added `use-url-state.ts` for URL-synced
state, and added `data-grid.test.tsx`.
- **Session replays** moved from `…/analytics/replays` to
`…/session-replays` (top-level surface). New `user-session-replays.tsx`
card on the user detail page; new internal `route.tsx` to feed it.
- **Teams** detail page gains `team-analytics.tsx` and
`team-payments.tsx`.
- **Permissions** — new shared `permission-definitions-pagination.ts`
consumed by both project and team permission CRUD routes.
- **Backend** — Prisma migration `add_project_user_last_active_at_idx` +
a `lastActiveAt` index that backs the new weekly-active metrics.
- **Polish** — `editable-input`, `inline-save-discard`, `settings.tsx`,
walkthrough steps, and several data-table components touched in line
with the data-grid rewrite.

## Notes for reviewers

- The data-grid rewrite changes the *shape* of state (now URL-synced),
not just internals. Consumers in
`apps/dashboard/src/components/data-table/*` were updated to match —
please scan those for any missed knobs.
- The `analytics/replays` → `session-replays` rename is git-tracked as
renames; diffs should be small in those files.
- New SDK surface in
`packages/template/src/lib/stack-app/session-replays/index.ts` and
additions in `admin-app-impl.ts` / `server-app-impl.ts` mean OpenAPI
specs (`docs-mintlify/openapi/{admin,client}.json`) regenerate; the diff
is mostly mechanical.

## Test plan

- [ ] `pnpm typecheck` clean
- [ ] `pnpm lint` clean
- [ ] Data-grid unit tests pass (`packages/dashboard-ui-components`)
- [ ] Manual: users list — column resize, sort, filter, paginate; URL
state reflects each change and survives reload
- [ ] Manual: user detail — session-replays card lists replays;
weekly-metrics card renders without `lastActiveAt` index migration
applied (i.e. on a fresh DB) and after applying it
- [ ] Manual: project + team permissions — pagination cursor advances
and stays consistent under search
- [ ] Manual: session-replays top-level page loads; old
`/analytics/replays/...` URL path is no longer expected to be linked
anywhere


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Session Replays app (embedded mode, search, sorting, share links)
  * Tabbed Team pages with Team Analytics and Team Payments dashboards
* Server-backed cursor pagination, debounced search, and infinite-scroll
for teams/users/permissions

* **UX**
* Permission and member tables refresh after edits; permission creation
triggers table refresh
  * Users list supports sorting by last-active

* **Performance**
  * Index added to speed ProjectUser last-active queries

* **Documentation**
  * API/SDK docs updated for pagination and new query params
* Contributor guidance: explicit git-safety rules added (no destructive
git ops without consent)

* **Tests**
  * Added e2e tests for pagination and filtering on list endpoints
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 14:16:47 -07:00
Madison
185bddec9e
[Dashboard] Redefine the user page with tabs and updated UI (#1351)
<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Tabbed user profile with Activity (30-day analytics, KPIs, daily
chart, top lists, recent events), Payments (transactions, subscriptions,
product/item balances) and an activity heatmap sidebar.
* New internal user-activity API and admin-facing activity hook; admin
API client can fetch per-user activity.

* **UI/UX Improvements**
* Unified menus, cards and tables; inline editable user details with
accept/revert; metadata editor validates JSON; country-code input has
draft editing; tabs support optional icons.

* **API**
* Transactions endpoint and admin transaction queries now support
optional customer-scoped filtering.

* **Tests**
  * End-to-end coverage for the user-activity endpoint.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<img width="1326" height="752" alt="image"
src="https://github.com/user-attachments/assets/97c04dca-db59-4357-98b1-8eae5a7a3673"
/>

<img width="1142" height="251" alt="image"
src="https://github.com/user-attachments/assets/e1aa44fc-0d7e-436d-90a5-c7cb15155e24"
/>

<img width="1170" height="1125" alt="image"
src="https://github.com/user-attachments/assets/bf6659fd-a9b5-4ae6-a13d-dab9956ad650"
/>
2026-05-05 17:09:09 -05:00
Mantra
65d87a4836
Dashboard: DataGrid refactor + layout (stacked on overview-revamp) (#1338)
Some checks failed
all-good: Did all the other checks pass? / all-good (push) Has been cancelled
Ensure Prisma migrations are in sync with the schema / check_prisma_migrations (22.x) (push) Has been cancelled
DB migration compat / Check if migrations changed (push) Has been cancelled
Docker Server Build and Push / Docker Build and Push Server (push) Has been cancelled
Docker Server Build and Run / docker (push) Has been cancelled
Runs E2E API Tests (Local Emulator) / E2E Tests (Local Emulator, Node ${{ matrix.node-version }}) (22.x) (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (mock, 22.x) (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (prod, 22.x) (push) Has been cancelled
Runs E2E API Tests with custom port prefix / build (22.x) (push) Has been cancelled
Runs E2E Fallback Tests / E2E Fallback Tests (Node ${{ matrix.node-version }}) (22.x) (push) Has been cancelled
Lint & build / lint_and_build (24) (push) Has been cancelled
TOC Generator / TOC Generator (push) Has been cancelled
DB migration compat / Back-compat — Current branch migrations with ${{ needs.check-migrations-changed.outputs.base_branch }} branch code (push) Has been cancelled
DB migration compat / Forward-compat — Current branch code with ${{ needs.check-migrations-changed.outputs.base_branch }} branch migrations (push) Has been cancelled
DB migration compat / No migration changes (skipped) (push) Has been cancelled
## Summary

Stacked on `overview-revamp` (now rebased against `dev`). Introduces a
first-class `DataGrid` component in
`@stackframe/dashboard-ui-components`, migrates every dashboard table
off the legacy `DesignDataTable` / hand-rolled `<Table>` pattern to it,
and ships a matching dashboard design guide.

Since the last writeup the `DataGrid` runtime has been substantially
rewritten: the virtualizer now supports `rowHeight="auto"` with
`estimatedRowHeight`, every column can opt into `cellOverflow: "wrap"`,
the toolbar + header stick under a configurable `stickyTop`, and the
seeded dummy data has been fleshed out so the migrated surfaces render
with realistic density. The AI-analytics prompt was also extended with
full schema docs for the auth / team / email / payments tables so
natural-language queries produce better SQL.

**Base:** `dev` → **Head:** `ui-fixes-minor`
**Scope:** 39 files, ~+6.5k / -2.4k

## Screenshots

Captured against the seeded Demo Project on the local dashboard
(`admin@example.com` via mock GitHub OAuth). Viewport: **1920×1200**
(standard) and **2560×1440** (widescreen). Assets hosted in [this
gist](https://gist.github.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9).

### Overview — revamped metrics + line chart

| Light | Dark |
| --- | --- |
|
![overview-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/overview-light.jpg)
|
![overview-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/overview-dark.jpg)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![overview-wide-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/overview-wide-light.jpg)
|
![overview-wide-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/overview-wide-dark.jpg)
|

### Users — DataGrid with seeded rows

| Light | Dark |
| --- | --- |
|
![users-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/users-light.jpg)
|
![users-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/users-dark.jpg)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![users-wide-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/users-wide-light.jpg)
|
![users-wide-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/users-wide-dark.jpg)
|

### Transactions — new DataGridToolbar + sticky chrome

| Light | Dark |
| --- | --- |
|
![transactions-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/transactions-light.jpg)
|
![transactions-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/transactions-dark.jpg)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![transactions-wide-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/transactions-wide-light.jpg)
|
![transactions-wide-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/transactions-wide-dark.jpg)
|

### Teams

| Light | Dark |
| --- | --- |
|
![teams-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/teams-light.jpg)
|
![teams-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/teams-dark.jpg)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![teams-wide-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/teams-wide-light.jpg)
|
![teams-wide-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/teams-wide-dark.jpg)
|

### Email Outbox

| Light | Dark |
| --- | --- |
|
![email-outbox-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-outbox-light.jpg)
|
![email-outbox-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-outbox-dark.jpg)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![email-outbox-wide-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-outbox-wide-light.jpg)
|
![email-outbox-wide-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-outbox-wide-dark.jpg)
|

### Payments — Customers

| Light | Dark |
| --- | --- |
|
![payments-customers-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/payments-customers-light.jpg)
|
![payments-customers-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/payments-customers-dark.jpg)
|

Widescreen:

| Light | Dark |
| --- | --- |
|
![payments-customers-wide-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/payments-customers-wide-light.jpg)
|
![payments-customers-wide-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/payments-customers-wide-dark.jpg)
|

### Sticky behaviour — scrolled views

Grids scrolled down ~600px. The page header is still pinned, and the
`DataGrid` toolbar + column header row stay put under it (backdrop-blur
+ `stickyTop` offset) while the virtualized body rows scroll past.
Compare the scrolled view against the top-of-page view above.

| Page | Light | Dark |
| --- | --- | --- |
| Users |
![users-light-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/users-light-scrolled.jpg)
|
![users-dark-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/users-dark-scrolled.jpg)
|
| Teams |
![teams-light-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/teams-light-scrolled.jpg)
|
![teams-dark-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/teams-dark-scrolled.jpg)
|
| Transactions |
![transactions-light-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/transactions-light-scrolled.jpg)
|
![transactions-dark-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/transactions-dark-scrolled.jpg)
|
| Payments Customers |
![payments-customers-light-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/payments-customers-light-scrolled.jpg)
|
![payments-customers-dark-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/payments-customers-dark-scrolled.jpg)
|
| Email Outbox |
![email-outbox-light-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-outbox-light-scrolled.jpg)
|
![email-outbox-dark-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-outbox-dark-scrolled.jpg)
|
| Analytics Tables |
![analytics-tables-light-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/analytics-tables-light-scrolled.jpg)
|
![analytics-tables-dark-scrolled](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/analytics-tables-dark-scrolled.jpg)
|

### Other migrated surfaces

| Page | Light | Dark |
| --- | --- | --- |
| Analytics Tables |
![analytics-tables-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/analytics-tables-light.jpg)
|
![analytics-tables-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/analytics-tables-dark.jpg)
|
| Emails |
![emails-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/emails-light.jpg)
|
![emails-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/emails-dark.jpg)
|
| Email Sent |
![email-sent-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-sent-light.jpg)
|
![email-sent-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/email-sent-dark.jpg)
|
| Domains |
![domains-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/domains-light.jpg)
|
![domains-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/domains-dark.jpg)
|
| Webhooks |
![webhooks-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/webhooks-light.jpg)
|
![webhooks-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/webhooks-dark.jpg)
|
| External DB Sync |
![external-db-sync-light](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/external-db-sync-light.jpg)
|
![external-db-sync-dark](https://gist.githubusercontent.com/mantrakp04/2fe05ddbb2d2d7cd2d237027c909c1b9/raw/external-db-sync-dark.jpg)
|

## What's new

### `DataGrid` in `@stackframe/dashboard-ui-components`

A new, fully-typed, fully-controlled grid component under
`packages/dashboard-ui-components/src/components/data-grid/`. Single
source of truth for tabular UI across the dashboard.

Package files:
- `data-grid.tsx` — main grid renderer (virtualized rows, sticky toolbar
+ header)
- `data-grid-toolbar.tsx` — built-in toolbar (search, columns, density,
export)
- `data-grid-sizing.ts` — column width / flex / min-width resolution
- `state.ts` — state helpers (`createDefaultDataGridState`, sort /
select / paginate utilities, `exportToCsv`, date formatters)
- `strings.ts` — i18n string table + `resolveDataGridStrings`
- `types.ts` — public types (`DataGridColumnDef`, `DataGridProps`,
`DataGridState`, `DataGridDataSource`, etc.)
- `use-data-source.ts` — `useDataSource` hook with `client` / `server` /
`infinite` modes
- `index.ts` — package entrypoint

Features:
- Controlled state (`state` + `onChange`) covering sorting, pagination,
column visibility, column widths, column pinning, selection,
date-display mode, and quick search.
- Column definitions with `string` / `number` / `date` / `dateTime` /
`boolean` / `singleSelect` / `custom` types, custom `renderCell`, custom
sort comparators, per-column `parseValue` / `dateFormat`, pinning,
align, flex / min / max width.
- **Cell overflow control** — new `cellOverflow: "truncate" | "wrap"`
per column. `"wrap"` + `rowHeight="auto"` lets rows grow to fit
multi-line content.
- **Dynamic row heights** — `rowHeight` now accepts `"auto"` with an
`estimatedRowHeight` hint for the virtualizer, eliminating
scroll-position jank while rows are still being measured.
- **Sticky chrome with `stickyTop`** — the toolbar and header stick
under a caller-provided offset (matching the page header height) with a
proper blur backdrop. See the _Sticky behaviour — scrolled views_
section above for the visual.
- Client-side sort + quick-search + pagination via `useDataSource` —
consumer never pre-sorts / paginates.
- Server-side and async-generator data sources for streaming / cursor
pagination.
- Paginated and infinite-scroll UI modes.
- CSV export + clipboard copy.
- Row single / multi selection with shift-range anchor.
- Row + cell click / double-click callbacks.
- Pluggable toolbar / footer / empty / loading states and i18n strings.

### Dashboard design guide

New `apps/dashboard/DESIGN-GUIDE.md`: prescriptive, AI-readable source
of truth for dashboard UI. Documents when to use each
`design-components` primitive, the `DataGrid` canonical pattern, color /
typography / spacing / motion rules, route-specific guidance, and the
migration priority. Now also documents the new `cellOverflow` and
dynamic-`rowHeight` patterns, and marks `DesignDataTable` as deprecated
in favor of `DataGrid` + `useDataSource` + `createDefaultDataGridState`.

### Overview page revamp


`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx`
— line chart rewritten on top of the shared `AnalyticsChart` /
`DonutChartDisplay` primitives, feeding the revamped Overview.

### Data-table migrations

Every shared table under `apps/dashboard/src/components/data-table/` has
been rewritten on top of `DataGrid`:

- `api-key-table.tsx`
- `payment-product-table.tsx`
- `permission-table.tsx`
- `team-member-search-table.tsx`
- `team-member-table.tsx`
- `team-search-table.tsx`
- `team-table.tsx`
- `transaction-table.tsx` — now also wires in `DataGridToolbar` with
search / column visibility
- `user-search-picker.tsx`
- `user-table.tsx` — extracted `USER_TABLE_COLUMNS` for readability /
reuse

### Page adoption

Page-level tables migrated to `DataGrid` (or the new `useDataSource` +
`createDefaultDataGridState` pattern):

- `(overview)/line-chart.tsx`
- `analytics/tables/query-data-grid.tsx` (now with sticky header)
- `domains/page-client.tsx`
- `email-drafts/[draftId]/page-client.tsx`
- `email-outbox/page-client.tsx` (with `DataGridToolbar`)
- `email-sent/page-client.tsx`, `grouped-email-table.tsx`,
`sent-emails-view.tsx`
- `emails/page-client.tsx`
- `external-db-sync/page-client.tsx`
- `payments/layout.tsx`, `payments/customers/page-client.tsx`,
`payments/products/[productId]/page-client.tsx`
- `users/[userId]/page-client.tsx`
- `webhooks/page-client.tsx`, `webhooks/[endpointId]/page-client.tsx`
- `design-language/page-client.tsx`,
`design-language/realistic-demo/page-client.tsx`
- `playground/page-client.tsx`

### Backend & supporting changes

- `apps/backend/src/lib/ai/prompts.ts` — extends the AI-analytics prompt
with detailed schema docs for `contact_channels`, `teams`,
`team_member_profiles`, `team_permissions`, `team_invitations`,
`email_outboxes`, `project_permissions`, `notification_preferences`,
`refresh_tokens`, and `connected_accounts`, so natural-language queries
have richer context to compile against.
- `apps/backend/src/lib/seed-dummy-data.ts` — additional OAuth providers
on seed users, improving dummy-data coverage for the migrated tables
(visible on the Users grid).
- `apps/dashboard/src/app/globals.css` — adds `--data-grid-sticky-top`
token used to derive the grid's sticky offset under the page header.
- `packages/template/src/dev-tool/dev-tool-core.ts` — persist the
"closed" state when the user closes the dev-tool panel so it doesn't
reopen on next load.

## Notes for reviewers

- Rebased onto latest `dev`; conflict in `api-key-table.tsx` resolved by
keeping the `DataGrid` implementation (consistent with the other
migrated tables).
- `DesignDataTable` is still in the codebase but marked deprecated in
the design guide — new code must use `DataGrid`.
- `DataGrid` is fully controlled: consumers must pass state + onChange,
must feed `rows` from `useDataSource` (never raw arrays), and must
define columns outside the component or via `useMemo`. The guide's §4.12
spells this out.
- `rowHeight="auto"` is opt-in; the default fixed-height virtualization
path is unchanged and remains the fast path for dense, single-line grids
(users, transactions, etc.).
- Screenshots are JPEG this round — the local capture tooling's PNG path
was producing blank frames, so the new set is `.jpg` end-to-end. Same
viewports, same seeded project.

## Test plan

- [ ] `pnpm lint` passes
- [ ] `pnpm typecheck` passes
- [ ] Load the dashboard and verify every migrated surface renders,
sorts, searches, paginates, and handles row-click navigation:
  - [ ] Overview (line chart + donut metrics)
- [ ] Users list + user detail (teams, sessions, permissions, API keys)
  - [ ] Teams list + team detail (members, permissions)
  - [ ] Domains
  - [ ] Emails, email-sent, email-outbox, email-drafts
  - [ ] Webhooks list + endpoint detail
  - [ ] Payments customers, product detail, transactions (new toolbar)
  - [ ] External DB sync
  - [ ] Analytics query table (sticky header)
- [ ] Verify infinite-scroll surfaces (domains, etc.) load additional
rows on scroll
- [ ] Verify sticky header stays below the page header in light and dark
themes
- [ ] Verify CSV export produces correct output on a representative
table
- [ ] Verify column resize, visibility toggle, and sort work across
themes
- [ ] Verify `cellOverflow: "wrap"` rows grow to fit when
`rowHeight="auto"` and clip when `rowHeight` is numeric
- [ ] Spot-check AI analytics queries against the new schema context
(contact_channels, teams, email_outboxes, …)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Unified table components across dashboard with improved infinite
pagination and quick search.

* **Improvements**
* Enhanced table performance with sticky headers and better row height
handling.
* Improved sorting, filtering, and data loading with consistent state
management.
  * Better visual consistency across all data grids and table layouts.

* **UI/Styling**
* Refined table styling for better text truncation and content wrapping.
  * Optimized layout spacing and alignment across dashboard tables.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Developing-Gamer <maxcodes11110@gmail.com>
Co-authored-by: Armaan Jain <84474476+Developing-Gamer@users.noreply.github.com>
Co-authored-by: Konstantin Wohlwend <n2d4xc@gmail.com>
2026-04-27 13:50:24 -07:00
Armaan Jain
94dd22c1c5
Overview revamp (#1238) 2026-04-15 09:36:00 -07:00
Konstantin Wohlwend
a6e9ff6a88 Disable blast effect with reduced motion 2026-04-06 21:54:42 -07:00
aadesh18
8267ebce35
Custom dashboards and unified ai no playground (#1243)
This PR implements unified AI endpoint and custom dashboards. 

**Unified AI Endpoint**
We now use a single endpoint throughout the codebase that makes the call
to openrouter. Specifically, email drafts, email templates, email
themes, wysiwyg, cmd centre ai search and docs ai, all use this unified
ai endpoint. All the tools are defined in the backend, all the prompts
exist in the backend.

How to review this PR for unified ai endpoint:

This PR will be easier to review if we look at the different folders
that were affected.

under packages - We added streaming functionality, and made renaming
changes

under docs - there are three files that have changed
package.json - we updated the package (we were previously using a very
old version of the package)
route.ts - we changed the call from a direct call to openrouter to the
unified ai endpoint
ai-chat.tsx - because of updating the package, we had to make changes to
adapt to the latest versions of the package

under backend

route.ts - the main unified ai endpoint. this endpoint uses various
support files
forward.ts - this is the forward to production functionality
models.ts - consists of the models, and the rules for selecting those
models
prompts.ts - consists of the base prompt + specific system prompts
depending upon the usage
schema.ts
every single file under ai/tools folder - which as the name suggests,
consists of the implementations of the different tools that can be
provided to the llm
route-handlers - added support for streaming to SmartRoute and response
under dashboard

ai-search/route.ts - refactored the file to use unified ai endpoint
chat-adapters.ts - refactored the file to use unified ai endpoint and
created extra checks for the ai generated code

**Custom Dashboards**
We let the user write their query in english. We then use AI to create
dashboards that are interactive, live and savable. This PR includes a
new package called dashboard-ui-components. This package has components
that are used in the dashboard and more importantly, these components
are being imported from esm in the ai generated code for custom
dashboards. We also change the bar at the top for the products pages.

How to review this PR:

Review the new package (package/dashboard-ui-components), the setup and
the files inside it.
Review the schema changes in stack-shared/src
Review the changes in dashboard. The following changes have been made
Updated the design-components folder since we moved the dashboard
components to the new package
Updated imports for these components accordingly
Updated the title bar of the product pages
Created the files for custom dashboards under the dashboards folder and
components under commands/create-dashboard
Created a script under dashboard/scripts that generates the file with
type definitions that would go to the llm
Review the backend
Started using unified ai endpoint

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added custom dashboards feature allowing users to create and manage
personalized dashboards with AI assistance.
* Integrated AI-assisted dashboard code generation with visual preview
and editing capabilities.
* Introduced new AI query endpoints supporting stream and generate modes
with configurable model quality/speed settings.

* **Improvements**
* Reorganized UI components into a dedicated component library package
for better code reuse.
* Enhanced chat architecture with improved message handling and tool
integration.
* Updated AI provider integration with improved configuration
management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
Co-authored-by: Bilal Godil <bg2002@gmail.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-03-13 20:24:40 +00:00