@sentry/junior-dashboard 0.279.0 → 0.281.0

package/src/client/conversations/ConversationLinkedWork.tsx

@@ -7,6 +7,11 @@ import type {
 
 import { ObjectIcon } from "../components/ObjectIcon";
 import { Collapsible } from "../components/ui/collapsible";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { WatchDetails, WatchDetailsRow } from "./ConversationWatches";
 import { DetailsList, DetailsRow, DetailsRowLine } from "./DetailsList";
 
@@ -88,7 +93,7 @@ export function conversationLinks(
  * Show the outside work that a Conversation links to, one row each. A row
  * that Junior also watches shows the Watch details under a chevron, so the
  * same resource does not show twice. When one row has a chevron, the other
- * rows keep the same space, so their statuses stay aligned.
+ * rows keep the same space, so all rows keep the same width.
  */
 export function ConversationLinkedWork(props: {
   links: ConversationLink[];
@@ -133,20 +138,35 @@ function ChevronSpace(props: { children: ReactNode }) {
 function LinkRow(props: { link: ConversationLink }) {
   const { link } = props;
   const status = linkStatusLabel(link.status);
+  const icon = (
+    <ObjectIcon
+      decorative
+      facts={link.facts}
+      objectType={link.objectType}
+      size={14}
+      status={link.status}
+    />
+  );
   return (
     <DetailsRow
       href={link.url}
       icon={
-        // The row text names the status, so the icon stays silent.
-        <ObjectIcon
-          decorative
-          facts={link.facts}
-          objectType={link.objectType}
-          size={14}
-          status={link.status}
-        />
+        // The icon shows the status, so the row does not repeat it in text.
+        status ? (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <span aria-label={status} className="inline-flex" role="img">
+                  {icon}
+                </span>
+              }
+            />
+            <TooltipContent size="compact">{status}</TooltipContent>
+          </Tooltip>
+        ) : (
+          icon
+        )
       }
-      meta={status}
       title={link.label}
       tooltip={[link.label, link.plugin, status, link.description]
         .filter(Boolean)

package/src/client/conversations/ConversationMeta.tsx

@@ -42,7 +42,10 @@ import {
   type SidebarAnnotation,
   type SidebarAnnotationBadgeGroup,
 } from "./sidebarAnnotationBadges";
-import { conversationLinks, linkStatusLabel } from "./ConversationLinkedWork";
+import {
+  linkStatusLabel,
+  type ConversationLink,
+} from "./ConversationLinkedWork";
 
 const MOBILE_MEDIA_QUERY = "(max-width: 767px)";
 
@@ -93,13 +96,6 @@ export function ConversationPrivacyChip(props: {
   );
 }
 
-/** True when the conversation has at least one resource-link annotation. */
-export function hasConversationAnnotations(
-  annotations: ConversationDetailReport["annotations"] | undefined,
-): boolean {
-  return Boolean(annotations?.some((annotation) => Boolean(annotation.url)));
-}
-
 /** Render plugin annotations as a newest-first stack in a conversation row. */
 export function ConversationSidebarAnnotations(props: {
   annotations: ConversationDetailReport["sidebarAnnotations"] | undefined;
@@ -401,13 +397,11 @@ function SidebarAnnotationIcon(props: {
 
 /** Render linked work as a compact strip under the conversation title. */
 export function ConversationAnnotations(props: {
-  detail: ConversationDetailReport | undefined;
+  links: readonly ConversationLink[];
 }) {
-  const links = conversationLinks(props.detail);
-  if (links.length === 0) return null;
   return (
     <div className="flex gap-x-4 gap-y-2 overflow-x-auto">
-      {links.map((link) => (
+      {props.links.map((link) => (
         <a
           className="inline-flex min-w-0 max-w-full shrink-0 items-center gap-2 rounded-md px-1 py-0.5 font-sans text-xs leading-snug text-dashboard-text no-underline transition-colors hover:text-dashboard-accent-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
           href={link.url}
@@ -489,11 +483,14 @@ export function liveModelId(
   return openTurns.size > 0 ? modelId : undefined;
 }
 
-/** True when runtime stats have content to show in details. */
-export function hasConversationStats(props: {
+type ConversationStatsProps = {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-}): boolean {
+  showUsageBreakdown?: boolean;
+};
+
+/** True when runtime stats have content to show in details. */
+export function hasConversationStats(props: ConversationStatsProps): boolean {
   return conversationStatItems(props).length > 0;
 }
 
@@ -506,10 +503,7 @@ type ConversationStatItem = {
 };
 
 /** Render runtime, source, token, and cost metadata as a labeled list. */
-export function ConversationStats(props: {
-  conversation: Conversation | undefined;
-  detail?: ConversationDetailReport;
-}) {
+export function ConversationStats(props: ConversationStatsProps) {
   const stats = conversationStatItems(props);
   if (stats.length === 0) return null;
   return (
@@ -582,10 +576,9 @@ export function conversationCost(
   );
 }
 
-function conversationStatItems(props: {
-  conversation: Conversation | undefined;
-  detail?: ConversationDetailReport;
-}): ConversationStatItem[] {
+function conversationStatItems(
+  props: ConversationStatsProps,
+): ConversationStatItem[] {
   if (!props.conversation) return [];
   const completeDetail = props.detail?.previousCursor
     ? undefined
@@ -602,9 +595,11 @@ function conversationStatItems(props: {
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
   const lastActivityAt = props.conversation.lastSeenAt;
   const location = conversationLocation(props.conversation, props.detail);
-  const cost = conversationCost(props.conversation, props.detail);
+  const cost = props.showUsageBreakdown
+    ? null
+    : conversationCost(props.conversation, props.detail);
   const rawStats: Array<ConversationStatItem | undefined> = [
-    // The desktop title bar shows the location and cost. Mobile hides that bar.
+    // The desktop title bar shows the location. Mobile hides that bar.
     location
       ? {
           content: location,
@@ -652,7 +647,7 @@ function conversationStatItems(props: {
           label: "Runtime",
         }
       : undefined,
-    tokenSummary
+    tokenSummary && !props.showUsageBreakdown
       ? {
           content: (
             <TokenMetric
@@ -679,7 +674,6 @@ function conversationStatItems(props: {
           content: cost,
           key: "cost",
           label: "Cost",
-          mobileOnly: true,
         }
       : undefined,
     childAgentTotals

package/src/client/conversations/ConversationOverflowMenu.tsx

@@ -1,5 +1,11 @@
 import { Ellipsis } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode, type Ref } from "react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from "react";
 
 import { HeaderIconButton } from "./ConversationHeaderActions";
 
@@ -9,11 +15,13 @@ import { HeaderIconButton } from "./ConversationHeaderActions";
  * menu before it acts.
  */
 export function ConversationOverflowMenu(props: {
-  buttonRef?: Ref<HTMLButtonElement>;
+  buttonRef?: RefObject<HTMLButtonElement | null>;
   children(close: () => void): ReactNode;
 }) {
   const [open, setOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
+  const localButtonRef = useRef<HTMLButtonElement>(null);
+  const buttonRef = props.buttonRef ?? localButtonRef;
 
   useEffect(() => {
     if (!open) return;
@@ -28,6 +36,9 @@ export function ConversationOverflowMenu(props: {
       if (event.key !== "Escape" || event.defaultPrevented) return;
       event.preventDefault();
       setOpen(false);
+      if (menuRef.current?.contains(document.activeElement)) {
+        buttonRef.current?.focus({ preventScroll: true });
+      }
     }
 
     document.addEventListener("pointerdown", closeOnOutsideClick);
@@ -36,12 +47,12 @@ export function ConversationOverflowMenu(props: {
       document.removeEventListener("pointerdown", closeOnOutsideClick);
       document.removeEventListener("keydown", closeOnEscape, true);
     };
-  }, [open]);
+  }, [buttonRef, open]);
 
   return (
     <div className="relative" ref={menuRef}>
       <HeaderIconButton
-        ref={props.buttonRef}
+        ref={buttonRef}
         label={open ? "Close conversation menu" : "Conversation menu"}
         onClick={() => setOpen((value) => !value)}
         pressed={open}