@sentry/junior-dashboard 0.62.0 → 0.64.0

package/src/client/components/Button.tsx

@@ -0,0 +1,75 @@
+import type { ButtonHTMLAttributes } from "react";
+
+import { cn } from "../styles";
+
+type ButtonSize = "default" | "icon";
+type ToggleButtonVariant = "pill" | "text";
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  size?: ButtonSize;
+};
+
+export type ToggleButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  pressed: boolean;
+  variant: ToggleButtonVariant;
+};
+
+/** Render the dashboard's standard bordered command button surface. */
+export function Button({
+  className,
+  size = "default",
+  type = "button",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        "border border-white/15 bg-[#0b0b0b] text-[#d6d6d6] transition-colors hover:border-white/30 hover:bg-[#151515] hover:text-white disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-white/15 disabled:hover:bg-[#0b0b0b] disabled:hover:text-[#d6d6d6]",
+        size === "icon"
+          ? "grid size-9 place-items-center p-0"
+          : "inline-flex h-9 max-w-full items-center gap-2 px-3 text-[0.82rem] font-semibold leading-none",
+        props.disabled ? "" : "cursor-pointer",
+        className,
+      )}
+      type={type}
+    />
+  );
+}
+
+/** Render a dashboard toggle button with a consistent pressed-state contract. */
+export function ToggleButton({
+  className,
+  pressed,
+  type = "button",
+  variant,
+  ...props
+}: ToggleButtonProps) {
+  return (
+    <button
+      {...props}
+      aria-pressed={pressed}
+      className={cn(
+        toggleButtonBase[variant],
+        pressed ? toggleButtonPressed[variant] : toggleButtonIdle[variant],
+        className,
+      )}
+      type={type}
+    />
+  );
+}
+
+const toggleButtonBase: Record<ToggleButtonVariant, string> = {
+  pill: "cursor-pointer border px-2 py-1 text-[0.78rem] font-semibold uppercase leading-tight transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#beaaff]/55",
+  text: "cursor-pointer border-0 bg-transparent px-1.5 py-1 uppercase tracking-normal underline-offset-4 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#beaaff]/55",
+};
+
+const toggleButtonPressed: Record<ToggleButtonVariant, string> = {
+  pill: "border-white/30 bg-white text-black",
+  text: "text-white underline decoration-white",
+};
+
+const toggleButtonIdle: Record<ToggleButtonVariant, string> = {
+  pill: "border-white/10 bg-[#0b0b0b] text-[#888] hover:border-white/25 hover:bg-[#151515] hover:text-white",
+  text: "text-[#888] hover:text-white",
+};

package/src/client/components/ConversationRowStats.tsx

@@ -16,10 +16,11 @@ export function ConversationRowStats(props: {
   const runtime = formatDurationTotal(
     props.conversation.turns.map((turn) => turn.cumulativeDurationMs),
   );
+  const turnCount = props.conversation.turns.length;
   const primaryStats = [
-    `${props.conversation.turns.length} turns`,
+    `${turnCount} ${turnCount === 1 ? "turn" : "turns"}`,
     tokens,
-    runtime ? `${runtime} runtime` : undefined,
+    runtime ? `${runtime} runtime` : "",
   ].filter(Boolean);
   const secondaryStats = [
     props.timeLabel,

package/src/client/components/FilterTabs.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../styles";
+import { ToggleButton } from "./Button";
 import type { SessionFilter } from "../types";
 
 /** Render conversation filters while keeping URL state owned by the page. */
@@ -14,21 +14,20 @@ export function FilterTabs(props: {
     "all",
   ];
   return (
-    <div className="flex flex-wrap items-center justify-end gap-1">
+    <div
+      aria-label="Conversation filter"
+      className="flex flex-wrap items-center justify-end gap-1"
+      role="group"
+    >
       {filters.map((filter) => (
-        <button
-          className={cn(
-            "cursor-pointer border px-2 py-1 text-[0.78rem] font-semibold uppercase leading-tight transition-colors",
-            props.current === filter
-              ? "border-white/30 bg-white text-black"
-              : "border-white/10 bg-[#0b0b0b] text-[#888] hover:border-white/25 hover:bg-[#151515] hover:text-white",
-          )}
+        <ToggleButton
           key={filter}
           onClick={() => props.onChange(filter)}
-          type="button"
+          pressed={props.current === filter}
+          variant="pill"
         >
           {filter}
-        </button>
+        </ToggleButton>
       ))}
     </div>
   );

package/src/client/components/LoadingView.tsx

@@ -1,14 +1,19 @@
 import { JuniorLogo } from "./JuniorLogo";
+import { dashboardRainbowProgressClass } from "../../dashboardLoader";
 
 /** Render the full-page loading treatment before the first dashboard payload lands. */
 export function LoadingView(props: { label: string }) {
   return (
-    <div className="grid min-h-[calc(100vh-5rem)] place-items-center px-4 py-8 md:px-8">
+    <div className="mx-auto grid min-h-[calc(100vh-5rem)] w-full max-w-screen-xl place-items-center px-4 py-8 md:px-8">
       <section className="grid w-full max-w-lg grid-cols-[auto_minmax(0,1fr)] items-center gap-3 border border-white/15 bg-[#0b0b0b] p-4">
         <JuniorLogo />
         <div>
           <div className="font-bold">{props.label}</div>
-          <div className="mt-3 h-1.5 w-full animate-pulse bg-white/20" />
+          <div
+            aria-label={props.label}
+            className={`${dashboardRainbowProgressClass} mt-3 h-1.5 w-full`}
+            role="progressbar"
+          />
         </div>
       </section>
     </div>

package/src/client/components/Metric.tsx

@@ -0,0 +1,159 @@
+import {
+  useId,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+import { cn } from "../styles";
+
+export type MetricTooltipLine = {
+  label?: string;
+  labelStyle?: "code";
+  value: string;
+};
+
+export type MetricListItem = {
+  content: ReactNode;
+  key: string;
+};
+
+type TooltipPosition = {
+  left: number;
+  top: number;
+  width: number;
+};
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+function tooltipPosition(
+  trigger: HTMLElement,
+  align: "left" | "right" | undefined,
+): TooltipPosition {
+  const margin = 16;
+  const viewportWidth = window.innerWidth;
+  const width = Math.min(320, Math.max(256, viewportWidth - margin * 2));
+  const rect = trigger.getBoundingClientRect();
+  const preferredLeft = align === "right" ? rect.right - width : rect.left;
+  return {
+    left: Math.round(
+      clamp(preferredLeft, margin, viewportWidth - width - margin),
+    ),
+    top: Math.round(rect.bottom + 8),
+    width,
+  };
+}
+
+/** Render compact metadata text with an optional styled hover/focus tooltip. */
+export function MetricValue(props: {
+  align?: "left" | "right";
+  children: ReactNode;
+  className?: string;
+  tooltip?: MetricTooltipLine[];
+}) {
+  const tooltipId = useId();
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const [position, setPosition] = useState<TooltipPosition | null>(null);
+  const tooltip = props.tooltip?.filter((line) => line.value.trim());
+  if (!tooltip?.length) {
+    return <span className={props.className}>{props.children}</span>;
+  }
+
+  const showTooltip = () => {
+    if (!triggerRef.current) return;
+    setPosition(tooltipPosition(triggerRef.current, props.align));
+  };
+  const hideTooltip = () => setPosition(null);
+  const tooltipStyle: CSSProperties | undefined = position
+    ? {
+        left: position.left,
+        top: position.top,
+        width: position.width,
+      }
+    : undefined;
+
+  return (
+    <span className={cn("relative inline-flex", props.className)}>
+      <span
+        aria-describedby={position ? tooltipId : undefined}
+        className="border-b border-dotted border-white/20 outline-none transition-colors hover:border-white/45 focus-visible:border-white/45"
+        onBlur={hideTooltip}
+        onFocus={showTooltip}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        ref={triggerRef}
+        tabIndex={0}
+      >
+        {props.children}
+      </span>
+      {position ? (
+        <span
+          className="pointer-events-none fixed z-30 border border-white/15 bg-[#050505] px-3 py-2 text-left text-[0.76rem] font-normal leading-relaxed text-[#b8b8b8] shadow-xl shadow-black/35"
+          id={tooltipId}
+          role="tooltip"
+          style={tooltipStyle}
+        >
+          <span className="grid max-h-72 grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1.5 overflow-y-auto">
+            {tooltip.map((line, index) => (
+              <span
+                className={
+                  line.label
+                    ? "contents"
+                    : "col-span-2 block min-w-0 break-words text-[#d6d6d6]"
+                }
+                key={`${index}-${line.label ?? ""}-${line.value}`}
+              >
+                {line.label ? (
+                  <span
+                    className={cn(
+                      "min-w-0 break-words font-medium text-[#888]",
+                      line.labelStyle === "code" &&
+                        "break-all font-mono text-[0.74rem] text-[#d6d6d6]",
+                    )}
+                  >
+                    {line.label}
+                  </span>
+                ) : null}
+                {line.label ? (
+                  <span className="whitespace-nowrap text-right text-[#d6d6d6]">
+                    {line.value}
+                  </span>
+                ) : (
+                  line.value
+                )}
+              </span>
+            ))}
+          </span>
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+/** Render inline metadata with consistent dot spacing across dashboard headers. */
+export function MetricList(props: {
+  className?: string;
+  items: MetricListItem[];
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-x-1.5 gap-y-1",
+        props.className,
+      )}
+    >
+      {props.items.map((item, index) => (
+        <span
+          className="inline-flex min-w-0 items-center gap-x-1.5"
+          key={item.key}
+        >
+          {index > 0 ? <span className="text-[#666]">·</span> : null}
+          <span className="min-w-0">{item.content}</span>
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/client/components/StatusBadge.tsx

@@ -4,9 +4,12 @@ import type { VisualStatus } from "../types";
 /** Render readable status text while keeping severity color restrained. */
 export function StatusBadge(props: {
   label?: string;
+  showCompleted?: boolean;
   status: VisualStatus | undefined;
 }) {
   const status = props.status ?? "idle";
+  if (status === "idle" && !props.showCompleted && !props.label) return null;
+
   return (
     <span
       className={cn(
@@ -23,11 +26,17 @@ export function StatusBadge(props: {
           status === "idle" && "bg-white/35",
         )}
       />
-      {props.label ?? status}
+      {props.label ?? statusLabel(status)}
     </span>
   );
 }
 
+function statusLabel(status: VisualStatus): string {
+  if (status === "failed") return "error";
+  if (status === "idle") return "completed";
+  return status;
+}
+
 function statusBadgeClass(status: VisualStatus): string {
   return cn(
     "border px-1.5 py-0.5 text-[0.68rem] font-bold uppercase leading-none",

package/src/client/components/TelemetryMetrics.tsx

@@ -0,0 +1,124 @@
+import {
+  formatCompactNumber,
+  formatMs,
+  formatTime,
+  formatTokenSummary,
+  type MessageSummary,
+  type TokenUsageSummary,
+  type ToolCallSummary,
+} from "../format";
+import { MetricValue, type MetricTooltipLine } from "./Metric";
+
+function plural(label: string, count: number): string {
+  return `${formatCompactNumber(count)} ${label}${count === 1 ? "" : "s"}`;
+}
+
+function isMetricTooltipLine(
+  line: MetricTooltipLine | undefined,
+): line is MetricTooltipLine {
+  return Boolean(line);
+}
+
+function tokenTooltip(summary: TokenUsageSummary): MetricTooltipLine[] {
+  const lines: Array<MetricTooltipLine | undefined> = [
+    summary.inputTokens !== undefined
+      ? { label: "input", value: formatCompactNumber(summary.inputTokens) }
+      : undefined,
+    summary.outputTokens !== undefined
+      ? { label: "output", value: formatCompactNumber(summary.outputTokens) }
+      : undefined,
+    summary.cachedInputTokens !== undefined
+      ? {
+          label: "cached",
+          value: formatCompactNumber(summary.cachedInputTokens),
+        }
+      : undefined,
+    summary.cacheCreationTokens !== undefined
+      ? {
+          label: "cache write",
+          value: formatCompactNumber(summary.cacheCreationTokens),
+        }
+      : undefined,
+    summary.providerTotalTokens !== undefined
+      ? {
+          label: "provider",
+          value: formatCompactNumber(summary.providerTotalTokens),
+        }
+      : undefined,
+  ];
+  return lines.filter(isMetricTooltipLine);
+}
+
+/** Render total token usage with a hoverable breakdown. */
+export function TokenMetric(props: {
+  align?: "left" | "right";
+  summary: TokenUsageSummary | undefined;
+}) {
+  if (!props.summary) return null;
+  return (
+    <MetricValue align={props.align} tooltip={tokenTooltip(props.summary)}>
+      {formatTokenSummary(props.summary)}
+    </MetricValue>
+  );
+}
+
+/** Render a duration value with start/end timestamps in the tooltip. */
+export function DurationMetric(props: {
+  align?: "left" | "right";
+  endedAt?: string;
+  label: string;
+  startedAt?: string;
+}) {
+  if (!props.label || props.label === "none") return null;
+  const lines: Array<MetricTooltipLine | undefined> = [
+    props.startedAt
+      ? { label: "started", value: formatTime(props.startedAt) }
+      : undefined,
+    props.endedAt
+      ? { label: "ended", value: formatTime(props.endedAt) }
+      : undefined,
+  ];
+  const tooltip = lines.filter(isMetricTooltipLine);
+  return (
+    <MetricValue align={props.align} tooltip={tooltip}>
+      {props.label}
+    </MetricValue>
+  );
+}
+
+/** Render a tool-call count with top tool names, counts, and matched duration. */
+export function ToolCallsMetric(props: {
+  align?: "left" | "right";
+  loading?: boolean;
+  summary: ToolCallSummary | undefined;
+}) {
+  if (props.loading) return <span>tool calls loading</span>;
+  if (!props.summary || props.summary.total <= 0) return null;
+  const tooltip = props.summary.items.map((item) => ({
+    label: item.name,
+    labelStyle: "code" as const,
+    value: [
+      plural("call", item.count),
+      item.totalDurationMs !== undefined
+        ? formatMs(item.totalDurationMs)
+        : undefined,
+    ]
+      .filter(Boolean)
+      .join(" · "),
+  }));
+  return (
+    <MetricValue align={props.align} tooltip={tooltip}>
+      {plural("tool call", props.summary.total)}
+    </MetricValue>
+  );
+}
+
+/** Render a conversational message count. */
+export function MessagesMetric(props: {
+  loading?: boolean;
+  summary: MessageSummary | undefined;
+}) {
+  if (props.loading) return <span>messages loading</span>;
+  if (!props.summary) return null;
+  return <MetricValue>{plural("message", props.summary.total)}</MetricValue>;
+}

package/src/client/components/ToolFrame.tsx

@@ -1,37 +1,80 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 
 import { cn } from "../styles";
+import {
+  TranscriptHeadingMeta,
+  TranscriptHeadingRow,
+} from "./TranscriptHeadingRow";
 
 /** Render the shared expandable/non-expandable frame for transcript tools. */
 export function ToolFrame(props: {
   children?: ReactNode;
+  expandable?: boolean;
   meta: string[];
+  mobileSummaryMeta?: string;
   raw?: boolean;
   signature: ReactNode;
 }) {
+  const [open, setOpen] = useState(false);
+  const metaText = props.meta.join(" · ");
+  const interactive = props.expandable ?? Boolean(props.children);
+  const mobileSummaryMeta =
+    props.mobileSummaryMeta && (!interactive || !open)
+      ? props.mobileSummaryMeta
+      : undefined;
   const header = (
-    <>
-      <span className="flex min-w-0 flex-wrap items-baseline gap-x-1 gap-y-0.5 overflow-hidden">
-        {props.signature}
-      </span>
-      <span className="min-w-0 break-words text-right text-[0.8rem] text-[#888] max-md:text-left">
-        {props.meta.join(" · ")}
-      </span>
-    </>
+    <TranscriptHeadingRow
+      left={
+        <>
+          {props.signature}
+          {mobileSummaryMeta ? (
+            <>
+              <span className="hidden text-[#777] max-md:inline">·</span>
+              <span className="hidden min-w-0 break-words text-[#888] max-md:inline">
+                {mobileSummaryMeta}
+              </span>
+            </>
+          ) : null}
+        </>
+      }
+      leftClassName="flex-wrap gap-x-1 gap-y-0.5"
+      right={
+        metaText ? (
+          <TranscriptHeadingMeta className="min-w-0 break-words text-[0.8rem] text-[#888]">
+            {metaText}
+          </TranscriptHeadingMeta>
+        ) : undefined
+      }
+      rightClassName="min-w-0 max-md:hidden"
+    />
   );
+  const mobileMeta =
+    metaText && props.children ? (
+      <div className="hidden min-w-0 break-words py-1 font-mono text-[0.78rem] leading-snug text-[#777] max-md:block">
+        {metaText}
+      </div>
+    ) : null;
 
-  if (props.raw) {
+  if (props.raw || !interactive) {
     return (
       <div className={toolFrameClass()}>
         <div className={toolHeaderClass(false)}>{header}</div>
+        {mobileMeta}
         {props.children}
       </div>
     );
   }
 
   return (
-    <details className={toolFrameClass()}>
+    <details
+      className={toolFrameClass()}
+      onToggle={(event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      }}
+    >
       <summary className={toolHeaderClass(true)}>{header}</summary>
+      {mobileMeta}
       {props.children}
     </details>
   );
@@ -39,14 +82,14 @@ export function ToolFrame(props: {
 
 /** Provide the shared transcript tool-frame shell for nonstandard part views. */
 export function toolFrameClass(): string {
-  return "border border-[#beaaff]/20 bg-[#111] transition-colors hover:border-[#beaaff]/45 hover:bg-[rgba(190,170,255,0.06)]";
+  return "min-w-0 max-w-full overflow-hidden";
 }
 
 function toolHeaderClass(interactive: boolean): string {
   return cn(
-    "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 px-3 py-2 font-mono text-[0.84rem] leading-tight text-[#b8b8b8] max-md:grid-cols-1 max-md:gap-1",
+    "block py-1.5 font-mono text-[0.82rem] leading-tight text-[#b8b8b8]",
     interactive
-      ? "cursor-pointer hover:bg-[rgba(190,170,255,0.07)]"
+      ? "cursor-pointer list-none transition-colors hover:text-white hover:[&_*]:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#beaaff]/55 focus-visible:text-white focus-visible:[&_*]:text-white [&::-webkit-details-marker]:hidden"
       : "cursor-default",
   );
 }

package/src/client/components/Transcript.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 
 import type { ConversationTurn } from "../types";
 import { TranscriptHeader } from "./TranscriptHeader";
@@ -7,7 +7,10 @@ import type { TranscriptViewMode } from "./transcriptRenderModel";
 import { transcriptEmptyClass } from "./transcriptStyles";
 
 /** Render ordered conversation turns as message, thinking, and tool-call events. */
-export function Transcript(props: { turns: ConversationTurn[] }) {
+export function Transcript(props: {
+  actions?: ReactNode;
+  turns: ConversationTurn[];
+}) {
   const [view, setView] = useState<TranscriptViewMode>("rich");
   const hasRedactedTurns = props.turns.some((turn) => turn.transcriptRedacted);
 
@@ -22,6 +25,7 @@ export function Transcript(props: { turns: ConversationTurn[] }) {
   return (
     <div className="grid min-w-0">
       <TranscriptHeader
+        actions={props.actions}
         redacted={hasRedactedTurns}
         value={view}
         onChange={setView}

package/src/client/components/TranscriptHeader.tsx

@@ -1,24 +1,26 @@
+import type { ReactNode } from "react";
+
+import { ToggleButton } from "./Button";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 /** Render transcript controls without coupling them to turn rendering. */
 export function TranscriptHeader(props: {
+  actions?: ReactNode;
   onChange(value: TranscriptViewMode): void;
   redacted: boolean;
   value: TranscriptViewMode;
 }) {
   return (
-    <div className="mb-1 flex min-w-0 items-start justify-between gap-3 border-b border-[#beaaff]/20 pb-3 leading-none max-md:flex-col">
-      <div className="min-w-0">
-        <div className="text-[0.78rem] font-semibold uppercase text-[#888]">
-          Transcript
+    <div className="mb-1 flex min-w-0 items-start justify-between gap-3 border-b border-[#beaaff]/20 pb-3 leading-none max-md:flex-col max-md:items-start">
+      {props.redacted ? (
+        <div className="min-w-0 break-words text-[0.88rem] leading-relaxed text-[#b8b8b8]">
+          Hidden because this conversation is not public.
         </div>
-        {props.redacted ? (
-          <div className="mt-2 break-words text-[0.88rem] leading-relaxed text-[#b8b8b8]">
-            Hidden because this conversation is not public.
-          </div>
-        ) : null}
+      ) : null}
+      <div className="ml-auto flex shrink-0 items-center gap-2 max-md:ml-0">
+        <TranscriptViewToggle value={props.value} onChange={props.onChange} />
+        {props.actions}
       </div>
-      <TranscriptViewToggle value={props.value} onChange={props.onChange} />
     </div>
   );
 }
@@ -30,22 +32,19 @@ function TranscriptViewToggle(props: {
   const options: TranscriptViewMode[] = ["rich", "raw"];
   return (
     <div
-      className="inline-flex items-center gap-1 text-[0.82rem] font-semibold text-[#888]"
       aria-label="Transcript view"
+      className="inline-flex items-center gap-1 text-[0.82rem] font-semibold text-[#888]"
+      role="group"
     >
       {options.map((option) => (
-        <button
-          className={`cursor-pointer border-0 bg-transparent px-1.5 py-1 uppercase tracking-normal underline-offset-4 ${
-            props.value === option
-              ? "text-white underline decoration-white"
-              : "text-[#888] hover:text-white"
-          }`}
+        <ToggleButton
           key={option}
           onClick={() => props.onChange(option)}
-          type="button"
+          pressed={props.value === option}
+          variant="text"
         >
           {option}
-        </button>
+        </ToggleButton>
       ))}
     </div>
   );