@sentry/junior-dashboard 0.249.0 → 0.250.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.249.0",
+  "version": "0.250.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.249.0",
-    "@sentry/junior": "0.249.0"
+    "@sentry/junior": "0.250.0",
+    "@sentry/junior-plugin-api": "0.250.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",

package/src/client/App.tsx

@@ -38,6 +38,7 @@ import { CodePage } from "./pages/code/CodePage";
 import { LocationDetailPage } from "./pages/locations/LocationDetailPage";
 import { LocationsPage } from "./pages/locations/LocationsPage";
 import { PeoplePage } from "./pages/people/PeoplePage";
+import { ConnectionsPage } from "./pages/ConnectionsPage";
 import { PersonalTokensPage } from "./pages/PersonalTokensPage";
 import { PersonProfilePage } from "./pages/people/PersonProfilePage";
 import { SettingsPage } from "./pages/SettingsPage";
@@ -562,6 +563,23 @@ export function DashboardShell() {
             }
             path="/settings/api-tokens"
           />
+          <Route
+            element={
+              loading ? (
+                <PageRouteLoading
+                  description="Connect and disconnect your accounts."
+                  label="Loading connected accounts"
+                  title="Connected accounts"
+                  variant="list"
+                />
+              ) : loggedIn ? (
+                <ConnectionsPage />
+              ) : (
+                <Navigate replace to="/" />
+              )
+            }
+            path="/settings/connections"
+          />
           <Route
             element={
               loading || userPagesQuery.isPending ? (

package/src/client/components/ProfileMenu.tsx

@@ -3,6 +3,7 @@ import {
   ChevronDown,
   KeyRound,
   LogOut,
+  Plug,
   Settings,
   ShieldCheck,
   UserRound,
@@ -194,6 +195,14 @@ export function ProfileMenu({
         <KeyRound aria-hidden="true" size={16} strokeWidth={2} />
         API tokens
       </Link>
+      <Link
+        className={profileLinkClass}
+        onClick={close}
+        to="/settings/connections"
+      >
+        <Plug aria-hidden="true" size={16} strokeWidth={2} />
+        Connected accounts
+      </Link>
       {identity.user.isAdmin ? (
         <Link className={profileLinkClass} onClick={close} to="/admin">
           <ShieldCheck aria-hidden="true" size={16} strokeWidth={2} />
@@ -266,6 +275,9 @@ export function ProfileMenu({
         <Link className={sheetItemClass} to="/settings/api-tokens">
           API tokens
         </Link>
+        <Link className={sheetItemClass} to="/settings/connections">
+          Connected accounts
+        </Link>
         {identity.user.isAdmin ? (
           <Link className={sheetItemClass} to="/admin">
             Admin

package/src/client/pages/ConnectionsPage.tsx

@@ -0,0 +1,207 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plug } from "lucide-react";
+import type { z } from "zod";
+import {
+  connectionListSchema,
+  disconnectConnectionResponseSchema,
+  startConnectionResponseSchema,
+  type connectionSchema,
+} from "@sentry/junior/api/schema";
+import { del, fetchDashboardJson, post } from "../http";
+import { dashboardContainerClass } from "../styles";
+import { getDashboardAgentName } from "../agentName";
+import { useDocumentTitle } from "../documentTitle";
+import { Button } from "../components/Button";
+import { InlineError } from "../components/InlineError";
+import { Card } from "../components/layout/Card";
+
+type Connection = z.infer<typeof connectionSchema>;
+
+const connectionsQueryKey = ["dashboard", "connections"] as const;
+
+function connectionPath(provider: string): string {
+  return `/api/connections/${encodeURIComponent(provider)}`;
+}
+
+/** Connect and disconnect the viewer's plugin accounts. */
+export function ConnectionsPage() {
+  useDocumentTitle("Connected accounts");
+  const queryClient = useQueryClient();
+  const connectionsQuery = useQuery({
+    queryKey: connectionsQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(connectionListSchema, "/api/connections", signal),
+    // OAuth finishes in another tab. Refresh when the viewer returns.
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+  const connectMutation = useMutation({
+    mutationFn: (input: { provider: string; popup: Window | null }) =>
+      post(startConnectionResponseSchema, connectionPath(input.provider), {}),
+    onSuccess: ({ authorizationUrl }, { popup }) => {
+      // A blocked popup returns null, so use this tab. A tab the viewer
+      // 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: (connection: Connection) =>
+      del(
+        disconnectConnectionResponseSchema,
+        connectionPath(connection.provider),
+      ),
+    onSuccess: (_result, connection) => {
+      queryClient.setQueryData<{ connections: Connection[] }>(
+        connectionsQueryKey,
+        (current) =>
+          current && {
+            connections: current.connections.map((item) =>
+              item.provider === connection.provider
+                ? {
+                    provider: item.provider,
+                    displayName: item.displayName,
+                    description: item.description,
+                    connected: false,
+                  }
+                : item,
+            ),
+          },
+      );
+    },
+  });
+  const connections = connectionsQuery.data?.connections ?? [];
+  const busy = connectMutation.isPending || disconnectMutation.isPending;
+  const pendingProvider = connectMutation.isPending
+    ? connectMutation.variables?.provider
+    : disconnectMutation.isPending
+      ? disconnectMutation.variables?.provider
+      : undefined;
+  const listFailed = !connectionsQuery.data && connectionsQuery.isError;
+  const displayedError = connectMutation.isError
+    ? "Could not start the connection. Try again."
+    : disconnectMutation.isError
+      ? "Could not disconnect the account. Try again."
+      : listFailed
+        ? "Could not load connected accounts. Try again."
+        : undefined;
+
+  return (
+    <div className={`${dashboardContainerClass} px-4 py-8 md:px-8`}>
+      <section className="mx-auto w-full max-w-3xl">
+        <h1 className="m-0 text-2xl font-bold">Connected accounts</h1>
+        <p className="mt-2 mb-0 max-w-2xl text-sm text-dashboard-text-muted">
+          Connect an account so {getDashboardAgentName()} can act as you in
+          conversations you start here.
+        </p>
+
+        <Card className="mb-0 mt-6" padding="md" variant="raised">
+          {displayedError ? (
+            <InlineError className={listFailed ? undefined : "mb-4"}>
+              {displayedError}
+            </InlineError>
+          ) : null}
+          {listFailed ? null : (
+            <div className="space-y-2">
+              {connectionsQuery.isPending ? (
+                <p className="m-0 text-sm text-dashboard-text-muted">
+                  Loading connected accounts…
+                </p>
+              ) : connections.length === 0 ? (
+                <p className="m-0 text-sm text-dashboard-text-muted">
+                  No installed plugins support account connections.
+                </p>
+              ) : (
+                connections.map((connection) => (
+                  <div
+                    className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
+                    key={connection.provider}
+                  >
+                    <Plug
+                      className="shrink-0 text-dashboard-accent"
+                      size={16}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="m-0 truncate text-sm font-semibold">
+                        {connection.displayName}
+                      </p>
+                      <p className="mt-1 mb-0 line-clamp-2 break-words text-xs text-dashboard-text-muted">
+                        {connection.connected ? (
+                          connection.account ? (
+                            <>
+                              Connected as{" "}
+                              {connection.account.url ? (
+                                <a
+                                  className="text-dashboard-text"
+                                  href={connection.account.url}
+                                  rel="noreferrer"
+                                  target="_blank"
+                                >
+                                  {connection.account.label}
+                                </a>
+                              ) : (
+                                connection.account.label
+                              )}
+                            </>
+                          ) : (
+                            "Connected"
+                          )
+                        ) : (
+                          connection.description
+                        )}
+                      </p>
+                    </div>
+                    {connection.connected ? (
+                      <Button
+                        aria-busy={pendingProvider === connection.provider}
+                        aria-label={`Disconnect ${connection.displayName}`}
+                        disabled={busy}
+                        onClick={() => {
+                          connectMutation.reset();
+                          disconnectMutation.mutate(connection);
+                        }}
+                        tone="danger"
+                      >
+                        {pendingProvider === connection.provider
+                          ? "Disconnecting…"
+                          : "Disconnect"}
+                      </Button>
+                    ) : (
+                      <Button
+                        aria-busy={pendingProvider === connection.provider}
+                        aria-label={`Connect ${connection.displayName}`}
+                        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: connection.provider,
+                            popup,
+                          });
+                        }}
+                      >
+                        {pendingProvider === connection.provider
+                          ? "Connecting…"
+                          : "Connect"}
+                      </Button>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </Card>
+      </section>
+    </div>
+  );
+}

package/src/client/pages/dev/ChartFixtures.tsx

@@ -1,17 +1,62 @@
+import type { ReactNode } from "react";
 import type {
+  AutomationExecutionDay,
+  AutomationExecutionStatusDay,
+  CodeActivityDay,
   ConversationMetricDay,
+  DailyConversationActivity,
+  GuardianMetricDay,
   LocationActivityDayReport,
   PeopleActivityDayReport,
+  PluginOperationalReport,
 } from "@sentry/junior/api/schema";
 import { InputCacheChart } from "../../components/charts/InputCacheChart";
 import { SystemMetricCharts } from "../../components/charts/SystemMetricCharts";
+import { WorkspaceUsageChart } from "../../components/charts/WorkspaceUsageChart";
+import { AutomationCostChart } from "../automations/AutomationCostChart";
+import { AutomationExecutionChart } from "../automations/AutomationExecutionChart";
+import { AutomationExecutionStatusChart } from "../automations/AutomationExecutionStatusChart";
+import { CodeActivityChart } from "../code/CodeActivityChart";
+import { LocationActivityChart } from "../locations/LocationActivityChart";
 import { LocationDirectoryActivityChart } from "../locations/LocationDirectoryActivityChart";
+import { MemoryCostChart } from "../memory/MemoryCostChart";
+import { MemoryTimeline } from "../memory/MemoryTimeline";
+import type { MemoryCostDay, MemoryDay } from "../memory/memoryDashboard";
 import { ContributionGrid } from "../people/ContributionGrid";
 import { PeopleActivityChart } from "../people/PeopleActivityChart";
 import { ConversationActivityChart } from "../system/ConversationActivityChart";
+import { GuardianActivity } from "../system/GuardianActivity";
+import { PluginBarChart } from "../system/PluginBarChart";
 import { Card } from "../../components/layout/Card";
 import { CardHeader } from "../../components/layout/CardHeader";
 
+type PluginWidget = NonNullable<PluginOperationalReport["widgets"]>[number];
+
+// The gallery browser scenario saves one image for each id.
+const CHART_FIXTURE_IDS = [
+  "conversation-activity",
+  "conversation-activity-hourly",
+  "input-cache",
+  "system-metrics",
+  "people-activity",
+  "location-directory-activity",
+  "location-activity",
+  "code-activity",
+  "code-activity-dense",
+  "code-activity-empty",
+  "workspace-usage",
+  "automation-executions",
+  "automation-execution-status",
+  "automation-cost",
+  "memory-timeline",
+  "memory-cost",
+  "guardian-activity",
+  "plugin-bar-chart",
+  "contribution-grid",
+] as const;
+
+type ChartFixtureId = (typeof CHART_FIXTURE_IDS)[number];
+
 const METRIC_DAYS: ConversationMetricDay[] = fixtureDates(14).map(
   (date, index) => ({
     conversations: 4 + ((index * 5) % 17),
@@ -22,6 +67,16 @@ const METRIC_DAYS: ConversationMetricDay[] = fixtureDates(14).map(
   }),
 );
 
+const HOURLY_METRIC_DAYS: ConversationMetricDay[] = fixtureHours(24).map(
+  (date, index) => ({
+    conversations: index % 5 === 0 ? 0 : 1 + ((index * 7) % 9),
+    costUsd: 0.05 + ((index * 3) % 7) * 0.04,
+    date,
+    durationMs: 30_000 + ((index * 11) % 7) * 9_000,
+    tokens: 2_000 + ((index * 13) % 11) * 400,
+  }),
+);
+
 const PEOPLE_DAYS: PeopleActivityDayReport[] = fixtureDates(30).map(
   (date, index) => ({
     activePeople: 4 + ((index * 7) % 13),
@@ -38,44 +93,233 @@ const LOCATION_DAYS: LocationActivityDayReport[] = fixtureDates(30).map(
   }),
 );
 
+const LOCATION_DETAIL_DAYS: DailyConversationActivity[] = fixtureDates(90).map(
+  (date, index) => {
+    const conversations = index % 11 === 0 ? 0 : 2 + ((index * 7) % 15);
+    return {
+      active: Math.min(conversations, index % 4),
+      conversations,
+      date,
+      durationMs: conversations * 60_000,
+      failed: index % 13 === 0 ? 1 : 0,
+    };
+  },
+);
+
+const CODE_DAYS: CodeActivityDay[] = codeDays(30);
+
+const DENSE_CODE_DAYS: CodeActivityDay[] = codeDays(90);
+
+const EMPTY_CODE_DAYS: CodeActivityDay[] = fixtureDates(30).map((date) => ({
+  closed: 0,
+  created: 0,
+  date,
+  merged: 0,
+}));
+
+const WORKSPACE_USAGE_DAYS = fixtureDates(30).map((date, index) => ({
+  count: index % 6 === 0 ? 0 : 1 + ((index * 5) % 9),
+  date,
+}));
+
+const AUTOMATION_DAYS: AutomationExecutionDay[] = fixtureDates(30).map(
+  (date, index) => ({
+    costUsd: index % 7 === 0 ? 0 : 0.04 + ((index * 5) % 9) * 0.11,
+    date,
+    event: (index * 3) % 5,
+    scheduled: index % 7 === 0 ? 0 : 1 + ((index * 7) % 6),
+  }),
+);
+
+const AUTOMATION_STATUS_DAYS: AutomationExecutionStatusDay[] = fixtureDates(
+  30,
+).map((date, index) => ({
+  blocked: index % 9 === 0 ? 1 : 0,
+  completed: index % 7 === 0 ? 0 : 1 + ((index * 5) % 4),
+  date,
+  failed: index % 5 === 0 ? 1 : 0,
+}));
+
+const MEMORY_DAYS: MemoryDay[] = fixtureDates(30).map((date, index) => ({
+  date,
+  personal: index % 8 === 0 ? 0 : (index * 3) % 7,
+  public: (index * 5) % 4,
+}));
+
+const MEMORY_EXTRACTION_DAYS: MemoryCostDay[] = fixtureDates(30).map(
+  (date, index) => ({
+    costUsd: index % 8 === 0 ? 0 : 0.02 + ((index * 7) % 9) * 0.015,
+    date,
+    events: index % 8 === 0 ? 0 : 1 + ((index * 3) % 6),
+  }),
+);
+
+const MEMORY_RECALL_DAYS: MemoryCostDay[] = fixtureDates(30).map(
+  (date, index) => ({
+    costUsd: 0.01 + ((index * 5) % 7) * 0.008,
+    date,
+    events: 2 + ((index * 5) % 9),
+  }),
+);
+
+const GUARDIAN_DAYS: GuardianMetricDay[] = fixtureDates(30).map(
+  (date, index) => {
+    const allow = 6 + ((index * 7) % 19);
+    const ask = (index * 3) % 5;
+    const deny = index % 6 === 0 ? 2 : 0;
+    return {
+      allow,
+      ask,
+      costUsd: (allow + ask + deny) * 0.0021,
+      date,
+      deny,
+      requests: allow + ask + deny,
+    };
+  },
+);
+
+const PLUGIN_WIDGET: PluginWidget = {
+  categories: fixtureDates(14).map((date, index) => ({
+    id: date,
+    label: date,
+    values: {
+      failed: index % 4 === 0 ? 2 : 0,
+      succeeded: 3 + ((index * 5) % 11),
+    },
+  })),
+  description: "Deliveries reported by the plugin.",
+  id: "deliveries",
+  series: [
+    { key: "succeeded", label: "Succeeded", tone: "good" },
+    { key: "failed", label: "Failed", tone: "danger" },
+  ],
+  title: "Deliveries",
+  type: "bar_chart",
+};
+
 const CONTRIBUTION_DAYS = fixtureDates(70).map((date, index) => ({
   conversations: index % 9 === 0 ? 0 : 1 + ((index * 7) % 18),
   date,
   durationMs: index % 9 === 0 ? 0 : 45_000 + ((index * 13) % 20) * 18_000,
 }));
 
-/** Render chart examples with cache drops and missing counters for visual review. */
+/** Render every dashboard chart with fixed data for visual review. */
 export function ChartFixtures() {
   return (
     <>
-      <ConversationActivityChart days={METRIC_DAYS} />
-      <InputCacheChart
-        bucketUnit="day"
-        days={METRIC_DAYS.map((day, index) => ({
-          ...day,
-          inputTokens: 2_000,
-          cachedInputTokens: index === 9 ? 8_000 : 180_000,
-          cacheCreationTokens:
-            index === 5 ? undefined : index === 9 ? 190_000 : 10_000,
-        }))}
-      />
-      <SystemMetricCharts days={METRIC_DAYS} />
-      <PeopleActivityChart days={PEOPLE_DAYS} />
-      <LocationDirectoryActivityChart days={LOCATION_DAYS} />
-      <Card>
-        <CardHeader
-          description="Daily conversation intensity over ten weeks."
-          title="Contribution activity"
+      <ChartFixture id="conversation-activity">
+        <ConversationActivityChart days={METRIC_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="conversation-activity-hourly">
+        <ConversationActivityChart
+          bucketUnit="hour"
+          days={HOURLY_METRIC_DAYS}
         />
-        <ContributionGrid days={CONTRIBUTION_DAYS} />
-      </Card>
+      </ChartFixture>
+      <ChartFixture id="input-cache">
+        <InputCacheChart
+          bucketUnit="day"
+          days={METRIC_DAYS.map((day, index) => ({
+            ...day,
+            inputTokens: 2_000,
+            cachedInputTokens: index === 9 ? 8_000 : 180_000,
+            cacheCreationTokens:
+              index === 5 ? undefined : index === 9 ? 190_000 : 10_000,
+          }))}
+        />
+      </ChartFixture>
+      <ChartFixture id="system-metrics">
+        <SystemMetricCharts days={METRIC_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="people-activity">
+        <PeopleActivityChart days={PEOPLE_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="location-directory-activity">
+        <LocationDirectoryActivityChart days={LOCATION_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="location-activity">
+        <LocationActivityChart days={LOCATION_DETAIL_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="code-activity">
+        <CodeActivityChart days={CODE_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="code-activity-dense">
+        <CodeActivityChart days={DENSE_CODE_DAYS} range={90} />
+      </ChartFixture>
+      <ChartFixture id="code-activity-empty">
+        <CodeActivityChart days={EMPTY_CODE_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="workspace-usage">
+        <WorkspaceUsageChart
+          days={WORKSPACE_USAGE_DAYS}
+          range={30}
+          workspaceName="junior"
+        />
+      </ChartFixture>
+      <ChartFixture id="automation-executions">
+        <AutomationExecutionChart days={AUTOMATION_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="automation-execution-status">
+        <AutomationExecutionStatusChart
+          days={AUTOMATION_STATUS_DAYS}
+          range={30}
+        />
+      </ChartFixture>
+      <ChartFixture id="automation-cost">
+        <AutomationCostChart days={AUTOMATION_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="memory-timeline">
+        <MemoryTimeline days={MEMORY_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="memory-cost">
+        <MemoryCostChart
+          extractionDays={MEMORY_EXTRACTION_DAYS}
+          range={30}
+          recallDays={MEMORY_RECALL_DAYS}
+        />
+      </ChartFixture>
+      <ChartFixture id="guardian-activity">
+        <GuardianActivity days={GUARDIAN_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="plugin-bar-chart">
+        <PluginBarChart widget={PLUGIN_WIDGET} />
+      </ChartFixture>
+      <ChartFixture id="contribution-grid">
+        <Card>
+          <CardHeader
+            description="Daily conversation intensity over ten weeks."
+            title="Contribution activity"
+          />
+          <ContributionGrid days={CONTRIBUTION_DAYS} />
+        </Card>
+      </ChartFixture>
     </>
   );
 }
 
+function ChartFixture(props: { children: ReactNode; id: ChartFixtureId }) {
+  return <div data-gallery-chart={props.id}>{props.children}</div>;
+}
+
+function codeDays(count: number): CodeActivityDay[] {
+  return fixtureDates(count).map((date, index) => ({
+    closed: index % 9 === 0 ? 1 : 0,
+    created: index % 4 === 0 ? 0 : 1 + ((index * 5) % 3),
+    date,
+    merged: index % 3 === 0 ? 1 + (index % 2) : 0,
+  }));
+}
+
 function fixtureDates(count: number): string[] {
   const start = Date.UTC(2026, 4, 1);
   return Array.from({ length: count }, (_, index) =>
     new Date(start + index * 86_400_000).toISOString().slice(0, 10),
   );
 }
+
+function fixtureHours(count: number): string[] {
+  const start = Date.UTC(2026, 4, 1);
+  return Array.from({ length: count }, (_, index) =>
+    new Date(start + index * 3_600_000).toISOString().slice(0, 13),
+  );
+}