@sentry/junior-dashboard 0.266.0 → 0.267.0

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

@@ -9,40 +9,22 @@ import { PageHeader } from "../../components/layout/PageHeader";
 import { PageLayout } from "../../components/layout/PageLayout";
 import { SecondaryNavigation } from "../../components/layout/SecondaryNavigation";
 
-/** 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. */
+/** Identify Automation routes whose run list scrolls on its own beside run details. */
 export function hasAutomationDetailsFrame(pathname: string): boolean {
   return (
-    isAutomationListPath(pathname) ||
     Boolean(matchPath("/automations/runs", pathname)) ||
-    Boolean(matchPath("/automations/:automationId/executions", pathname))
-  );
-}
-
-function isAutomationListTabPath(pathname: string): boolean {
-  return (
-    isAutomationListPath(pathname) ||
-    Boolean(matchPath("/automations/:automationId/edit", pathname))
+    Boolean(matchPath("/automations/:automationId/runs", pathname))
   );
 }
 
 const taskNavigationItems = [
   { end: true, label: "Overview", to: "/automations" },
-  {
-    isActive: isAutomationListTabPath,
-    label: "Automations",
-    to: "/automations/list",
-  },
+  { label: "Automations", to: "/automations/list" },
   { label: "Runs", to: "/automations/runs" },
 ];
 
-/** Keep Automation navigation consistent across lists, details, and editing. */
-export function AutomationsNavigation(props: {
+/** Keep Automation navigation consistent across the overview, list, and runs. */
+function AutomationsNavigation(props: {
   children: ReactNode;
   className?: string;
 }) {

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

@@ -4,7 +4,7 @@ Core owns validation, edit access, creator-only rules, revision checks,
 Schedule previews, and the Event catalog. Preview requests cannot save or run
 work. Completed scheduled Automations remain read-only.
 
-Owners and public Destination readers can edit. For a public reader, the
+Creators and public Destination readers can edit. For a public reader, the
 editor shows outcomes as read-only and blocks turning on creator credential
 use. It warns that an instruction or event selector change switches to system
 credentials. Pause and resume stay creator-only.
@@ -18,7 +18,8 @@ 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.
+native prompt. Save and Cancel return to the Automation page and keep its query
+string.
 
 Version history lists saved versions, newest first, and marks the active
 version. "Make active" uses the native confirm dialog, like delete. It then
@@ -29,36 +30,36 @@ 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".
+## Automation page
+
+Each Automation has one page at `/automations/:id`. Overview, Runs, and
+Versions are tabs. They use `SecondaryNavigation`, like the repository page.
+`/automations/:id/edit` is edit mode of the Overview tab. The old
+`/executions` route redirects to `/runs` and keeps the query string. List rows
+link to the page. There is no details slideout.
+
+The page keeps the list query string. "All automations" returns to the same
+list page and filters. The back link drops params that belong to one tab:
+`result`, `run`, and `version`. One `range` param drives the Overview numbers
+and the Runs chart.
+
+The header shows the name, the state, the trigger, the Destination, and the
+creator. `AutomationStateChip` is a live region, so Pause and Resume results
+are announced. `AutomationActions` owns Edit, Pause or Resume, pause help, and
+Delete. Lifecycle actions re-read the revision before they apply. Public
+readers can edit settings. Pause, Resume, and Delete stay creator-only, so
+other viewers do not see them. The About card names the creator-only actions.
+Completed Automations have no Edit action, and `/edit` returns to Overview.
+
+Overview shows `AutomationAttention` first when something needs action: a
+block, an unavailable trigger, or a failed last run. The notice has one main
+action, such as Change trigger or Open last run. While it shows, the header
+Edit button becomes a secondary button. The saved settings follow
+in the same `AutomationFormSection` rows as the editor, so edit mode changes
+them in place. The side column shows the next trigger, the last result, runs,
+failures, and spend for the range, and About. Spend is `costUsd` from the
+Automation summary. On small screens, status comes first and About moves below
+the settings.
 
 `AutomationRecentRuns` uses the existing execution-history query and cache. It
 shows up to three newest terminal runs, links to their Conversations when one
@@ -67,21 +68,30 @@ 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.
+In edit mode, "Your changes" lists each changed field with the saved value, the
+new value, and its own Undo. It is beside the form on wide screens and below
+the form on small screens when there are changes. Undo remounts the fields, so fields with local state show the saved value again.
+Changed sections get an accent mark. Save and Cancel return to Overview.
 
-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.
+The Runs tab filters loaded runs by result through the `result` param. Rows
+show the version that ran and the recorded error. A row opens the run details
+panel. The run list scrolls on its own beside it.
+
+The Versions tab lists versions and compares the selected one with the version
+before it. The `version` param selects a version; run details link to it.
+Changed fields show the previous value. Instruction changes use a line diff.
 
 `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.
+Cancel returns focus to Delete. Successful deletion returns to the list.
+Success toasts confirm Save, Pause, Resume, and Delete. Their state belongs to
+the mounted dashboard's Toaster provider.
+
+Browser journeys for the page live in `e2e/automations.spec.ts`. Use mock
+reporting to review scheduled and event Automations in both themes at desktop
+and mobile widths. Keep layout checks in manual QA.
+
+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 screen height.

package/src/client/types.ts

@@ -1,6 +1,7 @@
 import type { ObjectType } from "@sentry/junior-plugin-api";
 import type { BundledLanguage } from "shiki/bundle/web";
 import type {
+  InputImage,
   MessageAttachment,
   MessageCard,
   PluginOperationalReportFeed,
@@ -151,6 +152,8 @@ export type TranscriptViewMessage = {
   failureReason?: ConversationTurnFailureReason;
   sentryEventUrl?: string;
   attachments?: MessageAttachment[];
+  /** Local images of a pending send that the server has not stored yet. */
+  images?: InputImage[];
   parts: TranscriptViewPart[];
   role: "assistant" | "system" | "tool" | "user";
   source?: "slack" | "web";

package/src/mock-reporting/fixtures.ts

@@ -572,7 +572,16 @@ function activeConversation(nowMs: number): ConversationDetailReport {
         type: "message",
         messageId: "active-user-followup",
         role: "user",
-        text: "Compare the pre/post deploy spans next.",
+        // Quoted reply keeps blockquote and nested-list rendering in visual QA.
+        text: [
+          "> error volume is flat, so this looks like slow path not hard fail",
+          "",
+          "Agreed. Compare the pre/post deploy spans next:",
+          "1. `checkout.complete` p95",
+          "   - stable hosts",
+          "   - canary hosts",
+          "2. ~~error rate~~ serializer span time",
+        ].join("\n"),
       }),
       reportEvent(8, iso(Date.parse(startedAt), 42_000), {
         type: "turn_lifecycle",
@@ -1451,7 +1460,7 @@ function eventAutomationRunConversation(
             "This is a task, not a message from a person.",
             "",
             "About: Issue · ACME-42",
-            'Created by: <@U123>. "Me" and "my" in the instructions mean this person: mention them in the message. If the instructions do not say "me" or "my", do not mention this person.',
+            'Created by: <@U123>. This person is the Automation creator. "The Automation creator", "me", and "my" in the instructions mean this person. Where the instructions refer to this person, write this mention in the message. If they do not, do not mention this person.',
             "Instructions: Summarize the closed issue",
             "",
             "Trusted summary: ACME-42 Checkout fails for saved cards was closed by Morgan Lee.",
@@ -1944,6 +1953,14 @@ export function readMockConversationPendingMessages(
             role: "user" as const,
             source: "web" as const,
             text: "Keep the reply in Junior. I will paste the dashboard link next.",
+            attachments: [
+              {
+                id: "qa-chart-png",
+                filename: "queued-chart.png",
+                contentType: "image/png",
+                bytes: 18211,
+              },
+            ],
           },
           {
             actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
@@ -1978,6 +1995,28 @@ export function readMockConversationPendingMessages(
             source: "web" as const,
             text: "Fifth queued message.",
           },
+          {
+            actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
+            createdAt: iso(nowMs, -800),
+            delivery: "defer" as const,
+            inboundMessageId: `${conversationId}:pending-sixth`,
+            messageId: `${conversationId}:pending-sixth`,
+            receivedAt: iso(nowMs, -400),
+            role: "user" as const,
+            source: "web" as const,
+            text: "Sixth queued message.",
+          },
+          {
+            actorIdentity: actor("dev@example.com", "Morgan Lee", "morgan"),
+            createdAt: iso(nowMs, -600),
+            delivery: "defer" as const,
+            inboundMessageId: `${conversationId}:pending-seventh`,
+            messageId: `${conversationId}:pending-seventh`,
+            receivedAt: iso(nowMs, -300),
+            role: "user" as const,
+            source: "web" as const,
+            text: "Seventh queued message.",
+          },
         ]
       : [];
 
@@ -2949,6 +2988,7 @@ function mockTasks(): AutomationSummary[] {
       nextRunAt: "2026-08-10T16:00:00.000Z",
       credentialMode: "creator",
       ownedByViewer: true,
+      costUsd: { 1: 0.42, 7: 1.02, 30: 4.18, 90: 16.4 },
       runs: { 1: 1, 7: 3, 30: 12, 90: 48 },
       timezone: "America/Los_Angeles",
       schedule: "Every Monday at 9:00 AM",
@@ -2980,6 +3020,7 @@ function mockTasks(): AutomationSummary[] {
       credentialMode: "creator",
       ownedByViewer: true,
       resource: "Issue · ACME-42",
+      costUsd: { 1: 0, 7: 0.12, 30: 0.48, 90: 0.84 },
       runs: { 1: 0, 7: 1, 30: 4, 90: 7 },
       source: "github",
       outcomes: [],
@@ -3008,6 +3049,7 @@ function mockTasks(): AutomationSummary[] {
       credentialMode: "creator",
       ownedByViewer: false,
       resource: "Incident · INC-17",
+      costUsd: { 1: 0, 7: 0, 30: 0, 90: 0 },
       runs: { 1: 0, 7: 0, 30: 0, 90: 0 },
       source: "pagerduty",
       outcomes: [

package/src/client/conversations/transcriptStyles.ts

@@ -1,10 +0,0 @@
-/** Share the transcript empty/unavailable frame across top-level and segment views. */
-export function transcriptEmptyClass(
-  tone: "default" | "error" = "default",
-): string {
-  const colors =
-    tone === "error"
-      ? "border-rose-300/25 bg-rose-300/[0.07] text-rose-100"
-      : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted";
-  return `rounded-lg border p-5 text-sm leading-relaxed ${colors}`;
-}

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

@@ -1,193 +0,0 @@
-import type { AutomationSummary } from "@sentry/junior/api/schema";
-import type { ReactNode } from "react";
-import { Link, useLocation } from "react-router";
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../components/ui/accordion";
-import { Button } from "../../components/ui/button";
-import { DetailsPanel } from "../../components/DetailsPanel";
-import { InlineError } from "../../components/InlineError";
-import { PageContentSkeleton } from "../../components/PageContentSkeleton";
-import {
-  timeRangeLabel,
-  type TimeRangeDays,
-} from "../../components/controls/TimeRangeSelector";
-import { TranscriptText } from "../../conversations/TranscriptText";
-import { peoplePath } from "../../format";
-import { dashboardInlineLinkClass } from "../../styles";
-import { TriggerFilters } from "./TriggerFilters";
-import { AutomationLifecycle } from "./AutomationLifecycle";
-import { AutomationRecentRuns } from "./AutomationRecentRuns";
-import { AutomationStatus } from "./AutomationStatus";
-import {
-  automationScheduleLabel,
-  formatAutomationRunTime,
-} from "./automationFormat";
-import { automationOutcomeLabel } from "./automationOutcomes";
-
-/** Keep Automation context scrollable above persistent, permission-aware actions. */
-export function AutomationDetails(props: {
-  onClose(): void;
-  onDelete(source: HTMLButtonElement): void;
-  onRetry(): void;
-  error: boolean;
-  range: TimeRangeDays;
-  automation: AutomationSummary | undefined;
-}) {
-  const location = useLocation();
-  const { automation } = props;
-  return (
-    <DetailsPanel
-      label="Automation details"
-      sheetTitle={automation?.title}
-      onClose={props.onClose}
-      title={
-        <h2 className="m-0 break-words font-display text-base font-medium text-dashboard-text">
-          {automation?.title ?? "Automation details"}
-        </h2>
-      }
-    >
-      <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]">
-        <div
-          aria-label="Automation content"
-          role="region"
-          tabIndex={0}
-          className="min-h-0 overflow-y-auto overscroll-contain p-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus [overflow-wrap:anywhere]"
-        >
-          {automation ? (
-            <AutomationDetailsContent
-              automation={automation}
-              range={props.range}
-            />
-          ) : null}
-          {props.error ? (
-            <InlineError>
-              Automation details could not be loaded. It may be unavailable or
-              you may not have access.{" "}
-              <Button onClick={props.onRetry}>Try again</Button>
-            </InlineError>
-          ) : !automation ? (
-            <PageContentSkeleton
-              label="Loading automation details"
-              variant="panel"
-            />
-          ) : null}
-        </div>
-        {automation ? (
-          <AutomationLifecycle
-            automation={automation}
-            onDelete={props.onDelete}
-            editPath={`/automations/${encodeURIComponent(automation.id)}/edit${location.search}`}
-          />
-        ) : null}
-      </div>
-    </DetailsPanel>
-  );
-}
-
-function AutomationDetailsContent({
-  automation,
-  range,
-}: {
-  automation: AutomationSummary;
-  range: TimeRangeDays;
-}) {
-  const location = useLocation();
-  return (
-    <div className="grid min-w-0 gap-5">
-      <AutomationStatus automation={automation} />
-      <section aria-label="Instructions" className="text-sm leading-relaxed">
-        <TranscriptText
-          mentions={automation.mentions ?? []}
-          text={automation.instruction}
-        />
-      </section>
-      <dl className="m-0 grid gap-3 text-xs leading-relaxed">
-        <AutomationFact label="Trigger">
-          {automation.kind === "scheduled" ? (
-            <p className="m-0">{automationScheduleLabel(automation)}</p>
-          ) : (
-            <>
-              <p className="m-0 break-words">{automation.resource}</p>
-              <p className="m-0 mt-1 text-dashboard-text-muted">
-                {automation.trigger.events.join(", ")}
-              </p>
-              <TriggerFilters filters={automation.trigger.filters} />
-            </>
-          )}
-        </AutomationFact>
-        <AutomationFact label="On success">
-          {automation.outcomes.length === 0 ? (
-            <span className="text-dashboard-text-muted">No message</span>
-          ) : (
-            <ol className="m-0 grid list-none gap-2 p-0">
-              {automation.outcomes.map((outcome, index) => (
-                <li key={index}>
-                  Message{" "}
-                  {automationOutcomeLabel(outcome, automation.destination)}
-                </li>
-              ))}
-            </ol>
-          )}
-        </AutomationFact>
-      </dl>
-      <AutomationRecentRuns automation={automation} />
-      <Accordion className="border-t border-dashboard-border pt-1">
-        <AccordionItem value="about">
-          <AccordionTrigger className="min-h-11 text-xs text-dashboard-text-muted">
-            About this Automation
-          </AccordionTrigger>
-          <AccordionContent>
-            <dl className="m-0 grid gap-3 text-xs leading-relaxed">
-              <AutomationFact label="Created by">
-                {automation.createdByEmail ? (
-                  <Link
-                    className={dashboardInlineLinkClass}
-                    to={peoplePath(automation.createdByEmail)}
-                  >
-                    {automation.ownedByViewer ? "you" : automation.createdBy}
-                  </Link>
-                ) : automation.ownedByViewer ? (
-                  "you"
-                ) : (
-                  automation.createdBy
-                )}
-              </AutomationFact>
-              <AutomationFact label="Created">
-                {formatAutomationRunTime(automation.createdAt)}
-              </AutomationFact>
-              <AutomationFact label="Accounts">
-                {automation.credentialMode === "creator"
-                  ? `Uses accounts connected by ${automation.ownedByViewer ? "you" : automation.createdBy}.`
-                  : "Junior’s accounts only"}
-              </AutomationFact>
-              <AutomationFact label="Runs">
-                {automation.runs[range]} runs / {timeRangeLabel(range)} ·{" "}
-                {automation.totalRuns} total
-              </AutomationFact>
-            </dl>
-            <Link
-              className={`${dashboardInlineLinkClass} mt-3 inline-block py-2 text-xs`}
-              to={`/automations/${encodeURIComponent(automation.id)}/versions${location.search}`}
-            >
-              Version history
-            </Link>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-}
-
-function AutomationFact(props: { label: string; children: ReactNode }) {
-  return (
-    <div className="grid min-w-0 grid-cols-[5.25rem_minmax(0,1fr)] gap-3">
-      <dt className="text-dashboard-text-muted">{props.label}</dt>
-      <dd className="m-0 min-w-0">{props.children}</dd>
-    </div>
-  );
-}