@sentry/junior-dashboard 0.279.0 → 0.280.0

package/src/client/conversations/ConversationHeader.tsx

@@ -3,6 +3,7 @@ import { Menu, PanelRight, ScrollText, X } from "lucide-react";
 
 import { SearchInput } from "../components/SearchInput";
 import { Button } from "../components/ui/button";
+import { Spinner } from "../components/ui/spinner";
 import { cn } from "../styles";
 import {
   MobileHeaderActionsPortal,
@@ -17,32 +18,29 @@ import {
   type ConversationPinAction,
 } from "./ConversationHeaderActions";
 import { ConversationOverflowMenu } from "./ConversationOverflowMenu";
-import { ShareConversationButton } from "./ShareConversationButton";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 /**
- * 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.
+ * Keep the conversation title and frequently used controls in the header.
+ * Run facts and the Brief live in Conversation details.
  */
 export function ConversationHeader(props: {
   /** Parent chain of a child Conversation. Root Conversations omit it. */
   agentTree?: ReactNode;
+  contextTags?: 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;
+  /** Estimated cost. Desktop only; mobile shows it in Conversation details. */
+  cost?: ReactNode;
   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. */
+  /** Linked work links below the title on mobile. */
   linkedWork?: ReactNode;
   live: boolean;
-  /** Where the conversation runs, such as a Slack channel. */
-  location?: ReactNode;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
   pin: ConversationPinAction;
@@ -121,16 +119,18 @@ export function ConversationHeader(props: {
     searchOpenVisible ||
     props.archive.error ||
     props.pin.error ||
+    Boolean(props.contextTags) ||
     Boolean(props.linkedWork) ||
     Boolean(props.forks) ||
     Boolean(props.agentTree);
 
   const liveIndicator = props.live ? (
-    <span
-      aria-label="Conversation is live"
-      className="inline-flex size-2 shrink-0 rounded-full bg-emerald-300"
-      title="Live"
-    />
+    <span className="inline-flex shrink-0" title="Working">
+      <Spinner
+        aria-label="Working"
+        className="size-3.5 text-dashboard-text-muted motion-safe:[animation-duration:1.25s]"
+      />
+    </span>
   ) : null;
 
   return (
@@ -166,28 +166,27 @@ export function ConversationHeader(props: {
           !showMobileHeader && "hidden md:block",
         )}
       >
-        <div className="hidden h-13 min-w-0 items-center justify-between gap-4 px-4 md:flex">
-          <div className="flex min-w-0 items-center gap-2">
+        <div className="hidden h-13 min-w-0 items-center justify-between gap-1.5 px-1 md:flex">
+          <div className="flex min-w-0 items-center gap-1.5">
             {props.sidebarToggle ? (
               <div className="shrink-0">{props.sidebarToggle}</div>
             ) : null}
-            {props.agentTree ? (
-              <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}
-            {props.agentTree || props.location ? (
-              <span aria-hidden="true" className="text-dashboard-text-faint">
-                ›
-              </span>
-            ) : null}
-            <h2 className="m-0 line-clamp-1 min-w-0 font-display text-base font-medium leading-tight tracking-tight">
+            <h2 className="m-0 min-w-0 truncate font-display text-base font-medium leading-6 tracking-tight">
               {props.title}
             </h2>
             {liveIndicator}
-            <span className="shrink-0">{props.privacy}</span>
+            {props.privacy ? (
+              <span className="shrink-0">{props.privacy}</span>
+            ) : null}
+            {props.agentTree ? (
+              <div className="min-w-0 max-w-1/3 shrink-[2] border-l border-dashboard-border-subtle pl-2 text-xs text-dashboard-text-muted [&_a]:text-dashboard-text-muted [&_a:hover]:text-dashboard-text">
+                {props.agentTree}
+              </div>
+            ) : props.contextTags ? (
+              <div className="flex h-6 min-w-0 max-w-[min(19rem,60%)] shrink-[2] items-center">
+                {props.contextTags}
+              </div>
+            ) : null}
           </div>
           <div className="flex shrink-0 items-center gap-0.5">
             {props.cost ? (
@@ -214,11 +213,6 @@ export function ConversationHeader(props: {
                 open={searchOpenVisible}
               />
             )}
-            <ShareConversationButton
-              key={props.conversationId}
-              conversationId={props.conversationId}
-              layout="icon"
-            />
             <ConversationOverflowMenu>
               {(close) => menuActions("desktop", close)}
             </ConversationOverflowMenu>
@@ -241,12 +235,12 @@ export function ConversationHeader(props: {
         {props.forks ? (
           <div className="px-4 py-2 md:hidden">{props.forks}</div>
         ) : null}
-        {props.linkedWork ? (
-          <div
-            aria-label="Linked work"
-            className="border-t border-dashboard-border-subtle px-4 py-2.5 md:hidden"
-          >
-            {props.linkedWork}
+        {props.contextTags || props.linkedWork ? (
+          <div className="grid min-w-0 gap-2 px-3 pb-2 pt-1.5 md:hidden">
+            {props.contextTags}
+            {props.linkedWork ? (
+              <div aria-label="Linked work">{props.linkedWork}</div>
+            ) : null}
           </div>
         ) : null}
         {searchOpenVisible ? (

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 
 import { Button, buttonVariants } from "../components/ui/button";
+import { Separator } from "../components/ui/separator";
 import {
   Tooltip,
   TooltipContent,
@@ -38,8 +39,8 @@ export type ConversationPinAction = {
 };
 
 /**
- * Show conversation actions in the `⋯` menu. On desktop the title bar shows
- * search, share, and details, so the menu leaves them out.
+ * Keep secondary conversation actions in the menu, with search and details
+ * available there on mobile too.
  */
 export function ConversationHeaderActions(props: {
   archive: ConversationArchiveAction;
@@ -56,9 +57,10 @@ export function ConversationHeaderActions(props: {
   view: TranscriptViewMode;
 }) {
   const mobile = props.placement === "mobile";
+  const eventLogOpen = props.view === "raw";
   return (
     <div className="grid gap-0.5">
-      {mobile && props.view === "rich" ? (
+      {mobile && !eventLogOpen ? (
         <MenuActionButton
           label={props.searchOpen ? "Hide search" : "Search transcript"}
           onClick={props.onSearchClick}
@@ -71,40 +73,30 @@ export function ConversationHeaderActions(props: {
           )}
         </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"
-        />
+        <MenuActionButton
+          label="Conversation details"
+          onClick={props.onDetailsClick}
+          pressed={props.detailsOpen}
+        >
+          <Info aria-hidden="true" size={16} strokeWidth={2} />
+        </MenuActionButton>
       ) : null}
+      <ShareConversationButton
+        key={props.conversationId}
+        conversationId={props.conversationId}
+      />
       {props.copyAction}
       <MenuActionButton
-        disabled={props.pin.disabled}
-        label={props.pin.pinned ? "Unpin" : "Pin"}
-        onClick={props.pin.onClick}
+        label={eventLogOpen ? "Back to conversation" : "Open event log"}
+        onClick={() => props.onViewChange(eventLogOpen ? "rich" : "raw")}
       >
-        {props.pin.pinned ? (
-          <PinOff aria-hidden="true" size={16} strokeWidth={2} />
+        {eventLogOpen ? (
+          <MessagesSquare aria-hidden="true" size={16} strokeWidth={2} />
         ) : (
-          <Pin aria-hidden="true" size={16} strokeWidth={2} />
+          <ScrollText aria-hidden="true" size={16} strokeWidth={2} />
         )}
       </MenuActionButton>
-      <ArchiveConversationButton {...props.archive} />
       {props.sentryConversationUrl ? (
         <a
           className={buttonVariants({ size: "menu" })}
@@ -116,15 +108,19 @@ export function ConversationHeaderActions(props: {
           Open in Sentry
         </a>
       ) : null}
-      {mobile ? (
-        <MenuActionButton
-          label="Conversation details"
-          onClick={props.onDetailsClick}
-          pressed={props.detailsOpen}
-        >
-          <Info aria-hidden="true" size={16} strokeWidth={2} />
-        </MenuActionButton>
-      ) : null}
+      <Separator className="my-1 bg-dashboard-border-subtle" />
+      <MenuActionButton
+        disabled={props.pin.disabled}
+        label={props.pin.pinned ? "Unpin" : "Pin"}
+        onClick={props.pin.onClick}
+      >
+        {props.pin.pinned ? (
+          <PinOff aria-hidden="true" size={16} strokeWidth={2} />
+        ) : (
+          <Pin aria-hidden="true" size={16} strokeWidth={2} />
+        )}
+      </MenuActionButton>
+      <ArchiveConversationButton {...props.archive} />
     </div>
   );
 }

package/src/client/conversations/ConversationHomeList.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Archive, ArchiveRestore } from "lucide-react";
-import { Link } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 
 import {
   conversationDisplayTitle,
@@ -20,7 +20,11 @@ import { ConversationSidebarAnnotations } from "./ConversationMeta";
 import { ConversationArchiveNotices } from "./ConversationArchiveNotices";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
-import { useArchiveConversation } from "./conversationArchive";
+import {
+  useArchiveConversation,
+  useLatestArchiveStatus,
+  type ArchivedFromConversationState,
+} from "./conversationArchive";
 import { DisplayText } from "../display-text/DisplayText";
 import {
   attentionConversationIds,
@@ -60,6 +64,7 @@ export function ConversationHomeList(props: {
     );
     setArchivedConversation(conversation);
   }, []);
+  useConversationPageArchiveResult(handleArchived, handleArchiveError);
   const notices = (
     <ConversationArchiveNotices
       archivedConversation={archivedConversation}
@@ -116,6 +121,39 @@ export function ConversationHomeList(props: {
   );
 }
 
+/**
+ * Report an archive started on the conversation page, which navigated home
+ * before the request finished.
+ */
+function useConversationPageArchiveResult(
+  onArchived: (conversation: Conversation) => void,
+  onArchiveError: (conversation: Conversation, wasArchiving: boolean) => void,
+) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const conversation = (location.state as ArchivedFromConversationState | null)
+    ?.archivedConversation;
+  const status = useLatestArchiveStatus(conversation?.id);
+  useEffect(() => {
+    if (!conversation || (status !== "success" && status !== "error")) return;
+    if (status === "success") onArchived(conversation);
+    else onArchiveError(conversation, true);
+    // Clear the state so a reload or a later restore does not report again.
+    navigate(
+      { hash: location.hash, search: location.search },
+      { replace: true, state: null },
+    );
+  }, [
+    conversation,
+    location.hash,
+    location.search,
+    navigate,
+    onArchiveError,
+    onArchived,
+    status,
+  ]);
+}
+
 /** Match the grouped card list while its first feed request is pending. */
 export function ConversationHomeListLoading(props: { label?: string }) {
   return (

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}

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}