@sentry/junior-dashboard 0.62.0 → 0.64.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,7 +31,21 @@ import type {
 } from "../types";
 import { StatusBadge } from "./StatusBadge";
 import { ToolFrame, toolFrameClass } from "./ToolFrame";
+import {
+  TranscriptHeadingMeta,
+  TranscriptHeadingRow,
+  TranscriptThoughtLabel,
+} from "./TranscriptHeadingRow";
+import { MetricList, type MetricListItem } from "./Metric";
+import {
+  DurationMetric,
+  MessagesMetric,
+  TokenMetric,
+  ToolCallsMetric,
+} from "./TelemetryMetrics";
 import { TranscriptText } from "./TranscriptText";
+import { TranscriptThinkingView } from "./TranscriptThinkingView";
+import { TranscriptToolRun } from "./TranscriptToolRun";
 import { TranscriptToolView } from "./TranscriptToolView";
 import {
   countRenderedTranscriptChildren,
@@ -40,6 +61,11 @@ 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" }>;
+
 /** Render one conversation turn as actor messages and tool events. */
 export function TurnTranscript(props: {
   number: number;
@@ -87,10 +113,10 @@ function transcriptMessageClass(role: string): string {
   const kind = transcriptRoleKind(role);
 
   return cn(
-    "grid min-w-0 gap-2 border-l-4 py-2 pl-3",
+    "grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2 border-l-4 py-2 pl-3",
     kind === "assistant" &&
-      "border-l-violet-300 bg-[rgba(190,170,255,0.08)] pr-3 text-white",
-    kind === "user" && "border-l-white/70 bg-white/[0.04] pr-3 text-[#f4f4f4]",
+      "border-l-violet-300 bg-[rgba(190,170,255,0.14)] pr-3 text-white",
+    kind === "user" && "border-l-white/70 bg-white/[0.08] pr-3 text-[#f4f4f4]",
     kind === "system" &&
       "border-l-amber-300 bg-amber-300/[0.06] pr-3 text-[#f4f4f4]",
     kind === "tool" && "border-l-[#888] text-[#b8b8b8]",
@@ -102,7 +128,7 @@ function transcriptRoleClass(role: string): string {
   const kind = transcriptRoleKind(role);
 
   return cn(
-    "flex flex-wrap items-baseline gap-2 text-[0.88rem] leading-snug",
+    "text-[0.88rem] leading-snug",
     kind === "assistant" && "text-[#d8ccff]",
     kind === "user" && "text-white",
     kind === "system" && "text-amber-200",
@@ -139,6 +165,32 @@ function TranscriptMessageShell(props: {
   );
 }
 
+function TranscriptMessageHeader(props: {
+  meta?: Array<string | undefined>;
+  role: string;
+  turn: ConversationTurn;
+}) {
+  const metaText = props.meta?.filter(isString).join(" · ");
+
+  return (
+    <TranscriptHeadingRow
+      left={
+        <span className={transcriptRoleLabelClass(props.role)}>
+          {transcriptRoleLabel(props.role, props.turn)}
+        </span>
+      }
+      leftClassName={transcriptRoleClass(props.role)}
+      right={
+        metaText ? (
+          <TranscriptHeadingMeta className="text-[0.78rem] text-[#888]">
+            {metaText}
+          </TranscriptHeadingMeta>
+        ) : undefined
+      }
+    />
+  );
+}
+
 function TurnHeader(props: { number: number; turn: ConversationTurn }) {
   const status = visualStatusForSession(props.turn);
 
@@ -148,22 +200,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 +215,28 @@ function TurnEvents(props: {
   view: TranscriptViewMode;
 }) {
   return (
-    <div className="grid gap-3 pt-3">
+    <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] 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) => (
+            <TranscriptThinkingView
+              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 +245,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,28 +259,79 @@ function TurnEvents(props: {
   );
 }
 
+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(
+        <TranscriptToolRun
+          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 RedactedTranscriptView(props: { turn: ConversationTurn }) {
   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}
-            />
-          ),
+    <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}
+        />
       )}
-    </>
+    />
   );
 }
 
@@ -244,20 +346,12 @@ function RedactedMessageView(props: {
 
   return (
     <TranscriptMessageShell role={props.message.role}>
-      <div className={transcriptRoleClass(props.message.role)}>
-        <span className={transcriptRoleLabelClass(props.message.role)}>
-          {transcriptRoleLabel(props.message.role, props.turn)}
-        </span>
-        {meta.map((value, index) => (
-          <span
-            className="font-mono text-[0.78rem] text-[#888]"
-            key={`${index}-${value}`}
-          >
-            {value}
-          </span>
-        ))}
-      </div>
-      <div className="grid min-w-0 gap-1 font-mono text-[0.9rem] leading-snug text-[#b8b8b8]">
+      <TranscriptMessageHeader
+        meta={meta}
+        role={props.message.role}
+        turn={props.turn}
+      />
+      <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-1 font-mono text-[0.9rem] leading-snug text-[#b8b8b8]">
         {props.message.parts.map((part, index) => (
           <RedactedPartLine key={index} part={part} />
         ))}
@@ -297,6 +391,41 @@ 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);
+  const metaText = meta.join(" · ");
+
+  return (
+    <div className="py-1.5 text-[0.84rem] leading-relaxed text-[#888]">
+      <TranscriptHeadingRow
+        left={
+          <>
+            <TranscriptThoughtLabel />
+            <RedactedMarker />
+          </>
+        }
+        leftClassName="gap-3"
+        right={
+          metaText ? (
+            <TranscriptHeadingMeta className="text-[0.78rem] text-[#777]">
+              {metaText}
+            </TranscriptHeadingMeta>
+          ) : undefined
+        }
+      />
+    </div>
+  );
+}
+
 function RedactedToolView(props: {
   call?: TranscriptPart;
   result?: TranscriptPart;
@@ -316,22 +445,27 @@ 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);
+  const mobileSummaryMeta =
+    duration ?? (props.call && !props.result ? "missing result" : undefined);
 
   return (
     <ToolFrame
       meta={meta}
+      mobileSummaryMeta={mobileSummaryMeta}
       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 ? (
-            <code className="min-w-0 break-words font-[inherit] text-[#b8b8b8]">
+            <code className="min-w-0 break-words font-[inherit] text-[#b8b8b8] max-md:hidden">
               ({props.call.inputKeys.join(", ")})
             </code>
           ) : null}
@@ -347,16 +481,135 @@ 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-y-0")}
+      onToggle={(event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      }}
+      open={open}
+    >
+      <summary className="block min-h-6 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+        <TranscriptMessageHeader
+          meta={[formatBytes(byteCount)]}
+          role={role}
+          turn={props.turn}
+        />
+      </summary>
+      {props.view === "raw" ? (
+        <HighlightedCode
+          code={rawText || "{}"}
+          language={detectLanguage(rawText)}
+        />
+      ) : (
+        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] 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 +617,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);
@@ -383,24 +646,18 @@ function TranscriptMessageView(props: {
         event.preventDefault();
       }}
     >
-      <div className={transcriptRoleClass(props.message.role)}>
-        <span className={transcriptRoleLabelClass(props.message.role)}>
-          {transcriptRoleLabel(props.message.role, props.turn)}
-        </span>
-        <span className="font-mono text-[0.78rem] text-[#888]">
-          {formatMessageTimestamp(props.message.timestamp)}
-        </span>
-        {offset ? (
-          <span className="font-mono text-[0.78rem] text-[#888]">{offset}</span>
-        ) : null}
-      </div>
+      <TranscriptMessageHeader
+        meta={[formatMessageTimestamp(props.message.timestamp), offset]}
+        role={props.message.role}
+        turn={props.turn}
+      />
       {props.view === "raw" ? (
         <HighlightedCode
           code={rawText || "{}"}
           language={detectLanguage(rawText)}
         />
       ) : (
-        <div className="grid min-w-0 gap-2">
+        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2">
           {renderedParts.map((part, index) => {
             const firstChildIndex = seenRenderedChildren;
             seenRenderedChildren += countRenderedTranscriptChildren(part, role);
@@ -446,57 +703,36 @@ function TranscriptPartView(props: {
 
   const value = part.output;
   if (part.type === "thinking") {
-    return <ThinkingPartView value={value} />;
+    return <TranscriptThinkingView value={value} />;
   }
 
   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">
-        <span className="text-[#888]">{part.type}</span>
-        <strong className="min-w-0 break-words font-bold text-white">
-          {part.name ?? part.id ?? "unknown"}
-        </strong>
-        <span className="min-w-0 break-words text-right max-md:text-left">
-          {previewToolValue(value)}
-        </span>
+      <summary className="block cursor-pointer list-none py-1.5 font-mono text-[0.82rem] leading-tight text-[#b8b8b8] transition-colors hover:text-[#d6d6d6] [&::-webkit-details-marker]:hidden">
+        <TranscriptHeadingRow
+          left={
+            <>
+              <span className="text-[#888] max-md:hidden">{part.type}</span>
+              <strong className="min-w-0 break-words font-bold text-[#d6d6d6]">
+                {part.name ?? part.id ?? "unknown"}
+              </strong>
+            </>
+          }
+          leftClassName="gap-3"
+          right={
+            <span className="min-w-0 break-words text-right max-md:hidden">
+              {previewToolValue(value)}
+            </span>
+          }
+          rightClassName="min-w-0 max-md:hidden"
+        />
       </summary>
       <HighlightedCode code={rendered || "{}"} language="json" />
     </details>
   );
 }
 
-function ThinkingPartView(props: { value: unknown }) {
-  const [open, setOpen] = useState(false);
-  const rendered = stringifyPartValue(props.value);
-
-  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)]"
-      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>
-        {open ? null : (
-          <span className="min-w-0 truncate">
-            {previewToolValue(props.value)}
-          </span>
-        )}
-      </summary>
-      <div className="border-t border-[#beaaff]/15 px-3 py-3">
-        <HighlightedCode
-          code={rendered || "{}"}
-          language={detectOutputLanguage(rendered)}
-        />
-      </div>
-    </details>
-  );
-}
-
 function isString(value: string | undefined): value is string {
   return typeof value === "string" && value.length > 0;
 }