4 Commits

Author	SHA1	Message	Date
BilalG1	57ff5d3ce9	feat(hexclave): PR 2 — visible rebrand (Hexclave brand goes public) (#1481) ... ## Summary **Stacked on [#1475](https://github.com/hexclave/stack-auth/pull/1475)** (`cl/hexclave-pr1`, the invisible compatibility layer). Diff vs that base = the actual PR 2 code. This is **PR 2 of the Stack Auth → Hexclave rebrand: the visible flip**. Old wire identifiers (cookies, request/response headers, Bearer prefix, JWT issuers, MCP tool name) keep working indefinitely via PR 1's dual-accept. This PR flips every user-visible surface — package names taught in docs, SDK class names in code examples, dashboard setup snippets, page titles, error messages, email content, CLI binary, default base URLs, GitHub repo slug, contributor guidance — to the Hexclave brand. See [`RENAME-TO-HEXCLAVE.md`](./RENAME-TO-HEXCLAVE.md) → *"PR 2: Rebrand to Hexclave (visible)"* for the full per-work-area spec. ## What's implemented (per the plan's PR 2 scope) - **SDK base URLs** flipped: `defaultBaseUrl` and `defaultAnalyticsBaseUrl` in [common.ts](packages/template/src/lib/stack-app/apps/implementations/common.ts:127) → `https://api.hexclave.com` / `https://r.hexclave.com`. PR 1's [`getHardcodedFallbackUrls`](packages/stack-shared/src/utils/urls.tsx:199) table now keys on the Hexclave domain. - **Domain inventory sweep** (16 subdomains from the plan): every `api/app/docs/discord/demo/mcp/skill/feedback/test/preview/r/api2/api.staging/idp-jwk-audience/built-with.stack-auth.com` reference in production code, docs-mintlify, examples, READMEs, and contributor guidance flipped to `*.hexclave.com`. Carve-outs: PR 1's intentional JWT issuer dual-accept table in [tokens.tsx](apps/backend/src/lib/tokens.tsx), the legacy `./docs/` folder, the `unified-docs-widget` allowlist (deliberately accepts both during DNS transition), and `url-targets.ts` hosted-component default (baked into existing customer deploys). - **`@deprecated` JSDoc** on every `Stack*` public export ([packages/template/src/lib/stack-app/index.ts](packages/template/src/lib/stack-app/index.ts) + [packages/template/src/index.ts](packages/template/src/index.ts)) — `StackClientApp`, `StackServerApp`, `StackAdminApp` + every constructor/options/JSON type, `StackHandler`, `StackProvider`, `StackTheme`, `useStackApp`, `defineStackConfig`, `StackConfig`. Hexclave\* aliases are now canonical. - **Runtime `console.warn`** ([packages/template/src/internal/deprecation-warning.ts](packages/template/src/internal/deprecation-warning.ts)) — once-per-process when the SDK is loaded from a `@stackframe/*` artifact. Detection uses the existing `STACK_COMPILE_TIME_CLIENT_PACKAGE_VERSION_SENTINEL` (rewritten at build time to e.g. `js @stackframe/stack@2.8.92` or `js @hexclave/next@1.0.0`); `@hexclave/*` mirror artifacts short-circuit the warning. - **Tier 3 data migration**: new idempotent SQL migration [`20260523000000_rename_internal_project_to_hexclave`](apps/backend/prisma/migrations/20260523000000_rename_internal_project_to_hexclave/migration.sql) — updates the internal Project `displayName` 'Stack Dashboard' → 'Hexclave Dashboard' and `description` only if both still hold the pre-rebrand defaults. Operator-renamed projects untouched, missing row no-ops, re-runs are no-ops. [`seed.ts`](apps/backend/prisma/seed.ts:87) default flipped. `getSharedEmailConfig("Stack Auth")` → `("Hexclave")`. - **Tier 4 brand strings** (mechanical sweep, ~340 files): - Page + OpenAPI titles (Hexclave API / Dashboard / REST API / Webhooks API / Documentation). OpenAPI `info.description` documents `X-Hexclave-*` headers as canonical with compat note on `X-Stack-*`. - `HexclaveAssertionError` message text ([errors.tsx:71](packages/stack-shared/src/utils/errors.tsx:71)) — "an error in Stack." → "an error in Hexclave." - Known-error message templates ([known-errors.tsx](packages/stack-shared/src/known-errors.tsx)) flipped to lead with `x-hexclave-*` + the new `docs.hexclave.com` URL; legacy `x-stack-*` mentioned as compat aliases. **25 e2e test files updated in lockstep**. - Email content: failed-emails-digest body, sendTestEmail recipient (now `sent-with-hexclave.com`), test-email-recipient default. - `CHANGELOG.md` title → "Hexclave Changelog". - `AGENTS.md` env var convention: new vars prefix `HEXCLAVE_` / `NEXT_PUBLIC_HEXCLAVE_` for Category A/B; legacy `STACK_*` explicitly noted as accepted via PR 1's dual-read. - **CLI / init wizard**: - Every dashboard setup snippet, init-stack template, and docs-mintlify page teaches `npx @hexclave/cli@latest init` (was `@stackframe/stack-cli`). [setup-page.tsx](apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx) + [link-existing-onboarding](apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/link-existing-onboarding.tsx). - [init-stack](packages/init-stack/src/index.ts:634) `STACK_*_INSTALL_PACKAGE_NAME_OVERRIDE` defaults flipped to `@hexclave/*`. - Generated `stack/client.ts` / `stack/server.ts` import from `@hexclave/next` and reference `HexclaveClientApp` / `HexclaveServerApp`. - Internal `StackAuthKeys` dashboard component renamed to `HexclaveKeys`. - **docs-mintlify rewrite** (legacy `./docs/` intentionally untouched per scoping decision): - **78 MDX files swept**. `@stackframe/{react,stack,js,tanstack-start,...}` → `@hexclave/{react,stack,js,...}` in install snippets and code blocks; `Stack*` SDK class names → `Hexclave*` in all code examples; 'Stack Auth' brand phrase → 'Hexclave'. - `openapi/{server,admin,client,webhooks}.json` titles → 'Hexclave REST API' / 'Hexclave Webhooks API'. - **Generators flipped before regeneration**: - [`packages/stack-shared/src/helpers/init-prompt.ts`](packages/stack-shared/src/helpers/init-prompt.ts), [`/ai/prompts.ts`](packages/stack-shared/src/ai/prompts.ts), [`apps/backend/src/lib/ai/prompts.ts`](apps/backend/src/lib/ai/prompts.ts), [`apps/backend/src/lib/ai/tools/create-email-{template,draft}.ts`](apps/backend/src/lib/ai/tools/create-email-template.ts), [`apps/skills/src/app/route.ts`](apps/skills/src/app/route.ts) (taught MCP tool → `ask_hexclave` with compat note; CLI binary teach → `hexclave`), [`docs-mintlify/snippets/home-prompt-island.jsx`](docs-mintlify/snippets/home-prompt-island.jsx), [`packages/template/README.md`](packages/template/README.md) + integrations/convex/component/README.md. - `generate-sdks` propagated changes to `packages/{react,stack,js}`. - **OpenAPI dual-documentation**: [`apps/backend/src/app/api/latest/route.ts`](apps/backend/src/app/api/latest/route.ts) now lists `X-Hexclave-*` headers as primary documented schemas with `X-Stack-*` duplicates marked `.optional()` (both accepted at runtime by PR 1's normalize-at-proxy shim). - **`@stackframe/emails` virtual module**: dual-aliased to `@hexclave/emails` at the bundler boundary ([email-rendering.tsx:89](apps/backend/src/lib/email-rendering.tsx:89)). Stored email templates continue to import from either name; new AI-generated templates and the system prompt teach `@hexclave/emails`. - **Tier 2 mirror-publish wiring** (new this PR, lays the groundwork for `@hexclave/*` first publish): - [`scripts/rewrite-packages-to-hexclave.ts`](scripts/rewrite-packages-to-hexclave.ts) — rewrites 9 publishable `@stackframe/*` → `@hexclave/*` `package.json` files (reads `HEXCLAVE_VERSION` env or `--version=` flag), pins cross-deps to the shared `@hexclave` version, registers `hexclave` bin alongside `stack` for `@hexclave/cli`. - [`.github/workflows/npm-publish.yaml`](.github/workflows/npm-publish.yaml) appended with rewrite-then-republish step. `pnpm publish` skips already-on-npm versions so reruns are safe. - **Sender email domain**: `noreply@stackframe.co` → `noreply@sent-with-hexclave.com` (the dedicated transactional-sender domain split per the plan, to isolate bulk deliverability from `hexclave.com` reputation); `security@` / `team@stack-auth.com` inbound mailboxes → `@hexclave.com`. - **Self-host docs**: docker network / container names in the bash examples flipped from `stack-auth` to `hexclave` (`hexclave-postgres`, `hexclave-clickhouse`, `hexclave.env`). The docker image tag `stackauth/server:latest` stays per the plan's locked decision. - **GitHub repo slug**: `hexclave/stack-auth` → `hexclave/hexclave` in every `package.json` `repository` field, README link, CHANGELOG raw-asset URL. ## Carve-outs (deliberately untouched) - **[`apps/backend/src/lib/tokens.tsx`](apps/backend/src/lib/tokens.tsx)** JWT issuer dual-accept table — PR 1 intentional infrastructure, kept indefinitely. - **Legacy `./docs/` folder** — per scoping decision (only `docs-mintlify/` rewritten). - **`unified-docs-widget` hostname allowlist** — accepts both `.hexclave.com` (canonical) and `.stack-auth.com` (transition window) for DNS rollout. - **`url-targets.ts`** hosted-domain default `.built-with-stack-auth.com` — wire identifier baked into existing customer deploys; indefinite read-fallback. - **Binary visual assets** (logos, favicons, OG images, README screenshots) — out of scope for this PR. Need design work; tracked separately. ## Verification - **`pnpm typecheck`** on `packages/{template,stack-shared,react,stack,js}` + `apps/dashboard`: **all green**. The remaining backend / e-commerce-demo typecheck errors are pre-existing (Prisma codegen output + `./generated/api-versions.json` not present in fresh worktrees without `pnpm run codegen-prisma` + a live DB) and unrelated to this diff. - **`pnpm lint`** on the same 6 packages: all green. - **Final grep** for residual `Stack Auth` / `stack-auth.com` / `@stackframe/stack-cli@latest` references: zero outside the intentional carve-outs above. - **25 e2e test files updated in lockstep** with the known-error message changes (asserted strings flipped to match the new x-hexclave-* + compat-note messages). ## Deploy blockers (ops sequencing before this rebrand goes live) This PR is code-complete, but the rebrand's visible surfaces (SDK default URLs, dashboard links, npm READMEs, REST error messages, runtime deprecation warning) all point at `*.hexclave.com` / `@hexclave/*` resources that don't exist yet. None of these are fixable from a PR — they're ops/registrar/npm work that has to be sequenced before merging this to a release tag. Suggested ordering, hardest blockers first: ### Tier 1 — required before customer-facing deploy (everything below this line *will visibly break customers on day 1* if skipped) 1. **DNS + TLS for `api.hexclave.com` + `api1./api2.hexclave.com`** → must point at the same backend that serves `api.stack-auth.com` (or a backend that mirrors PR 1's dual-accept). The SDK's new `defaultBaseUrl` is `https://api.hexclave.com`; every customer that relied on the old default and upgrades to a post-PR2 SDK build sends API requests here. Until this resolves, every default-config customer's API call NXDOMAINs. 2. **DNS for `app.hexclave.com`** → the dashboard. Referenced in the SDK's default-error messages ("Please create a project on the Hexclave dashboard at https://app.hexclave.com"), the init-stack flow's `wizard-congrats` redirect, and the OAuth dashboard handoff. 3. **DNS for `docs.hexclave.com`** + Mintlify deploy → the SDK runtime deprecation warning (`https://docs.hexclave.com/migration`), every README, every "Learn more" link in the dashboard, and every REST API error body (`/api/overview#authentication`) points here. The MDX is in this PR; the docs build target needs DNS. 4. **DNS for `mcp.hexclave.com`** → the MCP server endpoint that every taught agent integration (`claude mcp add ...`, `cursor`, `codex`, `vscode`) registers. Until this resolves, every `npx @hexclave/cli@latest init` MCP-registration step fails. 5. **Reserve the `@hexclave` npm scope + set repo variable `HEXCLAVE_VERSION`** → the mirror-publish step in `.github/workflows/npm-publish.yaml` is gated on this variable. Without it, the entire taught onboarding command `npx @hexclave/cli@latest init` 404s from the npm registry, *and* every README that says "install `@hexclave/next`" leads to install failure. Pick the initial version intentionally (`1.0.0` or aligned to `@stackframe/stack`); don't accept a silent default. ### Tier 2 — required before announcing the rebrand publicly (lookalike or low-traffic surfaces, but visibly broken) 6. **DNS for `r.hexclave.com`** → the analytics beacon `defaultAnalyticsBaseUrl`. Silent failure if missing (analytics drops), but should land alongside Tier 1. 7. **Register `sent-with-hexclave.com` + full email auth (SPF / DKIM / DMARC)** → the new default sender domain for shared-sender transactional emails. Without it the dashboard "send test email" path emits bounces, and shared-sender flows (`getSharedEmailConfig("Hexclave")`) deliver to spam at best. 8. **MX + SPF / DMARC for `hexclave.com`** → `team@hexclave.com` and `security@hexclave.com` mailboxes. The security disclosure mailbox is referenced in [`.github/SECURITY.md`](.github/SECURITY.md); `team@hexclave.com` is the actual recipient of internal feedback emails sent at runtime by [`apps/backend/src/lib/internal-feedback-emails.tsx`](apps/backend/src/lib/internal-feedback-emails.tsx). Today, every runtime feedback email bounces. 9. **DNS for `skill.hexclave.com`** → the canonical AI-agent skill fetch URL (the agent bootstrap pivot). Without it, the entire "agent downloads `SKILL.md` from a known URL" flow taught in [`packages/stack-shared/src/helpers/init-prompt.ts`](packages/stack-shared/src/helpers/init-prompt.ts) fails. 10. **Create `github.com/hexclave/hexclave` as a public repo** (even as a redirect to `hexclave/stack-auth`) **OR** rewrite every `package.json` `"repository"` field + dashboard footer "view on GitHub" link to point at `hexclave/stack-auth` (which already exists). Currently every npm package page's "Repository" link is dead, and the dashboard's GitHub button + dev-tool repo link are dead. ### Tier 3 — broken but low-visibility / low-traffic 11. **DNS for `discord.hexclave.com`** → Discord invite redirect, used in every README's chip and the dashboard footer. 12. **DNS for `demo.hexclave.com`** → "✨ Demo" badge in every npm package README. Broken-image badge on the package page. 13. **DNS + TLS for `built-with-hexclave.com`** → optional hosted-handler domain (the default reverted to `.built-with-stack-auth.com` in this PR's carve-outs, so this only matters for projects that manually flip). ## Other follow-ups (not deploy-blocking) - **E2E snapshot regen across the full suite** for the dual-emitted `x-hexclave-*` response headers (PR 1 follow-up; `vitest -u` in CI absorbs). - **Binary visual assets** — logos, favicons, OG images, README screenshots; need design pass. - **Backend OpenAPI fumadocs regen** in CI flow — the JSON files in `docs-mintlify/openapi/` are committed but regen runs in CI. Verify the workflow that does this still works against the post-PR2 source. - **Backend typecheck infra debt** — needs `codegen-prisma` + `codegen-route-info` to clear; pre-existing, unaffected by this PR. ## Test plan - [ ] CI runs full e2e suite (with `vitest -u` to absorb residual snapshot deltas, then committed back). - [ ] Spot-check: new `@hexclave/cli init` (once published) generates `hexclave.config.ts` and works against a fresh project. - [ ] Spot-check: existing customer with `@stackframe/stack` import sees the once-per-process `console.warn` recommending `@hexclave/next` on SDK init. - [ ] Manual: dashboard setup page renders the `npx @hexclave/cli@latest init` snippet and the `x-hexclave-publishable-client-key` API header in the curl example. - [ ] Manual: a fresh `pnpm run prisma migrate` against a clean DB sets the internal project displayName to 'Hexclave Dashboard'. --------- Co-authored-by: Konstantin Wohlwend <n2d4xc@gmail.com>	2026-05-26 19:18:20 -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
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
BilalG1	dad752a1cb	Add pr-visual-writeup skill to .agents/skills (#1354) ... Shared agent skill under the cross-client `.agents/skills/` convention so Claude Code, Codex, and other compliant agents can discover it. <!-- 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 an end-to-end workflow skill for automating visual-rich PR descriptions with screenshot capture, asset processing, and upload capabilities. * **Documentation** * Added reference guides covering screenshot capture patterns, asset upload workflows, and structured PR body templates. * **Chores** * Added helper scripts for development server detection, media conversion, and GitHub gist uploads. <!-- end of auto-generated comment: release notes by coderabbit.ai -->	2026-04-20 11:54:55 -07:00