@sentry/junior-dashboard 0.62.0 → 0.63.0

package/src/client/components/TranscriptTurn.tsx

@@ -1,17 +1,24 @@
-import { useState, type ClipboardEventHandler, type ReactNode } from "react";
+import {
+  Fragment,
+  useState,
+  type ClipboardEventHandler,
+  type ReactNode,
+} from "react";
 
 import { HighlightedCode } from "../code";
 import {
   detectLanguage,
-  detectOutputLanguage,
   transcriptRoleKind,
-  type TranscriptRoleKind,
   formatBytes,
   formatMessageOffset,
   formatMessageTimestamp,
   formatMs,
-  formatUsage,
+  formatTurnDuration,
   requesterLabel,
+  summarizeMessages,
+  summarizeToolCalls,
+  summarizeUsage,
+  turnMessageCount,
   stringifyPartValue,
   unavailableTranscriptLabel,
   visualStatusForSession,
@@ -24,6 +31,13 @@ import type {
 } from "../types";
 import { StatusBadge } from "./StatusBadge";
 import { ToolFrame, toolFrameClass } from "./ToolFrame";
+import { MetricList, type MetricListItem } from "./Metric";
+import {
+  DurationMetric,
+  MessagesMetric,
+  TokenMetric,
+  ToolCallsMetric,
+} from "./TelemetryMetrics";
 import { TranscriptText } from "./TranscriptText";
 import { TranscriptToolView } from "./TranscriptToolView";
 import {
@@ -40,6 +54,15 @@ import {
 } from "./transcriptStyles";
 import { previewToolValue } from "./transcriptPreview";
 
+type TranscriptEntry = ReturnType<typeof groupTranscriptMessages>[number];
+type TranscriptMessageEntry = Extract<TranscriptEntry, { kind: "message" }>;
+type TranscriptThinkingEntry = Extract<TranscriptEntry, { kind: "thinking" }>;
+type TranscriptToolEntry = Extract<TranscriptEntry, { kind: "tool" }>;
+
+const TOOL_RUN_COLLAPSE_THRESHOLD = 10;
+const TOOL_RUN_HEAD_COUNT = 4;
+const TOOL_RUN_TAIL_COUNT = 2;
+
 /** Render one conversation turn as actor messages and tool events. */
 export function TurnTranscript(props: {
   number: number;
@@ -148,22 +171,10 @@ function TurnHeader(props: { number: number; turn: ConversationTurn }) {
         <div className="break-all text-[1.05rem] font-bold leading-tight tracking-normal">
           Turn {props.number}
         </div>
-        <div className={cn(mutedTranscriptMetaClass(), "mt-1")}>
-          {turnMeta(props.turn).join(" · ")}
-          {props.turn.sentryTraceUrl ? (
-            <>
-              {" · "}
-              <a
-                className="text-white no-underline hover:underline"
-                href={props.turn.sentryTraceUrl}
-                rel="noreferrer"
-                target="_blank"
-              >
-                View in Sentry
-              </a>
-            </>
-          ) : null}
-        </div>
+        <MetricList
+          className={cn(mutedTranscriptMetaClass(), "mt-1")}
+          items={turnMeta(props.turn)}
+        />
       </div>
       <StatusBadge status={status} />
     </div>
@@ -175,10 +186,28 @@ function TurnEvents(props: {
   view: TranscriptViewMode;
 }) {
   return (
-    <div className="grid gap-3 pt-3">
+    <div className="grid gap-2 pt-3">
       {props.turn.transcriptAvailable ? (
-        groupTranscriptMessages(props.turn.transcript).map((entry, index) =>
-          entry.kind === "tool" ? (
+        <TranscriptEntryList
+          entries={groupTranscriptMessages(props.turn.transcript)}
+          keyPrefix={props.turn.id}
+          renderMessage={(entry, index) => (
+            <TranscriptMessageView
+              key={`${props.turn.id}:${index}`}
+              message={entry.message}
+              turn={props.turn}
+              view={props.view}
+            />
+          )}
+          renderThinking={(entry, index) => (
+            <ThinkingPartView
+              key={`${props.turn.id}:thinking:${index}`}
+              timestamp={entry.timestamp}
+              turn={props.turn}
+              value={entry.part.output}
+            />
+          )}
+          renderTool={(entry, index) => (
             <TranscriptToolView
               call={entry.call}
               key={`${props.turn.id}:${index}`}
@@ -187,15 +216,8 @@ function TurnEvents(props: {
               timestamp={entry.timestamp}
               view={props.view}
             />
-          ) : (
-            <TranscriptMessageView
-              key={`${props.turn.id}:${index}`}
-              message={entry.message}
-              turn={props.turn}
-              view={props.view}
-            />
-          ),
-        )
+          )}
+        />
       ) : props.turn.transcriptRedacted &&
         props.turn.transcriptMetadata?.length ? (
         <RedactedTranscriptView turn={props.turn} />
@@ -208,31 +230,187 @@ function TurnEvents(props: {
   );
 }
 
-function RedactedTranscriptView(props: { turn: ConversationTurn }) {
+function TranscriptEntryList(props: {
+  entries: TranscriptEntry[];
+  keyPrefix: string;
+  renderMessage: (entry: TranscriptMessageEntry, index: number) => ReactNode;
+  renderThinking: (entry: TranscriptThinkingEntry, index: number) => ReactNode;
+  renderTool: (entry: TranscriptToolEntry, index: number) => ReactNode;
+}) {
+  const rows: ReactNode[] = [];
+
+  for (let index = 0; index < props.entries.length; ) {
+    const entry = props.entries[index]!;
+
+    if (entry.kind === "tool") {
+      const startIndex = index;
+      const tools: TranscriptToolEntry[] = [];
+      while (props.entries[index]?.kind === "tool") {
+        tools.push(props.entries[index] as TranscriptToolEntry);
+        index += 1;
+      }
+      rows.push(
+        <ToolRunView
+          entries={tools}
+          key={`${props.keyPrefix}:tool-run:${startIndex}`}
+          keyPrefix={props.keyPrefix}
+          renderTool={props.renderTool}
+          startIndex={startIndex}
+        />,
+      );
+      continue;
+    }
+
+    rows.push(
+      <Fragment key={`${props.keyPrefix}:${entry.kind}:${index}`}>
+        {entry.kind === "thinking"
+          ? props.renderThinking(entry, index)
+          : props.renderMessage(entry, index)}
+      </Fragment>,
+    );
+    index += 1;
+  }
+
+  return <>{rows}</>;
+}
+
+function ToolRunView(props: {
+  entries: TranscriptToolEntry[];
+  keyPrefix: string;
+  renderTool: (entry: TranscriptToolEntry, index: number) => ReactNode;
+  startIndex: number;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (props.entries.length < TOOL_RUN_COLLAPSE_THRESHOLD) {
+    return (
+      <>
+        {renderToolEntries(
+          props.entries,
+          props.startIndex,
+          props.keyPrefix,
+          props.renderTool,
+        )}
+      </>
+    );
+  }
+
+  if (expanded) {
+    return (
+      <>
+        {renderToolEntries(
+          props.entries,
+          props.startIndex,
+          props.keyPrefix,
+          props.renderTool,
+        )}
+        <ToolRunToggle
+          expanded
+          onClick={() => setExpanded(false)}
+          totalCount={props.entries.length}
+        />
+      </>
+    );
+  }
+
+  const hiddenCount =
+    props.entries.length - TOOL_RUN_HEAD_COUNT - TOOL_RUN_TAIL_COUNT;
+
   return (
     <>
-      {groupTranscriptMessages(props.turn.transcriptMetadata ?? []).map(
-        (entry, index) =>
-          entry.kind === "tool" ? (
-            <RedactedToolView
-              call={entry.call}
-              key={`${props.turn.id}:redacted:${index}`}
-              result={entry.result}
-              resultTimestamp={entry.resultTimestamp}
-              timestamp={entry.timestamp}
-            />
-          ) : (
-            <RedactedMessageView
-              key={`${props.turn.id}:redacted:${index}`}
-              message={entry.message}
-              turn={props.turn}
-            />
-          ),
+      {renderToolEntries(
+        props.entries.slice(0, TOOL_RUN_HEAD_COUNT),
+        props.startIndex,
+        props.keyPrefix,
+        props.renderTool,
+      )}
+      <ToolRunToggle
+        hiddenCount={hiddenCount}
+        onClick={() => setExpanded(true)}
+        totalCount={props.entries.length}
+      />
+      {renderToolEntries(
+        props.entries.slice(-TOOL_RUN_TAIL_COUNT),
+        props.startIndex + props.entries.length - TOOL_RUN_TAIL_COUNT,
+        props.keyPrefix,
+        props.renderTool,
       )}
     </>
   );
 }
 
+function renderToolEntries(
+  entries: TranscriptToolEntry[],
+  startIndex: number,
+  keyPrefix: string,
+  renderTool: (entry: TranscriptToolEntry, index: number) => ReactNode,
+): ReactNode[] {
+  return entries.map((entry, offset) => {
+    const index = startIndex + offset;
+    return (
+      <Fragment key={`${keyPrefix}:tool:${index}`}>
+        {renderTool(entry, index)}
+      </Fragment>
+    );
+  });
+}
+
+function ToolRunToggle(props: {
+  expanded?: boolean;
+  hiddenCount?: number;
+  onClick: () => void;
+  totalCount: number;
+}) {
+  const label = props.expanded
+    ? `collapse ${props.totalCount} tool calls`
+    : `show ${props.hiddenCount ?? 0} more tool calls`;
+
+  return (
+    <button
+      aria-expanded={props.expanded ?? false}
+      className="group flex w-full items-center gap-2 py-1 pl-3 text-left font-mono text-[0.78rem] leading-tight text-[#888] transition-colors hover:text-[#d6d6d6] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#beaaff]/55"
+      onClick={props.onClick}
+      type="button"
+    >
+      <span className="h-px min-w-4 flex-1 bg-white/10 transition-colors group-hover:bg-white/20" />
+      <span className="shrink-0">{label}</span>
+      <span className="h-px min-w-4 flex-1 bg-white/10 transition-colors group-hover:bg-white/20" />
+    </button>
+  );
+}
+
+function RedactedTranscriptView(props: { turn: ConversationTurn }) {
+  return (
+    <TranscriptEntryList
+      entries={groupTranscriptMessages(props.turn.transcriptMetadata ?? [])}
+      keyPrefix={`${props.turn.id}:redacted`}
+      renderMessage={(entry, index) => (
+        <RedactedMessageView
+          key={`${props.turn.id}:redacted:${index}`}
+          message={entry.message}
+          turn={props.turn}
+        />
+      )}
+      renderThinking={(entry, index) => (
+        <RedactedThinkingView
+          key={`${props.turn.id}:redacted:thinking:${index}`}
+          timestamp={entry.timestamp}
+          turn={props.turn}
+        />
+      )}
+      renderTool={(entry, index) => (
+        <RedactedToolView
+          call={entry.call}
+          key={`${props.turn.id}:redacted:${index}`}
+          result={entry.result}
+          resultTimestamp={entry.resultTimestamp}
+          timestamp={entry.timestamp}
+        />
+      )}
+    />
+  );
+}
+
 function RedactedMessageView(props: {
   message: TranscriptMessage;
   turn: ConversationTurn;
@@ -297,6 +475,31 @@ function RedactedMarker() {
   );
 }
 
+function RedactedThinkingView(props: {
+  timestamp?: number;
+  turn: ConversationTurn;
+}) {
+  const offset = formatMessageOffset(props.turn, props.timestamp);
+  const meta = [
+    typeof props.timestamp === "number"
+      ? formatMessageTimestamp(props.timestamp)
+      : undefined,
+    offset,
+  ].filter(isString);
+
+  return (
+    <div className="py-0.5 text-[0.84rem] leading-relaxed text-[#888]">
+      <div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-baseline gap-3 max-md:grid-cols-1 max-md:gap-1">
+        <span className="font-mono text-[0.78rem] text-[#777]">thought</span>
+        <RedactedMarker />
+        <span className="min-w-0 break-words text-right font-mono text-[0.78rem] text-[#777] max-md:text-left">
+          {meta.join(" · ")}
+        </span>
+      </div>
+    </div>
+  );
+}
+
 function RedactedToolView(props: {
   call?: TranscriptPart;
   result?: TranscriptPart;
@@ -316,7 +519,9 @@ function RedactedToolView(props: {
       ? formatMs(props.resultTimestamp - props.timestamp)
       : undefined;
   const meta = [
-    props.timestamp ? formatMessageTimestamp(props.timestamp) : undefined,
+    typeof props.timestamp === "number"
+      ? formatMessageTimestamp(props.timestamp)
+      : undefined,
     duration,
     props.result ? undefined : "missing result",
   ].filter(isString);
@@ -327,7 +532,7 @@ function RedactedToolView(props: {
       raw
       signature={
         <>
-          <strong className="min-w-0 break-words font-bold text-white">
+          <strong className="min-w-0 break-words font-bold text-[#d6d6d6]">
             {toolName}
           </strong>
           {props.call?.inputKeys?.length ? (
@@ -347,16 +552,140 @@ function redactedMessageSize(part: TranscriptPart): string | undefined {
 }
 
 function turnActorLabel(turn: ConversationTurn): string {
-  return (
-    requesterLabel(turn.requesterIdentity, turn.requester) ?? "unknown actor"
-  );
+  return requesterLabel(turn.requesterIdentity) ?? "User";
+}
+
+function turnMessageSummary(turn: ConversationTurn) {
+  const summary = summarizeMessages([turn]);
+  if (summary.total > 0) return summary;
+  const total = turnMessageCount(turn);
+  return total > 0 ? { items: [], total } : undefined;
+}
+
+function turnMeta(turn: ConversationTurn): MetricListItem[] {
+  const duration = formatTurnDuration(turn);
+  const tokenSummary = summarizeUsage([turn.cumulativeUsage]);
+  const toolSummary = summarizeToolCalls([turn]);
+  const messageSummary = turnMessageSummary(turn);
+  const items: Array<MetricListItem | undefined> = [
+    duration !== "none"
+      ? {
+          content: (
+            <DurationMetric
+              endedAt={turn.completedAt ?? turn.lastSeenAt}
+              label={duration}
+              startedAt={turn.startedAt}
+            />
+          ),
+          key: "duration",
+        }
+      : undefined,
+    tokenSummary
+      ? {
+          content: <TokenMetric summary={tokenSummary} />,
+          key: "tokens",
+        }
+      : undefined,
+    messageSummary
+      ? {
+          content: <MessagesMetric summary={messageSummary} />,
+          key: "messages",
+        }
+      : undefined,
+    toolSummary.total > 0
+      ? {
+          content: <ToolCallsMetric summary={toolSummary} />,
+          key: "tools",
+        }
+      : undefined,
+    turn.sentryTraceUrl
+      ? {
+          content: (
+            <a
+              className="text-white no-underline hover:underline"
+              href={turn.sentryTraceUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              View in Sentry
+            </a>
+          ),
+          key: "sentry",
+        }
+      : undefined,
+  ];
+
+  return items.filter((item): item is MetricListItem => Boolean(item));
 }
 
-function turnMeta(turn: ConversationTurn): string[] {
-  return [
-    formatMs(turn.cumulativeDurationMs),
-    formatUsage(turn.cumulativeUsage),
-  ].filter((value) => value && value !== "none");
+/**
+ * Render the system prompt as a collapsed disclosure. Uses the same
+ * groupTranscriptParts → TranscriptPartView → TranscriptText pipeline as every
+ * other message so XML tag collapsing, syntax highlighting, and copy behaviour
+ * stay consistent. detectLanguage returns "xml" for the system prompt once the
+ * block-level XML heuristic in format.ts fires.
+ */
+function SystemMessageView(props: {
+  message: TranscriptMessage;
+  turn: ConversationTurn;
+  view: TranscriptViewMode;
+}) {
+  const [open, setOpen] = useState(false);
+  const rawText = messageRawText(props.message);
+  const role = props.message.role;
+  const byteCount = new TextEncoder().encode(rawText).byteLength;
+  const renderedParts = groupTranscriptParts(props.message.parts);
+  const totalRenderedChildren = renderedParts.reduce(
+    (count, part) => count + countRenderedTranscriptChildren(part, role),
+    0,
+  );
+  let seenRenderedChildren = 0;
+
+  return (
+    <details
+      className={cn(transcriptMessageClass(role), !open && "gap-0")}
+      onToggle={(event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      }}
+      open={open}
+    >
+      <summary className="flex min-h-6 cursor-pointer list-none items-center [&::-webkit-details-marker]:hidden">
+        <div className={cn(transcriptRoleClass(role), "items-center")}>
+          <span className={transcriptRoleLabelClass(role)}>
+            {transcriptRoleLabel(role, props.turn)}
+          </span>
+          {open ? null : (
+            <span className="font-mono text-[0.78rem] text-[#888]">
+              {formatBytes(byteCount)}
+            </span>
+          )}
+        </div>
+      </summary>
+      {props.view === "raw" ? (
+        <HighlightedCode
+          code={rawText || "{}"}
+          language={detectLanguage(rawText)}
+        />
+      ) : (
+        <div className="grid min-w-0 gap-2">
+          {renderedParts.map((part, index) => {
+            const firstChildIndex = seenRenderedChildren;
+            seenRenderedChildren += countRenderedTranscriptChildren(part, role);
+            return (
+              <TranscriptPartView
+                firstChildIndex={firstChildIndex}
+                key={index}
+                lastChildIndex={totalRenderedChildren - 1}
+                part={part}
+                role={role}
+              />
+            );
+          })}
+        </div>
+      )}
+    </details>
+  );
 }
 
 function TranscriptMessageView(props: {
@@ -364,6 +693,16 @@ function TranscriptMessageView(props: {
   turn: ConversationTurn;
   view: TranscriptViewMode;
 }) {
+  if (transcriptRoleKind(props.message.role) === "system") {
+    return (
+      <SystemMessageView
+        message={props.message}
+        turn={props.turn}
+        view={props.view}
+      />
+    );
+  }
+
   const offset = formatMessageOffset(props.turn, props.message.timestamp);
   const renderedParts = groupTranscriptParts(props.message.parts);
   const rawText = messageRawText(props.message);
@@ -452,9 +791,9 @@ function TranscriptPartView(props: {
   const rendered = stringifyPartValue(value);
   return (
     <details className={toolFrameClass()}>
-      <summary className="grid cursor-pointer grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-3 py-2 font-mono text-[0.86rem] leading-tight text-[#b8b8b8] hover:bg-white/[0.04] max-md:grid-cols-1 max-md:gap-1">
+      <summary className="grid cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 py-1.5 font-mono text-[0.82rem] leading-tight text-[#b8b8b8] transition-colors hover:text-[#d6d6d6] max-md:grid-cols-1 max-md:gap-1 [&::-webkit-details-marker]:hidden">
         <span className="text-[#888]">{part.type}</span>
-        <strong className="min-w-0 break-words font-bold text-white">
+        <strong className="min-w-0 break-words font-bold text-[#d6d6d6]">
           {part.name ?? part.id ?? "unknown"}
         </strong>
         <span className="min-w-0 break-words text-right max-md:text-left">
@@ -466,32 +805,49 @@ function TranscriptPartView(props: {
   );
 }
 
-function ThinkingPartView(props: { value: unknown }) {
+function ThinkingPartView(props: {
+  timestamp?: number;
+  turn?: ConversationTurn;
+  value: unknown;
+}) {
   const [open, setOpen] = useState(false);
   const rendered = stringifyPartValue(props.value);
+  const offset = props.turn
+    ? formatMessageOffset(props.turn, props.timestamp)
+    : undefined;
+  const meta = [
+    typeof props.timestamp === "number"
+      ? formatMessageTimestamp(props.timestamp)
+      : undefined,
+    offset,
+  ].filter(isString);
 
   return (
     <details
-      className="border border-[#beaaff]/20 bg-white/[0.03] transition-colors hover:border-[#beaaff]/45 hover:bg-[rgba(190,170,255,0.06)]"
+      className="py-0.5 text-[0.84rem] leading-relaxed text-[#888]"
       onToggle={(event) => {
         if (event.currentTarget !== event.target) return;
         setOpen(event.currentTarget.open);
       }}
       open={open}
     >
-      <summary className="grid cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-3 px-3 py-2 font-mono text-[0.8rem] leading-tight text-[#888] hover:bg-[rgba(190,170,255,0.07)] max-md:grid-cols-1 max-md:gap-1">
-        <span className="uppercase text-[#b8b8b8]">thinking</span>
+      <summary className="grid cursor-pointer list-none grid-cols-[auto_minmax(0,1fr)_auto] items-baseline gap-3 transition-colors hover:text-[#b8b8b8] max-md:grid-cols-1 max-md:gap-1 [&::-webkit-details-marker]:hidden">
+        <span className="font-mono text-[0.78rem] not-italic text-[#777]">
+          thought
+        </span>
         {open ? null : (
-          <span className="min-w-0 truncate">
+          <span className="min-w-0 truncate italic">
             {previewToolValue(props.value)}
           </span>
         )}
+        {meta.length ? (
+          <span className="min-w-0 break-words text-right font-mono text-[0.78rem] not-italic text-[#777] max-md:text-left">
+            {meta.join(" · ")}
+          </span>
+        ) : null}
       </summary>
-      <div className="border-t border-[#beaaff]/15 px-3 py-3">
-        <HighlightedCode
-          code={rendered || "{}"}
-          language={detectOutputLanguage(rendered)}
-        />
+      <div className="min-w-0 whitespace-pre-wrap break-words py-1 italic text-[#9a9a9a]">
+        {rendered || "{}"}
       </div>
     </details>
   );