@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/components/ui/tooltip.tsx

@@ -0,0 +1,168 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  createContext,
+  useContext,
+  useId,
+  useState,
+  useSyncExternalStore,
+  type ComponentProps,
+} from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Open dashboard tooltips at once and keep them open briefly for the pointer to reach them. */
+function TooltipProvider({
+  delay = 0,
+  closeDelay = 150,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      closeDelay={closeDelay}
+      {...props}
+    />
+  );
+}
+
+/** Link the open popup to its trigger. Base UI leaves this to the app. */
+const TooltipDescriptionContext = createContext<string | undefined>(undefined);
+
+/**
+ * Wide screens with a fine hover pointer show tooltips. On smaller or touch
+ * screens, a tooltip can cover the menu that its trigger opens.
+ */
+const TOOLTIP_MEDIA_QUERY =
+  "(min-width: 768px) and (hover: hover) and (pointer: fine)";
+
+function subscribeToTooltipMedia(onChange: () => void) {
+  const media = window.matchMedia(TOOLTIP_MEDIA_QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function tooltipMediaMatches() {
+  return window.matchMedia(TOOLTIP_MEDIA_QUERY).matches;
+}
+
+/** Own one tooltip's open state. It stays off where tooltips are not shown. */
+function Tooltip({
+  disabled,
+  onOpenChange,
+  open: openProp,
+  ...props
+}: TooltipPrimitive.Root.Props) {
+  const available = useSyncExternalStore(
+    subscribeToTooltipMedia,
+    tooltipMediaMatches,
+    () => false,
+  );
+  const id = useId();
+  const [openState, setOpenState] = useState(props.defaultOpen ?? false);
+  const open = available && (openProp ?? openState);
+  return (
+    <TooltipDescriptionContext.Provider value={open ? id : undefined}>
+      <TooltipPrimitive.Root
+        data-slot="tooltip"
+        disabled={disabled || !available}
+        onOpenChange={(next, details) => {
+          setOpenState(next);
+          onOpenChange?.(next, details);
+        }}
+        open={openProp}
+        {...props}
+      />
+    </TooltipDescriptionContext.Provider>
+  );
+}
+
+/**
+ * Show the tooltip on mouse hover or keyboard focus. Touch does not open it.
+ * A click keeps it open, so copy and share feedback stays visible.
+ */
+function TooltipTrigger({
+  closeOnClick = false,
+  ...props
+}: TooltipPrimitive.Trigger.Props) {
+  const describedBy = useContext(TooltipDescriptionContext);
+  return (
+    <TooltipPrimitive.Trigger
+      aria-describedby={describedBy}
+      closeOnClick={closeOnClick}
+      data-slot="tooltip-trigger"
+      {...props}
+    />
+  );
+}
+
+const tooltipContentVariants = cva(
+  "z-50 select-text rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised font-sans text-xs shadow-2xl shadow-black/70 outline-none",
+  {
+    variants: {
+      size: {
+        /** Selectable detail cards, such as chart buckets and metric breakdowns. */
+        default:
+          "min-w-36 max-w-lg px-3 py-2 leading-relaxed text-dashboard-text-muted",
+        /** One short label for an icon-only control. */
+        compact: "px-2.5 py-1.5 leading-none text-dashboard-text",
+      },
+    },
+    defaultVariants: { size: "default" },
+  },
+);
+
+/** Show tooltip text beside its trigger and keep it inside the viewport. */
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 10,
+  align = "center",
+  size,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "align" | "side" | "sideOffset"> &
+  VariantProps<typeof tooltipContentVariants>) {
+  const id = useContext(TooltipDescriptionContext);
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        collisionPadding={8}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50 data-anchor-hidden:invisible"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          id={id}
+          role="tooltip"
+          className={cn(tooltipContentVariants({ size }), className)}
+          {...props}
+        >
+          {children}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+/** Name what a detail tooltip describes, such as a chart bucket date. */
+function TooltipTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("mb-1 font-semibold text-dashboard-text-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipTitle,
+  TooltipProvider,
+  tooltipContentVariants,
+};

package/src/client/components/ui/trace.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { cn } from "@dashboard/lib/utils";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@dashboard/components/ui/collapsible";
+import { ChevronRightIcon } from "lucide-react";
+
+function TraceIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-icon"
+      aria-hidden="true"
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Keep one trace row and its details in one open state. */
+function TraceCollapsible({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof Collapsible>, "open"> &
+  (
+    | { open?: undefined }
+    | {
+        open: boolean;
+        onOpenChange: NonNullable<
+          React.ComponentProps<typeof Collapsible>["onOpenChange"]
+        >;
+      }
+  )) {
+  return (
+    <Collapsible
+      data-slot="trace-collapsible"
+      className={cn("flex w-full min-w-0 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/** Render the row button with a chevron that turns while open. */
+function TraceCollapsibleTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger>) {
+  return (
+    <CollapsibleTrigger
+      data-slot="trace-collapsible-trigger"
+      className={cn(
+        "group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-left text-dashboard-text-muted transition-colors outline-none hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus disabled:cursor-default disabled:hover:bg-transparent",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <TraceIcon className="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90 motion-reduce:transition-none">
+        <ChevronRightIcon className="size-3 text-dashboard-text-faint" />
+      </TraceIcon>
+    </CollapsibleTrigger>
+  );
+}
+
+/** Reveal row details in a card under the row title. */
+function TraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      data-slot="trace-collapsible-content"
+      className="h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none"
+      {...props}
+    >
+      <div
+        data-slot="trace-collapsible-content-inner"
+        className={cn(
+          "mt-1.5 ml-6 min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+export { TraceCollapsible, TraceCollapsibleTrigger, TraceCollapsibleContent };

package/src/client/conversations/ChatLayout.tsx

@@ -5,12 +5,14 @@ import { cn } from "../styles";
 /**
  * Own the conversation chat frame: one scroll region above one dock.
  *
- * Pages pass `scroll` and `dock` only. Do not invent footer padding, safe-area,
+ * Pages pass `header`, `scroll`, and `dock`. Do not invent footer padding, safe-area,
  * or shell height math outside this component and `ComposerDock`.
  */
 export function ChatLayout(props: {
   className?: string;
   dock?: ReactNode;
+  /** Keep conversation chrome outside the scrolling content. */
+  header?: ReactNode;
   /** When true, keep a taller minimum scroll region for long transcripts. */
   scrollMinTall?: boolean;
   scroll: ReactNode;
@@ -20,11 +22,13 @@ export function ChatLayout(props: {
   return (
     <div
       className={cn(
-        "grid h-full min-h-0 min-w-0 grid-rows-[minmax(0,1fr)_minmax(0,auto)]",
-        props.scrollMinTall && "grid-rows-[minmax(7rem,1fr)_minmax(0,auto)]",
+        "grid h-full min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)_minmax(0,auto)]",
+        props.scrollMinTall &&
+          "grid-rows-[auto_minmax(7rem,1fr)_minmax(0,auto)]",
         props.className,
       )}
     >
+      <div className="min-w-0">{props.header}</div>
       <div
         aria-label={props.scrollAriaLabel}
         className={cn(

package/src/client/conversations/ConversationBrief.tsx

@@ -4,7 +4,13 @@ import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
 import { Detail, DetailList } from "../components/DetailList";
 import { StatusChip, type StatusChipTone } from "../components/StatusChip";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
 import { formatTime } from "../format";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 import { MentionPeopleProvider, renderMentionText } from "./transcriptMentions";
 
 type ConversationBriefReport = NonNullable<ConversationDetailReport["brief"]>;
@@ -160,16 +166,21 @@ function BriefContentView(props: {
 
 function BriefSection(props: { children: ReactNode; title: string }) {
   return (
-    <details className="group min-w-0 border-t border-dashboard-border pt-3">
-      <summary className="flex cursor-pointer list-none items-center gap-2 text-sm font-medium text-dashboard-text [&::-webkit-details-marker]:hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus">
+    <Collapsible className="min-w-0 border-t border-dashboard-border pt-3">
+      <CollapsibleTrigger className="group flex w-full cursor-pointer items-center gap-2 text-left text-sm font-medium text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus">
         <ChevronRight
           aria-hidden="true"
-          className="size-3.5 shrink-0 text-dashboard-text-muted transition-transform group-open:rotate-90"
+          className={cn(
+            dashboardDisclosureChevronClass,
+            "text-dashboard-text-muted",
+          )}
         />
         {props.title}
-      </summary>
-      <div className="mt-3">{props.children}</div>
-    </details>
+      </CollapsibleTrigger>
+      <CollapsibleContent hiddenUntilFound>
+        <div className="mt-3">{props.children}</div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 

package/src/client/conversations/ConversationChildAgents.tsx

@@ -7,7 +7,6 @@ import {
   CircleDot,
   CirclePause,
   CircleX,
-  LoaderCircle,
   LockKeyhole,
   type LucideIcon,
 } from "lucide-react";
@@ -17,6 +16,7 @@ import {
 } from "@sentry/junior/api/schema";
 
 import type { StatusChipTone } from "../components/StatusChip";
+import { Spinner } from "../components/ui/spinner";
 import {
   formatConversationCostTotal,
   formatRuntime,
@@ -115,7 +115,6 @@ const statusIcons: Partial<Record<string, LucideIcon>> = {
   error: CircleX,
   failed: CircleX,
   paused: CirclePause,
-  running: LoaderCircle,
 };
 
 const statusIconToneClass: Record<StatusChipTone, string> = {
@@ -129,7 +128,10 @@ const statusIconToneClass: Record<StatusChipTone, string> = {
 
 /** Mark a child agent status with one icon and an audible label. */
 function ChildAgentStatusIcon(props: { status: string }) {
-  const Icon = statusIcons[props.status] ?? Circle;
+  const Icon =
+    props.status === "running"
+      ? Spinner
+      : (statusIcons[props.status] ?? Circle);
   return (
     <span className="mt-px grid size-4 shrink-0 place-items-center">
       <Icon
@@ -137,8 +139,6 @@ function ChildAgentStatusIcon(props: { status: string }) {
         className={cn(
           "size-3.5",
           statusIconToneClass[subagentStatusTone(props.status)],
-          props.status === "running" &&
-            "animate-spin motion-reduce:animate-none",
         )}
       />
       <span className="sr-only">{props.status}</span>

package/src/client/conversations/ConversationComposer.tsx

@@ -12,7 +12,12 @@ import {
 } from "react";
 import { ImagePlus, Send, Square } from "lucide-react";
 
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { useDashboardOnline } from "../connection";
 import { cn, dashboardComposerSurfaceClass } from "../styles";
 
@@ -447,16 +452,25 @@ export const ConversationComposer = memo(function ConversationComposer(
           )}
         >
           <div className="flex min-w-0 items-center gap-3">
-            <Button
-              aria-label="Attach images"
-              disabled={sendLocked || readingImages}
-              onClick={() => fileInputRef.current?.click()}
-              size="icon"
-              title="Attach images (up to 3 MB total)"
-              type="button"
-            >
-              <ImagePlus aria-hidden="true" size={16} />
-            </Button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    focusableWhenDisabled
+                    aria-label="Attach images"
+                    disabled={sendLocked || readingImages}
+                    onClick={() => fileInputRef.current?.click()}
+                    size="icon"
+                    type="button"
+                  >
+                    <ImagePlus aria-hidden="true" size={16} />
+                  </Button>
+                }
+              />
+              <TooltipContent size="compact">
+                Attach images (up to 3 MB total)
+              </TooltipContent>
+            </Tooltip>
             {props.footerStart}
             {props.footerStart ? null : (
               <div className="hidden min-w-0 font-sans text-xs leading-relaxed text-dashboard-text-muted md:block">
@@ -488,7 +502,7 @@ export const ConversationComposer = memo(function ConversationComposer(
                 readingImages
               }
               title={sendLocked ? "Sending message" : props.submitLabel}
-              tone="primary"
+              variant="primary"
               type="submit"
             >
               <Send aria-hidden="true" size={14} />