diff --git a/.agents/skills/pr-visual-writeup/SKILL.md b/.agents/skills/pr-visual-writeup/SKILL.md
index 0a43cfc7f3..8c12f1b396 100644
--- a/.agents/skills/pr-visual-writeup/SKILL.md
+++ b/.agents/skills/pr-visual-writeup/SKILL.md
@@ -18,13 +18,14 @@ If the user only wants a text-only PR description, don't use this skill — it's
 
 ## The shape of the work
 
-Five phases. Phases 2 and 3 are the parallel-heavy ones — lean on subagents there.
+Six phases. Phases 2 and 3 are the parallel-heavy ones — lean on subagents there. Phase 6 is the cleanup that puts the user's working tree back.
 
-1. **Scope** — figure out which PR, which routes, which dev server, which auth
-2. **Capture (parallel)** — matrix of {page × theme × viewport}, plus scroll animations
+1. **Scope** — figure out which PR, which routes, which dev server, which auth, **which selectors are new UI**
+2. **Capture** — "after" pass first (parallel: page × theme × viewport, red borders on new UI), then stash + checkout base + capture "before" pass against the same dev server.
 3. **Process (parallel)** — convert scroll videos → GIFs (inline-playable), prep gist
 4. **Upload** — one gist, one commit, all files; get raw URLs
-5. **Compose + set** — markdown body with tables, then `gh pr edit --body-file`
+5. **Compose + set** — markdown body with before/after tables, then `gh pr edit --body-file`
+6. **Restore** — `git checkout <orig-branch>` + `git stash pop` so the user's working tree is exactly where they left it
 
 ## Phase 1 — Scope
 
@@ -34,25 +35,69 @@ Before you capture anything, know:
 - **Changed UI routes** — `gh pr diff <N> --name-only` and filter for page/route files. For Next.js look for `**/page*.tsx` / `**/*page-client.tsx`. Map route files to URL paths based on the app router convention. Ignore changes purely in backend / shared components unless they have an obvious UI surface.
 - **Dev server port** — `lsof -iTCP -sTCP:LISTEN -P -n | grep node` and `curl -s http://localhost:<port>/ | grep -oE '<title>[^<]+</title>'` to identify which port is the dashboard vs. API vs. docs vs. mock-OAuth.
 - **Auth flow** — if the app requires login, inspect the sign-in page for the OAuth provider to use, and ask the user (or infer from context) which dev account to sign in as. Mock OAuth servers typically accept any email.
+- **New-UI selectors** — for each changed route, derive a list of CSS selectors that point to the UI elements added or visibly modified in this PR. Read the diff for that route's component file(s), pick stable selectors (`data-testid`, semantic role, unique class, or a `:has()` text match) for each new/changed block. These selectors drive the red-border highlight pass on "after" captures. If a route has no visually changed elements (only behavior/copy refactor), record `[]` and skip highlighting for that route.
+- **Base ref for "before"** — `gh pr view <N> --json baseRefName` gives you the base branch (usually `dev` or `main`). The "before" pass swaps the working tree to that ref under the same dev server — see Phase 2. Skip the before pass entirely if the user says "after only" or if every route is greenfield.
+- **Working-tree state** — `git status --porcelain`. If there are uncommitted changes, they need to be stashed before the base checkout. Record whether a stash will be needed and the current branch name so you can restore exactly.
 
-Record these facts somewhere (a scratchpad file under `/tmp/<skill-workspace>/scope.md` is fine) — the parallel subagents in Phase 2 need them.
+Record all of these in `/tmp/pr-<N>-visuals/scope.md` — the Phase 2 subagents need them.
 
-## Phase 2 — Parallel capture
+## Phase 2 — Capture
 
-This is the skill's core trick. You have N pages × M themes × K viewports of screenshots to take. If you do this in one browser, you navigate sequentially — 9 × 2 × 2 = 36 navigations at ~5s each = 3 minutes. If you fan out, you do it in ~45s.
+Two ordered passes against a **single** dev server. The "after" pass runs first while the head branch is checked out; then we swap the working tree to the base ref (same server, same port, HMR rebuilds) and run the "before" pass.
 
-### Fan-out plan
+### Pass 1 — "after" (parallel)
 
-Spawn one subagent per **(theme, viewport)** combination. Each subagent owns a named `agent-browser` session, authenticates once, captures every page in its assigned theme/viewport, and returns the output directory. Typical combinations:
+The head branch is already checked out and the dev server is already running, so this is just the parallel matrix you started with.
 
-- `light-standard` (1920×1200, theme=light)
-- `dark-standard` (1920×1200, theme=dark)
-- `light-wide` (2560×1440, theme=light, a subset of pages)
-- `dark-wide` (2560×1440, theme=dark, a subset of pages)
+Spawn one subagent per **(theme, viewport)** combination. Each owns a named `agent-browser` session, authenticates once, captures every page in its slice with **red borders injected on new-UI selectors**, and returns the output directory.
 
-Widescreen captures are usually only worth taking for the "flagship" pages (the 3-5 most important ones). Full matrix on every page is overkill.
+- `after-light-standard` (1920×1200, theme=light, red borders on)
+- `after-dark-standard`  (1920×1200, theme=dark,  red borders on)
+- `after-light-wide` / `after-dark-wide` (2560×1440, flagship pages only)
 
-**Important:** issue all Agent tool calls for capture subagents **in a single assistant message** so they run concurrently. If you spawn them one at a time across turns, you've lost the parallelism.
+Issue all Agent calls in **one assistant message** so they run concurrently. Unique `--session-name` per agent.
+
+**Red borders.** The "after" subagents inject a stylesheet that outlines the new-UI selectors recorded in Phase 1 — see the `pr-visual-highlight` block in `references/capture-patterns.md`. Inject after navigation + settle, before the screenshot. Use `outline` (not `border` — `border` shifts layout). Skip the inject for routes whose selector list is empty.
+
+**Wait for the page to be ready before every shot.** Next.js dev compiles routes on demand and the dashboard renders skeletons during data fetch. Networkidle alone is not enough — see the `wait-for-ready` recipe in `references/capture-patterns.md`. Each subagent should also do a one-time *warm-up pass* over its assigned routes before the real capture loop, so the on-demand compile cost is paid against a throwaway hit rather than the screenshot.
+
+### Pass 1.5 — swap working tree to base
+
+After Pass 1 finishes, **before** spawning Pass 2:
+
+```bash
+# 1. Record state so Phase 6 can restore it
+ORIG_BRANCH=$(git rev-parse --abbrev-ref HEAD)
+echo "$ORIG_BRANCH" > /tmp/pr-<N>-visuals/orig-branch.txt
+
+# 2. Stash anything dirty (including untracked) — even if scope said clean, do this defensively
+git stash push --include-untracked -m "pr-visual-writeup pr-<N> after-pass" || true
+git rev-parse stash@{0} 2>/dev/null > /tmp/pr-<N>-visuals/stash-ref.txt || rm -f /tmp/pr-<N>-visuals/stash-ref.txt
+
+# 3. Move to the base ref
+git checkout <base-ref>     # usually `dev` or `main`, from Phase 1 scope
+git pull --ff-only
+
+# 4. Give the dev server time to HMR-rebuild against the new tree
+sleep 5 && curl -fs http://localhost:<port>/ >/dev/null
+```
+
+Stash the changes **even if `git status` reported clean.** Defensive: the user might have edited a file mid-skill, and a failed checkout halfway through is much worse than a no-op `git stash pop` at the end.
+
+If the dev server doesn't recover from HMR after the checkout (some Next configs choke on large simultaneous file changes), the fallback is to restart it manually — flag this to the user rather than papering over it.
+
+### Pass 2 — "before" (parallel)
+
+Same fan-out as Pass 1, but:
+- Filename suffix is `-before-<theme>` instead of `-after-<theme>`
+- **No red-border injection.** "Before" is the unmodified baseline.
+- Skip routes that didn't exist on the base ref (greenfield) — the subagent will hit a 404; have it log and move on instead of failing the whole pass.
+- Long-tail pages are usually not worth capturing in "before" — restrict Pass 2 to the flagship set unless the user asks otherwise.
+
+Filename convention so Phase 5 can pair shots up:
+
+- `/shots/<route>-before-<theme>[-wide].png`
+- `/shots/<route>-after-<theme>[-wide].png`
 
 The exact subagent prompt pattern lives in `references/capture-patterns.md` — read it before spawning.
 
@@ -92,9 +137,10 @@ Full recipe is in `references/gist-upload.md`. Summary: create a public gist via
 Markdown structure template is in `references/pr-body-template.md`. The load-bearing patterns:
 
 - **Summary** paragraph + `Base: → Head:` + scope line (files, +lines)
-- **Screenshots** section with one subsection per "flagship" page, each using a 2-col light/dark table, then a widescreen table
-- **Other migrated surfaces** compact table for the long tail
+- **Screenshots** section with one subsection per "flagship" page, each using a 2×2 before/after × light/dark table, then a widescreen table
+- **Other migrated surfaces** compact table for the long tail (after-only)
 - **Scroll behaviour** section with a light/dark GIF table
+- A short legend noting that the red outlines on "after" shots mark the new/changed UI
 - Everything after the visual section is the usual PR body: What's new, Notes for reviewers, Test plan
 
 Set it with:
@@ -104,6 +150,25 @@ gh pr edit <N> --body-file <path-to-md>
 
 Confirm with the user before pushing if the PR is on a public repo — this is a shared-state action. On a personal fork or draft PR, go ahead.
 
+## Phase 6 — Restore the working tree
+
+The "before" pass left the repo on the base ref with the user's original changes stashed. Put it back:
+
+```bash
+ORIG=$(cat /tmp/pr-<N>-visuals/orig-branch.txt)
+git checkout "$ORIG"
+if [ -f /tmp/pr-<N>-visuals/stash-ref.txt ]; then
+  git stash pop "$(cat /tmp/pr-<N>-visuals/stash-ref.txt)" || {
+    echo "stash pop hit conflicts — leaving stash in place"
+    git stash list | head -5
+  }
+fi
+```
+
+Do this **even if Phase 5 failed**, or the user is stuck on the wrong branch with their work hidden in a stash. If `git stash pop` conflicts, leave the stash alone and surface the conflict to the user explicitly — never auto-resolve.
+
+After restore: `git status` and `git rev-parse --abbrev-ref HEAD` for sanity, paste the output back to the user so they can verify before continuing other work.
+
 ## A note on trust boundaries
 
 Three distinct credentials touch this workflow. Keep them straight:
@@ -133,5 +198,7 @@ Create a `/tmp/pr-<N>-visuals/` workspace to hold everything. After the PR body
 ├── clips/                    # webm + gif scroll animations
 ├── body.md                   # composed PR description
 ├── gist-id.txt               # for re-pushing if you add more shots later
-└── urls.txt                  # raw URL per file, for copy-paste
+├── urls.txt                  # raw URL per file, for copy-paste
+├── orig-branch.txt           # phase 1.5: branch to return to in phase 6
+└── stash-ref.txt             # phase 1.5: stash ref to pop in phase 6 (absent if nothing was stashed)
 ```
diff --git a/.agents/skills/pr-visual-writeup/references/capture-patterns.md b/.agents/skills/pr-visual-writeup/references/capture-patterns.md
index 4692a21f07..bca9963c8d 100644
--- a/.agents/skills/pr-visual-writeup/references/capture-patterns.md
+++ b/.agents/skills/pr-visual-writeup/references/capture-patterns.md
@@ -1,73 +1,223 @@
-# Capture patterns
+# Capture Patterns
 
-Reconstructed from SKILL.md hints — edit freely to match your own `agent-browser` or Playwright setup.
+Recipes for `agent-browser` capture work. Read this when you're about to spawn Phase 2 subagents or run scroll animations yourself.
 
-## Subagent prompt pattern (per theme/viewport)
+## Prerequisite: load the agent-browser skill
 
-Each subagent owns a named browser session and handles the full capture pass for one `(theme, viewport)` combination. Name the session so it's distinct from the main conversation's session and from sibling subagents — e.g. `pr<N>-light-standard`.
+Before any browser command, the subagent must run:
+
+```bash
+agent-browser skills get agent-browser
+```
+
+This gives it the CLI's current syntax. Don't guess at flags — they change between versions.
+
+## The capture-subagent prompt pattern
+
+When you spawn a subagent to capture a (theme, viewport) slice, give it a self-contained prompt. It has no memory of the Phase 1 scope; everything must be spelled out.
 
 Template:
 
 ```
-You are capturing screenshots for PR #<N> in the <theme> theme at <WxH> viewport.
-
-Scope (from /tmp/pr-<N>-visuals/scope.md):
-- Dev server: http://localhost:<port>
-- Login: <email> via mock-OAuth at <sign-in path>
-- Pages (relative URLs):
-  - /projects/<projectId>/<route-1>
-  - /projects/<projectId>/<route-2>
-  - ...
-
-Do this:
-1. Start (or reuse) an agent-browser session named "pr<N>-<theme>-<viewport>".
-2. Set viewport to <WxH>.
-3. Navigate to the sign-in page and complete the mock-OAuth flow once.
-4. Switch the app theme to "<theme>" (usually a dropdown in user settings, or
-   the `prefers-color-scheme` override in devtools — inspect the app first).
-5. For each page in the list: navigate, wait for network-idle + any late-mount
-   skeletons to settle (~1s extra), then take a full-page screenshot.
-   Save as /tmp/pr-<N>-visuals/shots/<route-slug>__<theme>__<viewport>.png
-   where route-slug replaces slashes with dashes.
-6. Return the list of PNG paths you produced.
-
-Do NOT:
-- Close the browser session at the end (other subagents may be using it, and
-  re-login is wasteful).
-- Use agent-browser's `record` action — it spins up a fresh context that
-  drops dev-mode auth state. For scroll clips see the frame-stitch recipe.
+You are capturing screenshots for PR #<N> of <repo>. Context:
+
+- Dashboard dev URL: http://localhost:<port>     # head port for "after", base-worktree port for "before"
+- Branch slice: <before|after>
+- Login: click the "<provider>" OAuth button, fill the mock OAuth form with "<email>", submit. The local dashboard creates a session automatically.
+- Project to navigate into: <project-name> (click it on /projects after login)
+- Routes to capture (relative to the project URL):
+    /users          highlight selectors: ["[data-testid=users-table-toolbar]", "section:has(> h2:text('Bulk actions'))"]
+    /teams          highlight selectors: []
+    ...
+- Theme: <light|dark>
+- Viewport: <W>x<H>
+- Output directory: /tmp/pr-<N>-visuals/shots/
+- Highlight new UI: <true|false>     # true ONLY for "after" subagents
+
+For each route:
+1. Navigate
+2. **Wait for the page to be ready** — run the `wait-for-ready` recipe (below). Networkidle alone is not enough in Next dev mode: the on-demand compiler and skeleton placeholders both finish *after* networkidle.
+3. If Highlight new UI is true AND this route has highlight selectors:
+     run the pr-visual-highlight injector with this route's selector list
+4. Screenshot → /tmp/pr-<N>-visuals/shots/<route-slug>-<before|after>-<theme>.png
+    (widescreen variant: ...-<before|after>-<theme>-wide.png)
+5. If you injected highlights, remove them before navigating to the next route (so they don't bleed via cached styles): `agent-browser eval "document.getElementById('pr-visual-highlight')?.remove()"`
+
+Before the per-route loop, **warm the routes**: navigate to each one in sequence with a generous `wait-for-ready` budget, then start the real capture loop. The first hit pays the compile cost; the second hit is fast and produces the clean screenshot.
+
+Steps to run first in your session:
+- `agent-browser skills get agent-browser`
+- `agent-browser --session-name <unique-name> open http://localhost:<port>/`
+- Log in (instructions above)
+- `agent-browser set viewport <W> <H>`
+- Set theme via the "Toggle theme" button (check the root element's class to confirm)
+
+Use a unique --session-name per agent so browser sessions don't collide.
+Return the list of screenshots you saved.
+```
+
+The `--session-name` must be unique per agent — otherwise multiple agents fight over the same browser profile and cookies.
+
+## Waiting for the page to be ready (`wait-for-ready`)
+
+Screenshots taken too early capture skeletons, the Next.js dev "Compiling..." HUD, or a half-hydrated tree. Don't rely on `networkidle` alone. Run this gate after every navigation:
+
+```bash
+agent-browser eval "
+  (async () => {
+    const deadline = Date.now() + 30000;     // hard ceiling: 30s
+    const stable = { count: 0, lastHTML: '' };
+
+    while (Date.now() < deadline) {
+      const ready = (() => {
+        if (document.readyState !== 'complete') return false;
+
+        // Next.js dev compile indicator — id varies by version; cover both
+        if (document.querySelector('#__next-build-watcher, [data-nextjs-dialog]')) return false;
+        if (document.body.innerText.match(/^Compiling\b|building\.\.\./i)) return false;
+
+        // Common skeleton / loading affordances
+        if (document.querySelector('[data-loading=\"true\"], [aria-busy=\"true\"], .skeleton, [data-state=\"loading\"]')) return false;
+
+        // Tailwind animate-pulse is the de-facto skeleton signal in this codebase
+        if (document.querySelector('.animate-pulse')) return false;
+
+        // Pending fetches the app exposes (optional — harmless if undefined)
+        if (window.__pendingFetches > 0) return false;
+
+        return true;
+      })();
+
+      // Two consecutive stable reads of the rendered HTML body = settled
+      const html = document.body.innerHTML.length;
+      if (ready && html === stable.lastHTML) stable.count++;
+      else { stable.count = 0; stable.lastHTML = html; }
+      if (stable.count >= 2) return { ok: true, elapsed: Date.now() - (deadline - 30000) };
+
+      await new Promise(r => setTimeout(r, 250));
+    }
+    return { ok: false, reason: 'timeout', html: document.body.innerHTML.slice(0, 200) };
+  })()
+"
+```
+
+Return contract:
+
+- `{ ok: true, elapsed }` — proceed to screenshot.
+- `{ ok: false, reason: 'timeout', html }` — log it, then *still screenshot* (a 30s-stuck page is worth capturing as-is rather than failing the whole pass), but mark the route in the agent's return value so the main agent can decide whether to retry.
+
+Why the two-consecutive-stable-reads check: a single `ready` flicker can land between a skeleton disappearing and the real content swapping in. Two consecutive 250ms ticks with identical body HTML length means the DOM has actually settled.
+
+Tune the skeleton selector list for your codebase. The Stack Auth dashboard uses Tailwind `.animate-pulse` extensively for loading rows — that's the highest-signal one. Inspect the diff or the running app once and add any project-specific loading markers (`Spinner` component class, etc.) to the selector list in the subagent prompt rather than guessing.
+
+After `wait-for-ready` returns `ok`, still sleep ~300ms before screenshotting so any final animations (slide-in, fade, etc.) land on their resting frame.
+
+## Red-border highlight injector (`pr-visual-highlight`)
+
+Use this on "after" captures to outline the new UI introduced by the PR. The Phase 1 scope file should list selectors per route — pass them as a JS array.
+
+```bash
+agent-browser eval "(() => {
+  const selectors = $SELECTORS_JSON;   // e.g. ['[data-testid=foo]', 'section:has(> h2)']
+  document.getElementById('pr-visual-highlight')?.remove();
+  const style = document.createElement('style');
+  style.id = 'pr-visual-highlight';
+  style.textContent = selectors.map(s => \`\${s} { outline: 3px solid #ef4444 !important; outline-offset: 2px !important; border-radius: 6px; box-shadow: 0 0 0 1px rgba(239,68,68,0.25) !important; }\`).join('\n');
+  document.head.appendChild(style);
+  return Array.from(document.querySelectorAll(selectors.join(','))).length;
+})()"
+```
+
+Notes:
+
+- Use `outline`, not `border`. `border` shifts layout and breaks visual parity with the "before" shot. `outline` paints outside the box and changes nothing else.
+- Bright red `#ef4444` (Tailwind `red-500`) reads on both light and dark themes. Don't theme-switch the color — consistency matters more than contrast finesse.
+- `!important` on the outline overrides any element-level outline that the app sets on focus/hover.
+- The injector returns a count of matched elements. If it returns `0`, your selectors are stale — log a warning and skip highlight for that route rather than ship an "after" shot that looks identical to "before".
+- Always remove the `<style id="pr-visual-highlight">` between routes (the injector self-removes on next invocation, but if the next route has `highlight=false` you need to clear it manually).
+
+## Toggling theme reliably
+
+Two approaches, in order of preference:
+
+1. **Click the app's theme button.** Most apps have a visible theme toggle; find its ref via `agent-browser snapshot -i | grep -i 'theme'`. Click it, then verify via `agent-browser eval "document.documentElement.className"` that the expected class is applied.
+
+2. **Set the class directly** (only if no button exists):
+
+   ```bash
+   agent-browser eval "(() => { document.documentElement.classList.remove('dark'); document.documentElement.classList.add('light'); localStorage.setItem('theme', 'light'); })()"
+   ```
+
+   Direct class manipulation may not trigger app-level theme rehydration and can cause flicker on next navigation. Prefer the button.
+
+## Setting viewport
+
+```bash
+agent-browser set viewport 1920 1200   # standard
+agent-browser set viewport 2560 1440   # widescreen
 ```
 
-Spawn all subagents (one per theme/viewport combination) in a **single assistant message** with multiple `Agent` tool calls. If you send them across turns, you serialize the work and lose the parallelism that justifies the skill.
+Set viewport **after** login. Some login flows are responsive and might render differently at large viewports.
+
+## Scroll animations — frame-by-frame recipe
 
-## Scroll animation recipe (frame-stitch)
+Do NOT use `agent-browser record start/stop` for dev-mode apps — it creates a fresh browser context which typically loses your dev-server session. Use screenshot-per-frame + ffmpeg stitch instead.
 
-`agent-browser record` opens a new browser context, which doesn't inherit your dev-session cookies — the recording lands on the login page. Work around this by taking a burst of screenshots at the current session instead:
+### Finding the scroll container
 
+Most dashboard layouts have an internal scroll container (sidebar + fixed header + scrollable main). Don't scroll `window` — find the largest scrollable div:
+
+```bash
+agent-browser eval "(() => {
+  const el = Array.from(document.querySelectorAll('*')).find(x => {
+    const s = getComputedStyle(x);
+    return (s.overflowY === 'auto' || s.overflowY === 'scroll')
+      && x.scrollHeight > x.clientHeight + 100
+      && x.clientHeight > 400;
+  });
+  window.__SCROLL_EL__ = el;
+  if (el) el.scrollTop = 0;
+  return !!el;
+})()"
 ```
-In session pr<N>-<theme>-<viewport>:
-1. Navigate to the target page, wait for settle.
-2. window.scrollTo(0, 0).
-3. Loop: take screenshot -> scroll by (viewport_height * 0.8) -> sleep 120ms.
-   Stop when document.scrollingElement.scrollTop stops increasing.
-4. Loop back up symmetrically (optional, nicer).
-5. Save frames as /tmp/pr-<N>-visuals/clips/<slug>__<theme>/frame-####.png
+
+`window.__SCROLL_EL__` is stashed so subsequent scroll calls are one-liners.
+
+### Capturing frames
+
+```bash
+mkdir -p /tmp/frames
+i=0
+for step in 0 100 200 300 400 500 600 700 800 900; do
+  agent-browser eval "(() => { if (window.__SCROLL_EL__) window.__SCROLL_EL__.scrollTop = $step; })()" >/dev/null 2>&1
+  sleep 0.15
+  fn=$(printf "%03d" $i)
+  agent-browser screenshot "/tmp/frames/frame-$fn.png" >/dev/null 2>&1
+  i=$((i+1))
+done
+# Scroll back up
+for step in 800 700 600 500 400 300 200 100 0; do
+  agent-browser eval "(() => { if (window.__SCROLL_EL__) window.__SCROLL_EL__.scrollTop = $step; })()" >/dev/null 2>&1
+  sleep 0.15
+  fn=$(printf "%03d" $i)
+  agent-browser screenshot "/tmp/frames/frame-$fn.png" >/dev/null 2>&1
+  i=$((i+1))
+done
 ```
 
-Stitch with ffmpeg:
+### Stitch with ffmpeg
 
 ```bash
-ffmpeg -y -framerate 8 -i /tmp/.../clips/<slug>__<theme>/frame-%04d.png \
-  -c:v libvpx-vp9 -b:v 0 -crf 40 \
-  /tmp/.../clips/<slug>__<theme>.webm
+ffmpeg -y -framerate 8 -i /tmp/frames/frame-%03d.png \
+  -c:v libvpx-vp9 -crf 32 -b:v 0 /tmp/pr-<N>-visuals/clips/<name>-scroll-<theme>.webm
 ```
 
-Then `scripts/convert_clips.sh` turns the webm into a gist-friendly GIF.
+Then in Phase 3, convert `.webm` → `.gif` for gist inline playback.
+
+## Handling dev-server session loss
 
-## Picking the page matrix
+Browser contexts can lose login state after long idle, certain agent-browser commands, or a restart. When this happens, you'll hit the sign-in page again. Build in a small "if I'm on /sign-in, re-login" check per route, or just re-login once at the start of each subagent and trust the session to last the ~30s of captures.
 
-- **Full matrix** (every page × every theme × standard viewport): always — this is the bread-and-butter comparison reviewers actually read.
-- **Wide viewport** (2560×1440): only the 3–5 flagship pages. The point of wide is to show layout behavior under extra horizontal space, which most pages handle trivially.
-- **Scroll animations**: only pages with meaningful vertical content — tables with many rows, sticky headers, settings with lots of sections. A static screenshot of a 3-field form is fine.
+## Don't try to parallelize within a single subagent
 
-If the PR touches 15+ pages, pick ~5 flagships for the hero section and put the rest in a compact "other migrated surfaces" table.
+One `agent-browser` session = one navigational context. You can't `open URL-A` and `open URL-B` concurrently in the same session. The parallelism lives between subagents (different `--session-name`), not within.
diff --git a/.agents/skills/pr-visual-writeup/references/gist-upload.md b/.agents/skills/pr-visual-writeup/references/gist-upload.md
index db058680ce..4ca1735824 100644
--- a/.agents/skills/pr-visual-writeup/references/gist-upload.md
+++ b/.agents/skills/pr-visual-writeup/references/gist-upload.md
@@ -1,56 +1,96 @@
-# Gist upload (PAT-only)
+# Gist Upload
 
-The bundled `scripts/upload_gist.sh` handles this end-to-end. This doc explains the mechanism so you can diagnose failures or deviate when you need to.
+Host PR screenshots/GIFs in a public GitHub gist using only a PAT (no browser cookies). Gist raw URLs render inline as images and GIFs in PR bodies.
 
-## Why gists and not `user-attachments`
+## Why gist instead of `user-attachments`
 
-GitHub renders inline images and GIFs in PR bodies from any `https://` URL. Two common hosts:
+GitHub's `user-attachments` endpoint (what happens when you drag an image into a PR editor) requires a browser session cookie. Tools like `gh-image` scrape Chrome's cookie jar to impersonate the browser. That cookie has broader scope than a PAT and isn't something to use without the user's explicit OK.
 
-| Host | Auth | GIF inline? | WebM inline? |
-| --- | --- | --- | --- |
-| `user-attachments.githubusercontent.com` | Browser session cookie | yes | **yes** |
-| `gist.githubusercontent.com/.../raw/...` | PAT (via git push) | yes | no (download link) |
+Gist hosting is the PAT-only equivalent:
+- `gh gist create` needs only the `gist` scope
+- `git push` to the gist needs only the PAT
+- `gist.githubusercontent.com/<user>/<id>/raw/<file>` URLs render inline in PR bodies
 
-`user-attachments` is nicer (WebM plays inline, smaller files) but requires the browser session cookie, which has broader scope than a PAT and shouldn't be exfiltrated by a CLI tool without explicit user consent. Stick with gists unless the user says otherwise.
+Trade-off: gist-hosted `.webm` doesn't get GitHub's native video player (that's a `user-attachments`-only feature). Convert scroll clips to `.gif` so they play inline.
 
-## The push trick
-
-`gh gist create` creates the gist and can seed it with one file via stdin. After that, use git to add more files:
+## Full recipe
 
 ```bash
-git clone https://gist.github.com/<gist-id>.git
-cp *.png *.gif <clone>/
-cd <clone>
+# 1. Create a public gist with a placeholder README.
+GIST_URL=$(gh gist create --public --desc "PR #<N> screenshots + scroll clips" \
+  -f README.md - <<< "PR #<N> assets" | tail -1)
+GIST_ID=$(basename "$GIST_URL")
+echo "$GIST_ID" > /tmp/pr-<N>-visuals/gist-id.txt
+
+# 2. Clone locally (HTTPS, no creds needed for read).
+cd /tmp
+rm -rf "gist-$GIST_ID"
+git clone "https://gist.github.com/$GIST_ID.git" "gist-$GIST_ID"
+
+# 3. Stage every asset.
+cd "gist-$GIST_ID"
+cp /tmp/pr-<N>-visuals/shots/*.png /tmp/pr-<N>-visuals/clips/*.gif ./
 git add -A
-git commit -m "Add assets"
-git push
-```
-
-The catch: `git push` to a gist over HTTPS needs credentials. The local git credential helper may be configured to answer with a browser session cookie or nothing useful. Override it inline with a one-shot helper that feeds your PAT:
+git -c user.email=noreply@github.com -c user.name=<your-username> \
+  commit -m "Add PR <N> visuals"
 
-```bash
-USER=$(gh api user --jq .login)
+# 4. Push with PAT via credential helper. `gh auth token` prints the PAT.
 TOKEN=$(gh auth token)
-
 git -c credential.helper= \
-    -c credential.helper="!f() { echo username=$USER; echo password=$TOKEN; }; f" \
+    -c credential.helper="!f() { echo username=<your-username>; echo password=$TOKEN; }; f" \
     push
 ```
 
-The `credential.helper=` (empty) clears any inherited helpers; the second `-c` installs a single-use function-based helper that answers with the PAT. This does NOT persist — no config is written.
+The `credential.helper= <blank>` clears any existing helper, then the custom helper feeds the PAT. This avoids stamping the token into `~/.gitconfig` or a credential store.
 
-## Flat namespace
+## Building the URL table
 
-Gists don't support subdirectories. If your local layout is `shots/foo.png` and `clips/bar.gif`, everything gets flattened in the gist. Make sure filenames are unique across your input dirs before pushing (`upload_gist.sh` doesn't dedupe — it just cps, so a later cp wins).
+After push, enumerate raw URLs:
 
-## Raw URL shape
+```bash
+USER=<your-username>
+for f in /tmp/pr-<N>-visuals/shots/*.png /tmp/pr-<N>-visuals/clips/*.gif; do
+  base=$(basename "$f")
+  echo "$base  https://gist.githubusercontent.com/$USER/$GIST_ID/raw/$base"
+done > /tmp/pr-<N>-visuals/urls.txt
+```
+
+Use raw URLs **without** a commit SHA — the bare `/raw/<file>` path always resolves to the latest, which means you can re-push updated versions of a screenshot without changing the PR body.
+
+## Verifying a URL before embedding
 
+```bash
+curl -sI -L "https://gist.githubusercontent.com/$USER/$GIST_ID/raw/users-light.png" | head -3
+# Expect: HTTP/2 200  and  content-type: image/png (or image/gif)
 ```
-https://gist.githubusercontent.com/<user>/<gist-id>/raw/<filename>
+
+A quick spot-check on one asset per type is enough.
+
+## File-size watch-outs
+
+- Gist has a 10 MB per-file limit and ~10 MB total is reasonable. If you've got a massive set of widescreen captures, drop the quality or scope down the matrix.
+- GIFs balloon fast. Target 100-400 KB per clip by keeping `fps=8, scale=960` and clip length under 5 seconds.
+
+## Updating the gist later
+
+If you need to add more screenshots or fix one:
+
+```bash
+cd /tmp/gist-$(cat /tmp/pr-<N>-visuals/gist-id.txt)
+cp new-file.png ./
+git add -A
+git -c user.email=... -c user.name=... commit -m "Update"
+git -c credential.helper="!f() { echo username=...; echo password=$(gh auth token); }; f" push
 ```
 
-Note: `raw/` without a revision SHA points to HEAD. If you push new commits to the gist later, old raw URLs serve the newest version of that filename, which is usually what you want for iterative PR body updates.
+Existing `/raw/<file>` URLs keep working; new files get new URLs.
+
+## Cleanup
+
+The gist stays until deleted. If the user wants it gone after the PR lands:
 
-## Re-pushing to an existing gist
+```bash
+gh gist delete $GIST_ID
+```
 
-If you saved `gist-id.txt` from a prior run, you can re-push to the same gist instead of creating a new one. This keeps the URL stable across iterations (useful if the PR body has already been approved/reviewed). Swap the "create" step for a clone of the existing gist by ID.
+Warn them: deleting the gist breaks every image link in the PR body. Usually you leave it.
diff --git a/.agents/skills/pr-visual-writeup/references/pr-body-template.md b/.agents/skills/pr-visual-writeup/references/pr-body-template.md
index fd9ba5d964..6d08bfb747 100644
--- a/.agents/skills/pr-visual-writeup/references/pr-body-template.md
+++ b/.agents/skills/pr-visual-writeup/references/pr-body-template.md
@@ -1,87 +1,83 @@
-# PR body template
+# PR Body Template
 
-Reconstructed from SKILL.md hints. Treat this as a starting point and adapt to the PR's actual content — don't force-fit sections that don't apply.
+Markdown structure for a visual-heavy PR description. Adapt freely — these are patterns, not a rigid form.
 
-## Full structure
+## Top-of-body template
 
 ```markdown
 ## Summary
 
-<One-paragraph summary of what the PR does and why. Reviewer-oriented, not
-changelog-oriented — answer "what am I about to review and why does it exist".>
+<1-2 paragraphs explaining what the PR does and why. Not the commit list.>
 
-**Base:** `<base-branch>` → **Head:** `<head-branch>`
-**Scope:** <N> files changed · +<added> / -<removed> lines
-
----
+**Base:** `<base>` → **Head:** `<head>`
+**Scope:** <N> files, ~+<M>k additions
 
 ## Screenshots
 
-### <Flagship page 1 name>
+Captured from the local dev server (viewport: **<W>×<H>** standard, **<W2>×<H2>** widescreen). Assets hosted in [this gist](<gist-url>).
 
-<One-line description of the page and what changed.>
+> 🔴 Red outlines on the "after" shots mark the new or changed UI introduced by this PR.
 
-| Light | Dark |
-| --- | --- |
-| ![light](<raw-url>) | ![dark](<raw-url>) |
+### <Flagship page 1> — <short descriptor>
 
-<Widescreen if captured:>
+|        | Before | After |
+| ---    | ---    | ---   |
+| Light  | ![<page>-before-light](<url>) | ![<page>-after-light](<url>) |
+| Dark   | ![<page>-before-dark](<url>)  | ![<page>-after-dark](<url>)  |
 
-| Wide (light) | Wide (dark) |
-| --- | --- |
-| ![wide-light](<raw-url>) | ![wide-dark](<raw-url>) |
+Widescreen:
 
-### <Flagship page 2 name>
+|        | Before | After |
+| ---    | ---    | ---   |
+| Light  | ![<page>-before-light-wide](<url>) | ![<page>-after-light-wide](<url>) |
+| Dark   | ![<page>-before-dark-wide](<url>)  | ![<page>-after-dark-wide](<url>)  |
 
-...
+### <Flagship page 2>
 
----
+<...same before/after pattern...>
 
-### Other migrated surfaces
+### Other migrated surfaces (after only)
 
 | Page | Light | Dark |
 | --- | --- | --- |
-| Route A | ![](<raw-url>) | ![](<raw-url>) |
-| Route B | ![](<raw-url>) | ![](<raw-url>) |
-| ...    | ...             | ...             |
-
----
+| <name> | ![<page>-after-light](<url>) | ![<page>-after-dark](<url>) |
+| <name> | ![<page>-after-light](<url>) | ![<page>-after-dark](<url>) |
 
-## Scroll behaviour
+### <Optional: scroll behaviour / sticky header / interactions>
 
-| Light | Dark |
-| --- | --- |
-| ![scroll-light](<raw-url>) | ![scroll-dark](<raw-url>) |
+| Page | Light | Dark |
+| --- | --- | --- |
+| <name> | ![<page>-scroll-light](<gif-url>) | ![<page>-scroll-dark](<gif-url>) |
+```
 
----
+## What goes after the visuals
 
-## What's new
+Everything normal for a PR body: _What's new_, _Notes for reviewers_, _Test plan_. Don't skip these — the visuals sell the PR but reviewers still need a map of the code.
 
-- bullet 1
-- bullet 2
+## Picking flagship vs. long-tail pages
 
-## Notes for reviewers
+Flagship treatment (its own section, widescreen variant, maybe a scroll GIF):
+- Pages with the richest content in this PR
+- Pages the reviewer is most likely to open first
+- Usually 3-5 max — more and the body gets noisy
 
-- Anything tricky, non-obvious, or worth flagging.
-- Known follow-ups or things deliberately out of scope.
+Long-tail treatment (one row in the "Other surfaces" table):
+- Same-pattern pages where the screenshot is mostly the existing dashboard chrome
+- Empty-state or near-empty pages where seed data didn't populate them
 
-## Test plan
+## Alt text
 
-- [ ] Check X
-- [ ] Check Y
-- [ ] Visual sanity — the screenshots above are the canonical reference.
-```
+Use the base filename as alt text (e.g. `users-after-light`) — it's greppable, consistent, and survives when images fail to load. The `before`/`after` token in the alt text matters: if the gist is ever wiped, reviewers can still tell from broken-image alt which cell was which.
 
-## Patterns that pull weight
+## Before/after pairing rules
 
-- **Two-column tables for light/dark**: reviewers can scan both themes at once without scrolling vertically. A single-column list of 10 alternating light/dark shots is much harder to parse.
-- **Flagship vs. long tail**: promote 3–5 pages with their own subsection + heading. Everything else goes in a compact table. This gives reviewers a clear "start here" signal.
-- **Raw URLs, not markdown image links with titles**: keep `![alt](url)` minimal. Long alt text makes the source unreadable for anyone editing later.
-- **Scope line up top**: the `files changed · +x/-y` line answers "how big is this" before the reviewer scrolls.
+- For every "after" shot in a flagship section, pair it with the matching "before" shot at the same theme + viewport.
+- If there is no "before" (greenfield route), use a one-row "After only" table and note `*New route — no base equivalent.*` underneath.
+- If "before" and "after" are pixel-identical for a long-tail page (refactor that didn't touch this surface), drop that page from the body entirely. Don't pad with no-op pairs.
 
-## Anti-patterns
+## Don't do these
 
-- Don't embed WebM. Gist-hosted WebM renders as a download link, not a player. Convert to GIF first.
-- Don't link to the gist itself — link directly to each raw URL so the asset renders inline.
-- Don't include a mega-wall of every page × every theme. If the PR touches 15 pages, put 5 in the hero and 10 in the compact table.
-- Don't skip the text sections (What's new / Test plan) just because you have pretty pictures. Reviewers still want the prose.
+- **Don't embed 20+ inline images.** If you have that many UI surfaces, you probably have a few flagships + a long tail. Put the long tail in a compact table, not a wall of images.
+- **Don't mix hosting sources.** If some images are on `user-attachments` and others on gist, reviewers can't tell why and the mixing looks sloppy. Pick one hosting path and stick to it.
+- **Don't forget the non-visual sections.** A PR body that's 90% screenshots and 10% prose reads as marketing, not engineering communication.
+- **Don't use HTML `<video>` or `<details>` with videos.** GitHub sanitizes both unless the video is on `user-attachments`. Use GIFs (which render as images).
diff --git a/.agents/skills/roids/SKILL.md b/.agents/skills/roids/SKILL.md
index 41990749e9..90f7405dfe 100644
--- a/.agents/skills/roids/SKILL.md
+++ b/.agents/skills/roids/SKILL.md
@@ -11,8 +11,10 @@ Compare variants in the browser with the hosted runtime and markup contract.
 
 ## How it works
 
-1. Fetch the source URL below (documentation only—never load it as `<script src>`).
-2. Follow `SKILL.txt` exactly—wire `https://tryroids.com/roid-tool.js` and `data-roid-*` when showing multiple variants.
+**Preview-only — not for production.** The TryRoids hosted runtime (`https://tryroids.com/roid-tool.js`) and any wiring described in `SKILL.txt` are intended only for sandboxed variant previews. Never include them in production dashboard or app code, and never inject a `<script src="https://tryroids.com/roid-tool.js">` into shipped bundles.
+
+1. Fetch the source URL below for documentation only—do not load it via `<script src>` in production code.
+2. Follow `SKILL.txt` exactly: "wire" means using the documented inline markup pattern (the `data-roid-*` attributes on variant elements) inside a sandboxed preview runner. The hosted runtime URL is referenced in docs or loaded only by the preview sandbox, never by application code.
 3. Do not use custom tabs, selects, or one-off pickers for those variants.
 
 ## Source
diff --git a/apps/backend/src/app/api/latest/internal/projects-weekly-users/route.test.tsx b/apps/backend/src/app/api/latest/internal/projects-metrics/route.test.tsx
similarity index 53%
rename from apps/backend/src/app/api/latest/internal/projects-weekly-users/route.test.tsx
rename to apps/backend/src/app/api/latest/internal/projects-metrics/route.test.tsx
index ccfcba1130..5f8eab8eaa 100644
--- a/apps/backend/src/app/api/latest/internal/projects-weekly-users/route.test.tsx
+++ b/apps/backend/src/app/api/latest/internal/projects-metrics/route.test.tsx
@@ -1,41 +1,43 @@
 import { describe, expect, it } from "vitest";
-import { applyProjectWeeklyUsersRows } from "./route";
+import { applyProjectMetricsRows } from "./route";
 
-describe("internal projects weekly users helpers", () => {
-  it("applies ClickHouse rows through a Map and skips unknown projects", () => {
+describe("internal projects metrics helpers", () => {
+  it("applies total user and daily signup rows through a Map and skips unknown projects", () => {
     const byProject = new Map([
       ["project-a", {
-        weekly_users: 0,
-        daily_users: [
+        total_users: 0,
+        daily_signups: [
           { date: "2026-05-01", activity: 0 },
           { date: "2026-05-02", activity: 0 },
         ],
       }],
       ["__proto__", {
-        weekly_users: 0,
-        daily_users: [
+        total_users: 0,
+        daily_signups: [
           { date: "2026-05-01", activity: 0 },
           { date: "2026-05-02", activity: 0 },
         ],
       }],
     ]);
 
-    applyProjectWeeklyUsersRows(
+    applyProjectMetricsRows(
       byProject,
       [
-        { projectId: "project-a", day: "1970-01-01", users: 4 },
-        { projectId: "__proto__", day: "1970-01-01", users: 7 },
-        { projectId: "missing-project", day: "1970-01-01", users: 99 },
-        { projectId: "project-a", day: "2026-05-01", users: 2 },
-        { projectId: "__proto__", day: "2026-05-02", users: 5 },
-        { projectId: "missing-project", day: "2026-05-01", users: 99 },
+        { projectId: "project-a", totalUsers: 12 },
+        { projectId: "__proto__", totalUsers: 7 },
+        { projectId: "missing-project", totalUsers: 99 },
+      ],
+      [
+        { projectId: "project-a", day: "2026-05-01", signups: 2 },
+        { projectId: "__proto__", day: "2026-05-02", signups: 5 },
+        { projectId: "missing-project", day: "2026-05-01", signups: 99 },
       ],
     );
 
     expect(Object.fromEntries(byProject)).toMatchInlineSnapshot(`
       {
         "__proto__": {
-          "daily_users": [
+          "daily_signups": [
             {
               "activity": 0,
               "date": "2026-05-01",
@@ -45,10 +47,10 @@ describe("internal projects weekly users helpers", () => {
               "date": "2026-05-02",
             },
           ],
-          "weekly_users": 7,
+          "total_users": 7,
         },
         "project-a": {
-          "daily_users": [
+          "daily_signups": [
             {
               "activity": 2,
               "date": "2026-05-01",
@@ -58,7 +60,7 @@ describe("internal projects weekly users helpers", () => {
               "date": "2026-05-02",
             },
           ],
-          "weekly_users": 4,
+          "total_users": 12,
         },
       }
     `);
diff --git a/apps/backend/src/app/api/latest/internal/projects-metrics/route.tsx b/apps/backend/src/app/api/latest/internal/projects-metrics/route.tsx
new file mode 100644
index 0000000000..e8b2797914
--- /dev/null
+++ b/apps/backend/src/app/api/latest/internal/projects-metrics/route.tsx
@@ -0,0 +1,172 @@
+import { globalPrismaClient } from "@/prisma-client";
+import { listManagedProjectIds } from "@/lib/projects";
+import { DEFAULT_BRANCH_ID } from "@/lib/tenancies";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { MetricsDataPointsSchema } from "@stackframe/stack-shared/dist/interface/admin-metrics";
+import { adaptSchema, clientOrHigherAuthTypeSchema, yupNumber, yupObject, yupRecord, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
+
+const SIGNUPS_WINDOW_DAYS = 30;
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
+type ProjectMetrics = {
+  total_users: number,
+  daily_signups: { date: string, activity: number }[],
+};
+
+export function applyProjectMetricsRows(
+  byProject: Map<string, ProjectMetrics>,
+  totals: { projectId: string, totalUsers: number }[],
+  signups: { projectId: string, day: string, signups: number }[],
+) {
+  for (const row of totals) {
+    const project = byProject.get(row.projectId);
+    if (project == null) continue;
+    project.total_users = Number(row.totalUsers);
+  }
+
+  const dailyIndex = new Map<string, Map<string, number>>();
+  for (const row of signups) {
+    const project = byProject.get(row.projectId);
+    if (project == null) continue;
+    const dayKey = row.day.split("T")[0];
+    let m = dailyIndex.get(row.projectId);
+    if (!m) {
+      m = new Map();
+      dailyIndex.set(row.projectId, m);
+    }
+    m.set(dayKey, Number(row.signups));
+  }
+
+  for (const [id, project] of byProject) {
+    const m = dailyIndex.get(id);
+    if (!m) continue;
+    project.daily_signups = project.daily_signups.map((point) => ({
+      date: point.date,
+      activity: m.get(point.date) ?? 0,
+    }));
+  }
+}
+
+export const GET = createSmartRouteHandler({
+  metadata: { hidden: true },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema.defined(),
+      tenancy: adaptSchema.defined(),
+      user: adaptSchema,
+      project: adaptSchema.defined(),
+    }),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      projects: yupRecord(yupString().defined(), yupObject({
+        total_users: yupNumber().integer().defined(),
+        daily_signups: MetricsDataPointsSchema,
+      }).defined()).defined(),
+    }).defined(),
+  }),
+  handler: async (req) => {
+    if (!req.auth.user) {
+      throw new KnownErrors.UserAuthenticationRequired();
+    }
+    if (req.auth.project.id !== "internal") {
+      throw new KnownErrors.ExpectedInternalProject();
+    }
+
+    const projectIds = await listManagedProjectIds(req.auth.user);
+
+    const now = new Date();
+    const todayUtc = new Date(now);
+    todayUtc.setUTCHours(0, 0, 0, 0);
+    const since = new Date(todayUtc.getTime() - (SIGNUPS_WINDOW_DAYS - 1) * ONE_DAY_MS);
+    const untilExclusive = new Date(todayUtc.getTime() + ONE_DAY_MS);
+
+    const emptySeries = () => {
+      const out: { date: string, activity: number }[] = [];
+      for (let i = 0; i < SIGNUPS_WINDOW_DAYS; i += 1) {
+        const day = new Date(since.getTime() + i * ONE_DAY_MS);
+        out.push({ date: day.toISOString().split("T")[0], activity: 0 });
+      }
+      return out;
+    };
+
+    const byProject = new Map<string, ProjectMetrics>();
+    for (const id of projectIds) {
+      byProject.set(id, {
+        total_users: 0,
+        daily_signups: emptySeries(),
+      });
+    }
+    const buildResponse = () => ({
+      statusCode: 200 as const,
+      bodyType: "json" as const,
+      body: { projects: Object.fromEntries(byProject) },
+    });
+
+    if (projectIds.length === 0) {
+      return buildResponse();
+    }
+
+    let totalRows: Array<{ projectId: string, totalUsers: bigint | number }>;
+    let signupRows: Array<{ projectId: string, day: Date | string, signups: bigint | number }>;
+    try {
+      [totalRows, signupRows] = await Promise.all([
+        globalPrismaClient.$queryRawUnsafe<Array<{ projectId: string, totalUsers: bigint | number }>>(
+          `
+            SELECT "mirroredProjectId" AS "projectId", COUNT(*)::bigint AS "totalUsers"
+            FROM "ProjectUser"
+            WHERE "mirroredProjectId" = ANY($1::text[])
+              AND "mirroredBranchId" = $2
+              AND "isAnonymous" = false
+            GROUP BY "mirroredProjectId"
+          `,
+          projectIds,
+          DEFAULT_BRANCH_ID,
+        ),
+        globalPrismaClient.$queryRawUnsafe<Array<{ projectId: string, day: Date | string, signups: bigint | number }>>(
+          `
+            SELECT
+              "mirroredProjectId" AS "projectId",
+              date_trunc('day', COALESCE("signedUpAt", "createdAt") AT TIME ZONE 'UTC')::date AS "day",
+              COUNT(*)::bigint AS "signups"
+            FROM "ProjectUser"
+            WHERE "mirroredProjectId" = ANY($1::text[])
+              AND "mirroredBranchId" = $2
+              AND "isAnonymous" = false
+              AND COALESCE("signedUpAt", "createdAt") >= $3
+              AND COALESCE("signedUpAt", "createdAt") < $4
+            GROUP BY "mirroredProjectId", "day"
+          `,
+          projectIds,
+          DEFAULT_BRANCH_ID,
+          since,
+          untilExclusive,
+        ),
+      ]);
+    } catch (cause) {
+      throw new StackAssertionError("Failed to load project metrics.", {
+        cause,
+        userId: req.auth.user.id,
+        projectIds,
+        signupsSince: since.toISOString(),
+        signupsUntilExclusive: untilExclusive.toISOString(),
+      });
+    }
+
+    applyProjectMetricsRows(
+      byProject,
+      totalRows.map((r) => ({ projectId: r.projectId, totalUsers: Number(r.totalUsers) })),
+      signupRows.map((r) => ({
+        projectId: r.projectId,
+        day: r.day instanceof Date ? r.day.toISOString() : String(r.day),
+        signups: Number(r.signups),
+      })),
+    );
+
+    return buildResponse();
+  },
+});
diff --git a/apps/backend/src/app/api/latest/internal/projects-weekly-users/route.tsx b/apps/backend/src/app/api/latest/internal/projects-weekly-users/route.tsx
deleted file mode 100644
index d60d5e40fc..0000000000
--- a/apps/backend/src/app/api/latest/internal/projects-weekly-users/route.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { ClickHouseError } from "@clickhouse/client";
-import { getClickhouseAdminClient } from "@/lib/clickhouse";
-import { listManagedProjectIds } from "@/lib/projects";
-import { DEFAULT_BRANCH_ID } from "@/lib/tenancies";
-import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
-import { KnownErrors } from "@stackframe/stack-shared";
-import { MetricsDataPointsSchema } from "@stackframe/stack-shared/dist/interface/admin-metrics";
-import { adaptSchema, clientOrHigherAuthTypeSchema, yupNumber, yupObject, yupRecord, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import { StackAssertionError, captureError } from "@stackframe/stack-shared/dist/utils/errors";
-const WEEKLY_USERS_WINDOW_DAYS = 7;
-const CHART_WINDOW_DAYS = 30;
-const ONE_DAY_MS = 24 * 60 * 60 * 1000;
-
-type ProjectWeeklyUsers = {
-  weekly_users: number,
-  daily_users: { date: string, activity: number }[],
-};
-
-export function applyProjectWeeklyUsersRows(
-  byProject: Map<string, ProjectWeeklyUsers>,
-  rows: { projectId: string, day: string, users: number }[],
-) {
-  // The query emits one synthetic row per project with day set to the ClickHouse
-  // Date epoch ("1970-01-01"); those rows hold the weekly total.
-  const dailyIndex = new Map<string, Map<string, number>>();
-  for (const row of rows) {
-    const project = byProject.get(row.projectId);
-    if (project == null) {
-      continue;
-    }
-    const dayKey = row.day.split("T")[0];
-    if (dayKey === "1970-01-01") {
-      project.weekly_users = Number(row.users);
-      continue;
-    }
-    let m = dailyIndex.get(row.projectId);
-    if (!m) {
-      m = new Map();
-      dailyIndex.set(row.projectId, m);
-    }
-    m.set(dayKey, Number(row.users));
-  }
-
-  for (const [id, project] of byProject) {
-    const m = dailyIndex.get(id);
-    if (!m) continue;
-    project.daily_users = project.daily_users.map((point) => ({
-      date: point.date,
-      activity: m.get(point.date) ?? 0,
-    }));
-  }
-}
-
-export const GET = createSmartRouteHandler({
-  metadata: { hidden: true },
-  request: yupObject({
-    auth: yupObject({
-      type: clientOrHigherAuthTypeSchema.defined(),
-      tenancy: adaptSchema.defined(),
-      user: adaptSchema,
-      project: adaptSchema.defined(),
-    }),
-  }),
-  response: yupObject({
-    statusCode: yupNumber().oneOf([200]).defined(),
-    bodyType: yupString().oneOf(["json"]).defined(),
-    body: yupObject({
-      projects: yupRecord(yupString().defined(), yupObject({
-        weekly_users: yupNumber().integer().defined(),
-        daily_users: MetricsDataPointsSchema,
-      }).defined()).defined(),
-    }).defined(),
-  }),
-  handler: async (req) => {
-    if (!req.auth.user) {
-      throw new KnownErrors.UserAuthenticationRequired();
-    }
-    if (req.auth.project.id !== "internal") {
-      throw new KnownErrors.ExpectedInternalProject();
-    }
-
-    const projectIds = await listManagedProjectIds(req.auth.user);
-
-    const now = new Date();
-    const todayUtc = new Date(now);
-    todayUtc.setUTCHours(0, 0, 0, 0);
-    const since = new Date(todayUtc.getTime() - (CHART_WINDOW_DAYS - 1) * ONE_DAY_MS);
-    const weeklySince = new Date(todayUtc.getTime() - (WEEKLY_USERS_WINDOW_DAYS - 1) * ONE_DAY_MS);
-    const untilExclusive = new Date(todayUtc.getTime() + ONE_DAY_MS);
-
-    const emptySeries = () => {
-      const out: { date: string, activity: number }[] = [];
-      for (let i = 0; i < CHART_WINDOW_DAYS; i += 1) {
-        const day = new Date(since.getTime() + i * ONE_DAY_MS);
-        out.push({ date: day.toISOString().split("T")[0], activity: 0 });
-      }
-      return out;
-    };
-
-    const byProject = new Map<string, ProjectWeeklyUsers>();
-    for (const id of projectIds) {
-      byProject.set(id, {
-        weekly_users: 0,
-        daily_users: emptySeries(),
-      });
-    }
-    const projectsResponse = () => Object.fromEntries(byProject);
-
-    if (projectIds.length === 0) {
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: { projects: projectsResponse() },
-      };
-    }
-
-    const clickhouseClient = getClickhouseAdminClient();
-    const queryParams = {
-      projectIds,
-      branchId: DEFAULT_BRANCH_ID,
-      since: since.toISOString().slice(0, 19),
-      weeklySince: weeklySince.toISOString().slice(0, 19),
-      untilExclusive: untilExclusive.toISOString().slice(0, 19),
-    };
-
-    let rows: { projectId: string, day: string, users: number }[] = [];
-    try {
-      const result = await clickhouseClient.query({
-        query: `
-          SELECT
-            project_id AS projectId,
-            toString(toDate(event_at, 'UTC')) AS day,
-            uniqExact(assumeNotNull(user_id)) AS users
-          FROM analytics_internal.events
-          WHERE event_type = '$token-refresh'
-            AND project_id IN {projectIds:Array(String)}
-            AND branch_id = {branchId:String}
-            AND user_id IS NOT NULL
-            AND event_at >= {since:DateTime}
-            AND event_at < {untilExclusive:DateTime}
-            AND coalesce(CAST(data.is_anonymous, 'Nullable(UInt8)'), 0) = 0
-          GROUP BY projectId, day
-          UNION ALL
-          SELECT
-            project_id AS projectId,
-            '1970-01-01' AS day,
-            uniqExact(assumeNotNull(user_id)) AS users
-          FROM analytics_internal.events
-          WHERE event_type = '$token-refresh'
-            AND project_id IN {projectIds:Array(String)}
-            AND branch_id = {branchId:String}
-            AND user_id IS NOT NULL
-            AND event_at >= {weeklySince:DateTime}
-            AND event_at < {untilExclusive:DateTime}
-            AND coalesce(CAST(data.is_anonymous, 'Nullable(UInt8)'), 0) = 0
-          GROUP BY projectId
-        `,
-        query_params: queryParams,
-        format: "JSONEachRow",
-      });
-      rows = await result.json<{ projectId: string, day: string, users: number }>();
-    } catch (error) {
-      const captureId = error instanceof ClickHouseError
-        ? "internal-projects-weekly-users-clickhouse-error"
-        : "internal-projects-weekly-users-unexpected-error";
-      captureError(captureId, new StackAssertionError(
-        "Failed to load projects weekly users.",
-        { cause: error, projectCount: projectIds.length },
-      ));
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: { projects: projectsResponse() },
-      };
-    }
-
-    applyProjectWeeklyUsersRows(byProject, rows);
-
-    return {
-      statusCode: 200,
-      bodyType: "json",
-      body: { projects: projectsResponse() },
-    };
-  },
-});
diff --git a/apps/backend/src/lib/seed-dummy-data.ts b/apps/backend/src/lib/seed-dummy-data.ts
index 3e0c55257d..872a8820ed 100644
--- a/apps/backend/src/lib/seed-dummy-data.ts
+++ b/apps/backend/src/lib/seed-dummy-data.ts
@@ -1398,6 +1398,30 @@ const BULK_REFERRERS = [
   { url: '', weight: 20 },  // direct traffic
   { url: 'https://news.ycombinator.com/', weight: 6 },
   { url: 'https://www.reddit.com/', weight: 4 },
+  { url: 'https://www.bing.com/', weight: 5 },
+  { url: 'https://duckduckgo.com/', weight: 3 },
+  { url: 'https://www.linkedin.com/', weight: 7 },
+  { url: 'https://www.facebook.com/', weight: 5 },
+  { url: 'https://www.youtube.com/', weight: 6 },
+  { url: 'https://stackoverflow.com/', weight: 5 },
+  { url: 'https://dev.to/', weight: 3 },
+  { url: 'https://medium.com/', weight: 4 },
+  { url: 'https://discord.com/', weight: 3 },
+  { url: 'https://t.me/', weight: 2 },
+  { url: 'https://www.indiehackers.com/', weight: 2 },
+  { url: 'https://hashnode.com/', weight: 2 },
+  { url: 'https://lobste.rs/', weight: 1 },
+  { url: 'https://www.bing.com/search', weight: 2 },
+  { url: 'https://search.brave.com/', weight: 1 },
+  { url: 'https://www.quora.com/', weight: 2 },
+  { url: 'https://www.tiktok.com/', weight: 2 },
+  { url: 'https://mastodon.social/', weight: 1 },
+  { url: 'https://bsky.app/', weight: 2 },
+  { url: 'https://www.npmjs.com/', weight: 3 },
+  { url: 'https://vercel.com/', weight: 2 },
+  { url: 'https://supabase.com/', weight: 1 },
+  { url: 'https://nextjs.org/', weight: 2 },
+  { url: 'https://react.dev/', weight: 1 },
 ];
 const BULK_REFERRER_WEIGHT_TOTAL = BULK_REFERRERS.reduce((sum, r) => sum + r.weight, 0);
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx
index 6aedb6dc77..e957fdaa7e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx
@@ -11,7 +11,7 @@ import { AdminOwnedProject, Team, useStackApp, useUser } from "@stackframe/stack
 import { isPaidPlan } from "@stackframe/stack-shared/dist/plans";
 import { projectOnboardingStatusValues, strictEmailSchema, yupObject, type ProjectOnboardingStatus } from "@stackframe/stack-shared/dist/schema-fields";
 import { groupBy } from "@stackframe/stack-shared/dist/utils/arrays";
-import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { captureError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously, runAsynchronouslyWithAlert, wait } from "@stackframe/stack-shared/dist/utils/promises";
 import { useQueryState } from "@stackframe/stack-shared/dist/utils/react";
 import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
@@ -102,10 +102,10 @@ function ProjectsListPage() {
   const [recentConfigProjectsError, setRecentConfigProjectsError] = useState(false);
   const [projectStatuses, setProjectStatuses] = useState<Map<string, ProjectOnboardingStatus>>(new Map());
   const [loadingProjectStatuses, setLoadingProjectStatuses] = useState(true);
-  const [projectWeeklyUsers, setProjectWeeklyUsers] = useState<Map<string, number>>(new Map());
-  const [projectWeeklyUsersChart, setProjectWeeklyUsersChart] = useState<Map<string, { date: string, activity: number }[]>>(new Map());
-  const [loadingProjectWeeklyUsers, setLoadingProjectWeeklyUsers] = useState(true);
-  const [projectWeeklyUsersError, setProjectWeeklyUsersError] = useState(false);
+  const [projectTotalUsers, setProjectTotalUsers] = useState<Map<string, number>>(new Map());
+  const [projectDailySignups, setProjectDailySignups] = useState<Map<string, { date: string, activity: number }[]>>(new Map());
+  const [loadingProjectMetrics, setLoadingProjectMetrics] = useState(true);
+  const [projectMetricsError, setProjectMetricsError] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -159,15 +159,15 @@ function ProjectsListPage() {
 
   useEffect(() => {
     let cancelled = false;
-    runAsynchronouslyWithAlert(async () => {
+    runAsynchronously(async () => {
       if (!cancelled) {
-        setLoadingProjectWeeklyUsers(true);
-        setProjectWeeklyUsersError(false);
+        setLoadingProjectMetrics(true);
+        setProjectMetricsError(false);
       }
       try {
-        const response = await appInternals.sendRequest("/internal/projects-weekly-users", {}, "client");
+        const response = await appInternals.sendRequest("/internal/projects-metrics", {}, "client");
         if (!response.ok) {
-          throw new Error(`Failed to load project weekly users: ${response.status} ${await response.text()}`);
+          throw new Error(`Failed to load project metrics: ${response.status} ${await response.text()}`);
         }
         const body = await response.json();
         if (
@@ -178,24 +178,24 @@ function ProjectsListPage() {
           typeof body.projects !== "object" ||
           Array.isArray(body.projects)
         ) {
-          throw new Error("Failed to load project weekly users: response body did not include a projects object.");
+          throw new Error("Failed to load project metrics: response body did not include a projects object.");
         }
-        const weeklyUsersMap = new Map<string, number>();
-        const weeklyUsersChartMap = new Map<string, { date: string, activity: number }[]>();
+        const totalUsersMap = new Map<string, number>();
+        const dailySignupsMap = new Map<string, { date: string, activity: number }[]>();
         for (const [projectId, value] of Object.entries(body.projects)) {
           if (value == null || typeof value !== "object") {
             continue;
           }
-          const weeklyUsers = "weekly_users" in value ? value.weekly_users : undefined;
-          if (typeof weeklyUsers === "number") {
-            weeklyUsersMap.set(projectId, weeklyUsers);
+          const totalUsers = "total_users" in value ? value.total_users : undefined;
+          if (typeof totalUsers === "number") {
+            totalUsersMap.set(projectId, totalUsers);
           }
-          const dailyUsers = "daily_users" in value ? value.daily_users : undefined;
-          if (!Array.isArray(dailyUsers)) {
+          const dailySignups = "daily_signups" in value ? value.daily_signups : undefined;
+          if (!Array.isArray(dailySignups)) {
             continue;
           }
           const points: { date: string, activity: number }[] = [];
-          for (const point of dailyUsers) {
+          for (const point of dailySignups) {
             if (point != null && typeof point === "object" && "date" in point && "activity" in point) {
               const date = point.date;
               const activity = point.activity;
@@ -204,20 +204,20 @@ function ProjectsListPage() {
               }
             }
           }
-          weeklyUsersChartMap.set(projectId, points);
+          dailySignupsMap.set(projectId, points);
         }
+
         if (!cancelled) {
-          setProjectWeeklyUsers(weeklyUsersMap);
-          setProjectWeeklyUsersChart(weeklyUsersChartMap);
+          setProjectTotalUsers(totalUsersMap);
+          setProjectDailySignups(dailySignupsMap);
         }
       } catch (error) {
-        if (!cancelled) {
-          setProjectWeeklyUsersError(true);
-        }
-        throw error;
+        if (cancelled) return;
+        setProjectMetricsError(true);
+        captureError("projects-page-load-metrics", error);
       } finally {
         if (!cancelled) {
-          setLoadingProjectWeeklyUsers(false);
+          setLoadingProjectMetrics(false);
         }
       }
     });
@@ -541,10 +541,10 @@ function ProjectsListPage() {
                     project={project}
                     href={projectHref}
                     showIncompleteBadge={!loadingProjectStatuses && onboardingStatus !== "completed"}
-                    weeklyUsers={projectWeeklyUsers.get(project.id)}
-                    weeklyUsersChart={projectWeeklyUsersChart.get(project.id)}
-                    weeklyUsersLoading={loadingProjectWeeklyUsers}
-                    weeklyUsersError={projectWeeklyUsersError}
+                    totalUsers={projectTotalUsers.get(project.id)}
+                    dailySignups={projectDailySignups.get(project.id)}
+                    metricsLoading={loadingProjectMetrics}
+                    metricsError={projectMetricsError}
                   />
                 );
               })}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
index a090c5843c..de728313eb 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx
@@ -6,6 +6,11 @@ import {
   useInfiniteListWindow,
   type DesignAnalyticsChartConfig
 } from "@/components/design-components";
+import {
+  ANALYTICS_CHART_DEFAULT_STATE,
+  AnalyticsChart,
+  type AnalyticsChartState,
+} from "@stackframe/dashboard-ui-components";
 import { useRouter } from "@/components/router";
 import {
   cn,
@@ -1910,10 +1915,6 @@ export function DonutChartDisplay({
   const total = datapoints.reduce((sum, d) => sum + d.count, 0);
   const hasData = datapoints.length > 0 && total > 0;
 
-  // Static snapshot pie — uses Recharts directly rather than forcing a
-  // time-series chart (AnalyticsChart) to render a single "fake" bucket.
-  // Lightweight, no state, and the pieces of data we actually need here are
-  // just a color + label per slice.
   const pieData = useMemo(
     () => datapoints.map((d) => {
       const brand = BRAND_CONFIG_MAP.get(d.method);
@@ -1924,9 +1925,53 @@ export function DonutChartDisplay({
     [datapoints],
   );
 
-  const innerRadius = compact ? 40 : 60;
-  const outerRadius = compact ? 55 : 85;
-  const sizeClass = compact ? "h-[150px] w-[150px]" : "h-[200px] w-[200px]";
+  const chartData = useMemo(
+    () => [{ ts: 0, values: { primary: total } }],
+    [total],
+  );
+  const chartSegments = useMemo(
+    () => [pieData.map((s) => s.value)],
+    [pieData],
+  );
+  const chartSegmentSeries = useMemo(
+    () => pieData.map((s) => ({ key: s.key, label: s.label })),
+    [pieData],
+  );
+  const chartPalette = useMemo(() => {
+    const colors = pieData.map((s) => s.color);
+    return {
+      primary: { kind: "explicit" as const, light: colors, dark: colors },
+    };
+  }, [pieData]);
+
+  const [chartState, setChartState] = useState<AnalyticsChartState>(() => ({
+    ...ANALYTICS_CHART_DEFAULT_STATE,
+    view: "pie",
+    layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) => {
+      if (l.kind === "primary") {
+        return { ...l, segmented: true, segments: chartSegments, segmentSeries: chartSegmentSeries };
+      }
+      if (l.kind === "compare") {
+        return { ...l, visible: false };
+      }
+      return l;
+    }),
+  }));
+
+  // Keep segments + series in sync when datapoints change.
+  const liveChartState = useMemo<AnalyticsChartState>(() => ({
+    ...chartState,
+    layers: chartState.layers.map((l) => {
+      if (l.kind === "primary") {
+        return { ...l, segmented: true, segments: chartSegments, segmentSeries: chartSegmentSeries };
+      }
+      return l;
+    }),
+  }), [chartState, chartSegments, chartSegmentSeries]);
+
+  const pieSize = compact
+    ? { innerRadius: 32, outerRadius: 48, className: "h-[140px]" }
+    : { innerRadius: 48, outerRadius: 72, className: "h-[180px]" };
 
   return (
     <ChartCard
@@ -1956,47 +2001,16 @@ export function DonutChartDisplay({
             </Typography>
           </div>
         ) : (
-          <>
-            <div className={cn("relative aspect-square", sizeClass)}>
-              <PieChart width={compact ? 150 : 200} height={compact ? 150 : 200}>
-                <Pie
-                  data={pieData}
-                  dataKey="value"
-                  nameKey="label"
-                  innerRadius={innerRadius}
-                  outerRadius={outerRadius}
-                  paddingAngle={1}
-                  isAnimationActive={false}
-                  stroke="none"
-                >
-                  {pieData.map((slice) => (
-                    <Cell key={slice.key} fill={slice.color} />
-                  ))}
-                </Pie>
-              </PieChart>
-              <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
-                <span className="text-[10px] uppercase tracking-wider text-muted-foreground">Total</span>
-                <span className="text-base font-semibold tabular-nums text-foreground">
-                  {total.toLocaleString()}
-                </span>
-              </div>
-            </div>
-            <ul className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs min-w-0 w-full">
-              {pieData.map((slice) => (
-                <li key={slice.key} className="flex items-center gap-2 min-w-0">
-                  <span
-                    className="h-2 w-2 rounded-full shrink-0"
-                    style={{ backgroundColor: slice.color }}
-                    aria-hidden
-                  />
-                  <span className="truncate text-muted-foreground">{slice.label}</span>
-                  <span className="ml-auto tabular-nums text-foreground">
-                    {slice.value.toLocaleString()}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          </>
+          <div className="w-full">
+            <AnalyticsChart
+              data={chartData}
+              state={liveChartState}
+              onChange={setChartState}
+              palette={chartPalette}
+              pie={pieSize}
+              plotMargin={{ top: 4, right: 8, bottom: 4, left: 8 }}
+            />
+          </div>
         )}
       </div>
     </ChartCard>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
index 47d077fed2..f542fef158 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
@@ -825,7 +825,7 @@ function ReferrersWithAnalyticsCard({
       <div className="px-4 py-3 border-b border-foreground/[0.05]">
         <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Top Referrers</span>
       </div>
-      <div ref={listWindow.scrollRef} className="p-4 pt-3 flex-1 min-h-0 overflow-y-auto flex flex-col gap-2">
+      <div ref={listWindow.scrollRef} className="p-4 pt-3 flex-1 min-h-0 max-h-[320px] overflow-y-auto flex flex-col gap-2">
         {!analyticsEnabled ? (
           <SetupAppPrompt projectId={projectId} appId="analytics" appLabel="Analytics" metricLabel="referrer metrics" />
         ) : topReferrers.length === 0 ? (
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx
index 95edd074dc..41b4bd9c5b 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx
@@ -456,7 +456,8 @@ function useEmailVerificationToggle() {
       okButton={{
         label: "Apply Change",
         onClick: async () => {
-          await pendingChange?.onConfirm();
+          if (pendingChange == null) return;
+          await pendingChange.onConfirm();
         },
       }}
       cancelButton={{ label: "Cancel" }}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
index ada9d83f48..65c202b082 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
@@ -16,7 +16,7 @@ import { AdminProject } from "@stackframe/stack";
 import { yupBoolean, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { sharedProviders } from "@stackframe/stack-shared/dist/utils/oauth";
 import { urlString } from "@stackframe/stack-shared/dist/utils/urls";
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { useWatch } from "react-hook-form";
 import * as yup from "yup";
@@ -231,7 +231,7 @@ function WarningInline() {
   );
 }
 
-function NoteInline({ children }: { children: React.ReactNode }) {
+function NoteInline({ children }: { children: ReactNode }) {
   return (
     <p className="flex items-start gap-2 text-[11px] text-muted-foreground">
       <InfoIcon size={12} className="mt-[2px] shrink-0" />
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/onboarding-email-verification-setting.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/onboarding-email-verification-setting.tsx
new file mode 100644
index 0000000000..1bfa73a6bf
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/onboarding-email-verification-setting.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Switch, Typography } from "@/components/ui";
+import { EnvelopeSimple } from "@phosphor-icons/react";
+import { useId } from "react";
+
+const DESCRIPTION =
+  "Require a verified primary email before users can continue after sign-up.";
+
+export type OnboardingEmailVerificationSettingProps = {
+  isEnabled: boolean,
+  isToggling: boolean,
+  onCheckedChange: (checked: boolean) => void,
+};
+
+/**
+ * Settings-strip layout: label + description + switch in one compact row.
+ */
+export function OnboardingEmailVerificationSetting({
+  isEnabled,
+  isToggling,
+  onCheckedChange,
+}: OnboardingEmailVerificationSettingProps) {
+  const switchId = useId();
+  return (
+    <div className="flex flex-col gap-3 rounded-2xl bg-foreground/[0.02] p-4 ring-1 ring-foreground/[0.06] sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex min-w-0 items-start gap-3">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-foreground/[0.04] ring-1 ring-foreground/[0.06]">
+          <EnvelopeSimple className="h-4 w-4 text-muted-foreground" />
+        </div>
+        <label htmlFor={switchId} className="min-w-0 cursor-pointer">
+          <Typography className="text-sm font-medium text-foreground">
+            Require email verification
+          </Typography>
+          <Typography variant="secondary" className="text-xs">
+            {DESCRIPTION}
+          </Typography>
+        </label>
+      </div>
+      <div className="flex shrink-0 justify-end sm:pl-4">
+        <Switch
+          id={switchId}
+          checked={isEnabled}
+          disabled={isToggling}
+          loading={isToggling}
+          onCheckedChange={onCheckedChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx
index a97c02bc10..deac771312 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/onboarding/page-client.tsx
@@ -1,16 +1,21 @@
 "use client";
 
 import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
-import { DesignBadge } from "@/components/design-components";
-import { DesignCard } from "@/components/design-components";
-import { ActionDialog, Spinner, Switch } from "@/components/ui";
+import {
+  DesignBadge,
+  DesignButton,
+  DesignDialog,
+  DesignDialogClose,
+} from "@/components/design-components";
+import { Typography } from "@/components/ui";
 import { useUpdateConfig } from "@/lib/config-update";
-import { ShieldCheck } from "@phosphor-icons/react";
+import { WarningCircle } from "@phosphor-icons/react";
 import type { RestrictedReason } from "@stackframe/stack-shared/dist/schema-fields";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { useState } from "react";
 import { AppEnabledGuard } from "../app-enabled-guard";
 import { PageLayout } from "../page-layout";
+import { OnboardingEmailVerificationSetting } from "./onboarding-email-verification-setting";
 
 type AffectedUser = {
   id: string,
@@ -20,13 +25,118 @@ type AffectedUser = {
 };
 
 type PendingChange = {
-  title: string,
-  description: string,
   affectedUsers: AffectedUser[],
   totalAffectedCount: number,
   onConfirm: () => Promise<void>,
 };
 
+function EnableEmailVerificationDialog({
+  pendingChange,
+  onDismiss,
+}: {
+  pendingChange: PendingChange | null,
+  onDismiss: () => void,
+}) {
+  const [isConfirming, setIsConfirming] = useState(false);
+  const description =
+    pendingChange == null
+      ? undefined
+      : pendingChange.totalAffectedCount === 1
+        ? "Existing user who has not verified will need to complete verification the next time they open your app."
+        : "Existing users who have not verified will need to complete verification the next time they open your app.";
+
+  return (
+    <DesignDialog
+      open={pendingChange != null}
+      onOpenChange={(open) => {
+        if (!open && !isConfirming) {
+          onDismiss();
+        }
+      }}
+      size="lg"
+      icon={WarningCircle}
+      title="Enable email verification?"
+      description={description}
+      footer={(
+        <>
+          <DesignDialogClose asChild>
+            <DesignButton variant="secondary" size="sm" disabled={isConfirming}>
+              <span>Cancel</span>
+            </DesignButton>
+          </DesignDialogClose>
+          <DesignButton
+            size="sm"
+            disabled={isConfirming}
+            onClick={() => {
+              if (pendingChange == null || isConfirming) return;
+              setIsConfirming(true);
+              runAsynchronouslyWithAlert(
+                pendingChange.onConfirm().finally(() => setIsConfirming(false)),
+              );
+            }}
+          >
+            <span>{isConfirming ? "Enabling…" : "Enable"}</span>
+          </DesignButton>
+        </>
+      )}
+    >
+      {pendingChange != null && (
+        <div className="flex flex-col gap-3">
+          {pendingChange.affectedUsers.length > 0 && (
+            <div>
+              <div className="mb-2 flex flex-wrap items-baseline gap-2">
+                <span className="text-lg font-semibold tabular-nums text-primary">
+                  {pendingChange.totalAffectedCount.toLocaleString()}
+                </span>
+                <Typography variant="secondary" className="text-[10px] font-semibold uppercase tracking-wider">
+                  Affected accounts
+                </Typography>
+              </div>
+              <div className="max-h-[min(200px,35vh)] overflow-y-auto rounded-xl bg-background/60 ring-1 ring-foreground/[0.06]">
+                <ul className="divide-y divide-foreground/[0.06]">
+                  {pendingChange.affectedUsers.map((user) => (
+                    <li
+                      key={user.id}
+                      className="flex flex-col gap-0.5 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3"
+                    >
+                      <div className="min-w-0">
+                        <span className="block truncate text-sm font-medium text-foreground">
+                          {user.displayName || user.primaryEmail || "Anonymous user"}
+                        </span>
+                        {user.displayName && user.primaryEmail && (
+                          <span className="block truncate text-xs text-muted-foreground">
+                            {user.primaryEmail}
+                          </span>
+                        )}
+                      </div>
+                      <div className="w-fit shrink-0">
+                        <DesignBadge
+                          label={user.restrictedReason.type === "email_not_verified" ? "Unverified" : "Anonymous"}
+                          color="orange"
+                          size="sm"
+                        />
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+                {pendingChange.totalAffectedCount > pendingChange.affectedUsers.length && (
+                  <p className="border-t border-foreground/[0.06] px-3 py-2 text-xs text-muted-foreground">
+                    +
+                    {" "}
+                    {(pendingChange.totalAffectedCount - pendingChange.affectedUsers.length).toLocaleString()}
+                    {" "}
+                    more
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </DesignDialog>
+  );
+}
+
 export default function PageClient() {
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
@@ -39,7 +149,6 @@ export default function PageClient() {
   const handleEmailVerificationChange = async (checked: boolean) => {
     setIsToggling(true);
     try {
-      // If enabling email verification, check for affected users first
       if (checked && !projectConfig.onboarding.requireEmailVerification) {
         // any cast needed: previewAffectedUsersByOnboardingChange is a dynamically-typed admin API method
         const preview = await (stackAdminApp as any).previewAffectedUsersByOnboardingChange(
@@ -49,8 +158,6 @@ export default function PageClient() {
 
         if (preview.totalAffectedCount > 0) {
           setPendingChange({
-            title: "Enable email verification requirement",
-            description: `This change will require ${preview.totalAffectedCount} user${preview.totalAffectedCount === 1 ? '' : 's'} to verify their email before they can continue using your application. They will be prompted to do so the next time they visit your application.`,
             affectedUsers: preview.affectedUsers,
             totalAffectedCount: preview.totalAffectedCount,
             onConfirm: async () => {
@@ -66,7 +173,6 @@ export default function PageClient() {
         }
       }
 
-      // No affected users or disabling — apply directly
       await updateConfig({
         adminApp: stackAdminApp,
         configUpdate: { "onboarding.requireEmailVerification": checked },
@@ -79,101 +185,24 @@ export default function PageClient() {
 
   return (
     <AppEnabledGuard appId="onboarding">
-      <PageLayout title="Onboarding">
-        <DesignCard gradient="default" glassmorphic>
-          <div className="flex flex-col gap-4">
-            {/* Header row: icon + title + badge + switch */}
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex items-center gap-2 min-w-0">
-                <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
-                  <ShieldCheck className="h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" />
-                </div>
-                <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
-                  Email Verification
-                </span>
-                <DesignBadge
-                  label={isEnabled ? "Enabled" : "Disabled"}
-                  color={isEnabled ? "green" : "red"}
-                  size="sm"
-                />
-              </div>
-              <div className="flex items-center flex-shrink-0">
-                {isToggling ? (
-                  <div className="flex items-center justify-center h-5 w-9">
-                    <Spinner size={14} className="text-muted-foreground" />
-                  </div>
-                ) : (
-                  <Switch
-                    checked={isEnabled}
-                    onCheckedChange={(checked) => {
-                      runAsynchronouslyWithAlert(handleEmailVerificationChange(checked));
-                    }}
-                  />
-                )}
-              </div>
-            </div>
-
-            {/* Description */}
-            <p className="text-sm text-muted-foreground leading-relaxed">
-              {isEnabled
-                ? "Users who haven\u2019t verified their primary email will need to complete verification before they can continue. Unverified users are filtered out by default when listing users, and will be redirected to verify when using the SDK with redirect options."
-                : "Email verification is not required. Users can access your application without verifying their email address."
-              }
-            </p>
-          </div>
-        </DesignCard>
+      <PageLayout
+        title="Onboarding"
+        description="Control first-run requirements so users meet your app’s trust bar before they continue."
+      >
+        <div className="flex flex-col gap-4">
+          <OnboardingEmailVerificationSetting
+            isEnabled={isEnabled}
+            isToggling={isToggling}
+            onCheckedChange={(checked: boolean) => {
+              runAsynchronouslyWithAlert(handleEmailVerificationChange(checked));
+            }}
+          />
+        </div>
 
-        <ActionDialog
-          open={!!pendingChange}
-          onClose={() => setPendingChange(null)}
-          title="Enable email verification?"
-          danger
-          okButton={{
-            label: "Enable",
-            onClick: async () => {
-              await pendingChange?.onConfirm();
-            },
-          }}
-          cancelButton={{
-            label: "Cancel",
-          }}
-        >
-          {pendingChange && (
-            <div className="flex flex-col gap-3">
-              <p className="text-sm text-muted-foreground">
-                {pendingChange.totalAffectedCount} existing user{pendingChange.totalAffectedCount === 1 ? '' : 's'} will
-                need to verify their email next time they visit your app.
-              </p>
-
-              {pendingChange.affectedUsers.length > 0 && (
-                <div className="flex flex-col gap-1.5">
-                  {pendingChange.affectedUsers.map((user) => (
-                    <div key={user.id} className="flex items-center gap-2 text-sm">
-                      <span className="text-foreground truncate">
-                        {user.displayName || user.primaryEmail || "Anonymous user"}
-                      </span>
-                      {user.displayName && user.primaryEmail && (
-                        <span className="text-muted-foreground truncate text-xs">
-                          {user.primaryEmail}
-                        </span>
-                      )}
-                      <DesignBadge
-                        label={user.restrictedReason.type === "email_not_verified" ? "Unverified" : "Anonymous"}
-                        color="orange"
-                        size="sm"
-                      />
-                    </div>
-                  ))}
-                  {pendingChange.totalAffectedCount > pendingChange.affectedUsers.length && (
-                    <p className="text-xs text-muted-foreground">
-                      + {pendingChange.totalAffectedCount - pendingChange.affectedUsers.length} more
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </ActionDialog>
+        <EnableEmailVerificationDialog
+          pendingChange={pendingChange}
+          onDismiss={() => setPendingChange(null)}
+        />
       </PageLayout>
     </AppEnabledGuard>
   );
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx
index cb5f12edd2..20b687cc1c 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx
@@ -4,6 +4,10 @@ import { CountryCodeInput } from "@/components/country-code-select";
 import { ConditionBuilder, isConditionTreeValid } from "@/components/rule-builder";
 import {
   ActionDialog,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   cn,
   Dialog,
   DialogBody,
@@ -467,6 +471,10 @@ function RuleTriggerHistoryDialog({
     <DesignDialog
       open={open}
       onOpenChange={handleOpenChange}
+      size="2xl"
+      icon={PulseIcon}
+      title="Rule trigger history"
+      description={`${totalLabel} for this rule`}
       trigger={(
         <button
           type="button"
@@ -483,10 +491,6 @@ function RuleTriggerHistoryDialog({
           />
         </button>
       )}
-      size="2xl"
-      icon={PulseIcon}
-      title="Rule trigger history"
-      description={`${totalLabel} for this rule`}
       headerContent={(
         <div className="rounded-xl bg-foreground/[0.02] ring-1 ring-foreground/[0.06] p-3 space-y-3">
           <div className="flex items-center gap-2 min-w-0">
@@ -521,53 +525,55 @@ function RuleTriggerHistoryDialog({
         </DesignDialogClose>
       )}
     >
-      <div className="flex items-center justify-between">
-        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          Recent triggers
-        </span>
-        {!isInitialLoading && triggers.length > 0 && (
-          <Typography variant="secondary" className="text-[11px] tabular-nums">
-            showing {triggers.length}{hasMore ? "+" : ""}
-          </Typography>
-        )}
-      </div>
-
-      {loadingError ? (
-        <DesignAlert variant="error" description={loadingError} />
-      ) : null}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Recent triggers
+          </span>
+          {!isInitialLoading && triggers.length > 0 && (
+            <Typography variant="secondary" className="text-[11px] tabular-nums">
+              showing {triggers.length}{hasMore ? "+" : ""}
+            </Typography>
+          )}
+        </div>
 
-      <div
-        className="max-h-[360px] overflow-auto rounded-xl ring-1 ring-foreground/[0.06] bg-background/60"
-        onScroll={handleScroll}
-      >
-        {isInitialLoading ? (
-          <div className="space-y-2 p-3">
-            {["one", "two", "three", "four", "five"].map((skeletonId) => (
-              <DesignSkeleton key={skeletonId} className="h-11 rounded-lg" />
-            ))}
-          </div>
-        ) : triggers.length === 0 ? (
-          <DesignEmptyState
-            icon={ClockIcon}
-            title="No triggers yet"
-            description={
-              isSparklineLoading
-                ? "Loading recent activity…"
-                : "Once a sign-up matches this rule, you'll see it appear here."
-            }
-          />
-        ) : (
-          <div className="divide-y divide-foreground/[0.06]">
-            {triggers.map((trigger) => (
-              <TriggerRow key={trigger.id} trigger={trigger} />
-            ))}
-          </div>
-        )}
-        {isLoadingMore ? (
-          <div className="p-3">
-            <DesignSkeleton className="h-9 rounded-lg" />
-          </div>
+        {loadingError ? (
+          <DesignAlert variant="error" description={loadingError} />
         ) : null}
+
+        <div
+          className="max-h-[360px] overflow-auto rounded-xl ring-1 ring-foreground/[0.06] bg-background/60"
+          onScroll={handleScroll}
+        >
+          {isInitialLoading ? (
+            <div className="space-y-2 p-3">
+              {["one", "two", "three", "four", "five"].map((skeletonId) => (
+                <DesignSkeleton key={skeletonId} className="h-11 rounded-lg" />
+              ))}
+            </div>
+          ) : triggers.length === 0 ? (
+            <DesignEmptyState
+              icon={ClockIcon}
+              title="No triggers yet"
+              description={
+                isSparklineLoading
+                  ? "Loading recent activity…"
+                  : "Once a sign-up matches this rule, you'll see it appear here."
+              }
+            />
+          ) : (
+            <div className="divide-y divide-foreground/[0.06]">
+              {triggers.map((trigger) => (
+                <TriggerRow key={trigger.id} trigger={trigger} />
+              ))}
+            </div>
+          )}
+          {isLoadingMore ? (
+            <div className="p-3">
+              <DesignSkeleton className="h-9 rounded-lg" />
+            </div>
+          ) : null}
+        </div>
       </div>
     </DesignDialog>
   );
@@ -722,7 +728,7 @@ function SaveCancelButtons({ state, size = "sm" }: { state: RuleEditorState, siz
 
 function ConditionsPanel({ state }: { state: RuleEditorState }) {
   return (
-    <div className="p-3 rounded-xl bg-foreground/[0.03] ring-1 ring-foreground/[0.04]">
+    <div className="p-3 rounded-xl bg-white ring-1 ring-foreground/[0.08] dark:bg-background">
       <ConditionBuilder value={state.conditionTree} onChange={state.setConditionTree} />
     </div>
   );
@@ -731,7 +737,7 @@ function ConditionsPanel({ state }: { state: RuleEditorState }) {
 function NumberedStep({ n, title, children }: { n: number, title: string, children: React.ReactNode }) {
   return (
     <div className="flex items-start gap-3">
-      <div className="h-6 w-6 rounded-full bg-primary/10 ring-1 ring-primary/20 text-primary text-[11px] font-semibold flex items-center justify-center tabular-nums shrink-0 mt-0.5">
+      <div className="h-6 w-6 rounded-full bg-white ring-1 ring-foreground/[0.12] text-muted-foreground text-[11px] font-semibold flex items-center justify-center tabular-nums shrink-0 mt-0.5 dark:bg-background">
         {n}
       </div>
       <div className="flex-1 min-w-0 space-y-2">
@@ -752,7 +758,7 @@ function RuleEditor(props: {
   const state = useRuleEditorState(props);
 
   return (
-    <div className="rounded-2xl bg-background/70 backdrop-blur-xl ring-2 ring-primary/40 shadow-sm transition-all duration-150 hover:transition-none p-4 space-y-4">
+    <div className="rounded-xl bg-white ring-1 ring-foreground/[0.14] shadow-sm transition-colors duration-150 hover:transition-none p-4 space-y-4 dark:bg-background">
       <NumberedStep n={1} title="Name this rule">
         <div className="flex items-center gap-3">
           <DesignInput
@@ -786,11 +792,12 @@ function RuleEditor(props: {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// SortableRuleRow — card row with kebab menu (final layout)
+// SortableRuleRow — table-style row with kebab menu
 // ─────────────────────────────────────────────────────────────────────────────
 
 type RuleRowProps = {
   entry: SignUpRuleEntry,
+  index: number,
   analytics?: RuleAnalytics,
   analyticsTimespanHours: number,
   isAnalyticsLoading: boolean,
@@ -816,10 +823,11 @@ function SortableRuleRow(props: RuleRowProps) {
   const conditionSummary = props.entry.rule.condition || '(no condition)';
   const isEnabled = props.entry.rule.enabled !== false;
   const ruleName = props.entry.rule.displayName || 'Unnamed rule';
+  const orderLabel = String(props.index + 1).padStart(2, "0");
 
   if (props.isEditing) {
     return (
-      <div ref={setNodeRef} style={style}>
+      <div ref={setNodeRef} style={style} className="p-3">
         <RuleEditor
           rule={props.entry.rule}
           ruleId={props.entry.id}
@@ -855,31 +863,40 @@ function SortableRuleRow(props: RuleRowProps) {
     <div
       {...dragBindings}
       className={cn(
-        "rounded-2xl bg-background/70 backdrop-blur-xl ring-1 ring-foreground/[0.06] shadow-sm",
-        "flex items-center gap-3 p-4 cursor-grab active:cursor-grabbing",
-        !isDragging && "transition-all duration-150 hover:transition-none",
-        isDragging && "opacity-50 shadow-lg z-10",
+        "grid min-h-16 grid-cols-[3rem_minmax(0,1fr)_auto] items-center gap-3 px-3 py-3 cursor-grab active:cursor-grabbing",
+        "border-b border-foreground/[0.06] bg-white last:border-b-0 dark:bg-background",
+        "sm:grid-cols-[3rem_3rem_minmax(0,1fr)_7rem_7rem_2.5rem]",
+        !isDragging && "transition-colors duration-150 hover:bg-foreground/[0.025] hover:transition-none",
+        isDragging && "opacity-50 shadow-lg z-10 bg-background",
       )}
     >
-      <DotsSixVerticalIcon className="h-4 w-4 text-muted-foreground/60 shrink-0" />
-      {switchControl}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <DotsSixVerticalIcon className="h-4 w-4 text-muted-foreground/50 shrink-0" />
+        <span className="text-[11px] font-medium tabular-nums">{orderLabel}</span>
+      </div>
+      <div className="hidden sm:flex items-center">
+        {switchControl}
+      </div>
+      <div className="min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="sm:hidden">{switchControl}</span>
           <Typography className={cn("font-medium text-sm truncate", !isEnabled && "text-muted-foreground line-through")}>
             {ruleName}
           </Typography>
-          <ActionBadge type={actionType} dim={!isEnabled} />
         </div>
         <Typography variant="secondary" className={cn("text-xs truncate mt-0.5 font-mono", !isEnabled && "line-through")}>
           {conditionSummary}
         </Typography>
       </div>
+      <div className="hidden sm:flex items-center">
+        <ActionBadge type={actionType} dim={!isEnabled} />
+      </div>
       <div
-        className="flex items-center gap-2"
+        className="flex items-center justify-end gap-2"
         onClick={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
       >
-        <div className="hidden sm:flex items-center mr-1">
+        <div className="hidden sm:flex items-center">
           <RuleTriggerHistoryDialog
             ruleId={props.entry.id}
             ruleDisplayName={ruleName}
@@ -892,6 +909,9 @@ function SortableRuleRow(props: RuleRowProps) {
             isSparklineLoading={props.isAnalyticsLoading}
           />
         </div>
+        <div className="sm:hidden">
+          <ActionBadge type={actionType} dim={!isEnabled} />
+        </div>
         <DesignMenu
           variant="actions"
           trigger="icon"
@@ -930,18 +950,15 @@ function DefaultActionRow({
   onChange: (value: 'allow' | 'reject') => void,
 }) {
   return (
-    <div className="flex items-center justify-between gap-3 rounded-xl ring-1 ring-foreground/[0.06] bg-background/40 px-4 py-3">
-      <div className="flex items-center gap-2">
+    <div className="flex min-h-14 items-center justify-between gap-3 border-t border-foreground/[0.06] bg-gray-50 px-4 py-3 dark:bg-muted/10">
+      <div className="flex items-center gap-2 min-w-0">
         <ShieldCheckIcon className="h-4 w-4 text-muted-foreground" />
         <Typography className="text-sm">
           <span className="text-muted-foreground">If no rules match → </span>
           <span className="font-medium">{value === 'allow' ? 'Allow sign-up' : 'Reject sign-up'}</span>
         </Typography>
       </div>
-      <DesignMenu
-        variant="selector"
-        trigger="button"
-        triggerLabel={value === 'allow' ? 'Allow' : 'Reject'}
+      <DesignSelectorDropdown
         value={value}
         onValueChange={(v) => {
           if (!isDefaultAction(v)) {
@@ -949,9 +966,10 @@ function DefaultActionRow({
           }
           onChange(v);
         }}
+        className="w-32 shrink-0"
         options={[
-          { id: "allow", label: "Allow" },
-          { id: "reject", label: "Reject" },
+          { value: "allow", label: "Allow" },
+          { value: "reject", label: "Reject" },
         ]}
       />
     </div>
@@ -984,11 +1002,9 @@ function EmptyState({ onAddRule, disabled }: { onAddRule: () => void, disabled:
 
 const DEFAULT_TURNSTILE_OVERRIDE = "__default__";
 
-function TestRulesCard({
-  stackAdminApp,
-}: {
-  stackAdminApp: ReturnType<typeof useAdminApp>,
-}) {
+// Shared hook used by every TestRulesCard variant - encapsulates all the state
+// and the API call so the variants can focus purely on the UI.
+function useTestRulesState(stackAdminApp: ReturnType<typeof useAdminApp>) {
   const [email, setEmail] = useState('');
   const [authMethod, setAuthMethod] = useState<SignUpRulesTestResult['context']['auth_method']>('password');
   const [oauthProvider, setOauthProvider] = useState('');
@@ -1052,40 +1068,70 @@ function TestRulesCard({
     setResult(data);
   }, [authMethod, botRiskScoreOverride, countryCodeOverride, email, freeTrialAbuseRiskScoreOverride, oauthProvider, stackAdminApp, turnstileResultOverride]);
 
+  return {
+    email, setEmail,
+    authMethod, setAuthMethod,
+    oauthProvider, setOauthProvider,
+    countryCodeOverride, setCountryCodeOverride,
+    turnstileResultOverride, setTurnstileResultOverride,
+    botRiskScoreOverride, setBotRiskScoreOverride,
+    freeTrialAbuseRiskScoreOverride, setFreeTrialAbuseRiskScoreOverride,
+    result,
+    runTest,
+    isRunning,
+  };
+}
+
+type TestRulesState = ReturnType<typeof useTestRulesState>;
+
+const DECISION_LABEL: Record<SignUpRulesTestResult['outcome']['decision'], string> = {
+  allow: 'Allowed by rule',
+  reject: 'Rejected by rule',
+  'default-allow': 'Allowed by default',
+  'default-reject': 'Rejected by default',
+};
+
+const STATUS_LABEL: Record<SignUpRulesTestEvaluationStatus, string> = {
+  matched: 'Matched',
+  not_matched: 'No match',
+  disabled: 'Disabled',
+  missing_condition: 'No condition',
+  error: 'Error',
+};
+
+const statusBadgeColor = (status: SignUpRulesTestEvaluationStatus): "green" | "red" | "orange" | "blue" | undefined => {
+  if (status === 'matched') return 'green';
+  if (status === 'missing_condition') return 'orange';
+  if (status === 'error') return 'red';
+  return undefined;
+};
+
+function TestRulesCard({ state }: { state: TestRulesState }) {
+  const {
+    email, setEmail,
+    authMethod, setAuthMethod,
+    oauthProvider, setOauthProvider,
+    countryCodeOverride, setCountryCodeOverride,
+    turnstileResultOverride, setTurnstileResultOverride,
+    botRiskScoreOverride, setBotRiskScoreOverride,
+    freeTrialAbuseRiskScoreOverride, setFreeTrialAbuseRiskScoreOverride,
+    result,
+    runTest,
+    isRunning,
+  } = state;
+
   const evaluations = result?.evaluations ?? [];
   const matchedEvaluations = evaluations.filter((evaluation) => evaluation.status === 'matched');
   const decisionRule = result?.outcome.decision_rule_id
     ? evaluations.find((evaluation) => evaluation.rule_id === result.outcome.decision_rule_id)
     : undefined;
   const restrictedRule = result?.outcome.restricted_because_of_rule_id
+    && result.outcome.restricted_because_of_rule_id !== result.outcome.decision_rule_id
     ? evaluations.find((evaluation) => evaluation.rule_id === result.outcome.restricted_because_of_rule_id)
     : undefined;
-
   const outcomeLabel = result?.outcome.should_allow ? 'Allow' : 'Reject';
   const outcomeBadgeColor = result?.outcome.should_allow ? 'green' : 'red';
 
-  const statusBadgeColor = (status: SignUpRulesTestEvaluationStatus): "green" | "red" | "orange" | "blue" | undefined => {
-    if (status === 'matched') return 'green';
-    if (status === 'missing_condition') return 'orange';
-    if (status === 'error') return 'red';
-    return undefined;
-  };
-
-  const statusLabel: Record<SignUpRulesTestEvaluationStatus, string> = {
-    matched: 'Matched',
-    not_matched: 'No match',
-    disabled: 'Disabled',
-    missing_condition: 'No condition',
-    error: 'Error',
-  };
-
-  const decisionLabel: Record<SignUpRulesTestResult['outcome']['decision'], string> = {
-    allow: 'Allowed by rule',
-    reject: 'Rejected by rule',
-    'default-allow': 'Allowed by default',
-    'default-reject': 'Rejected by default',
-  };
-
   const fieldLabel = (text: string) => (
     <Typography variant="secondary" className="text-[10px] font-semibold uppercase tracking-wider">
       {text}
@@ -1271,7 +1317,7 @@ function TestRulesCard({
                   <DesignBadge label={outcomeLabel} color={outcomeBadgeColor} size="sm" />
                 </div>
                 <Typography variant="secondary" className="text-xs">
-                  {decisionLabel[result.outcome.decision]}
+                  {DECISION_LABEL[result.outcome.decision]}
                 </Typography>
                 {decisionRule && (
                   <Typography variant="secondary" className="text-xs">
@@ -1372,10 +1418,10 @@ function TestRulesCard({
                           <div className="flex items-center gap-1.5 flex-shrink-0">
                             <ActionBadge type={evaluation.action.type} />
                             {statusColor ? (
-                              <DesignBadge label={statusLabel[evaluation.status]} color={statusColor} size="sm" />
+                              <DesignBadge label={STATUS_LABEL[evaluation.status]} color={statusColor} size="sm" />
                             ) : (
                               <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                                {statusLabel[evaluation.status]}
+                                {STATUS_LABEL[evaluation.status]}
                               </span>
                             )}
                           </div>
@@ -1425,62 +1471,54 @@ function TestRulesDialog({
   trigger,
 }: {
   stackAdminApp: ReturnType<typeof useAdminApp>,
-  trigger: React.ReactNode,
+  trigger: React.ReactElement,
 }) {
+  const state = useTestRulesState(stackAdminApp);
+
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        {trigger}
-      </DialogTrigger>
-      <DialogContent
-        className="max-w-5xl gap-0 p-0 overflow-hidden border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"
-        overlayProps={{ className: "bg-black/50 backdrop-blur-sm" }}
-      >
-        <DialogHeader className="px-6 pt-6 pb-4 border-b border-foreground/[0.06]">
-          <div className="flex items-start gap-3">
-            <div className="h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0">
-              <FlaskIcon className="h-4 w-4 text-primary" />
-            </div>
-            <div className="flex-1 min-w-0 space-y-1">
-              <DialogTitle className="text-base">Test sign-up rules</DialogTitle>
-              <DialogDescription className="text-xs">
-                Simulate a sign-up request to preview which rules trigger and how the final decision is made.
-              </DialogDescription>
-            </div>
-          </div>
-        </DialogHeader>
-
-        <DialogBody className="mx-0 my-0 w-auto px-6 py-4">
-          <TestRulesCard stackAdminApp={stackAdminApp} />
-        </DialogBody>
-
-        <DialogFooter className="px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]">
-          <DialogClose asChild>
-            <DesignButton variant="secondary" size="sm">Close</DesignButton>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DesignDialog
+      size="5xl"
+      icon={FlaskIcon}
+      title="Test sign-up rules"
+      description="Simulate a sign-up request to preview which rules trigger and how the final decision is made."
+      trigger={trigger}
+      footer={(
+        <DesignDialogClose asChild>
+          <DesignButton variant="secondary" size="sm">Close</DesignButton>
+        </DesignDialogClose>
+      )}
+    >
+      <TestRulesCard state={state} />
+    </DesignDialog>
   );
 }
 
 function TestRulesPanel({ stackAdminApp }: { stackAdminApp: ReturnType<typeof useAdminApp> }) {
-  const triggerButton = (
-    <DesignButton size="sm" variant="secondary">
-      <FlaskIcon className="h-4 w-4 mr-1.5" />
-      Open tester
-    </DesignButton>
-  );
+  const state = useTestRulesState(stackAdminApp);
 
   return (
-    <DesignCard title="Test rules" subtitle="Try sample sign-ups without touching the live flow" icon={FlaskIcon} gradient="default">
-      <div className="flex items-center justify-between gap-3 flex-wrap">
-        <Typography variant="secondary" className="text-xs">
-          Run a simulated sign-up against your current ruleset and see the outcome.
-        </Typography>
-        <TestRulesDialog stackAdminApp={stackAdminApp} trigger={triggerButton} />
-      </div>
-    </DesignCard>
+    <Accordion type="single" collapsible className="w-full rounded-lg border border-foreground/[0.08] bg-white dark:bg-background">
+      <AccordionItem value="test-rules" className="border-0">
+        <AccordionTrigger className="px-4 py-3 hover:no-underline">
+          <div className="flex items-center gap-3 text-left">
+            <div className="h-7 w-7 rounded-md bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center">
+              <FlaskIcon className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Typography className="text-xs font-semibold uppercase tracking-wider">Test rules</Typography>
+              <Typography variant="secondary" className="text-xs font-normal">
+                Try sample sign-ups without touching the live flow
+              </Typography>
+            </div>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className="px-4 pb-4">
+          <div className="border-t border-foreground/[0.06] pt-4">
+            <TestRulesCard state={state} />
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   );
 }
 
@@ -1587,9 +1625,7 @@ type PageBodyProps = {
   isCreatingNew: boolean,
   newRuleId: string | null,
   editingRuleId: string | null,
-  hasOrderChanges: boolean,
   defaultAction: 'allow' | 'reject',
-  isSavingOrder: boolean,
   onAddRule: () => void,
   onSaveRule: (ruleId: string, rule: SignUpRule) => Promise<void>,
   onCancelEdit: () => void,
@@ -1598,8 +1634,6 @@ type PageBodyProps = {
   onToggleEnabled: (id: string, enabled: boolean) => void,
   onDefaultActionChange: (value: 'allow' | 'reject') => void,
   onDragEnd: (event: DragEndEvent) => void,
-  onSaveOrder: () => void,
-  onDiscardOrder: () => void,
   stackAdminApp: ReturnType<typeof useAdminApp>,
 };
 
@@ -1609,29 +1643,55 @@ function PageBody(props: PageBodyProps) {
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
-  const renderRules = () => (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={props.onDragEnd}>
-      <SortableContext items={props.signUpRules.map((r) => r.id)} strategy={verticalListSortingStrategy}>
-        <div className="flex flex-col gap-2">
-          {props.signUpRules.map((entry) => (
-            <SortableRuleRow
-              key={entry.id}
-              entry={entry}
-              analytics={props.ruleAnalytics.get(entry.id)}
-              analyticsTimespanHours={props.analyticsTimespanHours}
-              isAnalyticsLoading={props.isAnalyticsLoading}
-              isEditing={props.editingRuleId === entry.id}
-              onEdit={() => props.onEditRule(entry.id)}
-              onDelete={() => props.onRequestDelete(entry)}
-              onToggleEnabled={(enabled) => props.onToggleEnabled(entry.id, enabled)}
-              onSave={props.onSaveRule}
-              onCancelEdit={props.onCancelEdit}
-            />
-          ))}
+  const renderRules = () => {
+    if (props.signUpRules.length === 0) {
+      return (
+        <EmptyState
+          onAddRule={props.onAddRule}
+          disabled={props.editingRuleId !== null}
+        />
+      );
+    }
+
+    return (
+      <div className="overflow-hidden rounded-lg border border-foreground/[0.08] bg-white dark:bg-background">
+        <div className="hidden min-h-9 grid-cols-[3rem_3rem_minmax(0,1fr)_7rem_7rem_2.5rem] items-center gap-3 border-b border-foreground/[0.06] bg-gray-50 px-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground dark:bg-muted/20 sm:grid">
+          <span>Order</span>
+          <span>On</span>
+          <span>Rule / condition</span>
+          <span>Action</span>
+          <span>Activity</span>
+          <span />
         </div>
-      </SortableContext>
-    </DndContext>
-  );
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={props.onDragEnd}>
+          <SortableContext items={props.signUpRules.map((r) => r.id)} strategy={verticalListSortingStrategy}>
+            <div>
+              {props.signUpRules.map((entry, index) => (
+                <SortableRuleRow
+                  key={entry.id}
+                  entry={entry}
+                  index={index}
+                  analytics={props.ruleAnalytics.get(entry.id)}
+                  analyticsTimespanHours={props.analyticsTimespanHours}
+                  isAnalyticsLoading={props.isAnalyticsLoading}
+                  isEditing={props.editingRuleId === entry.id}
+                  onEdit={() => props.onEditRule(entry.id)}
+                  onDelete={() => props.onRequestDelete(entry)}
+                  onToggleEnabled={(enabled) => props.onToggleEnabled(entry.id, enabled)}
+                  onSave={props.onSaveRule}
+                  onCancelEdit={props.onCancelEdit}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+        <DefaultActionRow
+          value={props.defaultAction}
+          onChange={props.onDefaultActionChange}
+        />
+      </div>
+    );
+  };
 
   return (
     <div className="relative">
@@ -1645,56 +1705,20 @@ function PageBody(props: PageBodyProps) {
           />
         )}
 
-        {props.hasOrderChanges && (
-          <DesignAlert
-            variant="info"
-            title="Rule order has been changed"
-            description={
-              <span className="flex items-center gap-2">
-                <ArrowsDownUpIcon className="h-4 w-4" />
-                Save to commit, or discard to revert.
-              </span>
-            }
-          />
+        {(!props.isCreatingNew || props.signUpRules.length > 0) && (
+          renderRules()
         )}
 
-        {props.hasOrderChanges && (
-          <div className="flex items-center justify-end gap-2 mb-1">
-            <DesignButton
-              variant="ghost"
-              size="sm"
-              onClick={props.onDiscardOrder}
-              disabled={props.isSavingOrder}
-            >
-              <XIcon className="h-4 w-4 mr-1.5" />
-              Discard
-            </DesignButton>
-            <DesignButton
-              size="sm"
-              onClick={props.onSaveOrder}
-              loading={props.isSavingOrder}
-            >
-              <CheckIcon className="h-4 w-4 mr-1.5" />
-              Save order
-            </DesignButton>
+        {props.signUpRules.length === 0 && props.isCreatingNew && (
+          <div className="overflow-hidden rounded-lg border border-foreground/[0.08] bg-white dark:bg-background">
+            <DefaultActionRow
+              value={props.defaultAction}
+              onChange={props.onDefaultActionChange}
+            />
           </div>
         )}
 
-        {props.signUpRules.length > 0 && renderRules()}
-
-        {props.signUpRules.length === 0 && !props.isCreatingNew && (
-          <EmptyState
-            onAddRule={props.onAddRule}
-            disabled={props.editingRuleId !== null || props.hasOrderChanges}
-          />
-        )}
-
-        <DefaultActionRow
-          value={props.defaultAction}
-          onChange={props.onDefaultActionChange}
-        />
-
-        <div className="pt-10">
+        <div className="pt-6">
           <TestRulesPanel stackAdminApp={props.stackAdminApp} />
         </div>
 
@@ -1704,6 +1728,42 @@ function PageBody(props: PageBodyProps) {
   );
 }
 
+function OrderChangeActions({
+  isSavingOrder,
+  onSaveOrder,
+  onDiscardOrder,
+}: {
+  isSavingOrder: boolean,
+  onSaveOrder: () => Promise<void>,
+  onDiscardOrder: () => void,
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-amber-500/25 bg-amber-50 px-2 py-1.5 dark:bg-amber-950/20">
+      <span className="hidden items-center gap-1.5 px-1 text-xs text-amber-800 dark:text-amber-200 sm:flex">
+        <ArrowsDownUpIcon className="h-3.5 w-3.5" />
+        Unsaved order
+      </span>
+      <DesignButton
+        variant="ghost"
+        size="sm"
+        onClick={onDiscardOrder}
+        disabled={isSavingOrder}
+      >
+        <XIcon className="h-4 w-4 mr-1.5" />
+        Discard
+      </DesignButton>
+      <DesignButton
+        size="sm"
+        onClick={onSaveOrder}
+        loading={isSavingOrder}
+      >
+        <CheckIcon className="h-4 w-4 mr-1.5" />
+        Save order
+      </DesignButton>
+    </div>
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Page client — owns all state; passes handlers to PageBody
 // ─────────────────────────────────────────────────────────────────────────────
@@ -1858,13 +1918,22 @@ export default function PageClient() {
         title="Sign-up Rules"
         description="Create rules to control who can sign up. Rules are evaluated in order from top to bottom."
         actions={
-          <DesignButton
-            onClick={handleAddRule}
-            disabled={isAnyEditing || hasOrderChanges}
-          >
-            <PlusIcon className="h-4 w-4 mr-2" />
-            Add rule
-          </DesignButton>
+          <div className="flex items-center gap-2">
+            {hasOrderChanges && (
+              <OrderChangeActions
+                isSavingOrder={isSavingOrder}
+                onSaveOrder={handleSaveOrderAsync}
+                onDiscardOrder={handleDiscardOrder}
+              />
+            )}
+            <DesignButton
+              onClick={handleAddRule}
+              disabled={isAnyEditing || hasOrderChanges}
+            >
+              <PlusIcon className="h-4 w-4 mr-2" />
+              Add rule
+            </DesignButton>
+          </div>
         }
       >
         <PageBody
@@ -1875,9 +1944,7 @@ export default function PageClient() {
           isCreatingNew={isCreatingNew}
           newRuleId={newRuleId}
           editingRuleId={editingRuleId}
-          hasOrderChanges={hasOrderChanges}
           defaultAction={defaultAction}
-          isSavingOrder={isSavingOrder}
           onAddRule={handleAddRule}
           onSaveRule={handleSaveRule}
           onCancelEdit={handleCancelEdit}
@@ -1890,10 +1957,8 @@ export default function PageClient() {
             setDeleteDialogOpen(true);
           }}
           onToggleEnabled={(id, enabled) => runAsynchronouslyWithAlert(handleToggleEnabled(id, enabled))}
-          onDefaultActionChange={(v) => { runAsynchronouslyWithAlert(handleDefaultActionChange(v)); }}
+          onDefaultActionChange={(v) => runAsynchronouslyWithAlert(handleDefaultActionChange(v))}
           onDragEnd={handleDragEnd}
-          onSaveOrder={() => { runAsynchronouslyWithAlert(handleSaveOrderAsync()); }}
-          onDiscardOrder={handleDiscardOrder}
           stackAdminApp={stackAdminApp}
         />
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/widget-playground/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/widget-playground/page-client.tsx
index bbedefbd7d..22ceb4e617 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/widget-playground/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/widget-playground/page-client.tsx
@@ -1631,7 +1631,7 @@ function Draggable(props: {
                   A runtime error occured while rendering this widget.<br />
                   <br />
                   <button className="text-blue-500 hover:underline" onClick={() => {
-                    props.reset();
+                    props.reset?.();
                   }}>Reload widget</button><br />
                   <br />
                   {errorToNiceString(props.error)}
diff --git a/apps/dashboard/src/components/data-table/api-key-table.tsx b/apps/dashboard/src/components/data-table/api-key-table.tsx
index 1f3e566af1..a65a7a375e 100644
--- a/apps/dashboard/src/components/data-table/api-key-table.tsx
+++ b/apps/dashboard/src/components/data-table/api-key-table.tsx
@@ -230,6 +230,7 @@ export function InternalApiKeyTable(props: { apiKeys: InternalApiKey[], showPubl
         </Select>
       }
       footer={false}
+      fillHeight={false}
     />
   );
 }
diff --git a/apps/dashboard/src/components/project-card.tsx b/apps/dashboard/src/components/project-card.tsx
index 5616b9032e..c27e7d0e6e 100644
--- a/apps/dashboard/src/components/project-card.tsx
+++ b/apps/dashboard/src/components/project-card.tsx
@@ -2,7 +2,7 @@
 import { DesignBadge } from "@/components/design-components/badge";
 import { DesignCard } from "@/components/design-components/card";
 import { Link } from "@/components/link";
-import { ProjectWeeklyUsersMetric } from "@/components/project-weekly-users-metric";
+import { ProjectUsersMetric } from "@/components/project-users-metric";
 import { useFromNow } from '@/hooks/use-from-now';
 import { FolderOpenIcon } from "@phosphor-icons/react";
 import { AdminProject } from '@stackframe/stack';
@@ -12,10 +12,10 @@ export function ProjectCard(props: {
   project: AdminProject,
   href?: string,
   showIncompleteBadge?: boolean,
-  weeklyUsers?: number,
-  weeklyUsersChart?: { date: string, activity: number }[],
-  weeklyUsersLoading?: boolean,
-  weeklyUsersError?: boolean,
+  totalUsers?: number,
+  dailySignups?: { date: string, activity: number }[],
+  metricsLoading?: boolean,
+  metricsError?: boolean,
 }) {
   const createdAt = useFromNow(props.project.createdAt);
   const href = props.href ?? urlString`/projects/${props.project.id}`;
@@ -52,11 +52,11 @@ export function ProjectCard(props: {
         </div>
 
         <div className="-mx-3 -mb-3 mt-3 overflow-hidden rounded-b-2xl border-t border-black/[0.08] dark:border-white/[0.06] px-3 pt-3 pb-3">
-          <ProjectWeeklyUsersMetric
-            weeklyUsers={props.weeklyUsers}
-            data={props.weeklyUsersChart}
-            loading={props.weeklyUsersLoading}
-            error={props.weeklyUsersError}
+          <ProjectUsersMetric
+            totalUsers={props.totalUsers}
+            data={props.dailySignups}
+            loading={props.metricsLoading}
+            error={props.metricsError}
           />
         </div>
       </DesignCard>
diff --git a/apps/dashboard/src/components/project-weekly-users-metric.tsx b/apps/dashboard/src/components/project-users-metric.tsx
similarity index 65%
rename from apps/dashboard/src/components/project-weekly-users-metric.tsx
rename to apps/dashboard/src/components/project-users-metric.tsx
index 2ead069f1c..d6f13303e0 100644
--- a/apps/dashboard/src/components/project-weekly-users-metric.tsx
+++ b/apps/dashboard/src/components/project-users-metric.tsx
@@ -4,10 +4,6 @@ import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis } from 'recharts';
 import { useId } from 'react';
 
 type DataPoint = { date: string, activity: number };
-type ChartDataPoint = DataPoint & {
-  completeActivity: number | null,
-  incompleteActivity: number | null,
-};
 
 const CHART_HEIGHT = 56;
 const EMPTY_BASELINE_COUNT = 30;
@@ -16,23 +12,6 @@ function formatDay(iso: string): string {
   return new Date(iso).toLocaleDateString(undefined, { weekday: 'short', day: 'numeric' });
 }
 
-function getTodayUtcDateKey(): string {
-  const today = new Date();
-  today.setUTCHours(0, 0, 0, 0);
-  return today.toISOString().split("T")[0];
-}
-
-function toChartData(data: DataPoint[]): ChartDataPoint[] {
-  const todayKey = getTodayUtcDateKey();
-  const firstIncompleteIndex = data.findIndex((point) => point.date >= todayKey);
-
-  return data.map((point, index) => ({
-    ...point,
-    completeActivity: firstIncompleteIndex === -1 || index < firstIncompleteIndex ? point.activity : null,
-    incompleteActivity: firstIncompleteIndex !== -1 && index >= Math.max(0, firstIncompleteIndex - 1) ? point.activity : null,
-  }));
-}
-
 function EmptyBaseline({ count }: { count: number }) {
   return (
     <svg
@@ -55,25 +34,25 @@ function EmptyBaseline({ count }: { count: number }) {
   );
 }
 
-export function ProjectWeeklyUsersMetric(props: {
-  weeklyUsers: number | undefined,
+export function ProjectUsersMetric(props: {
+  totalUsers: number | undefined,
   data: DataPoint[] | undefined,
   loading?: boolean,
   error?: boolean,
 }) {
-  const weeklyUsers = props.weeklyUsers ?? 0;
+  const totalUsers = props.totalUsers ?? 0;
   const data = props.data;
-  const dailyTotal = data?.reduce((sum, d) => sum + d.activity, 0) ?? 0;
-  const hasActivity = weeklyUsers > 0 || dailyTotal > 0;
+  const signupsTotal = data?.reduce((sum, d) => sum + d.activity, 0) ?? 0;
+  const hasActivity = totalUsers > 0 || signupsTotal > 0;
   const gradId = useId().replace(/:/g, '');
 
-  if (props.loading && props.weeklyUsers === undefined) {
+  if (props.loading && props.totalUsers === undefined) {
     return (
       <div className="relative w-full" style={{ height: CHART_HEIGHT }}>
         <div className="absolute left-0 top-0 z-10 flex items-baseline gap-1">
           <span className="h-[18px] w-10 animate-pulse rounded bg-foreground/10" aria-hidden="true" />
           <span className="text-[9px] uppercase tracking-[0.14em] text-muted-foreground/60">
-            users/wk
+            total users
           </span>
         </div>
         <EmptyBaseline count={EMPTY_BASELINE_COUNT} />
@@ -81,7 +60,7 @@ export function ProjectWeeklyUsersMetric(props: {
     );
   }
 
-  if (props.error && props.weeklyUsers === undefined) {
+  if (props.error && props.totalUsers === undefined) {
     return (
       <div className="relative w-full" style={{ height: CHART_HEIGHT }}>
         <div className="absolute left-0 top-0 z-10 flex items-baseline gap-1">
@@ -89,7 +68,7 @@ export function ProjectWeeklyUsersMetric(props: {
             —
           </span>
           <span className="text-[9px] uppercase tracking-[0.14em] text-muted-foreground/60">
-            users/wk
+            total users
           </span>
         </div>
         <span className="absolute right-0 top-0 text-[9px] uppercase tracking-[0.14em] text-destructive/80">
@@ -100,8 +79,6 @@ export function ProjectWeeklyUsersMetric(props: {
     );
   }
 
-  const chartData = data ? toChartData(data) : undefined;
-
   return (
     <div className="relative w-full" style={{ height: CHART_HEIGHT }}>
       <div className="absolute left-0 top-0 z-10 flex items-baseline gap-1">
@@ -111,20 +88,23 @@ export function ProjectWeeklyUsersMetric(props: {
             (hasActivity ? 'text-foreground' : 'text-muted-foreground/50')
           }
         >
-          {weeklyUsers.toLocaleString()}
+          {totalUsers.toLocaleString()}
         </span>
         <span className="text-[9px] uppercase tracking-[0.14em] text-muted-foreground/60">
-          users/wk
+          total users
+        </span>
+        <span className="text-[9px] uppercase tracking-[0.14em] text-muted-foreground/40 ml-1">
+          · 30d signups
         </span>
       </div>
 
-      {hasActivity && chartData ? (
+      {hasActivity && data && data.length > 0 ? (
         <div className="absolute inset-0 text-foreground/80">
           <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={chartData} margin={{ top: 22, right: 0, left: 0, bottom: 0 }}>
+            <AreaChart data={data} margin={{ top: 22, right: 0, left: 0, bottom: 0 }}>
               <XAxis dataKey="date" hide />
               <defs>
-                <linearGradient id={`weekly-users-fill-${gradId}`} x1="0" y1="0" x2="0" y2="1">
+                <linearGradient id={`signups-fill-${gradId}`} x1="0" y1="0" x2="0" y2="1">
                   <stop offset="0%" stopColor="currentColor" stopOpacity={0.28} />
                   <stop offset="100%" stopColor="currentColor" stopOpacity={0} />
                 </linearGradient>
@@ -142,32 +122,16 @@ export function ProjectWeeklyUsersMetric(props: {
                 labelStyle={{ color: 'hsl(var(--muted-foreground))', marginBottom: 1, fontSize: 10 }}
                 itemStyle={{ color: 'hsl(var(--foreground))', padding: 0 }}
                 labelFormatter={(label: string) => formatDay(label)}
-                formatter={(value: number, name: string) => [
-                  value.toLocaleString(),
-                  name,
-                ]}
-              />
-              <Area
-                type="monotone"
-                dataKey="completeActivity"
-                name="daily active users"
-                stroke="currentColor"
-                strokeWidth={1.5}
-                fill={`url(#weekly-users-fill-${gradId})`}
-                isAnimationActive={false}
-                activeDot={{ r: 2.5, strokeWidth: 0, fill: 'currentColor' }}
+                formatter={(value: number) => [value.toLocaleString(), 'new signups']}
               />
               <Area
                 type="monotone"
-                dataKey="incompleteActivity"
-                name="daily active users (incomplete day)"
+                dataKey="activity"
                 stroke="currentColor"
                 strokeWidth={1.5}
-                strokeDasharray="3 3"
-                fill="transparent"
+                fill={`url(#signups-fill-${gradId})`}
                 isAnimationActive={false}
                 activeDot={{ r: 2.5, strokeWidth: 0, fill: 'currentColor' }}
-                connectNulls={false}
               />
             </AreaChart>
           </ResponsiveContainer>
diff --git a/packages/dashboard-ui-components/src/components/dialog.tsx b/packages/dashboard-ui-components/src/components/dialog.tsx
index cbea022da0..f0fc7c4238 100644
--- a/packages/dashboard-ui-components/src/components/dialog.tsx
+++ b/packages/dashboard-ui-components/src/components/dialog.tsx
@@ -107,6 +107,14 @@ export function DesignDialog({
   const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;
   const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;
   const shouldRenderBody = React.Children.count(children) > 0;
+  const hasStandardTitle = title != null;
+  const needsAccessibleTitleFallback = !hasStandardTitle && customHeader == null;
+
+  if (process.env.NODE_ENV !== "production" && needsAccessibleTitleFallback) {
+    console.warn(
+      "[DesignDialog] Rendered without a `title` or `customHeader`. Every dialog needs an accessible name — pass `title`, or render a `DialogTitle` inside `customHeader`.",
+    );
+  }
 
   return (
     <Dialog {...dialogRootProps}>
@@ -126,6 +134,9 @@ export function DesignDialog({
         overlayProps={resolvedOverlayClass ? { className: resolvedOverlayClass } : undefined}
         noCloseButton={hideTopCloseButton}
       >
+        {needsAccessibleTitleFallback && (
+          <DialogTitle className="sr-only">Dialog</DialogTitle>
+        )}
         {shouldRenderHeader && (
           <DialogHeader className={cn("px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName)}>
             {customHeader ?? (