@sentry/junior-dashboard 0.233.0 → 0.234.0

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

@@ -11,7 +11,11 @@ import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation
 const RESERVED_TASK_SEGMENTS = new Set(["list", "runs"]);
 
 function isTasksListPath(pathname: string): boolean {
-  if (pathname === "/automations/list") return true;
+  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]));
 }
@@ -22,14 +26,21 @@ const taskNavigationItems = [
   { label: "Runs", to: "/automations/runs" },
 ];
 
+/** Keep Automation navigation consistent across lists, details, and editing. */
+export function AutomationsNavigation() {
+  return (
+    <SecondaryNavigation
+      ariaLabel="Automations navigation"
+      items={taskNavigationItems}
+    />
+  );
+}
+
 /** Place the shared secondary navigation above one Automations page. */
 export function AutomationsPageLayout(props: { children: ReactNode }) {
   return (
     <>
-      <SecondaryNavigation
-        ariaLabel="Automations navigation"
-        items={taskNavigationItems}
-      />
+      <AutomationsNavigation />
       <PageLayout>{props.children}</PageLayout>
     </>
   );

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

@@ -0,0 +1,19 @@
+# Automation editor
+
+Core owns validation, creator access, revision checks, Schedule previews, and
+the Event catalog. Preview requests cannot save or run work. Completed scheduled
+Automations remain read-only.
+
+The editor sends only changed fields. Keep unsupported triggers and stored
+Destinations intact unless the user replaces them. Outcomes keep their order.
+New messages can target only the current Destination or the creator.
+
+Query refreshes must not replace an unsaved draft. After a stale save, the user
+can keep their changed fields or load the latest saved version. Unchanged fields
+come from that version; core checks its revision again on save.
+
+The data router blocks navigation with unsaved changes. Browser unload uses the
+native prompt. Save and Cancel keep the list query string.
+
+Browser behavior lives in `e2e/automation-editor.spec.ts`. API and persistence
+coverage lives in core's `tests/integration/api/automation-edits.test.ts`.

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

@@ -0,0 +1,110 @@
+import type {
+  AutomationEdit,
+  AutomationScheduleIntent,
+  AutomationUpdate,
+} from "@sentry/junior/api/schema";
+
+export const weekdays = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+] as const;
+export type AutomationScheduleDraft =
+  | Extract<AutomationScheduleIntent, { kind: "recurring" }>
+  | {
+      kind: "one_off";
+      timezone: string;
+      timing: { type: "at"; date: string; time: string };
+    };
+
+export type AutomationDraft = {
+  title: string;
+  instruction: string;
+  credentialMode: AutomationEdit["credentialMode"];
+  outcomes: NonNullable<AutomationUpdate["outcomes"]>;
+  schedule?: AutomationScheduleDraft;
+  trigger?: Extract<AutomationEdit, { kind: "event" }>["trigger"];
+};
+
+/** Keep stored values intact until a user edits that field. */
+export function createAutomationDraft(value: AutomationEdit): AutomationDraft {
+  return {
+    title: value.title ?? "",
+    instruction: value.instruction,
+    credentialMode: value.credentialMode,
+    outcomes: value.outcomes,
+    trigger: value.kind === "event" ? value.trigger : undefined,
+  };
+}
+
+/** Populate calendar controls without changing the saved start date. */
+export function scheduleDraft(
+  value: Extract<AutomationEdit, { kind: "scheduled" }>,
+): AutomationScheduleDraft {
+  const recurrence = value.schedule.recurrence;
+  if (value.schedule.kind === "recurring" && recurrence) {
+    const { time, weekdays: days, ...fields } = recurrence;
+    return {
+      kind: "recurring",
+      ...fields,
+      timezone: value.schedule.timezone,
+      time: `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`,
+      weekdays: days?.map((day) => weekdays[day]),
+    };
+  }
+  if (value.nextRunAtMs) {
+    const parts = new Intl.DateTimeFormat("en-CA", {
+      timeZone: value.schedule.timezone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: "h23",
+    }).formatToParts(value.nextRunAtMs);
+    const part = (name: string) =>
+      parts.find((p) => p.type === name)?.value ?? "";
+    return {
+      kind: "one_off",
+      timezone: value.schedule.timezone,
+      timing: {
+        type: "at",
+        date: `${part("year")}-${part("month")}-${part("day")}`,
+        time: `${part("hour")}:${part("minute")}`,
+      },
+    };
+  }
+  return {
+    kind: "recurring",
+    frequency: "daily",
+    time: "09:00",
+    timezone: value.schedule.timezone,
+  };
+}
+
+/** Keep metadata edits from replacing unchanged triggers or outcomes. */
+export function automationDraftChanges(
+  original: AutomationEdit,
+  draft: AutomationDraft,
+): Partial<AutomationDraft> {
+  const changes: Partial<AutomationDraft> = {};
+  if (draft.title !== (original.title ?? "")) changes.title = draft.title;
+  if (draft.instruction !== original.instruction)
+    changes.instruction = draft.instruction;
+  if (draft.credentialMode !== original.credentialMode)
+    changes.credentialMode = draft.credentialMode;
+  if (JSON.stringify(draft.outcomes) !== JSON.stringify(original.outcomes))
+    changes.outcomes = draft.outcomes;
+  if (original.kind === "scheduled" && draft.schedule)
+    changes.schedule = draft.schedule;
+  if (
+    original.kind === "event" &&
+    JSON.stringify(draft.trigger) !== JSON.stringify(original.trigger)
+  )
+    changes.trigger = draft.trigger;
+  return changes;
+}

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

@@ -0,0 +1,23 @@
+import type {
+  AutomationSummary,
+  AutomationUpdate,
+} from "@sentry/junior/api/schema";
+
+type Outcome = NonNullable<AutomationUpdate["outcomes"]>[number];
+
+/** Describe a retained Destination without guessing a recipient from a private id. */
+export function automationOutcomeLabel(
+  outcome: Outcome,
+  destination: AutomationSummary["destination"],
+): string {
+  if (typeof outcome.destination === "string")
+    return outcome.destination === "task_creator"
+      ? "Creator · Direct message"
+      : `${destination.label} · ${destination.visibility}`;
+  if (
+    outcome.destination.channelId === destination.channelId &&
+    outcome.destination.teamId === destination.teamId
+  )
+    return `${destination.label} · ${destination.visibility}`;
+  return `Saved destination · ${outcome.destination.channelId}`;
+}

package/src/client/pages/dev/ComponentsPage.tsx

@@ -1,3 +1,5 @@
+import { FormNotice } from "../../components/FormNotice";
+import { Select } from "../../components/Select";
 import { ObjectFixtures } from "./ObjectFixtures";
 import { ChartFixtures } from "./ChartFixtures";
 import {
@@ -33,6 +35,7 @@ import { DashboardHeader } from "../../components/layout/DashboardHeader";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { MetricList, MetricValue } from "../../components/Metric";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import { ActorAvatar } from "../../components/ActorAvatar";
 import { ParticipantAvatarStack } from "../../components/ParticipantAvatarStack";
 import { StatCard } from "../../components/metrics/StatCard";
 import { StatusChip } from "../../components/StatusChip";
@@ -308,6 +311,34 @@ function FoundationsGalleryPage() {
       sectionId="foundations"
       title="Foundations"
     >
+      <Fixture title="Editor controls">
+        <Field
+          label="Instruction"
+          htmlFor="gallery-instruction"
+          error="Enter an instruction."
+        >
+          <TextArea
+            prose
+            id="gallery-instruction"
+            aria-invalid
+            aria-describedby="gallery-instruction-error"
+          />
+        </Field>
+        <Field label="Repeat" htmlFor="gallery-repeat">
+          <TextInput
+            size="comfortable"
+            aria-label="Resource identifier"
+            defaultValue="getsentry/junior#42"
+          />
+          <Select id="gallery-repeat">
+            <option>Every week</option>
+          </Select>
+        </Field>
+        <Button tone="primary">Save changes</Button>
+        <FormNotice title="This automation changed while you were editing.">
+          Your edits are still here. Review the latest version before saving.
+        </FormNotice>
+      </Fixture>
       <Fixture title="Conversation navigation">
         <DashboardChromeProvider>
           <DashboardHeader
@@ -563,19 +594,34 @@ function FoundationsGalleryPage() {
           />
         </div>
       </Fixture>
-      <Fixture title="Status chips">
-        <div className="flex flex-wrap items-center gap-2">
+      <Fixture title="Status labels">
+        <div className="flex flex-wrap items-center gap-x-5 gap-y-3">
           <StatusChip tone="neutral">private</StatusChip>
           <StatusChip tone="success">completed</StatusChip>
           <StatusChip tone="danger">failed</StatusChip>
           <StatusChip tone="warning">blocked</StatusChip>
           <StatusChip tone="info">preference</StatusChip>
           <StatusChip tone="accent">knowledge</StatusChip>
-          <StatusChip size="compact" tone="success">
-            public
+          <StatusChip size="compact" tone="warning">
+            Trigger unavailable
           </StatusChip>
         </div>
       </Fixture>
+      <Fixture title="Actor avatars">
+        <div className="flex items-center gap-4">
+          <ActorAvatar
+            name="Ada Lovelace"
+            imageUrl="/_junior/dashboard/avatar.png"
+            size="detail"
+          />
+          <ActorAvatar name="Grace Hopper" size="detail" />
+          <ActorAvatar
+            name="Alan Turing"
+            imageUrl="/missing-avatar.png"
+            size="list"
+          />
+        </div>
+      </Fixture>
       <Fixture title="Participant avatars">
         <div className="flex flex-wrap items-center gap-8">
           <ParticipantAvatarStack

package/src/client/searchParams.ts

@@ -39,9 +39,10 @@ export function parseSearchParamEnum<T extends string>(
 /** Read and write one debounced free-text query param (default `q`). */
 export function useDebouncedSearchParam(
   key = "q",
-  options: { delayMs?: number } = {},
+  options: { delayMs?: number; resetPage?: boolean } = {},
 ) {
   const delayMs = options.delayMs ?? 250;
+  const resetPage = options.resetPage ?? false;
   const [searchParams, setSearchParams] = useSearchParams();
   const committed = searchParams.get(key)?.trim() ?? "";
   const [value, setValue] = useState(committed);
@@ -58,6 +59,7 @@ export function useDebouncedSearchParam(
       setSearchParams(
         (current) => {
           const next = new URLSearchParams(current);
+          if (resetPage) next.delete("page");
           if (normalized) next.set(key, normalized);
           else next.delete(key);
           return next;
@@ -66,7 +68,7 @@ export function useDebouncedSearchParam(
       );
     }, delayMs);
     return () => window.clearTimeout(timeout);
-  }, [committed, delayMs, key, setSearchParams, value]);
+  }, [committed, delayMs, key, resetPage, setSearchParams, value]);
 
   return [value, setValue, committed] as const;
 }

package/src/client.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Component, type ErrorInfo, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router";
+import { createBrowserRouter, RouterProvider } from "react-router";
 
 import { DashboardShell } from "./client/App";
 import { getDashboardAgentName } from "./client/agentName";
@@ -79,12 +79,15 @@ const queryClient = new QueryClient({
   },
 });
 
+const router = createBrowserRouter(
+  [{ path: "*", element: <DashboardShell /> }],
+  { basename: window.__JUNIOR_DASHBOARD_BASE_PATH__ ?? "/" },
+);
+
 createRoot(root).render(
   <DashboardErrorBoundary>
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter basename={window.__JUNIOR_DASHBOARD_BASE_PATH__ ?? "/"}>
-        <DashboardShell />
-      </BrowserRouter>
+      <RouterProvider router={router} />
     </QueryClientProvider>
   </DashboardErrorBoundary>,
 );

package/src/mock-reporting/automation-collection.ts

@@ -0,0 +1,101 @@
+import {
+  automationListQuerySchema,
+  type AutomationList,
+  type AutomationSummary,
+} from "@sentry/junior/api/schema";
+
+function creator(automation: AutomationSummary) {
+  return automation.createdByEmail ?? automation.createdBy;
+}
+function destination(automation: AutomationSummary) {
+  return `${automation.destination.teamId}:${automation.destination.channelId}`;
+}
+
+/** Apply web collection controls to local preview and browser fixtures. */
+export function mockAutomationCollection(
+  report: Pick<
+    AutomationList,
+    "automations" | "executionDays" | "executionHours" | "executionSixHours"
+  >,
+  params: URLSearchParams = new URLSearchParams(),
+): AutomationList {
+  const input = automationListQuerySchema.parse(Object.fromEntries(params));
+  const all = report.automations;
+  const filtered = all
+    .filter((automation) => {
+      const search =
+        `${automation.title} ${automation.instruction} ${automation.kind === "event" ? automation.resource : ""}`.toLowerCase();
+      return (
+        (input.scope !== "mine" || automation.ownedByViewer) &&
+        (input.scope !== "public" ||
+          automation.destination.visibility === "public") &&
+        (input.scope !== "attention" ||
+          (automation.status !== "paused" &&
+            automation.status !== "completed" &&
+            (automation.status === "blocked" ||
+              (automation.kind === "event" && !automation.triggerAvailable) ||
+              automation.lastRunStatus === "failed" ||
+              automation.lastRunStatus === "blocked"))) &&
+        (input.type === "all" || automation.kind === input.type) &&
+        (input.state === "all" ||
+          (input.state === "unavailable"
+            ? automation.kind === "event" && !automation.triggerAvailable
+            : automation.status === input.state)) &&
+        (!input.creator || creator(automation) === input.creator) &&
+        (!input.destination || destination(automation) === input.destination) &&
+        (!input.q || search.includes(input.q.toLowerCase()))
+      );
+    })
+    .sort((a, b) => {
+      const order =
+        input.sort === "title"
+          ? a.title.localeCompare(b.title)
+          : input.sort === "oldest"
+            ? a.createdAt.localeCompare(b.createdAt)
+            : b.createdAt.localeCompare(a.createdAt);
+      return order || b.id.localeCompare(a.id);
+    });
+  const page = Math.min(
+    input.page,
+    Math.max(1, Math.ceil(filtered.length / input.pageSize)),
+  );
+  return {
+    ...report,
+    automations: filtered.slice(
+      (page - 1) * input.pageSize,
+      page * input.pageSize,
+    ),
+    total: filtered.length,
+    page,
+    pageSize: input.pageSize,
+    counts: {
+      all: all.length,
+      mine: all.filter((automation) => automation.ownedByViewer).length,
+      public: all.filter(
+        (automation) => automation.destination.visibility === "public",
+      ).length,
+      private: all.filter(
+        (automation) => automation.destination.visibility === "private",
+      ).length,
+    },
+    creators: [
+      ...new Map(
+        all.map((automation) => [
+          creator(automation),
+          { value: creator(automation), label: automation.createdBy },
+        ]),
+      ).values(),
+    ],
+    destinations: [
+      ...new Map(
+        all.map((automation) => [
+          destination(automation),
+          {
+            value: destination(automation),
+            label: automation.destination.label,
+          },
+        ]),
+      ).values(),
+    ],
+  };
+}

package/src/mock-reporting/fixtures.ts

@@ -1,3 +1,4 @@
+import { mockAutomationCollection } from "./automation-collection";
 /** Deterministic reporting fixtures for local dashboard development and QA. */
 import type {
   ActorDirectoryReport,
@@ -2669,8 +2670,10 @@ function mockTasks(): AutomationSummary[] {
       lastConversationId: "scheduler:daily-ops-digest",
       lastRunAt: "2026-08-06T16:00:00.000Z",
       nextRunAt: "2026-08-10T16:00:00.000Z",
+      credentialMode: "creator",
       ownedByViewer: true,
       runs: { 1: 1, 7: 3, 30: 12, 90: 48 },
+      timezone: "America/Los_Angeles",
       schedule: "Every Monday at 9:00 AM",
       status: "active",
       outcomes: [
@@ -2698,6 +2701,7 @@ function mockTasks(): AutomationSummary[] {
       kind: "event",
       lastConversationId: "agent-dispatch:event-1",
       lastRunAt: "2026-08-05T18:30:00.000Z",
+      credentialMode: "creator",
       ownedByViewer: true,
       resource: "Issue · ACME-42",
       runs: { 1: 0, 7: 1, 30: 4, 90: 7 },
@@ -2706,6 +2710,7 @@ function mockTasks(): AutomationSummary[] {
       title: "Closed issue summary",
       totalRuns: 7,
       triggerAvailable: true,
+      status: "active",
     },
     {
       createdAt: "2026-07-30T16:00:00.000Z",
@@ -2721,6 +2726,7 @@ function mockTasks(): AutomationSummary[] {
       id: "event-2",
       instruction: "Notify responders when the incident changes",
       kind: "event",
+      credentialMode: "creator",
       ownedByViewer: false,
       resource: "Incident · INC-17",
       runs: { 1: 0, 7: 0, 30: 0, 90: 0 },
@@ -2734,13 +2740,14 @@ function mockTasks(): AutomationSummary[] {
       title: "Incident change alerts",
       totalRuns: 0,
       triggerAvailable: false,
+      status: "active",
     },
   ];
 }
 
 /** Build mock Tasks list for local dashboard development. */
 export function readMockAutomationList(nowMs = NOW_MS): AutomationList {
-  return {
+  return mockAutomationCollection({
     executionDays: mockAutomationExecutionDays(nowMs),
     executionHours: trailingMetricHours(nowMs, (date) => ({
       costUsd: 0,
@@ -2759,8 +2766,7 @@ export function readMockAutomationList(nowMs = NOW_MS): AutomationList {
       (date) => ({ costUsd: 0, date, event: 0, scheduled: 0 }),
     ),
     automations: mockTasks(),
-    truncated: false,
-  };
+  });
 }
 
 function mockStatusDays(

package/src/mock-reporting/routes.ts

@@ -1,3 +1,4 @@
+import { mockAutomationCollection } from "./automation-collection";
 import { Hono } from "hono";
 import { jsonResponse, type JuniorApiVariables } from "@sentry/junior/api";
 import {
@@ -26,6 +27,7 @@ import {
   automationExecutionListSchema,
   automationListSchema,
   automationParamsSchema,
+  automationSummarySchema,
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import { mockChartPng } from "./chart-png";
@@ -253,15 +255,10 @@ export function createMockReportingApi(): Hono<{
   });
   app.get("/automations", (c) => {
     const report = readMockAutomationList();
-    const query = c.req.query("q")?.trim().toLowerCase();
-    return jsonResponse(automationListSchema, {
-      ...report,
-      automations: query
-        ? report.automations.filter((automation) =>
-            automation.title.toLowerCase().includes(query),
-          )
-        : report.automations,
-    });
+    return jsonResponse(
+      automationListSchema,
+      mockAutomationCollection(report, new URL(c.req.url).searchParams),
+    );
   });
   app.get("/automations/runs", () => {
     const automations = readMockAutomationList().automations;
@@ -284,6 +281,14 @@ export function createMockReportingApi(): Hono<{
       truncated: false,
     });
   });
+  app.get("/automations/:id", (c) => {
+    const automation = readMockAutomationList().automations.find(
+      (automation) => automation.id === c.req.param("id"),
+    );
+    return automation
+      ? jsonResponse(automationSummarySchema, automation)
+      : errorResponse("Automation not found.", 404);
+  });
   app.get("/automations/:kind/:id/executions", (c) => {
     const params = automationParamsSchema.safeParse(c.req.param());
     if (!params.success) {