@sentry/junior-dashboard 0.257.0 → 0.259.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.257.0",
+  "version": "0.259.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -33,8 +33,8 @@
     "react-router": "^7.18.2",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior": "0.257.0",
-    "@sentry/junior-plugin-api": "0.257.0"
+    "@sentry/junior": "0.259.0",
+    "@sentry/junior-plugin-api": "0.259.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -47,15 +47,16 @@
     "eslint": "^10.8.0",
     "oxlint": "^1.79.0",
     "tailwindcss": "^4.3.0",
+    "tsdown": "0.23.1",
     "tsup": "^8.5.1",
-    "typescript": "^6.0.3",
+    "typescript": "^7.0.2",
     "vitest": "^4.1.7"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",
     "build:client": "tsup --config tsup.client.config.ts",
     "build:css": "tailwindcss -i src/tailwind.css -o dist/tailwind.css --minify",
-    "build:server": "tsup --config tsup.config.ts",
+    "build:server": "tsup --config tsup.config.ts && tsdown --config tsdown.dts.config.ts",
     "lint": "oxlint --config .oxlintrc.json --deny-warnings src",
     "test": "vitest run -c vitest.config.ts",
     "typecheck": "tsc --noEmit",

package/src/api/schema.ts

@@ -33,8 +33,7 @@ export const dashboardProfileUpdateSchema = z
 
 export const dashboardConfigSchema = z
   .object({
-    allowedEmailCount: z.number(),
-    allowedGoogleDomainCount: z.number(),
+    allowedDomainCount: z.number(),
     authRequired: z.boolean(),
     authPath: z.string(),
     basePath: z.string(),

package/src/app.ts

@@ -78,14 +78,14 @@ export interface JuniorDashboardOptions {
   baseURL?: string;
   authPath?: string;
   authRequired?: boolean;
-  allowedGoogleDomains?: string[];
-  allowedEmails?: string[];
   auth?: DashboardAuth;
   componentGallery?: boolean;
   mockConversations?: boolean;
 }
 
 interface DashboardRuntimeOptions extends JuniorDashboardOptions {
+  /** The app's `allowedDomains`, from core. Auth requires at least one. */
+  allowedDomains?: string[];
   authenticatedRoutes?: readonly AuthenticatedRoute[];
   /** The queue `createApp()` uses, so web input reaches the same worker. */
   conversationWorkQueue?: ConversationWorkQueue;
@@ -113,37 +113,6 @@ function normalizeValues(values: string[] | undefined): string[] {
   ];
 }
 
-/** Read dashboard list env vars as comma-separated strings or JSON arrays. */
-function readEnvList(name: string): string[] | undefined {
-  const value = process.env[name];
-  if (!value?.trim()) {
-    return undefined;
-  }
-
-  if (value.trim().startsWith("[")) {
-    let parsed: unknown;
-    try {
-      parsed = JSON.parse(value);
-    } catch (error) {
-      throw new Error(`${name} must be a JSON string array`, {
-        cause: error,
-      });
-    }
-    if (
-      !Array.isArray(parsed) ||
-      parsed.some((item) => typeof item !== "string")
-    ) {
-      throw new Error(`${name} must be a JSON string array`);
-    }
-    return parsed;
-  }
-
-  return value
-    .split(",")
-    .map((item) => item.trim())
-    .filter(Boolean);
-}
-
 /** Read dashboard boolean env vars; only explicit true/false values apply. */
 function readEnvFlag(name: string): boolean | undefined {
   const value = process.env[name]?.trim();
@@ -160,11 +129,6 @@ function resolveDashboardOptions(
     ...options,
     authRequired:
       options.authRequired ?? readEnvFlag("JUNIOR_DASHBOARD_AUTH_REQUIRED"),
-    allowedGoogleDomains:
-      options.allowedGoogleDomains ??
-      readEnvList("JUNIOR_DASHBOARD_GOOGLE_DOMAINS"),
-    allowedEmails:
-      options.allowedEmails ?? readEnvList("JUNIOR_DASHBOARD_ALLOWED_EMAILS"),
     componentGallery:
       options.componentGallery ??
       readEnvFlag("JUNIOR_DASHBOARD_COMPONENT_GALLERY"),
@@ -404,8 +368,7 @@ export function createDashboardApp(
     options.authPath ?? DEFAULT_AUTH_PATH,
     DEFAULT_AUTH_PATH,
   );
-  const allowedDomains = normalizeValues(options.allowedGoogleDomains);
-  const allowedEmails = normalizeValues(options.allowedEmails);
+  const allowedDomains = normalizeValues(options.allowedDomains);
   const agentName = options.agentName?.trim() || "Junior";
 
   const authRequired = options.authRequired !== false;
@@ -415,17 +378,11 @@ export function createDashboardApp(
     canonicalBaseURL = resolveDashboardBaseURL({ baseURL: configuredBaseURL });
   }
 
-  if (
-    authRequired &&
-    allowedDomains.length === 0 &&
-    allowedEmails.length === 0
-  ) {
-    throw new Error(
-      "Junior dashboard auth requires allowedGoogleDomains or allowedEmails",
-    );
+  if (authRequired && allowedDomains.length === 0) {
+    throw new Error("Junior dashboard auth requires allowedDomains");
   }
 
-  // Core owns the Google sign-in session and shares it with Slack.
+  // Core owns the Google sign-in session.
   const auth = options.auth;
   if (authRequired && !auth) {
     throw new Error("Junior dashboard auth requires the core sign-in session");
@@ -448,10 +405,7 @@ export function createDashboardApp(
       return Response.redirect(returnUrl, 302);
     }
     const session = await auth.getSession(c.req.raw);
-    if (
-      session &&
-      dashboardSessionIsAuthorized(session, allowedDomains, allowedEmails)
-    ) {
+    if (session && dashboardSessionIsAuthorized(session, allowedDomains)) {
       return Response.redirect(returnUrl, 302);
     }
     return auth.signInWithGoogle(c.req.raw, returnUrl);
@@ -540,7 +494,7 @@ export function createDashboardApp(
         componentGallery: options.componentGallery,
       });
     }
-    if (!dashboardSessionIsAuthorized(session, allowedDomains, allowedEmails)) {
+    if (!dashboardSessionIsAuthorized(session, allowedDomains)) {
       return forbidden(c.req.raw, agentName);
     }
     const sanitizedSession = sanitizeDashboardSession(session);
@@ -563,6 +517,7 @@ export function createDashboardApp(
       c.set("viewer", viewer);
     }
     await next();
+    return undefined;
   };
 
   app.use("*", requireAuth);
@@ -621,8 +576,7 @@ export function createDashboardApp(
   );
   app.get("/api/config", () => {
     return jsonResponse(dashboardConfigSchema, {
-      allowedEmailCount: allowedEmails.length,
-      allowedGoogleDomainCount: allowedDomains.length,
+      allowedDomainCount: allowedDomains.length,
       authRequired,
       authPath,
       basePath,

package/src/auth.ts

@@ -4,7 +4,7 @@ import type { DashboardSession } from "./api/schema";
 export type DashboardUser = DashboardSession["user"];
 export type { DashboardSession };
 
-/** Google sign-in session that core shares with Slack. */
+/** Google sign-in session that core owns. */
 export interface DashboardAuth {
   handler(request: Request): Promise<Response>;
   getSession(request: Request): Promise<DashboardSession | null>;
@@ -25,19 +25,22 @@ export function dashboardBearerSession(email: string): DashboardSession {
   return { user: { email, emailVerified: true } };
 }
 
-/** Check the dashboard allowlist against one verified session. */
+/**
+ * Check the allowed domains against one verified session. Core accepts a
+ * Google sign-in only for a Workspace account on an allowed domain. This
+ * check also applies a changed list to existing sessions and personal tokens.
+ */
 export function dashboardSessionIsAuthorized(
   session: DashboardSession,
   allowedDomains: string[],
-  allowedEmails: string[],
 ): boolean {
   const email = session.user.email.toLowerCase();
   const separator = email.lastIndexOf("@");
   const domain = separator > 0 ? email.slice(separator + 1) : undefined;
   return Boolean(
     session.user.emailVerified &&
-    (allowedEmails.includes(email) ||
-      (domain !== undefined && allowedDomains.includes(domain))),
+    domain !== undefined &&
+    allowedDomains.includes(domain),
   );
 }
 

package/src/authenticated-routes.ts

@@ -19,8 +19,7 @@ export function isAuthPath(
   const requestSegments = segments(pathname);
   return routes.some((route) => {
     const routeSegments = segments(route.path);
-    for (let index = 0; index < routeSegments.length; index += 1) {
-      const pattern = routeSegments[index];
+    for (const [index, pattern] of routeSegments.entries()) {
       if (pattern === "*") return true;
       const value = requestSegments[index];
       if (!value || (pattern !== value && !pattern.startsWith(":"))) {

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -101,9 +101,10 @@ export function activityGroupSummary(
     (entry) => entry.kind === "attachments_delivered",
   ).length;
   const eventCount = entries.filter((entry) => entry.kind === "message").length;
+  const [onlyHandoff] = handoffs;
   const handoffSummary =
-    handoffs.length === 1
-      ? `model handoff to ${handoffs[0].modelId} (${handoffs[0].modelProfile})`
+    handoffs.length === 1 && onlyHandoff
+      ? `model handoff to ${onlyHandoff.modelId} (${onlyHandoff.modelProfile})`
       : handoffs.length > 1
         ? countLabel(handoffs.length, "model handoff", "model handoffs")
         : undefined;

package/src/client/conversations/transcriptFailure.ts

@@ -55,8 +55,6 @@ export function transcriptFailureTitle(
     case "agent_run_failed":
       return "Internal error";
   }
-
-  return "Internal error";
 }
 
 /** Short description for one failed turn in the transcript. */
@@ -111,8 +109,6 @@ export function transcriptFailureDescription(
     case "agent_run_failed":
       return `${agentName} hit an internal error during this turn.`;
   }
-
-  return `${agentName} hit an internal error during this turn.`;
 }
 
 /** Search text for one failed turn in the transcript. */

package/src/client/conversations/transcriptMarkdownLinks.ts

@@ -88,6 +88,7 @@ function findNextMarkdownLink(
       start: linkStart,
     };
   }
+  return undefined;
 }
 
 function findMarkdownLinkSyntaxRanges(
@@ -148,6 +149,7 @@ function readMarkdownDestination(
     const href = text.slice(start, index);
     return href ? { end: index + 1, href } : undefined;
   }
+  return undefined;
 }
 
 function findCommonMarkAutolinks(
@@ -199,6 +201,7 @@ function findNextBareLink(
       start: match.index,
     };
   }
+  return undefined;
 }
 
 function findBareLinks(

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

@@ -6,15 +6,23 @@ import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { dashboardContainerClass } from "../../styles";
 import { pluginUserPagePath } from "../user/PluginUserPage";
+import {
+  ServiceAccountsSection,
+  useServiceAccounts,
+} from "./ServiceAccountsSection";
 
 /**
- * List admin-only plugin pages for a Junior admin.
+ * Show service accounts and admin-only plugin pages to a Junior admin.
  *
- * The server hides admin pages from other viewers and refuses to serve them,
- * so this page only arranges links.
+ * The server hides admin pages and service accounts from other viewers and
+ * refuses their requests, so this page only arranges them.
  */
 export function AdminPage(props: { pages: PluginUserPageLink[] }) {
   const adminPages = props.pages.filter((page) => page.navigation === "admin");
+  const serviceAccounts = useServiceAccounts();
+  const nothingToSet =
+    adminPages.length === 0 &&
+    serviceAccounts.data?.serviceAccounts.length === 0;
   return (
     <div className={`${dashboardContainerClass} px-4 py-8 md:px-8`}>
       <section className="mx-auto grid w-full max-w-3xl gap-6">
@@ -28,7 +36,8 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
           }
           title="Admin"
         />
-        {adminPages.length === 0 ? (
+        <ServiceAccountsSection accountsQuery={serviceAccounts} />
+        {nothingToSet ? (
           <Card padding="md">
             <div className="flex items-center gap-4">
               <div className="grid size-10 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
@@ -39,7 +48,7 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
               </p>
             </div>
           </Card>
-        ) : (
+        ) : adminPages.length === 0 ? null : (
           <div className="grid gap-3">
             {adminPages.map((page) => (
               <Link

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

@@ -0,0 +1,231 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { KeyRound } from "lucide-react";
+import type { z } from "zod";
+import {
+  disconnectServiceAccountResponseSchema,
+  serviceAccountListSchema,
+  startServiceAccountSignInResponseSchema,
+  type serviceAccountSchema,
+} from "@sentry/junior/api/schema";
+import { getDashboardAgentName } from "../../agentName";
+import { Button } from "../../components/Button";
+import { InlineError } from "../../components/InlineError";
+import { StatusChip } from "../../components/StatusChip";
+import { Card } from "../../components/layout/Card";
+import { formatRelativeTime } from "../../format";
+import { del, fetchDashboardJson, post } from "../../http";
+
+type ServiceAccount = z.infer<typeof serviceAccountSchema>;
+
+const serviceAccountsQueryKey = ["dashboard", "service-accounts"] as const;
+
+function serviceAccountPath(provider: string): string {
+  return `/api/service-accounts/${encodeURIComponent(provider)}`;
+}
+
+/** Load the plugins that support a service account, with their status. */
+export function useServiceAccounts() {
+  return useQuery({
+    queryKey: serviceAccountsQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        serviceAccountListSchema,
+        "/api/service-accounts",
+        signal,
+      ),
+    // OAuth finishes in another tab. Refresh when the admin returns.
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+}
+
+function statusText(account: ServiceAccount): string {
+  const usage = !account.userOAuth
+    ? `Everyone uses this account. People cannot connect their own ${account.displayName} account.`
+    : `People who have not connected their own ${account.displayName} account use this account.`;
+  if (!account.connected) {
+    const blocked = !account.userOAuth
+      ? ` ${account.displayName} is not available until you connect it.`
+      : "";
+    return `Not connected.${blocked} ${usage} Sign in as the shared account, not as yourself.`;
+  }
+  const by = account.connectedBy ?? "the CLI";
+  return `Connected by ${by} ${formatRelativeTime(account.connectedAt)}. ${usage}`;
+}
+
+/**
+ * Connect and disconnect the shared provider accounts that Junior uses for
+ * people who have not connected their own account.
+ */
+export function ServiceAccountsSection(props: {
+  accountsQuery: UseQueryResult<z.infer<typeof serviceAccountListSchema>>;
+}) {
+  const { accountsQuery } = props;
+  const queryClient = useQueryClient();
+  const connectMutation = useMutation({
+    mutationFn: (input: { provider: string; popup: Window | null }) =>
+      post(
+        startServiceAccountSignInResponseSchema,
+        serviceAccountPath(input.provider),
+        {},
+      ),
+    onSuccess: ({ authorizationUrl }, { popup }) => {
+      // A blocked popup returns null, so use this tab. A tab the admin
+      // closed means they cancelled; keep them on the dashboard.
+      if (!popup) {
+        window.location.assign(authorizationUrl);
+        return;
+      }
+      if (popup.closed) return;
+      popup.opener = null;
+      popup.location.href = authorizationUrl;
+    },
+    onError: (_error, { popup }) => {
+      popup?.close();
+    },
+  });
+  const disconnectMutation = useMutation({
+    mutationFn: (account: ServiceAccount) =>
+      del(
+        disconnectServiceAccountResponseSchema,
+        serviceAccountPath(account.provider),
+      ),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: serviceAccountsQueryKey }),
+  });
+
+  const accounts = accountsQuery.data?.serviceAccounts ?? [];
+  if (accountsQuery.isSuccess && accounts.length === 0) {
+    return null;
+  }
+  const busy = connectMutation.isPending || disconnectMutation.isPending;
+  const pendingProvider = connectMutation.isPending
+    ? connectMutation.variables?.provider
+    : disconnectMutation.isPending
+      ? disconnectMutation.variables?.provider
+      : undefined;
+  const listFailed = !accountsQuery.data && accountsQuery.isError;
+  const displayedError = connectMutation.isError
+    ? "Could not start the sign-in. Try again."
+    : disconnectMutation.isError
+      ? "Could not disconnect the account. Try again."
+      : listFailed
+        ? "Could not load service accounts. Try again."
+        : undefined;
+
+  return (
+    <Card as="section" padding="md">
+      <h2 className="m-0 font-display text-base font-medium text-dashboard-text">
+        Service accounts
+      </h2>
+      <p className="mt-1 mb-4 text-sm text-dashboard-text-muted">
+        A shared account that Junior uses for a plugin. It can do only what its
+        plugin allows, usually read. Everyone who can talk to{" "}
+        {getDashboardAgentName()} can use it, so give it only access that all of
+        them may have.
+      </p>
+      {displayedError ? (
+        <InlineError className={listFailed ? undefined : "mb-4"}>
+          {displayedError}
+        </InlineError>
+      ) : null}
+      {listFailed ? null : accountsQuery.isPending ? (
+        <p className="m-0 text-sm text-dashboard-text-muted">
+          Loading service accounts…
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {accounts.map((account) => (
+            <div
+              className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
+              key={account.provider}
+            >
+              <KeyRound
+                aria-hidden="true"
+                className="shrink-0 text-dashboard-accent"
+                size={16}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <p className="m-0 truncate text-sm font-semibold">
+                    {account.displayName}
+                  </p>
+                  <StatusChip
+                    size="compact"
+                    tone={
+                      account.connected
+                        ? "success"
+                        : !account.userOAuth
+                          ? "warning"
+                          : "neutral"
+                    }
+                  >
+                    {account.connected ? "connected" : "not connected"}
+                  </StatusChip>
+                  {!account.userOAuth ? (
+                    <StatusChip size="compact" tone="neutral">
+                      shared only
+                    </StatusChip>
+                  ) : null}
+                </div>
+                <p className="mt-1 mb-0 break-words text-xs text-dashboard-text-muted">
+                  {statusText(account)}
+                </p>
+                <p className="mt-1 mb-0 break-words font-mono text-xs text-dashboard-text-faint">
+                  {account.tools.join(", ")}
+                </p>
+              </div>
+              {account.connected ? (
+                <Button
+                  aria-busy={
+                    disconnectMutation.isPending &&
+                    pendingProvider === account.provider
+                  }
+                  aria-label={`Disconnect the ${account.displayName} service account`}
+                  disabled={busy}
+                  onClick={() => {
+                    connectMutation.reset();
+                    disconnectMutation.mutate(account);
+                  }}
+                  tone="danger"
+                >
+                  Disconnect
+                </Button>
+              ) : null}
+              <Button
+                aria-busy={
+                  connectMutation.isPending &&
+                  pendingProvider === account.provider
+                }
+                aria-label={`${account.connected ? "Reconnect" : "Connect"} the ${account.displayName} service account`}
+                disabled={busy}
+                onClick={() => {
+                  disconnectMutation.reset();
+                  // Open the tab during the click so popup blockers allow
+                  // it, then point it at the provider.
+                  const popup = window.open("about:blank", "_blank");
+                  connectMutation.mutate({
+                    provider: account.provider,
+                    popup,
+                  });
+                }}
+              >
+                {connectMutation.isPending &&
+                pendingProvider === account.provider
+                  ? "Connecting…"
+                  : account.connected
+                    ? "Reconnect"
+                    : "Connect"}
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/client/pages/automations/AutomationOutcomeFields.tsx

@@ -141,10 +141,10 @@ export function AutomationOutcomeFields(props: {
                       disabled={index === 0}
                       onClick={() => {
                         const next = [...props.value];
-                        [next[index - 1], next[index]] = [
-                          next[index],
-                          next[index - 1],
-                        ];
+                        const previous = next[index - 1];
+                        if (!previous) return;
+                        next[index - 1] = outcome;
+                        next[index] = previous;
                         props.onChange(next);
                       }}
                     >

package/src/client/pages/automations/automationDraft.ts

@@ -53,7 +53,7 @@ export function scheduleDraft(
       ...fields,
       timezone: value.schedule.timezone,
       time: `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`,
-      weekdays: days?.map((day) => weekdays[day]),
+      weekdays: days?.flatMap((day) => weekdays[day] ?? []),
     };
   }
   if (value.nextRunAtMs) {

package/src/client/pages/system/PluginBarChart.tsx

@@ -23,6 +23,12 @@ const toneColors = {
   warning: "#fbbf24",
 } as const;
 
+function seriesColor(series: Widget["series"][number], index: number): string {
+  return series.tone
+    ? toneColors[series.tone]
+    : (colors[index % colors.length] ?? colors[0]);
+}
+
 /** Render a validated plugin-owned categorical bar chart. */
 export function PluginBarChart(props: {
   range?: TimeRangeDays;
@@ -69,9 +75,7 @@ export function PluginBarChart(props: {
           <ChartLegend
             ariaLabel="Chart legend"
             items={widget.series.map((series, index) => ({
-              color: series.tone
-                ? toneColors[series.tone]
-                : colors[index % colors.length],
+              color: seriesColor(series, index),
               key: series.key,
               label: series.label,
             }))}
@@ -122,11 +126,7 @@ export function PluginBarChart(props: {
                 >
                   <rect
                     aria-label={`${formatActivityCategoryTooltipLabel(category.label)}, ${series.label}: ${formatted}`}
-                    fill={
-                      series.tone
-                        ? toneColors[series.tone]
-                        : colors[seriesIndex % colors.length]
-                    }
+                    fill={seriesColor(series, seriesIndex)}
                     height={renderedHeight}
                     opacity={value ? 0.82 : 0.1}
                     rx="1.5"

package/src/client.tsx

@@ -22,18 +22,18 @@ class DashboardErrorBoundary extends Component<
   { children: ReactNode },
   ErrorBoundaryState
 > {
-  state: ErrorBoundaryState = { error: null };
+  override state: ErrorBoundaryState = { error: null };
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     return { error };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     const stack = error.stack ?? errorInfo.componentStack;
     window.__JUNIOR_DASHBOARD_SHOW_ERROR__?.(stack ? new Error(stack) : error);
   }
 
-  render() {
+  override render() {
     if (this.state.error) {
       return <DashboardErrorPanel error={this.state.error} />;
     }