@sentry/junior-dashboard 0.267.0 → 0.269.0

package/src/client/components/UserInputForm.tsx

@@ -0,0 +1,283 @@
+import { useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import {
+  buttonUserInputField,
+  isEmptyUserInputAnswer,
+  normalizeUserInputAnswer,
+  type UserInputAnswer,
+  type UserInputField,
+  type UserInputRequest,
+} from "@sentry/junior/api/schema";
+
+import { cn } from "../styles";
+import { Button } from "./ui/button";
+import { Checkbox } from "./ui/checkbox";
+import { Field, FieldDescription, FieldLabel } from "./ui/field";
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
+import { Textarea } from "./ui/textarea";
+
+// Each choice is a whole selectable row, so the hit area and the selected
+// state read at a glance. The control inside keeps its own focus ring.
+const optionClass =
+  "flex cursor-pointer items-start gap-3 rounded-md border border-dashboard-border bg-dashboard-surface-panel px-3 py-2.5 text-sm transition-colors hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover has-[[data-checked]]:border-dashboard-accent/60 has-[[data-checked]]:bg-dashboard-accent/10 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-60";
+
+function OptionText(props: { description?: string; label: string }) {
+  return (
+    <span className="grid min-w-0 gap-0.5 break-words">
+      <span className="font-medium text-dashboard-text">{props.label}</span>
+      {props.description ? (
+        <span className="text-xs text-dashboard-text-muted">
+          {props.description}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function ChoiceField(props: {
+  disabled: boolean;
+  field: Extract<UserInputField, { kind: "choice" | "multi_choice" }>;
+  onChange(values: string[]): void;
+  values: string[];
+}) {
+  const id = useId();
+  const { field } = props;
+  const legend = (
+    <legend className="mb-2 p-0 text-sm font-semibold text-dashboard-text">
+      {field.label}
+    </legend>
+  );
+  const description = field.description ? (
+    <FieldDescription className="-mt-1 mb-2" id={`${id}-help`}>
+      {field.description}
+    </FieldDescription>
+  ) : null;
+  const describedBy = field.description ? `${id}-help` : undefined;
+  if (field.kind === "choice") {
+    return (
+      <fieldset className="m-0 min-w-0 border-0 p-0">
+        {legend}
+        {description}
+        <RadioGroup
+          aria-describedby={describedBy}
+          aria-label={field.label}
+          className="grid gap-2"
+          disabled={props.disabled}
+          onValueChange={(value) => props.onChange([String(value)])}
+          value={props.values[0] ?? null}
+        >
+          {field.options.map((option) => (
+            <label className={optionClass} key={option.label}>
+              <RadioGroupItem className="mt-0.5" value={option.label} />
+              <OptionText
+                description={option.description}
+                label={option.label}
+              />
+            </label>
+          ))}
+        </RadioGroup>
+      </fieldset>
+    );
+  }
+  return (
+    <fieldset
+      aria-describedby={describedBy}
+      className="m-0 min-w-0 border-0 p-0"
+    >
+      {legend}
+      {description}
+      <div className="grid gap-2">
+        {field.options.map((option) => (
+          <label className={optionClass} key={option.label}>
+            <Checkbox
+              checked={props.values.includes(option.label)}
+              className="mt-0.5"
+              disabled={props.disabled}
+              onCheckedChange={(checked) =>
+                props.onChange(
+                  checked
+                    ? [...props.values, option.label]
+                    : props.values.filter((value) => value !== option.label),
+                )
+              }
+            />
+            <OptionText description={option.description} label={option.label} />
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+function TextField(props: {
+  className?: string;
+  description?: string;
+  disabled: boolean;
+  label: string;
+  onChange(value: string): void;
+  value: string;
+}) {
+  const id = useId();
+  return (
+    <Field>
+      <FieldLabel htmlFor={id}>{props.label}</FieldLabel>
+      {props.description ? (
+        <FieldDescription className="-mt-1" id={`${id}-help`}>
+          {props.description}
+        </FieldDescription>
+      ) : null}
+      <Textarea
+        aria-describedby={props.description ? `${id}-help` : undefined}
+        className={cn("min-h-20 leading-relaxed", props.className)}
+        disabled={props.disabled}
+        id={id}
+        onChange={(event) => props.onChange(event.target.value)}
+        value={props.value}
+      />
+    </Field>
+  );
+}
+
+/**
+ * Render the answer controls of an action item request. A request with
+ * one short choice field shows one button per choice, and a click is the
+ * answer. Other requests show a form that the reader submits once. A failed
+ * `onSubmit` lets the reader try again. `secondaryActions`, such as Dismiss,
+ * sit in the same action row, after the answer controls.
+ */
+export function UserInputForm(props: {
+  onSubmit(answer: UserInputAnswer): Promise<void>;
+  request: UserInputRequest;
+  requestId: string;
+  secondaryActions?: ReactNode;
+}) {
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [values, setValues] = useState<Record<string, string[]>>({});
+  const [other, setOther] = useState("");
+  const buttonField = buttonUserInputField(props.request);
+
+  // A ref blocks a second click before React renders the disabled controls.
+  // The lock stays after a sent answer; only a failed send can retry.
+  const sendLock = useRef(false);
+
+  async function send(answer: UserInputAnswer) {
+    if (sendLock.current) return;
+    sendLock.current = true;
+    setSending(true);
+    setFailed(false);
+    try {
+      await props.onSubmit(answer);
+    } catch {
+      sendLock.current = false;
+      setSending(false);
+      setFailed(true);
+    }
+  }
+
+  const answer: UserInputAnswer = {
+    other,
+    requestId: props.requestId,
+    values,
+  };
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    if (
+      !isEmptyUserInputAnswer(normalizeUserInputAnswer(props.request, answer))
+    ) {
+      void send(answer);
+    }
+  }
+
+  const secondary = props.secondaryActions ? (
+    <div className="flex flex-wrap gap-1 sm:ml-auto">
+      {props.secondaryActions}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {buttonField ? (
+        <>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            {buttonField.options.map((option) => (
+              <Button
+                disabled={sending}
+                key={option.label}
+                onClick={() =>
+                  void send({
+                    requestId: props.requestId,
+                    values: { [buttonField.id]: [option.label] },
+                  })
+                }
+                title={option.description}
+              >
+                {option.label}
+              </Button>
+            ))}
+            {secondary}
+          </div>
+          {buttonField.options.some((option) => option.description) ? (
+            <ul className="mb-0 mt-2 list-none p-0 text-xs text-dashboard-text-muted">
+              {buttonField.options
+                .filter((option) => option.description)
+                .map((option) => (
+                  <li key={option.label}>
+                    <span className="font-medium text-dashboard-text">
+                      {option.label}
+                    </span>
+                    : {option.description}
+                  </li>
+                ))}
+            </ul>
+          ) : null}
+        </>
+      ) : (
+        <form className="mt-4 grid gap-5" onSubmit={submit}>
+          {props.request.fields.map((field) =>
+            field.kind === "text" ? (
+              <TextField
+                description={field.description}
+                disabled={sending}
+                key={field.id}
+                label={field.label}
+                onChange={(value) =>
+                  setValues((current) => ({ ...current, [field.id]: [value] }))
+                }
+                value={values[field.id]?.[0] ?? ""}
+              />
+            ) : (
+              <ChoiceField
+                disabled={sending}
+                field={field}
+                key={field.id}
+                onChange={(picked) =>
+                  setValues((current) => ({ ...current, [field.id]: picked }))
+                }
+                values={values[field.id] ?? []}
+              />
+            ),
+          )}
+          <TextField
+            className="min-h-16"
+            description="Optional. Anything else, or an answer that is not listed."
+            disabled={sending}
+            label="Other"
+            onChange={setOther}
+            value={other}
+          />
+          <div className="flex flex-wrap items-center gap-2">
+            <Button disabled={sending} type="submit" variant="primary">
+              Send
+            </Button>
+            {secondary}
+          </div>
+        </form>
+      )}
+      {failed ? (
+        <p className="mb-0 mt-2 text-xs text-rose-300" role="alert">
+          Could not send your answer. Try again.
+        </p>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+# System cache reporting
+
+- `cache-input.ts` owns the cache input calculation.
+- `ConversationMetricDay` comes from stored Run metrics, not Sentry spans.
+  Its input, cached input, and cache-creation counters are disjoint. Add
+  them once for total input. Do not include output. Never use this transform
+  for Sentry span totals.
+- Period shares use summed token counts, not the mean of bucket shares.
+- A missing counter is not a zero. When an active bucket has no counter, omit
+  its share and the whole-period share.
+- Do not call these values a cache hit rate or a cache failure rate. Field
+  presence is not call-level coverage.
+- The page time control selects the buckets for the chart and `CacheWrites`.
+  Do not add a local time selector.
+- Add a reporting contract before you add per-call filters or drilldowns.

package/src/client/components/layout/DashboardHeader.tsx

@@ -15,11 +15,22 @@ import {
 import { cn, dashboardInteractiveTextClass } from "../../styles";
 
 export type DashboardHeaderNavItem = {
+  /** Shown beside the label when it is above zero. */
+  count?: number;
   key: string;
   label: string;
   to: string;
 };
 
+function NavCount(props: { count?: number }) {
+  if (!props.count) return null;
+  return (
+    <span className="ml-1.5 rounded-full bg-violet-300/20 px-1.5 py-0.5 text-xs text-violet-200">
+      {props.count.toLocaleString("en-US")}
+    </span>
+  );
+}
+
 /** Render the primary dashboard shell header and optional mobile nav sheet. */
 export function DashboardHeader(props: {
   /** Back target used on mobile conversation detail. */
@@ -151,6 +162,7 @@ export function DashboardHeader(props: {
           {props.navItems.map((item) => (
             <NavLink className={navLinkClass} key={item.key} to={item.to}>
               {item.label}
+              <NavCount count={item.count} />
             </NavLink>
           ))}
         </nav>
@@ -204,6 +216,7 @@ export function DashboardHeader(props: {
                     to={item.to}
                   >
                     {item.label}
+                    <NavCount count={item.count} />
                   </NavLink>
                 ))}
               </nav>

package/src/client/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from "@dashboard/lib/utils";
 const commandButtonClass =
   "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium leading-none focus-visible:outline-2 focus-visible:outline-offset-2";
 
-/** Style the dashboard command, primary, danger, icon, and menu row button surfaces. Links use it with `className`. */
+/** Style the dashboard command, primary, quiet, danger, icon, and menu row button surfaces. Links use it with `className`. */
 const buttonVariants = cva(
   "cursor-pointer font-sans no-underline transition-colors data-disabled:cursor-not-allowed data-disabled:opacity-50",
   {
@@ -13,6 +13,8 @@ const buttonVariants = cva(
       variant: {
         default: "",
         primary: "",
+        /** A secondary action beside a primary one, such as Dismiss. */
+        quiet: "",
         danger: "",
       },
       size: {
@@ -38,6 +40,14 @@ const buttonVariants = cva(
           "border-dashboard-text-solid bg-dashboard-text-solid text-dashboard-text-inverse hover:border-dashboard-text-subtle hover:bg-dashboard-text-subtle focus-visible:outline-dashboard-focus data-disabled:hover:border-dashboard-text-solid data-disabled:hover:bg-dashboard-text-solid",
         ),
       },
+      {
+        size: "default",
+        variant: "quiet",
+        className: cn(
+          commandButtonClass,
+          "border-transparent bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-dashboard-focus data-disabled:hover:bg-transparent data-disabled:hover:text-dashboard-text-muted",
+        ),
+      },
       {
         size: "default",
         variant: "danger",

package/src/client/conversations/AGENTS.md

@@ -0,0 +1,42 @@
+# Transcript components
+
+Keep transcript layout in these feature components. Use the UI kit in
+`../components/` for shared controls and overlays.
+
+## Ownership
+
+- `TranscriptRows` and `TranscriptRow` own row gaps, padding, and indent.
+  Keep horizontal padding inside each row, so focus outlines are not clipped.
+- `TranscriptMessageShell` owns the avatar column and message gutter.
+- `TranscriptSummaryTrigger` owns disclosure padding and focus. Do not repeat
+  negative margins at call sites.
+- `ChatLayout` keeps the Conversation header outside the transcript scroll.
+- `eventLogRows` and `filterEventLogRows` own row text and search match. The
+  page step controls use them too.
+
+## Rules
+
+- Display text keeps Slack tokens such as `<@U123>`. The API returns
+  `mentions` beside the owning object. Render with `TranscriptText` or
+  `MentionText`. Do not resolve names in the dashboard, and do not rewrite
+  tokens into links on the server.
+- The Automation trigger card shows the credentials from the dispatch record
+  of the run, not the current setting. Keep the run input collapsed, because
+  it is not from a person.
+- Each `Transcript` sets the panel for its own rows. A nested transcript never
+  uses the panel of the page behind it.
+- The page has one right panel. Conversation details, event details, and turn
+  context never show at the same 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 selection 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.
+
+## Checks
+
+- Review with `JUNIOR_DASHBOARD_MOCK_CONVERSATIONS=true pnpm dev`.
+- Keep visual checks out of automated assertions. Browser tests cover
+  opening, closing, and keyboard interaction.

package/src/client/conversations/ConversationHomeList.tsx

@@ -35,6 +35,7 @@ export function ConversationHomeList(props: {
   finishedConversationIds: ReadonlySet<string>;
   loading?: boolean;
   timeZone: string;
+  waitingConversationIds: ReadonlySet<string>;
 }) {
   const [archivedConversation, setArchivedConversation] =
     useState<Conversation>();
@@ -94,6 +95,7 @@ export function ConversationHomeList(props: {
             key={section.key}
             onArchiveError={handleArchiveError}
             onArchived={handleArchived}
+            waitingConversationIds={props.waitingConversationIds}
             section={section}
           />
         ))}
@@ -169,6 +171,7 @@ function ConversationCardSection(props: {
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   section: ConversationSection;
+  waitingConversationIds: ReadonlySet<string>;
 }) {
   return (
     <section aria-labelledby={`conversation-section-${props.section.key}`}>
@@ -188,6 +191,7 @@ function ConversationCardSection(props: {
             key={conversation.id}
             onArchiveError={props.onArchiveError}
             onArchived={props.onArchived}
+            waitingOnViewer={props.waitingConversationIds.has(conversation.id)}
           />
         ))}
       </div>
@@ -200,6 +204,7 @@ function ConversationCard(props: {
   finishedSinceSeen: boolean;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  waitingOnViewer: boolean;
 }) {
   const conversation = props.conversation;
   const archive = useArchiveConversation(conversation.id, {
@@ -231,6 +236,7 @@ function ConversationCard(props: {
               finishedSinceSeen={props.finishedSinceSeen}
               isPrivate={isPrivate}
               status={status}
+              waitingOnViewer={props.waitingOnViewer}
             />
           </span>
           <h4 className="m-0 truncate font-display text-base font-medium leading-snug text-dashboard-text">

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -4,12 +4,26 @@ import { ActiveIndicator } from "../components/ActiveIndicator";
 import { cn } from "../styles";
 import type { VisualStatus } from "../types";
 
-/** Render a conversation status marker, with new completions taking priority. */
+/**
+ * Render a conversation status marker. "Waiting on you" replaces every other
+ * marker, then new completions take priority.
+ */
 export function ConversationListStatusIcon(props: {
   finishedSinceSeen: boolean;
   isPrivate: boolean;
   status: VisualStatus;
+  waitingOnViewer: boolean;
 }) {
+  if (props.waitingOnViewer) {
+    return (
+      <span
+        aria-label="Waiting on you"
+        className="size-2 shrink-0 rounded-full bg-violet-300 shadow-[0_0_6px_rgba(196,181,253,0.7)]"
+        role="img"
+      />
+    );
+  }
+
   if (props.finishedSinceSeen) {
     return (
       <span

package/src/client/conversations/ConversationPage.tsx

@@ -73,11 +73,6 @@ import {
   hasConversationUsageBreakdown,
 } from "./ConversationUsageBreakdown";
 import { PendingMailboxStack } from "./PendingMailboxStack";
-import { UserInputRequestCard } from "./UserInputRequestCard";
-import {
-  openUserInputRequest,
-  type OpenUserInputRequest,
-} from "./userInputRequest";
 import {
   buildConversations,
   conversationDetailTitle,
@@ -93,6 +88,7 @@ import {
 } from "../components/ParticipantAvatarStack";
 import { ChatLayout } from "./ChatLayout";
 import { ComposerDock } from "./ComposerDock";
+import { ConversationReviewBar } from "../review-desk/ConversationReviewBar";
 import { Transcript } from "./TranscriptView";
 import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
@@ -196,10 +192,6 @@ export function ConversationPage(props: {
     () => committedMessageIds(detail.data?.events),
     [detail.data?.events],
   );
-  const userInputRequest = useMemo(
-    () => openUserInputRequest(detail.data?.events),
-    [detail.data?.events],
-  );
   // Cancel needs the latest mailbox watermark, but not as a render prop. Live
   // polls refresh generatedAt every 2s even when the queue is unchanged.
   const pendingGeneratedAtRef = useRef(detail.pendingGeneratedAt);
@@ -493,7 +485,6 @@ export function ConversationPage(props: {
                 detail.inlineMessages.length === 0
               }
               stoppable={live}
-              userInputRequest={userInputRequest}
             />
           ) : undefined
         }
@@ -547,9 +538,11 @@ export function ConversationPage(props: {
       {turnContext ? (
         <TranscriptSearchProvider query={search}>
           <TurnContextDetails
+            actor={turnContext.actor}
             contexts={turnContext.contexts}
             key={turnContext.id}
             onClose={closeTurnContext}
+            timestamp={turnContext.timestamp}
           />
         </TranscriptSearchProvider>
       ) : null}
@@ -582,8 +575,6 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   sendsInline: boolean;
   /** True while the conversation has a Turn that a stop can end. */
   stoppable: boolean;
-  /** Junior's open question, if no user message answers it yet. */
-  userInputRequest?: OpenUserInputRequest;
 }) {
   const appendMessage = useAppendConversationMessage(props.conversationId);
   const stopTurn = useStopConversationTurn(props.conversationId);
@@ -662,13 +653,6 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   const cancellableMessageIds = props.pendingMessages
     .filter((message) => message.clientStatus === undefined)
     .map((message) => message.inboundMessageId);
-  const onAnswerUserInput = useCallback(async (answer: string) => {
-    onPinRequestRef.current();
-    await appendMessageRef.current.mutateAsync({
-      idempotencyKey: crypto.randomUUID(),
-      message: answer,
-    });
-  }, []);
   const onCancelMessage = useCallback(
     (message: ConversationMailboxMessage) => {
       const receivedBefore = props.pendingGeneratedAtRef.current;
@@ -793,14 +777,7 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
           {props.pendingAuthorization ? (
             <PendingAuthorization authorization={props.pendingAuthorization} />
           ) : null}
-          {/* A queued message already answers the question. */}
-          {props.userInputRequest && props.pendingMessages.length === 0 ? (
-            <UserInputRequestCard
-              key={props.userInputRequest.toolCallId}
-              onAnswer={onAnswerUserInput}
-              request={props.userInputRequest}
-            />
-          ) : null}
+          <ConversationReviewBar conversationId={props.conversationId} />
           <PendingMailboxStack
             cancelError={cancelError}
             cancelPending={cancelPendingMessages.isPending}

package/src/client/conversations/ConversationSidebar.tsx

@@ -48,6 +48,7 @@ export function ConversationSidebar(props: {
   query: string;
   selectedId?: string;
   timeZone: string;
+  waitingConversationIds: ReadonlySet<string>;
   /**
    * `panel` = split-pane dock with internal scroll.
    * `landing` = flow nav under create compose (parent owns scroll).
@@ -186,6 +187,9 @@ export function ConversationSidebar(props: {
                   onArchiveError={handleArchiveError}
                   onArchived={handleArchived}
                   selected={entry.conversation.id === props.selectedId}
+                  waitingOnViewer={props.waitingConversationIds.has(
+                    entry.conversation.id,
+                  )}
                 />
               )
             }
@@ -271,6 +275,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   selected: boolean;
+  waitingOnViewer: boolean;
 }) {
   const archive = useArchiveConversation(props.conversation.id, {
     // Read the attempted direction from the mutation call, not the (possibly
@@ -316,6 +321,7 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
               finishedSinceSeen={props.finishedSinceSeen}
               isPrivate={isPrivate}
               status={status}
+              waitingOnViewer={props.waitingOnViewer}
             />
           </div>
           <div className="col-start-2 row-start-1 min-w-0 truncate font-sans text-sm font-medium leading-snug text-dashboard-text">

package/src/client/conversations/ConversationWorkspace.tsx

@@ -20,6 +20,7 @@ import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
 import { ConversationPage } from "./ConversationPage";
+import { useWaitingConversationIds } from "../review-desk/queries";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
 const CONVERSATION_PAGE_SIZE = 20;
@@ -61,6 +62,7 @@ export function ConversationWorkspace() {
   useEffect(() => {
     if (page > totalPages) setPage(totalPages);
   }, [page, totalPages]);
+  const waitingConversationIds = useWaitingConversationIds();
   const { finishedConversationIds, markRead } =
     useConversationFinishedIndicators(
       conversations,
@@ -107,6 +109,7 @@ export function ConversationWorkspace() {
               finishedConversationIds={finishedConversationIds}
               loading={feed.isPending}
               timeZone={getDashboardTimeZone()}
+              waitingConversationIds={waitingConversationIds}
             />
             <PagePagination
               className="pt-1"
@@ -135,6 +138,7 @@ export function ConversationWorkspace() {
           query={query}
           selectedId={selectedId}
           timeZone={getDashboardTimeZone()}
+          waitingConversationIds={waitingConversationIds}
         />
       </div>
       <section

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -9,6 +9,7 @@ import {
   TooltipTrigger,
 } from "../components/ui/tooltip";
 import { formatMs } from "../format";
+import { reviewItemIdFromToolCall } from "../review-desk/reviewItemFormat";
 import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
 import { cn } from "../styles";
 import { useTranscriptSearch } from "./transcriptSearch";
@@ -29,6 +30,10 @@ export function isCollapsibleActivityEntry(
   // Child agent rows stay in the main view, like their result events.
   if (entry.kind === "subagent") return false;
   if (entry.kind === "message") return false;
+  // A review card stays visible where the agent added the item.
+  if (entry.kind === "tool" && reviewItemIdFromToolCall(entry.part)) {
+    return false;
+  }
   return true;
 }