@sentry/junior-dashboard 0.267.0 → 0.269.0

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

@@ -0,0 +1,173 @@
+import { useMemo } from "react";
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  automationListSchema,
+  conversationDetailReportSchema,
+  reviewItemCountSchema,
+  reviewItemListSchema,
+  reviewItemSchema,
+  reviewItemWaitingConversationsSchema,
+  type ReviewItemActionBody,
+} from "@sentry/junior/api/schema";
+
+import { conversationDetailTitle } from "../format";
+import { fetchDashboardJson, post } from "../http";
+
+const REVIEW_ITEMS_QUERY_KEY = ["dashboard", "review-items"] as const;
+const COUNT_REFRESH_MS = 60_000;
+
+/**
+ * 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: {
+  conversationId?: string;
+  q?: string;
+}) {
+  const params = new URLSearchParams();
+  if (filters.conversationId) {
+    params.set("conversationId", filters.conversationId);
+  }
+  if (filters.q) params.set("q", filters.q);
+  const search = params.toString();
+  const query = useInfiniteQuery({
+    initialPageParam: undefined as string | undefined,
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "list", search],
+    queryFn: ({ pageParam, signal }) => {
+      const pageParams = new URLSearchParams(search);
+      if (pageParam) pageParams.set("cursor", pageParam);
+      return fetchDashboardJson(
+        reviewItemListSchema,
+        `/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. */
+export function useReviewItemData(id: string | undefined) {
+  return useQuery({
+    enabled: Boolean(id),
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "detail", id],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        reviewItemSchema,
+        `/api/review-items/${encodeURIComponent(id!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
+/**
+ * Read the titles of the Conversations linked to an item. Each read asks for
+ * one event only. A Conversation that the viewer cannot read has no title.
+ */
+export function useLinkedConversationTitles(
+  conversationIds: readonly string[],
+): (string | undefined)[] {
+  return useQueries({
+    queries: conversationIds.map((conversationId) => ({
+      queryKey: ["dashboard", "conversation-title", conversationId],
+      queryFn: async ({ signal }: { signal: AbortSignal }) =>
+        conversationDetailTitle(
+          await fetchDashboardJson(
+            conversationDetailReportSchema,
+            `/api/conversations/${encodeURIComponent(conversationId)}?limit=1`,
+            signal,
+          ),
+        ) ?? null,
+      retry: false,
+      staleTime: 5 * 60_000,
+    })),
+  }).map((query) => query.data ?? undefined);
+}
+
+/** Count the open action items assigned to the viewer, for the nav. */
+export function useReviewItemCountData(enabled: boolean) {
+  return useQuery({
+    enabled,
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "count"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        reviewItemCountSchema,
+        "/api/review-items/count",
+        signal,
+      ),
+    refetchInterval: COUNT_REFRESH_MS,
+    retry: false,
+  });
+}
+
+/**
+ * List the viewer's blocked Automations. They show on the review desk, but
+ * their state stays derived from Automation status.
+ */
+export function useBlockedAutomationsData(enabled: boolean) {
+  return useQuery({
+    enabled,
+    queryKey: ["dashboard", "automations", "scope=mine&state=blocked"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationListSchema,
+        "/api/automations?scope=mine&state=blocked&pageSize=100",
+        signal,
+      ),
+    retry: false,
+  });
+}
+
+/** Take, submit, complete, or dismiss one Review item. */
+export function useReviewItemAction() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (args: { body: ReviewItemActionBody; id: string }) =>
+      post(
+        reviewItemSchema,
+        `/api/review-items/${encodeURIComponent(args.id)}/actions`,
+        args.body,
+      ),
+    onSettled: () =>
+      queryClient.invalidateQueries({ queryKey: REVIEW_ITEMS_QUERY_KEY }),
+  });
+}
+
+const NO_CONVERSATIONS: ReadonlySet<string> = new Set();
+
+/**
+ * Return the Conversations that wait on the viewer. Today only the review
+ * desk sets this: a linked open action item assigned to the viewer.
+ */
+export function useWaitingConversationIds(): ReadonlySet<string> {
+  const query = useQuery({
+    queryKey: [...REVIEW_ITEMS_QUERY_KEY, "waiting-conversations"],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        reviewItemWaitingConversationsSchema,
+        "/api/review-items/waiting-conversations",
+        signal,
+      ),
+    refetchInterval: COUNT_REFRESH_MS,
+    retry: false,
+  });
+  const ids = query.data?.conversationIds;
+  return useMemo(() => (ids ? new Set(ids) : NO_CONVERSATIONS), [ids]);
+}

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

@@ -0,0 +1,61 @@
+import { z } from "zod";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+/** Return the review desk route that selects one item. */
+export function reviewItemPath(id: string): string {
+  return `/review?item=${encodeURIComponent(id)}`;
+}
+
+/** Name the state of an item: what it needs while open, or how it closed. */
+export function reviewItemStatusLabel(item: ReviewItemPayload): string {
+  if (item.status === "open") {
+    return item.kind === "action" ? "Needs an answer" : "Notice";
+  }
+  return item.status === "done" ? "Done" : "Dismissed";
+}
+
+/** Name the assignees of an item in one short line. */
+export function assigneeLabel(item: ReviewItemPayload): string {
+  const names = item.assignees.map(
+    (person) => person.displayName ?? person.email,
+  );
+  if (item.assignedToEveryone) names.unshift("Everyone");
+  return names.length > 0 ? names.join(", ") : "Unassigned";
+}
+
+const ADD_REVIEW_ITEM_TOOL_NAME = "addReviewItem";
+const executeToolInputSchema = z.object({ tool_name: z.string() });
+const addedItemSchema = z.object({ item: z.object({ id: z.string().min(1) }) });
+
+/** Read the item id from a tool result, which can be JSON text. */
+function addedItemId(output: unknown): string | undefined {
+  let value = output;
+  if (typeof output === "string") {
+    try {
+      value = JSON.parse(output);
+    } catch {
+      return undefined;
+    }
+  }
+  return addedItemSchema.safeParse(value).data?.item.id;
+}
+
+/**
+ * Return the id of the Review item that one completed tool call added. The
+ * agent calls `addReviewItem` directly or through `executeTool`. Returns
+ * undefined when the transcript hides the tool result.
+ */
+export function reviewItemIdFromToolCall(call: {
+  input?: unknown;
+  name: string;
+  output?: unknown;
+  status: string;
+}): string | undefined {
+  if (call.status !== "completed") return undefined;
+  const toolName =
+    call.name === "executeTool"
+      ? executeToolInputSchema.safeParse(call.input).data?.tool_name
+      : call.name;
+  if (toolName !== ADD_REVIEW_ITEM_TOOL_NAME) return undefined;
+  return addedItemId(call.output);
+}

package/src/mock-reporting/fixtures.ts

@@ -602,6 +602,16 @@ function activeConversation(nowMs: number): ConversationDetailReport {
           },
         ],
       }),
+      reportEvent(10, iso(Date.parse(startedAt), 46_000), {
+        type: "turn_context",
+        turnId: "active-turn",
+        pluginName: "junior",
+        kind: "user_customization",
+        version: 1,
+        content: {
+          text: "Keep replies short and simple.\nLead with the answer, then the evidence.",
+        },
+      }),
     ],
   });
 }

package/src/mock-reporting/routes.ts

@@ -28,6 +28,9 @@ import {
   personalSpendReportSchema,
   personParamsSchema,
   pluginOperationalReportFeedSchema,
+  reviewItemCountSchema,
+  reviewItemListSchema,
+  reviewItemWaitingConversationsSchema,
   automationExecutionListSchema,
   automationListSchema,
   automationParamsSchema,
@@ -294,6 +297,23 @@ export function createMockReportingApi(): Hono<{
     }
     return errorResponse("Attachment not found.", 404);
   });
+  // Mock reporting has no Review items. Answer the reads here so the
+  // dashboard does not query a database that has no review item tables.
+  app.get("/review-items", () =>
+    jsonResponse(reviewItemListSchema, { items: [] }),
+  );
+  app.get("/review-items/count", () =>
+    jsonResponse(reviewItemCountSchema, { needsViewer: 0 }),
+  );
+  app.get("/review-items/waiting-conversations", () =>
+    jsonResponse(reviewItemWaitingConversationsSchema, { conversationIds: [] }),
+  );
+  app.get("/review-items/:id", () =>
+    errorResponse("Review item not found.", 404),
+  );
+  app.post("/review-items/:id/actions", () =>
+    errorResponse("Review item not found.", 404),
+  );
   app.get("/automations", (c) => {
     const report = readMockAutomationList();
     return jsonResponse(

package/src/shell.ts

@@ -131,6 +131,9 @@ export function dashboardPagePaths(
       nested: true,
       path: basePath === "/" ? "/conversations" : `${basePath}/conversations`,
     },
+    {
+      path: basePath === "/" ? "/review" : `${basePath}/review`,
+    },
     {
       nested: true,
       path: basePath === "/" ? "/people" : `${basePath}/people`,

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.
  */

package/src/client/components/README.md

@@ -1,215 +0,0 @@
-# Dashboard UI kit
-
-Shared dashboard components live here. Feature pages compose these surfaces
-instead of copying Tailwind blocks. See `policies/frontend-components.md` for
-the policy. `pnpm dashboard-style:check` enforces the token rules below.
-
-## shadcn/ui
-
-`packages/junior-dashboard/components.json` configures shadcn/ui for this package.
-It uses Base UI (`base-nova`), Tailwind 4, and Lucide. Add components from the
-repository root:
-
-```sh
-pnpm --filter @sentry/junior-dashboard exec shadcn add <component>
-```
-
-The CLI writes components to `src/client/components/ui/`. Its `@dashboard/*`
-alias points to `src/client/*`. The existing `@/*` alias still points to core.
-The `ui/` files join classes with the merging `cn` from
-`src/client/lib/utils.ts`, so a caller's `className` wins over a base class.
-
-The shadcn color tokens in `src/tailwind.css` use the dashboard tokens in both
-themes. The `dark:` variant follows `data-theme`. Keep the existing Tailwind
-radius scale. Do not apply the CLI's global border or body resets. Check each
-added component against the rules below before use.
-
-Each `ui/` file is shadcn source that uses dashboard tokens. Remove exports
-that no app code uses. Use `ui/` components directly. Do not add an app
-component that only renames a `ui/` component or its props. Change the `ui/`
-file when every caller needs the same style or variant. App components compose
-`ui/` source only when they add structure or behavior:
-
-| App component                  | shadcn source     |
-| ------------------------------ | ----------------- |
-| `Drawer`                       | `ui/drawer`       |
-| `BottomSheet`                  | `ui/sheet`        |
-| `layout/DashboardHeader` (nav) | `ui/sheet`        |
-| `ProfileMenu` (desktop)        | `ui/popover`      |
-| `ActorAvatar`                  | `ui/avatar`       |
-| `ParticipantAvatarStack`       | `ui/avatar`       |
-| `SearchInput`                  | `ui/input-group`  |
-| `PagePagination`               | `ui/pagination`   |
-| `EmptyTelemetry`               | `ui/empty`        |
-| `TimeRangeSelector`            | `ui/toggle-group` |
-| `ThemeSwitcher`                | `ui/toggle-group` |
-| `TranscriptViewToggle`         | `ui/toggle-group` |
-| `FilterTabList`                | `ui/tabs`         |
-| `charts/ActivityChartTooltip`  | `ui/tooltip`      |
-| `conversations/ToolFrame`      | `ui/trace`        |
-| `TranscriptReasoningView`      | `ui/trace`        |
-| `ImageAttachment` (preview)    | `ui/dialog`       |
-| `Notice`, `InlineError`        | `ui/alert`        |
-| App banners                    | `ui/alert`        |
-| Recharts activity charts       | `ui/chart`        |
-
-Rules for adopted components:
-
-- Use `ui/trace` for transcript activity rows. It composes `ui/collapsible`.
-  A closed tool row unmounts its panel, so it does not run Shiki. Reasoning
-  sets `hiddenUntilFound`, so browser find reaches closed text. Transcript
-  search holds rows open and turns off the row button. Put only inline
-  elements, such as `span`, inside the row button.
-- Use `ui/alert-dialog` for every confirmation. Do not use `window.confirm`.
-  Keep the confirmed item in state after close, so the closing dialog keeps its
-  text.
-- Use `ui/dialog` for a short task form, such as the fork message. Do not put
-  a form in a `Drawer` or a `DetailsPanel`. On small screens the dialog sits
-  near the top, so the on-screen keyboard does not cover its fields.
-- Use `useSheet` for each app `ui/dialog`, as for sheets. It shares the
-  document scroll lock. Only the front modal closes on Escape or a backdrop
-  tap. Mount the dialog only while it is open.
-- `ui/alert` sets `role="alert"`. Pass `role="status"` for a message that is
-  not an error.
-- `ui/toast` has no global notification manager. Features call
-  `useToastManager` inside the mounted `Toaster` provider.
-- Put a checkbox or radio inside its `<label>`. Give each `RadioGroup` an
-  `aria-label`.
-- Give an icon-only control its label with `TooltipContent size="compact"`.
-  Do not use the native `title` attribute. Tooltips open on mouse hover and
-  keyboard focus only, so a tap still runs the control.
-- When a `ui/button` tooltip trigger can be disabled, set
-  `focusableWhenDisabled`. A native disabled button can drop hover and focus,
-  so Firefox closes the tooltip and hides pending or result labels.
-  `ui/button` styles `data-disabled`, so both disabled modes look the same.
-- Build a form field from `ui/field`. Give `FieldError` the id
-  `<control id>-error` and `FieldDescription` the id `<control id>-help`. The
-  control sets `aria-invalid` and `aria-describedby`.
-- Use `Button size="menu"` for a full-width icon and label row in a mobile
-  overflow menu. A pressed row adds `bg-dashboard-fill-strong`.
-- For a link that looks like a button, put `buttonVariants()` on the router
-  `Link`. A form page has one `Button variant="primary"` for its main save
-  action.
-
-## Foundations
-
-Tokens live in the `@theme` block of `src/tailwind.css`. Keep every color in a
-token so each theme can redefine it.
-
-- **Themes.** Dark is the default. The light theme redefines every token under
-  `:root[data-theme="light"]`. It also mirrors the light status and chart
-  shades (50-400) to their dark pair, so `text-rose-300` stays readable on the
-  light canvas. The head script in `src/theme.ts` sets `data-theme` before first
-  paint from the saved choice or the system color scheme. `ThemeSwitcher` saves
-  the choice for this browser. Use the `light:` variant only for one-off values
-  that no token covers, such as provider brand colors.
-- **Charts.** Use `var(--color-*)` for series colors, not hex values, so they
-  follow the theme. Name series colors in the `ChartContainer` config and fill
-  each series with `var(--color-<key>)`.
-- **Surfaces.** Use the surface ladder, darkest to lightest: `bg`,
-  `bg-elevated` (drawers), `surface-panel` (sidebar, cards, bubbles),
-  `surface-raised` (buttons, tooltips), `control`, `surface-hover`,
-  `surface-active` (selected rows). Use `fill-*` for translucent fills and
-  `overlay-*` for scrims. Do not use `white/*` or `black/*` fills, borders, or
-  rings, or hex surface colors. Shadows may use black.
-- **Borders.** Use `border-subtle` for hairlines inside a surface,
-  `border` for card edges, `border-strong` for shell edges, and
-  `border-emphasis` or `border-interactive` for controls and hover.
-- **Text.** Brightest to dimmest: `text-solid`, `text`, `text-subtle`,
-  `text-muted`, `text-faint`.
-- **Accent.** Lavender is the one brand accent. Use `accent` for icons,
-  active markers, and tinted fills, such as `bg-dashboard-accent/10`. Use
-  `accent-text` for links and accent text. Keep Tailwind palette colors for
-  status (info, success, warning, error) and for categorical chart, event, and
-  subagent colors.
-- **Focus.** Use `outline-dashboard-focus` for keyboard focus. Do not use other
-  colors for focus rings.
-- **Type faces.** `font-sans` is the UI face for prose, controls, navigation,
-  labels, and names. `font-display` is for headings, record titles, and large
-  metric values. `font-mono` is for machine values: code, ids, paths, file
-  names, tool names, and raw payloads. Show counts, times, and prices in
-  `font-sans tabular-nums`.
-- **Type scale.** Use the named steps `text-2xs` through `text-4xl`. Keep
-  `text-2xs` for compact badges and chart annotations.
-- **Labels.** Section, card, field, and column labels use
-  `font-sans text-xs font-medium text-dashboard-text-muted` in sentence case.
-  Do not use uppercase or letter spacing for labels.
-- **Radius.** Controls and chips use `rounded-md`. Cards, list rows, and panels
-  use `rounded-lg`. The composer, menus, and transcript object cards use
-  `rounded-xl`. Avatars and count badges use `rounded-full`.
-
-Shared class strings live in `src/client/styles.ts`.
-
-## App components
-
-- **Status.** Use `StatusDot` for dense table or list markers. Use `StatusChip`
-  when the label must stay visible. `StatusChip` is not a control.
-- **Messages.** Use `Notice` for compact transient messages and `FormNotice`
-  for wrapping form recovery text.
-- **Disclosure.** Use `ui/collapsible` for one show-or-hide section. Put a
-  `ChevronRight` with `dashboardDisclosureChevronClass` in a `group` trigger.
-  Set `hiddenUntilFound` on the content when browser find must reach closed
-  text. Closed content then keeps its box, so put margins and padding on a
-  child. Use `ui/accordion` for a set of sections with headings.
-- **Details.** `DetailsPanel` docks an aside at 1280px and above, and uses a
-  `BottomSheet` below that width. It owns Escape and the scroll frame for
-  docked panels. Docked actions sit beside the close control, so their
-  position does not change with the title width.
-- **Drawer.** `Drawer` is a right-side `ui/drawer`. A `Drawer` opened from
-  inside another `Drawer` stacks in front of it. The parent scales back,
-  shows a thin edge behind the child, and hides its content. Set `flush` when
-  the content owns its insets and sticky headers, such as the event log.
-- **Identity.** `ObjectIcon` owns the native Ticket, Code change, Automation,
-  Deployment, and Item icons. Do not replace it with a provider logo or a
-  status-only icon.
-- **Loading.** Use `ui/skeleton` for placeholder leaves and `PageContentSkeleton`
-  variants for page bodies. Use `PageRouteLoading` when a page keeps its real
-  header above a body skeleton. Use a feature-owned loading component for
-  distinct geometry, such as conversations. Use `ui/spinner` for an inline
-  pending icon.
-
-## Navigation
-
-The dashboard has three navigation levels. Each has its own look, so the
-levels stay distinct.
-
-- **App navigation** in `layout/DashboardHeader` uses pills.
-- **Page links** use `SegmentedNav`, through `layout/SecondaryNavigation`. They
-  are underline tabs that sit on the header border.
-- **Panel switches** use `ui/tabs`. Give `TabsList` an `aria-label`. Set
-  `activateOnFocus` so arrow keys select the tab.
-
-Keep collection filters in `FilterTabList`. It uses `TabsList variant="line"`
-and adds the count badges.
-
-## Patterns
-
-- **Layout.** `layout/` holds the shell chrome, page headers, cards, and
-  section titles. `DashboardChrome` owns the sticky header block and its one
-  bottom border.
-- **Charts.** Put `role="img"` and the chart `aria-label` on the Recharts
-  chart, so the tooltip live region stays outside the image. Day and hour
-  charts compose the `charts/ActivityChart` axis, average line, and tooltip
-  helpers. They do not format UTC bucket keys inline.
-- **Conversation mobile geometry** is a hard ownership edge:
-  - `layout/VisualViewportShell` owns the fixed shell, visualViewport CSS
-    variables, and body lock.
-  - `conversations/ChatLayout` owns the scroll-above-dock frame for reply
-    threads.
-  - `conversations/ComposerDock` owns the reply bottom pad and dock chrome.
-
-  Pages pass children only. Home and create are one landing surface, not a
-  dock, and must not use `ComposerDock`. Do not add viewport height, offset, or
-  bottom safe-area math in page modules.
-
-Feature surfaces stay under `conversations/` or `pages/` until two real callers
-share them. See [Transcript components](../conversations/README.md) for
-transcript ownership.
-
-## Rules
-
-- Prefer a named component on the second real use.
-- Keep Tailwind classes on the owning component.
-- Check new or changed shared components on a real page with mock data and in
-  the dashboard E2E screenshots.
-- One-off page glue may stay inline when extraction only adds indirection.

package/src/client/components/charts/README.md

@@ -1,38 +0,0 @@
-# System cache reporting
-
-`InputCacheChart` owns the cache trend, summary, and largest writes.
-`SystemActivity` selects its time buckets with the page reporting control.
-`SystemMetricCharts` keeps spend and runtime beside the cache view.
-
-## Input counters
-
-`ConversationMetricDay` comes from stored Run metrics, not Sentry spans.
-Its ordinary input, cached input, and cache-creation counters are disjoint.
-Add these three counters once to get total input. Do not include output.
-Sentry span input totals use a different rule and must not use this transform.
-
-`cache-input.ts` owns this calculation. Period shares use summed token counts,
-not the mean of bucket shares. A missing counter is not a reported zero.
-If an active bucket lacks a counter, omit its share and the whole-period share.
-Token mode can still show reported counts. Gray marks identify incomplete
-buckets. Empty buckets do not lower shares.
-
-Field presence is not call-level coverage. SQL sums can combine complete and
-incomplete Runs in one bucket. Do not describe these values as a cache hit rate
-or a cache failure rate.
-
-## Investigation
-
-`CacheWrites` lists the three largest write counts in the page time window.
-The list and chart consume the same selected buckets. There is no local time
-selector or comparison window. The list is collapsed until needed.
-
-The chart fills the available width. It keeps a fixed, compact height rather
-than growing taller on wide screens.
-
-This report has no per-call model, release, environment, trace, or write-cost
-fields. Add a reporting contract before adding those filters or drilldowns.
-A large write alone cannot identify cache expiry, a cold start, or prefix loss.
-
-The System browser scenario covers display modes and verifies that the page
-time control also filters the list.