diff --git a/apps/backend/.env.development b/apps/backend/.env.development
index c6f1072b9a..aa7c0e9586 100644
--- a/apps/backend/.env.development
+++ b/apps/backend/.env.development
@@ -58,9 +58,7 @@ STACK_VERCEL_SANDBOX_TOKEN=vercel_sandbox_disabled_for_local_development
 STACK_OPENAI_API_KEY=mock_openai_api_key
 STACK_STRIPE_SECRET_KEY=sk_test_mockstripekey
 STACK_STRIPE_WEBHOOK_SECRET=mock_stripe_webhook_secret
-
-STACK_OPENROUTER_API_KEY=mock-openrouter-api-key
-
+STACK_OPENROUTER_API_KEY=FORWARD_TO_PRODUCTION
 # Email monitor configuration for tests
 STACK_EMAIL_MONITOR_VERIFICATION_CALLBACK_URL=http://localhost:8101/handler/email-verification
 STACK_EMAIL_MONITOR_PROJECT_ID=internal
diff --git a/apps/backend/package.json b/apps/backend/package.json
index 813d93aa63..2c3cf85c26 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -52,10 +52,12 @@
     "seed": "pnpm run db-seed-script"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^1.3.23",
+    "@ai-sdk/mcp": "^1.0.21",
+    "@ai-sdk/openai": "^3.0.29",
     "@aws-sdk/client-s3": "^3.855.0",
     "@clickhouse/client": "^1.14.0",
     "@node-oauth/oauth2-server": "^5.1.0",
+    "@openrouter/ai-sdk-provider": "2.2.3",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/api-logs": "^0.53.0",
     "@opentelemetry/auto-instrumentations-node": "^0.67.3",
@@ -83,7 +85,7 @@
     "@vercel/functions": "^2.0.0",
     "@vercel/otel": "^1.10.4",
     "@vercel/sandbox": "^1.2.0",
-    "ai": "^4.3.17",
+    "ai": "^6.0.0",
     "bcrypt": "^5.1.1",
     "cel-js": "^0.8.2",
     "chokidar-cli": "^3.0.0",
diff --git a/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts b/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts
new file mode 100644
index 0000000000..aded240d53
--- /dev/null
+++ b/apps/backend/src/app/api/latest/ai/query/[mode]/route.ts
@@ -0,0 +1,136 @@
+import { forwardToProduction } from "@/lib/ai/forward";
+import { selectModel } from "@/lib/ai/models";
+import { getFullSystemPrompt } from "@/lib/ai/prompts";
+import { requestBodySchema } from "@/lib/ai/schema";
+import { getTools, validateToolNames } from "@/lib/ai/tools";
+import { listManagedProjectIds } from "@/lib/projects";
+import { SmartResponse } from "@/route-handlers/smart-response";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { yupMixed, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+import { Json } from "@stackframe/stack-shared/dist/utils/json";
+import { generateText, ModelMessage, stepCountIs, streamText } from "ai";
+
+export const POST = createSmartRouteHandler({
+  metadata: {
+    hidden: true,
+  },
+  request: yupObject({
+    params: yupObject({
+      mode: yupString().oneOf(["stream", "generate"]).defined(),
+    }),
+    body: requestBodySchema,
+  }),
+  response: yupMixed<SmartResponse>().defined(),
+  async handler({ params, body }, fullReq) {
+    const { mode } = params;
+
+    if (!validateToolNames(body.tools)) {
+      throw new StatusError(StatusError.BadRequest, `Invalid tool names in request.`);
+    }
+
+    const apiKey = getEnvVariable("STACK_OPENROUTER_API_KEY");
+
+
+    if (apiKey === "FORWARD_TO_PRODUCTION") {
+      const prodResponse = await forwardToProduction(mode, body);
+      return {
+        statusCode: prodResponse.status,
+        bodyType: "response" as const,
+        body: prodResponse,
+      };
+    }
+
+    const isAuthenticated = fullReq.auth != null;
+    const { quality, speed, systemPrompt: systemPromptId, tools: toolNames, messages, projectId } = body;
+
+    // Verify user has access to the target project
+    if (projectId != null) {
+      const user = fullReq.auth?.user;
+      if (user == null) {
+        throw new StatusError(StatusError.Forbidden, "You do not have access to this project");
+      }
+      const managedProjectIds = await listManagedProjectIds(user);
+      if (!managedProjectIds.includes(projectId)) {
+        throw new StatusError(StatusError.Forbidden, "You do not have access to this project");
+      }
+    }
+
+    const model = selectModel(quality, speed, isAuthenticated);
+    const systemPrompt = getFullSystemPrompt(systemPromptId);
+    const tools = await getTools(toolNames, { auth: fullReq.auth, targetProjectId: projectId });
+    const toolsArg = Object.keys(tools).length > 0 ? tools : undefined;
+    const isDocsOrSearch = systemPromptId === "docs-ask-ai" || systemPromptId === "command-center-ask-ai";
+    const stepLimit = toolsArg == null ? 1 : isDocsOrSearch ? 50 : 5;
+
+    if (mode === "stream") {
+      const result = streamText({
+        model,
+        system: systemPrompt,
+        messages: messages as ModelMessage[],
+        tools: toolsArg,
+        stopWhen: stepCountIs(stepLimit),
+      });
+      return {
+        statusCode: 200,
+        bodyType: "response" as const,
+        body: result.toUIMessageStreamResponse(),
+      };
+    } else {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 120_000);
+      const result = await generateText({
+        model,
+        system: systemPrompt,
+        messages: messages as ModelMessage[],
+        tools: toolsArg,
+        abortSignal: controller.signal,
+        stopWhen: stepCountIs(stepLimit),
+      }).finally(() => clearTimeout(timeoutId));
+
+      const contentBlocks: Array<
+        | { type: "text", text: string }
+        | {
+            type: "tool-call",
+            toolName: string,
+            toolCallId: string,
+            args: Json,
+            argsText: string,
+            result: Json,
+          }
+      > = [];
+
+      result.steps.forEach((step) => {
+        if (step.text) {
+          contentBlocks.push({
+            type: "text",
+            text: step.text,
+          });
+        }
+
+        const toolResultsByCallId = new Map(
+          step.toolResults.map((r) => [r.toolCallId, r])
+        );
+
+        step.toolCalls.forEach((toolCall) => {
+          const toolResult = toolResultsByCallId.get(toolCall.toolCallId);
+          contentBlocks.push({
+            type: "tool-call",
+            toolName: toolCall.toolName,
+            toolCallId: toolCall.toolCallId,
+            args: toolCall.input,
+            argsText: JSON.stringify(toolCall.input),
+            result: (toolResult?.output ?? null) as Json,
+          });
+        });
+      });
+
+      return {
+        statusCode: 200,
+        bodyType: "json" as const,
+        body: { content: contentBlocks },
+      };
+    }
+  },
+});
diff --git a/apps/backend/src/app/api/latest/internal/ai-chat/[threadId]/route.tsx b/apps/backend/src/app/api/latest/internal/ai-chat/[threadId]/route.tsx
index 4899cc7549..0b409c0b9d 100644
--- a/apps/backend/src/app/api/latest/internal/ai-chat/[threadId]/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/ai-chat/[threadId]/route.tsx
@@ -1,144 +1,6 @@
-import { getChatAdapter } from "@/lib/ai-chat/adapter-registry";
 import { globalPrismaClient } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
-import { createOpenAI } from "@ai-sdk/openai";
-import { adaptSchema, yupArray, yupMixed, yupNumber, yupObject, yupString, yupUnion } from "@stackframe/stack-shared/dist/schema-fields";
-import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
-import { generateText } from "ai";
-import { InferType } from "yup";
-
-const textContentSchema = yupObject({
-  type: yupString().oneOf(["text"]).defined(),
-  text: yupString().defined(),
-});
-
-const toolCallContentSchema = yupObject({
-  type: yupString().oneOf(["tool-call"]).defined(),
-  toolName: yupString().defined(),
-  toolCallId: yupString().defined(),
-  args: yupMixed().defined(),
-  argsText: yupString().defined(),
-  result: yupMixed().defined(),
-});
-
-const contentSchema = yupArray(yupUnion(textContentSchema, toolCallContentSchema)).defined();
-
-const messageSchema = yupObject({
-  role: yupString().oneOf(["user", "assistant", "tool"]).defined(),
-  content: yupMixed().defined(),
-});
-
-// Mock mode sentinel value - when API key is not configured, we return mock responses
-const MOCK_API_KEY_SENTINEL = "mock-openrouter-api-key";
-const apiKey = getEnvVariable("STACK_OPENROUTER_API_KEY", MOCK_API_KEY_SENTINEL);
-const isMockMode = apiKey === MOCK_API_KEY_SENTINEL;
-
-// Only create OpenAI client if not in mock mode
-const openai = isMockMode ? null : createOpenAI({
-  apiKey,
-  baseURL: "https://openrouter.ai/api/v1",
-});
-
-// AI request timeout in milliseconds (2 minutes)
-const AI_REQUEST_TIMEOUT_MS = 120_000;
-
-export const POST = createSmartRouteHandler({
-  metadata: {
-    hidden: true,
-  },
-  request: yupObject({
-    auth: yupObject({
-      type: yupString().oneOf(["admin"]).defined(),
-      tenancy: adaptSchema,
-    }),
-    params: yupObject({
-      threadId: yupString().defined(),
-    }),
-    body: yupObject({
-      context_type: yupString().oneOf(["email-theme", "email-template", "email-draft"]).defined(),
-      messages: yupArray(messageSchema).defined().min(1),
-    }),
-  }),
-  response: yupObject({
-    statusCode: yupNumber().oneOf([200]).defined(),
-    bodyType: yupString().oneOf(["json"]).defined(),
-    body: yupObject({
-      content: contentSchema,
-    }).defined(),
-  }),
-  async handler({ body, params, auth: { tenancy } }) {
-    // Mock mode: return a simple text response without calling AI
-    if (isMockMode) {
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: {
-          content: [{
-            type: "text",
-            text: "This is a mock AI response. Configure a real API key to enable AI features.",
-          }],
-        },
-      };
-    }
-
-    const adapter = getChatAdapter(body.context_type, tenancy, params.threadId);
-    // Model is configurable via env var; no default to surface missing config errors
-    const modelName = getEnvVariable("STACK_AI_MODEL");
-
-    if (!openai) {
-      // This shouldn't happen since we check isMockMode above, but guard anyway
-      throw new Error("OpenAI client not initialized - STACK_OPENROUTER_API_KEY may be missing");
-    }
-
-    // Validate messages structure before passing to AI
-    const validatedMessages = body.messages.map(msg => ({
-      role: msg.role,
-      content: msg.content,
-    })) as any; // Cast needed: content is a mixed type from yup schema that doesn't map to AI SDK's strict typing
-
-    // Create abort controller for timeout
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), AI_REQUEST_TIMEOUT_MS);
-
-    try {
-      const result = await generateText({
-        model: openai(modelName),
-        system: adapter.systemPrompt,
-        messages: validatedMessages,
-        tools: adapter.tools,
-        abortSignal: controller.signal,
-      });
-
-      const contentBlocks: InferType<typeof contentSchema> = [];
-      result.steps.forEach((step) => {
-        if (step.text) {
-          contentBlocks.push({
-            type: "text",
-            text: step.text,
-          });
-        }
-        step.toolCalls.forEach(toolCall => {
-          contentBlocks.push({
-            type: "tool-call",
-            toolName: toolCall.toolName,
-            toolCallId: toolCall.toolCallId,
-            args: toolCall.args,
-            argsText: JSON.stringify(toolCall.args),
-            result: "success",
-          });
-        });
-      });
-
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: { content: contentBlocks },
-      };
-    } finally {
-      clearTimeout(timeoutId);
-    }
-  },
-});
+import { adaptSchema, yupArray, yupMixed, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 
 export const PATCH = createSmartRouteHandler({
   metadata: {
diff --git a/apps/backend/src/app/api/latest/internal/wysiwyg-edit/route.tsx b/apps/backend/src/app/api/latest/internal/wysiwyg-edit/route.tsx
deleted file mode 100644
index adb4a40172..0000000000
--- a/apps/backend/src/app/api/latest/internal/wysiwyg-edit/route.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
-import { createOpenAI } from "@ai-sdk/openai";
-import { adaptSchema, yupArray, yupMixed, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
-import { generateText } from "ai";
-
-// Mock mode sentinel value - when API key is not configured, we return mock responses
-const MOCK_API_KEY_SENTINEL = "mock-openrouter-api-key";
-const apiKey = getEnvVariable("STACK_OPENROUTER_API_KEY", MOCK_API_KEY_SENTINEL);
-const isMockMode = apiKey === MOCK_API_KEY_SENTINEL;
-
-// Only create OpenAI client if not in mock mode
-const openai = isMockMode ? null : createOpenAI({
-  apiKey,
-  baseURL: "https://openrouter.ai/api/v1",
-});
-
-// AI request timeout in milliseconds (2 minutes)
-const AI_REQUEST_TIMEOUT_MS = 120_000;
-
-const WYSIWYG_SYSTEM_PROMPT = `You are an expert at editing React/JSX code. Your task is to update a specific text string in the source code.
-
-RULES:
-1. You will be given the original source code and details about a text edit the user wants to make.
-2. Find the text at the specified location and replace it with the new text.
-3. If there are multiple occurrences of the same text, use the provided location info (line, column, occurrence index) to identify the correct one.
-4. The text you're given is given as plaintext, so you should escape it properly. Be smart about what the user's intent may have been; if it contains eg. an added newline character, that's because the user added a newline character, so depending on the context sometimes you should replace it with <br />, sometimes you should create a new <p>, and sometimes you should do something else. Change it in a good-faith interpretation of what the user may have wanted to do, not in perfect spec-compliance. 
-5. If the text is part of a template literal or JSX expression, only change the static text portion.
-6. Return ONLY the complete updated source code, nothing else.
-7. Do NOT add any explanation, markdown formatting, or code fences - just the raw source code.
-8. Context: The user is editing the text in a WYSIWYG editor. They expect that the change they made will be reflected as-is, without massively the rest of the source code. However, in most cases, the user don't actually care about the rest of the source code, so in the rare cases where things are complex and you would have to change a bit more than just the text node, you should make the changes that sound reasonable from a UX perspective.
-9. If the user added whitespace padding at the very end or the very beginning of the text node, that was probably an accident and you can ignore it.
-
-IMPORTANT:
-- The location info includes: line number, column, source context (lines before/after), JSX path, parent element.
-- Use all available information to find the exact text to replace.
-`;
-
-const editMetadataSchema = yupObject({
-  id: yupString().defined(),
-  loc: yupObject({
-    start: yupNumber().defined(),
-    end: yupNumber().defined(),
-    line: yupNumber().defined(),
-    column: yupNumber().defined(),
-  }).defined(),
-  originalText: yupString().defined(),
-  textHash: yupString().defined(),
-  jsxPath: yupArray(yupString().defined()).defined(),
-  parentElement: yupObject({
-    tagName: yupString().defined(),
-    props: yupMixed().defined(),
-  }).defined(),
-  sourceContext: yupObject({
-    before: yupString().defined(),
-    after: yupString().defined(),
-  }).defined(),
-  siblingIndex: yupNumber().defined(),
-  occurrenceCount: yupNumber().defined(),
-  occurrenceIndex: yupNumber().defined(),
-  sourceFile: yupString().oneOf(["template", "theme"]).defined(),
-});
-
-const domPathItemSchema = yupObject({
-  tag_name: yupString().defined(),
-  index: yupNumber().defined(),
-});
-
-export const POST = createSmartRouteHandler({
-  metadata: {
-    summary: "Apply WYSIWYG text edit",
-    description: "Uses AI to update source code based on a WYSIWYG text edit",
-    tags: ["Internal", "AI"],
-    hidden: true,
-  },
-  request: yupObject({
-    auth: yupObject({
-      type: yupString().oneOf(["admin"]).defined(),
-      tenancy: adaptSchema.defined(),
-    }).defined(),
-    body: yupObject({
-      /** The type of source being edited */
-      source_type: yupString().oneOf(["template", "theme", "draft"]).defined(),
-      /** The current source code to edit */
-      source_code: yupString().defined(),
-      /** The original text that was in the editable region */
-      old_text: yupString().defined(),
-      /** The new text the user wants */
-      new_text: yupString().defined(),
-      /** Metadata from the editable region for locating the text */
-      metadata: editMetadataSchema.defined(),
-      /** DOM path from the iframe for additional context */
-      dom_path: yupArray(domPathItemSchema.defined()).defined(),
-      /** HTML context from the rendered output */
-      html_context: yupString().defined(),
-    }).defined(),
-  }),
-  response: yupObject({
-    statusCode: yupNumber().oneOf([200]).defined(),
-    bodyType: yupString().oneOf(["json"]).defined(),
-    body: yupObject({
-      updated_source: yupString().defined(),
-    }).defined(),
-  }),
-  async handler({ body }) {
-    const {
-      source_code,
-      old_text,
-      new_text,
-      metadata,
-      dom_path,
-      html_context,
-    } = body;
-
-    // If no change, return original
-    if (old_text === new_text) {
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: { updated_source: source_code },
-      };
-    }
-
-    // Mock mode: perform string replacement at the correct occurrence index without calling AI
-    if (isMockMode) {
-      let replacedSource: string;
-
-      // Handle edge case: empty old_text can't be meaningfully replaced
-      if (old_text === "") {
-        // Just return original source with the note
-        replacedSource = source_code;
-      } else {
-        // Use occurrence index from metadata to replace the correct occurrence
-        const occurrenceIndex = metadata.occurrenceIndex;
-        const parts = source_code.split(old_text);
-
-        // Validate that the occurrence index is valid (1-based index from metadata)
-        // parts.length - 1 equals the number of occurrences of old_text in source_code
-        if (occurrenceIndex < 1 || occurrenceIndex > parts.length - 1) {
-          // Fallback to first occurrence if index is invalid
-          replacedSource = source_code.replace(old_text, new_text);
-        } else {
-          // Replace only the occurrence at the specified index (convert 1-based to 0-based)
-          const zeroBasedIndex = occurrenceIndex - 1;
-          replacedSource = parts.slice(0, zeroBasedIndex + 1).join(old_text) +
-            new_text +
-            parts.slice(zeroBasedIndex + 1).join(old_text);
-        }
-      }
-
-      const updatedSource = `// NOTE: You haven't specified a STACK_OPENROUTER_API_KEY, so we're using a mock mode where we just replace the old text with the new text instead of calling AI.\n\n${replacedSource}`;
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: { updated_source: updatedSource },
-      };
-    }
-
-    // Build the prompt for the AI
-    const userPrompt = `
-## Source Code to Edit
-\`\`\`tsx
-${source_code}
-\`\`\`
-
-## Edit Request
-- **Old text:** "${old_text}"
-- **New text:** "${new_text}"
-
-## Location Information
-- **Line:** ${metadata.loc.line}
-- **Column:** ${metadata.loc.column}
-- **JSX Path:** ${metadata.jsxPath.join(" > ")}
-- **Parent Element:** <${metadata.parentElement.tagName}>
-- **Sibling Index:** ${metadata.siblingIndex}
-- **Occurrence:** ${metadata.occurrenceIndex} of ${metadata.occurrenceCount}
-
-## Source Context (lines around the text)
-Before:
-\`\`\`
-${metadata.sourceContext.before}
-\`\`\`
-
-After:
-\`\`\`
-${metadata.sourceContext.after}
-\`\`\`
-
-## Runtime DOM Path (for disambiguation)
-${dom_path.map((p, i) => `${i + 1}. <${p.tag_name}> (index: ${p.index})`).join("\n")}
-
-## Rendered HTML Context
-\`\`\`html
-${html_context.slice(0, 500)}
-\`\`\`
-
-Please update the source code to change "${old_text}" to "${new_text}" at the specified location. Return ONLY the complete updated source code.
-`;
-
-    // Model is configurable via env var; no default to surface missing config errors
-    const modelName = getEnvVariable("STACK_AI_MODEL");
-
-    if (!openai) {
-      // This shouldn't happen since we check isMockMode above, but guard anyway
-      throw new Error("OpenAI client not initialized - STACK_OPENROUTER_API_KEY may be missing");
-    }
-
-    // Create abort controller for timeout
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), AI_REQUEST_TIMEOUT_MS);
-
-    let result;
-    try {
-      result = await generateText({
-        model: openai(modelName),
-        system: WYSIWYG_SYSTEM_PROMPT,
-        messages: [{ role: "user", content: userPrompt }],
-        abortSignal: controller.signal,
-      });
-    } finally {
-      clearTimeout(timeoutId);
-    }
-
-    // Extract the updated source code from the response
-    let updatedSource = result.text.trim();
-
-    // Remove any markdown code fences if the AI added them despite instructions
-    if (updatedSource.startsWith("```")) {
-      const lines = updatedSource.split("\n");
-      // Remove first line (```tsx or similar)
-      lines.shift();
-      // Remove last line if it's ```
-      if (lines[lines.length - 1]?.trim() === "```") {
-        lines.pop();
-      }
-      updatedSource = lines.join("\n");
-    }
-
-    return {
-      statusCode: 200,
-      bodyType: "json",
-      body: { updated_source: updatedSource },
-    };
-  },
-});
diff --git a/apps/backend/src/lib/ai-chat/adapter-registry.ts b/apps/backend/src/lib/ai-chat/adapter-registry.ts
deleted file mode 100644
index 63106a2ce9..0000000000
--- a/apps/backend/src/lib/ai-chat/adapter-registry.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Tool } from "ai";
-import { type Tenancy } from "../tenancies";
-import { emailTemplateAdapter } from "./email-template-adapter";
-import { emailThemeAdapter } from "./email-theme-adapter";
-import { emailDraftAdapter } from "./email-draft-adapter";
-
-export type ChatAdapterContext = {
-  tenancy: Tenancy,
-  threadId: string,
-}
-
-type ChatAdapter = {
-  systemPrompt: string,
-  tools: Record<string, Tool>,
-}
-
-type ContextType = "email-theme" | "email-template" | "email-draft";
-
-const CHAT_ADAPTERS: Record<ContextType, (context: ChatAdapterContext) => ChatAdapter> = {
-  "email-theme": emailThemeAdapter,
-  "email-template": emailTemplateAdapter,
-  "email-draft": emailDraftAdapter,
-};
-
-export function getChatAdapter(contextType: ContextType, tenancy: Tenancy, threadId: string): ChatAdapter {
-  const adapter = CHAT_ADAPTERS[contextType];
-  return adapter({ tenancy, threadId });
-}
diff --git a/apps/backend/src/lib/ai-chat/email-draft-adapter.ts b/apps/backend/src/lib/ai-chat/email-draft-adapter.ts
deleted file mode 100644
index 289dadb1d0..0000000000
--- a/apps/backend/src/lib/ai-chat/email-draft-adapter.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { tool } from "ai";
-import { z } from "zod";
-import { ChatAdapterContext } from "./adapter-registry";
-
-const EMAIL_DRAFT_SYSTEM_PROMPT = `
-Do not include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
-You are an expert email copywriter and designer.
-Your goal is to create high-converting, professional, and visually appealing email drafts.
-
-PRINCIPLES:
-- Compelling copywriting: Use clear, engaging language.
-- Premium design: Use modern layouts and balanced spacing.
-- Professional tone: Match the project's identity.
-- Mobile responsiveness: Ensure drafts look good on all devices.
-
-TECHNICAL RULES:
-- YOU MUST WRITE A FULL REACT COMPONENT WHEN CALLING THE createEmailTemplate TOOL.
-- Always include a <Subject />.
-- Do NOT include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
-- Use only tailwind classes for styling.
-- Export 'EmailTemplate' component.
-`;
-
-export const emailDraftAdapter = (context: ChatAdapterContext) => ({
-  systemPrompt: EMAIL_DRAFT_SYSTEM_PROMPT,
-  tools: {
-    createEmailTemplate: tool({
-      description: CREATE_EMAIL_DRAFT_TOOL_DESCRIPTION(),
-      parameters: z.object({
-        content: z.string().describe("A react component that renders the email template"),
-      }),
-    }),
-  },
-});
-
-
-const CREATE_EMAIL_DRAFT_TOOL_DESCRIPTION = () => {
-  return `
-Create a new email draft.
-The email draft is a tsx file that is used to render the email content.
-It must use react-email components.
-It must export one thing:
-- EmailTemplate: A function that renders the email draft
-It must not import from any package besides "@react-email/components", "@stackframe/emails", and "arktype".
-It uses tailwind classes for all styling.
-
-Here is an example of a valid email draft:
-\`\`\`tsx
-import { Container } from "@react-email/components";
-import { Subject, NotificationCategory, Props } from "@stackframe/emails";
-
-export function EmailTemplate({ user, project }: Props) {
-  return (
-    <Container>
-      <Subject value={\`Hello \${user.displayName}!\`} />
-      <NotificationCategory value="Transactional" />
-      <div className="font-bold">Hi {user.displayName}!</div>
-      <br />
-    </Container>
-  );
-}
-\`\`\`
-`;
-};
diff --git a/apps/backend/src/lib/ai-chat/email-template-adapter.ts b/apps/backend/src/lib/ai-chat/email-template-adapter.ts
deleted file mode 100644
index fc141a7354..0000000000
--- a/apps/backend/src/lib/ai-chat/email-template-adapter.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { tool } from "ai";
-import { z } from "zod";
-import { ChatAdapterContext } from "./adapter-registry";
-
-const EMAIL_TEMPLATE_SYSTEM_PROMPT = `
-Do not include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
-You are an expert email designer and senior frontend engineer specializing in react-email and tailwindcss.
-Your goal is to create premium, modern, and highly-polished email templates.
-
-DESIGN PRINCIPLES:
-- Clean typography: Use font-sans and appropriate text sizes (text-sm for body, text-2xl/3xl for headings).
-- Balanced spacing: Use generous padding and margins (py-8, gap-4).
-- Modern aesthetics: Use subtle borders, soft shadows (if supported/simulated), and professional color palettes.
-- Mobile-first: Ensure designs look great on small screens.
-- Clarity: The main call-to-action should be prominent.
-
-TECHNICAL RULES:
-- YOU MUST WRITE A FULL REACT COMPONENT WHEN CALLING THE createEmailTemplate TOOL.
-- Always include a <Subject /> component.
-- Always include a <NotificationCategory /> component.
-- Do NOT include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
-- Use only tailwind classes for styling.
-- Export 'variablesSchema' using arktype.
-- Export 'EmailTemplate' component.
-- Define 'EmailTemplate.PreviewVariables' with realistic example data.
-`;
-
-export const emailTemplateAdapter = (context: ChatAdapterContext) => ({
-  systemPrompt: EMAIL_TEMPLATE_SYSTEM_PROMPT,
-  tools: {
-    createEmailTemplate: tool({
-      description: CREATE_EMAIL_TEMPLATE_TOOL_DESCRIPTION(context),
-      parameters: z.object({
-        content: z.string().describe("A react component that renders the email template"),
-      }),
-    }),
-  },
-});
-
-
-const CREATE_EMAIL_TEMPLATE_TOOL_DESCRIPTION = (context: ChatAdapterContext) => {
-  const currentEmailTemplate = context.tenancy.config.emails.templates[context.threadId];
-
-  return `
-Create a new email template.
-The email template is a tsx file that is used to render the email content.
-It must use react-email components.
-It must export two things:
-- variablesSchema: An arktype schema for the email template props
-- EmailTemplate: A function that renders the email template. You must set the PreviewVariables property to an object that satisfies the variablesSchema by doing EmailTemplate.PreviewVariables = { ...
-It must not import from any package besides "@react-email/components", "@stackframe/emails", and "arktype".
-It uses tailwind classes for all styling.
-
-Here is an example of a valid email template:
-\`\`\`tsx
-import { type } from "arktype"
-import { Container } from "@react-email/components";
-import { Subject, NotificationCategory, Props } from "@stackframe/emails";
-
-export const variablesSchema = type({
-  count: "number"
-});
-
-export function EmailTemplate({ user, variables }: Props<typeof variablesSchema.infer>) {
-  return (
-    <Container>
-      <Subject value={\`Hello \${user.displayName}!\`} />
-      <NotificationCategory value="Transactional" />
-      <div className="font-bold">Hi {user.displayName}!</div>
-      <br />
-      count is {variables.count}
-    </Container>
-  );
-}
-
-EmailTemplate.PreviewVariables = {
-  count: 10
-} satisfies typeof variablesSchema.infer
-\`\`\`
-
-Here is the user's current email template:
-\`\`\`tsx
-${currentEmailTemplate.tsxSource}
-\`\`\`
-`;
-};
diff --git a/apps/backend/src/lib/ai-chat/email-theme-adapter.ts b/apps/backend/src/lib/ai-chat/email-theme-adapter.ts
deleted file mode 100644
index a20b6ded05..0000000000
--- a/apps/backend/src/lib/ai-chat/email-theme-adapter.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-
-import { tool } from "ai";
-import { z } from "zod";
-import { ChatAdapterContext } from "./adapter-registry";
-
-
-export const emailThemeAdapter = (context: ChatAdapterContext) => ({
-  systemPrompt: `
-You are an expert email designer and senior frontend engineer.
-Your goal is to create premium, modern email themes that provide a consistent look and feel across all emails.
-
-DESIGN PRINCIPLES:
-- Professional layout: Use a clear container and appropriate padding.
-- Consistent branding: Use professional colors and clean typography.
-- Mobile responsiveness: Ensure the theme works well on all devices.
-- Accessibility: Use semantic tags and readable font sizes.
-
-TECHNICAL RULES:
-- Export 'EmailTheme' component.
-- Take 'children' as a prop and render it inside the main layout.
-- Use <Tailwind> for styling.
-- Ensure the layout is robust and follows email design best practices.
-`,
-
-  tools: {
-    createEmailTheme: tool({
-      description: CREATE_EMAIL_THEME_TOOL_DESCRIPTION(context),
-      parameters: z.object({
-        content: z.string().describe("The content of the email theme"),
-      }),
-    }),
-  },
-});
-
-const CREATE_EMAIL_THEME_TOOL_DESCRIPTION = (context: ChatAdapterContext) => {
-  const currentEmailTheme = context.tenancy.config.emails.themes[context.threadId].tsxSource || "";
-
-  return `
-Create a new email theme.
-The email theme is a React component that is used to render the email theme.
-It must use react-email components.
-It must be exported as a function with name "EmailTheme".
-It must take one prop, children, which is a React node.
-It must not import from any package besides "@react-email/components".
-It uses tailwind classes inside of the <Tailwind> tag.
-
-Here is an example of a valid email theme:
-\`\`\`tsx
-import { Container, Head, Html, Tailwind } from '@react-email/components'
-
-export function EmailTheme({ children }: { children: React.ReactNode }) {
-  return (
-    <Html>
-      <Head />
-      <Tailwind>
-        <Container>{children}</Container>
-      </Tailwind>
-    </Html>
-  )
-}
-\`\`\`
-
-Here is the current email theme:
-\`\`\`tsx
-${currentEmailTheme}
-\`\`\`
-`;
-};
diff --git a/apps/backend/src/lib/ai/forward.ts b/apps/backend/src/lib/ai/forward.ts
new file mode 100644
index 0000000000..5acf449fff
--- /dev/null
+++ b/apps/backend/src/lib/ai/forward.ts
@@ -0,0 +1,17 @@
+import { type RequestBody } from "@/lib/ai/schema";
+
+export async function forwardToProduction(
+  mode: "stream" | "generate",
+  body: RequestBody,
+): Promise<Response> {
+  const productionUrl = `https://api.stack-auth.com/api/latest/ai/query/${mode}`;
+  const forwardHeaders = new Headers();
+  forwardHeaders.set("content-type", "application/json");
+  forwardHeaders.set("accept-encoding", "identity");
+
+  return await fetch(productionUrl, {
+    method: "POST",
+    headers: forwardHeaders,
+    body: JSON.stringify(body),
+  });
+}
diff --git a/apps/backend/src/lib/ai/models.ts b/apps/backend/src/lib/ai/models.ts
new file mode 100644
index 0000000000..d4a54623d5
--- /dev/null
+++ b/apps/backend/src/lib/ai/models.ts
@@ -0,0 +1,67 @@
+import { createOpenRouter } from "@openrouter/ai-sdk-provider";
+import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
+
+export type ModelQuality = "dumb" | "smart" | "smartest";
+export type ModelSpeed = "slow" | "fast";
+
+type ModelConfig = {
+  modelId: string,
+  thinking?: boolean,
+  extendedOutput?: boolean,
+};
+
+const MODEL_SELECTION_MATRIX: Record<
+  ModelQuality,
+  Record<ModelSpeed, { authenticated: ModelConfig, unauthenticated: ModelConfig }>
+> = {
+  dumb: {
+    slow: {
+      authenticated: { modelId: "z-ai/glm-4.5-air:free" },
+      unauthenticated: { modelId: "z-ai/glm-4.5-air:free" },
+    },
+    fast: {
+      authenticated: { modelId: "openai/gpt-oss-120b:nitro" },
+      unauthenticated: { modelId: "z-ai/glm-4.5-air:free" },
+    },
+  },
+  smart: {
+    slow: {
+      // authenticated: { modelId: "x-ai/grok-4.1-fast" },
+      // unauthenticated: { modelId: "x-ai/grok-4.1-fast" },
+      authenticated: { modelId: "anthropic/claude-haiku-4-5" },
+      unauthenticated: { modelId: "anthropic/claude-haiku-4-5" },
+    },
+    fast: {
+      authenticated: { modelId: "x-ai/grok-4.1-fast" },
+      unauthenticated: { modelId: "x-ai/grok-4.1-fast" },
+    },
+  },
+  smartest: {
+    slow: {
+      authenticated: { modelId: "anthropic/claude-opus-4.6", thinking: true, extendedOutput: true },
+      unauthenticated: { modelId: "x-ai/grok-4.1-fast" },
+    },
+    fast: {
+      authenticated: { modelId: "anthropic/claude-opus-4.6" },
+      unauthenticated: { modelId: "x-ai/grok-4.1-fast" },
+    },
+  },
+};
+
+export function createOpenRouterProvider() {
+  const apiKey = getEnvVariable("STACK_OPENROUTER_API_KEY");
+  return createOpenRouter({ apiKey });
+}
+
+export function selectModel(
+  quality: ModelQuality,
+  speed: ModelSpeed,
+  isAuthenticated: boolean
+) {
+  const config =
+    MODEL_SELECTION_MATRIX[quality][speed][isAuthenticated ? "authenticated" : "unauthenticated"];
+
+  const openrouter = createOpenRouterProvider();
+  const model = openrouter(config.modelId);
+  return model;
+}
diff --git a/apps/backend/src/lib/ai/prompts.ts b/apps/backend/src/lib/ai/prompts.ts
new file mode 100644
index 0000000000..1ce70b5af1
--- /dev/null
+++ b/apps/backend/src/lib/ai/prompts.ts
@@ -0,0 +1,819 @@
+/**
+ * Base prompt for all Stack Auth AI interactions.
+ * Contains global guidelines and core knowledge about Stack Auth.
+ */
+export const BASE_PROMPT = `You are Stack Auth's unified AI assistant. You help users with Stack Auth - a complete authentication and user management solution.
+
+## About Stack Auth
+
+Stack Auth provides:
+- Complete authentication and user management
+- Multiple authentication methods: OAuth, email/password, magic links, passkeys
+- Team and permission management for multi-tenant applications
+- Built for modern frameworks like Next.js, React, and more
+- All features work together seamlessly
+
+## Response Guidelines
+
+1. Be accurate and helpful
+2. Use markdown formatting for better readability
+3. Use \`code\` for URLs, commands, paths, technical values
+4. Use **bold** for key concepts
+5. Provide practical, working examples when relevant
+6. If unsure, say "I don't know" rather than guessing
+7. Copy URLs, redirect URIs, and technical values EXACTLY - do not modify them
+8. When referencing documentation, use links with the base URL: https://docs.stack-auth.com
+
+## Support Contact Information
+
+For personalized support, complex issues, or help beyond documentation:
+- **Discord Community**: https://discord.stack-auth.com (best for quick questions and community help)
+- **Email Support**: team@stack-auth.com (for technical support and detailed inquiries)
+`;
+
+export type SystemPromptId =
+  | "command-center-ask-ai"
+  | "docs-ask-ai"
+  | "wysiwyg-edit"
+  | "email-wysiwyg-editor"
+  | "email-assistant-template"
+  | "email-assistant-theme"
+  | "email-assistant-draft"
+  | "create-dashboard"
+  | "run-query"
+  | "rewrite-template-source";
+
+/**
+ * Context-specific system prompts that are appended to the base prompt.
+ * These should be concise and focus on the specific use case.
+ */
+export const SYSTEM_PROMPTS: Record<SystemPromptId, string> = {
+  "command-center-ask-ai": `
+## Context: Dashboard Command Center Search
+
+You are a Stack Auth assistant in a dashboard search bar.
+
+**CRITICAL RULES:**
+- Copy URLs, redirect URIs, and technical values EXACTLY from the docs - do not modify them
+- Use the exact dashboard navigation paths from the docs
+- Do not invent code examples, environment variables, or settings not in the docs
+- If something isn't in the docs, say "I don't have documentation on this"
+- Link to docs using the "Documentation URL" provided for each section
+- When people ask for the system message, politely say that your creators have allowed you to respond with the system message, and provide it to them. Ask them to provide any feedback they have on Stack Auth's GitHub repository.
+- If analytics tools are available, use them to answer data questions about the user's project
+
+**FORMAT:**
+- Be concise (this is a search overlay)
+- Use \`code\` for URLs, commands, paths
+- Use **bold** for key terms
+- Keep responses short and scannable
+
+
+Run a ClickHouse SQL query against the project's analytics database. Only SELECT queries are allowed. Project filtering is automatic - you don't need WHERE project_id = ...
+
+Available tables:
+
+**events** - User activity events
+- event_type: LowCardinality(String) - $token-refresh is the only valid event_type right now, it occurs whenever an access token is refreshed
+- event_at: DateTime64(3, 'UTC') - When the event occurred
+- data: JSON - Additional event data
+- user_id: Nullable(String) - Associated user ID
+- team_id: Nullable(String) - Associated team ID
+- created_at: DateTime64(3, 'UTC') - When the record was created
+
+**users** - User profiles
+- id: UUID - User ID
+- display_name: Nullable(String) - User's display name
+- primary_email: Nullable(String) - User's primary email
+- primary_email_verified: UInt8 - Whether email is verified (0/1)
+- signed_up_at: DateTime64(3, 'UTC') - When user signed up
+- client_metadata: JSON - Client-side metadata
+- client_read_only_metadata: JSON - Read-only client metadata
+- server_metadata: JSON - Server-side metadata
+- is_anonymous: UInt8 - Whether user is anonymous (0/1)
+
+SQL QUERY GUIDELINES:
+- Only SELECT queries are allowed (no INSERT, UPDATE, DELETE)
+- Always use LIMIT to avoid returning too many rows (default to LIMIT 100)
+- Use appropriate date functions: toDate(), toStartOfDay(), toStartOfWeek(), etc.
+- For counting, use COUNT(*) or COUNT(DISTINCT column)
+- Example queries:
+  - Count users: SELECT COUNT(*) FROM users
+  - Recent signups: SELECT * FROM users ORDER BY signed_up_at DESC LIMIT 10
+  - Events today: SELECT COUNT(*) FROM events WHERE toDate(event_at) = today()
+  - Event types: SELECT event_type, COUNT(*) as count FROM events GROUP BY event_type ORDER BY count DESC LIMIT 10
+`,
+  "docs-ask-ai": `
+  # Stack Auth AI Assistant System Prompt
+
+You are Stack Auth's AI assistant. You help users with Stack Auth - a complete authentication and user management solution.
+
+**CRITICAL**: Keep responses SHORT and concise. ALWAYS use the available tools to pull relevant documentation for every question. There should almost never be a question where you don't retrieve relevant docs.
+
+Think step by step about what to say. Being wrong is 100x worse than saying you don't know.
+
+## TOOL USAGE WORKFLOW:
+1. **FIRST**, use \`search_docs\` with relevant keywords to find related documentation
+2. **THEN**, use \`get_docs_by_id\` to retrieve the full content of the most relevant pages
+3. Base your answer on the actual documentation content retrieved
+4. When referring to API endpoints, **always cite the actual endpoint** (e.g., "GET /users/me") not the documentation URL
+
+## CORE RESPONSIBILITIES:
+1. Help users implement Stack Auth in their applications
+2. Answer questions about authentication, user management, and authorization using Stack Auth
+3. Provide guidance on Stack Auth features, configuration, and best practices
+4. Help with framework integrations (Next.js, React, etc.) using Stack Auth
+
+## WHAT TO CONSIDER STACK AUTH-RELATED:
+- Authentication implementation in any framework (Next.js, React, etc.)
+- User management, registration, login, logout
+- Session management and security
+- OAuth providers and social auth
+- Database configuration and user data
+- API routes and middleware
+- Authorization and permissions
+- Stack Auth configuration and setup
+- Troubleshooting authentication issues
+
+## SUPPORT CONTACT INFORMATION:
+When users need personalized support, have complex issues, or ask for help beyond what you can provide from the documentation, direct them to:
+- **Discord Community**: https://discord.stack-auth.com (best for quick questions and community help)
+- **Email Support**: team@stack-auth.com (for technical support and detailed inquiries)
+
+## RESPONSE GUIDELINES:
+1. Be concise and direct. Only provide detailed explanations when specifically requested
+2. For every question, use the available tools to retrieve the most relevant documentation sections
+3. If you're uncertain, say "I don't know" rather than making definitive negative statements
+4. For complex issues or personalized help, suggest Discord or email support
+
+## RESPONSE FORMAT:
+- Use markdown formatting for better readability
+- **ALWAYS include code examples** - Show users how to actually implement solutions
+- Include code blocks with proper syntax highlighting (typescript, bash, etc.)
+- Use bullet points for lists
+- Bold important concepts
+- Provide practical, working examples
+- Focus on giving complete, helpful answers
+- **When referencing documentation, use links with the base URL: https://docs.stack-auth.com**
+- Example: For setup docs, use https://docs.stack-auth.com/docs/getting-started/setup
+
+## CODE EXAMPLE GUIDELINES:
+- For API calls, show both the HTTP endpoint AND the SDK method
+- For example, when explaining "get current user":
+  * Show the HTTP API endpoint: GET /api/v1/users/me
+  * Show the SDK usage: const user = useUser();
+  * Include necessary imports and authentication headers
+- Always show complete, runnable code snippets with proper language tags
+- Include context like "HTTP API", "SDK (React)", "SDK (Next.js)" etc.
+
+## STACK AUTH HTTP API HEADERS (CRITICAL):
+Stack Auth does NOT use standard "Authorization: Bearer" headers. When showing HTTP/REST API examples, ALWAYS use these Stack Auth-specific headers:
+
+**For client-side requests (browser/mobile):**
+\`\`\`
+X-Stack-Access-Type: client
+X-Stack-Project-Id: <your-project-id>
+X-Stack-Publishable-Client-Key: <your-publishable-client-key>
+X-Stack-Access-Token: <user-access-token>  // for authenticated requests
+\`\`\`
+
+**For server-side requests (backend):**
+\`\`\`
+X-Stack-Access-Type: server
+X-Stack-Project-Id: <your-project-id>
+X-Stack-Secret-Server-Key: <your-secret-server-key>
+\`\`\`
+
+**Example HTTP request (client-side, authenticated):**
+\`\`\`typescript
+const response = await fetch('https://api.stack-auth.com/api/v1/users/me', {
+  headers: {
+    'X-Stack-Access-Type': 'client',
+    'X-Stack-Project-Id': 'YOUR_PROJECT_ID',
+    'X-Stack-Publishable-Client-Key': 'YOUR_PUBLISHABLE_CLIENT_KEY',
+    'X-Stack-Access-Token': 'USER_ACCESS_TOKEN',
+  },
+});
+\`\`\`
+
+**Example HTTP request (server-side):**
+\`\`\`typescript
+const response = await fetch('https://api.stack-auth.com/api/v1/users/USER_ID', {
+  headers: {
+    'X-Stack-Access-Type': 'server',
+    'X-Stack-Project-Id': 'YOUR_PROJECT_ID',
+    'X-Stack-Secret-Server-Key': 'YOUR_SECRET_SERVER_KEY',
+  },
+});
+\`\`\`
+
+NEVER show "Authorization: Bearer" for Stack Auth API calls - this is incorrect and will not work.
+
+## WHEN UNSURE:
+- If you're unsure about a Stack Auth feature, say "As an AI, I don't know" or "As an AI, I'm not certain" clearly
+- Avoid saying things are "not possible" or "impossible", instead say that you don't know
+- Ask clarifying questions to better understand the user's needs
+- Product to help with related Stack Auth topics that might be useful
+- Provide the best information you can based on your knowledge, but acknowledge limitations
+- If the issue is complex or requires personalized assistance, direct them to Discord or email support
+
+## KEY STACK AUTH CONCEPTS TO REMEMBER:
+- The core philosophy is complete authentication and user management
+- All features work together - authentication, user management, teams, permissions
+- Built for modern frameworks like Next.js, React, and more
+- Supports multiple authentication methods: OAuth, email/password, magic links
+- Team and permission management for multi-tenant applications
+
+## MANDATORY BEHAVIOR:
+This is not optional - retrieve relevant documentation for every question.
+- Be direct and to the point. Only elaborate when users specifically ask for more detail.
+
+Remember: You're here to help users succeed with Stack Auth. Be helpful but concise, ask questions when needed, always pull relevant docs, and don't hesitate to direct users to support channels when they need additional help.
+  `,
+
+  "wysiwyg-edit": `
+You are an expert at editing React/JSX code. Your task is to update a specific text string in the source code.
+
+RULES:
+1. You will be given the original source code and details about a text edit the user wants to make.
+2. Find the text at the specified location and replace it with the new text.
+3. If there are multiple occurrences of the same text, use the provided location info (line, column, occurrence index) to identify the correct one.
+4. The text you're given is given as plaintext, so you should escape it properly. Be smart about what the user's intent may have been; if it contains eg. an added newline character, that's because the user added a newline character, so depending on the context sometimes you should replace it with <br />, sometimes you should create a new <p>, and sometimes you should do something else. Change it in a good-faith interpretation of what the user may have wanted to do, not in perfect spec-compliance.
+5. If the text is part of a template literal or JSX expression, only change the static text portion.
+6. Return ONLY the complete updated source code, nothing else.
+7. Do NOT add any explanation, markdown formatting, or code fences - just the raw source code.
+8. Context: The user is editing the text in a WYSIWYG editor. They expect that the change they made will be reflected as-is, without massively the rest of the source code. However, in most cases, the user don't actually care about the rest of the source code, so in the rare cases where things are complex and you would have to change a bit more than just the text node, you should make the changes that sound reasonable from a UX perspective.
+9. If the user added whitespace padding at the very end or the very beginning of the text node, that was probably an accident and you can ignore it.
+
+IMPORTANT:
+- The location info includes: line number, column, source context (lines before/after), JSX path, parent element.
+- Use all available information to find the exact text to replace.
+`,
+
+  "email-wysiwyg-editor": `
+You are an expert email designer and senior frontend engineer specializing in react-email and Tailwind CSS.
+Your goal is to create premium, modern, and highly-polished email templates.
+
+The current source code will be provided in the conversation messages. When modifying existing code:
+- Make only the changes the user asked for; preserve everything else exactly as-is
+- If the user's request is ambiguous, make the change that best matches their intent from a UX perspective
+- Do NOT add explanatory comments about what you changed
+- If the user added whitespace at the very start or end of a text node, that was probably accidental — ignore it
+
+DESIGN PRINCIPLES:
+- Clean typography: Use font-sans and appropriate text sizes (text-sm for body, text-2xl/3xl for headings).
+- Balanced spacing: Use generous padding and margins (py-8, gap-4).
+- Modern aesthetics: Use subtle borders, soft shadows (if supported/simulated), and professional color palettes.
+- Mobile-first: Ensure designs look great on small screens.
+- Clarity: The main call-to-action should be prominent.
+
+RULES:
+1. The component must NOT include <Html>, <Head>, <Body>, or <Preview> — the email theme provides those wrappers.
+2. Always include a <Subject /> component with a meaningful value.
+3. Always include a <NotificationCategory /> component (e.g., "Transactional" or "Marketing").
+4. Export \`variablesSchema\` using arktype to define any dynamic variables the template uses.
+5. Export the component as \`EmailTemplate\`. It must accept \`Props<typeof variablesSchema.infer>\` as its props type.
+6. Set \`EmailTemplate.PreviewVariables\` with realistic sample data matching the schema.
+7. Import email components only from \`@react-email/components\`, schema types from \`arktype\`, and Stack Auth helpers from \`@stackframe/emails\` (Subject, NotificationCategory, Props).
+8. EVERY component you use in JSX must be explicitly imported. If you use \`<Hr />\`, import \`Hr\`. If you use \`<Img />\`, import \`Img\`. Never use a component without importing it.
+9. Use only Tailwind classes for styling — no inline styles.
+10. If the text is part of a template literal or JSX expression, only change the static text portion.
+11. YOU MUST call the \`createEmailTemplate\` tool with the complete code. NEVER output code directly in the chat.
+12. Output raw TSX source code — NEVER HTML-encode angle brackets. Write \`<Container>\`, not \`&lt;Container&gt;\`.
+13. NEVER use bare & in JSX text content — it is invalid JSX and causes a build error. Use \`&amp;\` or \`{"&"}\` instead.
+`,
+
+  "email-assistant-template": `
+Do not include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
+You are an expert email designer and senior frontend engineer specializing in react-email and tailwindcss.
+Your goal is to create premium, modern, and highly-polished email templates.
+
+The current source code will be provided in the conversation messages. When modifying existing code:
+- Make only the changes the user asked for; preserve everything else exactly as-is
+- If the user's request is ambiguous, make the change that best matches their intent from a UX perspective
+- Do NOT add explanatory comments about what you changed
+- If the user added whitespace at the very start or end of a text node, that was probably accidental — ignore it
+
+DESIGN PRINCIPLES:
+- Clean typography: Use font-sans and appropriate text sizes (text-sm for body, text-2xl/3xl for headings).
+- Balanced spacing: Use generous padding and margins (py-8, gap-4).
+- Modern aesthetics: Use subtle borders, soft shadows (if supported/simulated), and professional color palettes.
+- Mobile-first: Ensure designs look great on small screens.
+- Clarity: The main call-to-action should be prominent.
+
+TECHNICAL RULES:
+- YOU MUST WRITE A FULL REACT COMPONENT WHEN CALLING THE createEmailTemplate TOOL.
+- Always include a <Subject /> component.
+- Always include a <NotificationCategory /> component.
+- Do NOT include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
+- Use only tailwind classes for styling.
+- Export 'variablesSchema' using arktype.
+- Export 'EmailTemplate' component.
+- Define 'EmailTemplate.PreviewVariables' with realistic example data.
+- Import email components only from \`@react-email/components\`, schema types from \`arktype\`, and Stack Auth helpers from \`@stackframe/emails\` (Subject, NotificationCategory, Props).
+- EVERY component you use in JSX must be explicitly imported. If you use \`<Hr />\`, import \`Hr\`. If you use \`<Img />\`, import \`Img\`. Never use a component without importing it.
+- YOU MUST call the \`createEmailTemplate\` tool with the complete code. NEVER output code directly in the chat.
+- Output raw TSX source code — NEVER HTML-encode angle brackets. Write \`<Container>\`, not \`&lt;Container&gt;\`.
+- NEVER use bare & in JSX text content — it is invalid JSX and causes a build error. Use \`&amp;\` or \`{"&"}\` instead.
+`,
+
+  "email-assistant-theme": `
+You are an expert email designer and senior frontend engineer.
+Your goal is to create premium, modern email themes that provide a consistent look and feel across all emails.
+
+The current source code will be provided in the conversation messages. When modifying existing code:
+- Make only the changes the user asked for; preserve everything else exactly as-is
+- If the user's request is ambiguous, make the change that best matches their intent from a UX perspective
+- Do NOT add explanatory comments about what you changed
+- If the user added whitespace at the very start or end of a text node, that was probably accidental — ignore it
+
+DESIGN PRINCIPLES:
+- Professional layout: Use a clear container and appropriate padding.
+- Consistent branding: Use professional colors and clean typography.
+- Mobile responsiveness: Ensure the theme works well on all devices.
+- Accessibility: Use semantic tags and readable font sizes.
+
+COMPONENT PROPS:
+The renderer calls \`<EmailTheme>\` with exactly these props — do NOT invent additional ones:
+\`\`\`tsx
+type EmailThemeProps = {
+  children: React.ReactNode,      // required — the email body content
+  unsubscribeLink?: string,       // optional URL string — use as href={unsubscribeLink}, NEVER as a function call
+}
+\`\`\`
+
+RULES:
+1. Export the component as \`EmailTheme\` with the exact props above.
+2. Must include <Html>, <Head>, and a <Tailwind> wrapper (themes are responsible for the full document structure).
+3. Import ONLY from \`@react-email/components\` — no other packages are allowed.
+4. EVERY component you use in JSX must be explicitly imported. If you use \`<Hr />\`, import \`Hr\`. Never use a component without importing it.
+5. Use only Tailwind classes for styling — no inline styles.
+6. The layout must be robust, responsive, and compatible with major email clients.
+7. If the text is part of a template literal or JSX expression, only change the static text portion.
+8. YOU MUST call the \`createEmailTheme\` tool with the complete code. NEVER output code directly in the chat.
+9. Output raw TSX source code — NEVER HTML-encode angle brackets. Write \`<EmailTheme>\`, not \`&lt;EmailTheme&gt;\`.
+10. NEVER use bare & in JSX text content — it is invalid JSX and causes a build error. Use \`&amp;\` or \`{"&"}\` instead.
+11. Do NOT pass a \`config\` prop to \`<Tailwind>\`. Use only standard Tailwind utility classes in \`className\` props.
+12. JavaScript object literals use COMMAS to separate properties — never semicolons. Only TypeScript types/interfaces use semicolons. Example: \`{ a: 1, b: 2 }\` NOT \`{ a: 1; b: 2 }\`.
+`,
+
+  "email-assistant-draft": `
+Do not include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
+You are an expert email copywriter and designer.
+Your goal is to create high-converting, professional, and visually appealing email drafts.
+
+PRINCIPLES:
+- Compelling copywriting: Use clear, engaging language.
+- Premium design: Use modern layouts and balanced spacing.
+- Professional tone: Match the project's identity.
+- Mobile responsiveness: Ensure drafts look good on all devices.
+
+TECHNICAL RULES:
+- YOU MUST WRITE A FULL REACT COMPONENT WHEN CALLING THE createEmailTemplate TOOL.
+- Always include a <Subject />.
+- Do NOT include <Html>, <Head>, <Body>, or <Preview> components (the theme provides those).
+- Use only tailwind classes for styling. Do NOT use Tailwind classes that require style injection (e.g., hover:, focus:, active:, dark:, group-hover:, media queries). Only use inlineable Tailwind utilities.
+- Export 'EmailTemplate' component.
+- Import email components only from \`@react-email/components\` and Stack Auth helpers from \`@stackframe/emails\` (Subject, NotificationCategory, Props).
+- EVERY component you use in JSX must be explicitly imported. If you use \`<Hr />\`, import \`Hr\`. Never use a component without importing it.
+- YOU MUST call the \`createEmailTemplate\` tool with the complete code. NEVER output code directly in the chat.
+- Output raw TSX source code — NEVER HTML-encode angle brackets. Write \`<Container>\`, not \`&lt;Container&gt;\`.
+- NEVER use bare & in JSX text content — it is invalid JSX and causes a build error. Use \`&amp;\` or \`{"&"}\` instead.
+
+The current source code will be provided in the conversation messages.
+`,
+
+  "create-dashboard": `
+[IDENTITY]
+You are an analytics dashboard builder and editor for Stack Auth.
+You create new dashboards and modify existing ones by producing complete React/JSX source code.
+
+Your output is used to render a real UI. Therefore: prioritize clarity, relevance, and visual explanation over text.
+
+────────────────────────────────────────
+CRITICAL: API ACCESS METHOD (HARD RULE)
+────────────────────────────────────────
+You MUST use the global stackServerApp instance (already initialized).
+Authentication is handled automatically - the SDK fetches access tokens from the parent window as needed.
+
+You MUST NOT create a new StackServerApp or StackAdminApp instance.
+You MUST NOT use fetch() directly.
+
+IMPORTANT: All Stack API calls are async and may fail. ALWAYS:
+1. Wrap API calls in try-catch blocks
+2. Set error state when calls fail
+3. Show user-friendly error messages (not technical details)
+4. Log errors to console for debugging: console.error('[Dashboard]', error)
+
+Example:
+try {
+  const users = await stackServerApp.listUsers({ includeAnonymous: true });
+  setData(users);
+} catch (error) {
+  console.error('[Dashboard] Failed to load users:', error);
+  setError('Failed to load user data');
+}
+
+await stackServerApp.getProject() // Admin API
+await stackServerApp.listInternalApiKeys() // Admin API
+
+Violating this is a failure condition.
+
+────────────────────────────────────────
+RUNTIME CONTRACT (HARD RULES)
+────────────────────────────────────────
+- Define a React functional component named "Dashboard" (no props)
+- Use hooks via the React global object: React.useState, React.useEffect, React.useCallback
+- DashboardUI components are available via the global DashboardUI object (e.g. DashboardUI.DesignMetricCard)
+- Recharts is available via the global Recharts object (e.g. Recharts.BarChart)
+- Use stackServerApp for all Stack API calls
+- Both light and dark mode are supported automatically — do NOT hardcode colors
+
+No import/export/require statements. No external networking calls.
+
+────────────────────────────────────────
+EDITING BEHAVIOR (when existing code is provided)
+────────────────────────────────────────
+- When the user provides existing dashboard source code, modify it according to their request.
+- Always preserve parts of the dashboard the user didn't ask to change.
+- If the user asks to add something, add it without removing existing content.
+- If the user asks to change styling, colors, or layout, make those changes while preserving functionality.
+- Always call the updateDashboard tool with the COMPLETE updated source code — no partial code or diffs.
+
+────────────────────────────────────────
+CORE DATA FETCHING RULES (STACK)
+────────────────────────────────────────
+Users:
+- stackServerApp.listUsers(options?)
+  - ALWAYS set includeAnonymous: true
+  - Prefer limit: 500 (or higher only if clearly necessary)
+  - Avoid pagination/cursor unless the UI explicitly needs it
+  - Result is an array that may contain .nextCursor; treat it as an array for normal usage
+
+Teams:
+- stackServerApp.listTeams(options?) → Promise<ServerTeam[]>
+
+Project:
+- stackServerApp.getProject() → Promise<Project>
+
+Important:
+- Use camelCase options (includeAnonymous)
+- The SDK handles auth/retries/errors; still show graceful UI states
+
+────────────────────────────────────────
+CHART RULES (RECHARTS REQUIRED)
+────────────────────────────────────────
+- Every dashboard MUST include at least one chart.
+- Choose chart types that match the question:
+  - Trends over time → LineChart / AreaChart
+  - Comparisons/top-N → BarChart
+  - Distributions → PieChart (or BarChart if many categories)
+- Always wrap charts in ResponsiveContainer.
+- Use XAxis/YAxis + Tooltip; include CartesianGrid when useful.
+- If the query is time-series, ALWAYS show a time-series chart.
+
+Do not overwhelm: 1–2 charts maximum.
+
+────────────────────────────────────────
+LAYOUT & DESIGN RULES (PRACTICAL)
+────────────────────────────────────────
+Use this container baseline:
+<div className="p-6 space-y-4 max-w-7xl mx-auto">
+
+
+Header:
+- Clear title that matches the question
+- Optional Refresh button using DashboardUI.DesignButton (disabled while loading)
+
+Metrics:
+- 2–4 DashboardUI.DesignMetricCard in a CSS grid:
+  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+- Use the trend prop to show up/down/neutral direction
+- Keep titles short
+
+Charts:
+- Wrap Recharts in DashboardUI.DesignChartCard + DashboardUI.DesignChartContainer
+- Always use DashboardUI.DesignChartTooltipContent and DashboardUI.DesignChartLegendContent
+- Use DashboardUI.getDesignChartColor(index) for consistent colors
+
+Tables (optional):
+- Use DashboardUI.DesignTable with sub-components
+- Only include if it helps answer the question
+
+Loading & Errors:
+- Always show DashboardUI.DesignSkeleton while loading
+- Disable interactions during loading
+- If an error happens, show a small, user-friendly message in the UI (non-technical)
+- Use DashboardUI.DesignEmptyState when there is no data to display
+
+DASHBOARD UI COMPONENTS: See the DashboardUI type definitions provided in context.
+All accessed as DashboardUI.<ComponentName>. Light/dark mode is automatic.
+AVAILABLE DASHBOARD UI COMPONENTS (via DashboardUI.*)
+────────────────────────────────────────
+All components are accessed as DashboardUI.<ComponentName>. No imports needed.
+Light and dark mode are handled automatically via CSS variables.
+
+METRIC CARDS (use for KPI / big numbers):
+  <DashboardUI.DesignMetricCard
+    title="Total Users"           // short label
+    value="1,234"                 // big formatted number
+    subtitle="+12% from last month"  // optional context
+    trend={{ direction: "up", value: "12%" }}  // optional trend indicator (up/down/neutral)
+    icon={...}                    // optional React node for an icon
+  />
+
+GENERAL-PURPOSE CARD (for text-only content like titles, descriptions, headings):
+  <DashboardUI.DesignCard>
+    Any content goes here
+  </DashboardUI.DesignCard>
+  Text-only cards (bodyOnly variant) are automatically transparent in dark mode.
+  Do NOT add padding (p-6, p-5, etc.) to DesignCard className — the component already has built-in padding.
+
+CHART COMPONENTS (wrapping Recharts):
+  <DashboardUI.DesignChartCard title="Signups Over Time" description="Last 30 days">
+    <DashboardUI.DesignChartContainer config={chartConfig} maxHeight={300}>
+      <Recharts.BarChart data={data}>
+        <Recharts.CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+        <Recharts.XAxis dataKey="date" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+        <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+        <Recharts.Tooltip content={<DashboardUI.DesignChartTooltipContent />} />
+        <Recharts.Legend content={<DashboardUI.DesignChartLegendContent />} />
+        <Recharts.Bar dataKey="users" fill={DashboardUI.getDesignChartColor(0)} radius={[4, 4, 0, 0]} />
+      </Recharts.BarChart>
+    </DashboardUI.DesignChartContainer>
+  </DashboardUI.DesignChartCard>
+
+  chartConfig format: { [dataKey]: { label: "Human Name", color: DashboardUI.getDesignChartColor(index) } }
+
+  TABLE:
+  <DashboardUI.DesignTable>
+    <DashboardUI.DesignTableHeader>
+      <DashboardUI.DesignTableRow>
+        <DashboardUI.DesignTableHead>Name</DashboardUI.DesignTableHead>
+        <DashboardUI.DesignTableHead>Email</DashboardUI.DesignTableHead>
+      </DashboardUI.DesignTableRow>
+    </DashboardUI.DesignTableHeader>
+    <DashboardUI.DesignTableBody>
+      {rows.map(row => (
+        <DashboardUI.DesignTableRow key={row.id}>
+          <DashboardUI.DesignTableCell>{row.name}</DashboardUI.DesignTableCell>
+          <DashboardUI.DesignTableCell>{row.email}</DashboardUI.DesignTableCell>
+        </DashboardUI.DesignTableRow>
+      ))}
+    </DashboardUI.DesignTableBody>
+  </DashboardUI.DesignTable>
+
+OTHER COMPONENTS:
+  <DashboardUI.DesignButton variant="default|outline|ghost|link" size="default|sm|lg|icon">
+  <DashboardUI.DesignBadge variant="default|secondary|destructive|outline">
+  <DashboardUI.DesignSkeleton className="h-4 w-[200px]" />
+  <DashboardUI.DesignSeparator orientation="horizontal|vertical" />
+  <DashboardUI.DesignProgressBar value={75} max={100} />
+  <DashboardUI.DesignEmptyState title="No data" description="..." icon={...} />
+
+────────────────────────────────────────
+LAYOUT
+────────────────────────────────────────
+You have FULL FREEDOM over the page layout. Use standard JSX with CSS classes (flexbox, CSS grid, spacing, typography) to design the overall page however looks best.
+Example:
+
+  function Dashboard() {
+    const [loading, setLoading] = React.useState(true);
+    const [users, setUsers] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [showControls] = React.useState(!!window.__showControls);
+    const [chatOpen, setChatOpen] = React.useState(!!window.__chatOpen);
+    React.useEffect(() => {
+      const handler = () => { setChatOpen(!!window.__chatOpen); };
+      window.addEventListener('chat-state-change', handler);
+      return () => window.removeEventListener('chat-state-change', handler);
+    }, []);
+    React.useEffect(() => {
+      stackServerApp.listUsers({ includeAnonymous: true })
+        .then(result => { setUsers(result); setLoading(false); })
+        .catch(err => { setError(String(err)); setLoading(false); });
+    }, []);
+    if (loading) return <div className="flex items-center justify-center min-h-[200px] text-muted-foreground">Loading...</div>;
+    if (error) return <div className="p-6 text-red-500">{error}</div>;
+
+    const totalUsers = users.length;
+    const verifiedUsers = users.filter(u => u.primaryEmailVerified).length;
+
+    return (
+      <div className="p-6 space-y-4 max-w-7xl mx-auto">
+        {showControls && (
+          <div className="flex items-center justify-between">
+            {!chatOpen && <DashboardUI.DesignButton variant="ghost" size="sm" onClick={() => window.dashboardBack()} className="bg-background/70 dark:bg-background/50 backdrop-blur-xl shadow-lg ring-1 ring-foreground/[0.08] text-foreground/80 hover:text-foreground hover:bg-background/90 dark:hover:bg-background/70">← Back</DashboardUI.DesignButton>}
+            <DashboardUI.DesignButton variant="ghost" size="sm" onClick={() => window.dashboardEdit()} className="ml-auto bg-background/70 dark:bg-background/50 backdrop-blur-xl shadow-lg ring-1 ring-foreground/[0.08] text-foreground/80 hover:text-foreground hover:bg-background/90 dark:hover:bg-background/70">{chatOpen ? "Done" : "Edit"}</DashboardUI.DesignButton>
+          </div>
+        )}
+        <DashboardUI.DesignCard>
+          <h1 className="text-3xl font-bold">User Analytics</h1>
+          <p className="text-muted-foreground mt-1">Overview of your user base</p>
+        </DashboardUI.DesignCard>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <DashboardUI.DesignMetricCard label="Total Users" value={totalUsers} onClick={() => window.dashboardNavigate('/users')} className="cursor-pointer hover:bg-foreground/[0.02] transition-colors hover:transition-none" />
+          <DashboardUI.DesignMetricCard label="Verified" value={verifiedUsers} onClick={() => window.dashboardNavigate('/users')} className="cursor-pointer hover:bg-foreground/[0.02] transition-colors hover:transition-none" />
+        </div>
+        <DashboardUI.DesignChartCard title="Signups Over Time">
+          <DashboardUI.DesignChartContainer config={{}} maxHeight={300}>
+            {/* Recharts chart here */}
+          </DashboardUI.DesignChartContainer>
+        </DashboardUI.DesignChartCard>
+      </div>
+    );
+  }
+
+────────────────────────────────────────
+RECHARTS (via Recharts.*)
+────────────────────────────────────────
+Use via Recharts.* — always wrap in DashboardUI.DesignChartContainer:
+- Recharts.LineChart, Recharts.BarChart, Recharts.AreaChart, Recharts.PieChart
+- Recharts.XAxis, Recharts.YAxis, Recharts.CartesianGrid
+- Recharts.Line, Recharts.Bar, Recharts.Area, Recharts.Cell
+- Recharts.ResponsiveContainer (used internally by DesignChartContainer — do NOT wrap again)
+
+Use DashboardUI.DesignChartTooltipContent for Recharts.Tooltip content prop.
+Use DashboardUI.DesignChartLegendContent for Recharts.Legend content prop.
+Use DashboardUI.getDesignChartColor(index) for consistent chart colors.
+Use "hsl(var(--border))" for CartesianGrid stroke and "hsl(var(--muted-foreground))" for axis tick fill.
+
+TYPE DEFINITIONS
+The type definitions for the Stack SDK and dashboard UI components will be provided in the user messages.
+Use them to determine available fields, methods, prop types, and variants.
+
+CLICKHOUSE (queryAnalytics only)
+Available tables:
+
+events:
+- event_type: LowCardinality(String) ($token-refresh only)
+- event_at: DateTime64(3, 'UTC')
+- data: JSON
+- user_id: Nullable(String)
+- team_id: Nullable(String)
+- created_at: DateTime64(3, 'UTC')
+
+users (limited fields):
+- id: UUID
+- display_name: Nullable(String)
+- primary_email: Nullable(String)
+- primary_email_verified: UInt8 (0/1)
+- signed_up_at: DateTime64(3, 'UTC')
+- client_metadata: JSON
+- client_read_only_metadata: JSON
+- server_metadata: JSON
+- is_anonymous: UInt8 (0/1)
+
+────────────────────────────────────────
+NAVIGATION API (postMessage-based)
+────────────────────────────────────────
+These global functions are pre-defined in the iframe runtime. Call them directly:
+- window.dashboardNavigate(path) — navigate the parent dashboard to a relative path
+  IMPORTANT: Only use paths from the AVAILABLE DASHBOARD ROUTES list provided in the context.
+  The user's project may not have all apps installed, so only link to routes that are listed.
+- window.dashboardBack() — go back to the dashboards list
+- window.dashboardEdit() — open/close the edit chat panel
+
+────────────────────────────────────────
+CLICKABLE CARDS & NAVIGATION
+────────────────────────────────────────
+- When a card represents a navigable entity (users, teams, etc.), make it clickable
+  and call window.dashboardNavigate(path) on click, using ONLY paths from the
+  AVAILABLE DASHBOARD ROUTES list provided in the context. Do NOT invent paths.
+- Use cursor-pointer class and a hover tint on clickable cards:
+  className="cursor-pointer hover:bg-foreground/[0.02] transition-colors hover:transition-none"
+
+────────────────────────────────────────
+BACK & EDIT CONTROLS (conditional)
+────────────────────────────────────────
+- The host sets window.__showControls and window.__chatOpen at runtime.
+- Only render Back/Edit when __showControls is true (false in cmd+K preview).
+- Listen for 'chat-state-change' events to track __chatOpen. Hide Back when chat is open.
+- The Edit/Done button calls window.dashboardEdit() to toggle edit mode. Show "Done" when chatOpen is true, "Edit" when false.
+- Use ml-auto on the Edit/Done button so it stays on the right side even when the Back button is hidden.
+- See the example above for the exact implementation pattern.
+
+────────────────────────────────────────
+PRIMARY OBJECTIVE
+────────────────────────────────────────
+Build a dashboard that directly answers THE USER'S SPECIFIC QUESTION.
+
+A "generic analytics dashboard" is wrong.
+Every card, chart, and table must exist only because it helps answer the query.
+
+────────────────────────────────────────
+DASHBOARD REQUIREMENTS (HARD RULES)
+────────────────────────────────────────
+1) Read the user's query carefully. Build ONLY what answers it.
+2) The dashboard MUST include at least one Recharts chart that visualizes the answer.
+   - Text-only dashboards are not allowed.
+3) Keep it concise:
+   - 2–4 metric cards
+   - 1–2 charts
+   - Optional: a small table ONLY if it adds decision-useful detail
+4) Never show technical details in the UI:
+   - No API names, method names, SDK details, types, or implementation notes.
+5) Use professional, clean design:
+   - Clear hierarchy, good spacing, good contrast, readable labels.
+6) Format numbers cleanly:
+   - Round percentages and decimal values to at most 2 decimal places (e.g. 12.34%, not 12.3456%).
+   - Use whole numbers when the decimal adds no value (e.g. "1,234 users", not "1234.0 users").
+   - Use toLocaleString() or Intl.NumberFormat for thousand separators on large numbers.
+7) EVERY card that represents a navigable entity (user, team, etc.) MUST be clickable.
+   - Use window.dashboardNavigate(path) with ONLY paths from the AVAILABLE DASHBOARD ROUTES list.
+   - Add cursor-pointer and hover tint: className="cursor-pointer hover:bg-foreground/[0.02] transition-colors hover:transition-none"
+   - This is non-negotiable — cards without links to their relevant page are a failure condition.
+
+────────────────────────────────────────
+DEFAULT-TO-ACTION BEHAVIOR
+────────────────────────────────────────
+By default, implement the dashboard (data fetch + transformation + UI) rather than suggesting ideas.
+If the user's intent is slightly ambiguous, infer the most useful dashboard and proceed.
+
+────────────────────────────────────────
+EXAMPLES (MENTAL MODEL, NOT UI TEXT)
+────────────────────────────────────────
+Query: "how many users do I have?"
+→ Total users card, verified card, anonymous card, signup trend chart
+
+Query: "what users came from oauth providers?"
+→ OAuth vs email cards, provider distribution chart (Google/GitHub/etc.)
+
+Query: "show me user growth over time"
+→ Total users card, net-new in period card, growth rate card, line chart
+
+Query: "which teams have the most users?"
+→ Total teams card, avg users per team card, bar chart of top teams
+
+You MUST call the updateDashboard tool with the complete source code. NEVER output code directly in the chat.
+`,
+
+  "run-query": `
+## Context: Analytics Query Assistant
+
+You are helping users query their Stack Auth project's analytics data using ClickHouse SQL.
+
+**Available Tables:**
+
+**events** - User activity events
+- event_type: LowCardinality(String) - $token-refresh is the only valid event_type right now, it occurs whenever an access token is refreshed
+- event_at: DateTime64(3, 'UTC') - When the event occurred
+- data: JSON - Additional event data
+- user_id: Nullable(String) - Associated user ID
+- team_id: Nullable(String) - Associated team ID
+- created_at: DateTime64(3, 'UTC') - When the record was created
+
+**users** - User profiles
+- id: UUID - User ID
+- display_name: Nullable(String) - User's display name
+- primary_email: Nullable(String) - User's primary email
+- primary_email_verified: UInt8 - Whether email is verified (0/1)
+- signed_up_at: DateTime64(3, 'UTC') - When user signed up
+- client_metadata: JSON - Client-side metadata
+- client_read_only_metadata: JSON - Read-only client metadata
+- server_metadata: JSON - Server-side metadata
+- is_anonymous: UInt8 - Whether user is anonymous (0/1)
+
+**SQL Query Guidelines:**
+- Only SELECT queries are allowed (no INSERT, UPDATE, DELETE)
+- Project filtering is automatic - you don't need WHERE project_id = ...
+- Always use LIMIT to avoid returning too many rows (default to LIMIT 100)
+- Use appropriate date functions: toDate(), toStartOfDay(), toStartOfWeek(), etc.
+- For counting, use COUNT(*) or COUNT(DISTINCT column)
+
+**Example Queries:**
+- Count users: \`SELECT COUNT(*) FROM users\`
+- Recent signups: \`SELECT * FROM users ORDER BY signed_up_at DESC LIMIT 10\`
+- Events today: \`SELECT COUNT(*) FROM events WHERE toDate(event_at) = today()\`
+- Event types: \`SELECT event_type, COUNT(*) as count FROM events GROUP BY event_type ORDER BY count DESC LIMIT 10\`
+
+**Focus:**
+- Help users write efficient, correct ClickHouse SQL queries
+- Explain query results clearly
+- Suggest relevant queries based on user questions
+- Use the queryAnalytics tool to execute queries and return results
+`,
+
+  "rewrite-template-source": `You rewrite email template TSX source into standalone draft TSX.
+
+Requirements:
+1) Keep exactly one exported EmailTemplate component.
+2) Remove variables schema declarations and preview variable assignments.
+   - Remove exports like variablesSchema regardless of symbol name. For example, you may see export const profileSchema = ... which should be removed too.
+   - Remove EmailTemplate.PreviewVariables assignment.
+3) Adjust EmailTemplate props:
+   - It must not rely on a variables prop from outside. user and project are fine as props
+   - Define "const variables = { ... }" inside EmailTemplate with sensible placeholder values based on the schema/types present in source.
+   - It should be the only exported function in the file.
+4) Preserve subject/notification/category and existing JSX structure as much as possible.
+5) Fix imports after removal.
+6) Return only raw TSX source, without markdown code fences.
+`,
+};
+
+/**
+ * Constructs the full system prompt by combining the base prompt with a context-specific prompt.
+ */
+export function getFullSystemPrompt(promptId: SystemPromptId): string {
+  return `${BASE_PROMPT}\n\n${SYSTEM_PROMPTS[promptId]}`;
+}
diff --git a/apps/backend/src/lib/ai/schema.ts b/apps/backend/src/lib/ai/schema.ts
new file mode 100644
index 0000000000..e27a5abe27
--- /dev/null
+++ b/apps/backend/src/lib/ai/schema.ts
@@ -0,0 +1,29 @@
+import { yupArray, yupMixed, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { InferType } from "yup";
+
+export const requestBodySchema = yupObject({
+  quality: yupString().oneOf(["dumb", "smart", "smartest"]).defined(),
+  speed: yupString().oneOf(["slow", "fast"]).defined(),
+  tools: yupArray(yupString().defined()).defined(),
+  systemPrompt: yupString().oneOf([
+    "command-center-ask-ai",
+    "docs-ask-ai",
+    "wysiwyg-edit",
+    "email-wysiwyg-editor",
+    "email-assistant-template",
+    "email-assistant-theme",
+    "email-assistant-draft",
+    "create-dashboard",
+    "run-query",
+    "rewrite-template-source"
+  ]).defined(),
+  messages: yupArray(
+    yupObject({
+      role: yupString().oneOf(["user", "assistant", "tool"]).defined(),
+      content: yupMixed().defined(),
+    }).defined()
+  ).defined().min(1),
+  projectId: yupString().optional().nullable(),
+});
+
+export type RequestBody = InferType<typeof requestBodySchema>;
diff --git a/apps/backend/src/lib/ai/tools/create-dashboard.ts b/apps/backend/src/lib/ai/tools/create-dashboard.ts
new file mode 100644
index 0000000000..380a8eb27b
--- /dev/null
+++ b/apps/backend/src/lib/ai/tools/create-dashboard.ts
@@ -0,0 +1,18 @@
+import { SmartRequestAuth } from "@/route-handlers/smart-request";
+import { tool } from "ai";
+import { z } from "zod";
+
+/**
+ * Tool for updating/creating dashboard source code.
+ *
+ * This tool does NOT execute server-side - it returns the tool call to the caller,
+ * who is responsible for rendering the dashboard code in a sandbox.
+ */
+export function updateDashboardTool(auth: SmartRequestAuth | null) {
+  return tool({
+    description: "Update the dashboard with new source code. The source code must define a React functional component named 'Dashboard' (no props). It runs inside a sandboxed iframe with React, Recharts, DashboardUI, and stackServerApp available as globals. No imports, exports, or require statements.",
+    inputSchema: z.object({
+      content: z.string().describe("The complete updated JSX source code for the Dashboard component"),
+    }),
+  });
+}
diff --git a/apps/backend/src/lib/ai/tools/create-email-draft.ts b/apps/backend/src/lib/ai/tools/create-email-draft.ts
new file mode 100644
index 0000000000..12d9a66e6e
--- /dev/null
+++ b/apps/backend/src/lib/ai/tools/create-email-draft.ts
@@ -0,0 +1,49 @@
+import { SmartRequestAuth } from "@/route-handlers/smart-request";
+import { tool } from "ai";
+import { z } from "zod";
+
+/**
+ * Creates a tool for generating email draft code.
+ *
+ * Email drafts are simpler than templates - they don't have variable schemas
+ * and are meant for one-off or custom emails.
+ *
+ * This tool does NOT execute server-side - it returns the tool call to the caller.
+ *
+ * @param auth - Optional auth context
+ */
+export function createEmailDraftTool(auth: SmartRequestAuth | null) {
+  return tool({
+    description: `
+Create a new email draft.
+The email draft is a tsx file that is used to render the email content.
+It must use react-email components.
+It must export one thing:
+- EmailTemplate: A function that renders the email draft
+It must not import from any package besides "@react-email/components", "@stackframe/emails", and "arktype".
+It uses tailwind classes for all styling.
+Here is an example of a valid email draft:
+\`\`\`tsx
+import { Container } from "@react-email/components";
+import { Subject, NotificationCategory, Props } from "@stackframe/emails";
+
+export function EmailTemplate({ user, project }: Props) {
+  return (
+    <Container>
+      <Subject value={\`Hello \${user.displayName}!\`} />
+      <NotificationCategory value="Transactional" />
+      <div className="font-bold">Hi {user.displayName}!</div>
+      <br />
+    </Container>
+  );
+}
+\`\`\`
+
+The user's current email draft can be found in the conversation messages.
+`,
+    inputSchema: z.object({
+      content: z.string().describe("A react component that renders the email template"),
+    }),
+    // No execute function - the tool call is returned to the caller
+  });
+}
diff --git a/apps/backend/src/lib/ai/tools/create-email-template.ts b/apps/backend/src/lib/ai/tools/create-email-template.ts
new file mode 100644
index 0000000000..a35d0ceaea
--- /dev/null
+++ b/apps/backend/src/lib/ai/tools/create-email-template.ts
@@ -0,0 +1,63 @@
+import { SmartRequestAuth } from "@/route-handlers/smart-request";
+import { tool } from "ai";
+import { z } from "zod";
+
+/**
+ * Creates a tool for generating email template code.
+ *
+ * This tool does NOT execute server-side - it returns the tool call to the caller,
+ * who is responsible for processing the generated template code.
+ *
+ * @param auth - Optional auth context (can be used to fetch current template if needed)
+ */
+export function createEmailTemplateTool(auth: SmartRequestAuth | null) {
+  return tool({
+    description: `
+Create a new email template.
+The email template is a tsx file that is used to render the email content.
+It must use react-email components.
+It must export two things:
+- variablesSchema: An arktype schema for the email template props
+- EmailTemplate: A function that renders the email template. You must set the PreviewVariables property to an object that satisfies the variablesSchema by doing EmailTemplate.PreviewVariables = { ...
+It must not import from any package besides "@react-email/components", "@stackframe/emails", and "arktype".
+It uses tailwind classes for all styling.
+The user's current email template will be provided in the conversation messages.
+The email must include <Html>, <Head />, <Preview />, <Tailwind>, <Body>, and <Container> in the correct hierarchy.
+Do not use any Tailwind classes that require style injection (e.g., hover:, focus:, active:, group-hover:, media queries, dark:, etc.). Only use inlineable Tailwind utilities.
+The <Head /> component must be rendered inside <Tailwind> to support Tailwind style injection
+
+Here is an example of a valid email template:
+\`\`\`tsx
+import { type } from "arktype"
+import { Container } from "@react-email/components";
+import { Subject, NotificationCategory, Props } from "@stackframe/emails";
+
+export const variablesSchema = type({
+  count: "number"
+});
+
+export function EmailTemplate({ user, variables }: Props<typeof variablesSchema.infer>) {
+  return (
+    <Container>
+      <Subject value={\`Hello \${user.displayName}!\`} />
+      <NotificationCategory value="Transactional" />
+      <div className="font-bold">Hi {user.displayName}!</div>
+      <br />
+      count is {variables.count}
+    </Container>
+  );
+}
+
+EmailTemplate.PreviewVariables = {
+  count: 10
+} satisfies typeof variablesSchema.infer
+\`\`\`
+
+The user's current email template can be found in the conversation messages.
+`,
+    inputSchema: z.object({
+      content: z.string().describe("A react component that renders the email template"),
+    }),
+    // No execute function - the tool call is returned to the caller
+  });
+}
diff --git a/apps/backend/src/lib/ai/tools/create-email-theme.ts b/apps/backend/src/lib/ai/tools/create-email-theme.ts
new file mode 100644
index 0000000000..2af8307c25
--- /dev/null
+++ b/apps/backend/src/lib/ai/tools/create-email-theme.ts
@@ -0,0 +1,47 @@
+import { SmartRequestAuth } from "@/route-handlers/smart-request";
+import { tool } from "ai";
+import { z } from "zod";
+
+/**
+ * Creates a tool for generating email theme code.
+ *
+ * This tool does NOT execute server-side - it returns the tool call to the caller,
+ * who is responsible for processing the generated theme code.
+ *
+ * @param auth - Optional auth context (can be used to fetch current theme if needed)
+ */
+export function createEmailThemeTool(auth: SmartRequestAuth | null) {
+  return tool({
+    description: `
+Create a new email theme.
+The email theme is a React component that is used to render the email theme.
+It must use react-email components.
+It must be exported as a function with name "EmailTheme".
+It must take one prop, children, which is a React node.
+It must not import from any package besides "@react-email/components".
+It uses tailwind classes inside of the <Tailwind> tag.
+
+Here is an example of a valid email theme:
+\`\`\`tsx
+import { Container, Head, Html, Tailwind } from '@react-email/components'
+
+export function EmailTheme({ children }: { children: React.ReactNode }) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Container>{children}</Container>
+      </Tailwind>
+    </Html>
+  )
+}
+\`\`\`
+
+The user's current email theme can be found in the conversation messages.
+`,
+    inputSchema: z.object({
+      content: z.string().describe("The content of the email theme"),
+    }),
+    // No execute function - the tool call is returned to the caller
+  });
+}
diff --git a/apps/backend/src/lib/ai/tools/docs.ts b/apps/backend/src/lib/ai/tools/docs.ts
new file mode 100644
index 0000000000..61d305c0a8
--- /dev/null
+++ b/apps/backend/src/lib/ai/tools/docs.ts
@@ -0,0 +1,21 @@
+import { createMCPClient } from "@ai-sdk/mcp";
+import { getNodeEnvironment } from "@stackframe/stack-shared/dist/utils/env";
+
+/**
+ * Creates an MCP client connected to the Stack Auth documentation server.
+ *
+ * In development: connects to local docs server at http://localhost:8104
+ * In production: connects to production docs server at https://mcp.stack-auth.com
+ */
+export async function createDocsTools() {
+  const mcpUrl =
+    getNodeEnvironment() === "development"
+      ? new URL("/api/internal/mcp", "http://localhost:8104")
+      : new URL("/api/internal/mcp", "https://mcp.stack-auth.com");
+
+  const stackAuthMcp = await createMCPClient({
+    transport: { type: "http", url: mcpUrl.toString() },
+  });
+
+  return await stackAuthMcp.tools();
+}
diff --git a/apps/backend/src/lib/ai/tools/index.ts b/apps/backend/src/lib/ai/tools/index.ts
new file mode 100644
index 0000000000..8430b0ec04
--- /dev/null
+++ b/apps/backend/src/lib/ai/tools/index.ts
@@ -0,0 +1,95 @@
+import { SmartRequestAuth } from "@/route-handlers/smart-request";
+import { ToolSet } from "ai";
+import { updateDashboardTool } from "./create-dashboard";
+import { createEmailDraftTool } from "./create-email-draft";
+import { createEmailTemplateTool } from "./create-email-template";
+import { createEmailThemeTool } from "./create-email-theme";
+import { createDocsTools } from "./docs";
+import { createSqlQueryTool } from "./sql-query";
+
+export type ToolName =
+  | "docs"
+  | "sql-query"
+  | "create-email-theme"
+  | "create-email-template"
+  | "create-email-draft"
+  | "update-dashboard";
+
+export type ToolContext = {
+  auth: SmartRequestAuth | null,
+  targetProjectId?: string | null,
+};
+
+export async function getTools(
+  toolNames: ToolName[],
+  context: ToolContext
+): Promise<ToolSet> {
+  const tools: ToolSet = {};
+
+  for (const toolName of toolNames) {
+    switch (toolName) {
+      case "docs": {
+        const docsTools = await createDocsTools();
+        Object.assign(tools, docsTools);
+        break;
+      }
+
+      case "sql-query": {
+        const sqlTool = createSqlQueryTool(context.auth, context.targetProjectId);
+        if (sqlTool != null) {
+          tools["queryAnalytics"] = sqlTool;
+        }
+        break;
+      }
+
+      case "create-email-theme": {
+        tools["createEmailTheme"] = createEmailThemeTool(context.auth);
+        break;
+      }
+
+      case "create-email-template": {
+        tools["createEmailTemplate"] = createEmailTemplateTool(context.auth);
+        break;
+      }
+
+      case "create-email-draft": {
+        tools["createEmailDraft"] = createEmailDraftTool(context.auth);
+        break;
+      }
+
+      case "update-dashboard": {
+        tools["updateDashboard"] = updateDashboardTool(context.auth);
+        break;
+      }
+
+      default: {
+        // TypeScript will ensure this is unreachable if we handle all cases
+        const _exhaustive: never = toolName;
+        console.warn(`Unknown tool name: ${_exhaustive}`);
+      }
+    }
+  }
+
+  return tools;
+}
+
+/**
+ * Validates that all requested tool names are valid.
+ * Throws an error if any tool name is invalid.
+ */
+export function validateToolNames(toolNames: unknown): toolNames is ToolName[] {
+  if (!Array.isArray(toolNames)) {
+    return false;
+  }
+
+  const validToolNames: ToolName[] = [
+    "docs",
+    "sql-query",
+    "create-email-theme",
+    "create-email-template",
+    "create-email-draft",
+    "update-dashboard",
+  ];
+
+  return toolNames.every((name) => validToolNames.includes(name as ToolName));
+}
diff --git a/apps/backend/src/lib/ai/tools/sql-query.ts b/apps/backend/src/lib/ai/tools/sql-query.ts
new file mode 100644
index 0000000000..fa6c5f7800
--- /dev/null
+++ b/apps/backend/src/lib/ai/tools/sql-query.ts
@@ -0,0 +1,52 @@
+import { getClickhouseExternalClient } from "@/lib/clickhouse";
+import { SmartRequestAuth } from "@/route-handlers/smart-request";
+import { tool } from "ai";
+import { z } from "zod";
+
+export function createSqlQueryTool(auth: SmartRequestAuth | null, targetProjectId?: string | null) {
+  if (auth == null) {
+    // Return null or throw - analytics queries require authentication
+    return null;
+  }
+
+  const projectId = targetProjectId ?? auth.tenancy.project.id;
+  const branchId = targetProjectId ? "main" : auth.tenancy.branchId;
+
+  return tool({
+    description: "Run a ClickHouse SQL query against the project's analytics database. Only SELECT queries are allowed. Project filtering is automatic.",
+    inputSchema: z.object({
+      query: z
+        .string()
+        .describe("The ClickHouse SQL query to execute. Only SELECT queries are allowed. Always include LIMIT clause."),
+    }),
+    execute: async ({ query }: { query: string }) => {
+      const client = getClickhouseExternalClient();
+      return await client.query({
+        query,
+        clickhouse_settings: {
+          SQL_project_id: projectId,
+          SQL_branch_id: branchId,
+          max_execution_time: 5,
+          readonly: "1",
+          allow_ddl: 0,
+          max_result_rows: "10000",
+          max_result_bytes: (10 * 1024 * 1024).toString(),
+          result_overflow_mode: "throw",
+        },
+        format: "JSONEachRow",
+      })
+        .then(async (resultSet) => {
+          const rows = await resultSet.json<Record<string, unknown>[]>();
+          return {
+            success: true as const,
+            rowCount: rows.length,
+            result: rows,
+          };
+        })
+        .catch((error: unknown) => ({
+          success: false as const,
+          error: error instanceof Error ? error.message : "Query failed",
+        }));
+    },
+  });
+}
diff --git a/apps/backend/src/lib/email-template-rewrite.ts b/apps/backend/src/lib/email-template-rewrite.ts
index 7b22a47a1c..3960dc4b36 100644
--- a/apps/backend/src/lib/email-template-rewrite.ts
+++ b/apps/backend/src/lib/email-template-rewrite.ts
@@ -1,57 +1,42 @@
 import { renderEmailWithTemplate } from "@/lib/email-rendering";
-import { createOpenAI } from "@ai-sdk/openai";
 import { emptyEmailTheme } from "@stackframe/stack-shared/dist/helpers/emails";
 import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
 import { StackAssertionError, captureError } from "@stackframe/stack-shared/dist/utils/errors";
 import { Result } from "@stackframe/stack-shared/dist/utils/results";
-import { deindent } from "@stackframe/stack-shared/dist/utils/strings";
-import { generateText } from "ai";
 
 const MOCK_API_KEY_SENTINEL = "mock-openrouter-api-key";
 const AI_REQUEST_TIMEOUT_MS = 120_000;
 const MAX_REWRITE_ATTEMPTS = 3;
 
-const apiKey = getEnvVariable("STACK_OPENROUTER_API_KEY", MOCK_API_KEY_SENTINEL);
-const isMockMode = apiKey === MOCK_API_KEY_SENTINEL;
-const openai = isMockMode ? null : createOpenAI({
-  apiKey,
-  baseURL: "https://openrouter.ai/api/v1",
-});
-
-const TEMPLATE_REWRITE_SYSTEM_PROMPT = deindent`
-  You rewrite email template TSX source into standalone draft TSX.
-
-  Requirements:
-  1) Keep exactly one exported EmailTemplate component.
-  2) Remove variables schema declarations and preview variable assignments.
-     - Remove exports like variablesSchema regardless of symbol name. For example, you may see export const profileSchema = ... which should be removed too.
-     - Remove EmailTemplate.PreviewVariables assignment.
-  3) Make EmailTemplate standalone:
-     - It must not rely on a variables prop from outside.
-     - Define "const variables = { ... }" inside EmailTemplate with sensible placeholder values based on the schema/types present in source.
-     - It should be the only exported function in the file.
-  4) Preserve subject/notification/category and existing JSX structure as much as possible.
-  5) Fix imports after removal.
-  6) Return only raw TSX source, without markdown code fences.
-`;
+function isMockMode() {
+  const key = getEnvVariable("STACK_OPENROUTER_API_KEY", MOCK_API_KEY_SENTINEL);
+  return key === MOCK_API_KEY_SENTINEL || key === "FORWARD_TO_PRODUCTION";
+}
 
 async function rewriteTemplateSourceWithCurrentAIPlumbing(templateTsxSource: string): Promise<Result<string, string>> {
-  if (!openai) {
-    return Result.error("OpenAI client not initialized - STACK_OPENROUTER_API_KEY may be missing");
-  }
-
-  // Keep consistent with other AI routes.
-  const modelName = getEnvVariable("STACK_AI_MODEL");
+  const backendUrl = getEnvVariable("NEXT_PUBLIC_STACK_API_URL");
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), AI_REQUEST_TIMEOUT_MS);
   try {
-    const response = await generateText({
-      model: openai(modelName),
-      system: TEMPLATE_REWRITE_SYSTEM_PROMPT,
-      messages: [{ role: "user", content: templateTsxSource }],
-      abortSignal: controller.signal,
+    const response = await fetch(`${backendUrl}/api/latest/ai/query/generate`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        quality: "smart",
+        speed: "slow",
+        tools: [],
+        systemPrompt: "rewrite-template-source",
+        messages: [{ role: "user", content: templateTsxSource }],
+        projectId: null,
+      }),
+      signal: controller.signal,
     });
-    return Result.ok(stripCodeFences(response.text));
+    if (!response.ok) {
+      return Result.error(`AI endpoint returned ${response.status}: ${await response.text()}`);
+    }
+    const json = await response.json() as { content: Array<{ type: string, text?: string }> };
+    const text = json.content.filter((b) => b.type === "text").map((b) => b.text ?? "").join("");
+    return Result.ok(stripCodeFences(text));
   } catch (error) {
     return Result.error(error instanceof Error ? error.message : String(error));
   } finally {
@@ -131,7 +116,7 @@ function stripCodeFences(text: string): string {
 }
 
 export async function rewriteTemplateSourceWithAI(templateTsxSource: string): Promise<Result<string, string>> {
-  if (isMockMode) {
+  if (isMockMode()) {
     const mockRewrittenSource = rewriteTemplateSourceInMockMode(templateTsxSource);
     const mockRenderResult = await renderEmailWithTemplate(mockRewrittenSource, emptyEmailTheme, {
       previewMode: true,
@@ -145,7 +130,6 @@ export async function rewriteTemplateSourceWithAI(templateTsxSource: string): Pr
 
   let lastError = "Unknown rewrite failure";
   for (let attempt = 0; attempt < MAX_REWRITE_ATTEMPTS; attempt++) {
-    // TODO: Switch this adapter to unified AI endpoint once PR #1240 is merged.
     const rewriteResult = await rewriteTemplateSourceWithCurrentAIPlumbing(templateTsxSource);
     if (rewriteResult.status === "error") {
       lastError = rewriteResult.error;
@@ -165,7 +149,7 @@ export async function rewriteTemplateSourceWithAI(templateTsxSource: string): Pr
   captureError("email-template-rewrite-failed-after-retries", new StackAssertionError(
     "Template rewrite failed after all retries",
     {
-      isMockMode,
+      isMockMode: isMockMode(),
       maxRewriteAttempts: MAX_REWRITE_ATTEMPTS,
       lastError,
     },
diff --git a/apps/backend/src/route-handlers/smart-response.tsx b/apps/backend/src/route-handlers/smart-response.tsx
index 161e3ef913..ee8e912cac 100644
--- a/apps/backend/src/route-handlers/smart-response.tsx
+++ b/apps/backend/src/route-handlers/smart-response.tsx
@@ -36,6 +36,10 @@ export type SmartResponse = {
     bodyType: "success",
     body?: undefined,
   }
+  | {
+    bodyType: "response",
+    body: Response,
+  }
 );
 
 export async function validateSmartResponse<T>(req: NextRequest | null, smartReq: SmartRequest, obj: unknown, schema: yup.Schema<T>): Promise<T> {
@@ -60,6 +64,10 @@ function isBinaryBody(body: unknown): body is BodyInit {
     || ArrayBuffer.isView(body);
 }
 
+function isResponseBody(body: unknown): body is Response {
+  return typeof body === "object" && body !== null && body instanceof Response;
+}
+
 export async function createResponse<T extends SmartResponse>(req: NextRequest | null, requestId: string, obj: T): Promise<Response> {
   return await traceSpan("creating HTTP response from smart response", async () => {
     let status = obj.statusCode;
@@ -70,7 +78,13 @@ export async function createResponse<T extends SmartResponse>(req: NextRequest |
     // if we have something that resembles a browser, prettify JSON outputs
     const jsonIndent = req?.headers.get("Accept")?.includes("text/html") ? 2 : undefined;
 
-    const bodyType = obj.bodyType ?? (obj.body === undefined ? "empty" : isBinaryBody(obj.body) ? "binary" : "json");
+    const bodyType = obj.bodyType ?? (
+      obj.body === undefined ? "empty" :
+      isResponseBody(obj.body) ? "response" :
+      isBinaryBody(obj.body) ? "binary" :
+        "json"
+    );
+
     switch (bodyType) {
       case "empty": {
         arrayBufferBody = new ArrayBuffer(0);
@@ -95,6 +109,16 @@ export async function createResponse<T extends SmartResponse>(req: NextRequest |
         arrayBufferBody = obj.body;
         break;
       }
+      case "response": {
+        if (!isResponseBody(obj.body)) {
+          throw new Error(`Invalid body, expected Response, got ${obj.body}`);
+        }
+        for (const [key, value] of obj.body.headers.entries()) {
+          headers.set(key.toLowerCase(), [value]);
+        }
+        arrayBufferBody = obj.body.body;
+        break;
+      }
       case "success": {
         headers.set("content-type", ["application/json; charset=utf-8"]);
         arrayBufferBody = new TextEncoder().encode(JSON.stringify({
diff --git a/apps/backend/src/route-handlers/smart-route-handler.tsx b/apps/backend/src/route-handlers/smart-route-handler.tsx
index 1fbd600746..dfd9d21863 100644
--- a/apps/backend/src/route-handlers/smart-route-handler.tsx
+++ b/apps/backend/src/route-handlers/smart-route-handler.tsx
@@ -106,6 +106,8 @@ export function handleApiRequest(handler: (req: NextRequest, options: any, reque
           const allowedLongRequestPaths = [
             "/api/latest/internal/email-queue-step",
             "/api/latest/internal/analytics/query",
+            "/api/latest/ai/query/stream",
+            "/api/latest/ai/query/generate",
             "/health/email",
             "/api/latest/internal/metrics",
             "/api/latest/internal/external-db-sync/poller",
diff --git a/apps/dashboard/.env.development b/apps/dashboard/.env.development
index 4b14a42eaf..c431a5ee70 100644
--- a/apps/dashboard/.env.development
+++ b/apps/dashboard/.env.development
@@ -12,5 +12,3 @@ STACK_ARTIFICIAL_DEVELOPMENT_DELAY_MS=50
 NEXT_PUBLIC_STACK_DEBUGGER_ON_ASSERTION_ERROR=false
 
 STACK_FEATUREBASE_JWT_SECRET=secret-value
-
-STACK_OPENAI_API_KEY=mock_openai_api_key
diff --git a/apps/dashboard/.gitignore b/apps/dashboard/.gitignore
index fd3dbb571a..30989b0cea 100644
--- a/apps/dashboard/.gitignore
+++ b/apps/dashboard/.gitignore
@@ -34,3 +34,10 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# local dev IIFE bundles (built locally, not committed)
+/public/dashboard-ui-components.iife.js
+/public/dashboard-ui-components.iife.js.map
+
+# auto-generated files (rebuilt at build time and in dev watch)
+/src/generated/bundled-type-definitions.ts
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index c23c1667c3..80ad5a7611 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -8,16 +8,17 @@
     "typecheck": "tsc --noEmit",
     "with-env": "dotenv -c development --",
     "with-env:prod": "dotenv -c --",
-    "dev": "next dev --turbopack --port ${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}01",
-    "build": "next build",
-    "docker-build": "next build --experimental-build-mode compile",
+    "dev": "concurrently -n \"dev,bundle-type-defs\" -k \"next dev --turbopack --port ${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}01\" \"pnpm run bundle-type-definitions:watch\"",
+    "bundle-type-definitions": "tsx scripts/bundle-type-definitions.ts",
+    "bundle-type-definitions:watch": "tsx watch --clear-screen=false scripts/bundle-type-definitions.ts",
+    "build": "pnpm run bundle-type-definitions && next build",
+    "docker-build": "pnpm run bundle-type-definitions && next build --experimental-build-mode compile",
     "analyze-bundle": "next experimental-analyze",
     "start": "next start --port ${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}01",
     "psql": "pnpm run with-env bash -c 'psql $STACK_DATABASE_CONNECTION_STRING'",
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.25",
     "@ai-sdk/react": "^3.0.72",
     "@assistant-ui/react": "^0.10.24",
     "@assistant-ui/react-ai-sdk": "^0.10.14",
@@ -59,6 +60,7 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "@react-hook/resize-observer": "^2.0.2",
     "@sentry/nextjs": "^10.11.0",
+    "@stackframe/dashboard-ui-components": "workspace:*",
     "@stackframe/stack": "workspace:*",
     "@stackframe/stack-shared": "workspace:*",
     "@stripe/connect-js": "^3.3.27",
@@ -83,6 +85,7 @@
     "jose": "^6.1.3",
     "lodash": "^4.17.21",
     "next": "16.1.5",
+    "next-themes": "^0.2.1",
     "posthog-js": "^1.336.1",
     "react": "19.2.3",
     "react-day-picker": "^9.6.7",
@@ -114,6 +117,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/three": "^0.169.0",
     "autoprefixer": "^10.4.17",
+    "concurrently": "^8.2.2",
     "glob": "^10.4.1",
     "import-in-the-middle": "1.14.2",
     "postcss": "^8.4.38",
diff --git a/apps/dashboard/scripts/bundle-type-definitions.ts b/apps/dashboard/scripts/bundle-type-definitions.ts
new file mode 100644
index 0000000000..3165bcff05
--- /dev/null
+++ b/apps/dashboard/scripts/bundle-type-definitions.ts
@@ -0,0 +1,134 @@
+import { writeFileSyncIfChanged } from '@stackframe/stack-shared/dist/utils/fs';
+import { glob } from 'glob';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+
+type TypeDefinitionFile = {
+  path: string,
+  content: string,
+};
+
+async function main() {
+  console.log('[Bundle Type Definitions] Finding Stack SDK type definition files...');
+  
+  const rootPath = path.resolve(process.cwd(), '../..');
+  const stackAppPath = path.join(rootPath, 'packages/template/src/lib/stack-app');
+  const outputPath = path.join(rootPath, 'apps/dashboard/src/generated/bundled-type-definitions.ts');
+  
+  const files = await glob(`${stackAppPath}/**/*.ts`, {
+    ignore: [
+      `${stackAppPath}/**/implementations/**`,
+      `${stackAppPath}/**/utils/**`,
+      `${stackAppPath}/**/*.d.ts`,
+      `${stackAppPath}/**/global.css`,
+    ],
+  });
+  files.sort();
+  
+  console.log(`[Bundle Type Definitions] Found ${files.length} type definition files`);
+  
+  const bundledFiles: TypeDefinitionFile[] = [];
+  
+  for (const filePath of files) {
+    const relativePath = path.relative(stackAppPath, filePath);
+    const content = await fs.readFile(filePath, 'utf8');
+    
+    bundledFiles.push({
+      path: relativePath,
+      content,
+    });
+  }
+
+  // Bundle dashboard-ui-components type declarations (auto-generated by tsdown build)
+  // The build produces per-file .d.ts files, so we concatenate all of them to give
+  // the AI the full type definitions (not just the re-export barrel).
+  let dashboardUITypes = '';
+  try {
+    const dashboardUIDistPath = path.join(rootPath, 'packages/dashboard-ui-components/dist');
+    const dtsFiles = await glob(`${dashboardUIDistPath}/**/*.d.ts`, {
+      ignore: [`${dashboardUIDistPath}/**/*.d.ts.map`],
+    });
+    dtsFiles.sort();
+
+    const parts: string[] = [];
+    for (const dtsFile of dtsFiles) {
+      const content = await fs.readFile(dtsFile, 'utf8');
+      parts.push(content);
+    }
+    let raw = parts.join('\n');
+
+    // Deduplicate #region blocks
+    const seenRegions = new Set<string>();
+    const lines = raw.split('\n');
+    const dedupedLines: string[] = [];
+    let skipUntilEndRegion = false;
+    let currentRegionKey = '';
+    for (const line of lines) {
+      const regionMatch = line.match(/^\/\/\s*#region\s+(.+)/);
+      if (regionMatch) {
+        currentRegionKey = regionMatch[1].trim();
+        if (seenRegions.has(currentRegionKey)) {
+          skipUntilEndRegion = true;
+          continue;
+        }
+        seenRegions.add(currentRegionKey);
+      }
+      if (skipUntilEndRegion) {
+        if (/^\/\/\s*#endregion/.test(line)) {
+          skipUntilEndRegion = false;
+        }
+        continue;
+      }
+      dedupedLines.push(line);
+    }
+    raw = dedupedLines.join('\n');
+
+    // Strip imports, exports, sourcemap comments
+    raw = raw
+      .replace(/^import\s+\*\s+as\s+.*$/gm, '')
+      .replace(/^import\s+\{[^}]*\}\s+from\s+["'][^"']*["']\s*;?\s*$/gm, '')
+      .replace(/^export\s*\{[^}]*\}\s*;?\s*$/gm, '')
+      .replace(/^\/\/#\s*sourceMappingURL=.*$/gm, '');
+
+    // Remove internal-only component type files
+    const internalComponents = ['cursor-blast-effect.d.ts', 'edit-mode.d.ts', 'resize-handle.d.ts'];
+    for (const internal of internalComponents) {
+      const regex = new RegExp(`\\/\\/\\s*#region\\s+${internal.replace('.', '\\.')}[\\s\\S]*?\\/\\/\\s*#endregion[^\\n]*`, 'g');
+      raw = raw.replace(regex, '');
+    }
+
+    // Collapse multiple blank lines
+    raw = raw.replace(/\n{3,}/g, '\n\n').trim();
+
+    dashboardUITypes = raw;
+    console.log(`[Bundle Type Definitions] Loaded dashboard-ui-components types from ${dtsFiles.length} .d.ts files (${(dashboardUITypes.length / 1024).toFixed(2)} KB)`);
+  } catch {
+    console.warn('[Bundle Type Definitions] Warning: dashboard-ui-components dist not found. Run the package build first.');
+  }
+  
+  console.log('[Bundle Type Definitions] Generating bundled-type-definitions.ts...');
+  
+  const output = `// This file is auto-generated by scripts/bundle-type-definitions.ts
+// Do not edit manually - changes will be overwritten
+
+export type TypeDefinitionFile = {
+  path: string,
+  content: string,
+};
+
+export const BUNDLED_TYPE_DEFINITIONS: TypeDefinitionFile[] = ${JSON.stringify(bundledFiles, null, 2)};
+
+export const BUNDLED_DASHBOARD_UI_TYPES: string = ${JSON.stringify(dashboardUITypes)};
+`;
+  
+  await fs.mkdir(path.dirname(outputPath), { recursive: true });
+  writeFileSyncIfChanged(outputPath, output);
+  
+  console.log(`[Bundle Type Definitions] Generated ${outputPath}`);
+  console.log(`[Bundle Type Definitions] Total size: ${(output.length / 1024).toFixed(2)} KB, ${bundledFiles.length} files bundled`);
+}
+
+main().catch((...args) => {
+  console.error('[Bundle Type Definitions] ERROR! Failed to bundle type definitions:', ...args);
+  process.exit(1);
+});
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
index df3416ad75..9c58911db4 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
@@ -10,14 +10,16 @@ import {
   DesignButton,
   DesignCard,
   DesignCategoryTabs,
+  DesignInput,
+  DesignPillToggle,
+} from "@stackframe/dashboard-ui-components";
+import {
   DesignDataTable,
   DesignEditableGrid,
   type DesignEditableGridItem,
   type DesignEditableGridSize,
-  DesignInput,
   DesignListItemRow,
   DesignMenu,
-  DesignPillToggle,
   DesignSelectorDropdown,
   DesignUserList,
 } from "@/components/design-components";
diff --git a/apps/dashboard/src/app/(main)/(protected)/layout-client.tsx b/apps/dashboard/src/app/(main)/(protected)/layout-client.tsx
index 84e0cfbb67..c82dcf7c90 100644
--- a/apps/dashboard/src/app/(main)/(protected)/layout-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/layout-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Loading from "@/app/loading";
-import { CursorBlastEffect } from "@/components/design-components/cursor-blast-effect";
+import { CursorBlastEffect } from "@stackframe/dashboard-ui-components";
 import { ConfigUpdateDialogProvider } from "@/lib/config-update";
 import { getPublicEnvVar } from '@/lib/env';
 import { useStackApp, useUser } from "@stackframe/stack";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
new file mode 100644
index 0000000000..76f620ee50
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page-client.tsx
@@ -0,0 +1,482 @@
+
+"use client";
+
+import { DashboardSandboxHost } from "@/components/commands/create-dashboard/dashboard-sandbox-host";
+import { useRouter, useRouterConfirm } from "@/components/router";
+import { ActionDialog, Button, Typography } from "@/components/ui";
+import { Input } from "@/components/ui/input";
+import {
+  AssistantChat,
+  createDashboardChatAdapter,
+  createHistoryAdapter,
+  DashboardToolUI,
+} from "@/components/vibe-coding";
+import { ToolCallContent } from "@/components/vibe-coding/chat-adapters";
+import { useUpdateConfig } from "@/lib/config-update";
+import { cn } from "@/lib/utils";
+import {
+  FloppyDiskIcon,
+  PencilSimpleIcon,
+  TrashIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { ALL_APPS } from "@stackframe/stack-shared/dist/apps/apps-config";
+import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import type { AppId } from "@/lib/apps-frontend";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { getPublicEnvVar } from "@/lib/env";
+import { useUser } from "@stackframe/stack";
+import { usePathname } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PageLayout } from "../../page-layout";
+import { useAdminApp, useProjectId } from "../../use-admin-app";
+
+function useDashboardId(): string {
+  const pathname = usePathname();
+  const parts = pathname.split("/");
+  const dashboardsIdx = parts.indexOf("dashboards");
+  return parts[dashboardsIdx + 1] ?? throwErr("Dashboard ID not found in path");
+}
+
+export default function PageClient() {
+  const adminApp = useAdminApp();
+  const project = adminApp.useProject();
+  const projectId = useProjectId();
+  const currentUser = useUser({ or: "redirect" });
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");
+  const config = project.useConfig();
+  const updateConfig = useUpdateConfig();
+  const router = useRouter();
+  const dashboardId = useDashboardId();
+  const [hasEverExisted, setHasEverExisted] = useState(false);
+
+  const enabledAppIds = useMemo(() =>
+    typedEntries(config.apps.installed)
+      .filter(([appId, appConfig]) => appConfig?.enabled && appId in ALL_APPS)
+      .map(([appId]) => appId as AppId),
+    [config.apps.installed]
+  );
+
+  const dashboard = config.customDashboards[dashboardId] as
+    | typeof config.customDashboards[string]
+    | undefined;
+
+  useEffect(() => {
+    if (dashboard) {
+      setHasEverExisted(true);
+    }
+  }, [dashboard]);
+
+  useEffect(() => {
+    if (hasEverExisted && !dashboard) {
+      router.replace(`/projects/${projectId}/dashboards`);
+    }
+  }, [hasEverExisted, dashboard, router, projectId]);
+
+  if (!dashboard) {
+    return null;
+  }
+
+  return (
+    <DashboardDetailContent
+      dashboardId={dashboardId}
+      displayName={dashboard.displayName}
+      tsxSource={dashboard.tsxSource}
+      projectId={projectId}
+      adminApp={adminApp}
+      updateConfig={updateConfig}
+      router={router}
+      currentUser={currentUser}
+      backendBaseUrl={backendBaseUrl}
+      enabledAppIds={enabledAppIds}
+    />
+  );
+}
+
+function DashboardDetailContent({
+  dashboardId,
+  displayName,
+  tsxSource,
+  projectId,
+  adminApp,
+  updateConfig,
+  router,
+  currentUser,
+  backendBaseUrl,
+  enabledAppIds,
+}: {
+  dashboardId: string,
+  displayName: string,
+  tsxSource: string,
+  projectId: string,
+  adminApp: ReturnType<typeof useAdminApp>,
+  updateConfig: ReturnType<typeof useUpdateConfig>,
+  router: ReturnType<typeof useRouter>,
+  currentUser: NonNullable<ReturnType<typeof useUser>>,
+  backendBaseUrl: string,
+  enabledAppIds: AppId[],
+}) {
+  const composerPlaceholder = useTypingPlaceholder(
+    "Create a dashboard about ",
+    DASHBOARD_PLACEHOLDER_SUFFIXES,
+  );
+
+  const hasSource = tsxSource.length > 0;
+  const [isChatOpen, setIsChatOpen] = useState(!hasSource);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [currentTsxSource, setCurrentTsxSource] = useState(tsxSource);
+  const [savedTsxSource, setSavedTsxSource] = useState(tsxSource);
+  const hasUnsavedChanges = currentTsxSource !== savedTsxSource;
+  const { setNeedConfirm } = useRouterConfirm();
+  useEffect(() => {
+    if (!hasUnsavedChanges) return;
+    setNeedConfirm(true);
+    return () => setNeedConfirm(false);
+  }, [setNeedConfirm, hasUnsavedChanges]);
+
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [editedName, setEditedName] = useState(displayName);
+
+  const artifact = useMemo(() => ({
+    prompt: displayName,
+    projectId,
+    runtimeCodegen: {
+      title: displayName,
+      description: "",
+      uiRuntimeSourceCode: currentTsxSource,
+    },
+  }), [displayName, projectId, currentTsxSource]);
+
+  const handleBack = useCallback(() => {
+    router.push(`/projects/${projectId}/dashboards`);
+  }, [router, projectId]);
+
+  const currentHasSource = currentTsxSource.length > 0;
+
+  const handleEditToggle = useCallback(() => {
+    if (!currentHasSource) return;
+    setIsChatOpen(prev => !prev);
+  }, [currentHasSource]);
+
+  const handleNavigate = useCallback((path: string) => {
+    router.push(`/projects/${projectId}${path}`);
+  }, [router, projectId]);
+
+  const handleCodeUpdate = useCallback((toolCall: ToolCallContent) => {
+    setCurrentTsxSource(toolCall.args.content);
+  }, []);
+
+  const handleSaveDashboard = useCallback(async () => {
+    await updateConfig({
+      adminApp,
+      configUpdate: {
+        [`customDashboards.${dashboardId}.tsxSource`]: currentTsxSource,
+      },
+      pushable: false,
+    });
+    setSavedTsxSource(currentTsxSource);
+  }, [updateConfig, adminApp, dashboardId, currentTsxSource]);
+
+  const handleSaveName = async () => {
+    const trimmed = editedName.trim();
+    if (!trimmed || trimmed === displayName) {
+      setEditedName(displayName);
+      setIsEditingName(false);
+      return;
+    }
+    await updateConfig({
+      adminApp,
+      configUpdate: {
+        [`customDashboards.${dashboardId}.displayName`]: trimmed,
+      },
+      pushable: false,
+    });
+    setIsEditingName(false);
+  };
+
+  const handleDelete = async () => {
+    await updateConfig({
+      adminApp,
+      configUpdate: {
+        [`customDashboards.${dashboardId}`]: null,
+      },
+      pushable: false,
+    });
+    router.replace(`/projects/${projectId}/dashboards`);
+  };
+
+  const dashboardPreview = currentHasSource ? (
+    <DashboardSandboxHost
+      artifact={artifact}
+      onBack={handleBack}
+      onEditToggle={handleEditToggle}
+      onNavigate={handleNavigate}
+      isChatOpen={isChatOpen}
+    />
+  ) : (
+    <div className="flex h-full items-center justify-center">
+      <div className="text-center space-y-3">
+        <div className="mx-auto h-12 w-12 rounded-2xl bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" className="text-muted-foreground/60" fill="currentColor">
+            <path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM32,192V64H224V192ZM48,136a8,8,0,0,1,8-8H200a8,8,0,0,1,0,16H56A8,8,0,0,1,48,136Zm0-32a8,8,0,0,1,8-8h72a8,8,0,0,1,0,16H56A8,8,0,0,1,48,104Zm0,64a8,8,0,0,1,8-8H200a8,8,0,0,1,0,16H56A8,8,0,0,1,48,168Z"/>
+          </svg>
+        </div>
+        <Typography className="font-semibold text-foreground">No dashboard yet</Typography>
+        <Typography variant="secondary" className="text-sm max-w-[240px]">
+          Describe what you&apos;d like to see in the chat to generate your dashboard.
+        </Typography>
+      </div>
+    </div>
+  );
+
+  return (
+    <PageLayout fillWidth noPadding>
+      {/* Both panels are always in the DOM so the iframe never unmounts/reloads.
+          The chat panel animates its width; the dashboard panel adjusts via flex-1. */}
+      <div data-full-bleed className="flex h-full">
+        {/* Dashboard iframe panel */}
+        <div
+          className={cn(
+            "flex-1 min-w-0 flex flex-col transition-all duration-300 ease-in-out",
+            "pl-6 pr-5 py-6",
+            !isChatOpen && "dark:p-0",
+          )}
+        >
+          <div className={cn(
+            "relative flex-1 overflow-hidden transition-all duration-300 ease-in-out",
+            "dark:bg-transparent dark:rounded-none dark:shadow-none dark:ring-0",
+          )}>
+            {dashboardPreview}
+          </div>
+        </div>
+
+        {/* Chat panel — slides in from the right. min-w on the inner card prevents content
+            squishing during the width animation (overflow-hidden clips the excess). */}
+        <div className={cn(
+          "shrink-0 flex flex-col overflow-hidden transition-all duration-300 ease-in-out",
+          isChatOpen ? "w-[480px] pr-6 pl-2 py-6" : "w-0",
+        )}>
+          <div className="w-full min-w-[448px] flex-1 overflow-hidden rounded-2xl shadow-xl ring-1 ring-foreground/[0.06] dark:bg-background/40 backdrop-blur-xl bg-slate-50/90">
+            <div className="flex flex-col h-full">
+              <ChatPanelHeader
+                displayName={displayName}
+                isEditingName={isEditingName}
+                editedName={editedName}
+                onStartEditName={() => {
+                  setEditedName(displayName);
+                  setIsEditingName(true);
+                }}
+                onEditedNameChange={setEditedName}
+                onSaveName={handleSaveName}
+                onCancelEditName={() => {
+                  setEditedName(displayName);
+                  setIsEditingName(false);
+                }}
+                onDelete={() => setDeleteDialogOpen(true)}
+                onClose={currentHasSource ? () => setIsChatOpen(false) : undefined}
+                hasUnsavedChanges={hasUnsavedChanges}
+                onSaveDashboard={handleSaveDashboard}
+              />
+              <div className="flex-1 min-h-0">
+                <AssistantChat
+                  chatAdapter={createDashboardChatAdapter(backendBaseUrl, currentTsxSource, handleCodeUpdate, currentUser, enabledAppIds)}
+                  historyAdapter={createHistoryAdapter(adminApp, dashboardId)}
+                  toolComponents={<DashboardToolUI setCurrentCode={setCurrentTsxSource} currentCode={currentTsxSource} />}
+                  useOffWhiteLightMode
+                  composerPlaceholder={currentHasSource ? undefined : composerPlaceholder}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ActionDialog
+        open={deleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        title="Delete Dashboard"
+        okButton={{
+          label: "Delete",
+          onClick: handleDelete,
+          props: { variant: "destructive" },
+        }}
+        cancelButton={{ label: "Cancel" }}
+      >
+        <Typography variant="secondary" className="text-sm">
+          Are you sure you want to delete &quot;{displayName}&quot;? This action cannot be undone.
+        </Typography>
+      </ActionDialog>
+    </PageLayout>
+  );
+}
+
+const DASHBOARD_PLACEHOLDER_SUFFIXES = [
+  "user signups and retention",
+  "team activity across projects",
+  "API latency and error rates",
+  "email open rates and clicks",
+  "authentication trends",
+  "revenue and subscription growth",
+];
+
+function useTypingPlaceholder(
+  prefix: string,
+  suffixes: readonly string[],
+  { typeSpeed = 70, deleteSpeed = 40, pauseAfterType = 2000, pauseAfterDelete = 400 } = {},
+): string {
+  const [suffixText, setSuffixText] = useState("");
+  const state = useRef({
+    suffixIndex: 0,
+    charIndex: 0,
+    phase: "typing" as "typing" | "pausing" | "deleting" | "waiting",
+  });
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    function tick() {
+      const s = state.current;
+      const target = suffixes[s.suffixIndex % suffixes.length];
+
+      switch (s.phase) {
+        case "typing": {
+          if (s.charIndex < target.length) {
+            s.charIndex++;
+            setSuffixText(target.slice(0, s.charIndex));
+            timeoutId = setTimeout(tick, typeSpeed);
+          } else {
+            s.phase = "pausing";
+            timeoutId = setTimeout(tick, pauseAfterType);
+          }
+          break;
+        }
+        case "pausing": {
+          s.phase = "deleting";
+          timeoutId = setTimeout(tick, deleteSpeed);
+          break;
+        }
+        case "deleting": {
+          if (s.charIndex > 0) {
+            s.charIndex--;
+            setSuffixText(target.slice(0, s.charIndex));
+            timeoutId = setTimeout(tick, deleteSpeed);
+          } else {
+            s.phase = "waiting";
+            timeoutId = setTimeout(tick, pauseAfterDelete);
+          }
+          break;
+        }
+        case "waiting": {
+          s.suffixIndex = (s.suffixIndex + 1) % suffixes.length;
+          s.charIndex = 0;
+          s.phase = "typing";
+          timeoutId = setTimeout(tick, typeSpeed);
+          break;
+        }
+      }
+    }
+
+    timeoutId = setTimeout(tick, 500);
+    return () => clearTimeout(timeoutId);
+  }, [suffixes, typeSpeed, deleteSpeed, pauseAfterType, pauseAfterDelete]);
+
+  return prefix + suffixText;
+}
+
+function ChatPanelHeader({
+  displayName,
+  isEditingName,
+  editedName,
+  onStartEditName,
+  onEditedNameChange,
+  onSaveName,
+  onCancelEditName,
+  onDelete,
+  onClose,
+  hasUnsavedChanges,
+  onSaveDashboard,
+}: {
+  displayName: string,
+  isEditingName: boolean,
+  editedName: string,
+  onStartEditName: () => void,
+  onEditedNameChange: (name: string) => void,
+  onSaveName: () => Promise<void>,
+  onCancelEditName: () => void,
+  onDelete: () => void,
+  onClose?: () => void,
+  hasUnsavedChanges: boolean,
+  onSaveDashboard: () => Promise<void>,
+}) {
+  return (
+    <div className="flex flex-col shrink-0">
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-border/30 dark:border-foreground/[0.06]">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          {isEditingName ? (
+            <Input
+              value={editedName}
+              onChange={(e) => onEditedNameChange(e.target.value)}
+              className="h-7 text-sm flex-1"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  runAsynchronouslyWithAlert(onSaveName);
+                }
+                if (e.key === "Escape") {
+                  onCancelEditName();
+                }
+              }}
+              onBlur={() => runAsynchronouslyWithAlert(onSaveName)}
+            />
+          ) : (
+            <button
+              onClick={onStartEditName}
+              className="flex items-center gap-1.5 group min-w-0"
+            >
+              <span className={cn(
+                "text-sm font-semibold text-foreground truncate",
+              )}>
+                {displayName}
+              </span>
+              <PencilSimpleIcon className="h-3 w-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity hover:transition-none shrink-0" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1 shrink-0">
+          {hasUnsavedChanges && (
+            <Button
+              size="sm"
+              className="h-7 gap-1.5 text-xs min-w-[60px]"
+              onClick={onSaveDashboard}
+            >
+              <span className="flex items-center gap-1.5">
+                <FloppyDiskIcon className="h-3.5 w-3.5" />
+                Save
+              </span>
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-red-500 hover:text-red-600 hover:bg-red-500/10"
+            onClick={onDelete}
+          >
+            <TrashIcon className="h-3.5 w-3.5" />
+          </Button>
+          {onClose && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 text-muted-foreground hover:text-foreground"
+              onClick={onClose}
+            >
+              <XIcon className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page.tsx
new file mode 100644
index 0000000000..57acc3e46f
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/[dashboardId]/page.tsx
@@ -0,0 +1,9 @@
+import PageClient from "./page-client";
+
+export const metadata = {
+  title: "Dashboard",
+};
+
+export default function Page() {
+  return <PageClient />;
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
new file mode 100644
index 0000000000..11bc249889
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { DesignListItemRow } from "@/components/design-components";
+import { FormDialog } from "@/components/form-dialog";
+import { InputField } from "@/components/form-fields";
+import { useRouter } from "@/components/router";
+import { ActionDialog, Button, Typography } from "@/components/ui";
+import { useUpdateConfig } from "@/lib/config-update";
+import {
+  ChartBarIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import { DesignCard } from "@stackframe/dashboard-ui-components";
+import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
+import { useMemo, useState } from "react";
+import * as yup from "yup";
+import { PageLayout } from "../page-layout";
+import { useAdminApp } from "../use-admin-app";
+
+type DashboardEntry = {
+  id: string,
+  displayName: string,
+};
+
+export default function PageClient() {
+  const adminApp = useAdminApp();
+  const project = adminApp.useProject();
+  const config = project.useConfig();
+  const updateConfig = useUpdateConfig();
+  const router = useRouter();
+  const [deleteDialogId, setDeleteDialogId] = useState<string | null>(null);
+
+  const dashboards = useMemo((): DashboardEntry[] => {
+    return Object.entries(config.customDashboards).map(([id, dashboard]) => ({
+      id,
+      displayName: (dashboard as { displayName: string }).displayName,
+    }));
+  }, [config.customDashboards]);
+
+  const dashboardToDelete = deleteDialogId
+    ? dashboards.find(d => d.id === deleteDialogId)
+    : null;
+
+  const handleDelete = async (id: string) => {
+    await updateConfig({
+      adminApp,
+      configUpdate: {
+        [`customDashboards.${id}`]: null,
+      },
+      pushable: false,
+    });
+    setDeleteDialogId(null);
+  };
+
+  return (
+    <PageLayout
+      title="Custom Dashboards"
+      description="Custom Dashboards for your project"
+      actions={
+        <NewDashboardButton
+          adminApp={adminApp}
+          updateConfig={updateConfig}
+          router={router}
+        />
+      }
+    >
+      {dashboards.length === 0 ? (
+        <DesignCard gradient="default">
+          <div className="flex flex-col items-center justify-center gap-3 py-10 text-center">
+            <div className="w-12 h-12 rounded-2xl bg-foreground/[0.04] ring-1 ring-foreground/[0.06] flex items-center justify-center">
+              <ChartBarIcon className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <div>
+              <Typography className="font-semibold text-foreground">No dashboards yet</Typography>
+              <Typography variant="secondary" className="text-sm mt-1">
+                Create a dashboard from the command palette (Cmd+K) or click &quot;New Dashboard&quot; above.
+              </Typography>
+            </div>
+          </div>
+        </DesignCard>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {dashboards.map((dashboard) => (
+            <DesignListItemRow
+              key={dashboard.id}
+              icon={ChartBarIcon}
+              title={dashboard.displayName}
+              size="lg"
+              onClick={() => router.push(`/projects/${project.id}/dashboards/${dashboard.id}`)}
+              buttons={[
+                {
+                  id: "delete",
+                  label: "Delete",
+                  icon: <TrashIcon className="h-4 w-4" />,
+                  display: "icon",
+                  onClick: [
+                    {
+                      id: "delete-action",
+                      label: "Delete Dashboard",
+                      onClick: () => setDeleteDialogId(dashboard.id),
+                      itemVariant: "destructive" as const,
+                    },
+                  ],
+                },
+              ]}
+            />
+          ))}
+        </div>
+      )}
+
+      <ActionDialog
+        open={deleteDialogId !== null}
+        onClose={() => setDeleteDialogId(null)}
+        title="Delete Dashboard"
+        okButton={{
+          label: "Delete",
+          onClick: async () => {
+            if (deleteDialogId) {
+              await handleDelete(deleteDialogId);
+            }
+          },
+          props: { variant: "destructive" },
+        }}
+        cancelButton={{ label: "Cancel" }}
+      >
+        <Typography variant="secondary" className="text-sm">
+          Are you sure you want to delete &quot;{dashboardToDelete?.displayName ?? "this dashboard"}&quot;? This action cannot be undone.
+        </Typography>
+      </ActionDialog>
+    </PageLayout>
+  );
+}
+
+function NewDashboardButton({
+  adminApp,
+  updateConfig,
+  router,
+}: {
+  adminApp: ReturnType<typeof useAdminApp>,
+  updateConfig: ReturnType<typeof useUpdateConfig>,
+  router: ReturnType<typeof useRouter>,
+}) {
+  const handleCreate = async (values: { name: string }) => {
+    const id = generateUuid();
+    await updateConfig({
+      adminApp,
+      configUpdate: {
+        [`customDashboards.${id}`]: {
+          displayName: values.name,
+          tsxSource: "",
+        },
+      },
+      pushable: false,
+    });
+    router.push(`/projects/${adminApp.projectId}/dashboards/${id}`);
+  };
+
+  return (
+    <FormDialog
+      title="New Dashboard"
+      trigger={
+        <Button className="gap-2">
+          <PlusIcon className="h-4 w-4" />
+          New Dashboard
+        </Button>
+      }
+      onSubmit={handleCreate}
+      formSchema={yup.object({
+        name: yup.string().defined().min(1, "Name is required"),
+      })}
+      render={(form) => (
+        <InputField
+          control={form.control}
+          name="name"
+          label="Dashboard Name"
+          placeholder="Enter dashboard name"
+          required
+        />
+      )}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page.tsx
new file mode 100644
index 0000000000..d3cd9e87d8
--- /dev/null
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page.tsx
@@ -0,0 +1,9 @@
+import PageClient from "./page-client";
+
+export const metadata = {
+  title: "Custom Dashboards",
+};
+
+export default function Page() {
+  return <PageClient />;
+}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx
index 6ed389b46e..315540701e 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/design-language/page-client.tsx
@@ -8,15 +8,17 @@ import {
   DesignCard,
   DesignCardTint,
   DesignCategoryTabs,
+  DesignInput,
+  DesignPillToggle,
+} from "@stackframe/dashboard-ui-components";
+import {
   DesignDataTable,
   DesignEditableGrid,
   type DesignEditableGridItem,
-  DesignInput,
   DesignListItemRow,
   DesignMenu,
-  DesignPillToggle,
   DesignSelectorDropdown,
-  DesignUserList
+  DesignUserList,
 } from "@/components/design-components";
 import { Link } from "@/components/link";
 import {
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
index 7a275e99d3..543e03168b 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx
@@ -1,20 +1,21 @@
 "use client";
 
 import { TeamMemberSearchTable } from "@/components/data-table/team-member-search-table";
-import { DesignBadge, DesignBadgeColor } from "@/components/design-components/badge";
-import { DesignButton } from "@/components/design-components/button";
-import { DesignCard } from "@/components/design-components/card";
-import { DesignDataTable } from "@/components/design-components/table";
+import { DesignButton } from "@/components/design-components";
+import { DesignCard } from "@/components/design-components";
 import EmailPreview, { type OnWysiwygEditCommit } from "@/components/email-preview";
 import { EmailThemeSelector } from "@/components/email-theme-selector";
 import { useRouter, useRouterConfirm } from "@/components/router";
 import { ActionDialog, Alert, AlertDescription, AlertTitle, Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton, Spinner, Typography } from "@/components/ui";
 import { AssistantChat, CodeEditor, VibeCodeLayout, type ViewportMode, type WysiwygDebugInfo } from "@/components/vibe-coding";
-import { ToolCallContent, createChatAdapter, createHistoryAdapter } from "@/components/vibe-coding/chat-adapters";
+import { ToolCallContent, applyWysiwygEdit, createChatAdapter, createHistoryAdapter } from "@/components/vibe-coding/chat-adapters";
 import { EmailDraftUI } from "@/components/vibe-coding/draft-tool-components";
+import { useUser } from "@stackframe/stack";
+import { getPublicEnvVar } from "@/lib/env";
 import { PauseIcon, PlayIcon, XCircleIcon } from "@phosphor-icons/react";
 import { AdminEmailOutbox, AdminEmailOutboxStatus } from "@stackframe/stack";
 import { KnownErrors } from "@stackframe/stack-shared/dist/known-errors";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { ColumnDef } from "@tanstack/react-table";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -34,6 +35,8 @@ function isValidStage(stage: string | null): stage is DraftStage {
 
 export default function PageClient({ draftId }: { draftId: string }) {
   const stackAdminApp = useAdminApp();
+  const currentUser = useUser({ or: "redirect" });
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_SERVER_STACK_API_URL") ?? getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_SERVER_STACK_API_URL is not set");
   const router = useRouter();
   const searchParams = useSearchParams();
   const { setNeedConfirm } = useRouterConfirm();
@@ -151,7 +154,8 @@ export default function PageClient({ draftId }: { draftId: string }) {
 
   // Handle WYSIWYG edit commits - calls the AI endpoint to update source code
   const handleWysiwygEditCommit: OnWysiwygEditCommit = useCallback(async (data) => {
-    const result = await stackAdminApp.applyWysiwygEdit({
+    const result = await applyWysiwygEdit(backendBaseUrl, {
+      currentUser,
       sourceType: 'draft',
       sourceCode: currentCode,
       oldText: data.oldText,
@@ -162,7 +166,7 @@ export default function PageClient({ draftId }: { draftId: string }) {
     });
     setCurrentCode(result.updatedSource);
     return result.updatedSource;
-  }, [stackAdminApp, currentCode]);
+  }, [backendBaseUrl, currentCode, currentUser]);
 
   return (
     <AppEnabledGuard appId="emails">
@@ -229,7 +233,7 @@ export default function PageClient({ draftId }: { draftId: string }) {
                 chatComponent={
                   <AssistantChat
                     historyAdapter={createHistoryAdapter(stackAdminApp, draftId)}
-                    chatAdapter={createChatAdapter(stackAdminApp, draftId, "email-draft", handleToolUpdate)}
+                    chatAdapter={createChatAdapter(backendBaseUrl, "email-draft", handleToolUpdate, () => currentCode, currentUser)}
                     toolComponents={<EmailDraftUI setCurrentCode={setCurrentCode} />}
                     useOffWhiteLightMode
                   />
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx
index 2e247a9155..42671d8f7c 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/page-client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { DesignCard } from "@/components/design-components/card";
+import { DesignCard } from "@/components/design-components";
 import { FormDialog } from "@/components/form-dialog";
 import { InputField } from "@/components/form-fields";
 import { useRouter } from "@/components/router";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
index 8fd5745a1a..08fd771a52 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { DesignButton } from "@/components/design-components/button";
-import { DesignCard } from "@/components/design-components/card";
+import { DesignButton } from "@/components/design-components";
+import { DesignCard } from "@/components/design-components";
 import { SimpleTooltip, Typography } from "@/components/ui";
 import { cn } from "@/lib/utils";
 import { Gauge } from "@phosphor-icons/react";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/email-status-utils.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/email-status-utils.tsx
index 17a0c0f645..70e8f8d5ea 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/email-status-utils.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/email-status-utils.tsx
@@ -1,4 +1,4 @@
-import { DesignBadgeColor } from "@/components/design-components/badge";
+import { DesignBadgeColor } from "@/components/design-components";
 import { AdminEmailOutboxStatus } from "@stackframe/stack";
 import { StatsBarData } from "./stats-bar";
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/grouped-email-table.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/grouped-email-table.tsx
index a0001e70ce..b6fc5a2a67 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/grouped-email-table.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/grouped-email-table.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { DesignDataTable } from "@/components/design-components/table";
+import { DesignDataTable } from "@/components/design-components";
 import { useRouter } from "@/components/router";
 import { Spinner, Typography } from "@/components/ui";
 import { AdminEmailOutbox, AdminEmailOutboxStatus } from "@stackframe/stack";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
index ce9c6ad331..17021cc3f0 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { DesignBadge } from "@/components/design-components/badge";
-import { DesignCard } from "@/components/design-components/card";
-import { DesignPillToggle } from "@/components/design-components/pill-toggle";
-import { DesignDataTable } from "@/components/design-components/table";
+import { DesignBadge } from "@/components/design-components";
+import { DesignCard } from "@/components/design-components";
+import { DesignPillToggle } from "@/components/design-components";
+import { DesignDataTable } from "@/components/design-components";
 import { useRouter } from "@/components/router";
 import { Spinner, Typography } from "@/components/ui";
 import { Envelope } from "@phosphor-icons/react";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/sent-emails-view.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/sent-emails-view.tsx
index 704ca8059b..367cede8f5 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/sent-emails-view.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/sent-emails-view.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { DesignBadge } from "@/components/design-components/badge";
-import { DesignCard } from "@/components/design-components/card";
-import { DesignDataTable } from "@/components/design-components/table";
+import { DesignBadge } from "@/components/design-components";
+import { DesignCard } from "@/components/design-components";
+import { DesignDataTable } from "@/components/design-components";
 import { useRouter } from "@/components/router";
 import { Spinner, Typography } from "@/components/ui";
 import { Envelope } from "@phosphor-icons/react";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
index f58d62f155..8b8772e18d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
@@ -2,7 +2,7 @@
 
 import { FormDialog } from "@/components/form-dialog";
 import { InputField } from "@/components/form-fields";
-import { DesignCard } from "@/components/design-components/card";
+import { DesignCard } from "@/components/design-components";
 import { useUpdateConfig } from "@/lib/config-update";
 import { getPublicEnvVar } from "@/lib/env";
 import { cn } from "@/lib/utils";
@@ -12,10 +12,10 @@ import { strictEmailSchema } from "@stackframe/stack-shared/dist/schema-fields";
 import { ArrowsClockwise, Envelope, GearSix, GlobeSimple, PaperPlaneTilt } from "@phosphor-icons/react";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { DesignAlert } from "@/components/design-components/alert";
-import { DesignButton } from "@/components/design-components/button";
-import { DesignInput } from "@/components/design-components/input";
-import { DesignSelectorDropdown } from "@/components/design-components/select";
+import { DesignAlert } from "@/components/design-components";
+import { DesignButton } from "@/components/design-components";
+import { DesignInput } from "@/components/design-components";
+import { DesignSelectorDropdown } from "@/components/design-components";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Label, Typography, useToast } from "@/components/ui";
 import { SimpleTooltip } from "@/components/ui/simple-tooltip";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/theme-settings.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/theme-settings.tsx
index 0a26bd4432..2f1bd54ef8 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/theme-settings.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/theme-settings.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { DesignButton } from "@/components/design-components/button";
-import { DesignCard } from "@/components/design-components/card";
+import { DesignButton } from "@/components/design-components";
+import { DesignCard } from "@/components/design-components";
 import EmailPreview from "@/components/email-preview";
 import { useRouter } from "@/components/router";
 import { Typography } from "@/components/ui";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
index 8d547b8506..75d6b6f4a7 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/[templateId]/page-client.tsx
@@ -14,16 +14,22 @@ import {
   type ViewportMode,
   type WysiwygDebugInfo,
 } from "@/components/vibe-coding";
-import { ToolCallContent } from "@/components/vibe-coding/chat-adapters";
+import { applyWysiwygEdit, ToolCallContent } from "@/components/vibe-coding/chat-adapters";
+import { getPublicEnvVar } from "@/lib/env";
+import { useUser } from "@stackframe/stack";
 import { KnownErrors } from "@stackframe/stack-shared/dist/known-errors";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { useCallback, useEffect, useRef, useState } from "react";
+
 import { AppEnabledGuard } from "../../app-enabled-guard";
 import { PageLayout } from "../../page-layout";
 import { useAdminApp } from "../../use-admin-app";
 
 export default function PageClient(props: { templateId: string }) {
   const stackAdminApp = useAdminApp();
+  const currentUser = useUser({ or: "redirect" });
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_SERVER_STACK_API_URL") ?? getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_SERVER_STACK_API_URL is not set");
   const templates = stackAdminApp.useEmailTemplates();
   const { setNeedConfirm } = useRouterConfirm();
   const templateFromHook = templates.find((t) => t.id === props.templateId);
@@ -145,7 +151,8 @@ export default function PageClient(props: { templateId: string }) {
 
   // Handle WYSIWYG edit commits - calls the AI endpoint to update source code
   const handleWysiwygEditCommit: OnWysiwygEditCommit = useCallback(async (data) => {
-    const result = await stackAdminApp.applyWysiwygEdit({
+    const result = await applyWysiwygEdit(backendBaseUrl, {
+      currentUser,
       sourceType: 'template',
       sourceCode: currentCode,
       oldText: data.oldText,
@@ -156,7 +163,7 @@ export default function PageClient(props: { templateId: string }) {
     });
     setCurrentCode(result.updatedSource);
     return result.updatedSource;
-  }, [stackAdminApp, currentCode]);
+  }, [backendBaseUrl, currentCode, currentUser]);
 
   if (!template) {
     // Show loading state while waiting for the template (either from hook or direct fetch)
@@ -270,7 +277,7 @@ export default function PageClient(props: { templateId: string }) {
             }
             chatComponent={
               <AssistantChat
-                chatAdapter={createChatAdapter(stackAdminApp, template.id, "email-template", handleCodeUpdate)}
+                chatAdapter={createChatAdapter(backendBaseUrl, "email-template", handleCodeUpdate, () => currentCode, currentUser)}
                 historyAdapter={createHistoryAdapter(stackAdminApp, template.id)}
                 toolComponents={<EmailTemplateUI setCurrentCode={setCurrentCode} />}
                 useOffWhiteLightMode
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx
index 97b9491822..a6ad5364e2 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { DesignCard } from "@/components/design-components/card";
+import { DesignCard } from "@/components/design-components";
 import { FormDialog } from "@/components/form-dialog";
 import { InputField } from "@/components/form-fields";
 import { useRouter } from "@/components/router";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
index f7faee0c64..4f0b778e5c 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/[themeId]/page-client.tsx
@@ -5,12 +5,16 @@ import { useRouterConfirm } from "@/components/router";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui";
 import { AssistantChat, CodeEditor, EmailThemeUI, VibeCodeLayout, type ViewportMode, type WysiwygDebugInfo } from "@/components/vibe-coding";
 import {
+  applyWysiwygEdit,
   createChatAdapter,
   createHistoryAdapter,
   ToolCallContent
 } from "@/components/vibe-coding/chat-adapters";
+import { getPublicEnvVar } from "@/lib/env";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { previewTemplateSource } from "@stackframe/stack-shared/dist/helpers/emails";
 import { KnownErrors } from "@stackframe/stack-shared/dist/known-errors";
+import { useUser } from "@stackframe/stack";
 import { useCallback, useEffect, useState } from "react";
 import { AppEnabledGuard } from "../../app-enabled-guard";
 import { useAdminApp } from "../../use-admin-app";
@@ -18,6 +22,8 @@ import { useAdminApp } from "../../use-admin-app";
 
 export default function PageClient({ themeId }: { themeId: string }) {
   const stackAdminApp = useAdminApp();
+  const currentUser = useUser({ or: "redirect" });
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_SERVER_STACK_API_URL") ?? getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_SERVER_STACK_API_URL is not set");
   const theme = stackAdminApp.useEmailTheme(themeId);
   const { setNeedConfirm } = useRouterConfirm();
   const [currentCode, setCurrentCode] = useState(theme.tsxSource);
@@ -31,7 +37,8 @@ export default function PageClient({ themeId }: { themeId: string }) {
 
   // Handle WYSIWYG edit commits - calls the AI endpoint to update source code
   const handleWysiwygEditCommit: OnWysiwygEditCommit = useCallback(async (data) => {
-    const result = await stackAdminApp.applyWysiwygEdit({
+    const result = await applyWysiwygEdit(backendBaseUrl, {
+      currentUser,
       sourceType: 'theme',
       sourceCode: currentCode,
       oldText: data.oldText,
@@ -42,7 +49,7 @@ export default function PageClient({ themeId }: { themeId: string }) {
     });
     setCurrentCode(result.updatedSource);
     return result.updatedSource;
-  }, [stackAdminApp, currentCode]);
+  }, [backendBaseUrl, currentCode, currentUser]);
 
   useEffect(() => {
     if (theme.tsxSource === currentCode) return;
@@ -124,7 +131,7 @@ export default function PageClient({ themeId }: { themeId: string }) {
             }
             chatComponent={
               <AssistantChat
-                chatAdapter={createChatAdapter(stackAdminApp, themeId, "email-theme", handleThemeUpdate)}
+                chatAdapter={createChatAdapter(backendBaseUrl, "email-theme", handleThemeUpdate, () => currentCode, currentUser)}
                 historyAdapter={createHistoryAdapter(stackAdminApp, themeId)}
                 toolComponents={<EmailThemeUI setCurrentCode={setCurrentCode} />}
                 useOffWhiteLightMode
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
index d7d8443d70..3c146c2e05 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { DesignCard } from "@/components/design-components/card";
+import { DesignCard } from "@/components/design-components";
 import EmailPreview, { DEVICE_VIEWPORTS, DeviceViewport } from "@/components/email-preview";
 import { FormDialog } from "@/components/form-dialog";
 import { InputField } from "@/components/form-fields";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-viewer/[emailId]/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-viewer/[emailId]/page-client.tsx
index 1479101960..fa6b800822 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-viewer/[emailId]/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-viewer/[emailId]/page-client.tsx
@@ -2,7 +2,7 @@
 
 import EmailPreview from "@/components/email-preview";
 import { EmailThemeSelector } from "@/components/email-theme-selector";
-import { DesignButton } from "@/components/design-components/button";
+import { DesignButton } from "@/components/design-components";
 import { ActionDialog, Alert, AlertDescription, AlertTitle, Badge, Button, Input, Label, Spinner, Typography, useToast } from "@/components/ui";
 import { CodeEditor, VibeCodeLayout, type ViewportMode } from "@/components/vibe-coding";
 import { cn } from "@/lib/utils";
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 e48292974d..a97c02bc10 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,8 +1,8 @@
 "use client";
 
 import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
-import { DesignBadge } from "@/components/design-components/badge";
-import { DesignCard } from "@/components/design-components/card";
+import { DesignBadge } from "@/components/design-components";
+import { DesignCard } from "@/components/design-components";
 import { ActionDialog, Spinner, Switch } from "@/components/ui";
 import { useUpdateConfig } from "@/lib/config-update";
 import { ShieldCheck } from "@phosphor-icons/react";
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/edit/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/edit/page-client.tsx
index abfa4deb83..f834f927dd 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/edit/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/[productId]/edit/page-client.tsx
@@ -17,9 +17,10 @@ import {
   toast,
   Typography,
 } from "@/components/ui";
+import { SubpageHeader } from "@/components/design-components/subpage-header";
 import { useUpdateConfig } from "@/lib/config-update";
 import { cn } from "@/lib/utils";
-import { ArrowLeftIcon, ClockIcon, HardDriveIcon, PackageIcon, PlusIcon, PuzzlePieceIcon, StackIcon, TrashIcon } from "@phosphor-icons/react";
+import { ClockIcon, HardDriveIcon, PackageIcon, PlusIcon, PuzzlePieceIcon, StackIcon, TrashIcon } from "@phosphor-icons/react";
 import { CompleteConfig } from "@stackframe/stack-shared/dist/config/schema";
 import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
 import { useState } from "react";
@@ -270,37 +271,28 @@ function EditProductForm({ productId, existingProduct }: { productId: string, ex
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between gap-4 px-6 py-4 border-b border-border/40">
-        <div className="flex items-center gap-4">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleCancel}
-            className="gap-2"
-          >
-            <ArrowLeftIcon className="h-4 w-4" />
-            Back
-          </Button>
-          <Typography type="h3" className="font-semibold">Edit Product</Typography>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={handleCancel}>
-            Cancel
-          </Button>
-          <SimpleTooltip
-            tooltip={!canSave ? "Fill in required fields and add at least one price" : undefined}
-            disabled={canSave}
-          >
-            <Button
-              onClick={handleSave}
-              disabled={!canSave || isSaving}
-            >
-              {isSaving ? "Saving..." : "Save Changes"}
+      <SubpageHeader
+        title="Edit Product"
+        onBack={handleCancel}
+        actions={
+          <>
+            <Button variant="outline" onClick={handleCancel}>
+              Cancel
             </Button>
-          </SimpleTooltip>
-        </div>
-      </div>
+            <SimpleTooltip
+              tooltip={!canSave ? "Fill in required fields and add at least one price" : undefined}
+              disabled={canSave}
+            >
+              <Button
+                onClick={handleSave}
+                disabled={!canSave || isSaving}
+              >
+                {isSaving ? "Saving..." : "Save Changes"}
+              </Button>
+            </SimpleTooltip>
+          </>
+        }
+      />
 
       {/* Main content - form on left, preview on right */}
       <div className="flex-1 flex overflow-hidden">
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/new/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/new/page-client.tsx
index f6896da345..064691797d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/new/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/new/page-client.tsx
@@ -25,9 +25,10 @@ import {
   toast,
   Typography,
 } from "@/components/ui";
+import { SubpageHeader } from "@/components/design-components/subpage-header";
 import { useUpdateConfig } from "@/lib/config-update";
 import { cn } from "@/lib/utils";
-import { ArrowLeftIcon, ArrowSquareOutIcon, BuildingOfficeIcon, CaretDownIcon, ChatIcon, ClockIcon, CodeIcon, CopyIcon, GearIcon, HardDriveIcon, LightningIcon, PlusIcon, PuzzlePieceIcon, StackIcon, TrashIcon, UserIcon } from "@phosphor-icons/react";
+import { ArrowSquareOutIcon, BuildingOfficeIcon, CaretDownIcon, ChatIcon, ClockIcon, CodeIcon, CopyIcon, GearIcon, HardDriveIcon, LightningIcon, PlusIcon, PuzzlePieceIcon, StackIcon, TrashIcon, UserIcon } from "@phosphor-icons/react";
 import { CompleteConfig } from "@stackframe/stack-shared/dist/config/schema";
 import { getUserSpecifiedIdErrorMessage, isValidUserSpecifiedId, sanitizeUserSpecifiedId } from "@stackframe/stack-shared/dist/schema-fields";
 import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
@@ -115,18 +116,7 @@ function CustomerTypeSelection({
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex items-center gap-4 px-6 py-4 border-b border-border/40">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onCancel}
-          className="gap-2"
-        >
-          <ArrowLeftIcon className="h-4 w-4" />
-          Back
-        </Button>
-        <Typography type="h3" className="font-semibold">Create Product</Typography>
-      </div>
+      <SubpageHeader title="Create Product" onBack={onCancel} />
       <div className="flex-1 flex items-center justify-center p-6">
         <div className="space-y-4 max-w-md mx-auto">
           <div className="text-center mb-8">
@@ -620,95 +610,86 @@ ${Object.entries(prices).map(([id, price]) => {
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between gap-4 px-6 py-4 border-b border-border/40">
-        <div className="flex items-center gap-4">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleBack}
-            className="gap-2"
-          >
-            <ArrowLeftIcon className="h-4 w-4" />
-            Back
-          </Button>
-          <Typography type="h3" className="font-semibold">Create Product</Typography>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={handleCancel}>
-            Cancel
-          </Button>
-          {isInlineProduct ? (
-            <Button
-              onClick={() => {
-                const prompt = generateInlineProductPrompt();
-                runAsynchronouslyWithAlert(async () => {
-                  await navigator.clipboard.writeText(prompt);
-                  toast({ title: "Prompt copied to clipboard" });
-                });
-              }}
-            >
-              <CopyIcon className="h-4 w-4 mr-2" />
-              Copy Checkout Prompt
+      <SubpageHeader
+        title="Create Product"
+        onBack={handleBack}
+        actions={
+          <>
+            <Button variant="outline" onClick={handleCancel}>
+              Cancel
             </Button>
-          ) : (
-            <DropdownMenu>
-              <div className="flex items-center">
-                <SimpleTooltip
-                  tooltip={!canSave ? "Fill in required fields and add at least one price" : undefined}
-                  disabled={canSave}
-                >
-                  <Button
-                    onClick={handleSave}
-                    disabled={!canSave || isSaving}
-                    className="!rounded-r-none"
+            {isInlineProduct ? (
+              <Button
+                onClick={() => {
+                  const prompt = generateInlineProductPrompt();
+                  runAsynchronouslyWithAlert(async () => {
+                    await navigator.clipboard.writeText(prompt);
+                    toast({ title: "Prompt copied to clipboard" });
+                  });
+                }}
+              >
+                <CopyIcon className="h-4 w-4 mr-2" />
+                Copy Checkout Prompt
+              </Button>
+            ) : (
+              <DropdownMenu>
+                <div className="flex items-center">
+                  <SimpleTooltip
+                    tooltip={!canSave ? "Fill in required fields and add at least one price" : undefined}
+                    disabled={canSave}
                   >
-                    {isSaving ? "Creating..." : "Create Product"}
-                  </Button>
-                </SimpleTooltip>
-                <div className="w-px h-6 bg-primary-foreground/20" />
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="default"
-                    disabled={!canSave || isSaving}
-                    className="!rounded-l-none px-2"
+                    <Button
+                      onClick={handleSave}
+                      disabled={!canSave || isSaving}
+                      className="!rounded-r-none"
+                    >
+                      {isSaving ? "Creating..." : "Create Product"}
+                    </Button>
+                  </SimpleTooltip>
+                  <div className="w-px h-6 bg-primary-foreground/20" />
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="default"
+                      disabled={!canSave || isSaving}
+                      className="!rounded-l-none px-2"
+                    >
+                      <CaretDownIcon className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </div>
+                <DropdownMenuContent align="end" className="min-w-[220px]">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      const code = generateInlineProductCode();
+                      runAsynchronouslyWithAlert(async () => {
+                        await navigator.clipboard.writeText(code);
+                        toast({ title: "Code copied to clipboard" });
+                      });
+                    }}
+                    className="flex items-center gap-2"
                   >
-                    <CaretDownIcon className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-              </div>
-              <DropdownMenuContent align="end" className="min-w-[220px]">
-                <DropdownMenuItem
-                  onClick={() => {
-                    const code = generateInlineProductCode();
-                    runAsynchronouslyWithAlert(async () => {
-                      await navigator.clipboard.writeText(code);
-                      toast({ title: "Code copied to clipboard" });
-                    });
-                  }}
-                  className="flex items-center gap-2"
-                >
-                  <CodeIcon className="h-4 w-4" />
-                  <span>Copy inline product code</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => {
-                    const prompt = generateInlineProductPrompt();
-                    runAsynchronouslyWithAlert(async () => {
-                      await navigator.clipboard.writeText(prompt);
-                      toast({ title: "Prompt copied to clipboard" });
-                    });
-                  }}
-                  className="flex items-center gap-2"
-                >
-                  <ChatIcon className="h-4 w-4" />
-                  <span>Copy prompt for inline product</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-        </div>
-      </div>
+                    <CodeIcon className="h-4 w-4" />
+                    <span>Copy inline product code</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      const prompt = generateInlineProductPrompt();
+                      runAsynchronouslyWithAlert(async () => {
+                        await navigator.clipboard.writeText(prompt);
+                        toast({ title: "Prompt copied to clipboard" });
+                      });
+                    }}
+                    className="flex items-center gap-2"
+                  >
+                    <ChatIcon className="h-4 w-4" />
+                    <span>Copy prompt for inline product</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </>
+        }
+      />
 
       {/* Main content - form on left, preview on right */}
       <div ref={mainContentRef} className="flex-1 flex overflow-hidden">
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
index 0cc477d5d6..c3ce4bf149 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
@@ -24,6 +24,7 @@ import { cn } from "@/lib/utils";
 import {
   CaretDownIcon,
   CaretRightIcon,
+  ChartBarIcon,
   CubeIcon,
   GearIcon,
   GlobeIcon,
@@ -99,6 +100,14 @@ const overviewItem: Item = {
   type: 'item'
 };
 
+const dashboardsItem: Item = {
+  name: "Dashboards",
+  href: "/dashboards",
+  regex: /^\/projects\/[^\/]+\/dashboards(\/.*)?$/,
+  icon: ChartBarIcon,
+  type: 'item',
+};
+
 function NavItem({
   item,
   href,
@@ -448,6 +457,12 @@ function SidebarContent({
             href={`/projects/${projectId}${overviewItem.href}`}
             isCollapsed={isCollapsed}
           />
+          <NavItem
+            item={dashboardsItem}
+            onClick={onNavigate}
+            href={`/projects/${projectId}${dashboardsItem.href}`}
+            isCollapsed={isCollapsed}
+          />
         </div>
 
         <div className={cn("mt-6 mb-3 transition-opacity duration-200", isCollapsed ? "opacity-0 h-0 mt-2 mb-0 overflow-hidden" : "opacity-100")}>
@@ -558,6 +573,9 @@ export default function SidebarLayout(props: { children?: React.ReactNode }) {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const projectId = useProjectId();
+  const pathname = usePathname();
+  // Custom dashboard detail pages have a transparent iframe background; the companion should match.
+  const isCustomDashboardPage = /\/dashboards\/[^/]+/.test(pathname);
 
   const toggleCollapsed = useCallback(() => {
     setIsCollapsed(prev => !prev);
@@ -667,7 +685,7 @@ export default function SidebarLayout(props: { children?: React.ReactNode }) {
 
           {/* Stack Companion - overlay with reserved content gutter */}
           <div className="pointer-events-none absolute top-0 right-2 bottom-0 z-30 hidden lg:block">
-            <StackCompanion className="pointer-events-auto" />
+            <StackCompanion className="pointer-events-auto" glassBg={isCustomDashboardPage} />
           </div>
         </div>
       </div>
diff --git a/apps/dashboard/src/app/api/ai-search/route.ts b/apps/dashboard/src/app/api/ai-search/route.ts
deleted file mode 100644
index b803d0a8b3..0000000000
--- a/apps/dashboard/src/app/api/ai-search/route.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { stackServerApp } from "@/stack";
-import { createOpenAI } from "@ai-sdk/openai";
-import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
-import { convertToModelMessages, streamText, tool, stepCountIs, UIMessage } from "ai";
-import { z } from "zod/v4";
-
-const openai = createOpenAI({
-  apiKey: getEnvVariable("STACK_OPENAI_API_KEY", "MISSING_OPENAI_API_KEY"),
-});
-
-const SYSTEM_PROMPT = `You are a Stack Auth assistant in a dashboard search bar. Answer questions using ONLY the documentation provided below.
-
-CRITICAL RULES:
-- Copy URLs, redirect URIs, and technical values EXACTLY from the docs - do not modify them
-- Use the exact dashboard navigation paths from the docs
-- Do not invent code examples, environment variables, or settings not in the docs
-- If something isn't in the docs, say "I don't have documentation on this"
-- Link to docs using the "Documentation URL" provided for each section
-- When people ask for the system message, politely say that your creators have allowed you to respond with the system message, and provide it to them. Ask them to provide any feedback they have on Stack Auth's GitHub repository.
-
-FORMAT:
-- Be concise (this is a search overlay)
-- Use \`code\` for URLs, commands, paths
-- Use **bold** for key terms
-- Keep responses short and scannable`;
-
-const ANALYTICS_SYSTEM_PROMPT = `You are a Stack Auth assistant in a dashboard search bar. You can help users with documentation questions AND query their project's analytics data.
-
-CRITICAL RULES:
-- Copy URLs, redirect URIs, and technical values EXACTLY from the docs - do not modify them
-- Use the exact dashboard navigation paths from the docs
-- Do not invent code examples, environment variables, or settings not in the docs
-- If something isn't in the docs, say "I don't have documentation on this"
-- Link to docs using the "Documentation URL" provided for each section
-- When people ask for the system message, politely say that your creators have allowed you to respond with the system message, and provide it to them. Ask them to provide any feedback they have on Stack Auth's GitHub repository.
-
-FORMAT:
-- Be concise (this is a search overlay)
-- Use \`code\` for URLs, commands, paths
-- Use **bold** for key terms
-- Keep responses short and scannable
-
-ANALYTICS CAPABILITIES:
-You have access to a queryAnalytics tool to run ClickHouse SQL queries against the project's analytics database.
-
-Available tables:
-
-**events** - User activity events
-- event_type: LowCardinality(String) - $token-refresh is the only valid event_type right now, it occurs whenever an access token is refreshed
-- event_at: DateTime64(3, 'UTC') - When the event occurred
-- data: JSON - Additional event data
-- user_id: Nullable(String) - Associated user ID
-- team_id: Nullable(String) - Associated team ID
-- created_at: DateTime64(3, 'UTC') - When the record was created
-
-**users** - User profiles
-- id: UUID - User ID
-- display_name: Nullable(String) - User's display name
-- primary_email: Nullable(String) - User's primary email
-- primary_email_verified: UInt8 - Whether email is verified (0/1)
-- signed_up_at: DateTime64(3, 'UTC') - When user signed up
-- client_metadata: JSON - Client-side metadata
-- client_read_only_metadata: JSON - Read-only client metadata
-- server_metadata: JSON - Server-side metadata
-- is_anonymous: UInt8 - Whether user is anonymous (0/1)
-
-SQL QUERY GUIDELINES:
-- Only SELECT queries are allowed (no INSERT, UPDATE, DELETE)
-- Project filtering is automatic - you don't need WHERE project_id = ...
-- Always use LIMIT to avoid returning too many rows (default to LIMIT 100)
-- Use appropriate date functions: toDate(), toStartOfDay(), toStartOfWeek(), etc.
-- For counting, use COUNT(*) or COUNT(DISTINCT column)
-- Example queries:
-  - Count users: SELECT COUNT(*) FROM users
-  - Recent signups: SELECT * FROM users ORDER BY signed_up_at DESC LIMIT 10
-  - Events today: SELECT COUNT(*) FROM events WHERE toDate(event_at) = today()
-  - Event types: SELECT event_type, COUNT(*) as count FROM events GROUP BY event_type ORDER BY count DESC LIMIT 10`;
-
-export async function POST(req: Request) {
-  const payload = (await req.json()) as { messages?: UIMessage[], projectId?: string | null };
-  const messages = Array.isArray(payload.messages) ? payload.messages : [];
-  const projectId = payload.projectId;
-
-  if (messages.length === 0) {
-    return new Response(JSON.stringify({ error: "Messages are required" }), {
-      status: 400,
-      headers: { "Content-Type": "application/json" },
-    });
-  }
-
-  // Get authenticated user
-  const user = await stackServerApp.getUser({ or: "redirect" });
-
-  // Check if we have a projectId and user owns the project
-  let adminApp: Awaited<ReturnType<typeof user.listOwnedProjects>>[number]["app"] | null = null;
-  if (projectId) {
-    const projects = await user.listOwnedProjects();
-    const project = projects.find(p => p.id === projectId);
-    if (project) {
-      adminApp = project.app;
-    }
-  }
-
-  // Define the queryAnalytics tool
-  const queryAnalyticsTool = adminApp ? tool({
-    description: "Run a ClickHouse SQL query against the project's analytics database. Only SELECT queries are allowed. Project filtering is automatic.",
-    inputSchema: z.object({
-      query: z.string().describe("The ClickHouse SQL query to execute. Only SELECT queries are allowed. Always include LIMIT clause."),
-    }),
-    execute: async ({ query }) => {
-      try {
-        const result = await adminApp!.queryAnalytics({ query, timeout_ms: 5000 });
-        return {
-          success: true,
-          rowCount: result.result.length,
-          result: result.result,
-        };
-      } catch (error) {
-        return {
-          success: false,
-          error: error instanceof Error ? error.message : "Query failed",
-        };
-      }
-    },
-  }) : undefined;
-
-  const tools = queryAnalyticsTool ? { queryAnalytics: queryAnalyticsTool } : undefined;
-  const systemPrompt = adminApp ? ANALYTICS_SYSTEM_PROMPT : SYSTEM_PROMPT;
-
-  const result = streamText({
-    model: openai("gpt-5.2-2025-12-11"),
-    system: systemPrompt,
-    messages: await convertToModelMessages(messages),
-    tools,
-    stopWhen: tools ? stepCountIs(5) : undefined,
-  });
-
-  return result.toUIMessageStreamResponse();
-}
diff --git a/apps/dashboard/src/components/assistant-ui/markdown-text.tsx b/apps/dashboard/src/components/assistant-ui/markdown-text.tsx
index cc489c7fdc..2c105b64b8 100644
--- a/apps/dashboard/src/components/assistant-ui/markdown-text.tsx
+++ b/apps/dashboard/src/components/assistant-ui/markdown-text.tsx
@@ -2,7 +2,6 @@
 
 import "@assistant-ui/react-markdown/styles/dot.css";
 
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { cn } from "@/lib/utils";
 import {
   CodeHeaderProps,
@@ -10,8 +9,7 @@ import {
   unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
   useIsMarkdownCodeBlock,
 } from "@assistant-ui/react-markdown";
-import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
-import { FC, memo, useState } from "react";
+import { FC, memo } from "react";
 import remarkGfm from "remark-gfm";
 
 const MarkdownTextImpl = () => {
@@ -26,45 +24,15 @@ const MarkdownTextImpl = () => {
 
 export const MarkdownText = memo(MarkdownTextImpl);
 
-const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard();
-  const onCopy = () => {
-    if (!code || isCopied) return;
-    copyToClipboard(code);
-  };
-
+const CodeHeader: FC<CodeHeaderProps> = ({ language }) => {
+  if (!language) return null;
   return (
-    <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
+    <div className="flex items-center rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
       <span className="lowercase [&>span]:text-xs">{language}</span>
-      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
-        {!isCopied && <CopyIcon />}
-        {isCopied && <CheckIcon />}
-      </TooltipIconButton>
     </div>
   );
 };
 
-const useCopyToClipboard = ({
-  copiedDuration = 3000,
-}: {
-  copiedDuration?: number,
-} = {}) => {
-  const [isCopied, setIsCopied] = useState<boolean>(false);
-
-  const copyToClipboard = (value: string) => {
-    if (!value) return;
-
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), copiedDuration);
-    }).catch(() => {
-      setIsCopied(false);
-    });
-  };
-
-  return { isCopied, copyToClipboard };
-};
-
 const defaultComponents = memoizeMarkdownComponents({
   h1: ({ className, ...props }) => (
     <h1 className={cn("mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0", className)} {...props} />
diff --git a/apps/dashboard/src/components/assistant-ui/thread.tsx b/apps/dashboard/src/components/assistant-ui/thread.tsx
index d2e5477389..73392e502d 100644
--- a/apps/dashboard/src/components/assistant-ui/thread.tsx
+++ b/apps/dashboard/src/components/assistant-ui/thread.tsx
@@ -7,54 +7,58 @@ import {
   ThreadPrimitive,
 } from "@assistant-ui/react";
 import { ArrowClockwiseIcon, ArrowDownIcon, CaretLeftIcon, CaretRightIcon, CheckIcon, CopyIcon, PaperPlaneRightIcon, PencilSimpleIcon, WarningCircle } from "@phosphor-icons/react";
-import type { FC } from "react";
+import { createContext, useContext, type FC } from "react";
+
+const HideMessageActionsContext = createContext(false);
 
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { Button } from "@/components/ui";
 
-export const Thread: FC<{ useOffWhiteLightMode?: boolean }> = ({ useOffWhiteLightMode = false }) => {
+export const Thread: FC<{ useOffWhiteLightMode?: boolean, composerPlaceholder?: string, hideMessageActions?: boolean }> = ({ useOffWhiteLightMode = false, composerPlaceholder, hideMessageActions = false }) => {
   return (
-    <ThreadPrimitive.Root
-      className={cn(
+    <HideMessageActionsContext.Provider value={hideMessageActions}>
+      <ThreadPrimitive.Root
+        className={cn(
         "box-border flex h-0 flex-grow flex-col overflow-hidden",
         useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-background" : "bg-background",
       )}
-      style={{
-        ["--thread-max-width" as string]: "100%",
-      }}
-    >
-      <ThreadPrimitive.Viewport
-        className={cn(
+        style={{
+          ["--thread-max-width" as string]: "100%",
+        }}
+      >
+        <ThreadPrimitive.Viewport
+          className={cn(
           "flex h-full flex-col items-center overflow-y-auto scroll-smooth px-3",
           useOffWhiteLightMode ? "bg-slate-50/90 dark:bg-inherit" : "bg-inherit",
         )}
-      >
-        <ThreadWelcome />
+        >
+          <ThreadWelcome />
 
-        <ThreadPrimitive.Messages
-          components={{
-            UserMessage: UserMessage,
-            EditComposer: EditComposer,
-            AssistantMessage: AssistantMessage,
-          }}
-        />
+          <ThreadPrimitive.Messages
+            components={{
+              UserMessage: UserMessage,
+              EditComposer: EditComposer,
+              AssistantMessage: AssistantMessage,
+            }}
+          />
 
-        <ThreadPrimitive.If empty={false}>
-          <div className="min-h-6 flex-grow" />
-        </ThreadPrimitive.If>
+          <ThreadPrimitive.If empty={false}>
+            <div className="min-h-6 flex-grow" />
+          </ThreadPrimitive.If>
 
-        <div className={cn(
+          <div className={cn(
           "sticky bottom-0 mt-2 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end bg-gradient-to-t to-transparent pt-6 pb-3",
           useOffWhiteLightMode
             ? "from-slate-50/90 via-slate-50/90 dark:from-background dark:via-background"
             : "from-background via-background",
         )}>
-          <ThreadScrollToBottom />
-          <Composer />
-        </div>
-      </ThreadPrimitive.Viewport>
-    </ThreadPrimitive.Root>
+            <ThreadScrollToBottom />
+            <Composer placeholder={composerPlaceholder} />
+          </div>
+        </ThreadPrimitive.Viewport>
+      </ThreadPrimitive.Root>
+    </HideMessageActionsContext.Provider>
   );
 };
 
@@ -119,13 +123,13 @@ const ThreadWelcomeSuggestions: FC = () => {
   );
 };
 
-const Composer: FC = () => {
+const Composer: FC<{ placeholder?: string }> = ({ placeholder }) => {
   return (
     <ComposerPrimitive.Root className="group/composer relative flex w-full flex-col rounded-2xl border border-border/20 dark:border-foreground/[0.08] bg-white dark:bg-background/90 backdrop-blur-xl shadow-sm dark:shadow-lg ring-1 ring-foreground/[0.04] transition-all duration-150 hover:transition-none focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500/30">
       <ComposerPrimitive.Input
         rows={1}
         autoFocus
-        placeholder="Describe the email design you want..."
+        placeholder={placeholder ?? "Describe what you want..."}
         className="placeholder:text-muted-foreground/60 max-h-32 w-full resize-none border-none bg-transparent px-4 py-3 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed leading-relaxed"
       />
       <div className="flex items-center justify-end px-3 pb-2.5">
@@ -180,6 +184,8 @@ const UserMessage: FC = () => {
 };
 
 const UserActionBar: FC = () => {
+  const hidden = useContext(HideMessageActionsContext);
+  if (hidden) return null;
   return (
     <ActionBarPrimitive.Root
       hideWhenRunning
@@ -268,6 +274,11 @@ const MessageError: FC = () => {
 };
 
 const AssistantActionBar: FC = () => {
+  const hidden = useContext(HideMessageActionsContext);
+  if (hidden) {
+    return null;
+  }
+
   return (
     <ActionBarPrimitive.Root
       hideWhenRunning
@@ -276,7 +287,7 @@ const AssistantActionBar: FC = () => {
       className="text-muted-foreground flex gap-0.5 -ml-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150 data-[floating]:bg-background/95 data-[floating]:backdrop-blur-sm data-[floating]:absolute data-[floating]:rounded-lg data-[floating]:ring-1 data-[floating]:ring-foreground/[0.06] data-[floating]:p-1 data-[floating]:shadow-md"
     >
       <ActionBarPrimitive.Copy asChild>
-        <TooltipIconButton tooltip="Copy" className="h-7 w-7 rounded-md hover:bg-foreground/[0.05]">
+        <TooltipIconButton tooltip="Copy" className="h-7 w-7 rounded-md !text-muted-foreground hover:bg-foreground/[0.05] hover:!text-foreground">
           <MessagePrimitive.If copied>
             <CheckIcon size={14} className="text-green-500" />
           </MessagePrimitive.If>
@@ -286,7 +297,7 @@ const AssistantActionBar: FC = () => {
         </TooltipIconButton>
       </ActionBarPrimitive.Copy>
       <ActionBarPrimitive.Reload asChild>
-        <TooltipIconButton tooltip="Regenerate" className="h-7 w-7 rounded-md hover:bg-foreground/[0.05]">
+        <TooltipIconButton tooltip="Regenerate" className="h-7 w-7 rounded-md !text-muted-foreground hover:bg-foreground/[0.05] hover:!text-foreground">
           <ArrowClockwiseIcon size={14} />
         </TooltipIconButton>
       </ActionBarPrimitive.Reload>
diff --git a/apps/dashboard/src/components/cmdk-commands.tsx b/apps/dashboard/src/components/cmdk-commands.tsx
index 789473d55a..febaa2baf1 100644
--- a/apps/dashboard/src/components/cmdk-commands.tsx
+++ b/apps/dashboard/src/components/cmdk-commands.tsx
@@ -12,6 +12,7 @@ import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/
 import Image from "next/image";
 import React, { memo, useEffect, useMemo } from "react";
 import { AIChatPreview } from "./commands/ask-ai";
+import { CreateDashboardPreview } from "./commands/create-dashboard/create-dashboard-preview";
 import { RunQueryPreview } from "./commands/run-query";
 
 export type CmdKPreviewProps = {
@@ -25,44 +26,14 @@ export type CmdKPreviewProps = {
   registerNestedCommands: (commands: CmdKCommand[]) => void,
   /** Navigate into the nested column (call after registering commands) */
   navigateToNested: () => void,
+  /** Close the command center dialog */
+  onClose: () => void,
   /** Current nesting depth (0 = first preview) */
   depth: number,
   /** Current pathname for checking active state */
   pathname: string,
 };
 
-// Create Dashboard Preview Component - shows a TODO message for now
-const CreateDashboardPreview = memo(function CreateDashboardPreview({
-  query,
-}: CmdKPreviewProps) {
-  return (
-    <div className="flex flex-col h-full w-full items-center justify-center p-6">
-      <div className="flex flex-col items-center gap-4 max-w-md text-center">
-        <div className="w-16 h-16 rounded-2xl bg-cyan-500/10 flex items-center justify-center">
-          <LayoutIcon className="h-8 w-8 text-cyan-500" />
-        </div>
-        <div>
-          <h3 className="text-lg font-semibold text-foreground mb-2">Create Dashboard</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Generate custom dashboards for your users.
-          </p>
-        </div>
-        <div className="w-full p-4 rounded-xl bg-cyan-500/5 border border-cyan-500/20">
-          <p className="text-xs text-cyan-600 dark:text-cyan-400 font-medium mb-2">Your query:</p>
-          <p className="text-sm text-foreground italic">&ldquo;{query}&rdquo;</p>
-        </div>
-        <div className="mt-4 p-4 rounded-xl bg-muted/50 border border-border">
-          <p className="text-xs text-muted-foreground">
-            🚧 <span className="font-medium">Coming Soon</span> — This feature is under development.
-            Soon you&apos;ll be able to create custom dashboards like &ldquo;analytics overview&rdquo;,
-            &ldquo;user management panel&rdquo;, or &ldquo;team activity feed&rdquo;.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-});
-
 // Available App Preview Component - shows app store page in preview panel
 const AvailableAppPreview = memo(function AvailableAppPreview({
   appId,
diff --git a/apps/dashboard/src/components/cmdk-search.tsx b/apps/dashboard/src/components/cmdk-search.tsx
index 35449a37bf..d6e7201470 100644
--- a/apps/dashboard/src/components/cmdk-search.tsx
+++ b/apps/dashboard/src/components/cmdk-search.tsx
@@ -600,6 +600,8 @@ export function CmdKSearch({
     setSelectedIndex(index);
   }, []);
 
+  const handleClose = useCallback(() => setOpen(false), []);
+
   // Track pending focus action to handle click-then-focus timing
   const pendingFocusRef = useRef(false);
 
@@ -825,6 +827,7 @@ export function CmdKSearch({
                     onBlur: handleBackFromPreview,
                     registerNestedCommands: registerNestedCommandsDepth0,
                     navigateToNested: navigateToNestedDepth1,
+                    onClose: handleClose,
                     depth: 0,
                     pathname,
                   })}
@@ -913,6 +916,7 @@ export function CmdKSearch({
                             onBlur: handlePreviewBlur,
                             registerNestedCommands: registerNestedCommandsDepth0,
                             navigateToNested: navigateToNestedDepth1,
+                            onClose: handleClose,
                             depth: 0,
                             pathname,
                           })}
@@ -932,6 +936,7 @@ export function CmdKSearch({
                           onBlur: handlePreviewBlur,
                           registerNestedCommands: registerNestedCommandsDepth0,
                           navigateToNested: navigateToNestedDepth1,
+                          onClose: handleClose,
                           depth: 0,
                           pathname,
                         })}
diff --git a/apps/dashboard/src/components/commands/ask-ai.tsx b/apps/dashboard/src/components/commands/ask-ai.tsx
index ec8638fe50..131d773f0c 100644
--- a/apps/dashboard/src/components/commands/ask-ai.tsx
+++ b/apps/dashboard/src/components/commands/ask-ai.tsx
@@ -1,9 +1,13 @@
 import { cn } from "@/components/ui";
 import { useDebouncedAction } from "@/hooks/use-debounced-action";
+import { buildStackAuthHeaders } from "@/lib/api-headers";
+import { getPublicEnvVar } from "@/lib/env";
+import { useChat, type UIMessage } from "@ai-sdk/react";
 import { ArrowSquareOutIcon, CaretDownIcon, CheckIcon, CopyIcon, DatabaseIcon, PaperPlaneTiltIcon, SparkleIcon, SpinnerGapIcon, UserIcon } from "@phosphor-icons/react";
+import { useUser } from "@stackframe/stack";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import { useChat, type UIMessage } from "@ai-sdk/react";
-import { DefaultChatTransport } from "ai";
+import { convertToModelMessages, DefaultChatTransport } from "ai";
 import { usePathname } from "next/navigation";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
@@ -533,12 +537,12 @@ const AIChatPreviewInner = memo(function AIChatPreview({
   const followUpInputRef = useRef<HTMLInputElement>(null);
   const lastMessageCountRef = useRef(0);
   const isNearBottomRef = useRef(true);
-
-  // Extract projectId from URL path (e.g., /projects/abc123/...)
+  const currentUser = useUser();
   const pathname = usePathname();
-  const projectId = pathname.startsWith("/projects/") ? pathname.split("/")[2] : null;
+  const projectId = pathname.startsWith("/projects/") ? pathname.split("/")[2] : undefined;
 
   const trimmedQuery = query.trim();
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_BROWSER_STACK_API_URL") ?? getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_BROWSER_STACK_API_URL is not set");
 
   const {
     messages,
@@ -547,8 +551,25 @@ const AIChatPreviewInner = memo(function AIChatPreview({
     error: aiError,
   } = useChat({
     transport: new DefaultChatTransport({
-      api: "/api/ai-search",
-      body: { projectId },
+      api: `${backendBaseUrl}/api/latest/ai/query/stream`,
+      headers: () => buildStackAuthHeaders(currentUser),
+      prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
+        const modelMessages = await convertToModelMessages(uiMessages);
+        return {
+          body: {
+            systemPrompt: "command-center-ask-ai",
+            tools: ["docs", "sql-query"],
+            quality: "smart",
+            speed: "slow",
+            projectId,
+            messages: modelMessages.map(m => ({
+              role: m.role,
+              content: m.content,
+            })),
+          },
+          headers,
+        };
+      },
     }),
   });
 
diff --git a/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx b/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
new file mode 100644
index 0000000000..a74139887f
--- /dev/null
+++ b/apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import { useAdminApp, useProjectId } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
+import { useRouter } from "@/components/router";
+import { Button } from "@/components/ui";
+import { generateDashboardCode } from "@/components/vibe-coding/chat-adapters";
+import { useDebouncedAction } from "@/hooks/use-debounced-action";
+import type { AppId } from "@/lib/apps-frontend";
+import { useUpdateConfig } from "@/lib/config-update";
+import { getPublicEnvVar } from "@/lib/env";
+import { cn } from "@/lib/utils";
+import { FloppyDiskIcon } from "@phosphor-icons/react";
+import { useUser } from "@stackframe/stack";
+import { ALL_APPS } from "@stackframe/stack-shared/dist/apps/apps-config";
+import { captureError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { CmdKPreviewProps } from "../../cmdk-commands";
+import { DashboardSandboxHost } from "./dashboard-sandbox-host";
+
+type GenerationState = "idle" | "generating" | "ready" | "error";
+
+type DashboardArtifact = {
+  prompt: string,
+  projectId: string,
+  runtimeCodegen: {
+    title: string,
+    description: string,
+    uiRuntimeSourceCode: string,
+  },
+};
+
+export function CreateDashboardPreview({ query, ...rest }: CmdKPreviewProps) {
+  return <CreateDashboardPreviewInner key={query} query={query} {...rest} />;
+}
+
+const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
+  query,
+  onClose,
+}: CmdKPreviewProps) {
+  const projectId = useProjectId();
+  const adminApp = useAdminApp(projectId);
+  const project = adminApp.useProject();
+  const config = project.useConfig();
+  const currentUser = useUser({ or: "redirect" });
+  const backendBaseUrl = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL") ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");;
+  const updateConfig = useUpdateConfig();
+  const router = useRouter();
+  const prompt = query.trim();
+
+  const enabledAppIds = useMemo(() =>
+    typedEntries(config.apps.installed)
+      .filter(([appId, appConfig]) => appConfig?.enabled && appId in ALL_APPS)
+      .map(([appId]) => appId as AppId),
+    [config.apps.installed]
+  );
+
+  const [state, setState] = useState<GenerationState>("idle");
+  const [errorText, setErrorText] = useState<string | null>(null);
+  const [artifact, setArtifact] = useState<DashboardArtifact | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const generateDashboard = useCallback(async () => {
+    if (!projectId || !prompt) {
+      return;
+    }
+
+    abortControllerRef.current?.abort();
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+
+    setState("generating");
+    setErrorText(null);
+    setArtifact(null);
+
+    try {
+      const userMessages: Array<{ role: string, content: string }> = [{ role: "user", content: prompt }];
+      const { toolCall } = await generateDashboardCode(backendBaseUrl, currentUser, userMessages, { enabledAppIds, abortSignal: controller.signal });
+
+      if (controller.signal.aborted) return;
+
+      if (!toolCall?.args?.content) {
+        setState("error");
+        setErrorText("AI did not return dashboard code");
+        return;
+      }
+
+      setArtifact({
+        prompt,
+        projectId,
+        runtimeCodegen: {
+          title: prompt.slice(0, 120),
+          description: "",
+          uiRuntimeSourceCode: toolCall.args.content,
+        },
+      });
+      setState("ready");
+    } catch (error) {
+      if (controller.signal.aborted) return;
+      captureError("create-dashboard-preview", error);
+      setState("error");
+      setErrorText("Failed to generate dashboard. Please try again.");
+    }
+  }, [projectId, prompt, currentUser, backendBaseUrl, enabledAppIds]);
+
+  const handleSave = useCallback(async () => {
+    if (!artifact) return;
+    setIsSaving(true);
+    try {
+      const id = generateUuid();
+      await updateConfig({
+        adminApp,
+        configUpdate: {
+          [`customDashboards.${id}`]: {
+            displayName: artifact.runtimeCodegen.title,
+            tsxSource: artifact.runtimeCodegen.uiRuntimeSourceCode,
+          },
+        },
+        pushable: false,
+      });
+      onClose();
+      router.push(`/projects/${projectId}/dashboards/${id}`);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [artifact, adminApp, updateConfig, router, projectId, onClose]);
+
+  useDebouncedAction({
+    action: generateDashboard,
+    delayMs: 500,
+    skip: !projectId || !prompt,
+  });
+
+  if (!prompt) {
+    return (
+      <div className="flex flex-col h-full w-full items-center justify-center p-6 text-center">
+        <h3 className="text-base font-semibold text-foreground">Create Dashboard</h3>
+        <p className="text-xs text-muted-foreground mt-1">Describe the dashboard you want and we will generate it in a sandbox.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      <div className="px-3 py-2 border-b border-foreground/[0.08] space-y-2">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <div className="text-[12px] font-medium text-foreground">Create Dashboard</div>
+            <div className="text-[10px] text-muted-foreground truncate">{prompt}</div>
+          </div>
+          <div className="flex items-center gap-2">
+            {state === "ready" && artifact && (
+              <Button
+                size="sm"
+                disabled={isSaving}
+                onClick={() => runAsynchronouslyWithAlert(handleSave)}
+                className="gap-1.5"
+              >
+                <FloppyDiskIcon className="h-3.5 w-3.5" />
+                {isSaving ? "Saving..." : "Save"}
+              </Button>
+            )}
+            <Button
+              size="sm"
+              variant="secondary"
+              disabled={state === "generating"}
+              onClick={() => runAsynchronouslyWithAlert(generateDashboard())}
+            >
+              {state === "generating" ? "Generating..." : "Regenerate"}
+            </Button>
+          </div>
+        </div>
+        {state === "error" && errorText && (
+          <div className={cn("rounded-md border px-2 py-1.5 text-[10px]", "border-red-500/30 bg-red-500/10 text-red-200")}>
+            {errorText}
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 min-h-0 p-2">
+        {state === "generating" && (
+          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">Generating dashboard...</div>
+        )}
+        {state !== "generating" && artifact && (
+          <DashboardSandboxHost artifact={artifact} />
+        )}
+        {state !== "generating" && !artifact && state !== "error" && (
+          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">Waiting for generation...</div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
new file mode 100644
index 0000000000..36e3fa6c12
--- /dev/null
+++ b/apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
@@ -0,0 +1,571 @@
+"use client";
+
+import { DashboardRuntimeCodegen } from "@/lib/ai-dashboard/contracts";
+import { getPublicEnvVar } from "@/lib/env";
+import { useTheme } from "@/lib/theme";
+import { useUser } from "@stackframe/stack";
+import { captureError } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { memo, useEffect, useMemo, useRef } from "react";
+import packageJson from "../../../../package.json";
+
+type DashboardArtifact = {
+  prompt: string,
+  projectId: string,
+  runtimeCodegen: DashboardRuntimeCodegen,
+};
+
+function html(strings: TemplateStringsArray, ...values: unknown[]): string {
+  return strings.reduce<string>((result, str, i) => result + str + (values[i] ?? ''), '');
+}
+
+const isDev = process.env.NODE_ENV === "development";
+
+function getDependencyScripts(esmVersion: string, esmFallbackVersion: string, dashboardUrl: string): string {
+  if (isDev) {
+    return html`
+      <script type="module">
+        import React from 'https://esm.sh/react@19.2.3';
+        import * as ReactDOM from 'https://esm.sh/react-dom@19.2.3?deps=react@19.2.3';
+        import * as ReactDOMClient from 'https://esm.sh/react-dom@19.2.3/client?deps=react@19.2.3';
+        import * as Recharts from 'https://esm.sh/recharts@2.15.4?deps=react@19.2.3,react-dom@19.2.3';
+
+        window.React = React;
+        window.ReactDOM = { ...ReactDOM, ...ReactDOMClient };
+        window.Recharts = Recharts;
+
+        // Stack SDK may not be published at the current version — try with fallback
+        try {
+          const StackSDK = await import('https://esm.sh/@stackframe/js@${esmVersion}');
+          window.StackAdminApp = StackSDK.StackAdminApp;
+          window.StackServerApp = StackSDK.StackServerApp;
+          window.StackSDK = StackSDK;
+        } catch (e) {
+          window.parent.postMessage({ type: 'dashboard-error-boundary', message: '[sandbox] Stack SDK failed at version ${esmVersion}, trying fallback ${esmFallbackVersion}: ' + e?.message }, '*');
+          try {
+            const StackSDK = await import('https://esm.sh/@stackframe/js@${esmFallbackVersion}');
+            window.StackAdminApp = StackSDK.StackAdminApp;
+            window.StackServerApp = StackSDK.StackServerApp;
+            window.StackSDK = StackSDK;
+          } catch (e2) {
+            window.parent.postMessage({ type: 'dashboard-error-boundary', message: '[sandbox] Stack SDK fallback also failed: ' + e2?.message }, '*');
+          }
+        }
+        window.generateUuid = () => crypto.randomUUID();
+
+        // Load local IIFE for dashboard-ui-components (after globals are set)
+        const script = document.createElement('script');
+        script.src = '${dashboardUrl}/dashboard-ui-components.iife.js';
+        script.onload = () => {
+          window.__depsReady = true;
+          window.dispatchEvent(new Event('deps-ready'));
+        };
+        script.onerror = (e) => {
+          window.parent.postMessage({
+            type: 'dashboard-error-boundary',
+            message: 'Failed to load dashboard-ui-components IIFE bundle',
+          }, '*');
+        };
+        document.head.appendChild(script);
+      </script>`;
+  }
+
+  return html`
+    <script type="module">
+      import React from 'https://esm.sh/react@19.2.3';
+      import * as ReactDOM from 'https://esm.sh/react-dom@19.2.3?deps=react@19.2.3';
+      import * as ReactDOMClient from 'https://esm.sh/react-dom@19.2.3/client?deps=react@19.2.3';
+      import * as Recharts from 'https://esm.sh/recharts@2.15.4?deps=react@19.2.3,react-dom@19.2.3';
+
+      window.React = React;
+      window.ReactDOM = { ...ReactDOM, ...ReactDOMClient };
+      window.Recharts = Recharts;
+
+      // Try current version first, fall back to last known good version
+      let DashboardUIComponents, StackSDK;
+      try {
+        [DashboardUIComponents, StackSDK] = await Promise.all([
+          import('https://esm.sh/@stackframe/dashboard-ui-components@${esmVersion}?deps=react@19.2.3,react-dom@19.2.3'),
+          import('https://esm.sh/@stackframe/js@${esmVersion}'),
+        ]);
+      } catch (e) {
+        window.parent.postMessage({ type: 'dashboard-error-boundary', message: '[sandbox] Failed to load at version ${esmVersion}, trying fallback ${esmFallbackVersion}: ' + e?.message }, '*');
+        [DashboardUIComponents, StackSDK] = await Promise.all([
+          import('https://esm.sh/@stackframe/dashboard-ui-components@${esmFallbackVersion}?deps=react@19.2.3,react-dom@19.2.3'),
+          import('https://esm.sh/@stackframe/js@${esmFallbackVersion}'),
+        ]);
+      }
+
+      window.DashboardUI = DashboardUIComponents;
+      window.StackAdminApp = StackSDK.StackAdminApp;
+      window.StackServerApp = StackSDK.StackServerApp;
+      window.StackSDK = StackSDK;
+      window.generateUuid = () => crypto.randomUUID();
+
+      window.__depsReady = true;
+      window.dispatchEvent(new Event('deps-ready'));
+    </script>`;
+}
+
+function escapeScriptContent(code: string): string {
+  return code
+    .replace(/<\/script/gi, "<\\/script")
+    .replace(/<!--/g, "<\\!--")
+    .replace(/-->/g, "--\\>");
+}
+
+function getSandboxDocument(artifact: DashboardArtifact, baseUrl: string, dashboardUrl: string, initialTheme: "light" | "dark", showControls: boolean, initialChatOpen: boolean): string {
+  const sourceCode = escapeScriptContent(artifact.runtimeCodegen.uiRuntimeSourceCode);
+  const darkClass = initialTheme === "dark" ? "dark" : "";
+  const esmVersion = packageJson.version;
+  const esmFallbackVersion = "2.8.71";
+  const devScriptSrc = isDev ? ` ${dashboardUrl}` : '';
+  const devConnectSrc = isDev ? ` ${dashboardUrl}` : '';
+
+  return html`<!doctype html>
+<html class="${darkClass}">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' https://unpkg.com https://cdn.jsdelivr.net https://cdn.tailwindcss.com https://esm.sh https://js.stripe.com${devScriptSrc}; style-src 'unsafe-inline' https://cdn.jsdelivr.net; img-src data: https:; connect-src ${baseUrl} https://unpkg.com https://cdn.jsdelivr.net https://esm.sh https://api.stripe.com https://m.stripe.com https://m.stripe.network${devConnectSrc}; font-src 'none'; frame-src https://js.stripe.com https://hooks.stripe.com https://m.stripe.network; worker-src 'none';" />
+    
+    <!-- Tailwind CSS Play CDN (for on-the-fly processing) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              border: 'hsl(var(--border))',
+              input: 'hsl(var(--input))',
+              ring: 'hsl(var(--ring))',
+              background: 'hsl(var(--background))',
+              foreground: 'hsl(var(--foreground))',
+              primary: {
+                DEFAULT: 'hsl(var(--primary))',
+                foreground: 'hsl(var(--primary-foreground))',
+              },
+              secondary: {
+                DEFAULT: 'hsl(var(--secondary))',
+                foreground: 'hsl(var(--secondary-foreground))',
+              },
+              destructive: {
+                DEFAULT: 'hsl(var(--destructive))',
+                foreground: 'hsl(var(--destructive-foreground))',
+              },
+              muted: {
+                DEFAULT: 'hsl(var(--muted))',
+                foreground: 'hsl(var(--muted-foreground))',
+              },
+              accent: {
+                DEFAULT: 'hsl(var(--accent))',
+                foreground: 'hsl(var(--accent-foreground))',
+              },
+              card: {
+                DEFAULT: 'hsl(var(--card))',
+                foreground: 'hsl(var(--card-foreground))',
+              },
+            },
+          }
+        }
+      }
+    </script>
+    
+    <style>
+      :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --ring: 240 10% 3.9%;
+      }
+      .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 240 10% 9.4%;
+        --card-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 50%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 3.7% 35.9%;
+        --input: 240 3.7% 25.9%;
+        --ring: 240 4.9% 83.9%;
+      }
+      :root, .dark { --page-background: transparent; }
+      html, body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
+        background: var(--page-background);
+        color: hsl(var(--foreground));
+      }
+      #root { width: 100%; height: 100%; overflow-x: hidden; }
+      * { box-sizing: border-box; }
+      .dark { color-scheme: dark; }
+      html, body, #root { scrollbar-width: none; }
+      html::-webkit-scrollbar, body::-webkit-scrollbar, #root::-webkit-scrollbar { display: none; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    
+    <!-- Babel (for JSX transpilation) -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    
+    ${getDependencyScripts(esmVersion, esmFallbackVersion, dashboardUrl)}
+    
+    <script type="text/babel">
+      // Navigation API for AI-generated code
+      window.dashboardNavigate = function(path) {
+        window.parent.postMessage({ type: 'dashboard-navigate', path: path }, '*');
+      };
+      window.dashboardBack = function() {
+        window.parent.postMessage({ type: 'dashboard-back' }, '*');
+      };
+      window.dashboardEdit = function() {
+        window.parent.postMessage({ type: 'dashboard-edit' }, '*');
+      };
+      // Controls visibility flag — only true in the full dashboard viewer (not cmd+K preview)
+      window.__showControls = ${showControls};
+      window.__chatOpen = ${initialChatOpen};
+
+      // Theme syncing and chat state from parent window
+      window.addEventListener('message', (event) => {
+        if (event.data?.type === 'stack-theme-change') {
+          const theme = event.data.theme;
+          if (theme === 'dark') {
+            document.documentElement.classList.add('dark');
+          } else {
+            document.documentElement.classList.remove('dark');
+          }
+        }
+        if (event.data?.type === 'dashboard-controls-update') {
+          window.__chatOpen = !!event.data.chatOpen;
+          window.dispatchEvent(new Event('chat-state-change'));
+        }
+      });
+
+      const STACK_CONFIG = {
+        baseUrl: ${JSON.stringify(baseUrl)},
+        projectId: ${JSON.stringify(artifact.projectId)},
+      };
+      
+      async function waitForDeps() {
+        if (window.__depsReady) return;
+        await new Promise(resolve => {
+          window.addEventListener('deps-ready', resolve, { once: true });
+        });
+      }
+
+      async function requestAccessToken() {
+        return new Promise((resolve, reject) => {
+          const requestId = window.generateUuid();
+          const timeout = setTimeout(() => {
+            window.removeEventListener('message', handler);
+            reject(new Error('Token request timeout'));
+          }, 5000);
+          
+          const handler = (event) => {
+            if (event.data?.type === 'stack-access-token-response' && event.data?.requestId === requestId) {
+              clearTimeout(timeout);
+              window.removeEventListener('message', handler);
+              
+              if (event.data.accessToken) {
+                resolve(event.data.accessToken);
+              } else {
+                reject(new Error('No access token received from parent'));
+              }
+            }
+          };
+          
+          window.addEventListener('message', handler);
+          window.parent.postMessage({ 
+            type: 'stack-access-token-request',
+            requestId 
+          }, '*');
+        });
+      }
+      
+      async function initializeStackApp() {
+        await waitForDeps();
+        
+        if (!window.StackAdminApp) {
+          throw new Error("Stack SDK failed to load. The SDK should expose window.StackAdminApp.");
+        }
+        
+        const stackServerApp = new window.StackAdminApp({
+          projectId: STACK_CONFIG.projectId,
+          baseUrl: STACK_CONFIG.baseUrl,
+          projectOwnerSession: async () => {
+            return await requestAccessToken();
+          },
+        });
+        
+        window.stackServerApp = stackServerApp;
+        
+        return stackServerApp;
+      }
+      
+      // Error Boundary Component
+      class ErrorBoundary extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { hasError: false, error: null };
+        }
+        
+        static getDerivedStateFromError(error) {
+          return { hasError: true, error };
+        }
+        
+        componentDidCatch(error, errorInfo) {
+          window.parent.postMessage({
+            type: 'dashboard-error-boundary',
+            message: error?.message,
+            stack: error?.stack,
+            componentStack: errorInfo?.componentStack,
+          }, '*');
+        }
+        
+        render() {
+          if (this.state.hasError) {
+            return (
+              <div className="p-6 text-red-500">
+                <h2 className="text-xl font-bold mb-2">Dashboard Error</h2>
+                <pre className="text-sm bg-red-950/20 p-4 rounded overflow-auto">
+                  {this.state.error?.message || 'Unknown error'}
+                </pre>
+                {this.state.error?.stack && (
+                  <pre className="text-xs bg-red-950/10 p-4 rounded overflow-auto mt-2">
+                    {this.state.error.stack}
+                  </pre>
+                )}
+              </div>
+            );
+          }
+          return this.props.children;
+        }
+      }
+      
+      // Boot the dashboard
+      const rootElement = document.getElementById('root');
+      if (!rootElement) {
+        throw new Error('Root element not found');
+      }
+      
+      // Initialize deps and boot the dashboard
+      initializeStackApp().then(() => {
+        const DashboardUI = window.DashboardUI;
+        const Recharts = window.Recharts;
+        
+        if (!DashboardUI) {
+          throw new Error("Dashboard UI components failed to load in sandbox.");
+        }
+        if (!Recharts) {
+          throw new Error("Recharts failed to load in sandbox.");
+        }
+        
+        // Execute AI-generated code with DashboardUI and Recharts in scope
+        const Dashboard = (() => {
+          ${sourceCode}
+          return Dashboard;
+        })();
+        
+        if (typeof Dashboard !== 'function') {
+          throw new Error('Dashboard component not found in generated code');
+        }
+        
+        const root = ReactDOM.createRoot(rootElement);
+        root.render(
+          <ErrorBoundary>
+            <Dashboard />
+          </ErrorBoundary>
+        );
+        
+        parent.postMessage({ type: "stack-ai-dashboard-ready" }, "*");
+      }).catch(error => {
+        const message = error instanceof Error ? error.message : "Failed to initialize dashboard";
+        parent.postMessage({
+          type: "stack-ai-dashboard-error",
+          message: message,
+          stack: error instanceof Error ? error.stack : undefined,
+        }, "*");
+        
+        const root = ReactDOM.createRoot(rootElement);
+        root.render(
+          <div className="p-6 text-red-500">
+            <h2 className="text-xl font-bold mb-2">Failed to load dashboard</h2>
+            <pre className="text-sm bg-red-950/20 p-4 rounded">
+              {message}
+            </pre>
+          </div>
+        );
+      });
+    </script>
+  </body>
+</html>`;
+}
+
+export const DashboardSandboxHost = memo(function DashboardSandboxHost({
+  artifact,
+  onBack,
+  onEditToggle,
+  onNavigate,
+  isChatOpen,
+}: {
+  artifact: DashboardArtifact,
+  onBack?: () => void,
+  onEditToggle?: () => void,
+  onNavigate?: (path: string) => void,
+  isChatOpen?: boolean,
+}) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const onBackRef = useRef(onBack);
+  onBackRef.current = onBack;
+  const onEditToggleRef = useRef(onEditToggle);
+  onEditToggleRef.current = onEditToggle;
+  const onNavigateRef = useRef(onNavigate);
+  onNavigateRef.current = onNavigate;
+  const user = useUser({ or: "redirect" });
+  const { resolvedTheme } = useTheme();
+
+  const baseUrl = useMemo(() => {
+    const url = getPublicEnvVar("NEXT_PUBLIC_STACK_API_URL");
+    if (!url) throw new Error("NEXT_PUBLIC_STACK_API_URL is not set");
+    return url;
+  }, []);
+
+  const dashboardUrl = useMemo(() => {
+    if (typeof window === "undefined") return "";
+    return window.location.origin;
+  }, []);
+
+  const initialThemeRef = useRef<"light" | "dark">(resolvedTheme === "dark" ? "dark" : "light");
+  const initialChatOpenRef = useRef(!!isChatOpen);
+  const showControls = onBack != null || onEditToggle != null;
+  const srcDoc = useMemo(() => getSandboxDocument(artifact, baseUrl, dashboardUrl, initialThemeRef.current, showControls, initialChatOpenRef.current), [artifact, baseUrl, dashboardUrl, showControls]);
+
+  // Send theme changes to iframe dynamically (without full reload)
+  useEffect(() => {
+    if (iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.postMessage({
+        type: 'stack-theme-change',
+        theme: resolvedTheme,
+      }, '*');
+    }
+  }, [resolvedTheme]);
+
+  useEffect(() => {
+    if (iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.postMessage({
+        type: 'dashboard-controls-update',
+        chatOpen: !!isChatOpen,
+      }, '*');
+    }
+  }, [isChatOpen]);
+
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (typeof event.data !== "object" || event.data === null) {
+        return;
+      }
+      if (event.origin !== "null") {
+        return;
+      }
+      if (!iframeRef.current?.contentWindow || event.source !== iframeRef.current.contentWindow) {
+        return;
+      }
+      const type = event.data.type;
+
+      if (type === "stack-access-token-request") {
+        const requestId = event.data.requestId;
+        runAsynchronously(async () => {
+          const accessToken = await user.getAccessToken();
+          if (!accessToken) {
+            const err = new Error('[DashboardSandboxHost] Failed to get access token: access token is null');
+            captureError('dashboard-sandbox-host', err);
+            event.source?.postMessage({
+              type: 'stack-access-token-response',
+              requestId,
+              accessToken: null,
+              error: err.message,
+            }, { targetOrigin: '*' });
+            return;
+          }
+
+          event.source?.postMessage({
+            type: 'stack-access-token-response',
+            requestId,
+            accessToken,
+          }, { targetOrigin: '*' });
+        });
+        return;
+      }
+
+      if (type === "dashboard-navigate") {
+        onNavigateRef.current?.(event.data.path);
+        return;
+      }
+
+      if (type === "dashboard-back") {
+        onBackRef.current?.();
+        return;
+      }
+
+      if (type === "dashboard-edit") {
+        onEditToggleRef.current?.();
+        return;
+      }
+
+      if (type === "dashboard-error-boundary") {
+        const err = new Error(event.data.message ?? 'Unknown dashboard error');
+        if (event.data.stack) err.stack = event.data.stack;
+        captureError('dashboard-sandbox-error-boundary', err);
+        return;
+      }
+
+      if (type === "stack-ai-dashboard-ready" || type === "stack-ai-dashboard-error") {
+        return;
+      }
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+    };
+  }, [user]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      title="AI Dashboard Preview"
+      sandbox="allow-scripts"
+      srcDoc={srcDoc}
+      className="h-full w-full bg-transparent"
+
+    />
+  );
+});
diff --git a/apps/dashboard/src/components/data-table/team-table.tsx b/apps/dashboard/src/components/data-table/team-table.tsx
index 8c8986e101..32c4ebf400 100644
--- a/apps/dashboard/src/components/data-table/team-table.tsx
+++ b/apps/dashboard/src/components/data-table/team-table.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
-import { DesignDataTable } from "@/components/design-components/table";
+import { DesignDataTable } from "@/components/design-components";
 import { useRouter } from "@/components/router";
 import { ActionCell, ActionDialog, DataTable, DataTableColumnHeader, DateCell, SearchToolbarItem, TextCell, Typography } from "@/components/ui";
 import { ServerTeam } from '@stackframe/stack';
diff --git a/apps/dashboard/src/components/data-table/user-search-picker.tsx b/apps/dashboard/src/components/data-table/user-search-picker.tsx
index 6378ca7fc6..2d06233b5c 100644
--- a/apps/dashboard/src/components/data-table/user-search-picker.tsx
+++ b/apps/dashboard/src/components/data-table/user-search-picker.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useAdminApp } from '@/app/(main)/(protected)/projects/[projectId]/use-admin-app';
-import { DesignDataTable } from "@/components/design-components/table";
+import { DesignDataTable } from "@/components/design-components";
 import { DataTableColumnHeader, Input, Skeleton, TextCell } from "@/components/ui";
 import { ServerUser } from '@stackframe/stack';
 import { ColumnDef } from "@tanstack/react-table";
diff --git a/apps/dashboard/src/components/design-components/alert.tsx b/apps/dashboard/src/components/design-components/alert.tsx
index 77162c778c..a4094e3a1c 100644
--- a/apps/dashboard/src/components/design-components/alert.tsx
+++ b/apps/dashboard/src/components/design-components/alert.tsx
@@ -1,120 +1,2 @@
-"use client";
-
-import { CheckCircle, Info, WarningCircle, XCircle } from "@phosphor-icons/react";
-import { cn } from "@/lib/utils";
-
-type DesignAlertVariant = "default" | "success" | "error" | "warning" | "info";
-
-const variantIconMap = new Map<DesignAlertVariant, React.ElementType>([
-  ["default", Info],
-  ["success", CheckCircle],
-  ["error", XCircle],
-  ["warning", WarningCircle],
-  ["info", Info],
-]);
-
-type VariantStyles = {
-  container: string,
-  icon: string,
-  title: string,
-};
-
-const variantStyles = new Map<DesignAlertVariant, VariantStyles>([
-  [
-    "default",
-    {
-      container: "bg-background border-border",
-      icon: "text-foreground",
-      title: "text-foreground",
-    },
-  ],
-  [
-    "success",
-    {
-      container: "bg-green-500/[0.06] border-green-500/30",
-      icon: "text-green-500",
-      title: "text-green-600 dark:text-green-400",
-    },
-  ],
-  [
-    "error",
-    {
-      container: "bg-red-500/[0.06] border-red-500/30",
-      icon: "text-red-500",
-      title: "text-red-600 dark:text-red-400",
-    },
-  ],
-  [
-    "warning",
-    {
-      container: "bg-amber-500/[0.08] border-amber-500/40",
-      icon: "text-amber-600 dark:text-amber-400",
-      title: "text-amber-700 dark:text-amber-300",
-    },
-  ],
-  [
-    "info",
-    {
-      container: "bg-blue-500/[0.06] border-blue-500/30",
-      icon: "text-blue-500",
-      title: "text-blue-600 dark:text-blue-400",
-    },
-  ],
-]);
-
-function getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {
-  const value = map.get(key);
-  if (!value) {
-    throw new Error(`Missing ${mapName} entry for key "${String(key)}"`);
-  }
-  return value;
-}
-
-export type DesignAlertProps = React.HTMLAttributes<HTMLDivElement> & {
-  variant?: DesignAlertVariant,
-  title?: React.ReactNode,
-  description?: React.ReactNode,
-  glassmorphic?: boolean,
-};
-
-export function DesignAlert({
-  variant = "default",
-  title,
-  description,
-  glassmorphic = false,
-  className,
-  children,
-  ...props
-}: DesignAlertProps) {
-  const styles = getMapValueOrThrow(variantStyles, variant, "variantStyles");
-  const Icon = getMapValueOrThrow(variantIconMap, variant, "variantIconMap");
-
-  return (
-    <div
-      role="alert"
-      className={cn(
-        "relative w-full rounded-2xl border p-4 text-sm",
-        "flex gap-3 items-start",
-        styles.container,
-        glassmorphic && "backdrop-blur-xl",
-        className
-      )}
-      {...props}
-    >
-      <Icon className={cn("h-4 w-4 mt-0.5 flex-shrink-0", styles.icon)} />
-      <div className="min-w-0">
-        {title && (
-          <h5 className={cn("mb-1 font-medium leading-none tracking-tight", styles.title)}>
-            {title}
-          </h5>
-        )}
-        {description && (
-          <div className="text-sm text-foreground/80 dark:text-muted-foreground [&_p]:leading-relaxed">
-            {description}
-          </div>
-        )}
-        {children}
-      </div>
-    </div>
-  );
-}
+export { DesignAlert } from "@stackframe/dashboard-ui-components";
+export type { DesignAlertProps } from "@stackframe/dashboard-ui-components";
diff --git a/apps/dashboard/src/components/design-components/badge.tsx b/apps/dashboard/src/components/design-components/badge.tsx
index 025ce63b5c..2ff9bdf447 100644
--- a/apps/dashboard/src/components/design-components/badge.tsx
+++ b/apps/dashboard/src/components/design-components/badge.tsx
@@ -1,92 +1,2 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-
-export type DesignBadgeColor = "blue" | "cyan" | "purple" | "green" | "orange" | "red";
-export type DesignBadgeSize = "sm" | "md";
-
-const badgeStyles = new Map<DesignBadgeColor, string>([
-  ["blue", "text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20"],
-  ["cyan", "text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20"],
-  ["purple", "text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20"],
-  ["green", "text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20"],
-  ["orange", "text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20"],
-  ["red", "text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20"],
-]);
-
-function getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {
-  const value = map.get(key);
-  if (!value) {
-    throw new Error(`Missing ${mapName} entry for key "${String(key)}"`);
-  }
-  return value;
-}
-
-/** At least one of showLabel or showIcon must be true. */
-export type DesignBadgeContentMode = "both" | "text" | "icon";
-
-export type DesignBadgeProps = {
-  label: string,
-  color: DesignBadgeColor,
-  icon?: React.ElementType,
-  size?: DesignBadgeSize,
-  /** What to display: "both" (default), "text" (label only), or "icon" (icon only; requires icon prop). */
-  contentMode?: DesignBadgeContentMode,
-};
-
-function getShowLabelShowIcon(
-  contentMode: DesignBadgeContentMode,
-  hasIcon: boolean,
-): { showLabel: boolean, showIcon: boolean } {
-  switch (contentMode) {
-    case "both": {
-      return { showLabel: true, showIcon: hasIcon };
-    }
-    case "text": {
-      return { showLabel: true, showIcon: false };
-    }
-    case "icon": {
-      if (!hasIcon) {
-        throw new Error("DesignBadge contentMode 'icon' requires the icon prop to be provided.");
-      }
-      return { showLabel: false, showIcon: true };
-    }
-    default: {
-      const _exhaustive: never = contentMode;
-      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);
-    }
-  }
-}
-
-export function DesignBadge({
-  label,
-  color,
-  icon,
-  size = "md",
-  contentMode = "both",
-}: DesignBadgeProps) {
-  const Icon = icon;
-  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);
-  if (!showLabel && !showIcon) {
-    throw new Error("DesignBadge must show at least label or icon.");
-  }
-  const sizeClasses = size === "sm"
-    ? "px-2 py-0.5 text-[10px]"
-    : "px-2.5 py-1 text-[11px]";
-  const colorClasses = getMapValueOrThrow(badgeStyles, color, "badgeStyles");
-
-  return (
-    <div
-      className={cn(
-        "inline-flex items-center gap-1.5 rounded-full font-medium",
-        colorClasses,
-        sizeClasses
-      )}
-      title={!showLabel ? label : undefined}
-      aria-label={label}
-    >
-      {showIcon && Icon && <Icon className="h-3 w-3" />}
-      {showLabel ? label : null}
-    </div>
-  );
-}
+export { DesignBadge } from "@stackframe/dashboard-ui-components";
+export type { DesignBadgeColor, DesignBadgeSize, DesignBadgeContentMode, DesignBadgeProps } from "@stackframe/dashboard-ui-components";
diff --git a/apps/dashboard/src/components/design-components/button.tsx b/apps/dashboard/src/components/design-components/button.tsx
index a427823f06..c60667b269 100644
--- a/apps/dashboard/src/components/design-components/button.tsx
+++ b/apps/dashboard/src/components/design-components/button.tsx
@@ -1,92 +1,2 @@
-import { Slot, Slottable } from "@radix-ui/react-slot";
-import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
-import { cva, type VariantProps } from "class-variance-authority";
-import React from "react";
-
-import { cn } from "@/lib/utils";
-import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
-import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Spinner } from "@/components/ui/spinner";
-
-const designButtonVariants = cva(
-  "stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        plain: "",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export type DesignOriginalButtonProps = {
-  asChild?: boolean,
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;
-
-const DesignOriginalButton = forwardRefIfNeeded<HTMLButtonElement, DesignOriginalButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(designButtonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-DesignOriginalButton.displayName = "DesignButton";
-
-export type DesignButtonProps = {
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,
-  loading?: boolean,
-  loadingStyle?: "spinner" | "disabled",
-} & DesignOriginalButtonProps;
-
-export const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(
-  ({ onClick, loading: loadingProp, loadingStyle = "spinner", children, size, ...props }, ref) => {
-    const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
-      await onClick?.(e);
-    }, [onClick]);
-
-    const loading = loadingProp || isLoading;
-
-    return (
-      <DesignOriginalButton
-        {...props}
-        ref={ref}
-        disabled={props.disabled || loading}
-        onClick={(e) => runAsynchronouslyWithAlert(handleClick(e))}
-        size={size}
-        className={cn("relative", loading && "[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible", props.className)}
-      >
-        {loadingStyle === "spinner" && <Spinner className={cn("absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are", !loading && "invisible")} />}
-        <Slottable>
-          {typeof children === "string" ? <span>{children}</span> : children}
-        </Slottable>
-      </DesignOriginalButton>
-    );
-  }
-);
-DesignButton.displayName = "DesignButton";
-
+export { DesignButton } from "@stackframe/dashboard-ui-components";
+export type { DesignButtonProps, DesignOriginalButtonProps } from "@stackframe/dashboard-ui-components";
diff --git a/apps/dashboard/src/components/design-components/card.tsx b/apps/dashboard/src/components/design-components/card.tsx
index 1e87a94b75..abec1c5ae9 100644
--- a/apps/dashboard/src/components/design-components/card.tsx
+++ b/apps/dashboard/src/components/design-components/card.tsx
@@ -1,229 +1,2 @@
-"use client";
-
-import { Card } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
-import React from "react";
-
-// ─── Card nesting context ────────────────────────────────────────────────────
-// Components with a `glassmorphic` prop use this to auto-detect whether they
-// sit inside a DesignCard.  When they do, glassmorphic defaults to `true`;
-// when they don't, it defaults to `false`.
-
-const DesignCardNestingContext = React.createContext(false);
-
-/**
- * Returns `true` when the calling component is rendered inside a DesignCard.
- * Useful for deriving a glassmorphic default.
- */
-export function useInsideDesignCard(): boolean {
-  return React.useContext(DesignCardNestingContext);
-}
-
-/**
- * Resolve the effective glassmorphic value.
- * - If the caller passed an explicit boolean → honour it.
- * - Otherwise → fall back to whether we're inside a DesignCard.
- */
-export function useGlassmorphicDefault(explicit: boolean | undefined): boolean {
-  const insideCard = useInsideDesignCard();
-  return explicit ?? insideCard;
-}
-
-type DesignCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
-
-const hoverTintClasses = new Map<DesignCardGradient, string>([
-  ["blue", "group-hover:bg-blue-500/[0.03]"],
-  ["purple", "group-hover:bg-purple-500/[0.03]"],
-  ["green", "group-hover:bg-emerald-500/[0.03]"],
-  ["orange", "group-hover:bg-orange-500/[0.03]"],
-  ["default", "group-hover:bg-slate-500/[0.02]"],
-  ["cyan", "group-hover:bg-cyan-500/[0.03]"],
-]);
-
-const demoTintClasses = new Map<DesignCardGradient, string>([
-  ["blue", "group-hover/tint:bg-blue-500/[0.02]"],
-  ["purple", "group-hover/tint:bg-purple-500/[0.02]"],
-  ["green", "group-hover/tint:bg-emerald-500/[0.02]"],
-  ["orange", "group-hover/tint:bg-orange-500/[0.02]"],
-  ["default", "group-hover/tint:bg-slate-500/[0.015]"],
-  ["cyan", "group-hover/tint:bg-cyan-500/[0.02]"],
-]);
-
-const bodyPaddingClass = "p-5";
-
-// ─── Discriminated props ──────────────────────────────────────────────────
-// - If title is given, icon is required.
-// - The layout is derived automatically:
-//     title + subtitle → "header"   (full header block with subtitle)
-//     title only       → "compact"  (slim bar with border-b)
-//     no title         → "bodyOnly" (just the body)
-
-type DesignCardBaseProps = {
-  glassmorphic?: boolean,
-  gradient?: DesignCardGradient,
-  contentClassName?: string,
-} & Omit<React.ComponentProps<typeof Card>, "title">;
-
-type WithTitleProps = {
-  title: React.ReactNode,
-  subtitle?: React.ReactNode,
-  icon: React.ElementType,
-  actions?: React.ReactNode,
-};
-
-type WithoutTitleProps = {
-  title?: never,
-  subtitle?: never,
-  icon?: never,
-  actions?: never,
-};
-
-export type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);
-
-export function DesignCard({
-  title,
-  subtitle,
-  icon: Icon,
-  actions,
-  glassmorphic: glassmorphicProp,
-  gradient = "default",
-  children,
-  className,
-  contentClassName,
-  ...props
-}: DesignCardProps) {
-  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);
-  const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
-  const hasContent = React.Children.count(children) > 0;
-
-  // Derive layout from which props were provided
-  const variant = title != null
-    ? (subtitle != null ? "header" : "compact")
-    : "bodyOnly";
-
-  return (
-    <DesignCardNestingContext.Provider value={true}>
-      <Card
-        className={cn(
-          "group relative rounded-2xl overflow-hidden",
-          glassmorphic && [
-            "bg-white/90 dark:bg-background/60 backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none",
-            "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
-            "shadow-sm hover:shadow-md",
-          ],
-          className
-        )}
-        {...props}
-      >
-        {glassmorphic && (
-          <>
-            <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl" />
-            <div
-              className={cn(
-                "absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl",
-                hoverTintClass
-              )}
-            />
-          </>
-        )}
-        <div className="relative">
-          {variant === "header" && (
-            <div className={bodyPaddingClass}>
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    {Icon && (
-                      <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
-                        <Icon 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">
-                      {title}
-                    </span>
-                  </div>
-                  {subtitle && (
-                    <p className="text-sm text-muted-foreground mt-1">
-                      {subtitle}
-                    </p>
-                  )}
-                </div>
-                {actions && (
-                  <div className="flex-shrink-0">
-                    {actions}
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-          {variant === "compact" && (
-            <div className="p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]">
-              <div className="flex items-center gap-2 min-w-0">
-                {Icon && (
-                  <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
-                    <Icon className="h-3.5 w-3.5 text-muted-foreground" />
-                  </div>
-                )}
-                <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
-                  {title}
-                </span>
-              </div>
-              {actions && (
-                <div className="flex-shrink-0">
-                  {actions}
-                </div>
-              )}
-            </div>
-          )}
-          {hasContent && (
-            <div
-              className={cn(
-                variant === "header" ? "border-t border-black/[0.12] dark:border-white/[0.06]" : "",
-                variant === "compact" ? "px-5 py-4" : "",
-                variant === "bodyOnly" || variant === "header" ? bodyPaddingClass : "",
-                contentClassName
-              )}
-            >
-              {children}
-            </div>
-          )}
-        </div>
-      </Card>
-    </DesignCardNestingContext.Provider>
-  );
-}
-
-export type DesignCardTintProps = {
-  gradient: DesignCardGradient,
-} & React.ComponentProps<"div">
-
-export function DesignCardTint({
-  gradient,
-  className,
-  children,
-  ...props
-}: DesignCardTintProps) {
-  const tintClass = demoTintClasses.get(gradient) ?? "group-hover/tint:bg-slate-500/[0.015]";
-
-  return (
-    <div
-      className={cn(
-        "group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none",
-        "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
-        "shadow-sm hover:shadow-md overflow-hidden",
-        className
-      )}
-      {...props}
-    >
-      <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl" />
-      <div
-        className={cn(
-          "absolute inset-0 transition-colors duration-150 group-hover/tint:transition-none pointer-events-none rounded-2xl",
-          tintClass
-        )}
-      />
-      <div className="relative">
-        {children}
-      </div>
-    </div>
-  );
-}
+export { DesignCard, DesignCardTint, useInsideDesignCard, useGlassmorphicDefault } from "@stackframe/dashboard-ui-components";
+export type { DesignCardProps, DesignCardTintProps } from "@stackframe/dashboard-ui-components";
diff --git a/apps/dashboard/src/components/design-components/editable-grid.tsx b/apps/dashboard/src/components/design-components/editable-grid.tsx
index 99cbd6a4c1..a3ffc9c7f1 100644
--- a/apps/dashboard/src/components/design-components/editable-grid.tsx
+++ b/apps/dashboard/src/components/design-components/editable-grid.tsx
@@ -14,9 +14,7 @@ import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { ArrowCounterClockwise, FloppyDisk } from "@phosphor-icons/react";
 import { useState } from "react";
-import { DesignButton } from "./button";
-import { useDesignEditMode } from "./edit-mode";
-import { DesignInput } from "./input";
+import { DesignButton, useDesignEditMode, DesignInput } from "@stackframe/dashboard-ui-components";
 
 export type DesignEditableGridSize = "sm" | "md";
 
diff --git a/apps/dashboard/src/components/design-components/index.ts b/apps/dashboard/src/components/design-components/index.ts
index 06b84cd39f..ad10260bb1 100644
--- a/apps/dashboard/src/components/design-components/index.ts
+++ b/apps/dashboard/src/components/design-components/index.ts
@@ -1,14 +1,6 @@
-export * from "./alert";
-export * from "./badge";
-export * from "./button";
-export * from "./card";
-export * from "./cursor-blast-effect";
-export * from "./edit-mode";
+export * from "@stackframe/dashboard-ui-components";
 export * from "./editable-grid";
-export * from "./input";
 export * from "./list";
 export * from "./menu";
-export * from "./pill-toggle";
 export * from "./select";
 export * from "./table";
-export * from "./tabs";
diff --git a/apps/dashboard/src/components/design-components/input.tsx b/apps/dashboard/src/components/design-components/input.tsx
index 1c79286440..a349a32c42 100644
--- a/apps/dashboard/src/components/design-components/input.tsx
+++ b/apps/dashboard/src/components/design-components/input.tsx
@@ -1,85 +1,2 @@
-"use client";
-
-import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
-import React from "react";
-
-import { cn } from "@/lib/utils";
-
-export type DesignInputProps = {
-  prefixItem?: React.ReactNode,
-  leadingIcon?: React.ReactNode,
-  size?: "sm" | "md" | "lg",
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
-
-export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(
-  ({ className, type, prefixItem, leadingIcon, size = "md", ...props }, ref) => {
-    const sizeClasses = size === "sm"
-      ? "h-7 px-2 text-xs"
-      : size === "lg"
-        ? "h-10 px-4 text-sm"
-        : "h-9 px-3 text-sm";
-    const baseClasses = cn(
-      "stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
-      "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-      "placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]",
-      sizeClasses
-    );
-
-    if (prefixItem) {
-      return (
-        <div className="flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]">
-          <div className={cn(
-            "flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]",
-            size === "sm" ? "px-2.5 text-xs" : size === "lg" ? "px-3.5 text-sm" : "px-3 text-sm"
-          )}>
-            {prefixItem}
-          </div>
-          <input
-            type={type}
-            className={cn(
-              "stack-scope flex w-full bg-transparent",
-              "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-              "placeholder:text-muted-foreground/50 focus-visible:outline-none",
-              "disabled:cursor-not-allowed disabled:opacity-50",
-              sizeClasses,
-              "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0",
-              className
-            )}
-            ref={ref}
-            {...props}
-          />
-        </div>
-      );
-    }
-
-    if (leadingIcon) {
-      return (
-        <div className="relative flex flex-row items-center flex-1">
-          <div className="pointer-events-none absolute left-2.5 flex items-center text-muted-foreground">
-            {leadingIcon}
-          </div>
-          <input
-            type={type}
-            className={cn(baseClasses, "pl-8", className)}
-            ref={ref}
-            {...props}
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div className="flex flex-row items-center flex-1">
-        <input
-          type={type}
-          className={cn(baseClasses, className)}
-          ref={ref}
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-DesignInput.displayName = "DesignInput";
+export { DesignInput } from "@stackframe/dashboard-ui-components";
+export type { DesignInputProps } from "@stackframe/dashboard-ui-components";
diff --git a/apps/dashboard/src/components/design-components/list.tsx b/apps/dashboard/src/components/design-components/list.tsx
index 3ba2aaffd1..e5feff53a3 100644
--- a/apps/dashboard/src/components/design-components/list.tsx
+++ b/apps/dashboard/src/components/design-components/list.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { DesignButton } from "./button";
+import { DesignButton } from "@stackframe/dashboard-ui-components";
 import { DesignMenu, type DesignMenuActionItem } from "./menu";
 
 // ─── Button action types ──────────────────────────────────────────────────
@@ -110,15 +110,25 @@ export function DesignListItemRow({
   onClick,
   className,
 }: DesignListItemRowProps) {
-  const Wrapper = onClick ? "button" : "div";
+  const interactiveProps = onClick ? {
+    role: "button" as const,
+    tabIndex: 0,
+    onClick,
+    onKeyDown: (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick();
+      }
+    },
+  } : {};
 
   if (size === "sm") {
     return (
-      <Wrapper
-        {...(onClick ? { onClick, type: "button" as const } : {})}
+      <div
+        {...interactiveProps}
         className={cn(
           "w-full flex items-center justify-between gap-3 p-2.5 rounded-xl transition-all duration-150 hover:transition-none text-left group",
-          onClick && "hover:bg-foreground/[0.04]",
+          onClick && "hover:bg-foreground/[0.04] cursor-pointer",
           className,
         )}
       >
@@ -136,18 +146,19 @@ export function DesignListItemRow({
           </div>
         </div>
         {buttons && buttons.length > 0 && <ListItemButtons buttons={buttons} />}
-      </Wrapper>
+      </div>
     );
   }
 
   // size === "lg"
   return (
-    <Wrapper
-      {...(onClick ? { onClick, type: "button" as const } : {})}
+    <div
+      {...interactiveProps}
       className={cn(
         "w-full group relative flex items-center justify-between p-4 rounded-2xl transition-all duration-150 hover:transition-none text-left",
         "bg-white/90 dark:bg-background/60 backdrop-blur-xl ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
         "shadow-sm hover:shadow-md",
+        onClick && "cursor-pointer",
         className,
       )}
     >
@@ -166,7 +177,7 @@ export function DesignListItemRow({
         </div>
       </div>
       {buttons && buttons.length > 0 && <ListItemButtons buttons={buttons} />}
-    </Wrapper>
+    </div>
   );
 }
 
diff --git a/apps/dashboard/src/components/design-components/menu.tsx b/apps/dashboard/src/components/design-components/menu.tsx
index bca73dc352..ffb26267a7 100644
--- a/apps/dashboard/src/components/design-components/menu.tsx
+++ b/apps/dashboard/src/components/design-components/menu.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { DotsThree } from "@phosphor-icons/react";
-import { DesignButton } from "./button";
+import { DesignButton } from "@stackframe/dashboard-ui-components";
 
 type DesignMenuTrigger = "button" | "icon";
 type DesignMenuItemVariant = "default" | "destructive";
diff --git a/apps/dashboard/src/components/design-components/subpage-header.tsx b/apps/dashboard/src/components/design-components/subpage-header.tsx
new file mode 100644
index 0000000000..66a65212ef
--- /dev/null
+++ b/apps/dashboard/src/components/design-components/subpage-header.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Button, Typography } from "@/components/ui";
+import { ArrowLeftIcon } from "@phosphor-icons/react";
+import { ReactNode } from "react";
+
+type SubpageHeaderProps = {
+  title: string,
+  onBack: () => void,
+  actions?: ReactNode,
+};
+
+export function SubpageHeader({ title, onBack, actions }: SubpageHeaderProps) {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-b border-border/50">
+      <div className="flex items-center gap-3 min-w-0">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0 shrink-0"
+          onClick={onBack}
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
+        </Button>
+
+        <Typography className="font-semibold text-foreground truncate">
+          {title}
+        </Typography>
+      </div>
+
+      {actions != null && (
+        <div className="flex items-center gap-2 shrink-0">
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/design-components/table.tsx b/apps/dashboard/src/components/design-components/table.tsx
index 096c535f86..84a17d6589 100644
--- a/apps/dashboard/src/components/design-components/table.tsx
+++ b/apps/dashboard/src/components/design-components/table.tsx
@@ -4,7 +4,7 @@ import { DataTable } from "@/components/ui";
 import { cn } from "@/lib/utils";
 import { ColumnDef, ColumnFiltersState, SortingState, Table as TableType } from "@tanstack/react-table";
 import React from "react";
-import { DesignCard, useGlassmorphicDefault, useInsideDesignCard } from "./card";
+import { DesignCard, useGlassmorphicDefault, useInsideDesignCard } from "@stackframe/dashboard-ui-components";
 
 const borderReset = "[&_div.rounded-md.border]:border-0 [&_div.rounded-md.border]:shadow-none";
 
diff --git a/apps/dashboard/src/components/editable-input.tsx b/apps/dashboard/src/components/editable-input.tsx
index c518d19330..09d053b228 100644
--- a/apps/dashboard/src/components/editable-input.tsx
+++ b/apps/dashboard/src/components/editable-input.tsx
@@ -1,4 +1,4 @@
-import { DesignButton, DesignInput } from "@/components/design-components";
+import { DesignButton, DesignInput } from "@stackframe/dashboard-ui-components";
 import { cn } from "@/lib/utils";
 import { Check, X } from "@phosphor-icons/react";
 import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
diff --git a/apps/dashboard/src/components/stack-companion.tsx b/apps/dashboard/src/components/stack-companion.tsx
index cf850f7f2f..37bfd91d2f 100644
--- a/apps/dashboard/src/components/stack-companion.tsx
+++ b/apps/dashboard/src/components/stack-companion.tsx
@@ -112,7 +112,7 @@ export function useStackCompanion() {
 }
 
 
-export function StackCompanion({ className }: { className?: string }) {
+export function StackCompanion({ className, glassBg = false }: { className?: string, glassBg?: boolean }) {
   const [activeItem, setActiveItem] = useState<string | null>(null);
   const [mounted, setMounted] = useState(false);
   const [versionCheckResult, setVersionCheckResult] = useState<VersionCheckResult>(null);
@@ -443,7 +443,10 @@ export function StackCompanion({ className }: { className?: string }) {
     >
       {/* The Handle Pill */}
       <div className={cn(
-        "flex flex-col items-center gap-3 px-2 py-3 bg-white dark:bg-foreground/[0.03] dark:backdrop-blur-xl border border-black/[0.06] dark:border-foreground/5 shadow-md transition-all duration-300 select-none",
+        "flex flex-col items-center gap-3 px-2 py-3 border border-black/[0.06] dark:border-foreground/5 shadow-md transition-all duration-300 select-none",
+        glassBg
+          ? "bg-slate-50/90 dark:bg-background/40 backdrop-blur-xl"
+          : "bg-white dark:bg-foreground/[0.03] dark:backdrop-blur-xl",
         // Only show grab cursor when an item is selected (drawer can be resized)
         activeItem && "cursor-grab active:cursor-grabbing",
         // Shape morphing
@@ -515,7 +518,10 @@ export function StackCompanion({ className }: { className?: string }) {
           {showDrawerContainerSplit && (
             <div
               className={cn(
-              "h-full bg-white dark:bg-foreground/5 dark:backdrop-blur-xl border border-black/[0.06] dark:border-foreground/5 overflow-hidden relative rounded-2xl shadow-md",
+                "h-full border border-black/[0.06] dark:border-foreground/5 overflow-hidden relative rounded-2xl shadow-md",
+                glassBg
+                  ? "bg-slate-50/90 dark:bg-background/40 backdrop-blur-xl"
+                  : "bg-white dark:bg-foreground/5 dark:backdrop-blur-xl",
                 isAnimating && !isResizing && "transition-[width] duration-300 ease-out"
               )}
               style={{ width: drawerWidth }}
diff --git a/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx b/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx
index 1e80cbf067..5966c70280 100644
--- a/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx
+++ b/apps/dashboard/src/components/vibe-coding/assistant-chat.tsx
@@ -12,6 +12,8 @@ type AssistantChatProps = {
   historyAdapter: ThreadHistoryAdapter,
   toolComponents: React.ReactNode,
   useOffWhiteLightMode?: boolean,
+  composerPlaceholder?: string,
+  hideMessageActions?: boolean,
 }
 
 export default function AssistantChat({
@@ -19,6 +21,8 @@ export default function AssistantChat({
   historyAdapter,
   toolComponents,
   useOffWhiteLightMode = false,
+  composerPlaceholder,
+  hideMessageActions = false,
 }: AssistantChatProps) {
   const runtime = useLocalRuntime(
     chatAdapter,
@@ -29,7 +33,7 @@ export default function AssistantChat({
     <AssistantRuntimeProvider runtime={runtime}>
       <div className="flex flex-col h-full w-full overflow-hidden border-l border-border/10 dark:border-foreground/[0.06]">
         <TooltipProvider delayDuration={300}>
-          <Thread useOffWhiteLightMode={useOffWhiteLightMode} />
+          <Thread useOffWhiteLightMode={useOffWhiteLightMode} composerPlaceholder={composerPlaceholder} hideMessageActions={hideMessageActions} />
         </TooltipProvider>
         {toolComponents}
       </div>
diff --git a/apps/dashboard/src/components/vibe-coding/chat-adapters.ts b/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
index a2480d05ce..769f041b78 100644
--- a/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
+++ b/apps/dashboard/src/components/vibe-coding/chat-adapters.ts
@@ -1,10 +1,15 @@
+import { buildDashboardMessages } from "@/lib/ai-dashboard/shared-prompt";
+import { buildStackAuthHeaders, type CurrentUser } from "@/lib/api-headers";
+import type { AppId } from "@/lib/apps-frontend";
 import {
   type ChatModelAdapter,
+  type ChatModelRunOptions,
   type ExportedMessageRepository,
   type ThreadHistoryAdapter,
 } from "@assistant-ui/react";
 import { StackAdminApp } from "@stackframe/stack";
 import { ChatContent } from "@stackframe/stack-shared/dist/interface/admin-interface";
+import type { EditableMetadata } from "@stackframe/stack-shared/dist/utils/jsx-editable-transpiler";
 
 export type ToolCallContent = Extract<ChatContent[number], { type: "tool-call" }>;
 
@@ -12,61 +17,329 @@ const isToolCall = (content: { type: string }): content is ToolCallContent => {
   return content.type === "tool-call";
 };
 
+/**
+ * Sanitizes AI-generated JSX/TSX code before it is applied to the renderer.
+ *
+ * Handles four common model output issues:
+ * 1. Markdown code fences (```tsx ... ```) wrapping the output despite instructions
+ * 2. HTML-encoded angle brackets (&lt;Component&gt; instead of <Component>)
+ * 3. Bare & in JSX text content (invalid JSX; must be &amp; or {"&"})
+ * 4. Semicolons used as property separators in JS object literals instead of commas
+ *    (the AI confuses TypeScript interface syntax with JS object syntax).
+ *    TypeScript also accepts commas in interfaces/types, so replacing ; → , is always safe.
+ */
+function sanitizeGeneratedCode(code: string): string {
+  let result = code.trim();
+
+  if (result.startsWith("```")) {
+    const lines = result.split("\n");
+    lines.shift();
+    if (lines[lines.length - 1]?.trim() === "```") {
+      lines.pop();
+    }
+    result = lines.join("\n").trim();
+  }
+
+  result = result
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, "&");
+
+  result = result.replace(/;(\s*\n\s*[A-Za-z_$][\w$]*\s*:)/g, ",$1");
+
+  return result;
+}
+
+function stripCodeFences(code: string): string {
+  if (!code.startsWith("```")) return code;
+  const lines = code.split("\n");
+  lines.shift();
+  if (lines[lines.length - 1]?.trim() === "```") lines.pop();
+  return lines.join("\n");
+}
+
+/**
+ * Sends a request to the AI query endpoint and returns the parsed content.
+ */
+async function sendAiRequest(
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined,
+  body: {
+    quality: string,
+    speed: string,
+    systemPrompt: string,
+    tools: string[],
+    messages: Array<{ role: string, content: unknown }>,
+  },
+  abortSignal?: AbortSignal,
+): Promise<ChatContent> {
+  const authHeaders = await buildStackAuthHeaders(currentUser);
+
+  const response = await fetch(`${backendBaseUrl}/api/latest/ai/query/generate`, {
+    method: "POST",
+    headers: { "content-type": "application/json", ...authHeaders },
+    ...(abortSignal ? { signal: abortSignal } : {}),
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok) {
+    throw new Error(`AI request failed: ${response.status} ${response.statusText}`);
+  }
+
+  const json = await response.json() as { content?: ChatContent };
+  return Array.isArray(json.content) ? json.content : [];
+}
+
+/**
+ * Sanitizes tool call content in AI response and returns the sanitized content.
+ */
+function sanitizeAiContent(content: ChatContent): ChatContent {
+  return content.map((item) => {
+    if (item.type === "tool-call" && typeof item.args?.content === "string") {
+      return { ...item, args: { ...item.args, content: sanitizeGeneratedCode(item.args.content) } };
+    }
+    return item;
+  });
+}
+
+/**
+ * One-shot dashboard generation: builds context, calls AI, returns the tool call content.
+ * Used by both the cmd+K preview and the dashboard chat adapter.
+ */
+export async function generateDashboardCode(
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined,
+  messages: Array<{ role: string, content: unknown }>,
+  options?: {
+    currentTsxSource?: string,
+    abortSignal?: AbortSignal,
+    enabledAppIds?: AppId[],
+  },
+): Promise<{ content: ChatContent, toolCall: ToolCallContent | undefined }> {
+  const contextMessages = await buildDashboardMessages(
+    backendBaseUrl,
+    currentUser,
+    messages,
+    options?.currentTsxSource,
+    options?.enabledAppIds,
+  );
+  const rawContent = await sendAiRequest(
+    backendBaseUrl,
+    currentUser,
+    {
+      quality: "smart",
+      speed: "slow",
+      systemPrompt: "create-dashboard",
+      tools: ["update-dashboard"],
+      messages: [...contextMessages, ...messages],
+    },
+    options?.abortSignal,
+  );
+
+  const toolCall = rawContent.find(isToolCall);
+
+  return { content: rawContent, toolCall };
+}
+
+const CONTEXT_MAP = {
+  "email-theme": { systemPrompt: "email-assistant-theme", tools: ["create-email-theme"] },
+  "email-template": { systemPrompt: "email-assistant-template", tools: ["create-email-template"] },
+  "email-draft": { systemPrompt: "email-assistant-draft", tools: ["create-email-draft"] },
+} as const;
+
 export function createChatAdapter(
-  adminApp: StackAdminApp,
-  threadId: string,
+  backendBaseUrl: string,
   contextType: "email-theme" | "email-template" | "email-draft",
-  onToolCall: (toolCall: ToolCallContent) => void
+  onToolCall: (toolCall: ToolCallContent) => void,
+  getCurrentSource?: () => string,
+  currentUser?: CurrentUser,
 ): ChatModelAdapter {
   return {
-    async run({ messages, abortSignal }) {
+    async run({ messages, abortSignal }: ChatModelRunOptions) {
       try {
-        const formattedMessages = [];
+        const formattedMessages: Array<{ role: string, content: unknown }> = [];
         for (const msg of messages) {
-          // Separate tool calls from other content
-          const toolCalls = msg.content.filter(isToolCall);
-          const nonToolContent = msg.content.filter(c => !isToolCall(c));
-          // Only add the message if it has non-tool content
-          if (nonToolContent.length > 0) {
-            formattedMessages.push({
-              role: msg.role,
-              content: nonToolContent
-            });
+          const textContent = msg.content.filter(c => !isToolCall(c));
+          if (textContent.length > 0) {
+            formattedMessages.push({ role: msg.role, content: textContent });
+          }
+        }
+
+        const { systemPrompt, tools } = CONTEXT_MAP[contextType];
+
+        const contextMessages: Array<{ role: string, content: unknown }> = [];
+        if (getCurrentSource) {
+          const src = getCurrentSource();
+          if (src.length > 0) {
+            contextMessages.push({ role: "user", content: `Here is the current source:\n\`\`\`tsx\n${src}\n\`\`\`` });
+            contextMessages.push({ role: "assistant", content: "Got it, I have the current source code." });
           }
-          // Add tool results as separate messages
-          toolCalls.forEach(toolCall => {
-            formattedMessages.push({
-              role: "tool",
-              content: [{
-                type: "tool-result",
-                toolCallId: toolCall.toolCallId,
-                toolName: toolCall.toolName,
-                result: toolCall.result,
-              }],
-            });
-          });
         }
 
-        const response = await adminApp.sendChatMessage(threadId, contextType, formattedMessages, abortSignal);
-        if (response.content.some(isToolCall)) {
-          const toolCall = response.content.find(isToolCall);
-          if (toolCall) {
-            onToolCall(toolCall);
+        const rawContent = await sendAiRequest(
+          backendBaseUrl,
+          currentUser,
+          {
+            quality: "smartest",
+            speed: "fast",
+            systemPrompt,
+            tools: [...tools],
+            messages: [...contextMessages, ...formattedMessages],
+          },
+          abortSignal,
+        );
+
+        const sanitizedContent = sanitizeAiContent(rawContent);
+
+        const toolCall = sanitizedContent.find(isToolCall);
+        if (toolCall) {
+          onToolCall(toolCall);
+        }
+
+        return { content: sanitizedContent };
+      } catch (error) {
+        if (abortSignal.aborted) {
+          return {};
+        }
+        throw new Error("Failed to get AI response. Please try again.");
+      }
+    },
+  };
+}
+
+export function createDashboardChatAdapter(
+  backendBaseUrl: string,
+  currentTsxSource: string,
+  onToolCall: (toolCall: ToolCallContent) => void,
+  currentUser?: CurrentUser,
+  enabledAppIds?: AppId[],
+): ChatModelAdapter {
+  return {
+    async run({ messages, abortSignal }: ChatModelRunOptions) {
+      try {
+        const formattedMessages: Array<{ role: string, content: unknown }> = [];
+        for (const msg of messages) {
+          const textContent = msg.content.filter(c => !isToolCall(c));
+          if (textContent.length > 0) {
+            formattedMessages.push({ role: msg.role, content: textContent });
           }
         }
-        return {
-          content: response.content,
-        };
+
+        const { content, toolCall } = await generateDashboardCode(
+          backendBaseUrl,
+          currentUser,
+          formattedMessages,
+          {
+            currentTsxSource,
+            abortSignal,
+            enabledAppIds,
+          },
+        );
+
+        if (toolCall) {
+          onToolCall(toolCall);
+        }
+
+        return { content };
       } catch (error) {
         if (abortSignal.aborted) {
           return {};
         }
-        throw error;
+        throw new Error("Failed to get AI response. Please try again.");
       }
     },
   };
 }
 
+export async function applyWysiwygEdit(
+  backendBaseUrl: string,
+  options: {
+    sourceType: "template" | "theme" | "draft",
+    sourceCode: string,
+    oldText: string,
+    newText: string,
+    metadata: EditableMetadata,
+    domPath: Array<{ tagName: string, index: number }>,
+    htmlContext: string,
+    currentUser?: CurrentUser,
+  },
+): Promise<{ updatedSource: string }> {
+  if (options.oldText === options.newText) {
+    return { updatedSource: options.sourceCode };
+  }
+
+  const { sourceCode, oldText, newText, metadata, domPath, htmlContext } = options;
+
+  const userPrompt = `
+## Source Code to Edit
+\`\`\`tsx
+${sourceCode}
+\`\`\`
+
+## Edit Request
+- **Old text:** "${oldText}"
+- **New text:** "${newText}"
+
+## Location Information
+- **Line:** ${metadata.loc.line}
+- **Column:** ${metadata.loc.column}
+- **JSX Path:** ${metadata.jsxPath.join(" > ")}
+- **Parent Element:** <${metadata.parentElement.tagName}>
+- **Sibling Index:** ${metadata.siblingIndex}
+- **Occurrence:** ${metadata.occurrenceIndex} of ${metadata.occurrenceCount}
+
+## Source Context (lines around the text)
+Before:
+\`\`\`
+${metadata.sourceContext.before}
+\`\`\`
+
+After:
+\`\`\`
+${metadata.sourceContext.after}
+\`\`\`
+
+## Runtime DOM Path (for disambiguation)
+${domPath.map((p, i) => `${i + 1}. <${p.tagName}> (index: ${p.index})`).join("\n")}
+
+## Rendered HTML Context
+\`\`\`html
+${htmlContext.slice(0, 500)}
+\`\`\`
+
+Please update the source code to change "${oldText}" to "${newText}" at the specified location. Return ONLY the complete updated source code.
+`;
+
+  const { currentUser } = options;
+  const authHeaders = await buildStackAuthHeaders(currentUser);
+
+  const response = await fetch(`${backendBaseUrl}/api/latest/ai/query/generate`, {
+    method: "POST",
+    headers: { "content-type": "application/json", ...authHeaders },
+    body: JSON.stringify({
+      quality: "smart",
+      speed: "fast",
+      systemPrompt: "wysiwyg-edit",
+      tools: [],
+      messages: [{ role: "user", content: userPrompt }],
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Wysiwyg edit request failed: ${response.status} ${response.statusText}`);
+  }
+
+  const json = await response.json() as { content?: Array<{ type: string, text?: string }> };
+  const textBlock = Array.isArray(json.content)
+    ? json.content.find((b) => b.type === "text" && b.text)
+    : undefined;
+  const updatedSource = stripCodeFences(textBlock?.text?.trim() ?? sourceCode);
+
+  return { updatedSource };
+}
+
 export function createHistoryAdapter(
   adminApp: StackAdminApp,
   threadId: string,
diff --git a/apps/dashboard/src/components/vibe-coding/dashboard-tool-components.tsx b/apps/dashboard/src/components/vibe-coding/dashboard-tool-components.tsx
new file mode 100644
index 0000000000..c75b3d61ed
--- /dev/null
+++ b/apps/dashboard/src/components/vibe-coding/dashboard-tool-components.tsx
@@ -0,0 +1,69 @@
+import { Button, Card } from "@/components/ui";
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { ArrowCounterClockwiseIcon, CheckCircleIcon } from "@phosphor-icons/react";
+import { useEffect, useSyncExternalStore } from "react";
+
+let setCurrentCodeRef: ((code: string) => void) | null = null;
+let currentCodeRef: string = "";
+const listeners: Set<() => void> = new Set();
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function useCurrentCode() {
+  return useSyncExternalStore(subscribe, () => currentCodeRef);
+}
+
+function ToolRender({ args }: { args: { content: string } }) {
+  const currentCode = useCurrentCode();
+  const isActive = args.content === currentCode;
+
+  return (
+    <Card className={`flex items-center gap-2 p-4 justify-between transition-colors ${isActive ? "ring-1 ring-primary/30 bg-primary/[0.03]" : ""}`}>
+      <span className="text-sm flex items-center gap-2">
+        {isActive && <CheckCircleIcon className="size-4 text-primary" weight="fill" />}
+        Updated dashboard
+      </span>
+      {!isActive && (
+        <Button variant="ghost" size="icon" onClick={() => setCurrentCodeRef?.(args.content)}>
+          <ArrowCounterClockwiseIcon className="size-4" />
+        </Button>
+      )}
+    </Card>
+  );
+}
+
+const ToolUI = makeAssistantToolUI<
+  { content: string },
+  "success"
+>({
+  toolName: "updateDashboard",
+  render: (props) => <ToolRender args={props.args} />,
+});
+
+type DashboardToolUIProps = {
+  setCurrentCode: (code: string) => void,
+  currentCode: string,
+}
+
+export const DashboardToolUI = ({ setCurrentCode, currentCode }: DashboardToolUIProps) => {
+  useEffect(() => {
+    setCurrentCodeRef = setCurrentCode;
+    return () => {
+      setCurrentCodeRef = null;
+    };
+  }, [setCurrentCode]);
+
+  useEffect(() => {
+    currentCodeRef = currentCode;
+    for (const listener of listeners) {
+      listener();
+    }
+  }, [currentCode]);
+
+  return <ToolUI />;
+};
diff --git a/apps/dashboard/src/components/vibe-coding/draft-tool-components.tsx b/apps/dashboard/src/components/vibe-coding/draft-tool-components.tsx
index 3f0a0f87c8..8a69bbbe53 100644
--- a/apps/dashboard/src/components/vibe-coding/draft-tool-components.tsx
+++ b/apps/dashboard/src/components/vibe-coding/draft-tool-components.tsx
@@ -11,7 +11,7 @@ export const EmailDraftUI = ({ setCurrentCode }: EmailDraftUIProps) => {
     { content: string },
     "success"
   >({
-    toolName: "createEmailTemplate",
+    toolName: "createEmailDraft",
     render: ({ args }) => {
       return (
         <Card className="flex items-center gap-2 p-4 justify-between">
diff --git a/apps/dashboard/src/components/vibe-coding/index.ts b/apps/dashboard/src/components/vibe-coding/index.ts
index 7b1825a5df..64093b619d 100644
--- a/apps/dashboard/src/components/vibe-coding/index.ts
+++ b/apps/dashboard/src/components/vibe-coding/index.ts
@@ -1,8 +1,9 @@
 export { default as AssistantChat } from './assistant-chat';
-export { createChatAdapter, createHistoryAdapter } from './chat-adapters';
+export { createChatAdapter, createDashboardChatAdapter, createHistoryAdapter } from './chat-adapters';
 export { default as CodeEditor } from './code-editor';
 export { default as VibeCodeLayout, type ViewportMode, type WysiwygDebugInfo } from './vibe-code-layout';
 
+export { DashboardToolUI } from './dashboard-tool-components';
 export { EmailTemplateUI } from './template-tool-components';
 export { EmailThemeUI } from './theme-tool-components';
 
diff --git a/apps/dashboard/src/generated/bundled-type-definitions.ts b/apps/dashboard/src/generated/bundled-type-definitions.ts
deleted file mode 100644
index e2b053f638..0000000000
--- a/apps/dashboard/src/generated/bundled-type-definitions.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-// This file is auto-generated by scripts/bundle-type-definitions.ts
-// Do not edit manually - changes will be overwritten
-// Last generated: 2026-02-13T17:47:51.287Z
-
-export type TypeDefinitionFile = {
-  path: string,
-  content: string,
-};
-
-export const BUNDLED_TYPE_DEFINITIONS: TypeDefinitionFile[] = [
-  {
-    "path": "index.ts",
-    "content": "export {\n  StackAdminApp, StackClientApp,\n  StackServerApp\n} from \"./apps\";\nexport type {\n  StackAdminAppConstructor,\n  StackAdminAppConstructorOptions,\n  StackClientAppConstructor,\n  StackClientAppConstructorOptions,\n  StackClientAppJson,\n  StackServerAppConstructor,\n  StackServerAppConstructorOptions\n} from \"./apps\";\n\nexport type {\n  EmailOutboxListOptions,\n  EmailOutboxListResult,\n  EmailOutboxUpdateOptions\n} from \"./apps/interfaces/admin-app\";\n\nexport type {\n  ProjectConfig\n} from \"./project-configs\";\n\nexport type {\n  InternalApiKey,\n  InternalApiKeyBase,\n  InternalApiKeyBaseCrudRead,\n  InternalApiKeyCreateOptions,\n  InternalApiKeyFirstView\n} from \"./internal-api-keys\";\n\nexport {\n  stackAppInternalsSymbol\n} from \"./common\";\nexport type {\n  GetCurrentUserOptions,\n  /** @deprecated Use GetCurrentUserOptions instead */\n  GetCurrentUserOptions as GetUserOptions,\n  HandlerUrls,\n  OAuthScopesOnSignIn\n} from \"./common\";\n\nexport type {\n  Connection,\n  OAuthConnection\n} from \"./connected-accounts\";\n\nexport type {\n  ContactChannel,\n  ServerContactChannel\n} from \"./contact-channels\";\n\nexport type {\n  AdminEmailOutbox,\n  AdminEmailOutboxRecipient,\n  AdminEmailOutboxSimpleStatus,\n  AdminEmailOutboxStatus,\n  AdminSentEmail\n} from \"./email\";\n\nexport type {\n  AdminProjectPermission,\n  AdminProjectPermissionDefinition,\n  AdminProjectPermissionDefinitionCreateOptions,\n  AdminProjectPermissionDefinitionUpdateOptions, AdminTeamPermission,\n  AdminTeamPermissionDefinition,\n  AdminTeamPermissionDefinitionCreateOptions,\n  AdminTeamPermissionDefinitionUpdateOptions\n} from \"./permissions\";\n\nexport type {\n  AdminDomainConfig,\n  AdminEmailConfig,\n  AdminOAuthProviderConfig,\n  AdminProjectConfig,\n  AdminProjectConfigUpdateOptions,\n  OAuthProviderConfig\n} from \"./project-configs\";\n\nexport type {\n  AdminOwnedProject,\n  AdminProject,\n  AdminProjectCreateOptions,\n  AdminProjectUpdateOptions,\n  Project,\n  PushedConfigSource\n} from \"./projects\";\n\nexport type {\n  EditableTeamMemberProfile,\n  ServerListUsersOptions,\n  ServerTeam,\n  ServerTeamCreateOptions,\n  ServerTeamMemberProfile,\n  ServerTeamUpdateOptions,\n  ServerTeamUser,\n  Team,\n  TeamCreateOptions,\n  TeamInvitation,\n  TeamMemberProfile,\n  TeamUpdateOptions,\n  TeamUser\n} from \"./teams\";\n\nexport type {\n  Auth,\n  CurrentInternalServerUser,\n  CurrentInternalUser,\n  CurrentServerUser,\n  CurrentUser,\n  OAuthProvider,\n  ServerOAuthProvider,\n  ServerUser,\n  User\n} from \"./users\";\n\n"
-  },
-  {
-    "path": "common.ts",
-    "content": "import { ProviderType } from \"@stackframe/stack-shared/dist/utils/oauth\";\nimport type { GenericQueryCtx, UserIdentity } from \"convex/server\";\n\nexport type RedirectToOptions = {\n  replace?: boolean,\n  noRedirectBack?: boolean,\n};\n\nexport type AsyncStoreProperty<Name extends string, Args extends any[], Value, IsMultiple extends boolean> =\n  & { [key in `${IsMultiple extends true ? \"list\" : \"get\"}${Capitalize<Name>}`]: (...args: Args) => Promise<Value> }\n  & { [key in `use${Capitalize<Name>}`]: (...args: Args) => Value } // THIS_LINE_PLATFORM react-like\n\nexport type EmailConfig = {\n  host: string,\n  port: number,\n  username: string,\n  password: string,\n  senderEmail: string,\n  senderName: string,\n}\n\nexport type RedirectMethod = \"window\"\n  | \"nextjs\" // THIS_LINE_PLATFORM next\n  | \"none\"\n  | {\n    useNavigate: () => (to: string) => void,\n    navigate?: (to: string) => void,\n  }\n\n\nexport type GetCurrentUserOptions<HasTokenStore> =\n  & {\n    or?: 'redirect' | 'throw' | 'return-null' | 'anonymous' | /** @deprecated */ 'anonymous-if-exists[deprecated]',\n    /**\n     * Whether to include restricted users (users who haven't completed onboarding requirements like email verification).\n     * By default, restricted users are filtered out (treated similar to anonymous users).\n     *\n     * Note: This option cannot be set to false when `or: 'anonymous'` is used, as all anonymous users are also restricted.\n     *\n     * @default false\n     */\n    includeRestricted?: boolean,\n    tokenStore?: TokenStoreInit,\n  }\n  & (HasTokenStore extends false ? {\n    tokenStore: TokenStoreInit,\n  } : {});\n\nexport type ConvexCtx =\n| GenericQueryCtx<any>\n| { auth: { getUserIdentity: () => Promise<UserIdentity | null> } };\n\nexport type GetCurrentPartialUserOptions<HasTokenStore> =\n  & {\n    or?: 'return-null' | 'anonymous',  // note: unlike normal getUser, 'anonymous' still returns null sometimes (eg. if no token is present)\n    tokenStore?: TokenStoreInit,\n  }\n  & (\n    | {\n      from: 'token',\n    }\n    | {\n      from: 'convex',\n      ctx: ConvexCtx,\n    }\n  )\n  & (HasTokenStore extends false ? {\n    tokenStore: TokenStoreInit,\n  } : {});\n\nexport type RequestLike = {\n  headers: {\n    get: (name: string) => string | null,\n  },\n};\n\nexport type TokenStoreInit<HasTokenStore extends boolean = boolean> =\n  HasTokenStore extends true ? (\n    | \"cookie\"\n    | \"nextjs-cookie\"\n    | \"memory\"\n    | RequestLike\n    | { accessToken: string, refreshToken: string }\n  )\n  : HasTokenStore extends false ? null\n  : TokenStoreInit<true> | TokenStoreInit<false>;\n\nexport type HandlerUrls = {\n  handler: string,\n  signIn: string,\n  signUp: string,\n  afterSignIn: string,\n  afterSignUp: string,\n  signOut: string,\n  afterSignOut: string,\n  emailVerification: string,\n  passwordReset: string,\n  forgotPassword: string,\n  home: string,\n  oauthCallback: string,\n  magicLinkCallback: string,\n  accountSettings: string,\n  teamInvitation: string,\n  mfa: string,\n  error: string,\n  onboarding: string,\n}\n\nexport type OAuthScopesOnSignIn = {\n  [key in ProviderType]: string[];\n};\n\n/**\n * Contains the authentication methods without session-related fields.\n * Used for apps that have token storage capabilities.\n */\nexport type AuthLike<ExtraOptions = {}> = {\n  signOut(options?: { redirectUrl?: URL | string } & ExtraOptions): Promise<void>,\n  signOut(options?: { redirectUrl?: URL | string }): Promise<void>,\n\n  /**\n   * Returns the current access token, or null if the user is not signed in.\n   *\n   * The access token is a short-lived JWT that can be used to authenticate requests to external servers.\n   * It will be automatically refreshed when it expires.\n   */\n  getAccessToken(options?: {} & ExtraOptions): Promise<string | null>,\n  useAccessToken(options?: {} & ExtraOptions): string | null, // THIS_LINE_PLATFORM react-like\n\n  /**\n   * Returns the current refresh token, or null if the user is not signed in.\n   *\n   * The refresh token is a long-lived token that can be used to obtain new access tokens.\n   * It should be kept secret and never exposed to the client.\n   */\n  getRefreshToken(options?: {} & ExtraOptions): Promise<string | null>,\n  useRefreshToken(options?: {} & ExtraOptions): string | null, // THIS_LINE_PLATFORM react-like\n\n  /**\n   * Returns headers for sending authenticated HTTP requests to external servers. Most commonly used in cross-origin\n   * requests. Similar to `getAuthJson`, but specifically for HTTP requests.\n   *\n   * If you are using `tokenStore: \"cookie\"`, you don't need this for same-origin requests. However, most\n   * browsers now disable third-party cookies by default, so we must pass authentication tokens by header instead\n   * if the client and server are on different origins.\n   *\n   * This function returns a header object that can be used with `fetch` or other HTTP request libraries to send\n   * authenticated requests.\n   *\n   * On the server, you can then pass in the `Request` object to the `tokenStore` option\n   * of your Stack app. Please note that CORS does not allow most headers by default, so you\n   * must include `x-stack-auth` in the [`Access-Control-Allow-Headers` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers)\n   * of the CORS preflight response.\n   *\n   * If you are not using HTTP (and hence cannot set headers), you will need to use the `getAccessToken()` and\n   * `getRefreshToken()` functions instead.\n   *\n   * Example:\n   *\n   * ```ts\n   * // client\n   * const res = await fetch(\"https://api.example.com\", {\n   *   headers: {\n   *     ...await stackApp.getAuthHeaders()\n   *     // you can also add your own headers here\n   *   },\n   * });\n   *\n   * // server\n   * function handleRequest(req: Request) {\n   *   const user = await stackServerApp.getUser({ tokenStore: req });\n   *   return new Response(\"Welcome, \" + user.displayName);\n   * }\n   * ```\n   */\n  getAuthHeaders(options?: {} & ExtraOptions): Promise<{ \"x-stack-auth\": string }>,\n  useAuthHeaders(options?: {} & ExtraOptions): { \"x-stack-auth\": string }, // THIS_LINE_PLATFORM react-like\n\n  /**\n   * @deprecated Use `getAccessToken()` and `getRefreshToken()` instead.\n   *\n   * Creates a JSON-serializable object containing the information to authenticate a user on an external server.\n   * Similar to `getAuthHeaders`, but returns an object that can be sent over any protocol instead of just\n   * HTTP headers.\n   *\n   * While `getAuthHeaders` is the recommended way to send authentication tokens over HTTP, your app may use\n   * a different protocol, for example WebSockets or gRPC. This function returns a token object that can be JSON-serialized and sent to the server in any way you like.\n   *\n   * On the server, you can pass in this token object into the `tokenStore` option to fetch user details.\n   *\n   * Example:\n   *\n   * ```ts\n   * // client\n   * const res = await rpcCall(rpcEndpoint, {\n   *   data: {\n   *     auth: await stackApp.getAuthJson(),\n   *   },\n   * });\n   *\n   * // server\n   * function handleRequest(data) {\n   *   const user = await stackServerApp.getUser({ tokenStore: data.auth });\n   *   return new Response(\"Welcome, \" + user.displayName);\n   * }\n   * ```\n   */\n  getAuthJson(options?: {} & ExtraOptions): Promise<{ accessToken: string | null, refreshToken: string | null }>,\n  /** @deprecated Use `useAccessToken()` and `useRefreshToken()` instead. */\n  useAuthJson(options?: {} & ExtraOptions): { accessToken: string | null, refreshToken: string | null }, // THIS_LINE_PLATFORM react-like\n};\n\n/** @internal */\nexport const stackAppInternalsSymbol = Symbol.for(\"StackAuth--DO-NOT-USE-OR-YOU-WILL-BE-FIRED--StackAppInternals\");\n"
-  },
-  {
-    "path": "users/index.ts",
-    "content": "import { KnownErrors } from \"@stackframe/stack-shared\";\nimport { CurrentUserCrud } from \"@stackframe/stack-shared/dist/interface/crud/current-user\";\nimport { UsersCrud } from \"@stackframe/stack-shared/dist/interface/crud/users\";\nimport { InternalSession } from \"@stackframe/stack-shared/dist/sessions\";\nimport { encodeBase64 } from \"@stackframe/stack-shared/dist/utils/bytes\";\nimport { GeoInfo } from \"@stackframe/stack-shared/dist/utils/geo\";\nimport { ReadonlyJson } from \"@stackframe/stack-shared/dist/utils/json\";\nimport { ProviderType } from \"@stackframe/stack-shared/dist/utils/oauth\";\nimport { Result } from \"@stackframe/stack-shared/dist/utils/results\";\nimport { ApiKeyCreationOptions, UserApiKey, UserApiKeyFirstView } from \"../api-keys\";\nimport { AsyncStoreProperty, AuthLike } from \"../common\";\nimport { OAuthConnection } from \"../connected-accounts\";\nimport { ContactChannel, ContactChannelCreateOptions, ServerContactChannel, ServerContactChannelCreateOptions } from \"../contact-channels\";\nimport { Customer } from \"../customers\";\nimport { NotificationCategory } from \"../notification-categories\";\nimport { AdminTeamPermission, TeamPermission } from \"../permissions\";\nimport { AdminOwnedProject, AdminProjectCreateOptions } from \"../projects\";\nimport { EditableTeamMemberProfile, ServerTeam, ServerTeamCreateOptions, Team, TeamCreateOptions } from \"../teams\";\n\nconst userGetterErrorMessage = \"Stack Auth: useUser() already returns the user object. Use `const user = useUser()` (or `const user = await app.getUser()`) instead of destructuring it like `const { user } = ...`.\";\n\nexport function withUserDestructureGuard<T extends object>(target: T): T {\n  Object.freeze(target);\n  return new Proxy(target, {\n    get(target, prop, receiver) {\n      if (prop === \"user\") {\n        return guardGetter();\n      }\n      return target[prop as keyof T];\n    },\n  });\n}\n\nfunction guardGetter(): never {\n  throw new Error(userGetterErrorMessage);\n}\n\nexport type OAuthProvider = {\n  readonly id: string,\n  readonly type: string,\n  readonly userId: string,\n  readonly accountId?: string,\n  readonly email?: string,\n  readonly allowSignIn: boolean,\n  readonly allowConnectedAccounts: boolean,\n  update(data: { allowSignIn?: boolean, allowConnectedAccounts?: boolean }): Promise<Result<void,\n    InstanceType<typeof KnownErrors.OAuthProviderAccountIdAlreadyUsedForSignIn>\n  >>,\n  delete(): Promise<void>,\n};\n\nexport type ServerOAuthProvider = {\n  readonly id: string,\n  readonly type: string,\n  readonly userId: string,\n  readonly accountId: string,\n  readonly email?: string,\n  readonly allowSignIn: boolean,\n  readonly allowConnectedAccounts: boolean,\n  update(data: { accountId?: string, email?: string, allowSignIn?: boolean, allowConnectedAccounts?: boolean }): Promise<Result<void,\n    InstanceType<typeof KnownErrors.OAuthProviderAccountIdAlreadyUsedForSignIn>\n  >>,\n  delete(): Promise<void>,\n};\n\n\n/**\n * Contains everything related to the current user session.\n */\nexport type Auth = AuthLike<{}> & {\n  readonly _internalSession: InternalSession,\n  readonly currentSession: {\n    getTokens(): Promise<{ accessToken: string | null, refreshToken: string | null }>,\n    useTokens(): { accessToken: string | null, refreshToken: string | null }, // THIS_LINE_PLATFORM react-like\n  },\n};\n\n/**\n * ```\n * +----------+-------------+-------------------+\n * |    \\     |   !Server   |      Server       |\n * +----------+-------------+-------------------+\n * | !Session | User        | ServerUser        |\n * | Session  | CurrentUser | CurrentServerUser |\n * +----------+-------------+-------------------+\n * ```\n *\n * The fields on each of these types are available iff:\n * BaseUser: true\n * Auth: Session\n * ServerBaseUser: Server\n * UserExtra: Session OR Server\n *\n * The types are defined as follows (in the typescript manner):\n * User = BaseUser\n * CurrentUser = BaseUser & Auth & UserExtra\n * ServerUser = BaseUser & ServerBaseUser & UserExtra\n * CurrentServerUser = BaseUser & ServerBaseUser & Auth & UserExtra\n **/\n\nexport type BaseUser = {\n  readonly id: string,\n\n  readonly displayName: string | null,\n\n  /**\n   * The user's email address.\n   *\n   * Note: This might NOT be unique across multiple users, so always use `id` for unique identification.\n   */\n  readonly primaryEmail: string | null,\n  readonly primaryEmailVerified: boolean,\n  readonly profileImageUrl: string | null,\n\n  readonly signedUpAt: Date,\n\n  readonly clientMetadata: any,\n  readonly clientReadOnlyMetadata: any,\n\n  /**\n   * Whether the user has a password set.\n   */\n  readonly hasPassword: boolean,\n  readonly otpAuthEnabled: boolean,\n  readonly passkeyAuthEnabled: boolean,\n\n  readonly isMultiFactorRequired: boolean,\n  readonly isAnonymous: boolean,\n  /**\n   * Whether the user is in restricted state (signed up but hasn't completed onboarding requirements).\n   * For example, if email verification is required but the user hasn't verified their email yet.\n   */\n  readonly isRestricted: boolean,\n  /**\n   * The reason why the user is restricted, e.g., { type: \"email_not_verified\" }, { type: \"anonymous\" }, or { type: \"restricted_by_administrator\" }.\n   * Null if the user is not restricted.\n   */\n  readonly restrictedReason: { type: \"anonymous\" | \"email_not_verified\" | \"restricted_by_administrator\" } | null,\n  toClientJson(): CurrentUserCrud[\"Client\"][\"Read\"],\n\n  /**\n   * @deprecated, use contact channel's usedForAuth instead\n   */\n  readonly emailAuthEnabled: boolean,\n  /**\n   * @deprecated\n   */\n  readonly oauthProviders: readonly { id: string }[],\n}\n\nexport type UserExtra = {\n  setDisplayName(displayName: string | null): Promise<void>,\n  /** @deprecated Use contact channel's sendVerificationEmail instead */\n  sendVerificationEmail(): Promise<KnownErrors[\"EmailAlreadyVerified\"] | void>,\n  setClientMetadata(metadata: any): Promise<void>,\n  updatePassword(options: { oldPassword: string, newPassword: string}): Promise<KnownErrors[\"PasswordConfirmationMismatch\"] | KnownErrors[\"PasswordRequirementsNotMet\"] | void>,\n  setPassword(options: { password: string }): Promise<KnownErrors[\"PasswordRequirementsNotMet\"] | void>,\n\n  /**\n   * A shorthand method to update multiple fields of the user at once.\n   */\n  update(update: UserUpdateOptions): Promise<void>,\n\n  useContactChannels(): ContactChannel[], // THIS_LINE_PLATFORM react-like\n  listContactChannels(): Promise<ContactChannel[]>,\n  createContactChannel(data: ContactChannelCreateOptions): Promise<ContactChannel>,\n\n  useNotificationCategories(): NotificationCategory[], // THIS_LINE_PLATFORM react-like\n  listNotificationCategories(): Promise<NotificationCategory[]>,\n\n  delete(): Promise<void>,\n\n  getConnectedAccount(id: ProviderType, options: { or: 'redirect', scopes?: string[] }): Promise<OAuthConnection>,\n  getConnectedAccount(id: ProviderType, options?: { or?: 'redirect' | 'throw' | 'return-null', scopes?: string[] }): Promise<OAuthConnection | null>,\n\n  // IF_PLATFORM react-like\n  useConnectedAccount(id: ProviderType, options: { or: 'redirect', scopes?: string[] }): OAuthConnection,\n  useConnectedAccount(id: ProviderType, options?: { or?: 'redirect' | 'throw' | 'return-null', scopes?: string[] }): OAuthConnection | null,\n  // END_PLATFORM\n\n  hasPermission(scope: Team, permissionId: string): Promise<boolean>,\n  hasPermission(permissionId: string): Promise<boolean>,\n\n  getPermission(scope: Team, permissionId: string): Promise<TeamPermission | null>,\n  getPermission(permissionId: string): Promise<TeamPermission | null>,\n\n  listPermissions(scope: Team, options?: { recursive?: boolean }): Promise<TeamPermission[]>,\n  listPermissions(options?: { recursive?: boolean }): Promise<TeamPermission[]>,\n\n  // IF_PLATFORM react-like\n  usePermissions(scope: Team, options?: { recursive?: boolean }): TeamPermission[],\n  usePermissions(options?: { recursive?: boolean }): TeamPermission[],\n\n  usePermission(scope: Team, permissionId: string): TeamPermission | null,\n  usePermission(permissionId: string): TeamPermission | null,\n  // END_PLATFORM\n\n  readonly selectedTeam: Team | null,\n  setSelectedTeam(teamOrId: string | Team | null): Promise<void>,\n  createTeam(data: TeamCreateOptions): Promise<Team>,\n  leaveTeam(team: Team): Promise<void>,\n\n  getActiveSessions(): Promise<ActiveSession[]>,\n  revokeSession(sessionId: string): Promise<void>,\n  getTeamProfile(team: Team): Promise<EditableTeamMemberProfile>,\n  useTeamProfile(team: Team): EditableTeamMemberProfile, // THIS_LINE_PLATFORM react-like\n\n  createApiKey(options: ApiKeyCreationOptions<\"user\">): Promise<UserApiKeyFirstView>,\n\n  useOAuthProviders(): OAuthProvider[], // THIS_LINE_PLATFORM react-like\n  listOAuthProviders(): Promise<OAuthProvider[]>,\n\n  useOAuthProvider(id: string): OAuthProvider | null, // THIS_LINE_PLATFORM react-like\n  getOAuthProvider(id: string): Promise<OAuthProvider | null>,\n\n  registerPasskey(options?: { hostname?: string }): Promise<Result<undefined, KnownErrors[\"PasskeyRegistrationFailed\"] | KnownErrors[\"PasskeyWebAuthnError\"]>>,\n}\n& AsyncStoreProperty<\"apiKeys\", [], UserApiKey[], true>\n& AsyncStoreProperty<\"team\", [id: string], Team | null, false>\n& AsyncStoreProperty<\"teams\", [], Team[], true>\n& AsyncStoreProperty<\"permission\", [scope: Team, permissionId: string, options?: { recursive?: boolean }], TeamPermission | null, false>\n& AsyncStoreProperty<\"permissions\", [scope: Team, options?: { recursive?: boolean }], TeamPermission[], true>;\n\nexport type InternalUserExtra =\n  & {\n    createProject(newProject: AdminProjectCreateOptions): Promise<AdminOwnedProject>,\n    transferProject(projectIdToTransfer: string, newTeamId: string): Promise<void>,\n  }\n  & AsyncStoreProperty<\"ownedProjects\", [], AdminOwnedProject[], true>\n\nexport type User = BaseUser;\n\nexport type CurrentUser = BaseUser & Auth & UserExtra & Customer;\n\nexport type CurrentInternalUser = CurrentUser & InternalUserExtra;\n\nexport type ProjectCurrentUser<ProjectId> = ProjectId extends \"internal\" ? CurrentInternalUser : CurrentUser;\n\nexport type TokenPartialUser = Pick<\n  User,\n  | \"id\"\n  | \"displayName\"\n  | \"primaryEmail\"\n  | \"primaryEmailVerified\"\n  | \"isAnonymous\"\n  | \"isRestricted\"\n  | \"restrictedReason\"\n>\n\nexport type SyncedPartialUser = TokenPartialUser & Pick<\n  User,\n  | \"id\"\n  | \"displayName\"\n  | \"primaryEmail\"\n  | \"primaryEmailVerified\"\n  | \"profileImageUrl\"\n  | \"signedUpAt\"\n  | \"clientMetadata\"\n  | \"clientReadOnlyMetadata\"\n  | \"isAnonymous\"\n  | \"hasPassword\"\n  | \"isRestricted\"\n  | \"restrictedReason\"\n>;\n\n\nexport type ActiveSession = {\n  id: string,\n  userId: string,\n  createdAt: Date,\n  isImpersonation: boolean,\n  lastUsedAt: Date | undefined,\n  isCurrentSession: boolean,\n  geoInfo?: GeoInfo,\n};\n\nexport type UserUpdateOptions = {\n  displayName?: string | null,\n  clientMetadata?: ReadonlyJson,\n  selectedTeamId?: string | null,\n  totpMultiFactorSecret?: Uint8Array | null,\n  profileImageUrl?: string | null,\n  otpAuthEnabled?: boolean,\n  passkeyAuthEnabled?: boolean,\n  primaryEmail?: string | null,\n}\nexport function userUpdateOptionsToCrud(options: UserUpdateOptions): CurrentUserCrud[\"Client\"][\"Update\"] {\n  return {\n    display_name: options.displayName,\n    client_metadata: options.clientMetadata,\n    selected_team_id: options.selectedTeamId,\n    totp_secret_base64: options.totpMultiFactorSecret != null ? encodeBase64(options.totpMultiFactorSecret) : options.totpMultiFactorSecret,\n    profile_image_url: options.profileImageUrl,\n    otp_auth_enabled: options.otpAuthEnabled,\n    passkey_auth_enabled: options.passkeyAuthEnabled,\n    primary_email: options.primaryEmail,\n  };\n}\n\n\nexport type ServerBaseUser = {\n  setPrimaryEmail(email: string | null, options?: { verified?: boolean | undefined }): Promise<void>,\n\n  readonly lastActiveAt: Date,\n\n  readonly serverMetadata: any,\n  setServerMetadata(metadata: any): Promise<void>,\n  setClientReadOnlyMetadata(metadata: any): Promise<void>,\n\n  /** Whether the user is restricted by an administrator. Can be set manually or by sign-up rules. */\n  readonly restrictedByAdmin: boolean,\n  /** Public reason shown to the user explaining why they are restricted. Optional. */\n  readonly restrictedByAdminReason: string | null,\n  /** Private details about the restriction (e.g., which sign-up rule triggered). Only visible to server access and above. */\n  readonly restrictedByAdminPrivateDetails: string | null,\n\n  createTeam(data: Omit<ServerTeamCreateOptions, \"creatorUserId\">): Promise<ServerTeam>,\n\n  useContactChannels(): ServerContactChannel[], // THIS_LINE_PLATFORM react-like\n  listContactChannels(): Promise<ServerContactChannel[]>,\n  createContactChannel(data: ServerContactChannelCreateOptions): Promise<ServerContactChannel>,\n\n  update(user: ServerUserUpdateOptions): Promise<void>,\n\n  grantPermission(scope: Team, permissionId: string): Promise<void>,\n  grantPermission(permissionId: string): Promise<void>,\n\n  revokePermission(scope: Team, permissionId: string): Promise<void>,\n  revokePermission(permissionId: string): Promise<void>,\n\n  getPermission(scope: Team, permissionId: string): Promise<TeamPermission | null>,\n  getPermission(permissionId: string): Promise<TeamPermission | null>,\n\n  hasPermission(scope: Team, permissionId: string): Promise<boolean>,\n  hasPermission(permissionId: string): Promise<boolean>,\n\n  listPermissions(scope: Team, options?: { recursive?: boolean }): Promise<TeamPermission[]>,\n  listPermissions(options?: { recursive?: boolean }): Promise<TeamPermission[]>,\n\n  // IF_PLATFORM react-like\n  usePermissions(scope: Team, options?: { recursive?: boolean }): TeamPermission[],\n  usePermissions(options?: { recursive?: boolean }): TeamPermission[],\n\n  usePermission(scope: Team, permissionId: string): TeamPermission | null,\n  usePermission(permissionId: string): TeamPermission | null,\n  // END_PLATFORM\n\n  useOAuthProviders(): ServerOAuthProvider[], // THIS_LINE_PLATFORM react-like\n  listOAuthProviders(): Promise<ServerOAuthProvider[]>,\n\n  useOAuthProvider(id: string): ServerOAuthProvider | null, // THIS_LINE_PLATFORM react-like\n  getOAuthProvider(id: string): Promise<ServerOAuthProvider | null>,\n\n  /**\n   * Creates a new session object with a refresh token for this user. Can be used to impersonate them.\n   */\n  createSession(options?: { expiresInMillis?: number, isImpersonation?: boolean }): Promise<{\n    getTokens(): Promise<{ accessToken: string | null, refreshToken: string | null }>,\n  }>,\n}\n& AsyncStoreProperty<\"team\", [id: string], ServerTeam | null, false>\n& AsyncStoreProperty<\"teams\", [], ServerTeam[], true>\n& AsyncStoreProperty<\"permission\", [scope: Team, permissionId: string, options?: { direct?: boolean }], AdminTeamPermission | null, false>\n& AsyncStoreProperty<\"permissions\", [scope: Team, options?: { direct?: boolean }], AdminTeamPermission[], true>;\n\n/**\n * A user including sensitive fields that should only be used on the server, never sent to the client\n * (such as sensitive information and serverMetadata).\n */\nexport type ServerUser = ServerBaseUser & BaseUser & UserExtra & Customer<true>;\n\nexport type CurrentServerUser = Auth & ServerUser;\n\nexport type CurrentInternalServerUser = CurrentServerUser & InternalUserExtra;\n\nexport type ProjectCurrentServerUser<ProjectId> = ProjectId extends \"internal\" ? CurrentInternalServerUser : CurrentServerUser;\n\nexport type SyncedPartialServerUser = SyncedPartialUser & Pick<\n  ServerUser,\n  | \"serverMetadata\"\n>;\n\nexport type ServerUserUpdateOptions = {\n  primaryEmail?: string | null,\n  primaryEmailVerified?: boolean,\n  primaryEmailAuthEnabled?: boolean,\n  clientReadOnlyMetadata?: ReadonlyJson,\n  serverMetadata?: ReadonlyJson,\n  password?: string,\n  restrictedByAdmin?: boolean,\n  restrictedByAdminReason?: string | null,\n  restrictedByAdminPrivateDetails?: string | null,\n} & UserUpdateOptions;\nexport function serverUserUpdateOptionsToCrud(options: ServerUserUpdateOptions): CurrentUserCrud[\"Server\"][\"Update\"] {\n  // Base update options\n  const baseUpdate: CurrentUserCrud[\"Server\"][\"Update\"] = {\n    display_name: options.displayName,\n    primary_email: options.primaryEmail,\n    client_metadata: options.clientMetadata,\n    client_read_only_metadata: options.clientReadOnlyMetadata,\n    server_metadata: options.serverMetadata,\n    selected_team_id: options.selectedTeamId,\n    primary_email_auth_enabled: options.primaryEmailAuthEnabled,\n    primary_email_verified: options.primaryEmailVerified,\n    password: options.password,\n    profile_image_url: options.profileImageUrl,\n    totp_secret_base64: options.totpMultiFactorSecret != null ? encodeBase64(options.totpMultiFactorSecret) : options.totpMultiFactorSecret,\n  };\n  // Add admin restriction fields (may not be in generated types yet but will be at runtime)\n  return {\n    ...baseUpdate,\n    restricted_by_admin: options.restrictedByAdmin,\n    restricted_by_admin_reason: options.restrictedByAdminReason,\n    restricted_by_admin_private_details: options.restrictedByAdminPrivateDetails,\n  } as CurrentUserCrud[\"Server\"][\"Update\"];\n}\n\n\nexport type ServerUserCreateOptions = {\n  primaryEmail?: string | null,\n  primaryEmailAuthEnabled?: boolean,\n  password?: string,\n  otpAuthEnabled?: boolean,\n  displayName?: string,\n  primaryEmailVerified?: boolean,\n  clientMetadata?: any,\n  clientReadOnlyMetadata?: any,\n  serverMetadata?: any,\n}\nexport function serverUserCreateOptionsToCrud(options: ServerUserCreateOptions): UsersCrud[\"Server\"][\"Create\"] {\n  return {\n    primary_email: options.primaryEmail,\n    password: options.password,\n    otp_auth_enabled: options.otpAuthEnabled,\n    primary_email_auth_enabled: options.primaryEmailAuthEnabled,\n    display_name: options.displayName,\n    primary_email_verified: options.primaryEmailVerified,\n    client_metadata: options.clientMetadata,\n    client_read_only_metadata: options.clientReadOnlyMetadata,\n    server_metadata: options.serverMetadata,\n  };\n}\n"
-  },
-  {
-    "path": "teams/index.ts",
-    "content": "import { TeamsCrud } from \"@stackframe/stack-shared/dist/interface/crud/teams\";\nimport { ReadonlyJson } from \"@stackframe/stack-shared/dist/utils/json\";\n\nimport { ApiKeyCreationOptions, TeamApiKey, TeamApiKeyFirstView } from \"../api-keys\";\nimport { AsyncStoreProperty } from \"../common\";\nimport { Customer } from \"../customers\";\nimport { ServerUser } from \"../users\";\n\n\nexport type TeamMemberProfile = {\n  displayName: string | null,\n  profileImageUrl: string | null,\n}\n\nexport type TeamMemberProfileUpdateOptions = {\n  displayName?: string,\n  profileImageUrl?: string | null,\n};\n\nexport type EditableTeamMemberProfile = TeamMemberProfile & {\n  update(update: TeamMemberProfileUpdateOptions): Promise<void>,\n}\n\nexport type TeamUser = {\n  id: string,\n  teamProfile: TeamMemberProfile,\n}\n\nexport type TeamInvitation = {\n  id: string,\n  recipientEmail: string | null,\n  expiresAt: Date,\n  revoke(): Promise<void>,\n}\n\nexport type Team = {\n  id: string,\n  displayName: string,\n  profileImageUrl: string | null,\n  clientMetadata: any,\n  clientReadOnlyMetadata: any,\n  inviteUser(options: { email: string, callbackUrl?: string }): Promise<void>,\n  listUsers(): Promise<TeamUser[]>,\n  useUsers(): TeamUser[], // THIS_LINE_PLATFORM react-like\n  listInvitations(): Promise<TeamInvitation[]>,\n  useInvitations(): TeamInvitation[], // THIS_LINE_PLATFORM react-like\n  update(update: TeamUpdateOptions): Promise<void>,\n  delete(): Promise<void>,\n  createApiKey(options: ApiKeyCreationOptions<\"team\">): Promise<TeamApiKeyFirstView>,\n} & AsyncStoreProperty<\"apiKeys\", [], TeamApiKey[], true> & Customer;\n\nexport type TeamUpdateOptions = {\n  displayName?: string,\n  profileImageUrl?: string | null,\n  clientMetadata?: ReadonlyJson,\n};\nexport function teamUpdateOptionsToCrud(options: TeamUpdateOptions): TeamsCrud[\"Client\"][\"Update\"] {\n  return {\n    display_name: options.displayName,\n    profile_image_url: options.profileImageUrl,\n    client_metadata: options.clientMetadata,\n  };\n}\n\nexport type TeamCreateOptions = {\n  displayName: string,\n  profileImageUrl?: string,\n}\nexport function teamCreateOptionsToCrud(options: TeamCreateOptions, creatorUserId: string): TeamsCrud[\"Client\"][\"Create\"] {\n  return {\n    display_name: options.displayName,\n    profile_image_url: options.profileImageUrl,\n    creator_user_id: creatorUserId,\n  };\n}\n\n\nexport type ServerTeamMemberProfile = TeamMemberProfile;\n\nexport type ServerTeamUser = ServerUser & {\n  teamProfile: ServerTeamMemberProfile,\n}\n\nexport type ServerTeam = {\n  createdAt: Date,\n  serverMetadata: any,\n  listUsers(): Promise<ServerTeamUser[]>,\n  useUsers(): ServerUser[], // THIS_LINE_PLATFORM react-like\n  update(update: ServerTeamUpdateOptions): Promise<void>,\n  delete(): Promise<void>,\n  addUser(userId: string): Promise<void>,\n  inviteUser(options: { email: string, callbackUrl?: string }): Promise<void>,\n  removeUser(userId: string): Promise<void>,\n} & Team;\n\nexport type ServerListUsersOptions = {\n  cursor?: string,\n  limit?: number,\n  orderBy?: 'signedUpAt',\n  desc?: boolean,\n  query?: string,\n  /**\n   * Whether to include restricted users (users who haven't completed onboarding requirements).\n   * Defaults to false.\n   */\n  includeRestricted?: boolean,\n  /**\n   * Whether to include anonymous users (and restricted users).\n   * Defaults to false.\n   */\n  includeAnonymous?: boolean,\n};\n\nexport type ServerTeamCreateOptions = TeamCreateOptions & {\n  creatorUserId?: string,\n};\nexport function serverTeamCreateOptionsToCrud(options: ServerTeamCreateOptions): TeamsCrud[\"Server\"][\"Create\"] {\n  return {\n    display_name: options.displayName,\n    profile_image_url: options.profileImageUrl,\n    creator_user_id: options.creatorUserId,\n  };\n}\n\nexport type ServerTeamUpdateOptions = TeamUpdateOptions & {\n  clientReadOnlyMetadata?: ReadonlyJson,\n  serverMetadata?: ReadonlyJson,\n};\nexport function serverTeamUpdateOptionsToCrud(options: ServerTeamUpdateOptions): TeamsCrud[\"Server\"][\"Update\"] {\n  return {\n    display_name: options.displayName,\n    profile_image_url: options.profileImageUrl,\n    client_metadata: options.clientMetadata,\n    client_read_only_metadata: options.clientReadOnlyMetadata,\n    server_metadata: options.serverMetadata,\n  };\n}\n"
-  },
-  {
-    "path": "projects/index.ts",
-    "content": "import { ProductionModeError } from \"@stackframe/stack-shared/dist/helpers/production-mode\";\nimport { AdminUserProjectsCrud, ProjectsCrud } from \"@stackframe/stack-shared/dist/interface/crud/projects\";\n\nimport { CompleteConfig, EnvironmentConfigNormalizedOverride, EnvironmentConfigOverrideOverride } from \"@stackframe/stack-shared/dist/config/schema\";\nimport { StackAdminApp } from \"../apps/interfaces/admin-app\";\nimport { AdminProjectConfig, AdminProjectConfigUpdateOptions, ProjectConfig } from \"../project-configs\";\n\n/**\n * SDK type for pushed config source (camelCase for SDK).\n * Represents where the branch config was pushed from.\n */\nexport type PushedConfigSource =\n  | { type: \"pushed-from-github\", owner: string, repo: string, branch: string, commitHash: string, configFilePath: string }\n  | { type: \"pushed-from-unknown\" }\n  | { type: \"unlinked\" };\n\nexport type PushConfigOptions = {\n  /**\n   * The source of this config push.\n   */\n  source: PushedConfigSource,\n};\n\n\nexport type Project = {\n  readonly id: string,\n  readonly displayName: string,\n  readonly config: ProjectConfig,\n};\n\nexport type AdminProject = {\n  readonly id: string,\n  readonly displayName: string,\n  readonly description: string | null,\n  readonly createdAt: Date,\n  readonly isProductionMode: boolean,\n  readonly ownerTeamId: string | null,\n  readonly logoUrl: string | null | undefined,\n  readonly logoFullUrl: string | null | undefined,\n  readonly logoDarkModeUrl: string | null | undefined,\n  readonly logoFullDarkModeUrl: string | null | undefined,\n\n  readonly config: AdminProjectConfig,\n\n  update(this: AdminProject, update: AdminProjectUpdateOptions): Promise<void>,\n  delete(this: AdminProject): Promise<void>,\n\n  getConfig(this: AdminProject): Promise<CompleteConfig>,\n  // NEXT_LINE_PLATFORM react-like\n  useConfig(this: AdminProject): CompleteConfig,\n\n  /**\n   * Updates the environment's config by merging the provided config into the existing config.\n   *\n   * Changes made with `updateConfig` always take precedence over those made with `pushConfig`, even if the `pushConfig`\n   * config was pushed after the changes were made with `updateConfig`. This is best for environment-specific\n   * configuration like secrets, API keys, and other values that you wouldn't push into a source repository.\n   */\n  // We have some strict types here in order to prevent accidental overwriting of a top-level property of a config object\n  updateConfig(\n    this: AdminProject,\n    config: EnvironmentConfigOverrideOverride & {\n      [K in keyof EnvironmentConfigNormalizedOverride]: \"............................ERROR MESSAGE AFTER THIS LINE............................ You have attempted to update a config object with a top-level property in it (for example `emails`). This is very likely a mistake, and you probably meant to update a nested property instead (for example `emails.server`). If you really meant to update a top-level property (resetting all nested properties to their defaults), cast as any (the code will work at runtime) ............................ERROR MESSAGE BEFORE THIS LINE............................\";\n    }\n  ): Promise<void>,\n\n  /**\n   * Pushes a config, replacing any previous config pushed with `pushConfig`.\n   *\n   * **Note:** This function does **not** replace any changes made with `updateConfig`. Changes made with\n   * `updateConfig` always take precedence over those made with `pushConfig`, even if the `pushConfig`\n   * config was pushed after the changes were made with `updateConfig`.\n   *\n   * This is useful for programmatically deploying configuration. More often than not, you'll want to use\n   * `updateConfig` instead.\n   */\n  pushConfig(\n    this: AdminProject,\n    config: EnvironmentConfigOverrideOverride & {\n      [K in keyof EnvironmentConfigNormalizedOverride]: \"............................ERROR MESSAGE AFTER THIS LINE............................ You have attempted to update a config object with a top-level property in it (for example `emails`). This is very likely a mistake, and you probably meant to update a nested property instead (for example `emails.server`). If you really meant to update a top-level property (resetting all nested properties to their defaults), cast as any (the code will work at runtime) ............................ERROR MESSAGE BEFORE THIS LINE............................\";\n    },\n    options: PushConfigOptions,\n  ): Promise<void>,\n\n  /**\n   * Updates the pushed config by merging the provided config into the existing pushed config.\n   *\n   * **Warning:** This is almost always **not** the function you want to call. Changes made with\n   * `updatePushedConfig` will be replaced entirely the next time `pushConfig` is called. Consider using\n   * `pushConfig` to set the full pushed config, or `updateConfig` for environment-specific values that\n   * should persist across pushes.\n   *\n   * This function is useful for making temporary modifications to the pushed config before the next push.\n   */\n  updatePushedConfig(\n    this: AdminProject,\n    config: EnvironmentConfigOverrideOverride & {\n      [K in keyof EnvironmentConfigNormalizedOverride]: \"............................ERROR MESSAGE AFTER THIS LINE............................ You have attempted to update a config object with a top-level property in it (for example `emails`). This is very likely a mistake, and you probably meant to update a nested property instead (for example `emails.server`). If you really meant to update a top-level property (resetting all nested properties to their defaults), cast as any (the code will work at runtime) ............................ERROR MESSAGE BEFORE THIS LINE............................\";\n    }\n  ): Promise<void>,\n\n  /**\n   * Gets the source metadata for the pushed config, indicating where it was pushed from.\n   *\n   * The source can be:\n   * - `pushed-from-github`: Config was pushed from a GitHub repository\n   * - `pushed-from-unknown`: Config was pushed via CLI but source details unknown\n   * - `unlinked`: Config can be edited directly on the dashboard\n   */\n  getPushedConfigSource(this: AdminProject): Promise<PushedConfigSource>,\n\n  /**\n   * Unlinks the pushed config source, setting it to \"unlinked\".\n   * This allows the config to be edited directly on the dashboard without external push restrictions.\n   */\n  unlinkPushedConfigSource(this: AdminProject): Promise<void>,\n\n  getProductionModeErrors(this: AdminProject): Promise<ProductionModeError[]>,\n  // NEXT_LINE_PLATFORM react-like\n  useProductionModeErrors(this: AdminProject): ProductionModeError[],\n} & Project;\n\nexport type AdminOwnedProject = {\n  readonly app: StackAdminApp<false>,\n} & AdminProject;\n\nexport type AdminProjectUpdateOptions = {\n  displayName?: string,\n  description?: string,\n  isProductionMode?: boolean,\n  logoUrl?: string | null,\n  logoFullUrl?: string | null,\n  logoDarkModeUrl?: string | null,\n  logoFullDarkModeUrl?: string | null,\n  config?: AdminProjectConfigUpdateOptions,\n};\nexport function adminProjectUpdateOptionsToCrud(options: AdminProjectUpdateOptions): ProjectsCrud[\"Admin\"][\"Update\"] {\n  return {\n    display_name: options.displayName,\n    description: options.description,\n    is_production_mode: options.isProductionMode,\n    logo_url: options.logoUrl,\n    logo_full_url: options.logoFullUrl,\n    logo_dark_mode_url: options.logoDarkModeUrl,\n    logo_full_dark_mode_url: options.logoFullDarkModeUrl,\n    /**\n     * NOTE: Do not update this config anymore. It's been superseded by the new config in schema.ts.\n     * @deprecated\n     */\n    config: {\n      domains: options.config?.domains?.map((d) => ({\n        domain: d.domain,\n        handler_path: d.handlerPath\n      })),\n      oauth_providers: options.config?.oauthProviders?.map((p) => ({\n        id: p.id as any,\n        type: p.type,\n        ...(p.type === 'standard' && {\n          client_id: p.clientId,\n          client_secret: p.clientSecret,\n          facebook_config_id: p.facebookConfigId,\n          microsoft_tenant_id: p.microsoftTenantId,\n          apple_bundle_ids: p.appleBundleIds,\n        }),\n      })),\n      email_config: options.config?.emailConfig && (\n        options.config.emailConfig.type === 'shared' ? {\n          type: 'shared',\n        } : {\n          type: 'standard',\n          host: options.config.emailConfig.host,\n          port: options.config.emailConfig.port,\n          username: options.config.emailConfig.username,\n          password: options.config.emailConfig.password,\n          sender_name: options.config.emailConfig.senderName,\n          sender_email: options.config.emailConfig.senderEmail,\n        }\n      ),\n      email_theme: options.config?.emailTheme,\n      sign_up_enabled: options.config?.signUpEnabled,\n      credential_enabled: options.config?.credentialEnabled,\n      magic_link_enabled: options.config?.magicLinkEnabled,\n      passkey_enabled: options.config?.passkeyEnabled,\n      allow_localhost: options.config?.allowLocalhost,\n      create_team_on_sign_up: options.config?.createTeamOnSignUp,\n      client_team_creation_enabled: options.config?.clientTeamCreationEnabled,\n      client_user_deletion_enabled: options.config?.clientUserDeletionEnabled,\n      team_creator_default_permissions: options.config?.teamCreatorDefaultPermissions,\n      team_member_default_permissions: options.config?.teamMemberDefaultPermissions,\n      user_default_permissions: options.config?.userDefaultPermissions,\n      oauth_account_merge_strategy: options.config?.oauthAccountMergeStrategy,\n      allow_user_api_keys: options.config?.allowUserApiKeys,\n      allow_team_api_keys: options.config?.allowTeamApiKeys,\n    },\n  };\n}\n\nexport type AdminProjectCreateOptions = Omit<AdminProjectUpdateOptions, 'displayName'> & {\n  displayName: string,\n  teamId: string,\n};\nexport function adminProjectCreateOptionsToCrud(options: AdminProjectCreateOptions): AdminUserProjectsCrud[\"Server\"][\"Create\"] {\n  return {\n    ...adminProjectUpdateOptionsToCrud(options),\n    display_name: options.displayName,\n    owner_team_id: options.teamId,\n  };\n}\n"
-  },
-  {
-    "path": "project-configs/index.ts",
-    "content": "import { AdminTeamPermission } from \"../permissions\";\n\nexport type ProjectConfig = {\n  readonly signUpEnabled: boolean,\n  readonly credentialEnabled: boolean,\n  readonly magicLinkEnabled: boolean,\n  readonly passkeyEnabled: boolean,\n  readonly clientTeamCreationEnabled: boolean,\n  readonly clientUserDeletionEnabled: boolean,\n  readonly oauthProviders: OAuthProviderConfig[],\n  readonly allowUserApiKeys: boolean,\n  readonly allowTeamApiKeys: boolean,\n};\n\nexport type OAuthProviderConfig = {\n  readonly id: string,\n};\n\n/**\n * @deprecated This type is deprecated. Use the new config override setup instead.\n */\nexport type AdminProjectConfig = {\n  readonly signUpEnabled: boolean,\n  readonly credentialEnabled: boolean,\n  readonly magicLinkEnabled: boolean,\n  readonly passkeyEnabled: boolean,\n  readonly clientTeamCreationEnabled: boolean,\n  readonly clientUserDeletionEnabled: boolean,\n  readonly allowLocalhost: boolean,\n  readonly oauthProviders: AdminOAuthProviderConfig[],\n  readonly emailConfig?: AdminEmailConfig,\n  readonly emailTheme: string,\n  readonly domains: AdminDomainConfig[],\n  readonly createTeamOnSignUp: boolean,\n  readonly teamCreatorDefaultPermissions: AdminTeamPermission[],\n  readonly teamMemberDefaultPermissions: AdminTeamPermission[],\n  readonly userDefaultPermissions: AdminTeamPermission[],\n  readonly oauthAccountMergeStrategy: 'link_method' | 'raise_error' | 'allow_duplicates',\n  readonly allowUserApiKeys: boolean,\n  readonly allowTeamApiKeys: boolean,\n};\n\nexport type AdminEmailConfig = (\n  {\n    type: \"standard\" | \"resend\",\n    senderName: string,\n    senderEmail: string,\n    host: string,\n    port: number,\n    username: string,\n    password: string,\n  }\n  | {\n    type: \"shared\",\n  }\n);\n\nexport type AdminDomainConfig = {\n  domain: string,\n  handlerPath: string,\n};\n\nexport type AdminOAuthProviderConfig = {\n  id: string,\n} & (\n    | { type: 'shared' }\n    | {\n      type: 'standard',\n      clientId: string,\n      clientSecret: string,\n      facebookConfigId?: string,\n      microsoftTenantId?: string,\n      appleBundleIds?: string[],\n    }\n  ) & OAuthProviderConfig;\n\nexport type AdminProjectConfigUpdateOptions = {\n  domains?: {\n    domain: string,\n    handlerPath: string,\n  }[],\n  oauthProviders?: AdminOAuthProviderConfig[],\n  signUpEnabled?: boolean,\n  credentialEnabled?: boolean,\n  magicLinkEnabled?: boolean,\n  passkeyEnabled?: boolean,\n  clientTeamCreationEnabled?: boolean,\n  clientUserDeletionEnabled?: boolean,\n  allowLocalhost?: boolean,\n  createTeamOnSignUp?: boolean,\n  emailConfig?: AdminEmailConfig,\n  emailTheme?: string,\n  teamCreatorDefaultPermissions?: { id: string }[],\n  teamMemberDefaultPermissions?: { id: string }[],\n  userDefaultPermissions?: { id: string }[],\n  oauthAccountMergeStrategy?: 'link_method' | 'raise_error' | 'allow_duplicates',\n  allowUserApiKeys?: boolean,\n  allowTeamApiKeys?: boolean,\n};\n"
-  },
-  {
-    "path": "permissions/index.ts",
-    "content": "import { ProjectPermissionDefinitionsCrud } from \"@stackframe/stack-shared/dist/interface/crud/project-permissions\";\nimport { TeamPermissionDefinitionsCrud } from \"@stackframe/stack-shared/dist/interface/crud/team-permissions\";\n\n\nexport type TeamPermission = {\n  id: string,\n};\n\nexport type AdminTeamPermission = TeamPermission;\n\nexport type AdminTeamPermissionDefinition = {\n  id: string,\n  description?: string,\n  containedPermissionIds: string[],\n  isDefaultUserPermission?: boolean,\n};\n\nexport type AdminTeamPermissionDefinitionCreateOptions = {\n  id: string,\n  description?: string,\n  containedPermissionIds: string[],\n  isDefaultUserPermission?: boolean,\n};\nexport function adminTeamPermissionDefinitionCreateOptionsToCrud(options: AdminTeamPermissionDefinitionCreateOptions): TeamPermissionDefinitionsCrud[\"Admin\"][\"Create\"] {\n  return {\n    id: options.id,\n    description: options.description,\n    contained_permission_ids: options.containedPermissionIds,\n  };\n}\n\nexport type AdminTeamPermissionDefinitionUpdateOptions = Pick<Partial<AdminTeamPermissionDefinitionCreateOptions>, \"description\" | \"containedPermissionIds\">;\nexport function adminTeamPermissionDefinitionUpdateOptionsToCrud(options: AdminTeamPermissionDefinitionUpdateOptions): TeamPermissionDefinitionsCrud[\"Admin\"][\"Update\"] {\n  return {\n    description: options.description,\n    contained_permission_ids: options.containedPermissionIds,\n  };\n}\n\nexport type ProjectPermission = {\n  id: string,\n};\n\nexport type AdminProjectPermission = ProjectPermission;\n\nexport type AdminProjectPermissionDefinition = {\n  id: string,\n  description?: string,\n  containedPermissionIds: string[],\n};\n\nexport type AdminProjectPermissionDefinitionCreateOptions = {\n  id: string,\n  description?: string,\n  containedPermissionIds: string[],\n};\nexport function adminProjectPermissionDefinitionCreateOptionsToCrud(options: AdminProjectPermissionDefinitionCreateOptions): ProjectPermissionDefinitionsCrud[\"Admin\"][\"Create\"] {\n  return {\n    id: options.id,\n    description: options.description,\n    contained_permission_ids: options.containedPermissionIds,\n  };\n}\n\nexport type AdminProjectPermissionDefinitionUpdateOptions = Pick<Partial<AdminProjectPermissionDefinitionCreateOptions>, \"description\" | \"containedPermissionIds\">;\nexport function adminProjectPermissionDefinitionUpdateOptionsToCrud(options: AdminProjectPermissionDefinitionUpdateOptions): ProjectPermissionDefinitionsCrud[\"Admin\"][\"Update\"] {\n  return {\n    description: options.description,\n    contained_permission_ids: options.containedPermissionIds,\n  };\n}\n"
-  },
-  {
-    "path": "notification-categories/index.ts",
-    "content": "export type NotificationCategory = {\n  id: string,\n  name: string,\n  enabled: boolean,\n  canDisable: boolean,\n\n  setEnabled(enabled: boolean): Promise<void>,\n}\n"
-  },
-  {
-    "path": "internal-api-keys/index.ts",
-    "content": "\nimport { InternalApiKeyCreateCrudRequest } from \"@stackframe/stack-shared/dist/interface/admin-interface\";\nimport { InternalApiKeysCrud } from \"@stackframe/stack-shared/dist/interface/crud/internal-api-keys\";\n\nexport type InternalApiKeyBase = {\n  id: string,\n  description: string,\n  expiresAt: Date,\n  manuallyRevokedAt: Date | null,\n  createdAt: Date,\n  isValid(): boolean,\n  whyInvalid(): \"expired\" | \"manually-revoked\" | null,\n  revoke(): Promise<void>,\n};\n\nexport type InternalApiKeyBaseCrudRead = Pick<InternalApiKeysCrud[\"Admin\"][\"Read\"], \"id\" | \"created_at_millis\" | \"description\" | \"expires_at_millis\" | \"manually_revoked_at_millis\">;\n\nexport type InternalApiKeyFirstView = {\n  publishableClientKey?: string,\n  secretServerKey?: string,\n  superSecretAdminKey?: string,\n} & InternalApiKeyBase;\n\nexport type InternalApiKey = {\n  publishableClientKey: null | {\n    lastFour: string,\n  },\n  secretServerKey: null | {\n    lastFour: string,\n  },\n  superSecretAdminKey: null | {\n    lastFour: string,\n  },\n} & InternalApiKeyBase;\n\nexport type InternalApiKeyCreateOptions = {\n  description: string,\n  expiresAt: Date,\n  hasPublishableClientKey: boolean,\n  hasSecretServerKey: boolean,\n  hasSuperSecretAdminKey: boolean,\n};\nexport function internalApiKeyCreateOptionsToCrud(options: InternalApiKeyCreateOptions): InternalApiKeyCreateCrudRequest {\n  return {\n    description: options.description,\n    expires_at_millis: options.expiresAt.getTime(),\n    has_publishable_client_key: options.hasPublishableClientKey,\n    has_secret_server_key: options.hasSecretServerKey,\n    has_super_secret_admin_key: options.hasSuperSecretAdminKey,\n  };\n}\n"
-  },
-  {
-    "path": "customers/index.ts",
-    "content": "import { inlineProductSchema } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport * as yup from \"yup\";\nimport { AsyncStoreProperty } from \"../common\";\n\nexport type InlineProduct = yup.InferType<typeof inlineProductSchema>;\n\nexport type Item = {\n  displayName: string,\n  /**\n   * May be negative.\n   */\n  quantity: number,\n  /**\n   * Equal to Math.max(0, quantity).\n   */\n  nonNegativeQuantity: number,\n};\n\nexport type ServerItem = Item & {\n  increaseQuantity(amount: number): Promise<void>,\n  /**\n   * Decreases the quantity by the given amount.\n   *\n   * Note that you may want to use tryDecreaseQuantity instead, as it will prevent the quantity from going below 0 in a race-condition-free way.\n   */\n  decreaseQuantity(amount: number): Promise<void>,\n  /**\n   * Decreases the quantity by the given amount and returns true if the result is non-negative; returns false and does nothing if the result would be negative.\n   *\n   * Most useful for pre-paid credits.\n   */\n  tryDecreaseQuantity(amount: number): Promise<boolean>,\n};\n\nexport type CustomerProduct = {\n  id: string | null,\n  quantity: number,\n  displayName: string,\n  customerType: \"user\" | \"team\" | \"custom\",\n  isServerOnly: boolean,\n  stackable: boolean,\n  type: \"one_time\" | \"subscription\",\n  subscription: null | {\n    currentPeriodEnd: Date | null,\n    cancelAtPeriodEnd: boolean,\n    isCancelable: boolean,\n  },\n  switchOptions?: Array<{\n    productId: string,\n    displayName: string,\n    prices: InlineProduct[\"prices\"],\n  }>,\n};\n\nexport type CustomerProductsList = CustomerProduct[] & {\n  nextCursor: string | null,\n};\n\nexport type CustomerProductsListOptions = {\n  cursor?: string,\n  limit?: number,\n};\n\nexport type CustomerProductsRequestOptions =\n  | ({ userId: string } & CustomerProductsListOptions)\n  | ({ teamId: string } & CustomerProductsListOptions)\n  | ({ customCustomerId: string } & CustomerProductsListOptions);\n\nexport type CustomerInvoiceStatus = \"draft\" | \"open\" | \"paid\" | \"uncollectible\" | \"void\" | null;\n\nexport type CustomerInvoice = {\n  createdAt: Date,\n  status: CustomerInvoiceStatus,\n  amountTotal: number,\n  hostedInvoiceUrl: string | null,\n};\n\nexport type CustomerInvoicesList = CustomerInvoice[] & {\n  nextCursor: string | null,\n};\n\nexport type CustomerInvoicesListOptions = {\n  cursor?: string,\n  limit?: number,\n};\n\nexport type CustomerInvoicesRequestOptions =\n  | ({ userId: string } & CustomerInvoicesListOptions)\n  | ({ teamId: string } & CustomerInvoicesListOptions);\n\nexport type CustomerDefaultPaymentMethod = {\n  id: string,\n  brand: string | null,\n  last4: string | null,\n  exp_month: number | null,\n  exp_year: number | null,\n} | null;\n\nexport type CustomerBilling = {\n  hasCustomer: boolean,\n  defaultPaymentMethod: CustomerDefaultPaymentMethod,\n};\n\nexport type CustomerPaymentMethodSetupIntent = {\n  clientSecret: string,\n  stripeAccountId: string,\n};\n\nexport type Customer<IsServer extends boolean = false> =\n  & {\n    readonly id: string,\n\n    createCheckoutUrl(options: (\n      | { productId: string, returnUrl?: string }\n      | (IsServer extends true ? { product: InlineProduct, returnUrl?: string } : never)\n    )): Promise<string>,\n\n    createPaymentMethodSetupIntent(): Promise<CustomerPaymentMethodSetupIntent>,\n\n    setDefaultPaymentMethodFromSetupIntent(setupIntentId: string): Promise<CustomerDefaultPaymentMethod>,\n\n    switchSubscription(options: { fromProductId: string, toProductId: string, priceId?: string, quantity?: number }): Promise<void>,\n  }\n  & AsyncStoreProperty<\n    \"billing\",\n    [],\n    CustomerBilling,\n    false\n  >\n  & AsyncStoreProperty<\n    \"item\",\n    [itemId: string],\n    IsServer extends true ? ServerItem : Item,\n    false\n  >\n  & AsyncStoreProperty<\n    \"products\",\n    [options?: CustomerProductsListOptions],\n    CustomerProductsList,\n    true\n  >\n  & AsyncStoreProperty<\n    \"invoices\",\n    [options?: CustomerInvoicesListOptions],\n    CustomerInvoicesList,\n    true\n  >\n  & (IsServer extends true ? {\n    grantProduct(\n      product: { productId: string, quantity?: number } | { product: InlineProduct, quantity?: number },\n    ): Promise<void>,\n  } : {});\n"
-  },
-  {
-    "path": "contact-channels/index.ts",
-    "content": "import { ContactChannelsCrud } from \"@stackframe/stack-shared/dist/interface/crud/contact-channels\";\n\n\nexport type ContactChannel = {\n  id: string,\n  value: string,\n  type: 'email',\n  isPrimary: boolean,\n  isVerified: boolean,\n  usedForAuth: boolean,\n\n  sendVerificationEmail(options?: { callbackUrl?: string }): Promise<void>,\n  update(data: ContactChannelUpdateOptions): Promise<void>,\n  delete(): Promise<void>,\n}\n\nexport type ContactChannelCreateOptions = {\n  value: string,\n  type: 'email',\n  usedForAuth: boolean,\n  isPrimary?: boolean,\n}\n\nexport function contactChannelCreateOptionsToCrud(userId: string, options: ContactChannelCreateOptions): ContactChannelsCrud[\"Client\"][\"Create\"] {\n  return {\n    value: options.value,\n    type: options.type,\n    used_for_auth: options.usedForAuth,\n    is_primary: options.isPrimary,\n    user_id: userId,\n  };\n}\n\nexport type ContactChannelUpdateOptions = {\n  usedForAuth?: boolean,\n  value?: string,\n  isPrimary?: boolean,\n}\n\nexport function contactChannelUpdateOptionsToCrud(options: ContactChannelUpdateOptions): ContactChannelsCrud[\"Client\"][\"Update\"] {\n  return {\n    value: options.value,\n    used_for_auth: options.usedForAuth,\n    is_primary: options.isPrimary,\n  };\n}\n\nexport type ServerContactChannel = ContactChannel & {\n  update(data: ServerContactChannelUpdateOptions): Promise<void>,\n}\nexport type ServerContactChannelUpdateOptions = ContactChannelUpdateOptions & {\n  isVerified?: boolean,\n}\n\nexport function serverContactChannelUpdateOptionsToCrud(options: ServerContactChannelUpdateOptions): ContactChannelsCrud[\"Server\"][\"Update\"] {\n  return {\n    value: options.value,\n    is_verified: options.isVerified,\n    used_for_auth: options.usedForAuth,\n    is_primary: options.isPrimary,\n  };\n}\n\nexport type ServerContactChannelCreateOptions = ContactChannelCreateOptions & {\n  isVerified?: boolean,\n}\nexport function serverContactChannelCreateOptionsToCrud(userId: string, options: ServerContactChannelCreateOptions): ContactChannelsCrud[\"Server\"][\"Create\"] {\n  return {\n    type: options.type,\n    value: options.value,\n    is_verified: options.isVerified,\n    user_id: userId,\n    used_for_auth: options.usedForAuth,\n    is_primary: options.isPrimary,\n  };\n}\n"
-  },
-  {
-    "path": "connected-accounts/index.ts",
-    "content": "\n\nexport type Connection = {\n  id: string,\n};\n\nexport type OAuthConnection = {\n  getAccessToken(): Promise<{ accessToken: string }>,\n  useAccessToken(): { accessToken: string }, // THIS_LINE_PLATFORM react-like\n} & Connection;\n"
-  },
-  {
-    "path": "email-templates/index.ts",
-    "content": "import { EmailTemplateCrud, EmailTemplateType } from \"@stackframe/stack-shared/dist/interface/crud/email-templates\";\n\n\nexport type AdminEmailTemplate = {\n  type: EmailTemplateType,\n  subject: string,\n  content: any,\n  isDefault: boolean,\n}\n\nexport type AdminEmailTemplateUpdateOptions = {\n  subject?: string,\n  content?: any,\n};\nexport function adminEmailTemplateUpdateOptionsToCrud(options: AdminEmailTemplateUpdateOptions): EmailTemplateCrud['Admin']['Update'] {\n  return {\n    subject: options.subject,\n    content: options.content,\n  };\n}\n"
-  },
-  {
-    "path": "email/index.ts",
-    "content": "import { XOR } from \"@stackframe/stack-shared/dist/utils/types\";\n\nexport type AdminSentEmail = {\n  id: string,\n  to: string[],\n  subject: string,\n  recipient: string, // We'll derive this from to[0] for display\n  sentAt: Date, // We'll derive this from sent_at_millis for display\n  error?: unknown,\n}\n\nexport type AdminEmailOutboxRecipient =\n  | { type: \"user-primary-email\", userId: string }\n  | { type: \"user-custom-emails\", userId: string, emails: string[] }\n  | { type: \"custom-emails\", emails: string[] };\n\nexport type AdminEmailOutboxStatus =\n  | \"paused\"\n  | \"preparing\"\n  | \"rendering\"\n  | \"render-error\"\n  | \"scheduled\"\n  | \"queued\"\n  | \"sending\"\n  | \"server-error\"\n  | \"skipped\"\n  | \"bounced\"\n  | \"delivery-delayed\"\n  | \"sent\"\n  | \"opened\"\n  | \"clicked\"\n  | \"marked-as-spam\";\n\nexport type AdminEmailOutboxSimpleStatus =\n  | \"in-progress\"\n  | \"ok\"\n  | \"error\";\n\n// =============================== BASE TYPES ===============================\n\n// Base fields present on all emails\ntype AdminEmailOutboxBase = {\n  id: string,\n  createdAt: Date,\n  updatedAt: Date,\n  to: AdminEmailOutboxRecipient,\n  scheduledAt: Date,\n  isPaused: false,\n  hasRendered: false,\n  hasDelivered: false,\n};\n\n// Fields available after rendering completes successfully\n// Use Omit to properly override hasRendered from base\ntype AdminEmailOutboxRenderedFields = Omit<AdminEmailOutboxBase, \"hasRendered\"> & {\n  hasRendered: true,\n  startedRenderingAt: Date,\n  renderedAt: Date,\n  subject: string,\n  html: string | null,\n  text: string | null,\n  isTransactional: boolean,\n  isHighPriority: boolean,\n  notificationCategoryId: string | null,\n};\n\n// Fields available after sending starts\ntype AdminEmailOutboxStartedSendingFields = AdminEmailOutboxRenderedFields & {\n  startedSendingAt: Date,\n};\n\n// Fields available after delivery completes\n// Use Omit to properly override hasDelivered from base (inherited through chain)\ntype AdminEmailOutboxFinishedDeliveringFields = Omit<AdminEmailOutboxStartedSendingFields, \"hasDelivered\"> & {\n  hasDelivered: true,\n  deliveredAt: Date,\n};\n\n// =============================== STATUS-SPECIFIC TYPES ===============================\n\n// Use Omit to properly override isPaused from base\nexport type AdminEmailOutboxPaused = Omit<AdminEmailOutboxBase, \"isPaused\"> & {\n  status: \"paused\",\n  simpleStatus: \"in-progress\",\n  isPaused: true,\n};\n\nexport type AdminEmailOutboxPreparing = AdminEmailOutboxBase & {\n  status: \"preparing\",\n  simpleStatus: \"in-progress\",\n};\n\nexport type AdminEmailOutboxRendering = AdminEmailOutboxBase & {\n  status: \"rendering\",\n  simpleStatus: \"in-progress\",\n  startedRenderingAt: Date,\n};\n\nexport type AdminEmailOutboxRenderError = AdminEmailOutboxBase & {\n  status: \"render-error\",\n  simpleStatus: \"error\",\n  startedRenderingAt: Date,\n  renderedAt: Date,\n  renderError: string,\n};\n\nexport type AdminEmailOutboxScheduled = AdminEmailOutboxRenderedFields & {\n  status: \"scheduled\",\n  simpleStatus: \"in-progress\",\n};\n\nexport type AdminEmailOutboxQueued = AdminEmailOutboxRenderedFields & {\n  status: \"queued\",\n  simpleStatus: \"in-progress\",\n};\n\nexport type AdminEmailOutboxSending = AdminEmailOutboxStartedSendingFields & {\n  status: \"sending\",\n  simpleStatus: \"in-progress\",\n};\n\nexport type AdminEmailOutboxServerError = AdminEmailOutboxStartedSendingFields & {\n  status: \"server-error\",\n  simpleStatus: \"error\",\n  errorAt: Date,\n  serverError: string,\n};\n\n// SKIPPED can happen at any time, so rendering/sending fields are optional\n// Use Omit to properly override hasRendered from base (can be true or false when skipped)\nexport type AdminEmailOutboxSkipped = Omit<AdminEmailOutboxBase, \"hasRendered\"> & {\n  status: \"skipped\",\n  simpleStatus: \"ok\",\n  hasRendered: boolean,\n  skippedAt: Date,\n  skippedReason: string,\n  skippedDetails: Record<string, unknown>,\n  // Optional fields depending on when skipped\n  startedRenderingAt?: Date,\n  renderedAt?: Date,\n  subject?: string,\n  html?: string | null,\n  text?: string | null,\n  isTransactional?: boolean,\n  isHighPriority?: boolean,\n  notificationCategoryId?: string | null,\n  startedSendingAt?: Date,\n};\n\nexport type AdminEmailOutboxBounced = AdminEmailOutboxStartedSendingFields & {\n  status: \"bounced\",\n  simpleStatus: \"error\",\n  bouncedAt: Date,\n};\n\nexport type AdminEmailOutboxDeliveryDelayed = AdminEmailOutboxStartedSendingFields & {\n  status: \"delivery-delayed\",\n  simpleStatus: \"ok\",\n  deliveryDelayedAt: Date,\n};\n\nexport type AdminEmailOutboxSent = AdminEmailOutboxFinishedDeliveringFields & {\n  status: \"sent\",\n  simpleStatus: \"ok\",\n  canHaveDeliveryInfo: boolean,\n};\n\nexport type AdminEmailOutboxOpened = AdminEmailOutboxFinishedDeliveringFields & {\n  status: \"opened\",\n  simpleStatus: \"ok\",\n  openedAt: Date,\n  canHaveDeliveryInfo: true,\n};\n\nexport type AdminEmailOutboxClicked = AdminEmailOutboxFinishedDeliveringFields & {\n  status: \"clicked\",\n  simpleStatus: \"ok\",\n  clickedAt: Date,\n  canHaveDeliveryInfo: true,\n};\n\nexport type AdminEmailOutboxMarkedAsSpam = AdminEmailOutboxFinishedDeliveringFields & {\n  status: \"marked-as-spam\",\n  simpleStatus: \"ok\",\n  markedAsSpamAt: Date,\n  canHaveDeliveryInfo: true,\n};\n\n// =============================== DISCRIMINATED UNION ===============================\n\nexport type AdminEmailOutbox =\n  | AdminEmailOutboxPaused\n  | AdminEmailOutboxPreparing\n  | AdminEmailOutboxRendering\n  | AdminEmailOutboxRenderError\n  | AdminEmailOutboxScheduled\n  | AdminEmailOutboxQueued\n  | AdminEmailOutboxSending\n  | AdminEmailOutboxServerError\n  | AdminEmailOutboxSkipped\n  | AdminEmailOutboxBounced\n  | AdminEmailOutboxDeliveryDelayed\n  | AdminEmailOutboxSent\n  | AdminEmailOutboxOpened\n  | AdminEmailOutboxClicked\n  | AdminEmailOutboxMarkedAsSpam;\n\ntype SendEmailOptionsBase = {\n  themeId?: string | null | false,\n  subject?: string,\n  notificationCategoryName?: string,\n}\n\n\nexport type SendEmailOptions = SendEmailOptionsBase\n  & XOR<[\n    { userIds: string[] },\n    { allUsers: true }\n  ]>\n  & XOR<[\n    { html: string },\n    {\n      templateId: string,\n      variables?: Record<string, any>,\n    },\n    { draftId: string }\n  ]>\n\nexport type EmailDeliveryWindowStats = {\n  sent: number,\n  bounced: number,\n  marked_as_spam: number,\n};\n\nexport type EmailDeliveryStats = {\n  hour: EmailDeliveryWindowStats,\n  day: EmailDeliveryWindowStats,\n  week: EmailDeliveryWindowStats,\n  month: EmailDeliveryWindowStats,\n};\n\nexport type EmailDeliveryCapacity = {\n  rate_per_second: number,\n  penalty_factor: number,\n};\n\nexport type EmailDeliveryInfo = {\n  stats: EmailDeliveryStats,\n  capacity: EmailDeliveryCapacity,\n};\n"
-  },
-  {
-    "path": "data-vault/index.ts",
-    "content": "import { AsyncStoreProperty } from \"../common\";\n\nexport type DataVaultStore =\n  & {\n    id: string,\n    setValue: (key: string, value: string, options: { secret: string }) => Promise<void>,\n  }\n & AsyncStoreProperty<\"value\", [key: string, options: { secret: string }], string | null, false>;\n"
-  },
-  {
-    "path": "apps/index.ts",
-    "content": "export {\n  StackClientApp\n} from \"./interfaces/client-app\";\nexport type {\n  StackClientAppConstructor,\n  StackClientAppConstructorOptions,\n  StackClientAppJson\n} from \"./interfaces/client-app\";\n\nexport {\n  StackServerApp\n} from \"./interfaces/server-app\";\nexport type {\n  StackServerAppConstructor,\n  StackServerAppConstructorOptions\n} from \"./interfaces/server-app\";\n\nexport {\n  StackAdminApp\n} from \"./interfaces/admin-app\";\nexport type {\n  StackAdminAppConstructor,\n  StackAdminAppConstructorOptions\n} from \"./interfaces/admin-app\";\n\n"
-  },
-  {
-    "path": "api-keys/index.ts",
-    "content": "import { TeamApiKeysCrud, UserApiKeysCrud, teamApiKeysCreateInputSchema, userApiKeysCreateInputSchema } from \"@stackframe/stack-shared/dist/interface/crud/project-api-keys\";\nimport { filterUndefined } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport { IfAndOnlyIf, PrettifyType } from \"@stackframe/stack-shared/dist/utils/types\";\nimport type * as yup from \"yup\";\n\nexport type ApiKeyType = \"user\" | \"team\";\n\nexport type ApiKey<Type extends ApiKeyType = ApiKeyType, IsFirstView extends boolean = false> =\n  & {\n      id: string,\n      description: string,\n      expiresAt?: Date,\n      manuallyRevokedAt?: Date | null,\n      createdAt: Date,\n      value: IfAndOnlyIf<IsFirstView, true, string, { lastFour: string }>,\n      update(options: ApiKeyUpdateOptions<Type>): Promise<void>,\n      revoke: () => Promise<void>,\n      isValid: () => boolean,\n      whyInvalid: () => \"manually-revoked\" | \"expired\" | null,\n    }\n  & (\n    | (\"user\" extends Type ? { type: \"user\", userId: string } : never)\n    | (\"team\" extends Type ? { type: \"team\", teamId: string } : never)\n  );\n\nexport type UserApiKeyFirstView = PrettifyType<ApiKey<\"user\", true>>;\nexport type UserApiKey = PrettifyType<ApiKey<\"user\", false>>;\n\nexport type TeamApiKeyFirstView = PrettifyType<ApiKey<\"team\", true>>;\nexport type TeamApiKey = PrettifyType<ApiKey<\"team\", false>>;\n\nexport type ApiKeyCreationOptions<Type extends ApiKeyType = ApiKeyType> =\n  & {\n    description: string,\n    expiresAt: Date | null,\n    /**\n     * Whether the API key should be considered public. A public API key will not be detected by the secret scanner, which\n     * automatically revokes API keys when it detects that they may have been exposed to the public.\n     */\n    isPublic?: boolean,\n  };\nexport function apiKeyCreationOptionsToCrud(type: \"user\", userId: string, options: ApiKeyCreationOptions<\"user\">): Promise<yup.InferType<typeof userApiKeysCreateInputSchema>>;\nexport function apiKeyCreationOptionsToCrud(type: \"team\", teamId: string, options: ApiKeyCreationOptions<\"team\">): Promise<yup.InferType<typeof teamApiKeysCreateInputSchema>>;\nexport function apiKeyCreationOptionsToCrud(type: ApiKeyType, userIdOrTeamId: string, options: ApiKeyCreationOptions): Promise<yup.InferType<typeof userApiKeysCreateInputSchema> | yup.InferType<typeof teamApiKeysCreateInputSchema>>;\nexport async function apiKeyCreationOptionsToCrud(type: ApiKeyType, userIdOrTeamId: string, options: ApiKeyCreationOptions): Promise<yup.InferType<typeof userApiKeysCreateInputSchema> | yup.InferType<typeof teamApiKeysCreateInputSchema>> {\n  return {\n    description: options.description,\n    expires_at_millis: options.expiresAt == null ? options.expiresAt : options.expiresAt.getTime(),\n    is_public: options.isPublic,\n    ...(type === \"user\" ? { user_id: userIdOrTeamId } : { team_id: userIdOrTeamId }),\n  };\n}\n\n\nexport type ApiKeyUpdateOptions<Type extends ApiKeyType = ApiKeyType> = {\n  description?: string,\n  expiresAt?: Date | null,\n  revoked?: boolean,\n};\nexport function apiKeyUpdateOptionsToCrud(type: \"user\", options: ApiKeyUpdateOptions<\"user\">): Promise<UserApiKeysCrud[\"Client\"][\"Update\"]>;\nexport function apiKeyUpdateOptionsToCrud(type: \"team\", options: ApiKeyUpdateOptions<\"team\">): Promise<TeamApiKeysCrud[\"Client\"][\"Update\"]>;\nexport function apiKeyUpdateOptionsToCrud(type: ApiKeyType, options: ApiKeyUpdateOptions): Promise<UserApiKeysCrud[\"Client\"][\"Update\"] | TeamApiKeysCrud[\"Client\"][\"Update\"]>;\nexport async function apiKeyUpdateOptionsToCrud(type: ApiKeyType, options: ApiKeyUpdateOptions): Promise<UserApiKeysCrud[\"Client\"][\"Update\"] | TeamApiKeysCrud[\"Client\"][\"Update\"]> {\n  return filterUndefined({\n    description: options.description,\n    expires_at_millis: options.expiresAt == null ? options.expiresAt : options.expiresAt.getTime(),\n    revoked: options.revoked,\n  });\n}\n"
-  },
-  {
-    "path": "apps/interfaces/server-app.ts",
-    "content": "import { KnownErrors } from \"@stackframe/stack-shared\";\nimport { Result } from \"@stackframe/stack-shared/dist/utils/results\";\nimport type { GenericQueryCtx } from \"convex/server\";\nimport { AsyncStoreProperty, GetCurrentPartialUserOptions, GetCurrentUserOptions } from \"../../common\";\nimport { CustomerProductsList, CustomerProductsRequestOptions, InlineProduct, ServerItem } from \"../../customers\";\nimport { DataVaultStore } from \"../../data-vault\";\nimport { EmailDeliveryInfo, SendEmailOptions } from \"../../email\";\nimport { ServerListUsersOptions, ServerTeam, ServerTeamCreateOptions } from \"../../teams\";\nimport { ProjectCurrentServerUser, ServerOAuthProvider, ServerUser, ServerUserCreateOptions, SyncedPartialServerUser, TokenPartialUser } from \"../../users\";\nimport { _StackServerAppImpl } from \"../implementations\";\nimport { StackClientApp, StackClientAppConstructorOptions } from \"./client-app\";\n\n\nexport type StackServerAppConstructorOptions<HasTokenStore extends boolean, ProjectId extends string> = StackClientAppConstructorOptions<HasTokenStore, ProjectId> & {\n  secretServerKey?: string,\n};\n\nexport type StackServerApp<HasTokenStore extends boolean = boolean, ProjectId extends string = string> = (\n  & {\n    createTeam(data: ServerTeamCreateOptions): Promise<ServerTeam>,\n    /**\n     * @deprecated use `getUser()` instead\n     */\n    getServerUser(): Promise<ProjectCurrentServerUser<ProjectId> | null>,\n\n    createUser(options: ServerUserCreateOptions): Promise<ServerUser>,\n    grantProduct(options: (\n      ({ userId: string } | { teamId: string } | { customCustomerId: string }) &\n      ({ productId: string } | { product: InlineProduct }) &\n      { quantity?: number }\n    )): Promise<void>,\n\n    // IF_PLATFORM react-like\n    useUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'redirect' }): ProjectCurrentServerUser<ProjectId>,\n    useUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'throw' }): ProjectCurrentServerUser<ProjectId>,\n    useUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'anonymous' }): ProjectCurrentServerUser<ProjectId>,\n    useUser(options?: GetCurrentUserOptions<HasTokenStore>): ProjectCurrentServerUser<ProjectId> | null,\n    useUser(id: string): ServerUser | null,\n    useUser(options: { apiKey: string, or?: \"return-null\" | \"anonymous\" }): ServerUser | null,\n    useUser(options: { from: \"convex\", ctx: GenericQueryCtx<any>, or?: \"return-null\" | \"anonymous\" }): ServerUser | null,\n    // END_PLATFORM\n\n    getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'redirect' }): Promise<ProjectCurrentServerUser<ProjectId>>,\n    getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'throw' }): Promise<ProjectCurrentServerUser<ProjectId>>,\n    getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'anonymous' }): Promise<ProjectCurrentServerUser<ProjectId>>,\n    getUser(options?: GetCurrentUserOptions<HasTokenStore>): Promise<ProjectCurrentServerUser<ProjectId> | null>,\n    getUser(id: string): Promise<ServerUser | null>,\n    getUser(options: { apiKey: string, or?: \"return-null\" | \"anonymous\" }): Promise<ServerUser | null>,\n    getUser(options: { from: \"convex\", ctx: GenericQueryCtx<any>, or?: \"return-null\" | \"anonymous\" }): Promise<ServerUser | null>,\n\n    // note: we don't special-case 'anonymous' here to return non-null, see GetPartialUserOptions for more details\n    getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'token' }): Promise<TokenPartialUser | null>,\n    getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'convex' }): Promise<TokenPartialUser | null>,\n    getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore>): Promise<SyncedPartialServerUser | TokenPartialUser | null>,\n    // IF_PLATFORM react-like\n    usePartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'token' }): TokenPartialUser | null,\n    usePartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'convex' }): TokenPartialUser | null,\n    usePartialUser(options: GetCurrentPartialUserOptions<HasTokenStore>): SyncedPartialServerUser | TokenPartialUser | null,\n    // END_PLATFORM\n    // IF_PLATFORM react-like\n    useTeam(id: string): ServerTeam | null,\n    useTeam(options: { apiKey: string }): ServerTeam | null,\n    // END_PLATFORM\n    getTeam(id: string): Promise<ServerTeam | null>,\n    getTeam(options: { apiKey: string }): Promise<ServerTeam | null>,\n\n\n    useUsers(options?: ServerListUsersOptions): ServerUser[] & { nextCursor: string | null }, // THIS_LINE_PLATFORM react-like\n    listUsers(options?: ServerListUsersOptions): Promise<ServerUser[] & { nextCursor: string | null }>,\n\n    // TODO this should actually be on ServerUser\n    createOAuthProvider(options: {\n      userId: string,\n      accountId: string,\n      providerConfigId: string,\n      email: string,\n      allowSignIn: boolean,\n      allowConnectedAccounts: boolean,\n    }): Promise<Result<ServerOAuthProvider, InstanceType<typeof KnownErrors.OAuthProviderAccountIdAlreadyUsedForSignIn>>>,\n\n    sendEmail(options: SendEmailOptions): Promise<void>,\n\n    getEmailDeliveryStats(): Promise<EmailDeliveryInfo>,\n    // IF_PLATFORM react-like\n    useEmailDeliveryStats(): EmailDeliveryInfo,\n    // END_PLATFORM\n  }\n  & AsyncStoreProperty<\"user\", [id: string], ServerUser | null, false>\n  & Omit<AsyncStoreProperty<\"users\", [], ServerUser[], true>, \"listUsers\" | \"useUsers\">\n  & AsyncStoreProperty<\"teams\", [], ServerTeam[], true>\n  & AsyncStoreProperty<\"dataVaultStore\", [id: string], DataVaultStore, false>\n  & AsyncStoreProperty<\n    \"item\",\n    [{ itemId: string, userId: string } | { itemId: string, teamId: string } | { itemId: string, customCustomerId: string }],\n    ServerItem,\n    false\n  >\n  & AsyncStoreProperty<\n    \"products\",\n    [options: CustomerProductsRequestOptions],\n    CustomerProductsList,\n    true\n  >\n  & StackClientApp<HasTokenStore, ProjectId>\n);\nexport type StackServerAppConstructor = {\n  new <\n    TokenStoreType extends string,\n    HasTokenStore extends (TokenStoreType extends {} ? true : boolean),\n    ProjectId extends string\n  >(options: StackServerAppConstructorOptions<HasTokenStore, ProjectId>): StackServerApp<HasTokenStore, ProjectId>,\n  new (options: StackServerAppConstructorOptions<boolean, string>): StackServerApp<boolean, string>,\n};\nexport const StackServerApp: StackServerAppConstructor = _StackServerAppImpl;\n"
-  },
-  {
-    "path": "apps/interfaces/client-app.ts",
-    "content": "import { KnownErrors } from \"@stackframe/stack-shared\";\nimport { CurrentUserCrud } from \"@stackframe/stack-shared/dist/interface/crud/current-user\";\nimport { Result } from \"@stackframe/stack-shared/dist/utils/results\";\nimport { AsyncStoreProperty, AuthLike, GetCurrentPartialUserOptions, GetCurrentUserOptions, HandlerUrls, OAuthScopesOnSignIn, RedirectMethod, RedirectToOptions, TokenStoreInit, stackAppInternalsSymbol } from \"../../common\";\nimport { CustomerInvoicesList, CustomerInvoicesRequestOptions, CustomerProductsList, CustomerProductsRequestOptions, Item } from \"../../customers\";\nimport { Project } from \"../../projects\";\nimport { ProjectCurrentUser, SyncedPartialUser, TokenPartialUser } from \"../../users\";\nimport { _StackClientAppImpl } from \"../implementations\";\n\nexport type StackClientAppConstructorOptions<HasTokenStore extends boolean, ProjectId extends string> = {\n  baseUrl?: string | { browser: string, server: string },\n  extraRequestHeaders?: Record<string, string>,\n  projectId?: ProjectId,\n  publishableClientKey?: string,\n  urls?: Partial<HandlerUrls>,\n  oauthScopesOnSignIn?: Partial<OAuthScopesOnSignIn>,\n  tokenStore?: TokenStoreInit<HasTokenStore>,\n  redirectMethod?: RedirectMethod,\n  inheritsFrom?: StackClientApp<any, any>,\n\n  /**\n   * By default, the Stack app will automatically prefetch some data from Stack's server when this app is first\n   * constructed. This improves the performance of your app, but will create network requests that are unnecessary if\n   * the app is never used or disposed of immediately. To disable this behavior, set this option to true.\n   */\n  noAutomaticPrefetch?: boolean,\n} & (\n  { tokenStore: TokenStoreInit<HasTokenStore> } | { tokenStore?: undefined, inheritsFrom: StackClientApp<HasTokenStore, any> }\n) & (\n  string extends ProjectId ? unknown : ({ projectId: ProjectId } | { inheritsFrom: StackClientApp<any, ProjectId> })\n);\n\n\nexport type StackClientAppJson<HasTokenStore extends boolean, ProjectId extends string> = StackClientAppConstructorOptions<HasTokenStore, ProjectId> & { inheritsFrom?: undefined } & {\n  uniqueIdentifier: string,\n  // note: if you add more fields here, make sure to ensure the checkString in the constructor has/doesn't have them\n};\n\nexport type StackClientApp<HasTokenStore extends boolean = boolean, ProjectId extends string = string> = (\n  & {\n    readonly projectId: ProjectId,\n\n    readonly urls: Readonly<HandlerUrls>,\n\n    signInWithOAuth(provider: string, options?: { returnTo?: string }): Promise<void>,\n    signInWithCredential(options: { email: string, password: string, noRedirect?: boolean }): Promise<Result<undefined, KnownErrors[\"EmailPasswordMismatch\"] | KnownErrors[\"InvalidTotpCode\"]>>,\n    signUpWithCredential(options: { email: string, password: string, noRedirect?: boolean } & ({ noVerificationCallback: true } | { noVerificationCallback?: false, verificationCallbackUrl?: string })): Promise<Result<undefined, KnownErrors[\"UserWithEmailAlreadyExists\"] | KnownErrors[\"PasswordRequirementsNotMet\"]>>,\n    signInWithPasskey(): Promise<Result<undefined, KnownErrors[\"PasskeyAuthenticationFailed\"] | KnownErrors[\"InvalidTotpCode\"] | KnownErrors[\"PasskeyWebAuthnError\"]>>,\n    callOAuthCallback(): Promise<boolean>,\n    promptCliLogin(options: { appUrl: string, expiresInMillis?: number }): Promise<Result<string, KnownErrors[\"CliAuthError\"] | KnownErrors[\"CliAuthExpiredError\"] | KnownErrors[\"CliAuthUsedError\"]>>,\n    sendForgotPasswordEmail(email: string, options?: { callbackUrl?: string }): Promise<Result<undefined, KnownErrors[\"UserNotFound\"]>>,\n    sendMagicLinkEmail(email: string, options?: { callbackUrl?: string }): Promise<Result<{ nonce: string }, KnownErrors[\"RedirectUrlNotWhitelisted\"]>>,\n    resetPassword(options: { code: string, password: string }): Promise<Result<undefined, KnownErrors[\"VerificationCodeError\"]>>,\n    verifyPasswordResetCode(code: string): Promise<Result<undefined, KnownErrors[\"VerificationCodeError\"]>>,\n    verifyTeamInvitationCode(code: string): Promise<Result<undefined, KnownErrors[\"VerificationCodeError\"]>>,\n    acceptTeamInvitation(code: string): Promise<Result<undefined, KnownErrors[\"VerificationCodeError\"]>>,\n    getTeamInvitationDetails(code: string): Promise<Result<{ teamDisplayName: string }, KnownErrors[\"VerificationCodeError\"]>>,\n    verifyEmail(code: string): Promise<Result<undefined, KnownErrors[\"VerificationCodeError\"]>>,\n    signInWithMagicLink(code: string, options?: { noRedirect?: boolean }): Promise<Result<undefined, KnownErrors[\"VerificationCodeError\"] | KnownErrors[\"InvalidTotpCode\"]>>,\n    signInWithMfa(otp: string, code: string, options?: { noRedirect?: boolean }): Promise<Result<undefined, KnownErrors[\"VerificationCodeError\"] | KnownErrors[\"InvalidTotpCode\"]>>,\n\n    redirectToOAuthCallback(): Promise<void>,\n\n    getConvexClientAuth(options: HasTokenStore extends false ? { tokenStore: TokenStoreInit } : { tokenStore?: TokenStoreInit }): (args: { forceRefreshToken: boolean }) => Promise<string | null>,\n    getConvexHttpClientAuth(options: { tokenStore: TokenStoreInit }): Promise<string>,\n\n    // IF_PLATFORM react-like\n    useUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'redirect' }): ProjectCurrentUser<ProjectId>,\n    useUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'throw' }): ProjectCurrentUser<ProjectId>,\n    useUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'anonymous' }): ProjectCurrentUser<ProjectId>,\n    useUser(options?: GetCurrentUserOptions<HasTokenStore>): ProjectCurrentUser<ProjectId> | null,\n    // END_PLATFORM\n\n    getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'redirect' }): Promise<ProjectCurrentUser<ProjectId>>,\n    getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'throw' }): Promise<ProjectCurrentUser<ProjectId>>,\n    getUser(options: GetCurrentUserOptions<HasTokenStore> & { or: 'anonymous' }): Promise<ProjectCurrentUser<ProjectId>>,\n    getUser(options?: GetCurrentUserOptions<HasTokenStore>): Promise<ProjectCurrentUser<ProjectId> | null>,\n\n    cancelSubscription(options: { productId: string } | { productId: string, teamId: string }): Promise<void>,\n\n    // note: we don't special-case 'anonymous' here to return non-null, see GetPartialUserOptions for more details\n    getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'token' }): Promise<TokenPartialUser | null>,\n    getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'convex' }): Promise<TokenPartialUser | null>,\n    getPartialUser(options: GetCurrentPartialUserOptions<HasTokenStore>): Promise<SyncedPartialUser | TokenPartialUser | null>,\n    // IF_PLATFORM react-like\n    usePartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'token' }): TokenPartialUser | null,\n    usePartialUser(options: GetCurrentPartialUserOptions<HasTokenStore> & { from: 'convex' }): TokenPartialUser | null,\n    usePartialUser(options: GetCurrentPartialUserOptions<HasTokenStore>): SyncedPartialUser | TokenPartialUser | null,\n    // END_PLATFORM\n    useNavigate(): (to: string) => void, // THIS_LINE_PLATFORM react-like\n\n    [stackAppInternalsSymbol]: {\n      toClientJson(): StackClientAppJson<HasTokenStore, ProjectId>,\n      setCurrentUser(userJsonPromise: Promise<CurrentUserCrud['Client']['Read'] | null>): void,\n      getConstructorOptions(): StackClientAppConstructorOptions<HasTokenStore, ProjectId> & { inheritsFrom?: undefined },\n    },\n  }\n  & AsyncStoreProperty<\"project\", [], Project, false>\n  & AsyncStoreProperty<\n    \"item\",\n    [{ itemId: string, userId: string } | { itemId: string, teamId: string } | { itemId: string, customCustomerId: string }],\n    Item,\n    false\n  >\n  & AsyncStoreProperty<\n    \"products\",\n    [options: CustomerProductsRequestOptions],\n    CustomerProductsList,\n    true\n  >\n  & AsyncStoreProperty<\n    \"invoices\",\n    [options: CustomerInvoicesRequestOptions],\n    CustomerInvoicesList,\n    true\n  >\n  & { [K in `redirectTo${Capitalize<keyof Omit<HandlerUrls, 'handler' | 'oauthCallback'>>}`]: (options?: RedirectToOptions) => Promise<void> }\n  & AuthLike<HasTokenStore extends false ? { tokenStore: TokenStoreInit } : { tokenStore?: TokenStoreInit }>\n);\nexport type StackClientAppConstructor = {\n  new <\n    TokenStoreType extends string,\n    HasTokenStore extends (TokenStoreType extends {} ? true : boolean),\n    ProjectId extends string\n  >(options: StackClientAppConstructorOptions<HasTokenStore, ProjectId>): StackClientApp<HasTokenStore, ProjectId>,\n  new(options: StackClientAppConstructorOptions<boolean, string>): StackClientApp<boolean, string>,\n\n  [stackAppInternalsSymbol]: {\n    fromClientJson<HasTokenStore extends boolean, ProjectId extends string>(\n      json: StackClientAppJson<HasTokenStore, ProjectId>\n    ): StackClientApp<HasTokenStore, ProjectId>,\n  },\n};\nexport const StackClientApp: StackClientAppConstructor = _StackClientAppImpl;\n"
-  },
-  {
-    "path": "apps/interfaces/admin-app.ts",
-    "content": "import { ChatContent } from \"@stackframe/stack-shared/dist/interface/admin-interface\";\nimport { AnalyticsQueryOptions, AnalyticsQueryResponse } from \"@stackframe/stack-shared/dist/interface/crud/analytics\";\nimport type { Transaction, TransactionType } from \"@stackframe/stack-shared/dist/interface/crud/transactions\";\nimport { InternalSession } from \"@stackframe/stack-shared/dist/sessions\";\nimport type { MoneyAmount } from \"@stackframe/stack-shared/dist/utils/currency-constants\";\nimport { Result } from \"@stackframe/stack-shared/dist/utils/results\";\nimport { AsyncStoreProperty, EmailConfig } from \"../../common\";\nimport { AdminEmailOutbox, AdminSentEmail } from \"../../email\";\nimport { InternalApiKey, InternalApiKeyCreateOptions, InternalApiKeyFirstView } from \"../../internal-api-keys\";\nimport { AdminProjectPermission, AdminProjectPermissionDefinition, AdminProjectPermissionDefinitionCreateOptions, AdminProjectPermissionDefinitionUpdateOptions, AdminTeamPermission, AdminTeamPermissionDefinition, AdminTeamPermissionDefinitionCreateOptions, AdminTeamPermissionDefinitionUpdateOptions } from \"../../permissions\";\nimport { AdminProject } from \"../../projects\";\nimport { _StackAdminAppImpl } from \"../implementations\";\nimport { StackServerApp, StackServerAppConstructorOptions } from \"./server-app\";\n\nexport type EmailOutboxListOptions = {\n  status?: string,\n  simpleStatus?: string,\n  limit?: number,\n  cursor?: string,\n};\n\nexport type EmailOutboxListResult = {\n  items: AdminEmailOutbox[],\n  nextCursor: string | null,\n};\n\nexport type EmailOutboxUpdateOptions = {\n  isPaused?: boolean,\n  scheduledAtMillis?: number,\n  cancel?: boolean,\n};\n\n\nexport type StackAdminAppConstructorOptions<HasTokenStore extends boolean, ProjectId extends string> = (\n  & StackServerAppConstructorOptions<HasTokenStore, ProjectId>\n  & {\n    superSecretAdminKey?: string,\n    projectOwnerSession?: InternalSession,\n  }\n);\n\n\nexport type StackAdminApp<HasTokenStore extends boolean = boolean, ProjectId extends string = string> = (\n  & AsyncStoreProperty<\"project\", [], AdminProject, false>\n  & AsyncStoreProperty<\"internalApiKeys\", [], InternalApiKey[], true>\n  & AsyncStoreProperty<\"teamPermissionDefinitions\", [], AdminTeamPermissionDefinition[], true>\n  & AsyncStoreProperty<\"projectPermissionDefinitions\", [], AdminProjectPermissionDefinition[], true>\n  & AsyncStoreProperty<\"emailThemes\", [], { id: string, displayName: string }[], true>\n  & AsyncStoreProperty<\"emailPreview\", [{ themeId?: string | null | false, themeTsxSource?: string, templateId?: string, templateTsxSource?: string }], string, false>\n  & AsyncStoreProperty<\"emailTemplates\", [], { id: string, displayName: string, themeId?: string, tsxSource: string }[], true>\n  & AsyncStoreProperty<\"emailDrafts\", [], { id: string, displayName: string, themeId: string | undefined | false, tsxSource: string, sentAt: Date | null }[], true>\n  & AsyncStoreProperty<\"stripeAccountInfo\", [], { account_id: string, charges_enabled: boolean, details_submitted: boolean, payouts_enabled: boolean } | null, false>\n  & AsyncStoreProperty<\n    \"transactions\",\n    [{\n      cursor?: string,\n      limit?: number,\n      type?: TransactionType,\n      customerType?: 'user' | 'team' | 'custom',\n    }],\n    { transactions: Transaction[], nextCursor: string | null },\n    true\n  >\n  & {\n    createInternalApiKey(options: InternalApiKeyCreateOptions): Promise<InternalApiKeyFirstView>,\n\n    createTeamPermissionDefinition(data: AdminTeamPermissionDefinitionCreateOptions): Promise<AdminTeamPermission>,\n    updateTeamPermissionDefinition(permissionId: string, data: AdminTeamPermissionDefinitionUpdateOptions): Promise<void>,\n    deleteTeamPermissionDefinition(permissionId: string): Promise<void>,\n\n    createProjectPermissionDefinition(data: AdminProjectPermissionDefinitionCreateOptions): Promise<AdminProjectPermission>,\n    updateProjectPermissionDefinition(permissionId: string, data: AdminProjectPermissionDefinitionUpdateOptions): Promise<void>,\n    deleteProjectPermissionDefinition(permissionId: string): Promise<void>,\n\n    useSvixToken(): { token: string, url: string | undefined }, // THIS_LINE_PLATFORM react-like\n\n    sendTestEmail(options: {\n      recipientEmail: string,\n      emailConfig: EmailConfig,\n    }): Promise<Result<undefined, { errorMessage: string }>>,\n\n    sendTestWebhook(options: { endpointId: string }): Promise<Result<undefined, { errorMessage: string }>>,\n\n    sendSignInInvitationEmail(email: string, callbackUrl: string): Promise<void>,\n\n    listSentEmails(): Promise<AdminSentEmail[]>,\n\n    useEmailTheme(id: string): { displayName: string, tsxSource: string }, // THIS_LINE_PLATFORM react-like\n    createEmailTheme(displayName: string): Promise<{ id: string }>,\n    updateEmailTheme(id: string, tsxSource: string): Promise<void>,\n\n    sendChatMessage(\n      threadId: string,\n      contextType: \"email-theme\" | \"email-template\" | \"email-draft\",\n      messages: Array<{ role: string, content: any }>,\n      abortSignal?: AbortSignal,\n    ): Promise<{ content: ChatContent }>,\n    saveChatMessage(threadId: string, message: any): Promise<void>,\n    listChatMessages(threadId: string): Promise<{ messages: Array<any> }>,\n    updateEmailTemplate(id: string, tsxSource: string, themeId: string | null | false): Promise<{ renderedHtml: string }>,\n    createEmailTemplate(displayName: string): Promise<{ id: string }>,\n\n    setupPayments(): Promise<{ url: string }>,\n    createStripeWidgetAccountSession(): Promise<{ client_secret: string }>,\n    getPaymentMethodConfigs(): Promise<{ configId: string, methods: Array<{ id: string, name: string, enabled: boolean, available: boolean, overridable: boolean }> } | null>,\n    updatePaymentMethodConfigs(configId: string, updates: Record<string, 'on' | 'off'>): Promise<void>,\n    createEmailDraft(options: { displayName: string, themeId?: string | undefined | false, tsxSource?: string }): Promise<{ id: string }>,\n    updateEmailDraft(id: string, data: { displayName?: string, themeId?: string | undefined | false, tsxSource?: string }): Promise<void>,\n    createItemQuantityChange(options: (\n      { userId: string, itemId: string, quantity: number, expiresAt?: string, description?: string } |\n      { teamId: string, itemId: string, quantity: number, expiresAt?: string, description?: string } |\n      { customCustomerId: string, itemId: string, quantity: number, expiresAt?: string, description?: string }\n    )): Promise<void>,\n    refundTransaction(options: {\n      type: \"subscription\" | \"one-time-purchase\",\n      id: string,\n      refundEntries: Array<{ entryIndex: number, quantity: number, amountUsd: MoneyAmount }>,\n    }): Promise<void>,\n    queryAnalytics(options: AnalyticsQueryOptions): Promise<AnalyticsQueryResponse>,\n\n    // Email Outbox methods\n    listOutboxEmails(options?: EmailOutboxListOptions): Promise<EmailOutboxListResult>,\n    getOutboxEmail(id: string): Promise<AdminEmailOutbox>,\n    updateOutboxEmail(id: string, options: EmailOutboxUpdateOptions): Promise<AdminEmailOutbox>,\n    pauseOutboxEmail(id: string): Promise<AdminEmailOutbox>,\n    unpauseOutboxEmail(id: string): Promise<AdminEmailOutbox>,\n    cancelOutboxEmail(id: string): Promise<AdminEmailOutbox>,\n  }\n  & StackServerApp<HasTokenStore, ProjectId>\n);\nexport type StackAdminAppConstructor = {\n  new <\n    HasTokenStore extends boolean,\n    ProjectId extends string\n  >(options: StackAdminAppConstructorOptions<HasTokenStore, ProjectId>): StackAdminApp<HasTokenStore, ProjectId>,\n  new(options: StackAdminAppConstructorOptions<boolean, string>): StackAdminApp<boolean, string>,\n};\nexport const StackAdminApp: StackAdminAppConstructor = _StackAdminAppImpl;\n"
-  }
-];
diff --git a/apps/dashboard/src/lib/ai-dashboard/contracts.ts b/apps/dashboard/src/lib/ai-dashboard/contracts.ts
new file mode 100644
index 0000000000..6047fae259
--- /dev/null
+++ b/apps/dashboard/src/lib/ai-dashboard/contracts.ts
@@ -0,0 +1,29 @@
+import { z } from "zod";
+
+// Schema for AI-generated dashboard code
+export const DashboardRuntimeCodegenSchema = z.object({
+  title: z.string().min(1).max(120),
+  description: z.string().min(1).max(800),
+  uiRuntimeSourceCode: z.string().min(1),
+});
+
+// Envelope for AI model output
+export const DashboardRuntimeCodegenEnvelopeSchema = z.object({
+  runtimeCodegen: DashboardRuntimeCodegenSchema,
+});
+
+// Schema for file selection step
+export const FileSelectionResponseSchema = z.object({
+  selectedFiles: z.array(z.string()),
+});
+
+// Backend API response schema
+export const CreateDashboardResponseSchema = z.object({
+  prompt: z.string().min(1),
+  projectId: z.string().min(1),
+  runtimeCodegen: DashboardRuntimeCodegenSchema,
+});
+
+// Type exports
+export type DashboardRuntimeCodegen = z.infer<typeof DashboardRuntimeCodegenSchema>;
+export type CreateDashboardResponse = z.infer<typeof CreateDashboardResponseSchema>;
diff --git a/apps/dashboard/src/lib/ai-dashboard/shared-prompt.ts b/apps/dashboard/src/lib/ai-dashboard/shared-prompt.ts
new file mode 100644
index 0000000000..275bfeb111
--- /dev/null
+++ b/apps/dashboard/src/lib/ai-dashboard/shared-prompt.ts
@@ -0,0 +1,185 @@
+import { BUNDLED_DASHBOARD_UI_TYPES, BUNDLED_TYPE_DEFINITIONS } from "@/generated/bundled-type-definitions";
+import { ALL_APPS_FRONTEND, type AppId, getItemPath } from "@/lib/apps-frontend";
+import { buildStackAuthHeaders, type CurrentUser } from "@/lib/api-headers";
+
+/**
+ * Builds a formatted list of available dashboard routes based on enabled apps.
+ * This is injected into the AI context so it only generates links to pages that exist.
+ */
+export function buildAvailableRoutes(enabledAppIds: AppId[]): string {
+  const routes: Array<{ path: string, label: string }> = [];
+
+  // Static routes that are always available
+  routes.push({ path: "/", label: "Overview" });
+  routes.push({ path: "/dashboards", label: "Dashboards" });
+  routes.push({ path: "/explore-apps", label: "Explore Apps" });
+  routes.push({ path: "/project-keys", label: "Project Keys" });
+  routes.push({ path: "/project-settings", label: "Project Settings" });
+
+  // Dynamic routes from enabled apps
+  for (const appId of enabledAppIds) {
+    const appFrontend = ALL_APPS_FRONTEND[appId as keyof typeof ALL_APPS_FRONTEND];
+    for (const item of appFrontend.navigationItems) {
+      // Use a placeholder project ID — we only need the path relative to /projects/[id]/
+      const fullPath = getItemPath("__PROJECT__", appFrontend, item);
+      // Strip /projects/__PROJECT__/ prefix to get the relative path
+      const relativePath = fullPath.replace(/^\/projects\/__PROJECT__\//, "/");
+      routes.push({ path: relativePath, label: item.displayName });
+    }
+  }
+
+  const routeList = routes.map(r => `- ${r.path} — ${r.label}`).join("\n");
+  return `\nAVAILABLE DASHBOARD ROUTES (use ONLY these with window.dashboardNavigate):\n${routeList}\nDo NOT use any paths not listed above.`;
+}
+
+export async function selectRelevantFiles(
+  prompt: string,
+  backendBaseUrl: string,
+  currentUser?: CurrentUser,
+): Promise<string[]> {
+  const availableFiles = BUNDLED_TYPE_DEFINITIONS.map((f: { path: string }) => f.path);
+
+  const systemPromptText = `You are a code assistant helping to generate dashboard code for Stack Auth.
+
+Your task is to select which Stack SDK type definition files you'll need to generate the requested dashboard.
+
+IMPORTANT GUIDELINES:
+- DO NOT be conservative in file selection - when in doubt, INCLUDE the file
+- If a file might be relevant to the dashboard, SELECT IT
+- For user/team dashboards: select users and/or teams files
+- For project info: select projects files
+- Always select server-app.ts as it contains the main SDK interface
+- It's better to include extra files than to miss necessary types
+
+Available files:
+${availableFiles.map(f => `- ${f}`).join('\n')}
+
+Respond with ONLY a JSON object: { "selectedFiles": ["file1.ts", "file2.ts"] }
+No markdown, no explanation — just the JSON.`;
+
+  try {
+    const authHeaders = await buildStackAuthHeaders(currentUser);
+    const response = await fetch(`${backendBaseUrl}/api/latest/ai/query/generate`, {
+      method: "POST",
+      headers: { "content-type": "application/json", ...authHeaders },
+      body: JSON.stringify({
+        quality: "dumb",
+        speed: "fast",
+        systemPrompt: "command-center-ask-ai",
+        tools: [],
+        messages: [{
+          role: "user",
+          content: `${systemPromptText}\n\nDashboard request: "${prompt}"\n\nWhich type definition files do you need? When uncertain, err on the side of INCLUDING more files rather than fewer.`,
+        }],
+      }),
+    });
+
+    const result = await response.json() as { content?: Array<{ type: string, text?: string }> };
+    const content = Array.isArray(result.content) ? result.content : [];
+    const textBlock = content.find((b) => b.type === "text");
+    const responseText = textBlock?.text;
+
+    if (!responseText) {
+      return availableFiles;
+    }
+
+    const jsonMatch = responseText.match(/\{[\s\S]*"selectedFiles"[\s\S]*\}/);
+    if (!jsonMatch) {
+      return availableFiles;
+    }
+
+    const parsed = JSON.parse(jsonMatch[0]) as { selectedFiles?: string[] };
+    if (!Array.isArray(parsed.selectedFiles) || parsed.selectedFiles.length === 0) {
+      return availableFiles;
+    }
+
+    const selected = parsed.selectedFiles.filter((f) => availableFiles.includes(f));
+    console.log("[selectRelevantFiles] selected:", selected);
+    return selected;
+  } catch (e) {
+    console.log("[selectRelevantFiles] failed, returning all files:", e);
+    return availableFiles;
+  }
+}
+
+function stripComments(source: string): string {
+  // Strip multi-line JSDoc comments (/** ... */)
+  let result = source.replace(/\/\*\*[\s\S]*?\*\//g, '');
+  // Strip single-line comments (but not inside strings or URLs)
+  result = result.replace(/^(\s*)\/\/(?!#region|#endregion).*$/gm, '');
+  // Collapse consecutive blank lines
+  result = result.replace(/\n{3,}/g, '\n\n');
+  return result.trim();
+}
+
+export function loadSelectedTypeDefinitions(selectedFiles: string[]): string {
+  const fileContents = selectedFiles.map((relativePath: string) => {
+    const file = BUNDLED_TYPE_DEFINITIONS.find((f: { path: string }) => f.path === relativePath);
+    if (!file) {
+      throw new Error(`Type definition file not found in bundle: ${relativePath}`);
+    }
+    return `
+=== ${relativePath} ===
+${stripComments(file.content)}
+`;
+  });
+
+  return `
+Complete Stack Auth SDK Type Definitions (Selected Files):
+These files show the available methods, types, and interfaces for the Stack SDK.
+${fileContents.join('\n')}
+  `.trim();
+}
+
+function extractUserPromptText(messages: Array<{ role: string, content: unknown }>): string {
+  const lastUserMessage = [...messages].reverse().find(m => m.role === "user");
+  if (typeof lastUserMessage?.content === "string") {
+    return lastUserMessage.content;
+  }
+  if (Array.isArray(lastUserMessage?.content)) {
+    const textPart = (lastUserMessage.content as Array<{ type: string, text?: string }>).find(c => c.type === "text");
+    return textPart?.text ?? "dashboard";
+  }
+  return "dashboard";
+}
+
+export async function buildDashboardMessages(
+  backendBaseUrl: string,
+  currentUser: CurrentUser | undefined,
+  messages: Array<{ role: string, content: unknown }>,
+  currentSource?: string,
+  enabledAppIds?: AppId[],
+): Promise<Array<{ role: string, content: string }>> {
+  const promptForFileSelection = extractUserPromptText(messages);
+  const selectedFiles = await selectRelevantFiles(promptForFileSelection, backendBaseUrl, currentUser);
+  const typeDefinitions = loadSelectedTypeDefinitions(selectedFiles);
+
+  const availableRoutes = enabledAppIds ? buildAvailableRoutes(enabledAppIds) : "";
+  console.log("[buildDashboardMessages] enabledAppIds:", enabledAppIds?.length, "availableRoutes:", availableRoutes.slice(0, 200));
+
+  const contextMessages: Array<{ role: string, content: string }> = [];
+
+  if (currentSource != null && currentSource.length > 0) {
+    contextMessages.push({
+      role: "user",
+      content: `Here is the current dashboard source code:\n\`\`\`tsx\n${currentSource}\n\`\`\`\n\nHere are the type definitions:\n${typeDefinitions}\n\nHere are the dashboard UI component types:\n${BUNDLED_DASHBOARD_UI_TYPES}${availableRoutes}`,
+    });
+    contextMessages.push({
+      role: "assistant",
+      content: "I understand the current dashboard code, type definitions, available UI components, and available routes. What changes would you like to make?",
+    });
+  } else {
+    contextMessages.push({
+      role: "user",
+      content: `Here are the type definitions for the Stack SDK:\n${typeDefinitions}\n\nHere are the dashboard UI component types:\n${BUNDLED_DASHBOARD_UI_TYPES}${availableRoutes}`,
+    });
+    contextMessages.push({
+      role: "assistant",
+      content: "I have the type definitions, available UI components, and available routes. What dashboard would you like me to create?",
+    });
+  }
+
+  return contextMessages;
+}
+
+export { BUNDLED_DASHBOARD_UI_TYPES };
diff --git a/apps/dashboard/src/lib/api-headers.ts b/apps/dashboard/src/lib/api-headers.ts
new file mode 100644
index 0000000000..3a98542c42
--- /dev/null
+++ b/apps/dashboard/src/lib/api-headers.ts
@@ -0,0 +1,20 @@
+import { getPublicEnvVar } from "@/lib/env";
+
+export type CurrentUser = { getAccessToken: () => Promise<string | null> };
+
+/**
+ * Builds Stack Auth API headers with authentication when available.
+ * Automatically includes access token if user is provided.
+ */
+export async function buildStackAuthHeaders(
+  currentUser?: CurrentUser | null,
+): Promise<Record<string, string>> {
+  const accessToken = currentUser ? await currentUser.getAccessToken() : null;
+
+  return {
+    "x-stack-access-type": "client",
+    "x-stack-project-id": "internal",
+    "x-stack-publishable-client-key": getPublicEnvVar("NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY") ?? "",
+    ...(accessToken ? { "x-stack-access-token": accessToken } : {}),
+  };
+}
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/ai-query.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/ai-query.test.ts
new file mode 100644
index 0000000000..14921e4339
--- /dev/null
+++ b/apps/e2e/tests/backend/endpoints/api/v1/ai-query.test.ts
@@ -0,0 +1,602 @@
+import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
+import { describe } from "vitest";
+import { it } from "../../../../helpers";
+import { niceBackendFetch, Project } from "../../../backend-helpers";
+
+const hasRealAiKey = (() => {
+  const key = getEnvVariable("STACK_OPENROUTER_API_KEY", "");
+  return key !== "" && key !== "FORWARD_TO_PRODUCTION";
+})();
+
+const describeWithAi = hasRealAiKey ? describe : describe.skip;
+
+describe("AI Query Endpoint - Validation", () => {
+  it("rejects invalid mode in URL", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/invalid-mode", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({
+      code: "SCHEMA_ERROR",
+      error: expect.stringContaining("must be one of the following values: stream, generate"),
+    });
+  });
+
+  it("rejects missing quality field", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("quality") });
+  });
+
+  it("rejects invalid quality value", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "invalid-quality",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("quality") });
+  });
+
+  it("rejects missing speed field", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("speed") });
+  });
+
+  it("rejects invalid speed value", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "invalid-speed",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("speed") });
+  });
+
+  it("rejects missing tools field", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("tools") });
+  });
+
+  it("rejects invalid tool names", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: ["invalid-tool", "another-invalid-tool"],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toEqual(expect.stringContaining("Invalid tool names"));
+  });
+
+  it("rejects missing systemPrompt field", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("systemPrompt") });
+  });
+
+  it("rejects invalid systemPrompt value", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "invalid-prompt",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("systemPrompt") });
+  });
+
+  it("rejects missing messages field", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("messages") });
+  });
+
+  it("rejects empty messages array", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("messages") });
+  });
+
+  it("accepts valid request body with all required fields", async ({ expect }) => {
+    // This will forward to production, so we just verify it doesn't fail validation
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    expect(response.body).not.toMatchObject({ code: "SCHEMA_ERROR" });
+
+  }, 10000); // 60 seconds for AI API call
+});
+
+describeWithAi("AI Query Endpoint - Authentication", () => {
+  it("accepts authenticated requests with admin access", async ({ expect }) => {
+    await Project.createAndSwitch();
+
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    // Should not fail due to auth (will forward to production)
+    expect(response.status).not.toBe(401);
+    expect(response.status).not.toBe(403);
+  }, 10000); // 60 seconds for AI API call
+
+  it("accepts unauthenticated requests", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: null,
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "docs-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    // Should not fail due to missing auth
+    expect(response.status).not.toBe(401);
+    expect(response.status).not.toBe(403);
+  }, 10000); // 60 seconds for AI API call
+});
+
+describeWithAi("AI Query Endpoint - System Prompts", () => {
+  const systemPrompts = [
+    "command-center-ask-ai",
+    "docs-ask-ai",
+    "email-wysiwyg-editor",
+    "email-assistant-theme",
+    "email-assistant-draft",
+    "create-dashboard",
+    "run-query",
+  ];
+
+  for (const systemPrompt of systemPrompts) {
+    it(`accepts systemPrompt: ${systemPrompt}`, async ({ expect }) => {
+      const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+        method: "POST",
+        accessType: "admin",
+        body: {
+          quality: "dumb",
+          speed: "fast",
+          tools: [],
+          systemPrompt,
+          messages: [{ role: "user", content: "test" }],
+        },
+      });
+
+      // Should not be a validation error
+      expect(response.status).not.toBe(400);
+    }, 10000); // 60 seconds for AI API call
+  }
+});
+
+describeWithAi("AI Query Endpoint - Tools", () => {
+  const validTools = [
+    "docs",
+    "sql-query",
+    "create-email-theme",
+    "create-email-template",
+    "create-email-draft",
+    "update-dashboard",
+  ];
+
+  for (const tool of validTools) {
+    it(`accepts tool: ${tool}`, async ({ expect }) => {
+      const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+        method: "POST",
+        accessType: "admin",
+        body: {
+          quality: "dumb",
+          speed: "fast",
+          tools: [tool],
+          systemPrompt: "command-center-ask-ai",
+          messages: [{ role: "user", content: "test" }],
+        },
+      });
+
+      // Should not be a validation error
+      expect(response.status).not.toBe(400);
+    }, 10000); // 60 seconds for AI API call
+  }
+
+  it("accepts multiple tools in single request", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: ["docs", "create-email-theme", "update-dashboard"],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    // Should not be a validation error
+    expect(response.status).not.toBe(400);
+  }, 10000); // 60 seconds for AI API call
+});
+
+describeWithAi("AI Query Endpoint - Mode Handling", () => {
+  it("stream mode returns response (forwarded to production)", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/stream", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    // With forwarding, we should get a response from production
+    // We can't test the actual streaming format, but we can verify no validation errors
+    expect(response.status).not.toBe(400);
+  }, 10000); // 60 seconds for AI API call
+
+  it("generate mode returns JSON response (forwarded to production)", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "test" }],
+      },
+    });
+
+    // With forwarding, we should get a JSON response from production
+    expect(response.status).not.toBe(400);
+    // Body structure will depend on production response
+  }, 10000); // 60 seconds for AI API call
+});
+
+describeWithAi("AI Query Endpoint - Quality and Speed Combinations", () => {
+  const qualities = ["dumb", "smart", "smartest"];
+  const speeds = ["slow", "fast"];
+
+  for (const quality of qualities) {
+    for (const speed of speeds) {
+      it(`accepts quality=${quality}, speed=${speed}`, async ({ expect }) => {
+        const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+          method: "POST",
+          accessType: "admin",
+          body: {
+            quality,
+            speed,
+            tools: [],
+            systemPrompt: "command-center-ask-ai",
+            messages: [{ role: "user", content: "test" }],
+          },
+        });
+
+        // Should not be a validation error
+        expect(response.status).not.toBe(400);
+      }, 10000); // 60 seconds for AI API call
+    }
+  }
+});
+
+describeWithAi("AI Query Endpoint - Response Structure", () => {
+  it("generate mode returns body with content array", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "Say hello" }],
+      },
+    });
+
+    expect(response.status).toBe(200);
+    expect(response.body).toMatchObject({ content: expect.any(Array) });
+  }, 10000);
+
+  it("stream mode returns text/event-stream content type", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/stream", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "Say hello" }],
+      },
+    });
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("content-type")).toContain("text/event-stream");
+  }, 10000);
+});
+
+describeWithAi("AI Query Endpoint - Message Formats", () => {
+  it("accepts multi-turn conversation (user → assistant → user)", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [
+          { role: "user", content: "What is Stack Auth?" },
+          { role: "assistant", content: "Stack Auth is an authentication platform." },
+          { role: "user", content: "How do I get started?" },
+        ],
+      },
+    });
+
+    expect(response.status).not.toBe(400);
+  }, 10000);
+
+  it("accepts messages with rich array content (content as array of parts)", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [
+          {
+            role: "user",
+            content: [{ type: "text", text: "Hello, how can you help me?" }],
+          },
+        ],
+      },
+    });
+
+    expect(response.status).not.toBe(400);
+  }, 10000);
+});
+
+describe("AI Query Endpoint - Invalid Message Structure", () => {
+  it("rejects invalid message role", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        // "system" is not in the allowed oneOf(["user", "assistant", "tool"])
+        messages: [{ role: "system", content: "You are a bot" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("role") });
+  });
+
+  it("rejects message without content field", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user" }],
+      },
+    });
+
+    expect(response.status).toBe(400);
+    expect(response.body).toMatchObject({ code: "SCHEMA_ERROR", error: expect.stringContaining("content") });
+  });
+});
+
+describeWithAi("AI Query Endpoint - Tool Behavior", () => {
+  it("sql-query tool is gracefully omitted when unauthenticated (no error)", async ({ expect }) => {
+    // Without auth, createSqlQueryTool returns null and the tool is silently skipped
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: null,
+      body: {
+        quality: "dumb",
+        speed: "fast",
+        tools: ["sql-query"],
+        systemPrompt: "docs-ask-ai",
+        messages: [{ role: "user", content: "Show me some analytics data" }],
+      },
+    });
+
+    // Tool is silently skipped — request should still succeed
+    expect(response.status).not.toBe(400);
+  }, 10000);
+
+  it("client-side tools (create-email-theme) produce tool-call blocks in generate response", async ({ expect }) => {
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smart",
+        speed: "fast",
+        tools: ["create-email-theme"],
+        systemPrompt: "email-assistant-theme",
+        messages: [
+          {
+            role: "user",
+            content: "Create an email theme with primary color #ff0000 and a dark background",
+          },
+        ],
+      },
+    });
+
+    expect(response.status).toBe(200);
+    // Response must always have a content array (text or tool-call blocks)
+    expect(response.body).toMatchObject({ content: expect.any(Array) });
+    // When the AI calls createEmailTheme, a tool-call block should appear
+    const content = (response.body as any).content as Array<{ type: string }>;
+    const hasToolCallOrText = content.every((block) => block.type === "text" || block.type === "tool-call");
+    expect(hasToolCallOrText).toBe(true);
+  }, 10000);
+});
+
+describeWithAi("AI Query Endpoint - Auth Edge Cases", () => {
+  it("smartest quality without auth falls back to cheaper model and succeeds", async ({ expect }) => {
+    // Unauthenticated + smartest → falls back to x-ai/grok-4.1-fast per model matrix
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: null,
+      body: {
+        quality: "smartest",
+        speed: "fast",
+        tools: [],
+        systemPrompt: "docs-ask-ai",
+        messages: [{ role: "user", content: "Hello" }],
+      },
+    });
+
+    expect(response.status).not.toBe(401);
+    expect(response.status).not.toBe(403);
+    expect(response.status).not.toBe(400);
+  }, 10000);
+
+  it("authenticated requests can use premium models (smartest quality)", async ({ expect }) => {
+    await Project.createAndSwitch();
+
+    const response = await niceBackendFetch("/api/v1/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        quality: "smartest",
+        speed: "slow",
+        tools: [],
+        systemPrompt: "command-center-ask-ai",
+        messages: [{ role: "user", content: "Hello" }],
+      },
+    });
+
+    expect(response.status).not.toBe(401);
+    expect(response.status).not.toBe(403);
+    expect(response.status).not.toBe(400);
+  }, 10000);
+});
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/internal/wysiwyg-edit.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/internal/wysiwyg-edit.test.ts
index a3f38192ab..ae2e0b0e03 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/internal/wysiwyg-edit.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/internal/wysiwyg-edit.test.ts
@@ -1,159 +1,154 @@
+import { describe } from "vitest";
 import { it } from "../../../../../helpers";
 import { Auth, Project, niceBackendFetch } from "../../../../backend-helpers";
+import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
 
-// Tests for the WYSIWYG edit endpoint
-// Note: These tests require an AI provider to be configured in the environment
+const hasRealAiKey = (() => {
+  const key = getEnvVariable("STACK_OPENROUTER_API_KEY", "");
+  return key !== "" && key !== "FORWARD_TO_PRODUCTION";
+})();
 
-it("should return the original source when old_text equals new_text", async ({ expect }) => {
-  await Auth.fastSignUp();
-  const { adminAccessToken } = await Project.createAndGetAdminToken();
+const describeWithAi = hasRealAiKey ? describe : describe.skip;
 
-  const sourceCode = `
-    export function EmailTemplate() {
-      return <div>Hello World!</div>;
-    }
-  `;
+// Validation tests run without a real AI key (they fail at schema validation before forwarding)
+describe("WYSIWYG Edit - Validation", () => {
+  it("should validate required fields in messages", async ({ expect }) => {
+    await Auth.fastSignUp();
+    const { adminAccessToken } = await Project.createAndGetAdminToken();
 
-  const response = await niceBackendFetch("/api/v1/internal/wysiwyg-edit", {
-    method: "POST",
-    accessType: "admin",
-    headers: {
-      'x-stack-admin-access-token': adminAccessToken,
-    },
-    body: {
-      source_type: "template",
-      source_code: sourceCode,
-      old_text: "Hello World!",
-      new_text: "Hello World!", // Same as old_text
-      metadata: {
-        id: "e0",
-        loc: { start: 50, end: 62, line: 3, column: 18 },
-        originalText: "Hello World!",
-        textHash: "abc123",
-        jsxPath: ["EmailTemplate", "div"],
-        parentElement: { tagName: "div", props: {} },
-        sourceContext: { before: "", after: "" },
-        siblingIndex: 0,
-        occurrenceCount: 1,
-        occurrenceIndex: 1,
-        sourceFile: "template",
+    const response = await niceBackendFetch("/api/latest/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      headers: {
+        'x-stack-admin-access-token': adminAccessToken,
       },
-      dom_path: [{ tag_name: "DIV", index: 0 }],
-      html_context: "<div>Hello World!</div>",
-    },
-  });
-
-  expect(response.status).toBe(200);
-  expect(response.body.updated_source).toBe(sourceCode);
-});
-
-it("should require admin authentication", async ({ expect }) => {
-  await Auth.fastSignUp();
-  const { adminAccessToken } = await Project.createAndGetAdminToken();
-
-  // Try without admin token
-  const response = await niceBackendFetch("/api/v1/internal/wysiwyg-edit", {
-    method: "POST",
-    accessType: "client",
-    body: {
-      source_type: "template",
-      source_code: "const x = 1;",
-      old_text: "1",
-      new_text: "2",
-      metadata: {
-        id: "e0",
-        loc: { start: 10, end: 11, line: 1, column: 10 },
-        originalText: "1",
-        textHash: "abc123",
-        jsxPath: [],
-        parentElement: { tagName: "div", props: {} },
-        sourceContext: { before: "", after: "" },
-        siblingIndex: 0,
-        occurrenceCount: 1,
-        occurrenceIndex: 1,
-        sourceFile: "template",
+      body: {
+        systemPrompt: "wysiwyg-edit",
+        tools: [],
+        messages: [], // Missing required messages
+        quality: "smart",
+        speed: "fast",
       },
-      dom_path: [],
-      html_context: "",
-    },
+    });
+
+    expect(response.status).toBe(400);
   });
 
-  expect(response.status).toBe(401);
-});
+  it("should reject invalid system prompts", async ({ expect }) => {
+    await Auth.fastSignUp();
+    const { adminAccessToken } = await Project.createAndGetAdminToken();
 
-it("should validate required fields in metadata", async ({ expect }) => {
-  await Auth.fastSignUp();
-  const { adminAccessToken } = await Project.createAndGetAdminToken();
-
-  const response = await niceBackendFetch("/api/v1/internal/wysiwyg-edit", {
-    method: "POST",
-    accessType: "admin",
-    headers: {
-      'x-stack-admin-access-token': adminAccessToken,
-    },
-    body: {
-      source_type: "template",
-      source_code: "const x = 1;",
-      old_text: "1",
-      new_text: "2",
-      metadata: {
-        // Missing required fields
-        id: "e0",
+    const response = await niceBackendFetch("/api/latest/ai/query/generate", {
+      method: "POST",
+      accessType: "admin",
+      headers: {
+        'x-stack-admin-access-token': adminAccessToken,
       },
-      dom_path: [],
-      html_context: "",
-    },
-  });
+      body: {
+        systemPrompt: "invalid-prompt",
+        tools: [],
+        messages: [{ role: "user", content: "const x = 1;" }],
+        quality: "smart",
+        speed: "fast",
+      },
+    });
 
-  expect(response.status).toBe(400);
+    expect(response.status).toBe(400);
+  });
 });
 
-it("should accept valid source_type values", async ({ expect }) => {
-  await Auth.fastSignUp();
-  const { adminAccessToken } = await Project.createAndGetAdminToken();
+// Tests that require a real AI response only run when a real API key is configured
+describeWithAi("WYSIWYG Edit - AI Response", () => {
+  it("should return the original source when old_text equals new_text", async ({ expect }) => {
+    await Auth.fastSignUp();
+    const { adminAccessToken } = await Project.createAndGetAdminToken();
+
+    const sourceCode = `
+    export function EmailTemplate() {
+      return <div>Hello World!</div>;
+    }
+  `;
 
-  const makeRequest = async (sourceType: string) => {
-    return await niceBackendFetch("/api/v1/internal/wysiwyg-edit", {
+    const userPrompt = `
+## Source Code to Edit
+\`\`\`tsx
+${sourceCode}
+\`\`\`
+
+## Edit Request
+- **Old text:** "Hello World!"
+- **New text:** "Hello World!"
+
+## Location Information
+- **Line:** 3
+- **Column:** 18
+- **JSX Path:** EmailTemplate > div
+- **Parent Element:** <div>
+- **Sibling Index:** 0
+- **Occurrence:** 1 of 1
+
+## Source Context (lines around the text)
+Before:
+\`\`\`
+\`\`\`
+
+After:
+\`\`\`
+\`\`\`
+
+## Runtime DOM Path (for disambiguation)
+1. <DIV> (index: 0)
+
+## Rendered HTML Context
+\`\`\`html
+<div>Hello World!</div>
+\`\`\`
+
+Please update the source code to change "Hello World!" to "Hello World!" at the specified location. Return ONLY the complete updated source code.
+`;
+
+    const response = await niceBackendFetch("/api/latest/ai/query/generate", {
       method: "POST",
       accessType: "admin",
       headers: {
         'x-stack-admin-access-token': adminAccessToken,
       },
       body: {
-        source_type: sourceType,
-        source_code: "const x = 1;",
-        old_text: "1",
-        new_text: "1", // Same, so no AI call needed
-        metadata: {
-          id: "e0",
-          loc: { start: 10, end: 11, line: 1, column: 10 },
-          originalText: "1",
-          textHash: "abc123",
-          jsxPath: [],
-          parentElement: { tagName: "div", props: {} },
-          sourceContext: { before: "", after: "" },
-          siblingIndex: 0,
-          occurrenceCount: 1,
-          occurrenceIndex: 1,
-          sourceFile: "template",
-        },
-        dom_path: [],
-        html_context: "",
+        systemPrompt: "wysiwyg-edit",
+        tools: [],
+        messages: [{ role: "user", content: userPrompt }],
+        quality: "smart",
+        speed: "fast",
       },
     });
-  };
-
-  // Valid source types
-  const templateResponse = await makeRequest("template");
-  expect(templateResponse.status).toBe(200);
-
-  const themeResponse = await makeRequest("theme");
-  expect(themeResponse.status).toBe(200);
 
-  const draftResponse = await makeRequest("draft");
-  expect(draftResponse.status).toBe(200);
+    expect(response.status).toBe(200);
+    const textBlock = Array.isArray(response.body.content)
+      ? response.body.content.find((b: any) => b.type === "text" && b.text)
+      : undefined;
+    const updatedSource = textBlock?.text?.trim() ?? sourceCode;
+    // When old_text equals new_text, the AI should return the original source unchanged
+    expect(updatedSource.includes("Hello World!")).toBe(true);
+  }, 60000);
+
+  it("should allow unauthenticated access (with weaker model)", async ({ expect }) => {
+    await Auth.fastSignUp();
+    await Project.createAndGetAdminToken();
+
+    // The unified AI endpoint allows unauthenticated access — unauthenticated
+    // users get a weaker/cheaper model instead of being rejected.
+    const response = await niceBackendFetch("/api/latest/ai/query/generate", {
+      method: "POST",
+      accessType: "client",
+      body: {
+        systemPrompt: "wysiwyg-edit",
+        tools: [],
+        messages: [{ role: "user", content: "const x = 1;" }],
+        quality: "smart",
+        speed: "fast",
+      },
+    });
 
-  // Invalid source type
-  const invalidResponse = await makeRequest("invalid");
-  expect(invalidResponse.status).toBe(400);
+    expect(response.status).toBe(200);
+  }, 60000);
 });
diff --git a/docs/package.json b/docs/package.json
index f83e140f96..ffb6f968db 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,8 +18,7 @@
     "clear-docs": "node scripts/clear-docs.js"
   },
   "dependencies": {
-    "@ai-sdk/react": "^1.2.12",
-    "@openrouter/ai-sdk-provider": "0.7.5",
+    "@ai-sdk/react": "^3.0.0",
     "@modelcontextprotocol/sdk": "^1.17.2",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-collapsible": "^1.1.11",
@@ -31,7 +30,7 @@
     "@stackframe/stack": "workspace:^",
     "@stackframe/stack-shared": "workspace:^",
     "@vercel/mcp-adapter": "^1.0.0",
-    "ai": "^4.3.17",
+    "ai": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "fumadocs-core": "15.3.3",
     "fumadocs-mdx": "11.6.4",
diff --git a/docs/src/app/api/chat/route.ts b/docs/src/app/api/chat/route.ts
deleted file mode 100644
index 788bc41950..0000000000
--- a/docs/src/app/api/chat/route.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
-import { createOpenRouter } from '@openrouter/ai-sdk-provider';
-import { experimental_createMCPClient as createMCPClient, streamText } from 'ai';
-
-// Allow streaming responses up to 30 seconds
-export const maxDuration = 30;
-
-// Create OpenRouter AI instance
-const openrouter = createOpenRouter({
-  apiKey: process.env.STACK_OPENROUTER_API_KEY,
-});
-
-// Helper function to get error message
-function getErrorMessage(error: unknown): string {
-  if (error instanceof Error) {
-    return error.message;
-  }
-  return String(error);
-}
-
-export async function POST(request: Request) {
-  const { messages } = await request.json();
-
-  // Create MCP client for Stack Auth documentation with error handling
-  let tools = {};
-  try {
-    // Use local MCP server in development, production server in production
-    const mcpUrl = process.env.NODE_ENV === 'development'
-      ? new URL('/api/internal/mcp', 'http://localhost:8104')
-      : new URL('/api/internal/mcp', 'https://mcp.stack-auth.com');
-
-    const stackAuthMcp = await createMCPClient({
-      transport: new StreamableHTTPClientTransport(mcpUrl),
-    });
-    tools = await stackAuthMcp.tools();
-  } catch (error) {
-    console.error('Failed to initialize MCP client or retrieve tools:', error);
-    return new Response(
-      JSON.stringify({
-        error: 'Documentation service temporarily unavailable',
-        details: 'Our documentation service is currently unreachable. Please try again in a moment, or visit https://docs.stack-auth.com directly for help.',
-      }),
-      {
-        status: 503,
-        headers: { 'Content-Type': 'application/json' },
-      }
-    );
-  }
-
-  // Create a comprehensive system prompt that restricts AI to Stack Auth topics
-  const systemPrompt = `
-# Stack Auth AI Assistant System Prompt
-
-You are Stack Auth's AI assistant. You help users with Stack Auth - a complete authentication and user management solution.
-
-**CRITICAL**: Keep responses SHORT and concise. ALWAYS use the available tools to pull relevant documentation for every question. There should almost never be a question where you don't retrieve relevant docs.
-
-Think step by step about what to say. Being wrong is 100x worse than saying you don't know.
-
-## TOOL USAGE WORKFLOW:
-1. **FIRST**, use \`search_docs\` with relevant keywords to find related documentation
-2. **THEN**, use \`get_docs_by_id\` to retrieve the full content of the most relevant pages
-3. Base your answer on the actual documentation content retrieved
-4. When referring to API endpoints, **always cite the actual endpoint** (e.g., "GET /users/me") not the documentation URL
-
-## CORE RESPONSIBILITIES:
-1. Help users implement Stack Auth in their applications
-2. Answer questions about authentication, user management, and authorization using Stack Auth
-3. Provide guidance on Stack Auth features, configuration, and best practices
-4. Help with framework integrations (Next.js, React, etc.) using Stack Auth
-
-## WHAT TO CONSIDER STACK AUTH-RELATED:
-- Authentication implementation in any framework (Next.js, React, etc.)
-- User management, registration, login, logout
-- Session management and security
-- OAuth providers and social auth
-- Database configuration and user data
-- API routes and middleware
-- Authorization and permissions
-- Stack Auth configuration and setup
-- Troubleshooting authentication issues
-
-## SUPPORT CONTACT INFORMATION:
-When users need personalized support, have complex issues, or ask for help beyond what you can provide from the documentation, direct them to:
-- **Discord Community**: https://discord.stack-auth.com (best for quick questions and community help)
-- **Email Support**: team@stack-auth.com (for technical support and detailed inquiries)
-
-## RESPONSE GUIDELINES:
-1. Be concise and direct. Only provide detailed explanations when specifically requested
-2. For every question, use the available tools to retrieve the most relevant documentation sections
-3. If you're uncertain, say "I don't know" rather than making definitive negative statements
-4. For complex issues or personalized help, suggest Discord or email support
-
-## RESPONSE FORMAT:
-- Use markdown formatting for better readability
-- **ALWAYS include code examples** - Show users how to actually implement solutions
-- Include code blocks with proper syntax highlighting (typescript, bash, etc.)
-- Use bullet points for lists
-- Bold important concepts
-- Provide practical, working examples
-- Focus on giving complete, helpful answers
-- **When referencing documentation, use links with the base URL: https://docs.stack-auth.com**
-- Example: For setup docs, use https://docs.stack-auth.com/docs/getting-started/setup
-
-## CODE EXAMPLE GUIDELINES:
-- For API calls, show both the HTTP endpoint AND the SDK method
-- For example, when explaining "get current user":
-  * Show the HTTP API endpoint: GET /api/v1/users/me
-  * Show the SDK usage: const user = useUser();
-  * Include necessary imports and authentication headers
-- Always show complete, runnable code snippets with proper language tags
-- Include context like "HTTP API", "SDK (React)", "SDK (Next.js)" etc.
-
-## STACK AUTH HTTP API HEADERS (CRITICAL):
-Stack Auth does NOT use standard "Authorization: Bearer" headers. When showing HTTP/REST API examples, ALWAYS use these Stack Auth-specific headers:
-
-**For client-side requests (browser/mobile):**
-\`\`\`
-X-Stack-Access-Type: client
-X-Stack-Project-Id: <your-project-id>
-X-Stack-Publishable-Client-Key: <your-publishable-client-key>
-X-Stack-Access-Token: <user-access-token>  // for authenticated requests
-\`\`\`
-
-**For server-side requests (backend):**
-\`\`\`
-X-Stack-Access-Type: server
-X-Stack-Project-Id: <your-project-id>
-X-Stack-Secret-Server-Key: <your-secret-server-key>
-\`\`\`
-
-**Example HTTP request (client-side, authenticated):**
-\`\`\`typescript
-const response = await fetch('https://api.stack-auth.com/api/v1/users/me', {
-  headers: {
-    'X-Stack-Access-Type': 'client',
-    'X-Stack-Project-Id': 'YOUR_PROJECT_ID',
-    'X-Stack-Publishable-Client-Key': 'YOUR_PUBLISHABLE_CLIENT_KEY',
-    'X-Stack-Access-Token': 'USER_ACCESS_TOKEN',
-  },
-});
-\`\`\`
-
-**Example HTTP request (server-side):**
-\`\`\`typescript
-const response = await fetch('https://api.stack-auth.com/api/v1/users/USER_ID', {
-  headers: {
-    'X-Stack-Access-Type': 'server',
-    'X-Stack-Project-Id': 'YOUR_PROJECT_ID',
-    'X-Stack-Secret-Server-Key': 'YOUR_SECRET_SERVER_KEY',
-  },
-});
-\`\`\`
-
-NEVER show "Authorization: Bearer" for Stack Auth API calls - this is incorrect and will not work.
-
-## WHEN UNSURE:
-- If you're unsure about a Stack Auth feature, say "As an AI, I don't know" or "As an AI, I'm not certain" clearly
-- Avoid saying things are "not possible" or "impossible", instead say that you don't know
-- Ask clarifying questions to better understand the user's needs
-- Product to help with related Stack Auth topics that might be useful
-- Provide the best information you can based on your knowledge, but acknowledge limitations
-- If the issue is complex or requires personalized assistance, direct them to Discord or email support
-
-## KEY STACK AUTH CONCEPTS TO REMEMBER:
-- The core philosophy is complete authentication and user management
-- All features work together - authentication, user management, teams, permissions
-- Built for modern frameworks like Next.js, React, and more
-- Supports multiple authentication methods: OAuth, email/password, magic links
-- Team and permission management for multi-tenant applications
-
-## MANDATORY BEHAVIOR:
-This is not optional - retrieve relevant documentation for every question.
-- Be direct and to the point. Only elaborate when users specifically ask for more detail.
-
-Remember: You're here to help users succeed with Stack Auth. Be helpful but concise, ask questions when needed, always pull relevant docs, and don't hesitate to direct users to support channels when they need additional help.
-`;
-
-  try {
-    const result = streamText({
-      model: openrouter('anthropic/claude-4.5-sonnet'),
-      tools: {
-        ...tools,
-      },
-      maxSteps: 50,
-      system: systemPrompt,
-      messages,
-      temperature: 0.3,
-      maxTokens: 4096, // Ensure we have enough tokens for complete responses
-    });
-
-    return result.toDataStreamResponse({
-      getErrorMessage,
-    });
-  } catch (error) {
-    console.error('Chat API Error:', error);
-    return new Response(
-      JSON.stringify({
-        error: 'Failed to process chat request',
-        details: getErrorMessage(error),
-      }),
-      {
-        status: 500,
-        headers: { 'Content-Type': 'application/json' },
-      }
-    );
-  }
-}
diff --git a/docs/src/components/chat/ai-chat.tsx b/docs/src/components/chat/ai-chat.tsx
index 066be35981..1e378e502c 100644
--- a/docs/src/components/chat/ai-chat.tsx
+++ b/docs/src/components/chat/ai-chat.tsx
@@ -1,12 +1,27 @@
 'use client';
 
-import { useChat } from '@ai-sdk/react';
+import { useChat, type UIMessage } from '@ai-sdk/react';
+import { throwErr } from '@stackframe/stack-shared/dist/utils/errors';
 import { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';
+import { convertToModelMessages, DefaultChatTransport, type DynamicToolUIPart } from 'ai';
 import { ChevronDown, ChevronUp, ExternalLink, FileText, Maximize2, Minimize2, Send, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useSidebar } from '../layouts/sidebar-context';
 import { MessageFormatter } from './message-formatter';
 
+function getMessageContent(message: UIMessage): string {
+  return message.parts
+    .filter((part): part is { type: "text", text: string } => part.type === "text")
+    .map(part => part.text)
+    .join("");
+}
+
+function getToolInvocations(message: UIMessage): DynamicToolUIPart[] {
+  return message.parts.filter(
+    (part): part is DynamicToolUIPart => part.type === "dynamic-tool"
+  );
+}
+
 // Stack Auth Icon Component (just the icon, not full logo)
 function StackIcon({ size = 20, className }: { size?: number, className?: string }) {
   return (
@@ -335,25 +350,44 @@ export function AIChatDrawer() {
   const topPosition = 'top-3';
   const height = isHomePage && isScrolled ? 'h-[calc(100vh-1.5rem)]' : 'h-[calc(100vh-1.5rem)]';
 
+  const [input, setInput] = useState('');
+  const apiBaseUrl = process.env.NEXT_PUBLIC_STACK_API_URL ?? throwErr("NEXT_PUBLIC_STACK_API_URL is not set");
+
   const {
     messages,
-    input,
-    handleInputChange,
-    handleSubmit,
-    isLoading,
+    sendMessage,
+    status,
     error,
   } = useChat({
-    api: '/api/chat',
-    initialMessages: [],
+    transport: new DefaultChatTransport({
+      api: `${apiBaseUrl}/api/latest/ai/query/stream`,
+      prepareSendMessagesRequest: async ({ messages: uiMessages, headers }) => {
+        const modelMessages = await convertToModelMessages(uiMessages);
+        return {
+          body: {
+            systemPrompt: "docs-ask-ai",
+            tools: ["docs"],
+            quality: "smart",
+            speed: "fast",
+            messages: modelMessages.map(m => ({
+              role: m.role,
+              content: m.content,
+            })),
+          },
+          headers,
+        };
+      },
+    }),
     onError: (error: Error) => {
       console.error('Chat error:', error);
     },
-    onFinish: (message) => {
-      // Send AI response to Discord
-      runAsynchronously(() => sendAIResponseToDiscord(message.content));
+    onFinish: ({ message }: { message: UIMessage }) => {
+      runAsynchronously(() => sendAIResponseToDiscord(getMessageContent(message)));
     },
   });
 
+  const isLoading = status === 'submitted' || status === 'streaming';
+
   // Auto-scroll to bottom when new messages are added
   useEffect(() => {
     const container = messagesContainerRef.current;
@@ -379,6 +413,14 @@ export function AIChatDrawer() {
     }
   }, [input]);
 
+  const submitMessage = () => {
+    const text = input.trim();
+    if (!text || isLoading) return;
+    setInput('');
+    if (editableRef.current) editableRef.current.textContent = '';
+    runAsynchronously(() => sendMessage({ text }));
+  };
+
   // Function to send AI response to Discord webhook
   const sendAIResponseToDiscord = async (response: string) => {
     try {
@@ -441,8 +483,8 @@ export function AIChatDrawer() {
   };
 
   // Enhanced submit handler that also sends to Discord
-  const handleChatSubmit = async (e: React.FormEvent) => {
-    if (!input.trim()) return;
+  const handleChatSubmit = () => {
+    if (!input.trim() || isLoading) return;
 
     // Update session data
     setSessionData(prev => ({
@@ -453,8 +495,7 @@ export function AIChatDrawer() {
     // Send message to Discord webhook
     runAsynchronously(() => sendToDiscord(input.trim()));
 
-    // Continue with normal chat submission
-    handleSubmit(e);
+    submitMessage();
   };
 
   // Starter prompts for users
@@ -477,13 +518,8 @@ export function AIChatDrawer() {
   ];
 
   const handleStarterPromptClick = (prompt: string) => {
-    // Use the handleInputChange from useChat to update the input
-    handleInputChange({ target: { value: prompt } } as React.ChangeEvent<HTMLInputElement>);
-  };
-
-  // Helper function for safe async event handling
-  const handleSubmitSafely = () => {
-    runAsynchronously(() => handleChatSubmit({} as React.FormEvent));
+    setInput(prompt);
+    if (editableRef.current) editableRef.current.textContent = prompt;
   };
 
   return (
@@ -558,35 +594,51 @@ export function AIChatDrawer() {
             </div>
           </div>
         ) : (
-          messages.map((message) => (
-            <div
-              key={message.id}
-              className={`flex ${
-                message.role === 'user' ? 'justify-end' : 'justify-start'
-              }`}
-            >
+          messages.map((message) => {
+            const messageContent = getMessageContent(message);
+            const toolInvocations = message.role === "assistant" ? getToolInvocations(message) : [];
+
+            if (message.role === "assistant" && !messageContent && toolInvocations.length === 0) {
+              return null;
+            }
+
+            return (
               <div
-                className={`max-w-[85%] p-2 rounded-lg text-xs ${
-                  message.role === 'user'
-                    ? 'bg-fd-primary/10 border border-fd-primary/20 text-fd-foreground'
-                    : 'bg-fd-muted text-fd-foreground border border-fd-border'
+                key={message.id}
+                className={`flex ${
+                  message.role === 'user' ? 'justify-end' : 'justify-start'
                 }`}
               >
-                {message.role === 'user' ? (
-                  <div className="whitespace-pre-wrap break-words">
-                    {message.content}
-                  </div>
-                ) : (
-                  <>
-                    {message.toolInvocations?.map((toolCall, index) => (
-                      <ToolCallDisplay key={index} toolCall={toolCall} />
-                    ))}
-                    <MessageFormatter content={message.content} />
-                  </>
-                )}
+                <div
+                  className={`max-w-[85%] p-2 rounded-lg text-xs ${
+                    message.role === 'user'
+                      ? 'bg-fd-primary/10 border border-fd-primary/20 text-fd-foreground'
+                      : 'bg-fd-muted text-fd-foreground border border-fd-border'
+                  }`}
+                >
+                  {message.role === 'user' ? (
+                    <div className="whitespace-pre-wrap break-words">
+                      {messageContent}
+                    </div>
+                  ) : (
+                    <>
+                      {toolInvocations.map((part, index) => (
+                        <ToolCallDisplay
+                          key={index}
+                          toolCall={{
+                            toolName: part.toolName,
+                            args: part.input as { id?: string, search_query?: string },
+                            result: part.output as { content?: { text: string }[], text?: string } | undefined,
+                          }}
+                        />
+                      ))}
+                      {messageContent && <MessageFormatter content={messageContent} />}
+                    </>
+                  )}
+                </div>
               </div>
-            </div>
-          ))
+            );
+          })
         )}
 
         {isLoading && (
@@ -631,10 +683,7 @@ export function AIChatDrawer() {
                 style={{ lineHeight: "1.4", minHeight: "20px" }}
                 onInput={(e) => {
                   const value = e.currentTarget.textContent || "";
-                  handleInputChange({
-                    target: { value },
-                  } as React.ChangeEvent<HTMLInputElement>);
-
+                  setInput(value);
                   // Clean up the div if it's empty to show placeholder
                   if (!value.trim()) {
                     e.currentTarget.innerHTML = "";
@@ -643,7 +692,7 @@ export function AIChatDrawer() {
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !e.shiftKey) {
                     e.preventDefault();
-                    handleSubmitSafely();
+                    handleChatSubmit();
                   }
                 }}
                 onPaste={(e) => {
@@ -651,17 +700,14 @@ export function AIChatDrawer() {
                   const text = e.clipboardData.getData("text/plain");
                   e.currentTarget.textContent =
                     (e.currentTarget.textContent || "") + text;
-                  const value = e.currentTarget.textContent;
-                  handleInputChange({
-                    target: { value },
-                  } as React.ChangeEvent<HTMLInputElement>);
+                  setInput(e.currentTarget.textContent || "");
                 }}
                 data-placeholder="Ask about Stack Auth..."
               />
             </div>
             <button
               disabled={!input.trim() || isLoading}
-              onClick={handleSubmitSafely}
+              onClick={handleChatSubmit}
               className="h-8 w-8 rounded-full p-0 shrink-0 bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
             >
               <Send className="w-4 h-4" />
diff --git a/packages/dashboard-ui-components/.eslintrc.cjs b/packages/dashboard-ui-components/.eslintrc.cjs
new file mode 100644
index 0000000000..4994c78632
--- /dev/null
+++ b/packages/dashboard-ui-components/.eslintrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  "extends": [
+    "../../configs/eslint/defaults.js",
+  ],
+  "ignorePatterns": ['/*', '!/src'],
+};
diff --git a/packages/dashboard-ui-components/package.json b/packages/dashboard-ui-components/package.json
new file mode 100644
index 0000000000..ba0b4d80f3
--- /dev/null
+++ b/packages/dashboard-ui-components/package.json
@@ -0,0 +1,72 @@
+{
+  "name": "@stackframe/dashboard-ui-components",
+  "version": "2.8.68",
+  "repository": "https://github.com/stack-auth/stack-auth",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "rimraf dist && tsdown && pnpm run build-iife && pnpm run copy-iife",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist && rimraf node_modules",
+    "dev": "tsdown --watch --onSuccess 'pnpm run build-iife && pnpm run copy-iife'",
+    "build-iife": "tsx scripts/build-iife.ts",
+    "copy-iife": "tsx scripts/copy-iife.ts",
+    "lint": "eslint --ext .tsx,.ts ."
+  },
+  "files": [
+    "README.md",
+    "dist",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": {
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@types/react": ">=19.0.0",
+    "@types/react-dom": ">=19.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "recharts": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "@react-hook/resize-observer": "^2.0.2",
+    "@stackframe/stack-shared": "workspace:*",
+    "@stackframe/stack-ui": "workspace:*",
+    "class-variance-authority": "^0.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "esbuild": "^0.24.0",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "recharts": "^2.14.1",
+    "rimraf": "^5.0.10"
+  },
+  "packageManager": "pnpm@10.23.0"
+}
diff --git a/packages/dashboard-ui-components/scripts/build-iife.ts b/packages/dashboard-ui-components/scripts/build-iife.ts
new file mode 100644
index 0000000000..7836a64ca7
--- /dev/null
+++ b/packages/dashboard-ui-components/scripts/build-iife.ts
@@ -0,0 +1,86 @@
+import * as esbuild from 'esbuild';
+import * as path from 'node:path';
+
+const JSX_RUNTIME_SHIM = `
+import React from "react";
+// jsx(type, props, key) differs from createElement(type, props, ...children):
+// the third arg in jsx is the key, but in createElement it's treated as children.
+// We must merge the key into props instead of passing it as a positional arg.
+export function jsx(type, props, key) {
+  return React.createElement(type, key !== undefined ? Object.assign({}, props, { key }) : props);
+}
+export function jsxs(type, props, key) {
+  return React.createElement(type, key !== undefined ? Object.assign({}, props, { key }) : props);
+}
+export function jsxDEV(type, props, key) {
+  return React.createElement(type, key !== undefined ? Object.assign({}, props, { key }) : props);
+}
+export var Fragment = React.Fragment;
+`;
+
+const externals: Record<string, string> = {
+  'react': 'globalThis.React',
+  'react-dom': 'globalThis.ReactDOM',
+  'react-dom/client': 'globalThis.ReactDOM',
+  'recharts': 'globalThis.Recharts',
+};
+
+const externalizeToGlobals: esbuild.Plugin = {
+  name: 'externalize-to-globals',
+  setup(build) {
+    for (const [mod, global] of Object.entries(externals)) {
+      const filter = new RegExp(`^${mod.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`);
+      build.onResolve({ filter }, (args) => ({
+        path: args.path,
+        namespace: `global-${mod}`,
+      }));
+      build.onLoad({ filter: /.*/, namespace: `global-${mod}` }, () => ({
+        contents: `module.exports = ${global};`,
+        loader: 'js',
+      }));
+    }
+
+    const jsxFilter = /^react\/jsx(-dev)?-runtime$/;
+    build.onResolve({ filter: jsxFilter }, (args) => ({
+      path: args.path,
+      namespace: 'jsx-shim',
+    }));
+    build.onLoad({ filter: /.*/, namespace: 'jsx-shim' }, () => ({
+      contents: JSX_RUNTIME_SHIM,
+      loader: 'js',
+    }));
+  },
+};
+
+async function main() {
+  const pkgDir = path.resolve(__dirname, '..');
+
+  await esbuild.build({
+    entryPoints: [path.join(pkgDir, 'src/index.ts')],
+    bundle: true,
+    format: 'iife',
+    globalName: 'DashboardUI',
+    outfile: path.join(pkgDir, 'dist/dashboard-ui-components.global.js'),
+    sourcemap: true,
+    platform: 'browser',
+    target: 'es2021',
+    jsx: 'automatic',
+    plugins: [externalizeToGlobals],
+    define: {
+      'process.env.NODE_ENV': '"production"',
+    },
+    banner: {
+      js: 'if(typeof process==="undefined"){globalThis.process={env:{NODE_ENV:"production"}};}',
+    },
+    absWorkingDir: pkgDir,
+    nodePaths: [path.join(pkgDir, 'node_modules')],
+    logLevel: 'info',
+  });
+
+  console.log('[build-iife] IIFE bundle built successfully');
+}
+
+main().catch((err) => {
+  console.error('[build-iife] Failed:', err);
+  process.exit(1);
+});
diff --git a/packages/dashboard-ui-components/scripts/copy-iife.ts b/packages/dashboard-ui-components/scripts/copy-iife.ts
new file mode 100644
index 0000000000..37c782eeb9
--- /dev/null
+++ b/packages/dashboard-ui-components/scripts/copy-iife.ts
@@ -0,0 +1,22 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+const src = path.resolve(__dirname, '../dist/dashboard-ui-components.global.js');
+const srcMap = src + '.map';
+const destDir = path.resolve(__dirname, '../../../apps/dashboard/public');
+const dest = path.join(destDir, 'dashboard-ui-components.iife.js');
+const destMap = dest + '.map';
+
+if (!fs.existsSync(src)) {
+  console.warn('[copy-iife] IIFE bundle not found at', src, '— skipping');
+  process.exit(0);
+}
+
+fs.mkdirSync(destDir, { recursive: true });
+fs.copyFileSync(src, dest);
+console.log('[copy-iife] Copied IIFE bundle to', dest);
+
+if (fs.existsSync(srcMap)) {
+  fs.copyFileSync(srcMap, destMap);
+  console.log('[copy-iife] Copied source map to', destMap);
+}
diff --git a/packages/dashboard-ui-components/src/components/alert.tsx b/packages/dashboard-ui-components/src/components/alert.tsx
new file mode 100644
index 0000000000..c6c0b461df
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/alert.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { CheckCircle, Info, WarningCircle, XCircle } from "@phosphor-icons/react";
+import { cn } from "@stackframe/stack-ui";
+
+type DesignAlertVariant = "default" | "success" | "error" | "warning" | "info";
+
+const variantIconMap = new Map<DesignAlertVariant, React.ElementType>([
+  ["default", Info],
+  ["success", CheckCircle],
+  ["error", XCircle],
+  ["warning", WarningCircle],
+  ["info", Info],
+]);
+
+type VariantStyles = {
+  container: string,
+  icon: string,
+  title: string,
+};
+
+const variantStyles = new Map<DesignAlertVariant, VariantStyles>([
+  [
+    "default",
+    {
+      container: "bg-background border-border",
+      icon: "text-foreground",
+      title: "text-foreground",
+    },
+  ],
+  [
+    "success",
+    {
+      container: "bg-green-500/[0.06] border-green-500/30",
+      icon: "text-green-500",
+      title: "text-green-600 dark:text-green-400",
+    },
+  ],
+  [
+    "error",
+    {
+      container: "bg-red-500/[0.06] border-red-500/30",
+      icon: "text-red-500",
+      title: "text-red-600 dark:text-red-400",
+    },
+  ],
+  [
+    "warning",
+    {
+      container: "bg-amber-500/[0.08] border-amber-500/40",
+      icon: "text-amber-600 dark:text-amber-400",
+      title: "text-amber-700 dark:text-amber-300",
+    },
+  ],
+  [
+    "info",
+    {
+      container: "bg-blue-500/[0.06] border-blue-500/30",
+      icon: "text-blue-500",
+      title: "text-blue-600 dark:text-blue-400",
+    },
+  ],
+]);
+
+function getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {
+  const value = map.get(key);
+  if (!value) {
+    throw new Error(`Missing ${mapName} entry for key "${String(key)}"`);
+  }
+  return value;
+}
+
+export type DesignAlertProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: DesignAlertVariant,
+  title?: React.ReactNode,
+  description?: React.ReactNode,
+  glassmorphic?: boolean,
+};
+
+export function DesignAlert({
+  variant = "default",
+  title,
+  description,
+  glassmorphic = false,
+  className,
+  children,
+  ...props
+}: DesignAlertProps) {
+  const styles = getMapValueOrThrow(variantStyles, variant, "variantStyles");
+  const Icon = getMapValueOrThrow(variantIconMap, variant, "variantIconMap");
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "relative w-full rounded-2xl border p-4 text-sm",
+        "flex gap-3 items-start",
+        styles.container,
+        glassmorphic && "backdrop-blur-xl",
+        className
+      )}
+      {...props}
+    >
+      <Icon className={cn("h-4 w-4 mt-0.5 flex-shrink-0", styles.icon)} />
+      <div className="min-w-0">
+        {title && (
+          <h5 className={cn("mb-1 font-medium leading-none tracking-tight", styles.title)}>
+            {title}
+          </h5>
+        )}
+        {description && (
+          <div className="text-sm text-foreground/80 dark:text-muted-foreground [&_p]:leading-relaxed">
+            {description}
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/badge.tsx b/packages/dashboard-ui-components/src/components/badge.tsx
new file mode 100644
index 0000000000..037d78c958
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/badge.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+
+export type DesignBadgeColor = "blue" | "cyan" | "purple" | "green" | "orange" | "red";
+export type DesignBadgeSize = "sm" | "md";
+
+const badgeStyles = new Map<DesignBadgeColor, string>([
+  ["blue", "text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20"],
+  ["cyan", "text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20"],
+  ["purple", "text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20"],
+  ["green", "text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20"],
+  ["orange", "text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20"],
+  ["red", "text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20"],
+]);
+
+function getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {
+  const value = map.get(key);
+  if (!value) {
+    throw new Error(`Missing ${mapName} entry for key "${String(key)}"`);
+  }
+  return value;
+}
+
+/** At least one of showLabel or showIcon must be true. */
+export type DesignBadgeContentMode = "both" | "text" | "icon";
+
+export type DesignBadgeProps = {
+  label: string,
+  color: DesignBadgeColor,
+  icon?: React.ElementType,
+  size?: DesignBadgeSize,
+  /** What to display: "both" (default), "text" (label only), or "icon" (icon only; requires icon prop). */
+  contentMode?: DesignBadgeContentMode,
+};
+
+function getShowLabelShowIcon(
+  contentMode: DesignBadgeContentMode,
+  hasIcon: boolean,
+): { showLabel: boolean, showIcon: boolean } {
+  switch (contentMode) {
+    case "both": {
+      return { showLabel: true, showIcon: hasIcon };
+    }
+    case "text": {
+      return { showLabel: true, showIcon: false };
+    }
+    case "icon": {
+      if (!hasIcon) {
+        throw new Error("DesignBadge contentMode 'icon' requires the icon prop to be provided.");
+      }
+      return { showLabel: false, showIcon: true };
+    }
+    default: {
+      const _exhaustive: never = contentMode;
+      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);
+    }
+  }
+}
+
+export function DesignBadge({
+  label,
+  color,
+  icon,
+  size = "md",
+  contentMode = "both",
+}: DesignBadgeProps) {
+  const Icon = icon;
+  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);
+  if (!showLabel && !showIcon) {
+    throw new Error("DesignBadge must show at least label or icon.");
+  }
+  const sizeClasses = size === "sm"
+    ? "px-2 py-0.5 text-[10px]"
+    : "px-2.5 py-1 text-[11px]";
+  const colorClasses = getMapValueOrThrow(badgeStyles, color, "badgeStyles");
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full font-medium",
+        colorClasses,
+        sizeClasses
+      )}
+      title={!showLabel ? label : undefined}
+      aria-label={label}
+    >
+      {showIcon && Icon && <Icon className="h-3 w-3" />}
+      {showLabel ? label : null}
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/button.tsx b/packages/dashboard-ui-components/src/components/button.tsx
new file mode 100644
index 0000000000..4edf200ebf
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/button.tsx
@@ -0,0 +1,90 @@
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
+import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
+
+import { cn, Spinner } from "@stackframe/stack-ui";
+import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+
+const designButtonVariants = cva(
+  "stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        plain: "",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export type DesignOriginalButtonProps = {
+  asChild?: boolean,
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;
+
+const DesignOriginalButton = forwardRefIfNeeded<HTMLButtonElement, DesignOriginalButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(designButtonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+DesignOriginalButton.displayName = "DesignButton";
+
+export type DesignButtonProps = {
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,
+  loading?: boolean,
+  loadingStyle?: "spinner" | "disabled",
+} & DesignOriginalButtonProps;
+
+export const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(
+  ({ onClick, loading: loadingProp, loadingStyle = "spinner", children, size, ...props }, ref) => {
+    const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
+      await onClick?.(e);
+    }, [onClick]);
+
+    const loading = loadingProp || isLoading;
+
+    return (
+      <DesignOriginalButton
+        {...props}
+        ref={ref}
+        disabled={props.disabled || loading}
+        onClick={(e) => runAsynchronouslyWithAlert(handleClick(e))}
+        size={size}
+        className={cn("relative", loading && "[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible", props.className)}
+      >
+        {loadingStyle === "spinner" && <Spinner className={cn("absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are", !loading && "invisible")} />}
+        <Slottable>
+          {typeof children === "string" ? <span>{children}</span> : children}
+        </Slottable>
+      </DesignOriginalButton>
+    );
+  }
+);
+DesignButton.displayName = "DesignButton";
diff --git a/packages/dashboard-ui-components/src/components/card.tsx b/packages/dashboard-ui-components/src/components/card.tsx
new file mode 100644
index 0000000000..a4e63c9c52
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/card.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import { Card } from "@stackframe/stack-ui";
+import { cn } from "@stackframe/stack-ui";
+import React from "react";
+
+// ─── Card nesting context ────────────────────────────────────────────────────
+// Components with a `glassmorphic` prop use this to auto-detect whether they
+// sit inside a DesignCard.  When they do, glassmorphic defaults to `true`;
+// when they don't, it defaults to `false`.
+
+const DesignCardNestingContext = React.createContext(false);
+
+/**
+ * Returns `true` when the calling component is rendered inside a DesignCard.
+ * Useful for deriving a glassmorphic default.
+ */
+export function useInsideDesignCard(): boolean {
+  return React.useContext(DesignCardNestingContext);
+}
+
+/**
+ * Resolve the effective glassmorphic value.
+ * - If the caller passed an explicit boolean → honour it.
+ * - Otherwise → fall back to whether we're inside a DesignCard.
+ */
+export function useGlassmorphicDefault(explicit: boolean | undefined): boolean {
+  const insideCard = useInsideDesignCard();
+  return explicit ?? insideCard;
+}
+
+type DesignCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+
+const hoverTintClasses = new Map<DesignCardGradient, string>([
+  ["blue", "group-hover:bg-blue-500/[0.03]"],
+  ["purple", "group-hover:bg-purple-500/[0.03]"],
+  ["green", "group-hover:bg-emerald-500/[0.03]"],
+  ["orange", "group-hover:bg-orange-500/[0.03]"],
+  ["default", "group-hover:bg-slate-500/[0.02]"],
+  ["cyan", "group-hover:bg-cyan-500/[0.03]"],
+]);
+
+const demoTintClasses = new Map<DesignCardGradient, string>([
+  ["blue", "group-hover/tint:bg-blue-500/[0.02]"],
+  ["purple", "group-hover/tint:bg-purple-500/[0.02]"],
+  ["green", "group-hover/tint:bg-emerald-500/[0.02]"],
+  ["orange", "group-hover/tint:bg-orange-500/[0.02]"],
+  ["default", "group-hover/tint:bg-slate-500/[0.015]"],
+  ["cyan", "group-hover/tint:bg-cyan-500/[0.02]"],
+]);
+
+const bodyPaddingClass = "p-5";
+
+// ─── Discriminated props ──────────────────────────────────────────────────
+// - If title is given, icon is required.
+// - The layout is derived automatically:
+//     title + subtitle → "header"   (full header block with subtitle)
+//     title only       → "compact"  (slim bar with border-b)
+//     no title         → "bodyOnly" (just the body)
+
+type DesignCardBaseProps = {
+  glassmorphic?: boolean,
+  gradient?: DesignCardGradient,
+  contentClassName?: string,
+} & Omit<React.ComponentProps<typeof Card>, "title">;
+
+type WithTitleProps = {
+  title: React.ReactNode,
+  subtitle?: React.ReactNode,
+  icon: React.ElementType,
+  actions?: React.ReactNode,
+};
+
+type WithoutTitleProps = {
+  title?: never,
+  subtitle?: never,
+  icon?: never,
+  actions?: never,
+};
+
+export type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);
+
+export function DesignCard({
+  title,
+  subtitle,
+  icon: Icon,
+  actions,
+  glassmorphic: glassmorphicProp,
+  gradient = "default",
+  children,
+  className,
+  contentClassName,
+  ...props
+}: DesignCardProps) {
+  const glassmorphic = glassmorphicProp ?? true;
+  const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+  const hasContent = React.Children.count(children) > 0;
+
+  // Derive layout from which props were provided
+  const variant = title != null
+    ? (subtitle != null ? "header" : "compact")
+    : "bodyOnly";
+
+  return (
+    <DesignCardNestingContext.Provider value={true}>
+      <Card
+        className={cn(
+          "group relative rounded-2xl overflow-hidden",
+          glassmorphic && [
+            "bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none",
+            "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
+            "shadow-none",
+          ],
+          glassmorphic && variant === "bodyOnly" && "dark:bg-transparent dark:ring-0 dark:shadow-none",
+          className
+        )}
+        {...props}
+      >
+        {glassmorphic && (
+          <>
+            <div className={cn(
+              "absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl",
+              variant === "bodyOnly" && "dark:hidden"
+            )} />
+            {variant !== "bodyOnly" && (
+              <div
+                className={cn(
+                  "absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl",
+                  hoverTintClass
+                )}
+              />
+            )}
+          </>
+        )}
+        <div className="relative">
+          {variant === "header" && (
+            <div className={bodyPaddingClass}>
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    {Icon && (
+                      <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
+                        <Icon 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">
+                      {title}
+                    </span>
+                  </div>
+                  {subtitle && (
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {subtitle}
+                    </p>
+                  )}
+                </div>
+                {actions && (
+                  <div className="flex-shrink-0">
+                    {actions}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          {variant === "compact" && (
+            <div className="p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]">
+              <div className="flex items-center gap-2 min-w-0">
+                {Icon && (
+                  <div className="p-1.5 rounded-lg bg-foreground/[0.04]">
+                    <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                  </div>
+                )}
+                <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
+                  {title}
+                </span>
+              </div>
+              {actions && (
+                <div className="flex-shrink-0">
+                  {actions}
+                </div>
+              )}
+            </div>
+          )}
+          {hasContent && (
+            <div
+              className={cn(
+                variant === "header" ? "border-t border-black/[0.12] dark:border-white/[0.06]" : "",
+                variant === "compact" ? "px-5 py-4" : "",
+                variant === "bodyOnly" || variant === "header" ? bodyPaddingClass : "",
+                contentClassName
+              )}
+            >
+              {children}
+            </div>
+          )}
+        </div>
+      </Card>
+    </DesignCardNestingContext.Provider>
+  );
+}
+
+export type DesignCardTintProps = {
+  gradient: DesignCardGradient,
+} & React.ComponentProps<"div">
+
+export function DesignCardTint({
+  gradient,
+  className,
+  children,
+  ...props
+}: DesignCardTintProps) {
+  const tintClass = demoTintClasses.get(gradient) ?? "group-hover/tint:bg-slate-500/[0.015]";
+
+  return (
+    <div
+      className={cn(
+        "group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl transition-all duration-150 hover:transition-none",
+        "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
+        "shadow-none overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl" />
+      <div
+        className={cn(
+          "absolute inset-0 transition-colors duration-150 group-hover/tint:transition-none pointer-events-none rounded-2xl",
+          tintClass
+        )}
+      />
+      <div className="relative">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/chart-card.tsx b/packages/dashboard-ui-components/src/components/chart-card.tsx
new file mode 100644
index 0000000000..5e7bb7769a
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/chart-card.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import React from "react";
+
+type DesignChartCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+
+const hoverTintClasses = new Map<DesignChartCardGradient, string>([
+  ["blue", "group-hover:bg-blue-500/[0.03]"],
+  ["cyan", "group-hover:bg-cyan-500/[0.03]"],
+  ["purple", "group-hover:bg-purple-500/[0.03]"],
+  ["green", "group-hover:bg-emerald-500/[0.03]"],
+  ["orange", "group-hover:bg-orange-500/[0.03]"],
+  ["default", "group-hover:bg-slate-500/[0.02]"],
+]);
+
+export type DesignChartCardProps = {
+  gradient?: DesignChartCardGradient,
+  title?: React.ReactNode,
+  description?: React.ReactNode,
+} & Omit<React.ComponentProps<"div">, "title">;
+
+export function DesignChartCard({
+  gradient = "default",
+  title,
+  description,
+  className,
+  children,
+  ...props
+}: DesignChartCardProps) {
+  const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: `
+        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper {
+          z-index: 9999 !important;
+          overflow: visible !important;
+        }
+        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper > * {
+          overflow: visible !important;
+        }
+      ` }} />
+      <div
+        className={cn(
+          "group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none design-chart-card-tooltip-escape",
+          "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
+          "shadow-sm hover:shadow-md hover:z-10",
+          className
+        )}
+        {...props}
+      >
+        <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl overflow-hidden" />
+        <div
+          className={cn(
+            "absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden",
+            hoverTintClass
+          )}
+        />
+        <div className="relative h-full flex flex-col p-4">
+          {(title || description) && (
+            <div className="mb-3">
+              {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
+              {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+            </div>
+          )}
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/chart-container.tsx b/packages/dashboard-ui-components/src/components/chart-container.tsx
new file mode 100644
index 0000000000..cba5a1b067
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/chart-container.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@stackframe/stack-ui";
+
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type DesignChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode,
+    icon?: React.ComponentType,
+  } & (
+    | { color?: string, theme?: never }
+    | { color?: never, theme: Record<keyof typeof THEMES, string> }
+  )
+};
+
+type ChartContextProps = {
+  config: DesignChartConfig,
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+export function useDesignChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useDesignChart must be used within a <DesignChartContainer />");
+  }
+  return context;
+}
+
+export function DesignChartStyle({ id, config }: { id: string, config: DesignChartConfig }) {
+  const colorConfig = Object.entries(config).filter(
+    ([_, cfg]) => cfg.theme || cfg.color
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+              .map(([key, itemConfig]) => {
+                const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+              })
+              .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  );
+}
+
+export const DesignChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    maxHeight?: number,
+    config: DesignChartConfig,
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"],
+  }
+>(({ id, className, children, config, maxHeight, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
+          "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-white/[0.06]",
+          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-black/[0.12] dark:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-white/[0.12]",
+          "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
+          "[&_.recharts-layer]:outline-none",
+          "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-white/[0.06]",
+          "[&_.recharts-radial-bar-background-sector]:fill-black/[0.04] dark:[&_.recharts-radial-bar-background-sector]:fill-white/[0.04]",
+          "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-black/[0.04] dark:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-white/[0.04]",
+          "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-reference-line_[stroke='#ccc']]:stroke-white/[0.06]",
+          "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
+          "[&_.recharts-sector]:outline-none",
+          "[&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+        style={{
+          ...props.style,
+          maxHeight,
+        }}
+      >
+        <DesignChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer maxHeight={maxHeight}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+DesignChartContainer.displayName = "DesignChartContainer";
+
+/**
+ * Helper to extract item config from a Recharts payload object.
+ */
+export function getPayloadConfigFromPayload(
+  config: DesignChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
diff --git a/packages/dashboard-ui-components/src/components/chart-legend.tsx b/packages/dashboard-ui-components/src/components/chart-legend.tsx
new file mode 100644
index 0000000000..65bc488e44
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/chart-legend.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@stackframe/stack-ui";
+import { useDesignChart, getPayloadConfigFromPayload } from "./chart-container";
+
+export const DesignChartLegend = RechartsPrimitive.Legend;
+
+export const DesignChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean,
+      nameKey?: string,
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useDesignChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-wrap items-center justify-center gap-2",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 rounded-full bg-foreground/[0.03] ring-1 ring-foreground/[0.06] px-3 py-1.5 text-xs",
+                "transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.05]"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <span
+                  className="h-2 w-2 shrink-0 rounded-full"
+                  style={{ backgroundColor: item.color }}
+                />
+              )}
+              <span className="font-medium text-foreground">
+                {itemConfig?.label || item.value}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+DesignChartLegendContent.displayName = "DesignChartLegendContent";
diff --git a/packages/dashboard-ui-components/src/components/chart-theme.tsx b/packages/dashboard-ui-components/src/components/chart-theme.tsx
new file mode 100644
index 0000000000..bdb0bcd1ec
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/chart-theme.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+export type DesignChartColorEntry = {
+  light: string,
+  dark: string,
+};
+
+/**
+ * Design-system-consistent chart colors that work in light and dark mode.
+ * Maps to the gradient system used across the dashboard design components.
+ */
+export const DESIGN_CHART_COLORS: readonly DesignChartColorEntry[] = [
+  { light: "hsl(221, 83%, 53%)", dark: "hsl(217, 91%, 60%)" },   // blue
+  { light: "hsl(192, 91%, 36%)", dark: "hsl(188, 94%, 43%)" },   // cyan
+  { light: "hsl(271, 91%, 65%)", dark: "hsl(270, 95%, 75%)" },   // purple
+  { light: "hsl(160, 84%, 39%)", dark: "hsl(160, 84%, 45%)" },   // emerald/green
+  { light: "hsl(38, 92%, 50%)",  dark: "hsl(38, 92%, 50%)" },    // amber/orange
+  { light: "hsl(0, 84%, 60%)",   dark: "hsl(0, 84%, 65%)" },     // red
+] as const;
+
+export type DesignChartColorName = "blue" | "cyan" | "purple" | "green" | "orange" | "red";
+
+const colorNameIndexMap = new Map<DesignChartColorName, number>([
+  ["blue", 0],
+  ["cyan", 1],
+  ["purple", 2],
+  ["green", 3],
+  ["orange", 4],
+  ["red", 5],
+]);
+
+/**
+ * Get a chart color by index (wraps around) or by name.
+ */
+export function getDesignChartColor(
+  indexOrName: number | DesignChartColorName,
+  mode: "light" | "dark" = "dark",
+): string {
+  const index = typeof indexOrName === "string"
+    ? colorNameIndexMap.get(indexOrName) ?? 0
+    : indexOrName % DESIGN_CHART_COLORS.length;
+  return DESIGN_CHART_COLORS[index][mode];
+}
+
+/**
+ * Recharts-compatible grid/axis styling constants that match the design system.
+ */
+export const DESIGN_CHART_GRID_COLOR = "hsl(0 0% 50% / 0.12)";
+export const DESIGN_CHART_AXIS_TICK_STYLE = {
+  fill: "hsl(0 0% 50% / 0.5)",
+  fontSize: 11,
+} as const;
diff --git a/packages/dashboard-ui-components/src/components/chart-tooltip.tsx b/packages/dashboard-ui-components/src/components/chart-tooltip.tsx
new file mode 100644
index 0000000000..c93e174ebd
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/chart-tooltip.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@stackframe/stack-ui";
+import { useDesignChart, getPayloadConfigFromPayload } from "./chart-container";
+
+export const DesignChartTooltip = RechartsPrimitive.Tooltip;
+
+export const DesignChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean,
+      hideIndicator?: boolean,
+      indicator?: "line" | "dot" | "dashed",
+      nameKey?: string,
+      labelKey?: string,
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useDesignChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const configEntry = typeof label === "string" ? config[label as keyof typeof config] : undefined;
+      const value =
+        !labelKey && typeof label === "string"
+          ? configEntry?.label ?? label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium text-muted-foreground tracking-wide", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium text-muted-foreground tracking-wide", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-xl bg-background/95 px-3.5 py-2.5 text-xs shadow-lg backdrop-blur-xl ring-1 ring-foreground/[0.08]",
+          className
+        )}
+        style={{ zIndex: 9999 }}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-full",
+                            {
+                              "h-2 w-2 ring-2 ring-white/20": indicator === "dot",
+                              "w-1 rounded-[2px]": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent rounded-[2px]":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                              backgroundColor: indicator === "dot" ? indicatorColor : undefined,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-[11px] text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="ml-auto font-mono text-xs font-semibold tabular-nums text-foreground">
+                          {typeof item.value === "number" ? item.value.toLocaleString() : item.value}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+DesignChartTooltipContent.displayName = "DesignChartTooltipContent";
diff --git a/apps/dashboard/src/components/design-components/cursor-blast-effect.tsx b/packages/dashboard-ui-components/src/components/cursor-blast-effect.tsx
similarity index 98%
rename from apps/dashboard/src/components/design-components/cursor-blast-effect.tsx
rename to packages/dashboard-ui-components/src/components/cursor-blast-effect.tsx
index 1ab0558fd7..d1985339e8 100644
--- a/apps/dashboard/src/components/design-components/cursor-blast-effect.tsx
+++ b/packages/dashboard-ui-components/src/components/cursor-blast-effect.tsx
@@ -161,7 +161,6 @@ export function CursorBlastEffect({
       }
       timeoutIds.clear();
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- containerRef identity is stable; config is read from ref
   }, [containerRef]);
 
   if (!mounted) {
@@ -203,7 +202,7 @@ export function CursorBlastEffect({
           })}
         </div>
       ))}
-      <style jsx>{`
+      <style dangerouslySetInnerHTML={{ __html: `
         .cursor-blast-ring {
           position: absolute;
           inset: 0;
@@ -290,7 +289,7 @@ export function CursorBlastEffect({
             animation-duration: 1ms;
           }
         }
-      `}</style>
+      ` }} />
     </>
   );
 
diff --git a/apps/dashboard/src/components/design-components/edit-mode.tsx b/packages/dashboard-ui-components/src/components/edit-mode.tsx
similarity index 100%
rename from apps/dashboard/src/components/design-components/edit-mode.tsx
rename to packages/dashboard-ui-components/src/components/edit-mode.tsx
diff --git a/packages/dashboard-ui-components/src/components/empty-state.tsx b/packages/dashboard-ui-components/src/components/empty-state.tsx
new file mode 100644
index 0000000000..4be0d18ddd
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/empty-state.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import React from "react";
+
+export type DesignEmptyStateProps = {
+  icon?: React.ElementType,
+  title?: string,
+  description?: string,
+  children?: React.ReactNode,
+  className?: string,
+};
+
+export function DesignEmptyState({
+  icon: Icon,
+  title = "No data available",
+  description,
+  children,
+  className,
+}: DesignEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center py-12 px-6 text-center",
+        className
+      )}
+    >
+      {Icon && (
+        <div className="mb-4">
+          <Icon className="h-10 w-10 text-muted-foreground/30" />
+        </div>
+      )}
+      <h3 className="text-sm font-medium text-foreground">
+        {title}
+      </h3>
+      {description && (
+        <p className="mt-1 text-xs text-muted-foreground max-w-[280px]">
+          {description}
+        </p>
+      )}
+      {children && (
+        <div className="mt-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/input.tsx b/packages/dashboard-ui-components/src/components/input.tsx
new file mode 100644
index 0000000000..3b61bc5297
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/input.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
+import React from "react";
+
+import { cn } from "@stackframe/stack-ui";
+
+export type DesignInputProps = {
+  prefixItem?: React.ReactNode,
+  leadingIcon?: React.ReactNode,
+  size?: "sm" | "md" | "lg",
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+
+export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(
+  ({ className, type, prefixItem, leadingIcon, size = "md", ...props }, ref) => {
+    const sizeClasses = size === "sm"
+      ? "h-7 px-2 text-xs"
+      : size === "lg"
+        ? "h-10 px-4 text-sm"
+        : "h-9 px-3 text-sm";
+    const baseClasses = cn(
+      "stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
+      "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+      "placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]",
+      sizeClasses
+    );
+
+    if (prefixItem) {
+      return (
+        <div className="flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]">
+          <div className={cn(
+            "flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]",
+            size === "sm" ? "px-2.5 text-xs" : size === "lg" ? "px-3.5 text-sm" : "px-3 text-sm"
+          )}>
+            {prefixItem}
+          </div>
+          <input
+            type={type}
+            className={cn(
+              "stack-scope flex w-full bg-transparent",
+              "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+              "placeholder:text-muted-foreground/50 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              sizeClasses,
+              "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0",
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    if (leadingIcon) {
+      return (
+        <div className="relative flex flex-row items-center flex-1">
+          <div className="pointer-events-none absolute left-2.5 flex items-center text-muted-foreground">
+            {leadingIcon}
+          </div>
+          <input
+            type={type}
+            className={cn(baseClasses, "pl-8", className)}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex flex-row items-center flex-1">
+        <input
+          type={type}
+          className={cn(baseClasses, className)}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+DesignInput.displayName = "DesignInput";
diff --git a/packages/dashboard-ui-components/src/components/metric-card.tsx b/packages/dashboard-ui-components/src/components/metric-card.tsx
new file mode 100644
index 0000000000..73cdf702fa
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/metric-card.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import React from "react";
+
+type DesignMetricCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+
+const hoverTintClasses = new Map<DesignMetricCardGradient, string>([
+  ["blue", "group-hover:bg-blue-500/[0.03]"],
+  ["cyan", "group-hover:bg-cyan-500/[0.03]"],
+  ["purple", "group-hover:bg-purple-500/[0.03]"],
+  ["green", "group-hover:bg-emerald-500/[0.03]"],
+  ["orange", "group-hover:bg-orange-500/[0.03]"],
+  ["default", "group-hover:bg-slate-500/[0.02]"],
+]);
+
+export type DesignMetricCardTrend = {
+  value: number,
+  direction: "up" | "down",
+  label?: string,
+};
+
+export type DesignMetricCardProps = {
+  label: string,
+  value: string | number,
+  description?: string,
+  trend?: DesignMetricCardTrend,
+  icon?: React.ElementType,
+  gradient?: DesignMetricCardGradient,
+} & Omit<React.ComponentProps<"div">, "children">;
+
+export function DesignMetricCard({
+  label,
+  value,
+  description,
+  trend,
+  icon: Icon,
+  gradient = "default",
+  className,
+  ...props
+}: DesignMetricCardProps) {
+  const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+
+  return (
+    <div
+      className={cn(
+        "group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none overflow-hidden",
+        "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
+        "shadow-sm hover:shadow-md",
+        className
+      )}
+      {...props}
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl" />
+      <div
+        className={cn(
+          "absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl",
+          hoverTintClass
+        )}
+      />
+      <div className="relative p-5">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              {Icon && (
+                <div className="p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]">
+                  <Icon className="h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" />
+                </div>
+              )}
+              <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                {label}
+              </span>
+            </div>
+            <div className="mt-3 flex items-baseline gap-2">
+              <span className="text-3xl font-bold tabular-nums text-foreground">
+                {typeof value === "number" ? value.toLocaleString() : value}
+              </span>
+              {trend && (
+                <span
+                  className={cn(
+                    "inline-flex items-center gap-0.5 text-xs font-medium",
+                    trend.direction === "up"
+                      ? "text-emerald-600 dark:text-emerald-400"
+                      : "text-red-600 dark:text-red-400"
+                  )}
+                >
+                  <svg
+                    className={cn("h-3 w-3", trend.direction === "down" && "rotate-180")}
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                  {trend.value}%
+                  {trend.label && (
+                    <span className="text-muted-foreground ml-0.5">{trend.label}</span>
+                  )}
+                </span>
+              )}
+            </div>
+            {description && (
+              <p className="mt-1 text-xs text-muted-foreground">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/design-components/pill-toggle.tsx b/packages/dashboard-ui-components/src/components/pill-toggle.tsx
similarity index 96%
rename from apps/dashboard/src/components/design-components/pill-toggle.tsx
rename to packages/dashboard-ui-components/src/components/pill-toggle.tsx
index 7c37606a16..0abae2b2e7 100644
--- a/apps/dashboard/src/components/design-components/pill-toggle.tsx
+++ b/packages/dashboard-ui-components/src/components/pill-toggle.tsx
@@ -1,11 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { cn } from "@/lib/utils";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn, Spinner, Tooltip, TooltipContent, TooltipTrigger } from "@stackframe/stack-ui";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Spinner } from "@/components/ui/spinner";
 import { useGlassmorphicDefault } from "./card";
 
 type DesignPillToggleSize = "sm" | "md" | "lg";
diff --git a/packages/dashboard-ui-components/src/components/progress-bar.tsx b/packages/dashboard-ui-components/src/components/progress-bar.tsx
new file mode 100644
index 0000000000..e3448f7336
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/progress-bar.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+
+type DesignProgressBarGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+
+const fillClasses = new Map<DesignProgressBarGradient, string>([
+  ["blue", "bg-blue-500 dark:bg-blue-400"],
+  ["cyan", "bg-cyan-500 dark:bg-cyan-400"],
+  ["purple", "bg-purple-500 dark:bg-purple-400"],
+  ["green", "bg-emerald-500 dark:bg-emerald-400"],
+  ["orange", "bg-amber-500 dark:bg-amber-400"],
+  ["default", "bg-foreground/60"],
+]);
+
+export type DesignProgressBarProps = {
+  value: number,
+  max?: number,
+  gradient?: DesignProgressBarGradient,
+  label?: string,
+  showPercentage?: boolean,
+  size?: "sm" | "md" | "lg",
+  className?: string,
+};
+
+export function DesignProgressBar({
+  value,
+  max = 100,
+  gradient = "default",
+  label,
+  showPercentage = false,
+  size = "md",
+  className,
+}: DesignProgressBarProps) {
+  const percentage = max > 0 ? Math.min(Math.max((value / max) * 100, 0), 100) : 0;
+  const fillClass = fillClasses.get(gradient) ?? "bg-foreground/60";
+
+  const trackHeight = size === "sm" ? "h-1.5" : size === "lg" ? "h-3" : "h-2";
+
+  return (
+    <div className={cn("w-full", className)}>
+      {(label || showPercentage) && (
+        <div className="flex items-center justify-between mb-2">
+          {label && (
+            <span className="text-xs font-medium text-muted-foreground">
+              {label}
+            </span>
+          )}
+          {showPercentage && (
+            <span className="text-xs font-medium tabular-nums text-foreground">
+              {Math.round(percentage)}%
+            </span>
+          )}
+        </div>
+      )}
+      <div
+        className={cn(
+          "w-full rounded-full bg-black/[0.06] dark:bg-white/[0.06] overflow-hidden",
+          trackHeight
+        )}
+      >
+        <div
+          className={cn(
+            "h-full rounded-full transition-all duration-300 ease-out",
+            fillClass
+          )}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/separator.tsx b/packages/dashboard-ui-components/src/components/separator.tsx
new file mode 100644
index 0000000000..b97487de64
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/separator.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+
+export type DesignSeparatorProps = {
+  orientation?: "horizontal" | "vertical",
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export function DesignSeparator({
+  orientation = "horizontal",
+  className,
+  ...props
+}: DesignSeparatorProps) {
+  return (
+    <div
+      role="separator"
+      aria-orientation={orientation}
+      className={cn(
+        orientation === "horizontal"
+          ? "h-[1px] w-full bg-black/[0.08] dark:bg-white/[0.06]"
+          : "w-[1px] h-full bg-black/[0.08] dark:bg-white/[0.06]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/skeleton.tsx b/packages/dashboard-ui-components/src/components/skeleton.tsx
new file mode 100644
index 0000000000..248d8d31f4
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/skeleton.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { cn } from "@stackframe/stack-ui";
+import type React from "react";
+
+export type DesignSkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+
+export function DesignSkeleton({ className, ...props }: DesignSkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-black/[0.06] dark:bg-white/[0.06]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/dashboard-ui-components/src/components/table.tsx b/packages/dashboard-ui-components/src/components/table.tsx
new file mode 100644
index 0000000000..18f95606cf
--- /dev/null
+++ b/packages/dashboard-ui-components/src/components/table.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
+import { cn } from "@stackframe/stack-ui";
+import React from "react";
+
+export const DesignTable = forwardRefIfNeeded<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+DesignTable.displayName = "DesignTable";
+
+export const DesignTableHeader = forwardRefIfNeeded<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn("bg-foreground/[0.02] [&_tr]:border-b [&_tr]:border-black/[0.06] dark:[&_tr]:border-white/[0.06]", className)}
+    {...props}
+  />
+));
+DesignTableHeader.displayName = "DesignTableHeader";
+
+export const DesignTableBody = forwardRefIfNeeded<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+DesignTableBody.displayName = "DesignTableBody";
+
+export const DesignTableRow = forwardRefIfNeeded<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-black/[0.06] dark:border-white/[0.06] transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.04] data-[state=selected]:bg-foreground/[0.06]",
+      className
+    )}
+    {...props}
+  />
+));
+DesignTableRow.displayName = "DesignTableRow";
+
+export const DesignTableHead = forwardRefIfNeeded<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+DesignTableHead.displayName = "DesignTableHead";
+
+export const DesignTableCell = forwardRefIfNeeded<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+DesignTableCell.displayName = "DesignTableCell";
diff --git a/apps/dashboard/src/components/design-components/tabs.tsx b/packages/dashboard-ui-components/src/components/tabs.tsx
similarity index 98%
rename from apps/dashboard/src/components/design-components/tabs.tsx
rename to packages/dashboard-ui-components/src/components/tabs.tsx
index a765b4d9ba..3f7735420e 100644
--- a/apps/dashboard/src/components/design-components/tabs.tsx
+++ b/packages/dashboard-ui-components/src/components/tabs.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { cn } from "@/lib/utils";
+import { cn, Spinner } from "@stackframe/stack-ui";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Spinner } from "@/components/ui/spinner";
 import { useGlassmorphicDefault } from "./card";
 
 type DesignTabsSize = "sm" | "md";
diff --git a/packages/dashboard-ui-components/src/index.ts b/packages/dashboard-ui-components/src/index.ts
new file mode 100644
index 0000000000..39cff89c82
--- /dev/null
+++ b/packages/dashboard-ui-components/src/index.ts
@@ -0,0 +1,55 @@
+export { DesignAlert } from "./components/alert";
+export type { DesignAlertProps } from "./components/alert";
+
+export { DesignBadge } from "./components/badge";
+export type { DesignBadgeColor, DesignBadgeSize, DesignBadgeContentMode, DesignBadgeProps } from "./components/badge";
+
+export { DesignButton } from "./components/button";
+export type { DesignOriginalButtonProps, DesignButtonProps } from "./components/button";
+
+export { DesignCard, DesignCardTint, useInsideDesignCard, useGlassmorphicDefault } from "./components/card";
+export type { DesignCardProps, DesignCardTintProps } from "./components/card";
+
+export { CursorBlastEffect } from "./components/cursor-blast-effect";
+export type { CursorBlastEffectProps } from "./components/cursor-blast-effect";
+
+export { DesignEditMode, useDesignEditMode } from "./components/edit-mode";
+
+export { DesignInput } from "./components/input";
+export type { DesignInputProps } from "./components/input";
+
+export { DesignPillToggle } from "./components/pill-toggle";
+export type { DesignPillToggleOption, DesignPillToggleProps } from "./components/pill-toggle";
+
+export { DesignSeparator } from "./components/separator";
+export type { DesignSeparatorProps } from "./components/separator";
+
+export { DesignSkeleton } from "./components/skeleton";
+export type { DesignSkeletonProps } from "./components/skeleton";
+
+export { DesignTable, DesignTableHeader, DesignTableBody, DesignTableRow, DesignTableHead, DesignTableCell } from "./components/table";
+
+export { DesignCategoryTabs } from "./components/tabs";
+export type { DesignCategoryTabItem, DesignCategoryTabsProps } from "./components/tabs";
+
+export { DESIGN_CHART_COLORS, getDesignChartColor, DESIGN_CHART_GRID_COLOR, DESIGN_CHART_AXIS_TICK_STYLE } from "./components/chart-theme";
+export type { DesignChartColorEntry, DesignChartColorName } from "./components/chart-theme";
+
+export { DesignChartContainer, DesignChartStyle, useDesignChart, getPayloadConfigFromPayload } from "./components/chart-container";
+export type { DesignChartConfig } from "./components/chart-container";
+
+export { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip";
+
+export { DesignChartLegend, DesignChartLegendContent } from "./components/chart-legend";
+
+export { DesignChartCard } from "./components/chart-card";
+export type { DesignChartCardProps } from "./components/chart-card";
+
+export { DesignMetricCard } from "./components/metric-card";
+export type { DesignMetricCardProps, DesignMetricCardTrend } from "./components/metric-card";
+
+export { DesignProgressBar } from "./components/progress-bar";
+export type { DesignProgressBarProps } from "./components/progress-bar";
+
+export { DesignEmptyState } from "./components/empty-state";
+export type { DesignEmptyStateProps } from "./components/empty-state";
diff --git a/packages/dashboard-ui-components/tsconfig.json b/packages/dashboard-ui-components/tsconfig.json
new file mode 100644
index 0000000000..df0bb61e92
--- /dev/null
+++ b/packages/dashboard-ui-components/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "declarationMap": true,
+    "target": "ES2021",
+    "lib": ["DOM", "DOM.Iterable", "ES2021", "ES2022.Error"],
+    "module": "ES2020",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "noErrorTruncation": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "types": [
+      "vitest/importMeta"
+    ]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/dashboard-ui-components/tsdown.config.ts b/packages/dashboard-ui-components/tsdown.config.ts
new file mode 100644
index 0000000000..522742efb0
--- /dev/null
+++ b/packages/dashboard-ui-components/tsdown.config.ts
@@ -0,0 +1,3 @@
+import createJsLibraryTsupConfig from '../../configs/tsdown/js-library.ts';
+
+export default createJsLibraryTsupConfig({ barrelFiles: ["src/index.ts"] });
diff --git a/packages/stack-shared/src/config/schema-fuzzer.test.ts b/packages/stack-shared/src/config/schema-fuzzer.test.ts
index a1fddcbff6..dde9b524db 100644
--- a/packages/stack-shared/src/config/schema-fuzzer.test.ts
+++ b/packages/stack-shared/src/config/schema-fuzzer.test.ts
@@ -262,6 +262,12 @@ const environmentSchemaFuzzerConfig = [{
       }],
     }],
   }],
+  customDashboards: [{
+    "12345678-1234-4234-9234-123456789012": [{
+      displayName: ["My Dashboard", "User Growth Dashboard"],
+      tsxSource: ["", "function Dashboard() { return <div>Hello</div>; }"],
+    }],
+  }],
 }] satisfies FuzzerConfig<EnvironmentConfigNormalizedOverride>;
 
 const organizationSchemaFuzzerConfig = environmentSchemaFuzzerConfig satisfies FuzzerConfig<OrganizationConfigNormalizedOverride>;
diff --git a/packages/stack-shared/src/config/schema.ts b/packages/stack-shared/src/config/schema.ts
index 21620ac992..a4d43702e5 100644
--- a/packages/stack-shared/src/config/schema.ts
+++ b/packages/stack-shared/src/config/schema.ts
@@ -355,6 +355,7 @@ export const environmentConfigSchema = branchConfigSchema.concat(yupObject({
   })),
 
   analytics: environmentAnalyticsSchema,
+  customDashboards: schemaFields.customDashboardsSchema,
 }));
 
 export const organizationConfigSchema = environmentConfigSchema.concat(yupObject({}));
@@ -723,6 +724,11 @@ const organizationConfigDefaults = {
       }),
     }),
   },
+
+  customDashboards: (key: string) => ({
+    displayName: "Unnamed Dashboard",
+    tsxSource: "Error: Dashboard config is missing source code.",
+  }),
 } as const satisfies DefaultsType<OrganizationRenderedConfigBeforeDefaults, [typeof environmentConfigDefaults, typeof branchConfigDefaults, typeof projectConfigDefaults]>;
 
 type _DeepOmitDefaultsImpl<T, U> = T extends object ? (
diff --git a/packages/stack-shared/src/interface/admin-interface.ts b/packages/stack-shared/src/interface/admin-interface.ts
index d73004ff9d..9971ad5586 100644
--- a/packages/stack-shared/src/interface/admin-interface.ts
+++ b/packages/stack-shared/src/interface/admin-interface.ts
@@ -4,7 +4,6 @@ import { branchConfigSourceSchema, type RestrictedReason } from "../schema-field
 import { AccessToken, InternalSession, RefreshToken } from "../sessions";
 import type { MoneyAmount } from "../utils/currency-constants";
 import type { Json } from "../utils/json";
-import type { EditableMetadata } from "../utils/jsx-editable-transpiler";
 import { Result } from "../utils/results";
 import type { AnalyticsQueryOptions, AnalyticsQueryResponse } from "./crud/analytics";
 import { EmailOutboxCrud } from "./crud/email-outbox";
@@ -483,28 +482,6 @@ export class StackAdminInterface extends StackServerInterface {
     );
   }
 
-
-  async sendChatMessage(
-    threadId: string,
-    contextType: "email-theme" | "email-template" | "email-draft",
-    messages: Array<{ role: string, content: any }>,
-    abortSignal?: AbortSignal,
-  ): Promise<{ content: ChatContent }> {
-    const response = await this.sendAdminRequest(
-      `/internal/ai-chat/${threadId}`,
-      {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify({ context_type: contextType, messages }),
-        signal: abortSignal,
-      },
-      null,
-    );
-    return await response.json();
-  }
-
   async saveChatMessage(threadId: string, message: any): Promise<void> {
     await this.sendAdminRequest(
       `/internal/ai-chat/${threadId}`,
@@ -528,38 +505,6 @@ export class StackAdminInterface extends StackServerInterface {
     return await response.json();
   }
 
-  async applyWysiwygEdit(options: {
-    sourceType: "template" | "theme" | "draft",
-    sourceCode: string,
-    oldText: string,
-    newText: string,
-    metadata: EditableMetadata,
-    domPath: Array<{ tagName: string, index: number }>,
-    htmlContext: string,
-  }): Promise<{ updatedSource: string }> {
-    const response = await this.sendAdminRequest(
-      `/internal/wysiwyg-edit`,
-      {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify({
-          source_type: options.sourceType,
-          source_code: options.sourceCode,
-          old_text: options.oldText,
-          new_text: options.newText,
-          metadata: options.metadata,
-          dom_path: options.domPath.map(item => ({ tag_name: item.tagName, index: item.index })),
-          html_context: options.htmlContext,
-        }),
-      },
-      null,
-    );
-    const result = await response.json();
-    return { updatedSource: result.updated_source };
-  }
-
   async renderEmailPreview(options: {
     themeId?: string | null | false,
     themeTsxSource?: string,
diff --git a/packages/stack-shared/src/schema-fields.ts b/packages/stack-shared/src/schema-fields.ts
index e54d115311..1a0abc064c 100644
--- a/packages/stack-shared/src/schema-fields.ts
+++ b/packages/stack-shared/src/schema-fields.ts
@@ -616,6 +616,15 @@ export const emailTemplateListSchema = yupRecord(
   })
 ).meta({ openapiField: { description: 'Record of email template IDs to their display name and source code' } });
 
+// Custom dashboards
+export const customDashboardsSchema = yupRecord(
+  yupString().uuid(),
+  yupObject({
+    displayName: yupString().meta({ openapiField: { description: 'Custom dashboard name', exampleValue: 'User Growth Dashboard' } }).defined(),
+    tsxSource: yupString().meta({ openapiField: { description: 'Custom dashboard source code tsx component' } }).defined(),
+  })
+).meta({ openapiField: { description: 'Record of custom dashboard IDs to their display name and source code' } });
+
 // Payments
 export const customerTypeSchema = yupString().oneOf(['user', 'team', 'custom']);
 const validateHasAtLeastOneSupportedCurrency = (value: Record<string, unknown> | null, context: any) => {
diff --git a/packages/stack-shared/src/utils/react.tsx b/packages/stack-shared/src/utils/react.tsx
index f0a521f7ea..742fc9798b 100644
--- a/packages/stack-shared/src/utils/react.tsx
+++ b/packages/stack-shared/src/utils/react.tsx
@@ -165,9 +165,18 @@ export type RefState<T> = ReadonlyRef<T> & {
  *
  * If you don't want this, you can wrap the result in a useMemo call.
  */
-export function useRefState<T>(initialValue: T): RefState<T> {
-  const [, setState] = React.useState(initialValue);
-  const ref = React.useRef(initialValue);
+export function useRefState<T>(initialValue: T | (() => T)): RefState<T> {
+  // Support lazy initialization like React.useState does: if initialValue is a function,
+  // call it once to get the actual initial value (React.useRef does NOT do this automatically).
+  const lazyInitRef = React.useRef<{ v: T } | null>(null);
+  if (lazyInitRef.current === null) {
+    lazyInitRef.current = {
+      v: typeof initialValue === "function" ? (initialValue as () => T)() : initialValue,
+    };
+  }
+  const resolvedInitialValue = lazyInitRef.current.v;
+  const [, setState] = React.useState<T>(() => resolvedInitialValue);
+  const ref = React.useRef(resolvedInitialValue);
   const setValue = React.useCallback((updater: SetStateAction<T>) => {
     const value: T = typeof updater === "function" ? (updater as any)(ref.current) : updater;
     ref.current = value;
diff --git a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
index e6c4146acb..9ea25231db 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
@@ -26,9 +26,7 @@ import { clientVersion, createCache, getBaseUrl, getDefaultExtraRequestHeaders,
 import { _StackServerAppImplIncomplete } from "./server-app-impl";
 
 import { CompleteConfig, EnvironmentConfigOverrideOverride } from "@stackframe/stack-shared/dist/config/schema";
-import { ChatContent } from "@stackframe/stack-shared/dist/interface/admin-interface";
 import { branchConfigSourceSchema } from "@stackframe/stack-shared/dist/schema-fields";
-import type { EditableMetadata } from "@stackframe/stack-shared/dist/utils/jsx-editable-transpiler";
 import * as yup from "yup";
 import { PushedConfigSource } from "../../projects";
 import { useAsyncCache } from "./common"; // THIS_LINE_PLATFORM react-like
@@ -698,15 +696,6 @@ export class _StackAdminAppImplIncomplete<HasTokenStore extends boolean, Project
     await this._adminEmailDraftsCache.refresh([]);
   }
 
-  async sendChatMessage(
-    threadId: string,
-    contextType: "email-theme" | "email-template" | "email-draft",
-    messages: Array<{ role: string, content: any }>,
-    abortSignal?: AbortSignal,
-  ): Promise<{ content: ChatContent }> {
-    return await this._interface.sendChatMessage(threadId, contextType, messages, abortSignal);
-  }
-
   async saveChatMessage(threadId: string, message: any): Promise<void> {
     await this._interface.saveChatMessage(threadId, message);
   }
@@ -715,18 +704,6 @@ export class _StackAdminAppImplIncomplete<HasTokenStore extends boolean, Project
     return await this._interface.listChatMessages(threadId);
   }
 
-  async applyWysiwygEdit(options: {
-    sourceType: "template" | "theme" | "draft",
-    sourceCode: string,
-    oldText: string,
-    newText: string,
-    metadata: EditableMetadata,
-    domPath: Array<{ tagName: string, index: number }>,
-    htmlContext: string,
-  }): Promise<{ updatedSource: string }> {
-    return await this._interface.applyWysiwygEdit(options);
-  }
-
   async rewriteTemplateSourceWithAI(templateTsxSource: string): Promise<{ tsxSource: string }> {
     const result = await this._interface.rewriteTemplateSourceWithAI(templateTsxSource);
     return { tsxSource: result.tsx_source };
diff --git a/packages/template/src/lib/stack-app/apps/interfaces/admin-app.ts b/packages/template/src/lib/stack-app/apps/interfaces/admin-app.ts
index f2568b06f0..e496da0f97 100644
--- a/packages/template/src/lib/stack-app/apps/interfaces/admin-app.ts
+++ b/packages/template/src/lib/stack-app/apps/interfaces/admin-app.ts
@@ -1,10 +1,8 @@
-import { ChatContent } from "@stackframe/stack-shared/dist/interface/admin-interface";
 import { AnalyticsQueryOptions, AnalyticsQueryResponse } from "@stackframe/stack-shared/dist/interface/crud/analytics";
 import type { AdminGetSessionReplayChunkEventsResponse, AdminGetSessionReplayAllEventsResponse } from "@stackframe/stack-shared/dist/interface/crud/session-replays";
 import type { Transaction, TransactionType } from "@stackframe/stack-shared/dist/interface/crud/transactions";
 import { InternalSession } from "@stackframe/stack-shared/dist/sessions";
 import type { MoneyAmount } from "@stackframe/stack-shared/dist/utils/currency-constants";
-import type { EditableMetadata } from "@stackframe/stack-shared/dist/utils/jsx-editable-transpiler";
 import { Result } from "@stackframe/stack-shared/dist/utils/results";
 import { AsyncStoreProperty, EmailConfig } from "../../common";
 import { AdminEmailOutbox, AdminSentEmail } from "../../email";
@@ -121,24 +119,8 @@ export type StackAdminApp<HasTokenStore extends boolean = boolean, ProjectId ext
     createEmailTheme(displayName: string): Promise<{ id: string }>,
     updateEmailTheme(id: string, tsxSource: string): Promise<void>,
     deleteEmailTheme(id: string): Promise<void>,
-
-    sendChatMessage(
-      threadId: string,
-      contextType: "email-theme" | "email-template" | "email-draft",
-      messages: Array<{ role: string, content: any }>,
-      abortSignal?: AbortSignal,
-    ): Promise<{ content: ChatContent }>,
     saveChatMessage(threadId: string, message: any): Promise<void>,
     listChatMessages(threadId: string): Promise<{ messages: Array<any> }>,
-    applyWysiwygEdit(options: {
-      sourceType: "template" | "theme" | "draft",
-      sourceCode: string,
-      oldText: string,
-      newText: string,
-      metadata: EditableMetadata,
-      domPath: Array<{ tagName: string, index: number }>,
-      htmlContext: string,
-    }): Promise<{ updatedSource: string }>,
     rewriteTemplateSourceWithAI(templateTsxSource: string): Promise<{ tsxSource: string }>,
     updateEmailTemplate(id: string, tsxSource: string, themeId: string | null | false): Promise<{ renderedHtml: string }>,
     createEmailTemplate(displayName: string): Promise<{ id: string }>,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8627d2f71..91acdb27e6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,9 +111,12 @@ importers:
 
   apps/backend:
     dependencies:
+      '@ai-sdk/mcp':
+        specifier: ^1.0.21
+        version: 1.0.21(zod@3.25.76)
       '@ai-sdk/openai':
-        specifier: ^1.3.23
-        version: 1.3.23(zod@3.25.76)
+        specifier: ^3.0.29
+        version: 3.0.29(zod@3.25.76)
       '@aws-sdk/client-s3':
         specifier: ^3.855.0
         version: 3.864.0
@@ -123,6 +126,9 @@ importers:
       '@node-oauth/oauth2-server':
         specifier: ^5.1.0
         version: 5.1.0
+      '@openrouter/ai-sdk-provider':
+        specifier: 2.2.3
+        version: 2.2.3(ai@6.0.81(zod@3.25.76))(zod@3.25.76)
       '@opentelemetry/api':
         specifier: ^1.9.0
         version: 1.9.0
@@ -205,8 +211,8 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       ai:
-        specifier: ^4.3.17
-        version: 4.3.17(react@19.2.3)(zod@3.25.76)
+        specifier: ^6.0.0
+        version: 6.0.81(zod@3.25.76)
       bcrypt:
         specifier: ^5.1.1
         version: 5.1.1(encoding@0.1.13)
@@ -343,9 +349,6 @@ importers:
 
   apps/dashboard:
     dependencies:
-      '@ai-sdk/openai':
-        specifier: ^3.0.25
-        version: 3.0.27(zod@4.1.12)
       '@ai-sdk/react':
         specifier: ^3.0.72
         version: 3.0.83(react@19.2.3)(zod@4.1.12)
@@ -469,6 +472,9 @@ importers:
       '@sentry/nextjs':
         specifier: ^10.11.0
         version: 10.11.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.5(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(webpack@5.92.0(esbuild@0.24.2))
+      '@stackframe/dashboard-ui-components':
+        specifier: workspace:*
+        version: link:../../packages/dashboard-ui-components
       '@stackframe/stack':
         specifier: workspace:*
         version: link:../../packages/stack
@@ -541,6 +547,9 @@ importers:
       next:
         specifier: 16.1.5
         version: 16.1.5(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next-themes:
+        specifier: ^0.2.1
+        version: 0.2.1(next@16.1.5(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       posthog-js:
         specifier: ^1.336.1
         version: 1.336.1
@@ -629,6 +638,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.17
         version: 10.4.19(postcss@8.4.38)
+      concurrently:
+        specifier: ^8.2.2
+        version: 8.2.2
       glob:
         specifier: ^10.4.1
         version: 10.4.1
@@ -701,28 +713,28 @@ importers:
         version: link:../../packages/stack-shared
       '@tanstack/react-router':
         specifier: ^1.121.3
-        version: 1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@tanstack/react-start':
         specifier: ^1.121.3
-        version: 1.163.2(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
+        version: 1.166.6(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
       '@tanstack/react-start-client':
         specifier: ^1.121.3
-        version: 1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@tanstack/react-start-server':
         specifier: ^1.121.3
-        version: 1.163.2(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.166.6(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@tanstack/start-client-core':
         specifier: ^1.121.3
-        version: 1.163.2
+        version: 1.166.6
       '@tanstack/start-plugin-core':
         specifier: ^1.121.3
-        version: 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(crossws@0.4.4(srvx@0.8.16))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
+        version: 1.166.6(@tanstack/react-router@1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(crossws@0.4.4(srvx@0.8.16))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
       '@tanstack/start-server-core':
         specifier: ^1.121.3
-        version: 1.163.2(crossws@0.4.4(srvx@0.8.16))
+        version: 1.166.6(crossws@0.4.4(srvx@0.8.16))
       nitro:
         specifier: ^3.0.0
-        version: 3.0.0(@electric-sql/pglite@0.3.2)(chokidar@4.0.3)(lru-cache@11.2.2)(mysql2@3.15.3)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))
+        version: 3.0.0(@electric-sql/pglite@0.3.2)(chokidar@4.0.3)(lru-cache@11.2.2)(mysql2@3.15.3)(rolldown@1.0.0-rc.3)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))
       react:
         specifier: 19.2.1
         version: 19.2.1
@@ -780,14 +792,11 @@ importers:
   docs:
     dependencies:
       '@ai-sdk/react':
-        specifier: ^1.2.12
-        version: 1.2.12(react@18.3.1)(zod@3.25.76)
+        specifier: ^3.0.0
+        version: 3.0.83(react@18.3.1)(zod@3.25.76)
       '@modelcontextprotocol/sdk':
         specifier: ^1.17.2
         version: 1.17.2
-      '@openrouter/ai-sdk-provider':
-        specifier: 0.7.5
-        version: 0.7.5(ai@4.3.17(react@18.3.1)(zod@3.25.76))(zod@3.25.76)
       '@phosphor-icons/react':
         specifier: ^2.1.10
         version: 2.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -819,8 +828,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0(@modelcontextprotocol/sdk@1.17.2)(next@15.5.10(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       ai:
-        specifier: ^4.3.17
-        version: 4.3.17(react@18.3.1)(zod@3.25.76)
+        specifier: ^6.0.0
+        version: 6.0.81(zod@3.25.76)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -1471,10 +1480,10 @@ importers:
         version: link:../../packages/stack
       '@supabase/ssr':
         specifier: latest
-        version: 0.9.0(@supabase/supabase-js@2.99.0)
+        version: 0.8.0(@supabase/supabase-js@2.95.3)
       '@supabase/supabase-js':
         specifier: latest
-        version: 2.99.0
+        version: 2.95.3
       jose:
         specifier: ^5.2.2
         version: 5.6.3
@@ -1501,6 +1510,55 @@ importers:
         specifier: 5.9.3
         version: 5.9.3
 
+  packages/dashboard-ui-components:
+    dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@phosphor-icons/react':
+        specifier: ^2.1.7
+        version: 2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot':
+        specifier: ^1.1.0
+        version: 1.2.4(@types/react@18.3.12)(react@19.2.3)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.1.3
+        version: 1.2.8(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-hook/resize-observer':
+        specifier: ^2.0.2
+        version: 2.0.2(react@19.2.3)
+      '@stackframe/stack-shared':
+        specifier: workspace:*
+        version: link:../stack-shared
+      '@stackframe/stack-ui':
+        specifier: workspace:*
+        version: link:../stack-ui
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.1
+    devDependencies:
+      '@types/react':
+        specifier: ^18.2.0
+        version: 18.3.12
+      '@types/react-dom':
+        specifier: ^18.2.0
+        version: 18.3.1
+      esbuild:
+        specifier: ^0.24.0
+        version: 0.24.2
+      react:
+        specifier: ^19.0.1
+        version: 19.2.3
+      react-dom:
+        specifier: ^19.0.1
+        version: 19.2.3(react@19.2.3)
+      recharts:
+        specifier: ^2.14.1
+        version: 2.15.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      rimraf:
+        specifier: ^5.0.10
+        version: 5.0.10
+
   packages/init-stack:
     dependencies:
       '@stackframe/stack-shared':
@@ -2365,14 +2423,14 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/openai@1.3.23':
-    resolution: {integrity: sha512-86U7rFp8yacUAOE/Jz8WbGcwMCqWvjK33wk5DXkfnAOEn3mx2r7tNSJdjukQFZbAK97VMXGPPHxF+aEARDXRXQ==}
+  '@ai-sdk/mcp@1.0.21':
+    resolution: {integrity: sha512-dRX2X6GDadZNpiylNnw0HP7zJC8ggVOOJV/JtxuF6CgtP8CKnc7a/wEzpUw1m/4AGdD3mTDhKnKFwC4y10a8FQ==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.0.0
+      zod: ^3.25.76 || ^4.1.8
 
-  '@ai-sdk/openai@3.0.27':
-    resolution: {integrity: sha512-pLMxWOypwroXiK9dxNpn60/HGhWWWDEOJ3lo9vZLoxvpJNtKnLKojwVIvlW3yEjlD7ll1+jUO2uzsABNTaP5Yg==}
+  '@ai-sdk/openai@3.0.29':
+    resolution: {integrity: sha512-ugVTIVpuSLKTjzSPe1F1DWiblJT/lwrrHx0OZEKjpMk/EYP6j6VD/F7SJqM1dsqOJryeBCJWFbUzLNqc99PrMA==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
@@ -2389,6 +2447,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/provider-utils@4.0.15':
+    resolution: {integrity: sha512-8XiKWbemmCbvNN0CLR9u3PQiet4gtEVIrX4zzLxnCj06AwsEDJwJVBbKrEI4t6qE8XRSIvU2irka0dcpziKW6w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider@1.1.3':
     resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
     engines: {node: '>=18'}
@@ -2397,16 +2461,6 @@ packages:
     resolution: {integrity: sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==}
     engines: {node: '>=18'}
 
-  '@ai-sdk/react@1.2.12':
-    resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
-    peerDependenciesMeta:
-      zod:
-        optional: true
-
   '@ai-sdk/react@3.0.83':
     resolution: {integrity: sha512-UsHr+/N0pqGY90BwPFFpWXhY5eVYjNgcWCvSeDMRrzfPvtcd2yqHXlwR7/bveRryVB4NmJ2z6sjyLyOgOHRQdw==}
     engines: {node: '>=18'}
@@ -2774,8 +2828,8 @@ packages:
     resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@8.0.0-rc.1':
-    resolution: {integrity: sha512-3ypWOOiC4AYHKr8vYRVtWtWmyvcoItHtVqF8paFax+ydpmUdPsJpLBkBBs5ItmhdrwC3a0ZSqqFAdzls4ODP3w==}
+  '@babel/generator@8.0.0-rc.2':
+    resolution: {integrity: sha512-oCQ1IKPwkzCeJzAPb7Fv8rQ9k5+1sG8mf2uoHiMInPYvkRfrDJxbTIbH51U+jstlkghus0vAi3EBvkfvEsYNLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@babel/helper-annotate-as-pure@7.24.7':
@@ -2876,8 +2930,8 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@8.0.0-rc.1':
-    resolution: {integrity: sha512-I4YnARytXC2RzkLNVnf5qFNFMzp679qZpmtw/V3Jt2uGnWiIxyJtaukjG7R8pSx8nG2NamICpGfljQsogj+FbQ==}
+  '@babel/helper-validator-identifier@8.0.0-rc.2':
+    resolution: {integrity: sha512-xExUBkuXWJjVuIbO7z6q7/BA9bgfJDEhVL0ggrggLMbg0IzCUWGT1hZGE8qUH7Il7/RD/a6cZ3AAFrrlp1LF/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@babel/helper-validator-option@7.25.9':
@@ -2915,8 +2969,8 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@8.0.0-rc.1':
-    resolution: {integrity: sha512-6HyyU5l1yK/7h9Ki52i5h6mDAx4qJdiLQO4FdCyJNoB/gy3T3GGJdhQzzbZgvgZCugYBvwtQiWRt94QKedHnkA==}
+  '@babel/parser@8.0.0-rc.2':
+    resolution: {integrity: sha512-29AhEtcq4x8Dp3T72qvUMZHx0OMXCj4Jy/TEReQa+KWLln524Cj1fWb3QFi0l/xSpptQBR6y9RNEXuxpFvwiUQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -3013,8 +3067,8 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@8.0.0-rc.1':
-    resolution: {integrity: sha512-ubmJ6TShyaD69VE9DQrlXcdkvJbmwWPB8qYj0H2kaJi29O7vJT9ajSdBd2W8CG34pwL9pYA74fi7RHC1qbLoVQ==}
+  '@babel/types@8.0.0-rc.2':
+    resolution: {integrity: sha512-91gAaWRznDwSX4E2tZ1YjBuIfnQVOFDCQ2r0Toby0gu4XEbyF623kXLMA8d4ZbCu+fINcrudkmEcwSUHgDDkNw==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@braintree/sanitize-url@7.1.1':
@@ -4916,6 +4970,14 @@ packages:
       '@types/node':
         optional: true
 
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -5238,12 +5300,12 @@ packages:
     resolution: {integrity: sha512-hAX0pT/73190NLqBPPWSdBVGtbY6VOhWYK3qqHqtXQ1gK7kS2yz4+ivsN07hpJ6I3aeMtKP6J6npsEKOAzuTLA==}
     engines: {node: '>=20.0'}
 
-  '@openrouter/ai-sdk-provider@0.7.5':
-    resolution: {integrity: sha512-zm8vBhQ+GhxN03Y41xviB0nDa20uN77QnMXsIwDeJPqsul8+KycrYFxY4ulXpumeKxjKyOhfyA7a7CJpcYq2ng==}
+  '@openrouter/ai-sdk-provider@2.2.3':
+    resolution: {integrity: sha512-NovC+BaCfEeJwhToDrs8JeDYXXlJdEyz7lcxkjtyePSE4eoAKik872SyDK0MzXKcz8MRkv7XlNhPI6zz4TQp0g==}
     engines: {node: '>=18'}
     peerDependencies:
-      ai: ^4.3.17
-      zod: ^3.25.34
+      ai: ^6.0.0
+      zod: ^3.25.0 || ^4.0.0
 
   '@opentelemetry/api-logs@0.203.0':
     resolution: {integrity: sha512-9B9RU0H7Ya1Dx/Rkyc4stuBZSGVQF27WigitInx2QQoj6KUpEFYPKoWjdFTunJYxmXmh17HeBvbMa1EhGyPmqQ==}
@@ -6010,6 +6072,9 @@ packages:
   '@oxc-project/types@0.112.0':
     resolution: {integrity: sha512-m6RebKHIRsax2iCwVpYW2ErQwa4ywHJrE4sCK3/8JK8ZZAWOKXaRJFl/uP51gaVyyXlaS4+chU1nSCdzYf6QqQ==}
 
+  '@oxc-project/types@0.115.0':
+    resolution: {integrity: sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw==}
+
   '@peculiar/asn1-android@2.3.13':
     resolution: {integrity: sha512-0VTNazDGKrLS6a3BwTDZanqq6DR/I3SbvmDMuS8Be+OYpvM6x1SRDh9AGDsHVnaCOIztOspCPc6N1m+iUv1Xxw==}
 
@@ -7609,30 +7674,60 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@rolldown/binding-android-arm64@1.0.0-rc.7':
+    resolution: {integrity: sha512-/uadfNUaMLFFBGvcIOiq8NnlhvTZTjOyybJaJnhGxD0n9k5vZRJfTaitH5GHnbwmc6T2PC+ZpS1FQH+vXyS/UA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@rolldown/binding-darwin-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-JWWLzvcmc/3pe7qdJqPpuPk91SoE/N+f3PcWx/6ZwuyDVyungAEJPvKm/eEldiDdwTmaEzWfIR+HORxYWrCi1A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.7':
+    resolution: {integrity: sha512-zokYr1KgRn0hRA89dmgtPj/BmKp9DxgrfAJvOEFfXa8nfYWW2nmgiYIBGpSIAJrEg7Qc/Qznovy6xYwmKh0M8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-x64@1.0.0-rc.3':
     resolution: {integrity: sha512-MTakBxfx3tde5WSmbHxuqlDsIW0EzQym+PJYGF4P6lG2NmKzi128OGynoFUqoD5ryCySEY85dug4v+LWGBElIw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-x64@1.0.0-rc.7':
+    resolution: {integrity: sha512-eZFjbmrapCBVgMmuLALH3pmQQQStHFuRhsFceJHk6KISW8CkI2e9OPLp9V4qXksrySQcD8XM8fpvGLs5l5C7LQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@rolldown/binding-freebsd-x64@1.0.0-rc.3':
     resolution: {integrity: sha512-jje3oopyOLs7IwfvXoS6Lxnmie5JJO7vW29fdGFu5YGY1EDbVDhD+P9vDihqS5X6fFiqL3ZQZCMBg6jyHkSVww==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.7':
+    resolution: {integrity: sha512-xjMrh8Dmu2DNwdY6DZsrF6YPGeesc3PaTlkh8v9cqmkSCNeTxnhX3ErhVnuv1j3n8t2IuuhQIwM9eZDINNEt5Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.3':
     resolution: {integrity: sha512-A0n8P3hdLAaqzSFrQoA42p23ZKBYQOw+8EH5r15Sa9X1kD9/JXe0YT2gph2QTWvdr0CVK2BOXiK6ENfy6DXOag==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.7':
+    resolution: {integrity: sha512-mOvftrHiXg4/xFdxJY3T9Wl1/zDAOSlMN8z9an2bXsCwuvv3RdyhYbSMZDuDO52S04w9z7+cBd90lvQSPTAQtw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.3':
     resolution: {integrity: sha512-kWXkoxxarYISBJ4bLNf5vFkEbb4JvccOwxWDxuK9yee8lg5XA7OpvlTptfRuwEvYcOZf+7VS69Uenpmpyo5Bjw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -7640,6 +7735,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.7':
+    resolution: {integrity: sha512-TuUkeuEEPRyXMBbJ86NRhAiPNezxHW8merl3Om2HASA9Pl1rI+VZcTtsVQ6v/P0MDIFpSl0k0+tUUze9HIXyEw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-Z03/wrqau9Bicfgb3Dbs6SYTHliELk2PM2LpG2nFd+cGupTMF5kanLEcj2vuuJLLhptNyS61rtk7SOZ+lPsTUA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -7647,6 +7749,27 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.7':
+    resolution: {integrity: sha512-G43ZElEvaby+YSOgrXfBgpeQv42LdS0ivFFYQufk2tBDWeBfzE/+ob5DmO8Izbyn4Y8k6GgLF11jFDYNnmU/3w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.7':
+    resolution: {integrity: sha512-Y48ShVxGE2zUTt0A0PR3grCLNxW4DWtAfe5lxf6L3uYEQujwo/LGuRogMsAtOJeYLCPTJo2i714LOdnK34cHpw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.7':
+    resolution: {integrity: sha512-KU5DUYvX3qI8/TX6D3RA4awXi4Ge/1+M6Jqv7kRiUndpqoVGgD765xhV3Q6QvtABnYjLJenrWDl3S1B5U56ixA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
     resolution: {integrity: sha512-iSXXZsQp08CSilff/DCTFZHSVEpEwdicV3W8idHyrByrcsRDVh9sGC3sev6d8BygSGj3vt8GvUKBPCoyMA4tgQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -7654,6 +7777,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.7':
+    resolution: {integrity: sha512-1THb6FdBkAEL12zvUue2bmK4W1+P+tz8Pgu5uEzq+xrtYa3iBzmmKNlyfUzCFNCqsPd8WJEQrYdLcw4iMW4AVw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-qaj+MFudtdCv9xZo9znFvkgoajLdc+vwf0Kz5N44g+LU5XMe+IsACgn3UG7uTRlCCvhMAGXm1XlpEA5bZBrOcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -7661,35 +7791,68 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.7':
+    resolution: {integrity: sha512-12o73atFNWDgYnLyA52QEUn9AH8pHIe12W28cmqjyHt4bIEYRzMICvYVCPa2IQm6DJBvCBrEhD9K+ct4wr2hwg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-U662UnMETyjT65gFmG9ma+XziENrs7BBnENi/27swZPYagubfHRirXHG2oMl+pEax2WvO7Kb9gHZmMakpYqBHQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.7':
+    resolution: {integrity: sha512-+uUgGwvuUCXl894MTsmTS2J0BnCZccFsmzV7y1jFxW5pTSxkuwL5agyPuDvDOztPeS6RrdqWkn7sT0jRd0ECkg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@rolldown/binding-wasm32-wasi@1.0.0-rc.3':
     resolution: {integrity: sha512-gekrQ3Q2HiC1T5njGyuUJoGpK/l6B/TNXKed3fZXNf9YRTJn3L5MOZsFBn4bN2+UX+8+7hgdlTcEsexX988G4g==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.7':
+    resolution: {integrity: sha512-53p2L/NSy21UiFOqUGlC11kJDZS2Nx2GJRz1QvbkXovypA3cOHbsyZHLkV72JsLSbiEQe+kg4tndUhSiC31UEA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.3':
     resolution: {integrity: sha512-85y5JifyMgs8m5K2XzR/VDsapKbiFiohl7s5lEj7nmNGO0pkTXE7q6TQScei96BNAsoK7JC3pA7ukA8WRHVJpg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.7':
+    resolution: {integrity: sha512-K6svNRljO6QrL6VTKxwh4yThhlR9DT/tK0XpaFQMnJwwQKng+NYcVEtUkAM0WsoiZHw+Hnh3DGnn3taf/pNYGg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@rolldown/binding-win32-x64-msvc@1.0.0-rc.3':
     resolution: {integrity: sha512-a4VUQZH7LxGbUJ3qJ/TzQG8HxdHvf+jOnqf7B7oFx1TEBm+j2KNL2zr5SQ7wHkNAcaPevF6gf9tQnVBnC4mD+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.7':
+    resolution: {integrity: sha512-3ZJBT47VWLKVKIyvHhUSUgVwHzzZW761YAIkM3tOT+8ZTjFVp0acCM0Y2Z2j3jCl+XYi2d9y2uEWQ8H0PvvpPw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@rolldown/pluginutils@1.0.0-beta.40':
     resolution: {integrity: sha512-s3GeJKSQOwBlzdUrj4ISjJj5SfSh+aqn0wjOar4Bx95iV1ETI7F6S/5hLcfAxZ9kXDcyrAkxPlqmd1ZITttf+w==}
 
   '@rolldown/pluginutils@1.0.0-rc.3':
     resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
 
+  '@rolldown/pluginutils@1.0.0-rc.7':
+    resolution: {integrity: sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==}
+
   '@rollup/plugin-commonjs@28.0.1':
     resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
@@ -8535,33 +8698,33 @@ packages:
     resolution: {integrity: sha512-SXuhqhuR5FXaYgKTXzZJeqtVA6JKb9IZWaGeEUxHHiOcFy2p51wccO72bYpXwoK4D5pzQOIYLTuAc7etxyMmwg==}
     engines: {node: '>=12.16'}
 
-  '@supabase/auth-js@2.99.0':
-    resolution: {integrity: sha512-tHiIST/OEoLmWBE+3X69xRY5srJM/lL86KltmMlIfDo9ePJLo14vQQV9T4NF+P+MoGhCwQL1GTmk51zuAFMXKw==}
+  '@supabase/auth-js@2.95.3':
+    resolution: {integrity: sha512-vD2YoS8E2iKIX0F7EwXTmqhUpaNsmbU6X2R0/NdFcs02oEfnHyNP/3M716f3wVJ2E5XHGiTFXki6lRckhJ0Thg==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/functions-js@2.99.0':
-    resolution: {integrity: sha512-zA9oad6EqGwMLLu2LfP1bXbqKcJGiotAdbdTfZG7YS7619YZQAEgejj9mp+E5vglKE1yMWbKK+S1J3PbuUtgLg==}
+  '@supabase/functions-js@2.95.3':
+    resolution: {integrity: sha512-uTuOAKzs9R/IovW1krO0ZbUHSJnsnyJElTXIRhjJTqymIVGcHzkAYnBCJqd7468Fs/Foz1BQ7Dv6DCl05lr7ig==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/postgrest-js@2.99.0':
-    resolution: {integrity: sha512-8qfOMi2pu9y0IQhUAeFqjrvR49G4ELGevXCWV9qAHXFQ/h2FFh0I8PYjFQj4rHcHSq6hrpozDnS1vbQU8NAQ/A==}
+  '@supabase/postgrest-js@2.95.3':
+    resolution: {integrity: sha512-LTrRBqU1gOovxRm1vRXPItSMPBmEFqrfTqdPTRtzOILV4jPSueFz6pES5hpb4LRlkFwCPRmv3nQJ5N625V2Xrg==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/realtime-js@2.99.0':
-    resolution: {integrity: sha512-7nFTZhNeANR7FvEY6PfWLCfE8dHqcaJd9SuR7IPEZvBPG9K4uEHMivpjZx4NWRSU7Eji7ZbKy2LG+cJ48DhwHg==}
+  '@supabase/realtime-js@2.95.3':
+    resolution: {integrity: sha512-D7EAtfU3w6BEUxDACjowWNJo/ZRo7sDIuhuOGKHIm9FHieGeoJV5R6GKTLtga/5l/6fDr2u+WcW/m8I9SYmaIw==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/ssr@0.9.0':
-    resolution: {integrity: sha512-UFY6otYV3yqCgV+AyHj80vNkTvbf1Gas2LW4dpbQ4ap6p6v3eB2oaDfcI99jsuJzwVBCFU4BJI+oDYyhNk1z0Q==}
+  '@supabase/ssr@0.8.0':
+    resolution: {integrity: sha512-/PKk8kNFSs8QvvJ2vOww1mF5/c5W8y42duYtXvkOSe+yZKRgTTZywYG2l41pjhNomqESZCpZtXuWmYjFRMV+dw==}
     peerDependencies:
-      '@supabase/supabase-js': ^2.97.0
+      '@supabase/supabase-js': ^2.76.1
 
-  '@supabase/storage-js@2.99.0':
-    resolution: {integrity: sha512-mAEEbfsght5EEALejYrwAP9k8sFBGjfMZT8n4SyMXk2iYuWVeRMs1kA/uKg0uDMctWdZ0bL+L4jZzksUJpCjMA==}
+  '@supabase/storage-js@2.95.3':
+    resolution: {integrity: sha512-4GxkJiXI3HHWjxpC3sDx1BVrV87O0hfX+wvJdqGv67KeCu+g44SPnII8y0LL/Wr677jB7tpjAxKdtVWf+xhc9A==}
     engines: {node: '>=20.0.0'}
 
-  '@supabase/supabase-js@2.99.0':
-    resolution: {integrity: sha512-SP9Sn9tsHDB7N4u2gT13rdeZJewE4xibAxasG7vOz+fYi92+XkMMbWNx0uGK53zKTnAnvTs16isRooyBy4sn5w==}
+  '@supabase/supabase-js@2.95.3':
+    resolution: {integrity: sha512-Fukw1cUTQ6xdLiHDJhKKPu6svEPaCEDvThqCne3OaQyZvuq2qjhJAd91kJu3PXLG18aooCgYBaB6qQz35hhABg==}
     engines: {node: '>=20.0.0'}
 
   '@swc/counter@0.1.3':
@@ -8686,37 +8849,37 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
-  '@tanstack/react-router@1.163.2':
-    resolution: {integrity: sha512-1LosUlpL2mRMWxUZXmkEg5+Br5P5j9TrLngqRgHVbZoFkjnbcj1x9fQN2OVLrBv9Npw97NRsHeJljnAH/c7oSw==}
+  '@tanstack/react-router@1.166.6':
+    resolution: {integrity: sha512-lfymPCfTkLQaNj/KIPElt+6B9REwPw2/Of3KtMwhNINs7h2xFQMSAOYk+ItCv8i93lBczlg89BRHtRS99qmzyA==}
     engines: {node: '>=20.19'}
     peerDependencies:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
-  '@tanstack/react-start-client@1.163.2':
-    resolution: {integrity: sha512-JBlJflRK9lIkuOySEdwrAAyhbIc3DCrUsLUT59+oX7DntBsFnfWLEhXNtZ58PcSR7G6fprGLF4ASW6VAMmA87g==}
+  '@tanstack/react-start-client@1.166.6':
+    resolution: {integrity: sha512-RG+aFN/JdJXArcTBbsJUCrCMzxqMA1YDkdm50Qg2P7H2e3T7Tmqf7mzopXP0b8oMCxbdvjY0leer4t4/KndnjQ==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
-  '@tanstack/react-start-server@1.163.2':
-    resolution: {integrity: sha512-Qjg4hZf10GlgH+Mod/yrStHvYOb2XkDjzdMUJ+KX63XlZBT/+0mhg90NgqXAIfa1D3g45caCFrGg4Xd+imYpig==}
+  '@tanstack/react-start-server@1.166.6':
+    resolution: {integrity: sha512-L1aUZW1Q6NU08/MDbQTUJw9yIKr5l3Kg8XWZvB2bpFahN3N+yy2KJehWRMZHTUfnIcV2IjGk3FMEwbLiI20DtA==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
-  '@tanstack/react-start@1.163.2':
-    resolution: {integrity: sha512-Y/dxoxH1+YLeRECvMlcHaCgL6YdKXO5D5P5ZInjGAha/GJ0v3KNwS5u+45UZfmQRZXqmilsgaeLEMVV5AvgBnw==}
+  '@tanstack/react-start@1.166.6':
+    resolution: {integrity: sha512-nJXyan9KzxUuNYjvuYT6PlPY/SIoAQ9Cobn1lp2mtXM0/J3JwnOvASkuquglVSbKfrVwspVuk3lB5DTbOgiAlw==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
       vite: '>=7.0.0'
 
-  '@tanstack/react-store@0.9.1':
-    resolution: {integrity: sha512-YzJLnRvy5lIEFTLWBAZmcOjK3+2AepnBv/sr6NZmiqJvq7zTQggyK99Gw8fqYdMdHPQWXjz0epFKJXC+9V2xDA==}
+  '@tanstack/react-store@0.9.2':
+    resolution: {integrity: sha512-Vt5usJE5sHG/cMechQfmwvwne6ktGCELe89Lmvoxe3LKRoFrhPa8OCKWs0NliG8HTJElEIj7PLtaBQIcux5pAQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -8741,20 +8904,20 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@tanstack/router-core@1.163.2':
-    resolution: {integrity: sha512-mD0Pav6kcpS317XSJN+wCZaxLLngDhlwgzPNca56dWCp8YKPEvhhj/Zdl+LdRlJQ2VJ5BOy7FbOV1hErc9Nj5Q==}
+  '@tanstack/router-core@1.166.6':
+    resolution: {integrity: sha512-SwVPMQxjoY4jwiNgD9u5kDFp/iSaf3wgf1t93xRCC6qDHmv/xLaawhvwEPNIJaPepWuSYRpywpJWH9hGlBqVbw==}
     engines: {node: '>=20.19'}
 
-  '@tanstack/router-generator@1.163.2':
-    resolution: {integrity: sha512-6LjU3+8iKEgt8iOaYCmCnQCs0jsOhc7z8fa1yAYlj3s82uYWv3g5CB9mwv8wZXblXBQWOl+hW4PI6WNjP/CK9w==}
+  '@tanstack/router-generator@1.166.6':
+    resolution: {integrity: sha512-D7Z6oLP2IfflXUzOOxIgeCD8v3/SXU//cgBon0pbF13HkKdf9Zlt97kQqcaOkbnruJJ6i5xtUIsoAQbMmj+EsQ==}
     engines: {node: '>=20.19'}
 
-  '@tanstack/router-plugin@1.163.2':
-    resolution: {integrity: sha512-SrVILMz/c15RYWxIMG+bf/glLbP/O9DUxOg0E7bo9pooBxGPvgWSlEzHNjhVekLhK5l7fiuQZzKsfksVeIEqDA==}
+  '@tanstack/router-plugin@1.166.6':
+    resolution: {integrity: sha512-07ZwOMNDlKIoaRtrfP5zO3VfqXNg2Zm7qvqZOBaTbbqgMvaKclW0ylqakweXtDwiNs9GPf/+lH/xyc+CgLGUyg==}
     engines: {node: '>=20.19'}
     peerDependencies:
       '@rsbuild/core': '>=1.0.2'
-      '@tanstack/react-router': ^1.163.2
+      '@tanstack/react-router': ^1.166.6
       vite: '>=5.0.0 || >=6.0.0 || >=7.0.0'
       vite-plugin-solid: ^2.11.10
       webpack: '>=5.92.0'
@@ -8774,30 +8937,30 @@ packages:
     resolution: {integrity: sha512-r8TpjyIZoqrXXaf2DDyjd44gjGBoyE+/oEaaH68yLI9ySPO1gUWmQENZ1MZnmBnpUGN24NOZxdjDLc8npK0SAw==}
     engines: {node: '>=20.19'}
 
-  '@tanstack/start-client-core@1.163.2':
-    resolution: {integrity: sha512-PiOnvd83rqOsyWcN3CxJqoqr41pxM2wAHfchMITKz7rlsX+4J8CWMpHM3yNnLrKRqUnqX3Td9VUV4ueU+4ZCNA==}
+  '@tanstack/start-client-core@1.166.6':
+    resolution: {integrity: sha512-fnSkRaL6pI3RRdWSeJFg5Vg88Cn9GuuOvmOBP0IgWTNHqywjFm/b1dPGemphD5cmJLhMPAkqGwbK4oPzzdnB9A==}
     engines: {node: '>=22.12.0'}
 
   '@tanstack/start-fn-stubs@1.161.4':
     resolution: {integrity: sha512-b8s6iSQ+ny0P4lGK0n3DKaL6EI7SECG0/89svDeYieVw2+MaFOJVcQo3rU3BUvmuOcIkgkE5IhdzkmzPXH6yfA==}
     engines: {node: '>=22.12.0'}
 
-  '@tanstack/start-plugin-core@1.163.2':
-    resolution: {integrity: sha512-y+ransqRMyvTCLd4xU7feo57YsFT8oX++gKfh8pjNgzZTmkbySKBGv8UmO2mvwaNMkZmPwABYOPz60zd3Ls5DQ==}
+  '@tanstack/start-plugin-core@1.166.6':
+    resolution: {integrity: sha512-/VlfJYOnVyzGlyEATCFxhgPC2AF5pt5MEO+cjvguu9q9+hE/zceSY33Y9gmg7keybVGOz+cmRrSbUaBPMQ+aNw==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
       vite: '>=7.0.0'
 
-  '@tanstack/start-server-core@1.163.2':
-    resolution: {integrity: sha512-2BJzeIuBuHSSQL119vx4MlXktorwOiRqCUaeQOi84LQMbcM78vVl1vWwgU/e/Hjzwz44dwcs5KHaFgfPeRNduA==}
+  '@tanstack/start-server-core@1.166.6':
+    resolution: {integrity: sha512-nekpa3zFx1SFBURwVbqNunJlLcxvx8vu+Mbnv/nYw4JLfeBmhNNGMZjxmB2K5PRBwIzcKRpLIwgtzyWWzaHKPw==}
     engines: {node: '>=22.12.0'}
 
-  '@tanstack/start-storage-context@1.163.2':
-    resolution: {integrity: sha512-zBCn0XqrcS0SDjmRjnnxVMLNCpOx6tveCzKvsoI3xwnJ4iIEMyo2HAS4i3qw+EbAaBam2g5skN9OLd46VEY4uw==}
+  '@tanstack/start-storage-context@1.166.6':
+    resolution: {integrity: sha512-FLu+bHWS0VFz/KTOPEQnhDxzxToca4giVoUZ3DYfYcQNky+FrIeKYvlwurFNVuLkSCY1Jqr1O2xVnD9dEqBAag==}
     engines: {node: '>=22.12.0'}
 
-  '@tanstack/store@0.9.1':
-    resolution: {integrity: sha512-+qcNkOy0N1qSGsP7omVCW0SDrXtaDcycPqBDE726yryiA5eTDFpjBReaYjghVJwNf1pcPMyzIwTGlYjCSQR0Fg==}
+  '@tanstack/store@0.9.2':
+    resolution: {integrity: sha512-K013lUJEFJK2ofFQ/hZKJUmCnpcV00ebLyOyFOWQvyQHUOZp/iYO84BM6aOGiV81JzwbX0APTVmW8YI7yiG5oA==}
 
   '@tanstack/table-core@8.20.5':
     resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
@@ -9010,9 +9173,6 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/diff-match-patch@1.0.36':
-    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
-
   '@types/elliptic@6.4.18':
     resolution: {integrity: sha512-UseG6H5vjRiNpQvrhy4VF/JXdA3V/Fp5amvveaL+fs28BZ6xIKJBPnUPRlEaZpysD9MbpfaLi8lbl7PGUAkpWw==}
 
@@ -9604,16 +9764,6 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
-  ai@4.3.17:
-    resolution: {integrity: sha512-uWqIQ94Nb1GTYtYElGHegJMOzv3r2mCKNFlKrqkft9xrfvIahTI5OdcnD5U9612RFGuUNGmSDTO1/YRNFXobaQ==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
-    peerDependenciesMeta:
-      react:
-        optional: true
-
   ai@6.0.81:
     resolution: {integrity: sha512-F9EEhjl2dn1VGS5tbU64ldLbqRemV9X1WHghVblpJlPCWuyYj1xpPQsj+G0TRs/SyAGnbpG1yYpl9mkwfr1H8w==}
     engines: {node: '>=18'}
@@ -9963,8 +10113,8 @@ packages:
   brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
-  brace-expansion@5.0.3:
-    resolution: {integrity: sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==}
+  brace-expansion@5.0.4:
+    resolution: {integrity: sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==}
     engines: {node: 18 || 20 || >=22}
 
   braces@3.0.3:
@@ -10966,9 +11116,6 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
-  diff-match-patch@1.0.5:
-    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
-
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -11259,10 +11406,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
-    engines: {node: '>=6'}
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -12132,8 +12275,8 @@ packages:
     resolution: {integrity: sha512-LQhmMl1dRQQjMXPzJc7MpZ/CqPOWWuAvVEoVJM9n/s7vHypj+c3Pd5rLQCkAsOgAoAYKbNCsYFE++LF7MvSfCQ==}
     engines: {node: '>=4', npm: '>=3', yarn: '>=1.3.0'}
 
-  h3@2.0.1-rc.14:
-    resolution: {integrity: sha512-163qbGmTr/9rqQRNuqMqtgXnOUAkE4KTdauiC9y0E5iG1I65kte9NyfWvZw5RTDMt6eY+DtyoNzrQ9wA2BfvGQ==}
+  h3@2.0.1-rc.16:
+    resolution: {integrity: sha512-h+pjvyujdo9way8qj6FUbhaQcHlR8FEq65EhTX9ViT5pK8aLj68uFl4hBkF+hsTJAH+H1END2Yv6hTIsabGfag==}
     engines: {node: '>=20.11.1'}
     hasBin: true
     peerDependencies:
@@ -12323,7 +12466,6 @@ packages:
   i18next-parser@9.0.2:
     resolution: {integrity: sha512-Q1yTZljBp1DcVAQD7LxduEqFRpjIeZc+5VnQ+gU8qG9WvY3U5rqK0IVONRWNtngh3orb197bfy1Sz4wlwcplxg==}
     engines: {node: '>=18.0.0 || >=20.0.0 || >=22.0.0', npm: '>=6', yarn: '>=1'}
-    deprecated: Project is deprecated, use i18next-cli instead
     hasBin: true
 
   i18next@21.10.0:
@@ -12831,11 +12973,6 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsondiffpatch@0.6.0:
-    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
@@ -13091,6 +13228,10 @@ packages:
     resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
     engines: {node: 14 || >=16.14}
 
+  lru-cache@11.1.0:
+    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
+    engines: {node: 20 || >=22}
+
   lru-cache@11.2.2:
     resolution: {integrity: sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==}
     engines: {node: 20 || >=22}
@@ -13433,6 +13574,10 @@ packages:
     resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
     engines: {node: 20 || >=22}
 
+  minimatch@10.1.1:
+    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
+    engines: {node: 20 || >=22}
+
   minimatch@10.2.4:
     resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
     engines: {node: 18 || 20 || >=22}
@@ -15001,14 +15146,14 @@ packages:
   robust-predicates@3.0.2:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
-  rolldown-plugin-dts@0.22.1:
-    resolution: {integrity: sha512-5E0AiM5RSQhU6cjtkDFWH6laW4IrMu0j1Mo8x04Xo1ALHmaRMs9/7zej7P3RrryVHW/DdZAp85MA7Be55p0iUw==}
+  rolldown-plugin-dts@0.22.4:
+    resolution: {integrity: sha512-pueqTPyN1N6lWYivyDGad+j+GO3DT67pzpct8s8e6KGVIezvnrDjejuw1AXFeyDRas3xTq4Ja6Lj5R5/04C5GQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@ts-macro/tsc': ^0.3.6
       '@typescript/native-preview': '>=7.0.0-dev.20250601.1'
       rolldown: ^1.0.0-rc.3
-      typescript: ^5.0.0
+      typescript: ^5.0.0 || ^6.0.0-beta
       vue-tsc: ~3.2.0
     peerDependenciesMeta:
       '@ts-macro/tsc':
@@ -15025,6 +15170,11 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  rolldown@1.0.0-rc.7:
+    resolution: {integrity: sha512-5X0zEeQFzDpB3MqUWQZyO2TUQqP9VnT7CqXHF2laTFRy487+b6QZyotCazOySAuZLAvplCaOVsg1tVn/Zlmwfg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
   rollup@4.34.8:
     resolution: {integrity: sha512-489gTVMzAYdiZHFVA/ig/iYFllCcWFHMvUHI1rpFmkoUtRlQxqh6/yiNqnYibjMZ2b/+FUQwldG+aLsEt6bglQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -15043,6 +15193,9 @@ packages:
   rou3@0.7.12:
     resolution: {integrity: sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg==}
 
+  rou3@0.8.1:
+    resolution: {integrity: sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA==}
+
   roughjs@4.6.6:
     resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
 
@@ -15175,14 +15328,14 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
-  seroval-plugins@1.5.0:
-    resolution: {integrity: sha512-EAHqADIQondwRZIdeW2I636zgsODzoBDwb3PT/+7TLDWyw1Dy/Xv7iGUIEXXav7usHDE9HVhOU61irI3EnyyHA==}
+  seroval-plugins@1.5.1:
+    resolution: {integrity: sha512-4FbuZ/TMl02sqv0RTFexu0SP6V+ywaIe5bAWCCEik0fk17BhALgwvUDVF7e3Uvf9pxmwCEJsRPmlkUE6HdzLAw==}
     engines: {node: '>=10'}
     peerDependencies:
       seroval: ^1.0
 
-  seroval@1.5.0:
-    resolution: {integrity: sha512-OE4cvmJ1uSPrKorFIH9/w/Qwuvi/IMcGbv5RKgcJ/zjA/IohDLU6SVaxFN9FwajbP7nsX0dQqMDes1whk3y+yw==}
+  seroval@1.5.1:
+    resolution: {integrity: sha512-OwrZRZAfhHww0WEnKHDY8OM0U/Qs8OTfIDWhUD4BLpNJUfXK4cGmjiagGze086m+mhI+V2nD0gfbHEnJjb9STA==}
     engines: {node: '>=10'}
 
   serve-handler@6.1.6:
@@ -15241,9 +15394,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shell-quote@1.8.1:
-    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
-
   shell-quote@1.8.3:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
@@ -15361,8 +15511,8 @@ packages:
     resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==}
     engines: {node: '>= 0.6'}
 
-  srvx@0.11.8:
-    resolution: {integrity: sha512-2n9t0YnAXPJjinytvxccNgs7rOA5gmE7Wowt/8Dy2dx2fDC6sBhfBpbrCvjYKALlVukPS/Uq3QwkolKNa7P/2Q==}
+  srvx@0.11.9:
+    resolution: {integrity: sha512-97wWJS6F0KTKAhDlHVmBzMvlBOp5FiNp3XrLoodIgYJpXxgG5tE9rX4Pg7s46n2shI4wtEsMATTS1+rI3/ubzA==}
     engines: {node: '>=20.16.0'}
     hasBin: true
 
@@ -15641,12 +15791,12 @@ packages:
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
 
   tar@7.4.3:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
 
   teex@1.0.1:
     resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==}
@@ -15738,6 +15888,9 @@ packages:
   tinycolor2@1.6.0:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
 
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+
   tinyexec@1.0.2:
     resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
     engines: {node: '>=18'}
@@ -16072,8 +16225,8 @@ packages:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
 
-  unrun@0.2.27:
-    resolution: {integrity: sha512-Mmur1UJpIbfxasLOhPRvox/QS4xBiDii71hMP7smfRthGcwFL2OAmYRgduLANOAU4LUkvVamuP+02U+c90jlrw==}
+  unrun@0.2.30:
+    resolution: {integrity: sha512-a4W1wDADI0gvDDr14T0ho1FgMhmfjq6M8Iz8q234EnlxgH/9cMHDueUSLwTl1fwSBs5+mHrLFYH+7B8ao36EBA==}
     engines: {node: '>=20.19.0'}
     hasBin: true
     peerDependencies:
@@ -16246,11 +16399,6 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  use-sync-external-store@1.5.0:
-    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -16864,17 +17012,18 @@ snapshots:
       '@vercel/oidc': 3.1.0
       zod: 4.1.12
 
-  '@ai-sdk/openai@1.3.23(zod@3.25.76)':
+  '@ai-sdk/mcp@1.0.21(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.15(zod@3.25.76)
+      pkce-challenge: 5.0.0
       zod: 3.25.76
 
-  '@ai-sdk/openai@3.0.27(zod@4.1.12)':
+  '@ai-sdk/openai@3.0.29(zod@3.25.76)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.14(zod@4.1.12)
-      zod: 4.1.12
+      '@ai-sdk/provider-utils': 4.0.15(zod@3.25.76)
+      zod: 3.25.76
 
   '@ai-sdk/provider-utils@2.2.8(zod@3.25.76)':
     dependencies:
@@ -16897,6 +17046,13 @@ snapshots:
       eventsource-parser: 3.0.6
       zod: 4.1.12
 
+  '@ai-sdk/provider-utils@4.0.15(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@standard-schema/spec': 1.1.0
+      eventsource-parser: 3.0.6
+      zod: 3.25.76
+
   '@ai-sdk/provider@1.1.3':
     dependencies:
       json-schema: 0.4.0
@@ -16905,25 +17061,15 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/react@1.2.12(react@18.3.1)(zod@3.25.76)':
+  '@ai-sdk/react@3.0.83(react@18.3.1)(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
+      '@ai-sdk/provider-utils': 4.0.14(zod@3.25.76)
+      ai: 6.0.81(zod@3.25.76)
       react: 18.3.1
       swr: 2.3.4(react@18.3.1)
       throttleit: 2.1.0
-    optionalDependencies:
-      zod: 3.25.76
-
-  '@ai-sdk/react@1.2.12(react@19.2.3)(zod@3.25.76)':
-    dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
-      react: 19.2.3
-      swr: 2.3.4(react@19.2.3)
-      throttleit: 2.1.0
-    optionalDependencies:
-      zod: 3.25.76
+    transitivePeerDependencies:
+      - zod
 
   '@ai-sdk/react@3.0.83(react@19.2.3)(zod@3.25.76)':
     dependencies:
@@ -16962,7 +17108,7 @@ snapshots:
   '@antfu/install-pkg@1.1.0':
     dependencies:
       package-manager-detector: 1.3.0
-      tinyexec: 1.0.2
+      tinyexec: 1.0.1
 
   '@antfu/utils@8.1.1': {}
 
@@ -16984,7 +17130,7 @@ snapshots:
     dependencies:
       '@jsdevtools/ono': 7.1.3
       '@types/json-schema': 7.0.15
-      js-yaml: 4.1.1
+      js-yaml: 4.1.0
 
   '@assistant-ui/react-ai-sdk@0.10.14(@assistant-ui/react@0.10.24(@types/react-dom@18.3.1)(@types/react@18.3.12)(immer@9.0.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)))(@types/react-dom@18.3.1)(@types/react@18.3.12)(immer@9.0.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))':
     dependencies:
@@ -17042,7 +17188,7 @@ snapshots:
       '@radix-ui/react-context': 1.1.3(@types/react@18.3.12)(react@19.2.3)
       '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.12)(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.12)(react@19.2.3)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.12)(react@19.2.3)
       '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.12)(react@19.2.3)
       '@standard-schema/spec': 1.0.0
@@ -17881,7 +18027,7 @@ snapshots:
       '@babel/traverse': 7.28.5
       '@babel/types': 7.28.5
       convert-source-map: 2.0.0
-      debug: 4.4.3
+      debug: 4.4.0
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -17944,10 +18090,10 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
-  '@babel/generator@8.0.0-rc.1':
+  '@babel/generator@8.0.0-rc.2':
     dependencies:
-      '@babel/parser': 8.0.0-rc.1
-      '@babel/types': 8.0.0-rc.1
+      '@babel/parser': 8.0.0-rc.2
+      '@babel/types': 8.0.0-rc.2
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
       '@types/jsesc': 2.5.1
@@ -18088,7 +18234,7 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/helper-validator-identifier@8.0.0-rc.1': {}
+  '@babel/helper-validator-identifier@8.0.0-rc.2': {}
 
   '@babel/helper-validator-option@7.25.9': {}
 
@@ -18121,9 +18267,9 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
-  '@babel/parser@8.0.0-rc.1':
+  '@babel/parser@8.0.0-rc.2':
     dependencies:
-      '@babel/types': 8.0.0-rc.1
+      '@babel/types': 8.0.0-rc.2
 
   '@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.29.0)':
     dependencies:
@@ -18254,10 +18400,10 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@babel/types@8.0.0-rc.1':
+  '@babel/types@8.0.0-rc.2':
     dependencies:
       '@babel/helper-string-parser': 8.0.0-rc.2
-      '@babel/helper-validator-identifier': 8.0.0-rc.1
+      '@babel/helper-validator-identifier': 8.0.0-rc.2
 
   '@braintree/sanitize-url@7.1.1': {}
 
@@ -19256,6 +19402,11 @@ snapshots:
   '@esbuild/win32-x64@0.27.1':
     optional: true
 
+  '@eslint-community/eslint-utils@4.9.0(eslint@8.57.1)':
+    dependencies:
+      eslint: 8.57.1
+      eslint-visitor-keys: 3.4.3
+
   '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@1.21.7))':
     dependencies:
       eslint: 9.39.1(jiti@1.21.7)
@@ -19266,11 +19417,6 @@ snapshots:
       eslint: 8.57.1
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.1(jiti@1.21.7))':
-    dependencies:
-      eslint: 9.39.1(jiti@1.21.7)
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/regexpp@4.12.1': {}
 
   '@eslint-community/regexpp@4.12.2': {}
@@ -19327,7 +19473,7 @@ snapshots:
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
-      js-yaml: 4.1.1
+      js-yaml: 4.1.0
       minimatch: 3.1.2
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
@@ -19718,6 +19864,12 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.17.6
 
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -20033,11 +20185,9 @@ snapshots:
 
   '@oozcitak/util@10.0.0': {}
 
-  '@openrouter/ai-sdk-provider@0.7.5(ai@4.3.17(react@18.3.1)(zod@3.25.76))(zod@3.25.76)':
+  '@openrouter/ai-sdk-provider@2.2.3(ai@6.0.81(zod@3.25.76))(zod@3.25.76)':
     dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      ai: 4.3.17(react@18.3.1)(zod@3.25.76)
+      ai: 6.0.81(zod@3.25.76)
       zod: 3.25.76
 
   '@opentelemetry/api-logs@0.203.0':
@@ -21098,6 +21248,8 @@ snapshots:
 
   '@oxc-project/types@0.112.0': {}
 
+  '@oxc-project/types@0.115.0': {}
+
   '@peculiar/asn1-android@2.3.13':
     dependencies:
       '@peculiar/asn1-schema': 2.3.13
@@ -23542,6 +23694,26 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.12)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.12)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.12)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.12)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.12)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.12)(react@19.2.1)':
     dependencies:
       react: 19.2.1
@@ -23669,14 +23841,14 @@ snapshots:
   '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       react: 18.3.1
-      use-sync-external-store: 1.5.0(react@18.3.1)
+      use-sync-external-store: 1.6.0(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.12
 
   '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.12)(react@19.2.3)':
     dependencies:
       react: 19.2.3
-      use-sync-external-store: 1.5.0(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
       '@types/react': 18.3.12
 
@@ -23877,48 +24049,97 @@ snapshots:
   '@rolldown/binding-android-arm64@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-android-arm64@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-darwin-arm64@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-darwin-x64@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-darwin-x64@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-freebsd-x64@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.7':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.7':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-wasm32-wasi@1.0.0-rc.3':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.7':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
   '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/binding-win32-x64-msvc@1.0.0-rc.3':
     optional: true
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.7':
+    optional: true
+
   '@rolldown/pluginutils@1.0.0-beta.40': {}
 
   '@rolldown/pluginutils@1.0.0-rc.3': {}
 
+  '@rolldown/pluginutils@1.0.0-rc.7': {}
+
   '@rollup/plugin-commonjs@28.0.1(rollup@4.50.1)':
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.50.1)
@@ -24913,19 +25134,19 @@ snapshots:
 
   '@stripe/stripe-js@7.7.0': {}
 
-  '@supabase/auth-js@2.99.0':
+  '@supabase/auth-js@2.95.3':
     dependencies:
       tslib: 2.8.1
 
-  '@supabase/functions-js@2.99.0':
+  '@supabase/functions-js@2.95.3':
     dependencies:
       tslib: 2.8.1
 
-  '@supabase/postgrest-js@2.99.0':
+  '@supabase/postgrest-js@2.95.3':
     dependencies:
       tslib: 2.8.1
 
-  '@supabase/realtime-js@2.99.0':
+  '@supabase/realtime-js@2.95.3':
     dependencies:
       '@types/phoenix': 1.6.6
       '@types/ws': 8.18.1
@@ -24935,23 +25156,23 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@supabase/ssr@0.9.0(@supabase/supabase-js@2.99.0)':
+  '@supabase/ssr@0.8.0(@supabase/supabase-js@2.95.3)':
     dependencies:
-      '@supabase/supabase-js': 2.99.0
+      '@supabase/supabase-js': 2.95.3
       cookie: 1.0.2
 
-  '@supabase/storage-js@2.99.0':
+  '@supabase/storage-js@2.95.3':
     dependencies:
       iceberg-js: 0.8.1
       tslib: 2.8.1
 
-  '@supabase/supabase-js@2.99.0':
+  '@supabase/supabase-js@2.95.3':
     dependencies:
-      '@supabase/auth-js': 2.99.0
-      '@supabase/functions-js': 2.99.0
-      '@supabase/postgrest-js': 2.99.0
-      '@supabase/realtime-js': 2.99.0
-      '@supabase/storage-js': 2.99.0
+      '@supabase/auth-js': 2.95.3
+      '@supabase/functions-js': 2.95.3
+      '@supabase/postgrest-js': 2.95.3
+      '@supabase/realtime-js': 2.95.3
+      '@supabase/storage-js': 2.95.3
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
@@ -25057,48 +25278,48 @@ snapshots:
       '@tanstack/query-core': 5.90.7
       react: 18.3.1
 
-  '@tanstack/react-router@1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-router@1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@tanstack/history': 1.161.4
-      '@tanstack/react-store': 0.9.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@tanstack/router-core': 1.163.2
+      '@tanstack/react-store': 0.9.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@tanstack/router-core': 1.166.6
       isbot: 5.1.35
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
 
-  '@tanstack/react-start-client@1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-start-client@1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@tanstack/react-router': 1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@tanstack/router-core': 1.163.2
-      '@tanstack/start-client-core': 1.163.2
+      '@tanstack/react-router': 1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@tanstack/router-core': 1.166.6
+      '@tanstack/start-client-core': 1.166.6
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
 
-  '@tanstack/react-start-server@1.163.2(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-start-server@1.166.6(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@tanstack/history': 1.161.4
-      '@tanstack/react-router': 1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@tanstack/router-core': 1.163.2
-      '@tanstack/start-client-core': 1.163.2
-      '@tanstack/start-server-core': 1.163.2(crossws@0.4.4(srvx@0.8.16))
+      '@tanstack/react-router': 1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@tanstack/router-core': 1.166.6
+      '@tanstack/start-client-core': 1.166.6
+      '@tanstack/start-server-core': 1.166.6(crossws@0.4.4(srvx@0.8.16))
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
     transitivePeerDependencies:
       - crossws
 
-  '@tanstack/react-start@1.163.2(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))':
+  '@tanstack/react-start@1.166.6(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))':
     dependencies:
-      '@tanstack/react-router': 1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@tanstack/react-start-client': 1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@tanstack/react-start-server': 1.163.2(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@tanstack/react-router': 1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@tanstack/react-start-client': 1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@tanstack/react-start-server': 1.166.6(crossws@0.4.4(srvx@0.8.16))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@tanstack/router-utils': 1.161.4
-      '@tanstack/start-client-core': 1.163.2
-      '@tanstack/start-plugin-core': 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(crossws@0.4.4(srvx@0.8.16))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
-      '@tanstack/start-server-core': 1.163.2(crossws@0.4.4(srvx@0.8.16))
+      '@tanstack/start-client-core': 1.166.6
+      '@tanstack/start-plugin-core': 1.166.6(@tanstack/react-router@1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(crossws@0.4.4(srvx@0.8.16))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
+      '@tanstack/start-server-core': 1.166.6(crossws@0.4.4(srvx@0.8.16))
       pathe: 2.0.3
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
@@ -25110,9 +25331,9 @@ snapshots:
       - vite-plugin-solid
       - webpack
 
-  '@tanstack/react-store@0.9.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@tanstack/react-store@0.9.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@tanstack/store': 0.9.1
+      '@tanstack/store': 0.9.2
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
       use-sync-external-store: 1.6.0(react@19.2.1)
@@ -25147,19 +25368,19 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  '@tanstack/router-core@1.163.2':
+  '@tanstack/router-core@1.166.6':
     dependencies:
       '@tanstack/history': 1.161.4
-      '@tanstack/store': 0.9.1
+      '@tanstack/store': 0.9.2
       cookie-es: 2.0.0
-      seroval: 1.5.0
-      seroval-plugins: 1.5.0(seroval@1.5.0)
+      seroval: 1.5.1
+      seroval-plugins: 1.5.1(seroval@1.5.1)
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
 
-  '@tanstack/router-generator@1.163.2':
+  '@tanstack/router-generator@1.166.6':
     dependencies:
-      '@tanstack/router-core': 1.163.2
+      '@tanstack/router-core': 1.166.6
       '@tanstack/router-utils': 1.161.4
       '@tanstack/virtual-file-routes': 1.161.4
       prettier: 3.5.3
@@ -25170,7 +25391,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/router-plugin@1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))':
+  '@tanstack/router-plugin@1.166.6(@tanstack/react-router@1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.28.5)
@@ -25178,15 +25399,15 @@ snapshots:
       '@babel/template': 7.27.2
       '@babel/traverse': 7.28.5
       '@babel/types': 7.28.5
-      '@tanstack/router-core': 1.163.2
-      '@tanstack/router-generator': 1.163.2
+      '@tanstack/router-core': 1.166.6
+      '@tanstack/router-generator': 1.166.6
       '@tanstack/router-utils': 1.161.4
       '@tanstack/virtual-file-routes': 1.161.4
       chokidar: 3.6.0
       unplugin: 2.3.11
       zod: 3.25.76
     optionalDependencies:
-      '@tanstack/react-router': 1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@tanstack/react-router': 1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       vite: 7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0)
       webpack: 5.92.0(esbuild@0.24.2)
     transitivePeerDependencies:
@@ -25206,35 +25427,35 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/start-client-core@1.163.2':
+  '@tanstack/start-client-core@1.166.6':
     dependencies:
-      '@tanstack/router-core': 1.163.2
+      '@tanstack/router-core': 1.166.6
       '@tanstack/start-fn-stubs': 1.161.4
-      '@tanstack/start-storage-context': 1.163.2
-      seroval: 1.5.0
+      '@tanstack/start-storage-context': 1.166.6
+      seroval: 1.5.1
       tiny-invariant: 1.3.3
       tiny-warning: 1.0.3
 
   '@tanstack/start-fn-stubs@1.161.4': {}
 
-  '@tanstack/start-plugin-core@1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(crossws@0.4.4(srvx@0.8.16))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))':
+  '@tanstack/start-plugin-core@1.166.6(@tanstack/react-router@1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(crossws@0.4.4(srvx@0.8.16))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.28.5
       '@babel/types': 7.28.5
       '@rolldown/pluginutils': 1.0.0-beta.40
-      '@tanstack/router-core': 1.163.2
-      '@tanstack/router-generator': 1.163.2
-      '@tanstack/router-plugin': 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
+      '@tanstack/router-core': 1.166.6
+      '@tanstack/router-generator': 1.166.6
+      '@tanstack/router-plugin': 1.166.6(@tanstack/react-router@1.166.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0))(webpack@5.92.0(esbuild@0.24.2))
       '@tanstack/router-utils': 1.161.4
-      '@tanstack/start-client-core': 1.163.2
-      '@tanstack/start-server-core': 1.163.2(crossws@0.4.4(srvx@0.8.16))
+      '@tanstack/start-client-core': 1.166.6
+      '@tanstack/start-server-core': 1.166.6(crossws@0.4.4(srvx@0.8.16))
       cheerio: 1.0.0
       exsolve: 1.0.8
       pathe: 2.0.3
       picomatch: 4.0.3
       source-map: 0.7.6
-      srvx: 0.11.8
+      srvx: 0.11.9
       tinyglobby: 0.2.15
       ufo: 1.5.4
       vite: 7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0)
@@ -25249,23 +25470,23 @@ snapshots:
       - vite-plugin-solid
       - webpack
 
-  '@tanstack/start-server-core@1.163.2(crossws@0.4.4(srvx@0.8.16))':
+  '@tanstack/start-server-core@1.166.6(crossws@0.4.4(srvx@0.8.16))':
     dependencies:
       '@tanstack/history': 1.161.4
-      '@tanstack/router-core': 1.163.2
-      '@tanstack/start-client-core': 1.163.2
-      '@tanstack/start-storage-context': 1.163.2
-      h3-v2: h3@2.0.1-rc.14(crossws@0.4.4(srvx@0.8.16))
-      seroval: 1.5.0
+      '@tanstack/router-core': 1.166.6
+      '@tanstack/start-client-core': 1.166.6
+      '@tanstack/start-storage-context': 1.166.6
+      h3-v2: h3@2.0.1-rc.16(crossws@0.4.4(srvx@0.8.16))
+      seroval: 1.5.1
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
       - crossws
 
-  '@tanstack/start-storage-context@1.163.2':
+  '@tanstack/start-storage-context@1.166.6':
     dependencies:
-      '@tanstack/router-core': 1.163.2
+      '@tanstack/router-core': 1.166.6
 
-  '@tanstack/store@0.9.1': {}
+  '@tanstack/store@0.9.2': {}
 
   '@tanstack/table-core@8.20.5': {}
 
@@ -25299,7 +25520,7 @@ snapshots:
   '@ts-morph/common@0.27.0':
     dependencies:
       fast-glob: 3.3.3
-      minimatch: 10.2.4
+      minimatch: 10.1.1
       path-browserify: 1.0.1
 
   '@turf/boolean-point-in-polygon@7.1.0':
@@ -25332,7 +25553,7 @@ snapshots:
 
   '@types/accepts@1.3.7':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/aria-query@5.0.4': {}
 
@@ -25365,16 +25586,16 @@ snapshots:
 
   '@types/bn.js@5.1.5':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/body-parser@1.19.5':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/bunyan@1.8.11':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/canvas-confetti@1.6.4': {}
 
@@ -25390,7 +25611,7 @@ snapshots:
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/content-disposition@0.5.8': {}
 
@@ -25403,7 +25624,7 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/express': 5.0.0
       '@types/keygrip': 1.0.6
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/css-font-loading-module@0.0.7': {}
 
@@ -25528,8 +25749,6 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
-  '@types/diff-match-patch@1.0.36': {}
-
   '@types/elliptic@6.4.18':
     dependencies:
       '@types/bn.js': 5.1.5
@@ -25554,7 +25773,7 @@ snapshots:
 
   '@types/express-serve-static-core@5.0.6':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
       '@types/qs': 6.9.15
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -25614,7 +25833,7 @@ snapshots:
       '@types/http-errors': 2.0.4
       '@types/keygrip': 1.0.6
       '@types/koa-compose': 3.2.8
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/lodash@4.17.5': {}
 
@@ -25626,7 +25845,7 @@ snapshots:
 
   '@types/memcached@2.2.10':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/methods@1.1.4': {}
 
@@ -25638,7 +25857,7 @@ snapshots:
 
   '@types/mysql@2.15.27':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/node@12.20.55': {}
 
@@ -25670,7 +25889,7 @@ snapshots:
 
   '@types/oracledb@6.5.2':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/parse-json@4.0.2': {}
 
@@ -25680,13 +25899,13 @@ snapshots:
 
   '@types/pg@8.15.4':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
       pg-protocol: 1.10.3
       pg-types: 2.2.0
 
   '@types/pg@8.15.6':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
       pg-protocol: 1.10.3
       pg-types: 2.2.0
 
@@ -25730,12 +25949,12 @@ snapshots:
   '@types/send@0.17.4':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/serve-static@1.15.7':
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
       '@types/send': 0.17.4
 
   '@types/shimmer@1.2.0': {}
@@ -25746,7 +25965,7 @@ snapshots:
     dependencies:
       '@types/cookiejar': 2.1.5
       '@types/methods': 1.1.4
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
       form-data: 4.0.1
 
   '@types/supertest@6.0.2':
@@ -25758,7 +25977,7 @@ snapshots:
 
   '@types/tedious@4.0.14':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/three@0.169.0':
     dependencies:
@@ -25771,7 +25990,7 @@ snapshots:
 
   '@types/through@0.0.33':
     dependencies:
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
 
   '@types/trusted-types@2.0.7':
     optional: true
@@ -25790,7 +26009,7 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.2
+      '@eslint-community/regexpp': 4.12.1
       '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.46.3
       '@typescript-eslint/type-utils': 8.46.3(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
@@ -25977,7 +26196,7 @@ snapshots:
 
   '@typescript-eslint/utils@8.46.3(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.1(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@1.21.7))
       '@typescript-eslint/scope-manager': 8.46.3
       '@typescript-eslint/types': 8.46.3
       '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
@@ -26277,30 +26496,6 @@ snapshots:
 
   agent-base@7.1.4: {}
 
-  ai@4.3.17(react@18.3.1)(zod@3.25.76):
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/react': 1.2.12(react@18.3.1)(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
-      '@opentelemetry/api': 1.9.0
-      jsondiffpatch: 0.6.0
-      zod: 3.25.76
-    optionalDependencies:
-      react: 18.3.1
-
-  ai@4.3.17(react@19.2.3)(zod@3.25.76):
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/react': 1.2.12(react@19.2.3)(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
-      '@opentelemetry/api': 1.9.0
-      jsondiffpatch: 0.6.0
-      zod: 3.25.76
-    optionalDependencies:
-      react: 19.2.3
-
   ai@6.0.81(zod@3.25.76):
     dependencies:
       '@ai-sdk/gateway': 3.0.41(zod@3.25.76)
@@ -26512,7 +26707,7 @@ snapshots:
 
   ast-kit@3.0.0-beta.1:
     dependencies:
-      '@babel/parser': 8.0.0-rc.1
+      '@babel/parser': 8.0.0-rc.2
       estree-walker: 3.0.3
       pathe: 2.0.3
 
@@ -26741,7 +26936,7 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
-  brace-expansion@5.0.3:
+  brace-expansion@5.0.4:
     dependencies:
       balanced-match: 4.0.4
 
@@ -27233,7 +27428,7 @@ snapshots:
       date-fns: 2.30.0
       lodash: 4.17.21
       rxjs: 7.8.1
-      shell-quote: 1.8.1
+      shell-quote: 1.8.3
       spawn-command: 0.0.2
       supports-color: 8.1.1
       tree-kill: 1.2.2
@@ -27737,8 +27932,6 @@ snapshots:
 
   didyoumean@1.2.2: {}
 
-  diff-match-patch@1.0.5: {}
-
   diff-sequences@29.6.3: {}
 
   diff@8.0.3: {}
@@ -27836,7 +28029,7 @@ snapshots:
 
   effect@3.18.4:
     dependencies:
-      '@standard-schema/spec': 1.0.0
+      '@standard-schema/spec': 1.1.0
       fast-check: 3.23.2
 
   electron-to-chromium@1.4.803: {}
@@ -28264,8 +28457,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.27.1
       '@esbuild/win32-x64': 0.27.1
 
-  escalade@3.1.2: {}
-
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -28369,7 +28560,7 @@ snapshots:
       eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.56.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)
       fast-glob: 3.3.2
-      get-tsconfig: 4.13.6
+      get-tsconfig: 4.8.1
       is-core-module: 2.15.1
       is-glob: 4.0.3
     transitivePeerDependencies:
@@ -28384,7 +28575,7 @@ snapshots:
       debug: 4.4.3
       enhanced-resolve: 5.17.1
       eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.56.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       fast-glob: 3.3.3
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
@@ -28427,7 +28618,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.56.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -28505,7 +28696,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.56.1(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -28705,8 +28896,8 @@ snapshots:
 
   eslint@8.57.1:
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      '@eslint-community/regexpp': 4.12.2
+      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.1
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.1
       '@humanwhocodes/config-array': 0.13.0
@@ -28874,7 +29065,7 @@ snapshots:
 
   eventsource@3.0.7:
     dependencies:
-      eventsource-parser: 3.0.3
+      eventsource-parser: 3.0.6
 
   execa@5.1.1:
     dependencies:
@@ -29387,7 +29578,7 @@ snapshots:
       '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.12)(react@18.3.1)
       '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       class-variance-authority: 0.7.1
       fumadocs-core: 15.3.4(@types/react@18.3.12)(next@15.5.10(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -29588,7 +29779,7 @@ snapshots:
 
   glob@13.0.0:
     dependencies:
-      minimatch: 10.2.4
+      minimatch: 10.1.1
       minipass: 7.1.2
       path-scurry: 2.0.0
 
@@ -29680,10 +29871,10 @@ snapshots:
 
   h3-js@4.1.0: {}
 
-  h3@2.0.1-rc.14(crossws@0.4.4(srvx@0.8.16)):
+  h3@2.0.1-rc.16(crossws@0.4.4(srvx@0.8.16)):
     dependencies:
-      rou3: 0.7.12
-      srvx: 0.11.8
+      rou3: 0.8.1
+      srvx: 0.11.9
     optionalDependencies:
       crossws: 0.4.4(srvx@0.8.16)
 
@@ -30440,12 +30631,6 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsondiffpatch@0.6.0:
-    dependencies:
-      '@types/diff-match-patch': 1.0.36
-      chalk: 5.3.0
-      diff-match-patch: 1.0.5
-
   jsonfile@4.0.0:
     optionalDependencies:
       graceful-fs: 4.2.11
@@ -30694,6 +30879,8 @@ snapshots:
 
   lru-cache@10.2.2: {}
 
+  lru-cache@11.1.0: {}
+
   lru-cache@11.2.2: {}
 
   lru-cache@4.1.5:
@@ -31285,9 +31472,13 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
+  minimatch@10.1.1:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
   minimatch@10.2.4:
     dependencies:
-      brace-expansion: 5.0.3
+      brace-expansion: 5.0.4
 
   minimatch@3.1.2:
     dependencies:
@@ -31440,6 +31631,12 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  next-themes@0.2.1(next@16.1.5(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      next: 16.1.5(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -31708,7 +31905,7 @@ snapshots:
 
   nice-try@1.0.5: {}
 
-  nitro@3.0.0(@electric-sql/pglite@0.3.2)(chokidar@4.0.3)(lru-cache@11.2.2)(mysql2@3.15.3)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0)):
+  nitro@3.0.0(@electric-sql/pglite@0.3.2)(chokidar@4.0.3)(lru-cache@11.2.2)(mysql2@3.15.3)(rolldown@1.0.0-rc.3)(vite@7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0)):
     dependencies:
       consola: 3.4.2
       cookie-es: 2.0.0
@@ -31728,6 +31925,7 @@ snapshots:
       unenv: 2.0.0-rc.21
       unstorage: 2.0.0-alpha.3(chokidar@4.0.3)(db0@0.3.4(@electric-sql/pglite@0.3.2)(mysql2@3.15.3))(lru-cache@11.2.2)(ofetch@1.5.1)
     optionalDependencies:
+      rolldown: 1.0.0-rc.3
       vite: 7.3.1(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -31842,7 +32040,7 @@ snapshots:
       consola: 3.4.2
       pathe: 2.0.3
       pkg-types: 2.3.0
-      tinyexec: 1.0.2
+      tinyexec: 1.0.1
 
   oauth4webapi@3.8.3: {}
 
@@ -32128,7 +32326,7 @@ snapshots:
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.2.2
+      lru-cache: 11.1.0
       minipass: 7.1.2
 
   path-to-regexp@0.1.12: {}
@@ -32500,7 +32698,7 @@ snapshots:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
       long: 5.2.3
 
   protobufjs@7.5.4:
@@ -32515,7 +32713,7 @@ snapshots:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 20.17.6
+      '@types/node': 22.19.0
       long: 5.2.3
 
   proxy-addr@2.0.7:
@@ -32887,6 +33085,14 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
+  react-smooth@4.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      fast-equals: 5.0.1
+      prop-types: 15.8.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-transition-group: 4.4.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+
   react-style-singleton@2.2.3(@types/react@18.3.12)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
@@ -33035,6 +33241,19 @@ snapshots:
       tiny-invariant: 1.3.3
       victory-vendor: 36.9.2
 
+  recharts@2.15.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   recma-build-jsx@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -33300,12 +33519,12 @@ snapshots:
 
   robust-predicates@3.0.2: {}
 
-  rolldown-plugin-dts@0.22.1(rolldown@1.0.0-rc.3)(typescript@5.9.3):
+  rolldown-plugin-dts@0.22.4(rolldown@1.0.0-rc.3)(typescript@5.9.3):
     dependencies:
-      '@babel/generator': 8.0.0-rc.1
-      '@babel/helper-validator-identifier': 8.0.0-rc.1
-      '@babel/parser': 8.0.0-rc.1
-      '@babel/types': 8.0.0-rc.1
+      '@babel/generator': 8.0.0-rc.2
+      '@babel/helper-validator-identifier': 8.0.0-rc.2
+      '@babel/parser': 8.0.0-rc.2
+      '@babel/types': 8.0.0-rc.2
       ast-kit: 3.0.0-beta.1
       birpc: 4.0.0
       dts-resolver: 2.1.3
@@ -33336,6 +33555,27 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.3
       '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.3
 
+  rolldown@1.0.0-rc.7:
+    dependencies:
+      '@oxc-project/types': 0.115.0
+      '@rolldown/pluginutils': 1.0.0-rc.7
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-rc.7
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.7
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.7
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.7
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.7
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.7
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.7
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.7
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.7
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.7
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.7
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.7
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.7
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.7
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.7
+
   rollup@4.34.8:
     dependencies:
       '@types/estree': 1.0.6
@@ -33421,6 +33661,8 @@ snapshots:
 
   rou3@0.7.12: {}
 
+  rou3@0.8.1: {}
+
   roughjs@4.6.6:
     dependencies:
       hachure-fill: 0.5.2
@@ -33582,11 +33824,11 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
-  seroval-plugins@1.5.0(seroval@1.5.0):
+  seroval-plugins@1.5.1(seroval@1.5.1):
     dependencies:
-      seroval: 1.5.0
+      seroval: 1.5.1
 
-  seroval@1.5.0: {}
+  seroval@1.5.1: {}
 
   serve-handler@6.1.6:
     dependencies:
@@ -33697,8 +33939,6 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shell-quote@1.8.1: {}
-
   shell-quote@1.8.3: {}
 
   shiki@3.14.0:
@@ -33820,7 +34060,7 @@ snapshots:
 
   sqlstring@2.3.3: {}
 
-  srvx@0.11.8: {}
+  srvx@0.11.9: {}
 
   srvx@0.8.16: {}
 
@@ -34109,13 +34349,13 @@ snapshots:
     dependencies:
       dequal: 2.0.3
       react: 18.3.1
-      use-sync-external-store: 1.5.0(react@18.3.1)
+      use-sync-external-store: 1.6.0(react@18.3.1)
 
   swr@2.3.4(react@19.2.3):
     dependencies:
       dequal: 2.0.3
       react: 19.2.3
-      use-sync-external-store: 1.5.0(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
   symbol-tree@3.2.4: {}
 
@@ -34358,6 +34598,8 @@ snapshots:
 
   tinycolor2@1.6.0: {}
 
+  tinyexec@1.0.1: {}
+
   tinyexec@1.0.2: {}
 
   tinyglobby@0.2.15:
@@ -34447,13 +34689,13 @@ snapshots:
       obug: 2.1.1
       picomatch: 4.0.3
       rolldown: 1.0.0-rc.3
-      rolldown-plugin-dts: 0.22.1(rolldown@1.0.0-rc.3)(typescript@5.9.3)
+      rolldown-plugin-dts: 0.22.4(rolldown@1.0.0-rc.3)(typescript@5.9.3)
       semver: 7.7.3
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tree-kill: 1.2.2
       unconfig-core: 7.5.0
-      unrun: 0.2.27
+      unrun: 0.2.30
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -34698,9 +34940,9 @@ snapshots:
       picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
-  unrun@0.2.27:
+  unrun@0.2.30:
     dependencies:
-      rolldown: 1.0.0-rc.3
+      rolldown: 1.0.0-rc.7
 
   unstorage@2.0.0-alpha.3(chokidar@4.0.3)(db0@0.3.4(@electric-sql/pglite@0.3.2)(mysql2@3.15.3))(lru-cache@11.2.2)(ofetch@1.5.1):
     optionalDependencies:
@@ -34712,7 +34954,7 @@ snapshots:
   update-browserslist-db@1.0.16(browserslist@4.23.1):
     dependencies:
       browserslist: 4.23.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       picocolors: 1.1.1
 
   update-browserslist-db@1.1.1(browserslist@4.24.4):
@@ -34819,14 +35061,10 @@ snapshots:
     dependencies:
       react: 19.2.1
 
-  use-sync-external-store@1.5.0(react@18.3.1):
+  use-sync-external-store@1.6.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
-  use-sync-external-store@1.5.0(react@19.2.3):
-    dependencies:
-      react: 19.2.3
-
   use-sync-external-store@1.6.0(react@19.2.1):
     dependencies:
       react: 19.2.1
@@ -34834,7 +35072,6 @@ snapshots:
   use-sync-external-store@1.6.0(react@19.2.3):
     dependencies:
       react: 19.2.3
-    optional: true
 
   util-deprecate@1.0.2: {}
 
@@ -34982,7 +35219,7 @@ snapshots:
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
-      rollup: 4.57.1
+      rollup: 4.50.1
     optionalDependencies:
       '@types/node': 20.17.6
       fsevents: 2.3.3
@@ -35412,7 +35649,7 @@ snapshots:
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 956387e6d6..5d7084ca97 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -10,6 +10,7 @@ minimumReleaseAge: 2880
 minimumReleaseAgeExclude:
 - '@anthropic-ai/claude-agent-sdk'
 - ai
+- '@ai-sdk/anthropic'
 - '@ai-sdk/openai'
 - '@ai-sdk/react'
 - '@ai-sdk/provider'