@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/pages/memory/MemoryTimeline.tsx

@@ -1,10 +1,9 @@
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
-  ActivityChartDateLabels,
-  ActivityChartGrid,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 import {
@@ -12,6 +11,7 @@ import {
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 import type { MemoryDay } from "./memoryDashboard";
 
 const series = [
@@ -19,6 +19,10 @@ const series = [
   { color: "var(--color-emerald-300)", key: "public", label: "Public" },
 ] as const;
 
+const chartConfig = Object.fromEntries(
+  series.map((item) => [item.key, { color: item.color, label: item.label }]),
+);
+
 /** Render viewer memory creation as a stacked personal/public timeline. */
 export function MemoryTimeline(props: {
   bucketUnit?: TimeRangeBucketUnit;
@@ -29,10 +33,6 @@ export function MemoryTimeline(props: {
   const bucketUnit = props.bucketUnit ?? "day";
 
   const days = props.days;
-  const layout = createActivityChartLayout(200);
-  const step =
-    days.length > 0 ? layout.plotWidth / days.length : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
   const totals = days.map((day) => day.personal + day.public);
   const maximum = Math.max(1, ...totals);
   const hasMemories = totals.some((total) => total > 0);
@@ -55,66 +55,43 @@ export function MemoryTimeline(props: {
       <ChartLegend ariaLabel="Memory visibility legend" items={series} />
 
       <div className="relative mt-3 overflow-hidden">
-        <ChartSvg
-          aria-label={`Memories learned during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
-          className="min-h-40"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-50 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {days.map((day, dayIndex) => {
-            let stackedHeight = 0;
-            const x = layout.left + dayIndex * step + (step - barWidth) / 2;
-            const total = totals[dayIndex] ?? 0;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[
-                      ["personal", day.personal],
-                      ["public", day.public],
-                      ["total", total],
-                    ]}
-                  />
-                }
-                date={day.date}
-                summary={`${day.personal} personal, ${day.public} public, ${total} total memories`}
-              >
-                <g tabIndex={0}>
-                  {series.map((item) => {
-                    const value = day[item.key];
-                    const segmentHeight = (value / maximum) * layout.plotHeight;
-                    stackedHeight += segmentHeight;
-                    return (
-                      <rect
-                        fill={item.color}
-                        height={segmentHeight}
-                        key={item.key}
-                        opacity={0.82}
-                        rx="1"
-                        width={barWidth}
-                        x={x}
-                        y={layout.top + layout.plotHeight - stackedHeight}
-                      />
-                    );
-                  })}
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={Math.max(barWidth, 8)}
-                    x={x - (Math.max(barWidth, 8) - barWidth) / 2}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Memories learned during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
+            data={days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: MemoryDay) => [
+                    ["personal", day.personal],
+                    ["public", day.public],
+                    ["total", day.personal + day.public],
+                  ]}
+                />
+              }
+            />
+            {series.map((item) => (
+              <Bar
+                dataKey={item.key}
+                fill={`var(--color-${item.key})`}
+                fillOpacity={0.82}
+                isAnimationActive={false}
+                key={item.key}
+                maxBarSize={13}
+                stackId="visibility"
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
         {!hasMemories ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No memories were learned in this period.

package/src/client/pages/memory/memoryRecord.ts

@@ -32,7 +32,7 @@ function formattedDate(value: string): string {
   }).format(new Date(value));
 }
 
-/** Project one viewer-visible memory API record into the dashboard drawer model. */
+/** Project one viewer-visible memory API record into the dashboard details model. */
 export function memoryPageRecord(memory: MemoryRecord): PluginUserPageRecord {
   const learned =
     memory.origin === "automatic"

package/src/client/pages/people/ContributionGrid.tsx

@@ -1,6 +1,11 @@
 import { ActivityTooltipRows } from "../../components/charts/ActivityChart";
 import { formatDuration } from "../../components/Duration";
-import { Tooltip } from "../../components/Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTitle,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
 import { getDashboardAgentName } from "../../agentName";
 import { formatCompactNumber, formatCostSummary } from "../../format";
 import { cn } from "../../styles";
@@ -79,8 +84,22 @@ export function ContributionGrid(props: { days: ContributionDay[] }) {
           {weeks.flatMap((week, weekIndex) =>
             week.map((day, dayIndex) =>
               day ? (
-                <Tooltip
-                  content={
+                <Tooltip key={day.date}>
+                  <TooltipTrigger
+                    render={
+                      <span
+                        aria-label={`${day.date}: ${day.conversations} conversations, ${activityRuntime(day)}, ${formatCostSummary({ total: day.costUsd ?? 0 })} spend, ${formatCompactNumber(day.tokens ?? 0)} tokens`}
+                        className={cn(
+                          "size-3 border border-dashboard-overlay outline-none focus-visible:ring-2 focus-visible:ring-dashboard-focus",
+                          activityClass(day.conversations, max),
+                        )}
+                        role="listitem"
+                        tabIndex={0}
+                      />
+                    }
+                  />
+                  <TooltipContent>
+                    <TooltipTitle>{formatDate(day.date)}</TooltipTitle>
                     <ActivityTooltipRows
                       rows={[
                         ["conversations", day.conversations],
@@ -92,19 +111,7 @@ export function ContributionGrid(props: { days: ContributionDay[] }) {
                         ["tokens", formatCompactNumber(day.tokens ?? 0)],
                       ]}
                     />
-                  }
-                  key={day.date}
-                  label={formatDate(day.date)}
-                >
-                  <span
-                    aria-label={`${day.date}: ${day.conversations} conversations, ${activityRuntime(day)}, ${formatCostSummary({ total: day.costUsd ?? 0 })} spend, ${formatCompactNumber(day.tokens ?? 0)} tokens`}
-                    className={cn(
-                      "size-3 border border-dashboard-overlay outline-none focus-visible:ring-2 focus-visible:ring-dashboard-focus",
-                      activityClass(day.conversations, max),
-                    )}
-                    role="listitem"
-                    tabIndex={0}
-                  />
+                  </TooltipContent>
                 </Tooltip>
               ) : (
                 <span

package/src/client/pages/people/PeopleActivityChart.tsx

@@ -5,38 +5,21 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import type { PeopleActivityDayReport } from "@sentry/junior/api/schema";
 
+import { Area, AreaChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
-  type ActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 import { Card } from "../../components/layout/Card";
 import { CardHeader } from "../../components/layout/CardHeader";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 import { formatActivityChartAverage } from "../../format";
 
-function chartPoint(
-  day: PeopleActivityDayReport,
-  index: number,
-  count: number,
-  maximum: number,
-  layout: ActivityChartLayout,
-) {
-  return {
-    x: layout.left + (index / Math.max(1, count - 1)) * layout.plotWidth,
-    y:
-      layout.top +
-      layout.plotHeight -
-      (day.activePeople / maximum) * layout.plotHeight,
-  };
-}
-
 /** Plot distinct verified people with recorded conversation activity each day. */
 export function PeopleActivityChart(props: {
   bucketUnit?: TimeRangeBucketUnit;
@@ -46,20 +29,10 @@ export function PeopleActivityChart(props: {
   const bucketUnit = props.bucketUnit ?? "day";
   const chartTitle = `Active people per ${timeRangeBucketPerLabel(bucketUnit)}`;
 
-  const layout = createActivityChartLayout(260);
   const values = props.days.map((day) => day.activePeople);
   const maximum = Math.max(1, ...values);
   const average = activityChartAverage(values);
-  const points = props.days.map((day, index) =>
-    chartPoint(day, index, props.days.length, maximum, layout),
-  );
-  const baseline = layout.top + layout.plotHeight;
-  const line = points.map((point) => `${point.x},${point.y}`).join(" ");
-  const area = points.length
-    ? `M ${points[0]!.x} ${baseline} L ${points
-        .map((point) => `${point.x} ${point.y}`)
-        .join(" L ")} L ${points.at(-1)!.x} ${baseline} Z`
-    : "";
+  const dense = props.days.length > 30;
   return (
     <Card>
       <CardHeader
@@ -80,83 +53,71 @@ export function PeopleActivityChart(props: {
         }
       />
       <div className="px-2 py-3 sm:px-4 sm:py-4">
-        <ChartSvg
-          aria-label={chartTitle}
-          className="min-h-56 w-full overflow-visible"
-          layout={layout}
-        >
-          <defs>
-            <linearGradient id="people-area" x1="0" x2="0" y1="0" y2="1">
-              <stop
-                offset="0%"
-                stopColor="var(--color-amber-500)"
-                stopOpacity="0.3"
-              />
-              <stop
-                offset="100%"
-                stopColor="var(--color-amber-500)"
-                stopOpacity="0"
-              />
-            </linearGradient>
-            <linearGradient id="people-line" x1="0" x2="1" y1="0" y2="0">
-              <stop offset="0%" stopColor="var(--color-amber-500)" />
-              <stop offset="55%" stopColor="var(--color-amber-400)" />
-              <stop offset="100%" stopColor="var(--color-cyan-400)" />
-            </linearGradient>
-          </defs>
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {area ? <path d={area} fill="url(#people-area)" /> : null}
-          {line ? (
-            <polyline
-              fill="none"
-              points={line}
+        <ChartContainer className="aspect-auto h-65 w-full" config={{}}>
+          <AreaChart
+            aria-label={chartTitle}
+            data={props.days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <defs>
+              <linearGradient id="people-area" x1="0" x2="0" y1="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor="var(--color-amber-500)"
+                  stopOpacity="0.3"
+                />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-amber-500)"
+                  stopOpacity="0"
+                />
+              </linearGradient>
+              <linearGradient id="people-line" x1="0" x2="1" y1="0" y2="0">
+                <stop offset="0%" stopColor="var(--color-amber-500)" />
+                <stop offset="55%" stopColor="var(--color-amber-400)" />
+                <stop offset="100%" stopColor="var(--color-cyan-400)" />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={props.days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: PeopleActivityDayReport) => [
+                    ["active people", day.activePeople],
+                    ["conversations", day.conversations],
+                  ]}
+                />
+              }
+            />
+            <Area
+              activeDot={{ fill: "var(--color-amber-400)", r: 5 }}
+              dataKey="activePeople"
+              dot={{
+                fill: "var(--color-amber-400)",
+                fillOpacity: dense ? 0.35 : 0.75,
+                r: dense ? 3 : 4,
+                stroke: "none",
+              }}
+              fill="url(#people-area)"
+              fillOpacity={1}
+              isAnimationActive={false}
               stroke="url(#people-line)"
               strokeLinecap="round"
               strokeLinejoin="round"
-              strokeWidth="2.5"
+              strokeWidth={2.5}
+              type="linear"
             />
-          ) : null}
-          {props.days.map((day, index) => {
-            const point = points[index]!;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[
-                      ["active people", day.activePeople],
-                      ["conversations", day.conversations],
-                    ]}
-                  />
-                }
-                date={day.date}
-                summary={`${day.activePeople} active people, ${day.conversations} conversations`}
-              >
-                <circle
-                  cx={point.x}
-                  cy={point.y}
-                  fill="var(--color-amber-400)"
-                  opacity={props.days.length > 30 ? 0.35 : 0.75}
-                  r={props.days.length > 30 ? 3 : 4}
-                  tabIndex={0}
-                />
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-            average={average}
-            format={formatActivityChartAverage}
-            layout={layout}
-            maximum={maximum}
-            stroke="var(--color-amber-400)"
-          />
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => points[index]?.x ?? layout.left}
-          />
-        </ChartSvg>
+            <ActivityChartAverageLine
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+              average={average}
+              format={formatActivityChartAverage}
+              stroke="var(--color-amber-400)"
+            />
+          </AreaChart>
+        </ChartContainer>
       </div>
     </Card>
   );

package/src/client/pages/people/ProfileCodeChanges.tsx

@@ -3,7 +3,7 @@ import type { CodeChangeSummaryReport } from "@sentry/junior/api/schema";
 
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
 import { FilterGroup } from "../../components/FilterBar";
-import { Select } from "../../components/Select";
+import { NativeSelect } from "../../components/ui/native-select";
 import { Card } from "../../components/layout/Card";
 import { CodeChangeRow } from "../code/CodeChangeRow";
 
@@ -57,7 +57,7 @@ export function ProfileCodeChanges(props: {
         </div>
         <div className="flex flex-wrap gap-3">
           <FilterGroup className="w-36" label="State">
-            <Select
+            <NativeSelect
               aria-label="Filter changes by state"
               onChange={(event) => setState(event.currentTarget.value)}
               value={state}
@@ -67,10 +67,10 @@ export function ProfileCodeChanges(props: {
                   {option.label} ({count(option.value)})
                 </option>
               ))}
-            </Select>
+            </NativeSelect>
           </FilterGroup>
           <FilterGroup className="w-36" label="Opened">
-            <Select
+            <NativeSelect
               aria-label="Filter changes by opened date"
               onChange={(event) => setOpenedDays(event.currentTarget.value)}
               value={openedDays}
@@ -80,7 +80,7 @@ export function ProfileCodeChanges(props: {
                   {option.label}
                 </option>
               ))}
-            </Select>
+            </NativeSelect>
           </FilterGroup>
         </div>
       </div>

package/src/client/pages/system/BaseSandboxCard.tsx

@@ -3,7 +3,7 @@ import type { BaselineSnapshotReport } from "@sentry/junior/api/schema";
 
 import { Card } from "../../components/layout/Card";
 import { formatMs, formatRelativeTime, formatTime } from "../../format";
-import { formatSandboxSize } from "./SandboxSizeSummary";
+import { formatSandboxSize } from "./sandboxSize";
 
 /**
  * Show the base Sandbox: the default size and the baseline snapshot.

package/src/client/pages/system/ConversationActivityChart.tsx

@@ -1,4 +1,4 @@
-import { useChartLayout } from "../../components/charts/useChartLayout";
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   type TimeRangeBucketUnit,
   timeRangeBucketAverageUnit,
@@ -7,27 +7,28 @@ import type { ConversationMetricDay } from "@sentry/junior/api/schema";
 
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartHeader } from "../../components/charts/ChartHeader";
 import { Card } from "../../components/layout/Card";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 import { formatActivityChartAverage, formatCompactNumber } from "../../format";
 
+const chartConfig = {
+  conversations: { color: "var(--color-cyan-400)", label: "Conversations" },
+};
+
 /** Plot root conversations with recorded activity each day or hour. */
 export function ConversationActivityChart(props: {
   bucketUnit?: TimeRangeBucketUnit;
   days: ConversationMetricDay[];
 }) {
   const bucketUnit = props.bucketUnit ?? "day";
-  const { ref, layout } = useChartLayout(150);
   const maximum = Math.max(1, ...props.days.map((day) => day.conversations));
-  const step = layout.plotWidth / Math.max(1, props.days.length);
-  const barWidth = Math.max(2, Math.min(24, step * 0.68));
   const values = props.days.map((day) => day.conversations);
   const total = values.reduce((sum, value) => sum + value, 0);
   const average = activityChartAverage(values);
@@ -39,65 +40,46 @@ export function ConversationActivityChart(props: {
         title="Conversation activity"
         total={formatCompactNumber(total)}
       />
-      <div className="px-2 py-2" ref={ref}>
-        <ChartSvg
-          aria-label={`Conversations per ${bucketUnit === "6hour" ? "6 hours" : bucketUnit}`}
-          layout={layout}
+      <div className="px-2 py-2">
+        <ChartContainer
+          className="aspect-auto h-38 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.conversations / maximum) * layout.plotHeight;
-            const renderedHeight = Math.max(
-              day.conversations ? 2 : 0,
-              barHeight,
-            );
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[["conversations", day.conversations]]}
-                  />
-                }
-                date={day.date}
-                summary={`${day.conversations} conversations`}
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill="var(--color-cyan-400)"
-                    height={renderedHeight}
-                    opacity={day.conversations ? 0.78 : 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="var(--color-cyan-400)"
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-          />
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Conversations per ${bucketUnit === "6hour" ? "6 hours" : bucketUnit}`}
+            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: ConversationMetricDay) => [
+                    ["conversations", day.conversations],
+                  ]}
+                />
+              }
+            />
+            <Bar
+              dataKey="conversations"
+              fill="var(--color-conversations)"
+              fillOpacity={0.78}
+              isAnimationActive={false}
+              maxBarSize={24}
+              minPointSize={(value) => (value ? 2 : 0)}
+              radius={2}
+            />
+            <ActivityChartAverageLine
+              average={average}
+              format={formatActivityChartAverage}
+              stroke="var(--color-cyan-400)"
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+            />
+          </BarChart>
+        </ChartContainer>
       </div>
     </Card>
   );

package/src/client/pages/system/GuardianActivity.tsx

@@ -128,10 +128,9 @@ export function GuardianActivity(props: {
                 }
                 date={day.date}
                 summary={`${day.allow} allowed, ${day.ask} asked, ${day.deny} denied, ${formatCostSummary({ total: day.costUsd ?? 0 })}`}
-                triggerClassName="h-full min-w-0 flex-1 items-end"
               >
                 <button
-                  className="flex w-full min-w-0 flex-col justify-end overflow-hidden rounded-t-sm bg-dashboard-fill-soft focus-visible:outline-1 focus-visible:outline-dashboard-focus"
+                  className="flex min-w-0 flex-1 flex-col justify-end overflow-hidden rounded-t-sm bg-dashboard-fill-soft focus-visible:outline-1 focus-visible:outline-dashboard-focus"
                   style={{ height: `${height}%` }}
                   type="button"
                 >