@sentry/junior-dashboard 0.276.0 → 0.278.0

package/src/client/conversations/transcriptBottomPinning.ts

@@ -20,7 +20,7 @@ import {
 } from "./transcriptScrollAnchor";
 
 const BOTTOM_PROXIMITY_PX = 96;
-const PREVIOUS_PAGE_PROXIMITY_PX = 600;
+const HISTORY_PAGE_PROXIMITY_PX = 600;
 const USER_SCROLL_DELTA_PX = 2;
 // Leave a little earlier context above the "New" marker.
 const UNREAD_START_OFFSET_PX = 48;
@@ -133,8 +133,7 @@ function changesVisibleTranscript(event: ConversationReportEvent): boolean {
     data.type === "subagent" ||
     data.type === "structured_event" ||
     data.type === "attachments_delivered" ||
-    data.type === "compaction" ||
-    data.type === "handoff"
+    data.type === "compaction"
   );
 }
 
@@ -208,18 +207,6 @@ function eventTailVersion(event: ConversationReportEvent | undefined): string {
       ].join(":");
     case "compaction":
       return [data.type, data.summary?.length ?? 0, event.createdAt].join(":");
-    case "handoff":
-      return [
-        data.type,
-        data.modelProfile,
-        data.modelId,
-        data.summary?.length ?? 0,
-        event.createdAt,
-      ].join(":");
-    case "turn_routed":
-      return [data.type, data.turnId, data.modelProfile, data.modelId].join(
-        ":",
-      );
     case "guardian_action_reviewed":
       return [data.type, data.turnId, data.toolCallId, data.decision].join(":");
     case "turn_context":
@@ -262,18 +249,22 @@ export function terminalReplyPinState(input: {
 
 /**
  * Show the jump control only when the reader left the bottom and a newer tail
- * arrived, or when the transcript opened at unread rows. Staying pinned, or
- * intentionally following, must not flash it.
+ * arrived, when the transcript opened at unread rows, or when it does not end
+ * at the latest event. Staying pinned, or intentionally following, must not
+ * flash it.
  */
 export function shouldShowJumpToLatest(input: {
   enabled: boolean;
+  endsAtLatest?: boolean;
   following: boolean;
   hasPendingUpdate: boolean;
   openedAtUnread?: boolean;
 }): boolean {
   return (
     !input.following &&
-    (Boolean(input.openedAtUnread) || (input.enabled && input.hasPendingUpdate))
+    (input.endsAtLatest === false ||
+      Boolean(input.openedAtUnread) ||
+      (input.enabled && input.hasPendingUpdate))
   );
 }
 
@@ -319,6 +310,12 @@ export function programmaticSettleScrollAction(input: {
 export function usePinnedTranscriptBottom(input: {
   conversationId?: string;
   enabled: boolean;
+  /**
+   * False while newer pages are not loaded. The end of the transcript is
+   * then not the latest event, so the reader cannot follow it, and a page
+   * that loads below them does not pull them down.
+   */
+  endsAtLatest?: boolean;
   historyVersion: string;
   juniorMessageVersion: string;
   pinRequestVersion?: number;
@@ -330,6 +327,8 @@ export function usePinnedTranscriptBottom(input: {
   const anchorRef = useRef<HTMLDivElement | null>(null);
   const contentElementRef = useRef<HTMLDivElement | null>(null);
   const enabledRef = useRef(input.enabled);
+  const endsAtLatestRef = useRef(true);
+  endsAtLatestRef.current = input.endsAtLatest ?? true;
   const followingRef = useRef(false);
   const initializedRef = useRef(false);
   const initializedConversationRef = useRef<string | null>(null);
@@ -447,6 +446,7 @@ export function usePinnedTranscriptBottom(input: {
       }
 
       if (intent === "follow") {
+        if (!endsAtLatestRef.current) return;
         setFollowingIntent(true);
         setHasPendingUpdate(false);
         return;
@@ -537,7 +537,7 @@ export function usePinnedTranscriptBottom(input: {
     const snapshot = scrollSnapshot(root);
     previousScrollTopRef.current = snapshot.scrollTop;
     // Unread rows that fit above the bottom leave the reader at the latest.
-    const atBottom = isNearScrollBottom(snapshot);
+    const atBottom = endsAtLatestRef.current && isNearScrollBottom(snapshot);
     setFollowingIntent(atBottom);
     setOpenedAtUnread(!atBottom);
     rememberPlace();
@@ -574,8 +574,13 @@ export function usePinnedTranscriptBottom(input: {
   // reader moved. Then open at the marker, as if it was there at the start.
   const followLatest = useCallback(() => {
     if (awaitingUnreadMarkerRef.current && openAtUnreadMarker()) return;
+    if (!endsAtLatestRef.current) {
+      setFollowingIntent(false);
+      restorePlace();
+      return;
+    }
     scrollToBottom("auto");
-  }, [openAtUnreadMarker, scrollToBottom]);
+  }, [openAtUnreadMarker, restorePlace, scrollToBottom, setFollowingIntent]);
 
   const syncAfterLayoutChange = useCallback(() => {
     if (followingRef.current) {
@@ -749,6 +754,8 @@ export function usePinnedTranscriptBottom(input: {
     const version = input.pinRequestVersion ?? 0;
     if (version === pinRequestVersionRef.current) return;
     pinRequestVersionRef.current = version;
+    // The reader asked for the latest event, not the "New" marker.
+    awaitingUnreadMarkerRef.current = false;
     setFollowingIntent(true);
     setHasPendingUpdate(false);
     scrollToBottom("auto");
@@ -763,6 +770,7 @@ export function usePinnedTranscriptBottom(input: {
       jumpToBottom,
       showJumpToLatest: shouldShowJumpToLatest({
         enabled: input.enabled,
+        endsAtLatest: input.endsAtLatest,
         following,
         hasPendingUpdate,
         openedAtUnread,
@@ -774,14 +782,19 @@ export function usePinnedTranscriptBottom(input: {
       following,
       hasPendingUpdate,
       input.enabled,
+      input.endsAtLatest,
       jumpToBottom,
       openedAtUnread,
     ],
   );
 }
 
-/** Load the previous history page when the reader scrolls near the top. */
-export function useAutoLoadPreviousPage(input: {
+/**
+ * Load the next history page when the reader scrolls near the edge where it
+ * goes: the top for earlier pages, the bottom for newer pages.
+ */
+export function useAutoLoadHistoryPage(input: {
+  edge: "bottom" | "top";
   enabled: boolean;
   historyVersion: string;
   onLoad: () => void;
@@ -803,12 +816,15 @@ export function useAutoLoadPreviousPage(input: {
       },
       {
         root: root && !isWindowRoot(root) ? root : null,
-        rootMargin: `${PREVIOUS_PAGE_PROXIMITY_PX}px 0px 0px 0px`,
+        rootMargin:
+          input.edge === "top"
+            ? `${HISTORY_PAGE_PROXIMITY_PX}px 0px 0px 0px`
+            : `0px 0px ${HISTORY_PAGE_PROXIMITY_PX}px 0px`,
       },
     );
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [input.enabled, input.historyVersion, sentinel]);
+  }, [input.edge, input.enabled, input.historyVersion, sentinel]);
 
   return setSentinel;
 }

package/src/client/conversations/transcriptReadPosition.ts

@@ -17,6 +17,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import {
   conversationReadPositionSchema,
   type ConversationDetailReport,
+  type ConversationEventPage,
   type ConversationReadPosition,
 } from "@sentry/junior/api/schema";
 import { put } from "../http";
@@ -42,6 +43,10 @@ export type TranscriptUnreadRange = { afterSeq: number; throughSeq: number };
 export type ReadPositionAtOpen = {
   lastReadSeq?: number;
   unread?: TranscriptUnreadRange;
+  /** Set when unread events start before the latest page. */
+  unreadCursor?: string;
+  /** The page around `unreadCursor`, when the fetch brought it. */
+  unreadPage?: ConversationEventPage;
 };
 
 /** Edit the browser-only preference for where Conversations open. */
@@ -74,7 +79,9 @@ export function readConversationStartPosition(): ConversationStartPosition {
  * The read position comes from the first detail, which can be a cached copy.
  * The last unread row comes from the first detail fetched in this visit, so a
  * stale cache cannot hide messages that arrived while the reader was away,
- * and later polls cannot add rows that arrived after open.
+ * and later polls cannot add rows that arrived after open. `unreadCursor`
+ * and its page come from that fetch too: a cache from a visit that read to
+ * the end has no cursor, even when more than a page arrived after that visit.
  */
 export function useReadPositionAtOpen(
   detail: DetailAtOpen | undefined,
@@ -83,24 +90,41 @@ export function useReadPositionAtOpen(
 ): ReadPositionAtOpen {
   // Store derived state during render so the first transcript render has it.
   const [opened, setOpened] = useState<{ lastReadSeq?: number }>();
-  const [fetchedEnd, setFetchedEnd] = useState<{ throughSeq?: number }>();
+  const [fetchedEnd, setFetchedEnd] = useState<{
+    throughSeq?: number;
+    unreadCursor?: string;
+    unreadPage?: ConversationEventPage;
+  }>();
   const read =
     opened ??
     (detail ? { lastReadSeq: detail.readPosition?.lastReadSeq } : undefined);
   if (!opened && read) setOpened(read);
   const end =
     fetchedEnd ??
-    (fetched ? { throughSeq: fetched.events.at(-1)?.seq } : undefined);
+    (fetched
+      ? {
+          throughSeq: fetched.events.at(-1)?.seq,
+          unreadCursor: fetched.unreadCursor,
+          unreadPage: fetched.unreadPage,
+        }
+      : undefined);
   if (!fetchedEnd && end) setFetchedEnd(end);
-  return readPositionAtOpen(
-    read?.lastReadSeq,
-    end ? end.throughSeq : detail?.events.at(-1)?.seq,
-  );
+  return {
+    ...readPositionAtOpen(
+      read?.lastReadSeq,
+      end ? end.throughSeq : detail?.events.at(-1)?.seq,
+    ),
+    ...(end?.unreadCursor
+      ? { unreadCursor: end.unreadCursor, unreadPage: end.unreadPage }
+      : undefined),
+  };
 }
 
 type DetailAtOpen = {
   events: readonly { seq: number }[];
   readPosition?: ConversationReadPosition;
+  unreadCursor?: string;
+  unreadPage?: ConversationEventPage;
 };
 
 /** Find the rows after the read position, through the last row at open. */

package/src/client/conversations/transcriptRenderModel.ts

@@ -234,20 +234,7 @@ export function messageRawText(message: TranscriptViewMessage): string {
           .map((attachment) => attachment.filename)
           .join("\n");
       }
-      if (part.event.type !== "handoff") {
-        return ["context compacted", part.event.summary]
-          .filter((line): line is string => line !== undefined)
-          .join("\n");
-      }
-      return [
-        "model handoff",
-        `model ${part.event.modelId}`,
-        `profile ${part.event.modelProfile}`,
-        part.event.summary,
-        part.event.reasoningLevel
-          ? `reasoning ${part.event.reasoningLevel}`
-          : undefined,
-      ]
+      return ["context compacted", part.event.summary]
         .filter((line): line is string => line !== undefined)
         .join("\n");
     })

package/src/client/conversations/transcriptSearch.tsx

@@ -194,17 +194,9 @@ export function entryMatchesSearch(
 
   if (entry.kind === "context") {
     const event = entry.part.event;
-    return event.type === "handoff"
-      ? [
-          "model handoff",
-          event.modelProfile,
-          event.modelId,
-          event.reasoningLevel,
-          event.summary,
-        ].some((value) => textContains(value, normalizedQuery))
-      : ["context compacted", event.summary].some((value) =>
-          textContains(value, normalizedQuery),
-        );
+    return ["context compacted", event.summary].some((value) =>
+      textContains(value, normalizedQuery),
+    );
   }
 
   return false;

package/src/client/conversations/transcriptUnreadHistory.ts

@@ -0,0 +1,248 @@
+/**
+ * Open a long Conversation at the reader's read position.
+ *
+ * The detail holds the latest page of events. When the read position is
+ * older than that page, the transcript starts with the page around the read
+ * position instead: the last read events and the unread events after them.
+ * The first detail fetch of a visit brings that page, so it needs no second
+ * request.
+ * Like earlier pages, newer pages load when the reader scrolls near them, so
+ * the server reads only the pages that the reader reaches.
+ *
+ * The latest page joins the transcript only after the newer pages reach it,
+ * so the transcript never has a gap. Until then the transcript ends with a
+ * row that loads the next newer page. A reader who jumps to the latest skips
+ * the newer pages: the transcript shows the latest page from the detail at
+ * once, and earlier pages load above it as the reader scrolls up. When a
+ * poll skips past the newer pages after they join the latest page, or past a
+ * newer page that has nothing after it, the transcript shows the latest page
+ * in the same way, so it never drops the skipped events.
+ */
+import { useEffect, useMemo, useRef } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import {
+  conversationEventPageSchema,
+  type ConversationDetailReport,
+  type ConversationEventPage,
+  type ConversationReportEvent,
+} from "@sentry/junior/api/schema";
+
+import { fetchDashboardJson } from "../http";
+import { readConversationEvents } from "./queries";
+import {
+  buildUnreadConversationTranscript,
+  conversationHistoryVersion,
+} from "./transcript";
+
+/** The transcript to show and how to load more of it. */
+export type TranscriptHistory = {
+  data: ConversationDetailReport | undefined;
+  hasPreviousPage: boolean;
+  historyError: Error | null;
+  historyVersion: string;
+  isLoadingPreviousPage: boolean;
+  loadPreviousPage: () => void;
+  /** Set while newer pages have not reached the latest page. */
+  newer?: {
+    error: Error | null;
+    /** Load the next newer page, or retry a failed one. */
+    load: () => void;
+    loading: boolean;
+    /** Skip the newer pages and show the latest page. */
+    showLatest: () => void;
+  };
+};
+
+/**
+ * Load the transcript from `unreadCursor`. Returns `undefined` when there is
+ * no cursor, or when the first page fails, so the caller shows the latest
+ * page instead.
+ */
+export function useUnreadHistory(input: {
+  conversationId: string;
+  /** The latest page, from the polled detail. */
+  detail: ConversationDetailReport | undefined;
+  /** `unreadCursor` from the detail when the Conversation opened. */
+  unreadCursor: string | undefined;
+  /** Skip the newer pages. The caller then passes no `unreadCursor`. */
+  onShowLatest: () => void;
+  /** The page around `unreadCursor`, when the detail brought it. */
+  unreadPage?: ConversationEventPage;
+}): (TranscriptHistory & { isPending: boolean }) | undefined {
+  const { conversationId, detail, onShowLatest, unreadCursor, unreadPage } =
+    input;
+  const latestEventsRef = useRef<ConversationReportEvent[]>([]);
+  const latestEvents = useMemo(() => {
+    const kept = keepLatestEvents(latestEventsRef.current, detail?.events);
+    latestEventsRef.current = kept;
+    return kept;
+  }, [detail?.events]);
+  const latestFirstSeq = latestEvents[0]?.seq;
+  const joinedRef = useRef(false);
+  const newer = useInfiniteQuery({
+    // Only the page around the read position loads by itself. The data never
+    // goes stale, so a refetch cannot reload every newer page at once.
+    enabled: Boolean(unreadCursor),
+    staleTime: Infinity,
+    // Each visit starts again from the page around the read position. Pages
+    // from an earlier visit can end at an old latest event, which would
+    // leave a gap before the latest page.
+    gcTime: 0,
+    queryKey: ["conversation", conversationId, "unread", unreadCursor, "newer"],
+    queryFn: ({ pageParam, signal }) =>
+      readConversationEventsFrom(conversationId, pageParam, signal),
+    initialPageParam: { around: unreadCursor ?? "" } as NewerPageParam,
+    // The page that came with the detail. Without it, the query reads it.
+    ...(unreadPage
+      ? {
+          initialData: {
+            pageParams: [{ around: unreadCursor ?? "" }],
+            pages: [unreadPage],
+          },
+        }
+      : undefined),
+    getNextPageParam: (page): NewerPageParam | undefined =>
+      reachesLatest(page, latestFirstSeq) || !page.nextCursor
+        ? undefined
+        : { after: page.nextCursor },
+    retry: false,
+  });
+  const firstNewerPage = newer.data?.pages[0];
+  const earlier = useInfiniteQuery({
+    enabled: false,
+    queryKey: [
+      "conversation",
+      conversationId,
+      "unread",
+      unreadCursor,
+      "earlier",
+    ],
+    queryFn: ({ pageParam, signal }) =>
+      readConversationEvents(conversationId, pageParam, signal),
+    initialPageParam: firstNewerPage?.previousCursor ?? "",
+    getNextPageParam: (page) => page.previousCursor,
+    retry: false,
+  });
+
+  const newerPages = newer.data?.pages;
+  const earlierPages = earlier.data?.pages;
+  const lastNewerPage = newerPages?.at(-1);
+  const reached = lastNewerPage
+    ? reachesLatest(lastNewerPage, latestFirstSeq)
+    : false;
+  if (reached) joinedRef.current = true;
+  // No newer page can fill the gap before the latest page, or the latest
+  // events already on screen would leave until one does.
+  const skipped =
+    lastNewerPage !== undefined &&
+    !reached &&
+    (joinedRef.current || !lastNewerPage.nextCursor);
+  useEffect(() => {
+    if (skipped) onShowLatest();
+  }, [onShowLatest, skipped]);
+  const pages = useMemo(
+    () => [...(earlierPages ?? []), ...(newerPages ?? [])],
+    [earlierPages, newerPages],
+  );
+  const data = useMemo(
+    () =>
+      detail && newerPages
+        ? buildUnreadConversationTranscript(
+            detail,
+            pages,
+            reached ? latestEvents : [],
+          )
+        : undefined,
+    [detail, latestEvents, newerPages, pages, reached],
+  );
+
+  if (!unreadCursor || skipped || (newer.error && !newerPages)) {
+    return undefined;
+  }
+
+  const hasPreviousPage = earlier.data
+    ? earlier.hasNextPage
+    : Boolean(firstNewerPage?.previousCursor);
+  // `cancelRefetch: false` lets a second call join the page read in flight.
+  // By default it cancels that read and starts the same read again.
+  return {
+    data,
+    hasPreviousPage,
+    historyError: earlier.error,
+    historyVersion: conversationHistoryVersion(pages),
+    isLoadingPreviousPage: earlier.isFetchingNextPage,
+    isPending: !newerPages,
+    loadPreviousPage: () => {
+      if (hasPreviousPage) void earlier.fetchNextPage({ cancelRefetch: false });
+    },
+    ...(reached
+      ? undefined
+      : {
+          newer: {
+            error: newer.error,
+            load: () => {
+              if (newer.hasNextPage) {
+                void newer.fetchNextPage({ cancelRefetch: false });
+              }
+            },
+            loading: newer.isFetchingNextPage,
+            showLatest: onShowLatest,
+          },
+        }),
+  };
+}
+
+/**
+ * Keep the events that new events push out of the latest page. Without them,
+ * the latest page would start after the newer pages again, and the transcript
+ * would drop its latest events until one more page loads. A poll that skips
+ * past the kept events starts over from its own events.
+ */
+function keepLatestEvents(
+  kept: ConversationReportEvent[],
+  events: ConversationReportEvent[] | undefined,
+): ConversationReportEvent[] {
+  const firstSeq = events?.[0]?.seq;
+  const keptLastSeq = kept.at(-1)?.seq;
+  if (!events || firstSeq === undefined) return kept;
+  if (keptLastSeq === undefined || firstSeq > keptLastSeq + 1) return events;
+  const slid = kept.filter((event) => event.seq < firstSeq);
+  return slid.length ? [...slid, ...events] : events;
+}
+
+/**
+ * The newer pages reach the latest page when the latest page starts right
+ * after them. Without latest events, they reach it when nothing follows them.
+ */
+function reachesLatest(
+  page: ConversationEventPage,
+  latestFirstSeq: number | undefined,
+): boolean {
+  const lastSeq = page.events.at(-1)?.seq;
+  if (lastSeq === undefined || latestFirstSeq === undefined) {
+    return !page.nextCursor;
+  }
+  return lastSeq + 1 >= latestFirstSeq;
+}
+
+/** The first page is around the read position. The rest follow it. */
+type NewerPageParam = { around: string } | { after: string };
+
+/** Read one bounded page of events around or after a history cursor. */
+function readConversationEventsFrom(
+  conversationId: string,
+  param: NewerPageParam,
+  signal?: AbortSignal,
+): Promise<ConversationEventPage> {
+  const query = new URLSearchParams(param);
+  return fetchDashboardJson(
+    conversationEventPageSchema,
+    `/api/conversations/${encodeURIComponent(conversationId)}/events?${query}`,
+    signal,
+  ).then((page) => {
+    if ("after" in param && page.nextCursor === param.after) {
+      throw new Error("Conversation history cursor did not advance");
+    }
+    return page;
+  });
+}

package/src/client/conversations/usePinConversation.ts

@@ -0,0 +1,88 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type {
+  ConversationDetailReport,
+  ConversationFeed,
+} from "@sentry/junior/api/schema";
+import { pinConversationResponseSchema } from "@sentry/junior/api/schema";
+
+import { patch } from "../http";
+import { conversationDetailQueryKey } from "./queries";
+
+type DetailCache = ConversationDetailReport & { detailEtag?: string };
+
+/**
+ * Pin or unpin one conversation for the viewer. The feed and detail caches
+ * change at once, so the row moves to or from the Pinned section before the
+ * request returns. A failed request puts the old caches back.
+ */
+export function usePinConversation(
+  conversationId: string,
+  options?: { onError?(pinned: boolean): void; onSuccess?(): void },
+) {
+  const queryClient = useQueryClient();
+  const feeds = { queryKey: ["dashboard", "conversations"] };
+  const detailQueryKey = conversationDetailQueryKey(conversationId);
+  const setPinnedAt = (pinnedAt: string | null) => {
+    // Match the API: a pin also restores an archived conversation.
+    const viewerMarks = pinnedAt
+      ? { archivedAt: null, pinnedAt }
+      : { pinnedAt };
+    queryClient.setQueriesData<ConversationFeed>(feeds, (feed) =>
+      feed
+        ? {
+            ...feed,
+            conversations: feed.conversations.map((conversation) =>
+              conversation.conversationId === conversationId
+                ? { ...conversation, ...viewerMarks }
+                : conversation,
+            ),
+          }
+        : feed,
+    );
+    // Clear the etag so the next read gets a full body, not a 304 that keeps
+    // this local value.
+    queryClient.setQueryData<DetailCache>(detailQueryKey, (detail) =>
+      detail ? { ...detail, ...viewerMarks, detailEtag: undefined } : detail,
+    );
+  };
+  return useMutation({
+    mutationFn: (pinned: boolean) =>
+      patch(
+        pinConversationResponseSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/pin`,
+        { pinned },
+      ),
+    onMutate: async (pinned) => {
+      await Promise.all([
+        queryClient.cancelQueries(feeds),
+        queryClient.cancelQueries({ queryKey: detailQueryKey }),
+      ]);
+      const previous = {
+        detail: queryClient.getQueryData<DetailCache>(detailQueryKey),
+        feeds: queryClient.getQueriesData<ConversationFeed>(feeds),
+      };
+      setPinnedAt(pinned ? new Date().toISOString() : null);
+      return previous;
+    },
+    onError: (_error, pinned, previous) => {
+      previous?.feeds.forEach(([queryKey, feed]) => {
+        queryClient.setQueryData(queryKey, feed);
+      });
+      queryClient.setQueryData(detailQueryKey, previous?.detail);
+      options?.onError?.(pinned);
+    },
+    onSuccess: (result) => {
+      setPinnedAt(result.pinnedAt);
+      options?.onSuccess?.();
+    },
+    // A reader's first pin adds the conversation to their feed.
+    onSettled: () =>
+      Promise.all([
+        queryClient.invalidateQueries(feeds),
+        queryClient.invalidateQueries({
+          exact: true,
+          queryKey: detailQueryKey,
+        }),
+      ]),
+  });
+}

package/src/client/display-text/DisplayText.tsx

@@ -2,7 +2,8 @@ import { memo } from "react";
 import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { HighlightedCode } from "../code";
-import { parseMarkdownBlocks } from "../format";
+import { CopyButton } from "../components/CopyButton";
+import { parseMarkdownBlocks } from "./codeBlocks";
 import { MarkdownText } from "./markdown";
 import { MentionPeopleProvider } from "./mentions";
 
@@ -56,10 +57,14 @@ function DisplayTextBlocks(props: { chat?: boolean; text: string }) {
 
         return (
           <div
-            className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
+            className="group/code relative min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel py-2.5 pl-3 pr-10"
             key={index}
           >
             <HighlightedCode code={block.code} language={block.language} />
+            {/* Touch screens cannot hover, so keep the button visible there. */}
+            <div className="absolute right-0.5 top-0.5 transition-opacity [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-hover/code:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within/code:opacity-100">
+              <CopyButton getText={() => block.code} label="Copy code" />
+            </div>
           </div>
         );
       })}