@sentry/junior-dashboard 0.268.0 → 0.269.0

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

@@ -0,0 +1,34 @@
+# Automation pages
+
+## Boundaries
+
+- Core owns validation, edit access, creator-only rules, revision checks,
+  Schedule previews, and the Event catalog. The page shows core errors. It
+  does not repeat these rules.
+- Preview requests never save or run work.
+- Completed scheduled Automations are read-only.
+
+## Editor rules
+
+- Send only changed fields. Keep unsupported triggers and stored
+  Destinations unless the user replaces them. Keep outcome order.
+- New messages can target only the current Destination or the creator.
+- A public reader sees outcomes as read-only and cannot turn on creator
+  credentials. Warn that an instruction or event selector change switches to
+  system credentials.
+- Pause, Resume, and Delete are creator-only. Hide them from other viewers.
+- Query refreshes must not replace an unsaved draft. After a stale save, let
+  the user keep their changes or load the latest version.
+- Block navigation with unsaved changes.
+- Lifecycle actions and "Make active" read the latest revision first.
+
+## Page rules
+
+- Each Automation has one page at `/automations/:id`. Keep the list query
+  string on the way back. Drop tab-only params: `result`, `run`, `version`.
+- `AutomationRecentRuns` shows terminal runs only. Do not infer queued or
+  running work from terminal records.
+- Delete keeps errors in the dialog and blocks dismissal while pending.
+
+Browser journeys: `e2e/automation-editor.spec.ts` and
+`e2e/automations.spec.ts`.

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

@@ -43,7 +43,7 @@ export function AutomationActions({
   const completed = automation.status === "completed";
   const paused = automation.status === "paused";
   const blocked = automation.status === "blocked";
-  const canPause = automation.ownedByViewer && !completed;
+  const canPause = !completed;
   const action = paused || blocked ? "resume" : "pause";
   const mutation = useMutation({
     mutationFn: async () => {
@@ -135,25 +135,23 @@ export function AutomationActions({
             </Popover>
           </>
         ) : null}
-        {automation.ownedByViewer ? (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Button
-                  focusableWhenDisabled
-                  aria-label="Delete automation"
-                  size="icon"
-                  variant="danger"
-                  onClick={(event) => onDelete(event.currentTarget)}
-                  disabled={mutation.isPending}
-                >
-                  <Trash2 aria-hidden="true" size={16} />
-                </Button>
-              }
-            />
-            <TooltipContent size="compact">Delete automation</TooltipContent>
-          </Tooltip>
-        ) : null}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button
+                focusableWhenDisabled
+                aria-label="Delete automation"
+                size="icon"
+                variant="danger"
+                onClick={(event) => onDelete(event.currentTarget)}
+                disabled={mutation.isPending}
+              >
+                <Trash2 aria-hidden="true" size={16} />
+              </Button>
+            }
+          />
+          <TooltipContent size="compact">Delete automation</TooltipContent>
+        </Tooltip>
       </div>
       {mutation.error ? (
         <div className="max-w-sm">

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

@@ -135,8 +135,7 @@ export function AutomationEditor(props: {
   const dropsCreatorCredentials =
     !owned &&
     original.credentialMode === "creator" &&
-    (changes.instruction !== undefined ||
-      (original.kind === "event" && changes.trigger !== undefined));
+    (changes.instruction !== undefined || changes[triggerField] !== undefined);
   const triggerError = fieldError(triggerField);
   const inputState = (key: string) => ({
     "aria-invalid": Boolean(fieldError(key)) || undefined,
@@ -426,8 +425,8 @@ export function AutomationEditor(props: {
             {dropsCreatorCredentials ? (
               <FormNotice title="Saving switches this automation to system credentials.">
                 Only {creator} can let a changed instruction
-                {original.kind === "event" ? " or trigger" : ""} use their
-                connected accounts.
+                {original.kind === "event" ? " or trigger" : " or schedule"} use
+                their connected accounts.
               </FormNotice>
             ) : null}
             {fieldError("credentialMode") ? (

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

@@ -197,9 +197,9 @@ function AutomationAbout(props: { automation: AutomationSummary }) {
         <p className="mt-3 mb-0 text-xs leading-relaxed text-dashboard-text-muted">
           {automation.destination.visibility === "private"
             ? null
-            : "You can edit its settings because it is in a public channel. "}
-          Only {automation.createdBy} can pause, resume, or delete it, change
-          where results go, or turn on their connected accounts.
+            : "You can edit, pause, or delete it because it is in a public channel. "}
+          Only {automation.createdBy} can change where results go, turn on their
+          connected accounts, or resume or run it while it uses them.
         </p>
       )}
     </RailCard>

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

@@ -140,8 +140,8 @@ export function AutomationAttention({
         <p className="m-0 break-words">
           {automation.statusReason ??
             "Check the last run to see what needs fixing."}{" "}
-          {!automation.ownedByViewer
-            ? `Ask ${automation.createdBy} to resume after this is fixed.`
+          {!automation.ownedByViewer && automation.credentialMode === "creator"
+            ? `It uses accounts connected by ${automation.createdBy}. Ask them to resume it, or switch it to Junior's credentials first.`
             : null}
         </p>
       ) : null}

package/src/client/pages/system/AGENTS.md

@@ -0,0 +1,12 @@
+# System pages
+
+- The URL selects a Workspace recipe: `/system/workspaces/:id` opens
+  `WorkspaceDetails` beside the list.
+- The list report has no snapshots. The detail read adds the current
+  snapshot. Keep snapshot loading and errors inside the Snapshot row.
+- Edit and Delete live in the panel header. List rows have no actions.
+- `WorkspaceDeleteDialog` keeps errors in the dialog and blocks dismissal
+  while the request runs.
+- Close and Escape return focus to the selected row.
+
+Browser coverage: `e2e/system.spec.ts`.

package/src/client/review-desk/ConversationReviewBar.tsx

@@ -2,10 +2,13 @@ import { ChevronRight } from "lucide-react";
 import { useState } from "react";
 
 import { Drawer } from "../components/Drawer";
+import { LoadMorePagination } from "../components/Pagination";
 import { ReviewItemCard } from "./ReviewItemCard";
 import { useReviewItemsData } from "./queries";
 
-function itemCountLabel(count: number): string {
+/** `more` marks a count of the loaded pages only, such as "50+". */
+function itemCountLabel(count: number, more: boolean): string {
+  if (more) return `${count}+ open review items`;
   return count === 1 ? "1 open review item" : `${count} open review items`;
 }
 
@@ -15,14 +18,12 @@ function itemCountLabel(count: number): string {
  */
 export function ConversationReviewBar(props: { conversationId: string }) {
   const [open, setOpen] = useState(false);
-  const items =
-    useReviewItemsData({
-      archived: false,
-      conversationId: props.conversationId,
-      view: "all",
-    }).data?.items ?? [];
+  const { items, query } = useReviewItemsData({
+    conversationId: props.conversationId,
+  });
   if (items.length === 0) return null;
-  const label = itemCountLabel(items.length);
+  const more = Boolean(query.hasNextPage);
+  const label = itemCountLabel(items.length, more);
   return (
     <>
       <button
@@ -54,6 +55,11 @@ export function ConversationReviewBar(props: { conversationId: string }) {
             {items.map((item) => (
               <ReviewItemCard item={item} key={item.id} />
             ))}
+            <LoadMorePagination
+              hasMore={more}
+              loading={query.isFetchingNextPage}
+              onLoadMore={() => void query.fetchNextPage()}
+            />
           </div>
         </Drawer>
       ) : null}

package/src/client/review-desk/ReviewDeskPage.tsx

@@ -1,12 +1,13 @@
-import type { ReactNode } from "react";
+import { Archive } from "lucide-react";
+import { useId, type ReactNode } from "react";
 import { Link, useSearchParams } from "react-router";
 import type {
   AutomationSummary,
   ReviewItemPayload,
 } from "@sentry/junior/api/schema";
 
-import { FilterTabList } from "../components/FilterBar";
 import { InlineError } from "../components/InlineError";
+import { LoadMorePagination } from "../components/Pagination";
 import { SearchInput } from "../components/SearchInput";
 import { StatusChip } from "../components/StatusChip";
 import { Card } from "../components/layout/Card";
@@ -14,33 +15,19 @@ import { PageHeader } from "../components/layout/PageHeader";
 import { PageLayout } from "../components/layout/PageLayout";
 import { Skeleton } from "../components/ui/skeleton";
 import { automationPath, formatRelativeTime } from "../format";
-import {
-  parseSearchParamEnum,
-  pathWithSearch,
-  useDebouncedSearchParam,
-} from "../searchParams";
+import { pathWithSearch, useDebouncedSearchParam } from "../searchParams";
 import { cn } from "../styles";
 import { ReviewItemDetail } from "./ReviewItemDetail";
 import {
-  REVIEW_DESK_VIEWS,
   useBlockedAutomationsData,
   useReviewItemData,
   useReviewItemsData,
 } from "./queries";
-import { assigneeLabel, reviewItemPath } from "./reviewItemFormat";
-
-const VIEW_TABS = [
-  { label: "Mine", value: "mine" },
-  { label: "Everyone", value: "everyone" },
-  { label: "All", value: "all" },
-] as const;
-
-const STATE_TABS = [
-  { label: "Open", value: "open" },
-  { label: "Archived", value: "archived" },
-] as const;
-
-const ITEM_STATES = ["open", "archived"] as const;
+import {
+  assigneeLabel,
+  reviewItemPath,
+  reviewItemStatusLabel,
+} from "./reviewItemFormat";
 
 const rowClass =
   "grid gap-0.5 rounded-md px-3 py-2 text-inherit no-underline transition-colors";
@@ -55,10 +42,23 @@ function EmptyMessage(props: { children: ReactNode }) {
   );
 }
 
-function ListGroup(props: { children: ReactNode; title: string }) {
+function ListGroup(props: {
+  children: ReactNode;
+  className?: string;
+  icon?: ReactNode;
+  title: string;
+}) {
+  const headingId = useId();
   return (
-    <section className="grid gap-1">
-      <h2 className="m-0 px-3 font-sans text-xs font-medium text-dashboard-text-muted">
+    <section
+      aria-labelledby={headingId}
+      className={cn("grid gap-1", props.className)}
+    >
+      <h2
+        id={headingId}
+        className="m-0 flex items-center gap-1.5 px-3 font-sans text-xs font-medium text-dashboard-text-muted"
+      >
+        {props.icon}
         {props.title}
       </h2>
       <ul className="m-0 grid list-none gap-0.5 p-0">{props.children}</ul>
@@ -72,6 +72,7 @@ function ItemRow(props: {
   selected: boolean;
 }) {
   const { item } = props;
+  const closed = item.status !== "open";
   const unassigned = !item.assignedToEveryone && item.assignees.length === 0;
   return (
     <li>
@@ -86,9 +87,20 @@ function ItemRow(props: {
         replace
         to={pathWithSearch(reviewItemPath(item.id), props.searchParams)}
       >
-        <span className="truncate text-sm font-medium">{item.title}</span>
+        <span
+          className={cn(
+            "truncate text-sm font-medium",
+            closed && "text-dashboard-text-muted",
+          )}
+        >
+          {item.title}
+        </span>
         <span className="flex min-w-0 items-center gap-2 text-xs text-dashboard-text-muted">
-          {unassigned ? (
+          {closed ? (
+            <StatusChip className="shrink-0" size="compact">
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          ) : unassigned ? (
             <StatusChip size="compact" tone="warning">
               Unassigned
             </StatusChip>
@@ -140,42 +152,25 @@ function ReviewListLoading() {
 }
 
 /**
- * Render the review desk: open or archived Review items in the Mine,
- * Everyone, and All views, with the selected item beside the list.
+ * Render the review desk: the open Review items that the viewer can see,
+ * with search and the selected item beside the list. A search also finds
+ * archived items, which show in their own group.
  */
 export function ReviewDeskPage() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const view =
-    parseSearchParamEnum(searchParams.get("view"), REVIEW_DESK_VIEWS) ?? "mine";
-  const state =
-    parseSearchParamEnum(searchParams.get("state"), ITEM_STATES) ?? "open";
-  // The selected item can be missing from the new list, so a tab change
-  // drops it and the first item of the new list shows.
-  function selectTab(key: "state" | "view", value: string, initial: string) {
-    setSearchParams(
-      (current) => {
-        const next = new URLSearchParams(current);
-        next.delete("item");
-        if (value === initial) next.delete(key);
-        else next.set(key, value);
-        return next;
-      },
-      { replace: true },
-    );
-  }
+  const [searchParams] = useSearchParams();
   const [search, setSearch, q] = useDebouncedSearchParam();
-  const archived = state === "archived";
-  const items = useReviewItemsData({ archived, q, view });
-  const showBlocked = !archived && view !== "everyone" && !q;
+  const { items: list, moreArchived, query: items } = useReviewItemsData({ q });
+  const showBlocked = !q;
   const blocked = useBlockedAutomationsData(showBlocked);
-  const list = items.data?.items ?? [];
   const selectedId = searchParams.get("item") ?? list[0]?.id;
   const listed = list.find((item) => item.id === selectedId);
   // A link can select an item that is not in the current view.
   const direct = useReviewItemData(listed ? undefined : selectedId);
   const selected = listed ?? direct.data;
-  const actions = list.filter((item) => item.kind === "action");
-  const notices = list.filter((item) => item.kind === "notice");
+  const open = list.filter((item) => item.status === "open");
+  const archived = list.filter((item) => item.status !== "open");
+  const actions = open.filter((item) => item.kind === "action");
+  const notices = open.filter((item) => item.kind === "notice");
   const blockedAutomations = showBlocked
     ? (blocked.data?.automations ?? [])
     : [];
@@ -188,30 +183,18 @@ export function ReviewDeskPage() {
         description="Items that need a person, and who can act on them."
         title="Review desk"
       />
-      <div className="flex min-w-0 flex-wrap items-center gap-3">
-        <FilterTabList
-          ariaLabel="Assignee view"
-          items={VIEW_TABS}
-          onChange={(value) => selectTab("view", value, "mine")}
-          value={view}
-        />
-        <FilterTabList
-          ariaLabel="Item state"
-          items={STATE_TABS}
-          onChange={(value) => selectTab("state", value, "open")}
-          value={state}
-        />
-        <SearchInput
-          className="ml-auto w-full sm:w-64"
-          label="Search review items"
-          onChange={setSearch}
-          placeholder="Search items"
-          value={search}
-        />
-      </div>
+      <SearchInput
+        label="Search review items"
+        onChange={setSearch}
+        placeholder="Search open and archived items"
+        value={search}
+      />
       <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)]">
-        <Card className="grid content-start gap-4 py-3" padding="none">
-          {items.error ? (
+        <Card
+          className="grid content-start gap-4 py-3 lg:self-start"
+          padding="none"
+        >
+          {items.error && !items.data ? (
             <InlineError className="px-3">
               Could not load review items.
             </InlineError>
@@ -219,12 +202,12 @@ export function ReviewDeskPage() {
             <ReviewListLoading />
           ) : empty ? (
             <EmptyMessage>
-              {archived ? "No archived items." : "Nothing needs you right now."}
+              {q ? `No items match "${q}".` : "No open items."}
             </EmptyMessage>
           ) : (
             <>
               {actions.length > 0 ? (
-                <ListGroup title={archived ? "Questions" : "Needs an answer"}>
+                <ListGroup title="Needs an answer">
                   {actions.map((item) => (
                     <ItemRow
                       item={item}
@@ -247,6 +230,43 @@ export function ReviewDeskPage() {
                   ))}
                 </ListGroup>
               ) : null}
+              <LoadMorePagination
+                className="px-3"
+                hasMore={!items.isPlaceholderData && Boolean(items.hasNextPage)}
+                loading={items.isFetchingNextPage}
+                onLoadMore={() => void items.fetchNextPage()}
+              />
+              {items.isFetchNextPageError ? (
+                <InlineError className="px-3 text-center">
+                  Could not load more items. Try again.
+                </InlineError>
+              ) : null}
+              {archived.length > 0 ? (
+                <ListGroup
+                  className={
+                    open.length > 0
+                      ? "border-t border-dashboard-border-subtle pt-3"
+                      : undefined
+                  }
+                  icon={<Archive aria-hidden="true" size={13} />}
+                  title="Archived"
+                >
+                  {archived.map((item) => (
+                    <ItemRow
+                      item={item}
+                      key={item.id}
+                      searchParams={searchParams}
+                      selected={item.id === selected?.id}
+                    />
+                  ))}
+                  {moreArchived ? (
+                    <li className="px-3 py-1 text-xs text-dashboard-text-muted">
+                      Only the newest archived matches show. Add words to the
+                      search to find older items.
+                    </li>
+                  ) : null}
+                </ListGroup>
+              ) : null}
               {blockedAutomations.length > 0 ? (
                 <ListGroup title="Blocked Automations">
                   {blockedAutomations.map((automation) => (

package/src/client/review-desk/ReviewItemDetail.tsx

@@ -1,3 +1,4 @@
+import { Archive } from "lucide-react";
 import type { ReactNode } from "react";
 import { Link } from "react-router";
 import type { ReviewItemPayload } from "@sentry/junior/api/schema";
@@ -26,20 +27,27 @@ export function ReviewItemDetail(props: { item: ReviewItemPayload }) {
   const { item } = props;
   const subject = item.subject;
   const conversationTitles = useLinkedConversationTitles(item.conversationIds);
+  const closed = item.status !== "open";
   return (
     <article className="grid min-w-0 content-start gap-5">
+      {closed ? (
+        // Search mixes open and archived items, so a closed item must be
+        // easy to tell apart at the top of the detail.
+        <p className="m-0 flex items-center gap-2 rounded-md bg-dashboard-fill-soft px-3 py-2 text-xs font-medium text-dashboard-text-muted">
+          <Archive aria-hidden="true" size={14} />
+          Archived · {reviewItemStatusLabel(item)}
+        </p>
+      ) : null}
       <header className="grid gap-1.5">
         <div className="flex min-w-0 items-start justify-between gap-3">
           <h2 className="m-0 min-w-0 break-words font-display text-xl font-medium leading-snug">
             {item.title}
           </h2>
-          <StatusChip
-            className="mt-1 shrink-0"
-            size="compact"
-            tone={item.status === "open" ? "accent" : "neutral"}
-          >
-            {reviewItemStatusLabel(item)}
-          </StatusChip>
+          {closed ? null : (
+            <StatusChip className="mt-1 shrink-0" size="compact" tone="accent">
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          )}
         </div>
         <p className="m-0 text-xs text-dashboard-text-muted">
           Added {formatRelativeTime(item.createdAt)}

package/src/client/review-desk/queries.ts

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import {
   keepPreviousData,
+  useInfiniteQuery,
   useMutation,
   useQueries,
   useQuery,
@@ -19,38 +20,46 @@ import {
 import { conversationDetailTitle } from "../format";
 import { fetchDashboardJson, post } from "../http";
 
-/** Review desk views. Each shows open items, or archived ones. */
-export const REVIEW_DESK_VIEWS = ["mine", "everyone", "all"] as const;
-export type ReviewDeskView = (typeof REVIEW_DESK_VIEWS)[number];
-
 const REVIEW_ITEMS_QUERY_KEY = ["dashboard", "review-items"] as const;
 const COUNT_REFRESH_MS = 60_000;
 
-/** List the Review items that the viewer can see in one view. */
+/**
+ * List the open Review items that the viewer can see, one page at a time.
+ * A search also finds archived items, with the first page. `items` holds
+ * the items of every loaded page, and `query` loads more.
+ */
 export function useReviewItemsData(filters: {
-  archived: boolean;
   conversationId?: string;
   q?: string;
-  view: ReviewDeskView;
 }) {
-  const params = new URLSearchParams({ view: filters.view });
-  if (filters.archived) params.set("archived", "true");
+  const params = new URLSearchParams();
   if (filters.conversationId) {
     params.set("conversationId", filters.conversationId);
   }
   if (filters.q) params.set("q", filters.q);
   const search = params.toString();
-  return useQuery({
+  const query = useInfiniteQuery({
+    initialPageParam: undefined as string | undefined,
     queryKey: [...REVIEW_ITEMS_QUERY_KEY, "list", search],
-    queryFn: ({ signal }) =>
-      fetchDashboardJson(
+    queryFn: ({ pageParam, signal }) => {
+      const pageParams = new URLSearchParams(search);
+      if (pageParam) pageParams.set("cursor", pageParam);
+      return fetchDashboardJson(
         reviewItemListSchema,
-        `/api/review-items?${search}`,
+        `/api/review-items?${pageParams.toString()}`,
         signal,
-      ),
+      );
+    },
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
     placeholderData: keepPreviousData,
     retry: false,
   });
+  const pages = query.data?.pages;
+  const items = useMemo(
+    () => (pages ?? []).flatMap((page) => page.items),
+    [pages],
+  );
+  return { items, moreArchived: Boolean(pages?.[0]?.moreArchived), query };
 }
 
 /** Read one Review item, for a link to an item outside the current list. */
@@ -92,7 +101,7 @@ export function useLinkedConversationTitles(
   }).map((query) => query.data ?? undefined);
 }
 
-/** Count the open Review items assigned to the viewer, for the nav. */
+/** Count the open action items assigned to the viewer, for the nav. */
 export function useReviewItemCountData(enabled: boolean) {
   return useQuery({
     enabled,
@@ -145,7 +154,7 @@ const NO_CONVERSATIONS: ReadonlySet<string> = new Set();
 
 /**
  * Return the Conversations that wait on the viewer. Today only the review
- * desk sets this: an open linked item assigned to the viewer or Everyone.
+ * desk sets this: a linked open action item assigned to the viewer.
  */
 export function useWaitingConversationIds(): ReadonlySet<string> {
   const query = useQuery({

package/src/mock-reporting/routes.ts

@@ -303,7 +303,7 @@ export function createMockReportingApi(): Hono<{
     jsonResponse(reviewItemListSchema, { items: [] }),
   );
   app.get("/review-items/count", () =>
-    jsonResponse(reviewItemCountSchema, { mine: 0 }),
+    jsonResponse(reviewItemCountSchema, { needsViewer: 0 }),
   );
   app.get("/review-items/waiting-conversations", () =>
     jsonResponse(reviewItemWaitingConversationsSchema, { conversationIds: [] }),

package/src/tailwind.css

@@ -4,7 +4,7 @@
 @import "shadcn/tailwind.css";
 
 /*
- * Dashboard design tokens. components/README.md explains each role.
+ * Dashboard design tokens. components/AGENTS.md has the token rules.
  * Keep structural UI colors here so a second theme can redefine them.
  * Prefer roles over opacity ladders. Status accents stay as Tailwind palette utilities.
  */