@sentry/junior-dashboard 0.273.0 → 0.275.0

package/src/client/conversations/ConversationReplyFooter.tsx

@@ -0,0 +1,342 @@
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import type {
+  ConversationDetailReport,
+  ConversationPendingMessagesReport,
+  InputImage,
+} from "@sentry/junior/api/schema";
+
+import { useDashboardCoreData } from "../api";
+import { useReviewItemData } from "../review-desk/queries";
+import { reviewItemWaitsForAnswer } from "../review-desk/reviewItemFormat";
+import { useConfirmUnsentAnswers } from "../review-desk/UnsentAnswers";
+import { readStoredComposerImages } from "./ComposerImages";
+import { ComposerDock } from "./ComposerDock";
+import {
+  ConversationComposer,
+  restoreStoredDraftText,
+  type ConversationComposerHandle,
+} from "./ConversationComposer";
+import type { ConversationMailboxMessage } from "./conversationOutbox";
+import { PendingAuthorization } from "./ConversationMeta";
+import { PendingMailboxStack } from "./PendingMailboxStack";
+import {
+  useAppendConversationMessage,
+  useCancelConversationPendingMessages,
+  useSteerConversationPendingMessages,
+  useStopConversationTurn,
+} from "./queries";
+
+/**
+ * Own mutation state and mailbox chrome outside the page tree that re-renders
+ * on every live transcript poll. Keeps composer props stable while typing.
+ *
+ * Memoized so metadata-only polls that keep mailbox identity stable skip the
+ * footer tree. Fast chat UIs isolate the composer the same way.
+ */
+export const ConversationReplyFooter = memo(ReplyFooter);
+
+function ReplyFooter(props: {
+  authors?: ConversationDetailReport["authors"];
+  committedMessageIds: readonly string[];
+  conversationId: string;
+  onPinRequest: () => void;
+  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.
+   */
+  sendsInline: boolean;
+  /** True while the conversation has a Turn that a stop can end. */
+  stoppable: boolean;
+}) {
+  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;
+  const cancelPendingMessages = useCancelConversationPendingMessages(
+    props.conversationId,
+  );
+  const [editTargetInboundMessageId, setEditTargetInboundMessageId] =
+    useState<string>();
+  const [queueActionError, setQueueActionError] = useState<string>();
+  // While Junior waits for an answer, hide the message box 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 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);
+  appendMessageRef.current = appendMessage;
+  const cancelPendingMessagesRef = useRef(cancelPendingMessages);
+  cancelPendingMessagesRef.current = cancelPendingMessages;
+  const onPinRequestRef = useRef(props.onPinRequest);
+  onPinRequestRef.current = props.onPinRequest;
+  const pendingMessageVersion = props.pendingMessages
+    .map((message) =>
+      [
+        message.inboundMessageId,
+        message.messageId,
+        message.clientStatus,
+        message.delivery,
+      ].join(":"),
+    )
+    .join("|");
+  const pendingMessageVersionRef = useRef(pendingMessageVersion);
+  useEffect(() => {
+    if (pendingMessageVersionRef.current === pendingMessageVersion) return;
+    pendingMessageVersionRef.current = pendingMessageVersion;
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, [pendingMessageVersion]);
+  // No Turn runs and nothing waits in the queue, so the next send would
+  // leave the queue almost at once. Show it in the transcript instead. A
+  // conversation can be active before its Turn starts; that still counts.
+  const committedIds = new Set(props.committedMessageIds);
+  const sendInlineRef = useRef(false);
+  sendInlineRef.current =
+    props.sendsInline &&
+    !props.pendingMessages.some(
+      (message) => !committedIds.has(message.messageId),
+    );
+  const onSubmit = useCallback(
+    async (message: string, idempotencyKey: string, images?: InputImage[]) => {
+      await appendMessageRef.current.mutateAsync({
+        idempotencyKey,
+        inline: sendInlineRef.current,
+        message,
+        images,
+      });
+    },
+    [],
+  );
+  const onRetry = useCallback((message: ConversationMailboxMessage) => {
+    if (!message.idempotencyKey || (!message.text && !message.images?.length))
+      return;
+    void appendMessageRef.current.mutateAsync({
+      idempotencyKey: message.idempotencyKey,
+      message: message.text ?? "",
+      images: message.images,
+    });
+  }, []);
+  const onSubmitStart = useCallback(() => {
+    // Keep an in-flight remove intact so optimistic cache rollback stays coherent.
+    if (!cancelPendingMessagesRef.current.isPending) {
+      cancelPendingMessagesRef.current.reset();
+    }
+    if (!stopTurnRef.current.isPending) stopTurnRef.current.reset();
+    setQueueActionError(undefined);
+    onPinRequestRef.current();
+  }, []);
+  const cancellableMessageIds = props.pendingMessages
+    .filter((message) => message.clientStatus === undefined)
+    .map((message) => message.inboundMessageId);
+  const onCancelMessage = useCallback(
+    (message: ConversationMailboxMessage) => {
+      const receivedBefore = props.pendingGeneratedAtRef.current;
+      if (!receivedBefore) return;
+      cancelPendingMessagesRef.current.mutate({
+        inboundMessageIds: [message.inboundMessageId],
+        receivedBefore,
+      });
+    },
+    [props.pendingGeneratedAtRef],
+  );
+  const cancelTargetInboundMessageId =
+    cancelPendingMessages.variables?.inboundMessageIds[0];
+  const cancelError = Boolean(
+    cancelPendingMessages.error &&
+    cancelPendingMessages.variables?.inboundMessageIds.some((id) =>
+      cancellableMessageIds.includes(id),
+    ),
+  );
+
+  // Edit uses its own cancel mutation so remove errors stay on remove.
+  const editCancel = useCancelConversationPendingMessages(props.conversationId);
+  const editCancelRef = useRef(editCancel);
+  editCancelRef.current = editCancel;
+  const editingRef = useRef(false);
+  const composerRef = useRef<ConversationComposerHandle>(null);
+  const viewerEmail = useDashboardCoreData().data?.me.user.email;
+  const onEditMessage = useCallback(
+    async (message: ConversationMailboxMessage) => {
+      const receivedBefore = props.pendingGeneratedAtRef.current;
+      // The image read runs before the cancel starts, so isPending alone does
+      // not stop a second click.
+      if (!receivedBefore || editingRef.current) return;
+      editingRef.current = true;
+      const inboundMessageId = message.inboundMessageId;
+      setEditTargetInboundMessageId(inboundMessageId);
+      setQueueActionError(undefined);
+      try {
+        // Read images first. A failed read must leave the message queued.
+        const images = await readStoredComposerImages(
+          props.conversationId,
+          message.attachments,
+        );
+        // The reader left during the read. Keep the message in the queue.
+        if (!composerRef.current) return;
+        // Check before the cancel. After it, images that do not fit are lost.
+        if (!composerRef.current.canRestoreImages(images)) {
+          setQueueActionError("Remove some draft images to edit that message.");
+          return;
+        }
+        const result = await editCancelRef.current.mutateAsync({
+          inboundMessageIds: [inboundMessageId],
+          receivedBefore,
+        });
+        // Junior can read the message before the cancel lands. Then it is
+        // already in the Conversation and there is nothing to edit.
+        if (!result.cancelledInboundMessageIds.includes(inboundMessageId)) {
+          setQueueActionError("Junior already read that message.");
+          return;
+        }
+        const restored = { images, text: message.text ?? "" };
+        if (composerRef.current) {
+          composerRef.current.restoreMessage(restored);
+        } else {
+          // The reader left during the cancel. Keep the text in the saved
+          // draft so it is there when they come back.
+          restoreStoredDraftText(props.conversationId, restored.text);
+        }
+      } catch {
+        setQueueActionError("Could not edit the queued message. Try again.");
+      } finally {
+        editingRef.current = false;
+        setEditTargetInboundMessageId(undefined);
+      }
+    },
+    [props.conversationId, props.pendingGeneratedAtRef],
+  );
+
+  const steerPendingMessages = useSteerConversationPendingMessages(
+    props.conversationId,
+  );
+  const steerPendingMessagesRef = useRef(steerPendingMessages);
+  steerPendingMessagesRef.current = steerPendingMessages;
+  const onSteerMessage = useCallback((message: ConversationMailboxMessage) => {
+    if (steerPendingMessagesRef.current.isPending) return;
+    setQueueActionError(undefined);
+    steerPendingMessagesRef.current.mutate(
+      { inboundMessageIds: [message.inboundMessageId] },
+      {
+        onError: () =>
+          setQueueActionError(
+            "Could not send the queued message now. Try again.",
+          ),
+      },
+    );
+  }, []);
+  const steerTargetInboundMessageId = steerPendingMessages.isPending
+    ? steerPendingMessages.variables?.inboundMessageIds[0]
+    : undefined;
+
+  const onStop = useCallback(async () => {
+    const result = await stopTurnRef.current.mutateAsync();
+    const restored = result.stoppedMessages.map((message) => message.text);
+    return restored.length ? restored.join("\n") : undefined;
+  }, []);
+
+  const onMailboxLayoutChange = useCallback(() => {
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, []);
+  // Mobile keyboard open shrinks the transcript. Focus must re-pin the latest
+  // message so the reader does not stay stuck above the docked composer.
+  const onComposerFocus = useCallback(() => {
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, []);
+
+  return (
+    <ComposerDock
+      above={
+        <>
+          {props.pendingAuthorization ? (
+            <PendingAuthorization authorization={props.pendingAuthorization} />
+          ) : null}
+          {/* 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}
+          >
+            <PendingMailboxStack
+              authors={props.authors}
+              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}
+        </>
+      }
+    >
+      <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/ConversationSidebar.tsx

@@ -1,20 +1,27 @@
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { Archive, ArchiveRestore, CircleAlert, SquarePen } from "lucide-react";
+import {
+  Archive,
+  ArchiveRestore,
+  ChevronRight,
+  CircleAlert,
+  Inbox,
+  LockKeyhole,
+  SquarePen,
+} from "lucide-react";
 import { Link } from "react-router";
 
 import { useArchiveConversation } from "./queries";
 import { conversationPath } from "./conversationRoutes";
 import {
   conversationDisplayTitle,
-  slackLocationLabel,
   visualStatusForConversation,
 } from "../format";
+import { formatCompactAge } from "./conversationAge";
 import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { Notice, NoticeAction } from "../components/Notice";
 import { AnimatedList } from "./AnimatedList";
 import {
-  attentionConversationIds,
   buildConversationSections,
   type ConversationSection,
 } from "./conversationSections";
@@ -29,8 +36,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { ConversationSidebarAnnotations } from "./ConversationMeta";
-import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
+import { Spinner } from "../components/ui/spinner";
+import type { WaitingConversation } from "../review-desk/queries";
 
 type ConversationSidebarEntry =
   | {
@@ -55,11 +62,13 @@ export function ConversationSidebar(props: {
   conversations: Conversation[];
   error?: string;
   finishedConversationIds: ReadonlySet<string>;
+  /** Opened while unread; keeps its unread place until another one opens. */
+  heldConversationId?: string;
   loading: boolean;
   query: string;
   selectedId?: string;
   timeZone: string;
-  waitingConversationIds: ReadonlySet<string>;
+  waitingConversations: ReadonlyMap<string, WaitingConversation>;
   /**
    * `panel` = split-pane dock with internal scroll.
    * `landing` = flow nav under create compose (parent owns scroll).
@@ -97,10 +106,11 @@ export function ConversationSidebar(props: {
     () =>
       conversationSidebarEntries(
         buildConversationSections(props.conversations, {
-          attentionIds: attentionConversationIds(
-            props.waitingConversationIds,
-            props.finishedConversationIds,
-          ),
+          attentionIds: new Set([
+            ...props.waitingConversations.keys(),
+            ...props.finishedConversationIds,
+            ...(props.heldConversationId ? [props.heldConversationId] : []),
+          ]),
           nowMs: Date.now(),
           timeZone: props.timeZone,
         }),
@@ -110,8 +120,9 @@ export function ConversationSidebar(props: {
       collapsedKeys,
       props.conversations,
       props.finishedConversationIds,
+      props.heldConversationId,
       props.timeZone,
-      props.waitingConversationIds,
+      props.waitingConversations,
     ],
   );
   return (
@@ -204,13 +215,13 @@ export function ConversationSidebar(props: {
               ) : (
                 <ConversationSidebarRow
                   conversation={entry.conversation}
-                  finishedSinceSeen={props.finishedConversationIds.has(
-                    entry.conversation.id,
-                  )}
                   onArchiveError={handleArchiveError}
                   onArchived={handleArchived}
                   selected={entry.conversation.id === props.selectedId}
-                  waitingOnViewer={props.waitingConversationIds.has(
+                  unread={props.finishedConversationIds.has(
+                    entry.conversation.id,
+                  )}
+                  waiting={props.waitingConversations.get(
                     entry.conversation.id,
                   )}
                 />
@@ -262,12 +273,15 @@ function ConversationRowsLoading() {
     >
       <span className="sr-only">Loading your conversations</span>
       <Skeleton className="mb-1 ml-2.5 mt-1.5 h-2.5 w-12" />
-      {Array.from({ length: 7 }, (_, index) => (
-        <div className="grid gap-1 rounded-lg px-3 py-2" key={index}>
+      {Array.from({ length: 10 }, (_, index) => (
+        <div
+          className="flex items-center justify-between gap-3 rounded-lg py-2 pl-[1.625rem] pr-3"
+          key={index}
+        >
           <Skeleton
             className={cn("h-4", index % 3 === 0 ? "w-4/5" : "w-3/5")}
           />
-          <Skeleton className="h-3 w-2/5 opacity-70" />
+          <Skeleton className="h-3 w-6 opacity-70" />
         </div>
       ))}
     </div>
@@ -301,11 +315,11 @@ function conversationSidebarEntries(
 
 const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   conversation: Conversation;
-  finishedSinceSeen: boolean;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   selected: boolean;
-  waitingOnViewer: boolean;
+  unread: boolean;
+  waiting?: WaitingConversation;
 }) {
   const archive = useArchiveConversation(props.conversation.id, {
     // Read the attempted direction from the mutation call, not the (possibly
@@ -321,60 +335,82 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
     },
   });
   const status = visualStatusForConversation(props.conversation);
-  const location = slackLocationLabel(props.conversation, {
-    includeId: false,
-  });
   const title = conversationDisplayTitle(props.conversation);
-  const hasAnnotations = Boolean(props.conversation.sidebarAnnotations?.length);
-  const isPrivate = props.conversation.visibility === "private";
-  // Linked work is denser and more actionable than channel; hide channel when
-  // annotations own the meta row. Also skip a location that only restates the
-  // title (common for redacted private destinations).
-  const showLocation =
-    Boolean(location) &&
-    !hasAnnotations &&
-    location?.toLocaleLowerCase() !== title.toLocaleLowerCase();
-  const hasMeta = showLocation || hasAnnotations;
+  // Unread and waiting rows read like unread mail: a dot and a bold title.
+  const emphasized = props.unread || Boolean(props.waiting);
   return (
-    <div className="mobile-conversation-row group relative min-w-0">
+    <div
+      className={cn(
+        "mobile-conversation-row group relative min-w-0 rounded-lg transition-colors hover:bg-dashboard-fill-hover",
+        props.selected && "bg-dashboard-surface-active",
+      )}
+    >
       <Link
         aria-current={props.selected ? "page" : undefined}
-        className={cn(
-          "block min-w-0 rounded-lg px-3 py-2 text-inherit no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus max-sm:pr-10",
-          props.selected && "bg-dashboard-surface-active",
-        )}
+        className="grid min-w-0 grid-cols-[0.375rem_minmax(0,1fr)_auto] items-center gap-x-2 rounded-lg px-3 py-1.5 text-inherit no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus max-sm:pr-10"
         to={conversationPath(props.conversation.id)}
       >
-        <div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-x-1.5">
-          <div className="col-start-1 row-start-1 mt-[0.3rem] grid size-3 shrink-0 place-items-center">
-            <ConversationListStatusIcon
-              finishedSinceSeen={props.finishedSinceSeen}
-              isPrivate={isPrivate}
-              status={status}
-              waitingOnViewer={props.waitingOnViewer}
+        <span className="grid place-items-center">
+          {emphasized ? (
+            <span
+              aria-label={props.waiting ? "Waiting on you" : "Unread"}
+              className="size-1.5 shrink-0 rounded-full bg-dashboard-accent"
+              role="img"
+            />
+          ) : props.conversation.visibility === "private" ? (
+            <LockKeyhole
+              aria-label="Private conversation"
+              className="size-3 shrink-0 text-dashboard-text-faint"
             />
-          </div>
-          <div className="col-start-2 row-start-1 min-w-0 truncate font-sans text-sm font-medium leading-snug text-dashboard-text">
-            {title}
-          </div>
-          {hasMeta ? (
-            <div className="col-start-2 row-start-2 mt-1 flex min-w-0 items-center gap-1.5 font-sans text-xs leading-tight text-dashboard-text-muted">
-              {showLocation ? (
-                <span className="truncate">{location}</span>
-              ) : null}
-              <ConversationSidebarAnnotations
-                annotations={props.conversation.sidebarAnnotations}
-              />
-            </div>
           ) : null}
-        </div>
+        </span>
+        <span
+          className={cn(
+            "min-w-0 truncate font-sans text-sm leading-snug",
+            emphasized
+              ? "font-semibold text-dashboard-text"
+              : status === "active"
+                ? "text-dashboard-text"
+                : "text-dashboard-text-muted",
+          )}
+        >
+          {title}
+        </span>
+        <ConversationRowState
+          lastSeenAt={props.conversation.lastSeenAt}
+          status={status}
+        />
       </Link>
+      {props.waiting ? (
+        <Link
+          className="mb-1.5 ml-[1.625rem] mr-3 flex min-w-0 items-center gap-1.5 rounded-md border border-dashboard-border-strong bg-dashboard-surface-raised px-2 py-1 font-sans text-xs text-dashboard-text no-underline transition-colors hover:border-dashboard-border-interactive focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
+          to={conversationPath(props.conversation.id, { reviewItems: true })}
+        >
+          <Inbox
+            aria-hidden="true"
+            className="size-3 shrink-0 text-dashboard-text-muted"
+          />
+          <span className="min-w-0 truncate">{props.waiting.title}</span>
+          {props.waiting.count > 1 ? (
+            <span className="ml-auto shrink-0 text-dashboard-text-faint">
+              +{props.waiting.count - 1} more
+            </span>
+          ) : null}
+          <ChevronRight
+            aria-hidden="true"
+            className={cn(
+              "size-3 shrink-0 text-dashboard-text-muted",
+              props.waiting.count > 1 ? undefined : "ml-auto",
+            )}
+          />
+        </Link>
+      ) : null}
       <Tooltip>
         <TooltipTrigger
           render={
             <button
               aria-label={`${props.conversation.archivedAt ? "Restore" : "Archive"} ${title}`}
-              className="absolute right-1.5 top-1/2 z-10 grid size-7 -translate-y-1/2 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="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"
               disabled={archive.isPending}
               onClick={() =>
                 archive.mutate({
@@ -400,6 +436,29 @@ const ConversationSidebarRow = memo(function ConversationSidebarRow(props: {
   );
 });
 
+/** Show the row age, or the status when the conversation runs or failed. */
+function ConversationRowState(props: {
+  lastSeenAt: string;
+  status: ReturnType<typeof visualStatusForConversation>;
+}) {
+  if (props.status === "active") {
+    return (
+      <Spinner
+        aria-label="Running"
+        className="size-3.5 text-dashboard-text-muted"
+      />
+    );
+  }
+  if (props.status === "failed") {
+    return <span className="font-sans text-xs text-rose-400">Failed</span>;
+  }
+  return (
+    <span className="font-sans text-xs tabular-nums text-dashboard-text-faint">
+      {formatCompactAge(props.lastSeenAt)}
+    </span>
+  );
+}
+
 function ArchiveConversationErrorNotice(props: {
   conversation: Conversation;
   onDismiss(): void;

package/src/client/conversations/ConversationWorkspace.tsx

@@ -24,7 +24,10 @@ 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 {
+  useWaitingConversationIds,
+  useWaitingConversations,
+} from "../review-desk/queries";
 import { UnsentAnswersProvider } from "../review-desk/UnsentAnswers";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
@@ -56,8 +59,9 @@ export function ConversationWorkspace() {
     if (selectedId) navigate(NEW_CONVERSATION_PATH);
   };
 
+  const waitingConversations = useWaitingConversations();
   const waitingConversationIds = useWaitingConversationIds();
-  const { finishedConversationIds, markRead } =
+  const { finishedConversationIds, heldConversationId, markRead } =
     useConversationFinishedIndicators(
       conversations,
       selectedId,
@@ -149,13 +153,14 @@ export function ConversationWorkspace() {
           conversations={conversations}
           error={feed.error?.message}
           finishedConversationIds={finishedConversationIds}
+          heldConversationId={heldConversationId}
           loading={feed.isPending}
           onNewConversation={openCreate}
           onQueryChange={setQuery}
           query={query}
           selectedId={selectedId}
           timeZone={getDashboardTimeZone()}
-          waitingConversationIds={waitingConversationIds}
+          waitingConversations={waitingConversations}
         />
       </div>
       <section