@sentry/junior-dashboard 0.266.0 → 0.268.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/pages/code/RepositorySections.tsx

@@ -69,6 +69,7 @@ export function RecentConversationRow(props: { conversation: Conversation }) {
             finishedSinceSeen={false}
             isPrivate={conversation.visibility === "private"}
             status={visualStatusForConversation(conversation)}
+            waitingOnViewer={false}
           />
         </span>
         <div className="min-w-0 truncate font-display text-sm text-dashboard-text">

package/src/client/pages/code/RepositoryTabs.tsx

@@ -18,6 +18,7 @@ import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
 import { buildConversations, getDashboardTimeZone } from "../../format";
 import { useDebouncedValue } from "../../debouncedValue";
+import { useWaitingConversationIds } from "../../review-desk/queries";
 import { CodeActivityChart } from "./CodeActivityChart";
 import { CodeChangeRow } from "./CodeChangeRow";
 import { repositoryActivity } from "./RepositorySections";
@@ -32,6 +33,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
   const search = useDebouncedValue(query.trim());
   const feed = useCodeRepositoryConversationsData(props.repositoryId, search);
   const conversations = buildConversations(feed.data?.conversations ?? []);
+  const waitingConversationIds = useWaitingConversationIds();
   useEffect(() => {
     setPage(1);
   }, [search]);
@@ -59,6 +61,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
           finishedConversationIds={noFinishedConversations}
           loading={!feed.data}
           timeZone={getDashboardTimeZone()}
+          waitingConversationIds={waitingConversationIds}
         />
       )}
       <PagePagination

package/src/client/primaryNav.ts

@@ -9,6 +9,7 @@ const AUTH_PRIMARY_NAV_PREFIXES = [
   "/memories",
   "/settings",
   "/plugins/",
+  "/review",
 ] as const;
 
 /** True when the path is only available to a signed-in viewer. */
@@ -24,6 +25,8 @@ export function buildPrimaryNavItems(input: {
   loggedIn: boolean;
   pathname: string;
   primaryUserPages: PluginUserPageLink[];
+  /** Open Review items assigned to the viewer. */
+  reviewCount?: number;
   userPagesPending: boolean;
 }): DashboardHeaderNavItem[] {
   const memoryNavPage = input.primaryUserPages.find(
@@ -32,8 +35,8 @@ export function buildPrimaryNavItems(input: {
   const otherPrimaryUserPages = input.primaryUserPages.filter(
     (page) => !(page.pluginName === "memory" && page.id === "memories"),
   );
-  // Auth-only routes already imply the signed-in primary nav. Hold Tasks and
-  // Memories slots while core/user-pages catch up so the header does not jump.
+  // Auth-only routes already imply the signed-in primary nav. Hold Review
+  // desk, Tasks, and Memories slots while core/user-pages catch up so the header does not jump.
   const reserveAuthPrimaryNav =
     input.loading && isAuthPrimaryNavPath(input.pathname);
   const showTasksNav = input.loggedIn || reserveAuthPrimaryNav;
@@ -43,6 +46,16 @@ export function buildPrimaryNavItems(input: {
     (input.loggedIn && input.userPagesPending);
 
   return [
+    ...(showTasksNav
+      ? [
+          {
+            count: input.reviewCount,
+            key: "review",
+            label: "Review desk",
+            to: "/review",
+          },
+        ]
+      : []),
     { key: "code", label: "Code", to: "/code" },
     ...(showTasksNav
       ? [{ key: "automations", label: "Automations", to: "/automations" }]

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

@@ -0,0 +1,62 @@
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+import { Drawer } from "../components/Drawer";
+import { ReviewItemCard } from "./ReviewItemCard";
+import { useReviewItemsData } from "./queries";
+
+function itemCountLabel(count: number): string {
+  return count === 1 ? "1 open review item" : `${count} open review items`;
+}
+
+/**
+ * Show how many open Review items are linked to a Conversation, above its
+ * message box. The bar opens a side panel where the viewer can act on each.
+ */
+export function ConversationReviewBar(props: { conversationId: string }) {
+  const [open, setOpen] = useState(false);
+  const items =
+    useReviewItemsData({
+      archived: false,
+      conversationId: props.conversationId,
+      view: "all",
+    }).data?.items ?? [];
+  if (items.length === 0) return null;
+  const label = itemCountLabel(items.length);
+  return (
+    <>
+      <button
+        className="mb-2 flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border border-violet-300/25 bg-violet-300/[0.06] px-3 py-2 text-left font-sans text-sm text-dashboard-text transition-colors hover:bg-violet-300/[0.1]"
+        onClick={() => setOpen(true)}
+        type="button"
+      >
+        <span className="flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="size-2 shrink-0 rounded-full bg-violet-300"
+          />
+          {label}
+        </span>
+        <ChevronRight aria-hidden="true" size={16} />
+      </button>
+      {open ? (
+        <Drawer
+          closeLabel="Close review items"
+          header={
+            <h2 className="m-0 font-sans text-base font-semibold">{label}</h2>
+          }
+          label="Review items"
+          onClose={() => setOpen(false)}
+          openKey={props.conversationId}
+          width="narrow"
+        >
+          <div className="grid gap-3">
+            {items.map((item) => (
+              <ReviewItemCard item={item} key={item.id} />
+            ))}
+          </div>
+        </Drawer>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,277 @@
+import 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 { SearchInput } from "../components/SearchInput";
+import { StatusChip } from "../components/StatusChip";
+import { Card } from "../components/layout/Card";
+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 { 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;
+
+const rowClass =
+  "grid gap-0.5 rounded-md px-3 py-2 text-inherit no-underline transition-colors";
+
+// The list and the detail are already cards, so an empty state is plain
+// text, not a second box.
+function EmptyMessage(props: { children: ReactNode }) {
+  return (
+    <p className="m-0 px-4 py-8 text-center text-sm text-dashboard-text-muted">
+      {props.children}
+    </p>
+  );
+}
+
+function ListGroup(props: { children: ReactNode; title: string }) {
+  return (
+    <section className="grid gap-1">
+      <h2 className="m-0 px-3 font-sans text-xs font-medium text-dashboard-text-muted">
+        {props.title}
+      </h2>
+      <ul className="m-0 grid list-none gap-0.5 p-0">{props.children}</ul>
+    </section>
+  );
+}
+
+function ItemRow(props: {
+  item: ReviewItemPayload;
+  searchParams: URLSearchParams;
+  selected: boolean;
+}) {
+  const { item } = props;
+  const unassigned = !item.assignedToEveryone && item.assignees.length === 0;
+  return (
+    <li>
+      <Link
+        aria-current={props.selected ? "true" : undefined}
+        className={cn(
+          rowClass,
+          props.selected
+            ? "bg-dashboard-accent/[0.08]"
+            : "hover:bg-dashboard-fill-soft",
+        )}
+        replace
+        to={pathWithSearch(reviewItemPath(item.id), props.searchParams)}
+      >
+        <span className="truncate text-sm font-medium">{item.title}</span>
+        <span className="flex min-w-0 items-center gap-2 text-xs text-dashboard-text-muted">
+          {unassigned ? (
+            <StatusChip size="compact" tone="warning">
+              Unassigned
+            </StatusChip>
+          ) : (
+            <span className="truncate">{assigneeLabel(item)}</span>
+          )}
+          <span className="shrink-0">
+            {formatRelativeTime(item.closedAt ?? item.updatedAt)}
+          </span>
+        </span>
+      </Link>
+    </li>
+  );
+}
+
+function BlockedAutomationRow(props: { automation: AutomationSummary }) {
+  return (
+    <li>
+      <Link
+        className={cn(rowClass, "hover:bg-dashboard-fill-soft")}
+        to={automationPath(props.automation.id)}
+      >
+        <span className="truncate text-sm font-medium">
+          {props.automation.title}
+        </span>
+        <span className="truncate text-xs text-amber-300">
+          {props.automation.statusReason ?? "Blocked"}
+        </span>
+      </Link>
+    </li>
+  );
+}
+
+function ReviewListLoading() {
+  return (
+    <div
+      aria-busy="true"
+      aria-label="Loading review items"
+      className="grid gap-2"
+    >
+      {[0, 1, 2, 3].map((row) => (
+        <div className="grid gap-1.5 px-3 py-2" key={row}>
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-3 w-1/3" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Render the review desk: open or archived Review items in the Mine,
+ * Everyone, and All views, with the selected item beside the list.
+ */
+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 [search, setSearch, q] = useDebouncedSearchParam();
+  const archived = state === "archived";
+  const items = useReviewItemsData({ archived, q, view });
+  const showBlocked = !archived && view !== "everyone" && !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 blockedAutomations = showBlocked
+    ? (blocked.data?.automations ?? [])
+    : [];
+  const empty =
+    items.data && list.length === 0 && blockedAutomations.length === 0;
+
+  return (
+    <PageLayout>
+      <PageHeader
+        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>
+      <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 ? (
+            <InlineError className="px-3">
+              Could not load review items.
+            </InlineError>
+          ) : !items.data ? (
+            <ReviewListLoading />
+          ) : empty ? (
+            <EmptyMessage>
+              {archived ? "No archived items." : "Nothing needs you right now."}
+            </EmptyMessage>
+          ) : (
+            <>
+              {actions.length > 0 ? (
+                <ListGroup title={archived ? "Questions" : "Needs an answer"}>
+                  {actions.map((item) => (
+                    <ItemRow
+                      item={item}
+                      key={item.id}
+                      searchParams={searchParams}
+                      selected={item.id === selected?.id}
+                    />
+                  ))}
+                </ListGroup>
+              ) : null}
+              {notices.length > 0 ? (
+                <ListGroup title="Notices">
+                  {notices.map((item) => (
+                    <ItemRow
+                      item={item}
+                      key={item.id}
+                      searchParams={searchParams}
+                      selected={item.id === selected?.id}
+                    />
+                  ))}
+                </ListGroup>
+              ) : null}
+              {blockedAutomations.length > 0 ? (
+                <ListGroup title="Blocked Automations">
+                  {blockedAutomations.map((automation) => (
+                    <BlockedAutomationRow
+                      automation={automation}
+                      key={automation.id}
+                    />
+                  ))}
+                </ListGroup>
+              ) : null}
+            </>
+          )}
+        </Card>
+        <Card className="min-w-0" padding="md">
+          {selected ? (
+            // A key per item resets the answer form and its send lock, so
+            // one item's answer can never reach another item.
+            <ReviewItemDetail item={selected} key={selected.id} />
+          ) : direct.error ? (
+            <InlineError>Review item not found.</InlineError>
+          ) : (
+            <EmptyMessage>Select an item to see it here.</EmptyMessage>
+          )}
+        </Card>
+      </div>
+    </PageLayout>
+  );
+}