@sentry/junior-dashboard 0.263.0 → 0.265.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.263.0",
+  "version": "0.265.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -23,8 +23,10 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.9.0",
-    "@radix-ui/react-hover-card": "^1.1.23",
     "@tanstack/react-query": "^5.100.14",
+    "@uidotdev/usehooks": "2.4.1",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.5.0",
     "hono": "^4.13.11",
     "lucide-react": "^1.17.0",
     "nitro": "3.0.260522-beta",
@@ -32,10 +34,11 @@
     "react-dom": "^19.2.6",
     "react-is": "^19.2.6",
     "react-router": "^7.18.2",
+    "recharts": "3.8.0",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior": "0.263.0",
-    "@sentry/junior-plugin-api": "0.263.0"
+    "@sentry/junior": "0.265.0",
+    "@sentry/junior-plugin-api": "0.265.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -47,9 +50,11 @@
     "@vitest/coverage-v8": "4.1.12",
     "eslint": "^10.8.0",
     "oxlint": "^1.79.0",
+    "shadcn": "4.23.0",
     "tailwindcss": "^4.3.0",
     "tsdown": "0.23.1",
     "tsup": "^8.5.1",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12"
   },

package/src/api/schema.ts

@@ -37,7 +37,6 @@ export const dashboardConfigSchema = z
     authRequired: z.boolean(),
     authPath: z.string(),
     basePath: z.string(),
-    componentGallery: z.boolean(),
     sentryConversationLinks: z.boolean(),
     timeZone: z.string().optional(),
     version: z.string().min(1),

package/src/app.ts

@@ -79,7 +79,6 @@ export interface JuniorDashboardOptions {
   authPath?: string;
   authRequired?: boolean;
   auth?: DashboardAuth;
-  componentGallery?: boolean;
   mockConversations?: boolean;
 }
 
@@ -129,9 +128,6 @@ function resolveDashboardOptions(
     ...options,
     authRequired:
       options.authRequired ?? readEnvFlag("JUNIOR_DASHBOARD_AUTH_REQUIRED"),
-    componentGallery:
-      options.componentGallery ??
-      readEnvFlag("JUNIOR_DASHBOARD_COMPONENT_GALLERY"),
     mockConversations:
       options.mockConversations ??
       readEnvFlag("JUNIOR_DASHBOARD_MOCK_CONVERSATIONS"),
@@ -142,12 +138,8 @@ function isJsonRoute(pathname: string): boolean {
   return pathname.startsWith("/api/");
 }
 
-function isDashboardPagePath(
-  pathname: string,
-  basePath: string,
-  options: { componentGallery?: boolean } = {},
-): boolean {
-  for (const { nested, path } of dashboardPagePaths(basePath, options)) {
+function isDashboardPagePath(pathname: string, basePath: string): boolean {
+  for (const { nested, path } of dashboardPagePaths(basePath)) {
     if (pathname === path || (nested && pathname.startsWith(`${path}/`))) {
       return true;
     }
@@ -158,7 +150,6 @@ function isDashboardPagePath(
 
 interface DashboardReturnPathOptions {
   authenticatedRoutes?: readonly AuthenticatedRoute[];
-  componentGallery?: boolean;
 }
 
 function dashboardReturnPath(
@@ -167,7 +158,7 @@ function dashboardReturnPath(
   options: DashboardReturnPathOptions = {},
 ): string | undefined {
   if (
-    !isDashboardPagePath(url.pathname, basePath, options) &&
+    !isDashboardPagePath(url.pathname, basePath) &&
     !isAuthPath(url.pathname, options.authenticatedRoutes ?? [])
   ) {
     return undefined;
@@ -190,7 +181,7 @@ function requestedReturnPath(
   const returnUrl = new URL(next, url.origin);
   if (
     returnUrl.origin !== url.origin ||
-    (!isDashboardPagePath(returnUrl.pathname, basePath, options) &&
+    (!isDashboardPagePath(returnUrl.pathname, basePath) &&
       !isAuthPath(returnUrl.pathname, options.authenticatedRoutes ?? []))
   ) {
     return undefined;
@@ -399,7 +390,6 @@ export function createDashboardApp(
     if (canonicalUrl) return Response.redirect(canonicalUrl, 302);
     const returnUrl = callbackUrl(c.req.raw, basePath, {
       authenticatedRoutes,
-      componentGallery: options.componentGallery,
     });
     if (!authRequired || !auth) {
       return Response.redirect(returnUrl, 302);
@@ -471,7 +461,6 @@ export function createDashboardApp(
     if (!auth) {
       return unauthorized(c.req.raw, basePath, canonicalBaseURL, {
         authenticatedRoutes,
-        componentGallery: options.componentGallery,
       });
     }
     const browserSession = await auth.getSession(c.req.raw);
@@ -491,7 +480,6 @@ export function createDashboardApp(
     if (!session) {
       return unauthorized(c.req.raw, basePath, canonicalBaseURL, {
         authenticatedRoutes,
-        componentGallery: options.componentGallery,
       });
     }
     if (!dashboardSessionIsAuthorized(session, allowedDomains)) {
@@ -543,9 +531,7 @@ export function createDashboardApp(
     }
   }
 
-  for (const { nested, path } of dashboardPagePaths(basePath, {
-    componentGallery: options.componentGallery,
-  })) {
+  for (const { nested, path } of dashboardPagePaths(basePath)) {
     app.get(path, () => renderDashboard(basePath, agentName));
     if (nested) {
       app.get(`${path}/*`, () => renderDashboard(basePath, agentName));
@@ -580,7 +566,6 @@ export function createDashboardApp(
       authRequired,
       authPath,
       basePath,
-      componentGallery: options.componentGallery === true,
       sentryConversationLinks: hasSentryConversationLinks(),
       timeZone: dashboardTimeZone(),
       version: JUNIOR_VERSION,

package/src/client/App.tsx

@@ -31,7 +31,6 @@ import { useDashboardServerVersion } from "./dashboard-version";
 import { ConversationWorkspace } from "./conversations/ConversationWorkspace";
 import { ConversationWorkspaceLoading } from "./conversations/ConversationWorkspaceLoading";
 import { useConversationData } from "./conversations/queries";
-import { ComponentsPage } from "./pages/dev/ComponentsPage";
 import { codeRepositoryTabs } from "./pages/code/codeRepositoryRoutes";
 import { RepositoryPage } from "./pages/code/RepositoryPage";
 import { CodePage } from "./pages/code/CodePage";
@@ -49,13 +48,17 @@ import {
 } from "./pages/system/SystemPageLayout";
 import { WorkspaceFormPage } from "./pages/system/WorkspaceFormPage";
 import { WorkspacesPage } from "./pages/system/WorkspacesPage";
-import { MemoryRouteLoading } from "./pages/memory/MemoryPageLayout";
+import {
+  isMemoryLibraryPath,
+  MemoryRouteLoading,
+} from "./pages/memory/MemoryPageLayout";
 import { AutomationExecutionsPage } from "./pages/automations/AutomationExecutionsPage";
 import { AutomationRunsPage } from "./pages/automations/AutomationRunsPage";
 import { AutomationVersionsPage } from "./pages/automations/AutomationVersionsPage";
 import { AutomationsPage } from "./pages/automations/AutomationsPage";
 import {
   AutomationsPageLayout,
+  hasAutomationDetailsFrame,
   AutomationsRouteLoading,
 } from "./pages/automations/AutomationsPageLayout";
 import {
@@ -121,17 +124,6 @@ export function DashboardShell() {
     setMobileNavigationOpen(false);
   }, [location.pathname]);
 
-  useEffect(() => {
-    if (!mobileNavigationOpen) return;
-
-    function closeOnEscape(event: KeyboardEvent) {
-      if (event.key === "Escape") setMobileNavigationOpen(false);
-    }
-
-    document.addEventListener("keydown", closeOnEscape);
-    return () => document.removeEventListener("keydown", closeOnEscape);
-  }, [mobileNavigationOpen]);
-
   async function signOut() {
     await fetch(`${data?.config.authPath ?? "/api/auth"}/sign-out`, {
       credentials: "same-origin",
@@ -142,7 +134,14 @@ export function DashboardShell() {
 
   return (
     <DashboardChromeProvider>
-      <VisualViewportShell className="bg-dashboard-bg" enabled={workspace}>
+      <VisualViewportShell
+        className="bg-dashboard-bg"
+        enabled={
+          workspace ||
+          hasAutomationDetailsFrame(location.pathname) ||
+          isMemoryLibraryPath(location.pathname)
+        }
+      >
         <DashboardChrome
           banner={
             <>
@@ -424,22 +423,6 @@ export function DashboardShell() {
             path="/conversations/:conversationId"
           />
           <Route element={<Navigate replace to="/" />} path="/conversations" />
-          <Route
-            element={
-              loading ? (
-                <LoadingView label="Loading components" />
-              ) : !data ? (
-                <LoadingView
-                  label={query.error?.message ?? "Dashboard unavailable"}
-                />
-              ) : data.config.componentGallery ? (
-                <ComponentsPage />
-              ) : (
-                <Navigate replace to="/" />
-              )
-            }
-            path="/dev/*"
-          />
           <Route
             element={<LegacySystemRedirect section="people" />}
             path="/people"
@@ -496,6 +479,21 @@ export function DashboardShell() {
             }
             path="/system/workspaces/new"
           />
+          <Route
+            element={
+              loading ? (
+                <SystemRouteLoading
+                  description="Repository recipes Junior can switch into."
+                  label="Loading Workspaces"
+                  title="Workspaces"
+                  variant="list"
+                />
+              ) : (
+                <WorkspacesPage />
+              )
+            }
+            path="/system/workspaces/:workspaceId"
+          />
           <Route
             element={
               loading ? (
@@ -506,7 +504,7 @@ export function DashboardShell() {
                 <WorkspaceFormPage />
               )
             }
-            path="/system/workspaces/:workspaceId"
+            path="/system/workspaces/:workspaceId/edit"
           />
           <Route
             element={

package/src/client/api.ts

@@ -103,6 +103,13 @@ export function useConversationsData(search = "") {
         signal,
       ),
     placeholderData: keepPreviousData,
+    // Active rows change while no Conversation is open, such as a new title.
+    refetchInterval: (query) =>
+      query.state.data?.conversations.some(
+        (conversation) => conversation.status === "active",
+      )
+        ? 10_000
+        : false,
     retry: false,
   });
 }

package/src/client/components/BottomSheet.tsx

@@ -1,31 +1,39 @@
+import { cn } from "../styles";
 import type { ReactNode } from "react";
 
-import { Sheet, SheetBody, SheetContent } from "./Sheet";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./ui/sheet";
+import { useSheet } from "./ui/useSheet";
 
-/** Show details in a Base UI sheet with a swipe handle and no header controls. */
+/** Show app details in the shadcn sheet with a visible title and close control. */
 export function BottomSheet(props: {
   children: ReactNode;
   label: string;
+  title?: string;
+  size?: "full" | "content";
   onClose(): void;
 }) {
+  const sheet = useSheet(props.onClose);
   return (
-    <Sheet onClose={props.onClose} side="bottom">
-      <SheetContent label={props.label} side="bottom">
-        <div className="rounded-t-2xl px-4 pt-1 md:px-5">
-          <div
-            aria-hidden="true"
-            data-drawer-handle=""
-            className="flex touch-none cursor-grab justify-center py-3 active:cursor-grabbing"
-          >
-            <span className="h-1 w-9 rounded-full bg-dashboard-border-interactive" />
-          </div>
-        </div>
-        <SheetBody
-          data-base-ui-swipe-ignore=""
-          className="min-h-0 overflow-y-auto overscroll-contain"
-        >
+    <Sheet {...sheet.rootProps}>
+      <SheetContent
+        {...sheet.contentProps}
+        aria-label={props.label}
+        side="bottom"
+        className={cn(
+          "mx-auto w-full max-w-2xl gap-0 rounded-t-2xl outline-none",
+          props.size === "content"
+            ? "max-h-[85dvh]"
+            : "max-h-full data-[side=bottom]:h-[85dvh]",
+        )}
+      >
+        <SheetHeader className="border-b border-dashboard-border">
+          <SheetTitle className="break-words">
+            {props.title ?? props.label}
+          </SheetTitle>
+        </SheetHeader>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
           {props.children}
-        </SheetBody>
+        </div>
       </SheetContent>
     </Sheet>
   );

package/src/client/components/CopyButton.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { Check, CircleAlert, Copy } from "lucide-react";
+
+import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+/** Copy available text and show whether the clipboard write succeeded. */
+export function CopyButton(props: {
+  getText?: () => Promise<string> | string;
+  label: string;
+  copyingLabel?: string;
+  /** `menu` shows icon + label for mobile overflow lists. */
+  layout?: "icon" | "menu";
+}) {
+  const [status, setStatus] = useState<
+    "copied" | "copying" | "failed" | "idle"
+  >("idle");
+  const label =
+    status === "copied"
+      ? "Copied"
+      : status === "copying"
+        ? (props.copyingLabel ?? "Copying")
+        : status === "failed"
+          ? "Copy failed"
+          : props.label;
+  const Icon = {
+    copied: Check,
+    copying: Copy,
+    failed: CircleAlert,
+    idle: Copy,
+  }[status];
+
+  async function copyText() {
+    if (!props.getText) return;
+
+    try {
+      setStatus("copying");
+      await navigator.clipboard.writeText(await props.getText());
+      setStatus("copied");
+    } catch {
+      setStatus("failed");
+    }
+  }
+
+  if (props.layout === "menu") {
+    return (
+      <button
+        aria-label={label}
+        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={!props.getText || status === "copying"}
+        onClick={() => void copyText()}
+        type="button"
+      >
+        <Icon aria-hidden="true" size={16} strokeWidth={2} />
+        <span>{label}</span>
+      </button>
+    );
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            focusableWhenDisabled
+            aria-label={label}
+            disabled={!props.getText || status === "copying"}
+            onClick={() => void copyText()}
+            size="icon"
+          >
+            <Icon
+              aria-hidden="true"
+              className={status === "failed" ? "text-rose-300" : undefined}
+              size={15}
+              strokeWidth={2}
+            />
+          </Button>
+        }
+      />
+      <TooltipContent size="compact">{label}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/client/components/DetailsPanel.tsx

@@ -0,0 +1,133 @@
+import { X } from "lucide-react";
+import { useEffect, useRef, useSyncExternalStore, type ReactNode } from "react";
+
+import { Button } from "./ui/button";
+import { BottomSheet } from "./BottomSheet";
+import { Drawer } from "./Drawer";
+
+const panelMediaQuery = "(min-width: 1280px)";
+
+function subscribeToPanelLayout(onChange: () => void) {
+  const media = window.matchMedia(panelMediaQuery);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function hasPanelSpace() {
+  return window.matchMedia(panelMediaQuery).matches;
+}
+
+/** Report whether details fit beside their source instead of in a sheet. */
+export function useDetailsPanel(): boolean {
+  return useSyncExternalStore(
+    subscribeToPanelLayout,
+    hasPanelSpace,
+    () => false,
+  );
+}
+
+/** Show details beside their source, or in a bottom sheet when space is limited. */
+export function DetailsPanel(props: {
+  actions?: ReactNode;
+  children: ReactNode;
+  onClose(): void;
+  label: string;
+  title: ReactNode;
+  sheetTitle?: string;
+  /** Nested details stay modal inside an existing drawer. */
+  overlay?: boolean;
+}) {
+  const { onClose, overlay } = props;
+  const closeLabel = `Close ${props.label.toLowerCase()}`;
+  const panel = useDetailsPanel();
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const wasPanel = useRef(panel);
+  useEffect(() => {
+    if (
+      panel &&
+      !wasPanel.current &&
+      !document.querySelector("[data-dashboard-modal]")
+    ) {
+      closeRef.current?.focus({ preventScroll: true });
+    }
+    wasPanel.current = panel;
+  }, [panel]);
+  useEffect(() => {
+    if (!panel || overlay) return;
+    function onKeyDown(event: KeyboardEvent) {
+      if (
+        event.key === "Escape" &&
+        !event.defaultPrevented &&
+        !document.querySelector("[data-dashboard-modal]")
+      ) {
+        event.preventDefault();
+        onClose();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [panel, overlay, onClose]);
+  if (!panel) {
+    return (
+      <BottomSheet
+        label={props.label}
+        title={props.sheetTitle}
+        onClose={onClose}
+      >
+        {props.actions ? (
+          <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]">
+            <div className="min-h-0">{props.children}</div>
+            <div className="flex justify-end gap-1 border-t border-dashboard-border px-4 py-2">
+              {props.actions}
+            </div>
+          </div>
+        ) : (
+          props.children
+        )}
+      </BottomSheet>
+    );
+  }
+
+  if (overlay) {
+    return (
+      <Drawer
+        actions={props.actions}
+        closeLabel={closeLabel}
+        header={props.title}
+        label={props.label}
+        onClose={onClose}
+        openKey={props.label}
+        width="wide"
+      >
+        {props.children}
+      </Drawer>
+    );
+  }
+
+  return (
+    <aside
+      aria-label={props.label}
+      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>
+        <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}
+      </div>
+    </aside>
+  );
+}

package/src/client/components/Drawer.tsx

@@ -1,57 +1,58 @@
-import { X } from "lucide-react";
 import { useRef, type ReactNode } from "react";
 
 import { cn } from "../styles";
-import { Button } from "./Button";
-import { Sheet, SheetBody, SheetClose, SheetContent } from "./Sheet";
+import { Sheet, SheetContent, SheetHeader } from "./ui/sheet";
+import { useSheet } from "./ui/useSheet";
 
-/** Render a side drawer with shared modal focus and dismissal behavior. */
-export function Drawer(props: {
+type DrawerProps = {
   actions?: ReactNode;
   children: ReactNode;
   closeLabel: string;
   header: ReactNode;
   onClose(): void;
   openKey: string;
-  titleId: string;
   width?: "default" | "wide" | "narrow";
-}) {
+} & ({ titleId: string; label?: never } | { label: string; titleId?: never });
+
+/** Render a side drawer with shared modal focus and dismissal behavior. */
+export function Drawer(props: DrawerProps) {
+  return <DrawerContent key={props.openKey} {...props} />;
+}
+
+function DrawerContent(props: DrawerProps) {
   const closeRef = useRef<HTMLButtonElement>(null);
+  const sheet = useSheet(props.onClose, closeRef);
   return (
-    <Sheet key={props.openKey} onClose={props.onClose} side="right">
+    <Sheet {...sheet.rootProps}>
       <SheetContent
-        initialFocusRef={closeRef}
-        titleId={props.titleId}
+        {...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",
+        }}
         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",
           props.width === "wide"
-            ? "md:w-[min(760px,94vw)]"
+            ? "data-[side=right]:md:w-[min(760px,94vw)]"
             : props.width === "narrow"
-              ? "md:w-[min(440px,94vw)]"
-              : "md:w-[min(560px,94vw)]",
+              ? "data-[side=right]:md:w-[min(440px,94vw)]"
+              : "data-[side=right]:md:w-[min(560px,94vw)]",
         )}
       >
-        <header className="relative grid grid-cols-[minmax(0,1fr)_auto] 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">{props.header}</div>
-          <div className="flex items-start gap-1.5">
-            {props.actions}
-            <SheetClose
-              render={
-                <Button
-                  ref={closeRef}
-                  aria-label={props.closeLabel}
-                  size="icon"
-                  title="Close"
-                />
-              }
-            >
-              <X aria-hidden="true" size={15} strokeWidth={2.25} />
-            </SheetClose>
-          </div>
-        </header>
-        <SheetBody className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
+        <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">
+          <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">
           {props.children}
-        </SheetBody>
+        </div>
       </SheetContent>
     </Sheet>
   );