@sentry/junior-dashboard 0.279.0 → 0.281.0

package/src/client/conversations/ConversationEventLog.tsx

@@ -15,6 +15,7 @@ import {
 } from "./eventLog";
 import { ConversationEventDetails } from "./ConversationEventDetails";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
+import { useVirtualRows } from "./virtualRows";
 
 const rowClass =
   "grid grid-cols-[12ch_minmax(0,1fr)] items-baseline gap-x-3 px-4 @min-[32rem]:grid-cols-[12ch_17ch_minmax(0,1fr)]";
@@ -28,6 +29,8 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   conversation: ConversationTranscript;
   onSearchChange(value: string): void;
   onSelectedSeqChange?(seq: number | undefined): void;
+  /** The row that holds the reader's place, from the scroll owner. */
+  scrollAnchorKey?: () => string | undefined;
   selectedSeq?: number;
 }) {
   const { conversation } = props;
@@ -50,17 +53,46 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   );
   // Resolve the selection from current data so polling cannot leave stale details.
   const selected = events.find((event) => event.seq === selectedSeq);
+  // An arrow key can select a row that mounts only on the next render.
+  const focusSeqRef = useRef<number>(undefined);
+  const focusedSeqRef = useRef<number>(undefined);
+  const indexBySeq = useMemo(
+    () => new Map(visibleRows.map((row, index) => [row.event.seq, index])),
+    [visibleRows],
+  );
+  const indexOf = (seq: number | undefined) =>
+    seq === undefined ? undefined : indexBySeq.get(seq);
+  // The open entry, the focused row, and the row that holds the reader's
+  // place stay mounted.
+  const virtualizer = useVirtualRows({
+    count: visibleRows.length,
+    defaultSize: (sizeClass) => (sizeClass === "metadata" ? 56 : 40),
+    getItemKey: (index) => visibleRows[index]?.event.seq ?? index,
+    keptIndexes: [
+      indexOf(selectedSeq),
+      indexOf(focusedSeqRef.current),
+      indexOf(anchorSeq(props.scrollAnchorKey?.())),
+    ],
+    listRef,
+    sizeClass: (index) => (visibleRows[index]?.metadata ? "metadata" : "plain"),
+  });
+  const virtualRows = virtualizer.getVirtualItems();
   useEffect(() => {
-    if (selectedSeq === undefined || revealedSeqRef.current === selectedSeq) {
-      return;
-    }
+    if (selectedSeq === undefined) return;
     const row = listRef.current?.querySelector(
       `[data-event-seq="${selectedSeq}"]`,
     );
     if (!row) return;
+    if (focusSeqRef.current === selectedSeq) {
+      focusSeqRef.current = undefined;
+      row
+        .querySelector<HTMLButtonElement>("button")
+        ?.focus({ preventScroll: true });
+    }
+    if (revealedSeqRef.current === selectedSeq) return;
     revealedSeqRef.current = selectedSeq;
     row.scrollIntoView({ block: "nearest" });
-  }, [selectedSeq, visibleRows]);
+  }, [selectedSeq, virtualRows]);
 
   if (conversation.eventHistory.status === "expired") {
     return (
@@ -101,84 +133,112 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
         <EventLogColumns />
       </div>
       <div className="font-mono text-xs">
+        {/* Only rows near the viewport mount. Each row is placed at its
+            measured offset, so the list keeps its full height. */}
         <ol
           aria-label="Events"
-          className="m-0 list-none divide-y divide-dashboard-border-subtle p-0"
+          className="relative m-0 list-none p-0"
           ref={listRef}
+          style={{ height: virtualizer.getTotalSize() }}
         >
-          {visibleRows.map(({ event, summary, metadata }, index) => (
-            <li
-              className="scroll-mt-32 scroll-mb-2"
-              data-event-seq={event.seq}
-              data-scroll-anchor={`event:${event.seq}`}
-              key={event.seq}
-            >
-              <button
-                aria-expanded={selectedSeq === event.seq}
-                aria-label={`Event ${event.seq}: ${event.data.type}`}
+          {virtualRows.map((virtualRow) => {
+            const { event, summary, metadata } = visibleRows[virtualRow.index]!;
+            const index = virtualRow.index;
+            return (
+              <li
                 className={cn(
-                  rowClass,
-                  "relative min-h-11 w-full cursor-pointer border-0 bg-transparent py-2 text-left leading-5 hover:bg-dashboard-fill-hover active:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus @min-[32rem]:min-h-9 @min-[32rem]:py-1.5",
-                  selectedSeq === event.seq &&
-                    "bg-dashboard-fill-strong before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-dashboard-accent before:content-['']",
+                  "absolute left-0 top-0 w-full scroll-mt-32 scroll-mb-2",
+                  index > 0 && "border-t border-dashboard-border-subtle",
                 )}
-                onClick={() => {
-                  revealedSeqRef.current = event.seq;
-                  setSelectedSeq(event.seq);
+                data-event-seq={event.seq}
+                data-index={index}
+                data-scroll-anchor={`event:${event.seq}`}
+                key={virtualRow.key}
+                onBlur={() => {
+                  if (focusedSeqRef.current === event.seq) {
+                    focusedSeqRef.current = undefined;
+                  }
                 }}
-                onKeyDown={(keyEvent) => {
-                  if (
-                    keyEvent.altKey ||
-                    keyEvent.ctrlKey ||
-                    keyEvent.metaKey ||
-                    keyEvent.shiftKey ||
-                    (keyEvent.key !== "ArrowUp" && keyEvent.key !== "ArrowDown")
-                  )
-                    return;
-                  keyEvent.preventDefault();
-                  const next =
-                    visibleRows[
-                      index + (keyEvent.key === "ArrowDown" ? 1 : -1)
-                    ];
-                  if (!next) return;
-                  setSelectedSeq(next.event.seq);
-                  listRef.current
-                    ?.querySelector<HTMLButtonElement>(
-                      `[data-event-seq="${next.event.seq}"] button`,
-                    )
-                    ?.focus({ preventScroll: true });
+                onFocus={() => {
+                  focusedSeqRef.current = event.seq;
+                }}
+                ref={virtualizer.measureElement}
+                style={{
+                  transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
                 }}
-                type="button"
               >
-                <time
-                  className="tabular-nums text-dashboard-text-muted"
-                  dateTime={event.createdAt}
-                  title={time.formatTimestamp(event.createdAt)}
-                >
-                  {time.formatClock(event.createdAt)}
-                </time>
-                <span
-                  className={cn("truncate", eventLogTone(event.data))}
-                  title={event.data.type}
+                <button
+                  aria-expanded={selectedSeq === event.seq}
+                  aria-label={`Event ${event.seq}: ${event.data.type}`}
+                  className={cn(
+                    rowClass,
+                    "relative min-h-11 w-full cursor-pointer border-0 bg-transparent py-2 text-left leading-5 hover:bg-dashboard-fill-hover active:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus @min-[32rem]:min-h-9 @min-[32rem]:py-1.5",
+                    selectedSeq === event.seq &&
+                      "bg-dashboard-fill-strong before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-dashboard-accent before:content-['']",
+                  )}
+                  onClick={() => {
+                    revealedSeqRef.current = event.seq;
+                    setSelectedSeq(event.seq);
+                  }}
+                  onKeyDown={(keyEvent) => {
+                    if (
+                      keyEvent.altKey ||
+                      keyEvent.ctrlKey ||
+                      keyEvent.metaKey ||
+                      keyEvent.shiftKey ||
+                      (keyEvent.key !== "ArrowUp" &&
+                        keyEvent.key !== "ArrowDown")
+                    )
+                      return;
+                    keyEvent.preventDefault();
+                    const next =
+                      visibleRows[
+                        index + (keyEvent.key === "ArrowDown" ? 1 : -1)
+                      ];
+                    if (!next) return;
+                    setSelectedSeq(next.event.seq);
+                    // Focus a mounted row now, so the next key press reaches
+                    // it. A row past the mounted range gets focus after it
+                    // mounts.
+                    const nextButton =
+                      listRef.current?.querySelector<HTMLButtonElement>(
+                        `[data-event-seq="${next.event.seq}"] button`,
+                      );
+                    if (nextButton) nextButton.focus({ preventScroll: true });
+                    else focusSeqRef.current = next.event.seq;
+                  }}
+                  type="button"
                 >
-                  <HighlightText text={event.data.type} />
-                </span>
-                <span className="col-span-2 row-start-2 grid min-w-0 gap-0.5 text-dashboard-text @min-[32rem]:col-span-1 @min-[32rem]:row-auto">
-                  <span className="truncate" title={summary}>
-                    <HighlightText text={summary} />
+                  <time
+                    className="tabular-nums text-dashboard-text-muted"
+                    dateTime={event.createdAt}
+                    title={time.formatTimestamp(event.createdAt)}
+                  >
+                    {time.formatClock(event.createdAt)}
+                  </time>
+                  <span
+                    className={cn("truncate", eventLogTone(event.data))}
+                    title={event.data.type}
+                  >
+                    <HighlightText text={event.data.type} />
                   </span>
-                  {metadata ? (
-                    <span
-                      className="truncate text-dashboard-text-muted"
-                      title={metadata}
-                    >
-                      <HighlightText text={metadata} />
+                  <span className="col-span-2 row-start-2 grid min-w-0 gap-0.5 text-dashboard-text @min-[32rem]:col-span-1 @min-[32rem]:row-auto">
+                    <span className="truncate" title={summary}>
+                      <HighlightText text={summary} />
                     </span>
-                  ) : null}
-                </span>
-              </button>
-            </li>
-          ))}
+                    {metadata ? (
+                      <span
+                        className="truncate text-dashboard-text-muted"
+                        title={metadata}
+                      >
+                        <HighlightText text={metadata} />
+                      </span>
+                    ) : null}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
         </ol>
         {visibleRows.length === 0 ? (
           <p className="m-0 px-3 py-6 text-sm text-dashboard-text-muted">
@@ -205,6 +265,11 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   );
 });
 
+/** Read the event seq from a `data-scroll-anchor` key. */
+function anchorSeq(key: string | undefined): number | undefined {
+  return key?.startsWith("event:") ? Number(key.slice(6)) : undefined;
+}
+
 const loadingRowWidths = ["w-3/5", "w-2/5", "w-4/5", "w-1/2", "w-2/3", "w-1/3"];
 
 /** Match the event log toolbar, columns, and rows while the transcript loads. */

package/src/client/conversations/ConversationHeader.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { Menu, PanelRight, ScrollText, X } from "lucide-react";
+import { Menu, PanelRight } from "lucide-react";
 
 import { SearchInput } from "../components/SearchInput";
 import { Button } from "../components/ui/button";
+import { Spinner } from "../components/ui/spinner";
 import { cn } from "../styles";
 import {
   MobileHeaderActionsPortal,
@@ -17,32 +18,29 @@ import {
   type ConversationPinAction,
 } from "./ConversationHeaderActions";
 import { ConversationOverflowMenu } from "./ConversationOverflowMenu";
-import { ShareConversationButton } from "./ShareConversationButton";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 
 /**
- * Show the conversation title bar: where it runs, the title, its cost, and
- * actions. Other run facts, linked work, and the Brief live in Conversation
- * details.
+ * Keep the conversation title and frequently used controls in the header.
+ * Run facts and the Brief live in Conversation details.
  */
 export function ConversationHeader(props: {
   /** Parent chain of a child Conversation. Root Conversations omit it. */
   agentTree?: ReactNode;
+  contextTags?: ReactNode;
   /** A `menu` layout copy action for the `⋯` menu. */
   copyAction?: ReactNode;
-  /** Estimated cost. Desktop only; mobile shows it in Conversation details. */
-  cost?: ReactNode;
   archive: ConversationArchiveAction;
   conversationId: string;
+  /** Estimated cost. Desktop only; mobile shows it in Conversation details. */
+  cost?: ReactNode;
   detailsOpen: boolean;
   onDetailsClick(): void;
   /** Links to the fork source and to forks of this conversation. */
   forks?: ReactNode;
-  /** Mobile only. Desktop shows linked work in Conversation details. */
+  /** Linked work links below the title on mobile. */
   linkedWork?: ReactNode;
   live: boolean;
-  /** Where the conversation runs, such as a Slack channel. */
-  location?: ReactNode;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
   pin: ConversationPinAction;
@@ -121,16 +119,18 @@ export function ConversationHeader(props: {
     searchOpenVisible ||
     props.archive.error ||
     props.pin.error ||
+    Boolean(props.contextTags) ||
     Boolean(props.linkedWork) ||
     Boolean(props.forks) ||
     Boolean(props.agentTree);
 
   const liveIndicator = props.live ? (
-    <span
-      aria-label="Conversation is live"
-      className="inline-flex size-2 shrink-0 rounded-full bg-emerald-300"
-      title="Live"
-    />
+    <span className="inline-flex shrink-0" title="Working">
+      <Spinner
+        aria-label="Working"
+        className="size-3.5 text-dashboard-text-muted motion-safe:[animation-duration:1.25s]"
+      />
+    </span>
   ) : null;
 
   return (
@@ -166,28 +166,53 @@ export function ConversationHeader(props: {
           !showMobileHeader && "hidden md:block",
         )}
       >
-        <div className="hidden h-13 min-w-0 items-center justify-between gap-4 px-4 md:flex">
-          <div className="flex min-w-0 items-center gap-2">
+        <div className="hidden h-13 min-w-0 items-center justify-between gap-1.5 px-1 md:flex">
+          <div className="flex min-w-0 items-center gap-1.5">
             {props.sidebarToggle ? (
               <div className="shrink-0">{props.sidebarToggle}</div>
             ) : null}
-            {props.agentTree ? (
-              <div className="min-w-0 shrink-[2]">{props.agentTree}</div>
-            ) : props.location ? (
-              <span className="shrink-0 text-sm text-dashboard-text-muted">
-                {props.location}
-              </span>
+            {props.view === "raw" ? (
+              // Event log is a debug view reached from the `⋯` menu. The
+              // title leads back to the Conversation.
+              <>
+                <h2 className="m-0 min-w-0 font-display text-base font-medium leading-6 tracking-tight">
+                  <button
+                    className="block max-w-full cursor-pointer truncate text-left text-dashboard-text-muted hover:text-dashboard-text hover:underline"
+                    onClick={() => props.onViewChange("rich")}
+                    title="Back to conversation"
+                    type="button"
+                  >
+                    {props.title}
+                  </button>
+                </h2>
+                <span aria-hidden="true" className="text-dashboard-text-faint">
+                  ›
+                </span>
+                <span
+                  aria-current="page"
+                  className="shrink-0 font-display text-base font-medium leading-6 tracking-tight"
+                >
+                  Event log
+                </span>
+              </>
+            ) : (
+              <h2 className="m-0 min-w-0 truncate font-display text-base font-medium leading-6 tracking-tight">
+                {props.title}
+              </h2>
+            )}
+            {liveIndicator}
+            {props.privacy ? (
+              <span className="shrink-0">{props.privacy}</span>
             ) : null}
-            {props.agentTree || props.location ? (
-              <span aria-hidden="true" className="text-dashboard-text-faint">
-                ›
-              </span>
+            {props.agentTree ? (
+              <div className="min-w-0 max-w-1/3 shrink-[2] border-l border-dashboard-border-subtle pl-2 text-xs text-dashboard-text-muted [&_a]:text-dashboard-text-muted [&_a:hover]:text-dashboard-text">
+                {props.agentTree}
+              </div>
+            ) : props.contextTags ? (
+              <div className="flex h-6 min-w-0 max-w-[min(19rem,60%)] shrink-[2] items-center">
+                {props.contextTags}
+              </div>
             ) : null}
-            <h2 className="m-0 line-clamp-1 min-w-0 font-display text-base font-medium leading-tight tracking-tight">
-              {props.title}
-            </h2>
-            {liveIndicator}
-            <span className="shrink-0">{props.privacy}</span>
           </div>
           <div className="flex shrink-0 items-center gap-0.5">
             {props.cost ? (
@@ -195,41 +220,25 @@ export function ConversationHeader(props: {
                 {props.cost}
               </span>
             ) : null}
-            {props.view === "raw" ? (
-              // Event log is a debug view reached from the menu. Say which
-              // view this is, and give one click back.
-              <Button
-                aria-label="Close event log"
-                className="mr-1 h-8 px-2.5"
-                onClick={() => props.onViewChange("rich")}
-                variant="quiet"
-              >
-                <ScrollText aria-hidden="true" size={14} strokeWidth={2} />
-                Event log
-                <X aria-hidden="true" size={14} strokeWidth={2} />
-              </Button>
-            ) : (
+            {props.view === "raw" ? null : (
               <TranscriptSearchToggle
                 onClick={toggleSearch}
                 open={searchOpenVisible}
               />
             )}
-            <ShareConversationButton
-              key={props.conversationId}
-              conversationId={props.conversationId}
-              layout="icon"
-            />
             <ConversationOverflowMenu>
               {(close) => menuActions("desktop", close)}
             </ConversationOverflowMenu>
-            <HeaderIconButton
-              ref={detailsButtonRef}
-              expanded={detailsOpen}
-              label="Conversation details"
-              onClick={props.onDetailsClick}
-            >
-              <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
-            </HeaderIconButton>
+            {detailsOpen ? null : (
+              <HeaderIconButton
+                ref={detailsButtonRef}
+                expanded={false}
+                label="Conversation details"
+                onClick={props.onDetailsClick}
+              >
+                <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
+              </HeaderIconButton>
+            )}
           </div>
         </div>
         {props.forks ? (
@@ -241,12 +250,12 @@ export function ConversationHeader(props: {
         {props.forks ? (
           <div className="px-4 py-2 md:hidden">{props.forks}</div>
         ) : null}
-        {props.linkedWork ? (
-          <div
-            aria-label="Linked work"
-            className="border-t border-dashboard-border-subtle px-4 py-2.5 md:hidden"
-          >
-            {props.linkedWork}
+        {props.contextTags || props.linkedWork ? (
+          <div className="grid min-w-0 gap-2 px-3 pb-2 pt-1.5 md:hidden">
+            {props.contextTags}
+            {props.linkedWork ? (
+              <div aria-label="Linked work">{props.linkedWork}</div>
+            ) : null}
           </div>
         ) : null}
         {searchOpenVisible ? (

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 
 import { Button, buttonVariants } from "../components/ui/button";
+import { Separator } from "../components/ui/separator";
 import {
   Tooltip,
   TooltipContent,
@@ -38,8 +39,8 @@ export type ConversationPinAction = {
 };
 
 /**
- * Show conversation actions in the `⋯` menu. On desktop the title bar shows
- * search, share, and details, so the menu leaves them out.
+ * Keep secondary conversation actions in the menu, with search and details
+ * available there on mobile too.
  */
 export function ConversationHeaderActions(props: {
   archive: ConversationArchiveAction;
@@ -56,9 +57,10 @@ export function ConversationHeaderActions(props: {
   view: TranscriptViewMode;
 }) {
   const mobile = props.placement === "mobile";
+  const eventLogOpen = props.view === "raw";
   return (
     <div className="grid gap-0.5">
-      {mobile && props.view === "rich" ? (
+      {mobile && !eventLogOpen ? (
         <MenuActionButton
           label={props.searchOpen ? "Hide search" : "Search transcript"}
           onClick={props.onSearchClick}
@@ -71,40 +73,32 @@ export function ConversationHeaderActions(props: {
           )}
         </MenuActionButton>
       ) : null}
-      <MenuActionButton
-        label="Conversation"
-        onClick={() => props.onViewChange("rich")}
-        pressed={props.view === "rich"}
-      >
-        <MessagesSquare aria-hidden="true" size={16} strokeWidth={2} />
-      </MenuActionButton>
-      <MenuActionButton
-        label="Event log"
-        onClick={() => props.onViewChange("raw")}
-        pressed={props.view === "raw"}
-      >
-        <ScrollText aria-hidden="true" size={16} strokeWidth={2} />
-      </MenuActionButton>
       {mobile ? (
-        <ShareConversationButton
-          key={props.conversationId}
-          conversationId={props.conversationId}
-          layout="menu"
-        />
+        <MenuActionButton
+          label="Conversation details"
+          onClick={props.onDetailsClick}
+          pressed={props.detailsOpen}
+        >
+          <Info aria-hidden="true" size={16} strokeWidth={2} />
+        </MenuActionButton>
       ) : null}
+      {/* The copy action is a sibling keyed by the same id. Unique keys keep
+          React from duplicating menu rows on re-render. */}
+      <ShareConversationButton
+        key={`share:${props.conversationId}`}
+        conversationId={props.conversationId}
+      />
       {props.copyAction}
       <MenuActionButton
-        disabled={props.pin.disabled}
-        label={props.pin.pinned ? "Unpin" : "Pin"}
-        onClick={props.pin.onClick}
+        label={eventLogOpen ? "Back to conversation" : "Open event log"}
+        onClick={() => props.onViewChange(eventLogOpen ? "rich" : "raw")}
       >
-        {props.pin.pinned ? (
-          <PinOff aria-hidden="true" size={16} strokeWidth={2} />
+        {eventLogOpen ? (
+          <MessagesSquare aria-hidden="true" size={16} strokeWidth={2} />
         ) : (
-          <Pin aria-hidden="true" size={16} strokeWidth={2} />
+          <ScrollText aria-hidden="true" size={16} strokeWidth={2} />
         )}
       </MenuActionButton>
-      <ArchiveConversationButton {...props.archive} />
       {props.sentryConversationUrl ? (
         <a
           className={buttonVariants({ size: "menu" })}
@@ -116,15 +110,19 @@ export function ConversationHeaderActions(props: {
           Open in Sentry
         </a>
       ) : null}
-      {mobile ? (
-        <MenuActionButton
-          label="Conversation details"
-          onClick={props.onDetailsClick}
-          pressed={props.detailsOpen}
-        >
-          <Info aria-hidden="true" size={16} strokeWidth={2} />
-        </MenuActionButton>
-      ) : null}
+      <Separator className="my-1 bg-dashboard-border-subtle" />
+      <MenuActionButton
+        disabled={props.pin.disabled}
+        label={props.pin.pinned ? "Unpin" : "Pin"}
+        onClick={props.pin.onClick}
+      >
+        {props.pin.pinned ? (
+          <PinOff aria-hidden="true" size={16} strokeWidth={2} />
+        ) : (
+          <Pin aria-hidden="true" size={16} strokeWidth={2} />
+        )}
+      </MenuActionButton>
+      <ArchiveConversationButton {...props.archive} />
     </div>
   );
 }

package/src/client/conversations/ConversationHomeList.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Archive, ArchiveRestore } from "lucide-react";
-import { Link } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 
 import {
   conversationDisplayTitle,
@@ -20,7 +20,11 @@ import { ConversationSidebarAnnotations } from "./ConversationMeta";
 import { ConversationArchiveNotices } from "./ConversationArchiveNotices";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
-import { useArchiveConversation } from "./conversationArchive";
+import {
+  useArchiveConversation,
+  useLatestArchiveStatus,
+  type ArchivedFromConversationState,
+} from "./conversationArchive";
 import { DisplayText } from "../display-text/DisplayText";
 import {
   attentionConversationIds,
@@ -60,6 +64,7 @@ export function ConversationHomeList(props: {
     );
     setArchivedConversation(conversation);
   }, []);
+  useConversationPageArchiveResult(handleArchived, handleArchiveError);
   const notices = (
     <ConversationArchiveNotices
       archivedConversation={archivedConversation}
@@ -116,6 +121,39 @@ export function ConversationHomeList(props: {
   );
 }
 
+/**
+ * Report an archive started on the conversation page, which navigated home
+ * before the request finished.
+ */
+function useConversationPageArchiveResult(
+  onArchived: (conversation: Conversation) => void,
+  onArchiveError: (conversation: Conversation, wasArchiving: boolean) => void,
+) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const conversation = (location.state as ArchivedFromConversationState | null)
+    ?.archivedConversation;
+  const status = useLatestArchiveStatus(conversation?.id);
+  useEffect(() => {
+    if (!conversation || (status !== "success" && status !== "error")) return;
+    if (status === "success") onArchived(conversation);
+    else onArchiveError(conversation, true);
+    // Clear the state so a reload or a later restore does not report again.
+    navigate(
+      { hash: location.hash, search: location.search },
+      { replace: true, state: null },
+    );
+  }, [
+    conversation,
+    location.hash,
+    location.search,
+    navigate,
+    onArchiveError,
+    onArchived,
+    status,
+  ]);
+}
+
 /** Match the grouped card list while its first feed request is pending. */
 export function ConversationHomeListLoading(props: { label?: string }) {
   return (