@sentry/junior-dashboard 0.277.0 → 0.278.0

package/src/client/conversations/ConversationPage.tsx

@@ -5,6 +5,7 @@ import {
   useRef,
   useState,
   useSyncExternalStore,
+  type ReactNode,
 } from "react";
 import { useSearchParams } from "react-router";
 import type {
@@ -12,11 +13,11 @@ import type {
   ConversationFeed,
 } from "@sentry/junior/api/schema";
 
+import type { ConversationData } from "./queries";
 import {
   useArchiveConversation,
   type PendingArchiveConversationUpdate,
 } from "./conversationArchive";
-import { useConversationData } from "./queries";
 import { usePinConversation } from "./usePinConversation";
 import { conversationIsResponding } from "./transcript";
 import { buildConversationMarkdown } from "../markdownExport";
@@ -97,6 +98,10 @@ import {
   useReadPositionAtOpen,
 } from "./transcriptReadPosition";
 import { TranscriptLoading } from "./TranscriptLoading";
+import {
+  useUnreadHistory,
+  type TranscriptHistory,
+} from "./transcriptUnreadHistory";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import {
   SubagentTranscriptDrawer,
@@ -122,8 +127,14 @@ function subscribeToDetailsLayout(onChange: () => void) {
 export function ConversationPage(props: {
   conversationId: string;
   data?: { conversations: ConversationFeed };
+  /**
+   * This Conversation's data. The shell fetches it, so a direct load does
+   * not wait for the dashboard core reads, and each visit fetches it once.
+   */
+  detail: ConversationData;
   onRead?(conversationId: string, lastReadAt: string): void;
   pendingArchiveUpdate?: PendingArchiveConversationUpdate;
+  sidebarToggle?: ReactNode;
 }) {
   const detailsDefaultOpen = useSyncExternalStore(
     subscribeToDetailsLayout,
@@ -198,7 +209,15 @@ export function ConversationPage(props: {
   const onRead = props.onRead;
   const summaries = props.data?.conversations.conversations ?? [];
   const conversations = buildConversations(summaries);
-  const detail = useConversationData(conversationId);
+  // The page keeps the start preference from when the Conversation opened.
+  const [startAtUnread] = useState(
+    () => readConversationStartPosition() === "unread",
+  );
+  const detail = props.detail;
+  // Jump to latest, a send, or the mobile keyboard skips the newer pages for
+  // the rest of the visit. It can come before the unread page loads.
+  const [showLatest, setShowLatest] = useState(false);
+  const opensAtUnread = startAtUnread && !showLatest;
   const memoryList = useConversationMemories(conversationId).data;
   const memoryState = useMemo<ConversationMemoryState>(
     () => ({
@@ -212,6 +231,38 @@ export function ConversationPage(props: {
   const pin = usePinConversation(conversationId);
   const markRead = useMarkConversationRead(conversationId);
   const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
+  const unreadHistory = useUnreadHistory({
+    conversationId,
+    // Cached earlier pages from a past visit would look like newer events.
+    detail: detail.latest,
+    onShowLatest: () => setShowLatest(true),
+    unreadCursor: opensAtUnread ? readAtOpen.unreadCursor : undefined,
+    unreadPage: readAtOpen.unreadPage,
+  });
+  // The page is keyed by Conversation, so this is the cached copy at open.
+  const [cachedAtOpen] = useState(() => detail.data);
+  // A reader far behind sees the events from their read position. Others
+  // see the latest page and the pages before it. A cached transcript stays
+  // on screen until this visit's fetch tells where to open and the unread
+  // events load. It loads no earlier pages and shows no marker: both would
+  // come from the cached read position. It reports no reads, because it sits
+  // at rows the reader has not read yet. Then the transcript opens at the
+  // "New" marker, if the reader has not moved.
+  const holdCachedTranscript = Boolean(
+    cachedAtOpen &&
+    (unreadHistory?.isPending || (opensAtUnread && !detail.fetchedAtOpen)),
+  );
+  const history: TranscriptHistory = holdCachedTranscript
+    ? {
+        ...detail,
+        data: cachedAtOpen,
+        hasPreviousPage: false,
+        isLoadingPreviousPage: false,
+        loadPreviousPage: () => {},
+      }
+    : (unreadHistory ?? detail);
+  const transcriptPending =
+    detail.isPending || Boolean(unreadHistory?.isPending && !cachedAtOpen);
   const feedConversation = conversations.find(
     (item) => item.id === conversationId,
   );
@@ -234,7 +285,7 @@ export function ConversationPage(props: {
     if (!conversation) return;
     onRead?.(conversation.id, conversation.lastSeenAt);
   }, [conversation, onRead]);
-  const transcript = detail.data;
+  const transcript = history.data;
   const selectedEvent =
     transcript?.eventHistory.status === "expired"
       ? undefined
@@ -286,27 +337,31 @@ export function ConversationPage(props: {
     },
     [eventOpen, setSelectedEventSeq],
   );
-  // A linked event can be older than the first page. Load earlier pages until
-  // it is present or history ends.
-  const loadPreviousPageRef = useRef(detail.loadPreviousPage);
-  loadPreviousPageRef.current = detail.loadPreviousPage;
+  // A linked event, Turn, or memory can be outside the loaded pages. Look
+  // for it one page at a time, in the direction where it can be.
+  const historyRef = useRef(history);
+  historyRef.current = history;
+  const loadToward = useCallback((search: HistorySearch | undefined) => {
+    if (search === "load-earlier") historyRef.current.loadPreviousPage();
+    else if (search === "load-newer") historyRef.current.newer?.load();
+  }, []);
+  const searchHistory = (direction: HistorySearchDirection) =>
+    nextHistorySearch(history, direction, holdCachedTranscript);
   const oldestLoadedSeq = transcript?.events[0]?.seq;
-  const linkedEventMissing =
-    selectedEventSeq !== undefined &&
-    oldestLoadedSeq !== undefined &&
-    selectedEventSeq < oldestLoadedSeq;
-  const loadLinkedEvent =
-    linkedEventMissing &&
-    detail.hasPreviousPage &&
-    !detail.isLoadingPreviousPage &&
-    !detail.historyError;
-  useEffect(() => {
-    if (loadLinkedEvent) loadPreviousPageRef.current();
-  }, [loadLinkedEvent, oldestLoadedSeq]);
-  // 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 newestLoadedSeq = transcript?.events.at(-1)?.seq;
+  const linkedEventDirection: HistorySearchDirection | undefined =
+    selectedEventSeq === undefined ||
+    oldestLoadedSeq === undefined ||
+    newestLoadedSeq === undefined
+      ? undefined
+      : selectedEventSeq < oldestLoadedSeq
+        ? "earlier"
+        : selectedEventSeq > newestLoadedSeq &&
+            (history.newer || holdCachedTranscript)
+          ? "newer"
+          : undefined;
+  // Replace a found Turn link with a link to its first event, or drop it
+  // when history has no such event.
   const linkedTurnSeq = linkedTurnId
     ? turnStartedEventSeq(transcript?.events, linkedTurnId)
     : undefined;
@@ -314,24 +369,21 @@ export function ConversationPage(props: {
     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]);
+  const linkedSearch = linkedEventDirection
+    ? searchHistory(linkedEventDirection)
+    : linkedTurnMissing
+      ? searchHistory("any")
+      : undefined;
+  useEffect(() => loadToward(linkedSearch), [linkedSearch, loadToward]);
+  const linkedTurnNotFound = linkedTurnMissing && linkedSearch === "end";
   useEffect(() => {
     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.
+  // load pages toward the row until it renders, or stop when history ends.
+  const memorySearch =
+    memoryJump && transcript ? searchHistory("any") : undefined;
   useEffect(() => {
     if (!memoryJump || !transcript) return;
     const anchor = pageRef.current?.querySelector(
@@ -341,33 +393,22 @@ export function ConversationPage(props: {
       anchor.scrollIntoView({ block: "center" });
       setMemoryPopover(memoryJump);
       setMemoryJump(undefined);
-    } else if (
-      detail.hasPreviousPage &&
-      !detail.isLoadingPreviousPage &&
-      !detail.historyError
-    ) {
-      loadPreviousPageRef.current();
-    } else if (!detail.isLoadingPreviousPage) {
+    } else if (memorySearch === "failed" || memorySearch === "end") {
       setMemoryJump(undefined);
+    } else {
+      loadToward(memorySearch);
     }
-  }, [
-    detail.hasPreviousPage,
-    detail.historyError,
-    detail.isLoadingPreviousPage,
-    memoryJump,
-    transcript,
-    view,
-  ]);
+  }, [loadToward, memoryJump, memorySearch, 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 =
     eventOpen &&
     !selectedEvent &&
-    (detail.isPending ||
+    (transcriptPending ||
       linkedTurnSeq !== undefined ||
-      ((linkedEventMissing || linkedTurnMissing) &&
-        (detail.hasPreviousPage || detail.isLoadingPreviousPage) &&
-        !detail.historyError));
+      linkedSearch === "load-earlier" ||
+      linkedSearch === "load-newer" ||
+      linkedSearch === "wait");
   const showEvent = Boolean(selectedEvent) || eventLoading;
   // Step through the same filtered rows that the event log shows.
   const events = transcript?.events;
@@ -390,6 +431,7 @@ export function ConversationPage(props: {
     [turnContext?.id],
   );
   const requestPin = useCallback(() => {
+    setShowLatest(true);
     setPinRequestVersion((version) => version + 1);
   }, []);
   const onOpenSubagentTranscript = useCallback(
@@ -514,15 +556,17 @@ export function ConversationPage(props: {
             }
             search={search}
             sentryConversationUrl={detail.data?.sentryConversationUrl}
+            sidebarToggle={props.sidebarToggle}
             title={title}
             view={view}
           />
         }
         scrollMinTall
         scrollAriaLabel="Conversation transcript"
-        scrollClassName={
-          view === "raw" ? undefined : "px-4 pb-4 md:px-7 md:pb-6"
-        }
+        scrollClassName={cn(
+          "thin-scrollbar",
+          view !== "raw" && "px-4 pb-4 md:px-7 md:pb-6",
+        )}
         scroll={
           <section className="min-w-0">
             <div
@@ -532,7 +576,7 @@ export function ConversationPage(props: {
                   : "mx-auto w-full max-w-[52.5rem] pt-5 md:pt-7"
               }
             >
-              {detail.isPending ? (
+              {transcriptPending ? (
                 view === "raw" ? (
                   <ConversationEventLogLoading />
                 ) : (
@@ -552,30 +596,36 @@ export function ConversationPage(props: {
                   ) : null}
                   <ConversationMemoryContext value={memoryState}>
                     <Transcript
-                      hasPreviousPage={detail.hasPreviousPage}
-                      historyError={detail.historyError}
-                      historyVersion={detail.historyVersion}
+                      hasPreviousPage={history.hasPreviousPage}
+                      historyError={history.historyError}
+                      historyVersion={history.historyVersion}
                       lastReadSeq={readAtOpen.lastReadSeq}
                       live={live}
-                      loadingPreviousPage={detail.isLoadingPreviousPage}
-                      onLoadPreviousPage={detail.loadPreviousPage}
-                      onRead={markRead}
+                      loadingPreviousPage={history.isLoadingPreviousPage}
+                      newerHistory={history.newer}
+                      onLoadPreviousPage={history.loadPreviousPage}
+                      onRead={holdCachedTranscript ? undefined : markRead}
                       onSelectedEventSeqChange={setSelectedEventSeq}
-                      pendingMessages={detail.inlineMessages}
+                      // Sends and the thinking row belong after the latest event.
+                      pendingMessages={
+                        history.newer ? undefined : detail.inlineMessages
+                      }
                       pinRequestVersion={pinRequestVersion}
                       responding={
-                        !detail.error && conversationIsResponding(transcript)
+                        !detail.error &&
+                        !history.newer &&
+                        conversationIsResponding(detail.data)
                       }
                       onOpenSubagentTranscript={onOpenSubagentTranscript}
                       search={search}
                       onSearchChange={setSearch}
                       selectedEventSeq={selectedEventSeq}
-                      startAtUnread={
-                        readConversationStartPosition() === "unread"
-                      }
+                      startAtUnread={startAtUnread}
                       transcript={transcript}
                       turnContextPanel={turnContextPanel}
-                      unread={readAtOpen.unread}
+                      unread={
+                        holdCachedTranscript ? undefined : readAtOpen.unread
+                      }
                       view={view}
                     />
                   </ConversationMemoryContext>
@@ -604,9 +654,12 @@ export function ConversationPage(props: {
               // 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
-              // history does not have yet can start that Turn first.
+              // history does not have yet can start that Turn first. While
+              // newer pages are not loaded, the transcript tail is not the
+              // latest event, so a send waits in the queue too.
               sendsInline={
                 detail.data.eventHistory.status === "available" &&
+                !history.newer &&
                 !conversationIsResponding(detail.data) &&
                 detail.inlineMessages.length === 0
               }
@@ -753,3 +806,33 @@ function committedMessageIds(
 }
 
 const EMPTY_MESSAGE_IDS: readonly string[] = [];
+
+type HistorySearchDirection = "any" | "earlier" | "newer";
+type HistorySearch = "end" | "failed" | "load-earlier" | "load-newer" | "wait";
+
+/**
+ * The next step to find a row that the loaded pages do not have: load one
+ * more page toward it, or wait for the page that loads. "any" looks at newer
+ * pages first. A failed page stops the search, but the link stays, so a
+ * retry can still find the row.
+ */
+function nextHistorySearch(
+  history: TranscriptHistory,
+  direction: HistorySearchDirection,
+  held: boolean,
+): HistorySearch {
+  if (held || history.isLoadingPreviousPage || history.newer?.loading) {
+    return "wait";
+  }
+  if (direction !== "earlier" && history.newer && !history.newer.error) {
+    return "load-newer";
+  }
+  if (
+    direction !== "newer" &&
+    history.hasPreviousPage &&
+    !history.historyError
+  ) {
+    return "load-earlier";
+  }
+  return history.historyError || history.newer?.error ? "failed" : "end";
+}

package/src/client/conversations/ConversationSidebar.tsx

@@ -191,6 +191,7 @@ export function ConversationSidebar(props: {
       </div>
       <div className="px-4 pb-2">
         <SearchInput
+          className="border-dashboard-border-subtle bg-transparent hover:border-dashboard-border hover:bg-dashboard-fill-faint"
           label="Search your conversations"
           onChange={props.onQueryChange}
           placeholder="Search conversations…"
@@ -203,7 +204,7 @@ export function ConversationSidebar(props: {
           "px-3",
           isLanding
             ? "pb-[max(1rem,env(safe-area-inset-bottom))]"
-            : "min-h-0 overflow-y-auto overscroll-contain pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+            : "thin-scrollbar min-h-0 overflow-y-auto overscroll-contain pb-[max(0.5rem,env(safe-area-inset-bottom))]",
         )}
       >
         {props.error ? (

package/src/client/conversations/ConversationTranscript.tsx

@@ -22,6 +22,7 @@ import { TranscriptSubagentView } from "./TranscriptSubagentView";
 import { TranscriptContextEventView } from "./TranscriptContextEventView";
 import {
   isCollapsibleActivityEntry,
+  quietTurnEntryKeys,
   TranscriptActivityGroup,
 } from "./TranscriptActivityGroup";
 import { TranscriptToolView } from "./TranscriptToolView";
@@ -232,9 +233,7 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
       keyPrefix={props.conversation.conversationId}
       unread={props.unread}
       renderContext={(entry) => (
-        <TranscriptRailEvent
-          kind={entry.part.event.type === "handoff" ? "handoff" : "compaction"}
-        >
+        <TranscriptRailEvent kind="compaction">
           <TranscriptContextEventView
             part={entry.part}
             timestamp={entry.timestamp}
@@ -359,6 +358,12 @@ function TranscriptEntryList(props: {
 }) {
   const search = useTranscriptSearch();
   const activityKeys = useRef(new Map<string, string>());
+  const quietKeys = useMemo(
+    () => quietTurnEntryKeys(props.entries),
+    [props.entries],
+  );
+  const collapsible = (entry: TranscriptEntry) =>
+    isCollapsibleActivityEntry(entry) || quietKeys.has(entry.key);
   const claimedActivityKeys = new Set<string>();
   const rows: ReactNode[] = [];
   // Search results are not a reading order, so they get no marker.
@@ -394,11 +399,11 @@ function TranscriptEntryList(props: {
   for (let index = 0; index < props.entries.length; ) {
     const entry = props.entries[index]!;
 
-    if (isCollapsibleActivityEntry(entry)) {
+    if (collapsible(entry)) {
       const activityEntries: RenderedTranscriptEntry[] = [];
       while (
         index < props.entries.length &&
-        isCollapsibleActivityEntry(props.entries[index]!)
+        collapsible(props.entries[index]!)
       ) {
         activityEntries.push(props.entries[index]!);
         index += 1;
@@ -523,9 +528,7 @@ function RedactedTranscriptView(props: {
       entries={groupTranscriptMessages(props.messages)}
       keyPrefix={`${props.conversation.conversationId}:redacted`}
       renderContext={(entry) => (
-        <TranscriptRailEvent
-          kind={entry.part.event.type === "handoff" ? "handoff" : "compaction"}
-        >
+        <TranscriptRailEvent kind="compaction">
           <TranscriptContextEventView
             part={entry.part}
             timestamp={entry.timestamp}

package/src/client/conversations/ConversationWorkspace.tsx

@@ -1,20 +1,27 @@
 import type { InputImage } from "@sentry/junior/api/schema";
-import { useEffect, useMemo, useState } from "react";
-import { Globe2, LockKeyhole } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Globe2, LockKeyhole, PanelLeft } from "lucide-react";
 import { useNavigate, useParams } from "react-router";
+import type { PanelImperativeHandle } from "react-resizable-panels";
 
 import { useConversationsData } from "../api";
 import { ConversationSidebar } from "./ConversationSidebar";
 import { SearchInput } from "../components/SearchInput";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "../components/ui/resizable";
 import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
 import { pageCount, pageItems, PagePagination } from "../components/Pagination";
 import { ConversationHomeList } from "./ConversationHomeList";
 import { ConversationComposer } from "./ConversationComposer";
+import { HeaderIconButton } from "./ConversationHeaderActions";
 import {
   usePendingArchiveConversationUpdates,
   type PendingArchiveConversationUpdate,
 } from "./conversationArchive";
-import { useCreateConversation } from "./queries";
+import { useCreateConversation, type ConversationData } from "./queries";
 import { conversationPath, NEW_CONVERSATION_PATH } from "./conversationRoutes";
 import {
   attentionConversationIds,
@@ -22,6 +29,7 @@ import {
 } from "./conversationSections";
 import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
+import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { ConversationPage } from "./ConversationPage";
 import {
@@ -30,13 +38,29 @@ import {
 } from "../review-desk/queries";
 import { UnsentAnswersProvider } from "../review-desk/UnsentAnswers";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
+import {
+  readSidebarWidth,
+  saveSidebarWidth,
+  SIDEBAR_WIDTH,
+  useConversationSidebarOpen,
+  useSidebarFits,
+} from "./conversationSidebarLayout";
 
 const CONVERSATION_PAGE_SIZE = 20;
+const SIDEBAR_PANEL_ID = "conversation-list";
 
 /** Render the conversation home page or one selected conversation. */
-export function ConversationWorkspace() {
+export function ConversationWorkspace(props: {
+  /** The selected Conversation's data, from the shell. */
+  detail: ConversationData;
+}) {
   const [page, setPage] = useState(1);
   const [query, setQuery] = useState("");
+  const [sidebarOpen, setSidebarOpen] = useConversationSidebarOpen();
+  const sidebarFits = useSidebarFits();
+  const sidebarPanel = useRef<PanelImperativeHandle>(null);
+  const sidebarGroup = useRef<HTMLDivElement>(null);
+  const sidebarId = useId();
   const search = useDebouncedValue(query.trim());
   const params = useParams();
   const navigate = useNavigate();
@@ -146,45 +170,109 @@ export function ConversationWorkspace() {
     );
   }
 
+  const toggleSidebar = () => {
+    const panel = sidebarPanel.current;
+    if (!panel) return;
+    if (panel.isCollapsed()) panel.resize(readSidebarWidth());
+    else panel.collapse();
+  };
+
   return (
-    <div className="grid h-full min-h-0 w-full overflow-hidden bg-dashboard-bg md:grid-cols-[20rem_minmax(0,1fr)]">
-      <div className="hidden h-full min-h-0 overflow-hidden md:block">
-        <ConversationSidebar
-          conversations={conversations}
-          error={feed.error?.message}
-          finishedConversationIds={finishedConversationIds}
-          heldConversationId={heldConversationId}
-          loading={feed.isPending}
-          onNewConversation={openCreate}
-          onQueryChange={setQuery}
-          query={query}
-          selectedId={selectedId}
-          timeZone={getDashboardTimeZone()}
-          waitingConversations={waitingConversations}
-        />
-      </div>
-      <section
-        aria-label="Selected conversation"
-        className="grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-dashboard-bg"
-      >
-        <UnsentAnswersProvider conversationId={selectedId} key={selectedId}>
-          <ConversationPage
-            conversationId={selectedId}
-            data={
-              feed.data
-                ? {
-                    conversations: feed.data,
-                  }
-                : undefined
-            }
-            onRead={markRead}
-            pendingArchiveUpdate={pendingArchiveUpdates.find(
-              (update) => update.conversationId === selectedId,
-            )}
+    <ResizablePanelGroup
+      className="min-h-0 overflow-hidden bg-dashboard-bg"
+      elementRef={sidebarGroup}
+      onLayoutChanged={(layout) => {
+        // Save after the drag ends. A drag that collapses the list passes
+        // the minimum width first, and that width is not the reader's pick.
+        const percent = layout[SIDEBAR_PANEL_ID] ?? 0;
+        const groupWidth = sidebarGroup.current?.offsetWidth ?? 0;
+        if (percent > 0) saveSidebarWidth((percent / 100) * groupWidth);
+      }}
+    >
+      {sidebarFits ? (
+        <>
+          <ResizablePanel
+            collapsible
+            defaultSize={sidebarOpen ? readSidebarWidth() : 0}
+            groupResizeBehavior="preserve-pixel-size"
+            id={SIDEBAR_PANEL_ID}
+            maxSize={SIDEBAR_WIDTH.max}
+            minSize={SIDEBAR_WIDTH.min}
+            onResize={(size) => {
+              // Dragging past the minimum width collapses the list too, so the
+              // panel size is the one source for the open state.
+              const open = size.inPixels > 0;
+              if (open !== sidebarOpen) setSidebarOpen(open);
+            }}
+            panelRef={sidebarPanel}
+          >
+            <div
+              className={cn(
+                "h-full min-h-0 overflow-hidden",
+                !sidebarOpen && "hidden",
+              )}
+              id={sidebarId}
+            >
+              <ConversationSidebar
+                conversations={conversations}
+                error={feed.error?.message}
+                finishedConversationIds={finishedConversationIds}
+                heldConversationId={heldConversationId}
+                loading={feed.isPending}
+                onNewConversation={openCreate}
+                onQueryChange={setQuery}
+                query={query}
+                selectedId={selectedId}
+                timeZone={getDashboardTimeZone()}
+                waitingConversations={waitingConversations}
+              />
+            </div>
+          </ResizablePanel>
+          <ResizableHandle
+            aria-label="Resize conversation list"
+            className="w-px bg-transparent transition-colors after:w-2 focus-visible:ring-dashboard-border-interactive data-[separator=active]:bg-dashboard-border-interactive data-[separator=hover]:bg-dashboard-border-interactive"
           />
-        </UnsentAnswersProvider>
-      </section>
-    </div>
+        </>
+      ) : null}
+      <ResizablePanel id="selected-conversation">
+        <section
+          aria-label="Selected conversation"
+          className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-dashboard-bg"
+        >
+          <UnsentAnswersProvider conversationId={selectedId} key={selectedId}>
+            <ConversationPage
+              conversationId={selectedId}
+              detail={props.detail}
+              data={
+                feed.data
+                  ? {
+                      conversations: feed.data,
+                    }
+                  : undefined
+              }
+              onRead={markRead}
+              pendingArchiveUpdate={pendingArchiveUpdates.find(
+                (update) => update.conversationId === selectedId,
+              )}
+              sidebarToggle={
+                <HeaderIconButton
+                  controls={sidebarId}
+                  expanded={sidebarOpen}
+                  label={
+                    sidebarOpen
+                      ? "Hide conversation list"
+                      : "Show conversation list"
+                  }
+                  onClick={toggleSidebar}
+                >
+                  <PanelLeft aria-hidden="true" size={15} strokeWidth={2} />
+                </HeaderIconButton>
+              }
+            />
+          </UnsentAnswersProvider>
+        </section>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   );
 }