@sentry/junior-dashboard 0.266.0 → 0.267.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.266.0",
+  "version": "0.267.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -29,16 +29,20 @@
     "cn": "^0.5.0",
     "hono": "^4.13.11",
     "lucide-react": "^1.17.0",
-    "nitro": "3.0.260522-beta",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-is": "^19.2.6",
+    "react-markdown": "^10.1.0",
     "react-router": "^7.18.2",
     "recharts": "3.8.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior": "0.266.0",
-    "@sentry/junior-plugin-api": "0.266.0"
+    "@sentry/junior-plugin-api": "0.267.0"
+  },
+  "peerDependencies": {
+    "@sentry/junior": "0.267.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -49,6 +53,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "4.1.12",
     "eslint": "^10.8.0",
+    "nitro": "3.0.260522-beta",
     "oxlint": "^1.79.0",
     "shadcn": "4.23.0",
     "tailwindcss": "^4.3.0",
@@ -56,7 +61,8 @@
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
-    "vitest": "^4.1.12"
+    "vitest": "^4.1.12",
+    "@sentry/junior": "0.267.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/app.ts

@@ -126,8 +126,6 @@ function resolveDashboardOptions(
 ): DashboardRuntimeOptions {
   return {
     ...options,
-    authRequired:
-      options.authRequired ?? readEnvFlag("JUNIOR_DASHBOARD_AUTH_REQUIRED"),
     mockConversations:
       options.mockConversations ??
       readEnvFlag("JUNIOR_DASHBOARD_MOCK_CONVERSATIONS"),

package/src/auth.ts

@@ -1,3 +1,4 @@
+import { isAllowedSignInEmail } from "@sentry/junior/api";
 import { dashboardSessionSchema } from "./api/schema";
 import type { DashboardSession } from "./api/schema";
 
@@ -34,13 +35,9 @@ export function dashboardSessionIsAuthorized(
   session: DashboardSession,
   allowedDomains: string[],
 ): boolean {
-  const email = session.user.email.toLowerCase();
-  const separator = email.lastIndexOf("@");
-  const domain = separator > 0 ? email.slice(separator + 1) : undefined;
-  return Boolean(
-    session.user.emailVerified &&
-    domain !== undefined &&
-    allowedDomains.includes(domain),
+  return (
+    session.user.emailVerified === true &&
+    isAllowedSignInEmail(session.user.email, allowedDomains)
   );
 }
 

package/src/client/App.tsx

@@ -1,6 +1,5 @@
-import { AutomationEditPage } from "./pages/automations/AutomationEditPage";
 import { useEffect, useMemo, useState } from "react";
-import { Navigate, Route, Routes, useLocation } from "react-router";
+import { Navigate, Route, Routes, useLocation, useParams } from "react-router";
 
 import {
   useConversationsData,
@@ -21,6 +20,7 @@ import {
 import { DashboardHeader } from "./components/layout/DashboardHeader";
 import { VisualViewportShell } from "./components/layout/VisualViewportShell";
 import {
+  automationPath,
   buildConversations,
   conversationDetailTitle,
   conversationDisplayTitle,
@@ -52,9 +52,8 @@ import {
   isMemoryLibraryPath,
   MemoryRouteLoading,
 } from "./pages/memory/MemoryPageLayout";
-import { AutomationExecutionsPage } from "./pages/automations/AutomationExecutionsPage";
+import { AutomationPage } from "./pages/automations/AutomationPage";
 import { AutomationRunsPage } from "./pages/automations/AutomationRunsPage";
-import { AutomationVersionsPage } from "./pages/automations/AutomationVersionsPage";
 import { AutomationsPage } from "./pages/automations/AutomationsPage";
 import {
   AutomationsPageLayout,
@@ -207,48 +206,40 @@ export function DashboardShell() {
         <Routes>
           <Route element={<LegacyAutomationsRedirect />} path="/tasks" />
           <Route element={<LegacyAutomationsRedirect />} path="/tasks/*" />
+          <Route
+            element={<LegacyAutomationExecutionsRedirect />}
+            path="/automations/:automationId/executions"
+          />
           <Route
             element={
-              loading ? (
-                <AutomationsPageLayout>
-                  <AutomationsRouteLoading
-                    description="Terminal runs for one scheduled or event automation."
-                    label="Loading automation executions"
-                    title="Automation executions"
-                    variant="list"
-                  />
-                </AutomationsPageLayout>
-              ) : loggedIn ? (
-                <AutomationsPageLayout>
-                  <AutomationExecutionsPage enabled={loggedIn} />
-                </AutomationsPageLayout>
+              loading || loggedIn ? (
+                <AutomationPage enabled={loggedIn} tab="runs" />
               ) : (
                 <Navigate replace to="/" />
               )
             }
-            path="/automations/:automationId/executions"
+            path="/automations/:automationId/runs"
           />
           <Route
             element={
-              loading ? (
-                <AutomationsPageLayout>
-                  <AutomationsRouteLoading
-                    description="Saved settings for this automation, newest first."
-                    label="Loading version history"
-                    title="Version history"
-                    variant="list"
-                  />
-                </AutomationsPageLayout>
-              ) : loggedIn ? (
-                <AutomationsPageLayout>
-                  <AutomationVersionsPage enabled={loggedIn} />
-                </AutomationsPageLayout>
+              loading || loggedIn ? (
+                <AutomationPage enabled={loggedIn} tab="versions" />
               ) : (
                 <Navigate replace to="/" />
               )
             }
             path="/automations/:automationId/versions"
           />
+          <Route
+            element={
+              loading || loggedIn ? (
+                <AutomationPage enabled={loggedIn} tab="edit" />
+              ) : (
+                <Navigate replace to="/" />
+              )
+            }
+            path="/automations/:automationId/edit"
+          />
           <Route
             element={
               loading ? (
@@ -292,30 +283,9 @@ export function DashboardShell() {
             path="/automations/list"
           />
           <Route
-            path="/automations/:automationId/edit"
             element={
               loading || loggedIn ? (
-                <AutomationEditPage enabled={loggedIn} />
-              ) : (
-                <Navigate replace to="/" />
-              )
-            }
-          />
-          <Route
-            element={
-              loading ? (
-                <AutomationsPageLayout>
-                  <AutomationsRouteLoading
-                    description="Find and manage automations across your linked workspaces."
-                    label="Loading automations"
-                    title="All automations"
-                    variant="list"
-                  />
-                </AutomationsPageLayout>
-              ) : loggedIn ? (
-                <AutomationsPageLayout>
-                  <AutomationsPage enabled={loggedIn} view="list" />
-                </AutomationsPageLayout>
+                <AutomationPage enabled={loggedIn} tab="overview" />
               ) : (
                 <Navigate replace to="/" />
               )
@@ -661,6 +631,18 @@ function LegacyAutomationsRedirect() {
   );
 }
 
+/** Execution history became the Runs tab of the Automation page. */
+function LegacyAutomationExecutionsRedirect() {
+  const location = useLocation();
+  const { automationId } = useParams();
+  return (
+    <Navigate
+      replace
+      to={`${automationPath(automationId ?? "", "runs")}${location.search}${location.hash}`}
+    />
+  );
+}
+
 function LegacySystemRedirect(props: { section: "locations" | "people" }) {
   const location = useLocation();
   const legacyPrefix = `/${props.section}`;

package/src/client/components/DetailsPanel.tsx

@@ -110,20 +110,19 @@ export function DetailsPanel(props: {
       className="grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] border-l border-dashboard-border bg-dashboard-bg-elevated"
     >
       <header className="flex items-center justify-between gap-3 border-b border-dashboard-border py-2 pl-5 pr-3">
-        <div className="flex min-w-0 items-center gap-3">
-          <div className="min-w-0">{props.title}</div>
-          {props.actions ? (
-            <div className="flex items-center gap-0.5">{props.actions}</div>
-          ) : null}
+        <div className="min-w-0 flex-1">{props.title}</div>
+        {/* Keep actions beside close, so they do not move with the title width. */}
+        <div className="flex shrink-0 items-center gap-0.5">
+          {props.actions}
+          <Button
+            ref={closeRef}
+            aria-label={closeLabel}
+            onClick={onClose}
+            size="icon"
+          >
+            <X aria-hidden="true" size={15} />
+          </Button>
         </div>
-        <Button
-          ref={closeRef}
-          aria-label={closeLabel}
-          onClick={onClose}
-          size="icon"
-        >
-          <X aria-hidden="true" size={15} />
-        </Button>
       </header>
       <div className="min-h-0 overflow-y-auto overscroll-contain">
         {props.children}

package/src/client/components/Drawer.tsx

@@ -1,20 +1,31 @@
+import { X } from "lucide-react";
 import { useRef, type ReactNode } from "react";
 
 import { cn } from "../styles";
-import { Sheet, SheetContent, SheetHeader } from "./ui/sheet";
+import { Button } from "./ui/button";
+import {
+  Drawer as DrawerRoot,
+  DrawerClose,
+  DrawerContent as DrawerPopup,
+} from "./ui/drawer";
 import { useSheet } from "./ui/useSheet";
 
 type DrawerProps = {
   actions?: ReactNode;
   children: ReactNode;
   closeLabel: string;
+  /** Remove the body inset, so content such as the event log meets the edges. */
+  flush?: boolean;
   header: ReactNode;
   onClose(): void;
   openKey: string;
   width?: "default" | "wide" | "narrow";
 } & ({ titleId: string; label?: never } | { label: string; titleId?: never });
 
-/** Render a side drawer with shared modal focus and dismissal behavior. */
+/**
+ * Render a side drawer with shared modal focus and dismissal behavior.
+ * A drawer opened from inside another drawer stacks in front of it.
+ */
 export function Drawer(props: DrawerProps) {
   return <DrawerContent key={props.openKey} {...props} />;
 }
@@ -23,37 +34,49 @@ function DrawerContent(props: DrawerProps) {
   const closeRef = useRef<HTMLButtonElement>(null);
   const sheet = useSheet(props.onClose, closeRef);
   return (
-    <Sheet {...sheet.rootProps}>
-      <SheetContent
+    <DrawerRoot {...sheet.rootProps} swipeDirection="right">
+      <DrawerPopup
         {...sheet.contentProps}
         aria-label={props.label}
         aria-labelledby={props.titleId}
-        side="right"
-        closeButtonProps={{
-          ref: closeRef,
-          "aria-label": props.closeLabel,
-          className:
-            "right-4 top-[max(0.75rem,env(safe-area-inset-top))] md:right-5",
-        }}
+        data-dashboard-modal=""
         className={cn(
-          "grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] gap-0 outline-none data-[side=right]:w-full data-[side=right]:sm:max-w-none",
+          "data-[swipe-axis=x]:[--drawer-content-width:100%] data-[swipe-axis=x]:sm:[--drawer-content-width:100%]",
           props.width === "wide"
-            ? "data-[side=right]:md:w-[min(760px,94vw)]"
+            ? "data-[swipe-axis=x]:md:[--drawer-content-width:min(760px,94vw)]"
             : props.width === "narrow"
-              ? "data-[side=right]:md:w-[min(440px,94vw)]"
-              : "data-[side=right]:md:w-[min(560px,94vw)]",
+              ? "data-[swipe-axis=x]:md:[--drawer-content-width:min(440px,94vw)]"
+              : "data-[swipe-axis=x]:md:[--drawer-content-width:min(560px,94vw)]",
         )}
       >
-        <SheetHeader className="flex-row items-start gap-3 border-b border-dashboard-border bg-dashboard-bg-elevated px-4 py-3 pr-14 pt-[max(0.75rem,env(safe-area-inset-top))] md:pl-5 md:pr-14">
+        <header className="flex shrink-0 items-start gap-3 border-b border-dashboard-border bg-dashboard-bg-elevated px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] md:px-5">
           <div className="min-w-0 flex-1">{props.header}</div>
-          {props.actions ? (
-            <div className="flex items-start gap-1.5">{props.actions}</div>
-          ) : null}
-        </SheetHeader>
-        <div className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
+          <div className="flex shrink-0 items-start gap-1.5">
+            {props.actions}
+            <DrawerClose
+              render={
+                <Button
+                  ref={closeRef}
+                  aria-label={props.closeLabel}
+                  size="icon"
+                />
+              }
+            >
+              <X aria-hidden="true" size={15} strokeWidth={2.25} />
+            </DrawerClose>
+          </div>
+        </header>
+        <div
+          className={cn(
+            "min-h-0 flex-1 overflow-auto",
+            props.flush
+              ? "pb-[env(safe-area-inset-bottom)]"
+              : "px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5",
+          )}
+        >
           {props.children}
         </div>
-      </SheetContent>
-    </Sheet>
+      </DrawerPopup>
+    </DrawerRoot>
   );
 }

package/src/client/components/ImageAttachment.tsx

@@ -98,7 +98,7 @@ function ImagePreview(props: {
     <Dialog {...sheet.rootProps}>
       <DialogContent
         {...sheet.contentProps}
-        className="top-0 left-0 h-dvh w-screen max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden rounded-none border-0 bg-dashboard-ink p-0 shadow-none sm:max-w-none md:top-1/2 md:left-1/2 md:h-[min(90dvh,960px)] md:w-[min(92vw,1440px)] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-lg md:border"
+        className="top-0 left-0 h-dvh w-screen max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden rounded-none border-0 bg-dashboard-ink p-0 shadow-none max-h-none sm:top-0 sm:translate-y-0 md:top-1/2 md:left-1/2 md:h-[min(90dvh,960px)] md:w-[min(92vw,1440px)] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-lg md:border"
       >
         <div className="grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated">
           <header className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-1.5 border-b border-dashboard-border-strong bg-dashboard-surface-raised px-3 py-2 pt-[max(0.5rem,env(safe-area-inset-top))] md:px-4">

package/src/client/components/ParticipantAvatarStack.tsx

@@ -51,7 +51,8 @@ function ParticipantTooltipContent(props: { participant: ActorIdentity }) {
   );
 }
 
-function ParticipantAvatar(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 ParticipantAvatar(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}

package/src/client/components/README.md

@@ -32,7 +32,8 @@ 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`       |
@@ -62,6 +63,9 @@ 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.
@@ -149,7 +153,12 @@ 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.

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

@@ -10,7 +10,7 @@ const alertVariants = cva(
         default:
           "border-dashboard-border-strong bg-dashboard-surface-raised text-dashboard-text",
         destructive:
-          "border-rose-300/25 bg-dashboard-surface-raised text-rose-50 *:data-[slot=alert-description]:text-rose-100/70 *:[svg]:text-current",
+          "border-rose-300/20 bg-rose-300/[0.08] text-rose-100 *:data-[slot=alert-description]:text-rose-100/70 *:[svg]:text-rose-300",
       },
     },
     defaultVariants: {

package/src/client/components/ui/button-group.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+import { Separator } from "@dashboard/components/ui/separator";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+/** Join related buttons into one control and name it for assistive technology. */
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+/** Draw a divider between buttons in a group. */
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-dashboard-border data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator };

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

@@ -1,66 +1,60 @@
+import type { ComponentProps } from "react";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { cn } from "@dashboard/lib/utils";
 
-/** Own the open state and modal focus rules for a dialog. */
-function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+/** Own the open state and modal focus rules for a centered dialog. */
+function Dialog(props: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
 /** Close the dialog through Base UI dismissal and focus handling. */
-function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+function DialogClose(props: DialogPrimitive.Close.Props) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: DialogPrimitive.Backdrop.Props) {
-  return (
-    <DialogPrimitive.Backdrop
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 isolate z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Show the dialog above a backdrop, centered in the viewport. */
+/** Show a short task above the page. Small screens keep it near the top, clear of the keyboard. */
 function DialogContent({ className, ...props }: DialogPrimitive.Popup.Props) {
   return (
-    <DialogPortal>
-      <DialogOverlay />
+    <DialogPrimitive.Portal data-slot="dialog-portal">
+      {/* Dim an open sheet too, so a dialog opened from it stands out. */}
+      <DialogPrimitive.Backdrop
+        forceRender
+        data-slot="dialog-overlay"
+        className="fixed inset-0 z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0"
+      />
       <DialogPrimitive.Popup
-        data-slot="dialog-content"
         data-dashboard-modal=""
+        data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-4 text-sm text-dashboard-text shadow-lg outline-none transition-[opacity,scale] duration-180 motion-reduce:transition-none sm:max-w-sm data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95",
+          "fixed top-[max(1rem,env(safe-area-inset-top))] left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 gap-4 overflow-y-auto rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-5 text-sm text-dashboard-text shadow-lg outline-none transition-[opacity,scale] duration-180 motion-reduce:transition-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 sm:top-1/2 sm:-translate-y-1/2",
           className,
         )}
         {...props}
       />
-    </DialogPortal>
+    </DialogPrimitive.Portal>
   );
 }
 
-/** Give the dialog its accessible name. */
+/** Name the dialog task. */
 function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        "m-0 text-base leading-none font-medium text-dashboard-text",
-        className,
-      )}
+      className={cn("m-0 font-display text-lg font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keep dialog actions together at the end of the dialog. */
+function DialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-wrap justify-end gap-2", className)}
       {...props}
     />
   );
 }
 
-export { Dialog, DialogClose, DialogContent, DialogTitle };
+export { Dialog, DialogClose, DialogContent, DialogFooter, DialogTitle };