@sentry/junior-dashboard 0.268.0 → 0.270.0

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

@@ -0,0 +1,148 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from "../components/ui/alert-dialog";
+
+type UnsentAnswers = {
+  conversationId: string;
+  /** Item title for each mounted answer form that has unsent answers. */
+  titles: Map<string, string>;
+};
+
+const UnsentAnswersContext = createContext<UnsentAnswers | undefined>(
+  undefined,
+);
+
+/**
+ * Track the answer forms in one Conversation that have unsent answers. A
+ * message in the Conversation closes some open action items, and the
+ * answers on those forms are then lost. The reply footer reads this to ask
+ * first.
+ */
+export function UnsentAnswersProvider(props: {
+  children: ReactNode;
+  conversationId: string;
+}) {
+  const value = useMemo(
+    () => ({ conversationId: props.conversationId, titles: new Map() }),
+    [props.conversationId],
+  );
+  return (
+    <UnsentAnswersContext.Provider value={value}>
+      {props.children}
+    </UnsentAnswersContext.Provider>
+  );
+}
+
+/**
+ * Report that the answer form of an item has unsent answers. It counts only
+ * when a message from the viewer closes the item. This follows
+ * `closeReviewItemsAnsweredByReply`: an open action item that the agent
+ * added in this Conversation, not assigned to Everyone, that the viewer can
+ * act on. Outside a Conversation it does nothing.
+ */
+export function useReportUnsentAnswer(
+  item: ReviewItemPayload,
+  unsent: boolean,
+) {
+  const context = useContext(UnsentAnswersContext);
+  const key = useId();
+  const closesOnReply =
+    item.kind === "action" &&
+    item.status === "open" &&
+    item.canAct &&
+    !item.assignedToEveryone &&
+    item.addedByConversationId === context?.conversationId;
+  const title = item.title;
+  useEffect(() => {
+    if (!context || !closesOnReply || !unsent) return;
+    context.titles.set(key, title);
+    return () => {
+      context.titles.delete(key);
+    };
+  }, [closesOnReply, context, key, title, unsent]);
+}
+
+/**
+ * Ask the reader before a message drops unsent answers. `confirmSubmit`
+ * returns undefined when nothing would be lost, so the send goes at once.
+ * Otherwise it opens `dialog` and resolves true when the reader sends anyway.
+ */
+export function useConfirmUnsentAnswers() {
+  const context = useContext(UnsentAnswersContext);
+  const [open, setOpen] = useState(false);
+  // Keep the titles through the close animation.
+  const [titles, setTitles] = useState<string[]>([]);
+  const resolveRef = useRef<(send: boolean) => void>(undefined);
+
+  const confirmSubmit = useCallback(() => {
+    // The transcript card and the side panel can show the same item.
+    const unsent = [...new Set(context?.titles.values())];
+    if (unsent.length === 0) return undefined;
+    setTitles(unsent);
+    setOpen(true);
+    return new Promise<boolean>((resolve) => {
+      resolveRef.current = resolve;
+    });
+  }, [context]);
+
+  // Resolve on close, so a dismissal by Escape also keeps the draft.
+  const close = (send: boolean) => {
+    resolveRef.current?.(send);
+    resolveRef.current = undefined;
+    setOpen(false);
+  };
+
+  const dialog = (
+    <AlertDialog
+      onOpenChange={(open) => {
+        if (!open) close(false);
+      }}
+      open={open}
+    >
+      <AlertDialogContent>
+        <AlertDialogTitle>Send without your answers?</AlertDialogTitle>
+        <AlertDialogDescription>
+          {titles.length === 1 ? (
+            <>
+              Your answers to{" "}
+              <strong className="font-medium text-dashboard-text">
+                {titles[0]}
+              </strong>{" "}
+              are not sent. This message closes that review item, and the
+              answers are lost.
+            </>
+          ) : (
+            `Your answers to ${titles.length} review items are not sent. This message closes those items, and the answers are lost.`
+          )}
+        </AlertDialogDescription>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Go back</AlertDialogCancel>
+          <AlertDialogAction onClick={() => close(true)} variant="danger">
+            Send message
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
+  return { confirmSubmit, dialog };
+}

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/client/review-desk/reviewItemFormat.ts

@@ -1,5 +1,8 @@
 import { z } from "zod";
-import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+import type {
+  ConversationReportEvent,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
 
 /** Return the review desk route that selects one item. */
 export function reviewItemPath(id: string): string {
@@ -59,3 +62,28 @@ export function reviewItemIdFromToolCall(call: {
   if (toolName !== ADD_REVIEW_ITEM_TOOL_NAME) return undefined;
   return addedItemId(call.output);
 }
+
+/** Return the id of the last Review item that a tool call in the events added. */
+export function latestReviewItemId(
+  events: readonly ConversationReportEvent[] | undefined,
+): string | undefined {
+  for (let index = (events?.length ?? 0) - 1; index >= 0; index -= 1) {
+    const data = events![index]!.data;
+    if (data.type !== "tool_calls") continue;
+    for (let call = data.calls.length - 1; call >= 0; call -= 1) {
+      const id = reviewItemIdFromToolCall(data.calls[call]!);
+      if (id) return id;
+    }
+  }
+  return undefined;
+}
+
+/** True when an open item asks a question that the viewer can answer. */
+export function reviewItemWaitsForAnswer(item: ReviewItemPayload): boolean {
+  return (
+    item.status === "open" &&
+    item.kind === "action" &&
+    Boolean(item.request) &&
+    item.canAct
+  );
+}

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

package/src/client/components/README.md

@@ -1,219 +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.
-- Use `Button variant="quiet"` for a secondary action beside the primary one,
-  such as Dismiss. It has no border, so the primary action stays dominant.
-- In a form, show each choice as a whole bordered row around `RadioGroupItem`
-  or `Checkbox`. The row shows hover and selected state. See `UserInputForm`.
-
-## 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.