@sentry/junior-dashboard 0.264.0 → 0.265.0

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

@@ -1,10 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 import { CalendarClock, Zap } from "lucide-react";
-import { useNavigate } from "react-router";
 import type { AutomationRun } from "@sentry/junior/api/schema";
 
 import { useAutomationRunsData } from "../../api";
-import { ToggleButton } from "../../components/Button";
 import { FilterBar, FilterGroup } from "../../components/FilterBar";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
@@ -13,22 +11,32 @@ import {
   pageItems,
   PagePagination,
 } from "../../components/Pagination";
-import type { StatusChipTone } from "../../components/StatusChip";
+import { SelectableRow } from "../../components/SelectableRow";
 import { StatusDot } from "../../components/StatusDot";
+import { ToggleGroup, ToggleGroupItem } from "../../components/ui/toggle-group";
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
-import { conversationPath } from "../../conversations/conversationRoutes";
 import {
   formatCompactNumber,
   formatCostSummary,
   formatRuntime,
-  formatTime,
 } from "../../format";
 import {
   useDebouncedSearchParam,
   useSearchParamEnum,
 } from "../../searchParams";
 import { cn } from "../../styles";
+import {
+  AutomationRunDetails,
+  AutomationRunsFrame,
+  RunConversationLink,
+  useAutomationRunSelection,
+} from "./AutomationRunDetails";
+import {
+  automationRunStatusTone,
+  automationRunTitle,
+  formatAutomationRunTime,
+} from "./automationFormat";
 
 const RUN_PAGE_SIZE = 25;
 const RUN_KINDS = ["all", "scheduled", "event"] as const;
@@ -36,7 +44,7 @@ const RUN_STATUSES = ["all", "completed", "failed", "blocked"] as const;
 const EMPTY_RUNS: AutomationRun[] = [];
 /** Leading label columns flex; metric columns stay equal fixed widths. */
 const RUN_GRID =
-  "grid-cols-[minmax(0,1.4fr)_minmax(0,1.2fr)_5.5rem_5.5rem_5.5rem]";
+  "grid-cols-[minmax(0,1.4fr)_minmax(0,1.2fr)_5.5rem_5.5rem_5.5rem_2rem]";
 
 type RunKindFilter = (typeof RUN_KINDS)[number];
 type RunStatusFilter = (typeof RUN_STATUSES)[number];
@@ -85,9 +93,29 @@ export function AutomationRunsPage(props: { enabled: boolean }) {
   }, [page, totalPages]);
 
   const loading = !query.data && !query.error;
+  const selection = useAutomationRunSelection(
+    pagedRuns.map((run) => run.executionId),
+  );
+  const selectedRun = selection.runId
+    ? runs.find((run) => run.executionId === selection.runId)
+    : undefined;
 
   return (
-    <>
+    <AutomationRunsFrame
+      details={
+        selection.runId ? (
+          <AutomationRunDetails
+            key={selection.runId}
+            loading={loading}
+            onClose={selection.close}
+            run={selectedRun}
+            showAutomation
+          />
+        ) : null
+      }
+      label="Runs list"
+      listRef={selection.listRef}
+    >
       <PageHeader
         description="Newest runs across your automations and automations in public destinations."
         title="Runs"
@@ -105,28 +133,34 @@ export function AutomationRunsPage(props: { enabled: boolean }) {
             }}
           >
             <FilterGroup label="Type">
-              {RUN_KINDS.map((value) => (
-                <ToggleButton
-                  key={value}
-                  onClick={() => setKind(value)}
-                  pressed={kind === value}
-                  variant="pill"
-                >
-                  {value}
-                </ToggleButton>
-              ))}
+              <ToggleGroup
+                className="flex-wrap gap-2"
+                onValueChange={([next]) => {
+                  if (next) setKind(next);
+                }}
+                value={[kind]}
+              >
+                {RUN_KINDS.map((value) => (
+                  <ToggleGroupItem key={value} value={value} variant="pill">
+                    {value}
+                  </ToggleGroupItem>
+                ))}
+              </ToggleGroup>
             </FilterGroup>
             <FilterGroup label="Status">
-              {RUN_STATUSES.map((value) => (
-                <ToggleButton
-                  key={value}
-                  onClick={() => setStatus(value)}
-                  pressed={status === value}
-                  variant="pill"
-                >
-                  {value}
-                </ToggleButton>
-              ))}
+              <ToggleGroup
+                className="flex-wrap gap-2"
+                onValueChange={([next]) => {
+                  if (next) setStatus(next);
+                }}
+                value={[status]}
+              >
+                {RUN_STATUSES.map((value) => (
+                  <ToggleGroupItem key={value} value={value} variant="pill">
+                    {value}
+                  </ToggleGroupItem>
+                ))}
+              </ToggleGroup>
             </FilterGroup>
           </FilterBar>
           <div className="flex flex-wrap items-baseline justify-between gap-x-5 gap-y-1 border-b border-dashboard-border-subtle pb-3">
@@ -155,11 +189,11 @@ export function AutomationRunsPage(props: { enabled: boolean }) {
               <div className="min-w-0 overflow-x-auto">
                 <div className="min-w-[44rem]">
                   <div
+                    aria-hidden="true"
                     className={cn(
                       "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted md:grid",
                       RUN_GRID,
                     )}
-                    role="row"
                   >
                     <div>Run</div>
                     <div>Automation</div>
@@ -167,11 +201,17 @@ export function AutomationRunsPage(props: { enabled: boolean }) {
                     <div>Tokens</div>
                     <div>Cost</div>
                   </div>
-                  <div className="min-w-0" role="table">
+                  <div
+                    className="min-w-0"
+                    onKeyDown={selection.onRowsKeyDown}
+                    role="list"
+                  >
                     {pagedRuns.map((run) => (
                       <AutomationRunRow
                         key={`${run.kind}:${run.executionId}`}
+                        onSelect={() => selection.toggle(run.executionId)}
                         run={run}
+                        selected={selection.runId === run.executionId}
                       />
                     ))}
                   </div>
@@ -193,7 +233,7 @@ export function AutomationRunsPage(props: { enabled: boolean }) {
           ) : null}
         </>
       )}
-    </>
+    </AutomationRunsFrame>
   );
 }
 
@@ -208,12 +248,12 @@ function emptyRunsText(input: {
   return "No visible automations have run yet.";
 }
 
-function AutomationRunRow(props: { run: AutomationRun }) {
+function AutomationRunRow(props: {
+  onSelect(): void;
+  run: AutomationRun;
+  selected: boolean;
+}) {
   const { run } = props;
-  const navigate = useNavigate();
-  const title =
-    run.title?.trim() ||
-    (run.conversationId ? run.automationTitle : "No conversation");
   const costLabel =
     formatCostSummary(
       run.costUsd === undefined ? undefined : { total: run.costUsd },
@@ -221,54 +261,56 @@ function AutomationRunRow(props: { run: AutomationRun }) {
   const durationLabel = formatRuntime(run.durationMs) || "—";
   const tokensLabel =
     run.totalTokens === undefined ? "—" : formatCompactNumber(run.totalTokens);
-  const openConversation = () => {
-    if (run.conversationId) navigate(conversationPath(run.conversationId));
-  };
 
   return (
     <div
-      aria-disabled={!run.conversationId}
-      className={cn(
-        "group grid min-w-0 items-center gap-4 overflow-hidden border-b border-dashboard-border-subtle px-4 py-3 text-left text-inherit transition-colors last:border-b-0 max-md:grid-cols-1 max-md:gap-y-2 max-md:px-4 max-md:py-3.5 md:grid",
-        RUN_GRID,
-        run.conversationId
-          ? "cursor-pointer hover:bg-dashboard-fill-soft"
-          : "cursor-default opacity-80",
-      )}
-      onClick={openConversation}
-      onKeyDown={(event) => {
-        if (!run.conversationId) return;
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          openConversation();
-        }
-      }}
-      role={run.conversationId ? "link" : "row"}
-      tabIndex={run.conversationId ? 0 : undefined}
+      className="border-b border-dashboard-border-subtle last:border-b-0"
+      data-run-id={run.executionId}
+      role="listitem"
     >
-      <div className="min-w-0 overflow-hidden">
-        <div className="truncate text-sm font-medium leading-snug text-dashboard-text">
-          {title}
-        </div>
-        <div className="mt-1 truncate text-xs text-dashboard-text-muted">
-          {formatRunDate(run.executedAt)}
-        </div>
-      </div>
-      <div className="min-w-0 overflow-hidden">
-        <div className="truncate text-sm text-dashboard-text">
-          {run.automationTitle}
-        </div>
-        <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden text-dashboard-text-muted">
-          <AutomationKindIcon kind={run.kind} />
-          <StatusDot label={run.status} tone={runStatusTone(run.status)} />
-          <span className="truncate text-xs text-dashboard-text-muted">
-            {run.status}
+      <SelectableRow
+        className={cn(
+          "grid min-w-0 items-center gap-4 overflow-hidden px-4 py-3 max-md:grid-cols-1 max-md:gap-y-2 max-md:py-3.5",
+          RUN_GRID,
+        )}
+        onSelect={props.onSelect}
+        selected={props.selected}
+      >
+        <button
+          aria-expanded={props.selected}
+          className="block min-w-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+          onClick={props.onSelect}
+          type="button"
+        >
+          <span className="block truncate text-sm font-medium leading-snug text-dashboard-text">
+            {automationRunTitle(run, run.automationTitle)}
+          </span>
+          <span className="mt-1 block truncate text-xs text-dashboard-text-muted">
+            {formatAutomationRunTime(run.executedAt)}
           </span>
+        </button>
+        <div className="min-w-0 overflow-hidden">
+          <div className="truncate text-sm text-dashboard-text">
+            {run.automationTitle}
+          </div>
+          <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden text-dashboard-text-muted">
+            <AutomationKindIcon kind={run.kind} />
+            <StatusDot
+              label={run.status}
+              tone={automationRunStatusTone(run.status)}
+            />
+            <span className="truncate text-xs text-dashboard-text-muted">
+              {run.status}
+            </span>
+          </div>
         </div>
-      </div>
-      <MetricCell label="Duration" value={durationLabel} />
-      <MetricCell label="Tokens" value={tokensLabel} />
-      <MetricCell label="Cost" value={costLabel} />
+        <MetricCell label="Duration" value={durationLabel} />
+        <MetricCell label="Tokens" value={tokensLabel} />
+        <MetricCell label="Cost" value={costLabel} />
+        <div className="max-md:hidden">
+          <RunConversationLink conversationId={run.conversationId} />
+        </div>
+      </SelectableRow>
     </div>
   );
 }
@@ -305,20 +347,3 @@ function AutomationKindIcon(props: { kind: AutomationRun["kind"] }) {
     </span>
   );
 }
-
-function runStatusTone(status: AutomationRun["status"]): StatusChipTone {
-  if (status === "failed") return "danger";
-  if (status === "blocked") return "warning";
-  return "success";
-}
-
-function formatRunDate(value: string): string {
-  return formatTime(value, {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short",
-    year: "numeric",
-  });
-}

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

@@ -6,12 +6,12 @@ import {
   automationSchedulePreviewSchema,
   type AutomationEdit,
 } from "@sentry/junior/api/schema";
-import { Field } from "../../components/Field";
-import { Select } from "../../components/Select";
-import { TextInput } from "../../components/TextInput";
-import { Button } from "../../components/Button";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Field, FieldDescription, FieldLabel } from "../../components/ui/field";
+import { NativeSelect } from "../../components/ui/native-select";
+import { ToggleGroup, ToggleGroupItem } from "../../components/ui/toggle-group";
 import { post, DashboardApiError } from "../../http";
-import { cn } from "../../styles";
 import {
   scheduleDraft,
   weekdays,
@@ -64,8 +64,9 @@ export function AutomationScheduleFields(props: {
   return (
     <>
       <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
-        <Field label="Repeat" htmlFor="schedule-frequency">
-          <Select
+        <Field>
+          <FieldLabel htmlFor="schedule-frequency">Repeat</FieldLabel>
+          <NativeSelect
             id="schedule-frequency"
             value={frequency}
             onChange={(e) => {
@@ -106,10 +107,11 @@ export function AutomationScheduleFields(props: {
             <option value="weekly">Every week</option>
             <option value="monthly">Every month</option>
             <option value="yearly">Every year</option>
-          </Select>
+          </NativeSelect>
         </Field>
-        <Field label="Time" htmlFor="schedule-time">
-          <TextInput
+        <Field>
+          <FieldLabel htmlFor="schedule-time">Time</FieldLabel>
+          <Input
             size="comfortable"
             id="schedule-time"
             type="time"
@@ -136,41 +138,31 @@ export function AutomationScheduleFields(props: {
           {value.frequency === "weekly" ? (
             <fieldset>
               <legend className="mb-2 text-sm font-semibold">On</legend>
-              <div className="grid grid-cols-7 gap-1.5">
+              <ToggleGroup
+                className="grid grid-cols-7 gap-1.5"
+                multiple
+                onValueChange={(next) =>
+                  props.onChange({ ...value, weekdays: next })
+                }
+                value={value.weekdays ?? []}
+              >
                 {[...weekdays.slice(1), weekdays[0]].map((day) => (
-                  <button
-                    type="button"
+                  <ToggleGroupItem
                     key={day}
                     aria-label={day}
-                    aria-pressed={value.weekdays?.includes(day) ?? false}
-                    onClick={() =>
-                      props.onChange({
-                        ...value,
-                        weekdays: value.weekdays?.includes(day)
-                          ? value.weekdays.filter((d) => d !== day)
-                          : [...(value.weekdays ?? []), day],
-                      })
-                    }
-                    className={cn(
-                      "min-h-11 cursor-pointer rounded-md border px-1 text-xs font-medium capitalize focus-visible:outline-2 focus-visible:outline-dashboard-focus sm:min-h-10 sm:text-sm",
-                      value.weekdays?.includes(day)
-                        ? "border-dashboard-focus/50 bg-dashboard-focus/10 text-dashboard-focus"
-                        : "border-dashboard-border-emphasis text-dashboard-text-muted hover:bg-dashboard-fill-hover",
-                    )}
+                    className="h-auto min-h-11 min-w-0 border-dashboard-border-emphasis px-1 capitalize data-pressed:border-dashboard-focus/50 data-pressed:bg-dashboard-focus/10 data-pressed:text-dashboard-focus sm:min-h-10 sm:text-sm"
+                    value={day}
                   >
                     {day.slice(0, 3)}
-                  </button>
+                  </ToggleGroupItem>
                 ))}
-              </div>
+              </ToggleGroup>
             </fieldset>
           ) : null}
           <div className="grid grid-cols-1 items-start gap-4 sm:grid-cols-2">
-            <Field
-              label="Interval"
-              htmlFor="schedule-interval"
-              help="Number of calendar periods between runs."
-            >
-              <TextInput
+            <Field>
+              <FieldLabel htmlFor="schedule-interval">Interval</FieldLabel>
+              <Input
                 size="comfortable"
                 id="schedule-interval"
                 type="number"
@@ -181,9 +173,13 @@ export function AutomationScheduleFields(props: {
                   props.onChange({ ...value, interval: e.target.valueAsNumber })
                 }
               />
+              <FieldDescription id="schedule-interval-help">
+                Number of calendar periods between runs.
+              </FieldDescription>
             </Field>
-            <Field label="Start date" htmlFor="schedule-start">
-              <TextInput
+            <Field>
+              <FieldLabel htmlFor="schedule-start">Start date</FieldLabel>
+              <Input
                 size="comfortable"
                 id="schedule-start"
                 type="date"
@@ -199,8 +195,9 @@ export function AutomationScheduleFields(props: {
           </div>
           {value.frequency === "monthly" || value.frequency === "yearly" ? (
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <Field label="Day of month" htmlFor="schedule-day">
-                <TextInput
+              <Field>
+                <FieldLabel htmlFor="schedule-day">Day of month</FieldLabel>
+                <Input
                   size="comfortable"
                   id="schedule-day"
                   type="number"
@@ -216,8 +213,9 @@ export function AutomationScheduleFields(props: {
                 />
               </Field>
               {value.frequency === "yearly" ? (
-                <Field label="Month" htmlFor="schedule-month">
-                  <Select
+                <Field>
+                  <FieldLabel htmlFor="schedule-month">Month</FieldLabel>
+                  <NativeSelect
                     id="schedule-month"
                     value={value.month ?? 1}
                     onChange={(e) =>
@@ -235,15 +233,16 @@ export function AutomationScheduleFields(props: {
                         }).format(new Date(Date.UTC(2026, index, 1)))}
                       </option>
                     ))}
-                  </Select>
+                  </NativeSelect>
                 </Field>
               ) : null}
             </div>
           ) : null}
         </>
       ) : (
-        <Field label="Date" htmlFor="schedule-date">
-          <TextInput
+        <Field>
+          <FieldLabel htmlFor="schedule-date">Date</FieldLabel>
+          <Input
             size="comfortable"
             id="schedule-date"
             type="date"
@@ -257,12 +256,9 @@ export function AutomationScheduleFields(props: {
           />
         </Field>
       )}
-      <Field
-        label="Timezone"
-        htmlFor="schedule-timezone"
-        help="Use an IANA timezone. The schedule follows local time, including daylight saving time."
-      >
-        <TextInput
+      <Field>
+        <FieldLabel htmlFor="schedule-timezone">Timezone</FieldLabel>
+        <Input
           size="comfortable"
           id="schedule-timezone"
           list="automation-timezones"
@@ -276,6 +272,10 @@ export function AutomationScheduleFields(props: {
             <option key={zone}>{zone}</option>
           ))}
         </datalist>
+        <FieldDescription id="schedule-timezone-help">
+          Use an IANA timezone. The schedule follows local time, including
+          daylight saving time.
+        </FieldDescription>
       </Field>
       <div
         role="status"