Consistency and design changes light mode

.claude/CLAUDE-KNOWLEDGE.md

@@ -563,5 +563,10 @@ A: Project config overrides only support the hosted `sourceOfTruth` shape. Legac
 ## Q: How should managed email onboarding e2e tests wait for mock verification?
 A: Do not rely on a fixed `wait(1500)` after setup. The mock onboarding path flips the domain to `verified` asynchronously through `runAsynchronously`, so tests should poll the managed-onboarding check endpoint until the expected status appears.
 
+## Q: How can we redesign or customize account settings pages for the dashboard only, without modifying any shared packages (like `@stackframe/stack` or `packages/template`)?
+A: Intercept the catch-all dynamic route in `apps/dashboard/src/app/(main)/handler/[...stack]/page.tsx` on the server by awaiting `params` and checking if `stack.join("/") === "account-settings"`. If matched, completely bypass `StackHandler` and return a local, custom-built `DashboardAccountSettingsPage` Client Component. To implement the custom views cleanly, copy the necessary forms and layouts from `packages/template` into `apps/dashboard/src/components/dashboard-account-settings/`, replace the relative and package UI imports with local dashboard UI components (such as `@/components/ui/button`, `@/components/ui/input`, and local `Table` / `Badge` / `Switch` / `Avatar` / `Skeleton`), and custom style them with neutral, zinc/white border and card layers to match the dashboard's design system seamlessly.
+
+## Q: What can make dashboard/docs Vercel builds fail after adding dashboard-only account settings code?
+A: Dashboard-only imports still need direct dependency declarations in `apps/dashboard/package.json`; transitive workspace deps are not enough for CI/Vercel resolution. For example, imports of `@oslojs/otp`, `@stackframe/stack-ui`, `qrcode`, and `react-easy-crop` must be declared on the dashboard app itself. Also, placeholder comments like `NEXT_PUBLIC_STACK_PROJECT_ID=# ...` in `docs/.env` parse as empty values during `next build`; use real internal development defaults instead of comment-only assignments.
 ## Q: How should Microsoft OAuth callback token exchange include scopes?
 A: Microsoft Entra ID's v2 token endpoint can reject authorization-code exchanges with `AADSTS70011` if the token request omits `scope`. Keep scope emission opt-in at the provider layer (`includeScopeInCallbackTokenExchange`) and pass the same merged base/provider scopes to `openid-client` via the callback `extras.exchangeBody.scope` parameter. The callback route must forward stored `providerScope` from the outer OAuth info so custom Microsoft provider scopes are included in the token exchange.

apps/dashboard/package.json

@@ -29,6 +29,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.3.4",
     "@monaco-editor/react": "4.7.0",
+    "@oslojs/otp": "^1.1.0",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
@@ -64,6 +65,7 @@
     "@stackframe/dashboard-ui-components": "workspace:*",
     "@stackframe/stack": "workspace:*",
     "@stackframe/stack-shared": "workspace:*",
+    "@stackframe/stack-ui": "workspace:*",
     "@stripe/connect-js": "^3.3.27",
     "@stripe/react-connect-js": "^3.3.24",
     "@stripe/react-stripe-js": "^3.8.1",
@@ -89,9 +91,11 @@
     "next": "16.1.7",
     "next-themes": "^0.2.1",
     "posthog-js": "^1.336.1",
+    "qrcode": "^1.5.4",
     "react": "19.2.3",
     "react-day-picker": "^9.6.7",
     "react-dom": "19.2.3",
+    "react-easy-crop": "^5.5.6",
     "react-globe.gl": "^2.28.2",
     "react-hook-form": "^7.53.1",
     "react-icons": "^5.0.1",
@@ -114,6 +118,7 @@
     "@types/canvas-confetti": "^1.6.4",
     "@types/lodash": "^4.17.5",
     "@types/node": "20.17.6",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/queries/page-client.tsx

@@ -612,7 +612,7 @@ function QueriesContent() {
                 value={sqlQuery}
                 onChange={(e) => setSqlQuery(e.target.value)}
                 placeholder="SELECT * FROM default.events ORDER BY event_at DESC LIMIT 100"
-                className="font-mono text-sm min-h-[80px] resize-y bg-background/60"
+                className="min-h-[80px] resize-y border-black/[0.08] bg-white/95 font-mono text-sm shadow-sm ring-1 ring-black/[0.06] dark:border-border/40 dark:bg-background/60 dark:ring-white/[0.06]"
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !loading) {
                     e.preventDefault();

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-bar.tsx

@@ -60,10 +60,11 @@ export function AiQueryBar({
       <div
         className={cn(
           "group flex h-8 min-w-0 flex-1 items-center gap-2 rounded-xl px-2.5 sm:max-w-72",
-          "bg-background ring-1 transition-shadow",
+          "border border-black/[0.08] dark:border-white/[0.06]",
+          "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] transition-shadow hover:transition-none",
           isActive
-            ? "ring-purple-500/30 focus-within:ring-purple-500/50"
-            : "ring-black/[0.08] dark:ring-white/[0.08] focus-within:ring-foreground/[0.18]",
+            ? "ring-purple-500/30 focus-within:ring-purple-500/50 dark:ring-purple-400/30 dark:focus-within:ring-purple-400/50"
+            : "hover:ring-black/[0.12] dark:hover:ring-white/[0.1] focus-within:ring-foreground/[0.18]",
         )}
       >
         <SparkleIcon

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/ai-query-dialog.tsx

@@ -371,7 +371,7 @@ export function AiQueryDialog({
             </div>
           </DialogHeader>
 
-          <div className="shrink-0 border-b border-border/40 bg-muted/20">
+          <div className="shrink-0 border-b border-black/[0.06] bg-zinc-50/80 dark:border-border/40 dark:bg-muted/20">
             <div className="flex items-center justify-between px-5 py-2">
               <Label className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
                 Current query
@@ -417,7 +417,7 @@ export function AiQueryDialog({
                   }
                 }}
                 placeholder="Ask the AI a question to generate a query."
-                className="min-h-16 max-h-32 resize-y overflow-auto border-border/40 bg-background/70 font-mono text-[11px] text-foreground/90 shadow-none placeholder:italic placeholder:text-muted-foreground"
+                className="min-h-16 max-h-32 resize-y overflow-auto border-black/[0.08] bg-white/95 font-mono text-[11px] text-foreground/90 shadow-sm ring-1 ring-black/[0.06] placeholder:italic placeholder:text-muted-foreground dark:border-border/40 dark:bg-background/60 dark:ring-white/[0.06]"
               />
             </div>
           </div>

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/page-client.tsx

@@ -231,7 +231,7 @@ export default function PageClient() {
     <AppEnabledGuard appId="analytics">
       <PageLayout fillWidth noPadding>
         <AnalyticsEventLimitBanner />
-        <div className="flex min-w-0 items-start lg:-mx-2 [--analytics-tables-sticky-top:3.5rem] [--analytics-tables-sidebar-height:calc(100vh-3.5rem)] dark:[--analytics-tables-sticky-top:5rem] dark:[--analytics-tables-sidebar-height:calc(100vh-6rem)]">
+        <div className="flex w-full min-w-0 items-stretch lg:-ml-2 [--analytics-tables-sticky-top:3.5rem] [--analytics-tables-sidebar-height:calc(100vh-3.5rem)] dark:[--analytics-tables-sticky-top:5rem] dark:[--analytics-tables-sidebar-height:calc(100vh-6rem)]">
           {/* Left sidebar — hidden on mobile */}
           <div
             className="hidden lg:flex w-48 min-h-0 flex-shrink-0 self-start flex-col overflow-hidden border-r border-border/50 pl-2 sticky"
@@ -271,8 +271,19 @@ export default function PageClient() {
             </div>
           </div>
 
-          {/* Right content */}
-          <div className="flex min-w-0 flex-1 flex-col">
+          {/* Right content — flush to card edge; companion gap is on <main> in sidebar-layout */}
+          <div
+            className={cn(
+              "flex min-w-0 flex-1 flex-col",
+              "[&_[role=grid]]:rounded-r-none",
+              "[&_[role=grid]_.sticky]:rounded-t-none",
+              // Toolbar row only (first child of sticky chrome) — analytics layout
+              "[&_[role=grid]_.sticky>div:first-child>div]:pt-3",
+              "[&_[role=grid]_.sticky>div:first-child>div]:pb-2.5",
+              "[&_[role=grid]_.sticky>div:first-child>div]:pr-0",
+              "[&_[role=grid]_.sticky>div:first-child>div]:pl-2.5",
+            )}
+          >
             {selectedTable ? (
               <TableContent key={selectedTable} tableId={selectedTable} />
             ) : (

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/tables/query-data-grid.tsx

@@ -637,7 +637,7 @@ export const QueryDataGrid = forwardRef<QueryDataGridHandle, QueryDataGridProps>
         )}
 
         {!showEmptyError && (
-          <div className={fillHeight ? "flex-1 min-h-0 pr-0 lg:pr-8" : "pr-0 lg:pr-8"}>
+          <div className={fillHeight ? "flex-1 min-h-0" : undefined}>
             <DataGrid<RowData>
               columns={columns}
               rows={gridData.rows}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx

@@ -162,7 +162,7 @@ function DisabledProvidersDialog({ open, onOpenChange }: { open?: boolean, onOpe
       placeholder="Search for a provider..."
       value={providerSearch}
       onChange={(e) => setProviderSearch(e.target.value)}
-      leadingIcon={<MagnifyingGlassIcon size={14} />}
+      leadingIcon={<MagnifyingGlassIcon className="h-3.5 w-3.5" />}
     />
     <div className="flex gap-2 flex-wrap justify-center">
       {filteredProviders
@@ -448,6 +448,7 @@ function useEmailVerificationToggle() {
       open={!!pendingChange}
       onClose={() => setPendingChange(null)}
       title="Enable email verification requirement"
+      size="2xl"
       danger
       okButton={{
         label: "Apply Change",
@@ -468,35 +469,50 @@ function useEmailVerificationToggle() {
             <Typography variant="secondary" type="label">
               Affected users
             </Typography>
-            <div className="rounded-xl ring-1 ring-black/[0.06] dark:ring-white/[0.06] overflow-hidden">
-              <table className="w-full text-sm">
-                <thead className="bg-foreground/[0.04]">
+            <div className="overflow-hidden rounded-xl ring-1 ring-black/[0.06] dark:ring-white/[0.06]">
+              <table className="w-full table-fixed text-sm">
+                <colgroup>
+                  <col className="w-[22%]" />
+                  <col />
+                  <col className="w-[7.5rem]" />
+                </colgroup>
+                <thead className="bg-zinc-50 dark:bg-background">
                   <tr>
                     <th className="px-3 py-2 text-left font-medium">User</th>
                     <th className="px-3 py-2 text-left font-medium">Email</th>
-                    <th className="px-3 py-2 text-left font-medium">Reason</th>
+                    <th className="px-3 py-2 text-left font-medium whitespace-nowrap">Reason</th>
                   </tr>
                 </thead>
-                <tbody>
-                  {pendingChange.affectedUsers.map((user) => (
-                    <tr key={user.id} className="border-t border-black/[0.06] dark:border-white/[0.06]">
-                      <td className="px-3 py-2">
-                        {user.displayName || <span className="text-muted-foreground italic">No name</span>}
-                      </td>
-                      <td className="px-3 py-2">
-                        {user.primaryEmail || <span className="text-muted-foreground italic">No email</span>}
-                      </td>
-                      <td className="px-3 py-2">
-                        <DesignBadge
-                          label={user.restrictedReason.type === "email_not_verified" ? "Email not verified" : "Anonymous user"}
-                          color="orange"
-                          size="sm"
-                        />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
               </table>
+              <div className="max-h-52 overflow-y-auto border-t border-black/[0.06] dark:border-white/[0.06]">
+                <table className="w-full table-fixed text-sm">
+                  <colgroup>
+                    <col className="w-[22%]" />
+                    <col />
+                    <col className="w-[7.5rem]" />
+                  </colgroup>
+                  <tbody>
+                    {pendingChange.affectedUsers.map((user) => (
+                      <tr key={user.id} className="border-t border-black/[0.06] dark:border-white/[0.06] first:border-t-0">
+                        <td className="px-3 py-2 align-middle">
+                          {user.displayName || <span className="text-muted-foreground italic">No name</span>}
+                        </td>
+                        <td className="px-3 py-2 align-middle truncate" title={user.primaryEmail ?? undefined}>
+                          {user.primaryEmail || <span className="text-muted-foreground italic">No email</span>}
+                        </td>
+                        <td className="px-3 py-2 align-middle">
+                          <DesignBadge
+                            label={user.restrictedReason.type === "email_not_verified" ? "Not verified" : "Anonymous"}
+                            color="orange"
+                            size="sm"
+                            contentMode="text"
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
             {pendingChange.totalAffectedCount > pendingChange.affectedUsers.length && (
               <Typography variant="secondary" type="footnote">

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx

@@ -80,9 +80,6 @@ export const providerFormSchema = yupObject({
 
 export type ProviderFormValues = yup.InferType<typeof providerFormSchema>
 
-/** Modal chrome — "Floating soft" (variant G). */
-const PROVIDER_DIALOG_CHROME_CLASS = "border-0 rounded-3xl bg-background shadow-2xl shadow-black/30 dark:shadow-black/60";
-
 function ProviderHeader({ providerId }: { providerId: string }) {
   return (
     <div className="flex items-center gap-3">
@@ -329,7 +326,6 @@ export function ProviderSettingDialog(props: Props & { open: boolean, onClose: (
       title={`${toTitle(props.id)} OAuth provider`}
       cancelButton
       okButton={{ label: 'Save' }}
-      contentClassName={PROVIDER_DIALOG_CHROME_CLASS}
       render={(form) => (
         <OAuthProviderSettingsForm
           form={form}