@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/components/ProfileMenu.tsx

@@ -8,12 +8,7 @@ import {
   ShieldCheck,
   UserRound,
 } from "lucide-react";
-import {
-  useEffect,
-  useRef,
-  useState,
-  type PointerEvent as ReactPointerEvent,
-} from "react";
+import { useState } from "react";
 import { Link } from "react-router";
 import type { PersonalSpendReport } from "@sentry/junior/api/schema";
 import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
@@ -23,6 +18,7 @@ import { pluginUserPagePath } from "../pages/user/PluginUserPage";
 import { cn, dashboardInteractiveTextClass } from "../styles";
 import type { Identity } from "../types";
 import { ThemeSwitcher } from "./ThemeSwitcher";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
 type ProfileMenuProps = {
   identity: Identity;
@@ -65,14 +61,6 @@ export function ProfileMenu({
   variant = "popover",
 }: ProfileMenuProps) {
   const [open, setOpen] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const openTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
-  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
   const email = identity.user.email!;
   const name = identity.user.name?.trim() || email;
   const sevenDaySpend = spend
@@ -85,54 +73,6 @@ export function ProfileMenu({
     (page) => page.navigation === "profile",
   );
 
-  function clearHoverTimers() {
-    if (openTimerRef.current) clearTimeout(openTimerRef.current);
-    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    openTimerRef.current = undefined;
-    closeTimerRef.current = undefined;
-  }
-
-  function openOnHover(event: ReactPointerEvent<HTMLDivElement>) {
-    if (event.pointerType !== "mouse") return;
-    clearHoverTimers();
-    openTimerRef.current = setTimeout(() => setOpen(true), HOVER_OPEN_DELAY_MS);
-  }
-
-  function closeOnHover(event: ReactPointerEvent<HTMLDivElement>) {
-    if (event.pointerType !== "mouse") return;
-    clearHoverTimers();
-    closeTimerRef.current = setTimeout(
-      () => setOpen(false),
-      HOVER_CLOSE_DELAY_MS,
-    );
-  }
-
-  useEffect(() => clearHoverTimers, []);
-
-  useEffect(() => {
-    if (variant !== "popover" || !open) return;
-
-    function closeOnOutsideClick(event: PointerEvent) {
-      if (!rootRef.current?.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    }
-
-    function closeOnEscape(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        setOpen(false);
-        triggerRef.current?.focus();
-      }
-    }
-
-    document.addEventListener("pointerdown", closeOnOutsideClick);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsideClick);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [open, variant]);
-
   const avatar = (
     <span
       aria-hidden="true"
@@ -335,32 +275,28 @@ export function ProfileMenu({
   }
 
   return (
-    <div
-      className="relative"
-      onBlurCapture={(event) => {
-        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
-          setOpen(false);
+    <Popover
+      onOpenChange={(nextOpen, details) => {
+        // A mouse click always keeps the menu open, also after hover opened it.
+        // A keyboard press (detail 0) still toggles it.
+        const mouseClick =
+          details.event instanceof MouseEvent && details.event.detail > 0;
+        if (!nextOpen && details.reason === "trigger-press" && mouseClick) {
+          return;
         }
+        setOpen(nextOpen);
       }}
-      onPointerEnter={openOnHover}
-      onPointerLeave={closeOnHover}
-      ref={rootRef}
+      open={open}
     >
-      <button
-        aria-controls="profile-popover"
-        aria-expanded={open}
-        aria-haspopup="true"
+      <PopoverTrigger
         aria-label={`${open ? "Close" : "Open"} profile menu for ${name}. Personal model spend: 7 days ${sevenDaySpend}, 30 days ${thirtyDaySpend}.`}
         className={cn(
           "group flex h-10 cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-1.5 text-dashboard-text transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70",
           open && "bg-dashboard-fill-hover text-dashboard-text",
         )}
-        onClick={(event) => {
-          clearHoverTimers();
-          setOpen(event.detail === 0 ? (value) => !value : true);
-        }}
-        ref={triggerRef}
-        type="button"
+        closeDelay={HOVER_CLOSE_DELAY_MS}
+        delay={HOVER_OPEN_DELAY_MS}
+        openOnHover
       >
         <span className="hidden items-center gap-2 md:flex">
           <span className="flex items-baseline gap-1 whitespace-nowrap tabular-nums">
@@ -399,18 +335,16 @@ export function ProfileMenu({
           size={14}
           strokeWidth={2}
         />
-      </button>
-
-      {open ? (
-        <div
-          className="absolute right-0 top-[calc(100%+0.5rem)] z-40 w-64 rounded-xl bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl"
-          id="profile-popover"
-        >
-          {identityBlock}
-          <ThemeSwitcher className="border-b border-dashboard-border-strong px-2.5 py-2" />
-          {menuLinks(() => setOpen(false))}
-        </div>
-      ) : null}
-    </div>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-64 rounded-xl border-0 bg-dashboard-surface-raised/95 p-1.5 shadow-2xl shadow-black/75 backdrop-blur-xl"
+        id="profile-popover"
+      >
+        {identityBlock}
+        <ThemeSwitcher className="border-b border-dashboard-border-strong px-2.5 py-2" />
+        {menuLinks(() => setOpen(false))}
+      </PopoverContent>
+    </Popover>
   );
 }

package/src/client/components/README.md

@@ -16,23 +16,76 @@ pnpm --filter @sentry/junior-dashboard exec shadcn add <component>
 
 The CLI writes components to `src/client/components/ui/`. Its `@dashboard/*`
 alias points to `src/client/*`. The existing `@/*` alias still points to core.
-`src/client/lib/utils.ts` provides the shadcn `cn` helper. Existing components
-keep the class join helper in `src/client/styles.ts` until they are migrated.
+The `ui/` files join classes with the merging `cn` from
+`src/client/lib/utils.ts`, so a caller's `className` wins over a base class.
 
 The shadcn color tokens in `src/tailwind.css` use the dashboard tokens in both
-themes. Primary actions use `text-solid` with inverse text. Danger uses the
-same theme-aware rose shade as existing danger controls. The `dark:` variant
-follows `data-theme`. Keep the existing Tailwind radius scale. Do not apply the CLI's global border or body resets to existing
-components. Check each added component against the rules below and add its
-gallery fixture before use.
-
-`ui/sheet.tsx` is the shadcn Base UI Dialog Sheet. It supports all four edges,
-uses the dashboard overlay and close button, and stops motion when reduced
-motion is set. The copied source license is in `ui/sheet.LICENSE`.
-`Drawer` and `BottomSheet` compose this component for app details.
-`ui/useSheet.ts` owns their close lifecycle, shared document scroll lock, and
-focus rules when a resize puts one modal below another. Conversation browser
-scenarios cover dismissal, nested focus, and layout changes.
+themes. The `dark:` variant follows `data-theme`. Keep the existing Tailwind
+radius scale. Do not apply the CLI's global border or body resets. Check each
+added component against the rules below before use.
+
+Each `ui/` file is shadcn source that uses dashboard tokens. Remove exports
+that no app code uses. Use `ui/` components directly. Do not add an app
+component that only renames a `ui/` component or its props. Change the `ui/`
+file when every caller needs the same style or variant. App components compose
+`ui/` source only when they add structure or behavior:
+
+| App component                  | shadcn source     |
+| ------------------------------ | ----------------- |
+| `Drawer`, `BottomSheet`        | `ui/sheet`        |
+| `layout/DashboardHeader` (nav) | `ui/sheet`        |
+| `ProfileMenu` (desktop)        | `ui/popover`      |
+| `ActorAvatar`                  | `ui/avatar`       |
+| `ParticipantAvatarStack`       | `ui/avatar`       |
+| `SearchInput`                  | `ui/input-group`  |
+| `PagePagination`               | `ui/pagination`   |
+| `EmptyTelemetry`               | `ui/empty`        |
+| `TimeRangeSelector`            | `ui/toggle-group` |
+| `ThemeSwitcher`                | `ui/toggle-group` |
+| `TranscriptViewToggle`         | `ui/toggle-group` |
+| `FilterTabList`                | `ui/tabs`         |
+| `charts/ActivityChartTooltip`  | `ui/tooltip`      |
+| `conversations/ToolFrame`      | `ui/trace`        |
+| `TranscriptReasoningView`      | `ui/trace`        |
+| `ImageAttachment` (preview)    | `ui/dialog`       |
+| `Notice`, `InlineError`        | `ui/alert`        |
+| App banners                    | `ui/alert`        |
+| Recharts activity charts       | `ui/chart`        |
+
+Rules for adopted components:
+
+- Use `ui/trace` for transcript activity rows. It composes `ui/collapsible`.
+  A closed tool row unmounts its panel, so it does not run Shiki. Reasoning
+  sets `hiddenUntilFound`, so browser find reaches closed text. Transcript
+  search holds rows open and turns off the row button. Put only inline
+  elements, such as `span`, inside the row button.
+- Use `ui/alert-dialog` for every confirmation. Do not use `window.confirm`.
+  Keep the confirmed item in state after close, so the closing dialog keeps its
+  text.
+- Use `useSheet` for each app `ui/dialog`, as for sheets. It shares the
+  document scroll lock. Only the front modal closes on Escape or a backdrop
+  tap. Mount the dialog only while it is open.
+- `ui/alert` sets `role="alert"`. Pass `role="status"` for a message that is
+  not an error.
+- `ui/toast` has no global notification manager. Features call
+  `useToastManager` inside the mounted `Toaster` provider.
+- Put a checkbox or radio inside its `<label>`. Give each `RadioGroup` an
+  `aria-label`.
+- Give an icon-only control its label with `TooltipContent size="compact"`.
+  Do not use the native `title` attribute. Tooltips open on mouse hover and
+  keyboard focus only, so a tap still runs the control.
+- When a `ui/button` tooltip trigger can be disabled, set
+  `focusableWhenDisabled`. A native disabled button can drop hover and focus,
+  so Firefox closes the tooltip and hides pending or result labels.
+  `ui/button` styles `data-disabled`, so both disabled modes look the same.
+- Build a form field from `ui/field`. Give `FieldError` the id
+  `<control id>-error` and `FieldDescription` the id `<control id>-help`. The
+  control sets `aria-invalid` and `aria-describedby`.
+- Use `Button size="menu"` for a full-width icon and label row in a mobile
+  overflow menu. A pressed row adds `bg-dashboard-fill-strong`.
+- For a link that looks like a button, put `buttonVariants()` on the router
+  `Link`. A form page has one `Button variant="primary"` for its main save
+  action.
 
 ## Foundations
 
@@ -46,9 +99,9 @@ token so each theme can redefine it.
   paint from the saved choice or the system color scheme. `ThemeSwitcher` saves
   the choice for this browser. Use the `light:` variant only for one-off values
   that no token covers, such as provider brand colors.
-- **Charts.** Use `var(--color-*)` for series colors in SVG attributes, not hex
-  values, so they follow the theme.
-
+- **Charts.** Use `var(--color-*)` for series colors, not hex values, so they
+  follow the theme. Name series colors in the `ChartContainer` config and fill
+  each series with `var(--color-<key>)`.
 - **Surfaces.** Use the surface ladder, darkest to lightest: `bg`,
   `bg-elevated` (drawers), `surface-panel` (sidebar, cards, bubbles),
   `surface-raised` (buttons, tooltips), `control`, `surface-hover`,
@@ -81,80 +134,54 @@ token so each theme can redefine it.
   use `rounded-lg`. The composer, menus, and transcript object cards use
   `rounded-xl`. Avatars and count badges use `rounded-full`.
 
-## Shared class helpers
-
-`src/client/styles.ts` holds the few class strings that many components share.
-
-- `cn` joins class names.
-- `dashboardContainerClass` sets the page width.
-- `dashboardInlineLinkClass` styles a neutral underlined link inside prose.
-- `dashboardInteractiveTextClass` styles muted text that brightens on hover.
-- `dashboardComposerSurfaceClass` styles the composer surface.
+Shared class strings live in `src/client/styles.ts`.
 
-## Components
+## App components
 
-### Primitives
-
-- **Actions.** `Button` (`default`, `primary`, `danger`, and `size="icon"`) and
-  `ButtonLink`. Form pages use `Button tone="primary"` for their one main save
-  action. Use `ToggleButton` variants (`pill`, `segment`, `text`) for pressed
-  states, not one-off styles.
-- **Forms.** `Field` (`default`, `compact`), `TextInput`, `TextArea`, `Select`,
-  and `SearchInput`. Use `TextInput size="comfortable"` for larger mobile
-  controls. Use `TextArea prose` for instructions, not code. `Field error`
-  renders an error at `<htmlFor>-error`. The owning control must set
-  `aria-invalid` and `aria-describedby`. `Select` owns the native control and its
-  inset arrow. Use its `filter` and `sort` variants for compact controls.
 - **Status.** Use `StatusDot` for dense table or list markers. Use `StatusChip`
-  when the label must stay visible. `StatusChip` is a small dot and
-  sentence-case text, with no border or fill. It is not a control.
+  when the label must stay visible. `StatusChip` is not a control.
 - **Messages.** Use `Notice` for compact transient messages and `FormNotice`
   for wrapping form recovery text.
-- **Overlays.** `ui/sheet.tsx` is the shadcn/ui Base UI Sheet. It uses Base UI
-  Dialog for focus and dismissal. `Drawer` adds a visible header and close
-  control. `BottomSheet` puts details below a title and close control. Both use
-  the app's shared scroll lock, skip motion when reduced motion is set, and
-  close with the close button, backdrop, or Escape. Docked conversation details
-  use a non-modal aside so the chat stays usable. `Tooltip` and
-  `IconButtonTooltip` own hover text.
-- **Identity.** `ActorAvatar`, `ParticipantAvatarStack`, and `ObjectIcon`.
-  `ObjectIcon` owns native Ticket, Code change, Automation, Deployment, and
-  Item icons. It uses the shared type and status mapping and the original
-  Octicons paths. Do not replace it with a provider logo or a status-only icon.
-- **Loading.** Use `Skeleton` for placeholder leaves and `PageContentSkeleton`
+- **Disclosure.** Use `ui/collapsible` for one show-or-hide section. Put a
+  `ChevronRight` with `dashboardDisclosureChevronClass` in a `group` trigger.
+  Set `hiddenUntilFound` on the content when browser find must reach closed
+  text. Closed content then keeps its box, so put margins and padding on a
+  child. Use `ui/accordion` for a set of sections with headings.
+- **Details.** `DetailsPanel` docks an aside at 1280px and above, and uses a
+  `BottomSheet` below that width. It owns Escape and the scroll frame for
+  docked panels.
+- **Identity.** `ObjectIcon` owns the native Ticket, Code change, Automation,
+  Deployment, and Item icons. Do not replace it with a provider logo or a
+  status-only icon.
+- **Loading.** Use `ui/skeleton` for placeholder leaves and `PageContentSkeleton`
   variants for page bodies. Use `PageRouteLoading` when a page keeps its real
   header above a body skeleton. Use a feature-owned loading component for
-  distinct geometry, such as conversations.
+  distinct geometry, such as conversations. Use `ui/spinner` for an inline
+  pending icon.
 
-### Navigation
+## Navigation
 
 The dashboard has three navigation levels. Each has its own look, so the
 levels stay distinct.
 
 - **App navigation** in `layout/DashboardHeader` uses pills.
 - **Page links** use `SegmentedNav`, through `layout/SecondaryNavigation`. They
-  are underline tabs that sit on the header border. With `fill`, links share
-  the row width while their labels fit. Rows that do not fit scroll sideways.
-- **Panel switches** use `SegmentedTabs`, which draws a pill track. Pass the
-  selected value, items, change handler, and panel content. It owns tab and
-  panel labels and keyboard focus. Pass `scroll` to keep the tabs fixed while
-  the panel content scrolls. That mode fills its frame and owns the content
-  padding, so its scrollbar stays at the frame edge. `BottomSheet` content owns
-  its own padding.
+  are underline tabs that sit on the header border.
+- **Panel switches** use `ui/tabs`. Give `TabsList` an `aria-label`. Set
+  `activateOnFocus` so arrow keys select the tab.
 
-Keep collection filters in `FilterTabList`.
+Keep collection filters in `FilterTabList`. It uses `TabsList variant="line"`
+and adds the count badges.
 
-### Patterns
+## Patterns
 
 - **Layout.** `layout/` holds the shell chrome, page headers, cards, and
   section titles. `DashboardChrome` owns the sticky header block and its one
   bottom border.
-- **Directory tables and metrics.** `directory/` and `metrics/`.
-- **Charts.** Activity time-series charts own bucket labels in
-  `charts/ActivityChart` (`formatActivityDate` for axes,
-  `ActivityChartTooltip` and `formatActivityTooltipDate` for hover labels). New
-  day or hour charts compose those helpers. They do not format UTC bucket keys
-  inline.
+- **Charts.** Put `role="img"` and the chart `aria-label` on the Recharts
+  chart, so the tooltip live region stays outside the image. Day and hour
+  charts compose the `charts/ActivityChart` axis, average line, and tooltip
+  helpers. They do not format UTC bucket keys inline.
 - **Conversation mobile geometry** is a hard ownership edge:
   - `layout/VisualViewportShell` owns the fixed shell, visualViewport CSS
     variables, and body lock.
@@ -166,16 +193,14 @@ Keep collection filters in `FilterTabList`.
   dock, and must not use `ComposerDock`. Do not add viewport height, offset, or
   bottom safe-area math in page modules.
 
-### Features
-
 Feature surfaces stay under `conversations/` or `pages/` until two real callers
-share them. Transcript layout stays in `conversations/`. See
-[Transcript components](../conversations/README.md) for ownership.
+share them. See [Transcript components](../conversations/README.md) for
+transcript ownership.
 
 ## Rules
 
 - Prefer a named component on the second real use.
 - Keep Tailwind classes on the owning component.
-- Add gallery fixtures under `/dev/<section>` for new or changed shared
-  components. Keep the `/dev` index as the catalog only.
+- Check new or changed shared components on a real page with mock data and in
+  the dashboard E2E screenshots.
 - One-off page glue may stay inline when extraction only adds indirection.

package/src/client/components/SearchInput.tsx

@@ -2,6 +2,12 @@ import type { Ref } from "react";
 import { Search, X } from "lucide-react";
 
 import { cn } from "../styles";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "./ui/input-group";
 
 type SearchInputSize = "compact" | "default";
 
@@ -15,23 +21,14 @@ export function SearchInput(props: {
   size?: SearchInputSize;
   value: string;
 }) {
-  const size = props.size ?? "compact";
+  const size = sizeClass[props.size ?? "compact"];
   return (
-    <div className={cn("relative min-w-0", props.className)}>
-      <Search
-        aria-hidden="true"
-        className={cn(
-          "pointer-events-none absolute top-1/2 -translate-y-1/2 text-dashboard-text-muted",
-          searchIconClass[size],
-        )}
-        size={size === "compact" ? 13 : 14}
-        strokeWidth={2.5}
-      />
-      <input
+    <InputGroup className={cn(size.group, props.className)}>
+      <InputGroupInput
         aria-label={props.label}
         className={cn(
-          "w-full rounded-md border border-dashboard-border font-sans text-sm text-dashboard-text outline-none transition-colors placeholder:text-dashboard-text-muted/70 hover:border-dashboard-border-emphasis focus:border-dashboard-focus [&::-webkit-search-cancel-button]:appearance-none",
-          searchInputClass[size],
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          size.input,
         )}
         onChange={(event) => props.onChange(event.currentTarget.value)}
         placeholder={props.placeholder}
@@ -39,40 +36,53 @@ export function SearchInput(props: {
         type="search"
         value={props.value}
       />
-      {props.value ? (
-        <button
+      <InputGroupAddon className={size.icon}>
+        <Search aria-hidden="true" size={size.iconSize} strokeWidth={2.5} />
+      </InputGroupAddon>
+      {/* The clear button keeps its space while hidden, so the field width does not change. */}
+      <InputGroupAddon align="inline-end" className={size.clear}>
+        <InputGroupButton
           aria-label="Clear search"
-          className={cn(
-            "absolute top-1/2 grid size-6 -translate-y-1/2 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
-            clearButtonClass[size],
-          )}
+          className={props.value ? undefined : "invisible"}
           onClick={(event) => {
             props.onChange("");
-            // The button unmounts once the value is empty, so keep focus in the search box.
-            event.currentTarget.parentElement?.querySelector("input")?.focus();
+            // The button hides once the value is empty, so keep focus in the search box.
+            event.currentTarget
+              .closest("[data-slot=input-group]")
+              ?.querySelector("input")
+              ?.focus();
           }}
-          type="button"
         >
           <X aria-hidden="true" size={14} strokeWidth={2.5} />
-        </button>
-      ) : null}
-    </div>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
   );
 }
 
-const searchIconClass: Record<SearchInputSize, string> = {
-  compact: "left-2.5",
-  default: "left-3",
-};
-
-const clearButtonClass: Record<SearchInputSize, string> = {
-  compact: "right-1.5",
-  default: "right-2",
-};
-
-const searchInputClass: Record<SearchInputSize, string> = {
-  compact:
-    "h-9 bg-dashboard-overlay-soft pr-8 pl-8 focus:ring-1 focus:ring-dashboard-focus/25",
-  default:
-    "h-10 bg-dashboard-overlay-soft pr-9 pl-9 focus:ring-1 focus:ring-dashboard-focus/25",
+// Match the icon, text, and clear button offsets of the bordered input.
+const sizeClass: Record<
+  SearchInputSize,
+  {
+    clear: string;
+    group: string;
+    icon: string;
+    iconSize: number;
+    input: string;
+  }
+> = {
+  compact: {
+    clear: "pr-1.25",
+    group: "h-9",
+    icon: "pl-2.25",
+    iconSize: 13,
+    input: "pr-1 pl-2.5",
+  },
+  default: {
+    clear: "pr-1.75",
+    group: "h-10",
+    icon: "pl-2.75",
+    iconSize: 14,
+    input: "pr-1 pl-2.75",
+  },
 };

package/src/client/components/SegmentedNav.tsx

@@ -81,7 +81,7 @@ function edgeFade(edges: HiddenEdges): CSSProperties | undefined {
 /**
  * Show links between sibling pages as underline tabs. The current page has
  * a solid underline that sits on the border below the row. App navigation
- * uses pills and in-place panel switches use `SegmentedTabs`, so the three
+ * uses pills and in-place panel switches use `ui/tabs`, so the three
  * levels stay distinct.
  *
  * With `fill`, links share the row width equally while their labels fit.

package/src/client/components/ShimmerText.tsx

@@ -2,11 +2,7 @@ import type { ReactNode } from "react";
 
 import { cn } from "../styles";
 
-/** Shared running-text shimmer used by live metrics and in-progress tool names. */
-export const shimmerTextClassName =
-  "animate-[junior-text-shimmer_1.6s_linear_infinite] bg-[linear-gradient(90deg,#777_0%,#d6d6d6_40%,#fff_50%,#d6d6d6_60%,#777_100%)] bg-[length:200%_100%] bg-clip-text text-transparent motion-reduce:animate-none";
-
-/** Render text with the dashboard running shimmer when `active` is true. */
+/** Render text with the shadcn `shimmer` utility when `active` is true. */
 export function ShimmerText(props: {
   active?: boolean;
   as?: "span" | "strong";
@@ -19,7 +15,7 @@ export function ShimmerText(props: {
   if (!props.active && !props.className && !props["aria-label"]) {
     return props.children;
   }
-  const className = cn(props.active && shimmerTextClassName, props.className);
+  const className = cn(props.active && "shimmer", props.className);
   if (props.as === "strong") {
     return (
       <strong aria-label={props["aria-label"]} className={className}>

package/src/client/components/ThemeSwitcher.tsx

@@ -3,7 +3,8 @@ import { Monitor, Moon, Sun, type LucideIcon } from "lucide-react";
 import type { DashboardThemeChoice } from "../../theme";
 import { cn } from "../styles";
 import { useDashboardThemeChoice } from "../theme";
-import { ToggleButton } from "./Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
 
 const themeChoices = [
   { Icon: Monitor, label: "System", value: "system" },
@@ -25,24 +26,27 @@ export function ThemeSwitcher(props: { className?: string }) {
       <span className="font-sans text-sm font-semibold text-dashboard-text">
         Theme
       </span>
-      <div
+      <ToggleGroup
         aria-label="Theme"
-        className="flex gap-0.5 rounded-lg border border-dashboard-border p-0.5"
-        role="group"
+        className="gap-0.5 rounded-lg border border-dashboard-border p-0.5"
+        onValueChange={([next]) => {
+          if (next) setChoice(next);
+        }}
+        value={[choice]}
       >
         {themeChoices.map(({ Icon, label, value }) => (
-          <ToggleButton
-            aria-label={`${label} theme`}
-            key={value}
-            onClick={() => setChoice(value)}
-            pressed={choice === value}
-            title={label}
-            variant="segment"
-          >
-            <Icon aria-hidden="true" size={14} strokeWidth={2} />
-          </ToggleButton>
+          <Tooltip key={value}>
+            <TooltipTrigger
+              render={
+                <ToggleGroupItem aria-label={`${label} theme`} value={value}>
+                  <Icon aria-hidden="true" size={14} strokeWidth={2} />
+                </ToggleGroupItem>
+              }
+            />
+            <TooltipContent size="compact">{label}</TooltipContent>
+          </Tooltip>
         ))}
-      </div>
+      </ToggleGroup>
     </div>
   );
 }

package/src/client/components/VersionDriftBanner.tsx

@@ -1,24 +1,26 @@
 import { JUNIOR_VERSION } from "@sentry/junior/version";
 
+import { Alert } from "./ui/alert";
+import { Button } from "./ui/button";
+
 /** Prompt the viewer to load the dashboard bundle that matches the server. */
 export function VersionDriftBanner(props: { serverVersion?: string }) {
   if (!dashboardVersionDrift(props.serverVersion)) return null;
 
   return (
-    <div
+    <Alert
       aria-live="polite"
-      className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t border-dashboard-accent/15 bg-dashboard-accent/[0.07] px-3 py-1.5 text-center font-sans text-xs text-dashboard-accent-text/80"
+      className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 rounded-none border-0 border-t border-dashboard-accent/15 bg-dashboard-accent/[0.07] px-3 py-1.5 text-center font-sans text-xs text-dashboard-accent-text/80"
       role="status"
     >
       <span>The dashboard changed. Refresh to load the latest version.</span>
-      <button
-        className="cursor-pointer border-0 bg-transparent p-0 font-sans font-semibold text-dashboard-accent-text underline decoration-dashboard-accent/40 underline-offset-2 hover:text-dashboard-text-solid"
+      <Button
+        className="h-auto border-0 bg-transparent p-0 text-xs font-semibold leading-normal text-dashboard-accent-text underline decoration-dashboard-accent/40 underline-offset-2 hover:bg-transparent hover:text-dashboard-text-solid"
         onClick={() => window.location.reload()}
-        type="button"
       >
         Refresh
-      </button>
-    </div>
+      </Button>
+    </Alert>
   );
 }