@sentry/junior-dashboard 0.270.0 → 0.271.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.270.0",
+  "version": "0.271.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -39,10 +39,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.270.0"
+    "@sentry/junior-plugin-api": "0.271.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.270.0"
+    "@sentry/junior": "0.271.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -63,7 +63,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.270.0"
+    "@sentry/junior": "0.271.0"
   },
   "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",

package/src/client/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { Navigate, Route, Routes, useLocation, useParams } from "react-router";
 
 import {
@@ -11,7 +11,10 @@ import {
 import { ConnectionBanner } from "./components/ConnectionBanner";
 import { LoadingView } from "./components/LoadingView";
 import { VersionDriftBanner } from "./components/VersionDriftBanner";
-import { PageRouteLoading } from "./components/PageRouteLoading";
+import {
+  PageContentSkeleton,
+  type PageContentSkeletonVariant,
+} from "./components/PageContentSkeleton";
 import { ProfileMenu } from "./components/ProfileMenu";
 import {
   DashboardChrome,
@@ -36,10 +39,12 @@ 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";
+import { ConnectionsPage } from "./pages/settings/ConnectionsPage";
+import { McpSettingsPage } from "./pages/settings/McpSettingsPage";
+import { PersonalTokensPage } from "./pages/settings/PersonalTokensPage";
+import { SettingsPage } from "./pages/settings/SettingsPage";
+import { SettingsPageLayout } from "./pages/settings/SettingsPageLayout";
 import { SystemPage } from "./pages/system/SystemPage";
 import {
   SystemPageLayout,
@@ -65,7 +70,10 @@ import {
 } from "./pages/user/PluginUserPage";
 import { AdminPage } from "./pages/admin/AdminPage";
 import { buildPrimaryNavItems } from "./primaryNav";
-import { ReviewDeskPage } from "./review-desk/ReviewDeskPage";
+import {
+  ReviewDeskLoading,
+  ReviewDeskPage,
+} from "./review-desk/ReviewDeskPage";
 import { useReviewItemCountData } from "./review-desk/queries";
 import type { DashboardCoreData } from "./types";
 
@@ -74,6 +82,56 @@ const dashboardNoise = {
     "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.7'/%3E%3C/svg%3E\")",
 };
 
+const settingsRoutes: {
+  loading: {
+    description: string;
+    label: string;
+    title: string;
+    variant?: PageContentSkeletonVariant;
+  };
+  path: string;
+  render(data: DashboardCoreData): ReactNode;
+}[] = [
+  {
+    loading: {
+      description: "Manage your profile and preferences.",
+      label: "Loading settings",
+      title: "General",
+    },
+    path: "/settings",
+    render: (data) => <SettingsPage identity={data.me} />,
+  },
+  {
+    loading: {
+      description: "Create and revoke personal API tokens.",
+      label: "Loading API tokens",
+      title: "API Tokens",
+      variant: "list",
+    },
+    path: "/settings/api-tokens",
+    render: () => <PersonalTokensPage />,
+  },
+  {
+    loading: {
+      description: "Connect and disconnect your accounts.",
+      label: "Loading identities",
+      title: "Identities",
+      variant: "list",
+    },
+    path: "/settings/connections",
+    render: () => <ConnectionsPage />,
+  },
+  {
+    loading: {
+      description: "Connect an MCP client to your conversations.",
+      label: "Loading MCP",
+      title: "MCP",
+    },
+    path: "/settings/mcp",
+    render: () => <McpSettingsPage />,
+  },
+];
+
 /** Render the dashboard SPA shell and route-level loading states. */
 export function DashboardShell() {
   const location = useLocation();
@@ -147,6 +205,7 @@ export function DashboardShell() {
         className="bg-dashboard-bg"
         enabled={
           workspace ||
+          location.pathname === "/review" ||
           hasAutomationDetailsFrame(location.pathname) ||
           isMemoryLibraryPath(location.pathname)
         }
@@ -375,11 +434,7 @@ export function DashboardShell() {
           <Route
             element={
               loading ? (
-                <PageRouteLoading
-                  description="Items that need a person, and who can act on them."
-                  label="Loading review desk"
-                  title="Review desk"
-                />
+                <ReviewDeskLoading />
               ) : loggedIn ? (
                 <ReviewDeskPage />
               ) : (
@@ -523,56 +578,29 @@ export function DashboardShell() {
             }
             path="/system/*"
           />
-          <Route
-            element={
-              loading ? (
-                <PageRouteLoading
-                  description="Manage your Junior profile and preferences."
-                  label="Loading settings"
-                  title="Settings"
-                />
-              ) : loggedIn ? (
-                <SettingsPage identity={data!.me} />
-              ) : (
-                <Navigate replace to="/" />
-              )
-            }
-            path="/settings"
-          />
-          <Route
-            element={
-              loading ? (
-                <PageRouteLoading
-                  description="Create and revoke personal API tokens."
-                  label="Loading API tokens"
-                  title="API tokens"
-                  variant="list"
-                />
-              ) : loggedIn ? (
-                <PersonalTokensPage />
-              ) : (
-                <Navigate replace to="/" />
-              )
-            }
-            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"
-          />
+          {settingsRoutes.map((route) => (
+            <Route
+              element={
+                loading ? (
+                  <SettingsPageLayout
+                    description={route.loading.description}
+                    title={route.loading.title}
+                  >
+                    <PageContentSkeleton
+                      label={route.loading.label}
+                      variant={route.loading.variant}
+                    />
+                  </SettingsPageLayout>
+                ) : loggedIn ? (
+                  route.render(data!)
+                ) : (
+                  <Navigate replace to="/" />
+                )
+              }
+              key={route.path}
+              path={route.path}
+            />
+          ))}
           <Route
             element={
               loading || userPagesQuery.isPending ? (

package/src/client/components/AGENTS.md

@@ -1,65 +1,36 @@
-# Dashboard UI kit
-
-Shared dashboard components live here. Feature pages compose them instead of
-copying Tailwind blocks. Follow `policies/frontend-components.md`.
-`pnpm dashboard-style:check` enforces the token rules.
-
-## shadcn/ui
-
-- Add components with
-  `pnpm --filter @sentry/junior-dashboard exec shadcn add <component>`. They go
-  to `ui/`.
-- `ui/` files are shadcn source on dashboard tokens. Remove unused exports.
-  Change a `ui/` file when every caller needs the same style.
-- Use `ui/` components directly. Add an app component only when it adds
-  structure or behavior, not to rename a `ui/` component or its props.
-- Do not apply the CLI's global border or body resets. Keep the Tailwind
-  radius scale.
-
-## Component rules
-
-- Use `ui/alert-dialog` for every confirmation. Never use `window.confirm`.
-- Use `ui/dialog` for a short task form. Never put a form in a `Drawer` or
-  `DetailsPanel`. Use `useSheet` for each dialog and mount it only while open.
-- Use `ui/trace` for transcript activity rows. Put only inline elements in
-  the row button.
-- Give an icon-only control a label with `TooltipContent size="compact"`.
-  Never use the native `title` attribute.
-- Set `focusableWhenDisabled` on a `ui/button` tooltip trigger that can be
+# Dashboard UI rules
+
+These apply to all dashboard UI. `pnpm dashboard-style:check` enforces the
+token rules.
+
+- Add shadcn components with
+  `pnpm --filter @sentry/junior-dashboard exec shadcn add <component>`.
+- Change a `ui/` file only when every caller needs the same style. Do not
+  wrap a `ui/` component just to rename it or its props.
+- Do not apply the shadcn CLI's global border or body resets. Keep the
+  Tailwind radius scale.
+- Confirmations use `ui/alert-dialog`, not `window.confirm`.
+- Short task forms use `ui/dialog`, never a `Drawer` or `DetailsPanel`. Mount
+  each dialog through `useSheet`, only while open.
+- Put only inline elements in a `ui/trace` row button.
+- Label icon-only controls with `TooltipContent size="compact"`, not the
+  native `title` attribute.
+- Set `focusableWhenDisabled` on a tooltip trigger `ui/button` that can be
   disabled.
-- Build form fields from `ui/field`. Use the ids `<control id>-error` and
-  `<control id>-help`.
+- Field ids are `<control id>-error` and `<control id>-help`.
 - Put a checkbox or radio inside its `<label>`. Give each `RadioGroup` an
   `aria-label`.
-- `ui/alert` sets `role="alert"`. Pass `role="status"` for a message that is
-  not an error.
 - A form page has one `Button variant="primary"`.
-- `ObjectIcon` owns native object icons. Do not replace it with a provider
-  logo.
-
-## Tokens
-
-- Keep every color in a token in `src/tailwind.css`, so each theme can
-  redefine it. Use `light:` only for values that no token covers.
-- Use `var(--color-*)` for chart series. Never use hex values.
-- Do not use `white/*` or `black/*` fills, borders, or rings, or hex surface
-  colors. Shadows may use black.
+- Do not replace `ObjectIcon` with a provider logo.
+- Use `light:` only for values that no token covers. Chart series use
+  `var(--color-*)`, not hex.
 - Use `outline-dashboard-focus` for keyboard focus only.
-- Use the named type scale. Keep `text-2xs` for compact badges and chart
-  annotations.
-- Labels use sentence case. Do not use uppercase or letter spacing.
-
-## Navigation
-
+- Labels use sentence case, with no uppercase or letter spacing.
 - App navigation uses pills, page links use `SegmentedNav`, and panel
-  switches use `ui/tabs`. Keep the three levels distinct.
-
-## Ownership
-
-- Conversation mobile geometry has hard owners: `layout/VisualViewportShell`,
-  `conversations/ChatLayout`, and `conversations/ComposerDock`. Pages pass
-  children only. Do not add viewport, offset, or safe-area math in pages.
-- Home and create must not use `ComposerDock`.
-- Feature surfaces stay under `conversations/` or `pages/` until two real
-  callers share them. Add a named component on the second real use.
-- Keep Tailwind classes on the owning component.
+  switches use `ui/tabs`.
+- Do not add viewport, offset, or safe-area math in pages.
+  `layout/VisualViewportShell`, `conversations/ChatLayout`, and
+  `conversations/ComposerDock` own it. Home and create do not use
+  `ComposerDock`.
+- Keep a feature component under `conversations/` or `pages/` until a second
+  real caller needs it.

package/src/client/components/ProfileMenu.tsx

@@ -1,9 +1,7 @@
 import {
   Boxes,
   ChevronDown,
-  KeyRound,
   LogOut,
-  Plug,
   Settings,
   ShieldCheck,
   UserRound,
@@ -197,22 +195,6 @@ export function ProfileMenu({
         <Settings aria-hidden="true" size={16} strokeWidth={2} />
         Settings
       </Link>
-      <Link
-        className={profileLinkClass}
-        onClick={close}
-        to="/settings/api-tokens"
-      >
-        <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} />
@@ -282,12 +264,6 @@ export function ProfileMenu({
         <Link className={sheetItemClass} to="/settings">
           Settings
         </Link>
-        <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/components/UserInputForm.tsx

@@ -35,10 +35,31 @@ const optionClass =
 const choiceButtonClass =
   "group flex w-full cursor-pointer items-center gap-3 rounded-md border border-dashboard-border bg-dashboard-surface-raised px-3 py-2.5 text-left font-sans text-sm transition-colors hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus disabled:cursor-not-allowed disabled:opacity-60 data-[picked]:border-dashboard-accent/60 data-[picked]:bg-dashboard-accent/10 data-[picked]:opacity-100";
 
-function OptionText(props: { description?: string; label: string }) {
+// Marks the choice that Junior recommends, next to its label.
+function SuggestedLabel(props: { className?: string }) {
+  return (
+    <span
+      className={cn(
+        "ml-2 text-xs font-normal text-dashboard-accent-text/80",
+        props.className,
+      )}
+    >
+      Suggested
+    </span>
+  );
+}
+
+function OptionText(props: {
+  description?: string;
+  label: string;
+  recommended?: boolean;
+}) {
   return (
     <span className="grid min-w-0 gap-0.5 break-words">
-      <span className="font-medium text-dashboard-text">{props.label}</span>
+      <span className="font-medium text-dashboard-text">
+        {props.label}
+        {props.recommended ? <SuggestedLabel /> : null}
+      </span>
       {props.description ? (
         <span className="text-xs text-dashboard-text-muted">
           {props.description}
@@ -56,13 +77,15 @@ function ChoiceField(props: {
 }) {
   const id = useId();
   const { field } = props;
-  // Say how many choices count, so a reader knows when a field is done.
+  // Radios already say that one choice counts. Say it for checkboxes only.
   const legend = (
     <legend className="mb-2 p-0 text-sm font-semibold text-dashboard-text">
       {field.label}
-      <span className="ml-2 text-xs font-normal text-dashboard-text-muted">
-        {field.kind === "choice" ? "Pick one" : "Pick any"}
-      </span>
+      {field.kind === "multi_choice" ? (
+        <span className="ml-2 text-xs font-normal text-dashboard-text-muted">
+          Pick any
+        </span>
+      ) : null}
     </legend>
   );
   const description = field.description ? (
@@ -90,6 +113,7 @@ function ChoiceField(props: {
               <OptionText
                 description={option.description}
                 label={option.label}
+                recommended={option.recommended}
               />
             </label>
           ))}
@@ -119,7 +143,11 @@ function ChoiceField(props: {
                 )
               }
             />
-            <OptionText description={option.description} label={option.label} />
+            <OptionText
+              description={option.description}
+              label={option.label}
+              recommended={option.recommended}
+            />
           </label>
         ))}
       </div>
@@ -261,6 +289,7 @@ export function UserInputForm(props: {
                     id={`${choicesId}-${index}-label`}
                   >
                     {option.label}
+                    {option.recommended ? <SuggestedLabel /> : null}
                   </span>
                   {option.description ? (
                     <span
@@ -292,6 +321,8 @@ export function UserInputForm(props: {
               onClick={() => pick(buttonField.id, option.label)}
             >
               {option.label}
+              {/* The button gap already spaces the label. */}
+              {option.recommended ? <SuggestedLabel className="ml-0" /> : null}
             </Button>
           ))}
           {secondary}

package/src/client/components/layout/PageHeader.tsx

@@ -5,17 +5,20 @@ import {
   type TimeRangeDays,
 } from "../controls/TimeRangeSelector";
 import { useDocumentTitle } from "../../documentTitle";
+import { cn } from "../../styles";
 
 /**
  * Render a spacious analytics page heading with optional controls.
  *
  * Also names the browser tab after the page. Pass `documentTitle` when the tab
- * needs more context than the visible heading.
+ * needs more context than the visible heading. Pass `navigation` to put page
+ * links under the heading, with their underline on the header border.
  */
 export function PageHeader(props: {
   actions?: ReactNode;
-  description: ReactNode;
+  description?: ReactNode;
   documentTitle?: string;
+  navigation?: ReactNode;
   onRangeChange?(value: TimeRangeDays): void;
   range?: TimeRangeDays;
   rangeOptions?: TimeRangeDays[];
@@ -36,16 +39,28 @@ export function PageHeader(props: {
   const actions = props.actions ?? rangeActions;
 
   return (
-    <header className="flex min-w-0 items-center justify-between gap-6 border-b border-dashboard-border-subtle pb-4 sm:pb-6 max-md:flex-col max-md:items-stretch">
-      <div className="min-w-0">
-        <h2 className="m-0 font-display text-3xl font-light leading-none tracking-[-0.03em] text-dashboard-text sm:text-4xl">
-          {props.title}
-        </h2>
-        <div className="mt-2 max-w-2xl font-sans text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
-          {props.description}
+    <header
+      className={cn(
+        "min-w-0 border-b border-dashboard-border-subtle",
+        !props.navigation && "pb-4 sm:pb-6",
+      )}
+    >
+      <div className="flex min-w-0 items-center justify-between gap-6 max-md:flex-col max-md:items-stretch">
+        <div className="min-w-0">
+          <h2 className="m-0 font-display text-3xl font-light leading-none tracking-[-0.03em] text-dashboard-text sm:text-4xl">
+            {props.title}
+          </h2>
+          {props.description ? (
+            <div className="mt-2 max-w-2xl font-sans text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
+              {props.description}
+            </div>
+          ) : null}
         </div>
+        {actions ? <div className="shrink-0">{actions}</div> : null}
       </div>
-      {actions ? <div className="shrink-0">{actions}</div> : null}
+      {props.navigation ? (
+        <div className="mt-4 sm:mt-6">{props.navigation}</div>
+      ) : null}
     </header>
   );
 }

package/src/client/conversations/AGENTS.md

@@ -1,38 +1,17 @@
 # Transcript components
 
-Keep transcript layout in these feature components. Use the UI kit in
-`../components/` for shared controls and overlays.
-
-## Ownership
-
-- `TranscriptRows` and `TranscriptRow` own row gaps, padding, and indent.
-  Keep horizontal padding inside each row, so focus outlines are not clipped.
-- `TranscriptMessageShell` owns the avatar column and message gutter.
-- `TranscriptSummaryTrigger` owns disclosure padding and focus. Do not repeat
-  negative margins at call sites.
-- `ChatLayout` keeps the Conversation header outside the transcript scroll.
-- `eventLogRows` and `filterEventLogRows` own row text and search match. The
-  page step controls use them too.
-
-## Rules
-
-- The Automation trigger card shows the credentials from the dispatch record
-  of the run, not the current setting. Keep the run input collapsed, because
-  it is not from a person.
-- Each `Transcript` sets the panel for its own rows. A nested transcript never
-  uses the panel of the page behind it.
-- The page has one right panel. Conversation details, event details, and turn
-  context never show at the same time. Closing a panel returns focus to the
-  control that opened it.
+- Keep horizontal padding inside each transcript row, so focus outlines are
+  not clipped. Do not add negative margins at `TranscriptSummaryTrigger` call
+  sites.
+- The Automation trigger card shows the credentials from the run's dispatch
+  record, not the current setting. Keep the run input collapsed, because it
+  is not from a person.
+- A nested `Transcript` never uses the panel of the page behind it.
+- The page shows one right panel at a time. Closing a panel returns focus to
+  the control that opened it.
 - The URL owns the selected event in the main Conversation. Standalone
-  transcripts keep selection in `ConversationEventLog`.
-- A pending exit must not close a new panel or another Conversation.
-- A pending fork blocks dismissal of its dialog.
+  transcripts keep it in `ConversationEventLog`.
+- A pending exit must not close a new panel or another Conversation. A
+  pending fork blocks dismissal of its dialog.
 - Raw JSON keeps the original ISO values. Persist the UTC/local mode, not the
   timezone.
-
-## Checks
-
-- Review with `JUNIOR_DASHBOARD_MOCK_CONVERSATIONS=true pnpm dev`.
-- Keep visual checks out of automated assertions. Browser tests cover
-  opening, closing, and keyboard interaction.