@agent-native/core 0.79.17 → 0.79.19

package/corpus/templates/mail/server/handlers/google-auth.ts

@@ -35,6 +35,7 @@ import {
   getAuthStatus,
   disconnect,
   getClient,
+  getOAuth2Credentials,
   setAccountDisplayName,
 } from "../lib/google-auth.js";
 
@@ -103,14 +104,6 @@ function googleOAuthErrorResponse(
 }
 
 export const getGoogleAuthUrl = defineEventHandler(async (event: H3Event) => {
-  if (!process.env.GOOGLE_CLIENT_ID || !process.env.GOOGLE_CLIENT_SECRET) {
-    setResponseStatus(event, 422);
-    return {
-      error: "missing_credentials",
-      message:
-        "Google OAuth credentials are not configured. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.",
-    };
-  }
   try {
     const q = getQuery(event);
     const redirectUri = resolveOAuthRedirectUri(event);
@@ -123,6 +116,7 @@ export const getGoogleAuthUrl = defineEventHandler(async (event: H3Event) => {
     }
     const session = await getSession(event);
     const owner = session?.email;
+    await getOAuth2Credentials(owner);
     const desktop =
       isElectron(event) || q.desktop === "1" || q.desktop === "true";
     const flowId = desktop ? (q.flow_id as string) || undefined : undefined;
@@ -141,12 +135,20 @@ export const getGoogleAuthUrl = defineEventHandler(async (event: H3Event) => {
       returnUrl,
       flowId,
     });
-    const url = getAuthUrl(undefined, redirectUri, state);
+    const url = await getAuthUrl(undefined, redirectUri, state, owner);
     if (q.redirect === "1") {
       return oauthRedirectResponse(url);
     }
     return { url };
   } catch (error: any) {
+    if (/GOOGLE_CLIENT_ID|GOOGLE_CLIENT_SECRET/.test(error?.message || "")) {
+      setResponseStatus(event, 422);
+      return {
+        error: "missing_credentials",
+        message:
+          "Google OAuth credentials are not configured. Save GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in settings.",
+      };
+    }
     setResponseStatus(event, 500);
     return { error: error.message };
   }
@@ -279,12 +281,12 @@ export const getGoogleAddAccountUrl = defineEventHandler(
       setResponseStatus(event, 401);
       return { error: "Must be logged in to add an account" };
     }
-    if (!process.env.GOOGLE_CLIENT_ID || !process.env.GOOGLE_CLIENT_SECRET) {
+    if (!(await getOAuth2Credentials(session.email).catch(() => null))) {
       setResponseStatus(event, 422);
       return {
         error: "missing_credentials",
         message:
-          "Google OAuth credentials are not configured. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.",
+          "Google OAuth credentials are not configured. Save GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in settings.",
       };
     }
     try {
@@ -308,7 +310,12 @@ export const getGoogleAddAccountUrl = defineEventHandler(
         app: OAUTH_STATE_APP_ID,
         flowId,
       });
-      const url = getAuthUrl(undefined, redirectUri, state);
+      const url = await getAuthUrl(
+        undefined,
+        redirectUri,
+        state,
+        session.email,
+      );
       if (q.redirect === "1") {
         return oauthRedirectResponse(url);
       }

package/corpus/templates/mail/server/lib/automation-engine.ts

@@ -27,6 +27,7 @@ import {
   gmailListHistory,
   gmailGetProfile,
 } from "./google-api.js";
+import { getOAuth2Credentials } from "./google-auth.js";
 
 const DEFAULT_MODEL = "claude-haiku-4-5-20251001";
 const MAX_EMAILS_PER_RUN = 50;
@@ -91,8 +92,8 @@ async function getAccessToken(accountEmail: string): Promise<string | null> {
     tokens.expiry_date < Date.now() + 5 * 60 * 1000
   ) {
     try {
-      const clientId = process.env.GOOGLE_CLIENT_ID!;
-      const clientSecret = process.env.GOOGLE_CLIENT_SECRET!;
+      const { clientId, clientSecret } =
+        await getOAuth2Credentials(accountEmail);
       const oauth = createOAuth2Client(
         clientId,
         clientSecret,

package/corpus/templates/mail/server/lib/email-state.ts

@@ -22,7 +22,7 @@ import {
   gmailTrashThread,
   gmailUntrashThread,
 } from "./google-api.js";
-import { isConnected } from "./google-auth.js";
+import { getOAuth2Credentials, isConnected } from "./google-auth.js";
 import { invalidateThreadCache } from "./thread-cache.js";
 
 // ---------------------------------------------------------------------------
@@ -45,8 +45,7 @@ async function refreshIfNeeded(
     tokens.expiry_date &&
     tokens.expiry_date < Date.now() + 5 * 60 * 1000
   ) {
-    const clientId = process.env.GOOGLE_CLIENT_ID!;
-    const clientSecret = process.env.GOOGLE_CLIENT_SECRET!;
+    const { clientId, clientSecret } = await getOAuth2Credentials(accountId);
     const oauth = createOAuth2Client(clientId, clientSecret, "");
     const refreshed = await oauth.refreshToken(tokens.refresh_token);
     const updated = {

package/corpus/templates/mail/server/lib/google-auth.ts

@@ -5,7 +5,12 @@ import {
   listOAuthAccountsByOwner,
   setOAuthDisplayName,
 } from "@agent-native/core/oauth-tokens";
-import { isOAuthConnected, getOAuthAccounts } from "@agent-native/core/server";
+import {
+  isOAuthConnected,
+  getOAuthAccounts,
+  resolveSecret,
+  runWithRequestContext,
+} from "@agent-native/core/server";
 import { getUserSetting, putUserSetting } from "@agent-native/core/settings";
 import { decodeCommonHtmlEntities } from "@shared/markdown.js";
 
@@ -46,15 +51,26 @@ interface GoogleTokens {
   scope?: string;
 }
 
-function getOAuth2Credentials(): {
+export async function getOAuth2Credentials(owner?: string): Promise<{
   clientId: string;
   clientSecret: string;
-} {
-  const clientId = process.env.GOOGLE_CLIENT_ID;
-  const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
+}> {
+  const resolve = async () => {
+    const [clientId, clientSecret] = await Promise.all([
+      resolveSecret("GOOGLE_CLIENT_ID"),
+      resolveSecret("GOOGLE_CLIENT_SECRET"),
+    ]);
+    if (!clientId || !clientSecret) return null;
+    return { clientId, clientSecret };
+  };
+  const credentials = owner
+    ? await runWithRequestContext({ userEmail: owner }, resolve)
+    : await resolve();
+  const clientId = credentials?.clientId;
+  const clientSecret = credentials?.clientSecret;
   if (!clientId || !clientSecret) {
     throw new Error(
-      "GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET must be set in environment",
+      "GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET must be saved in settings",
     );
   }
   return { clientId, clientSecret };
@@ -112,7 +128,7 @@ async function getValidAccessToken(
     );
   }
 
-  const { clientId, clientSecret } = getOAuth2Credentials();
+  const { clientId, clientSecret } = await getOAuth2Credentials(owner);
   const redirectUri = "http://localhost:8080/_agent-native/google/callback";
   const oauth2 = createOAuth2Client(clientId, clientSecret, redirectUri);
   let refreshed;
@@ -157,12 +173,13 @@ async function getValidAccessToken(
   return refreshed.access_token;
 }
 
-export function getAuthUrl(
+export async function getAuthUrl(
   origin?: string,
   redirectUri?: string,
   state?: string,
-): string {
-  const { clientId, clientSecret } = getOAuth2Credentials();
+  owner?: string,
+): Promise<string> {
+  const { clientId, clientSecret } = await getOAuth2Credentials(owner);
   const uri =
     redirectUri ||
     (origin
@@ -215,7 +232,7 @@ export async function exchangeCode(
   redirectUri?: string,
   owner?: string,
 ): Promise<string> {
-  const { clientId, clientSecret } = getOAuth2Credentials();
+  const { clientId, clientSecret } = await getOAuth2Credentials(owner);
   const uri =
     redirectUri ||
     (origin

package/corpus/templates/mail/server/lib/jobs.ts

@@ -25,6 +25,7 @@ import {
   getAccountDisplayName,
   isConnected,
   gmailToEmailMessage,
+  getOAuth2Credentials,
   setAccountDisplayName,
 } from "./google-auth.js";
 import {
@@ -83,8 +84,8 @@ async function getAccessToken(accountEmail: string): Promise<string | null> {
     tokens.expiry_date < Date.now() + 5 * 60 * 1000
   ) {
     try {
-      const clientId = process.env.GOOGLE_CLIENT_ID!;
-      const clientSecret = process.env.GOOGLE_CLIENT_SECRET!;
+      const { clientId, clientSecret } =
+        await getOAuth2Credentials(accountEmail);
       const oauth = createOAuth2Client(
         clientId,
         clientSecret,

package/corpus/templates/mail/server/onboarding.ts

@@ -8,12 +8,12 @@
  *      `GoogleConnectBanner` auto-detects missing credentials and guides the
  *      user through the Google Cloud Console setup.
  *   2. Agent task — hands the task to the agent, which drives the user's
- *      browser (or falls back to verbal step-by-step instructions) and writes
- *      the resulting credentials into the workspace `.env` via
- *      `POST /_agent-native/env-vars`.
+ *      browser (or falls back to verbal step-by-step instructions) and saves
+ *      the resulting credentials as workspace-scoped DB keys.
  */
 
 import { registerOnboardingStep } from "@agent-native/core/onboarding";
+import { readDeployCredentialEnv } from "@agent-native/core/server";
 
 registerOnboardingStep({
   id: "gmail",
@@ -37,10 +37,13 @@ registerOnboardingStep({
       label: "Have the agent set it up for me",
       payload: {
         prompt:
-          'Help me connect Gmail. Walk me through creating Google OAuth credentials by driving my browser (use any mcp__*browser* tools available, or fall back to giving me step-by-step instructions with exact URLs and values). When client_id and client_secret are ready, save them to my workspace .env via POST /_agent-native/env-vars with scope "workspace". Then tell me to click "Sign in with Google" in the mail onboarding banner to finish the OAuth sign-in.',
+          "Help me connect Gmail. Walk me through creating Google OAuth credentials by driving my browser (use any mcp__*browser* tools available, or fall back to giving me step-by-step instructions with exact URLs and values). When client_id and client_secret are ready, help me configure GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET as deployment or local environment variables for Mail, then restart or redeploy before clicking Sign in with Google.",
       },
     },
   ],
-  isComplete: () =>
-    !!process.env.GOOGLE_CLIENT_ID && !!process.env.GOOGLE_CLIENT_SECRET,
+  isComplete: async () =>
+    Boolean(
+      readDeployCredentialEnv("GOOGLE_CLIENT_ID") &&
+      readDeployCredentialEnv("GOOGLE_CLIENT_SECRET"),
+    ),
 });

package/corpus/templates/mail/server/routes/api/attachments.get.ts

@@ -15,7 +15,7 @@ import {
   createOAuth2Client,
   gmailGetAttachment,
 } from "../../lib/google-api.js";
-import { isConnected } from "../../lib/google-auth.js";
+import { getOAuth2Credentials, isConnected } from "../../lib/google-auth.js";
 
 interface StoredTokens {
   access_token: string;
@@ -35,8 +35,8 @@ async function getAccessToken(accountEmail: string): Promise<string | null> {
     tokens.expiry_date < Date.now() + 5 * 60 * 1000
   ) {
     try {
-      const clientId = process.env.GOOGLE_CLIENT_ID!;
-      const clientSecret = process.env.GOOGLE_CLIENT_SECRET!;
+      const { clientId, clientSecret } =
+        await getOAuth2Credentials(accountEmail);
       const oauth = createOAuth2Client(
         clientId,
         clientSecret,

package/corpus/templates/plan/actions/request-plan-access.ts

@@ -57,7 +57,7 @@ async function notifyOwner(input: {
   requesterEmail: string;
   requesterName: string;
 }): Promise<boolean> {
-  if (!isEmailConfigured()) return false;
+  if (!(await isEmailConfigured())) return false;
   if (!input.ownerEmail || input.ownerEmail === input.requesterEmail) {
     return false;
   }

package/corpus/templates/plan/app/components/layout/Header.tsx

@@ -10,7 +10,6 @@ const pageTitleKeys: Record<string, string> = {
   "/": "header.plan",
   "/plans": "header.plan",
   "/settings": "header.settings",
-  "/team": "header.team",
 };
 
 function resolveTitle(pathname: string): string {

package/corpus/templates/plan/app/components/plan/CanvasArea.tsx

@@ -43,6 +43,8 @@ const WHEEL_ZOOM_STEP = 0.16;
 const PINCH_ZOOM_SENSITIVITY = 0.01;
 /** Base CSS grid cell, scaled by zoom. */
 const GRID_CELL = 28;
+/** Extra world-space grid on each side so the grid still fills overscrolled pans. */
+const GRID_PADDING = 5000;
 
 type CanvasView = typeof DEFAULT_VIEW;
 export type CanvasViewport = CanvasView;
@@ -156,6 +158,9 @@ export function CanvasArea({
   );
   const latestViewportChangeRef = useRef<CanvasViewport>(initialView);
   const viewportChangeFrameRef = useRef<number | null>(null);
+  // Kept current each render so the central pan clamp (in updateView) can read
+  // the live board size without widening updateView's dependencies.
+  const boardRef = useRef({ width: 0, height: 0 });
   const queueViewportChange = useCallback(
     (nextView: CanvasViewport) => {
       latestViewportChangeRef.current = nextView;
@@ -171,7 +176,11 @@ export function CanvasArea({
   const updateView = useCallback(
     (resolve: (current: CanvasView) => CanvasView) => {
       setView((current) => {
-        const next = resolve(current);
+        const next = clampPanToGrid(
+          resolve(current),
+          boardRef.current,
+          viewportRef.current?.getBoundingClientRect() ?? null,
+        );
         if (sameCanvasView(current, next)) return current;
         queueViewportChange(next);
         return next;
@@ -332,6 +341,7 @@ export function CanvasArea({
     );
     return { width: maxX + 360, height: maxY + 280 };
   }, [frames, annotations, legacyNotes]);
+  boardRef.current = board;
 
   const lastAutoFitKeyRef = useRef<string | null>(null);
   useEffect(() => {
@@ -385,6 +395,7 @@ export function CanvasArea({
   }, [frameLayoutKey, frames, hasSavedViewport, updateView]);
 
   const { zoom, pan } = view;
+  const worldTransform = `translate3d(${pan.x}px, ${pan.y}px, 0) scale(${zoom})`;
   useEffect(() => {
     queueViewportChange(view);
   }, [queueViewportChange, view]);
@@ -656,8 +667,6 @@ export function CanvasArea({
         tabIndex={0}
         style={
           {
-            backgroundPosition: `${pan.x}px ${pan.y}px`,
-            backgroundSize: `${GRID_CELL * zoom}px ${GRID_CELL * zoom}px`,
             overscrollBehavior: "contain",
             touchAction: "none",
           } as CSSProperties
@@ -724,11 +733,25 @@ export function CanvasArea({
           style={{
             width: board.width,
             height: board.height,
-            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+            transform: worldTransform,
             transformOrigin: "0 0",
             willChange: "transform",
+            backfaceVisibility: "hidden",
           }}
         >
+          <div
+            aria-hidden="true"
+            className="plan-canvas-grid absolute"
+            data-plan-canvas-grid
+            style={{
+              left: -GRID_PADDING,
+              top: -GRID_PADDING,
+              width: board.width + GRID_PADDING * 2,
+              height: board.height + GRID_PADDING * 2,
+              backgroundSize: `${GRID_CELL}px ${GRID_CELL}px`,
+            }}
+          />
+
           {/* Section containers sit BEHIND the frames (lowest layer) so each
               group reads as one bounded region the artboards rest inside. */}
           {sectionRects.map(({ section, rect }) => (
@@ -2293,3 +2316,32 @@ function resolveMarkupComposerPosition(input: {
 function clamp(value: number, min: number, max: number) {
   return Math.max(min, Math.min(max, value));
 }
+
+/**
+ * Keep the visible viewport inside the rendered grid. The grid is a fixed-size
+ * child of the transformed world (board + GRID_PADDING on every side), so it is
+ * large but finite; without this clamp a far-enough pan scrolls past the grid
+ * edge into a blank void. Screen = pan + world * zoom, and the grid spans world
+ * [-GRID_PADDING, board + GRID_PADDING], so bounding pan to the range below
+ * guarantees the grid always fills the viewport while still allowing the full
+ * GRID_PADDING of overscroll. A no-op until the viewport has been measured.
+ */
+function clampPanToGrid(
+  view: CanvasView,
+  board: { width: number; height: number },
+  rect: DOMRect | null,
+): CanvasView {
+  if (!rect) return view;
+  const { zoom } = view;
+  const minPanX = rect.width - (board.width + GRID_PADDING) * zoom;
+  const maxPanX = GRID_PADDING * zoom;
+  const minPanY = rect.height - (board.height + GRID_PADDING) * zoom;
+  const maxPanY = GRID_PADDING * zoom;
+  return {
+    zoom,
+    pan: {
+      x: minPanX <= maxPanX ? clamp(view.pan.x, minPanX, maxPanX) : view.pan.x,
+      y: minPanY <= maxPanY ? clamp(view.pan.y, minPanY, maxPanY) : view.pan.y,
+    },
+  };
+}

package/corpus/templates/plan/app/global.css

@@ -255,13 +255,18 @@
   touch-action: none;
 }
 
-/* Infinite low-contrast grid (slightly darker than the document bg) that
- * moves on pan via background-position and scales with zoom — both driven
- * inline by CanvasArea. */
+/* Infinite low-contrast grid. The live grid is rendered inside the transformed
+ * canvas world so Chrome can composite grid + artboards together while panning. */
 .plan-canvas-viewport {
+  isolation: isolate;
+}
+
+.plan-canvas-grid {
+  pointer-events: none;
   background-image:
     linear-gradient(var(--plan-grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--plan-grid-line) 1px, transparent 1px);
+  backface-visibility: hidden;
 }
 
 /* Fixed-size static artboard frame. No border / shadow / box around the

package/corpus/templates/plan/app/hooks/use-navigation-state.ts

@@ -132,7 +132,7 @@ function viewForPath(pathname: string): string {
     return "plans";
   }
   if (pathname.startsWith("/extensions")) return "extensions";
-  if (pathname.startsWith("/team")) return "team";
+  if (pathname.startsWith("/team")) return "settings";
   return "plans";
 }
 
@@ -183,8 +183,10 @@ function pathForView(view?: string): string {
       return "/plans";
     case "extensions":
       return "/extensions";
+    case "settings":
+      return "/settings";
     case "team":
-      return "/team";
+      return "/settings#team";
     default:
       return "/";
   }

package/corpus/templates/plan/app/lib/route-prewarm.ts

@@ -48,10 +48,6 @@ export function prewarmPlanRoutePath(path: string) {
     );
   }
 
-  if (pathname === "/team") {
-    jobs.push(prewarm("team", () => import("@/routes/team")));
-  }
-
   return Promise.all(jobs);
 }
 

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -7113,7 +7113,7 @@ function PlanCanvasSkeleton() {
       aria-hidden="true"
     >
       <div
-        className="plan-canvas-viewport absolute inset-0"
+        className="plan-canvas-grid absolute inset-0"
         style={{
           backgroundPosition: "96px 64px",
           backgroundSize: "20px 20px",

package/corpus/templates/plan/app/routes/settings.tsx

@@ -1,10 +1,11 @@
 import {
   ChangelogSettingsCard,
   LanguagePicker,
+  SettingsTabsPage,
   openAgentSettings,
   useT,
 } from "@agent-native/core/client";
-import { Link } from "react-router";
+import { TeamPage } from "@agent-native/core/client/org";
 
 import { useSetPageTitle } from "@/components/layout/HeaderActions";
 import { Button } from "@/components/ui/button";
@@ -29,80 +30,81 @@ export default function SettingsRoute() {
   useSetPageTitle(t("settings.title"));
 
   return (
-    <main className="mx-auto w-full max-w-3xl space-y-6 px-4 py-6 sm:px-6 sm:py-10">
-      <div className="space-y-1">
-        <h1 className="text-2xl font-semibold tracking-tight">
-          {t("settings.title")}
-        </h1>
-        <p className="text-sm leading-6 text-muted-foreground">
-          {t("settings.description")}
-        </p>
-      </div>
+    <SettingsTabsPage
+      teamLabel={t("header.team")}
+      general={
+        <div className="mx-auto w-full max-w-3xl space-y-6">
+          <p className="text-sm leading-6 text-muted-foreground">
+            {t("settings.description")}
+          </p>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">
-            {t("settings.languageTitle")}
-          </CardTitle>
-          <CardDescription>{t("settings.languageDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent className="max-w-xs space-y-1.5">
-          <Label>{t("settings.languageLabel")}</Label>
-          <LanguagePicker label={t("settings.languageLabel")} />
-        </CardContent>
-      </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t("settings.languageTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.languageDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="max-w-xs space-y-1.5">
+              <Label>{t("settings.languageLabel")}</Label>
+              <LanguagePicker label={t("settings.languageLabel")} />
+            </CardContent>
+          </Card>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">
-            {t("settings.workspaceTitle")}
-          </CardTitle>
-          <CardDescription>
-            {t("settings.workspaceDescription")}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button variant="outline" asChild>
-            <Link to="/team">{t("settings.openTeamSettings")}</Link>
-          </Button>
-        </CardContent>
-      </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t("settings.agentTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.agentDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button variant="outline" onClick={() => openAgentSettings()}>
+                {t("settings.openAgentSettings")}
+              </Button>
+            </CardContent>
+          </Card>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">
-            {t("settings.agentTitle")}
-          </CardTitle>
-          <CardDescription>{t("settings.agentDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button variant="outline" onClick={() => openAgentSettings()}>
-            {t("settings.openAgentSettings")}
-          </Button>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">
-            {t("settings.editorTitle")}
-          </CardTitle>
-          <CardDescription>{t("settings.editorDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button variant="outline" asChild>
-            <a
-              href="https://marketplace.visualstudio.com/items?itemName=Builder.agent-native"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              {t("settings.openEditorExtension")}
-            </a>
-          </Button>
-        </CardContent>
-      </Card>
-
-      <ChangelogSettingsCard markdown={changelog} />
-    </main>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t("settings.editorTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.editorDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button variant="outline" asChild>
+                <a
+                  href="https://marketplace.visualstudio.com/items?itemName=Builder.agent-native"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  {t("settings.openEditorExtension")}
+                </a>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      }
+      team={
+        <div className="mx-auto w-full max-w-3xl">
+          <TeamPage
+            showTitle={false}
+            createOrgDescription="Set up a team to share this app with your colleagues."
+          />
+        </div>
+      }
+      whatsNew={
+        <div className="mx-auto w-full max-w-3xl">
+          <ChangelogSettingsCard markdown={changelog} />
+        </div>
+      }
+    />
   );
 }