@sentry/junior-dashboard 0.61.0 → 0.63.0

package/src/client/format.ts

@@ -8,9 +8,12 @@ import type {
   RequesterIdentity,
   Session,
   SessionFilter,
+  TranscriptMessage,
+  TranscriptPart,
   TurnUsage,
   VisualStatus,
 } from "./types";
+import { sameToolInvocation } from "./toolInvocations";
 
 let dashboardTimeZone = "America/Los_Angeles";
 
@@ -24,7 +27,7 @@ function displayTimeZone(): string {
 }
 
 function isActiveSession(session: Session): boolean {
-  return session.status === "active" || session.status === "running";
+  return session.status === "active";
 }
 
 /** Identify turn summaries that should appear in failed conversation filters. */
@@ -99,11 +102,22 @@ export function formatMs(value: number | undefined): string {
   if (ms < 1000) return `${ms}ms`;
   const seconds = ms / 1000;
   if (seconds < 60) return `${seconds.toFixed(seconds < 10 ? 1 : 0)}s`;
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = Math.round(seconds % 60);
+  const roundedSeconds = Math.round(seconds);
+  const minutes = Math.floor(roundedSeconds / 60);
+  const remainingSeconds = roundedSeconds % 60;
   return `${minutes}m ${remainingSeconds}s`;
 }
 
+/** Format chart duration ticks without long labels wrapping on the Y axis. */
+export function formatDurationTick(value: number | undefined): string {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "none";
+  const ms = Math.max(0, Math.floor(value));
+  if (Math.round(ms / 1000) >= 10 * 60) {
+    return `${Math.round(ms / (60 * 1000))}m`;
+  }
+  return formatMs(ms);
+}
+
 /** Format aggregate runtime across turn summaries when duration data exists. */
 export function formatDurationTotal(
   durations: Array<number | undefined>,
@@ -204,9 +218,22 @@ function transcriptSource(turn: ConversationTurn) {
     : (turn.transcriptMetadata ?? []);
 }
 
-function isConversationMessageRole(role: string): boolean {
+/** Normalized role category for transcript messages. */
+export type TranscriptRoleKind =
+  | "assistant"
+  | "other"
+  | "system"
+  | "tool"
+  | "user";
+
+/** Normalize a raw transcript role string to a canonical kind. */
+export function transcriptRoleKind(role: string): TranscriptRoleKind {
   const normalized = role.toLowerCase();
-  return normalized === "user" || normalized === "assistant";
+  if (normalized === "assistant") return "assistant";
+  if (normalized === "user") return "user";
+  if (normalized === "system") return "system";
+  if (normalized.includes("tool")) return "tool";
+  return "other";
 }
 
 function hasTextPart(
@@ -222,8 +249,9 @@ function hasTextPart(
 function isConversationMessage(
   message: Pick<ConversationTurn["transcript"][number], "parts" | "role">,
 ): boolean {
-  if (!isConversationMessageRole(message.role)) return false;
-  if (message.role.toLowerCase() === "assistant") return hasTextPart(message);
+  const kind = transcriptRoleKind(message.role);
+  if (kind !== "user" && kind !== "assistant") return false;
+  if (kind === "assistant") return hasTextPart(message);
   return message.parts.length > 0;
 }
 
@@ -236,66 +264,261 @@ export function turnMessageCount(turn: ConversationTurn): number {
   return turn.transcriptMessageCount ?? 0;
 }
 
-/** Count tool calls from visible transcripts or safe redacted metadata. */
-export function turnToolCallCount(turn: ConversationTurn): number {
-  return transcriptSource(turn).reduce((count, message) => {
-    return (
-      count + message.parts.filter((part) => part.type === "tool_call").length
-    );
-  }, 0);
+export type ToolCallSummaryItem = {
+  count: number;
+  name: string;
+  totalDurationMs?: number;
+};
+
+export type ToolCallSummary = {
+  items: ToolCallSummaryItem[];
+  total: number;
+};
+
+type PendingToolCall = {
+  id?: string;
+  name: string;
+  timestamp?: number;
+};
+
+function toolCallName(part: TranscriptPart): string {
+  return part.name ?? part.id ?? "unknown";
 }
 
-function totalUsageTokens(usage: TurnUsage | undefined): number | undefined {
-  if (!usage) return undefined;
-  return (
-    getUsageComponentTotal(usage) ?? getFiniteTokenCount(usage.totalTokens)
-  );
+function findPendingToolCallIndex(
+  calls: PendingToolCall[],
+  result: TranscriptPart,
+): number {
+  for (let index = calls.length - 1; index >= 0; index -= 1) {
+    if (sameToolInvocation(calls[index]!, result)) {
+      return index;
+    }
+  }
+  return -1;
+}
+
+/** Summarize tool calls and matched result durations from transcript metadata. */
+export function summarizeToolCalls(
+  turns: ConversationTurn[],
+  limit = 5,
+): ToolCallSummary {
+  const byName = new Map<string, ToolCallSummaryItem>();
+  let total = 0;
+
+  for (const turn of turns) {
+    const pending: PendingToolCall[] = [];
+    for (const message of transcriptSource(turn)) {
+      for (const part of message.parts) {
+        if (part.type === "tool_call") {
+          const name = toolCallName(part);
+          const item = byName.get(name) ?? { count: 0, name };
+          item.count += 1;
+          byName.set(name, item);
+          pending.push({
+            ...(part.id ? { id: part.id } : {}),
+            name,
+            ...(typeof message.timestamp === "number"
+              ? { timestamp: message.timestamp }
+              : {}),
+          });
+          total += 1;
+          continue;
+        }
+
+        if (part.type !== "tool_result") continue;
+        const pendingIndex = findPendingToolCallIndex(pending, part);
+        if (pendingIndex < 0) continue;
+        const [call] = pending.splice(pendingIndex, 1);
+        if (
+          !call ||
+          typeof call.timestamp !== "number" ||
+          typeof message.timestamp !== "number" ||
+          message.timestamp < call.timestamp
+        ) {
+          continue;
+        }
+        const item = byName.get(call.name);
+        if (!item) continue;
+        item.totalDurationMs =
+          (item.totalDurationMs ?? 0) + (message.timestamp - call.timestamp);
+      }
+    }
+  }
+
+  const items = [...byName.values()]
+    .sort(
+      (left, right) =>
+        right.count - left.count ||
+        (right.totalDurationMs ?? 0) - (left.totalDurationMs ?? 0) ||
+        left.name.localeCompare(right.name),
+    )
+    .slice(0, limit);
+
+  return { items, total };
 }
 
-/** Format known token counters without estimating per-message usage. */
-export function formatTokenTotal(usage: TurnUsage | undefined): string {
-  const total = totalUsageTokens(usage);
-  return total === undefined ? "" : `${formatNumber(total)} tokens`;
+export type MessageSummaryItem = {
+  author: string;
+  bytes: number;
+};
+
+export type MessageSummary = {
+  items: MessageSummaryItem[];
+  total: number;
+};
+
+function transcriptMessageAuthor(
+  turn: ConversationTurn,
+  message: TranscriptMessage,
+): 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 message.role || "Unknown";
+}
+
+function transcriptPartBytes(part: TranscriptPart): number {
+  if (typeof part.bytes === "number" && Number.isFinite(part.bytes)) {
+    return Math.max(0, Math.floor(part.bytes));
+  }
+  if (
+    typeof part.inputSizeBytes === "number" &&
+    Number.isFinite(part.inputSizeBytes)
+  ) {
+    return Math.max(0, Math.floor(part.inputSizeBytes));
+  }
+  if (
+    typeof part.outputSizeBytes === "number" &&
+    Number.isFinite(part.outputSizeBytes)
+  ) {
+    return Math.max(0, Math.floor(part.outputSizeBytes));
+  }
+  return new TextEncoder().encode(
+    stringifyPartValue(part.text ?? part.input ?? part.output ?? part),
+  ).byteLength;
+}
+
+/** Summarize conversational messages by author and serialized size. */
+export function summarizeMessages(turns: ConversationTurn[]): MessageSummary {
+  const items: MessageSummaryItem[] = [];
+
+  for (const turn of turns) {
+    for (const message of transcriptSource(turn)) {
+      if (!isConversationMessage(message)) continue;
+      items.push({
+        author: transcriptMessageAuthor(turn, message),
+        bytes: message.parts.reduce(
+          (sum, part) => sum + transcriptPartBytes(part),
+          0,
+        ),
+      });
+    }
+  }
+
+  return { items, total: items.length };
+}
+
+/** Format raw counts with the dashboard's compact number rules. */
+export function formatCompactNumber(value: number | undefined): string {
+  return formatNumber(value);
+}
+
+export type TokenUsageSummary = {
+  cachedInputTokens?: number;
+  cacheCreationTokens?: number;
+  inputTokens?: number;
+  outputTokens?: number;
+  providerTotalTokens?: number;
+  totalTokens: number;
+};
+
+function addOptionalCount(
+  left: number | undefined,
+  right: number | undefined,
+): number | undefined {
+  return right === undefined ? left : (left ?? 0) + right;
+}
+
+/** Summarize token usage without double-counting provider total fields. */
+export function summarizeUsage(
+  usages: Array<TurnUsage | undefined>,
+): TokenUsageSummary | undefined {
+  const summary: TokenUsageSummary = { totalTokens: 0 };
+
+  for (const usage of usages) {
+    if (!usage) continue;
+
+    const componentTotal = getUsageComponentTotal(usage);
+    if (componentTotal !== undefined) {
+      summary.totalTokens += componentTotal;
+      summary.inputTokens = addOptionalCount(
+        summary.inputTokens,
+        getFiniteTokenCount(usage.inputTokens),
+      );
+      summary.outputTokens = addOptionalCount(
+        summary.outputTokens,
+        getFiniteTokenCount(usage.outputTokens),
+      );
+      summary.cachedInputTokens = addOptionalCount(
+        summary.cachedInputTokens,
+        getFiniteTokenCount(usage.cachedInputTokens),
+      );
+      summary.cacheCreationTokens = addOptionalCount(
+        summary.cacheCreationTokens,
+        getFiniteTokenCount(usage.cacheCreationTokens),
+      );
+      continue;
+    }
+
+    const providerTotal = getFiniteTokenCount(usage.totalTokens);
+    if (providerTotal !== undefined) {
+      summary.totalTokens += providerTotal;
+      summary.providerTotalTokens =
+        (summary.providerTotalTokens ?? 0) + providerTotal;
+    }
+  }
+
+  return summary.totalTokens > 0 ? summary : undefined;
+}
+
+/** Format a summarized token counter for compact metadata. */
+export function formatTokenSummary(
+  summary: TokenUsageSummary | undefined,
+): string {
+  return summary ? `${formatNumber(summary.totalTokens)} tokens` : "";
 }
 
 /** Format the aggregate token count across conversation turns. */
 export function formatUsageTotal(usages: Array<TurnUsage | undefined>): string {
-  const total = usages.reduce<number | undefined>((sum, usage) => {
-    const tokens = totalUsageTokens(usage);
-    if (tokens === undefined) return sum;
-    return (sum ?? 0) + tokens;
-  }, undefined);
-  return total === undefined ? "" : `${formatNumber(total)} tokens`;
-}
-
-/** Format known token counters with available input/output detail. */
-export function formatUsage(usage: TurnUsage | undefined): string {
-  const total = totalUsageTokens(usage);
-  if (total === undefined) return "";
-  const pieces = [
-    usage?.inputTokens !== undefined
-      ? `${formatNumber(usage.inputTokens)} in`
-      : undefined,
-    usage?.outputTokens !== undefined
-      ? `${formatNumber(usage.outputTokens)} out`
-      : undefined,
-    usage?.cachedInputTokens !== undefined
-      ? `${formatNumber(usage.cachedInputTokens)} cached`
-      : undefined,
-    usage?.cacheCreationTokens !== undefined
-      ? `${formatNumber(usage.cacheCreationTokens)} cache-write`
-      : undefined,
-  ].filter(Boolean);
-  return pieces.length > 0
-    ? `${formatNumber(total)} tokens (${pieces.join(" / ")})`
-    : `${formatNumber(total)} tokens`;
+  return formatTokenSummary(summarizeUsage(usages));
+}
+
+/** Keep turn duration displays aligned on elapsed transcript time. */
+export function turnElapsedDurationMs(
+  turn: Pick<ConversationTurn, "completedAt" | "lastSeenAt" | "startedAt">,
+): number | undefined {
+  const start = parseTime(turn.startedAt);
+  const end = parseTime(turn.completedAt ?? turn.lastSeenAt);
+  if (start == null || end == null || end < start) return undefined;
+  return Math.max(0, end - start);
+}
+
+/** Format elapsed turn time for chart dots and transcript metadata. */
+export function formatTurnDuration(
+  turn: Pick<ConversationTurn, "completedAt" | "lastSeenAt" | "startedAt">,
+): string {
+  return formatMs(turnElapsedDurationMs(turn));
 }
 
 /** Format a conversation span from first turn start to latest activity. */
 export function formatConversationDuration(conversation: Conversation): string {
   const start = parseTime(conversation.startedAt);
-  const end = parseTime(conversation.lastSeenAt) ?? Date.now();
-  if (start == null || end < start) return "none";
+  const end = parseTime(conversation.lastSeenAt);
+  if (start == null || end == null || end < start) return "none";
   const seconds = Math.max(1, Math.round((end - start) / 1000));
   if (seconds < 60) return `${seconds}s`;
   const minutes = Math.round(seconds / 60);
@@ -305,7 +528,7 @@ export function formatConversationDuration(conversation: Conversation): string {
 
 /** Resolve the owning conversation id for a turn/session summary. */
 export function conversationIdForSession(session: Session): string {
-  return session.conversationId || session.id;
+  return session.conversationId;
 }
 
 function compareTimeDesc(a: string | undefined, b: string | undefined): number {
@@ -316,7 +539,27 @@ function compareTimeAsc(a: string | undefined, b: string | undefined): number {
   return (parseTime(a) ?? 0) - (parseTime(b) ?? 0);
 }
 
+function isGenericTurnTitle(title: string, conversationId: string): boolean {
+  const normalized = title.trim();
+  return (
+    normalized.length === 0 ||
+    normalized === conversationId ||
+    /^Turn\s+\S+$/i.test(normalized) ||
+    /^Awaiting\s+\w+\s+resume$/i.test(normalized)
+  );
+}
+
+function meaningfulConversationTitle(
+  conversation: Conversation,
+): string | undefined {
+  return isGenericTurnTitle(conversation.title, conversation.id)
+    ? undefined
+    : conversation.title;
+}
+
 function getConversationTitle(conversation: Conversation): string {
+  const title = meaningfulConversationTitle(conversation);
+  if (title) return title;
   if (conversation.surface === "slack") {
     return (
       slackLocationLabel(conversation, { includeId: false }) ??
@@ -337,15 +580,18 @@ export function conversationDisplayTitle(
 /** Prefer stable requester identifiers while keeping Slack ids as a last resort. */
 export function requesterLabel(
   requester: RequesterIdentity | undefined,
-  fallback: string | undefined,
 ): string | undefined {
-  return (
-    requester?.email ??
-    requester?.slackUserName ??
-    requester?.fullName ??
-    fallback ??
-    requester?.slackUserId
-  );
+  const email = requester?.email?.trim() || undefined;
+  const fullName = requester?.fullName?.trim() || undefined;
+  const slackUserName = requester?.slackUserName?.trim() || undefined;
+  return email ?? fullName ?? slackUserName ?? requester?.slackUserId;
+}
+
+/** Derive the conversation owner label from structured requester identity. */
+export function conversationRequesterLabel(
+  conversation: Conversation | undefined,
+): string | undefined {
+  return requesterLabel(conversation?.requesterIdentity);
 }
 
 /** Format the owner and permalink id line shared by conversation rows and headers. */
@@ -353,20 +599,15 @@ export function conversationIdentityMeta(
   conversation: Conversation | undefined,
   conversationId: string | undefined,
 ): string {
-  const id = conversationId ?? "missing conversation id";
-  const owner = requesterLabel(
-    conversation?.requesterIdentity,
-    conversation?.requester,
-  );
+  const id = conversationId ?? conversation?.id;
+  const owner = conversationRequesterLabel(conversation);
+  if (!id) return owner ?? "";
   return owner ? `${owner} · ${id}` : id;
 }
 
 /** Convert Slack channel ids and names into user-facing location labels. */
 export function slackLocationLabel(
-  input: Pick<
-    Session,
-    "channel" | "channelName" | "requester" | "requesterIdentity"
-  >,
+  input: Pick<Session, "channel" | "channelName">,
   options: { includeId?: boolean } = {},
 ): string | undefined {
   const channelId = input.channel;
@@ -465,6 +706,18 @@ export function detectLanguage(text: string): BundledLanguage {
   if (/^<[\s\S]+>$/.test(trimmed) && /<\/?[a-zA-Z][^>]*>/.test(trimmed)) {
     return "xml";
   }
+  // Mixed prose + block-level XML: detect when a complete open/close element pair
+  // appears on its own lines. Handles system prompts and runtime context blocks
+  // that start with plain text but contain structured XML sections.
+  const blockOpen = trimmed.match(
+    /(?:^|\n)[ \t]*<([A-Za-z_][\w:.-]*)(?:[ \t][^<>]*)?>[ \t]*(?=\n|$)/,
+  );
+  if (blockOpen?.[1]) {
+    const tag = blockOpen[1].replace(/[$()*+.?[\\^{|}]/g, "\\$&");
+    if (new RegExp(`(?:^|\\n)[ \\t]*</${tag}>[ \\t]*(?=\\n|$)`).test(trimmed)) {
+      return "xml";
+    }
+  }
   if (/```|^#{1,6}\s|\n[-*]\s|\n\d+\.\s|\[[^\]]+\]\([^)]+\)/m.test(trimmed)) {
     return "markdown";
   }
@@ -530,19 +783,29 @@ export function detectOutputLanguage(text: string): BundledLanguage {
 }
 
 /**
- * Decide whether a fenced block can use the interactive markup renderer.
- * Structured XML/HTML rendering is only enabled for explicitly-fenced blocks;
- * auto-detected prose is never eligible regardless of inferred language.
+ * Decide whether a block can use the interactive markup renderer.
+ * Only xml/html language blocks qualify; fenced is tracked as metadata but
+ * does not gate eligibility — caller controls whether XML detection runs.
  */
 export function canRenderStructuredMarkup(block: CodeBlock): boolean {
-  return (
-    block.fenced === true &&
-    (block.language === "xml" || block.language === "html")
-  );
+  return block.language === "xml" || block.language === "html";
 }
 
-/** Parse markdown into renderable code blocks while preserving plain text blocks. */
-export function parseMarkdownBlocks(text: string): CodeBlock[] {
+/**
+ * Parse markdown into renderable code blocks while preserving plain text blocks.
+ *
+ * `outputOnly` (default `false`): when `true`, prose sections use
+ * `detectOutputLanguage` (json or markdown only — no xml/html heuristics).
+ * Use `outputOnly: true` for LLM-generated text (assistant messages) to
+ * prevent Slack autolinks and HTML snippets from triggering the XML tree
+ * renderer. Leave `false` (default) for user/system messages that may
+ * contain genuine XML runtime context.
+ */
+export function parseMarkdownBlocks(
+  text: string,
+  opts: { outputOnly?: boolean } = {},
+): CodeBlock[] {
+  const detectProse = opts.outputOnly ? detectOutputLanguage : detectLanguage;
   const blocks: CodeBlock[] = [];
   const fence = /```([A-Za-z0-9_-]+)?\n([\s\S]*?)```/g;
   let cursor = 0;
@@ -550,8 +813,12 @@ export function parseMarkdownBlocks(text: string): CodeBlock[] {
   while ((match = fence.exec(text))) {
     const prose = text.slice(cursor, match.index).trim();
     if (prose) {
-      const language = detectOutputLanguage(prose);
-      blocks.push({ code: formatCodeBlock(prose, language), fenced: false, language });
+      const language = detectProse(prose);
+      blocks.push({
+        code: formatCodeBlock(prose, language),
+        fenced: false,
+        language,
+      });
     }
     const language = normalizeLanguage(match[1]);
     blocks.push({
@@ -563,11 +830,15 @@ export function parseMarkdownBlocks(text: string): CodeBlock[] {
   }
   const rest = text.slice(cursor).trim();
   if (rest) {
-    const language = detectOutputLanguage(rest);
-    blocks.push({ code: formatCodeBlock(rest, language), fenced: false, language });
+    const language = detectProse(rest);
+    blocks.push({
+      code: formatCodeBlock(rest, language),
+      fenced: false,
+      language,
+    });
   }
   if (blocks.length > 0) return blocks;
-  const language = detectOutputLanguage(text);
+  const language = detectProse(text);
   return [{ code: formatCodeBlock(text, language), fenced: false, language }];
 }
 
@@ -631,12 +902,10 @@ export function buildConversations(sessions: Session[]): Conversation[] {
       const sortedTurns = [...turns].sort((a, b) =>
         compareTimeAsc(a.startedAt, b.startedAt),
       );
-      const newest = [...turns].sort((a, b) =>
-        compareTimeDesc(
-          a.lastSeenAt ?? a.startedAt,
-          b.lastSeenAt ?? b.startedAt,
-        ),
-      )[0]!;
+      const recentTurns = [...turns].sort((a, b) =>
+        compareTimeDesc(a.lastSeenAt, b.lastSeenAt),
+      );
+      const newest = recentTurns[0]!;
       const oldest = sortedTurns.reduce((current, next) =>
         (parseTime(next.startedAt) ?? Number.MAX_SAFE_INTEGER) <
         (parseTime(current.startedAt) ?? Number.MAX_SAFE_INTEGER)
@@ -650,28 +919,25 @@ export function buildConversations(sessions: Session[]): Conversation[] {
           : sortedTurns.some(isFailedSession)
             ? "failed"
             : newest.status;
-      const requesterTurn =
-        sortedTurns.find((turn) => turn.requesterIdentity) ??
-        sortedTurns.find((turn) => turn.requester);
+      const requesterTurn = sortedTurns.find((turn) => turn.requesterIdentity);
+      const conversationTitle = recentTurns.find(
+        (turn) => turn.conversationTitle,
+      )?.conversationTitle;
 
       return {
         channel: newest.channel,
-        channelName: sortedTurns.find((turn) => turn.channelName)?.channelName,
-        conversationTitle: sortedTurns.find((turn) => turn.conversationTitle)
-          ?.conversationTitle,
+        channelName: recentTurns.find((turn) => turn.channelName)?.channelName,
+        conversationTitle,
         id,
+        lastProgressAt: newest.lastProgressAt,
         lastSeenAt: newest.lastSeenAt,
-        requester: requesterLabel(
-          requesterTurn?.requesterIdentity,
-          requesterTurn?.requester,
-        ),
         requesterIdentity: requesterTurn?.requesterIdentity,
         sentryConversationUrl: newest.sentryConversationUrl,
         sentryTraceUrl: newest.sentryTraceUrl,
         startedAt: oldest.startedAt,
         status,
         surface: newest.surface,
-        title: newest.title || id,
+        title: newest.title,
         traceId: newest.traceId,
         turns: sortedTurns,
       };