@sentry/junior-dashboard 0.279.0 → 0.281.0

package/src/client/conversations/virtualRows.ts

@@ -0,0 +1,168 @@
+import {
+  defaultRangeExtractor,
+  measureElement,
+  useVirtualizer,
+  type Range,
+  type Virtualizer,
+} from "@tanstack/react-virtual";
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type Key,
+  type RefObject,
+} from "react";
+
+import { scrollRootFor } from "./transcriptBottomPinning";
+
+/** Rows mounted beyond the viewport on each side. */
+const OVERSCAN_ROWS = 10;
+
+/**
+ * Pick and measure the rows of a list near the viewport of its scroll root.
+ * The transcript scroll owner holds the reader's place, so this never moves
+ * the scroll position. Rows at `keptIndexes` stay mounted outside the
+ * viewport, so code that finds them in the DOM keeps working.
+ *
+ * A row that mounts above the reader with a size other than its estimate
+ * moves what they read, and the scroll owner corrects that with a scroll.
+ * Phones show such corrections as jumps, so a row's estimate is the mean
+ * size of the measured rows of its `sizeClass`, which is close for rows of
+ * one kind. `defaultSize` covers a class before any of its rows measure.
+ *
+ * Callers place each row at `start - options.scrollMargin` with
+ * `measureElement` as its ref, inside a list that is `getTotalSize()` tall.
+ */
+export function useVirtualRows(input: {
+  count: number;
+  defaultSize: (sizeClass: string) => number;
+  gap?: number;
+  getItemKey: (index: number) => Key;
+  keptIndexes: readonly (number | undefined)[];
+  listRef: RefObject<HTMLElement | null>;
+  sizeClass: (index: number) => string;
+}) {
+  const { listRef } = input;
+  // The virtualizer reads estimates only for rows without a measured size.
+  const sizes = useRef(new Map<string, { count: number; total: number }>());
+  const rowSizes = useRef(new Map<Key, { size: number; sizeClass: string }>());
+  // The estimate that each unmeasured row has now, by row key.
+  const estimates = useRef(new Map<Key, number>());
+  const rowInput = useRef(input);
+  rowInput.current = input;
+  const estimateSize = useCallback((index: number) => {
+    const key = rowInput.current.getItemKey(index);
+    const current = estimates.current.get(key);
+    if (current !== undefined) return current;
+    const sizeClass = rowInput.current.sizeClass(index);
+    const measured = sizes.current.get(sizeClass);
+    const estimate = measured?.count
+      ? measured.total / measured.count
+      : rowInput.current.defaultSize(sizeClass);
+    estimates.current.set(key, estimate);
+    return estimate;
+  }, []);
+  // Each row counts once, with its latest size, so rows that grow while
+  // they stream do not outweigh the others.
+  const recordSize = (key: Key, sizeClass: string, size: number) => {
+    const previous = rowSizes.current.get(key);
+    if (previous) {
+      const total = sizes.current.get(previous.sizeClass)!;
+      total.count -= 1;
+      total.total -= previous.size;
+    }
+    rowSizes.current.set(key, { size, sizeClass });
+    const total = sizes.current.get(sizeClass) ?? { count: 0, total: 0 };
+    total.count += 1;
+    total.total += size;
+    sizes.current.set(sizeClass, total);
+  };
+  // A new estimate for a row moves the rows after it. The scroll owner
+  // corrects that from the row that it recorded at the last scroll. So rows
+  // take the latest estimates only on the render after a scroll, when that
+  // row is current. A scroll by other code, such as a reveal, is then
+  // recorded before rows move. Other renders keep each row's estimate.
+  const instance = useRef<Virtualizer<Element, HTMLElement>>(null);
+  const placement = useRef<{
+    getItemKey: (index: number) => Key;
+    scrollOffset?: number | null;
+  }>(null);
+  const scrollOffset = instance.current?.scrollOffset;
+  if (!placement.current || placement.current.scrollOffset !== scrollOffset) {
+    estimates.current.clear();
+    placement.current = {
+      getItemKey: (index) => rowInput.current.getItemKey(index),
+      scrollOffset,
+    };
+  }
+  const [scrollMargin, setScrollMargin] = useState(0);
+  const keptKey = input.keptIndexes
+    .filter((index) => index !== undefined && index >= 0 && index < input.count)
+    .join(",");
+  const rangeExtractor = useCallback(
+    (range: Range) => {
+      const indexes = new Set(defaultRangeExtractor(range));
+      if (keptKey) {
+        for (const index of keptKey.split(",")) indexes.add(Number(index));
+      }
+      // Rows stay in document order, so the scroll owner can search them.
+      return [...indexes].sort((left, right) => left - right);
+    },
+    [keptKey],
+  );
+  // Controls above the list, such as the earlier-page control, move it
+  // down from the top of the scroll content. The margin only picks which
+  // rows mount, so a reading from the last scroll or resize is close
+  // enough: the overscan rows cover a small error.
+  const measureScrollMargin = useCallback(() => {
+    const list = listRef.current;
+    const root = scrollRootFor(list);
+    if (!list || !(root instanceof Element)) return;
+    const margin =
+      list.getBoundingClientRect().top -
+      root.getBoundingClientRect().top +
+      root.scrollTop;
+    setScrollMargin((current) =>
+      Math.abs(margin - current) >= 1 ? margin : current,
+    );
+  }, [listRef]);
+  useLayoutEffect(measureScrollMargin, [measureScrollMargin]);
+  // The dashboard build does not use React Compiler, so nothing memoizes
+  // the values that this hook returns.
+  // oxlint-disable-next-line react/incompatible-library
+  const virtualizer = useVirtualizer<Element, HTMLElement>({
+    count: input.count,
+    estimateSize,
+    gap: input.gap,
+    // A new function makes the virtualizer place every row again.
+    getItemKey: placement.current.getItemKey,
+    measureElement: (element, entry, instance) => {
+      const size = measureElement(element, entry, instance);
+      const index = instance.indexFromElement(element);
+      recordSize(
+        rowInput.current.getItemKey(index),
+        rowInput.current.sizeClass(index),
+        size,
+      );
+      return size;
+    },
+    // A server render has no scroll root, so mount the first rows that
+    // fill about one screen.
+    initialRect:
+      typeof window === "undefined" ? { height: 1_000, width: 0 } : undefined,
+    getScrollElement: () => {
+      const root = scrollRootFor(listRef.current);
+      return root instanceof Element ? root : null;
+    },
+    onChange: measureScrollMargin,
+    overscan: OVERSCAN_ROWS,
+    rangeExtractor,
+    scrollMargin,
+    // The scroll owner moves the scroll position. This only reads it.
+    scrollToFn: () => {},
+  });
+  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => false;
+  instance.current = virtualizer;
+  return virtualizer;
+}

package/src/client/http.ts

@@ -1,5 +1,6 @@
 import type { ZodType } from "zod";
 import { recordDashboardServerVersion } from "./dashboard-version";
+import { readResponseJson } from "./sentry";
 
 /** An authenticated dashboard request rejected by the product API. */
 export class DashboardApiError extends Error {
@@ -91,7 +92,7 @@ export async function patch<T>(
   });
   if (response.status === 401) restartDashboardSignIn();
   if (!response.ok) await throwDashboardApiError(path, response);
-  return schema.parse(await response.json());
+  return readResponseJson(response, schema);
 }
 
 /** Send one authenticated POST request and validate its response. */
@@ -108,7 +109,7 @@ export async function post<T>(
   });
   if (response.status === 401) restartDashboardSignIn();
   if (!response.ok) await throwDashboardApiError(path, response);
-  return schema.parse(await response.json());
+  return readResponseJson(response, schema);
 }
 
 /** Send one authenticated PUT request and validate its response. */
@@ -125,7 +126,7 @@ export async function put<T>(
   });
   if (response.status === 401) restartDashboardSignIn();
   if (!response.ok) await throwDashboardApiError(path, response);
-  return schema.parse(await response.json());
+  return readResponseJson(response, schema);
 }
 
 /** Delete one authenticated dashboard resource. */
@@ -152,7 +153,7 @@ export async function del<T>(
   });
   if (response.status === 401) restartDashboardSignIn();
   if (!response.ok) await throwDashboardApiError(path, response);
-  return schema.parse(await response.json());
+  return readResponseJson(response, schema);
 }
 
 async function fetchDashboard(
@@ -171,7 +172,7 @@ export async function fetchDashboardJson<T>(
   signal?: AbortSignal,
 ): Promise<T> {
   const response = await readDashboardResponse(path, signal);
-  return schema.parse(await response.json());
+  return readResponseJson(response, schema);
 }
 
 /** Read an authenticated response, allowing 304 only for explicit validator headers. */

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

@@ -5,7 +5,7 @@ import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { dashboardContainerClass } from "../../styles";
-import { pluginUserPagePath } from "../user/PluginUserPage";
+import { pluginUserPagePath } from "../user/pluginUserPageRoutes";
 import {
   ServiceAccountsSection,
   useServiceAccounts,

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

@@ -5,7 +5,7 @@ import {
   type UseQueryResult,
 } from "@tanstack/react-query";
 import { KeyRound } from "lucide-react";
-import type { z } from "zod";
+import type * as z from "zod";
 import {
   disconnectServiceAccountResponseSchema,
   serviceAccountListSchema,

package/src/client/pages/memory/memoryDashboard.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
+import * as z from "zod";
 
 import { fetchDashboardJson } from "../../http";
 

package/src/client/pages/memory/memoryRecord.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
+import * as z from "zod";
 
 import { fetchDashboardJson } from "../../http";
 import type { PluginUserPageRecord } from "../user/pluginUserPageData";

package/src/client/pages/settings/ConnectionsPage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plug } from "lucide-react";
-import type { z } from "zod";
+import type * as z from "zod";
 import {
   connectionListSchema,
   disconnectConnectionResponseSchema,

package/src/client/pages/user/PluginUserPage.tsx

@@ -27,12 +27,6 @@ import {
   type PluginUserPageRecordAction,
 } from "./pluginUserPageData";
 
-/** Build the canonical dashboard path for a plugin-owned page. */
-export function pluginUserPagePath(pluginName: string, pageId: string): string {
-  if (pluginName === "memory" && pageId === "memories") return "/memories";
-  return `/plugins/${encodeURIComponent(pluginName)}/${encodeURIComponent(pageId)}`;
-}
-
 /** Render the memory library for its first-class permalink route. */
 export function MemoryPermalinkRoute(props: { pages: PluginUserPageLink[] }) {
   const page = props.pages.find(

package/src/client/pages/user/pluginUserPageRoutes.ts

@@ -0,0 +1,5 @@
+/** Build the canonical dashboard path for a plugin-owned page. */
+export function pluginUserPagePath(pluginName: string, pageId: string): string {
+  if (pluginName === "memory" && pageId === "memories") return "/memories";
+  return `/plugins/${encodeURIComponent(pluginName)}/${encodeURIComponent(pageId)}`;
+}

package/src/client/primaryNav.ts

@@ -1,7 +1,7 @@
 import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
 
 import type { DashboardHeaderNavItem } from "./components/layout/DashboardHeader";
-import { pluginUserPagePath } from "./pages/user/PluginUserPage";
+import { pluginUserPagePath } from "./pages/user/pluginUserPageRoutes";
 
 const AUTH_PRIMARY_NAV_PREFIXES = [
   "/admin",

package/src/client/review-desk/reviewItemFormat.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import * as z from "zod";
 import type {
   ConversationReportEvent,
   ReviewItemPayload,

package/src/client/sentry.ts

@@ -1,8 +1,11 @@
 import {
+  BrowserClient,
   browserTracingIntegration,
+  defaultStackParser,
   getActiveSpan,
   getRootSpan,
-  init,
+  makeFetchTransport,
+  setCurrentClient,
   spanToJSON,
   startInactiveSpan,
   updateSpanName,
@@ -118,6 +121,47 @@ export function recordTranscriptShown(): void {
   }).end();
 }
 
+/**
+ * Read, parse, and validate a dashboard API response body. While a pageload
+ * or navigation is open, a span times it from the response headers to the
+ * validated value. The `http.client` span ends at the headers, so it holds
+ * none of this work.
+ */
+export async function readResponseJson<T>(
+  response: Response,
+  schema: { parse: (value: unknown) => T },
+): Promise<T> {
+  const routeSpan = activeRouteSpan();
+  if (!routeSpan) return schema.parse(await response.json());
+  const span = startInactiveSpan({
+    attributes: {
+      "url.path": response.url ? new URL(response.url).pathname : undefined,
+    },
+    name: "Read API response",
+    op: "deserialize",
+    parentSpan: routeSpan,
+  });
+  try {
+    const text = await response.text();
+    const downloadedAt = performance.now();
+    const json: unknown = JSON.parse(text);
+    const parsedAt = performance.now();
+    const value = schema.parse(json);
+    span.setAttributes({
+      "app.dashboard.response.chars": text.length,
+      "app.dashboard.response.json_parse_ms": Math.round(
+        parsedAt - downloadedAt,
+      ),
+      "app.dashboard.response.schema_parse_ms": Math.round(
+        performance.now() - parsedAt,
+      ),
+    });
+    return value;
+  } finally {
+    span.end();
+  }
+}
+
 /**
  * Send dashboard performance spans to the server's Sentry project when the
  * server provides a DSN. Only tracing is enabled: error events and
@@ -126,10 +170,14 @@ export function recordTranscriptShown(): void {
 export function initDashboardSentry(): void {
   const config = window.__JUNIOR_DASHBOARD_SENTRY__;
   if (!config) return;
-  init({
+  // `init()` bundles every default integration (about 24 KB of error,
+  // breadcrumb, and session code), even with `defaultIntegrations: false`.
+  // A client built directly bundles only browser tracing.
+  const client = new BrowserClient({
     ...config,
     beforeSendSpan: scrubSpan,
-    defaultIntegrations: false,
+    stackParser: defaultStackParser,
+    transport: makeFetchTransport,
     integrations: [
       browserTracingIntegration({
         beforeStartSpan: (options) =>
@@ -145,4 +193,6 @@ export function initDashboardSentry(): void {
       }),
     ],
   });
+  setCurrentClient(client);
+  client.init();
 }

package/src/conversation-cache.ts

@@ -14,20 +14,18 @@ export const revalidateConversation: MiddlewareHandler = async (
   // The same route pattern also matches /conversations/stats.
   if (typeof report.conversationId !== "string") return;
   // generatedAt is the read time, not a change to the Conversation. The mailbox
-  // has its own live watermark, and a read that asks for it never gets a 304.
+  // has its own live watermark, so a poll that asks for it gets it alone.
   const { generatedAt: _generatedAt, mailbox, ...content } = report;
   const version = createHash("sha256")
     .update(JSON.stringify(content))
     .digest("hex");
   context.header("cache-control", "private, no-store");
   context.header(CONVERSATION_DETAIL_VERSION_HEADER, version);
-  if (
-    !mailbox &&
-    context.req.header(CONVERSATION_DETAIL_VERSION_HEADER) === version
-  ) {
-    context.res = new Response(null, {
-      status: 304,
-      headers: context.res.headers,
-    });
-  }
+  if (context.req.header(CONVERSATION_DETAIL_VERSION_HEADER) !== version)
+    return;
+  context.res = mailbox
+    ? new Response(JSON.stringify({ mailbox, unchanged: true }), {
+        headers: context.res.headers,
+      })
+    : new Response(null, { status: 304, headers: context.res.headers });
 };

package/src/mock-reporting/fixtures.ts

@@ -316,14 +316,6 @@ function mockBrief(
               kind: "confirmed",
             },
           ],
-      openDecisions: live
-        ? [
-            {
-              text: "Roll back payments-v42 or patch the serializer path.",
-              owner: "Morgan Lee",
-            },
-          ]
-        : [],
       facts: live
         ? [
             "Checkout p95 increased from 210ms to 890ms.",
@@ -393,6 +385,7 @@ function activeConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/payments#42",
         label: "getsentry/payments#42",
+        objectType: "code_change",
         plugin: "github",
         status: "open",
         url: "https://github.com/getsentry/payments/pull/42",
@@ -685,6 +678,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/getsentry#21571",
         label: "getsentry/getsentry#21571",
+        objectType: "code_change",
         plugin: "github",
         status: "merged",
         url: "https://github.com/getsentry/getsentry/pull/21571",
@@ -695,6 +689,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/getsentry#21572",
         label: "getsentry/getsentry#21572",
+        objectType: "code_change",
         plugin: "github",
         status: "open",
         url: "https://github.com/getsentry/getsentry/pull/21572",
@@ -705,6 +700,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/getsentry#21569",
         label: "getsentry/getsentry#21569",
+        objectType: "code_change",
         plugin: "github",
         status: "draft",
         url: "https://github.com/getsentry/getsentry/pull/21569",
@@ -715,6 +711,7 @@ function dashboardQaConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/sentry#121727",
         label: "getsentry/sentry#121727",
+        objectType: "code_change",
         plugin: "github",
         status: "merged",
         url: "https://github.com/getsentry/sentry/pull/121727",
@@ -1180,6 +1177,7 @@ function longConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/junior#2201",
         label: "getsentry/junior#2201",
+        objectType: "code_change",
         plugin: "github",
         status: "draft",
         url: "https://github.com/getsentry/junior/pull/2201",
@@ -1190,6 +1188,7 @@ function longConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/payments#91",
         label: "getsentry/payments#91",
+        objectType: "code_change",
         plugin: "github",
         status: "open",
         url: "https://github.com/getsentry/payments/pull/91",
@@ -1200,6 +1199,7 @@ function longConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/relay#44",
         label: "getsentry/relay#44",
+        objectType: "code_change",
         plugin: "github",
         status: "merged",
         url: "https://github.com/getsentry/relay/pull/44",
@@ -1268,6 +1268,7 @@ function incidentConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/payments#77",
         label: "getsentry/payments#77",
+        objectType: "code_change",
         plugin: "github",
         status: "merged",
         url: "https://github.com/getsentry/payments/pull/77",
@@ -1278,6 +1279,7 @@ function incidentConversation(nowMs: number): ConversationDetailReport {
         kind: "resource_link",
         key: "getsentry/payments#61",
         label: "getsentry/payments#61",
+        objectType: "task",
         plugin: "github",
         status: "closed",
         url: "https://github.com/getsentry/payments/issues/61",
@@ -2281,6 +2283,39 @@ export function readMockConversationEvents(
   };
 }
 
+/**
+ * Return the page around a linked event or Turn. Mock transcripts fit one
+ * page, so it holds every event of the Conversation.
+ */
+export function readMockConversationEventsAround(
+  conversationId: string,
+  link: { event: number } | { turn: string },
+): ConversationEventPage | "turn-not-found" | undefined {
+  const conversation = mockConversations(NOW_MS).find(
+    (candidate) => candidate.conversationId === conversationId,
+  );
+  if (!conversation) return undefined;
+  if (
+    "turn" in link &&
+    !conversation.events.some(
+      ({ data }) =>
+        data.type === "turn_lifecycle" &&
+        data.state === "started" &&
+        data.turnId === link.turn,
+    )
+  ) {
+    return "turn-not-found";
+  }
+  return {
+    events: conversation.events,
+    eventHistory: conversation.eventHistory,
+    generatedAt: NOW,
+    ...(conversation.previousCursor
+      ? { previousCursor: conversation.previousCursor }
+      : undefined),
+  };
+}
+
 function mockBeforeCursor(conversationId: string, seq: number): string {
   return `mock:before:${encodeURIComponent(conversationId)}:${seq}`;
 }

package/src/mock-reporting/routes.ts

@@ -42,6 +42,8 @@ import {
   automationParamsSchema,
   automationSummarySchema,
   automationRunListSchema,
+  conversationCatchUpBodySchema,
+  conversationCatchUpSchema,
 } from "@sentry/junior/api/schema";
 import { mockChartPng } from "./chart-png";
 import {
@@ -56,6 +58,7 @@ import {
   readMockConversationChildAgents,
   readMockConversationDetail,
   readMockConversationEvents,
+  readMockConversationEventsAround,
   readMockConversationFeed,
   readMockConversationPendingMessages,
   readMockConversationStats,
@@ -198,14 +201,30 @@ export function createMockReportingApi(): Hono<{
     if (!params.success) {
       return errorResponse("Invalid route parameters.", 400);
     }
-    // Mock details fit one page and have no unread cursor, so mock history
-    // only pages backward.
-    if (!query.success || !("before" in query.data)) {
+    if (!query.success) {
       return errorResponse("Invalid query parameters.", 400);
     }
     if (!readMockConversationDetail(params.data.conversationId)) {
       return errorResponse("Conversation not found.", 404);
     }
+    if ("event" in query.data || "turn" in query.data) {
+      const around = readMockConversationEventsAround(
+        params.data.conversationId,
+        "event" in query.data
+          ? { event: query.data.event }
+          : { turn: query.data.turn },
+      );
+      return around === "turn-not-found"
+        ? errorResponse("Turn not found.", 404)
+        : around
+          ? jsonResponse(conversationEventPageSchema, around)
+          : errorResponse("Conversation not found.", 404);
+    }
+    // Mock details fit one page and have no unread cursor, so mock history
+    // pages only backward from cursors.
+    if (!("before" in query.data)) {
+      return errorResponse("Invalid query parameters.", 400);
+    }
     const report = readMockConversationEvents(
       params.data.conversationId,
       query.data.before,
@@ -287,6 +306,24 @@ export function createMockReportingApi(): Hono<{
       ? jsonResponse(conversationReadPositionSchema, result)
       : errorResponse("Conversation not found.", 404);
   });
+  app.post("/conversations/:conversationId/catch-up", async (c) => {
+    const params = conversationParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const body = conversationCatchUpBodySchema.safeParse(await c.req.json());
+    if (!body.success) {
+      return errorResponse("Invalid request body.", 400);
+    }
+    if (!readMockConversationDetail(params.data.conversationId)) {
+      return errorResponse("Conversation not found.", 404);
+    }
+    return jsonResponse(conversationCatchUpSchema, {
+      needsYou: "Review the Safari fix on PR #12.",
+      summary:
+        "CI failed on Safari after you left. Junior pushed a fix to PR #12, and the checks pass now.",
+    });
+  });
   app.patch("/conversations/:conversationId/archive", async (c) => {
     const params = conversationParamsSchema.safeParse(c.req.param());
     if (!params.success) {