@sentry/junior-dashboard 0.236.0 → 0.238.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.236.0",
+  "version": "0.238.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,8 +34,8 @@
     "react-router": "^7.18.2",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.236.0",
-    "@sentry/junior": "0.236.0"
+    "@sentry/junior": "0.238.0",
+    "@sentry/junior-plugin-api": "0.238.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",

package/src/api/schema.ts

@@ -1,12 +1,25 @@
 import { z } from "zod";
 
+const dashboardSessionUserSchema = z
+  .object({
+    email: z.string().trim().email(),
+    emailVerified: z.boolean().optional(),
+    name: z.string().nullable().optional(),
+  })
+  .strict();
+
+/** Sanitized sign-in session. It never carries Junior roles. */
+export const dashboardSessionSchema = z
+  .object({ user: dashboardSessionUserSchema })
+  .strict();
+
+/** Signed-in viewer returned by `/api/me`. */
 export const dashboardIdentitySchema = z
   .object({
-    user: z
-      .object({
-        email: z.string().trim().email(),
-        emailVerified: z.boolean().optional(),
-        name: z.string().nullable().optional(),
+    user: dashboardSessionUserSchema
+      .extend({
+        /** Junior-wide admin role. The server still checks it on every admin route. */
+        isAdmin: z.boolean(),
       })
       .strict(),
   })
@@ -32,5 +45,6 @@ export const dashboardConfigSchema = z
   })
   .strict();
 
+export type DashboardSession = z.infer<typeof dashboardSessionSchema>;
 export type DashboardIdentity = z.infer<typeof dashboardIdentitySchema>;
 export type DashboardConfig = z.infer<typeof dashboardConfigSchema>;

package/src/app.ts

@@ -376,6 +376,7 @@ function pluginRouteRequest(request: Request, prefix: string): Request {
 function pluginRouteContext(
   pluginName: string,
   session: DashboardSession,
+  viewer: Variables["viewer"],
 ): PluginApiRouteRequestContext {
   const { email, emailVerified, name } = session.user;
   return {
@@ -383,6 +384,7 @@ function pluginRouteContext(
       user: {
         email,
         emailVerified,
+        isAdmin: viewer?.isAdmin === true,
         name,
       },
     },
@@ -612,7 +614,11 @@ export function createDashboardApp(
       route.app.fetch(
         pluginRouteRequest(c.req.raw, prefix),
         pluginApiRouteRequestContextSchema.parse(
-          pluginRouteContext(route.pluginName, c.get("authSession")),
+          pluginRouteContext(
+            route.pluginName,
+            c.get("authSession"),
+            c.get("viewer"),
+          ),
         ),
       );
     app.all(prefix, handler);
@@ -645,6 +651,7 @@ export function createDashboardApp(
       user: {
         email: session.user.email,
         emailVerified: session.user.emailVerified,
+        isAdmin: viewer?.isAdmin === true,
         name: viewer?.displayName ?? session.user.name,
       },
     });
@@ -684,6 +691,7 @@ export function createDashboardApp(
         user: {
           email: session.user.email,
           emailVerified: session.user.emailVerified,
+          isAdmin: viewer.isAdmin === true,
           name: parsed.data.displayName,
         },
       });
@@ -703,6 +711,7 @@ export function createDashboardApp(
       user: {
         email: session.user.email,
         emailVerified: session.user.emailVerified,
+        isAdmin: updated.isAdmin === true,
         name: updated.displayName,
       },
     });

package/src/auth.ts

@@ -1,12 +1,12 @@
 import { betterAuth } from "better-auth/minimal";
-import { dashboardIdentitySchema } from "./api/schema";
-import type { DashboardIdentity } from "./api/schema";
+import { dashboardSessionSchema } from "./api/schema";
+import type { DashboardSession } from "./api/schema";
 import { resolveDashboardBaseURL } from "./url";
 
 const DEFAULT_SESSION_MAX_AGE_SECONDS = 60 * 60 * 8;
 
-export type DashboardUser = DashboardIdentity["user"];
-export type DashboardSession = DashboardIdentity;
+export type DashboardUser = DashboardSession["user"];
+export type { DashboardSession };
 
 export interface DashboardAuthConfig {
   agentName?: string;
@@ -70,7 +70,7 @@ export function sanitizeDashboardSession(
   session: DashboardSession,
 ): DashboardSession {
   const { email, emailVerified, name } = session.user;
-  return dashboardIdentitySchema.parse({
+  return dashboardSessionSchema.parse({
     user: {
       email,
       emailVerified,

package/src/client/App.tsx

@@ -60,6 +60,7 @@ import {
   MemoryPermalinkRoute,
   PluginUserPageRoute,
 } from "./pages/user/PluginUserPage";
+import { AdminPage } from "./pages/admin/AdminPage";
 import { buildPrimaryNavItems } from "./primaryNav";
 import { dashboardShellBgClass } from "./styles";
 import type { DashboardCoreData } from "./types";
@@ -600,6 +601,18 @@ export function DashboardShell() {
             }
             path="/plugins/:pluginName/:pageId/*"
           />
+          <Route
+            element={
+              loading || userPagesQuery.isPending ? (
+                <LoadingView label="Loading admin" />
+              ) : loggedIn && data!.me.user.isAdmin && userPagesQuery.data ? (
+                <AdminPage pages={userPagesQuery.data} />
+              ) : (
+                <Navigate replace to="/" />
+              )
+            }
+            path="/admin"
+          />
           <Route element={<Navigate replace to="/" />} path="*" />
         </Routes>
         <span

package/src/client/components/ProfileMenu.tsx

@@ -4,6 +4,7 @@ import {
   KeyRound,
   LogOut,
   Settings,
+  ShieldCheck,
   UserRound,
 } from "lucide-react";
 import {
@@ -78,7 +79,9 @@ export function ProfileMenu({
   const thirtyDaySpend = spend
     ? formatCostSummary({ total: spend.thirtyDaysUsd })
     : "—";
-  const profilePages = userPages.filter((page) => page.navigation === "profile");
+  const profilePages = userPages.filter(
+    (page) => page.navigation === "profile",
+  );
 
   function clearHoverTimers() {
     if (openTimerRef.current) clearTimeout(openTimerRef.current);
@@ -191,6 +194,12 @@ export function ProfileMenu({
         <KeyRound aria-hidden="true" size={16} strokeWidth={2} />
         API tokens
       </Link>
+      {identity.user.isAdmin ? (
+        <Link className={profileLinkClass} onClick={close} to="/admin">
+          <ShieldCheck aria-hidden="true" size={16} strokeWidth={2} />
+          Admin
+        </Link>
+      ) : null}
       {profilePages.map((page) => (
         <Link
           className={profileLinkClass}
@@ -228,7 +237,9 @@ export function ProfileMenu({
         </span>
         <span className="whitespace-nowrap">
           7d{" "}
-          <span className="font-semibold text-dashboard-text">{sevenDaySpend}</span>
+          <span className="font-semibold text-dashboard-text">
+            {sevenDaySpend}
+          </span>
         </span>
         <span className="whitespace-nowrap">
           30d{" "}
@@ -257,6 +268,11 @@ export function ProfileMenu({
         <Link className={sheetItemClass} to="/settings/api-tokens">
           API tokens
         </Link>
+        {identity.user.isAdmin ? (
+          <Link className={sheetItemClass} to="/admin">
+            Admin
+          </Link>
+        ) : null}
         {profilePages.map((page) => (
           <Link
             className={sheetItemClass}
@@ -343,7 +359,10 @@ export function ProfileMenu({
               {sevenDaySpend}
             </span>
           </span>
-          <span aria-hidden="true" className="h-3 w-px bg-dashboard-fill-strong" />
+          <span
+            aria-hidden="true"
+            className="h-3 w-px bg-dashboard-fill-strong"
+          />
           <span className="flex items-baseline gap-1 whitespace-nowrap tabular-nums">
             <span className="text-xs font-medium tracking-[0.08em] text-dashboard-text-muted">
               30d

package/src/client/pages/admin/AdminPage.tsx

@@ -0,0 +1,77 @@
+import { Boxes, ChevronRight } from "lucide-react";
+import { Link } from "react-router";
+import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
+
+import { Card } from "../../components/layout/Card";
+import { PageHeader } from "../../components/layout/PageHeader";
+import { dashboardContainerClass } from "../../styles";
+import { pluginUserPagePath } from "../user/PluginUserPage";
+
+/**
+ * List admin-only plugin pages for a Junior admin.
+ *
+ * The server hides admin pages from other viewers and refuses to serve them,
+ * so this page only arranges links.
+ */
+export function AdminPage(props: { pages: PluginUserPageLink[] }) {
+  const adminPages = props.pages.filter((page) => page.navigation === "admin");
+  return (
+    <div className={`${dashboardContainerClass} px-4 py-8 md:px-8`}>
+      <section className="mx-auto grid w-full max-w-3xl gap-6">
+        <PageHeader
+          description={
+            <>
+              Setup that only Junior admins can see. Change who is an admin with{" "}
+              <code>junior admin grant &lt;email&gt;</code> and{" "}
+              <code>junior admin revoke &lt;email&gt;</code>.
+            </>
+          }
+          title="Admin"
+        />
+        {adminPages.length === 0 ? (
+          <Card padding="md">
+            <div className="flex items-center gap-4">
+              <div className="grid size-10 shrink-0 place-items-center rounded border border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted">
+                <Boxes aria-hidden="true" size={17} />
+              </div>
+              <p className="m-0 text-sm text-dashboard-text-muted">
+                No plugin has admin setup.
+              </p>
+            </div>
+          </Card>
+        ) : (
+          <div className="grid gap-3">
+            {adminPages.map((page) => (
+              <Link
+                className="no-underline"
+                key={`${page.pluginName}:${page.id}`}
+                to={pluginUserPagePath(page.pluginName, page.id)}
+              >
+                <Card padding="md">
+                  <div className="flex items-center gap-3">
+                    <div className="min-w-0 flex-1">
+                      <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+                        {page.pluginDisplayName}
+                      </div>
+                      <h2 className="mt-1 mb-0 font-display text-base font-medium text-dashboard-text">
+                        {page.label}
+                      </h2>
+                      <p className="mt-1 mb-0 text-sm text-dashboard-text-muted">
+                        {page.description}
+                      </p>
+                    </div>
+                    <ChevronRight
+                      aria-hidden="true"
+                      className="shrink-0 text-dashboard-text-muted"
+                      size={16}
+                    />
+                  </div>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/client/pages/user/PluginUserPage.tsx

@@ -137,27 +137,39 @@ export function PluginUserPage(props: { page: PluginUserPageLink }) {
                   <h2 className="m-0 min-w-0 flex-1 font-display text-base font-medium text-dashboard-text">
                     {record.title}
                   </h2>
-                  {record.actions?.map((recordAction) => (
-                    <button
-                      aria-label={`${recordAction.label}: ${record.title}`}
-                      className={`cursor-pointer border-0 bg-transparent p-1 text-dashboard-text-muted transition-colors ${
-                        recordAction.tone === "danger"
-                          ? "hover:text-rose-300"
-                          : "hover:text-dashboard-text"
-                      }`}
-                      disabled={action.isPending}
-                      key={`${recordAction.method}:${recordAction.href}`}
-                      onClick={() => runAction(recordAction)}
-                      title={recordAction.label}
-                      type="button"
-                    >
-                      {recordAction.tone === "danger" ? (
-                        <Trash2 aria-hidden="true" size={16} />
-                      ) : (
-                        recordAction.label
-                      )}
-                    </button>
-                  ))}
+                  {record.actions?.map((recordAction) =>
+                    recordAction.method === "GET" ? (
+                      // Full browser navigation, so plugin routes can redirect
+                      // to an external sign-in page.
+                      <a
+                        className="shrink-0 rounded-md border border-dashboard-border-strong px-3 py-1.5 text-sm font-semibold text-dashboard-text no-underline transition-colors hover:bg-dashboard-fill-strong"
+                        href={recordAction.href}
+                        key={`${recordAction.method}:${recordAction.href}`}
+                      >
+                        {recordAction.label}
+                      </a>
+                    ) : (
+                      <button
+                        aria-label={`${recordAction.label}: ${record.title}`}
+                        className={`cursor-pointer border-0 bg-transparent p-1 text-dashboard-text-muted transition-colors ${
+                          recordAction.tone === "danger"
+                            ? "hover:text-rose-300"
+                            : "hover:text-dashboard-text"
+                        }`}
+                        disabled={action.isPending}
+                        key={`${recordAction.method}:${recordAction.href}`}
+                        onClick={() => runAction(recordAction)}
+                        title={recordAction.label}
+                        type="button"
+                      >
+                        {recordAction.tone === "danger" ? (
+                          <Trash2 aria-hidden="true" size={16} />
+                        ) : (
+                          recordAction.label
+                        )}
+                      </button>
+                    ),
+                  )}
                 </div>
                 {record.description ? (
                   <p className="mt-2 mb-0 text-sm text-dashboard-text-muted">

package/src/client/primaryNav.ts

@@ -4,6 +4,7 @@ import type { DashboardHeaderNavItem } from "./components/layout/DashboardHeader
 import { pluginUserPagePath } from "./pages/user/PluginUserPage";
 
 const AUTH_PRIMARY_NAV_PREFIXES = [
+  "/admin",
   "/automations",
   "/memories",
   "/settings",

package/src/shell.ts

@@ -120,6 +120,9 @@ export function dashboardPagePaths(
 ): Array<{ nested?: boolean; path: string }> {
   const paths: Array<{ nested?: boolean; path: string }> = [
     { path: basePath },
+    {
+      path: basePath === "/" ? "/admin" : `${basePath}/admin`,
+    },
     {
       nested: true,
       path: basePath === "/" ? "/code" : `${basePath}/code`,