@sentry/junior-dashboard 0.271.0 → 0.272.0

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

@@ -5,7 +5,6 @@ import type { ReviewItemPayload } from "@sentry/junior/api/schema";
 import { InlineError } from "../components/InlineError";
 import { LoadMorePagination } from "../components/Pagination";
 import { useDetailsPanel } from "../components/DetailsPanel";
-import { Button } from "../components/ui/button";
 import { Skeleton } from "../components/ui/skeleton";
 import { useDocumentTitle } from "../documentTitle";
 import { pathWithSearch, useDebouncedSearchParam } from "../searchParams";
@@ -24,10 +23,7 @@ import { inboxGroups, nextInboxItem, reviewItemPath } from "./reviewItemFormat";
 const shellClass =
   "grid h-full min-h-0 w-full overflow-hidden bg-dashboard-bg md:grid-cols-[20rem_minmax(0,1fr)]";
 
-function InboxEmpty(props: {
-  className?: string;
-  onShowArchived?: () => void;
-}) {
+function InboxEmpty(props: { className?: string }) {
   return (
     <div
       className={cn(
@@ -38,11 +34,6 @@ function InboxEmpty(props: {
       <p className="m-0 font-display text-lg font-medium text-dashboard-text">
         Nothing needs you
       </p>
-      {props.onShowArchived ? (
-        <Button onClick={props.onShowArchived} variant="quiet">
-          See archived items
-        </Button>
-      ) : null}
     </div>
   );
 }
@@ -78,22 +69,29 @@ export function ReviewDeskPage() {
   useDocumentTitle("Inbox");
   const [searchParams] = useSearchParams();
   const [search, setSearch, q] = useDebouncedSearchParam();
-  const {
-    items: list,
-    moreArchived,
-    query: items,
-  } = useReviewItemsData({ includeArchived: true, q });
+  const { items: list, moreArchived, query: items } = useReviewItemsData({ q });
   const showBlocked = !q;
   const blocked = useBlockedAutomationsData(showBlocked);
   const blockedAutomations = showBlocked
     ? (blocked.data?.automations ?? [])
     : [];
   const groups = useMemo(() => inboxGroups(list), [list]);
+  // A search lists every match in one list. Later pages add open items, so
+  // keep open matches before archived ones.
+  const results = useMemo(
+    () =>
+      q
+        ? [
+            ...list.filter((item) => item.status === "open"),
+            ...list.filter((item) => item.status !== "open"),
+          ]
+        : undefined,
+    [list, q],
+  );
   const open = [...groups.needsYou, ...groups.fyi];
 
-  // Archived items stay out of the way until a search or the reader asks.
   const [collapsed, setCollapsed] = useState<ReadonlySet<InboxGroupKey>>(
-    () => new Set(["archived"]),
+    () => new Set(),
   );
   const toggle = (key: InboxGroupKey) =>
     setCollapsed((current) => {
@@ -102,16 +100,6 @@ export function ReviewDeskPage() {
       else next.add(key);
       return next;
     });
-  const shownCollapsed = useMemo(() => {
-    if (!q || !collapsed.has("archived")) return collapsed;
-    const next = new Set(collapsed);
-    next.delete("archived");
-    return next;
-  }, [collapsed, q]);
-  const showArchived =
-    groups.archived.length > 0 && shownCollapsed.has("archived")
-      ? () => toggle("archived")
-      : undefined;
 
   const itemParam = searchParams.get("item") ?? undefined;
   // Wide screens select the item that waited longest. Small screens show
@@ -125,12 +113,11 @@ export function ReviewDeskPage() {
 
   // Read source titles only for the rows on screen and the selected item.
   const sourceIds = useMemo(() => {
-    const shown = [
-      ...(shownCollapsed.has("needs-you") ? [] : groups.needsYou),
-      ...(shownCollapsed.has("fyi") ? [] : groups.fyi),
-      ...(shownCollapsed.has("archived") ? [] : groups.archived),
-      ...(selected ? [selected] : []),
+    const rows = results ?? [
+      ...(collapsed.has("needs-you") ? [] : groups.needsYou),
+      ...(collapsed.has("fyi") ? [] : groups.fyi),
     ];
+    const shown = selected ? [...rows, selected] : rows;
     return [
       ...new Set(
         shown
@@ -138,7 +125,7 @@ export function ReviewDeskPage() {
           .map((item) => item.addedByConversationId),
       ),
     ];
-  }, [groups, selected, shownCollapsed]);
+  }, [collapsed, groups, results, selected]);
   const sourceTitles = useLinkedConversationTitles(sourceIds);
   const sourceTitle = (item: ReviewItemPayload) =>
     sourceTitles[sourceIds.indexOf(item.addedByConversationId)];
@@ -162,9 +149,8 @@ export function ReviewDeskPage() {
         )}
       >
         <ReviewDeskSidebar
-          archived={groups.archived}
           blocked={blockedAutomations}
-          collapsed={shownCollapsed}
+          collapsed={collapsed}
           error={Boolean(items.error && !items.data)}
           footer={
             <>
@@ -179,9 +165,9 @@ export function ReviewDeskPage() {
                   Could not load more items. Try again.
                 </InlineError>
               ) : null}
-              {moreArchived && !shownCollapsed.has("archived") ? (
+              {moreArchived ? (
                 <p className="m-0 px-3 py-2 text-xs text-dashboard-text-muted">
-                  Search to find older archived items.
+                  Narrow the search to find older archived items.
                 </p>
               ) : null}
               {loaded && q && list.length === 0 ? (
@@ -189,12 +175,7 @@ export function ReviewDeskPage() {
                   No items match "{q}".
                 </p>
               ) : null}
-              {empty ? (
-                <InboxEmpty
-                  className="md:hidden"
-                  onShowArchived={showArchived}
-                />
-              ) : null}
+              {empty ? <InboxEmpty className="md:hidden" /> : null}
             </>
           }
           fyi={groups.fyi}
@@ -202,6 +183,7 @@ export function ReviewDeskPage() {
           needsYou={groups.needsYou}
           onSearchChange={setSearch}
           onToggle={toggle}
+          results={results}
           search={search}
           searchParams={listParams}
           selectedId={selected?.id}
@@ -250,7 +232,7 @@ export function ReviewDeskPage() {
         ) : direct.error ? (
           <InlineError className="p-7">Review item not found.</InlineError>
         ) : empty ? (
-          <InboxEmpty onShowArchived={showArchived} />
+          <InboxEmpty />
         ) : null}
       </section>
     </div>

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

@@ -12,10 +12,10 @@ import { ConversationSectionHeading } from "../conversations/ConversationSection
 import { automationPath, formatRelativeTime } from "../format";
 import { pathWithSearch } from "../searchParams";
 import { cn } from "../styles";
-import { reviewItemPath } from "./reviewItemFormat";
+import { reviewItemPath, reviewItemStatusLabel } from "./reviewItemFormat";
 
 /** A sidebar group key. The page owns which groups are collapsed. */
-export type InboxGroupKey = "archived" | "blocked" | "fyi" | "needs-you";
+export type InboxGroupKey = "blocked" | "fyi" | "needs-you";
 
 type Dot = "accent" | "muted" | "warning" | "closed";
 
@@ -120,11 +120,11 @@ function InboxRowsLoading() {
 }
 
 /**
- * List the inbox: open items that need the viewer, notices, blocked
- * Automations, and archived items, each in a group that collapses.
+ * List the inbox: open items that need the viewer, notices, and blocked
+ * Automations, each in a group that collapses. A search shows one list of
+ * open and archived matches instead.
  */
 export function ReviewDeskSidebar(props: {
-  archived: ReviewItemPayload[];
   blocked: AutomationSummary[];
   collapsed: ReadonlySet<InboxGroupKey>;
   /** Shown under the groups, such as an empty state or load more. */
@@ -135,6 +135,8 @@ export function ReviewDeskSidebar(props: {
   needsYou: ReviewItemPayload[];
   onSearchChange(value: string): void;
   onToggle(key: InboxGroupKey): void;
+  /** Search matches in API order. Set while a search is active. */
+  results?: ReviewItemPayload[];
   search: string;
   searchParams: URLSearchParams;
   selectedId?: string;
@@ -153,16 +155,19 @@ export function ReviewDeskSidebar(props: {
   ];
   const firstKey = (index: number) =>
     shown.slice(0, index).every((count) => count === 0);
-  const itemRow = (item: ReviewItemPayload, dot: Dot) => {
+  const itemRow = (item: ReviewItemPayload) => {
+    const open = item.status === "open";
     const source = item.automationId ? "Automation" : props.sourceTitle(item);
-    const age = formatRelativeTime(
-      item.status === "open" ? item.createdAt : item.closedAt,
-    );
+    const meta = [
+      open ? undefined : reviewItemStatusLabel(item),
+      source,
+      formatRelativeTime(open ? item.createdAt : item.closedAt),
+    ];
     return (
       <InboxRow
-        dot={dot}
+        dot={open ? (item.kind === "action" ? "accent" : "muted") : "closed"}
         key={item.id}
-        meta={source ? `${source} · ${age}` : age}
+        meta={meta.filter(Boolean).join(" · ")}
         selected={
           item.id !== props.selectedId
             ? undefined
@@ -202,6 +207,18 @@ export function ReviewDeskSidebar(props: {
           </InlineError>
         ) : props.loading ? (
           <InboxRowsLoading />
+        ) : props.results ? (
+          <>
+            {props.results.length > 0 ? (
+              <ul
+                aria-label="Search results"
+                className="m-0 grid list-none gap-0.5 p-0 pt-1"
+              >
+                {props.results.map(itemRow)}
+              </ul>
+            ) : null}
+            {props.footer}
+          </>
         ) : (
           <>
             {groups.map((group, index) => (
@@ -213,9 +230,7 @@ export function ReviewDeskSidebar(props: {
                 label={group.label}
                 onToggle={() => props.onToggle(group.key)}
               >
-                {group.items.map((item) =>
-                  itemRow(item, item.kind === "action" ? "accent" : "muted"),
-                )}
+                {group.items.map(itemRow)}
               </InboxGroup>
             ))}
             <InboxGroup
@@ -235,15 +250,6 @@ export function ReviewDeskSidebar(props: {
                 />
               ))}
             </InboxGroup>
-            <InboxGroup
-              collapsed={props.collapsed.has("archived")}
-              count={props.archived.length}
-              first={firstKey(3)}
-              label="Archived"
-              onToggle={() => props.onToggle("archived")}
-            >
-              {props.archived.map((item) => itemRow(item, "closed"))}
-            </InboxGroup>
             {props.footer}
           </>
         )}

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

@@ -102,7 +102,7 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
     }
   }
 
-  // Take and Dismiss are quiet, so the answer or Done stays the main action.
+  // Take and Dismiss are quiet, so the answer stays the main action.
   const secondaryActions = (
     <>
       {item.canTake ? (
@@ -149,15 +149,6 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
         </div>
       ) : (
         <div className="flex flex-wrap items-center gap-2">
-          {item.kind === "notice" ? (
-            <Button
-              disabled={action.isPending}
-              onClick={() => void run({ action: "complete" }).catch(() => {})}
-              variant="primary"
-            >
-              Done
-            </Button>
-          ) : null}
           <div className="flex flex-wrap gap-1 sm:ml-auto">
             {secondaryActions}
           </div>

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

@@ -25,19 +25,17 @@ const COUNT_REFRESH_MS = 60_000;
 
 /**
  * List the open Review items that the viewer can see, one page at a time.
- * A search or `includeArchived` also finds archived items, with the first
- * page. `items` holds the items of every loaded page, and `query` loads more.
+ * 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;
-  includeArchived?: boolean;
   q?: string;
 }) {
   const params = new URLSearchParams();
   if (filters.conversationId) {
     params.set("conversationId", filters.conversationId);
   }
-  if (filters.includeArchived) params.set("include", "archived");
   if (filters.q) params.set("q", filters.q);
   const search = params.toString();
   const query = useInfiniteQuery({
@@ -137,7 +135,7 @@ export function useBlockedAutomationsData(enabled: boolean) {
   });
 }
 
-/** Take, submit, complete, or dismiss one Review item. */
+/** Take, submit, or dismiss one Review item. */
 export function useReviewItemAction() {
   const queryClient = useQueryClient();
   return useMutation({

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

@@ -101,9 +101,8 @@ export function reviewItemWaitsForAnswer(item: ReviewItemPayload): boolean {
   );
 }
 
-/** The Review items of the inbox, in the groups and order the list shows. */
+/** The open Review items of the inbox, in the groups and order it shows. */
 export type InboxGroups = {
-  archived: ReviewItemPayload[];
   fyi: ReviewItemPayload[];
   needsYou: ReviewItemPayload[];
 };
@@ -117,13 +116,12 @@ function inboxOrder(a: ReviewItemPayload, b: ReviewItemPayload): number {
 }
 
 /**
- * Split items into inbox groups. Open items show oldest first, so the item
- * that waited longest is at the top. Archived items keep the API order.
+ * Split open items into inbox groups, oldest first, so the item that waited
+ * longest is at the top. Archived items are in no group.
  */
 export function inboxGroups(items: readonly ReviewItemPayload[]): InboxGroups {
   const open = items.filter((item) => item.status === "open");
   return {
-    archived: items.filter((item) => item.status !== "open"),
     fyi: open.filter((item) => item.kind === "notice").sort(inboxOrder),
     needsYou: open.filter((item) => item.kind === "action").sort(inboxOrder),
   };

package/src/mock-reporting/read-positions.ts

@@ -0,0 +1,39 @@
+import type {
+  ConversationDetailReport,
+  ConversationReadPosition,
+} from "@sentry/junior/api/schema";
+import { readMockConversationDetail } from "./fixtures";
+
+/** Process-local read positions so mock QA can reopen at unread rows. */
+const mockReadPositions = new Map<string, number>();
+
+/** Clear mock read positions so tests sharing a worker do not leak state. */
+export function resetMockReadPositions(): void {
+  mockReadPositions.clear();
+}
+
+/** Move a mock read position forward, like the API. */
+export function markMockConversationRead(
+  conversationId: string,
+  lastReadSeq: number,
+): ConversationReadPosition | undefined {
+  const detail = readMockConversationDetail(conversationId);
+  if (!detail) return undefined;
+  const lastSeq = detail.events.at(-1)?.seq ?? 0;
+  const stored = Math.max(
+    mockReadPositions.get(conversationId) ?? -1,
+    Math.min(lastReadSeq, lastSeq),
+  );
+  mockReadPositions.set(conversationId, stored);
+  return { lastReadSeq: stored };
+}
+
+/** Add the mock read position to a detail report. */
+export function withMockReadPosition(
+  report: ConversationDetailReport,
+): ConversationDetailReport {
+  const lastReadSeq = mockReadPositions.get(report.conversationId);
+  return lastReadSeq === undefined
+    ? report
+    : { ...report, readPosition: { lastReadSeq } };
+}

package/src/mock-reporting/routes.ts

@@ -15,6 +15,7 @@ import {
   conversationFeedQuerySchema,
   conversationFeedSchema,
   conversationParamsSchema,
+  conversationReadPositionSchema,
   conversationPendingMessagesReportSchema,
   conversationStatsReportSchema,
   conversationWatchesReportSchema,
@@ -38,6 +39,10 @@ import {
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import { mockChartPng } from "./chart-png";
+import {
+  markMockConversationRead,
+  withMockReadPosition,
+} from "./read-positions";
 import {
   filterMockConversationsByRepository,
   readMockCodeRepository,
@@ -244,7 +249,27 @@ export function createMockReportingApi(): Hono<{
     const { conversationId } = params.data;
     const report = readMockConversationDetail(conversationId, query.data.limit);
     return report
-      ? jsonResponse(conversationDetailReportSchema, report)
+      ? jsonResponse(
+          conversationDetailReportSchema,
+          withMockReadPosition(report),
+        )
+      : errorResponse("Conversation not found.", 404);
+  });
+  app.put("/conversations/:conversationId/read-position", async (c) => {
+    const params = conversationParamsSchema.safeParse(c.req.param());
+    if (!params.success) {
+      return errorResponse("Invalid route parameters.", 400);
+    }
+    const body = conversationReadPositionSchema.safeParse(await c.req.json());
+    if (!body.success) {
+      return errorResponse("Invalid request body.", 400);
+    }
+    const result = markMockConversationRead(
+      params.data.conversationId,
+      body.data.lastReadSeq,
+    );
+    return result
+      ? jsonResponse(conversationReadPositionSchema, result)
       : errorResponse("Conversation not found.", 404);
   });
   app.patch("/conversations/:conversationId/archive", async (c) => {

package/src/tailwind.css

@@ -4,7 +4,7 @@
 @import "shadcn/tailwind.css";
 
 /*
- * Dashboard design tokens. components/AGENTS.md has the token rules.
+ * Dashboard design tokens. `pnpm dashboard-style:check` enforces their use.
  * 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/AGENTS.md

@@ -1,36 +0,0 @@
-# Dashboard UI rules
-
-These apply to all dashboard UI. `pnpm dashboard-style:check` enforces the
-token rules.
-
-- Add shadcn components with
-  `pnpm --filter @sentry/junior-dashboard exec shadcn add <component>`.
-- Change a `ui/` file only when every caller needs the same style. Do not
-  wrap a `ui/` component just to rename it or its props.
-- Do not apply the shadcn CLI's global border or body resets. Keep the
-  Tailwind radius scale.
-- Confirmations use `ui/alert-dialog`, not `window.confirm`.
-- Short task forms use `ui/dialog`, never a `Drawer` or `DetailsPanel`. Mount
-  each dialog through `useSheet`, only while open.
-- Put only inline elements in a `ui/trace` row button.
-- Label icon-only controls with `TooltipContent size="compact"`, not the
-  native `title` attribute.
-- Set `focusableWhenDisabled` on a tooltip trigger `ui/button` that can be
-  disabled.
-- Field ids are `<control id>-error` and `<control id>-help`.
-- Put a checkbox or radio inside its `<label>`. Give each `RadioGroup` an
-  `aria-label`.
-- A form page has one `Button variant="primary"`.
-- Do not replace `ObjectIcon` with a provider logo.
-- Use `light:` only for values that no token covers. Chart series use
-  `var(--color-*)`, not hex.
-- Use `outline-dashboard-focus` for keyboard focus only.
-- Labels use sentence case, with no uppercase or letter spacing.
-- App navigation uses pills, page links use `SegmentedNav`, and panel
-  switches use `ui/tabs`.
-- Do not add viewport, offset, or safe-area math in pages.
-  `layout/VisualViewportShell`, `conversations/ChatLayout`, and
-  `conversations/ComposerDock` own it. Home and create do not use
-  `ComposerDock`.
-- Keep a feature component under `conversations/` or `pages/` until a second
-  real caller needs it.

package/src/client/conversations/AGENTS.md

@@ -1,17 +0,0 @@
-# Transcript components
-
-- Keep horizontal padding inside each transcript row, so focus outlines are
-  not clipped. Do not add negative margins at `TranscriptSummaryTrigger` call
-  sites.
-- The Automation trigger card shows the credentials from the run's dispatch
-  record, not the current setting. Keep the run input collapsed, because it
-  is not from a person.
-- A nested `Transcript` never uses the panel of the page behind it.
-- The page shows one right panel at a time. Closing a panel returns focus to
-  the control that opened it.
-- The URL owns the selected event in the main Conversation. Standalone
-  transcripts keep it in `ConversationEventLog`.
-- A pending exit must not close a new panel or another Conversation. A
-  pending fork blocks dismissal of its dialog.
-- Raw JSON keeps the original ISO values. Persist the UTC/local mode, not the
-  timezone.

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

@@ -1,15 +0,0 @@
-# Automation pages
-
-- Core owns validation, edit access, creator-only rules, revision checks,
-  Schedule previews, and the Event catalog. Show core errors. Do not repeat
-  these rules in the page.
-- Preview requests never save or run work.
-- Send only changed fields. Keep unsupported triggers and stored Destinations
-  unless the user replaces them. Keep outcome order.
-- Warn that an instruction or event selector change switches to system
-  credentials.
-- Query refreshes must not replace an unsaved draft. After a stale save, let
-  the user keep their changes or load the latest version.
-- Lifecycle actions and "Make active" read the latest revision first.
-- `AutomationRecentRuns` shows terminal runs only. Do not infer queued or
-  running work from terminal records.