@sentry/junior-dashboard 0.269.0 → 0.271.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

@@ -31,7 +31,9 @@ import { CopyButton } from "../components/CopyButton";
 import { ConversationBrief } from "./ConversationBrief";
 import {
   CONVERSATION_EVENT_PARAM,
+  CONVERSATION_TURN_PARAM,
   parseConversationEventSeq,
+  turnStartedEventSeq,
 } from "./conversationRoutes";
 import {
   ConversationComposer,
@@ -89,6 +91,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";
@@ -132,20 +140,24 @@ export function ConversationPage(props: {
   const selectedEventSeq = parseConversationEventSeq(
     searchParams.get(CONVERSATION_EVENT_PARAM),
   );
+  // A linked Turn opens the event that started it. Until that event is
+  // found, it acts like a linked event that is still loading.
+  const linkedTurnId = searchParams.get(CONVERSATION_TURN_PARAM) ?? undefined;
+  const eventOpen =
+    selectedEventSeq !== undefined || linkedTurnId !== undefined;
   // Event details and turn context show over Conversation details. Closing
   // them shows details again when details are open. A linked event starts
   // with details closed, so closing it does not open a panel nobody chose.
   const [detailsChoice, setDetailsChoice] = useState<boolean | undefined>(() =>
-    selectedEventSeq === undefined ? undefined : false,
+    eventOpen ? false : undefined,
   );
   const detailsOpen = detailsChoice ?? detailsDefaultOpen;
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
-  const eventOpen = selectedEventSeq !== undefined;
   const showDetails = detailsOpen && !eventOpen && !turnContext;
   const [viewState, setView] = useState<TranscriptViewMode>(() =>
-    selectedEventSeq === undefined ? "rich" : "raw",
+    eventOpen ? "raw" : "rich",
   );
-  const view = selectedEventSeq === undefined ? viewState : "raw";
+  const view = eventOpen ? "raw" : viewState;
   const [search, setSearch] = useState("");
   const [pinRequestVersion, setPinRequestVersion] = useState(0);
   const conversationId = props.conversationId;
@@ -192,6 +204,10 @@ export function ConversationPage(props: {
     () => committedMessageIds(detail.data?.events),
     [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
   // polls refresh generatedAt every 2s even when the queue is unchanged.
   const pendingGeneratedAtRef = useRef(detail.pendingGeneratedAt);
@@ -203,6 +219,7 @@ export function ConversationPage(props: {
       setSearchParams(
         (current) => {
           const next = new URLSearchParams(current);
+          next.delete(CONVERSATION_TURN_PARAM);
           if (seq === undefined) next.delete(CONVERSATION_EVENT_PARAM);
           else next.set(CONVERSATION_EVENT_PARAM, String(seq));
           return next;
@@ -214,14 +231,14 @@ export function ConversationPage(props: {
   );
   const onViewChange = useCallback(
     (value: TranscriptViewMode) => {
-      if (value !== "raw" && selectedEventSeq !== undefined) {
+      if (value !== "raw" && eventOpen) {
         setSelectedEventSeq(undefined);
       }
       // Turn context belongs to a message in the Conversation view.
       setTurnContext(undefined);
       setView(value);
     },
-    [selectedEventSeq, setSelectedEventSeq],
+    [eventOpen, setSelectedEventSeq],
   );
   // A linked event can be older than the first page. Load earlier pages until
   // it is present or history ends.
@@ -240,12 +257,41 @@ export function ConversationPage(props: {
   useEffect(() => {
     if (loadLinkedEvent) loadPreviousPageRef.current();
   }, [loadLinkedEvent, oldestLoadedSeq]);
-  // Keep the panel while the transcript or a linked event loads.
+  // Load earlier pages until the linked Turn starts or history ends. Then
+  // replace the Turn link with a link to its first event, or drop it when
+  // history has no such event. A history error keeps the link, so a retry
+  // or reload can still find the Turn.
+  const linkedTurnSeq = linkedTurnId
+    ? turnStartedEventSeq(transcript?.events, linkedTurnId)
+    : undefined;
+  const linkedTurnMissing =
+    linkedTurnId !== undefined &&
+    linkedTurnSeq === undefined &&
+    transcript !== undefined;
+  const loadLinkedTurn =
+    linkedTurnMissing &&
+    detail.hasPreviousPage &&
+    !detail.isLoadingPreviousPage &&
+    !detail.historyError;
+  const linkedTurnNotFound =
+    linkedTurnMissing &&
+    !detail.hasPreviousPage &&
+    !detail.isLoadingPreviousPage;
+  useEffect(() => {
+    if (loadLinkedTurn) loadPreviousPageRef.current();
+  }, [loadLinkedTurn, oldestLoadedSeq]);
+  useEffect(() => {
+    if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
+    else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
+  }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
+  // 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 =
     eventOpen &&
     !selectedEvent &&
     (detail.isPending ||
-      (linkedEventMissing &&
+      linkedTurnSeq !== undefined ||
+      ((linkedEventMissing || linkedTurnMissing) &&
         (detail.hasPreviousPage || detail.isLoadingPreviousPage) &&
         !detail.historyError));
   const showEvent = Boolean(selectedEvent) || eventLoading;
@@ -475,6 +521,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
@@ -568,6 +615,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.
@@ -577,6 +626,9 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   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;
@@ -586,6 +638,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);
@@ -777,41 +854,61 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
           {props.pendingAuthorization ? (
             <PendingAuthorization authorization={props.pendingAuthorization} />
           ) : 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}
-          />
+          {/* 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}
+            />
+          </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">