@sentry/junior-dashboard 0.275.0 → 0.277.0

package/src/client/display-text/DisplayText.tsx

@@ -2,7 +2,8 @@ import { memo } from "react";
 import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { HighlightedCode } from "../code";
-import { parseMarkdownBlocks } from "../format";
+import { CopyButton } from "../components/CopyButton";
+import { parseMarkdownBlocks } from "./codeBlocks";
 import { MarkdownText } from "./markdown";
 import { MentionPeopleProvider } from "./mentions";
 
@@ -56,10 +57,14 @@ function DisplayTextBlocks(props: { chat?: boolean; text: string }) {
 
         return (
           <div
-            className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
+            className="group/code relative min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel py-2.5 pl-3 pr-10"
             key={index}
           >
             <HighlightedCode code={block.code} language={block.language} />
+            {/* Touch screens cannot hover, so keep the button visible there. */}
+            <div className="absolute right-0.5 top-0.5 transition-opacity [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-hover/code:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within/code:opacity-100">
+              <CopyButton getText={() => block.code} label="Copy code" />
+            </div>
           </div>
         );
       })}

package/src/client/display-text/codeBlocks.ts

@@ -0,0 +1,92 @@
+import type { BundledLanguage } from "shiki/bundle/web";
+
+import { dashboardCodeLanguages } from "../code-languages";
+import { detectOutputLanguage, prettyJsonData } from "../format";
+import type { CodeBlock } from "../types";
+
+// Shiki has no language detection, and agents often leave fences untagged.
+// Only clear signals select a language, so prose in a fence stays plain.
+const SCRIPT_PATTERN =
+  /^javascript:|=>|\b(?:const|let|var)\s+[\w$]+\s*=|\bfunction\b\s*[\w$]*\s*\(|^\s*(?:import\s.+\sfrom\s|export\s+(?:(?:async|class|const|default|enum|function|interface|let|type|var)\s|[{*]))/m;
+const PYTHON_PATTERN =
+  /^\s*(?:(?:async\s+)?def\s+\w+\s*\(.*\)\s*(?:->.*)?:|class\s+\w+(?:\([^)]*\))?\s*:|from\s+[\w.]+\s+import\s|import\s+[\w.]+\s*$)/m;
+const SHELL_PATTERN =
+  /^\s*(?:\$\s|(?:bun|brew|cargo|cat|cd|cp|curl|docker|echo|export|gh|git|go|grep|kubectl|ls|make|mkdir|mv|npm|npx|pip|pnpm|rm|ssh|sudo|uv|wget|yarn)\s)/;
+
+const LANGUAGE_ALIASES: Record<string, BundledLanguage> = {
+  console: "shellscript",
+  htm: "html",
+  js: "javascript",
+  jsonl: "json",
+  md: "markdown",
+  ndjson: "json",
+  sh: "shellscript",
+  text: "markdown",
+  txt: "markdown",
+  xml: "xml",
+  yml: "yaml",
+};
+
+/** Parse transcript prose as Markdown or JSON while preserving fenced code. */
+export function parseMarkdownBlocks(text: string): CodeBlock[] {
+  const blocks: CodeBlock[] = [];
+  // The info string can hold more than the language, such as `c++` or
+  // `js title="x"`. Only its first word names the language.
+  const fence = /^([ \t]*)```([^\n`]*)\n([\s\S]*?)```/gm;
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+  while ((match = fence.exec(text))) {
+    const prose = text.slice(cursor, match.index).trim();
+    if (prose) blocks.push(proseBlock(prose));
+    const tag = match[2]?.trim().split(/\s+/)[0];
+    const code = stripFenceIndent(match[3] ?? "", match[1]?.length ?? 0);
+    const language = tag ? normalizeLanguage(tag) : guessLanguage(code);
+    blocks.push({
+      code: formatCodeBlock(code, language),
+      fenced: true,
+      language,
+    });
+    cursor = match.index + match[0].length;
+  }
+  const rest = text.slice(cursor).trim();
+  if (rest) blocks.push(proseBlock(rest));
+  return blocks.length > 0 ? blocks : [proseBlock(text)];
+}
+
+function proseBlock(text: string): CodeBlock {
+  const language = detectOutputLanguage(text);
+  return { code: formatCodeBlock(text, language), fenced: false, language };
+}
+
+function normalizeLanguage(tag: string): BundledLanguage {
+  const normalized = tag.toLowerCase();
+  const candidate = LANGUAGE_ALIASES[normalized] ?? normalized;
+  return Object.hasOwn(dashboardCodeLanguages, candidate)
+    ? (candidate as BundledLanguage)
+    : "markdown";
+}
+
+function guessLanguage(code: string): BundledLanguage {
+  if (detectOutputLanguage(code) === "json") return "json";
+  if (SCRIPT_PATTERN.test(code)) return "tsx";
+  if (PYTHON_PATTERN.test(code)) return "python";
+  if (SHELL_PATTERN.test(code)) return "shellscript";
+  return "markdown";
+}
+
+// A fence in a list item is indented, and so are its code lines. Remove that
+// indent, as CommonMark does.
+function stripFenceIndent(code: string, indent: number): string {
+  if (indent === 0) return code;
+  return code
+    .split("\n")
+    .map((line) => {
+      const lead = line.length - line.trimStart().length;
+      return line.slice(Math.min(indent, lead));
+    })
+    .join("\n");
+}
+
+function formatCodeBlock(code: string, language: BundledLanguage): string {
+  return language === "json" ? (prettyJsonData(code) ?? code) : code;
+}

package/src/client/format.ts

@@ -1,5 +1,4 @@
 import type { BundledLanguage } from "shiki/bundle/web";
-import { dashboardCodeLanguages } from "./code-languages";
 import type {
   ActorIdentity,
   ConversationAuxiliaryCosts,
@@ -8,7 +7,6 @@ import type {
   ConversationUsage,
 } from "@sentry/junior/api/schema";
 import type {
-  CodeBlock,
   Conversation,
   ConversationTranscript,
   TranscriptViewMessage,
@@ -815,28 +813,6 @@ export function automationPath(
   return tab === "overview" ? base : `${base}/${tab}`;
 }
 
-function normalizeLanguage(language: string | undefined): BundledLanguage {
-  const normalized = language?.trim().toLowerCase();
-  if (!normalized) return "markdown";
-  const aliases: Record<string, BundledLanguage> = {
-    console: "shellscript",
-    htm: "html",
-    js: "javascript",
-    jsonl: "json",
-    md: "markdown",
-    ndjson: "json",
-    sh: "shellscript",
-    text: "markdown",
-    txt: "markdown",
-    xml: "xml",
-    yml: "yaml",
-  };
-  const candidate = aliases[normalized] ?? normalized;
-  return Object.hasOwn(dashboardCodeLanguages, candidate)
-    ? (candidate as BundledLanguage)
-    : "markdown";
-}
-
 function prettyJson(text: string): string | undefined {
   const trimmed = text.trim();
   if (!trimmed) return undefined;
@@ -863,14 +839,11 @@ function prettyJsonl(text: string): string | undefined {
   return formatted.join("\n");
 }
 
-function prettyJsonData(text: string): string | undefined {
+/** Pretty-print JSON or JSONL text, or return undefined for other text. */
+export function prettyJsonData(text: string): string | undefined {
   return prettyJson(text) ?? prettyJsonl(text);
 }
 
-function formatCodeBlock(code: string, language: BundledLanguage): string {
-  return language === "json" ? (prettyJsonData(code) ?? code) : code;
-}
-
 /**
  * Detect the language for LLM text output prose: json if the text is valid
  * JSON or JSONL, markdown otherwise. Never auto-detects XML, HTML, TypeScript,
@@ -889,44 +862,6 @@ export function detectOutputLanguage(text: string): BundledLanguage {
   return "markdown";
 }
 
-/** Parse transcript prose as Markdown or JSON while preserving fenced code. */
-export function parseMarkdownBlocks(text: string): CodeBlock[] {
-  const blocks: CodeBlock[] = [];
-  const fence = /```([A-Za-z0-9_-]+)?\n([\s\S]*?)```/g;
-  let cursor = 0;
-  let match: RegExpExecArray | null;
-  while ((match = fence.exec(text))) {
-    const prose = text.slice(cursor, match.index).trim();
-    if (prose) {
-      const language = detectOutputLanguage(prose);
-      blocks.push({
-        code: formatCodeBlock(prose, language),
-        fenced: false,
-        language,
-      });
-    }
-    const language = normalizeLanguage(match[1]);
-    blocks.push({
-      code: formatCodeBlock(match[2] ?? "", language),
-      fenced: true,
-      language,
-    });
-    cursor = match.index + match[0].length;
-  }
-  const rest = text.slice(cursor).trim();
-  if (rest) {
-    const language = detectOutputLanguage(rest);
-    blocks.push({
-      code: formatCodeBlock(rest, language),
-      fenced: false,
-      language,
-    });
-  }
-  if (blocks.length > 0) return blocks;
-  const language = detectOutputLanguage(text);
-  return [{ code: formatCodeBlock(text, language), fenced: false, language }];
-}
-
 /** Convert SQL conversation summaries into dashboard rows. */
 export function buildConversations(
   summaries: ConversationSummaryReport[],
@@ -937,6 +872,7 @@ export function buildConversations(
       annotations: summary.annotations,
       sidebarAnnotations: summary.sidebarAnnotations,
       archivedAt: summary.archivedAt,
+      pinnedAt: summary.pinnedAt,
       auxiliaryCosts: summary.auxiliaryCosts,
       channel: summary.channel,
       channelName: summary.channelName,

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

@@ -16,7 +16,7 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
-import { attentionFirst } from "../../conversations/conversationSections";
+import { pinnedAndAttentionFirst } from "../../conversations/conversationSections";
 import { buildConversations, getDashboardTimeZone } from "../../format";
 import { useDebouncedValue } from "../../debouncedValue";
 import { useWaitingConversationIds } from "../../review-desk/queries";
@@ -54,7 +54,7 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
       ) : (
         <ConversationHomeList
           conversations={pageItems(
-            attentionFirst(conversations, waitingConversationIds),
+            pinnedAndAttentionFirst(conversations, waitingConversationIds),
             page,
             PAGE_SIZE,
           )}

package/src/client/pages/settings/AutoArchiveSettings.tsx

@@ -0,0 +1,145 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import {
+  AUTO_ARCHIVE_MAX_GRACE_HOURS,
+  dashboardIdentitySchema,
+  type DashboardIdentity,
+} from "../../../api/schema";
+import { Button } from "../../components/ui/button";
+import { Checkbox } from "../../components/ui/checkbox";
+import { Field, FieldDescription, FieldLabel } from "../../components/ui/field";
+import { NativeSelect } from "../../components/ui/native-select";
+import { InlineError } from "../../components/InlineError";
+import { Card } from "../../components/layout/Card";
+import { useArchiveDoneConversations } from "../../conversations/autoArchiveQueries";
+import { patch } from "../../http";
+import type { DashboardCoreData } from "../../types";
+
+const dashboardCoreQueryKey = ["dashboard", "core"] as const;
+
+/** Grace periods offered in Settings, in hours. */
+const AUTO_ARCHIVE_GRACE_OPTIONS = [1, 6, 24, 72, AUTO_ARCHIVE_MAX_GRACE_HOURS];
+
+function formatArchivedCount(count: number): string {
+  if (count === 0) return "No done conversations to archive.";
+  return count === 1
+    ? "Archived 1 conversation."
+    : `Archived ${count} conversations.`;
+}
+
+function formatGraceHours(hours: number): string {
+  if (hours % 24 !== 0) return hours === 1 ? "1 hour" : `${hours} hours`;
+  const days = hours / 24;
+  if (days === 7) return "1 week";
+  return days === 1 ? "1 day" : `${days} days`;
+}
+
+/**
+ * Let the user turn auto-archive on for their conversations and pick how long
+ * finished work must stay quiet before Junior archives it.
+ */
+export function AutoArchiveSettings({
+  identity,
+}: {
+  identity: DashboardIdentity;
+}) {
+  const queryClient = useQueryClient();
+  const update = useMutation({
+    mutationFn: (
+      settings: Pick<
+        DashboardIdentity,
+        "autoArchiveDefault" | "autoArchiveGraceHours"
+      >,
+    ) => patch(dashboardIdentitySchema, "/api/me", settings),
+    onSuccess: (updated) => {
+      queryClient.setQueryData<DashboardCoreData>(
+        dashboardCoreQueryKey,
+        (current) => (current ? { ...current, me: updated } : current),
+      );
+    },
+  });
+  const archiveDone = useArchiveDoneConversations();
+  const enabled = identity.autoArchiveDefault ?? false;
+  const graceHours = identity.autoArchiveGraceHours ?? 24;
+  // Keep a saved value that is not a preset, so the select shows the truth.
+  const graceOptions = AUTO_ARCHIVE_GRACE_OPTIONS.includes(graceHours)
+    ? AUTO_ARCHIVE_GRACE_OPTIONS
+    : [...AUTO_ARCHIVE_GRACE_OPTIONS, graceHours].sort((a, b) => a - b);
+
+  return (
+    <Card className="mt-6 mb-0" padding="md" variant="raised">
+      <h2 className="m-0 text-lg font-bold">Conversations</h2>
+      <label className="mt-4 flex cursor-pointer items-start gap-3">
+        <Checkbox
+          checked={enabled}
+          className="mt-0.5"
+          disabled={update.isPending}
+          onCheckedChange={(checked) =>
+            update.mutate({ autoArchiveDefault: checked })
+          }
+        />
+        <span className="grid gap-0.5">
+          <span className="text-sm font-medium">
+            Auto-archive conversations when done
+          </span>
+          <span className="text-xs text-dashboard-text-muted">
+            Archive a conversation for you when all of its linked work, such as
+            pull requests, is merged or closed and nobody replies during the
+            wait time. You can change this for each conversation in its details.
+          </span>
+        </span>
+      </label>
+      <Field className="mt-5 max-w-xs">
+        <FieldLabel htmlFor="auto-archive-grace">Wait time</FieldLabel>
+        <NativeSelect
+          aria-describedby="auto-archive-grace-help"
+          disabled={update.isPending}
+          id="auto-archive-grace"
+          onChange={(event) =>
+            update.mutate({ autoArchiveGraceHours: Number(event.target.value) })
+          }
+          value={graceHours}
+        >
+          {graceOptions.map((hours) => (
+            <option key={hours} value={hours}>
+              {formatGraceHours(hours)}
+            </option>
+          ))}
+        </NativeSelect>
+        <FieldDescription id="auto-archive-grace-help">
+          How long finished work and the conversation stay quiet before archive.
+        </FieldDescription>
+      </Field>
+      {update.isError ? (
+        <InlineError className="mt-3">
+          Could not save this setting. Try again.
+        </InlineError>
+      ) : null}
+      <div className="mt-5 grid gap-1.5">
+        <div className="flex flex-wrap items-center gap-3">
+          <Button
+            disabled={archiveDone.isPending}
+            onClick={() => archiveDone.mutate()}
+            type="button"
+          >
+            {archiveDone.isPending ? "Archiving…" : "Archive done now"}
+          </Button>
+          {archiveDone.isSuccess ? (
+            <p className="m-0 text-sm text-dashboard-text-muted" role="status">
+              {formatArchivedCount(archiveDone.data.archived)}
+            </p>
+          ) : null}
+          {archiveDone.isError ? (
+            <InlineError>
+              Could not archive conversations. Try again.
+            </InlineError>
+          ) : null}
+        </div>
+        <p className="m-0 text-xs text-dashboard-text-muted">
+          Archive every done conversation once, without the wait time. Skips
+          conversations where you turned auto-archive off.
+        </p>
+      </div>
+    </Card>
+  );
+}

package/src/client/pages/settings/SettingsPage.tsx

@@ -24,6 +24,7 @@ import { InlineError } from "../../components/InlineError";
 import { Card } from "../../components/layout/Card";
 import { DashboardApiError, fetchDashboardJson, patch, put } from "../../http";
 import type { DashboardCoreData } from "../../types";
+import { AutoArchiveSettings } from "./AutoArchiveSettings";
 import { SettingsPageLayout } from "./SettingsPageLayout";
 
 const dashboardCoreQueryKey = ["dashboard", "core"] as const;
@@ -108,6 +109,7 @@ export function SettingsPage({ identity }: SettingsPageProps) {
       </form>
       <ConversationStartSetting />
       <ComposerAutocorrectSetting />
+      <AutoArchiveSettings identity={identity} />
       <CustomizationForm />
     </SettingsPageLayout>
   );

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

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import type { ReviewItemPayload } from "@sentry/junior/api/schema";
 
 import { LoadMorePagination } from "../components/Pagination";
+import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import {
   DetailsCard,
   DetailsList,
@@ -74,9 +75,9 @@ function ReviewItemRow(props: {
     if (props.defaultExpanded) setExpanded(true);
   }, [props.defaultExpanded]);
   return (
-    <>
+    <Collapsible className="min-w-0" onOpenChange={setExpanded} open={expanded}>
       <DetailsRow
-        expanded={expanded}
+        disclosure
         icon={<Inbox aria-hidden="true" className="size-3.5" />}
         meta={
           <span className="grid size-5 place-items-center">
@@ -86,14 +87,11 @@ function ReviewItemRow(props: {
             />
           </span>
         }
-        onToggle={() => setExpanded((value) => !value)}
         title={props.item.title}
       />
-      {expanded ? (
-        <div className="px-1.5 pb-1">
-          <ReviewItemCard item={props.item} />
-        </div>
-      ) : null}
-    </>
+      <CollapsibleContent className="px-1.5 pb-1">
+        <ReviewItemCard item={props.item} />
+      </CollapsibleContent>
+    </Collapsible>
   );
 }

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

@@ -26,7 +26,7 @@ function actionError(error: unknown): string {
 }
 
 /** Show the submitted answer as one line for each answered field. */
-function AnswerSummary(props: {
+export function AnswerSummary(props: {
   answer: NonNullable<ReviewItemPayload["answer"]>;
   request: NonNullable<ReviewItemPayload["request"]>;
 }) {

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

@@ -0,0 +1,85 @@
+import { Inbox } from "lucide-react";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type {
+  ReviewItemChangeRecord,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { AnswerSummary } from "./ReviewItemActions";
+import { useReviewItemData } from "./queries";
+import { reviewItemPath } from "./reviewItemFormat";
+
+const CHANGE_VERBS = {
+  dismissed: "Dismissed",
+  submitted: "Answered",
+  taken: "Took",
+} as const satisfies Record<ReviewItemChangeRecord["kind"], string>;
+
+function ChangeRow(props: {
+  item: ReviewItemPayload;
+  record: ReviewItemChangeRecord;
+}) {
+  const { item, record } = props;
+  const verb = CHANGE_VERBS[record.kind];
+  return (
+    <section
+      aria-label={`${verb} ${item.title}`}
+      className="grid min-w-0 max-w-[37.5rem] gap-2 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-3 font-sans text-sm"
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <Inbox
+          aria-hidden="true"
+          className="shrink-0 text-dashboard-text-muted"
+          size={15}
+        />
+        <span className="shrink-0 text-dashboard-text-muted">{verb}</span>
+        <Link
+          className="min-w-0 flex-1 truncate font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus"
+          to={reviewItemPath(item.id)}
+        >
+          {item.title}
+        </Link>
+      </div>
+      {/* An answer is final, so the item's answer is this message's answer. */}
+      {record.kind === "submitted" && item.request && item.answer ? (
+        <AnswerSummary answer={item.answer} request={item.request} />
+      ) : null}
+    </section>
+  );
+}
+
+/**
+ * Show the Review item change that a message records as one row: what the
+ * message did and the item it did it to. The row shows the change from the
+ * message, not the item's current state, so a take stays a take after a
+ * later answer. Shows `fallback` when the viewer cannot read the item.
+ */
+export function ReviewItemChangeRow(props: {
+  fallback: ReactNode;
+  record: ReviewItemChangeRecord;
+}) {
+  const { data, isError } = useReviewItemData(props.record.reviewItemId);
+  if (isError) return props.fallback;
+  // The row replaces the text, so wait for the item before showing it.
+  if (!data) return null;
+  return <ChangeRow item={data} record={props.record} />;
+}
+
+/**
+ * Name the Review item change that a queued message records, on one line.
+ * Shows `fallback` until the item loads or when the viewer cannot read it.
+ */
+export function ReviewItemChangeLabel(props: {
+  fallback: ReactNode;
+  record: ReviewItemChangeRecord;
+}) {
+  const { data } = useReviewItemData(props.record.reviewItemId);
+  if (!data) return props.fallback;
+  return (
+    <>
+      {CHANGE_VERBS[props.record.kind]}{" "}
+      <span className="font-medium text-dashboard-text">{data.title}</span>
+    </>
+  );
+}

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

@@ -9,28 +9,39 @@ import { ConversationTranscriptView } from "../conversations/ConversationTranscr
 import { TranscriptLoading } from "../conversations/TranscriptLoading";
 import { useConversationData } from "../conversations/queries";
 import type { ConversationTranscript } from "../types";
+import { excerptMessage } from "./reviewItemFormat";
 
 /** Messages before the item that the excerpt shows. */
 const BEFORE_COUNT = 3;
-/** Messages after the item that the excerpt shows, newest last. */
-const AFTER_COUNT = 8;
+/** Messages after the item that the excerpt shows. */
+const AFTER_COUNT = 3;
 
 /**
- * Split the messages of a Conversation at the time an item was added. Only
- * messages show: the tool call that added the item would repeat its card.
+ * Pick the messages nearest the time an item was added. Only messages show:
+ * the tool call that added the item would repeat its card. For a closed item,
+ * messages from its close on do not show: the card already has the answer.
  */
 function conversationExcerpt(
   events: readonly ConversationReportEvent[],
-  itemCreatedAt: string,
+  item: Pick<ReviewItemPayload, "closedAt" | "createdAt">,
 ): { after: ConversationReportEvent[]; before: ConversationReportEvent[] } {
-  const askedAt = Date.parse(itemCreatedAt);
-  const messages = events.filter(
-    (event) => event.data.type === "message" && event.data.role !== "system",
-  );
+  const askedAt = Date.parse(item.createdAt);
+  const closedAt = item.closedAt ? Date.parse(item.closedAt) : Infinity;
+  // Changes to items show on their cards, not as context for this one.
+  const messages = events.flatMap((event) => {
+    if (event.data.type !== "message" || event.data.role === "system") {
+      return [];
+    }
+    const message = excerptMessage(event);
+    return message ? [message] : [];
+  });
   return {
     after: messages
-      .filter((event) => Date.parse(event.createdAt) > askedAt)
-      .slice(-AFTER_COUNT),
+      .filter((event) => {
+        const at = Date.parse(event.createdAt);
+        return at > askedAt && at < closedAt;
+      })
+      .slice(0, AFTER_COUNT),
     before: messages
       .filter((event) => Date.parse(event.createdAt) <= askedAt)
       .slice(-BEFORE_COUNT),
@@ -49,8 +60,8 @@ function Excerpt(props: {
 }
 
 /**
- * Show the end of the Conversation that added an item, split where the agent
- * asked. Returns `fallback` when the viewer cannot read its messages.
+ * Show the messages around the point where the agent added an item, split
+ * where it asked. Returns `fallback` when the viewer cannot read its messages.
  */
 export function ReviewItemContext(props: {
   fallback: ReactNode;
@@ -60,30 +71,37 @@ export function ReviewItemContext(props: {
   const data = detail.data;
   const events = data?.events;
   const excerpt = useMemo(
-    () =>
-      events ? conversationExcerpt(events, props.item.createdAt) : undefined,
-    [events, props.item.createdAt],
+    () => (events ? conversationExcerpt(events, props.item) : undefined),
+    [events, props.item],
   );
   // The first page holds the newest events. Load earlier pages until the
-  // page reaches the time the item was added, or history ends.
+  // page reaches the time the item was added, or history ends. Until then
+  // the loaded messages after the ask are not the first ones, so the
+  // excerpt waits.
   const loadPreviousPageRef = useRef(detail.loadPreviousPage);
   loadPreviousPageRef.current = detail.loadPreviousPage;
   const oldest = events?.[0]?.createdAt;
-  const loadEarlier =
+  // Redacted or expired history has no messages to wait for.
+  const available = data?.eventHistory.status === "available";
+  const missingEarlier =
+    available &&
     oldest !== undefined &&
     Date.parse(oldest) > Date.parse(props.item.createdAt) &&
-    detail.hasPreviousPage &&
-    !detail.isLoadingPreviousPage &&
-    !detail.historyError;
+    detail.hasPreviousPage;
+  const loadEarlier =
+    missingEarlier && !detail.isLoadingPreviousPage && !detail.historyError;
   useEffect(() => {
     if (loadEarlier) loadPreviousPageRef.current();
   }, [loadEarlier, oldest]);
 
-  if (detail.isPending) return <TranscriptLoading />;
+  if (detail.isPending || (missingEarlier && !detail.historyError)) {
+    return <TranscriptLoading />;
+  }
   if (
     !data ||
     !excerpt ||
-    data.eventHistory.status !== "available" ||
+    !available ||
+    missingEarlier ||
     excerpt.before.length + excerpt.after.length === 0
   ) {
     return props.fallback;

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

@@ -20,7 +20,8 @@ import {
 import { conversationDetailTitle } from "../format";
 import { fetchDashboardJson, post } from "../http";
 
-const REVIEW_ITEMS_QUERY_KEY = ["dashboard", "review-items"] as const;
+/** Prefix of every Review item read, for refreshes after a change. */
+export const REVIEW_ITEMS_QUERY_KEY = ["dashboard", "review-items"] as const;
 const COUNT_REFRESH_MS = 60_000;
 
 /**