@sentry/junior-dashboard 0.269.0 → 0.271.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.269.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.269.0"
+    "@sentry/junior-plugin-api": "0.271.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.269.0"
+    "@sentry/junior": "0.271.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -52,6 +52,7 @@
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "4.1.12",
+    "emojibase-data": "^18.0.0",
     "eslint": "^10.8.0",
     "nitro": "3.0.260522-beta",
     "oxlint": "^1.79.0",
@@ -62,7 +63,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.269.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();
@@ -124,10 +182,20 @@ export function DashboardShell() {
   }, [location.pathname]);
 
   async function signOut() {
-    await fetch(`${data?.config.authPath ?? "/api/auth"}/sign-out`, {
-      credentials: "same-origin",
-      method: "POST",
-    });
+    // Better Auth rejects a request body without a JSON content type. On
+    // Vercel, a bodiless POST still arrives with an empty body.
+    const response = await fetch(
+      `${data?.config.authPath ?? "/api/auth"}/sign-out`,
+      {
+        body: "{}",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      },
+    );
+    if (!response.ok) {
+      throw new Error(`Sign-out returned ${response.status}`);
+    }
     window.location.assign(data?.config.basePath ?? "/");
   }
 
@@ -137,6 +205,7 @@ export function DashboardShell() {
         className="bg-dashboard-bg"
         enabled={
           workspace ||
+          location.pathname === "/review" ||
           hasAutomationDetailsFrame(location.pathname) ||
           isMemoryLibraryPath(location.pathname)
         }
@@ -365,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 />
               ) : (
@@ -513,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/AutomationCard.tsx

@@ -4,6 +4,7 @@ import { StatusChip } from "./StatusChip";
 import { ArrowUpRight, CircleAlert, Clock3 } from "lucide-react";
 import { Link } from "react-router";
 import type { AutomationCard as AutomationCardValue } from "@sentry/junior/api/schema";
+import { DisplayText } from "../display-text/DisplayText";
 import { automationPath } from "../format";
 
 /** Show a saved automation inside a reply, with a preview and a detail link. */
@@ -43,7 +44,7 @@ export function AutomationCard({
           </StatusChip>
         )}
         <p className="m-0 line-clamp-3 break-words text-sm leading-relaxed text-dashboard-text-muted">
-          {card.instruction}
+          <DisplayText inline text={card.instruction} />
         </p>
         <div className="flex items-start gap-2 text-xs leading-relaxed text-dashboard-text">
           <Clock3

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