@sentry/junior-dashboard 0.263.0 → 0.265.0

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

@@ -1,8 +1,15 @@
 import type { ConversationMetricDay } from "@sentry/junior/api/schema";
+import { ChevronRight } from "lucide-react";
 import { formatCompactNumber } from "../../format";
 import type { TimeRangeBucketUnit } from "../controls/TimeRangeSelector";
 import { formatActivityTooltipDate } from "./ActivityChart";
 import { cacheInputTotal, formatCacheShare } from "./cache-input";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../../styles";
 
 /** Identify the largest cache writes within the page's selected time window. */
 export function CacheWrites(props: {
@@ -20,58 +27,64 @@ export function CacheWrites(props: {
   if (!ranked.length) return null;
   const unit = props.bucketUnit === "6hour" ? "6 hours" : props.bucketUnit;
   return (
-    <details className="border-t border-dashboard-border-subtle px-4 py-3 sm:px-5">
-      <summary className="cursor-pointer font-sans tabular-nums text-xs text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
+    <Collapsible className="border-t border-dashboard-border-subtle px-4 py-3 sm:px-5">
+      <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 font-sans tabular-nums text-xs text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
+        <ChevronRight
+          aria-hidden="true"
+          className={dashboardDisclosureChevronClass}
+        />
         Largest cache writes
-      </summary>
-      <p className="mb-2 mt-3 font-sans tabular-nums text-xs leading-relaxed text-dashboard-text-muted">
-        Top three by tokens written per {unit}, within the selected time window.
-        Large writes alone do not mean a cache problem.
-      </p>
-      <div className="overflow-x-auto">
-        <table
-          aria-label="Largest cache writes"
-          className="w-full min-w-80 table-fixed border-collapse font-sans text-xs tabular-nums"
-        >
-          <thead className="text-dashboard-text-muted">
-            <tr>
-              <th scope="col" className="py-2 text-left font-normal">
-                {props.bucketUnit === "day" ? "Day" : "Starting at"}
-              </th>
-              <th scope="col" className="w-24 py-2 text-right font-normal">
-                Written
-              </th>
-              <th scope="col" className="w-24 py-2 text-right font-normal">
-                From cache
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {ranked.map((day) => (
-              <tr
-                key={day.date}
-                className="border-t border-dashboard-border-subtle"
-              >
-                <th
-                  scope="row"
-                  className="py-2 text-left font-normal text-dashboard-text-muted"
-                >
-                  {formatActivityTooltipDate(day.date)}
+      </CollapsibleTrigger>
+      <CollapsibleContent hiddenUntilFound>
+        <p className="mb-2 mt-3 font-sans tabular-nums text-xs leading-relaxed text-dashboard-text-muted">
+          Top three by tokens written per {unit}, within the selected time
+          window. Large writes alone do not mean a cache problem.
+        </p>
+        <div className="overflow-x-auto">
+          <table
+            aria-label="Largest cache writes"
+            className="w-full min-w-80 table-fixed border-collapse font-sans text-xs tabular-nums"
+          >
+            <thead className="text-dashboard-text-muted">
+              <tr>
+                <th scope="col" className="py-2 text-left font-normal">
+                  {props.bucketUnit === "day" ? "Day" : "Starting at"}
+                </th>
+                <th scope="col" className="w-24 py-2 text-right font-normal">
+                  Written
+                </th>
+                <th scope="col" className="w-24 py-2 text-right font-normal">
+                  From cache
                 </th>
-                <td className="py-2 text-right text-dashboard-text">
-                  {formatCompactNumber(day.cacheCreationTokens)}
-                </td>
-                <td className="py-2 text-right text-dashboard-text">
-                  {formatCacheShare(
-                    day.cachedInputTokens,
-                    cacheInputTotal(day),
-                  )}
-                </td>
               </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </details>
+            </thead>
+            <tbody>
+              {ranked.map((day) => (
+                <tr
+                  key={day.date}
+                  className="border-t border-dashboard-border-subtle"
+                >
+                  <th
+                    scope="row"
+                    className="py-2 text-left font-normal text-dashboard-text-muted"
+                  >
+                    {formatActivityTooltipDate(day.date)}
+                  </th>
+                  <td className="py-2 text-right text-dashboard-text">
+                    {formatCompactNumber(day.cacheCreationTokens)}
+                  </td>
+                  <td className="py-2 text-right text-dashboard-text">
+                    {formatCacheShare(
+                      day.cachedInputTokens,
+                      cacheInputTotal(day),
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }

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

@@ -1,23 +1,30 @@
+import { ChevronRight } from "lucide-react";
 import { useState } from "react";
 import type { ConversationMetricDay } from "@sentry/junior/api/schema";
 
-import { ToggleButton } from "../Button";
 import { Card } from "../layout/Card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../../styles";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
 import { formatCompactNumber } from "../../format";
 import {
   type TimeRangeBucketUnit,
   timeRangeBucketPerLabel,
 } from "../controls/TimeRangeSelector";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { ChartContainer, ChartTooltip } from "../ui/chart";
 import {
-  ActivityChartDateLabels,
-  ActivityChartGrid,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "./ActivityChart";
 import { ChartHeader } from "./ChartHeader";
 import { CacheWrites } from "./CacheWrites";
-import { useChartLayout } from "./useChartLayout";
 import {
   CACHE_INPUT_SERIES,
   cacheInputTotal,
@@ -26,6 +33,13 @@ import {
   summarizeCacheInput,
 } from "./cache-input";
 
+const chartConfig = {
+  ...Object.fromEntries(
+    CACHE_INPUT_SERIES.map(({ color, key, label }) => [key, { color, label }]),
+  ),
+  missing: { color: "var(--color-slate-400)", label: "Missing data" },
+};
+
 /** Show cache reuse and write volume without treating missing counters as zero. */
 export function InputCacheChart(props: {
   bucketUnit: TimeRangeBucketUnit;
@@ -33,40 +47,53 @@ export function InputCacheChart(props: {
 }) {
   const [mode, setMode] = useState<"share" | "tokens">("share");
   const summary = summarizeCacheInput(props.days);
-  const { ref, layout } = useChartLayout(160);
-  const reportedTotals = props.days.map((day) =>
-    CACHE_INPUT_SERIES.reduce((sum, { key }) => sum + (day[key] ?? 0), 0),
-  );
-  const maximum = mode === "share" ? 100 : Math.max(1, ...reportedTotals);
-  const step = layout.plotWidth / Math.max(1, props.days.length);
-  const barWidth = Math.min(32, step * 0.7);
-  const x = (index: number) => layout.left + step * (index + 0.5);
+  const data = props.days.map((day) => {
+    const total = cacheInputTotal(day);
+    const plotted = Object.fromEntries(
+      CACHE_INPUT_SERIES.map(({ key }) => {
+        const value = day[key] ?? 0;
+        return [
+          key,
+          mode === "share" ? (total ? (value / total) * 100 : 0) : value,
+        ];
+      }),
+    );
+    return {
+      ...plotted,
+      date: day.date,
+      day,
+      // A zero-height bar that `minPointSize` draws as a gray mark.
+      missing: total === undefined && hasCacheActivity(day) ? 0 : undefined,
+    };
+  });
+  const maximum =
+    mode === "share"
+      ? 100
+      : Math.max(
+          1,
+          ...props.days.map((day) =>
+            CACHE_INPUT_SERIES.reduce(
+              (sum, { key }) => sum + (day[key] ?? 0),
+              0,
+            ),
+          ),
+        );
 
   return (
     <Card>
       <ChartHeader
         title="Input cache"
         trailing={
-          <div
+          <ToggleGroup
             aria-label="Cache chart display"
-            className="flex gap-1"
-            role="group"
+            onValueChange={([next]) => {
+              if (next) setMode(next);
+            }}
+            value={[mode]}
           >
-            <ToggleButton
-              pressed={mode === "share"}
-              variant="segment"
-              onClick={() => setMode("share")}
-            >
-              Percent
-            </ToggleButton>
-            <ToggleButton
-              pressed={mode === "tokens"}
-              variant="segment"
-              onClick={() => setMode("tokens")}
-            >
-              Tokens
-            </ToggleButton>
-          </div>
+            <ToggleGroupItem value="share">Percent</ToggleGroupItem>
+            <ToggleGroupItem value="tokens">Tokens</ToggleGroupItem>
+          </ToggleGroup>
         }
       />
       <dl className="m-0 flex flex-wrap gap-x-5 gap-y-2 px-4 py-3 font-sans tabular-nums text-xs sm:px-5">
@@ -97,112 +124,91 @@ export function InputCacheChart(props: {
           reported values.
         </p>
       ) : null}
-      <div className="px-2 pb-2" ref={ref}>
-        <ChartSvg
-          aria-label={`Input cache ${mode} per ${timeRangeBucketPerLabel(props.bucketUnit)}`}
-          layout={layout}
+      <div className="px-2 pb-2">
+        <ChartContainer
+          className="aspect-auto h-40 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid
-            format={
-              mode === "share" ? (value) => `${value}%` : formatCompactNumber
-            }
-            layout={layout}
-            maximum={maximum}
-          />
-          {props.days.map((day, index) => {
-            const total = cacheInputTotal(day);
-            const incomplete = total === undefined && hasCacheActivity(day);
-            let offset = 0;
-            const bars = CACHE_INPUT_SERIES.map(({ key, color }) => {
-              const value = day[key] ?? 0;
-              const plotted =
-                mode === "share" ? (total ? (value / total) * 100 : 0) : value;
-              const height = (plotted / maximum) * layout.plotHeight;
-              offset += height;
-              return (
-                <rect
-                  key={key}
-                  fill={color}
-                  opacity={0.85}
-                  height={height}
-                  width={barWidth}
-                  x={x(index) - barWidth / 2}
-                  y={layout.top + layout.plotHeight - offset}
-                />
-              );
-            });
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                date={day.date}
-                summary={
-                  incomplete
-                    ? "Missing cache data"
-                    : total === undefined
-                      ? "No input reported"
-                      : `${formatCacheShare(day.cachedInputTokens, total)} cached · ${formatCompactNumber(total)} input tokens`
-                }
-                content={
-                  <ActivityTooltipRows
-                    rows={CACHE_INPUT_SERIES.map(({ key, label }) => [
+          <BarChart
+            aria-label={`Input cache ${mode} per ${timeRangeBucketPerLabel(props.bucketUnit)}`}
+            data={data}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis
+              format={
+                mode === "share" ? (value) => `${value}%` : formatCompactNumber
+              }
+              maximum={maximum}
+            />
+            <ActivityChartXAxis keys={data.map((day) => day.date)} />
+            {/* A hidden second axis lets the missing mark overlay the stack. */}
+            <XAxis dataKey="date" hide xAxisId="missing" />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={({ day }: (typeof data)[number]) => {
+                    const total = cacheInputTotal(day);
+                    return CACHE_INPUT_SERIES.map(({ key, label }) => [
                       label,
                       day[key] === undefined
                         ? "Not reported"
                         : `${formatCompactNumber(day[key])} · ${formatCacheShare(day[key], total)}`,
-                    ])}
-                  />
-                }
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill="transparent"
-                    x={x(index) - step / 2}
-                    y={layout.top}
-                    width={step}
-                    height={layout.plotHeight}
-                  />
-                  {bars}
-                  {incomplete ? (
-                    <rect
-                      fill="var(--color-slate-400)"
-                      x={x(index) - barWidth / 2}
-                      y={layout.top + layout.plotHeight - 3}
-                      width={barWidth}
-                      height={3}
-                    />
-                  ) : null}
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={x}
-          />
-        </ChartSvg>
+                    ]);
+                  }}
+                />
+              }
+            />
+            {CACHE_INPUT_SERIES.map(({ key }) => (
+              <Bar
+                dataKey={key}
+                fill={`var(--color-${key})`}
+                fillOpacity={0.85}
+                isAnimationActive={false}
+                key={key}
+                maxBarSize={32}
+                stackId="input"
+              />
+            ))}
+            <Bar
+              dataKey="missing"
+              fill="var(--color-missing)"
+              isAnimationActive={false}
+              maxBarSize={32}
+              minPointSize={3}
+              xAxisId="missing"
+            />
+          </BarChart>
+        </ChartContainer>
       </div>
       <CacheWrites days={props.days} bucketUnit={props.bucketUnit} />
-      <details className="border-t border-dashboard-border-subtle px-4 py-3 font-sans tabular-nums text-xs text-dashboard-text-muted sm:px-5">
-        <summary className="cursor-pointer text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
+      <Collapsible className="border-t border-dashboard-border-subtle px-4 py-3 font-sans tabular-nums text-xs text-dashboard-text-muted sm:px-5">
+        <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
           How to read this
-        </summary>
-        <div className="mt-3 grid gap-2 leading-relaxed">
-          <p className="m-0">
-            From cache is input reused. Written to cache is input saved for
-            reuse. Uncached is the remaining input.
-          </p>
-          <p className="m-0">
-            Percentages use total input tokens, not call counts. Gray marks and
-            — mean missing data; zero means a reported zero. The latest interval
-            may be incomplete.
-          </p>
-          <p className="m-0">
-            These totals can show when reuse changes, but not why. They do not
-            show individual calls or prove that every call reported cache use.
-          </p>
-        </div>
-      </details>
+        </CollapsibleTrigger>
+        <CollapsibleContent hiddenUntilFound>
+          <div className="mt-3 grid gap-2 leading-relaxed">
+            <p className="m-0">
+              From cache is input reused. Written to cache is input saved for
+              reuse. Uncached is the remaining input.
+            </p>
+            <p className="m-0">
+              Percentages use total input tokens, not call counts. Gray marks
+              and — mean missing data; zero means a reported zero. The latest
+              interval may be incomplete.
+            </p>
+            <p className="m-0">
+              These totals can show when reuse changes, but not why. They do not
+              show individual calls or prove that every call reported cache use.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </Card>
   );
 }

package/src/client/components/charts/README.md

@@ -27,12 +27,12 @@ or a cache failure rate.
 The list and chart consume the same selected buckets. There is no local time
 selector or comparison window. The list is collapsed until needed.
 
-`useChartLayout` measures the available width. Charts keep a fixed, compact
-height rather than growing taller on wide screens.
+The chart fills the available width. It keeps a fixed, compact height rather
+than growing taller on wide screens.
 
 This report has no per-call model, release, environment, trace, or write-cost
 fields. Add a reporting contract before adding those filters or drilldowns.
 A large write alone cannot identify cache expiry, a cold start, or prefix loss.
 
-The chart gallery includes a reuse drop and a missing counter. The System
-browser scenario covers display modes and verifies that the page time control also filters the list.
+The System browser scenario covers display modes and verifies that the page
+time control also filters the list.