@sentry/junior-dashboard 0.274.0 → 0.276.0

package/src/client/conversations/ConversationHeader.tsx

@@ -1,13 +1,5 @@
-import {
-  cloneElement,
-  isValidElement,
-  useEffect,
-  useRef,
-  useState,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { Ellipsis, Menu } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Menu, PanelRight, ScrollText, X } from "lucide-react";
 
 import { SearchInput } from "../components/SearchInput";
 import { Button } from "../components/ui/button";
@@ -20,29 +12,41 @@ import {
 import {
   ConversationHeaderActions,
   HeaderIconButton,
-  TranscriptViewToggle,
+  TranscriptSearchToggle,
   type ConversationArchiveAction,
 } from "./ConversationHeaderActions";
+import { ConversationOverflowMenu } from "./ConversationOverflowMenu";
+import { ShareConversationButton } from "./ShareConversationButton";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
-/** Show the conversation title, search, and details. */
+/**
+ * Show the conversation title bar: where it runs, the title, its cost, and
+ * actions. Other run facts, linked work, and the Brief live in Conversation
+ * details.
+ */
 export function ConversationHeader(props: {
   /** Parent chain of a child Conversation. Root Conversations omit it. */
   agentTree?: ReactNode;
+  /** A `menu` layout copy action for the `⋯` menu. */
   copyAction?: ReactNode;
+  /** Estimated cost. Desktop only; mobile shows it in Conversation details. */
+  cost?: ReactNode;
   archive: ConversationArchiveAction;
   conversationId: string;
   detailsOpen: boolean;
   onDetailsClick(): void;
   /** Links to the fork source and to forks of this conversation. */
   forks?: ReactNode;
+  /** Mobile only. Desktop shows linked work in Conversation details. */
   linkedWork?: ReactNode;
   live: boolean;
-  meta?: ReactNode;
+  /** Where the conversation runs, such as a Slack channel. */
+  location?: ReactNode;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
   privacy: ReactNode;
   search: string;
+  sentryConversationUrl?: string;
   title: string;
   view: TranscriptViewMode;
 }) {
@@ -51,9 +55,7 @@ export function ConversationHeader(props: {
   const menuButtonRef = useRef<HTMLButtonElement>(null);
   const wasDetailsOpen = useRef(detailsOpen);
   const [searchOpen, setSearchOpen] = useState(false);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const mobileMenuRef = useRef<HTMLDivElement>(null);
   const searchOpenVisible =
     props.view === "rich" && (searchOpen || props.search.length > 0);
   const openMobileNavigation = useOpenMobileNavigation();
@@ -77,27 +79,6 @@ export function ConversationHeader(props: {
     searchInputRef.current?.focus();
   }, [searchOpenVisible]);
 
-  useEffect(() => {
-    if (!mobileMenuOpen) return;
-
-    function closeOnOutsideClick(event: PointerEvent) {
-      if (!mobileMenuRef.current?.contains(event.target as Node)) {
-        setMobileMenuOpen(false);
-      }
-    }
-
-    function closeOnEscape(event: KeyboardEvent) {
-      if (event.key === "Escape") setMobileMenuOpen(false);
-    }
-
-    document.addEventListener("pointerdown", closeOnOutsideClick);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsideClick);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [mobileMenuOpen]);
-
   const toggleSearch = () => {
     if (searchOpenVisible) {
       setSearchOpen(false);
@@ -107,64 +88,29 @@ export function ConversationHeader(props: {
     setSearchOpen(true);
   };
 
-  const menuCopyAction =
-    isValidElement(props.copyAction) &&
-    typeof props.copyAction.type !== "string"
-      ? cloneElement(
-          props.copyAction as ReactElement<{ layout?: "icon" | "menu" }>,
-          { layout: "menu" },
-        )
-      : props.copyAction;
-
-  const mobileOverflow = (
-    <div className="relative" ref={mobileMenuRef}>
-      <HeaderIconButton
-        ref={menuButtonRef}
-        label={mobileMenuOpen ? "Close conversation menu" : "Conversation menu"}
-        onClick={() => setMobileMenuOpen((open) => !open)}
-        pressed={mobileMenuOpen}
-      >
-        <Ellipsis aria-hidden="true" size={18} strokeWidth={2} />
-      </HeaderIconButton>
-      {mobileMenuOpen ? (
-        <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">
-          <ConversationHeaderActions
-            archive={props.archive}
-            conversationId={props.conversationId}
-            copyAction={menuCopyAction}
-            detailsOpen={detailsOpen}
-            layout="menu"
-            onDetailsClick={() => {
-              setMobileMenuOpen(false);
-              props.onDetailsClick();
-            }}
-            onSearchClick={() => {
-              setMobileMenuOpen(false);
-              toggleSearch();
-            }}
-            onViewChange={(value) => {
-              setMobileMenuOpen(false);
-              props.onViewChange(value);
-            }}
-            searchOpen={searchOpenVisible}
-            view={props.view}
-          />
-          {openMobileNavigation ? (
-            <Button
-              className="mt-0.5"
-              onClick={() => {
-                setMobileMenuOpen(false);
-                openMobileNavigation();
-              }}
-              size="menu"
-            >
-              <Menu aria-hidden="true" size={16} strokeWidth={2} />
-              App menu
-            </Button>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
+  const menuActions = (placement: "desktop" | "mobile", close: () => void) => (
+    <ConversationHeaderActions
+      archive={props.archive}
+      conversationId={props.conversationId}
+      copyAction={props.copyAction}
+      detailsOpen={detailsOpen}
+      onDetailsClick={() => {
+        close();
+        props.onDetailsClick();
+      }}
+      onSearchClick={() => {
+        close();
+        toggleSearch();
+      }}
+      onViewChange={(value) => {
+        close();
+        props.onViewChange(value);
+      }}
+      placement={placement}
+      searchOpen={searchOpenVisible}
+      sentryConversationUrl={props.sentryConversationUrl}
+      view={props.view}
+    />
   );
 
   const showMobileHeader =
@@ -184,48 +130,103 @@ export function ConversationHeader(props: {
 
   return (
     <>
-      <MobileHeaderActionsPortal>{mobileOverflow}</MobileHeaderActionsPortal>
+      <MobileHeaderActionsPortal>
+        <ConversationOverflowMenu buttonRef={menuButtonRef}>
+          {(close) => (
+            <>
+              {menuActions("mobile", close)}
+              {openMobileNavigation ? (
+                <Button
+                  className="mt-0.5"
+                  onClick={() => {
+                    close();
+                    openMobileNavigation();
+                  }}
+                  size="menu"
+                >
+                  <Menu aria-hidden="true" size={16} strokeWidth={2} />
+                  App menu
+                </Button>
+              ) : null}
+            </>
+          )}
+        </ConversationOverflowMenu>
+      </MobileHeaderActionsPortal>
       <MobileHeaderLivePortal>{liveIndicator}</MobileHeaderLivePortal>
+      {/* Desktop: above the event log's sticky toolbar, so the `⋯` menu
+          covers it. Mobile: below the app header, which holds the menu. */}
       <header
         className={cn(
-          "relative z-10 border-b border-dashboard-border bg-dashboard-bg",
+          "relative z-10 border-b md:z-30 border-dashboard-border bg-dashboard-bg",
           !showMobileHeader && "hidden md:block",
         )}
       >
-        <div className="hidden min-w-0 items-start justify-between gap-4 px-7 py-5 md:flex">
-          <div className="min-w-0">
+        <div className="hidden h-12 min-w-0 items-center justify-between gap-4 pl-7 pr-4 md:flex">
+          <div className="flex min-w-0 items-center gap-2">
             {props.agentTree ? (
-              <div className="mb-1.5 min-w-0">{props.agentTree}</div>
+              <div className="min-w-0 shrink-[2]">{props.agentTree}</div>
+            ) : props.location ? (
+              <span className="shrink-0 text-sm text-dashboard-text-muted">
+                {props.location}
+              </span>
             ) : null}
-            <div className="flex min-w-0 items-center gap-2">
-              <h2 className="m-0 line-clamp-1 min-w-0 font-display text-xl font-medium leading-tight tracking-tight">
-                {props.title}
-              </h2>
-              {liveIndicator}
-              <span className="shrink-0">{props.privacy}</span>
-            </div>
-            {props.meta ? (
-              <div className="mt-2 min-w-0 text-xs leading-snug text-dashboard-text-muted">
-                {props.meta}
-              </div>
+            {props.agentTree || props.location ? (
+              <span aria-hidden="true" className="text-dashboard-text-faint">
+                ›
+              </span>
             ) : null}
-            {props.forks ? (
-              <div className="mt-1.5 min-w-0">{props.forks}</div>
+            <h2 className="m-0 line-clamp-1 min-w-0 font-display text-base font-medium leading-tight tracking-tight">
+              {props.title}
+            </h2>
+            {liveIndicator}
+            <span className="shrink-0">{props.privacy}</span>
+          </div>
+          <div className="flex shrink-0 items-center gap-0.5">
+            {props.cost ? (
+              <span className="mr-2 text-xs tabular-nums text-dashboard-text-muted">
+                {props.cost}
+              </span>
             ) : null}
+            {props.view === "raw" ? (
+              // Event log is a debug view reached from the menu. Say which
+              // view this is, and give one click back.
+              <Button
+                aria-label="Close event log"
+                className="mr-1 h-8 px-2.5"
+                onClick={() => props.onViewChange("rich")}
+                variant="quiet"
+              >
+                <ScrollText aria-hidden="true" size={14} strokeWidth={2} />
+                Event log
+                <X aria-hidden="true" size={14} strokeWidth={2} />
+              </Button>
+            ) : (
+              <TranscriptSearchToggle
+                onClick={toggleSearch}
+                open={searchOpenVisible}
+              />
+            )}
+            <ShareConversationButton
+              key={props.conversationId}
+              conversationId={props.conversationId}
+              layout="icon"
+            />
+            <ConversationOverflowMenu>
+              {(close) => menuActions("desktop", close)}
+            </ConversationOverflowMenu>
+            <HeaderIconButton
+              ref={detailsButtonRef}
+              label="Conversation details"
+              onClick={props.onDetailsClick}
+              pressed={detailsOpen}
+            >
+              <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
+            </HeaderIconButton>
           </div>
-          <ConversationHeaderActions
-            archive={props.archive}
-            conversationId={props.conversationId}
-            copyAction={props.copyAction}
-            detailsOpen={detailsOpen}
-            detailsButtonRef={detailsButtonRef}
-            onDetailsClick={props.onDetailsClick}
-            onSearchClick={toggleSearch}
-            onViewChange={props.onViewChange}
-            searchOpen={searchOpenVisible}
-            view={props.view}
-          />
         </div>
+        {props.forks ? (
+          <div className="hidden px-7 pb-2.5 md:block">{props.forks}</div>
+        ) : null}
         {props.agentTree ? (
           <div className="px-4 py-2 md:hidden">{props.agentTree}</div>
         ) : null}
@@ -235,18 +236,11 @@ export function ConversationHeader(props: {
         {props.linkedWork ? (
           <div
             aria-label="Linked work"
-            className="border-t border-dashboard-border-subtle px-4 py-2.5 md:px-7"
+            className="border-t border-dashboard-border-subtle px-4 py-2.5 md:hidden"
           >
             {props.linkedWork}
           </div>
         ) : null}
-        <div className="hidden border-t border-dashboard-border-subtle px-7 md:flex">
-          <TranscriptViewToggle
-            labelled
-            onChange={props.onViewChange}
-            value={props.view}
-          />
-        </div>
         {searchOpenVisible ? (
           <div className="px-4 py-3 md:px-7">
             <SearchInput

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>
   );
 }