@sentry/junior-dashboard 0.62.0 → 0.64.0

package/src/client/markdownExport.ts

@@ -0,0 +1,360 @@
+import {
+  conversationDisplayTitle,
+  formatMs,
+  formatTurnDuration,
+  formatUsageTotal,
+  requesterLabel,
+  slackLocationLabel,
+  stringifyPartValue,
+  transcriptRoleKind,
+  unavailableTranscriptLabel,
+} from "./format";
+import {
+  groupTranscriptMessages,
+  messageRawText,
+} from "./components/transcriptRenderModel";
+import type {
+  Conversation,
+  ConversationDetailFeed,
+  ConversationTurn,
+  TranscriptMessage,
+  TranscriptPart,
+} from "./types";
+
+/** Build a clipboard Markdown transcript from the already-authorized dashboard report. */
+export function buildConversationMarkdown(
+  detail: ConversationDetailFeed,
+  conversation?: Conversation,
+): string {
+  const lines: string[] = [];
+  const firstTurn = detail.turns[0];
+
+  lines.push(`# ${headingText(conversationTitle(detail, conversation))}`, "");
+  addMetaLine(lines, "Conversation ID", inlineCode(detail.conversationId));
+  addMetaLine(lines, "Generated", detail.generatedAt);
+  addMetaLine(
+    lines,
+    "Requester",
+    conversationRequester(conversation, firstTurn),
+  );
+  addMetaLine(lines, "Location", conversationLocation(conversation, firstTurn));
+  addMetaLine(lines, "Turns", String(detail.turns.length));
+  addMetaLine(
+    lines,
+    "Sentry conversation",
+    conversation?.sentryConversationUrl ?? firstTurn?.sentryConversationUrl,
+  );
+
+  if (detail.turns.length === 0) {
+    lines.push("", "## Transcript", "", "No transcript is available.");
+    return finishMarkdown(lines);
+  }
+
+  detail.turns.forEach((turn, index) => {
+    lines.push("", `## ${turnHeading(turn, index)}`, "");
+    addMetaLine(lines, "Turn ID", inlineCode(turn.id));
+    addMetaLine(lines, "Status", inlineCode(turn.status));
+    addMetaLine(lines, "Started", turn.startedAt);
+    addMetaLine(lines, "Completed", turn.completedAt);
+    addMetaLine(lines, "Last seen", turn.lastSeenAt);
+    addMetaLine(lines, "Duration", formatTurnDuration(turn));
+    addMetaLine(lines, "Usage", formatUsageTotal([turn.cumulativeUsage]));
+    addMetaLine(
+      lines,
+      "Trace ID",
+      turn.traceId ? inlineCode(turn.traceId) : "",
+    );
+    addMetaLine(lines, "Sentry trace", turn.sentryTraceUrl);
+
+    appendTurnTranscript(lines, turn);
+  });
+
+  return finishMarkdown(lines);
+}
+
+function appendTurnTranscript(lines: string[], turn: ConversationTurn): void {
+  if (turn.transcriptAvailable) {
+    appendTranscriptMessages(lines, turn, turn.transcript, false);
+    return;
+  }
+
+  if (turn.transcriptRedacted && turn.transcriptMetadata?.length) {
+    lines.push(
+      "",
+      "Transcript hidden because this conversation is not public.",
+    );
+    appendTranscriptMessages(lines, turn, turn.transcriptMetadata, true);
+    return;
+  }
+
+  lines.push("", unavailableTranscriptLabel(turn));
+}
+
+function appendTranscriptMessages(
+  lines: string[],
+  turn: ConversationTurn,
+  messages: TranscriptMessage[],
+  redacted: boolean,
+): void {
+  for (const entry of groupTranscriptMessages(messages)) {
+    if (entry.kind === "message") {
+      appendMessage(lines, turn, entry.message, redacted);
+      continue;
+    }
+
+    if (entry.kind === "thinking") {
+      appendThinking(lines, turn, entry.part, entry.timestamp, redacted);
+      continue;
+    }
+
+    if (redacted) {
+      appendRedactedTool(
+        lines,
+        turn,
+        entry.call,
+        entry.result,
+        entry.timestamp,
+        entry.resultTimestamp,
+      );
+      continue;
+    }
+
+    appendTool(
+      lines,
+      turn,
+      entry.call,
+      entry.result,
+      entry.timestamp,
+      entry.resultTimestamp,
+    );
+  }
+}
+
+function appendMessage(
+  lines: string[],
+  turn: ConversationTurn,
+  message: TranscriptMessage,
+  redacted: boolean,
+): void {
+  lines.push("", `### ${messageRoleLabel(message, turn)}`);
+  addEventMeta(lines, turn, message.timestamp);
+
+  if (redacted) {
+    const redactedLines = message.parts.map(redactedPartLabel);
+    lines.push("", ...redactedLines.map((line) => `- ${line}`));
+    return;
+  }
+
+  const rawText = messageRawText(message);
+  lines.push("", rawText.trim().length ? rawText : "_No content._");
+}
+
+function appendThinking(
+  lines: string[],
+  turn: ConversationTurn,
+  part: TranscriptPart,
+  timestamp: number | undefined,
+  redacted: boolean,
+): void {
+  lines.push("", "### Thinking");
+  addEventMeta(lines, turn, timestamp);
+
+  if (redacted) {
+    lines.push("", `- ${redactedPartLabel(part)}`);
+    return;
+  }
+
+  lines.push("", fencedBlock(stringifyPartValue(part.output), "text"));
+}
+
+function appendTool(
+  lines: string[],
+  turn: ConversationTurn,
+  call: TranscriptPart | undefined,
+  result: TranscriptPart | undefined,
+  timestamp: number | undefined,
+  resultTimestamp: number | undefined,
+): void {
+  appendToolHeader(lines, turn, call, result, timestamp, resultTimestamp);
+  lines.push("", fencedBlock(stringifyPartValue({ call, result }), "json"));
+}
+
+function appendRedactedTool(
+  lines: string[],
+  turn: ConversationTurn,
+  call: TranscriptPart | undefined,
+  result: TranscriptPart | undefined,
+  timestamp: number | undefined,
+  resultTimestamp: number | undefined,
+): void {
+  appendToolHeader(lines, turn, call, result, timestamp, resultTimestamp);
+
+  const redactedLines = [call, result]
+    .filter((part): part is TranscriptPart => part !== undefined)
+    .map(redactedPartLabel);
+  lines.push("", ...redactedLines.map((line) => `- ${line}`));
+}
+
+function appendToolHeader(
+  lines: string[],
+  turn: ConversationTurn,
+  call: TranscriptPart | undefined,
+  result: TranscriptPart | undefined,
+  timestamp: number | undefined,
+  resultTimestamp: number | undefined,
+): void {
+  lines.push("", `### Tool: ${headingText(toolName(call, result))}`);
+  addEventMeta(lines, turn, timestamp);
+  addMetaLine(lines, "Result timestamp", eventTimestamp(resultTimestamp));
+  addMetaLine(lines, "Duration", toolDuration(timestamp, resultTimestamp));
+  if (!result) {
+    addMetaLine(lines, "Result", "missing");
+  }
+}
+
+function addEventMeta(
+  lines: string[],
+  turn: ConversationTurn,
+  timestamp: number | undefined,
+): void {
+  const meta = [eventTimestamp(timestamp), eventOffset(turn, timestamp)].filter(
+    isNonEmptyString,
+  );
+  if (meta.length) {
+    lines.push("", `_${meta.join(" - ")}_`);
+  }
+}
+
+function conversationTitle(
+  detail: ConversationDetailFeed,
+  conversation: Conversation | undefined,
+): string {
+  if (conversation) return conversationDisplayTitle(conversation);
+  const firstTurn = detail.turns[0];
+  return firstTurn?.conversationTitle ?? firstTurn?.title ?? "Conversation";
+}
+
+function conversationRequester(
+  conversation: Conversation | undefined,
+  turn: ConversationTurn | undefined,
+): string {
+  return (
+    requesterLabel(
+      conversation?.requesterIdentity ?? turn?.requesterIdentity,
+    ) ?? ""
+  );
+}
+
+function conversationLocation(
+  conversation: Conversation | undefined,
+  turn: ConversationTurn | undefined,
+): string {
+  if (conversation) return slackLocationLabel(conversation) ?? "";
+  return turn ? (slackLocationLabel(turn) ?? "") : "";
+}
+
+function turnHeading(turn: ConversationTurn, index: number): string {
+  const title = turn.title.trim();
+  const label = `Turn ${index + 1}`;
+  if (!title || title === turn.id || title === `Turn ${turn.id}`) return label;
+  return `${label}: ${headingText(title)}`;
+}
+
+function messageRoleLabel(
+  message: TranscriptMessage,
+  turn: ConversationTurn,
+): string {
+  const kind = transcriptRoleKind(message.role);
+  if (kind === "assistant") return "Junior";
+  if (kind === "user") return requesterLabel(turn.requesterIdentity) ?? "User";
+  if (kind === "system") return "System";
+  if (kind === "tool") return "Tool";
+  return headingText(message.role || "Unknown");
+}
+
+function redactedPartLabel(part: TranscriptPart): string {
+  const meta = [
+    part.type !== "text" ? part.type : "",
+    part.name ? `name: ${inlineCode(part.name)}` : "",
+    part.chars !== undefined ? `${part.chars} chars` : "",
+    part.bytes !== undefined ? `${part.bytes} bytes` : "",
+    part.inputType ? `input: ${part.inputType}` : "",
+    part.outputType ? `output: ${part.outputType}` : "",
+    part.inputKeys?.length ? `input keys: ${part.inputKeys.join(", ")}` : "",
+    part.outputKeys?.length ? `output keys: ${part.outputKeys.join(", ")}` : "",
+  ].filter(isNonEmptyString);
+  return ["<redacted>", ...meta].join(" - ");
+}
+
+function toolName(
+  call: TranscriptPart | undefined,
+  result: TranscriptPart | undefined,
+): string {
+  return call?.name ?? result?.name ?? call?.id ?? result?.id ?? "unknown";
+}
+
+function toolDuration(
+  timestamp: number | undefined,
+  resultTimestamp: number | undefined,
+): string {
+  if (
+    typeof timestamp !== "number" ||
+    typeof resultTimestamp !== "number" ||
+    !Number.isFinite(timestamp) ||
+    !Number.isFinite(resultTimestamp) ||
+    resultTimestamp < timestamp
+  ) {
+    return "";
+  }
+  return formatMs(resultTimestamp - timestamp);
+}
+
+function eventTimestamp(timestamp: number | undefined): string {
+  if (typeof timestamp !== "number" || !Number.isFinite(timestamp)) return "";
+  return new Date(timestamp).toISOString();
+}
+
+function eventOffset(
+  turn: ConversationTurn,
+  timestamp: number | undefined,
+): string {
+  if (typeof timestamp !== "number" || !Number.isFinite(timestamp)) return "";
+  const start = Date.parse(turn.startedAt);
+  if (!Number.isFinite(start) || timestamp < start) return "";
+  return `+${formatMs(timestamp - start)}`;
+}
+
+function addMetaLine(
+  lines: string[],
+  label: string,
+  value: string | undefined,
+): void {
+  if (!value) return;
+  lines.push(`- ${label}: ${value}`);
+}
+
+function headingText(value: string): string {
+  return value.replace(/\s+/g, " ").trim() || "Untitled";
+}
+
+function inlineCode(value: string): string {
+  const fence = value.includes("`") ? "``" : "`";
+  return `${fence}${value}${fence}`;
+}
+
+function fencedBlock(value: string, language: string): string {
+  const longestBacktickRun = [...value.matchAll(/`+/g)].reduce(
+    (longest, match) => Math.max(longest, match[0].length),
+    0,
+  );
+  const fence = "`".repeat(Math.max(3, longestBacktickRun + 1));
+  return `${fence}${language}\n${value}\n${fence}`;
+}
+
+function finishMarkdown(lines: string[]): string {
+  return `${lines.join("\n")}\n`;
+}
+
+function isNonEmptyString(value: string): boolean {
+  return value.length > 0;
+}

package/src/client/pages/CommandCenter.tsx

@@ -16,7 +16,7 @@ export function CommandCenter(props: {
   const conversations = buildConversations(sessions);
 
   return (
-    <div className="grid min-w-0 gap-4 px-4 py-4 md:px-8 lg:grid-cols-[minmax(21rem,0.32fr)_minmax(0,1fr)]">
+    <div className="mx-auto grid w-full min-w-0 max-w-screen-xl gap-4 px-4 py-4 md:px-8 lg:grid-cols-[minmax(21rem,0.32fr)_minmax(0,1fr)]">
       <CommandRail data={props.data} error={props.queryError} />
 
       <section className="min-w-0">

package/src/client/pages/ConversationPage.tsx

@@ -1,19 +1,31 @@
+import { useEffect, useState } from "react";
+import { Check, Copy } from "lucide-react";
 import { useParams } from "react-router";
 
 import { useConversationData } from "../api";
+import { buildConversationMarkdown } from "../markdownExport";
+import { Button } from "../components/Button";
 import { StatusBadge } from "../components/StatusBadge";
 import {
   buildConversations,
+  conversationIdentityMeta,
   conversationDisplayTitle,
   formatConversationDuration,
   formatRelativeTime,
   formatTime,
-  formatUsageTotal,
   slackLocationLabel,
-  turnMessageCount,
-  turnToolCallCount,
+  summarizeMessages,
+  summarizeToolCalls,
+  summarizeUsage,
   visualStatusForConversation,
 } from "../format";
+import { MetricList, type MetricListItem } from "../components/Metric";
+import {
+  DurationMetric,
+  MessagesMetric,
+  TokenMetric,
+  ToolCallsMetric,
+} from "../components/TelemetryMetrics";
 import { Transcript } from "../components/Transcript";
 import { TranscriptLoading } from "../components/TranscriptLoading";
 import type {
@@ -37,7 +49,7 @@ export function ConversationPage(props: { data?: DashboardData }) {
     : undefined;
 
   return (
-    <div className="min-w-0 px-4 py-5 md:px-8">
+    <div className="mx-auto w-full min-w-0 max-w-screen-xl px-4 py-5 md:px-8">
       <section className="min-w-0">
         <header className="mb-6 grid gap-3 border-l-4 border-[#beaaff]/70 pl-4 md:grid-cols-[minmax(0,1fr)_auto]">
           <div className="min-w-0">
@@ -54,11 +66,13 @@ export function ConversationPage(props: { data?: DashboardData }) {
               />
             </div>
           </div>
-          <div className="self-start break-words text-[0.82rem] leading-relaxed text-[#b8b8b8] md:text-right">
-            updated{" "}
-            {formatRelativeTime(
-              conversation?.lastSeenAt ?? detail.data?.generatedAt,
-            )}
+          <div className="flex min-w-0 flex-col items-start gap-2 self-start text-[0.82rem] leading-relaxed text-[#b8b8b8] md:items-end md:text-right">
+            <div className="break-words">
+              updated{" "}
+              {formatRelativeTime(
+                conversation?.lastSeenAt ?? detail.data?.generatedAt,
+              )}
+            </div>
           </div>
           <ConversationStats conversation={conversation} detail={detail.data} />
         </header>
@@ -70,26 +84,72 @@ export function ConversationPage(props: { data?: DashboardData }) {
             {detail.error.message}
           </div>
         ) : (
-          <Transcript turns={detail.data?.turns ?? []} />
+          <Transcript
+            actions={
+              <CopyMarkdownButton
+                conversation={conversation}
+                detail={detail.data}
+              />
+            }
+            turns={detail.data?.turns ?? []}
+          />
         )}
       </section>
     </div>
   );
 }
 
+function CopyMarkdownButton(props: {
+  conversation: Conversation | undefined;
+  detail: ConversationDetailFeed | undefined;
+}) {
+  const [status, setStatus] = useState<"copied" | "failed" | "idle">("idle");
+  const disabled = !props.detail;
+  const label =
+    status === "copied"
+      ? "Copied"
+      : status === "failed"
+        ? "Copy failed"
+        : "Copy as Markdown";
+  const Icon = status === "copied" ? Check : Copy;
+
+  useEffect(() => {
+    setStatus("idle");
+  }, [props.detail?.conversationId, props.detail?.generatedAt]);
+
+  async function copyMarkdown() {
+    if (!props.detail) return;
+
+    try {
+      await navigator.clipboard.writeText(
+        buildConversationMarkdown(props.detail, props.conversation),
+      );
+      setStatus("copied");
+    } catch {
+      setStatus("failed");
+    }
+  }
+
+  return (
+    <Button
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => void copyMarkdown()}
+      size="icon"
+      title={label}
+    >
+      <Icon aria-hidden="true" size={15} strokeWidth={2} />
+    </Button>
+  );
+}
+
 function ConversationIdentity(props: {
   conversation: Conversation | undefined;
   conversationId: string | undefined;
 }) {
-  const id = props.conversationId ?? "missing conversation id";
-  const owner =
-    props.conversation?.requesterIdentity?.email ??
-    props.conversation?.requester ??
-    props.conversation?.requesterIdentity?.slackUserName;
   return (
     <>
-      {owner ? `${owner} · ` : ""}
-      {id}
+      {conversationIdentityMeta(props.conversation, props.conversationId)}
       {props.conversation?.sentryConversationUrl ? (
         <>
           {" · "}
@@ -112,41 +172,78 @@ function ConversationStats(props: {
   detail?: ConversationDetailFeed;
 }) {
   if (!props.conversation) return null;
-  const messages = props.detail
-    ? props.detail.turns.reduce(
-        (count, turn) => count + turnMessageCount(turn),
-        0,
-      )
+  const messageSummary = props.detail
+    ? summarizeMessages(props.detail.turns)
     : undefined;
-  const toolCalls = props.detail
-    ? props.detail.turns.reduce(
-        (count, turn) => count + turnToolCallCount(turn),
-        0,
-      )
+  const toolSummary = props.detail
+    ? summarizeToolCalls(props.detail.turns)
     : undefined;
-  const tokens = formatUsageTotal(
+  const tokenSummary = summarizeUsage(
     (props.detail?.turns ?? props.conversation.turns).map(
       (turn) => turn.cumulativeUsage,
     ),
   );
-  const stats = [
-    slackLocationLabel(props.conversation, { includeId: false }),
-    `${props.conversation.turns.length} turns`,
-    messages === undefined ? "messages loading" : `${messages} messages`,
-    toolCalls === undefined ? "tool calls loading" : `${toolCalls} tool calls`,
-    tokens,
-    formatConversationDuration(props.conversation),
-    `started ${formatTime(props.conversation.startedAt)}`,
-  ].filter(Boolean);
+  const location = slackLocationLabel(props.conversation, {
+    includeId: false,
+  });
+  const durationLabel = formatConversationDuration(props.conversation);
+  const turnCount = props.conversation.turns.length;
+  const rawStats: Array<MetricListItem | undefined> = [
+    location
+      ? {
+          content: location,
+          key: "location",
+        }
+      : undefined,
+    {
+      content: `${turnCount} ${turnCount === 1 ? "turn" : "turns"}`,
+      key: "turns",
+    },
+    {
+      content: (
+        <MessagesMetric loading={!props.detail} summary={messageSummary} />
+      ),
+      key: "messages",
+    },
+    !props.detail || (toolSummary && toolSummary.total > 0)
+      ? {
+          content: (
+            <ToolCallsMetric loading={!props.detail} summary={toolSummary} />
+          ),
+          key: "tools",
+        }
+      : undefined,
+    tokenSummary
+      ? {
+          content: <TokenMetric summary={tokenSummary} />,
+          key: "tokens",
+        }
+      : undefined,
+    durationLabel !== "none"
+      ? {
+          content: (
+            <DurationMetric
+              endedAt={props.conversation.lastSeenAt}
+              label={durationLabel}
+              startedAt={props.conversation.startedAt}
+            />
+          ),
+          key: "duration",
+        }
+      : undefined,
+    {
+      content: `started ${formatTime(props.conversation.startedAt)}`,
+      key: "started",
+    },
+  ];
+  const stats = rawStats.filter(
+    (item): item is MetricListItem => item !== undefined,
+  );
 
   return (
-    <div className="col-span-full flex flex-wrap gap-x-3 gap-y-1 break-words text-[0.76rem] leading-[1.45] text-[#888]">
-      {stats.map((value, index) => (
-        <span key={`${index}-${value}`}>
-          {index > 0 ? <span className="mr-3 text-[#666]">·</span> : null}
-          {value}
-        </span>
-      ))}
-    </div>
+    <MetricList
+      className="col-span-full break-words text-[0.76rem] leading-[1.45] text-[#888]"
+      items={stats}
+    />
   );
 }

package/src/client/pages/ConversationsPage.tsx

@@ -33,7 +33,7 @@ export function ConversationsPage(props: { data?: DashboardData }) {
   }
 
   return (
-    <div className="min-w-0 px-4 py-4 md:px-8">
+    <div className="mx-auto w-full min-w-0 max-w-screen-xl px-4 py-4 md:px-8">
       <section className="min-w-0">
         <Section>
           <SectionHeader

package/src/client/toolInvocations.ts

@@ -0,0 +1,16 @@
+type ToolInvocationRef = {
+  id?: string;
+  name?: string;
+};
+
+/** Match tool call/result refs without inferring relationships from missing metadata. */
+export function sameToolInvocation(
+  left: ToolInvocationRef,
+  right: ToolInvocationRef,
+): boolean {
+  if (left.id || right.id) {
+    return Boolean(left.id && right.id && left.id === right.id);
+  }
+  if (left.name && right.name) return left.name === right.name;
+  return false;
+}