@sentry/junior-dashboard 0.263.0 → 0.265.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:hidden"
+      >
+        <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/components/ui/useSheet.ts

@@ -0,0 +1,74 @@
+import type { Dialog } from "@base-ui/react/dialog";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type RefObject,
+} from "react";
+
+import {
+  acquireBodyScrollLock,
+  releaseBodyScrollLock,
+} from "../../bodyScrollLock";
+
+// A resize can mount conversation details below an already open side drawer.
+// Document order keeps the front modal in charge across these separate roots.
+function subscribeToSheets(onChange: () => void) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
+/** Keep an app sheet mounted through dismissal and share the document scroll lock. */
+export function useSheet(
+  onClose: () => void,
+  initialFocusRef?: RefObject<HTMLElement | null>,
+) {
+  const [open, setOpen] = useState(false);
+  const closingRef = useRef(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const topmost = useSyncExternalStore(
+    subscribeToSheets,
+    () => {
+      const modals = document.querySelectorAll("[data-dashboard-modal]");
+      const last = modals[modals.length - 1];
+      return popupRef.current ? last === popupRef.current : !last;
+    },
+    () => true,
+  );
+  useEffect(() => {
+    acquireBodyScrollLock();
+    setOpen(true);
+    return releaseBodyScrollLock;
+  }, []);
+
+  return {
+    rootProps: {
+      open,
+      modal: topmost ? "trap-focus" : false,
+      disablePointerDismissal: !topmost,
+      onOpenChange(nextOpen, details) {
+        if (!nextOpen && !topmost) {
+          details.cancel();
+          return;
+        }
+        closingRef.current = !nextOpen;
+        setOpen(nextOpen);
+      },
+      onOpenChangeComplete(nextOpen) {
+        if (!nextOpen && closingRef.current) onClose();
+      },
+    } satisfies Dialog.Root.Props,
+    contentProps: {
+      ref: popupRef,
+      "aria-modal": topmost ? true : undefined,
+      finalFocus: () => Boolean(closingRef.current && topmost),
+      initialFocus: () => {
+        const modals = document.querySelectorAll("[data-dashboard-modal]");
+        if (modals[modals.length - 1] !== popupRef.current) return false;
+        return initialFocusRef?.current ?? true;
+      },
+    } satisfies Dialog.Popup.Props,
+  };
+}

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

@@ -1,14 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
-import { Bot, CircleAlert, LockKeyhole } from "lucide-react";
+import {
+  Bot,
+  Circle,
+  CircleAlert,
+  CircleCheck,
+  CircleDot,
+  CirclePause,
+  CircleX,
+  LoaderCircle,
+  LockKeyhole,
+  type LucideIcon,
+} from "lucide-react";
 import {
   conversationChildAgentsReportSchema,
   type ConversationChildAgent,
 } from "@sentry/junior/api/schema";
 
-import { StatusChip, type StatusChipTone } from "../components/StatusChip";
+import type { StatusChipTone } from "../components/StatusChip";
 import {
   formatConversationCostTotal,
-  formatRelativeTime,
   formatRuntime,
   formatTime,
   formatUsageTotal,
@@ -85,9 +95,12 @@ export function ConversationChildAgents(props: {
   }
 
   return (
-    <ol aria-label="Subagents" className="m-0 grid list-none gap-2 p-0">
+    <ol
+      aria-label="Subagents"
+      className="m-0 grid list-none gap-px overflow-hidden rounded-lg border border-dashboard-border-subtle bg-dashboard-border-subtle p-0"
+    >
       {query.data.agents.map((agent) => (
-        <li key={agent.conversationId}>
+        <li className="bg-dashboard-surface-panel" key={agent.conversationId}>
           <ChildAgentRow agent={agent} onOpen={props.onOpenAgent} />
         </li>
       ))}
@@ -95,9 +108,48 @@ export function ConversationChildAgents(props: {
   );
 }
 
+const statusIcons: Partial<Record<string, LucideIcon>> = {
+  active: CircleDot,
+  blocked: CircleAlert,
+  completed: CircleCheck,
+  error: CircleX,
+  failed: CircleX,
+  paused: CirclePause,
+  running: LoaderCircle,
+};
+
+const statusIconToneClass: Record<StatusChipTone, string> = {
+  accent: "text-violet-300",
+  danger: "text-rose-300",
+  info: "text-cyan-300",
+  neutral: "text-dashboard-text-faint",
+  success: "text-emerald-300",
+  warning: "text-amber-300",
+};
+
+/** Mark a child agent status with one icon and an audible label. */
+function ChildAgentStatusIcon(props: { status: string }) {
+  const Icon = statusIcons[props.status] ?? Circle;
+  return (
+    <span className="mt-px grid size-4 shrink-0 place-items-center">
+      <Icon
+        aria-hidden="true"
+        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>
+    </span>
+  );
+}
+
 /**
- * Show who ran, what it was asked to do, and what it cost. The row text is the
- * accessible name, so status, title, task, and error stay audible.
+ * Show one child agent as a dense row: status, task title, and run time first,
+ * then agent name and cost. The row text is the accessible name, so status,
+ * title, and error stay audible.
  */
 function ChildAgentRow(props: {
   agent: ConversationChildAgent;
@@ -107,24 +159,20 @@ function ChildAgentRow(props: {
   const tone = subagentStatusTone(agent.status);
   const task = agent.task?.trim();
   const headline = agent.title ?? task;
-  // A title is often a short form of the task. Skip the task when it adds nothing.
-  const detail = agent.title && task && task !== agent.title ? task : undefined;
   const runtime = formatRuntime(agent.cumulativeDurationMs);
+  const name = agent.redacted ? "Private subagent" : (agent.name ?? "subagent");
   // Totals include this subagent's own subagents. Say so, so the row does not
   // read as the work of this subagent alone.
   const nested = agent.childAgentTotals?.count;
-  const stats = [
+  const meta = [
     formatUsageTotal(agent.cumulativeUsage),
     formatConversationCostTotal(agent.cumulativeUsage, agent.auxiliaryCosts),
-    runtime ? `${runtime} runtime` : "",
-    nested
-      ? `incl. ${nested} nested ${nested === 1 ? "subagent" : "subagents"}`
-      : "",
+    nested ? `+${nested} nested` : "",
   ].filter(Boolean);
 
   return (
     <button
-      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+      className="grid w-full min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-0.5 px-3 py-2.5 text-left text-inherit transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
       onClick={() =>
         props.onOpen({
           conversationId: agent.conversationId,
@@ -137,59 +185,40 @@ function ChildAgentRow(props: {
           status: agent.status,
         })
       }
+      title={[
+        task && task !== headline ? task : "",
+        `Updated ${formatTime(agent.updatedAt, {
+          dateStyle: "medium",
+          timeStyle: "short",
+        })}`,
+      ]
+        .filter(Boolean)
+        .join("\n")}
       type="button"
     >
-      <span className="flex min-w-0 items-center gap-2 text-xs">
-        {agent.redacted ? (
-          <span className="flex min-w-0 items-center gap-1.5 text-dashboard-text-muted">
-            <LockKeyhole aria-hidden="true" className="size-3 shrink-0" />
-            Private subagent
-          </span>
-        ) : (
-          <span className="min-w-0 truncate font-medium text-dashboard-text-muted">
-            {agent.name ?? "subagent"}
-          </span>
-        )}
-        <StatusChip className="ml-auto shrink-0" size="compact" tone={tone}>
-          {agent.status}
-        </StatusChip>
-        <time
-          className="shrink-0 text-dashboard-text-faint"
-          dateTime={agent.updatedAt}
-          title={`Updated ${formatTime(agent.updatedAt, {
-            dateStyle: "medium",
-            timeStyle: "short",
-          })}`}
-        >
-          {formatRelativeTime(agent.updatedAt)}
-        </time>
+      <ChildAgentStatusIcon status={agent.status} />
+      <span className="min-w-0 truncate text-sm font-medium leading-5 text-dashboard-text">
+        {headline ?? name}
       </span>
-      {headline ? (
-        <span className="line-clamp-2 break-words text-sm font-semibold leading-snug text-dashboard-text">
-          {headline}
-        </span>
-      ) : null}
-      {detail ? (
-        <span className="line-clamp-2 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-muted">
-          {detail}
+      <span className="shrink-0 text-xs leading-5 tabular-nums text-dashboard-text-muted">
+        {runtime}
+      </span>
+      <span className="col-start-2 col-end-4 flex min-w-0 items-center gap-1.5 text-xs leading-4 text-dashboard-text-muted">
+        {agent.redacted ? (
+          <LockKeyhole aria-hidden="true" className="size-3 shrink-0" />
+        ) : null}
+        <span className="min-w-0 truncate">
+          {[headline ? name : "", ...meta].filter(Boolean).join(" · ")}
         </span>
-      ) : null}
+      </span>
       {agent.error ? (
         <span
           className={cn(
-            "flex min-w-0 items-start gap-1.5 text-xs leading-relaxed",
+            "col-start-2 col-end-4 line-clamp-2 min-w-0 whitespace-pre-wrap break-words pt-0.5 text-xs leading-4",
             errorToneClass[tone] ?? "text-dashboard-text-muted",
           )}
         >
-          <CircleAlert aria-hidden="true" className="mt-0.5 size-3 shrink-0" />
-          <span className="line-clamp-3 min-w-0 whitespace-pre-wrap break-words">
-            {agent.error}
-          </span>
-        </span>
-      ) : null}
-      {stats.length > 0 ? (
-        <span className="block text-xs tabular-nums text-dashboard-text-muted">
-          {stats.join(" · ")}
+          {agent.error}
         </span>
       ) : null}
     </button>

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} />