@meridianlabs/log-viewer 0.3.185 → 0.3.187

package/lib/index.js

@@ -17274,7 +17274,6 @@ const createSampleSlice = (set3, get2, _store) => {
           state.sample.sampleStatus = "loading";
           state.sample.sampleError = void 0;
           state.sample.sample_identifier = { logFile, id, epoch };
-          state.log.selectedSampleHandle = void 0;
         });
       },
       setSampleStatus: (status2) => set3((state) => {
@@ -99424,10 +99423,10 @@ const isAnsiOutput = (text2) => {
   );
   return ansiRegex.test(text2);
 };
-const toolImage = "_toolImage_1wvgr_1";
-const output = "_output_1wvgr_6";
-const textOutput = "_textOutput_1wvgr_10";
-const textCode = "_textCode_1wvgr_18";
+const toolImage = "_toolImage_h7uyp_1";
+const output = "_output_h7uyp_6";
+const textOutput = "_textOutput_h7uyp_10";
+const textCode = "_textCode_h7uyp_19";
 const styles$1p = {
   toolImage,
   output,
@@ -100229,11 +100228,20 @@ const ChatMessage = memo(
     toolMessages,
     indented: indented2,
     toolCallStyle,
-    allowLinking = true
+    allowLinking = true,
+    unlabeledRoles
   }) => {
     const messageUrl = useSampleMessageUrl(message2.id);
-    const collapse = message2.role === "system" || message2.role === "user";
     const [mouseOver, setMouseOver] = useState(false);
+    const collapse = message2.role === "system" || message2.role === "user";
+    const hideRole = unlabeledRoles?.includes(message2.role) ?? false;
+    if (hideRole) {
+      const content2 = message2.content;
+      const hasVisibleContent = typeof content2 === "string" ? content2.trim().length > 0 : Array.isArray(content2) && content2.some((c2) => c2.type !== "tool_use");
+      if (!hasVisibleContent) {
+        return null;
+      }
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -100248,7 +100256,7 @@ const ChatMessage = memo(
         onMouseEnter: () => setMouseOver(true),
         onMouseLeave: () => setMouseOver(false),
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          !hideRole && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: clsx(
@@ -100339,7 +100347,8 @@ const ChatMessageRow = ({
   toolCallStyle,
   indented: indented2,
   highlightUserMessage,
-  allowLinking = true
+  allowLinking = true,
+  unlabeledRoles
 }) => {
   if (number2) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -100370,7 +100379,8 @@ const ChatMessageRow = ({
               toolMessages: resolvedMessage.toolMessages,
               indented: indented2,
               toolCallStyle,
-              allowLinking
+              allowLinking,
+              unlabeledRoles
             }
           )
         ]
@@ -100394,7 +100404,8 @@ const ChatMessageRow = ({
               toolMessages: resolvedMessage.toolMessages,
               indented: indented2,
               toolCallStyle,
-              allowLinking
+              allowLinking,
+              unlabeledRoles
             }
           ),
           resolvedMessage.message.role === "user" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: "10px" } }) : void 0
@@ -100488,7 +100499,8 @@ const ChatView = ({
   indented: indented2,
   numbered = true,
   className: className2,
-  allowLinking = true
+  allowLinking = true,
+  unlabeledRoles
 }) => {
   const collapsedMessages = resolveToolCallsIntoPreviousMessage ? resolveMessages(messages2) : messages2.map((msg) => {
     return {
@@ -100507,7 +100519,8 @@ const ChatView = ({
         indented: indented2,
         toolCallStyle,
         allowLinking,
-        highlightUserMessage: true
+        highlightUserMessage: true,
+        unlabeledRoles
       },
       `${id}-msg-${index}`
     );
@@ -106556,7 +106569,7 @@ const ViewerOptionsPopover = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1d.fullWidth, styles$1d.fullWidthPadded), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$1d.logDir, children: logDir2 }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1d.spacer) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Version" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(), children: "0.3.185-0-g91bbceab6" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(), children: "0.3.187-0-g376e76891" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Schema" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(), children: DB_VERSION }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1d.spacer) }),
@@ -164277,6 +164290,82 @@ var AgGridReact = class extends Component$1 {
     return /* @__PURE__ */ React3__default.createElement(AgGridReactUi, { ...this.props, passGridApi: this.setGridApi });
   }
 };
+const FindBandUI = ({
+  onClose,
+  onNext,
+  onPrevious,
+  onKeyDown,
+  onChange,
+  onBeforeInput,
+  value: value2,
+  matchCount,
+  matchIndex,
+  noResults = false,
+  disableNav,
+  inputRef: externalRef
+}) => {
+  const internalRef = useRef(null);
+  const inputRef = externalRef ?? internalRef;
+  const inputProps = {
+    type: "text",
+    placeholder: "Find",
+    onKeyDown,
+    onBeforeInput,
+    onChange
+  };
+  if (value2 !== void 0) {
+    inputProps.value = value2;
+  }
+  const hasCount = matchCount !== void 0 && matchIndex !== void 0;
+  const showStatus = noResults || hasCount && matchCount > 0;
+  const statusText2 = hasCount && matchCount > 0 ? `${matchIndex + 1} of ${matchCount}` : "No results";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-unsearchable": "true", className: clsx("findBand"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref: inputRef, ...inputProps }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        className: clsx(
+          "findBand-match-count",
+          noResults && matchCount === 0 && "findBand-no-results"
+        ),
+        style: { visibility: showStatus ? "visible" : "hidden" },
+        children: statusText2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        title: "Previous match",
+        className: "btn prev",
+        onClick: onPrevious,
+        disabled: disableNav,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.up })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        title: "Next match",
+        className: "btn next",
+        onClick: onNext,
+        disabled: disableNav,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.down })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        title: "Close",
+        className: "btn close",
+        onClick: onClose,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.close })
+      }
+    )
+  ] });
+};
 ModuleRegistry.registerModules([AllCommunityModule]);
 const createGridKeyboardHandler = ({
   gridRef,
@@ -164378,6 +164467,17 @@ const LogListGrid = ({
   const internalGridRef = useRef(null);
   const gridRef = externalGridRef ?? internalGridRef;
   const gridContainerRef = useRef(null);
+  const [showFind, setShowFind] = useState(false);
+  const [findTerm, setFindTerm] = useState("");
+  const [matchIds, setMatchIds] = useState([]);
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+  const findInputRef = useRef(null);
+  const closeFind = useCallback(() => {
+    setShowFind(false);
+    setFindTerm("");
+    setMatchIds([]);
+    setCurrentMatchIndex(0);
+  }, []);
   const logFiles = useMemo(() => {
     return items.filter((item2) => item2.type === "file").map((item2) => item2.log).filter((file) => file !== void 0);
   }, [items]);
@@ -164427,6 +164527,7 @@ const LogListGrid = ({
           }
         }
       }
+      row2.searchText = [row2.name, row2.task, row2.model, row2.id].filter(Boolean).join(" ").toLowerCase();
       return row2;
     });
   }, [items, logDetails]);
@@ -164513,47 +164614,145 @@ const LogListGrid = ({
   useEffect(() => {
     resizeGridColumns();
   }, [columns, resizeGridColumns]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$18.gridWrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: gridContainerRef, className: styles$18.gridContainer, tabIndex: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    AgGridReact,
-    {
-      ref: gridRef,
-      rowData: data,
-      animateRows: false,
-      columnDefs: columns,
-      defaultColDef: {
-        sortable: true,
-        filter: true,
-        resizable: true
-      },
-      autoSizeStrategy: { type: "fitGridWidth" },
-      headerHeight: 25,
-      rowSelection: { mode: "singleRow", checkboxes: false },
-      getRowId: (params) => params.data.id,
-      onGridColumnsChanged: (e) => {
-        const cols = e.api.getColumnDefs();
-        if (cols && cols?.length > maxColCount.current) {
-          maxColCount.current = cols.length;
-          resizeGridColumns();
+  const performSearch = useCallback(
+    (term) => {
+      const api2 = gridRef.current?.api;
+      if (!api2 || !term) {
+        setMatchIds([]);
+        setCurrentMatchIndex(0);
+        return;
+      }
+      const lowerTerm = term.toLowerCase();
+      const foundIds = [];
+      api2.forEachNode((node2) => {
+        const rowData = node2.data;
+        if (!rowData?.searchText) return;
+        if (rowData.searchText.includes(lowerTerm)) {
+          foundIds.push(rowData.id);
         }
-      },
-      onGridSizeChanged: resizeGridColumns,
-      theme: themeBalham,
-      enableCellTextSelection: true,
-      initialState: initialGridState,
-      suppressCellFocus: true,
-      onStateUpdated: (e) => {
-        setGridState(e.state);
-        if (gridRef.current?.api) {
-          const displayedRowCount = gridRef.current.api.getDisplayedRowCount();
-          setFilteredCount(displayedRowCount);
+      });
+      setMatchIds(foundIds);
+      setCurrentMatchIndex(0);
+      if (foundIds.length > 0) {
+        const firstNode = api2.getRowNode(foundIds[0]);
+        if (firstNode) {
+          api2.deselectAll();
+          api2.ensureNodeVisible(firstNode, "middle");
+          firstNode.setSelected(true, true);
         }
-      },
-      onRowClicked: handleRowClick,
-      onSortChanged: handleSortChanged,
-      onFilterChanged: handleFilterChanged,
-      loading: data.length === 0 && (loading > 0 || syncing)
+      }
+    },
+    [gridRef]
+  );
+  const goToMatch = useCallback(
+    (index) => {
+      if (matchIds.length === 0) return;
+      const idx = (index % matchIds.length + matchIds.length) % matchIds.length;
+      setCurrentMatchIndex(idx);
+      const api2 = gridRef.current?.api;
+      if (!api2) return;
+      const node2 = api2.getRowNode(matchIds[idx]);
+      if (node2) {
+        api2.deselectAll();
+        api2.ensureNodeVisible(node2, "middle");
+        node2.setSelected(true, true);
+      }
+    },
+    [matchIds, gridRef]
+  );
+  const handleInputKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        closeFind();
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        goToMatch(currentMatchIndex + (e.shiftKey ? -1 : 1));
+      }
+    },
+    [goToMatch, currentMatchIndex, closeFind]
+  );
+  useEffect(() => {
+    const handleFindKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowFind(true);
+        setTimeout(() => findInputRef.current?.focus(), 100);
+      }
+      if (e.key === "Escape" && showFind) {
+        closeFind();
+      }
+    };
+    document.addEventListener("keydown", handleFindKeyDown, true);
+    return () => document.removeEventListener("keydown", handleFindKeyDown, true);
+  }, [closeFind, showFind]);
+  useEffect(() => {
+    if (findTerm) {
+      performSearch(findTerm);
+    } else {
+      setMatchIds([]);
+      setCurrentMatchIndex(0);
     }
-  ) }) });
+  }, [findTerm, performSearch]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$18.gridWrapper), children: [
+    showFind && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FindBandUI,
+      {
+        inputRef: findInputRef,
+        value: findTerm,
+        onChange: () => setFindTerm(findInputRef.current?.value ?? ""),
+        onKeyDown: handleInputKeyDown,
+        onClose: closeFind,
+        onPrevious: () => goToMatch(currentMatchIndex - 1),
+        onNext: () => goToMatch(currentMatchIndex + 1),
+        disableNav: matchIds.length === 0,
+        noResults: !!findTerm && matchIds.length === 0,
+        matchCount: findTerm ? matchIds.length : void 0,
+        matchIndex: findTerm ? currentMatchIndex : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: gridContainerRef, className: styles$18.gridContainer, tabIndex: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AgGridReact,
+      {
+        ref: gridRef,
+        rowData: data,
+        animateRows: false,
+        columnDefs: columns,
+        defaultColDef: {
+          sortable: true,
+          filter: true,
+          resizable: true
+        },
+        autoSizeStrategy: { type: "fitGridWidth" },
+        headerHeight: 25,
+        rowSelection: { mode: "singleRow", checkboxes: false },
+        getRowId: (params) => params.data.id,
+        onGridColumnsChanged: (e) => {
+          const cols = e.api.getColumnDefs();
+          if (cols && cols?.length > maxColCount.current) {
+            maxColCount.current = cols.length;
+            resizeGridColumns();
+          }
+        },
+        onGridSizeChanged: resizeGridColumns,
+        theme: themeBalham,
+        enableCellTextSelection: true,
+        initialState: initialGridState,
+        suppressCellFocus: true,
+        onStateUpdated: (e) => {
+          setGridState(e.state);
+          if (gridRef.current?.api) {
+            const displayedRowCount = gridRef.current.api.getDisplayedRowCount();
+            setFilteredCount(displayedRowCount);
+          }
+        },
+        onRowClicked: handleRowClick,
+        onSortChanged: handleSortChanged,
+        onFilterChanged: handleFilterChanged,
+        loading: data.length === 0 && (loading > 0 || syncing)
+      }
+    ) })
+  ] });
 };
 const footer$1 = "_footer_14uod_1";
 const spinnerContainer$1 = "_spinnerContainer_14uod_11";
@@ -165539,64 +165738,21 @@ const FindBand = () => {
       document.removeEventListener("keydown", handleGlobalKeyDown, true);
     };
   }, [handleSearch, restoreCursor]);
-  const matchCountLabel = useMemo(() => {
-    if (matchCount === null) return null;
-    if (matchCount === 0) return "No results";
-    return `${currentMatchIndex} of ${matchCount}`;
-  }, [matchCount, currentMatchIndex]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-unsearchable": "true", className: clsx("findBand"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        type: "text",
-        ref: searchBoxRef,
-        placeholder: "Find",
-        onKeyDown: handleKeyDown,
-        onBeforeInput: handleBeforeInput,
-        onChange: handleInputChange
-      }
-    ),
-    matchCountLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "span",
-      {
-        className: clsx(
-          "findBand-match-count",
-          matchCount === 0 && "findBand-no-results"
-        ),
-        children: matchCountLabel
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        title: "Previous match",
-        className: "btn next",
-        onClick: findPrevious,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.up })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        title: "Next match",
-        className: "btn prev",
-        onClick: findNext,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.down })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        type: "button",
-        title: "Close",
-        className: "btn close",
-        onClick: storeHideFind,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.close })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    FindBandUI,
+    {
+      inputRef: searchBoxRef,
+      onClose: storeHideFind,
+      onNext: findNext,
+      onPrevious: findPrevious,
+      onKeyDown: handleKeyDown,
+      onBeforeInput: handleBeforeInput,
+      onChange: handleInputChange,
+      noResults: matchCount !== null && matchCount === 0,
+      matchCount: matchCount ?? void 0,
+      matchIndex: matchCount !== null && matchCount > 0 ? currentMatchIndex - 1 : void 0
+    }
+  );
 };
 function windowFind(searchTerm, back) {
   return window.find(
@@ -166896,15 +167052,16 @@ const ChatViewVirtualListComponent = memo(
     );
   }
 );
-const tabPanel = "_tabPanel_6o9gh_1";
-const tabControls = "_tabControls_6o9gh_5";
-const fullWidth$1 = "_fullWidth_6o9gh_12";
-const padded = "_padded_6o9gh_25";
-const error$2 = "_error_6o9gh_30";
-const ansi = "_ansi_6o9gh_34";
-const noTop = "_noTop_6o9gh_38";
-const chat = "_chat_6o9gh_50";
-const transcriptContainer = "_transcriptContainer_6o9gh_58";
+const tabPanel = "_tabPanel_20s9q_1";
+const tabControls = "_tabControls_20s9q_5";
+const fullWidth$1 = "_fullWidth_20s9q_12";
+const padded = "_padded_20s9q_25";
+const error$2 = "_error_20s9q_30";
+const ansi = "_ansi_20s9q_34";
+const noTop = "_noTop_20s9q_38";
+const chat = "_chat_20s9q_50";
+const transcriptContainer = "_transcriptContainer_20s9q_58";
+const overflowVisible$1 = "_overflowVisible_20s9q_62";
 const styles$Z = {
   tabPanel,
   tabControls,
@@ -166914,7 +167071,8 @@ const styles$Z = {
   ansi,
   noTop,
   chat,
-  transcriptContainer
+  transcriptContainer,
+  overflowVisible: overflowVisible$1
 };
 function truncateMarkdown(markdown, maxLength = 250, ellipsis2 = "...") {
   if (!markdown || markdown.length <= maxLength) {
@@ -168805,7 +168963,8 @@ const formatTiming = (timestamp2, working_start) => {
     return formatDateTime(new Date(timestamp2));
   }
 };
-const formatTitle = (title2, total_tokens, working_start) => {
+const formatTitle = (title2, total_tokens, working_start, role2) => {
+  const titleWithRole = role2 ? `${title2} – ${role2} –` : title2;
   const subItems = [];
   if (total_tokens) {
     subItems.push(`${formatNumber(total_tokens)} tokens`);
@@ -168814,7 +168973,7 @@ const formatTitle = (title2, total_tokens, working_start) => {
     subItems.push(`${formatTime$1(working_start)}`);
   }
   const subtitle = subItems.length > 0 ? ` (${subItems.join(", ")})` : "";
-  return `${title2}${subtitle}`;
+  return `${titleWithRole}${subtitle}`;
 };
 const ApprovalEventView = ({
   eventNode,
@@ -169380,16 +169539,16 @@ const EventSection = ({
     children2
   ] });
 };
-const container$c = "_container_1hidt_1";
-const all = "_all_1hidt_6";
-const tableSelection = "_tableSelection_1hidt_12";
-const codePre = "_codePre_1hidt_22";
-const code$3 = "_code_1hidt_22";
-const progress$1 = "_progress_1hidt_34";
-const error$1 = "_error_1hidt_38";
-const toolConfig = "_toolConfig_1hidt_54";
-const toolChoice = "_toolChoice_1hidt_62";
-const traceback = "_traceback_1hidt_71";
+const container$c = "_container_1gr6b_1";
+const all = "_all_1gr6b_6";
+const tableSelection = "_tableSelection_1gr6b_12";
+const codePre = "_codePre_1gr6b_22";
+const code$3 = "_code_1gr6b_22";
+const progress$1 = "_progress_1gr6b_34";
+const error$1 = "_error_1gr6b_38";
+const toolConfig = "_toolConfig_1gr6b_54";
+const toolChoice = "_toolChoice_1gr6b_62";
+const traceback = "_traceback_1gr6b_71";
 const styles$J = {
   container: container$c,
   all,
@@ -169543,14 +169702,17 @@ const ModelEventView = ({
     }
   }
   const panelTitle = eventTitle(event);
-  const turnLabel2 = context?.turnInfo ? `turn ${context.turnInfo.turnNumber}/${context.turnInfo.totalTurns}` : void 0;
+  const outputRole = outputMessages.length > 0 ? outputMessages[0].role : void 0;
+  const outputTimestamp = event.completed ? formatDateTime(new Date(event.completed)) : void 0;
+  const baseTurnLabel = context?.turnInfo ? `turn ${context.turnInfo.turnNumber}/${context.turnInfo.totalTurns}` : void 0;
+  const turnLabel2 = [outputTimestamp, baseTurnLabel].filter(Boolean).join(" | ") || void 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     EventPanel,
     {
       eventNodeId: eventNode.id,
       depth: eventNode.depth,
-      className: className2,
-      title: formatTitle(panelTitle, totalUsage, callTime),
+      className: clsx(className2),
+      title: formatTitle(panelTitle, totalUsage, callTime, outputRole),
       subTitle: formatTiming(event.timestamp, event.working_start),
       icon: ApplicationIcons.model,
       turnLabel: turnLabel2,
@@ -169564,7 +169726,8 @@ const ModelEventView = ({
               numbered: false,
               toolCallStyle: showToolCalls ? "complete" : "omit",
               resolveToolCallsIntoPreviousMessage: context?.hasToolEvents !== false,
-              allowLinking: false
+              allowLinking: false,
+              unlabeledRoles: ["assistant"]
             }
           ),
           event.error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$J.error, children: [
@@ -180525,7 +180688,11 @@ const SampleDisplay = ({
             TabPanel,
             {
               id: kSampleTranscriptTabId,
-              className: clsx("sample-tab", styles$Z.transcriptContainer),
+              className: clsx(
+                "sample-tab",
+                styles$Z.transcriptContainer,
+                styles$Z.overflowVisible
+              ),
               title: "Transcript",
               onSelected: onSelectedTab,
               selected: effectiveSelectedTab === kSampleTranscriptTabId || effectiveSelectedTab === void 0,
@@ -180559,7 +180726,12 @@ const SampleDisplay = ({
             TabPanel,
             {
               id: kSampleMessagesTabId,
-              className: clsx("sample-tab", styles$Z.fullWidth, styles$Z.chat),
+              className: clsx(
+                "sample-tab",
+                styles$Z.fullWidth,
+                styles$Z.chat,
+                styles$Z.overflowVisible
+              ),
               title: "Messages",
               onSelected: onSelectedTab,
               selected: effectiveSelectedTab === kSampleMessagesTabId,
@@ -180930,7 +181102,8 @@ const SampleDetailComponent = ({
   }, [sampleData]);
   const sampleStatus2 = useStore((state) => state.sample.sampleStatus);
   const sampleMatchesRequest = useMemo(() => {
-    if (!sample2 || !sampleId || !epoch) return false;
+    if (!sampleId || !epoch) return false;
+    if (!sample2) return true;
     return String(sample2.id) === sampleId && sample2.epoch === parseInt(epoch, 10);
   }, [sample2, sampleId, epoch]);
   const showFind = useStore((state) => state.app.showFind);
@@ -181043,7 +181216,7 @@ const SampleDetailComponent = ({
           ] })
         }
       ),
-      sampleStatus2 !== "loading" && sample2 && sampleMatchesRequest && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      sampleStatus2 !== "loading" && sampleMatchesRequest && /* @__PURE__ */ jsxRuntimeExports.jsx(
         InlineSampleComponent,
         {
           showActivity: false,