@sentry/junior-dashboard 0.268.0 → 0.270.0

package/src/client/conversations/ConversationHomeList.tsx

@@ -17,16 +17,18 @@ import {
 import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { ConversationSidebarAnnotations } from "./ConversationMeta";
-import { formatConversationActivityPreview } from "./conversationActivityPreview";
 import { ConversationArchiveNotices } from "./ConversationArchiveNotices";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
 import { useArchiveConversation } from "./queries";
-import { MentionText } from "./transcriptMentions";
+import { DisplayText } from "../display-text/DisplayText";
 import {
+  attentionConversationIds,
   buildConversationSections,
   type ConversationSection,
 } from "./conversationSections";
+import { ConversationSectionHeading } from "./ConversationSectionHeading";
+import { useCollapsedConversationSections } from "./useCollapsedConversationSections";
 
 /** Render grouped conversation cards on the dashboard home page. */
 export function ConversationHomeList(props: {
@@ -37,6 +39,8 @@ export function ConversationHomeList(props: {
   timeZone: string;
   waitingConversationIds: ReadonlySet<string>;
 }) {
+  const { collapsedKeys, toggle: toggleSection } =
+    useCollapsedConversationSections();
   const [archivedConversation, setArchivedConversation] =
     useState<Conversation>();
   const [archiveError, setArchiveError] = useState<{
@@ -83,6 +87,10 @@ export function ConversationHomeList(props: {
   }
 
   const sections = buildConversationSections(props.conversations, {
+    attentionIds: attentionConversationIds(
+      props.waitingConversationIds,
+      props.finishedConversationIds,
+    ),
     nowMs: Date.now(),
     timeZone: props.timeZone,
   });
@@ -91,10 +99,12 @@ export function ConversationHomeList(props: {
       <div aria-label="Your conversations" className="grid gap-5" role="list">
         {sections.map((section) => (
           <ConversationCardSection
+            collapsed={collapsedKeys.has(section.key)}
             finishedConversationIds={props.finishedConversationIds}
             key={section.key}
             onArchiveError={handleArchiveError}
             onArchived={handleArchived}
+            onToggle={() => toggleSection(section.key)}
             waitingConversationIds={props.waitingConversationIds}
             section={section}
           />
@@ -167,34 +177,42 @@ function ConversationCardLoading(props: { index: number }) {
 }
 
 function ConversationCardSection(props: {
+  collapsed: boolean;
   finishedConversationIds: ReadonlySet<string>;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  onToggle(): void;
   section: ConversationSection;
   waitingConversationIds: ReadonlySet<string>;
 }) {
   return (
     <section aria-labelledby={`conversation-section-${props.section.key}`}>
-      <h3
-        className="mb-2 mt-0 px-1 font-sans text-xs font-medium text-dashboard-text-muted"
+      <ConversationSectionHeading
+        className={cn("px-1", !props.collapsed && "mb-2")}
+        collapsed={props.collapsed}
+        count={props.section.conversations.length}
         id={`conversation-section-${props.section.key}`}
-      >
-        {props.section.label}
-      </h3>
-      <div className="grid gap-2">
-        {props.section.conversations.map((conversation) => (
-          <ConversationCard
-            conversation={conversation}
-            finishedSinceSeen={props.finishedConversationIds.has(
-              conversation.id,
-            )}
-            key={conversation.id}
-            onArchiveError={props.onArchiveError}
-            onArchived={props.onArchived}
-            waitingOnViewer={props.waitingConversationIds.has(conversation.id)}
-          />
-        ))}
-      </div>
+        label={props.section.label}
+        onToggle={props.onToggle}
+      />
+      {props.collapsed ? null : (
+        <div className="grid gap-2">
+          {props.section.conversations.map((conversation) => (
+            <ConversationCard
+              conversation={conversation}
+              finishedSinceSeen={props.finishedConversationIds.has(
+                conversation.id,
+              )}
+              key={conversation.id}
+              onArchiveError={props.onArchiveError}
+              onArchived={props.onArchived}
+              waitingOnViewer={props.waitingConversationIds.has(
+                conversation.id,
+              )}
+            />
+          ))}
+        </div>
+      )}
     </section>
   );
 }
@@ -272,11 +290,10 @@ function ConversationCard(props: {
       </div>
       {conversation.activityPreview ? (
         <p className="relative z-[1] m-0 line-clamp-2 font-sans text-sm leading-relaxed text-dashboard-text-subtle pointer-events-none">
-          <MentionText
-            mentions={conversation.activityPreview.mentions ?? []}
-            text={formatConversationActivityPreview(
-              conversation.activityPreview.text,
-            )}
+          <DisplayText
+            inline
+            mentions={conversation.activityPreview.mentions}
+            text={conversation.activityPreview.text}
           />
         </p>
       ) : (

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,
@@ -94,6 +89,12 @@ import {
 import { ChatLayout } from "./ChatLayout";
 import { ComposerDock } from "./ComposerDock";
 import { ConversationReviewBar } from "../review-desk/ConversationReviewBar";
+import { useReviewItemData } from "../review-desk/queries";
+import {
+  latestReviewItemId,
+  reviewItemWaitsForAnswer,
+} from "../review-desk/reviewItemFormat";
+import { useConfirmUnsentAnswers } from "../review-desk/UnsentAnswers";
 import { Transcript } from "./TranscriptView";
 import { TranscriptLoading } from "./TranscriptLoading";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
@@ -197,8 +198,8 @@ export function ConversationPage(props: {
     () => committedMessageIds(detail.data?.events),
     [detail.data?.events],
   );
-  const userInputRequest = useMemo(
-    () => openUserInputRequest(detail.data?.events),
+  const reviewItemId = useMemo(
+    () => latestReviewItemId(detail.data?.events),
     [detail.data?.events],
   );
   // Cancel needs the latest mailbox watermark, but not as a render prop. Live
@@ -484,6 +485,7 @@ export function ConversationPage(props: {
               // every 2s; a prop would bust footer memo while the reader types.
               pendingGeneratedAtRef={pendingGeneratedAtRef}
               pendingMessages={detail.pendingMessages}
+              reviewItemId={reviewItemId}
               // Without live history, an inline send would never leave the
               // transcript tail. A started Turn reads a new send only later.
               // Keep those sends in the queue. An earlier inline send that
@@ -494,7 +496,6 @@ export function ConversationPage(props: {
                 detail.inlineMessages.length === 0
               }
               stoppable={live}
-              userInputRequest={userInputRequest}
             />
           ) : undefined
         }
@@ -578,6 +579,8 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   pendingAuthorization?: ConversationPendingMessagesReport["authorization"];
   pendingGeneratedAtRef: { current: string | undefined };
   pendingMessages: readonly ConversationMailboxMessage[];
+  /** The last Review item that Junior added in the transcript. */
+  reviewItemId?: string;
   /**
    * True when history is live and no Turn has started, so the next Turn will
    * read a new send at once.
@@ -585,10 +588,11 @@ 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);
+  // A message closes the review items that it answers. Ask before it drops
+  // answers that the reader did not send.
+  const unsentAnswers = useConfirmUnsentAnswers();
   const stopTurn = useStopConversationTurn(props.conversationId);
   const stopTurnRef = useRef(stopTurn);
   stopTurnRef.current = stopTurn;
@@ -598,6 +602,31 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   const [editTargetInboundMessageId, setEditTargetInboundMessageId] =
     useState<string>();
   const [queueActionError, setQueueActionError] = useState<string>();
+  // While Junior waits for an answer, hide the message box, the review bar,
+  // and the queued messages, so the reader answers in the question and does
+  // not type the answer as a new message.
+  // Dismiss on the question closes the item and shows the message box again.
+  // The message box stays mounted, so its text and images stay, and it does
+  // not hide while it has focus.
+  const reviewItem = useReviewItemData(props.reviewItemId).data;
+  const [composerShownForItemId, setComposerShownForItemId] =
+    useState<string>();
+  const [composerFocused, setComposerFocused] = useState(false);
+  const question =
+    reviewItem &&
+    !props.stoppable &&
+    !composerFocused &&
+    reviewItemWaitsForAnswer(reviewItem) &&
+    composerShownForItemId !== reviewItem.id
+      ? reviewItem
+      : undefined;
+  // The message box can show only because it has focus. Using the review bar
+  // or queued messages moves focus out of it, so keep them shown for this item.
+  const keepComposerShown = () => {
+    if (composerFocused && reviewItem && reviewItemWaitsForAnswer(reviewItem)) {
+      setComposerShownForItemId(reviewItem.id);
+    }
+  };
   // Keep submit identity stable across mutation status flips so the memoized
   // composer does not re-render while the reader is still typing.
   const appendMessageRef = useRef(appendMessage);
@@ -665,13 +694,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;
@@ -796,49 +818,61 @@ 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}
+          {/* The review bar and queued messages hide with the message box, so
+              the question is the last thing above the dock. */}
+          <div
+            hidden={Boolean(question)}
+            onFocus={keepComposerShown}
+            onPointerDown={keepComposerShown}
+          >
+            <ConversationReviewBar conversationId={props.conversationId} />
+            <PendingMailboxStack
+              cancelError={cancelError}
+              cancelPending={cancelPendingMessages.isPending}
+              cancelTargetInboundMessageId={cancelTargetInboundMessageId}
+              committedMessageIds={props.committedMessageIds}
+              conversationId={props.conversationId}
+              editTargetInboundMessageId={editTargetInboundMessageId}
+              messages={props.pendingMessages}
+              onCancelMessage={onCancelMessage}
+              onEditMessage={onEditMessage}
+              onLayoutChange={onMailboxLayoutChange}
+              onRetry={onRetry}
+              onSteerMessage={props.stoppable ? onSteerMessage : undefined}
+              steerTargetInboundMessageId={steerTargetInboundMessageId}
+              viewerEmail={viewerEmail}
             />
-          ) : null}
-          <ConversationReviewBar conversationId={props.conversationId} />
-          <PendingMailboxStack
-            cancelError={cancelError}
-            cancelPending={cancelPendingMessages.isPending}
-            cancelTargetInboundMessageId={cancelTargetInboundMessageId}
-            committedMessageIds={props.committedMessageIds}
-            conversationId={props.conversationId}
-            editTargetInboundMessageId={editTargetInboundMessageId}
-            messages={props.pendingMessages}
-            onCancelMessage={onCancelMessage}
-            onEditMessage={onEditMessage}
-            onLayoutChange={onMailboxLayoutChange}
-            onRetry={onRetry}
-            onSteerMessage={props.stoppable ? onSteerMessage : undefined}
-            steerTargetInboundMessageId={steerTargetInboundMessageId}
-            viewerEmail={viewerEmail}
-          />
+          </div>
+          {unsentAnswers.dialog}
         </>
       }
     >
-      <ConversationComposer
-        draftId={props.conversationId}
-        error={
-          queueActionError ??
-          (stopTurn.error ? "Could not stop Junior. Try again." : undefined)
-        }
-        ref={composerRef}
-        label="Continue this conversation"
-        submitLabel="Send"
-        onFocus={onComposerFocus}
-        onStop={props.stoppable ? onStop : undefined}
-        stopPending={stopTurn.isPending}
-        onSubmitStart={onSubmitStart}
-        onSubmit={onSubmit}
-      />
+      <div
+        hidden={Boolean(question)}
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setComposerFocused(false);
+          }
+        }}
+        onFocus={() => setComposerFocused(true)}
+      >
+        <ConversationComposer
+          confirmSubmit={unsentAnswers.confirmSubmit}
+          draftId={props.conversationId}
+          error={
+            queueActionError ??
+            (stopTurn.error ? "Could not stop Junior. Try again." : undefined)
+          }
+          ref={composerRef}
+          label="Continue this conversation"
+          submitLabel="Send"
+          onFocus={onComposerFocus}
+          onStop={props.stoppable ? onStop : undefined}
+          stopPending={stopTurn.isPending}
+          onSubmitStart={onSubmitStart}
+          onSubmit={onSubmit}
+        />
+      </div>
     </ComposerDock>
   );
 });

package/src/client/conversations/ConversationSectionHeading.tsx

@@ -0,0 +1,44 @@
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "../styles";
+
+/** Render a conversation section label that collapses its rows. */
+export function ConversationSectionHeading(props: {
+  className?: string;
+  collapsed: boolean;
+  count: number;
+  id?: string;
+  label: string;
+  onToggle(): void;
+}) {
+  return (
+    <h3
+      className={cn(
+        "m-0 font-sans text-xs font-medium text-dashboard-text-muted",
+        props.className,
+      )}
+      id={props.id}
+    >
+      <button
+        aria-expanded={!props.collapsed}
+        className="flex cursor-pointer items-center gap-1 rounded-sm border-0 bg-transparent p-0 font-[inherit] text-inherit transition-colors hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+        onClick={props.onToggle}
+        type="button"
+      >
+        <ChevronRight
+          aria-hidden="true"
+          className={cn(
+            "size-3 shrink-0 transition-transform motion-reduce:transition-none",
+            !props.collapsed && "rotate-90",
+          )}
+        />
+        {props.label}
+        {props.collapsed ? (
+          <span className="tabular-nums text-dashboard-text-faint">
+            {props.count}
+          </span>
+        ) : null}
+      </button>
+    </h3>
+  );
+}

package/src/client/conversations/ConversationSidebar.tsx

@@ -14,9 +14,12 @@ import type { Conversation } from "../types";
 import { Notice, NoticeAction } from "../components/Notice";
 import { AnimatedList } from "./AnimatedList";
 import {
+  attentionConversationIds,
   buildConversationSections,
   type ConversationSection,
 } from "./conversationSections";
+import { ConversationSectionHeading } from "./ConversationSectionHeading";
+import { useCollapsedConversationSections } from "./useCollapsedConversationSections";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { SearchInput } from "../components/SearchInput";
 import { Button } from "../components/ui/button";
@@ -30,7 +33,15 @@ import { ConversationSidebarAnnotations } from "./ConversationMeta";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 
 type ConversationSidebarEntry =
-  | { first: boolean; key: string; kind: "section"; label: string }
+  | {
+      collapsed: boolean;
+      count: number;
+      first: boolean;
+      key: string;
+      kind: "section";
+      label: string;
+      sectionKey: string;
+    }
   | { conversation: Conversation; key: string; kind: "conversation" };
 
 // Tracks the attempted direction alongside the conversation so a failed
@@ -78,17 +89,30 @@ export function ConversationSidebar(props: {
     );
     setArchivedConversation(conversation);
   }, []);
-  // Rebuild section rows only when the feed or timezone changes. Avoid fresh
-  // Date.now() arrays on unrelated parent renders while the reader is scrolling.
+  const { collapsedKeys, toggle: toggleSection } =
+    useCollapsedConversationSections();
+  // Rebuild section rows only when their inputs change. Avoid fresh Date.now()
+  // arrays on unrelated parent renders while the reader is scrolling.
   const entries = useMemo(
     () =>
       conversationSidebarEntries(
         buildConversationSections(props.conversations, {
+          attentionIds: attentionConversationIds(
+            props.waitingConversationIds,
+            props.finishedConversationIds,
+          ),
           nowMs: Date.now(),
           timeZone: props.timeZone,
         }),
+        collapsedKeys,
       ),
-    [props.conversations, props.timeZone],
+    [
+      collapsedKeys,
+      props.conversations,
+      props.finishedConversationIds,
+      props.timeZone,
+      props.waitingConversationIds,
+    ],
   );
   return (
     <aside
@@ -170,14 +194,13 @@ export function ConversationSidebar(props: {
             items={entries}
             renderItem={(entry) =>
               entry.kind === "section" ? (
-                <h3
-                  className={cn(
-                    "m-0 px-3 pb-1 font-sans text-xs font-medium text-dashboard-text-muted",
-                    entry.first ? "pt-1" : "pt-3",
-                  )}
-                >
-                  {entry.label}
-                </h3>
+                <ConversationSectionHeading
+                  className={cn("px-3 pb-1", entry.first ? "pt-1" : "pt-3")}
+                  collapsed={entry.collapsed}
+                  count={entry.count}
+                  label={entry.label}
+                  onToggle={() => toggleSection(entry.sectionKey)}
+                />
               ) : (
                 <ConversationSidebarRow
                   conversation={entry.conversation}
@@ -253,20 +276,27 @@ function ConversationRowsLoading() {
 
 function conversationSidebarEntries(
   sections: ConversationSection[],
+  collapsedKeys: ReadonlySet<string>,
 ): ConversationSidebarEntry[] {
-  return sections.flatMap((section, index) => [
-    {
-      first: index === 0,
-      key: `section-${section.key}`,
-      kind: "section" as const,
-      label: section.label,
-    },
-    ...section.conversations.map((conversation) => ({
-      conversation,
-      key: `conversation-${conversation.id}`,
-      kind: "conversation" as const,
-    })),
-  ]);
+  return sections.flatMap((section, index) => {
+    const collapsed = collapsedKeys.has(section.key);
+    return [
+      {
+        collapsed,
+        count: section.conversations.length,
+        first: index === 0,
+        key: `section-${section.key}`,
+        kind: "section" as const,
+        label: section.label,
+        sectionKey: section.key,
+      },
+      ...(collapsed ? [] : section.conversations).map((conversation) => ({
+        conversation,
+        key: `conversation-${conversation.id}`,
+        kind: "conversation" as const,
+      })),
+    ];
+  });
 }
 
 const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {

package/src/client/conversations/ConversationTranscript.tsx

@@ -360,7 +360,7 @@ function TranscriptEntryList(props: {
           knownKeys: activityKeys.current,
         });
         rows.push(
-          <TranscriptRow indent key={activityKey}>
+          <TranscriptRow anchorKey={activityKey} indent key={activityKey}>
             <TranscriptActivityGroup
               entries={visibleEntries}
               renderEntry={renderEntry}
@@ -372,8 +372,9 @@ function TranscriptEntryList(props: {
     }
 
     if (!search.active || entryMatchesSearch(entry, search.normalizedQuery)) {
+      const rowKey = `${props.keyPrefix}:${entry.key}`;
       rows.push(
-        <TranscriptRow key={`${props.keyPrefix}:${entry.key}`}>
+        <TranscriptRow anchorKey={rowKey} key={rowKey}>
           {renderEntry(entry)}
         </TranscriptRow>,
       );

package/src/client/conversations/ConversationWatches.tsx

@@ -21,6 +21,7 @@ import {
   type ConversationWatch,
 } from "@sentry/junior/api/schema";
 
+import { DisplayText } from "../display-text/DisplayText";
 import { formatTime } from "../format";
 import { fetchDashboardJson } from "../http";
 import { dashboardDisclosureChevronClass } from "../styles";
@@ -106,7 +107,9 @@ function WatchRow(props: { watch: ConversationWatch }) {
       {/* Indent under the title: icon column, column gap, and row padding. */}
       <div className="grid min-w-0 gap-1.5 pb-2 pl-9 pr-1.5 pt-0.5 text-xs leading-4 text-dashboard-text-muted">
         {watch.intent ? (
-          <p className="m-0 break-words">{watch.intent}</p>
+          <p className="m-0 break-words">
+            <DisplayText inline text={watch.intent} />
+          </p>
         ) : null}
         {watch.firesAt ? (
           <p className="m-0">

package/src/client/conversations/ConversationWorkspace.tsx

@@ -16,11 +16,16 @@ import {
   type PendingArchiveConversationUpdate,
 } from "./queries";
 import { conversationPath, NEW_CONVERSATION_PATH } from "./conversationRoutes";
+import {
+  attentionConversationIds,
+  attentionFirst,
+} from "./conversationSections";
 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 { UnsentAnswersProvider } from "../review-desk/UnsentAnswers";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
 const CONVERSATION_PAGE_SIZE = 20;
@@ -51,10 +56,30 @@ export function ConversationWorkspace() {
     if (selectedId) navigate(NEW_CONVERSATION_PATH);
   };
 
+  const waitingConversationIds = useWaitingConversationIds();
+  const { finishedConversationIds, markRead } =
+    useConversationFinishedIndicators(
+      conversations,
+      selectedId,
+      Boolean(feed.data),
+      !search,
+    );
+
   const totalPages = pageCount(conversations.length, CONVERSATION_PAGE_SIZE);
   const pagedConversations = useMemo(
-    () => pageItems(conversations, page, CONVERSATION_PAGE_SIZE),
-    [conversations, page],
+    () =>
+      pageItems(
+        attentionFirst(
+          conversations,
+          attentionConversationIds(
+            waitingConversationIds,
+            finishedConversationIds,
+          ),
+        ),
+        page,
+        CONVERSATION_PAGE_SIZE,
+      ),
+    [conversations, finishedConversationIds, page, waitingConversationIds],
   );
   useEffect(() => {
     setPage(1);
@@ -62,14 +87,6 @@ export function ConversationWorkspace() {
   useEffect(() => {
     if (page > totalPages) setPage(totalPages);
   }, [page, totalPages]);
-  const waitingConversationIds = useWaitingConversationIds();
-  const { finishedConversationIds, markRead } =
-    useConversationFinishedIndicators(
-      conversations,
-      selectedId,
-      Boolean(feed.data),
-      !search,
-    );
 
   const createView = (
     <NewConversationView
@@ -145,21 +162,22 @@ export function ConversationWorkspace() {
         aria-label="Selected conversation"
         className="grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-dashboard-bg"
       >
-        <ConversationPage
-          key={selectedId}
-          conversationId={selectedId}
-          data={
-            feed.data
-              ? {
-                  conversations: feed.data,
-                }
-              : undefined
-          }
-          onRead={markRead}
-          pendingArchiveUpdate={pendingArchiveUpdates.find(
-            (update) => update.conversationId === selectedId,
-          )}
-        />
+        <UnsentAnswersProvider conversationId={selectedId} key={selectedId}>
+          <ConversationPage
+            conversationId={selectedId}
+            data={
+              feed.data
+                ? {
+                    conversations: feed.data,
+                  }
+                : undefined
+            }
+            onRead={markRead}
+            pendingArchiveUpdate={pendingArchiveUpdates.find(
+              (update) => update.conversationId === selectedId,
+            )}
+          />
+        </UnsentAnswersProvider>
       </section>
     </div>
   );