@sentry/junior-dashboard 0.275.0 → 0.277.0

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. */
@@ -170,6 +176,7 @@ export type Conversation = {
   annotations?: ConversationSummaryReport["annotations"];
   sidebarAnnotations?: ConversationSummaryReport["sidebarAnnotations"];
   archivedAt?: string | null;
+  pinnedAt?: string | null;
   auxiliaryCosts?: ConversationSummaryReport["auxiliaryCosts"];
   channel?: string;
   channelName?: string;

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/conversation-cache.ts

@@ -1,7 +1,7 @@
 import { createHash } from "node:crypto";
 import type { MiddlewareHandler } from "hono";
 
-/** Revalidate dashboard detail reads only after the route checks viewer access. */
+/** Revalidate mock detail reads on content, after the route checks viewer access. */
 export const revalidateConversation: MiddlewareHandler = async (
   context,
   next,

package/src/mock-reporting/fixtures.ts

@@ -135,12 +135,36 @@ const DASHBOARD_QA_PLAN_CHECK_ID =
   "junior:internal:dashboard-qa:advisor-plan:claim-check";
 /** Process-local archive state so mock restore can be exercised in visual QA. */
 const mockArchivedConversationIds = new Set<string>([ARCHIVED_CONVERSATION_ID]);
+/** Process-local pins so the Pinned section can be exercised in visual QA. */
+const mockPinnedConversationIds = new Set<string>();
 
-/** Restore process-local archive state so tests sharing a worker do not leak state. */
-export function resetMockConversationArchiveState(): void {
+/** Process-local auto-archive choices for mock visual QA. */
+const mockAutoArchiveByConversationId = new Map<string, boolean>();
+
+/**
+ * Restore process-local archive, pin, and auto-archive state so tests sharing
+ * a worker do not leak state.
+ */
+export function resetMockConversationViewerState(): void {
   mockArchivedConversationIds.clear();
   mockArchivedConversationIds.add(ARCHIVED_CONVERSATION_ID);
+  mockPinnedConversationIds.clear();
+  mockAutoArchiveByConversationId.clear();
 }
+
+/** Add the viewer's mock archive and pin times to one conversation. */
+function withMockViewerState<T extends { conversationId: string }>(
+  report: T & { archivedAt?: string | null },
+): T & { archivedAt: string | undefined; pinnedAt: string | null } {
+  return {
+    ...report,
+    archivedAt: mockArchivedConversationIds.has(report.conversationId)
+      ? (report.archivedAt ?? iso(NOW_MS, -2 * 24 * 60 * 60_000))
+      : undefined,
+    pinnedAt: mockPinnedConversationIds.has(report.conversationId) ? NOW : null,
+  };
+}
+
 const PEOPLE_ACTIVITY_DAYS = 90;
 const PEOPLE_PROFILE_ACTIVITY_DAYS = 365;
 const PUBLIC_MOCK_CHANNEL_IDS = new Set([
@@ -1657,19 +1681,11 @@ function summaryFromConversation(
     ...summary,
     ...(activityPreview ? { activityPreview } : undefined),
   };
-  const withArchiveState = mockArchivedConversationIds.has(
-    conversation.conversationId,
-  )
-    ? {
-        ...summaryWithActivity,
-        archivedAt:
-          summaryWithActivity.archivedAt ?? iso(NOW_MS, -2 * 24 * 60 * 60_000),
-      }
-    : { ...summaryWithActivity, archivedAt: undefined };
-  return withArchiveState.channel &&
-    PUBLIC_MOCK_CHANNEL_IDS.has(withArchiveState.channel)
-    ? { ...withArchiveState, locationId: `mock:${withArchiveState.channel}` }
-    : withArchiveState;
+  const withViewerState = withMockViewerState(summaryWithActivity);
+  return withViewerState.channel &&
+    PUBLIC_MOCK_CHANNEL_IDS.has(withViewerState.channel)
+    ? { ...withViewerState, locationId: `mock:${withViewerState.channel}` }
+    : withViewerState;
 }
 
 function mockConversationFeed(nowMs: number): ConversationFeed {
@@ -1924,11 +1940,70 @@ export function setMockConversationArchived(
     (conversation) => conversation.conversationId === conversationId,
   );
   if (!exists) return undefined;
-  if (archived) mockArchivedConversationIds.add(conversationId);
-  else mockArchivedConversationIds.delete(conversationId);
+  if (archived) {
+    mockArchivedConversationIds.add(conversationId);
+    // Match the API: archive also unpins.
+    mockPinnedConversationIds.delete(conversationId);
+  } else {
+    mockArchivedConversationIds.delete(conversationId);
+    // Match the API: a manual restore turns auto-archive off.
+    mockAutoArchiveByConversationId.set(conversationId, false);
+  }
   return { archivedAt: archived ? NOW : null };
 }
 
+/** Pin or unpin one mock conversation for local dashboard visual QA. */
+export function setMockConversationPinned(
+  conversationId: string,
+  pinned: boolean,
+): { pinnedAt: string | null } | undefined {
+  const exists = mockConversations(NOW_MS).some(
+    (conversation) => conversation.conversationId === conversationId,
+  );
+  if (!exists) return undefined;
+  if (pinned) {
+    mockPinnedConversationIds.add(conversationId);
+    // Match the API: a pin also restores an archived conversation.
+    mockArchivedConversationIds.delete(conversationId);
+  } else {
+    mockPinnedConversationIds.delete(conversationId);
+  }
+  return { pinnedAt: pinned ? NOW : null };
+}
+
+/** Archive every done mock conversation once, like the archive-done API. */
+export function archiveMockDoneConversations(): { archived: number } {
+  let archived = 0;
+  for (const summary of mockConversationFeed(NOW_MS).conversations) {
+    if (
+      summary.archivedAt ||
+      summary.pinnedAt ||
+      !summary.assignedWork ||
+      summary.unfinishedWork ||
+      !summary.finishedWorkAt ||
+      mockAutoArchiveByConversationId.get(summary.conversationId) === false
+    ) {
+      continue;
+    }
+    mockArchivedConversationIds.add(summary.conversationId);
+    archived += 1;
+  }
+  return { archived };
+}
+
+/** Save a mock auto-archive choice for local dashboard visual QA. */
+export function setMockConversationAutoArchive(
+  conversationId: string,
+  autoArchive: boolean,
+): { autoArchive: boolean } | undefined {
+  const exists = mockConversations(NOW_MS).some(
+    (conversation) => conversation.conversationId === conversationId,
+  );
+  if (!exists) return undefined;
+  mockAutoArchiveByConversationId.set(conversationId, autoArchive);
+  return { autoArchive };
+}
+
 /** Return accepted mailbox rows for local dashboard visual QA. */
 export function readMockConversationPendingMessages(
   conversationId: string,
@@ -2151,22 +2226,23 @@ export function readMockConversationDetail(
     canFork:
       !parentConversationId &&
       conversationDetail.eventHistory.status !== "redacted",
+    ...(conversationDetail.isParticipant
+      ? {
+          autoArchive:
+            mockAutoArchiveByConversationId.get(conversationId) ?? false,
+        }
+      : undefined),
   };
-  const withArchiveState = mockArchivedConversationIds.has(conversationId)
-    ? {
-        ...detail,
-        archivedAt: detail.archivedAt ?? iso(NOW_MS, -2 * 24 * 60 * 60_000),
-      }
-    : { ...detail, archivedAt: undefined };
-  const events = withArchiveState.events.slice(-limit);
+  const withViewerState = withMockViewerState(detail);
+  const events = withViewerState.events.slice(-limit);
   const bounded =
-    events.length < withArchiveState.events.length && events[0]
+    events.length < withViewerState.events.length && events[0]
       ? {
-          ...withArchiveState,
+          ...withViewerState,
           events,
           previousCursor: mockBeforeCursor(conversationId, events[0].seq),
         }
-      : withArchiveState;
+      : withViewerState;
   return bounded.channel && PUBLIC_MOCK_CHANNEL_IDS.has(bounded.channel)
     ? { ...bounded, locationId: `mock:${bounded.channel}` }
     : bounded;

package/src/mock-reporting/routes.ts

@@ -7,6 +7,10 @@ import {
   actorProfileReportSchema,
   archiveConversationBodySchema,
   archiveConversationResponseSchema,
+  pinConversationBodySchema,
+  pinConversationResponseSchema,
+  archiveDoneConversationsResponseSchema,
+  conversationAutoArchiveSchema,
   conversationChildAgentsReportSchema,
   conversationDetailQuerySchema,
   conversationDetailReportSchema,
@@ -66,6 +70,9 @@ import {
   readMockAutomationExecutions,
   readMockAutomationList,
   setMockConversationArchived,
+  setMockConversationPinned,
+  setMockConversationAutoArchive,
+  archiveMockDoneConversations,
 } from "./fixtures";
 import { readMockConversationWatches } from "./watches";
 
@@ -289,6 +296,46 @@ export function createMockReportingApi(): Hono<{
       ? jsonResponse(archiveConversationResponseSchema, result)
       : errorResponse("Conversation not found.", 404);
   });
+  app.patch("/conversations/:conversationId/pin", async (c) => {
+    const params = conversationParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const body = pinConversationBodySchema.safeParse(await c.req.json());
+    if (!body.success) {
+      return errorResponse("Invalid request body.", 400);
+    }
+    const result = setMockConversationPinned(
+      params.data.conversationId,
+      body.data.pinned,
+    );
+    return result
+      ? jsonResponse(pinConversationResponseSchema, result)
+      : errorResponse("Conversation not found.", 404);
+  });
+  app.post("/conversations/archive-done", () =>
+    jsonResponse(
+      archiveDoneConversationsResponseSchema,
+      archiveMockDoneConversations(),
+    ),
+  );
+  app.patch("/conversations/:conversationId/auto-archive", async (c) => {
+    const params = conversationParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const body = conversationAutoArchiveSchema.safeParse(await c.req.json());
+    if (!body.success) {
+      return errorResponse("Invalid request body.", 400);
+    }
+    const result = setMockConversationAutoArchive(
+      params.data.conversationId,
+      body.data.autoArchive,
+    );
+    return result
+      ? jsonResponse(conversationAutoArchiveSchema, result)
+      : errorResponse("Conversation not found.", 404);
+  });
   // Fixed bodies so dashboard mock can exercise image/file attachment cards.
   app.get("/conversations/:conversationId/attachments/:attachmentId", (c) => {
     const conversationId = c.req.param("conversationId");

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,
-      )}
-    />
-  );
-}