@sentry/junior-dashboard 0.275.0 → 0.276.0

package/src/client/review-desk/ReviewItemContext.tsx

@@ -9,28 +9,39 @@ import { ConversationTranscriptView } from "../conversations/ConversationTranscr
 import { TranscriptLoading } from "../conversations/TranscriptLoading";
 import { useConversationData } from "../conversations/queries";
 import type { ConversationTranscript } from "../types";
+import { excerptMessage } from "./reviewItemFormat";
 
 /** Messages before the item that the excerpt shows. */
 const BEFORE_COUNT = 3;
-/** Messages after the item that the excerpt shows, newest last. */
-const AFTER_COUNT = 8;
+/** Messages after the item that the excerpt shows. */
+const AFTER_COUNT = 3;
 
 /**
- * Split the messages of a Conversation at the time an item was added. Only
- * messages show: the tool call that added the item would repeat its card.
+ * Pick the messages nearest the time an item was added. Only messages show:
+ * the tool call that added the item would repeat its card. For a closed item,
+ * messages from its close on do not show: the card already has the answer.
  */
 function conversationExcerpt(
   events: readonly ConversationReportEvent[],
-  itemCreatedAt: string,
+  item: Pick<ReviewItemPayload, "closedAt" | "createdAt">,
 ): { after: ConversationReportEvent[]; before: ConversationReportEvent[] } {
-  const askedAt = Date.parse(itemCreatedAt);
-  const messages = events.filter(
-    (event) => event.data.type === "message" && event.data.role !== "system",
-  );
+  const askedAt = Date.parse(item.createdAt);
+  const closedAt = item.closedAt ? Date.parse(item.closedAt) : Infinity;
+  // Changes to items show on their cards, not as context for this one.
+  const messages = events.flatMap((event) => {
+    if (event.data.type !== "message" || event.data.role === "system") {
+      return [];
+    }
+    const message = excerptMessage(event);
+    return message ? [message] : [];
+  });
   return {
     after: messages
-      .filter((event) => Date.parse(event.createdAt) > askedAt)
-      .slice(-AFTER_COUNT),
+      .filter((event) => {
+        const at = Date.parse(event.createdAt);
+        return at > askedAt && at < closedAt;
+      })
+      .slice(0, AFTER_COUNT),
     before: messages
       .filter((event) => Date.parse(event.createdAt) <= askedAt)
       .slice(-BEFORE_COUNT),
@@ -49,8 +60,8 @@ function Excerpt(props: {
 }
 
 /**
- * Show the end of the Conversation that added an item, split where the agent
- * asked. Returns `fallback` when the viewer cannot read its messages.
+ * Show the messages around the point where the agent added an item, split
+ * where it asked. Returns `fallback` when the viewer cannot read its messages.
  */
 export function ReviewItemContext(props: {
   fallback: ReactNode;
@@ -60,30 +71,37 @@ export function ReviewItemContext(props: {
   const data = detail.data;
   const events = data?.events;
   const excerpt = useMemo(
-    () =>
-      events ? conversationExcerpt(events, props.item.createdAt) : undefined,
-    [events, props.item.createdAt],
+    () => (events ? conversationExcerpt(events, props.item) : undefined),
+    [events, props.item],
   );
   // The first page holds the newest events. Load earlier pages until the
-  // page reaches the time the item was added, or history ends.
+  // page reaches the time the item was added, or history ends. Until then
+  // the loaded messages after the ask are not the first ones, so the
+  // excerpt waits.
   const loadPreviousPageRef = useRef(detail.loadPreviousPage);
   loadPreviousPageRef.current = detail.loadPreviousPage;
   const oldest = events?.[0]?.createdAt;
-  const loadEarlier =
+  // Redacted or expired history has no messages to wait for.
+  const available = data?.eventHistory.status === "available";
+  const missingEarlier =
+    available &&
     oldest !== undefined &&
     Date.parse(oldest) > Date.parse(props.item.createdAt) &&
-    detail.hasPreviousPage &&
-    !detail.isLoadingPreviousPage &&
-    !detail.historyError;
+    detail.hasPreviousPage;
+  const loadEarlier =
+    missingEarlier && !detail.isLoadingPreviousPage && !detail.historyError;
   useEffect(() => {
     if (loadEarlier) loadPreviousPageRef.current();
   }, [loadEarlier, oldest]);
 
-  if (detail.isPending) return <TranscriptLoading />;
+  if (detail.isPending || (missingEarlier && !detail.historyError)) {
+    return <TranscriptLoading />;
+  }
   if (
     !data ||
     !excerpt ||
-    data.eventHistory.status !== "available" ||
+    !available ||
+    missingEarlier ||
     excerpt.before.length + excerpt.after.length === 0
   ) {
     return props.fallback;

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

@@ -91,6 +91,22 @@ export function latestReviewItemId(
   return undefined;
 }
 
+/**
+ * Return a message for another item's excerpt, without the Review item
+ * changes that it records: those show on their own items. Returns undefined
+ * when nothing else remains.
+ */
+export function excerptMessage(
+  event: ConversationReportEvent,
+): ConversationReportEvent | undefined {
+  const { data } = event;
+  if (data.type !== "message" || !data.reviewItemChanges) return event;
+  // A message with changes lists its own Events. With none, it only
+  // records changes.
+  if (!data.events) return undefined;
+  return { ...event, data: { ...data, reviewItemChanges: undefined } };
+}
+
 /** True when an open item asks a question that the viewer can answer. */
 export function reviewItemWaitsForAnswer(item: ReviewItemPayload): boolean {
   return (

package/src/client/sentry.ts

@@ -0,0 +1,77 @@
+import {
+  browserTracingIntegration,
+  init,
+  type BrowserOptions,
+} from "@sentry/browser";
+import type { BrowserSentryConfig } from "@sentry/junior/instrumentation";
+
+declare global {
+  interface Window {
+    __JUNIOR_DASHBOARD_SENTRY__?: Omit<
+      BrowserSentryConfig,
+      "baggage" | "sentryTrace"
+    >;
+  }
+}
+
+type StreamedSpanJSON = Parameters<
+  NonNullable<BrowserOptions["beforeSendSpan"]>
+>[0];
+
+const QUERY_ATTRIBUTE_KEYS = [
+  "http.fragment",
+  "http.query",
+  "url.fragment",
+  "url.query",
+];
+// Element selectors in interaction and web vital attributes include these
+// attribute values, such as a conversation title in an `aria-label`. The SDK
+// does not escape quotes in values, so a value can contain `"]` and fake
+// selector parts. Cutting from the first marker to the last `"]` removes every
+// value, at the cost of the selector parts between them.
+const ELEMENT_ATTRIBUTE_START = /\[(?:aria-label|type|name|title|alt)="/;
+
+function scrubSelector(value: string): string {
+  const start = value.search(ELEMENT_ATTRIBUTE_START);
+  if (start === -1) return value;
+  const end = value.lastIndexOf('"]');
+  return end < start
+    ? value.slice(0, start)
+    : value.slice(0, start) + value.slice(end + 2);
+}
+
+function scrubAttribute(value: string): string {
+  // Page and API URLs carry search text in the query string.
+  if (/^https?:\/\//.test(value)) return value.split(/[?#]/, 1)[0] ?? value;
+  return scrubSelector(value);
+}
+
+// Browser span names are fixed labels such as "Click" or "GET localhost". The
+// page content they describe is in their attributes.
+function scrubSpan(span: StreamedSpanJSON): StreamedSpanJSON {
+  for (const key of QUERY_ATTRIBUTE_KEYS) {
+    delete span.attributes[key];
+  }
+  for (const [key, value] of Object.entries(span.attributes)) {
+    if (typeof value === "string") {
+      span.attributes[key] = scrubAttribute(value);
+    }
+  }
+  return span;
+}
+
+/**
+ * Send dashboard performance spans to the server's Sentry project when the
+ * server provides a DSN. Only tracing is enabled: error events and
+ * breadcrumbs could carry conversation content shown on the page.
+ */
+export function initDashboardSentry(): void {
+  const config = window.__JUNIOR_DASHBOARD_SENTRY__;
+  if (!config) return;
+  init({
+    ...config,
+    beforeSendSpan: scrubSpan,
+    defaultIntegrations: false,
+    integrations: [browserTracingIntegration()],
+  });
+}

package/src/client/types.ts

@@ -15,6 +15,7 @@ import type {
   ConversationSummaryReport,
   ConversationTurnFailureCode,
   ConversationTurnFailureReason,
+  ReviewItemChangeRecord,
 } from "@sentry/junior/api/schema";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 import type { ConversationEventPresentation } from "@sentry/junior-plugin-api";
@@ -90,6 +91,8 @@ export type TranscriptViewStructuredEventPart = {
   name: string;
   namespace: string;
   presentation: ConversationEventPresentation;
+  /** Turn that emitted the event. */
+  turnId?: string;
   type: "structured_event";
   version: number;
 };
@@ -113,6 +116,7 @@ export type TranscriptViewTurnContext = {
   kind: string;
   loadedAt: string;
   pluginName: string;
+  turnId: string;
   version: number;
 };
 
@@ -134,6 +138,8 @@ export type TranscriptViewMessage = {
   events?: ConversationReportMessageEvent[];
   /** Whether the source message addressed Junior directly. */
   explicitMention?: boolean;
+  /** Person changes to Review items that this message records. */
+  reviewItemChanges?: ReviewItemChangeRecord[];
   /** People mentioned in the event text, resolved by the API. */
   mentions?: ActorIdentity[];
   /** Whether a non-mention message was used as input to a turn. */

package/src/client.tsx

@@ -7,6 +7,7 @@ import { Toaster } from "./client/components/ui/toast";
 import { TooltipProvider } from "./client/components/ui/tooltip";
 import { DashboardShell } from "./client/App";
 import { getDashboardAgentName } from "./client/agentName";
+import { initDashboardSentry } from "./client/sentry";
 
 declare global {
   interface Window {
@@ -66,6 +67,8 @@ function DashboardErrorPanel(props: { error: Error }) {
   );
 }
 
+initDashboardSentry();
+
 const root = document.getElementById("dashboard-root");
 if (!root) {
   throw new Error("Junior dashboard root element was not found");

package/src/mock-reporting/watches.ts

@@ -43,6 +43,7 @@ export function readMockConversationWatches(
         label: "getsentry/junior#2383",
         namespace: "github",
         resourceType: "pull_request",
+        url: "https://github.com/getsentry/junior/pull/2383",
       },
       {
         createdAt: iso(-2 * HOUR_MS),
@@ -79,6 +80,7 @@ export function readMockConversationWatches(
         label: "getsentry/junior#2351",
         namespace: "github",
         resourceType: "pull_request",
+        url: "https://github.com/getsentry/junior/pull/2351",
       },
       {
         createdAt: iso(-10 * 60_000),

package/src/shell.ts

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from "node:fs";
 import path from "node:path";
+import type { BrowserSentryConfig } from "@sentry/junior/instrumentation";
 import {
   dashboardAvatarHeaderAsset,
   dashboardFaviconAsset,
@@ -210,9 +211,32 @@ export function renderInstallIcon(): Response {
   });
 }
 
+function scriptJson(value: unknown): string {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
+// The browser SDK reads these meta tags to continue the trace of the request
+// that served this page, so its pageload span joins the server spans.
+function renderSentryHead(sentry: BrowserSentryConfig | undefined): string {
+  if (!sentry) return "";
+  const { baggage, sentryTrace, ...options } = sentry;
+  return [
+    sentryTrace &&
+      `<meta name="sentry-trace" content="${escapeHtml(sentryTrace)}" />`,
+    baggage && `<meta name="baggage" content="${escapeHtml(baggage)}" />`,
+    `<script>window.__JUNIOR_DASHBOARD_SENTRY__ = ${scriptJson(options)};</script>`,
+  ]
+    .filter(Boolean)
+    .join("\n  ");
+}
+
 /** Render the authenticated dashboard HTML shell. */
-export function renderDashboard(basePath: string, agentName: string): Response {
-  const encodedAgentName = JSON.stringify(agentName).replace(/</g, "\\u003c");
+export function renderDashboard(
+  basePath: string,
+  agentName: string,
+  sentry?: BrowserSentryConfig,
+): Response {
+  const encodedAgentName = scriptJson(agentName);
   return new Response(
     `<!DOCTYPE html>
 <html lang="en">
@@ -228,6 +252,7 @@ export function renderDashboard(basePath: string, agentName: string): Response {
   <link rel="manifest" href="${DASHBOARD_MANIFEST_PATH}" />
   <link rel="apple-touch-icon" href="${DASHBOARD_INSTALL_ICON_PATH}" />
   <title>${escapeHtml(agentName)}</title>
+  ${renderSentryHead(sentry)}
   <style>
     ${readDashboardTailwind()}
   </style>

package/src/tailwind.css

@@ -342,30 +342,19 @@
   }
 }
 
-@keyframes junior-active-indicator {
-  0%,
-  100% {
-    box-shadow:
-      0 0 0 0 rgba(110, 231, 183, 0),
-      0 0 8px rgba(110, 231, 183, 0.35);
-  }
-
-  50% {
-    box-shadow:
-      0 0 0 4px rgba(110, 231, 183, 0.18),
-      0 0 14px rgba(110, 231, 183, 0.65);
-  }
-}
-
 @media (max-width: 767px) {
   /* Keep long mobile feeds cheap while preserving their full scroll range. */
   .mobile-conversation-row {
     content-visibility: auto;
     contain-intrinsic-size: auto 3.5rem;
   }
+}
 
-  .mobile-transcript-row {
-    content-visibility: auto;
-    contain-intrinsic-size: auto 12rem;
-  }
+/* The Quick question selection. Utilities cannot style a highlight. */
+::highlight(quick-question) {
+  background-color: color-mix(
+    in oklab,
+    var(--color-dashboard-accent) 30%,
+    transparent
+  );
 }

package/src/client/components/ActiveIndicator.tsx

@@ -1,14 +0,0 @@
-import { cn } from "../styles";
-
-/** Render the animated dot used to show active work. */
-export function ActiveIndicator(props: { className?: string }) {
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(
-        "shrink-0 rounded-full bg-emerald-300 shadow-[0_0_10px_rgba(110,231,183,0.55)] animate-[junior-active-indicator_1.8s_ease-in-out_infinite] motion-reduce:animate-none",
-        props.className,
-      )}
-    />
-  );
-}