37 Commits

Author	SHA1	Message	Date
github-actions[bot]	6a0ded1340	chore: update package versions	2026-05-23 16:45:36 +00:00
github-actions[bot]	01948e2313	chore: update package versions	2026-05-23 03:30:16 +00:00
github-actions[bot]	62aa8616d5	chore: update package versions	2026-05-23 03:25:52 +00:00
github-actions[bot]	70999df64e	chore: update package versions	2026-05-23 01:02:03 +00:00
github-actions[bot]	9355c8665c	chore: update package versions	2026-05-22 23:02:49 +00:00
github-actions[bot]	cd29811456	chore: update package versions	2026-05-22 22:58:20 +00:00
github-actions[bot]	0c6e135c30	chore: update package versions	2026-05-22 01:35:39 +00:00
github-actions[bot]	d12968eb3d	chore: update package versions	2026-05-22 00:46:34 +00:00
github-actions[bot]	03e7b61308	chore: update package versions	2026-05-21 23:29:36 +00:00
Konstantin Wohlwend	bf8d0ece28	chore: update package versions	2026-05-21 16:23:12 -07:00
Konstantin Wohlwend	4ff24dea9b	chore: update package versions	2026-05-21 14:54:23 -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 |  |  | | Dark |  |  | Widescreen: | | Before | After | | --- | --- | --- | | Light |  |  | | Dark |  |  | ### Product Lines onboarding — vertical centering fix | | Before | After | | --- | --- | --- | | Light |  |  | | Dark |  |  | ### Create Product Line dialog — `DesignDialog` migration | | Before | After | | --- | --- | --- | | Light | *(legacy shadcn dialog on `dev` — open via Product Line → Create new)* |  | | Dark | |  | ### Auth Methods — toggle row accessibility | | Before | After | | --- | --- | --- | | Light |  |  | | Dark |  |  | ### Other migrated surfaces (after only) | Page | Light | Dark | | --- | --- | --- | | Payments settings |  |  | | Sign-up rules |  |  | | Projects list (Create Project button) |  |  | | Playground / DesignDialog |  |  | | Included Item dialog |  |  | ### Scroll behaviour — Sign-up Rules | | Light | Dark | | --- | --- | --- | | Scroll |  |  | ## 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 |  |  | | After |  |  | ## 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 |  |  | | After |  |  | ## 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 |  |  | | After |  |  | ## Other migrated surfaces | Surface | Before (dark) | After (dark) | What changed | |---------|---------------|--------------|--------------| | `/projects/[id]/onboarding` |  |  | Email-verification toggle adopts the new `MethodToggleRow` + confirmation `DesignDialog` variant | | `/projects/[id]/sign-up-rules` |  |  | Rule builder rewrapped in `DesignCard`/`DesignAlert`/`DesignButton` primitives | | `/projects/[id]/design-language` |  |  | Adds a `DesignDialog` showcase section so consumers can see the canonical modal styling | | `/playground` |  |  | 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
Konstantin Wohlwend	90421431ee	chore: update package versions	2026-05-20 11:58:44 -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) | | --- | --- | |  |  | |  |  | ### 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) | | --- | --- | |  |  | |  |  | ### 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) | | --- | --- | |  |  | |  |  | > 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 | | --- | --- | |  |  | ## 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
Konstantin Wohlwend	48acb8c640	chore: update package versions	2026-05-19 16:22:10 -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 | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### User detail — new session-replays card + weekly metrics | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Session replays — moved out of `/analytics` | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Project permissions — new pagination | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Other migrated surfaces | Page | Light | Dark | | --- | --- | --- | | Project picker |  |  | | Overview / setup |  |  | | Teams list |  |  | | Team permissions |  |  | | API keys |  |  | ### Scroll behaviour — new data-grid on the users list | Light | Dark | | --- | --- | |  |  | ## 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
Konstantin Wohlwend	80a26ca15d	chore: update package versions	2026-05-11 10:10:47 -07:00
Konstantin Wohlwend	5ccd8dfd38	Update GitHub URL	2026-05-06 15:17:01 -07:00
Konstantin Wohlwend	440c18c894	chore: update package versions	2026-05-06 11:43:03 -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
Konstantin Wohlwend	0ab2654051	chore: update package versions	2026-05-04 15:33:33 -07:00
Mantra	65d87a4836	Dashboard: DataGrid refactor + layout (stacked on overview-revamp) (#1338) ... ## 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 | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Users — DataGrid with seeded rows | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Transactions — new DataGridToolbar + sticky chrome | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Teams | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Email Outbox | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### Payments — Customers | Light | Dark | | --- | --- | |  |  | Widescreen: | Light | Dark | | --- | --- | |  |  | ### 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 |  |  | | Teams |  |  | | Transactions |  |  | | Payments Customers |  |  | | Email Outbox |  |  | | Analytics Tables |  |  | ### Other migrated surfaces | Page | Light | Dark | | --- | --- | --- | | Analytics Tables |  |  | | Emails |  |  | | Email Sent |  |  | | Domains |  |  | | Webhooks |  |  | | External DB Sync |  |  | ## 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
Konstantin Wohlwend	3ea8052d35	chore: update package versions	2026-04-20 19:06:56 -07:00
Konstantin Wohlwend	91fbf63f7f	chore: update package versions	2026-04-18 14:20:39 -07:00
Armaan Jain	94dd22c1c5	Overview revamp (#1238)	2026-04-15 09:36:00 -07:00
Konstantin Wohlwend	b68710e98e	chore: update package versions	2026-04-14 18:06:36 -07:00
Konstantin Wohlwend	f78b60bba2	chore: update package versions	2026-04-13 19:29:35 -07:00
Konstantin Wohlwend	7fb660649d	chore: update package versions	2026-04-13 11:31:28 -07:00
Konstantin Wohlwend	27cd8bf56b	chore: update package versions	2026-04-09 13:36:23 -07:00
Konstantin Wohlwend	a6e9ff6a88	Disable blast effect with reduced motion	2026-04-06 21:54:42 -07:00
Konstantin Wohlwend	300970c924	chore: update package versions	2026-03-31 10:54:12 -07:00
Konstantin Wohlwend	5616b0054b	chore: update package versions	2026-03-30 12:26:13 -07:00
Konstantin Wohlwend	a993ec0780	chore: update package versions	2026-03-25 16:44:42 -07:00
Konstantin Wohlwend	0993f151b1	chore: update package versions	2026-03-13 13:53:08 -07:00
Konstantin Wohlwend	e6131ca776	chore: update package versions	2026-03-13 13:36:22 -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