@sentry/junior-dashboard 0.274.0 → 0.276.0

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

@@ -0,0 +1,99 @@
+import { ChevronRight, Inbox } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { LoadMorePagination } from "../components/Pagination";
+import {
+  DetailsCard,
+  DetailsList,
+  DetailsRow,
+} from "../conversations/DetailsList";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
+import { ReviewItemCard } from "./ReviewItemCard";
+import { useReviewItemsData } from "./queries";
+
+/**
+ * Show the open Review items linked to a Conversation in its details. Each
+ * item is one line, like its sidebar chip, and expands to the full card in
+ * place. `highlight` marks the card when a sidebar link opened it.
+ */
+export function ConversationReviewItems(props: {
+  conversationId: string;
+  highlight: boolean;
+}) {
+  const { items, query } = useReviewItemsData({
+    conversationId: props.conversationId,
+  });
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const shown = items.length > 0;
+  useEffect(() => {
+    if (props.highlight && shown) {
+      sectionRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [props.highlight, shown]);
+  if (!shown) return null;
+  return (
+    <div
+      className={cn(
+        "rounded-lg",
+        props.highlight && "ring-2 ring-violet-300/50",
+      )}
+      ref={sectionRef}
+    >
+      {/* A count of loaded pages only would understate, so hide it. */}
+      <DetailsCard
+        count={query.hasNextPage ? undefined : items.length}
+        label="Needs you"
+        title="Needs you"
+      >
+        <DetailsList
+          itemKey={(item) => item.id}
+          items={items}
+          renderItem={(item) => (
+            <ReviewItemRow defaultExpanded={props.highlight} item={item} />
+          )}
+        />
+        <LoadMorePagination
+          className="mt-2"
+          hasMore={Boolean(query.hasNextPage)}
+          loading={query.isFetchingNextPage}
+          onLoadMore={() => void query.fetchNextPage()}
+        />
+      </DetailsCard>
+    </div>
+  );
+}
+
+function ReviewItemRow(props: {
+  defaultExpanded: boolean;
+  item: ReviewItemPayload;
+}) {
+  const [expanded, setExpanded] = useState(props.defaultExpanded);
+  // Details can already be open when a sidebar review chip highlights it.
+  useEffect(() => {
+    if (props.defaultExpanded) setExpanded(true);
+  }, [props.defaultExpanded]);
+  return (
+    <>
+      <DetailsRow
+        expanded={expanded}
+        icon={<Inbox aria-hidden="true" className="size-3.5" />}
+        meta={
+          <span className="grid size-5 place-items-center">
+            <ChevronRight
+              aria-hidden="true"
+              className={dashboardDisclosureChevronClass}
+            />
+          </span>
+        }
+        onToggle={() => setExpanded((value) => !value)}
+        title={props.item.title}
+      />
+      {expanded ? (
+        <div className="px-1.5 pb-1">
+          <ReviewItemCard item={props.item} />
+        </div>
+      ) : null}
+    </>
+  );
+}

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

@@ -26,7 +26,7 @@ function actionError(error: unknown): string {
 }
 
 /** Show the submitted answer as one line for each answered field. */
-function AnswerSummary(props: {
+export function AnswerSummary(props: {
   answer: NonNullable<ReviewItemPayload["answer"]>;
   request: NonNullable<ReviewItemPayload["request"]>;
 }) {

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

@@ -0,0 +1,85 @@
+import { Inbox } from "lucide-react";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type {
+  ReviewItemChangeRecord,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { AnswerSummary } from "./ReviewItemActions";
+import { useReviewItemData } from "./queries";
+import { reviewItemPath } from "./reviewItemFormat";
+
+const CHANGE_VERBS = {
+  dismissed: "Dismissed",
+  submitted: "Answered",
+  taken: "Took",
+} as const satisfies Record<ReviewItemChangeRecord["kind"], string>;
+
+function ChangeRow(props: {
+  item: ReviewItemPayload;
+  record: ReviewItemChangeRecord;
+}) {
+  const { item, record } = props;
+  const verb = CHANGE_VERBS[record.kind];
+  return (
+    <section
+      aria-label={`${verb} ${item.title}`}
+      className="grid min-w-0 max-w-[37.5rem] gap-2 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-3 font-sans text-sm"
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <Inbox
+          aria-hidden="true"
+          className="shrink-0 text-dashboard-text-muted"
+          size={15}
+        />
+        <span className="shrink-0 text-dashboard-text-muted">{verb}</span>
+        <Link
+          className="min-w-0 flex-1 truncate font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus"
+          to={reviewItemPath(item.id)}
+        >
+          {item.title}
+        </Link>
+      </div>
+      {/* An answer is final, so the item's answer is this message's answer. */}
+      {record.kind === "submitted" && item.request && item.answer ? (
+        <AnswerSummary answer={item.answer} request={item.request} />
+      ) : null}
+    </section>
+  );
+}
+
+/**
+ * Show the Review item change that a message records as one row: what the
+ * message did and the item it did it to. The row shows the change from the
+ * message, not the item's current state, so a take stays a take after a
+ * later answer. Shows `fallback` when the viewer cannot read the item.
+ */
+export function ReviewItemChangeRow(props: {
+  fallback: ReactNode;
+  record: ReviewItemChangeRecord;
+}) {
+  const { data, isError } = useReviewItemData(props.record.reviewItemId);
+  if (isError) return props.fallback;
+  // The row replaces the text, so wait for the item before showing it.
+  if (!data) return null;
+  return <ChangeRow item={data} record={props.record} />;
+}
+
+/**
+ * Name the Review item change that a queued message records, on one line.
+ * Shows `fallback` until the item loads or when the viewer cannot read it.
+ */
+export function ReviewItemChangeLabel(props: {
+  fallback: ReactNode;
+  record: ReviewItemChangeRecord;
+}) {
+  const { data } = useReviewItemData(props.record.reviewItemId);
+  if (!data) return props.fallback;
+  return (
+    <>
+      {CHANGE_VERBS[props.record.kind]}{" "}
+      <span className="font-medium text-dashboard-text">{data.title}</span>
+    </>
+  );
+}

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

@@ -294,6 +294,10 @@
 /* Style one-off values that the token and palette mirror cannot cover. */
 @custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
 
+/* Desktop windows tall enough to afford the top bar. Shorter windows, such as
+   most laptops, keep the nav rail so conversations get the height. */
+@custom-variant tall (@media (min-height: 62.5rem));
+
 @layer base {
   :root {
     color-scheme: var(--dashboard-color-scheme, dark);
@@ -338,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,
-      )}
-    />
-  );
-}

package/src/client/conversations/ConversationHeaderMeta.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from "react";
-
-/** Render the compact owner and runtime line below a conversation title. */
-export function ConversationHeaderMeta(props: {
-  identity: ReactNode;
-  stats: ReactNode;
-}) {
-  if (!props.identity && !props.stats) return null;
-  return (
-    <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1">
-      {props.identity ? (
-        <span className="min-w-0 max-w-full truncate">{props.identity}</span>
-      ) : null}
-      {props.identity && props.stats ? (
-        <span className="text-dashboard-text-muted">·</span>
-      ) : null}
-      {props.stats ? <span className="min-w-0">{props.stats}</span> : null}
-    </div>
-  );
-}