@sentry/junior-dashboard 0.264.0 → 0.266.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.264.0",
+  "version": "0.266.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -23,8 +23,8 @@
   ],
   "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",
@@ -34,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.264.0",
-    "@sentry/junior-plugin-api": "0.264.0"
+    "@sentry/junior": "0.266.0",
+    "@sentry/junior-plugin-api": "0.266.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",

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/ActorAvatar.tsx

@@ -1,5 +1,4 @@
-import { useState } from "react";
-import { cn } from "../styles";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 /** Show an actor's image, with initials when the image is missing or fails. */
 export function ActorAvatar(props: {
@@ -7,7 +6,6 @@ export function ActorAvatar(props: {
   imageUrl?: string;
   size: "detail" | "list";
 }) {
-  const [failedUrl, setFailedUrl] = useState<string>();
   const words = props.name.trim().split(/\s+/).filter(Boolean);
   // The compact size fits one initial at the 12px type floor.
   const initials =
@@ -17,24 +15,14 @@ export function ActorAvatar(props: {
         ? `${words[0]![0]}${words.at(-1)![0]}`
         : props.name.slice(0, 2);
   return (
-    <span
-      aria-hidden="true"
-      className={cn(
-        "relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-semibold leading-none tracking-tight text-dashboard-text-inverse shadow-sm",
-        props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
-      )}
-    >
-      {initials.toUpperCase()}
-      {props.imageUrl && props.imageUrl !== failedUrl ? (
-        <img
-          alt=""
-          className="absolute inset-0 size-full object-cover"
-          loading="lazy"
-          onError={() => setFailedUrl(props.imageUrl)}
-          referrerPolicy="no-referrer"
-          src={props.imageUrl}
-        />
-      ) : null}
-    </span>
+    <Avatar aria-hidden="true" size={props.size === "list" ? "sm" : "default"}>
+      <AvatarImage
+        alt=""
+        loading="lazy"
+        referrerPolicy="no-referrer"
+        src={props.imageUrl}
+      />
+      <AvatarFallback>{initials.toUpperCase()}</AvatarFallback>
+    </Avatar>
   );
 }

package/src/client/components/BottomSheet.tsx

@@ -1,3 +1,4 @@
+import { cn } from "../styles";
 import type { ReactNode } from "react";
 
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./ui/sheet";
@@ -7,6 +8,8 @@ import { useSheet } from "./ui/useSheet";
 export function BottomSheet(props: {
   children: ReactNode;
   label: string;
+  title?: string;
+  size?: "full" | "content";
   onClose(): void;
 }) {
   const sheet = useSheet(props.onClose);
@@ -16,10 +19,17 @@ export function BottomSheet(props: {
         {...sheet.contentProps}
         aria-label={props.label}
         side="bottom"
-        className="mx-auto max-h-full w-full max-w-2xl gap-0 rounded-t-2xl outline-none data-[side=bottom]:h-[85dvh]"
+        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>{props.label}</SheetTitle>
+          <SheetTitle className="break-words">
+            {props.title ?? props.label}
+          </SheetTitle>
         </SheetHeader>
         <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
           {props.children}

package/src/client/components/ConnectionBanner.tsx

@@ -1,4 +1,5 @@
 import { useDashboardOnline } from "../connection";
+import { Alert } from "./ui/alert";
 
 /** Explain that cached data remains visible while network reads are paused. */
 export function ConnectionBanner() {
@@ -6,12 +7,12 @@ export function ConnectionBanner() {
   if (online) return null;
 
   return (
-    <div
+    <Alert
       aria-live="polite"
-      className="border-t border-amber-300/15 bg-amber-300/[0.07] px-3 py-1.5 text-center font-sans text-xs text-amber-100/80"
+      className="block rounded-none border-0 border-t border-amber-300/15 bg-amber-300/[0.07] px-3 py-1.5 text-center font-sans text-xs text-amber-100/80"
       role="status"
     >
       You’re offline. Drafts stay on this device.
-    </div>
+    </Alert>
   );
 }

package/src/client/components/CopyButton.tsx

@@ -0,0 +1,82 @@
+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}
+        disabled={!props.getText || status === "copying"}
+        onClick={() => void copyText()}
+        size="menu"
+      >
+        <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,9 +1,7 @@
-import { X } from "lucide-react";
 import { useRef, type ReactNode } from "react";
 
 import { cn } from "../styles";
-import { Button } from "./Button";
-import { Sheet, SheetClose, SheetContent } from "./ui/sheet";
+import { Sheet, SheetContent, SheetHeader } from "./ui/sheet";
 import { useSheet } from "./ui/useSheet";
 
 type DrawerProps = {
@@ -13,9 +11,8 @@ type DrawerProps = {
   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) {
@@ -29,9 +26,15 @@ function DrawerContent(props: DrawerProps) {
     <Sheet {...sheet.rootProps}>
       <SheetContent
         {...sheet.contentProps}
+        aria-label={props.label}
         aria-labelledby={props.titleId}
         side="right"
-        showCloseButton={false}
+        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"
@@ -41,24 +44,12 @@ function DrawerContent(props: DrawerProps) {
               : "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>
+        <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}
         </div>

package/src/client/components/EmptyTelemetry.tsx

@@ -1,10 +1,12 @@
 import type { ReactNode } from "react";
 
+import { Empty, EmptyDescription } from "./ui/empty";
+
 /** Render the dashboard empty-state block with quiet warning context. */
 export function EmptyTelemetry(props: { children: ReactNode }) {
   return (
-    <div className="min-w-0 rounded-lg border border-dashboard-border-strong bg-dashboard-bg px-4 py-3 text-base leading-relaxed text-dashboard-text-muted">
-      {props.children}
-    </div>
+    <Empty>
+      <EmptyDescription>{props.children}</EmptyDescription>
+    </Empty>
   );
 }