@sentry/junior-dashboard 0.265.0 → 0.267.0

package/src/client/components/InlineError.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import { cn } from "../styles";
+import { Alert } from "./ui/alert";
 
 /** Render a compact error message with consistent alert semantics. */
 export function InlineError(props: {
@@ -8,11 +9,14 @@ export function InlineError(props: {
   className?: string;
 }) {
   return (
-    <p
-      className={cn("m-0 text-sm text-rose-300", props.className)}
-      role="alert"
+    <Alert
+      className={cn(
+        "block rounded-none border-0 bg-transparent p-0 text-rose-300",
+        props.className,
+      )}
+      variant="destructive"
     >
       {props.children}
-    </p>
+    </Alert>
   );
 }

package/src/client/components/Notice.tsx

@@ -1,7 +1,9 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import type { LucideIcon } from "lucide-react";
 
 import { cn } from "../styles";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Button } from "./ui/button";
 
 type NoticeTone = "default" | "error";
 
@@ -14,7 +16,7 @@ type NoticeProps = {
   tone?: NoticeTone;
 };
 
-type NoticeActionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type NoticeActionProps = ComponentProps<typeof Button> & {
   tone?: NoticeTone;
 };
 
@@ -29,11 +31,10 @@ export function Notice({
 }: NoticeProps) {
   const isError = tone === "error";
   return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-xl border bg-dashboard-surface-raised shadow-[0_16px_40px_rgba(0,0,0,0.5)]",
-        isError ? "border-rose-300/25" : "border-dashboard-border-strong",
-      )}
+    <Alert
+      className="block gap-0 overflow-hidden rounded-xl p-0 shadow-[0_16px_40px_rgba(0,0,0,0.5)]"
+      role={isError ? "alert" : "status"}
+      variant={isError ? "destructive" : "default"}
     >
       <div className="flex min-w-0 items-center gap-3 px-3 py-3">
         {Icon ? (
@@ -48,31 +49,26 @@ export function Notice({
             <Icon aria-hidden="true" size={16} />
           </div>
         ) : null}
-        <div className="min-w-0 flex-1" role={isError ? "alert" : "status"}>
-          <div
-            className={cn(
-              "font-display text-sm font-medium leading-snug",
-              isError ? "text-rose-50" : "text-dashboard-text",
-            )}
-          >
+        <div className="min-w-0 flex-1">
+          <AlertTitle className="font-display text-sm leading-snug">
             {title}
             {detail ? " " : null}
-          </div>
+          </AlertTitle>
           {detail ? (
-            <div
+            <AlertDescription
               className={cn(
                 "mt-0.5 truncate font-sans text-xs",
-                isError ? "text-rose-100/70" : "text-dashboard-text-muted",
+                isError && "text-rose-100/70",
               )}
             >
               {detail}
-            </div>
+            </AlertDescription>
           ) : null}
         </div>
         {action}
       </div>
       {children}
-    </div>
+    </Alert>
   );
 }
 
@@ -80,22 +76,19 @@ export function Notice({
 export function NoticeAction({
   className,
   tone = "default",
-  type = "button",
   ...props
 }: NoticeActionProps) {
   const isError = tone === "error";
   return (
-    <button
+    <Button
       {...props}
       className={cn(
-        "shrink-0 cursor-pointer px-3 py-1.5 text-xs transition focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-40",
-        isError ? "focus:ring-rose-300/40" : "focus:ring-dashboard-focus/35",
+        "h-auto shrink-0 rounded-lg border-0 px-3 py-1.5 text-xs leading-normal",
         isError
-          ? "rounded-lg bg-rose-200/15 font-sans font-medium text-rose-50 hover:bg-rose-200/25"
-          : "rounded-lg bg-dashboard-accent/10 font-sans font-medium text-dashboard-accent-text hover:bg-dashboard-accent/20",
+          ? "bg-rose-200/15 text-rose-50 hover:bg-rose-200/25 hover:text-rose-50 focus-visible:outline-rose-300/55 data-disabled:hover:bg-rose-200/15 data-disabled:hover:text-rose-50"
+          : "bg-dashboard-accent/10 text-dashboard-accent-text hover:bg-dashboard-accent/20 hover:text-dashboard-accent-text data-disabled:hover:bg-dashboard-accent/10 data-disabled:hover:text-dashboard-accent-text",
         className,
       )}
-      type={type}
     />
   );
 }

package/src/client/components/Pagination.tsx

@@ -1,7 +1,12 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
 import { cn } from "../styles";
 import { Button } from "./ui/button";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+} from "./ui/pagination";
 
 /** Render a centered load-more control for cursor or progressive lists. */
 export function LoadMorePagination(props: {
@@ -54,10 +59,9 @@ export function PagePagination(props: {
   const end = Math.min(props.total, current * props.pageSize);
 
   return (
-    <div
-      aria-label="Pagination"
+    <Pagination
       className={cn(
-        "flex flex-wrap items-center justify-between gap-3",
+        "flex-wrap items-center justify-between gap-3",
         props.className,
       )}
     >
@@ -65,27 +69,23 @@ export function PagePagination(props: {
         Showing {start.toLocaleString("en-US")}-{end.toLocaleString("en-US")} of{" "}
         {props.total.toLocaleString("en-US")}
       </p>
-      <div className="flex items-center gap-2">
-        <Button
-          aria-label="Previous page"
-          disabled={current <= 1}
-          onClick={() => props.onPageChange(current - 1)}
-          size="icon"
-        >
-          <ChevronLeft aria-hidden="true" size={16} />
-        </Button>
-        <span className="min-w-16 text-center font-sans tabular-nums text-xs text-dashboard-text-muted">
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            disabled={current <= 1}
+            onClick={() => props.onPageChange(current - 1)}
+          />
+        </PaginationItem>
+        <PaginationItem className="min-w-16 text-center font-sans tabular-nums text-xs text-dashboard-text-muted">
           {current} / {props.pageCount}
-        </span>
-        <Button
-          aria-label="Next page"
-          disabled={current >= props.pageCount}
-          onClick={() => props.onPageChange(current + 1)}
-          size="icon"
-        >
-          <ChevronRight aria-hidden="true" size={16} />
-        </Button>
-      </div>
-    </div>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext
+            disabled={current >= props.pageCount}
+            onClick={() => props.onPageChange(current + 1)}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
   );
 }

package/src/client/components/ParticipantAvatarStack.tsx

@@ -1,9 +1,9 @@
 import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { actorLabel } from "../format";
-import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { ActorAvatar } from "./ActorAvatar";
+import { Avatar, AvatarFallback } from "./ui/avatar";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 const MAX_VISIBLE_PARTICIPANTS = 3;
@@ -51,7 +51,8 @@ function ParticipantTooltipContent(props: { participant: ActorIdentity }) {
   );
 }
 
-function Avatar(props: {
+/** Show one actor avatar with their name and email on hover or focus. */
+export function ParticipantAvatar(props: {
   participant: ActorIdentity;
   size: ParticipantAvatarStackProps["size"];
 }) {
@@ -62,6 +63,8 @@ function Avatar(props: {
         render={
           <span
             aria-label={label}
+            // A name on a generic span is often skipped by screen readers.
+            role="img"
             className="relative -ml-1 inline-flex rounded-full first:ml-0 pointer-events-none focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
             onKeyDown={(event) => event.stopPropagation()}
             tabIndex={0}
@@ -101,7 +104,7 @@ export function ParticipantAvatarStack(props: ParticipantAvatarStackProps) {
       role="group"
     >
       {visible.map((participant, index) => (
-        <Avatar
+        <ParticipantAvatar
           key={participantKey(participant, index)}
           participant={participant}
           size={props.size}
@@ -111,19 +114,19 @@ export function ParticipantAvatarStack(props: ParticipantAvatarStackProps) {
         <Tooltip>
           <TooltipTrigger
             render={
-              <span
+              <Avatar
                 aria-label={`${hidden.length} more participants: ${hidden
                   .map(participantDescription)
                   .join("; ")}`}
-                className={cn(
-                  "relative -ml-1 inline-grid shrink-0 pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto place-items-center rounded-full border-2 border-dashboard-bg bg-dashboard-surface-active font-sans font-semibold tabular-nums leading-none text-dashboard-text-muted focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
-                  props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
-                )}
+                className="-ml-1 pointer-events-none bg-dashboard-surface-active shadow-none focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
                 onKeyDown={(event) => event.stopPropagation()}
+                size={props.size === "list" ? "sm" : "default"}
                 tabIndex={0}
               >
-                +{hidden.length}
-              </span>
+                <AvatarFallback className="tabular-nums tracking-normal text-dashboard-text-muted">
+                  +{hidden.length}
+                </AvatarFallback>
+              </Avatar>
             }
           />
           <TooltipContent>

package/src/client/components/README.md

@@ -32,9 +32,15 @@ file when every caller needs the same style or variant. App components compose
 
 | App component                  | shadcn source     |
 | ------------------------------ | ----------------- |
-| `Drawer`, `BottomSheet`        | `ui/sheet`        |
+| `Drawer`                       | `ui/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` |
@@ -42,6 +48,9 @@ file when every caller needs the same style or variant. App components compose
 | `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:
@@ -54,6 +63,14 @@ Rules for adopted components:
 - 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 `ui/dialog` for a short task form, such as the fork message. Do not put
+  a form in a `Drawer` or a `DetailsPanel`. On small screens the dialog sits
+  near the top, so the on-screen keyboard does not cover its fields.
+- 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
@@ -68,6 +85,8 @@ Rules for adopted components:
 - 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.
@@ -134,14 +153,20 @@ Shared class strings live in `src/client/styles.ts`.
   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.
+  docked panels. Docked actions sit beside the close control, so their
+  position does not change with the title width.
+- **Drawer.** `Drawer` is a right-side `ui/drawer`. A `Drawer` opened from
+  inside another `Drawer` stacks in front of it. The parent scales back,
+  shows a thin edge behind the child, and hides its content. Set `flush` when
+  the content owns its insets and sticky headers, such as the event log.
 - **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
 

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

package/src/client/components/charts/CacheWrites.tsx

@@ -9,6 +9,14 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "../ui/collapsible";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
 import { dashboardDisclosureChevronClass } from "../../styles";
 
 /** Identify the largest cache writes within the page's selected time window. */
@@ -40,50 +48,51 @@ export function CacheWrites(props: {
           Top three by tokens written per {unit}, within the selected time
           window. Large writes alone do not mean a cache problem.
         </p>
-        <div className="overflow-x-auto">
-          <table
-            aria-label="Largest cache writes"
-            className="w-full min-w-80 table-fixed border-collapse font-sans text-xs tabular-nums"
-          >
-            <thead className="text-dashboard-text-muted">
-              <tr>
-                <th scope="col" className="py-2 text-left font-normal">
-                  {props.bucketUnit === "day" ? "Day" : "Starting at"}
-                </th>
-                <th scope="col" className="w-24 py-2 text-right font-normal">
-                  Written
-                </th>
-                <th scope="col" className="w-24 py-2 text-right font-normal">
-                  From cache
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {ranked.map((day) => (
-                <tr
-                  key={day.date}
-                  className="border-t border-dashboard-border-subtle"
+        <Table
+          aria-label="Largest cache writes"
+          className="min-w-80 table-fixed font-sans text-xs tabular-nums"
+        >
+          <TableHeader>
+            <TableRow>
+              <TableHead scope="col" className="px-0 py-2 font-normal">
+                {props.bucketUnit === "day" ? "Day" : "Starting at"}
+              </TableHead>
+              <TableHead
+                scope="col"
+                className="w-24 px-0 py-2 text-right font-normal"
+              >
+                Written
+              </TableHead>
+              <TableHead
+                scope="col"
+                className="w-24 px-0 py-2 text-right font-normal"
+              >
+                From cache
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {ranked.map((day) => (
+              <TableRow key={day.date}>
+                <TableHead
+                  scope="row"
+                  className="px-0 py-2 font-normal whitespace-normal"
                 >
-                  <th
-                    scope="row"
-                    className="py-2 text-left font-normal text-dashboard-text-muted"
-                  >
-                    {formatActivityTooltipDate(day.date)}
-                  </th>
-                  <td className="py-2 text-right text-dashboard-text">
-                    {formatCompactNumber(day.cacheCreationTokens)}
-                  </td>
-                  <td className="py-2 text-right text-dashboard-text">
-                    {formatCacheShare(
-                      day.cachedInputTokens,
-                      cacheInputTotal(day),
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+                  {formatActivityTooltipDate(day.date)}
+                </TableHead>
+                <TableCell className="px-0 py-2 text-right whitespace-normal">
+                  {formatCompactNumber(day.cacheCreationTokens)}
+                </TableCell>
+                <TableCell className="px-0 py-2 text-right whitespace-normal">
+                  {formatCacheShare(
+                    day.cachedInputTokens,
+                    cacheInputTotal(day),
+                  )}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </CollapsibleContent>
     </Collapsible>
   );