@sentry/junior-dashboard 0.273.0 → 0.275.0

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -3,14 +3,13 @@ import {
   Archive,
   ArchiveRestore,
   Info,
-  PanelRight,
   MessagesSquare,
   ScrollText,
   Search,
   X,
 } from "lucide-react";
 
-import { Button } from "../components/ui/button";
+import { Button, buttonVariants } from "../components/ui/button";
 import {
   Tooltip,
   TooltipContent,
@@ -29,59 +28,74 @@ export type ConversationArchiveAction = {
   pending: boolean;
 };
 
-/** Show conversation actions in the header or mobile menu. */
+/**
+ * Show conversation actions in the `⋯` menu. On desktop the title bar shows
+ * search, share, and details, so the menu leaves them out.
+ */
 export function ConversationHeaderActions(props: {
   archive: ConversationArchiveAction;
   conversationId: string;
   copyAction?: ReactNode;
   detailsOpen: boolean;
-  detailsButtonRef?: Ref<HTMLButtonElement>;
-  /** `bar` is the desktop icon row. `menu` stacks actions for mobile overflow. */
-  layout?: "bar" | "menu";
   onDetailsClick(): void;
   onSearchClick(): void;
   onViewChange(value: TranscriptViewMode): void;
+  placement: "desktop" | "mobile";
   searchOpen: boolean;
+  sentryConversationUrl?: string;
   view: TranscriptViewMode;
 }) {
-  const layout = props.layout ?? "bar";
-  if (layout === "menu") {
-    return (
-      <div className="grid gap-0.5">
-        {props.view === "rich" ? (
-          <MenuActionButton
-            label={props.searchOpen ? "Hide search" : "Search transcript"}
-            onClick={props.onSearchClick}
-            pressed={props.searchOpen}
-          >
-            {props.searchOpen ? (
-              <X aria-hidden="true" size={16} strokeWidth={2} />
-            ) : (
-              <Search aria-hidden="true" size={16} strokeWidth={2} />
-            )}
-          </MenuActionButton>
-        ) : null}
-        <MenuActionButton
-          label="Conversation"
-          onClick={() => props.onViewChange("rich")}
-          pressed={props.view === "rich"}
-        >
-          <MessagesSquare aria-hidden="true" size={16} strokeWidth={2} />
-        </MenuActionButton>
+  const mobile = props.placement === "mobile";
+  return (
+    <div className="grid gap-0.5">
+      {mobile && props.view === "rich" ? (
         <MenuActionButton
-          label="Event log"
-          onClick={() => props.onViewChange("raw")}
-          pressed={props.view === "raw"}
+          label={props.searchOpen ? "Hide search" : "Search transcript"}
+          onClick={props.onSearchClick}
+          pressed={props.searchOpen}
         >
-          <ScrollText aria-hidden="true" size={16} strokeWidth={2} />
+          {props.searchOpen ? (
+            <X aria-hidden="true" size={16} strokeWidth={2} />
+          ) : (
+            <Search aria-hidden="true" size={16} strokeWidth={2} />
+          )}
         </MenuActionButton>
+      ) : null}
+      <MenuActionButton
+        label="Conversation"
+        onClick={() => props.onViewChange("rich")}
+        pressed={props.view === "rich"}
+      >
+        <MessagesSquare aria-hidden="true" size={16} strokeWidth={2} />
+      </MenuActionButton>
+      <MenuActionButton
+        label="Event log"
+        onClick={() => props.onViewChange("raw")}
+        pressed={props.view === "raw"}
+      >
+        <ScrollText aria-hidden="true" size={16} strokeWidth={2} />
+      </MenuActionButton>
+      {mobile ? (
         <ShareConversationButton
           key={props.conversationId}
           conversationId={props.conversationId}
           layout="menu"
         />
-        {props.copyAction}
-        <ArchiveConversationButton {...props.archive} layout="menu" />
+      ) : null}
+      {props.copyAction}
+      <ArchiveConversationButton {...props.archive} />
+      {props.sentryConversationUrl ? (
+        <a
+          className={buttonVariants({ size: "menu" })}
+          href={props.sentryConversationUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <SentryGlyph />
+          Open in Sentry
+        </a>
+      ) : null}
+      {mobile ? (
         <MenuActionButton
           label="Conversation details"
           onClick={props.onDetailsClick}
@@ -89,57 +103,29 @@ export function ConversationHeaderActions(props: {
         >
           <Info aria-hidden="true" size={16} strokeWidth={2} />
         </MenuActionButton>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex shrink-0 items-center gap-0.5">
-      {props.view === "rich" ? (
-        <TranscriptSearchToggle
-          onClick={props.onSearchClick}
-          open={props.searchOpen}
-        />
       ) : null}
-      {props.copyAction}
-      <ArchiveConversationButton {...props.archive} layout="bar" />
-      <Button
-        ref={props.detailsButtonRef}
-        aria-label="Conversation details"
-        aria-pressed={props.detailsOpen}
-        className="ml-2"
-        onClick={props.onDetailsClick}
-      >
-        <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
-        Details
-      </Button>
     </div>
   );
 }
 
 /** Switch between the conversation and event log. */
 export function TranscriptViewToggle(props: {
-  labelled?: boolean;
   onChange(value: TranscriptViewMode): void;
   value: TranscriptViewMode;
 }) {
   return (
     <ToggleGroup
       aria-label="Transcript view"
-      className={
-        props.labelled
-          ? "inline-flex gap-6"
-          : "inline-flex gap-0.5 rounded-md border border-dashboard-border bg-dashboard-overlay-soft p-0.5"
-      }
+      className="inline-flex gap-0.5 rounded-md border border-dashboard-border bg-dashboard-overlay-soft p-0.5"
       onValueChange={([next]) => {
         if (next) props.onChange(next);
       }}
       value={[props.value]}
     >
-      <ViewModeItem label="Conversation" labelled={props.labelled} value="rich">
+      <ViewModeItem label="Conversation" value="rich">
         <MessagesSquare aria-hidden="true" size={14} strokeWidth={2} />
       </ViewModeItem>
-      <ViewModeItem label="Event log" labelled={props.labelled} value="raw">
+      <ViewModeItem label="Event log" value="raw">
         <ScrollText aria-hidden="true" size={14} strokeWidth={2} />
       </ViewModeItem>
     </ToggleGroup>
@@ -149,28 +135,21 @@ export function TranscriptViewToggle(props: {
 function ViewModeItem(props: {
   children: ReactNode;
   label: string;
-  labelled?: boolean;
   value: TranscriptViewMode;
 }) {
-  const item = (
-    <ToggleGroupItem
-      aria-label={props.label}
-      className={
-        props.labelled
-          ? "relative h-11 min-w-0 gap-2 rounded-none border-0 px-0 text-sm hover:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-pressed:border-0 data-pressed:bg-transparent data-pressed:after:bg-dashboard-text-solid"
-          : "size-7 min-w-0 border-0 px-0 data-pressed:border-0 data-pressed:bg-dashboard-fill-hover"
-      }
-      value={props.value}
-    >
-      {props.children}
-      {props.labelled ? props.label : null}
-    </ToggleGroupItem>
-  );
-  return props.labelled ? (
-    item
-  ) : (
+  return (
     <Tooltip>
-      <TooltipTrigger render={item} />
+      <TooltipTrigger
+        render={
+          <ToggleGroupItem
+            aria-label={props.label}
+            className="size-7 min-w-0 border-0 px-0 data-pressed:border-0 data-pressed:bg-dashboard-fill-hover"
+            value={props.value}
+          >
+            {props.children}
+          </ToggleGroupItem>
+        }
+      />
       <TooltipContent size="compact">{props.label}</TooltipContent>
     </Tooltip>
   );
@@ -183,9 +162,11 @@ export function HeaderIconButton(props: {
   label: string;
   onClick(): void;
   pressed?: boolean;
+  /** Hide the tooltip, such as while the menu this button opens covers it. */
+  tooltipDisabled?: boolean;
 }) {
   return (
-    <Tooltip>
+    <Tooltip disabled={props.tooltipDisabled}>
       <TooltipTrigger
         render={
           <Button
@@ -248,45 +229,36 @@ function MenuActionButton(props: {
   );
 }
 
-function ArchiveConversationButton(
-  props: ConversationArchiveAction & { layout: "bar" | "menu" },
-) {
+function ArchiveConversationButton(props: ConversationArchiveAction) {
   const label = props.pending
     ? "Saving archive state"
     : props.archived
       ? "Unarchive"
       : "Archive";
   const Icon = props.archived ? ArchiveRestore : Archive;
-  if (props.layout === "menu") {
-    return (
-      <Button
-        aria-label={label}
-        disabled={props.disabled}
-        onClick={props.onClick}
-        size="menu"
-      >
-        <Icon aria-hidden="true" size={16} strokeWidth={2} />
-        <span>{label}</span>
-      </Button>
-    );
-  }
   return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <Button
-            focusableWhenDisabled
-            aria-label={label}
-            className="hidden shrink-0 text-dashboard-text-muted md:grid"
-            disabled={props.disabled}
-            onClick={props.onClick}
-            size="icon"
-          >
-            <Icon aria-hidden="true" size={15} strokeWidth={2} />
-          </Button>
-        }
-      />
-      <TooltipContent size="compact">{label}</TooltipContent>
-    </Tooltip>
+    <Button
+      aria-label={label}
+      disabled={props.disabled}
+      onClick={props.onClick}
+      size="menu"
+    >
+      <Icon aria-hidden="true" size={16} strokeWidth={2} />
+      <span>{label}</span>
+    </Button>
+  );
+}
+
+/** Draw the Sentry glyph in the current text color, sized like a menu icon. */
+function SentryGlyph() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="size-4 shrink-0"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z" />
+    </svg>
   );
 }

package/src/client/conversations/ConversationMeta.tsx

@@ -10,7 +10,7 @@ import {
   LockKeyhole,
   TriangleAlert,
 } from "lucide-react";
-import { useSyncExternalStore } from "react";
+import { useSyncExternalStore, type ReactNode } from "react";
 import { Link } from "react-router";
 import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
@@ -30,7 +30,6 @@ import {
   TooltipTitle,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { MetricList, type MetricListItem } from "../components/Metric";
 import { cn, dashboardInlineLinkClass } from "../styles";
 import {
   CostMetric,
@@ -507,52 +506,64 @@ export function liveModelId(
   return openTurns.size > 0 ? modelId : undefined;
 }
 
-/** True when runtime stats have content for the requested presentation. */
+/** True when runtime stats have content to show in details. */
 export function hasConversationStats(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-  variant?: "compact" | "full";
 }): boolean {
   return conversationStatItems(props).length > 0;
 }
 
-type ConversationStatItem = MetricListItem & { label: string };
+type ConversationStatItem = {
+  content: ReactNode;
+  key: string;
+  label: string;
+  /** Shown below `md` only, where the title bar is hidden. */
+  mobileOnly?: boolean;
+};
 
-/**
- * Render runtime, source, token, and cost metadata. The compact variant is one
- * line under the conversation title. The full variant is a labeled list for
- * conversation details.
- */
+/** Render runtime, source, token, and cost metadata as a labeled list. */
 export function ConversationStats(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-  variant?: "compact" | "full";
 }) {
   const stats = conversationStatItems(props);
   if (stats.length === 0) return null;
+  return (
+    <dl className="m-0 grid min-w-0 gap-2 text-xs leading-snug">
+      {stats.map((item) => (
+        <div
+          className={cn(
+            "flex min-w-0 items-baseline justify-between gap-4",
+            item.mobileOnly && "md:hidden",
+          )}
+          key={item.key}
+        >
+          <dt className="shrink-0 text-dashboard-text-muted">{item.label}</dt>
+          <dd className="m-0 min-w-0 break-words text-right tabular-nums text-dashboard-text">
+            {item.content}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
 
-  if ((props.variant ?? "full") === "full") {
-    return (
-      <dl className="m-0 grid min-w-0 gap-2 text-xs leading-snug">
-        {stats.map((item) => (
-          <div
-            className="flex min-w-0 items-baseline justify-between gap-4"
-            key={item.key}
-          >
-            <dt className="shrink-0 text-dashboard-text-muted">{item.label}</dt>
-            <dd className="m-0 min-w-0 break-words text-right tabular-nums text-dashboard-text">
-              {item.content}
-            </dd>
-          </div>
-        ))}
-      </dl>
-    );
-  }
-
+/**
+ * Name where a conversation runs, linked when the source has a URL. Returns
+ * null without a location, so callers can drop the slot around it.
+ */
+export function conversationLocation(
+  conversation: Conversation | undefined,
+  detail: ConversationDetailReport | undefined,
+): ReactNode {
+  if (!conversation) return null;
+  const location = slackLocationLabel(conversation, { includeId: false });
+  if (!location) return null;
   return (
-    <MetricList
-      className="break-words text-xs leading-[1.45] text-dashboard-text-muted"
-      items={stats}
+    <LocationLink
+      label={location}
+      locationUrl={detail?.locationUrl ?? conversation.locationUrl}
     />
   );
 }
@@ -560,10 +571,8 @@ export function ConversationStats(props: {
 function conversationStatItems(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
-  variant?: "compact" | "full";
 }): ConversationStatItem[] {
   if (!props.conversation) return [];
-  const variant = props.variant ?? "full";
   const completeDetail = props.detail?.previousCursor
     ? undefined
     : props.detail;
@@ -572,11 +581,6 @@ function conversationStatItems(props: {
   const tokenSummary =
     summarizeModelUsage(props.detail?.modelUsage) ?? summarizeUsage(usage);
   const costSummary = summarizeCost(usage);
-  const location = slackLocationLabel(props.conversation, {
-    includeId: false,
-  });
-  const locationUrl =
-    props.detail?.locationUrl ?? props.conversation.locationUrl;
   const durationLabel = formatConversationDuration(props.conversation);
   const live = (props.detail?.status ?? props.conversation.status) === "active";
   const activeModelId = liveModelId(props.detail);
@@ -584,22 +588,25 @@ function conversationStatItems(props: {
   const childAgentTotals =
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
   const lastActivityAt = props.conversation.lastSeenAt;
+  const location = conversationLocation(props.conversation, props.detail);
   const rawStats: Array<ConversationStatItem | undefined> = [
+    // The desktop title bar shows the location. Mobile hides that bar.
     location
       ? {
-          content: <LocationLink label={location} locationUrl={locationUrl} />,
+          content: location,
           key: "location",
           label: "Location",
+          mobileOnly: true,
         }
       : undefined,
-    variant === "full" && sourceTask
+    sourceTask
       ? {
           content: <SourceTask sourceTask={sourceTask} />,
           key: "source-task",
           label: "Source",
         }
       : undefined,
-    variant === "full" && lastActivityAt
+    lastActivityAt
       ? {
           content: (
             <time
@@ -635,7 +642,6 @@ function conversationStatItems(props: {
       ? {
           content: (
             <TokenMetric
-              detailsHint={variant === "compact"}
               childAgentTotals={childAgentTotals}
               compactionCount={
                 completeDetail
@@ -661,7 +667,6 @@ function conversationStatItems(props: {
       ? {
           content: (
             <CostMetric
-              detailsHint={variant === "compact"}
               auxiliaryCosts={
                 props.detail?.auxiliaryCosts ??
                 props.conversation.auxiliaryCosts

package/src/client/conversations/ConversationOverflowMenu.tsx

@@ -0,0 +1,59 @@
+import { Ellipsis } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode, type Ref } from "react";
+
+import { HeaderIconButton } from "./ConversationHeaderActions";
+
+/**
+ * Show the conversation `⋯` button and its menu. The menu closes on an
+ * outside click or Escape. `children` gets `close` so an item can close the
+ * menu before it acts.
+ */
+export function ConversationOverflowMenu(props: {
+  buttonRef?: Ref<HTMLButtonElement>;
+  children(close: () => void): ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function closeOnOutsideClick(event: PointerEvent) {
+      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
+    }
+
+    // Capture runs before the details panel's document listener, and
+    // preventDefault tells it that this Escape is taken.
+    function closeOnEscape(event: KeyboardEvent) {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      setOpen(false);
+    }
+
+    document.addEventListener("pointerdown", closeOnOutsideClick);
+    document.addEventListener("keydown", closeOnEscape, true);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsideClick);
+      document.removeEventListener("keydown", closeOnEscape, true);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <HeaderIconButton
+        ref={props.buttonRef}
+        label={open ? "Close conversation menu" : "Conversation menu"}
+        onClick={() => setOpen((value) => !value)}
+        pressed={open}
+        tooltipDisabled={open}
+      >
+        <Ellipsis aria-hidden="true" size={18} strokeWidth={2} />
+      </HeaderIconButton>
+      {open ? (
+        <div className="absolute right-0 top-[calc(100%+0.35rem)] z-40 w-56 rounded-xl border border-dashboard-border-strong bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl">
+          {props.children(() => setOpen(false))}
+        </div>
+      ) : null}
+    </div>
+  );
+}