@sentry/junior-dashboard 0.270.0 → 0.272.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.270.0",
+  "version": "0.272.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.272.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.270.0"
+    "@sentry/junior": "0.272.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.272.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/app.ts

@@ -36,6 +36,7 @@ import {
 } from "./auth";
 import { isAuthPath, type AuthenticatedRoute } from "./authenticated-routes";
 import { resetMockConversationArchiveState } from "./mock-reporting/fixtures";
+import { resetMockReadPositions } from "./mock-reporting/read-positions";
 import { createMockReportingApi } from "./mock-reporting/routes";
 import {
   DASHBOARD_AVATAR_HEADER_PATH,
@@ -71,6 +72,7 @@ const mockDisplayNamesByEmail = new Map<string, string>();
 export function resetMockDashboardState(): void {
   mockDisplayNamesByEmail.clear();
   resetMockConversationArchiveState();
+  resetMockReadPositions();
 }
 
 export interface JuniorDashboardOptions {

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/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/ConversationPage.tsx

@@ -31,7 +31,9 @@ import { CopyButton } from "../components/CopyButton";
 import { ConversationBrief } from "./ConversationBrief";
 import {
   CONVERSATION_EVENT_PARAM,
+  CONVERSATION_TURN_PARAM,
   parseConversationEventSeq,
+  turnStartedEventSeq,
 } from "./conversationRoutes";
 import {
   ConversationComposer,
@@ -96,6 +98,11 @@ import {
 } from "../review-desk/reviewItemFormat";
 import { useConfirmUnsentAnswers } from "../review-desk/UnsentAnswers";
 import { Transcript } from "./TranscriptView";
+import {
+  readConversationStartPosition,
+  useMarkConversationRead,
+  useReadPositionAtOpen,
+} from "./transcriptReadPosition";
 import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import {
@@ -138,20 +145,24 @@ export function ConversationPage(props: {
   const selectedEventSeq = parseConversationEventSeq(
     searchParams.get(CONVERSATION_EVENT_PARAM),
   );
+  // A linked Turn opens the event that started it. Until that event is
+  // found, it acts like a linked event that is still loading.
+  const linkedTurnId = searchParams.get(CONVERSATION_TURN_PARAM) ?? undefined;
+  const eventOpen =
+    selectedEventSeq !== undefined || linkedTurnId !== undefined;
   // Event details and turn context show over Conversation details. Closing
   // them shows details again when details are open. A linked event starts
   // with details closed, so closing it does not open a panel nobody chose.
   const [detailsChoice, setDetailsChoice] = useState<boolean | undefined>(() =>
-    selectedEventSeq === undefined ? undefined : false,
+    eventOpen ? false : undefined,
   );
   const detailsOpen = detailsChoice ?? detailsDefaultOpen;
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
-  const eventOpen = selectedEventSeq !== undefined;
   const showDetails = detailsOpen && !eventOpen && !turnContext;
   const [viewState, setView] = useState<TranscriptViewMode>(() =>
-    selectedEventSeq === undefined ? "rich" : "raw",
+    eventOpen ? "raw" : "rich",
   );
-  const view = selectedEventSeq === undefined ? viewState : "raw";
+  const view = eventOpen ? "raw" : viewState;
   const [search, setSearch] = useState("");
   const [pinRequestVersion, setPinRequestVersion] = useState(0);
   const conversationId = props.conversationId;
@@ -160,6 +171,8 @@ export function ConversationPage(props: {
   const conversations = buildConversations(summaries);
   const detail = useConversationData(conversationId);
   const archive = useArchiveConversation(conversationId);
+  const markRead = useMarkConversationRead(conversationId);
+  const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
   const feedConversation = conversations.find(
     (item) => item.id === conversationId,
   );
@@ -213,6 +226,7 @@ export function ConversationPage(props: {
       setSearchParams(
         (current) => {
           const next = new URLSearchParams(current);
+          next.delete(CONVERSATION_TURN_PARAM);
           if (seq === undefined) next.delete(CONVERSATION_EVENT_PARAM);
           else next.set(CONVERSATION_EVENT_PARAM, String(seq));
           return next;
@@ -224,14 +238,14 @@ export function ConversationPage(props: {
   );
   const onViewChange = useCallback(
     (value: TranscriptViewMode) => {
-      if (value !== "raw" && selectedEventSeq !== undefined) {
+      if (value !== "raw" && eventOpen) {
         setSelectedEventSeq(undefined);
       }
       // Turn context belongs to a message in the Conversation view.
       setTurnContext(undefined);
       setView(value);
     },
-    [selectedEventSeq, setSelectedEventSeq],
+    [eventOpen, setSelectedEventSeq],
   );
   // A linked event can be older than the first page. Load earlier pages until
   // it is present or history ends.
@@ -250,12 +264,41 @@ export function ConversationPage(props: {
   useEffect(() => {
     if (loadLinkedEvent) loadPreviousPageRef.current();
   }, [loadLinkedEvent, oldestLoadedSeq]);
-  // Keep the panel while the transcript or a linked event loads.
+  // Load earlier pages until the linked Turn starts or history ends. Then
+  // replace the Turn link with a link to its first event, or drop it when
+  // history has no such event. A history error keeps the link, so a retry
+  // or reload can still find the Turn.
+  const linkedTurnSeq = linkedTurnId
+    ? turnStartedEventSeq(transcript?.events, linkedTurnId)
+    : undefined;
+  const linkedTurnMissing =
+    linkedTurnId !== undefined &&
+    linkedTurnSeq === undefined &&
+    transcript !== undefined;
+  const loadLinkedTurn =
+    linkedTurnMissing &&
+    detail.hasPreviousPage &&
+    !detail.isLoadingPreviousPage &&
+    !detail.historyError;
+  const linkedTurnNotFound =
+    linkedTurnMissing &&
+    !detail.hasPreviousPage &&
+    !detail.isLoadingPreviousPage;
+  useEffect(() => {
+    if (loadLinkedTurn) loadPreviousPageRef.current();
+  }, [loadLinkedTurn, oldestLoadedSeq]);
+  useEffect(() => {
+    if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
+    else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
+  }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
+  // Keep the panel while the transcript or a linked event loads, and for the
+  // render before a found Turn link becomes an event link.
   const eventLoading =
     eventOpen &&
     !selectedEvent &&
     (detail.isPending ||
-      (linkedEventMissing &&
+      linkedTurnSeq !== undefined ||
+      ((linkedEventMissing || linkedTurnMissing) &&
         (detail.hasPreviousPage || detail.isLoadingPreviousPage) &&
         !detail.historyError));
   const showEvent = Boolean(selectedEvent) || eventLoading;
@@ -448,9 +491,11 @@ export function ConversationPage(props: {
                     hasPreviousPage={detail.hasPreviousPage}
                     historyError={detail.historyError}
                     historyVersion={detail.historyVersion}
+                    lastReadSeq={readAtOpen.lastReadSeq}
                     live={live}
                     loadingPreviousPage={detail.isLoadingPreviousPage}
                     onLoadPreviousPage={detail.loadPreviousPage}
+                    onRead={markRead}
                     onSelectedEventSeqChange={setSelectedEventSeq}
                     pendingMessages={detail.inlineMessages}
                     pinRequestVersion={pinRequestVersion}
@@ -461,8 +506,10 @@ export function ConversationPage(props: {
                     search={search}
                     onSearchChange={setSearch}
                     selectedEventSeq={selectedEventSeq}
+                    startAtUnread={readConversationStartPosition() === "unread"}
                     transcript={transcript}
                     turnContextPanel={turnContextPanel}
+                    unread={readAtOpen.unread}
                     view={view}
                   />
                 </>