@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/client/conversations/ConversationPage.tsx

@@ -1,4 +1,12 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import { useSearchParams } from "react-router";
 import type {
   ConversationDetailReport,
@@ -18,7 +26,7 @@ import {
 import { conversationIsResponding } from "./transcript";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
 import { buildConversationMarkdown } from "../markdownExport";
-import { CopyMarkdownButton } from "./CopyMarkdownButton";
+import { CopyButton } from "../components/CopyButton";
 import { ConversationBrief } from "./ConversationBrief";
 import {
   CONVERSATION_EVENT_PARAM,
@@ -27,10 +35,24 @@ import {
 import { ConversationComposer } from "./ConversationComposer";
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationDetails } from "./ConversationDetails";
+import { ConversationEventDetails } from "./ConversationEventDetails";
+import { ConversationEventLogLoading } from "./ConversationEventLog";
+import {
+  adjacentEventLogSeqs,
+  eventLogRows,
+  filterEventLogRows,
+} from "./eventLog";
+import { TranscriptSearchProvider } from "./transcriptSearch";
+import {
+  TurnContextDetails,
+  type TurnContextPanel,
+  type TurnContextSelection,
+} from "./TranscriptTurnContextView";
 import { cn } from "../styles";
 import { ConversationForkLinks } from "./ConversationForkLinks";
 import { ConversationAgentTree } from "./ConversationAgentTree";
 import { ConversationHeaderMeta } from "./ConversationHeaderMeta";
+import { conversationLinks } from "./ConversationLinkedWork";
 import {
   ConversationAnnotations,
   ConversationPrivacyChip,
@@ -39,7 +61,10 @@ import {
   hasConversationStats,
   PendingAuthorization,
 } from "./ConversationMeta";
-import { ConversationUsageBreakdown } from "./ConversationUsageBreakdown";
+import {
+  ConversationUsageBreakdown,
+  hasConversationUsageBreakdown,
+} from "./ConversationUsageBreakdown";
 import { PendingMailboxStack } from "./PendingMailboxStack";
 import {
   buildConversations,
@@ -71,6 +96,14 @@ import type {
 
 export { liveModelId } from "./ConversationMeta";
 
+const detailsDefaultOpenQuery = "(min-width: 1440px)";
+
+function subscribeToDetailsLayout(onChange: () => void) {
+  const media = window.matchMedia(detailsDefaultOpenQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
 /** Render the selected conversation transcript inside the workspace. */
 export function ConversationPage(props: {
   conversationId: string;
@@ -78,7 +111,12 @@ export function ConversationPage(props: {
   onRead?(conversationId: string, lastReadAt: string): void;
   pendingArchiveUpdate?: PendingArchiveConversationUpdate;
 }) {
-  const [detailsOpen, setDetailsOpen] = useState(false);
+  const detailsDefaultOpen = useSyncExternalStore(
+    subscribeToDetailsLayout,
+    () => window.matchMedia(detailsDefaultOpenQuery).matches,
+    () => false,
+  );
+  const pageRef = useRef<HTMLDivElement>(null);
   const [subagentTarget, setSubagentTarget] =
     useState<SubagentTranscriptTarget>();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -86,6 +124,16 @@ export function ConversationPage(props: {
   const selectedEventSeq = parseConversationEventSeq(
     searchParams.get(CONVERSATION_EVENT_PARAM),
   );
+  // 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,
+  );
+  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",
   );
@@ -121,6 +169,10 @@ export function ConversationPage(props: {
     onRead?.(conversation.id, conversation.lastSeenAt);
   }, [conversation, onRead]);
   const transcript = detail.data;
+  const selectedEvent =
+    transcript?.eventHistory.status === "expired"
+      ? undefined
+      : transcript?.events.find((event) => event.seq === selectedEventSeq);
   const visualStatus = conversation
     ? visualStatusForConversation(conversation)
     : undefined;
@@ -157,6 +209,8 @@ export function ConversationPage(props: {
       if (value !== "raw" && selectedEventSeq !== undefined) {
         setSelectedEventSeq(undefined);
       }
+      // Turn context belongs to a message in the Conversation view.
+      setTurnContext(undefined);
       setView(value);
     },
     [selectedEventSeq, setSelectedEventSeq],
@@ -178,6 +232,35 @@ export function ConversationPage(props: {
   useEffect(() => {
     if (loadLinkedEvent) loadPreviousPageRef.current();
   }, [loadLinkedEvent, oldestLoadedSeq]);
+  // Keep the panel while the transcript or a linked event loads.
+  const eventLoading =
+    eventOpen &&
+    !selectedEvent &&
+    (detail.isPending ||
+      (linkedEventMissing &&
+        (detail.hasPreviousPage || detail.isLoadingPreviousPage) &&
+        !detail.historyError));
+  const showEvent = Boolean(selectedEvent) || eventLoading;
+  // Step through the same filtered rows that the event log shows.
+  const events = transcript?.events;
+  const normalizedSearch = search.trim().toLowerCase();
+  const eventRows = useMemo(
+    () =>
+      eventOpen && events
+        ? filterEventLogRows(eventLogRows(events), normalizedSearch)
+        : [],
+    [eventOpen, events, normalizedSearch],
+  );
+  const turnContextPanel = useMemo<TurnContextPanel>(
+    () => ({
+      openId: turnContext?.id,
+      onToggle: (selection) =>
+        setTurnContext((current) =>
+          current?.id === selection.id ? undefined : selection,
+        ),
+    }),
+    [turnContext?.id],
+  );
   const requestPin = useCallback(() => {
     setPinRequestVersion((version) => version + 1);
   }, []);
@@ -198,111 +281,139 @@ export function ConversationPage(props: {
     [],
   );
 
+  const closeEventDetails = () => {
+    const trigger = pageRef.current?.querySelector<HTMLButtonElement>(
+      `[data-event-seq="${selectedEventSeq}"] button`,
+    );
+    setSelectedEventSeq(undefined);
+    trigger?.focus({ preventScroll: true });
+  };
+  const closeTurnContext = () => {
+    // A message can have one context control per layout. Focus the visible one.
+    const trigger = [
+      ...(pageRef.current?.querySelectorAll<HTMLButtonElement>(
+        `[data-turn-context-id="${CSS.escape(turnContext?.id ?? "")}"]`,
+      ) ?? []),
+    ].find((button) => button.getClientRects().length > 0);
+    setTurnContext(undefined);
+    trigger?.focus({ preventScroll: true });
+  };
+
   return (
     <div
+      ref={pageRef}
       className={cn(
         "grid h-full min-h-0 min-w-0",
-        detailsOpen && "xl:grid-cols-[minmax(0,1fr)_25rem]",
+        (showDetails || showEvent || turnContext) &&
+          "xl:grid-cols-[minmax(0,1fr)_25rem]",
       )}
     >
       <ChatLayout
+        header={
+          <ConversationHeader
+            agentTree={
+              agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
+            }
+            conversationId={conversationId}
+            detailsOpen={showDetails}
+            onDetailsClick={() => {
+              if (eventOpen) setSelectedEventSeq(undefined);
+              setTurnContext(undefined);
+              setDetailsChoice(!showDetails);
+            }}
+            forks={
+              detail.data?.forkedFromConversationId ||
+              detail.data?.forks?.length ? (
+                <ConversationForkLinks
+                  forkedFromConversationId={
+                    detail.data.forkedFromConversationId
+                  }
+                  forkedFromTitle={detail.data.forkedFromTitle}
+                  forks={detail.data.forks}
+                />
+              ) : null
+            }
+            copyAction={
+              <CopyButton
+                label="Copy as Markdown"
+                copyingLabel="Preparing Markdown"
+                key={conversationDetail?.conversationId ?? "loading"}
+                getText={
+                  conversationDetail
+                    ? async () =>
+                        buildConversationMarkdown(
+                          await detail.loadCompleteTranscript(),
+                          conversation,
+                        )
+                    : undefined
+                }
+              />
+            }
+            linkedWork={
+              hasConversationAnnotations(detail.data?.annotations) ? (
+                <ConversationAnnotations detail={detail.data} />
+              ) : null
+            }
+            archive={{
+              archived: Boolean(conversation?.archivedAt),
+              disabled: !conversation || archive.isPending,
+              error: Boolean(archive.error),
+              onClick: () =>
+                archive.mutate({
+                  archived: !conversation?.archivedAt,
+                  lastSeenAt: conversation!.lastSeenAt,
+                }),
+              pending: archive.isPending,
+            }}
+            live={live}
+            meta={
+              <ConversationHeaderMeta
+                identity={identity}
+                stats={
+                  hasConversationStats({
+                    conversation,
+                    detail: detail.data,
+                    variant: "compact",
+                  }) ? (
+                    <ConversationStats
+                      conversation={conversation}
+                      detail={detail.data}
+                      variant="compact"
+                    />
+                  ) : null
+                }
+              />
+            }
+            onSearchChange={setSearch}
+            onViewChange={onViewChange}
+            privacy={
+              <ConversationPrivacyChip visibility={conversation?.visibility} />
+            }
+            search={search}
+            title={title}
+            view={view}
+          />
+        }
         scrollMinTall
         scrollAriaLabel="Conversation transcript"
-        scrollClassName="px-4 pb-4 md:px-7 md:pb-6"
+        scrollClassName={
+          view === "raw" ? undefined : "px-4 pb-4 md:px-7 md:pb-6"
+        }
         scroll={
           <section className="min-w-0">
-            <ConversationHeader
-              agentTree={
-                agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
-              }
-              conversationId={conversationId}
-              detailsOpen={detailsOpen}
-              onDetailsClick={() => setDetailsOpen((open) => !open)}
-              forks={
-                detail.data?.forkedFromConversationId ||
-                detail.data?.forks?.length ? (
-                  <ConversationForkLinks
-                    forkedFromConversationId={
-                      detail.data.forkedFromConversationId
-                    }
-                    forkedFromTitle={detail.data.forkedFromTitle}
-                    forks={detail.data.forks}
-                  />
-                ) : null
-              }
-              copyAction={
-                <CopyMarkdownButton
-                  key={conversationDetail?.conversationId ?? "loading"}
-                  getMarkdown={
-                    conversationDetail
-                      ? async () =>
-                          buildConversationMarkdown(
-                            await detail.loadCompleteTranscript(),
-                            conversation,
-                          )
-                      : undefined
-                  }
-                />
-              }
-              linkedWork={
-                hasConversationAnnotations(detail.data?.annotations) ? (
-                  <ConversationAnnotations
-                    detail={detail.data}
-                    layout="strip"
-                  />
-                ) : null
-              }
-              archive={{
-                archived: Boolean(conversation?.archivedAt),
-                disabled: !conversation || archive.isPending,
-                error: Boolean(archive.error),
-                onClick: () =>
-                  archive.mutate({
-                    archived: !conversation?.archivedAt,
-                    lastSeenAt: conversation!.lastSeenAt,
-                  }),
-                pending: archive.isPending,
-              }}
-              live={live}
-              meta={
-                <ConversationHeaderMeta
-                  identity={identity}
-                  stats={
-                    hasConversationStats({
-                      conversation,
-                      detail: detail.data,
-                      variant: "compact",
-                    }) ? (
-                      <ConversationStats
-                        conversation={conversation}
-                        detail={detail.data}
-                        variant="compact"
-                      />
-                    ) : null
-                  }
-                />
-              }
-              onSearchChange={setSearch}
-              onViewChange={onViewChange}
-              privacy={
-                <ConversationPrivacyChip
-                  visibility={conversation?.visibility}
-                />
-              }
-              search={search}
-              title={title}
-              view={view}
-            />
-
             <div
               className={
                 view === "raw"
-                  ? "w-full pt-5 md:pt-7"
+                  ? "w-full"
                   : "mx-auto w-full max-w-[52.5rem] pt-5 md:pt-7"
               }
             >
               {detail.isPending ? (
-                <TranscriptLoading />
+                view === "raw" ? (
+                  <ConversationEventLogLoading />
+                ) : (
+                  <TranscriptLoading />
+                )
               ) : detail.error && !detail.data ? (
                 <Card className="border-dashboard-border bg-dashboard-fill-soft p-4 font-sans text-xs leading-relaxed text-dashboard-text-muted">
                   {detail.error.message}
@@ -329,8 +440,10 @@ export function ConversationPage(props: {
                     }
                     onOpenSubagentTranscript={onOpenSubagentTranscript}
                     search={search}
+                    onSearchChange={setSearch}
                     selectedEventSeq={selectedEventSeq}
                     transcript={transcript}
+                    turnContextPanel={turnContextPanel}
                     view={view}
                   />
                 </>
@@ -358,43 +471,61 @@ export function ConversationPage(props: {
           ) : undefined
         }
       />
-      {detailsOpen ? (
+      {showDetails ? (
         <ConversationDetails
           conversationId={conversationId}
           identity={identity}
-          lastActivityAt={conversation?.lastSeenAt}
           sentryConversationUrl={detail.data?.sentryConversationUrl}
-          onClose={() => setDetailsOpen(false)}
+          onClose={() => setDetailsChoice(false)}
           onOpenSubagent={setSubagentTarget}
-          annotations={
-            hasConversationAnnotations(detail.data?.annotations) ? (
-              <ConversationAnnotations detail={detail.data} />
-            ) : null
-          }
+          links={conversationLinks(detail.data)}
           brief={
             detail.data?.brief ? (
               <ConversationBrief brief={detail.data.brief} variant="summary" />
             ) : null
           }
-          stats={
+          overview={
             hasConversationStats({
               conversation,
               detail: detail.data,
             }) ? (
-              <div className="grid min-w-0 gap-5">
-                <ConversationStats
-                  conversation={conversation}
-                  detail={detail.data}
-                />
-                <ConversationUsageBreakdown
-                  conversation={conversation}
-                  detail={detail.data}
-                />
-              </div>
+              <ConversationStats
+                conversation={conversation}
+                detail={detail.data}
+              />
+            ) : null
+          }
+          usage={
+            hasConversationUsageBreakdown({
+              conversation,
+              detail: detail.data,
+            }) ? (
+              <ConversationUsageBreakdown
+                conversation={conversation}
+                detail={detail.data}
+              />
             ) : null
           }
         />
       ) : null}
+      {showEvent ? (
+        <ConversationEventDetails
+          conversation={transcript}
+          event={selectedEvent}
+          onClose={closeEventDetails}
+          onSelect={setSelectedEventSeq}
+          {...adjacentEventLogSeqs(eventRows, selectedEventSeq)}
+        />
+      ) : null}
+      {turnContext ? (
+        <TranscriptSearchProvider query={search}>
+          <TurnContextDetails
+            contexts={turnContext.contexts}
+            key={turnContext.id}
+            onClose={closeTurnContext}
+          />
+        </TranscriptSearchProvider>
+      ) : null}
       <SubagentTranscriptDrawer
         onClose={() => setSubagentTarget(undefined)}
         target={subagentTarget}

package/src/client/conversations/ConversationSidebar.tsx

@@ -19,7 +19,12 @@ import {
 } from "./conversationSections";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { SearchInput } from "../components/SearchInput";
-import { Skeleton } from "../components/Skeleton";
+import { Skeleton } from "../components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { ConversationSidebarAnnotations } from "./ConversationMeta";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 
@@ -104,15 +109,21 @@ export function ConversationSidebar(props: {
           </h2>
           <div className="flex items-center gap-0.5">
             {isLanding ? null : (
-              <button
-                aria-label="New conversation"
-                className="grid size-7 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
-                onClick={props.onNewConversation}
-                title="New conversation"
-                type="button"
-              >
-                <SquarePen aria-hidden="true" size={15} />
-              </button>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <button
+                      aria-label="New conversation"
+                      className="grid size-7 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
+                      onClick={props.onNewConversation}
+                      type="button"
+                    >
+                      <SquarePen aria-hidden="true" size={15} />
+                    </button>
+                  }
+                />
+                <TooltipContent size="compact">New conversation</TooltipContent>
+              </Tooltip>
             )}
           </div>
         </div>
@@ -321,25 +332,33 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
           ) : null}
         </div>
       </Link>
-      <button
-        aria-label={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
-        className="absolute right-1.5 top-1/2 z-10 grid size-7 -translate-y-1/2 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
-        disabled={archive.isPending}
-        onClick={() =>
-          archive.mutate({
-            archived: !props.conversation.archivedAt,
-            lastSeenAt: props.conversation.lastSeenAt,
-          })
-        }
-        title={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
-        type="button"
-      >
-        {props.conversation.archivedAt ? (
-          <ArchiveRestore aria-hidden="true" size={14} />
-        ) : (
-          <Archive aria-hidden="true" size={14} />
-        )}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              aria-label={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
+              className="absolute right-1.5 top-1/2 z-10 grid size-7 -translate-y-1/2 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
+              disabled={archive.isPending}
+              onClick={() =>
+                archive.mutate({
+                  archived: !props.conversation.archivedAt,
+                  lastSeenAt: props.conversation.lastSeenAt,
+                })
+              }
+              type="button"
+            >
+              {props.conversation.archivedAt ? (
+                <ArchiveRestore aria-hidden="true" size={14} />
+              ) : (
+                <Archive aria-hidden="true" size={14} />
+              )}
+            </button>
+          }
+        />
+        <TooltipContent size="compact">
+          {props.conversation.archivedAt ? "Restore" : "Archive"}
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 });

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -167,6 +167,19 @@ function BreakdownTable(props: {
   );
 }
 
+/** True when the Conversation has model or auxiliary usage to break down. */
+export function hasConversationUsageBreakdown(props: {
+  conversation: Conversation | undefined;
+  detail?: ConversationDetailReport;
+}): boolean {
+  if (!props.conversation) return false;
+  const auxiliaryCosts =
+    props.detail?.auxiliaryCosts ?? props.conversation.auxiliaryCosts;
+  return Boolean(
+    props.detail?.modelUsage?.length || auxiliaryCosts?.operations?.length,
+  );
+}
+
 /**
  * Break a Conversation's usage down by agent, model, and auxiliary
  * operation. The header tooltips show only the largest items; this lists
@@ -177,7 +190,9 @@ export function ConversationUsageBreakdown(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
 }) {
-  if (!props.conversation) return null;
+  if (!hasConversationUsageBreakdown(props) || !props.conversation) {
+    return null;
+  }
   const modelUsage = props.detail?.modelUsage ?? [];
   const auxiliaryCosts =
     props.detail?.auxiliaryCosts ?? props.conversation.auxiliaryCosts;
@@ -193,8 +208,6 @@ export function ConversationUsageBreakdown(props: {
   const operations = [...(auxiliaryCosts?.operations ?? [])].sort(
     (a, b) => b.costUsd - a.costUsd,
   );
-  if (!modelUsage.length && !operations.length) return null;
-
   const formatCost = costFormatter(cost ?? 0);
   const formatTokens = (value: number | undefined) =>
     value === undefined ? NOT_RECORDED : formatCompactNumber(value);