@sentry/junior-dashboard 0.268.0 → 0.270.0

package/src/client/pages/automations/AutomationVersionsTab.tsx

@@ -29,6 +29,7 @@ import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { StatusChip } from "../../components/StatusChip";
 import { Card } from "../../components/layout/Card";
+import { DisplayText } from "../../display-text/DisplayText";
 import { formatRelativeTime } from "../../format";
 import { DashboardApiError, fetchDashboardJson, post } from "../../http";
 import { cn } from "../../styles";
@@ -364,7 +365,10 @@ function fieldValue(
       return definition.title ?? "First line of the instruction";
     case "instruction":
       return (
-        <span className="whitespace-pre-wrap">{definition.instruction}</span>
+        <DisplayText
+          mentions={automation.mentions}
+          text={definition.instruction}
+        />
       );
     case "when":
       if (version.kind === "scheduled") {
@@ -431,7 +435,7 @@ function LineDiff(props: { after: string; before: string }) {
                 {line.kind === "added" ? "Added: " : "Removed: "}
               </span>
             )}
-            {line.text || " "}
+            {line.value || " "}
           </span>
         </div>
       ))}
@@ -439,7 +443,7 @@ function LineDiff(props: { after: string; before: string }) {
   );
 }
 
-type DiffLine = { kind: "added" | "removed" | "same"; text: string };
+type DiffLine = { kind: "added" | "removed" | "same"; value: string };
 
 /** Line diff from the longest common subsequence. Instructions stay short. */
 function diffLines(before: string, after: string): DiffLine[] {
@@ -461,17 +465,17 @@ function diffLines(before: string, after: string): DiffLine[] {
   let j = 0;
   while (i < a.length && j < b.length) {
     if (a[i] === b[j]) {
-      lines.push({ kind: "same", text: a[i]! });
+      lines.push({ kind: "same", value: a[i]! });
       i++;
       j++;
     } else if (lengths[i + 1]![j]! >= lengths[i]![j + 1]!) {
-      lines.push({ kind: "removed", text: a[i++]! });
+      lines.push({ kind: "removed", value: a[i++]! });
     } else {
-      lines.push({ kind: "added", text: b[j++]! });
+      lines.push({ kind: "added", value: b[j++]! });
     }
   }
-  while (i < a.length) lines.push({ kind: "removed", text: a[i++]! });
-  while (j < b.length) lines.push({ kind: "added", text: b[j++]! });
+  while (i < a.length) lines.push({ kind: "removed", value: a[i++]! });
+  while (j < b.length) lines.push({ kind: "added", value: b[j++]! });
   return lines;
 }
 

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

@@ -16,6 +16,7 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
+import { attentionFirst } from "../../conversations/conversationSections";
 import { buildConversations, getDashboardTimeZone } from "../../format";
 import { useDebouncedValue } from "../../debouncedValue";
 import { useWaitingConversationIds } from "../../review-desk/queries";
@@ -52,7 +53,11 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
         </EmptyTelemetry>
       ) : (
         <ConversationHomeList
-          conversations={pageItems(conversations, page, PAGE_SIZE)}
+          conversations={pageItems(
+            attentionFirst(conversations, waitingConversationIds),
+            page,
+            PAGE_SIZE,
+          )}
           emptyLabel={
             search
               ? "No conversations match this search."

package/src/client/pages/memory/MemoryDetails.tsx

@@ -18,16 +18,12 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../../components/ui/tooltip";
-import { TranscriptText } from "../../conversations/TranscriptText";
+import { DisplayText } from "../../display-text/DisplayText";
 import type {
   PluginUserPageRecord,
   PluginUserPageRecordAction,
 } from "../user/pluginUserPageData";
 
-// The memory plugin API does not resolve mentions yet, so memory text shows
-// Slack ids instead of names.
-const NO_MEMORY_MENTIONS: readonly [] = [];
-
 // The heading, origin, and scope rows already show these values.
 const SUMMARIZED_METADATA = new Set([
   "Learned",
@@ -81,15 +77,11 @@ export function MemoryDetails(props: {
           {record ? (
             <>
               <div className="grid gap-3 text-sm leading-relaxed">
-                <TranscriptText
-                  mentions={NO_MEMORY_MENTIONS}
-                  text={record.title}
-                />
+                {/* The memory plugin API does not resolve mentions yet, so
+                    memory text shows Slack ids instead of names. */}
+                <DisplayText text={record.title} />
                 {record.description ? (
-                  <TranscriptText
-                    mentions={NO_MEMORY_MENTIONS}
-                    text={record.description}
-                  />
+                  <DisplayText text={record.description} />
                 ) : null}
               </div>
               <MemoryFacts record={record} />

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

@@ -0,0 +1,12 @@
+# System pages
+
+- The URL selects a Workspace recipe: `/system/workspaces/:id` opens
+  `WorkspaceDetails` beside the list.
+- The list report has no snapshots. The detail read adds the current
+  snapshot. Keep snapshot loading and errors inside the Snapshot row.
+- Edit and Delete live in the panel header. List rows have no actions.
+- `WorkspaceDeleteDialog` keeps errors in the dialog and blocks dismissal
+  while the request runs.
+- Close and Escape return focus to the selected row.
+
+Browser coverage: `e2e/system.spec.ts`.

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

@@ -2,10 +2,13 @@ import { ChevronRight } from "lucide-react";
 import { useState } from "react";
 
 import { Drawer } from "../components/Drawer";
+import { LoadMorePagination } from "../components/Pagination";
 import { ReviewItemCard } from "./ReviewItemCard";
 import { useReviewItemsData } from "./queries";
 
-function itemCountLabel(count: number): string {
+/** `more` marks a count of the loaded pages only, such as "50+". */
+function itemCountLabel(count: number, more: boolean): string {
+  if (more) return `${count}+ open review items`;
   return count === 1 ? "1 open review item" : `${count} open review items`;
 }
 
@@ -15,14 +18,12 @@ function itemCountLabel(count: number): string {
  */
 export function ConversationReviewBar(props: { conversationId: string }) {
   const [open, setOpen] = useState(false);
-  const items =
-    useReviewItemsData({
-      archived: false,
-      conversationId: props.conversationId,
-      view: "all",
-    }).data?.items ?? [];
+  const { items, query } = useReviewItemsData({
+    conversationId: props.conversationId,
+  });
   if (items.length === 0) return null;
-  const label = itemCountLabel(items.length);
+  const more = Boolean(query.hasNextPage);
+  const label = itemCountLabel(items.length, more);
   return (
     <>
       <button
@@ -48,12 +49,16 @@ export function ConversationReviewBar(props: { conversationId: string }) {
           label="Review items"
           onClose={() => setOpen(false)}
           openKey={props.conversationId}
-          width="narrow"
         >
           <div className="grid gap-3">
             {items.map((item) => (
               <ReviewItemCard item={item} key={item.id} />
             ))}
+            <LoadMorePagination
+              hasMore={more}
+              loading={query.isFetchingNextPage}
+              onLoadMore={() => void query.fetchNextPage()}
+            />
           </div>
         </Drawer>
       ) : null}

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

@@ -1,12 +1,13 @@
-import type { ReactNode } from "react";
+import { Archive } from "lucide-react";
+import { useId, type ReactNode } from "react";
 import { Link, useSearchParams } from "react-router";
 import type {
   AutomationSummary,
   ReviewItemPayload,
 } from "@sentry/junior/api/schema";
 
-import { FilterTabList } from "../components/FilterBar";
 import { InlineError } from "../components/InlineError";
+import { LoadMorePagination } from "../components/Pagination";
 import { SearchInput } from "../components/SearchInput";
 import { StatusChip } from "../components/StatusChip";
 import { Card } from "../components/layout/Card";
@@ -14,33 +15,19 @@ import { PageHeader } from "../components/layout/PageHeader";
 import { PageLayout } from "../components/layout/PageLayout";
 import { Skeleton } from "../components/ui/skeleton";
 import { automationPath, formatRelativeTime } from "../format";
-import {
-  parseSearchParamEnum,
-  pathWithSearch,
-  useDebouncedSearchParam,
-} from "../searchParams";
+import { pathWithSearch, useDebouncedSearchParam } from "../searchParams";
 import { cn } from "../styles";
 import { ReviewItemDetail } from "./ReviewItemDetail";
 import {
-  REVIEW_DESK_VIEWS,
   useBlockedAutomationsData,
   useReviewItemData,
   useReviewItemsData,
 } from "./queries";
-import { assigneeLabel, reviewItemPath } from "./reviewItemFormat";
-
-const VIEW_TABS = [
-  { label: "Mine", value: "mine" },
-  { label: "Everyone", value: "everyone" },
-  { label: "All", value: "all" },
-] as const;
-
-const STATE_TABS = [
-  { label: "Open", value: "open" },
-  { label: "Archived", value: "archived" },
-] as const;
-
-const ITEM_STATES = ["open", "archived"] as const;
+import {
+  assigneeLabel,
+  reviewItemPath,
+  reviewItemStatusLabel,
+} from "./reviewItemFormat";
 
 const rowClass =
   "grid gap-0.5 rounded-md px-3 py-2 text-inherit no-underline transition-colors";
@@ -55,10 +42,23 @@ function EmptyMessage(props: { children: ReactNode }) {
   );
 }
 
-function ListGroup(props: { children: ReactNode; title: string }) {
+function ListGroup(props: {
+  children: ReactNode;
+  className?: string;
+  icon?: ReactNode;
+  title: string;
+}) {
+  const headingId = useId();
   return (
-    <section className="grid gap-1">
-      <h2 className="m-0 px-3 font-sans text-xs font-medium text-dashboard-text-muted">
+    <section
+      aria-labelledby={headingId}
+      className={cn("grid gap-1", props.className)}
+    >
+      <h2
+        id={headingId}
+        className="m-0 flex items-center gap-1.5 px-3 font-sans text-xs font-medium text-dashboard-text-muted"
+      >
+        {props.icon}
         {props.title}
       </h2>
       <ul className="m-0 grid list-none gap-0.5 p-0">{props.children}</ul>
@@ -72,6 +72,7 @@ function ItemRow(props: {
   selected: boolean;
 }) {
   const { item } = props;
+  const closed = item.status !== "open";
   const unassigned = !item.assignedToEveryone && item.assignees.length === 0;
   return (
     <li>
@@ -86,9 +87,20 @@ function ItemRow(props: {
         replace
         to={pathWithSearch(reviewItemPath(item.id), props.searchParams)}
       >
-        <span className="truncate text-sm font-medium">{item.title}</span>
+        <span
+          className={cn(
+            "truncate text-sm font-medium",
+            closed && "text-dashboard-text-muted",
+          )}
+        >
+          {item.title}
+        </span>
         <span className="flex min-w-0 items-center gap-2 text-xs text-dashboard-text-muted">
-          {unassigned ? (
+          {closed ? (
+            <StatusChip className="shrink-0" size="compact">
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          ) : unassigned ? (
             <StatusChip size="compact" tone="warning">
               Unassigned
             </StatusChip>
@@ -140,42 +152,25 @@ function ReviewListLoading() {
 }
 
 /**
- * Render the review desk: open or archived Review items in the Mine,
- * Everyone, and All views, with the selected item beside the list.
+ * Render the review desk: the open Review items that the viewer can see,
+ * with search and the selected item beside the list. A search also finds
+ * archived items, which show in their own group.
  */
 export function ReviewDeskPage() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const view =
-    parseSearchParamEnum(searchParams.get("view"), REVIEW_DESK_VIEWS) ?? "mine";
-  const state =
-    parseSearchParamEnum(searchParams.get("state"), ITEM_STATES) ?? "open";
-  // The selected item can be missing from the new list, so a tab change
-  // drops it and the first item of the new list shows.
-  function selectTab(key: "state" | "view", value: string, initial: string) {
-    setSearchParams(
-      (current) => {
-        const next = new URLSearchParams(current);
-        next.delete("item");
-        if (value === initial) next.delete(key);
-        else next.set(key, value);
-        return next;
-      },
-      { replace: true },
-    );
-  }
+  const [searchParams] = useSearchParams();
   const [search, setSearch, q] = useDebouncedSearchParam();
-  const archived = state === "archived";
-  const items = useReviewItemsData({ archived, q, view });
-  const showBlocked = !archived && view !== "everyone" && !q;
+  const { items: list, moreArchived, query: items } = useReviewItemsData({ q });
+  const showBlocked = !q;
   const blocked = useBlockedAutomationsData(showBlocked);
-  const list = items.data?.items ?? [];
   const selectedId = searchParams.get("item") ?? list[0]?.id;
   const listed = list.find((item) => item.id === selectedId);
   // A link can select an item that is not in the current view.
   const direct = useReviewItemData(listed ? undefined : selectedId);
   const selected = listed ?? direct.data;
-  const actions = list.filter((item) => item.kind === "action");
-  const notices = list.filter((item) => item.kind === "notice");
+  const open = list.filter((item) => item.status === "open");
+  const archived = list.filter((item) => item.status !== "open");
+  const actions = open.filter((item) => item.kind === "action");
+  const notices = open.filter((item) => item.kind === "notice");
   const blockedAutomations = showBlocked
     ? (blocked.data?.automations ?? [])
     : [];
@@ -188,30 +183,18 @@ export function ReviewDeskPage() {
         description="Items that need a person, and who can act on them."
         title="Review desk"
       />
-      <div className="flex min-w-0 flex-wrap items-center gap-3">
-        <FilterTabList
-          ariaLabel="Assignee view"
-          items={VIEW_TABS}
-          onChange={(value) => selectTab("view", value, "mine")}
-          value={view}
-        />
-        <FilterTabList
-          ariaLabel="Item state"
-          items={STATE_TABS}
-          onChange={(value) => selectTab("state", value, "open")}
-          value={state}
-        />
-        <SearchInput
-          className="ml-auto w-full sm:w-64"
-          label="Search review items"
-          onChange={setSearch}
-          placeholder="Search items"
-          value={search}
-        />
-      </div>
+      <SearchInput
+        label="Search review items"
+        onChange={setSearch}
+        placeholder="Search open and archived items"
+        value={search}
+      />
       <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)]">
-        <Card className="grid content-start gap-4 py-3" padding="none">
-          {items.error ? (
+        <Card
+          className="grid content-start gap-4 py-3 lg:self-start"
+          padding="none"
+        >
+          {items.error && !items.data ? (
             <InlineError className="px-3">
               Could not load review items.
             </InlineError>
@@ -219,12 +202,12 @@ export function ReviewDeskPage() {
             <ReviewListLoading />
           ) : empty ? (
             <EmptyMessage>
-              {archived ? "No archived items." : "Nothing needs you right now."}
+              {q ? `No items match "${q}".` : "No open items."}
             </EmptyMessage>
           ) : (
             <>
               {actions.length > 0 ? (
-                <ListGroup title={archived ? "Questions" : "Needs an answer"}>
+                <ListGroup title="Needs an answer">
                   {actions.map((item) => (
                     <ItemRow
                       item={item}
@@ -247,6 +230,43 @@ export function ReviewDeskPage() {
                   ))}
                 </ListGroup>
               ) : null}
+              <LoadMorePagination
+                className="px-3"
+                hasMore={!items.isPlaceholderData && Boolean(items.hasNextPage)}
+                loading={items.isFetchingNextPage}
+                onLoadMore={() => void items.fetchNextPage()}
+              />
+              {items.isFetchNextPageError ? (
+                <InlineError className="px-3 text-center">
+                  Could not load more items. Try again.
+                </InlineError>
+              ) : null}
+              {archived.length > 0 ? (
+                <ListGroup
+                  className={
+                    open.length > 0
+                      ? "border-t border-dashboard-border-subtle pt-3"
+                      : undefined
+                  }
+                  icon={<Archive aria-hidden="true" size={13} />}
+                  title="Archived"
+                >
+                  {archived.map((item) => (
+                    <ItemRow
+                      item={item}
+                      key={item.id}
+                      searchParams={searchParams}
+                      selected={item.id === selected?.id}
+                    />
+                  ))}
+                  {moreArchived ? (
+                    <li className="px-3 py-1 text-xs text-dashboard-text-muted">
+                      Only the newest archived matches show. Add words to the
+                      search to find older items.
+                    </li>
+                  ) : null}
+                </ListGroup>
+              ) : null}
               {blockedAutomations.length > 0 ? (
                 <ListGroup title="Blocked Automations">
                   {blockedAutomations.map((automation) => (

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

@@ -8,10 +8,11 @@ import {
 import { InlineError } from "../components/InlineError";
 import { UserInputForm } from "../components/UserInputForm";
 import { Button } from "../components/ui/button";
-import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { DisplayText } from "../display-text/DisplayText";
 import { formatRelativeTime } from "../format";
 import { DashboardApiError } from "../http";
 import { useReviewItemAction } from "./queries";
+import { useReportUnsentAnswer } from "./UnsentAnswers";
 
 function personLabel(person: { displayName?: string; email: string }) {
   return person.displayName ?? person.email;
@@ -79,6 +80,8 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
   const { item } = props;
   const action = useReviewItemAction();
   const [error, setError] = useState<string>();
+  const [unsent, setUnsent] = useState(false);
+  useReportUnsentAnswer(item, unsent);
 
   if (item.status !== "open") return <ClosedSummary item={item} />;
   if (!item.canAct) {
@@ -126,9 +129,10 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
       {item.kind === "action" && item.request ? (
         <div className="text-sm">
           <div className="font-medium">
-            <TranscriptMarkdown text={item.request.question} />
+            <DisplayText text={item.request.question} />
           </div>
           <UserInputForm
+            onUnsentChange={setUnsent}
             onSubmit={(answer) =>
               run({
                 action: "submit",

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

@@ -1,38 +1,79 @@
+import { ArrowRight, Inbox } from "lucide-react";
 import { Link } from "react-router";
 import type { ReviewItemPayload } from "@sentry/junior/api/schema";
 
 import { StatusChip } from "../components/StatusChip";
-import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { DisplayText } from "../display-text/DisplayText";
+import { cn } from "../styles";
 import { ReviewItemActions } from "./ReviewItemActions";
 import { useReviewItemData } from "./queries";
-import { reviewItemPath, reviewItemStatusLabel } from "./reviewItemFormat";
+import {
+  assigneeLabel,
+  reviewItemPath,
+  reviewItemStatusLabel,
+} from "./reviewItemFormat";
 
 /**
  * Show one Review item as a card: its title, status, description, and the
- * viewer's actions, with a link to the review desk.
+ * viewer's actions, with a link to the review desk. The card uses the same
+ * frame as transcript object cards, so it reads as one record, not as prose.
  */
 export function ReviewItemCard(props: { item: ReviewItemPayload }) {
   const { item } = props;
+  const open = item.status === "open";
+  const assigned = item.assignees.length > 0 || item.assignedToEveryone;
   return (
     <section
       aria-label={`Review item: ${item.title}`}
-      className="grid gap-3 rounded-lg border border-violet-300/25 bg-violet-300/[0.06] p-3 font-sans text-sm text-dashboard-text"
+      className="my-1 w-full min-w-0 max-w-[37.5rem] overflow-hidden rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel font-sans text-sm text-dashboard-text"
     >
-      <header className="flex min-w-0 items-baseline justify-between gap-3">
-        <span className="min-w-0 truncate font-medium">{item.title}</span>
-        <StatusChip
-          className="shrink-0"
-          size="compact"
-          tone={item.status === "open" ? "accent" : "neutral"}
+      <header className="flex items-start gap-3 px-4 pb-3 pt-4 md:px-5">
+        {/* The accent tile marks an item that still needs a person. */}
+        <span
+          aria-hidden="true"
+          className={cn(
+            "grid size-9 shrink-0 place-items-center rounded-lg border",
+            open
+              ? "border-dashboard-accent/30 bg-dashboard-accent/10 text-dashboard-accent"
+              : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted",
+          )}
         >
-          {reviewItemStatusLabel(item)}
-        </StatusChip>
+          <Inbox size={18} />
+        </span>
+        <div className="grid min-w-0 flex-1 gap-1">
+          <div className="flex min-w-0 items-center justify-between gap-3">
+            <p className="m-0 text-xs text-dashboard-text-muted">Review item</p>
+            <StatusChip
+              className="shrink-0"
+              size="compact"
+              tone={open ? "accent" : "neutral"}
+            >
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          </div>
+          <h3 className="m-0 break-words text-base font-semibold leading-snug">
+            {item.title}
+          </h3>
+        </div>
       </header>
-      <TranscriptMarkdown text={item.body} />
-      <ReviewItemActions item={item} />
-      <Link className="w-fit text-xs" to={reviewItemPath(item.id)}>
-        Open on the review desk
-      </Link>
+      <div className="grid min-w-0 gap-4 px-4 pb-4 md:px-5">
+        <DisplayText text={item.body} />
+        <div className="border-t border-dashboard-border pt-4">
+          <ReviewItemActions item={item} />
+        </div>
+      </div>
+      <footer className="flex flex-wrap items-center justify-between gap-3 border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-3 text-xs md:px-5">
+        <Link
+          className="inline-flex items-center gap-2 font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus"
+          to={reviewItemPath(item.id)}
+        >
+          Open on the review desk
+          <ArrowRight aria-hidden="true" size={14} />
+        </Link>
+        <span className="min-w-0 truncate text-dashboard-text-muted">
+          {assigned ? `Assigned to ${assigneeLabel(item)}` : "Unassigned"}
+        </span>
+      </footer>
     </section>
   );
 }

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

@@ -1,9 +1,10 @@
+import { Archive } from "lucide-react";
 import type { ReactNode } from "react";
 import { Link } from "react-router";
 import type { ReviewItemPayload } from "@sentry/junior/api/schema";
 
 import { StatusChip } from "../components/StatusChip";
-import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { DisplayText } from "../display-text/DisplayText";
 import { conversationPath } from "../conversations/conversationRoutes";
 import { automationPath, formatRelativeTime } from "../format";
 import { ReviewItemActions } from "./ReviewItemActions";
@@ -26,27 +27,34 @@ export function ReviewItemDetail(props: { item: ReviewItemPayload }) {
   const { item } = props;
   const subject = item.subject;
   const conversationTitles = useLinkedConversationTitles(item.conversationIds);
+  const closed = item.status !== "open";
   return (
     <article className="grid min-w-0 content-start gap-5">
+      {closed ? (
+        // Search mixes open and archived items, so a closed item must be
+        // easy to tell apart at the top of the detail.
+        <p className="m-0 flex items-center gap-2 rounded-md bg-dashboard-fill-soft px-3 py-2 text-xs font-medium text-dashboard-text-muted">
+          <Archive aria-hidden="true" size={14} />
+          Archived · {reviewItemStatusLabel(item)}
+        </p>
+      ) : null}
       <header className="grid gap-1.5">
         <div className="flex min-w-0 items-start justify-between gap-3">
           <h2 className="m-0 min-w-0 break-words font-display text-xl font-medium leading-snug">
             {item.title}
           </h2>
-          <StatusChip
-            className="mt-1 shrink-0"
-            size="compact"
-            tone={item.status === "open" ? "accent" : "neutral"}
-          >
-            {reviewItemStatusLabel(item)}
-          </StatusChip>
+          {closed ? null : (
+            <StatusChip className="mt-1 shrink-0" size="compact" tone="accent">
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          )}
         </div>
         <p className="m-0 text-xs text-dashboard-text-muted">
           Added {formatRelativeTime(item.createdAt)}
           {item.visibility === "private" ? " · Private" : null}
         </p>
       </header>
-      <TranscriptMarkdown text={item.body} />
+      <DisplayText text={item.body} />
       <section
         aria-label={item.status === "open" ? "Actions" : "Outcome"}
         className="border-t border-dashboard-border-subtle pt-5"