@sentry/junior-dashboard 0.275.0 → 0.277.0

package/src/client/conversations/ConversationMeta.tsx

@@ -6,7 +6,6 @@ import {
   CircleX,
   GitMerge,
   GitPullRequest,
-  Globe2,
   LockKeyhole,
   TriangleAlert,
 } from "lucide-react";
@@ -72,35 +71,24 @@ export function PendingAuthorization(props: {
   );
 }
 
-/** Show whether the selected conversation is public or private. */
+/**
+ * Mark a private conversation with a lock icon. Public is the default, so it
+ * gets no marker, which keeps the title bar short.
+ */
 export function ConversationPrivacyChip(props: {
   visibility: Conversation["visibility"];
 }) {
-  if (!props.visibility) return null;
-  const isPublic = props.visibility === "public";
-  const Icon = isPublic ? Globe2 : LockKeyhole;
-  const shortLabel = isPublic ? "Public" : "Private";
-  const fullLabel = isPublic ? "Public conversation" : "Private conversation";
-  const detail = isPublic
-    ? "Anyone in this workspace can see this transcript."
-    : "Only members of this conversation can see this transcript.";
+  if (props.visibility !== "private") return null;
+  const label =
+    "Private conversation. Only members of this conversation can see this transcript.";
   return (
     <span
-      className={
-        isPublic
-          ? "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-emphasis bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
-          : "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-strong bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
-      }
+      className="inline-flex items-center text-dashboard-text-muted"
       role="note"
-      title={`${fullLabel}. ${detail}`}
+      title={label}
     >
-      <Icon aria-hidden="true" className="size-3 shrink-0" />
-      <span aria-hidden="true" className="truncate">
-        {shortLabel}
-      </span>
-      <span className="sr-only">
-        {fullLabel}. {detail}
-      </span>
+      <LockKeyhole aria-hidden="true" className="size-3.5 shrink-0" />
+      <span className="sr-only">{label}</span>
     </span>
   );
 }
@@ -568,6 +556,37 @@ export function conversationLocation(
   );
 }
 
+/**
+ * Show the estimated cost of a conversation with its breakdown tooltip.
+ * Returns null until there is a cost or a live run to show.
+ */
+export function conversationCost(
+  conversation: Conversation | undefined,
+  detail: ConversationDetailReport | undefined,
+  tooltipPlacement?: "above" | "below",
+): ReactNode {
+  if (!conversation) return null;
+  const costSummary = summarizeCost(
+    detail?.cumulativeUsage ?? conversation.cumulativeUsage,
+  );
+  const auxiliaryCosts = detail?.auxiliaryCosts ?? conversation.auxiliaryCosts;
+  const live = (detail?.status ?? conversation.status) === "active";
+  if (!costSummary && !auxiliaryCosts && !live) return null;
+  return (
+    <CostMetric
+      auxiliaryCosts={auxiliaryCosts}
+      childAgentTotals={
+        detail?.childAgentTotals ?? conversation.childAgentTotals
+      }
+      live={live}
+      liveModelId={liveModelId(detail)}
+      modelUsage={detail?.modelUsage}
+      summary={costSummary}
+      tooltipPlacement={tooltipPlacement}
+    />
+  );
+}
+
 function conversationStatItems(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
@@ -580,7 +599,6 @@ function conversationStatItems(props: {
     props.detail?.cumulativeUsage ?? props.conversation.cumulativeUsage;
   const tokenSummary =
     summarizeModelUsage(props.detail?.modelUsage) ?? summarizeUsage(usage);
-  const costSummary = summarizeCost(usage);
   const durationLabel = formatConversationDuration(props.conversation);
   const live = (props.detail?.status ?? props.conversation.status) === "active";
   const activeModelId = liveModelId(props.detail);
@@ -589,8 +607,9 @@ function conversationStatItems(props: {
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
   const lastActivityAt = props.conversation.lastSeenAt;
   const location = conversationLocation(props.conversation, props.detail);
+  const cost = conversationCost(props.conversation, props.detail);
   const rawStats: Array<ConversationStatItem | undefined> = [
-    // The desktop title bar shows the location. Mobile hides that bar.
+    // The desktop title bar shows the location and cost. Mobile hides that bar.
     location
       ? {
           content: location,
@@ -660,26 +679,12 @@ function conversationStatItems(props: {
           label: "Tokens",
         }
       : undefined,
-    costSummary ||
-    props.detail?.auxiliaryCosts ||
-    props.conversation.auxiliaryCosts ||
-    live
+    cost
       ? {
-          content: (
-            <CostMetric
-              auxiliaryCosts={
-                props.detail?.auxiliaryCosts ??
-                props.conversation.auxiliaryCosts
-              }
-              childAgentTotals={childAgentTotals}
-              live={live}
-              liveModelId={activeModelId}
-              modelUsage={props.detail?.modelUsage}
-              summary={costSummary}
-            />
-          ),
+          content: cost,
           key: "cost",
           label: "Cost",
+          mobileOnly: true,
         }
       : undefined,
     childAgentTotals

package/src/client/conversations/ConversationPage.tsx

@@ -14,9 +14,10 @@ import type {
 
 import {
   useArchiveConversation,
-  useConversationData,
   type PendingArchiveConversationUpdate,
-} from "./queries";
+} from "./conversationArchive";
+import { useConversationData } from "./queries";
+import { usePinConversation } from "./usePinConversation";
 import { conversationIsResponding } from "./transcript";
 import { buildConversationMarkdown } from "../markdownExport";
 import { CopyButton } from "../components/CopyButton";
@@ -31,6 +32,14 @@ import {
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationReplyFooter } from "./ConversationReplyFooter";
 import { ConversationDetails } from "./ConversationDetails";
+import { AutoArchiveToggle } from "./AutoArchiveToggle";
+import {
+  ConversationMemoryContext,
+  memoryAnchorKey,
+  useConversationMemories,
+  type ConversationMemoryState,
+  type OpenMemoryPopover,
+} from "./conversationMemory";
 import { ConversationEventDetails } from "./ConversationEventDetails";
 import { ConversationEventLogLoading } from "./ConversationEventLog";
 import {
@@ -50,6 +59,7 @@ import { ConversationAgentTree } from "./ConversationAgentTree";
 import { conversationLinks } from "./ConversationLinkedWork";
 import {
   ConversationAnnotations,
+  conversationCost,
   conversationLocation,
   ConversationPrivacyChip,
   ConversationStats,
@@ -74,6 +84,11 @@ import {
   ParticipantAvatarStack,
 } from "../components/ParticipantAvatarStack";
 import { ChatLayout } from "./ChatLayout";
+import {
+  QuickQuestionPanel,
+  QuickQuestionSelectionButton,
+  useQuickQuestionThread,
+} from "./QuickQuestion";
 import { latestReviewItemId } from "../review-desk/reviewItemFormat";
 import { Transcript } from "./TranscriptView";
 import {
@@ -155,7 +170,24 @@ export function ConversationPage(props: {
     );
   }, [setSearchParams]);
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
-  const showDetails = detailsOpen && !eventOpen && !turnContext;
+  const [memoryPopover, setMemoryPopover] = useState<OpenMemoryPopover>();
+  // A memory chosen in details waits here until its transcript row renders.
+  const [memoryJump, setMemoryJump] = useState<OpenMemoryPopover>();
+  // The page stays mounted across Conversations. Memory state belongs to one.
+  const [memoryConversationId, setMemoryConversationId] = useState(
+    props.conversationId,
+  );
+  if (memoryConversationId !== props.conversationId) {
+    setMemoryConversationId(props.conversationId);
+    setMemoryPopover(undefined);
+    setMemoryJump(undefined);
+  }
+  const quickQuestion = useQuickQuestionThread(props.conversationId);
+  // Event details and turn context also show over a Quick question.
+  const showQuickQuestion =
+    Boolean(quickQuestion.thread) && !eventOpen && !turnContext;
+  const showDetails =
+    detailsOpen && !eventOpen && !turnContext && !quickQuestion.thread;
   const [viewState, setView] = useState<TranscriptViewMode>(() =>
     eventOpen ? "raw" : "rich",
   );
@@ -167,7 +199,17 @@ export function ConversationPage(props: {
   const summaries = props.data?.conversations.conversations ?? [];
   const conversations = buildConversations(summaries);
   const detail = useConversationData(conversationId);
+  const memoryList = useConversationMemories(conversationId).data;
+  const memoryState = useMemo<ConversationMemoryState>(
+    () => ({
+      list: memoryList,
+      open: memoryPopover,
+      setOpen: setMemoryPopover,
+    }),
+    [memoryList, memoryPopover],
+  );
   const archive = useArchiveConversation(conversationId);
+  const pin = usePinConversation(conversationId);
   const markRead = useMarkConversationRead(conversationId);
   const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
   const feedConversation = conversations.find(
@@ -288,6 +330,34 @@ export function ConversationPage(props: {
     if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
     else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
   }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
+  // Show a chosen memory at its transcript row. Wait for the first page, then
+  // load earlier pages until the row renders, or stop when history ends.
+  useEffect(() => {
+    if (!memoryJump || !transcript) return;
+    const anchor = pageRef.current?.querySelector(
+      `[data-memory-anchor="${CSS.escape(memoryAnchorKey(memoryJump))}"]`,
+    );
+    if (anchor) {
+      anchor.scrollIntoView({ block: "center" });
+      setMemoryPopover(memoryJump);
+      setMemoryJump(undefined);
+    } else if (
+      detail.hasPreviousPage &&
+      !detail.isLoadingPreviousPage &&
+      !detail.historyError
+    ) {
+      loadPreviousPageRef.current();
+    } else if (!detail.isLoadingPreviousPage) {
+      setMemoryJump(undefined);
+    }
+  }, [
+    detail.hasPreviousPage,
+    detail.historyError,
+    detail.isLoadingPreviousPage,
+    memoryJump,
+    transcript,
+    view,
+  ]);
   // Keep the panel while the transcript or a linked event loads, and for the
   // render before a found Turn link becomes an event link.
   const eventLoading =
@@ -362,7 +432,7 @@ export function ConversationPage(props: {
       ref={pageRef}
       className={cn(
         "grid h-full min-h-0 min-w-0",
-        (showDetails || showEvent || turnContext) &&
+        (showDetails || showEvent || turnContext || showQuickQuestion) &&
           "xl:grid-cols-[minmax(0,1fr)_25rem]",
       )}
     >
@@ -373,10 +443,12 @@ export function ConversationPage(props: {
               agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
             }
             conversationId={conversationId}
+            cost={conversationCost(conversation, detail.data, "below")}
             detailsOpen={showDetails}
             onDetailsClick={() => {
               if (eventOpen) setSelectedEventSeq(undefined);
               setTurnContext(undefined);
+              quickQuestion.close();
               if (showDetails) closeDetails();
               else setDetailsChoice(true);
             }}
@@ -414,6 +486,14 @@ export function ConversationPage(props: {
                 <ConversationAnnotations detail={detail.data} />
               ) : null
             }
+            pin={{
+              // The API lets only participants pin, the same as archive.
+              disabled:
+                !conversation || !detail.data?.isParticipant || pin.isPending,
+              error: Boolean(pin.error),
+              onClick: () => pin.mutate(!conversation?.pinnedAt),
+              pinned: Boolean(conversation?.pinnedAt),
+            }}
             archive={{
               archived: Boolean(conversation?.archivedAt),
               disabled: !conversation || archive.isPending,
@@ -470,31 +550,35 @@ export function ConversationPage(props: {
                       data.
                     </div>
                   ) : null}
-                  <Transcript
-                    hasPreviousPage={detail.hasPreviousPage}
-                    historyError={detail.historyError}
-                    historyVersion={detail.historyVersion}
-                    lastReadSeq={readAtOpen.lastReadSeq}
-                    live={live}
-                    loadingPreviousPage={detail.isLoadingPreviousPage}
-                    onLoadPreviousPage={detail.loadPreviousPage}
-                    onRead={markRead}
-                    onSelectedEventSeqChange={setSelectedEventSeq}
-                    pendingMessages={detail.inlineMessages}
-                    pinRequestVersion={pinRequestVersion}
-                    responding={
-                      !detail.error && conversationIsResponding(transcript)
-                    }
-                    onOpenSubagentTranscript={onOpenSubagentTranscript}
-                    search={search}
-                    onSearchChange={setSearch}
-                    selectedEventSeq={selectedEventSeq}
-                    startAtUnread={readConversationStartPosition() === "unread"}
-                    transcript={transcript}
-                    turnContextPanel={turnContextPanel}
-                    unread={readAtOpen.unread}
-                    view={view}
-                  />
+                  <ConversationMemoryContext value={memoryState}>
+                    <Transcript
+                      hasPreviousPage={detail.hasPreviousPage}
+                      historyError={detail.historyError}
+                      historyVersion={detail.historyVersion}
+                      lastReadSeq={readAtOpen.lastReadSeq}
+                      live={live}
+                      loadingPreviousPage={detail.isLoadingPreviousPage}
+                      onLoadPreviousPage={detail.loadPreviousPage}
+                      onRead={markRead}
+                      onSelectedEventSeqChange={setSelectedEventSeq}
+                      pendingMessages={detail.inlineMessages}
+                      pinRequestVersion={pinRequestVersion}
+                      responding={
+                        !detail.error && conversationIsResponding(transcript)
+                      }
+                      onOpenSubagentTranscript={onOpenSubagentTranscript}
+                      search={search}
+                      onSearchChange={setSearch}
+                      selectedEventSeq={selectedEventSeq}
+                      startAtUnread={
+                        readConversationStartPosition() === "unread"
+                      }
+                      transcript={transcript}
+                      turnContextPanel={turnContextPanel}
+                      unread={readAtOpen.unread}
+                      view={view}
+                    />
+                  </ConversationMemoryContext>
                 </>
               )}
             </div>
@@ -532,37 +616,58 @@ export function ConversationPage(props: {
         }
       />
       {showDetails ? (
-        <ConversationDetails
-          brief={detail.data?.brief}
-          conversationId={conversationId}
-          highlightReview={reviewOpen}
-          identity={identity}
-          onClose={closeDetails}
-          onOpenSubagent={setSubagentTarget}
-          links={conversationLinks(detail.data)}
-          overview={
-            hasConversationStats({
-              conversation,
-              detail: detail.data,
-            }) ? (
-              <ConversationStats
-                conversation={conversation}
-                detail={detail.data}
-              />
-            ) : null
-          }
-          usage={
-            hasConversationUsageBreakdown({
-              conversation,
-              detail: detail.data,
-            }) ? (
-              <ConversationUsageBreakdown
-                conversation={conversation}
-                detail={detail.data}
-              />
-            ) : null
-          }
-        />
+        <ConversationMemoryContext value={memoryState}>
+          <ConversationDetails
+            autoArchive={
+              detail.data?.autoArchive === undefined ? null : (
+                <AutoArchiveToggle
+                  autoArchive={detail.data.autoArchive}
+                  conversationId={conversationId}
+                />
+              )
+            }
+            brief={detail.data?.brief}
+            conversationId={conversationId}
+            highlightReview={reviewOpen}
+            identity={identity}
+            onClose={closeDetails}
+            onOpenSubagent={setSubagentTarget}
+            onSelectMemory={(entry) => {
+              // Memory rows show only in the Conversation view, and search
+              // can hide them.
+              if (view !== "rich") onViewChange("rich");
+              setSearch("");
+              setMemoryJump({
+                memoryId: entry.memory.id,
+                source: entry.source,
+                turnId: entry.turnId,
+              });
+            }}
+            links={conversationLinks(detail.data)}
+            overview={
+              hasConversationStats({
+                conversation,
+                detail: detail.data,
+              }) ? (
+                <ConversationStats
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+              ) : null
+            }
+            usage={
+              hasConversationUsageBreakdown({
+                conversation,
+                detail: detail.data,
+              }) ? (
+                <ConversationUsageBreakdown
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+              ) : null
+            }
+          />
+        </ConversationMemoryContext>
       ) : null}
       {showEvent ? (
         <ConversationEventDetails
@@ -584,6 +689,24 @@ export function ConversationPage(props: {
           />
         </TranscriptSearchProvider>
       ) : null}
+      {showQuickQuestion && quickQuestion.thread ? (
+        <QuickQuestionPanel
+          conversationId={conversationId}
+          error={quickQuestion.error}
+          onClose={quickQuestion.close}
+          onSubmit={quickQuestion.submit}
+          pending={quickQuestion.pending}
+          thread={quickQuestion.thread}
+        />
+      ) : null}
+      <QuickQuestionSelectionButton
+        onAsk={(selection) => {
+          if (eventOpen) setSelectedEventSeq(undefined);
+          setTurnContext(undefined);
+          quickQuestion.open(selection);
+        }}
+        rootRef={pageRef}
+      />
       <SubagentTranscriptDrawer
         onClose={() => setSubagentTarget(undefined)}
         target={subagentTarget}

package/src/client/conversations/ConversationSidebar.tsx

@@ -6,11 +6,13 @@ import {
   CircleAlert,
   Inbox,
   LockKeyhole,
+  Pin,
   SquarePen,
 } from "lucide-react";
 import { Link } from "react-router";
 
-import { useArchiveConversation } from "./queries";
+import { useArchiveConversation } from "./conversationArchive";
+import { usePinConversation } from "./usePinConversation";
 import { conversationPath } from "./conversationRoutes";
 import {
   conversationDisplayTitle,
@@ -51,9 +53,12 @@ type ConversationSidebarEntry =
     }
   | { conversation: Conversation; key: string; kind: "conversation" };
 
-// Tracks the attempted direction alongside the conversation so a failed
-// archive can never read the row's already-optimistic archived state.
-type ArchiveErrorState = { conversation: Conversation; wasArchiving: boolean };
+// The title names the attempted action, so a failed archive or pin never
+// reads the row's already-optimistic state.
+type RowActionError = { conversation: Conversation; title: string };
+
+const ROW_ACTION_BUTTON_CLASS =
+  "absolute top-0.5 z-10 grid size-7 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed";
 
 const conversationEntryKey = (entry: ConversationSidebarEntry) => entry.key;
 
@@ -81,23 +86,42 @@ export function ConversationSidebar(props: {
   const isLanding = variant === "landing";
   const [archivedConversation, setArchivedConversation] =
     useState<Conversation>();
-  const [archiveError, setArchiveError] = useState<ArchiveErrorState>();
+  const [rowError, setRowError] = useState<RowActionError>();
   const dismissArchivedConversation = useCallback(
     () => setArchivedConversation(undefined),
     [],
   );
   const handleArchiveError = useCallback(
     (conversation: Conversation, wasArchiving: boolean) => {
-      setArchiveError({ conversation, wasArchiving });
+      setRowError({
+        conversation,
+        title: wasArchiving ? "Could not archive" : "Could not restore",
+      });
+    },
+    [],
+  );
+  const handlePinError = useCallback(
+    (conversation: Conversation, wasPinning: boolean) => {
+      setRowError({
+        conversation,
+        title: wasPinning ? "Could not pin" : "Could not unpin",
+      });
     },
     [],
   );
-  const handleArchived = useCallback((conversation: Conversation) => {
-    setArchiveError((current) =>
+  // A later success on the same row replaces its error notice.
+  const clearRowError = useCallback((conversation: Conversation) => {
+    setRowError((current) =>
       current?.conversation.id === conversation.id ? undefined : current,
     );
-    setArchivedConversation(conversation);
   }, []);
+  const handleArchived = useCallback(
+    (conversation: Conversation) => {
+      clearRowError(conversation);
+      setArchivedConversation(conversation);
+    },
+    [clearRowError],
+  );
   const { collapsedKeys, toggle: toggleSection } =
     useCollapsedConversationSections();
   // Rebuild section rows only when their inputs change. Avoid fresh Date.now()
@@ -217,6 +241,8 @@ export function ConversationSidebar(props: {
                   conversation={entry.conversation}
                   onArchiveError={handleArchiveError}
                   onArchived={handleArchived}
+                  onPinError={handlePinError}
+                  onPinned={clearRowError}
                   selected={entry.conversation.id === props.selectedId}
                   unread={props.finishedConversationIds.has(
                     entry.conversation.id,
@@ -231,7 +257,7 @@ export function ConversationSidebar(props: {
           />
         )}
       </div>
-      {archivedConversation || archiveError ? (
+      {archivedConversation || rowError ? (
         <div
           className={cn(
             // Landing is content-tall (parent scrolls). Keep notices on the
@@ -241,11 +267,11 @@ export function ConversationSidebar(props: {
               : "absolute bottom-[max(0.75rem,env(safe-area-inset-bottom))] left-3 right-3 z-20 grid gap-2",
           )}
         >
-          {archiveError ? (
-            <ArchiveConversationErrorNotice
-              conversation={archiveError.conversation}
-              onDismiss={() => setArchiveError(undefined)}
-              wasArchiving={archiveError.wasArchiving}
+          {rowError ? (
+            <ConversationActionErrorNotice
+              conversation={rowError.conversation}
+              onDismiss={() => setRowError(undefined)}
+              title={rowError.title}
             />
           ) : null}
           {archivedConversation ? (
@@ -317,6 +343,8 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   conversation: Conversation;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  onPinError(conversation: Conversation, wasPinning: boolean): void;
+  onPinned(conversation: Conversation): void;
   selected: boolean;
   unread: boolean;
   waiting?: WaitingConversation;
@@ -334,6 +362,11 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
       if (archived) props.onArchived(props.conversation);
     },
   });
+  const pin = usePinConversation(props.conversation.id, {
+    onError: (pinned) => props.onPinError(props.conversation, pinned),
+    onSuccess: () => props.onPinned(props.conversation),
+  });
+  const pinned = Boolean(props.conversation.pinnedAt);
   const status = visualStatusForConversation(props.conversation);
   const title = conversationDisplayTitle(props.conversation);
   // Unread and waiting rows read like unread mail: a dot and a bold title.
@@ -405,12 +438,39 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
           />
         </Link>
       ) : null}
+      {/* Mobile rows pin from the conversation menu, so only the archive
+          button takes row space there. Archived rows restore before they pin. */}
+      {props.conversation.archivedAt ? null : (
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                aria-label={`${pinned ? "Unpin" : "Pin"} ${title}`}
+                aria-pressed={pinned}
+                className={cn(ROW_ACTION_BUTTON_CLASS, "right-9 max-sm:hidden")}
+                disabled={pin.isPending}
+                onClick={() => pin.mutate(!pinned)}
+                type="button"
+              >
+                <Pin
+                  aria-hidden="true"
+                  fill={pinned ? "currentColor" : "none"}
+                  size={14}
+                />
+              </button>
+            }
+          />
+          <TooltipContent size="compact">
+            {pinned ? "Unpin" : "Pin"}
+          </TooltipContent>
+        </Tooltip>
+      )}
       <Tooltip>
         <TooltipTrigger
           render={
             <button
               aria-label={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
-              className="absolute right-1.5 top-0.5 z-10 grid size-7 cursor-pointer place-items-center rounded-md bg-dashboard-surface-active text-dashboard-text-muted transition hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus sm:pointer-events-none sm:opacity-0 sm:focus:pointer-events-auto sm:focus:opacity-100 sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 disabled:cursor-not-allowed"
+              className={cn(ROW_ACTION_BUTTON_CLASS, "right-1.5")}
               disabled={archive.isPending}
               onClick={() =>
                 archive.mutate({
@@ -459,15 +519,11 @@ function ConversationRowState(props: {
   );
 }
 
-function ArchiveConversationErrorNotice(props: {
+function ConversationActionErrorNotice(props: {
   conversation: Conversation;
   onDismiss(): void;
-  wasArchiving: boolean;
+  title: string;
 }) {
-  const title = conversationDisplayTitle(props.conversation);
-  const actionTitle = props.wasArchiving
-    ? "Could not archive"
-    : "Could not restore";
   return (
     <Notice
       action={
@@ -475,9 +531,9 @@ function ArchiveConversationErrorNotice(props: {
           Dismiss
         </NoticeAction>
       }
-      detail={title}
+      detail={conversationDisplayTitle(props.conversation)}
       icon={CircleAlert}
-      title={actionTitle}
+      title={props.title}
       tone="error"
     />
   );