@sentry/junior-dashboard 0.264.0 → 0.265.0

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

@@ -0,0 +1,143 @@
+import type { AutomationSummary } from "@sentry/junior/api/schema";
+import { Link } from "react-router";
+
+import { useAutomationExecutionsData } from "../../api";
+import { Button } from "../../components/ui/button";
+import { InlineError } from "../../components/InlineError";
+import { Skeleton } from "../../components/ui/skeleton";
+import { StatusChip } from "../../components/StatusChip";
+import { conversationPath } from "../../conversations/conversationRoutes";
+import {
+  formatCostSummary,
+  formatRelativeTime,
+  formatRuntime,
+} from "../../format";
+import { dashboardInlineLinkClass } from "../../styles";
+import { formatAutomationRunTime } from "./automationFormat";
+
+/** Preview the newest terminal runs without leaving the Automation list. */
+export function AutomationRecentRuns({
+  automation,
+}: {
+  automation: AutomationSummary;
+}) {
+  const query = useAutomationExecutionsData(true, automation.id);
+  const runs = query.data?.executions.slice(0, 3) ?? [];
+  return (
+    <section aria-label="Recent runs" className="grid min-w-0 gap-2.5">
+      <div className="flex items-baseline justify-between gap-3">
+        <h3 className="m-0 text-xs font-medium text-dashboard-text-muted">
+          Recent runs
+        </h3>
+        {automation.totalRuns > 0 || runs.length > 0 ? (
+          <Link
+            className={`${dashboardInlineLinkClass} text-xs`}
+            to={`/automations/${encodeURIComponent(automation.id)}/executions`}
+          >
+            View all runs
+          </Link>
+        ) : null}
+      </div>
+      {query.isPending ? (
+        <div aria-busy="true" role="status" className="grid gap-2">
+          <span className="sr-only">Loading recent runs</span>
+          {Array.from({ length: 3 }, (_, index) => (
+            <Skeleton className="h-14 rounded-md" key={index} />
+          ))}
+        </div>
+      ) : null}
+      {query.error ? (
+        <InlineError>
+          Recent runs could not be loaded.{" "}
+          <Button onClick={() => void query.refetch()}>Try again</Button>
+        </InlineError>
+      ) : null}
+      {query.data && runs.length === 0 ? (
+        <p className="m-0 text-sm text-dashboard-text-muted">
+          {automation.totalRuns === 0
+            ? "No runs yet. Results will appear here after the first run."
+            : "No recent runs are available. Older run details may have expired."}
+        </p>
+      ) : null}
+      {runs.length > 0 ? (
+        <ol className="m-0 list-none divide-y divide-dashboard-border-subtle p-0">
+          {runs.map((run) => {
+            const metrics = [
+              run.durationMs !== undefined
+                ? formatRuntime(run.durationMs)
+                : undefined,
+              run.costUsd !== undefined
+                ? formatCostSummary({ total: run.costUsd })
+                : undefined,
+            ]
+              .filter(Boolean)
+              .join(" · ");
+            const title =
+              run.title !== automation.title ? run.title : undefined;
+            const content = (
+              <>
+                <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+                  <StatusChip
+                    size="compact"
+                    tone={
+                      run.status === "completed"
+                        ? "success"
+                        : run.status === "failed"
+                          ? "danger"
+                          : "warning"
+                    }
+                  >
+                    {run.status}
+                  </StatusChip>
+                  <time
+                    className="text-xs text-dashboard-text-muted"
+                    dateTime={run.executedAt}
+                    title={formatAutomationRunTime(run.executedAt)}
+                  >
+                    {formatRelativeTime(run.executedAt)}
+                  </time>
+                </div>
+                {title || metrics ? (
+                  <div className="flex min-w-0 items-baseline justify-between gap-3 text-xs text-dashboard-text-muted">
+                    {title ? (
+                      <p
+                        className="m-0 min-w-0 truncate text-dashboard-text"
+                        title={title}
+                      >
+                        {title}
+                      </p>
+                    ) : null}
+                    {metrics ? (
+                      <p className="m-0 shrink-0 tabular-nums">{metrics}</p>
+                    ) : null}
+                  </div>
+                ) : null}
+                {!run.conversationId ? (
+                  <p className="m-0 text-xs text-dashboard-text-muted">
+                    No Conversation recorded
+                  </p>
+                ) : null}
+              </>
+            );
+            const rowClass = "grid min-w-0 gap-1 rounded-md px-2 py-2.5";
+            return (
+              <li key={run.executionId}>
+                {run.conversationId ? (
+                  <Link
+                    aria-label={`Open ${run.status} run from ${formatAutomationRunTime(run.executedAt)}`}
+                    className={`${rowClass} text-inherit no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:outline-dashboard-focus`}
+                    to={conversationPath(run.conversationId)}
+                  >
+                    {content}
+                  </Link>
+                ) : (
+                  <div className={rowClass}>{content}</div>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      ) : null}
+    </section>
+  );
+}

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

@@ -1,38 +1,28 @@
 import type { AutomationSummary } from "@sentry/junior/api/schema";
-import {
-  CalendarClock,
-  LockKeyhole,
-  MoreHorizontal,
-  Trash2,
-  Zap,
-} from "lucide-react";
-import { type ReactNode, useEffect, useId, useRef, useState } from "react";
-import { Link, useLocation } from "react-router";
+import { CalendarClock, LockKeyhole, Zap } from "lucide-react";
+import { type ReactNode } from "react";
+import { Link } from "react-router";
 import { ActorAvatar } from "../../components/ActorAvatar";
 import { SelectableRow } from "../../components/SelectableRow";
 import { StatusChip } from "../../components/StatusChip";
 import { formatRelativeTime, peoplePath } from "../../format";
+import { eventTriggerText } from "@sentry/junior-plugin-api";
 import {
-  automationEventConditions,
-  automationEventNames,
   automationScheduleLabel,
   formatAutomationRunTime,
 } from "./automationFormat";
 
 /**
  * Show one automation as a compact card: what it is, where it posts, who owns
- * it, and when it runs. Instructions, timezones, and event conditions stay in
- * the details drawer.
+ * it, and when it runs. Instructions, timezones, and event filters stay in
+ * the details panel.
  */
 export function AutomationRow(props: {
-  deleting: boolean;
-  onDelete(): void;
   onSelect(): void;
   selected: boolean;
   automation: AutomationSummary;
 }) {
   const { automation } = props;
-  const location = useLocation();
   const status = automationStatus(automation);
   const creator = (
     <>
@@ -47,6 +37,7 @@ export function AutomationRow(props: {
   return (
     <article
       className="min-w-0 rounded-lg border border-dashboard-border-subtle bg-dashboard-fill-faint"
+      data-automation-id={automation.id}
       role="listitem"
     >
       <SelectableRow
@@ -105,16 +96,6 @@ export function AutomationRow(props: {
             <AutomationTiming automation={automation} />
           </div>
         </div>
-        {automation.ownedByViewer ? (
-          <div className="-mr-2 -mt-1.5 shrink-0">
-            <AutomationActions
-              editPath={`/automations/${encodeURIComponent(automation.id)}/edit${location.search}`}
-              deleting={props.deleting}
-              onDelete={props.onDelete}
-              title={automation.title}
-            />
-          </div>
-        ) : null}
       </SelectableRow>
     </article>
   );
@@ -126,7 +107,9 @@ function automationStatus(automation: AutomationSummary): string | undefined {
     return automation.status === "active" ? undefined : automation.status;
   }
   if (automation.status !== "active") return automation.status;
-  return automation.triggerAvailable ? undefined : "Trigger unavailable";
+  return automation.trigger.problems.length === 0
+    ? undefined
+    : "Trigger unavailable";
 }
 
 /** Combine the trigger and Destination into one muted line under the title. */
@@ -140,15 +123,11 @@ function AutomationSummaryLine({
   const trigger =
     automation.kind === "scheduled"
       ? automation.schedule
-      : `${automation.resource} · ${automationEventNames(automation)}`;
-  const conditions =
-    automation.kind === "event" ? automationEventConditions(automation) : "";
+      : eventTriggerText(automation.resource, automation.trigger);
   const triggerDetail =
     automation.kind === "scheduled"
       ? automationScheduleLabel(automation)
-      : conditions
-        ? `${trigger} · ${conditions}`
-        : trigger;
+      : trigger;
   return (
     <span className="mt-1 flex min-w-0 items-center gap-1.5 text-xs text-dashboard-text-muted">
       <Icon
@@ -236,108 +215,3 @@ function MetaItem(props: { children: ReactNode; title?: string }) {
     </span>
   );
 }
-
-function AutomationActions(props: {
-  editPath: string;
-  deleting: boolean;
-  onDelete(): void;
-  title: string;
-}) {
-  const [open, setOpen] = useState(false);
-  const root = useRef<HTMLDivElement>(null);
-  const trigger = useRef<HTMLButtonElement>(null);
-  const item = useRef<HTMLButtonElement>(null);
-  const menuId = useId();
-
-  useEffect(() => {
-    if (!open) return;
-    item.current?.focus();
-    function closeOutside(event: PointerEvent) {
-      if (!root.current?.contains(event.target as Node)) setOpen(false);
-    }
-    document.addEventListener("pointerdown", closeOutside);
-    return () => document.removeEventListener("pointerdown", closeOutside);
-  }, [open]);
-
-  function close() {
-    setOpen(false);
-    trigger.current?.focus();
-  }
-
-  return (
-    <div
-      className="relative"
-      onBlur={(event) => {
-        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
-      }}
-      onKeyDown={(event) => {
-        if (event.key === "Escape") {
-          event.stopPropagation();
-          close();
-        } else if (
-          ["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)
-        ) {
-          event.preventDefault();
-          setOpen(true);
-          const items = Array.from(
-            root.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ??
-              [],
-          );
-          const index = items.indexOf(document.activeElement as HTMLElement);
-          const next =
-            event.key === "Home"
-              ? 0
-              : event.key === "End"
-                ? items.length - 1
-                : (index + (event.key === "ArrowUp" ? -1 : 1) + items.length) %
-                  items.length;
-          items[next]?.focus();
-        }
-      }}
-      ref={root}
-    >
-      <button
-        aria-controls={open ? menuId : undefined}
-        aria-expanded={open}
-        aria-haspopup="menu"
-        aria-label={`Actions: ${props.title}`}
-        className="grid size-11 cursor-pointer place-items-center rounded-md border-0 bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus disabled:cursor-not-allowed disabled:opacity-50 xl:size-9"
-        disabled={props.deleting}
-        onClick={() => setOpen(!open)}
-        ref={trigger}
-        type="button"
-      >
-        <MoreHorizontal aria-hidden="true" size={18} />
-      </button>
-      {open ? (
-        <div
-          aria-label={`Actions: ${props.title}`}
-          className="absolute right-0 top-full z-20 min-w-36 rounded-md border border-dashboard-border bg-dashboard-surface-raised p-1 shadow-lg"
-          id={menuId}
-          onClick={(event) => event.stopPropagation()}
-          role="menu"
-        >
-          <Link
-            role="menuitem"
-            to={props.editPath}
-            className="flex min-h-11 items-center rounded-md px-3 text-sm text-dashboard-text no-underline hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-dashboard-focus"
-          >
-            Edit automation
-          </Link>
-          <button
-            className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md border-0 bg-transparent px-3 text-sm text-rose-300 hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
-            onClick={() => {
-              close();
-              props.onDelete();
-            }}
-            ref={item}
-            role="menuitem"
-            type="button"
-          >
-            <Trash2 aria-hidden="true" size={15} /> Delete
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
-}

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

@@ -0,0 +1,307 @@
+import type { AutomationRun } from "@sentry/junior/api/schema";
+import { MessageSquareText } from "lucide-react";
+import {
+  useRef,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { Link, useSearchParams } from "react-router";
+
+import { DetailsPanel } from "../../components/DetailsPanel";
+import { PageContentSkeleton } from "../../components/PageContentSkeleton";
+import { StatusChip } from "../../components/StatusChip";
+import { PageLayout } from "../../components/layout/PageLayout";
+import { buttonVariants } from "../../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { conversationPath } from "../../conversations/conversationRoutes";
+import {
+  automationPath,
+  formatCompactNumber,
+  formatCostSummary,
+  formatRelativeTime,
+  formatRuntime,
+} from "../../format";
+import { cn, dashboardInlineLinkClass } from "../../styles";
+import {
+  automationRunStatusTone,
+  automationRunTitle,
+  formatAutomationRunTime,
+} from "./automationFormat";
+
+/** Search param that owns the selected run, so a run link can be shared. */
+export const AUTOMATION_RUN_PARAM = "run";
+
+/**
+ * Read the run that the URL selects, and change it. Closing returns focus to
+ * the run row. Up and Down move the selection while details are open.
+ */
+export function useAutomationRunSelection(runIds: readonly string[]) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const listRef = useRef<HTMLDivElement>(null);
+  const runId = searchParams.get(AUTOMATION_RUN_PARAM) ?? undefined;
+  const select = (id: string | undefined) =>
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        if (id) next.set(AUTOMATION_RUN_PARAM, id);
+        else next.delete(AUTOMATION_RUN_PARAM);
+        return next;
+      },
+      { replace: true },
+    );
+  const rowButton = (id: string) =>
+    listRef.current?.querySelector<HTMLButtonElement>(
+      `[data-run-id="${CSS.escape(id)}"] button`,
+    );
+  const close = () => {
+    const trigger = runId ? rowButton(runId) : undefined;
+    select(undefined);
+    (trigger ?? listRef.current)?.focus({ preventScroll: true });
+  };
+  const toggle = (id: string) => select(id === runId ? undefined : id);
+  const onRowsKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (!runId || (event.key !== "ArrowDown" && event.key !== "ArrowUp")) {
+      return;
+    }
+    // Read the focused row. The URL can lag behind fast key repeats.
+    const current = (event.target as Element)
+      .closest("[data-run-id]")
+      ?.getAttribute("data-run-id");
+    const index = current ? runIds.indexOf(current) : -1;
+    const next = runIds[index + (event.key === "ArrowDown" ? 1 : -1)];
+    if (index === -1 || !next) return;
+    event.preventDefault();
+    select(next);
+    rowButton(next)?.focus();
+  };
+  return { close, listRef, onRowsKeyDown, runId, toggle };
+}
+
+/** Scroll a run list on its own, beside the selected run's details. */
+export function AutomationRunsFrame(props: {
+  children: ReactNode;
+  details: ReactNode;
+  label: string;
+  listRef: RefObject<HTMLDivElement | null>;
+}) {
+  return (
+    <div
+      className={cn(
+        "grid h-full min-h-0 min-w-0",
+        props.details ? "xl:grid-cols-[minmax(0,1fr)_25rem]" : undefined,
+      )}
+    >
+      <div
+        aria-label={props.label}
+        className="min-h-0 overflow-y-auto overscroll-contain outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+        ref={props.listRef}
+        role="region"
+        tabIndex={0}
+      >
+        <PageLayout>{props.children}</PageLayout>
+      </div>
+      {props.details}
+    </div>
+  );
+}
+
+/** Open a run's Conversation from its row without opening run details. */
+export function RunConversationLink(props: { conversationId?: string }) {
+  if (!props.conversationId) return <span aria-hidden="true" />;
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Link
+            aria-label="Open conversation"
+            className={cn(buttonVariants({ size: "icon" }), "size-8")}
+            to={conversationPath(props.conversationId)}
+          >
+            <MessageSquareText aria-hidden="true" size={15} />
+          </Link>
+        }
+      />
+      <TooltipContent size="compact">Open conversation</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** Show what one run did, what it cost, and why it failed. */
+export function AutomationRunDetails(props: {
+  loading: boolean;
+  onClose(): void;
+  /** Undefined while runs load, or when the selected run is not loaded. */
+  run: AutomationRun | undefined;
+  /** The executions page already names its Automation. */
+  showAutomation: boolean;
+}) {
+  const { run } = props;
+  const title = run ? automationRunTitle(run, run.automationTitle) : "Run";
+  return (
+    <DetailsPanel
+      actions={
+        run?.conversationId ? (
+          <Link
+            className={cn(buttonVariants(), "shrink-0 whitespace-nowrap")}
+            to={conversationPath(run.conversationId)}
+          >
+            Open conversation
+          </Link>
+        ) : undefined
+      }
+      label="Run details"
+      onClose={props.onClose}
+      sheetTitle={title}
+      title={
+        <h2 className="m-0 line-clamp-2 break-words font-display text-base font-medium text-dashboard-text">
+          {title}
+        </h2>
+      }
+    >
+      <div className="p-4 [overflow-wrap:anywhere]">
+        {run ? (
+          <AutomationRunContent
+            run={run}
+            showAutomation={props.showAutomation}
+          />
+        ) : props.loading ? (
+          <PageContentSkeleton label="Loading run details" variant="panel" />
+        ) : (
+          <p className="m-0 text-sm text-dashboard-text-muted">
+            This run is not in the loaded runs.
+          </p>
+        )}
+      </div>
+    </DetailsPanel>
+  );
+}
+
+function AutomationRunContent(props: {
+  run: AutomationRun;
+  showAutomation: boolean;
+}) {
+  const { run } = props;
+  const versionsPath = `${automationPath(run.automationId)}/versions`;
+  return (
+    <div className="grid min-w-0 gap-3">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-1">
+        <StatusChip tone={automationRunStatusTone(run.status)}>
+          {run.status}
+        </StatusChip>
+        <time
+          className="text-xs text-dashboard-text-muted"
+          dateTime={run.executedAt}
+          title={formatAutomationRunTime(run.executedAt)}
+        >
+          {formatRelativeTime(run.executedAt)}
+        </time>
+      </div>
+      {run.error ? (
+        <RunSection title="Error">
+          <p className="m-0 whitespace-pre-wrap font-mono text-xs leading-relaxed text-rose-300">
+            {run.error}
+          </p>
+        </RunSection>
+      ) : null}
+      <RunSection title="Run">
+        <dl className={runFactsClass}>
+          <RunFact label="Trigger">
+            {run.kind === "scheduled" ? "Schedule" : "Event"}
+          </RunFact>
+          {run.scheduledFor ? (
+            <RunFact label="Scheduled for">
+              {formatAutomationRunTime(run.scheduledFor)}
+            </RunFact>
+          ) : null}
+          {run.startedAt ? (
+            <RunFact label="Started">
+              {formatAutomationRunTime(run.startedAt)}
+            </RunFact>
+          ) : null}
+          <RunFact label="Finished">
+            {formatAutomationRunTime(run.executedAt)}
+          </RunFact>
+          <RunFact label="Duration">
+            {formatRuntime(run.durationMs) || "—"}
+          </RunFact>
+          <RunFact label="Tokens">
+            {run.totalTokens === undefined
+              ? "—"
+              : formatCompactNumber(run.totalTokens)}
+          </RunFact>
+          <RunFact label="Cost">
+            {run.costUsd === undefined
+              ? "—"
+              : formatCostSummary({ total: run.costUsd })}
+          </RunFact>
+        </dl>
+      </RunSection>
+      <RunSection title="Setup">
+        <dl className={runFactsClass}>
+          {props.showAutomation ? (
+            <RunFact label="Automation">
+              <Link
+                className={dashboardInlineLinkClass}
+                to={automationPath(run.automationId)}
+              >
+                {run.automationTitle}
+              </Link>
+            </RunFact>
+          ) : null}
+          {run.automationVersion ? (
+            <RunFact label="Version">
+              <Link className={dashboardInlineLinkClass} to={versionsPath}>
+                Version {run.automationVersion}
+              </Link>
+            </RunFact>
+          ) : null}
+          {run.credentialMode ? (
+            <RunFact label="Accounts">
+              {run.credentialMode === "creator"
+                ? "Creator’s connected accounts"
+                : "Junior’s accounts only"}
+            </RunFact>
+          ) : null}
+          <RunFact label="Run ID">
+            <span className="font-mono">{run.executionId}</span>
+          </RunFact>
+        </dl>
+      </RunSection>
+      {run.conversationId ? null : (
+        <p className="m-0 px-1 text-xs text-dashboard-text-muted">
+          No Conversation was recorded for this run.
+        </p>
+      )}
+    </div>
+  );
+}
+
+// Match the Summary tab cards in conversation details.
+const runFactsClass = "m-0 grid min-w-0 gap-2 text-xs leading-snug";
+
+function RunSection(props: { children: ReactNode; title: string }) {
+  return (
+    <section className="grid min-w-0 gap-2.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3">
+      <h3 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
+        {props.title}
+      </h3>
+      {props.children}
+    </section>
+  );
+}
+
+function RunFact(props: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex min-w-0 items-baseline justify-between gap-4">
+      <dt className="shrink-0 text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 min-w-0 break-words text-right tabular-nums text-dashboard-text">
+        {props.children}
+      </dd>
+    </div>
+  );
+}