@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/pages/automations/AutomationsPageLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { matchPath, useLocation } from "react-router";
 
 import {
   PageContentSkeleton,
@@ -8,29 +9,47 @@ import { PageHeader } from "../../components/layout/PageHeader";
 import { PageLayout } from "../../components/layout/PageLayout";
 import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation";
 
-const RESERVED_TASK_SEGMENTS = new Set(["list", "runs"]);
+/** Identify the Automation list and its selected Automation routes. */
+function isAutomationListPath(pathname: string): boolean {
+  const match = matchPath("/automations/:automationId", pathname);
+  return Boolean(match && match.params.automationId?.toLowerCase() !== "runs");
+}
+
+/** Identify Automation routes whose list scrolls on its own beside details. */
+export function hasAutomationDetailsFrame(pathname: string): boolean {
+  return (
+    isAutomationListPath(pathname) ||
+    Boolean(matchPath("/automations/runs", pathname)) ||
+    Boolean(matchPath("/automations/:automationId/executions", pathname))
+  );
+}
 
-function isTasksListPath(pathname: string): boolean {
-  if (
-    pathname === "/automations/list" ||
-    /^\/automations\/(scheduled|event)\/[^/]+\/edit$/.test(pathname)
-  )
-    return true;
-  const match = pathname.match(/^\/automations\/([^/]+)$/);
-  return Boolean(match?.[1] && !RESERVED_TASK_SEGMENTS.has(match[1]));
+function isAutomationListTabPath(pathname: string): boolean {
+  return (
+    isAutomationListPath(pathname) ||
+    Boolean(matchPath("/automations/:automationId/edit", pathname))
+  );
 }
 
 const taskNavigationItems = [
   { end: true, label: "Overview", to: "/automations" },
-  { isActive: isTasksListPath, label: "Automations", to: "/automations/list" },
+  {
+    isActive: isAutomationListTabPath,
+    label: "Automations",
+    to: "/automations/list",
+  },
   { label: "Runs", to: "/automations/runs" },
 ];
 
 /** Keep Automation navigation consistent across lists, details, and editing. */
-export function AutomationsNavigation(props: { children: ReactNode }) {
+export function AutomationsNavigation(props: {
+  children: ReactNode;
+  className?: string;
+}) {
   return (
     <SecondaryNavigation
       ariaLabel="Automations navigation"
+      className={props.className}
       items={taskNavigationItems}
     >
       {props.children}
@@ -40,9 +59,20 @@ export function AutomationsNavigation(props: { children: ReactNode }) {
 
 /** Place the shared secondary navigation above one Automations page. */
 export function AutomationsPageLayout(props: { children: ReactNode }) {
+  const list = hasAutomationDetailsFrame(useLocation().pathname);
   return (
-    <AutomationsNavigation>
-      <PageLayout>{props.children}</PageLayout>
+    <AutomationsNavigation
+      className={
+        list
+          ? "grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]"
+          : undefined
+      }
+    >
+      {list ? (
+        <div className="min-h-0">{props.children}</div>
+      ) : (
+        <PageLayout>{props.children}</PageLayout>
+      )}
     </AutomationsNavigation>
   );
 }
@@ -54,10 +84,12 @@ export function AutomationsRouteLoading(props: {
   title: string;
   variant: Extract<PageContentSkeletonVariant, "list" | "stats">;
 }) {
-  return (
+  const list = hasAutomationDetailsFrame(useLocation().pathname);
+  const content = (
     <>
       <PageHeader description={props.description} title={props.title} />
       <PageContentSkeleton label={props.label} variant={props.variant} />
     </>
   );
+  return list ? <PageLayout>{content}</PageLayout> : content;
 }

package/src/client/pages/automations/README.md

@@ -28,3 +28,60 @@ shows its error when a public reader cannot make a version active.
 
 Browser behavior lives in `e2e/automation-editor.spec.ts`. API and persistence
 coverage lives in core's `tests/integration/api/automation-edits.test.ts`.
+
+## Automation details
+
+The URL selects one Automation in the list. Route matching follows React
+Router, including trailing slashes. `AutomationDetails` uses the shared
+`DetailsPanel`: a 400px panel at 1280px and above, and a Base UI bottom sheet on
+smaller screens. The list stays interactive beside the panel. Each pane scrolls
+on its own. `VisualViewportShell` owns the viewport height and mobile body lock;
+`AutomationsPageLayout` keeps navigation above the list and details.
+
+Loading and access errors stay inside the details frame. Closing keeps the list
+query string and returns focus to the selected row. If that row is not on the
+current page, focus returns to the list. Selecting another Automation resets
+its disclosures and lifecycle feedback. Deleting the selected Automation closes
+its details. Edit and version history retain the list query string.
+
+The existing Automation browser journeys cover selection, loading and retry,
+focus, mobile dismissal, deletion, and lifecycle actions. Use mock reporting to
+review scheduled and event Automations in both themes at desktop and mobile
+widths. Keep layout and scrollbar checks in manual QA.
+
+Details lead with lifecycle, the next trigger, and the last execution result.
+Instructions follow, then compact trigger and delivery rows. The sheet header
+uses the Automation name. `AutomationStatus`
+keeps a failed execution distinct from whether future runs remain enabled. It
+shows block reasons and links to the last Conversation when attention is needed.
+Scheduled times use the shared shadcn Accordion to show the schedule timezone
+and browser time. About this Automation uses the same component. Both start
+collapsed and reset when the selection changes.
+Paused, blocked, completed, and unavailable Automations explain why there is no
+next run instead of showing "None".
+
+`AutomationRecentRuns` uses the existing execution-history query and cache. It
+shows up to three newest terminal runs, links to their Conversations when one
+was recorded, and displays recorded runtime and estimated cost. It omits run
+titles that repeat the Automation name. Its loading,
+empty, and retry states do not replace Automation settings. It does not infer
+queued or running work from terminal records.
+
+`AutomationLifecycle` owns revision-checked actions in a fixed footer. Edit and
+Delete use labeled icons there; list rows have no action menu. Public readers
+can edit settings. Delete and lifecycle actions stay creator-only. The shared
+shadcn Popover provides pause help beside those controls. The
+scroll region above it owns the summary and settings. Creator, creation date,
+connected accounts, run counts, and version history stay under About this
+Automation. Selection changes remount the content and actions together.
+
+Filters use a shadcn Popover at 768px and above and the shared BottomSheet below
+that width. Both edit the same URL filters immediately. Active filter chips
+remove one filter without clearing search, scope, or other filters. The mobile
+sheet fits its controls instead of taking the full details height.
+
+`AutomationDeleteDialog` names the Automation before deletion. It keeps errors
+and retry inside the dialog and blocks dismissal while the request is pending.
+Cancel returns focus to Delete. Successful deletion closes the selected details
+and returns focus to the list. Success toasts confirm Save, Pause, Resume, and
+Delete. Their state belongs to the mounted dashboard's Toaster provider.

package/src/client/pages/automations/TriggerFilters.tsx

@@ -0,0 +1,22 @@
+/** List an Event trigger's filters. Every filter must match. */
+export function TriggerFilters(props: { filters: readonly string[] }) {
+  if (props.filters.length === 0) {
+    return (
+      <p className="m-0 mt-1 text-xs text-dashboard-text-muted">
+        No filters. Runs on every selected event.
+      </p>
+    );
+  }
+  return (
+    <div className="mt-1 text-xs text-dashboard-text-muted">
+      <p className="m-0">Every filter must match:</p>
+      <ul className="m-0 list-disc pl-5">
+        {props.filters.map((filter) => (
+          <li className="break-words" key={filter}>
+            {filter}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/client/pages/automations/automationFormat.ts

@@ -1,8 +1,11 @@
-import type { AutomationSummary } from "@sentry/junior/api/schema";
+import type {
+  AutomationExecution,
+  AutomationSummary,
+} from "@sentry/junior/api/schema";
+import type { StatusChipTone } from "../../components/StatusChip";
 import { formatTime } from "../../format";
 
 type ScheduledAutomation = Extract<AutomationSummary, { kind: "scheduled" }>;
-type EventAutomation = Extract<AutomationSummary, { kind: "event" }>;
 
 /** Show the schedule with its timezone unless the schedule text already names it. */
 export function automationScheduleLabel(
@@ -13,31 +16,42 @@ export function automationScheduleLabel(
     : `${automation.schedule} (${automation.timezone})`;
 }
 
-/** Name event triggers in readable words. */
-export function automationEventNames(automation: EventAutomation): string {
-  return automation.events
-    .map((event) => event.replaceAll(/[._]/g, " "))
-    .join(", ");
-}
-
-/** Summarize event match conditions as one readable line. */
-export function automationEventConditions(automation: EventAutomation): string {
-  return Object.entries(automation.match ?? {})
-    .map(
-      ([field, value]) =>
-        `${field}: ${Array.isArray(value) ? value.join(" or ") : String(value)}`,
-    )
-    .join(" · ");
-}
-
-/** Format a run time with date, time, and zone for details and tooltips. */
-export function formatAutomationRunTime(value: string): string {
-  return formatTime(value, {
+/** Format a run in an explicit timezone, or the dashboard timezone by default. */
+export function formatAutomationRunTime(
+  value: string,
+  timeZone?: string,
+): string {
+  const options: Intl.DateTimeFormatOptions = {
     day: "numeric",
     hour: "numeric",
     minute: "2-digit",
     month: "short",
     timeZoneName: "short",
     year: "numeric",
-  });
+  };
+  return timeZone
+    ? new Intl.DateTimeFormat(undefined, { ...options, timeZone }).format(
+        new Date(value),
+      )
+    : formatTime(value, options);
+}
+
+/** Map a run outcome to its status color. */
+export function automationRunStatusTone(
+  status: AutomationExecution["status"],
+): StatusChipTone {
+  if (status === "failed") return "danger";
+  if (status === "blocked") return "warning";
+  return "success";
+}
+
+/** Name a run by its Conversation title, else by its Automation. */
+export function automationRunTitle(
+  run: AutomationExecution,
+  automationTitle: string,
+): string {
+  return (
+    run.title?.trim() ||
+    (run.conversationId ? automationTitle : "No conversation")
+  );
 }

package/src/client/pages/code/CodeActivityChart.tsx

@@ -4,24 +4,32 @@ import {
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
 import type { CodeActivityDay } from "@sentry/junior/api/schema";
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 
 import { Card } from "../../components/layout/Card";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 import { formatActivityChartAverage } from "../../format";
 
 const CREATED_COLOR = "var(--color-cyan-300)";
 const MERGED_COLOR = "var(--color-emerald-300)";
 const CLOSED_COLOR = "var(--color-rose-400)";
+const series = [
+  { color: CREATED_COLOR, key: "created", label: "Created" },
+  { color: MERGED_COLOR, key: "merged", label: "Merged" },
+  { color: CLOSED_COLOR, key: "closed", label: "Closed" },
+] as const;
+const chartConfig = Object.fromEntries(
+  series.map((item) => [item.key, { color: item.color, label: item.label }]),
+);
 
 /** Render created, merged, and closed code changes over a trailing window. */
 export function CodeActivityChart(props: {
@@ -33,12 +41,6 @@ export function CodeActivityChart(props: {
   const bucketUnit = props.bucketUnit ?? "day";
 
   const days = props.days;
-  const layout = createActivityChartLayout(220, { left: 40 });
-  const step =
-    days.length > 0 ? layout.plotWidth / days.length : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(10, step * 0.28));
-  const gap = Math.max(1, barWidth * 0.2);
-  const groupWidth = barWidth * 3 + gap * 2;
   const totals = days.map((day) => day.created + day.merged + day.closed);
   const maximum = Math.max(
     1,
@@ -58,99 +60,55 @@ export function CodeActivityChart(props: {
             Code changes created, merged, and closed each day.
           </p>
         </div>
-        <ChartLegend
-          ariaLabel="Code change legend"
-          items={[
-            { color: CREATED_COLOR, key: "created", label: "Created" },
-            { color: MERGED_COLOR, key: "merged", label: "Merged" },
-            { color: CLOSED_COLOR, key: "closed", label: "Closed" },
-          ]}
-        />
+        <ChartLegend ariaLabel="Code change legend" items={series} />
       </div>
 
       <div className="relative mt-5 overflow-hidden">
-        <ChartSvg
-          aria-label={`Code changes during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
-          className="min-h-40"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-55 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {days.map((day, dayIndex) => {
-            const groupX =
-              layout.left + dayIndex * step + (step - groupWidth) / 2;
-            const series = [
-              {
-                color: CREATED_COLOR,
-                key: "created",
-                label: "created",
-                value: day.created,
-              },
-              {
-                color: MERGED_COLOR,
-                key: "merged",
-                label: "merged",
-                value: day.merged,
-              },
-              {
-                color: CLOSED_COLOR,
-                key: "closed",
-                label: "closed",
-                value: day.closed,
-              },
-            ] as const;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={series.map((entry) => [entry.label, entry.value])}
-                  />
-                }
-                date={day.date}
-                summary={`${day.created} created, ${day.merged} merged, ${day.closed} closed`}
-              >
-                <g tabIndex={0}>
-                  {series.map((entry, seriesIndex) => {
-                    const height = (entry.value / maximum) * layout.plotHeight;
-                    const x = groupX + seriesIndex * (barWidth + gap);
-                    return (
-                      <rect
-                        fill={entry.color}
-                        height={height}
-                        key={entry.key}
-                        opacity={0.86}
-                        rx="1"
-                        width={barWidth}
-                        x={x}
-                        y={layout.top + layout.plotHeight - height}
-                      />
-                    );
-                  })}
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={Math.max(groupWidth, 8)}
-                    x={groupX - (Math.max(groupWidth, 8) - groupWidth) / 2}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-            average={average}
-            format={formatActivityChartAverage}
-            layout={layout}
-            maximum={maximum}
-            stroke="var(--color-slate-200)"
-          />
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Code changes during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
+            barGap={1}
+            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: CodeActivityDay) =>
+                    series.map((item) => [
+                      item.label.toLowerCase(),
+                      day[item.key],
+                    ])
+                  }
+                />
+              }
+            />
+            {series.map((item) => (
+              <Bar
+                dataKey={item.key}
+                fill={`var(--color-${item.key})`}
+                fillOpacity={0.86}
+                isAnimationActive={false}
+                key={item.key}
+                maxBarSize={10}
+                radius={1}
+              />
+            ))}
+            <ActivityChartAverageLine
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+              average={average}
+              format={formatActivityChartAverage}
+              stroke="var(--color-slate-200)"
+            />
+          </BarChart>
+        </ChartContainer>
         {!hasActivity ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No code changes in this period.

package/src/client/pages/code/CodePage.tsx

@@ -12,6 +12,14 @@ import {
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { PageLayout } from "../../components/layout/PageLayout";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
 import { CodeActivityChart } from "./CodeActivityChart";
 import { CodeChangeRow } from "./CodeChangeRow";
 import {
@@ -88,61 +96,50 @@ function CodeOverview(props: {
             </EmptyTelemetry>
           </div>
         ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[36rem] table-fixed border-collapse text-left">
-              <colgroup>
-                <col />
-                <col className="w-28" />
-                <col className="w-28" />
-                <col className="w-28" />
-              </colgroup>
-              <thead className="font-sans font-medium text-xs text-dashboard-text-muted">
-                <tr className="border-b border-dashboard-border-subtle">
-                  <th className="px-4 py-2.5 font-medium">Repository</th>
-                  <th className="px-4 py-2.5 text-right font-medium whitespace-nowrap">
-                    Created
-                  </th>
-                  <th className="px-4 py-2.5 text-right font-medium whitespace-nowrap">
-                    Merge rate
-                  </th>
-                  <th className="px-4 py-2.5 text-right font-medium whitespace-nowrap">
-                    Median cost
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.repositories.map((repository) => (
-                  <tr
-                    className="border-b border-dashboard-border-subtle last:border-b-0"
-                    key={repository.id}
-                  >
-                    <td className="min-w-0 px-4 py-3">
-                      <div className="truncate font-display text-sm text-dashboard-text">
-                        <Link
-                          className="text-inherit no-underline hover:text-dashboard-accent-text"
-                          to={codeRepositoryPath(repository.id)}
-                        >
-                          {repository.name}
-                        </Link>
-                      </div>
-                      <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
-                        {repository.provider}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-right font-sans text-sm tabular-nums whitespace-nowrap text-dashboard-text">
-                      {repository.created}
-                    </td>
-                    <td className="px-4 py-3 text-right font-sans text-sm tabular-nums whitespace-nowrap text-dashboard-text">
-                      {formatMergeRate(repository.mergeRate)}
-                    </td>
-                    <td className="px-4 py-3 text-right font-sans text-sm tabular-nums whitespace-nowrap text-dashboard-text">
-                      {formatCodeCost(repository.medianCostUsd)}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+          <Table className="min-w-[36rem] table-fixed">
+            <colgroup>
+              <col />
+              <col className="w-28" />
+              <col className="w-28" />
+              <col className="w-28" />
+            </colgroup>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="px-4">Repository</TableHead>
+                <TableHead className="px-4 text-right">Created</TableHead>
+                <TableHead className="px-4 text-right">Merge rate</TableHead>
+                <TableHead className="px-4 text-right">Median cost</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.repositories.map((repository) => (
+                <TableRow key={repository.id}>
+                  <TableCell className="min-w-0 px-4 py-3">
+                    <div className="truncate font-display text-sm text-dashboard-text">
+                      <Link
+                        className="text-inherit no-underline hover:text-dashboard-accent-text"
+                        to={codeRepositoryPath(repository.id)}
+                      >
+                        {repository.name}
+                      </Link>
+                    </div>
+                    <div className="mt-1 truncate font-mono text-xs text-dashboard-text-muted">
+                      {repository.provider}
+                    </div>
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right font-sans tabular-nums">
+                    {repository.created}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right font-sans tabular-nums">
+                    {formatMergeRate(repository.mergeRate)}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right font-sans tabular-nums">
+                    {formatCodeCost(repository.medianCostUsd)}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
         )}
       </Card>
       {data.changes.length > 0 ? (

package/src/client/pages/code/RepositoryPage.tsx

@@ -7,7 +7,7 @@ import {
   useCodeRepositoryConversationsData,
   useCodeRepositoryData,
 } from "../../api";
-import { ButtonLink } from "../../components/Button";
+import { buttonVariants } from "../../components/ui/button";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
 import { PageRouteLoading } from "../../components/PageRouteLoading";
 import {
@@ -18,7 +18,7 @@ import {
 import { PageHeader } from "../../components/layout/PageHeader";
 import { PageLayout } from "../../components/layout/PageLayout";
 import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation";
-import { buildConversations } from "../../format";
+import { buildConversations, workspacePath } from "../../format";
 import { CodeActivityChart } from "./CodeActivityChart";
 import { CodeChangeRow } from "./CodeChangeRow";
 import { CodeSummaryCards } from "./CodeSummaryCards";
@@ -98,7 +98,8 @@ export function RepositoryPage(props: { tab: CodeRepositoryTab }) {
             <div className="flex flex-wrap items-center gap-2">
               <TimeRangeSelector onChange={setRange} value={range} />
               {repository.url ? (
-                <ButtonLink
+                <Link
+                  className={buttonVariants()}
                   rel="noopener noreferrer"
                   target="_blank"
                   to={repository.url}
@@ -108,7 +109,7 @@ export function RepositoryPage(props: { tab: CodeRepositoryTab }) {
                     aria-hidden="true"
                     className="size-3.5 shrink-0"
                   />
-                </ButtonLink>
+                </Link>
               ) : null}
             </div>
           }
@@ -156,10 +157,7 @@ function RepositoryDescription(props: { data: CodeRepositoryReport }) {
       {workspaces.map((workspace, index) => (
         <span key={workspace.id}>
           {index > 0 ? ", " : null}
-          <Link
-            className={inlineLinkClass}
-            to={`/system/workspaces/${encodeURIComponent(workspace.id)}`}
-          >
+          <Link className={inlineLinkClass} to={workspacePath(workspace.id)}>
             {workspace.name}
           </Link>
         </span>