@sentry/junior-dashboard 0.263.0 → 0.265.0

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

@@ -11,16 +11,17 @@ import {
   formatCompactNumber,
   formatCostSummary,
 } from "../../format";
+import { Area, Bar, CartesianGrid, ComposedChart, Scatter } from "recharts";
+import { ChartContainer, ChartTooltip } from "../ui/chart";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
-  ActivityChartTooltip,
   activityChartAverage,
-  ChartSvg,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "./ActivityChart";
 import { ChartHeader } from "./ChartHeader";
-import { useChartLayout } from "./useChartLayout";
 import { InputCacheChart } from "./InputCacheChart";
 
 type Metric = "costUsd" | "durationMs" | "tokens";
@@ -123,108 +124,80 @@ function MetricChart(props: {
   days: ConversationMetricDay[];
 }) {
   const { chart, days } = props;
-  const { ref, layout } = useChartLayout(
-    150,
-    chart.metric === "costUsd" ? 72 : 64,
-  );
   const values = days.map((day) => metricValue(day, chart.metric));
-  const maximum = Math.max(Number.EPSILON, ...values);
-  const step = layout.plotWidth / Math.max(1, days.length);
-  const points = values.map((value, index) => ({
-    x: layout.left + step * index + step / 2,
-    y: layout.top + layout.plotHeight - (value / maximum) * layout.plotHeight,
+  const data = days.map((day, index) => ({
+    date: day.date,
+    value: values[index]!,
   }));
-  const area = points.length
-    ? `M ${points[0]!.x} ${layout.top + layout.plotHeight} L ${points
-        .map((point) => `${point.x} ${point.y}`)
-        .join(" L ")} L ${points.at(-1)!.x} ${layout.top + layout.plotHeight} Z`
-    : "";
+  const maximum = Math.max(Number.EPSILON, ...values);
   const total = values.reduce((sum, value) => sum + value, 0);
   const average = activityChartAverage(values);
-  const barWidth = Math.max(1.5, Math.min(8, step * 0.65));
+  const series = {
+    dataKey: "value",
+    fill: "var(--color-value)",
+    isAnimationActive: false,
+  } as const;
 
   return (
     <Card>
       <ChartHeader title={chart.title} total={chart.format(total)} />
-      <div className="px-2 py-2" ref={ref}>
-        <ChartSvg
-          aria-label={`${chart.title} per ${props.bucketUnit === "6hour" ? "6 hours" : props.bucketUnit}`}
-          layout={layout}
+      <div className="px-2 py-2">
+        <ChartContainer
+          className="aspect-auto h-38 w-full"
+          config={{ value: { color: chart.color, label: chart.title } }}
         >
-          <ActivityChartGrid
-            format={chart.axisFormat}
-            layout={layout}
-            maximum={maximum}
-          />
-          {chart.type === "area" && area ? (
-            <>
-              <path d={area} fill={chart.color} fillOpacity={0.08} />
-              <polyline
-                fill="none"
-                points={points
-                  .map((point) => `${point.x},${point.y}`)
-                  .join(" ")}
-                stroke={chart.color}
+          <ComposedChart
+            aria-label={`${chart.title} per ${props.bucketUnit === "6hour" ? "6 hours" : props.bucketUnit}`}
+            data={data}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis format={chart.axisFormat} maximum={maximum} />
+            <ActivityChartXAxis keys={data.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: (typeof data)[number]) => [
+                    [chart.title, chart.format(day.value)],
+                  ]}
+                />
+              }
+            />
+            {chart.type === "bar" ? (
+              <Bar
+                {...series}
+                fillOpacity={0.8}
+                maxBarSize={8}
+                minPointSize={(value) => (value ? 2 : 0)}
+                radius={1.5}
+              />
+            ) : chart.type === "area" ? (
+              <Area
+                {...series}
+                dot={{ fillOpacity: 0.45, r: 2.5, stroke: "none" }}
+                fillOpacity={0.08}
+                stroke="var(--color-value)"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                strokeWidth="2"
+                strokeWidth={2}
+                type="linear"
               />
-            </>
-          ) : null}
-          {days.map((day, index) => {
-            const value = values[index]!;
-            const point = points[index]!;
-            const barHeight = (value / maximum) * layout.plotHeight;
-            const renderedBarHeight = Math.max(value ? 2 : 0, barHeight);
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={chart.format(value)}
-                date={day.date}
-                summary={chart.format(value)}
-              >
-                {chart.type === "bar" ? (
-                  <rect
-                    fill={chart.color}
-                    height={renderedBarHeight}
-                    opacity={value ? 0.8 : 0.1}
-                    rx="1.5"
-                    tabIndex={0}
-                    width={barWidth}
-                    x={point.x - barWidth / 2}
-                    y={layout.top + layout.plotHeight - renderedBarHeight}
-                  />
-                ) : (
-                  <circle
-                    cx={point.x}
-                    cy={point.y}
-                    fill={chart.color}
-                    opacity={chart.type === "scatter" ? 0.75 : 0.45}
-                    r={chart.type === "scatter" ? 3.5 : 2.5}
-                    tabIndex={0}
-                  />
-                )}
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            average={average}
-            format={
-              chart.metric === "tokens"
-                ? formatActivityChartAverage
-                : chart.format
-            }
-            layout={layout}
-            maximum={maximum}
-            stroke={chart.color}
-            unit={timeRangeBucketAverageUnit(props.bucketUnit)}
-          />
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => points[index]?.x ?? layout.left}
-          />
-        </ChartSvg>
+            ) : (
+              <Scatter {...series} fillOpacity={0.75} />
+            )}
+            <ActivityChartAverageLine
+              average={average}
+              format={
+                chart.metric === "tokens"
+                  ? formatActivityChartAverage
+                  : chart.format
+              }
+              stroke={chart.color}
+              unit={timeRangeBucketAverageUnit(props.bucketUnit)}
+            />
+          </ComposedChart>
+        </ChartContainer>
       </div>
     </Card>
   );

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

@@ -1,20 +1,21 @@
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "./ActivityChart";
 import { ChartHeader } from "./ChartHeader";
 import type { TimeRangeDays } from "../controls/TimeRangeSelector";
 import { Card } from "../layout/Card";
+import { ChartContainer, ChartTooltip } from "../ui/chart";
 import { formatActivityChartAverage, formatCompactNumber } from "../../format";
 import type { WorkspaceUsageDay } from "./workspaceUsage";
 
 const USAGE_COLOR = "var(--color-violet-400)";
+const chartConfig = { count: { color: USAGE_COLOR, label: "Usage" } };
 
 /** Plot successful Workspace switches for one recipe over a trailing window. */
 export function WorkspaceUsageChart(props: {
@@ -22,12 +23,6 @@ export function WorkspaceUsageChart(props: {
   range: TimeRangeDays;
   workspaceName: string;
 }) {
-  const layout = createActivityChartLayout(200);
-  const step =
-    props.days.length > 0
-      ? layout.plotWidth / props.days.length
-      : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
   const values = props.days.map((day) => day.count);
   const maximum = Math.max(1, ...values);
   const average = activityChartAverage(values);
@@ -43,57 +38,42 @@ export function WorkspaceUsageChart(props: {
         totalLabel={`last ${props.range} days`}
       />
       <div className="relative px-2 py-3 sm:px-4 sm:py-4">
-        <ChartSvg
-          aria-label={`Usage for ${props.workspaceName} during the last ${props.range} days`}
-          className="min-h-40 overflow-visible"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-50 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {props.days.map((day, index) => {
-            const x = layout.left + index * step + step / 2;
-            const barHeight = (day.count / maximum) * layout.plotHeight;
-            const renderedHeight = Math.max(day.count ? 2 : 0, barHeight);
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={<ActivityTooltipRows rows={[["usage", day.count]]} />}
-                date={day.date}
-                summary={`${day.count} switches`}
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill={USAGE_COLOR}
-                    height={renderedHeight}
-                    opacity={day.count ? 0.82 : 0.08}
-                    rx="2"
-                    width={barWidth}
-                    x={x - barWidth / 2}
-                    y={layout.top + layout.plotHeight - renderedHeight}
-                  />
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={step}
-                    x={layout.left + index * step}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            average={average}
-            format={formatActivityChartAverage}
-            layout={layout}
-            maximum={maximum}
-            stroke={USAGE_COLOR}
-          />
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Usage for ${props.workspaceName} during the last ${props.range} days`}
+            data={props.days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={props.days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: WorkspaceUsageDay) => [["usage", day.count]]}
+                />
+              }
+            />
+            <Bar
+              dataKey="count"
+              fill="var(--color-count)"
+              fillOpacity={0.82}
+              isAnimationActive={false}
+              maxBarSize={13}
+              minPointSize={(value) => (value ? 2 : 0)}
+              radius={2}
+            />
+            <ActivityChartAverageLine
+              average={average}
+              format={formatActivityChartAverage}
+              stroke={USAGE_COLOR}
+            />
+          </BarChart>
+        </ChartContainer>
         {!hasUsage ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No usage in this period.

package/src/client/components/controls/DirectorySortSelect.tsx

@@ -1,4 +1,4 @@
-import { Select } from "../Select";
+import { NativeSelect } from "../ui/native-select";
 
 export type DirectorySortOption = {
   label: string;
@@ -17,7 +17,7 @@ export function DirectorySortSelect(props: {
       <span className="flex h-full items-center border-r border-dashboard-border-subtle px-2 font-sans font-medium text-xs text-dashboard-text-muted">
         Sort
       </span>
-      <Select
+      <NativeSelect
         aria-label={props.ariaLabel}
         variant="sort"
         value={props.value}
@@ -32,7 +32,7 @@ export function DirectorySortSelect(props: {
             {option.label}
           </option>
         ))}
-      </Select>
+      </NativeSelect>
     </label>
   );
 }

package/src/client/components/controls/TimeRangeSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleButton } from "../Button";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
 
 /**
  * Fixed dashboard reporting window.
@@ -124,9 +124,7 @@ function sumHoursIntoSixHours<T extends { date: string }>(args: {
   // Fill the trailing 28 six-hour buckets when enough hour rows exist.
   if (args.hours.length >= 24) {
     const lastHour = args.hours[args.hours.length - 1]?.date;
-    const endMs = lastHour
-      ? Date.parse(`${lastHour}:00:00.000Z`)
-      : Date.now();
+    const endMs = lastHour ? Date.parse(`${lastHour}:00:00.000Z`) : Date.now();
     const end = new Date(endMs);
     end.setUTCMinutes(0, 0, 0);
     end.setUTCHours(Math.floor(end.getUTCHours() / 6) * 6, 0, 0, 0);
@@ -155,21 +153,18 @@ export function TimeRangeSelector(props: {
   value: TimeRangeDays;
 }) {
   return (
-    <div
+    <ToggleGroup
       aria-label="Reporting period"
-      className="flex items-center gap-1"
-      role="group"
+      onValueChange={([next]) => {
+        if (next) props.onChange(Number(next) as TimeRangeDays);
+      }}
+      value={[String(props.value)]}
     >
       {(props.options ?? DEFAULT_OPTIONS).map((days) => (
-        <ToggleButton
-          key={days}
-          onClick={() => props.onChange(days)}
-          pressed={props.value === days}
-          variant="segment"
-        >
+        <ToggleGroupItem key={days} value={String(days)}>
           {timeRangeLabel(days)}
-        </ToggleButton>
+        </ToggleGroupItem>
       ))}
-    </div>
+    </ToggleGroup>
   );
 }

package/src/client/components/layout/DashboardHeader.tsx

@@ -1,13 +1,11 @@
 import { ArrowLeft, Menu, X } from "lucide-react";
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, useRef, type ReactNode, type RefObject } from "react";
 import { Link, NavLink } from "react-router";
 
 import { getDashboardAgentName } from "../../agentName";
-import {
-  acquireBodyScrollLock,
-  releaseBodyScrollLock,
-} from "../../bodyScrollLock";
 import { JuniorLogo } from "../JuniorLogo";
+import { Sheet, SheetClose, SheetContent } from "../ui/sheet";
+import { useSheet } from "../ui/useSheet";
 import {
   MobileHeaderActionsSlot,
   MobileHeaderLiveSlot,
@@ -22,15 +20,6 @@ export type DashboardHeaderNavItem = {
   to: string;
 };
 
-const focusableSelector = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled]):not([type='hidden'])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "[tabindex]:not([tabindex='-1'])",
-].join(",");
-
 /** Render the primary dashboard shell header and optional mobile nav sheet. */
 export function DashboardHeader(props: {
   /** Back target used on mobile conversation detail. */
@@ -50,9 +39,7 @@ export function DashboardHeader(props: {
   version?: string;
   workspaceActive: boolean;
 }) {
-  const sheetRef = useRef<HTMLDivElement>(null);
-  const openButtonRef = useRef<HTMLButtonElement>(null);
-  const previousFocusRef = useRef<HTMLElement | undefined>(undefined);
+  const closeRef = useRef<HTMLButtonElement>(null);
   const onOpenChangeRef = useRef(props.onMobileNavigationOpenChange);
   onOpenChangeRef.current = props.onMobileNavigationOpenChange;
   // Conversation chrome is path-driven. Undefined title keeps the loading
@@ -90,56 +77,7 @@ export function DashboardHeader(props: {
     };
     closeWhenDesktop();
     mobile.addEventListener("change", closeWhenDesktop);
-
-    previousFocusRef.current =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : (openButtonRef.current ?? undefined);
-    acquireBodyScrollLock();
-    const focusFrame = requestAnimationFrame(() => {
-      sheetRef.current
-        ?.querySelector<HTMLElement>("[data-mobile-nav-close]")
-        ?.focus();
-    });
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Tab") return;
-      const sheet = sheetRef.current;
-      const focusable = Array.from(
-        sheet?.querySelectorAll<HTMLElement>(focusableSelector) ?? [],
-      ).filter(
-        (element) =>
-          element.tabIndex >= 0 && element.getClientRects().length > 0,
-      );
-      const first = focusable.at(0);
-      const last = focusable.at(-1);
-      if (!sheet || !first || !last) {
-        event.preventDefault();
-        return;
-      }
-      const active = document.activeElement;
-      if (event.shiftKey && (active === first || !sheet.contains(active))) {
-        event.preventDefault();
-        last.focus();
-      } else if (
-        !event.shiftKey &&
-        (active === last || !sheet.contains(active))
-      ) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      cancelAnimationFrame(focusFrame);
-      mobile.removeEventListener("change", closeWhenDesktop);
-      window.removeEventListener("keydown", onKeyDown);
-      releaseBodyScrollLock();
-      const previousFocus = previousFocusRef.current;
-      previousFocusRef.current = undefined;
-      if (previousFocus?.isConnected) previousFocus.focus();
-    };
+    return () => mobile.removeEventListener("change", closeWhenDesktop);
   }, [props.mobileNavigationOpen]);
 
   return (
@@ -168,7 +106,6 @@ export function DashboardHeader(props: {
             aria-label="Open navigation"
             className="grid size-10 cursor-pointer place-items-center rounded-lg border-0 bg-transparent text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70 md:hidden"
             onClick={() => props.onMobileNavigationOpenChange(true)}
-            ref={openButtonRef}
             tabIndex={props.mobileNavigationOpen ? -1 : undefined}
             type="button"
           >
@@ -225,22 +162,9 @@ export function DashboardHeader(props: {
         ) : null}
       </div>
       {props.mobileNavigationOpen ? (
-        <div
-          aria-label="Navigation"
-          aria-modal="true"
-          className="fixed inset-0 z-50 flex flex-col bg-dashboard-bg-elevated md:hidden"
-          id="mobile-navigation"
-          onClick={(event) => {
-            // Close on route taps and sheet actions such as Log out.
-            if (
-              event.target instanceof Element &&
-              event.target.closest("a[href], [data-mobile-nav-dismiss]")
-            ) {
-              onOpenChangeRef.current(false);
-            }
-          }}
-          ref={sheetRef}
-          role="dialog"
+        <MobileNavigationSheet
+          closeRef={closeRef}
+          onClose={() => onOpenChangeRef.current(false)}
         >
           <div className="flex items-center justify-between gap-3 border-b border-dashboard-border-subtle bg-dashboard-surface-raised px-3 py-2 pt-[max(0.5rem,env(safe-area-inset-top))]">
             <Link
@@ -250,15 +174,13 @@ export function DashboardHeader(props: {
             >
               {getDashboardAgentName()}
             </Link>
-            <button
+            <SheetClose
               aria-label="Close navigation"
               className="grid size-10 cursor-pointer place-items-center rounded-lg border-0 bg-transparent text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus/70"
-              data-mobile-nav-close
-              onClick={() => props.onMobileNavigationOpenChange(false)}
-              type="button"
+              ref={closeRef}
             >
               <X aria-hidden="true" size={20} strokeWidth={2} />
-            </button>
+            </SheetClose>
           </div>
           <div className="flex min-h-0 flex-1 flex-col">
             <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3">
@@ -307,8 +229,40 @@ export function DashboardHeader(props: {
               </div>
             ) : null}
           </div>
-        </div>
+        </MobileNavigationSheet>
       ) : null}
     </header>
   );
 }
+
+/** Show the mobile navigation in a full-screen shared sheet. */
+function MobileNavigationSheet(props: {
+  children: ReactNode;
+  closeRef: RefObject<HTMLButtonElement | null>;
+  onClose(): void;
+}) {
+  const sheet = useSheet(props.onClose, props.closeRef);
+  return (
+    <Sheet {...sheet.rootProps}>
+      <SheetContent
+        {...sheet.contentProps}
+        aria-label="Navigation"
+        className="inset-0 gap-0 bg-dashboard-bg-elevated outline-none data-[side=left]:w-full data-[side=left]:border-r-0 data-[side=left]:sm:max-w-none md:hidden"
+        id="mobile-navigation"
+        onClick={(event) => {
+          // Close on route taps and sheet actions such as Log out.
+          if (
+            event.target instanceof Element &&
+            event.target.closest("a[href], [data-mobile-nav-dismiss]")
+          ) {
+            props.onClose();
+          }
+        }}
+        showCloseButton={false}
+        side="left"
+      >
+        {props.children}
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/client/components/layout/SecondaryNavigation.tsx

@@ -22,6 +22,7 @@ export type SecondaryNavigationItem = SegmentedNavItem;
  */
 export function SecondaryNavigation(props: {
   ariaLabel: string;
+  className?: string;
   children: ReactNode;
   items: SecondaryNavigationItem[];
 }) {
@@ -34,7 +35,7 @@ export function SecondaryNavigation(props: {
     );
 
   return (
-    <div className="min-w-0">
+    <div className={cn("min-w-0", props.className)}>
       <SecondaryNavigationPortal
         desktop={
           <div className={cn(dashboardContainerClass, "min-w-0 px-4 md:px-8")}>

package/src/client/components/layout/VisualViewportShell.tsx

@@ -6,13 +6,13 @@ import { cn } from "../../styles";
 /**
  * Own the dashboard visual-viewport shell.
  *
- * Only this component may pin the conversation workspace to visualViewport
+ * Only this component may pin pages with separate scroll panes to visualViewport
  * geometry and write the related CSS variables / body scroll lock.
  */
 export function VisualViewportShell(props: {
   children: ReactNode;
   className?: string;
-  /** Pin the shell to the mobile visual viewport (conversation routes). */
+  /** Pin pages with separate scroll panes to the mobile visual viewport. */
   enabled: boolean;
   style?: CSSProperties;
 }) {